:root {
  --bg: #000; --bg2: #0b0b10; --card: #16161d; --card2: #1e1e27; --line: rgba(255,255,255,.08); --line2: rgba(255,255,255,.14);
  --text: #f4f4f8; --muted: #8e8e9c; --accent: #7c6cff; --accent2: #4ec5ff; --accent-soft: rgba(124,108,255,.16);
  --good: #34d399; --warn: #fbbf24; --bad: #fb7185; --flame: #ff8a3d;
  --glass: rgba(14,14,20,.72); --shadow: 0 10px 40px rgba(0,0,0,.5);
  --safe-b: env(safe-area-inset-bottom, 0px); --safe-t: env(safe-area-inset-top, 0px);
  --tab-h: 56px; --r: 16px;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #f2f2f7; --bg2: #fff; --card: #fff; --card2: #f0f0f6; --line: rgba(0,0,0,.08); --line2: rgba(0,0,0,.14);
  --text: #16161d; --muted: #6e6e7c; --accent: #5b4bf0; --accent-soft: rgba(91,75,240,.12);
  --glass: rgba(250,250,254,.78); --shadow: 0 10px 40px rgba(0,0,0,.18); color-scheme: light;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #f2f2f7; --bg2: #fff; --card: #fff; --card2: #f0f0f6; --line: rgba(0,0,0,.08); --line2: rgba(0,0,0,.14);
    --text: #16161d; --muted: #6e6e7c; --accent: #5b4bf0; --accent-soft: rgba(91,75,240,.12);
    --glass: rgba(250,250,254,.78); --shadow: 0 10px 40px rgba(0,0,0,.18); color-scheme: light;
  }
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--bg); color: var(--text); }
body { font: 15px/1.4 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; overscroll-behavior-y: none; }
body.noscroll { overflow: hidden; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: var(--accent); text-decoration: none; }
h1, h2, h3, p { margin: 0; }
.muted { color: var(--muted); }
.accent { color: var(--accent); }
.ico { display: inline-flex; flex: none; vertical-align: middle; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.hstack { display: flex; align-items: center; gap: 8px; }
.grow { flex: 1; min-width: 0; }
.center { text-align: center; }
.hidden { display: none !important; }

/* ------------------------------ app shell ------------------------------ */
#app { min-height: 100dvh; padding-bottom: calc(var(--tab-h) + var(--safe-b) + 12px); max-width: 720px; margin: 0 auto; position: relative; }
.page { animation: pageIn .22s ease both; }
@keyframes pageIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.topbar { position: sticky; top: 0; z-index: 20; padding: calc(var(--safe-t) + 10px) 16px 8px; background: var(--glass); backdrop-filter: saturate(180%) blur(22px); -webkit-backdrop-filter: saturate(180%) blur(22px); border-bottom: 1px solid transparent; transition: border-color .2s; }
.topbar.scrolled { border-bottom-color: var(--line); }
.topbar .title-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 40px; }
.large-title { font-size: 30px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.topbar.scrolled .large-title { font-size: 20px; }
.large-title { transition: font-size .15s; }
.sub-title { font-size: 13px; color: var(--muted); margin-top: 2px; }
.content { padding: 4px 16px 24px; }
.icon-btn { width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--card2); color: var(--text); flex: none; }
.icon-btn:active { transform: scale(.92); }
.icon-btn.accent-bg { background: var(--accent); color: #fff; }
.back { display: inline-flex; align-items: center; gap: 2px; color: var(--accent); font-weight: 600; padding: 4px 0; }

.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; justify-content: center; padding-bottom: var(--safe-b); background: var(--glass); backdrop-filter: saturate(180%) blur(24px); -webkit-backdrop-filter: saturate(180%) blur(24px); border-top: 1px solid var(--line); }
.tabbar-inner { display: flex; width: 100%; max-width: 720px; }
.tab { flex: 1; height: var(--tab-h); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 10.5px; font-weight: 600; color: var(--muted); position: relative; transition: color .15s; }
.tab.on { color: var(--accent); }
.tab .ico { transition: transform .2s cubic-bezier(.3,1.6,.5,1); }
.tab.on .ico { transform: translateY(-1px) scale(1.12); }
.tab .dot { position: absolute; top: 7px; left: calc(50% + 6px); min-width: 16px; height: 16px; border-radius: 8px; background: var(--bad); color: #fff; font-size: 10px; display: flex; align-items: center; justify-content: center; padding: 0 4px; }

/* ------------------------------- controls ------------------------------ */
.searchbar { display: flex; align-items: center; gap: 8px; background: var(--card2); border-radius: 12px; padding: 0 12px; height: 40px; }
.searchbar input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; height: 100%; font-size: 16px; }
.searchbar .ico { color: var(--muted); }
.chips { display: flex; gap: 8px; overflow-x: auto; padding: 10px 16px; margin: 0 -16px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; border-radius: 16px; background: var(--card2); color: var(--text); font-size: 13.5px; font-weight: 600; white-space: nowrap; border: 1px solid transparent; transition: all .15s; }
.chip.on { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.chip.sm { height: 26px; padding: 0 10px; font-size: 12px; }
.segmented { display: flex; background: var(--card2); border-radius: 10px; padding: 2px; gap: 2px; }
.segmented button { flex: 1; height: 30px; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--muted); transition: all .15s; padding: 0 8px; white-space: nowrap; }
.segmented button.on { background: var(--card); color: var(--text); box-shadow: 0 1px 4px rgba(0,0,0,.35); }
.btn { display: flex; align-items: center; justify-content: center; gap: 8px; height: 46px; border-radius: 13px; font-weight: 700; padding: 0 18px; background: var(--card2); color: var(--text); width: 100%; transition: transform .1s, opacity .15s; }
.btn:active { transform: scale(.98); }
.btn.primary { background: linear-gradient(135deg, var(--accent), #5d8bff); color: #fff; box-shadow: 0 6px 20px rgba(124,108,255,.35); }
.btn.danger { background: var(--bad); color: #fff; }
.btn.ghost { background: transparent; color: var(--muted); }
.btn.sm { height: 34px; font-size: 13px; border-radius: 10px; width: auto; padding: 0 12px; }
.btn[disabled] { opacity: .5; pointer-events: none; }
.btn-row { display: flex; gap: 10px; }
.btn-row .btn { flex: 1; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field-label { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.field input, .field select, .field textarea, input.input, select.input { width: 100%; height: 44px; padding: 0 12px; border-radius: 11px; border: 1px solid var(--line2); background: var(--card2); outline: 0; font-size: 16px; }
.field textarea { height: auto; min-height: 80px; padding: 10px 12px; }
.field input:focus, .field select:focus { border-color: var(--accent); }
.hint { font-size: 12px; color: var(--muted); }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.switch { width: 50px; height: 30px; border-radius: 15px; background: var(--card2); border: 1px solid var(--line2); position: relative; flex: none; transition: background .2s; }
.switch i { position: absolute; top: 2px; left: 2px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,.4); transition: transform .2s; }
.switch.on { background: var(--good); border-color: var(--good); }
.switch.on i { transform: translateX(20px); }

/* -------------------------------- lists -------------------------------- */
.list { background: var(--card); border-radius: var(--r); overflow: hidden; }
.list.inset { margin: 0; }
.row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: left; width: 100%; }
.row:last-child { border-bottom: 0; }
.row.tap:active { background: var(--card2); }
.row-main { flex: 1; min-width: 0; font-weight: 600; }
.sub { font-size: 12.5px; color: var(--muted); font-weight: 400; margin-top: 1px; }
.section-title { font-size: 13px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin: 22px 4px 8px; display: flex; align-items: center; justify-content: space-between; }
.section-title button { font-size: 13px; text-transform: none; letter-spacing: 0; color: var(--accent); font-weight: 600; }
.card { background: var(--card); border-radius: var(--r); padding: 14px; }
.badge-ico { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex: none; color: #fff; }
.grad1 { background: linear-gradient(135deg, #7c6cff, #4ec5ff); }
.grad2 { background: linear-gradient(135deg, #ff8a3d, #fb7185); }
.grad3 { background: linear-gradient(135deg, #34d399, #22b8cf); }
.grad4 { background: linear-gradient(135deg, #a78bfa, #f472b6); }
.grad5 { background: linear-gradient(135deg, #64748b, #94a3b8); }

/* ------------------------------- releases ------------------------------ */
.rel { display: flex; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--line); align-items: flex-start; position: relative; }
.rel:last-child { border-bottom: 0; }
.rel:active { background: var(--card2); }
.rel .rank { width: 26px; flex: none; font-weight: 800; font-size: 18px; color: var(--muted); text-align: center; padding-top: 1px; font-variant-numeric: tabular-nums; }
.rel .rank.top { color: var(--flame); }
.rel .body { flex: 1; min-width: 0; }
.rel .name { font-weight: 600; font-size: 14.5px; line-height: 1.3; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rel .meta { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12.5px; color: var(--muted); margin-top: 5px; align-items: center; }
.rel .meta b { color: var(--text); font-weight: 600; }
.rel .badges { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.rel .go { width: 38px; height: 38px; border-radius: 50%; flex: none; background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; align-self: center; transition: transform .12s; }
.rel .go:active { transform: scale(.88); }
.rel .go.done { background: rgba(52,211,153,.16); color: var(--good); }
.rel .go.busy { opacity: .5; }
.grabs { color: var(--flame); font-weight: 700; display: inline-flex; align-items: center; gap: 2px; }
.tag { display: inline-flex; align-items: center; gap: 3px; height: 20px; padding: 0 7px; border-radius: 6px; font-size: 11px; font-weight: 700; background: var(--card2); color: var(--muted); letter-spacing: .01em; }
.tag.r2160p { background: linear-gradient(135deg, #f5c542, #ff8a3d); color: #2a1500; }
.tag.r1080p { background: rgba(78,197,255,.18); color: var(--accent2); }
.tag.r720p { background: rgba(148,163,184,.2); color: #b6c0d0; }
.tag.hdr { background: rgba(167,139,250,.2); color: #b8a4ff; }
.tag.good { background: rgba(52,211,153,.16); color: var(--good); }
.tag.lib { background: rgba(251,191,36,.16); color: var(--warn); }
.tag.src { background: var(--accent-soft); color: var(--accent); }
.tag.ix { background: transparent; border: 1px solid var(--line2); }

.hero-stat { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.stat { background: var(--card); border-radius: 14px; padding: 12px; }
.stat .v { font-size: 17px; white-space: nowrap; font-weight: 800; letter-spacing: -.02em; }
.stat .k { font-size: 11.5px; color: var(--muted); font-weight: 600; margin-top: 2px; }
.stat.link { text-align: left; }
.kv { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border-radius: 14px; overflow: hidden; }
.kv > div { background: var(--card2); padding: 10px 12px; min-width: 0; }
.kv .k { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.kv .v { font-weight: 600; margin-top: 2px; word-break: break-word; }
pre.nfo { font: 11px/1.15 ui-monospace, "SF Mono", Menlo, monospace; white-space: pre; overflow: auto; background: #000; color: #d7d7e0; padding: 12px; border-radius: 12px; max-height: 52vh; }

/* ------------------------------- posters ------------------------------- */
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (max-width: 360px) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 560px) { .grid { grid-template-columns: repeat(4, 1fr); } }
.poster { position: relative; aspect-ratio: 2/3; border-radius: 10px; overflow: hidden; background: var(--card2); display: block; width: 100%; box-shadow: 0 4px 14px rgba(0,0,0,.35); }
.poster img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity .3s; }
.poster img.ld { opacity: 1; }
.poster .ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 8px; font-size: 12px; font-weight: 700; color: var(--muted); }
.poster .pb { z-index: 2; position: absolute; left: 6px; bottom: 6px; display: flex; gap: 4px; }
.poster .pb i { width: 22px; height: 22px; border-radius: 11px; background: rgba(0,0,0,.65); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; color: var(--good); font-style: normal; }
.poster .pb i.miss { color: var(--warn); }
.poster:active { transform: scale(.97); }
.pcap { font-size: 12px; font-weight: 600; margin-top: 5px; line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.pcap span { display: block; color: var(--muted); font-weight: 400; }

.hero { position: relative; margin: 0 -16px; height: 230px; overflow: hidden; }
.hero img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.55); }
.hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 30%, var(--bg) 100%); }
.hero-row { display: flex; gap: 14px; margin-top: -90px; position: relative; z-index: 2; align-items: flex-end; }
.hero-row .poster { width: 112px; flex: none; }
.hero-row h1 { font-size: 24px; letter-spacing: -.02em; line-height: 1.15; }

.epi { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.epi:last-child { border-bottom: 0; }
.epi .num { width: 28px; color: var(--muted); font-weight: 700; font-size: 13px; text-align: center; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); flex: none; }
.dot.have { background: var(--good); } .dot.miss { background: var(--bad); } .dot.wait { background: var(--muted); opacity: .5; }

/* --------------------------------- queue ------------------------------- */
.dl-card { background: var(--card); border-radius: var(--r); padding: 16px; position: relative; overflow: hidden; }
.dl-card .speed { font-size: 34px; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.dl-card .speed small { font-size: 15px; color: var(--muted); font-weight: 600; margin-left: 3px; }
.pill { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: 11px; font-size: 11.5px; font-weight: 700; background: var(--card2); color: var(--muted); }
.pill.good { background: rgba(52,211,153,.15); color: var(--good); } .pill.warn { background: rgba(251,191,36,.15); color: var(--warn); } .pill.bad { background: rgba(251,113,133,.15); color: var(--bad); }
.progress { height: 6px; border-radius: 3px; background: var(--card2); overflow: hidden; margin-top: 8px; }
.progress > i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--accent), var(--accent2)); transition: width .6s ease; }
.progress.paused > i { background: var(--muted); }
.progress.err > i { background: var(--bad); }
.wave { position: absolute; inset: auto 0 0 0; height: 46px; opacity: .5; pointer-events: none; }

/* ------------------------------ sheets/toasts -------------------------- */
.sheet-root { position: fixed; inset: 0; z-index: 100; pointer-events: none; }
.backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.55); opacity: 0; transition: opacity .25s; }
.sheet { position: absolute; left: 0; right: 0; bottom: 0; margin: 0 auto; max-width: 720px; max-height: 88dvh; display: flex; flex-direction: column; background: var(--bg2); border-radius: 22px 22px 0 0; transform: translateY(100%); transition: transform .3s cubic-bezier(.2,.9,.25,1); box-shadow: var(--shadow); border: 1px solid var(--line); border-bottom: 0; }
.sheet.tall { height: 88dvh; }
.sheet-root.open { pointer-events: auto; }
.sheet-root.open .backdrop { opacity: 1; }
.sheet-root.open .sheet { transform: none; }
.sheet-head { padding: 8px 16px 6px; touch-action: none; }
.grabber { width: 38px; height: 5px; border-radius: 3px; background: var(--line2); margin: 0 auto 8px; }
.sheet-title-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sheet-title { font-size: 17px; font-weight: 800; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sheet-actions { display: flex; gap: 8px; align-items: center; }
.sheet-body { overflow-y: auto; padding: 8px 16px calc(20px + var(--safe-b)); -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.toasts { position: fixed; left: 0; right: 0; top: calc(var(--safe-t) + 10px); z-index: 200; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
.toast { display: flex; align-items: center; gap: 8px; padding: 11px 16px; border-radius: 14px; background: var(--card2); border: 1px solid var(--line2); box-shadow: var(--shadow); font-weight: 600; font-size: 14px; max-width: 92vw; transform: translateY(-20px); opacity: 0; transition: all .25s; }
.toast.in { transform: none; opacity: 1; }
.toast.ok .ico { color: var(--good); } .toast.error .ico { color: var(--bad); }

.empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 48px 24px; color: var(--muted); }
.empty h3 { color: var(--text); font-size: 18px; }
.empty .btn { margin-top: 10px; width: auto; }
.banner { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: rgba(251,191,36,.12); color: var(--warn); font-size: 13px; margin-bottom: 10px; }
.banner.bad { background: rgba(251,113,133,.12); color: var(--bad); }
.banner button { color: inherit; text-decoration: underline; font-size: 13px; }

.spinner { display: flex; justify-content: center; gap: 6px; padding: 28px; }
.spinner i { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); animation: bounce 1s infinite ease-in-out; }
.spinner i:nth-child(2) { animation-delay: .15s; } .spinner i:nth-child(3) { animation-delay: .3s; }
@keyframes bounce { 0%, 80%, 100% { transform: scale(.5); opacity: .4; } 40% { transform: scale(1); opacity: 1; } }
.skel { flex-direction: column; align-items: stretch; gap: 8px; padding: 16px 14px; }
.sk { height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--card2) 25%, var(--line2) 50%, var(--card2) 75%); background-size: 200% 100%; animation: shimmer 1.4s infinite; }
.sk.l1 { width: 86%; } .sk.l2 { width: 52%; height: 10px; }
@keyframes shimmer { to { background-position: -200% 0; } }
.ptr { position: fixed; top: calc(var(--safe-t) + 6px); left: 50%; transform: translate(-50%, -60px); z-index: 40; width: 38px; height: 38px; border-radius: 50%; background: var(--card2); box-shadow: var(--shadow); display: flex; align-items: center; justify-content: center; color: var(--accent); transition: transform .2s; }
.ptr.spin .ico { animation: rot .8s linear infinite; }
@keyframes rot { to { transform: rotate(360deg); } }

/* -------------------------------- auth --------------------------------- */
.auth { min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; padding: 28px; max-width: 420px; margin: 0 auto; gap: 18px; }
.logo { width: 84px; height: 84px; border-radius: 22px; background: linear-gradient(135deg, #7c6cff, #4ec5ff); display: flex; align-items: center; justify-content: center; margin: 0 auto; box-shadow: 0 16px 40px rgba(124,108,255,.45); color: #fff; }
.auth h1 { text-align: center; font-size: 28px; letter-spacing: -.02em; }

.bars { display: flex; flex-direction: column; gap: 14px; }
.bar-label { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 5px; font-weight: 600; }
.bar-track { height: 8px; background: var(--card2); border-radius: 4px; overflow: hidden; }
.bar-track > i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--accent), var(--accent2)); }
.bar-track.warn > i { background: var(--warn); } .bar-track.bad > i { background: var(--bad); }
.cal-day { position: sticky; top: calc(var(--safe-t) + 58px); background: var(--bg); padding: 12px 2px 6px; font-weight: 800; font-size: 14px; z-index: 5; }
.cal-day.today { color: var(--accent); }
.thumb { width: 42px; aspect-ratio: 2/3; border-radius: 6px; object-fit: cover; background: var(--card2); flex: none; }

/* cover art */
.rthumb { width: 50px; aspect-ratio: 2/3; border-radius: 7px; overflow: hidden; background: var(--card2); flex: none; opacity: 0; transition: opacity .3s; box-shadow: 0 3px 10px rgba(0,0,0,.35); }
.rthumb.ld { opacity: 1; }
.rthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rthumb.big { width: 92px; border-radius: 10px; }
.tag.atmos { background: rgba(78,197,255,.16); color: var(--accent2); }
.role { font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.card input:not([type=checkbox]):not([type=file]), .card textarea, .sheet-body input:not([type=checkbox]):not([type=file]):not(.x), .content textarea { width: 100%; height: 44px; padding: 0 12px; border-radius: 11px; border: 1px solid var(--line2); background: var(--card2); outline: 0; font-size: 16px; }
.card textarea, .content textarea { height: auto; min-height: 76px; padding: 10px 12px; }
.card input:focus, .card textarea:focus { border-color: var(--accent); }

/* A–Z fast scroller */
.fastscroll { position: fixed; right: 2px; top: calc(var(--safe-t) + 150px); bottom: calc(var(--tab-h) + var(--safe-b) + 20px); z-index: 25; width: 20px; display: flex; flex-direction: column; justify-content: space-between; align-items: center; padding: 3px 0; border-radius: 10px; touch-action: none; user-select: none; -webkit-user-select: none; transition: background .2s; }
.fastscroll.drag { background: var(--glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.fastscroll span { font-size: 9.5px; font-weight: 800; line-height: 1; color: var(--accent); width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; border-radius: 50%; }
.fastscroll span.none { color: var(--muted); opacity: .4; }
.fastscroll span.cur { background: var(--accent); color: #fff; }
.fs-bubble { position: fixed; right: 44px; top: 45%; z-index: 26; width: 68px; height: 68px; border-radius: 20px; background: linear-gradient(135deg, var(--accent), #5d8bff); color: #fff; font-size: 38px; font-weight: 800; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow); opacity: 0; transform: scale(.7); pointer-events: none; transition: opacity .15s, transform .15s; }
.fs-bubble.on { opacity: 1; transform: none; }

/* hide Safari's built-in search ✕ — the app has its own that resets the whole search */
.searchbar input::-webkit-search-cancel-button, .searchbar input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }

.pcap span.q { color: var(--accent2); font-weight: 600; font-size: 11px; }
.rsize { font-weight: 700; font-size: 13px; text-align: right; flex: none; white-space: nowrap; }
.list a.row .thumb { width: 44px; }

/* recent searches dropdown */
.searchwrap { position: relative; }
.recent-panel { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 50; background: var(--bg2); border: 1px solid var(--line2); border-radius: 14px; box-shadow: var(--shadow); overflow: hidden; }
.recent-head { display: flex; justify-content: space-between; align-items: center; padding: 9px 14px 5px; font-size: 11.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.recent-head button { font-size: 12.5px; text-transform: none; letter-spacing: 0; color: var(--accent); font-weight: 600; }
.recent-row { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-top: 1px solid var(--line); font-weight: 600; cursor: pointer; }
.recent-row:active { background: var(--card2); }
.recent-row span.grow { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recent-row button { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--muted); }

.gauge { margin: 4px auto 0; max-width: 300px; }

/* trailer card */
.trailer { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #000; box-shadow: 0 6px 20px rgba(0,0,0,.4); }
.trailer img { width: 100%; height: 100%; object-fit: cover; opacity: .82; }
.trailer .play { position: absolute; inset: 0; margin: auto; width: 62px; height: 62px; border-radius: 50%; background: rgba(0,0,0,.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; color: #fff; border: 1px solid rgba(255,255,255,.35); }
.trailer .cap { position: absolute; left: 12px; bottom: 10px; right: 12px; color: #fff; font-weight: 700; font-size: 13px; text-align: left; text-shadow: 0 1px 6px rgba(0,0,0,.8); }

/* sheets never scroll sideways; the compact action rows fit 4 buttons on a phone */
.sheet-body { overflow-x: hidden; }
.btn-row .btn.sm { padding: 0 8px; min-width: 0; white-space: nowrap; gap: 6px; }
.kv > div, .row-main { min-width: 0; overflow-wrap: anywhere; }

.toast.has-act { pointer-events: auto; }
.toast .tact { margin-left: 6px; padding: 4px 10px; border-radius: 9px; background: var(--accent-soft); color: var(--accent); font-weight: 700; font-size: 13px; white-space: nowrap; }