/* 91pornxy ADHUB — warm catalogue, original black chrome, berry/plum accents.
   Content first: generous covers and familiar play cues; latest UX stays intact.
   Light app chrome / dark playback; no third-party font dependencies. */
:root {
  color-scheme: light;
  --color-bg:#f6f3eb; --color-surface:#fffdf7; --color-text:#232820; --color-muted:#5c6655;
  --color-divider:#d8d5c8; --color-accent:#8b3659; --color-accent-100:#f4e8ee;
  --color-accent-300:#b07291; --color-accent-600:#752847; --color-accent-700:#67223f;
  --color-plum:#684479; --color-plum-soft:#eee8f2; --color-play-hover:#5d3c70;
  --color-playback-loading:#efa7c5; --color-playback-loading-detail:#cbb2e5;
  --color-hot:#a63446; --color-hot-surface:#a63446; --color-hot-surface-hover:#862738; --color-on-hot:#fff;
  --color-neutral-200:#ece8dc; --color-neutral-300:#d2cdbe; --color-neutral-900:#191c16; --color-nav-muted:#5c6655;
  --font-body:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --font-heading:var(--font-body); --radius-sm:8px; --radius-md:12px; --radius-lg:18px;
  --shadow-sm:0 1px 3px rgba(35,40,32,.1); --shadow-md:0 8px 28px rgba(35,40,32,.16);
  --nav-h:64px; --page-pad:28px; --mobile-nav-h:64px; --ease:cubic-bezier(.16,1,.3,1);
}
html[data-theme="dark"],[data-theme="dark"] {
  color-scheme:dark; --color-bg:#151712; --color-surface:#20231c; --color-text:#eef0e8; --color-muted:#b5beaa;
  --color-divider:#3b4435; --color-accent:#efa7c5; --color-accent-100:#34212d; --color-accent-300:#916b82;
  --color-accent-600:#f4bdd3; --color-accent-700:#f4bdd3; --color-hot:#ffb0bb;
  --color-plum:#cbb2e5; --color-plum-soft:#292137;
  --color-hot-surface:#8d293b; --color-hot-surface-hover:#a12f45; --color-neutral-200:#272a22;
  --color-neutral-300:#3b4034; --color-nav-muted:#b5beaa;
}
*,*::before,*::after { box-sizing:border-box; }
[hidden] { display:none !important; }
html:not([data-payments-enabled="true"]) [data-payment-badge] { display:none; }
html { scroll-padding-top:80px; scrollbar-color:var(--color-neutral-300) var(--color-bg); }
html,body { margin:0; }
body { background:var(--color-bg); color:var(--color-text); font-family:var(--font-body); font-size:15px; line-height:1.5; text-wrap:pretty; }
body.has-dialog { overflow:hidden; }
h1,h2,h3,h4 { font-family:var(--font-heading); font-weight:700; line-height:1.3; letter-spacing:-.018em; margin:0; text-wrap:balance; }
p { margin:0 0 12px; }
a { color:inherit; text-decoration:none; text-underline-offset:3px; }
a:not(.btn):hover { color:var(--color-accent-700); }
img,svg { display:block; } img { max-width:100%; }
button,input,select,textarea { font:inherit; color:inherit; } button { cursor:pointer; }
input,textarea { caret-color:var(--color-accent); } input::placeholder { color:var(--color-muted); opacity:1; }
button:disabled { cursor:not-allowed; opacity:.6; }
:focus:not(:focus-visible) { outline:none; }
:focus-visible { outline:2px solid var(--color-accent); outline-offset:3px; }
::selection { background:var(--color-accent-100); color:var(--color-text); }
.tnum { font-variant-numeric:tabular-nums; }
.meta,.muted { color:var(--color-muted); font-size:13px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.grayscale { filter:grayscale(1); } .media-load-error { opacity:.35; } .spacer { flex:1; }
.kicker { font:inherit; color:inherit; letter-spacing:0; text-transform:none; } .fade-up { animation:none; }
/* All primary operations retain native semantics and generous targets. */
.btn,.btn-icon,.btn-ghost,.settings-row,.my-destination { transition:background-color 150ms var(--ease),color 150ms var(--ease),border-color 150ms var(--ease); }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:10px 16px; border:1px solid transparent; border-radius:var(--radius-sm); background:transparent; color:var(--color-text); font-size:14px; font-weight:600; line-height:1.25; text-align:center; text-decoration:none; }
.btn svg { flex:none; } .btn-primary { background:var(--color-accent); color:#fff; }
.btn-primary:not(:disabled):hover { background:var(--color-accent-600); }
html[data-theme="dark"] .btn-primary { color:#232820; }
.btn-secondary { background:var(--color-surface); border-color:var(--color-divider); }
.btn-secondary:not(:disabled):hover { border-color:var(--color-accent-300); background:var(--color-accent-100); }
.btn-hot { background:var(--color-hot-surface); color:var(--color-on-hot); } .btn-hot:hover { background:var(--color-hot-surface-hover); }
.btn-ghost { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:10px; border:0; border-radius:var(--radius-sm); background:transparent; color:var(--color-accent-700); font-size:14px; font-weight:600; }
.btn-ghost:hover { background:var(--color-accent-100); }
.btn-block { width:100%; margin-top:8px; }
.btn-icon { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; min-height:44px; flex:none; padding:0; border:1px solid var(--color-divider); border-radius:var(--radius-sm); background:transparent; }
.btn-icon:hover { background:var(--color-accent-100); }
.input { width:100%; min-height:44px; padding:10px 12px; border:1px solid var(--color-divider); border-radius:var(--radius-sm); background:var(--color-surface); color:var(--color-text); font-size:16px; }
.input:hover { border-color:var(--color-neutral-300); } .input:focus-visible { border-color:var(--color-accent); outline-offset:2px; }
.field>label { display:block; margin-bottom:6px; font-size:14px; font-weight:600; }
.seg { display:inline-flex; min-width:0; max-width:100%; border:1px solid var(--color-divider); border-radius:var(--radius-sm); background:var(--color-surface); }
.seg-opt { position:relative; display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:10px 14px; border-radius:7px; font-size:13px; font-weight:500; line-height:1.3; white-space:nowrap; cursor:pointer; }
.seg-opt+.seg-opt { border-left:1px solid var(--color-divider); }
.seg-opt input,.radio input { position:absolute; opacity:0; width:1px; height:1px; }
.seg-opt:has(input:checked) { background:var(--color-accent-100); color:var(--color-accent-700); font-weight:700; }
.seg-opt:hover { background:var(--color-accent-100); }
.seg-opt:has(input:focus-visible),.radio:has(input:focus-visible) { outline:2px solid var(--color-accent); outline-offset:2px; }
.radio { position:relative; display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:10px 8px; font-size:14px; cursor:pointer; }
.radio .dot { width:16px; height:16px; flex:none; border:1px solid var(--color-muted); border-radius:50%; }
.radio input:checked+.dot { border-color:var(--color-accent); background:var(--color-accent); box-shadow:inset 0 0 0 4px var(--color-surface); }
.tag { display:inline-flex; align-items:center; max-width:100%; padding:3px 8px; border-radius:5px; font-size:11px; line-height:1.4; }
.tag-neutral { background:var(--color-neutral-200); color:var(--color-muted); }
.tag-accent { background:var(--color-plum-soft); color:var(--color-plum); }
.tag-outline { min-height:44px; border:1px solid var(--color-divider); background:var(--color-surface); color:var(--color-accent-700); padding:10px 12px; font-size:13px; overflow-wrap:anywhere; }
.tag-outline:hover { border-color:var(--color-accent-300); background:var(--color-accent-100); }
/* One search/navigation line; account operations live in My. */
.nav {
  /* Original black chrome is scoped to navigation; the catalogue stays warm. */
  color-scheme:dark; --color-surface:#0b0d09; --color-bg:#20231c;
  --color-text:#f2f3ee; --color-muted:#b5beaa; --color-nav-muted:#b5beaa;
  --color-divider:#41493b; --color-accent:#efa7c5; --color-accent-100:#34212d;
  --color-accent-300:#98647d; --color-accent-600:#f4bdd3; --color-accent-700:#f4bdd3; --color-hot:#ffb0bb;
  position:sticky; top:0; z-index:50; color:var(--color-text);
  background:var(--color-surface); border-bottom:1px solid var(--color-divider);
}
.nav-r1 { display:flex; align-items:center; gap:28px; min-height:64px; padding:10px var(--page-pad); max-width:1440px; margin:0 auto; }
.nav-brand { display:inline-flex; align-items:center; gap:8px; flex:none; min-height:44px; color:var(--color-text); }
.nav-brand svg { color:var(--color-accent); flex:none; }
.nav-brand b { font-size:19px; font-weight:750; letter-spacing:-.025em; } .nav-brand small { font-size:10px; font-weight:600; color:var(--color-muted); }
.nav-search { display:flex; align-items:center; flex-wrap:wrap; gap:8px; flex:1; min-width:100px; max-width:520px; min-height:44px; padding:0 12px; border:1px solid var(--color-divider); border-radius:var(--radius-sm); background:var(--color-bg); }
.nav-search:focus-within { border-color:var(--color-accent); outline:2px solid var(--color-accent-100); }
.nav .nav-search { border-color:#718167; }
.nav .nav-search:focus-within { border-color:var(--color-accent); outline-color:var(--color-accent); }
.nav-search>svg { flex:none; color:var(--color-muted); }
.nav-search input { flex:1; min-width:0; min-height:44px; padding:6px 0; border:0; background:transparent; color:var(--color-text); font-size:16px; }
#clearSearchBtn { border:0; margin-right:-8px; }
#searchbox:placeholder-shown ~ #clearSearchBtn { display:none; }
.nav-search input:focus-visible { outline:none; }
.input-error { display:block; color:var(--color-hot); font-size:13px; overflow-wrap:anywhere; }
.nav-search .input-error { flex:1 0 100%; padding-bottom:8px; }
.nav-r2 { display:flex; gap:4px; flex:none; align-items:center; margin-left:auto; }
.navitem { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:10px 14px; border:0; border-radius:var(--radius-sm); background:transparent; color:var(--color-muted); font-size:14px; font-weight:600; }
.navitem:hover { background:var(--color-bg); color:var(--color-text); } .navitem.on { background:var(--color-accent-100); color:var(--color-accent-700); }
.nav-r2 .navitem { background:transparent; }
.nav-r2 .navitem:hover { background:var(--color-bg); color:var(--color-text); }
.nav-r2 .navitem.on { background:transparent; color:var(--color-text); box-shadow:inset 0 -3px 0 var(--color-accent); }
.mobile-destinations,.discovery-tabs { display:none; }
.design-preview-notice { max-width:1440px; margin:0 auto; padding:4px var(--page-pad); font-size:11px; line-height:1.4; color:var(--color-muted); }
/* One disclosure per content surface, not two competing filter systems. */
.frame { max-width:1440px; margin:0 auto; padding-inline:var(--page-pad); } .maincol { min-width:0; }
.browse-filters { margin-top:8px; border-bottom:1px solid var(--color-divider); }
.browse-filters>summary,.search-filters>summary { display:flex; align-items:center; gap:12px; min-height:44px; padding:10px 0; font-size:13px; font-weight:600; cursor:pointer; list-style:none; }
summary::-webkit-details-marker { display:none; }
.browse-filters>summary .meta,.search-filters>summary .meta { flex:1; min-width:0; font-size:12px; font-weight:400; overflow-wrap:anywhere; }
.browse-filters>summary svg,.search-filters>summary svg { flex:none; }
.browse-filters[open]>summary svg,.search-filters[open]>summary svg { transform:rotate(180deg); }
.browse-filters-body { display:grid; grid-template-columns:1fr 1fr; gap:12px 24px; padding:6px 0 16px; } .browse-filters-body>p { grid-column:1/-1; margin:0; }
.browse-filters-body:has(#browseSourceGroup[hidden]) { grid-template-columns:minmax(0,1fr); }
.tagcloud h2,.source-filter-group h2 { margin-bottom:6px; font-size:13px; }
.tc-row,.sitechips,.subchips,.ch-tagsrow { display:flex; flex-wrap:wrap; gap:6px; align-items:center; min-width:0; }
.chip,.ch-chip { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:10px 12px; border:1px solid var(--color-divider); border-radius:var(--radius-sm); background:var(--color-surface); color:var(--color-muted); font-size:13px; line-height:1.25; white-space:nowrap; }
.chip:hover,.ch-chip:hover { border-color:var(--color-accent-300); color:var(--color-accent-700); }
.chip.on,.ch-chip.on { background:var(--color-accent-100); border-color:var(--color-accent-300); color:var(--color-accent-700); font-weight:700; }
.subchips { margin-bottom:16px; }
body.search-mode #browseFilters,body.channel-mode #browseFilters,body.my-mode #browseFilters { display:none; }
.page-heading,.band-warm { padding:20px 0 16px; } .page-heading h1,.band-warm h1 { margin-bottom:6px; font-size:24px; }
.page-heading .meta,.band-warm .sub { margin:0; color:var(--color-muted); font-size:13px; }
.sec-latest { padding:16px 0 28px; }
.sec-head { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:12px; }
.sec-head h1,.sec-head h2 { font-size:23px; line-height:1.35; } .sec-head .cnt { color:var(--color-muted); font-size:12px; }
.recommendations-jump { margin-left:auto; font-size:13px; padding-inline:12px; }
.home-recommendations { padding:24px 0 32px; border-top:1px solid var(--color-divider); }
.home-recommendations>.meta { max-width:72ch; margin-bottom:20px; }
.home-recommendations>.sec-head { align-items:center; gap:8px 12px; }
.home-recommendations>.sec-head h2 { margin-right:auto; }
.home-recommendations>.sec-head .btn { font-size:13px; }
.recommendation-stage { display:grid; grid-template-columns:minmax(0,2fr) minmax(260px,1fr); gap:28px; align-items:start; }
.recommendation-stage>section { min-width:0; }
.recommendation-head { display:flex; align-items:center; flex-wrap:wrap; gap:8px 12px; margin-bottom:12px; }
.recommendation-head h3,.recommendation-ranking h3 { font-size:18px; }
.recommendation-head .meta { margin-left:auto; }
.recommendation-arrows { display:flex; gap:6px; }
#heroSlide .vcard h3 { font-size:22px; min-height:0; margin-top:12px; }
#heroSlide .vcard .meta { font-size:13px; }
#heroSlide .cover-play { width:64px; height:64px; }
#heroSlide .cover-play svg { width:28px; height:28px; }
.hero-watch-link { margin-top:12px; }
.hero-dots { display:flex; flex-wrap:wrap; gap:2px; margin-top:12px; }
.hero-dots button { display:grid; place-items:center; width:44px; min-height:44px; padding:0; border:1px solid transparent; border-radius:var(--radius-sm); background:transparent; }
.hero-dots button::after { content:""; width:8px; height:8px; border:1px solid var(--color-muted); border-radius:50%; }
.hero-dots button.on { background:var(--color-accent-100); }
.hero-dots button.on::after { border-color:var(--color-accent-700); background:var(--color-accent-700); }
.hero-dots button:hover { border-color:var(--color-accent-300); }
.recommendation-ranking>p { margin:8px 0 12px; font-size:12px; }
.rank-row { display:grid; grid-template-columns:28px minmax(0,1fr) auto; align-items:start; gap:10px; min-height:72px; padding:12px 0; border-bottom:1px solid var(--color-divider); }
.rank-flag { display:none; } .rank-num { color:var(--color-plum); font-size:16px; font-weight:700; font-variant-numeric:tabular-nums; }
.rank-t { min-width:0; } .rank-t b { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere; font-size:14px; line-height:1.5; }
.rank-t>span { display:block; margin-top:4px; font-size:12px; line-height:1.5; color:var(--color-muted); overflow-wrap:anywhere; }
.rank-v { color:var(--color-muted); font-size:12px; font-variant-numeric:tabular-nums; white-space:nowrap; }
/* Future campaigns use document-flow regions, never masquerading video cards.
   Empty/VIP/failed slots remain hidden; no blank advertising placeholder ships. */
.ad-slot { margin-block:24px; padding:16px; border:1px solid var(--color-divider); border-radius:var(--radius-sm); background:var(--color-surface); }
.ad-slot .ad-label { margin:0 0 8px; color:var(--color-muted); font-size:12px; }
.ad-slot a { overflow-wrap:anywhere; } .ad-slot img { max-width:100%; height:auto; }
.grid,.favorites-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px 20px; }
.vcard,.skeleton-card,.favorite-item { min-width:0; }
.vcard .video-link { display:block; min-width:0; border-radius:var(--radius-sm); color:inherit; } .vcard .video-link:focus-visible { outline-offset:4px; }
.thumb { position:relative; overflow:hidden; aspect-ratio:5/3; border-radius:var(--radius-sm); background:var(--color-neutral-200); }
.thumb img { width:100%; height:100%; object-fit:cover; }
/* A familiar play cue belongs to the existing native video link, not a second
   control. Never add it to unavailable saved items or the compact resume strip. */
.video-link>.thumb>.cover-play,.res-thumb-link>.res-thumb>.cover-play { position:absolute; inset:0; margin:auto; z-index:1; display:grid; place-items:center; width:52px; height:52px; color:#fff; border:1px solid rgba(255,255,255,.7); border-radius:50%; pointer-events:none; background:rgba(25,28,22,.78); transition:background-color 150ms var(--ease); }
.cover-play svg { width:24px; height:24px; }
.video-link:hover>.thumb>.cover-play,.video-link:focus-visible>.thumb>.cover-play,.res-thumb-link:hover>.res-thumb>.cover-play { background-color:var(--color-play-hover); }
.vcard h3 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere; margin:8px 0 4px; min-height:2.9em; font-size:14px; line-height:1.45; font-weight:600; }
.vcard .video-link:hover h3 { color:var(--color-accent-700); }
.vcard .meta { min-width:0; max-width:100%; margin:0; overflow-wrap:anywhere; white-space:normal; font-size:12px; line-height:1.5; }
.author-link { color:var(--color-muted); font-weight:500; text-underline-offset:3px; } .author-link:hover { color:var(--color-accent-700); text-decoration:underline; }
.vcard .author-link { display:inline-flex; align-items:center; max-width:100%; min-height:28px; }
.creator-self .author-link { display:none; }
.dur,.qbadge,.badge { position:absolute; z-index:2; pointer-events:none; max-width:calc(100% - 12px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-variant-numeric:tabular-nums; border-radius:4px; }
.dur { right:6px; bottom:6px; padding:2px 6px; background:rgba(17,23,36,.9); color:#fff; font-size:11px; line-height:1.4; }
.qbadge { left:6px; bottom:6px; padding:2px 5px; background:rgba(17,23,36,.9); color:#fff; font-size:10px; }
.badge { top:6px; left:6px; background:var(--color-hot-surface); color:#fff; padding:3px 6px; font-size:10px; font-weight:600; }
.load-more { display:flex; justify-content:center; margin-top:24px; }
.skeleton-line { height:18px; margin-top:8px; border-radius:4px; background:var(--color-neutral-200); } .skeleton-line.short { width:65%; height:24px; margin-bottom:12px; }
.list-state,#status { grid-column:1/-1; padding:24px 0; color:var(--color-muted); } .list-state p { margin-bottom:12px; }
.list-state .empty-acts { display:flex; gap:8px; flex-wrap:wrap; }
/* Compact horizontal resume: thumbnail, title and remove on one low row. */
.continue-row-wrap { display:grid; grid-template-columns:120px minmax(0,1fr); gap:12px; padding:12px 0; border-bottom:1px solid var(--color-divider); }
.continue-actions { display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:0; }
.continue-kicker { font-size:14px; line-height:1.3; } .continue-actions .btn { padding-inline:0; font-size:12px; }
.continue-row { display:flex; gap:12px; min-width:0; overflow-x:auto; scrollbar-width:thin; padding:4px; margin:-4px; }
.cw-item { position:relative; flex:none; width:250px; min-width:0; padding-right:44px; margin:0; }
.cw-card { display:grid; grid-template-columns:92px minmax(0,1fr); column-gap:10px; align-content:center; min-height:64px; color:inherit; border-radius:var(--radius-sm); }
.cw-thumb { grid-column:1; grid-row:1/3; position:relative; align-self:center; width:92px; height:58px; border-radius:6px; overflow:hidden; background:var(--color-neutral-200); }
.cw-thumb img { width:100%; height:100%; object-fit:cover; }
.cw-card p.t { grid-column:2; margin:4px 0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere; font-size:12px; line-height:1.4; font-weight:600; }
.cw-card p.m { grid-column:2; margin:0; font-size:10px; color:var(--color-muted); overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.cw-left { position:absolute; top:4px; right:4px; padding:1px 4px; border-radius:3px; background:rgba(17,23,36,.9); color:#fff; font-size:9px; }
.cw-bar { position:absolute; bottom:0; left:0; width:100%; height:3px; border:0; appearance:none; background:#c5ccdb; color:var(--color-accent); }
.cw-bar::-webkit-progress-bar { background:#c5ccdb; } .cw-bar::-webkit-progress-value { background:var(--color-accent); } .cw-bar::-moz-progress-bar { background:var(--color-accent); }
.cw-remove { position:absolute; top:10px; right:0; width:44px; min-height:44px; padding:4px; border:0; border-radius:6px; background:transparent; color:var(--color-muted); font-size:11px; line-height:1.3; }
.cw-remove:hover { background:var(--color-accent-100); color:var(--color-accent-700); }
.continue-row .cw-partial { display:flex; align-items:center; gap:10px; flex:none; min-height:64px; max-width:270px; padding:8px; border:1px solid var(--color-divider); border-radius:6px; }
.cw-partial p { font-size:12px; margin:0; } .continue-empty { margin:0; font-size:12px; }
/* Results take priority; explanations are native disclosure controls. */
.sr-warm { min-width:0; padding:20px 0 12px; }
.sr-warm h1 { min-width:0; max-width:100%; overflow-wrap:anywhere; font-size:23px; line-height:1.35; margin:0 0 6px; }
.sr-warm .sub { color:var(--color-muted); font-size:13px; margin:0; }
.search-summary { display:flex; align-items:baseline; justify-content:space-between; gap:4px 12px; flex-wrap:wrap; }
.search-summary .paginfo { margin-left:0; }
.search-filters { border-block:1px solid var(--color-divider); }
.facet-bar { display:grid; grid-template-columns:1fr 1fr; gap:16px 24px; padding:12px 0 16px; max-height:65dvh; overflow:auto; }
.filter-results-actions { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px 16px; padding:12px 0; border-top:1px solid var(--color-divider); }
.filter-results-actions .meta { margin:0; flex:1; min-width:130px; }
.fgroup { min-inline-size:0; padding:0; margin:0; border:0; } .fgroup:first-child { grid-column:1/-1; }
.facet-label { display:block; margin:0 0 4px; padding:0; color:var(--color-muted); font-size:12px; font-weight:600; }
.fgroup>div { display:flex; flex-wrap:wrap; gap:0 4px; } .clear-filters { align-self:start; justify-self:start; }
.facet-explanation { grid-column:1/-1; font-size:12px; color:var(--color-muted); }
.facet-explanation summary,.ranking-explanation summary { display:inline-flex; align-items:center; min-height:44px; cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
.facet-explanation p,.ranking-explanation p { max-width:72ch; }
.sortbar { display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:10px 0; } .paginfo { margin-left:auto; color:var(--color-muted); font-size:12px; }
#searchView .sortbar { padding-block:8px; }
.ranking-explanation { grid-column:1/-1; margin:0; color:var(--color-muted); font-size:12px; }
#srAuthors:empty { display:none; } #srAuthors:not(:empty) { display:flex; flex-wrap:wrap; align-items:center; gap:6px; padding-block:6px; }
#srAuthors>p { margin:0; font-size:12px; color:var(--color-muted); } #srAuthors .btn { margin:0; } #srAuthors .search-authors-pending { margin-bottom:8px; } #srList { min-height:180px; }
.res-row { display:grid; grid-template-columns:232px minmax(0,1fr); gap:4px 18px; width:100%; padding:16px 0; border-bottom:1px solid var(--color-divider); text-align:left; }
.res-thumb-link { grid-column:1; grid-row:1/3; align-self:start; border-radius:var(--radius-sm); } .res-video-link { grid-column:2; grid-row:1; min-width:0; border-radius:4px; }
.res-thumb { display:block; position:relative; aspect-ratio:5/3; border-radius:var(--radius-sm); overflow:hidden; background:var(--color-neutral-200); } .res-thumb img { width:100%; height:100%; object-fit:cover; }
.res-t h2 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere; min-width:0; font-size:16px; line-height:1.45; font-weight:600; }
.res-meta { grid-column:2; grid-row:2; display:flex; flex-wrap:wrap; align-content:start; align-items:center; gap:4px 16px; min-width:0; }
.res-meta .author-link { display:inline-flex; align-items:center; min-height:32px; max-width:100%; font-size:13px; overflow-wrap:anywhere; } .res-meta .meta { font-size:12px; overflow-wrap:anywhere; }
.res-desc { font-size:13px; color:var(--color-muted); }
.related-searches { padding:20px 0 12px; } .related-searches h2 { font-size:15px; margin-bottom:10px; } .sugg-row { display:flex; flex-wrap:wrap; gap:8px; }
.pager { display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:center; padding:24px 0; } .pager:empty { display:none; }
.pager .btn { min-width:44px; padding-inline:12px; } .pager .btn.on { color:var(--color-accent-700); background:var(--color-accent-100); border-color:var(--color-accent-300); }
/* Creator works come before the large statistics, not after a banner. */
.ch-head { display:none; } .ch-profile { display:flex; align-items:center; gap:14px; padding:18px 0 14px; }
.avatar { display:inline-flex; align-items:center; justify-content:center; flex:none; width:28px; height:28px; border-radius:50%; background:var(--color-neutral-200); color:var(--color-muted); font-size:12px; font-weight:600; overflow:hidden; }
.ch-profile .avatar { width:48px; height:48px; font-size:20px; } .ch-id { min-width:0; flex:1; }
.ch-name { font-size:23px; font-weight:700; line-height:1.3; overflow-wrap:anywhere; } .ch-handle { color:var(--color-muted); font-size:12px; overflow-wrap:anywhere; } .ch-bio { display:none; }
.ch-actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px; } .ch-actions .meta { flex-basis:100%; font-size:12px; }
.ch-tabs { display:flex; gap:20px; border-bottom:1px solid var(--color-divider); }
.ch-tab { position:relative; min-height:44px; padding:10px 4px; border:0; background:transparent; color:var(--color-muted); font-size:14px; }
.ch-tab.on { color:var(--color-accent-700); font-weight:700; } .ch-tab.on::after { content:""; position:absolute; bottom:-1px; height:2px; left:0; right:0; background:var(--color-accent); }
.ch-body { display:grid; grid-template-columns:minmax(0,1fr); gap:24px; padding:8px 0 24px; } .ch-main { min-width:0; }
.ch-toolbar { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; gap:8px; padding:0 0 12px; }
.ch-control { min-width:0; border-bottom:1px solid var(--color-divider); } .ch-control[open] { grid-column:1/-1; }
.ch-control>summary { display:flex; align-items:center; gap:8px; min-height:44px; padding:8px 4px; cursor:pointer; list-style:none; }
.ch-control-prefix { flex:none; color:var(--color-muted); font-size:12px; } .ch-control-value { flex:1; min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:13px; font-weight:600; }
.ch-control>summary svg { flex:none; color:var(--color-muted); } .ch-control[open]>summary svg { transform:rotate(180deg); }
.ch-control .seg { display:flex; width:100%; margin:4px 0 8px; } .ch-control .seg-opt { flex:1; }
.ch-tagsrow { padding:4px 0 8px; } .ch-tagsrow .ch-chip { max-width:100%; white-space:normal; overflow-wrap:anywhere; }
.ch-rail { display:flex; align-items:flex-start; flex-wrap:wrap; gap:16px 32px; padding-top:16px; border-top:1px solid var(--color-divider); }
.ch-stat { display:flex; align-items:baseline; gap:8px; } .ch-stat b { font-size:18px; font-weight:600; } .ch-stat span { color:var(--color-muted); font-size:12px; }
.similar-ch { flex-basis:100%; } .similar-ch h4 { margin-bottom:8px; font-size:14px; } #simList { display:flex; flex-wrap:wrap; gap:8px 16px; }
.catrow { display:inline-flex; align-items:center; gap:8px; min-height:44px; max-width:100%; padding:8px 10px; border:1px solid var(--color-divider); border-radius:var(--radius-sm); background:transparent; text-align:left; font-size:13px; }
.catrow>span:first-child { min-width:0; overflow-wrap:anywhere; } .catrow:hover { background:var(--color-accent-100); } .catrow small { color:var(--color-muted); }
.ch-more { display:block; margin:20px auto 0; } .channel-about-summary { max-width:72ch; padding-top:12px; } .channel-about-meta { padding:4px 0; } .channel-about-follow { padding-top:8px; }
/* Personal library: one clear account state and practical destinations. */
#myView { max-width:800px; margin:0 auto; }
.my-account { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 0; border-bottom:1px solid var(--color-divider); }
.my-account>div { min-width:0; flex:1; } .my-account h2 { font-size:18px; overflow-wrap:anywhere; } .my-account p { max-width:52ch; margin:6px 0 0; } .my-account .btn { flex:none; }
.my-destinations { display:flex; flex-direction:column; padding-block:8px; }
.my-destination { display:flex; align-items:center; gap:16px; width:100%; padding:16px 4px; border:0; border-bottom:1px solid var(--color-divider); background:transparent; text-align:left; }
.my-destination:hover { background:var(--color-accent-100); } .my-destination>svg { width:24px; height:24px; color:var(--color-plum); flex:none; }
a.my-destination:hover { color:var(--color-text); }
.my-destination>span:not(.destination-arrow) { flex:1; } .my-destination b { display:block; font-size:15px; font-weight:600; } .my-destination small { display:block; margin-top:4px; color:var(--color-muted); font-size:12px; }
.my-destination>.destination-arrow { width:16px; height:16px; color:var(--color-muted); } .my-settings { padding-top:24px; } .my-settings h2 { font-size:16px; margin-bottom:10px; }
.settings-row { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:52px; width:100%; border:0; border-bottom:1px solid var(--color-divider); padding:12px 4px; background:transparent; text-align:left; font-size:14px; }
.settings-row:hover { background:var(--color-accent-100); } .settings-row .meta { text-align:right; font-size:12px; }
.favorites-actions { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-bottom:16px; } .favorites-search { flex:1; min-width:160px; } .favorites-sort { min-width:136px; }
.favorites-grid>article { min-width:0; } .favorite-item .favorites-actions { margin:8px 0 0; }
.favorites-batch-actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:12px 0; border-block:1px solid var(--color-divider); margin-bottom:16px; } .favorites-batch-actions p { margin:0; }
.favorite-select { display:inline-flex; align-items:center; gap:8px; min-height:44px; font-size:13px; } .favorite-select input { width:20px; height:20px; accent-color:var(--color-accent); }
.favorite-unavailable { padding:16px; min-height:150px; border:1px dashed var(--color-divider); border-radius:var(--radius-sm); background:var(--color-surface); }
.favorite-unavailable h2,.favorite-unavailable h3 { font-size:14px; line-height:1.5; overflow-wrap:anywhere; } .favorite-unavailable p { font-size:12px; color:var(--color-muted); margin:8px 0; }
.favorite-undo-notice { grid-column:1/-1; display:flex; align-items:center; flex-wrap:wrap; gap:8px 16px; margin:12px 0; padding:12px; border:1px solid var(--color-accent-300); border-radius:var(--radius-sm); background:var(--color-accent-100); }
.favorite-undo-notice p { flex:1; min-width:140px; margin:0; font-size:14px; }
.favorite-undo-action { min-height:44px; }
.history-setting { display:flex; align-items:center; gap:8px; min-height:44px; margin:16px 0; } .history-setting input { width:20px; height:20px; accent-color:var(--color-accent); }
#favoritesGrid>.list-state { padding:28px 0; }
/* Dark playback and light document controls keep the layer boundaries intact. */
#modal,#authmodal,#aboutmodal,#recoverycodemodal,#feedbackmodal { position:fixed; inset:0; z-index:70; display:none; place-items:center; padding:16px; background:rgba(17,23,36,.75); }
#modal.on,#authmodal.on,#aboutmodal.on,#recoverycodemodal.on,#feedbackmodal.on { display:grid; } #authmodal,#aboutmodal,#recoverycodemodal,#feedbackmodal { z-index:80; background:rgba(17,23,36,.55); }
.player-wrap { width:min(1080px,100%); max-height:calc(100vh - 32px); max-height:calc(100dvh - 32px); overflow:auto; background:var(--color-surface); border-radius:var(--radius-lg); box-shadow:var(--shadow-md); }
.player-dialog-bar { position:sticky; top:0; z-index:8; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:6px 12px; background:var(--color-surface); border-bottom:1px solid var(--color-divider); } .player-dialog-bar>span { font-size:13px; font-weight:600; }
.player-stage { position:relative; } #playerScreen { background:#111724; color:#eff3ff; }
video#vid,#embed { display:block; width:100%; aspect-ratio:16/9; border:0; background:#111724; object-fit:contain; }
#playerScreen:not(:fullscreen) video,#playerScreen:not(:fullscreen) iframe { max-height:max(48px,calc(100vh - 176px)); max-height:max(48px,calc(100dvh - 176px)); }
#playerScreen:fullscreen { display:flex; flex-direction:column; width:100%; height:100%; }
#playerScreen:fullscreen .player-stage { flex:1; min-height:0; display:grid; }
#playerScreen:fullscreen video,#playerScreen:fullscreen iframe { width:100%; height:100%; max-height:none; aspect-ratio:auto; object-fit:contain; }
.play-key { position:absolute; inset:0; margin:auto; z-index:3; display:flex; align-items:center; justify-content:center; width:72px; height:72px; border:1px solid rgba(239,243,255,.5); border-radius:50%; background:rgba(17,23,36,.85); color:#fff; opacity:0; pointer-events:none; }
.play-key.show { opacity:1; pointer-events:auto; } .play-key:hover { background:#294abd; }
.ctl-bar { display:flex; align-items:center; flex-wrap:wrap; gap:10px; min-width:0; padding:8px 12px; background:#111724; color:#eff3ff; opacity:1; transition:opacity 150ms var(--ease); }
.ctl-bar.is-idle { opacity:0; pointer-events:none; } .ctl-bar:focus-within { opacity:1; pointer-events:auto; }
.ctl-bar .btn-icon { color:#eff3ff; border-color:#526079; } .ctl-bar .btn-icon:hover { background:#283653; } .ctl-bar .btn-icon:disabled:hover { background:transparent; }
.ctl-settings { display:flex; align-items:center; gap:10px; min-width:0; flex:none; } .ctl-volume,.ctl-rate { display:flex; align-items:center; gap:6px; min-width:0; }
.ctl-volume>span,.ctl-rate>span { font-size:12px; white-space:nowrap; }
#ctlVolume { width:80px; min-width:44px; min-height:44px; accent-color:#a5bdff; }
#ctlRate { min-width:76px; min-height:44px; max-width:88px; padding:4px; border:1px solid #526079; border-radius:6px; background:#111724; color:#eff3ff; font-size:14px; }
.ctl-help { width:100%; margin:0; color:#eff3ff; font-size:12px; overflow-wrap:anywhere; } .ctl-bar .tcode { flex:none; font-size:12px; white-space:nowrap; } .ctl-bar .spacer { display:none; }
.ctl-bar.embed-controls>:not(#ctlFull) { display:none; } .ctl-bar.embed-controls { justify-content:flex-end; }
.ptrack { appearance:none; flex:1; min-width:60px; height:44px; margin:0; padding:0; background:transparent; cursor:pointer; accent-color:#a5bdff; }
.ptrack::-webkit-slider-runnable-track { height:4px; border-radius:4px; background:#526079; }
.ptrack::-webkit-slider-thumb { appearance:none; width:20px; height:20px; margin-top:-8px; border:0; border-radius:50%; background:#a5bdff; }
.ptrack::-moz-range-track { height:4px; border:0; border-radius:4px; background:#526079; } .ptrack::-moz-range-progress { height:4px; border-radius:4px; background:#a5bdff; } .ptrack::-moz-range-thumb { width:20px; height:20px; border:0; border-radius:50%; background:#a5bdff; }
#playerScreen :focus-visible { outline-color:#a5bdff; } .volume-wave.is-muted { opacity:.3; }
.player-notice { position:absolute; inset:0; z-index:4; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:24px; background:rgba(17,23,36,.95); color:#eff3ff; text-align:center; overflow:auto; }
.player-notice p { max-width:60ch; line-height:1.6; } .player-notice[data-state="buffering"],.player-notice.is-playable { inset:auto 0 0; padding:10px; pointer-events:none; }
.player-loading { display:grid; place-items:center; flex:none; width:72px; height:72px; margin-bottom:12px; color:var(--color-playback-loading); pointer-events:none; }
.player-loading svg { display:block; width:100%; height:100%; }
.player-loading-track { opacity:.2; }
.player-loading-detail { stroke:var(--color-playback-loading-detail); }
.player-loading-play { fill:#eff3ff; }
/* A quiet indeterminate loop, not a percentage or a promised completion time. */
.player-loading-orbit { transform-origin:36px 36px; animation:player-loading-turn 1s linear infinite; animation-play-state:paused; }
.player-loading[data-motion="running"] .player-loading-orbit { animation-play-state:running; }
@keyframes player-loading-turn { to { transform:rotate(360deg); } }
.player-notice.is-playable .player-loading,.player-notice[data-state="buffering"] .player-loading { width:20px; height:20px; margin:0; }
#playerNotice[data-loading="true"].is-playable,#playerNotice[data-loading="true"][data-state="buffering"] { flex-direction:row; gap:10px; }
#playerNotice[data-loading="true"].is-playable #playerMessage,#playerNotice[data-loading="true"][data-state="buffering"] #playerMessage { margin:0; }
#playerNotice[data-loading="true"] .player-notice-actions { display:none; }
@media (max-height:480px) { .player-loading { width:48px; height:48px; margin-bottom:8px; } }
@media (prefers-reduced-motion:reduce) { .player-loading-orbit { animation:none !important; transform:none; } }
.player-notice-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; } .player-notice .btn-secondary { color:#eff3ff; border-color:#798aa8; background:transparent; } .player-notice .btn { white-space:normal; overflow-wrap:anywhere; }
.play-body { padding:24px; } .play-title { font-size:22px; line-height:1.4; margin-bottom:8px; overflow-wrap:anywhere; }
.play-meta-row { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; color:var(--color-muted); font-size:13px; } .acts-row { display:flex; flex-wrap:wrap; gap:8px; }
.creator-card { display:flex; gap:12px; align-items:center; margin-top:20px; padding-block:16px; border-block:1px solid var(--color-divider); }
.creator-card .avatar { width:44px; height:44px; font-size:18px; } .creator-main { min-width:0; flex:1; }
.creator-name { display:inline-flex; align-items:center; gap:8px; flex-wrap:wrap; } .creator-name b { font-size:15px; } .creator-name .author-link { display:inline-flex; align-items:center; min-height:44px; }
.creator-stats { color:var(--color-muted); font-size:12px; overflow-wrap:anywhere; } .creator-card .follow-btn { flex:none; }
.comments { margin-top:24px; } .comments h3 { display:flex; align-items:center; gap:8px; font-size:17px; margin-bottom:12px; } .comments h3 .cnt { color:var(--color-muted); font-size:12px; }
.cmt-compose { display:flex; align-items:center; gap:8px; margin-bottom:16px; } .cmt-compose .input { min-width:0; } .cmt-compose .btn { flex:none; }
.comment { display:grid; grid-template-columns:28px minmax(0,1fr); gap:10px; padding:14px 0; border-top:1px solid var(--color-divider); }
.cmt-head { display:flex; flex-wrap:wrap; gap:8px; align-items:baseline; font-size:13px; } .cmt-head time,.cmt-foot { color:var(--color-muted); font-size:12px; }
.cmt-body { margin-top:4px; font-size:14px; line-height:1.6; overflow-wrap:anywhere; } .cmt-foot button { min-height:44px; padding:8px; border:0; border-radius:6px; background:transparent; color:inherit; font-size:12px; }
.upnext { margin-top:24px; } .upnext h2 { font-size:17px; margin-bottom:12px; }
.un-row { display:grid; grid-template-columns:148px minmax(0,1fr); gap:12px; align-items:center; padding:10px 0; border-bottom:1px solid var(--color-divider); width:100%; text-align:left; }
.un-thumb { position:relative; overflow:hidden; aspect-ratio:16/9; border-radius:var(--radius-sm); background:var(--color-neutral-200); } .un-thumb img { width:100%; height:100%; object-fit:cover; }
.un-t { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-size:14px; line-height:1.45; font-weight:600; margin-bottom:4px; } .un-m { color:var(--color-muted); font-size:12px; }
/* Forms inherit the new shell; reset-token document remains independent. */
.auth-box { position:relative; display:grid; grid-template-columns:1fr 1fr; width:min(880px,100%); max-height:calc(100vh - 32px); max-height:calc(100dvh - 32px); overflow:auto; border-radius:var(--radius-lg); background:var(--color-surface); box-shadow:var(--shadow-md); }
.auth-left { padding:40px 32px; border-right:1px solid var(--color-divider); background:var(--color-bg); } .auth-left h1 { font-size:28px; margin-bottom:16px; } .auth-left .intro { color:var(--color-muted); font-size:14px; line-height:1.6; max-width:42ch; }
.perks { margin-top:24px; } .perk { display:flex; gap:10px; padding-block:12px; border-top:1px solid var(--color-divider); }
.perk i { width:6px; height:6px; background:var(--color-accent); border-radius:50%; flex:none; margin-top:8px; } .perk b { font-size:14px; } .perk .d { display:block; color:var(--color-muted); font-size:12px; line-height:1.6; margin-top:4px; }
.auth-right { padding:64px 32px 32px; } .auth-right .inner { max-width:400px; margin:0 auto; }
.auth-mode-tabs { width:100%; } .auth-mode-option { flex:1; }
.auth-right h2 { font-size:24px; margin-top:24px; } .auth-right .sub { color:var(--color-muted); font-size:14px; line-height:1.6; margin-top:8px; }
.auth-fields { display:flex; flex-direction:column; gap:16px; margin-top:24px; }
.password-field { display:flex; gap:8px; min-width:0; } .password-field .input { flex:1; min-width:0; } .password-field button { flex:none; }
#authRecoveryLink { display:inline-flex; align-items:center; min-height:44px; color:var(--color-accent-700); font-size:13px; text-decoration:underline; }
.auth-err { margin:0; color:var(--color-hot); font-size:13px; min-height:22px; overflow-wrap:anywhere; }
.recovery-code-box { position:relative; width:min(520px,100%); max-height:calc(100dvh - 32px); overflow:auto; padding:64px 28px 28px; background:var(--color-surface); border-radius:var(--radius-lg); box-shadow:var(--shadow-md); }
.recovery-code-box h2 { font-size:24px; } .recovery-code-box h3 { font-size:18px; margin:24px 0 8px; }
.recovery-code-box .meta { margin:12px 0 20px; font-size:14px; }
.recovery-code-value { display:block; resize:vertical; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; line-height:1.65; overflow-wrap:anywhere; word-break:break-all; user-select:text; color:var(--color-accent-700); background:var(--color-accent-100); }
.recovery-code-ack { display:flex; align-items:flex-start; gap:10px; min-height:44px; margin:20px 0 8px; font-size:14px; }
.recovery-code-ack input { width:20px; height:20px; flex:none; accent-color:var(--color-accent); margin:0; }
/* Scoped account refinement: catalogue and playback geometry stays unchanged. */
#authmodal .auth-err { min-height:0; }
#authmodal .auth-err:not(:empty) { margin-top:12px; }
#authmodal #authConfigErr { color:var(--color-muted); }
#authmodal #authIdentifierHint { margin:8px 0 0; line-height:1.5; }
.account-document { min-height:100vh; min-height:100dvh; }
.account-document .account-page-head .nav-r1 { display:flex; min-height:64px; padding:10px var(--page-pad); }
.account-document .account-page-head .nav-brand { margin-right:auto; }
.account-page { width:min(520px,calc(100% - 32px)); margin:32px auto; padding:28px; border:1px solid var(--color-divider); border-radius:var(--radius-lg); background:var(--color-surface); }
.account-page h1,.account-page h2 { font-size:24px; }
.account-page .help { margin:12px 0 20px; color:var(--color-muted); font-size:14px; line-height:1.6; overflow-wrap:anywhere; }
.account-page form,.account-page .recovery-fields { display:grid; gap:10px; min-width:0; }
.account-page label { margin-top:6px; font-size:14px; font-weight:600; }
.account-page .recovery-fields .help { margin:0 0 8px; font-size:13px; }
.account-page .status { min-height:0; margin:8px 0; color:var(--color-muted); font-size:14px; overflow-wrap:anywhere; }
.account-page .status[data-kind="error"] { color:var(--color-hot); }
.account-page .return-link { display:inline-flex; align-items:center; min-height:44px; color:var(--color-accent-700); text-decoration:underline; }
.account-page .recovery-code-ack { font-weight:400; }
.account-page #recovery-turnstile { min-width:0; max-width:100%; }
@media(max-width:600px) { .account-page { margin:24px auto; padding:20px; } }
#recoveryCodeCopy { margin-top:12px; } #recoveryCodeStatus { margin-top:16px; }
#turnstileWrap { display:flex; justify-content:center; min-height:65px; margin-top:16px; }
.dialog-close { position:absolute; top:12px; right:12px; z-index:5; background:var(--color-surface); color:var(--color-text); font-size:24px; }
.switch-hint { color:var(--color-muted); font-size:13px; margin-top:16px; text-align:center; } .switch-hint button { min-height:44px; border:0; background:transparent; color:var(--color-accent-700); text-decoration:underline; }
.about-box { max-width:600px; grid-template-columns:1fr; } .about-right { padding:28px; } .about-right h2 { margin-top:0; } .about-right .about-inner { margin:0; max-width:none; } .about-inner .sub { line-height:1.7; }
#aboutmodal .about-box { display:flex; flex-direction:column; overflow:hidden; }
#aboutmodal .about-right { overflow-y:auto; min-height:0; padding:20px 28px 28px; scroll-padding-block:12px; }
.document-dialog-header { display:flex; align-items:center; justify-content:space-between; gap:12px; flex:none; padding:12px 16px 12px 28px; border-bottom:1px solid var(--color-divider); background:var(--color-surface); }
.document-dialog-header h2 { min-width:0; margin:0; font-size:22px; overflow-wrap:anywhere; }
.feedback-box { display:flex; flex-direction:column; width:min(600px,100%); max-height:calc(100vh - 32px); max-height:calc(100dvh - 32px); overflow:hidden; border-radius:var(--radius-lg); background:var(--color-surface); box-shadow:var(--shadow-md); }
.feedback-content { min-height:0; overflow-y:auto; padding:20px 28px 28px; scroll-padding-block:12px; }
#feedbackForm { display:grid; gap:16px; min-width:0; }
#feedbackMessage { resize:vertical; min-height:112px; max-height:240px; }
#feedbackPrivacyHint,#feedbackStatus { margin:0; overflow-wrap:anywhere; }
#feedbackPrivacyHint { font-size:14px; line-height:1.6; max-width:65ch; }
#feedbackMessageHint { margin:8px 0 0; line-height:1.5; }
.feedback-actions { display:flex; gap:8px; flex-wrap:wrap; }
#feedbackTurnstileWrap { max-width:100%; }
#authPasswordHint { margin:8px 0 0; line-height:1.5; }
.help-group { margin:0 0 20px; }
.help-group h3 { margin-bottom:8px; font-size:17px; }
.help-group p:last-child { margin-bottom:0; }
.about-inner #shareUrl { width:100%; margin-top:12px; min-height:44px; padding:10px; border:1px solid var(--color-divider); border-radius:8px; background:var(--color-bg); font-size:13px; }
.about-inner button { min-height:44px; } .about-inner #aboutClose { margin-top:16px; } .feedback-contact-link { margin:12px 0; }
.pay-layer { position:fixed; inset:0; z-index:85; display:none; background:rgba(17,23,36,.55); } .pay-layer.on { display:block; }
#pay { position:fixed; top:0; right:0; width:416px; max-width:100%; height:100vh; height:100dvh; padding:64px 24px 24px; overflow:auto; background:var(--color-surface); box-shadow:var(--shadow-md); }
#pay h2 { font-size:20px; margin-bottom:8px; } #pay .row { display:flex; align-items:center; gap:10px; margin-bottom:12px; } #pay label { color:var(--color-muted); font-size:13px; }
#pay input[type="number"],#pay select { max-width:100%; min-height:44px; padding:8px; border:1px solid var(--color-divider); border-radius:8px; background:var(--color-bg); color:var(--color-text); font-size:16px; }
.addrbox { margin-top:16px; padding:16px; border:1px dashed var(--color-divider); border-radius:8px; background:var(--color-bg); text-align:center; }
.addrbox .a { font-family:ui-monospace,Menlo,monospace; font-size:12px; word-break:break-all; user-select:all; }
#qr { display:flex; justify-content:center; margin:12px auto; } #qr svg { padding:4px; background:#fff; image-rendering:pixelated; }
#payHistory { margin-top:16px; } #payHistory select { margin:8px 0; } #porderSummary { overflow-wrap:anywhere; } #pstate { display:block; margin-top:12px; }
.ok { color:#286346; } .warn { color:#815214; } html[data-theme="dark"] .ok { color:#9bd3b7; } html[data-theme="dark"] .warn { color:#ebc48b; }
/* Messages are practical strips, never fake content or decorative chrome. */
#adtop { display:flex; align-items:center; flex-wrap:wrap; gap:12px; padding:8px var(--page-pad); background:var(--color-surface); border-bottom:1px solid var(--color-divider); font-size:12px; }
#adtop .lbl { color:var(--color-muted); } #adtopLinks { display:flex; flex-wrap:wrap; gap:12px; }
#mirrorbar { display:flex; align-items:center; flex-wrap:wrap; gap:8px 16px; padding:10px var(--page-pad); background:#fff6dd; border-bottom:1px solid #dfcc8e; color:#644a0b; font-size:12px; }
#mirrorbar .lbl { display:flex; gap:6px; align-items:center; } #mirrorbar .lbl i { display:none; }
#mirrorbar.on { background:#fff0ee; color:#8a2824; border-color:#e5b8b3; } #mirrorbar p { margin:0; }
#mirrorbar a { display:inline-flex; align-items:center; gap:6px; min-height:24px; margin-right:12px; text-decoration:underline; color:inherit; overflow-wrap:anywhere; }
#mirrorbar .mirrors { min-width:0; max-width:100%; } #mirrorList { display:flex; flex-wrap:wrap; } .mirror-tip { line-height:1.5; } #announceLink { text-decoration:underline; }
footer { display:flex; align-items:center; flex-wrap:wrap; gap:16px; padding:24px 0; margin-top:8px; border-top:1px solid var(--color-divider); color:var(--color-muted); font-size:12px; }
footer .flinks { display:flex; flex-wrap:wrap; gap:8px 20px; margin-left:auto; }
footer button { min-height:44px; padding:8px 0; border:0; background:transparent; color:inherit; font-size:12px; } footer button:not(:disabled):hover { color:var(--color-accent-700); }
#adbottom { position:fixed; bottom:0; left:0; right:0; z-index:60; display:flex; align-items:center; gap:12px; min-height:50px; padding:4px var(--page-pad); background:#111724; color:#eff3ff; border-top:1px solid #526079; }
#adbottom .adtag { flex:none; padding:2px 6px; border:1px solid #798aa8; border-radius:4px; font-size:10px; }
#adbottom a { flex:1; min-width:0; color:#eff3ff; font-size:13px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
#adclose { display:flex; align-items:center; justify-content:center; width:44px; min-height:44px; border:0; background:transparent; color:inherit; }
#adspacer { height:0; } #adbottom:not([hidden])+#adspacer { height:64px; }
.toast { position:fixed; z-index:120; left:50%; bottom:max(24px,env(safe-area-inset-bottom)); transform:translateX(-50%); max-width:min(560px,calc(100vw - 32px)); padding:14px 18px; border:1px solid #798aa8; border-radius:10px; box-shadow:var(--shadow-md); background:#111724; color:#eff3ff; font-size:14px; }
.toast .btn { margin-left:8px; color:inherit; background:transparent; border-color:#798aa8; }
.refresh-content { position:fixed; z-index:45; right:20px; bottom:max(20px,env(safe-area-inset-bottom)); background:var(--color-surface); box-shadow:var(--shadow-sm); }
html.theme-switching,html.theme-switching *,html.theme-switching *::before,html.theme-switching *::after { transition:none !important; }
@media (max-width:1199px) { .nav-r1 { gap:20px; } .nav-brand small { display:none; } .navitem { padding-inline:12px; } }
@media (max-width:900px) { .auth-box { display:block; } .auth-left { display:none; } .auth-right .inner { max-width:none; } .grid,.favorites-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:900px) { .recommendation-stage { grid-template-columns:minmax(0,1fr); gap:24px; } }
@media (max-width:767px) {
  :root { --page-pad:16px; --nav-h:98px; }
  html { scroll-padding-top:12px; scroll-padding-bottom:calc(80px + env(safe-area-inset-bottom)); }
  body { padding-bottom:calc(var(--mobile-nav-h) + env(safe-area-inset-bottom)); }
  .nav { position:relative; } .nav-r1 { flex-wrap:wrap; gap:2px; padding:4px var(--page-pad) 8px; min-height:98px; }
  .nav-brand { min-height:38px; } .nav-brand b { font-size:17px; } .nav-brand svg { width:21px; height:21px; } .nav-brand small { display:inline; font-size:9px; }
  .nav-search { flex:1 0 100%; max-width:none; } .nav-r2 { display:none; }
  .mobile-destinations { position:fixed; z-index:55; bottom:0; left:0; right:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); min-height:var(--mobile-nav-h); padding:4px var(--page-pad) calc(4px + env(safe-area-inset-bottom)); border-top:1px solid var(--color-divider); background:var(--color-surface); }
  .mobile-destinations .navitem { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; width:100%; min-height:56px; padding:4px; margin:0; border:0; border-radius:8px; background:transparent; color:var(--color-muted); font-size:11px; font-weight:600; }
  .mobile-destinations .navitem.on { background:var(--color-accent-100); color:var(--color-accent-700); } .mobile-destinations svg { width:21px; height:21px; }
  body.has-dialog .mobile-destinations { display:none; }
  /* Browse destinations and its filter disclosure share one 44px row. */
  .maincol { display:grid; grid-template-columns:minmax(0,1fr); }
  .maincol>section,.maincol>footer { grid-column:1; }
  .discovery-tabs { display:flex; align-items:center; gap:2px; grid-column:1; grid-row:1; width:calc(100% - 92px); align-self:start; border-bottom:1px solid var(--color-divider); }
  .discovery-tabs .navitem { flex:1; min-width:0; padding-inline:6px; font-size:12px; border-radius:0; background:transparent; }
  .discovery-tabs .navitem.on { box-shadow:inset 0 -2px 0 var(--color-accent); }
  .browse-filters { grid-column:1; grid-row:1; width:92px; margin-top:0; justify-self:end; }
  .browse-filters>summary { min-height:44px; padding-inline:8px; gap:6px; font-size:12px; justify-content:flex-end; }
  .browse-filters>summary .meta { display:none; }
  .browse-filters[open] { width:100%; }
  .browse-filters[open]>summary { width:92px; margin-left:auto; }
  .browse-filters-body { grid-template-columns:1fr; padding-top:12px; } .browse-filters-body>p { grid-column:1; }
  .continue-row-wrap { grid-template-columns:90px minmax(0,1fr); gap:8px; padding-block:10px; } .continue-kicker { font-size:13px; }
  .cw-item { width:234px; } .cw-card { grid-template-columns:80px minmax(0,1fr); column-gap:8px; } .cw-thumb { width:80px; height:54px; } .continue-actions .btn { padding:8px 0; }
  .sec-latest { padding-top:12px; } .sec-head { gap:8px; margin-bottom:10px; } .sec-head h1,.sec-head h2 { font-size:20px; }
  #heroSlide .vcard h3 { font-size:18px; } .home-recommendations { padding-top:24px; }
  .grid,.favorites-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 16px; } .vcard h3 { font-size:14px; min-height:0; } .vcard .meta { font-size:12px; } .vcard .author-link { min-height:44px; }
  .favorites-grid>.favorite-item:has(.favorite-unavailable) { grid-column:1/-1; }
  .page-heading,.band-warm { padding-block:16px 12px; } .page-heading h1,.band-warm h1 { font-size:22px; }
  .sr-warm { padding-block:8px 6px; } .sr-warm h1 { font-size:20px; }
  #searchView .sortbar { padding-block:4px; }
  .sortbar { gap:8px; } .sortbar .seg { width:100%; } .sortbar .seg-opt { flex:1; padding-inline:7px; font-size:12px; } .paginfo { margin-left:0; }
  .ranking-explanation { margin-bottom:0; } .ranking-explanation summary { min-height:44px; }
  .facet-bar { grid-template-columns:1fr; gap:12px; max-height:min(50dvh,max(120px,calc(100dvh - 400px))); } .fgroup:first-child,.facet-explanation { grid-column:1; }
  .res-row { grid-template-columns:172px minmax(0,1fr); gap:4px 12px; padding-block:12px; } .res-t h2 { font-size:14px; }
  .res-meta { gap:0; display:flex; flex-direction:column; align-items:flex-start; } .res-meta .author-link { min-height:44px; font-size:12px; } .res-meta .meta { font-size:12px; }
  .ch-profile { display:grid; grid-template-columns:40px minmax(0,1fr) auto; align-items:center; gap:0 10px; padding-block:12px 8px; } .ch-profile .avatar { width:40px; height:40px; font-size:16px; }
  .ch-name { font-size:20px; } .ch-id { grid-column:2; } .ch-actions { display:contents; }
  .ch-actions .follow-btn { grid-column:3; grid-row:1; padding-inline:12px; }
  .ch-actions .tag { grid-column:2/-1; justify-self:start; margin-top:4px; } .ch-actions .meta { grid-column:2/-1; margin-top:4px; } .ch-actions .meta:empty { display:none; }
  .ch-actions #chStatsRetry { grid-column:2/-1; justify-self:start; margin-top:8px; }
  .ch-rail { gap:12px 20px; } .ch-stat { flex-wrap:wrap; gap:4px; }
  .my-account { align-items:flex-start; flex-wrap:wrap; padding-block:16px; } .my-account>div { flex:1 0 100%; } .my-account .btn { margin-top:4px; }
  .settings-row { flex-wrap:wrap; } .settings-row .meta { text-align:left; }
  .favorites-actions { gap:8px; } .favorites-search { flex:1 0 100%; } .favorites-sort { flex:1; min-width:0; }
  .favorites-grid .favorites-actions .btn { width:100%; font-size:12px; padding-inline:8px; }
  #modal,#authmodal,#aboutmodal,#feedbackmodal { padding:8px; } .player-wrap,.auth-box,.feedback-box { max-height:calc(100vh - 16px); max-height:calc(100dvh - 16px); }
  .play-body { padding:16px; } .play-title { font-size:19px; }
  .creator-card { flex-wrap:wrap; align-items:flex-start; } .creator-card .creator-main { min-width:calc(100% - 56px); } .creator-card .follow-btn { margin-left:56px; }
  .ctl-bar { display:grid; grid-template-columns:44px minmax(0,1fr) 44px 44px; gap:8px; padding:8px; }
  #ctlPlay { grid-column:1; grid-row:1; } #ctlTime { grid-column:2; grid-row:1; } #ctlVol { grid-column:3; grid-row:1; } #ctlFull { grid-column:4; grid-row:1; }
  #ptrack { grid-column:1/-1; grid-row:2; width:100%; min-width:0; } .ctl-settings { grid-column:1/4; grid-row:3; gap:8px; }
  .ctl-volume { flex:1; min-width:0; } #ctlVolume { width:100%; max-width:100px; } #ctlRate { min-width:76px; max-width:84px; font-size:16px; }
  #qBadge { grid-column:4; grid-row:3; justify-self:center; } .ctl-help { grid-column:1/-1; } .ctl-bar.embed-controls { display:flex; }
  #playerScreen:not(:fullscreen) video,#playerScreen:not(:fullscreen) iframe { max-height:max(48px,calc(100vh - 268px)); max-height:max(48px,calc(100dvh - 268px)); }
  .player-notice { padding:12px; } .player-notice p { font-size:14px; margin-bottom:8px; } .un-row { grid-template-columns:112px minmax(0,1fr); }
  .auth-right { padding:64px 20px 24px; } .about-right { padding:24px; }
  footer { gap:8px; padding-block:20px; } footer .flinks { margin-left:0; gap:4px 16px; }
  #adbottom { bottom:calc(var(--mobile-nav-h) + env(safe-area-inset-bottom)); } body.has-dialog #adbottom { display:none; }
  .toast { bottom:calc(80px + env(safe-area-inset-bottom)); } body.has-dialog .toast,#playerScreen:fullscreen .toast { bottom:max(16px,env(safe-area-inset-bottom)); }
  .refresh-content { bottom:calc(80px + env(safe-area-inset-bottom)); right:16px; }
}
@media (max-width:600px) {
  .grid,.favorites-grid { grid-template-columns:minmax(0,1fr); gap:24px; }
  .vcard h3 { font-size:16px; } .vcard .meta { font-size:13px; }
  .res-row { grid-template-columns:minmax(0,1fr); gap:8px; padding-block:16px; }
  .res-thumb-link { grid-column:1; grid-row:1; }
  .res-video-link { grid-column:1; grid-row:2; }
  .res-meta { grid-column:1; grid-row:3; }
  .res-t h2 { font-size:16px; } .res-meta .meta { font-size:13px; }
}
@media (max-width:360px) {
  :root { --page-pad:12px; }
  .sortbar .seg { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .sortbar .seg-opt { white-space:nowrap; border-left:0; } .sortbar .seg-opt:nth-child(even) { border-left:1px solid var(--color-divider); } .sortbar .seg-opt:nth-child(n+3) { border-top:1px solid var(--color-divider); }
  .sortbar .seg-opt:has(input:focus-visible) { outline-offset:-3px; } .continue-row-wrap { grid-template-columns:78px minmax(0,1fr); } .cw-item { width:226px; } .un-row { grid-template-columns:100px minmax(0,1fr); }
  .ch-control .seg { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (min-width:768px) and (max-height:480px) { #playerScreen:not(:fullscreen) video,#playerScreen:not(:fullscreen) iframe { max-height:max(48px,calc(100vh - 224px)); max-height:max(48px,calc(100dvh - 224px)); } }
@media (min-width:601px) and (max-width:767px) and (max-height:480px) {
  /* Landscape spends two control rows, not three, so viewing space remains useful. */
  .ctl-bar { grid-template-columns:44px 86px minmax(100px,1fr) 44px 44px; }
  #ctlPlay { grid-column:1; grid-row:1; } #ctlTime { grid-column:2; grid-row:1; }
  #ptrack { grid-column:3; grid-row:1; } #ctlVol { grid-column:4; grid-row:1; } #ctlFull { grid-column:5; grid-row:1; }
  .ctl-settings { grid-column:1/-1; grid-row:2; flex-wrap:wrap; justify-content:flex-start; }
  .ctl-volume { flex:none; } #ctlVolume { width:100px; } #qBadge { grid-column:5; grid-row:2; }
  #playerScreen:not(:fullscreen) video,#playerScreen:not(:fullscreen) iframe { max-height:max(48px,calc(100vh - 184px)); max-height:max(48px,calc(100dvh - 184px)); }
}
.browse-filters.has-active-filters>summary { color:var(--color-accent-700); }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; } }