@charset "UTF-8";
:root{--bg:#f7f8f5;--surface:#fff;--ink:#2e3932;--muted:#92988f;--green:#426951;--green-dark:#345440;--light-green:#eef3ed;--line:#e9ece6;--sand:#f6f3e9;--radius:16px;--sidebar:210px;font-family:"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;color:var(--ink);font-size:14px;font-synthesis:none}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);line-height:1.6}
button,input,textarea,select{font:inherit}
button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}
button,a{touch-action:manipulation}
button{cursor:pointer}
button{color:inherit}
button:disabled{cursor:not-allowed;opacity:.5}
a{color:inherit;text-decoration:none}
button,input,textarea,select,a{outline-offset:4px}
:focus-visible{outline:2px solid #779a70}
::selection{background:#dee9d8}
[hidden]{display:none!important}
.icon-library{position:absolute;width:0;height:0;overflow:hidden}
.icon{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.sidebar{position:fixed;inset:0 auto 0 0;width:var(--sidebar);background:#fff;border-right:1px solid var(--line);padding:36px 22px 20px;display:flex;flex-direction:column;z-index:10}
.brand{display:flex;align-items:center;gap:12px;padding-left:12px;width:max-content}
.brand-mark{height:44px;width:44px;background:var(--green);color:#fff;border-radius:13px;display:grid;place-items:center}
.brand-mark .icon{width:29px;height:29px;stroke-width:1.5}
.brand-text{font-weight:650;font-size:25px;letter-spacing:3px;line-height:1.2}
.brand-text>span{display:block;font-size:9px;letter-spacing:3.5px;color:var(--muted);margin-top:7px;font-weight:500}
.workspace-caption{font-size:10px;letter-spacing:1.5px;color:#9ba296;margin:55px 0 15px 14px}
.main-nav{display:grid;gap:8px}
.nav-link{display:flex;align-items:center;gap:12px;padding:13px 14px;border-radius:9px;color:#838c80;font-size:13px;transition:background .2s}
.nav-link:hover{background:#f7f8f4}
.nav-link.active{background:var(--light-green);color:var(--green);font-weight:600}
.nav-link .icon{width:18px;height:18px}
.nav-dot{width:6px;height:6px;border-radius:50%;background:var(--green);margin-left:auto}
.nav-count{font-size:10px;background:#f2f4ef;color:#7d897a;border-radius:5px;padding:0 6px;margin-left:auto}
.sidebar-bottom{margin-top:auto}
.sidebar-quote{margin:30px 8px 25px;padding:22px 0}
.sidebar-quote>.icon{color:#9aaa90;width:24px;height:24px}
.sidebar-quote p{font-size:16px;color:#7c8977;font-weight:400;line-height:1.9;letter-spacing:2px;margin:12px 0}
.sidebar-quote>span{font-size:7px;letter-spacing:1px;color:#a5ad9f;white-space:nowrap}
.local-status{display:flex;align-items:center;justify-content:center;gap:7px;border-top:1px solid var(--line);padding-top:20px;color:#929b8c;font-size:10px}
.status-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#7b9a66;flex-shrink:0}
.app-shell{margin-left:var(--sidebar)}
.topbar{height:77px;border-bottom:1px solid var(--line);padding:0 42px;display:flex;align-items:center;justify-content:space-between;background:#fafbf8}
.breadcrumb{font-size:12px;color:#9ca394;display:flex;align-items:center;gap:16px}
.breadcrumb strong{font-weight:500;color:#58634f}
.breadcrumb>span{color:#c9cec2}
.topbar-right{display:flex;gap:24px;align-items:center}
#date-label{font-size:11px;letter-spacing:.4px;color:#939b8c}
.avatar{height:31px;width:31px;border-radius:50%;display:grid;place-items:center;background:#e8eddf;color:#758267;font-size:12px}
main{max-width:1440px;margin:0 auto;padding:34px 42px 20px}
.page-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:26px}
.eyebrow{font-size:9px;letter-spacing:2.2px;color:#939f86;font-weight:600}
h1{font-size:27px;font-weight:600;letter-spacing:1px;margin:8px 0 8px;line-height:1.5}
.page-heading p{margin:0;font-size:12px;color:#929a8c;letter-spacing:.3px}
.heading-tag{font-size:11px;padding:7px 12px;display:flex;align-items:center;gap:7px;border:1px solid #e3e8dc;background:#f4f6ef;border-radius:6px;white-space:nowrap;color:#78866b}
.stats-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-bottom:25px}
.stat-card{background:var(--surface);border:1px solid var(--line);border-radius:11px;display:flex;align-items:center;padding:21px 22px;gap:15px;position:relative;min-height:108px}
.stat-icon{width:43px;height:43px;border-radius:12px;display:grid;place-items:center;flex-shrink:0}
.stat-icon .icon{width:22px;height:22px}
.sage{color:#77956f;background:#f0f4eb}
.sand{color:#b0a077;background:#f8f5ed}
.peach{color:#bd987b;background:#fbf1e9}
.stat-label{font-size:11px;color:#879180}
.stat-number{display:flex;align-items:baseline;gap:8px;line-height:1.3;margin-top:3px}
.stat-number strong{font-size:29px;font-weight:600;font-family:"Segoe UI",sans-serif;letter-spacing:-1px;color:#3a4534}
.stat-number>span{font-size:11px;color:#939c8b}
.stat-caption{font-size:10px;color:#a0a796;margin-left:auto;align-self:flex-end;margin-bottom:3px;white-space:nowrap}
.practice-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(310px,1fr);gap:23px;align-items:stretch}
.card{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);overflow:hidden}
.card-heading{display:flex;justify-content:space-between;align-items:center;gap:12px}
h2{font-size:14px;letter-spacing:.3px;font-weight:600;margin:0;display:flex;align-items:center;gap:8px}
h2>.icon{width:17px;height:17px;color:#849477}
.subtle{font-size:10px;color:#a0a793;white-space:nowrap}
.timer-card{padding:22px 26px 0;display:flex;align-items:center;flex-direction:column;position:relative}
.timer-card>.card-heading{width:100%}
.timer-tools{display:flex;gap:8px}
.icon-button{display:inline-grid;place-items:center;border:0;background:transparent;width:30px;height:30px;border-radius:6px;color:#939d8b;padding:5px}
.icon-button:hover{background:#f0f4ec;color:var(--green)}
.icon-button .icon{width:17px;height:17px}
.timer-subject{text-align:center;font-size:12px;letter-spacing:1px;margin-top:16px;color:#65755a}
.timer-subject>span{display:block;font-size:10px;letter-spacing:.5px;color:#a1a995;margin-top:5px}
.timer-face{width:290px;height:290px;margin:13px auto 9px;position:relative;flex-shrink:0}
.timer-ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);overflow:visible}
.ring-track{fill:none;stroke:#f0f3eb;stroke-width:4}
.ring-progress{fill:none;stroke:#859f72;stroke-width:4;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:0;transition:stroke-dashoffset .5s linear,stroke .2s}
.timer-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.timer-status{font-size:10px;display:flex;align-items:center;gap:6px;letter-spacing:1px;color:#94a087;margin:2px 0 3px}
.timer-status .status-dot{width:5px;height:5px}
.timer-digits{font:400 64px/1.35 "Bahnschrift","SFMono-Regular",Consolas,monospace;font-variant-numeric:tabular-nums;letter-spacing:-3px;color:#354d3c;white-space:nowrap;margin-left:-4px}
.timer-digits>span{color:#9aab8e;position:relative;top:-3px}
.timer-caption{font-size:10px;letter-spacing:.8px;color:#a0a993;margin-top:6px}
.timer-actions{display:flex;gap:12px;justify-content:center;margin-top:7px}
.button{border:1px solid transparent;display:inline-flex;justify-content:center;align-items:center;gap:8px;padding:11px 18px;border-radius:7px;font-size:12px;font-weight:500;transition:background .2s,transform .2s;min-height:41px}
.button:not(:disabled):active{transform:translateY(1px)}
.button .icon{width:16px;height:16px}
.primary{background:var(--green);color:white;box-shadow:0 3px 7px #3454400d}
.primary:hover:not(:disabled){background:var(--green-dark)}
.secondary{background:white;border-color:#e4e9dd;color:#7c8972}
.secondary:hover:not(:disabled){background:#f6f8f1}
.start-button{min-width:174px}
.start-button .icon{fill:currentColor;stroke-width:1}
.timer-footnote{color:#9ca58f;font-size:10px;letter-spacing:.3px;margin:16px 0 22px;text-align:center}
.timer-bottom{margin-top:auto;display:flex;justify-content:space-between;border-top:1px solid #f0f2ec;font-size:9px;color:#a3aa9c;align-self:stretch;padding:13px 1px}
.timer-bottom>span{display:flex;align-items:center;gap:6px}
.small-dot{width:4px;height:4px;border-radius:50%;background:#a6b79b}
.active-paper{font-size:11px;color:#87937b;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:-3px 0 8px}
.timer-card.paused .ring-progress{stroke:#c7b888}
.timer-card.paused .timer-status{color:#aa996d}
.timer-card.paused .timer-status .status-dot{background:#c7b888}
.timer-card.urgent .ring-progress{stroke:#bc8975}
.timer-card.urgent .timer-digits{color:#a46651}
.practice-side{display:flex;flex-direction:column;gap:18px}
.setup-card{padding:23px 23px 20px;flex:1}
.subject-fieldset{padding:0;border:0;margin:23px 0 19px;min-width:0}
.field-label{display:block;font-size:11px;color:#758268;margin-bottom:10px}
.field-label>span{color:#adb4a5;font-size:10px;margin-left:6px}
legend.field-label{padding:0;margin-bottom:11px}
.subject-option{display:block;position:relative;margin-top:10px}
.subject-option:first-of-type{margin-top:0}
.subject-option>input{position:absolute;opacity:0;width:1px;height:1px}
.subject-content{display:flex;align-items:center;gap:12px;border:1px solid #e9ece4;border-radius:8px;padding:13px 12px;cursor:pointer;transition:background .2s,border-color .2s}
.subject-option input:checked+.subject-content{background:#f3f6ef;border-color:#aaba97}
.subject-option input:focus-visible+.subject-content{outline:2px solid #779a70;outline-offset:3px}
.subject-option input:disabled+.subject-content{cursor:default;opacity:.65}
.subject-option input:disabled:checked+.subject-content{opacity:1}
.subject-symbol{width:33px;height:33px;border-radius:7px;border:1px solid #e4e9db;display:grid;place-items:center;background:white;color:#7e8e70;font-size:16px;flex-shrink:0}
.subject-name{font-size:13px;font-weight:600;color:#66785b;line-height:1.6}
.subject-name>small{display:block;font-size:9px;color:#9ca78f;white-space:nowrap;font-weight:400}
.subject-time{margin-left:auto;font-size:17px;font-family:"Segoe UI",sans-serif;font-weight:500;color:#7b896d;white-space:nowrap}
.subject-time>small{font-size:9px;color:#a0a88f;font-weight:400}
.radio-mark{width:14px;height:14px;border:1px solid #dce2d3;border-radius:50%;margin-left:2px;position:relative;flex-shrink:0;background:white}
.subject-option input:checked+.subject-content .radio-mark{border-color:#708c60;background:#708c60}
.subject-option input:checked+.subject-content .radio-mark:after{content:"";position:absolute;inset:4px;background:white;border-radius:50%}
.text-input{width:100%;background:#fcfdfb;border:1px solid #e8ece2;border-radius:6px;padding:11px 12px;color:#53614b;outline-offset:1px;font-size:11px;min-width:0}
.text-input::placeholder{color:#adb4a4}
.text-input:disabled{background:#f5f7f2;color:#89967b}
textarea.text-input{resize:vertical;min-height:66px;line-height:1.8;display:block}
.note-label{margin-top:17px}
.setup-hint{display:flex;align-items:center;gap:5px;color:#9aa68c;font-size:9px;margin-top:16px}
.setup-hint .icon{width:12px;height:12px}
.tip-card{border:1px solid #e8ecdf;border-radius:12px;background:#f0f3e9;padding:20px 23px;position:relative;overflow:hidden;min-height:117px}
.tip-top{display:flex;align-items:center;gap:8px;color:#80936c;font-size:11px;font-weight:500}
.tip-top .icon{width:16px;height:16px}
.tip-card p{font-size:10px;color:#96a084;line-height:1.9;margin:9px 0 0 24px}
.tip-decoration{position:absolute;right:18px;bottom:-27px;font-size:110px;line-height:1;color:#e1e8d5;transform:rotate(15deg);pointer-events:none}
.bottom-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(310px,1fr);gap:23px;margin-top:23px}
.recent-card,.week-card{padding:22px 24px}
.section-caption{font-size:10px;color:#a3aa98;font-weight:400;letter-spacing:0;margin-left:7px}
.text-link{color:#95a486;display:inline-flex;gap:5px;align-items:center;font-size:10px;white-space:nowrap}
.text-link .icon{height:13px;width:13px}
.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px 16px;color:#9aa58d;min-height:156px}
.empty-icon{background:#f4f6ef;border-radius:11px;width:40px;height:40px;display:grid;place-items:center;color:#b2bca6;margin-bottom:9px}
.empty-state p{font-size:11px;margin:0 0 4px}
.empty-state>span{font-size:10px;color:#b2baa7}
.week-chart{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;height:106px;margin-top:16px}
.week-day{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;flex:1;height:100%;gap:8px;position:relative;font-size:9px;color:#a2ac94}
.week-bar{width:100%;max-width:23px;background:#dce5d2;border-radius:4px 4px 2px 2px;height:5px;min-height:5px;transition:height .3s}
.week-day.today .week-bar{background:#81996d}
.week-day.today>span:last-child{color:#708561;font-weight:600}
.week-value{font-size:8px;color:#91a17f;line-height:1}
.week-caption{font-size:9px;color:#aeb6a3;margin:14px 0 0;text-align:center}
.page-footer{display:flex;align-items:center;justify-content:space-between;font-size:9px;color:#abb3a0;padding-top:28px;letter-spacing:.4px}
.footer-dot{padding:0 5px}
.recent-list{margin-top:15px}
.recent-row{display:flex;align-items:center;width:100%;gap:11px;border:0;border-bottom:1px solid #f0f2ec;background:transparent;text-align:left;padding:12px 0}
.recent-row:last-child{border-bottom:0}
.recent-row:hover .recent-name{color:var(--green)}
.record-subject-icon{width:32px;height:32px;border-radius:8px;display:grid;place-items:center;background:#eff4eb;color:#839875;font-size:13px;flex-shrink:0}
.record-subject-icon.shenlun{background:#f6f1e7;color:#aa9670}
.recent-info{min-width:0}
.recent-name{font-size:11px;color:#68765e;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;max-width:280px}
.recent-date{font-size:9px;color:#a5ae99;margin-top:2px}
.recent-meta{margin-left:auto;display:flex;align-items:flex-end;flex-direction:column;gap:3px;flex-shrink:0}
.recent-time{font-size:11px;font-variant-numeric:tabular-nums;color:#819172}
.status-badge{padding:3px 8px;border-radius:5px;font-size:9px;white-space:nowrap;display:inline-block;background:#f2f4ee;color:#939d88}
.status-badge.completed{background:#ecf3e8;color:#7d976e}
.status-badge.running{background:#eaf2e6;color:#6e8c5c}
.status-badge.paused{background:#f8f1df;color:#b0a068}
.history-card{padding:25px}
.small{min-height:34px;padding:7px 12px;font-size:11px}
.history-filters{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:25px 0 20px}
.filter-pills{display:flex;gap:4px;padding:4px;background:#f5f7f1;border-radius:7px}
.filter-pill{border:0;background:transparent;color:#98a18e;font-size:11px;padding:6px 17px;border-radius:5px;white-space:nowrap}
.filter-pill.selected{background:white;color:var(--green);box-shadow:0 1px 5px #384a2510}
.filter-right{display:flex;gap:12px}
.filter-right select{width:110px;font-size:11px;padding:8px;min-height:35px}
.search-field{border:1px solid var(--line);border-radius:6px;display:flex;align-items:center;padding:0 10px;gap:7px}
.search-field .icon{width:15px;height:15px;color:#9ba88b}
.search-field>input{border:0;background:transparent;width:150px;font-size:11px;min-height:35px;color:#637659;min-width:0}
.search-field>input::placeholder{color:#a6b09b}
.table-scroll{overflow-x:auto}
.records-table{width:100%;border-collapse:collapse;text-align:left;white-space:nowrap}
.records-table th{font-size:10px;color:#a0aa94;font-weight:500;background:#f7f9f3;padding:12px}
.records-table td{border-bottom:1px solid #f0f2eb;font-size:11px;color:#859676;padding:17px 12px}
.table-title{color:#647b55;max-width:240px;overflow:hidden;text-overflow:ellipsis;font-size:12px}
.table-note{font-size:9px;color:#a1ae95;max-width:240px;overflow:hidden;text-overflow:ellipsis;margin-top:3px}
.table-detail{border:0;background:transparent;font-size:11px;color:#81976d;padding:6px}
.table-detail:hover{text-decoration:underline}
.pagination{display:flex;justify-content:space-between;align-items:center;margin-top:20px;font-size:10px;color:#9aa78c}
.pagination>div{display:flex;gap:5px}
.previous{transform:rotate(180deg)}
.modal{border:1px solid #e3e9da;border-radius:18px;padding:28px;width:480px;max-width:calc(100vw - 32px);color:var(--ink);box-shadow:0 25px 100px #25341933}
.modal::backdrop{background:#24311b40;backdrop-filter:blur(4px)}
.modal-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:17px}
.modal-heading h2{font-size:17px}
.modal-description{font-size:12px;color:#8a987c;line-height:1.9;margin:0 0 22px}
.modal-actions{display:flex;gap:9px;justify-content:flex-end;margin-top:24px;align-items:center}
.modal-actions>div{display:flex;gap:8px}
.modal-actions.split{justify-content:space-between}
.text-danger{border:0;background:transparent;color:#b18b7b;font-size:11px;padding:6px 0}
.danger{background:#a66e59;color:#fff}
.compact{width:420px}
.record-summary{background:#f7f9f3;border-radius:8px;padding:16px;margin-bottom:20px;display:grid;grid-template-columns:1fr 1fr;gap:12px;font-size:11px;color:#7c8e6c}
.record-summary span{color:#a2ad97;font-size:10px;display:block;margin-bottom:3px}
.complete-modal{text-align:center;padding:40px 28px}
.complete-modal h2{display:block;font-size:22px;margin:12px 0}
.complete-modal .modal-actions{justify-content:center}
.completion-mark{width:64px;height:64px;border-radius:50%;background:#edf4e7;color:#789566;display:grid;place-items:center;margin:0 auto 22px}
.completion-mark .icon{width:30px;height:30px}
.toast{position:fixed;bottom:28px;left:calc(50% + var(--sidebar)/2);transform:translateX(-50%);background:#344e39;color:#fff;padding:12px 22px;border-radius:9px;font-size:12px;box-shadow:0 4px 20px #20371320;z-index:100;max-width:calc(100vw - 32px);text-align:center}
.toast.error{background:#8f6453}
.offline-banner{border:1px solid #e9d7bc;background:#fcf6e8;padding:10px 14px;border-radius:8px;color:#ad9566;font-size:11px;margin-bottom:20px}
.focus-mode .sidebar,.focus-mode .topbar,.focus-mode .page-heading,.focus-mode .stats-grid,.focus-mode .practice-side,.focus-mode .bottom-grid,.focus-mode .page-footer{display:none}
.focus-mode .app-shell{margin-left:0}
.focus-mode main{min-height:100dvh;display:flex;flex-direction:column;justify-content:center;max-width:850px;padding:28px}
.focus-mode .practice-grid{display:block}
.focus-mode .timer-card{padding:30px 40px 0;box-shadow:0 8px 50px #344c3110}
.focus-mode .timer-face{width:min(390px,65vw);height:min(390px,65vw);margin:20px auto}
.focus-mode .timer-digits{font-size:clamp(60px,10vw,86px)}
.focus-mode .timer-subject{margin-top:25px}
.focus-mode .timer-actions{margin-top:15px}
.focus-mode .timer-footnote{margin-bottom:32px}
.focus-mode .toast{left:50%}
@media(min-width:1500px){:root{--sidebar:230px}.sidebar{padding-left:28px;padding-right:28px}main{padding-top:42px}.timer-face{width:310px;height:310px}.timer-digits{font-size:69px}.setup-card{padding:25px}.subject-content{padding:16px 14px}.tip-card{min-height:125px}}
@media(max-width:1200px){:root{--sidebar:180px}.sidebar{padding:30px 15px 20px}.topbar{padding:0 28px}main{padding:28px}.stat-card{padding:18px 16px;gap:10px}.stat-caption{display:none}.practice-grid,.bottom-grid{gap:18px;grid-template-columns:minmax(0,1.3fr) minmax(290px,1fr)}.setup-card{padding:20px 18px}.timer-card{padding:20px 20px 0}.section-caption{display:none}.recent-card,.week-card{padding:20px}.subject-content{gap:9px}.timer-face{width:280px;height:280px}}
@media(max-width:950px){:root{--sidebar:76px}.sidebar{padding:24px 12px}.brand{padding:0;margin:0 auto}.brand-text,.workspace-caption,.nav-link>span,.sidebar-bottom{display:none}.brand-mark{width:40px;height:40px}.main-nav{margin-top:42px;gap:13px}.nav-link{justify-content:center;padding:14px}.nav-link .icon{width:20px;height:20px}main{padding:26px 24px}.topbar{padding:0 24px}.heading-tag{display:none}h1{font-size:25px}.stat-card{padding:17px 13px}.stat-icon{width:35px;height:35px;border-radius:10px}.stat-number strong{font-size:25px}.timer-face{width:265px;height:265px}.timer-digits{font-size:59px}.timer-actions{gap:8px}.start-button{min-width:140px}.timer-actions .secondary{padding:10px}.practice-grid,.bottom-grid{grid-template-columns:minmax(0,1.15fr) minmax(270px,1fr)}.history-filters{align-items:flex-start;flex-direction:column}.filter-right{width:100%}.search-field{flex:1}.search-field>input{width:100%}.recent-name{max-width:170px}}
@media(max-width:720px){:root{--sidebar:0px}.sidebar{position:sticky;inset:0 0 auto;width:100%;height:66px;flex-direction:row;align-items:center;justify-content:space-between;padding:0 20px;border-right:0;border-bottom:1px solid var(--line)}.brand{margin:0;gap:9px}.brand-mark{width:32px;height:32px;border-radius:9px}.brand-mark .icon{width:22px;height:22px}.brand-text{display:block;font-size:19px;letter-spacing:2px}.brand-text>span{display:none}.main-nav{margin:0;display:flex;gap:5px}.nav-link{padding:9px 11px;gap:7px;font-size:11px}.nav-link>span:not(.nav-dot):not(.nav-count){display:block}.nav-link .icon{width:15px;height:15px}.topbar{height:48px;padding:0 20px;background:var(--bg);border-bottom:0}.breadcrumb{font-size:10px;gap:9px}#date-label{font-size:9px}.avatar{display:none}main{padding:15px 20px 20px}.page-heading{margin-bottom:22px}.eyebrow{font-size:8px;letter-spacing:1.5px}h1{font-size:23px;margin:8px 0}.page-heading p{font-size:10px}.stats-grid{gap:9px;margin-bottom:19px}.stat-card{padding:13px 10px;display:block;min-height:92px;border-radius:10px}.stat-icon{display:none}.stat-label{font-size:10px}.stat-number{margin-top:8px;gap:5px}.stat-number strong{font-size:25px}.stat-number>span{font-size:10px}.practice-grid,.bottom-grid{grid-template-columns:1fr;gap:17px}.timer-card{padding:18px 20px 0}.timer-subject{margin-top:16px}.timer-face{width:280px;height:280px;margin:12px auto}.timer-digits{font-size:64px}.timer-footnote{font-size:9px}.timer-bottom{font-size:9px;padding:12px 0}.practice-side{gap:15px}.setup-card{padding:22px}.subject-fieldset{margin-top:20px}.subject-content{padding:15px;gap:14px}.subject-name>small{font-size:10px}.subject-time{font-size:19px}.subject-time>small{font-size:10px}.subject-symbol{width:36px;height:36px}.text-input{font-size:12px}.tip-card{padding:18px 22px;min-height:105px}.bottom-grid{margin-top:17px}.recent-card,.week-card{padding:20px}.week-chart{height:116px}.week-caption{margin-top:17px}.recent-name{max-width:200px}.section-caption{display:none}.history-card{padding:18px 14px}.history-filters{gap:12px;padding-top:20px}.filter-pills{width:100%}.filter-pill{flex:1}.filter-right{gap:8px}.filter-right select{width:105px}.search-field{min-width:0;padding:0 8px}.search-field>input{font-size:10px}.page-footer{font-size:8px;gap:10px;padding-top:24px}.page-footer>span:last-child{display:none}.toast{left:50%;width:max-content;bottom:20px}.modal{padding:22px}.modal-heading h2{font-size:16px}.modal-actions .button{font-size:11px;padding:10px 12px}.modal-description{font-size:11px}.record-summary{font-size:10px;gap:14px 8px}.focus-mode main{padding:16px}.focus-mode .timer-card{padding:22px 20px 0}.complete-modal h2{font-size:19px}}
@media(max-width:720px){
  .practice-grid,.bottom-grid{grid-template-columns:minmax(0,1fr)}
  .practice-side{min-width:0}
  .timer-face{width:min(280px,100%);height:auto;aspect-ratio:1}
  .timer-digits{font-size:clamp(48px,16vw,64px)}
  .timer-actions{flex-wrap:wrap}
  .subject-content{gap:10px}
  .subject-name>small{font-size:9px}
  .recent-name{max-width:min(200px,40vw)}
}
@media(max-width:359px){
  .sidebar{padding:0 14px}
  .nav-link{padding:8px}
  .nav-link .icon{display:none}
  .start-button{min-width:130px}
  .timer-actions .secondary{font-size:11px}
  .subject-content{padding:12px 10px}
  .subject-time{font-size:16px}
  .subject-symbol{width:30px;height:30px;font-size:14px}
  .setup-card{padding:18px}
  .page-heading h1{font-size:21px}
  .focus-mode .timer-face{width:100%;height:auto}
}
.table-detail{display:inline-flex;align-items:center;gap:3px}
.table-detail .icon{width:12px;height:12px}
.part-controls{align-self:center;width:100%;max-width:480px;border-top:1px solid var(--line);padding:17px 0 18px}
.part-label-row{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:11px;color:#7d8d71;margin-bottom:9px}
.part-label-row strong{font:500 15px/1.2 "Bahnschrift",Consolas,monospace;color:var(--green);margin-left:5px;font-variant-numeric:tabular-nums}
.part-clock-panel{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 20px;margin-bottom:17px;border:1px solid #dfe8d9;border-radius:10px;background:#f3f7ef}
.part-clock-info{display:flex;flex-direction:column;gap:3px;min-width:0}
.part-clock-label{font-size:10px;color:#7a8e6d;letter-spacing:.8px}
.part-clock-info>strong{font-size:14px;font-weight:500;color:#4d6b40}
#part-clock-status{font-size:9px;color:#98aa8c}
.part-clock-digits{font:400 37px/1.2 "Bahnschrift",Consolas,monospace;font-variant-numeric:tabular-nums;letter-spacing:-1px;color:var(--green);white-space:nowrap}
.timer-card.paused .part-clock-panel{background:#f8f7ef;border-color:#e9e4cf}
.timer-card.paused .part-clock-digits{color:#9a8c63}
.timer-card.overtime .timer-digits,.timer-card.overtime .timer-digits>span,.timer-card.overtime .timer-status{color:#bd4d45}
.timer-card.overtime .timer-status .status-dot{background:#bd4d45}
.timer-card.overtime .ring-track{stroke:#f5e7e2}
.timer-card.overtime .ring-progress{stroke:#bd4d45}
.timer-card.overtime .timer-digits{font-size:58px;letter-spacing:-2px}
.timer-digits>.timer-plus{font-size:.6em;top:-4px;margin-right:2px;vertical-align:baseline}
.overtime-hint{font-size:10px;line-height:1.8;text-align:center;color:#af5b51;background:#fcf1ed;border-radius:6px;padding:7px 12px;margin:0 0 15px;max-width:100%}
.overtime-tag{display:block;font-size:10px;line-height:1.7;color:#bd4d45;font-weight:400;margin-top:2px;white-space:normal}
.record-summary .overtime-tag{color:#bd4d45}
.manual-preview.is-overtime{background:#fcf1ed;color:#b34f45}
.focus-mode .timer-card.overtime .timer-digits{font-size:clamp(52px,10vw,80px)}
@media(max-width:720px){
  .part-clock-panel{padding:14px 16px;gap:10px}
  .part-clock-digits{font-size:33px}
  .part-clock-info>strong{font-size:13px}
  .part-label-row>span{font-size:9px}
  .timer-card.overtime .timer-digits{font-size:clamp(42px,14vw,58px)}
}
@media(max-width:359px){
  .part-clock-panel{padding:12px;gap:8px}
  .part-clock-digits{font-size:28px}
  .part-clock-info>strong{font-size:11px}
  .part-label-row{flex-wrap:wrap;gap:4px}
}
.part-action-row{display:flex;gap:10px}
.part-action-row .text-input{flex:1;font-size:12px;width:0}
.part-action-row .button{white-space:nowrap;min-width:125px}
.part-help-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;font-size:10px;color:#98a48d;margin-top:10px}
.part-help-row .text-link{border:0;background:transparent;padding:0;color:var(--green);font-size:11px;text-decoration:underline;text-underline-offset:3px}
.checkpoints-card{padding:22px 24px;margin-top:23px}
.checkpoint-list{padding:0;margin:15px 0 0;list-style:none;display:grid;gap:8px}
.checkpoint-row{border:1px solid #e7ecdf;border-radius:9px;background:#fcfdfb;display:flex;align-items:center;gap:12px;padding:12px 15px}
.checkpoint-number{width:27px;height:27px;display:grid;place-items:center;border-radius:50%;background:#edf3e7;color:#799267;font-size:10px;flex-shrink:0}
.checkpoint-info{min-width:0;flex:1}
.checkpoint-name{font-size:12px;color:#596f4e}
.checkpoint-source{font-size:9px;color:#a1ad96;margin-left:8px}
.checkpoint-duration{font-size:11px;color:#8e9e81;margin-top:3px}
.checkpoint-duration strong{font-variant-numeric:tabular-nums;color:#6e855f;font-weight:500}
.checkpoint-restore{white-space:nowrap;flex-shrink:0;font-size:10px}
.checkpoint-actions{display:flex;align-items:center;gap:9px;flex-shrink:0;margin-left:auto}
.checkpoint-delete{font-size:10px;white-space:nowrap;padding:7px 4px;min-height:32px;color:#ad7863}
.checkpoint-delete:hover:not(:disabled){color:#8e503c;text-decoration:underline;text-underline-offset:3px}
.heading-actions,.history-actions{display:flex;align-items:center;gap:12px;flex-shrink:0}
.timer-actions{flex-wrap:wrap}
.reset-button{min-width:64px}
.clear-history-button{color:#ad7863;border-color:#ebdfd8}
.history-row-actions{display:flex;align-items:center;gap:12px}
.history-row-delete{white-space:nowrap;padding:6px;font-size:11px}
.history-row-delete:disabled{color:#a7af9b;opacity:.7}
.history-card>.card-heading{flex-wrap:wrap}
@media(max-width:720px){
  .page-heading{flex-wrap:wrap;align-items:flex-start}
  .heading-actions{gap:8px}
  .heading-actions>.button{font-size:11px}
  .history-actions{gap:8px;margin-left:auto}
  .history-actions>.button{padding:7px 9px;font-size:10px}
  .timer-actions .reset-button{min-width:60px;padding:10px}
  .history-card .table-scroll{overflow:visible}
  .records-table{display:block;white-space:normal}
  .records-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .records-table tbody{display:grid;gap:12px}
  .records-table tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px 14px;padding:14px;border:1px solid var(--line);border-radius:10px}
  .records-table td{display:block;border:0;padding:0;min-width:0;font-size:11px}
  .records-table td:first-child,.records-table td:last-child{grid-column:1 / -1}
  .records-table td[data-label]::before{content:attr(data-label);display:block;margin-bottom:3px;color:#a0aa94;font-size:9px}
  .records-table .table-title,.records-table .table-note{max-width:none;white-space:normal;overflow-wrap:anywhere}
  .records-table .table-title{font-size:12px}
  .history-row-actions{justify-content:flex-end;border-top:1px solid var(--line);padding-top:7px;gap:18px}
  .history-row-actions button{min-height:32px}
}
.checkpoint-row.reverted{background:#f7f8f5;border-style:dashed}
.checkpoint-row.reverted .checkpoint-name{color:#9aa38f}
.reverted-points{margin-top:15px;font-size:11px;color:#95a086}
.reverted-points summary{cursor:pointer;width:fit-content}
.checkpoint-empty{font-size:11px;color:#9ca88e;line-height:1.9;margin:18px 0 0}
.record-checkpoints-section{margin:20px 0 24px}
.record-checkpoints-section h3{font-size:12px;font-weight:500;margin:0;color:#718660}
.record-checkpoints-section .checkpoint-row{padding:10px;gap:9px;flex-wrap:wrap}
.record-checkpoints-section .checkpoint-number{display:none}
.record-checkpoints-section .checkpoint-restore{padding:6px 8px}
.manual-time{border:0;padding:0;margin:20px 0;display:flex;gap:18px;min-width:0}
.manual-time label{display:flex;gap:8px;align-items:center;color:#8b9b7f;font-size:12px;flex:1;min-width:0}
.manual-time .text-input{width:0;flex:1;font-size:17px;font-variant-numeric:tabular-nums;text-align:center}
.manual-preview{padding:13px 15px;border-radius:8px;background:#f0f5ea;color:var(--green);font-size:12px;line-height:1.8;margin:0 0 12px}
.manual-preview.invalid{background:#fbf1e9;color:#a66e59}
.manual-explanation{color:#98a28e;font-size:11px;line-height:1.9;margin:0}
.focus-mode .part-controls{align-self:center}
.focus-mode .checkpoints-card{margin-top:18px}
@media(max-width:720px){
  .part-controls{max-width:none;padding-top:15px}
  .part-action-row{gap:8px}
  .part-action-row .button{min-width:112px;padding:10px;font-size:11px}
  .part-action-row .button .icon{width:14px;height:14px}
  .checkpoints-card{padding:20px;margin-top:17px}
  .checkpoint-row{padding:12px;gap:9px;flex-wrap:wrap}
  .checkpoint-restore{padding:7px 10px;font-size:10px;min-height:32px}
  .checkpoint-duration{font-size:10px}
  .checkpoint-source{margin-left:5px}
  .checkpoint-info{min-width:145px}
}
@media(max-width:359px){
  .part-action-row .button{min-width:100px;font-size:10px;padding:8px}
  .part-action-row .button .icon{display:none}
  .part-action-row .text-input{font-size:11px;padding:9px 6px}
  .checkpoint-row .checkpoint-number{display:none}
  .checkpoint-row .checkpoint-restore{margin-left:auto}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;scroll-behavior:auto!important}}