:root{--bg-paper: #f6f1e7;--bg-card: #fffdf9;--bg-subtle: #ede6d8;--ink: #1e1c1a;--ink-soft: #5c554c;--ink-muted: #8a8073;--border: #d9cfbe;--vermilion: #c83e2b;--vermilion-soft: #fbeae7;--jade: #2c6e49;--jade-soft: #e7f4ec;--ochre: #b27b22;--ochre-soft: #fbf3e2;--shadow-sm: 0 2px 8px rgba(38, 30, 18, .06);--shadow-md: 0 10px 28px rgba(38, 30, 18, .09);--radius-lg: 16px;--radius-md: 11px;--radius-sm: 8px}*{box-sizing:border-box}html,body{margin:0;padding:0;min-height:100%;background:radial-gradient(circle at top center,#fbf8f1 0%,var(--bg-paper) 75%);color:var(--ink);font-family:Noto Sans TC,PingFang TC,Microsoft JhengHei,system-ui,sans-serif;line-height:1.5}#app{max-width:920px;margin:0 auto;padding:12px 16px 20px;display:flex;flex-direction:column;gap:10px}.hidden{display:none!important}.topbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:10px 14px;box-shadow:var(--shadow-sm)}.brand{display:flex;align-items:center;gap:12px}.brand-seal{width:40px;height:40px;border-radius:8px;background:var(--vermilion);color:#fffdf9;font-family:DFKai-SB,BiauKai,Kaiti TC,serif;font-size:24px;font-weight:700;display:grid;place-items:center;flex-shrink:0;box-shadow:inset 0 0 0 2px #fffdf959}.brand h1{margin:0;font-size:1.15rem;font-weight:700;letter-spacing:.02em}.subtitle{margin:2px 0 0;font-size:.78rem;color:var(--ink-soft)}.subtitle-team{margin:2px 0 0;font-size:.8rem;font-weight:700;color:var(--vermilion);letter-spacing:.02em}.topbar-controls{display:flex;flex-wrap:wrap;align-items:center;gap:8px}.segmented{display:inline-flex;background:var(--bg-subtle);padding:3px;border-radius:10px;border:1px solid var(--border)}.seg-btn{border:none;background:transparent;color:var(--ink-soft);padding:6px 11px;font-size:.85rem;font-weight:600;border-radius:7px;cursor:pointer;transition:all .16s ease}.seg-btn.active{background:var(--ink);color:#fffdf9;box-shadow:0 1px 4px #00000029}.icon-btn{display:inline-flex;align-items:center;gap:5px;padding:7px 11px;border-radius:9px;border:1px solid var(--border);background:var(--bg-card);color:var(--ink);font-size:.84rem;font-weight:600;cursor:pointer}.icon-btn:hover{background:var(--bg-subtle)}.section-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.tab-btn{border:1px solid var(--border);background:var(--bg-card);color:var(--ink-soft);padding:10px 12px;border-radius:var(--radius-md);font-size:.94rem;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;transition:all .16s ease}.tab-btn:hover{border-color:var(--ink-muted)}.tab-btn.active{background:var(--ink);color:#fffdf9;border-color:var(--ink);box-shadow:var(--shadow-sm)}.badge-mini{font-size:.72rem;padding:2px 6px;border-radius:999px;background:#8a80732e;color:inherit}.tab-btn.active .badge-mini{background:#fffdf938}.badge-mini.gold{background:var(--ochre-soft);color:var(--ochre)}.tab-btn.active .badge-mini.gold{background:#d89b32;color:#1e1c1a}.workspace{display:flex;flex-direction:column;gap:10px}.section-bar{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);padding:8px 12px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;box-shadow:var(--shadow-sm)}.pool-group{display:flex;flex-wrap:wrap;align-items:center;gap:6px}.bar-label{font-size:.85rem;font-weight:600;color:var(--ink-soft)}.pill-btn{border:1px solid var(--border);background:var(--bg-paper);color:var(--ink-soft);padding:5px 11px;border-radius:999px;font-size:.83rem;font-weight:600;cursor:pointer;transition:all .15s ease}.pill-btn.active{background:var(--ink);color:#fffdf9;border-color:var(--ink)}#panel-custom{flex-direction:column;align-items:stretch}.custom-input-row{display:flex;gap:8px}#custom-input{flex:1;padding:9px 12px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;font-size:.96rem;color:var(--ink)}#custom-input:focus{outline:2px solid rgba(30,28,26,.25);border-color:var(--ink)}.inline-note{font-size:.82rem;color:var(--vermilion);background:var(--vermilion-soft);padding:6px 10px;border-radius:var(--radius-sm)}.custom-queue{display:flex;flex-wrap:wrap;gap:6px}.queue-chip{position:relative;width:38px;height:38px;border-radius:8px;border:1px solid var(--border);background:var(--bg-paper);font-size:1.15rem;font-family:DFKai-SB,BiauKai,Kaiti TC,serif;cursor:pointer;display:grid;place-items:center;color:var(--ink)}.queue-chip.active{border:2px solid var(--ink);background:#fff;font-weight:700}.queue-chip.done{background:var(--jade-soft);border-color:var(--jade);color:var(--jade)}.queue-chip.done:after{content:"✓";position:absolute;top:-5px;right:-5px;width:15px;height:15px;border-radius:50%;background:var(--jade);color:#fff;font-size:10px;font-family:system-ui,sans-serif;display:grid;place-items:center}#panel-challenge{flex-direction:column;align-items:stretch}.challenge-hud{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px}.challenge-score-box{display:flex;align-items:baseline;gap:8px;background:var(--bg-paper);border:1px solid var(--border);border-radius:var(--radius-sm);padding:6px 12px}.challenge-score-box.accent{background:var(--ochre-soft);border-color:#e4c78d}.score-title{font-size:.82rem;color:var(--ink-soft);font-weight:600}.challenge-score-box strong{font-size:1.05rem;color:var(--ink)}.challenge-dots{display:grid;grid-template-columns:repeat(10,1fr);gap:6px}.c-dot{height:28px;border-radius:7px;border:1px solid var(--border);background:var(--bg-paper);font-size:.78rem;font-weight:700;color:var(--ink-muted);display:grid;place-items:center}.c-dot.current{border:2px solid var(--ink);color:var(--ink);background:#fff}.c-dot.pass{background:var(--jade-soft);border-color:var(--jade);color:var(--jade)}.c-dot.fail{background:var(--vermilion-soft);border-color:var(--vermilion);color:var(--vermilion)}.stage{display:flex;flex-direction:column;align-items:center;gap:10px}.target-card{width:min(92vw,520px);background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:9px 14px;display:flex;align-items:center;gap:14px;box-shadow:var(--shadow-sm)}.target-glyph-wrap{width:72px;height:72px;border-radius:10px;border:1px solid var(--border);background:var(--bg-paper);flex-shrink:0;padding:4px}.target-svg{width:100%;height:100%;display:block}.target-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}.target-top-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px}.zhuyin-list{display:flex;flex-wrap:wrap;gap:6px}.zhuyin-pill{background:var(--bg-subtle);color:var(--ink);padding:2px 9px;border-radius:999px;font-size:.9rem;font-weight:700}.status-chip{padding:3px 10px;border-radius:999px;font-size:.78rem;font-weight:700}.status-chip.pending{background:var(--bg-subtle);color:var(--ink-soft)}.status-chip.pass{background:var(--jade-soft);color:var(--jade)}.status-chip.fail{background:var(--vermilion-soft);color:var(--vermilion)}.target-meta-row{font-size:.9rem;color:var(--ink-soft)}.dot-sep{margin:0 6px}.mode-hint-text{font-size:.8rem;color:var(--ink-muted)}.square-frame-outer{display:flex;justify-content:center;width:100%}.square-frame{position:relative;width:min(84vw,400px,max(280px,48vh));aspect-ratio:1 / 1;border:2.5px solid var(--ink);border-radius:14px;background:#fffdf9;box-shadow:var(--shadow-md);overflow:hidden;-webkit-user-select:none;user-select:none}.square-frame.shake{animation:box-shake .36s ease}.square-frame.pass-glow{border-color:var(--jade);box-shadow:0 0 0 4px #2c6e4929,var(--shadow-md)}.square-frame.fail-glow{border-color:var(--vermilion);box-shadow:0 0 0 4px #c83e2b26,var(--shadow-md)}#writing-canvas{width:100%;height:100%;display:block;touch-action:none;cursor:crosshair}@keyframes box-shake{0%,to{transform:translate(0)}20%{transform:translate(-7px)}45%{transform:translate(7px)}70%{transform:translate(-4px)}}.seal-overlay{position:absolute;right:16px;bottom:16px;pointer-events:none}.seal-stamp{width:66px;height:66px;border:3px solid var(--vermilion);border-radius:10px;color:var(--vermilion);background:#fffdf9e0;font-family:DFKai-SB,BiauKai,Kaiti TC,serif;font-size:24px;font-weight:800;letter-spacing:2px;display:grid;place-items:center;transform:rotate(-10deg) scale(1);animation:stamp-slam .38s cubic-bezier(.22,1.35,.36,1);box-shadow:0 3px 10px #c83e2b2e}@keyframes stamp-slam{0%{opacity:0;transform:rotate(-20deg) scale(1.9)}to{opacity:1;transform:rotate(-10deg) scale(1)}}.confetti-layer{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;overflow:hidden}.petal{position:absolute;width:9px;height:9px;border-radius:2px;animation:petal-burst .95s ease-out forwards}@keyframes petal-burst{0%{opacity:1;transform:translate(0) rotate(0) scale(1)}to{opacity:0;transform:translate(var(--tx),var(--ty)) rotate(260deg) scale(.5)}}.visual-toggles{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 16px}.toggle-group{display:inline-flex;align-items:center;gap:5px}.toggle-label{font-size:.83rem;color:var(--ink-soft);font-weight:600}.mini-btn{border:1px solid var(--border);background:var(--bg-card);color:var(--ink-soft);padding:4px 10px;border-radius:7px;font-size:.8rem;font-weight:600;cursor:pointer}.mini-btn.active{background:var(--ink);color:#fffdf9;border-color:var(--ink)}.switch-label{display:inline-flex;align-items:center;gap:6px;font-size:.84rem;font-weight:600;color:var(--ink-soft);cursor:pointer}.switch-label.disabled{opacity:.48;cursor:not-allowed}.action-bar{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}.btn{border:1px solid transparent;padding:9px 15px;border-radius:10px;font-size:.92rem;font-weight:700;cursor:pointer;transition:transform .1s ease,background .15s ease,opacity .15s ease}.btn:active:not(:disabled){transform:translateY(1px)}.btn:disabled{opacity:.45;cursor:not-allowed}.btn.primary{background:var(--ink);color:#fffdf9}.btn.primary:hover:not(:disabled){background:#332f2b}.btn.primary-soft{background:var(--ink);color:#fffdf9;padding:8px 14px}.btn.secondary{background:var(--bg-card);border-color:var(--border);color:var(--ink)}.btn.secondary:hover:not(:disabled){background:var(--bg-subtle)}.btn.ghost{background:var(--ochre-soft);border-color:#e4c78d;color:#7c5310}.btn.accent{background:var(--jade);color:#fffdf9}.btn.accent:hover:not(:disabled){background:#23583a}.feedback-banner{width:min(92vw,560px);padding:10px 14px;border-radius:var(--radius-md);font-size:.92rem;font-weight:600;text-align:center;border:1px solid var(--border);background:var(--bg-card);color:var(--ink-soft)}.feedback-banner.pass{background:var(--jade-soft);border-color:#9ecbb0;color:var(--jade)}.feedback-banner.fail{background:var(--vermilion-soft);border-color:#ebb0a7;color:var(--vermilion)}.summary-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:22px 18px;box-shadow:var(--shadow-md);display:flex;flex-direction:column;gap:16px;text-align:center}.summary-rank{display:inline-block;margin:0 auto 6px;padding:4px 14px;border-radius:999px;background:var(--ochre-soft);color:var(--ochre);font-weight:700;font-size:.9rem}.summary-header h2{margin:0;font-size:2rem;color:var(--ink)}.summary-header p{margin:6px 0 0;color:var(--ink-soft);font-size:.92rem}.summary-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}.summary-item{border:1px solid var(--border);border-radius:var(--radius-md);padding:10px 8px;background:var(--bg-paper);display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer}.summary-item.pass{border-color:#9ecbb0;background:var(--jade-soft)}.summary-item.fail{border-color:#ebb0a7;background:var(--vermilion-soft)}.summary-item-char{font-family:DFKai-SB,BiauKai,Kaiti TC,serif;font-size:1.9rem;line-height:1.1}.summary-item-score{font-size:.8rem;font-weight:700}.summary-item-note{font-size:.72rem;color:var(--ink-soft)}.summary-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}.footer-stats{margin-top:4px;padding-top:12px;border-top:1px solid var(--border);display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}.stats-items{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;font-size:.88rem;color:var(--ink-soft)}.stats-credit{font-size:.76rem;color:var(--ink-muted)}@media(max-width:600px){.topbar{padding:10px 12px}.challenge-dots{grid-template-columns:repeat(5,1fr)}.target-card{padding:10px 12px}.target-glyph-wrap{width:68px;height:68px}}