/* 學生・家長版 learning tools: 番茄鐘、默書、打字／倉頡／速成、模擬考試計時.
   Uses the site tokens (--bg, --surface, --ink, --muted, --line); dark values are restated at the end. */
.ft{--ft-a:#ff6b4a;--ft-a-soft:#ffe7df;--ft-b:#3c8dff;--ft-b-soft:#e2eeff;--ft-c:#21a366;--ft-c-soft:#dff5e9;--ft-d:#8b5cf6;--ft-d-soft:#ede6ff;
  --ft-card:var(--surface);--ft-radius:1.4rem;position:relative}
:root[data-theme=dark] .ft{--ft-a-soft:#3a201a;--ft-b-soft:#16243a;--ft-c-soft:#14291e;--ft-d-soft:#251c3a}
.ft:fullscreen,.ft.is-expanded{background:var(--bg);padding:2rem;overflow:auto}
.ft.is-expanded{position:fixed;inset:0;z-index:200}

/* index */
.ft-index-head{margin:.6rem 0 1.6rem}
.ft-index-head h1{font-size:clamp(2rem,4vw,2.8rem);margin:.2rem 0 .4rem}
.ft-index-head p:not(.eyebrow){color:var(--muted)}
.ft-index{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,15.5rem),1fr));gap:1.1rem}
.ft-card{display:flex;flex-direction:column;gap:.5rem;padding:1.4rem;border-radius:var(--ft-radius);background:var(--surface);box-shadow:var(--shadow);color:var(--ink);text-decoration:none;transition:transform .25s cubic-bezier(.23,1,.32,1),box-shadow .25s}
.ft-card:hover{transform:translateY(-5px) rotate(-.4deg);box-shadow:var(--shadow),0 18px 40px -14px #0000002a}
.ft-card-icon{display:grid;place-items:center;width:3.4rem;height:3.4rem;border-radius:1.1rem;margin-bottom:.4rem;transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
.ft-card:hover .ft-card-icon{transform:scale(1.12) rotate(-8deg)}
.ft-card-icon .icon{width:1.6rem;height:1.6rem}
.ft-card.tone-a .ft-card-icon{background:#ffe7df;color:#d8431f}.ft-card.tone-b .ft-card-icon{background:#e2eeff;color:#1f64d1}
.ft-card.tone-c .ft-card-icon{background:#dff5e9;color:#16804e}.ft-card.tone-d .ft-card-icon{background:#ede6ff;color:#6a3fd8}
:root[data-theme=dark] .ft-card .ft-card-icon{background:#29292c;color:var(--ink)}
.ft-card strong{font-size:1.15rem}
.ft-card>span:not(.ft-card-icon){color:var(--muted);font-size:.9rem;line-height:1.6;flex:1}
.ft-card b{display:inline-flex;align-items:center;gap:.3rem;font-size:.9rem}

/* shared header */
.ft-head{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;flex-wrap:wrap;margin:.3rem 0 1.4rem}
.ft-head h1{font-size:clamp(1.7rem,3.4vw,2.4rem);margin:.15rem 0 .3rem}
.ft-head p{color:var(--muted);margin:0;max-width:40rem}
.ft-back{display:inline-flex;align-items:center;gap:.2rem;color:var(--muted);text-decoration:none;font-size:.88rem}
.ft-back .icon{width:1rem;height:1rem}
.ft-head-actions{display:flex;gap:.5rem}
.ft-head-actions .is-muted{opacity:.6}
.ft-chip{border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:99px;padding:.42rem .85rem;font-size:.85rem;cursor:pointer}
.ft-chip:hover{border-color:var(--ink)}
.ft-switch{display:flex;align-items:center;gap:.5rem;font-size:.9rem;margin:.45rem 0;cursor:pointer}
.ft-switch input{width:1.05rem;height:1.05rem;accent-color:var(--ink)}
.pomo-go{border:0;border-radius:99px;padding:.95rem 2.4rem;font-size:1.15rem;font-weight:800;background:var(--ink);color:var(--bg);cursor:pointer;box-shadow:0 6px 0 #0000002e;transition:transform .12s,box-shadow .12s}
.pomo-go:hover{transform:translateY(-1px)}
.pomo-go:active{transform:translateY(4px);box-shadow:0 2px 0 #0000002e}
.is-shake{animation:ft-shake .4s}
@keyframes ft-shake{20%,60%{transform:translateX(-7px)}40%,80%{transform:translateX(7px)}}
.is-bump{animation:ft-bump .35s cubic-bezier(.34,1.56,.64,1)}
@keyframes ft-bump{50%{transform:scale(1.18)}}

/* ---------- 番茄鐘 ---------- */
.pomo-layout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(16rem,1fr);gap:1.4rem;align-items:start}
@media (max-width:860px){.pomo-layout{grid-template-columns:1fr}}
.pomo-main{display:flex;flex-direction:column;align-items:center;gap:1.2rem;padding:1.6rem 1.2rem 1.4rem;border-radius:calc(var(--ft-radius) + .4rem);background:var(--ft-a-soft);transition:background-color .5s}
.ft-pomo[data-mode=short] .pomo-main{background:var(--ft-c-soft)}
.ft-pomo[data-mode=long] .pomo-main{background:var(--ft-b-soft)}
.pomo-modes{display:flex;gap:.3rem;padding:.3rem;border-radius:99px;background:var(--surface)}
.pomo-modes button{border:0;background:transparent;color:var(--ink);padding:.5rem 1rem;border-radius:99px;font-weight:700;cursor:pointer;font-size:.92rem}
.pomo-modes button[aria-selected=true]{background:var(--ink);color:var(--bg)}
.pomo-ring{position:relative;width:min(22rem,78vw);aspect-ratio:1}
.pomo-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.pomo-track{fill:none;stroke:color-mix(in srgb,var(--ink) 10%,transparent);stroke-width:14}
.pomo-progress{fill:none;stroke:var(--ft-a);stroke-width:14;stroke-linecap:round;transition:stroke-dashoffset .3s linear,stroke .4s}
.ft-pomo[data-mode=short] .pomo-progress{stroke:var(--ft-c)}.ft-pomo[data-mode=long] .pomo-progress{stroke:var(--ft-b)}
.pomo-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.2rem}
.pomo-phase{font-weight:700;color:var(--muted)}
.pomo-time{font-size:clamp(3.4rem,11vw,5.4rem);font-variant-numeric:tabular-nums;letter-spacing:-.03em;line-height:1}
.ft-pomo.is-running .pomo-time{animation:pomo-breathe 4s ease-in-out infinite}
@keyframes pomo-breathe{50%{transform:scale(1.025)}}
.pomo-round{font-size:.9rem;color:var(--muted)}
.pomo-dots{display:flex;gap:.5rem}
.pomo-dots span{width:.85rem;height:.85rem;border-radius:50%;background:color-mix(in srgb,var(--ink) 14%,transparent);transition:background-color .3s,transform .3s}
.pomo-dots span.done{background:var(--ft-a)}
.pomo-dots span.now{background:var(--ink);transform:scale(1.25)}
.pomo-controls{display:flex;align-items:center;gap:1rem}
.pomo-icon-btn{width:3.2rem;height:3.2rem;border-radius:50%;border:0;background:var(--surface);color:var(--ink);font-size:1.3rem;cursor:pointer;box-shadow:var(--shadow);transition:transform .15s}
.pomo-icon-btn:hover{transform:rotate(-12deg) scale(1.06)}
.pomo-task{display:flex;flex-direction:column;gap:.3rem;width:min(26rem,100%);font-size:.88rem;font-weight:600}
.pomo-task input{padding:.7rem .9rem;border-radius:.9rem;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-size:1rem}
.pomo-side{display:flex;flex-direction:column;gap:1rem}
.pomo-garden{display:flex;flex-direction:column;align-items:center;padding:1.2rem;border-radius:var(--ft-radius);background:var(--surface);box-shadow:var(--shadow)}
.pomo-garden-label{font-weight:700;margin:.4rem 0 0}
.pomo-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;margin:0}
.pomo-stats div{padding:.8rem;border-radius:1rem;background:var(--surface);box-shadow:var(--shadow);text-align:center}
.pomo-stats dt{font-size:.78rem;color:var(--muted)}
.pomo-stats dd{margin:.2rem 0 0;font-size:.85rem}
.pomo-stats b{font-size:1.5rem;font-variant-numeric:tabular-nums}
.pomo-settings{padding:1rem 1.1rem;border-radius:var(--ft-radius);background:var(--surface);box-shadow:var(--shadow)}
.pomo-settings summary{font-weight:700;cursor:pointer;margin-bottom:.6rem}
.pomo-presets{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.7rem}
.pomo-custom{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin-bottom:.4rem}
.pomo-custom label{display:flex;align-items:center;gap:.35rem;font-size:.85rem}
.pomo-custom input{width:3.6rem;padding:.35rem .4rem;border-radius:.5rem;border:1px solid var(--line);background:var(--bg);color:var(--ink)}
.pomo-log{padding:1rem 1.1rem;border-radius:var(--ft-radius);background:var(--surface);box-shadow:var(--shadow)}
.pomo-log h2{font-size:1rem;margin:0 0 .5rem}
.pomo-log ol{margin:0;padding-left:1.2rem;display:grid;gap:.3rem;font-size:.88rem;max-height:12rem;overflow:auto}
.pomo-log li span{color:var(--muted);font-variant-numeric:tabular-nums}

/* the growing tomato */
.tomato{position:relative;width:9rem;height:9rem}
.tomato i{position:absolute;display:block;transition:transform .5s cubic-bezier(.34,1.56,.64,1),opacity .4s}
.tomato .pot{left:2.5rem;bottom:0;width:4rem;height:2.6rem;background:#c8693c;border-radius:.3rem .3rem 1.1rem 1.1rem}
.tomato .pot::before{content:"";position:absolute;left:-.3rem;right:-.3rem;top:-.3rem;height:.7rem;border-radius:.3rem;background:#d97a4b}
.tomato .soil{left:2.8rem;bottom:2.3rem;width:3.4rem;height:.5rem;border-radius:50%;background:#6b4a2f}
.tomato .stem{left:4.4rem;bottom:2.5rem;width:.28rem;height:3.6rem;background:#3aa35b;border-radius:.2rem;transform-origin:bottom;transform:scaleY(0)}
.tomato .leaf{width:1.4rem;height:.8rem;background:#46b866;border-radius:0 1rem;bottom:4.4rem;transform:scale(0)}
.tomato .l1{left:3.05rem;transform-origin:right;border-radius:1rem 0}.tomato .l2{left:4.65rem;transform-origin:left}
.tomato .flower{left:3.95rem;bottom:5.8rem;width:1.2rem;height:1.2rem;border-radius:50%;background:#ffd23f;box-shadow:0 0 0 .3rem #fff3b0;transform:scale(0)}
.tomato .fruit{left:3.35rem;bottom:5.2rem;width:2.4rem;height:2.2rem;border-radius:48% 48% 50% 50%;background:radial-gradient(circle at 35% 30%,#ff8b73,#e8372a 60%);transform:scale(0)}
.tomato .fruit::before{content:"";position:absolute;left:.75rem;top:-.25rem;width:.9rem;height:.45rem;background:#2e9a4e;border-radius:50% 50% 0 0}
.tomato .f2{left:1.6rem;bottom:3.6rem;width:1.8rem;height:1.7rem}.tomato .f3{left:5.6rem;bottom:3.9rem;width:1.8rem;height:1.7rem}
.tomato.stage-1 .stem{transform:scaleY(.45)}.tomato.stage-1 .leaf{bottom:3.6rem;transform:scale(.7)}
.tomato.stage-2 .stem,.tomato.stage-3 .stem,.tomato.stage-4 .stem{transform:scaleY(1)}
.tomato.stage-2 .leaf,.tomato.stage-3 .leaf,.tomato.stage-4 .leaf{transform:scale(1)}
.tomato.stage-2 .flower{transform:scale(1)}
.tomato.stage-3 .fruit:not(.f2):not(.f3),.tomato.stage-4 .fruit{transform:scale(1)}
.tomato.is-grow{animation:ft-bump .6s cubic-bezier(.34,1.56,.64,1)}

/* ---------- 默書 ---------- */
.dict-setup{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:1.2rem}
@media (max-width:860px){.dict-setup{grid-template-columns:1fr}}
.dict-words,.dict-options{display:flex;flex-direction:column;gap:.7rem;padding:1.3rem;border-radius:var(--ft-radius);background:var(--surface);box-shadow:var(--shadow)}
.dict-label-row{display:flex;justify-content:space-between;gap:.6rem;flex-wrap:wrap;align-items:flex-end}
.dict-label-row label{display:flex;flex-direction:column;gap:.15rem}
.dict-lists{display:flex;gap:.4rem;flex-wrap:wrap}
.dict-lists select,.dict-options select{padding:.45rem .6rem;border-radius:.7rem;border:1px solid var(--line);background:var(--bg);color:var(--ink)}
.dict-words textarea{width:100%;min-height:14rem;padding:1rem;border-radius:1rem;border:1px solid var(--line);background:var(--bg);color:var(--ink);font-size:1.15rem;line-height:1.7;resize:vertical}
.dict-options label{display:flex;flex-direction:column;gap:.3rem;font-size:.9rem;font-weight:600}
.dict-options input[type=range]{accent-color:var(--ft-b)}
.dict-mode{border:0;padding:0;margin:0;display:grid;gap:.5rem}
.dict-mode legend{font-size:.9rem;font-weight:600;margin-bottom:.4rem}
.dict-mode-card{display:flex!important;flex-direction:row!important;align-items:flex-start;gap:.6rem;padding:.8rem .9rem;border-radius:1rem;border:2px solid var(--line);cursor:pointer;font-weight:400!important}
.dict-mode-card:has(input:checked){border-color:var(--ft-b);background:var(--ft-b-soft)}
.dict-mode-card span{display:flex;flex-direction:column;font-size:.85rem;color:var(--muted)}
.dict-mode-card b{color:var(--ink);font-size:.98rem}
.dict-voice-note{padding:.7rem .8rem;border-radius:.8rem;background:#fff4d6;color:#7a5200}
:root[data-theme=dark] .dict-voice-note{background:#2b2410;color:#f0cf7c}
.dict-start{margin-top:.4rem;background:var(--ft-b);color:#fff}
.dict-progress{display:flex;align-items:center;gap:.9rem;margin-bottom:1rem;font-weight:700}
.dict-bar{flex:1;height:.7rem;border-radius:99px;background:color-mix(in srgb,var(--ink) 10%,transparent);overflow:hidden}
.dict-bar i{display:block;height:100%;background:var(--ft-b);border-radius:99px;transition:width .4s}
.dict-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:1rem;padding:2.4rem 1.4rem 2rem;border-radius:calc(var(--ft-radius) + .4rem);background:var(--ft-b-soft);text-align:center}
.dict-card.is-in{animation:dict-in .45s cubic-bezier(.23,1,.32,1)}
@keyframes dict-in{from{opacity:0;transform:translateX(28px)}}
.dict-card.is-correct{animation:dict-glow .7s}
@keyframes dict-glow{30%{box-shadow:0 0 0 .6rem color-mix(in srgb,var(--ft-c) 40%,transparent)}}
.dict-speaker{position:relative;display:grid;place-items:center;width:8rem;height:8rem;border:0;border-radius:50%;background:var(--surface);box-shadow:0 10px 30px -10px #0004;cursor:pointer;font-size:2.8rem;transition:transform .15s}
.dict-speaker:active{transform:scale(.94)}
.dict-wave{position:absolute;inset:0}
.dict-wave i{position:absolute;inset:0;border-radius:50%;border:3px solid var(--ft-b);opacity:0}
.dict-card.is-speaking .dict-wave i{animation:dict-wave 1.6s ease-out infinite}
.dict-card.is-speaking .dict-wave i:nth-child(2){animation-delay:.5s}.dict-card.is-speaking .dict-wave i:nth-child(3){animation-delay:1s}
@keyframes dict-wave{from{transform:scale(1);opacity:.7}to{transform:scale(1.7);opacity:0}}
.dict-card-hint{color:var(--muted);margin:0;font-size:.9rem}
.dict-answer{display:flex;gap:.6rem;width:min(30rem,100%)}
.dict-answer input{flex:1;padding:.9rem 1rem;border-radius:1rem;border:2px solid var(--line);background:var(--surface);color:var(--ink);font-size:1.4rem;text-align:center}
.dict-answer input:focus{outline:none;border-color:var(--ft-b)}
.dict-feedback p{margin:.2rem 0;font-size:1.1rem}
.dict-ok{color:#178a4c;font-weight:800;font-size:1.5rem!important}
.dict-bad{color:#c2410c;font-weight:700}
.dict-marks{font-size:1.6rem!important;letter-spacing:.06em}
.dict-marks .m-ok{color:var(--ink)}.dict-marks .m-bad{color:#e11d48;text-decoration:underline wavy}
.dict-paper-timer{position:relative;width:4rem;height:4rem}
.dict-paper-timer svg{width:100%;height:100%;transform:rotate(-90deg)}
.dict-paper-timer circle{fill:none;stroke:color-mix(in srgb,var(--ink) 12%,transparent);stroke-width:4}
.dict-paper-timer circle.t{stroke:var(--ft-b);stroke-linecap:round;transition:stroke-dashoffset .2s linear}
.dict-paper-timer span{position:absolute;inset:0;display:grid;place-items:center;font-weight:800}
.dict-play-actions,.dict-result-actions,.exam-result-actions{display:flex;justify-content:center;gap:.6rem;margin-top:1.2rem;flex-wrap:wrap}
.dict-result{max-width:40rem;margin:0 auto;text-align:center;padding:2rem 1.4rem;border-radius:calc(var(--ft-radius) + .4rem);background:var(--surface);box-shadow:var(--shadow)}
.dict-stars{display:flex;justify-content:center;gap:.6rem;font-size:3.6rem;line-height:1}
.dict-stars span{color:color-mix(in srgb,var(--ink) 14%,transparent)}
.dict-stars span.on{color:#ffc22e;text-shadow:0 4px 12px #ffb30066}
.dict-stars span.is-pop{animation:star-pop .6s cubic-bezier(.34,1.56,.64,1) both}
@keyframes star-pop{from{transform:scale(0) rotate(-40deg)}}
.dict-result h2{margin:.6rem 0 .2rem}
.dict-review{list-style:none;padding:0;margin:1.2rem 0 0;display:grid;gap:.4rem;text-align:left}
.dict-review li{display:flex;align-items:center;gap:.8rem;padding:.6rem .9rem;border-radius:.8rem;background:var(--bg)}
.dict-review li b{flex:1;font-size:1.1rem}
.dict-review li.ok{background:color-mix(in srgb,#22c55e 14%,transparent)}
.dict-review li.bad{background:color-mix(in srgb,#f43f5e 14%,transparent)}
.dict-review button{width:2.3rem;height:2.3rem;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;font-weight:800}
.dict-review li.ok .mark-ok{background:#22c55e;color:#fff;border-color:#22c55e}
.dict-review li.bad .mark-bad{background:#f43f5e;color:#fff;border-color:#f43f5e}

/* ---------- 打字 ---------- */
.type-tabs{display:inline-flex;gap:.3rem;padding:.3rem;border-radius:99px;background:var(--surface);box-shadow:var(--shadow);margin-bottom:.9rem}
.type-tabs button{border:0;background:transparent;color:var(--ink);padding:.55rem 1.2rem;border-radius:99px;font-weight:700;cursor:pointer}
.type-tabs button[aria-selected=true]{background:var(--ft-c);color:#fff}
.type-bar{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center;margin-bottom:1rem}
.type-bar label{display:flex;align-items:center;gap:.4rem;font-size:.88rem;font-weight:600}
.type-bar select{padding:.42rem .6rem;border-radius:.7rem;border:1px solid var(--line);background:var(--surface);color:var(--ink)}
.type-arena{position:relative;padding:1.4rem;border-radius:calc(var(--ft-radius) + .4rem);background:var(--ft-c-soft);outline:none}
.type-arena:focus-within{box-shadow:0 0 0 3px color-mix(in srgb,var(--ft-c) 50%,transparent)}
.type-hud{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;margin-bottom:1rem}
.type-hud>div{min-width:5.5rem;padding:.55rem .8rem;border-radius:1rem;background:var(--surface);text-align:center}
.type-hud span{display:block;font-size:.72rem;color:var(--muted)}
.type-hud b{font-size:1.5rem;font-variant-numeric:tabular-nums}
.type-hud small{font-size:.7rem;color:var(--muted);margin-left:.15rem}
.type-combo b{color:var(--ft-a)}
.type-zh{display:flex;flex-direction:column;align-items:center;gap:.8rem}
.type-queue{display:flex;gap:.6rem;color:var(--muted);font-size:1.4rem;opacity:.7}
.type-queue span:first-child{opacity:1}
.type-char{display:grid;place-items:center;width:9rem;height:9rem;border-radius:1.6rem;background:var(--surface);font-size:5.6rem;line-height:1;box-shadow:0 12px 30px -14px #0005;font-family:"PingFang HK","Microsoft JhengHei",serif}
.type-char.is-in{animation:type-in .3s cubic-bezier(.34,1.56,.64,1)}
@keyframes type-in{from{transform:scale(.6) translateY(10px);opacity:0}}
.type-char.is-correct{animation:type-ok .35s}
@keyframes type-ok{50%{transform:scale(1.12);background:#d9f8e6}}
.type-code{display:flex;gap:.45rem;min-height:4.2rem;align-items:center;flex-wrap:wrap;justify-content:center}
.type-code span{display:flex;flex-direction:column;align-items:center;justify-content:center;width:3.3rem;height:4rem;border-radius:.9rem;background:var(--surface);border:2px dashed var(--line)}
.type-code span b{font-size:1.5rem}.type-code span small{font-size:.75rem;color:var(--muted)}
.type-code span.now{border:2px solid var(--ft-c);animation:ft-bump 1.4s ease-in-out infinite}
.type-code span.done{background:var(--ft-c);border-color:var(--ft-c);color:#fff}
.type-code span.done small{color:#ffffffcc}
.wrong-key{font-style:normal;color:#e11d48;font-weight:800;margin-left:.4rem}
.type-tip{text-align:center;max-width:32rem}
.type-sentence{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:clamp(1.3rem,2.6vw,1.9rem);line-height:1.8;text-align:center;margin:.4rem auto 1rem;max-width:46rem;letter-spacing:.02em}
.type-sentence span{border-radius:.2rem;padding:0 .02em}
.type-sentence .ok{color:var(--ft-c)}
.type-sentence .now{background:color-mix(in srgb,var(--ink) 12%,transparent);box-shadow:inset 0 -3px 0 var(--ink)}
.type-sentence .miss{background:#ffe1e6;color:#e11d48}
.type-input{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px;left:50%;top:50%}
.type-keyboard{display:flex;flex-direction:column;align-items:center;gap:.35rem;margin-top:1.2rem}
.kb-row{display:flex;gap:.35rem}
.kb-row:nth-child(2){margin-left:1.2rem}.kb-row:nth-child(3){margin-left:2.6rem}
.kb-row span{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;width:clamp(1.9rem,6.5vw,3.2rem);height:clamp(2.3rem,7vw,3.2rem);border-radius:.6rem;background:var(--surface);box-shadow:0 3px 0 color-mix(in srgb,var(--ink) 16%,transparent);font-size:.75rem;transition:transform .08s,background-color .15s}
.kb-row span b{font-size:.68rem;color:var(--muted);font-weight:600}
.kb-row span i{font-style:normal;font-size:1.05rem;line-height:1.1}
.kb-row span.kb-space{width:min(18rem,60vw)}
.kb-row span.is-next{background:var(--ft-c);color:#fff;transform:translateY(-2px)}
.kb-row span.is-next b{color:#ffffffcc}
.kb-row span.is-hit{animation:kb-hit .2s}
.kb-row span.is-miss{animation:kb-miss .3s}
@keyframes kb-hit{50%{transform:translateY(3px);box-shadow:none}}
@keyframes kb-miss{50%{background:#ffd5dc}}
.type-result{text-align:center;padding:2rem 1.4rem;border-radius:calc(var(--ft-radius) + .4rem);background:var(--surface);box-shadow:var(--shadow)}
.type-result-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;max-width:30rem;margin:1rem auto}
.type-result-grid div{padding:.9rem;border-radius:1rem;background:var(--ft-c-soft)}
.type-result-grid span{display:block;font-size:.8rem;color:var(--muted)}
.type-result-grid b{font-size:1.4rem}
.type-new-best{font-size:1.3rem;font-weight:800;animation:ft-bump .6s 2}
.type-source{margin-top:1rem}

/* ---------- 模擬考試 ---------- */
.exam-setup{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:1.2rem}
@media (max-width:860px){.exam-setup{grid-template-columns:1fr}}
.exam-panel{display:flex;flex-direction:column;gap:.9rem;padding:1.3rem;border-radius:var(--ft-radius);background:var(--surface);box-shadow:var(--shadow)}
.exam-panel label{display:flex;flex-direction:column;gap:.3rem;font-weight:600;font-size:.9rem}
.exam-panel select,.exam-panel input[type=text],.exam-panel input[type=number]{padding:.55rem .7rem;border-radius:.7rem;border:1px solid var(--line);background:var(--bg);color:var(--ink);font-size:1rem}
.exam-source-tabs{display:inline-flex;gap:.3rem;padding:.3rem;border-radius:99px;background:var(--bg);align-self:flex-start}
.exam-source-tabs button{border:0;background:transparent;color:var(--ink);padding:.5rem 1rem;border-radius:99px;font-weight:700;cursor:pointer}
.exam-source-tabs button[aria-selected=true]{background:var(--ft-d);color:#fff}
.exam-papers{display:grid;grid-template-columns:repeat(auto-fill,minmax(11rem,1fr));gap:.5rem}
.exam-paper{flex-direction:row!important;align-items:center;gap:.6rem!important;padding:.75rem .9rem;border-radius:1rem;border:2px solid var(--line);cursor:pointer}
.exam-paper:has(input:checked){border-color:var(--ft-d);background:var(--ft-d-soft)}
.exam-paper input{accent-color:var(--ft-d)}
.exam-paper span{display:flex;flex-direction:column}
.exam-paper small{font-weight:400;color:var(--muted);font-size:.8rem}
.exam-duration-input{display:flex;align-items:center;gap:.4rem;font-weight:400}
.exam-duration-input input{width:4.2rem}
.exam-summary{margin:0;padding:.8rem 1rem;border-radius:.9rem;background:var(--ft-d-soft);font-weight:600}
.exam-check{flex-direction:row!important;align-items:flex-start;gap:.55rem!important;cursor:pointer}
.exam-check input{width:1.2rem;height:1.2rem;margin-top:.12rem;accent-color:var(--ft-d);flex:none}
.exam-check.small{font-weight:400!important}
.exam-check.is-disabled{opacity:.45}
.exam-extra{display:flex;flex-direction:column;gap:.7rem;padding:.9rem 1rem;border-radius:1rem;background:var(--bg)}
.exam-reminders{border:0;padding:0;margin:0;display:grid;gap:.45rem}
.exam-reminders legend{font-weight:700;margin-bottom:.4rem}
.exam-start{background:var(--ft-d);color:#fff}
.exam-board{display:flex;flex-direction:column;gap:1.2rem;padding:clamp(1.2rem,3vw,2.4rem);border-radius:calc(var(--ft-radius) + .4rem);background:#1f2a24;color:#f1f5ef;box-shadow:inset 0 0 0 .7rem #6b4a2f,0 18px 40px -16px #0007;--theme:keep}
.exam-board-head{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap}
.exam-board-title{font-size:clamp(1.3rem,2.6vw,1.9rem);font-weight:800;margin:0}
.exam-badge{padding:.25rem .7rem;border-radius:99px;background:#ffd166;color:#3b2a00;font-weight:800;font-size:.85rem}
.exam-board-times{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem}
.exam-board-times div{padding:.8rem;border-radius:1rem;background:#ffffff12;text-align:center}
.exam-board-times span{display:block;font-size:.85rem;opacity:.75}
.exam-board-times b{font-size:clamp(1.4rem,3.4vw,2.3rem);font-variant-numeric:tabular-nums}
.exam-remaining{text-align:center}
.exam-remaining span{display:block;font-size:1.05rem;opacity:.8}
.exam-remaining strong{font-size:clamp(4rem,14vw,8.5rem);line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.ft-exam.is-warning .exam-remaining strong{color:#ffd166}
.ft-exam.is-urgent .exam-remaining strong{color:#ff6b6b;animation:pomo-breathe 1s ease-in-out infinite}
.ft-exam[data-phase=break] .exam-remaining strong{color:#8fd6b7}
.ft-exam.is-paused .exam-remaining strong{opacity:.4}
.exam-progress{position:relative;height:.9rem;border-radius:99px;background:#ffffff1f;overflow:visible}
.exam-progress i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#8fd6b7,#ffd166 80%,#ff6b6b);transition:width .3s linear}
.exam-marks i{position:absolute;top:-.3rem;width:3px;height:1.5rem;background:#fff;opacity:.6;border-radius:2px}
.exam-alert{padding:1rem 1.2rem;border-radius:1rem;background:#ffd166;color:#3b2a00;font-size:clamp(1.1rem,2.4vw,1.5rem);font-weight:800;text-align:center}
.exam-alert.is-flash,.exam-board.is-flash{animation:exam-flash 1s 2}
@keyframes exam-flash{50%{filter:brightness(1.35)}}
.exam-controls{display:flex;justify-content:center;gap:.6rem}
.exam-controls .button{background:#ffffff1a;color:#fff;border-color:#ffffff33}
.exam-note{text-align:center;color:#f1f5efaa!important}
.exam-finished{text-align:center;padding:2.4rem 1.4rem;border-radius:calc(var(--ft-radius) + .4rem);background:var(--surface);box-shadow:var(--shadow)}
.exam-stop-icon{font-size:4.5rem;animation:ft-bump .6s cubic-bezier(.34,1.56,.64,1)}
.exam-source{margin-top:1.2rem}
.ft:fullscreen .exam-board,.ft.is-expanded .exam-board{min-height:calc(100vh - 8rem);justify-content:center}
@media (max-width:600px){.exam-board-times{grid-template-columns:1fr 1fr}.exam-board-times div:last-child{grid-column:span 2}}
@media (prefers-reduced-motion:reduce){.ft *{animation:none!important;transition:none!important}}
/* keep short labels on one line next to their controls */
.type-bar label,.pomo-custom label,.dict-lists,.exam-duration-input{white-space:nowrap}
.type-bar select,.dict-lists select{width:auto!important;min-width:0}
.pomo-custom input,.exam-duration-input input{width:4.4rem!important;flex:none}
.pomo-custom label{justify-content:flex-start}
.tomato .soil::after{content:"";position:absolute;left:1.45rem;top:-.35rem;width:.5rem;height:.6rem;border-radius:50% 50% 45% 45%;background:#8a5a2b;transition:opacity .3s}
.tomato:not(.stage-0) .soil::after{opacity:0}
.pomo-garden .tomato{height:8rem}
/* 默書：文章模式 */
.dict-kind{display:inline-flex;gap:.3rem;padding:.3rem;border-radius:99px;background:var(--bg);align-self:flex-start}
.dict-kind button{border:0;background:transparent;color:var(--ink);padding:.5rem 1rem;border-radius:99px;font-weight:700;cursor:pointer}
.dict-kind button[aria-selected=true]{background:var(--ft-b);color:#fff}
.dict-pauses{display:flex;flex-direction:column;gap:.6rem;padding:.8rem .9rem;border-radius:1rem;background:var(--ft-b-soft)}
.dict-pauses label b{color:var(--ft-b);margin-left:.3rem}
.dict-pauses input[type=range]{accent-color:var(--ft-b)}
.dict-passage-nav{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center}
.dict-passage-input{width:min(42rem,100%);padding:1rem;border-radius:1rem;border:2px solid var(--line);background:var(--surface);color:var(--ink);font-size:1.25rem;line-height:1.8;resize:vertical}
.dict-passage-input:focus{outline:none;border-color:var(--ft-b)}
.dict-passage-result{margin-top:1rem;text-align:left}
.dict-passage-text{padding:1.1rem 1.2rem;border-radius:1rem;background:var(--bg);font-size:1.25rem;line-height:2;letter-spacing:.04em;white-space:pre-wrap}
.dict-passage-text .m-bad{color:#e11d48;background:#ffe1e6;border-radius:.2rem;text-decoration:underline wavy}
:root[data-theme=dark] .dict-passage-text .m-bad{background:#4a1d26}
.dict-error-count{display:flex;align-items:center;justify-content:center;gap:.7rem;margin-top:.9rem;font-weight:700}
.dict-error-count b{font-size:1.8rem;min-width:2.5rem;text-align:center;font-variant-numeric:tabular-nums}
.dict-options label.ft-switch{flex-direction:row;align-items:center;font-weight:400}
/* illustrations */
.ft-card-art{display:block;margin:-.4rem -.4rem .4rem;border-radius:1rem;overflow:hidden}
.ft-card-art .tool-art{max-width:12rem;margin:0 auto}
.ft-head{align-items:center}
.ft-head-art{width:7rem;flex:none}
.ft-head-text{flex:1;min-width:14rem}
@media (max-width:640px){.ft-head-art{width:5rem}}
.ft-card>.ft-card-art{flex:none;overflow:visible;margin:0 0 .4rem}