:root{
  --it-purple:#4a154b;
  --it-blue:#64c3eb;
  --it-red:#ce375c;
  --it-yellow:#ecb22e;
  --it-green:#5bb381;

  --it-black:#1d1c1d;
  --it-ivory:#f7f2e8;

  --md-outline:#c3c8d1;
  --ink: var(--it-black);
  --ink2:#3e424a;

  --itre-maxh: 820px;

  --r:22px;
  --r2:18px;
  --shadow:0 18px 55px rgba(15,23,42,.12);
  --shadow2:0 10px 26px rgba(15,23,42,.10);

  --it-font-body: "Fields Light","Inter",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  --it-font-display: "Fields Display Semi Bold","Inter",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;

  /* Heading letter-spacing (used if globals.tracking not set) */
  --itre-heading-tracking: 0.06em;
}

/* Root isolation */
.itre-root{
  font-family: var(--it-font-body);
  color: var(--ink);
  line-height: 1.35;
  isolation: isolate;
}
.itre-root, .itre-root *{ box-sizing:border-box; }
.itre-root img{ max-width:100%; height:auto; display:block; }

.itre-root button,
.itre-root input,
.itre-root select,
.itre-root textarea{
  font: inherit;
  color: var(--ink) !important;
}

/* App backdrop (light, like your earlier look) */
.itre-app{
  padding:20px;
  background:
    radial-gradient(1100px 600px at 10% 0%, rgba(100,195,235,.18), transparent 65%),
    radial-gradient(900px 520px at 95% 10%, rgba(74,21,75,.16), transparent 60%),
    linear-gradient(180deg,#f6f8fb,#eef2f7);
  border-radius: var(--r);
}

/* Cards */
.itre-card{
  background: rgba(255,255,255,.76);
  border: 1px solid rgba(195,200,209,.65);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
}

/* Top bar */
.itre-top{
  padding:16px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}

.itre-brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width: 260px;
}

.itre-mark{
  width:44px;
  height:44px;
  border-radius:14px;
  overflow:hidden;
  display:grid;
  place-items:center;
  background: rgba(255,255,255,.25);
  border:1px solid rgba(195,200,209,.55);
  box-shadow: var(--shadow2);
}

.itre-logo{ width:86%; height:86%; object-fit:contain; display:block; }

.itre-mark-fallback{
  display:none;
  width:100%;
  height:100%;
  align-items:center;
  justify-content:center;
  font-family: var(--it-font-display);
  font-weight:900;
  color:#fff;
  background: linear-gradient(135deg,var(--it-purple),rgba(100,195,235,.92));
}
.itre-logo-missing .itre-logo{ display:none; }
.itre-logo-missing .itre-mark-fallback{ display:flex; }

.itre-title{
  font-family: var(--it-font-display);
  font-weight:900;
  letter-spacing:-.035em;
  font-size:17px;
}
.itre-sub{
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color: var(--ink2);
  opacity:.9;
  margin-top:2px;
}

/* Actions */
.itre-actions{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:flex-end;
  max-width:100%;
}
.itre-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
  border-radius:999px;
  padding:10px 14px;
  font-family: var(--it-font-display);
  font-weight:900;
  font-size:12px;
  border:1px solid rgba(195,200,209,.85);
  background: rgba(255,255,255,.78);
  cursor:pointer;
  transition: transform .08s ease, background .15s ease, box-shadow .15s ease;
}
.itre-btn:hover{ background: rgba(255,255,255,.95); }
.itre-btn:active{ transform: translateY(1px); }

.itre-btn-primary{
  border:none;
  color:#fff !important;
  background: linear-gradient(135deg,var(--it-purple),rgba(100,195,235,.92));
  box-shadow: 0 18px 40px rgba(15,23,42,.16);
}
.itre-btn-mini{
  border-radius:14px;
  padding:9px 12px;
}

/* Mobile actions scroll */
@media (max-width:1100px){
  .itre-actions{
    flex-wrap:nowrap;
    overflow-x:auto;
    padding-bottom:6px;
    -webkit-overflow-scrolling:touch;
  }
  .itre-actions::-webkit-scrollbar{ height:6px; }
}

/* Main layout */
.itre-main{
  margin-top:16px;
  display:grid;
  grid-template-columns: 420px 1fr;
  gap:16px;
  align-items:start;
}
@media (max-width:1100px){
  .itre-main{ grid-template-columns:1fr; }
}

.itre-panel,
.itre-preview{
  padding:16px;
  min-height:0;
}

/* Desktop stable height */
@media (min-width:1101px){
  .itre-panel,
  .itre-preview{
    height: min(var(--itre-maxh, 820px), calc(100dvh - 220px));
    overflow: hidden;
  }
  .itre-panel{ display:flex; flex-direction:column; }
  .itre-edit{ flex:1 1 auto; min-height:0; overflow:auto; padding-right:6px; }
  .itre-preview{ display:flex; flex-direction:column; }
  .itre-preview-body{ flex:1 1 auto; min-height:0; overflow:hidden; }
}

/* Headers inside */
.itre-panel-head,
.itre-preview-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.itre-h{
  font-size:12px;
  font-family: var(--it-font-display);
  font-weight:900;
  letter-spacing:.24em;
  text-transform:uppercase;
  color: var(--ink2);
}
.itre-small{
  font-size:12px;
  color: var(--ink2);
  opacity:.9;
  margin-top:4px;
}
.itre-mini-actions{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:nowrap;
}

/* Frame list */
.itre-list{
  margin-top:12px;
  border-top:1px solid rgba(195,200,209,.55);
  padding-top:12px;
  max-height:240px;
  overflow:auto;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.itre-item{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:12px;
  border-radius:18px;
  border:1px solid rgba(195,200,209,.55);
  background: rgba(255,255,255,.68);
  cursor:pointer;
  transition: background .15s ease, border-color .15s ease;
}
.itre-item:hover{ background:#fff; }
.itre-item.active{
  border-color: rgba(74,21,75,.35);
  background:#fff;
  box-shadow: 0 10px 22px rgba(15,23,42,.08);
}
.itre-badge{
  width:40px;
  height:40px;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-family: var(--it-font-display);
  font-weight:900;
  flex:0 0 40px;
  background: linear-gradient(135deg,var(--it-purple),rgba(100,195,235,.92));
}
.itre-item h4{
  margin:0;
  font-size:13px;
  font-family: var(--it-font-display);
  font-weight:900;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:260px;
}
.itre-item p{
  margin:4px 0 0;
  font-size:11px;
  color: var(--ink2);
  opacity:.9;
}

/* Editor */
.itre-edit{ margin-top:14px; }
.itre-grid2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
@media (max-width:520px){ .itre-grid2{ grid-template-columns:1fr; } }

.itre-field{ margin-top:12px; }
.itre-label{
  display:block;
  font-size:12px;
  font-family: var(--it-font-display);
  font-weight:900;
  margin:10px 0 6px;
}
.itre-input{
  width:100%;
  border-radius:14px;
  border:1px solid rgba(195,200,209,.7);
  background: rgba(255,255,255,.78);
  padding:10px 12px;
  outline:none;
  transition: box-shadow .15s ease, border-color .15s ease, background .15s ease;
}
.itre-input:focus{
  box-shadow:0 0 0 4px rgba(100,195,235,.22);
  border-color: rgba(100,195,235,.55);
  background:#fff;
}
.itre-ta{ height:120px; resize:vertical; }
.itre-ta-sm{ height:78px; resize:vertical; }
.itre-tip{
  font-size:11px;
  color: var(--ink2);
  opacity:.85;
  margin-top:6px;
}

/* Accent swatches */
.itre-swatches{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}
.itre-swatch{
  width:32px;
  height:32px;
  border-radius:999px;
  border:2px solid rgba(255,255,255,.95);
  box-shadow: var(--shadow2);
  cursor:pointer;
  position:relative;
}
.itre-swatch.is-active{
  outline: 3px solid rgba(29,28,29,.28);
  outline-offset: 2px;
}
.itre-swatch-sep{
  width:1px;
  height:22px;
  background: rgba(195,200,209,.7);
  margin: 0 2px;
}
.itre-color{
  width:36px;
  height:36px;
  border-radius:12px;
  border:1px solid rgba(195,200,209,.75);
  background:#fff;
  padding:2px;
  cursor:pointer;
}

/* Preview */
.itre-preview{
  display:flex;
  flex-direction:column;
  min-height:0;
}
.itre-preview-body{
  margin-top:12px;
  background:
    radial-gradient(700px 360px at 50% 0%, rgba(100,195,235,.10), transparent 70%),
    radial-gradient(680px 420px at 20% 80%, rgba(74,21,75,.08), transparent 70%);
  border-radius: calc(var(--r) - 6px);
  border: 1px dashed rgba(195,200,209,.55);

  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;

  display:flex;
  justify-content:center;
  align-items:center;
  padding: 12px;

  position:relative;
}
.itre-scaler{
  transform-origin: top center;
  will-change: transform;
}

.itre-footnote{
  margin-top:10px;
  border-top:1px solid rgba(195,200,209,.55);
  padding-top:10px;
  font-size:12px;
  color: var(--ink2);
  opacity:.9;
}

/* Export bucket */
.itre-export{
  position:fixed;
  left:-20000px;
  top:0;
  opacity:.001;
  pointer-events:none;
}

/* Modal */
.itre-modal{
  position:fixed;
  inset:0;
  background: rgba(15,23,42,.55);
  z-index:999999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
}
.itre-modal.hidden{ display:none; }
.itre-modal-card{
  width:min(920px,94vw);
  max-height:92vh;
  overflow:hidden;
  padding:14px;
}
.itre-modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:6px 6px 10px;
  border-bottom:1px solid rgba(195,200,209,.55);
}
.itre-json{
  width:100%;
  height:52vh;
  margin-top:12px;
  border-radius:14px;
  border:1px solid rgba(195,200,209,.7);
  padding:12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
  font-size:12px;
  background:#fff;
}
.itre-modal-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:12px;
}