:root{--bg:#f3efe7;--card:#fffdf9;--ink:#171717;--muted:#7c746a;--line:#d9d0c2;--green:#176c58;--red:#d64234;--grid:rgba(43,106,91,.42);--test:#94631c}
*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,"Noto Sans TC","Microsoft JhengHei",sans-serif}body{min-height:100vh}
.app-shell{max-width:1320px;margin:auto;padding:28px}.topbar{display:flex;justify-content:space-between;gap:24px;align-items:flex-end;margin-bottom:18px}.eyebrow{font-size:12px;letter-spacing:.14em;color:var(--muted)}
h1{font-size:34px;margin:4px 0 5px;letter-spacing:-.04em}.topbar p{margin:0;color:var(--muted)}.version{background:#111;color:#fff;border-radius:999px;padding:9px 14px;font-size:12px;white-space:nowrap}
.controlbar{display:flex;align-items:center;gap:9px;flex-wrap:wrap;background:rgba(255,255,255,.78);border:1px solid var(--line);border-radius:18px;padding:11px 12px;margin-bottom:16px}
.btn,.switch-control,.range-control{height:42px;border:1px solid var(--line);background:#fff;border-radius:11px;padding:0 14px;font-size:14px;display:inline-flex;align-items:center;gap:8px}.btn{cursor:pointer}.btn:hover{transform:translateY(-1px)}
.btn-dark{background:#161616;color:#fff;border-color:#161616}.btn-green{background:var(--green);color:#fff;border-color:var(--green)}.switch-control input{width:18px;height:18px}.range-control input{width:100px}.range-wide input{width:92px}.test-control{border-color:#d7bd8e;background:#fffaf0}.test-control:has(input:checked){color:#6f470c;border-color:#b9873d;background:#fff4df}.is-disabled{opacity:.45;pointer-events:none}.divider{height:24px;width:1px;background:var(--line)}.mode-hint{font-size:12px;color:var(--muted);margin-left:auto}
.workspace{display:grid;grid-template-columns:1fr 1fr;gap:16px}.card,.result-card,.comparison-card,.breakdown-card{background:rgba(255,253,249,.96);border:1px solid var(--line);border-radius:20px;box-shadow:0 8px 24px rgba(54,46,34,.04)}.card{padding:14px}
.card-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.card-head>div{display:flex;align-items:baseline;gap:8px}.card-head strong{font-size:17px}.card-head span{font-size:12px;color:var(--muted)}
.stage{position:relative;width:100%;aspect-ratio:3/4;border:1px solid #e4ddd2;border-radius:14px;background:#fff;overflow:hidden}.stage img,.stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}.stage img{object-fit:contain;background:#fff}.drawing-stage{touch-action:none;cursor:crosshair}.drawing-stage canvas{z-index:3}.drawing-stage .grid{z-index:4}.reference-overlay{z-index:1;opacity:0;pointer-events:none;transition:opacity .15s;background:#fff!important}.test-badge{position:absolute;z-index:5;top:10px;left:10px;background:rgba(111,71,12,.88);color:#fff;padding:6px 9px;border-radius:999px;font-size:10px;letter-spacing:.04em;pointer-events:none}
.grid{position:absolute;inset:0;pointer-events:none;opacity:0;background-image:linear-gradient(to right,transparent 33.15%,var(--grid) 33.2%,var(--grid) 33.55%,transparent 33.6%,transparent 66.45%,var(--grid) 66.5%,var(--grid) 66.85%,transparent 66.9%),linear-gradient(to bottom,transparent 33.15%,var(--grid) 33.2%,var(--grid) 33.55%,transparent 33.6%,transparent 66.45%,var(--grid) 66.5%,var(--grid) 66.85%,transparent 66.9%)}.grid.on{opacity:1}
.caption{font-size:12px;line-height:1.55;color:var(--muted);margin:9px 2px 1px}.result-card{display:grid;grid-template-columns:190px 1fr;gap:22px;padding:18px;margin-top:16px;align-items:center}.score-value{font-size:58px;font-weight:800;line-height:1}.score-unit,.muted{font-size:12px;color:var(--muted)}.score-bar{height:8px;background:#e9e3da;border-radius:99px;margin-top:11px;overflow:hidden}.score-bar i{display:block;height:100%;width:0;background:var(--green);transition:width .25s}.raw-score{margin-top:8px}
.section-title{font-weight:800;margin-bottom:6px}.feedback-main{font-size:17px;margin-bottom:6px}.feedback-tip{font-size:14px;line-height:1.55;margin-bottom:7px;color:#4d473f}.feedback-title-row{display:flex;align-items:center;gap:10px}.level-badge,.target-mode-badge{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:999px;padding:4px 8px;font-size:11px;color:var(--muted);background:#fff}
.breakdown-card{padding:16px;margin-top:16px}.breakdown-head{display:flex;justify-content:space-between;gap:15px;align-items:flex-start;margin-bottom:12px}.metric-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.metric{border:1px solid #e5ddd1;border-radius:13px;padding:12px;background:#fff}.metric span,.metric small{display:block;color:var(--muted);font-size:12px}.metric strong{display:block;font-size:28px;margin:3px 0}
.comparison-card{margin-top:16px;padding:16px}.comparison-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:12px}.comparison-controls{display:flex;gap:14px;font-size:13px}.comparison-stage{height:430px;border:1px solid #e4ddd2;border-radius:14px;background:#f8f5ef;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:16px}.comparison-viewport{height:100%;aspect-ratio:3/4;max-width:100%;background:#fff;border:1px solid #ebe4d9;border-radius:10px;overflow:hidden;box-shadow:0 2px 10px rgba(40,32,20,.05)}.comparison-viewport canvas{width:100%;height:100%;display:block}.hidden{display:none!important}.reference-hidden #referenceImg{opacity:0}
@media(max-width:860px){.app-shell{padding:14px}.topbar{align-items:flex-start;flex-direction:column}.workspace{grid-template-columns:1fr}.mode-hint{width:100%;margin-left:0}.result-card{grid-template-columns:1fr}.comparison-head,.breakdown-head{align-items:flex-start;flex-direction:column}.metric-grid{grid-template-columns:1fr 1fr}.comparison-stage{height:360px}}

/* V0.4 test-set + eraser */
#eraserBtn.active{background:#2d2923;color:#fff;border-color:#2d2923}
.drawing-stage.eraser-mode{cursor:cell}
.drawing-stage.eraser-mode canvas{cursor:cell}


.score-rank-row{display:flex;align-items:baseline;gap:8px;white-space:nowrap}
.rank-divider{font-size:36px;font-weight:500;line-height:1;color:#9a8c79;transform:translateY(-2px)}
.rank-value{font-size:38px;font-weight:900;line-height:1;letter-spacing:-.03em}
.rank-d{color:#8f877c}.rank-c{color:#9d7650}.rank-b{color:#b68139}.rank-a{color:#c98a22}.rank-s{color:#e19a22}.rank-ss{color:#e8a51f}.rank-sss{color:#d99b13}.rank-perfect{color:#c78908;font-size:27px;letter-spacing:-.045em}