.sidebar{width:var(--sidebar-width);min-width:var(--sidebar-width);background:var(--bg-sidebar);border-right:1px solid var(--border);flex-direction:column;height:100vh;padding:16px 0;display:flex}.sidebar-top{border-bottom:1px solid var(--border);padding:0 16px 16px}.sidebar-logo{align-items:center;gap:10px;padding:8px 0 16px;display:flex}.logo-icon{color:var(--accent);font-size:1.8rem}.logo-text{color:var(--text-primary);letter-spacing:-.5px;font-size:1.3rem;font-weight:700}.sidebar-user,.user-info{align-items:center;gap:10px;display:flex}.signin-link{color:var(--text-secondary);align-items:center;gap:10px;font-size:.9rem;display:flex}.signin-link:hover{color:var(--accent)}.user-avatar{background:var(--accent-dim);width:36px;height:36px;color:var(--accent);border-radius:50%;justify-content:center;align-items:center;font-size:.9rem;font-weight:700;display:flex}.user-avatar.guest{background:var(--bg-input);color:var(--text-muted)}.user-name{color:var(--text-primary);font-size:.9rem;font-weight:500}.sidebar-nav{flex-direction:column;flex:1;gap:2px;padding:12px 8px;display:flex}.nav-item{color:var(--text-secondary);text-align:left;background:0 0;border-radius:8px;align-items:center;gap:12px;width:100%;padding:10px 12px;font-size:.9rem;font-weight:500;text-decoration:none;transition:all .15s;display:flex}.nav-item:hover{background:var(--bg-card);color:var(--text-primary)}.nav-item.active{background:var(--accent-dim);color:var(--accent)}.sidebar-bottom{border-top:1px solid var(--border);padding:8px}.logout-btn{color:var(--text-muted)}.logout-btn:hover{color:var(--red);background:#9b454526}.theme-toggle-btn{color:var(--text-muted)}.theme-toggle-btn:hover{color:var(--text-primary);background:var(--accent-dim)}.theme-icon{text-align:center;width:20px;font-size:1.1rem;line-height:1}.sidebar-version{color:var(--text-muted);text-align:center;-webkit-user-select:none;user-select:none;padding:10px 12px 4px;font-size:.7rem}.sidebar-close-btn{color:var(--text-muted);background:0 0;border-radius:6px;margin-left:auto;padding:4px;transition:color .15s;display:none}.sidebar-close-btn:hover{color:var(--text-primary)}.sidebar-overlay{display:none}@media (width<=1024px){.sidebar{z-index:1000;width:260px;min-width:260px;transition:transform .25s;position:fixed;top:0;left:0;transform:translate(-100%)}.sidebar.open{transform:translate(0)}.sidebar-close-btn{justify-content:center;align-items:center;display:flex}.sidebar-overlay{z-index:999;background:#00000080;animation:.2s fadeIn;display:block;position:fixed;inset:0}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}}.staff-container{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;justify-content:center;align-items:center;min-height:780px;margin-bottom:20px;padding:20px;display:flex}.staff-container svg{width:100%;max-width:100%}.staff-container svg text{fill:var(--staff-text)}.staff-container svg line,.staff-container svg path{stroke:var(--staff-line)}@keyframes noteShake{0%,to{transform:translate(0)}20%{transform:translate(-6px)}40%{transform:translate(6px)}60%{transform:translate(-4px)}80%{transform:translate(4px)}}.note-shake{animation:.4s ease-in-out noteShake}.metrics-bar{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;gap:32px;margin-bottom:20px;padding:16px 24px;display:flex}.metric{flex-direction:column;gap:2px;display:flex}.metric-label{text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted);font-size:.75rem;font-weight:600}.metric-value{font-size:1.3rem;font-weight:700;font-family:var(--font-mono);color:var(--text-primary)}.metric-value small{color:var(--text-muted);font-size:.7rem;font-weight:400}.note-circle-wrapper{justify-content:center;padding:16px 0;display:flex}.note-circle-svg{max-width:280px}.note-circle-btn circle{fill:var(--bg-input);stroke:var(--border);stroke-width:2px;cursor:pointer;transition:all .15s}.note-circle-btn text{fill:var(--text-primary);pointer-events:none;-webkit-user-select:none;user-select:none;font-size:16px;font-weight:700}.note-circle-btn:hover circle{fill:var(--accent-dim);stroke:var(--accent)}.note-circle-btn.note-correct circle{fill:#4481544d;stroke:var(--green)}.note-circle-btn.note-incorrect circle{fill:#9b45454d;stroke:var(--red)}.note-circle-btn.disabled{pointer-events:none;opacity:.5}.piano-wrapper{-webkit-user-select:none;user-select:none;border-radius:8px;width:fit-content;margin:0 auto;overflow:hidden}.piano-wrapper.scrollable{-webkit-overflow-scrolling:touch;overflow:auto hidden}.octave-labels{gap:0;display:flex}.octave-label{text-align:center;color:var(--text-muted);border-bottom:2px solid var(--accent);padding:4px 0;font-size:.75rem}.piano-keys{margin:0 auto;position:relative}.white-key{background:linear-gradient(to bottom, var(--white-key-top), var(--white-key-bottom));border:1px solid var(--white-key-border);cursor:pointer;z-index:1;border-radius:0 0 4px 4px;transition:background .1s;position:absolute;top:0}.white-key:hover{background:linear-gradient(to bottom, var(--white-key-hover-top), var(--white-key-hover-bottom))}.white-key:active{background:var(--white-key-active)}.black-key{background:linear-gradient(to bottom, var(--black-key-top), var(--black-key-bottom));border:1px solid var(--black-key-border);cursor:pointer;z-index:2;border-radius:0 0 3px 3px;transition:background .1s;position:absolute;top:0}.black-key:hover{background:linear-gradient(to bottom, var(--black-key-hover-top), var(--black-key-hover-bottom))}.black-key:active{background:var(--black-key-active)}.key-correct{background:var(--green)!important}.key-incorrect{background:var(--red)!important}.chord-selector{flex-wrap:wrap;justify-content:center;gap:10px;padding:16px 0;display:flex}.chord-btn{background:var(--bg-input);border:2px solid var(--border);color:var(--text-primary);cursor:pointer;text-align:center;border-radius:12px;min-width:110px;padding:14px 22px;font-size:.95rem;font-weight:600;transition:all .15s}.chord-btn:hover{border-color:var(--accent);background:var(--accent-dim);color:var(--accent)}.chord-btn.chord-correct{border-color:var(--green);color:var(--green);background:#4481544d}.chord-btn.chord-incorrect{border-color:var(--red);color:var(--red);background:#9b45454d;animation:.3s ease-out chord-shake}.chord-btn.disabled{pointer-events:none;opacity:.5}@keyframes chord-shake{0%,to{transform:translate(0)}20%{transform:translate(-6px)}40%{transform:translate(6px)}60%{transform:translate(-4px)}80%{transform:translate(4px)}}.practice-page{gap:24px;height:100%;display:flex}.practice-main{flex:1;min-width:0}.practice-sidebar{flex-shrink:0;width:340px;min-width:300px}.page-title{color:var(--text-primary);margin-bottom:20px;font-size:1.6rem;font-weight:700}.config-panel h3{color:var(--text-primary);margin-bottom:16px;font-size:1.1rem}.config-grid{flex-direction:column;gap:16px;margin-bottom:20px;display:flex}.config-group label{text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted);margin-bottom:6px;font-size:.8rem;font-weight:600;display:block}.toggle-group{flex-wrap:wrap;gap:6px;display:flex}.toggle-btn{background:var(--bg-input);color:var(--text-secondary);border:1px solid var(--border);border-radius:6px;align-items:center;gap:6px;padding:8px 16px;font-size:.85rem;font-weight:500;transition:all .15s;display:flex}.toggle-btn:hover{border-color:var(--accent);color:var(--text-primary)}.toggle-btn.active{background:var(--accent-dim);border-color:var(--accent);color:var(--accent)}.method-icon{font-size:1rem}.start-btn{width:100%;padding:14px;font-size:1.1rem}.input-area{justify-content:center;margin-top:12px;display:flex}.results-panel h2{margin-bottom:20px;font-size:1.4rem}.results-metrics{grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px;display:grid}.result-stat{text-align:center;background:var(--bg-input);border-radius:8px;padding:16px}.result-label{text-transform:uppercase;color:var(--text-muted);margin-bottom:4px;font-size:.75rem;font-weight:600;display:block}.result-value{font-size:1.4rem;font-weight:700;font-family:var(--font-mono)}.result-value small{color:var(--text-muted);font-size:.65rem}.rank-display{text-align:center;color:var(--text-secondary);margin-bottom:16px;font-size:1.1rem}.rank-display strong{color:var(--accent);font-size:1.3rem}.submit-score{flex-wrap:wrap;align-items:flex-start;gap:10px;margin-bottom:16px;display:flex}.guest-input{background:var(--bg-input);border:1px solid var(--border);min-width:180px;color:var(--text-primary);border-radius:8px;flex:1;padding:10px 14px;font-size:.95rem}.guest-input:focus{border-color:var(--accent)}.results-actions{gap:10px;margin-top:16px;display:flex}.midi-status{color:var(--text-muted);align-items:center;padding:0 8px;font-size:.8rem;display:flex}.midi-status.connected{color:var(--green)}.midi-active-panel{text-align:center;background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:32px}.midi-badge{color:var(--red);background:#9b454533;border-radius:20px;padding:6px 16px;font-size:.85rem;font-weight:600;display:inline-block}.midi-badge.connected{color:var(--green);background:#44815433}.lessons-page{max-width:700px}.lessons-locked{text-align:center;padding:60px 20px}.lessons-locked h2{margin-bottom:12px}.lessons-locked p{color:var(--text-secondary);font-size:1rem}.back-btn{color:var(--accent);background:0 0;margin-bottom:16px;padding:4px 0;font-size:.9rem}.back-btn:hover{text-decoration:underline}.chapters-grid{flex-direction:column;gap:12px;display:flex}.chapter-card{cursor:pointer;justify-content:space-between;align-items:center;transition:all .15s;display:flex}.chapter-card:hover{border-color:var(--accent);transform:translate(4px)}.chapter-card-info,.chapter-header-info{flex:1}.chapter-num{text-transform:uppercase;letter-spacing:1px;color:var(--accent);font-size:.7rem;font-weight:700}.chapter-card h3{margin:4px 0;font-size:1.15rem}.chapter-card p,.chapter-header p{color:var(--text-secondary);font-size:.85rem}.chapter-header{justify-content:space-between;align-items:center;margin-bottom:20px;display:flex}.chapter-header h2{margin:4px 0;font-size:1.4rem}.chapter-progress-ring{flex-shrink:0;width:80px;height:80px;position:relative}.chapter-progress-ring.small{width:60px;height:60px}.chapter-progress-ring svg{width:100%;height:100%}.ring-bg{fill:none;stroke:var(--border);stroke-width:4px}.ring-fill{fill:none;stroke:var(--accent);stroke-width:4px;stroke-linecap:round;transition:stroke-dasharray .5s}.ring-text{color:var(--text-primary);font-size:.85rem;font-weight:700;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.chapter-progress-ring.small .ring-text{font-size:.75rem}.lesson-list{flex-direction:column;gap:8px;display:flex}.lesson-item{cursor:pointer;align-items:center;gap:14px;padding:14px 16px;transition:all .15s;display:flex}.lesson-item:hover{border-color:var(--accent)}.lesson-item.locked{opacity:.5;cursor:not-allowed}.lesson-item.locked:hover{border-color:var(--border)}.lesson-item.completed .lesson-icon{background:var(--green);color:var(--btn-primary-text)}.lesson-icon{background:var(--bg-input);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:40px;height:40px;font-size:.85rem;font-weight:700;display:flex}.lesson-info{flex-direction:column;gap:2px;display:flex}.lesson-type{text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted);font-size:.7rem;font-weight:600}.lesson-title{color:var(--text-primary);font-size:.95rem;font-weight:600}.lesson-item.exam{border-left:3px solid var(--accent)}.lesson-item.exam .lesson-type{color:var(--accent)}.lock-icon{margin-left:auto;font-size:1rem}.lesson-detail{max-width:750px}.lesson-header{margin-bottom:20px}.lesson-number-label{text-transform:uppercase;letter-spacing:.05em;color:var(--accent);margin-bottom:4px;font-size:.75rem;font-weight:600;display:block}.lesson-header h2{margin-bottom:4px;font-size:1.4rem}.input-selection h3{text-align:center;color:var(--text-secondary);margin:20px 0 12px;font-size:1rem}.input-options{justify-content:center;gap:12px;display:flex}.input-option{background:var(--bg-input);border:2px solid var(--border);color:var(--text-secondary);cursor:pointer;border-radius:12px;flex-direction:column;align-items:center;gap:8px;padding:16px 20px;font-size:.8rem;font-weight:500;transition:all .15s;display:flex}.input-option:hover{border-color:var(--accent);color:var(--text-primary)}.input-option.active{border-color:var(--accent);background:var(--accent-dim);color:var(--accent)}.option-icon{font-size:1.5rem}.lesson-progress-bar{color:var(--text-muted);justify-content:space-between;align-items:center;margin-top:16px;padding:8px 0;font-size:.85rem;display:flex}.theory-card{padding:32px}.theory-content h3{color:var(--text-primary);margin:28px 0 10px;font-size:1.15rem;font-weight:600}.theory-content h4{color:var(--text-primary);margin:20px 0 8px;font-size:1rem;font-weight:600}.theory-content p,.theory-content ul{color:var(--text-secondary);margin-bottom:12px;line-height:1.7}.theory-content ul{padding-left:20px}.theory-content li{margin-bottom:6px}.theory-content strong{color:var(--text-primary)}.theory-tip{background:var(--accent-dim);border-left:3px solid var(--accent);color:var(--text-secondary);border-radius:0 8px 8px 0;margin:16px 0;padding:12px 16px;font-size:.9rem;line-height:1.6}.theory-sequence{text-align:center;letter-spacing:.05em;background:var(--bg-input);border-radius:8px;padding:10px;font-size:1rem;color:var(--text-primary)!important}.theory-table-wrap{margin:12px 0;overflow-x:auto}.theory-table{border-collapse:collapse;width:100%;font-size:.85rem}.theory-table th,.theory-table td{border:1px solid var(--border);text-align:center;color:var(--text-secondary);padding:6px 10px}.theory-table thead th{background:var(--bg-input);color:var(--text-muted);font-weight:600}.leaderboard{width:100%}.leaderboard-loading{text-align:center;color:var(--text-muted);padding:24px}.leaderboard-table{border-collapse:collapse;width:100%;font-size:.9rem}.leaderboard-table thead th{text-align:left;text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted);border-bottom:1px solid var(--border);padding:10px 12px;font-size:.75rem;font-weight:600}.leaderboard-table tbody td{border-bottom:1px solid var(--border);color:var(--text-secondary);padding:10px 12px}.leaderboard-table tbody tr:hover td{background:#9f99990f}.rank-cell{width:40px;font-weight:700;font-family:var(--font-mono)}.rank-1 .rank-cell{color:gold}.rank-2 .rank-cell{color:silver}.rank-3 .rank-cell{color:#cd7f32}.player-cell{font-weight:600;color:var(--text-primary)!important}.score-cell{font-family:var(--font-mono);font-weight:700;color:var(--accent)!important}.empty-row{text-align:center;color:var(--text-muted);padding:24px!important}.leaderboard.compact .leaderboard-table{font-size:.85rem}.profile-page{max-width:700px}.profile-locked{text-align:center;padding:60px 20px}.profile-locked h2{margin-bottom:12px}.profile-header{align-items:center;gap:16px;margin-bottom:20px;display:flex}.profile-avatar{background:var(--accent-dim);width:56px;height:56px;color:var(--accent);border-radius:50%;justify-content:center;align-items:center;font-size:1.4rem;font-weight:700;display:flex}.profile-header h2{margin-bottom:2px;font-size:1.3rem}.stats-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;display:grid}.stat-card{text-align:center;padding:16px 12px}.stat-label{text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted);margin-bottom:6px;font-size:.7rem;font-weight:600;display:block}.stat-value{font-size:1.3rem;font-weight:700;font-family:var(--font-mono)}.chapter-progress-row{align-items:center;gap:12px;padding:8px 0;font-size:.9rem;display:flex}.progress-bar-bg{background:var(--bg-input);border-radius:4px;flex:1;height:8px;overflow:hidden}.progress-bar-fill{background:var(--accent);border-radius:4px;height:100%;transition:width .4s}.history-table{border-collapse:collapse;width:100%;font-size:.85rem}.history-table th{text-align:left;text-transform:uppercase;color:var(--text-muted);border-bottom:1px solid var(--border);padding:8px 10px;font-size:.7rem}.history-table td{color:var(--text-secondary);border-bottom:1px solid #2a3a5c4d;padding:8px 10px}.help-page{max-width:700px}.help-section{margin-bottom:16px}.help-section h3{color:var(--accent);margin-bottom:10px;font-size:1.1rem}.help-section p,.help-section li,.help-section dd{color:var(--text-secondary);font-size:.9rem;line-height:1.7}.help-section ol,.help-section ul{padding-left:20px}.help-section li{margin-bottom:4px}.help-section dl{margin:0}.help-section dt{color:var(--text-primary);margin-top:10px;font-size:.9rem;font-weight:700}.help-section dd{margin:4px 0 0 16px}.auth-page{justify-content:center;align-items:flex-start;padding-top:60px;display:flex}.auth-card{width:100%;max-width:420px}.auth-card h2{margin-bottom:24px;font-size:1.4rem}.auth-form{flex-direction:column;gap:16px;display:flex}.form-group label{text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted);margin-bottom:6px;font-size:.8rem;font-weight:600;display:block}.form-group input{background:var(--bg-input);border:1px solid var(--border);width:100%;color:var(--text-primary);border-radius:8px;padding:10px 14px;font-size:.95rem}.form-group input:focus{border-color:var(--accent)}.auth-error{color:var(--red);font-size:.85rem}.auth-submit{width:100%;margin-top:4px;padding:12px}.auth-switch{text-align:center;color:var(--text-muted);margin-top:16px;font-size:.85rem}.auth-switch button{color:var(--accent);background:0 0;font-size:.85rem;font-weight:600}.auth-switch button:hover{text-decoration:underline}*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg-primary:#181616;--bg-secondary:#131111;--bg-sidebar:#111010;--bg-card:#222020;--bg-input:#2a2727;--text-primary:#ccc8c8;--text-secondary:#908a8a;--text-muted:#5a5454;--accent:#7a7474;--accent-hover:#9a9494;--accent-dim:#7a747426;--green:#448154;--red:#9b4545;--orange:#fabd2f;--border:#2e2a2a;--shadow-color:#000c;--sidebar-width:220px;--font-mono:"JetBrains Mono", "Fira Code", "Consolas", monospace;--staff-text:#b0acac;--staff-line:#605a5a;--white-key-top:#d8d2d2;--white-key-bottom:#c8c2c2;--white-key-border:#706a6a;--white-key-hover-top:#c0baba;--white-key-hover-bottom:#b0aaaa;--white-key-active:#a09a9a;--black-key-top:#1e1c1c;--black-key-bottom:#121010;--black-key-border:#080808;--black-key-hover-top:#2e2c2c;--black-key-hover-bottom:#1e1c1c;--black-key-active:#3a3636;--btn-primary-text:#181616}[data-theme=grey]{--bg-primary:#333;--bg-secondary:#2e2e2e;--bg-sidebar:#2b2b2b;--bg-card:#3d3d3d;--bg-input:#404040;--text-primary:#b5b0b0;--text-secondary:#9f9999;--text-muted:#736b6b;--accent:#6c6666;--accent-hover:#868080;--accent-dim:#6c666633;--green:#448154;--red:#9b4545;--orange:#fabd2f;--border:#404040;--shadow-color:#0008;--staff-text:#d4d0d0;--staff-line:#8a8585;--white-key-top:#e8e2e2;--white-key-bottom:#d8d2d2;--white-key-border:#8a8484;--white-key-hover-top:#cfc8c8;--white-key-hover-bottom:#bfb8b8;--white-key-active:#b0a8a8;--black-key-top:#2b2828;--black-key-bottom:#1a1818;--black-key-border:#111;--black-key-hover-top:#3a3636;--black-key-hover-bottom:#2a2626;--black-key-active:#4a4444;--btn-primary-text:#2b2b2b}[data-theme=light]{--bg-primary:#f0eded;--bg-secondary:#e6e2e2;--bg-sidebar:#fff;--bg-card:#fff;--bg-input:#e8e4e4;--text-primary:#2a2424;--text-secondary:#5a5252;--text-muted:#9a9292;--accent:#6c6666;--accent-hover:#4a4545;--accent-dim:#6c66661a;--green:#2e7d46;--red:#b83a3a;--orange:#d4860a;--border:#d6d0d0;--shadow-color:#00000015;--staff-text:#3a3535;--staff-line:#8a8585;--white-key-top:#faf8f8;--white-key-bottom:#eeebeb;--white-key-border:#b5b0b0;--white-key-hover-top:#e8e4e4;--white-key-hover-bottom:#ddd9d9;--white-key-active:#d0cccc;--black-key-top:#2b2828;--black-key-bottom:#1a1818;--black-key-border:#111;--black-key-hover-top:#3a3636;--black-key-hover-bottom:#2a2626;--black-key-active:#4a4444;--btn-primary-text:#fff}html,body,#root{width:100%;height:100%;overflow:hidden}body{background:var(--bg-primary);color:var(--text-primary);-webkit-font-smoothing:antialiased;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;line-height:1.5}a{color:var(--accent);text-decoration:none}a:hover{color:var(--accent-hover)}button{cursor:pointer;border:none;outline:none;font-family:inherit}input,select{outline:none;font-family:inherit}.app-layout{width:100vw;height:100vh;display:flex}.main-content{background:var(--bg-primary);flex:1;padding:24px 32px;overflow-y:auto}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--bg-primary)}::-webkit-scrollbar-thumb{background:var(--text-muted);border-radius:4px}.btn{border-radius:8px;padding:10px 24px;font-size:.95rem;font-weight:600;transition:all .2s}.btn-primary{background:var(--accent);color:var(--btn-primary-text);font-weight:700}.btn-primary:hover{background:var(--accent-hover);transform:translateY(-1px)}.btn-secondary{background:var(--bg-input);color:var(--text-primary);border:1px solid var(--border)}.btn-secondary:hover{background:var(--border)}.card{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:20px}.text-accent{color:var(--accent)}.text-green{color:var(--green)}.text-red{color:var(--red)}.text-muted{color:var(--text-muted)}.feedback-banner{text-align:center;border-radius:8px;margin-bottom:12px;padding:10px 16px;font-size:.95rem;font-weight:600}.feedback-banner.incorrect{color:var(--red);background:#9b454526}.hamburger-btn{z-index:998;background:var(--bg-card);border:1px solid var(--border);color:var(--text-primary);box-shadow:0 2px 8px var(--shadow-color);border-radius:8px;padding:8px;line-height:0;transition:background .15s;display:none;position:fixed;top:12px;left:12px}.hamburger-btn:hover{background:var(--bg-input)}@media (width<=1024px){.hamburger-btn{justify-content:center;align-items:center;display:flex}.main-content{padding:56px 16px 20px}.practice-page{flex-direction:column}.practice-sidebar{width:100%;min-width:0}.results-metrics{grid-template-columns:repeat(2,1fr)!important}}@media (width<=768px){.main-content{padding:56px 12px 12px}.config-grid .toggle-group{flex-wrap:wrap}.toggle-btn{padding:6px 10px;font-size:.8rem}.metrics-bar{flex-wrap:wrap;gap:16px;padding:12px 16px}}@media (width<=480px){.metrics-bar{gap:8px}.metric-value{font-size:1rem}.stats-grid{grid-template-columns:repeat(2,1fr)!important}}