:root{--ink:#0a0c10;--pane:#12151b;--pane-2:#171b23;--line:#262b35;--text:#e8e6e1;--muted:#8b8f98;--gold:#d8b56c;--gold-hi:#f4e2b0;--gold-dim:#d8b56c59;--danger:#e5484d;--warn:#e2a33c;--ok:#3dd68c;--live:#e5484d;--stage-max-h:56dvh;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body{background:var(--ink);height:100%;color:var(--text);-webkit-text-size-adjust:100%;margin:0;font:15px/1.5 -apple-system,PingFang SC,Noto Sans SC,system-ui,sans-serif}#root{min-height:100dvh}button{font:inherit;color:inherit;background:var(--pane-2);border:1px solid var(--line);cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;border-radius:10px;padding:8px 14px}button:disabled{opacity:.5;cursor:default}button.primary{background:var(--gold);color:#1a1405;border-color:var(--gold);font-weight:600}input,textarea,select{font:inherit;color:inherit;background:var(--pane);border:1px solid var(--line);border-radius:10px;padding:8px 12px}input:focus,textarea:focus{border-color:var(--gold-dim);outline:none}.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px}body:has(>#root>.app){overflow:hidden}.app{--stage-max-h:calc(var(--app-h,100dvh) * .56);height:100dvh;height:var(--app-h,100dvh);background:var(--ink);padding-top:env(safe-area-inset-top);grid-template:"stage""queue""chat"minmax(0,1fr)"toasts"0"composer""gifts"/minmax(0,1fr);display:grid;position:fixed;top:0;left:0;right:0;overflow:hidden}.g-stage{grid-area:stage}.g-queue{grid-area:queue}.g-chat{grid-area:chat}.g-toasts{z-index:8;grid-area:toasts;height:0;position:relative}.g-composer{grid-area:composer}.g-gifts{grid-area:gifts}@media (width<=899px) and (orientation:landscape){.app{--stage-max-h:max(120px, calc(var(--app-h,100dvh) - 140px));grid-template:"stage chat""queue chat""fill chat"minmax(0,1fr)"toasts chat"0"gifts composer"/minmax(0,1fr) minmax(260px,40%)}.g-chat,.g-composer{border-left:1px solid var(--line)}}@media (width<=899px){html.kb-open .app{--stage-max-h:max(96px, calc(var(--app-h,100dvh) * .34))}html.kb-open .g-gifts{display:none}}@media (width>=900px){.app{--stage-max-h:calc(var(--app-h,100dvh) - 190px);grid-template:"stage chat""queue chat""fill chat"minmax(0,1fr)"toasts chat"0"gifts composer"/minmax(0,1fr) 380px;max-width:1440px;margin:0 auto}.g-chat,.g-composer{border-left:1px solid var(--line)}.stage-wrap{padding:12px 12px 0}.gift-tray{padding-bottom:12px}}.stage-wrap{background:#000;justify-content:center;display:flex}.stage{background:#000;border-radius:0;position:relative;overflow:hidden}@media (width>=900px){.stage{border-radius:12px}}.stage-video{position:absolute;inset:0}.stage-video>*{width:100%;height:100%;position:absolute;inset:0}.live-badge{z-index:3;pointer-events:none;gap:6px;display:flex;position:absolute;top:10px;left:10px}.badge{color:#fff;-webkit-backdrop-filter:blur(6px);background:#0000008c;border-radius:999px;align-items:center;gap:6px;padding:3px 9px;font-size:12px;font-weight:600;display:inline-flex}.badge .dot{background:var(--muted);border-radius:50%;width:7px;height:7px}.badge.live .dot{background:var(--live);animation:1.6s ease-out infinite pulse}.badge.warn .dot{background:var(--warn)}.badge.viewers{color:#ddd;font-weight:500}@keyframes pulse{0%{box-shadow:0 0 #e5484db3}to{box-shadow:0 0 0 7px #e5484d00}}.stage-btn{z-index:4;background:#0000008c;border:1px solid #ffffff2e;border-radius:50%;justify-content:center;align-items:center;width:36px;height:36px;padding:0;font-size:16px;line-height:1;display:flex;position:absolute;top:8px;right:8px}.stage-btn.on{border-color:var(--gold-dim)}.now-playing{z-index:3;border:1px solid var(--gold-dim);pointer-events:none;background:#0a0c10bd;border-radius:10px;align-items:center;gap:6px;max-width:calc(100% - 20px);padding:6px 10px 7px;font-size:13px;animation:.25s ease-out fadeIn;display:flex;position:absolute;bottom:10px;left:10px;overflow:hidden}.np-icon{font-size:16px;line-height:1}.np-name{color:var(--gold-hi);white-space:nowrap;font-weight:600}.np-count{color:var(--gold);margin-left:4px}.np-senders{color:var(--muted);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.np-progress{background:var(--gold);height:2px;transition:width .25s linear;position:absolute;bottom:0;left:0}.sender-overlay{z-index:3;pointer-events:none;flex-direction:column;align-items:center;gap:6px;padding:0 12px;display:flex;position:absolute;top:52px;left:0;right:0}.sender-item{color:#1a1405;white-space:nowrap;text-overflow:ellipsis;background:linear-gradient(90deg,#d8b56cf5,#f4e2b0f5);border-radius:999px;max-width:100%;padding:7px 14px;font-size:14px;font-weight:600;animation:.35s cubic-bezier(.2,.9,.3,1.2) senderIn,.5s ease-in 3.2s forwards senderOut;overflow:hidden;box-shadow:0 6px 22px #00000073}@keyframes senderIn{0%{opacity:0;transform:translateY(-14px)scale(.96)}to{opacity:1;transform:none}}@keyframes senderOut{to{opacity:0;transform:translateY(-8px)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.offline-screen{z-index:2;text-align:center;background:radial-gradient(#14161cdb,#0a0c10f5);flex-direction:column;justify-content:center;align-items:center;gap:6px;padding:16px;display:flex;position:absolute;inset:0}.offline-mark{background:var(--muted);border-radius:50%;width:10px;height:10px;margin-bottom:6px}.offline-title{color:var(--gold-hi);font-size:17px;font-weight:600}.offline-sub{color:var(--muted);font-size:13px}.resume{z-index:6;cursor:pointer;background:#0009;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.resume-card{text-align:center;border:1px solid var(--gold-dim);background:#12151beb;border-radius:14px;padding:14px 22px}.resume-cta{color:var(--gold-hi);font-size:17px;font-weight:700}.gate{z-index:50;cursor:pointer;background:radial-gradient(at 50% 30%,#d8b56c1f,#0a0c10fa 60%);justify-content:center;align-items:center;padding:24px;display:flex;position:fixed;inset:0}.gate-card{text-align:center;border:1px solid var(--gold-dim);background:#12151beb;border-radius:18px;width:100%;max-width:360px;padding:28px 32px;box-shadow:0 20px 60px #0009}.gate-title{color:var(--muted);letter-spacing:.5px;font-size:15px}.gate-status{color:var(--muted);margin-top:4px;font-size:12px}.gate-cta{color:var(--gold-hi);margin-top:14px;font-size:22px;font-weight:700}.gate-sub{color:var(--muted);margin-top:8px;font-size:13px}.gate-err{color:#ff8a8e;margin-top:12px;font-size:13px}.queue-strip{white-space:nowrap;background:var(--pane);border-bottom:1px solid var(--line);scrollbar-width:none;align-items:center;gap:8px;min-height:36px;padding:6px 12px;font-size:13px;display:flex;overflow-x:auto}.queue-strip::-webkit-scrollbar{display:none}.qs-label{color:var(--muted);flex:none;font-size:12px}.qs-empty{color:var(--muted);font-size:12px}.qs-item{background:var(--pane-2);border:1px solid var(--line);border-radius:999px;flex:none;align-items:center;gap:4px;padding:3px 9px;display:inline-flex}.qs-item.committed{border-color:var(--gold-dim)}.qs-icon{font-size:15px;line-height:1}.qs-count{color:var(--gold);font-weight:600}.qs-eta{color:var(--gold);font-variant-numeric:tabular-nums}.qs-lock{color:var(--ok);font-size:11px}.chat{background:var(--ink);flex-direction:column;min-height:0;display:flex;position:relative}.chat-head{color:var(--muted);border-bottom:1px solid var(--line);flex:none;justify-content:space-between;align-items:center;gap:8px;padding:6px 12px;font-size:13px;display:flex}.chat-title{font-weight:600}.chat-list{overscroll-behavior:contain;-webkit-overflow-scrolling:touch;flex-direction:column;flex:auto;gap:5px;min-height:0;padding:8px 12px;display:flex;overflow-y:auto}.msg{word-break:break-word;font-size:14px;line-height:1.45}.msg .nick{color:var(--gold);margin-right:6px;font-weight:600}.msg .nick:after{content:":";color:var(--muted);margin-left:1px;font-weight:400}.msg.mine .nick{color:var(--gold-hi)}.msg.gift{border:1px solid var(--gold-dim);background:#d8b56c1a;border-radius:10px;align-self:flex-start;padding:4px 10px}.msg.gift .nick:after{content:"";margin:0}.msg.gift b{color:var(--gold-hi);font-weight:600}.msg.system{color:var(--muted);text-align:center;font-size:12px}.chat-jump{z-index:9;background:var(--gold);color:#1a1405;border-color:var(--gold);border-radius:999px;padding:5px 10px;font-size:12px;font-weight:600;position:absolute;bottom:10px;right:12px;box-shadow:0 4px 14px #0006}.composer{background:var(--pane);border-top:1px solid var(--line);flex-direction:column;justify-content:flex-end;gap:6px;padding:8px 12px;display:flex;position:relative}.composer-row{align-items:center;gap:8px;display:flex}.composer input{border-radius:999px;flex:auto;min-width:0;padding:9px 12px;font-size:16px}.composer .send{border-radius:999px;flex:none;padding:8px 14px}.composer-hint{color:#ff8a8e;background:#e5484d2e;border:1px solid #e5484d80;border-radius:8px;align-self:flex-start;padding:3px 10px;font-size:12px;animation:.15s ease-out fadeIn}.composer-hint.ok{color:var(--ok);background:#3dd68c26;border-color:#3dd68c80}.cmd-chips{flex-wrap:wrap;gap:6px;display:flex}.cmd-chip{background:var(--pane-2);border-color:var(--gold-dim);border-radius:999px;padding:4px 10px;font-size:12px}.nick-wrap{display:inline-flex;position:relative}.nick-chip{background:var(--pane-2);border:1px solid var(--line);text-overflow:ellipsis;white-space:nowrap;max-width:160px;color:var(--text);border-radius:999px;padding:2px 9px;font-size:12px;overflow:hidden}.nick-chip i{color:var(--gold);font-style:normal}.nick-chip.locked{opacity:.85}.nick-pop{z-index:20;background:var(--pane-2);border:1px solid var(--line);border-radius:12px;flex-direction:column;gap:8px;width:240px;padding:10px;display:flex;position:absolute;top:calc(100% + 6px);right:0;box-shadow:0 10px 30px #00000080}.nick-pop-title{color:var(--muted);font-size:12px}.nick-pop input{width:100%;font-size:16px}.nick-err{color:#ff8a8e;font-size:12px}.nick-actions{justify-content:flex-end;gap:6px;display:flex}.nick-actions button{padding:5px 12px;font-size:13px}.gift-tray{padding:8px 12px calc(8px + env(safe-area-inset-bottom));background:var(--pane);border-top:1px solid var(--line);scrollbar-width:none;align-items:stretch;gap:8px;display:flex;overflow-x:auto}.gift-tray::-webkit-scrollbar{display:none}.gift-tray.tray-offline .gift-btn{filter:saturate(.6)}.gift-empty{color:var(--muted);padding:10px 0;font-size:13px}.gift-btn{background:var(--pane-2);border-radius:14px;flex-direction:column;flex:none;justify-content:center;align-items:center;gap:2px;width:76px;height:78px;padding:4px;display:flex;position:relative;overflow:hidden}.gift-btn:active{background:#d8b56c2e}.gift-btn.busy{opacity:.7}.gift-btn.cooling{opacity:.75}.gift-btn.used{opacity:.55}.gift-icon{font-size:26px;line-height:1}.gift-name{text-overflow:ellipsis;white-space:nowrap;font-variant-numeric:tabular-nums;max-width:100%;font-size:12px;overflow:hidden}.gift-left{color:var(--muted);white-space:nowrap;font-size:10px}.gift-ring{pointer-events:none;width:100%;height:100%;position:absolute;inset:0}.gift-ring circle{transition:stroke-dashoffset .2s linear}.toasts{pointer-events:none;flex-direction:column;align-items:center;gap:6px;padding:0 12px;display:flex;position:absolute;bottom:8px;left:0;right:0}.toast{border:1px solid var(--line);background:#171b23f5;border-radius:999px;align-items:center;gap:6px;max-width:100%;padding:8px 14px;font-size:13px;animation:.2s ease-out toastIn;display:inline-flex;box-shadow:0 6px 20px #00000073}.toast-icon{font-size:15px;line-height:1}.toast.success{border-color:#3dd68c8c}.toast.error{border-color:#e5484d99}.toast.gift{border-color:var(--gold-dim)}@keyframes toastIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}.conn-banner{z-index:40;text-align:center;padding:6px 12px;padding-top:calc(6px + env(safe-area-inset-top));color:#1a1405;background:#e2a33cf5;font-size:13px;font-weight:600;animation:.2s ease-out fadeIn;position:fixed;top:0;left:0;right:0}.conn-banner.error{background:var(--danger);color:#fff}.debug-burn{z-index:9;letter-spacing:1px;color:#fff;pointer-events:none;font-variant-numeric:tabular-nums;background:#000000d9;padding:5px 8px;font-size:22px;font-weight:700;line-height:1;position:absolute;bottom:8px;right:8px}.debug-toggle{z-index:10;background:#000000b3;border-color:#fff3;padding:3px 8px;font-size:11px;position:absolute;top:50px;right:8px}.debug-panel{z-index:9;color:#d7e0ea;background:#000c;border-radius:8px;width:min(360px,100% - 16px);max-height:calc(100% - 120px);padding:8px;font-size:11px;line-height:1.45;position:absolute;top:78px;right:8px;overflow:auto}.dbg-row{white-space:pre-wrap;word-break:break-all}.dbg-row b{color:var(--gold);margin-right:4px}.dbg-notes{color:#9fb3c8;border-top:1px dashed #fff3;margin-top:4px;padding-top:4px}