:root{--c-bg: #0a0a0f;--c-surface: #111118;--c-border: #1e1e2e;--c-border-hi: #2e2e4a;--c-accent: #5cffe4;--c-accent-2: #ff5cf4;--c-text: #e8e8f0;--c-text-dim: #6b6b88;--c-error: #ff4f6e;--f-display: "Syne", sans-serif;--f-mono: "DM Mono", monospace;--r-card: 12px;--r-btn: 8px;--shadow-card: 0 24px 80px rgba(0,0,0,.6), 0 0 0 1px var(--c-border);--shadow-glow: 0 0 40px rgba(92,255,228,.12)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%}body{background:var(--c-bg);color:var(--c-text);font-family:var(--f-mono);-webkit-font-smoothing:antialiased}.lobby{min-height:100vh;display:flex;flex-direction:column;position:relative;overflow:hidden}.lobby__noise{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");background-size:200px}.lobby__header{padding:28px 40px;position:relative;z-index:1}.lobby__logo{display:flex;align-items:center;gap:10px;font-family:var(--f-display);font-weight:700;font-size:1.1rem;letter-spacing:.04em}.logo-mark{color:var(--c-accent);font-size:1.3rem;line-height:1}.lobby__main{flex:1;display:flex;align-items:center;justify-content:center;padding:40px 24px;position:relative;z-index:1}.lobby__decoration{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;display:flex;align-items:center;justify-content:center}.deco-ring{position:absolute;border-radius:50%;border:1px solid;animation:spin-slow linear infinite}.deco-ring--1{width:600px;height:600px;border-color:#5cffe40f;animation-duration:60s}.deco-ring--2{width:800px;height:800px;border-color:#ff5cf40a;animation-duration:90s;animation-direction:reverse}.deco-ring--3{width:1100px;height:1100px;border-color:#5cffe408;animation-duration:120s}@keyframes spin-slow{to{transform:rotate(360deg)}}.lobby__card{width:100%;max-width:480px;background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-card);padding:48px 44px;box-shadow:var(--shadow-card),var(--shadow-glow);position:relative}.lobby__card:before{content:"";position:absolute;top:0;left:40px;right:40px;height:1px;background:linear-gradient(90deg,transparent,var(--c-accent),transparent);opacity:.5}.lobby__eyebrow{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;color:var(--c-accent);margin-bottom:16px}.lobby__title{font-family:var(--f-display);font-size:clamp(2rem,5vw,2.8rem);font-weight:700;line-height:1.1;margin-bottom:16px;letter-spacing:-.02em}.lobby__title em{font-style:normal;color:var(--c-accent)}.lobby__subtitle{color:var(--c-text-dim);font-size:.88rem;line-height:1.6;margin-bottom:36px}.lobby__label{display:block;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--c-text-dim);margin-bottom:10px}.lobby__input-row{display:flex;gap:10px}.lobby__input{flex:1;background:var(--c-bg);border:1px solid var(--c-border-hi);border-radius:var(--r-btn);padding:12px 16px;color:var(--c-text);font-family:var(--f-mono);font-size:.9rem;outline:none;transition:border-color .2s,box-shadow .2s}.lobby__input::placeholder{color:var(--c-text-dim)}.lobby__input:focus{border-color:var(--c-accent);box-shadow:0 0 0 3px #5cffe414}.lobby__field--error .lobby__input{border-color:var(--c-error)}.lobby__error-msg{display:block;margin-top:8px;font-size:.78rem;color:var(--c-error)}.lobby__btn{display:inline-flex;align-items:center;gap:8px;padding:12px 20px;background:var(--c-accent);color:#000;border:none;border-radius:var(--r-btn);font-family:var(--f-display);font-size:.9rem;font-weight:700;cursor:pointer;transition:opacity .15s,transform .15s;white-space:nowrap}.lobby__btn svg{width:16px;height:16px}.lobby__btn:hover{opacity:.88;transform:translateY(-1px)}.lobby__btn:active{transform:translateY(0)}.lobby__hints{margin-top:28px;display:flex;flex-wrap:wrap;gap:14px}.hint{display:flex;align-items:center;gap:7px;font-size:.73rem;color:var(--c-text-dim)}.hint-dot{width:6px;height:6px;border-radius:50%;background:var(--c-accent);opacity:.6;flex-shrink:0}.room{height:100vh;display:flex;flex-direction:column;background:var(--c-bg);position:relative}.room__header{display:flex;align-items:center;justify-content:space-between;padding:16px 28px;border-bottom:1px solid var(--c-border);background:var(--c-surface);flex-shrink:0;z-index:10}.room__room-name{display:flex;align-items:center;gap:8px;font-size:.82rem}.room__room-label{color:var(--c-text-dim)}.room__room-slug{font-family:var(--f-mono);color:var(--c-accent)}.room__status-dot{width:8px;height:8px;border-radius:50%;background:var(--c-text-dim);transition:background .4s}.room__status-dot--connected{background:#4cff7a;box-shadow:0 0 8px #4cff7a80}.room__status-dot--waiting{background:#ffce4c;animation:pulse-dot 1.4s ease infinite}.room__status-dot--connecting{background:var(--c-accent);animation:pulse-dot 1s ease infinite}@keyframes pulse-dot{0%,to{opacity:1}50%{opacity:.3}}.room__grid{flex:1;display:grid;overflow:hidden;position:relative;background:#05050a}.room__grid--connected{grid-template-columns:1fr;grid-template-rows:1fr}.room__grid--waiting{grid-template-columns:1fr;grid-template-rows:1fr;align-items:center;justify-items:center}.video-tile{position:relative;overflow:hidden;background:#0d0d15}.room__video--remote{width:100%;height:100%}.room__video--local{position:absolute;bottom:24px;right:24px;width:200px;height:150px;border-radius:10px;border:2px solid var(--c-border-hi);overflow:hidden;box-shadow:0 8px 32px #0009;z-index:5;transition:all .4s ease}.room__video--local-large{position:relative;inset:auto;width:100%;height:100%;border-radius:0;border:none;box-shadow:none}.video-tile video{width:100%;height:100%;object-fit:cover;display:block}.video-tile__placeholder{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:var(--c-text-dim);font-size:.82rem}.video-tile__placeholder svg{width:48px;height:48px;opacity:.3}.video-tile__label{position:absolute;bottom:12px;left:12px;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;background:#0009;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);padding:4px 10px;border-radius:4px;color:var(--c-text)}.room__overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#0a0a0fcc;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:20}.room__overlay-content{display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center;color:var(--c-text-dim);font-size:.9rem}.room__spinner{width:36px;height:36px;border:2px solid var(--c-border-hi);border-top-color:var(--c-accent);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.call-controls{display:flex;align-items:center;justify-content:center;gap:16px;padding:20px;background:var(--c-surface);border-top:1px solid var(--c-border);flex-shrink:0}.control-btn{display:flex;flex-direction:column;align-items:center;gap:5px;padding:14px 20px;min-width:72px;background:var(--c-bg);border:1px solid var(--c-border-hi);border-radius:var(--r-btn);color:var(--c-text);cursor:pointer;font-family:var(--f-mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;transition:background .15s,border-color .15s,color .15s}.control-btn svg{width:22px;height:22px}.control-btn:hover{background:var(--c-border);border-color:var(--c-text-dim)}.control-btn--off{color:var(--c-text-dim);background:#ff4f6e14;border-color:#ff4f6e4d}.control-btn--off:hover{background:#ff4f6e26}.control-btn--hangup{background:var(--c-error);border-color:var(--c-error);color:#fff;padding:14px 28px}.control-btn--hangup:hover{background:#ff2a4e;border-color:#ff2a4e}.room-error{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}.room-error__box{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-card);padding:48px;text-align:center;max-width:360px;box-shadow:var(--shadow-card)}.room-error__icon{font-size:3rem;display:block;margin-bottom:16px;color:var(--c-error)}.room-error__box h2{font-family:var(--f-display);font-size:1.5rem;font-weight:800;margin-bottom:12px}.room-error__box p{color:var(--c-text-dim);font-size:.88rem;line-height:1.6;margin-bottom:28px}