*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:#0d1117;color:#e6edf3;min-height:100vh;display:flex;align-items:center;justify-content:center}#app{width:100%;max-width:960px;margin:0 auto;padding:24px}.hidden{display:none!important}.panel{background:#161b22;border:1px solid #30363d;border-radius:16px;padding:40px}#connect-panel h1{font-size:28px;margin-bottom:32px;text-align:center;color:#f0f6fc}.form-group{margin-bottom:20px}.form-group label{display:block;font-size:13px;font-weight:600;color:#8b949e;margin-bottom:6px;letter-spacing:.02em}.form-group input{width:100%;padding:10px 14px;background:#0d1117;border:1px solid #30363d;border-radius:8px;color:#e6edf3;font-size:14px;outline:none;transition:border-color .2s}.form-group input:focus{border-color:#58a6ff;box-shadow:0 0 0 3px #58a6ff26}.form-group input::placeholder{color:#484f58}.form-row{display:flex;gap:16px}.form-row .form-group{flex:1}.btn{cursor:pointer;border:none;border-radius:10px;font-size:15px;font-weight:600;padding:12px 24px;transition:all .2s;outline:none}.btn:disabled{opacity:.6;cursor:not-allowed}.btn-primary{width:100%;background:linear-gradient(135deg,#238636,#2ea043);color:#fff;margin-top:8px;font-size:16px}.btn-primary:hover:not(:disabled){background:linear-gradient(135deg,#2ea043,#3fb950);transform:translateY(-1px);box-shadow:0 4px 12px #2ea04366}.top-bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;padding:0 4px}.room-info{font-size:14px;font-weight:600;color:#8b949e}.status{font-size:13px;padding:4px 10px;border-radius:20px;background:#1c2128;color:#8b949e}.status.connected{background:#2ea04326;color:#3fb950}.participants{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin-bottom:24px;min-height:300px}.participant-tile{position:relative;background:#1c2128;border:1px solid #30363d;border-radius:12px;overflow:hidden;aspect-ratio:16 / 9;display:flex;align-items:center;justify-content:center}.participant-tile video{width:100%;height:100%;object-fit:cover;display:block}.participant-tile .remote-placeholder{color:#484f58;font-size:14px}.participant-label{position:absolute;bottom:10px;left:12px;background:#0009;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);color:#f0f6fc;padding:3px 10px;border-radius:6px;font-size:12px;font-weight:600;pointer-events:none}.badges{position:absolute;top:10px;right:10px;display:flex;gap:4px}.badge{background:#0009;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);padding:3px 7px;border-radius:6px;font-size:12px}.controls{display:flex;align-items:center;justify-content:center;gap:16px}.btn-control{width:52px;height:52px;border-radius:50%;background:#21262d;border:1px solid #30363d;display:flex;align-items:center;justify-content:center;font-size:20px;padding:0;transition:all .2s}.btn-control:hover{background:#30363d;border-color:#484f58;transform:scale(1.05)}.btn-control.off{background:#da3633;border-color:#f85149}.btn-control.active{background:#1f6feb;border-color:#58a6ff}.btn-danger{width:52px;height:52px;border-radius:50%;background:#da3633;border:1px solid #f85149;display:flex;align-items:center;justify-content:center;font-size:20px;padding:0;transition:all .2s}.btn-danger:hover{background:#f85149;transform:scale(1.05)}@media(max-width:600px){#app{padding:12px}.panel{padding:24px}.participants{grid-template-columns:1fr}}