:root { color-scheme: dark; --bg:#0e1116; --card:#161b22; --card2:#0f1319; --line:#252c37; --line2:#323a47; --fg:#e8ebf1; --mut:#9aa4b2; --dim:#6b7482; --acc:#f7931a; --acc2:#ffb04d; --accfg:#1a1205; --ok:#46c463; --err:#f2544b; --hot:#ff5d8f; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--fg); font:15px/1.55 system-ui,"Segoe UI",Roboto,sans-serif; -webkit-font-smoothing:antialiased; }
a { color:var(--acc2); } .mono { font-family:ui-monospace,Menlo,Consolas,monospace; word-break:break-all; } .mut { color:var(--mut); } .dim { color:var(--dim); }
.usd { color:var(--mut); font-weight:500; font-size:.9em; }
.wrap { max-width:880px; margin:0 auto; padding:18px 16px 70px; }
.top { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
.logo { display:flex; align-items:center; gap:9px; font-weight:800; font-size:19px; color:var(--fg); text-decoration:none; }
.logo img { width:28px; height:28px; border-radius:7px; } .logo span { color:var(--acc); }
.nav a { color:var(--mut); text-decoration:none; margin-left:14px; font-size:14px; } .nav a:hover, .nav a.on { color:var(--fg); }
.card { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:18px; margin:12px 0; }
h1 { font-size:30px; line-height:1.15; margin:6px 0 6px; letter-spacing:-.01em; } h2 { font-size:17px; margin:0 0 8px; } h3 { font-size:15px; margin:0 0 6px; }
.lede { color:var(--mut); font-size:16px; margin:0 0 6px; max-width:640px; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; background:var(--acc); color:var(--accfg); border:0; border-radius:10px; padding:11px 18px; font:700 14px system-ui,sans-serif; cursor:pointer; text-decoration:none; }
.btn:hover { background:var(--acc2); } .btn:disabled { opacity:.45; cursor:default; }
.btn.ghost { background:transparent; color:var(--fg); border:1px solid var(--line2); } .btn.ghost:hover { border-color:var(--mut); }
.btn.big { font-size:16px; padding:14px 22px; border-radius:12px; }
.link { background:none; border:0; color:var(--acc2); cursor:pointer; font:inherit; padding:0; text-decoration:underline; }
input, textarea, select { background:var(--card2); border:1px solid var(--line2); color:var(--fg); border-radius:9px; padding:10px 12px; font:14px system-ui,sans-serif; width:100%; }
textarea { min-height:70px; resize:vertical; }
label { display:block; font-size:13px; color:var(--mut); margin:10px 0 4px; font-weight:600; }
.row { display:flex; gap:10px; flex-wrap:wrap; align-items:center; } .row > * { flex:1; min-width:140px; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; } @media (max-width:720px) { .grid2 { grid-template-columns:1fr; } }
.hint { font-size:12.5px; color:var(--dim); margin-top:6px; }
#wallet .wl-off { display:flex; gap:8px; flex-wrap:wrap; align-items:center; } #wallet .wl-off input { flex:1; min-width:200px; width:auto; } #wallet .hint { flex-basis:100%; }
#wallet .wl-on { font-size:14px; } .dot { display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--ok); margin-right:6px; }
.status { margin:12px 0; padding:11px 14px; border-radius:10px; font-size:14px; background:var(--card2); border:1px solid var(--line); color:var(--mut); }
.status:empty { display:none; } .status.ok { border-color:var(--ok); color:#b6f2c4; } .status.err { border-color:var(--err); color:#ffb4ae; } .status.wait { border-color:var(--acc); }
/* picker cards */
.pick { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; } @media (max-width:640px) { .pick { grid-template-columns:repeat(2,1fr); } }
.pick.three { grid-template-columns:repeat(3,1fr); }
.opt { background:var(--card2); border:1px solid var(--line2); border-radius:12px; padding:12px; cursor:pointer; text-align:left; color:var(--fg); font:inherit; }
.opt b { display:block; font-size:15px; } .opt span { font-size:12.5px; color:var(--mut); }
.opt .ic { font-size:22px; display:block; margin-bottom:4px; }
.opt.on { border-color:var(--acc); box-shadow:0 0 0 1px var(--acc) inset; background:#1c160d; }
.toggle { display:flex; align-items:flex-start; gap:10px; margin-top:12px; font-size:14px; } .toggle input { width:auto; margin-top:4px; }
.preview { background:var(--card2); border:1px dashed var(--line2); border-radius:12px; padding:12px 14px; font-size:14px; margin-top:12px; }
.preview b { color:var(--acc2); }
/* gathering */
.badge { display:inline-block; font-size:11.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; padding:3px 8px; border-radius:20px; border:1px solid var(--line2); color:var(--mut); margin-right:6px; }
.badge.live { color:#b6f2c4; border-color:#2d6b3d; } .badge.closed { color:#ffb4ae; border-color:#6b2d2d; } .badge.priv { color:#d8c2ff; border-color:#4b3a74; }
.fomo { display:flex; gap:18px; align-items:center; flex-wrap:wrap; }
.fomo .bar { flex:1; min-width:220px; height:12px; border-radius:8px; background:var(--card2); border:1px solid var(--line); overflow:hidden; }
.fomo .bar i { display:block; height:100%; background:linear-gradient(90deg,var(--acc),var(--hot)); transition:width .6s; }
.fomo .count { font-size:22px; font-weight:800; } .fomo .count small { font-size:13px; color:var(--mut); font-weight:600; }
.stats { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:12px; } @media (max-width:640px) { .stats { grid-template-columns:repeat(2,1fr); } }
.stat { background:var(--card2); border:1px solid var(--line); border-radius:12px; padding:10px 12px; } .stat .k { font-size:12px; color:var(--mut); } .stat .v { font-size:18px; font-weight:800; }
.stage { border:1px solid var(--acc); background:linear-gradient(135deg,#21180b,#161b22); }
.stage .says { font-size:20px; font-weight:700; margin:6px 0; word-wrap:break-word; }
.layout { display:grid; grid-template-columns:1fr 290px; gap:14px; } @media (max-width:820px) { .layout { grid-template-columns:1fr; } }
.feed .msg { padding:10px 0; border-top:1px solid var(--line); } .feed .msg:first-child { border-top:0; }
.msg .who { font-size:13px; color:var(--mut); } .msg .who b { color:var(--fg); } .msg .who .host { color:var(--acc2); }
.msg .txt { margin-top:2px; white-space:pre-wrap; word-wrap:break-word; } .msg .meta { font-size:12px; color:var(--dim); }
.msg.mine .who b { color:var(--acc2); }
.lb li { display:flex; justify-content:space-between; gap:8px; font-size:13.5px; padding:4px 0; } .lb ol { margin:0; padding-left:20px; }
.seats { display:flex; flex-wrap:wrap; gap:4px; } .seat { width:14px; height:14px; border-radius:4px; background:var(--card2); border:1px solid var(--line2); }
.seat.t { background:var(--acc); border-color:var(--acc); } .seat.me { background:var(--ok); border-color:var(--ok); }
.empty { color:var(--dim); font-size:14px; padding:8px 0; }
.foot { color:var(--dim); font-size:12.5px; text-align:center; margin-top:26px; }
.share { display:flex; gap:8px; } .share input { flex:1; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:12.5px; }
.pill { display:inline-block; background:#1c160d; border:1px solid #5a3d14; color:var(--acc2); border-radius:20px; padding:2px 10px; font-size:12.5px; font-weight:700; }
.dmcard .msg { padding:12px 0; }
.price-tag { font-weight:800; color:var(--acc2); }
.low { opacity:.6; }

.grid3 { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; } @media (max-width:640px) { .grid3 { grid-template-columns:1fr; } }
.pick { grid-template-columns:repeat(5,1fr); } .pick.three { grid-template-columns:repeat(4,1fr); }
@media (max-width:720px) { .pick, .pick.three { grid-template-columns:repeat(2,1fr); } }
.chip { display:inline-block; font-size:12px; font-weight:600; padding:1px 8px; margin:2px 3px 2px 0; border-radius:20px; border:1px solid var(--line2); color:var(--mut); text-decoration:none; }
.chip:hover { color:var(--fg); border-color:var(--mut); }
.titlerow { display:flex; align-items:center; gap:14px; } .titlerow h1 { flex:1; min-width:0; }
.brandlogo { width:64px; height:64px; object-fit:contain; border-radius:12px; background:var(--card2); border:1px solid var(--line); flex:0 0 auto; }
.badge.onair { color:#ffd0dc; border-color:#7a2d45; }
.card.live { border-color:var(--hot); background:linear-gradient(135deg,#2a1019,#161b22); }
.sep { border-top:1px solid var(--line); margin:14px 0 12px; }
.logoprev { display:flex; align-items:center; gap:10px; margin-top:8px; } .logoprev img { width:56px; height:56px; object-fit:contain; border-radius:10px; background:var(--card2); border:1px solid var(--line); }
.whorow { padding:4px 0; font-size:13.5px; border-top:1px solid var(--line); } .whorow:first-child { border-top:0; }
[hidden] { display:none !important; }
@media (max-width:560px) { .brandlogo { width:44px; height:44px; border-radius:10px; } h1 { font-size:24px; } .titlerow { gap:10px; } }
.btnrow { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.btn.sm { padding:7px 11px; font-size:12.5px; border-radius:8px; }
.aichk { display:flex !important; align-items:center; gap:5px; margin:0 !important; font-size:12.5px; flex:0 0 auto; white-space:nowrap; } .aichk input { width:auto; }
.badge.aib { color:#cfe3ff; border-color:#2f4a75; }
.lapeople { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.laperson { font-size:13px; padding:4px 10px; border-radius:20px; background:var(--card2); border:1px solid var(--line2); transition:border-color .2s, box-shadow .2s; }
.laperson.speaking { border-color:var(--ok); box-shadow:0 0 0 2px rgba(70,196,99,.35); }
/* Pop-out window (?pop=1): just the room, like a chat app */
.titlerow .btn.sm { flex:0 0 auto; }
body.pop .wrap { max-width:none; padding:10px 10px 30px; }
body.pop .top .nav, body.pop .foot, body.pop #vStart, body.pop #rAI, body.pop #rCal, body.pop #cLb, body.pop #cSeats, body.pop #cInvite, body.pop #rHost, body.pop .stats, body.pop .lede { display:none !important; }
body.pop .layout { grid-template-columns:1fr; }
body.pop h1 { font-size:20px; } body.pop .brandlogo { width:36px; height:36px; }
body.pop .card { padding:12px; margin:8px 0; border-radius:12px; }
body.pop #rFeed { max-height:46vh; overflow:auto; }
/* Pop-out: no links that leave the window (Join live stays: it is the call itself) */
body.pop #wallet .hint { display:none !important; }
body.pop .logo { pointer-events:none; cursor:default; }
.card.quick { border-color:var(--acc); background:linear-gradient(135deg,#21180b,#161b22); }
.laset { margin-top:12px; padding-top:12px; border-top:1px solid var(--line); }
.lameter { height:8px; border-radius:6px; background:var(--card2); border:1px solid var(--line); overflow:hidden; margin-top:8px; }
.lameter i { display:block; height:100%; width:0; background:var(--ok); transition:width .08s; }
.launblock { margin-top:12px; width:100%; }
.joinrow { margin-top:14px; display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.joinrow .hint { flex:1; min-width:200px; margin:0; }
.joinbtn { font-size:18px; padding:15px 26px; box-shadow:0 0 0 0 rgba(247,147,26,.5); animation:joinpulse 2.4s infinite; }
@keyframes joinpulse { 0% { box-shadow:0 0 0 0 rgba(247,147,26,.45) } 70% { box-shadow:0 0 0 12px rgba(247,147,26,0) } 100% { box-shadow:0 0 0 0 rgba(247,147,26,0) } }
@media (prefers-reduced-motion: reduce) { .joinbtn { animation:none } }
.inpill { background:#0f2a17; border-color:#2d6b3d; color:#b6f2c4; }
.bannerimg { display:block; width:calc(100% + 36px); margin:-18px -18px 14px; aspect-ratio:4/1; object-fit:cover; border-radius:16px 16px 0 0; background:var(--card2); }
body.pop .bannerimg { width:calc(100% + 24px); margin:-12px -12px 10px; border-radius:12px 12px 0 0; }
.bannerthumb { width:160px !important; height:40px !important; object-fit:cover; }
.face { width:20px; height:20px; border-radius:50%; object-fit:cover; vertical-align:-5px; margin-right:6px; border:1px solid var(--line2); }
.face.big { width:48px; height:48px; vertical-align:middle; }
.stars { display:flex; gap:6px; margin:10px 0; }
.star { background:none; border:1px solid var(--line2); color:var(--dim); font-size:24px; width:44px; height:44px; border-radius:10px; cursor:pointer; }
.star.on { color:var(--acc2); border-color:var(--acc); }
/* Loading: spinner + shimmer placeholders */
@keyframes spin { to { transform:rotate(360deg) } }
@keyframes shimmer { to { background-position:-200% 0 } }
.spin { display:inline-block; width:14px; height:14px; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation:spin .8s linear infinite; vertical-align:-2px; margin-right:8px; flex:0 0 auto; }
.status.wait::before { content:''; display:inline-block; width:12px; height:12px; border:2px solid var(--acc); border-right-color:transparent; border-radius:50%; animation:spin .8s linear infinite; margin-right:9px; vertical-align:-2px; }
.skel { display:block; border-radius:8px; background:linear-gradient(90deg, var(--card2) 25%, var(--line2) 50%, var(--card2) 75%); background-size:200% 100%; animation:shimmer 1.4s linear infinite; }
.skel.t { height:30px; width:60%; margin:10px 0; } .skel.l { height:14px; width:40%; margin:8px 0; } .skel.b { height:56px; margin-top:12px; }
.loadrow { display:flex; align-items:center; color:var(--mut); font-size:14px; }
@media (prefers-reduced-motion: reduce) { .spin, .status.wait::before, .skel { animation:none } }
.faq details { border-top:1px solid var(--line); padding:10px 0; } .faq details:first-of-type { border-top:0; }
.faq summary { cursor:pointer; font-weight:700; } .faq details p { margin:8px 0 0; color:var(--mut); font-size:14px; }
.card.earn { border-color:#2d6b3d; background:linear-gradient(135deg,#0f2318,#161b22); }
.earnbig { font-size:26px; font-weight:800; color:#b6f2c4; }
.earnkinds { margin-top:10px; font-size:13.5px; } .earnkinds div { display:flex; justify-content:space-between; padding:3px 0; border-top:1px solid var(--line); }
.earnrows { margin-top:10px; font-size:13px; } .earnrows summary { cursor:pointer; font-weight:700; }
.earnrow { display:grid; grid-template-columns:1fr auto; gap:2px 8px; padding:6px 0; border-top:1px solid var(--line); } .earnrow .dim { grid-column:1 / -1; font-size:12px; }
/* Video grid (video gatherings) */
.lavideo { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:8px; margin-top:12px; }
.vtile { position:relative; background:#000; border-radius:10px; overflow:hidden; aspect-ratio:16/9; border:1px solid var(--line2); }
.vtile video { width:100%; height:100%; object-fit:cover; display:block; }
.vtile.local video { transform:scaleX(-1); }
.vname { position:absolute; left:8px; bottom:6px; font-size:12px; font-weight:700; background:rgba(0,0,0,.55); padding:2px 8px; border-radius:20px; }
body.pop .lavideo { grid-template-columns:1fr; }

/* ---- page header: More menu, day/night and wallet (same look as bsvkey.com) ---- */
.hctl { display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
.more { position:relative; }
.more > summary { list-style:none; cursor:pointer; color:var(--mut); font-size:14px; } .more > summary::-webkit-details-marker { display:none; }
.more > summary::after { content:" ▾"; } .more[open] > summary, .more > summary:hover { color:var(--fg); }
.moremenu { position:absolute; right:0; top:calc(100% + 10px); z-index:60; display:grid; grid-template-columns:repeat(3,minmax(130px,auto)); gap:16px 26px; padding:16px 18px; background:var(--card); border:1px solid var(--line2); border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.45); max-height:calc(100vh - 90px); overflow-y:auto; }
.moremenu div { display:flex; flex-direction:column; gap:8px; align-items:flex-start; }
.moremenu b { font:600 11px ui-monospace,Menlo,Consolas,monospace; letter-spacing:.08em; text-transform:uppercase; color:var(--acc); }
.moremenu a { color:var(--mut); text-decoration:none; font-size:14px; } .moremenu a:hover { color:var(--fg); }
.wchip { position:relative; }
.wbtn { display:inline-flex; align-items:center; gap:7px; background:var(--card2); border:1px solid var(--line2); color:var(--fg); border-radius:999px; padding:5px 12px; font:600 12.5px system-ui,sans-serif; cursor:pointer; white-space:nowrap; }
.wbtn:hover, .wbtn[aria-expanded="true"] { border-color:var(--acc); }
.wbtn .wdot { width:8px; height:8px; border-radius:50%; background:var(--mut); flex:none; }
.wbtn.on .wdot { background:var(--ok); } .wbtn.locked .wdot { background:var(--acc); }
.wmenu { position:absolute; right:0; top:calc(100% + 8px); z-index:70; background:var(--card); border:1px solid var(--line2); border-radius:12px; padding:6px; width:300px; box-shadow:0 10px 30px rgba(0,0,0,.45); text-align:left; }
.wmenu [hidden] { display:none; }
.wmenu button { display:block; width:100%; text-align:left; background:none; border:0; color:var(--fg); padding:9px 10px; border-radius:8px; cursor:pointer; font:600 13px system-ui,sans-serif; }
.wmenu button small { display:block; font-weight:400; color:var(--mut); font-size:11.5px; margin-top:2px; line-height:1.35; word-break:break-all; }
.wmenu button:hover, .wmenu button:focus-visible { background:var(--card2); outline:none; }
.wmenu .wlink { display:block; padding:6px 10px 8px; font-size:12.5px; }
.wmenu .wnote { color:var(--mut); font-size:11.5px; padding:8px 10px 4px; border-top:1px solid var(--line); margin:4px 0 0; line-height:1.4; }
@media (max-width:640px) { .moremenu { position:fixed; left:12px; right:12px; top:64px; grid-template-columns:1fr 1fr; } .wmenu { position:fixed; left:12px; right:12px; top:64px; width:auto; } #hdrWallet { max-width:120px; overflow:hidden; text-overflow:ellipsis; } }

/* ---- BSVKey Live player inside a gathering ---- */
.livewrap { position:relative; width:100%; aspect-ratio:16/9; background:#000; border-radius:12px; overflow:hidden; border:1px solid var(--line2); margin-top:12px; }
.livewrap iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }

/* ---- day (light) mode: theme.css sets the shared colours; these are this page's own ---- */
:root[data-theme="light"] { --hot:#c2185b; }
:root[data-theme="light"] .status.ok, :root[data-theme="light"] .earnbig { color:#13803f; }
:root[data-theme="light"] .status.err { color:#c62828; }
:root[data-theme="light"] .opt.on, :root[data-theme="light"] .pill { background:#fff4e0; }
:root[data-theme="light"] .pill { border-color:#f0c98a; }
:root[data-theme="light"] .badge.live { color:#13803f; border-color:#9ed4ae; }
:root[data-theme="light"] .badge.closed { color:#c62828; border-color:#f0b4ae; }
:root[data-theme="light"] .badge.priv { color:#5b3fa0; border-color:#c9b8ef; }
:root[data-theme="light"] .badge.onair { color:#a3123f; border-color:#f0b0c4; }
:root[data-theme="light"] .badge.aib { color:#1f4f99; border-color:#b8cdf0; }
:root[data-theme="light"] .stage, :root[data-theme="light"] .card.quick { background:linear-gradient(135deg,#fff4e0,#ffffff); }
:root[data-theme="light"] .card.live { background:linear-gradient(135deg,#ffe8ef,#ffffff); }
:root[data-theme="light"] .inpill { background:#e6f6ea; border-color:#9ed4ae; color:#13803f; }
:root[data-theme="light"] .card.earn { background:linear-gradient(135deg,#e6f6ea,#ffffff); border-color:#9ed4ae; }
:root[data-theme="light"] .moremenu, :root[data-theme="light"] .wmenu { box-shadow:0 10px 30px rgba(0,0,0,.14); }