:root{--bg-primary: #0a0e17;--bg-secondary: #121824;--bg-tertiary: #1b2336;--card-bg: rgba(22, 30, 49, .7);--card-border: rgba(255, 255, 255, .08);--color-primary: #00e5ff;--color-primary-glow: rgba(0, 229, 255, .3);--color-secondary: #7c4dff;--color-secondary-glow: rgba(124, 77, 255, .3);--color-success: #00e676;--color-success-glow: rgba(0, 230, 118, .25);--color-error: #ff1744;--color-error-glow: rgba(255, 23, 68, .25);--text-main: #f5f6f9;--text-muted: #8a99ad;--text-dark: #070a0f;--font-body: "Inter", system-ui, -apple-system, sans-serif;--font-heading: "Outfit", system-ui, -apple-system, sans-serif;--border-radius: 12px;--transition-speed: .2s;--glow-shadow: 0 0 15px var(--color-primary-glow)}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-primary);color:var(--text-main);font-family:var(--font-body);min-height:100vh;overflow-x:hidden;line-height:1.5;background-image:radial-gradient(at 0% 0%,rgba(124,77,255,.15) 0px,transparent 50%),radial-gradient(at 100% 100%,rgba(0,229,255,.1) 0px,transparent 50%);background-attachment:fixed}h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);font-weight:600;letter-spacing:-.02em;margin-bottom:.5rem}.glass-card{background:var(--card-bg);border:1px solid var(--card-border);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-radius:var(--border-radius);padding:2rem;box-shadow:0 8px 32px #0000005e;transition:transform var(--transition-speed) ease,border-color var(--transition-speed) ease}.glass-card:hover{border-color:#00e5ff33}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.75rem 1.5rem;font-family:var(--font-heading);font-weight:600;font-size:.95rem;border-radius:8px;border:none;cursor:pointer;transition:all var(--transition-speed) ease;text-decoration:none}.btn-primary{background:linear-gradient(135deg,var(--color-primary),#00b0ff);color:var(--text-dark);box-shadow:0 4px 15px #00e5ff4d}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 20px #00e5ff80}.btn-secondary{background:var(--bg-tertiary);color:var(--text-main);border:1px solid var(--card-border)}.btn-secondary:hover{background:#ffffff0d;border-color:#fff3;transform:translateY(-2px)}.btn-success{background:linear-gradient(135deg,var(--color-success),#00c853);color:var(--text-dark);box-shadow:0 4px 15px #00e6764d}.btn-success:hover{transform:translateY(-2px);box-shadow:0 6px 20px #00e67680}.btn-danger{background:linear-gradient(135deg,var(--color-error),#d50000);color:var(--text-main);box-shadow:0 4px 15px #ff17444d}.btn-danger:hover{transform:translateY(-2px);box-shadow:0 6px 20px #ff174480}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important;box-shadow:none!important}.form-group{margin-bottom:1.25rem}.form-label{display:block;font-size:.85rem;color:var(--text-muted);margin-bottom:.5rem;font-weight:500;text-transform:uppercase;letter-spacing:.05em}.form-control{width:100%;padding:.75rem 1rem;background:var(--bg-tertiary);border:1px solid var(--card-border);border-radius:8px;color:var(--text-main);font-family:var(--font-body);font-size:.95rem;transition:all var(--transition-speed) ease}.form-control:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 10px #00e5ff33}.navbar{display:flex;justify-content:space-between;align-items:center;padding:1rem 2rem;background:#0a0e17cc;border-bottom:1px solid var(--card-border);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);position:sticky;top:0;z-index:100}.navbar-brand{font-family:var(--font-heading);font-weight:800;font-size:1.4rem;background:linear-gradient(135deg,var(--color-primary),var(--color-secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;display:flex;align-items:center;gap:.5rem}.navbar-user{display:flex;align-items:center;gap:1.5rem}.user-badge{font-size:.85rem;padding:.25rem .75rem;border-radius:20px;font-weight:600;text-transform:uppercase;letter-spacing:.03em}.badge-teacher{background:#7c4dff26;color:#b39ddb;border:1px solid rgba(124,77,255,.3)}.badge-student{background:#00e5ff26;color:#80deea;border:1px solid rgba(0,229,255,.3)}.table-container{overflow-x:auto;margin-top:1rem}.premium-table{width:100%;border-collapse:collapse;text-align:left}.premium-table th{padding:1rem;background:#ffffff08;color:var(--text-muted);font-family:var(--font-heading);font-weight:600;font-size:.85rem;text-transform:uppercase;letter-spacing:.05em;border-bottom:2px solid var(--card-border)}.premium-table td{padding:1rem;border-bottom:1px solid var(--card-border);font-size:.95rem}.premium-table tr:hover td{background:#ffffff03}.auth-container{display:flex;justify-content:center;align-items:center;min-height:calc(100vh - 70px);padding:2rem}.auth-card{width:100%;max-width:450px}.auth-toggle{display:flex;background:var(--bg-primary);padding:.3rem;border-radius:8px;border:1px solid var(--card-border);margin-bottom:1.5rem}.auth-toggle-btn{flex:1;padding:.5rem;border:none;background:transparent;color:var(--text-muted);font-family:var(--font-heading);font-weight:600;font-size:.85rem;border-radius:6px;cursor:pointer;transition:all .2s ease}.auth-toggle-btn.active{background:var(--bg-tertiary);color:var(--text-main);box-shadow:0 2px 10px #0003}.dashboard-container{max-width:1200px;margin:2rem auto;padding:0 1.5rem}.dashboard-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem}.dashboard-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem;margin-bottom:2rem}.ireal-container{background:#fff!important;padding:2rem!important;border-radius:var(--border-radius);box-shadow:0 10px 30px #00000080;margin:1.5rem 0;overflow-x:auto}.ireal-renderer{font-size:1.1em}.chord-grid-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.chord-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:1.5rem}.chord-cell{background:var(--bg-secondary);border:2px solid var(--card-border);border-radius:8px;padding:1.25rem 1rem;text-align:center;position:relative;transition:all .2s ease}.chord-cell.active{border-color:var(--color-primary);box-shadow:0 0 15px var(--color-primary-glow);transform:scale(1.03)}.chord-cell.graded-success{background:#00e67614;border-color:var(--color-success)}.chord-cell.graded-error{background:#ff174414;border-color:var(--color-error)}.chord-name{font-family:var(--font-heading);font-weight:700;font-size:1.3rem;color:var(--text-main)}.chord-info{font-size:.75rem;color:var(--text-muted);margin-top:.25rem}.chord-cell-error-detail{position:absolute;bottom:2px;left:0;right:0;font-size:.65rem;color:var(--color-error);font-weight:600}.piano-container{background:var(--bg-secondary);border:1px solid var(--card-border);border-radius:var(--border-radius);padding:1.5rem;box-shadow:0 8px 30px #0006;margin:1.5rem 0}.piano-wrapper{overflow-x:auto;overflow-y:hidden;padding-bottom:8px;scrollbar-width:thin;scrollbar-color:rgba(0,229,255,.3) transparent}.piano-legend{margin-top:1rem;padding:.75rem 1rem;background:#ffffff08;border:1px solid var(--card-border);border-radius:8px}.piano-legend-row{display:flex;align-items:center;flex-wrap:wrap;gap:4px;margin-bottom:.5rem}.legend-key{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:5px;font-family:var(--font-heading);font-weight:700;font-size:.8rem;letter-spacing:0;cursor:default;border:2px solid}.white-key-legend{background:#f0f0f0;color:#222;border-color:#aaa}.black-key-legend{background:#1a1f2a;color:#e0e0e0;border-color:#444}.legend-sep{font-size:.7rem;color:var(--text-muted);white-space:nowrap;padding:0 2px}.piano-legend-hint{font-size:.78rem;color:var(--text-muted);text-align:center}@keyframes pulse{0%,to{opacity:1}50%{opacity:.4}}.ReactPiano__Key--natural{background:#fdfdfd!important;border:1px solid #c5c5c5!important;border-radius:0 0 4px 4px!important;height:180px!important}.ReactPiano__Key--natural:hover{background:#f0f0f0!important}.ReactPiano__Key--natural.ReactPiano__Key--active{background:#e0f7fa!important;border-color:var(--color-primary)!important;box-shadow:inset 0 -15px 0 var(--color-primary-glow)!important}.ReactPiano__Key--accidental{background:#11151c!important;border:1px solid #000!important;border-radius:0 0 3px 3px!important}.ReactPiano__Key--accidental:hover{background:#1e2430!important}.ReactPiano__Key--accidental.ReactPiano__Key--active{background:#00838f!important;box-shadow:inset 0 -10px 0 var(--color-primary-glow)!important}.piano-key-label{position:absolute;bottom:8px;left:50%;transform:translate(-50%);font-size:.75rem;font-weight:700;color:#37474f;pointer-events:none;background:#ffffffb3;padding:1px 4px;border-radius:3px;z-index:10}.ReactPiano__Key--accidental .piano-key-label{color:#e0e0e0;background:#0009;bottom:8px}.metronome-visualizer{display:flex;gap:15px;justify-content:center;margin:1.5rem 0}.metronome-beat{width:25px;height:25px;border-radius:50%;border:2px solid var(--card-border);background:transparent;transition:all .1s ease}.metronome-beat.active{background:var(--color-primary);box-shadow:0 0 15px var(--color-primary-glow);transform:scale(1.2);border-color:var(--color-primary)}midi-player{display:block;width:100%;max-width:450px;margin:1rem auto 0;border:1px solid var(--card-border)!important;border-radius:8px!important;background:var(--bg-primary)!important;box-shadow:inset 0 2px 5px #0006!important;padding:6px!important;--player-background: var(--bg-primary) !important;--player-color: var(--color-primary) !important;--seeker-color: var(--color-primary) !important;--seeker-track-color: rgba(255, 255, 255, .08) !important}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#070a0fd9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .3s ease}.modal-content{background:var(--bg-secondary);border:1px solid var(--card-border);border-radius:var(--border-radius);width:100%;max-width:550px;padding:2.5rem;box-shadow:0 15px 40px #0009;position:relative;text-align:center;animation:scaleUp .3s cubic-bezier(.34,1.56,.64,1)}.score-badge-large{width:100px;height:100px;border-radius:50%;margin:1.5rem auto;display:flex;align-items:center;justify-content:center;font-family:var(--font-heading);font-size:2.2rem;font-weight:800;box-shadow:0 0 25px #00e5ff66;border:4px solid var(--color-primary);color:var(--color-primary)}.score-badge-large.success{border-color:var(--color-success);color:var(--color-success);box-shadow:0 0 25px #00e67666}.score-badge-large.warning{border-color:#ffb300;color:#ffb300;box-shadow:0 0 25px #ffb30066}.score-badge-large.error{border-color:var(--color-error);color:var(--color-error);box-shadow:0 0 25px #ff174466}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes scaleUp{0%{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}.exercise-container{max-width:1000px;margin:2rem auto;padding:0 1.5rem}.exercise-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:1.5rem}.status-badge{padding:.4rem 1rem;border-radius:20px;font-size:.85rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;border:1px solid transparent}.status-idle{background:#ffffff0d;color:var(--text-muted);border-color:var(--card-border)}.status-counting{background:#ffb30026;color:#ffb300;border-color:#ffb3004d}.status-playing{background:#00e5ff26;color:var(--color-primary);border-color:#00e5ff4d}.status-finished{background:#7c4dff26;color:var(--color-secondary);border-color:#7c4dff4d}.status-submitted{background:#00e67626;color:var(--color-success);border-color:#00e6764d}.info-row{display:flex;justify-content:space-between;padding:.5rem 0;border-bottom:1px solid var(--card-border)}.info-row:last-child{border-bottom:none}.info-label{color:var(--text-muted);font-size:.9rem}.info-value{font-weight:600;font-size:.9rem}.segmented-control{display:flex;background:var(--bg-primary);border:1px solid var(--card-border);padding:2px;border-radius:8px}.segmented-control button{flex:1;background:transparent;border:none;padding:.5rem;color:var(--text-muted);font-family:var(--font-heading);font-size:.85rem;font-weight:600;border-radius:6px;cursor:pointer;transition:all .2s ease}.segmented-control button.active{background:var(--bg-tertiary);color:var(--color-primary);box-shadow:0 2px 6px #0000004d}.errors-log-container{margin:1.5rem 0}.errors-log-list{display:flex;flex-direction:column;gap:8px;max-height:250px;overflow-y:auto;padding-right:5px}.log-item{background:#ffffff08;border:1px solid var(--card-border);border-radius:6px;padding:.75rem 1rem;display:flex;justify-content:space-between;align-items:center;font-size:.9rem}.log-item.hit{border-left:4px solid var(--color-success)}.log-item.miss{border-left:4px solid var(--color-error);background:#ff17440d}.log-item .time-diff{color:var(--text-muted);font-size:.9rem}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--bg-primary)}::-webkit-scrollbar-thumb{background:var(--bg-tertiary);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#ffffff26}@media (max-width: 850px){.navbar{flex-direction:column;gap:.75rem;padding:1rem;text-align:center}.navbar-brand{justify-content:center;width:100%}.navbar-user{flex-wrap:wrap;justify-content:center;gap:.75rem;width:100%;margin-top:.25rem}.dashboard-header,.exercise-header{flex-direction:column;align-items:center;text-align:center;gap:1rem}}@media (max-width: 700px){.premium-table,.premium-table thead,.premium-table tbody,.premium-table th,.premium-table td,.premium-table tr{display:block}.premium-table thead{display:none}.premium-table tr{background:#ffffff05;border:1px solid var(--card-border);border-radius:8px;padding:.75rem 1rem;margin-bottom:.75rem}.premium-table td{display:flex;justify-content:space-between;align-items:center;padding:.5rem 0;border-bottom:1px dashed rgba(255,255,255,.05);font-size:.9rem;text-align:right}.premium-table td:last-child{border-bottom:none;margin-top:.5rem;justify-content:flex-end}.premium-table td:before{content:attr(data-label);float:left;font-weight:600;color:var(--text-muted);text-transform:uppercase;font-size:.75rem;letter-spacing:.05em;margin-right:1rem;text-align:left}}@media (max-width: 600px){.chord-grid{display:flex;overflow-x:auto;gap:10px;padding:.5rem .25rem;scrollbar-width:thin;scrollbar-color:var(--color-primary) transparent}.chord-cell{flex:0 0 160px;min-width:160px}}@media (max-width: 480px){.dashboard-container{margin:1rem auto;padding:0 1rem}.dashboard-grid{grid-template-columns:1fr;gap:1rem}}.ReactPiano__Keyboard{position:relative;display:flex}.ReactPiano__Key{display:flex}.ReactPiano__Key--accidental{background:#555;border:1px solid #fff;border-top:1px solid transparent;border-radius:0 0 4px 4px;cursor:pointer;height:66%;z-index:1;position:absolute;top:0}.ReactPiano__Key--natural{background:#f6f5f3;border:1px solid #888;border-radius:0 0 6px 6px;cursor:pointer;z-index:0;flex:1;margin-right:1px}.ReactPiano__Key--natural:last-child{margin-right:0}.ReactPiano__Key--active{background:#3ac8da}.ReactPiano__Key--active.ReactPiano__Key--accidental{border:1px solid #fff;border-top:1px solid #3ac8da;height:65%}.ReactPiano__Key--active.ReactPiano__Key--natural{border:1px solid #3ac8da;height:98%}.ReactPiano__Key--disabled.ReactPiano__Key--accidental{background:#ddd;border:1px solid #999}.ReactPiano__Key--disabled.ReactPiano__Key--natural{background:#eee;border:1px solid #aaa}.ReactPiano__NoteLabelContainer{flex:1;align-self:flex-end}.ReactPiano__NoteLabel{font-size:12px;text-align:center;text-transform:capitalize;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.ReactPiano__NoteLabel--accidental{color:#f8e8d5;margin-bottom:3px}.ReactPiano__NoteLabel--natural{color:#888;margin-bottom:3px}.ReactPiano__NoteLabel--natural.ReactPiano__NoteLabel--active{color:#f8e8d5}