/* Layout: qBittorrent-desktop frame. Toolbar, server strip, sidebar | table over a resizable detail pane, status bar. */
:root{
  --bg:#e9edf2; --panel:#fbfcfd; --panel2:#f2f4f7; --fg:#151a21; --muted:#596473; --faint:#8a94a3;
  --line:#d6dce4; --line2:#e6eaef; --accent:#2a63c9; --on-accent:#ffffff; --sel:#d6e3f9; --sel-fg:#0e2852; --hover:#edf2f9;
  --dl:#2a78d6; --up:#eb6834; --home:#1baf7a; --track:#e1e6ed;
  --good:#0c8a0c; --warn:#c48a00; --crit:#d03b3b; --on-crit:#ffffff; --violet:#6250d6;
  --f-ui:system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --f-cond:system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-mono:ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0c1015; --panel:#151a21; --panel2:#1b2129; --fg:#e4e9ef; --muted:#9aa5b4; --faint:#6b7586;
  --line:#2b323d; --line2:#222832; --accent:#5b93ec; --on-accent:#0b1526; --sel:#1e3860; --sel-fg:#e8effc; --hover:#1c2530;
  --dl:#3987e5; --up:#d95926; --home:#199e70; --track:#262d39;
  --good:#3fb950; --warn:#e3a008; --crit:#f06363; --on-crit:#1d0606; --violet:#9085e9; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0c1015; --panel:#151a21; --panel2:#1b2129; --fg:#e4e9ef; --muted:#9aa5b4; --faint:#6b7586;
  --line:#2b323d; --line2:#222832; --accent:#5b93ec; --on-accent:#0b1526; --sel:#1e3860; --sel-fg:#e8effc; --hover:#1c2530;
  --dl:#3987e5; --up:#d95926; --home:#199e70; --track:#262d39;
  --good:#3fb950; --warn:#e3a008; --crit:#f06363; --on-crit:#1d0606; --violet:#9085e9; color-scheme:dark}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:12px/1.35 var(--f-ui);overflow:hidden;
  padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px)}
#app{height:100%;display:flex;flex-direction:column;overflow:hidden;background:var(--panel)}
#pages{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.page{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}.page>.body{flex:1 1 auto}
[hidden]{display:none!important}
button,select,input,textarea{font:inherit;color:inherit}
button{background:var(--panel);border:1px solid var(--line);border-radius:4px;padding:0 8px;height:24px;cursor:pointer;white-space:nowrap}
button:hover{background:var(--hover)}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
button.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
button.danger-solid{background:var(--crit);border-color:var(--crit);color:var(--on-crit)}
button.sm{height:19px;padding:0 6px;font-size:11px}
input,select,textarea{background:var(--panel);border:1px solid var(--line);border-radius:4px;padding:0 6px;height:24px;min-width:0}
textarea{height:auto;padding:5px 7px;resize:vertical;font:11.5px/1.45 var(--f-mono)}
input[type=checkbox]{height:auto;margin:0 4px 0 0;vertical-align:-2px;accent-color:var(--accent)}
.dim{color:var(--muted)} .mono{font-family:var(--f-mono);font-size:11px}
/* toolbar */
.tb{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:5px 8px;border-bottom:1px solid var(--line);background:var(--panel2)}
.brand{font:600 14px var(--f-cond);letter-spacing:.01em}
.mock{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);border:1px dashed var(--faint);border-radius:3px;padding:1px 5px}
.grp{display:flex}.grp button{border-radius:0;margin-left:-1px}.grp button:first-child{border-radius:4px 0 0 4px;margin-left:0}.grp button:last-child{border-radius:0 4px 4px 0}
.g{display:inline-block;width:12px;text-align:center;color:var(--muted)}
#filter{flex:1 1 150px;max-width:300px}
.units{display:flex;gap:4px;margin-left:auto;align-items:center}
/* server strip */
.strip{display:flex;gap:4px;overflow-x:auto;padding:3px 8px;border-bottom:1px solid var(--line);white-space:nowrap;scrollbar-width:none}
.chip{display:inline-flex;align-items:center;gap:5px;padding:1px 8px;border-radius:10px;background:var(--panel2);border:1px solid var(--line2);font-size:11px;cursor:default}
.chip b{font-weight:600}
.dot{width:7px;height:7px;border-radius:50%;background:var(--good);flex:none}.chip.warn .dot{background:var(--warn)}.chip.err .dot{background:var(--crit)}
/* body */
.body{display:grid;grid-template-columns:204px minmax(0,1fr);min-height:0}
.body.noside{grid-template-columns:minmax(0,1fr)}.body.noside aside{display:none}
aside{border-right:1px solid var(--line);overflow:auto;background:var(--panel2);padding:4px 0 10px}
.sg h3{margin:9px 10px 2px;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);display:flex;justify-content:space-between;align-items:center}
.sg ul{list-style:none;margin:0;padding:0}
.sg li{display:flex;justify-content:space-between;gap:6px;padding:0 10px 0 14px;line-height:19px;cursor:pointer}
.sg li:hover{background:var(--hover)}.sg li.on{background:var(--sel);color:var(--sel-fg);font-weight:500}
.sg li .n{color:var(--muted);font-variant-numeric:tabular-nums}
.rng{display:flex;gap:2px}.rng button{height:17px;padding:0 4px;font-size:10px;border-radius:3px;letter-spacing:0;text-transform:none;font-weight:500}
.rng button.on{background:var(--sel);color:var(--sel-fg);border-color:var(--sel)}
.lg{display:flex;gap:9px;flex-wrap:wrap;font-size:11px;color:var(--muted);padding:1px 10px}
.lg span>i{display:inline-block;width:10px;height:2px;margin-right:4px;vertical-align:middle;background:var(--c)}
.lg span>i.dash{background:repeating-linear-gradient(90deg,var(--c) 0 3px,transparent 3px 5px)}
.ch{position:relative;padding:0 6px;min-width:0;overflow:hidden}.ch svg{display:block;overflow:visible;max-width:100%}
.gl{stroke:var(--line2);stroke-width:1}.ax{fill:var(--faint);font:10px var(--f-cond)}.xh{stroke:var(--muted);stroke-dasharray:2 2}
.xkv{display:grid;grid-template-columns:auto auto;gap:1px 8px;margin:6px 10px 0;font-variant-numeric:tabular-nums}
.xkv dt{color:var(--muted)}.xkv dd{margin:0;text-align:right}
/* table */
.main{display:grid;grid-template-rows:minmax(60px,1fr) 5px var(--dh,236px);min-height:0;min-width:0}
.tablewrap{overflow:auto;min-height:0;min-width:0}
table.t{border-collapse:separate;border-spacing:0;table-layout:fixed}
.t th{position:sticky;top:0;z-index:1;background:var(--panel2);border-bottom:1px solid var(--line);border-right:1px solid var(--line2);font-weight:500;text-align:left;padding:0 6px;height:22px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;user-select:none}
.t th:hover{background:var(--hover)}
.t .r{text-align:right}
.rz{position:absolute;right:0;top:0;width:6px;height:100%;cursor:col-resize}
#tbl tbody{font:12px var(--f-cond);font-variant-numeric:tabular-nums;user-select:none}
#tbl td{height:22px;padding:0 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-bottom:1px solid var(--line2)}
#tbl tbody tr{cursor:default}
#tbl tbody tr:hover td{background:var(--hover)}
#tbl tr.sel td{background:var(--sel);color:var(--sel-fg)}
#tbl tr.foc td:first-child{box-shadow:inset 2px 0 var(--accent)}
#tbl td.c-name{font-weight:500}
td.empty{color:var(--muted);text-align:center;height:60px!important}
.pb{position:relative;height:15px;background:var(--track);border-radius:2px;overflow:hidden}
.pb i{position:absolute;left:0;top:0;bottom:0;background:color-mix(in srgb,var(--dl) 62%,transparent)}
.pb.done i{background:color-mix(in srgb,var(--good) 50%,transparent)}
.pb span{position:relative;display:block;text-align:center;font-size:11px;line-height:15px}
.st{display:inline-flex;align-items:center;gap:5px}.st i{width:7px;height:7px;border-radius:50%;background:var(--c);flex:none}
.st-dl{--c:var(--dl)}.st-seed{--c:var(--good)}.st-warn{--c:var(--warn)}.st-err{--c:var(--crit)}.st-check{--c:var(--violet)}.st-muted{--c:var(--faint)}
.tag{display:inline-block;padding:0 5px;margin-right:3px;border-radius:3px;background:var(--panel2);border:1px solid var(--line);font-size:11px;line-height:15px}
.play{color:var(--accent);text-decoration:none;font-weight:500}.play:hover{text-decoration:underline}
/* detail pane */
.split{cursor:row-resize;background:var(--panel2);border-block:1px solid var(--line)}
.detail{display:grid;grid-template-rows:auto minmax(0,1fr);min-height:0;min-width:0}
.tabs{display:flex;border-bottom:1px solid var(--line);background:var(--panel2);overflow-x:auto;scrollbar-width:none}
.tabs button{border:0;border-radius:0;background:none;padding:0 11px;border-bottom:2px solid transparent}
.tabs button.on{border-bottom-color:var(--accent);font-weight:500}
.dbody{overflow:auto;padding:8px 10px;min-width:0}
.gen{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:14px}
.kv{display:grid;grid-template-columns:repeat(auto-fill,minmax(205px,1fr));gap:0 18px;margin:6px 0 0;font-variant-numeric:tabular-nums}
.kv div{display:flex;justify-content:space-between;gap:8px;border-bottom:1px dotted var(--line);line-height:19px;min-width:0}
.kv dt{color:var(--muted);flex:none}.kv dd{margin:0;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pcs{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px;align-items:center}
canvas.pieces{width:100%;height:12px;display:block;border-radius:2px}
h4{margin:10px 0 4px;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.opts{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center}
.opts input[type=number]{width:70px;height:21px}.opts select{height:21px}
.box{border:1px solid var(--line);border-radius:5px;padding:4px 9px 8px;background:var(--panel2);display:grid;gap:4px;align-content:start}
.box h4{margin:4px 0 0}
.srow{line-height:18px}
.newer{border-left:3px solid var(--accent);padding:2px 7px;background:color-mix(in srgb,var(--accent) 8%,transparent)}
.st2 td,.st2 th{height:20px;padding:0 6px;border-bottom:1px solid var(--line2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.st2{border-collapse:collapse;width:100%;font:12px var(--f-cond)}.st2 th{position:static;text-align:left;font-weight:500;color:var(--muted);background:none;cursor:default}
.st2 select{height:19px;font-size:11px}
.gen2{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:16px}
/* status bar */
.sb{display:flex;gap:16px;align-items:center;padding:3px 10px;border-top:1px solid var(--line);background:var(--panel2);white-space:nowrap;overflow-x:auto;font-variant-numeric:tabular-nums;font-size:11.5px;scrollbar-width:none}
.sb b{font-weight:600}
/* menu, toasts, tooltip */
.menu{position:fixed;z-index:50;min-width:210px;background:var(--panel);border:1px solid var(--line);border-radius:6px;box-shadow:0 8px 28px rgb(0 0 0 / .22);padding:4px 0}
.mi{display:flex;align-items:center;gap:4px;padding:2px 10px 2px 4px;line-height:19px;position:relative;cursor:default;white-space:nowrap}
.mi:hover{background:var(--sel);color:var(--sel-fg)}.mi .ck{width:16px;text-align:center;flex:none}
.mi .kb{margin-left:auto;padding-left:18px;color:var(--muted);font-size:11px}
.mi.dis{opacity:.45;pointer-events:none}.mi.has::after{content:"›";margin-left:auto;padding-left:14px;color:var(--muted)}
.mi.danger{color:var(--crit)}
.mi>.sub{display:none;position:absolute;left:100%;top:-5px}.mi:hover>.sub{display:block}
.menu.flip .sub{left:auto;right:100%}
.menu hr{border:0;border-top:1px solid var(--line2);margin:4px 0}
#toasts{position:fixed;z-index:60;right:max(24px,calc(env(safe-area-inset-right,0px) + 16px));bottom:calc(48px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:6px;align-items:flex-end;max-width:min(440px,calc(100vw - 48px))}
.toast{background:var(--fg);color:var(--bg);padding:6px 11px;border-radius:5px;box-shadow:0 4px 16px rgb(0 0 0 / .25)}
.toast.err{background:var(--crit);color:var(--on-crit)}.toast .pend{opacity:.72}
.tip{position:fixed;z-index:80;pointer-events:none;background:var(--panel);border:1px solid var(--line);border-radius:5px;padding:4px 8px;font-size:11px;box-shadow:0 4px 14px rgb(0 0 0 / .18);font-variant-numeric:tabular-nums;white-space:nowrap}
.tip i{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:5px;background:var(--c)}
#drop{position:fixed;inset:0;z-index:70;display:grid;place-items:center;background:color-mix(in srgb,var(--accent) 16%,transparent);border:3px dashed var(--accent);font:600 18px var(--f-cond);color:var(--fg)}
/* dialogs */
dialog{border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--fg);padding:0;width:min(640px,calc(100vw - 32px));box-shadow:0 18px 50px rgb(0 0 0 / .3)}
dialog.wide{width:min(860px,calc(100vw - 32px))}
dialog::backdrop{background:rgb(0 0 0 / .38)}
dialog header{display:flex;align-items:center;gap:12px;padding:9px 14px;border-bottom:1px solid var(--line);font-weight:600;font-size:13px}
dialog header input{margin-left:auto;font-weight:400;width:220px}
.db{padding:10px 14px;display:grid;gap:8px;max-height:70vh;overflow:auto}
dialog footer{display:flex;align-items:center;justify-content:flex-end;gap:6px;padding:8px 14px;border-top:1px solid var(--line);background:var(--panel2)}
.fill{flex:1}
.fld{display:grid;gap:2px;color:var(--muted);font-size:11px}.fld input,.fld select{color:var(--fg);font-size:12px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.checks{display:flex;flex-wrap:wrap;gap:4px 16px}
.files{border:1px solid var(--line);border-radius:4px;max-height:170px;overflow:auto}
.warnbox{border:1px solid var(--warn);border-left-width:4px;background:color-mix(in srgb,var(--warn) 10%,transparent);padding:5px 8px;border-radius:4px}
.warnbox.crit{border-color:var(--crit);background:color-mix(in srgb,var(--crit) 10%,transparent)}
#addPlan{display:grid;gap:6px}#addPlan:empty{display:none}
.plan{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:2px 10px;align-items:baseline;font-variant-numeric:tabular-nums}
.plan>.k{color:var(--muted);font-size:11px}
.plan .path{font:11px var(--f-mono);overflow-wrap:anywhere}
.plantab .st2{table-layout:fixed}.plantab th:nth-child(2){width:56px}.plantab th:nth-child(3){width:72px}.plantab th:nth-child(4){width:38%}
.prefs{display:grid;grid-template-columns:150px minmax(0,1fr);height:min(64vh,540px)}
.pnav{border-right:1px solid var(--line);padding:6px 0;background:var(--panel2);overflow:auto}
.pnav a{display:block;padding:2px 12px;color:inherit;text-decoration:none;line-height:20px}.pnav a:hover{background:var(--hover)}
.plist{overflow:auto;padding:2px 14px 10px}
.prow{display:grid;grid-template-columns:minmax(0,1fr) 210px;gap:10px;align-items:center;padding:3px 0;border-bottom:1px dotted var(--line)}
.prow .k{font-family:var(--f-mono);font-size:10.5px;color:var(--faint)}
.prow.chg .lab::before{content:"●";color:var(--accent);font-size:8px;margin-right:5px;vertical-align:2px}
.prow.dirty{background:color-mix(in srgb,var(--accent) 9%,transparent)}
.prow input:not([type=checkbox]),.prow select{width:100%}
.legendkey{font-size:11px;color:var(--muted);display:flex;gap:12px;margin:4px 0 6px}
@media (max-width:760px){
  .tb .t,.top .t,.sb .keys{display:none}.nav button{padding:0 8px}.units{margin-left:0}#filter{max-width:none}
  .gen,.gen2,.grid2{grid-template-columns:minmax(0,1fr)}
  .prefs{grid-template-columns:minmax(0,1fr)}.pnav{display:none}.prow{grid-template-columns:minmax(0,1fr)}
  dialog header input{width:140px}
}

/* app additions */
.nomargin{margin:0}.err{color:var(--crit)}
.chip.link{cursor:pointer}.chip.link:hover{border-color:var(--accent)}
.chip.off .dot{background:var(--faint)}
.banner{padding:4px 10px;border-bottom:1px solid var(--warn);background:color-mix(in srgb,var(--warn) 14%,transparent);font-weight:500}
.banner.err{border-color:var(--crit);background:color-mix(in srgb,var(--crit) 14%,transparent)}
.toast button{margin-left:10px;height:20px;background:transparent;color:inherit;border-color:currentColor}
#login,#invite{height:100%;display:grid;place-items:center;padding:16px}
.loginbox{display:grid;gap:10px;width:min(320px,100%);padding:22px;border:1px solid var(--line);border-radius:8px;background:var(--panel)}
.loginbox h1{margin:0 0 4px;font-size:18px}.loginbox .fld input{height:30px}.loginbox button{height:30px}
.sched{width:100%;border-collapse:collapse}.sched td,.sched th{padding:3px 4px;border-bottom:1px solid var(--line2);text-align:left;font-weight:400}
.sched th{color:var(--muted);font-size:11px}.sched input[type=time]{width:92px}.sched input[type=number]{width:64px}.sched input.nm{width:120px}
.days{display:flex;gap:1px}.days label{display:inline-grid;place-items:center;width:20px;height:20px;border:1px solid var(--line);border-radius:3px;cursor:pointer;font-size:10px}
.days input{display:none}.days label:has(input:checked){background:var(--sel);color:var(--sel-fg);border-color:var(--accent)}
.quick{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.eff{padding:6px 9px;border-radius:5px;background:var(--panel2);border:1px solid var(--line)}
.sel-rect{outline:1px dashed var(--accent)}
/* owner feedback 10-17: no text selection while selecting, taller bars, file selection, speed sliders */
.tablewrap,#side,.strip,.sb,.tabs,.tb,.top,.files-t{-webkit-user-select:none;user-select:none}
.strip{padding:4px 10px;gap:6px;min-height:33px;align-items:center}
.chip{padding:3px 10px;font-size:12px;line-height:17px;border-radius:12px}
.chip .dot{width:8px;height:8px}
.sb{padding:6px 12px;font-size:12.5px;gap:18px;min-height:30px}
.row{display:flex;gap:6px;align-items:center}
button.danger{color:var(--crit)}
.fbar{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0 0 6px}
.files-t tbody tr{cursor:default}
.files-t tr.sel td{background:var(--sel);color:var(--sel-fg)}
.files-t tr.fdir td{background:var(--panel2);cursor:pointer}
.files-t tr.fdir.sel td{background:var(--sel)}
.files-t td.fname{padding-left:22px}
.files-t tr.skip td.fname{text-decoration:line-through;color:var(--muted)}
.files-t tr.ffoc td:first-child{box-shadow:inset 2px 0 var(--accent)}
.limbox{display:grid;gap:8px;padding:8px 10px;border:1px solid var(--line);border-radius:6px;background:var(--panel2)}
.limrow{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.limrow .lab{min-width:180px;display:inline-flex;align-items:center}
.limrow input[type=range]{flex:1 1 220px;min-width:120px;height:auto;padding:0;border:0;background:none;accent-color:var(--accent)}
.limrow input[type=number]{width:84px}
.hint{display:inline-grid;place-items:center;width:14px;height:14px;border-radius:50%;border:1px solid var(--faint);color:var(--muted);font-size:9px;cursor:help;vertical-align:1px}
/* popouts from the status strip */
.pop{position:fixed;z-index:55;width:min(460px,calc(100vw - 16px));max-height:min(72vh,600px);overflow:auto;background:var(--panel);border:1px solid var(--line);border-radius:8px;box-shadow:0 10px 32px rgb(0 0 0 / .25);padding:10px 12px;display:grid;gap:8px}
.pophead{display:flex;gap:10px;align-items:baseline;justify-content:space-between;flex-wrap:wrap}
.pophead b{font-size:13px}
.pophead a{color:var(--accent);text-decoration:none}
.pop .limrow .lab{min-width:150px}
.pop .quick{display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.pop .quick button{height:22px;padding:0 7px}
.popfoot{display:flex;justify-content:flex-end}
.small{font-size:11px;margin:0}
.xkv.wide{grid-template-columns:auto 1fr;margin:0}
.plist{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.plist li{display:flex;justify-content:space-between;gap:10px;padding:3px 0;border-bottom:1px dotted var(--line)}
.bars{width:100%;height:auto;display:block}
.bars rect{fill:var(--accent);opacity:.85}
.lights{display:grid;gap:6px}
.light{display:grid;grid-template-columns:minmax(0,1fr) 150px 70px;gap:8px;align-items:center}
.light.unavail{opacity:.5}
.light input[type=range]{width:100%;height:auto;padding:0;border:0;background:none;accent-color:var(--warn)}
.light .pct{text-align:right;font-variant-numeric:tabular-nums;color:var(--muted)}
.sw{display:inline-flex;align-items:center;gap:6px;min-width:0}
.sw span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.strip{position:relative}
.chip{touch-action:none}
.chip.dragging{cursor:grabbing;position:relative;z-index:2;box-shadow:0 4px 14px rgb(0 0 0 / .22);border-color:var(--accent)}
.hint.flag{border-color:var(--warn);color:var(--warn)}
.lname{all:unset;cursor:pointer;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lname:hover{text-decoration:underline}.lname:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}
.lname:disabled{cursor:default;text-decoration:none}
/* shared page shell (docs/DESIGN.md §7): top bar with the page tabs, then banner, strip and the current page */
.top{display:flex;align-items:center;gap:8px;padding:0 8px;min-height:32px;border-bottom:1px solid var(--line);background:var(--panel2)}
.top .brand{margin-right:4px}.top .fill{flex:1}.top .units{margin-left:0}
.nav{display:flex;align-self:stretch}
.nav button{height:auto;border:0;border-radius:0;background:transparent;padding:0 12px;color:var(--muted);font-weight:500;border-bottom:2px solid transparent}
.nav button:hover{background:var(--hover);color:var(--fg)}
.nav button.on{color:var(--fg);border-bottom-color:var(--accent)}
.pad{padding:12px}
/* the current page's own controls (status, Reload, Open in a new tab), filling the top bar between the tabs and the units */
.ptools{flex:1;min-width:0;display:flex;align-items:center;gap:10px;padding:0 6px;font-size:11px;white-space:nowrap;overflow:hidden}
.ptools>*{flex:1;min-width:0}
/* a page can step the shell aside: the Map page's "Map only" sets html.page-full while it is on screen (the strip goes;
   the top bar stays because it holds the page's controls) */
html.page-full #strip{display:none!important}
/* status marks: the disk ring (how full) takes the dot's colour rules */
.ring{width:14px;height:14px;flex:none;display:block}.ring+.ring{margin-left:2px}.ring circle{fill:none;stroke-width:3.2}.ring .t{stroke:var(--track)}.ring .v{stroke:var(--good)}
.chip.warn .ring .v,.ocard.warn .ring .v{stroke:var(--warn)}.chip.err .ring .v,.ocard.err .ring .v{stroke:var(--crit)}.chip.off .ring .v,.ocard.off .ring .v{stroke:var(--faint)}
/* phones and touch screens (M5, 10-18). Desktop first: everything above stays as it is on a wide screen with a mouse. */
.touchonly{display:none}
@media (max-width:760px),(pointer:coarse){.touchonly{display:inline-block}}
@media (max-width:760px){
  .top{flex-wrap:wrap;gap:4px;padding:0 4px}.top .brand{display:none}
  .nav{flex:1 1 auto;min-width:0;overflow-x:auto;scrollbar-width:none}
  .ptools{order:9;flex:1 0 100%;padding:4px;border-top:1px solid var(--line2)}.ptools:empty{display:none}
  .tb{padding:5px 6px}#filter{flex:1 1 100%;max-width:none}
  /* the sidebar opens over the list instead of squeezing it */
  .body{grid-template-columns:minmax(0,1fr);position:relative}
  .body aside{position:absolute;z-index:6;top:0;bottom:0;left:0;width:min(280px,86vw);box-shadow:0 8px 28px rgb(0 0 0 / .3)}
  .rz{display:none}
  .main{grid-template-rows:minmax(60px,1fr) 12px var(--dh,236px)}.split{touch-action:none}
  /* menus: submenus open in place (no room beside), long menus scroll */
  .menu{max-width:calc(100vw - 8px);overflow:auto}
  #menu{max-height:calc(100vh - 8px)}
  .mi{flex-wrap:wrap}.mi.has::after{content:none}.mi.has:hover{background:none;color:inherit}
  .mi>.sub,.mi:hover>.sub{display:block;position:static;flex-basis:100%;min-width:0;box-shadow:none;border:0;border-left:2px solid var(--line);border-radius:0;margin:1px 0 3px 16px;padding:0;max-height:none}
  .sb{gap:12px;padding:5px 8px}
}
@media (max-width:560px){.units{display:none}.light{grid-template-columns:minmax(0,1fr) 110px 52px}}
/* fingers: bigger targets, and 16px text in fields so iOS doesn't zoom in on focus */
@media (pointer:coarse){
  button{height:32px}button.sm{height:26px}.rng button{height:26px}
  input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea{font-size:16px!important}
  input:not([type=checkbox]):not([type=radio]):not([type=range]),select{height:32px!important}
  input[type=checkbox]{width:18px;height:18px}
  .chip{touch-action:pan-x;padding:5px 11px}
  .mi{line-height:30px}.sg li{line-height:32px}.nav button{padding:0 12px}
  #tbl td,.files-t td{height:34px}
}
/* phones: same density, larger type (owner 10-18: "a bit hard to read") */
@media (max-width:560px){
  body{font-size:13.5px}
  #tbl tbody,.st2{font-size:13.5px}
  .chip,.sb,.obody{font-size:13px}
  .pb{height:18px}.pb span{font-size:12px;line-height:18px}
  .tag,.lg,.fld,.mi .kb,.small,.mono,.ptools{font-size:12px}
  .ohead b{font-size:14.5px}
}
/* the shell's bars never shrink: a wrapped chip bar shrank under #pages and its chips spilled over the page (10-18) */
.top,.banner,.strip{flex:none}
/* phones: no chip bar at all (owner 10-18: "way too much"); the Overview cards carry the same information */
@media (max-width:760px){#strip{display:none!important}}
/* phones: the torrents page as cards with a detail sheet that slides up and can be hidden (owner 10-18, P1–P4) */
.pills,.cards,.sheethead,.selbar{display:none}
@media (max-width:760px){
  .tb>.grp:nth-of-type(2),.tb>.grp:nth-of-type(3),#moreBtn{display:none}
  .main{display:flex;flex-direction:column;min-height:0}
  #tw,#split{display:none}
  .pills{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:6px 8px 2px;flex:none}
  .pills button{border-radius:14px;height:30px;padding:0 12px;color:var(--muted)}
  .pills button.on{background:var(--sel);color:var(--sel-fg);border-color:var(--accent)}
  .cards{display:block;flex:1 1 auto;min-height:0;overflow:auto;padding:6px 8px 90px;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
  .card{background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:9px 10px;margin:0 0 6px;cursor:pointer}
  .card.sel{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,var(--panel2))}
  .card.pick{padding-left:34px;position:relative}
  .card.pick::before{content:"";position:absolute;left:10px;top:12px;width:16px;height:16px;border-radius:50%;border:1.5px solid var(--faint)}
  .card.pick.sel::before{background:var(--accent);border-color:var(--accent);box-shadow:inset 0 0 0 3px var(--panel2)}
  .cn{font-weight:500;font-size:14px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
  .cpb{height:4px;border-radius:2px;background:var(--track);margin:7px 0 6px;overflow:hidden}.cpb i{display:block;height:100%;background:var(--c)}
  .cm{display:flex;justify-content:space-between;gap:8px;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
  .cm span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cm span:last-child{flex:none}
  .cm i{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--c);margin-right:5px;vertical-align:1px}
  .cempty{text-align:center;padding:30px 0}
  /* the sheet: hidden below the screen until a card is tapped */
  .detail{position:fixed;left:0;right:0;bottom:0;z-index:40;height:min(80vh,680px);background:var(--panel);border:1px solid var(--line);border-bottom:0;
    border-radius:14px 14px 0 0;box-shadow:0 -8px 30px rgb(0 0 0 / .35);transform:translateY(105%);transition:transform .22s ease;
    grid-template-rows:auto auto minmax(0,1fr);padding-bottom:env(safe-area-inset-bottom,0px)}
  .detail.open{transform:none}
  .sheethead{display:block;position:relative;padding:2px 12px 8px;touch-action:none}
  .sheetgrip{display:flex;justify-content:center;padding:8px 0 6px;cursor:pointer}.sheetgrip i{width:40px;height:5px;border-radius:3px;background:var(--faint)}
  .sheetx{position:absolute;top:6px;right:8px;height:30px;width:30px;padding:0;border-radius:50%}
  .shbody .cn{padding-right:34px;font-size:15px}
  .sacts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:8px}.sacts button{height:36px;padding:0}
  .selbar{display:flex;position:fixed;left:8px;right:8px;bottom:calc(8px + env(safe-area-inset-bottom,0px));z-index:39;gap:6px;align-items:center;
    padding:8px 10px;background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:0 6px 24px rgb(0 0 0 / .35)}
  .selbar>span{flex:1}.selbar button{height:36px;min-width:40px}
  .selbar[hidden]{display:none!important}
}

/* accounts (DESIGN.md §8): buttons an account can't use are hidden (app.js applyAccess; the server refuses them anyway) */
#app.no-add .tb [data-act="add"], #app.no-add .tb [data-act="addfile"],
#app.no-manage .tb [data-act="start"], #app.no-manage .tb [data-act="stop"], #app.no-manage .tb [data-act="force"],
#app.no-manage .tb [data-act="recheck"], #app.no-manage .tb [data-act="qup"], #app.no-manage .tb [data-act="qdown"],
#app.no-manage [data-pa="start"], #app.no-manage [data-pa="stop"], #app.no-manage [data-pa="recheck"], #app.no-manage [data-fp],
#app.no-delete.no-deletefiles .tb [data-act="delete"], #app.no-delete.no-deletefiles [data-pa="delete"], #app.no-deletefiles [data-fdel],
#app.no-speed .tb [data-act="speed"], #app.not-owner [data-act="rescan"], #app.not-owner [data-act="replace"] {display:none}
#app.no-manage .tb .grp:has(> [data-act="qup"]) {display:none}
/* a link to hand over (Admin page invites): plain text in a box, selectable as a whole even where copying is blocked */
.linkrow{display:flex;gap:6px;align-items:stretch}
.linkbox{display:block;flex:1 1 auto;width:100%;height:auto;min-height:2.6em;padding:6px;font:12px/1.4 var(--f-mono);word-break:break-all;resize:none;user-select:all;-webkit-user-select:all}
.linkrow button{flex:none;height:auto;padding:0 14px}
@media (max-width:560px){.linkrow{flex-direction:column}.linkrow button{width:100%;height:36px}}