:root{font-family:Inter,system-ui,sans-serif;color:#f5f7fb;background:#11131a}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{background:radial-gradient(circle at 50% 0,#26304b,#11131a 55%)}.shell{width:100%;height:100%;max-width:1100px;margin:auto;padding:clamp(10px,3vw,36px) 20px}.card{max-width:460px;margin:8vh auto 0;padding:42px;border:1px solid #30384d;border-radius:24px;background:#1a1e29;box-shadow:0 24px 80px #0005}.logo{font-weight:800;font-size:24px;letter-spacing:-1px}.logo span{color:#7c8cff}h1{font-size:36px;line-height:1.05;margin:46px 0 12px}.muted{color:#aab1c2;line-height:1.5}button,input{font:inherit;border:0;border-radius:12px;padding:13px 16px}button{cursor:pointer;background:#7284ff;color:white;font-weight:700}#create{width:100%;margin:24px 0 12px}.join{display:flex;gap:8px;margin-top:10px}.join input{width:0;flex:1;min-width:0;background:#11131a;color:white;border:1px solid #3a4257;text-transform:uppercase}.join button{flex:0 0 auto;background:#30384d}.error{color:#ff8080;min-height:20px}.hidden{display:none!important}.call{height:100%;display:flex;flex-direction:column}.call header{display:flex;align-items:center;justify-content:space-between;gap:12px;flex:0 0 auto;margin-bottom:12px}.call header>div:last-child{display:flex;align-items:center;gap:8px;color:#aab1c2;font-size:13px}.secondary,.danger{font-size:12px;padding:9px 11px}.secondary{background:#30384d}.danger{background:#b54b5b}.videos{position:relative;flex:1;min-height:0;display:grid;grid-template-columns:1fr 280px;gap:12px}.videos video{width:100%;height:100%;min-height:0;object-fit:contain;background:#08090d;border-radius:16px}.videos #local{position:absolute;right:14px;bottom:14px;width:220px;height:140px;border:2px solid #707bff;cursor:grab}.waiting{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;color:#b8bfd0;font-size:20px;pointer-events:none}.waiting small{margin-top:10px;color:#7284ff}nav{flex:0 0 auto;display:flex;justify-content:center;align-items:center;gap:8px;margin-top:12px}nav button{background:#30384d;padding:10px 12px;font-size:18px;line-height:1}nav .check{display:flex;align-items:center;gap:5px;color:#b8bfd0;font-size:12px;white-space:nowrap}nav .check input{accent-color:#7284ff}@media(max-width:700px){.shell{padding:8px 10px}.card{margin:5vh auto 0;padding:26px 20px}h1{font-size:30px;margin-top:32px}.call header{margin-bottom:8px}.call header>div:last-child{gap:5px}.call header .logo{font-size:20px}.call header #status{display:none}.videos{grid-template-columns:1fr}.videos #local{width:120px;height:82px;right:8px;bottom:8px}.videos video{min-height:0}nav{gap:6px;margin-top:8px}nav button{padding:9px 11px;font-size:17px}nav .check{font-size:0}nav .check input{width:18px;height:18px}}
@media (max-width:700px) and (orientation:landscape){.shell{padding:6px 10px}.call header{margin-bottom:5px}.videos #local{width:110px;height:70px;right:8px;bottom:8px}.videos video{border-radius:10px}nav{margin-top:5px}.waiting{font-size:16px}}
.icon-btn{position:relative;min-width:42px;padding:8px 10px}.icon-btn.icon-off::after{content:"";position:absolute;left:7px;right:7px;top:50%;height:3px;border-radius:3px;background:#ff4d62;transform:rotate(-35deg);box-shadow:0 0 0 1px #11131a}