:root { --bg:#0a0a0f; --panel:#13131a; --raised:#1b1b24; --line:#24242f; --text:#f4f4f8; --soft:#c4c4d2; --mute:#8a8a9c; --accent:#7c5cff; --live:#ff3b5c; --blue:#3b82f6; --hdr:60px; }
* { box-sizing:border-box; }
html, body { margin:0; min-height:100%; }
body { background:var(--bg); color:var(--text); font:15px/1.45 system-ui,-apple-system,Segoe UI,sans-serif; overscroll-behavior-y:contain; }   /* a pull-down while scrolling at the top must not reload the page */
a { color:inherit; text-decoration:none; }
button { font:inherit; }
[hidden] { display:none !important; }

/* ---------- header + generic controls ---------- */
header { display:flex; align-items:center; gap:16px; padding:0 20px; height:var(--hdr); border-bottom:1px solid var(--line); background:var(--panel); position:sticky; top:0; z-index:20; }
header .logo { font-weight:800; font-size:20px; letter-spacing:-.5px; }
header .logo b { color:var(--accent); }
header nav { margin-left:auto; display:flex; gap:10px; align-items:center; }
.btn, button.btn { background:var(--accent); color:#fff; border:0; border-radius:10px; padding:9px 16px; font-weight:700; cursor:pointer; display:inline-block; text-align:center; }
.btn.ghost { background:transparent; border:1px solid var(--line); color:var(--text); }
.btn.danger { background:var(--live); }
.btn.small { padding:5px 10px; font-size:13px; border-radius:8px; }
.btn:disabled, .btn.disabled { opacity:.45; cursor:not-allowed; }
.btn.wide { width:100%; }
input[type=text], input[type=password], select { width:100%; padding:10px 12px; margin:6px 0; background:var(--bg); border:1px solid var(--line); border-radius:10px; color:var(--text); font:inherit; }
main { max-width:1100px; margin:0 auto; padding:16px; }
.mute { color:var(--mute); }
.err { color:#ff7b8f; min-height:20px; font-size:13px; }
.badge { background:var(--live); color:#fff; font-size:11px; font-weight:800; padding:2px 6px; border-radius:4px; }
.card { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:16px; }
code { background:var(--bg); padding:2px 6px; border-radius:4px; border:1px solid var(--line); word-break:break-all; }
.avatar { border-radius:50%; display:inline-flex; align-items:center; justify-content:center; color:#fff; font-weight:800; flex:none; }
h2 { margin:8px 0 12px; }

/* ---------- home ---------- */
.search { margin:0 0 12px; padding:12px 14px; }
.tabs { display:flex; gap:8px; overflow-x:auto; padding-bottom:6px; margin-bottom:10px; }
.tab { flex:none; background:var(--panel); border:1px solid var(--line); color:var(--text); border-radius:18px; padding:8px 16px; font-weight:700; cursor:pointer; white-space:nowrap; }
.tab.on { background:var(--accent); border-color:var(--accent); }
.tiles { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:12px; }
.tile { aspect-ratio:4/5; border-radius:14px; padding:10px; display:flex; flex-direction:column; justify-content:space-between; overflow:hidden; color:#fff; cursor:pointer; }
.tile .row1 { display:flex; justify-content:space-between; align-items:center; font-size:12px; font-weight:700; }
.tile .mid { display:flex; justify-content:center; }
.tile b { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tile small { color:#d6d6e6; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; }
.list { display:flex; flex-direction:column; gap:10px; max-width:640px; }
.item { display:flex; align-items:center; gap:12px; background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:12px; cursor:pointer; }
.item .grow { flex:1; min-width:0; }
.item.live { border-color:var(--live); } .item.box { border-color:var(--accent); }
.note { color:var(--mute); text-align:center; padding:28px 12px; line-height:1.6; }
.vsrow { display:flex; align-items:center; justify-content:space-between; text-align:center; width:100%; }
.vsrow > div { flex:1; }

.modalbox { max-width:400px; margin:50px auto; background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:0 0 20px; overflow:hidden; }
.modalbox .tabs2 { display:flex; border-bottom:1px solid var(--line); margin-bottom:16px; }
.modalbox .tabs2 button { flex:1; background:none; border:0; color:var(--mute); padding:14px; font-weight:800; font-size:16px; border-bottom:3px solid transparent; cursor:pointer; }
.modalbox .tabs2 button.on { color:var(--text); border-bottom-color:var(--accent); }
.modalbox .pad { padding:0 20px; }
.agree { display:flex; align-items:center; gap:12px; background:var(--bg); border:1px solid var(--line); border-radius:12px; padding:12px; margin:8px 0 12px; cursor:pointer; user-select:none; }
.agree.on { border-color:var(--accent); }
.agree .cb { width:26px; height:26px; border-radius:7px; border:2px solid var(--mute); display:flex; align-items:center; justify-content:center; font-weight:900; flex:none; }
.agree.on .cb { background:var(--accent); border-color:var(--accent); }

/* ---------- the phone-shaped stage (watch + studio) ---------- */
.stagewrap { display:flex; justify-content:center; gap:20px; align-items:flex-start; flex-wrap:wrap; }
.stage { position:relative; width:min(100vw, calc((100vh - var(--hdr) - 24px) * 9 / 16)); aspect-ratio:9/16; background:#000; border-radius:16px; overflow:hidden; container-type:inline-size; flex:none; }
.media, .fxlayer { position:absolute; inset:0; }
.fxlayer { pointer-events:none; overflow:hidden; z-index:6; }
.media video.vid, .media canvas { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:#000; }
.offline { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:var(--panel); color:var(--mute); font-size:16px; }
.topbar { position:absolute; top:10px; left:10px; right:10px; display:flex; align-items:center; gap:8px; z-index:8; }
.roundbtn { width:36px; height:36px; border-radius:50%; background:rgba(0,0,0,.45); color:#fff; display:flex; align-items:center; justify-content:center; font-size:22px; border:0; cursor:pointer; flex:none; }
.pill { background:rgba(0,0,0,.45); border-radius:20px; padding:4px 12px 4px 4px; display:flex; align-items:center; gap:8px; color:#fff; min-width:0; flex:1; }
.pill .t { min-width:0; } .pill b { display:block; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .pill small { color:#ddd; font-size:11px; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.livepill { background:var(--live); color:#fff; font-weight:800; font-size:12px; border-radius:14px; padding:5px 10px; white-space:nowrap; }
.livepill.off { background:rgba(0,0,0,.45); }
.ptitle { position:absolute; top:56px; left:14px; right:14px; z-index:7; color:#fff; font-weight:700; font-size:15px; text-shadow:0 1px 4px #000; pointer-events:none; }
.ptitle.withbox { right:136px; }
.boxslot { position:absolute; top:58px; right:10px; z-index:8; }
.col { position:absolute; right:10px; bottom:calc(25% + 66px); z-index:8; display:flex; flex-direction:column; align-items:center; gap:2px; }
.round { background:none; border:0; color:#fff; cursor:pointer; display:flex; flex-direction:column; align-items:center; margin-top:8px; font-size:11px; font-weight:700; text-shadow:0 1px 4px #000; }
.round i { width:46px; height:46px; border-radius:50%; background:rgba(0,0,0,.45); display:flex; align-items:center; justify-content:center; font-style:normal; font-size:22px; margin-bottom:2px; }
.round.on i { background:var(--accent); }
.round:hover i { filter:brightness(1.25); }
.unmute { position:absolute; left:50%; transform:translateX(-50%); top:104px; z-index:9; background:rgba(0,0,0,.6); color:#fff; border:0; border-radius:18px; padding:7px 14px; font-weight:700; cursor:pointer; }

/* chat floats over the bottom quarter */
.chatmount { position:absolute; left:0; right:0; bottom:0; height:calc(25% + 56px); z-index:8; display:flex; flex-direction:column; }
.chatlog { flex:1; overflow-y:auto; padding:0 64px 4px 12px; display:flex; flex-direction:column; -webkit-mask-image:linear-gradient(transparent, #000 22%); mask-image:linear-gradient(transparent, #000 22%); scrollbar-width:none; }
.chatlog::-webkit-scrollbar { display:none; }
.chatlog .msgs { margin-top:auto; }
.chatlog .m { color:#fff; text-shadow:0 1px 4px #000, 0 0 2px #000; margin:2px 0; word-wrap:break-word; font-size:14px; }
.chatlog .m .u { font-weight:700; color:#cbbfff; cursor:pointer; } .chatlog .m .u.own { color:#ff7b93; }
.chatlog .m.sys { color:#d9d4ff; font-style:italic; }
.chatlog .m .tools { display:none; margin-left:6px; } .chatlog .m.open .tools { display:inline; }
.chatlog .m .tools button { background:rgba(0,0,0,.55); color:#fff; border:1px solid #fff4; border-radius:6px; font-size:11px; padding:1px 6px; margin-right:3px; cursor:pointer; }
.chatform { display:flex; gap:8px; padding:8px 10px 10px; }
.chatform input { margin:0; background:rgba(0,0,0,.45); border-color:rgba(255,255,255,.25); color:#fff; border-radius:22px; }
.chatform .btn { border-radius:22px; }

/* date box */
.dbox { width:122px; background:rgba(0,0,0,.55); border:1px solid rgba(124,92,255,.85); border-radius:14px; padding:7px; color:#fff; }
.dbox .tt { font-size:11px; font-weight:800; margin-bottom:5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dbox .gz { height:100px; border-radius:10px; background:#111; overflow:hidden; position:relative; display:flex; align-items:center; justify-content:center; text-align:center; color:#aaa; font-size:12px; }
.dbox .gz video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.dbox .gz .nm { position:absolute; left:0; right:0; bottom:0; background:rgba(0,0,0,.6); font-size:11px; font-weight:700; display:flex; justify-content:space-between; padding:2px 5px; color:#fff; }
.dbox button { margin-top:6px; width:100%; border:0; border-radius:8px; padding:6px 4px; color:#fff; font-weight:700; font-size:11px; cursor:pointer; background:var(--accent); }
.dbox button.ghost { background:transparent; border:1px solid #999; }
.dbox button.live { background:var(--live); }

/* versus */
.vs { position:absolute; left:0; right:0; top:104px; z-index:2; }
.vs .panels { display:flex; gap:2px; height:66cqw; background:#000; position:relative; }
.vs .panel { flex:1; position:relative; overflow:hidden; background:#111; cursor:pointer; }
.vs .panel video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.vs .nm { z-index:3; position:absolute; left:6px; bottom:6px; background:rgba(0,0,0,.5); color:#fff; font-weight:800; font-size:12px; border-radius:10px; padding:2px 8px; }
.vs .sw { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:36px; height:36px; border-radius:50%; background:var(--live); display:flex; align-items:center; justify-content:center; z-index:3; }
.vs .scores { display:flex; height:26px; } .vs .scores div { color:#fff; font-weight:800; display:flex; align-items:center; padding:0 8px; transition:width .4s; }
.vs .scores .a { background:var(--blue); } .vs .scores .b { background:var(--live); flex:1; justify-content:flex-end; }
.vs .timer { text-align:center; color:#fff; font-weight:900; font-size:18px; margin-top:4px; text-shadow:0 1px 4px #000; }
.vs .support { display:flex; gap:8px; padding:6px 10px 0; } .vs .support button { flex:1; border:0; border-radius:10px; padding:7px; color:#fff; font-weight:800; font-size:12px; cursor:pointer; }

/* sheets (gift menu, date box, versus) */
.overlay { position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:100; display:flex; align-items:flex-end; justify-content:center; }
.sheet { background:var(--panel); border-radius:20px 20px 0 0; padding:16px; width:min(520px,100%); max-height:80vh; overflow:auto; }
.sheet h3 { margin:0 0 4px; }
.giftgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:10px 0; }
.gift { background:var(--bg); border:1px solid var(--line); border-radius:12px; padding:10px 4px; text-align:center; cursor:pointer; color:var(--text); }
.gift:hover { border-color:var(--accent); } .gift .e { font-size:32px; } .gift .n { font-size:12px; font-weight:600; } .gift .p { font-size:12px; color:var(--mute); }
.chips { display:flex; flex-wrap:wrap; gap:8px; margin:8px 0 12px; }
.chip { padding:7px 12px; border-radius:10px; background:var(--bg); border:1px solid var(--line); color:var(--text); cursor:pointer; font-weight:700; }
.chip.on { background:var(--accent); border-color:var(--accent); }
.toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); background:#000d; color:#fff; padding:10px 18px; border-radius:20px; z-index:200; max-width:90vw; }

/* profile */
.prof { max-width:560px; margin:0 auto; }
.prof .top { text-align:center; margin-bottom:14px; }
.counts { display:flex; gap:8px; margin:12px 0; }
.counts button { flex:1; background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:9px 4px; color:#fff; cursor:pointer; }
.counts button.on { background:var(--accent); border-color:var(--accent); } .counts b { display:block; font-size:18px; }

/* studio side panel */
.panel { width:min(100%,340px); display:flex; flex-direction:column; gap:12px; }
.panel .row { display:flex; gap:8px; flex-wrap:wrap; }
.panel .row .btn { flex:1; }
.status { font-size:13px; color:var(--mute); min-height:18px; }
label.chk { display:flex; gap:8px; align-items:center; color:var(--text); font-size:14px; }

/* keep the right-hand buttons clear of the date box: compact them (icons only) while a box is showing */
.stage.hasbox .col { gap:6px; }
.stage.hasbox .col .round { font-size:0; }
.stage.hasbox .col .round i { font-size:24px; }
a:not([href]){cursor:pointer}
@media (max-height:760px) { .dbox .gz { height:64px; } .stage.hasbox .col .round i { font-size:20px; } }

/* ---- pictures, posts, ads ---- */
.avatar { position:relative; overflow:hidden; }
.avatar img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.chatlog .m.sys.join { color:#8be9a8; font-style:normal; font-weight:600; }
.avwrap { position:relative; display:inline-block; cursor:pointer; }
.avwrap .cam { position:absolute; right:-4px; bottom:-4px; background:var(--accent); border-radius:50%; width:30px; height:30px; display:flex; align-items:center; justify-content:center; font-size:15px; border:2px solid var(--bg); }
.bio { margin:6px auto 2px; max-width:420px; line-height:1.45; }
.adbanner { display:flex; align-items:center; gap:10px; padding:8px 16px; color:#fff; font-size:14px; position:relative; }
.adbanner[style*="cursor"], .adbanner { cursor:default; }
.adbanner .em { font-size:20px; } .adbanner .txt { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.adbanner .x { background:none; border:0; color:#fff; opacity:.75; cursor:pointer; font-size:15px; }
.adtag { background:rgba(0,0,0,.35); border-radius:4px; font-size:10px; font-weight:800; padding:2px 5px; letter-spacing:.5px; }
.adcta { display:inline-block; background:#fff; color:#111; font-weight:800; font-size:12px; border-radius:14px; padding:4px 12px; margin-top:4px; }
.adbanner .adcta { margin:0; }
.adcard { cursor:pointer; } .adcard small { display:block; opacity:.9; margin-top:2px; white-space:normal; }
.adcard b { white-space:normal; }
.posts { display:flex; flex-direction:column; gap:12px; }
.post { background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:12px; }
.phead { display:flex; align-items:center; gap:10px; } .phead .grow { flex:1; min-width:0; } .phead a { font-weight:700; }
.ptext { margin:10px 0; white-space:pre-wrap; line-height:1.5; word-break:break-word; }
.pimgs { display:grid; gap:4px; margin:8px 0; border-radius:10px; overflow:hidden; grid-template-columns:1fr 1fr; }
.pimgs.n1 { grid-template-columns:1fr; } .pimgs img { width:100%; aspect-ratio:1; object-fit:cover; cursor:pointer; display:block; } .pimgs.n1 img { aspect-ratio:auto; max-height:480px; }
.pimgs.n3 img:first-child { grid-column:span 2; aspect-ratio:2; }
.pacts { display:flex; gap:6px; border-top:1px solid var(--line); padding-top:8px; margin-top:6px; }
.act { background:none; border:0; color:var(--text); font-weight:700; cursor:pointer; padding:6px 10px; border-radius:16px; font-size:14px; } .act:hover { background:#ffffff14; } .act.on { color:#ff7b93; }
.x { background:none; border:0; color:var(--mute); cursor:pointer; font-size:16px; padding:4px 8px; }
.comments { display:flex; flex-direction:column; gap:10px; margin:10px 0; max-height:50vh; overflow:auto; }
.comment { display:flex; gap:8px; align-items:flex-start; } .comment .grow { flex:1; min-width:0; word-break:break-word; } .comment a { font-weight:700; }
.cform { display:flex; gap:8px; margin-top:8px; } .cform input { flex:1; }
.composer textarea { width:100%; resize:vertical; box-sizing:border-box; }
.composer .row, .card .row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; } .grow { flex:1; }
.thumbs { display:flex; gap:8px; flex-wrap:wrap; margin:8px 0; }
.th { position:relative; width:70px; height:70px; } .th img { width:100%; height:100%; object-fit:cover; border-radius:8px; } .th button { position:absolute; top:-6px; right:-6px; background:#000c; color:#fff; border:0; border-radius:50%; width:20px; height:20px; cursor:pointer; }
.pgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.ph { position:relative; aspect-ratio:1; border-radius:10px; overflow:hidden; background:var(--panel); }
.ph img { width:100%; height:100%; object-fit:cover; cursor:pointer; display:block; } .ph button { position:absolute; top:4px; right:4px; background:#000c; color:#fff; border:0; border-radius:50%; width:24px; height:24px; cursor:pointer; }
.addph { display:flex; flex-direction:column; align-items:center; justify-content:center; font-size:34px; color:var(--mute); border:2px dashed var(--line); cursor:pointer; } .addph small { font-size:12px; }
.lightbox { position:fixed; inset:0; background:#000e; z-index:200; display:flex; align-items:center; justify-content:center; } .lightbox img { max-width:96vw; max-height:92vh; object-fit:contain; } .lightbox > button { position:absolute; top:14px; right:18px; background:none; border:0; color:#fff; font-size:26px; cursor:pointer; }
.fld { display:flex; flex-direction:column; gap:4px; font-size:13px; color:var(--mute); } .fld input, .fld select { font-size:15px; }
.adform { display:flex; flex-direction:column; gap:10px; }

/* ---- legal footer, Stay Safe, admin tables ---- */
footer.legal { display:flex; flex-wrap:wrap; gap:6px 18px; justify-content:center; padding:18px 16px 28px; font-size:12px; }
footer.legal a { color:var(--mute); } footer.legal a:hover { color:var(--text); }
.safe .tip { display:flex; gap:12px; background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:12px; margin-bottom:10px; }
.safe .tip .ti { font-size:26px; } .safe .tip b { display:block; margin-bottom:2px; }
.safe .agree { margin:14px 0; }
.agree a { color:#b9a8ff; text-decoration:underline; }
table.rec { border-collapse:collapse; width:100%; font-size:12px; margin-top:10px; } table.rec td, table.rec th { border:1px solid var(--line); padding:5px 7px; text-align:left; white-space:nowrap; }

/* ---------- messages, notifications, dashboard, replays, moderation ---------- */
.navi { position:relative; font-size:20px; padding:4px 6px; line-height:1; }
.ndot { position:absolute; top:-4px; right:-6px; background:var(--live); color:#fff; font-size:10px; font-weight:800; min-width:16px; height:16px; line-height:16px; border-radius:8px; text-align:center; padding:0 3px; }
.item .ndot { position:static; }
.item.unread { border-color:var(--accent); background:#1d1b30; }
.tab.small { padding:5px 12px; font-size:13px; }
.tile small.cat { opacity:.85; font-size:11px; }
.thread { display:flex; flex-direction:column; height:calc(100vh - var(--hdr) - 40px); max-width:640px; }
.thead { display:flex; align-items:center; gap:10px; padding:6px 0 10px; border-bottom:1px solid var(--line); } .thead .grow { flex:1; }
.bubbles { flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:6px; padding:10px 0; }
.bub { max-width:78%; padding:8px 12px; border-radius:16px; word-break:break-word; white-space:pre-wrap; }
.bub small { display:block; opacity:.6; font-size:10px; margin-top:2px; }
.bub.me { align-self:flex-end; background:var(--accent); border-bottom-right-radius:4px; }
.bub.them { align-self:flex-start; background:var(--panel); border:1px solid var(--line); border-bottom-left-radius:4px; }
.dmform { display:flex; gap:8px; padding-top:8px; } .dmform input { margin:0; }
.statgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(125px,1fr)); gap:10px; margin:12px 0; }
.stat { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:12px 8px; text-align:center; }
.stat b { display:block; font-size:21px; } .stat span { color:var(--mute); font-size:12px; }
.bars { display:flex; gap:4px; align-items:flex-end; height:130px; margin:8px 0 16px; }
.bar { flex:1; height:100%; position:relative; } .bar i { position:absolute; left:0; right:0; bottom:15px; max-height:calc(100% - 15px); background:var(--accent); border-radius:4px 4px 0 0; }
.bar span { position:absolute; bottom:0; left:0; right:0; text-align:center; font-size:10px; color:var(--mute); }
.rgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; }
.rcard { position:relative; background:var(--panel); border:1px solid var(--line); border-radius:12px; overflow:hidden; cursor:pointer; }
.rcard video { width:100%; aspect-ratio:9/16; object-fit:cover; display:block; background:#000; pointer-events:none; }
.rcard .dur { position:absolute; top:6px; right:6px; background:#000a; font-size:11px; padding:2px 6px; border-radius:6px; }
.rcard .rt { padding:8px; } .rcard .rt b { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .rcard .rt small { color:var(--mute); }
.vidbox .vbody { width:min(440px,96vw); } .bigvid { width:100%; max-height:72vh; background:#000; border-radius:12px; } .vcap { padding:10px 2px; color:#fff; }
.vidbox .vbody .row { display:flex; gap:8px; flex-wrap:wrap; }
.vidbox button.btn { position:static; }

.stage.hasbox .col .round { margin-top:4px; }
.stage.hasbox .col .round i { width:40px; height:40px; }
.stage.hasbox .col { gap:2px; }
.topbar .roundbtn { font-size:18px; }


/* =====================================================================
   v9 polish: calmer surfaces, one accent, icon family instead of emoji
   ===================================================================== */
body { font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; -webkit-font-smoothing:antialiased; letter-spacing:-.005em; }
h1, h2, h3 { letter-spacing:-.02em; } h2 { font-size:22px; font-weight:700; }
.ic { display:inline-block; vertical-align:-.2em; flex:none; }
.fillred { color:var(--live); }
.rdot { display:inline-block; width:9px; height:9px; border-radius:50%; background:var(--live); margin-right:6px; vertical-align:1px; }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

header { background:rgba(10,10,15,.88); backdrop-filter:blur(12px); border-bottom:1px solid var(--line); padding:0 24px; }
header .logo { font-size:21px; font-weight:800; }
header .logo b { color:var(--text); } header .logo::before { content:""; display:inline-block; width:24px; height:24px; margin-right:9px; vertical-align:-6px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect width='24' height='24' rx='7' fill='%237c5cff'/%3E%3Cpath d='M9.5 7.2v9.6l7.6-4.8z' fill='%23fff'/%3E%3C/svg%3E") center/contain no-repeat; }
header nav { gap:6px; }
.navi { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:50%; color:var(--soft); }
.navi:hover { background:var(--raised); color:var(--text); }
.ndot { top:2px; right:0; border:2px solid var(--bg); }

.btn, button.btn { border-radius:14px; padding:11px 18px; font-weight:600; letter-spacing:0; display:inline-flex; align-items:center; justify-content:center; gap:8px; transition:opacity .15s, background .15s; }
.btn:hover { opacity:.9; }
.btn.ghost { background:var(--raised); border:0; color:var(--text); }
.btn.ghost:hover { background:#242430; opacity:1; }
.btn.small { padding:7px 13px; font-size:13px; border-radius:11px; }
.btn.live { background:var(--live); }
.btn.wide { display:flex; }
input[type=text], input[type=password], input[type=email], select, textarea { background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:12px 14px; transition:border-color .15s; }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--accent); }
.card, .item, .post, .stat, .gift, .rcard, .safe .tip { background:var(--panel); border:0; border-radius:20px; }
.item { border-radius:16px; padding:12px 14px; }
.item:hover { background:var(--raised); }
.item.live { box-shadow:inset 0 0 0 1.5px var(--live); } .item.box { box-shadow:inset 0 0 0 1.5px var(--accent); }
.item.unread { background:#1a1830; }
.post { padding:16px; }
.pacts { border-top:0; padding-top:4px; gap:2px; }
.act { color:var(--soft); font-weight:600; display:inline-flex; align-items:center; gap:7px; }
.act.on { color:var(--live); }
.x { color:var(--mute); display:inline-flex; } .x:hover { color:var(--text); }
.modalbox, .sheet { border:0; }
.modalbox { border-radius:24px; }
.modalbox .tabs2 button { font-size:15px; font-weight:600; border-bottom-width:2px; }
.modalbox .tabs2 button.on { border-bottom-color:var(--text); }
.agree { background:var(--panel); border:0; border-radius:14px; } .agree.on { box-shadow:inset 0 0 0 1.5px var(--accent); }
.agree .cb { border-radius:8px; } .agree a { color:var(--accent); text-decoration:none; font-weight:600; }

/* tabs become quiet underlined text, categories stay as chips */
.tabs { gap:26px; border-bottom:1px solid var(--line); margin-bottom:16px; padding-bottom:0; }
.tab { background:none; border:0; border-bottom:2px solid transparent; border-radius:0; padding:12px 0; color:var(--mute); font-weight:500; font-size:15px; }
.tab:hover { color:var(--soft); }
.tab.on { background:none; color:var(--text); font-weight:700; border-bottom-color:var(--text); }
.tab.small { padding:6px 14px; font-size:13px; border-radius:17px; border:0; background:var(--raised); color:var(--soft); }
.tab.small.on { background:var(--text); color:var(--bg); }
.chip { background:var(--raised); border:0; border-radius:17px; font-weight:600; color:var(--soft); }
.chip.on { background:var(--text); color:var(--bg); }
.search { background:var(--panel); border-radius:16px; }
.tiles { gap:14px; }
.tile { border-radius:20px; box-shadow:0 1px 0 rgba(255,255,255,.04) inset; transition:transform .15s; }
.tile:hover { transform:translateY(-2px); }
.badge { border-radius:6px; padding:2px 7px; }
.counts button { background:var(--panel); border:0; border-radius:14px; color:var(--soft); font-weight:500; }
.counts button.on { background:var(--raised); color:var(--text); box-shadow:inset 0 0 0 1.5px var(--accent); }
.counts b { color:var(--text); font-weight:700; }
.statgrid .stat { padding:14px 8px; }
.gift { border-radius:16px; } .gift:hover { background:var(--raised); }
.toast { background:rgba(27,27,36,.96); backdrop-filter:blur(10px); font-weight:500; }
details.card > summary { list-style:none; display:flex; align-items:center; gap:8px; } details.card > summary::-webkit-details-marker { display:none; }
.avwrap .cam { border:3px solid var(--bg); }
.ph { border-radius:14px; } .addph { border:1.5px dashed var(--line); }
.bub.them { background:var(--panel); border:0; } .bub.me { background:var(--accent); }
.safe .tip { padding:16px; gap:14px; } .safe .tip .ti { color:var(--accent); display:flex; }

/* watch stage */
.stage { border-radius:22px; }
.roundbtn, .round i { background:rgba(12,12,18,.55); backdrop-filter:blur(8px); }
.roundbtn { font-size:0; }
.pill { background:rgba(12,12,18,.55); backdrop-filter:blur(8px); }
.round { font-weight:600; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; touch-action:manipulation; }
.round i { width:46px; height:46px; transition:transform .12s, background .15s; }
.round:active i { transform:scale(.92); }
.round.on i { background:var(--accent); }
.heartbtn i { color:var(--live); }
.heartbtn:active i { transform:scale(1.12); }
.livepill { display:inline-flex; align-items:center; gap:5px; font-size:11px; letter-spacing:.02em; }
.unmute { background:rgba(12,12,18,.7); backdrop-filter:blur(8px); font-weight:600; display:inline-flex; gap:6px; align-items:center; }
.chatform input { background:rgba(12,12,18,.55); }
.dbox { border:0; background:rgba(12,12,18,.6); backdrop-filter:blur(8px); box-shadow:inset 0 0 0 1.5px rgba(124,92,255,.8); }

/* creator payouts page */
.payouts { max-width:640px; margin:0 auto; display:flex; flex-direction:column; gap:14px; }
.pstatus { display:flex; align-items:center; gap:14px; background:var(--panel); border-radius:20px; padding:18px; }
.pstatus.ok { background:rgba(61,214,140,.12); } .pstatus.ok .ic { color:#3dd68c; }
.pstatus h3 { margin:0; } .pstatus p { margin:2px 0 0; color:var(--mute); font-size:13px; }
.pstep { background:var(--panel); border-radius:20px; padding:16px; }
.pstep h3 { margin:0 0 4px; font-size:16px; } .pstep .sub { color:var(--mute); font-size:13px; margin-bottom:10px; }
.agtext { max-height:46vh; overflow:auto; background:var(--bg); border-radius:14px; padding:14px 16px; line-height:1.6; font-size:14px; color:var(--soft); }
.agtext h2 { font-size:16px; color:var(--text); margin:16px 0 4px; } .agtext h1 { display:none; } .agtext p { margin:6px 0; } .agtext a { color:var(--accent); }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.pchips { display:flex; flex-wrap:wrap; gap:6px; margin:6px 0 12px; }
.pfine { color:var(--mute); font-size:12px; line-height:1.5; }
table.rec th { color:var(--mute); font-weight:600; }
@media (max-width:640px) { header { padding:0 14px; } main { padding:12px; } .tiles { grid-template-columns:repeat(2,1fr); gap:10px; } .grid2 { grid-template-columns:1fr; } }
@media (prefers-reduced-motion:reduce) { * { transition:none !important; } }

.coltop { display:flex; flex-direction:column; align-items:center; gap:2px; } .stage.hasbox .coltop { gap:2px; }
.sect { display:inline-flex; align-items:center; gap:8px; }

/* guest box: tiles down the left side, under the streamer's name */
.gboxslot { position:absolute; top:96px; left:10px; z-index:8; }
.gbox { width:96px; display:flex; flex-direction:column; gap:6px; background:rgba(12,12,18,.6); backdrop-filter:blur(8px); box-shadow:inset 0 0 0 1.5px rgba(255,79,154,.8); border-radius:14px; padding:6px; color:#fff; }
.gbox .tt { font-size:11px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gbox .gz { height:96px; border-radius:10px; background:#111; overflow:hidden; position:relative; display:flex; align-items:center; justify-content:center; text-align:center; color:#aaa; font-size:12px; }
.gbox .gz video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.gbox .gz .nm { position:absolute; left:0; right:0; bottom:0; background:rgba(0,0,0,.6); font-size:11px; font-weight:700; padding:2px 5px; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gbox .gz .rm { position:absolute; top:3px; right:3px; width:20px; height:20px; border-radius:50%; border:0; background:rgba(0,0,0,.65); color:#fff; font-size:11px; cursor:pointer; line-height:20px; padding:0; }
.gbox > button { border:0; border-radius:8px; padding:6px 4px; color:#fff; font-weight:700; font-size:11px; cursor:pointer; background:var(--accent); }
.gbox > button.ghost { background:transparent; border:1px solid #999; }
.gbox > button.live { background:var(--live); }
@media (max-height:760px) { .gbox .gz { height:70px; } }

.prio { display:inline-block; font-size:10px; font-weight:800; padding:2px 6px; border-radius:6px; margin-right:6px; color:#fff; background:#c2410c; }
.prio.urgent { background:#dc2626; } .prio.overdue { background:#000; border:1px solid #dc2626; color:#ff9aa2; }
.chk2.bad { border-left:4px solid #dc2626; } .chk2.warn { border-left:4px solid #d97706; } .chk2.good { border-left:4px solid #16a34a; }

/* ===== guest boxes: portrait pictures, draggable and resizable floating box, split-screen grids ===== */
.boxslot, .gboxslot { position:absolute; left:0; right:0; top:58px; bottom:calc(25% + 56px); pointer-events:none; z-index:8; }
.gfloat { position:absolute; left:calc(var(--x, 1) * 100%); top:calc(var(--y, .08) * 100%); transform:translate(calc(var(--x, 1) * -100%), calc(var(--y, .08) * -100%)); box-sizing:border-box; pointer-events:auto; }
.gfloat.dbox, .gfloat.gbox { width:var(--w, 36cqw); max-width:60cqw; }
.gfloat .gz, .ggrid .gt { aspect-ratio:9/16; height:auto; width:100%; }
.gfloat .gz video, .ggrid .gt video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.gbox.gfloat.strip { left:10px; top:2px; transform:none; width:auto; max-width:70%; flex-direction:row; align-items:center; gap:8px; padding:5px 8px; }
.gbox.gfloat.strip > button { padding:5px 10px; }
.ggridwrap { position:absolute; inset:0; z-index:3; pointer-events:none; }
.ggrid { position:absolute; inset:0; }
.ggrid .gt { position:absolute; aspect-ratio:auto; height:auto; box-sizing:border-box; border:1.5px solid #000; background:#111; overflow:hidden; pointer-events:auto; display:flex; align-items:center; justify-content:center; color:#aaa; }
.ggrid .gt .nm { position:absolute; left:0; right:0; bottom:0; background:rgba(0,0,0,.6); font-size:11px; font-weight:700; padding:2px 6px; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ggrid .gt .rm { position:absolute; top:50px; left:4px; width:22px; height:22px; border-radius:50%; border:0; background:rgba(0,0,0,.65); color:#fff; font-size:11px; cursor:pointer; line-height:22px; padding:0; }
.draghandle { cursor:grab; touch-action:none; } .gfloat[data-drag] { cursor:grabbing; opacity:.92; }
.sizechips { display:flex; align-items:center; gap:4px; font-size:11px; margin-top:6px; color:#ddd; }
.sizechips button { flex:1; border:1px solid #888; background:transparent; color:#fff; border-radius:6px; padding:3px 0; font-weight:700; cursor:pointer; font-size:11px; margin:0; width:auto; }
.sizechips button.on { background:var(--accent); border-color:var(--accent); }
.livepill { border:0; cursor:pointer; font-family:inherit; }
.m .u.bot { color:#7dd3fc; }
/* locked stream + stream ended */
.lockscreen { position:absolute; inset:0; display:flex; flex-direction:column; gap:10px; align-items:center; justify-content:center; text-align:center; padding:28px; background:var(--panel); color:var(--text); }
.lockscreen .lk, .endedscreen .lk { font-size:46px; } .lockscreen h3, .endedscreen h3 { margin:0; } .lockscreen p, .endedscreen p { margin:0; color:var(--mute); }
.endedscreen { position:absolute; inset:0; z-index:12; display:flex; align-items:center; justify-content:center; background:rgba(8,8,14,.84); backdrop-filter:blur(6px); padding:16px; }
.endedscreen .card { width:100%; text-align:center; display:flex; flex-direction:column; gap:10px; align-items:stretch; }
.endstats { display:grid; grid-template-columns:1fr 1fr; gap:8px; } .endstats div { background:var(--bg); border-radius:12px; padding:10px; display:flex; flex-direction:column; } .endstats b { font-size:20px; } .endstats span { font-size:11px; color:var(--mute); }
.endedscreen .col2 { display:flex; flex-direction:column; gap:8px; }
/* ad spots: small, labelled, never over a video */
.adrail { display:none; position:fixed; top:calc(var(--hdr) + 16px); bottom:16px; max-height:640px; width:min(180px, calc((100vw - 1132px) / 2 - 12px)); z-index:5; }
.adrail.l { left:12px; } .adrail.r { right:12px; }
@media (min-width:1400px) { .adrail { display:block; } }
.adrail:empty { display:none !important; }
.adside { position:relative; box-sizing:border-box; height:100%; border-radius:16px; padding:14px 14px 16px; color:#fff; display:flex; flex-direction:column; justify-content:space-between; gap:10px; overflow:hidden; border:1px solid rgba(255,255,255,.08); }
.adside .adtag { position:absolute; top:10px; left:10px; }
.adside .adbody { margin-top:30px; display:flex; flex-direction:column; gap:8px; align-items:flex-start; }
.adside .em { font-size:44px; line-height:1; } .adside b { font-size:15px; line-height:1.25; } .adside small { font-size:12px; opacity:.9; line-height:1.45; }
.adside .adcta { align-self:stretch; text-align:center; font-size:12px; background:#fff; color:#111; border-radius:10px; padding:7px 9px; font-weight:700; cursor:pointer; }
#adbottom:empty { display:none; }
.adbottom { display:flex; align-items:center; justify-content:center; gap:10px; padding:6px 36px 6px 12px; font-size:12px; color:var(--mute); background:var(--panel); border-top:1px solid var(--line); position:relative; }
.adbottom .adtag { color:#fff; } .adbottom .x { position:absolute; right:8px; top:50%; transform:translateY(-50%); background:none; border:0; color:var(--mute); cursor:pointer; }

.stage.hastiles .ptitle { display:none; }
.ggrid .gt.lowrow .nm { top:0; bottom:auto; } .ggrid .gt.lowrow .rm { top:26px; }

/* video quality: voice-only notice for viewers, weak-connection notice for the streamer */
.audioonly { position:absolute; inset:0; z-index:1; display:flex; flex-direction:column; gap:8px; align-items:center; justify-content:center; text-align:center; padding:28px; background:linear-gradient(160deg,#1b2433,#12151d); color:var(--text); pointer-events:none; }
.audioonly[hidden] { display:none; }
.audioonly .lk { font-size:46px; } .audioonly span { color:var(--mute); font-size:13px; max-width:240px; }
.slowbox { display:flex; flex-direction:column; gap:8px; padding:10px 12px; border-radius:12px; background:rgba(255,170,0,.12); border:1px solid rgba(255,170,0,.45); }
.slowbox[hidden] { display:none; }
.slowbox .row { display:flex; gap:6px; flex-wrap:wrap; }

/* date box hearts */
.datebar { position:absolute; top:58px; left:50%; transform:translateX(-50%); z-index:9; display:flex; gap:6px; white-space:nowrap; }
.datebar[hidden] { display:none; }

/* ===== gifter tags, Super Fan borders, free gift, versus battle border, hearts around the date box ===== */
.gtag { font-size:12px; filter:drop-shadow(0 0 3px rgba(255,255,255,.35)); } .gtag.gt-diamond { filter:drop-shadow(0 0 5px #7df); } .gtag.gt-gold { filter:drop-shadow(0 0 4px #f5c542); }
.chatlog .m.sf { border:2px solid transparent; border-radius:12px; padding:1px 8px; margin:3px 0; width:fit-content; max-width:100%; background:linear-gradient(rgba(12,12,18,.55),rgba(12,12,18,.55)) padding-box, linear-gradient(135deg,#f5c542,#ffe27a,#d99a1e) border-box; box-shadow:0 0 8px rgba(245,197,66,.35); }
.chatlog .m.sf-ruby { background:linear-gradient(rgba(12,12,18,.55),rgba(12,12,18,.55)) padding-box, linear-gradient(135deg,#ff3b5c,#ff8aa0,#c2113a) border-box; box-shadow:0 0 9px rgba(255,59,92,.5); }
.chatlog .m.sf-diamond { background:linear-gradient(rgba(12,12,18,.55),rgba(12,12,18,.55)) padding-box, linear-gradient(90deg,#7ddcff,#c79bff,#ffffff,#7ddcff) border-box; background-size:auto, 300% 100%; animation:sfshift 4s linear infinite; box-shadow:0 0 11px rgba(125,220,255,.55); }
@keyframes sfshift { to { background-position:0 0, 300% 0; } }
.vwtags.sf { border:2px solid #f5c542; border-radius:10px; padding:1px 7px; } .vwtags.sf-ruby { border-color:#ff3b5c; } .vwtags.sf-diamond { border-color:#7ddcff; box-shadow:0 0 8px rgba(125,220,255,.6); }
.emojirow { display:flex; flex-wrap:wrap; gap:6px; } .emojirow .chip { font-size:18px; padding:4px 9px; }

.freegift { position:absolute; left:12px; bottom:calc(25% + 66px); z-index:12; display:flex; align-items:center; gap:8px; border:0; border-radius:16px; padding:9px 14px 12px; color:#fff; font-weight:800; cursor:pointer; overflow:hidden; background:linear-gradient(135deg,#ff4d8d,#7c5cff); box-shadow:0 6px 22px rgba(255,77,141,.45); animation:fgpop .5s cubic-bezier(.2,1.4,.4,1) both, fgwig 1.6s .6s ease-in-out infinite; }
.freegift .fgi { font-size:26px; } .freegift small { font-weight:600; opacity:.9; display:block; font-size:11px; } .freegift b { font-size:14px; }
.freegift .fgbar { position:absolute; left:0; bottom:0; height:4px; width:100%; background:rgba(255,255,255,.9); transform-origin:left; animation:fgdrain linear forwards; }
@keyframes fgpop { from { transform:scale(.3); opacity:0; } to { transform:scale(1); opacity:1; } } @keyframes fgwig { 0%,100% { transform:rotate(0); } 8% { transform:rotate(-4deg); } 16% { transform:rotate(4deg); } 24% { transform:rotate(0); } }
@keyframes fgdrain { to { transform:scaleX(0); } }

.vs .panels { gap:3px; }
.vs .panel { --lead:0; }
.vs .panel.a { --c:var(--blue); } .vs .panel.b { --c:var(--live); }
.vs .panel::after { content:''; position:absolute; inset:0; z-index:2; pointer-events:none; box-shadow:inset 0 0 0 3px var(--c), inset 0 0 calc(6px + 34px * var(--lead)) calc(var(--lead) * 6px) var(--c); transition:box-shadow .6s; }
.vs .panel.hit::after { animation:vshit .6s ease-out; } @keyframes vshit { 0% { box-shadow:inset 0 0 0 6px #fff, inset 0 0 46px 12px var(--c); } 100% { box-shadow:inset 0 0 0 3px var(--c), inset 0 0 calc(6px + 34px * var(--lead)) calc(var(--lead) * 6px) var(--c); } }
.vs .panel.lose { filter:grayscale(.7) brightness(.65); } .vs .panel.win::after { animation:vswin 1.2s ease-in-out infinite alternate; } @keyframes vswin { to { box-shadow:inset 0 0 0 4px #ffd34d, inset 0 0 40px 10px #ffd34d; } }
.vs .crown { z-index:3; position:absolute; left:50%; top:4px; transform:translateX(-50%); font-size:30px; filter:drop-shadow(0 2px 6px #000); animation:crownbob 1s ease-in-out infinite alternate; } @keyframes crownbob { to { transform:translate(-50%,-4px); } }
.vs .vschip { z-index:3; position:absolute; left:6px; right:6px; top:46%; text-align:center; background:rgba(0,0,0,.6); border:1.5px solid var(--c); color:#fff; font-weight:800; font-size:12px; border-radius:12px; padding:3px 8px; animation:vschip 2.6s ease-out forwards; pointer-events:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
@keyframes vschip { 0% { transform:translateY(14px) scale(.8); opacity:0; } 12% { transform:none; opacity:1; } 80% { opacity:1; } 100% { transform:translateY(-26px); opacity:0; } }
.vs .scores { position:relative; border-radius:16px; overflow:hidden; height:30px; background:var(--live); box-shadow:0 0 0 2px rgba(255,255,255,.18), 0 2px 12px rgba(0,0,0,.5); }
.vs .scores .a { position:relative; background:linear-gradient(90deg,#2563eb,var(--blue)); clip-path:polygon(0 0,100% 0,calc(100% - 12px) 100%,0 100%); transition:width .7s cubic-bezier(.2,.9,.3,1); z-index:1; padding-right:14px; }
.vs .scores .b { background:linear-gradient(270deg,#e11d48,var(--live)); position:absolute; inset:0; justify-content:flex-end; }
.vs .scores .spark { position:absolute; top:50%; z-index:2; transform:translate(-60%,-50%); font-size:18px; filter:drop-shadow(0 0 6px #fff); transition:left .7s cubic-bezier(.2,.9,.3,1); animation:sparkpulse .9s ease-in-out infinite alternate; pointer-events:none; } @keyframes sparkpulse { to { transform:translate(-60%,-50%) scale(1.35); } }

.dbox::after { content:''; position:absolute; inset:-13px; border:20px solid transparent; border-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cpath transform='translate(12,12) scale(.68)' d='M0,-3 C0,-9 -9,-9 -9,-3 C-9,3 0,8 0,11 C0,8 9,3 9,-3 C9,-9 0,-9 0,-3 Z' fill='%23ff4d8d' stroke='%23ffb3d1' stroke-width='1.2'/%3E%3Cpath transform='translate(36,12) scale(.68)' d='M0,-3 C0,-9 -9,-9 -9,-3 C-9,3 0,8 0,11 C0,8 9,3 9,-3 C9,-9 0,-9 0,-3 Z' fill='%23ff4d8d' stroke='%23ffb3d1' stroke-width='1.2'/%3E%3Cpath transform='translate(60,12) scale(.68)' d='M0,-3 C0,-9 -9,-9 -9,-3 C-9,3 0,8 0,11 C0,8 9,3 9,-3 C9,-9 0,-9 0,-3 Z' fill='%23ff4d8d' stroke='%23ffb3d1' stroke-width='1.2'/%3E%3Cpath transform='translate(12,36) scale(.68)' d='M0,-3 C0,-9 -9,-9 -9,-3 C-9,3 0,8 0,11 C0,8 9,3 9,-3 C9,-9 0,-9 0,-3 Z' fill='%23ff4d8d' stroke='%23ffb3d1' stroke-width='1.2'/%3E%3Cpath transform='translate(60,36) scale(.68)' d='M0,-3 C0,-9 -9,-9 -9,-3 C-9,3 0,8 0,11 C0,8 9,3 9,-3 C9,-9 0,-9 0,-3 Z' fill='%23ff4d8d' stroke='%23ffb3d1' stroke-width='1.2'/%3E%3Cpath transform='translate(12,60) scale(.68)' d='M0,-3 C0,-9 -9,-9 -9,-3 C-9,3 0,8 0,11 C0,8 9,3 9,-3 C9,-9 0,-9 0,-3 Z' fill='%23ff4d8d' stroke='%23ffb3d1' stroke-width='1.2'/%3E%3Cpath transform='translate(36,60) scale(.68)' d='M0,-3 C0,-9 -9,-9 -9,-3 C-9,3 0,8 0,11 C0,8 9,3 9,-3 C9,-9 0,-9 0,-3 Z' fill='%23ff4d8d' stroke='%23ffb3d1' stroke-width='1.2'/%3E%3Cpath transform='translate(60,60) scale(.68)' d='M0,-3 C0,-9 -9,-9 -9,-3 C-9,3 0,8 0,11 C0,8 9,3 9,-3 C9,-9 0,-9 0,-3 Z' fill='%23ff4d8d' stroke='%23ffb3d1' stroke-width='1.2'/%3E%3C/svg%3E") 24 round; pointer-events:none; filter:drop-shadow(0 0 4px rgba(255,77,141,.85)); animation:hbeat 1.5s ease-in-out infinite; }
@keyframes hbeat { 0%,100% { filter:drop-shadow(0 0 3px rgba(255,77,141,.7)); } 20% { filter:drop-shadow(0 0 9px rgba(255,77,141,1)); } 40% { filter:drop-shadow(0 0 4px rgba(255,77,141,.8)); } }
@media (prefers-reduced-motion:reduce) { .dbox::after, .freegift, .chatlog .m.sf-diamond, .vs .scores .spark, .vs .crown { animation:none; } }

/* =========================================================
   THEMES: <html data-theme="vibematch|clashroom|aurastream|buzzcast">
   Each theme sets the same variables. Everything below the theme blocks reads them,
   so switching the theme restyles the whole app, including the stream overlays.
   ========================================================= */
:root, [data-theme="vibematch"] {
  --theme-name: "VibeMatch";
  --primary-accent: #00f2fe; --secondary-accent: #ff0844; --tertiary-accent: #7828c8; --gold-accent: #ffd700;
  --glass-bg: rgba(12,12,18,.70); --glass-border: 1px solid rgba(0,242,254,.25); --glass-blur: blur(12px); --glow-shadow: 0 0 15px rgba(0,242,254,.3);
  --radius-pill: 30px; --radius-card: 18px;
  --font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  /* app surfaces + buttons */
  --bg:#0a0a0f; --panel:#13131a; --raised:#1b1b24; --line:#24242f;
  --accent:#7828c8; --on-accent:#fff; --live:#ff0844; --blue:#00f2fe;
}
[data-theme="clashroom"] {
  --theme-name: "ClashRoom";
  --primary-accent: #ff9900; --secondary-accent: #e60000; --tertiary-accent: #4a00e0; --gold-accent: #ffcc00;
  --glass-bg: rgba(18,14,10,.85); --glass-border: 1px solid rgba(255,153,0,.35); --glass-blur: blur(8px); --glow-shadow: 0 0 18px rgba(255,153,0,.4);
  --radius-pill: 8px; --radius-card: 10px;
  --font-family: 'Rajdhani', 'Chakra Petch', system-ui, sans-serif;
  --bg:#0f0b08; --panel:#1a140e; --raised:#241b12; --line:#33261a;
  --accent:#ff9900; --on-accent:#1a0f00; --live:#e60000; --blue:#ff9900;
}
[data-theme="aurastream"] {
  --theme-name: "AuraStream";
  --primary-accent: #a855f7; --secondary-accent: #38bdf8; --tertiary-accent: #ec4899; --gold-accent: #f59e0b;
  --glass-bg: rgba(255,255,255,.08); --glass-border: 1px solid rgba(255,255,255,.18); --glass-blur: blur(20px); --glow-shadow: 0 8px 32px rgba(0,0,0,.25);
  --radius-pill: 50px; --radius-card: 24px;
  --font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  --bg:#0d0a14; --panel:#17122a; --raised:#201a38; --line:#2e2650;
  --accent:#a855f7; --on-accent:#fff; --live:#ec4899; --blue:#a855f7;
}
[data-theme="buzzcast"] {
  --theme-name: "BuzzCast";
  --primary-accent: #00ff88; --secondary-accent: #ff0055; --tertiary-accent: #00e5ff; --gold-accent: #ffea00;
  --glass-bg: rgba(10,15,20,.75); --glass-border: 1px solid rgba(0,255,136,.3); --glass-blur: blur(10px); --glow-shadow: 0 0 12px rgba(0,255,136,.35);
  --radius-pill: 20px; --radius-card: 16px;
  --font-family: 'Poppins', system-ui, sans-serif;
  --bg:#070b0d; --panel:#0f171b; --raised:#16222a; --line:#1f3038;
  --accent:#00ff88; --on-accent:#04140c; --live:#ff0055; --blue:#00ff88;
}
body { font-family: var(--font-family); }
header .logo b { color: var(--primary-accent); }
/* text on accent-colored buttons stays readable in every theme */
.btn, button.btn, .tab.on, .chip.on, .sizechips button.on, .counts button.on, .bub.me, .dbox button, .gbox > button, .avwrap .cam { color: var(--on-accent); }
.btn.live, .btn.danger, .dbox button.live, .gbox > button.live { color:#fff; }
.btn.ghost, .dbox button.ghost, .gbox > button.ghost { color: inherit; }
.counts button.on { color: var(--text); }
.btn { border-radius: var(--radius-pill); } .btn.small { border-radius: calc(var(--radius-pill) * .6); }
.card, .item, .sheet { border-radius: var(--radius-card); }
.sheet { border-radius: var(--radius-card) var(--radius-card) 0 0; }
.tab { border-radius: var(--radius-pill); }
.item.unread { background: color-mix(in srgb, var(--accent) 14%, var(--panel)); }

/* --- name pill on the stream (Gemini: .theme-name-box) --- */
.pill { background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: var(--glass-border); border-radius: var(--radius-pill); box-shadow: var(--glow-shadow); }
.pill .avatar { box-shadow: 0 0 0 1.5px var(--primary-accent); }
.pill b { font-weight: 700; }
.roundbtn, .round i { background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); }
.livepill { border-radius: var(--radius-pill); box-shadow: var(--glow-shadow); }

/* --- guest boxes and the date box (Gemini: .theme-date-box) --- */
.dbox, .gbox { background: linear-gradient(135deg, rgba(255,255,255,.05), rgba(0,0,0,.45)), var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: var(--glass-border); border-radius: var(--radius-card); box-shadow: var(--glow-shadow); }
.dbox .gz, .gbox .gz { border-radius: calc(var(--radius-card) - 6px); }
.dbox button, .gbox > button { border-radius: calc(var(--radius-card) / 2); }

/* --- Versus battle HUD (Gemini: .theme-battle-hud) --- */
.vs .panel.a { --c: var(--primary-accent); } .vs .panel.b { --c: var(--secondary-accent); }
.vs .scores { border: var(--glass-border); border-radius: var(--radius-pill); background: rgba(255,255,255,.12); box-shadow: var(--glow-shadow); }
.vs .scores .a { background: linear-gradient(90deg, var(--primary-accent), var(--tertiary-accent)); }
.vs .scores .b { background: linear-gradient(270deg, var(--secondary-accent), var(--gold-accent)); }
.vs .scores div { text-shadow: 0 1px 3px rgba(0,0,0,.75); }
.vs .sw { background: var(--glass-bg); border: var(--glass-border); box-shadow: var(--glow-shadow); color: var(--gold-accent); }
.vs .timer { display: table; margin: 4px auto 0; padding: 2px 12px; background: var(--glass-bg); border: var(--glass-border); border-radius: var(--radius-pill); box-shadow: var(--glow-shadow); letter-spacing: 1px; }
.vs .vschip { background: var(--glass-bg); border-radius: var(--radius-pill); }
.vs .nm { background: var(--glass-bg); border-radius: var(--radius-pill); }
.vs .support button { border-radius: var(--radius-pill); color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.75); border:var(--glass-border); }
.vs .support .sa { background: color-mix(in srgb, var(--primary-accent) 70%, #000); } .vs .support .sb { background: color-mix(in srgb, var(--secondary-accent) 80%, #000); }
.vs .crown { filter: drop-shadow(0 2px 6px #000) drop-shadow(0 0 8px var(--gold-accent)); }

/* --- subscriber / Super Fan frames (Gemini: .theme-sub-frame): gold, ruby and diamond keep their meaning, in the theme's colors --- */
.chatlog .m.sf { border-radius: var(--radius-card); background: linear-gradient(rgba(12,12,18,.55),rgba(12,12,18,.55)) padding-box, linear-gradient(135deg, var(--gold-accent), color-mix(in srgb, var(--gold-accent) 55%, #fff), color-mix(in srgb, var(--gold-accent) 70%, #000)) border-box; box-shadow: 0 0 8px color-mix(in srgb, var(--gold-accent) 45%, transparent); }
.chatlog .m.sf-ruby { background: linear-gradient(rgba(12,12,18,.55),rgba(12,12,18,.55)) padding-box, linear-gradient(135deg, var(--secondary-accent), color-mix(in srgb, var(--secondary-accent) 55%, #fff), color-mix(in srgb, var(--secondary-accent) 70%, #000)) border-box; box-shadow: 0 0 9px color-mix(in srgb, var(--secondary-accent) 55%, transparent); }
.chatlog .m.sf-diamond { background: linear-gradient(rgba(12,12,18,.55),rgba(12,12,18,.55)) padding-box, linear-gradient(90deg, var(--primary-accent), var(--secondary-accent), var(--gold-accent), var(--primary-accent)) border-box; background-size: auto, 300% 100%; box-shadow: 0 0 11px color-mix(in srgb, var(--primary-accent) 55%, transparent); }
.vwtags.sf { border-color: var(--gold-accent); border-radius: var(--radius-card); } .vwtags.sf-ruby { border-color: var(--secondary-accent); } .vwtags.sf-diamond { border-color: var(--primary-accent); box-shadow: 0 0 8px color-mix(in srgb, var(--primary-accent) 60%, transparent); }
/* the emoji a streamer gives their Super Fans, as a small glass badge */
.chatlog .m.sf .fe, .vwtags.sf .fe { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; margin-right: 4px; border-radius: 50%; background: var(--glass-bg); border: var(--glass-border); box-shadow: var(--glow-shadow); font-size: 12px; }
.freegift { background: linear-gradient(135deg, var(--secondary-accent), var(--tertiary-accent)); color:#fff; border-radius: var(--radius-card); box-shadow: var(--glow-shadow); }

/* --- settings window + theme picker (Gemini: .settings-theme-selector) --- */
.settings-theme-selector h3 { margin: 4px 0 2px; }
.theme-options-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 10px; }
.theme-card-option { cursor: pointer; display: block; }
.theme-card-option input { position: absolute; opacity: 0; pointer-events: none; }
.theme-preview { display: flex; align-items: center; gap: 8px; padding: 12px; min-height: 64px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.15); border-radius: 12px; transition: all .2s ease; flex-wrap: wrap; }
.theme-card-option input:checked + .theme-preview { border-color: var(--pc, #00f2fe); background: color-mix(in srgb, var(--pc, #00f2fe) 12%, transparent); box-shadow: 0 0 10px color-mix(in srgb, var(--pc, #00f2fe) 35%, transparent); }
.theme-card-option input:focus-visible + .theme-preview { outline: 2px solid var(--text); outline-offset: 2px; }
.theme-preview .dot { width: 14px; height: 14px; border-radius: 50%; flex: none; }
.theme-preview .label { color: var(--text); font-size: 13px; font-weight: 700; }
.theme-preview small { display: block; width: 100%; color: var(--mute); font-size: 11px; line-height: 1.3; }
.vibematch-preview { --pc: #00f2fe; } .vibematch-preview .primary { background: #00f2fe; } .vibematch-preview .secondary { background: #ff0844; }
.clashroom-preview { --pc: #ff9900; } .clashroom-preview .primary { background: #ff9900; } .clashroom-preview .secondary { background: #e60000; }
.aurastream-preview { --pc: #a855f7; } .aurastream-preview .primary { background: #a855f7; } .aurastream-preview .secondary { background: #38bdf8; }
.buzzcast-preview { --pc: #00ff88; } .buzzcast-preview .primary { background: #00ff88; } .buzzcast-preview .secondary { background: #ff0055; }
.settings-nav { padding: 6px; display: inline-flex; color: var(--soft); background: none; border: 0; cursor: pointer; }
@media (prefers-reduced-motion:reduce) { .chatlog .m.sf-diamond { animation: none; } }

/* =========================================================
   Leaderboard page, gifter level badges, level-up announcement, image frames
   ========================================================= */
.lbpage { max-width: 640px; margin: 0 auto; }
.lbhead h2 { margin: 6px 0 10px; }
.lbtabs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; }
.seg { display: flex; background: var(--panel); border: var(--glass-border); border-radius: var(--radius-pill); padding: 3px; margin: 6px 0 8px; gap: 2px; }
.seg button { flex: 1; border: 0; background: transparent; color: var(--soft); font-weight: 700; font-size: 13px; padding: 7px 4px; border-radius: var(--radius-pill); cursor: pointer; white-space: nowrap; }
.seg button.on { background: var(--accent); color: var(--on-accent); }
.lbnote { font-size: 13px; margin: 2px 4px 10px; }
.lblist { display: flex; flex-direction: column; gap: 8px; transition: opacity .2s; } .lblist.busy { opacity: .55; }
.lbrow { display: flex; align-items: center; gap: 10px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 9px 12px; }
.lbrow:hover { border-color: var(--primary-accent); }
.lbrow.me { box-shadow: inset 0 0 0 1.5px var(--accent); }
.lbrow.rank1 { background: linear-gradient(135deg, color-mix(in srgb, var(--gold-accent) 22%, var(--panel)), var(--panel)); border-color: color-mix(in srgb, var(--gold-accent) 60%, transparent); }
.lbrow.rank2 { border-color: #c0c8d4; } .lbrow.rank3 { border-color: #cd7f32; }
.lbrank { width: 28px; text-align: center; font-weight: 800; color: var(--mute); font-size: 16px; flex: none; }
.lbname { font-weight: 700; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; min-width: 0; overflow-wrap: anywhere; }
.lbonair { background: var(--live); color: #fff; font-size: 10px; font-weight: 800; padding: 1px 6px; border-radius: var(--radius-pill); margin-left: 4px; }
.lbval { display: inline-flex; align-items: center; gap: 4px; color: var(--soft); white-space: nowrap; } .lbval b { color: var(--text); font-variant-numeric: tabular-nums; }
.lvbadge { font-size: 11px; font-weight: 800; padding: 1px 7px; border-radius: var(--radius-pill); border: 1px solid currentColor; color: var(--soft); line-height: 1.5; white-space: nowrap; }
.lvbadge.lv-bronze { color: #e0a070; } .lvbadge.lv-silver { color: #d6dde8; } .lvbadge.lv-gold { color: var(--gold-accent); } .lvbadge.lv-diamond { color: var(--primary-accent); box-shadow: 0 0 8px color-mix(in srgb, var(--primary-accent) 50%, transparent); }
.lbyou { position: sticky; bottom: 10px; margin-top: 12px; z-index: 5; }
.lbyoucard { background: var(--glass-bg, var(--panel)); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); background-color: var(--panel); border: var(--glass-border); border-radius: var(--radius-card); box-shadow: var(--glow-shadow); padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.lbyoutop { display: flex; justify-content: space-between; gap: 8px; }
.lvbar { height: 8px; border-radius: var(--radius-pill); background: rgba(255,255,255,.12); overflow: hidden; } .lvbar i { display: block; height: 100%; background: linear-gradient(90deg, var(--primary-accent), var(--secondary-accent)); transition: width .5s; }
.lbrecent h3 { margin: 18px 0 8px; } .lbrecentrow { display: flex; align-items: center; gap: 10px; padding: 7px 4px; border-bottom: 1px solid var(--line); font-size: 14px; }

/* the announcement inside a stream when someone levels up with a gift */
.lvlup { position: absolute; left: 50%; top: 120px; transform: translateX(-50%); z-index: 15; display: flex; align-items: center; gap: 12px; min-width: 240px; max-width: calc(100% - 24px); padding: 10px 18px 10px 10px; color: #fff; background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1.5px solid var(--lvc, var(--primary-accent)); border-radius: var(--radius-pill); box-shadow: 0 0 22px color-mix(in srgb, var(--lvc, var(--primary-accent)) 65%, transparent); animation: lvin .55s cubic-bezier(.2,1.3,.4,1) both, lvout .5s 4.7s ease-in forwards; pointer-events: none; }
.lvlup.lv-bronze { --lvc: #e0a070; } .lvlup.lv-silver { --lvc: #d6dde8; } .lvlup.lv-gold { --lvc: var(--gold-accent); } .lvlup.lv-diamond { --lvc: var(--primary-accent); }
.lvlup .lvnum { width: 46px; height: 46px; border-radius: 50%; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--lvc, var(--primary-accent)) 85%, #fff), var(--lvc, var(--primary-accent))); color: #1a1a22; box-shadow: 0 0 12px var(--lvc, var(--primary-accent)); animation: lvpulse 1s ease-in-out 3; }
.lvlup .lvnum small { font-size: 9px; font-weight: 800; letter-spacing: 1px; } .lvlup .lvnum b { font-size: 20px; font-weight: 900; }
.lvlup .lvtxt { display: flex; flex-direction: column; min-width: 0; } .lvlup .lvtxt b { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lvlup .lvtxt span { font-size: 12px; opacity: .9; }
.lvspark { position: absolute; font-size: 16px; animation: lvspark 1.6s ease-out infinite; opacity: 0; } .lvspark.s1 { left: 8px; top: -10px; } .lvspark.s2 { right: 14px; top: -12px; animation-delay: .5s; } .lvspark.s3 { right: -6px; bottom: -8px; animation-delay: 1s; }
@keyframes lvin { from { transform: translate(-50%, -30px) scale(.6); opacity: 0; } to { transform: translate(-50%, 0) scale(1); opacity: 1; } }
@keyframes lvout { to { transform: translate(-50%, -18px); opacity: 0; } }
@keyframes lvpulse { 50% { transform: scale(1.12); } }
@keyframes lvspark { 0% { transform: translateY(6px) scale(.5); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(-14px) scale(1.2); opacity: 0; } }
@media (prefers-reduced-motion:reduce) { .lvlup, .lvlup .lvnum, .lvspark { animation: none; } .lvlup { opacity: 1; } .lvspark { display: none; } }

/* image frames: hearts on the date box, dragons on the Versus panels (see /frames) */
.dbox::after { inset: -12px; border: 26px solid transparent; border-image: url(/frames/hearts.png) 64 / 26px stretch; animation: none; filter: drop-shadow(0 0 7px color-mix(in srgb, var(--primary-accent) 70%, transparent)); }
.vs .panel::before { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; border: 11cqw solid transparent; border-image: url(/frames/dragons.png) 108 / 11cqw stretch; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--c) 80%, transparent)); }
.vs .panel.b::before { transform: scaleX(-1); }
.vs .panel::after { box-shadow: inset 0 0 calc(6px + 34px * var(--lead)) calc(var(--lead) * 6px) var(--c); }
.vs .nm, .vs .vschip, .vs .crown { z-index: 4; }