:root{color:#22312d;background:#f4f0e8;font-family:Inter,SF Pro Display,Segoe UI,Microsoft YaHei,system-ui,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;--paper: #fffdf8;--ink: #22312d;--muted: #6c736f;--line: #ddd6ca;--green: #4f8f61;--green-dark: #2f6848;--amber: #c9872b;--rose: #b45858;--blue: #496f8f;--shadow: 0 18px 45px rgba(34, 49, 45, .1)}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;overflow-x:hidden}#root{min-width:0;overflow-x:hidden}button,input{font:inherit}button,.file-button{align-items:center;background:var(--ink);border:1px solid var(--ink);border-radius:8px;color:#fffdf8;cursor:pointer;display:inline-flex;font-weight:700;gap:8px;justify-content:center;min-height:42px;padding:10px 14px;transition:background .16s ease,border-color .16s ease,transform .16s ease}button:hover,.file-button:hover{background:#344740;border-color:#344740;transform:translateY(-1px)}button:disabled{cursor:not-allowed;opacity:.55;transform:none}input{background:#fff;border:1px solid var(--line);border-radius:8px;color:var(--ink);min-height:42px;padding:10px 12px;width:100%}input:focus{border-color:var(--green);outline:3px solid rgba(79,143,97,.18)}.app-shell{min-height:100vh;min-width:0;overflow-x:hidden;padding-bottom:220px}.app-shell.player-is-collapsed{padding-bottom:84px}.topbar,.content{margin:0 auto;max-width:1160px;width:min(100%,1160px)}.topbar{align-items:center;display:flex;justify-content:space-between;padding:28px 20px 16px}.eyebrow,.label{color:var(--green-dark);font-size:13px;font-weight:800;letter-spacing:0;margin:0 0 5px;text-transform:uppercase}h1,h2,p{margin-top:0}h1{font-size:30px;letter-spacing:0;line-height:1.1;margin-bottom:0}h2{font-size:18px;letter-spacing:0;line-height:1.2;margin-bottom:0}.content{display:grid;gap:16px;min-width:0;padding:0 20px 32px}.hero-panel,.panel{background:var(--paper);border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow);min-width:0}.hero-panel{align-items:center;display:grid;gap:18px;grid-template-columns:minmax(0,1fr) auto;min-height:148px;padding:22px}.hero-panel h2{font-size:28px;margin-bottom:9px}.muted{color:var(--muted);font-size:14px;line-height:1.55;margin-bottom:0}.hero-stats{display:grid;gap:10px;grid-template-columns:repeat(3,minmax(96px,1fr))}.hero-stats div{background:#f7f2e9;border:1px solid var(--line);border-radius:8px;min-height:80px;padding:12px}.hero-stats strong{display:block;font-size:20px;line-height:1.2;margin-bottom:8px}.hero-stats span,.field span,.player-meta span{color:var(--muted);font-size:13px}.panel{padding:18px}.import-panel{box-shadow:none}.section-heading{align-items:center;display:flex;gap:9px;margin-bottom:14px}.section-heading.spread{align-items:flex-start;justify-content:space-between}.inline-title{align-items:center;display:flex;gap:9px}.import-grid{display:grid;gap:12px;grid-template-columns:minmax(220px,1fr) auto}.primary-actions{display:flex;flex-wrap:wrap;gap:10px}.primary-actions button{min-width:150px}.import-preview{background:#fbf7ee;border:1px solid var(--line);border-radius:8px;display:grid;gap:14px;margin-top:14px;padding:14px}.import-preview-grid{display:grid;gap:8px;grid-template-columns:repeat(4,minmax(0,1fr))}.import-preview-grid div{background:var(--paper);border:1px solid var(--line);border-radius:8px;display:grid;gap:4px;min-height:72px;padding:10px}.import-preview-grid strong{font-size:24px;line-height:1}.import-preview-grid span,.import-folder-list small{color:var(--muted);font-size:13px}.import-preview-lists{display:grid;gap:12px;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.import-folder-list{display:flex;flex-wrap:wrap;gap:8px}.import-folder-list>span{background:var(--paper);border:1px solid var(--line);border-radius:8px;display:grid;gap:3px;max-width:100%;min-width:120px;padding:8px 10px}.import-folder-list>span{overflow:hidden;text-overflow:ellipsis}.import-preview-actions{display:flex;flex-wrap:wrap;gap:8px}.fallback-import{border-top:1px solid var(--line);margin-top:14px;padding-top:12px}.fallback-import summary{color:var(--muted);cursor:pointer;font-size:14px;font-weight:700;list-style-position:inside}.fallback-import .import-grid{margin-top:12px}.field{display:grid;gap:7px}.button-row{align-items:end;display:flex;flex-wrap:wrap;gap:8px}.file-button{position:relative}.file-button input{height:1px;opacity:0;pointer-events:none;position:absolute;width:1px}.ghost-button{background:transparent;border-color:var(--line);color:var(--ink)}.ghost-button:hover{background:#ece5d9;border-color:#cfc4b3}.ghost-button.compact{min-height:36px;padding:8px 10px}.tabs{background:#e8dfd1;border:1px solid var(--line);border-radius:8px;display:grid;gap:4px;grid-template-columns:repeat(4,1fr);padding:4px}.tabs button{background:transparent;border-color:transparent;color:var(--ink)}.tabs button.active{background:var(--paper);border-color:var(--paper);box-shadow:0 4px 14px #22312d14}.workspace{display:grid;gap:16px;grid-template-columns:.9fr 1.1fr}.book-list,.track-list,.stats-list,.check-list{display:grid;gap:8px}.track-list{max-height:min(54vh,520px);overflow-y:auto;overscroll-behavior:contain;padding-right:6px;scrollbar-color:#aeb8aa transparent;scrollbar-gutter:stable;scrollbar-width:thin}.track-list::-webkit-scrollbar,.book-total-list::-webkit-scrollbar{width:10px}.track-list::-webkit-scrollbar-track,.book-total-list::-webkit-scrollbar-track{background:transparent}.track-list::-webkit-scrollbar-thumb,.book-total-list::-webkit-scrollbar-thumb{background:#bdc8b8;border:3px solid var(--paper);border-radius:999px}.track-list::-webkit-scrollbar-thumb:hover,.book-total-list::-webkit-scrollbar-thumb:hover{background:#95a58f}.empty{color:var(--muted);line-height:1.55;margin:0}.book-row,.track-row{background:#fbf7ee;border-color:var(--line);color:var(--ink);justify-content:flex-start;min-height:64px;text-align:left;width:100%}.book-row:hover,.track-row:hover,.book-row.active,.track-row.active{background:#edf5ed;border-color:#9bc5a5;color:var(--ink)}.book-row small,.track-row small{color:var(--muted);display:block;font-weight:500;line-height:1.35;margin-top:4px;overflow-wrap:anywhere}.book-mark,.track-index{align-items:center;background:var(--green-dark);border-radius:8px;color:#fff;display:inline-flex;flex:0 0 auto;font-size:14px;font-weight:800;height:40px;justify-content:center;width:40px}.track-index{background:#e5dccf;color:var(--ink)}.track-main{flex:1;min-width:0}.track-main strong{display:block;overflow-wrap:anywhere}.status-dot{background:#c7c0b4;border-radius:999px;flex:0 0 auto;height:11px;width:11px}.status-dot.mid{background:var(--amber)}.status-dot.done{background:var(--green)}.stats-page{display:grid;gap:16px;min-width:0}.stats-overview{display:grid;gap:12px;grid-template-columns:repeat(3,minmax(0,1fr));min-width:0}.metric-card{box-shadow:none;display:grid;gap:8px;min-width:0;min-height:150px}.metric-card>span{color:var(--green-dark);font-size:13px;font-weight:800}.metric-card>strong{font-size:30px;line-height:1.08}.metric-card small{color:var(--muted);line-height:1.45}.book-total-card{align-content:start}.book-total-list{display:grid;gap:8px;max-height:96px;overflow-y:auto;overscroll-behavior:contain;padding-right:6px;scrollbar-color:#aeb8aa transparent;scrollbar-gutter:stable;scrollbar-width:thin}.book-total-row{align-items:center;background:#fbf7ee;border:1px solid var(--line);border-radius:8px;display:grid;gap:8px;grid-template-columns:minmax(0,1fr) auto;min-height:38px;padding:8px 10px}.book-total-row span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.book-total-row strong{color:var(--green-dark);font-size:14px}.year-panel{box-shadow:none;max-width:100%;overflow:hidden}.year-heading{align-items:flex-start;justify-content:space-between}.year-switcher{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}.year-switcher button{background:#f2eadf;border-color:var(--line);color:var(--ink);font-size:13px;min-height:32px;min-width:58px;padding:6px 10px}.year-switcher button.active{background:var(--ink);border-color:var(--ink);color:#fffdf8}.year-heatmap-scroll{max-width:100%;margin-top:14px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;padding-bottom:8px;scrollbar-color:#aeb8aa transparent;scrollbar-gutter:stable;scrollbar-width:thin;touch-action:pan-x;width:100%}.year-heatmap-scroll::-webkit-scrollbar{height:10px}.year-heatmap-scroll::-webkit-scrollbar-track{background:transparent}.year-heatmap-scroll::-webkit-scrollbar-thumb{background:#bdc8b8;border:3px solid var(--paper);border-radius:999px}.year-heatmap-scroll::-webkit-scrollbar-thumb:hover{background:#95a58f}.year-months{display:grid;gap:4px;margin-left:28px;min-width:max-content}.year-months span{color:var(--muted);font-size:13px;line-height:1;white-space:nowrap}.year-heatmap-body{display:flex;gap:8px;margin-top:8px;min-width:max-content}.weekday-labels{color:var(--muted);display:grid;flex:0 0 20px;font-size:12px;gap:4px;grid-template-rows:repeat(7,14px);line-height:14px;text-align:right}.year-heatmap-grid{display:grid;gap:4px;grid-auto-flow:column;grid-template-rows:repeat(7,14px)}.year-heat-cell,.legend-cell{border:1px solid rgba(34,49,45,.08);border-radius:4px;display:block;height:14px;width:14px}.year-heat-cell.outside{border-color:transparent}.legend{align-items:center;color:var(--muted);display:flex;font-size:13px;gap:6px}.legend-cell.one{background:#b9d8bd}.legend-cell.two{background:#79b583}.legend-cell.three{background:#4f8f61}.legend-cell.four{background:#2f6848}.backup-summary{display:grid;gap:10px;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:14px}.backup-summary div{background:#fbf7ee;border:1px solid var(--line);border-radius:8px;min-height:82px;padding:14px}.backup-summary strong{display:block;font-size:20px;line-height:1.2;margin-bottom:8px}.backup-summary span{color:var(--muted);font-size:13px}.storage-card{background:#fbf7ee;border:1px solid var(--line);border-radius:8px;display:grid;gap:10px;margin-top:14px;padding:14px}.storage-row{align-items:center;display:flex;justify-content:space-between;gap:12px}.storage-row span{color:var(--muted)}.storage-row strong{color:var(--green-dark);font-size:20px}.storage-meter{background:#e5dccf;border-radius:999px;height:8px;overflow:hidden}.storage-meter div{background:var(--green);height:100%}.data-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}.danger-button{background:var(--rose);border-color:var(--rose)}.danger-button:hover{background:#934848;border-color:#934848}.player{background:#fffdf8f2;border:1px solid var(--line);border-radius:8px 8px 0 0;bottom:0;box-shadow:0 -18px 40px #22312d24;display:grid;gap:10px;left:50%;max-width:1160px;padding:14px 62px 12px 18px;position:fixed;transform:translate(-50%);width:min(100%,1160px);z-index:10}.player.collapsed{align-items:center;grid-template-columns:minmax(0,1fr) auto;padding:8px 10px 8px 14px}.player-toggle{background:transparent;border-color:transparent;border-radius:999px;color:var(--ink);height:32px;min-height:32px;opacity:.7;padding:0;position:absolute;right:14px;top:12px;width:32px}.player-toggle:hover{background:transparent;border-color:transparent;opacity:1;transform:none}.player.collapsed .player-toggle{grid-column:2;grid-row:1;position:static}.player-meta{min-width:0}.player.collapsed .player-meta{grid-column:1;grid-row:1}.player-meta strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.player-controls{align-items:center;display:flex;gap:8px;justify-content:center}.player.collapsed .player-controls,.player.collapsed .rate-row,.player.collapsed .progress-row,.player.collapsed .player-warning{display:none}.player-controls button{border-radius:999px;height:42px;min-height:42px;padding:0;width:42px}.player-controls .play-button{background:var(--green);border-color:var(--green);height:50px;width:50px}.rate-row{display:flex;gap:6px;justify-content:center}.rate-row button{background:#f2eadf;border-color:var(--line);color:var(--ink);font-size:13px;min-height:32px;padding:5px 9px}.rate-row button.active{background:var(--ink);border-color:var(--ink);color:#fff}.progress-row{align-items:center;display:grid;gap:8px;grid-template-columns:48px minmax(0,1fr) 48px}.progress-time{color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums;text-align:center}.progress-slider{--progress-percent: 0%;appearance:none;background:linear-gradient(to right,var(--green) var(--progress-percent),#ddd6ca var(--progress-percent));border:0;border-radius:999px;cursor:pointer;height:20px;min-height:20px;padding:0}.progress-slider:focus{border-color:transparent;outline:3px solid rgba(79,143,97,.2)}.progress-slider:disabled{cursor:not-allowed;opacity:.55}.progress-slider::-webkit-slider-runnable-track{background:transparent;border-radius:999px;height:6px}.progress-slider::-webkit-slider-thumb{appearance:none;background:var(--green-dark);border:2px solid #fffdf8;border-radius:999px;box-shadow:0 2px 8px #22312d40;height:18px;margin-top:-6px;width:18px}.progress-slider::-moz-range-track{background:transparent;border-radius:999px;height:6px}.progress-slider::-moz-range-thumb{background:var(--green-dark);border:2px solid #fffdf8;border-radius:999px;box-shadow:0 2px 8px #22312d40;height:18px;width:18px}.player-warning{color:var(--rose);font-size:13px;line-height:1.4;margin:0;text-align:center}@media(max-width:840px){.topbar{padding-top:20px}h1{font-size:24px}.hero-panel,.import-grid,.stats-overview,.workspace{grid-template-columns:1fr}.hero-panel h2{font-size:24px}.hero-stats{grid-template-columns:1fr}.button-row{display:grid;grid-template-columns:1fr}.import-preview-grid,.import-preview-lists{grid-template-columns:1fr 1fr}.import-preview-actions{display:grid;grid-template-columns:1fr}.import-preview-actions button,.button-row button,.button-row .file-button,.primary-actions button{width:100%}.player{border-radius:8px 8px 0 0;width:100%}.metric-card{min-height:120px}.year-heading{display:grid;gap:10px}.year-switcher{flex-wrap:nowrap;justify-content:flex-start;max-width:100%;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}.year-switcher button{flex:0 0 auto}}@media(max-width:460px){.content,.topbar{padding-left:12px;padding-right:12px}.topbar{gap:12px}.ghost-button span{display:none}.panel,.hero-panel{padding:14px}.tabs button{flex-direction:column;gap:4px;min-height:54px;padding:9px 8px}.tabs span{font-size:13px}.import-preview-grid,.import-preview-lists{grid-template-columns:1fr}.player-controls{gap:5px}.player-controls button{height:38px;width:38px}.player-controls .play-button{height:46px;width:46px}.progress-row{grid-template-columns:42px minmax(0,1fr) 42px}}