body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:linear-gradient(135deg,#667eea,#764ba2);min-height:100vh}.app{min-height:100vh;display:flex;flex-direction:column}.loading{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh;color:#fff}.spinner{border:4px solid rgba(255,255,255,.3);border-radius:50%;border-top:4px solid white;width:50px;height:50px;animation:spin 1s linear infinite}.spinner.large{width:80px;height:80px;border-width:6px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.login-container{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:20px}.login-card{background:#fff;border-radius:20px;padding:60px 40px;text-align:center;box-shadow:0 20px 60px #0000004d;max-width:450px;width:100%}.login-card h1{font-size:48px;margin-bottom:10px;color:#333}.subtitle{color:#666;margin-bottom:40px;font-size:16px}.login-button{background:#fff;border:2px solid #ddd;border-radius:8px;padding:16px 32px;font-size:16px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:12px;width:100%;transition:all .2s;color:#333}.login-button:hover{background:#f8f8f8;border-color:#ccc;transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.google-icon{width:24px;height:24px}.header{background:#fffffff2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:20px 30px;display:flex;justify-content:space-between;align-items:center;box-shadow:0 2px 10px #0000001a}.header h1{font-size:24px;color:#333}.user-info{display:flex;align-items:center;gap:12px}.user-avatar{width:40px;height:40px;border-radius:50%;border:2px solid #667eea}.user-name{font-weight:600;color:#333}.logout-button{background:#f0f0f0;border:none;border-radius:6px;padding:8px 16px;font-size:14px;cursor:pointer;transition:all .2s;color:#666}.logout-button:hover{background:#e0e0e0;color:#333}.content{flex:1;display:flex;align-items:center;justify-content:center;padding:40px 20px}.error-message{position:fixed;top:80px;left:50%;transform:translate(-50%);background:#f44;color:#fff;padding:16px 24px;border-radius:8px;box-shadow:0 4px 12px #0003;display:flex;align-items:center;gap:12px;z-index:1000;max-width:500px}.error-message button{background:none;border:none;color:#fff;font-size:24px;cursor:pointer;padding:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center}.card{background:#fff;border-radius:20px;padding:40px;box-shadow:0 10px 40px #0003;max-width:600px;width:100%}.card h2{color:#333;font-size:32px;margin-bottom:12px}.card>p{color:#666;font-size:16px;margin-bottom:24px}.join-queue-container,.queue-container,.match-container{width:100%;display:flex;justify-content:center;align-items:center}.join-button{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:12px;padding:18px 48px;font-size:20px;font-weight:600;cursor:pointer;transition:all .3s;box-shadow:0 4px 15px #667eea66;width:100%}.join-button:hover{transform:translateY(-2px);box-shadow:0 6px 20px #667eea99}.info-box{margin-top:32px;padding:24px;background:#f8f9ff;border-radius:12px;border-left:4px solid #667eea}.info-box h3{color:#333;font-size:18px;margin-bottom:12px}.info-box ol,.info-box ul{padding-left:24px;color:#666;line-height:1.8}.info-box li{margin-bottom:8px}.queue-animation{display:flex;justify-content:center;margin-bottom:24px}.queue-info{background:#f8f9ff;border-radius:12px;padding:20px;margin:24px 0;text-align:center}.queue-position,.wait-time{color:#666;font-size:16px;margin:8px 0}.queue-position strong,.wait-time strong{color:#667eea;font-size:18px}.queue-message{color:#888;font-size:14px;margin:20px 0}.leave-button{background:#f0f0f0;color:#666;border:none;border-radius:8px;padding:12px 32px;font-size:16px;cursor:pointer;transition:all .2s;width:100%}.leave-button:hover{background:#e0e0e0;color:#333}.match-card{max-width:700px}.match-success{text-align:center;margin-bottom:32px}.success-icon{font-size:64px;display:block;margin-bottom:16px}.match-success h2{color:#4caf50;margin-bottom:8px}.match-success p{color:#666}.match-details{background:#f8f9ff;border-radius:12px;padding:24px;margin:24px 0}.detail-row{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid #e0e0e0}.detail-row:last-child{border-bottom:none}.detail-row strong{color:#333}.detail-row code{background:#fff;padding:6px 12px;border-radius:6px;font-family:Courier New,monospace;color:#667eea;font-size:14px}.host-badge,.guest-badge{padding:6px 16px;border-radius:20px;font-weight:600;font-size:14px}.host-badge{background:#fff3cd;color:#856404}.guest-badge{background:#d1ecf1;color:#0c5460}.action-box{text-align:center;margin:32px 0;padding:24px;background:linear-gradient(135deg,#667eea15,#764ba215);border-radius:12px}.action-box p{margin:12px 0;color:#666}.join-recording-button{display:inline-block;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;text-decoration:none;border-radius:12px;padding:18px 48px;font-size:20px;font-weight:600;transition:all .3s;box-shadow:0 4px 15px #667eea66;margin:16px 0}.join-recording-button:hover{transform:translateY(-2px);box-shadow:0 6px 20px #667eea99}.url-note{font-size:12px;color:#888;margin-top:8px}.new-match-button{background:#f0f0f0;color:#666;border:none;border-radius:8px;padding:12px 32px;font-size:16px;cursor:pointer;transition:all .2s;width:100%;margin-top:24px}.new-match-button:hover{background:#e0e0e0;color:#333}.mic-check-container{width:100%;display:flex;justify-content:center;align-items:center}.mic-check-success{text-align:center;padding:24px;background:#e8f5e9;border-radius:12px;margin-bottom:24px;border:2px solid #4caf50}.check-icon{display:inline-block;width:60px;height:60px;line-height:60px;background:#4caf50;color:#fff;border-radius:50%;font-size:36px;font-weight:700;margin-bottom:12px}.mic-check-success h2{color:#2e7d32;margin-bottom:8px}.device-info{color:#666;font-size:14px;margin-top:8px}.retry-mic-button{background:#f0f0f0;color:#666;border:none;border-radius:8px;padding:12px 32px;font-size:16px;cursor:pointer;transition:all .2s;width:100%;margin-top:12px}.retry-mic-button:hover{background:#e0e0e0;color:#333}.device-selection{margin:24px 0}.device-selection label{display:block;color:#333;font-weight:600;margin-bottom:8px}.device-select{width:100%;padding:12px;border:2px solid #ddd;border-radius:8px;font-size:16px;color:#333;background:#fff;cursor:pointer;transition:all .2s}.device-select:focus{outline:none;border-color:#667eea}.device-select:hover{border-color:#999}.instructions{background:#fff9e6;border:2px solid #ffc107;border-radius:12px;padding:16px;margin:24px 0}.instructions p{color:#666;margin:4px 0}.instructions strong{color:#333}.start-recording-button{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:12px;padding:18px 48px;font-size:20px;font-weight:600;cursor:pointer;transition:all .3s;box-shadow:0 4px 15px #667eea66;width:100%}.start-recording-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px #667eea99}.start-recording-button:disabled{opacity:.5;cursor:not-allowed}.recording-view,.processing-view{text-align:center;padding:24px 0}.recording-indicator{display:flex;align-items:center;justify-content:center;gap:12px;font-size:20px;font-weight:600;color:#f44336;margin-bottom:16px}.pulse-dot{width:16px;height:16px;background:#f44336;border-radius:50%;animation:pulse 1.5s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.2)}}.instruction-text{color:#666;font-size:16px;margin:16px 0}.progress-container{width:100%;height:24px;background:#f0f0f0;border-radius:12px;overflow:hidden;margin:24px 0 12px}.progress-bar{height:100%;background:linear-gradient(135deg,#667eea,#764ba2);transition:width .2s ease-out;border-radius:12px}.progress-bar.processing{background:linear-gradient(135deg,#4caf50,#2e7d32)}.progress-text{color:#667eea;font-weight:600;font-size:14px}.note{color:#888;font-size:14px;margin-top:12px}.result-view{padding:24px 0}.result-pass,.result-fail{text-align:center;padding:32px;border-radius:12px}.result-pass{background:#e8f5e9;border:2px solid #4caf50}.result-fail{background:#ffebee;border:2px solid #f44336}.result-icon{display:inline-block;width:80px;height:80px;line-height:80px;border-radius:50%;font-size:48px;font-weight:700;margin-bottom:16px}.result-pass .result-icon{background:#4caf50;color:#fff}.result-fail .result-icon{background:#f44336;color:#fff}.result-pass h3{color:#2e7d32;margin-bottom:12px}.result-fail h3{color:#c62828;margin-bottom:12px}.result-pass p,.result-fail p{color:#666;margin:8px 0}.confidence{font-weight:600;color:#4caf50;margin-top:12px}.cues{margin-top:16px;text-align:left;background:#fff;padding:16px;border-radius:8px}.cues ul{list-style:none;padding:0}.cues li{padding:8px 0;color:#c62828;border-bottom:1px solid #ffebee}.cues li:last-child{border-bottom:none}.retry-button,.change-device-button{background:#f44336;color:#fff;border:none;border-radius:8px;padding:12px 32px;font-size:16px;cursor:pointer;transition:all .2s;width:100%;margin-top:12px}.retry-button:hover,.change-device-button:hover{background:#d32f2f}.change-device-button{background:#ff9800}.change-device-button:hover{background:#f57c00}@media(max-width:768px){.header{flex-direction:column;gap:12px;text-align:center}.card{padding:24px}.login-card{padding:40px 24px}.card h2{font-size:24px}.join-button,.join-recording-button{font-size:18px;padding:16px 32px}.result-pass,.result-fail{padding:24px 16px}.result-icon{width:60px;height:60px;line-height:60px;font-size:36px}}