/* Layout: a slim bar to switch screens, palette and theme; below it either the public site mockup or the admin panel mockup. */
:root {
  /* one monochrome scheme: neutral blacks in dark mode, neutral whites in light mode; the accent is the text color itself */
  --bg: #0b0b0c; --surface: #141415; --surface-2: #1d1d1f; --line: #272729;
  --fg: #f3f3f1; --muted: #8e8e93; --good: #46c98b; --bad: #ff7b7b; --warn: #e5b13a;
  --accent: #f3f3f1; --accent-fg: #0b0b0c; --accent-soft: #232325;
  --display: "Sora", "Segoe UI", sans-serif; --body: "Inter Tight", system-ui, sans-serif;
  color-scheme: dark;
}
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) {
  --bg: #f5f5f4; --surface: #ffffff; --surface-2: #ebebea; --line: #dcdcda;
  --fg: #141415; --muted: #66666b; --good: #1b8a58; --bad: #c43838; --warn: #9a6b00;
  --accent: #141415; --accent-fg: #ffffff; --accent-soft: #e6e6e4; color-scheme: light; } }
:root[data-theme="light"] {
  --bg: #f5f5f4; --surface: #ffffff; --surface-2: #ebebea; --line: #dcdcda;
  --fg: #141415; --muted: #66666b; --good: #1b8a58; --bad: #c43838; --warn: #9a6b00;
  --accent: #141415; --accent-fg: #ffffff; --accent-soft: #e6e6e4; color-scheme: light; }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { background: var(--bg); color: var(--fg); font-family: var(--body); font-size: 15px; line-height: 1.5; margin: 0; padding-inline: 16px; padding-block: 0 24px; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-family: var(--display); margin: 0; letter-spacing: -.01em; text-wrap: balance; }
button, input, select, textarea { font-family: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wrap { max-width: 1280px; margin-inline: auto; }
[data-go] { cursor: pointer; }

/* mockup switcher */
.switch { display: flex; flex-wrap: wrap; gap: 6px 14px; padding-block: 10px; align-items: center; border-bottom: 1px dashed var(--line); margin-bottom: 14px; }
.switch .grp { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.switch b { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-right: 2px; }
.switch button { font-size: 12.5px; background: var(--surface); color: var(--muted); border: 1px solid var(--line); border-radius: 5px; padding: 5px 10px; }
.switch button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); font-weight: 600; }

/* shared pieces */
.frame { border: 1px solid var(--line); border-radius: 12px; background: var(--bg); overflow: clip; container-type: inline-size; }
.frame.m { max-width: 400px; margin-inline: auto; }
.btn { border: 1px solid var(--line); background: var(--surface-2); color: var(--fg); border-radius: 8px; padding: 8px 14px; font-size: 14px; font-weight: 600; display: inline-block; text-align: center; }
.btn.pri { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
.btn.danger { color: var(--bad); }
.btn.sm { padding: 4px 10px; font-size: 12.5px; border-radius: 6px; }
.icon { width: 38px; height: 38px; display: grid; place-items: center; padding: 0; }
.pill { font-size: 13px; padding: 5px 12px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--muted); }
.pill.on { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); font-weight: 600; }
.pills, .tagcloud { display: flex; flex-wrap: wrap; gap: 8px; }
.tag { font-size: 13.5px; padding: 6px 12px; border-radius: 6px; background: var(--surface); border: 1px solid var(--line); }
.tag small { color: var(--muted); margin-left: 4px; }
.sub { color: var(--muted); font-size: 14px; }
.field { display: grid; gap: 4px; font-size: 13px; color: var(--muted); }
.field input, .field textarea, .field select { background: var(--bg); color: var(--fg); border: 1px solid var(--line); border-radius: 8px; padding: 9px 12px; font-size: 14px; min-width: 0; }
.field small { font-size: 12px; }
.chk { display: flex; gap: 8px; align-items: start; font-size: 13px; color: var(--muted); }
.ts { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); background: var(--bg); border-radius: 8px; padding: 10px 12px; font-size: 13.5px; color: var(--fg); }
.ts i { width: 22px; height: 22px; border: 2px solid var(--line); border-radius: 4px; display: block; }
.ts small { margin-left: auto; color: var(--muted); font-size: 10.5px; line-height: 1.2; text-align: right; }
.g0 { background: linear-gradient(135deg, #2a2a2d, #4a4a50); } .g1 { background: linear-gradient(135deg, #222224, #3d3d42); }
.g2 { background: linear-gradient(135deg, #2e2b2b, #514b4b); } .g3 { background: linear-gradient(135deg, #262628, #46464b); }
.g4 { background: linear-gradient(135deg, #2b2b27, #504f46); } .g5 { background: linear-gradient(135deg, #232625, #3f4543); }

/* ---------- public site ---------- */
.top { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; padding: 12px 18px; background: var(--surface); border-bottom: 1px solid var(--line); }
.logo { font: 800 26px var(--display); letter-spacing: -.04em; }
.logo i { font-style: normal; color: var(--muted); }
.search { flex: 1 1 240px; min-width: 0; display: flex; max-width: 520px; }
.search input { flex: 1; min-width: 0; background: var(--bg); color: var(--fg); border: 1px solid var(--line); border-right: 0; border-radius: 8px 0 0 8px; padding: 9px 14px; font-size: 14px; }
.search button { background: var(--accent); color: var(--accent-fg); border: 0; border-radius: 0 8px 8px 0; padding: 0 16px; font-weight: 600; }
.acct { display: flex; gap: 8px; align-items: center; margin-left: auto; }
.nav { display: flex; gap: 2px; padding: 0 12px; background: var(--surface); border-bottom: 1px solid var(--line); overflow-x: auto; }
.nav a { padding: 11px 12px; font-size: 14px; font-weight: 500; color: var(--muted); border-bottom: 2px solid transparent; white-space: nowrap; }
.nav a:hover { color: var(--fg); } .nav a[aria-current="page"] { color: var(--fg); border-color: var(--accent); }
.page { padding: 20px 18px 8px; min-height: 520px; }
.head { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: baseline; justify-content: space-between; margin-bottom: 14px; }
.head h1, .head h2 { font-size: 22px; }
.section { margin-bottom: 28px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(208px, 1fr)); gap: 20px 16px; }
.card { min-width: 0; display: block; }
.thumb { position: relative; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; }
.thumb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.45), transparent 45%); }
.thumb .lab { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.thumb .dur, .thumb .hd, .thumb .rank { position: absolute; z-index: 2; font-size: 11.5px; font-weight: 600; color: #fff; background: rgba(0,0,0,.72); padding: 1px 6px; border-radius: 4px; font-variant-numeric: tabular-nums; }
.thumb .dur { right: 6px; bottom: 6px; } .thumb .hd { left: 6px; top: 6px; background: var(--accent); color: var(--accent-fg); }
.thumb .rank { left: 6px; bottom: 6px; font: 800 14px var(--display); padding: 1px 8px; }
.card h3 { font: 600 14.5px/1.35 var(--body); margin-top: 8px; display: block; white-space: nowrap; overflow: hidden; text-overflow: clip; padding-right: 16px; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 30px), transparent calc(100% - 16px)); mask-image: linear-gradient(90deg, #000 calc(100% - 30px), transparent calc(100% - 16px)); }
.meta { display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: 12.5px; color: var(--muted); margin-top: 3px; font-variant-numeric: tabular-nums; }
.meta .up { color: var(--good); }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.tile { position: relative; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; display: flex; align-items: end; padding: 12px; }
.tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.65), transparent 65%); }
.tile div { position: relative; z-index: 1; color: #fff; } .tile strong { font: 700 17px var(--display); display: block; } .tile small { font-size: 12.5px; opacity: .85; }

.vgrid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 22px; }
@container (max-width: 1160px) { .vgrid { grid-template-columns: minmax(0, 1fr); } }
.player { aspect-ratio: 16 / 9; border-radius: 10px; background: linear-gradient(135deg, #2a2a2d, #4a4a50); position: relative; display: grid; place-items: center; overflow: hidden; }
.play { width: 72px; height: 72px; border-radius: 50%; background: rgba(0,0,0,.55); display: grid; place-items: center; }
.play::before { content: ""; border-left: 22px solid #fff; border-block: 13px solid transparent; margin-left: 6px; }
.ctrl { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 14px; display: flex; gap: 12px; align-items: center; font-size: 12px; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.6)); font-variant-numeric: tabular-nums; }
.ctrl .bar { flex: 1; height: 4px; background: rgba(255,255,255,.3); border-radius: 2px; } .ctrl .bar i { display: block; width: 34%; height: 100%; background: var(--accent); border-radius: 2px; }
.vtitle { font-size: 21px; margin-top: 14px; }
.vinfo { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 6px; color: var(--muted); font-size: 14px; font-variant-numeric: tabular-nums; }
.acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; align-items: center; }
.like { display: inline-flex; gap: 7px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 8px 14px; font-size: 14px; font-weight: 600; color: var(--fg); }

.ratebar { margin-left: auto; display: grid; gap: 4px; min-width: 150px; font-size: 12px; color: var(--muted); }
.ratebar div { height: 5px; border-radius: 3px; background: var(--bad); overflow: hidden; } .ratebar i { display: block; height: 100%; width: 94%; background: var(--good); }
.taxo { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); display: grid; gap: 12px; }
.taxo .row { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 10px; align-items: start; }
.taxo h3 { font: 600 12px var(--body); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); padding-top: 8px; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; align-self: start; }
.ptabs { display: flex; border-bottom: 1px solid var(--line); }
.ptabs button { flex: 1; background: none; border: 0; border-bottom: 2px solid transparent; color: var(--muted); font-size: 14px; font-weight: 600; padding: 12px 8px; }
.ptabs button[aria-selected="true"] { color: var(--fg); border-color: var(--accent); }
.plist { padding: 12px; display: grid; gap: 12px; }
.mini { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 10px; }
.mini .thumb { border-radius: 6px; } .mini h4 { margin: 0; font: 600 13.5px/1.3 var(--body); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.comment { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font: 700 13px var(--display); flex: none; }
.comment b { font-size: 13.5px; } .comment small { color: var(--muted); margin-left: 6px; } .comment p { margin: 2px 0 0; font-size: 14px; }
.comment .rep { font-size: 12px; color: var(--muted); }
.cbox { display: grid; gap: 8px; } .cbox textarea { background: var(--bg); color: var(--fg); border: 1px solid var(--line); border-radius: 8px; padding: 10px; font-size: 14px; min-height: 64px; resize: vertical; }
.cnote { font-size: 12px; color: var(--muted); }
.auth { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 18px; max-width: 840px; margin-inline: auto; }
.box { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 22px; display: grid; gap: 12px; align-content: start; }
.box h2 { font-size: 20px; }
.legal { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 22px; }
@container (max-width: 860px) { .legal { grid-template-columns: minmax(0, 1fr); } }
.prose h2 { font-size: 20px; margin-bottom: 10px; } .prose h3 { font: 700 15px var(--body); margin: 16px 0 4px; }
.prose p, .prose li { color: var(--muted); font-size: 14.5px; max-width: 68ch; }
.ph-text { background: var(--accent-soft); color: var(--accent); padding: 0 4px; border-radius: 3px; }
.foot { background: var(--surface); border-top: 1px solid var(--line); padding: 28px 18px 18px; display: grid; gap: 22px; }
.fcols { display: grid; grid-template-columns: 1.5fr repeat(4, minmax(0, 1fr)); gap: 24px; }
@container (max-width: 860px) { .fcols { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fcols > :first-child { grid-column: 1 / -1; } }
.fcols p { color: var(--muted); font-size: 13.5px; max-width: 42ch; margin: 8px 0 0; }
.fcols h4 { margin: 0 0 10px; font: 700 12px var(--body); text-transform: uppercase; letter-spacing: .09em; color: var(--muted); }
.fcols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; font-size: 14px; }
.fcols li a:hover { color: var(--accent); }
.fbottom { display: flex; flex-wrap: wrap; gap: 12px 20px; justify-content: space-between; align-items: center; padding-top: 16px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--muted); }
.rta { display: inline-grid; place-items: center; width: 74px; height: 34px; border: 2px solid var(--fg); border-radius: 3px; font: 800 15px var(--display); letter-spacing: .04em; color: var(--fg); }
.warn { font-size: 12px; color: var(--muted); max-width: 70ch; }

/* ad slots: desktop and mobile versions of each slot; the container width decides which one shows */
.ad { display: grid; place-items: center; align-content: center; gap: 2px; margin-inline: auto; max-width: 100%; border: 1px dashed var(--line); border-radius: 6px; background: var(--surface); color: var(--muted); font-size: 12px; text-align: center; }
.ad b { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; }
.ad.mb { display: none; }
.adwrap { margin-bottom: 20px; display: grid; }
@container (max-width: 640px) { .adslot.dk { display: none; } .adslot.mb { display: grid; } .adwrap.dkonly { display: none; } }
.adcard { aspect-ratio: 16 / 9; width: 100%; }
/* hover preview on cards */
.pv { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; z-index: 3; opacity: 0; background: rgba(255,255,255,.25); }
.pv i { display: block; height: 100%; width: 0; background: var(--accent); }
.card:hover .pv { opacity: 1; } .card:hover .pv i { width: 100%; transition: width 6s linear; }
.card:hover .thumb { outline: 2px solid var(--accent); outline-offset: -2px; }
/* search suggestions */
.search { position: relative; }
.sugg { display: none; position: absolute; top: 100%; left: 0; right: 0; margin-top: 6px; z-index: 20; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 8px; box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.search:focus-within .sugg { display: grid; gap: 2px; }
.sugg small { padding: 4px 8px; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.sugg a { padding: 7px 8px; border-radius: 6px; font-size: 14px; } .sugg a:hover { background: var(--surface-2); }
/* report box, filters, bottom nav */
.repbox { margin-top: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 14px; display: grid; gap: 10px; }
.repbox label { display: flex; gap: 8px; font-size: 14px; align-items: center; }
.filt { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.filt select { background: var(--surface); color: var(--fg); border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; font-size: 13.5px; }
.stick { position: sticky; bottom: 0; z-index: 30; display: grid; pointer-events: none; } .stick > * { pointer-events: auto; }
.stick .ad.mb { border-radius: 0; border-inline: 0; height: 50px; width: 100%; }
.bnav { display: none; background: var(--surface); border-top: 1px solid var(--line); grid-template-columns: repeat(5, 1fr); }
.bnav a { display: grid; justify-items: center; padding: 9px 2px 8px; font-size: 11.5px; color: var(--muted); gap: 3px; } .bnav a:first-child { color: var(--fg); }
@container (max-width: 640px) { .bnav { display: grid; } }
.gate { min-height: 420px; display: grid; place-items: center; }
.profile { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 20px; }
@container (max-width: 760px) { .profile { grid-template-columns: minmax(0, 1fr); } }
.pside { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 14px; display: grid; gap: 4px; align-content: start; }
.pside a { padding: 8px 10px; border-radius: 8px; color: var(--muted); font-size: 14px; } .pside a.on { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.pside .who { display: grid; justify-items: center; gap: 4px; padding-bottom: 12px; margin-bottom: 6px; border-bottom: 1px solid var(--line); }
.pside .avatar { width: 56px; height: 56px; font-size: 18px; }
.bulk { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 12px; background: var(--accent-soft); border-radius: 8px; font-size: 13.5px; color: var(--fg); }
.prio { border-left: 3px solid var(--bad); }

/* final layout pieces */
svg.i { width: 20px; height: 20px; flex: none; }
.like svg { width: 18px; height: 18px; }
.thumb .badge { position: absolute; left: 8px; top: 8px; z-index: 2; display: flex; gap: 6px; align-items: center; background: rgba(0,0,0,.62); color: #fff; border-radius: 6px; padding: 3px 8px; font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.thumb .badge b { font-weight: 800; }
.thumb .addbtn { position: absolute; right: 8px; top: 8px; z-index: 2; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 6px; background: rgba(0,0,0,.62); color: #fff; }
.thumb .addbtn svg { width: 17px; height: 17px; }
.ci { display: flex; gap: 8px; align-items: flex-start; justify-content: space-between; }
@container (max-width: 640px) { .top { gap: 8px; padding: 10px 14px; } .acct { gap: 6px; } .acct .btn.icon { width: 36px; height: 36px; padding: 0; } }
@container (max-width: 560px) { .grid { grid-template-columns: minmax(0, 1fr); gap: 22px; } .thumb { border-radius: 10px; } .head h1, .head h2 { font-size: 20px; } }
.refresh { background: none; border: 1px solid var(--line); color: var(--fg); width: 36px; height: 36px; border-radius: 8px; display: grid; place-items: center; padding: 0; }
.refresh:hover { background: var(--surface-2); }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: no-preference) { .refresh.spin svg { animation: spin .6s ease; } }
.vsec { margin-top: 22px; display: grid; gap: 8px; }
.vsec h3 { font: 700 15px var(--body); letter-spacing: 0; }
.vsec p { margin: 0; color: var(--muted); font-size: 14.5px; max-width: 70ch; }
.links { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; color: var(--muted); font-size: 14.5px; }
.links a { cursor: pointer; } .links a:hover { color: var(--fg); text-decoration: underline; }
.links .more { background: none; border: 1px solid var(--line); border-radius: 6px; color: var(--fg); font-size: 16px; line-height: 1; width: 28px; height: 24px; cursor: pointer; padding: 0; }
.fcol .fh { background: none; border: 0; padding: 0; color: var(--muted); font: 700 12px var(--body); text-transform: uppercase; letter-spacing: .09em; display: flex; justify-content: space-between; align-items: center; width: 100%; text-align: left; cursor: default; margin-bottom: 10px; }
.fcol .fh svg { display: none; }
.fbrand p { color: var(--muted); font-size: 13.5px; max-width: 42ch; margin: 8px 0 0; }
@container (max-width: 640px) {
  .fcols { grid-template-columns: minmax(0, 1fr); gap: 0; } .fbrand { padding-bottom: 18px; }
  .fcol { border-top: 1px solid var(--line); }
  .fcol .fh { padding: 16px 0; margin: 0; font-size: 16px; letter-spacing: 0; text-transform: none; color: var(--fg); font-family: var(--body); cursor: pointer; }
  .fcol .fh svg { display: block; transition: transform .15s; } .fcol.open .fh svg { transform: rotate(180deg); }
  .fcol ul { display: none; padding-bottom: 14px; } .fcol.open ul { display: grid; }
  .ftags { display: none; }
  .fbottom { flex-direction: column; justify-content: center; text-align: center; }
}

/* round 3 */
.top .sbtn { display: none; }
.vbar { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; justify-content: space-between; }
.vbar .vinfo { margin: 0; }
.acts { margin-top: 0; }
.like { min-height: 40px; }
.seg { display: inline-flex; }
.seg .like:first-child { border-radius: 8px 0 0 8px; border-right-width: 0; } .seg .like:last-child { border-radius: 0 8px 8px 0; }
@container (max-width: 560px) { .vbar { display: grid; } .acts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); } .seg { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; } .like { justify-content: center; padding-inline: 8px; } }
.pop { display: grid; align-content: start; }
.icons { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.icon-card { display: flex; gap: 14px; align-items: center; border: 1px solid var(--line); border-radius: 10px; padding: 14px; background: var(--bg); }
.icon-card b { display: block; font-size: 14px; } .icon-card .hint { display: block; }
.fav { flex: none; width: 40px; height: 40px; border-radius: 8px; background: var(--accent); color: var(--accent-fg); display: grid; place-items: center; font: 800 20px var(--display); }
.fav.big { width: 56px; height: 56px; border-radius: 14px; font-size: 26px; } .fav.wide { width: 84px; height: 44px; font-size: 16px; border-radius: 6px; }
.aright { min-width: 0; display: grid; align-content: start; }
.atop { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; justify-content: space-between; padding: 10px 20px; background: var(--surface); border-bottom: 1px solid var(--line); }
.asearch { display: flex; align-items: center; gap: 8px; flex: 1 1 240px; max-width: 420px; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 0 12px; color: var(--muted); }
.asearch input { flex: 1; min-width: 0; background: none; border: 0; color: var(--fg); padding: 9px 0; font-size: 14px; outline: none; }
.asearch:focus-within { border-color: var(--fg); }
.aacts { display: flex; gap: 8px; align-items: center; margin-left: auto; }
.who2 { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; padding-left: 6px; }
.who2 .avatar { width: 30px; height: 30px; font-size: 11px; }
.aside a svg { width: 18px; height: 18px; } .aside a > span:first-child { display: flex; gap: 10px; align-items: center; }
.aside a { padding: 9px 10px; }
.aside .logo { display: block; }
.ahead h1 { font-size: 24px; }

/* round 4 */
.like { border: 0; background: none; color: var(--muted); padding: 6px 10px; min-height: 36px; border-radius: 8px; font-weight: 500; font-size: 14.5px; cursor: pointer; }
.like:hover { color: var(--fg); background: var(--surface-2); }
.like b { color: var(--fg); font-weight: 600; }
.acts { gap: 2px 4px; margin-left: -10px; }
@container (max-width: 560px) { .acts { display: flex; flex-wrap: wrap; gap: 2px 4px; } .like { justify-content: flex-start; padding-inline: 10px; } }
.nav a.live { margin-left: auto; color: var(--fg); font-weight: 600; display: inline-flex; align-items: center; gap: 7px; cursor: pointer; }
@container (max-width: 640px) { .nav a.live { order: -1; margin-left: 0; } }
.nav a.live .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--bad); display: inline-block; }
.code { background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 12px; font: 12.5px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--muted); overflow-x: auto; white-space: pre-wrap; word-break: break-word; }
.code b { color: var(--fg); font-weight: 600; }

/* round 5: icon header, full-page search, live cam icon */
.livebtn { position: relative; }
.livebtn .ld { position: absolute; top: 7px; right: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--bad); }
@keyframes blink { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(255,90,90,.55); } 50% { opacity: .35; box-shadow: 0 0 0 5px rgba(255,90,90,0); } }
@media (prefers-reduced-motion: no-preference) { .livebtn .ld { animation: blink 1.4s ease-in-out infinite; } }
.sov { display: none; min-height: 70vh; background: var(--bg); }
.frame.so > :not(.sov) { display: none !important; }
.frame.so > .sov { display: block; }
.sbar { display: flex; gap: 10px; align-items: center; padding: 12px 16px; background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 5; }
.sform { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 14px; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; color: var(--muted); }
.sform:focus-within { border-color: var(--fg); }
.sform input { flex: 1; min-width: 0; background: none; border: 0; outline: none; color: var(--fg); font-size: 16px; }
.sclear { background: none; border: 0; color: var(--muted); font-size: 22px; line-height: 1; cursor: pointer; padding: 0 2px; }
.sbody { max-width: 860px; margin-inline: auto; padding: 22px 18px 44px; display: grid; gap: 26px; }
.sbody h3 { font: 700 12px var(--body); text-transform: uppercase; letter-spacing: .09em; color: var(--muted); margin: 0 0 10px; }
.srow { display: flex; align-items: center; gap: 12px; padding: 12px 4px; border-bottom: 1px solid var(--line); font-size: 15px; cursor: pointer; }
.srow:hover { background: var(--surface); } .srow svg { color: var(--muted); } .srow .x { margin-left: auto; color: var(--muted); }
.srow b { font-weight: 700; }

/* round 6: desktop search bar and dropdown, hover tips */
.top .sbtn { display: none; }
.dsearch { position: relative; flex: 1 1 auto; max-width: 720px; min-width: 0; margin-left: 24px; }
.dbar { display: flex; align-items: center; gap: 10px; height: 42px; padding-left: 14px; background: var(--bg); border: 1px solid var(--line); border-radius: 6px; color: var(--muted); overflow: hidden; }
.dsearch:focus-within .dbar { border-color: var(--fg); }
.dbar input { flex: 1; min-width: 0; background: none; border: 0; outline: none; color: var(--fg); font-size: 14.5px; }
.dgo { align-self: stretch; border: 0; padding: 0 20px; background: var(--accent); color: var(--accent-fg); font-weight: 600; font-size: 14px; cursor: pointer; }
.ddrop { display: none; position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 40; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 16px; box-shadow: 0 18px 44px rgba(0,0,0,.4); max-height: 72vh; overflow: auto; outline: none; }
.dsearch:focus-within .ddrop { display: block; }
.dgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; }
.ddrop h4 { margin: 0 0 6px; font: 700 11.5px var(--body); text-transform: uppercase; letter-spacing: .09em; color: var(--muted); }
.ddrop .srow { padding: 9px 8px; border-bottom: 0; border-radius: 6px; font-size: 14.5px; }
.ddrop .srow:hover, .vrow:hover { background: var(--surface-2); }
.vrow { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 12px; align-items: center; padding: 7px 8px; border-radius: 6px; cursor: pointer; }
.vrow .thumb { border-radius: 5px; } .vrow b { display: block; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: clip; }
.vrow small { color: var(--muted); font-size: 12.5px; }
.tip { position: relative; }
.tip::after { content: attr(data-tip); position: absolute; top: calc(100% + 8px); right: 0; z-index: 50; background: var(--fg); color: var(--bg); font-size: 12px; font-weight: 600; padding: 5px 9px; border-radius: 5px; white-space: nowrap; opacity: 0; pointer-events: none; transform: translateY(-3px); transition: opacity .12s, transform .12s; }
.tip:hover::after, .tip:focus-visible::after { opacity: 1; transform: none; }
@container (max-width: 640px) { .dsearch { display: none; } .top .sbtn { display: grid; } .tip::after { display: none; } }

/* round 7: phone header pair, account menu, live strip, auth pages */
.pair { display: flex; align-items: center; }
.pbtn { width: 38px; height: 38px; display: grid; place-items: center; padding: 0; border: 1px solid var(--line); background: var(--surface-2); color: var(--fg); border-radius: 8px; cursor: pointer; }
.pbtn:hover { background: var(--line); }
.pair .sbtn, .pdiv { display: none; }
.pwrap { position: relative; }
.pmenu { display: none; position: absolute; right: 0; top: calc(100% + 10px); z-index: 60; width: min(300px, calc(100vw - 32px)); background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 10px; box-shadow: 0 18px 44px rgba(0,0,0,.45); max-height: 80vh; overflow: auto; }
.pmenu.open { display: block; }
.pm-list { padding: 6px 0; border-top: 1px solid var(--line); }
.pm-list:first-child { border-top: 0; padding-top: 0; }
.pm-list > a, .pm-lab { display: flex; align-items: center; gap: 14px; }
.pm-list > a { padding: 11px 12px; font-size: 15.5px; border-radius: 8px; cursor: pointer; }
.pm-list svg { color: var(--muted); width: 20px; height: 20px; flex: none; }
.pm-list > a:hover svg { color: var(--fg); }
.pm-list > a:hover { background: var(--surface-2); }
.pm-acc { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding-bottom: 10px; }
.pm-sec { padding: 10px 0 6px; border-top: 1px solid var(--line); }
.pm-sec h4 { margin: 0 8px 4px; font: 700 11.5px var(--body); text-transform: uppercase; letter-spacing: .09em; color: var(--muted); }
.pm-sec > a { display: flex; align-items: center; gap: 12px; padding: 9px 8px; border-radius: 8px; font-size: 15px; cursor: pointer; }
.pm-sec > a:hover { background: var(--surface-2); } .pm-sec svg { color: var(--muted); }
.pm-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; font-size: 15.5px; }
.mo { display: none; }
.livestrip { display: flex; align-items: center; gap: 10px; padding: 10px 18px; background: var(--surface); border-bottom: 1px solid var(--line); font-size: 14px; }
.livestrip b { font-weight: 700; } .livestrip small { color: var(--muted); font-size: 12.5px; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; transition: opacity .25s, transform .25s; } .livestrip small.out { opacity: 0; transform: translateY(5px); }
@media (prefers-reduced-motion: reduce) { .livestrip small { transition: none; } } .livestrip .go { margin-left: auto; color: var(--muted); flex: none; }
.livestrip .ld2 { width: 8px; height: 8px; border-radius: 50%; background: var(--bad); flex: none; }
@media (prefers-reduced-motion: no-preference) { .livestrip .ld2 { animation: blink 1.4s ease-in-out infinite; } }
.authone { max-width: 440px; margin: 24px auto; }
@container (max-width: 640px) {
  .mo { display: block; } .acct .dkonly { display: none; }
  .livestrip { display: flex; }
  .pair { gap: 4px; }
  .pair .sbtn { display: grid; } .pdiv { display: block; width: 1px; height: 22px; background: var(--line); }
  .pbtn { border: 0; background: none; width: 42px; height: 40px; border-radius: 10px; }
  .pbtn:hover { background: var(--surface-2); }
  .acct { gap: 0; }
}

/* round 8 */
.vside { align-self: start; position: sticky; top: 12px; }
.vtabs { margin: 30px 0 18px; }
.vtabs button { font-size: 15px; padding: 11px 16px; }
#vt-com { max-width: 860px; display: grid; gap: 4px; }
.clist { display: grid; gap: 18px; margin-top: 14px; }
.comment .rep svg { width: 13px; height: 13px; vertical-align: -2px; }
.btn.more { justify-self: center; margin-top: 16px; background: none; }
@container (max-width: 640px) { .fcol.hide-m { display: none; } }

/* round 9 */
.tabprev { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.tp { display: inline-flex; align-items: center; gap: 8px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px 8px 0 0; padding: 7px 10px; font-size: 12.5px; max-width: 300px; white-space: nowrap; overflow: hidden; }
.tp .x { margin-left: 8px; color: var(--muted); }
.fav.tiny { width: 16px; height: 16px; border-radius: 3px; font-size: 10px; flex: none; }

/* round 10: share, reply, report */
.copyrow { display: flex; gap: 8px; }
.copyrow input { flex: 1; min-width: 0; background: var(--bg); border: 1px solid var(--line); color: var(--fg); border-radius: 8px; padding: 9px 12px; font-size: 14px; }
.lnk { background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; }
.lnk:hover { color: var(--fg); text-decoration: underline; }
.comment .rep { display: inline-flex; gap: 6px; align-items: center; }
.cpanel { margin-top: 10px; display: grid; gap: 8px; max-width: 560px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 12px; }
.cpanel textarea { background: var(--bg); color: var(--fg); border: 1px solid var(--line); border-radius: 8px; padding: 9px; font-size: 14px; min-height: 60px; resize: vertical; }
.cpanel label { display: flex; gap: 8px; align-items: center; font-size: 14px; }
.cnote.ok { color: var(--good); font-size: 13px; }
.comment.reply { grid-template-columns: 28px minmax(0, 1fr); margin-top: 14px; padding-left: 14px; border-left: 2px solid var(--line); }
.comment.reply .avatar { width: 28px; height: 28px; font-size: 11px; }

/* scaled desktop preview for small screens */
.frame.sc { width: 1280px; transform: scale(var(--sc, .3)); transform-origin: 0 0; }

form { margin: 0; }
.fcols { display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; gap: 20px 26px; }
.fbrand { margin-right: auto; }
.fcol.hide-d { display: none; }
.fcol .fh { display: none; }
.fcol ul { flex-direction: row; flex-wrap: wrap; display: flex; gap: 8px 24px; }
.fbrand p { margin: 6px 0 0; }
.fbottom { border-top: 1px solid var(--line); }
.dsearch { flex: 1 1 auto; max-width: 640px; margin: 0 auto; align-self: center; }
.dbar { height: 44px; padding: 0 16px; gap: 12px; background: var(--surface-2); border: 1px solid transparent; border-radius: 10px; }
.dsearch:focus-within .dbar { background: var(--bg); border-color: var(--fg); }
.dbar input { font-size: 15px; }
@container (min-width: 641px) { .top .acct { margin-left: 0; } .top { padding-block: 14px; } }
@container (max-width: 640px) {
  .fcols { display: grid; }
  .fcol.hide-d { display: block; }
  .fcol .fh { display: flex; }
  .fcol ul { display: none; flex-direction: column; }
  .fcol.open ul { display: grid; }
  .fbottom { border-top: 1px solid var(--line); }
}






/* round 17: desktop top row: logo, smaller search on the left, live cam next to it, account at the far right */
.livein { display: none; }
.livein .ld2 { width: 8px; height: 8px; border-radius: 50%; background: var(--bad); flex: none; }
@media (prefers-reduced-motion: no-preference) { .livein .ld2 { animation: blink 1.4s ease-in-out infinite; } }
.livein small { color: var(--muted); font-size: 13px; min-width: 0; max-width: 190px; overflow: hidden; white-space: nowrap; transition: opacity .25s, transform .25s; }
.livein small.out { opacity: 0; transform: translateY(5px); }
.livein .go { color: var(--muted); flex: none; }
@container (min-width: 641px) {
  .top .dsearch { flex: 0 1 440px; margin: 0 0 0 44px; }
  .livein { display: flex; align-items: center; gap: 10px; margin-left: 28px; font-size: 14px; white-space: nowrap; cursor: pointer; padding: 8px 0; }
  .livein b { font-weight: 700; }
  .top .acct { margin-left: auto; }
  .livestrip { display: none; }
}

/* round 18: home list headings keep their controls next to the title */
.head.left { justify-content: flex-start; align-items: center; gap: 10px 22px; }

/* round 19: sun / moon and profile on desktop, plain icons with a thin line between */
.pair { align-items: center; gap: 4px; }
.pair .pbtn, .pair .themebtn { border: 0; background: none; width: 42px; height: 40px; border-radius: 10px; padding: 0; display: grid; place-items: center; color: var(--fg); cursor: pointer; }
.pair .pbtn:hover, .pair .themebtn:hover { background: var(--surface-2); }
.pair .sbtn { display: none; }
.pdiv { display: block; width: 1px; height: 22px; background: var(--line); }
@container (max-width: 640px) { .pair .sbtn { display: grid; } .pair .themebtn { display: grid; } }

/* round 20: tap-to-switch theme row in the phone menu */
.pm-theme { cursor: pointer; border-radius: 8px; }
.pm-theme:hover { background: var(--surface-2); }
#pmhint { color: var(--muted); font-size: 12.5px; }

/* round 21: theme row lines up with the other menu rows */
.pm-list svg { display: block; }
#pmicon { display: flex; align-items: center; }
.pm-theme { padding: 11px 12px; font-size: 15.5px; line-height: 1.5; }
.pm-theme .pm-lab { gap: 14px; line-height: 1.5; }
.pm-theme small { line-height: 1.5; }

/* round 22: compact report and share boxes */
.repbox { max-width: 460px; padding: 14px 16px; gap: 10px; }
.cpanel { max-width: 460px; }
.rgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; }
.rgrid label { font-size: 14px; white-space: nowrap; }
@container (max-width: 560px) { .rgrid { grid-template-columns: 1fr; } .rgrid label { white-space: normal; } }

/* round 23: report opens as a popover under the button, one column */
.acts { position: relative; }
.repbox#repbox { position: absolute; top: calc(100% + 6px); right: 0; margin: 0; width: 280px; max-width: none; z-index: 20; box-shadow: 0 10px 28px rgba(0,0,0,.35); }
.rgrid { grid-template-columns: 1fr !important; gap: 8px; }
.rgrid label { white-space: normal; }
@container (max-width: 560px) { .repbox#repbox { right: auto; left: 0; } }
.cpanel[data-k="report"] { width: 280px; max-width: 100%; }
@container (max-width: 780px) { .lt { display: none; } }
/* round 26: roomy desktop footer */
@container (min-width: 641px) {
  .foot { padding: 52px 40px 24px; gap: 40px; }
  .fcols { display: grid; grid-template-columns: 1.6fr repeat(3, minmax(0, 1fr)); align-items: start; gap: 40px; }
  .fbrand { margin-right: 0; }
  .fbrand .logo { font-size: 26px; }
  .fbrand p { margin: 12px 0 0; font-size: 14px; line-height: 1.6; max-width: 34ch; }
  .fcol.hide-d { display: block; }
  .fcol .fh { display: block; margin: 0 0 16px; cursor: default; }
  .fcol ul { display: grid; gap: 12px; font-size: 14.5px; }
  .fcol li a { color: var(--fg); opacity: .85; cursor: pointer; }
  .fcol li a:hover { opacity: 1; text-decoration: underline; }
  .fbottom { padding-top: 22px; justify-content: flex-start; gap: 10px 18px; }
  .fbottom > span:first-child { margin-right: auto; }
}
/* the frame is the positioning parent of the page */
.frame { position: relative; }
/* round 28: centered desktop footer */
@container (min-width: 641px) {
  .fcols { grid-template-columns: repeat(3, minmax(0, 190px)); justify-content: center; text-align: center; gap: 40px 56px; }
  .fbrand { grid-column: 1 / -1; display: grid; justify-items: center; }
  .fbrand p { max-width: none; margin-top: 10px; }
  .fcol ul { justify-items: center; }
  .fcol .fh { text-align: center; }
  .fbottom { flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 12px; padding-top: 24px; }
  .fbottom > span:first-child { margin-right: 0; }
}
/* round 29: centered footer brand on phones */
@container (max-width: 640px) { .fbrand { display: grid; justify-items: center; text-align: center; margin-right: 0; width: 100%; } .fbrand p { max-width: none; text-align: center; } }
/* round 30: live cam sits in the right group */
@container (min-width: 641px) {
  .top .dsearch { flex: 1 1 360px; max-width: 540px; margin-left: 40px; }
  .livein { margin-left: auto; }
  .top .acct { margin-left: 28px; }
}
@container (min-width: 641px) { .livein small { width: 200px; max-width: none; text-overflow: ellipsis; } }
/* round 31: roomier top menu, stronger current item */
@container (min-width: 641px) {
  .nav { gap: 6px; padding: 0 4px; }
  .nav a { padding: 15px 14px; font-size: 15.5px; border-bottom-width: 3px; }
  .nav a[aria-current="page"] { font-weight: 700; }
}
/* round 32: categories page with expandable tiles and videos below */
.tiles.cat4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tile { cursor: pointer; } .tile.sel { outline: 3px solid var(--fg); outline-offset: 2px; }
.morerow { display: flex; justify-content: center; margin: 4px 0 28px; }
#catres { scroll-margin-top: 12px; margin-bottom: 28px; }
@container (max-width: 640px) { .tiles.cat4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* round 33: categories as a text list */
.ctags { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.ctag { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 52px; padding: 0 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; font-size: 15.5px; font-weight: 600; cursor: pointer; }
.ctag span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ctag small { color: var(--muted); font-size: 12.5px; font-weight: 500; }
.ctag:hover { border-color: var(--fg); }
.ctag.sel { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); } .ctag.sel small { color: inherit; opacity: .75; }
@container (max-width: 640px) { .ctags { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ctag { padding: 0 12px; font-size: 14.5px; } }
/* round 34: profile tabs */
.pside a { cursor: pointer; }
.mycoms { display: grid; gap: 10px; }
.mycom { display: grid; gap: 6px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
.mycom .mt { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; justify-content: space-between; }
.mycom .mt b { font-size: 14.5px; } .mycom p { margin: 0; font-size: 14.5px; }
.mycom .mm { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; color: var(--muted); font-size: 12.5px; }
/* round 35: comment login notice, sorting, mobile footer spacing */
.cguest { margin-top: 14px; font-size: 14.5px; color: var(--muted); }
.cguest a, .cpanel > span a { color: var(--fg); font-weight: 600; text-decoration: underline; cursor: pointer; }
.cbox[hidden], .cguest[hidden] { display: none; }
.cpanel > span:first-child { font-size: 14px; }
.chead { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 16px; }
.sortwrap { position: relative; }
.sortbtn { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 6px 4px; color: var(--muted); font: inherit; font-size: 13.5px; cursor: pointer; }
.sortbtn b { color: var(--fg); font-weight: 600; } .sortbtn svg { width: 14px; height: 14px; }
.smenu { display: none; position: absolute; right: 0; top: calc(100% + 4px); min-width: 150px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 6px; z-index: 20; box-shadow: 0 10px 28px rgba(0,0,0,.25); }
.smenu.open { display: grid; } .smenu a { padding: 9px 12px; border-radius: 8px; font-size: 14px; cursor: pointer; color: var(--muted); } .smenu a:hover { background: var(--surface-2); color: var(--fg); } .smenu a.on { color: var(--fg); font-weight: 600; }
.comment .rep .liked { color: var(--fg); font-weight: 600; }
@container (max-width: 640px) {
  .foot { padding: 20px 18px 12px; gap: 0; }
  .fcols { gap: 0; border-bottom: 1px solid var(--line); }
  .fbrand { padding-bottom: 12px; }
  .fcol .fh { padding: 12px 0; font-size: 15px; }
  .fcol ul { padding: 0 0 12px 16px; gap: 12px; }
  .fcol li a { color: var(--muted); }
  .fbottom { padding-top: 14px; gap: 8px; border-top: 0; }
  .fbottom .rta { width: 58px; height: 26px; font-size: 12.5px; }
}
/* round 36: favorite button feedback */
.thumb .addbtn { cursor: pointer; transition: background .15s, color .15s, transform .15s; }
.thumb .addbtn:hover { background: rgba(0,0,0,.82); }
.thumb .addbtn.on { background: #fff; color: #111; }
.thumb .addbtn:active { transform: scale(.92); }
/* round 37: inline favorite message */
.favtip { position: absolute; right: 44px; top: 8px; z-index: 3; min-height: 30px; max-width: calc(100% - 52px); display: inline-flex; align-items: center; justify-content: flex-end; text-align: right; line-height: 1.2; padding: 0; background: none; color: #fff; font-size: 12.5px; font-weight: 600; white-space: normal; text-shadow: 0 1px 3px rgba(0,0,0,.85), 0 0 8px rgba(0,0,0,.6); animation: favin .15s ease-out; }
.favtip a { color: #fff; text-decoration: underline; cursor: pointer; margin: 0 3px; }
@keyframes favin { from { opacity: 0; transform: translateX(6px); } to { opacity: 1; transform: none; } }
#pt-his .head { align-items: center; margin-bottom: 12px; }
#pt-his .head h2 { line-height: 1.2; margin: 0; }
#hisclear { width: 36px; height: 36px; margin-right: -9px; transform: translateY(2px); }
#hisclear:disabled { opacity: .35; cursor: default; }
#hisclear:disabled:hover { background: none; }
.pbtn.plain { border: 0; background: none; width: 42px; height: 40px; border-radius: 10px; }
.pbtn.plain:hover { background: var(--surface-2); }
.thumb:has(.favtip) .badge { opacity: 0; transition: opacity .1s; }
/* round 38: clickable category title */
.titlelink { display: inline-flex; align-items: center; gap: 2px; cursor: pointer; color: inherit; }
.titlelink svg { width: 20px; height: 20px; margin-top: 2px; color: var(--muted); transition: transform .15s, color .15s; }
.titlelink:hover span { text-decoration: underline; text-underline-offset: 4px; }
.titlelink:hover svg { color: var(--fg); transform: translateX(2px); }
/* round 39: home category chips */
.hchips { display: flex; flex-wrap: nowrap; gap: 8px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
.hchips::-webkit-scrollbar { display: none; }
.hchip { flex: none; display: inline-flex; align-items: center; height: 32px; padding: 0 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; font-size: 13.5px; font-weight: 600; white-space: nowrap; cursor: pointer; color: var(--fg); }
.hchip:hover { border-color: var(--fg); }
/* round 40: advertisement label */
.adslot { display: grid; justify-items: center; gap: 5px; }
.adslot.mb { display: none; }
.adlab { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); line-height: 1; }
.noadlab .adlab { display: none; }
.adslot .ad { margin-inline: 0; }
@container (max-width: 640px) { .adslot.dk { display: none; } .adslot.mb { display: grid; } }
/* ---------- admin ---------- */
.adm { display: grid; grid-template-columns: 220px minmax(0, 1fr); min-height: 640px; }
@container (max-width: 860px) { .adm { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; } .adm > .aside { align-self: start; } }
.aside { background: var(--surface); border-right: 1px solid var(--line); padding: 16px 12px; display: grid; gap: 4px; align-content: start; }
@container (max-width: 860px) { .aside { display: flex; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); padding: 8px; } .aside .logo, .aside .grpt { display: none; } }
.aside a.logo { display: block; padding: 4px 10px 14px; font-size: 22px; }
.aside .logo small { font: 600 10px var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-left: 4px; }
.grpt { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); padding: 12px 10px 4px; }
.aside a { display: flex; justify-content: space-between; gap: 8px; align-items: center; padding: 8px 10px; border-radius: 8px; font-size: 14px; color: var(--muted); white-space: nowrap; }
.aside a:hover { background: var(--surface-2); color: var(--fg); } .aside a[aria-current="page"] { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.badge { font-size: 11px; font-weight: 700; background: var(--accent); color: var(--accent-fg); border-radius: 10px; padding: 0 7px; }
.amain { padding: 20px; min-width: 0; display: grid; gap: 18px; align-content: start; }
.ahead { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center; }
.ahead h1 { font-size: 22px; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 14px; display: grid; gap: 2px; }
.stat small { color: var(--muted); font-size: 12.5px; } .stat strong { font: 700 24px var(--display); font-variant-numeric: tabular-nums; } .stat span { font-size: 12px; color: var(--good); }
.card2 { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 16px; display: grid; gap: 12px; min-width: 0; }
.card2 h2 { font-size: 16px; }
.two { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 16px; }
@container (max-width: 960px) { .two { grid-template-columns: minmax(0, 1fr); } }
.tw { overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; }
table { border-collapse: collapse; width: 100%; font-size: 13.5px; min-width: 640px; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
th { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; background: var(--surface); font-weight: 600; }
tr:last-child td { border-bottom: 0; } td.n { font-variant-numeric: tabular-nums; }
.pt { width: 64px; aspect-ratio: 16 / 9; border-radius: 4px; display: block; }
.st { font-size: 11.5px; padding: 2px 8px; border-radius: 10px; background: var(--surface-2); color: var(--muted); font-weight: 600; white-space: nowrap; }
.st.ok { color: var(--good); } .st.wait { color: var(--warn); } .st.bad { color: var(--bad); }
.filters { display: flex; flex-wrap: wrap; gap: 8px; }
.filters input, .filters select { background: var(--surface); color: var(--fg); border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; font-size: 14px; min-width: 0; }
.form2 { align-items: start; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.form2 .wide { grid-column: 1 / -1; }
.trow { display: flex; justify-content: space-between; gap: 14px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.trow:last-child { border-bottom: 0; } .trow b { font-size: 14px; font-weight: 600; display: block; } .trow span { font-size: 12.5px; color: var(--muted); }
.sw { position: relative; flex: none; display: inline-block; vertical-align: middle; width: 42px; height: 24px; }
.sw input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }
.sw i { position: absolute; inset: 0; background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; transition: background .15s; }
.sw i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--muted); transition: transform .15s, background .15s; }
.sw input:checked + i { background: var(--accent); border-color: var(--accent); } .sw input:checked + i::after { transform: translateX(18px); background: var(--accent-fg); }
.sw input:focus-visible + i { outline: 2px solid var(--accent); outline-offset: 2px; }
.stabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--line); }
.stabs button { background: none; border: 0; border-bottom: 2px solid transparent; color: var(--muted); padding: 9px 12px; font-size: 14px; font-weight: 600; }
.stabs button[aria-selected="true"] { color: var(--fg); border-color: var(--accent); }
.cm { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); align-items: start; }
.cm:last-child { border-bottom: 0; } .cm p { margin: 2px 0 4px; font-size: 14px; } .cm small { color: var(--muted); }
.cm .ac { display: flex; gap: 6px; flex-wrap: wrap; justify-content: end; }
@container (max-width: 640px) { .cm { grid-template-columns: 34px minmax(0, 1fr); } .cm .ac { grid-column: 2; justify-content: start; } }
.inbox { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 16px; }
@container (max-width: 860px) { .inbox { grid-template-columns: minmax(0, 1fr); } }
.msg { padding: 12px; border-bottom: 1px solid var(--line); display: grid; gap: 2px; cursor: pointer; }
.msg.unread b::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); margin-right: 6px; }
.msg.sel { background: var(--accent-soft); } .msg small { color: var(--muted); }
.chart text { fill: var(--muted); font-size: 11px; font-family: var(--body); }
.hint { font-size: 12.5px; color: var(--muted); }
/* round 41: calmer admin */
.amain { padding: 26px 28px; gap: 22px; }
.asub { font-size: 13.5px; color: var(--muted); margin-top: 4px; }
.ahead h1 { font-size: 24px; }
.card2 { padding: 20px; gap: 14px; border-radius: 12px; }
.card2 > h2 { font-size: 16px; padding-bottom: 2px; }
.sgrid { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 22px; align-items: start; }
.snav { display: grid; gap: 2px; align-content: start; position: sticky; top: 12px; }
.sgt { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); padding: 14px 12px 4px; }
.sgt:first-child { padding-top: 0; }
.snav button { background: none; border: 0; text-align: left; padding: 9px 12px; border-radius: 8px; font: inherit; font-size: 14px; color: var(--muted); cursor: pointer; }
.snav button:hover { background: var(--surface-2); color: var(--fg); }
.snav button[aria-selected="true"] { background: var(--accent-soft); color: var(--fg); font-weight: 600; }
@container (max-width: 860px) {
  .amain { padding: 18px 14px; }
  .sgrid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .snav { display: flex; overflow-x: auto; position: static; gap: 4px; scrollbar-width: none; padding-bottom: 2px; }
  .snav::-webkit-scrollbar { display: none; }
  .sgt { display: none; }
  .snav button { flex: none; white-space: nowrap; border: 1px solid var(--line); }
}
#a-ads .stabs { margin-top: -6px; }
/* round 42: admin mobile menu, row menus, dashboard, save bar */
.amenubtn { display: none; }
.savebar { display: flex; align-items: center; gap: 12px; }
.unsaved { font-size: 13px; color: var(--warn); font-weight: 600; display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; min-width: 132px; visibility: hidden; }
.unsaved.show { visibility: visible; } .unsaved.ok { color: var(--good); } .unsaved.ok::before { display: none; }
@container (max-width: 560px) { .savebar { flex-direction: row-reverse; justify-content: flex-end; } .unsaved { justify-content: flex-start; } }
.unsaved::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

.attn { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); color: var(--fg); cursor: pointer; }
.attn:last-child { border-bottom: 0; padding-bottom: 0; }
.attn b { display: block; font-size: 14px; font-weight: 600; } .attn span { font-size: 12.5px; color: var(--muted); }
.attn svg { width: 16px; height: 16px; color: var(--muted); flex: none; }
.attn:hover svg { color: var(--fg); transform: translateX(2px); }
.rm { width: 32px; height: 32px; border: 0; background: none; border-radius: 8px; color: var(--muted); display: inline-grid; place-items: center; cursor: pointer; padding: 0; }
.rm svg { width: 18px; height: 18px; transform: rotate(90deg); } .rm.rmv svg { transform: none; } .rm:hover { background: var(--surface-2); color: var(--fg); }
.rmenu { position: absolute; z-index: 60; min-width: 130px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 6px; box-shadow: 0 10px 28px rgba(0,0,0,.25); display: grid; }
.rmenu[hidden] { display: none; }
.rmenu a { padding: 9px 12px; border-radius: 8px; font-size: 14px; color: var(--fg); cursor: pointer; } .rmenu a:hover { background: var(--surface-2); } .rmenu a.dan { color: var(--bad); }
@container (max-width: 860px) {
  .aside { display: grid; position: relative; padding: 8px 14px; gap: 2px; overflow: visible; }
  .aside a.logo { display: block; padding: 8px 0; } .aside a.logo small { display: inline; }
  .aside > :not(.logo):not(.amenubtn) { display: none; }
  .aside.open > .grpt { display: block; }
  .aside.open > a:not(.logo) { display: flex; }
  .amenubtn { display: grid; position: absolute; right: 8px; top: 6px; width: 44px; height: 40px; place-items: center; border: 0; background: none; color: var(--fg); border-radius: 10px; cursor: pointer; }
  .amenubtn:hover { background: var(--surface-2); }
  .atop { flex-wrap: nowrap; padding: 10px 14px; gap: 8px; }
  .asearch { flex: 1 1 auto; min-width: 0; max-width: none; }
  .aacts { margin-left: 0; flex: none; gap: 6px; }
  .vst, .wn { display: none; }
  .aacts .btn.sm { padding: 6px 8px; }
  .savebar { width: 100%; justify-content: space-between; }
}
.aside a.logo, .aside a.logo:hover { background: none; color: var(--fg); }
.two > .card2 { align-content: start; }
.btn.pri[data-go] { display: inline-flex; justify-content: center; align-items: center; }
@container (max-width: 640px) { .stats .stat:last-child:nth-child(odd) { grid-column: 1 / -1; } }
/* round 43: admin top bar like the site, robots and sitemap */
.atop { gap: 12px; padding: 12px 22px; }
.asearch { flex: 1 1 auto; max-width: 560px; height: 44px; padding: 0 16px; gap: 12px; background: var(--surface-2); border: 1px solid transparent; border-radius: 10px; }
.asearch:focus-within { background: var(--bg); border-color: var(--fg); }
.asearch input { font-size: 15px; padding: 0; }
.aicons { display: flex; align-items: center; margin-left: auto; }
.aicon { width: 42px; height: 40px; border: 0; background: none; border-radius: 10px; padding: 0; display: grid; place-items: center; color: var(--fg); cursor: pointer; }
.aicon:hover { background: var(--surface-2); }
.aicons .pdiv { margin: 0 2px; }
@container (max-width: 860px) { .atop { padding: 10px 12px; gap: 4px; flex-wrap: nowrap; } .asearch { max-width: none; min-width: 0; padding: 0 12px; gap: 8px; } .asearch input { min-width: 0; width: 100%; } .aicons { flex: none; margin-left: 0; } .aicon { width: 38px; } .aicons .pdiv { display: none; } }
.chkgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px 16px; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; line-height: 1.6; }
/* round 44: pages list on top, import stacked */
.plist { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 0; overflow: hidden; }
.plist .msg { border-right: 1px solid var(--line); }
.stack { display: grid; gap: 18px; }
/* round 45: pages as a clean list, fixed editor */
.plist { display: grid; gap: 2px; padding: 0; background: none; border: 0; overflow: visible; grid-template-columns: minmax(0, 1fr); }
.prow { display: grid; grid-template-columns: minmax(0, 1fr) 140px 150px; gap: 12px; align-items: center; padding: 12px 16px; border-radius: 10px; border: 1px solid transparent; cursor: pointer; color: var(--muted); font-size: 14px; }
.prow .pn { font-weight: 600; color: var(--fg); font-size: 15px; }
.prow .pp { font-size: 13px; }
.prow .pe { font-size: 12.5px; text-align: right; }
.prow:hover { background: var(--surface-2); }
.prow.on { background: var(--surface); border-color: var(--fg); box-shadow: inset 4px 0 0 var(--fg); }
.prow.on .pn { font-weight: 700; }
#pedit { min-height: 440px; align-content: start; }
textarea.fixed { height: 190px; resize: none; overflow-y: auto; }
@container (max-width: 640px) { .prow { grid-template-columns: minmax(0, 1fr) auto; } .prow .pe { display: none; } }
/* round 46: messages accordion, general sections */
.acc { display: grid; gap: 8px; }
.accitem { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.accitem.open { border-color: var(--fg); }
.acch { width: 100%; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) 20px; gap: 14px; align-items: center; padding: 14px 16px; background: none; border: 0; text-align: left; color: var(--fg); font: inherit; cursor: pointer; }
.acch:hover { background: var(--surface-2); }
.accm { display: grid; gap: 2px; min-width: 0; } .accm b { font-size: 14.5px; } .accm small { color: var(--muted); font-size: 12.5px; }
.accp { color: var(--muted); font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acch svg { width: 18px; height: 18px; color: var(--muted); transition: transform .15s; } .accitem.open .acch svg { transform: rotate(180deg); }
.accitem.unread .accm b::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); margin-right: 8px; }
.accb { padding: 4px 16px 18px; display: grid; gap: 12px; border-top: 1px solid var(--line); padding-top: 14px; }
.accb[hidden] { display: none; }
.accb p { margin: 0; font-size: 14.5px; }
.accb textarea.fixed { height: 110px; }
@container (max-width: 640px) { .acch { grid-template-columns: minmax(0, 1fr) 20px; } .accp { display: none; } }
.sec { display: grid; gap: 12px; padding: 22px 0; border-top: 1px solid var(--line); }
.sec:first-child { border-top: 0; padding-top: 0; } .sec:last-child { padding-bottom: 0; }
.sec > h2 { font-size: 16px; } .sec > .hint { margin-top: -6px; }
.sec .icon-card { max-width: 520px; }
/* round 47: three jobs, three tabs */
.hint.role { background: var(--surface-2); border-radius: 10px; padding: 12px 14px; color: var(--fg); font-size: 13.5px; line-height: 1.55; }
.sgh { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; margin-top: 6px; }
/* round 48: aligned indexing rows */
.ilist { border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }
.irow { display: grid; grid-template-columns: minmax(0, 1fr) 170px; gap: 16px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.irow:last-child { border-bottom: 0; }
.irow b { display: block; font-size: 14px; font-weight: 600; }
.irow small { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.irow select, .irow input { width: 100%; font: inherit; font-size: 14px; background: var(--surface-2); color: var(--fg); border: 1px solid var(--line); border-radius: 8px; padding: 9px 10px; }
.irow select:focus, .irow input:focus { outline: none; border-color: var(--fg); background: var(--bg); }
@container (max-width: 640px) { .irow { grid-template-columns: minmax(0, 1fr); gap: 8px; } }
/* round 49: videos list and editor */
.vstack { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-content: start; }
.vstack[hidden] { display: none; }
.vtl { font-weight: 600; cursor: pointer; } .vtl:hover { text-decoration: underline; text-underline-offset: 3px; }
.pt.vopen { cursor: pointer; }
.acell { white-space: nowrap; text-align: right; } .acell .btn { margin-right: 6px; }
.backlink { background: none; border: 0; padding: 0; color: var(--muted); font: inherit; font-size: 13.5px; cursor: pointer; margin-bottom: 6px; display: block; }
.backlink:hover { color: var(--fg); }
.vegrid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 18px; align-items: start; }
@container (max-width: 960px) { .vegrid { grid-template-columns: minmax(0, 1fr); } }
.vposter { width: 100%; aspect-ratio: 16 / 9; height: auto; border-radius: 10px; }
.cnote.ok { font-size: 13.5px; }
/* round 50: clean video editor */
.vclean { gap: 22px; max-width: 1040px; }
.vebar { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.vebar .backlink { margin: 0; }
.vemain { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 36px; align-items: start; }
@container (max-width: 960px) { .vemain { grid-template-columns: minmax(0, 1fr); gap: 24px; } .veside { order: -1; position: static; } }
.vepane { display: grid; gap: 22px; }
.vetitle { width: 100%; background: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 4px 0 12px; font: 700 26px/1.25 var(--display); color: var(--fg); outline: none; }
.vetitle:focus { border-color: var(--fg); }
.vemeta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.vemeta label, .vef { display: grid; gap: 6px; font-size: 12.5px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.vemeta select, .vef input, .vef textarea { text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 15px; color: var(--fg); background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 11px 14px; font-family: inherit; }
.vef textarea.fixed { height: 150px; line-height: 1.55; }
.vemeta select:focus, .vef input:focus, .vef textarea:focus { outline: none; border-color: var(--fg); }
.vehelp { font-size: 13px; color: var(--muted); margin-top: -10px; }
.vlink { color: var(--fg); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.vlink.dan { color: var(--bad); }
.veside { display: grid; gap: 18px; position: sticky; top: 12px; }
.veside .vposter { border-radius: 12px; }
.vedl { display: grid; grid-template-columns: auto 1fr; gap: 10px 16px; margin: 0; font-size: 14px; }
.vedl dt { color: var(--muted); } .vedl dd { margin: 0; text-align: right; font-weight: 600; }
.veacts { display: flex; flex-wrap: wrap; gap: 8px 18px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 14px; }
.vsm { font-size: 12.5px; color: var(--muted); font-weight: 400; text-transform: none; letter-spacing: 0; }
.vef input[readonly] { color: var(--muted); }
/* round 51: clean bulk bar */
.bulk { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 6px 8px 6px 14px; gap: 2px; align-items: center; }
.bulk b { font-weight: 500; color: var(--muted); font-size: 13.5px; margin-right: 8px; padding-right: 12px; border-right: 1px solid var(--line); }
.bulk .btn { background: none; border: 0; color: var(--fg); font-weight: 600; padding: 7px 10px; border-radius: 8px; }
.bulk .btn:hover { background: var(--surface-2); }
.bulk .btn.danger { color: var(--bad); }
@container (max-width: 960px) { .vemain .veside { position: static; } }
.backlink { white-space: nowrap; }
.vebar .savebar { width: auto; margin-left: auto; }
.bulk { flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
.bulk::-webkit-scrollbar { display: none; }
.bulk .btn { flex: none; }
.bulk b { flex: none; }
@container (max-width: 640px) { .bulk { padding: 6px 6px 6px 12px; } .bulk b { margin-right: 4px; padding-right: 10px; font-size: 13px; } .bulk .btn { padding: 7px 6px; font-size: 13px; } }
/* round 52: admin account menu */
.atop { position: relative; }
.acctmenu { position: absolute; right: 16px; top: calc(100% - 6px); z-index: 70; width: 250px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 6px; box-shadow: 0 10px 28px rgba(0,0,0,.25); display: grid; }
.acctmenu[hidden] { display: none; }
.acwho { display: flex; gap: 10px; align-items: center; padding: 10px 10px 12px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.acwho b { display: block; font-size: 14px; } .acwho small { color: var(--muted); font-size: 12.5px; }
.acctmenu a { display: flex; gap: 10px; align-items: center; padding: 10px; border-radius: 8px; font-size: 14px; color: var(--fg); cursor: pointer; }
.acctmenu a svg { width: 18px; height: 18px; color: var(--muted); }
.acctmenu a:hover { background: var(--surface-2); }
.acctmenu a.aclo { color: var(--bad); } .acctmenu a.aclo svg { color: var(--bad); }
/* round 53: admin login */
.alogin { background: var(--bg); min-height: 640px; }
.alwrap { display: grid; place-items: center; min-height: 640px; padding: 32px 16px; }
.alcard { width: min(400px, 100%); background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 28px; display: grid; gap: 16px; }
.alcard form { display: grid; gap: 14px; }
.alcard h2 { font-size: 22px; } .alcard .sub { margin: -6px 0 0; font-size: 14px; }
.allogo { font-size: 26px; text-align: center; justify-self: center; }
.allogo small { font: 600 10px var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-left: 4px; }
.alfull { width: 100%; justify-content: center; text-align: center; padding: 12px; font: inherit; font-weight: 600; cursor: pointer; border: 0; }
.allink { text-align: center; font-size: 13.5px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.allink:hover { color: var(--fg); }
.alerr { background: color-mix(in srgb, var(--bad) 12%, transparent); color: var(--bad); border-radius: 8px; padding: 10px 12px; font-size: 13.5px; }
.alerr.ok { background: color-mix(in srgb, var(--good) 14%, transparent); color: var(--good); }
.alerr[hidden] { display: none; }
.alcode { text-align: center; font-size: 26px; letter-spacing: .4em; font-variant-numeric: tabular-nums; padding: 12px; }
.alnote { margin: 0; text-align: center; font-size: 12px; color: var(--muted); }

.fbottom { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 12px 14px; }
.fbottom .fcopy { text-align: left; }
.fbottom .fnote { grid-column: 1 / -1; font-size: 12px; color: var(--muted); }
@container (max-width: 640px) { .fbottom { text-align: left; justify-content: stretch; padding-top: 14px; } }

.fbottom .fnote { display: block; text-align: left; font-size: 12px; line-height: 1.55; }
.fbottom .a18 { display: block; font-weight: 600; color: var(--fg); }
.fbottom .a18s { display: block; }
.fbottom .rta { width: auto; height: auto; border: 0; border-radius: 0; font: 600 12.5px var(--body); letter-spacing: .06em; color: var(--muted); }
.totop { position: fixed; bottom: 22px; z-index: 40; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line); background: var(--bg); color: var(--fg); box-shadow: 0 4px 14px rgba(0,0,0,.28); display: grid; place-items: center; padding: 0; cursor: pointer; opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity .2s, transform .2s; }
.totop.on { opacity: 1; transform: none; pointer-events: auto; }
.totop:hover { background: var(--surface-2); }
.totop svg { width: 20px; height: 20px; transform: rotate(180deg); }
.pair .themebtn { position: relative; }
.tauto { width: 20px; height: 20px; color: var(--fg); display: block; }

/* round 27: title under the player, icon meta line, icon-only favorite and report, report opens below */
.vtitle { margin: 14px 0 8px; }
.vbar { margin-top: 0; }
.vmeta { gap: 6px 16px; font-size: 14.5px; align-items: center; }
.vmeta span { display: inline-flex; align-items: center; gap: 7px; }
.vmeta svg { width: 18px; height: 18px; }
.like.iconly { padding: 6px 9px; }
.like.iconly svg { width: 19px; height: 19px; }
.like.iconly.on { color: var(--fg); }
.vfw { display: inline-flex; position: relative; }
.vbar { margin-bottom: 0; row-gap: 6px; }

.vfnote { position: absolute; top: calc(100% + 1px); left: 50%; transform: translateX(-50%); font-size: 12.5px; font-weight: 500; color: var(--muted); white-space: nowrap; z-index: 5; }
.vfnote a { color: var(--fg); text-decoration: underline; cursor: pointer; }
.like.iconly b { font-size: 14px; }
.like.iconly { gap: 6px; }
.repbox#repbox { position: static; width: auto; max-width: 460px; margin-top: 0; box-shadow: none; z-index: auto; }
@container (max-width: 560px) { .repbox#repbox { max-width: none; } }

/* round 28: breadcrumb with a Categories button, and the Browse drawer */
.vcrumb { display: flex; align-items: center; gap: 2px; margin-bottom: 14px; min-width: 0; }
.catbtn { display: inline-flex; align-items: center; gap: 8px; flex: none; border: 1px solid var(--line); background: var(--surface); color: var(--fg); border-radius: 10px; padding: 8px 14px 8px 10px; font: 500 14.5px var(--body); cursor: pointer; }
.catbtn:hover { background: var(--surface-2); }
.catbtn svg { width: 16px; height: 16px; transform: rotate(-90deg); }
.crumb { display: flex; align-items: center; gap: 8px; padding-left: 2px; min-width: 0; flex: 1; font-size: 14px; color: var(--muted); white-space: nowrap; }
.crumb a { color: var(--muted); flex: none; } .crumb a:hover { color: var(--fg); }
.crumb .sep { flex: none; opacity: .7; }
.crumb .cur { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
@container (max-width: 560px) { .vcrumb { gap: 4px; } }
.cdrawer { position: absolute; inset: 0; z-index: 70; background: rgba(0,0,0,.5); }
.cpanel2 { position: sticky; top: 0; width: 300px; max-width: 86%; height: min(100vh, 760px); overflow-y: auto; background: var(--surface); border-right: 1px solid var(--line); padding: 18px 18px 22px; animation: cdin .18s ease-out; }
@keyframes cdin { from { transform: translateX(-24px); opacity: 0; } to { transform: none; opacity: 1; } }
.cdh { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.cdh b { font-size: 19px; }
.cdh .rm svg { transform: rotate(90deg); }
.cdlinks a { display: flex; align-items: center; justify-content: space-between; padding: 11px 6px; font-size: 15.5px; border-radius: 8px; cursor: pointer; }
.cdlinks a:hover { background: var(--surface-2); }
.cdlinks a small { color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.cdlab { margin: 14px 0 4px; padding-top: 14px; border-top: 1px solid var(--line); font: 600 11.5px var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.cdall { display: flex; align-items: center; gap: 6px; margin-top: 8px; padding: 10px 6px; font-size: 14.5px; font-weight: 600; cursor: pointer; }
.cdall svg { width: 16px; height: 16px; }

/* round 29: clean Categories button, Browse opens as a dropdown under it */
.cdwrap { position: relative; flex: none; }
.catbtn { border: 0; background: none; padding: 8px 10px 8px 4px; border-radius: 8px; font-weight: 600; }
.catbtn svg { transition: transform .15s; }
.catbtn[aria-expanded="true"] svg { transform: none; }
.cdrawer { position: absolute; inset: auto; top: calc(100% + 8px); left: 0; z-index: 60; background: none; }
.cpanel2 { position: static; width: min(290px, calc(100vw - 32px)); max-width: none; height: auto; max-height: min(72vh, 520px); border: 1px solid var(--line); border-radius: 12px; padding: 8px; box-shadow: 0 18px 44px rgba(0,0,0,.4); animation: none; }
.cdlab { margin: 8px 6px 2px; padding-top: 12px; }
.cdlab.first { margin-top: 2px; padding-top: 6px; border-top: 0; }

/* round 30: menu under the live strip with icons and Random, shared Categories dropdown on home */
.nav a { display: inline-flex; align-items: center; gap: 8px; }
.nav a svg { display: block; width: 18px; height: 18px; flex: none; }
.nav a { cursor: pointer; }
.hbar { display: flex; align-items: center; gap: 6px; }
.hbar .hchips { flex: 1; min-width: 0; }
.cpanel2 { max-height: min(62vh, 440px); }
@container (max-width: 640px) {
  .nav { display: flex; gap: 0; padding: 0 6px; scrollbar-width: none; }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { display: inline-flex; align-items: center; gap: 9px; padding: 13px 14px; font-size: 15px; border-bottom-width: 3px; }
  .nav a svg { display: block; width: 20px; height: 20px; }
  .nav a[aria-current="page"] { font-weight: 700; }
}

/* round 31: Random in the header icons, button and chips line up */
.hbar { gap: 10px; align-items: center; }
.hbar .catbtn { height: 32px; padding: 0 10px 0 6px; font-size: 13.5px; font-weight: 600; border-radius: 8px; gap: 6px; }
.hbar .catbtn svg { width: 15px; height: 15px; }
.hbar .cdwrap { padding-right: 10px; border-right: 1px solid var(--line); }
.hbar .cdrawer { top: calc(100% + 10px); }
.hbar .hchips { padding-bottom: 0; }

/* round 32: Categories button and chips share one soft style */
.hbar .catbtn, .hchip { background: var(--surface-2); border: 0; border-radius: 8px; height: 32px; }
.hbar .catbtn { padding: 0 12px 0 8px; }
.hchip:hover, .hbar .catbtn:hover { background: var(--line); }
.hbar .cdwrap { padding-right: 0; border-right: 0; }
.hbar { gap: 8px; }

/* round 33: plain text categories, a thin line after the button */
.hbar { gap: 14px; }
.hbar .catbtn { background: none; padding: 0 4px 0 0; height: 32px; }
.hbar .catbtn:hover { background: none; color: var(--muted); }
.hbar .cdwrap { padding-right: 14px; border-right: 1px solid var(--line); height: 20px; display: flex; align-items: center; }
.hbar .cdrawer { top: calc(100% + 16px); }
.hbar .hchips { gap: 20px; }
.hchip { background: none; border: 0; height: 32px; padding: 0; font-weight: 500; font-size: 14px; color: var(--muted); border-radius: 0; }
.hchip:hover { background: none; color: var(--fg); }

/* round 34: signed-in account menu */
#pm-member { border-top: 0; padding-top: 0; }
.pm-who { display: flex; align-items: center; gap: 10px; padding: 8px 10px 10px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.pm-who b { display: block; font-size: 14.5px; } .pm-who small { color: var(--muted); font-size: 12.5px; }
.pav { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: var(--accent-fg); font: 700 11px var(--body); }
.pm-who .pav { width: 36px; height: 36px; font-size: 13px; }

/* round 35: comments first, then eight related videos, no tabs */
.vsplit { margin-top: 30px; }
.vsplit .head { margin-bottom: 12px; }
#morevids { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@container (max-width: 760px) { #morevids { grid-template-columns: repeat(2, minmax(0, 1fr)); } #morevids.one { grid-template-columns: minmax(0, 1fr); } }
.vsplit.rel { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--line); }

.vmeta .vcm { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; color: inherit; }
.vmeta .vcm:hover { color: var(--fg); }

@container (max-width: 560px) { .vmeta { flex-wrap: nowrap; gap: 6px 12px; font-size: 13.5px; } .vmeta span, .vmeta .vcm { gap: 5px; white-space: nowrap; } .vmeta svg { width: 16px; height: 16px; } }


/* round 41: View dropdown (Comfort / Compact) on every video list, phone width only */
.vmode { display: block; margin-left: auto; }
.filt .vmode { align-self: center; }
@container (max-width: 760px) { .head:has(.vmode) { align-items: center; } .grid.one { grid-template-columns: minmax(0, 1fr); } }
/* round 41: related tags share the plain row look of the home categories */
.rbar { margin: -4px 0 14px; gap: 14px; }
.rbar .rellab { flex: none; font: 600 13.5px var(--body); color: var(--fg); padding-right: 14px; border-right: 1px solid var(--line); line-height: 20px; }
.rbar .hchips { flex: 1; min-width: 0; }
@container (min-width: 761px) { #homegrid, #trendgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } #homegrid.one, #trendgrid.one, #morevids.one { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tsm { align-self: center; font-size: 12px; opacity: .85; }
@container (max-width: 760px) { #homegrid, #trendgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } #homegrid.one, #trendgrid.one { grid-template-columns: minmax(0, 1fr); } }

.head.left:has(.lacts) { flex-wrap: nowrap; gap: 8px; align-items: center; }
.head.left:has(.lacts) h2 { min-width: 0; line-height: 1.15; }
@container (max-width: 760px) { .head.left:has(.lacts) h2 { font-size: 19px; }  .lacts .sortbtn { padding: 8px 4px; } }
.lacts { flex: none; display: flex; align-items: center; gap: 2px; margin-left: auto; }
.lacts .sortbtn { font-size: 14px; color: var(--fg); font-weight: 600; padding: 8px 6px; }
.lacts .smenu { min-width: 180px; }
.adwrap.vmid { margin: 22px 0 0; }
@container (max-width: 1160px) { .vside { display: none; } }
#vt-rel { margin-top: 22px; }
#vdesc { margin-top: 22px; }
.cgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cgrid input { background: var(--bg); color: var(--fg); border: 1px solid var(--line); border-radius: 8px; padding: 10px; font-size: 14px; min-width: 0; }
@container (max-width: 560px) { .cgrid { grid-template-columns: 1fr; } }
#cbox-gf[hidden], #cbox-off[hidden] { display: none; }
.grow { min-height: 40px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: nowrap; }
.grow .gmsg { flex: 1; min-width: 0; min-height: 2.7em; display: flex; align-items: center; line-height: 1.3; }
.grow .gmsg.bad { color: var(--bad); } .grow .gmsg.ok { color: var(--good); }
.grow #gpost { flex: none; }
.dsimple { display: grid; gap: 16px; }
.dsimple .pills { gap: 6px; }
@container (max-width: 640px) { .top.sopen .dsearch { display: block; order: 10; flex: 1 1 100%; max-width: none; margin: 2px 0 0; } .top.sopen .ddrop { max-height: 70vh; overflow: auto; } }
.vmode { display: none; }
@container (max-width: 760px) { .vmode { display: block; } }
@container (max-width: 640px) { .dbar input, .cgrid input, .cbox textarea, #sq { font-size: 16px; } }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
.card { container-type: inline-size; }
.meta .tc { display: none; }
@container (max-width: 200px) {
  .meta { flex-wrap: nowrap; gap: 0 8px; font-size: 12px; white-space: nowrap; overflow: hidden; }
  .meta .vw, .meta .tl { display: none; } .meta .tc { display: inline; }
  .meta > span { flex: none; } .meta .mt { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .thumb .badge { left: 6px; top: 6px; padding: 2px 6px; font-size: 11px; gap: 4px; }
  .thumb .addbtn { right: 6px; top: 6px; width: 26px; height: 26px; }
  .thumb .addbtn svg { width: 16px; height: 16px; }
}
.ddr { margin-left: auto; align-self: center; } .ddl .smenu { left: 0; right: auto; }
.filt { gap: 2px 14px; align-items: center; }
.filt .sortbtn { padding: 6px 2px; }
.head:has(.ddr) { align-items: center; }
.filt { gap: 4px 18px; margin-bottom: 18px; }
.filt .sortbtn { padding: 8px 0; }
#catpage .head { margin-bottom: 14px; }
@container (max-width: 560px) { .filt { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; } .filt .ddl .smenu { min-width: 160px; } }
#catpage .head:has(.ddr) { align-items: flex-start; }
#catpage .head .ddr { align-self: flex-start; margin-top: -3px; }
@container (max-width: 560px) { .filt { display: flex; flex-wrap: wrap; gap: 0 12px; } .filt .sortbtn { white-space: nowrap; font-size: 13px; gap: 4px; } }
.ddvw { display: inline-grid; } .ddvw > b { grid-area: 1 / 1; white-space: nowrap; }
.ddvw .ddsz { visibility: hidden; height: 0; overflow: hidden; }
#catpage h1 { line-height: 28px; }
.ddr .ddsz { display: none; }
#catpage .head { flex-wrap: nowrap; gap: 12px; } #catpage .head h1 { min-width: 0; }
#catpage .head:has(.ddr) { align-items: flex-start; }
#catpage .head .ddr { margin-top: 0; align-self: flex-start; }
#catpage .head .ddr .sortbtn { height: 28px; padding: 0; }
.ddsz { display: none !important; }
.ddvw { margin-left: 3px; }
#catpage .head { flex-wrap: wrap; }
.filt { display: grid; grid-template-columns: repeat(4, 190px); gap: 0 8px; justify-content: start; margin-bottom: 18px; }
.filt .sortwrap { min-width: 0; }
.filt .sortbtn { width: 100%; justify-content: flex-start; padding: 8px 0; white-space: nowrap; }
.filt .sortbtn > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
@container (max-width: 560px) { .filt { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; } .filt .sortbtn { font-size: 13px; } }
.filt .vmode { margin-left: 0; }
.filt .vmode .sortbtn { width: 100%; justify-content: flex-start; padding: 8px 0; white-space: nowrap; }
.filt .vmode .smenu { left: 0; right: auto; }
@container (max-width: 760px) {
  #catgrid, #topgrid, #catresgrid, #favgrid, #hisgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #catgrid.one { grid-template-columns: minmax(0, 1fr); }
}
.brbar { margin: -4px 0 12px; }
.brbar .cdwrap { display: inline-block; }
.brbar .catbtn { height: 32px; padding: 0 8px 0 0; font-size: 14px; }
.brbar .cdrawer { top: calc(100% + 6px); }
.brbar .cpanel2 { max-height: min(70vh, 560px); }
/* round 42: poster chips share one size and sit on the corners: rank top left, favorite top right, HD bottom left, time bottom right */
.thumb .chip, .thumb .addbtn { position: absolute; z-index: 2; height: 24px; min-width: 24px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; background: rgba(0,0,0,.66); color: #fff; border-radius: 6px; padding: 0 7px; font: 600 12px/1 var(--body); font-variant-numeric: tabular-nums; }
.thumb .addbtn { right: 8px; top: 8px; padding: 0; width: 24px; }
.thumb .addbtn svg { width: 15px; height: 15px; }
.thumb .crank { left: 8px; top: 8px; font-weight: 800; }
.thumb .chd { left: 8px; bottom: 8px; font-weight: 800; letter-spacing: .02em; }
.thumb .cdur { right: 8px; bottom: 8px; }
.favtip { right: 40px !important; min-height: 24px !important; }
.thumb:has(.favtip) .crank { opacity: 0; transition: opacity .1s; }
@container (max-width: 200px) {
  .thumb .chip, .thumb .addbtn { height: 22px; min-width: 22px; font-size: 11px; padding: 0 6px; }
  .thumb .addbtn { width: 22px; padding: 0; right: 6px; top: 6px; } .thumb .addbtn svg { width: 14px; height: 14px; }
  .thumb .crank { left: 6px; top: 6px; } .thumb .chd { left: 6px; bottom: 6px; } .thumb .cdur { right: 6px; bottom: 6px; }
  .favtip { right: 34px !important; top: 6px !important; }
}
/* round 43: on phones the site fills the screen: no preview frame, wider posters, tighter gap between the two columns */
@media (max-width: 700px) {
  body { padding-inline: 0; }
  .frame { border: 0; border-radius: 0; }
  .switch { margin-inline: 12px; }
}
@container (max-width: 560px) {
  .page { padding-inline: 14px; }
  .livestrip, .foot { padding-inline: 14px; }
  .grid { column-gap: 8px; }
}
.favtip { max-width: calc(100% - 46px) !important; font-size: 12px !important; line-height: 1.25 !important; }
.hsecs { display: flex; flex-direction: column; }
.hs[hidden] { display: none; }
.ordl { display: grid; gap: 0; margin: 4px 0 18px; max-width: 460px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--surface); }
.ordr { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; border-top: 1px solid var(--line); }
.ordr:first-child { border-top: 0; }
.ordn { font-weight: 600; font-size: 14.5px; }
.ordb { display: inline-flex; align-items: center; gap: 4px; }
.ordbtn { width: 32px; height: 32px; border: 0; background: none; border-radius: 8px; color: var(--muted); display: inline-grid; place-items: center; cursor: pointer; padding: 0; }
.ordbtn:hover { background: var(--surface-2); color: var(--fg); }
.ordbtn svg { width: 18px; height: 18px; transform: none; } .ordbtn.up svg { transform: rotate(180deg); }
.ordb .sw { margin-left: 8px; }

/* round 50: models, channels, search, up next, continue watching */
#contgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@container (max-width: 760px) { #contgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } #entgrid, #srgrid, #wlgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.thumb .prog { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,.35); z-index: 2; border-radius: 0 0 8px 8px; overflow: hidden; }
.thumb .prog i { display: block; height: 100%; background: #fff; }
.msearch { display: flex; align-items: center; gap: 8px; background: var(--surface-2); border-radius: 10px; padding: 0 12px; max-width: 420px; margin-bottom: 12px; }
.msearch input { flex: 1; min-width: 0; background: none; border: 0; padding: 11px 0; color: var(--fg); font-size: 14px; outline: 0; }
.az { display: flex; flex-wrap: wrap; gap: 2px 4px; margin-bottom: 18px; }
.az span { padding: 3px 7px; border-radius: 6px; font-size: 13px; font-weight: 600; color: var(--muted); cursor: pointer; } .az span:hover { color: var(--fg); } .az span.on { background: var(--accent); color: var(--accent-fg); }
.models { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px 12px; }
@container (max-width: 900px) { .models { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@container (max-width: 560px) { .models { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 8px; } }
.mdl { display: grid; gap: 4px; justify-items: center; text-align: center; min-width: 0; cursor: pointer; }
.mdl b { font-size: 13.5px; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mdl small { color: var(--muted); font-size: 12px; }
.av { width: 72px; height: 72px; border-radius: 50%; background: linear-gradient(160deg, var(--surface-2), var(--line)); display: grid; place-items: center; font-weight: 800; font-size: 18px; color: var(--fg); }
.av.big { width: 84px; height: 84px; font-size: 22px; flex: none; } .av.sq { border-radius: 14px; }
.mdl:hover .av { outline: 2px solid var(--fg); }
.entback { display: inline-block; color: var(--muted); font-size: 14px; cursor: pointer; margin-bottom: 14px; } .entback:hover { color: var(--fg); }
.enthead { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; }
.enthead h1 { font-size: 24px; margin: 0 0 6px; }
.stats { display: flex; gap: 18px; } .stats > div { display: grid; } .stats b { font-size: 16px; } .stats span { color: var(--muted); font-size: 12px; }
.didyou { margin: 0 0 14px; font-size: 14.5px; color: var(--muted); } .didyou a { color: var(--fg); font-weight: 700; text-decoration: underline; cursor: pointer; }
.noresults { display: grid; gap: 8px; padding: 18px 0 30px; } .noresults span { color: var(--muted); }
.noresults .chips2 { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.nextbox { margin-top: 22px; display: flex; align-items: center; justify-content: space-between; gap: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px 8px 8px; }
.nbl { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; cursor: pointer; color: inherit; }
.nbth { position: relative; width: 112px; flex: none; aspect-ratio: 16 / 9; border-radius: 8px; background: linear-gradient(160deg, #2a2a2d, #4a4a50); }
.nbt { display: grid; gap: 2px; min-width: 0; } .nbt .lab { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.nbt b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nbt small { color: var(--muted); font-size: 12px; }
.nbsw { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; cursor: pointer; flex: none; }
.nbsw .sw { position: relative; display: inline-flex; width: 36px; height: 20px; flex: none; } .nbsw .sw input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.nbsw .sw i { position: absolute; inset: 0; border-radius: 999px; background: var(--line); transition: background .15s; }
.nbsw .sw i::after { content: ""; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--bg); transition: transform .15s; }
.nbsw .sw input:checked + i { background: var(--accent); } .nbsw .sw input:checked + i::after { transform: translateX(16px); background: var(--accent-fg); }
@container (max-width: 560px) { .nextbox { flex-wrap: wrap; } .nbl { flex-basis: 100%; } .nbth { width: 96px; } .nbsw { margin-left: auto; padding: 0 4px 4px; } }
.pov { position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 5; display: flex; align-items: center; gap: 10px; background: rgba(0,0,0,.8); color: #fff; border-radius: 12px; padding: 8px 10px; }
.pcount { width: 34px; height: 34px; border-radius: 50%; border: 2px solid #fff; display: grid; place-items: center; font-size: 14px; flex: none; }
.ptxt { display: grid; min-width: 0; flex: 1; font-size: 11.5px; line-height: 1.3; } .ptxt b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pb2 { background: #fff; color: #111; border-radius: 8px; padding: 6px 10px; font-size: 12px; font-weight: 800; cursor: pointer; flex: none; } .pb2.gh { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.5); }
.like.iconly.on { color: var(--fg); background: var(--surface-2); }
/* stage 2 */
.cm { position: relative; padding-left: 36px; }
.cmcb { position: absolute; left: 0; top: 18px; display: grid; place-items: center; }
.cmcb input, .cmall input { width: 16px; height: 16px; accent-color: var(--fg); margin: 0; }
.cbulkrow { display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 4px 0 8px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.cmall { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); cursor: pointer; }
.cbulk { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; flex-wrap: wrap; } .cbulk b { font-size: 14px; margin-right: 4px; }
.lcheck { display: grid; gap: 10px; }
.lcrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.lcrow > div:first-child { display: grid; gap: 2px; min-width: 0; } .lcrow span#lcst { font-size: 13.5px; color: var(--muted); }
.lclist { display: grid; border-top: 1px solid var(--line); }
.lcitem { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.lcitem b { display: block; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lcitem small { color: var(--muted); font-size: 12.5px; }
.lcb { display: inline-flex; gap: 8px; flex: none; }
.irsum { font-size: 13.5px; color: var(--muted); background: var(--surface-2); border-radius: 8px; padding: 10px 12px; } .irsum b { color: var(--fg); }
.pbarw { height: 8px; border-radius: 99px; background: var(--surface-2); overflow: hidden; } .pbarw i { display: block; height: 100%; background: var(--fg); border-radius: 99px; transition: width .3s; }
.confirm2 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border: 1px solid var(--bad); border-radius: 8px; font-size: 13.5px; } .confirm2 > span:first-child { flex: 1 1 220px; }
.lnk2 { text-decoration: underline; cursor: pointer; }
.bchart { width: 100%; height: auto; display: block; } .bchart .gl { stroke: var(--line); stroke-width: 1; } .bchart .gt { fill: var(--muted); font-size: 11px; font-family: var(--body); } .bchart .bo { fill: var(--surface-2); stroke: var(--line); } .bchart .bt { fill: var(--fg); } .bchart text { fill: var(--muted); font-size: 11px; font-family: var(--body); }
.sg2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 14px; } @container (max-width: 760px) { .sg2 { grid-template-columns: minmax(0, 1fr); } }
.dev { display: grid; gap: 12px; align-content: start; } .dev > div { display: grid; grid-template-columns: 70px 1fr 40px; align-items: center; gap: 10px; font-size: 14px; } .dev span { color: var(--muted); } .dev b { text-align: right; } .dev i { display: block; height: 8px; border-radius: 99px; background: var(--fg); }
.cnt { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 14px; }
.autoh { font-size: 12.5px; color: var(--warn); margin-top: 4px; display: block; }
/* action boxes (posters, backup) */
.actbox { display: grid; gap: 14px; padding: 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); margin: 4px 0 14px; }
.achead { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.achead > div { display: grid; gap: 3px; min-width: 0; } .achead b { font-size: 15px; } .achead span:not(.st) { font-size: 13.5px; color: var(--muted); line-height: 1.45; }
.achead .st { flex: none; }
.abtns { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.abtns .btn { padding: 9px 14px; font-size: 14px; cursor: pointer; }
.abtns .btn.danger { margin-left: auto; }
.actbox .pbarw { margin: 0; background: var(--line); } .actbox .confirm2 { background: var(--surface); }
.actbox .cnote { margin: 0; } .actbox .st { background: var(--surface); }
@media (max-width: 560px) { .abtns { flex-direction: column; align-items: stretch; } .abtns .btn { text-align: center; } .abtns .btn.danger { margin-left: 0; } .achead { flex-direction: column-reverse; gap: 8px; } }
@container (max-width: 640px) { .abtns { flex-direction: column; align-items: stretch; } .abtns .btn { text-align: center; } .abtns .btn.danger { margin-left: 0; } .achead { flex-direction: column-reverse; gap: 8px; } }
/* analytics */
.anbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .anbar select { background: var(--surface); color: var(--fg); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font: inherit; font-size: 14px; }
.live { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; } .live i { width: 8px; height: 8px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 3px color-mix(in srgb, var(--good) 25%, transparent); }
.dev2 > div { grid-template-columns: minmax(90px, 150px) 1fr minmax(84px, auto); } .dev2 b { white-space: nowrap; } .dev2 em { font-style: normal; font-weight: 400; color: var(--muted); font-size: 12.5px; margin-left: 4px; } .dev2 i { min-width: 3px; }
.card2 > .stabs { margin-bottom: 4px; } .card2 > .stabs button { cursor: pointer; }
#a-stats .card2 { align-content: start; }
#a-stats .stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
@container (max-width: 860px) { #a-stats .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } #a-stats .stats .stat:last-child { grid-column: 1 / -1; } }
@container (max-width: 640px) { .dev2 > div { grid-template-columns: 1fr auto; gap: 5px 10px; } .dev2 > div i { grid-column: 1 / -1; grid-row: 2; } .anbar { width: 100%; justify-content: space-between; } }
@container (max-width: 640px) { #a-stats .stabs { flex-wrap: nowrap; gap: 0; } #a-stats .stabs button { padding: 9px 9px; font-size: 13.5px; white-space: nowrap; } }
#a-dash .stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); } #a-dash .two { align-items: start; }
@container (max-width: 640px) { #a-dash .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* model suggestions */
.vsec .links .sugbtn { color: var(--fg); font-size: 13.5px; font-weight: 600; border-bottom: 1px dashed var(--muted); padding-bottom: 1px; } .vsec .links .sugbtn:hover { text-decoration: none; border-bottom-style: solid; }
.nomod { color: var(--muted); font-size: 14px; }
.sugbox { margin-top: 10px; display: grid; gap: 6px; max-width: 460px; }
.sugf { display: flex; gap: 8px; } .sugf input { flex: 1 1 auto; min-width: 0; height: 40px; box-sizing: border-box; background: var(--surface); color: var(--fg); border: 1px solid var(--line); border-radius: 8px; padding: 0 12px; font: inherit; font-size: 16px; } .sugf .btn { height: 40px; padding: 0 16px; cursor: pointer; }
.sugmeta { display: grid; gap: 3px; } .sugmeta small { color: var(--muted); font-size: 12.5px; } .sugmeta .cnote { min-height: 18px; margin: 0; }
.sglist { display: grid; } .sgitem { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); } .sgitem:last-child { border-bottom: 0; }
.sgtxt { display: grid; gap: 3px; min-width: 0; } .sgtxt b { font-size: 15px; } .sgtxt small { color: var(--muted); font-size: 12.5px; line-height: 1.4; }
.sgb { display: inline-flex; gap: 8px; flex: none; flex-wrap: wrap; justify-content: flex-end; } .sgb .btn { cursor: pointer; }
.sgin { height: 36px; box-sizing: border-box; background: var(--bg); color: var(--fg); border: 1px solid var(--line); border-radius: 8px; padding: 0 10px; font: inherit; font-size: 15px; max-width: 260px; }
@container (max-width: 640px) { .sgitem { flex-direction: column; align-items: stretch; } .sgb { justify-content: flex-start; } }
.mfield { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; text-transform: none; letter-spacing: 0; font-weight: 400; }
.mfield input { flex: 1 1 140px; min-width: 120px; border: 0; background: none; color: var(--fg); font: inherit; font-size: 15px; padding: 4px 2px; outline: none; }
.mchip { display: inline-flex; align-items: center; gap: 4px; background: var(--surface-2); border-radius: 99px; padding: 3px 4px 3px 10px; font-size: 14px; color: var(--fg); } .mchip button { border: 0; background: none; color: var(--muted); font-size: 16px; line-height: 1; width: 22px; height: 22px; border-radius: 50%; cursor: pointer; } .mchip button:hover { background: var(--line); color: var(--fg); }
.stabs .badge { margin-left: 4px; }
.sgtxt .st { justify-self: start; } .mfield input::-webkit-calendar-picker-indicator { display: none !important; }
/* content sources */
.srclist { display: grid; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.srcrow { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--line); cursor: pointer; background: var(--surface); } .srcrow:last-child { border-bottom: 0; } .srcrow:hover { background: var(--surface-2); } .srcrow.sel { background: var(--accent-soft); }
.srcmain { display: grid; gap: 2px; min-width: 0; } .srcmain b { font-size: 15px; } .srcmain small { color: var(--muted); font-size: 12.5px; line-height: 1.4; }
.srcmain-tag { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); border: 1px solid var(--line); border-radius: 99px; padding: 1px 7px; margin-left: 6px; vertical-align: 1px; }
.swph { width: 44px; }
.srcdetail { display: grid; gap: 14px; border-top: 1px solid var(--line); padding-top: 16px; margin-top: 4px; }
.srchead { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .srchead h2 { margin: 0; } .srchead .sub { font-size: 13px; color: var(--muted); }
.checks { display: grid; gap: 6px; } .chk { display: flex; gap: 8px; font-size: 14px; align-items: flex-start; } .chk i { font-style: normal; width: 16px; flex: none; text-align: center; font-weight: 700; } .chk.ok i { color: var(--good); } .chk.todo { color: var(--muted); }
.srcdetail .pills { align-items: center; } .srcdetail .cnote { margin: 0; }
@container (max-width: 640px) { .srcrow { grid-template-columns: minmax(0, 1fr) auto; } .srcrow .st { grid-column: 1; justify-self: start; } .srcrow .sw, .srcrow .swph { grid-column: 2; grid-row: 1; } .srchead { flex-direction: column-reverse; gap: 6px; } }
em.api { font-style: normal; font-family: ui-monospace, Menlo, monospace; font-size: 11.5px; font-weight: 400; color: var(--muted); background: var(--surface-2); border-radius: 4px; padding: 1px 5px; margin-left: 4px; text-transform: none; letter-spacing: 0; }
.sgh { font: 700 15px var(--display); margin: 8px 0 0; padding-top: 14px; border-top: 1px solid var(--line); }
.field em.api { justify-self: start; margin-left: 0; } #ep13 { height: 90px; }
.rdots { position: absolute; left: 50%; bottom: 7px; transform: translateX(-50%); display: flex; gap: 4px; z-index: 3; } .rdots i { width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,.45); } .rdots i.on { background: #fff; }
.pv { display: none !important; }
/* import page */
details.ig { border-top: 1px solid var(--line); } details.ig > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0; } details.ig > summary::-webkit-details-marker { display: none; }
details.ig > summary::after { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); margin: 0 4px 3px 4px; flex: none; transition: transform .15s; } details.ig[open] > summary::after { transform: rotate(-135deg); margin-bottom: -3px; }
.igt { font: 700 16px var(--display); } .igs { margin-left: auto; font-size: 13px; color: var(--muted); text-align: right; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.igb { display: grid; gap: 14px; padding: 2px 0 16px; }
@container (max-width: 640px) { .igs { display: none; } }
.impauto { padding-top: 0; }
.fl { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; } .field .fl em.api { margin-left: 0; }
.testrow { display: flex; align-items: center; gap: 10px; min-height: 34px; } .tnote { font-size: 13px; color: var(--muted); visibility: hidden; padding: 5px 10px; border-radius: 8px; background: var(--surface-2); white-space: nowrap; } .tnote.show { visibility: visible; } .tnote.ok { color: var(--good); }
.impfoot { display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding-top: 16px; border-top: 1px solid var(--line); margin-top: 4px; } .impfoot .unsaved { min-width: 0; flex: 1; justify-content: flex-start; } .impfoot .btn { flex: none; }
#eptest { white-space: nowrap; flex: none; } .tnote { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.entdesc { color: var(--muted); font-size: 15px; line-height: 1.6; max-width: 70ch; margin: 0 0 28px; }
.impres { display: grid; gap: 3px; padding: 11px 14px; border-radius: 8px; font-size: 14px; background: var(--surface-2); margin-bottom: 4px; } .impres b { font-size: 14px; } .impres span { color: var(--muted); font-size: 13px; line-height: 1.45; } .impres.ok b { color: var(--good); } .impres.bad b { color: var(--bad); }
.testrow .unsaved { min-width: 0; } #medit .impfoot { border-top: 0; padding-top: 4px; margin: 0; }
#me1 { height: 84px; }
#logtable td:first-child { white-space: nowrap; }
.entfacts { margin: 0 0 8px; font-size: 14.5px; font-weight: 600; color: var(--fg); }
.adfoot { margin-top: 0; border-top: 0; padding-top: 6px; }
/* footer: left aligned brand, parents notice, RTA badge */
.rtabox { display: none; }
@container (max-width: 640px) {
  .fbrand { justify-items: start !important; text-align: left !important; } .fbrand p { text-align: left !important; }
  .rtabox { display: grid; gap: 6px; margin-top: 16px; padding: 14px 16px; border: 1px solid var(--muted); border-radius: 14px; text-align: left; }
  .rtabox b { display: flex; align-items: center; gap: 8px; font-size: 14.5px; color: var(--fg); } .rtabox svg { width: 18px; height: 18px; flex: none; }
  .rtabox span { font-size: 13.5px; line-height: 1.55; color: var(--fg); opacity: .92; }
}
.fbottom .fnote .rta { display: flex !important; justify-content: flex-start; width: 100%; height: auto; border: 0; margin: 12px 0 0; color: var(--fg); opacity: .8; } .fbottom .fnote .rta svg { display: block; width: 92px; height: auto; margin: 0; }
.fbottom .fnote .rta[hidden] { display: none; }
.fbottom .fnote .fcopy { display: block; margin-top: 12px; color: var(--muted); }
/* parents notice: phone in the brand block, desktop next to the 18+ note */
.rtabox.rtad { display: none; }
.rtabox.rtam { display: none; }
@container (min-width: 641px) {
  .fbottom { grid-template-columns: minmax(0, 1fr) minmax(0, 460px); align-items: start; gap: 12px 40px; }
  .fbottom .fnote { grid-column: 1; grid-row: 1; }
  .fbottom .fcopy { grid-column: 1; grid-row: 2; }
  .rtabox.rtad { display: grid; grid-column: 2; grid-row: 1 / span 2; gap: 6px; padding: 14px 16px; border: 1px solid var(--muted); border-radius: 14px; text-align: left; }
  .rtabox.rtad b { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--fg); } .rtabox.rtad svg { width: 17px; height: 17px; flex: none; }
  .rtabox.rtad span { font-size: 13px; line-height: 1.55; color: var(--fg); opacity: .92; }
}
@container (max-width: 640px) { .rtabox.rtam { display: grid; } }
/* parents notice: calmer look */
.rtabox.rtam, .rtabox.rtad { border: 1px solid var(--line) !important; background: color-mix(in srgb, var(--fg) 3%, transparent); border-radius: 12px !important; padding: 12px 14px !important; gap: 4px !important; }
.rtabox.rtam b, .rtabox.rtad b { font-size: 13px !important; font-weight: 650; gap: 7px !important; color: var(--fg); } .rtabox.rtam svg, .rtabox.rtad svg { width: 15px !important; height: 15px !important; color: var(--muted); }
.rtabox.rtam span, .rtabox.rtad span { font-size: 12.5px !important; line-height: 1.55 !important; color: var(--muted) !important; opacity: 1 !important; }
/* parents notice: almost no frame */
.rtabox.rtam, .rtabox.rtad { border: 0 !important; background: none !important; border-radius: 0 !important; padding: 0 !important; }
.rtabox.rtam { margin-top: 14px !important; }
@container (min-width: 641px) { .rtabox.rtad { align-self: start; padding-left: 20px !important; border-left: 1px solid var(--line) !important; } }
/* footer: parents notice under the menu on the phone, 18+ line removed */
@container (max-width: 640px) { .fbottom .rtabox.rtam { margin: 0 0 12px !important; } .fbottom { gap: 0; } }
.fbottom .fnote .a18s { margin-top: 0; }
@container (max-width: 640px) { .fbottom .fnote .fcopy, .fbottom > .fcopy { margin-top: 8px; display: block; } }
/* phone: Parents notice a little stronger (pearl line, brighter text) */
@container (max-width: 640px) {
  .fbottom .rtabox.rtam { padding: 2px 0 !important; border-left: 0 !important; margin: 4px 0 16px !important; gap: 5px !important; }
  .fbottom .rtabox.rtam b { font-size: 13.5px !important; color: var(--fg) !important; } .fbottom .rtabox.rtam svg { color: var(--fg) !important; }
  .fbottom .rtabox.rtam span { font-size: 13px !important; color: color-mix(in srgb, var(--fg) 82%, transparent) !important; }
}
/* logo: Fuq + HD box */
.logo { display: inline-flex; align-items: center; gap: .12em; line-height: 1; }
.logo i { font-style: normal; background: var(--fg); color: var(--bg); font-size: .78em; letter-spacing: -.01em; line-height: 1; padding: .13em .22em .11em; border-radius: .2em; display: inline-block; }
.aside a.logo, .allogo { display: inline-flex !important; }
.logo small { margin-left: .5em; align-self: center; }
.aside a.logo, .allogo { width: fit-content; justify-self: start; }
.logo small { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
/* logo: spaced caps + HD capsule */
.logo { font-family: var(--display); font-weight: 600; text-transform: uppercase; letter-spacing: .16em; gap: .5em; font-size: 22px; line-height: 1; }
.logo i { background: none; color: var(--fg); border: 1.6px solid currentColor; border-radius: 99px; font-size: .62em; font-weight: 800; letter-spacing: .08em; padding: .34em .78em .3em .86em; margin: 0; }
.logo small { letter-spacing: .1em; font-weight: 700; margin-left: .2em; }
.fbrand .logo { font-size: 24px; } .aside a.logo { font-size: 18px; } .allogo { font-size: 20px; }
@container (max-width: 640px) { .fbrand .logo { font-size: 22px; } }
/* header and admin logo: spaced caps with a dot; footer keeps the HD capsule */
.logo.lg2 { gap: .24em; font-weight: 600; letter-spacing: .08em; }
.lg2 u { width: .2em; height: .2em; border-radius: 50%; background: var(--acc2, #c9a24a); text-decoration: none; display: inline-block; flex: none; }
.lg2 b { font-weight: 800; letter-spacing: .08em; }
.lg2 small { margin-left: .3em; }
.fbrand .logo { font-weight: 800; letter-spacing: -.04em; text-transform: none; gap: .3em; font-size: 26px; }
.fbrand .logo i { letter-spacing: .04em; font-size: .56em; padding: .3em .7em .26em; }
@container (max-width: 640px) { .fbrand .logo { font-size: 24px; } }
/* footer uses the header logo */
.fbrand .logo.lg2 { font-size: 22px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; gap: .24em; }
@container (max-width: 640px) { .fbrand .logo.lg2 { font-size: 22px; } }
.logo .lgsvg { height: 1em; width: auto; display: block; overflow: visible; } .logo.lg2 { text-transform: none; }
.logo.lg2 .lgsvg { height: 17px; }
.fbrand .logo.lg2 .lgsvg { height: 17px; } .aside a.logo .lgsvg { height: 14px; } .allogo .lgsvg { height: 16px; }

/* pagination: a prev button, the page numbers, a next button */
.pager { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 26px 0 8px; }
.pager .pgb { display: inline-flex; align-items: center; gap: 3px; height: 32px; padding: 0 14px 0 8px; border: 0; border-radius: 999px; background: color-mix(in srgb, var(--fg) 6%, transparent); color: var(--fg); font-size: 13.5px; font-weight: 500; text-decoration: none; transition: background .12s; }
.pager .pgb.next { padding: 0 8px 0 14px; }
.pager a.pgb:hover { background: color-mix(in srgb, var(--fg) 12%, transparent); }
.pager .pgb svg { width: 15px; height: 15px; flex: none; opacity: .65; }
.pager .pgb.off { opacity: .35; }
.pager .pgs { min-width: 52px; text-align: center; font-size: 13.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
@media (max-width: 380px) { .pager { gap: 8px; } }

/* sample banners fill the width they are given */
.card .adslot, .stick .adslot { justify-items: stretch; }
.stick .adslot .ad { border-radius: 0; border-inline: 0; }

@media (prefers-reduced-motion: reduce) { a.pbtn[href="/random"] svg, #latshuf svg { transition: none; } }
/* search: a calm focus state and a drop-down that belongs to the bar */
.dbar { border-radius: 12px; }
.dsearch:focus-within .dbar { background: var(--surface); border-color: var(--line); box-shadow: 0 0 0 3px color-mix(in srgb, var(--fg) 8%, transparent); }
.ddrop { top: calc(100% + 8px); border-radius: 12px; padding: 14px 16px; box-shadow: 0 14px 34px rgba(0, 0, 0, .14); }
.ddrop h4 { margin-bottom: 8px; }
@container (max-width: 640px) { .top.sopen .dsearch { margin: 4px 0 2px; } .top.sopen .ddrop { top: calc(100% + 6px); } }

/* round: forms never zoom a phone, plain buttons like the panel, the refresh icons turn */
@media (pointer: coarse) { input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=submit]):not([type=button]), select, textarea { font-size: 16px !important; } }
.chk { align-items: flex-start; } .chk input { flex: none; margin: 3px 0 0; } .chk span { min-width: 0; line-height: 1.5; }
.lbtn { background: none; border: 0; padding: 0; margin: 0; font: inherit; font-size: 13.5px; font-weight: 650; color: var(--fg); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; line-height: 1.3; }
.lbtn:hover { text-decoration-thickness: 2px; } .lbtn.danger { color: var(--bad); }
.savewrap { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.anote::before { content: none !important; } .anote { font-size: 13.5px; font-weight: 600; } .anote.ok { color: var(--good); } .anote.bad { color: var(--bad); }
.pbtn.plain, .lacts .pbtn { width: 42px; height: 40px; border-radius: 10px; }
.pbtn svg { width: 20px; height: 20px; }
a.pbtn[href="/random"] svg, #latshuf svg { transition: transform .45s ease; }
a.pbtn[href="/random"]:hover svg, #latshuf:hover svg { transform: rotate(180deg); }

.anote:empty { display: none; }

/* search box: how many videos the site has, as plain muted text after a thin divider */
.dbar .dcount { margin-left: auto; margin-right: 14px; padding-left: 14px; border-left: 1px solid var(--line); font-size: 12.5px; line-height: 1.2; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; flex: none; }
.dbar .dcount b { color: var(--fg); font-weight: 650; }
.dsearch:focus-within .dcount, .dbar:has(input:not(:placeholder-shown)) .dcount { display: none; }
@media (max-width: 760px) { .dbar .dcount { display: none; } }
.like.danger { color: var(--bad); } .like.danger:hover { background: color-mix(in srgb, var(--bad) 12%, transparent); }