:root{--cream: #FAF4E4;--amber: #DFA63C;--amber-2: #BC7C1E;--terra: #A8552A;--esp: #3A2D1F;--card: #FFFDF7;--ok: #5B8C5A;--warn: var(--amber);--err: #C0492F;--s1: 4px;--s2: 8px;--s3: 16px;--s4: 24px;--s5: 32px;--r-sm: 8px;--r-md: 12px;--r-lg: 20px;--shadow-card: 0 2px 12px rgba(58, 45, 31, .1);--fz-1: 12px;--fz-2: 14px;--fz-3: 16px;--fz-4: 20px;--fz-5: 28px;--motion-fast: .12s;--motion-base: .2s;--motion-slow: .32s;--ease: cubic-bezier(.4, 0, .2, 1)}:root[data-theme=dark]{--cream: #241C13;--card: #2E2417;--esp: #F3E9D6}*{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(--esp);background:var(--cream)}a{color:var(--amber-2);text-decoration:none}.app{min-height:100%;display:flex;flex-direction:column}.topbar{display:flex;align-items:center;gap:var(--s3);padding:var(--s2) var(--s4);background:var(--card);box-shadow:var(--shadow-card);position:sticky;top:0;z-index:10}.brand{font-weight:700;color:var(--amber-2);font-size:var(--fz-4)}.brand small{color:var(--esp);opacity:.6;font-weight:400;font-size:var(--fz-1)}.nav{display:flex;gap:var(--s3);margin-left:auto;flex-wrap:wrap}.nav a{padding:var(--s1) var(--s2);border-radius:var(--r-sm)}.nav a.active{background:var(--amber);color:#fff}.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)}.muted{color:var(--esp);opacity:.6}.card{background:var(--card);border-radius:var(--r-md);box-shadow:var(--shadow-card);padding:var(--s4);margin-bottom:var(--s3)}.grid{display:grid;gap:var(--s3);grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}.btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;cursor:pointer;min-height:44px;padding:0 var(--s4);border-radius:var(--r-sm);font-size:var(--fz-3);font-weight:600;background:var(--amber);color:#fff}.btn.secondary{background:transparent;color:var(--amber-2);border:1.5px solid var(--amber)}.btn.ghost{background:transparent;color:var(--esp)}.dot{display:inline-flex;align-items:center;gap:var(--s1);font-size:var(--fz-2)}.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-md);overflow:hidden}.staff-img{width:100%;display:block}.bar-hl{position:absolute;border:2px solid var(--amber-2);background:var(--amber);opacity:.2;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(--terra);background:var(--terra)}.controls{display:flex;gap:var(--s2);flex-wrap:wrap;margin-top:var(--s3)}.statusbar{display:flex;gap:var(--s4);align-items:center;margin-top:var(--s2);flex-wrap:wrap}.undo-zone{position:fixed;left:0;right:0;bottom:0;height:40vh;background:linear-gradient(to top,rgba(192,73,47,.12),transparent);display:flex;align-items:flex-end;justify-content:center;padding-bottom:var(--s4)}.todo{color:var(--terra);font-size:var(--fz-2)}.empty{text-align:center;color:var(--esp);opacity:.55;padding:var(--s5)}