:root{color-scheme:dark;--bg:#0e0e0f;--bg2:#171718;--bg3:#202022;--bd:#2c2c2f;--bd2:#3a3a3e;--fg:#ededeb;--mut:#9b9a96;--acc:#f0b347;--acc2:#ffcd6b;--accbg:#2b2112;--ok:#6fcf97;--okbg:#12241b;--warn:#f2994a;--warnbg:#2a1b10;--err:#f28b82;--errbg:#2b1715;--r:12px;--rs:9px}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font:16px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,sans-serif;color:var(--fg);background:var(--bg);min-height:100vh;display:flex;flex-direction:column}
main{width:100%;max-width:72rem;margin:0 auto;padding:1.25rem 1rem 3rem;flex:1}
body.admin main{max-width:80rem}
h1{font-size:1.65rem;line-height:1.2;font-weight:650;letter-spacing:-.01em;margin:.25rem 0 .5rem;overflow-wrap:anywhere}
h2{font-size:1.05rem;font-weight:600;margin:0;}
p{margin:.5rem 0}
a{color:var(--acc);text-decoration:none}a:hover{color:var(--acc2);text-decoration:underline}
.mut{color:var(--mut)}.small{font-size:.875rem}
.eyebrow{display:flex;align-items:center;gap:.5rem;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);margin:0 0 1rem}
.eyebrow::before{content:"";width:.55rem;height:.55rem;border-radius:50%;background:var(--acc);box-shadow:0 0 0 3px var(--accbg)}
.logo{display:inline-flex;flex:0 0 auto;width:1.25rem;height:1.25rem}.logo svg{width:100%;height:100%;display:block}
.eyebrow.brandmark::before{content:none}.eyebrow.brandmark{gap:.45rem}
.lead{color:var(--mut);margin:0 0 1.25rem;overflow-wrap:anywhere}
.meta{display:flex;flex-wrap:wrap;gap:.35rem .6rem;color:var(--mut);font-size:.9rem;margin:0 0 1.25rem}
.meta span+span::before{content:"·";margin-right:.6rem;color:var(--bd2)}

/* surfaces */
.card{background:var(--bg2);border:1px solid var(--bd);border-radius:var(--r);padding:1.1rem 1.15rem;margin:0 0 1rem}
.card h2{margin-bottom:.6rem}
.note{border-radius:var(--rs);padding:.75rem .9rem;margin:0 0 1rem;font-size:.95rem;border:1px solid var(--bd);background:var(--bg3)}
.note.ok{border-color:#1f4a31;background:var(--okbg);color:#cdeedb}
.note.warn{border-color:#5a3516;background:var(--warnbg);color:#f6d2b3}
.note.err{border-color:#5c2a26;background:var(--errbg);color:#f9c9c4}
.note b{font-weight:650}
.ok{color:var(--ok)}.err{color:var(--err)}.warn{color:var(--warn)}
.center{display:flex;align-items:center;justify-content:center;min-height:calc(100vh - 4rem)}
.center>.card{width:100%;max-width:26rem;padding:1.6rem 1.5rem}
.wordmark{display:flex;align-items:center;gap:.6rem;margin:0;font-size:1.6rem;font-weight:650;letter-spacing:.02em;color:var(--fg)}
.wordmark .logo{width:2.1rem;height:2.1rem}
.foot{color:var(--mut);font-size:.85rem;margin-top:2rem;padding-top:1rem;border-top:1px solid var(--bd)}

/* controls */
label{display:block;font-size:.85rem;font-weight:600;color:var(--mut);margin:0 0 .35rem}
input,select,button,textarea{font:inherit;color:inherit}
input:not([type=checkbox]):not([type=file]):not([type=radio]),select{width:100%;min-height:2.75rem;padding:.55rem .8rem;border:1px solid var(--bd2);border-radius:var(--rs);background:var(--bg);outline:none;transition:border-color .12s,box-shadow .12s}
input:focus,select:focus{border-color:var(--acc);box-shadow:0 0 0 3px var(--accbg)}
input::placeholder{color:#66655f}
.sel{position:relative}.sel select{appearance:none;-webkit-appearance:none;padding-right:2.2rem;cursor:pointer}
.sel::after{content:"";position:absolute;right:.95rem;top:50%;width:.5rem;height:.5rem;border-right:2px solid var(--mut);border-bottom:2px solid var(--mut);transform:translateY(-70%) rotate(45deg);pointer-events:none}
input[type=checkbox]{width:1.15rem;height:1.15rem;accent-color:var(--acc);margin:0;vertical-align:middle;cursor:pointer}
.field{margin:0 0 1rem}
.grid{display:grid;gap:.9rem 1rem;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr))}
.grid .field{margin:0}
.actions{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin-top:1.1rem}
.btn,button{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;min-height:2.75rem;padding:.55rem 1.1rem;border:1px solid var(--bd2);border-radius:var(--rs);background:var(--bg3);color:var(--fg);font-weight:600;cursor:pointer;text-decoration:none;white-space:nowrap;transition:background .12s,border-color .12s,color .12s;-webkit-tap-highlight-color:transparent}
.btn:hover,button:hover{background:#28282b;border-color:#4a4a4f;color:var(--fg);text-decoration:none}
.btn:focus-visible,button:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.primary{background:var(--acc);border-color:var(--acc);color:#0e0e0f}.primary small{font-size:.85em;font-weight:500;opacity:.7}.primary:hover{background:var(--acc2);border-color:var(--acc2);color:#0e0e0f}
.danger{background:transparent;border-color:#5c2a26;color:var(--err)}.danger:hover{background:var(--errbg);border-color:var(--err);color:var(--err)}
.btn.big{width:100%;min-height:3.25rem;font-size:1.05rem}
.btn.sm,button.sm{min-height:2.2rem;padding:.3rem .75rem;font-size:.875rem;font-weight:500}
button.ok{border-color:#1f4a31;color:var(--ok)}
button.icon{min-height:2.2rem;width:2.2rem;padding:0;border-radius:8px;background:transparent}
button.icon.ok{background:var(--okbg)}
button.eye .i-hide,button.eye.on .i-show{display:none}button.eye.on .i-hide{display:inline}
button.icon svg,.secretbox .copy button.icon svg{margin:0}button.icon.bad{border-color:#5c2a26;color:var(--err)}
.cps{white-space:nowrap}.cps button+button,.cps form{margin-left:.35rem}
form.inline{display:inline}
.jsonly{display:none}.js .jsonly{display:inline-flex}

/* drop zone (the file input itself; JS widens the target on admin pages) */
.drop{display:block;border:2px dashed var(--bd2);border-radius:var(--r);background:var(--bg);padding:1.5rem 1rem;text-align:center;cursor:pointer;transition:border-color .12s,background .12s;font-weight:400;color:var(--fg);font-size:1rem}
.drop:hover,.drop:focus-within,.drop.over{border-color:var(--acc);background:var(--accbg)}
.drop .t{display:block;font-weight:600;margin-bottom:.15rem}
.drop .s{display:block;color:var(--mut);font-size:.875rem}
.drop input[type=file]{display:block;margin:.9rem auto 0;max-width:100%;color:var(--mut);font-size:.9rem}
.drop input[type=file]::file-selector-button{font:inherit;font-weight:600;color:var(--fg);background:var(--bg3);border:1px solid var(--bd2);border-radius:var(--rs);padding:.45rem .9rem;margin-right:.75rem;cursor:pointer}
.js .drop.has input[type=file]{color:transparent}
.picked{list-style:none;margin:.75rem 0 0;padding:0;text-align:left;font-size:.9rem;display:none}
.drop.has .picked{display:block}
.picked li{display:flex;justify-content:space-between;gap:1rem;padding:.3rem .5rem;border-top:1px solid var(--bd);overflow-wrap:anywhere}
.picked li:first-child{border-top:0}
.picked li span{color:var(--mut);white-space:nowrap}
.sum{display:block;margin-top:.5rem;color:var(--acc);font-weight:600}

/* secrets (created page) */
.secretbox{position:relative;background:var(--bg);border:1px solid var(--bd2);border-radius:var(--rs);padding:.85rem 1rem;margin:.35rem 0 1rem}
.secret{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:1.02rem;line-height:1.5;margin:0;word-break:break-all;user-select:all;-webkit-user-select:all}
.secretbox .copy{margin-top:.65rem;display:inline-flex;gap:.4rem}
/* a link is always 49 characters (https://shrd.bserved.de/s/ + 22): keep it on one line and
   size the monospace font to the box (0.6em per character + a little slack), never above normal */
.secretbox{container-type:inline-size}
.js [data-copy-self]{cursor:copy}
.secretbox.copied{border-color:var(--ok);box-shadow:0 0 0 3px var(--okbg)}.secretbox.copyfail{border-color:var(--err)}
.secretbox .copy button.icon,.secretbox>button.icon{width:2.2rem}
.secret.oneline{white-space:nowrap;word-break:normal;overflow:hidden;text-overflow:clip;font-size:min(1.02rem,3.2cqi)}
.js .secret.hid{filter:blur(7px);user-select:none;-webkit-user-select:none}
@media(min-width:40rem){.secretbox{padding-right:7rem}.secretbox .copy{position:absolute;top:.6rem;right:.6rem;margin:0}}

/* file list (public share) */
.files{list-style:none;margin:0 0 1rem;padding:0;border:1px solid var(--bd);border-radius:var(--r);background:var(--bg2);overflow:hidden}
.files li+li{border-top:1px solid var(--bd)}
.file{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:.9rem;padding:.8rem 1rem;color:var(--fg);min-height:3.5rem}
.file:hover{background:var(--bg3);text-decoration:none;color:var(--fg)}
.file .fn{overflow-wrap:anywhere;font-weight:500}
.file .sz{color:var(--mut);font-size:.9rem;white-space:nowrap}
.file .dl{color:var(--acc);font-weight:600;font-size:.9rem}
.ext{display:inline-flex;align-items:center;justify-content:center;min-width:2.8rem;height:1.6rem;padding:0 .4rem;border-radius:6px;background:var(--accbg);color:var(--acc2);font-size:.68rem;font-weight:700;letter-spacing:.06em;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.th{position:relative;display:block;width:2.8rem;height:2.8rem;border-radius:6px;overflow:hidden;background:var(--bg3)}
.th .ext{position:absolute;inset:0;min-width:0;height:auto;border-radius:0}
.th img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* gallery / list switch (radio + label: the public pages run no script) */
.vsw{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.views{display:inline-flex;margin:0 0 .75rem;border:1px solid var(--bd2);border-radius:var(--rs);overflow:hidden}
.views label{display:flex;align-items:center;min-height:2.4rem;margin:0;padding:.35rem 1rem;font-size:.875rem;color:var(--mut);cursor:pointer;-webkit-tap-highlight-color:transparent}
.views label+label{border-left:1px solid var(--bd2)}
.views label:hover{color:var(--fg);background:var(--bg3)}
#vg:checked~.views label[for=vg],#vl:checked~.views label[for=vl]{color:var(--acc2);background:var(--accbg)}
#vg:focus-visible~.views label[for=vg],#vl:focus-visible~.views label[for=vl]{outline:2px solid var(--acc);outline-offset:-2px}
#vg:checked~.files{display:grid;grid-template-columns:repeat(auto-fill,minmax(10rem,1fr));gap:.75rem;border:0;background:none;overflow:visible}
#vg:checked~.files li{border:1px solid var(--bd);border-radius:var(--r);background:var(--bg2);overflow:hidden}
#vg:checked~.files .file{display:flex;flex-direction:column;align-items:stretch;gap:.1rem;height:100%;padding:0 0 .65rem}
#vg:checked~.files .th,#vg:checked~.files .file>.ext{display:flex;width:100%;height:auto;aspect-ratio:1;margin:0 0 .45rem;border-radius:0}
#vg:checked~.files .ext{font-size:.95rem}
#vg:checked~.files .fn{padding:0 .75rem;font-size:.9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#vg:checked~.files .sz{padding:0 .75rem;font-size:.8rem}
#vg:checked~.files .dl{display:none}

/* selection: checkboxes belong to form#self (POST /s/<tok>/zip); count by CSS counter, Clear is a form
   reset; the share page's pinned script adds press-and-hold in the gallery (html.selecting while ticked) */
body.pub main{counter-reset:sel}
input.pk:checked{counter-increment:sel}
.selcount::before{content:counter(sel) " "}
.zipnote{margin:-.2rem 0 .9rem}
.hint{display:none;margin:-.35rem 0 .7rem}
.js #vg:checked~.hint{display:block}
.files li{position:relative}
.pick{display:flex;align-items:center;margin:0;padding:0 0 0 1rem;cursor:pointer}
.pick input{appearance:none;-webkit-appearance:none;position:relative;flex:0 0 auto;width:1.45rem;height:1.45rem;margin:0;border:2px solid var(--bd2);border-radius:7px;background:var(--bg);cursor:pointer;transition:background .12s,border-color .12s}
.pick input:hover{border-color:var(--acc)}
.pick input:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.pick input:checked{background:var(--acc);border-color:var(--acc)}
.pick input:checked::after{content:"";position:absolute;left:.4rem;top:.15rem;width:.32rem;height:.65rem;border:solid #141414;border-width:0 .17rem .17rem 0;transform:rotate(45deg)}
#vl:checked~.files li{display:flex;align-items:stretch;transition:background .12s}
#vl:checked~.files li:hover,#vl:checked~.files li:has(input.pk:checked){background:var(--bg3)}
#vl:checked~.files li .file:hover{background:transparent}
#vl:checked~.files .pick{padding:0 .2rem 0 1rem;align-self:stretch}
#vl:checked~.files li .file{flex:1;min-width:0}
#vg:checked~.files .pick{position:absolute;top:.5rem;left:.5rem;z-index:2;padding:.35rem;border-radius:999px;background:rgba(14,14,15,.75)}
#vg:checked~.files .pick input{width:1.5rem;height:1.5rem}
#vg:checked~.files li:has(input.pk:checked){outline:2px solid var(--acc);outline-offset:-1px}
.selecting #vg:checked~.files .file{-webkit-user-select:none;user-select:none}
#vg:checked~.files .file{-webkit-touch-callout:none}
.selbar{display:none;position:fixed;left:50%;bottom:calc(1rem + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:15;align-items:center;gap:.6rem;padding:.55rem .6rem .55rem 1.1rem;max-width:calc(100% - 1.5rem);background:var(--bg2);border:1px solid var(--bd2);border-radius:999px;box-shadow:0 8px 30px rgba(0,0,0,.5);white-space:nowrap}
main:has(input.pk:checked) .selbar{display:flex}
.selbar .selcount{font-weight:600;margin-right:.2rem}
.selbar .clr svg{display:none}
.selbar button{min-height:2.5rem;border-radius:999px}
body.pub main:has(input.pk:checked){padding-bottom:6rem}

/* image viewer, no script: one horizontal scroll-snap strip of slides, so
   phones swipe natively; tile -> #vN opens it at slide N (fragment scroll),
   prev/next -> #vN±1, close -> #x (no such id: no page scroll). The page
   behind is locked while a slide is the target. */
.viewer{display:none;position:fixed;inset:0;z-index:20;background:#080808}
.viewer:has(.vslide:target){display:block}
html:has(.vslide:target),html:has(.vslide:target) body{overflow:hidden}
.vstrip{display:flex;width:100%;height:100%;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior:contain;scrollbar-width:none;touch-action:pan-x pinch-zoom}
.vstrip::-webkit-scrollbar{display:none}
.vslide{position:relative;flex:0 0 100%;height:100%;scroll-snap-align:center;scroll-snap-stop:always}
.vstage{position:absolute;inset:3.5rem .5rem .75rem}
.vstage img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;-webkit-user-drag:none;user-select:none;-webkit-touch-callout:none}
.vbar{position:absolute;top:0;left:0;right:0;height:3.5rem;display:flex;align-items:center;gap:.75rem;padding:0 .5rem 0 1rem}
.vname{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.vpos{color:var(--mut);font-size:.875rem;font-variant-numeric:tabular-nums;white-space:nowrap}
.vbtn{display:flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;border-radius:999px;color:var(--fg)}
.vbtn:hover,.vbtn:focus-visible{background:var(--bg3);color:var(--fg);text-decoration:none}
.vnav{position:absolute;top:3.5rem;bottom:0;width:22%;max-width:9rem;display:flex;align-items:center;color:var(--fg);-webkit-tap-highlight-color:transparent}
.vprev{left:0;justify-content:flex-start;padding-left:.75rem}.vnext{right:0;justify-content:flex-end;padding-right:.75rem}
.vnav span{display:flex;align-items:center;justify-content:center;width:2.9rem;height:2.9rem;border-radius:999px;background:rgba(23,23,24,.7);border:1px solid var(--bd2)}
.vnav:hover span,.vnav:focus-visible span{background:var(--bg3);border-color:var(--acc)}
.vnav:hover{text-decoration:none}
@media(hover:none) and (pointer:coarse){.vnav{display:none}}

/* tables (admin) */
.tbl{width:100%;border-collapse:collapse;background:var(--bg2);border:1px solid var(--bd);border-radius:var(--r);overflow:hidden;margin:0 0 1rem}
.tbl th{font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--mut);font-weight:600;text-align:left;padding:.65rem .9rem;background:var(--bg3);border-bottom:1px solid var(--bd)}
.tbl td{padding:.7rem .9rem;border-bottom:1px solid var(--bd);vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr:hover td{background:var(--bg3)}.tbl tr.go{cursor:pointer}
.tbl .n{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.tbl .name{overflow-wrap:anywhere;font-weight:500}
.tbl .empty td{color:var(--mut);text-align:center;padding:1.25rem}
.pill{display:inline-block;padding:.1rem .55rem;border-radius:999px;font-size:.75rem;font-weight:600;letter-spacing:.03em;border:1px solid var(--bd2);color:var(--mut);background:var(--bg3);white-space:nowrap;vertical-align:middle}
.pill.active{color:var(--ok);border-color:#1f4a31;background:var(--okbg)}
.pill.revoked,.pill.corrupt{color:var(--err);border-color:#5c2a26;background:var(--errbg)}
.pill.expired,.pill.unavailable{color:var(--mut)}
.pill.lock{color:var(--acc2);border-color:#5a4520;background:var(--accbg)}
.lk{display:inline-flex;vertical-align:-.12rem;margin-left:.4rem;color:var(--mut)}
.lock::before{content:"\25CF";font-size:.6rem;margin-right:.3rem;vertical-align:.1rem}

/* admin nav + sections */
.nav{position:sticky;top:0;z-index:5;background:rgba(14,14,15,.9);backdrop-filter:blur(8px);border-bottom:1px solid var(--bd)}
.nav .in{max-width:80rem;margin:0 auto;padding:0 1rem;display:flex;align-items:center;gap:.25rem;min-height:3.4rem}
.nav .links{display:flex;gap:.25rem;overflow-x:auto;scrollbar-width:none}
.nav .links::-webkit-scrollbar{display:none}
.nav .brand{font-weight:700;letter-spacing:-.01em;color:var(--fg);margin-right:.75rem;white-space:nowrap;display:flex;align-items:center;gap:.5rem}
.nav .brand .logo{width:1.4rem;height:1.4rem}
.nav a.l{color:var(--mut);padding:.45rem .7rem;border-radius:8px;white-space:nowrap;font-weight:500}
.nav .ic{display:none}
.nav a.l:hover,.nav a.l.on{color:var(--fg);background:var(--bg3);text-decoration:none}
.navr{margin-left:auto;display:flex;align-items:center;gap:.4rem}.nav .navr form{margin:0}
.nav .svc{display:flex;align-items:center;justify-content:center;width:2.2rem;height:2.2rem;border-radius:8px;color:var(--err);border:1px solid #5c2a26}
.nav .svc:hover,.nav .svc.on{background:var(--errbg);color:var(--err);text-decoration:none}
.nav button{min-height:2.2rem;padding:.3rem .8rem;font-size:.875rem;font-weight:500;background:transparent}
.sec{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:1.6rem 0 .6rem}
.sec h2{font-size:1.15rem}
.stats{display:grid;gap:.75rem;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));margin:0 0 1rem}
.stat{background:var(--bg2);border:1px solid var(--bd);border-radius:var(--r);padding:.85rem 1rem}
.stat .k{font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--mut);font-weight:600}
.stat .v{font-size:1.25rem;font-weight:650;margin:.15rem 0 .4rem;font-variant-numeric:tabular-nums}
.stat .v small{font-size:.85rem;font-weight:500;color:var(--mut)}
progress.bar{display:block;appearance:none;-webkit-appearance:none;width:100%;height:.4rem;border:0;border-radius:999px;background:var(--bg3);overflow:hidden;color:var(--acc)}
progress.bar::-webkit-progress-bar{background:var(--bg3);border-radius:999px}
progress.bar::-webkit-progress-value{background:var(--acc);border-radius:999px}
progress.bar::-moz-progress-bar{background:var(--acc);border-radius:999px}
progress.bar.hot{color:var(--warn)}progress.bar.hot::-webkit-progress-value{background:var(--warn)}progress.bar.hot::-moz-progress-bar{background:var(--warn)}
.dl{display:grid;grid-template-columns:max-content 1fr;gap:.35rem 1.25rem;margin:0 0 1rem;font-size:.95rem}
.dl dt{color:var(--mut);margin:0}.dl dd{margin:0;overflow-wrap:anywhere}
.danger-zone{border-color:#4a2320}
.grid.row1{grid-template-columns:minmax(8rem,1fr) auto minmax(8rem,1fr) auto}
.js .nojs{display:none}.js .grid.row1{grid-template-columns:1fr 1fr}
button.linkish{min-height:0;padding:0;border:0;background:none;color:var(--acc);font-weight:500;font-size:inherit}button.linkish:hover{background:none;text-decoration:underline;color:var(--acc2)}
.secretbox .copy button svg,.card p button svg{margin-right:.15rem}
.acts{border:1px solid var(--bd);border-radius:var(--r);background:var(--bg2);overflow:hidden;margin:0 0 1rem}
.act{display:flex;align-items:center;justify-content:space-between;gap:1.25rem;padding:.95rem 1.15rem}
.act+.act{border-top:1px solid var(--bd)}
.act h3{font-size:1rem;font-weight:600;margin:0 0 .2rem}
.act p{color:var(--mut);font-size:.875rem;margin:0;max-width:40rem}
.act form{flex:0 0 auto}
.act button{min-width:11rem}
.act.stop{background:#1b1313}
.act.stop h3{color:var(--err)}

/* utilities (the CSP forbids inline style attributes) */
.mt0{margin-top:0}.mb0{margin-bottom:0}.m0{margin:0}.mt{margin-top:1rem}.blk{display:block;margin-top:.6rem}.opt{font-weight:400}.dim{opacity:.75}.grid.end{align-items:end}.inh1{vertical-align:middle;font-size:.8rem}

/* mobile */
@media(max-width:40rem){
 main{padding:1rem .9rem 2.5rem}
 h1{font-size:1.45rem}
 .btn,button{min-height:2.9rem}
 .actions .btn,.actions button{flex:1 1 auto}
 body.admin main{padding-bottom:calc(4.6rem + env(safe-area-inset-bottom))}
 .nav{backdrop-filter:none;background:var(--bg)} /* a filter would make the nav the containing block of the fixed tab bar */
 .nav .in{padding:.3rem .9rem;min-height:3rem}
 .nav .brand{flex:1}
 .nav form button{min-height:2.2rem}
 .nav .links{position:fixed;left:0;right:0;bottom:0;z-index:6;display:grid;grid-template-columns:repeat(4,1fr);gap:0;overflow:visible;background:rgba(16,16,17,.96);backdrop-filter:blur(10px);border-top:1px solid var(--bd);padding:.3rem .25rem calc(.3rem + env(safe-area-inset-bottom))}
 .nav a.l{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.1rem;padding:.35rem .2rem;font-size:.7rem;font-weight:500;border-radius:10px;min-height:3.1rem;white-space:nowrap}
 .nav a.l.on{background:transparent;color:var(--acc2)}
 .nav .ic{display:block;font-size:1.3rem;line-height:1.1}
 .nav a.l.on .ic{background:var(--accbg);border-radius:999px;padding:.05rem .75rem}
 .meta{flex-direction:column;gap:.15rem}.meta span+span::before{content:none}
 body.admin .meta{flex-direction:row;gap:.15rem .55rem}body.admin .meta span+span::before{content:"·";margin-right:.55rem}
 .file{grid-template-columns:auto 1fr auto;gap:.7rem;padding:.75rem .85rem}
 .file .dl{display:none}
 #vg:checked~.files{grid-template-columns:repeat(auto-fill,minmax(9rem,1fr));gap:.6rem}
 .tbl,.tbl tbody,.tbl tr{display:block}
 .tbl thead{display:none}
 .tbl tr{padding:.6rem .9rem;border-bottom:1px solid var(--bd)}
 .tbl tr:last-child{border-bottom:0}
 .tbl td{display:flex;justify-content:space-between;gap:1rem;padding:.2rem 0;border:0;text-align:left}
 .tbl td.n{text-align:right}
 .tbl td.cps{justify-content:flex-start;gap:.35rem;padding-top:.45rem}.cps button+button,.cps form{margin-left:0}
 .tbl td[data-l]::before{content:attr(data-l);color:var(--mut);font-size:.8rem;flex:0 0 auto}
 .tbl td.name{display:block;font-size:1.02rem;padding-bottom:.35rem}
 .tbl td.chk{display:block;padding-bottom:.35rem}
 .tbl .empty td{justify-content:center}
 .dl{grid-template-columns:1fr;gap:.1rem}
 .act{flex-direction:column;align-items:stretch;gap:.75rem;padding:.9rem}
 .act button{width:100%}
 .selbar{left:.6rem;right:.6rem;transform:none;max-width:none;justify-content:space-between;gap:.4rem;padding:.4rem .4rem .4rem .9rem;white-space:normal}.selbar button{padding:.35rem .8rem;font-size:.9rem;min-height:2.4rem}.selbar .selcount{margin-right:auto;white-space:nowrap}
 .selbar .w{display:none}.selbar .selcount::before{content:counter(sel)}.selbar .clr{width:2.4rem;padding:0;flex:0 0 auto}.selbar .clr svg{display:block;width:18px;height:18px}.selbar .primary{white-space:normal;line-height:1.15;text-align:center;flex:0 1 auto}
 .secretbox{padding:.75rem .7rem}
 .grid.row1{grid-template-columns:1fr auto}.js .grid.row1{grid-template-columns:1fr}
 .dl dt{margin-top:.5rem;font-size:.8rem;text-transform:uppercase;letter-spacing:.05em}
}