:root{color-scheme:light;--bg:#f3f7f5;--panel:#fff;--soft:#eaf3ef;--ink:#163d33;--muted:#607a70;--line:#cbded4;--accent:#007e67}html[data-theme=dark]{color-scheme:dark;--bg:#101e19;--panel:#1b3029;--soft:#243f34;--ink:#e0eee7;--muted:#aec7bb;--line:#456555;--accent:#83dac0}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.65 system-ui,sans-serif}main{max-width:1120px;margin:32px auto;padding:0 24px}a{color:var(--accent)}header{display:flex;align-items:center;justify-content:space-between;gap:16px}h1{margin:12px 0 4px;font-size:30px}h2{font-size:19px;margin:0 0 14px}p{margin:8px 0 18px}.muted,small{color:var(--muted)}.badge{font-size:12px;padding:4px 9px;border-radius:6px;background:var(--soft)}.panel{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:24px;margin:20px 0}.layout{display:grid;grid-template-columns:1.2fr 1fr;gap:20px}.layout>.panel{margin:0}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.stat{background:var(--soft);border-radius:12px;padding:18px}.stat span{display:block;font-size:13px;color:var(--muted)}.stat strong{display:block;font-size:25px;margin-top:8px;overflow-wrap:anywhere}.row{display:flex;align-items:center;flex-wrap:wrap;gap:10px}button{font:inherit;cursor:pointer;border:1px solid var(--line);border-radius:8px;background:var(--soft);color:var(--ink);padding:9px 14px}button.primary{background:#007e67;color:white;border-color:#007e67}button:disabled{opacity:.45;cursor:not-allowed}button:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:3px}label{display:block;margin:10px 0;font-size:14px}input{display:block;width:100%;padding:10px;border-radius:8px;border:1px solid var(--line);background:var(--bg);color:var(--ink);font:inherit}.fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}#status{min-height:28px;color:var(--accent);margin-top:12px}#preview{width:100%;height:auto;display:block;object-fit:contain;background:#111;border-radius:8px;touch-action:none;cursor:crosshair}#preview[hidden]{display:none}#crop{max-width:100%;background:#111;image-rendering:pixelated;border-radius:6px}#chart{width:100%;height:130px;display:block}.warning{border-left:3px solid #c18b3d;background:var(--soft);padding:12px;margin:12px 0}.hint{font-size:13px}.history-item{padding:10px 0;border-bottom:1px solid var(--line)}summary{cursor:pointer}footer{padding:24px 0;color:var(--muted);font-size:13px}@media(max-width:760px){.layout{grid-template-columns:1fr}.stats{grid-template-columns:repeat(2,1fr)}main{padding:0 16px}.panel{padding:18px}h1{font-size:25px}}@media(max-width:380px){.fields{grid-template-columns:1fr}}
:root{scroll-behavior:smooth;--bg:#f5f6f7;--panel:#fff;--soft:#f1f4f3;--ink:#263a33;--muted:#6b7771;--line:#dce2df;--accent:#007e67}
html[data-theme=dark]{--bg:#1c1e20;--panel:#25272a;--soft:#2d3033;--ink:#e9eeeb;--muted:#a2aaa6;--line:#3a3f3c;--accent:#81d9bc}
.sidebar{position:fixed;inset:0 auto 0 0;width:232px;background:var(--panel);border-right:1px solid var(--line);padding:24px 16px;display:flex;flex-direction:column;z-index:5}
.tracker-brand{display:flex;align-items:center;gap:12px;color:var(--ink);text-decoration:none;font-size:16px;font-weight:700;padding:0 6px 28px}
.tracker-brand img{border-radius:10px}.tracker-brand small{display:block;font-size:11px;font-weight:400;margin-top:2px}
.sidebar nav{display:flex;flex-direction:column;gap:8px}.sidebar nav a{display:block;color:var(--muted);padding:13px 12px;border-radius:8px;text-decoration:none;font-size:14px}.sidebar nav a:hover,.sidebar nav a.active{background:var(--soft);color:var(--accent)}
.sidebar-bottom{margin-top:auto;border-top:1px solid var(--line);padding-top:16px}.sidebar-bottom p{font-size:11px;margin:12px 0}.sidebar-bottom button{width:100%;text-align:left;font-size:13px}
body>main{max-width:none;width:auto;margin:0 0 0 232px;padding:24px 32px;min-height:100vh}
main>h1{font-size:26px;margin:0 0 4px}main>p.muted{font-size:13px;margin-bottom:18px}
.panel{border-radius:10px;padding:20px;margin:16px 0}.session-controls{margin-top:0}.session-controls .row{gap:8px}.session-controls button{font-size:13px}.session-controls #status{font-size:13px;margin-bottom:0;min-height:22px}
.stats{gap:14px}.stat{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:22px}.stat strong{font-size:30px;line-height:1.4}.stat span{font-size:12px}
.layout{grid-template-columns:minmax(300px,1fr) minmax(380px,1.5fr);margin:16px 0;align-items:stretch}.layout .panel h2{font-size:16px}.layout .panel p{font-size:12px}.layout #chart{height:190px}.layout .fields{margin-top:16px}.layout button{font-size:13px}
.capture-panel #empty{display:flex;align-items:center;justify-content:center;min-height:120px;background:var(--soft);border:1px dashed var(--line);border-radius:8px;margin-bottom:16px}.capture-panel #empty[hidden]{display:none}section[id]{scroll-margin-top:24px}#preview{margin-bottom:16px}
@media(min-width:1800px){body>main{padding:32px 44px}.stat{padding:26px}.layout #chart{height:230px}}
@media(max-width:1050px){.sidebar{width:200px}body>main{margin-left:200px;padding:20px}.layout{grid-template-columns:1fr}.stats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){.sidebar{position:relative;width:100%;padding:14px 16px;border-right:0;border-bottom:1px solid var(--line)}.tracker-brand{padding:0 0 12px}.sidebar nav{flex-direction:row;overflow:auto;gap:4px}.sidebar nav a{white-space:nowrap;padding:9px;font-size:12px}.sidebar-bottom{display:none}body>main{margin:0;padding:20px 14px}.stat{padding:16px}.stat strong{font-size:23px}.layout{grid-template-columns:minmax(0,1fr)}}
.dashboard-cards{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;margin:18px 0}.dashboard-cards>.panel{margin:0;padding:30px}.experience-heading{display:flex;gap:18px;align-items:center;margin:6px 0 36px}.experience-heading h2{font-size:22px;margin:2px 0 0}.exp-emblem{display:flex;flex-direction:column;align-items:center;justify-content:center;width:52px;height:56px;border:2px solid #7a8275;background:#323b31;border-radius:12px;color:#b5eb6c;font-size:34px;font-weight:bold;line-height:1}.exp-emblem small{font-size:10px;color:#b5eb6c;margin:0}.experience-rate{display:flex;align-items:baseline;gap:22px;margin:0 0 36px;flex-wrap:wrap}.experience-rate>strong{font-size:40px;color:#efd15e;line-height:1.2}.experience-rate>span{font-size:14px;color:var(--muted)}.experience-rate b{color:#efd15e}.experience-progress{display:flex;justify-content:space-between;gap:12px;color:#efd15e;margin-bottom:12px;font-size:20px}.experience-card progress{appearance:none;border:0;height:12px;width:100%;border-radius:20px;overflow:hidden;background:var(--soft)}.experience-card progress::-webkit-progress-bar{background:var(--soft)}.experience-card progress::-webkit-progress-value{background:#f0d34e;border-radius:20px}.experience-card progress::-moz-progress-bar{background:#f0d34e}.experience-estimates{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);margin-top:30px;padding-top:26px}.experience-estimates>div+div{padding-left:22px;border-left:1px solid var(--line)}.experience-estimates span{display:block;font-size:14px;color:var(--muted)}.experience-estimates strong{display:block;margin-top:10px;font-size:22px}.trend-panel #chart{height:230px}.runtime-row{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding:16px 0;color:var(--muted)}#preview{cursor:default}:root:not([data-theme=dark]) .experience-rate>strong,:root:not([data-theme=dark]) .experience-progress,:root:not([data-theme=dark]) .experience-rate b{color:#947100}@media(max-width:1100px){.dashboard-cards{grid-template-columns:1fr}.dashboard-cards>.panel{padding:24px}}@media(max-width:450px){.experience-heading h2{font-size:18px}.experience-progress{font-size:16px}.experience-rate>strong{font-size:32px}}

/* Keep calibration out of the dashboard without stopping capture or OCR. */
#capture[hidden]{display:none!important;}

#mini-stats{position:fixed;right:24px;bottom:24px;width:min(290px,calc(100vw - 24px));z-index:1000;background:#25282a;color:#e5edf3;border:1px solid #51585c;border-radius:12px;box-shadow:0 12px 36px #0006;overflow:hidden}#mini-stats[hidden]{display:none!important}#mini-drag{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;background:#303538;cursor:move;touch-action:none;user-select:none}#mini-drag button{padding:2px 10px;font-size:22px}.mini-body{padding:0 14px 14px}.mini-body p{display:flex;flex-direction:column;gap:4px;margin:12px 0;color:#b7c5ce;font-size:12px}.mini-body strong{font-size:20px;color:#f0d34e}.mini-body small{color:#9caeb8;font-size:11px}#rate-ten{color:#c5a42d}

.summary-metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:20px 0}.summary-metrics>div{padding:20px;background:var(--soft);border:1px solid var(--line);border-radius:12px}.summary-metrics span{display:block;color:var(--muted);font-size:14px}.summary-metrics strong{display:block;font-size:clamp(24px,3vw,38px);line-height:1.4;margin-top:10px;overflow-wrap:anywhere;color:var(--ink)}#summary-gain{color:#8b6500}html[data-theme=dark] #summary-gain{color:#f1ce50}@media(max-width:600px){.summary-metrics{grid-template-columns:1fr}}

/* Compact session overview with a shared chart baseline. */
.dashboard-cards>.panel{padding:22px}.experience-heading{margin:0 0 18px}.experience-rate{margin-bottom:18px}.experience-estimates{margin-top:18px;padding-top:16px}.trend-panel #chart{height:200px}
.summary-metrics{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:16px 0}.summary-metrics>div{padding:14px 16px}.summary-metrics strong{font-size:clamp(22px,2.2vw,30px);margin-top:6px}.summary-metrics .summary-best{border-color:#55b99d}.summary-best strong,.best-ten strong{color:#27836b}html[data-theme=dark] .summary-best strong,html[data-theme=dark] .best-ten strong{color:#81d9bc}.best-ten{font-size:14px;margin:8px 0}.chart-caption{display:flex;justify-content:space-between;gap:12px;font-size:12px;color:var(--muted);margin:8px 0}.result-chart{display:block;width:100%;height:210px;background:var(--soft);border-radius:10px}#summary-progress{font-size:20px}#summary-text{display:none}#summary-map{font-size:13px;margin:8px 0}@media(max-width:700px){.summary-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.result-chart{height:170px}}@media(max-width:420px){.summary-metrics{grid-template-columns:1fr}}

main#dashboard [hidden]{display:none!important}

.rank-opt-in{margin-top:16px;padding-top:14px;border-top:1px solid #69777a55}.rank-opt-in input[type=checkbox]{width:auto;margin-right:6px}.rank-opt-in input[type=text],.rank-opt-in input:not([type]){max-width:200px}.rank-opt-in a{color:var(--accent,#55b99d)}

.rank-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.rank-toolbar label{display:inline-flex;margin:0}.rank-toggle{position:relative;cursor:pointer}.rank-toggle input[type=checkbox]{position:absolute;width:1px;height:1px;opacity:0;margin:0;overflow:hidden}.rank-toggle span{display:flex;align-items:center;min-height:44px;padding:0 18px;border:1px solid #53595b;border-radius:9px;background:#303436;color:#d5dddf;font-weight:700;font-size:15px}.rank-toggle input:checked+span{background:#087e68;border-color:#8ee4c6;box-shadow:inset 0 0 0 1px #8ee4c6}.rank-toggle input:checked+span:after{content:' ✓ 已開啟';margin-left:8px}.rank-toggle input:focus-visible+span{outline:3px solid #e4c757;outline-offset:3px}.rank-name-label input{width:190px;margin:0}.rank-help{font-size:13px}.rank-help summary{cursor:pointer;color:#59bca1}.rank-help[open]{flex-basis:100%;order:2}.rank-help p{margin:8px 0;line-height:1.7}.rank-opt-in>p{margin:8px 0 0}.rank-opt-in{padding-top:12px;margin-top:12px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* Guided calibration */
.cal-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:14px 0}.cal-card{border:2px solid var(--line);border-radius:12px;padding:14px;background:var(--soft);display:flex;flex-direction:column;gap:6px;min-width:0}.cal-card header{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.cal-card header small{margin-left:auto}.cal-dot{width:12px;height:12px;border-radius:50%;background:#9aa4a0;flex:none}.cal-card[data-state=ok]{border-color:#2f9e6e}.cal-card[data-state=ok] .cal-dot{background:#2f9e6e}.cal-card[data-state=fail]{border-color:#d9534f}.cal-card[data-state=fail] .cal-dot{background:#d9534f}.cal-card[data-state=testing] .cal-dot{background:#e0a100;animation:calpulse 1s infinite}@keyframes calpulse{50%{opacity:.3}}.cal-msg{margin:0;font-size:14px;overflow-wrap:anywhere}.cal-read{margin:0;font-size:12px;color:var(--muted);overflow-wrap:anywhere}.cal-read:empty{display:none}.cal-crop{max-width:100%;max-height:72px;background:#111;border-radius:6px;align-self:flex-start}.cal-crop[hidden]{display:none}.cal-card button{margin-top:auto;align-self:flex-start}button.active{background:#f0c419;color:#111;border-color:#b99b1e}
.cal-guide{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:16px;align-items:center;border-left:5px solid var(--accent);background:var(--soft);border-radius:10px;padding:14px 16px;margin:14px 0;scroll-margin-top:16px}.cal-guide[data-state^=select]{border-left-color:#f0c419}.cal-guide[data-state=fail],.cal-guide[data-state=level]{border-left-color:#d9534f}.cal-guide-text strong{font-size:17px}.cal-guide-text p{margin:6px 0 0}.cal-example{margin:0}.cal-example svg{width:100%;height:auto;display:block;border-radius:8px}.cal-example figcaption{font-size:12px;color:var(--muted)}.cal-example .ex{display:none}.cal-example[data-focus=all] .ex,.cal-example[data-focus=exp] .ex-exp,.cal-example[data-focus=level] .ex-level,.cal-example[data-focus=map] .ex-map{display:inline}
.cal-toolbar{margin:10px 0}.cal-toolbar button{padding:6px 10px;font-size:14px}.cal-toolbar button[aria-pressed=true]{background:var(--accent);color:var(--panel);border-color:var(--accent)}#preview.selecting{cursor:crosshair;outline:3px solid #f0c419;outline-offset:2px}
@media(max-width:900px){.cal-cards{grid-template-columns:1fr}.cal-guide{grid-template-columns:1fr}}

/* Main-site header on top, tracker sidebar beside the content, Maple palette from maple-site.js */
.tracker-shell{display:grid;grid-template-columns:232px minmax(0,1fr);align-items:start}.tracker-shell>.sidebar{position:sticky;inset:auto;top:0;height:100vh;overflow:auto}.tracker-shell>main{max-width:none;width:auto;margin:0;padding:24px 32px;min-width:0}
@media(max-width:1050px){.tracker-shell{grid-template-columns:200px minmax(0,1fr)}.tracker-shell>main{padding:20px}}
@media(max-width:680px){.tracker-shell{display:block}.tracker-shell>.sidebar{position:relative;height:auto}.tracker-shell>main{padding:20px 14px}}
html[data-ui=maple]:has(.tracker-shell){--bg:var(--mx-page);--panel:var(--mx-paper);--soft:var(--mx-paper-2);--ink:var(--mx-ink);--muted:var(--mx-ink-soft);--line:#e2cfa6;--accent:var(--mx-orange-2)}html[data-ui=maple][data-theme=dark]:has(.tracker-shell){--line:#3a4a78;--accent:var(--mx-gold)}
html[data-ui=maple] .tracker-shell :is(.panel,.sidebar){background:var(--mx-paper)!important;border:3px solid var(--mx-rim-dark)!important;border-radius:14px!important;box-shadow:inset 0 0 0 3px var(--mx-paper-2),inset 0 0 0 5px #e7cf9f,0 6px 0 #00000022}html[data-ui=maple][data-theme=dark] .tracker-shell :is(.panel,.sidebar){box-shadow:inset 0 0 0 3px var(--mx-paper-2),inset 0 0 0 5px #3a4a78,0 6px 0 #0006}
html[data-ui=maple] .tracker-shell>.sidebar{margin:16px 0 16px 16px;top:16px;height:calc(100dvh - 104px)}html[data-ui=maple] .tracker-shell .sidebar nav a{font-weight:700}html[data-ui=maple] .tracker-shell .sidebar nav a:is(:hover,.active){background:var(--mx-paper-2);color:var(--accent)}html[data-ui=maple] .tracker-shell :is(.stat,.cal-card,.cal-guide){background:var(--mx-paper-2)}
@media(max-width:680px){html[data-ui=maple] .tracker-shell>.sidebar{margin:12px;height:auto}}
/* 楓幣 card: third column next to the EXP and trend cards, laid out like the EXP card */
@media(min-width:1300px){.dashboard-cards{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1101px) and (max-width:1299px){.dashboard-cards>.trend-panel{grid-column:1/-1;order:3}}
.meso-emblem{color:#ffd24a;border-color:#8a7a3a;background:#3b3620}.meso-emblem small{color:#ffd24a}
.meso-card .experience-rate{margin-bottom:14px}.meso-seen{margin:0;font-size:14px;color:var(--muted)}
.meso-card .experience-estimates strong{overflow-wrap:anywhere}
/* 楓幣紀錄 switch */
.meso-switch{margin-left:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:var(--muted);cursor:pointer;user-select:none;white-space:nowrap}
.meso-switch input{appearance:none;-webkit-appearance:none;position:relative;flex:none;width:46px;height:26px;margin:0;border-radius:999px;background:#b9b2a3;cursor:pointer;transition:background .2s}
.meso-switch input::after{content:'';position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #0005;transition:left .2s}
.meso-switch input:checked{background:#3fae62}.meso-switch input:checked::after{left:23px}.meso-switch input:focus-visible{outline:2px solid #f06a13;outline-offset:2px}
.meso-card.off .experience-rate,.meso-card.off .experience-estimates,.meso-card.off>p.muted,.meso-card.off>p.hint{opacity:.35}