/* Whompo — app styles (ported from the prototype's in-device look) */
:root{
  /* amber stays the brand and the "this is yours / this is on" colour;
     teal does the work on buttons and filled controls. Neutrals sit just off
     black with a slight cool bias so the app doesn't read as black-and-orange. */
  --amber:#FFB020; --teal:#127C71; --teal-2:#4FC2B2; --red:#D6453A;
  --primary:#1B9C8B; --primary-ink:#04231F; --primary-soft:rgba(27,156,139,.16);
  --bg:#0E1216; --bg-2:#141A20; --bg-3:#1A2229; --line:#252F37; --line-2:#313E48;
  --text:#EDF2F3; --muted:#96A4AC; --faint:#6b7a83;
  --nav-h:56px;
  --safe-top:env(safe-area-inset-top, 0px);
  --safe-bottom:env(safe-area-inset-bottom, 0px);
}
*{box-sizing:border-box}
html,body{height:100%; margin:0}
body{
  background:#050607; color:var(--text);
  font-family:Archivo, "Helvetica Neue", Arial, sans-serif; font-size:15px; line-height:1.5;
  -webkit-font-smoothing:antialiased; overscroll-behavior:none;
}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer; padding:0; -webkit-tap-highlight-color:transparent}
input,textarea,select{font:inherit; color:inherit}
a{color:inherit; text-decoration:none}
:focus-visible{outline:2px solid var(--amber); outline-offset:2px; border-radius:3px}
[hidden]{display:none !important}
.mono{font-family:"IBM Plex Mono",monospace}

/* ---------- shell ---------- */
.app{
  position:relative; height:100dvh; max-width:560px; margin:0 auto; overflow:hidden;
  display:flex; flex-direction:column; background:var(--bg);
}
@media (min-width:600px){ .app{box-shadow:0 0 0 1px #1b2023, 0 0 80px rgba(0,0,0,.6)} }
.screen{flex:1; min-height:0; min-width:0; position:relative; display:flex; flex-direction:column}
.scr{flex:1; min-height:0; min-width:0; display:flex; flex-direction:column; position:relative}

/* generic top bar + scrolling body */
.topbar{
  flex:none; display:flex; align-items:center; gap:10px; height:48px; padding:0 14px;
  padding-top:var(--safe-top); box-sizing:content-box; border-bottom:1px solid var(--line);
  font-weight:700; font-size:15px; background:var(--bg);
}
.topbar .back{width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font-size:20px; line-height:1; color:var(--muted); margin-left:-6px}
.topbar .grow{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.topbar .act{color:var(--amber); font-weight:700; font-size:14px}
.body{flex:1; min-height:0; min-width:0; overflow-y:auto; -webkit-overflow-scrolling:touch; scrollbar-width:thin}
.pad{padding:14px}
.sec{font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); margin:0 0 8px}
.empty{color:var(--muted); font-size:13.5px; text-align:center; padding:34px 18px; line-height:1.55}
.empty b{color:var(--text)}
.spinner{width:22px; height:22px; border-radius:50%; border:2px solid var(--line-2); border-top-color:var(--amber); animation:spin .8s linear infinite; margin:24px auto}
@keyframes spin{to{transform:rotate(360deg)}}
.loading-row{display:flex; justify-content:center; padding:16px}

/* buttons + fields */
.btn{
  display:block; width:100%; background:var(--primary); color:#fff; font-weight:700; font-size:15px;
  padding:12px; border-radius:10px; text-align:center;
}
.btn.ghost{background:none; color:var(--muted); border:1px solid var(--line-2); font-weight:600}
.btn.red{background:var(--red); color:#fff}
.btn.dark{background:var(--line-2); color:#fff}
.btn[disabled]{opacity:.45; cursor:not-allowed}
.btn.sm{width:auto; display:inline-block; font-size:12.5px; padding:7px 16px; border-radius:8px}
.field{margin-bottom:14px}
.field label{display:block; font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); margin-bottom:6px}
.field input, .field textarea, .field select{
  width:100%; background:#191d1f; border:1px solid var(--line); border-radius:9px;
  padding:11px 12px; outline:none; resize:none; font-size:15px; color:var(--text);
}
.field input:focus, .field textarea:focus, .field select:focus{border-color:var(--amber)}
.field .hint{font-size:12px; color:var(--faint); margin-top:5px}
.field .err{font-size:12px; color:#ff9a93; margin-top:5px}
.field .ok{font-size:12px; color:var(--teal-2); margin-top:5px}
.form-err{background:rgba(214,69,58,.14); border:1px solid rgba(214,69,58,.45); color:#ffb4ae; border-radius:9px; padding:10px 12px; font-size:13px; margin-bottom:14px}
.link{color:var(--amber); font-weight:600}
.chips{display:flex; flex-wrap:wrap; gap:6px}
.chip{font-size:12px; font-weight:600; padding:6px 11px; border-radius:20px; border:1px solid var(--line); color:var(--muted); background:#141719}
.chip[aria-pressed="true"]{background:var(--primary); color:#fff; border-color:var(--primary)}

/* ---------- auth ---------- */
.auth{flex:1; display:flex; flex-direction:column; padding:calc(var(--safe-top) + 26px) 22px 28px; overflow-y:auto}
.auth .logo{display:flex; align-items:center; gap:8px; font-weight:800; font-size:22px; letter-spacing:-.02em; margin-bottom:26px}
.auth .logo i{width:9px; height:9px; border-radius:50%; background:var(--amber)}
.auth h1{font-size:26px; font-weight:800; letter-spacing:-.02em; margin:0 0 6px; line-height:1.2}
.auth .lead{color:var(--muted); font-size:14px; margin:0 0 22px; line-height:1.5}
.auth .foot{margin-top:auto; padding-top:22px; text-align:center; font-size:13.5px; color:var(--muted)}
.auth .legal{font-size:11.5px; color:var(--faint); text-align:center; margin-top:14px; line-height:1.5}
.welcome{flex:1; display:flex; flex-direction:column; justify-content:flex-end; padding:0 22px 34px; position:relative; overflow:hidden}
.welcome .glow{position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(circle at 25% 20%, rgba(255,176,32,.35), transparent 42%),
             radial-gradient(circle at 80% 30%, rgba(63,179,164,.28), transparent 40%),
             radial-gradient(circle at 60% 90%, rgba(214,69,58,.28), transparent 45%)}
.welcome > *{position:relative; z-index:1}
.wel-inner{flex:1; display:flex; flex-direction:column; justify-content:flex-end; position:relative; z-index:1}
.welcome .logo{font-size:40px; font-weight:800; letter-spacing:-.03em; margin-bottom:6px; display:flex; align-items:center; gap:10px}
.welcome .logo i{width:14px; height:14px; border-radius:50%; background:var(--amber)}
.welcome p{color:var(--muted); font-size:15px; margin:0 0 26px; max-width:300px}
.wel-points{display:none}
.wel-acts .btn + .btn{margin-top:9px}
.wel-art{display:none}
.avatar-pick{display:flex; align-items:center; gap:14px; margin-bottom:16px}
.avatar-pick .pf{width:74px; height:74px; font-size:28px}
.avatar-pick .btn.sm{margin-top:0}

/* ---------- avatars, covers ---------- */
.pf{border-radius:50%; display:grid; place-items:center; overflow:hidden; flex:none; font-weight:800; color:rgba(255,255,255,.92); text-transform:uppercase}
.pf img{width:100%; height:100%; object-fit:cover; display:block}
.pf.sm{width:36px; height:36px; font-size:14px}
.pf.xs{width:26px; height:26px; font-size:11px}

/* ---------- bottom nav ---------- */
.nav{
  flex:none; height:calc(var(--nav-h) + var(--safe-bottom)); padding-bottom:var(--safe-bottom);
  display:flex; align-items:center; justify-content:space-around;
  border-top:1px solid var(--line); background:rgba(10,12,13,.96); z-index:36;
}
.nav > button{display:flex; flex-direction:column; align-items:center; gap:2px; font-size:10px; font-weight:600; color:var(--faint); width:56px; position:relative}
.nav > button[aria-current="true"]{color:#fff}
.nav svg{width:23px; height:23px}
.nav .newbtn{width:44px; height:29px; border-radius:8px; background:#fff; color:#0a0c0d; display:grid; place-items:center; font-size:20px; font-weight:700; line-height:1;
  box-shadow:-3px 0 0 -1px var(--amber), 3px 0 0 -1px var(--teal)}
.nav .lbl{display:none}
.nav .deskonly{display:none}
.navsearch{display:none}
.feedarrows{display:none}
.nav .dot{position:absolute; top:-2px; right:14px; min-width:16px; height:16px; border-radius:8px; background:var(--red); color:#fff; font-size:9.5px; font-weight:700; line-height:16px; text-align:center; padding:0 4px}

/* ---------- feed ---------- */
.feedwrap{position:absolute; inset:0; background:#000}
.feed{position:absolute; inset:0; overflow-y:auto; scroll-snap-type:y mandatory; scrollbar-width:none; overscroll-behavior:contain}
.feed::-webkit-scrollbar{display:none}
.slide{position:relative; height:100%; scroll-snap-align:start; scroll-snap-stop:always; background:#000; overflow:hidden}
.slide video{width:100%; height:100%; object-fit:cover; display:block; background:#000}
.slide video.contain{object-fit:contain}
.slide .poster{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; transition:opacity .25s}
.slide.playing .poster{opacity:0; pointer-events:none}
.slide .scrim-g{position:absolute; inset:0; pointer-events:none; z-index:2;
  background:linear-gradient(180deg, rgba(0,0,0,.5) 0 10%, transparent 24% 46%, rgba(0,0,0,.78) 100%)}
.feedtabs{position:absolute; top:calc(var(--safe-top) + 10px); left:0; right:0; z-index:20; display:flex; justify-content:center; gap:22px; font-size:15px; font-weight:600}
.feedtabs button{color:rgba(255,255,255,.62); text-shadow:0 1px 4px rgba(0,0,0,.5); padding:3px 0}
.feedtabs button[aria-selected="true"]{color:#fff; box-shadow:inset 0 -2px 0 0 var(--amber)}
.fbackbar{position:absolute; top:calc(var(--safe-top) + 8px); left:0; right:0; z-index:22; display:flex; align-items:center; gap:8px; padding:0 10px}
.fbackbar button{display:flex; align-items:center; gap:5px; background:rgba(0,0,0,.5); border-radius:20px; padding:6px 13px 6px 10px; color:#fff; font-size:12.5px; font-weight:700; backdrop-filter:blur(6px)}
.fbackbar .lbl{color:#fff; font-size:12.5px; font-weight:600; text-shadow:0 1px 4px rgba(0,0,0,.75); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.rail{position:absolute; right:10px; bottom:18px; z-index:20; display:flex; flex-direction:column; align-items:center; gap:17px}
.rail button{display:flex; flex-direction:column; align-items:center; gap:3px; color:#fff; font-size:11px; font-weight:600; text-shadow:0 1px 4px rgba(0,0,0,.55)}
.rail svg{width:30px; height:30px; filter:drop-shadow(0 1px 3px rgba(0,0,0,.5))}
.rail .liked svg{fill:var(--amber); stroke:var(--amber)}
.rail .avatar{width:44px; height:44px; border-radius:50%; border:2px solid #fff; position:relative; display:grid; place-items:center; overflow:visible}
.rail .avatar .pf{width:100%; height:100%; font-size:16px}
.rail .avatar .plus{position:absolute; bottom:-8px; left:50%; transform:translateX(-50%); width:18px; height:18px; border-radius:50%; background:var(--primary); color:#fff; font-size:13px; line-height:16px; font-weight:700; border:1px solid #fff; text-align:center}
.rail .avatar .plus.done{background:var(--teal-2); color:#fff}
.rail .avatar .livetag{position:absolute; bottom:-9px; left:50%; transform:translateX(-50%); background:var(--red); color:#fff; font-size:8px; font-weight:700; letter-spacing:.06em; padding:1px 4px; border-radius:3px; border:1px solid #0a0c0d}
.meta{position:absolute; left:14px; right:76px; bottom:18px; z-index:20; color:#fff; text-shadow:0 1px 5px rgba(0,0,0,.6)}
.meta .handle{font-weight:700; font-size:15px; margin-bottom:3px}
.meta .cap{font-size:13.5px; line-height:1.4; margin-bottom:4px; white-space:pre-wrap; word-break:break-word}
.meta .cap.clamp{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.meta .tag{font-weight:700}
.meta .more{font-size:12px; color:rgba(255,255,255,.7); font-weight:600}
.progress{position:absolute; left:0; right:0; bottom:0; height:2px; z-index:21; background:rgba(255,255,255,.2)}
.progress i{display:block; height:100%; background:#fff; width:0}
.burst{position:absolute; left:50%; top:46%; transform:translate(-50%,-50%) scale(.4); z-index:22; opacity:0; pointer-events:none; font-size:88px; color:var(--amber)}
.burst.go{animation:burst .72s ease-out}
@keyframes burst{0%{opacity:0;transform:translate(-50%,-50%) scale(.4) rotate(-14deg)}22%{opacity:1;transform:translate(-50%,-50%) scale(1.18) rotate(6deg)}70%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(0)}100%{opacity:0;transform:translate(-50%,-52%) scale(1.05)}}
.pausedot{position:absolute; inset:0; display:none; place-items:center; z-index:21; pointer-events:none; font-size:60px; color:rgba(255,255,255,.85); text-shadow:0 2px 12px rgba(0,0,0,.6)}
.slide.paused .pausedot{display:grid}
.mutepill{position:absolute; left:50%; top:calc(var(--safe-top) + 52px); transform:translateX(-50%); z-index:23; background:rgba(0,0,0,.55); color:#fff; font-size:12px; font-weight:700; border-radius:20px; padding:6px 12px; display:flex; align-items:center; gap:6px; backdrop-filter:blur(6px); white-space:nowrap}
.mutepill svg{width:15px; height:15px; flex:none}
.feedmsg{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; z-index:5; text-align:center; padding:30px; color:var(--muted); font-size:14px; line-height:1.5}
.feedmsg b{color:#fff; font-size:17px}
.feedmsg .btn{width:auto; padding:10px 22px}

/* ---------- comments sheet + generic sheet ---------- */
.scrim{position:absolute; inset:0; background:rgba(0,0,0,.5); z-index:39; opacity:0; pointer-events:none; transition:opacity .24s}
.scrim.on{opacity:1; pointer-events:auto}
.sheet{position:absolute; left:0; right:0; bottom:0; max-height:80%; z-index:40; background:var(--bg-3); border-radius:16px 16px 0 0; border-top:1px solid var(--line);
  display:flex; flex-direction:column; transform:translateY(102%); transition:transform .26s cubic-bezier(.2,.8,.3,1); padding-bottom:var(--safe-bottom)}
.sheet.open{transform:translateY(0)}
.sheet.tall{height:70%}
.sheet-h{flex:none; display:flex; align-items:center; gap:8px; padding:12px 14px; border-bottom:1px solid var(--line); font-size:14px; font-weight:700}
.sheet-h .x{margin-left:auto; color:var(--muted); font-size:16px; line-height:1; width:28px; height:28px; border-radius:50%; background:rgba(255,255,255,.08); display:grid; place-items:center}
.sheet-b{flex:1; min-height:0; overflow-y:auto; padding:12px 14px}
.sheet-f{flex:none; padding:10px 14px; border-top:1px solid var(--line)}
.cmts{display:flex; flex-direction:column; gap:14px}
.cmt{display:flex; gap:10px}
.cmt-b{flex:1; min-width:0}
.cmt-b b{font-size:12px; color:var(--muted); font-weight:600}
.cmt-b p{margin:2px 0 3px; font-size:14px; line-height:1.4; word-break:break-word}
.cmt-b .meta2{font-size:11px; color:var(--faint); display:flex; gap:12px}
.cmt-b .meta2 button{color:var(--faint); font-size:11px; font-weight:600}
.cmt-input{display:flex; gap:8px; align-items:center}
.cmt-input input{flex:1; min-width:0; background:#101314; border:1px solid var(--line); border-radius:20px; padding:9px 14px; outline:none; font-size:14px}
.cmt-input input:focus{border-color:var(--amber)}
.cmt-input button{color:var(--teal-2); font-weight:700; font-size:14px; padding:0 4px}
.cmt-input button[disabled]{color:var(--faint)}
.menu{display:flex; flex-direction:column}
.menu button{display:flex; align-items:center; gap:12px; padding:14px 6px; border-bottom:1px solid var(--line); font-size:15px; font-weight:600; text-align:left}
.menu button:last-child{border-bottom:0}
.menu button.danger{color:#ff9a93}
.menu button small{margin-left:auto; color:var(--faint); font-weight:500; font-size:12px}

/* toast */
.toast{position:absolute; left:50%; bottom:calc(var(--nav-h) + var(--safe-bottom) + 18px); transform:translate(-50%,10px); z-index:60; background:rgba(20,24,26,.96); border:1px solid var(--line); color:#fff; font-size:13px; padding:9px 15px; border-radius:20px; opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; white-space:nowrap; max-width:88%; overflow:hidden; text-overflow:ellipsis}
.toast.on{opacity:1; transform:translate(-50%,0)}

/* ---------- discover ---------- */
.dsc-head{flex:none; padding:calc(var(--safe-top) + 10px) 12px 10px; border-bottom:1px solid var(--line); background:var(--bg)}
.search{display:flex; align-items:center; gap:8px; background:#191d1f; border:1px solid var(--line); border-radius:10px; padding:9px 12px}
.search svg{width:16px; height:16px; color:var(--faint); flex:none}
.search input{flex:1; min-width:0; background:none; border:0; outline:none; font-size:15px}
.search input::placeholder{color:var(--faint)}
.search .clr{width:18px; height:18px; border-radius:50%; background:rgba(255,255,255,.18); color:#cfd6d9; font-size:11px; line-height:18px; text-align:center; flex:none}
.seg{display:flex; gap:2px; background:#141719; border:1px solid var(--line); border-radius:9px; padding:2px; margin-bottom:12px}
.seg button{flex:1; font-size:12px; font-weight:600; padding:6px 0; border-radius:7px; color:var(--muted)}
.seg button[aria-selected="true"]{background:var(--line-2); color:#fff}
.res-h{display:flex; align-items:baseline; gap:6px; margin:4px 0 8px}
.res-h span{font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--muted)}
.res-h b{font-family:"IBM Plex Mono",monospace; font-size:11px; color:var(--amber)}
.rowitem{display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--line)}
.rowitem:last-child{border-bottom:0}
.rowitem .pf{width:40px; height:40px; font-size:15px}
.rowitem .tagic{width:40px; height:40px; border-radius:10px; display:grid; place-items:center; background:#1b1f21; color:var(--amber); font-size:17px; font-weight:800; flex:none}
.rowitem .rb{flex:1; min-width:0; cursor:pointer}
.rowitem .rb b{display:block; font-size:14px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.rowitem .rb small{display:block; font-size:12px; color:var(--muted); margin-top:1px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.rowitem .act{font-size:12px; font-weight:700; border-radius:16px; padding:6px 13px; flex:none; background:var(--red); color:#fff}
.rowitem .act.on{background:var(--line-2); color:var(--muted)}
.liveflag{font-size:8.5px; font-weight:700; letter-spacing:.08em; color:#fff; background:var(--red); border-radius:3px; padding:1px 4px; margin-left:5px; vertical-align:2px}
.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:3px}
.grid.dense{gap:4px}
.cell{position:relative; aspect-ratio:9/16; background:#111; border-radius:4px; overflow:hidden; cursor:pointer}
.grid.dense .cell{aspect-ratio:9/12; border-radius:6px}
.cell img{width:100%; height:100%; object-fit:cover; display:block}
.cell .v{position:absolute; left:5px; bottom:4px; font-size:11px; font-weight:600; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.8); display:flex; align-items:center; gap:3px}
.cell .v svg{width:12px; height:12px}
.cell .badge{position:absolute; top:5px; right:5px; font-size:9px; font-weight:700; letter-spacing:.05em; background:var(--primary); color:#fff; padding:1px 5px; border-radius:3px}
.cell .badge.gray{background:rgba(0,0,0,.6); color:#fff}
.cell .who{position:absolute; left:5px; top:5px; font-size:10.5px; font-weight:700; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.8); max-width:90%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.liverail{display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; margin-bottom:16px; scrollbar-width:none}
.liverail::-webkit-scrollbar{display:none}
.livecard{flex:none; width:104px; text-align:left; border-radius:8px; overflow:hidden; position:relative; background:#111; border:1px solid var(--line)}
.livecard .pf{width:100%; height:auto; aspect-ratio:3/4; border-radius:0; font-size:34px}
.livecard .lp{position:absolute; top:5px; left:5px}
.livecard .vc{position:absolute; top:5px; right:5px; font-size:9.5px; font-weight:600; color:#fff; background:rgba(0,0,0,.55); padding:1px 5px; border-radius:3px}
.livecard b{display:block; font-size:11px; padding:5px 7px 2px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.livecard small{display:block; font-size:10px; color:var(--muted); padding:0 7px 7px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.livepill{display:inline-flex; align-items:center; gap:4px; background:var(--red); color:#fff; font-size:9px; font-weight:700; letter-spacing:.08em; padding:2px 5px; border-radius:3px}
.livepill i{width:4px; height:4px; border-radius:50%; background:#fff; animation:blip 1.4s ease-in-out infinite}
@keyframes blip{50%{opacity:.25}}

/* ---------- profile ---------- */
.phead{position:relative; overflow:hidden; display:flex; flex-direction:column; align-items:center; gap:8px; padding:calc(var(--safe-top) + 58px) 14px 16px}
.phead > *:not(.cover):not(.pback):not(.pedit):not(.pmore){position:relative; z-index:2}
.cover{position:absolute; inset:0; z-index:0; overflow:hidden}
.cover img{width:112%; height:112%; margin:-6%; object-fit:cover; filter:blur(7px) saturate(1.2) brightness(.85)}
.cover.photo img{filter:none; width:100%; height:100%; margin:0}
.cover:after{content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.12) 0%, rgba(10,12,13,.62) 58%, rgba(10,12,13,.94) 100%)}
.cover.own{cursor:pointer}
.pback, .pedit, .pmore{position:absolute; top:calc(var(--safe-top) + 10px); z-index:3; width:32px; height:32px; border-radius:50%; background:rgba(0,0,0,.5); color:#fff; text-align:center; border:1px solid rgba(255,255,255,.22); display:grid; place-items:center}
.pback{left:10px; font-size:18px}
.pedit{right:10px; font-size:14px}
.pmore{right:10px; font-size:16px; letter-spacing:1px}
.phead .pf{width:80px; height:80px; font-size:30px; box-shadow:0 0 0 3px rgba(10,12,13,.55)}
.phead .h{font-weight:700; font-size:16px}
.phead .dn{font-weight:600; font-size:14px; color:#d7dde0; margin-top:-6px}
.stats{display:flex; gap:20px; margin:2px 0 6px}
.stat{text-align:center; cursor:pointer}
.stat b{display:block; font-size:15px; font-weight:700; font-variant-numeric:tabular-nums}
.stat span{font-size:11px; color:var(--muted); white-space:nowrap}
.pbio{font-size:13.5px; color:#c9d1d4; text-align:center; max-width:260px; line-height:1.45; margin:0; white-space:pre-wrap; word-break:break-word}
.phead .actions{display:flex; gap:7px; margin-top:8px}
.btn2{font-size:13px; font-weight:700; border-radius:9px; padding:8px 22px; background:var(--red); color:#fff}
.btn2.on{background:var(--line-2); color:var(--muted)}
.btn2.ghost2{background:var(--line-2); color:#fff}
.phead .livenow{display:flex; align-items:center; gap:6px; margin-top:9px; background:rgba(214,69,58,.14); border:1px solid rgba(214,69,58,.5); border-radius:20px; padding:4px 6px 4px 9px; font-size:12px; max-width:100%}
.phead .livenow b{font-weight:700; color:#ff9a93; flex:none}
.phead .livenow span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#c9d1d4}
.phead .livenow button{background:var(--red); color:#fff; font-size:11px; font-weight:700; border-radius:14px; padding:4px 11px; flex:none}
.ptabs{display:flex; border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--bg); z-index:2}
.ptabs button{flex:1; padding:10px 0; font-size:13.5px; color:var(--muted); font-weight:600}
.ptabs button[aria-selected="true"]{color:#fff; box-shadow:inset 0 -2px 0 0 #fff}
.pgrid{padding:3px}

/* cover / avatar picker */
.swatches{display:flex; gap:7px; overflow-x:auto; padding-bottom:9px; margin-bottom:10px; scrollbar-width:none}
.swatches::-webkit-scrollbar{display:none}
.sw{flex:none; width:54px; height:36px; border-radius:7px; overflow:hidden; border:2px solid transparent; background:#0e1112}
.sw[aria-pressed="true"]{border-color:var(--amber)}
.cp-row{display:flex; gap:7px}
.cp-row .btn{flex:1; font-size:13px; padding:10px 0}
.ep-row{display:flex; align-items:center; gap:10px; padding:2px 0 14px}
.ep-row .pf{width:44px; height:44px; font-size:18px}
.ep-b{flex:1; min-width:0}
.ep-b b{display:block; font-size:13px; font-weight:700}
.ep-b small{display:block; font-size:11.5px; color:var(--muted)}
.ep-btn{font-size:11px; font-weight:700; border-radius:16px; padding:6px 11px; flex:none; background:var(--line-2); color:#fff}
.ep-lab{margin:0 0 8px; font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); border-top:1px solid var(--line); padding-top:12px}

/* ---------- inbox ---------- */
.note{display:flex; gap:11px; padding:12px 14px; border-bottom:1px solid var(--line); align-items:center; cursor:pointer}
.note.unread{background:rgba(255,176,32,.05)}
.note .pf{width:40px; height:40px; font-size:15px}
.note-b{flex:1; min-width:0; font-size:13.5px; line-height:1.35}
.note-b b{font-weight:700}
.note-b span{color:var(--muted)}
.note-b p{margin:2px 0 0; font-size:12.5px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.note-t{font-size:11px; color:var(--faint); flex:none}
.note-th{width:34px; height:46px; border-radius:4px; object-fit:cover; flex:none; background:#111}
.note .fbtn{font-size:11.5px; font-weight:700; border-radius:14px; padding:5px 11px; flex:none; background:var(--red); color:#fff}
.note .fbtn.on{background:var(--line-2); color:var(--muted)}

/* ---------- upload ---------- */
.up-pick{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; border:1.5px dashed var(--line-2); border-radius:14px; padding:40px 20px; text-align:center; color:var(--muted); font-size:13.5px; cursor:pointer}
.up-pick b{color:#fff; font-size:15px}
.up-pick svg{width:36px; height:36px; color:var(--amber)}
.up-prev{display:flex; gap:12px; align-items:flex-start; margin-bottom:14px}
.up-prev video{width:96px; aspect-ratio:9/16; object-fit:cover; border-radius:10px; background:#000; flex:none}
.up-prev .info{flex:1; min-width:0; font-size:12.5px; color:var(--muted); line-height:1.5}
.up-prev .info b{display:block; color:#fff; font-size:13.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.up-prev .info button{color:var(--amber); font-weight:700; font-size:12.5px; margin-top:6px}
.pipe{display:flex; flex-direction:column; gap:12px; margin-top:6px}
.pstep{display:flex; gap:11px; align-items:flex-start; font-size:14px; opacity:.4; transition:opacity .3s}
.pstep.on, .pstep.done{opacity:1}
.pstep .dot{width:18px; height:18px; border-radius:50%; border:2px solid var(--line-2); flex:none; margin-top:2px; display:grid; place-items:center; font-size:11px; color:#241a00}
.pstep.on .dot{border-color:var(--amber); animation:pulse 1.1s ease-in-out infinite}
.pstep.done .dot{background:var(--teal); border-color:var(--teal); color:#fff}
.pstep.fail .dot{background:var(--red); border-color:var(--red); color:#fff}
@keyframes pulse{50%{box-shadow:0 0 0 5px rgba(255,176,32,.22)}}
.pstep b{display:block; font-weight:600}
.pstep small{color:var(--muted); font-size:12px; font-family:"IBM Plex Mono",monospace}
.bar{height:6px; border-radius:3px; background:var(--line); overflow:hidden; margin-top:8px}
.bar i{display:block; height:100%; width:0; background:var(--primary); transition:width .2s}

/* ---------- settings / lists ---------- */
.list{display:flex; flex-direction:column}
.list .row{display:flex; align-items:center; gap:12px; padding:14px; border-bottom:1px solid var(--line); font-size:15px; font-weight:600; text-align:left; width:100%}
.list .row small{margin-left:auto; color:var(--faint); font-weight:500; font-size:12.5px}
.list .row.danger{color:#ff9a93}
.userrow{display:flex; align-items:center; gap:10px; padding:10px 14px; border-bottom:1px solid var(--line)}
.userrow .rb{flex:1; min-width:0; cursor:pointer}
.userrow .rb b{display:block; font-size:14px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.userrow .rb small{display:block; font-size:12px; color:var(--muted)}

/* ---------- misc ---------- */
.badge-soon{font-family:"IBM Plex Mono",monospace; font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:var(--amber); border:1px solid rgba(255,176,32,.4); border-radius:4px; padding:1px 5px; margin-left:6px; vertical-align:middle}
.center{display:flex; flex-direction:column; align-items:center; justify-content:center; flex:1; padding:30px; text-align:center; gap:10px}
.center h2{margin:0; font-size:20px}
.center p{margin:0; color:var(--muted); font-size:14px; max-width:300px; line-height:1.5}
.install-tip{position:absolute; left:12px; right:12px; bottom:calc(var(--nav-h) + var(--safe-bottom) + 12px); z-index:30; background:var(--bg-3); border:1px solid var(--line-2); border-radius:12px; padding:12px 14px; font-size:13px; display:flex; gap:10px; align-items:center; box-shadow:0 10px 30px rgba(0,0,0,.5)}
.install-tip b{display:block; font-size:13.5px}
.install-tip span{color:var(--muted); font-size:12px}
.install-tip button{color:var(--amber); font-weight:700; margin-left:auto; flex:none}

/* =================================================================== live rooms */
.livewrap{position:absolute; inset:0; display:flex; flex-direction:column; overflow:hidden; background:#000; padding-top:var(--safe-top)}
.livewrap:before{content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,.55) 0 12%, transparent 24% 46%, rgba(0,0,0,.72) 100%)}
.lv-stage{position:absolute; inset:0; z-index:0; background:#000}
.lv-stage video, .lv-stage .gt-pfp{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.lv-stage video.contain{object-fit:contain; background:#07090b}
.lv-stage .gt-pfp{display:grid; place-items:center; font-size:96px; font-weight:800; color:rgba(255,255,255,.92)}
.lv-stage .gt-pfp .pf{width:140px; height:140px; font-size:56px}
.lv-top{position:relative; z-index:3; flex:none; display:flex; align-items:center; gap:6px; padding:8px 10px 0}
.lv-host{display:flex; align-items:center; gap:7px; background:rgba(0,0,0,.42); border:1px solid rgba(255,255,255,.14); border-radius:20px; padding:3px 11px 3px 3px; min-width:0; backdrop-filter:blur(6px); position:relative}
.lv-host .pf{width:28px; height:28px; font-size:12px}
.lv-host .who{min-width:0; line-height:1.15}
.lv-host b{display:block; font-size:12px; font-weight:700; color:#fff; max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.lv-host small{display:block; font-size:9.5px; color:rgba(255,255,255,.72)}
.lv-host .clock{font-family:"IBM Plex Mono",monospace; font-size:11px; color:#fff; font-variant-numeric:tabular-nums}
.lv-follow{position:absolute; left:23px; top:22px; width:15px; height:15px; border-radius:50%; background:var(--red); color:#fff; font-size:12px; line-height:13px; text-align:center; border:1.5px solid #101010}
.lv-follow.on{background:var(--teal-2); font-size:9px}
.lv-watchers{margin-left:auto; display:flex; align-items:center; gap:5px; background:rgba(0,0,0,.42); border:1px solid rgba(255,255,255,.14); border-radius:20px; padding:5px 10px; backdrop-filter:blur(6px); flex:none; font-size:11.5px; font-weight:700; color:#fff; font-variant-numeric:tabular-nums}
.lv-watchers svg{width:13px; height:13px; opacity:.85}
.lv-x{width:30px; height:30px; border-radius:50%; background:rgba(0,0,0,.42); border:1px solid rgba(255,255,255,.14); color:#fff; font-size:14px; display:grid; place-items:center; flex:none}
.lv-feat{position:absolute; left:10px; top:calc(var(--safe-top) + 50px); z-index:3; background:rgba(0,0,0,.45); border:1px solid rgba(255,255,255,.14); border-radius:14px; padding:3px 10px; font-size:11px; font-weight:700; color:#fff; backdrop-filter:blur(6px)}
.lv-feat i{font-style:normal; color:rgba(255,255,255,.7); font-weight:500}
.lv-mid{flex:1; min-height:0; position:relative; z-index:2}
/* guest boxes: a column on the right; a row under the screen when someone shares */
.pip{position:absolute; right:8px; top:calc(var(--safe-top) + 48px); z-index:4; display:flex; flex-direction:column; gap:6px}
.pip .gt{position:relative; width:84px; height:112px; border-radius:10px; overflow:hidden; background:#101416; border:1.5px solid rgba(255,255,255,.4); box-shadow:0 6px 18px rgba(0,0,0,.55); cursor:pointer}
.pip .gt video{width:100%; height:100%; object-fit:cover; display:block}
.pip .gt .gt-pfp{width:100%; height:100%; display:grid; place-items:center; font-size:30px; font-weight:800; color:rgba(255,255,255,.92)}
.pip .gt.speaking{border-color:#3EC8F4}
.pip .gt .lab{position:absolute; left:0; right:0; bottom:0; padding:3px 6px; font-size:9px; font-weight:700; color:#fff; background:linear-gradient(180deg, transparent, rgba(0,0,0,.7)); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pip .gt .tag{position:absolute; top:4px; left:4px; background:rgba(255,255,255,.85); color:#111; font-size:8px; font-weight:700; border-radius:4px; padding:1px 4px}
.pip .gt .tag.scr{background:var(--amber)}
.pip .gt .mute{position:absolute; top:4px; right:4px; font-size:10px}
.pip .gt.more{height:40px; border-style:dashed; box-shadow:none; background:rgba(0,0,0,.35); display:grid; place-items:center; font-size:12px; font-weight:700; color:#c3cbcf}
.livewrap.sharing .lv-stage video{top:calc(var(--safe-top) + 84px); height:36%; object-fit:contain; background:#07090b; border-top:1px solid #21262d; border-bottom:1px solid #21262d}
.livewrap.sharing .pip{top:calc(var(--safe-top) + 84px + 36% + 8px); left:8px; right:8px; flex-direction:row; align-items:flex-start}
.livewrap.sharing .pip .gt{width:64px; height:86px}
/* chat */
.lv-chat{position:relative; z-index:3; flex:0 1 auto; min-height:0; max-height:25%; margin-top:auto; display:flex; flex-direction:column; gap:4px; padding:8px 100px 4px 10px; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:none;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 16%); mask-image:linear-gradient(180deg,transparent,#000 16%)}
.lv-chat::-webkit-scrollbar{width:0}
.livewrap.sharing .lv-chat{padding-right:10px; max-height:22%}
.crow{display:block; line-height:1.3; text-shadow:0 1px 4px rgba(0,0,0,.95), 0 0 12px rgba(0,0,0,.7); animation:rise .26s ease-out; font-size:12.5px; color:#fff; word-break:break-word}
@keyframes rise{from{opacity:0; transform:translateY(6px)}}
.crow .cname{font-weight:600; color:#d3d9dc; margin-right:4px}
.crow .ctag{background:rgba(255,255,255,.85); color:#111; font-size:8px; font-weight:700; border-radius:3px; padding:0 4px; margin-right:4px; vertical-align:1px}
.crow.sys{color:rgba(255,255,255,.72); font-size:11.5px}
.crow.host .ctext{font-weight:600}
.chatjump{position:absolute; left:50%; transform:translateX(-50%); bottom:calc(var(--safe-bottom) + 60px); z-index:11; background:rgba(255,255,255,.92); color:#111; font-size:11px; font-weight:700; border-radius:20px; padding:5px 12px; box-shadow:0 4px 14px rgba(0,0,0,.5)}
/* bottom bar */
.lv-bar{position:relative; z-index:3; flex:none; display:flex; align-items:center; gap:6px; padding:6px 10px calc(var(--safe-bottom) + 12px)}
.lv-input{flex:1; display:flex; align-items:center; gap:6px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.1); border-radius:20px; height:36px; padding:0 6px 0 13px; min-width:0}
.lv-input input{flex:1; background:none; border:0; color:#fff; font-size:13px; outline:none; min-width:0}
.lv-input input::placeholder{color:rgba(255,255,255,.55)}
.rnd{width:36px; height:36px; border-radius:50%; display:grid; place-items:center; font-size:16px; flex:none; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.1); position:relative; color:#fff}
.rnd.on{background:var(--primary); color:#fff; border-color:transparent}
.rnd.red{background:var(--red); border-color:transparent}
.rnd .nbadge{position:absolute; top:-3px; right:-3px; min-width:16px; height:16px; border-radius:8px; background:var(--primary); color:#fff; font-size:9.5px; font-weight:800; line-height:16px; text-align:center; padding:0 3px}
.rnd svg{width:18px; height:18px}
.lv-msg{position:absolute; inset:0; z-index:20; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; text-align:center; padding:30px; background:rgba(0,0,0,.72); color:var(--muted); font-size:14px}
.lv-msg b{color:#fff; font-size:18px}
.lv-msg .btn{width:auto; padding:10px 22px}
/* host tools drawer + panel rows */
.slot{display:flex; align-items:center; gap:9px; background:#101314; border:1px solid var(--line); border-radius:9px; padding:8px 10px; margin-bottom:7px}
.slot.req{border-color:rgba(255,176,32,.55)}
.slot .pf{width:30px; height:30px; font-size:12px}
.slot .who{flex:1; min-width:0}
.slot .who b{display:block; font-size:13px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.slot .who small{font-family:"IBM Plex Mono",monospace; font-size:9.5px; color:var(--muted); letter-spacing:.05em}
.slot .btns{display:flex; gap:4px; flex-wrap:wrap; justify-content:flex-end; flex:none; max-width:150px}
.slot .btns button{font-family:"IBM Plex Mono",monospace; font-size:9px; letter-spacing:.08em; color:var(--muted); border:1px solid var(--line); border-radius:5px; padding:4px 7px}
.slot .btns button.go{color:var(--teal-2); border-color:rgba(79,194,178,.5)}
.slot .btns button.pin{color:var(--teal-2); border-color:rgba(63,179,164,.5)}
.slot .btns button.pinned{background:#0f8a7d; color:#fff; border-color:#0f8a7d}
.slot .btns button.warn{color:#ff9a93; border-color:rgba(214,69,58,.45)}
.health{display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-bottom:12px}
.health div{background:#0f1214; border:1px solid var(--line); border-radius:8px; padding:8px 4px; text-align:center}
.health b{display:block; font-family:"IBM Plex Mono",monospace; font-size:15px; font-weight:600; font-variant-numeric:tabular-nums; color:#7FD48E}
.health span{font-family:"IBM Plex Mono",monospace; font-size:8.5px; letter-spacing:.12em; color:var(--muted)}
.hd-actions{display:flex; gap:7px; margin-top:8px}
.hd-actions button{flex:1; font-size:13px; font-weight:700; border-radius:9px; padding:10px 0; background:var(--line-2); color:#fff}
.hd-actions button.on{background:var(--primary); color:#fff}
.hd-actions button.end{background:var(--red); color:#fff}
.tp-row{display:flex; gap:6px}
.tp-row button{flex:1; font-size:11px; font-weight:700; padding:9px 0; border-radius:16px; background:rgba(255,255,255,.1); color:#fff; border:1px solid rgba(255,255,255,.15)}
.tp-row button.on{background:var(--primary); color:#fff; border-color:var(--primary)}
.tp-row button.off{background:rgba(214,69,58,.85); color:#fff; border-color:transparent}
.tp-row button.leave{background:none; color:#ff9a93; border-color:rgba(214,69,58,.5); flex:0 0 70px}
/* go live setup */
.gl{position:absolute; inset:0; background:#000; display:flex; flex-direction:column}
.gl video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0}
.gl .gl-scrim{position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(180deg, rgba(0,0,0,.55) 0 12%, transparent 30% 40%, rgba(0,0,0,.88) 100%)}
.gl-top{position:relative; z-index:3; display:flex; align-items:center; gap:8px; padding:calc(var(--safe-top) + 10px) 10px 0}
.gl-top .pill{background:rgba(0,0,0,.45); color:#fff; font-size:11px; font-weight:700; border-radius:20px; padding:6px 11px; backdrop-filter:blur(6px)}
.gl-top .pill.r{margin-left:auto}
.gl-form{position:relative; z-index:3; margin-top:auto; padding:0 14px calc(var(--safe-bottom) + 18px); display:flex; flex-direction:column; gap:10px}
.gl-form input{width:100%; background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.18); border-radius:12px; padding:12px 14px; color:#fff; font-size:15px; font-weight:600; outline:none}
.gl-form input::placeholder{color:rgba(255,255,255,.55); font-weight:500}
.gl-form .chip{background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.18); color:#fff}
.gl-form .chip[aria-pressed="true"]{background:var(--primary); color:#fff; border-color:var(--primary)}
.gl-go{width:100%; background:var(--red); color:#fff; font-size:16px; font-weight:800; border-radius:14px; padding:14px; box-shadow:0 8px 24px rgba(214,69,58,.45)}
.gl-go[disabled]{opacity:.5}
.gl-note{font-family:"IBM Plex Mono",monospace; font-size:9.5px; letter-spacing:.08em; color:rgba(255,255,255,.55); text-align:center}
.gl-summary{position:relative; z-index:3; margin:auto 16px; background:rgba(14,17,19,.94); border:1px solid var(--line-2); border-radius:16px; padding:20px 16px 16px; text-align:center}
.gl-summary .big{font-family:"IBM Plex Mono",monospace; font-size:34px; font-weight:600; color:var(--amber); font-variant-numeric:tabular-nums; margin:4px 0 2px}
.gl-summary p{margin:0 0 14px; font-size:13px; color:var(--muted); line-height:1.5}
.gl-summary .health{margin:14px 0}

/* ---------- legal pages ---------- */
.legal h2{font-size:22px; margin:6px 0 2px}
.legal h3{font-size:14.5px; margin:20px 0 6px}
.legal p{font-size:13.5px; line-height:1.55; color:#d7dde0; margin:0 0 10px}
.legal .muted{color:var(--faint); font-size:12px}

/* ---------- moderation ---------- */
.check{display:flex; gap:10px; align-items:flex-start; font-size:13px; color:var(--muted); margin:4px 0 14px; cursor:pointer}
.check input{margin-top:3px; accent-color:var(--amber); width:16px; height:16px; flex:none}
.legal ol.rules{list-style:none; padding:0; margin:12px 0 4px; counter-reset:r}
.legal ol.rules li{counter-increment:r; position:relative; padding:10px 0 10px 40px; border-top:1px solid var(--line); font-size:13.5px}
.legal ol.rules li:first-child{border-top:0}
.legal ol.rules li:before{content:counter(r); position:absolute; left:0; top:9px; width:26px; height:26px; border-radius:7px; background:rgba(255,176,32,.14); color:var(--amber); font-weight:800; font-size:13px; display:grid; place-items:center}
.legal ol.rules b{display:block; color:var(--text); font-weight:700}
.legal ol.rules span{color:var(--muted)}
.note.modnote{cursor:default}
.modpf{width:40px; height:40px; border-radius:50%; background:rgba(255,176,32,.14); color:var(--amber); display:grid; place-items:center; font-size:18px; flex:none}
.note .modbody{font-size:12.5px; color:var(--text); margin:4px 0 6px; white-space:pre-wrap}
.mod-card{margin:12px 14px; padding:12px 14px; border:1px solid var(--line); border-radius:12px; background:var(--bg-2)}
.mod-card.live{border-color:var(--red)}
.mod-card.appeal{border-color:var(--teal-2)}
.mod-head{display:flex; align-items:center; gap:8px; font-size:12px; color:var(--muted); margin-bottom:4px}
.mod-head .grow{flex:1}
.mod-kind{font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--amber)}
.mod-card.appeal .mod-kind{color:var(--teal-2)}
.mod-n{font-weight:700; color:var(--text)}
.mod-clip{display:flex; gap:10px; align-items:center; margin:6px 0; color:var(--muted); font-size:12.5px}
.mod-clip img{width:64px; height:86px; object-fit:cover; border-radius:8px; background:#000; flex:none}
.mod-cap{font-size:13px; color:var(--text); margin:6px 0}
.mod-reasons{list-style:none; padding:0; margin:8px 0; font-size:12.5px; color:var(--muted)}
.mod-reasons li{padding:3px 0; border-top:1px solid var(--line)}
.mod-reasons li b{color:var(--text)}
.mod-reasons li small{color:var(--faint); margin-left:4px}
.mod-acts{display:flex; gap:6px; flex-wrap:wrap; margin-top:8px}
.mbtn{font-size:12.5px; font-weight:700; padding:7px 12px; border-radius:9px; background:var(--line-2); color:#fff}
.mbtn.warn{background:rgba(255,176,32,.14); color:var(--amber)}
.mbtn.danger{background:rgba(214,69,58,.18); color:#ff8f86}
.mod-rulepick{display:flex; gap:6px; flex-wrap:wrap; margin:0 0 12px}
.mod-rulepick .chip{font-size:11.5px; font-weight:600; padding:4px 10px; border-radius:999px; border:1px solid var(--line-2); color:var(--muted)}
.mod-hist{padding:8px 0; border-bottom:1px solid var(--line); font-size:13px}
.mod-hist small{color:var(--faint)}
.mod-hist p{margin:3px 0 0; color:var(--muted); font-size:12.5px}
.topbar .pill, .mod-card .pill{font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--amber); background:rgba(255,176,32,.14); border-radius:6px; padding:2px 7px; margin-left:6px; vertical-align:1px}

/* ---------- Whompo Pro ---------- */
.probadge{display:inline-block; font-family:"IBM Plex Mono",monospace; font-size:9px; font-weight:700; letter-spacing:.08em; line-height:1; padding:3px 5px 2px; border-radius:4px; background:var(--amber); color:#151004; margin-left:6px; vertical-align:2px; font-style:normal}
.probadge.sm{font-size:8px; padding:2px 4px 1px; margin-left:4px; vertical-align:1px}
.meta .handle .probadge{vertical-align:3px}
.perks{list-style:none; padding:0; margin:0 0 14px}
.perks li{padding:8px 0; border-top:1px solid var(--line); font-size:13.5px; color:var(--text)}
.perks li:first-child{border-top:0}
.small{font-size:12px; color:var(--faint)}
.accent-row{display:flex; align-items:center; gap:10px; font-size:12.5px; margin:0 0 6px}
.accent-row input[type=color]{width:40px; height:32px; border:1px solid var(--line-2); border-radius:8px; background:none; padding:2px}

/* ---- live: host chat controls ---- */
.crow[data-uid]{cursor:pointer}
.crow .ctag.mod{background:var(--amber, #f5a524); color:#111}
.lv-pin{position:relative; z-index:3; margin:0 100px 4px 10px; display:flex; align-items:center; gap:8px; padding:7px 10px; border-radius:12px; background:rgba(20,20,22,.78); backdrop-filter:blur(8px); font-size:12.5px; color:#fff; animation:rise .26s ease-out}
.livewrap.sharing .lv-pin{margin-right:10px}
.lv-pin .pin-ic{font-size:13px; flex:none}
.lv-pin .pin-body{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.lv-pin .pin-body b{color:#f5c76b; margin-right:4px}
.lv-pin .pin-x{flex:none; background:none; border:0; color:#aaa; font-size:12px; padding:2px 4px; cursor:pointer}
.lv-input input:disabled{opacity:.6; font-style:italic}
.sheet #slowseg{margin:0 0 10px}

/* ---- live: hearts ---- */
.lv-watchers.hearts{margin-left:0}
.lv-watchers.hearts svg{stroke:#ff5c7a; fill:#ff5c7a}
.lv-watchers.hearts.pop{animation:hpop .28s ease-out}
@keyframes hpop{40%{transform:scale(1.14)}}
.rnd.heart svg{stroke:#ff5c7a}
.rnd.heart.pop svg{animation:hpop .28s ease-out; fill:#ff5c7a}
.lv-hearts{position:absolute; right:14px; bottom:64px; width:70px; height:55%; pointer-events:none; z-index:4; overflow:visible}
.fh{position:absolute; left:50%; bottom:0; width:var(--sz,26px); height:var(--sz,26px); margin-left:calc(var(--sz,26px) / -2); animation:floatheart var(--dur,1600ms) cubic-bezier(.2,.7,.4,1) forwards; opacity:0; will-change:transform,opacity}
.fh svg{width:100%; height:100%; fill:#ff5c7a; stroke:#ff5c7a; filter:drop-shadow(0 2px 6px rgba(0,0,0,.4))}
@keyframes floatheart{0%{transform:translate(0,0) scale(.5); opacity:0} 12%{opacity:1; transform:translate(calc(var(--dx) * .2),-30px) scale(1.05)} 60%{opacity:.9} 100%{transform:translate(var(--dx),-100%) translateY(-260px) scale(.85); opacity:0}}
.health{grid-template-columns:repeat(auto-fit,minmax(60px,1fr))}

/* ---- comments: replies + likes ---- */
.cmt{align-items:flex-start}
.cmt .cmt-like{flex:none; display:flex; flex-direction:column; align-items:center; gap:1px; padding:2px 0 0 6px; color:var(--faint)}
.cmt .cmt-like svg{width:16px; height:16px; stroke:currentColor}
.cmt .cmt-like small{font-size:10px; font-weight:600; min-height:12px}
.cmt .cmt-like.on{color:#ff5c7a}
.cmt .cmt-like.on svg{fill:#ff5c7a; stroke:#ff5c7a}
.cmt-b b .ctag{background:var(--amber); color:#111; font-size:8px; font-weight:700; border-radius:3px; padding:0 4px; vertical-align:1px}
.cmt-more{display:block; margin:6px 0 0; font-size:12px; font-weight:600; color:var(--muted)}
.cmt-more::before{content:""; display:inline-block; width:22px; height:1px; background:var(--faint); vertical-align:middle; margin-right:8px}
.cmt-thread{display:flex; flex-direction:column; gap:10px; margin-top:10px}
.cmt.reply .cmt-b p{font-size:13.5px}
.cmt-replying{display:flex; align-items:center; justify-content:space-between; font-size:12px; color:var(--muted); padding:0 4px 6px}
.cmt-replying button{color:var(--faint); font-size:12px; padding:2px 6px}

/* ---- saves ---- */
.rail .saved svg{fill:var(--amber); stroke:var(--amber)}

/* ---- direct messages ---- */
.btn2.icon{padding:8px 12px; font-size:15px}
.dmdot{width:9px; height:9px; border-radius:50%; background:var(--red); flex:none}
.note.dmrow.unread .note-b p{color:#fff; font-weight:600}
.note.dmentry .modpf{background:var(--line-2); font-size:16px}
.scr.dm{display:flex; flex-direction:column; height:100%}
.scr.dm .topbar .grow{display:flex; align-items:center; min-width:0}
.dmwho{display:flex; align-items:center; gap:8px; min-width:0; cursor:pointer}
.dmwho b{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.dm-body{flex:1; min-height:0; overflow-y:auto; display:flex; flex-direction:column; gap:4px; padding:12px 12px 8px}
.dm-time{align-self:center; font-size:11px; color:var(--faint); margin:8px 0 4px}
.dm-msg{max-width:78%; align-self:flex-start; background:var(--line-2); color:#fff; border-radius:16px 16px 16px 4px; padding:8px 12px; font-size:14.5px; line-height:1.35; word-break:break-word; white-space:pre-wrap}
.dm-msg.me{align-self:flex-end; background:var(--primary); color:#fff; border-radius:16px 16px 4px 16px; cursor:pointer}
.dm-msg + .dm-msg{margin-top:2px}
.dm-input{flex:none; padding:8px 12px calc(10px + env(safe-area-inset-bottom)); border-top:1px solid var(--line); background:var(--bg, #000)}

/* ---- record in the app ---- */
.up-pick.rec{margin-bottom:12px; border-style:solid; border-color:var(--amber); background:rgba(255,176,32,.06)}
.up-pick.rec svg{stroke:var(--amber)}
.camwrap{position:relative; height:100%; min-height:70vh; background:#000; display:flex; flex-direction:column; overflow:hidden}
.camwrap video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.camwrap video.mirror{transform:scaleX(-1)}
.cam-top{position:relative; z-index:2; display:flex; justify-content:center; padding:12px}
.cam-timer{display:flex; align-items:center; gap:7px; background:rgba(0,0,0,.55); border-radius:20px; padding:5px 12px; font-size:13px; font-weight:700; font-variant-numeric:tabular-nums}
.cam-timer i{width:8px; height:8px; border-radius:50%; background:var(--red); animation:blink 1s infinite}
@keyframes blink{50%{opacity:.25}}
.cam-bar{position:relative; z-index:2; margin-top:auto; display:flex; align-items:center; justify-content:space-around; padding:18px 30px 10px}
.cam-bar .rnd{width:44px; height:44px; border-radius:50%; background:rgba(0,0,0,.5); border:1px solid rgba(255,255,255,.2); color:#fff; font-size:20px; display:grid; place-items:center}
.cam-bar .rnd.ghost{visibility:hidden}
.recbtn{width:76px; height:76px; border-radius:50%; border:4px solid #fff; background:transparent; display:grid; place-items:center; padding:0}
.recbtn i{width:60px; height:60px; border-radius:50%; background:var(--red); transition:all .18s}
.recbtn.on i{width:30px; height:30px; border-radius:8px}
.cam-hint{position:relative; z-index:2; text-align:center; font-size:12.5px; color:rgba(255,255,255,.8); margin:0; padding:0 0 calc(14px + env(safe-area-inset-bottom))}

/* ---- trim ---- */
.trim-track{position:relative; height:44px; border-radius:10px; background:var(--bg-3); border:1px solid var(--line); touch-action:none; user-select:none; cursor:pointer; overflow:visible}
.trim-track .sel{position:absolute; top:0; bottom:0; background:rgba(255,176,32,.22); border-top:2px solid var(--amber); border-bottom:2px solid var(--amber); pointer-events:none}
.trim-track .h{position:absolute; top:-4px; bottom:-4px; width:18px; margin-left:-9px; border-radius:6px; background:var(--amber); cursor:ew-resize; display:block}
.trim-track .h::after{content:""; position:absolute; left:7px; top:14px; bottom:14px; width:3px; border-radius:2px; background:rgba(0,0,0,.45)}
.trim-track .play{position:absolute; top:4px; bottom:4px; width:2px; background:#fff; pointer-events:none; display:block; opacity:.8}

/* ---- creator stats ---- */
.stiles{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:12px}
.stile{background:var(--bg-2); border:1px solid var(--line); border-radius:12px; padding:10px 10px 9px; display:flex; flex-direction:column; gap:2px; min-width:0}
.stile small{font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); font-weight:700}
.stile b{font-size:22px; line-height:1.1; font-variant-numeric:tabular-nums}
.stile span{font-size:11.5px; color:var(--faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.stile span.up{color:var(--teal-2)}
.stile span i{font-style:normal; color:var(--faint)}
.schart{width:100%; height:110px; display:block; background:var(--bg-2); border:1px solid var(--line); border-radius:12px; padding:8px 8px 4px; box-sizing:border-box}
.schart rect{fill:var(--line-2)}
.schart rect.on{fill:var(--amber)}
.saxis{display:flex; justify-content:space-between; font-size:11px; color:var(--faint); padding:6px 2px 0}
.stop{display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--line); cursor:pointer}
.stop .rank{width:20px; text-align:center; font-weight:800; color:var(--muted); flex:none}
.stop img{width:42px; height:56px; border-radius:7px; object-fit:cover; background:var(--bg-3); flex:none}
.stop .who{min-width:0; display:flex; flex-direction:column; gap:2px}
.stop .who b{font-size:13.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.stop .who small{font-size:11.5px; color:var(--muted)}

/* =================================================================== laptops and up
   Same screens, more room: the bottom bar becomes a left rail, tall sheets dock to
   the right of the video instead of covering it, and grids get wider. */
@media (min-width:860px){
  .app{max-width:none; flex-direction:row; box-shadow:none}
  .screen{min-width:0}

  /* ---- left rail ---- */
  .nav{
    order:-1; flex:none; width:216px; height:100%; gap:2px;
    padding:14px 12px calc(14px + var(--safe-bottom));
    flex-direction:column; align-items:stretch; justify-content:flex-start;
    border-top:0; border-right:1px solid var(--line); background:var(--bg-2);
  }
  .nav > button{flex-direction:row; width:100%; justify-content:flex-start; gap:11px; font-size:14px; padding:9px 10px; border-radius:9px; color:var(--muted)}
  .nav > button > span{font-size:14px; font-weight:600}
  .nav > button:hover{background:var(--bg-3)}
  .nav > button[aria-current="true"]{background:var(--bg-3); color:#fff}
  .nav svg{width:21px; height:21px; flex:none}
  .nav .dot{position:static; margin-left:auto; flex:none}
  .nav [data-nav="upload"]{order:9; margin-top:14px; background:var(--primary); color:#fff; justify-content:center; padding:11px}
  .nav [data-nav="upload"] .lbl{display:inline; font-size:14px; font-weight:700}
  .nav [data-nav="upload"]:hover{background:var(--primary)}
  .nav [data-nav="upload"] .newbtn{width:auto; height:auto; background:none; color:#fff; box-shadow:none; font-size:17px}

  /* ---- feed: one clip centred, its buttons beside it rather than on top ---- */
  .feedwrap{background:#07090b}
  .feed{--stage:min(calc(100dvh * 0.5625), calc(100% - 180px)); padding-inline:max(0px, calc((100% - var(--stage)) / 2))}
  .slide{border-radius:16px; overflow:visible}
  .slide video, .slide .poster, .slide .scrim-g{border-radius:16px}
  .slide .scrim-g{background:linear-gradient(180deg, rgba(0,0,0,.45) 0 12%, transparent 26% 52%, rgba(0,0,0,.72) 100%)}
  .feedtabs{top:18px}
  .rail{right:-74px; bottom:16px; gap:18px}
  .rail button{color:var(--text); text-shadow:none; font-size:12px; font-variant-numeric:tabular-nums}
  .rail button svg{width:23px; height:23px; box-sizing:content-box; padding:12px; border-radius:50%; background:var(--bg-3); filter:none; transition:background .15s}
  .rail button:hover svg{background:var(--line-2)}
  .rail .liked svg, .rail .saved svg{background:var(--bg-3)}
  .rail .avatar{width:48px; height:48px; margin-bottom:10px}
  .feedarrows{position:absolute; right:18px; top:50%; transform:translateY(-50%); z-index:22; display:flex; flex-direction:column; gap:10px}
  .feedarrows button{width:40px; height:40px; border-radius:50%; background:var(--bg-3); color:var(--muted); font-size:12px; display:grid; place-items:center; border:1px solid var(--line)}
  .feedarrows button:hover{background:var(--line-2); color:#fff}

  /* ---- left rail: search and the extra destinations ---- */
  .nav .deskonly{display:flex}
  .navsearch{display:block; padding:0 2px 12px}
  .navsearch input{width:100%; background:var(--bg-3); border:1px solid var(--line); border-radius:20px; padding:9px 14px; font-size:13.5px; outline:none; color:var(--text)}
  .navsearch input:focus{border-color:var(--primary)}

  /* ---- live: chat gets its own column ---- */
  .livewrap{padding-right:344px}
  .livewrap:before, .lv-stage{right:344px}
  .pip{right:352px}
  .lv-hearts{right:358px}
  .lv-chat{position:absolute; right:0; top:0; bottom:64px; width:344px; max-height:none; margin:0; z-index:6;
    background:var(--bg-2); border-left:1px solid var(--line); padding:14px 14px 8px; gap:7px}
  .livewrap.sharing .lv-chat{padding-right:14px; max-height:none}
  .lv-pin{position:absolute; right:0; top:0; width:344px; margin:0; z-index:7; border-radius:0; border-bottom:1px solid var(--line); background:var(--bg-3)}
  .livewrap:has(.lv-pin:not([hidden])) .lv-chat{padding-top:56px}
  .lv-bar{position:absolute; right:0; bottom:0; width:344px; z-index:7; background:var(--bg-2); border-left:1px solid var(--line); border-top:1px solid var(--line);
    padding:12px 14px calc(var(--safe-bottom) + 12px)}
  .chatjump{left:auto; right:172px; transform:translateX(50%); bottom:76px}
  .crow{color:var(--text); text-shadow:none}
  .crow.sys{color:var(--muted)}

  /* ---- the way in: welcome and the auth forms, centred instead of stretched ---- */
  .welcome{justify-content:center; align-items:center; padding:40px 32px}
  .wel-inner{flex:none; display:grid; grid-template-columns:minmax(0,440px) minmax(0,300px); gap:60px; align-items:center; justify-content:center; width:100%; max-width:880px}
  .welcome .logo{font-size:52px; margin-bottom:10px}
  .welcome p{font-size:17px; max-width:36ch; margin-bottom:20px; color:var(--text)}
  .wel-points{display:flex; flex-direction:column; gap:10px; list-style:none; margin:0 0 28px; padding:0}
  .wel-points li{position:relative; padding-left:22px; font-size:14px; color:var(--muted); line-height:1.5; max-width:44ch}
  .wel-points li::before{content:""; position:absolute; left:2px; top:8px; width:7px; height:7px; border-radius:2px; background:var(--primary)}
  .wel-acts{display:flex; flex-direction:column; gap:9px; max-width:340px}
  .wel-acts .btn + .btn{margin-top:0}
  .wel-art{display:block}
  .wel-phone{width:100%; aspect-ratio:9/16; max-height:520px; border-radius:26px; padding:8px; background:linear-gradient(160deg,#2b343c,#141a20); box-shadow:0 30px 70px rgba(0,0,0,.55); margin-inline:auto}
  .wel-clip{position:relative; height:100%; border-radius:20px; overflow:hidden;
    background:linear-gradient(155deg,#ff7a2f 0%,#c9403f 34%,#5c2f7a 66%,#12313a 100%)}
  .wel-live{position:absolute; top:12px; left:12px; display:flex; align-items:center; gap:5px; background:var(--red); border-radius:20px; padding:3px 9px; font-size:9.5px; font-weight:800; letter-spacing:.04em}
  .wel-live i{width:5px; height:5px; border-radius:50%; background:#fff; display:block}
  .wel-rail{position:absolute; right:12px; bottom:56px; display:flex; flex-direction:column; gap:14px}
  .wel-rail span{width:26px; height:26px; border-radius:50%; background:rgba(255,255,255,.22); display:block; backdrop-filter:blur(4px)}
  .wel-rail span:first-child{background:rgba(255,176,32,.85)}
  .wel-cap{position:absolute; left:12px; right:52px; bottom:14px; font-size:12px; color:#fff; text-shadow:0 1px 5px rgba(0,0,0,.8)}
  .wel-cap b{display:block; font-size:13px; margin-bottom:2px}
  .auth{max-width:470px; margin-inline:auto; width:100%; justify-content:center; padding-top:40px}

  /* ---- wider grids, and reading columns that don't run to the edge ---- */
  .grid{grid-template-columns:repeat(5,1fr); gap:6px}
  #pgrid, .cmts{max-width:1000px; margin-inline:auto}
  .ptabs{max-width:1000px; margin-inline:auto; width:100%}
  .body > .pad, .body > .list, .body > .cmts, .dm-body, .dm-input{max-width:840px; margin-inline:auto; width:100%}
  .topbar{padding-inline:22px}
  .phead{max-width:1000px; margin-inline:auto}
  .stiles{grid-template-columns:repeat(6,1fr)}
  .schart{height:150px}
}

/* ---- invites ---- */
.invhead{position:relative; margin-bottom:16px}
.invhead .cover{height:120px}
.invwho{display:flex; flex-direction:column; align-items:center; gap:4px; margin-top:-38px; padding:0 20px; text-align:center}
.invwho .pf{width:76px; height:76px; font-size:28px; border:3px solid var(--bg)}
.invwho b{font-size:17px; margin-top:6px}
.invwho span{font-size:12.5px; color:var(--muted)}
.invwho p{margin:6px 0 0; font-size:13.5px; color:var(--text); max-width:34ch}
.invtitle{font-size:22px; font-weight:800; letter-spacing:-.01em; margin:4px 0 8px; text-wrap:balance}
.invlead{color:var(--muted); font-size:14px; margin:0 0 16px; line-height:1.5}
.invgrid{margin-bottom:18px; gap:4px}
.invgrid .cell img{width:100%; height:100%; object-fit:cover; display:block}
.invlink{display:flex; align-items:center; gap:10px; background:var(--bg-2); border:1px solid var(--line); border-radius:10px; padding:11px 12px; margin-bottom:12px}
.invlink span{flex:1; min-width:0; font-size:13.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text)}
.invcount{font-size:13px; color:var(--muted); margin:0 0 10px}
.invcount b{color:var(--text); font-size:15px}

/* ---- a way in while you're browsing ---- */
.joinpill{position:absolute; right:10px; top:0; z-index:21; background:var(--primary); color:#fff; font-size:12.5px; font-weight:700; border-radius:18px; padding:6px 14px; box-shadow:0 2px 10px rgba(0,0,0,.45)}
@media (min-width:860px){ .joinpill{right:18px; top:14px; font-size:13.5px; padding:8px 18px} }

/* ---- left rail: collapse to icons (desktop only) ---- */
.navhead{display:none}
@media (min-width:860px){
  .navhead{display:flex; align-items:center; gap:8px; padding:2px 6px 14px}
  .navbrand{font-size:18px; font-weight:800; letter-spacing:-.01em; flex:1; min-width:0; overflow:hidden; white-space:nowrap}
  .navtoggle{width:32px; height:32px; border-radius:8px; display:grid; place-items:center; color:var(--faint); flex:none}
  .navtoggle svg{width:19px; height:19px}
  .navtoggle:hover{background:var(--bg-3); color:var(--text)}

  .app.rail-mini .nav{width:76px; padding-inline:10px; align-items:center}
  .app.rail-mini .navhead{padding:2px 0 14px; justify-content:center}
  .app.rail-mini .navbrand{display:none}
  .app.rail-mini .navsearch{display:none}
  .app.rail-mini .nav > button{width:54px; justify-content:center; padding:11px 0; gap:0}
  .app.rail-mini .nav > button > span:not(.newbtn):not(.dot){display:none}
  .app.rail-mini .nav .dot{position:absolute; top:3px; right:6px; margin:0}
  .app.rail-mini .nav [data-nav="upload"]{padding:13px 0}
  .app.rail-mini .nav [data-nav="upload"] .newbtn{background:none; color:#fff; box-shadow:none; width:auto; height:auto; font-size:22px}
}

/* ---- wide screens only: tall sheets dock beside the video, short ones become dialogs.
   Below this the ordinary bottom sheet is roomier than a 400px column would be. ---- */
@media (min-width:1150px){
  .sheet{width:400px; left:auto; right:0; padding-bottom:var(--safe-bottom)}
  .sheet.tall{top:0; bottom:0; height:100%; max-height:none; border-radius:0; border-top:0; border-left:1px solid var(--line); transform:translateX(102%)}
  .sheet.tall.open{transform:translateX(0)}
  .sheet:not(.tall){top:50%; bottom:auto; left:50%; right:auto; width:440px; max-height:76%; border:1px solid var(--line); border-radius:16px;
    transform:translate(-50%,-44%) scale(.97); opacity:0; transition:transform .2s cubic-bezier(.2,.8,.3,1), opacity .18s}
  .sheet:not(.tall).open{transform:translate(-50%,-50%) scale(1); opacity:1}
  /* a docked panel isn't a modal — don't dim what you're watching, and don't cover it either */
  .app:has(.sheet.tall.open) .scrim{opacity:0; pointer-events:none}
  .feedwrap{transition:right .26s cubic-bezier(.2,.8,.3,1)}
  .app:has(.sheet.tall.open) .feedwrap{right:400px}
}