/* ============================================================= SHELL */
#app{ display:flex; flex-direction:column; height:100%; }
.topbar{
  height:var(--topbar); flex:0 0 auto; display:flex; align-items:center; gap:14px;
  padding:0 var(--sp-4); background:var(--bg-1); border-bottom:1px solid var(--panel-2);
}
.brand{ display:flex; align-items:center; gap:9px; font-weight:600; color:var(--text-1); }
.brand .logo{ width:26px; height:26px; border-radius:8px; background:linear-gradient(135deg,var(--accent),var(--accent-2)); display:flex; align-items:center; justify-content:center; color:#fff; }
.brand-name{ font-size:15px; font-weight:700; color:#f9fafb; letter-spacing:-.01em; }
.spacer{ flex:1 1 auto; }
.tb-btn{ display:flex; align-items:center; gap:8px; height:34px; padding:0 11px; border-radius:8px; color:var(--text-2); border:1px solid transparent; }
.tb-btn:hover{ background:var(--panel); color:var(--text-1); }
.tb-btn .ico{ width:14px; height:14px; }
#cmdk{ background:var(--panel); border:1px solid var(--border); color:var(--text-3); }
.kbd{ font-family:var(--font-mono); font-size:10.5px; font-weight:600; color:#9ca3af; background:var(--bg-0); border:1px solid var(--border); border-radius:5px; padding:2px 6px; }
.sse{ display:flex; align-items:center; gap:7px; height:34px; padding:0 11px; border-radius:8px; background:rgba(34,197,94,.1); border:1px solid rgba(34,197,94,.35); color:var(--text-2); font-size:var(--fs-xs); font-weight:600; }
.sse .dot{ width:7px; height:7px; border-radius:var(--r-full); background:var(--text-3); }
.sse.live{ color:#4ade80; }
.sse.live .dot{ background:var(--ok); box-shadow:0 0 8px var(--ok); }
#lock{ width:34px; height:34px; padding:0; justify-content:center; background:var(--panel); border:1px solid var(--border); border-radius:8px; }
#lock .ico{ width:15px; height:15px; }
#lock-label{ display:none; }
.lock.admin{ color:var(--ok); border-color:rgba(34,197,94,.4); }

.body{ flex:1 1 auto; display:flex; min-height:0; }

/* nav rail (desktop) -> bottom thumb nav (mobile) via order + flex-direction */
.rail{
  width:var(--rail); flex:0 0 auto; background:var(--bg-1); border-right:1px solid var(--panel-2);
  display:flex; flex-direction:column; align-items:center; padding:10px 0; gap:4px;
}
.rail .job{ display:flex; flex-direction:column; align-items:center; gap:2px; width:46px; padding:7px 0; color:var(--text-2); border:1px solid transparent; border-radius:var(--r-md); font-size:7px; font-weight:600; position:relative; white-space:nowrap; }
.rail .job .ico{ width:19px; height:19px; }
.rail .job.on{ color:#eaf0fb; background:rgba(37,99,235,.16); border-color:rgba(37,99,235,.5); }
.rail .job.on span{ font-weight:700; }
.rail .job.on .ico{ stroke:#93c5fd; }
.rail .job.on::before{ content:""; position:absolute; left:-5px; top:12px; height:20px; width:3px; border-radius:2px; background:var(--accent); }
.rail .divider{ height:1px; width:26px; background:var(--panel-2); margin:8px 0; }
.rail .verb{ display:flex; flex-direction:column; align-items:center; gap:2px; width:46px; padding:6px 0; color:var(--text-3); font-size:8px; font-weight:600; border:1px solid transparent; border-radius:10px; }
.rail .verb:hover{ color:var(--text-1); }
.rail .verb.on{ color:#e5e7eb; background:var(--panel); border-color:var(--border); }
.rail .verb.on .ico{ stroke:#93c5fd; }
.rail .verb .ico{ width:17px; height:17px; }
.rail .grow{ flex:1 1 auto; }
.rail .badge{ position:absolute; top:4px; right:8px; min-width:16px; height:16px; padding:0 4px; border-radius:var(--r-full); background:var(--err); color:#fff; font-size:9px; display:flex; align-items:center; justify-content:center; }

.main{ flex:1 1 auto; display:flex; flex-direction:column; min-width:0; min-height:0; }

/* inline admin unlock popover */
#unlock-pop{ position:fixed; top:10px; right:12px; z-index:80; display:flex; gap:6px; background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:8px; box-shadow:0 14px 34px rgba(0,0,0,.55); }
#unlock-pop input{ background:var(--bg-0); border:1px solid var(--border); border-radius:7px; padding:8px 10px; color:var(--text-1); font-size:13px; width:190px; outline:none; }
#unlock-pop input:focus{ border-color:var(--accent); }
#unlock-pop button{ background:var(--accent); color:#fff; border-radius:7px; padding:0 14px; font-weight:600; font-size:13px; }
#unlock-pop button:hover{ background:#1d4ed8; }