@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400&family=Manrope:wght@400;500;600;700;800&display=swap');
@import url('/ai.css');

:root { --scene-tint:#66736b; --bg:#0d0f12; --surface:#161a20; --surface-raised:#20252d; --surface-hover:#292f38; --border:#303743; --text:#f4f6f8; --muted:#aab3bf; --accent:#f4f6f8; --accent-dark:#dce1e7; }
* { box-sizing:border-box; }
html, body { min-height:100%; }
body { margin:0; background:var(--bg); color:var(--text); font:14px Manrope,system-ui,sans-serif; }
body.image-theme { --accent:var(--scene-tint); --accent-dark:color-mix(in srgb,var(--scene-tint) 82%,#fff); }
body.light { --bg:#eef0f2; --surface:#fff; --surface-raised:#e5e8ec; --surface-hover:#dce1e6; --border:#cbd1d8; --text:#1e2329; --muted:#5f6974; --accent:#26303a; --accent-dark:#3a4652; background:var(--bg); }
body.light.image-theme { --accent:color-mix(in srgb,var(--scene-tint) 84%,#20262c); --accent-dark:color-mix(in srgb,var(--scene-tint) 72%,#101418); }
button, input, select, textarea { font:inherit; } button { border:0; cursor:pointer; }
button:focus-visible, input:focus-visible, select:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.muted { color:var(--muted); }.eyebrow { margin:0 0 6px; color:var(--muted); font:11px 'DM Mono',monospace; letter-spacing:.12em; text-transform:uppercase; }
#section-label:empty { display:none; }

body.welcome-open > aside, body.welcome-open > main, body.welcome-open > .player-bar, body.welcome-open > #toast { display:none; }
#welcome-screen { position:fixed; z-index:30; inset:0; display:none; align-items:center; justify-content:center; width:100%; height:100%; overflow:hidden; padding:24px; background:#101512; color:#fff; }
body.welcome-open #welcome-screen { display:flex; }
#welcome-image { position:absolute; z-index:-2; inset:-4%; width:108%; height:108%; object-fit:cover; animation:welcome-drift 38s ease-in-out infinite alternate; }
#welcome-screen::before { position:absolute; z-index:-1; inset:0; background:linear-gradient(180deg,#080b0a55 0%,#080b0a22 35%,#080b0a66 100%); content:''; }
.welcome-copy { display:flex; flex-direction:column; align-items:center; gap:10px; text-shadow:0 2px 32px #0009; pointer-events:none; transition:outline-color .16s; }
#welcome-clock { font-size:clamp(52px,10vw,96px); font-weight:500; font-variant-numeric:tabular-nums; letter-spacing:-.07em; line-height:1; }
.welcome-brand { font-size:clamp(25px,4vw,36px); font-weight:700; letter-spacing:-.06em; line-height:1; }
.welcome-brand-line { display:flex; align-items:baseline; gap:9px; }
.welcome-version { color:transparent; background:linear-gradient(105deg,#777c81 10%,#f5f6f7 30%,#858b90 48%,#fff 56%,#747a7f 72%,#d7dadd 90%); background-size:220% 100%; background-clip:text; -webkit-background-clip:text; font-size:clamp(17px,2vw,21px); font-weight:800; letter-spacing:.08em; line-height:1; -webkit-text-fill-color:transparent; animation:version-sheen 3.6s ease-in-out infinite; }
@keyframes version-sheen { to { background-position:220% 0; } }
#welcome-screen:focus-visible { outline:0; } #welcome-screen:focus-visible .welcome-copy { outline:2px solid #ffffffb0; outline-offset:12px; border-radius:2px; }
@keyframes welcome-drift { from { transform:scale(1.02) translate3d(0,0,0); } to { transform:scale(1.12) translate3d(-1%,1%,0); } }
@media(prefers-reduced-motion:reduce) { #welcome-image,.welcome-version { animation:none; } }
body.aurora-off #welcome-image { animation:none; }

aside { position:fixed; z-index:20; left:50vw; bottom:14px; width:max-content; transform:translateX(-50%); display:flex; align-items:center; height:48px; padding:4px 7px; background:#12151af5; border:1px solid var(--border); border-radius:24px; box-shadow:0 12px 30px #0008; transition:background .5s,box-shadow .5s; }
body.image-theme aside { border-color:color-mix(in srgb,var(--scene-tint) 22%,var(--border)); background:#12151af5; }
body.image-theme .nav-group button.active { background:color-mix(in srgb,var(--scene-tint) 68%,#f4f6f8); }
.brand, .side-bottom { display:none; } nav { display:flex; align-items:center; gap:4px; } .nav-group { display:flex; align-items:center; gap:3px; } .nav-group + .nav-group { margin-left:4px; padding-left:7px; border-left:1px solid var(--border); } nav button { position:relative; display:grid; place-items:center; width:38px; height:38px; border-radius:15px; padding:0; color:#b8c0ca; background:transparent; font-size:0; transition:background .16s, transform .16s,color .16s; } nav button span { display:none; } nav button .glyph { font-size:15px; line-height:1; } nav button:hover { background:var(--surface-raised); color:#fff; transform:translateY(-2px); } nav button.active { background:var(--accent); color:#13161b; } nav button::after { content:attr(title); position:absolute; bottom:49px; left:50%; transform:translateX(-50%); padding:5px 9px; border-radius:9px; border:1px solid var(--border); background:var(--surface); color:var(--text); font-size:11px; font-weight:700; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .16s; } nav button:hover::after { opacity:1; }

main { width:min(95vw,1480px); margin:0 auto; padding:28px 0 100px; } header { display:flex; align-items:center; justify-content:space-between; min-height:48px; margin-bottom:26px; } header h1 { margin:0; font-size:29px; line-height:1; letter-spacing:-1.2px; color:#fff; } .mobile-menu { display:none; }
body.dashboard-home main > header { display:none; }

.home-welcome { display:flex; align-items:center; min-height:86px; }
.home-welcome p { margin:0 0 8px; color:var(--muted); font-size:13px; }
.home-welcome h2 { margin:0; font-size:30px; font-weight:600; letter-spacing:-.8px; }
.home-section-head { display:flex; align-items:center; margin:27px 0 11px; }
.home-section-head h2 { margin:0; font-size:16px; font-weight:600; }
.home-launch-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.home-launch { display:flex; align-items:center; gap:12px; min-width:0; min-height:76px; padding:13px; border:1px solid var(--border); border-radius:12px; background:var(--surface); color:var(--text); text-align:left; transition:background .16s,border-color .16s; }
.home-launch:hover { border-color:#58616b; background:var(--surface-raised); }
body.image-theme .home-welcome p { color:color-mix(in srgb,var(--scene-tint) 58%,var(--muted)); }
body.image-theme .home-launch-icon { background:color-mix(in srgb,var(--scene-tint) 16%,var(--surface-raised)); color:color-mix(in srgb,var(--scene-tint) 38%,#eef1f4); }
body.image-theme .home-launch:hover { border-color:color-mix(in srgb,var(--scene-tint) 42%,#58616b); }
body.image-theme .button:not(.secondary) { color:#111418; }
.home-launch-icon { display:grid; flex:0 0 40px; place-items:center; width:40px; height:40px; border-radius:10px; background:var(--surface-raised); color:#c8ced6; font-size:16px; }
.home-launch b { font-size:14px; font-weight:600; }
.extra-item { display:flex; align-items:center; gap:13px; width:min(360px,100%); min-height:82px; padding:14px; border:1px solid var(--border); border-radius:12px; background:var(--surface); color:var(--text); text-align:left; }
.extra-item:hover { border-color:#58616b; background:var(--surface-hover); }
.extra-item-icon { display:grid; place-items:center; width:42px; height:42px; border-radius:12px; background:var(--surface-raised); color:#d5dbe2; font-size:17px; }
.extra-item b,.extra-item small { display:block; }
.extra-item small { margin-top:4px; color:var(--muted); font-size:12px; }
.extra-viewer { position:relative; width:100%; height:min(78vh,820px); min-height:460px; overflow:hidden; border:1px solid var(--border); border-radius:12px; background:#000; }
.extra-viewer iframe { display:block; width:100%; height:100%; border:0; background:#000; }
.extra-close { position:absolute; z-index:2; top:10px; right:10px; display:grid; place-items:center; width:34px; height:34px; border:1px solid #ffffff38; border-radius:9px; background:#111b; color:#fff; font-size:22px; }
.cloud-gaming { min-height:0; }
.cloud-source-switch { display:flex; gap:6px; margin:0 0 10px; }
.cloud-source-switch button { min-height:36px; padding:7px 13px; border:1px solid var(--border); border-radius:10px; background:var(--surface); color:var(--muted); }
.cloud-source-switch button.active { background:var(--surface-raised); color:var(--text); border-color:#58616b; }
.cloud-gaming iframe { display:block; width:100%; height:min(calc(100dvh - 226px),820px); min-height:360px; border:1px solid var(--border); border-radius:12px; background:#0d0f12; }

.section-head { display:flex; align-items:center; justify-content:space-between; margin:24px 0 10px; }.section-head h2 { margin:0; color:#fff; font-size:17px; letter-spacing:-.3px; }.card { border:1px solid var(--border); border-radius:18px; background:var(--surface); padding:15px; }.recent-card { max-width:660px; }.setting-row { display:flex; align-items:center; justify-content:space-between; gap:15px; padding:10px 0; border-bottom:1px solid var(--border); }.setting-row:last-child { border-bottom:0; }

.toolbar { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:16px; }.toolbar input, .toolbar select, .field input, .field select, .field textarea { min-height:44px; border:1px solid var(--border); border-radius:16px; background:var(--surface); color:var(--text); padding:10px 15px; outline:0; }.toolbar input { flex:1; min-width:230px; }.field { display:grid; gap:6px; margin:12px 0; }.field textarea { resize:vertical; }.button, .pill { display:inline-flex; align-items:center; justify-content:center; min-height:40px; padding:8px 14px; border-radius:14px; background:var(--accent); color:#fff; font-weight:800; }.button:hover { background:var(--accent-dark); }.button.secondary, .pill { background:var(--surface-raised); border:1px solid var(--border); color:#fff; }.button.secondary:hover, .pill:hover { background:var(--surface-hover); }.button:disabled { opacity:.55; cursor:not-allowed; }

.tiles { display:grid; grid-template-columns:repeat(auto-fill,minmax(175px,1fr)); gap:10px; }.tile { min-height:126px; padding:15px; text-align:left; border:1px solid var(--border); border-radius:18px; background:var(--surface); color:var(--text); transition:background .16s,border-color .16s,transform .16s; }.tile:hover { background:var(--surface-hover); border-color:#58616b; transform:translateY(-2px); }.tile .art { display:grid; place-items:center; width:42px; height:42px; margin-bottom:16px; border-radius:13px; background:var(--surface-raised); font-size:23px; }.tile b, .tile span { display:block; }.tile span { margin-top:3px; color:var(--muted); font-size:12px; }
body.image-theme .tile:hover { border-color:color-mix(in srgb,var(--scene-tint) 42%,#58616b); }

.game-host-note, .empty { padding:25px; border:1px dashed var(--border); border-radius:18px; color:var(--muted); text-align:center; }.game-stage { min-height:430px; padding:0; overflow:hidden; }.game-stage canvas { display:block; width:100%; max-width:750px; height:auto; margin:auto; background:#100a1b; }.tabs { display:flex; gap:7px; overflow:auto; margin-bottom:12px; }.tab { white-space:nowrap; padding:9px 12px; border:1px solid var(--border); border-radius:13px; background:var(--surface); color:var(--muted); }.tab.active { background:var(--surface-raised); color:#fff; }.browser-controls { display:flex; gap:7px; margin-bottom:12px; }.browser-controls input { flex:1; min-width:0; }.browser-frame { width:100%; height:560px; border:1px solid var(--border); border-radius:18px; background:#fff; }
.game-host-note, #game-container { max-width:1400px; margin-left:auto; margin-right:auto; }.section-label { margin:24px 0 12px; color:#fff; font-size:17px; font-weight:700; }.section-divider { display:flex; flex-wrap:wrap; gap:14px; }.home-game-card { width:200px; overflow:hidden; border:1px solid var(--border); border-radius:18px; background:var(--surface); color:#fff; cursor:pointer; transition:transform .16s,background .16s; }.home-game-card:hover { background:var(--surface-hover); transform:translateY(-3px); }.home-game-card .card-img-wrap { height:130px; overflow:hidden; background:var(--surface-raised); }.home-game-card img { width:100%; height:100%; display:block; object-fit:cover; }.home-game-card .card-info { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:13px; }.home-game-card .card-info h3 { margin:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; }.fav-btn { color:var(--muted); background:transparent; font-size:15px; }.fav-btn.active { color:#ffd66d; }

.media-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:12px; }.media-card { position:relative; overflow:hidden; border:1px solid var(--border); border-radius:18px; background:var(--surface); color:var(--text); text-align:left; }.media-card .song { width:100%; color:inherit; background:transparent; text-align:left; }.media-card img { display:block; width:100%; height:235px; object-fit:cover; background:var(--surface-raised); }.media-card div { padding:12px; }.media-card b, .media-card span { display:block; }.media-card span { margin-top:3px; color:var(--muted); font-size:12px; }.like { position:absolute; top:9px; right:9px; display:grid; place-items:center; width:31px; height:31px; border-radius:12px; background:#0d0f12dd; color:#fff; font-size:17px; }.details { display:grid; grid-template-columns:220px 1fr; gap:22px; }.details img { width:100%; border-radius:18px; }
.provider-note { margin:8px 0 14px; color:var(--muted); }.provider-card { position:relative; min-width:0; overflow:hidden; border:1px solid var(--border); border-radius:15px; background:var(--surface); color:var(--text); }.provider-card img { display:block; width:100%; height:170px; object-fit:cover; background:var(--surface-raised); }.provider-open,.movie-card { width:100%; padding:0; color:inherit; background:transparent; text-align:left; }.provider-open span,.movie-card span { display:block; padding:11px 13px 13px; }.provider-card b,.provider-card small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.provider-card small { margin-top:4px; color:var(--muted); font-size:12px; }.provider-favorite { position:absolute; top:9px; right:9px; width:32px; height:32px; border-radius:50%; background:#111a; color:#fff; font-size:20px; }.provider-favorite.active { color:#ffd66d; }.movie-card { border:1px solid var(--border); border-radius:15px; overflow:hidden; }.movie-card:hover,.provider-card:hover { border-color:#69717c; }.media-tabs { display:flex; gap:7px; margin-bottom:12px; }.media-tabs .tab { min-width:86px; }.provider-player { margin-top:18px; overflow:hidden; border:1px solid var(--border); border-radius:16px; background:var(--surface); }.provider-player .row { padding:12px; }.provider-player iframe { display:block; width:100%; height:min(70vh,760px); border:0; background:#090b0d; }.provider-detail { display:grid; grid-template-columns:minmax(150px,220px) minmax(0,1fr); gap:22px; margin-top:12px; padding:16px; border:1px solid var(--border); border-radius:16px; background:var(--surface); }.provider-detail>img { width:100%; border-radius:12px; object-fit:cover; }.provider-detail h2 { margin:12px 0 8px; }.provider-detail p { color:var(--muted); line-height:1.6; }.text-button { padding:4px 0; background:transparent; color:var(--muted); }.episode-row { display:block; width:100%; padding:12px 0; border-bottom:1px solid var(--border); background:transparent; color:var(--text); text-align:left; }.episode-row small { display:block; margin-top:5px; color:var(--muted); }.stream-list { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0; }.provider-detail video { display:block; width:100%; max-height:70vh; background:#050607; }

.chat { display:grid; grid-template-columns:210px 1fr; min-height:490px; }.rooms { padding-right:15px; border-right:1px solid var(--border); }.messages { display:flex; flex-direction:column; padding-left:19px; }.message-list { flex:1; max-height:390px; overflow:auto; }.message { padding:10px 0; border-bottom:1px solid var(--border); }.message b { margin-right:7px; }.message time { margin-left:7px; color:var(--muted); font-size:11px; }.composer { display:flex; gap:8px; margin-top:12px; }.composer input { flex:1; }

.settings { max-width:670px; }.switch { width:43px; height:24px; padding:3px; border-radius:14px; background:var(--surface-raised); }.switch::after { content:''; display:block; width:18px; height:18px; border-radius:50%; background:#fff; transition:transform .2s; }.switch.on { background:var(--accent); }.switch.on::after { transform:translateX(19px); background:#13161b; }.player-bar { position:fixed; z-index:19; left:50%; bottom:82px; transform:translateX(-50%); display:flex; align-items:center; gap:10px; width:min(680px,calc(100vw - 32px)); min-height:62px; padding:7px 12px; border:1px solid var(--border); border-radius:18px; background:#12151af2; }.player-bar[hidden] { display:none; }.player-bar img { width:42px; height:42px; border-radius:13px; object-fit:cover; background:var(--surface-raised); }.track-copy { min-width:130px; max-width:220px; }.track-copy b, .track-copy span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.track-copy span { color:var(--muted); font-size:12px; }.player-bar button { color:#fff; background:transparent; font-size:17px; }.player-bar .play-button { display:grid; place-items:center; width:33px; height:33px; border-radius:50%; background:var(--accent); color:#13161b; }.player-bar input { accent-color:#dce1e7; }.player-bar #seek { flex:1; } #toast { position:fixed; right:20px; bottom:84px; z-index:30; padding:11px 15px; border:1px solid var(--border); border-radius:14px; background:var(--surface); color:#fff; font-weight:700; opacity:0; transform:translateY(8px); pointer-events:none; transition:.18s; } #toast.show { opacity:1; transform:none; }

@media(max-width:780px) { main { width:calc(100% - 28px); padding:22px 0 94px; } header { margin-bottom:20px; } .mobile-menu { display:none; } header h1 { font-size:24px; }.home-welcome h2 { font-size:24px; }.home-launch-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }.home-launch { min-height:70px; gap:9px; padding:10px; }.home-launch-icon { flex-basis:36px; width:36px; height:36px; }.details,.chat { grid-template-columns:1fr; }.rooms { padding:0 0 14px; border-right:0; border-bottom:1px solid var(--border); }.messages { padding:14px 0 0; }.player-bar { bottom:80px; }.player-bar .track-copy { min-width:80px; max-width:115px; }.player-bar [data-player="shuffle"],.player-bar [data-player="repeat"],#time { display:none; } aside { left:50vw; right:auto; bottom:12px; width:max-content; transform:translateX(-50%); justify-content:center; } nav { width:auto; justify-content:center; } nav button { width:35px; height:35px; } }

.browser-shell { overflow:hidden; border:1px solid var(--border); border-radius:14px; background:var(--surface); }
.browser-modes { align-items:center; gap:4px; flex-basis:40px; }
.browser-modes button { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-width:92px; padding:0 12px; border:0; border-radius:8px 8px 0 0; font-size:13px; font-weight:600; transition:background-color .16s,color .16s; }
.browser-modes button i { font-size:12px; }
.browser-modes button:hover { background:var(--surface-raised); }
.browser-mode-view { display:flex; flex:1; flex-direction:column; min-height:0; animation:browser-mode-enter .18s ease-out both; }
@keyframes browser-mode-enter { from { opacity:.65; transform:translateY(4px); } to { opacity:1; transform:none; } }
.cloud-choice h2 { display:flex; align-items:center; gap:9px; }
.cloud-choice h2 i { color:var(--muted); font-size:17px; }
.browser-tabbar { display:flex; align-items:center; gap:6px; padding:7px 10px 0; border-bottom:1px solid var(--border); background:#111418; }
.browser-tabs { display:flex; flex:1; align-items:end; gap:4px; min-width:0; overflow:auto; }
.browser-tab { display:flex; align-items:center; min-width:100px; max-width:210px; min-height:36px; padding:0 4px 0 10px; border:1px solid transparent; border-bottom:0; border-radius:9px 9px 0 0; background:transparent; color:var(--muted); }
.browser-tab.active { border-color:var(--border); background:var(--surface); color:var(--text); }
.browser-tab > button:first-child { overflow:hidden; flex:1; min-width:0; padding:7px 2px; background:transparent; color:inherit; text-align:left; text-overflow:ellipsis; white-space:nowrap; }
.browser-tab .tab-close,.browser-new-tab,.browser-controls > button:not(.button) { display:grid; flex:0 0 34px; place-items:center; width:34px; height:34px; border-radius:8px; background:transparent; color:var(--muted); }
.browser-tab .tab-close:hover,.browser-new-tab:hover,.browser-controls > button:not(.button):hover { background:var(--surface-raised); color:var(--text); }
.browser-controls { display:flex; align-items:center; gap:6px; padding:10px; border-bottom:1px solid var(--border); }
.browser-controls .button { min-height:36px; border-radius:9px; }
.browser-controls input { width:100%; min-width:0; height:36px; padding:0 8px; border:0; outline:0; background:transparent; color:var(--text); }
.browser-address { display:flex; flex:1; align-items:center; min-width:0; height:38px; padding:0 11px; border:1px solid var(--border); border-radius:10px; background:var(--bg); color:var(--muted); }
.browser-address:focus-within { border-color:#78838e; }
.browser-status { min-height:30px; padding:8px 13px; color:var(--muted); font-size:11px; }
.browser-content { position:relative; min-height:62vh; background:var(--bg); }
.browser-frame { display:block; width:100%; height:68vh; min-height:520px; border:0; background:#fff; }
.browser-frame[hidden] { display:none; }
.browser-start { display:grid; min-height:62vh; place-content:center; padding:24px; text-align:center; }
.browser-start h2 { margin:0 0 7px; font-size:19px; font-weight:600; }
.browser-controls > button:disabled { opacity:.4; cursor:default; }
@media(max-width:780px) { .browser-controls { gap:3px; padding:7px; }.browser-controls > button:not(.button) { flex-basis:30px; width:30px; height:30px; }.browser-controls .button { min-height:34px; padding:5px 9px; }.browser-frame { height:62vh; min-height:390px; }.browser-tab { min-width:85px; } }

body.browser-page main > header { display:none; }
body.browser-page main { height:100vh; padding:18px 0 96px; }
body.browser-page #view { display:flex; flex-direction:column; gap:8px; height:100%; min-height:0; }
.browser-modes { display:flex; gap:16px; flex:0 0 32px; align-items:stretch; padding:0 4px; border-bottom:1px solid var(--border); }
.browser-modes button { padding:0 2px; border-bottom:2px solid transparent; color:var(--muted); }
.browser-modes button.active { border-bottom-color:var(--text); color:var(--text); }
body.image-theme .browser-modes button.active { border-bottom-color:var(--scene-tint); }
.browser-shell { display:flex; flex:1; flex-direction:column; height:auto; min-height:0; border:1px solid var(--border); border-radius:10px; background:var(--bg); }
.browser-tabbar { padding:0 10px; background:var(--bg); }
.browser-tabs { align-items:stretch; gap:12px; }
.browser-tab { min-height:36px; padding:0 2px; border:0; border-bottom:2px solid transparent; border-radius:0; }
.browser-tab.active { border-bottom-color:var(--text); background:transparent; }
.browser-tab .tab-close { flex-basis:22px; width:22px; height:22px; }
.browser-controls { position:relative; z-index:2; gap:4px; margin:0; padding:7px 10px; background:var(--surface); }
.browser-controls > button:not(.button) { flex-basis:30px; width:30px; height:30px; border-radius:7px; }
.browser-controls input { height:32px; padding:0 7px; }
.browser-address { height:34px; border-radius:7px; background:var(--bg); }
.browser-address input { position:relative; z-index:1; pointer-events:auto; user-select:text; }
.browser-address:focus-within { border-color:var(--muted); }
.browser-controls .button { min-height:32px; border:1px solid var(--border); border-radius:7px; background:var(--surface-raised); color:var(--text); }
.browser-status { display:none; }
.browser-content { flex:1; min-height:0; }
#browser-frames, .browser-frame { width:100%; height:100%; }
.browser-frame { min-height:0; }
.browser-start { min-height:100%; }
.browser-start[hidden] { display:none; }
.cloud-browser-shell { flex:1; min-height:0; overflow:hidden; border:1px solid var(--border); border-radius:10px; background:var(--surface); }
#cloud-content { display:flex; flex-direction:column; width:100%; height:100%; min-height:0; }
.cloud-choice,.cloud-wait { display:grid; width:min(520px,100%); gap:14px; margin:auto; padding:28px; }
.cloud-choice h2,.cloud-wait h2 { margin:0; font-size:20px; font-weight:600; }
.cloud-plans { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.cloud-plan { display:grid; gap:7px; min-height:94px; padding:15px; border:1px solid var(--border); border-radius:8px; background:var(--surface-raised); color:var(--text); text-align:left; }
.cloud-plan:not(:disabled):hover { background:var(--surface-hover); }
.cloud-plan span { color:var(--muted); font-size:12px; }
.cloud-plan.unavailable,.cloud-plan:disabled { cursor:not-allowed; opacity:.45; }
.cloud-toolbar { display:flex; align-items:center; gap:10px; padding:7px 10px; border-bottom:1px solid var(--border); }
.cloud-address { height:34px; }
.cloud-status { overflow:hidden; color:var(--muted); font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.cloud-time { color:var(--muted); font-size:12px; white-space:nowrap; font-variant-numeric:tabular-nums; }
.cloud-frame-wrap { flex:1; min-height:0; background:#111; }
.cloud-frame { display:block; width:100%; height:100%; border:0; }
.cloud-proxy-error { display:grid; gap:12px; width:min(440px,calc(100% - 36px)); margin:auto; padding:24px; color:var(--text); }
.cloud-proxy-error h2,.cloud-proxy-error p { margin:0; }
.cloud-proxy-error p { color:var(--muted); line-height:1.5; }
@media(prefers-reduced-motion:reduce) { .browser-mode-view { animation:none; } .browser-modes button { transition:none; } }
@media(max-width:780px) {
  body.browser-page main { padding:14px 0 94px; }
  .cloud-choice,.cloud-wait { padding:20px; }
  .browser-tabbar { padding:0 6px; }
  .browser-tabs { gap:8px; }
  .browser-controls { padding:6px; }
  .browser-frame { min-height:0; }
}

.game-dialog { display:flex; flex-direction:column; width:min(1280px,calc(100vw - 32px)); height:min(860px,calc(100dvh - 32px)); max-width:none; max-height:none; padding:0; overflow:hidden; border:1px solid var(--border); border-radius:14px; background:var(--surface); color:var(--text); }
.game-dialog::backdrop { background:#050607df; backdrop-filter:blur(3px); }
.game-dialog-head { display:flex; flex:0 0 48px; align-items:center; justify-content:space-between; padding:0 14px; border-bottom:1px solid var(--border); }
.game-loading { display:grid; flex:1; place-items:center; color:var(--muted); }
.game-frame { display:block; flex:1; width:100%; min-height:0; border:0; background:#111; }
.links-head { display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:18px; }
.links-head h2 { margin:0; font-size:24px; letter-spacing:-.04em; }
.links-byline { display:flex; align-items:center; gap:7px; margin:0 0 7px; color:var(--muted); font-size:12px; }
.links-byline i { color:var(--text); }
.links-head .media-tabs { margin:0; }
.links-variants { display:flex; gap:7px; margin:0 0 12px; }
.links-timeline-head { display:flex; justify-content:space-between; gap:12px; margin:0 0 8px; color:var(--muted); font-size:12px; }
.links-timeline-head small { font-size:11px; }
.links-timeline { display:flex; gap:8px; overflow-x:auto; margin:0 0 18px; padding:3px 0 8px; }
.link-drop-period { flex:0 0 auto; min-height:38px; padding:0 13px; border:1px solid var(--border); border-radius:9px; background:var(--surface); color:var(--muted); cursor:pointer; }
.link-drop-period:hover, .link-drop-period.active { border-color:var(--text); color:var(--text); }
.link-drop-meta { display:flex; flex-direction:column; gap:4px; margin:18px 0 8px; }
.link-drop-meta:empty { display:none; }
.link-drop-meta span { color:var(--muted); font-size:12px; }
@media(max-width:520px) { .links-head { align-items:start; flex-direction:column; gap:12px; } }
@media(max-width:780px) { .game-dialog { width:calc(100vw - 16px); height:calc(100dvh - 16px); border-radius:10px; } }
@media(max-width:780px) { .extra-viewer { height:calc(100dvh - 180px); min-height:360px; } }
.wip-tip { position:relative; display:inline-flex; }
.wip-tip::after { position:absolute; z-index:20; top:calc(100% + 7px); left:50%; padding:6px 9px; border:1px solid var(--border); border-radius:7px; background:var(--surface-raised); color:var(--text); content:attr(title); font-size:11px; line-height:1; white-space:nowrap; opacity:0; pointer-events:none; transform:translateX(-50%); transition:opacity .12s; }
.wip-tip:hover::after, .wip-tip:focus-within::after { opacity:1; }
.nav-wip { align-items:center; }
nav button.wip-disabled { color:var(--muted); opacity:.48; cursor:not-allowed; }
nav button.wip-disabled:hover { background:transparent; color:var(--muted); transform:none; }
.home-wip { display:block; }
.home-wip .home-launch { width:100%; height:100%; color:var(--muted); opacity:.48; cursor:not-allowed; }
.home-wip .home-launch:hover { border-color:var(--border); background:var(--surface); }
.browser-wip { align-items:stretch; }
.browser-wip button { color:var(--muted); opacity:.48; cursor:not-allowed; }
.browser-wip button:hover { background:transparent; }