:root{
  --bg:#08090C;
  --panel:#101319;
  --panel-2:#161A22;
  --line:#232936;
  --text:#E8ECF4;
  --muted:#7C879B;
  --cyan:#00E5FF;
  --magenta:#FF007F;
  --warn:#FFB020;
  --ok:#28D17C;
  --radius:10px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:13px;display:flex;overflow:hidden;
}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#242A36;border-radius:6px;border:3px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:#333B4A}

/* ---------- Sidebar ---------- */
.sidebar{
  width:430px;flex:0 0 430px;height:100vh;overflow-y:auto;
  background:var(--panel);border-right:1px solid var(--line);
}
.brand{
  position:sticky;top:0;z-index:20;background:var(--panel);
  padding:16px 18px 12px;border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:10px;
}
.brand .dot{width:9px;height:9px;border-radius:50%;background:var(--cyan);box-shadow:0 0 12px var(--cyan)}
.brand h1{font-size:14px;margin:0;letter-spacing:.14em;text-transform:uppercase;font-weight:800}
.brand .sub{font-size:10px;color:var(--muted);letter-spacing:.1em;text-transform:uppercase;margin-left:auto}

details.sec{border-bottom:1px solid var(--line)}
details.sec>summary{
  padding:13px 18px;cursor:pointer;list-style:none;
  font-size:11px;letter-spacing:.13em;text-transform:uppercase;font-weight:700;color:var(--muted);
  display:flex;align-items:center;gap:9px;user-select:none;
}
details.sec>summary::-webkit-details-marker{display:none}
details.sec>summary:hover{color:var(--text)}
details.sec>summary::before{content:"+";color:var(--cyan);font-weight:700;width:10px}
details.sec[open]>summary::before{content:"–"}
details.sec[open]>summary{color:var(--text)}
.sec-body{padding:2px 18px 20px}

.field{margin-bottom:12px}
label.lbl{display:block;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:5px;font-weight:600}
.hint{font-size:11px;color:var(--muted);line-height:1.5;margin:-2px 0 12px}
input,select,textarea,button{font-family:inherit;font-size:13px}
input[type=text],input[type=number],select,textarea{
  width:100%;background:var(--panel-2);border:1px solid var(--line);color:var(--text);
  padding:9px 10px;border-radius:var(--radius);outline:none;transition:border-color .15s;
}
input[type=text]:focus,input[type=number]:focus,select:focus,textarea:focus{border-color:var(--cyan)}
textarea{resize:vertical;line-height:1.45}
input[type=color]{
  width:100%;height:34px;padding:2px;background:var(--panel-2);
  border:1px solid var(--line);border-radius:var(--radius);cursor:pointer;
}
input[type=range]{width:100%;accent-color:var(--cyan);background:transparent}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.check{display:flex;align-items:center;gap:9px;padding:7px 0;cursor:pointer;font-size:12px;color:var(--text)}
.check input{accent-color:var(--cyan);width:15px;height:15px;flex:0 0 auto}

.btn{
  width:100%;padding:10px;border-radius:var(--radius);border:1px solid var(--line);
  background:var(--panel-2);color:var(--text);cursor:pointer;font-weight:600;transition:.15s;
}
.btn:hover{border-color:var(--cyan);color:var(--cyan)}
.btn:disabled{opacity:.45;cursor:not-allowed;border-color:var(--line);color:var(--muted)}
.btn.primary{background:var(--cyan);color:#03151A;border-color:var(--cyan)}
.btn.primary:hover{background:#4DF0FF;color:#03151A}
.btn.ghost{background:transparent}
.btn.sm{padding:7px;font-size:12px}
.btn.danger:hover{border-color:var(--magenta);color:var(--magenta)}

.rounds{display:flex;flex-direction:column;gap:9px}
.round{background:var(--panel-2);border:1px solid var(--line);border-radius:12px;padding:11px 12px}
.round.active{border-color:var(--cyan)}
.round-head{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.round-num{
  background:var(--cyan);color:#03151A;font-weight:800;font-size:11px;
  padding:2px 7px;border-radius:5px;min-width:26px;text-align:center
}
.round-head .sp{margin-left:auto;display:flex;gap:4px}
.icobtn{
  background:transparent;border:1px solid var(--line);color:var(--muted);
  width:24px;height:24px;border-radius:6px;cursor:pointer;line-height:1;padding:0;font-size:12px
}
.icobtn:hover{border-color:var(--cyan);color:var(--cyan)}
.icobtn.del:hover{border-color:var(--magenta);color:var(--magenta)}
.round textarea,.round input[type=text]{margin-bottom:6px}
.round .meta{display:flex;gap:6px;align-items:center}
.round .meta input{padding:6px 8px;font-size:12px}

/* ---------- Stage ---------- */
.stage{flex:1;display:flex;flex-direction:column;height:100vh;min-width:0}
.topbar{
  padding:11px 18px;border-bottom:1px solid var(--line);background:var(--panel);
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
}
.seg{display:flex;background:var(--panel-2);border:1px solid var(--line);border-radius:9px;padding:2px}
.seg button{
  background:transparent;border:0;color:var(--muted);padding:6px 13px;border-radius:7px;
  cursor:pointer;font-weight:600;font-size:12px
}
.seg button.on{background:var(--cyan);color:#03151A}
.scrub{flex:1;min-width:180px;display:flex;align-items:center;gap:10px}
.frame-label{
  font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--cyan);
  white-space:nowrap;min-width:190px
}
.viewport{
  flex:1;display:flex;align-items:center;justify-content:center;padding:18px;overflow:hidden;
  background:
    linear-gradient(45deg,#0B0D11 25%,transparent 25%),
    linear-gradient(-45deg,#0B0D11 25%,transparent 25%),
    linear-gradient(45deg,transparent 75%,#0B0D11 75%),
    linear-gradient(-45deg,transparent 75%,#0B0D11 75%);
  background-size:22px 22px;background-position:0 0,0 11px,11px -11px,-11px 0;
}
.frame-wrap{position:relative;height:100%;aspect-ratio:var(--ar,1080/1920);box-shadow:0 24px 70px rgba(0,0,0,.7);border-radius:6px;overflow:hidden}
.frame-wrap canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
#overlay{cursor:grab}
#overlay.dragging{cursor:grabbing}

.warnbar{
  padding:8px 18px;border-top:1px solid var(--line);background:var(--panel);
  font-size:11px;color:var(--warn);display:flex;gap:16px;flex-wrap:wrap;min-height:33px;align-items:center
}
.warnbar.clean{color:var(--ok)}
.warnbar.error{color:var(--magenta)}
.toast{
  position:fixed;bottom:22px;left:50%;transform:translateX(-50%);
  background:var(--panel-2);border:1px solid var(--cyan);color:var(--text);
  padding:11px 18px;border-radius:10px;font-size:12px;z-index:99;
  opacity:0;pointer-events:none;transition:opacity .2s
}
.toast.show{opacity:1}
kbd{background:var(--panel-2);border:1px solid var(--line);border-radius:4px;padding:1px 5px;font-size:10px;font-family:'JetBrains Mono',monospace}

/* ---------- Mobile ---------- */
/* Below this width the fixed 430px sidebar would push the whole canvas
   off-screen with no way to scroll to it at all (body has overflow:hidden
   and no media query previously existed). Full feature parity isn't the
   goal here — only that previewing and typing questions stay reachable. */
@media (max-width: 860px){
  /* .stage keeps a real, explicit height (vh units are always "definite"
     regardless of the ancestor chain) rather than height:auto/min-height —
     .frame-wrap's height:100% + aspect-ratio combo (same mechanism the
     desktop layout relies on via .stage{height:100vh}) only resolves
     against a genuinely definite ancestor height; min-height alone
     constrains the rendered box but doesn't count as "specified" for
     percentage-height resolution, so .frame-wrap silently collapsed to
     0x0 the first time this was tried with min-height here. */
  body{ flex-direction:column; overflow-y:auto; overflow-x:hidden; height:auto; min-height:100%; }
  .sidebar{ width:100%; flex:0 0 auto; height:auto; max-height:55vh; border-right:none; border-bottom:1px solid var(--line); }
  /* .stage still carries the base rule's flex:1 (flex-basis:0%), which
     wins over an explicit height in a flex item's own sizing — harmless
     on desktop (body's main axis is row there, so flex:1 only affects
     width), but on mobile body's main axis is column, so flex:1 would
     otherwise fight this height. Reset it to a fixed-size item instead. */
  .stage{ flex:0 0 auto; height:60vh; }
  .viewport{ padding:10px; }
  .topbar{ padding:9px 12px; gap:8px; }
  /* min-width:0 alone isn't enough — white-space:nowrap (base rule) still
     reports the full single-line text width as the shrink-to-fit minimum
     unless paired with overflow:hidden, which is what actually let this
     overflow the viewport (confirmed via scrollWidth) even though nothing
     looked visibly broken, since body{overflow-x:hidden} was quietly
     clipping it. */
  .frame-label{ min-width:0; overflow:hidden; text-overflow:ellipsis; }
  .icobtn{ width:30px; height:30px; }
}