*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;background:#0d1117;color:#e6edf3;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
:root{
  --bg-deep:#0d1117;--bg-mid:#161b22;--bg-surface:#1c2128;--bg-hover:#21262d;
  --border:#30363d;--text-pri:#e6edf3;--text-mut:#7d8590;--text-dim:#484f58;
  --cyan:#39c5bb;--cyan-bg:#0d2e2c;--cyan-mid:#1a5f5c;
  --green:#56d364;--amber:#e3b341;--red:#f85149;--blue:#4da6ff;
}
.app{display:flex;flex-direction:column;height:100vh}

/* TOP BAR */
.topbar{display:flex;align-items:center;gap:8px;padding:0 14px;height:42px;background:var(--bg-mid);border-bottom:1px solid var(--border);flex-shrink:0}
.logo{font-size:13px;font-weight:700;color:var(--cyan);letter-spacing:.05em;white-space:nowrap}
.logo span{color:var(--text-dim);font-weight:400}
.sep{width:1px;height:20px;background:var(--border);margin:0 2px}
.tbtn{display:flex;align-items:center;gap:5px;padding:3px 10px;border-radius:5px;background:transparent;border:1px solid var(--border);color:var(--text-mut);font-size:11px;cursor:pointer;transition:all .12s;white-space:nowrap}
.tbtn:hover{background:var(--bg-hover);color:var(--text-pri);border-color:#555}
.tbtn.act{background:var(--cyan-bg);border-color:var(--cyan);color:var(--cyan)}
.tbtn.primary{
  background:var(--cyan);border-color:var(--cyan);color:#04201e;
  font-weight:700;padding:5px 14px;font-size:12px;
  box-shadow:0 0 0 0 rgba(57,197,187,0.5);
  animation:slicePulse 2.2s ease-out 2;
}
.tbtn.primary:hover{background:#4ddbd0;border-color:#4ddbd0}
.tbtn.primary:disabled{
  background:var(--bg-hover);border-color:var(--border);color:var(--text-dim);
  font-weight:600;cursor:not-allowed;animation:none;box-shadow:none;
}
.tbtn.primary:disabled:hover{background:var(--bg-hover)}
@keyframes slicePulse{
  0%{box-shadow:0 0 0 0 rgba(57,197,187,0.55)}
  70%{box-shadow:0 0 0 7px rgba(57,197,187,0)}
  100%{box-shadow:0 0 0 0 rgba(57,197,187,0)}
}
.tbtn.danger{background:#2a1010;border-color:var(--red);color:var(--red)}
.spacer{flex:1}
.pill{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:20px;font-size:10px;background:var(--cyan-bg);border:1px solid var(--cyan-mid);color:var(--cyan)}

/* MAIN */
.main{display:flex;flex:1;overflow:hidden;min-height:0}

/* LEFT SIDEBAR */
.sidebar-l{width:196px;flex-shrink:0;background:var(--bg-mid);border-right:1px solid var(--border);display:flex;flex-direction:column}
.nav-tabs{border-bottom:1px solid var(--border);padding:4px 6px;display:flex;flex-direction:column;gap:1px}
.navitem{display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:5px;font-size:11px;color:var(--text-mut);cursor:pointer;transition:all .1s}
.navitem:hover{background:var(--bg-hover);color:var(--text-pri)}
.navitem.active{background:var(--cyan-bg);color:var(--cyan)}
.scontent{flex:1;overflow-y:auto;padding:10px}
.stitle{font-size:9px;font-weight:700;color:var(--text-dim);letter-spacing:.1em;text-transform:uppercase;margin-bottom:6px}
.drop-zone{border:1.5px dashed var(--border);border-radius:7px;padding:18px 10px;text-align:center;cursor:pointer;transition:all .2s;color:var(--text-mut);font-size:12px}
.drop-zone:hover,.drop-zone.drag{border-color:var(--cyan);color:var(--cyan);background:var(--cyan-bg)}
.drop-icon{font-size:22px;margin-bottom:6px;display:block}
.sitem{display:flex;align-items:center;gap:7px;padding:5px 7px;border-radius:5px;font-size:11px;color:var(--text-mut);cursor:pointer;transition:all .1s}
.sitem:hover{background:var(--bg-hover);color:var(--text-pri)}
.sitem.active{background:var(--cyan-bg);color:var(--cyan)}
.row{display:flex;align-items:center;gap:6px;margin-bottom:6px}
.lbl{font-size:10px;color:var(--text-mut);width:56px;flex-shrink:0}
.inp{flex:1;background:var(--bg-deep);border:1px solid var(--border);color:var(--text-pri);border-radius:4px;padding:3px 6px;font-size:11px;min-width:0}
.inp:focus{outline:none;border-color:var(--cyan)}
.unit{font-size:10px;color:var(--text-dim);width:28px;flex-shrink:0}
.fmode-opt{display:flex;align-items:flex-start;gap:7px;padding:6px 7px;border-radius:5px;cursor:pointer;transition:all .1s;border:1px solid transparent}
.fmode-opt:hover{background:var(--bg-hover)}
.fmode-opt.active{background:var(--cyan-bg);border-color:var(--cyan-mid)}
.fmode-opt input[type=checkbox]{margin-top:1px;accent-color:var(--cyan);cursor:pointer;flex-shrink:0}
.fmode-opt .fmode-txt{display:flex;flex-direction:column;gap:1px}
.fmode-opt .fmode-title{font-size:11px;color:var(--text-pri);font-weight:600}
.fmode-opt.active .fmode-title{color:var(--cyan)}
.fmode-opt .fmode-desc{font-size:9px;color:var(--text-dim);line-height:1.3}

/* CANVAS AREA */
.canvas-area{flex:1;display:flex;flex-direction:column;background:#080c12;overflow:hidden;min-width:0}
.ctoolbar{display:flex;align-items:center;gap:6px;padding:5px 10px;background:var(--bg-mid);border-bottom:1px solid var(--border);flex-shrink:0}
.ctoolbar span{font-size:10px;color:var(--text-dim)}
.bounds-warning{
  display:flex;align-items:center;gap:9px;padding:7px 14px;flex-shrink:0;
  background:#3a2406;border-bottom:1px solid #e3b341;color:#ffd27a;font-size:12px;font-weight:600;
  animation:bwSlide .18s ease-out;
}
.bw-icon{font-size:14px;flex-shrink:0}
.bw-fix{
  margin-left:auto;background:#e3b341;color:#2a1c04;border:none;border-radius:5px;
  padding:4px 12px;font-size:11px;font-weight:700;cursor:pointer;flex-shrink:0;
}
.bw-fix:hover{background:#f0c25e}
@keyframes bwSlide{ from{transform:translateY(-100%); opacity:0} to{transform:translateY(0); opacity:1} }
.cwrap{flex:1;overflow:hidden;position:relative;display:flex;align-items:center;justify-content:center}
canvas#bed{display:block}
.empty-hint{position:absolute;text-align:center;color:var(--text-dim);pointer-events:none;user-select:none}
.empty-hint .big{font-size:36px;margin-bottom:10px;opacity:.18}
.empty-hint p{font-size:12px;opacity:.5}

/* PLAYBACK BAR — shown only in preview mode */
.playbar{
  display:none;flex-direction:column;gap:4px;
  padding:8px 12px;background:var(--bg-mid);border-top:1px solid var(--border);flex-shrink:0;
}
.playbar.visible{display:flex}
.play-controls{display:flex;align-items:center;gap:8px}
.pbtn{width:26px;height:26px;border-radius:5px;display:flex;align-items:center;justify-content:center;background:transparent;border:1px solid var(--border);color:var(--text-mut);cursor:pointer;font-size:12px;flex-shrink:0;transition:all .12s}
.pbtn:hover{background:var(--bg-hover);color:var(--text-pri)}
.pbtn.act{background:var(--cyan-bg);border-color:var(--cyan);color:var(--cyan)}
.slider-wrap{flex:1;display:flex;align-items:center;gap:8px}
input[type=range]#playSlider{
  flex:1;height:4px;accent-color:var(--cyan);cursor:pointer;
  background:var(--border);border-radius:2px;appearance:none;outline:none;
}
input[type=range]#playSlider::-webkit-slider-runnable-track{height:4px;border-radius:2px}
input[type=range]#playSlider::-webkit-slider-thumb{appearance:none;width:14px;height:14px;border-radius:50%;background:var(--cyan);margin-top:-5px;cursor:pointer}
.play-stat{font-size:10px;color:var(--text-mut);white-space:nowrap}
.play-legend{display:flex;gap:12px;align-items:center}
.pl-row{display:flex;align-items:center;gap:5px;font-size:10px;color:var(--text-dim)}
.pl-line{width:18px;height:2px}
.pl-dash{width:18px;height:0;border-top:2px dashed}

.statusbar{display:flex;gap:14px;padding:3px 10px;font-size:10px;color:var(--text-dim);background:var(--bg-deep);border-top:1px solid var(--border);flex-shrink:0}
.status-green{color:var(--green)}

/* RIGHT SIDEBAR */
.sidebar-r{width:210px;flex-shrink:0;background:var(--bg-mid);border-left:1px solid var(--border);overflow-y:auto}
.psec{padding:10px;border-bottom:1px solid var(--border)}
.ptitle{font-size:9px;font-weight:700;color:var(--text-dim);letter-spacing:.1em;text-transform:uppercase;margin-bottom:7px}
.action-btn{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;padding:5px;border-radius:5px;font-size:11px;cursor:pointer;background:transparent;border:1px solid var(--border);color:var(--text-mut);transition:all .12s;margin-bottom:5px}
.action-btn:hover{background:var(--bg-hover);color:var(--text-pri)}
.action-btn:disabled{opacity:0.35;cursor:default;pointer-events:none}
.action-btn.danger{background:#2a1010;border-color:var(--red);color:var(--red)}
.info-row{font-size:10px;color:var(--text-mut);margin-bottom:3px}
.info-row span{color:var(--text-pri)}

/* BOTTOM */
.bottom{display:flex;height:160px;flex-shrink:0;border-top:1px solid var(--border)}
.gc-panel{flex:1;display:flex;flex-direction:column;overflow:hidden;border-right:1px solid var(--border)}
.legend-panel{width:200px;flex-shrink:0;display:flex;flex-direction:column;overflow:hidden}
.ph{display:flex;align-items:center;justify-content:space-between;padding:5px 10px;border-bottom:1px solid var(--border);font-size:9px;font-weight:700;color:var(--text-dim);letter-spacing:.1em;text-transform:uppercase;flex-shrink:0}
.gcview{flex:1;overflow-y:auto;padding:6px 10px;font-family:'SF Mono',Consolas,'Courier New',monospace;font-size:10.5px;line-height:1.65}
.gcline{white-space:pre;color:var(--text-dim)}
.gcline.g0{color:#4da6ff}.gcline.g1{color:var(--green)}.gcline.m3{color:var(--amber)}.gcline.cmt{color:#484f58}
.gc-empty{font-style:italic;color:var(--text-dim);font-size:10px;padding:6px 0}
.legend-body{padding:10px;display:flex;flex-direction:column;gap:7px;overflow-y:auto;flex:1}
.leg-row{display:flex;align-items:center;gap:8px;font-size:10px;color:var(--text-mut)}
.todo-sec{border-top:1px solid var(--border);padding-top:7px;margin-top:3px}
.todo-row{font-size:9.5px;color:var(--text-dim);margin-bottom:2px}
.todo-done{color:var(--green)}

::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:var(--bg-deep)}
::-webkit-scrollbar-thumb{background:#30363d;border-radius:3px}