:root { --bg:#0c0d0c; --surface:rgba(28,31,27,.72); --ink:#f4f5ec; --muted:#9aa394; --line:#2c312b; --accent:#d6ef69; --accent-dark:#d6ef69; --soft:#1c201b; --shadow:0 30px 90px rgba(0,0,0,.45); --radius:18px; color-scheme:dark; }
:root.light { --bg:#f3f2ed; --surface:rgba(255,255,255,.78); --ink:#161714; --muted:#6f746c; --line:#e2e3db; --accent:#d6ef69; --accent-dark:#3e4c12; --soft:#eceee5; --shadow:0 24px 80px rgba(22,23,20,.12); color-scheme:light; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:system-ui, sans-serif; }
body:before { content:''; position:fixed; inset:0; pointer-events:none; opacity:.035; z-index:0; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
body > * { position:relative; z-index:1; }
.topbar { height:72px; position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between; gap:18px; padding:0 5vw; background:color-mix(in srgb, var(--bg) 72%, transparent); border-bottom:1px solid var(--line); backdrop-filter:blur(18px) saturate(1.4); }
.brand { display:flex; align-items:center; gap:11px; color:var(--ink); text-decoration:none; font-weight:800; letter-spacing:-.02em; }
.brand-mark { width:30px; height:30px; display:block; border-radius:8px; }
.brand-name { font-weight:800; letter-spacing:-.04em; font-size:17px; line-height:1; }
.brand-name small { font-weight:700; letter-spacing:-.03em; color:var(--muted); font-size:.78em; }
.top-actions { display:flex; align-items:center; gap:18px; }
.preview-toggle { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:11px; cursor:pointer; user-select:none; }
.preview-toggle input { position:absolute; width:1px; height:1px; opacity:0; }
.toggle-track { width:38px; height:22px; padding:3px; border-radius:999px; background:var(--soft); border:1px solid var(--line); transition:background .2s ease, border-color .2s ease; }
.toggle-track:after { content:''; display:block; width:14px; height:14px; border-radius:50%; background:var(--muted); transition:transform .2s ease, background .2s ease; }
.preview-toggle input:checked + .toggle-track { background:var(--accent); border-color:var(--accent); }
.preview-toggle input:checked + .toggle-track:after { transform:translateX(16px); background:#20211f; }
.preview-toggle input:focus-visible + .toggle-track { outline:2px solid var(--accent); outline-offset:2px; }
.footer { width:min(1400px, 90vw); margin:0 auto; padding:24px 0 34px; border-top:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; }
.language { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:12px; }
select, input { font:inherit; color:var(--ink); background:var(--surface); border:1px solid var(--line); border-radius:8px; }
select { padding:10px 30px 10px 12px; }
.icon-button, .quiet-button, .text-button, .load-more { border:0; cursor:pointer; font:inherit; }
.icon-button { background:var(--soft); width:36px; height:36px; border-radius:50%; color:var(--ink); }
main { width:min(1400px, 90vw); max-width:1400px; margin:0 auto; overflow-x:hidden; }
.cmd-hint { margin-left:auto; border:1px solid var(--line); background:var(--soft); color:var(--muted); border-radius:999px; padding:8px 14px; font:12px system-ui, sans-serif; cursor:pointer; display:flex; align-items:center; gap:10px; }
.cmd-hint kbd { font-size:10px; }
.hero { min-height:320px; position:relative; display:flex; align-items:end; justify-content:space-between; padding:72px 0 44px; border-bottom:1px solid var(--line); overflow:hidden; border-radius:0 0 28px 28px; }
.hero-media { position:absolute; inset:0; }
.hero-media img { width:100%; height:100%; object-fit:cover; filter:saturate(1.05); }
.hero-scrim { position:absolute; inset:0; background:linear-gradient(90deg, var(--bg) 8%, color-mix(in srgb, var(--bg) 55%, transparent) 48%, transparent 100%), linear-gradient(180deg, transparent 20%, var(--bg) 100%); }
.hero-content, .hero-stat { position:relative; z-index:1; }
.play-button { border:0; background:var(--accent); color:#1b2108; font:800 13px system-ui, sans-serif; padding:12px 22px; border-radius:999px; cursor:pointer; letter-spacing:.02em; }
.hero-cta { display:flex; align-items:center; gap:16px; margin-top:22px; }
.hero-kicker { color:var(--muted); font:12px ui-monospace, monospace; }
.toolbar { position:sticky; top:72px; z-index:15; background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:blur(16px); }
.eyebrow { color:var(--muted); font:500 11px/1.2 ui-monospace, monospace; letter-spacing:.08em; margin:0 0 14px; text-transform:uppercase; }
h1 { margin:0; font-size:clamp(34px,5vw,68px); line-height:1.02; letter-spacing:-.055em; max-width:700px; }
.hero-copy { margin:17px 0 0; color:var(--muted); font-size:15px; }
.hero-stat { display:flex; flex-direction:column; align-items:flex-end; gap:5px; color:var(--muted); font-size:12px; }
.hero-stat strong { color:var(--ink); font-size:44px; letter-spacing:-.06em; }
.toolbar { display:flex; flex-wrap:wrap; gap:10px; align-items:center; padding:24px 0; width:100%; min-width:0; }
.search { display:flex; align-items:center; gap:10px; flex:1; border:1px solid var(--line); border-radius:9px; padding:0 14px; background:var(--surface); color:var(--muted); }
.search input { border:0; outline:0; flex:1; padding:12px 0; min-width:0; background:transparent; }
.search-submit { border:0; background:transparent; color:var(--muted); cursor:pointer; padding:5px 0 5px 10px; font:16px ui-monospace, monospace; }
.quiet-button { background:transparent; color:var(--muted); padding:12px 8px; text-decoration:none; display:inline-flex; align-items:center; }
.filter-chips { display:flex; flex-wrap:wrap; gap:8px; padding:0 0 8px; }
.filter-chip { border:1px solid var(--line); background:var(--surface); color:var(--ink); border-radius:999px; padding:6px 10px; font:12px system-ui, sans-serif; cursor:pointer; }
.filter-chip.exclude { color:#8c3b34; }
.filter-chip:hover { background:var(--soft); }
.tag-search { width:100%; margin:0 0 10px; padding:8px 10px; font-size:12px; border-radius:7px; }
.more-tags { margin-top:8px; }
.list-links { display:flex; flex-direction:column; gap:6px; }
.list-links .text-button { display:flex; justify-content:space-between; text-align:left; }
.shelf { margin:0 0 28px; }
.shelf h3, .related h3 { margin:0 0 12px; font-size:16px; letter-spacing:-.03em; }
.shelf-grid { grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); }
.card-actions { position:absolute; top:8px; right:8px; z-index:3; display:flex; gap:4px; opacity:0; }
.video-card:hover .card-actions, .video-card:focus-within .card-actions { opacity:1; }
.mini-action { width:28px; height:28px; border:0; border-radius:50%; background:rgba(0,0,0,.62); color:#fff; cursor:pointer; font-size:13px; }
.mini-action.on { background:var(--accent); color:#20211f; }
.card-size { margin-left:auto; }
.watch-actions { display:flex; flex-wrap:wrap; gap:8px; margin:14px 0; }
.related { margin-top:36px; }
.help-dialog { width:min(420px,92vw); border:0; border-radius:12px; padding:24px 28px; background:var(--surface); color:var(--ink); }
.help-dialog ul { padding-left:0; list-style:none; line-height:1.9; color:var(--muted); }
kbd { font:12px ui-monospace, monospace; background:var(--soft); padding:2px 6px; border-radius:4px; color:var(--ink); }
.layout { display:grid; grid-template-columns:210px minmax(0, 1fr); gap:42px; padding-bottom:80px; width:100%; }
.sidebar { border-right:1px solid var(--line); padding-right:24px; min-width:0; }
.results { min-width:0; max-width:100%; }
.side-heading, .results-head { display:flex; align-items:center; justify-content:space-between; }
.side-heading { font-size:12px; font-weight:700; margin:8px 0 15px; }
.text-button { color:var(--muted); background:transparent; font-size:12px; padding:0; }
.text-button.active { color:var(--accent-dark); font-weight:800; }
.category-list, .tag-list { display:flex; flex-direction:column; gap:3px; }
.category, .tag-filter { border:0; text-align:left; background:transparent; color:var(--muted); padding:9px 8px; border-radius:7px; cursor:pointer; display:flex; justify-content:space-between; font:500 12px system-ui, sans-serif; }
.category:hover, .category.active, .tag-filter:hover, .tag-row.active .tag-filter { background:var(--soft); color:var(--ink); }
.count { font:11px ui-monospace, monospace; color:var(--muted); }
.tag-heading { margin-top:35px; }
.tag-row { display:flex; align-items:center; gap:2px; }
.tag-row .tag-filter { flex:1; min-width:0; overflow:hidden; }
.tag-filter { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tag-sign { flex:none; width:24px; height:24px; border:0; border-radius:6px; background:transparent; color:var(--muted); cursor:pointer; font:700 14px/1 ui-monospace, monospace; padding:0; }
.tag-sign:hover { background:var(--soft); color:var(--ink); }
.tag-sign.on.tag-plus, .tag-row.included .tag-plus { background:var(--accent); color:#20211f; }
.tag-sign.on.tag-minus, .tag-row.excluded .tag-minus { background:#8c3b34; color:#fff; }
.tag-row.included .tag-filter { color:var(--ink); }
.tag-row.excluded .tag-filter { opacity:.65; }
.results-head { margin:8px 0 18px; }
h2 { font-size:20px; letter-spacing:-.035em; margin:0; }
.muted { color:var(--muted); font:11px ui-monospace, monospace; }
.video-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap:18px; width:100%; }
.video-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; cursor:pointer; transition:transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s ease; backdrop-filter:blur(12px); }
.video-card:hover { transform:translateY(-6px) scale(1.015); box-shadow:var(--shadow); }
.video-card.enter { animation:rise .45s cubic-bezier(.2,.8,.2,1) both; }
@keyframes rise { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }
.card-art { aspect-ratio:16/10; background:linear-gradient(135deg,#252a26,#6e7b52); position:relative; display:flex; align-items:flex-end; padding:13px; color:#fff; overflow:hidden; }
/* contain, not cover: the generated thumbs/previews keep the video's real
   aspect (scale=W:-2, never cropped at encode time), so cover was zooming
   them into the 16:10 frame and hiding the edges. Letterbox gaps inside the
   card are fine -- seeing the whole frame is the point. */
.card-thumb, .card-preview { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.card-thumb { z-index:1; transition:opacity .2s ease; }
/* The clip stays painted under the still. opacity:0 makes phones refuse to
   decode it, so the switch can be on and every card stays frozen. */
.card-preview { z-index:0; opacity:1; }
.video-card.previewing .card-thumb { opacity:0; }
.video-card.previewing { content-visibility:visible; }
.card-art:after { content:'▶'; width:34px; height:34px; border-radius:50%; background:var(--accent); color:#26300e; display:grid; place-items:center; font-size:11px; padding-left:2px; opacity:0; transform:translateY(8px); transition:.2s; position:relative; z-index:1; }
.video-card:hover .card-art:after { opacity:1; transform:none; }
.card-code { position:absolute; top:12px; left:12px; z-index:2; font:10px ui-monospace, monospace; opacity:.75; }
.card-duration { position:absolute; right:8px; bottom:8px; z-index:2; background:rgba(0,0,0,.78); color:#fff; padding:3px 6px; border-radius:4px; font:11px/1 ui-monospace, monospace; letter-spacing:.02em; pointer-events:none; }
.card-progress { position:absolute; left:0; right:0; bottom:0; height:4px; background:rgba(0,0,0,.35); z-index:2; }
.card-progress i { display:block; height:100%; background:var(--accent); }
.card-watched { position:absolute; top:8px; left:8px; z-index:3; background:rgba(0,0,0,.62); color:#fff; font:10px ui-monospace, monospace; padding:3px 6px; border-radius:4px; }
.grid-density { display:flex; gap:2px; }
.grid-density button { border:1px solid var(--line); background:var(--surface); color:var(--muted); width:32px; height:36px; border-radius:7px; cursor:pointer; }
.grid-density button.on { background:var(--accent); color:#20211f; border-color:var(--accent); }
.video-grid.compact { grid-template-columns:repeat(auto-fill, minmax(min(160px, 100%), 1fr)); gap:10px; }
.video-grid.wide { grid-template-columns:repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap:22px; }
.preview-label { position:absolute; left:12px; bottom:12px; z-index:2; opacity:0; background:rgba(0,0,0,.58); padding:5px 7px; border-radius:5px; font:10px ui-monospace, monospace; transition:opacity .2s; }
.video-card:hover .preview-label { opacity:1; }
.card-body { padding:14px; }
.card-title { margin:0 0 8px; font-size:14px; line-height:1.35; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.card-meta { display:flex; justify-content:space-between; color:var(--muted); font:10px ui-monospace, monospace; }
.card-date { display:flex; flex-direction:column; gap:3px; position:relative; cursor:help; }
.exact-date { display:none; color:var(--ink); }
.card-date::after { content:attr(data-tooltip); position:absolute; left:0; bottom:calc(100% + 8px); z-index:5; background:var(--ink); color:var(--bg); border-radius:5px; padding:7px 9px; white-space:nowrap; font:11px ui-monospace, monospace; opacity:0; pointer-events:none; transform:translateY(3px); transition:opacity .15s ease .55s, transform .15s ease .55s; }
.card-date:hover::after, .card-date.tip-visible::after { opacity:1; transform:none; transition-delay:0s; }
.chips { display:flex; flex-wrap:nowrap; gap:5px; margin-top:12px; overflow-x:auto; overscroll-behavior-x:contain; padding-bottom:3px; scrollbar-width:thin; -webkit-overflow-scrolling:touch; }
.chips .chip { flex:0 0 auto; white-space:nowrap; }
.chip { background:var(--soft); color:var(--muted); padding:5px 7px; border-radius:5px; font:10px ui-monospace, monospace; border:0; cursor:pointer; text-decoration:none; }
.empty { text-align:center; padding:90px 20px; color:var(--muted); }
.empty-icon { font-size:40px; color:var(--accent-dark); }
.empty h3 { color:var(--ink); margin:12px 0 5px; }
.empty p { margin:0; font-size:13px; }
.load-more { display:block; margin:30px auto 0; padding:12px 20px; border-radius:8px; background:var(--ink); color:var(--bg); }
.player-dialog { width:min(1000px,92vw); padding:0; border:0; background:var(--surface); color:var(--ink); border-radius:12px; overflow:hidden; box-shadow:var(--shadow); }
.player-dialog::backdrop { background:rgba(15,18,14,.82); }
.player-wrap { background:#0d0e0c; aspect-ratio:16/9; }
.player-wrap video { width:100%; height:100%; display:block; }
.player-info { padding:24px 28px 30px; }
.player-info h2 { font-size:28px; margin-bottom:10px; }
.meta-line { color:var(--muted); font:11px ui-monospace, monospace; }
.close { position:absolute; right:15px; top:12px; border:0; background:rgba(0,0,0,.55); color:#fff; width:34px; height:34px; border-radius:50%; font-size:24px; cursor:pointer; z-index:2; }
.source-link { display:inline-block; margin-top:18px; color:var(--accent-dark); font-size:12px; font-weight:700; }
.back-link { display:inline-block; margin:34px 0 20px; color:var(--muted); text-decoration:none; font-size:13px; }
.back-link:hover { color:var(--ink); }
.watch-page { max-width:1180px; margin:0 auto 80px; }
.watch-ambient { position:fixed; inset:0; z-index:0; background-size:cover; background-position:center; filter:blur(48px) saturate(1.3); opacity:.28; transform:scale(1.12); pointer-events:none; }
.watch-video-wrap { width:100%; aspect-ratio:16/9; background:#050605; border-radius:22px; overflow:hidden; box-shadow:var(--shadow); position:relative; }
.watch-video-wrap video { width:100%; height:100%; display:block; }
#watch-player { touch-action:manipulation; }
.seek-badge { position:absolute; top:50%; right:9%; transform:translateY(-50%) scale(.85); background:rgba(0,0,0,.72); color:#fff; font:600 15px ui-monospace, monospace; padding:10px 16px; border-radius:999px; opacity:0; transition:opacity .18s, transform .18s; pointer-events:none; z-index:2; }
.seek-badge.left { right:auto; left:9%; }
.seek-badge.show { opacity:1; transform:translateY(-50%) scale(1); }
.watch-copy { padding:25px 4px; }
.watch-copy h1 { font-size:clamp(26px,4vw,48px); max-width:900px; }
.rail { display:flex; gap:14px; overflow-x:auto; max-width:100%; min-width:0; padding:4px 2px 14px; scroll-snap-type:x mandatory; scrollbar-width:thin; }
.rail .video-card { min-width:220px; width:220px; max-width:220px; scroll-snap-align:start; flex:none; }
.discover { margin:0 0 28px; display:flex; flex-direction:column; gap:8px; }
[hidden] { display:none !important; }
.skeletons .sk { aspect-ratio:16/10; border-radius:var(--radius); background:linear-gradient(90deg, var(--soft), color-mix(in srgb, var(--soft) 40%, var(--line)), var(--soft)); background-size:200% 100%; animation:shimmer 1.2s infinite; }
@keyframes shimmer { to { background-position:200% 0; } }
.cmd-dialog { width:min(560px,92vw); border:0; border-radius:18px; padding:0; background:var(--bg); color:var(--ink); box-shadow:var(--shadow); overflow:hidden; }
.cmd-dialog input { width:100%; border:0; border-bottom:1px solid var(--line); padding:16px 18px; outline:0; background:transparent; font-size:16px; }
.cmd-results { max-height:360px; overflow:auto; }
.cmd-item { display:flex; justify-content:space-between; gap:12px; width:100%; border:0; background:transparent; color:var(--ink); text-align:left; padding:12px 18px; cursor:pointer; font:13px system-ui, sans-serif; }
.cmd-item:hover, .cmd-item.active { background:var(--soft); }
.cmd-item span { color:var(--muted); font:11px ui-monospace, monospace; }
.toasts { position:fixed; right:24px; bottom:24px; z-index:40; display:flex; flex-direction:column; gap:8px; }
.toast { background:var(--ink); color:var(--bg); padding:10px 14px; border-radius:10px; font:12px system-ui, sans-serif; animation:rise .25s ease; }
.to-top { position:fixed; right:22px; bottom:78px; z-index:30; width:42px; height:42px; border:0; border-radius:50%; background:var(--ink); color:var(--bg); cursor:pointer; box-shadow:var(--shadow); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  .video-card, .video-card.enter, .toast, .skeletons .sk, .seek-badge { animation:none; transition:none; }
}
/* Skip rendering off-screen cards entirely — the single biggest scroll win on
   long grids. Ignored by browsers without support. */
.video-card { content-visibility:auto; contain-intrinsic-size:auto 320px; }
/* Coarse pointers (phones/tablets): backdrop blur on every card plus two
   sticky blurred bars forces a full re-composite on each scroll frame, and
   hover lift has no meaning without a hover cursor. Solid bars, no card
   blur, no lift — desktop keeps the glassy look. */
@media (pointer: coarse) {
  .topbar, .toolbar { backdrop-filter:none; background:var(--bg); }
  .video-card { backdrop-filter:none; transition:transform .12s ease; }
  .video-card:active { transform:scale(.99); }
  .video-card:hover { transform:none; box-shadow:none; }
  .card-thumb { transition:opacity .2s ease; }
  .video-card:hover .card-thumb { transform:none; }
}
/* Touch-sized watch controls: 44px targets, and 16px on the select so iOS
   Safari doesn't zoom the page when it takes focus. */
@media (max-width:800px) {
  .watch-actions { gap:10px; }
  .watch-actions .quiet-button, .watch-actions select, .watch-actions .preview-toggle { min-height:44px; font-size:15px; }
  .watch-actions .quiet-button { padding:10px 14px; background:var(--soft); border-radius:9px; }
  #watch-rate { font-size:16px; }
}
@media (max-width:800px) { main { width:calc(100% - 32px); } .topbar { padding:0 16px; } .footer { width:calc(100% - 32px); justify-content:flex-start; } .hero { min-height:210px; padding-top:42px; } .hero-stat { display:none; } .layout { display:block; } .sidebar { border-right:0; border-bottom:1px solid var(--line); padding:0 0 17px; margin-bottom:24px; } .category-list, .tag-list { flex-direction:row; overflow-x:auto; gap:6px; padding-bottom:7px; scrollbar-width:none; } .category-list::-webkit-scrollbar, .tag-list::-webkit-scrollbar { display:none; } .category, .tag-filter { min-width:max-content; background:var(--soft); } .tag-row { min-width:max-content; background:var(--soft); border-radius:7px; padding-right:4px; } .tag-heading { display:flex; margin-top:14px; margin-bottom:8px; } .toolbar { flex-wrap:wrap; } .search { flex-basis:100%; order:-1; } .video-grid { grid-template-columns:1fr; gap:14px; } .card-body { padding:11px; } .card-title { font-size:12px; } }

/* Videos visible before tagging has run: keep the chip row from collapsing
   and make the in-progress state legible without competing with real tags. */
.chip-pending {
    opacity: .6;
    font-style: italic;
    cursor: default;
    pointer-events: none;
}

/* Ad-block gate. Plain class names on purpose: filter lists hide anything
   called .adblock-notice or #adblock-warning, which would swallow the very
   message the visitor needs to read. See public/app.js. */
html.gate-locked, html.gate-locked body { overflow:hidden; }
.gate-panel { position:fixed; inset:0; z-index:2147483000; display:grid; place-items:center; padding:24px;
  background:color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter:blur(14px) saturate(1.2); }
.gate-panel[hidden] { display:none; }
.gate-card { width:min(560px, 100%); background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:34px 32px; text-align:left; }
.gate-eyebrow { margin:0 0 10px; font:10px ui-monospace, monospace; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.gate-card h2 { margin:0 0 14px; font-size:24px; line-height:1.2; letter-spacing:-.02em; }
.gate-copy { margin:0 0 20px; color:var(--muted); font-size:14px; line-height:1.6; }
.gate-steps { margin:0 0 26px; padding-left:20px; color:var(--ink); font-size:13px; line-height:1.9; }
.gate-steps strong { font-family:ui-monospace, monospace; font-size:12px; }
.gate-actions { display:flex; flex-wrap:wrap; align-items:center; gap:14px; }
.gate-button { border:0; cursor:pointer; font:inherit; font-weight:700; font-size:14px; padding:13px 22px;
  border-radius:999px; background:var(--accent); color:#1b2108; }
/* Literal ink, not var(--accent-dark): in the dark theme that variable is set to
   --accent itself, which painted the label the same colour as the button. Every
   other accent button here (.play-button, .mini-action.on) does the same. */
.gate-button:disabled { opacity:.6; cursor:progress; }
@media (max-width:560px) { .gate-card { padding:26px 20px; } .gate-card h2 { font-size:20px; } }


/* --- Real links everywhere -------------------------------------------------
   Every navigable control is an <a href> so right-click "open in new tab",
   middle-click and cmd/ctrl-click behave the way they do anywhere else on the
   web. These rules just make anchors look like the buttons they replaced. */
/* The stretched link must be positioned against the CARD, so the card needs to
   be a containing block. Without this it resolved against whatever ancestor
   happened to be positioned. */
.video-card { position:relative; }
.card-link { position:absolute; inset:0; z-index:4; border-radius:inherit; }
.card-link:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
/* the card's own controls must stay clickable above the stretched link */
.card-actions, .chips, .card-date { position:relative; z-index:5; }
.video-card .chip { position:relative; z-index:5; }

/* anchors standing in for buttons: no underline, inherit the button metrics */
a.quiet-button, a.text-button, a.load-more, a.play-button,
a.category, a.tag-filter, a.tag-sign, a.filter-chip, a.chip, a.cmd-item { text-decoration:none; }
a.quiet-button, a.text-button, a.load-more, a.play-button { display:inline-block; }
a.category { display:flex; }
a.tag-filter, a.tag-sign { display:inline-flex; align-items:center; }
a.load-more { text-align:center; }

/* --- Pagination (replaces the old "Load more") ---------------------------- */
.pagination { display:flex; flex-direction:column; align-items:center; gap:10px; margin:36px 0 8px; }
.pg-pages { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:6px; }
.pg { min-width:38px; height:38px; padding:0 11px; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--line); background:var(--surface); color:var(--ink); border-radius:11px;
  font:600 13px system-ui, sans-serif; text-decoration:none;
  transition:background .15s ease, border-color .15s ease, transform .15s ease; }
.pg:hover { background:var(--soft); border-color:color-mix(in srgb, var(--accent) 55%, var(--line)); transform:translateY(-1px); }
.pg.is-current { background:var(--accent); border-color:var(--accent); color:#1b2108; font-weight:800; cursor:default; }
.pg.is-current:hover { transform:none; }
.pg.is-disabled { opacity:.32; cursor:default; }
.pg.is-disabled:hover { background:var(--surface); border-color:var(--line); transform:none; }
.pg-arrow { font-size:17px; line-height:1; padding-bottom:2px; }
.pg-gap { color:var(--muted); padding:0 3px; font:13px ui-monospace, monospace; user-select:none; }
.pg-caption { margin:0; color:var(--muted); font:11px ui-monospace, monospace; }
a.pg:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

/* --- Duration in the card meta row (was file size; size moved to tooltip) - */
.card-duration-meta { color:var(--ink); font-weight:600; cursor:help; }

/* --- Polish pass ----------------------------------------------------------- */
/* Shelf headings get a small accent tick so the rails read as sections. */
.shelf h3, .related h3, .discover .shelf h3 { display:flex; align-items:center; gap:10px; letter-spacing:-.02em; }
.shelf h3:before, .related h3:before { content:''; width:20px; height:3px; border-radius:2px; background:var(--accent); flex:none; }

/* Rails: neater scrollbar so a long shelf invites sideways scrolling. */
.rail { scrollbar-color:var(--line) transparent; }
.rail::-webkit-scrollbar { height:8px; }
.rail::-webkit-scrollbar-thumb { background:var(--line); border-radius:99px; }
.rail::-webkit-scrollbar-track { background:transparent; }

/* Cards: accent border + gentle art zoom on hover. */
.video-card:hover { border-color:color-mix(in srgb, var(--accent) 45%, var(--line)); }
.card-thumb { transition:opacity .2s ease, transform .4s cubic-bezier(.2,.8,.2,1); }
.video-card:hover .card-thumb { transform:scale(1.045); }

/* Sidebar: the active category gets an accent marker, not just a colour. */
.category { position:relative; }
.category.active:before { content:''; position:absolute; left:0; top:22%; bottom:22%; width:3px; border-radius:2px; background:var(--accent); }

/* Toolbar selects read as pills alongside the search field. */
.toolbar select { border-radius:999px; }

/* One consistent focus ring for keyboard users. */
a:focus-visible, button:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:8px; }
.video-card a:focus-visible { outline-offset:-2px; }

.results-head h2 { font-size:22px; }
.hero h1 { text-wrap:balance; }

/* Accounts: auth pages, topbar sign-in/out, reaction buttons. */
.auth-wrap { max-width:520px; margin:48px auto; padding:0 16px; }
.auth-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:28px; }
.auth-card h2 { margin:0 0 16px; font-size:22px; letter-spacing:-.02em; }
.auth-card form { display:flex; flex-direction:column; gap:12px; margin:0 0 20px; }
.auth-card form:last-child { margin-bottom:0; }
.auth-card h3 { margin:8px 0 0; font-size:14px; }
.auth-card label { display:flex; flex-direction:column; gap:6px; font-size:13px; color:var(--muted); }
.auth-card input[type="email"], .auth-card input[type="password"], .auth-card input[type="text"] { font:inherit; padding:12px; font-size:16px; color:var(--ink); background:var(--bg); border:1px solid var(--line); border-radius:9px; min-height:48px; caret-color:var(--accent-dark); }
.auth-card input:focus-visible { outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent); }
.auth-card input:-webkit-autofill { -webkit-text-fill-color:var(--ink); -webkit-box-shadow:0 0 0 100px var(--bg) inset; }
.form-note { font-size:13px; margin:0 0 12px; }
.form-error { color:#e08d85; font-weight:700; }
:root.light .form-error { color:#8c3b34; }
.form-ok { color:var(--accent-dark); font-weight:700; }
.form-alt { font-size:13px; color:var(--muted); display:flex; flex-wrap:wrap; gap:4px 8px; align-items:baseline; }
.form-alt b { color:var(--ink); font-weight:700; overflow-wrap:anywhere; }
.form-alt:not(.auth-lang) a, .form-alt:not(.auth-lang) a:visited { color:var(--accent-dark); font-weight:700; text-decoration:none; }
.form-alt:not(.auth-lang) a:hover { text-decoration:underline; text-underline-offset:3px; }
.form-alt:not(.auth-lang) a:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:4px; }
.auth-lang { justify-content:center; font-size:12px; margin:20px 0 0; }
.quiet-button.primary { background:var(--accent); color:#20211f; border-radius:9px; padding:12px 18px; justify-content:center; width:100%; font-weight:800; }
.auth-card form .quiet-button:not(.primary) { border:1px solid var(--line); border-radius:9px; justify-content:center; color:var(--ink); font-weight:700; background:transparent; }
.auth-card form .quiet-button:not(.primary):hover { background:var(--soft); }
.pw-wrap { display:flex; gap:8px; }
.pw-wrap input { flex:1; min-width:0; }
.pw-toggle { flex:none; border:1px solid var(--line); background:var(--soft); color:var(--muted); border-radius:9px; padding:0 14px; font-size:13px; cursor:pointer; }
.inline-form { display:inline; }
.quiet-button.on { color:var(--accent-dark); font-weight:800; }

/* Mobile UX: compact topbar (icon-only preview toggle, no wrapped sign-in),
   native-feeling tap feedback, and safe-area clearance. */
@media (max-width:800px) {
  .preview-toggle span:last-child { display:none; }
  .top-actions .quiet-button { white-space:nowrap; }
  .auth-wrap { margin:32px auto 64px; }
}
@media (pointer: coarse) {
  a, button { -webkit-tap-highlight-color:transparent; }
  .footer { padding-bottom:calc(34px + env(safe-area-inset-bottom)); }
  .to-top { bottom:calc(78px + env(safe-area-inset-bottom)); }
}

.age-pill { display:inline-flex; align-items:center; justify-content:center; min-width:28px; height:18px; padding:0 6px; border-radius:999px; background:#8c3b34; color:#fff; font:700 10px/1 ui-monospace, monospace; letter-spacing:.04em; }
.legal-bar { width:min(1400px, 90vw); margin:0 auto; padding:0 0 28px; display:flex; flex-wrap:wrap; gap:12px 16px; align-items:center; color:var(--muted); font-size:12px; }
.legal-bar a { color:var(--muted); text-decoration:none; }
.legal-bar a:hover { color:var(--ink); }
.cookie-banner { position:fixed; z-index:40; left:16px; right:16px; bottom:16px; max-width:980px; margin:0 auto; display:flex; gap:18px; align-items:center; justify-content:space-between; padding:16px 18px; background:var(--surface); color:var(--ink); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); max-height:50vh; overflow:auto; }
.cookie-copy { min-width:0; }
.cookie-copy strong { display:block; margin-bottom:6px; }
.cookie-copy p { margin:0 0 8px; font-size:13px; color:var(--muted); }
.cookie-links a { color:var(--accent-dark); font-weight:700; text-decoration:none; }
.cookie-actions { display:flex; gap:10px; flex:none; }
.cookie-actions form { margin:0; }
.cookie-banner .quiet-button { min-width:140px; border:1px solid var(--line); border-radius:9px; padding:12px 16px; background:transparent; color:var(--ink); font-weight:700; }
.cookie-banner .quiet-button.primary { width:auto; background:var(--accent); color:#20211f; border-color:transparent; }
.auth-card label.check-line, .report-card label.check-line { flex-direction:row; align-items:flex-start; gap:10px; }
.check-line input { margin-top:2px; flex:none; }
.auth-card input[type="date"], .auth-card select, .auth-card textarea, .report-card select, .report-card textarea { font:inherit; padding:12px; font-size:16px; color:var(--ink); background:var(--bg); border:1px solid var(--line); border-radius:9px; width:100%; }
.report-card { margin-top:18px; border:1px solid var(--line); border-radius:12px; padding:12px 14px; background:var(--surface); max-width:520px; }
.report-card summary { cursor:pointer; font-weight:700; list-style:none; }
.report-card summary::-webkit-details-marker { display:none; }
.report-card form { display:flex; flex-direction:column; gap:10px; margin-top:12px; }
.report-card label { display:flex; flex-direction:column; gap:6px; font-size:13px; color:var(--muted); }
.banner-note { margin:0 0 14px; padding:10px 12px; border-radius:10px; background:var(--soft); border:1px solid var(--line); font-size:14px; }
.legal-doc { width:min(760px, 90vw); margin:36px auto 48px; }
.legal-doc h1 { font-size:clamp(32px, 4vw, 48px); }
.legal-doc h2 { font-size:18px; margin:22px 0 8px; }
.legal-doc p, .legal-doc li { font-size:15px; line-height:1.55; }
.legal-doc table { width:100%; border-collapse:collapse; font-size:14px; }
.legal-doc th, .legal-doc td { text-align:left; padding:8px 10px; border-bottom:1px solid var(--line); vertical-align:top; }
body:has(.cookie-banner) { padding-bottom:140px; }
body:has(.cookie-banner) .auth-wrap { margin-bottom:180px; }
@media (max-width:800px) {
  .cookie-banner { flex-direction:column; align-items:stretch; left:10px; right:10px; bottom:10px; }
  .cookie-actions { flex-direction:column; }
  .cookie-banner .quiet-button, .cookie-banner .quiet-button.primary { width:100%; }
}