:root{--blue: #2E5AA8;--blue-2: #1B3D78;--gold: #E0A53C;--gold-2: #B07D1E;--rose: #E5707E;--rose-2: #C24858;--bg: #EEF3FA;--surface: #F4F8FD;--card: #FFFFFF;--ink: #1B2A45;--ink-soft: #5E6E89;--line: #DCE6F2;--ok: #2E9E7B;--warn: var(--gold);--err: #D9534F;--s1: 4px;--s2: 8px;--s3: 16px;--s4: 24px;--s5: 32px;--r-sm: 10px;--r-md: 14px;--r-lg: 22px;--shadow-card: 0 4px 18px rgba(27, 61, 120, .08);--shadow-hover: 0 10px 30px rgba(27, 61, 120, .16);--fz-1: 12px;--fz-2: 14px;--fz-3: 16px;--fz-4: 20px;--fz-5: 30px;--motion-fast: .12s;--motion-base: .2s;--motion-slow: .32s;--ease: cubic-bezier(.4, 0, .2, 1);--cream: var(--bg);--amber: var(--gold);--amber-2: var(--gold-2);--terra: var(--rose);--esp: var(--ink)}:root[data-theme=dark]{--bg: #121A28;--surface: #1A2434;--card: #1F2A3C;--ink: #E7EDF6;--ink-soft: #97A7C2;--line: #2C3850;--cream: var(--bg);--esp: var(--ink)}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{font-family:system-ui,-apple-system,Segoe UI,Microsoft YaHei,sans-serif;font-size:var(--fz-3);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased}a{color:var(--blue);text-decoration:none}.app{min-height:100%;display:flex;flex-direction:column}.topbar{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4);background:var(--blue);border-bottom:3px solid var(--gold);position:sticky;top:0;z-index:10;box-shadow:0 2px 16px #1b3d7838}.brand{font-weight:700;color:#fff;font-size:var(--fz-4);letter-spacing:.5px;display:flex;align-items:center;gap:8px}.brand:before{content:"♪";color:var(--gold);font-size:1.25em;line-height:1}.brand small{color:#c9d8ef;font-weight:400;font-size:var(--fz-1);margin-left:2px}.nav{display:flex;gap:var(--s2);margin-left:auto;flex-wrap:wrap}.nav a{padding:var(--s1) var(--s3);border-radius:999px;color:#dce7f6;font-weight:500;transition:background var(--motion-fast),color var(--motion-fast)}.nav a:hover{background:#ffffff24;color:#fff}.nav a.active{background:var(--gold);color:#3a2600}.page{padding:var(--s4);max-width:1100px;width:100%;margin:0 auto;flex:1}.h1{font-size:var(--fz-5);font-weight:700;margin:0 0 var(--s3);color:var(--blue-2)}.muted{color:var(--ink-soft)}.card{background:var(--card);border-radius:var(--r-lg);box-shadow:var(--shadow-card);padding:var(--s4);margin-bottom:var(--s3);border:1px solid var(--line)}.grid{display:grid;gap:var(--s3);grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}a.card{display:block;position:relative;padding:var(--s3) 56px var(--s3) var(--s4);transition:transform var(--motion-fast),box-shadow var(--motion-fast),border-color var(--motion-fast)}a.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-hover);border-color:var(--blue)}a.card b{color:var(--blue-2);font-size:var(--fz-3)}a.card .muted{margin-top:4px;font-size:var(--fz-1)}a.card:after{content:"▶";position:absolute;top:var(--s3);right:var(--s3);width:32px;height:32px;border-radius:50%;background:var(--gold);color:#3a2600;display:flex;align-items:center;justify-content:center;font-size:11px;padding-left:2px;transition:transform var(--motion-fast),background var(--motion-fast),color var(--motion-fast)}a.card:hover:after{transform:scale(1.14);background:var(--gold-2);color:#fff}.btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;cursor:pointer;min-height:46px;padding:0 var(--s4);border-radius:999px;font-size:var(--fz-3);font-weight:600;background:var(--gold);color:#3a2600;box-shadow:0 3px 12px #e0a53c52;transition:transform var(--motion-fast),background var(--motion-fast),color var(--motion-fast)}.btn:hover{background:var(--gold-2);color:#fff}.btn:active{transform:scale(.97)}.btn.secondary{background:transparent;color:var(--blue);border:2px solid var(--blue);box-shadow:none}.btn.secondary:hover{background:var(--blue);color:#fff}.btn.ghost{background:transparent;color:var(--ink-soft);box-shadow:none}.btn.ghost:hover{background:var(--surface);color:var(--ink)}.dot{display:inline-flex;align-items:center;gap:var(--s1);font-size:var(--fz-2);color:var(--ink-soft)}.dot:before{content:"";width:10px;height:10px;border-radius:50%;background:var(--ok)}.dot.warn:before{background:var(--warn)}.dot.err:before{background:var(--err)}.staff-wrap{position:relative;background:#fff;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-card)}.staff-img{width:100%;display:block}.bar-hl{position:absolute;border:2.5px solid var(--gold-2);background:var(--gold);opacity:.26;border-radius:var(--r-sm);transition:left var(--motion-base) var(--ease),top var(--motion-base) var(--ease),width var(--motion-base) var(--ease),height var(--motion-base) var(--ease);pointer-events:none}.bar-hl.lh{border-color:var(--rose-2);background:var(--rose)}.controls{display:flex;gap:var(--s2);flex-wrap:wrap;margin-top:var(--s3)}.statusbar{display:flex;gap:var(--s3);align-items:center;flex-wrap:wrap;margin-top:var(--s2);padding:var(--s2) var(--s3);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md)}.undo-zone{position:fixed;left:0;right:0;bottom:0;height:40vh;background:linear-gradient(to top,rgba(229,112,126,.16),transparent);display:flex;align-items:flex-end;justify-content:center;padding-bottom:var(--s4)}.inp{min-height:44px;padding:0 14px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--card);color:var(--ink);font-size:var(--fz-3)}.inp:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px #2e5aa826}.todo{color:var(--rose-2);font-size:var(--fz-2)}.empty{text-align:center;color:var(--ink-soft);padding:var(--s5)}table th{color:var(--ink-soft)}table td{border-top:1px solid var(--line)}ul{padding-left:var(--s4)}li{margin:var(--s1) 0}