.toolbar { height: 48px; background: #09091a; border-bottom: 1px solid #2a2a4a; display: flex; align-items: center; padding: 0 16px; gap: 20px; font-family: 'JetBrains Mono', monospace; flex-shrink: 0; } .toolbar-brand { display: flex; align-items: center; gap: 8px; } .brand-icon { font-size: 20px; color: #6666ff; filter: drop-shadow(0 0 6px #6666ff88); } .brand-name { font-size: 13px; font-weight: 800; color: #ddddff; letter-spacing: 3px; } .brand-sub { font-size: 9px; color: #444466; letter-spacing: 1px; } .mode-switcher { display: flex; gap: 4px; background: #13132a; padding: 4px; border-radius: 7px; border: 1px solid #2a2a4a; } .mode-btn { display: flex; align-items: center; gap: 6px; padding: 5px 14px; border-radius: 5px; border: none; background: transparent; color: #666688; cursor: pointer; font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; letter-spacing: 1.5px; transition: all 0.2s; } .mode-btn:hover { color: #aaaacc; background: #1e1e3a; } .mode-btn--active { background: #1e1e4a; color: #aaaaff; box-shadow: 0 0 0 1px #5555cc44; } .mode-icon { font-size: 13px; } .toolbar-actions { margin-left: auto; display: flex; align-items: center; gap: 12px; } .scene-info { display: flex; gap: 6px; } .info-badge { padding: 3px 8px; background: #13132a; border: 1px solid #2a2a4a; border-radius: 3px; font-size: 9px; color: #666688; font-family: 'JetBrains Mono', monospace; } .info-badge.selected { border-color: #5555cc; color: #aaaaff; } .record-btn { padding: 6px 14px; border-radius: 5px; border: 1px solid #4a2a4a; background: #1e0e1e; color: #cc66cc; cursor: pointer; font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 700; letter-spacing: 1px; transition: all 0.2s; } .record-btn:hover { border-color: #cc44cc; color: #dd88dd; } .record-btn.recording { border-color: #ff4444; background: #2a0a0a; color: #ff6666; animation: pulse-record 1s infinite; } @keyframes pulse-record { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }