@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ═══════════════════════════════════════════════════════
   DESIGN TOKENS — Warm Editorial Light
═══════════════════════════════════════════════════════ */
:root {
  /* Backgrounds */
  --bg:          #f4f2ec;     /* warm parchment */
  --stage-bg:    #e9e6dc;     /* canvas board */
  --panel:       #ffffff;
  --panel-2:     #f9f8f5;     /* subtle inset bg */
  --topbar:      #ffffff;

  /* Text */
  --txt:         #18181f;     /* near-black */
  --txt2:        #6b6b7a;     /* medium */
  --txt3:        #a8a8b8;     /* muted */

  /* Brand */
  --red:         #dc2626;
  --red-a:       rgba(220,38,38,.08);
  --red-b:       rgba(220,38,38,.16);
  --red-c:       rgba(220,38,38,.24);
  --green:       #16a34a;
  --green-a:     rgba(22,163,74,.1);
  --purple:      #7c3aed;
  --purple-a:    rgba(124,58,237,.1);

  /* Borders / Shadows */
  --bdr:         rgba(0,0,0,.08);
  --bdr2:        rgba(0,0,0,.12);
  --sh-sm:       0 1px 4px rgba(0,0,0,.06);
  --sh-md:       0 4px 16px rgba(0,0,0,.09);
  --sh-lg:       0 8px 40px rgba(0,0,0,.13);
  --sh-canvas:   0 12px 50px rgba(0,0,0,.18), 0 0 0 1px rgba(0,0,0,.07);

  /* Layout */
  --top:         52px;
  --pw:          284px;       /* inspector panel width */
  --font:        'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --ease:        cubic-bezier(.4, 0, .2, 1);
}

/* ═══════════════════════════════════════════════════════
   BASE
═══════════════════════════════════════════════════════ */
html, body {
  height: 100%;
  font-family: var(--font);
  background: var(--bg);
  color: var(--txt);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ═══════════════════════════════════════════════════════
   STUDIO WRAPPER
═══════════════════════════════════════════════════════ */
.studio {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

/* ═══════════════════════════════════════════════════════
   TOPBAR
═══════════════════════════════════════════════════════ */
.topbar {
  height: var(--top);
  background: var(--topbar);
  border-bottom: 1px solid var(--bdr);
  display: flex;
  align-items: center;
  padding: 0 14px;
  gap: 8px;
  flex-shrink: 0;
  z-index: 60;
  box-shadow: var(--sh-sm);
}

.tb-brand { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.tb-logo  { height:22px; }
.tb-name  { font-size:15px; font-weight:800; color:var(--txt); letter-spacing:-.4px; }
.tb-name em { color:var(--red); font-style:normal; }
.tb-sep   { width:1px; height:18px; background:var(--bdr2); flex-shrink:0; }
.tb-grow  { flex:1; min-width:0; }

/* Dim chip */
.tb-dim {
  font-size:10.5px; font-weight:700; letter-spacing:.3px;
  color:var(--red); background:var(--red-a);
  border:1px solid var(--red-c); padding:4px 10px; border-radius:100px;
  flex-shrink:0;
}

/* Format selector */
.tb-formats {
  display:flex; gap:3px;
  background:var(--panel-2);
  border:1px solid var(--bdr);
  padding:3px; border-radius:10px;
}
.fmt-btn {
  display:flex; align-items:center; gap:6px;
  padding:5px 10px;
  border:none; border-radius:7px;
  background:transparent; color:var(--txt3);
  cursor:pointer; font-family:var(--font); font-size:11.5px; font-weight:600;
  transition:all .15s var(--ease);
}
.fmt-btn:hover { color:var(--txt2); background:rgba(0,0,0,.04); }
.fmt-btn.active { background:var(--red-a); color:var(--red); }
.fmt-shape { background:currentColor; border-radius:2px; opacity:.6; transition:opacity .15s; }
.fmt-btn.active .fmt-shape { opacity:1; }
.fmt-shape-45  { width:10px; height:13px; }
.fmt-shape-11  { width:12px; height:12px; }
.fmt-shape-916 { width:7px;  height:13px; }

/* AI button */
.tb-ai {
  padding:7px 13px; border:1px solid var(--bdr2); border-radius:9px;
  background:var(--panel); color:var(--txt2); font-family:var(--font);
  font-size:12px; font-weight:600; cursor:pointer;
  display:flex; align-items:center; gap:6px;
  transition:all .15s; flex-shrink:0;
  box-shadow:var(--sh-sm);
}
.tb-ai:hover { color:var(--purple); border-color:rgba(124,58,237,.3); background:var(--purple-a); }
.tb-ai svg { color:var(--purple); }

/* Export button */
.tb-export {
  padding:8px 16px; background:var(--red); color:#fff;
  border:none; border-radius:9px;
  font-family:var(--font); font-size:13px; font-weight:700;
  cursor:pointer; display:flex; align-items:center; gap:7px;
  transition:opacity .15s, transform .15s, box-shadow .15s;
  box-shadow:0 2px 12px var(--red-b); flex-shrink:0;
}
.tb-export:hover { opacity:.9; transform:translateY(-1px); box-shadow:0 4px 20px var(--red-b); }
.tb-export:active { transform:none; }

/* ═══════════════════════════════════════════════════════
   STAGE — Canvas Board
═══════════════════════════════════════════════════════ */
.stage {
  flex:1;
  background-color: var(--stage-bg);
  background-image: radial-gradient(circle, rgba(0,0,0,.12) 1px, transparent 0);
  background-size: 20px 20px;
  display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden;
  padding: 32px 32px 32px;
  padding-right: calc(var(--pw) + 32px); /* make room for inspector */
  transition: padding-right .3s var(--ease);
}

.stage-pill {
  position:absolute; top:14px; left:50%;
  transform:translateX(calc(-50% - var(--pw)/2)); /* center in canvas area */
  font-size:11px; font-weight:600; color:var(--txt3);
  background:rgba(255,255,255,.7); backdrop-filter:blur(8px);
  border:1px solid rgba(0,0,0,.07); padding:4px 14px; border-radius:100px;
  pointer-events:none; z-index:5; white-space:nowrap;
  box-shadow:var(--sh-sm);
}

#previewCanvas {
  display: block;
  position: relative;
  z-index: 1;
  max-height: calc(100vh - var(--top) - 70px);
  max-width: 100%;
  aspect-ratio: 4 / 5;
  height: auto;
  border-radius: 14px;
  box-shadow: var(--sh-canvas);
  cursor: grab;
}
#previewCanvas:active { cursor:grabbing; }

/* ═══════════════════════════════════════════════════════
   RIGHT INSPECTOR PANEL (always visible on desktop)
═══════════════════════════════════════════════════════ */
.rpanel {
  position:fixed;
  right:0; top:var(--top); bottom:0;
  width:var(--pw);
  background:var(--panel);
  border-left:1px solid var(--bdr);
  box-shadow:-2px 0 20px rgba(0,0,0,.06);
  display:flex; flex-direction:column;
  z-index:100; overflow:hidden;
}

/* TAB RAIL (Figma-style) */
.rp-tabs {
  display:flex;
  border-bottom:1px solid var(--bdr);
  background:var(--panel-2);
  flex-shrink:0;
  padding: 4px 6px;
  gap: 2px;
}
.rp-tab {
  flex:1; display:flex; flex-direction:column;
  align-items:center; gap:4px;
  padding:8px 4px;
  border:none; border-radius:8px;
  background:transparent; color:var(--txt3);
  cursor:pointer; font-family:var(--font);
  font-size:10px; font-weight:600;
  transition:all .15s var(--ease);
}
.rp-tab svg { transition:stroke .15s; }
.rp-tab:hover { background:rgba(0,0,0,.04); color:var(--txt2); }
.rp-tab.active { background:var(--red-a); color:var(--red); }

/* Panel header */
.rp-head {
  height:44px; display:flex; align-items:center;
  justify-content:space-between; padding:0 16px;
  border-bottom:1px solid var(--bdr); flex-shrink:0;
}
.rp-title { font-size:13px; font-weight:700; color:var(--txt); letter-spacing:-.1px; }
.rp-close {
  width:28px; height:28px; display:flex; align-items:center; justify-content:center;
  border:none; background:rgba(0,0,0,.04); border-radius:7px;
  color:var(--txt3); cursor:pointer; transition:all .15s;
  display:none; /* hidden on desktop, shown on mobile */
}
.rp-close:hover { background:rgba(0,0,0,.08); color:var(--txt); }

/* Scrollable body */
.rp-body {
  flex:1; overflow-y:auto; overflow-x:hidden;
  scrollbar-width:thin; scrollbar-color:rgba(0,0,0,.1) transparent;
}
.rp-body::-webkit-scrollbar { width:4px; }
.rp-body::-webkit-scrollbar-thumb { background:rgba(0,0,0,.1); border-radius:4px; }

/* Tool panels */
.tp { display:none; }
.tp.active { display:block; }

/* ═══════════════════════════════════════════════════════
   TP LAYOUT ATOMS
═══════════════════════════════════════════════════════ */
.tp-sec  { padding:18px 16px; }
.tp-div  { height:1px; background:var(--bdr); }
.tp-lbl  {
  font-size:10.5px; font-weight:700;
  text-transform:uppercase; letter-spacing:.8px;
  color:var(--txt3); margin-bottom:12px;
  display:flex; align-items:center; gap:7px;
}
.chip {
  font-size:9px; font-weight:700; letter-spacing:.3px;
  padding:2px 6px; border-radius:100px;
  background:rgba(0,0,0,.05); color:var(--txt3);
  text-transform:none;
}
.chip.green { background:var(--green-a); color:var(--green); }
.chip.dim   { }

/* ═══════════════════════════════════════════════════════
   TEMPLATE GRID
═══════════════════════════════════════════════════════ */
.tmpl-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:9px;
}
.tmpl-btn {
  background:var(--panel-2);
  border:1.5px solid var(--bdr);
  border-radius:11px; padding:9px 9px 7px;
  cursor:pointer; display:flex; flex-direction:column;
  align-items:center; gap:7px;
  font-family:var(--font); font-size:11px; font-weight:600; color:var(--txt2);
  transition:all .15s var(--ease);
}
.tmpl-btn:hover { border-color:var(--bdr2); background:var(--panel); transform:translateY(-1px); box-shadow:var(--sh-md); }
.tmpl-btn.active { border-color:var(--red); background:var(--red-a); color:var(--red); box-shadow:0 0 0 3px var(--red-a); }

/* Mini template previews */
.tmpl-prev { width:50px; height:64px; border-radius:6px; overflow:hidden; position:relative; flex-shrink:0; }
.tp-img-bg { position:absolute;inset:0;background:linear-gradient(135deg,#1e2640,#0d1120); }
.tp-grad-bottom { position:absolute;bottom:0;left:0;right:0;height:58%;background:linear-gradient(to bottom,transparent,rgba(0,0,0,.92)); }
.tp-grad-strong { position:absolute;inset:0;background:linear-gradient(to bottom,transparent 25%,rgba(0,0,0,.96) 100%); }
.tp-logo-center { position:absolute;top:6px;left:50%;transform:translateX(-50%);width:20px;height:4px;background:rgba(255,255,255,.85);border-radius:2px; }
.tp-logo-corner { position:absolute;bottom:7px;right:4px;width:13px;height:4px;background:rgba(255,255,255,.7);border-radius:1px; }
.tp-logo-tr { position:absolute;top:6px;right:4px;width:13px;height:4px;background:rgba(255,255,255,.75);border-radius:1px; }
.tp-red-topband { position:absolute;top:0;left:0;right:0;height:13px;background:#dc2626;display:flex;align-items:center;justify-content:center; }
.tp-logo-in-band { width:20px;height:4px;background:rgba(255,255,255,.9);border-radius:1px; }
.tp-vline { position:absolute;bottom:7px;left:6px;width:2px;height:26px;background:#dc2626; }
.tp-hline { position:absolute;bottom:28px;left:6px;right:6px;height:2px;background:#dc2626; }
.tp-text-lines { position:absolute;bottom:7px;left:11px;right:5px;display:flex;flex-direction:column;gap:3px; }
.tp-text-center { position:absolute;bottom:7px;left:5px;right:5px;display:flex;flex-direction:column;align-items:center;gap:3px; }
.tp-tl { height:2.5px;border-radius:1px;background:rgba(255,255,255,.78); }
.tp-tl-w { width:100%; }
.tp-tl-m { width:74%; }
.tp-tl-s { width:50%;background:rgba(255,255,255,.38); }
.tp-flash-badge { position:absolute;top:5px;left:5px;background:#dc2626;color:#fff;font-size:5px;font-weight:900;letter-spacing:.05em;padding:2px 3px;border-radius:2px;font-family:var(--font); }

/* ═══════════════════════════════════════════════════════
   UPLOAD ZONE
═══════════════════════════════════════════════════════ */
.uz {
  position:relative; border:1.5px dashed rgba(0,0,0,.14);
  border-radius:11px; overflow:hidden; cursor:pointer;
  transition:border-color .18s, background .18s;
  background:var(--panel-2);
}
.uz:hover    { border-color:var(--red); background:var(--red-a); }
.uz.over     { border-color:var(--red); background:var(--red-b); }
.uz.filled   { border-color:rgba(22,163,74,.4); border-style:solid; background:rgba(22,163,74,.04); }
.uz input[type=file] { position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%; }
.uz-sm .uz-empty { padding:16px; }

.uz-empty   { padding:24px 18px; text-align:center; pointer-events:none; }
.uz-icon    { width:40px;height:40px;background:var(--red-a);border-radius:10px;display:flex;align-items:center;justify-content:center;margin:0 auto 11px;color:var(--red);transition:background .18s; }
.uz:hover .uz-icon { background:var(--red-b); }
.uz-t1      { font-size:13.5px;font-weight:600;color:var(--txt);margin-bottom:4px; }
.uz-t2      { font-size:12px;color:var(--txt3);line-height:1.5; }
.uz-warn    { font-size:11px;color:#dc2626;margin-top:6px;opacity:.7; }
.uz-done    { padding:12px; }
.uz-thumb   { width:100%;height:110px;object-fit:cover;border-radius:7px;display:block;background:#e0ddd5; }
.uz-meta    { display:flex;align-items:center;justify-content:space-between;margin-top:9px; }
.uz-fname   { font-size:12px;color:var(--txt2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:155px; }
.uz-chg     { font-size:12px;font-weight:600;color:var(--red);border:none;background:none;cursor:pointer;padding:0;flex-shrink:0; }
.uz-chg:hover { opacity:.7; }

.audio-dot  { width:30px;height:30px;border-radius:50%;background:var(--red-a);color:var(--red);display:flex;align-items:center;justify-content:center;flex-shrink:0; }

/* ═══════════════════════════════════════════════════════
   CONTROLS
═══════════════════════════════════════════════════════ */
.ctrl-g    { }
.ctrl-row  { display:flex;align-items:center;justify-content:space-between;margin-bottom:7px; }
.ctrl-l    { font-size:13px;font-weight:500;color:var(--txt2); }
.ctrl-v    { font-size:13px;font-weight:700;color:var(--txt); }
.ctrl-hint { font-size:11.5px;color:var(--txt3);margin-top:8px;line-height:1.5; }

/* ═══════════════════════════════════════════════════════
   RANGE SLIDER
═══════════════════════════════════════════════════════ */
input[type=range] {
  -webkit-appearance:none; appearance:none;
  width:100%; height:3px; border-radius:3px;
  background:rgba(0,0,0,.1);
  outline:none; cursor:pointer; display:block;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance:none;
  width:16px; height:16px; border-radius:50%;
  background:var(--red); border:2.5px solid #fff;
  box-shadow:0 1px 6px rgba(220,38,38,.35);
  cursor:pointer; transition:transform .15s;
}
input[type=range]::-webkit-slider-thumb:hover { transform:scale(1.2); }

/* ═══════════════════════════════════════════════════════
   SEGMENT CONTROL
═══════════════════════════════════════════════════════ */
.seg {
  display:flex; background:var(--panel-2);
  border:1px solid var(--bdr); border-radius:9px;
  padding:3px; gap:2px;
}
.seg-btn {
  flex:1; border:none; padding:8px 5px;
  font-family:var(--font); font-size:12px; font-weight:600;
  border-radius:6px; background:transparent; color:var(--txt3);
  cursor:pointer; transition:all .15s;
}
.seg-btn:hover { color:var(--txt2); }
.seg-btn.active { background:var(--panel); color:var(--txt); box-shadow:var(--sh-sm); }

/* Legacy compat */
.speed-btn { flex:1;border:none;padding:8px 4px;font-family:var(--font);font-size:11.5px;font-weight:600;border-radius:6px;background:transparent;color:var(--txt3);cursor:pointer;transition:all .15s; }
.speed-btn:hover { color:var(--txt2); }
.speed-btn.active { background:var(--panel);color:var(--txt);box-shadow:var(--sh-sm); }
.drag-target-btn { flex:1;border:none;padding:8px 5px;font-family:var(--font);font-size:12px;font-weight:600;border-radius:6px;background:transparent;color:var(--txt3);cursor:pointer;transition:all .15s; }
.drag-target-btn.active { background:var(--panel);color:var(--txt);box-shadow:var(--sh-sm); }

/* ═══════════════════════════════════════════════════════
   BADGE GRID
═══════════════════════════════════════════════════════ */
.badge-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:7px;
}
.badge-btn {
  padding:9px 7px; border-radius:8px; font-family:var(--font);
  font-size:11px; font-weight:700; cursor:pointer;
  border:1.5px solid var(--bdr); background:var(--panel-2);
  color:var(--txt2); transition:all .15s; text-align:center;
}
.badge-btn:hover { border-color:var(--bdr2); color:var(--txt); background:var(--panel); box-shadow:var(--sh-sm); }
.badge-btn.active { background:var(--red-a); color:var(--red); border-color:var(--red-c); box-shadow:0 0 0 2px var(--red-a); }

/* ═══════════════════════════════════════════════════════
   TEXTAREA
═══════════════════════════════════════════════════════ */
.ta {
  width:100%; background:var(--panel-2); border:1.5px solid var(--bdr);
  border-radius:9px; padding:11px 13px;
  font-family:var(--font); font-size:14px; line-height:1.6;
  color:var(--txt); resize:none; outline:none;
  transition:border-color .15s, box-shadow .15s;
}
.ta::placeholder { color:var(--txt3); }
.ta:focus { border-color:rgba(220,38,38,.4); background:var(--panel); box-shadow:0 0 0 3px var(--red-a); }
.char-row { display:flex;justify-content:flex-end;margin-top:5px; }
.char-ct  { font-size:11px;color:var(--txt3); }
.char-ct.warn { color:#d97706; }
.char-ct.over { color:var(--red); }

/* Legacy textarea aliases */
.dark-ta,.field-ta { width:100%;background:var(--panel-2);border:1.5px solid var(--bdr);border-radius:9px;padding:11px 13px;font-family:var(--font);font-size:14px;line-height:1.6;color:var(--txt);resize:none;outline:none;transition:border-color .15s,box-shadow .15s; }
.dark-ta::placeholder,.field-ta::placeholder { color:var(--txt3); }
.dark-ta:focus,.field-ta:focus { border-color:rgba(220,38,38,.4);background:var(--panel);box-shadow:0 0 0 3px var(--red-a); }

/* ═══════════════════════════════════════════════════════
   SMALL BUTTONS
═══════════════════════════════════════════════════════ */
.r2btn { display:flex;gap:8px; }
.xbtn {
  flex:1;padding:9px;border:1.5px solid var(--bdr);border-radius:8px;font-family:var(--font);font-size:12px;font-weight:600;cursor:pointer;background:var(--panel-2);color:var(--txt2);transition:all .15s;text-align:center;
}
.xbtn:hover { background:var(--panel);border-color:var(--bdr2);color:var(--txt);box-shadow:var(--sh-sm); }
.xbtn.green { background:var(--green-a);color:var(--green);border-color:rgba(22,163,74,.2); }
.xbtn.green:hover { background:var(--green);color:#fff; }

/* ═══════════════════════════════════════════════════════
   DOWNLOAD BUTTON
═══════════════════════════════════════════════════════ */
.btn-dl-big {
  width:100%; padding:14px 20px; background:var(--red); color:#fff;
  border:none; border-radius:11px;
  font-family:var(--font); font-size:15px; font-weight:700;
  cursor:pointer; display:flex; align-items:center; justify-content:center; gap:9px;
  transition:opacity .18s, transform .15s, box-shadow .18s;
  box-shadow:0 4px 22px var(--red-b);
}
.btn-dl-big:hover { opacity:.9; transform:translateY(-1px); box-shadow:0 7px 28px var(--red-c); }
.btn-dl-big:active { transform:none; }

.btn-ghost-sm {
  width:100%;padding:10px;background:transparent;border:1.5px solid var(--bdr);
  border-radius:10px;font-family:var(--font);font-size:13px;font-weight:500;
  color:var(--txt3);cursor:pointer;margin-top:8px;
  display:flex;align-items:center;justify-content:center;gap:6px;transition:all .15s;
}
.btn-ghost-sm:hover { border-color:var(--bdr2);color:var(--txt2);background:var(--panel-2); }

/* Legacy button aliases */
.btn-dl { width:100%;padding:14px;background:var(--red);color:#fff;border:none;border-radius:11px;font-family:var(--font);font-size:14px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:opacity .18s,transform .15s;box-shadow:0 4px 20px var(--red-b); }
.btn-dl:hover { opacity:.9;transform:translateY(-1px); }
.btn-ghost { width:100%;padding:10px;background:transparent;border:1.5px solid var(--bdr);border-radius:10px;font-family:var(--font);font-size:13px;font-weight:500;color:var(--txt3);cursor:pointer;margin-top:8px;display:flex;align-items:center;justify-content:center;gap:6px;transition:all .15s; }
.btn-ghost:hover { border-color:var(--bdr2);color:var(--txt2); }

/* ═══════════════════════════════════════════════════════
   EXPORT PROGRESS
═══════════════════════════════════════════════════════ */
.prog-bg  { width:100%;height:4px;background:rgba(0,0,0,.08);border-radius:10px;overflow:hidden;margin-bottom:10px; }
.prog-fill { height:100%;background:linear-gradient(90deg,var(--red),var(--purple));border-radius:10px;width:0%;transition:width .1s linear; }
.prog-txt { font-size:12px;font-weight:600;color:var(--txt2);text-align:center; }

/* Legacy */
.export-progress-container { background:var(--panel-2);border-radius:10px;padding:12px;border:1px solid var(--bdr); }
.export-progress-bar-bg { width:100%;height:4px;background:rgba(0,0,0,.08);border-radius:10px;overflow:hidden;margin-bottom:8px; }
.export-progress-bar-fill { height:100%;background:linear-gradient(90deg,var(--red),var(--purple));border-radius:10px;width:0%;transition:width .1s linear; }
.export-progress-text { font-size:12px;font-weight:600;color:var(--txt2);text-align:center; }

/* ═══════════════════════════════════════════════════════
   CDN / QR
═══════════════════════════════════════════════════════ */
.cdn-btn {
  display:flex;align-items:center;gap:8px;padding:10px 13px;
  background:var(--panel-2);border:1.5px solid var(--bdr);border-radius:9px;
  color:var(--txt2);font-family:var(--font);font-size:12.5px;font-weight:600;
  cursor:pointer;text-decoration:none;transition:all .15s;width:100%;
}
.cdn-btn:hover { border-color:var(--bdr2);color:var(--txt);background:var(--panel);box-shadow:var(--sh-sm); }
.btn-cdn-action { display:flex;align-items:center;justify-content:center;gap:6px;padding:10px 13px;background:var(--panel-2);border:1.5px solid var(--bdr);border-radius:9px;color:var(--txt2);font-family:var(--font);font-size:12px;font-weight:600;cursor:pointer;text-decoration:none;transition:all .15s;width:100%; }
.btn-cdn-action:hover { border-color:var(--bdr2);color:var(--txt);box-shadow:var(--sh-sm); }
/* Legacy compat */
.cdn-card { background:var(--panel-2);border:1px solid var(--bdr);border-radius:11px;padding:14px; }
.cdn-card-header { display:flex;align-items:center;justify-content:space-between;font-size:12.5px;font-weight:700;margin-bottom:8px; }
.cdn-hint { font-size:12px;color:var(--txt3);margin-bottom:12px;line-height:1.5; }
.cdn-badge { font-size:9px;font-weight:700;padding:2px 7px;border-radius:100px;background:var(--green-a);color:var(--green); }
.cdn-actions { display:flex;flex-direction:column;gap:6px; }
.qr-code-wrapper { margin-top:10px;padding:14px;text-align:center;border:1px solid var(--bdr);border-radius:10px;background:var(--panel-2); }
.qr-code-img { width:140px;height:140px;display:block;margin:0 auto;border-radius:6px; }
.qr-code-sub { font-size:11px;color:var(--txt3);margin-top:8px;line-height:1.4; }

/* ═══════════════════════════════════════════════════════
   MOBILE BOTTOM NAV (hidden on desktop)
═══════════════════════════════════════════════════════ */
.floatnav {
  display: none; /* hidden on desktop */
  position: fixed;
  bottom: 14px; left: 50%;
  transform: translateX(-50%);
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(0,0,0,.1);
  border-radius: 22px;
  padding: 7px 8px;
  gap: 2px;
  z-index: 150;
  box-shadow: 0 8px 32px rgba(0,0,0,.14), 0 2px 8px rgba(0,0,0,.06);
}
.fnav {
  display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:9px 14px;border:none;border-radius:15px;
  background:transparent;color:rgba(0,0,0,.28);
  cursor:pointer;font-family:var(--font);font-size:10.5px;font-weight:600;
  transition:all .2s var(--ease);white-space:nowrap;
}
.fnav:hover  { background:rgba(0,0,0,.05);color:rgba(0,0,0,.65); }
.fnav.active { background:var(--red-a);color:var(--red); }

/* ═══════════════════════════════════════════════════════
   LOGIN
═══════════════════════════════════════════════════════ */
.login-overlay {
  position:fixed;inset:0;background:var(--bg);
  display:flex;align-items:center;justify-content:center;z-index:9999;
  transition:opacity .4s,visibility .4s;
}
.login-card {
  background:var(--panel);padding:48px 44px;border-radius:22px;
  border:1px solid var(--bdr);width:380px;text-align:center;
  box-shadow:var(--sh-lg);
}
.login-logo    { height:48px;margin-bottom:20px; }
.login-title   { font-size:30px;font-weight:800;color:var(--txt);letter-spacing:-.6px;margin-bottom:6px; }
.login-title em { color:var(--red);font-style:normal; }
.login-sub     { font-size:13.5px;color:var(--txt3);margin-bottom:32px; }
.login-input {
  width:100%;padding:13px 18px;background:var(--panel-2);border:1.5px solid var(--bdr);border-radius:11px;font-family:var(--font);font-size:14px;color:var(--txt);outline:none;margin-bottom:12px;text-align:center;transition:border-color .2s,box-shadow .2s;
}
.login-input::placeholder { color:var(--txt3); }
.login-input:focus { border-color:rgba(220,38,38,.4);box-shadow:0 0 0 3px var(--red-a); }
.login-btn {
  width:100%;padding:13px;background:var(--red);color:#fff;border:none;border-radius:11px;font-family:var(--font);font-size:14px;font-weight:700;cursor:pointer;transition:opacity .2s;box-shadow:0 3px 16px var(--red-b);
}
.login-btn:hover { opacity:.9; }
.login-btn:disabled { opacity:.4;cursor:not-allowed; }
.login-card form { margin:0;padding:0; }
.login-footer { font-size:11px;color:var(--txt3);margin-top:28px; }
.logged-in .login-overlay { opacity:0;visibility:hidden;pointer-events:none; }

/* ═══════════════════════════════════════════════════════
   AI WIDGET
═══════════════════════════════════════════════════════ */
.ai-widget-container { position:fixed;bottom:22px;right:calc(var(--pw) + 18px);z-index:999;display:flex;flex-direction:column;align-items:flex-end;font-family:var(--font); }
body:not(.logged-in) .ai-widget-container { display:none!important; }
.ai-widget-trigger {
  padding:12px 20px;border-radius:100px;background:linear-gradient(135deg,#4f46e5,#7c3aed);color:#fff;border:none;box-shadow:0 6px 24px rgba(124,58,237,.3);cursor:pointer;display:flex;align-items:center;gap:8px;font-family:var(--font);font-size:13px;font-weight:700;
  transition:transform .2s,box-shadow .2s;
  animation:wF 3.5s ease-in-out infinite,wP 2.5s infinite;
}
.ai-widget-trigger:hover { transform:translateY(-2px);box-shadow:0 10px 28px rgba(124,58,237,.45);animation-play-state:paused; }
.ai-widget-trigger:active { transform:scale(.97); }
@keyframes wF { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} }
@keyframes wP { 0%{box-shadow:0 0 0 0 rgba(124,58,237,.4),0 6px 24px rgba(124,58,237,.3)} 70%{box-shadow:0 0 0 10px rgba(124,58,237,0),0 6px 24px rgba(124,58,237,.3)} 100%{box-shadow:0 0 0 0 rgba(124,58,237,0),0 6px 24px rgba(124,58,237,.3)} }

.ai-widget-panel {
  width:320px;background:var(--panel);border-radius:16px;
  box-shadow:var(--sh-lg);border:1px solid var(--bdr);
  margin-bottom:12px;overflow:hidden;
  transform:translateY(16px) scale(.96);opacity:0;pointer-events:none;visibility:hidden;
  transition:transform .25s var(--ease),opacity .25s,visibility .25s;transform-origin:bottom right;
}
.ai-widget-container.open .ai-widget-panel { transform:none;opacity:1;pointer-events:auto;visibility:visible; }
.ai-widget-header { padding:13px 16px;background:var(--panel-2);border-bottom:1px solid var(--bdr);display:flex;align-items:center;justify-content:space-between; }
.ai-widget-title  { font-size:13.5px;font-weight:700;color:var(--txt);display:flex;align-items:center;gap:7px; }
.ai-widget-title svg { color:var(--purple); }
.ai-widget-close  { background:none;border:none;font-size:20px;font-weight:300;color:var(--txt3);cursor:pointer;padding:0 4px;line-height:1; }
.ai-widget-close:hover { color:var(--txt); }
.ai-widget-body { padding:14px; }
.ai-widget-textarea { width:100%;border:1.5px solid var(--bdr);border-radius:10px;padding:11px 12px;font-family:var(--font);font-size:13px;line-height:1.55;color:var(--txt);background:var(--panel-2);outline:none;resize:none;margin-bottom:10px;transition:border-color .2s; }
.ai-widget-textarea::placeholder { color:var(--txt3); }
.ai-widget-textarea:focus { border-color:rgba(124,58,237,.4); }
.btn-ai { width:100%;padding:11px 14px;background:var(--panel-2);color:var(--txt);border:1.5px solid var(--bdr);border-radius:10px;font-family:var(--font);font-size:13px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:7px;transition:all .15s; }
.btn-ai:hover { border-color:rgba(124,58,237,.4);background:var(--purple-a);color:var(--purple); }
.btn-ai:disabled { opacity:.4;cursor:not-allowed; }
.btn-ai.loading svg { animation:spin .7s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
@keyframes fadeSlide { from{opacity:0;transform:translateY(4px)} to{opacity:1;transform:none} }
.ai-filled { animation:fadeSlide .3s var(--ease); }
.api-key-row { display:flex;align-items:center;gap:6px;margin-top:10px; }
.api-key-input { flex:1;background:var(--panel-2);border:1.5px solid var(--bdr);border-radius:8px;padding:8px 10px;font-family:var(--font);font-size:12.5px;color:var(--txt);outline:none;transition:border-color .15s; }
.api-key-input::placeholder { color:var(--txt3);font-size:11.5px; }
.api-key-input:focus { border-color:rgba(124,58,237,.4); }
.api-key-input.has-key { border-color:var(--green); }
.api-key-link { flex-shrink:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:var(--panel-2);border:1.5px solid var(--bdr);border-radius:8px;color:var(--txt2);text-decoration:none;transition:all .15s; }
.api-key-link:hover { border-color:rgba(124,58,237,.4);color:var(--purple); }
.api-key-hint { font-size:10.5px;color:var(--txt3);margin-top:5px;line-height:1.4; }

/* ═══════════════════════════════════════════════════════
   TOAST
═══════════════════════════════════════════════════════ */
.toast { position:fixed;bottom:20px;left:50%;transform:translateX(-50%) translateY(8px);background:var(--txt);color:#fff;padding:11px 20px;border-radius:11px;font-size:13.5px;font-weight:500;box-shadow:var(--sh-lg);opacity:0;pointer-events:none;transition:opacity .3s,transform .3s;z-index:10000;white-space:nowrap; }
.toast.show { opacity:1;transform:translateX(-50%) translateY(0); }

/* ═══════════════════════════════════════════════════════
   LEGACY COMPAT
═══════════════════════════════════════════════════════ */
.block,.block-label,.acc-section,.acc-header,.acc-body,.field,.field-lbl,.field-footer,
.toggle-pair,.toggle-btn,.micro-header,.micro-badge,
.speed-pills,.mobile-tab-bar,.mobile-tab-btn { }

.slider-lbl-row { display:flex;align-items:center;justify-content:space-between;margin-bottom:7px; }
.slider-lbl { font-size:13px;font-weight:500;color:var(--txt2); }
.slider-val  { font-size:13px;font-weight:700;color:var(--txt); }
.slider-pair { display:flex;gap:10px;align-items:center; }
.field-lbl   { display:block;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--txt3);margin-bottom:8px; }
.field-footer { display:flex;justify-content:flex-end;margin-top:5px; }
.speed-pills { display:flex;background:var(--panel-2);border:1px solid var(--bdr);border-radius:9px;padding:3px;gap:2px; }

/* sb- class aliases for backwards compat */
.sb-sec { padding:18px 16px; }
.sb-sec-title { font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--txt3);margin-bottom:12px; }
.sb-sep { height:1px;background:var(--bdr); }

/* ═══════════════════════════════════════════════════════
   RESPONSIVE — MOBILE (≤900px)
═══════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  /* Stage: full width, no right padding for inspector */
  .stage { padding-right: 24px; min-height: 55vw; }

  /* Mobile: panel slides up from bottom */
  .rpanel {
    top: auto; bottom: 0; left: 0; right: 0;
    width: 100%; height: 68vh;
    transform: translateY(100%);
    transition: transform .3s var(--ease);
    border-left: none; border-top: 1px solid var(--bdr);
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -4px 30px rgba(0,0,0,.1);
  }
  .rpanel.open { transform: translateY(0); }

  /* Show close button on mobile */
  .rp-close { display: flex !important; }

  /* Hide the tab rail on mobile (bottom nav takes over) */
  .rp-tabs { display: none; }

  /* Show bottom nav on mobile */
  .floatnav { display: flex; }

  /* AI widget: no panel offset on mobile */
  .ai-widget-container { right: 16px; bottom: 80px; }

  /* Canvas */
  #previewCanvas { max-height: 68vw; }

  /* Stage pill: remove panel offset */
  .stage-pill { transform: translateX(-50%); left: 50%; }
}

@media (max-width: 480px) {
  .topbar { padding: 0 10px; gap: 6px; }
  .tb-formats { display: none; }
  .tb-name { font-size: 14px; }
  .tb-export { padding: 7px 12px; font-size: 12px; }
  .tb-ai { display: none; }
}