*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
[data-theme="light"]{--bg:#fff;--bg-card:#fafafa;--bg-elevated:#f5f5f5;--accent:#8bc34a;--accent-soft:rgba(139,195,74,.12);--text:#333;--text-secondary:#666;--text-muted:#999;--border:rgba(0,0,0,.08);--shadow:0 1px 8px rgba(0,0,0,.04)}
[data-theme="dark"]{--bg:#1a1a2e;--bg-card:#252540;--bg-elevated:#2e2e4a;--accent:#8bc34a;--accent-soft:rgba(139,195,74,.15);--text:#e8e8f0;--text-secondary:#b0b0c8;--text-muted:#7878a0;--border:rgba(255,255,255,.08);--shadow:0 1px 8px rgba(0,0,0,.2)}
:root{--font:'Noto Sans JP','Inter',-apple-system,sans-serif;--radius:10px;--radius-sm:8px}
html{font-size:14px}body{font-family:var(--font);background:var(--bg);color:var(--text);min-height:100vh;line-height:1.8;transition:background .3s,color .3s}
.app{max-width:520px;margin:0 auto;padding:0 16px 40px}
.app-header{text-align:center;padding:16px 0 10px}
.header-row{display:flex;align-items:center;justify-content:center;gap:12px;position:relative}
.app-header h1{font-size:1.3rem;font-weight:900}.app-header h1 i{color:var(--accent);margin-right:4px}
.accent{color:var(--accent)}
.theme-toggle{position:absolute;right:0;top:50%;transform:translateY(-50%);width:34px;height:34px;border:1px solid var(--border);border-radius:50%;background:var(--bg-card);color:var(--text-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:.85rem;transition:all .2s}
.theme-toggle:hover{color:var(--accent);border-color:var(--accent)}
.tab-bar{display:flex;gap:4px;margin-bottom:14px;background:var(--bg-card);padding:3px;border-radius:var(--radius-sm);border:1px solid var(--border)}
.tab{flex:1;padding:8px;border:none;border-radius:var(--radius-sm);background:transparent;font-family:var(--font);font-size:.8rem;font-weight:600;cursor:pointer;color:var(--text-secondary);transition:all .2s}
.tab i{margin-right:3px}
.tab.active{background:var(--accent);color:#fff}
.view{display:none}.view.active{display:block}
.mode-settings{background:var(--bg-card);border-radius:var(--radius-sm);padding:12px;margin-bottom:12px;border:1px solid var(--border)}
.setting-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}.setting-row:last-child{margin-bottom:0}
.setting-row label{font-size:.82rem;font-weight:600;color:var(--text-secondary)}
.setting-row select{padding:6px 10px;border:1px solid var(--border);border-radius:var(--radius-sm);font-family:var(--font);font-size:.82rem;font-weight:600;background:var(--bg-elevated);color:var(--text);outline:none}
.ear-play-area{text-align:center;margin-bottom:14px}
.btn-play{padding:14px 28px;border:none;border-radius:30px;background:var(--accent);color:#fff;font-family:var(--font);font-size:1rem;font-weight:800;cursor:pointer;transition:all .2s;margin-bottom:6px}
.btn-play i{margin-right:4px}
.btn-play:hover{opacity:.9}.btn-play.small{padding:8px 18px;font-size:.85rem}
.ear-question{font-size:.82rem;color:var(--text-muted);font-weight:600}
.note-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:12px}
.note-btn{padding:12px 6px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-card);font-family:var(--font);font-size:1rem;font-weight:800;cursor:pointer;transition:all .2s;color:var(--text);text-align:center}
.note-btn:hover{border-color:var(--accent);background:var(--accent-soft)}
.note-btn.correct{background:rgba(139,195,74,.2);border-color:#8bc34a;color:#4a7a20}
.note-btn.wrong{background:rgba(231,76,60,.15);border-color:#e74c3c;color:#c0392b}
.ear-feedback{text-align:center;padding:12px;animation:popIn .3s ease}
@keyframes popIn{from{transform:scale(.85);opacity:0}to{transform:scale(1);opacity:1}}
.feedback-icon{font-size:2rem;margin-bottom:2px}
.feedback-text{font-size:1rem;font-weight:800}
.ear-score{text-align:center;font-size:.88rem;font-weight:600;color:var(--text-secondary);padding:10px;background:var(--bg-card);border-radius:var(--radius-sm);border:1px solid var(--border)}
.staff-container{background:var(--bg-card);border-radius:var(--radius);padding:14px;margin-bottom:10px;text-align:center;border:1px solid var(--border)}
.staff-container canvas{max-width:100%;height:auto}
.stats-card{background:var(--bg-card);border-radius:var(--radius);padding:20px;border:1px solid var(--border)}
.stats-card h2{font-size:1rem;font-weight:700;margin-bottom:14px}.stats-card h2 i{color:var(--accent);margin-right:4px}
.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.stat-item{text-align:center;padding:12px;background:var(--bg-elevated);border-radius:var(--radius-sm)}
.stat-num{font-size:1.5rem;font-weight:900;color:var(--accent)}
.stat-label{font-size:.72rem;font-weight:600;color:var(--text-muted)}
.hidden{display:none!important}