*{margin:0;padding:0;box-sizing:border-box}body{background:#0f0f1a;color:#e0e0e0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,sans-serif;min-height:100vh}.app{max-width:960px;margin:0 auto;padding:2rem 1rem;display:flex;flex-direction:column;align-items:center;min-height:100vh}.title{font-size:1.8rem;margin-bottom:2rem;color:#7c8aff}.lobby{display:flex;flex-direction:column;align-items:center;gap:1.5rem;width:100%;max-width:400px}.server-config{display:flex;flex-direction:column;gap:.4rem;width:100%}.server-config label{font-size:.85rem;color:#888}input{background:#1a1a2e;border:1px solid #333;color:#e0e0e0;padding:.7rem 1rem;border-radius:8px;font-size:1rem;width:100%;outline:none;transition:border-color .2s}input:focus{border-color:#7c8aff}.actions{display:flex;flex-direction:column;align-items:center;gap:1rem;width:100%}.divider{color:#555;font-size:.9rem}.join-form{display:flex;gap:.5rem;width:100%}.join-form input{flex:1;text-transform:uppercase;letter-spacing:.15em;font-family:Courier New,monospace}.btn{padding:.7rem 1.6rem;border:none;border-radius:8px;font-size:1rem;cursor:pointer;transition:opacity .2s,transform .1s;color:#fff}.btn:hover{opacity:.9}.btn:active{transform:scale(.97)}.btn:disabled{opacity:.4;cursor:not-allowed}.btn-primary{background:#7c8aff}.btn-secondary{background:#444}.btn-danger{background:#e74c3c}.status-screen{display:flex;flex-direction:column;align-items:center;gap:1rem;margin-top:3rem}.spinner{width:40px;height:40px;border:3px solid #333;border-top-color:#7c8aff;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.key-display{background:#1a1a2e;padding:1.2rem 2rem;border-radius:12px;text-align:center}.key-value{cursor:pointer;margin-top:.5rem}.key-value span:first-child{font-family:Courier New,monospace;font-size:1.8rem;letter-spacing:.2em;color:#7c8aff;font-weight:700}.copy-hint{display:block;font-size:.75rem;color:#666;margin-top:.3rem}.error-msg{color:#e74c3c;font-size:1.1rem;text-align:center}.preview-container{margin-top:1rem}.video-local-preview{width:240px;border-radius:12px;background:#000}.call-screen{width:100%;display:flex;flex-direction:column;align-items:center;gap:1rem}.videos{position:relative;width:100%;max-width:800px}.video-wrapper{position:relative}.video-wrapper .label{position:absolute;bottom:12px;left:12px;background:#0009;padding:.2rem .6rem;border-radius:4px;font-size:.8rem}.video-remote{width:100%;border-radius:16px;background:#111;min-height:300px}.video-wrapper.local{position:absolute;bottom:16px;right:16px;width:200px}.video-local{width:100%;border-radius:12px;background:#000;border:2px solid #7c8aff}.call-controls{margin-top:1rem}