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

  --it-black:#1d1c1d;
  --it-ivory:#f7f2e8;
  --it-light-blue:#e0f3fb;

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

  /* Frame sizing */
  --itce-maxh: 820px;
  --itce-vh-offset: 220px; /* header + padding allowance */

  /* Dynamic accent (JS updates these per active slide) */
  --accent: var(--it-purple);
  --accent-rgb: 74,21,75;

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

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

/* ------------------------------
   ROOT ISOLATION (theme-proofing)
------------------------------ */
.itce-root{
  font-family: var(--it-font-body);
  color: var(--ink);
  line-height: 1.35;
  isolation: isolate;
}

.itce-root, .itce-root *{ box-sizing:border-box; }
.itce-root img{ max-width:100%; height:auto; display:block; }

.itce-root button,
.itce-root input,
.itce-root select,
.itce-root textarea{
  font: inherit;
  color: var(--ink) !important; /* frontend safety */
}

/* ------------------------------
   APP BACKDROP + CARDS
------------------------------ */
.itce-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);
}

.itce-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
------------------------------ */
.itce-top{
  padding:16px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}

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

.itce-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);
}

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

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

.itce-title{
  font-family: var(--it-font-display);
  font-weight:800;
  letter-spacing:-.035em;
  font-size:17px;
}

.itce-sub{
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color: var(--ink2);
  opacity:.9;
  margin-top:2px;
}

/* ------------------------------
   ACTIONS
------------------------------ */
.itce-actions{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:flex-end;
  max-width:100%;
}

.itce-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:800;
  font-size:13px;
  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;
}
.itce-btn:hover{ background: rgba(255,255,255,.95); }
.itce-btn:active{ transform: translateY(1px); }

.itce-btn-primary{
  border:none;
  color:#fff !important;
  background: linear-gradient(135deg, var(--accent), rgba(100,195,235,.92));
  box-shadow: 0 18px 40px rgba(15,23,42,.16);
}

.itce-btn-mini{
  border-radius:14px;
  padding:9px 12px;
}

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

/* ------------------------------
   MAIN LAYOUT
------------------------------ */
.itce-main{
  margin-top:16px;
  display:grid;
  grid-template-columns: 420px 1fr;
  gap:16px;
  align-items:start; /* prevents stretching */
}

@media (max-width:1100px){
  .itce-main{ grid-template-columns:1fr; }
}

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

/* ------------------------------
   PANEL/SECTION HEADERS
------------------------------ */
.itce-panel-head,
.itce-preview-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.itce-h{
  font-size:12px;
  font-family: var(--it-font-display);
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
  color: var(--ink2);
}

.itce-small{
  font-size:12px;
  color: var(--ink2);
  opacity:.9;
  margin-top:4px;
}

.itce-mini-actions{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:nowrap;
}

/* ------------------------------
   SLIDE LIST
------------------------------ */
.itce-list{
  margin-top:12px;
  border-top:1px solid rgba(195,200,209,.55);
  padding-top:12px;
  max-height: 220px;
  overflow:auto;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.itce-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, box-shadow .15s ease;
}
.itce-item:hover{ background:#fff; }

.itce-item.active{
  border-color: rgba(var(--accent-rgb), .38);
  background:#fff;
  box-shadow: 0 10px 22px rgba(15,23,42,.08);
}

.itce-num{
  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;
}

.itce-item h4{
  margin:0;
  font-size:13px;
  font-family: var(--it-font-display);
  font-weight:800;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:280px;
}
.itce-item p{
  margin:4px 0 0;
  font-size:11px;
  color: var(--ink2);
  opacity:.9;
}

/* ------------------------------
   EDITOR
------------------------------ */
.itce-edit{ margin-top:14px; }

.itce-grid2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
@media (max-width:520px){
  .itce-grid2{ grid-template-columns:1fr; }
}

.itce-label{
  display:block;
  font-size:12px;
  font-family: var(--it-font-display);
  font-weight:800;
  margin:10px 0 6px;
}

.itce-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;
}

.itce-input:focus{
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .22);
  border-color: rgba(var(--accent-rgb), .55);
  background:#fff;
}

.itce-ta{ height:100px; resize:vertical; }
.itce-ta-sm{ height:68px; resize:vertical; }

.itce-tip{
  font-size:11px;
  color: var(--ink2);
  opacity:.85;
  margin-top:6px;
}

/* ------------------------------
   ACCENT CONTROLS (swatches + picker)
   Works with:
   - .itce-swatch[data-action="accent"][data-color="#xxxxxx"]
   - input[type="color"].itce-color[data-el="accentPicker"]
------------------------------ */
.itce-swatches{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  margin-top:10px;
}

.itce-swatch{
  width:32px;
  height:32px;
  border-radius:999px;
  border: 2px solid rgba(255,255,255,.95);
  box-shadow: var(--shadow2);
  cursor:pointer;
  position:relative;
  padding:0;
  background: var(--accent); /* fallback if no inline bg */
}

.itce-swatch:hover{
  transform: translateY(-1px);
}

.itce-swatch:focus-visible{
  outline: 3px solid rgba(var(--accent-rgb), .38);
  outline-offset: 2px;
}

.itce-swatch.is-active{
  outline: 3px solid rgba(29,28,29,.28);
  outline-offset: 2px;
}

.itce-swatch.is-active::after{
  content:"";
  position:absolute;
  inset:7px;
  border-radius:999px;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.92);
  pointer-events:none;
}

.itce-swatch-sep{
  width:1px;
  height:22px;
  background: rgba(195,200,209,.7);
  margin: 0 2px;
}

.itce-color{
  width:36px;
  height:36px;
  border-radius:12px;
  border:1px solid rgba(195,200,209,.75);
  background:#fff;
  padding:2px;
  cursor:pointer;
}

/* ------------------------------
   PREVIEW
------------------------------ */
.itce-preview{
  display:flex;
  flex-direction:column;
  min-height:0;
}

.itce-preview-body{
  margin-top:12px;

  background: radial-gradient(700px 360px at 50% 0%, rgba(100,195,235,.10), transparent 70%);
  border-radius: calc(var(--r) - 6px);
  border: 1px dashed rgba(195,200,209,.55);

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

  /* Desktop: keep stable and let JS fit-scale */
  overflow: hidden;

  display:flex;
  justify-content:center;
  align-items:flex-start;

  /* Enough padding so slide shadow does not get clipped */
  padding: 16px;

  position:relative;
}

.itce-preview-body::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  border-radius: inherit;
  z-index:0;
}
.itce-preview-body > *{ position:relative; z-index:1; }

.itce-scaler{
  transform-origin: top center;
  will-change: transform;
}

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

/* ------------------------------
   MODAL
------------------------------ */
.itce-modal{
  position:fixed;
  inset:0;
  background: rgba(15,23,42,.55);
  z-index:999999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
}
.itce-modal.hidden{ display:none; }

.itce-modal-card{
  width:min(920px,94vw);
  max-height:92vh;
  overflow:hidden;
  padding:14px;
}

.itce-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);
}

.itce-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;
}

.itce-modal-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:12px;
}

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

/* ------------------------------
   RESPONSIVE + STABLE HEIGHT FRAME
------------------------------ */

/* Tighter on smaller screens */
@media (max-width:1100px){
  .itce-panel,
  .itce-preview{ padding: 12px; }

  .itce-list{ max-height: 170px; }

  .itce-preview-body{
    overflow:auto; /* allow scroll on mobile */
  }
}

/* Desktop/laptop: stable height + internal scrolling */
@media (min-width:1101px){
  .itce-panel,
  .itce-preview{
    height: min(var(--itce-maxh, 820px), calc(100dvh - var(--itce-vh-offset, 220px)));
    overflow: hidden;  /* prevent column growth */
  }

  .itce-panel{
    display:flex;
    flex-direction:column;
    min-height:0;
  }

  /* List stays compact; editor scrolls */
  .itce-list{ flex: 0 0 auto; }
  .itce-edit{
    flex: 1 1 auto;
    min-height:0;
    overflow:auto;
    padding-right:6px;
  }

  .itce-preview{
    display:flex;
    flex-direction:column;
    min-height:0;
  }

  /* Preview body consumes remaining space */
  .itce-preview-body{
    flex: 1 1 auto;
    min-height:0;
    overflow:hidden;
  }
}