/* EchelonHD v2 — app shell: sidebar / content / rail. Warm neutral dark, one accent, Plex type. */
@font-face { font-family: "Plex Sans"; src: url(plex-sans-var.woff2) format("woff2"); font-weight: 100 700; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url(plex-mono-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url(plex-mono-500.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Bricolage"; src: url(bricolage-var.woff2) format("woff2"); font-weight: 200 800; font-display: swap; }

:root {
  --bg: #131315; --bg-sb: #0e0e10; --bg-rail: #101012;
  --surface: #19191c; --surface2: #1f1f23; --surface3: #26262b;
  --line: #27272c; --line2: #38383f;
  --text: #ebe9e4; --soft: #c9c7c1; --mut: #908e88; --dim: #66645f;
  --acc: #ff4f5e; --acc-soft: rgba(255, 79, 94, 0.13);
  --green: #4ade80; --red: #f87171; --amber: #fbbf24; --blue: #60a5fa;
  --sans: "Plex Sans", "Segoe UI", system-ui, sans-serif;
  --mono: "Plex Mono", ui-monospace, Consolas, monospace;
  --display: "Bricolage", var(--sans);
  --r: 6px; --r-lg: 10px;
  --sb-w: 236px; --rail-w: 320px;
}
* { box-sizing: border-box; }
html { background: var(--bg); color: var(--text); font: 14px/1.5 var(--sans); -webkit-text-size-adjust: 100%; font-feature-settings: "tnum"; }
body { margin: 0; min-height: 100vh; }
a { color: inherit; text-decoration: none; }
b, strong { font-weight: 600; color: #fff; }
h1, h2, h3 { margin: 0; line-height: 1.2; }
img { display: block; }
svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
code { font-family: var(--mono); font-size: 0.92em; }
.up { color: var(--green); } .down { color: var(--red); } .amber { color: var(--amber); } .mut { color: var(--mut); } .dim { color: var(--dim); }
::selection { background: var(--acc); color: #fff; }

/* ---- shell */
.shell { display: grid; grid-template-columns: var(--sb-w) minmax(0, 1fr); min-height: 100vh; }
.sb { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; background: var(--bg-sb); border-right: 1px solid var(--line); padding: 18px 14px 14px; overflow-y: auto; }
.sb__brand { display: flex; align-items: center; gap: 10px; padding: 2px 8px 18px; font-family: var(--display); font-size: 19px; font-weight: 700; letter-spacing: -0.01em; color: #fff; }
.sb__brand b { color: var(--acc); font-weight: 700; }
.sb__mark { width: 9px; height: 22px; border-radius: 2px; background: var(--acc); }
.sb__nav { display: flex; flex-direction: column; gap: 2px; }
.sb__nav a { display: flex; align-items: center; gap: 11px; height: 36px; padding: 0 10px; border-radius: var(--r); font-size: 13.5px; font-weight: 500; color: var(--soft); }
.sb__nav a svg { width: 17px; height: 17px; color: var(--mut); }
.sb__nav a:hover { background: var(--surface); color: #fff; }
.sb__nav a.is-on { background: var(--surface2); color: #fff; box-shadow: inset 2px 0 0 var(--acc); }
.sb__nav a.is-on svg { color: var(--acc); }
/* the site in four lines at the foot of the sidebar, in the same rows as the home page's Site card */
.sb__site { margin: auto 0 0; padding: 8px 4px 2px; border-top: 1px solid var(--line); font-size: 12px; }
.sb__site > div { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 6px 6px; border-bottom: 1px solid var(--line); }
.sb__site > div:last-child { border-bottom: 0; }
.sb__site dt { color: var(--mut); }
.sb__site dd { margin: 0; font-weight: 600; color: #fff; text-align: right; font-variant-numeric: tabular-nums; }
.sb__site dd.amber { color: var(--amber); }
.sb__me { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); }
.sb__who { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: var(--r); }
.sb__who:hover { background: var(--surface); }
.sb__who-t { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.sb__who-t b { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb__who-t small { font-size: 11.5px; color: var(--mut); }
.av { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.av--txt { display: inline-grid; place-items: center; background: var(--surface3); color: #fff; font-size: 14px; font-weight: 600; text-transform: uppercase; }
.av--sm { width: 22px; height: 22px; font-size: 10px; }
.sb__stats { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 8px 8px 4px; font-size: 12px; color: var(--soft); font-variant-numeric: tabular-nums; }
.sb__stats span { display: inline-flex; align-items: center; gap: 4px; }
.sb__stats svg { width: 12px; height: 12px; color: var(--mut); }
.sb__stats b { font-weight: 600; color: var(--soft); }
.sb__links { display: flex; gap: 4px; padding: 6px 4px 0; }
.sb__links a { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 32px; border-radius: var(--r); color: var(--mut); }
.sb__links a:hover { background: var(--surface); color: #fff; }
.sb__links svg { width: 16px; height: 16px; }
.sb__links b { position: absolute; top: 3px; right: 3px; min-width: 15px; height: 15px; padding: 0 4px; border-radius: 8px; background: var(--acc); color: #fff; font-size: 10px; line-height: 15px; text-align: center; }

.main { display: flex; flex-direction: column; min-width: 0; }
.topbar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 16px; height: 54px; padding: 0 28px; background: rgba(19, 19, 21, 0.9); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.search { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 560px; height: 34px; padding: 0 12px; border-radius: var(--r); border: 1px solid var(--line2); background: var(--surface); color: var(--mut); }
.search:focus-within { border-color: var(--acc); }
.search svg { width: 15px; height: 15px; }
.search input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--text); font: inherit; font-size: 13.5px; outline: 0; }
.search input::placeholder { color: var(--dim); }
.topme { margin-left: auto; display: flex; align-items: center; gap: 4px; min-width: 0; }
.topme__stats { display: flex; align-items: center; gap: 14px; margin-right: 10px; font-size: 12px; color: var(--soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
.topme__stats span { display: inline-flex; align-items: center; gap: 4px; }
.topme__stats svg { width: 12px; height: 12px; color: var(--mut); }
.topme__stats b { font-weight: 600; color: var(--soft); }
.topme__ic { position: relative; display: inline-grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: var(--r); background: transparent; color: var(--mut); cursor: pointer; }
.topme__ic:hover, .topme__ic[aria-expanded=true] { background: var(--surface2); color: #fff; }
.topme__ic svg { width: 16px; height: 16px; }
.topme__ic b { position: absolute; top: 2px; right: 2px; min-width: 15px; height: 15px; padding: 0 4px; border-radius: 8px; background: var(--acc); color: #fff; font-size: 10px; line-height: 15px; text-align: center; }
.topme__who { display: flex; align-items: center; gap: 9px; margin-left: 8px; padding: 4px 10px 4px 4px; border-radius: 999px; border: 1px solid var(--line); }
.topme__who:hover { border-color: var(--line2); background: var(--surface); }
.topme__who .av { width: 30px; height: 30px; font-size: 12px; }
.topme__name { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.topme__name b { font-size: 13px; white-space: nowrap; }
.topme__name small { font-size: 11px; color: var(--mut); }
.pop { position: relative; }
.pop__panel { position: absolute; top: 42px; right: -40px; z-index: 30; width: 380px; max-width: calc(100vw - 24px); border: 1px solid var(--line2); border-radius: var(--r-lg); background: var(--surface); box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.7); font-size: 13px; color: var(--mut); }
.pop__panel:not(:has(.pop__h)) { padding: 16px; }
.pop__h { display: flex; align-items: center; justify-content: space-between; padding: 11px 14px; border-bottom: 1px solid var(--line); color: #fff; }
.pop__l { list-style: none; margin: 0; padding: 4px 0; max-height: 420px; overflow-y: auto; scrollbar-width: thin; }
.pop__i > a, .pop__i > span { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 9px 14px 9px 22px; position: relative; color: var(--soft); }
.pop__i > a:hover { background: var(--surface2); }
.pop__i.is-unread > a::before, .pop__i.is-unread > span::before { content: ""; position: absolute; left: 9px; top: 15px; width: 6px; height: 6px; border-radius: 50%; background: var(--acc); }
.pop__kind { font-size: 10.5px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--mut); }
.pop__text { grid-column: 1 / -1; line-height: 1.4; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.pop__i.is-unread .pop__text { color: #fff; }
.pop__i time { grid-row: 1; grid-column: 2; font-size: 11px; color: var(--dim); white-space: nowrap; }
.pop__empty { padding: 22px 14px; text-align: center; }
.pop__f { display: flex; align-items: center; justify-content: space-between; padding: 9px 14px; border-top: 1px solid var(--line); }
.pop__f a { font-weight: 600; color: var(--soft); }
.pop__f a:hover { color: #fff; }
.pop__f button { border: 0; background: none; color: var(--mut); font: inherit; cursor: pointer; }
.pop__f button:hover { color: #fff; }
.content { flex: 1; width: 100%; padding: 22px 28px 40px; }
.foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding: 14px 28px; border-top: 1px solid var(--line); font-size: 12px; color: var(--dim); }
.foot a { color: var(--mut); }

/* activity feed (home) */
.feed { display: flex; flex-direction: column; min-height: 0; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; }
.feed__l { flex: 1; overflow-y: auto; list-style: none; margin: 0; padding: 4px 0; scrollbar-width: thin; }
.feed__i { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: 10px; align-items: baseline; padding: 7px 14px; font-size: 13px; color: var(--mut); }
.feed__i:hover { background: var(--surface2); }
.feed__i svg { width: 14px; height: 14px; align-self: center; color: var(--dim); }
.feed__i--upload svg { color: var(--green); } .feed__i--fill svg { color: var(--amber); } .feed__i--join svg { color: var(--blue); }
.feed__t { min-width: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.feed__t a { color: var(--soft); font-weight: 500; }
.feed__t a:hover { color: #fff; }
.feed__u { font-weight: 600 !important; }
.feed__i time { font-size: 11px; color: var(--dim); white-space: nowrap; }
.feed__empty { padding: 20px 14px; color: var(--mut); }

/* in-place navigation: a hairline under the top bar while the next page loads */
.topbar::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 2px; width: 0; background: var(--acc); opacity: 0; }
html.is-loading .topbar::after { width: 70%; opacity: 1; transition: width 1.2s ease-out; }

/* ---- the #general window (home) */
.hm__top { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 18px; height: 460px; margin-bottom: 22px; }
.irc { display: grid; grid-template-columns: minmax(0, 1fr) 200px; min-height: 0; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bg-rail); overflow: hidden; }
.irc__main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.irc__h { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: 12px; }
.irc__h h2 { font-family: var(--mono); font-size: 13px; font-weight: 500; color: #fff; }
.irc__nicks { display: flex; flex-direction: column; min-height: 0; border-left: 1px solid var(--line); background: var(--bg-sb); }
.irc__list { flex: 1; overflow-y: auto; padding: 4px 6px 10px; scrollbar-width: thin; }
.chat { flex: 1; overflow-y: auto; padding: 6px 8px; scrollbar-width: thin; scrollbar-color: var(--line2) transparent; }
.msg { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 9px; padding: 4px 8px; border-radius: var(--r); }
.msg:hover { background: var(--surface); }
.msg__av { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; margin-top: 1px; }
.msg__av--txt { display: grid; place-items: center; background: var(--surface3); color: #fff; font-size: 11px; font-weight: 600; text-transform: uppercase; }
.msg__b { min-width: 0; }
.msg__h { display: flex; align-items: baseline; gap: 7px; font-size: 12.5px; }
.msg__h b { font-weight: 600; }
.msg__h b a { color: inherit; text-decoration: none; }
.msg__h b a:hover { text-decoration: underline; }
.msg__h time { font-size: 10.5px; color: var(--dim); }
.msg__x { font-size: 13px; color: var(--soft); overflow-wrap: anywhere; line-height: 1.4; }
.msg--bot .msg__h b { color: var(--blue); }
.msg--bot .msg__x { color: var(--mut); }
.chat__empty { padding: 20px 10px; color: var(--mut); }
.chat__f { display: flex; gap: 6px; padding: 8px 10px 10px; border-top: 1px solid var(--line); }
.chat__f input { flex: 1; min-width: 0; height: 34px; padding: 0 12px; border-radius: var(--r); border: 1px solid var(--line2); background: var(--surface); color: var(--text); font: inherit; font-size: 13px; }
.chat__f input:focus { outline: 0; border-color: var(--acc); }
.chat__f button { width: 34px; height: 34px; border-radius: var(--r); border: 0; background: var(--acc); color: #fff; cursor: pointer; display: grid; place-items: center; }
.chat__f button svg { width: 15px; height: 15px; }
.chat__err { padding: 0 12px 8px; font-size: 12px; color: var(--red); }
.mgrp { margin-bottom: 8px; }
.mgrp h3 { padding: 6px 8px 3px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mut); }
.member { display: flex; align-items: center; gap: 8px; padding: 4px 8px; border-radius: var(--r); font-size: 13px; font-weight: 500; color: var(--soft); }
.member:hover { background: var(--surface); }
.fgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 12px; }
.fgrid .fcard { flex: none; }
.fgrid .fcard__p { width: 100%; height: auto; aspect-ratio: 2 / 3; }
.kvl--flat { border-top: 1px solid var(--line); }
.kvl--flat > div { padding: 7px 4px; }

/* ---- page chrome */
.ph { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 24px; margin-bottom: 22px; }
.ph h1 { font-family: var(--display); font-size: 26px; font-weight: 700; letter-spacing: -0.015em; color: #fff; }
.ph__sub { margin: 4px 0 0; font-size: 13.5px; color: var(--mut); }
.ph__kicker { margin: 0 0 2px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mut); }
.ph__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.sec { margin-bottom: 20px; }
.sec__h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.sec__h h2 { font-size: 15px; font-weight: 600; color: #fff; }
.sec__h a { display: inline-flex; align-items: center; gap: 3px; font-size: 12.5px; color: var(--mut); }
.sec__h a:hover { color: var(--text); }
.sec__h a svg { width: 13px; height: 13px; }
.sec--news .news { padding: 12px 14px; border-left: 3px solid var(--acc); background: var(--surface); border-radius: 0 var(--r) var(--r) 0; }
.card { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.card__h { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 16px; border-bottom: 1px solid var(--line); }
.card__h h2 { font-size: 14px; font-weight: 600; color: #fff; }
.card__h a { font-size: 12.5px; color: var(--mut); }
.card__h a:hover { color: var(--text); }
.btn { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; border-radius: var(--r); border: 1px solid var(--line2); background: var(--surface); color: #fff !important; font-weight: 500; font-size: 13px; white-space: nowrap; cursor: pointer; }
.btn:hover { border-color: var(--mut); background: var(--surface2); }
.btn-solid { background: var(--acc); border-color: var(--acc); }
.btn-solid:hover { background: #ff6571; border-color: #ff6571; }
.btn-off { opacity: 0.5; cursor: not-allowed; }
.btn.is-on { border-color: var(--acc); color: var(--acc) !important; }
.tag { display: inline-block; padding: 0 6px; border-radius: 4px; font-style: normal; font-size: 10.5px; font-weight: 600; line-height: 17px; background: var(--surface3); color: var(--soft); vertical-align: 1px; }
.tag-fl { background: rgba(251, 191, 36, 0.16); color: var(--amber); }
.tag-du { background: rgba(74, 222, 128, 0.14); color: var(--green); }
.tag-int { background: var(--acc-soft); color: var(--acc); }
.tag-feat { background: rgba(96, 165, 250, 0.14); color: var(--blue); }
.hm { display: flex; flex-direction: column; gap: 4px; }
.hm__grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 28px; align-items: start; }
.hm__main, .hm__side { min-width: 0; }

/* featured */
/* one row, as many posters as fit, never a scrollbar: the grid makes equal columns across the width,
   further rows get no height and are clipped. "See all" leads to the rest. */
.fstrip { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); grid-template-rows: auto; grid-auto-rows: 0; gap: 0 14px; overflow: hidden; }
.fcard { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fcard__p { width: 100%; height: auto; aspect-ratio: 2 / 3; border-radius: var(--r); object-fit: cover; background: var(--surface2); border: 1px solid var(--line); }
.fcard:hover .fcard__p { border-color: var(--mut); }
.fcard__p--none { display: grid; place-items: center; font-size: 32px; font-weight: 600; color: var(--dim); }
.fcard__t { margin-top: 3px; font-size: 12.5px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fcard__m { font-size: 11px; color: var(--mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ftabs { display: flex; flex-wrap: wrap; gap: 4px; }
.ftabs button { padding: 5px 12px; border: 1px solid transparent; border-radius: 999px; background: none; color: var(--mut); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.ftabs button span { margin-left: 3px; font-size: 11px; font-weight: 500; color: var(--dim); }
.ftabs button:hover { color: var(--text); }
.ftabs button.is-on { background: var(--surface2); border-color: var(--line2); color: #fff; }
.fstrip[hidden] { display: none; }
@media (max-width: 560px) { .fstrip { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 0 10px; } }
.fcard__w { position: relative; display: block; }
.fcard__b { position: absolute; top: 6px; left: 6px; padding: 0 6px; border-radius: 4px; font-style: normal; font-size: 10px; font-weight: 600; line-height: 17px; background: rgba(19, 19, 21, 0.85); color: var(--soft); }
.fcard__b--fl { color: var(--amber); } .fcard__b--int { color: var(--acc); } .fcard__b--du { color: var(--green); }
.fcard__n { position: absolute; left: 0; right: 0; bottom: 0; display: flex; gap: 8px; padding: 14px 7px 5px; border-radius: 0 0 var(--r) var(--r); background: linear-gradient(transparent, rgba(0, 0, 0, 0.82)); font-family: var(--mono); font-size: 11px; color: var(--soft); opacity: 0; transition: opacity 0.15s; }
.fcard:hover .fcard__n { opacity: 1; }
.fcard__n i { font-style: normal; }
.fcard__n .up::before { content: "▲ "; font-size: 8px; } .fcard__n .down::before { content: "▼ "; font-size: 8px; } .fcard__n i:last-child::before { content: "✓ "; }

/* list rows (latest, uploads) */
.list { border-top: 1px solid var(--line); }
.li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 9px 4px; border-bottom: 1px solid var(--line); }
.li:hover { background: var(--surface); }
.li__p { width: 34px; height: 51px; border-radius: 4px; object-fit: cover; background: var(--surface2); }
.li__p--none { display: block; }
.li__t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.li__t b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.li__t b i { font-style: normal; font-weight: 400; color: var(--mut); }
.li__t code { font-size: 11.5px; color: var(--mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.li__meta { font-size: 11.5px; color: var(--mut); }
.li__n { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.li__sz { font-weight: 600; color: #fff; }
.li__sl { display: flex; gap: 10px; font-family: var(--mono); font-size: 12px; }
.li__sl i { font-style: normal; }
.li__sl .up::before { content: "▲"; font-size: 8px; margin-right: 3px; vertical-align: 1px; }
.li__sl .down::before { content: "▼"; font-size: 8px; margin-right: 3px; vertical-align: 1px; }
.li__sl .mut::before { content: "✓"; font-size: 10px; margin-right: 3px; }
.li__by { color: var(--mut); font-size: 11.5px; }
.list__empty { padding: 28px; text-align: center; color: var(--mut); }

/* forum activity */
.topics { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.topic { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 4px; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.topic:hover { background: var(--surface); }
.topic__t { min-width: 0; }
.topic__name { display: block; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topic__last { display: block; margin-top: 1px; font-size: 12px; color: var(--mut); }
.topic__forum { font-weight: 500; color: var(--soft); }
.topic__n { flex: none; font-size: 12px; color: var(--mut); white-space: nowrap; }
.topic__n b { color: var(--soft); }
.topic__n em { font-style: normal; }
.topic--empty { display: block; color: var(--mut); }

/* news */
.news h3 { font-size: 15px; font-weight: 600; }
.news h3 a:hover { color: var(--acc); }
.news__by { margin: 2px 0 8px; font-size: 12px; color: var(--mut); }
.news__body { font-size: 13.5px; color: var(--soft); display: -webkit-box; -webkit-line-clamp: 8; -webkit-box-orient: vertical; overflow: hidden; }

/* requests */
.reqs { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.req { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1px 12px; padding: 9px 4px; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.req__name { font-weight: 600; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.req__meta { grid-column: 1; font-size: 12px; color: var(--mut); }
.req__bounty { grid-row: span 2; grid-column: 2; align-self: center; font-family: var(--mono); font-weight: 500; color: var(--amber); white-space: nowrap; }
.req__bounty em { margin-left: 4px; font-style: normal; font-size: 10px; color: var(--dim); }
.req--empty { display: block; color: var(--mut); }
.req--empty a { color: var(--acc); }

/* online strip */
.online { display: flex; flex-wrap: wrap; gap: 12px 28px; padding: 14px 0 4px; border-top: 1px solid var(--line); }
.rankgrp h3 { margin-bottom: 6px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mut); }
.rankgrp__u { display: flex; flex-wrap: wrap; gap: 6px; }
.member--chip { padding: 3px 10px 3px 4px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-size: 12.5px; }
.member--chip:hover { border-color: var(--mut); }

/* ---- stat lists (profile) */
.stats { display: grid; grid-template-columns: 1fr 1fr; margin: 0; }
.stats > div { display: flex; justify-content: space-between; gap: 8px; padding: 8px 16px; border-bottom: 1px solid var(--line); font-size: 13px; }
.stats > div:nth-child(odd) { border-right: 1px solid var(--line); }
.stats > div:nth-last-child(-n+2) { border-bottom: 0; }
.stats dt { color: var(--mut); }
.stats dd { margin: 0; font-weight: 600; color: #fff; font-variant-numeric: tabular-nums; }

/* ---- profile */
.pf { display: flex; flex-direction: column; gap: 22px; }
.hero { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 28px; }
.hero__who { display: flex; align-items: center; gap: 18px; }
.hero__av { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; }
.hero__av--txt { display: grid; place-items: center; background: var(--surface3); color: #fff; font-size: 34px; font-weight: 600; text-transform: uppercase; }
.hero h1 { font-family: var(--display); font-size: 30px; font-weight: 700; letter-spacing: -0.015em; color: #fff; }
.hero__sub { margin: 4px 0 0; font-size: 13px; color: var(--mut); }
.rank { display: inline-block; padding: 0 7px; border-radius: 4px; border: 1px solid currentColor; font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; line-height: 18px; }
.pf__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.pf__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pf__grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 22px; align-items: start; }
.pf__main, .pf__side { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.pf__private { padding: 40px; text-align: center; color: var(--mut); }
.pf__bb { padding: 14px 16px; }
.pf__bb--sig { font-size: 12.5px; color: var(--mut); }
.rows { display: flex; flex-direction: column; }
.row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 9px 16px; border-bottom: 1px solid var(--line); }
.row:last-child { border-bottom: 0; }
.row:hover { background: var(--surface2); }
.row__p { width: 34px; height: 51px; border-radius: 4px; object-fit: cover; background: var(--surface2); }
.row__t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.row__t b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row__t b i { font-style: normal; font-weight: 400; color: var(--mut); }
.row__t small { font-family: var(--mono); font-size: 11.5px; color: var(--mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chips { display: flex; flex-wrap: wrap; gap: 4px; }
.chip { display: inline-block; padding: 0 6px; border-radius: 4px; background: var(--surface3); font-size: 10.5px; font-weight: 600; color: var(--soft); line-height: 17px; }
.chip-fl { background: rgba(251, 191, 36, 0.16); color: var(--amber); }
.chip-du { background: rgba(74, 222, 128, 0.14); color: var(--green); }
.chip-int { background: var(--acc-soft); color: var(--acc); }
.chip-feat { background: rgba(96, 165, 250, 0.14); color: var(--blue); }
.row__n { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.row__sz { font-weight: 600; color: #fff; }
.row__sl { display: flex; gap: 10px; font-family: var(--mono); font-size: 12px; }
.row__by { color: var(--mut); font-size: 11.5px; }
.rows__empty { padding: 28px; text-align: center; color: var(--mut); }

/* ---- browse page */
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; }
.filters .search { flex: 1 1 260px; max-width: none; }
.filters input[type=search], .filters select { height: 34px; padding: 0 10px; border-radius: var(--r); border: 1px solid var(--line2); background: var(--surface); color: var(--text); font: inherit; }
.filters input[type=search]:focus, .filters select:focus { outline: 0; border-color: var(--acc); }
.filters .check { display: inline-flex; align-items: center; gap: 6px; padding: 0 4px; font-size: 13px; color: var(--soft); }
.filters button { height: 34px; padding: 0 16px; border: 0; border-radius: var(--r); background: var(--acc); color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
.filters .reset { font-size: 13px; color: var(--mut); }
.filters .count { margin-left: auto; font-size: 13px; color: var(--mut); }
.tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.tablewrap--flush { border: 0; border-radius: 0 0 var(--r-lg) var(--r-lg); background: transparent; }
table.torrents { width: 100%; min-width: 820px; border-collapse: collapse; font-size: 13px; }
.torrents th { padding: 9px 12px; text-align: left; font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mut); border-bottom: 1px solid var(--line); white-space: nowrap; }
.torrents th a:hover { color: #fff; }
.torrents td { padding: 8px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.torrents tbody tr:last-child td { border-bottom: 0; }
.torrents tbody tr:hover { background: var(--surface2); }
.torrents tr.is-sticky { background: rgba(251, 191, 36, 0.05); }
.c-cat { width: 84px; white-space: nowrap; }
.c-cat .cat { display: block; font-weight: 600; font-size: 11px; color: var(--soft); }
.c-cat .sub { display: block; font-size: 10.5px; line-height: 1.2; color: var(--dim); }
.c-name { min-width: 0; }
.c-name .name { display: inline; font-weight: 600; color: #fff; overflow-wrap: anywhere; }
.c-name .name:hover { color: var(--acc); }
.c-name .meta { display: block; margin-top: 1px; font-size: 11.5px; color: var(--mut); }
.c-name .title { color: var(--soft); }
.c-dl { width: 28px; text-align: center; }
.c-dl .dl { font-size: 16px; color: var(--soft); }
.c-dl .dl:hover { color: var(--green); }
.c-num { width: 72px; text-align: right; white-space: nowrap; font-family: var(--mono); font-size: 12.5px; }
.c-age { width: 48px; text-align: right; white-space: nowrap; }
.flags { display: inline-flex; flex-wrap: wrap; gap: 3px; margin-left: 6px; vertical-align: 1px; }
.flag { display: inline-block; padding: 0 6px; border-radius: 4px; font-size: 10px; font-weight: 600; letter-spacing: 0.04em; line-height: 16px; color: #131315; background: var(--soft); }
.flag-fl { background: var(--amber); }
.flag-du { background: var(--green); }
.flag-int { background: var(--acc); color: #fff; }
.flag-feat { background: transparent; color: var(--amber); font-size: 12px; padding: 0; }
.empty { padding: 28px !important; text-align: center; color: var(--mut); }
.pager { display: flex; align-items: center; gap: 18px; padding: 14px 4px; font-size: 13px; color: var(--mut); }
.pager a { font-weight: 600; color: var(--soft); }

/* ---- torrent page */
.t-page { display: flex; flex-direction: column; gap: 22px; }
.t-top { display: flex; gap: 22px; align-items: flex-start; }
.t-top .t-poster { width: 150px; }
.t-top__t { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.t-title { font-family: var(--display); font-size: clamp(22px, 2.6vw, 32px); font-weight: 700; letter-spacing: -0.015em; color: #fff; }
.t-title i { font-style: normal; font-weight: 400; color: var(--mut); }
.t-sub { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; font-size: 13px; color: var(--soft); }
.t-sub a { color: var(--soft); border-bottom: 1px solid var(--line2); }
.t-sub a:hover { color: var(--acc); }
.t-release { font-family: var(--mono); font-size: 12.5px; color: var(--mut); overflow-wrap: anywhere; }
.t-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.t-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.t-cols { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 26px; align-items: start; }
.t-main { min-width: 0; }
.t-main .details { margin: 0 0 22px; }
.t-main .details + .details { margin-top: -12px; }
.t-side { min-width: 0; }
.kvl { margin: 0; }
.kvl > div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 16px; border-bottom: 1px solid var(--line); font-size: 13px; }
.kvl > div:last-child { border-bottom: 0; }
.kvl dt { color: var(--mut); }
.kvl dd { margin: 0; font-weight: 600; color: #fff; text-align: right; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.t-hash { font-size: 11px; font-weight: 400; }
.filters__q { flex: 1 1 260px; width: auto; }
.filters .select { width: auto; }
.filters__reset { font-size: 13px; color: var(--mut); }
.torrents th a.is-on { color: #fff; }
.torrents th a.is-on::after { content: " ▾"; color: var(--acc); }
.c-dl .dl svg { width: 16px; height: 16px; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0; }
.kv dt { color: var(--mut); }
.kv dd { margin: 0; text-align: right; font-weight: 600; color: #fff; font-variant-numeric: tabular-nums; }
.t-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 16px 32px; padding-bottom: 18px; }
.t-name { margin: 0; font-family: var(--mono); font-size: clamp(15px, 1.8vw, 20px); font-weight: 500; line-height: 1.35; color: #fff; overflow-wrap: anywhere; }
.t-sub { margin-top: 6px; font-size: 14px; color: var(--soft); }
.t-head .flags { margin: 10px 0 0; }
.t-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.t-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-bottom: 16px; }
.t-grid .card, .t-page .card { padding: 16px 18px; }
.t-page .card h2, .t-grid .card h2 { margin: 0 0 10px; font-size: 14px; color: #fff; }
.kv-left dd { text-align: left; font-weight: 500; }
.t-media { display: flex; gap: 16px; }
.t-poster { flex: none; width: 110px; aspect-ratio: 2 / 3; object-fit: cover; border-radius: var(--r); }
.t-overview { margin: 0; font-size: 14px; color: var(--soft); }
.card + .card, .card + .details, .details + .card, .details + .details { margin-top: 16px; }
.details { padding: 16px 18px; }
.details summary { cursor: pointer; list-style: none; }
.details summary::-webkit-details-marker { display: none; }
.details summary h2 { display: inline; font-size: 14px; }
.details summary::before { content: "▸ "; color: var(--mut); }
.details[open] summary::before { content: "▾ "; }
.mono { margin: 12px 0 0; padding: 12px; border-radius: var(--r); background: var(--bg-sb); font: 12px/1.5 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; color: var(--soft); max-height: 480px; overflow: auto; }
.files { width: 100%; margin-top: 10px; border-collapse: collapse; font-size: 13px; }
.files td { padding: 5px 6px; border-bottom: 1px solid var(--line); }
.bb { font-size: 13.5px; line-height: 1.55; color: var(--soft); overflow-wrap: anywhere; }
.bb-code { padding: 10px; border-radius: var(--r); background: var(--bg-sb); font: 12px/1.5 var(--mono); white-space: pre-wrap; }
.bb-quote { margin: 8px 0; padding: 8px 12px; border-left: 3px solid var(--acc); background: var(--surface2); }
.bb-img { display: inline-block; max-width: 100%; height: auto; border-radius: var(--r); vertical-align: middle; margin: 3px; }
.bb-center { text-align: center; }
.bb-list { padding-left: 22px; }
.t-actions form { display: inline; }
.comment-form textarea { width: 100%; padding: 10px 12px; border-radius: var(--r); border: 1px solid var(--line2); background: var(--bg); color: var(--text); font: inherit; resize: vertical; }
.comment-form textarea:focus { outline: 0; border-color: var(--acc); }
.comment-form__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; }
.comment { padding: 12px 0; border-top: 1px solid var(--line); }
.comment__head { margin-bottom: 4px; font-size: 13px; }

/* ---- forums */
.f-page { display: flex; flex-direction: column; gap: 16px; }
.f-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12.5px; color: var(--mut); }
.f-crumbs a { font-weight: 500; color: var(--soft); }
.f-crumbs a:hover { color: var(--acc); }
.f-crumbs span { font-weight: 600; color: #fff; }
.f-crumbs i { font-style: normal; color: var(--dim); }
.f-empty { padding: 28px 14px; text-align: center; color: var(--mut); }
.f-empty a, .f-note a, .empty a { color: var(--acc); }
.f-btn { height: 30px; padding: 0 12px; font-size: 12.5px; }
.f-pager { padding: 2px 4px; }
.f-cat__desc { font-size: 12px; }
.f-forums { list-style: none; margin: 0; padding: 0; }
.f-forum { display: grid; grid-template-columns: minmax(0, 1fr) 150px minmax(0, 300px); gap: 2px 16px; align-items: center; padding: 9px 16px; border-bottom: 1px solid var(--line); font-size: 13px; }
.f-forum:last-child { border-bottom: 0; }
.f-forum:hover { background: var(--surface2); }
.f-forum__t { min-width: 0; }
.f-forum__name { display: block; font-weight: 600; color: #fff; }
.f-forum__name:hover { color: var(--acc); }
.f-forum__desc { display: block; margin-top: 1px; font-size: 11.5px; color: var(--mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.f-forum__n { font-size: 11.5px; color: var(--mut); white-space: nowrap; font-variant-numeric: tabular-nums; }
.f-forum__n b { color: var(--soft); }
.f-forum__n em { font-style: normal; color: var(--dim); }
.f-forum__last { min-width: 0; font-size: 12px; }
.f-forum__lt { display: block; font-weight: 500; color: var(--soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.f-forum__lt:hover { color: var(--acc); }
.f-forum__lb { display: block; font-size: 11.5px; color: var(--mut); }
.f-head h2 { min-width: 0; }
.f-head__n { margin-left: auto; font-size: 12px; white-space: nowrap; }
.f-desc { margin: 0; padding: 8px 16px; border-bottom: 1px solid var(--line); font-size: 12.5px; color: var(--mut); }
table.f-topics { min-width: 640px; }
.f-c-topic { min-width: 0; }
.f-c-last { width: 190px; white-space: nowrap; font-size: 12.5px; }
.f-c-last b { display: block; }
.f-c-last .mut { display: block; font-size: 11.5px; }
.f-topic__name { font-weight: 600; color: #fff; overflow-wrap: anywhere; }
.f-topic__name:hover { color: var(--acc); }
.f-topic__meta { display: block; margin-top: 1px; font-size: 11.5px; color: var(--mut); }
.f-topic__meta b { color: var(--soft); }
.f-topic__last { color: var(--mut); }
.f-topic__last:hover { color: var(--acc); }
.f-is-closed .f-topic__name { color: var(--soft); }
.f-pin { margin-right: 4px; font-size: 12px; }
.f-labs { display: inline-flex; flex-wrap: wrap; gap: 3px; margin-left: 6px; vertical-align: 1px; }
.f-lab { display: inline-block; padding: 0 5px; border-radius: 4px; font-size: 10px; font-weight: 600; letter-spacing: 0.04em; line-height: 16px; color: #131315; background: var(--soft); }
.f-lab--closed { background: var(--dim); color: #fff; }
.f-lab--approved, .f-lab--solved, .f-lab--implemented { background: var(--green); }
.f-lab--denied, .f-lab--invalid { background: var(--red); }
.f-lab--bug { background: var(--acc); color: #fff; }
.f-lab--suggestion { background: var(--blue); }
.f-topic-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px 24px; }
.f-topic-head__t { min-width: 0; }
.f-title { font-family: var(--display); font-size: clamp(18px, 2vw, 24px); font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; color: #fff; overflow-wrap: anywhere; }
.f-topic-head__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 5px; font-size: 12.5px; }
.f-topic-head__meta .f-labs { margin-left: 0; }
.f-topic-head__meta a { font-weight: 500; color: var(--soft); }
.f-topic-head__meta a:hover { color: var(--acc); }
.f-topic-head__a { display: flex; gap: 8px; }
.f-posts { display: flex; flex-direction: column; gap: 10px; }
.f-post { display: grid; grid-template-columns: 150px minmax(0, 1fr); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.f-post:target { border-color: var(--acc); }
.f-post__who { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; padding: 14px; border-right: 1px solid var(--line); font-size: 11.5px; color: var(--mut); }
.f-av { width: 48px; height: 48px; margin-bottom: 4px; border-radius: 50%; object-fit: cover; background: var(--surface3); }
.f-av--none { display: grid; place-items: center; color: #fff; font-size: 20px; font-weight: 600; text-transform: uppercase; }
.f-post__user { max-width: 100%; font-size: 13.5px; font-weight: 600; color: #fff; overflow-wrap: anywhere; }
.f-post__user:hover { color: var(--acc); }
.f-post__group { font-weight: 600; }
.f-post__title { font-style: italic; color: var(--soft); }
.f-post__stats { margin-top: 3px; color: var(--dim); font-variant-numeric: tabular-nums; }
.f-post__anon { color: var(--amber); }
.f-post__body { display: flex; flex-direction: column; min-width: 0; padding: 10px 16px 12px; }
.f-post__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--line); font-size: 11.5px; color: var(--mut); }
.f-post__n { font-weight: 600; color: var(--soft); font-variant-numeric: tabular-nums; }
.f-post__n:hover { color: var(--acc); }
.f-post__x { flex: 1; }
.f-sig { margin-top: 12px; padding-top: 8px; border-top: 1px dashed var(--line2); font-size: 11.5px; line-height: 1.4; color: var(--dim); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.f-sig a { color: var(--mut); }
.f-note { padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface2); font-size: 12.5px; color: var(--mut); }
.f-reply__f { padding: 12px 16px 14px; }
.f-reply__f textarea { width: 100%; min-height: 120px; padding: 10px 12px; border-radius: var(--r); border: 1px solid var(--line2); background: var(--bg); color: var(--text); font: inherit; resize: vertical; }
.f-reply__f textarea:focus { outline: 0; border-color: var(--acc); }
.f-reply__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; font-size: 12.5px; }

/* ---- account area: left sub-navigation + stacked cards */
.acct { display: grid; grid-template-columns: 224px minmax(0, 1fr); gap: 22px; align-items: start; }
.acct__nav { position: sticky; top: 76px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); padding: 10px; }
.acct__who { display: flex; align-items: center; gap: 10px; padding: 8px 8px 12px; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.acct__who .av { width: 40px; height: 40px; font-size: 16px; }
.acct__who-t { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.acct__who-t b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acct__who-t .rank { align-self: flex-start; }
.acct__links { display: flex; flex-direction: column; gap: 1px; }
.acct__links hr { margin: 6px 8px; border: 0; border-top: 1px solid var(--line); }
.acct__links a { display: flex; align-items: center; gap: 10px; height: 32px; padding: 0 10px; border-radius: var(--r); font-size: 13px; font-weight: 500; color: var(--soft); }
.acct__links a svg { width: 15px; height: 15px; color: var(--mut); }
.acct__links a:hover { background: var(--surface2); color: #fff; }
.acct__links a.is-on { background: var(--surface3); color: #fff; }
.acct__links a.is-on svg { color: var(--acc); }
.acct__body { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.acct__body .ph { margin-bottom: 0; }
.kvgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 24px; padding: 16px; margin: 0; }
.kvgrid > div { min-width: 0; }
.kvgrid dt { font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mut); }
.kvgrid dd { margin: 3px 0 0; font-size: 14px; font-weight: 600; color: #fff; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.secret { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; }
.secret code { padding: 3px 8px; border-radius: var(--r); background: var(--bg); font-size: 12px; font-weight: 400; color: var(--soft); letter-spacing: 0.04em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 320px; }
.secret button { width: 28px; height: 28px; border: 1px solid var(--line2); border-radius: var(--r); background: var(--surface2); color: var(--mut); cursor: pointer; display: grid; place-items: center; }
.secret button:hover { color: #fff; border-color: var(--mut); }
.secret button svg { width: 14px; height: 14px; }
@media (max-width: 1000px) { .acct { grid-template-columns: minmax(0, 1fr); } .acct__nav { position: static; } .acct__links { flex-direction: row; flex-wrap: wrap; } .acct__links hr { display: none; } .kvgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- forms & feedback (shared by every page that edits something) */
.form { display: flex; flex-direction: column; gap: 16px; max-width: 640px; }
.form--wide { max-width: none; }
.field { display: flex; flex-direction: column; gap: 5px; }
.field > label, .field__label { font-size: 12.5px; font-weight: 600; color: var(--soft); }
.field .help { font-size: 12px; color: var(--mut); }
.field .err { font-size: 12px; color: var(--red); }
.input, .select, .textarea { width: 100%; padding: 0 12px; border-radius: var(--r); border: 1px solid var(--line2); background: var(--bg); color: var(--text); font: inherit; font-size: 13.5px; }
.input, .select { height: 36px; }
.textarea { min-height: 120px; padding: 10px 12px; resize: vertical; line-height: 1.5; }
.input:focus, .select:focus, .textarea:focus { outline: 0; border-color: var(--acc); }
.input[aria-invalid=true], .textarea[aria-invalid=true] { border-color: var(--red); }
.check { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--soft); }
.check input { width: 16px; height: 16px; accent-color: var(--acc); }
.form__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-top: 4px; }
.alert { padding: 10px 14px; border-radius: var(--r); border: 1px solid var(--line2); background: var(--surface); font-size: 13.5px; color: var(--soft); }
.alert--ok { border-color: rgba(74, 222, 128, 0.4); color: var(--green); }
.alert--err { border-color: rgba(248, 113, 113, 0.4); color: var(--red); }
.alert--warn { border-color: rgba(251, 191, 36, 0.4); color: var(--amber); }
.tabs { display: flex; gap: 2px; margin-bottom: 18px; border-bottom: 1px solid var(--line); }
.tabs a { padding: 8px 12px; margin-bottom: -1px; font-size: 13.5px; font-weight: 500; color: var(--mut); border-bottom: 2px solid transparent; }
.tabs a:hover { color: var(--text); }
.tabs a.is-on { color: #fff; border-bottom-color: var(--acc); }
.table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table th { padding: 9px 12px; text-align: left; font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mut); border-bottom: 1px solid var(--line); white-space: nowrap; }
.table td { padding: 8px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: var(--surface2); }
.table .num { text-align: right; font-family: var(--mono); font-size: 12.5px; white-space: nowrap; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.kpi { padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.kpi em { display: block; font-style: normal; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mut); }
.kpi b { display: block; margin-top: 2px; font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
.pill { display: inline-block; padding: 0 8px; border-radius: 999px; font-size: 11px; font-weight: 600; line-height: 18px; background: var(--surface3); color: var(--soft); }
.pill--ok { background: rgba(74, 222, 128, 0.14); color: var(--green); }
.pill--warn { background: rgba(251, 191, 36, 0.16); color: var(--amber); }
.pill--bad { background: rgba(248, 113, 113, 0.14); color: var(--red); }
.pill--acc { background: var(--acc-soft); color: var(--acc); }

/* ---- staff panel */
.stf-flash { margin-bottom: 16px; }
.stf-sub { display: flex; gap: 6px; margin-bottom: 14px; }
.stf-sub a { padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line); font-size: 12.5px; font-weight: 500; color: var(--mut); }
.stf-sub a b { margin-left: 4px; color: var(--soft); }
.stf-sub a.is-on { background: var(--surface2); color: #fff; border-color: var(--line2); }
.stf-queue { display: flex; flex-direction: column; gap: 10px; }
.stf-queue .card + .card { margin-top: 0; }
.stf-item { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; }
.stf-item__t { display: flex; flex-direction: column; gap: 3px; min-width: 0; font-size: 12.5px; }
.stf-item__name { font-family: var(--mono); font-size: 13.5px; font-weight: 500; color: #fff; overflow-wrap: anywhere; }
.stf-item__t a:not(.stf-item__name) { color: var(--soft); }
.stf-item__msg { margin: 6px 0 0; font-size: 13.5px; color: var(--soft); white-space: pre-wrap; overflow-wrap: anywhere; }
.stf-item__msg--verdict { padding-left: 10px; border-left: 2px solid var(--line2); }
.stf-item__f { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.stf-item__f .input { flex: 1 1 280px; width: auto; }
.stf-item__f--end { justify-content: flex-end; }
.stf-empty { padding: 28px; text-align: center; color: var(--mut); }
.stf-more { margin-top: 26px; }
.stf-links { display: flex; flex-wrap: wrap; gap: 8px; }
.stf-user { display: flex; flex-direction: column; gap: 18px; }
.stf-user .card + .card { margin-top: 0; }
.stf-form { padding: 16px; }
.stf-flags { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.stf-note { display: flex; gap: 8px; }
.stf-notes { list-style: none; margin: 0; padding: 0 16px 12px; }
.stf-notes li { padding: 8px 0; border-top: 1px solid var(--line); font-size: 13px; }
.stf-notes p { margin: 2px 0 0; color: var(--soft); white-space: pre-wrap; }
a.kpi:hover { border-color: var(--line2); }
.stf-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 12px; font-size: 13px; }
.stf-bar p { margin: 0; max-width: 80ch; }
.stf-rowact { display: flex; gap: 6px; justify-content: flex-end; white-space: nowrap; }
.stf-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px 18px; align-items: start; }
.stf-wide { grid-column: 1 / -1; }
.stf-check { align-self: center; min-height: 36px; }
.stf-help { max-width: 60ch; text-align: right; font-size: 12px; }
.stf-record { display: block; max-width: 520px; white-space: normal; overflow-wrap: anywhere; font-size: 11.5px; color: var(--mut); }

/* ---- responsive */
@media (max-width: 1500px) { .topme__stats span:nth-child(n+3) { display: none; } }
@media (max-width: 1100px) { .topme__stats, .topme__name { display: none; } }
@media (max-width: 1360px) { .pf__grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 1180px) { .hm__grid { grid-template-columns: minmax(0, 1fr); } .hm__top { grid-template-columns: minmax(0, 1fr); height: auto; } .hm__top .irc { height: 440px; } .feed { max-height: 320px; } .pf__stats { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 820px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .sb { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 10px 14px; border-right: 0; border-bottom: 1px solid var(--line); }
  .sb__brand { padding: 0 4px; }
  .sb__nav { flex-direction: row; overflow-x: auto; width: 100%; order: 3; }
  .sb__nav a { height: 32px; padding: 0 8px; white-space: nowrap; }
  .sb__site { display: none; }
  .sb__me { margin: 0 0 0 auto; padding: 0; border: 0; display: flex; align-items: center; gap: 4px; }
  .sb__stats, .sb__who-t { display: none; }
  .content, .topbar, .foot { padding-left: 14px; padding-right: 14px; }
  .f-forum { grid-template-columns: minmax(0, 1fr) auto; }
  .f-forum__last { grid-column: 1 / -1; }
  .f-post { grid-template-columns: minmax(0, 1fr); }
  .f-post__who { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 8px 14px; border-right: 0; border-bottom: 1px solid var(--line); }
  .f-av { width: 32px; height: 32px; margin: 0; font-size: 14px; }
  .t-grid { grid-template-columns: minmax(0, 1fr); }
  .irc { grid-template-columns: minmax(0, 1fr); height: 420px; } .irc__nicks { display: none; }
  .li { grid-template-columns: 34px minmax(0, 1fr); }
  .li__n { grid-column: 2; flex-direction: row; align-items: center; gap: 12px; }
}

/* ==== forums ==== */
/* EchelonHD v2 — forum writes (f-): unread markers, post actions, the topic and post forms. Tokens from app.css only. */
.f-page .alert { margin-bottom: 4px; }
.f-topic-head__a form { display: inline; }
.f-topic-head__a .btn svg { width: 14px; height: 14px; margin-right: 5px; }

/* unread topics */
.f-c-topic .f-dot { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: transparent; vertical-align: middle; }
.f-is-unread .f-dot { background: var(--acc); }
.f-is-unread .f-topic__name { color: #fff; font-weight: 600; }
.f-new { display: inline-block; margin-left: 4px; padding: 0 5px; border-radius: 4px; font-size: 10px; font-weight: 600; letter-spacing: 0.04em; line-height: 16px; text-transform: uppercase; color: var(--acc); background: var(--acc-soft); vertical-align: middle; }

/* edit and delete on a post */
.f-post__acts { display: inline-flex; align-items: center; gap: 10px; margin-left: auto; font-size: 12px; }
.f-post__acts a, .f-post__acts button { padding: 0; border: 0; background: none; font: inherit; color: var(--mut); cursor: pointer; }
.f-post__acts a:hover { color: #fff; }
.f-post__acts button:hover { color: var(--red); }
.f-post__acts form { display: inline; }

/* reply and compose forms */
.f-reply__row .check { margin-left: 2px; }
.f-compose { max-width: 820px; }

/* ==== requests ==== */
/* EchelonHD v2 — torrent requests (list, request page, create form). Tokens from app.css only. */
.rq-page { display: flex; flex-direction: column; gap: 16px; }
.rq-page .ph { margin-bottom: 0; }

/* list */
table.rq-table { min-width: 640px; }
.rq-c-name { min-width: 0; }
.rq-name { font-weight: 600; color: #fff; overflow-wrap: anywhere; }
.rq-name:hover { color: var(--acc); }
.rq-rowmeta { display: block; margin-top: 1px; font-size: 11.5px; color: var(--mut); }
.rq-rowmeta b { color: var(--soft); }
.rq-c-bounty { width: 110px; text-align: right; white-space: nowrap; font-family: var(--mono); font-size: 12.5px; }
.rq-c-bounty em, .rq-bonunit { margin-left: 4px; font-style: normal; font-size: 10px; color: var(--dim); }
.rq-bon { font-family: var(--mono); font-weight: 500; color: var(--amber); }
.rq-c-state { width: 140px; white-space: nowrap; }
.rq-row--filled .rq-name { color: var(--soft); }

/* request page */
.rq-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px 24px; }
.rq-head__t { min-width: 0; }
.rq-title { font-family: var(--display); font-size: clamp(18px, 2vw, 24px); font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; color: #fff; overflow-wrap: anywhere; }
.rq-head__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 6px; font-size: 12.5px; }
.rq-head__a { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rq-head__a form { display: inline; }
.rq-total { display: inline-flex; align-items: baseline; gap: 5px; margin-right: 8px; }
.rq-total b { font-family: var(--mono); font-size: 20px; font-weight: 500; color: var(--amber); }
.rq-total em { font-style: normal; font-size: 11px; color: var(--mut); }
.rq-user { font-weight: 600; color: #fff; }
.rq-user:hover { color: var(--acc); }
.rq-anon { font-size: 11px; color: var(--amber); }
.rq-link { color: var(--soft); text-decoration: underline; text-decoration-color: var(--line2); text-underline-offset: 2px; }
.rq-link:hover { color: var(--acc); }
.rq-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.rq-main, .rq-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.rq-card { padding: 16px 18px; }
.rq-card h2 { margin: 0 0 10px; font-size: 14px; color: #fff; }
.rq-card h2 .mut { font-weight: 400; margin-left: 4px; }
.rq-kv { font-size: 13px; }
.rq-kv dd { overflow-wrap: anywhere; }
.rq-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.rq-form { gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.rq-form .field { gap: 4px; }
.rq-inline { display: flex; gap: 6px; }
.rq-inline .input { flex: 1; min-width: 0; }
.rq-empty { margin: 0; padding: 14px 0 4px; font-size: 13px; color: var(--mut); }

/* bounties */
.rq-bounties { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.rq-bounty { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.rq-bounty__who { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--soft); }
.rq-bounty__n { font-family: var(--mono); font-size: 12.5px; font-weight: 500; color: var(--amber); font-variant-numeric: tabular-nums; }
.rq-bounty__age { font-size: 11.5px; min-width: 28px; text-align: right; }
.rq-bounty--empty { display: block; color: var(--mut); }
.rq-claim { margin: 0 0 8px; font-size: 13px; color: var(--soft); }

/* comments */
.rq-comment { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); }
.rq-comment--reply { margin-left: 32px; }
.rq-comment__b { min-width: 0; }
.rq-comment__h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin-bottom: 3px; font-size: 12.5px; }
.rq-comment .bb { font-size: 13px; }
.rq-comment__del { display: inline; margin-left: auto; }
.rq-comment__del button { padding: 0; border: 0; background: none; font: inherit; font-size: 12px; color: var(--mut); cursor: pointer; }
.rq-comment__del button:hover { color: var(--red); }
.rq-cform__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 12.5px; }

/* create form */
.rq-create { max-width: 760px; }
.rq-meta[hidden] { display: none; }

@media (max-width: 1360px) { .rq-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 820px) { .rq-c-state { width: auto; } }

/* ==== content ==== */
/* EchelonHD v2 — content pages (articles, pages, wiki, polls: ct-) and the members directory (mb-). Tokens only. */

/* ---- shared */
.ct-page, .mb-page { display: flex; flex-direction: column; gap: 16px; }
.ct-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12.5px; color: var(--mut); }
.ct-crumbs a { font-weight: 500; color: var(--soft); }
.ct-crumbs a:hover { color: var(--acc); }
.ct-crumbs span { font-weight: 600; color: #fff; overflow-wrap: anywhere; }
.ct-crumbs i { font-style: normal; color: var(--dim); }
.ct-empty { padding: 28px 14px; text-align: center; color: var(--mut); }
.ct-empty a, .ct-note a { color: var(--acc); }
.ct-pager { padding: 2px 4px; }
.ct-note { margin: 10px 0 0; font-size: 12.5px; color: var(--dim); }
.ct-title { font-family: var(--display); font-size: clamp(20px, 2.4vw, 28px); font-weight: 700; line-height: 1.2; letter-spacing: -0.015em; color: #fff; overflow-wrap: anywhere; }
.ct-c-date { width: 110px; white-space: nowrap; font-size: 12.5px; color: var(--mut); }

/* ---- a document: article, static page, wiki page */
.ct-doc { max-width: 820px; }
.ct-doc__h { margin-bottom: 18px; }
.ct-doc__by { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 8px 0 0; font-size: 13px; }
.ct-doc__by a { font-weight: 600; color: #fff; }
.ct-doc__by a:hover { color: var(--acc); }
.ct-doc__img { max-width: 100%; height: auto; margin-bottom: 18px; border-radius: var(--r-lg); border: 1px solid var(--line); }
.ct-doc__x { font-size: 14.5px; line-height: 1.65; color: var(--text); }
.ct-doc__x .bb-quote { color: var(--soft); }

/* ---- article list */
.ct-articles { display: flex; flex-direction: column; }
.ct-art { display: flex; gap: 18px; padding: 18px 0; border-top: 1px solid var(--line); }
.ct-art:last-child { border-bottom: 1px solid var(--line); }
.ct-art__img { flex: none; width: 160px; }
.ct-art__img img { width: 160px; height: 100px; object-fit: cover; border-radius: var(--r); background: var(--surface2); }
.ct-art__t { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ct-art h2 { font-family: var(--display); font-size: 19px; font-weight: 700; letter-spacing: -0.01em; color: #fff; overflow-wrap: anywhere; }
.ct-art h2 a:hover { color: var(--acc); }
.ct-art__meta { margin: 0; font-size: 12.5px; color: var(--mut); }
.ct-art__x { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--soft); }
.ct-more { display: inline-flex; align-items: center; gap: 3px; margin-top: 2px; font-size: 12.5px; font-weight: 600; color: var(--mut); }
.ct-more:hover { color: var(--acc); }
.ct-more svg { width: 13px; height: 13px; }

/* ---- comments under an article */
.ct-comments { display: flex; flex-direction: column; max-width: 820px; }
.ct-comment { padding: 12px 0; border-top: 1px solid var(--line); }
.ct-comment:last-child { border-bottom: 1px solid var(--line); }
.ct-comment:target { box-shadow: inset 3px 0 0 var(--acc); padding-left: 12px; }
.ct-comment__who { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 13px; }
.ct-comment__who a, .ct-comment__who b { font-weight: 600; color: #fff; }
.ct-comment__who a:hover { color: var(--acc); }
.ct-comment__x { padding-left: 30px; }
.ct-comment__del { display: inline; margin-left: auto; }
.ct-comment__del button { padding: 0; border: 0; background: none; font: inherit; font-size: 12px; color: var(--mut); cursor: pointer; }
.ct-comment__del button:hover { color: var(--red); }
.ct-cform { max-width: 820px; margin-top: 14px; }
.ct-cform__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; font-size: 12.5px; }
.sec > .alert { margin-bottom: 12px; }

/* ---- wiki index */
.ct-wlist { list-style: none; margin: 0; padding: 0; }
.ct-wlist li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 16px; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.ct-wlist li:last-child { border-bottom: 0; }
.ct-wlist li:hover { background: var(--surface2); }
.ct-wlist a { font-weight: 500; color: var(--soft); overflow-wrap: anywhere; }
.ct-wlist a:hover { color: var(--acc); }
.ct-wlist .mut { flex: none; font-size: 12px; }

/* ---- polls */
table.ct-polls { min-width: 640px; }
.ct-c-title { min-width: 0; }
.ct-poll__t { font-weight: 600; color: #fff; overflow-wrap: anywhere; }
.ct-poll__t:hover { color: var(--acc); }
.ct-is-closed .ct-poll__t { color: var(--soft); }
.ct-poll { max-width: 820px; }
.ct-opts { list-style: none; margin: 0; padding: 6px 0; }
.ct-opt { padding: 10px 16px; border-bottom: 1px solid var(--line); }
.ct-opt:last-child { border-bottom: 0; }
.ct-opt__l { display: flex; align-items: center; gap: 10px; margin-bottom: 7px; font-size: 13.5px; cursor: default; }
label.ct-opt__l { cursor: pointer; }
.ct-opt__l input { accent-color: var(--acc); margin: 0; }
.ct-opt__name { flex: 1; min-width: 0; color: var(--text); overflow-wrap: anywhere; }
.ct-opt--lead .ct-opt__name { font-weight: 600; color: #fff; }
.ct-opt__n { flex: none; font-family: var(--mono); font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--mut); }
.ct-opt__n b { color: var(--soft); }
.ct-opt__n em { font-style: normal; color: var(--dim); }
.ct-bar { display: block; height: 6px; border-radius: 3px; background: var(--surface3); overflow: hidden; }
.ct-bar i { display: block; height: 100%; min-width: 0; border-radius: 3px; background: var(--mut); }
.ct-opt--lead .ct-bar i { background: var(--acc); }
.ct-poll__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px 12px; border-top: 1px solid var(--line); font-size: 12.5px; }

/* ---- members directory */
.mb-filters .mb-search { position: relative; display: flex; align-items: center; }
.mb-filters .mb-search svg { position: absolute; left: 10px; width: 15px; height: 15px; color: var(--mut); pointer-events: none; }
.mb-filters .mb-search input { width: 100%; padding-left: 32px; }
.mb-filters .count a { color: var(--soft); }
.mb-filters .count a:hover { color: var(--acc); }
.mb-filters .count b { color: #fff; }
table.mb-table { min-width: 760px; }
.mb-table th a { color: inherit; }
.mb-table th a:hover { color: #fff; }
.mb-table th.is-on a { color: #fff; }
.mb-table th.is-on a::after { content: " ↓"; color: var(--acc); }
.mb-c-who { min-width: 0; }
.mb-who { display: inline-flex; align-items: center; gap: 9px; max-width: 100%; }
.mb-who b { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mb-who:hover b { text-decoration: underline; text-underline-offset: 2px; }
.mb-c-date { width: 110px; white-space: nowrap; font-size: 12.5px; color: var(--soft); }
.mb-table .num b { font-family: var(--mono); font-weight: 500; }

/* ==== bonus ==== */
/* Bonus pages inside the account area: earnings table, rule list, store, gifts. Tokens only; classes prefixed bn-. */
.bn { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.bn .ph__sub b { color: var(--text); }
.bn .card + .card { margin-top: 0; }
.bn-alert { margin: 0; }
.bn-alert b { color: inherit; }
.bn-note { margin: 10px 2px 0; font-size: 12.5px; color: var(--mut); }
.bn-note--pad { margin: 0; padding: 10px 16px 12px; }
.bn-note a, .bn .empty a, .bn-gift__none a { color: var(--acc); }

/* what you earn */
table.bn-seeds { min-width: 760px; }
.bn-seeds tfoot td { padding: 8px 12px; border-top: 1px solid var(--line2); font-size: 12px; }
.bn-name { min-width: 0; max-width: 420px; }
.bn-name code { display: block; font-size: 12px; color: var(--soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bn-name a:hover code { color: var(--acc); }
.bn-partial { display: block; margin-top: 1px; font-size: 11px; color: var(--amber); }
.bn-rate { font-weight: 600; color: var(--text); }
.bn-chips { display: inline-flex; flex-wrap: wrap; gap: 3px; }
.bn-chip { display: inline-block; padding: 0 6px; border-radius: 4px; background: var(--surface3); font-size: 10.5px; font-weight: 500; line-height: 17px; color: var(--soft); white-space: nowrap; }
.bn-chip b { margin-left: 1px; font-family: var(--mono); font-weight: 500; color: var(--green); }
.bn-chip--x { background: var(--acc-soft); color: var(--acc); }
.bn-chip--x b { color: var(--acc); }
.bn-chip--off { background: transparent; border: 1px dashed var(--line2); color: var(--mut); line-height: 15px; }

/* rules */
.bn-rules { list-style: none; margin: 0 12px; padding: 0; counter-reset: bn-rule; }
.bn-rule { display: grid; grid-template-columns: 28px 150px minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 8px 4px; border-bottom: 1px solid var(--line); font-size: 13.5px; counter-increment: bn-rule; }
.bn-rule:last-child { border-bottom: 0; }
.bn-rule::before { content: counter(bn-rule); font-family: var(--mono); font-size: 11.5px; color: var(--dim); text-align: right; }
.bn-rule__n { font-weight: 600; color: var(--text); }
.bn-rule__s { color: var(--soft); }
.bn-rule__s small { display: block; margin-top: 1px; font-size: 12px; }
.bn-rule--x .bn-rule__n { color: var(--acc); }

/* store + log, gifts */
.bn-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px 22px; align-items: start; }
.bn-two--gifts { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
.bn-store { list-style: none; margin: 0 12px; padding: 0; }
.bn-item { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 14px; align-items: center; padding: 9px 4px; border-bottom: 1px solid var(--line); }
.bn-item:hover { background: var(--surface2); }
.bn-item:last-child { border-bottom: 0; }
.bn-item--empty { display: block; padding: 20px 4px; text-align: center; }
.bn-item__t { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.bn-item__t b { font-size: 13.5px; }
.bn-item__t small { font-size: 12px; color: var(--mut); }
.bn-item__cost { font-family: var(--mono); font-size: 13px; font-weight: 500; color: var(--amber); white-space: nowrap; }
.bn-item__buy { display: inline; }
.bn-item__buy .btn { height: 30px; padding: 0 12px; font-size: 12.5px; }
table.bn-log { min-width: 0; }
table.bn-gifts { min-width: 520px; }
.bn-who { white-space: nowrap; }
.bn-who a { font-weight: 600; }
.bn-who a:hover { color: var(--acc); }
.bn-msg { min-width: 0; max-width: 420px; color: var(--soft); overflow-wrap: anywhere; }
.bn-gift .form { max-width: none; padding: 14px 16px 16px; }
.bn-gift__none { margin: 0; padding: 14px 16px; }
.bn-pager { padding: 10px 16px; }

@media (max-width: 1360px) { .bn-two, .bn-two--gifts { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 820px) {
  .bn-rule { grid-template-columns: 24px minmax(0, 1fr); }
  .bn-rule__s { grid-column: 2; }
  .bn-item { grid-template-columns: minmax(0, 1fr) auto; }
  .bn-item__buy { grid-column: 1 / -1; }
}

/* ==== messages ==== */
/* EchelonHD v2 — private messages (pm-) and notifications (nt-). Tokens from app.css only. */

/* ---- inbox */
.pm-unread-n, .nt-unread-n { color: var(--acc); font-weight: 600; }
.ph__actions form { display: inline; }
.pm-list, .nt-list { list-style: none; margin: 0; padding: 0; }
.pm-row { display: grid; grid-template-columns: 10px 200px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 10px 16px 10px 12px; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.pm-row:last-child { border-bottom: 0; }
.pm-row:hover { background: var(--surface2); }
.pm-row__dot, .nt-row__dot { width: 7px; height: 7px; border-radius: 50%; background: transparent; }
.pm-row.is-unread .pm-row__dot, .nt-row.is-unread .nt-row__dot { background: var(--acc); }
.pm-row__who { display: flex; flex-direction: column; gap: 3px; min-width: 0; font-size: 12.5px; }
.pm-row__p { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-weight: 500; color: var(--soft); }
.pm-row__p a { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pm-row__p a:hover { text-decoration: underline; }
.pm-row__t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pm-row__subj { font-weight: 500; color: var(--soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pm-row.is-unread .pm-row__subj { font-weight: 600; color: #fff; }
.pm-row__subj:hover { color: var(--acc); }
.pm-row__snip { font-size: 12px; color: var(--mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pm-row__snip b { font-weight: 500; color: var(--soft); }
.pm-row__n { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--mut); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pm-row__del { display: inline; }
.pm-x, .nt-x, .nt-act { height: 22px; min-width: 22px; padding: 0 6px; border: 0; border-radius: 4px; background: transparent; color: var(--dim); font: inherit; font-size: 12px; cursor: pointer; }
.pm-x, .nt-x { font-size: 16px; line-height: 1; }
.pm-x:hover, .nt-x:hover { background: var(--surface3); color: var(--red); }
.nt-act:hover { background: var(--surface3); color: #fff; }
.pm-empty, .nt-empty { padding: 28px 14px; text-align: center; color: var(--mut); }
.pm-empty a, .nt-empty a { color: var(--acc); }

/* ---- thread */
.pm-page { display: flex; flex-direction: column; gap: 16px; }
.pm-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px 24px; }
.pm-head__t { min-width: 0; }
.pm-head__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 6px; font-size: 12.5px; }
.pm-head__a { display: flex; gap: 8px; }
.pm-head__a form { display: inline; }
.pm-msgs { display: flex; flex-direction: column; gap: 10px; }
.pm-msg { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; padding: 12px 16px 12px 12px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.pm-msg:target { border-color: var(--acc); }
.pm-msg--mine { background: var(--surface2); }
.pm-av { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: var(--surface3); }
.pm-av--txt { display: grid; place-items: center; color: #fff; font-size: 16px; font-weight: 600; text-transform: uppercase; }
.pm-msg__b { min-width: 0; }
.pm-msg__h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin-bottom: 6px; font-size: 12px; color: var(--mut); }
.pm-msg__user { font-size: 13.5px; font-weight: 600; color: #fff; }
.pm-msg__user:hover { text-decoration: underline; }
.pm-msg__group { font-weight: 600; }
.pm-msg__time { margin-left: auto; color: var(--dim); white-space: nowrap; }
.pm-msg__time:hover { color: var(--text); }
.pm-reply__f { padding: 12px 16px 14px; }
.pm-reply__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; font-size: 12.5px; }

/* ---- compose */
.pm-compose { max-width: 720px; padding: 16px; }
.acct__body > .alert { margin-top: -6px; }

/* ---- notifications */
.nt-row { display: grid; grid-template-columns: 10px 82px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 9px 16px 9px 12px; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.nt-row:last-child { border-bottom: 0; }
.nt-row:hover { background: var(--surface2); }
.nt-kind { display: inline-block; padding: 0 6px; border-radius: 4px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em; line-height: 17px; text-align: center; background: var(--surface3); color: var(--soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nt-kind--social { background: rgba(96, 165, 250, 0.14); color: var(--blue); }
.nt-kind--bonus { background: rgba(251, 191, 36, 0.16); color: var(--amber); }
.nt-kind--up { background: rgba(74, 222, 128, 0.14); color: var(--green); }
.nt-kind--warn { background: rgba(248, 113, 113, 0.14); color: var(--red); }
.nt-row__t { min-width: 0; }
.nt-row__line { display: block; color: var(--soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nt-row.is-unread .nt-row__line { color: #fff; font-weight: 500; }
a.nt-row__line:hover { color: var(--acc); }
.nt-row__n { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--mut); white-space: nowrap; font-variant-numeric: tabular-nums; }
.nt-row__n form { display: inline; }

@media (max-width: 820px) {
  .pm-row { grid-template-columns: 10px minmax(0, 1fr) auto; }
  .pm-row__who { grid-column: 2; flex-direction: row; flex-wrap: wrap; gap: 4px 10px; }
  .pm-row__t { grid-column: 2; }
  .pm-row__n { grid-column: 3; grid-row: 1 / span 2; }
  .nt-row { grid-template-columns: 10px minmax(0, 1fr) auto; }
  .nt-kind { grid-column: 2; justify-self: start; }
  .nt-row__t { grid-column: 2; }
  .nt-row__n { grid-column: 3; grid-row: 1 / span 2; }
  .nt-row__line { white-space: normal; }
}

/* ==== settings ==== */
/* EchelonHD v2 — member settings, inside the account area: tabs under the header, one card per form. */
.st { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.st-tabs { flex-wrap: wrap; margin-bottom: 4px; }
.st-tabs a { display: inline-flex; align-items: center; gap: 4px; }
.st-tab__php { font-style: normal; font-size: 11px; color: var(--dim); }
.st-alert { margin: 0; }
.st-alert b { color: inherit; }
.st-alert__list { margin: 4px 0 0; padding-left: 18px; }
.st .card + .card { margin-top: 0; }
.st-form { gap: 14px; padding: 16px 18px; }
.st-form .form__actions { padding-top: 10px; border-top: 1px solid var(--line); font-size: 12.5px; }
.st-row { gap: 12px 20px; }

/* sections: hairline fieldsets, no cards */
.st-fs { min-width: 0; margin: 0; padding: 12px 0 2px; border: 0; border-top: 1px solid var(--line); }
.st-fs legend { padding: 0 8px 0 0; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mut); }
.st-help { margin: 4px 0 0; }
.st-flags { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px 18px; padding: 8px 0 10px; }
.st-flag { align-items: flex-start; }
.st-flag input[type=checkbox] { flex: none; margin: 2px 0 0; }
.st-flag__t { display: flex; flex-direction: column; gap: 1px; line-height: 1.35; }
.st-flag__t small { font-size: 11.5px; color: var(--mut); }

/* home-page block order */
.st-blocks { list-style: none; margin: 8px 0 10px; padding: 0; border-top: 1px solid var(--line); }
.st-block { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 4px; border-bottom: 1px solid var(--line); }
.st-block:hover { background: var(--surface); }
.st-block__pos { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; }
.st-block__pos .input { width: 64px; height: 30px; padding: 0 8px; text-align: right; font-family: var(--mono); }

/* per-group grids */
.st-gridwrap { margin: 8px 0 10px; }
.st-grid { min-width: 560px; }
.st-grid__g { font-weight: 600; white-space: nowrap; }
.st-grid__c { text-align: center; }
.st-grid__c input { width: 15px; height: 15px; margin: 0; accent-color: var(--acc); vertical-align: middle; }

/* profile */
.st-avatar { display: flex; align-items: flex-start; gap: 16px; }
.st-avatar__img { flex: none; width: 72px; height: 72px; border-radius: 50%; object-fit: cover; background: var(--surface3); }
.st-avatar__img--txt { display: grid; place-items: center; color: var(--text); font-size: 28px; font-weight: 600; text-transform: uppercase; }
.st-avatar .field { flex: 1; min-width: 0; }
.st-file { height: auto; padding: 6px 10px; font-size: 13px; }
.st-file::file-selector-button { margin-right: 10px; padding: 4px 10px; border: 1px solid var(--line2); border-radius: var(--r); background: var(--surface2); color: var(--text); font: inherit; cursor: pointer; }
.st-sig { min-height: 80px; }

/* email / password: form beside its history */
.st-two { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px 22px; align-items: start; }
.st-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.st-static { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 36px; font-size: 13.5px; }
.st-static code { font-size: 13px; color: var(--text); }
.st-hist .table td { font-family: var(--mono); font-size: 12.5px; }
.st-note { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; max-width: 640px; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface2); font-size: 12.5px; color: var(--mut); }
.st-note a { color: var(--acc); }
.st-more { margin: 4px 0 0; font-size: 12.5px; }
.st-more a { color: var(--soft); }
.st-more a:hover { color: var(--acc); }

@media (max-width: 1360px) { .st-two { grid-template-columns: minmax(0, 1fr); } }

/* ==== upload ==== */
/* Upload form (up-…) and member history / active peers (hist-…). Tokens from app.css only. */

/* ---- upload */
.up-alert { margin-bottom: 18px; }
.up-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 26px; align-items: start; }
.up-form { gap: 24px; min-width: 0; }
.up-fs { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; border: 0; min-width: 0; }
.up-fs__h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.up-fs__h h2 { font-size: 14px; font-weight: 600; color: #fff; }
.up-fs__h span { font-size: 12px; color: var(--mut); }
.up-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px 14px; }
.up-row--2 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.up-mono { font-family: var(--mono); font-size: 12.5px; }
.up-file { padding: 6px 10px; line-height: 22px; color: var(--soft); cursor: pointer; }
.up-file::file-selector-button { margin-right: 10px; padding: 0 10px; height: 22px; border-radius: 4px; border: 1px solid var(--line2); background: var(--surface2); color: #fff; font: inherit; font-size: 12px; font-weight: 500; cursor: pointer; }
.up-file:hover::file-selector-button { border-color: var(--mut); }
.up-checks { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.up-staff { padding: 14px 16px; border: 1px dashed var(--line2); border-radius: var(--r-lg); background: var(--surface); }
.up-staff .up-fs__h h2 { color: var(--amber); }
.up-form .form__actions { padding-top: 8px; border-top: 1px solid var(--line); }
.up-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.up-side .card { padding: 14px 16px; }
.up-side h2 { margin: 0 0 8px; font-size: 13px; font-weight: 600; color: #fff; }
.up-side ul { margin: 0; padding-left: 18px; font-size: 12.5px; line-height: 1.5; color: var(--soft); }
.up-side li + li { margin-top: 6px; }
.up-side code { font-size: 11.5px; color: var(--text); }

/* ---- history / active peers */
.hist-tabs { margin-bottom: 14px; }
.hist-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.hist-filters a { display: inline-flex; align-items: center; height: 28px; padding: 0 11px; border: 1px solid var(--line2); border-radius: 999px; font-size: 12.5px; font-weight: 500; color: var(--soft); }
.hist-filters a:hover { border-color: var(--mut); color: #fff; }
.hist-filters a.is-on { background: var(--surface2); color: #fff; box-shadow: inset 0 -2px 0 var(--acc); }
.hist-t { min-width: 960px; }
.hist-t td { font-size: 12.5px; }
.hist-t .num small { display: block; font-size: 10.5px; font-weight: 400; color: var(--dim); }
.hist-c-name { min-width: 0; max-width: 460px; }
.hist-c-agent { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--mono); font-size: 11.5px; color: var(--soft); }
.hist-name { display: block; font-family: var(--mono); font-size: 12.5px; color: #fff; overflow-wrap: anywhere; }
a.hist-name:hover { color: var(--acc); }
.hist-name--gone { color: var(--mut); text-decoration: line-through; }
.hist-sub { display: block; margin-top: 1px; font-size: 11px; color: var(--mut); }
.hist-flags { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.hist-r--hnr td:first-child { box-shadow: inset 3px 0 0 var(--red); }
.hist-r--stale .hist-name, .hist-r--stale .hist-c-agent { color: var(--mut); }
.hist-pager { padding-left: 2px; }

@media (max-width: 1000px) { .up-grid { grid-template-columns: minmax(0, 1fr); } .up-side { order: -1; } }

/* ==== account1 ==== */
/* Account area lists (a1-…): uploads, bookmarks, watchlist, reseed pledges, forum posts/topics,
   achievements, followers, warnings, plus the history pages' filter strip in a card header.
   Tokens from app.css only. */

.a1-flash { margin: 0; }
.a1-private { padding: 40px; text-align: center; color: var(--mut); }
.a1-pager { padding-left: 2px; }
.a1-inline { margin-bottom: 0; }
.a1-filters { margin-bottom: 0; }
.a1-q { flex: 1 1 220px; max-width: 360px; }
.a1-form { padding: 14px 16px 16px; }
.a1-form .form__row { grid-template-columns: 160px minmax(160px, 1fr) minmax(200px, 2fr); }
.a1-form .form__row:has(> .field:nth-child(2):last-child) { grid-template-columns: minmax(160px, 1fr) minmax(160px, 1fr); }
.a1-btn { height: 28px; padding: 0 10px; font-size: 12px; }

/* rows with a trailing action (remove / withdraw) */
.a1-row--act { grid-template-columns: 34px minmax(0, 1fr) auto auto; }
.a1-act { display: flex; align-items: center; }
.a1-name { color: #fff; min-width: 0; display: block; }
.a1-name b { display: block; }
.a1-name:hover b { color: var(--acc); }
.row__n .a1-btn { margin-bottom: 2px; }

/* tables */
.a1-t td { font-size: 12.5px; }
.a1-c-name { min-width: 0; max-width: 420px; }
.a1-c-reason { min-width: 220px; max-width: 460px; white-space: pre-line; overflow-wrap: anywhere; }
.a1-c-act { text-align: right; white-space: nowrap; }
.a1-tname { display: block; font-family: var(--mono); font-size: 12.5px; color: #fff; overflow-wrap: anywhere; }
a.a1-tname:hover { color: var(--acc); }
.a1-tname--gone { color: var(--mut); text-decoration: line-through; }
.a1-sub { display: block; margin-top: 1px; font-size: 11px; color: var(--mut); }
.a1-topic { font-weight: 500; color: #fff; }
.a1-topic:hover { color: var(--acc); }
.a1-warn--on td:first-child { box-shadow: inset 3px 0 0 var(--red); }

/* pledge progress: a hairline bar before the seeded time, width from a1-p0 … a1-p100 */
.a1-bar { display: inline-block; vertical-align: middle; width: 56px; height: 4px; margin-right: 8px; border-radius: 2px; background: var(--surface3); overflow: hidden; }
.a1-bar__f { display: block; height: 100%; background: var(--green); width: 0; }
.a1-p100 { width: 100%; } .a1-p90, .a1-p91, .a1-p92, .a1-p93, .a1-p94, .a1-p95, .a1-p96, .a1-p97, .a1-p98, .a1-p99 { width: 90%; }
.a1-p80, .a1-p81, .a1-p82, .a1-p83, .a1-p84, .a1-p85, .a1-p86, .a1-p87, .a1-p88, .a1-p89 { width: 80%; }
.a1-p70, .a1-p71, .a1-p72, .a1-p73, .a1-p74, .a1-p75, .a1-p76, .a1-p77, .a1-p78, .a1-p79 { width: 70%; }
.a1-p60, .a1-p61, .a1-p62, .a1-p63, .a1-p64, .a1-p65, .a1-p66, .a1-p67, .a1-p68, .a1-p69 { width: 60%; }
.a1-p50, .a1-p51, .a1-p52, .a1-p53, .a1-p54, .a1-p55, .a1-p56, .a1-p57, .a1-p58, .a1-p59 { width: 50%; }
.a1-p40, .a1-p41, .a1-p42, .a1-p43, .a1-p44, .a1-p45, .a1-p46, .a1-p47, .a1-p48, .a1-p49 { width: 40%; }
.a1-p30, .a1-p31, .a1-p32, .a1-p33, .a1-p34, .a1-p35, .a1-p36, .a1-p37, .a1-p38, .a1-p39 { width: 30%; }
.a1-p20, .a1-p21, .a1-p22, .a1-p23, .a1-p24, .a1-p25, .a1-p26, .a1-p27, .a1-p28, .a1-p29 { width: 20%; }
.a1-p10, .a1-p11, .a1-p12, .a1-p13, .a1-p14, .a1-p15, .a1-p16, .a1-p17, .a1-p18, .a1-p19 { width: 10%; }
.a1-p1, .a1-p2, .a1-p3, .a1-p4, .a1-p5, .a1-p6, .a1-p7, .a1-p8, .a1-p9 { width: 4%; }

/* forum posts and the posts/topics switch inside a card header */
.a1-tabs { margin: -11px 0; border-bottom: 0; }
.a1-tabs a { padding: 11px 12px; margin-bottom: 0; }
.a1-posts { list-style: none; margin: 0; padding: 0; }
.a1-post { padding: 10px 16px; border-bottom: 1px solid var(--line); }
.a1-post:last-child { border-bottom: 0; }
.a1-post:hover { background: var(--surface2); }
.a1-post__h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 13px; }
.a1-post__topic { font-weight: 600; color: #fff; }
.a1-post__topic:hover { color: var(--acc); }
.a1-post__h .mut a { color: var(--soft); }
.a1-post__age { margin-left: auto; font-size: 12px; white-space: nowrap; }
.a1-post__x { margin: 4px 0 0; font-size: 13px; line-height: 1.5; color: var(--soft); overflow-wrap: anywhere; }
.a1-post--empty { padding: 28px; text-align: center; color: var(--mut); }
.a1-post--empty a { color: var(--acc); }

/* achievements */
.a1-ach { list-style: none; margin: 0; padding: 0; }
.a1-ach__i { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--line); }
.a1-ach__i:last-child { border-bottom: 0; }
.a1-ach__mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--surface3); color: var(--mut); }
.a1-ach__mark svg { width: 16px; height: 16px; }
.a1-ach__i.is-on .a1-ach__mark { background: rgba(251, 191, 36, 0.16); color: var(--amber); }
.a1-ach__t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.a1-ach__t b { font-size: 13.5px; color: var(--soft); }
.a1-ach__i.is-on .a1-ach__t b { color: #fff; }
.a1-ach__d { font-size: 12.5px; color: var(--mut); }
.a1-ach__n { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.a1-ach__pts { font-weight: 600; color: var(--soft); }
.a1-ach__i--empty { display: block; padding: 28px; text-align: center; color: var(--mut); }

/* followers */
.a1-people { list-style: none; margin: 0; padding: 0; }
.a1-people li { border-bottom: 1px solid var(--line); }
.a1-people li:last-child { border-bottom: 0; }
.a1-person { padding: 8px 16px; border-radius: 0; gap: 12px; }
.a1-person:hover { background: var(--surface2); }
.a1-person__t { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.a1-person__t b { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.a1-person__t .rank { align-self: flex-start; }
.a1-person__age { margin-left: auto; font-size: 12px; white-space: nowrap; }
.a1-people__empty { padding: 28px; text-align: center; color: var(--mut); }
.a1-people__empty a { color: var(--acc); }

@media (max-width: 760px) {
  .a1-form .form__row, .a1-form .form__row:has(> .field:nth-child(2):last-child) { grid-template-columns: minmax(0, 1fr); }
  .a1-row--act { grid-template-columns: 34px minmax(0, 1fr); }
  .a1-row--act .row__n { grid-column: 2; align-items: flex-start; }
  .a1-row--act .a1-act { grid-column: 2; }
}

/* ==== account2 ==== */
/* EchelonHD v2 — account area, part two: keys & API, RSS feeds, invitations, seedbox IPs.
   Layout only; colours and type come from the tokens in app.css. */
.a2-flash { margin: 0; }

/* a card body: one column of explanation, values, form, history */
.a2-key { display: flex; flex-direction: column; gap: 14px; padding: 16px; }
.a2-key__what { margin: 0; max-width: 760px; font-size: 13.5px; line-height: 1.55; color: var(--soft); }
.a2-key__what code { font-family: var(--mono); font-size: 12px; color: var(--text); }
.a2-kv { padding: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.a2-kv__wide { grid-column: 1 / -1; }
.a2-url code { max-width: 640px; }
.a2-reset { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.a2-reset--pad { padding: 16px; border-top: 0; }
.a2-reset .help { max-width: 560px; font-size: 12px; line-height: 1.45; color: var(--mut); }
.a2-hist summary { cursor: pointer; font-size: 12.5px; color: var(--mut); }
.a2-hist summary:hover { color: var(--text); }
.a2-hist__t { margin-top: 8px; }
.a2-steps { margin: 0; padding-left: 18px; max-width: 760px; font-size: 13px; line-height: 1.6; color: var(--soft); }
.a2-steps code { font-family: var(--mono); font-size: 12px; color: var(--text); }
.a2-feeds__name, .a2-seedboxes__name { font-weight: 600; color: #fff; white-space: nowrap; }
.a2-ip { font-family: var(--mono); font-size: 12.5px; color: var(--text); }
.a2-actions { white-space: nowrap; text-align: right; }
.a2-actions .btn { height: 28px; padding: 0 10px; font-size: 12px; }
.a2-inline { display: inline; }
.a2-empty { margin: 0; padding: 20px 16px; font-size: 13.5px; color: var(--mut); }
.a2-empty a { color: var(--acc); }

/* forms */
.a2-form { padding: 16px; gap: 16px; }
.a2-texts { gap: 12px 16px; }
.a2-lists { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.a2-list { display: flex; flex-direction: column; gap: 2px; max-height: 220px; overflow: auto; padding: 8px 10px; border: 1px solid var(--line2); border-radius: var(--r); background: var(--bg); }
.a2-list .check { font-size: 13px; }
.a2-flags { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px 16px; padding-top: 12px; border-top: 1px solid var(--line); }
.a2-flag { align-items: flex-start; }
.a2-flag input { flex: none; margin: 3px 0 0; }
.a2-flag small { display: block; font-size: 11.5px; line-height: 1.35; color: var(--mut); }
.a2-new summary { padding: 12px 16px; cursor: pointer; font-size: 14px; font-weight: 600; color: #fff; }
.a2-new[open] summary { border-bottom: 1px solid var(--line); }

/* invitations */
.a2-newinvite { border-color: rgba(74, 222, 128, 0.4); }
.a2-link { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.a2-link__url { padding: 6px 10px; border-radius: var(--r); background: var(--bg); font-family: var(--mono); font-size: 13px; color: var(--text); overflow-wrap: anywhere; }
.a2-email { font-family: var(--mono); font-size: 12.5px; }
.a2-msg { max-width: 320px; font-size: 12.5px; line-height: 1.4; color: var(--soft); white-space: pre-line; overflow-wrap: anywhere; }
.a2-note-txt { display: block; margin-top: 4px; font-size: 11.5px; color: var(--amber); }
.a2-invites .secret code { max-width: 300px; }

/* invite tree */
.a2-tree { list-style: none; margin: 0; padding: 0 0 0 18px; border-left: 1px solid var(--line); }
.a2-tree--root { padding-left: 0; border-left: 0; }
.a2-tree li { padding: 4px 0; }
.a2-tree__who { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 8px; font-size: 13.5px; }
.a2-tree__who a { font-weight: 600; }
.a2-tree__who .mut, .a2-tree__who .dim { font-size: 12px; }

@media (max-width: 1000px) { .a2-kv { grid-template-columns: minmax(0, 1fr); } .a2-url code { max-width: 100%; } }

/* ==== site ==== */
/* EchelonHD v2 — help desk, playlists, stats, trending, torrent edit, reports, contact. Tokens from app.css only. */
.si-page { display: flex; flex-direction: column; gap: 16px; }
.si-page .ph { margin-bottom: 0; }
.si-page .tabs { margin-bottom: 0; }
.si-empty { margin: 0; padding: 14px 0 4px; font-size: 13px; color: var(--mut); }
.si-empty a, .si-link { color: var(--acc); }
.si-empty--wide { grid-column: 1 / -1; padding: 28px; text-align: center; }
.si-user { font-weight: 600; color: #fff; }
.si-user:hover { color: var(--acc); }
.si-mono { font-family: var(--mono); font-size: 12.5px; }

/* page head with title, meta and actions (ticket, playlist) */
.si-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px 24px; }
.si-head__t { min-width: 0; }
.si-title { font-family: var(--display); font-size: clamp(18px, 2vw, 24px); font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; color: #fff; overflow-wrap: anywhere; }
.si-head__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 6px; font-size: 12.5px; }
.si-head__a { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.si-head__a form { display: inline; }
.si-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.si-main, .si-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.si-card { padding: 16px 18px; }
.si-card h2 { margin: 0 0 10px; font-size: 14px; color: #fff; }
.si-card h2 .mut { font-weight: 400; margin-left: 4px; }
.si-kv { font-size: 13px; }
.si-kv dd { overflow-wrap: anywhere; }
.si-form { gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.si-form .field { gap: 4px; }
.si-inline { display: flex; gap: 6px; }
.si-inline .select { flex: 1; min-width: 0; }
.si-create { max-width: 760px; }

/* help desk list */
.si-tickets .si-c-subj { min-width: 0; }
.si-subj { font-weight: 600; color: #fff; overflow-wrap: anywhere; }
.si-subj:hover { color: var(--acc); }
.si-c-subj .pill { margin-left: 6px; vertical-align: 1px; }
.si-unread .si-subj { color: #fff; }
.si-closed .si-subj { color: var(--soft); font-weight: 500; }
.si-prio { font-weight: 600; }
.si-c-age { width: 72px; text-align: right; white-space: nowrap; }

/* ticket thread */
.si-msg { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.si-card > .si-msg:first-child, .si-card > .si-msg:first-of-type { border-top: 0; padding-top: 0; }
.si-msg .av--sm { margin-top: 2px; justify-self: center; }
.si-msg__b { min-width: 0; }
.si-msg__h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin-bottom: 3px; font-size: 12.5px; }
.si-msg .bb { font-size: 13px; }
.si-msg--note { padding-left: 10px; border-left: 3px solid var(--amber); background: rgba(251, 191, 36, 0.05); border-radius: 0 var(--r) var(--r) 0; }
.si-files { list-style: none; margin: 0; padding: 0; }
.si-files li { display: flex; flex-direction: column; gap: 1px; padding: 6px 0; border-top: 1px solid var(--line); font-size: 12.5px; }
.si-files code { color: var(--soft); overflow-wrap: anywhere; }

/* playlists */
.si-plgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.si-pl { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.si-pl:hover { border-color: var(--mut); }
.si-pl__img { width: 64px; height: 96px; border-radius: var(--r); object-fit: cover; background: var(--surface2); }
.si-pl__img--none { display: grid; place-items: center; font-family: var(--display); font-size: 28px; font-weight: 700; color: var(--dim); text-transform: uppercase; }
.si-pl__t { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.si-pl__t b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.si-pl__meta { font-size: 11.5px; color: var(--mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.si-pl__flags { display: flex; flex-wrap: wrap; gap: 4px; }
.si-pl__flags:empty { display: none; }
.si-plhead { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px 22px; }
.si-plhead__img { width: 110px; aspect-ratio: 2 / 3; object-fit: cover; border-radius: var(--r); background: var(--surface2); }
.si-plhead__t { flex: 1 1 320px; min-width: 0; }
.si-plhead__d { margin-top: 10px; }
.si-plhead .si-head__a { margin-left: auto; }
.si-c-x { width: 36px; text-align: center; }
.si-c-x form { display: inline; }
.si-x { width: 26px; height: 26px; border: 1px solid var(--line2); border-radius: var(--r); background: var(--surface2); color: var(--mut); font: 16px/1 var(--sans); cursor: pointer; }
.si-x:hover { color: var(--red); border-color: var(--red); }
.si-addpl { display: flex; gap: 6px; padding: 12px 16px; }
.si-addpl .select { flex: 1; min-width: 0; }

/* stats */
.si-totals { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.si-totals dd .mut { font-weight: 400; }
.si-tabs { flex-wrap: wrap; }
.si-rank .num { width: 140px; }
.si-member { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: #fff; }
.si-member:hover b { color: var(--acc); }
.si-c-rank { width: 40px; }

/* torrent page additions */
.si-subs .num { width: 90px; }
.si-subs__f { color: var(--soft); overflow-wrap: anywhere; }
.si-subs__dl { font-size: 16px; color: var(--soft); }
.si-subs__dl:hover { color: var(--green); }
.si-subs__dl svg { width: 16px; height: 16px; }
.si-danger summary h2 { color: var(--red); }
.si-delete { margin-top: 12px; max-width: none; }

/* torrent edit */
.si-edit { max-width: 980px; }
.si-fs { margin: 0; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); display: flex; flex-direction: column; gap: 14px; }
.si-fs__h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.si-fs__h h2 { font-size: 14px; color: #fff; }
.si-fs__h span { font-size: 12px; color: var(--mut); }
.si-checks { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.si-staff { border-color: rgba(255, 79, 94, 0.35); }
.si-subject { padding: 8px 12px; border-radius: var(--r); background: var(--surface2); font-size: 13.5px; overflow-wrap: anywhere; }

@media (max-width: 1360px) { .si-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 1000px) { .si-totals { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 820px) { .si-c-age { width: auto; } .si-rank .num { width: auto; } }
.sec__h a[hidden] { display: none; }

/* IRC chat extras */
.msg--info { display: block; padding: 2px 8px 2px 43px; font-size: 11.5px; color: var(--dim); }
.msg--action .msg__x { font-style: italic; color: var(--mut); }
.irc__topic { flex: 1; min-width: 0; margin: 0 12px; font-size: 12px; color: var(--mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg__h time { font-family: var(--mono); }

.stf-logs td.stf-when { font-family: var(--mono); font-size: 12px; white-space: nowrap; color: var(--mut); }

/* signed-out pages: the form on the left, the mark on the right */
.au { display: grid; grid-template-columns: minmax(360px, 520px) 1fr; min-height: 100vh; }
.au__main { display: flex; flex-direction: column; padding: 34px 48px 28px; background: var(--bg); }
.au__brand { display: inline-flex; align-items: center; gap: 7px; font: 700 19px/1 var(--display); letter-spacing: -0.02em; color: #fff; }
.au__brand i { width: 9px; height: 20px; border-radius: 2px; background: var(--acc); }
.au__brand b { color: var(--acc); font-weight: 700; }
.au__box { width: 100%; max-width: 380px; margin: 11vh 0 auto; }
.au__box h1 { margin-bottom: 18px; font: 600 26px/1.15 var(--display); letter-spacing: -0.02em; color: #fff; }
.au__box .alert { margin-bottom: 16px; }
.au__lead { margin: -6px 0 18px; color: var(--soft); }
.au__form { max-width: none; }
.au__form .field > label { display: flex; justify-content: space-between; }
.au__aside { font-weight: 400; color: var(--mut); }
.au__aside:hover, .au__alt a:hover { color: #fff; }
.au__go { justify-content: center; height: 40px; font-weight: 600; }
.au__alt { margin: 18px 0 0; font-size: 13px; color: var(--mut); }
.au__alt a { color: var(--soft); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line2); }
.au__link { padding: 0; border: 0; background: none; font: inherit; color: var(--soft); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.au__link:hover { color: #fff; }
.au__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.au__code { font: 500 22px/1 var(--mono); letter-spacing: 0.3em; height: 48px; text-align: center; }
.au__small { margin: 28px 0 0; font-size: 12px; color: var(--dim); }
.au__side { position: relative; display: flex; flex-direction: column; justify-content: flex-end; padding: 56px; overflow: hidden; border-left: 1px solid var(--line); background: var(--bg-sb);
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 56px 56px; background-position: -1px -1px; }
.au__side::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 100% 0%, transparent 30%, var(--bg-sb) 78%); pointer-events: none; }
.au__mark { position: relative; z-index: 1; font: 800 clamp(64px, 9vw, 148px)/0.86 var(--display); letter-spacing: -0.045em; color: #fff; }
.au__mark span { display: block; }
.au__mark b { display: block; color: var(--acc); font-weight: 800; }
.au__lines { position: relative; z-index: 1; margin: 30px 0 0; padding: 0; list-style: none; color: var(--soft); font-size: 14px; }
.au__lines li { padding: 9px 0; border-top: 1px solid var(--line2); max-width: 420px; }
@media (max-width: 860px) {
  .au { grid-template-columns: 1fr; }
  .au__side { display: none; }
  .au__main { padding: 24px 20px; }
  .au__box { margin-top: 7vh; }
}

/* two-factor setup */
.tf-lead { margin: 0 0 16px; max-width: 70ch; color: var(--soft); }
.tf-setup { display: grid; grid-template-columns: 208px minmax(0, 1fr); gap: 26px; align-items: start; }
.tf-qr { padding: 0; border-radius: var(--r); overflow: hidden; line-height: 0; }
.qr { width: 208px; height: 208px; stroke: none; }
.tf-steps ol { margin: 0 0 18px; padding-left: 18px; color: var(--soft); }
.tf-steps li + li { margin-top: 8px; }
.tf-key { display: inline-block; margin-top: 6px; padding: 5px 9px; border-radius: 4px; background: var(--bg); border: 1px solid var(--line2); font-size: 13px; letter-spacing: 0.06em; color: #fff; user-select: all; }
.tf-cancel { margin-top: 14px; font-size: 13px; }
.tf-codes { border-color: rgba(251, 191, 36, 0.4); }
.tf-list { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: 6px 34px; margin: 12px 0 16px; padding-left: 22px; color: var(--mut); }
.tf-list code { font-size: 13.5px; color: #fff; user-select: all; }
.tf-off { border-color: rgba(248, 113, 113, 0.4); color: var(--red); }
.card__b { padding: 16px; }
@media (max-width: 640px) { .tf-setup { grid-template-columns: 1fr; } }

/* top bar: sign out; the rules banner; the 404 page */
.topme__out { display: inline-flex; margin-left: 2px; }
.rulesbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; padding: 10px 28px; border-bottom: 1px solid rgba(251, 191, 36, 0.35); background: rgba(251, 191, 36, 0.07); font-size: 13.5px; color: var(--soft); }
.rulesbar a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.nf { padding: 9vh 0; max-width: 520px; }
.nf__code { margin: 0 0 6px; font: 500 13px/1 var(--mono); letter-spacing: 0.12em; color: var(--acc); }
.nf h1 { font: 600 30px/1.15 var(--display); letter-spacing: -0.02em; color: #fff; }
.nf p.mut { margin: 10px 0 22px; }
.nf__go { display: flex; flex-wrap: wrap; gap: 8px; }
.rulesbar__go { background: var(--acc); border-color: var(--acc); font-weight: 600; }

/* staff hub: the grouped menu beside every staff page */
.hub { grid-template-columns: 216px minmax(0, 1fr); }
.hub__nav { padding: 8px; max-height: calc(100vh - 92px); overflow-y: auto; scrollbar-width: thin; }
.hub__head { display: flex; flex-direction: column; gap: 1px; padding: 8px 10px 12px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.hub__head span { font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--acc); }
.hub__head b { font: 600 15px/1.2 var(--display); }
.hub__g { border-bottom: 1px solid var(--line); }
.hub__g:last-child { border-bottom: 0; }
.hub__g summary { display: flex; align-items: center; justify-content: space-between; padding: 9px 10px; font-size: 11px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--mut); cursor: pointer; list-style: none; user-select: none; }
.hub__g summary::-webkit-details-marker { display: none; }
.hub__g summary::after { content: ""; width: 6px; height: 6px; border-right: 1.5px solid var(--dim); border-bottom: 1.5px solid var(--dim); transform: rotate(-45deg); transition: transform 0.12s; }
.hub__g[open] summary::after { transform: rotate(45deg); }
.hub__g summary:hover { color: var(--soft); }
.hub__g .acct__links { padding: 0 0 8px; }
.hub__g .acct__links a { justify-content: space-between; height: 29px; }
.hub__g .acct__links a.is-on { box-shadow: inset 2px 0 0 var(--acc); }
.hub__kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hub__kpis .kpi small { display: block; font-size: 11.5px; color: var(--mut); }
.hub__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
.hub__cols--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hub__cols .card + .card { margin-top: 0; }
.hub__row { display: flex; flex-direction: column; gap: 9px; padding: 12px 16px; border-top: 1px solid var(--line); }
.hub__row:first-of-type { border-top: 0; }
.hub__empty { margin: 0; padding: 22px 16px; color: var(--mut); }
.hub__list { list-style: none; margin: 0; padding: 4px 16px 10px; }
.hub__list li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px solid var(--line); font-size: 13px; }
.hub__list li:first-child { border-top: 0; }
.hub__list code { font-size: 11.5px; color: var(--mut); }
.dot { display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--dim); }
.dot--ok { background: var(--green); } .dot--warn { background: var(--amber); }
.hub__mail { display: flex; flex-direction: column; gap: 8px; }
.hub__msg summary { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; padding: 12px 16px; cursor: pointer; font-size: 13.5px; }
.hub__msg pre { margin: 0; padding: 14px 16px; border-top: 1px solid var(--line); font: 12.5px/1.55 var(--mono); color: var(--soft); white-space: pre-wrap; overflow-wrap: anywhere; user-select: all; }
.kvgrid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stf-watch { margin: 0; padding: 10px 16px; border-top: 1px solid rgba(251, 191, 36, 0.35); background: rgba(251, 191, 36, 0.06); font-size: 13px; color: var(--soft); }
.stf-tools { display: flex; flex-direction: column; padding: 6px 16px 12px; }
.stf-tools > div { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 12.5px; }
.stf-tools > div:first-of-type { border-top: 0; }
.stf-tools .btn { flex: none; min-width: 172px; justify-content: center; }
.stf-tools .btn[disabled], .btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.stf-days { flex: 0 0 76px !important; width: 76px !important; }
.stf-inline { display: inline; margin-left: 8px; font-size: 12.5px; }
.tf-steps .au__code { max-width: 240px; }
.dn { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 22px; align-items: start; }
.dn__packs { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.dn__pack { padding: 16px; }
.dn__pack header { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.dn__pack h2 { font-size: 15px; }
.dn__pack header b { font: 600 20px/1 var(--display); color: var(--acc); }
.dn__pack p { margin: 8px 0 10px; font-size: 13px; color: var(--soft); }
.dn__pack ul, .dn__steps { margin: 0; padding-left: 18px; font-size: 13px; color: var(--soft); }
.dn__steps { margin-bottom: 16px; }
.dn__steps > li + li { margin-top: 8px; }
.dn__steps ul { margin: 6px 0 0; padding-left: 16px; }
.dn__steps code { font-size: 12px; color: #fff; user-select: all; overflow-wrap: anywhere; }
@media (max-width: 1100px) { .hub__cols, .hub__cols--3, .dn { grid-template-columns: 1fr; } .hub__kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kvgrid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .hub { grid-template-columns: 1fr; } .hub__nav { position: static; max-height: none; } }

/* torrent page: second row of actions; who-is-on-it page */
.t-actions--more { margin-top: 8px; align-items: center; }
.t-actions--more .btn .mut { margin-left: 4px; font-weight: 400; }
.t-tip { display: inline-flex; gap: 6px; }
.t-tip .input { width: 92px; height: 34px; }
.tp-title { font: 500 17px/1.35 var(--mono); overflow-wrap: anywhere; }
.kvl dd a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* forum: staff controls, tips, feeds */
.f-mod { margin: 0 0 14px; border: 1px dashed var(--line2); border-radius: var(--r-lg); background: var(--surface); }
.f-mod summary { padding: 9px 14px; font-size: 12.5px; font-weight: 600; color: var(--amber); cursor: pointer; }
.f-mod__b { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 4px 14px 14px; }
.f-mod__b form { display: inline-flex; gap: 6px; }
.f-mod__rename { flex: 1 1 320px; }
.f-mod__rename .input { height: 30px; }
.f-mod__del { border-color: rgba(248, 113, 113, 0.4); color: var(--red); }
.f-tip { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; }
.f-tip input { width: 54px; height: 22px; padding: 0 6px; border-radius: 4px; border: 1px solid var(--line2); background: var(--bg); color: var(--text); font: inherit; font-size: 12px; }
.f-tip button { padding: 0; border: 0; background: none; font: inherit; font-size: 12px; color: var(--mut); cursor: pointer; }
.f-tip button:hover { color: #fff; }
.f-tip + .f-post__acts { margin-left: 12px; }
.ffeed { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.ffeed > li { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 12px 16px; border-top: 1px solid var(--line); }
.ffeed > li:first-child { border-top: 0; }
.ffeed__t { min-width: 0; }
.ffeed__name { font-weight: 600; color: #fff; }
.ffeed__name:hover { text-decoration: underline; text-underline-offset: 3px; }
.ffeed__t .tag, .ffeed__t .pill { margin-left: 6px; }
.ffeed__t p { margin: 4px 0 0; font-size: 13px; color: var(--mut); overflow-wrap: anywhere; }
.ffeed__m { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex: none; font-size: 12.5px; text-align: right; }
.ffeed__m a { color: var(--soft); }
.ffeed__empty { justify-content: center !important; padding: 28px !important; color: var(--mut); }

/* leaderboards, info pages, events */
.board__tabs { flex-wrap: wrap; }
.board__rank { width: 44px; }
.board td.board__name a { font-family: var(--mono); font-size: 12.5px; overflow-wrap: anywhere; }
.board td a:hover { text-decoration: underline; text-underline-offset: 3px; }
.pg__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.pg__list a { display: block; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); font-weight: 600; }
.pg__list a:hover { border-color: var(--line2); background: var(--surface2); }
.pg__team { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.pg__who { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.pg__who:hover { border-color: var(--line2); }
.pg__who .av { width: 36px; height: 36px; font-size: 14px; }
.pg__who span { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.pg__who small { font-size: 12px; color: var(--mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pg .sec + .sec { margin-top: 22px; }
.ev { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 22px; align-items: start; }
.ev__main, .ev__side { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.ev .card + .card { margin-top: 0; }
.ev__claim { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px; }
.ev__claim h2 { font-size: 15px; }
.ev__claim p { margin: 4px 0 0; font-size: 13px; }
.ev__list { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
@media (max-width: 1000px) { .ev { grid-template-columns: 1fr; } }

/* media hub */
.mh__search { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 16px; }
.mh__search .input, .mh__search .select { width: auto; min-width: 260px; }
.mh__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 14px; }
.mh__grid--text { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.mh__i, .mh__t { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: 13px; }
.mh__i img, .mh__t img, .mh__noart { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: var(--r); border: 1px solid var(--line); background: var(--surface2); }
.mh__grid--text .mh__i { padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.mh__i:hover img, .mh__t:hover img, .mh__grid--text .mh__i:hover { border-color: var(--line2); }
.mh__i b, .mh__t b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mh__i small, .mh__t small { font-size: 12px; color: var(--mut); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-height: 18px; }
.mh__head { display: flex; gap: 22px; align-items: flex-start; margin: 4px 0 22px; }
.mh__head h1 { font: 600 28px/1.15 var(--display); letter-spacing: -0.02em; }
.mh__portrait { width: 132px; aspect-ratio: 2 / 3; object-fit: cover; border-radius: var(--r-lg); border: 1px solid var(--line); flex: none; }
.mh__bio { max-width: 78ch; margin: 10px 0 0; color: var(--soft); display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.mh__titles { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 18px 14px; }
.mh__t .pill { align-self: flex-start; }
.mh__t--none img, .mh__t--none .mh__noart { opacity: 0.45; }
.mh__front a { display: flex; align-items: baseline; justify-content: space-between; }
.mh__front small { font-weight: 400; }

/* subtitle upload, ticket attachments */
.si-subup { margin-top: 12px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.si-subup summary { padding: 10px 14px; font-size: 13px; font-weight: 600; cursor: pointer; }
.si-subup .form { padding: 4px 14px 14px; max-width: none; }
.si-subs__a { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.si-subs__a form { display: inline; font-size: 12px; }
.si-attach { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.si-attach .input { flex: 1 1 220px; width: auto; }
.si-files a:hover code { color: #fff; text-decoration: underline; }

/* site modes: live chips beside the search box, each opening a short explanation */
.modes { display: flex; align-items: center; gap: 6px; margin-left: 14px; min-width: 0; }
.mode { position: relative; }
.mode summary { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 11px 0 9px; border-radius: 999px; border: 1px solid var(--line2); background: var(--surface); font-size: 12px; white-space: nowrap; cursor: pointer; list-style: none; user-select: none; }
.mode summary::-webkit-details-marker { display: none; }
.mode summary:hover, .mode[open] summary { background: var(--surface2); }
.mode summary i { width: 7px; height: 7px; border-radius: 50%; background: var(--mode); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mode) 22%, transparent); animation: mode-pulse 2.4s ease-in-out infinite; }
.mode summary b { font-weight: 600; color: var(--mode); }
.mode summary span { font-family: var(--mono); font-size: 11px; color: var(--mut); }
.mode--fl { --mode: var(--amber); } .mode--du { --mode: var(--green); } .mode--reg { --mode: var(--blue); } .mode--note { --mode: var(--soft); }
.mode--note summary i { animation: none; }
.mode__pop { position: absolute; z-index: 40; top: 36px; left: 0; width: 300px; padding: 13px 14px; border: 1px solid var(--line2); border-radius: var(--r-lg); background: var(--surface2); box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5); font-size: 13px; }
.mode__pop p { margin: 0; color: var(--soft); overflow-wrap: anywhere; }
.mode__pop a { display: inline-flex; align-items: center; gap: 4px; margin-top: 9px; font-weight: 600; color: #fff; }
.mode__pop a svg { width: 12px; height: 12px; }
@keyframes mode-pulse { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--mode) 0%, transparent); } }
@media (prefers-reduced-motion: reduce) { .mode summary i { animation: none; } }
@media (max-width: 1150px) { .mode summary span { display: none; } }

/* staff: site modes as a list of switches */
.md { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.md__row { display: grid; grid-template-columns: 52px minmax(0, 1fr) 150px; gap: 18px; align-items: center; padding: 18px 18px; border-bottom: 1px solid var(--line); }
.md__row.is-on { background: linear-gradient(90deg, var(--acc-soft), transparent 42%); }
.md__row--note { grid-template-columns: minmax(0, 1fr) 150px; align-items: start; }
.md__t h2 { font-size: 15px; }
.md__t p { margin: 3px 0 0; font-size: 13px; color: var(--mut); max-width: 68ch; }
.md__t .input { margin-top: 9px; }
.md__for label { display: block; margin-bottom: 4px; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mut); }
.md__sw { position: relative; display: inline-flex; cursor: pointer; }
.md__sw input[type=checkbox] { position: absolute; opacity: 0; inset: 0; }
.md__sw i { width: 44px; height: 26px; border-radius: 999px; background: var(--surface3); border: 1px solid var(--line2); transition: background 0.15s; }
.md__sw i::after { content: ""; display: block; width: 20px; height: 20px; margin: 2px; border-radius: 50%; background: var(--mut); transition: transform 0.15s, background 0.15s; }
.md__sw input:checked + i { background: var(--acc); border-color: var(--acc); }
.md__sw input:checked + i::after { transform: translateX(18px); background: #fff; }
.md__sw input:focus-visible + i { outline: 2px solid #fff; outline-offset: 2px; }
.md .form__actions { padding: 16px 18px; }
@media (max-width: 800px) { .md__row { grid-template-columns: 52px minmax(0, 1fr); } .md__for { grid-column: 2; } }

/* ==== list pages, second generation =====================================================
   One vocabulary for every index page: a masthead with the page's real numbers, filters as
   one-click chips, rows drawn for what they list (releases, bounties, people, tickets), and an
   empty state that explains the feature instead of apologising. */
:root { --c-up: #259c93; --c-down: #db5a54; --c-bar: #a09e98; } /* chart fills; the pair is checked for colour-blind separation */

.mast { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: end; gap: 12px 34px; margin: 4px 0 20px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.mast h1 { font: 700 34px/1.05 var(--display); letter-spacing: -0.03em; color: #fff; }
.mast__k { margin: 0 0 6px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mut); }
.mast__k a:hover { color: #fff; }
.mast__lede { margin: 8px 0 0; max-width: 68ch; font-size: 14.5px; color: var(--soft); }
.mast__lede b { color: #fff; }
.mast__q { white-space: nowrap; color: #fff; border-bottom: 1px dashed var(--line2); }
.mast__q i { margin-left: 2px; font-style: normal; color: var(--mut); }
.mast__q:hover i { color: var(--acc); }
.mast__facts { display: flex; gap: 28px; margin: 0; }
.mast__facts div { display: flex; flex-direction: column-reverse; gap: 4px; }
.mast__facts dt { font-size: 10.5px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--mut); white-space: nowrap; }
.mast__facts dd { margin: 0; font: 500 22px/1 var(--mono); letter-spacing: -0.02em; color: #fff; }
.mast__facts dd.amber { color: var(--amber); } .mast__facts dd.up { color: var(--green); }
.mast__facts { grid-column: 2; }
.mast__a { grid-column: 3; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
@media (max-width: 900px) { .mast { grid-template-columns: 1fr; align-items: start; } .mast__facts, .mast__a { grid-column: 1; justify-content: flex-start; } }

.fbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 12px; }
.fbar--tools { margin-bottom: 18px; }
.fbar__sp { flex: 1; }
.fbar__l { margin-left: 6px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--dim); }
.fbar__clear { font-size: 12.5px; color: var(--mut); text-decoration: underline; text-underline-offset: 3px; }
.fbar__clear:hover { color: #fff; }
.fbar__q { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border: 1px solid var(--line2); border-radius: 999px; background: var(--surface); color: var(--mut); }
.fbar__q:focus-within { border-color: var(--acc); }
.fbar__q svg { width: 13px; height: 13px; }
.fbar__q input { width: 168px; border: 0; outline: 0; background: none; color: var(--text); font: inherit; font-size: 13px; }
.fbar__q input::placeholder { color: var(--dim); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line2); font-size: 12.5px; font-weight: 500; color: var(--soft); white-space: nowrap; cursor: pointer; user-select: none; }
.chip:hover { border-color: var(--mut); color: #fff; }
.chip small { font: 11px var(--mono); color: var(--dim); }
.chip.is-on { background: var(--text); border-color: var(--text); color: #131315; font-weight: 600; }
.chip.is-on small { color: #5c5a55; }
.chip svg { width: 11px; height: 11px; transform: rotate(90deg); }
.seg { display: inline-flex; padding: 2px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.seg a { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 6px; font-size: 12.5px; font-weight: 500; color: var(--mut); white-space: nowrap; }
.seg a:hover { color: #fff; }
.seg a.is-on { background: var(--surface3); color: #fff; }
.drop { position: relative; }
.drop summary { list-style: none; }
.drop summary::-webkit-details-marker { display: none; }
.drop__m { position: absolute; z-index: 30; top: 36px; left: 0; display: flex; flex-direction: column; min-width: 190px; max-height: 330px; overflow: auto; padding: 6px; border: 1px solid var(--line2); border-radius: var(--r-lg); background: var(--surface2); box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5); }
.drop__m a { padding: 7px 10px; border-radius: 6px; font-size: 13px; color: var(--soft); white-space: nowrap; }
.drop__m a:hover { background: var(--surface3); color: #fff; }
.drop__m a.is-on { color: #fff; font-weight: 600; box-shadow: inset 2px 0 0 var(--acc); }

.tr__meta, .bq__meta, .tk__meta { display: flex; flex-wrap: wrap; font-size: 12px; color: var(--dim); }
.tr__meta span + span::before, .bq__meta span + span::before, .tk__meta span + span::before { content: "·"; margin: 0 6px; color: var(--line2); }

/* a release as a row */
.tl { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.tr { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto 36px; gap: 14px; align-items: center; padding: 10px 6px 10px 2px; border-bottom: 1px solid var(--line); }
.tr:hover { background: var(--surface); }
.tr--pin { background: linear-gradient(90deg, var(--acc-soft), transparent 34%); }
.tr__p { display: grid; place-items: center; width: 46px; aspect-ratio: 2 / 3; border-radius: 4px; overflow: hidden; background: var(--surface2); font: 600 16px var(--display); color: var(--dim); }
.tr__p img { width: 100%; height: 100%; object-fit: cover; }
.tr__m { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tr__h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 8px; }
.tr__title { font-size: 15px; font-weight: 600; color: #fff; overflow-wrap: anywhere; }
.tr__title:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--mut); }
.tr__year, .tr__ep { font: 12.5px var(--mono); color: var(--mut); }
.tr__rel { overflow: hidden; font: 12px/1.45 var(--mono); color: var(--mut); text-overflow: ellipsis; white-space: nowrap; }
.tr__n { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-family: var(--mono); white-space: nowrap; }
.tr__n b { font-size: 13px; font-weight: 500; color: #fff; }
.tr__sw { display: flex; gap: 10px; font-size: 12px; color: var(--mut); }
.tr__sw em, .tc__sw em { display: inline-flex; align-items: center; gap: 2px; font-style: normal; }
.tr__sw svg { width: 10px; height: 10px; }
.tr__sw .is-zero, .tc__sw .is-zero { color: var(--dim); }
.tr__dl { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid transparent; border-radius: var(--r); color: var(--mut); }
.tr__dl:hover { border-color: var(--line2); background: var(--surface2); color: #fff; }
.tr__dl svg { width: 16px; height: 16px; }
@media (max-width: 760px) { .tr { grid-template-columns: 46px minmax(0, 1fr) 36px; } .tr__n { display: none; } }

/* a release as a poster */
.tg { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 22px 16px; }
.tc { display: flex; flex-direction: column; gap: 3px; min-width: 0; font-size: 13px; }
.tc__p { position: relative; display: grid; place-items: center; aspect-ratio: 2 / 3; margin-bottom: 5px; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: var(--surface2); font: 600 28px var(--display); color: var(--dim); }
.tc__p img { width: 100%; height: 100%; object-fit: cover; }
.tc:hover .tc__p { border-color: var(--mut); }
.tc__tags { position: absolute; top: 6px; left: 6px; display: flex; gap: 4px; }
.tc__tags .tag { background: rgba(14, 14, 16, 0.9); }
.tc b { overflow: hidden; font-weight: 600; color: #fff; text-overflow: ellipsis; white-space: nowrap; }
.tc small { overflow: hidden; font-size: 12px; color: var(--mut); text-overflow: ellipsis; white-space: nowrap; }

/* ranked rows (trending) */
.trk { display: grid; grid-template-columns: 44px minmax(0, 1fr) 96px; align-items: center; border-bottom: 1px solid var(--line); }
.trk .tr { border-bottom: 0; }
.trk:hover { background: var(--surface); }
.trk__n { font: 500 14px var(--mono); color: var(--dim); text-align: center; }
.trk__n--top { font-size: 20px; color: #fff; }
.trk__v { display: flex; flex-direction: column; align-items: flex-end; padding-right: 8px; }
.trk__v b { font: 500 18px/1 var(--mono); color: var(--amber); }
.trk__v small { margin-top: 3px; font-size: 11px; color: var(--mut); }

/* empty states */
.blank { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 44px; padding: 34px 36px; border: 1px dashed var(--line2); border-radius: var(--r-lg); }
.blank--one { grid-template-columns: 1fr; }
.blank h2 { font: 600 22px/1.2 var(--display); letter-spacing: -0.02em; color: #fff; }
.blank p { margin: 8px 0 0; max-width: 52ch; color: var(--soft); }
.blank p.blank__a { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.blank__steps { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; counter-reset: st; }
.blank__steps li { position: relative; padding: 12px 0 12px 44px; border-top: 1px solid var(--line); font-size: 13px; color: var(--mut); counter-increment: st; }
.blank__steps li:first-child { padding-top: 2px; border-top: 0; }
.blank__steps li::before { content: "0" counter(st); position: absolute; top: 13px; left: 0; font: 500 12px var(--mono); color: var(--acc); }
.blank__steps li:first-child::before { top: 3px; }
.blank__steps li b { display: block; margin-bottom: 2px; font-size: 14px; color: #fff; }
.blank__steps code { font-size: 12px; color: var(--text); }
@media (max-width: 900px) { .blank { grid-template-columns: 1fr; gap: 24px; padding: 24px; } }

.pg2 { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 22px; font-size: 13px; color: var(--mut); }
.pg2 b { color: #fff; }

/* requests: a bounty board */
.bq-list { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.bq { display: grid; grid-template-columns: 116px minmax(0, 1fr) auto 14px; gap: 18px; align-items: center; padding: 14px 8px 14px 0; border-bottom: 1px solid var(--line); }
.bq:hover { background: var(--surface); }
.bq__b { display: flex; flex-direction: column; align-items: flex-end; padding-right: 18px; border-right: 2px solid var(--amber); }
.bq__b b { font: 500 24px/1 var(--mono); letter-spacing: -0.02em; color: var(--amber); }
.bq__b small { margin-top: 5px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mut); }
.bq__m { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.bq__m > b { font-size: 15px; font-weight: 600; color: #fff; overflow-wrap: anywhere; }
.bq__go { width: 14px; height: 14px; color: var(--dim); }

/* members: a directory */
.mb-now { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 16px; }
.mb-now .fbar__l { margin: 0 6px 0 0; }
.mb-now__u { display: inline-flex; align-items: center; gap: 7px; padding: 3px 12px 3px 3px; border: 1px solid var(--line); border-radius: 999px; font-size: 13px; }
.mb-now__u:hover { border-color: var(--line2); background: var(--surface); }
.mb-now__u .av { width: 24px; height: 24px; font-size: 11px; }
.mb-list { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.mb { display: grid; grid-template-columns: 40px minmax(150px, 1.1fr) minmax(220px, 2fr) 84px minmax(150px, 0.9fr); gap: 18px; align-items: center; padding: 11px 8px 11px 2px; border-bottom: 1px solid var(--line); }
.mb:hover { background: var(--surface); }
.mb__av { position: relative; width: 40px; height: 40px; }
.mb__av .av { width: 40px; height: 40px; font-size: 15px; }
.mb__av.is-on::after { content: ""; position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border: 2px solid var(--bg); border-radius: 50%; background: var(--green); }
.mb__who { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; min-width: 0; }
.mb__who b { max-width: 100%; overflow: hidden; font-size: 15px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.mb__tr { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.split { display: block; height: 6px; border-radius: 3px; overflow: hidden; background: var(--c-down); }
.split i { display: block; height: 100%; background: var(--c-up); border-right: 2px solid var(--bg); }
.split i[style="width:0%"], .split i[style="width:100%"] { border-right: 0; }
.split--none { background: var(--surface3); }
.split--none i { display: none; }
.split--lg { height: 10px; border-radius: 5px; }
.mb__ud { display: flex; justify-content: space-between; font: 12px var(--mono); }
.mb__ud em, .sx__pl span { display: inline-flex; align-items: center; gap: 3px; font-style: normal; }
.mb__ud svg, .sx__pl svg { width: 10px; height: 10px; }
.mb__ratio { display: flex; flex-direction: column; align-items: flex-end; }
.mb__ratio b { font: 500 19px/1 var(--mono); color: #fff; }
.mb__ratio small { margin-top: 4px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mut); }
.mb__when { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: 12px; color: var(--mut); white-space: nowrap; }
.mb__when span:first-child { color: var(--soft); }
@media (max-width: 1150px) { .mb { grid-template-columns: 40px minmax(0, 1fr) 84px; } .mb__tr, .mb__when { display: none; } }

/* playlists: a shelf of poster stacks */
.shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 34px 24px; }
.pl { display: flex; flex-direction: column; gap: 3px; min-width: 0; font-size: 13px; }
.pl__stack { position: relative; height: 196px; margin-bottom: 11px; }
.pl__stack img, .pl__stack i { position: absolute; bottom: 0; left: 0; height: 100%; aspect-ratio: 2 / 3; border: 1px solid var(--line2); border-radius: 6px; background: var(--surface2); object-fit: cover; box-shadow: 8px 0 18px rgba(0, 0, 0, 0.45); transition: transform 0.16s ease; }
.pl__stack > :nth-child(1) { z-index: 4; }
.pl__stack > :nth-child(2) { z-index: 3; left: 46px; height: 92%; filter: brightness(0.78); }
.pl__stack > :nth-child(3) { z-index: 2; left: 88px; height: 84%; filter: brightness(0.6); }
.pl__stack > :nth-child(4) { z-index: 1; left: 126px; height: 76%; filter: brightness(0.45); }
.pl:hover .pl__stack > :nth-child(2) { transform: translateX(8px); }
.pl:hover .pl__stack > :nth-child(3) { transform: translateX(16px); }
.pl:hover .pl__stack > :nth-child(4) { transform: translateX(24px); }
.pl__stack i { border-style: dashed; background: transparent; box-shadow: none; filter: none !important; }
.pl b { overflow: hidden; font-size: 15px; font-weight: 600; color: #fff; text-overflow: ellipsis; white-space: nowrap; }
.pl small { color: var(--mut); }
.pl__flags { display: flex; gap: 5px; margin-top: 4px; }

/* stats: charts and rankings */
.sx { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-bottom: 34px; }
.sx__c { display: flex; flex-direction: column; min-width: 0; padding: 18px 20px 20px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.sx__c > header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.sx__c h2 { font-size: 14px; font-weight: 600; color: #fff; }
.sx__c > header span { font-size: 12px; color: var(--mut); }
.sx__c > header span b { font-family: var(--mono); font-weight: 500; color: #fff; }
.cols { display: flex; flex: 1; align-items: flex-end; gap: 2px; min-height: 132px; margin-bottom: 22px; border-bottom: 1px solid var(--line2); }
.cols__d { position: relative; display: flex; flex: 1; align-items: flex-end; height: 100%; min-width: 0; }
.cols__d i { display: block; width: 100%; border-radius: 3px 3px 0 0; background: var(--c-bar); }
.cols__d.is-zero i { height: 2px !important; border-radius: 0; background: var(--surface3); }
.cols__d:hover i { background: #fff; }
.cols__d small { position: absolute; bottom: -19px; left: 0; font: 10.5px var(--mono); color: var(--dim); white-space: nowrap; }
.cols__d:last-child small { right: 0; left: auto; }
.cols__d:hover::after { content: attr(data-tip); position: absolute; z-index: 5; bottom: calc(100% + 4px); left: 50%; padding: 3px 8px; border: 1px solid var(--line2); border-radius: 5px; background: var(--surface3); font: 11.5px var(--mono); color: #fff; white-space: nowrap; transform: translateX(-50%); pointer-events: none; }
.hbars { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.hbars li { display: grid; grid-template-columns: 92px minmax(0, 1fr) 46px 124px; gap: 12px; align-items: center; font-size: 13px; }
.hbars li > :first-child { overflow: hidden; color: var(--soft); text-overflow: ellipsis; white-space: nowrap; }
.hbars a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.hbars__b { height: 8px; border-radius: 4px; overflow: hidden; background: var(--surface3); }
.hbars__b i { display: block; height: 100%; border-radius: 4px; background: var(--c-bar); }
.hbars li:hover .hbars__b i { background: #fff; }
.hbars b { font: 500 13px var(--mono); color: #fff; text-align: right; }
.hbars small { font: 11.5px var(--mono); color: var(--mut); text-align: right; white-space: nowrap; }
.sx__pair { margin-bottom: 16px; }
.sx__pl { display: flex; justify-content: space-between; margin-bottom: 7px; font: 12.5px var(--mono); }
.sx__kv { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--line); }
.sx__kv dt { font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mut); }
.sx__kv dd { margin: 3px 0 0; font: 500 14px var(--mono); color: #fff; }
.sx__kv dd.amber { color: var(--amber); }
.sx-boards { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 28px; align-items: start; scroll-margin-top: 70px; }
.sx-pick { position: sticky; top: 76px; display: flex; flex-direction: column; gap: 1px; }
.sx-pick h3 { margin: 14px 0 6px; padding: 0 10px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--dim); }
.sx-pick h3:first-child { margin-top: 0; }
.sx-pick a { padding: 6px 10px; border-radius: 6px; font-size: 13px; color: var(--soft); }
.sx-pick a:hover { background: var(--surface2); color: #fff; }
.sx-pick a.is-on { background: var(--surface2); color: #fff; font-weight: 600; box-shadow: inset 2px 0 0 var(--acc); }
.rk { margin: 0; padding: 0; border-top: 1px solid var(--line); list-style: none; }
.rk__r { display: grid; grid-template-columns: 36px minmax(150px, 250px) minmax(0, 1fr) 118px; gap: 14px; align-items: center; padding: 9px 6px; border-bottom: 1px solid var(--line); }
.rk__r:hover { background: var(--surface); }
.rk__n { font: 500 13px var(--mono); color: var(--dim); text-align: right; }
.rk__r--top .rk__n { font-size: 16px; color: #fff; }
.rk__who { display: flex; align-items: center; gap: 9px; min-width: 0; }
.rk__who b { overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.rk__who small { font-size: 11.5px; color: var(--dim); }
.rk__bar { display: block; height: 6px; border-radius: 3px; overflow: hidden; background: var(--surface2); }
.rk__bar i { display: block; height: 100%; border-radius: 3px; background: var(--c-bar); }
.rk__r--top .rk__bar i { background: #fff; }
.rk__v { font: 500 13px var(--mono); color: #fff; text-align: right; white-space: nowrap; }
.rk__empty { margin: 0; padding: 28px; color: var(--mut); text-align: center; }
.board__bar { width: 26%; }
@media (max-width: 1000px) { .sx, .sx-boards { grid-template-columns: 1fr; } .sx-pick { position: static; flex-direction: row; flex-wrap: wrap; } .sx-pick h3 { width: 100%; } .hbars li { grid-template-columns: 92px minmax(0, 1fr) 46px; } .hbars small { display: none; } }

/* forums: the index beside what was just said */
.fx { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 36px; align-items: start; }
.fx-cat { margin-bottom: 28px; }
.fx-cat > header { display: flex; align-items: baseline; gap: 12px; padding-bottom: 9px; border-bottom: 1px solid var(--line2); }
.fx-cat h2 { font-size: 11.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; }
.fx-cat > header span { font-size: 12.5px; color: var(--mut); }
.fx-cat ul { margin: 0; padding: 0; list-style: none; }
.fx-f { display: grid; grid-template-columns: minmax(0, 1fr) 60px 60px minmax(0, 240px); gap: 16px; align-items: center; padding: 13px 6px; border-bottom: 1px solid var(--line); }
.fx-f:hover { background: var(--surface); }
.fx-f__t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fx-f__t b { font-size: 15px; font-weight: 600; color: #fff; }
.fx-f__t:hover b { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--mut); }
.fx-f__t span { font-size: 13px; color: var(--mut); }
.fx-f__n { display: flex; flex-direction: column; align-items: flex-end; }
.fx-f__n b { font: 500 15px/1 var(--mono); color: #fff; }
.fx-f__n small { margin-top: 4px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--dim); }
.fx-f__last { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 13px; }
.fx-f__last a { overflow: hidden; color: var(--soft); text-overflow: ellipsis; white-space: nowrap; }
.fx-f__last a:hover { color: #fff; }
.fx-f__last small { font-size: 12px; color: var(--mut); }
.fx__side { position: sticky; top: 76px; }
.fx-feed { margin: 0; padding: 0; border-top: 1px solid var(--line); list-style: none; }
.fx-feed li { padding: 11px 0; border-bottom: 1px solid var(--line); }
.fx-feed a { display: flex; flex-direction: column; gap: 2px; }
.fx-feed b { font-size: 13.5px; color: #fff; }
.fx-feed a:hover b { text-decoration: underline; text-underline-offset: 3px; }
.fx-feed span { display: -webkit-box; overflow: hidden; font-size: 12.5px; color: var(--mut); -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.fx-feed small { font-size: 11.5px; color: var(--dim); }
@media (max-width: 1150px) { .fx { grid-template-columns: 1fr; } .fx__side { position: static; } .fx-f { grid-template-columns: minmax(0, 1fr) 60px 60px; } .fx-f__last { display: none; } }

/* help desk */
.tk-list { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.tk { --prio: var(--line2); display: grid; grid-template-columns: 4px minmax(0, 1fr) 70px 104px; gap: 16px; align-items: center; padding: 13px 8px 13px 0; border-bottom: 1px solid var(--line); }
.tk:hover { background: var(--surface); }
.tk__p { align-self: stretch; border-radius: 2px; background: var(--prio); }
.tk__m { min-width: 0; }
.tk__m > b { margin-right: 8px; font-size: 15px; font-weight: 600; color: #fff; overflow-wrap: anywhere; }
.tk--closed .tk__m > b { font-weight: 500; color: var(--mut); }
.tk__m .pill { margin-right: 4px; vertical-align: 1px; }
.tk__meta { margin-top: 4px; }
.tk__n { display: flex; flex-direction: column; align-items: flex-end; }
.tk__n b { font: 500 15px/1 var(--mono); color: #fff; }
.tk__n small { margin-top: 4px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--dim); }
.tk__age { font-size: 12px; color: var(--mut); text-align: right; }

/* top bar: nothing overlaps when several modes are on */
.search { flex: 0 1 560px; width: auto; min-width: 180px; }
.modes { flex: none; }
.topme { flex: none; }
@media (max-width: 1320px) { .topme__stats { display: none; } }

/* ---- the rest of the site inherits the same hand: older page headers, tables, filter forms and
   pagers are restyled here so every page reads as one product. */
.ph { align-items: flex-end; margin: 4px 0 20px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.ph h1 { font: 700 30px/1.08 var(--display); letter-spacing: -0.028em; }
.ph__sub { margin-top: 7px; max-width: 70ch; font-size: 14px; color: var(--soft); }
.acct__body .ph, .hub .ph { margin-top: 0; }
.tabs { gap: 4px; }
.tabs a { padding: 8px 12px 10px; }
.tablewrap { border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; }
.card .tablewrap, .tablewrap--flush { border-top: 0; }
.table th, .torrents th { padding: 10px 12px 9px; font-size: 10.5px; color: var(--dim); border-bottom: 1px solid var(--line); }
.table td, .torrents td { padding: 10px 12px; }
.table tbody tr:last-child td, .torrents tbody tr:last-child td { border-bottom: 1px solid var(--line); }
.table tbody tr:hover, .torrents tbody tr:hover { background: var(--surface); }
.card .table tbody tr:last-child td { border-bottom: 0; }
.filters { gap: 8px 10px; margin-bottom: 18px; }
.filters input[type=search], .filters select, .filters .input, .filters .select { height: 32px; border-radius: 999px; padding: 0 14px; font-size: 13px; }
.filters button, .filters .btn { height: 32px; border-radius: 999px; padding: 0 16px; }
.filters .check { height: 32px; padding: 0 12px; border: 1px solid var(--line2); border-radius: 999px; font-size: 12.5px; }
.pager { justify-content: center; gap: 16px; padding: 20px 4px 0; }
.pager a { display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border: 1px solid var(--line2); border-radius: var(--r); font-weight: 500; color: var(--text); }
.pager a:hover { border-color: var(--mut); background: var(--surface2); }
.empty { padding: 34px 20px !important; }
.f-crumbs { margin-bottom: 10px; }

/* forum topic lists, the wiki index */
.tp-list { border-top: 1px solid var(--line); }
.tp { display: grid; grid-template-columns: 8px minmax(0, 1fr) 60px 60px 150px; gap: 16px; align-items: center; padding: 13px 6px 13px 4px; border-bottom: 1px solid var(--line); }
.tp:hover { background: var(--surface); }
.tp--pin { background: linear-gradient(90deg, var(--acc-soft), transparent 34%); }
.tp__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--surface3); }
.tp--new .tp__dot { background: var(--acc); }
.tp__m { min-width: 0; }
.tp__name { margin-right: 8px; font-size: 15px; font-weight: 600; color: #fff; overflow-wrap: anywhere; }
.tp__name:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--mut); }
.tp--closed .tp__name { font-weight: 500; color: var(--mut); }
.tp__m .tag { margin-right: 4px; }
.tp__m .tk__meta a { color: var(--soft); }
.tp__m .tk__meta a:hover { color: #fff; }
.tp__last { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 13px; }
.tp__last small { font-size: 12px; color: var(--mut); }
@media (max-width: 900px) { .tp { grid-template-columns: 8px minmax(0, 1fr) 60px; } .tp > :nth-child(4), .tp__last { display: none; } }
.wk { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 0 36px; }
.wk__l li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 10px 4px; border-bottom: 1px solid var(--line); }
.wk__l a { font-weight: 500; color: #fff; }
.wk__l a:hover { text-decoration: underline; text-underline-offset: 3px; }
.wk__l small { font-size: 12px; color: var(--mut); white-space: nowrap; }
.trk--x { grid-template-columns: minmax(0, 1fr) auto; }
.trk__x { margin: 0 8px; padding: 0; border: 0; background: none; font: inherit; font-size: 12px; color: var(--dim); cursor: pointer; }
.trk__x:hover { color: var(--red); }
.pl-desc { max-width: 78ch; margin: -4px 0 20px; color: var(--soft); }
.mast__a form { display: inline-flex; }

/* search as you type */
.search { position: relative; }
.search__k { padding: 0 6px; border: 1px solid var(--line2); border-radius: 4px; font: 11px/18px var(--mono); color: var(--dim); }
.search:focus-within .search__k { display: none; }
.sug { position: absolute; z-index: 50; top: 40px; left: 0; width: max(100%, 520px); max-width: calc(100vw - 28px); max-height: min(70vh, 620px); overflow: auto; padding: 6px; border: 1px solid var(--line2); border-radius: var(--r-lg); background: var(--surface2); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6); color: var(--text); }
.sug__h { padding: 8px 10px 4px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--dim); }
.sug__i { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 11px; align-items: center; padding: 6px 10px; border-radius: 6px; }
.sug__i--m { grid-template-columns: minmax(0, 1fr); padding: 7px 10px; }
.sug__i:hover, .sug__i.is-on, .sug__all:hover, .sug__all.is-on { background: var(--surface3); }
.sug__i img, .sug__np { width: 34px; aspect-ratio: 2 / 3; border-radius: 3px; background: var(--surface3); object-fit: cover; }
.sug__i span { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sug__i--m span { flex-direction: row; align-items: baseline; gap: 8px; }
.sug__i b { overflow: hidden; font-size: 13.5px; font-weight: 600; color: #fff; text-overflow: ellipsis; white-space: nowrap; }
.sug__i em { font: 12px var(--mono); font-style: normal; color: var(--mut); }
.sug__i code { overflow: hidden; font: 11.5px var(--mono); color: var(--mut); text-overflow: ellipsis; white-space: nowrap; }
.sug__i small { font-size: 11.5px; color: var(--dim); }
.sug__all { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; padding: 9px 10px; border-top: 1px solid var(--line); border-radius: 0 0 6px 6px; font-size: 13px; font-weight: 500; color: var(--soft); }
.sug__all kbd { padding: 0 6px; border: 1px solid var(--line2); border-radius: 4px; font: 11px/18px var(--mono); color: var(--dim); }
.sug__none { padding: 14px 10px; font-size: 13px; color: var(--mut); }

/* phones: one column everywhere, a top bar that fits, filters that scroll sideways */
@media (max-width: 900px) {
  .t-cols { grid-template-columns: minmax(0, 1fr); }
  .t-head { gap: 14px; }
}
@media (max-width: 820px) {
  .topbar { gap: 8px; height: 50px; }
  .search { flex: 1 1 auto; min-width: 0; }
  .search__k, .modes .mode summary span, .topme__ic[title="Settings"] { display: none; }
  .modes { margin-left: 0; }
  .mode summary { padding: 0 9px; }
  .topme__who { margin-left: 2px; padding: 2px; border: 0; }
  .mast { margin-top: 0; padding-bottom: 14px; }
  .mast h1 { font-size: 27px; }
  .mast__facts { gap: 22px; }
  .mast__facts dd { font-size: 18px; }
  .fbar { flex-wrap: nowrap; margin-right: -14px; padding-right: 14px; overflow-x: auto; scrollbar-width: none; }
  .fbar::-webkit-scrollbar { display: none; }
  .fbar .chips { flex-wrap: nowrap; }
  .fbar__sp { display: none; }
  .drop__m { position: fixed; top: auto; right: 14px; bottom: 14px; left: 14px; max-height: 60vh; }
  .ph h1 { font-size: 25px; }
  .tr__meta span:nth-child(n+4) { display: none; }
  .bq { grid-template-columns: 84px minmax(0, 1fr); gap: 12px; }
  .bq > :nth-child(n+3) { display: none; }
  .bq__b { padding-right: 12px; }
  .bq__b b { font-size: 19px; }
  .tk { grid-template-columns: 4px minmax(0, 1fr); }
  .tk > :nth-child(n+3) { display: none; }
  .sug { position: fixed; top: 96px; right: 14px; left: 14px; width: auto; max-width: none; }
  .foot { flex-direction: column; gap: 6px; }
}

/* signed-in devices */
.dv { margin: 0; padding: 0 16px; list-style: none; }
.dv li { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.dv li:last-child { border-bottom: 0; }
.dv__t b { margin-right: 8px; font-size: 14px; }
.dv__t .pill { margin-right: 4px; }
.dv__t small { display: block; margin-top: 3px; font-size: 12px; color: var(--mut); }
.dv__t code { font-size: 11.5px; color: var(--soft); }
.dv__all { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 16px 14px; border-top: 1px solid var(--line); font-size: 12.5px; }

/* keyboard users see where they are; mouse users are not bothered */
:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; border-radius: 4px; }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible, .search input:focus-visible, .fbar__q input:focus-visible { outline: 0; }
.skip { position: absolute; top: -60px; left: 12px; z-index: 100; padding: 8px 14px; border-radius: var(--r); background: var(--text); color: #131315; font-weight: 600; }
.skip:focus { top: 10px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }

/* torrent page: the title over its own backdrop, the swarm as the headline numbers */
.th { position: relative; margin: 0 -28px; padding: 30px 28px 26px; overflow: hidden; border-bottom: 1px solid var(--line); }
.th__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 22%; opacity: 0.2; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 34%, #000 100%); mask-image: linear-gradient(90deg, transparent 0%, #000 34%, #000 100%); }
.th::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(19, 19, 21, 0) 40%, var(--bg) 100%); pointer-events: none; }
.th__in { position: relative; z-index: 1; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 26px; align-items: end; }
.th__poster { width: 168px; aspect-ratio: 2 / 3; border-radius: 8px; object-fit: cover; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55); }
.th__t { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.th h1 { font: 700 clamp(26px, 3.1vw, 40px)/1.05 var(--display); letter-spacing: -0.03em; color: #fff; overflow-wrap: anywhere; }
.th h1 i { font-style: normal; font-weight: 400; color: var(--mut); }
.th__sub { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin: 0; font-size: 13.5px; color: var(--soft); }
.th__sub a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line2); }
.th__sub a:hover { text-decoration-color: var(--text); }
.th__rate { display: inline-flex; align-items: center; gap: 4px; font: 500 13.5px var(--mono); color: var(--amber); }
.th__rate svg { width: 13px; height: 13px; fill: currentColor; }
.th__ov { display: -webkit-box; max-width: 76ch; margin: 2px 0 0; overflow: hidden; font-size: 14.5px; line-height: 1.55; color: var(--text); -webkit-line-clamp: 4; -webkit-box-orient: vertical; }
.th__rel { font: 12.5px var(--mono); color: var(--mut); overflow-wrap: anywhere; }
.th__sw { display: grid; grid-template-columns: repeat(2, auto); gap: 18px 30px; margin: 0; padding-left: 26px; border-left: 1px solid var(--line2); }
.th__sw div { display: flex; flex-direction: column-reverse; gap: 4px; }
.th__sw dt { font-size: 10.5px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--mut); }
.th__sw dd { margin: 0; font: 500 24px/1 var(--mono); letter-spacing: -0.02em; color: #fff; white-space: nowrap; }
.th__sw dd.up { color: var(--green); } .th__sw dd.down { color: var(--red); }
.th__sw a:hover { text-decoration: underline; text-underline-offset: 4px; }
.tact { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tact form { display: inline-flex; }
.tact__dl { height: 40px; padding: 0 20px; font-size: 14px; font-weight: 600; }
.tact__sp { flex: 1; }
.tact .btn .mut { margin-left: 5px; font-weight: 400; }
.cast { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 16px 12px; }
.cast__p { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 12.5px; }
.cast__p img, .cast__p > span { display: grid; place-items: center; width: 100%; aspect-ratio: 1; margin-bottom: 6px; border: 1px solid var(--line); border-radius: 50%; background: var(--surface2); object-fit: cover; object-position: center 20%; font: 600 22px var(--display); color: var(--dim); }
.cast__p:hover img { border-color: var(--mut); }
.cast__p b { overflow: hidden; font-weight: 600; color: #fff; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.cast__p small { overflow: hidden; color: var(--mut); text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.sib__r { display: flex; flex-direction: column; gap: 4px; padding: 11px 16px; border-bottom: 1px solid var(--line); }
.sib__r:last-child { border-bottom: 0; }
.sib__r:hover { background: var(--surface2); }
.sib__t { display: flex; align-items: center; gap: 5px; }
.sib__t b { margin-left: auto; font: 500 12.5px var(--mono); color: #fff; }
.sib__r code { overflow: hidden; font: 11.5px var(--mono); color: var(--mut); text-overflow: ellipsis; white-space: nowrap; }
.sib__r small { font-size: 11.5px; color: var(--dim); }
.sib__r em { font-style: normal; }
.sib__r .is-zero { color: var(--dim); }
@media (max-width: 1100px) { .th__in { grid-template-columns: auto minmax(0, 1fr); } .th__sw { grid-column: 1 / -1; grid-template-columns: repeat(4, auto); justify-content: start; padding: 16px 0 0; border-top: 1px solid var(--line2); border-left: 0; } }
@media (max-width: 820px) { .th { margin: 0 -14px; padding: 18px 14px; } .th__in { gap: 16px; align-items: start; } .th__poster { width: 104px; } .th__ov { -webkit-line-clamp: 6; } .th__sw { gap: 14px 22px; } .th__sw dd { font-size: 18px; } .tact__dl { flex: 1 1 100%; justify-content: center; } .tact__sp { display: none; } }

/* profile: who it is, then how they share */
.pfh { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 20px; align-items: center; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.pfh__av img, .pfh__av span { display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; object-fit: cover; background: var(--surface3); font: 700 34px var(--display); color: #fff; text-transform: uppercase; }
.pfh h1 { font: 700 34px/1.05 var(--display); letter-spacing: -0.03em; overflow-wrap: anywhere; }
.pfh__sub { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 9px 0 0; font-size: 13.5px; color: var(--soft); }
.pfs { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 22px 34px; align-items: center; padding: 6px 0; }
.pfs__ratio { display: flex; flex-direction: column; }
.pfs__ratio b { font: 500 44px/1 var(--mono); letter-spacing: -0.04em; color: #fff; }
.pfs__ratio small { margin-top: 6px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--mut); }
.pfs__buf { margin: 9px 0 0; font-size: 12.5px; color: var(--mut); }
.pfs__buf b { font-family: var(--mono); font-weight: 500; }
.pfk { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; margin: 0; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.pfk div { display: flex; flex-direction: column-reverse; gap: 4px; padding: 13px 16px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.pfk div:nth-child(5n) { border-right: 0; }
.pfk div:nth-last-child(-n+5) { border-bottom: 0; }
.pfk dt { font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mut); }
.pfk dd { margin: 0; font: 500 17px/1 var(--mono); color: #fff; }
.pfk dd.down { color: var(--red); }
.pfs .mast__facts { grid-column: 1 / -1; }
.acct__body > .sec { margin-bottom: 0; }
.cast { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); }
@media (max-width: 1150px) { .pfk { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pfk div { border-right: 0 !important; border-bottom: 1px solid var(--line) !important; } }
@media (max-width: 820px) { .pfh { grid-template-columns: auto minmax(0, 1fr); } .pfh .mast__a { grid-column: 1 / -1; justify-content: flex-start; } .pfh__av img, .pfh__av span { width: 60px; height: 60px; font-size: 24px; } .pfh h1 { font-size: 26px; } .pfs__ratio b { font-size: 34px; } }

/* staff: scheduled jobs */
.jobs td { vertical-align: top; }
.jobs td small { display: block; margin-top: 3px; font-size: 11.5px; }
.jobs td:nth-child(n+2):nth-child(-n+5), .jobs td:last-child { white-space: nowrap; }
.jobs td:nth-child(6) { max-width: 320px; }

/* ---- top bar numbers: each is a link to where the number comes from, in the colour it has everywhere */
.topme__stats { gap: 2px; margin-right: 6px; }
.topme__stats a { display: inline-flex; align-items: center; gap: 4px; padding: 4px 7px; border-radius: var(--r); font-weight: 500; }
.topme__stats a:hover { background: var(--surface2); }
.topme__stats a svg { width: 12px; height: 12px; color: inherit; }
.topme__stats a i { font-style: normal; font-size: 10.5px; font-weight: 600; opacity: 0.7; }
.topme__stats a.up { color: var(--green); } .topme__stats a.down { color: var(--red); } .topme__stats a.amber { color: var(--amber); }
.topme__warn { color: var(--red); background: rgba(248, 113, 113, 0.1); }
/* what fits: seeding and leeching go first, then ratio and points; with mode markers in the bar
   there is less room, so each step comes earlier */
@media (max-width: 1320px) { .topme__stats { display: flex; } }
@media (max-width: 1290px) { .topme__stats a:nth-child(n+5) { display: none; } }
@media (max-width: 1190px) { .topme__stats a:nth-child(n+3) { display: none; } }
@media (max-width: 1100px) { .topme__stats { display: none; } }
@media (max-width: 1600px) { .topbar:has(.modes) .topme__stats a:nth-child(n+5) { display: none; } }
@media (max-width: 1420px) { .topbar:has(.modes) .topme__stats a:nth-child(n+3) { display: none; } }
@media (max-width: 1320px) { .topbar:has(.modes) .topme__stats { display: none; } }

/* ---- site documents (pages and wiki): the text, with its sections and its neighbours beside it */
.doc .mast__facts dd { font-size: 15px; line-height: 1.3; }
.doc__grid { display: grid; grid-template-columns: minmax(0, 760px) 230px; gap: 64px; align-items: start; }
.doc__x { font-size: 15px; line-height: 1.7; color: var(--text); }
.doc__x > :first-child { margin-top: 0; }
.doc__x h2 { margin: 36px 0 12px; padding-top: 24px; border-top: 1px solid var(--line); font: 700 21px/1.25 var(--display); letter-spacing: -0.02em; color: #fff; scroll-margin-top: 62px; }
.doc__x h2:first-child { padding-top: 0; border-top: 0; }
.doc__x h3 { margin: 24px 0 4px; font-size: 15.5px; font-weight: 600; line-height: 1.4; color: #fff; scroll-margin-top: 70px; }
.doc__x h2 + h3 { margin-top: 12px; }
.doc__x b { font-weight: 600; color: #fff; }
.doc__x a { color: #fff; text-decoration: underline; text-decoration-color: var(--dim); text-underline-offset: 3px; }
.doc__x a:hover { color: var(--acc); text-decoration-color: var(--acc); }
.doc__x code { padding: 1px 5px; border-radius: 4px; background: var(--surface2); font: 12.5px var(--mono); color: var(--text); overflow-wrap: anywhere; }
.doc__x .bb-code { margin: 10px 0; padding: 12px 14px; border: 1px solid var(--line); font-size: 12.5px; line-height: 1.6; color: var(--text); white-space: pre; overflow-x: auto; }
.doc__x .bb-list { margin: 8px 0; padding-left: 22px; }
.doc__x .bb-list li { margin: 5px 0; padding-left: 3px; }
.doc__x .bb-list li::marker { color: var(--mut); }
.bb-gap { display: block; height: 0.8em; }
.doc__x .bb-lede + h2 { margin-top: 28px; }
.bb-lede { max-width: 62ch; margin-bottom: 4px; font-size: 17px; line-height: 1.55; color: var(--soft); }
.bb-note { margin: 16px 0; padding: 12px 16px; border-left: 3px solid var(--blue); border-radius: 0 var(--r) var(--r) 0; background: var(--surface); font-size: 14px; line-height: 1.6; color: var(--soft); }
.bb-note--warn { border-left-color: var(--amber); }
.bb-tablewrap { margin: 12px 0; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); }
.bb-table { width: 100%; border-collapse: collapse; font-size: 13.5px; line-height: 1.5; }
.bb-table th { padding: 9px 14px; text-align: left; font-size: 10.5px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; white-space: nowrap; color: var(--mut); background: var(--surface); }
.bb-table td { padding: 9px 14px; border-top: 1px solid var(--line); vertical-align: top; color: var(--soft); }
.bb-table td:first-child { color: #fff; }
/* the rules are numbered by section, so staff and members can point at "2.3" */
.doc__x--rules { counter-reset: sec; }
.doc__x--rules h2 { counter-increment: sec; counter-reset: rule; }
.doc__x--rules h2::before { content: counter(sec); display: inline-block; min-width: 30px; font: 500 15px var(--mono); letter-spacing: 0; color: var(--acc); }
.doc__x--rules ol.bb-list { margin: 0; padding: 0; list-style: none; }
.doc__x--rules ol.bb-list > li { position: relative; margin: 0; padding: 10px 0 10px 52px; border-top: 1px solid var(--line); counter-increment: rule; }
.doc__x--rules ol.bb-list > li:first-child { border-top: 0; }
.doc__x--rules ol.bb-list > li::before { content: counter(sec) "." counter(rule); position: absolute; top: 12px; left: 0; font: 500 12.5px var(--mono); color: var(--mut); }
.doc__side { position: sticky; top: 76px; display: flex; flex-direction: column; gap: 26px; max-height: calc(100vh - 96px); overflow-y: auto; scrollbar-width: none; font-size: 13px; }
.doc__side::-webkit-scrollbar { display: none; }
.doc__nav h2 { margin-bottom: 8px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--mut); }
.doc__nav ol, .doc__nav ul { margin: 0; padding: 0; list-style: none; border-left: 1px solid var(--line); }
.doc__nav a { display: block; margin-left: -1px; padding: 5px 0 5px 14px; border-left: 1px solid transparent; line-height: 1.35; color: var(--mut); }
.doc__nav a:hover { color: var(--text); }
.doc__nav a.is-on { color: #fff; border-left-color: var(--acc); }
.doc__ask { margin: 0; font-size: 12.5px; color: var(--mut); }
.doc__ask a { color: var(--soft); text-decoration: underline; text-decoration-color: var(--dim); text-underline-offset: 3px; }
.doc__ask a:hover { color: var(--acc); }
@media (max-width: 1180px) { .doc__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; } .doc__side { position: static; max-height: none; padding-top: 22px; border-top: 1px solid var(--line); } .doc__side #doc-toc { display: none; } }

/* site information: cards that say what each page is for; the staff list */
.pg__list { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 12px; }
.pg__list a { display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 16px 18px; font-weight: 400; }
.pg__list a b { font-size: 15px; font-weight: 600; color: #fff; }
.pg__list a span { font-size: 13px; line-height: 1.5; color: var(--mut); }
.pg__note { margin: 0 0 18px; max-width: 80ch; font-size: 13.5px; color: var(--soft); }
.pg__note a { color: #fff; text-decoration: underline; text-decoration-color: var(--dim); text-underline-offset: 3px; }
.pg__who .av { flex: none; font-style: normal; }
.pg__who > .dot { flex: none; margin: 0; }

/* wiki index: each page with a line on what it answers */
.wk { display: block; columns: 400px 2; column-gap: 48px; }
.wk .fx-cat { break-inside: avoid; }
.wk__l li { display: block; padding: 0; }
.wk__l a { display: block; padding: 11px 4px; }
.wk__l a:hover { text-decoration: none; background: var(--surface); }
.wk__l a b { display: block; font-weight: 600; color: #fff; }
.wk__l a span { display: block; margin-top: 1px; font-size: 13px; font-weight: 400; line-height: 1.45; color: var(--mut); }
.bb-table { overflow-wrap: normal; }
.bb-table td:first-child { min-width: 96px; }

/* bonus earnings: the release name gives way first, so the points column never leaves the card */
.bn-seeds { width: 100%; }
.bn-seeds .bn-name { width: 100%; max-width: 0; }
.bn-seeds .bn-chips { min-width: 150px; }
.bn-seeds td, .bn-seeds th { white-space: nowrap; }
.bn-seeds td.bn-name, .bn-seeds td:has(.bn-chips) { white-space: normal; }

/* history and active torrents: fit the card at any width; the name column takes what is left */
.hist-t { min-width: 0; width: 100%; }
.hist-t th, .hist-t td { white-space: nowrap; padding-left: 10px; padding-right: 10px; }
.hist-t td.hist-c-name { width: 100%; max-width: 0; white-space: normal; }
@media (max-width: 1100px) { .hist-t { min-width: 860px; } }

/* chat: links, named members, the bot's amounts and counts, and a line that names the reader */
.msg__x a { color: var(--blue); text-decoration: none; }
.msg__x a:hover { text-decoration: underline; }
.msg__x a.n { font-weight: 600; }
.msg--bot .msg__x { color: var(--soft); }
.msg__x .amt { color: var(--amber); font-weight: 600; font-variant-numeric: tabular-nums; }
.msg__x .num { color: var(--green); font-weight: 600; font-variant-numeric: tabular-nums; }
.msg--hl { background: var(--acc-soft); box-shadow: inset 2px 0 0 var(--acc); }
.msg--hl:hover { background: var(--acc-soft); }
.msg--jl { cursor: default; }
.msg__ic { font-size: 11.5px; line-height: 1; }
.msg__ic:empty { display: none; }
.member__rank { font-style: normal; font-weight: 700; opacity: 0.75; margin-right: 1px; }
.member__ic { margin-left: auto; font-size: 12px; line-height: 1; }

/* chat: pictures, GIFs and clips under the message that linked them */
.msg__pic { display: block; width: fit-content; max-width: 100%; margin-top: 6px; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); background: var(--surface); line-height: 0; }
/* small by default, so a GIF sits in the conversation like a line of it; a click makes it large and a second click small again */
.msg__pic img, .msg__pic video { display: block; max-width: min(220px, 100%); max-height: 132px; width: auto; height: auto; }
.chat { overflow-anchor: none; }
.msg__pic { cursor: zoom-in; }
.msg__pic--big { cursor: zoom-out; }
.msg__pic--big img, .msg__pic--big video { max-width: min(520px, 100%); max-height: 380px; }
.msg__pic:hover { border-color: var(--line2); }
.chat--nopics .msg__pic { display: none; }
.irc__h .irc__pics { appearance: none; padding: 1px 8px; border: 1px solid var(--line2); border-radius: 999px; background: transparent; color: var(--mut); font: inherit; font-size: 11px; line-height: 1.5; cursor: pointer; }
.irc__h .irc__pics:hover { color: var(--text); border-color: var(--mut); }
.irc__h .irc__pics[aria-pressed="false"] { color: var(--dim); border-style: dashed; }
.mgrp__more { padding: 6px 8px 10px; font-size: 12px; color: var(--mut); }
/* two notices at once (freeleech and open sign-ups) do not fit a phone bar by name: there they are their dots, and a tap says what each is */
@media (max-width: 600px) { .modes:has(.mode + .mode) .mode summary b { display: none; } .modes:has(.mode + .mode) .mode summary { padding: 0 10px; } }
/* the OG badge: one of the site's first 500 members, kept for good beside the class */
.og { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 4px; font-size: 10px; font-weight: 800; letter-spacing: .08em; line-height: 1.5;
      color: #241a00; background: linear-gradient(135deg, #ffd76a, #e2a400); vertical-align: middle; box-shadow: 0 0 0 1px rgba(255, 215, 106, .35); }
.irc .member .og { margin-left: 4px; padding: 0 4px; font-size: 9px; }