/* ============================================================
   ACCE Archive - GSTU · design system
   Type: Tenorite where installed (Microsoft 365 font, not licensed for
   web embedding), then Figtree, its closest open counterpart.
   Colours start from the department crest's navy (#01253e).
   ============================================================ */
@font-face{
  font-family:"Tenorite";
  src:local("Tenorite"), local("Tenorite Regular"), local("Tenorite-Regular");
  font-weight:400; font-display:swap;
}
@font-face{
  font-family:"Tenorite";
  src:local("Tenorite Bold"), local("Tenorite-Bold");
  font-weight:700; font-display:swap;
}

:root{
  color-scheme:light;
  --font:"Tenorite","Figtree","Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"Cascadia Code","SF Mono",Consolas,monospace;

  --navy:#01253e;
  --navy-2:#0c3a62;
  --primary:#1f57e7;
  --primary-2:#0a9fc0;
  --accent:#0b9488;
  --emerald:#059669;
  --violet:#7045e6;
  --warm:#d97706;
  --orange:#ea580c;
  --rose:#db2777;
  --danger:#dc2626;
  --ok:#059669;
  --on-primary:#ffffff;

  --bg:#f3f6fb;
  --bg-2:#e7eefa;
  --surface:#ffffff;
  --surface-2:#f5f7fc;
  --surface-3:#ebf0f8;
  --text:#0a1630;
  --text-2:#28344f;
  --muted:#5c6885;
  --edge:rgba(12,32,72,.09);
  --edge-2:rgba(12,32,72,.17);

  --grad:linear-gradient(115deg,#1f57e7 0%,#0a9fc0 55%,#10b981 100%);
  --grad-text:linear-gradient(100deg,#1f57e7 0%,#0a9fc0 45%,#0f9f6e 100%);
  --grad-btn:linear-gradient(180deg,#3a6df0,#1f57e7);
  --shadow-sm:0 1px 2px rgba(10,22,48,.06),0 3px 10px -2px rgba(10,22,48,.06);
  --shadow:0 2px 6px rgba(10,22,48,.05),0 18px 44px -14px rgba(10,22,48,.2);
  --shadow-lg:0 40px 90px -24px rgba(10,22,48,.32);
  --ring:0 0 0 4px color-mix(in srgb,var(--primary) 18%,transparent);
  --head-bg:rgba(255,255,255,.96);
  --glass-bg:rgba(255,255,255,.62);
  --glass-edge:rgba(255,255,255,.75);

  /* names used across older components */
  --glass:var(--surface);
  --glass-2:var(--surface-2);
  --glass-3:var(--surface-3);

  --r:8px; --r-sm:6px; --r-lg:10px; --r-xl:14px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --head-h:68px;
  --page:1240px;
}

:root[data-theme="dark"]{
  color-scheme:dark;
  --primary:#6f95ff;
  --primary-2:#3cc8e6;
  --accent:#2dd4bf;
  --emerald:#34d399;
  --violet:#a78bfa;
  --warm:#fbbf24;
  --orange:#fb923c;
  --rose:#f472b6;
  --danger:#f87171;
  --ok:#34d399;
  --on-primary:#050d22;

  --bg:#050a16;
  --bg-2:#0a1631;
  --surface:#0c1427;
  --surface-2:#111b32;
  --surface-3:#17233e;
  --text:#e9eef8;
  --text-2:#c7d0e3;
  --muted:#8f9cb7;
  --edge:rgba(255,255,255,.08);
  --edge-2:rgba(255,255,255,.15);

  --grad:linear-gradient(115deg,#6f95ff 0%,#3cc8e6 55%,#34d399 100%);
  --grad-text:linear-gradient(100deg,#8aa8ff 0%,#4fd3ec 45%,#4ade9c 100%);
  --grad-btn:linear-gradient(180deg,#89a8ff,#6f95ff);
  --shadow-sm:0 1px 2px rgba(0,0,0,.35),0 3px 10px -2px rgba(0,0,0,.3);
  --shadow:0 2px 6px rgba(0,0,0,.3),0 22px 50px -16px rgba(0,0,0,.6);
  --shadow-lg:0 40px 100px -24px rgba(0,0,0,.75);
  --head-bg:rgba(7,13,27,.96);
  --glass-bg:rgba(255,255,255,.045);
  --glass-edge:rgba(255,255,255,.09);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-padding-top:calc(var(--head-h) + 16px); background:var(--bg)}
body{
  margin:0; min-height:100dvh; font-family:var(--font); font-size:16px; color:var(--text); line-height:1.55;
  font-synthesis-weight:none; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%}
h1,h2,h3,h4{letter-spacing:-.022em; line-height:1.18; color:var(--text)}
a{color:inherit}
hr{border:0; border-top:1px solid var(--edge); margin:20px 0}
[hidden]{display:none !important}
::selection{background:color-mix(in srgb,var(--primary) 26%,transparent)}

/* ---------- background ---------- */
.bg{position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none}
/* colour fields painted once as gradients: no blur filters or animation, so scrolling stays cheap */
.bg{contain:strict; transform:translateZ(0)}
.aurora{position:absolute; inset:0;
  background:
    radial-gradient(45vmax 40vmax at 0% 0%,rgba(140,170,255,.42),transparent 70%),
    radial-gradient(40vmax 34vmax at 100% 0%,rgba(140,225,240,.42),transparent 70%),
    radial-gradient(36vmax 30vmax at 55% 60%,rgba(200,185,255,.22),transparent 70%),
    radial-gradient(34vmax 30vmax at 100% 100%,rgba(150,235,200,.3),transparent 70%)}
.aurora i{display:none}
:root[data-theme="dark"] .aurora{
  background:
    radial-gradient(45vmax 40vmax at 0% 0%,rgba(37,70,184,.38),transparent 70%),
    radial-gradient(40vmax 34vmax at 100% 0%,rgba(13,111,138,.34),transparent 70%),
    radial-gradient(36vmax 30vmax at 55% 60%,rgba(75,47,160,.16),transparent 70%),
    radial-gradient(34vmax 30vmax at 100% 100%,rgba(13,122,85,.2),transparent 70%)}
.bg-lattice{position:absolute; inset:0; width:100%; height:100%; color:var(--navy); opacity:.07;
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 30%,transparent 75%); mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 30%,transparent 75%)}
:root[data-theme="dark"] .bg-lattice{color:#9fb6ff; opacity:.07}

.glass{background:var(--glass-bg); border:1px solid var(--glass-edge); box-shadow:var(--shadow-sm)}

/* ---------- icons ---------- */
.ic{width:1.15em; height:1.15em; flex:none; fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; vertical-align:-.2em}
.rot-90{transform:rotate(90deg)} .rot-270{transform:rotate(-90deg)}

/* ---------- crest (the department logo, always on a light disc so the navy reads) ---------- */
.crest{display:inline-grid; place-items:center; flex:none; width:44px; height:44px; border-radius:50%; background:#fff;
  box-shadow:0 0 0 1px rgba(1,37,62,.12),0 4px 12px -4px rgba(1,37,62,.35)}
.crest img{width:88%; height:88%; object-fit:contain; display:block}
.crest-lg{width:96px; height:96px}

/* ---------- boot ---------- */
.boot{position:fixed; inset:0; display:grid; place-content:center; justify-items:center; gap:16px; color:var(--muted); font-size:.92rem}
.boot .crest{width:92px; height:92px; animation:pulse 1.6s var(--ease) infinite}
@keyframes pulse{50%{transform:scale(1.04); box-shadow:0 0 0 14px color-mix(in srgb,var(--primary) 10%,transparent),0 4px 12px -4px rgba(1,37,62,.35)}}

/* ---------- utilities ---------- */
.muted{color:var(--muted)}
.small{font-size:.84rem}
.fine{font-size:.78rem; color:var(--muted); line-height:1.5; margin:6px 0 0}
.mono{font-family:var(--mono); letter-spacing:0}
.danger{color:var(--danger)}
.ellipsis{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0}
.pre{white-space:pre-wrap}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.skip{position:absolute; left:12px; top:-60px; z-index:100; padding:10px 14px; border-radius:var(--r-sm); background:var(--primary); color:var(--on-primary); font-weight:600}
.skip:focus{top:12px}
.stack{display:flex; flex-direction:column; gap:14px}
.stack > p{margin:0}
.row-between{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap}
.row-end{display:flex; justify-content:flex-end; gap:10px; flex-wrap:wrap}
.row-center{display:flex; justify-content:center; gap:10px; flex-wrap:wrap}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.grid-2.gap{gap:18px; margin-top:18px}
.eyebrow{display:inline-flex; align-items:center; gap:8px; font-size:.74rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--primary)}
.eyebrow-pill{padding:6px 12px 6px 8px; border-radius:var(--r-sm); letter-spacing:.06em; text-transform:none; font-size:.8rem; font-weight:600;
  color:var(--text-2); background:var(--surface); border:1px solid var(--edge); box-shadow:var(--shadow-sm)}
.eyebrow-pill b{display:inline-grid; place-items:center; padding:2px 8px; border-radius:var(--r-sm); font-size:.7rem; letter-spacing:.04em; color:var(--on-primary); background:var(--grad)}
.spinner{display:inline-block; width:18px; height:18px; border-radius:50%; border:2px solid var(--edge-2); border-top-color:var(--primary); animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.rise{animation:riseIn .5s var(--ease) both}
@keyframes riseIn{from{opacity:0; transform:translateY(14px) scale(.985)}}
.shake{animation:shake .35s}
@keyframes shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
kbd{font-family:var(--mono); font-size:.7rem; padding:2px 6px; border-radius:var(--r-sm); border:1px solid var(--edge-2); background:var(--surface-2); color:var(--muted)}
mark{background:color-mix(in srgb,var(--warm) 28%,transparent); color:inherit; border-radius:var(--r-sm); padding:0 1px}

/* ---------- controls ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 16px;
  font:inherit; font-size:.92rem; font-weight:600; line-height:1.2; text-decoration:none; white-space:nowrap;
  color:var(--text); background:var(--surface); border:1px solid var(--edge-2); border-radius:var(--r-sm);
  cursor:pointer; box-shadow:var(--shadow-sm);
  transition:transform .12s var(--ease), filter .15s, background .15s, border-color .15s, box-shadow .2s, color .15s;
}
.btn:hover{border-color:color-mix(in srgb,var(--primary) 45%,var(--edge-2)); color:var(--primary)}
.btn:active{transform:translateY(1px) scale(.99)}
.btn:disabled{opacity:.55; cursor:not-allowed; transform:none}
.btn-primary{color:var(--on-primary); background:var(--grad-btn); border-color:transparent;
  box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 8px 20px -8px color-mix(in srgb,var(--primary) 70%,transparent)}
.btn-primary:hover{color:var(--on-primary); filter:brightness(1.06); border-color:transparent; box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 12px 26px -8px color-mix(in srgb,var(--primary) 80%,transparent); transform:translateY(-1px)}
.btn-ghost{background:transparent; box-shadow:none}
.btn-quiet{background:transparent; border-color:transparent; color:var(--muted); box-shadow:none}
.btn-quiet:hover{color:var(--text); background:var(--surface-2); border-color:transparent}
.btn-quiet.danger:hover{color:var(--danger)}
.btn-danger{color:var(--danger); background:color-mix(in srgb,var(--danger) 8%,transparent); border-color:color-mix(in srgb,var(--danger) 35%,transparent); box-shadow:none}
.btn-danger:hover{color:var(--danger); background:color-mix(in srgb,var(--danger) 14%,transparent); border-color:var(--danger)}
.btn-sm{padding:7px 12px; font-size:.84rem}
.btn-lg{padding:13px 22px; font-size:1rem; border-radius:var(--r-sm)}
.btn-block{width:100%}
.btn-google{width:100%; padding:12px 16px; font-size:.96rem; background:#fff; color:#1f1f1f; border-color:rgba(0,0,0,.12)}
.btn-google:hover{background:#f7f8fa; color:#1f1f1f; border-color:rgba(0,0,0,.2)}
.icon-btn{
  display:inline-grid; place-items:center; width:40px; height:40px; border-radius:var(--r-sm); font-size:1rem; cursor:pointer; flex:none;
  color:var(--text-2); background:transparent; border:1px solid transparent; text-decoration:none; transition:background .15s, border-color .15s, color .15s, transform .12s;
}
.icon-btn:hover{color:var(--primary); background:var(--surface-2); border-color:var(--edge)}
.icon-btn:active{transform:scale(.95)}
.icon-btn.sm{width:32px; height:32px; border-radius:var(--r-sm); color:var(--muted)}
.icon-btn.sm:hover{color:var(--text)}
.link{color:var(--primary); text-decoration:none; font-weight:600; font-size:.9rem; display:inline-flex; align-items:center; gap:4px}
.link:hover{text-decoration:underline; text-underline-offset:3px}
.link-btn{font:inherit; font-size:.86rem; color:var(--primary); background:none; border:0; padding:0; cursor:pointer; text-align:left}
.link-btn:hover{text-decoration:underline; text-underline-offset:3px}

label,.label{display:block; font-size:.82rem; font-weight:600; color:var(--text-2); margin:0 0 6px}
legend.label{padding:0}
.field{min-width:0; border:0; margin:0; padding:0}
.input{
  width:100%; padding:11px 13px; font:inherit; font-size:.95rem; color:var(--text);
  background:var(--surface); border:1px solid var(--edge-2); border-radius:var(--r-sm); outline:none;
  transition:border-color .15s, box-shadow .15s, background .15s;
}
.input-sm{padding:8px 11px; font-size:.86rem}
textarea.input{resize:vertical; min-height:72px; line-height:1.5}
select.input{appearance:none; padding-right:34px;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 18px) 50%, calc(100% - 12px) 50%; background-size:6px 6px; background-repeat:no-repeat}
select option{background:var(--surface); color:var(--text)}
.input::placeholder{color:var(--muted); opacity:.7}
.input:hover{border-color:color-mix(in srgb,var(--primary) 30%,var(--edge-2))}
.input:focus{border-color:var(--primary); box-shadow:var(--ring)}
.input:disabled{opacity:.6}
.input[aria-invalid="true"]{border-color:var(--danger)}
input.mono{text-transform:uppercase; letter-spacing:.06em; font-weight:600}
input.mono::placeholder{text-transform:none; letter-spacing:0; font-weight:400}
.check{display:flex; align-items:flex-start; gap:10px; font-size:.9rem; font-weight:400; color:var(--text); cursor:pointer; margin:0}
.check input,.radio input{width:18px; height:18px; margin:2px 0 0; accent-color:var(--primary); flex:none}
.radio-list{display:grid; gap:8px}
.radio{display:flex; gap:10px; align-items:center; padding:10px 12px; border-radius:var(--r-sm); border:1px solid var(--edge-2); background:var(--surface); cursor:pointer; color:var(--text); font-size:.9rem; font-weight:500; margin:0; transition:border-color .15s, background .15s}
.radio:hover{border-color:color-mix(in srgb,var(--primary) 35%,var(--edge-2))}
.radio:has(input:checked){border-color:var(--primary); background:color-mix(in srgb,var(--primary) 7%,var(--surface))}
.form-error{margin:0; padding:10px 12px; border-radius:var(--r-sm); font-size:.86rem; color:var(--danger); background:color-mix(in srgb,var(--danger) 8%,transparent); border:1px solid color-mix(in srgb,var(--danger) 28%,transparent)}
.form-ok{margin:0; padding:10px 12px; border-radius:var(--r-sm); font-size:.86rem; color:var(--ok); background:color-mix(in srgb,var(--ok) 8%,transparent); border:1px solid color-mix(in srgb,var(--ok) 28%,transparent)}

.chip-row{display:flex; flex-wrap:wrap; gap:8px}
.chip{
  display:inline-flex; align-items:center; gap:7px; padding:7px 14px; font:inherit; font-size:.84rem; font-weight:500;
  color:var(--text-2); background:var(--surface); border:1px solid var(--edge-2); border-radius:var(--r-sm); cursor:pointer; text-decoration:none;
  transition:border-color .15s, background .15s, color .15s, transform .15s var(--ease);
}
.chip:hover{border-color:color-mix(in srgb,var(--primary) 45%,var(--edge-2)); color:var(--primary)}
.chip[aria-checked="true"],.chip[aria-pressed="true"]{border-color:var(--primary); background:color-mix(in srgb,var(--primary) 10%,var(--surface)); color:var(--primary); font-weight:600}
.chip.static{cursor:default}
.chip b{font-weight:700; color:var(--muted)}
.pill{display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:999px; font-size:.75rem; font-weight:600; white-space:nowrap;
  background:var(--surface-2); border:1px solid var(--edge); color:var(--muted)}
.pill .ic{width:.95em; height:.95em}
.pill-ok{color:var(--ok); background:color-mix(in srgb,var(--ok) 10%,transparent); border-color:color-mix(in srgb,var(--ok) 30%,transparent)}
.pill-warn{color:var(--warm); background:color-mix(in srgb,var(--warm) 11%,transparent); border-color:color-mix(in srgb,var(--warm) 32%,transparent)}
.pill-bad{color:var(--danger); background:color-mix(in srgb,var(--danger) 10%,transparent); border-color:color-mix(in srgb,var(--danger) 30%,transparent)}
.pill-info{color:var(--primary); background:color-mix(in srgb,var(--primary) 10%,transparent); border-color:color-mix(in srgb,var(--primary) 28%,transparent)}
.pill-quiet{color:var(--muted)}
.tag{display:inline-block; margin:0 6px 6px 0; padding:2px 9px; border-radius:999px; font-size:.76rem; text-decoration:none; background:var(--surface-2); border:1px solid var(--edge)}
.tag:hover{border-color:var(--primary); color:var(--primary)}

/* ---------- entry screen (student details; Google for contributors and staff) ---------- */
.gate{position:fixed; inset:0; z-index:50; overflow:auto; display:grid; place-items:center; padding:24px}
.gate-split{width:min(1060px,100%); display:grid; grid-template-columns:1.05fr 1fr; border-radius:var(--r-lg); overflow:hidden;
  background:var(--surface); border:1px solid var(--edge); box-shadow:var(--shadow-lg)}
.gate-panel{position:relative; isolation:isolate; overflow:hidden; display:flex; flex-direction:column; gap:22px; padding:44px 42px; color:#eaf1ff;
  background:linear-gradient(160deg,#06305c,#021c36)}
.gate-panel::before{content:""; position:absolute; inset:0; z-index:-1; opacity:.12;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97'%3E%3Cpath d='M28 0 56 16v32L28 64 0 48V16zM28 64l28 16v32M28 64 0 80v32' fill='none' stroke='%23fff' stroke-width='1'/%3E%3C/svg%3E")}
.gate-panel .crest{width:112px; height:112px; box-shadow:0 0 0 6px rgba(255,255,255,.12),0 20px 50px -12px rgba(0,0,0,.6)}
.gate-panel h1{margin:0; color:#fff; font-size:clamp(1.9rem,3.4vw,2.6rem); font-weight:800; letter-spacing:-.03em}
.gate-panel h1 span{display:block; font-size:.5em; font-weight:600; letter-spacing:.02em; color:#a9c4ff; margin-top:8px}
.gate-panel p{margin:0; color:#c3d3f2; line-height:1.6}
.gate-points{list-style:none; margin:auto 0 0; padding:0; display:grid; gap:12px}
.gate-points li{display:flex; align-items:center; gap:12px; font-size:.92rem; color:#e3ecff}
.gate-points .ic{flex:none; width:34px; height:34px; padding:8px; border-radius:var(--r-sm); color:#8fe6ff; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12)}
.gate-form{display:flex; flex-direction:column; justify-content:center; padding:44px 42px; gap:6px}
.gate-form h2{margin:0 0 4px; font-size:1.55rem; font-weight:800}
.gate-sub{margin:0 0 18px; color:var(--muted); font-size:.94rem; line-height:1.55}
.gate-form .form-error{margin-bottom:4px}
.gate-alt{display:flex; flex-direction:column; gap:10px; margin-top:22px; padding-top:20px; border-top:1px solid var(--edge)}
.gate-or{font-size:.84rem; color:var(--muted)}
.gate-alt .form-error{width:100%}
.gate-card{width:min(460px,100%); border-radius:var(--r-lg); padding:34px 30px 26px; background:var(--surface); border:1px solid var(--edge); box-shadow:var(--shadow-lg)}
.gate-card h1{margin:4px 0 6px; font-size:1.6rem; font-weight:800}
.gate-card .link-btn{display:block; margin:14px auto 0; color:var(--muted); font-size:.82rem}
.student-fields{display:grid; grid-template-columns:1fr 1fr; gap:12px}
#p-sid{text-transform:uppercase}

/* ---------- shell ---------- */
.app{display:flex; flex-direction:column; min-height:100dvh}
.site-head{
  position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:14px; min-height:var(--head-h);
  padding:10px max(16px,calc((100vw - var(--page)) / 2 + 16px)); background:var(--head-bg); border-bottom:1px solid var(--edge);
}
.brand{display:flex; align-items:center; gap:12px; min-width:0; text-decoration:none; flex:none}
.brand-text{display:flex; flex-direction:column; min-width:0; line-height:1.2}
.brand-text strong{font-size:1.08rem; font-weight:800; letter-spacing:-.02em}
.brand-text strong em{font-style:normal; background:var(--grad-text); -webkit-background-clip:text; background-clip:text; color:transparent}
.brand-text span{font-size:.74rem; color:var(--muted); white-space:nowrap}
.main-nav{display:flex; gap:2px; margin-left:18px}
.nav-link{
  display:flex; align-items:center; gap:7px; padding:8px 12px; border-radius:var(--r-sm); white-space:nowrap;
  font-size:.9rem; font-weight:500; color:var(--text-2); text-decoration:none; transition:color .15s, background .15s;
}
.nav-link .ic{opacity:.75}
.nav-link:hover{color:var(--text); background:var(--surface-2)}
.nav-link.active{color:var(--primary); background:color-mix(in srgb,var(--primary) 10%,transparent); font-weight:600}
.nav-link.active .ic{opacity:1}
.badge-dot{min-width:18px; height:18px; padding:0 5px; border-radius:999px; display:inline-grid; place-items:center; font-size:.66rem; font-weight:700; color:#1b1300; background:var(--warm)}
.head-tools{display:flex; align-items:center; gap:6px; flex:none; margin-left:auto}
.search-trigger{
  display:flex; align-items:center; gap:10px; flex:0 1 230px; min-width:0; padding:8px 10px 8px 12px;
  font:inherit; font-size:.88rem; color:var(--muted); background:var(--surface); border:1px solid var(--edge-2); border-radius:var(--r-sm); cursor:text;
  transition:border-color .15s, box-shadow .15s;
}
.search-trigger:hover{border-color:color-mix(in srgb,var(--primary) 40%,var(--edge-2)); box-shadow:var(--shadow-sm)}
.search-trigger span{flex:1; text-align:left}
.head-signin{padding:8px 14px}
.head-dash{padding:8px 13px}
.account{position:relative; display:flex; align-items:center; gap:6px}
.avatar{width:40px; height:40px; padding:0; border-radius:50%; overflow:hidden; cursor:pointer; border:2px solid var(--surface); box-shadow:0 0 0 1px var(--edge-2); background:var(--grad); display:grid; place-items:center}
.avatar img{width:100%; height:100%; object-fit:cover}
.avatar-txt{font-size:.78rem; font-weight:700; color:#fff}
.menu{position:absolute; right:0; top:calc(100% + 10px); z-index:30; width:270px; padding:6px; border-radius:var(--r-lg); box-shadow:var(--shadow); background:var(--surface); border:1px solid var(--edge); animation:riseIn .18s var(--ease)}
.menu-head{display:flex; flex-direction:column; gap:2px; padding:10px 10px 12px; border-bottom:1px solid var(--edge); margin-bottom:4px}
.menu-head span{font-size:.8rem; color:var(--muted); overflow:hidden; text-overflow:ellipsis}
.menu-head .pill{align-self:flex-start; margin-top:6px}
.menu a,.menu button{display:flex; align-items:center; gap:10px; width:100%; padding:9px 10px; border-radius:var(--r-lg); font:inherit; font-size:.9rem; color:var(--text); text-decoration:none; background:none; border:0; cursor:pointer; text-align:left}
.menu a:hover,.menu button:hover{background:var(--surface-2); color:var(--primary)}
.menu hr{margin:4px 0}
.announce{display:flex; align-items:center; justify-content:center; gap:10px; padding:9px 16px; font-size:.88rem; text-align:center; color:#fff; background:var(--grad)}
main{flex:1; width:100%; max-width:var(--page); margin:0 auto; padding:clamp(22px,4vw,44px) 16px 64px; outline:none}
.page{animation:riseIn .35s var(--ease) both}
.narrow{max-width:780px; margin:0 auto}
.center-page{display:grid; place-items:center; min-height:50vh}
.page-head{margin-bottom:24px}
.page-head h1{margin:6px 0 8px; font-size:clamp(1.7rem,3.2vw,2.3rem); font-weight:800}
.page-head p{margin:0; max-width:72ch}
.card{border-radius:var(--r-lg); padding:22px}
.card h2{display:flex; align-items:center; gap:10px; margin:0 0 14px; font-size:1.1rem; font-weight:700}
.card h2 .ic{color:var(--primary)}
.card.inset{padding:14px; background:var(--surface-2); border:1px solid var(--edge); box-shadow:none}
.card.inset h4{margin:0 0 8px; font-size:.84rem; color:var(--muted); font-weight:600}
.guard{text-align:center; max-width:460px; padding:36px 30px}
.guard h2{justify-content:center; font-size:1.35rem; margin:14px 0 6px}
.guard .btn{margin-top:12px}

::view-transition-old(root),::view-transition-new(root){animation-duration:.22s}

/* ---------- sign-in page ---------- */
.signin{display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:stretch}
.signin > *{min-width:0}
.signin-card{display:flex; flex-direction:column; gap:14px; padding:28px}
.signin-card h2{margin:0; font-size:1.3rem}
.signin-card .btn-google{margin-top:auto}
.signin-perks{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.signin-perks li{display:flex; gap:10px; align-items:flex-start; font-size:.92rem; color:var(--text-2)}
.signin-perks .ic{flex:none; margin-top:2px; color:var(--emerald)}
.signin-who{display:flex; align-items:center; gap:12px; padding:12px; border-radius:var(--r-sm); background:var(--surface-2); border:1px solid var(--edge)}
.signin-who img,.signin-who .avatar-txt{width:40px; height:40px; border-radius:50%; display:grid; place-items:center; background:var(--grad); flex:none}
.signin-who div{display:flex; flex-direction:column; min-width:0}
.signin-who span{font-size:.82rem; color:var(--muted); overflow:hidden; text-overflow:ellipsis}
.signin-staff{background:linear-gradient(160deg,color-mix(in srgb,var(--primary) 7%,var(--surface)),var(--surface))}
.step-list{list-style:none; counter-reset:s; margin:0; padding:0; display:grid; gap:10px}
.step-list li{counter-increment:s; display:flex; gap:10px; align-items:flex-start; font-size:.9rem; color:var(--text-2)}
.step-list li::before{content:counter(s); flex:none; display:grid; place-items:center; width:24px; height:24px; border-radius:50%; font-size:.76rem; font-weight:700; color:var(--primary); background:color-mix(in srgb,var(--primary) 12%,transparent)}

/* ---------- home ---------- */
.hero{display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,.9fr); gap:clamp(24px,5vw,64px); align-items:center; padding:clamp(4px,2vw,20px) 0 30px}
.hero-title{margin:16px 0 14px; font-size:clamp(2.3rem,5.6vw,4rem); font-weight:800; letter-spacing:-.04em; line-height:1.02}
.hero-title em{font-style:normal; background:var(--grad-text); -webkit-background-clip:text; background-clip:text; color:transparent}
.hero-sub{margin:0 0 26px; max-width:58ch; color:var(--muted); font-size:1.08rem; line-height:1.6}
.hero-search{display:flex; align-items:center; gap:10px; padding:7px 7px 7px 18px; border-radius:var(--r-sm); background:var(--surface); border:1px solid var(--edge-2); box-shadow:var(--shadow); transition:border-color .2s, box-shadow .2s}
.hero-search:focus-within{border-color:var(--primary); box-shadow:var(--ring), var(--shadow)}
.hero-search > .ic{width:1.3em; height:1.3em; color:var(--muted)}
.hero-input{flex:1; min-width:0; padding:11px 4px; font:inherit; font-size:1.06rem; color:var(--text); background:none; border:0; outline:none}
.hero-input::placeholder{color:var(--muted); opacity:.8}
.hero-search .btn{padding:12px 22px; border-radius:var(--r-sm)}
.hero-chips{margin:16px 0 0}
.chip-link{font-size:.82rem}
.hero-art{position:relative; display:grid; place-items:center; aspect-ratio:1; max-width:400px; width:100%; justify-self:center}
.hero-art::before{content:none}
.hero-art::after{content:""; position:absolute; inset:5%; border-radius:50%; border:1px dashed color-mix(in srgb,var(--primary) 35%,transparent)}
.hero-art .crest{position:relative; width:82%; height:82%; box-shadow:0 0 0 10px color-mix(in srgb,var(--surface) 70%,transparent),0 30px 70px -20px rgba(1,37,62,.55)}
.hero-art .crest img{width:92%; height:92%}
.orbit{position:absolute; z-index:1; display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:var(--r-sm); font-size:.8rem; font-weight:600;
  background:var(--surface); border:1px solid var(--edge); box-shadow:var(--shadow); color:var(--text-2)}
.orbit .ic{color:var(--c,var(--primary))}
.orbit-1{top:10%; left:-4%; --c:var(--warm)}
.orbit-2{bottom:16%; right:-6%; --c:var(--emerald); animation-delay:-3s}
.orbit-3{bottom:2%; left:8%; --c:var(--violet); animation-delay:-1.5s}
@keyframes floaty{50%{transform:translateY(-8px)}}
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin:6px 0 40px}
.stat{display:flex; flex-direction:column; gap:2px; padding:16px 18px; border-radius:var(--r-lg); background:var(--glass-bg); border:1px solid var(--glass-edge); box-shadow:var(--shadow-sm)}
.stat strong{font-size:1.6rem; font-weight:800; letter-spacing:-.03em; background:var(--grad-text); -webkit-background-clip:text; background-clip:text; color:transparent}
.stat span{font-size:.84rem; color:var(--muted)}
.stat-loading{grid-column:1/-1; flex-direction:row; align-items:center; gap:10px; color:var(--muted); font-size:.9rem}
.section-head{display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin:8px 0 16px}
.section-head h2{margin:0; font-size:1.35rem; font-weight:800; display:flex; align-items:center; gap:10px}
.section-head.tight{margin:0 0 10px}
.section-head.tight h2{font-size:1.1rem; font-weight:700}
.shelf{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.program-box{
  --c:var(--primary);
  position:relative; overflow:hidden; display:flex; flex-direction:column; text-decoration:none; color:var(--text);
  padding:22px 20px 18px; border-radius:var(--r-sm); background:var(--glass-bg); border:1px solid var(--glass-edge); box-shadow:var(--shadow-sm);
  transition:border-color .2s, transform .25s var(--ease), box-shadow .25s;
}
.program-box[data-key="msc"]{--c:var(--violet)}
.program-box[data-key="qbank"]{--c:var(--warm)}
.program-box[data-key="misc"]{--c:var(--emerald)}
.program-box > *{position:relative}
.program-box:hover,.program-box:focus-visible{border-color:color-mix(in srgb,var(--c) 45%,transparent); transform:translateY(-4px); box-shadow:var(--shadow)}
.pb-top{display:flex; justify-content:space-between; align-items:center; margin-bottom:18px}
.pb-glyph{display:grid; place-items:center; width:50px; height:50px; border-radius:var(--r-sm); color:#fff; background:var(--c);
  }
.pb-glyph .ic{width:24px; height:24px; stroke-width:1.7}
.pb-count{font-size:.78rem; font-weight:600; color:var(--muted); padding:3px 10px; border-radius:var(--r-sm); background:var(--surface-2); border:1px solid var(--edge)}
.pb-count:empty{display:none}
.program-box h3{margin:0 0 6px; font-size:1.15rem; font-weight:700}
.program-box p{margin:0 0 16px; font-size:.88rem; color:var(--muted); line-height:1.5; flex:1}
.pb-go{display:inline-flex; align-items:center; gap:4px; font-size:.86rem; font-weight:700; color:var(--c)}
.pb-go .ic{transition:transform .2s var(--ease)}
.program-box:hover .pb-go .ic{transform:translateX(3px)}
.home-split{display:grid; grid-template-columns:1.4fr 1fr; gap:18px; margin-top:28px}
/* grid items default to min-width:auto, which lets long file names push columns off-screen */
.home-split > *,.submit-layout > *,.search-layout > *,.admin-layout > *,.review-layout > *,.grid-2 > *,.shelf > *,.hero > *{min-width:0}
.recent-list{display:flex; flex-direction:column}
.recent-row{display:flex; align-items:center; gap:12px; width:100%; padding:10px 8px; font:inherit; text-align:left; color:var(--text); background:none; border:0; border-bottom:1px solid var(--edge); cursor:pointer; border-radius:var(--r-sm); transition:background .15s}
.recent-row:last-child{border-bottom:0}
.recent-row:hover{background:var(--surface-2)}
.rr-main{display:flex; flex-direction:column; min-width:0; flex:1}
.rr-name{font-size:.92rem; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.rr-path{font-size:.77rem; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.rr-when{font-size:.77rem; color:var(--muted); white-space:nowrap}
.contribute-card{position:relative}
.contribute-card p{margin:0 0 16px; font-size:.92rem; color:var(--muted)}
.steps{list-style:none; counter-reset:s; margin:0 0 20px; padding:0; display:grid; gap:12px}
.steps li{counter-increment:s; display:grid; grid-template-columns:30px 1fr; column-gap:12px; font-size:.9rem}
.steps li::before{content:counter(s); grid-row:span 2; display:grid; place-items:center; width:28px; height:28px; border-radius:50%; font-weight:700; font-size:.8rem; color:var(--primary); background:color-mix(in srgb,var(--primary) 10%,transparent); border:1px solid color-mix(in srgb,var(--primary) 25%,transparent)}
.steps li span{color:var(--muted)}

/* ---------- file icons ---------- */
.ficon{display:inline-grid; place-items:center; width:36px; height:36px; flex:none; border-radius:var(--r-sm); color:var(--muted); background:var(--surface-2); border:1px solid var(--edge)}
.ficon .ic{width:18px; height:18px}
.k-folder{color:var(--warm); background:color-mix(in srgb,var(--warm) 12%,transparent); border-color:color-mix(in srgb,var(--warm) 25%,transparent)}
.k-pdf{color:var(--danger); background:color-mix(in srgb,var(--danger) 9%,transparent); border-color:color-mix(in srgb,var(--danger) 22%,transparent)}
.k-doc{color:var(--primary); background:color-mix(in srgb,var(--primary) 9%,transparent); border-color:color-mix(in srgb,var(--primary) 22%,transparent)}
.k-sheet{color:var(--emerald); background:color-mix(in srgb,var(--emerald) 10%,transparent); border-color:color-mix(in srgb,var(--emerald) 24%,transparent)}
.k-slides{color:var(--orange); background:color-mix(in srgb,var(--orange) 10%,transparent); border-color:color-mix(in srgb,var(--orange) 24%,transparent)}
.k-image{color:var(--violet); background:color-mix(in srgb,var(--violet) 10%,transparent); border-color:color-mix(in srgb,var(--violet) 24%,transparent)}
.k-archive,.k-code{color:var(--muted)}
.k-audio,.k-video{color:var(--rose); background:color-mix(in srgb,var(--rose) 10%,transparent); border-color:color-mix(in srgb,var(--rose) 22%,transparent)}
.k-link{color:var(--accent); background:color-mix(in srgb,var(--accent) 10%,transparent); border-color:color-mix(in srgb,var(--accent) 24%,transparent)}

/* ---------- browser ---------- */
.browser-bar{display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:10px 12px; border-radius:var(--r-sm); margin-bottom:14px; position:sticky; top:calc(var(--head-h) + 8px); z-index:5}
.crumbs{flex:1; min-width:140px; display:flex; align-items:center; flex-wrap:wrap; gap:2px 4px; font-size:.88rem; color:var(--muted)}
.crumbs a{color:var(--muted); text-decoration:none; padding:2px 4px; border-radius:var(--r-sm)}
.crumbs a:hover{color:var(--primary); background:var(--glass-2)}
.crumbs b{color:var(--text); font-weight:600; padding:2px 4px}
.crumbs .sep .ic{width:.9em; height:.9em; opacity:.6}
.bar-tools{display:flex; align-items:center; gap:8px}
.filter{width:210px; padding:8px 12px; font-size:.85rem}
.listing{border-radius:var(--r-sm); overflow:hidden; min-height:120px}
.dir-table{width:100%; border-collapse:collapse; font-size:.92rem}
.dir-table th,.dir-table td{text-align:left; padding:10px 16px; border-bottom:1px solid var(--edge)}
.dir-table th{padding:0; background:var(--surface-2)}
.sort-btn{display:inline-flex; align-items:center; gap:4px; width:100%; padding:11px 16px; font:inherit; font-size:.74rem; font-weight:600; text-transform:uppercase; letter-spacing:.06em; text-align:left; color:var(--muted); background:none; border:0; cursor:pointer}
.sort-btn:hover{color:var(--text)}
.dir-table tbody tr{animation:fadeUp .35s var(--ease) both; animation-delay:calc(min(var(--i,0),12) * 14ms); transition:background .12s}
@keyframes fadeUp{from{opacity:0; transform:translateY(6px)}}
.dir-table tbody tr:last-child td{border-bottom:0}
.dir-table tbody tr:hover{background:var(--glass-2)}
.col-size,.col-date{color:var(--muted); white-space:nowrap; width:1%; font-size:.85rem}
.col-act{width:1%; padding:4px 10px !important}
.row-acts{display:flex; gap:2px; opacity:.0; transition:opacity .15s}
tr:hover .row-acts,tr:focus-within .row-acts{opacity:1}
a.file-link{display:flex; align-items:center; gap:12px; color:var(--text); text-decoration:none; font-weight:500; min-width:0}
a.file-link:hover .fname{text-decoration:underline}
tr.is-folder a.file-link{color:var(--primary)}
.fname{overflow-wrap:anywhere}
.count-line{margin:12px 2px 0; font-size:.78rem; color:var(--muted)}
.file-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:12px; padding:14px}
.tile{display:flex; flex-direction:column; gap:6px; padding:10px; border-radius:var(--r-sm); text-decoration:none; color:var(--text); border:1px solid var(--edge); background:var(--glass);
  animation:fadeUp .35s var(--ease) both; animation-delay:calc(min(var(--i,0),12) * 16ms); transition:transform .2s var(--ease), border-color .2s, background .2s}
.tile:hover{transform:translateY(-2px); border-color:color-mix(in srgb,var(--primary) 45%,transparent); background:var(--glass-2)}
.tile-thumb{position:relative; aspect-ratio:4/3; border-radius:var(--r-sm); overflow:hidden; display:grid; place-items:center; background:var(--glass-2)}
.tile-thumb img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top}
.tile-thumb .ficon{width:46px; height:46px}
.tile-thumb .ficon .ic{width:24px; height:24px}
.tile-name{font-size:.84rem; font-weight:500; line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere}
.tile.is-folder .tile-name{color:var(--primary)}
.tile-meta{font-size:.72rem; color:var(--muted)}
.sk-row{display:flex; gap:20px; padding:15px 16px; border-bottom:1px solid var(--edge)}
.sk-row span{display:block; height:12px; border-radius:var(--r-sm); background:linear-gradient(90deg,var(--glass) 25%,var(--glass-3) 50%,var(--glass) 75%); background-size:200% 100%; animation:sheen 1.2s linear infinite}
@keyframes sheen{to{background-position:-200% 0}}
.empty{display:flex; flex-direction:column; align-items:center; text-align:center; gap:4px; padding:44px 20px}
.empty h3{margin:10px 0 2px; font-size:1.08rem}
.empty p{margin:0 0 14px; color:var(--muted); font-size:.9rem; max-width:46ch}
.empty-ic{display:grid; place-items:center; width:58px; height:58px; margin:0 auto; border-radius:var(--r-sm); color:var(--accent); background:color-mix(in srgb,var(--accent) 10%,transparent); border:1px solid color-mix(in srgb,var(--accent) 22%,transparent)}
.empty-ic .ic{width:26px; height:26px}

/* ---------- dialogs ---------- */
dialog.modal{width:min(560px,calc(100vw - 24px)); max-height:calc(100dvh - 32px); padding:0; color:var(--text); border-radius:var(--r-lg); box-shadow:var(--shadow);
  background:var(--surface); display:flex; flex-direction:column; overflow:hidden}
dialog.modal:not([open]){display:none}
dialog.modal[open]{animation:riseIn .25s var(--ease)}
dialog.modal::backdrop{background:rgba(8,18,40,.45)}
:root[data-theme="dark"] dialog.modal::backdrop{background:rgba(0,0,0,.6)}
.modal-wide{width:min(1100px,calc(100vw - 24px)) !important}
.modal-head{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px 14px 22px; border-bottom:1px solid var(--edge)}
.modal-head h2{margin:0; font-size:1.02rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.modal-head .icon-btn{background:transparent; border-color:transparent}
.modal-body{padding:20px 22px; overflow:auto}
.modal-body > p:first-child{margin-top:0}
.modal-foot{display:flex; justify-content:flex-end; gap:10px; padding:14px 22px; border-top:1px solid var(--edge)}
.modal-preview .modal-body{padding:0}
.pv{display:grid; grid-template-columns:1fr 340px; min-height:min(72vh,760px)}
.pv-frame{position:relative; background:#111; min-height:420px}
.pv-frame iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.pv-frame .spinner{position:absolute; left:50%; top:50%; margin:-9px; display:none}
.pv-frame.loading .spinner{display:block}
.pv-none{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:40px; text-align:center; color:var(--muted); background:var(--glass); min-height:260px; word-break:break-all}
.pv-side{padding:20px; border-left:1px solid var(--edge); overflow:auto; display:flex; flex-direction:column; gap:14px}
.pv-title{display:flex; gap:12px; align-items:flex-start}
.pv-title h3{margin:2px 0 0; font-size:1.05rem; overflow-wrap:anywhere}
.pv-title p{margin:4px 0 0; overflow-wrap:anywhere}
.pv-path{display:flex; gap:8px; align-items:flex-start; margin:0; font-size:.82rem; color:var(--muted); overflow-wrap:anywhere}
.pv-actions{display:flex; flex-wrap:wrap; gap:8px}
.pv-actions.minor{gap:2px}
.pv-staff{padding-top:12px; border-top:1px dashed var(--edge)}
.pv-desc summary{cursor:pointer; font-size:.82rem; font-weight:600; color:var(--muted)}
.pv-desc p{white-space:pre-wrap; font-size:.86rem; margin:8px 0 0}
.meta-list{display:grid; grid-template-columns:auto 1fr; gap:7px 16px; margin:0; font-size:.86rem}
.meta-list dt{color:var(--muted)}
.meta-list dd{margin:0; overflow-wrap:anywhere}

/* quick search */
.modal-qs{width:min(640px,calc(100vw - 24px)) !important; align-self:flex-start; margin-top:10vh}
.modal-qs .modal-head{display:none}
.modal-qs .modal-body{padding:0}
.qs-bar{display:flex; align-items:center; gap:10px; padding:14px 18px; border-bottom:1px solid var(--edge)}
.qs-bar > .ic{width:1.3em; height:1.3em; color:var(--muted)}
.qs-input{flex:1; min-width:0; font:inherit; font-size:1.05rem; color:var(--text); background:none; border:0; outline:none}
.qs-input::-webkit-search-cancel-button{display:none}
.qs-list{max-height:min(60vh,460px); overflow:auto; padding:6px}
.qs-hint{padding:18px 14px; margin:0}
.qs-item{display:flex; align-items:center; gap:12px; width:100%; padding:9px 10px; font:inherit; text-align:left; color:var(--text); background:none; border:0; border-radius:var(--r-sm); cursor:pointer}
.qs-item[aria-selected="true"]{background:color-mix(in srgb,var(--primary) 10%,transparent)}
.qs-item[aria-selected="true"] .qs-name{color:var(--primary)}
.qs-main{display:flex; flex-direction:column; min-width:0}
.qs-name{font-size:.92rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.qs-path{font-size:.74rem; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.qs-more{display:flex; align-items:center; justify-content:center; gap:6px; padding:10px; font-size:.84rem; color:var(--primary); text-decoration:none; border-radius:var(--r-sm)}
.qs-more:hover{background:var(--glass-2)}
.qs-foot{display:flex; align-items:center; gap:16px; padding:10px 16px; border-top:1px solid var(--edge); font-size:.75rem; color:var(--muted)}
.qs-foot .link{margin-left:auto; font-size:.78rem}
.qs-foot kbd{margin-right:2px}

/* ---------- search ---------- */
.search-page .hero-search{max-width:none; margin-bottom:20px}
.search-layout{display:grid; grid-template-columns:240px 1fr; gap:20px; align-items:start}
.facets{position:sticky; top:calc(var(--head-h) + 16px); border-radius:var(--r-sm); padding:14px; max-height:calc(100dvh - var(--head-h) - 40px); overflow:auto}
.facet-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:6px}
.facet-head h3{margin:0; font-size:.92rem; display:flex; gap:8px; align-items:center}
.facet{margin-top:14px}
.facet h4{margin:0 0 6px; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.facet-opts{display:flex; flex-direction:column; gap:2px}
.facet-opt{display:flex; justify-content:space-between; gap:10px; padding:6px 9px; font:inherit; font-size:.84rem; text-align:left; color:var(--text); background:none; border:1px solid transparent; border-radius:var(--r-sm); cursor:pointer}
.facet-opt:hover{background:var(--glass-2)}
.facet-opt[aria-pressed="true"]{border-color:var(--primary); background:color-mix(in srgb,var(--primary) 12%,transparent); color:var(--primary)}
.facet-opt b{font-weight:500; color:var(--muted); font-size:.78rem}
.results-head{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:10px}
.results-head p{margin:0; font-size:.9rem}
.results-tools{display:flex; align-items:center; gap:6px}
.results-tools .input{width:auto}
.results{display:flex; flex-direction:column; gap:8px}
.result{display:flex; align-items:center; gap:14px; padding:12px 14px; border-radius:var(--r-sm); text-decoration:none; color:var(--text); background:var(--glass); border:1px solid var(--edge);
  animation:fadeUp .3s var(--ease) both; animation-delay:calc(min(var(--i,0),12) * 12ms); transition:border-color .15s, background .15s, transform .15s var(--ease)}
.result:hover{border-color:color-mix(in srgb,var(--primary) 45%,transparent); background:var(--glass-2); transform:translateX(2px)}
.result-main{flex:1; min-width:0}
.result-name{font-weight:500; overflow-wrap:anywhere}
.result-sub{font-size:.76rem; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.result-path{font-size:.77rem; color:var(--muted); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.result-meta{display:flex; flex-direction:column; align-items:flex-end; gap:4px; flex:none}

/* ---------- submit ---------- */
.submit-layout{display:grid; grid-template-columns:1fr 320px; gap:20px; align-items:start}
.submit-form{display:flex; flex-direction:column; gap:16px}
.step{border-radius:var(--r-sm); padding:20px; margin:0; display:flex; flex-direction:column; gap:14px; min-width:0}
.step legend{float:left; width:100%; display:flex; align-items:center; gap:10px; margin:0 0 4px; padding:0; font-size:1.05rem; font-weight:700}
.step legend + *{clear:both}
.step-n{display:grid; place-items:center; width:28px; height:28px; border-radius:50%; font-size:.82rem; color:var(--on-primary); background:var(--grad-btn)}
:root[data-theme="dark"] .step-n{color:#fff}
.segmented{display:inline-flex; padding:4px; gap:4px; border-radius:var(--r-sm); background:var(--glass); border:1px solid var(--edge); align-self:flex-start}
.segmented button{display:flex; align-items:center; gap:8px; padding:8px 14px; font:inherit; font-size:.86rem; font-weight:600; color:var(--muted); background:none; border:0; border-radius:var(--r-sm); cursor:pointer; transition:background .2s, color .2s}
.segmented button[aria-selected="true"]{color:var(--text); background:var(--glass-3); box-shadow:var(--shadow-sm)}
.dropzone{display:flex; flex-direction:column; align-items:center; gap:6px; padding:34px 20px; text-align:center; border-radius:var(--r-sm); cursor:pointer;
  border:1.5px dashed var(--edge-2); background:var(--glass); transition:border-color .2s, background .2s, transform .2s var(--ease)}
.dropzone:hover,.dropzone:focus-visible{border-color:var(--primary); background:color-mix(in srgb,var(--primary) 6%,transparent)}
.dropzone.over{border-color:var(--primary); background:color-mix(in srgb,var(--primary) 12%,transparent); transform:scale(1.01)}
.dz-ic{display:grid; place-items:center; width:56px; height:56px; margin-bottom:6px; border-radius:var(--r-sm); color:var(--primary); background:color-mix(in srgb,var(--primary) 12%,transparent)}
.dz-ic .ic{width:26px; height:26px}
.dropzone.over .dz-ic{animation:bob .8s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-5px)}}
.queue{display:flex; flex-direction:column; gap:8px}
.q-item{display:flex; align-items:flex-start; gap:12px; padding:12px; border-radius:var(--r-sm); background:var(--glass); border:1px solid var(--edge); animation:fadeUp .25s var(--ease)}
.q-item.st-done{border-color:color-mix(in srgb,var(--primary) 40%,transparent)}
.q-item.st-done .ficon{color:var(--primary); background:color-mix(in srgb,var(--primary) 15%,transparent)}
.q-item.st-error{border-color:color-mix(in srgb,var(--danger) 40%,transparent)}
.q-item.st-error .ficon{color:var(--danger)}
.q-main{flex:1; min-width:0; display:flex; flex-direction:column; gap:6px}
.q-sub{display:flex; gap:10px; flex-wrap:wrap; overflow-wrap:anywhere}
.bar{height:6px; border-radius:var(--r-sm); overflow:hidden; background:var(--glass-2)}
.bar span{display:block; height:100%; border-radius:var(--r-sm); background:var(--grad); transition:width .3s var(--ease)}
.st-uploading .bar span,.st-hashing .bar span,.st-starting .bar span{background-size:200% 100%; background-image:linear-gradient(90deg,var(--primary),var(--accent),var(--primary)); animation:sheen 1.4s linear infinite}
.metaform{display:flex; flex-direction:column; gap:12px}
details.more{border-top:1px dashed var(--edge); padding-top:10px}
details.more > summary{cursor:pointer; font-size:.86rem; font-weight:600; color:var(--primary); list-style:none; display:flex; align-items:center; gap:6px; margin-bottom:6px}
details.more > summary::before{content:"+"; display:grid; place-items:center; width:18px; height:18px; border-radius:var(--r-sm); background:color-mix(in srgb,var(--primary) 14%,transparent); font-size:.85rem}
details.more[open] > summary::before{content:"\2212"}
details.more > *:not(summary){margin-top:12px}
.guide{position:sticky; top:calc(var(--head-h) + 16px); font-size:.86rem}
.guide h3{display:flex; align-items:center; gap:8px; margin:18px 0 8px; font-size:.92rem}
.guide h3:first-child{margin-top:0}
.guide h3 .ic{color:var(--accent)}
.ticks,.crosses{list-style:none; margin:0; padding:0; display:grid; gap:6px; color:var(--muted)}
.ticks li,.crosses li{position:relative; padding-left:20px}
.ticks li::before{content:"\2713"; position:absolute; left:0; color:var(--primary); font-weight:700}
.crosses li::before{content:"\2715"; position:absolute; left:0; color:var(--danger); font-weight:700}
.guide .link{margin-top:14px}
.success-card{text-align:center; padding:40px 24px}
.success-card h2{justify-content:center; font-size:1.4rem; margin:16px 0 6px}
.success-card p{max-width:48ch; margin:0 auto 20px}
.success-burst{display:grid; place-items:center; width:76px; height:76px; margin:0 auto; border-radius:var(--r-sm); color:var(--on-primary); background:var(--grad-btn); box-shadow:0 0 0 10px color-mix(in srgb,var(--primary) 12%,transparent), 0 0 0 22px color-mix(in srgb,var(--primary) 6%,transparent); animation:pop .5s var(--ease)}
.success-burst .ic{width:36px; height:36px; stroke-width:2.4}
@keyframes pop{from{transform:scale(.4); opacity:0}70%{transform:scale(1.08)}}

/* ---------- my uploads ---------- */
.sub-list{display:flex; flex-direction:column; gap:12px; margin-top:14px}
.sub-card{padding:16px 18px}
.sub-top{display:flex; justify-content:space-between; gap:14px; align-items:flex-start}
.sub-top h3{margin:0 0 4px; font-size:1rem; overflow-wrap:anywhere}
.sub-top p{margin:0}
.note{margin:12px 0 0; padding:10px 12px; border:1px solid color-mix(in srgb,var(--warm) 30%,transparent); border-radius:var(--r-sm); background:color-mix(in srgb,var(--warm) 8%,transparent); font-size:.86rem; white-space:pre-wrap}
.note.danger{border-color:color-mix(in srgb,var(--danger) 30%,transparent); background:color-mix(in srgb,var(--danger) 7%,transparent)}
.sub-actions{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:12px}
.sub-actions:empty{display:none}
.sub-actions .muted{display:inline-flex; gap:6px; align-items:center}

/* ---------- dashboard ---------- */
.admin-layout{display:grid; grid-template-columns:210px 1fr; gap:20px; align-items:start}
.admin-tabs{position:sticky; top:calc(var(--head-h) + 16px); display:flex; flex-direction:column; gap:2px; padding:8px; border-radius:var(--r-sm)}
.admin-tabs a{display:flex; align-items:center; gap:10px; padding:9px 11px; border-radius:var(--r-sm); font-size:.88rem; color:var(--muted); text-decoration:none; transition:background .15s, color .15s}
.admin-tabs a:hover{color:var(--text); background:var(--glass-2)}
.admin-tabs a.active{color:var(--primary); background:color-mix(in srgb,var(--primary) 11%,transparent); font-weight:600}
.admin-tabs a span{flex:1}
.tab-count:not(:empty){min-width:20px; padding:1px 6px; border-radius:999px; font-size:.7rem; text-align:center; color:var(--on-primary); background:var(--warm)}
.admin-panel{min-width:0; display:flex; flex-direction:column; gap:16px}
.admin-panel > .grid-2.gap{margin-top:0}
.tiles{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
.tile-stat{display:flex; flex-direction:column; gap:2px; text-decoration:none; color:var(--text); transition:transform .2s var(--ease), border-color .2s}
a.tile-stat:hover{transform:translateY(-2px); border-color:var(--edge-2)}
.tile-stat strong{font-size:1.9rem; letter-spacing:-.04em; line-height:1.1; margin-top:8px}
.tile-stat span:last-child{font-size:.82rem; color:var(--muted)}
.ts-ic{display:grid; place-items:center; width:34px; height:34px; border-radius:var(--r-sm)}
.t-ok .ts-ic{color:var(--primary); background:color-mix(in srgb,var(--primary) 12%,transparent)}
.t-warn .ts-ic{color:var(--warm); background:color-mix(in srgb,var(--warm) 12%,transparent)}
.t-bad .ts-ic{color:var(--danger); background:color-mix(in srgb,var(--danger) 12%,transparent)}
.storage-top{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:10px}
.storage-top strong{font-size:1.8rem; letter-spacing:-.04em}
.meter{display:flex; height:12px; border-radius:var(--r-sm); overflow:hidden; background:var(--glass-2)}
.meter span{height:100%; transition:width .6s var(--ease)}
.seg-drive{background:var(--grad)}
.m-warn .seg-drive{background:linear-gradient(90deg,var(--warm),#f7cf7a)}
.m-bad .seg-drive{background:linear-gradient(90deg,var(--danger),#ffa596)}
.seg-trash{background:repeating-linear-gradient(45deg,var(--muted) 0 4px,transparent 4px 8px); opacity:.6}
.seg-other{background:#7fb2ff; opacity:.7}
.legend{display:flex; flex-wrap:wrap; gap:6px 16px; margin-top:10px; font-size:.78rem; color:var(--muted)}
.legend i{display:inline-block; width:10px; height:10px; border-radius:var(--r-sm); margin-right:6px; vertical-align:-1px}
.storage .note{margin-top:14px}
.bars{display:flex; flex-direction:column; gap:10px}
.bar-row{display:grid; grid-template-columns:120px 1fr auto; gap:12px; align-items:center; font-size:.84rem}
.bar-row b{font-weight:500; color:var(--muted); font-size:.78rem; white-space:nowrap}
.mini-list{display:flex; flex-direction:column; gap:2px}
.mini-row{display:flex; align-items:center; gap:10px; width:100%; min-width:0; padding:7px 8px; font:inherit; font-size:.86rem; text-align:left; color:var(--text); background:none; border:0; border-radius:var(--r-sm); cursor:pointer}
button.mini-row:hover{background:var(--glass-2)}
.mini-row .ellipsis{flex:1}
.mini-row b{font-weight:500; font-size:.78rem; color:var(--muted)}
.mini-row .ficon{width:28px; height:28px}
.mini-row .input{width:auto}
.timeline{list-style:none; margin:0 0 10px; padding:0 0 0 16px; border-left:2px solid var(--edge); display:grid; gap:12px; font-size:.86rem}
.timeline li{position:relative}
.timeline li::before{content:""; position:absolute; left:-22px; top:6px; width:10px; height:10px; border-radius:50%; background:var(--primary); box-shadow:0 0 0 3px var(--bg-1)}
.timeline p{margin:2px 0 0}
.review-layout{display:grid; grid-template-columns:250px 1fr; gap:16px; align-items:start}
.queue-list{position:sticky; top:calc(var(--head-h) + 16px); border-radius:var(--r-sm); padding:6px; max-height:calc(100dvh - var(--head-h) - 40px); overflow:auto}
.queue-row{display:flex; align-items:center; gap:10px; padding:10px; border-radius:var(--r-sm); text-decoration:none; color:var(--text); transition:background .15s}
.queue-row:hover{background:var(--glass-2)}
.queue-row.active{background:color-mix(in srgb,var(--primary) 10%,transparent)}
.queue-row.active .qr-title{color:var(--primary)}
.qr-main{display:flex; flex-direction:column; min-width:0}
.qr-title{font-size:.88rem; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.qr-sub{font-size:.74rem; color:var(--muted)}
.review-detail{min-width:0}
.review-card h2{font-size:1.25rem; margin:0 0 4px}
.review-card .row-between p{margin:0}
.review-grid{display:grid; grid-template-columns:minmax(0,1fr); gap:20px; margin-top:18px}
.review-grid .pv-frame{min-height:min(62vh,560px); border-radius:var(--r-sm); overflow:hidden}
@media (min-width:1500px){ .review-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)} .review-grid .pv-frame{min-height:620px} }
.h-sub{margin:6px 0 0; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.facts{display:flex; flex-wrap:wrap; gap:6px 16px; align-items:center; font-size:.82rem; color:var(--muted)}
.facts span{display:inline-flex; align-items:center; gap:6px; overflow-wrap:anywhere}
.folder-picker{display:flex; flex-direction:column; gap:10px}
.fp-hint{display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:.82rem; padding:8px 10px; border-radius:var(--r-sm); background:color-mix(in srgb,var(--warm) 10%,transparent); color:var(--text)}
.fp-hint .ic{color:var(--warm)}
.fp-crumbs{display:flex; align-items:center; flex-wrap:wrap; gap:2px; font-size:.84rem}
.fp-crumbs button{font:inherit; font-size:.84rem; color:var(--muted); background:none; border:0; padding:3px 5px; border-radius:var(--r-sm); cursor:pointer}
.fp-crumbs button:hover{background:var(--glass-2); color:var(--text)}
.fp-crumbs button.current{color:var(--text); font-weight:600}
.fp-crumbs .ic{width:.85em; opacity:.5}
.fp-chosen{margin-left:auto}
.fp-list{display:flex; flex-direction:column; gap:2px; max-height:220px; overflow:auto}
.fp-item{display:flex; align-items:center; gap:10px; padding:8px 10px; font:inherit; font-size:.86rem; text-align:left; color:var(--text); background:none; border:0; border-radius:var(--r-sm); cursor:pointer}
.fp-item span{flex:1}
.fp-item .ic:first-child{color:var(--primary)}
.fp-item .ic:last-child{opacity:.4}
.fp-item:hover{background:var(--glass-2)}
.table-card{border-radius:var(--r-sm); overflow:auto}
.data-table{width:100%; border-collapse:collapse; font-size:.86rem}
.data-table th{text-align:left; padding:11px 14px; font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); background:var(--surface-2); white-space:nowrap}
.data-table td{padding:10px 14px; border-top:1px solid var(--edge); vertical-align:middle}
.data-table tr.clickable{cursor:pointer}
.data-table tbody tr:hover{background:var(--glass-2)}
.data-table tr.is-blocked td{opacity:.55}
.inline-form{display:flex; gap:8px; margin-top:14px; flex-wrap:wrap}
.inline-form .input{flex:1; min-width:180px}
.inline-form select.input{flex:0 0 140px; min-width:0}
.maint{display:flex; justify-content:space-between; align-items:center; gap:16px; padding:12px 0; border-top:1px solid var(--edge)}
.maint p{margin:2px 0 0}
.console{margin:0; padding:14px; border-radius:var(--r-sm); font-family:var(--mono); font-size:.78rem; white-space:pre-wrap; background:var(--surface-2); border:1px solid var(--edge); max-height:260px; overflow:auto}
.report h3{margin:0; font-size:1rem}
.report p{margin:4px 0 0}

/* ---------- about ---------- */
.about .card{margin-bottom:16px}
.toc{margin-bottom:18px}
.prose p,.prose li{font-size:.92rem; line-height:1.65}
.prose ul{padding-left:20px; margin:8px 0}
.prose li{margin:4px 0}
.prose li::marker{color:var(--primary)}
.type-grid{display:flex; flex-wrap:wrap; gap:6px; margin:10px 0}

/* ---------- toasts ---------- */
.toasts{position:fixed; left:50%; bottom:22px; z-index:200; display:flex; flex-direction:column; align-items:center; gap:8px; transform:translateX(-50%); width:min(460px,calc(100vw - 24px)); pointer-events:none}
.toast{display:flex; align-items:center; gap:10px; padding:11px 16px; border-radius:var(--r-sm); font-size:.88rem; box-shadow:var(--shadow); background:var(--surface); border:1px solid var(--edge-2); color:var(--text);
  opacity:0; transform:translateY(12px) scale(.98); transition:opacity .25s var(--ease), transform .25s var(--ease); pointer-events:auto}
.toast.in{opacity:1; transform:none}
.toast-ok .ic{color:var(--primary)} .toast-error .ic{color:var(--danger)} .toast-warn .ic{color:var(--warm)} .toast-info .ic{color:var(--accent)}
.toast-error{border-color:color-mix(in srgb,var(--danger) 45%,transparent)}



.role-key{list-style:none; margin:0 0 14px; padding:0; display:grid; gap:6px}
.role-key li{display:flex; gap:10px; align-items:baseline}
.role-key .pill{min-width:72px; justify-content:center}

/* ---------- library (virtual browsing) ---------- */
.library .browser-bar{position:static}
.lib-groups{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:10px; margin-bottom:26px}
.lib-group{display:flex; align-items:center; gap:12px; padding:14px 14px 14px 12px; border-radius:var(--r-sm); text-decoration:none; color:var(--text);
  background:var(--glass); border:1px solid var(--edge); animation:fadeUp .3s var(--ease) both; animation-delay:calc(min(var(--i,0),12) * 14ms);
  transition:transform .18s var(--ease), border-color .18s, background .18s}
.lib-group:hover{transform:translateY(-2px); border-color:color-mix(in srgb,var(--primary) 45%,transparent); background:var(--glass-2)}
.lib-group > .ic:last-child{opacity:.4; transition:transform .2s var(--ease)}
.lib-group:hover > .ic:last-child{transform:translateX(3px); opacity:.8}
.lib-group.is-none{border-style:dashed}
.lg-ic{display:grid; place-items:center; width:38px; height:38px; flex:none; border-radius:var(--r-sm); color:var(--accent); background:color-mix(in srgb,var(--accent) 10%,transparent); border:1px solid color-mix(in srgb,var(--accent) 22%,transparent)}
.lg-main{display:flex; flex-direction:column; min-width:0; flex:1}
.lg-name{font-weight:600; font-size:.92rem; overflow-wrap:anywhere}
.lg-count{font-size:.76rem; color:var(--muted)}
.library .result-meta{flex-direction:row; flex-wrap:wrap; justify-content:flex-end; max-width:40%}

/* ---------- footer & tab bar ---------- */
.site-foot{margin-top:24px; padding:44px max(16px,calc((100vw - var(--page)) / 2 + 16px)) 30px; border-top:1px solid var(--edge); font-size:.86rem; color:var(--muted); background:color-mix(in srgb,var(--surface) 70%,transparent)}
.foot-grid{display:grid; grid-template-columns:1.6fr repeat(3,1fr); gap:28px}
.foot-brand{display:flex; flex-direction:column; gap:12px; max-width:40ch}
.foot-brand .brand{gap:12px}
.foot-brand p{margin:0; line-height:1.6}
.foot-marks{display:flex; align-items:center; gap:10px; font-size:.78rem}
.foot-marks img{width:30px; height:30px; object-fit:contain; border-radius:var(--r-sm)}
.foot-col{display:flex; flex-direction:column; gap:9px}
.foot-col h3{margin:0 0 4px; font-size:.76rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--text)}
.foot-col a{color:var(--muted); text-decoration:none; width:fit-content}
.foot-col a:hover{color:var(--primary)}
.foot-legal{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:30px; padding-top:18px; border-top:1px solid var(--edge); font-size:.78rem}
.tabbar{display:none}

:focus-visible{outline:2px solid var(--primary); outline-offset:2px}

/* ---------- responsive ---------- */
@media (max-width:1380px){
  .brand-text span{display:none}
}
@media (max-width:1280px){
  .main-nav .nav-link span{display:none}
  .main-nav .nav-link{padding:9px 11px}
}
@media (max-width:1180px){
  .search-trigger{flex:0 0 auto}
  .search-trigger span,.search-trigger kbd{display:none}
  .nav-link span{display:none}
  .nav-link{padding:9px 11px}
  .shelf{grid-template-columns:repeat(2,1fr)}
  .pv{grid-template-columns:1fr 300px}
  .review-grid{grid-template-columns:1fr}
}
@media (max-width:980px){
  .hero{grid-template-columns:1fr}
  .hero-art{order:-1; max-width:220px}
  .orbit{display:none}
  .gate-split{grid-template-columns:1fr}
  .gate-panel{padding:30px 28px; gap:14px}
  .gate-panel .crest{width:84px; height:84px}
  .gate-points{display:none}
  .gate-form{padding:30px 28px}
  .signin{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .foot-brand{grid-column:1/-1}
}
@media (max-width:900px){
  .main-nav{display:none}
  .head-dash span{display:none}
  .tabbar{position:fixed; left:0; right:0; bottom:0; z-index:25; display:flex; justify-content:space-around; padding:6px 6px calc(6px + env(safe-area-inset-bottom));
    background:var(--head-bg); border-top:1px solid var(--edge)}
  .tab-link{position:relative; flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; padding:6px 2px; font-size:.68rem; font-weight:500; color:var(--muted); text-decoration:none; border-radius:var(--r-sm)}
  .tab-link .ic{width:22px; height:22px}
  .tab-link.active{color:var(--primary); background:color-mix(in srgb,var(--primary) 10%,transparent); font-weight:600}
  .tab-link .badge-dot{position:absolute; top:0; left:calc(50% + 6px)}
  .app{padding-bottom:70px}
  .home-split,.submit-layout,.search-layout,.admin-layout,.review-layout{grid-template-columns:1fr}
  .guide,.facets,.admin-tabs,.queue-list{position:static; max-height:none}
  .admin-tabs{flex-direction:row; overflow-x:auto; scrollbar-width:none}
  .admin-tabs a{flex:none}
  .queue-list{max-height:260px}
  .facets{padding:10px}
  .facet{margin-top:8px}
  .facet-opts{flex-direction:row; flex-wrap:wrap; gap:6px}
  .facet-opt{border-color:var(--edge); border-radius:var(--r-sm); padding:5px 10px}
  .tiles{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:repeat(2,1fr)}
  .pv{grid-template-columns:1fr}
  .pv-frame{min-height:58vh}
  .pv-side{border-left:0; border-top:1px solid var(--edge)}
  .filter{width:100%}
  .bar-tools{width:100%; order:3}
  .browser-bar{position:static}
}
@media (max-width:620px){
  :root{--head-h:60px}
  .brand-text span{display:none}
  .brand .crest{width:38px; height:38px}
  .site-head{gap:6px; padding:8px 12px}
  .head-signin span{display:none}
  .head-signin{padding:8px 10px}
  .shelf{grid-template-columns:1fr; gap:12px}
  .grid-2,.student-fields{grid-template-columns:1fr}
  .stat{padding:12px 14px}
  .stat strong{font-size:1.25rem}
  .hero-title{font-size:2.15rem}
  .hero-search{padding-left:14px}
  .hero-search .btn{padding:10px 14px}
  .card{padding:16px}
  .gate{padding:12px; place-items:start center}
  .gate-panel{padding:24px 20px; flex-direction:row; align-items:center; gap:14px}
  .gate-panel .crest{width:64px; height:64px; box-shadow:0 0 0 4px rgba(255,255,255,.12)}
  .gate-panel h1{font-size:1.4rem}
  .gate-panel p{display:none}
  .gate-form{padding:24px 20px}
  .gate-card{padding:26px 20px 20px}
  .result-meta{display:none}
  .dir-table thead{display:none}
  .dir-table td.col-date,.dir-table td.col-size{display:none}
  .row-acts{opacity:1}
  .file-grid{grid-template-columns:repeat(2,1fr); padding:10px; gap:10px}
  .bar-row{grid-template-columns:90px 1fr}
  .bar-row b{grid-column:2}
  .foot-grid{grid-template-columns:1fr 1fr; gap:22px}
  .modal-body{padding:16px}
  .modal-qs{margin-top:4vh}
  .qs-foot span{display:none}
}
@media (max-width:380px){
  .brand-text strong{font-size:.98rem}
  .theme-btn-wrap{display:none}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important; transition:none !important}
}
.hero-input:focus-visible,.qs-input:focus-visible{outline:none}
.facets:empty{display:none}
@media (max-width:620px){ .hero-art{max-width:170px} .hero{padding-top:0} }
.mono-url{font-family:var(--mono); font-size:.86rem}