:root {
  /* neutrals — cool, biased a touch toward the violet accent (signed-off palette) */
  --bg:#090a10; --panel:#0f111a; --panel-2:#161925; --panel-3:#1c2030;
  --border:#242939; --border-2:#333a4e; --text:#e9ebf4; --muted:#949bb2; --dim:#606880;
  --accent:#7c86ff; --accent-2:#a78bfa; --accent-ink:#0a0b16;
  --accent-soft:rgba(124,134,255,.15); --accent-line:rgba(124,134,255,.42);
  --ok:#45dca2; --warn:#f2c14e; --danger:#fb6f8d; --info:#5cc8ff;
  /* modular type scale */
  --f-label:11px; --f-meta:12px; --f-body:13px; --f-row:14px; --f-view:16px; --f-screen:20px;
  /* 8px spacing rhythm */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px;
  --radius:10px; --radius-sm:7px; --pill:999px;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 12px 40px -14px rgba(0,0,0,.6);
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono","JetBrains Mono","Cascadia Code",Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{font-family:var(--font);color:var(--text);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;
  background:radial-gradient(1200px 600px at 82% -8%,color-mix(in srgb,var(--accent) 9%,transparent),transparent 60%),
    radial-gradient(900px 500px at 0% 100%,color-mix(in srgb,var(--accent-2) 6%,transparent),transparent 55%),var(--bg);
  background-attachment:fixed}
button{font-family:inherit}
::selection{background:color-mix(in srgb,var(--accent) 40%,transparent)}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-thumb{background:var(--border-2);border-radius:999px;border:3px solid transparent;background-clip:padding-box}
.hidden{display:none!important}

/* brand */
.brand{display:flex;align-items:center;gap:12px}
.brand .name{font-size:16px;font-weight:650;letter-spacing:.2px}
.brand .sub{font-size:11px;color:var(--dim);letter-spacing:1.4px;text-transform:uppercase;margin-top:1px}
.mark{filter:drop-shadow(0 2px 8px color-mix(in srgb,var(--accent) 45%,transparent))}

/* login */
.login{position:fixed;inset:0;display:grid;place-items:center;z-index:40}
.login-card{width:min(400px,90vw);border:1px solid var(--border);border-radius:16px;background:var(--panel);box-shadow:var(--shadow);padding:30px}
.login-card p{color:var(--muted);font-size:13px;margin:14px 0 20px}
.linkbtn{background:none;border:0;color:var(--accent);cursor:pointer;font-size:12.5px;margin-top:16px;padding:4px 0;display:inline-block}
.linkbtn:hover{text-decoration:underline}
label.fl{font-size:11px;letter-spacing:.8px;text-transform:uppercase;color:var(--dim);font-weight:600;margin:14px 0 7px;display:block}
input,select{width:100%;padding:10px 12px;border-radius:var(--radius-sm);border:1px solid var(--border-2);background:var(--panel-2);color:var(--text);font-size:13px;outline:none;transition:border-color .13s,box-shadow .13s}
input.mono{font-family:var(--mono)}
input:focus,select:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.err{color:var(--danger);font-size:12.5px;margin-top:12px;min-height:16px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:9px 15px;border-radius:var(--radius-sm);border:1px solid transparent;font-size:var(--f-body);font-weight:600;cursor:pointer;text-decoration:none;transition:filter .12s,background .12s,border-color .12s,transform .04s;white-space:nowrap}
.btn:active{transform:translateY(.5px)}
.btn-primary{background:linear-gradient(180deg,var(--accent-2),var(--accent));color:var(--accent-ink)}
.btn-primary:hover{filter:brightness(1.06)}
.btn-primary.wide{width:100%;margin-top:20px}
.btn-ghost{background:var(--panel-2);border-color:var(--border);color:var(--muted)}
.btn-ghost:hover{color:var(--text);border-color:var(--border-2)}
.btn-danger{background:color-mix(in srgb,var(--danger) 16%,transparent);color:var(--danger);border-color:color-mix(in srgb,var(--danger) 30%,transparent)}
.btn-danger:hover{filter:brightness(1.1)}
.btn-sm{padding:5px 10px;font-size:var(--f-meta);font-weight:550}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn:focus-visible,.navitem:focus-visible,.tab:focus-visible,.crumb:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent-line);outline-offset:2px}
.mono{font-family:var(--mono)}

/* app shell */
#app{display:grid;grid-template-columns:264px 1fr;height:100%}
.sidebar{display:flex;flex-direction:column;min-height:0;background:linear-gradient(180deg,var(--panel),color-mix(in srgb,var(--panel) 92%,#000));border-right:1px solid var(--border)}
.sidebar .top{padding:20px 20px 16px}
.rail{flex:1;min-height:0;overflow-y:auto;padding:6px 12px}
.rail-label{font-size:10.5px;letter-spacing:1.3px;text-transform:uppercase;color:var(--dim);font-weight:600;padding:14px 8px 8px}
.navitem{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:9px 10px;border-radius:var(--radius-sm);border:1px solid transparent;background:none;color:var(--muted);cursor:pointer;margin-bottom:2px;transition:background .12s,color .12s,border-color .12s;font-size:13.5px}
.navitem:hover{background:var(--panel-2);color:var(--text)}
.navitem.active{background:var(--accent-soft);color:var(--text);border-color:color-mix(in srgb,var(--accent) 35%,transparent)}
.sidebar .foot{border-top:1px solid var(--border);padding:14px}
.who{font-size:12.5px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.who .em{color:var(--muted);font-size:11.5px;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.foot .dlapp:empty{display:none}
.foot .dl{width:100%;margin-top:10px;font-size:12.5px}
.foot .dl svg{flex:none;color:var(--accent)}
.foot .dl .dlv{color:var(--dim);font-variant-numeric:tabular-nums;font-weight:500}

.main{display:flex;flex-direction:column;min-width:0;min-height:0}
.topbar{display:flex;align-items:center;gap:14px;padding:0 26px;min-height:60px;border-bottom:1px solid var(--border);background:color-mix(in srgb,var(--panel) 55%,transparent);backdrop-filter:blur(8px);position:sticky;top:0;z-index:5}
.crumbs{display:flex;align-items:center;gap:4px;font-size:13.5px}
.crumb{padding:4px 8px;border-radius:6px;background:none;border:0;color:var(--muted);cursor:pointer;font-size:13.5px}
.crumb:hover{background:var(--panel-2);color:var(--text)}
.crumb.last{color:var(--text);font-weight:550;cursor:default}
.crumb-sep{color:var(--dim)}
.tabs{display:flex;gap:2px;margin-left:8px}
.tab{padding:7px 13px;border-radius:var(--radius-sm);border:1px solid transparent;background:none;color:var(--muted);cursor:pointer;font-size:13px;font-weight:500}
.tab:hover{color:var(--text);background:var(--panel-2)}
.tab.active{color:var(--text);background:var(--panel-2);border-color:var(--border-2)}
.spacer{margin-left:auto}
.content{flex:1;overflow-y:auto;padding:24px 26px 60px}

.view-head{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.view-head h1{font-size:17px;font-weight:600;margin:0}
.view-head .count{font-size:12px;color:var(--dim);font-variant-numeric:tabular-nums}
.view-head .spacer{margin-left:auto}

.grp{font-size:var(--f-label);letter-spacing:.09em;text-transform:uppercase;color:var(--dim);font-weight:600}
.sec{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:26px 0 10px}
.sec .grp{margin:0}
.card{border:1px solid var(--border);border-radius:var(--radius);background:color-mix(in srgb,var(--panel) 70%,transparent);overflow:hidden}
table{width:100%;border-collapse:collapse}
thead th{text-align:left;font-size:10.5px;letter-spacing:1px;text-transform:uppercase;color:var(--dim);font-weight:600;padding:11px 16px;background:color-mix(in srgb,var(--panel-2) 60%,transparent);border-bottom:1px solid var(--border)}
tbody td{padding:10px 16px;border-bottom:1px solid color-mix(in srgb,var(--border) 60%,transparent);vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr.clickable{cursor:pointer;transition:background .1s}
tbody tr.clickable:hover{background:var(--panel-2)}
.row-actions{display:flex;gap:6px;justify-content:flex-end}
.chev{color:var(--dim);font-size:17px;text-align:right;width:30px;transition:color .1s,transform .1s}
tr.clickable:hover .chev{color:var(--accent)}
.rowhint{color:var(--dim);font-size:12.5px;margin:-4px 0 16px;display:flex;align-items:center;gap:7px}
.rowhint svg{flex:none;color:var(--accent)}
.idchip{font-family:var(--mono);font-size:12px;color:var(--muted);background:var(--panel-2);border:1px solid var(--border);border-radius:6px;padding:2px 7px;cursor:pointer}
.idchip:hover{background:var(--panel-3);color:var(--text)}

.badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:550;padding:2px 9px;border-radius:var(--pill);line-height:1.6;border:1px solid transparent;white-space:nowrap}
.b-accent{color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,transparent)}
.b-violet{color:var(--accent-2);background:color-mix(in srgb,var(--accent-2) 14%,transparent)}
.b-ok{color:var(--ok);background:color-mix(in srgb,var(--ok) 13%,transparent)}
.b-warn{color:var(--warn);background:color-mix(in srgb,var(--warn) 14%,transparent)}
.b-danger{color:var(--danger);background:color-mix(in srgb,var(--danger) 14%,transparent)}
.b-info{color:var(--info);background:color-mix(in srgb,var(--info) 12%,transparent)}
.b-muted{color:var(--muted);background:var(--panel-2);border-color:var(--border)}

.state{display:flex;flex-direction:column;align-items:center;gap:12px;padding:60px 20px;text-align:center;color:var(--dim)}
.state .msg{font-size:14px;color:var(--muted)}
.spinner{width:22px;height:22px;border-radius:50%;border:2.5px solid var(--border-2);border-top-color:var(--accent);animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* modal */
.scrim{position:fixed;inset:0;background:rgba(4,5,8,.6);backdrop-filter:blur(2px);display:grid;place-items:center;z-index:50}
.modal{width:min(440px,92vw);max-height:88vh;overflow-y:auto;border:1px solid var(--border);border-radius:14px;background:var(--panel);box-shadow:var(--shadow);padding:24px}
.modal h2{font-size:15px;margin:0 0 4px}
.modal .sub{color:var(--dim);font-size:12.5px;margin-bottom:8px}
.modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:22px}
.modal .adv{margin-top:10px}
.modal .adv>summary{cursor:pointer;color:var(--dim);font-size:11px;letter-spacing:.8px;text-transform:uppercase;font-weight:600;padding:6px 0;user-select:none;list-style:revert}
.checkbox{display:flex;align-items:center;gap:9px;margin-top:14px;font-size:13px;color:var(--muted)}
.checkbox input{width:auto}

.toast{position:fixed;bottom:22px;left:50%;transform:translate(-50%,20px);background:var(--panel-3);border:1px solid var(--border-2);color:var(--text);padding:9px 16px;border-radius:var(--pill);font-size:12.5px;box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;z-index:60}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast.err{border-color:color-mix(in srgb,var(--danger) 50%,transparent)}

/* filespace workspace: left sub-nav back item + page-scoped bits */
.navitem.back{color:var(--dim);font-size:12.5px;gap:8px;margin-bottom:6px}
.navitem.back:hover{color:var(--text)}
.navitem svg{flex:none}
.navitem .lbl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.railcap{font-size:13px;font-weight:600;color:var(--text);padding:6px 10px 2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.railcap .st{font-size:11px;font-weight:500;color:var(--dim);margin-left:6px}

/* file browser (Files + Deleted files) — matches the desktop tray's row design */
.fbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.fbrowse{border:1px solid var(--border);border-radius:var(--radius);background:color-mix(in srgb,var(--panel) 70%,transparent);overflow:hidden}
.frow{display:flex;align-items:center;gap:12px;padding:11px 14px;border-bottom:1px solid color-mix(in srgb,var(--border) 55%,transparent)}
.frow:last-child{border-bottom:0}
.frow.clk{cursor:pointer;transition:background .1s}
.frow.clk:hover{background:var(--panel-2)}
.frow .fic{display:grid;place-items:center;width:34px;height:34px;border-radius:8px;background:var(--panel-2);border:1px solid var(--border);color:var(--muted);flex:none}
.frow.dir .fic{color:var(--accent)}
.frow .fb{min-width:0;flex:1}
.frow .fb .nm{font-size:var(--f-row);color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.frow .fb .mt{font-size:var(--f-meta);color:var(--dim);margin-top:1px}
.frow .fa{display:flex;gap:6px;flex:none}
.frow.locked{color:var(--dim)}
.frow.locked .fic{color:var(--dim)}
.fcrumbs{display:flex;align-items:center;gap:2px;flex-wrap:wrap;margin:2px 0 14px;font-size:13px}
.fcrumbs .cr{background:none;border:0;color:var(--muted);cursor:pointer;padding:3px 8px;border-radius:6px;font-size:13px}
.fcrumbs .cr:hover{background:var(--panel-2);color:var(--text)}
.fcrumbs .cr.last{color:var(--text);font-weight:550;cursor:default}
.fcrumbs .sep{color:var(--dim)}
.okbar{color:var(--ok);background:color-mix(in srgb,var(--ok) 12%,transparent);border:1px solid color-mix(in srgb,var(--ok) 28%,transparent);border-radius:8px;padding:8px 12px;font-size:13px;margin-bottom:12px}

@media (max-width:720px){#app{grid-template-columns:1fr}.sidebar{display:none}}