:root{--bg: #14141f;--bg-secondary: #1e1e32;--bg-tertiary: #252540;--bg-elevated: #1e1e35;--text: #e8e8f0;--text-secondary: #9090a8;--text-tertiary: #606078;--accent: #64c8ff;--accent-dim: #3a8abf;--accent-glow: rgba(100, 200, 255, .3);--success: #4ade80;--warning: #facc15;--error: #f87171;--gauge-bg: #2a2a45;--border: #2a2a45;--border-light: #353550;--shadow: rgba(0, 0, 0, .4);--overlay: rgba(0, 0, 0, .7);--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-mono: "JetBrains Mono", "Fira Code", monospace;--space-xs: 4px;--space-sm: 8px;--space-md: 16px;--space-lg: 24px;--space-xl: 32px;--space-2xl: 48px;--radius-sm: 6px;--radius-md: 10px;--radius-lg: 16px;--radius-xl: 24px;--radius-full: 9999px;--transition-fast: .15s ease;--transition-base: .25s ease;--transition-slow: .4s ease}[data-theme=light]{--bg: #e8e8ec;--bg-secondary: #f0f0f4;--bg-tertiary: #d8d8dc;--bg-elevated: #ffffff;--text: #1a1a1e;--text-secondary: #55555a;--text-tertiary: #88888c;--accent: #2a8ad4;--accent-dim: #5a9ec8;--accent-glow: rgba(42, 138, 212, .25);--success: #34b85a;--warning: #d4a820;--error: #d44848;--gauge-bg: #c8c8d0;--border: #b8b8c0;--border-light: #d0d0d8;--shadow: rgba(0, 0, 0, .12);--overlay: rgba(0, 0, 0, .4)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;overflow:hidden;height:100%}body{font-family:var(--font-sans);background:var(--bg);color:var(--text);line-height:1.5;height:100%;overflow:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none}input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}.app-shell{display:flex;flex-direction:column;height:100dvh;height:100vh;overflow:hidden}.app-header{flex-shrink:0;background:var(--bg-secondary);border-bottom:1px solid var(--border);padding:0 var(--space-md);height:52px;display:flex;align-items:center;z-index:10}.header-content{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:1440px;margin:0 auto}.header-menu-btn{display:flex;flex-direction:column;gap:4px;padding:8px;width:44px;height:44px;justify-content:center;align-items:center}.header-menu-btn span{display:block;width:20px;height:2px;background:var(--text);border-radius:2px}.app-title{font-size:1.1rem;font-weight:700;letter-spacing:-.02em}.app-title .version{font-size:.75rem;font-weight:400;color:var(--text-secondary);margin-left:4px}.header-auth-btn{width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-full);color:var(--text-secondary);transition:color var(--transition-fast)}.header-auth-btn:hover{color:var(--text)}.header-auth-section{position:relative}.header-user-btn{display:flex;align-items:center;gap:6px;padding:4px 10px 4px 4px;border-radius:var(--radius-lg);color:var(--text-secondary);transition:all var(--transition-fast);max-width:120px}.header-user-btn:hover{color:var(--text);background:var(--surface-2)}.header-user-avatar{width:32px;height:32px;border-radius:var(--radius-full);background:linear-gradient(135deg,var(--accent),var(--accent-dark));display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:#fff;flex-shrink:0}.header-user-name{font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:70px}.header-user-menu{position:relative}.header-user-dropdown{position:absolute;top:calc(100% + 8px);right:0;min-width:200px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:0 8px 32px #0000004d;padding:8px 0;z-index:1000;animation:dropdownIn .15s ease-out}@keyframes dropdownIn{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.header-dropdown-item{display:flex;align-items:center;gap:10px;padding:10px 16px;color:var(--text-secondary);font-size:14px;transition:all var(--transition-fast);width:100%;text-align:left}.header-dropdown-item:hover{background:var(--surface-2);color:var(--text)}.header-dropdown-user{padding:12px 16px;gap:12px}.header-dropdown-avatar{width:36px;height:36px;border-radius:var(--radius-full);background:linear-gradient(135deg,var(--accent),var(--accent-dark));display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;color:#fff;flex-shrink:0}.header-dropdown-username{font-weight:600;color:var(--text);font-size:14px}.header-dropdown-plan{font-size:12px;color:var(--text-muted);text-transform:uppercase}.header-dropdown-divider{height:1px;background:var(--border);margin:6px 12px}.header-dropdown-logout{color:var(--danger)!important}.header-dropdown-logout:hover{background:#f443361a!important}.header-toggles{display:flex;align-items:center;gap:4px;margin-left:auto;margin-right:var(--space-sm)}.header-toggle-btn{min-width:40px;height:32px;padding:0 8px;border-radius:var(--radius-full);border:1.5px solid var(--border-light);background:var(--bg-secondary);color:var(--text-secondary);font-size:13px;font-weight:600;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all var(--transition-fast);letter-spacing:.5px}.header-toggle-btn:hover{border-color:var(--accent);color:var(--accent)}.header-toggle-btn:active{transform:scale(.95)}.app-main{flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;scroll-behavior:smooth;padding-bottom:80px}.app-main::-webkit-scrollbar{width:4px}.app-main::-webkit-scrollbar-thumb{background:var(--gauge-bg);border-radius:var(--radius-full)}.bottom-nav{flex-shrink:0;background:var(--bg-secondary);border-top:1px solid var(--border);padding:0 var(--space-sm);padding-bottom:env(safe-area-inset-bottom,0);z-index:10}.bottom-nav-items{display:flex;justify-content:space-around;align-items:center;height:60px;max-width:600px;margin:0 auto}.nav-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:56px;height:56px;border-radius:var(--radius-md);color:var(--text-secondary);transition:all var(--transition-fast);position:relative}.nav-item.active{color:var(--accent)}.nav-item:active{transform:scale(.95)}.nav-icon{font-size:1.25rem;line-height:1}.nav-label{font-size:.65rem;font-weight:500}.page{display:none;min-height:100%}.page.active{display:block}.page-header{padding:var(--space-lg) var(--space-md) var(--space-md);text-align:center}.page-header h2{font-size:1.5rem;font-weight:700;margin-bottom:4px}.page-subtitle{color:var(--text-secondary);font-size:.9rem}.more-menu-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:var(--overlay);z-index:100;display:flex;align-items:flex-end;justify-content:center}.more-menu{background:var(--bg-secondary);border-radius:var(--radius-lg) var(--radius-lg) 0 0;width:100%;max-width:500px;padding:var(--space-md);padding-bottom:calc(var(--space-lg) + env(safe-area-inset-bottom,0));animation:slideUp var(--transition-base)}.more-menu-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-md);font-weight:600}.more-menu-close{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-full);color:var(--text-secondary)}.more-menu-item{display:flex;align-items:center;gap:var(--space-md);padding:var(--space-md);border-radius:var(--radius-md);width:100%;transition:background var(--transition-fast)}.more-menu-item:hover{background:var(--bg-tertiary)}.more-menu-icon{font-size:1.25rem;width:28px;text-align:center}.more-menu-label{font-size:.95rem}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 20px;border-radius:var(--radius-md);font-weight:600;font-size:.9rem;transition:all var(--transition-fast);min-height:44px;min-width:44px}.btn:active{transform:scale(.97)}.btn-primary{background:var(--accent);color:#000}.btn-primary:hover{background:var(--accent);opacity:.9;box-shadow:0 0 20px var(--accent-glow)}.btn-secondary{background:var(--bg-tertiary);color:var(--text);border:1px solid var(--border-light)}.btn-secondary:hover{background:var(--bg-elevated)}.btn-error{background:var(--error);color:#fff}.btn-icon{font-size:1.1rem}.btn-large{padding:14px 28px;font-size:1rem;min-height:52px}.btn-full{width:100%}.btn-small{padding:6px 12px;font-size:.8rem;min-height:32px}.btn-text{background:none;color:var(--accent);padding:8px;min-height:auto}.btn-text:hover{text-decoration:underline}.tuner-page{padding:var(--space-md);max-width:500px;margin:0 auto}.tuner-display{display:flex;flex-direction:column;align-items:center;gap:var(--space-lg)}.ring-center{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none}.note-display{font-size:4rem;font-weight:800;line-height:1;transition:color var(--transition-fast),opacity var(--transition-fast)}.octave-display{font-size:1.25rem;color:var(--text-secondary);font-weight:500}.freq-display{font-size:1.1rem;font-weight:500;color:var(--text-secondary);font-family:var(--font-mono);margin-top:6px;letter-spacing:.5px}.pct-display{font-size:2rem;font-weight:800;font-family:var(--font-mono);color:var(--accent);margin-top:4px;letter-spacing:-1px;transition:color .2s ease}.metrics-panel{animation:fadeIn .3s ease-out}.metrics-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;padding:12px}@media (min-width: 480px){.metrics-grid{grid-template-columns:repeat(4,1fr)}}.m-card{background:var(--surface-2);border-radius:var(--radius-md);padding:12px 8px;text-align:center;border:1px solid var(--border);transition:transform .2s ease}.m-card:hover{transform:translateY(-2px)}.m-label{font-size:10px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px}.m-val{font-size:1.25rem;font-weight:800;font-family:var(--font-mono);color:var(--text)}.m-unit{font-size:10px;color:var(--text-muted);margin-left:2px}.m-g{border-color:#22c55e4d;background:#22c55e0f}.m-g .m-val{color:#22c55e}.m-y{border-color:#eab3084d;background:#eab3080f}.m-y .m-val{color:#eab308}.m-r{border-color:#f43f5e4d;background:#f43f5e0f}.m-r .m-val{color:#f43f5e}.metric-card{background:var(--surface-2);border-radius:var(--radius-md);padding:12px;text-align:center;border:1px solid var(--border);transition:all .2s ease}.metric-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px #00000026}.metric-label{font-size:11px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px}.metric-value{font-size:22px;font-weight:800;font-family:var(--font-mono);color:var(--text);letter-spacing:-.5px}.metric-unit{font-size:12px;font-weight:500;color:var(--text-muted);margin-left:2px}.metric-perfect{border-color:#34d39966;background:#34d39914}.metric-perfect .metric-value{color:#22c55e}.metric-good{border-color:#facc1566;background:#facc1514}.metric-good .metric-value{color:#eab308}.metric-ok{border-color:var(--border)}.panel-dot.blue{background:#0ea5e9}.tolerance-control{display:flex;align-items:center;gap:10px;margin-top:12px;padding-top:12px;border-top:1px solid var(--border)}.tolerance-control label{font-size:13px;color:var(--text-secondary);white-space:nowrap}.tolerance-select{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);padding:6px 10px;font-size:13px;cursor:pointer;flex:1}.tolerance-select:focus{outline:none;border-color:var(--accent)}.green-zone-labels{display:flex;justify-content:space-between;margin-top:8px;font-size:11px;color:var(--text-muted)}.green-zone-labels span{padding:2px 6px;border-radius:var(--radius-sm);background:var(--surface-2)}input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:6px;border-radius:3px;background:var(--surface-3);outline:none;cursor:pointer}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:var(--accent);cursor:pointer;box-shadow:0 2px 6px #0000004d}input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--accent);cursor:pointer;border:none;box-shadow:0 2px 6px #0000004d}.tolerance-select option,.ref-note-select option{background:var(--surface-2);color:var(--text);padding:8px}select{background-color:var(--surface-2);color:var(--text)}select option{background-color:#1e1e2e;color:#e2e8f0}select option:hover,select option:focus,select option:checked{background-color:var(--surface-3);color:var(--text)}.cents-bar-container{width:100%;max-width:360px}.cents-labels{display:flex;justify-content:space-between;font-size:.7rem;color:var(--text-tertiary);margin-bottom:6px}.cents-track{position:relative;height:8px;background:var(--gauge-bg);border-radius:var(--radius-full);overflow:visible}.cents-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:2px;height:14px;background:var(--accent);border-radius:2px;z-index:2}.cents-fill{position:absolute;top:50%;transform:translate(-50%,-50%);width:16px;height:16px;background:var(--accent);border-radius:50%;box-shadow:0 0 10px var(--accent-glow);transition:left var(--transition-fast),background var(--transition-fast);z-index:3}.cents-status{text-align:center;margin-top:8px;font-size:.9rem;font-weight:600;color:var(--text-secondary);min-height:1.5em}.status-perfect{color:var(--success)}.status-good{color:var(--warning)}.status-sharp,.status-flat{color:var(--error)}.panel{width:100%;background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--space-md);margin-top:var(--space-md)}.panel-header{display:flex;align-items:center;gap:8px;margin-bottom:var(--space-sm)}.panel-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 6px var(--accent-glow)}.panel-dot.green{background:var(--success);box-shadow:0 0 6px #4ade8066}.panel-title{font-size:11px;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:1px}.spectrum-panel .spectrum-bars{display:flex;align-items:flex-end;justify-content:space-between;height:80px;gap:2px;padding:var(--space-xs) 0}.spectrum-bar{flex:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;position:relative}.spectrum-bar-fill{width:100%;border-radius:1px;min-height:1px;background:linear-gradient(to top,#1a3a55,#3a8abf 40%,#64c8ff,#a8e0ff);box-shadow:0 0 3px #64c8ff40;transition:height 50ms linear;position:relative}.spectrum-bar-fill:after{content:"";position:absolute;top:0;left:2px;right:2px;height:2px;background:#ffffff80;border-radius:1px}.ring-gauge-container{position:relative;width:min(260px,70vw);height:min(260px,70vw);margin:0 auto}.ring-gauge{width:100%;height:100%;filter:drop-shadow(0 0 8px rgba(100,200,255,.15))}.ring-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;z-index:2}.note-display{font-size:48px;font-weight:700;line-height:1;color:var(--text);transition:color .2s ease,opacity .3s ease;text-shadow:0 0 20px rgba(100,200,255,.2)}.note-display.in-tune{color:var(--success);text-shadow:0 0 24px rgba(74,222,128,.5)}.led-indicator{width:8px;height:8px;border-radius:50%;background:var(--gauge-bg);box-shadow:inset 0 1px 2px #0000004d;transition:all .15s ease}.led-indicator.on{background:var(--accent);box-shadow:0 0 8px var(--accent-glow),inset 0 -1px 2px #ffffff4d}.led-indicator.success{background:var(--success);box-shadow:0 0 8px #4ade8066,inset 0 -1px 2px #ffffff4d}@keyframes successFlash{0%{box-shadow:0 0 #4ade8000}30%{box-shadow:0 0 30px 10px #4ade8066}to{box-shadow:0 0 #4ade8000}}.success-flash{animation:successFlash .6s ease-out}.trace-panel .trace-container{background:#00000026;border:1px solid var(--border);border-radius:var(--radius-sm);padding:3px;overflow:hidden}.trace-container canvas{display:block;width:100%;border-radius:2px}.trace-wrapper{display:grid;grid-template-columns:48px 1fr;gap:4px;align-items:center}.trace-scale{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-end;height:80px;padding:2px 0;font-size:10px;font-family:var(--font-mono);color:var(--text-secondary)}.trace-scale-max,.trace-scale-min{font-size:10px;line-height:1}.trace-scale-mid{font-size:9px;opacity:.7}.trace-legend{display:flex;gap:12px;justify-content:center;margin-top:8px;flex-wrap:wrap}.trace-legend-item{display:flex;align-items:center;gap:4px;font-size:11px;color:var(--text-secondary)}.trace-dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex-shrink:0}.tuner-action-row{display:flex;align-items:center;justify-content:center;gap:var(--space-lg);margin-top:var(--space-lg);padding:0 var(--space-md)}.mic-btn{width:64px;height:64px;border-radius:50%;border:2px solid var(--accent);background:var(--bg-secondary);color:var(--accent);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all var(--transition-fast);box-shadow:0 0 12px var(--accent-glow);flex-shrink:0}.mic-btn:hover{background:var(--accent);color:var(--bg);box-shadow:0 0 20px var(--accent-glow);transform:scale(1.05)}.mic-btn.listening{background:var(--error);border-color:var(--error);color:#fff;box-shadow:0 0 16px #f8717180;animation:pulse-red 1.5s infinite}@keyframes pulse-red{0%,to{box-shadow:0 0 #f8717180}50%{box-shadow:0 0 0 10px #f8717100}}.mode-selector{display:flex;gap:var(--space-sm);align-items:center}.mode-btn{display:flex;align-items:center;gap:6px;padding:8px 16px;border-radius:var(--radius-full);border:1.5px solid var(--border);background:var(--bg-secondary);color:var(--text-secondary);font-size:12px;font-weight:600;cursor:pointer;transition:all var(--transition-fast);text-transform:uppercase;letter-spacing:.5px}.mode-btn:hover{border-color:var(--accent-dim);color:var(--text)}.mode-btn.active{border-color:var(--accent);color:var(--accent);background:var(--accent-glow)}.mode-icon{font-size:15px}.mode-label{font-size:11px}.ref-panel .reference-controls{display:flex;gap:var(--space-sm);align-items:center}.ref-note-select{flex:1;padding:8px 12px;background:var(--bg-tertiary);border:1px solid var(--border);border-radius:var(--radius-sm);font-size:.85rem;min-height:44px;color:var(--text)}.exercise-page{padding:0 var(--space-md) var(--space-lg)}.exercise-filters{display:flex;gap:8px;overflow-x:auto;padding:0 var(--space-md) var(--space-sm);scrollbar-width:none;-webkit-overflow-scrolling:touch}.exercise-filters::-webkit-scrollbar{display:none}.filter-btn{padding:6px 14px;border-radius:var(--radius-full);font-size:.8rem;font-weight:500;white-space:nowrap;background:var(--bg-tertiary);color:var(--text-secondary);border:1px solid var(--border);transition:all var(--transition-fast)}.filter-btn.active{background:var(--accent);color:#000;border-color:var(--accent)}.difficulty-filters{display:flex;gap:8px;padding:0 var(--space-md) var(--space-md)}.difficulty-btn{padding:4px 12px;border-radius:var(--radius-full);font-size:.75rem;background:transparent;color:var(--text-tertiary);border:1px solid var(--border)}.difficulty-btn.active{color:var(--accent);border-color:var(--accent)}.exercise-list{display:flex;flex-direction:column;gap:var(--space-md);padding:0 var(--space-md)}.exercise-card{background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-md);transition:transform var(--transition-fast),box-shadow var(--transition-fast)}.exercise-card:active{transform:scale(.98)}.exercise-card-header{display:flex;gap:8px;margin-bottom:var(--space-sm)}.exercise-category-badge{font-size:.7rem;padding:2px 8px;background:var(--bg-tertiary);border-radius:var(--radius-full);color:var(--text-secondary)}.exercise-difficulty-badge{font-size:.7rem;padding:2px 8px;border-radius:var(--radius-full)}.difficulty-beginner{background:#4ade8026;color:var(--success)}.difficulty-intermediate{background:#facc1526;color:var(--warning)}.difficulty-advanced{background:#f8717126;color:var(--error)}.exercise-name{font-size:1rem;font-weight:600;margin-bottom:4px}.exercise-description{font-size:.85rem;color:var(--text-secondary);margin-bottom:var(--space-sm)}.exercise-meta{display:flex;gap:var(--space-md);font-size:.8rem;color:var(--text-tertiary);margin-bottom:var(--space-md)}.exercise-start-btn{width:100%}.exercise-runner-page{padding:var(--space-md);max-width:500px;margin:0 auto}.runner-header{display:flex;align-items:center;gap:var(--space-md);margin-bottom:var(--space-md)}.runner-back{width:44px;height:44px;font-size:1.25rem;color:var(--text)}.runner-info h3{font-size:1.1rem;font-weight:600}.runner-meta{display:flex;gap:var(--space-md);font-size:.85rem;color:var(--text-secondary)}.runner-progress-bar{height:4px;background:var(--gauge-bg);border-radius:var(--radius-full);margin-bottom:var(--space-lg);overflow:hidden}.runner-progress-fill{height:100%;background:var(--accent);border-radius:var(--radius-full);transition:width var(--transition-fast)}.runner-note-display{display:flex;justify-content:space-around;margin-bottom:var(--space-lg)}.target-note,.detected-note{text-align:center}.target-note-label,.detected-note-label{display:block;font-size:.75rem;color:var(--text-tertiary);margin-bottom:4px}.target-note-value{font-size:2.5rem;font-weight:700;color:var(--accent);transition:transform var(--transition-fast)}.target-note-value.note-pulse{animation:notePulse .3s ease}@keyframes notePulse{0%{transform:scale(1)}50%{transform:scale(1.2)}to{transform:scale(1)}}.detected-note-value{font-size:2rem;font-weight:600;color:var(--text)}.detected-cents{display:block;font-size:.85rem;margin-top:2px}.cents-good{color:var(--success)}.cents-ok{color:var(--warning)}.cents-bad{color:var(--error)}.runner-accuracy-ring{position:relative;width:140px;height:140px;margin:0 auto var(--space-lg)}.accuracy-svg{width:100%;height:100%;transform:rotate(-90deg)}.accuracy-svg circle{transition:stroke-dasharray var(--transition-fast),stroke var(--transition-fast)}.accuracy-text{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center}.accuracy-score{font-size:1.75rem;font-weight:700}.accuracy-label{font-size:.7rem;color:var(--text-secondary)}.note-history{display:flex;gap:4px;justify-content:center;flex-wrap:wrap;margin-bottom:var(--space-lg);min-height:20px}.note-dot{width:12px;height:12px;border-radius:50%;transition:transform var(--transition-fast)}.note-dot:hover{transform:scale(1.3)}.runner-controls{display:flex;gap:var(--space-sm);justify-content:center}.runner-score{position:fixed;top:0;right:0;bottom:0;left:0;background:var(--overlay);display:flex;align-items:center;justify-content:center;z-index:50;padding:var(--space-lg)}.score-card{background:var(--bg-secondary);border-radius:var(--radius-lg);padding:var(--space-xl);text-align:center;width:100%;max-width:320px}.score-card h4{font-size:1.25rem;margin-bottom:var(--space-md)}.score-value{font-size:4rem;font-weight:800;color:var(--accent);margin-bottom:var(--space-md)}.score-details{display:flex;justify-content:space-around;margin-bottom:var(--space-lg);font-size:.9rem;color:var(--text-secondary)}.cabinet-page{padding:0 var(--space-md) var(--space-lg)}.stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-md);margin-bottom:var(--space-lg)}.stat-card{background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-md);text-align:center}.stat-icon{font-size:1.5rem;margin-bottom:4px}.stat-value{font-size:1.25rem;font-weight:700;display:block}.stat-label{font-size:.75rem;color:var(--text-secondary)}.cabinet-dna-card{background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-md);margin-bottom:var(--space-lg)}.cabinet-dna-card h4{margin-bottom:var(--space-sm)}.dna-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-sm)}.dna-item{text-align:center}.dna-label{display:block;font-size:.7rem;color:var(--text-tertiary)}.dna-value{font-size:.9rem;font-weight:600}.cabinet-tabs{display:flex;gap:4px;background:var(--bg-secondary);border-radius:var(--radius-md);padding:4px;margin-bottom:var(--space-md)}.tab-btn{flex:1;padding:8px;border-radius:var(--radius-sm);font-size:.85rem;font-weight:500;color:var(--text-secondary);transition:all var(--transition-fast)}.tab-btn.active{background:var(--accent);color:#000}.statistics-content,.history-list,.achievements-grid{animation:fadeIn var(--transition-base)}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.today-stat{background:var(--bg-secondary);border-radius:var(--radius-lg);padding:var(--space-md);margin-bottom:var(--space-md);text-align:center}.today-label{font-size:.8rem;color:var(--text-secondary)}.today-value{font-size:2rem;font-weight:700;color:var(--accent)}.today-bar{height:6px;background:var(--gauge-bg);border-radius:var(--radius-full);margin:var(--space-sm) 0;overflow:hidden}.today-bar-fill{height:100%;background:var(--accent);border-radius:var(--radius-full);transition:width var(--transition-slow)}.weekly-heatmap{background:var(--bg-secondary);border-radius:var(--radius-lg);padding:var(--space-md);margin-bottom:var(--space-md)}.heatmap-grid{display:flex;gap:4px;margin:var(--space-sm) 0}.heatmap-cell{flex:1;aspect-ratio:1;border-radius:var(--radius-sm);background:var(--gauge-bg);display:flex;align-items:center;justify-content:center;font-size:.65rem;color:var(--text-tertiary);transition:background var(--transition-fast)}.heatmap-cell.has-data[data-level="1"]{background:#64c8ff4d}.heatmap-cell.has-data[data-level="2"]{background:#64c8ff99}.heatmap-cell.has-data[data-level="3"]{background:#64c8ffe6;color:var(--bg)}.heatmap-legend{display:flex;align-items:center;gap:8px;justify-content:center;font-size:.7rem;color:var(--text-tertiary)}.legend-cells{display:flex;gap:2px}.legend-cell{width:12px;height:12px;border-radius:2px;background:var(--gauge-bg)}.legend-cell[data-level="1"]{background:#64c8ff4d}.legend-cell[data-level="2"]{background:#64c8ff99}.legend-cell[data-level="3"]{background:#64c8ffe6}.accuracy-chart{background:var(--bg-secondary);border-radius:var(--radius-lg);padding:var(--space-md)}.accuracy-bars{display:flex;align-items:flex-end;gap:6px;height:100px;margin-top:var(--space-sm)}.accuracy-bar-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px}.accuracy-bar-track{flex:1;width:100%;display:flex;align-items:flex-end;background:var(--gauge-bg);border-radius:var(--radius-sm);overflow:hidden}.accuracy-bar-fill{width:100%;border-radius:var(--radius-sm);transition:height var(--transition-base)}.accuracy-bar-label{font-size:.6rem;color:var(--text-tertiary)}.history-list{display:flex;flex-direction:column;gap:var(--space-sm)}.history-item{background:var(--bg-secondary);border-radius:var(--radius-md);padding:var(--space-md)}.history-item-main{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}.history-name{font-weight:500}.history-score{font-weight:700}.score-good{color:var(--success)}.score-ok{color:var(--warning)}.score-bad{color:var(--error)}.history-item-meta{display:flex;gap:var(--space-md);font-size:.8rem;color:var(--text-tertiary)}.empty-state{text-align:center;padding:var(--space-2xl) var(--space-md);color:var(--text-tertiary)}.achievements-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-md)}.achievement-card{background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-md);text-align:center;position:relative;transition:all var(--transition-fast)}.achievement-card.locked{opacity:.5}.achievement-card.unlocked{border-color:var(--accent)}.achievement-icon{font-size:2rem;margin-bottom:4px}.achievement-name{font-size:.85rem;font-weight:600;display:block}.achievement-desc{font-size:.75rem;color:var(--text-tertiary)}.achievement-badge{position:absolute;top:8px;right:8px;width:20px;height:20px;background:var(--success);color:#fff;border-radius:50%;font-size:.7rem;display:flex;align-items:center;justify-content:center}.achievement-lock{position:absolute;top:8px;right:8px;font-size:.8rem;opacity:.5}.vocal-dna-page{padding:0 var(--space-md) var(--space-lg)}.dna-intro-card{background:var(--bg-secondary);border-radius:var(--radius-lg);padding:var(--space-xl) var(--space-md);text-align:center}.dna-icon{font-size:3rem;margin-bottom:var(--space-md)}.dna-intro-card h3{margin-bottom:var(--space-sm)}.dna-intro-card p{color:var(--text-secondary);margin-bottom:var(--space-lg)}.dna-intro-steps{display:flex;flex-direction:column;gap:var(--space-sm);margin-bottom:var(--space-lg);text-align:left;max-width:280px;margin-left:auto;margin-right:auto}.step-item{display:flex;align-items:center;gap:var(--space-sm);font-size:.9rem}.step-num{width:28px;height:28px;background:var(--accent);color:#000;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.8rem;flex-shrink:0}.dna-test-header{margin-bottom:var(--space-lg)}.dna-overall-progress{display:flex;align-items:center;gap:var(--space-sm)}.dna-overall-bar{flex:1;height:6px;background:var(--gauge-bg);border-radius:var(--radius-full);overflow:hidden}.dna-overall-fill{height:100%;background:var(--accent);border-radius:var(--radius-full);transition:width var(--transition-base)}.dna-progress-text{font-size:.8rem;font-weight:600;color:var(--accent);min-width:36px;text-align:right}.dna-phase-display{text-align:center;padding:var(--space-xl) var(--space-md);background:var(--bg-secondary);border-radius:var(--radius-lg)}.dna-phase-icon{font-size:3rem;margin-bottom:var(--space-md)}.dna-instruction{color:var(--text-secondary);margin-bottom:var(--space-lg)}.dna-live-note{font-size:4rem;font-weight:800;color:var(--accent);margin-bottom:var(--space-lg);min-height:5rem}.dna-phase-progress{max-width:300px;margin:0 auto var(--space-md)}.dna-phase-track{height:6px;background:var(--gauge-bg);border-radius:var(--radius-full);overflow:hidden}.dna-phase-fill{height:100%;background:var(--accent);border-radius:var(--radius-full);transition:width .1s linear}.dna-timer{font-size:1.5rem;font-weight:700;color:var(--text-secondary)}.dna-processing{text-align:center;padding:var(--space-2xl) var(--space-md)}.dna-spinner{width:48px;height:48px;border:4px solid var(--gauge-bg);border-top-color:var(--accent);border-radius:50%;animation:spin 1s linear infinite;margin:0 auto var(--space-lg)}@keyframes spin{to{transform:rotate(360deg)}}.dna-passport{background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-lg);margin-bottom:var(--space-lg)}.passport-header{display:flex;align-items:center;gap:var(--space-md);margin-bottom:var(--space-lg);padding-bottom:var(--space-md);border-bottom:1px solid var(--border)}.passport-icon{font-size:2.5rem}.passport-title h3{margin-bottom:2px}.passport-confidence{font-size:.8rem;color:var(--text-secondary)}.passport-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-md);margin-bottom:var(--space-lg)}.passport-stat{text-align:center}.passport-stat .stat-label{display:block;font-size:.75rem;color:var(--text-tertiary)}.passport-stat .stat-value{font-size:1.1rem;font-weight:600}.dna-metrics h4,.dna-formants h4{font-size:.85rem;color:var(--text-secondary);margin-bottom:var(--space-sm);margin-top:var(--space-md)}.metric-bar{position:relative;height:24px;background:var(--gauge-bg);border-radius:var(--radius-sm);overflow:hidden;margin-bottom:var(--space-sm)}.metric-fill{height:100%;background:var(--accent);border-radius:var(--radius-sm);transition:width var(--transition-slow)}.metric-bar span{position:absolute;right:8px;top:50%;transform:translateY(-50%);font-size:.75rem;font-weight:600;color:var(--text);text-shadow:0 1px 2px rgba(0,0,0,.5)}.formant-bars{display:flex;flex-direction:column;gap:var(--space-sm)}.formant-item{display:flex;align-items:center;gap:var(--space-sm)}.formant-label{font-size:.8rem;font-weight:600;min-width:24px}.formant-bar{flex:1;height:20px;background:var(--gauge-bg);border-radius:var(--radius-sm);overflow:hidden}.formant-fill{height:100%;background:var(--accent);border-radius:var(--radius-sm);transition:width var(--transition-slow)}.formant-value{font-size:.75rem;color:var(--text-secondary);min-width:50px;text-align:right}.dna-quality{text-align:center;margin-top:var(--space-lg);padding-top:var(--space-lg);border-top:1px solid var(--border)}.quality-ring{position:relative;width:100px;height:100px;margin:0 auto var(--space-sm)}.quality-score{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;font-size:1.5rem;font-weight:800;color:var(--accent)}.quality-label{font-size:.85rem;color:var(--text-secondary)}.dna-actions{display:flex;gap:var(--space-md);justify-content:center}.vibrato-page{padding:0 var(--space-md) var(--space-lg)}.vibrato-display{background:var(--bg-secondary);border-radius:var(--radius-lg);padding:var(--space-lg) var(--space-md);margin-bottom:var(--space-lg)}.vibrato-metric-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-md);margin-bottom:var(--space-lg)}.vib-metric-card{text-align:center;padding:var(--space-md);background:var(--bg-tertiary);border-radius:var(--radius-md)}.vib-metric-label{display:block;font-size:.7rem;color:var(--text-tertiary);margin-bottom:4px}.vib-metric-value{display:block;font-size:1.5rem;font-weight:700;color:var(--accent)}.vib-metric-unit{font-size:.7rem;color:var(--text-secondary)}.vibrato-waveform-container{margin-bottom:var(--space-lg)}.waveform-label{font-size:.8rem;color:var(--text-secondary);margin-bottom:var(--space-sm)}.vibrato-waveform{width:100%;height:100px;background:var(--bg);border-radius:var(--radius-md)}.vibrato-assessment{text-align:center;padding:var(--space-md);border-radius:var(--radius-md);background:var(--bg-tertiary);margin-bottom:var(--space-md);transition:all var(--transition-fast)}.vibrato-assessment.has-vibrato{background:#4ade801a;border:1px solid var(--success)}.assessment-icon{font-size:1.5rem;margin-right:8px}.assessment-text{font-weight:600}.vibrato-quality-bar{display:flex;align-items:center;gap:var(--space-sm)}.quality-track{flex:1;height:8px;background:var(--gauge-bg);border-radius:var(--radius-full);overflow:hidden}.quality-fill{height:100%;background:var(--accent);border-radius:var(--radius-full);transition:width var(--transition-base)}.quality-text{font-size:.8rem;font-weight:600;min-width:48px;text-align:right}.vibrato-controls{text-align:center;margin-top:var(--space-md)}.vibrato-targets{background:var(--bg-secondary);border-radius:var(--radius-lg);padding:var(--space-md);margin-bottom:var(--space-lg)}.vibrato-targets h4{margin-bottom:var(--space-md)}.target-sliders{display:flex;flex-direction:column;gap:var(--space-md)}.slider-row{display:flex;align-items:center;gap:var(--space-md)}.slider-row label{min-width:80px;font-size:.85rem}.slider-row input[type=range]{flex:1;height:6px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--gauge-bg);border-radius:var(--radius-full);outline:none}.slider-row input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;background:var(--accent);border-radius:50%;cursor:pointer}.slider-row span{min-width:60px;text-align:right;font-size:.85rem;color:var(--text-secondary)}.vibrato-exercises-section{background:var(--bg-secondary);border-radius:var(--radius-lg);padding:var(--space-md)}.vibrato-exercises-section h4{margin-bottom:var(--space-md)}.vibrato-exercise-list{display:flex;flex-direction:column;gap:var(--space-sm)}.vibrato-exercise-card{padding:var(--space-md);background:var(--bg-tertiary);border-radius:var(--radius-md);border:1px solid transparent;cursor:pointer;transition:all var(--transition-fast)}.vibrato-exercise-card:hover,.vibrato-exercise-card.selected{border-color:var(--accent)}.vib-ex-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}.vib-ex-name{font-weight:600}.vib-ex-duration{font-size:.8rem;color:var(--text-tertiary)}.vib-ex-desc{font-size:.85rem;color:var(--text-secondary);margin-bottom:4px}.vib-ex-targets{display:flex;gap:var(--space-md);font-size:.75rem;color:var(--text-tertiary)}.breath-page{padding:0 var(--space-md) var(--space-lg)}.breath-sustain-display{background:var(--bg-secondary);border-radius:var(--radius-lg);padding:var(--space-lg) var(--space-md);margin-bottom:var(--space-lg);text-align:center}.sustain-ring{position:relative;width:180px;height:180px;margin:0 auto var(--space-lg)}.sustain-svg{width:100%;height:100%}.sustain-svg circle{transition:stroke-dasharray var(--transition-fast)}.sustain-center{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center}.sustain-timer{font-size:3rem;font-weight:800;color:var(--accent);font-family:var(--font-mono)}.sustain-unit{font-size:.85rem;color:var(--text-secondary)}.sustain-metrics{display:flex;justify-content:space-around}.sustain-metric{text-align:center}.sustain-label{display:block;font-size:.75rem;color:var(--text-tertiary)}.sustain-value{font-size:1.25rem;font-weight:600}.spl-meter{margin-top:var(--space-lg)}.spl-label{font-size:.8rem;color:var(--text-secondary);margin-bottom:4px}.spl-track{height:10px;background:var(--gauge-bg);border-radius:var(--radius-full);overflow:hidden}.spl-fill{height:100%;background:var(--accent);border-radius:var(--radius-full);transition:width var(--transition-fast),background var(--transition-fast)}.spl-value{font-size:.8rem;color:var(--text-secondary);margin-top:4px}.breath-status{text-align:center;padding:var(--space-md);background:var(--bg-secondary);border-radius:var(--radius-lg);margin-bottom:var(--space-lg)}.status-icon{font-size:1.5rem;margin-right:8px}.status-text{font-weight:600}.breath-controls{text-align:center;margin-bottom:var(--space-lg)}.breathing-timer-section{background:var(--bg-secondary);border-radius:var(--radius-lg);padding:var(--space-md);margin-bottom:var(--space-lg)}.breathing-timer-section h4{margin-bottom:var(--space-md)}.breathing-timer-display{text-align:center;padding:var(--space-xl);background:var(--bg-tertiary);border-radius:var(--radius-lg);margin-bottom:var(--space-md);transition:all var(--transition-slow)}.breathing-timer-display.phase-inhale{background:#64c8ff26;border:1px solid var(--accent)}.breathing-timer-display.phase-hold{background:#facc1526;border:1px solid var(--warning)}.breathing-timer-display.phase-exhale{background:#4ade8026;border:1px solid var(--success)}.breath-phase{font-size:1.5rem;font-weight:700;margin-bottom:var(--space-sm)}.breath-countdown{font-size:4rem;font-weight:800;font-family:var(--font-mono);color:var(--accent)}.breath-pattern-sliders{margin-bottom:var(--space-md)}.breath-exercises-section{background:var(--bg-secondary);border-radius:var(--radius-lg);padding:var(--space-md)}.breath-exercises-section h4{margin-bottom:var(--space-md)}.breath-exercise-list{display:flex;flex-direction:column;gap:var(--space-sm)}.breath-exercise-card{padding:var(--space-md);background:var(--bg-tertiary);border-radius:var(--radius-md);border:1px solid transparent;cursor:pointer;transition:all var(--transition-fast)}.breath-exercise-card:hover,.breath-exercise-card.selected{border-color:var(--accent)}.breath-ex-name{font-weight:600;margin-bottom:4px}.breath-ex-desc{font-size:.85rem;color:var(--text-secondary);margin-bottom:4px}.breath-ex-meta{display:flex;gap:var(--space-md);font-size:.75rem;color:var(--text-tertiary)}.adaptive-page{padding:0 var(--space-md) var(--space-lg)}.adaptive-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-md);margin-bottom:var(--space-lg)}.adaptive-stat{background:var(--bg-secondary);border-radius:var(--radius-lg);padding:var(--space-md);text-align:center}.adaptive-stat-value{display:block;font-size:1.25rem;font-weight:700;color:var(--accent)}.adaptive-stat-label{font-size:.7rem;color:var(--text-secondary)}.weekly-progress-section{background:var(--bg-secondary);border-radius:var(--radius-lg);padding:var(--space-md);margin-bottom:var(--space-lg)}.weekly-progress-header{display:flex;justify-content:space-between;font-size:.85rem;margin-bottom:var(--space-sm)}.weekly-progress-bar{height:8px;background:var(--gauge-bg);border-radius:var(--radius-full);overflow:hidden}.weekly-progress-fill{height:100%;background:var(--accent);border-radius:var(--radius-full);transition:width var(--transition-slow)}.fatigue-warning{background:#f8717126;border:1px solid var(--error);border-radius:var(--radius-lg);padding:var(--space-md);margin-bottom:var(--space-lg);display:flex;align-items:center;gap:var(--space-md)}.fatigue-icon{font-size:1.5rem}.fatigue-content{display:flex;flex-direction:column}.adaptive-views{display:flex;gap:4px;background:var(--bg-secondary);border-radius:var(--radius-md);padding:4px;margin-bottom:var(--space-md)}.view-btn{flex:1;padding:8px;border-radius:var(--radius-sm);font-size:.8rem;font-weight:500;color:var(--text-secondary);transition:all var(--transition-fast)}.view-btn.active{background:var(--accent);color:#000}.recommendations-list{display:flex;flex-direction:column;gap:var(--space-sm)}.recommendation-card{background:var(--bg-secondary);border-radius:var(--radius-md);padding:var(--space-md);border-left:3px solid var(--accent)}.recommendation-card.rec-rest{border-left-color:var(--warning)}.recommendation-card.rec-challenge{border-left-color:var(--success)}.recommendation-card.rec-review{border-left-color:var(--accent-dim)}.rec-header{display:flex;align-items:center;gap:var(--space-sm);margin-bottom:4px}.rec-icon{font-size:1.25rem}.rec-title{flex:1;font-weight:600;font-size:.9rem}.rec-priority{font-size:.7rem;color:var(--text-tertiary);background:var(--bg-tertiary);padding:2px 6px;border-radius:var(--radius-full)}.rec-desc{font-size:.85rem;color:var(--text-secondary);margin-bottom:var(--space-sm)}.rec-footer{display:flex;justify-content:space-between;align-items:center}.rec-reason{font-size:.75rem;color:var(--text-tertiary)}.plan-progress{display:flex;justify-content:center;margin-bottom:var(--space-lg)}.plan-progress-ring{position:relative;width:120px;height:120px}.plan-progress-ring svg{transform:rotate(-90deg)}.plan-progress-text{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;font-size:1.5rem;font-weight:700;color:var(--accent)}.plan-items{display:flex;flex-direction:column;gap:var(--space-sm)}.plan-item{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-md);background:var(--bg-secondary);border-radius:var(--radius-md)}.plan-item.completed{opacity:.5}.plan-item-check{font-size:1.25rem;color:var(--success)}.plan-item-info{flex:1}.plan-item-name{display:block;font-weight:500}.plan-item-duration{font-size:.8rem;color:var(--text-tertiary)}.plan-item-badge{font-size:.7rem;padding:2px 8px;background:var(--accent);color:#000;border-radius:var(--radius-full);font-weight:500}.skills-radar{display:flex;justify-content:center;margin-bottom:var(--space-lg)}.radar-svg{width:240px;height:240px}.skills-bars{display:flex;flex-direction:column;gap:var(--space-sm)}.skill-bar-item{display:flex;align-items:center;gap:var(--space-sm)}.skill-bar-label{min-width:70px;font-size:.85rem}.skill-bar-track{flex:1;height:12px;background:var(--gauge-bg);border-radius:var(--radius-full);overflow:hidden}.skill-bar-fill{height:100%;border-radius:var(--radius-full);transition:width var(--transition-slow)}.skill-bar-value{min-width:32px;text-align:right;font-size:.85rem;font-weight:600}.weekly-calendar{background:var(--bg-secondary);border-radius:var(--radius-lg);padding:var(--space-md);margin-top:var(--space-lg)}.weekly-calendar h4{margin-bottom:var(--space-md)}.calendar-days{display:flex;gap:var(--space-sm)}.calendar-day{flex:1;text-align:center}.calendar-date{display:block;font-size:.7rem;color:var(--text-tertiary);margin-bottom:4px}.calendar-bar{height:60px;background:var(--gauge-bg);border-radius:var(--radius-sm);display:flex;align-items:flex-end;overflow:hidden;margin-bottom:4px}.calendar-bar-fill{width:100%;background:var(--accent);border-radius:var(--radius-sm);transition:height var(--transition-slow);min-height:4px}.calendar-minutes{font-size:.7rem;color:var(--text-secondary)}.settings-page{padding:0 var(--space-md) var(--space-lg)}.settings-section{background:var(--bg-secondary);border-radius:var(--radius-lg);padding:var(--space-md);margin-bottom:var(--space-md)}.settings-section h4{font-size:.9rem;font-weight:600;margin-bottom:var(--space-md);color:var(--text-secondary)}.settings-options{display:flex;flex-wrap:wrap;gap:var(--space-sm)}.option-btn{padding:8px 16px;border-radius:var(--radius-full);font-size:.85rem;font-weight:500;background:var(--bg-tertiary);color:var(--text-secondary);border:1px solid var(--border);transition:all var(--transition-fast)}.option-btn.active{background:var(--accent);color:#000;border-color:var(--accent)}.option-btn:disabled,.option-btn.disabled{opacity:.4;cursor:not-allowed}.algo-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-sm)}.algo-card-wrapper{display:flex;flex-direction:column;gap:4px}.algo-card-wrapper .option-btn{position:relative;padding:12px;border-radius:var(--radius-md);text-align:left;display:flex;flex-direction:column;gap:2px}.algo-badge{position:absolute;top:6px;right:8px;font-size:9px;font-weight:600;padding:2px 6px;border-radius:var(--radius-full);background:var(--accent-glow);color:var(--accent);text-transform:uppercase;letter-spacing:.5px}.algo-label{font-size:14px;font-weight:600}.algo-desc{font-size:11px;opacity:.6;font-weight:400}.algo-status{font-size:10px;margin-top:2px;font-weight:500}.algo-status.ready{color:var(--success)}.algo-status.loading{color:var(--warning)}.algo-status.error{color:var(--error)}.algo-status.idle{color:var(--text-secondary)}.btn-load-model{width:100%;padding:6px;font-size:12px;border-radius:var(--radius-sm)}.settings-slider{display:flex;align-items:center;gap:var(--space-md)}.settings-slider input[type=range]{flex:1;height:6px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--gauge-bg);border-radius:var(--radius-full);outline:none}.settings-slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;background:var(--accent);border-radius:50%;cursor:pointer}.settings-toggles{display:flex;flex-direction:column;gap:var(--space-md)}.toggle-row{display:flex;align-items:center;justify-content:space-between;cursor:pointer;font-size:.9rem}.toggle-row input[type=checkbox]{display:none}.toggle-switch{width:44px;height:24px;background:var(--gauge-bg);border-radius:var(--radius-full);position:relative;transition:background var(--transition-fast)}.toggle-switch:after{content:"";position:absolute;width:20px;height:20px;background:#fff;border-radius:50%;top:2px;left:2px;transition:transform var(--transition-fast)}.toggle-row input:checked+.toggle-switch{background:var(--accent)}.toggle-row input:checked+.toggle-switch:after{transform:translate(20px)}.time-input{width:100%;padding:10px 14px;background:var(--bg-tertiary);border:1px solid var(--border);border-radius:var(--radius-sm);font-size:1rem;min-height:44px}.settings-actions{display:flex;flex-direction:column;gap:var(--space-sm)}.about-info{font-size:.9rem;color:var(--text-secondary)}.about-info p{margin-bottom:4px}.settings-desc{font-size:.85rem;color:var(--text-tertiary);margin-bottom:var(--space-sm);margin-top:-8px}.help-page{padding:0 var(--space-md) var(--space-lg)}.help-nav{display:flex;gap:4px;background:var(--bg-secondary);border-radius:var(--radius-md);padding:4px;margin-bottom:var(--space-md)}.help-nav-btn{flex:1;padding:8px;border-radius:var(--radius-sm);font-size:.8rem;font-weight:500;color:var(--text-secondary);transition:all var(--transition-fast)}.help-nav-btn.active{background:var(--accent);color:#000}.help-section{animation:fadeIn var(--transition-base)}.help-card{background:var(--bg-secondary);border-radius:var(--radius-lg);padding:var(--space-lg);margin-bottom:var(--space-md)}.help-card-icon{font-size:2rem;margin-bottom:var(--space-sm)}.help-card h4{margin-bottom:var(--space-sm)}.help-card ol{padding-left:var(--space-lg);color:var(--text-secondary)}.help-card ol li{margin-bottom:8px}.faq-item{background:var(--bg-secondary);border-radius:var(--radius-md);margin-bottom:var(--space-sm);overflow:hidden}.faq-question{display:flex;justify-content:space-between;align-items:center;padding:var(--space-md);cursor:pointer;font-weight:500;transition:background var(--transition-fast)}.faq-question:hover{background:var(--bg-tertiary)}.faq-toggle{font-size:1.25rem;color:var(--text-secondary)}.faq-answer{display:none;padding:0 var(--space-md) var(--space-md);color:var(--text-secondary);font-size:.9rem}.help-card ul{padding-left:var(--space-lg);color:var(--text-secondary);margin:var(--space-sm) 0}.help-card ul li{margin-bottom:6px;line-height:1.5}.privacy-card ul{padding-left:var(--space-lg);color:var(--text-secondary);margin:var(--space-sm) 0}.privacy-note{font-size:.85rem;color:var(--text-tertiary);font-style:italic;margin-top:var(--space-md)}.auth-modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:var(--overlay);z-index:200;display:flex;align-items:center;justify-content:center;padding:var(--space-lg);animation:fadeIn var(--transition-fast)}.auth-modal{background:var(--bg-secondary);border-radius:var(--radius-lg);padding:var(--space-xl);width:100%;max-width:380px;position:relative;animation:slideUp var(--transition-base)}.auth-close{position:absolute;top:var(--space-md);right:var(--space-md);width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-full);color:var(--text-secondary);font-size:1.1rem}.auth-header{text-align:center;margin-bottom:var(--space-lg)}.auth-form{display:flex;flex-direction:column;gap:var(--space-md)}.form-group{display:flex;flex-direction:column;gap:6px}.form-group label{font-size:.85rem;font-weight:500;color:var(--text-secondary)}.form-group input{padding:10px 14px;background:var(--bg-tertiary);border:1px solid var(--border);border-radius:var(--radius-sm);font-size:1rem;min-height:44px;transition:border-color var(--transition-fast)}.form-group input:focus{outline:none;border-color:var(--accent)}.auth-error{color:var(--error);font-size:.85rem;min-height:1.2em}.auth-divider{display:flex;align-items:center;gap:var(--space-md);margin:var(--space-md) 0;color:var(--text-tertiary);font-size:.85rem}.auth-divider:before,.auth-divider:after{content:"";flex:1;height:1px;background:var(--border)}.auth-switch{text-align:center;margin-top:var(--space-md)}.vt-toast-container{position:fixed;top:64px;left:50%;transform:translate(-50%);z-index:300;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none;width:90%;max-width:400px}.toast-container{position:fixed;top:64px;left:50%;transform:translate(-50%);z-index:300;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none}.toast{padding:12px 20px;border-radius:var(--radius-md);font-size:.9rem;font-weight:500;color:#fff;pointer-events:auto;box-shadow:0 4px 12px var(--shadow);transform:translateY(-20px);opacity:0;transition:all .3s ease}.toast-visible{transform:translateY(0);opacity:1}.toast-exit{transform:translateY(-20px);opacity:0}.toast-success{background:var(--success);color:#000}.toast-error{background:var(--error)}.toast-warning{background:var(--warning);color:#000}.toast-info{background:var(--accent);color:#000}@keyframes slideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}@media (min-width: 480px){.page-header h2{font-size:1.75rem}.stats-grid{grid-template-columns:repeat(4,1fr)}.achievements-grid,.vibrato-metric-cards{grid-template-columns:repeat(3,1fr)}.note-display{font-size:5rem}.exercise-list{display:grid;grid-template-columns:repeat(2,1fr)}}@media (min-width: 768px){.app-main{padding-bottom:0}.bottom-nav{display:none}.app-shell{flex-direction:row}.app-header{display:none}.app-main{flex:1;margin-left:200px}.bottom-nav{display:flex;position:fixed;left:0;top:0;bottom:0;width:200px;flex-direction:column;border-top:none;border-right:1px solid var(--border);padding:var(--space-lg) 0;z-index:10}.bottom-nav-items{flex-direction:column;height:auto;gap:4px;padding:0 var(--space-sm)}.nav-item{flex-direction:row;justify-content:flex-start;padding:12px var(--space-md);width:100%;min-width:auto;height:auto;gap:var(--space-md)}.nav-label{font-size:.85rem}.tuner-page,.exercise-page,.cabinet-page,.vocal-dna-page,.vibrato-page,.breath-page,.adaptive-page,.settings-page,.help-page{max-width:720px;margin:0 auto;padding:var(--space-xl)}.exercise-list{grid-template-columns:repeat(2,1fr)}.achievements-grid{grid-template-columns:repeat(4,1fr)}}@media (min-width: 1024px){.app-main{margin-left:220px}.bottom-nav{width:220px}.exercise-list{grid-template-columns:repeat(3,1fr)}.stats-grid{gap:var(--space-lg)}}@media (min-width: 1440px){.app-main{margin-left:240px}.bottom-nav{width:240px}.tuner-page,.exercise-page,.cabinet-page,.vocal-dna-page,.vibrato-page,.breath-page,.adaptive-page,.settings-page,.help-page{max-width:900px}}@media print{.app-header,.bottom-nav,.toast-container{display:none!important}.app-main{overflow:visible;height:auto}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}@media (prefers-contrast: high){:root{--gauge-bg: #444;--border: #666}}.heatmap-page{padding:var(--space-md)}.heatmap-page .heatmap-legend{display:flex;gap:var(--space-md);margin-bottom:var(--space-md);flex-wrap:wrap}.heatmap-page .heatmap-legend-item{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-secondary)}.heatmap-page .heatmap-legend-color{width:16px;height:16px;border-radius:4px;border:1px solid rgba(255,255,255,.1)}.heatmap-page .heatmap-grid-wrapper{display:flex;gap:4px}.heatmap-page .heatmap-axis-y{display:flex;flex-direction:column;justify-content:space-around;padding:4px 0}.heatmap-page .heatmap-axis-label{font-size:12px;color:var(--text-secondary);text-align:center;height:40px;display:flex;align-items:center;justify-content:center}.heatmap-page .heatmap-grid{flex:1;display:flex;flex-direction:column;gap:3px}.heatmap-page .heatmap-row{display:flex;gap:3px;height:40px}.heatmap-page .heatmap-cell{flex:1;border-radius:6px;border:1px solid rgba(255,255,255,.06);display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:10px;min-width:0;transition:transform .15s ease,box-shadow .15s ease;cursor:pointer}.heatmap-page .heatmap-cell:hover{transform:scale(1.15);box-shadow:0 4px 12px #0000004d;z-index:2}.heatmap-page .heatmap-cell.empty{background:#ffffff05}.heatmap-page .heatmap-note{font-weight:600;color:var(--text);font-size:10px}.heatmap-page .heatmap-pct{font-size:9px;color:var(--text-secondary);margin-top:1px}.heatmap-page .heatmap-meta{margin-top:var(--space-md);text-align:center}.karaoke-page{padding:var(--space-md);max-width:600px;margin:0 auto}.karaoke-hero{text-align:center;margin-bottom:var(--space-xl);padding-top:var(--space-lg)}.karaoke-title{font-size:1.8rem;font-weight:700;margin-bottom:var(--space-sm);color:var(--text)}.karaoke-subtitle{font-size:1rem;color:var(--text-secondary);margin-bottom:var(--space-md)}.karaoke-modes{display:grid;grid-template-columns:1fr;gap:var(--space-md);margin-bottom:var(--space-lg)}@media (min-width: 480px){.karaoke-modes{grid-template-columns:repeat(3,1fr)}}.karaoke-mode-card{display:flex;flex-direction:column;align-items:center;gap:var(--space-sm);padding:var(--space-lg) var(--space-md);background:var(--bg-secondary);border:2px solid var(--border);border-radius:var(--radius-lg);cursor:pointer;transition:all var(--transition-fast);text-align:center}.karaoke-mode-card:hover{border-color:var(--card-border, var(--accent));background:var(--card-accent, var(--accent-glow));transform:translateY(-2px)}.karaoke-mode-card.active{border-color:var(--card-border, var(--accent));background:var(--card-accent, var(--accent-glow));box-shadow:0 0 20px var(--card-accent, var(--accent-glow))}.mode-card-icon{font-size:2.5rem;line-height:1}.mode-card-title{font-size:.9rem;font-weight:700;color:var(--text);letter-spacing:.5px}.mode-card-subtitle{font-size:.75rem;color:var(--text-secondary);line-height:1.3}.karaoke-config{margin-bottom:var(--space-lg)}.config-panel{background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--space-md)}.config-row{display:flex;align-items:center;gap:var(--space-sm);margin-bottom:var(--space-sm);flex-wrap:wrap}.config-row label{font-size:.85rem;font-weight:600;color:var(--text-secondary);min-width:80px}.config-select{padding:6px 10px;background:var(--bg-tertiary);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-size:.85rem}.config-slider{flex:1;min-width:100px}.config-value{font-family:var(--font-mono);font-size:.85rem;color:var(--text);min-width:36px;text-align:right}.config-hint{font-size:.8rem;color:var(--text-tertiary);margin-top:var(--space-sm);font-style:italic}.toggle-btn{padding:6px 14px;border-radius:var(--radius-full);border:1.5px solid var(--border);background:var(--bg-tertiary);color:var(--text-secondary);font-size:.8rem;font-weight:600;cursor:pointer;transition:all var(--transition-fast)}.toggle-btn.active{border-color:var(--accent);color:var(--accent);background:var(--accent-glow)}.karaoke-start-row{display:flex;justify-content:center;margin-bottom:var(--space-xl)}.karaoke-start-row .btn-large{min-width:240px;padding:14px 32px;font-size:1.1rem}.karaoke-history{margin-top:var(--space-lg)}.karaoke-session-list{display:flex;flex-direction:column;gap:var(--space-sm)}.session-item{display:flex;justify-content:space-between;align-items:center;padding:var(--space-sm) var(--space-md);background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-md);cursor:pointer;transition:background var(--transition-fast)}.session-item:hover{background:var(--bg-tertiary)}.session-info{display:flex;flex-direction:column;gap:2px}.session-date{font-size:.8rem;color:var(--text-secondary)}.session-mode-badge{font-size:.7rem;font-weight:600;padding:2px 8px;border-radius:var(--radius-full);text-transform:uppercase;letter-spacing:.5px}.session-mode-badge.mode-just_sing{background:#34d39926;color:#34d685}.session-mode-badge.mode-key_aware{background:#0ea5e926;color:#0ea5e9}.session-mode-badge.mode-studio{background:#a78bfa26;color:#a78bfa}.session-score{display:flex;flex-direction:column;align-items:flex-end}.session-score-value{font-size:1.2rem;font-weight:700;font-family:var(--font-mono)}.session-score-label{font-size:.7rem;color:var(--text-tertiary)}.karaoke-results-loading{display:flex;flex-direction:column;align-items:center;gap:var(--space-md);padding:var(--space-2xl) var(--space-md);animation:fadeIn var(--transition-base)}.karaoke-results-loading .dna-spinner{width:36px;height:36px;border-width:3px}.karaoke-results-empty{display:flex;flex-direction:column;align-items:center;gap:var(--space-md);padding:var(--space-2xl) var(--space-md);color:var(--text-secondary);text-align:center;animation:fadeIn var(--transition-base)}.karaoke-auth-prompt{background:var(--accent-glow);border:1px solid var(--accent-dim);border-radius:var(--radius-md);padding:var(--space-md);margin-bottom:var(--space-lg);text-align:center}.karaoke-auth-prompt p{font-size:.85rem;color:var(--text-secondary);margin-bottom:var(--space-sm)}