:root{--bg: #faf8f4;--ink: #1c1a17;--ink-soft: #332f29;--ink-mid: #4a443c;--text-dim: #6b655c;--text-faint: #8c857b;--text-ghost: #a9a29a;--text-mist: #b5aea5;--border: #e8e3db;--border-soft: #f0ebe3;--border-hover: #c9beae;--border-hover-soft: #d6cdc0;--border-dashed: #ddd5c9;--card: #ffffff;--card-warm: #fdfbf8;--card-hover: #fffdfa;--wash: #f1ebe2;--wash-deep: #f6f0e7;--accent: #9c6b3e;--accent-deep: #7c5230;--accent-soft: #dcc9b4;--accent-tag-bg: #efe7db;--accent-tag-fg: #8a7355;--notes-fg: #a08a6c;--danger: #a8543c;--danger-border: #e0bdb2;--danger-bg: #fdf6f4;--dot-off: #e4ded4;--font-sans: "Instrument Sans", system-ui, sans-serif;--font-mono: "JetBrains Mono", monospace;--sidebar-w: 248px;--tabbar-h: 62px;--radius-card: 14px;--radius-tile: 12px;--radius-input: 9px;--shadow-seg: 0 1px 3px rgba(28, 26, 23, .14);--shadow-card-hover: 0 6px 20px -12px rgba(28, 26, 23, .25);--shadow-modal: 0 30px 70px -30px rgba(28, 26, 23, .55)}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-sans);-webkit-font-smoothing:antialiased}a{color:var(--accent);text-decoration:none}a:hover{color:var(--accent-deep)}input,select,textarea,button{font:inherit;color:inherit}input:focus,textarea:focus,select:focus{outline:2px solid var(--accent-soft);outline-offset:1px}::placeholder{color:var(--text-ghost)}button{cursor:pointer}@keyframes rise{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}@keyframes fade{0%{opacity:0}to{opacity:1}}.app{display:flex;align-items:flex-start;min-height:100vh}.main{flex:1;min-width:0;padding:44px 52px 96px;max-width:1240px}.page{animation:rise .35s ease both}.sidebar{position:sticky;top:0;flex:0 0 var(--sidebar-w);height:100vh;padding:30px 20px 24px;border-right:1px solid var(--border);display:flex;flex-direction:column;gap:28px;background:var(--bg)}.sidebar-brand{display:flex;align-items:center;gap:11px;padding:0 8px}.sidebar-logo{width:28px;height:28px;border-radius:8px;background:var(--ink);display:grid;grid-template-columns:repeat(3,3px);grid-template-rows:repeat(3,3px);gap:3px;align-content:center;justify-content:center}.sidebar-logo span{width:3px;height:3px;border-radius:50%}.sidebar-title{font-size:15px;font-weight:600;letter-spacing:-.01em}.sidebar-nav{display:flex;flex-direction:column;gap:2px}.nav-item{display:flex;align-items:center;gap:10px;width:100%;padding:9px 12px;border:0;border-radius:9px;background:transparent;color:var(--text-dim);font-size:14px;text-align:left}.nav-item:hover{background:var(--wash)}.nav-item.active{background:var(--wash);color:var(--ink);font-weight:500}.nav-item .nav-label{flex:1}.nav-item .nav-count{font-family:var(--font-mono);font-size:11px;color:var(--text-ghost)}.sidebar-footer{margin-top:auto;display:flex;flex-direction:column;gap:14px}.streak{padding:0 4px;font-family:var(--font-mono);font-size:10px;line-height:1.7;color:var(--text-mist);letter-spacing:.04em;white-space:pre-line}.bottom-tabs,.fab{display:none}.mono-label{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-ghost)}.kicker{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-ghost)}.page-title{margin:10px 0 0;font-size:32px;font-weight:600;letter-spacing:-.025em}.glyph{position:relative;flex:0 0 auto;display:inline-block}.glyph span{position:absolute;border-radius:50%}.type-badge{border-radius:7px;position:relative;flex:0 0 auto;display:inline-block}.type-badge .glyph{position:absolute}.dots{display:inline-flex;gap:4px;align-items:center}.dots span{border-radius:50%}.btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 14px;border:0;border-radius:10px;background:var(--ink);color:var(--bg);font-size:14px;font-weight:500}.btn-primary:hover{background:var(--ink-soft)}.btn-secondary{padding:9px 15px;border:1px solid var(--border);border-radius:var(--radius-input);background:var(--card);font-size:13px}.btn-secondary:hover{border-color:var(--border-hover)}.btn-danger{padding:9px 15px;border:1px solid var(--border);border-radius:var(--radius-input);background:var(--card);font-size:13px;color:var(--danger)}.btn-danger:hover{border-color:var(--danger-border);background:var(--danger-bg)}.btn-mini{padding:5px 10px;border:1px solid var(--border);border-radius:7px;background:var(--card-warm);font-size:12px}.btn-mini:hover{border-color:var(--border-hover)}.chip{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border:1px solid var(--border);border-radius:20px;background:var(--card);color:var(--ink-mid);font-size:13px}.chip.active{background:var(--ink);color:var(--bg);border-color:var(--ink)}.chip .chip-count{font-family:var(--font-mono);font-size:10px;opacity:.6}.chip.mono{padding:5px 11px;font-family:var(--font-mono);font-size:11px;letter-spacing:.04em}.chip-row{display:flex;flex-wrap:wrap;gap:6px}.seg{display:inline-flex;padding:3px;background:var(--wash);border-radius:10px}.seg button{padding:7px 13px;border:0;border-radius:8px;font-size:13px;background:transparent;color:var(--text-faint);box-shadow:none}.seg button.active{background:var(--card);color:var(--ink);box-shadow:var(--shadow-seg)}.text-input{width:100%;padding:11px 13px;border:1px solid var(--border);border-radius:var(--radius-input);background:var(--card-warm);font-size:14px}textarea.text-input{line-height:1.55;resize:vertical;font-family:inherit}.field-label{display:block;font-size:13px;font-weight:500;margin-bottom:7px}.empty-dashed{padding:48px 24px;text-align:center;border:1px dashed var(--border-dashed);border-radius:var(--radius-card);color:var(--text-faint);font-size:14px}.card-row{display:flex;align-items:center;gap:16px;width:100%;padding:15px 18px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius-tile);text-align:left}.card-row:hover{border-color:var(--border-hover-soft);background:var(--card-hover)}.card-row .row-title{display:block;font-size:15px;font-weight:500}.card-row .row-meta{display:block;margin-top:2px;font-size:13px;color:var(--text-faint)}.card-row .row-mastery{font-size:13px;color:var(--text-dim);width:108px;text-align:right}.tile{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:16px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius-tile);text-align:left}.tile:hover{border-color:var(--border-hover-soft);transform:translateY(-1px)}.type-label{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase}.album-card{display:flex;flex-direction:column;align-items:stretch;padding:0;background:var(--card);border:1px solid var(--border);border-radius:var(--radius-card);text-align:left;overflow:hidden}.album-card:hover{border-color:var(--border-hover);box-shadow:var(--shadow-card-hover)}.album-card .album-head{display:flex;align-items:center;gap:8px;padding:14px 16px 0}.album-card .album-body{display:block;padding:12px 16px 14px}.album-card .album-title{display:block;font-size:17px;font-weight:600;letter-spacing:-.015em;line-height:1.25}.album-card .album-meta{display:block;margin-top:4px;font-size:13px;color:var(--text-faint);line-height:1.45}.album-card .album-foot{display:flex;align-items:center;gap:10px;margin-top:auto;padding:11px 16px;border-top:1px solid var(--border-soft);background:var(--card-warm)}.index-table{border:1px solid var(--border);border-radius:var(--radius-card);overflow:hidden;background:var(--card)}.index-head,.index-row{display:grid;grid-template-columns:1fr 116px 150px 92px 96px;gap:16px;align-items:center;padding:13px 18px}.index-head{padding:10px 18px;background:var(--card-warm);border-bottom:1px solid var(--border);font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-ghost)}.index-row{width:100%;border:0;border-bottom:1px solid var(--border-soft);background:var(--card);text-align:left}.index-row:hover{background:var(--card-warm)}.detail-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(300px,1fr);gap:40px;padding-top:28px;align-items:start}@media (max-width: 960px){.detail-grid{grid-template-columns:1fr;gap:30px}}.pwa-toast{position:fixed;right:20px;bottom:20px;z-index:50;display:flex;align-items:center;gap:14px;max-width:360px;padding:13px 14px 13px 16px;background:var(--ink);color:var(--bg);border-radius:12px;font-size:13px;box-shadow:var(--shadow-modal);animation:rise .25s ease both}.pwa-toast .pwa-toast-actions{display:flex;align-items:center;gap:6px;flex:0 0 auto}.pwa-toast .btn-mini{border-color:transparent;background:var(--bg);color:var(--ink)}.pwa-toast .btn-mini:hover{border-color:transparent;background:var(--card-warm)}@media (max-width: 767px){.pwa-toast{left:18px;right:18px;max-width:none;bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom,0px) + 16px)}}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#1c1a1752;display:flex;align-items:center;justify-content:center;padding:40px;z-index:40;animation:fade .2s ease both}.modal{width:100%;max-width:520px;max-height:82vh;display:flex;flex-direction:column;background:var(--bg);border-radius:16px;box-shadow:var(--shadow-modal);overflow:hidden}@media (max-width: 767px){.sidebar{display:none}.main{padding:24px 18px calc(var(--tabbar-h) + 84px)}.bottom-tabs{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;height:calc(var(--tabbar-h) + env(safe-area-inset-bottom,0px));padding-bottom:env(safe-area-inset-bottom,0px);background:var(--bg);border-top:1px solid var(--border)}.bottom-tabs .tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;border:0;background:none;font-size:11px;color:var(--text-dim)}.bottom-tabs .tab.active{color:var(--ink);font-weight:500}.fab{position:fixed;right:18px;bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom,0px) + 16px);z-index:30;display:flex;align-items:center;justify-content:center;width:54px;height:54px;border:0;border-radius:16px;background:var(--ink);color:var(--bg);font-size:26px;line-height:1;box-shadow:0 10px 24px -10px #1c1a1780}.page-title{font-size:26px}.seg{max-width:100%;overflow-x:auto}.seg button{white-space:nowrap}.card-row .row-mastery{display:none}.index-head,.index-row{grid-template-columns:1fr 130px}.index-head span:nth-child(n+3),.index-row>*:nth-child(n+3){display:none}.modal-overlay{padding:12px;align-items:flex-end}.modal{max-height:92vh}}