*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:#0f0f0f;color:#e0e0e0;min-height:100vh}#app{max-width:600px;margin:0 auto;padding:2rem 1rem}h1{text-align:center;margin-bottom:2rem;font-size:1.5rem;color:#fff}.mode-select{display:flex;gap:1rem;justify-content:center;margin-bottom:2rem}.mode-select button{padding:.75rem 2rem;font-size:1rem;border:2px solid #333;border-radius:8px;background:#1a1a1a;color:#e0e0e0;cursor:pointer;transition:all .2s}.mode-select button:hover{border-color:#4a9eff;color:#4a9eff}.mode-select button.active{border-color:#4a9eff;background:#1a2a40;color:#4a9eff}.panel{background:#1a1a1a;border:1px solid #333;border-radius:12px;padding:1.5rem;margin-bottom:1.5rem}.panel h2{font-size:1.1rem;margin-bottom:1rem;color:#aaa}.field{margin-bottom:1rem}.field label{display:block;font-size:.85rem;color:#888;margin-bottom:.3rem}.field input{width:100%;padding:.6rem .8rem;font-size:1rem;border:1px solid #333;border-radius:6px;background:#111;color:#e0e0e0;outline:none}.field input:focus{border-color:#4a9eff}.credential{font-family:SF Mono,Fira Code,monospace;font-size:1.3rem;letter-spacing:.1em;color:#4a9eff;background:#111;padding:.8rem 1rem;border-radius:6px;text-align:center;word-break:break-all;-webkit-user-select:all;user-select:all}button.primary{width:100%;padding:.75rem;font-size:1rem;font-weight:600;border:none;border-radius:8px;background:#4a9eff;color:#fff;cursor:pointer;transition:background .2s}button.primary:hover{background:#3a8eff}button.primary:disabled{background:#333;color:#666;cursor:not-allowed}button.danger{width:100%;padding:.75rem;font-size:1rem;font-weight:600;border:none;border-radius:8px;background:#ff4a4a;color:#fff;cursor:pointer;margin-top:1rem}button.danger:hover{background:#e03030}.status{text-align:center;padding:.5rem;font-size:.9rem;color:#888}.status.connected{color:#4aff7a}.status.error{color:#ff4a4a}.videos{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem}.video-box{position:relative;background:#111;border-radius:8px;overflow:hidden;aspect-ratio:4/3}.video-box video{width:100%;height:100%;object-fit:cover}.video-box .label{position:absolute;bottom:.5rem;left:.5rem;font-size:.75rem;background:#0009;padding:.2rem .5rem;border-radius:4px}.messages{background:#111;border:1px solid #333;border-radius:6px;height:120px;overflow-y:auto;padding:.5rem;margin-bottom:.5rem;font-size:.85rem;font-family:monospace}.messages .msg{padding:.2rem 0;color:#aaa}.messages .msg.self{color:#4a9eff}.msg-input{display:flex;gap:.5rem}.msg-input input{flex:1;padding:.5rem .8rem;font-size:.9rem;border:1px solid #333;border-radius:6px;background:#111;color:#e0e0e0;outline:none}.msg-input button{padding:.5rem 1rem;font-size:.9rem;border:none;border-radius:6px;background:#4a9eff;color:#fff;cursor:pointer}@media(max-width:480px){.videos{grid-template-columns:1fr}}.media-prompt{text-align:center;padding:1rem 0}.media-prompt p{color:#888;margin-bottom:.75rem}.media-preview{display:flex;flex-direction:column;align-items:center}.local-video{width:240px;aspect-ratio:4/3;border-radius:8px;background:#111;object-fit:cover;border:1px solid #333}.qr-section{text-align:center;padding:1rem 0}.qr-code{border-radius:8px;background:#fff}.link-credential{cursor:pointer;word-break:break-all;font-size:.8rem;transition:background .2s}.link-credential:hover{background:#2a2a2a}.turn-toggle{text-align:center}.turn-fields{width:100%;margin-top:.5rem;padding:.75rem;background:#1a1a1a;border:1px solid #333;border-radius:6px}.turn-fields .field{margin-bottom:.5rem}.video-panel{padding:1rem}.video-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.video-grid .video-box{position:relative}.stream-video{width:100%;aspect-ratio:4/3;border-radius:8px;background:#111;object-fit:cover;border:1px solid #333}.video-label{display:block;text-align:center;font-size:.75rem;color:#888;margin-top:.25rem}@media(max-width:480px){.video-grid{grid-template-columns:1fr}}.turn-fields .field:last-child{margin-bottom:0}.connection-progress{text-align:center;padding:2rem 1rem}.progress-spinner{width:48px;height:48px;border:3px solid #333;border-top-color:#4a9eff;border-radius:50%;margin:0 auto 1.5rem;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.progress-title{font-size:1.3rem;color:#e0e0e0;margin-bottom:.5rem}.progress-subtitle{font-size:.9rem;color:#888;margin-bottom:1.5rem}.progress-bar{width:100%;height:4px;background:#333;border-radius:2px;overflow:hidden}.progress-fill{height:100%;background:#4a9eff;border-radius:2px}.progress-fill.indeterminate{width:40%;animation:indeterminate 1.5s ease-in-out infinite}@keyframes indeterminate{0%{transform:translate(-100%)}to{transform:translate(350%)}}.call-ended{text-align:center;padding:2rem 1rem}.ended-icon{width:56px;height:56px;border:3px solid #555;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 1rem;color:#555}.ended-title{font-size:1.3rem;color:#888}