/* ==========================================================================
   GTASDB.org — unified stylesheet
   Theme variables live in :root below. Change these to reskin the whole site.
   (Future: swap this :root block per theme.)
   ========================================================================== */
:root {
  --bg:#151619; --panel:#191b1e; --surface:#1f2124; --surface-2:#26282c;
  --border:#353840; --border-soft:#25282e;
  --text:#e5e6ea; --text-dim:#979aa1; --text-faint:#63666d;
  --accent:#4a90d0; --gold:#dca02f; --green:#6aa033; --purple:#8079de;
  --up:#5b9dd6; --down:#c96a4a;
  --radius:6px; --radius-card:10px;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--text); font-family:var(--font); font-size:14px; line-height:1.55; -webkit-font-smoothing:antialiased; }
a { color:var(--accent); text-decoration:none; cursor:pointer; }
a:hover { text-decoration:underline; }
input, select { font-family:var(--font); }


/* ---------------- VIDEO PAGE ---------------- */

  
  
  
  .wrap { max-width:960px; margin:0 auto; padding:22px 22px 80px; }
  
  

  .breadcrumb { font-size:12px; color:var(--text-faint); margin-bottom:12px; display:flex; gap:6px; align-items:center; }
  .breadcrumb .sep { opacity:.5; }
  .breadcrumb .cur { color:var(--text-dim); }

  .player { background:#0d1119; border:1px solid var(--border); border-radius:var(--radius-card); aspect-ratio:16/9; display:flex; align-items:center; justify-content:center; position:relative; }
  /* theater mode: player breaks out wider than the content column */
  /* 100vw includes the vertical scrollbar width, so the -50vw breakout overshoots
     by a few px and creates a horizontal scrollbar — clip it here. */
  body.theater { overflow-x:hidden; }
  body.theater .playerband { background:#000; margin-left:calc(-50vw + 50%); margin-right:calc(-50vw + 50%); padding:0; display:flex; justify-content:center; }
  body.theater .player { max-width:1500px; width:100%; border-radius:0; border-left:none; border-right:none; max-height:82vh; }
  .playercontrols { display:flex; justify-content:flex-end; margin-top:6px; }
  .theaterbtn { font-size:12px; color:var(--text-dim); background:none; border:none; cursor:pointer; display:inline-flex; align-items:center; gap:5px; font-family:var(--font); }
  .theaterbtn:hover { color:var(--text); }
  .play-btn { width:56px; height:56px; border-radius:50%; background:rgba(255,255,255,.13); display:flex; align-items:center; justify-content:center; font-size:22px; color:#fff; }
  .duration { position:absolute; bottom:9px; right:11px; font-size:11px; color:rgba(255,255,255,.7); background:rgba(0,0,0,.45); padding:2px 7px; border-radius:5px; }

  .titlerow { display:flex; justify-content:space-between; align-items:flex-start; gap:28px; margin-top:8px; }
  .titlecol { flex:1; min-width:0; }
  h1 { font-size:23px; font-weight:600; margin:0 0 11px; letter-spacing:-.01em; }
  .titlecol h1 { margin:0 0 9px; line-height:1.3; }
  h1 .game { font-weight:400; color:var(--text-dim); font-size:15px; display:inline-block; white-space:nowrap; }
  h1 .game a { color:var(--text-dim); }
  h1 .game a:hover { color:var(--text); text-decoration:underline; }

  /* metadata stacked block — all filterable fields */
  .metablock { font-size:14px; line-height:1.5; }
  .metablock .row { display:flex; gap:14px; margin-bottom:2px; }
  .metablock .row:last-child { margin-bottom:0; }
  .metablock .row.pair { gap:0; }
  .metablock .seg { display:flex; gap:14px; }
  .metablock .seg.right { margin-left:28px; }
  .metablock .k { color:var(--text-faint); min-width:78px; flex-shrink:0; }
  .metablock .seg.right .k { min-width:44px; }
  .metablock .v { color:var(--text); }
  .metablock .guest { color:var(--text-faint); font-size:12px; }

  /* right action cluster */
  .cluster { flex-shrink:0; width:250px; }
  .crow-top { display:flex; align-items:center; justify-content:flex-end; gap:14px; }
  .crow-mid { display:flex; align-items:center; justify-content:flex-end; gap:14px; margin-top:8px; }
  .starrow { display:flex; align-items:center; gap:1px; user-select:none; }
  .zero-target { width:16px; height:20px; display:flex; align-items:center; justify-content:center; color:var(--text-faint); cursor:pointer; font-size:12px; border-radius:3px; }
  .zero-target:hover, .zero-target.armed { color:var(--down); background:rgba(201,106,74,.14); }
  .star { position:relative; width:17px; height:17px; cursor:pointer; display:inline-block; }
  .star .bg { position:absolute; left:0; top:0; color:var(--border); font-size:17px; line-height:17px; }
  .star .fill { position:absolute; left:0; top:0; overflow:hidden; color:var(--gold); font-size:17px; line-height:17px; white-space:nowrap; width:0; }
  .star.preview .fill { color:#bd8828; }
  .avg-line { display:flex; align-items:baseline; gap:5px; }
  .avg-num { font-size:26px; font-weight:600; line-height:1; }
  .avg-of { font-size:12px; color:var(--text-faint); }
  .avg-sub { font-size:11px; color:var(--text-faint); margin-top:8px; text-align:right; }
  .yr-readout { font-size:11px; color:var(--text-faint); margin-top:4px; height:14px; text-align:right; }

  .clusteractions { margin-top:14px; display:flex; flex-direction:column; gap:11px; align-items:flex-end; }
  .vote { display:inline-flex; align-items:center; gap:14px; }
  .thumb { cursor:pointer; color:var(--text-dim); display:inline-flex; align-items:center; gap:5px; }
  .thumb:hover { color:var(--text); }
  .thumb.up.on { color:var(--up); }
  .thumb.down.on { color:var(--down); }
  .thumb .ic { font-size:15px; }
  .thumb .cnt { font-size:12px; }
  .act { display:inline-flex; align-items:center; gap:6px; color:var(--text-dim); cursor:pointer; background:none; border:none; font-family:var(--font); font-size:13px; padding:0; }
  .act:hover { color:var(--text); }
  .act .ic { font-size:15px; line-height:1; }
  .fav.on { color:var(--green); }

  .dd { position:relative; }
  .dd-menu { display:none; position:absolute; top:calc(100% + 5px); right:0; z-index:10; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius); min-width:190px; padding:4px; box-shadow:0 8px 22px rgba(0,0,0,.45); }
  .dd.open .dd-menu { display:block; }
  .dd-item { display:flex; justify-content:space-between; padding:7px 9px; border-radius:5px; font-size:12px; cursor:pointer; color:var(--text); text-align:left; }
  .dd-item:hover { background:var(--surface); }
  .dd-item .sz { color:var(--text-faint); }

  /* description dropdown */
  .descwrap { margin-top:10px; border:1px solid var(--border-soft); border-radius:var(--radius); }
  .deschead { display:flex; justify-content:space-between; align-items:center; padding:9px 12px; cursor:pointer; font-size:13px; color:var(--text-dim); }
  .deschead:hover { color:var(--text); }
  .descbody { display:none; padding:0 12px 12px; font-size:13px; color:var(--text-dim); line-height:1.6; white-space:pre-wrap; }
  .descwrap.open .descbody { display:block; }

  /* mirror links — plain text */
  .mirrors { margin-top:10px; display:flex; gap:16px; flex-wrap:wrap; align-items:center; font-size:13px; }
  .mirror { color:var(--accent); cursor:pointer; display:inline-flex; align-items:center; gap:5px; }
  .mirror:hover { text-decoration:underline; }

  .split { display:grid; grid-template-columns:1fr 224px; gap:26px; margin-top:28px; align-items:start; }
  @media (max-width:760px){ .split { grid-template-columns:1fr; } }

  .sectitle { font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-faint); margin:0 0 10px; padding:12px 0; display:flex; justify-content:space-between; align-items:center; }
  .sectitle .toggle { cursor:pointer; color:var(--text-faint); font-size:12px; text-transform:none; letter-spacing:0; }
  .sectitle .toggle:hover { color:var(--text-dim); }
  .sidecard:first-child .sectitle { padding-top:12px; }

  .csec { border-top:1px solid var(--border-soft); }
  .csec:first-child { border-top:none; }
  .chead { display:flex; align-items:center; justify-content:space-between; padding:12px 2px; cursor:pointer; }
  .chead h2 { font-size:15px; font-weight:600; margin:0; }
  .chead .ct { color:var(--text-faint); font-weight:400; font-size:12px; margin-left:6px; }
  .chead .chev { color:var(--text-faint); font-size:15px; }
  .cbody { padding:2px 2px 10px; }

  .subtabs { display:flex; gap:16px; margin-bottom:14px; font-size:13px; }
  .subtab { color:var(--text-faint); cursor:pointer; padding-bottom:4px; border-bottom:2px solid transparent; margin-bottom:-1px; }
  .subtab.active { color:var(--text); border-bottom-color:var(--accent); }
  .subpanel { display:none; }
  .subpanel.active { display:block; }

  .write-link { font-size:13px; color:var(--accent); cursor:pointer; margin-bottom:14px; display:inline-block; }
  .composer { display:none; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-card); padding:13px; margin-bottom:16px; }
  .composer.open { display:block; }
  .composer textarea { width:100%; min-height:80px; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius); color:var(--text); font-family:var(--font); font-size:13px; line-height:1.5; padding:9px 11px; resize:vertical; }
  .composer textarea:focus { outline:none; border-color:var(--accent); }
  .composer .crow { display:flex; justify-content:space-between; align-items:center; margin-top:9px; }
  .pubbtn { font-size:12px; background:var(--accent); color:#fff; border:none; border-radius:var(--radius); padding:6px 12px; cursor:pointer; }

  .review { display:flex; gap:11px; padding:13px 0; border-top:1px solid var(--border-soft); }
  .review:first-of-type { border-top:none; }
  .avatar { width:32px; height:32px; border-radius:50%; background:var(--surface-2); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:600; color:var(--text-dim); flex-shrink:0; }
  .who { font-size:12px; }
  .who .name { font-weight:600; color:var(--text); font-size:13px; }
  .verified { background:rgba(106,160,51,.2); color:#a0cf68; font-size:10px; padding:1px 5px; border-radius:4px; margin-left:4px; }
  .who .score { color:var(--gold); font-size:12px; margin-left:6px; }
  .rbody { font-size:13px; color:var(--text-dim); line-height:1.5; margin-top:3px; white-space:pre-line; }
  .rfoot { font-size:11px; color:var(--text-faint); margin-top:5px; display:flex; gap:12px; }
  .rfoot span { cursor:pointer; }
  .rfoot span:hover { color:var(--text-dim); }
  .edited { color:var(--text-faint); font-size:10px; font-style:italic; margin-left:4px; }
  .showall { font-size:12px; color:var(--accent); cursor:pointer; margin-top:10px; display:inline-block; }

  .dist-row { display:flex; align-items:center; gap:9px; font-size:11px; color:var(--text-faint); margin-bottom:4px; }
  .dist-row .n { width:14px; text-align:right; }
  .bar { flex:1; height:6px; background:var(--surface); border-radius:3px; overflow:hidden; }
  .bar > span { display:block; height:100%; background:var(--green); }

  .sidecard { margin-bottom:22px; }
  .sidebody.collapsed { display:none; }
  .award { display:flex; align-items:center; gap:9px; padding:8px 0; border-top:1px solid var(--border-soft); }
  .award:first-of-type { border-top:none; }
  .medal { width:26px; height:26px; border-radius:6px; background:rgba(220,160,47,.15); color:var(--gold); display:flex; align-items:center; justify-content:center; font-size:14px; flex-shrink:0; }
  .award .at { font-size:12px; line-height:1.3; }
  .award .ad { font-size:10px; color:var(--text-faint); }
  .plrow { padding:8px 0; border-top:1px solid var(--border-soft); font-size:12px; }
  .plrow:first-of-type { border-top:none; }
  .plrow .by { color:var(--text-faint); font-size:10px; display:block; margin-top:1px; }
  .sidestats { padding:12px 0; margin-bottom:6px; }
  .statline { font-size:12px; color:var(--text-dim); padding:3px 0; display:flex; justify-content:space-between; }
  .statline .sv { color:var(--text); }

/* ---------------- BROWSE PAGE ---------------- */

  
  
  
  .wrap { max-width:1200px; margin:0 auto; padding:22px 22px 80px; }
  
  
  

  .breadcrumb { font-size:12px; color:var(--text-faint); margin-bottom:14px; display:flex; gap:6px; align-items:center; }
  .breadcrumb .sep { opacity:.5; }
  .breadcrumb .cur { color:var(--text-dim); }

  .pagehead { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:16px; }
  h1 { font-size:24px; font-weight:600; margin:0; letter-spacing:-.01em; }
  .count { font-size:13px; color:var(--text-faint); }

  /* search + controls bar */
  .controls { display:flex; gap:10px; align-items:center; margin-bottom:14px; }
  .searchbox { flex:1; position:relative; }
  .searchbox input { width:100%; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); color:var(--text); font-size:14px; padding:9px 12px 9px 34px; }
  .searchbox input::placeholder { color:var(--text-faint); }
  .searchbox input:focus { outline:none; border-color:var(--accent); }
  .searchbox .si { position:absolute; left:11px; top:50%; transform:translateY(-50%); color:var(--text-faint); font-size:14px; }
  .cbtn { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); color:var(--text-dim); font-size:13px; padding:9px 13px; cursor:pointer; display:inline-flex; align-items:center; gap:7px; font-family:var(--font); }
  .cbtn:hover { color:var(--text); border-color:var(--text-faint); }
  .cbtn.on { color:var(--text); border-color:var(--accent); }
  .cbtn .badge { background:var(--accent); color:#fff; font-size:11px; border-radius:9px; padding:0 6px; }
  .sortsel { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); color:var(--text); font-size:13px; padding:9px 11px; cursor:pointer; }
  .sortsel:focus { outline:none; border-color:var(--accent); }

  /* filter panel */
  .fpanel { display:none; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-card); padding:18px; margin-bottom:16px; }
  .fpanel.open { display:block; }
  .fgrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:20px; }
  .fgroup-title { font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-faint); margin-bottom:10px; display:flex; align-items:center; gap:7px; }
  .dot { width:6px; height:6px; border-radius:50%; }
  .dot.aries { background:var(--text-faint); }
  .dot.blaze { background:var(--purple); }
  .checks { display:grid; grid-template-columns:1fr 1fr; gap:6px 10px; }
  .chk { display:flex; align-items:center; gap:6px; cursor:pointer; color:var(--text-dim); font-size:12px; }
  .chk:hover { color:var(--text); }
  .chk input { accent-color:var(--accent); width:13px; height:13px; margin:0; }
  .fselect { width:100%; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius); color:var(--text); font-size:13px; padding:7px 9px; margin-bottom:7px; cursor:pointer; }
  .fselect:focus { outline:none; border-color:var(--accent); }
  .rating-range { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--text-dim); }
  .rating-range input[type=range] { flex:1; accent-color:var(--purple); }
  .fpanel-foot { display:flex; justify-content:flex-end; gap:14px; margin-top:16px; padding-top:14px; border-top:1px solid var(--border-soft); }
  .clearfilters { font-size:13px; color:var(--text-dim); cursor:pointer; }
  .clearfilters:hover { color:var(--text); }

  .activefilters { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:16px; }
  .afilter { font-size:12px; background:var(--surface-2); color:var(--text-dim); border-radius:var(--radius); padding:3px 8px 3px 9px; display:inline-flex; align-items:center; gap:6px; }
  .afilter .fdot { width:5px; height:5px; border-radius:50%; }
  .afilter .x { cursor:pointer; color:var(--text-faint); }
  .afilter .x:hover { color:var(--text); }

  /* video grid */
  .vgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:16px; }
  @media (max-width:620px){ .vgrid { grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); } }

  .card { cursor:pointer; }
  .card .thumb { width:100%; aspect-ratio:16/9; border-radius:var(--radius); background:#0d1119; position:relative; overflow:hidden; border:1px solid var(--border); display:flex; align-items:center; justify-content:center; }
  .card .thumb .tt { font-size:11px; color:var(--text-faint); text-align:center; padding:4px; }
  .card .thumb .dur { position:absolute; bottom:5px; right:5px; font-size:10px; color:rgba(255,255,255,.8); background:rgba(0,0,0,.55); padding:1px 5px; border-radius:4px; }
  .card .thumb .rb { position:absolute; top:5px; right:5px; font-size:10px; font-weight:600; color:var(--gold); background:rgba(0,0,0,.6); padding:1px 6px; border-radius:4px; display:inline-flex; align-items:center; gap:3px; }
  .card .thumb .rb.unr { color:var(--text-faint); }
  .card:hover .vtitle { color:var(--accent); }
  .vtitle { font-size:13px; font-weight:600; color:var(--text); margin-top:8px; line-height:1.35; }
  .vmeta { font-size:11px; color:var(--text-faint); margin-top:3px; }
  .vstunters { font-size:11px; color:var(--text-dim); margin-top:3px; line-height:1.4; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
  .vtags { display:flex; gap:4px; margin-top:6px; flex-wrap:wrap; }
  .vtag { font-size:9px; padding:1px 6px; border-radius:4px; }
  .vtag-type { background:rgba(106,160,51,.16); color:#a0cf68; }
  .vtag-map { background:rgba(128,121,222,.16); color:#aca6f0; }

  .pagination { display:flex; gap:5px; justify-content:center; margin-top:28px; font-size:13px; }
  .pg { padding:5px 10px; border-radius:var(--radius); color:var(--text-dim); cursor:pointer; }
  .pg:hover { background:var(--surface); color:var(--text); }
  .pg.active { background:var(--accent); color:#fff; }

/* ---------------- HOMEPAGE ---------------- */

  
  
  
  .wrap { width:100%; max-width:2000px; margin:0 auto; padding:20px clamp(16px,4vw,56px) 60px; }
  
  

  .layout { display:grid; grid-template-columns:210px 1fr 270px; gap:38px; align-items:start; }
  @media (max-width:1080px){ .layout { grid-template-columns:180px 1fr; } .rightrail { display:none; } }
  @media (max-width:820px){ .layout { grid-template-columns:1fr; } .leftrail { display:none; } }

  /* ---- CENTER ---- */
  .logo { text-align:center; padding:18px 0 6px; }
  .logo-img { height:104px; width:auto; display:inline-block; }
  .logo .mark { font-size:40px; font-weight:800; letter-spacing:-.02em; background:linear-gradient(180deg,#cfd6e2,#8a93a3); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .logo .mark .accent { color:var(--accent); -webkit-text-fill-color:var(--accent); }
  .logo .sub { font-size:12px; color:var(--text-faint); letter-spacing:.22em; text-transform:uppercase; margin-top:2px; }
  .logo .placeholder-note { font-size:10px; color:var(--text-faint); margin-top:6px; font-style:italic; }

  .pillars { display:flex; gap:22px; justify-content:center; align-items:center; margin-top:30px; flex-wrap:wrap; }
  .pillar { cursor:pointer; text-align:center; color:var(--text); font-weight:700; transition:opacity .12s; }
  .pillar:hover { color:var(--accent); text-decoration:none; }
  .pillar .gl { height:72px; width:auto; display:block; }
  .pillar:hover .gl { opacity:.75; }
  .pillar.vi .gl { height:54px; }   /* vi.svg fills its box; smaller so its glyph matches the padded PNG logos */
  .pillar.vc .gl { height:54px; }   /* vc.png also fills its box vertically — bring it in line */
  .pillar .pt { font-size:40px; letter-spacing:.01em; white-space:nowrap; }
  .pillar-sep { color:var(--text-faint); font-size:30px; font-weight:300; align-self:center; }
  .all-link { text-align:center; margin-top:18px; }
  .all-link a { font-size:14px; color:var(--text-dim); }
  .all-link a:hover { color:var(--accent); }
  .logo-note-pillars { text-align:center; font-size:10px; color:var(--text-faint); font-style:italic; margin-top:12px; }

  .searchwrap { margin:24px auto 0; max-width:560px; position:relative; }
  .searchwrap input { width:100%; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); color:var(--text); font-size:15px; padding:11px 14px 11px 40px; font-family:var(--font); }
  .searchwrap input::placeholder { color:var(--text-faint); }
  .searchwrap input:focus { outline:none; border-color:var(--accent); }
  .searchwrap .si { position:absolute; left:13px; top:50%; transform:translateY(-50%); color:var(--text-faint); font-size:15px; }

  .feedhead { display:flex; align-items:baseline; justify-content:space-between; margin:36px 0 14px; }
  .feedhead h2 { font-size:16px; font-weight:600; margin:0; }
  .feedhead a { font-size:12px; color:var(--text-dim); }

  .feedgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:16px; }
  @media (max-width:620px){ .feedgrid { grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); } }
  .card { cursor:pointer; }
  .card .thumb { width:100%; aspect-ratio:16/9; border-radius:var(--radius); background:#0d1119; position:relative; border:1px solid var(--border); display:flex; align-items:center; justify-content:center; overflow:hidden; }
  .card .thumb .tt { font-size:11px; color:var(--text-faint); text-align:center; padding:4px; }
  .card .thumb .dur { position:absolute; bottom:5px; right:5px; font-size:10px; color:rgba(255,255,255,.8); background:rgba(0,0,0,.55); padding:1px 5px; border-radius:4px; }
  .card:hover .vtitle { color:var(--accent); }
  .vtitle { font-size:13px; font-weight:600; margin-top:7px; line-height:1.35; }
  .vmeta { font-size:11px; color:var(--text-faint); margin-top:2px; }
  .vstunters { font-size:11px; color:var(--text-dim); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

  /* ---- RAILS (no boxes) ---- */
  .railsec { margin-bottom:26px; }
  .railtitle { font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-faint); margin:0 0 10px; }
  .reslist { display:flex; flex-direction:column; gap:7px; }
  .reslink { font-size:13px; color:var(--text-dim); cursor:pointer; }
  .reslink:hover { color:var(--accent); }
  .reslink.tentative { color:var(--text-faint); font-style:italic; }

  .otd { display:flex; gap:9px; padding:8px 0; border-top:1px solid var(--border-soft); cursor:pointer; }
  .otd:first-of-type { border-top:none; }
  .otd .th { width:52px; height:30px; border-radius:4px; background:#0d1119; border:1px solid var(--border); flex-shrink:0; }
  .otd .ot { font-size:12px; line-height:1.3; }
  .otd .ot:hover { color:var(--accent); }
  .otd .oy { font-size:10px; color:var(--text-faint); }

  .chatbox { display:flex; flex-direction:column; height:200px; }
  .chatlog { flex:1; overflow-y:auto; font-size:12px; display:flex; flex-direction:column; gap:6px; margin-bottom:8px; }
  .cmsg .cu { font-weight:600; color:var(--text-dim); }
  .cmsg .cu.verified { color:#a0cf68; }
  .cmsg .ct { color:var(--text); }
  .chatinput { display:flex; gap:6px; }
  .chatinput input { flex:1; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius); color:var(--text); font-size:12px; padding:6px 9px; font-family:var(--font); }
  .chatinput input:focus { outline:none; border-color:var(--accent); }
  .chatinput button { background:var(--accent); color:#fff; border:none; border-radius:var(--radius); font-size:12px; padding:0 11px; cursor:pointer; }

  .visitbar { font-size:11px; color:var(--text-faint); margin-top:18px; line-height:1.8; }
  .visitbar strong { color:var(--text-dim); }

  .foot { text-align:center; font-size:12.5px; color:var(--text-dim); margin-top:44px; padding-top:16px; border-top:1px solid var(--border-soft); line-height:1.7; }
  .foot a { color:var(--text-dim); }

/* ---------------- BROWSE FILTER PANEL (split Aries/Blaze) ---------------- */
.fsplit { display:grid; grid-template-columns:1fr 1fr; gap:26px; }
@media (max-width:680px){ .fsplit { grid-template-columns:1fr; } }
.fhalf { position:relative; }
.fsplit .fhalf:first-child { border-right:1px solid var(--border-soft); padding-right:26px; }
@media (max-width:680px){ .fsplit .fhalf:first-child { border-right:none; padding-right:0; border-bottom:1px solid var(--border-soft); padding-bottom:18px; } }
.fhalf-title { font-size:12px; font-weight:600; color:var(--text); margin-bottom:14px; display:flex; align-items:center; gap:8px; }
.fhalf-title .fhalf-sub { font-size:10px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-faint); font-weight:400; }
.daterow { display:flex; gap:7px; }
.fselect.sm { flex:1; margin-bottom:0; }
.applybtn { background:var(--accent); color:#fff; border:none; border-radius:var(--radius); padding:7px 16px; font-size:13px; cursor:pointer; font-family:var(--font); }
.applybtn:hover { filter:brightness(1.1); }
.clearchip { font-size:12px; color:var(--text-faint); margin-left:4px; }
.clearchip:hover { color:var(--text); }

/* ---------------- STUNTER PAGE ---------------- */
  .stunter-head { display:flex; gap:18px; align-items:flex-start; margin-bottom:20px; padding-bottom:20px; border-bottom:1px solid var(--border-soft); }
  .stunter-av { width:60px; height:60px; border-radius:50%; background:var(--surface-2); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:20px; font-weight:700; color:var(--text-dim); flex-shrink:0; letter-spacing:.02em; }
  .stunter-id { flex:1; min-width:0; }
  .stunter-name { font-size:26px; font-weight:600; margin:0; letter-spacing:-.01em; }
  .stunter-aka { font-size:12.5px; color:var(--text-dim); margin-top:4px; }
  .stunter-country { font-size:12.5px; color:var(--text-dim); margin-top:6px; display:flex; align-items:center; gap:7px; }
  .stunter-country .fi { width:22px; height:16px; border-radius:2px; box-shadow:0 0 0 1px rgba(255,255,255,.1); flex-shrink:0; }
  .stunter-stats { font-size:13px; color:var(--text-dim); margin-top:8px; display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
  .stunter-stats .dotsep { color:var(--text-faint); }
  .typebreak { display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
  .tb-tag { font-size:11px; color:var(--text-dim); background:var(--surface-2); border-radius:var(--radius); padding:3px 8px; }
  .tb-tag .tb-n { color:var(--text-faint); margin-left:5px; }

  .collabs { display:flex; gap:12px; align-items:baseline; flex-wrap:wrap; margin-bottom:24px; font-size:13px; }
  .collabs-label { font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-faint); flex-shrink:0; padding-top:1px; }
  .collabs-list { color:var(--text-dim); display:flex; flex-wrap:wrap; gap:8px; align-items:baseline; }
  .collabs-list .collab { display:inline-flex; align-items:baseline; }
  .collabs-list a { color:var(--accent); }
  .collabs-list .cc { font-size:11px; color:var(--text-faint); margin-left:4px; }
  .collabs-sep { color:var(--text-faint); }

  .filmo-head { align-items:center; }
  .filmo-title { display:flex; align-items:baseline; gap:10px; }
  .filmo-title h2 { font-size:16px; font-weight:600; margin:0; }
  .filmo-title .count { font-size:12px; color:var(--text-faint); }

/* ---------------- STUNTERS DIRECTORY ---------------- */
  .stfilters { display:flex; gap:10px; align-items:center; margin-bottom:18px; flex-wrap:wrap; }
  .stfilters .searchbox { flex:1; min-width:200px; }
  .stgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:10px; }
  @media (max-width:560px){ .stgrid { grid-template-columns:1fr; } }
  .sd-card { display:flex; align-items:center; gap:12px; padding:11px 13px; border:1px solid var(--border-soft); border-radius:var(--radius); background:var(--surface); cursor:pointer; transition:border-color .12s; }
  .sd-card:hover { border-color:var(--text-faint); text-decoration:none; }
  .sd-av { width:38px; height:38px; border-radius:50%; background:var(--surface-2); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; color:var(--text-dim); flex-shrink:0; }
  .sd-info { min-width:0; }
  .sd-name { font-size:14px; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .sd-card:hover .sd-name { color:var(--accent); }
  .sd-meta { font-size:11px; color:var(--text-faint); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .st-noresult { font-size:13px; margin-top:14px; }

/* ---------------- LOCAL PLAYBACK + STUNTER COMBOBOX ---------------- */
  video.player { width:100%; object-fit:contain; background:#0d1119; }
  .localnote { font-size:12px; color:var(--green); margin-top:6px; display:flex; align-items:center; gap:6px; }
  .dd-item .ondisk { font-size:10px; color:var(--green); background:rgba(106,160,51,.15); padding:1px 5px; border-radius:4px; margin-left:6px; }

  .combo { position:relative; }
  .combo-input { width:100%; margin-bottom:0; }
  .combo-clear { position:absolute; right:9px; top:8px; color:var(--text-faint); cursor:pointer; font-size:15px; line-height:1; display:none; }
  .combo-input:not(:placeholder-shown) + .combo-clear { display:block; }
  .combo-list { display:none; position:absolute; z-index:20; left:0; right:0; top:calc(100% + 3px); max-height:240px; overflow-y:auto; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius); box-shadow:0 8px 22px rgba(0,0,0,.45); }
  .combo-list.open { display:block; }
  .combo-opt { padding:7px 10px; font-size:13px; color:var(--text-dim); cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:10px; }
  .combo-opt:hover { background:var(--surface); color:var(--text); }
  .combo-opt .combo-c { font-size:11px; color:var(--text-faint); }

/* ---------------- SITE TREE (left rail) ---------------- */
  .tree, .tree ul { list-style:none; margin:0; padding:0; }
  .tree > li { margin-bottom:0; }
  .tree ul { margin:0 0 2px 6px; padding-left:11px; border-left:1px solid var(--border-soft); }
  .tree a, .tree > li > span, .tree li span { display:block; font-size:12.5px; padding:1px 0; color:var(--text-dim); }
  .tree a { color:var(--text-dim); }
  .tree a:hover { color:var(--accent); text-decoration:none; }
  .tree .tnode { color:var(--text-faint); font-weight:600; font-size:10px; text-transform:uppercase; letter-spacing:.05em; margin-top:5px; padding-bottom:0; }
  .tree .soon { color:var(--text-faint); font-style:italic; cursor:default; }

/* ---------------- MIRROR SOURCE LABELS (video page) ---------------- */
  .dd-menu { min-width:220px; }
  .dd-item .dd-text { white-space:nowrap; }
  .dd-item.mirror .dd-text { color:var(--text-dim); }
  .all-sep { color:var(--text-faint); margin:0 4px; }
  .mirror .src { font-size:10px; color:var(--text-faint); margin-left:2px; }

/* ---------------- INNER-PAGE LEFT RAIL (tree only) ---------------- */
  /* Content is centered on the page; the tree hangs off into the left margin
     so it doesn't push the content off-center. It hides when the margin is
     too narrow to hold it. */
  .pagelayout { position:relative; width:100%; max-width:min(1700px, calc(100vw - 440px)); margin:0 auto; }
  .pagemain { min-width:0; }
  .pagerail { position:absolute; top:0; left:0; transform:translateX(calc(-100% - 24px)); width:176px; }
  .pagerail .sitetree { margin-top:2px; }
  @media (max-width:1400px){ .pagerail { display:none; } .pagelayout { max-width:94vw; } }
  /* theater mode: content goes full width so the player can break out */
  body.theater .pagelayout { max-width:none; }
  body.theater .pagerail { display:none; }

/* ---------------- TREE: collapsible carets ---------------- */
  .tree li.has-children > .tnode { cursor:pointer; position:relative; padding-left:13px; }
  .tree li.has-children > .tnode::before { content:'\25B8'; position:absolute; left:1px; top:50%; transform:translateY(-50%); font-size:9px; color:var(--text-faint); }
  .tree li.has-children:not(.collapsed) > .tnode::before { content:'\25BE'; }
  .tree li.collapsed > ul { display:none; }

/* ---------------- GAME-SCOPE LOGO HEADER (browse page) ---------------- */
  .scope-logo-wrap { text-align:center; margin:6px 0 18px; }
  .scope-logo-slot { height:88px; display:flex; align-items:center; justify-content:center; }
  .scope-logo { max-height:84px; width:auto; display:block; }
  .scope-logo.tight { max-height:62px; }   /* vc / vi fill their own box */
  .scope-count { font-size:12px; color:var(--text-faint); margin-top:10px; }
  .foot-attr { font-size:12.5px; color:var(--text-faint); }

/* ---------------- VIDEO THUMBNAILS ---------------- */
  .card .thumb .thumb-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
  .player-poster { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:inherit; }
  .player .play-btn { position:relative; z-index:2; }

/* ---------------- CARD HOVER: underline only the title ---------------- */
  .card, .card:hover { text-decoration:none; }
  .card:hover .vtitle { color:var(--accent); text-decoration:underline; }

/* keep the fallback title from stretching the 16:9 thumb box */
  .card .thumb .tt { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }

/* ---- bulletproof 16:9 thumb box (padding-ratio, immune to image size) ---- */
  .card .thumb { aspect-ratio:auto; width:100%; height:0; padding-top:56.25%; position:relative; overflow:hidden; display:block; }
  .card .thumb .thumb-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
  .card .thumb .tt { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }

/* let cards shrink to equal columns; wrap text instead of widening the track */
  .card { min-width:0; }
  .card .vtitle, .card .vmeta, .card .vstunters { overflow-wrap:anywhere; }

/* thumbnail image sits above the fallback title (hides it once loaded); badges above the image */
  .card .thumb .thumb-img { z-index:1; }
  .card .thumb .tt { z-index:0; }
  .card .thumb .dur, .card .thumb .rb { z-index:2; }

/* ---------------- UNIFIED PROFILE: role tabs ---------------- */
  .profile-tabs { display:flex; gap:2px; margin:10px 0 14px; border-bottom:1px solid var(--border-soft); }
  .ptab { padding:7px 15px; font-size:13px; font-weight:600; color:var(--text-dim); border-bottom:2px solid transparent; margin-bottom:-1px; }
  .ptab:hover { color:var(--text); text-decoration:none; }
  .ptab.active { color:var(--text); border-bottom-color:var(--accent); }
  .ptab.disabled { color:var(--text-faint); font-style:italic; font-weight:400; cursor:default; }
  .ptab .ptab-n { font-size:11px; color:var(--text-faint); margin-left:5px; font-weight:400; }
  .profile-summary { margin-top:4px; }

/* ---------------- TREE FOOTER (version history line) ---------------- */
  .tree-foot { display:block; margin-top:8px; font-size:11px; color:var(--text-faint); }
  .tree-foot:hover { color:var(--accent); text-decoration:none; }

/* ---------------- RESOURCES PAGE ---------------- */
  .res-intro { color:var(--text-dim); font-size:13px; margin:0 0 22px; max-width:640px; line-height:1.5; }
  .res-sections { display:flex; flex-direction:column; gap:26px; }
  .res-block > h2 { font-size:15px; margin:0 0 4px; }
  .res-empty { color:var(--text-faint); font-size:12.5px; margin:0 0 10px; }
  .res-cards { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  @media (max-width:620px){ .res-cards { grid-template-columns:1fr; } }
  .res-card { display:block; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-card); padding:13px 15px; }
  a.res-card:hover { border-color:var(--text-faint); text-decoration:none; }
  .res-card.placeholder { opacity:.5; border-style:dashed; }
  .res-card-t { font-weight:600; font-size:13.5px; color:var(--text); }
  .res-card-d { font-size:12px; color:var(--text-dim); margin-top:3px; }
  .res-links { display:flex; flex-direction:column; gap:6px; }
  .res-links .reslink { font-size:13px; }

/* ---------------- VERSION HISTORY ---------------- */
  .changelog { display:flex; flex-direction:column; gap:20px; max-width:660px; }
  .cl-entry { border-left:2px solid var(--border); padding-left:15px; }
  .cl-head { display:flex; align-items:baseline; gap:10px; margin-bottom:6px; }
  .cl-ver { font-weight:700; font-size:14px; color:var(--accent); }
  .cl-date { font-size:11px; color:var(--text-faint); text-transform:uppercase; letter-spacing:.05em; }
  .cl-items { margin:0; padding-left:18px; }
  .cl-items li { font-size:13px; color:var(--text-dim); margin:3px 0; line-height:1.45; }

/* ---------------- SONG / ARTIST avatar ---------------- */
  .sd-av-song { color:var(--accent); font-size:18px; }

/* ---------------- artist page: song(s) used, under a video card ---------------- */
  .vsongs { font-size:11.5px; color:var(--text-dim); margin-top:5px; line-height:1.35; display:flex; gap:5px; align-items:flex-start; overflow-wrap:anywhere; }
  .vsongs::before { content:"\266A"; color:var(--accent); flex-shrink:0; }

/* ---------------- VERSION MUSEUM (tree + embed viewer) ---------------- */
  .museum-tree { display:flex; flex-direction:column; gap:2px; }
  .mgroup { padding:8px 9px 2px; }
  .mgroup-label { font-size:12.5px; font-weight:700; color:var(--text); }
  .mgroup-year { font-size:10px; color:var(--text-faint); text-transform:uppercase; letter-spacing:.04em; margin-left:6px; }
  .mnode { text-align:left; background:transparent; border:1px solid transparent; border-radius:var(--radius); padding:6px 9px; cursor:pointer; color:var(--text-dim); font-family:var(--font); display:flex; flex-direction:column; gap:1px; width:100%; }
  .mnode.mchild { padding:5px 9px 5px 20px; font-size:12px; }
  .mnode:hover { background:var(--surface); color:var(--text); }
  .mnode.active { background:var(--surface-2); border-color:var(--border); color:var(--text); }
  .mnode-label { font-size:12.5px; font-weight:600; }
  .mnode-year { font-size:10px; color:var(--text-faint); text-transform:uppercase; letter-spacing:.04em; }
  .museum-view { width:100%; min-width:0; }
  .mpanel { display:none; }
  .mpanel.active { display:block; }
  .mpanel-head { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:8px; }
  .mpanel-title { font-size:15px; font-weight:700; }
  .mpanel-year { font-size:11px; color:var(--text-faint); text-transform:uppercase; letter-spacing:.05em; margin-left:6px; }
  .mframe-wrap { width:100%; height:68vh; min-height:480px; overflow:hidden; border:1px solid var(--border); border-radius:var(--radius-card); background:#fff; }
  .mframe { border:0; transform-origin:top left; background:#fff; display:block; }
  .mplaceholder { border:1px dashed var(--border); border-radius:var(--radius-card); padding:26px; color:var(--text-faint); font-size:13px; line-height:1.6; background:var(--surface); }
  .mplaceholder code { background:var(--surface-2); padding:1px 5px; border-radius:4px; color:var(--text-dim); }

/* ---------------- PLAYER SOURCE SWAP (local <-> archive.org) ---------------- */
  .pstage { position:relative; width:100%; }
  body.theater .pstage { max-width:1500px; width:100%; }
  .archiveframe { width:100%; aspect-ratio:16/9; border:0; background:#000; display:block; }
  body.theater .archiveframe { max-height:82vh; }
  .backtolocal { position:absolute; top:10px; left:10px; z-index:5; border:none; border-radius:6px;
                 padding:6px 11px; background:rgba(0,0,0,.6); color:#fff; font-size:12px;
                 font-family:var(--font); cursor:pointer; opacity:.85; }
  .backtolocal:hover { opacity:1; background:rgba(0,0,0,.8); }

/* ---------------- SEARCH RESULTS PAGE ---------------- */
  .searchhint { color:var(--text-faint); font-size:13px; margin-top:20px; }
  .searchsec { margin-top:26px; }
  .searchsec:first-of-type { margin-top:20px; }
  .searchsec-head { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:12px; border-bottom:1px solid var(--border-soft); padding-bottom:7px; }
  .searchsec-head h2 { font-size:15px; font-weight:600; margin:0; }
  .searchsec-head .ssn { font-size:12px; font-weight:400; color:var(--text-faint); margin-left:6px; }
  .searchsec-head .ssmore { font-size:12px; color:var(--accent); white-space:nowrap; margin-left:14px; }

/* ---------------- NUMBERED PAGINATION (Prev/Next on top, numbers below) ---------------- */
  .pagination { flex-direction:column; align-items:center; gap:12px; }
  .pg-top { display:flex; align-items:center; gap:14px; }
  .pg-count { font-size:12px; color:var(--text-faint); }
  .pg-nav { border:1px solid var(--border); }
  .pg-nav.disabled { opacity:.35; cursor:default; }
  .pg-nums { display:flex; flex-wrap:wrap; gap:5px; justify-content:center; max-width:640px; }
  .pg:hover { color:var(--text); background:var(--surface); }
  .pg.active { background:var(--accent); color:#fff; }
  .pg.active:hover { background:var(--accent); color:#fff; }
  .pg-ellipsis { padding:5px 4px; color:var(--text-faint); }
  .pg-per { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--text-faint); margin-top:2px; }
  .pg-per .sortsel { padding:5px 8px; }

/* clickable video type tags (inside card links) */
  .vtag-type { cursor:pointer; }
  .vtag-type:hover { background:rgba(106,160,51,.30); color:#c3e89a; }
  a.tb-tag { text-decoration:none; cursor:pointer; }
  a.tb-tag:hover { color:var(--text); border:0; background:var(--surface); box-shadow:inset 0 0 0 1px var(--accent); }

/* on-this-day rows are now real links */
  a.otd { text-decoration:none; color:inherit; }
  a.otd:hover .ot { color:var(--accent); }
  .otd-empty { font-size:12px; color:var(--text-faint); padding:8px 0; }

/* search-as-you-go 'Search' button on the controls row */
  .cbtn-go { background:var(--accent); border-color:var(--accent); color:#fff; }
  .cbtn-go:hover { color:#fff; opacity:.9; border-color:var(--accent); }

/* ---------------- ARTIST SONG RANKING (prose) ---------------- */
  .songrank { margin:2px 0 24px; }
  .songrank-label { font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-faint); margin-bottom:8px; }
  .songrank-row { display:flex; align-items:baseline; gap:10px; padding:5px 0; border-top:1px solid var(--border-soft); font-size:14px; }
  .songrank-row:first-of-type { border-top:none; }
  .songrank-pos { flex:0 0 78px; font-size:11px; color:var(--text-faint); text-transform:uppercase; letter-spacing:.03em; }
  .songrank-song { color:var(--accent); flex:1 1 auto; }
  .songrank-count { color:var(--text-faint); font-size:12px; white-space:nowrap; }

/* homepage: breathing room between the game logos and the search controls */
  .center .controls { margin-top:34px; }
/* on-this-day: real thumbnails fill the little 16:9 box */
  .otd .th { overflow:hidden; }
  .otd .th img { width:100%; height:100%; object-fit:cover; display:block; }

/* ---------------- SITE FOOTER WITH LIVE STATS ---------------- */
  .sitefoot { max-width:1600px; margin:48px auto 0; padding:20px 32px 40px; text-align:center;
              border-top:1px solid var(--border-soft); line-height:1.7; }
  .sitestats { display:flex; justify-content:center; flex-wrap:wrap; gap:8px 26px; margin-bottom:14px; }
  .sitestat { font-size:12px; color:var(--text-faint); }
  .sitestat strong { color:var(--accent); font-size:14px; margin-right:3px; }
  .sitefoot-line { font-size:12.5px; color:var(--text-dim); }
  .sitefoot-line a { color:var(--text-dim); }
  .sitefoot-line a:hover { color:var(--accent); }
  .sitefoot .foot-attr { font-size:12px; color:var(--text-faint); margin-top:4px; }

/* small view count under the player */
  .playercontrols .playviews { margin-right:auto; align-self:center; font-size:11px; color:var(--text-faint); }

/* ---------------- AUTH PAGES ---------------- */
  .authwrap { max-width:400px; margin:60px auto; }
  .auth-logo { display:block; text-align:center; margin-bottom:26px; }
  .auth-logo img { height:52px; }
  .authcard { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-card); padding:28px 26px; }
  .auth-h { font-size:20px; margin:0 0 18px; }
  .auth-label { display:block; font-size:12px; color:var(--text-dim); margin:14px 0 5px; }
  .auth-label:first-of-type { margin-top:0; }
  .auth-hint { color:var(--text-faint); font-weight:400; font-size:11px; }
  .auth-input { width:100%; box-sizing:border-box; background:var(--surface-2); border:1px solid var(--border);
                border-radius:var(--radius); color:var(--text); font-family:var(--font); font-size:14px; padding:10px 12px; }
  .auth-input:focus { outline:none; border-color:var(--accent); }
  textarea.auth-input { resize:vertical; }
  .auth-btn { width:100%; margin-top:20px; background:var(--accent); color:#fff; border:none;
              border-radius:var(--radius); padding:11px; font-size:14px; font-family:var(--font); cursor:pointer; }
  .auth-btn:hover { opacity:.92; }
  .auth-alt { text-align:center; font-size:13px; color:var(--text-dim); margin-top:18px; }
  .auth-alt a, .acct-links a { color:var(--accent); }
  .auth-errors { background:rgba(200,60,60,.12); border:1px solid rgba(200,60,60,.4); border-radius:var(--radius); padding:10px 12px; margin-bottom:16px; }
  .auth-error { font-size:12.5px; color:#e79a9a; }
  .auth-ok { background:rgba(106,160,51,.14); border:1px solid rgba(106,160,51,.4); border-radius:var(--radius); padding:9px 12px; margin-bottom:16px; font-size:13px; color:#a8d178; }

/* account settings */
  .acct-static { border:1px solid var(--border); border-radius:var(--radius-card); padding:6px 16px; margin-bottom:22px; max-width:520px; }
  .acct-row { display:flex; justify-content:space-between; padding:10px 0; border-top:1px solid var(--border-soft); font-size:13px; }
  .acct-row:first-child { border-top:none; }
  .acct-k { color:var(--text-faint); }
  .acct-form { max-width:520px; }
  .acct-claim { margin-top:20px; }

/* account box in the left rail */
  .acctbox { padding-bottom:6px; margin-bottom:16px; border-bottom:1px solid var(--border-soft); }
  .acct-me { display:flex; align-items:center; gap:9px; text-decoration:none; color:var(--text); margin-bottom:6px; }
  .acct-av { width:30px; height:30px; border-radius:50%; background:var(--accent); color:#fff; font-size:11px;
             display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  .acct-nm { font-size:13px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .acct-links { font-size:12px; }
  .acct-sep { color:var(--border); }
  .acct-cta { display:inline-block; padding:6px 14px; border-radius:var(--radius); background:var(--accent); color:#fff !important; text-decoration:none; font-size:12px; margin-right:6px; }
  .acct-cta:hover { opacity:.9; }
  .acct-cta.ghost { background:transparent; border:1px solid var(--border); color:var(--text-dim) !important; }
  .acct-cta.ghost:hover { color:var(--text) !important; border-color:var(--accent); }

/* ---------------- ONLINE PRESENCE ---------------- */
  .railcount { font-size:11px; color:var(--accent); font-weight:400; margin-left:4px; }
  .onlinelist { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
  .onlineuser { font-size:12px; color:var(--text); background:var(--surface-2); border:1px solid var(--border-soft);
                border-radius:20px; padding:3px 10px; }
  .onlineuser::before { content:""; display:inline-block; width:6px; height:6px; border-radius:50%;
                        background:#57c057; margin-right:6px; vertical-align:middle; }
  .onlineguest { font-size:11px; color:var(--text-faint); }
  .herenow { display:flex; align-items:center; gap:4px; flex-wrap:wrap; font-size:12px; color:var(--text-dim);
             margin:0 0 16px; }
  .herenow .hn-dot { width:7px; height:7px; border-radius:50%; background:#57c057; margin-right:5px; }
  .herenow .hn-u { color:var(--text); }

/* ---------------- AVATARS + USER PAGE ---------------- */
  img.acct-av { object-fit:cover; }
  .av-upload { display:flex; gap:16px; align-items:center; }
  .av-preview { width:72px; height:72px; border-radius:50%; object-fit:cover; flex-shrink:0;
                border:1px solid var(--border); }
  .av-initials { display:flex; align-items:center; justify-content:center; background:var(--accent);
                 color:#fff; font-size:22px; }
  .av-upload-r { flex:1; }

  .uphead { display:flex; gap:22px; align-items:center; margin:6px 0 22px; }
  .up-av { width:96px; height:96px; border-radius:50%; object-fit:cover; flex-shrink:0; border:1px solid var(--border); }
  .up-initials { display:flex; align-items:center; justify-content:center; background:var(--accent); color:#fff; font-size:34px; }
  .up-name { font-size:24px; margin:0; }
  .up-handle { font-size:13px; color:var(--text-faint); margin-top:3px; }
  .up-claimed { color:var(--accent); }
  .up-joined { font-size:12px; color:var(--text-faint); margin-top:4px; }
  .up-bio { font-size:13px; color:var(--text-dim); margin-top:8px; max-width:600px; }
  .up-counts { display:flex; gap:26px; padding:14px 0; border-top:1px solid var(--border-soft);
               border-bottom:1px solid var(--border-soft); margin-bottom:24px; }
  /* when the counts row sits directly under the profile tabs, the tabs' own
     bottom border already draws the line — drop the counts' top border so it's
     one line, not two. (Plain users with no tabs keep the top border.) */
  .profile-tabs + .up-counts { border-top:none; }
  .up-stat { font-size:12px; color:var(--text-faint); }
  .up-stat strong { color:var(--text); font-size:16px; margin-right:4px; }
  .up-section { margin-bottom:30px; }
  .up-section h2 { font-size:15px; margin:0 0 12px; }
  .up-empty { font-size:13px; color:var(--text-faint); }
  .up-rows { display:flex; flex-direction:column; }
  .up-row { display:flex; align-items:baseline; gap:12px; padding:9px 0; border-top:1px solid var(--border-soft);
            text-decoration:none; color:var(--text); }
  .up-row:first-child { border-top:none; }
  .up-row-t { color:var(--text); font-size:14px; flex:1; }
  a.up-row-t { color:var(--accent); }
  .up-row-meta { font-size:12px; color:var(--text-faint); }
  .up-score { font-size:12px; color:var(--accent); font-weight:600; white-space:nowrap; }
  .up-reviews { display:flex; flex-direction:column; gap:16px; }
  .up-review-body { font-size:13px; color:var(--text-dim); margin-top:5px; line-height:1.5; }
  a.onlineuser { text-decoration:none; }
  a.hn-u { text-decoration:none; }

/* ratings/reviews real-data bits */
  .composer-rate { font-size:12px; color:var(--text-dim); margin-bottom:8px; }
  .composer-rate span { color:var(--accent); }
  .loginprompt { font-size:13px; color:var(--text-dim); padding:8px 0 4px; }
  .loginprompt a { color:var(--accent); }
  .dist-row .dc { font-size:11px; color:var(--text-faint); min-width:22px; text-align:right; }
  .review .avatar img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
  .review .who a.name { color:var(--text); text-decoration:none; }
  .review .who a.name:hover { color:var(--accent); }
  .act.fav.on { border-color:var(--accent); color:var(--accent); }

/* ---------------- THREADED COMMENTS ---------------- */
  .commentform textarea { width:100%; box-sizing:border-box; background:var(--surface-2); border:1px solid var(--border);
    border-radius:var(--radius); color:var(--text); font-family:var(--font); font-size:13px; padding:9px 11px;
    min-height:64px; resize:vertical; }
  .commentform { margin-bottom:16px; }
  .replyform { display:none; margin:8px 0 4px; }
  .replyform.open { display:block; }
  .comment-node { border-top:1px solid var(--border-soft); padding-top:12px; margin-top:12px; }
  .comment-reply { border-top:none; margin-top:10px; padding-top:0; margin-left:0; padding-left:14px; border-left:2px solid var(--border-soft); }
  .comment-main { flex:1; min-width:0; }
  .comment-deleted { color:var(--text-faint); font-style:italic; }
  .reply-link { cursor:pointer; }
  .reply-link:hover { color:var(--accent); }
  .del-link { background:none; border:none; color:var(--text-faint); font-size:11px; font-family:var(--font);
              cursor:pointer; padding:0; }
  .del-link:hover { color:#d66; }

/* ---------------- USER PAGE ACTIVITY TABLE ---------------- */
  .act-table { border:1px solid var(--border); border-radius:var(--radius-card); overflow:hidden; }
  .act-head, .act-row { display:grid; grid-template-columns: minmax(220px, 1.2fr) 70px 2fr; gap:14px; align-items:center; }
  .act-head { padding:9px 14px; background:var(--surface); font-size:11px; text-transform:uppercase;
              letter-spacing:.05em; color:var(--text-faint); }
  .act-row { padding:10px 14px; border-top:1px solid var(--border-soft); }
  .act-video { display:flex; gap:10px; align-items:center; text-decoration:none; min-width:0; }
  .act-thumb { width:64px; height:36px; border-radius:4px; overflow:hidden; background:#0d1119; flex-shrink:0;
               border:1px solid var(--border-soft); }
  .act-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
  .act-vt { min-width:0; display:flex; flex-direction:column; }
  .act-title { color:var(--text); font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .act-video:hover .act-title { color:var(--accent); }
  .act-meta { font-size:11px; color:var(--text-faint); }
  .act-score { font-size:13px; color:var(--accent); font-weight:600; }
  .act-review { font-size:12.5px; color:var(--text-dim); line-height:1.45; white-space:pre-line; }
  .act-none { color:var(--text-faint); }
  @media (max-width:700px){
    .act-head { display:none; }
    .act-row { grid-template-columns:1fr 60px; }
    .act-review { grid-column:1 / -1; }
  }

/* ---------------- PLAYLISTS ---------------- */
  .pl-create { display:flex; gap:10px; align-items:center; margin-bottom:20px; max-width:520px; }
  .pl-create .auth-input { flex:1; }
  .pl-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:10px; }
  .pl-card { display:block; border:1px solid var(--border); border-radius:var(--radius-card); padding:14px 16px;
             text-decoration:none; background:var(--surface); }
  .pl-card:hover { border-color:var(--accent); }
  .pl-name { color:var(--text); font-size:14px; font-weight:600; }
  .pl-meta { color:var(--text-faint); font-size:12px; margin-top:4px; }
  .pl-private { font-size:10px; color:var(--text-faint); border:1px solid var(--border); border-radius:4px;
                padding:1px 6px; vertical-align:middle; font-weight:400; }
  .pl-owner { font-size:13px; color:var(--text-faint); margin:-8px 0 6px; }
  .pl-owner a { color:var(--accent); }
  .pl-desc { font-size:13px; color:var(--text-dim); max-width:640px; }
  .pl-settings { margin:10px 0 18px; font-size:13px; color:var(--text-dim); }
  .pl-settings summary { cursor:pointer; color:var(--text-faint); }
  .pl-settings-form { max-width:460px; margin-top:10px; }
  .pl-rows { display:flex; flex-direction:column; border:1px solid var(--border); border-radius:var(--radius-card); overflow:hidden; }
  .pl-row { display:flex; align-items:center; gap:12px; padding:9px 14px; border-top:1px solid var(--border-soft); }
  .pl-row:first-child { border-top:none; }
  .pl-pos { font-size:12px; color:var(--text-faint); min-width:20px; text-align:right; }
  .pl-row .act-video { flex:1; min-width:0; }
  .pl-actions { display:flex; gap:4px; }
  .pl-btn { background:none; border:1px solid var(--border); border-radius:5px; color:var(--text-dim);
            font-size:10px; width:24px; height:24px; cursor:pointer; }
  .pl-btn:hover { color:var(--text); border-color:var(--accent); }
  .pl-x { font-size:14px; line-height:1; }
  .pl-x:hover { color:#d66; border-color:#d66; }

/* the video-page picker dropdown */
  .pl-menu { min-width:240px; max-height:300px; overflow-y:auto; }
  .pl-loading { padding:10px 12px; font-size:12px; color:var(--text-faint); }
  .pl-opt { display:flex; align-items:center; gap:9px; padding:8px 12px; cursor:pointer; font-size:13px; }
  .pl-opt:hover { background:var(--surface); }
  .pl-check { width:16px; color:transparent; font-size:12px; }
  .pl-check.on { color:var(--accent); }
  .pl-opt-name { flex:1; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .pl-opt-n { font-size:11px; color:var(--text-faint); }
  .pl-newrow { display:flex; gap:6px; padding:8px 12px; border-top:1px solid var(--border-soft); }
  .pl-newrow input { flex:1; background:var(--surface-2); border:1px solid var(--border); border-radius:5px;
                     color:var(--text); font-family:var(--font); font-size:12px; padding:6px 9px; }
  .pl-newbtn { background:var(--accent); color:#fff; border:none; border-radius:5px; width:28px; cursor:pointer; }
  .pl-managelink { display:block; padding:8px 12px; font-size:12px; color:var(--accent); text-decoration:none;
                   border-top:1px solid var(--border-soft); }

/* ---------------- USER PAGE LAYOUT (main + playlists rail) ---------------- */
  .up-cols { display:grid; grid-template-columns: 1fr 250px; gap:34px; align-items:start; }
  @media (max-width:980px){ .up-cols { grid-template-columns:1fr; } }
  .up-main { min-width:0; }
  .up-rail { min-width:0; }
  .up-section h2 .ct { font-size:12px; color:var(--text-faint); font-weight:400; margin-left:6px; }

/* smaller favorites grid: ~5 across, capped 2 rows via pagination */
  .favgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:11px; }
  .favgrid .vtitle { font-size:12px; }
  .favgrid .vmeta { font-size:10.5px; }
  .fav-pager { display:flex; align-items:center; justify-content:center; gap:12px; margin-top:12px; }

/* playlists stacked vertically in the rail */
  .pl-stack { display:flex; flex-direction:column; gap:8px; }

/* edit-your-review link on your own review card */
  .edit-review { font-size:11px; color:var(--text-faint); cursor:pointer; margin-left:4px; }
  .edit-review:hover { color:var(--accent); }

/* ---------------- CLAIMS + REAL BADGE + AWARDS ---------------- */
  .realbadge { font-size:10px; color:#7cc96a; border:1px solid rgba(124,201,106,.45); border-radius:4px;
               padding:1px 6px; text-decoration:none; margin-left:2px; }
  .realbadge:hover { background:rgba(124,201,106,.12); }
  .ptab-badge { font-size:10px; color:#7cc96a; margin-left:5px; }
  .claimline { font-size:12.5px; color:var(--text-dim); margin:-6px 0 14px; }
  .claimline.muted { color:var(--text-faint); }
  .claim-link { background:none; border:none; color:var(--accent); font-family:var(--font); font-size:12.5px;
                cursor:pointer; padding:0; text-decoration:underline; }
  .up-alt { font-size:inherit; color:inherit; font-weight:inherit; }

/* user page adopts the stunter-head formula */
  .stunter-av.av-photo { overflow:hidden; padding:0; }
  .stunter-av.av-photo img { width:100%; height:100%; object-fit:cover; display:block; border-radius:inherit; }
  .realbadge.rb-lg { font-size:12px; vertical-align:middle; }
  .up-handle-line { font-size:12px; }

/* claimed unified header: bigger avatar */
  .up-av-lg { width:110px; height:110px; }
  .up-av-lg.up-initials { font-size:38px; }

/* claim request note box */
  .claimform { display:none; margin:0 0 16px; max-width:440px; }
  .claimform.open { display:block; }
  .claimform textarea { width:100%; box-sizing:border-box; background:var(--surface-2); border:1px solid var(--border);
    border-radius:var(--radius); color:var(--text); font-family:var(--font); font-size:12.5px; padding:8px 10px;
    min-height:56px; resize:vertical; margin-bottom:8px; }
  .reslink.soon { color:var(--text-faint); font-style:italic; cursor:default; }

/* peak online record */
  .peak-when { color:var(--text-faint); font-weight:400; }

/* homepage: New reviews rail */
.nr { display:block; padding:7px 0; border-bottom:1px solid var(--border-soft); }
.nr-head { display:flex; gap:8px; align-items:center; margin-bottom:4px; }
.nr:last-child { border-bottom:0; }
.nr-th { flex:none; }
.nr-th img { width:52px; height:29px; object-fit:cover; border-radius:4px; display:block; background:#000; }
.nr-b { min-width:0; flex:1; }
.nr-t { font-size:13px; font-weight:600; color:var(--text); display:block; line-height:1.3; }
.nr-t:hover { color:var(--accent); }
.nr-meta { font-size:11.5px; color:var(--text-faint); margin:1px 0 3px; }
.nr-u { color:var(--text-dim); }
.nr-u:hover { color:var(--accent); }
.nr-body { font-size:13px; color:var(--text-dim); line-height:1.45; white-space:pre-line; }
.nr-body.clamp { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.nr-more { font-size:11px; color:var(--accent); cursor:pointer; }
.nr-loadmore { margin-top:8px; width:100%; padding:6px; font-size:12px; color:var(--text-dim); background:none; border:1px solid var(--border); border-radius:6px; cursor:pointer; font-family:var(--font); }
.nr-loadmore:hover { color:var(--text); border-color:var(--text-dim); }

/* Batch 2: reactions, review comments, timestamps, notification bell */
.ago { font-size:11px; color:var(--text-faint); margin-left:8px; }
.act.ract.on { color:var(--accent); border-color:var(--accent); }
.rfoot { display:flex; gap:12px; margin-top:6px; }
.rbtn { font-size:12px; color:var(--text-faint); cursor:pointer; user-select:none; }
.rbtn:hover { color:var(--text-dim); }
.rbtn.on { color:var(--accent); }
.rcbox { display:none; margin-top:8px; padding-left:10px; border-left:2px solid var(--border); }
.rcbox.open { display:block; }
.rc-item { margin-bottom:7px; }
.rc-who { font-size:11.5px; color:var(--text-faint); display:flex; align-items:center; gap:6px; }
.rc-who a { color:var(--text-dim); font-weight:600; }
.rc-who a:hover { color:var(--accent); }
.rc-del { display:inline; }
.rc-del button { background:none; border:0; color:var(--text-faint); cursor:pointer; font-size:13px; padding:0 2px; }
.rc-del button:hover { color:var(--down,#e5534b); }
.rc-body { display:block; font-size:12.5px; color:var(--text-dim); line-height:1.45; white-space:pre-line; }
.rc-form { display:flex; gap:6px; margin-top:4px; }
.rc-in { flex:1; background:var(--surface); border:1px solid var(--border); border-radius:6px; color:var(--text); padding:5px 8px; font-family:var(--font); font-size:12.5px; }
.rc-send { padding:5px 10px; font-size:12px; background:none; border:1px solid var(--border); border-radius:6px; color:var(--text-dim); cursor:pointer; font-family:var(--font); }
.rc-send:hover { color:var(--text); border-color:var(--text-dim); }
.tc { color:var(--accent); cursor:pointer; text-decoration:underline dotted; }
.bell { cursor:pointer; position:relative; font-size:13px; }
.bellbadge { position:absolute; top:-6px; right:-10px; background:var(--accent); color:#fff; font-size:9px; font-weight:700; border-radius:8px; padding:1px 4px; }
.belldrop { display:none; margin-top:8px; background:var(--surface); border:1px solid var(--border); border-radius:8px; max-height:280px; overflow:auto; box-shadow:0 8px 24px rgba(0,0,0,.4); }
.belldrop.open { display:block; }
.notif-item { display:block; padding:8px 10px; font-size:12px; color:var(--text-dim); border-bottom:1px solid var(--border-soft); line-height:1.4; }
.notif-item:last-child { border-bottom:0; }
.notif-item:hover { background:var(--bg); color:var(--text); }
.notif-item.unseen { border-left:2px solid var(--accent); }
.notif-ago { display:block; font-size:10.5px; color:var(--text-faint); margin-top:2px; }
.notif-empty { padding:12px; font-size:12px; color:var(--text-faint); text-align:center; }

/* video like/dislike: compact horizontal pair between Download and stars */
.vreact { display:inline-flex; gap:4px; align-items:center; }
.vreact .act.ract { padding:4px 8px; font-size:12px; line-height:1; }

/* Batch 3a: follows + activity feed */
.fcount { font-size:12px; font-weight:400; color:var(--text-faint); margin-left:10px; vertical-align:middle; }
.followbtn { font-size:12px; font-family:var(--font); padding:4px 12px; margin-left:8px; vertical-align:middle;
  background:none; border:1px solid var(--border); border-radius:14px; color:var(--text-dim); cursor:pointer; text-decoration:none; display:inline-block; }
.followbtn:hover { color:var(--text); border-color:var(--text-dim); }
.followbtn.on { color:var(--accent); border-color:var(--accent); }
.feed-item { padding:8px 0; border-bottom:1px solid var(--border-soft); }
.feed-item:last-child { border-bottom:0; }
.feed-line { font-size:13px; color:var(--text-dim); }
.feed-line a { color:var(--text); font-weight:600; }
.feed-line a:hover { color:var(--accent); }
.feed-dim { color:var(--text-faint); }
.feed-body { display:block; font-size:12.5px; color:var(--text-faint); margin-top:3px; line-height:1.45; white-space:pre-line; }

/* Batch 3: follower/following popover + users page */
.fclick { cursor:pointer; }
.fclick:hover { color:var(--text-dim); }
.fmodal-wrap { display:none; position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:200; align-items:center; justify-content:center; }
.fmodal-wrap.open { display:flex; }
.fmodal { background:var(--surface); border:1px solid var(--border); border-radius:10px; width:min(340px, 92vw); max-height:70vh; display:flex; flex-direction:column; box-shadow:0 12px 40px rgba(0,0,0,.5); }
.fmodal-head { display:flex; justify-content:space-between; align-items:center; padding:10px 14px; border-bottom:1px solid var(--border-soft); font-size:13px; font-weight:600; color:var(--text); }
.fmodal-x { cursor:pointer; font-size:18px; color:var(--text-faint); line-height:1; }
.fmodal-x:hover { color:var(--text); }
.fmodal-list { overflow-y:auto; padding:4px 0; }
.fmodal-row { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:8px 14px; font-size:13px; color:var(--text); }
.fmodal-row:hover { background:var(--bg); color:var(--accent); }
.fmodal-kind { font-size:11px; color:var(--text-faint); }
.fmodal-empty { padding:16px; text-align:center; font-size:12.5px; color:var(--text-faint); }
.usearch { display:flex; gap:8px; margin-top:8px; max-width:380px; }
.ulist { display:flex; flex-direction:column; }
.urow { display:flex; gap:10px; align-items:center; padding:9px 4px; border-bottom:1px solid var(--border-soft); }
.urow:last-child { border-bottom:0; }
.urow:hover { background:var(--bg); }
.u-av { width:36px; height:36px; border-radius:50%; object-fit:cover; flex:none; }
.u-initials { display:flex; align-items:center; justify-content:center; background:var(--border); color:var(--text-dim); font-size:13px; font-weight:700; }
.u-name { display:block; font-size:13.5px; font-weight:600; color:var(--text); }
.u-meta { display:block; font-size:11.5px; color:var(--text-faint); margin-top:1px; }

/* activity feed: thumbnails + clamped bodies */
.feed-item { display:flex; gap:8px; }
.feed-th { flex:none; margin-top:2px; }
.feed-th img { width:46px; height:26px; object-fit:cover; border-radius:4px; display:block; background:#000; }
.feed-main { min-width:0; flex:1; }
.feed-body.clamp2 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.feed-more { font-size:11px; color:var(--accent); cursor:pointer; }

/* awards page */
.aw-sub { font-size:12.5px; color:var(--text-faint); margin:0 0 14px; }
.aw-jump { display:flex; flex-wrap:wrap; gap:6px 12px; margin-bottom:18px; font-size:12px; }
.aw-jump a { color:var(--text-dim); }
.aw-jump a:hover { color:var(--accent); }
.aw-sec { margin-bottom:26px; }
.aw-title { font-size:15px; margin:0 0 8px; color:var(--text); }
.aw-row { display:flex; align-items:center; gap:10px; padding:6px 6px; border-bottom:1px solid var(--border-soft); border-radius:6px; }
.aw-row:last-child { border-bottom:0; }
.aw-row:hover { background:var(--bg); }
.aw-row.hl { background:var(--bg); outline:1px solid var(--accent); }
.aw-rank { flex:none; width:34px; font-size:12.5px; font-weight:700; color:var(--text-faint); }
.aw-th { flex:none; }
.aw-th img { width:52px; height:29px; object-fit:cover; border-radius:4px; display:block; background:#000; }
.aw-vt { display:block; font-size:13px; font-weight:600; color:var(--text); }
.aw-meta { display:block; font-size:11px; color:var(--text-faint); }
.aw-body { min-width:0; flex:1; }
.aw-stat { flex:none; font-size:12.5px; color:var(--text-dim); }
.aw-n { color:var(--text-faint); font-size:11px; }
.award-link { text-decoration:none; }
.award-link:hover .at { color:var(--accent); }

/* user rating widget */
.urate { display:flex; align-items:center; gap:10px; margin-top:4px; font-size:12.5px; }
.urate-avg { color:var(--text-dim); }
.urate-n { color:var(--text-faint); font-size:11.5px; }
.urate-stars { display:inline-flex; cursor:pointer; }
.us { position:relative; font-size:15px; line-height:1; padding:0 1px; }
.us .us-bg { color:var(--border); }
.us .us-fill { position:absolute; left:1px; top:0; width:0; overflow:hidden; color:var(--accent); white-space:nowrap; }
.urate-read { color:var(--text-faint); font-size:11.5px; min-width:80px; }

/* composer header with explicit hide/show */
.composer-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.composer-head .ch-label { font-size:13px; color:var(--text); font-weight:600; }

/* toggles + edit act like buttons everywhere */
.toggle, .edit-review { cursor:pointer; user-select:none; }
.toggle:hover, .edit-review:hover { color:var(--text-dim); }
.who .toggle { font-size:11.5px; color:var(--text-faint); margin-left:8px; }