:root{
  --bg:#0a0b0d; --bg2:#101216; --line:#22262e; --line2:#2e333d;
  --fg:#f2f4f7; --dim:#8b93a1; --red:#e10600; --red2:#ff2a1f;
  --safe-t:env(safe-area-inset-top); --safe-b:env(safe-area-inset-bottom);
  --safe-l:env(safe-area-inset-left); --safe-r:env(safe-area-inset-right);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:var(--bg);color:var(--fg);
  font:14px/1.35 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,system-ui,sans-serif;
  -webkit-user-select:none;user-select:none;overscroll-behavior:none}
.hidden-app{display:none !important}
.micro{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.btn{background:var(--bg2);color:var(--fg);border:1px solid var(--line2);border-radius:10px;
  padding:10px 14px;font-size:13px;font-weight:600;letter-spacing:.02em;
  transition:transform .15s ease-out,background .15s ease-out,border-color .15s}
.btn:active{transform:scale(.97)}
.btn.red{background:var(--red);border-color:var(--red);color:#fff}
.btn.red:active{background:var(--red2);border-color:var(--red2)}
.btn.sm{padding:8px 11px;font-size:12px;border-radius:9px}

/* ---------- gate ---------- */
#gate{position:fixed;inset:0;display:grid;place-items:center;background:
  radial-gradient(1200px 600px at 50% -10%,#15181d 0%,var(--bg) 60%);z-index:50}
.gate-in{width:min(92vw,340px);text-align:center;padding:26px 20px;
  border:1px solid var(--line);border-radius:18px;background:linear-gradient(180deg,#0e1014,#0a0b0d)}
.brand{font-size:30px;font-weight:800;letter-spacing:.22em;margin-bottom:4px}
.brand span{color:var(--red)}
.gate-in .micro{display:block;margin:14px 0 8px}
#gate-in{width:100%;padding:14px;text-align:center;letter-spacing:.5em;font-size:20px;
  background:#0b0d11;border:1px solid var(--line2);border-radius:12px;color:var(--fg)}
.gate-in .btn{width:100%;margin-top:12px;padding:14px}
.err{color:var(--red2);font-size:12px;margin-top:10px;min-height:16px}

/* ---------- shell ---------- */
#app{position:fixed;inset:0}
#cv{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;background:
  radial-gradient(900px 500px at 70% -20%,#12151a 0%,var(--bg) 55%)}

#bar{position:absolute;top:0;left:0;right:0;z-index:12;display:flex;align-items:center;gap:6px;
  padding:calc(8px + var(--safe-t)) calc(10px + var(--safe-r)) 8px calc(10px + var(--safe-l));
  background:linear-gradient(180deg,rgba(10,11,13,.94),rgba(10,11,13,0));
  backdrop-filter:blur(8px)}
#title{font-weight:700;letter-spacing:.04em;max-width:46vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.spacer{flex:1}
.ico{width:40px;height:38px;display:grid;place-items:center;font-size:17px;
  background:rgba(16,18,22,.85);border:1px solid var(--line);border-radius:10px;color:var(--fg);
  transition:transform .15s ease-out,background .15s}
.ico:active{transform:scale(.94);background:#171a20}

/* ---------- colors / sizes ---------- */
.colors{position:absolute;z-index:11;left:calc(10px + var(--safe-l));
  bottom:calc(96px + var(--safe-b));display:flex;align-items:center;gap:8px;
  padding:8px 10px;border:1px solid var(--line);border-radius:14px;background:rgba(14,16,20,.92);
  backdrop-filter:blur(8px)}
.sw{width:26px;height:26px;border-radius:50%;border:2px solid transparent;background:var(--c);
  transition:transform .15s ease-out,border-color .15s}
.sw.on{border-color:#fff;transform:scale(1.12)}
.sz{width:30px;height:30px;border-radius:9px;border:1px solid var(--line2);background:#0d0f13;
  display:grid;place-items:center;transition:border-color .15s,transform .15s}
.sz i{display:block;width:16px;background:var(--fg);border-radius:3px}
.sz.on{border-color:var(--red)}
.sz:active{transform:scale(.94)}
.sep{width:1px;height:22px;background:var(--line2)}

/* ---------- toolbar ---------- */
#tools{position:absolute;z-index:11;left:calc(8px + var(--safe-l));right:calc(8px + var(--safe-r));
  bottom:calc(10px + var(--safe-b));display:grid;grid-template-columns:repeat(8,1fr);gap:6px;
  padding:8px;border:1px solid var(--line);border-radius:16px;background:rgba(14,16,20,.94);
  backdrop-filter:blur(10px)}
.tool{display:grid;place-items:center;gap:2px;padding:8px 2px;border-radius:11px;
  border:1px solid transparent;background:transparent;color:var(--dim);
  transition:background .15s,color .15s,transform .12s,border-color .15s}
.tool span{font-size:17px;line-height:1}
.tool em{font-style:normal;font-size:9px;letter-spacing:.06em;text-transform:uppercase}
.tool.on{background:#171a20;border-color:var(--line2);color:var(--fg)}
.tool.on span{color:var(--red2)}
.tool:active{transform:scale(.94)}

/* ---------- toast/hint ---------- */
.toast{position:absolute;z-index:30;left:50%;transform:translate(-50%,14px);
  bottom:calc(104px + var(--safe-b));padding:9px 14px;border-radius:11px;
  background:rgba(20,23,28,.97);border:1px solid var(--line2);font-size:12.5px;
  opacity:0;pointer-events:none;transition:opacity .18s ease-out,transform .18s ease-out;max-width:86vw}
.toast.on{opacity:1;transform:translate(-50%,0)}
.hint{position:absolute;z-index:10;left:50%;transform:translateX(-50%);
  top:calc(56px + var(--safe-t));font-size:11.5px;color:var(--dim);letter-spacing:.04em;
  opacity:0;transition:opacity .2s ease-out;pointer-events:none;text-align:center;max-width:80vw}
.hint.on{opacity:1}

/* ---------- editor ---------- */
.editor{position:absolute;z-index:20;width:min(76vw,300px);padding:10px;
  border:1px solid var(--line2);border-radius:14px;background:rgba(14,16,20,.98);
  box-shadow:0 18px 50px rgba(0,0,0,.6)}
.editor textarea{width:100%;min-height:64px;resize:none;background:#0b0d11;color:var(--fg);
  border:1px solid var(--line2);border-radius:10px;padding:9px;font:14px/1.35 inherit}
.editor-row{display:flex;gap:8px;margin-top:8px}

/* ---------- drawer ---------- */
.drawer{position:absolute;z-index:25;top:0;bottom:0;left:0;width:min(86vw,330px);
  padding:calc(14px + var(--safe-t)) 14px calc(14px + var(--safe-b));
  background:rgba(11,13,16,.99);border-right:1px solid var(--line);
  transform:translateX(-102%);transition:transform .2s ease-out;display:flex;flex-direction:column}
.drawer.open{transform:none}
.dhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.blist{flex:1;overflow:auto;-webkit-overflow-scrolling:touch}
.brow{display:flex;align-items:center;gap:8px;padding:11px 10px;margin-bottom:6px;
  border:1px solid var(--line);border-radius:12px;background:#0e1014}
.brow.on{border-color:var(--red);background:#141014}
.brow .nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.brow .dt{font-size:10px;color:var(--dim);font-variant-numeric:tabular-nums}
.dfoot{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:10px}
#file-in{position:fixed;left:-9999px;top:0;opacity:0;width:1px;height:1px;pointer-events:none}

/* ---------- sheets ---------- */
.scrim{position:absolute;inset:0;z-index:24;background:rgba(0,0,0,.5);opacity:0;
  pointer-events:none;transition:opacity .18s}
.scrim.on{opacity:1;pointer-events:auto}
.sheet{position:absolute;z-index:26;left:calc(10px + var(--safe-l));right:calc(10px + var(--safe-r));
  bottom:calc(10px + var(--safe-b));padding:8px;border:1px solid var(--line2);border-radius:18px;
  background:rgba(13,15,19,.99);transform:translateY(120%);
  transition:transform .22s cubic-bezier(.2,.8,.2,1);max-height:72vh;overflow:auto}
.sheet.open{transform:none}
.row{display:block;width:100%;text-align:left;padding:14px 12px;margin-bottom:6px;
  background:#101318;border:1px solid var(--line);border-radius:12px;color:var(--fg);
  font-size:14px;font-weight:600;transition:background .15s,transform .15s}
.row:active{transform:scale(.99);background:#151922}
.row.danger{color:var(--red2);border-color:#3a1616}
.h-title{font-weight:700;margin:6px 6px 10px;letter-spacing:.03em}
.help-list{margin:0 0 12px 18px;padding:0;color:#cfd5df;font-size:13px;line-height:1.6}
.help-list b{color:#fff}
@media (min-width:720px){
  #tools{left:50%;right:auto;transform:translateX(-50%);width:auto;grid-template-columns:repeat(8,58px)}
  .colors{left:50%;transform:translateX(-50%)}
}


/* ---------------- selection action bar ---------------- */
.selbar{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:calc(var(--safe-b) + 104px); z-index:6;
  display:flex; gap:8px; align-items:center;
  padding:6px; border-radius:999px;
  background:rgba(16,18,22,.94);
  border:1px solid var(--line2);
  box-shadow:0 10px 30px rgba(0,0,0,.55);
  backdrop-filter:blur(12px);
  animation:selin .16s ease-out;
}
@keyframes selin{ from{opacity:0; transform:translate(-50%,8px);} to{opacity:1; transform:translate(-50%,0);} }
.selbar button{
  display:flex; align-items:center; gap:7px;
  padding:11px 16px; min-height:44px;
  border-radius:999px; border:1px solid var(--line2);
  background:#171a20; color:var(--fg);
  font:600 14px/1 inherit; letter-spacing:.02em;
  -webkit-tap-highlight-color:transparent;
}
.selbar button em{ font-style:normal; font-size:13px; color:var(--dim); }
.selbar button:active{ transform:scale(.97); }
.selbar button.danger{ border-color:#5a1512; color:#ff6a5e; }
.selbar button.danger em{ color:#ff6a5e; opacity:.8; }
.selbar button.danger:active{ background:#2a0d0b; }