:root{
  --bg:#000; --chrome:#0b0b0c; --line:#232326; --fg:#f2f2f0; --dim:#8d8d92;
  --acc:#e8ff4a; --warn:#ff6b5e; --ok:#7ee0a0;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bg);color:var(--fg);
  font:13px/1.45 -apple-system,BlinkMacSystemFont,"Helvetica Neue","Noto Sans SC",system-ui,sans-serif;
  overscroll-behavior:none}
body{display:flex;flex-direction:column;height:100dvh;overflow:hidden}
button,input,select,textarea{font:inherit;color:inherit}
button{background:#17171a;border:1px solid var(--line);border-radius:7px;padding:6px 9px;cursor:pointer}
button:active{background:#26262b}
button[disabled]{opacity:.4;cursor:not-allowed}
button.on{background:var(--acc);color:#111;border-color:var(--acc);font-weight:700}
input[type=text],input:not([type]),textarea{background:#101013;border:1px solid var(--line);border-radius:6px;padding:6px 8px;width:100%}
input[type=range]{width:100%;accent-color:var(--acc);background:transparent}

/* top bar */
#topbar{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:calc(env(safe-area-inset-top) + 8px) 10px 8px;background:var(--chrome);border-bottom:1px solid var(--line);flex:0 0 auto}
#topbar .tb{min-width:58px}
.brand{text-align:center;font:700 15px/1 ui-monospace,Menlo,monospace;letter-spacing:.16em}
.brand span{display:block;font:400 9px/1.4 system-ui;letter-spacing:.06em;color:var(--dim);margin-top:3px}

/* stage */
#stage{position:relative;flex:1 1 auto;min-height:34vh;background:
  repeating-conic-gradient(#0e0e10 0% 25%, #131316 0% 50%) 50%/16px 16px;overflow:hidden;touch-action:none}
#view{position:absolute;inset:0;width:100%;height:100%;display:block}
#drop{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;
  background:#000;padding:20px}
#drop.hide{display:none}
#drop.hot .dz-in{border-color:var(--acc);color:var(--acc)}
.dz-in{border:1px dashed #35353a;border-radius:14px;padding:26px 22px;max-width:340px;cursor:pointer}
.dz-mark{font-size:34px;line-height:1;color:var(--acc)}
.dz-t{margin-top:12px;font-weight:600}
.dz-s{margin-top:8px;color:var(--dim);font-size:11px;line-height:1.6}
#stageBadge{position:absolute;left:8px;top:8px;background:#000c;border:1px solid var(--line);border-radius:6px;
  padding:5px 8px;font:11px/1.4 ui-monospace,Menlo,monospace;color:var(--dim);max-width:70%}
#toast{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);background:#000d;border:1px solid var(--line);
  border-radius:8px;padding:7px 11px;font-size:12px;max-width:90%;text-align:center;z-index:5}
#toast.bad{border-color:var(--warn);color:#ffd0cb}
#toast.good{border-color:var(--ok);color:#d6ffe6}

/* strip */
#strip{flex:0 0 auto;display:flex;align-items:center;gap:8px;padding:6px 10px;background:#08080a;border-top:1px solid var(--line)}
.seedbox{display:flex;align-items:center;gap:4px;flex:0 0 auto}
.seedbox .k{font:10px ui-monospace,monospace;color:var(--dim);letter-spacing:.1em}
.seedbox input{width:82px;font:12px ui-monospace,Menlo,monospace;text-transform:lowercase;padding:4px 6px}
.seedbox button{padding:4px 7px}
#warnBox{flex:1 1 auto;font-size:11px;line-height:1.35;color:var(--dim);max-height:34px;overflow:auto}
#warnBox .w{color:var(--warn)}

/* tabs */
#tabs{flex:0 0 auto;display:flex;background:var(--chrome);border-top:1px solid var(--line)}
.tab{flex:1;border:0;border-radius:0;background:transparent;padding:9px 0;color:var(--dim);border-bottom:2px solid transparent}
.tab.on{color:var(--fg);border-bottom-color:var(--acc);font-weight:700}

/* panels */
#panels{flex:0 0 auto;height:38dvh;min-height:210px;overflow:hidden;background:#0a0a0c;border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom)}
.panel{display:none;height:100%;overflow-y:auto;padding:10px 10px 26px;-webkit-overflow-scrolling:touch}
.panel.on{display:block}
.grp{border:1px solid var(--line);border-radius:9px;padding:8px;margin-bottom:8px;background:#0e0e11}
.grp>h4{margin:0 0 7px;font:700 11px/1 system-ui;letter-spacing:.1em;color:var(--dim);text-transform:uppercase}
.row{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:5px 0}
.row.lbl{display:grid;grid-template-columns:76px 1fr 46px;gap:8px;align-items:center}
.row.lbl>label{font-size:11px;color:var(--dim)}
.row.lbl>.val{font:11px ui-monospace,monospace;color:var(--acc);text-align:right}
.seg{display:flex;flex-wrap:wrap;gap:5px}
.seg button{padding:5px 8px;font-size:12px}
.hint{color:var(--dim);font-size:11px;line-height:1.55;margin:5px 0 0}
.hint.warn{color:#ffb1a9}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{width:38px;height:30px;border-radius:6px;border:1px solid #2c2c30;position:relative;cursor:pointer;padding:0}
.chip.on{outline:2px solid var(--acc);outline-offset:1px}
.swwrap{display:flex;align-items:center;gap:6px}
.sw{width:26px;height:20px;border-radius:4px;border:1px solid #333}
.check{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--fg)}
.check input{accent-color:var(--acc);width:16px;height:16px}
textarea{resize:vertical;min-height:34px;font-size:12px}
.cnt{font:10px ui-monospace,monospace;color:var(--dim);text-align:right}
.mono{font-family:ui-monospace,Menlo,monospace}
table.chk{width:100%;border-collapse:collapse;font:11px/1.4 ui-monospace,Menlo,monospace}
table.chk td{border-top:1px solid var(--line);padding:5px 4px;vertical-align:top}
table.chk td:first-child{color:var(--dim);width:34%}
table.chk td.bad{color:var(--warn)}
.prog{height:4px;background:#1c1c20;border-radius:3px;overflow:hidden;margin-top:6px}
.prog>i{display:block;height:100%;width:30%;background:var(--acc)}

/* sheet */
#sheet{position:fixed;inset:0;background:#000c;z-index:60;display:flex;align-items:flex-end;justify-content:center}
#sheet[hidden]{display:none}
.sheet-in{background:#0b0b0d;border:1px solid var(--line);border-radius:14px 14px 0 0;width:100%;max-width:620px;
  max-height:92dvh;overflow-y:auto;padding:12px 12px calc(env(safe-area-inset-bottom) + 18px)}
.sheet-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px;font-size:13px}
#sheetBody img{width:100%;height:auto;display:block;border-radius:8px;border:1px solid var(--line);background:#111}
#sheetBody .fname{font:11px ui-monospace,monospace;color:var(--dim);word-break:break-all;margin:6px 0}

@media (min-width:820px){
  body{flex-direction:row;flex-wrap:wrap}
  #topbar{width:100%}
  #stage{flex:1 1 60%;min-height:0}
  #panels,#tabs,#strip{width:360px;flex:0 0 360px}
  #panels{height:auto;flex:1 1 auto;order:5}
  #strip{order:3;border-left:1px solid var(--line)}
  #tabs{order:4;border-left:1px solid var(--line)}
  #panels{border-left:1px solid var(--line);min-height:0}
}