:root{--color-bg: #0f172a;--color-text: #f8fafc;--color-primary: #3b82f6;--color-secondary: #64748b;--color-accent: #ef4444;--font-family: "Inter", system-ui, sans-serif}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--color-bg);color:var(--color-text);font-family:var(--font-family);-webkit-font-smoothing:antialiased;min-height:100vh}button{cursor:pointer;font-family:inherit}:root{--color-bg: #0f172a;--color-surface: #1e293b;--color-text: #f8fafc;--color-text-muted: #94a3b8;--color-primary: #3b82f6;--color-primary-hover: #2563eb;--color-accent: #ef4444;--radius: 12px;--shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1)}body{background-color:var(--color-bg);color:var(--color-text);font-family:Inter,system-ui,sans-serif}.app-container{max-width:800px;margin:0 auto;padding:20px;min-height:100vh;display:flex;flex-direction:column}header{margin-bottom:2rem;text-align:center}h1{font-size:2rem;font-weight:800;background:linear-gradient(to right,#3b82f6,#8b5cf6);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.role-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.help-button{background:transparent;color:var(--color-text-muted);padding:.5rem;border:1px solid rgba(255,255,255,.1)}.help-button:hover{background:#ffffff0d;color:var(--color-text)}.role-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem}.role-card{background:var(--color-surface);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius);padding:2rem;display:flex;flex-direction:column;align-items:center;gap:1rem;color:var(--color-text);transition:all .2s;cursor:pointer}.role-card:hover{transform:translateY(-4px);border-color:var(--color-primary);box-shadow:var(--shadow)}.role-card svg{color:var(--color-primary)}.role-card h3{font-size:1.25rem;margin:0}.role-card p{color:var(--color-text-muted);font-size:.875rem}button{background:var(--color-primary);color:#fff;border:none;padding:.75rem 1.5rem;border-radius:8px;font-weight:600;transition:background .2s}button:hover{background:var(--color-primary-hover)}button.start-btn{background:var(--color-accent);font-size:1.2rem;padding:1rem 2rem;width:100%;margin-top:1rem}.connection-setup{text-align:center;background:var(--color-surface);padding:2rem;border-radius:var(--radius)}.qr-display{display:flex;flex-direction:column;align-items:center;gap:1rem}.qr-scanner{max-width:400px;margin:0 auto}textarea{width:100%;height:100px;background:#0003;border:1px solid rgba(255,255,255,.1);color:#fff;border-radius:8px;padding:.5rem;margin:1rem 0}.race-control{background:var(--color-surface);padding:1.5rem;border-radius:var(--radius)}.status-bar{background:#0003;padding:.5rem;border-radius:6px;margin-bottom:1rem;font-family:monospace}.results ul{list-style:none;padding:0}.results li{background:#ffffff0d;padding:.75rem;margin-bottom:.5rem;border-radius:6px;display:flex;justify-content:space-between}.finish-line-camera{position:relative;background:#000;border-radius:var(--radius);overflow:hidden}.status-overlay{position:absolute;top:10px;left:10px;background:#0009;padding:4px 8px;border-radius:4px;z-index:10}.result-overlay{position:absolute;bottom:20px;left:50%;transform:translate(-50%);background:#3b82f6e6;padding:1rem 2rem;border-radius:50px;font-weight:700;font-size:1.2rem;z-index:10}.loading-qr{display:flex;flex-direction:column;align-items:center;gap:1rem;padding:2rem}.spinner{width:40px;height:40px;border:4px solid rgba(255,255,255,.1);border-left-color:var(--color-primary);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.start-mode-selector{margin-bottom:1rem}.mode-buttons{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center}.mode-btn{display:flex;flex-direction:column;align-items:center;gap:.25rem;padding:.5rem;background:var(--color-surface);border:1px solid rgba(255,255,255,.1);border-radius:8px;min-width:80px}.mode-btn.active{background:var(--color-primary);border-color:var(--color-primary)}.mode-btn svg{width:24px;height:24px}.mode-btn span{font-size:.75rem}.tutorial-overlay{position:fixed;inset:0;background-color:#000c;display:flex;justify-content:center;align-items:center;z-index:1000;padding:20px}.tutorial-modal{background-color:#1a1a1a;border-radius:12px;padding:24px;max-width:500px;width:100%;max-height:90vh;overflow-y:auto;position:relative;color:#fff;border:1px solid #333}.close-button{position:absolute;top:16px;right:16px;background:none;border:none;color:#888;cursor:pointer;padding:4px}.close-button:hover{color:#fff}.tutorial-section{margin-bottom:24px;background:#252525;padding:16px;border-radius:8px}.tutorial-section h3{margin-top:0;margin-bottom:12px;color:#646cff}.tutorial-section ol,.tutorial-section ul{padding-left:20px;margin:0}.tutorial-section li{margin-bottom:8px;line-height:1.5}.install-instructions strong{color:#fff}