:root{--bg-primary: #0a0a0f;--bg-secondary: #12121a;--bg-tertiary: #1a1a25;--text-primary: #e8e8ef;--text-secondary: #8888a0;--text-coaching: #ffffff;--accent-blue: #4a9eff;--accent-green: #3ddc84;--accent-red: #ff4a4a;--accent-yellow: #ffcc00;--accent-orange: #ff8a00;--phase-opener: #4a9eff;--phase-qualifizierung: #a855f7;--phase-pitch: #3ddc84;--phase-einwand: #ff8a00;--phase-abschluss: #ffcc00;--radius: 8px;--transition: .2s ease}*{margin:0;padding:0;box-sizing:border-box}body{background:var(--bg-primary);color:var(--text-primary);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;overflow:hidden;height:100vh}#root{height:100vh;display:flex;flex-direction:column}.app-container{display:grid;grid-template-columns:1fr 350px;grid-template-rows:auto 1fr auto;height:100vh;gap:0}.header{grid-column:1 / -1;display:flex;align-items:center;justify-content:space-between;padding:12px 20px;background:var(--bg-secondary);border-bottom:1px solid var(--bg-tertiary)}.header-left{display:flex;align-items:center;gap:16px}.header-right{display:flex;align-items:center;gap:12px}.status-indicator{width:8px;height:8px;border-radius:50%;background:var(--accent-red)}.status-indicator.connected{background:var(--accent-green)}.status-indicator.reconnecting{background:var(--accent-yellow);animation:pulse 1s ease infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.3}}.timer{font-variant-numeric:tabular-nums;font-size:14px;color:var(--text-secondary)}.phase-badge{padding:4px 12px;border-radius:12px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.phase-opener{background:var(--phase-opener);color:#000}.phase-qualifizierung{background:var(--phase-qualifizierung);color:#fff}.phase-pitch{background:var(--phase-pitch);color:#000}.phase-einwand{background:var(--phase-einwand);color:#000}.phase-abschluss{background:var(--phase-abschluss);color:#000}.coaching-area{grid-column:1;grid-row:2;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px;overflow:hidden}.coaching-text{font-size:28px;line-height:1.5;color:var(--text-coaching);text-align:center;max-width:800px;transition:opacity var(--transition)}.coaching-text.streaming{border-right:2px solid var(--accent-blue);animation:blink .7s step-end infinite}@keyframes blink{50%{border-color:transparent}}.coaching-placeholder{color:var(--text-secondary);font-size:20px;text-align:center}.teleprompter{width:100%;max-width:800px;text-align:left}.teleprompter .frozen-zone{color:var(--text-secondary);font-size:24px;line-height:1.6;opacity:.5}.teleprompter .cursor-line{font-size:28px;line-height:1.6;color:var(--text-coaching);border-left:3px solid var(--accent-blue);padding-left:12px;margin:8px 0}.teleprompter .live-zone{font-size:24px;line-height:1.6;color:var(--text-primary);opacity:.8;transition:opacity var(--transition)}.transcript-panel{grid-column:2;grid-row:2;background:var(--bg-secondary);border-left:1px solid var(--bg-tertiary);display:flex;flex-direction:column;overflow:hidden}.transcript-header{padding:12px 16px;font-size:13px;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid var(--bg-tertiary)}.transcript-entries{flex:1;overflow-y:auto;padding:8px}.transcript-entry{padding:8px 12px;margin-bottom:4px;border-radius:var(--radius);font-size:14px;line-height:1.4}.transcript-entry.customer{background:#4a9eff14;border-left:2px solid var(--accent-blue)}.transcript-entry.agent{background:#3ddc8414;border-left:2px solid var(--accent-green)}.transcript-entry .speaker{font-size:11px;font-weight:600;text-transform:uppercase;margin-bottom:2px;color:var(--text-secondary)}.transcript-entry.customer .speaker{color:var(--accent-blue)}.transcript-entry.agent .speaker{color:var(--accent-green)}.transcript-entry.interim{opacity:.6}.quick-actions{grid-column:1 / -1;display:flex;align-items:center;gap:8px;padding:12px 20px;background:var(--bg-secondary);border-top:1px solid var(--bg-tertiary)}.quick-action-btn{padding:6px 14px;border:1px solid var(--bg-tertiary);border-radius:20px;background:transparent;color:var(--text-secondary);font-size:13px;cursor:pointer;transition:all var(--transition);white-space:nowrap}.quick-action-btn:hover{background:var(--bg-tertiary);color:var(--text-primary);border-color:var(--accent-blue)}.mode-selector{display:flex;gap:4px;background:var(--bg-tertiary);border-radius:var(--radius);padding:2px}.mode-btn{padding:6px 12px;border:none;border-radius:6px;background:transparent;color:var(--text-secondary);font-size:12px;cursor:pointer;transition:all var(--transition)}.mode-btn.active{background:var(--accent-blue);color:#fff}.btn-primary{padding:10px 24px;border:none;border-radius:var(--radius);background:var(--accent-blue);color:#fff;font-size:14px;font-weight:600;cursor:pointer;transition:opacity var(--transition)}.btn-primary:hover{opacity:.85}.btn-danger{padding:10px 24px;border:none;border-radius:var(--radius);background:var(--accent-red);color:#fff;font-size:14px;font-weight:600;cursor:pointer}.onboarding-container{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh;gap:32px;padding:40px}.onboarding-card{background:var(--bg-secondary);border-radius:12px;padding:32px;width:100%;max-width:500px}.onboarding-card h2{margin-bottom:24px;font-size:20px}.onboarding-card label{display:block;font-size:13px;color:var(--text-secondary);margin-bottom:6px}.onboarding-card select,.onboarding-card input{width:100%;padding:10px 12px;border:1px solid var(--bg-tertiary);border-radius:var(--radius);background:var(--bg-primary);color:var(--text-primary);font-size:14px;margin-bottom:16px}.onboarding-card select:focus,.onboarding-card input:focus{outline:none;border-color:var(--accent-blue)}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--bg-tertiary);border-radius:3px}