:root{--bg:#f6f6f4;--fg:#161616;--mut:#707070;--card:#fff;--line:#dcdcd8;--acc:#161616;--accfg:#fff}
@media(prefers-color-scheme:dark){:root{--bg:#111;--fg:#ececea;--mut:#8d8d8a;--card:#1b1b1b;--line:#2f2f2e;--acc:#ececea;--accfg:#111}}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.5 -apple-system,"Noto Sans TC","PingFang TC",system-ui,sans-serif;padding-bottom:env(safe-area-inset-bottom)}
.top{display:flex;justify-content:space-between;align-items:flex-end;padding:max(16px,env(safe-area-inset-top)) 16px 8px;max-width:640px;margin:auto}
h1{font-size:22px;margin:0;letter-spacing:.02em}h2{font-size:15px;margin:0 0 12px;letter-spacing:.08em}
main{max-width:640px;margin:auto;padding:0 12px 40px}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px;margin:12px 0}
.muted{color:var(--mut);font-size:13px;font-weight:400}
.banner{max-width:616px;margin:8px auto;padding:10px 14px;border:1px solid var(--fg);border-radius:10px;font-size:14px}
.list{list-style:none;margin:0;padding:0}
.item{display:flex;align-items:center;gap:12px;min-height:52px;border-top:1px solid var(--line);padding:6px 0}
.item:first-child{border-top:0}
.item .t{flex:1;min-width:0;overflow-wrap:anywhere}
.item.done .t{color:var(--mut);text-decoration:line-through}
.chk{flex:none;width:32px;height:32px;border:2px solid var(--fg);border-radius:8px;background:none;color:var(--accfg);padding:0;font-size:20px;line-height:1}
.chk[aria-checked=true]{background:var(--acc)}
.chk[aria-checked=true]::after{content:"";display:block;width:8px;height:15px;margin:2px auto 0;border:solid var(--accfg);border-width:0 3px 3px 0;transform:rotate(45deg)}
.tag{font-size:11px;border:1px solid var(--line);border-radius:6px;padding:0 6px;color:var(--mut);margin-left:6px;white-space:nowrap}
button{font:inherit;color:var(--fg)}
.ghost{min-height:44px;min-width:56px;border:1px solid var(--line);background:none;border-radius:10px;padding:0 12px;font-size:14px}
.primary{width:100%;min-height:52px;border:0;border-radius:12px;background:var(--acc);color:var(--accfg);font-weight:600;margin-top:12px}
.icon-btn{min-height:44px;padding:0 14px;border:1px solid var(--line);background:var(--card);border-radius:10px}
label{display:block;font-size:13px;color:var(--mut);margin-top:10px}
input,textarea,select{display:block;width:100%;margin-top:4px;min-height:48px;padding:10px 12px;font:inherit;font-size:16px;color:var(--fg);background:var(--bg);border:1px solid var(--line);border-radius:10px}
textarea{resize:vertical}
input:focus,textarea:focus,select:focus{outline:2px solid var(--fg);outline-offset:1px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.total{margin-top:12px;font-size:15px}.total b{font-size:26px;margin-left:8px;font-variant-numeric:tabular-nums}
.moods{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-top:12px}
.moods button{min-height:48px;border:1px solid var(--line);background:none;border-radius:10px;font-size:14px}
.moods button[aria-checked=true]{background:var(--acc);color:var(--accfg);border-color:var(--acc)}
.now-name{font-size:26px;font-weight:700;margin:2px 0}
.now-meta{color:var(--mut);font-size:14px}
.bar{height:6px;background:var(--line);border-radius:3px;margin:10px 0;overflow:hidden}.bar i{display:block;height:100%;background:var(--acc)}
.now h3,.sub{font-size:13px;color:var(--mut);margin:14px 0 4px;font-weight:600}
.lesson .meta{font-size:12px;color:var(--mut)}
.lesson .acts{display:flex;gap:6px;flex:none}
details summary{min-height:44px;display:flex;align-items:center;color:var(--mut);font-size:14px}
.foot{display:flex;justify-content:space-between;padding:8px 4px}.foot a{color:var(--mut)}
.toast{position:fixed;left:50%;bottom:max(20px,env(safe-area-inset-bottom));transform:translateX(-50%);background:var(--acc);color:var(--accfg);padding:12px 18px;border-radius:12px;font-size:14px;z-index:9;max-width:90vw}
.empty{color:var(--mut);padding:10px 0;font-size:14px}
[hidden]{display:none!important}

.top-actions{display:flex;gap:8px;align-items:center}a.icon-btn{text-decoration:none;display:inline-flex;align-items:center}

.icon-btn{color:var(--fg,inherit);display:inline-flex;align-items:center;justify-content:center;min-width:44px;padding:0 10px}
a.icon-btn,a.icon-btn:visited,a.icon-btn:active,a.icon-btn:hover{color:inherit}
.title-link,.title-link:visited,.title-link:active{color:inherit;text-decoration:none}
.item .t{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;overflow-wrap:normal}
.item{min-height:48px}

.icon-btn{position:relative}.icon-btn .badge{position:absolute;top:-4px;right:-4px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--acc);color:var(--accfg);font-size:10px;line-height:16px;text-align:center;box-sizing:border-box}

.lv-head{list-style:none;padding:14px 2px 6px}.lv-top{display:flex;align-items:baseline;gap:10px;font-size:13px}.lv-name{font-weight:600}.lv-tag{color:var(--mut);font-size:12px;flex:1}.lv-bar{height:3px;border-radius:2px;background:var(--line,rgba(128,128,128,.25));margin-top:6px;overflow:hidden}.lv-bar i{display:block;height:100%;background:var(--acc)}

.countdown{font-size:13px;font-weight:400;color:var(--mut);letter-spacing:0;white-space:nowrap}

/* layout v2: fixed viewport, tabs, two-row buttons */
html,body{height:100%;overflow:hidden;overscroll-behavior:none;position:fixed;width:100%}
body{display:flex;flex-direction:column}
.top{width:100%;flex:none;display:flex;justify-content:space-between;align-items:center;gap:8px;padding:max(12px,env(safe-area-inset-top)) 14px 6px}
.top h1{white-space:nowrap;display:flex;align-items:baseline;gap:8px;font-size:22px}
.top h1 .title-link{white-space:nowrap}
.top-actions{display:grid;grid-template-columns:repeat(3,38px);gap:6px;flex:none}
.top-actions .icon-btn{min-height:34px;min-width:38px;width:38px;height:34px;padding:0;border-radius:9px}
.top-actions svg{width:18px;height:18px}
.banner{width:calc(100% - 28px);flex:none}
main{flex:1;min-height:0;width:100%;overflow:hidden;display:flex;flex-direction:column;padding:0 12px 6px}
main [data-tab]{display:none}
body[data-tab=today] main [data-tab=today],body[data-tab=record] main [data-tab=record],body[data-tab=lessons] main [data-tab=lessons],body[data-tab=notes] main [data-tab=notes]{display:block}
main .card{margin:6px 0}
body[data-tab=today] #tasks,body[data-tab=lessons] #lessons{max-height:calc(100dvh - 330px);overflow-y:auto}

body[data-tab=lessons] #lessons{max-height:calc(100dvh - 240px)}
textarea{resize:none}
.tabs{flex:none;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);background:var(--card);padding-bottom:env(safe-area-inset-bottom)}
.tabs button{min-height:48px;border:0;background:none;color:var(--mut);font-size:14px}
.tabs button[aria-selected=true]{color:var(--fg);font-weight:700;box-shadow:inset 0 2px 0 var(--fg)}
.toast{bottom:calc(64px + env(safe-area-inset-bottom))}

/* interaction feel */
button,a.icon-btn,.item,.chk,.card{transition:transform .12s ease,box-shadow .18s ease,background-color .18s ease,border-color .18s ease,opacity .18s}
@media(hover:hover){
 .icon-btn:hover,.ghost:hover,.primary:hover,.moods button:hover,.tabs button:hover{border-color:var(--fg);box-shadow:0 0 0 1px var(--fg),0 0 16px 2px rgba(130,150,255,.35);transform:translateY(-1px);cursor:pointer}
 .chk:hover{box-shadow:0 0 0 3px rgba(130,150,255,.35);cursor:pointer}
 .item:hover{background:rgba(130,130,130,.10);border-radius:8px}
 .title-link:hover{opacity:.7}
 input:hover,textarea:hover,select:hover{border-color:var(--fg)}
}
button:active,a.icon-btn:active,.chk:active{transform:scale(.92);box-shadow:0 0 0 1px var(--fg),0 0 6px rgba(130,150,255,.5)}
.chk[aria-checked=true]::after{animation:tick .22s ease}
@keyframes tick{from{transform:rotate(45deg) scale(0)}to{transform:rotate(45deg) scale(1)}}
.primary:active{transform:scale(.97)}

.col{display:contents}
/* desktop: one-page grid */
@media(min-width:900px) and (min-height:560px){
 .top{max-width:1400px;margin:0 auto;padding:14px 20px 8px}
 .banner{max-width:1360px}
 .tabs{display:none}
 main{max-width:1400px;margin:0 auto;padding:0 20px 8px;display:grid;grid-template-columns:1.1fr 1fr 1fr;grid-template-rows:minmax(0,1fr) auto;gap:12px}
 .col{display:flex;flex-direction:column;gap:12px;min-height:0;min-width:0}
 body[data-tab] main>.col>[data-tab]{display:block;margin:0;min-height:0}
 main>.col>.card{overflow:hidden}
 #tasks-card,.col>[data-tab=today]:not(#now){flex:1;display:flex!important;flex-direction:column}
 .col>[data-tab=today]:not(#now) #tasks{flex:1;min-height:0;max-height:none!important;overflow-y:auto}
 .col>[data-tab=record]{flex:none}
 .col>[data-tab=notes]{flex:1;overflow-y:auto}
 .col>[data-tab=lessons]{flex:1;display:flex!important;flex-direction:column}
 .col>[data-tab=lessons] #lessons{flex:1;min-height:0;max-height:none!important;overflow-y:auto}
 main>footer[data-tab]{grid-column:1/4;display:flex!important;padding:0 4px}
 #f-review,#f-points{height:52px}#n-points{height:52px}
 .col>.card{padding:14px}
 label{margin-top:6px}
 .toast{bottom:20px}
 input,select{min-height:36px;padding:6px 10px;margin-top:2px}
 .moods button{min-height:36px}
 .moods{margin-top:8px}
 .primary{min-height:40px;margin-top:8px}
 .total{margin-top:6px}.total b{font-size:22px}
 h2{margin-bottom:8px}
 #f-review,#f-workout,#f-points,#n-points{height:40px}
 .col:nth-child(2){overflow-y:auto}
 .col>[data-tab=notes]{flex:none}
}

html,body,*{scrollbar-width:none!important;-ms-overflow-style:none!important}
*::-webkit-scrollbar{display:none;width:0;height:0}
html::-webkit-scrollbar,body::-webkit-scrollbar,*::-webkit-scrollbar{display:none!important;width:0!important;height:0!important;background:transparent!important}

@media(max-width:899px),(max-height:559px){
 main>.col>.card,main .card{flex:none}
 body[data-tab=today] [data-tab=today]:not(#now){flex:1 1 auto;min-height:0;display:flex;flex-direction:column;overflow:hidden}
 body[data-tab=today] #tasks{flex:1 1 auto;min-height:0;max-height:none;overflow-y:auto}
 body[data-tab=lessons] [data-tab=lessons]{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;overflow:hidden}
 body[data-tab=lessons] #lessons{flex:1 1 auto;min-height:0;max-height:none;overflow-y:auto}
 body[data-tab=record] [data-tab=record],body[data-tab=notes] [data-tab=notes]{overflow-y:auto;max-height:100%}
 main{padding-bottom:10px}
}

/* middle column redesign */
.rec-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}.rec-head h2{margin:0}
.ypt-hero{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;margin:6px 0 10px;border-radius:12px;background:linear-gradient(135deg,rgba(130,150,255,.14),rgba(130,130,130,.06));border:1px solid var(--line)}
.ypt-big{display:flex;flex-direction:column;line-height:1.1}
.ypt-cap{font-size:11px;color:var(--mut);letter-spacing:.08em}
.ypt-big b{font-size:34px;font-variant-numeric:tabular-nums;letter-spacing:-.01em;margin-top:2px}
.ypt-in{display:flex;gap:8px}
.num{display:flex;align-items:center;gap:4px;margin:0;font-size:12px;color:var(--mut)}
.num input{width:58px;min-height:36px;margin:0;text-align:center;font-size:16px;font-variant-numeric:tabular-nums;padding:4px}
.seg{display:grid;grid-template-columns:repeat(5,1fr);gap:0;border:1px solid var(--line);border-radius:10px;overflow:hidden;margin:0 0 10px}
.seg button{min-height:34px!important;border:0!important;border-radius:0!important;border-right:1px solid var(--line)!important;font-size:13px}
.seg button:last-child{border-right:0!important}
.seg button[aria-checked=true]{background:var(--acc);color:var(--accfg)}
.fields{display:flex;flex-direction:column;gap:6px}
.fld{display:flex;align-items:stretch;gap:0;margin:0;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--bg)}
.fld>span{flex:none;width:44px;display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--mut);border-right:1px solid var(--line);letter-spacing:.1em}
.fld textarea{border:0;border-radius:0;margin:0;min-height:44px;height:auto;background:transparent;padding:8px 10px;font-size:14px;resize:none}
.fld:focus-within{border-color:var(--fg);box-shadow:0 0 0 1px var(--fg)}
.fld textarea:focus{outline:0}
.note-card h2{margin-bottom:8px}
.note-row{display:flex;gap:8px;margin-top:6px}
.note-row input,.note-row select,.note-row textarea{margin:0;min-height:38px;flex:1;min-width:0;font-size:14px;padding:6px 10px}
.note-row select{flex:none;width:96px}
.note-row textarea{height:38px;resize:none}
.note-row .primary{width:72px;flex:none;margin:0;min-height:38px}
@media(min-width:900px) and (min-height:560px){
 #f-review,#f-workout,#f-points{height:auto}
 .fld textarea{min-height:42px}
}
.num span{white-space:nowrap}
.num input{width:50px}

/* focus timer */
.focus{padding:14px 16px}
.fc-head{display:flex;align-items:center;gap:8px;margin-bottom:4px}.fc-head h2{margin:0;flex:1}
.fc-seg{display:grid;grid-template-columns:auto auto;margin:0;border-radius:8px}.fc-seg button{min-height:28px!important;padding:0 10px;font-size:12px}
.fc-hist{min-height:28px;min-width:0;padding:0 10px;font-size:12px}
.fc-time{font-size:44px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.01em;line-height:1.15;cursor:pointer;user-select:none;transition:opacity .3s}
.fc-time.run{animation:fcpulse 2s ease-in-out infinite}
@keyframes fcpulse{50%{opacity:.72}}
.fc-sub{font-size:12px;min-height:18px}
.fc-btns{display:flex;gap:8px;margin-top:8px}.fc-btns .primary{margin:0;min-height:42px;flex:1}.fc-btns .ghost{min-height:42px;padding:0 18px}
.fc-dialog{border:1px solid var(--line);border-radius:16px;background:var(--card);color:var(--fg);width:min(440px,92vw);max-height:80vh;padding:16px;overflow:auto}
.fc-dialog::backdrop{background:rgba(0,0,0,.45);backdrop-filter:blur(2px)}
.fc-dh{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.fc-dh h2{margin:0}
.fc-day .t{flex:none;width:96px}.fc-bar{flex:1;height:6px;background:var(--line);border-radius:3px;overflow:hidden}.fc-bar i{display:block;height:100%;background:var(--acc)}
.fc-day b,.fc-dialog .item b{font-variant-numeric:tabular-nums;font-size:13px}
@media(max-width:899px){.fc-time{font-size:40px}}
@media(min-width:900px) and (min-height:560px){
.top>.focus{flex:1;display:grid;grid-template-columns:auto auto auto auto auto;grid-template-areas:"time seg btns hist";align-items:center;justify-content:start;gap:4px 14px;margin:0 0 0 24px;padding:6px 14px;max-width:560px}
.top>.focus .fc-head{display:contents}.top>.focus .fc-head h2{display:none}
.top>.focus .fc-time{grid-area:time;font-size:30px}.top>.focus .fc-seg{grid-area:seg}.top>.focus .fc-hist{grid-area:hist}
.top>.focus .fc-sub{display:none}
.top>.focus .fc-btns{grid-area:btns;margin:0}.top>.focus .fc-btns .primary,.top>.focus .fc-btns .ghost{min-height:32px;padding:0 14px;flex:none}
}
.fc-btns button,.fc-hist,.fc-seg button{white-space:nowrap;flex:none}
@media(min-width:900px) and (min-height:560px){.top>.focus{grid-template-columns:auto auto auto auto;grid-template-areas:"time seg btns hist";gap:4px 12px;max-width:none;flex:none}.top>.focus .fc-btns{display:flex;gap:6px}}
@media(min-width:900px) and (min-height:560px){.top>.focus .fc-btns .primary{flex:none;width:auto;min-width:72px}.top>.focus .fc-btns{min-width:0;width:max-content}.top>.focus .fc-hist,.top>.focus .fc-btns .ghost{position:static;width:auto;min-width:52px;margin:0}}
.rec .focus{border:0;box-shadow:none;background:transparent;padding:6px 0 10px}
@media(min-width:900px) and (min-height:560px){.top>.focus{border:1px solid var(--line);background:var(--card);padding:6px 14px}}
.fc-subj{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-top:8px}
.fc-subj button{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:46px;padding:4px 0;border-radius:10px;border:1px solid var(--line);background:var(--card);color:var(--fg);font-size:14px;font-weight:600;line-height:1.2;transition:transform .12s,box-shadow .2s,background .2s}
.fc-subj button i{font-style:normal;font-size:10px;font-weight:400;opacity:.65;min-height:12px}
.fc-subj button:hover{box-shadow:0 0 0 3px rgba(130,150,255,.25)}.fc-subj button:active{transform:scale(.95)}
.fc-subj button.on{background:var(--fg);color:var(--card)}.fc-subj button.run{animation:fcpulse 2s ease-in-out infinite}
.fc-btns{margin-top:6px}.fc-btns .ghost{flex:1}
@media(min-width:900px) and (min-height:560px){
.top>.focus{grid-template-columns:auto auto auto auto auto;grid-template-areas:"time seg subj btns hist"}
.top>.focus .fc-subj{grid-area:subj;margin:0;display:flex;gap:4px}
.top>.focus .fc-subj button{min-height:32px;min-width:40px;padding:0 8px;font-size:13px}.top>.focus .fc-subj button i{display:none}
.top>.focus .fc-btns{margin:0}.top>.focus .fc-btns .ghost{flex:none}
}
.prog{height:8px;border-radius:4px;background:var(--line);overflow:hidden;margin:2px 0 12px}
.prog i{display:block;height:100%;width:0;border-radius:4px;background:linear-gradient(90deg,#8296ff,#5ad1b0);transition:width .6s cubic-bezier(.2,.8,.2,1)}
.rec-head #completion{font-variant-numeric:tabular-nums;font-size:13px}
@media(min-width:900px) and (min-height:560px){
.col:nth-child(2){overflow:visible}
.col>.rec{flex:1;display:flex!important;flex-direction:column}
.rec .fields{flex:1;display:flex;flex-direction:column;gap:8px}
.rec .fld{flex:1}.rec .fld textarea{height:100%}
.rec .moods{margin:0 0 10px}.rec #save-record{margin-top:10px}
.col>.note-card{flex:none}
}
.fc-dgh{display:flex;justify-content:space-between;margin-top:12px}
.fc-del{min-height:28px;min-width:0;padding:0 10px;font-size:12px;flex:none}
.top-actions{grid-template-columns:repeat(2,38px)}
@media(min-width:900px) and (min-height:560px){
.top-actions{grid-template-columns:repeat(4,52px);gap:8px}
.top-actions .icon-btn{width:52px;height:46px;min-width:52px;min-height:46px;border-radius:12px}
.top-actions svg{width:24px;height:24px}
}
.n-draft{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:6px;max-height:150px;overflow-y:auto}
.n-draft:empty{display:none}
.n-it{position:relative;border:1px solid var(--line);border-radius:10px;background:var(--bg);padding:6px 30px 6px 10px}
.n-it textarea{width:100%;border:0;background:transparent;margin:0;padding:2px 0;min-height:22px;font-size:14px;resize:none;overflow:hidden}
.n-it textarea:focus{outline:0}.n-it:focus-within{border-color:var(--fg)}
.n-it img{display:block;max-height:90px;max-width:100%;border-radius:6px}
.n-x{position:absolute;top:4px;right:4px;width:22px;height:22px;min-height:0;padding:0;border:0;background:none;color:var(--mut);font-size:18px;line-height:1;cursor:pointer;border-radius:6px}
.n-x:hover{background:var(--line);color:var(--fg)}
.note-row .ghost{flex:none;min-height:38px;padding:0 12px;margin:0}
.note-row #save-note{width:auto;flex:1}
.fc-goal{display:flex;align-items:center;gap:10px;margin-top:2px}.fc-goal .prog{flex:1;margin:0;height:6px}.fc-goal span{font-size:12px;font-variant-numeric:tabular-nums;white-space:nowrap}
.fc-prog.over i{background:linear-gradient(90deg,#5ad1b0,#f0b84a)}
.rec .focus{padding-top:0}
.top-actions{grid-template-columns:repeat(4,34px)!important;gap:8px!important}
.top-actions .icon-btn{width:34px;min-width:34px;height:34px}
@media(min-width:900px) and (min-height:560px){
.top-actions{grid-template-columns:repeat(4,52px)!important;gap:18px!important}
.top>.focus .fc-goal{position:absolute;left:14px;right:14px;bottom:2px;margin:0}.top>.focus{position:relative;padding-bottom:12px}
.top>.focus .fc-goal span{display:none}.top>.focus .fc-goal .prog{height:3px}
}
.primary:disabled{background:var(--line)!important;color:var(--mut)!important;border-color:transparent!important;box-shadow:none!important;transform:none!important;cursor:not-allowed;opacity:1}
.note-row textarea#n-points{height:38px;max-height:220px;overflow-y:auto;line-height:1.5}
.note-row{align-items:flex-end}
/* lessons spacing */
.lv-head{margin-top:22px;padding:0 2px 8px;list-style:none}
#lessons>.lv-head:first-child{margin-top:6px}
.lv-top{display:flex;align-items:baseline;gap:10px;margin-bottom:8px}.lv-top .muted{margin-left:auto}
.lv-bar{margin-bottom:4px}
.lesson.item{padding:10px 2px;min-height:56px;gap:14px}
.lesson .meta{margin-top:3px}
#lessons{padding:0 2px 18px}
[data-tab=lessons]{padding-bottom:20px}
/* iOS: inputs under 16px trigger auto-zoom */
@media(max-width:899px){input,select,textarea,.fld textarea,.note-row input,.note-row select,.note-row textarea,.n-it textarea,.num input{font-size:16px!important}}
.chk{position:relative}
.chk[aria-checked=true]::after{position:absolute;left:50%;top:46%;width:7px;height:14px;margin:0;transform:translate(-50%,-50%) rotate(45deg);animation:tickc .22s ease}
@keyframes tickc{from{opacity:0;transform:translate(-50%,-50%) rotate(45deg) scale(.5)}to{opacity:1;transform:translate(-50%,-50%) rotate(45deg) scale(1)}}
.fc-hist{width:32px;height:32px;min-height:32px!important;min-width:32px!important;padding:0!important;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--fg);cursor:pointer;transition:transform .12s,box-shadow .2s}
.fc-hist:hover{box-shadow:0 0 0 3px rgba(130,150,255,.25)}.fc-hist:active{transform:scale(.92)}
.fc-add{margin-bottom:6px}.fc-add-row{display:flex;gap:8px;margin-top:6px}.fc-add-row>*{flex:1;min-width:0;margin:0;min-height:40px}.fc-add-row .primary{flex:none;width:72px}
/* prevent focus/tap from scrolling fixed containers upward */
html,body{height:100dvh;inset:0}
body{padding-bottom:0}
@media(max-width:899px),(max-height:559px){
main,main>.col,main .card{overflow:clip!important}
main #tasks,main #lessons{overflow-y:auto!important}
}

/* note pages */
.n-draft{max-height:none;overflow:visible}
.n-it{cursor:pointer}.n-it.sel{border-color:var(--fg);box-shadow:0 0 0 1px var(--fg)}
.n-pn{font-size:11px;color:var(--mut);letter-spacing:.06em;margin-bottom:2px}
.n-th{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.n-ti{position:relative;display:inline-block}.n-ti img{display:block;height:72px;max-width:120px;object-fit:cover;border-radius:6px}
.n-x2{position:absolute;top:-6px;right:-6px;width:20px;height:20px;border-radius:50%;border:0;background:var(--acc);color:var(--accfg);font-size:12px;line-height:20px;padding:0}
@media(max-width:899px),(max-height:559px){body[data-tab=notes] main [data-tab=notes]{overflow-y:auto!important;min-height:0}}
/* native momentum + rubber-band on every scroller, settling exactly at the edges */
#tasks,#lessons,.col,.col>[data-tab=notes],body[data-tab=record] [data-tab=record],body[data-tab=notes] [data-tab=notes],#fc-body,.n-draft{overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch;scroll-behavior:auto;scroll-snap-type:none}
#tasks,#lessons{padding-bottom:14px}
body[data-tab=record] [data-tab=record],body[data-tab=notes] [data-tab=notes]{padding-bottom:20px}
/* v59 fixes: record card scrolls again; nav pinned to the viewport bottom */
body[data-tab=record] main [data-tab=record].rec{overflow-y:auto!important}
@media(max-width:899px),(max-height:559px){
html,body{height:auto;position:fixed;inset:0}
body{padding-bottom:calc(49px + env(safe-area-inset-bottom))}
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:5;padding-bottom:env(safe-area-inset-bottom)}
}
@media(min-width:900px) and (min-height:560px){.top>.focus{flex:none;margin-left:auto;margin-right:28px}}
@media(min-width:900px) and (min-height:560px){
.top-actions .icon-btn{border-radius:12px!important}
.top>.focus,.top>.focus .fc-hist{border-radius:12px}
.top>.focus .fc-hist{border-radius:10px}
}
@media(min-width:900px) and (min-height:560px){
.top-actions{grid-template-columns:repeat(4,48px)!important}
.top-actions .icon-btn{width:48px!important;height:48px!important;min-width:48px!important;min-height:48px!important;border-radius:12px!important}
}
@media(max-width:899px),(max-height:559px){body[data-tab]{padding-bottom:calc(49px + env(safe-area-inset-bottom))!important}}
.fc-tog{display:inline-flex;align-items:center;justify-content:center;min-width:56px;min-height:32px!important;padding:0 12px;border-radius:10px;border:1px solid var(--line);background:var(--bg);color:var(--fg);font-size:13px;font-weight:600;cursor:pointer}
.fc-tog:active{transform:scale(.97)}
.fc-stats{margin-bottom:6px}
.fc-st-top{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:10px}
.fc-st-top>div{border:1px solid var(--line);border-radius:12px;padding:10px 6px;text-align:center;background:var(--bg)}
.fc-st-top i{display:block;font-style:normal;font-size:11px;color:var(--mut);letter-spacing:.06em}
.fc-st-top b{font-size:18px;font-variant-numeric:tabular-nums}
.fc-st-r{display:flex;justify-content:space-between;padding:6px 2px;border-top:1px solid var(--line);font-size:14px}
.fc-st-r:first-of-type{border-top:0}
.top-actions{grid-template-columns:repeat(5,48px)!important}
@media(max-width:899px){.top-actions{grid-template-columns:repeat(5,34px)!important;gap:6px!important}}
@media(min-width:900px) and (min-height:560px){.top>.focus{margin-left:auto!important;margin-right:auto!important}}
@media(max-width:899px){.top{gap:6px}.top h1{white-space:nowrap}.top-actions{grid-template-columns:repeat(5,36px)!important;gap:4px!important}.top-actions .icon-btn{width:36px!important;min-width:36px!important;height:36px!important;min-height:36px!important;border-radius:9px!important}.top-actions svg{width:21px!important;height:21px!important}.countdown{font-size:11px}}
@media(max-width:899px) and (max-height:760px){
body[data-tab=record] .rec{padding:10px 14px}
body[data-tab=record] .fc-time{font-size:40px;line-height:1.1}
body[data-tab=record] .fc-subj button{min-height:40px;padding:0 4px}
body[data-tab=record] .fc-sub{margin:0 0 6px}
body[data-tab=record] .moods{margin:6px 0}
body[data-tab=record] .moods button,body[data-tab=record] .seg button{min-height:34px;padding-top:4px;padding-bottom:4px}
body[data-tab=record] .fld{min-height:44px}
body[data-tab=record] .fields{gap:6px}
body[data-tab=record] .fields textarea,body[data-tab=record] .fld textarea,body[data-tab=record] .fld input{min-height:38px;height:38px;padding-top:6px;padding-bottom:6px}
body[data-tab=record] #save,body[data-tab=record] .rec>button.primary{min-height:40px}
}
@media(max-width:899px){.top>div:first-child{display:grid;grid-template-columns:auto auto;justify-content:start;column-gap:8px;align-items:baseline}.top>div:first-child h1{display:contents}.top .title-link{grid-column:1/3;grid-row:1}.top #date{grid-column:1;grid-row:2}.top .countdown{grid-column:2;grid-row:2;font-size:12px}}
@media(max-width:899px){.top #date{white-space:nowrap;font-size:12px}.top .countdown{white-space:nowrap;font-size:12px}.top>div:first-child{column-gap:6px}}
@media(max-width:899px){
body[data-tab=lessons] main [data-tab=lessons]{display:flex!important;flex-direction:column;min-height:0;max-height:100%}
body[data-tab=lessons] main [data-tab=lessons] #lessons{flex:1 1 auto;min-height:0;max-height:none!important;overflow-y:auto!important;padding-bottom:16px}
body[data-tab=lessons] main{display:flex;flex-direction:column;min-height:0}
}
@media(max-width:899px){body[data-tab=record] .fields{gap:10px}body[data-tab=record] .moods{margin:10px 0}body[data-tab=record] #save-record{margin-top:14px}body[data-tab=record] .fc-subj{margin-bottom:6px}}
@media(max-width:899px){
body[data-tab=notes] .note-row{flex-wrap:wrap;gap:10px;margin-top:10px}
body[data-tab=notes] .note-row textarea#n-points{flex:1 1 100%;min-height:150px;line-height:1.7;padding:10px 12px}
body[data-tab=notes] .note-row .ghost{flex:1 1 0;min-height:42px}
body[data-tab=notes] .note-row #save-note{min-height:46px}
body[data-tab=notes] .note-row #n-title,body[data-tab=notes] .note-row #n-subject{min-height:44px}
}
@media(max-width:899px){
body[data-tab=record] main [data-tab=record].rec{display:flex!important;flex-direction:column;min-height:100%;max-height:100%}
body[data-tab=record] .rec .fields{flex:1 1 auto;display:flex;flex-direction:column;justify-content:flex-start}
body[data-tab=record] .rec #f-review{min-height:96px}
body[data-tab=record] #save-record{margin-top:auto}
body[data-tab=record] .fields .fld{align-items:stretch}
}
.moods.seg{grid-template-columns:repeat(3,1fr)}
@media(max-width:899px){body[data-tab=record] .rec #f-review{height:96px!important;min-height:96px!important}}
.fc-st-top{grid-template-columns:1fr 1fr}.fc-st-top>div:first-child{grid-column:1/3}
.fc-st-top>div:first-child b{font-size:20px}.fc-st-top>div:not(:first-child) b{font-size:13px;line-height:1.4;display:block}
.fc-per-row{align-items:center}.fc-per{flex:1;font-size:14px;color:var(--fg)}.fc-per-row input{flex:none;width:120px}
.fc-add .primary:disabled{opacity:.4}
.fc-del{transition:none}
.fc-per-row input{width:136px!important}
@media(max-width:899px){.fc-head h2{flex:none!important}.fc-head .fc-tog{margin-left:2px}.fc-head .fc-hist{margin-left:auto}}
.top .ds{display:none}
@media(max-width:899px){
.top>div:first-child{display:block;flex:1;min-width:0}
.top>div:first-child h1{display:flex;align-items:center;gap:6px;margin:0}
.top .title-link{grid-column:auto;white-space:nowrap}
.top .dl{display:none}.top .ds{display:inline}
.top .countdown{font-size:11px;font-weight:600;color:var(--fg,inherit);border:1px solid var(--line);border-radius:999px;padding:1px 8px;line-height:16px}
.top #date{display:block;margin-top:2px;font-size:12px;white-space:nowrap}
.top-actions{grid-template-columns:repeat(5,35px)!important;gap:3px!important}
.top-actions .icon-btn{width:35px!important;min-width:35px!important;height:35px!important;min-height:35px!important}
}
@media(max-width:899px){.top-actions{gap:8px!important;grid-template-columns:repeat(5,33px)!important}.top-actions .icon-btn{width:33px!important;min-width:33px!important;height:33px!important;min-height:33px!important}.top{gap:4px;padding-right:12px}.top .countdown{padding:1px 6px}.top>div:first-child h1{gap:5px}}
@media(min-width:385px) and (max-width:899px){.top-actions{gap:12px!important;grid-template-columns:repeat(5,38px)!important}.top-actions .icon-btn{width:38px!important;min-width:38px!important;height:38px!important;min-height:38px!important}.top-actions svg{width:22px!important;height:22px!important}.top{padding-right:16px}}
@media(min-width:385px) and (max-width:899px){.top-actions{gap:12px!important;grid-template-columns:repeat(5,34px)!important}.top-actions .icon-btn{width:34px!important;min-width:34px!important;height:34px!important;min-height:34px!important}.top-actions svg{width:20px!important;height:20px!important}}
@media(max-width:384px){.top-actions{gap:8px!important;grid-template-columns:repeat(5,31px)!important}.top-actions .icon-btn{width:31px!important;min-width:31px!important;height:31px!important;min-height:31px!important}}
@media(max-width:899px){.top>div:first-child{display:grid!important;grid-template-columns:auto auto;justify-content:start;align-items:center;column-gap:8px;row-gap:2px}.top>div:first-child h1{display:contents!important}.top .title-link{grid-column:1/3;grid-row:1}.top #date{grid-column:1;grid-row:2;margin:0}.top .countdown{grid-column:2;grid-row:2;font-size:11px;padding:0 7px;line-height:16px}}
@media(min-width:385px) and (max-width:899px){.top-actions{gap:10px!important;grid-template-columns:repeat(5,38px)!important}.top-actions .icon-btn{width:38px!important;min-width:38px!important;height:38px!important;min-height:38px!important}.top-actions svg{width:22px!important;height:22px!important}}
@media(max-width:384px){.top-actions{gap:7px!important;grid-template-columns:repeat(5,34px)!important}.top-actions .icon-btn{width:34px!important;min-width:34px!important;height:34px!important;min-height:34px!important}}
@media(max-width:899px){.top h1,.top .title-link{font-size:28px!important;line-height:1.15}}
.n-tools{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:8px}
.n-tools .ghost{min-height:34px!important;height:34px;min-width:0!important;padding:0 8px!important;font-size:13px!important;border-radius:9px!important;width:100%}
.n-save{display:block;width:100%!important;margin-top:10px!important;min-height:46px!important}


/* phase 1: calm study-desk visual system */
:root{--bg:#f7f4ef;--fg:#1d2433;--mut:#707887;--card:#fffdfa;--line:#e6e0d8;--acc:#3949ab;--accfg:#fff;--soft:#eef0ff;--warm:#b97935;--shadow:0 10px 28px rgba(42,35,26,.07)}
@media(prefers-color-scheme:dark){:root{--bg:#11141b;--fg:#eef1f7;--mut:#9aa3b2;--card:#1a1e27;--line:#303744;--acc:#9aa8ff;--accfg:#10131b;--soft:#252b47;--warm:#e2a45f;--shadow:0 10px 28px rgba(0,0,0,.2)}}
body{background:radial-gradient(circle at 92% -10%,rgba(57,73,171,.08),transparent 32rem),var(--bg);letter-spacing:.005em}
.top{padding-top:max(16px,env(safe-area-inset-top));padding-bottom:10px}
.top h1{font-weight:750;letter-spacing:-.02em}.countdown{color:var(--warm);font-weight:650}
.card{border-color:color-mix(in srgb,var(--line) 82%,var(--acc) 18%);border-radius:18px;box-shadow:var(--shadow)}
.eyebrow{display:block;color:var(--mut);font-size:11px;font-weight:750;letter-spacing:.13em;text-transform:uppercase;margin-bottom:3px}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:9px}.section-head h2{margin:0}
.status-note{color:var(--acc);font-size:12px;font-weight:700;white-space:nowrap}
.tasks-card h2{letter-spacing:.04em}.task-progress{height:5px;background:var(--line);border-radius:99px;overflow:hidden;margin:0 0 3px}.task-progress i{display:block;width:0;height:100%;background:linear-gradient(90deg,var(--acc),#7180e2);border-radius:inherit;transition:width .35s ease}
#now{background:linear-gradient(145deg,color-mix(in srgb,var(--card) 86%,var(--soft) 14%),var(--card))}
#now>h2{margin-bottom:6px}.now-name{font-size:clamp(25px,5vw,32px);letter-spacing:-.04em}.now-meta{font-variant-numeric:tabular-nums}.bar{height:7px;background:color-mix(in srgb,var(--line) 80%,var(--acc) 20%);margin:12px 0}.bar i{background:linear-gradient(90deg,var(--acc),#7f8ce5)}
.sub{letter-spacing:.04em}.focus{background:linear-gradient(150deg,var(--soft),var(--card) 64%);border-color:color-mix(in srgb,var(--acc) 24%,var(--line))}.fc-title{flex:1}.fc-title h2{margin:0}.fc-time{color:var(--acc);letter-spacing:-.035em}.fc-time:focus-visible{outline:3px solid color-mix(in srgb,var(--acc) 35%,transparent);outline-offset:4px;border-radius:8px}.fc-sub{font-weight:600}.fc-subj button{border-color:color-mix(in srgb,var(--line) 78%,var(--acc) 22%);background:color-mix(in srgb,var(--card) 80%,transparent);transition:background-color .2s,border-color .2s,transform .2s}.fc-subj button.on{border-color:var(--acc);background:var(--soft);color:var(--acc);font-weight:750}.fc-subj button.run{box-shadow:inset 0 -3px 0 var(--acc)}
.prog,.task-progress{border-radius:99px}.prog i{background:linear-gradient(90deg,var(--acc),#7180e2)}.primary{background:var(--acc);box-shadow:0 6px 16px color-mix(in srgb,var(--acc) 22%,transparent)}.primary:disabled{opacity:.45;box-shadow:none}.ghost{background:color-mix(in srgb,var(--card) 76%,transparent)}
.item{border-color:color-mix(in srgb,var(--line) 84%,var(--acc) 16%)}.item.done .t{opacity:.7}.chk{border-color:color-mix(in srgb,var(--fg) 70%,var(--acc) 30%)}.chk[aria-checked=true]{background:var(--acc);border-color:var(--acc)}
.tabs{box-shadow:0 -8px 24px rgba(42,35,26,.05)}.tabs button[aria-selected=true]{color:var(--acc);box-shadow:inset 0 2px 0 var(--acc)}
.banner{border-color:var(--warm);background:color-mix(in srgb,var(--card) 88%,var(--warm) 12%);color:var(--fg)}.toast{box-shadow:0 8px 22px rgba(0,0,0,.18)}
@media(max-width:899px){main .card{margin:7px 0}.card{padding:15px}.fc-time{font-size:42px}.section-head{align-items:center}}
.item .t.task-copy{display:flex;flex-direction:column;gap:2px;min-width:0;white-space:normal;overflow:visible;text-overflow:clip}
.task-copy .task-title{display:block;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.task-pack{list-style:none;border-top:1px solid var(--line);padding:8px 0 2px}
.task-pack:first-child{border-top:0;padding-top:4px}
.task-pack-name{font-size:14px;font-weight:750;padding:0 0 2px}
.task-pack-list .item{min-height:42px;padding:4px 0}
.task-pack-list .item:first-child{border-top:0}
.task-pack-list .task-title{white-space:normal;overflow:visible;text-overflow:clip}
.task-copy .task-title,.task-pack-list .task-title{display:flex;align-items:center;gap:6px;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:clip}
.task-title .task-activity{flex:1 1 auto;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.task-title .tag,.task-subject-suffix{flex:0 0 auto}
.task-subject-suffix{color:var(--mut);font-size:11px;font-weight:750;white-space:nowrap}
.lv-bar{height:8px;border:1px solid var(--line);box-sizing:border-box;border-radius:99px;background:color-mix(in srgb,var(--line) 20%,transparent);overflow:hidden}
.lv-bar i{border-radius:inherit;transition:width .3s ease}
.lv-upcoming{list-style:none;margin:0 2px 6px;font-size:11px}

.fc-subj[data-collapsed=true]{display:flex;justify-content:center}
.fc-subj[data-collapsed=true] button{flex:none;min-width:82px}
@media(min-width:900px) and (min-height:560px){
 .top{display:grid;grid-template-columns:minmax(0,1fr) max-content minmax(0,1fr);column-gap:12px}
 .top>div:first-child{justify-self:start;min-width:0}
 .top>.focus{justify-self:center;align-self:center;justify-content:center;justify-items:center;width:max-content;max-width:100%;margin:0!important}
 .top>.focus .fc-title{display:none}
 .top>.focus .fc-time{text-align:center}
 .top>.focus .fc-subj{justify-self:center}
 .top-actions{justify-self:end}
 .tasks-card #task-count,.tasks-card .task-progress{display:none!important}
}
@media(max-width:899px){
 .ghost,.icon-btn,.fc-tog,.fc-subj button,.moods button,.tabs button{
  border-radius:12px;
  transition:transform .12s ease,box-shadow .12s ease,background-color .14s ease,border-color .14s ease;
 }
 .ghost,.icon-btn,.fc-tog,.fc-subj button,.moods button{
  background:linear-gradient(180deg,var(--card),color-mix(in srgb,var(--bg) 42%,var(--card)));
  box-shadow:0 2px 0 color-mix(in srgb,var(--line) 68%,var(--fg) 32%),0 4px 10px rgba(29,36,51,.06);
 }
 .primary{
  border-radius:13px;
  background:linear-gradient(180deg,var(--acc),color-mix(in srgb,var(--acc) 86%,var(--fg)));
  box-shadow:0 3px 0 color-mix(in srgb,var(--acc) 60%,var(--fg) 40%),0 7px 14px color-mix(in srgb,var(--acc) 20%,transparent);
 }
 .chk{box-shadow:0 2px 0 color-mix(in srgb,var(--line) 50%,var(--fg) 50%);transition:transform .12s ease,box-shadow .12s ease,background-color .12s ease}
 .fc-subj button{min-height:50px;font-weight:700}
 .fc-subj button.on{background:linear-gradient(180deg,var(--acc),color-mix(in srgb,var(--acc) 84%,var(--fg)));color:var(--accfg);border-color:var(--acc);box-shadow:0 3px 0 color-mix(in srgb,var(--acc) 60%,var(--fg) 40%),0 6px 12px color-mix(in srgb,var(--acc) 20%,transparent)}
 .tabs button{font-weight:600}
 .tabs button[aria-selected=true]{background:color-mix(in srgb,var(--soft) 72%,var(--card));box-shadow:inset 0 2px 0 var(--acc)}
 button:active,a.icon-btn:active,.chk:active{transform:translateY(2px) scale(.98);box-shadow:0 0 0 1px color-mix(in srgb,var(--acc) 35%,transparent)}
 .primary:active{transform:translateY(2px);box-shadow:0 1px 0 color-mix(in srgb,var(--acc) 60%,var(--fg) 40%)}
}

/* original study-brand treatment for the timer mode control */
.fc-brand-mark{display:inline-flex;align-items:center;justify-content:center;gap:2px;flex:none;width:22px;height:22px;border:1px solid color-mix(in srgb,var(--acc) 28%,var(--line));border-radius:7px;background:linear-gradient(145deg,color-mix(in srgb,var(--acc) 12%,var(--card)),var(--card));box-shadow:0 2px 5px color-mix(in srgb,var(--acc) 12%,transparent)}
.fc-brand-mark i{display:block;width:2.5px;border-radius:99px;background:var(--acc)}
.fc-brand-mark i:nth-child(1){height:6px;opacity:.62}
.fc-brand-mark i:nth-child(2){height:11px;opacity:.82}
.fc-brand-mark i:nth-child(3){height:8px}
.fc-tog{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-width:88px!important;min-height:32px!important;padding:0 11px!important;border:1px solid color-mix(in srgb,var(--acc) 28%,var(--line));border-radius:11px;background:linear-gradient(145deg,color-mix(in srgb,var(--acc) 11%,var(--card)),var(--card));color:var(--acc);font-size:13px;font-weight:800;letter-spacing:.025em;box-shadow:0 2px 6px color-mix(in srgb,var(--acc) 12%,transparent)}
.fc-tog .fc-brand-mark{width:18px;height:18px;border-radius:6px;box-shadow:none}


/* v93: monochrome study interface; reserve color for attention states */
:root{
 --bg:#f4f4f2;--fg:#171717;--mut:#707070;--card:#fff;--line:#dededb;
 --acc:#272727;--accfg:#fff;--soft:#f0f0ee;--warm:#8a4b08;--signal:#8a4b08;
 --signal-soft:#fff4df;--shadow:0 8px 24px rgba(0,0,0,.055)
}
@media(prefers-color-scheme:dark){
 :root{
  --bg:#121212;--fg:#ededed;--mut:#a0a0a0;--card:#1b1b1b;--line:#353535;
  --acc:#e6e6e6;--accfg:#141414;--soft:#252525;--warm:#f3c969;--signal:#f3c969;
  --signal-soft:#382e1d;--shadow:0 8px 24px rgba(0,0,0,.22)
 }
}
body{background:var(--bg);color:var(--fg)}
.countdown,.status-note{color:var(--mut)!important}
.card{border-color:var(--line);box-shadow:var(--shadow)}
.ypt-hero{background:linear-gradient(135deg,var(--bg),var(--card))}
#now,.focus{background:var(--card)}
.task-progress i,.bar i,.prog i,.lv-bar i,.fc-bar i{background:var(--acc)}
.fc-prog.over i{background:linear-gradient(90deg,var(--signal),color-mix(in srgb,var(--signal) 72%,var(--card)))}
.fc-time{color:var(--fg)}
.focus.is-running .fc-time,.focus.is-running .fc-sub{color:var(--signal)}
.fc-subj button{border-color:var(--line);background:var(--card);color:var(--fg)}
.fc-subj button.on{border-color:var(--acc);background:var(--acc);color:var(--accfg);box-shadow:none}
.fc-subj button.run{box-shadow:inset 0 -3px 0 var(--signal)}
.primary{background:var(--acc);color:var(--accfg);box-shadow:0 4px 12px rgba(0,0,0,.12)}
.chk[aria-checked=true]{background:var(--acc);border-color:var(--acc)}
.tabs button[aria-selected=true]{color:var(--fg);background:var(--soft);box-shadow:inset 0 2px 0 var(--acc)}
.banner{border-color:var(--signal);background:var(--signal-soft);color:var(--fg)}
.fc-time:focus-visible,.fc-tog:focus-visible{outline:2px solid var(--fg);outline-offset:3px}
.fc-subject-icon{display:block;flex:none;color:currentColor}
@media(hover:hover){
 .icon-btn:hover,.ghost:hover,.primary:hover,.moods button:hover,.tabs button:hover,.fc-subj button:hover,.fc-hist:hover{
  border-color:var(--fg);box-shadow:0 0 0 2px color-mix(in srgb,var(--fg) 18%,transparent);transform:translateY(-1px)
 }
 .chk:hover{box-shadow:0 0 0 3px color-mix(in srgb,var(--fg) 18%,transparent)}
}
button:active,a.icon-btn:active,.chk:active,.fc-hist:active{box-shadow:0 0 0 1px color-mix(in srgb,var(--fg) 30%,transparent)}
@media(prefers-reduced-motion:reduce){
 *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}
}


/* v94 task phase badges */
.task-copy .task-title{display:flex;align-items:center;gap:5px;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:clip}
.task-activity{display:block;flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.task-title .tag{flex:none;margin:0;padding:1px 7px;border-radius:999px;font-size:11px;font-weight:650;line-height:1.5;letter-spacing:.02em}
.tag-prestudy{color:#1d4ed8;background:#eff6ff;border-color:#bfdbfe}
.tag-learn{color:#166534;background:#f0fdf4;border-color:#bbf7d0}
.tag-review{color:#92400e;background:#fffbeb;border-color:#fcd34d}
.tag-practice{color:#6d28d9;background:#f5f3ff;border-color:#ddd6fe}
.tag-recommended{color:#0f766e;background:#f0fdfa;border-color:#99f6e4}
.tag-backup,.tag-neutral{color:#525252;background:#f4f4f5;border-color:#d4d4d8}
.task-pack-list .task-title{flex-wrap:wrap;white-space:normal;overflow:visible}
.task-pack-list .task-activity{white-space:normal;overflow:visible;text-overflow:clip}
@media(prefers-color-scheme:dark){
 .tag-prestudy{color:#93c5fd;background:#172554;border-color:#1e40af}
 .tag-learn{color:#86efac;background:#052e16;border-color:#166534}
 .tag-review{color:#fcd34d;background:#422006;border-color:#a16207}
 .tag-practice{color:#c4b5fd;background:#2e1065;border-color:#6d28d9}
 .tag-recommended{color:#5eead4;background:#042f2e;border-color:#0f766e}
 .tag-backup,.tag-neutral{color:#d4d4d4;background:#292929;border-color:#555}
}


/* v95 timer standby stationery and lively subject reflections */
.fc-heading{display:flex;align-items:center;gap:8px;flex:1;min-width:0}
.fc-heading h2{margin:0;min-width:0}
.fc-heading .fc-subject-icon{display:block;flex:none;width:22px;height:22px;overflow:visible;transform-origin:50% 60%;transition:filter .25s ease}
.fc-heading .fc-glint{stroke:var(--fc-subject-glow,var(--mut));stroke-width:2;stroke-dasharray:2 1.5;opacity:.62;transition:opacity .2s ease}
#fc-heading-wrap[data-subject="英文"]{--fc-subject-glow:#cf657d}
#fc-heading-wrap[data-subject="化學"]{--fc-subject-glow:#c78a24}
#fc-heading-wrap[data-subject="生物"]{--fc-subject-glow:#57945d}
#fc-heading-wrap[data-subject="物理"]{--fc-subject-glow:#6f8fc9}
#fc-heading-wrap[data-subject="生化"]{--fc-subject-glow:#3899a4}
#fc-heading-wrap[data-subject="Anki"]{--fc-subject-glow:#886ab7}
#fc-heading-wrap[data-subject="其他"]{--fc-subject-glow:#898989}
#fc-heading-wrap[data-subject] .fc-subject-icon{filter:drop-shadow(0 0 2px color-mix(in srgb,var(--fc-subject-glow) 38%,transparent))}
#fc-mode[hidden],.fc-goal[hidden]{display:none!important}
#focus.is-running #fc-heading-wrap .fc-glint{animation:fc-reflect 1.1s ease-in-out infinite alternate;opacity:1}
@keyframes fc-effort{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-1.2px) rotate(2deg)}}
@keyframes fc-reflect{0%{stroke-dashoffset:5;opacity:.35}100%{stroke-dashoffset:0;opacity:1}}
@media(prefers-reduced-motion:reduce){#focus.is-running #fc-heading-wrap .fc-subject-icon,#focus.is-running #fc-heading-wrap .fc-glint{animation:none!important}}


/* v96: single-control timer flow */
.fc-head{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.fc-heading{display:flex;align-items:center;gap:8px;min-width:0}
.fc-heading .fc-subject-icon{width:24px;height:24px;overflow:visible;transform-origin:50% 60%;transition:filter .25s ease}
.fc-hist{margin-left:auto}
.fc-main{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;width:100%;min-height:112px;padding:14px 12px;border:1px solid var(--line);border-radius:14px;background:linear-gradient(145deg,var(--card),var(--soft));color:var(--fg);cursor:pointer;transition:border-color .18s ease,background-color .18s ease,transform .16s ease,box-shadow .18s ease}
.fc-main-title{font-size:16px;font-weight:700;line-height:1.25}
.fc-main:hover{border-color:var(--mut);box-shadow:0 4px 16px rgba(0,0,0,.08)}
.fc-main:active{transform:scale(.992)}
.fc-main:focus-visible{outline:3px solid color-mix(in srgb,var(--acc) 52%,transparent);outline-offset:3px}
.fc-main[aria-busy="true"]{cursor:wait}
.fc-main .fc-time{cursor:inherit;user-select:none}
.fc-goal{display:flex;align-items:center;gap:10px;margin-top:9px}
.fc-goal .fc-prog{flex:1;min-width:0}
.fc-goal[hidden],.fc-subj[hidden]{display:none!important}
.fc-subj{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin-top:10px}
.fc-subj button{min-width:0;min-height:46px;padding:8px 4px;border:1px solid var(--line);border-radius:11px;background:var(--card);color:var(--fg);font-size:14px;font-weight:650;transition:transform .14s ease,border-color .18s ease,background .18s ease}
.fc-subj button:hover{border-color:var(--mut);background:var(--soft)}
.fc-subj button:active{transform:scale(.96)}
.fc-subj button:focus-visible{outline:3px solid color-mix(in srgb,var(--acc) 52%,transparent);outline-offset:2px}
#focus.is-choosing #fc-heading-wrap .fc-subject-icon{animation:fc-pencil-bounce .46s cubic-bezier(.2,.8,.25,1)}
#focus.is-choosing #fc-main{animation:fc-choice-pop .42s cubic-bezier(.2,.8,.25,1)}
#focus.is-choosing #fc-subj:not([hidden]){animation:fc-picker-in .22s ease-out}
#focus.is-running #fc-heading-wrap .fc-subject-icon{animation:fc-effort 1.05s ease-in-out infinite;filter:drop-shadow(0 0 5px color-mix(in srgb,var(--fc-subject-glow,var(--signal)) 68%,transparent))}
#focus.is-running .fc-main{border-color:color-mix(in srgb,var(--signal) 32%,var(--line))}
@keyframes fc-pencil-bounce{0%{transform:rotate(0) scale(1)}38%{transform:rotate(-12deg) scale(1.18)}72%{transform:rotate(7deg) scale(.96)}100%{transform:rotate(0) scale(1)}}
@keyframes fc-choice-pop{0%{transform:scale(1)}42%{transform:scale(1.025)}100%{transform:scale(1)}}
@keyframes fc-picker-in{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:899px){.fc-main{min-height:100px}.fc-main .fc-time{font-size:40px}.fc-subj{gap:5px}.fc-subj button{font-size:13px}}
@media(min-width:900px) and (min-height:560px){
  .top>.focus{display:flex!important;flex:0 1 360px;flex-direction:column;align-items:stretch!important;justify-content:flex-start!important;justify-items:stretch!important;gap:8px;width:min(360px,100%);max-width:360px;margin:0!important;padding:12px 14px}
  .top>.focus .fc-head{display:flex!important;grid-area:auto;justify-content:space-between;margin:0}
  .top>.focus .fc-main-title{font-size:15px}
  .top>.focus .fc-main{grid-area:auto;width:100%;min-height:100px}
  .top>.focus .fc-main .fc-time{grid-area:auto;font-size:32px}
  .top>.focus .fc-goal{grid-area:auto;width:100%;margin-top:2px}
  .top>.focus .fc-subj{display:grid;grid-area:auto;grid-template-columns:repeat(5,minmax(0,1fr));width:100%;margin-top:0}
  .top>.focus .fc-subj[hidden]{display:none!important}
}
@media(prefers-reduced-motion:reduce){
  .fc-main,.fc-subj button{transition:none!important}
  #focus.is-choosing #fc-heading-wrap .fc-subject-icon,#focus.is-choosing #fc-main,#focus.is-choosing #fc-subj:not([hidden]),#focus.is-running #fc-heading-wrap .fc-subject-icon,#focus.is-running #fc-time{animation:none!important}
}


/* v98: compact horizontal timer, chamfered insets, balanced header */
@media (min-width:900px) and (min-height:560px){
  .top>div:first-child{position:relative;isolation:isolate;margin-left:4px;padding:8px 15px 8px 19px}
  .top>div:first-child::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:var(--card);border:1px solid var(--line);clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 10px,100% calc(100% - 10px),calc(100% - 10px) 100%,10px 100%,0 calc(100% - 10px),0 10px)}
  .top>div:first-child::after{content:"";position:absolute;left:9px;top:14px;width:2px;height:18px;background:var(--mut);transform:skew(-18deg);pointer-events:none}
  .top>div:first-child #date{margin-top:3px;letter-spacing:.04em}

  .top-actions{grid-template-columns:repeat(5,46px)!important;gap:8px!important;margin:0 18px 0 4px!important}
  .top-actions .icon-btn{position:relative;isolation:isolate;width:46px!important;min-width:46px!important;height:46px!important;min-height:46px!important;padding:0;border:0!important;border-radius:0!important;background:transparent!important}
  .top-actions .icon-btn::before,.top-actions .icon-btn::after{content:"";position:absolute;inset:0;pointer-events:none;clip-path:polygon(8px 0,calc(100% - 8px) 0,100% 8px,100% calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,0 calc(100% - 8px),0 8px)}
  .top-actions .icon-btn::before{z-index:-2;background:var(--line)}
  .top-actions .icon-btn::after{inset:1px;z-index:-1;background:var(--card);clip-path:polygon(7px 0,calc(100% - 7px) 0,100% 7px,100% calc(100% - 7px),calc(100% - 7px) 100%,7px 100%,0 calc(100% - 7px),0 7px)}
  .top-actions .icon-btn:hover{box-shadow:none!important}
  .top-actions .icon-btn:hover::before{background:var(--mut)}
  .top-actions .icon-btn:focus-visible{outline:2px solid var(--fg);outline-offset:3px}

  .top>.focus{position:relative;isolation:isolate;display:grid!important;grid-template-columns:22px minmax(0,1fr) 38px;grid-template-areas:"timer-icon timer-main timer-history" "timer-goal timer-goal timer-goal";align-items:center;gap:6px 9px;flex:0 1 440px;width:min(440px,38vw);min-width:320px;max-width:440px;margin:0 auto!important;padding:9px 13px!important;border:0!important;border-radius:0!important;background:transparent!important}
  .top>.focus::before,.top>.focus::after{content:"";position:absolute;pointer-events:none;clip-path:polygon(11px 0,calc(100% - 11px) 0,100% 11px,100% calc(100% - 11px),calc(100% - 11px) 100%,11px 100%,0 calc(100% - 11px),0 11px)}
  .top>.focus::before{inset:0;z-index:-2;background:var(--line)}
  .top>.focus::after{inset:1px;z-index:-1;background:var(--card);clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 10px,100% calc(100% - 10px),calc(100% - 10px) 100%,10px 100%,0 calc(100% - 10px),0 10px)}
  .top>.focus .fc-head{display:contents!important;margin:0}
  .top>.focus .fc-heading{grid-area:timer-icon;flex:none;width:22px;min-width:22px}
  .top>.focus .fc-main{position:relative;isolation:isolate;grid-area:timer-main;display:flex!important;flex-direction:column!important;align-items:center;justify-content:center;gap:3px;width:100%;min-width:0;min-height:50px!important;padding:7px 13px;border:0!important;border-radius:0!important;background:transparent!important;text-align:left}
  .top>.focus .fc-main::before,.top>.focus .fc-main::after{content:"";position:absolute;pointer-events:none;clip-path:polygon(8px 0,calc(100% - 8px) 0,100% 8px,100% calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,0 calc(100% - 8px),0 8px)}
  .top>.focus .fc-main::before{inset:0;z-index:-2;background:var(--line)}
  .top>.focus .fc-main::after{inset:1px;z-index:-1;background:var(--card);clip-path:polygon(7px 0,calc(100% - 7px) 0,100% 7px,100% calc(100% - 7px),calc(100% - 7px) 100%,7px 100%,0 calc(100% - 7px),0 7px)}
  .top>.focus .fc-main:hover{box-shadow:none!important}
  .top>.focus .fc-main:hover::before{background:var(--mut)}
  .top>.focus.is-running .fc-main::before{background:color-mix(in srgb,var(--signal) 42%,var(--line))}
  .top>.focus .fc-main-title{flex:none;font-size:15px;white-space:nowrap}
  .top>.focus .fc-main .fc-time{flex:none;font-size:26px;line-height:1;white-space:nowrap}
  .top>.focus .fc-hist{position:relative;isolation:isolate;grid-area:timer-history;display:flex;align-items:center;justify-content:center;width:36px;min-width:36px;min-height:36px;margin:0!important;padding:0;border:0!important;border-radius:0!important;background:transparent!important}
  .top>.focus .fc-hist::before,.top>.focus .fc-hist::after{content:"";position:absolute;inset:0;pointer-events:none;clip-path:polygon(7px 0,calc(100% - 7px) 0,100% 7px,100% calc(100% - 7px),calc(100% - 7px) 100%,7px 100%,0 calc(100% - 7px),0 7px)}
  .top>.focus .fc-hist::before{z-index:-2;background:var(--line)}
  .top>.focus .fc-hist::after{inset:1px;z-index:-1;background:var(--card);clip-path:polygon(6px 0,calc(100% - 6px) 0,100% 6px,100% calc(100% - 6px),calc(100% - 6px) 100%,6px 100%,0 calc(100% - 6px),0 6px)}
  .top>.focus .fc-hist:focus-visible{outline:2px solid var(--fg);outline-offset:3px}
  .top>.focus .fc-goal{grid-area:timer-goal;width:100%;min-width:0;margin:0!important;gap:8px}
  .top>.focus .fc-goal .fc-prog{height:4px;margin:0;border-radius:2px}
  .top>.focus .fc-goal #fc-goal-t{font-size:11px;white-space:nowrap}
  .top>.focus .fc-subj{grid-area:timer-subjects;width:100%;margin:0!important}
  .top>.focus .fc-subj[hidden]{display:none!important}
  .top>.focus.is-choosing{grid-template-areas:"timer-icon timer-main timer-history" "timer-goal timer-goal timer-goal" "timer-subjects timer-subjects timer-subjects"}
}


/* v98 follow-up: use the full desktop header width while keeping a deliberate right inset */
@media (min-width:900px) and (min-height:560px){
  .top{max-width:none;margin:0;padding:14px 18px 8px}
  .top>div:first-child{margin-left:0}
}


/* v99: iPhone-style continuous rounded corners, replacing polygon chamfers */
@media (min-width:900px) and (min-height:560px){
  .top>div:first-child::before{clip-path:none;border-radius:18px;corner-shape:squircle}
  .top-actions .icon-btn{border-radius:15px!important;corner-shape:squircle}
  .top-actions .icon-btn::before,.top-actions .icon-btn::after{clip-path:none;border-radius:15px;corner-shape:squircle}
  .top-actions .icon-btn::after{border-radius:14px}
  .top>.focus{border-radius:22px!important;corner-shape:squircle}
  .top>.focus::before,.top>.focus::after{clip-path:none;border-radius:22px;corner-shape:squircle}
  .top>.focus::after{border-radius:21px}
  .top>.focus .fc-main{border-radius:15px!important;corner-shape:squircle}
  .top>.focus .fc-main::before,.top>.focus .fc-main::after{clip-path:none;border-radius:15px;corner-shape:squircle}
  .top>.focus .fc-main::after{border-radius:14px}
  .top>.focus .fc-hist{border-radius:13px!important;corner-shape:squircle}
  .top>.focus .fc-hist::before,.top>.focus .fc-hist::after{clip-path:none;border-radius:13px;corner-shape:squircle}
  .top>.focus .fc-hist::after{border-radius:12px}
}


/* v99 whole-panel repair: aligned shell, responsive columns, iPhone-like arcs */
@supports (corner-shape:squircle){
  .card,.banner,.icon-btn,.ghost,.primary,.fc-main,.fc-hist,.fc-subj button,.tabs,.tabs button{corner-shape:squircle}
  .top>div:first-child::before,.top>div:first-child::after,.top-actions .icon-btn::before,.top-actions .icon-btn::after,.top>.focus::before,.top>.focus::after,.top>.focus .fc-main::before,.top>.focus .fc-main::after,.top>.focus .fc-hist::before,.top>.focus .fc-hist::after{corner-shape:squircle}
}
@media (min-width:900px) and (min-height:560px){
  .top{width:100%;max-width:none;margin:0;padding:14px 18px 8px}
  .top-actions{margin:0 18px 0 4px!important}
  .banner{width:calc(100% - 36px);max-width:none;margin:8px 18px 0}
  main{width:100%;max-width:none!important;margin:0!important;padding:12px 18px 8px!important;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) minmax(0,1fr);gap:12px}
  main>.col,.col,.col>.card{min-width:0}
}
@media (min-width:900px) and (max-width:1099px) and (min-height:560px){
  .top{grid-template-columns:minmax(0,1fr) minmax(300px,340px) minmax(0,1fr);column-gap:10px}
  .top>.focus{width:100%;max-width:340px;min-width:0;justify-self:center}
  .top-actions{grid-template-columns:repeat(5,40px)!important;gap:6px!important;margin:0 12px 0 4px!important}
  .top-actions .icon-btn{width:40px!important;min-width:40px!important;height:40px!important;min-height:40px!important}
  .top-actions svg{width:20px!important;height:20px!important}
  main{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;grid-auto-rows:minmax(min-content,auto);align-content:start;overflow-x:hidden;overflow-y:auto!important}
  #now{grid-column:1;grid-row:1}
  .tasks-card{grid-column:1;grid-row:2}
  .rec{grid-column:2;grid-row:1}
  .note-card{grid-column:2;grid-row:2}
  .col:nth-child(3)>[data-tab=lessons]{grid-column:1/-1;grid-row:3}
  main>footer[data-tab]{grid-column:1/-1;grid-row:4}
}
@media (max-width:899px){
  .top{width:100%;max-width:640px;margin:0 auto;padding-left:14px;padding-right:14px;gap:8px}
  .top>div:first-child{position:relative;flex:1 1 auto;min-width:0}
  .top>div:first-child::before{content:"";position:absolute;left:-7px;top:6px;width:2px;height:34px;border-radius:2px;background:var(--line);pointer-events:none}
  .top-actions{width:max-content;grid-template-columns:repeat(5,34px)!important;gap:6px!important;margin:0 8px 0 0!important}
  .top-actions .icon-btn{width:34px!important;min-width:34px!important;height:34px!important;min-height:34px!important}
  .top-actions svg{width:20px!important;height:20px!important}
}
@media (max-width:384px){
  .top{padding-left:12px;padding-right:14px;gap:6px}
  .top-actions{grid-template-columns:repeat(5,30px)!important;gap:5px!important;margin-right:6px!important}
  .top-actions .icon-btn{width:30px!important;min-width:30px!important;height:30px!important;min-height:30px!important}
  .top-actions svg{width:18px!important;height:18px!important}
}


/* v100: desktop timer keeps one shell and contains its progress track */
@media (min-width:900px) and (min-height:560px){
  .top>.focus .fc-main{border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important}
  .top>.focus .fc-main::before,.top>.focus .fc-main::after{content:none!important;display:none!important}
  .top>.focus .fc-goal{position:static!important;inset:auto!important;left:auto!important;right:auto!important;bottom:auto!important;width:100%;min-width:0;margin:0!important;align-self:stretch}
  .top>.focus .fc-goal .fc-prog{width:auto;min-width:0;flex:1 1 auto;margin:0}
}
.top .medical-mark{display:block;flex:none;width:20px;height:20px;color:var(--mut);transform:translateY(2px)}
@media(max-width:899px){.top .medical-mark{width:18px;height:18px;transform:none}}
.xp-explanation{margin:0 0 8px;font-size:12px}
.xp-explanation summary{color:var(--mut);cursor:pointer}
.xp-explanation p{margin:6px 0 10px;line-height:1.55}

/* v101: stable record controls, brand placement, and mobile note actions */
.top .brand-name{display:inline-flex;align-items:center;gap:6px;min-width:0}
.top .brand-name .medical-mark{flex:none}
@media (min-width:900px) and (min-height:560px){
  .top>div:first-child::after{content:none!important;display:none!important}
  .col>.rec{overflow-x:hidden;overflow-y:auto!important}
  .col>.rec>.rec-head,.col>.rec>.prog{flex:0 0 auto}
  .col>.rec>.moods.seg{flex:0 0 36px;min-height:36px;align-self:stretch}
  .col>.rec>.moods.seg>button{min-height:36px!important;min-width:0;white-space:nowrap}
  .col>.rec>.fields{min-width:0}
  .col>.rec>#save-record{flex:0 0 auto}
}
@media (max-width:899px){
  .top>div:first-child::before{content:none!important;display:none!important}
  .top>div:first-child{display:grid!important;grid-template-columns:auto auto;justify-content:start;align-items:center;column-gap:8px;row-gap:2px}
  .top>div:first-child h1{display:contents!important}
  .top .brand-name{grid-column:1/3;grid-row:1}
  .top #date{grid-column:1;grid-row:2;margin:0}
  .top .countdown{grid-column:2;grid-row:2;font-size:11px;padding:0 7px;line-height:16px}
}
@media (max-width:899px),(max-height:559px){
  body[data-tab=record] main [data-tab=record].rec{width:100%;min-width:0;overflow-x:hidden!important;overflow-y:auto!important}
  body[data-tab=record] main [data-tab=record].rec>.rec-head,
  body[data-tab=record] main [data-tab=record].rec>.prog,
  body[data-tab=record] main [data-tab=record].rec>.focus,
  body[data-tab=record] main [data-tab=record].rec>.moods.seg,
  body[data-tab=record] main [data-tab=record].rec>#save-record{flex-shrink:0}
  body[data-tab=record] main [data-tab=record].rec>.moods.seg{min-height:36px;flex-basis:36px;width:100%;align-self:stretch}
  body[data-tab=record] main [data-tab=record].rec>.moods.seg>button{min-height:34px!important;min-width:0;white-space:nowrap}
  body[data-tab=record] main [data-tab=record].rec>.fields{flex:1 0 auto;min-width:0;min-height:max-content}
  body[data-tab=record] main [data-tab=record].rec>#save-record{flex:0 0 auto}
  body[data-tab=record] .fc-subj{flex-shrink:0}
}
.n-tools{grid-template-columns:repeat(2,minmax(0,1fr))}

/* Subject-specific capsule suffixes: color is reserved for study focus. */
.task-subject-suffix{
  --subject-ink:var(--mut);
  display:inline-flex;align-items:center;justify-content:center;gap:3px;
  margin-inline-start:5px;padding:1px 8px 2px;
  border:1px solid color-mix(in srgb,var(--subject-ink) 48%,var(--line));
  border-radius:999px;corner-shape:squircle;
  color:var(--subject-ink);
  background:color-mix(in srgb,var(--card) 91%,var(--subject-ink) 9%);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--subject-ink) 12%,transparent),
    0 0 7px color-mix(in srgb,var(--subject-ink) 20%,transparent);
  font-size:11px;font-weight:700;line-height:1.35;white-space:nowrap;
  vertical-align:middle;flex:none;
  animation:task-subject-glow 2.8s ease-in-out infinite;
}
.task-subject-suffix[data-subject="化學"]{--subject-ink:#985c08}
.task-subject-suffix[data-subject="生化"]{--subject-ink:#167d83}
.task-subject-suffix[data-subject="生物"]{--subject-ink:#3e7b43}
.task-subject-suffix[data-subject="物理"]{--subject-ink:#536d9e}
.task-subject-suffix[data-subject="英文"]{--subject-ink:#a5455f}
.task-subject-suffix[data-subject="Anki"]{--subject-ink:#696969}
@keyframes task-subject-glow{
  0%,100%{box-shadow:0 0 0 1px color-mix(in srgb,var(--subject-ink) 12%,transparent),0 0 6px color-mix(in srgb,var(--subject-ink) 17%,transparent)}
  50%{box-shadow:0 0 0 1.5px color-mix(in srgb,var(--subject-ink) 22%,transparent),0 0 10px color-mix(in srgb,var(--subject-ink) 30%,transparent)}
}
@media(prefers-color-scheme:dark){
  .task-subject-suffix[data-subject="化學"]{--subject-ink:#e5b05f}
  .task-subject-suffix[data-subject="生化"]{--subject-ink:#6fc7c4}
  .task-subject-suffix[data-subject="生物"]{--subject-ink:#8cc788}
  .task-subject-suffix[data-subject="物理"]{--subject-ink:#91aeea}
  .task-subject-suffix[data-subject="英文"]{--subject-ink:#e99db0}
}
@media(prefers-reduced-motion:reduce){.task-subject-suffix{animation:none!important}}

/* v103: clean, uncompressed mood controls in the progress card */
.moods.seg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;align-items:stretch;margin:10px 0 14px;padding:0;border:0;border-radius:0;overflow:visible;flex:0 0 auto;min-height:0}
.moods.seg>button{min-width:0;min-height:44px!important;padding:0 10px;border:1px solid var(--line)!important;border-radius:999px!important;corner-shape:squircle;background:var(--card);color:var(--fg);font-size:14px;font-weight:650;line-height:1.2;white-space:nowrap;transition:background-color .16s ease,border-color .16s ease,box-shadow .16s ease}
.moods.seg>button[aria-checked=true]{background:var(--acc)!important;border-color:var(--acc)!important;color:var(--accfg)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 18%,transparent)}
.moods.seg>button:hover:not([aria-checked=true]){border-color:color-mix(in srgb,var(--fg) 45%,var(--line))!important;background:color-mix(in srgb,var(--card) 92%,var(--fg) 8%)}
.moods.seg>button:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
@media (min-width:900px) and (min-height:560px){
  .col>.rec>.moods.seg{flex:0 0 44px;min-height:44px;align-self:stretch}
  .col>.rec>.moods.seg>button{min-height:44px!important}
}
@media (max-width:899px),(max-height:559px){
  body[data-tab=record] main [data-tab=record].rec>.moods.seg{min-height:44px;flex:0 0 44px;width:100%;align-self:stretch}
  body[data-tab=record] main [data-tab=record].rec>.moods.seg>button{min-height:44px!important;min-width:0;white-space:nowrap}
}


/* v111: compact single-line task shells; keep metadata beside the semantic label */
.item.task-item{gap:6px;flex-wrap:nowrap}
.item>.task-subject-suffix{margin:0;flex:0 0 auto;align-self:center}
.item.task-item .task-copy{flex:1 1 0;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:clip;overflow-wrap:normal}
.item.task-item .task-copy .task-title{display:flex;align-items:center;flex-wrap:nowrap;gap:4px;min-width:0;width:100%;white-space:nowrap;overflow:hidden}
.item.task-item .task-copy .task-activity{display:block;flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;overflow-wrap:normal;font-size:14px;cursor:pointer}
.item.task-item .task-copy .task-title .tag{flex:0 0 auto}
.item.task-item>.ghost{flex:0 0 auto}
.item.task-item .task-activity:focus-visible{outline:2px solid var(--acc);outline-offset:-1px;border-radius:3px}
@media(max-width:384px){
  .item.task-item{gap:4px}
  .item.task-item>.chk{width:28px;height:28px}
  .item.task-item>.task-subject-suffix{font-size:10px;padding:1px 5px 2px}
  .item.task-item>.ghost{min-width:40px;min-height:36px;padding:0 6px;font-size:12px}
  .item.task-item .task-copy .task-title{gap:2px}
  .item.task-item .task-copy .tag{font-size:10px;padding-left:4px;padding-right:4px}
}
/* Expand only the checkbox hit target; preserve the visible box and row layout. */
@media(max-width:899px){
  .item.task-item>.chk::before{content:"";position:absolute;width:calc(100% + 4px);height:44px;left:-2px;top:50%;transform:translateY(-50%)}
  .item.task-item>.chk:has(+.task-subject-suffix)::before{width:44px}
}
.item .task-copy .tag{margin:0;flex:none}
.item.done>.task-subject-suffix{text-decoration:line-through}
.item.task-item .task-activity:hover{text-decoration:underline;text-decoration-style:dotted;text-underline-offset:3px}


/* Desktop open-space timer: equal outer tracks AND equal control tracks.
   Keep all overrides inside this breakpoint; mobile retains its original card. */
.fc-choice-icon{display:none}
@media (min-width:900px) and (min-height:560px){
  .top{position:relative;z-index:20;grid-template-columns:minmax(0,1fr) minmax(0,clamp(280px,34vw,560px)) minmax(0,1fr);column-gap:12px;align-items:center}
  .top>.focus,.top>.focus.is-choosing{
    /* Center the visible group: 24px subject SVG vs 18px history SVG = 1.5px optical correction. */
    position:relative!important;inset:auto;transform:translateX(1.5px);z-index:auto;
    display:grid!important;grid-template-columns:44px minmax(0,1fr) 44px!important;
    grid-template-areas:"timer-icon timer-main timer-history";
    align-items:center;justify-items:center;gap:6px 12px;flex:none;
    width:100%;min-width:0;max-width:none;min-height:80px;
    margin:0!important;padding:4px 0!important;border:0!important;
    border-radius:0!important;background:none!important;box-shadow:none;animation:none
  }
  /* Remove the old painted shell as well as the actual borders. */
  .top>.focus::before,.top>.focus::after,
  .top>.focus .fc-main::before,.top>.focus .fc-main::after,
  .top>.focus .fc-hist::before,.top>.focus .fc-hist::after{content:none;display:none}
  .top>.focus .fc-head{display:contents!important}
  .top>.focus .fc-heading,.top>.focus.is-choosing .fc-heading{
    grid-area:timer-icon!important;display:flex;align-items:center;justify-content:center;
    justify-self:center;width:44px;min-width:44px;height:44px;margin:0;flex:none;color:var(--mut)
  }
  .top>.focus .fc-heading .fc-subject-icon{width:24px;height:24px}
  .top>.focus .fc-main,.top>.focus.is-choosing .fc-main{
    grid-area:timer-main!important;display:flex!important;flex-direction:column!important;
    align-items:center;justify-content:center;gap:4px;width:100%;min-width:0;min-height:64px!important;
    padding:4px 0;border:0!important;border-radius:10px!important;background:none!important;
    box-shadow:none!important;text-align:center;transform:none;animation:none!important
  }
  .top>.focus .fc-main-title,.top>.focus.is-choosing .fc-main-title{font-size:14px;line-height:1.25;letter-spacing:0;color:var(--mut)}
  .top>.focus .fc-main .fc-time{font-size:clamp(26px,2.3vw,38px);line-height:1.1;letter-spacing:0;font-variant-numeric:tabular-nums;color:var(--fg);white-space:nowrap}
  .top>.focus .fc-main:hover .fc-main-title{color:var(--fg)}
  .top>.focus .fc-main:focus-visible{outline:2px solid var(--fg);outline-offset:3px}
  .top>.focus .fc-hist,.top>.focus.is-choosing .fc-hist{
    grid-area:timer-history!important;justify-self:center;width:44px;min-width:44px;height:44px;min-height:44px;
    margin:0!important;padding:0;border:0!important;background:none!important;box-shadow:none!important;color:var(--mut);transform:none
  }
  .top>.focus .fc-hist:hover{color:var(--fg)}
  .top>.focus .fc-hist:focus-visible{outline:2px solid var(--fg);outline-offset:2px}
  /* No desktop progress underline or empty goal row; mobile keeps its track. */
  .top>.focus .fc-goal{display:none!important}
  .top>.focus.is-choosing{grid-template-areas:"timer-icon timer-main timer-history" "timer-subjects timer-subjects timer-subjects";row-gap:8px}
  .top>.focus.is-choosing .fc-main .fc-time{display:none!important}
  .top>.focus.is-choosing .fc-main{min-height:44px!important}
  .top>.focus.is-choosing .fc-goal{display:none!important}
  .top>.focus.is-choosing .fc-subj:not([hidden]){
    grid-area:timer-subjects!important;display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr));
    align-items:stretch;gap:clamp(5px,.7vw,12px);width:100%;margin:0!important;padding:0 0 8px;
    animation:none!important
  }
  .top>.focus.is-choosing .fc-subj button{
    display:flex!important;position:relative;flex-direction:column;align-items:center;justify-content:center;gap:7px;
    min-width:0;min-height:68px;padding:8px 2px;border:0;border-radius:18px;
    color:var(--choice-ink);background:color-mix(in srgb,var(--choice-ink) 12%,var(--bg));
    box-shadow:none;font-size:13px;opacity:1;transform-origin:50% 85%;
    animation:fc-color-arrive .55s cubic-bezier(.16,.8,.24,1) both;
    transition:background-color .18s ease,box-shadow .18s ease,translate .18s ease
  }
  .top>.focus .fc-subj button[data-s="英文"]{--choice-ink:#b93671;--arrival-turn:-9deg;animation-delay:0s}
  .top>.focus .fc-subj button[data-s="化學"]{--choice-ink:#9a6200;--arrival-turn:7deg;animation-delay:.055s}
  .top>.focus .fc-subj button[data-s="生物"]{--choice-ink:#287b47;--arrival-turn:-6deg;animation-delay:.11s}
  .top>.focus .fc-subj button[data-s="物理"]{--choice-ink:#465dcc;--arrival-turn:8deg;animation-delay:.165s}
  .top>.focus .fc-subj button[data-s="生化"]{--choice-ink:#087d89;--arrival-turn:-7deg;animation-delay:.22s}
  .top>.focus .fc-choice-icon{display:block;width:23px;height:23px;flex:none;opacity:1}
  .top>.focus.is-choosing .fc-subj button .fc-choice-icon{animation:fc-color-spark .7s ease-out both;animation-delay:inherit}
  .top>.focus.is-choosing .fc-subj button:hover{translate:0 -3px;background:color-mix(in srgb,var(--choice-ink) 20%,var(--bg));box-shadow:0 5px 16px color-mix(in srgb,var(--choice-ink) 16%,transparent)}
  .top>.focus.is-choosing .fc-subj button:active{translate:0 0}
  .top>.focus .fc-subj button:focus-visible{outline:2px solid var(--choice-ink);outline-offset:3px}
  @keyframes fc-color-arrive{from{opacity:0;transform:translateY(12px) rotate(var(--arrival-turn)) scale(.86)}65%{opacity:1;transform:translateY(-3px) rotate(0) scale(1.03)}to{opacity:1;transform:none}}
  @keyframes fc-color-spark{0%{filter:drop-shadow(0 0 0 transparent);transform:scale(.85)}55%{filter:drop-shadow(0 0 7px var(--choice-ink));transform:scale(1.16)}100%{filter:none;transform:none}}
}
@media (min-width:900px) and (min-height:560px) and (prefers-color-scheme:dark){
  .top>.focus .fc-subj button[data-s="英文"]{--choice-ink:#ff91bd}
  .top>.focus .fc-subj button[data-s="化學"]{--choice-ink:#f5c365}
  .top>.focus .fc-subj button[data-s="生物"]{--choice-ink:#8adc9b}
  .top>.focus .fc-subj button[data-s="物理"]{--choice-ink:#a4b2ff}
  .top>.focus .fc-subj button[data-s="生化"]{--choice-ink:#75dce3}
}
@media (min-width:900px) and (min-height:560px) and (prefers-reduced-motion:reduce){
  .top>.focus,.top>.focus *{
    animation:none!important;transition:none!important;animation-delay:0s!important;opacity:1!important;translate:none!important
  }
}

/* Mobile task description details */
.task-detail-dialog{width:min(520px,92vw);max-height:min(80vh,680px)}
.task-detail-dialog .task-detail-block{margin-top:14px}
.task-detail-dialog .task-detail-block[hidden]{display:none!important}
.task-detail-label{display:block;margin:0 0 5px;color:var(--mut);font-size:12px;font-weight:650;letter-spacing:.04em}
.task-detail-text{margin:0;color:var(--fg);font-size:16px;line-height:1.7;white-space:pre-wrap;overflow-wrap:anywhere;word-break:normal}
.task-detail-steps{margin:0;padding-inline-start:22px;color:var(--fg);font-size:16px;line-height:1.7}
.task-detail-steps li{padding-inline-start:3px;white-space:pre-wrap;overflow-wrap:anywhere}
.task-detail-note{margin:10px 0 0;color:var(--mut);font-size:13px;line-height:1.55}
@media(max-width:899px){
  .top{gap:4px;padding-left:12px;padding-right:12px}
  .top>div:first-child{flex:1 1 auto;min-width:0;grid-template-columns:max-content max-content;column-gap:8px;row-gap:2px}
  .top .brand-name{grid-column:1/3;grid-row:1;gap:5px}
  .top h1,.top .title-link{font-size:24px!important;line-height:1.15}
  .top .medical-mark{width:18px!important;height:18px!important}
  .top #date{font-size:12px}
  .top .countdown{display:inline-flex;align-items:center;min-height:20px;padding:0 7px;line-height:1;border-color:color-mix(in srgb,var(--warm) 30%,var(--line));background:color-mix(in srgb,var(--warm) 8%,var(--card))}
  .top-actions{width:max-content;grid-template-columns:repeat(5,34px)!important;gap:3px!important;margin:0!important}
  .top-actions .icon-btn{width:34px!important;min-width:34px!important;height:34px!important;min-height:34px!important}
  .top-actions svg{width:19px!important;height:19px!important}
}
@media(max-width:384px){
  .top{gap:4px;padding-left:10px;padding-right:10px}
  .top>div:first-child{grid-template-columns:max-content max-content;column-gap:7px;row-gap:3px}
  .top .brand-name{gap:4px;max-width:100%}
  .top h1,.top .title-link{font-size:21px!important;line-height:1.18}
  .top .medical-mark{width:16px!important;height:16px!important}
  .top #date{font-size:11px}
  .top .countdown{display:inline-flex;align-items:center;min-height:20px;padding:0 7px;line-height:1;border-color:color-mix(in srgb,var(--warm) 30%,var(--line));background:color-mix(in srgb,var(--warm) 8%,var(--card))}
  .top-actions{grid-template-columns:repeat(5,30px)!important;gap:3px!important;margin:0!important}
  .top-actions .icon-btn{width:30px!important;min-width:30px!important;height:30px!important;min-height:30px!important}
  .top-actions svg{width:16px!important;height:16px!important}
}
@media(max-width:340px){
  .top h1,.top .title-link{font-size:19px!important}
  .top #date{font-size:10px}
  .top .countdown{font-size:10px;padding:0 5px}
  .top-actions{grid-template-columns:repeat(5,28px)!important;gap:2px!important}
  .top-actions .icon-btn{width:28px!important;min-width:28px!important;height:28px!important;min-height:28px!important}
  .top-actions svg{width:15px!important;height:15px!important}
}
/* Six shortcuts form one right-aligned 3 x 2 group at every breakpoint.
   Intrinsic tracks preserve the existing responsive button sizes and gaps. */
.top-actions{grid-template-columns:repeat(3,max-content)!important;width:max-content;justify-self:end;margin:0 0 0 auto!important}
:root{--current-task-glow:30%}
@media(prefers-color-scheme:dark){:root{--current-task-glow:17%}}
.item.task-item.is-current{position:relative;z-index:0;border-radius:12px;background:transparent;box-shadow:none}
.item.task-item.is-current::before{content:"";position:absolute;inset:-7px 5px;z-index:-1;border-radius:20px;background:linear-gradient(100deg,transparent 0%,color-mix(in srgb,#ffe66d calc(var(--current-task-glow) * .5),transparent) 12%,color-mix(in srgb,#ffe66d var(--current-task-glow),transparent) 48%,color-mix(in srgb,#ffe66d calc(var(--current-task-glow) * .55),transparent) 86%,transparent 100%);filter:blur(14px);pointer-events:none}

/* v115: aligned progress / notes shells; only their content scrolls. */
.rec-content,.note-content{display:flex;flex-direction:column;flex:1 1 auto;min-width:0;min-height:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch;padding:2px 2px 4px;scroll-padding-block:10px}
.rec-content>.prog,.rec-content>.focus,.rec-content>.moods{flex-shrink:0}
.rec-content>.fields{flex:1 0 auto;min-height:160px;gap:12px}
.rec-content>.moods.seg{min-height:44px;margin:12px 0 16px}
.rec-content>.moods.seg>button{min-height:44px!important}
.rec>.rec-head,.note-card>h2,.rec>#save-record,.note-card>.n-tools,.note-card>#save-note,.note-card>.note-footer{flex:0 0 auto}
.rec>#save-record{margin-top:12px}
.note-content>.note-row:not(.note-editor){display:grid;grid-template-columns:minmax(0,1fr) 104px;gap:10px;margin:0;align-items:end;flex:none}
.note-title-field,.note-subject-field{margin:0;min-width:0}
.note-title-field>span,.note-subject-field>span,.note-editor>span{display:block;font-size:12px;font-weight:600;color:var(--mut);letter-spacing:.04em}
.note-content .note-row input,.note-content .note-row select{width:100%;min-height:44px;margin-top:6px}
.note-content>.note-editor{display:flex;flex-direction:column;align-items:stretch;flex:1 0 auto;gap:6px;margin:14px 0 0;min-width:0;min-height:140px}
.note-content .note-editor textarea#n-points{flex:1 0 auto;width:100%;min-height:120px;max-height:320px;padding:10px 12px;line-height:1.65;margin:0}
.note-content>.n-draft{flex:none;margin-top:12px}
.note-card>.n-tools{margin-top:12px}
.note-card>.n-tools .ghost{min-height:44px!important;height:44px}
.note-card>.note-footer{gap:12px;align-items:center;margin-top:10px;padding:4px 2px 0;font-size:12px;line-height:1.5}
.note-footer a{display:inline-flex;align-items:center;min-height:32px;text-underline-offset:3px}
.note-footer #mode{text-align:right;overflow-wrap:anywhere}

@media(max-width:899px),(max-height:559px){
  body[data-tab=record] main [data-tab=record].rec,
  body[data-tab=notes] main [data-tab=notes].note-card{
    display:flex!important;flex-direction:column;flex:1 1 0;min-height:0;max-height:none;
    margin:7px 0;padding:15px;overflow:hidden!important
  }
  body[data-tab=record] .rec-content>.fields{flex:1 0 auto;min-height:240px;gap:14px}
  body[data-tab=record] .rec-content .fld{display:flex;flex-direction:column;flex:1 0 auto;min-height:0;border:0;border-radius:0;background:transparent;overflow:visible}
  body[data-tab=record] .rec-content .fld>span{justify-content:flex-start;width:auto;border:0;padding:0 0 6px;font-size:13px;font-weight:600;letter-spacing:.04em}
  body[data-tab=record] .rec-content .fld textarea{flex:1 0 auto;min-height:88px;height:auto;padding:10px 12px;line-height:1.65;border:1px solid var(--line);border-radius:10px;background:var(--bg)}
  body[data-tab=record] .rec-content .fld #f-review{height:auto!important;min-height:112px!important}
  body[data-tab=record] .rec-content .fld:focus-within{box-shadow:none}
  body[data-tab=record] .rec-content .fld textarea:focus{outline:2px solid var(--fg);outline-offset:-2px}
  body[data-tab=record] .rec>#save-record{min-height:48px;margin-top:12px}
  body[data-tab=notes] .note-card>.n-save{min-height:48px!important}
}
/* Mobile quick notes: reset legacy row wrapping / percentage flex-basis. */
@media(max-width:899px){
  body[data-tab=notes] main .note-card{min-width:0}
  body[data-tab=notes] .note-card>.note-content{gap:14px;padding:3px 3px 4px}
  body[data-tab=notes] .note-content>.note-row:not(.note-editor){grid-template-columns:minmax(0,1fr) 96px;gap:12px}
  body[data-tab=notes] .note-content>.note-editor{flex:1 0 auto;flex-wrap:nowrap;gap:8px;margin:0;min-height:180px}
  body[data-tab=notes] .note-content .note-editor textarea#n-points{flex:1 1 auto;min-width:0;max-width:100%;min-height:180px;max-height:none}
  body[data-tab=notes] .note-content .note-row input,
  body[data-tab=notes] .note-content .note-row select{min-width:0;max-width:100%;min-height:46px}
  body[data-tab=notes] .note-content>.n-draft{margin:0;min-width:0}
  body[data-tab=notes] .note-content>.n-draft:empty{display:none}
  body[data-tab=notes] .note-card>.n-tools{gap:10px}
  body[data-tab=notes] .note-card>.note-footer{flex-wrap:wrap;column-gap:12px;row-gap:0}
  body[data-tab=notes] .note-footer #mode{min-width:0;flex:1}
}
@media(min-width:900px) and (min-height:560px){
  .col>.rec,.col>.note-card{display:flex!important;flex-direction:column;flex:1 1 0;min-height:0;overflow:hidden!important}
  .rec-content>.fields .fld{min-height:64px}
  .rec-content>.fields .fld textarea{min-height:64px}
  .note-content>.note-editor{min-height:100px}
  .note-content .note-editor textarea#n-points{min-height:72px}
  .note-card>.n-tools .ghost{min-height:36px!important;height:36px}
  .note-card>.note-footer{margin-top:6px}
}
@media(min-width:1100px) and (min-height:560px){
  main{grid-template-rows:minmax(0,1fr)}
}

/* Achievements: source-backed metrics and a single scroll area on every viewport. */
.achievement-content{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden}
body[data-tab] .achievements-card #lessons{max-height:none!important;overflow:visible;flex:none}
.achievement-status{font-size:12px;color:var(--mut);margin:0 0 10px;line-height:1.5}
.achievement-metrics{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.achievement-panel{min-width:0;border:1px solid var(--line);border-radius:10px;background:var(--bg)}
.achievement-panel>h3{margin:0;font-size:14px}
.achievement-toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:44px;padding:10px 12px;border:0;border-radius:10px;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.achievement-toggle:hover{color:var(--acc)}
.achievement-toggle:active{transform:none;box-shadow:none}
.achievement-toggle:focus-visible,.course-selection-button:focus-visible{outline:2px solid var(--fg);outline-offset:3px}
.achievement-chevron{font-size:18px;line-height:1;flex:none}
.achievement-toggle[aria-expanded="true"] .achievement-chevron{transform:rotate(180deg)}
.achievement-panel-content{padding:0 12px 12px}
.achievement-panel-content[hidden],#course-selection-content[hidden]{display:none!important}
.achievement-panel .achievement-metric{border:0;border-radius:0;padding:0 0 10px}
.course-selection{margin-top:12px}
.course-selection-button{width:100%;min-height:44px}
#course-selection-content{margin-top:12px}
.achievement-metric{display:flex;flex-direction:column;gap:5px;min-width:0;border:1px solid var(--line);border-radius:10px;padding:10px;background:var(--bg)}
.achievement-metric .muted{font-size:11px;overflow-wrap:anywhere}
.achievement-metric strong{font-size:19px;line-height:1.3;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.achievement-note{font-size:12px;line-height:1.6;color:var(--mut);margin:10px 0}
.achievement-course-stat{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 10px;font-size:12px;color:var(--mut);margin-top:5px;font-variant-numeric:tabular-nums}
.achievements-card .lv-name{overflow-wrap:anywhere;min-width:0}
.achievements-card .lv-tag{flex:none}
.achievements-card .lv-top{flex-wrap:wrap;gap:4px 10px}
.task-time{display:block;color:var(--mut);font-size:11px;line-height:1.5;white-space:normal;margin-top:2px}
.achievements-card .xp-explanation p{font-size:12px;line-height:1.6;color:var(--mut);overflow-wrap:anywhere}

/* reschedule review card */
.reschedule-card{border:1px solid var(--line);border-radius:12px;padding:12px;margin:12px 0;background:var(--bg)}
.reschedule-head{display:flex;justify-content:space-between;gap:10px;align-items:baseline}.reschedule-head h3{font-size:15px;margin:0 0 6px}
.reschedule-list{list-style:none;margin:4px 0;padding:0}.reschedule-item{border-top:1px solid var(--line);padding:9px 0}.reschedule-item:first-child{border-top:0}
.reschedule-item strong{display:block}.reschedule-item .meta{font-size:13px;color:var(--mut);margin-top:2px}.reschedule-approve{margin-top:8px}.reschedule-conflict{font-size:13px;color:var(--mut);border-left:3px solid var(--fg);padding-left:8px}
/* Desktop card toggles: mobile markup and layout remain unchanged. */
@media(min-width:900px) and (min-height:560px){
  body[data-tab] main>.col>.recall-room-card:not(#now){display:none!important}
  .rec-head{align-items:center}
  .rec-head h2{flex:1;min-width:0}
  .desktop-card-toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:32px;padding:0;border:0;border-radius:4px;background:none;color:inherit;font:inherit;letter-spacing:inherit;text-align:left;cursor:pointer}
  .rec-head .desktop-card-toggle{padding-right:12px}
  .desktop-card-toggle:hover{color:var(--acc)}
  .desktop-card-toggle:active{transform:none;box-shadow:none}
  .desktop-card-toggle:focus-visible{outline:2px solid var(--fg);outline-offset:3px}
  .col>.rec.desktop-collapsed,.col>.note-card.desktop-collapsed{flex:0 0 auto}
  .rec.desktop-collapsed>.rec-content{flex:0 0 auto;overflow:visible}
  .rec.desktop-collapsed>.rec-content>:not(.prog),
  .rec.desktop-collapsed>#save-record,
  .note-card.desktop-collapsed>:not(h2){display:none!important}
  .rec.desktop-collapsed>.rec-content>.prog{margin-bottom:0}
  .note-card.desktop-collapsed>h2{margin-bottom:0}
}

/* Compact desktop timer: flexible space belongs outside the three controls. */
@media(min-width:900px) and (min-height:560px){
  .top>.focus,.top>.focus.is-choosing{
    grid-template-columns:minmax(0,1fr) 44px max-content 44px minmax(0,1fr)!important;
    grid-template-areas:". timer-icon timer-main timer-history .";
    column-gap:8px;transform:none!important
  }
  .top>.focus.is-choosing{grid-template-areas:". timer-icon timer-main timer-history ." "timer-subjects timer-subjects timer-subjects timer-subjects timer-subjects"}
  .top>.focus .fc-main,.top>.focus.is-choosing .fc-main{width:max-content}
  /* Match visible icon sizes while preserving both 44px hit areas. */
  .top>.focus .fc-hist svg{width:24px;height:24px}
}