/* lock · files — shared shell and components */

:root{
  --bg:#08090a;
  --bg-2:#0b0c0e;
  --panel:#0f1114;
  --panel-2:#131619;
  --panel-3:#181c20;
  --line:#1e2227;
  --line-2:#2a2f36;
  --line-3:#373d46;
  --ink:#eef0f3;
  --ink-2:#c6cbd3;
  --muted:#8a919c;
  --faint:#606771;
  --accent:#c9f26b;
  --accent-2:#a9d24e;
  --accent-soft:rgba(201,242,107,.10);
  --accent-line:rgba(201,242,107,.30);
  --bad:#ff7070;
  --bad-soft:rgba(255,112,112,.10);
  --warn:#ffc861;
  --info:#8ab4ff;
  --ok:#7ee2a8;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  --r-sm:7px; --r:10px; --r-lg:14px;
  --side-w:238px;
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:var(--bg); color:var(--ink);
  font:13.5px/1.55 var(--sans);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
::selection{background:rgba(201,242,107,.24); color:#fff}
a{color:inherit; text-decoration:none}
button,input,select,textarea{font:inherit; color:inherit}
button{cursor:pointer; background:none; border:0; padding:0}
img{max-width:100%; display:block}
h1,h2,h3,h4,p{margin:0}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#242a31; border-radius:10px; border:3px solid transparent; background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:#333a43; background-clip:content-box; border:3px solid transparent}
::-webkit-scrollbar-track{background:transparent}

.mono{font-family:var(--mono); font-variant-ligatures:none}
.faint{color:var(--faint)}
.muted{color:var(--muted)}
.accent{color:var(--accent)}
.nowrap{white-space:nowrap}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------------------------------------------------------------- shell */

.app{display:grid; grid-template-columns:var(--side-w) minmax(0,1fr); min-height:100vh}

.side{
  position:sticky; top:0; height:100vh; display:flex; flex-direction:column;
  background:var(--bg-2); border-right:1px solid var(--line);
  padding:18px 12px 14px; gap:4px; z-index:30;
}
.side-head{display:flex; align-items:center; gap:9px; padding:2px 8px 14px}
.brand{font:600 19px/1 var(--mono); letter-spacing:.02em; color:var(--ink)}
.brand i{color:var(--accent); font-style:normal}
.brand-tag{
  font:600 9.5px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); border:1px solid var(--line-2); border-radius:4px; padding:4px 5px;
}
.ws{
  display:flex; align-items:center; gap:9px; padding:8px 9px; border:1px solid var(--line);
  background:var(--panel); border-radius:var(--r); margin-bottom:10px;
}
.ws-mark{
  width:24px;height:24px;border-radius:6px; flex:none;
  background:linear-gradient(145deg,#2c3a12,#171b12); border:1px solid #3b4a1e;
  color:var(--accent); display:grid; place-items:center; font:600 11px/1 var(--mono);
}
.ws-txt{min-width:0}
.ws-name{font-size:12.5px; font-weight:600; line-height:1.2}
.ws-sub{font-size:10.5px; color:var(--faint); line-height:1.4}

.nav{display:flex; flex-direction:column; gap:2px}
.nav-sec{
  font:600 9.5px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase;
  color:var(--faint); padding:14px 9px 7px;
}
.nav-item{
  display:flex; align-items:center; gap:10px; height:33px; padding:0 9px; border-radius:var(--r-sm);
  color:var(--muted); font-size:13px; font-weight:500; position:relative;
}
.nav-item svg{width:16px;height:16px; flex:none; opacity:.85}
.nav-item:hover{background:#14171b; color:var(--ink-2)}
.nav-item[aria-current="page"]{background:#171b16; color:var(--ink)}
.nav-item[aria-current="page"]::before{
  content:""; position:absolute; left:-12px; top:7px; bottom:7px; width:2px;
  background:var(--accent); border-radius:0 2px 2px 0;
}
.nav-item[aria-current="page"] svg{color:var(--accent); opacity:1}
.nav-count{margin-left:auto; font:500 10.5px/1 var(--mono); color:var(--faint)}
.nav-item[aria-current="page"] .nav-count{color:var(--accent-2)}
.nav-new{
  margin-left:auto; font:600 9px/1 var(--mono); letter-spacing:.06em; color:#0a0b0d;
  background:var(--accent); border-radius:3px; padding:3px 4px;
}

.recent{margin-top:2px; overflow:auto; min-height:0}
.recent a{
  display:flex; align-items:center; gap:8px; padding:6px 9px; border-radius:6px;
  font-size:12px; color:var(--muted); line-height:1.3;
}
.recent a:hover{background:#14171b; color:var(--ink-2)}
.recent .nm{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.kdot{width:5px;height:5px;border-radius:50%;flex:none;background:var(--faint)}
.kdot.text{background:#8ab4ff}.kdot.image{background:#7ee2a8}.kdot.pdf{background:#ff9f7a}
.kdot.archive{background:#c7a2ff}.kdot.key{background:var(--warn)}.kdot.other{background:var(--faint)}

.side-foot{margin-top:auto; padding:10px 4px 0; border-top:1px solid var(--line)}
.meter{display:flex; align-items:center; justify-content:space-between; font:500 10.5px/1 var(--mono); color:var(--faint); margin:6px 5px 8px}
.meter b{color:var(--muted); font-weight:500}
.bar{height:3px; background:#1b1f24; border-radius:3px; overflow:hidden; margin:0 5px 12px}
.bar i{display:block; height:100%; background:linear-gradient(90deg,var(--accent-2),var(--accent)); border-radius:3px}
.keychip{
  display:flex; align-items:center; gap:8px; padding:7px 8px; border:1px solid var(--line);
  border-radius:var(--r-sm); background:var(--panel); width:100%; text-align:left;
}
.keychip:hover{border-color:var(--line-2)}
.keychip .dot{width:6px;height:6px;border-radius:50%;background:var(--ok); box-shadow:0 0 0 3px rgba(126,226,168,.10); flex:none}
.keychip .who{font:500 11px/1.3 var(--mono); color:var(--ink-2); overflow:hidden; text-overflow:ellipsis}
.keychip .lbl{font:500 9.5px/1.3 var(--mono); color:var(--faint); letter-spacing:.06em; text-transform:uppercase}
.keychip svg{width:13px;height:13px; margin-left:auto; color:var(--faint); flex:none}

/* ---------------------------------------------------------------- main */

.main{min-width:0; display:flex; flex-direction:column}
.topbar{
  position:sticky; top:0; z-index:20; height:56px; flex:none;
  display:flex; align-items:center; gap:14px; padding:0 28px;
  background:rgba(8,9,10,.82); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.crumb{display:flex; align-items:center; gap:8px; font:500 11.5px/1 var(--mono); color:var(--faint); min-width:0}
.crumb .sep{color:#3a4048}
.crumb .cur{color:var(--ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.crumb svg{width:13px;height:13px; opacity:.7}
.topbar .grow{flex:1}
.searchbtn{
  display:flex; align-items:center; gap:9px; height:31px; padding:0 9px 0 10px; min-width:230px;
  border:1px solid var(--line); border-radius:var(--r-sm); background:var(--panel);
  color:var(--faint); font-size:12.5px; text-align:left;
}
.searchbtn:hover{border-color:var(--line-2); color:var(--muted)}
.searchbtn svg{width:14px;height:14px; flex:none}
.searchbtn kbd{margin-left:auto}
kbd{
  font:500 10px/1 var(--mono); color:var(--muted); background:#1a1e23; border:1px solid #272c33;
  border-bottom-color:#333941; border-radius:4px; padding:3px 4px; white-space:nowrap;
}
.page{padding:26px 28px 72px; max-width:1500px; width:100%; margin:0 auto}

.page-head{display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:22px; flex-wrap:wrap}
.page-head h1{font-size:24px; line-height:1.2; font-weight:600; letter-spacing:-.02em}
.page-sub{color:var(--muted); font-size:12.5px; margin-top:6px; max-width:72ch}
.head-actions{display:flex; align-items:center; gap:8px}
.head-stats{display:flex; gap:22px; align-items:flex-end}
.hstat{display:flex; flex-direction:column; gap:3px}
.hstat b{font:600 18px/1 var(--mono); letter-spacing:-.02em}
.hstat span{font:500 9.5px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--faint)}

/* -------------------------------------------------------------- buttons */

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  height:32px; padding:0 12px; border-radius:var(--r-sm); border:1px solid transparent;
  font-size:12.5px; font-weight:600; white-space:nowrap;
  background:var(--accent); color:#0a0b0d; transition:filter .12s, background .12s, border-color .12s;
}
.btn svg{width:14px;height:14px; flex:none}
.btn:hover{filter:brightness(1.07)}
.btn:active{transform:translateY(.5px)}
.btn[disabled]{opacity:.4; cursor:not-allowed; filter:none}
.btn.ghost{background:var(--panel); border-color:var(--line); color:var(--ink-2); font-weight:500}
.btn.ghost:hover{border-color:var(--line-3); color:var(--ink); background:var(--panel-2)}
.btn.quiet{background:transparent; color:var(--muted); font-weight:500}
.btn.quiet:hover{background:var(--panel-2); color:var(--ink)}
.btn.danger{background:transparent; border-color:#3a2424; color:var(--bad); font-weight:500}
.btn.danger:hover{background:var(--bad-soft); border-color:#543030}
.btn.sm{height:27px; padding:0 9px; font-size:11.5px; border-radius:6px}
.btn.xs{height:23px; padding:0 7px; font-size:10.5px; border-radius:5px; gap:5px}
.btn.xs svg{width:12px;height:12px}
.btn.icon{width:32px; padding:0}
.btn.icon.sm{width:27px}
.btn.block{width:100%}

.iconbtn{
  width:27px;height:27px;display:grid;place-items:center;border-radius:6px;
  color:var(--faint); border:1px solid transparent;
}
.iconbtn:hover{background:var(--panel-3); color:var(--ink-2)}
.iconbtn svg{width:14px;height:14px}
.iconbtn.on{color:var(--accent)}

/* --------------------------------------------------------------- inputs */

.field{display:flex; flex-direction:column; gap:6px; min-width:0}
.field > label,.lbl{
  font:600 9.5px/1 var(--mono); letter-spacing:.13em; text-transform:uppercase; color:var(--faint);
}
.input,.select,.textarea{
  width:100%; background:var(--bg-2); border:1px solid var(--line); color:var(--ink);
  border-radius:var(--r-sm); padding:8px 10px; font-size:12.5px; outline:none;
  transition:border-color .12s, background .12s;
}
.input::placeholder,.textarea::placeholder{color:#565d66}
.input:hover,.select:hover,.textarea:hover{border-color:#262b32}
.input:focus,.select:focus,.textarea:focus{border-color:var(--accent-line); background:#0a0c0a; box-shadow:0 0 0 3px rgba(201,242,107,.07)}
.textarea{resize:vertical; min-height:88px; font-family:var(--mono); font-size:12px; line-height:1.65}
.select{
  appearance:none; padding-right:28px; cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a919c' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat; background-position:right 9px center;
}
.input.mono{font-family:var(--mono); font-size:12px}
.search{position:relative; min-width:0}
.search svg{position:absolute; left:10px; top:50%; transform:translateY(-50%); width:14px;height:14px; color:var(--faint); pointer-events:none}
.search .input{padding-left:31px; height:32px}
.search .clr{position:absolute; right:5px; top:50%; transform:translateY(-50%); width:22px;height:22px; display:none; place-items:center; border-radius:4px; color:var(--faint)}
.search .clr:hover{color:var(--ink); background:var(--panel-3)}
.search.has .clr{display:grid}
.search .clr svg{position:static; transform:none; width:12px;height:12px}

/* segmented control */
.seg{display:inline-flex; background:var(--bg-2); border:1px solid var(--line); border-radius:8px; padding:2px; gap:2px}
.seg button{
  height:26px; padding:0 10px; border-radius:6px; font-size:11.5px; font-weight:500; color:var(--muted);
  display:inline-flex; align-items:center; gap:6px;
}
.seg button svg{width:13px;height:13px}
.seg button:hover{color:var(--ink-2)}
.seg button[aria-selected="true"]{background:var(--panel-3); color:var(--ink); box-shadow:0 1px 0 rgba(255,255,255,.03) inset}

/* tabs (library) */
.tabs{display:flex; align-items:center; gap:2px; border-bottom:1px solid var(--line); margin-bottom:18px; flex-wrap:wrap}
.tab{
  position:relative; display:flex; align-items:center; gap:7px; height:38px; padding:0 12px 0 11px;
  color:var(--muted); font-size:13px; font-weight:500;
}
.tab svg{width:15px;height:15px}
.tab:hover{color:var(--ink-2)}
.tab[aria-selected="true"]{color:var(--ink)}
.tab[aria-selected="true"]::after{content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--accent)}
.tab .n{font:500 10px/1 var(--mono); color:var(--faint); background:#15181c; border:1px solid var(--line); border-radius:999px; padding:2px 5px}
.tab[aria-selected="true"] .n{color:var(--accent); border-color:#2c3718; background:var(--accent-soft)}
.tabs .grow{flex:1}

/* chips, tags, kinds */
.chip{
  display:inline-flex; align-items:center; gap:6px; height:24px; padding:0 9px; border-radius:999px;
  border:1px solid var(--line); background:var(--bg-2); color:var(--muted); font-size:11.5px; white-space:nowrap;
}
.chip svg{width:12px;height:12px}
.chip:hover{border-color:var(--line-3); color:var(--ink-2)}
.chip.on{border-color:var(--accent-line); background:var(--accent-soft); color:var(--accent)}
.chip .n{font:500 10px/1 var(--mono); color:var(--faint)}
.chip.on .n{color:var(--accent-2)}
.tag{
  display:inline-flex; align-items:center; gap:4px; height:19px; padding:0 7px; border-radius:4px;
  font:500 10.5px/1 var(--mono); color:#a7aeb8; background:#171a1f; border:1px solid #242930; white-space:nowrap;
}
.tag i{width:4px;height:4px;border-radius:50%;background:currentColor; opacity:.7}
.tag.lime{color:#cbe997; background:#161c0f; border-color:#2b3519}
.tag.blue{color:#a8c6f5; background:#121823; border-color:#22303f}
.tag.violet{color:#cbb4ee; background:#171324; border-color:#2d2440}
.tag.amber{color:#e6c58b; background:#1d1710; border-color:#372a18}
.tag.rose{color:#eda3ab; background:#1f1315; border-color:#3a2024}
.tag .x{display:grid;place-items:center;width:12px;height:12px;margin-right:-3px;border-radius:3px;color:inherit;opacity:.6}
.tag .x:hover{opacity:1;background:rgba(255,255,255,.07)}

.kind{
  display:inline-flex; align-items:center; gap:5px; height:20px; padding:0 6px;
  font:500 9.5px/1 var(--mono); letter-spacing:.06em; text-transform:uppercase;
  border:1px solid var(--line); border-radius:4px; color:var(--muted); background:#101317;
}
.kind svg{width:11px;height:11px}
.kind.text{color:#9fc4ff} .kind.image{color:#8fe3b4} .kind.pdf{color:#ffab87}
.kind.archive{color:#c9a7f5} .kind.key{color:#e8cb8a} .kind.other{color:var(--muted)}
.kind.plain{border-color:transparent; background:none; padding:0; height:auto}

/* ---------------------------------------------------------------- cards */

.card{background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); min-width:0}
.card-h{display:flex; align-items:center; gap:10px; padding:13px 16px; border-bottom:1px solid var(--line); min-height:46px}
.card-h h2{font-size:12.5px; font-weight:600; letter-spacing:.01em}
.card-h .hint{color:var(--faint); font-size:11px; margin-left:2px}
.card-h .grow{flex:1}
.card-b{padding:16px}
.card-f{padding:10px 16px; border-top:1px solid var(--line); background:#0c0e11; border-radius:0 0 var(--r-lg) var(--r-lg)}

/* -------------------------------------------------------------- dropzone */

.drop{
  border:1px dashed #2b3138; border-radius:12px; background:
    radial-gradient(120% 120% at 50% 0%, rgba(201,242,107,.035), transparent 60%), #0b0d0f;
  padding:28px 20px; text-align:center; transition:border-color .14s, background .14s;
  position:relative; min-height:236px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
.drop:hover{border-color:#3a424b}
.drop.over{border-color:var(--accent); background:radial-gradient(120% 120% at 50% 0%, rgba(201,242,107,.10), transparent 70%), #0c0e09}
.drop .glyph{
  width:44px;height:44px;border-radius:12px;display:grid;place-items:center;margin-bottom:9px;
  background:#151a10; border:1px solid #2a3418; color:var(--accent);
}
.drop .glyph svg{width:22px;height:22px}
.drop h3{font-size:14px; font-weight:600}
.drop p{font-size:12px; color:var(--muted); max-width:44ch}
.drop .row{display:flex; gap:8px; margin-top:14px; flex-wrap:wrap; justify-content:center}
.drop .foot{font:500 10.5px/1 var(--mono); color:var(--faint); margin-top:14px; letter-spacing:.02em}
.drop textarea{
  width:100%; min-height:150px; text-align:left; background:#0a0c0e; border:1px solid var(--line);
  border-radius:8px; padding:11px 12px; font:12px/1.6 var(--mono); color:var(--ink-2); outline:none; resize:vertical;
}
.drop textarea:focus{border-color:var(--accent-line)}
.drop .pastebar{display:flex; align-items:center; gap:8px; width:100%; margin-top:8px}
.drop .pastebar .input{height:30px; font-size:11.5px}

/* ---------------------------------------------------------------- queue */

.queue{display:flex; flex-direction:column}
.qrow{
  display:grid; grid-template-columns:22px minmax(0,1.7fr) 88px 92px 96px 92px 26px;
  align-items:center; gap:10px; padding:9px 14px; border-bottom:1px solid #171a1e; min-height:44px;
}
.qrow:last-child{border-bottom:0}
.qhead{
  font:600 9.5px/1 var(--mono); letter-spacing:.11em; text-transform:uppercase; color:var(--faint);
  background:#0b0d0f; border-bottom:1px solid var(--line); min-height:31px; padding:0 14px;
}
.qname{display:flex; align-items:center; gap:8px; min-width:0}
.qname .nm{font:500 12px/1.3 var(--mono); color:var(--ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.qname .pth{font-size:10.5px; color:var(--faint); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.qmeta{font:500 11px/1 var(--mono); color:var(--muted); white-space:nowrap}
.qstatus{display:inline-flex; align-items:center; gap:5px; font:500 10.5px/1 var(--mono); color:var(--faint); white-space:nowrap}
.qstatus i{width:5px;height:5px;border-radius:50%;background:currentColor; flex:none}
.qstatus.ok{color:var(--ok)} .qstatus.dup{color:var(--warn)} .qstatus.err{color:var(--bad)}
.qstatus.run{color:var(--accent)} .qstatus.run i{animation:pulse 1s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
.qbar{height:2px; background:#1b1f24; border-radius:2px; overflow:hidden; margin-top:5px}
.qbar i{display:block;height:100%;background:var(--accent); width:0; transition:width .2s}
.qrow .rm{opacity:0; color:var(--faint); display:grid; place-items:center; width:22px;height:22px; border-radius:4px}
.qrow:hover .rm{opacity:1}
.qrow .rm:hover{background:var(--bad-soft); color:var(--bad)}
.qrow.done .nm{color:var(--muted)}

.summarybar{
  display:flex; align-items:center; gap:14px; padding:11px 14px; border-top:1px solid var(--line);
  background:#0e1208; border-radius:0 0 var(--r-lg) var(--r-lg); font-size:12px;
}
.summarybar.bad{background:#140d0d}
.summarybar .ico{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:rgba(201,242,107,.12); color:var(--accent); flex:none}
.summarybar .ico svg{width:12px;height:12px}
.summarybar.bad .ico{background:var(--bad-soft); color:var(--bad)}
.summarybar b{font-family:var(--mono); font-weight:600}
.summarybar .sep{color:#2e353d}
.summarybar .grow{flex:1}

/* --------------------------------------------------------- preset cards */

.preset-row{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px}
.preset{
  position:relative; text-align:left; padding:13px 13px 12px; border-radius:12px;
  border:1px solid var(--line); background:linear-gradient(180deg,#111418,#0e1013);
  display:flex; flex-direction:column; gap:8px; min-height:142px; overflow:hidden;
  transition:border-color .14s, background .14s, transform .14s;
}
.preset:hover{border-color:var(--line-3); transform:translateY(-1px)}
.preset .glow{
  position:absolute; inset:-40% 40% 55% -20%; opacity:.5; pointer-events:none;
  background:radial-gradient(circle at 30% 40%, var(--pc,#c9f26b) 0%, transparent 70%);
  filter:blur(26px); opacity:.10;
}
.preset[aria-pressed="true"]{
  border-color:var(--accent-line); background:linear-gradient(180deg,#141a0e,#0e1109);
  box-shadow:0 0 0 1px rgba(201,242,107,.10), 0 8px 24px -18px rgba(201,242,107,.6);
}
.preset .top{display:flex; align-items:center; gap:8px; width:100%}
.pg{
  width:28px;height:28px;border-radius:8px;display:grid;place-items:center;flex:none;
  background:color-mix(in srgb, var(--pc,#c9f26b) 12%, #0e1114);
  border:1px solid color-mix(in srgb, var(--pc,#c9f26b) 30%, #1c2126);
  color:var(--pc,#c9f26b);
}
.pg svg{width:15px;height:15px}
.preset .ck{margin-left:auto; width:15px;height:15px; border-radius:50%; border:1px solid var(--line-2); display:grid; place-items:center; color:#0a0b0d; flex:none}
.preset[aria-pressed="true"] .ck{background:var(--accent); border-color:var(--accent)}
.preset .ck svg{width:10px;height:10px; display:none}
.preset[aria-pressed="true"] .ck svg{display:block}
.preset .pname{font-size:12.5px; font-weight:600; line-height:1.25}
.preset .pdesc{font-size:11px; color:var(--muted); line-height:1.45; flex:1}
.preset .pm{display:flex; align-items:center; gap:6px; font:500 9.5px/1 var(--mono); color:var(--faint); letter-spacing:.03em; flex-wrap:wrap}
.preset .pm b{color:var(--muted); font-weight:500}
.preset .pm .d{width:2px;height:2px;border-radius:50%;background:#3a4149}
.preset .ptags{display:flex; gap:4px; flex-wrap:wrap; min-height:18px}

/* ------------------------------------------------------------- library */

.filters{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:14px}
.filters .grow{flex:1}
.filters .search{width:270px}
.viewtoggle{display:inline-flex; border:1px solid var(--line); border-radius:7px; overflow:hidden; background:var(--bg-2)}
.viewtoggle button{width:29px;height:29px;display:grid;place-items:center;color:var(--faint)}
.viewtoggle button:hover{color:var(--ink-2)}
.viewtoggle button[aria-pressed="true"]{background:var(--panel-3); color:var(--ink)}
.viewtoggle svg{width:14px;height:14px}

.crumbs{display:flex; align-items:center; gap:8px; font:500 11px/1 var(--mono); color:var(--faint); margin-bottom:10px}
.resultline{font:500 11px/1 var(--mono); color:var(--faint); letter-spacing:.02em; margin-bottom:10px; display:flex; gap:9px; align-items:center}
.resultline b{color:var(--ink-2); font-weight:500}

.file-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px}
@media(max-width:1500px){.file-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.file-card{
  position:relative; border:1px solid var(--line); border-radius:12px; background:var(--panel);
  overflow:hidden; display:flex; flex-direction:column; text-align:left;
  transition:border-color .14s, transform .14s, background .14s;
}
.file-card:hover{border-color:var(--line-3); transform:translateY(-1px); background:#111418}
.file-card.sel{border-color:var(--accent-line); background:#11160c}
.file-card .thumb{
  height:116px; background:radial-gradient(100% 100% at 50% 0%, #171b20, #0d0f12);
  border-bottom:1px solid var(--line); display:grid; place-items:center; position:relative; overflow:hidden;
}
.file-card .thumb img{width:100%;height:100%;object-fit:cover;object-position:top left; opacity:.92}
.file-card .thumb .ph{display:flex; flex-direction:column; align-items:center; gap:6px; color:#5c646f}
.file-card .thumb .ph svg{width:26px;height:26px}
.file-card .thumb .ext{font:600 9.5px/1 var(--mono); letter-spacing:.1em; color:var(--faint); text-transform:uppercase}
.file-card .thumb .lines{position:absolute; inset:12px 14px; display:flex; flex-direction:column; gap:5px; opacity:.5}
.file-card .thumb .lines i{height:4px; border-radius:2px; background:#222831}
.file-card .thumb .lines i:nth-child(1){width:62%; background:#2f3a22}
.file-card .thumb .lines i:nth-child(3){width:84%}
.file-card .thumb .lines i:nth-child(5){width:48%}
.file-card .thumb .badge{position:absolute; top:9px; left:9px; display:flex; gap:4px}
.file-card .thumb .star{position:absolute; top:8px; right:8px; color:var(--accent); opacity:0; transition:opacity .12s}
.file-card:hover .thumb .star,.file-card .thumb .star.on{opacity:1}
.file-card .body{padding:10px 12px 11px; display:flex; flex-direction:column; gap:6px; min-width:0}
.file-card .nm{font:500 12px/1.35 var(--mono); color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.file-card .sub{display:flex; align-items:center; gap:6px; font:500 10.5px/1 var(--mono); color:var(--faint); flex-wrap:wrap}
.file-card .sub .d{width:2px;height:2px;border-radius:50%;background:#3a4149}
.file-card .tags{display:flex; gap:4px; flex-wrap:wrap; min-height:18px}
.file-card .row-actions{display:flex; gap:4px; margin-left:auto; opacity:0; transition:opacity .12s}
.file-card:hover .row-actions,.file-card:focus-within .row-actions{opacity:1}
.check{
  width:16px;height:16px;border-radius:4px;border:1px solid #343a42; background:#0c0e10;
  display:grid; place-items:center; color:#0a0b0d; flex:none;
}
.check svg{width:11px;height:11px; display:none}
.check.on{background:var(--accent); border-color:var(--accent)}
.check.on svg{display:block}
.file-card .selwrap{position:absolute; top:8px; right:8px; z-index:2; opacity:0; transition:opacity .12s}
.file-card:hover .selwrap,.file-card.sel .selwrap{opacity:1}
.file-card.sel .selwrap{opacity:1}
.file-card .selwrap .check{background:rgba(10,11,13,.7); backdrop-filter:blur(4px)}
.file-card .selwrap .check.on{background:var(--accent)}

/* list view */
.list{width:100%; border-collapse:collapse}
.list th{
  text-align:left; font:600 9.5px/1 var(--mono); letter-spacing:.11em; text-transform:uppercase;
  color:var(--faint); padding:0 10px 9px; border-bottom:1px solid var(--line); white-space:nowrap;
}
.list td{padding:0 10px; height:42px; border-bottom:1px solid #171a1e; font-size:12px; vertical-align:middle}
.list tr:hover td{background:#0f1215}
.list tr.sel td{background:#11160c}
.list .nm{font:500 12px/1.3 var(--mono); color:var(--ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:340px}
.list .nm a:hover{color:var(--accent)}
.list td.m{font:500 11px/1 var(--mono); color:var(--muted); white-space:nowrap}
.list .acts{display:flex; gap:2px; justify-content:flex-end; opacity:0}
.list tr:hover .acts,.list tr:focus-within .acts{opacity:1}
.list .thumb-s{width:26px;height:26px;border-radius:5px;background:#14181d; border:1px solid var(--line); display:grid; place-items:center; color:var(--faint)}
.list .thumb-s svg{width:13px;height:13px}
.list .namecell{display:flex; align-items:center; gap:9px; min-width:0}

/* bulk bar */
.bulkbar{
  position:fixed; left:50%; bottom:22px; transform:translate(-50%,20px); z-index:60;
  display:none; align-items:center; gap:10px; padding:8px 9px 8px 14px;
  background:#14181b; border:1px solid var(--line-3); border-radius:11px;
  box-shadow:0 18px 50px -12px rgba(0,0,0,.8); font-size:12px;
}
.bulkbar.on{display:flex; animation:rise .16s ease-out forwards}
@keyframes rise{to{transform:translate(-50%,0)}}
.bulkbar .cnt{font:600 11.5px/1 var(--mono); color:var(--accent)}
.bulkbar .sep{width:1px;height:20px;background:var(--line-2)}
.bulkbar .btn{height:28px}

/* drawer */
.scrim{
  position:fixed; inset:0; background:rgba(0,0,0,.5); backdrop-filter:blur(2px);
  opacity:0; pointer-events:none; transition:opacity .18s; z-index:70;
}
.scrim.on{opacity:1; pointer-events:auto}
.drawer{
  position:fixed; top:0; right:0; bottom:0; width:470px; max-width:94vw; z-index:71;
  background:#0c0e10; border-left:1px solid var(--line-2); display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform .2s cubic-bezier(.2,.7,.3,1); box-shadow:-30px 0 60px -30px #000;
}
.drawer.on{transform:none}
.drawer-h{display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--line); flex:none}
.drawer-h .ttl{font-size:12.5px; font-weight:600}
.drawer-h .sub{font:500 10px/1 var(--mono); color:var(--faint); margin-top:3px; letter-spacing:.05em; text-transform:uppercase}
.drawer-b{overflow:auto; padding:16px; display:flex; flex-direction:column; gap:14px; flex:1}
.drawer-f{padding:12px 16px; border-top:1px solid var(--line); display:flex; gap:8px; flex:none; background:#0a0c0e}
.drawer .prev{border:1px solid var(--line); border-radius:8px; background:#08090b; overflow:hidden; max-height:210px}
.drawer .prev pre{margin:0; padding:12px; font:11px/1.6 var(--mono); color:#a9b2bd; overflow:auto; max-height:210px; white-space:pre-wrap; word-break:break-word}
.drawer .prev img{width:100%; max-height:210px; object-fit:cover; object-position:top left}
.kv{display:grid; grid-template-columns:96px minmax(0,1fr); gap:7px 10px; font-size:11.5px}
.kv dt{font:500 9.5px/1.7 var(--mono); color:var(--faint); text-transform:uppercase; letter-spacing:.08em}
.kv dd{margin:0; font:500 11.5px/1.6 var(--mono); color:var(--ink-2); overflow-wrap:anywhere}

/* keys + presets tabs */
.agent-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px}
@media(max-width:1450px){.agent-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.agent{
  position:relative; border:1px solid var(--line); border-radius:14px; overflow:hidden;
  background:linear-gradient(160deg,#101317,#0c0e11); display:flex; flex-direction:column;
}
.agent:hover{border-color:var(--line-3)}
.agent .band{height:3px; background:linear-gradient(90deg,var(--pc),transparent 85%); opacity:.85}
.agent .in{padding:15px 16px 14px; display:flex; flex-direction:column; gap:11px; flex:1}
.agent .head{display:flex; gap:11px; align-items:flex-start}
.avatar{
  width:38px;height:38px;border-radius:11px;display:grid;place-items:center;flex:none;
  background:color-mix(in srgb, var(--pc) 13%, #0d1013); border:1px solid color-mix(in srgb, var(--pc) 32%, #1f242a);
  color:var(--pc);
}
.avatar svg{width:19px;height:19px}
.agent .an{font-size:14px; font-weight:600; letter-spacing:-.01em; line-height:1.3}
.agent .ad{font-size:11.5px; color:var(--muted); line-height:1.5; margin-top:2px}
.agent .desc{font-size:12px; color:var(--ink-2); line-height:1.5; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:36px}
.agent .specs{display:grid; grid-template-columns:1fr 1fr; gap:8px 12px; padding:10px 0 0; border-top:1px solid #1a1e23}
.agent .spec{display:flex; flex-direction:column; gap:3px}
.agent .spec span{font:500 9px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--faint)}
.agent .spec b{font:500 11px/1.3 var(--mono); color:var(--ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.agent .foot{display:flex; align-items:center; gap:8px; padding-top:2px}
.agent .use{margin-left:auto}
.agent .stats{display:flex; gap:12px; font:500 10px/1 var(--mono); color:var(--faint)}
.agent .stats b{color:var(--ink-2); font-weight:600}

.keygrid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-bottom:16px}
.kpi{border:1px solid var(--line); border-radius:10px; background:var(--panel); padding:12px 14px}
.kpi .lab{font:600 9px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--faint)}
.kpi .val{font:600 19px/1.2 var(--mono); margin-top:7px; letter-spacing:-.02em}
.kpi .val small{font-size:11px; color:var(--faint); font-weight:500; margin-left:3px}

/* ------------------------------------------------------------- file page */

.file-top{display:flex; align-items:flex-start; gap:16px; margin-bottom:20px; flex-wrap:wrap}
.ftype{
  width:46px;height:46px;border-radius:12px;display:grid;place-items:center;flex:none;
  background:#12161a; border:1px solid var(--line-2); color:var(--ink-2);
}
.ftype svg{width:22px;height:22px}
.file-title{min-width:0; flex:1}
.file-title h1{font:600 21px/1.25 var(--mono); letter-spacing:-.01em; display:flex; align-items:center; gap:9px; flex-wrap:wrap}
.file-title .sub{display:flex; align-items:center; gap:7px; margin-top:7px; font:500 11px/1 var(--mono); color:var(--faint); flex-wrap:wrap}
.file-title .sub .d{width:2px;height:2px;border-radius:50%;background:#3a4149}
.rename-form{display:none; align-items:center; gap:7px; margin-top:2px}
.rename-form.on{display:flex}
.rename-form .input{max-width:460px; font-family:var(--mono); height:34px; font-size:14px}

.split{display:grid; grid-template-columns:minmax(0,1fr) 372px; gap:16px; align-items:start}
@media(max-width:1200px){.split{grid-template-columns:minmax(0,1fr)}}
.stack{display:flex; flex-direction:column; gap:14px; min-width:0}

.preview{overflow:hidden}
.prev-tool{display:flex; align-items:center; gap:8px; padding:7px 10px; border-bottom:1px solid var(--line); background:#0b0d0f; flex-wrap:wrap}
.prev-tool .seg{background:#0f1215; padding:1px}
.prev-tool .seg button{height:22px; padding:0 8px; font-size:11px}
.code{
  display:grid; grid-template-columns:auto minmax(0,1fr); max-height:520px; overflow:auto;
  background:#08090b; font:11.5px/1.75 var(--mono);
}
.code .ln{
  padding:12px 12px 12px 14px; text-align:right; color:#3f4650; user-select:none;
  border-right:1px solid #171a1e; background:#0a0b0d; white-space:pre;
}
.code pre{margin:0; padding:12px 16px; overflow:visible; color:#b7c0cb; white-space:pre; tab-size:2}
.code pre .k{color:#c9e8a0} .code pre .s{color:#a9c9a0} .code pre .n{color:#e0c48a}
.code pre .c{color:#5c646f} .code pre .b{color:#b79aef}
.code .redact{background:rgba(255,200,97,.10); border-bottom:1px dashed rgba(255,200,97,.35); color:#e3c48c; border-radius:2px; padding:0 2px}
.prev-empty{padding:56px 20px; text-align:center; color:var(--faint); display:flex; flex-direction:column; align-items:center; gap:8px}
.prev-empty svg{width:28px;height:28px; opacity:.6}
.imgprev{display:grid; place-items:center; padding:18px; background:
  linear-gradient(45deg,#0b0d10 25%,transparent 25%,transparent 75%,#0b0d10 75%),
  linear-gradient(45deg,#0b0d10 25%,#0d0f12 25%,#0d0f12 75%,#0b0d10 75%);
  background-size:18px 18px; background-position:0 0,9px 9px; max-height:560px; overflow:auto}
.imgprev img{border:1px solid var(--line-2); border-radius:6px; box-shadow:0 20px 50px -20px #000}
.pdfprev{padding:0; background:#141414; display:grid; place-items:center; min-height:420px}
.pdfprev .page{width:78%; max-width:560px; aspect-ratio:1/1.294; background:#f4f2ec; color:#1a1a1a; border-radius:2px; padding:34px 38px; box-shadow:0 24px 60px -24px #000; font-family:var(--sans)}
.pdfprev .page h3{font-size:18px; letter-spacing:-.01em; color:#111; margin-bottom:4px}
.pdfprev .page .meta{font:10px/1.5 var(--mono); color:#777; margin-bottom:16px}
.pdfprev .page p{font-size:8.5px; line-height:1.7; color:#3b3b3b; margin-bottom:8px}
.pdfprev .page .l{height:4px;background:#e2ded3;border-radius:2px;margin-bottom:6px}

.parsed .sec{padding:14px 16px; border-bottom:1px solid #171a1e}
.parsed .sec:last-child{border-bottom:0}
.parsed h3{font:600 9.5px/1 var(--mono); letter-spacing:.13em; text-transform:uppercase; color:var(--faint); margin-bottom:9px; display:flex; align-items:center; gap:7px}
.parsed h3 .n{color:var(--muted); font-weight:500}
.fields{display:grid; grid-template-columns:150px minmax(0,1fr); gap:0; font-size:11.5px}
.fields dt,.fields dd{margin:0; padding:6px 0; border-bottom:1px dashed #1a1e23; min-width:0}
.fields dt{font:500 10.5px/1.5 var(--mono); color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding-right:12px}
.fields dd{font:500 11px/1.5 var(--mono); color:var(--ink-2); overflow-wrap:anywhere}
.fields dt:last-of-type,.fields dd:last-of-type{border-bottom:0}
.secretrow{display:flex; align-items:center; gap:9px; padding:7px 9px; border:1px solid #33290f; background:#161208; border-radius:7px; margin-bottom:6px}
.secretrow .kn{font:500 10.5px/1.3 var(--mono); color:#d9c08d; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.secretrow .val{font:500 10.5px/1.3 var(--mono); color:var(--faint); letter-spacing:.04em; margin-left:auto; white-space:nowrap}
.secretrow .reveal{color:#8b7a52; display:grid; place-items:center; width:20px;height:20px; border-radius:4px; flex:none}
.secretrow .reveal:hover{background:#241c0e; color:var(--warn)}
.secretrow svg{width:12px;height:12px}
.warnrow{display:flex; gap:8px; align-items:flex-start; font-size:11.5px; color:#d6b98c; padding:6px 0}
.warnrow svg{width:13px;height:13px; margin-top:2px; flex:none; color:var(--warn)}

.tl{position:relative; margin-left:4px; padding-left:18px}
.tl::before{content:""; position:absolute; left:4px; top:6px; bottom:6px; width:1px; background:#242a31}
.vitem{position:relative; padding:0 0 16px}
.vitem:last-child{padding-bottom:2px}
.vitem::before{
  content:""; position:absolute; left:-18px; top:4px; width:9px;height:9px;border-radius:50%;
  background:#12161a; border:1.5px solid #39414a;
}
.vitem.cur::before{background:var(--accent); border-color:var(--accent); box-shadow:0 0 0 3px rgba(201,242,107,.12)}
.vhead{display:flex; align-items:baseline; gap:7px; flex-wrap:wrap}
.vhead .v{font:600 11.5px/1.3 var(--mono); color:var(--ink)}
.vhead .curtag{font:600 8.5px/1 var(--mono); letter-spacing:.08em; color:var(--accent); border:1px solid #2d3a1c; background:#141a0c; border-radius:3px; padding:2px 4px; text-transform:uppercase}
.vmeta{font:500 10.5px/1.5 var(--mono); color:var(--faint); margin-top:2px}
.vnote{font-size:11.5px; color:var(--muted); margin-top:3px; line-height:1.4}
.vitem .acts{display:flex; gap:6px; margin-top:6px; opacity:0; transition:opacity .12s}
.vitem:hover .acts,.vitem:focus-within .acts{opacity:1}

.taglist{display:flex; flex-wrap:wrap; gap:5px; align-items:center}
.tagadd{display:flex; gap:6px; margin-top:9px}
.tagadd .input{height:27px; font-size:11.5px}

/* toast + modal */
.toasts{position:fixed; right:22px; bottom:22px; z-index:120; display:flex; flex-direction:column; gap:8px; align-items:flex-end; pointer-events:none}
.toast{
  display:flex; align-items:center; gap:9px; padding:9px 13px; border-radius:9px;
  background:#171b1f; border:1px solid var(--line-3); color:var(--ink-2); font-size:12.5px;
  box-shadow:0 20px 40px -20px #000; animation:tin .16s ease-out; max-width:380px;
}
.toast svg{width:13px;height:13px; color:var(--accent); flex:none}
.toast.bad{border-color:#52302f; background:#1b1212}
.toast.bad svg{color:var(--bad)}
@keyframes tin{from{opacity:0; transform:translateY(6px)}}
.toast.out{opacity:0; transform:translateY(4px); transition:.2s}

.modal{
  position:fixed; inset:0; z-index:130; display:none; place-items:center; padding:20px;
  background:rgba(4,5,6,.62); backdrop-filter:blur(4px);
}
.modal.on{display:grid}
.sheet{
  width:420px; max-width:100%; background:#0e1114; border:1px solid var(--line-3); border-radius:12px;
  box-shadow:0 40px 90px -30px #000; overflow:hidden;
}
.sheet-h{padding:15px 16px 4px; font-size:14px; font-weight:600}
.sheet-b{padding:6px 16px 16px; color:var(--muted); font-size:12.5px; line-height:1.55}
.sheet-b .input,.sheet-b .select{margin-top:9px}
.sheet-f{padding:11px 16px; border-top:1px solid var(--line); display:flex; justify-content:flex-end; gap:8px; background:#0b0d0f}

.empty{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px;
  padding:54px 20px; text-align:center; color:var(--faint); border:1px dashed #242a31; border-radius:12px;
}
.empty svg{width:26px;height:26px; opacity:.55}
.empty b{color:var(--ink-2); font-size:13px; font-weight:600}
.empty span{font-size:12px; max-width:44ch}

/* key dialog / login link */
.toplink{display:flex; align-items:center; gap:6px; font:500 11px/1 var(--mono); color:var(--faint)}
.toplink:hover{color:var(--muted)}
.toplink svg{width:12px;height:12px}

/* ------------------------------------------------------------ responsive */

@media(max-width:1100px){
  .preset-row{grid-template-columns:repeat(3,minmax(0,1fr))}
  .keygrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .file-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:900px){
  :root{--side-w:64px}
  .side{padding:14px 10px; align-items:center}
  .side-head{padding:0 0 12px}
  .brand-tag,.ws-txt,.nav-sec,.nav-item span,.nav-count,.nav-new,.recent,.meter,.bar,.keychip .who,.keychip .lbl,.keychip svg{display:none}
  .ws{justify-content:center; padding:7px; width:100%}
  .nav{width:100%; align-items:center}
  .nav-item{justify-content:center; width:38px; height:36px; padding:0}
  .nav-item[aria-current="page"]::before{left:-10px}
  .side-foot{width:100%; display:grid; place-items:center}
  .keychip{width:36px; justify-content:center; padding:8px}
  .topbar{padding:0 16px}
  .page{padding:20px 16px 60px}
  .searchbtn{min-width:0; width:34px; padding:0; justify-content:center}
  .searchbtn span,.searchbtn kbd{display:none}
  .file-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .agent-grid{grid-template-columns:1fr}
  .qrow{grid-template-columns:22px minmax(0,1fr) 74px 80px 26px}
  .qrow .qmeta.size,.qrow .qmeta.folder{display:none}
  .qhead .c-size,.qhead .c-folder{display:none}
}
@media(max-width:700px){
  .page-head h1{font-size:20px}
  .preset-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .file-grid{grid-template-columns:1fr}
  .split{grid-template-columns:minmax(0,1fr)}
  .drawer{width:100%}
  .qrow{grid-template-columns:22px minmax(0,1fr) 84px 24px; padding:9px 10px}
  .qrow .qmeta{display:none}
  .qhead{display:none}
  .filters .search{width:100%}
  .head-stats{width:100%; gap:16px}
  .file-title h1{font-size:17px}
  .topbar .toplink{display:none}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}


/* ---------------------------------------------------- upload page bits */

.sec-head{display:flex; align-items:baseline; gap:12px; margin-bottom:11px; flex-wrap:wrap}
.sec-head h2{font-size:12.5px; font-weight:600; letter-spacing:.01em}
.sec-head p{font-size:11.5px; color:var(--faint); margin:0}
.sec-head .btn{margin-left:auto}

.intake-grid{display:grid; grid-template-columns:minmax(0,1fr) 318px; gap:16px; align-items:start}
@media(max-width:1180px){.intake-grid{grid-template-columns:minmax(0,1fr)}}
.rail{position:sticky; top:72px}
@media(max-width:1180px){.rail{position:static}}

.pane[hidden]{display:none}
.pastewrap{display:flex; flex-direction:column; gap:8px}
.pastebar{display:flex; gap:8px; align-items:center}
.pastebar .input{flex:1; height:34px}
.pasteinfo{font:500 10.5px/1.4 var(--mono); color:var(--faint)}
.pasteinfo b{color:var(--muted); font-weight:500}

.qhead{display:grid; grid-template-columns:20px minmax(0,1.55fr) 86px 72px 70px 120px 96px 26px; gap:10px; align-items:center; padding:0 14px; height:30px; background:#0b0d0f; border-bottom:1px solid var(--line); border-top:1px solid var(--line); font:600 9px/1 var(--mono); letter-spacing:.11em; text-transform:uppercase; color:var(--faint)}
.qrow{grid-template-columns:20px minmax(0,1.55fr) 86px 72px 70px 120px 96px 26px}
.qcheck{width:20px;height:20px;border-radius:5px;display:grid;place-items:center;color:#5b636d;background:#14181c;border:1px solid #232830}
.qcheck svg{width:11px;height:11px}
.qcheck.ok{color:var(--accent);background:#151b0d;border-color:#2c3818}
.qcheck.bad{color:var(--bad);background:#1a1111;border-color:#3a2323}
.qrow .qmeta .kind{height:18px;font-size:9px;padding:0 5px}
.qrow .qmeta .kind svg{width:10px;height:10px}
.qrow .qmeta.folder{overflow:hidden;text-overflow:ellipsis;font-size:10.5px;color:var(--faint)}
.qrow .qstatus{justify-self:start}
.qrow .rm{margin-left:auto}

.qempty{display:flex; align-items:center; gap:13px; padding:26px 18px; color:var(--faint)}
.qempty .glyph{width:34px;height:34px;border-radius:9px;background:#14181c;border:1px solid var(--line);display:grid;place-items:center;flex:none;color:#5b636d}
.qempty .glyph svg{width:16px;height:16px}
.qempty b{display:block;color:var(--ink-2);font-size:12.5px;font-weight:600;margin-bottom:2px}
.qempty span{font-size:11.5px;display:block;max-width:60ch}

.note-strip{display:flex; gap:10px; align-items:flex-start; padding:11px 13px; border:1px solid #1e2417; background:#0e110b; border-radius:10px; color:#a3ab9a; font-size:11.5px; line-height:1.5}
.note-strip svg{width:14px;height:14px;color:var(--accent-2);flex:none;margin-top:1px}
.note-strip b{color:#c9d3b8;font-weight:600}

.apply-top{display:flex; align-items:center; gap:10px}
.apply-name{font-size:13.5px;font-weight:600;letter-spacing:-.01em}
.apply-role{font:500 9px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.apply-desc{font-size:11.5px;color:var(--muted);line-height:1.5;margin-top:10px}
.apply-foot{display:flex;align-items:center;gap:8px;margin-top:12px;padding-top:10px;border-top:1px solid #1a1e23;font-size:11px;color:var(--faint)}
.apply-foot a{color:var(--accent-2)}
.apply-foot a:hover{color:var(--accent)}
.apply-foot .d{width:2px;height:2px;border-radius:50%;background:#3a4149}

.runline{display:flex;align-items:center;gap:7px;margin-top:9px;font:500 10.5px/1 var(--mono);color:var(--faint)}
.runline .d{width:2px;height:2px;border-radius:50%;background:#3a4149}
.mini-note{font-size:10.5px;color:var(--faint);line-height:1.5;margin-top:9px}
.mini-mock .card-b{padding:12px 14px;display:flex;flex-direction:column;gap:7px}
.mini-mock .card-b p{font-size:11px;color:var(--faint);line-height:1.5}
.mini-mock .card-b code{color:var(--muted);font-size:10.5px}
.mini-mock svg{width:13px;height:13px;color:var(--info)}
.mini-mock b{font-size:11.5px;font-weight:600;color:var(--ink-2)}
.mini-mock .chip{height:19px;font-size:9.5px}

@media(max-width:900px){
  .qhead{grid-template-columns:20px minmax(0,1fr) 86px 96px 26px}
  .qrow{grid-template-columns:20px minmax(0,1fr) 86px 96px 26px}
  .qhead .c-size,.qhead span:nth-child(4),.qhead span:nth-child(6){display:none}
  .qrow .qmeta.size,.qrow .qmeta.folder,.qrow .qmeta:nth-child(4){display:none}
}


/* --------------------------------------------------- library / empty state */

.empty-hero{
  display:grid; grid-template-columns:minmax(0,1.55fr) minmax(300px,.85fr);
  border:1px solid var(--line); border-radius:14px; overflow:hidden; background:var(--panel);
  position:relative;
}
.eh-main{
  padding:34px 36px 28px; position:relative;
  background:radial-gradient(90% 80% at 0% 0%, rgba(201,242,107,.055), transparent 55%), linear-gradient(180deg,#101317,#0d0f12);
}
.eh-main::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.35;
  background-image:linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size:32px 32px; mask-image:radial-gradient(80% 80% at 70% 20%, #000, transparent 75%);
}
.eh-main > *{position:relative; z-index:1}
.eh-kicker{display:flex;align-items:center;gap:7px;font:600 9.5px/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--accent-2)}
.eh-kicker .dot{width:5px;height:5px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px rgba(201,242,107,.10)}
.eh-main h2{font-size:25px;line-height:1.18;letter-spacing:-.025em;font-weight:600;margin:13px 0 0}
.eh-lead{color:var(--muted);font-size:12.5px;line-height:1.65;max-width:62ch;margin-top:9px}
.eh-actions{display:flex;gap:8px;margin-top:18px;flex-wrap:wrap}
.steps{list-style:none;margin:24px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;border-top:1px solid #1d2126;padding-top:18px}
.steps li{display:flex;gap:9px;min-width:0}
.steps li > b{font:600 9.5px/1.9 var(--mono);color:var(--accent-2);flex:none}
.steps li > div b{display:block;font-size:11.5px;font-weight:600;color:var(--ink-2);margin-bottom:3px}
.steps li > div span{display:block;font-size:11px;color:var(--faint);line-height:1.5}
.eh-sample{margin-top:20px;font-size:11px;color:var(--faint);display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.eh-sample a{color:var(--muted);text-decoration:underline;text-underline-offset:2px}
.eh-sample a:hover{color:var(--accent)}
.mocktag{font:600 8.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#7d8690;border:1px solid #2a3037;border-radius:3px;padding:2px 4px}
.eh-side{border-left:1px solid var(--line);padding:26px 24px;background:#0b0d0f;display:flex;flex-direction:column;gap:6px}
.eh-side-top{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.eh-side-k{font:600 9px/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--faint)}
.eh-side-top .eh-side-k{margin-right:auto}
.eh-big{display:flex;align-items:baseline;gap:9px;padding:8px 0;border-bottom:1px dashed #1a1e23}
.eh-big b{font:600 24px/1 var(--mono);letter-spacing:-.03em}
.eh-big span{font:500 10.5px/1.3 var(--mono);color:var(--faint)}
.eh-side p{font-size:11px;color:var(--faint);line-height:1.6;margin-top:9px}
.eh-link{display:flex;align-items:center;gap:5px;margin-top:9px;font-size:11.5px;color:var(--accent-2);width:fit-content}
.eh-link:hover{color:var(--accent)}
.eh-link svg{width:12px;height:12px}
.eh-sep{height:1px;background:#1a1e23;margin:16px 0 14px}
.eh-presets{display:flex;flex-direction:column;gap:2px;margin-top:2px}
.eh-preset{display:flex;align-items:center;gap:8px;padding:5px 6px;border-radius:6px;text-align:left;color:var(--muted);font-size:11.5px;width:100%}
.eh-preset:hover{background:#12161a;color:var(--ink-2)}
.eh-preset .pg{width:20px;height:20px;border-radius:5px}
.eh-preset .pg svg{width:11px;height:11px}
.eh-preset .d{width:2px;height:2px;border-radius:50%;background:#3a4149}
.eh-preset .mono{font-size:9.5px;color:var(--faint);margin-left:auto}
@media(max-width:1100px){
  .empty-hero{grid-template-columns:1fr}
  .eh-side{border-left:0;border-top:1px solid var(--line)}
  .steps{grid-template-columns:1fr}
}

/* keys tab */
.kpi-sub{font:500 10px/1.4 var(--mono);color:var(--faint);margin-top:5px}
.keybar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:16px 0 10px}
.keybar .select{width:auto}
.keymeta-line{display:flex;align-items:center;gap:8px;font:500 10.5px/1.4 var(--mono);color:var(--faint);margin-bottom:11px;flex-wrap:wrap}
.keymeta-line svg{width:12px;height:12px;color:#6f7681;flex:none}
.keymeta-line code{color:var(--muted)}
.keymeta-line .grow{flex:1}
.keytable td{height:40px}
.keytable tbody tr{cursor:pointer}
.keyname{display:flex;align-items:center;gap:8px;min-width:0}
.keyname .kmark{width:22px;height:22px;border-radius:5px;background:#141810;border:1px solid #262d1c;display:grid;place-items:center;color:#a8bf76;flex:none}
.keyname .kmark svg{width:11px;height:11px}
.keyname .nm{font:500 12px/1.3 var(--mono);color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.keytable .note{max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted)}
.scope{display:inline-flex;align-items:center;height:19px;padding:0 6px;border:1px solid #26303a;background:#111820;border-radius:4px;font:500 9.5px/1 var(--mono);color:#9db7d8;margin-right:4px}
.scope.gw{border-color:#2b2a3f;background:#151426;color:#b3a9e6}
.origin{display:inline-flex;align-items:center;height:17px;padding:0 5px;border-radius:3px;font:600 8.5px/1 var(--mono);letter-spacing:.07em;text-transform:uppercase}
.origin.lock{color:var(--accent-2);background:#151b0d;border:1px solid #2b3618}
.origin.gateway{color:#a9c6f5;background:#121a24;border:1px solid #243244}
.origin.legacy{color:#e0c08a;background:#1a150e;border:1px solid #342a18}
.tablefoot{display:flex;align-items:center;gap:8px;padding:10px 14px;border-top:1px solid var(--line);font:500 10px/1 var(--mono);color:var(--faint);background:#0b0d0f}
.tablefoot .d{width:2px;height:2px;border-radius:50%;background:#3a4149}

/* preset editor + danger card */
.editgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.editgrid .field > label{font-size:9px}
.sheet{width:480px}
.danger-card .card-b{padding:14px 16px}
.danger-card svg{width:13px;height:13px;color:var(--bad)}
.danger-card b{font-size:11.5px;color:#e7b3b3;font-weight:600}
.danger-card p{font-size:11px;color:var(--faint);line-height:1.55;margin:8px 0 11px}

/* file page additions */
.code.wrap pre{white-space:pre-wrap; word-break:break-word}
.code.wrap .ln{white-space:pre}
.sample-banner{
  display:flex;align-items:flex-start;gap:10px;padding:11px 13px;border:1px solid #2b3320;
  background:#11150c;border-radius:9px;margin-bottom:14px;font-size:11.5px;color:#aab39a;line-height:1.5;
}
.sample-banner svg{width:14px;height:14px;color:var(--accent-2);flex:none;margin-top:1px}
.sample-banner b{color:#d3dcc4;font-weight:600}
.sample-banner a{margin-left:auto;color:var(--accent-2);white-space:nowrap;font-size:11px}
.sample-banner a:hover{color:var(--accent)}
.file-title h1{overflow-wrap:anywhere}
.skeleton{height:180px;border-radius:8px;background:linear-gradient(90deg,#14171b,#1a1e23,#14171b);background-size:200% 100%;animation:shimmer 1.2s linear infinite}
@keyframes shimmer{to{background-position:-200% 0}}
@media(max-width:700px){.steps{grid-template-columns:1fr}.eh-main{padding:24px 20px}}


/* ------------------------------------------------ upload: entry + recent */

.entry-grid{display:grid; grid-template-columns:minmax(0,1.9fr) minmax(320px,1fr); gap:16px; align-items:start}
@media(max-width:1100px){.entry-grid{grid-template-columns:minmax(0,1fr)}}

.queue-head{gap:8px}
.queue-head h2{white-space:nowrap}
.queue-head .select.compact{
  width:auto; min-width:186px; height:28px; padding:0 26px 0 8px; font-size:11px;
  background-color:#0b0d0f; border-radius:6px; color:var(--muted);
}
.runstrip{
  display:flex; align-items:center; gap:8px; padding:7px 14px; min-height:33px;
  background:#0b0d0f; border-bottom:1px solid var(--line); font-size:10.5px; color:var(--faint);
  font-family:var(--mono); flex-wrap:wrap;
}
.rs-preset{display:inline-flex; align-items:center; gap:6px; color:var(--ink-2)}
.rs-preset i{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px rgba(201,242,107,.08)}
.rs-preset b{font-weight:500}
.rs-arrow{color:#3d444c}
.rs-meta{color:var(--faint)}
.runstrip .grow{flex:1}

.qhead,.qrow{grid-template-columns:20px minmax(0,1.6fr) 84px 70px 68px 96px 26px}
@media(max-width:900px){
  .qhead,.qrow{grid-template-columns:20px minmax(0,1fr) 80px 92px 26px}
  .qhead span:nth-child(4),.qhead span:nth-child(5){display:none}
  .qrow .qmeta:nth-child(4),.qrow .qmeta.size{display:none}
}

.recent-panel{position:sticky; top:72px; display:flex; flex-direction:column; overflow:hidden}
.recent-panel .card-h{padding-right:10px}
.recent-panel .card-h h2{font-size:12.5px}
.recent-panel .chip.n{height:19px;padding:0 6px;font:500 9.5px/1 var(--mono);color:var(--faint)}
.recent-all{margin-bottom:0;font-size:10.5px;color:var(--faint);gap:4px}
.recent-all:hover{color:var(--ink-2)}
.recent-expand{display:none}
.recent-body{display:flex; flex-direction:column; min-height:0; flex:1}
.recent-search{margin:10px 12px 8px}
.recent-search .input{height:30px;font-size:11.5px;background:#0a0c0e}
.recent-search svg{width:13px;height:13px}
#recentList{display:flex; flex-direction:column; padding:0 6px 4px}
.ritem{display:flex; align-items:center; gap:9px; padding:7px 7px; border-radius:7px; min-width:0}
.ritem:hover{background:#14181c}
.rikon{width:27px;height:27px;border-radius:6px;background:#14181c;border:1px solid #232830;display:grid;place-items:center;color:#8a919c;flex:none}
.rikon svg{width:13px;height:13px}
.rikon.text{color:#9fc4ff;border-color:#202b39;background:#101722}
.rikon.image{color:#8fe3b4;border-color:#1f3329;background:#0f1a15}
.rikon.pdf{color:#ffab87;border-color:#3a2620;background:#1a120f}
.rikon.archive{color:#c9a7f5;border-color:#2c2438;background:#151020}
.rikon.key{color:#e8cb8a;border-color:#33290f;background:#161208}
.rbody{min-width:0; flex:1; display:flex; flex-direction:column; gap:2px}
.rname{font:500 11.5px/1.35 var(--mono); color:var(--ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.rmeta{display:flex; align-items:center; gap:5px; font:500 9.5px/1.3 var(--mono); color:var(--faint); min-width:0; overflow:hidden; white-space:nowrap}
.rmeta i{width:2px;height:2px;border-radius:50%;background:#3a4149;flex:none}
.rchev{color:#3d444c; flex:none; display:grid; place-items:center}
.rchev svg{width:12px;height:12px}
.ritem:hover .rchev{color:var(--muted)}

.recent-empty{display:flex; flex-direction:column; align-items:flex-start; gap:5px; padding:14px 16px 18px; color:var(--faint)}
.recent-empty > svg{width:16px;height:16px;opacity:.7;margin-bottom:2px}
.recent-empty b{font-size:11.5px;color:var(--ink-2);font-weight:600}
.recent-empty span{font-size:11px;line-height:1.55;max-width:34ch}
.recent-empty code{font-size:10px;color:var(--muted)}
.recent-sample{margin:0 12px 12px; border-top:1px dashed #1d2228; padding-top:8px}
.rs-label{font:600 8.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#5f6671;padding:0 2px 5px}
.recent-sample .ritem{border:1px solid #1b2025;background:#0b0d0f;margin-top:2px;padding:7px}
.recent-sample .ritem:hover{border-color:#2a3037}
.recent-foot{display:flex;align-items:center;gap:8px;padding:8px 12px;border-top:1px solid var(--line);font:500 9.5px/1 var(--mono);color:var(--faint);background:#0b0d0f}
.recent-foot .grow{flex:1}
.recent-foot a{display:inline-flex;align-items:center;gap:4px;color:var(--muted)}
.recent-foot a:hover{color:var(--accent-2)}
.recent-foot svg{width:11px;height:11px}

.mock-note{display:flex; gap:9px; align-items:flex-start; padding:10px 12px; border:1px solid #1d2329; background:#0c0f12; border-radius:9px; font-size:10.5px; color:var(--faint); line-height:1.5}
.mock-note > svg{width:13px;height:13px;color:var(--info);flex:none;margin-top:1px}
.mock-note b{display:block;color:var(--ink-2);font-size:10.5px;font-weight:600;margin-bottom:1px}
.mock-note span{display:block}
.mock-note code{font-size:9.5px;color:var(--muted)}

@media(max-width:1100px){
  .recent-panel{position:static}
}
@media(max-width:700px){
  .recent-expand{display:grid}
  .recent-all{display:none}
  .recent-panel .recent-body{display:none}
  .recent-panel.open .recent-body{display:flex}
  .recent-panel .recent-foot{display:none}
  .recent-panel.open .recent-foot{display:flex}
  .recent-panel.open .card-h{border-bottom:0}
  .recent-search{margin-top:10px}
  .runstrip .rs-meta{display:none}
  .queue-head{flex-wrap:wrap}
  .queue-head .select.compact{order:5;width:100%;margin-top:2px}
}


/* polish */
.prev-tool .chip{color:var(--ink-2);border-color:var(--line-2);background:#14181d}
.keytable .iconbtn{opacity:0;transition:opacity .12s}
.keytable tr:hover .iconbtn,.keytable tr:focus-within .iconbtn{opacity:1}
.keytable .iconbtn:focus-visible{opacity:1}


/* version actions stay discoverable, not hover-only */
.vitem .acts{opacity:.55;transition:opacity .12s}
.vitem:hover .acts,.vitem:focus-within .acts{opacity:1}
.vitem .acts .btn{color:var(--muted)}
.vitem .acts .btn:hover{color:var(--accent);border-color:var(--accent-line)}
#starBtn[aria-pressed="true"]{color:var(--accent);border-color:var(--accent-line);background:var(--accent-soft)}
#starBtn[aria-pressed="true"] svg{fill:var(--accent);stroke:var(--accent)}


@media(max-width:700px){
  .tabs{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none}
  .tabs::-webkit-scrollbar{display:none}
  .tabs .grow{display:none}
  .tab{flex:none; padding:0 9px; gap:6px}
  .preset .pdesc{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .preset{min-height:150px}
}
@media(max-width:560px){
  .crumb{display:none}
}


/* full preview modal */
.sheet.wide{width:min(1080px,92vw)}
.sheet.wide .sheet-b{padding:0 16px 16px}
.viewer{max-height:70vh;overflow:auto;border:1px solid var(--line);border-radius:8px;background:#08090b}
.viewer pre{margin:0;padding:18px;font:12px/1.7 var(--mono);color:#c3c8d0;white-space:pre-wrap;word-break:break-word}
.viewer.image{display:grid;place-items:center;padding:14px;background:#0b0d10}
.viewer.image img{max-width:100%;max-height:66vh;border-radius:4px}


.qrow:focus-within .rm,.qrow .rm:focus-visible{opacity:1}


/* mobile queue: no clipped header, controls in a predictable order */
@media(max-width:700px){
  .queue-head{gap:6px}
  .queue-head .grow{display:none}
  .queue-head #modeSelect{order:5; width:100%; margin-top:4px; min-width:0}
  .queue-head #startUpload{order:6; flex:1; margin-top:2px}
  .queue-head #clearQueue{order:7; margin-top:2px}
  .qhead{display:none}
  .qrow{grid-template-columns:20px minmax(0,1fr) 84px 24px; gap:8px}
  .qrow .qmeta{display:none}
}


.toast{pointer-events:auto}