: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 .e .gthumb { width:48px; height:48px; border-radius:12px; object-fit:cover; display:block; margin:0 auto; background:var(--raised); } .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: "Neon Pulse";
  --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: "Ember";
  --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: "Velvet Glass";
  --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: "Voltage";
  --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 frame: hearts on the date box (the Versus panels have no frame for now) */
.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::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; }

/* ---------- studio: controls ON the video (Go live in the middle, gear + End stream top right) ---------- */
.golivebar { position:absolute; left:14px; right:78px; bottom:calc(25% + 28px); z-index:9; display:flex; flex-direction:column; align-items:center; gap:10px; pointer-events:none; text-align:center; }
.golivebar > * { pointer-events:auto; }
.golivebar .golivebtn { padding:14px 28px; font-size:17px; border-radius:var(--radius-pill, 999px); box-shadow:0 6px 24px rgba(0,0,0,.45); }
.golivebar .golivebtn[hidden] { display:none; }
.golivebar .ovstatus { color:#fff; background:rgba(0,0,0,.5); border-radius:12px; padding:6px 10px; font-size:12px; line-height:1.35; text-shadow:0 1px 3px #000; max-width:100%; pointer-events:none; }
.golivebar .ovstatus:empty { display:none; }
.endtop { flex:none; border:0; cursor:pointer; background:var(--live); color:#fff; font:inherit; font-weight:800; font-size:12px; border-radius:var(--radius-pill, 999px); padding:0 12px; height:36px; white-space:nowrap; }
.endtop[hidden] { display:none; }
.endtop.armed { background:#fff; color:var(--live); outline:2px solid var(--live); }
.studiomenu { position:absolute; top:54px; right:10px; z-index:30; min-width:200px; background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:6px; box-shadow:0 12px 34px rgba(0,0,0,.55); display:flex; flex-direction:column; }
.studiomenu[hidden] { display:none; }
.studiomenu .mi { display:flex; align-items:center; gap:10px; width:100%; padding:11px 12px; background:none; border:0; border-radius:10px; color:var(--text); font:inherit; font-size:14px; text-align:left; cursor:pointer; }
.studiomenu .mi:hover, .studiomenu .mi:focus-visible { background:var(--raised); outline:none; }
.studiomenu .mi svg { flex:none; color:var(--soft); }

/* ---------- the streamer's ✕ on the date box / guest box, and the close ✕ on "Matched with @x" ---------- */
.hostx { position:absolute; }
.hostx .boxx { position:absolute; top:4px; right:4px; width:22px; height:22px; margin:0; padding:0; border:0; border-radius:50%; background:rgba(0,0,0,.6); color:#fff; font-size:11px; font-weight:800; line-height:22px; text-align:center; cursor:pointer; z-index:3; }
.hostx .boxx:hover, .hostx .boxx:focus-visible { background:var(--live); outline:none; }
.hostx .boxx.armed { width:auto; padding:0 8px; border-radius:11px; background:var(--live); }
.hostx .boxx:disabled { opacity:.5; cursor:default; }
.hostx .tt { padding-right:24px; }
.gbox.gfloat.strip.hostx { padding-right:34px; }
.datebar .dateclose { padding:0 10px; font-size:12px; min-width:32px; }

/* ---------- discovery tiles: the streamer's profile picture fills the tile ---------- */
.tile.haspic { position:relative; }
.tile.haspic > .tilepic { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.tile.haspic::before { content:''; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(to bottom, rgba(0,0,0,.4) 0%, rgba(0,0,0,0) 28%, rgba(0,0,0,0) 48%, rgba(0,0,0,.82) 100%); }
.tile.haspic > :not(.tilepic) { position:relative; z-index:2; }

/* the date bar sits on the left and BELOW the boxes, so it can never cover a box's ✕ (the boxes are on the right and can be dragged over it) */
.datebar { left:10px; transform:none; z-index:7; flex-wrap:wrap; align-items:flex-start; max-width:calc(100% - 152px); }

/* ---------- right-hand column: ONE drop-down button, and the heart right above Send ---------- */
.col { right:22px; bottom:66px; z-index:12; }   /* above the chat area, which it now overlaps */
.coltop { position:relative; }
.colmenu { position:absolute; right:0; bottom:100%; margin-bottom:8px; z-index:30; min-width:210px; background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:6px; box-shadow:0 12px 34px rgba(0,0,0,.55); display:flex; flex-direction:column; text-shadow:none; }
.colmenu[hidden] { display:none; }
.colmenu .mi { display:flex; align-items:center; gap:10px; width:100%; padding:11px 12px; background:none; border:0; border-radius:10px; color:var(--text); font:inherit; font-size:14px; font-weight:600; text-align:left; cursor:pointer; text-shadow:none; }
.colmenu .mi:hover, .colmenu .mi:focus-visible { background:var(--raised); outline:none; }
.colmenu .mi svg { flex:none; color:var(--soft); }
.colmenu .mi.danger, .colmenu .mi.danger svg { color:var(--live); }
.menubtn i { font-size:0; }
/* "👋 bob joined" with bob's round picture */
.chatlog .m.joinrow { display:flex; align-items:center; gap:6px; }
.chatlog .m.joinrow .joinav { flex:none; display:inline-flex; border-radius:50%; cursor:pointer; text-decoration:none; }
.chatlog .m.joinrow .joinav:hover, .chatlog .m.joinrow .joinav:focus-visible { outline:2px solid var(--accent); }

/* every typing field uses the light text colour (text areas, like the chat bot's commands and reminders, used to be black on the dark panel) */
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]), select, textarea { color:var(--text); }
textarea { background:var(--bg); font-family:inherit; font-size:14px; }
input::placeholder, textarea::placeholder { color:var(--mute); opacity:1; }
select option { color:var(--text); background:var(--panel); }

/* "Are you sure?" windows must show above the clip/replay viewer (z 200) and still let toasts through */
.overlay { z-index: 250; }
.toast { z-index: 400; }

/* bot menu: the "?" and its compact how-to */
.bothead { display:flex; align-items:center; justify-content:space-between; gap:10px; } .bothead h3 { margin:0; }
.qbtn { width:30px; height:30px; border-radius:50%; border:1.5px solid var(--mute); background:transparent; color:var(--text); font-weight:800; font-size:16px; line-height:1; cursor:pointer; }
.qbtn:hover { border-color:var(--accent); color:var(--accent); }
.howto { margin:8px 0 0; padding-left:18px; font-size:13px; line-height:1.4; color:var(--text); } .howto li { margin:3px 0; }

/* v29: sound / mic buttons, voice-only card, opening countdown */
.roundbtn.muted { background:rgba(214,48,63,.8); color:#fff; }
.voicecard { z-index:2; }
.countdown { margin:4px 0 14px; padding:12px 14px; border-radius:16px; text-align:center; background:linear-gradient(135deg, rgba(122,92,255,.18), rgba(255,92,150,.14)); border:1px solid rgba(255,255,255,.12); }
.countdown .cdtitle { font-weight:700; font-size:15px; margin-bottom:8px; }
.countdown .cdrow { display:flex; gap:10px; justify-content:center; }
.countdown .cdnum { min-width:58px; padding:6px 4px; border-radius:12px; background:rgba(0,0,0,.28); display:flex; flex-direction:column; align-items:center; }
.countdown .cdnum b { font-size:24px; font-variant-numeric:tabular-nums; line-height:1.1; }
.countdown .cdnum span { font-size:11px; opacity:.75; }
.countdown.open { padding:14px; }
@media (max-width:420px) { .countdown .cdrow { gap:6px; } .countdown .cdnum { min-width:50px; } .countdown .cdnum b { font-size:21px; } }

.profmenu { display:flex; flex-direction:column; gap:8px; margin-top:12px; }
.profmenu .btn { text-align:left; justify-content:flex-start; }
.agebadge { font-size:13px; }

.minip { display:flex; gap:12px; align-items:center; }
.minip .minit { flex:1; min-width:0; }
.ministats { display:flex; gap:8px; margin-top:10px; }
.ministats > div { flex:1; text-align:center; padding:8px 4px; border-radius:12px; background:rgba(255,255,255,.07); display:flex; flex-direction:column; align-items:center; gap:2px; }
.ministats b { font-size:18px; } .ministats span { font-size:11px; opacity:.7; }
.minimod { display:flex; flex-direction:column; gap:8px; margin-top:12px; padding-top:10px; border-top:1px solid rgba(255,255,255,.12); }

.cstats { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:10px; margin:10px 0; }
.cs { padding:12px; border-radius:14px; background:rgba(255,255,255,.07); text-align:center; display:flex; flex-direction:column; gap:2px; }
.cs b { font-size:28px; } .cs span { font-size:12px; opacity:.7; }
.ms { margin:8px 0; } .msrow { display:flex; justify-content:space-between; font-size:14px; margin-bottom:4px; }
.msbar { height:10px; border-radius:6px; background:rgba(255,255,255,.1); overflow:hidden; } .msbar i { display:block; height:100%; min-width:4px; background:#7a5cff; border-radius:6px; transition:width .6s; }
.ms.done .msbar i { background:#3ecf8e; }
.spark { width:100%; height:auto; display:block; color:inherit; }
.tilemap { display:grid; grid-template-columns:repeat(12,1fr); grid-auto-rows:minmax(34px,1fr); gap:4px; max-width:620px; margin:0 auto; }
.tilemap .ts { border-radius:8px; background:rgba(255,255,255,.06); display:flex; flex-direction:column; align-items:center; justify-content:center; font-size:11px; line-height:1.1; }
.tilemap .ts span { font-weight:700; font-size:13px; } .tilemap .ts.has b { opacity:.85; }
@media (max-width:480px) { .tilemap { gap:2px; } .tilemap .ts { font-size:9px; border-radius:5px; } .tilemap .ts span { font-size:11px; } }

/* typed birthdate box: black with white text, no calendar */
.dateinp, .dateinp:focus, .dateinp:-webkit-autofill { background:#000 !important; color:#fff !important; -webkit-text-fill-color:#fff; caret-color:#fff; border:1px solid #555; border-radius:10px; padding:10px 12px; font-size:16px; letter-spacing:1px; width:100%; max-width:220px; box-sizing:border-box; }
.dateinp::placeholder { color:#8a8a99; letter-spacing:0; }

/* v31: gifter level ring, XP bar, goals, top 3 */
.lring { --rc:#8a8a99; position:relative; display:inline-flex; vertical-align:middle; flex:none; padding:2px; border-radius:50%; isolation:isolate; margin-right:2px; }
.lring::before { content:''; position:absolute; inset:0; border-radius:50%; background:var(--rc); z-index:-1; }
.lring .avatar { display:inline-flex; box-shadow:0 0 0 2px #000; }
.lring .lrn { position:absolute; right:-5px; bottom:-5px; min-width:15px; height:15px; padding:0 3px; box-sizing:border-box; border-radius:8px; background:#000; color:var(--rc); border:1px solid var(--rc); font:700 9px/13px system-ui,sans-serif; text-align:center; font-style:normal; }
.lring.rt4, .lring.rt5, .lring.rt6, .lring.rt7 { padding:3px; }
.lring.rt8 { padding:3px; filter:drop-shadow(0 0 4px var(--rc)); }
.lring.rt5, .lring.rt6, .lring.rt7 { filter:drop-shadow(0 0 3px var(--rc)); }
.lring.rt9::before, .lring.rt10::before { background:conic-gradient(#ff4d4d,#ff9f43,#ffd24a,#3ecf8e,#4aa3ff,#9a6bff,#ff5c9a,#ff4d4d); }
.lring.rt9, .lring.rt10 { padding:3px; --rc:#fff; filter:drop-shadow(0 0 5px #ff5c9a88); }
.lring.rt10::before { animation:lrspin 3s linear infinite; }
@keyframes lrspin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce) { .lring.rt10::before { animation:none; } }
.chatlog .m .lring { margin-right:4px; }
.xpbar { margin:8px 0; } .xprow { display:flex; justify-content:space-between; font-size:13px; margin-bottom:4px; gap:8px; }
.xptrack, .gtrack { height:9px; border-radius:6px; background:rgba(255,255,255,.12); overflow:hidden; }
.xptrack i { display:block; height:100%; border-radius:6px; background:linear-gradient(90deg,#7a5cff,#ff5c9a); transition:width .6s; }
.xpnote { font-size:11px; margin-top:3px; opacity:.75; }
.xpline { display:flex; gap:10px; align-items:center; }
.gxp { margin:4px 0 10px; padding:10px; border-radius:14px; background:rgba(255,255,255,.06); }
.goalbar { padding:7px 10px; border-radius:12px; background:rgba(0,0,0,.55); backdrop-filter:blur(8px); color:#fff; font-size:12px; max-width:300px; margin-top:8px; }
.goalbar .grow1 { display:flex; justify-content:space-between; gap:10px; margin-bottom:5px; } .goalbar .gtitle { font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.goalbar .gcd { font-variant-numeric:tabular-nums; white-space:nowrap; }
.gtrack i { display:block; height:100%; border-radius:6px; background:linear-gradient(90deg,#ffd24a,#ff9f43); transition:width .6s; }
.goalbar .gnums { margin-top:4px; opacity:.9; } .goalbar.hit .gtrack i { background:linear-gradient(90deg,#3ecf8e,#9be7c4); } .goalbar.over { opacity:.7; }
.goalslot { position:absolute; left:10px; top:150px; z-index:6; pointer-events:none; }
.top3 { position:absolute; left:8px; top:46%; transform:translateY(-50%); z-index:6; display:flex; flex-direction:column; gap:10px; }
.top3[hidden], .goalslot[hidden] { display:none; }
.t3 { display:flex; flex-direction:column; align-items:center; text-decoration:none; color:#fff; }
.t3ring { position:relative; display:inline-flex; padding:3px; border-radius:50%; background:var(--tc); box-shadow:0 0 10px var(--tc); }
.t3 .avatar { box-shadow:0 0 0 2px #000; }
.t3.gold { --tc:linear-gradient(135deg,#fff3a8,#ffc928 45%,#c98f00); } .t3.silver { --tc:linear-gradient(135deg,#ffffff,#c9ced8 45%,#8b93a3); } .t3.bronze { --tc:linear-gradient(135deg,#f6c08a,#cd7f32 45%,#8a4f1b); }
.t3 .t3m { position:absolute; right:-6px; bottom:-6px; font-style:normal; font-size:15px; filter:drop-shadow(0 1px 2px #000); }
.t3 small { margin-top:3px; font-size:10px; font-weight:700; text-shadow:0 1px 3px #000; }
@media (max-width:480px) { .top3 { gap:7px; } }

.t3ring { padding:4px; } .t3 .avatar { box-shadow:0 0 0 1px #000; } .t3 .t3m { font-size:17px; right:-8px; bottom:-8px; }
.lring { padding:3px; } .lring .avatar { box-shadow:0 0 0 1px #000; }

.backlink { display:inline-flex; align-items:center; align-self:flex-start; margin:0 0 8px; padding:7px 14px; border-radius:20px; background:rgba(255,255,255,.09); color:#fff; font-weight:600; font-size:14px; text-decoration:none; cursor:pointer; }
.backlink:hover, .backlink:focus-visible { background:rgba(255,255,255,.18); }
.prof .top .backlink { display:flex; width:fit-content; margin:0 auto 10px 0; }

.vwave { width:min(86%,420px); height:auto; aspect-ratio:16/5; display:block; margin:0 auto 6px; }
.audioonly b, .voicecard b { font-size:16px; }

/* v34: log out is red; number boxes (goal amount etc.) are black with white text; admin Actions tab; goal reward bits */
input[type=number], .overlay input#goalTarget, .overlay input#goalTitle, input#goalTarget, input#goalTitle { width:100%; padding:12px 14px; margin:6px 0; background:#000; color:#fff; border:1px solid var(--line); border-radius:14px; font:inherit; box-sizing:border-box; }
input[type=number]:focus, input#goalTarget:focus, input#goalTitle:focus { outline:none; border-color:var(--accent); }
.profmenu .btn.danger { background:#e5314b; color:#fff; border-color:#e5314b; }
.actchips { display:flex; flex-wrap:wrap; gap:6px; margin:10px 0 6px; }
.actchips .chip { background:var(--panel); color:var(--text); border:1px solid var(--line); border-radius:999px; padding:6px 12px; font:inherit; font-size:13px; cursor:pointer; }
.actchips .chip.on { background:var(--accent); border-color:var(--accent); color:#fff; }
.actchips .chip small { opacity:.8; font-weight:700; }
.actlist { display:flex; flex-direction:column; gap:8px; margin-top:6px; }
.actrow { display:flex; align-items:center; justify-content:space-between; gap:12px; background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:10px 12px; }
.actrow.undone { opacity:.6; }
.actmain { min-width:0; flex:1; }
.acttext { word-break:break-word; }
.actdetail, .actwhen { font-size:12px; margin-top:2px; word-break:break-word; }
.actdone { font-size:12px; text-align:right; max-width:42%; }
.rolepill { font-size:11px; font-weight:700; padding:1px 8px; border-radius:999px; background:var(--line); color:var(--text); }
.rolepill.admin { background:#e5314b; color:#fff; } .rolepill.streamer { background:var(--accent); color:#fff; } .rolepill.moderator { background:#2d9d78; color:#fff; }
.trophy { display:inline-flex; align-items:center; gap:4px; font-weight:700; }
@media (max-width:520px) { .actrow { flex-direction:column; align-items:stretch; } .actdone { text-align:left; max-width:none; } }
.lvlup.goalup { top: 190px; }

.gfmedia { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:6px 0 10px; font-size:12px; color:var(--mute); } .gfprev { width:56px; height:56px; border-radius:12px; object-fit:cover; background:var(--raised); } .gfaud { height:32px; max-width:220px; } .giftpic { pointer-events:none; }
/* coin store */
.packgrid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin:12px 0; }
@media (min-width:560px) { .packgrid { grid-template-columns:repeat(3,1fr); } }
.pack { background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:14px 8px; text-align:center; cursor:pointer; color:var(--text); font:inherit; }
.pack:hover:not(:disabled) { border-color:var(--accent); } .pack:disabled { opacity:.6; cursor:wait; }
.pack .pc { font-size:20px; font-weight:800; } .pack .pp { font-size:16px; margin-top:4px; } .pack .pb { font-size:12px; margin-top:4px; color:var(--accent); font-weight:700; } .pack .pb.mute { color:var(--mute); font-weight:400; }
.paidnote { border:1px solid var(--accent); margin-top:10px; }
.etable { border-collapse:collapse; font-size:13px; width:100%; } .etable th, .etable td { text-align:left; padding:5px 8px; border-bottom:1px solid var(--line); white-space:nowrap; }

/* ---------- contests (contests.js) ---------- */
.cstrip { display:block; margin:0 0 14px; color:inherit; text-decoration:none; }
.chero { position:relative; border-radius:16px; overflow:hidden; background-size:cover; background-position:right center; min-height:230px; display:flex; align-items:flex-end; border:1px solid var(--line); margin:10px 0 14px; }
.chero.small { min-height:170px; margin:0; }
.chero .ch-body { padding:22px 24px; max-width:640px; }
.chero h2 { margin:6px 0 4px; font-size:30px; line-height:1.1; letter-spacing:-.01em; text-shadow:0 2px 12px rgba(0,0,0,.5); }
.chero.small h2 { font-size:23px; }
.chero .ch-tag { margin:0 0 10px; color:#e6e6f0; text-shadow:0 1px 8px rgba(0,0,0,.6); }
.chero .ch-facts { color:#c9c9d8; font-size:13px; }
.chero .ch-prize { margin-top:8px; font-size:14px; color:#dcdce8; }
.chero .ch-prize b { color:#ffd76a; font-size:16px; }
.chero .ch-count { margin-top:10px; display:inline-block; font-weight:800; font-variant-numeric:tabular-nums; background:rgba(0,0,0,.45); padding:6px 12px; border-radius:10px; }
.ch-state { display:inline-block; font-size:11px; font-weight:800; letter-spacing:.04em; padding:3px 9px; border-radius:999px; background:#444; color:#fff; text-transform:uppercase; }
.ch-state.live { background:var(--live); } .ch-state.soon { background:var(--accent); } .ch-state.ended { background:#555; }
.contests .card { margin:12px 0; }
.cme-top { display:flex; gap:28px; flex-wrap:wrap; margin-bottom:10px; }
.big { font-size:28px; display:block; }
.cparts { display:grid; grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:8px; margin:10px 0; }
.cpart { background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:8px 10px; } .cpart b { display:block; font-size:18px; } .cpart span { font-size:12px; color:var(--mute); }
.cbar { position:relative; height:10px; background:var(--bg); border-radius:6px; margin:56px 44px 52px; border:1px solid var(--line); }
.cfill { height:100%; background:linear-gradient(90deg,var(--accent),#ffd76a); border-radius:6px; }
.cmark { position:absolute; top:-6px; width:0; } .cmark::before { content:''; position:absolute; left:-7px; top:0; width:14px; height:14px; border-radius:50%; background:var(--panel); border:2px solid var(--mute); }
.cmark.hit::before { background:#ffd76a; border-color:#ffd76a; }
.cmark b { position:absolute; bottom:22px; left:0; transform:translateX(-50%); white-space:nowrap; font-size:12px; } .cmark span { position:absolute; top:22px; left:0; transform:translateX(-50%); white-space:nowrap; font-size:11px; color:var(--mute); } .cmark em { position:absolute; top:36px; left:0; transform:translateX(-50%); font-style:normal; font-size:12px; color:#ffd76a; font-weight:800; }
.cprizes, .ctable { display:flex; flex-direction:column; gap:6px; }
.cprize, .crow, .cboard { display:flex; align-items:center; gap:12px; padding:9px 12px; background:var(--bg); border:1px solid var(--line); border-radius:10px; color:inherit; text-decoration:none; }
.cprize b { min-width:90px; } .cprize span { flex:1; color:var(--soft); } .cprize em, .cboard em { font-style:normal; color:#ffd76a; font-weight:800; }
.crow span { flex:1; } .cboard.me { border-color:var(--accent); } .crank { min-width:38px; } .cboard + .cboard { margin-top:6px; } .grow { flex:1; }
.crules { margin:6px 0; padding-left:20px; color:var(--soft); } .crules li { margin:5px 0; }
.balcard .bal-top { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.bal-pill { background:var(--bg); border:1px solid var(--line); border-radius:999px; padding:5px 12px; font-weight:800; font-size:13px; } .bal-pill.ok { background:#1f7a52; border-color:#1f7a52; }
.bal-bar { height:8px; background:var(--bg); border-radius:5px; margin:10px 0; overflow:hidden; border:1px solid var(--line); } .bal-bar div { height:100%; background:linear-gradient(90deg,var(--accent),#2fa56e); }
.cchip { position:absolute; left:12px; top:64px; z-index:6; display:block; width:fit-content; max-width:calc(100% - 24px); background:rgba(0,0,0,.55); backdrop-filter:blur(6px); color:#ffd76a; font-weight:800; font-size:12px; padding:5px 10px; border-radius:999px; text-decoration:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
@media (max-width:600px) { .chero h2 { font-size:24px; } .chero .ch-body { padding:16px; } .cme-top { gap:18px; } }

/* wallet: diamonds, escrow, convert, cash out */
.econ .econ-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px 14px; margin-bottom: 4px; }
.econ .econ-stat .big { display: block; font-size: 22px; margin: 2px 0; }
.econ .econ-row { border-top: 1px solid var(--line, rgba(255,255,255,.12)); margin-top: 12px; padding-top: 10px; }
.econ .econ-why { margin: 8px 0 0; padding-left: 18px; font-size: 13px; color: var(--mute, #9aa); }
.econ-field small { display: block; margin-top: 2px; }
/* site editor output */
.sitebar { display:flex; align-items:center; justify-content:center; gap:10px; padding:8px 14px; color:#fff; font-weight:600; font-size:14px; text-align:center; }
.sitebar a.sbtxt { color:#fff; text-decoration:underline; } .sitebar .x { background:none; border:0; color:#fff; cursor:pointer; font-size:15px; opacity:.85; }
.sitehero { display:flex; align-items:center; gap:18px; background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:18px; margin:0 0 14px; flex-wrap:wrap; }
.sitehero img { width:120px; height:120px; object-fit:cover; border-radius:12px; } .sitehero .shtxt { flex:1; min-width:200px; } .sitehero h2 { margin:0 0 6px; } .sitehero p { margin:0 0 10px; color:var(--soft); }
.siteblocks img { max-width:100%; border-radius:12px; display:block; } .siteblocks .sbtext p { line-height:1.55; color:var(--soft); margin:0 0 12px; white-space:pre-line; }
.siteblocks hr { border:0; border-top:1px solid var(--line); margin:18px 0; } .sblinks ul { margin:6px 0; padding-left:20px; } .sblinks li { margin:4px 0; }
a.sitelink { white-space:nowrap; }
/* closed until launch */
.lockbox { max-width:560px; margin:8vh auto 0; padding:0 16px; text-align:center; }
.lockbox h1 { margin:0 0 8px; } .lockcd { margin:22px 0; padding:20px 14px; } .lockcd .cdtitle { font-size:18px; } .lockcd .cdnum { min-width:72px; } .lockcd .cdnum b { font-size:34px; }
.lockwho { margin-top:14px; } .lockwho .btn { display:inline-block; margin-top:6px; }
@media (max-width:420px) { .lockcd .cdnum { min-width:56px; } .lockcd .cdnum b { font-size:26px; } }
input[type=datetime-local], input[type=date] { background:var(--panel); color:var(--text); border:1px solid var(--line); border-radius:10px; padding:8px 10px; color-scheme:dark; font:inherit; }

/* someone asked to join the date box / guest box: a card pops up for the streamer */
#boxreqs { position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%); z-index: 60; display: flex; flex-direction: column; gap: 8px; width: min(420px, calc(100% - 24px)); }
.boxreq { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--panel, #1b1b22); border: 1px solid var(--primary-accent, #7c5cff); border-radius: 14px; box-shadow: 0 8px 28px rgba(0,0,0,.5); flex-wrap: wrap; }
.boxreq .grow { flex: 1 1 140px; min-width: 0; } .boxreq .btn { min-height: 40px; }

/* wallet: your coin balance in big type with the Buy coins button beside it */
.coinsbig { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.coinsbig .cbn { flex:1 1 160px; min-width:0; } .coinsbig .cbl { color:var(--mute); font-size:13px; } .coinsbig .cbv { font-size:34px; font-weight:800; line-height:1.15; overflow-wrap:anywhere; }
footer.legal a { display:inline-block; padding:6px 2px; }
/* the top bar can never push the page sideways or squash a button: when it is too full it scrolls on its own */
@media (max-width:640px) {
  header { overflow:hidden; }
  header nav { min-width:0; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
  header nav::-webkit-scrollbar { display:none; }
  header nav > * { flex:0 0 auto; }
  header .logo { flex:0 0 auto; }
}
@media (max-width:420px) { #nav-streams { display:none; } }   /* the logo already goes to the streams page: that frees the room for Wallet on a small phone */

/* Moderator menu + App staff tag */
.rb.staff { background:#0ea5e9; color:#fff; border-radius:6px; padding:1px 6px; font-size:10px; font-weight:800; letter-spacing:.3px; }
.modmenu .modtile:hover { border-color:var(--accent); }
.modmenu .item.modu { cursor:pointer; }
.modmenu select, .modmenu input[type=text] { max-width:100%; }
.modmenu .modtile { color:var(--text); font:inherit; }
.modmenu .row { flex-wrap:wrap; align-items:center; }
.modmenu .row > input[type=text] { flex:1 1 220px; width:auto; min-width:0; }
.modmenu .row > select { flex:0 1 auto; width:auto; }
.gift.wheeltile { border-color:#b58cff; background:linear-gradient(160deg,rgba(181,140,255,.22),rgba(255,106,160,.16)); }
footer.legal .entity { color:var(--mute); flex-basis:100%; text-align:center; margin-top:4px; }