*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%;width:100%;overflow:hidden;background:#0d0d0d;color:#fff;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;-webkit-font-smoothing:antialiased}.home{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:40px;padding:24px;background:radial-gradient(ellipse at center,#1a1a2e,#0d0d0d 70%)}.home__logo{display:flex;flex-direction:column;align-items:center;gap:8px}.home__logo h1{font-size:2rem;font-weight:700;letter-spacing:-.5px;color:#fff}.home__logo p{font-size:.9rem;color:#888}.home__card{background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:20px;padding:32px;width:100%;max-width:400px;display:flex;flex-direction:column;gap:24px}.home__section label{display:block;font-size:.8rem;color:#888;text-transform:uppercase;letter-spacing:.05em;margin-bottom:12px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none;border-radius:12px;cursor:pointer;font-size:1rem;font-weight:600;padding:14px 24px;transition:opacity .15s,transform .1s;width:100%}.btn:active{transform:scale(.97)}.btn:disabled{opacity:.4;cursor:not-allowed}.btn--primary{background:#4f46e5;color:#fff}.btn--primary:hover:not(:disabled){background:#4338ca}.btn--danger{background:#dc2626;color:#fff}.btn--danger:hover:not(:disabled){background:#b91c1c}.btn--ghost{background:#ffffff14;color:#fff}.btn--ghost:hover:not(:disabled){background:#ffffff24}.btn--sm{padding:10px 18px;font-size:.9rem;border-radius:10px}.home__join-row{display:flex;gap:10px}.home__input{flex:1;background:#ffffff14;border:1px solid rgba(255,255,255,.15);border-radius:10px;color:#fff;font-size:1.1rem;font-weight:700;letter-spacing:.15em;padding:12px 16px;text-transform:uppercase;outline:none;transition:border-color .15s}.home__input:focus{border-color:#4f46e5}.home__input::placeholder{color:#555;font-weight:400;letter-spacing:0;text-transform:none}.home__divider{text-align:center;color:#555;font-size:.85rem;position:relative}.home__divider:before,.home__divider:after{content:"";position:absolute;top:50%;width:42%;height:1px;background:#ffffff1a}.home__divider:before{left:0}.home__divider:after{right:0}.home__code-box{background:#4f46e526;border:1px solid rgba(79,70,229,.4);border-radius:12px;padding:20px;text-align:center}.home__code-box p{font-size:.8rem;color:#a5b4fc;margin-bottom:8px}.home__code-value{font-size:2.2rem;font-weight:800;letter-spacing:.3em;color:#fff;margin-bottom:16px}.room{position:relative;height:100%;width:100%;background:#000;overflow:hidden}.room__status{position:absolute;top:16px;left:50%;transform:translate(-50%);z-index:10;background:#0009;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:20px;padding:6px 16px;font-size:.82rem;color:#ccc;white-space:nowrap}.room__status--connected{color:#4ade80}.room__status--failed{color:#f87171}.room__code-badge{position:absolute;top:16px;right:16px;z-index:10;background:#00000080;border:1px solid rgba(255,255,255,.15);border-radius:8px;padding:4px 10px;font-size:.75rem;color:#888;letter-spacing:.1em}.room__waiting{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;color:#888;z-index:1}.room__waiting-icon{width:80px;height:80px;border-radius:50%;background:#ffffff0d;display:flex;align-items:center;justify-content:center}.room__waiting h2{font-size:1.2rem;color:#ccc}.room__waiting p{font-size:.85rem;color:#666}.room__share-row{display:flex;align-items:center;gap:8px;background:#ffffff0f;border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:10px 14px;cursor:pointer;transition:background .15s}.room__share-row:hover{background:#ffffff1a}.room__share-code{font-size:1.1rem;font-weight:700;letter-spacing:.2em;color:#fff}.room__share-hint{font-size:.75rem;color:#666}.video-player{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;background:#111}.pip{position:absolute;bottom:100px;right:16px;width:28vw;max-width:140px;min-width:80px;aspect-ratio:3/4;border-radius:12px;overflow:hidden;border:2px solid rgba(255,255,255,.2);z-index:20;background:#111;cursor:pointer;box-shadow:0 4px 20px #0009}.pip video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}.pip--off{display:flex;align-items:center;justify-content:center;color:#444}.ctrl{position:absolute;bottom:0;left:0;right:0;z-index:30;display:flex;align-items:center;justify-content:center;gap:12px;padding:16px 24px 28px;background:linear-gradient(to top,rgba(0,0,0,.85) 0%,transparent 100%)}.ctrl__btn{width:56px;height:56px;border-radius:50%;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .1s,background .15s;flex-shrink:0}.ctrl__btn:active{transform:scale(.9)}.ctrl__btn--normal{background:#ffffff26;color:#fff}.ctrl__btn--normal:hover{background:#ffffff40}.ctrl__btn--off{background:#ffffff12;color:#666}.ctrl__btn--active{background:#4f46e5;color:#fff}.ctrl__btn--active:hover{background:#4338ca}.ctrl__btn--end{width:64px;height:64px;background:#dc2626;color:#fff}.ctrl__btn--end:hover{background:#b91c1c}.ctrl__btn--recording{background:#dc2626;color:#fff;animation:pulse-red 1.5s ease-in-out infinite}@keyframes pulse-red{0%,to{box-shadow:0 0 #dc262666}50%{box-shadow:0 0 0 8px #dc262600}}.spinner{width:32px;height:32px;border:3px solid rgba(255,255,255,.1);border-top-color:#4f46e5;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.toast{position:fixed;bottom:110px;left:50%;transform:translate(-50%);background:#000c;color:#fff;border-radius:20px;padding:8px 20px;font-size:.85rem;z-index:100;pointer-events:none;animation:fadeInOut 2s ease forwards}@keyframes fadeInOut{0%{opacity:0;transform:translate(-50%) translateY(8px)}15%{opacity:1;transform:translate(-50%) translateY(0)}75%{opacity:1}to{opacity:0}}