*{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:contain}.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:contain;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;cursor:pointer}.stream-video{width:100%;height:auto;border-radius:8px;background:#111;object-fit:contain;border:1px solid #333;display:block}.video-overlay{position:absolute;bottom:0;left:0;right:0;display:flex;align-items:center;gap:.75rem;padding:.4rem .6rem;background:#0000008c;border-radius:0 0 8px 8px;font-size:.75rem}.video-overlay .video-label{color:#fff;font-weight:600}.video-overlay .stat{font-family:monospace;color:#fffc}.video-box:fullscreen{background:#000;display:flex;align-items:center;justify-content:center}.video-box:fullscreen .stream-video{width:100%;height:100%;border-radius:0;border:none;object-fit:contain}.video-box:fullscreen .video-overlay{border-radius:0;font-size:.9rem;padding:.5rem .8rem}@media(max-width:480px){.video-grid{grid-template-columns:1fr}}.turn-fields .field:last-child{margin-bottom:0}.config-section{width:100%}.config-row{display:flex;gap:.75rem}.config-row .field{flex:1;margin-bottom:0}.config-row select,.field select{width:100%;padding:.6rem 2rem .6rem .8rem;font-size:.9rem;border:1px solid #333;border-radius:6px;background:#111;color:#e0e0e0;outline:none;-moz-appearance:none;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23888' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .6rem center}.config-row select:focus,.field select:focus{border-color:#4a9eff}.config-row select:disabled,.field select:disabled{opacity:.4;cursor:not-allowed}.config-row label input[type=checkbox]{margin-right:.35rem;accent-color:#4a9eff}@media(max-width:480px){.config-row{flex-direction:column;gap:.5rem}}.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}