@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');

:root { color-scheme: dark; --bg:#090b13; --panel:#111521; --panel-2:#151a29; --text:#f7f7fb; --muted:#989eaf; --line:rgba(255,255,255,.11); --pink:#f23ac9; --blue:#7296ff; --cyan:#6ce8df; }
* { box-sizing:border-box; }
html, body { min-height:100%; }
body { margin:0; background:radial-gradient(circle at 70% -20%, #222441 0, transparent 35%), var(--bg); color:var(--text); font-family:'DM Sans', sans-serif; overflow-x:hidden; }
button, input { font:inherit; }
button { cursor:pointer; }
.shell { width:min(1180px, calc(100% - 48px)); margin:0 auto; position:relative; z-index:2; }
.ambient { position:fixed; pointer-events:none; filter:blur(80px); opacity:.24; border-radius:50%; z-index:0; }
.ambient-one { width:360px; height:360px; background:#6d4bf5; right:-100px; top:180px; }
.ambient-two { width:280px; height:280px; background:#ea2cbf; left:-140px; bottom:90px; }
.topbar { display:flex; justify-content:space-between; align-items:center; min-height:76px; border-bottom:1px solid var(--line); }
.brand { display:flex; gap:10px; align-items:center; color:var(--text); text-decoration:none; font-family:'Space Grotesk', sans-serif; font-weight:700; font-size:20px; letter-spacing:-.04em; }
.accent { color:var(--pink); }
.brand-mark { display:flex; gap:3px; align-items:flex-end; height:22px; padding:3px 5px; border:1px solid rgba(242,58,201,.55); border-radius:7px; transform:skewY(-12deg); box-shadow:0 0 20px rgba(242,58,201,.16); }
.brand-mark i { display:block; width:3px; border-radius:3px; background:linear-gradient(180deg,var(--blue),var(--pink)); }
.brand-mark i:nth-child(1){height:8px}.brand-mark i:nth-child(2){height:13px}.brand-mark i:nth-child(3){height:18px}
.topbar-actions { display:flex; align-items:center; gap:20px; }
.status-pill { color:var(--muted); font-size:13px; display:flex; gap:8px; align-items:center; }
.status-dot { width:7px; height:7px; background:#61e8b3; border-radius:50%; box-shadow:0 0 11px #61e8b3; }
.ghost-button { color:var(--muted); background:transparent; border:0; padding:10px 0; }
.ghost-button:hover { color:var(--text); }
.hero { min-height:550px; display:grid; align-items:center; grid-template-columns:minmax(0,720px); padding:70px 0 90px; }
.eyebrow { color:var(--cyan); font-size:12px; font-weight:700; letter-spacing:.18em; margin:0 0 18px; }
h1, h2, h3, p { margin-top:0; }
h1 { font-family:'Space Grotesk', sans-serif; font-size:clamp(48px, 7vw, 88px); line-height:.96; letter-spacing:-.07em; max-width:700px; margin-bottom:24px; }
.hero-copy { color:var(--muted); font-size:18px; line-height:1.55; max-width:470px; margin-bottom:36px; }
.hero-copy strong { color:var(--text); font-weight:500; }
.start-card { padding:26px; border:1px solid var(--line); border-radius:22px; background:linear-gradient(145deg,rgba(24,28,43,.88),rgba(12,14,24,.88)); box-shadow:0 25px 90px rgba(0,0,0,.28); }
.start-card label { color:var(--muted); font-size:13px; display:block; margin-bottom:10px; }
.input-row { display:flex; gap:10px; }
.url-input { width:100%; min-width:0; padding:15px 16px; color:var(--text); background:#0a0d16; border:1px solid var(--line); border-radius:12px; outline:none; }
.url-input:focus { border-color:rgba(108,232,223,.75); box-shadow:0 0 0 4px rgba(108,232,223,.1); }
.primary-button { border:0; color:#fff; font-weight:700; padding:15px 22px; border-radius:12px; background:linear-gradient(100deg,var(--pink),#ab63ff 56%,var(--blue)); box-shadow:0 12px 26px rgba(201,52,214,.27); transition:transform .18s ease, filter .18s ease; white-space:nowrap; }
.primary-button:hover { transform:translateY(-2px); filter:brightness(1.09); }
.hint { color:#70778a; margin:13px 0 0; font-size:12px; }
.empty-room-button { margin-top:15px; width:100%; border:1px solid rgba(108,232,223,.2); border-radius:10px; padding:11px 14px; color:var(--cyan); background:rgba(108,232,223,.06); font-size:13px; text-align:left; display:flex; justify-content:space-between; align-items:center; }.empty-room-button:hover{border-color:rgba(108,232,223,.65);background:rgba(108,232,223,.1)}
.orbit { position:relative; min-height:330px; display:grid; place-items:center; }
.orbit-ring { position:absolute; width:310px; height:310px; border:1px solid rgba(114,150,255,.26); border-radius:50%; transform:rotate(-22deg); }
.orbit-ring::before, .orbit-ring::after { content:''; position:absolute; width:9px; height:9px; border-radius:50%; background:var(--pink); box-shadow:0 0 20px var(--pink); }
.orbit-ring::before { top:20px; left:40px; }.orbit-ring::after { right:34px; bottom:45px; background:var(--cyan); box-shadow:0 0 20px var(--cyan); }
.orbit-core { width:175px; height:175px; display:grid; place-items:center; border:1px solid rgba(242,58,201,.52); border-radius:50%; background:radial-gradient(circle,#252642 0,#131626 54%,#0c0f1b 70%); box-shadow:0 0 70px rgba(209,55,214,.26), inset 0 0 35px rgba(114,150,255,.12); }
.play-glyph { width:0;height:0;border-top:17px solid transparent;border-bottom:17px solid transparent;border-left:26px solid var(--text); margin-left:7px; filter:drop-shadow(0 0 15px rgba(255,255,255,.35)); }
.orbit-label { position:absolute; bottom:10px; right:24px; color:var(--muted); font-size:12px; letter-spacing:.1em; text-transform:uppercase; }
.feature-strip { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; padding-bottom:80px; }
.feature { border-top:1px solid var(--line); padding:20px 8px; }
.feature-number { color:var(--pink); font-family:'Space Grotesk', sans-serif; font-size:13px; }
.feature h3 { margin:12px 0 7px; font-size:17px; }.feature p { color:var(--muted); line-height:1.45; font-size:14px; max-width:260px; margin:0; }
.footer { border-top:1px solid var(--line); color:#6f7484; display:flex; justify-content:space-between; font-size:12px; padding:24px 0 32px; }
.room-shell { padding:28px 0 46px; }.room-top { display:flex; justify-content:space-between; align-items:center; gap:18px; margin-bottom:22px; }
.back-link { color:var(--muted); text-decoration:none; font-size:14px; }.back-link:hover{color:#fff}.room-title { display:flex; align-items:center; gap:12px; }.room-title h2 { font-size:21px; margin:0; font-family:'Space Grotesk', sans-serif; }.room-code { color:var(--cyan); border:1px solid rgba(108,232,223,.28); background:rgba(108,232,223,.08); padding:7px 10px; border-radius:9px; letter-spacing:.12em; font:600 12px 'Space Grotesk', sans-serif; }
.room-layout { display:grid; grid-template-columns:minmax(0,1fr) 280px; gap:18px; }.player-card, .side-card { background:rgba(17,21,33,.9); border:1px solid var(--line); border-radius:18px; overflow:hidden; }.video-frame { aspect-ratio:16/9; background:#05060a; }.video-frame iframe { display:block; width:100%; height:100%; border:0; }.player-empty { height:100%; display:grid; place-items:center; color:var(--muted); text-align:center; padding:25px; }.player-empty strong{display:block;color:#fff;margin-bottom:6px}.player-empty p{margin:0;font-size:13px}.controls { padding:14px 16px 16px; }.control-row { display:flex; gap:10px; align-items:center; }.control-button { width:38px; height:36px; border:1px solid var(--line); border-radius:9px; background:#1b2030; color:#fff; }.control-button:hover{border-color:rgba(242,58,201,.6)}.seek { accent-color:var(--pink); width:100%; }.time { color:var(--muted); font-variant-numeric:tabular-nums; font-size:12px; min-width:80px; text-align:right; }.control-meta { display:flex; justify-content:space-between; align-items:center; margin-top:12px; color:var(--muted); font-size:12px; }.toggle { display:flex; align-items:center; gap:8px; }.toggle input{accent-color:var(--pink)}
.side-card { padding:20px; }.side-card h3 { font-size:15px; margin-bottom:16px; }.invite-box { background:#0b0f19; border:1px solid var(--line); border-radius:12px; padding:12px; display:flex; gap:8px; align-items:center; }.invite-box span { flex:1; font-family:'Space Grotesk',sans-serif; letter-spacing:.12em; color:var(--cyan); font-size:19px; }.small-button { border:1px solid var(--line); background:#1a2030; color:#fff; border-radius:8px; padding:9px 11px; font-size:12px; }.small-button:hover {border-color:var(--cyan)}.side-note { color:var(--muted); font-size:12px; line-height:1.5; margin:18px 0 0; }.room-video-form{margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}.room-video-form label{display:block;color:var(--muted);font-size:12px;margin-bottom:8px}.room-video-row,.queue-form{display:flex;gap:7px}.room-video-row .url-input,.queue-form .url-input{padding:10px 11px;font-size:12px}.room-video-row .small-button{white-space:nowrap}.room-video-form .error-text{font-size:11px;margin-top:8px}.queue-section{margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}.queue-heading{display:flex;align-items:center;justify-content:space-between}.queue-heading h3{margin:0 0 10px}.queue-heading span{color:var(--pink);font:600 12px 'Space Grotesk',sans-serif}.queue-form .small-button{font-size:17px;line-height:1;padding:7px 11px}.queue-list{margin-top:10px;display:grid;gap:7px}.queue-empty{color:#6f7688;font-size:12px;margin:6px 0}.queue-item{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 9px;background:#0b0f19;border:1px solid rgba(255,255,255,.07);border-radius:9px}.queue-item>span:first-child{display:flex;align-items:center;gap:8px;min-width:0}.queue-item b{color:var(--pink);font:600 11px 'Space Grotesk',sans-serif}.queue-item code{color:var(--muted);font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.queue-actions{display:flex;gap:4px;flex:0 0 auto}.queue-action{width:25px;height:24px;border:1px solid var(--line);border-radius:6px;background:#171d2b;color:#fff;font-size:11px}.queue-action:hover{border-color:var(--cyan)}.queue-action-remove:hover{border-color:#ff8999;color:#ff8999}.sync-state { display:flex; gap:8px; align-items:center; margin-top:20px; color:var(--muted); font-size:12px; }.sync-state .status-dot { width:6px;height:6px; }
.toast { position:fixed; left:50%; bottom:28px; transform:translate(-50%,20px); opacity:0; transition:.22s ease; z-index:10; background:#f8f8fb; color:#11131d; padding:11px 15px; border-radius:10px; font-size:13px; box-shadow:0 10px 30px rgba(0,0,0,.35); }.toast.show{opacity:1;transform:translate(-50%,0)}
.how-dialog { width:min(480px,calc(100% - 32px)); color:var(--text); background:#121625; border:1px solid var(--line); border-radius:20px; padding:28px; box-shadow:0 30px 100px #000; }.how-dialog::backdrop{background:rgba(0,0,0,.65);backdrop-filter:blur(5px)}.how-dialog h2{font:600 30px/1.05 'Space Grotesk', sans-serif;letter-spacing:-.05em;max-width:330px}.dialog-close{position:absolute;right:17px;top:13px;border:0;background:transparent;color:var(--muted);font-size:28px}.how-dialog ol{list-style:none;padding:0;margin:28px 0 0}.how-dialog li{display:flex;gap:15px;padding:14px 0;border-top:1px solid var(--line)}.how-dialog li>span{color:var(--pink);font:600 12px 'Space Grotesk', sans-serif}.how-dialog strong{display:block;font-size:14px}.how-dialog small{display:block;color:var(--muted);margin-top:4px}
.error-text { color:#ff8999; font-size:13px; margin:12px 0 0; }
@media(max-width:850px){.hero{grid-template-columns:1fr;gap:0;padding-top:54px}.orbit{min-height:260px;order:-1}.orbit-ring{width:220px;height:220px}.orbit-core{width:130px;height:130px}.play-glyph{transform:scale(.75)}.input-row{flex-direction:column}.primary-button{width:100%}.room-layout{grid-template-columns:1fr}.room-top{align-items:flex-start;flex-direction:column}.topbar-actions .status-pill{display:none}}
@media(max-width:560px){.shell{width:min(100% - 30px,1180px)}.topbar{min-height:65px}.ghost-button{font-size:13px}.hero{padding:48px 0 62px}.feature-strip{grid-template-columns:1fr;padding-bottom:54px}h1{font-size:54px}.footer{gap:20px;flex-direction:column}.room-shell{padding-top:22px}.control-meta{align-items:flex-start;gap:15px;flex-direction:column}.time{text-align:left}}

.video-frame { position:relative; overflow:hidden; }
.video-frame iframe, #ytPlayer { position:absolute; inset:0; width:100%; height:100%; border:0; }
.video-frame iframe { pointer-events:none; }
.player-overlay-play { position:absolute; z-index:3; left:50%; top:50%; width:64px; height:64px; transform:translate(-50%,-50%); border:0; border-radius:50%; color:#fff; background:linear-gradient(135deg,var(--pink),#8f69ff); box-shadow:0 12px 34px rgba(0,0,0,.4); font-size:24px; padding-left:5px; }
.player-overlay-play:hover { filter:brightness(1.12); transform:translate(-50%,-50%) scale(1.05); }
.player-controls { position:absolute; z-index:4; left:0; right:0; bottom:0; display:flex; align-items:center; gap:10px; padding:38px 14px 12px; background:linear-gradient(transparent,rgba(5,6,10,.96)); }
.player-controls[hidden], .player-overlay-play[hidden] { display:none; }
.player-controls .control-button { width:34px; height:32px; border:1px solid rgba(255,255,255,.14); border-radius:8px; background:rgba(20,24,37,.86); color:#fff; }
.player-controls .control-button:hover { border-color:rgba(242,58,201,.75); }
.player-card > .control-meta { margin:12px 16px 15px; }

.topbar-actions { display:flex; align-items:center; gap:12px; }
.account-button { border:1px solid var(--line); border-radius:999px; padding:10px 16px; color:var(--text); background:rgba(255,255,255,.06); font-size:13px; font-weight:600; }
.account-button:hover { border-color:rgba(108,232,223,.65); background:rgba(108,232,223,.1); }
.account-button.is-premium { color:#11131d; border-color:transparent; background:linear-gradient(100deg,#f5d27a,#f09c5b); }
.home-shell { min-height:calc(100vh - 150px); padding:22px 0 64px; }
.home-tabs { display:flex; gap:22px; border-bottom:1px solid var(--line); }
.home-tab { border:0; border-bottom:2px solid transparent; padding:14px 2px; color:var(--muted); background:transparent; font-weight:600; }
.home-tab.active, .home-tab:hover { color:#fff; border-bottom-color:var(--pink); }
.home-content { display:grid; grid-template-columns:minmax(0,1fr) minmax(420px,560px); align-items:center; gap:80px; min-height:550px; }
.home-copy h1 { margin-bottom:20px; }
.home-subtitle { color:var(--muted); font-size:17px; margin:0; }
.home-content .start-card { max-width:560px; }
.room-title { flex-wrap:wrap; }
.room-expiry { color:#ffcf7a; font-size:12px; font-variant-numeric:tabular-nums; border:1px solid rgba(255,207,122,.24); background:rgba(255,207,122,.08); border-radius:999px; padding:7px 10px; }
.side-card-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.side-card-head h3 { margin-bottom:14px; }
.queue-cap { color:var(--muted); font-size:11px; white-space:nowrap; border:1px solid var(--line); border-radius:999px; padding:6px 8px; }
.premium-inline { border:0; padding:0; color:#f5c66c; background:transparent; font-size:12px; font-weight:600; }
.premium-inline:hover { color:#ffe4a7; }
.account-dialog { width:min(470px,calc(100% - 30px)); color:var(--text); background:#131827; border:1px solid var(--line); border-radius:22px; padding:28px; box-shadow:0 30px 100px #000; }
.account-dialog::backdrop { background:rgba(0,0,0,.72); backdrop-filter:blur(7px); }
.account-dialog h2 { font:600 28px/1.1 'Space Grotesk',sans-serif; letter-spacing:-.04em; margin-bottom:12px; overflow-wrap:anywhere; }
.dialog-close { position:absolute; right:17px; top:13px; border:0; background:transparent; color:var(--muted); font-size:28px; }
.dialog-copy { color:var(--muted); line-height:1.5; margin-bottom:18px; }
.account-action { width:100%; margin-top:14px; }
.account-head { display:flex; align-items:center; gap:14px; margin-bottom:24px; padding-right:24px; }
.account-head .eyebrow { margin-bottom:6px; }
.account-avatar { display:grid; place-items:center; width:48px; height:48px; border-radius:50%; color:#11131d; background:linear-gradient(135deg,var(--cyan),var(--blue)); font:700 18px 'Space Grotesk',sans-serif; }
.account-plan { display:flex; align-items:center; justify-content:space-between; gap:15px; padding:16px; border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.04); }
.account-plan strong { display:block; font-size:15px; margin-bottom:5px; }.account-plan p { color:var(--muted); font-size:12px; margin:0; }.premium-plan { border-color:rgba(245,198,108,.4); background:linear-gradient(135deg,rgba(245,198,108,.12),rgba(242,58,201,.08)); }
.plan-badge { color:#f5c66c; font:700 10px 'Space Grotesk',sans-serif; letter-spacing:.12em; }.premium-list { display:grid; gap:10px; color:var(--muted); font-size:13px; margin:21px 0; }.premium-list span { color:#d9deea; }.text-button { width:100%; margin-top:15px; border:0; color:var(--muted); background:transparent; font-size:13px; }.text-button:hover{color:#fff}
@media(max-width:980px){.home-content{grid-template-columns:1fr;gap:28px;min-height:0;padding:70px 0}.home-content .start-card{max-width:none}.room-layout{grid-template-columns:minmax(0,1fr) 320px}}
@media(max-width:700px){.home-content{padding:48px 0}.room-title{gap:8px}.room-top{display:grid;grid-template-columns:1fr auto}.room-top .room-title{grid-column:1/-1;grid-row:1}.room-top .back-link{grid-row:2}.room-top #copyRoom{grid-row:2}.room-layout{grid-template-columns:1fr}.side-card{order:2}}

.player-card { background:#01071c; border-color:rgba(157,159,173,.2); border-radius:22px; box-shadow:0 24px 70px rgba(1,7,28,.35); }
.video-frame { background:#01071c; }
.player-cover-top { position:absolute; z-index:2; inset:0 0 auto; height:82px; pointer-events:none; background:linear-gradient(180deg,#01071c 0 68%,rgba(1,7,28,.88) 82%,transparent); }
.player-overlay-play { z-index:3; width:58px; height:58px; background:#f88c6a; color:#01071c; box-shadow:0 12px 28px rgba(248,140,106,.28); }
.player-overlay-play:hover { background:#ffab8f; }
.player-controls { z-index:4; gap:12px; padding:46px 18px 15px; background:linear-gradient(transparent,rgba(1,7,28,.98) 60%); }
.player-controls .control-button { width:32px; height:32px; border:1px solid rgba(157,159,173,.35); border-radius:50%; background:rgba(1,7,28,.75); color:#f5f5f7; font-size:13px; }
.player-controls .control-button:hover { color:#01071c; border-color:#f88c6a; background:#f88c6a; }
.player-controls .seek { accent-color:#f88c6a; height:3px; }
.player-controls .time { color:#9d9fad; min-width:82px; }
.volume-control { display:flex; align-items:center; gap:8px; }
.volume { width:76px; accent-color:#f88c6a; height:3px; }
.player-card > .control-meta { color:#9d9fad; margin:0; padding:13px 18px 17px; border-top:1px solid rgba(157,159,173,.12); }
.player-card > .control-meta .premium-inline { color:#f88c6a; }

/* Match the reference player: controls stay in a single, quiet bottom rail. */
.player-controls { gap:10px; padding:28px 8px 7px; background:linear-gradient(transparent,rgba(1,7,28,.94) 68%); transition:opacity .2s ease,transform .2s ease; }
.video-frame.controls-hidden .player-controls { opacity:0; transform:translateY(8px); pointer-events:none; }
.player-controls .control-button { width:21px; height:21px; padding:0; border:1px solid rgba(157,159,173,.58); background:rgba(1,7,28,.68); color:#f5f5f7; font-size:11px; line-height:1; display:grid; place-items:center; flex:0 0 auto; }
.player-controls .control-button:hover { color:#01071c; border-color:#f88c6a; background:#f88c6a; }
.player-controls .seek { flex:1 1 auto; min-width:36px; width:auto; height:2px; }
.player-controls .time { min-width:58px; font-size:10px; letter-spacing:-.02em; }
.volume-control { gap:6px; flex:0 0 auto; }
.volume { width:58px; height:2px; }
.play-icon, .pause-icon { display:block; }
.play-icon { width:0; height:0; margin-left:1px; border-top:4px solid transparent; border-bottom:4px solid transparent; border-left:6px solid currentColor; }
.pause-icon { width:6px; height:8px; border-left:2px solid currentColor; border-right:2px solid currentColor; }
.volume-icon { position:relative; display:block; width:11px; height:9px; }
.volume-icon::before { content:""; position:absolute; left:0; top:3px; width:3px; height:4px; border-radius:1px; background:currentColor; box-shadow:3px -3px 0 -1px currentColor,3px 3px 0 -1px currentColor; }
.volume-icon::after { content:""; position:absolute; left:5px; top:1px; width:5px; height:7px; border:1px solid currentColor; border-left:0; border-top-color:transparent; border-bottom-color:transparent; border-radius:0 50% 50% 0; }
.volume-icon.is-muted::after { left:5px; top:4px; width:8px; height:1px; border:0; border-radius:0; background:currentColor; transform:rotate(45deg); }
.fullscreen-icon { position:relative; display:block; width:10px; height:10px; border:1px solid currentColor; border-radius:1px; }
.fullscreen-icon::before, .fullscreen-icon::after { content:""; position:absolute; background:#01071c; }
.fullscreen-icon::before { left:3px; top:-2px; width:4px; height:12px; }
.fullscreen-icon::after { left:-2px; top:3px; width:12px; height:4px; }
.fullscreen-icon.is-active { border:0; }
.fullscreen-icon.is-active::before, .fullscreen-icon.is-active::after { background:currentColor; }
.player-poster { position:absolute; z-index:3; inset:0; background-color:#01071c; background-position:center; background-size:cover; }
.player-poster[hidden] { display:none; }
@media(max-width:560px){.player-controls{gap:7px;padding-left:6px;padding-right:6px}.player-controls .time{min-width:49px}.volume{width:42px}}