:root{--bg:#121018;--bg-raised:#1a1725;--bg-inset:#0b0a10;--surface:#221e30;--surface-hover:#2b2740;--border:#38334e;--border-strong:#4d4770;--text-h:#f2f0ff;--text:#b9b4cc;--text-dim:#8f8aa8;--accent:#a78bfa;--accent-strong:#7c3aed;--accent-soft:#8b5cf624;--accent-border:#8b5cf673;--ok:#34d399;--ok-soft:#34d39924;--warn:#fbbf24;--warn-soft:#fbbf2424;--err:#f87171;--err-soft:#f8717124;--dim-EI:#60a5fa;--dim-SN:#f472b6;--dim-TF:#fbbf24;--dim-JP:#34d399;--fs-xs:.75rem;--fs-sm:.875rem;--fs-base:1rem;--fs-lg:1.25rem;--fs-xl:1.5625rem;--fs-2xl:1.953rem;--fs-3xl:2.441rem;--fs-display:3.052rem;--leading:1.5;--sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;--sp-6:32px;--sp-7:48px;--sp-8:64px;--r-sm:6px;--r-md:10px;--r-lg:16px;--r-xl:24px;--hit:44px;--shadow:0 10px 30px -10px #0000008c;font-family:Segoe UI,PingFang TC,Microsoft JhengHei,Noto Sans TC,system-ui,sans-serif;font-size:16px;line-height:var(--leading);--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility}*{box-sizing:border-box}html,body{min-height:100vh;margin:0;padding:0}body{background:radial-gradient(60rem 40rem at 80% -10%, var(--accent-soft), transparent 60%), radial-gradient(40rem 30rem at 0% 110%, #60a5fa14, transparent 60%), var(--bg);color:var(--text);font:inherit}#root{flex-direction:column;min-height:100svh;display:flex}::selection{background:var(--accent-border);color:var(--text-h)}h1,h2,h3{color:var(--text-h);text-wrap:balance;margin:0;font-family:inherit;font-weight:700;line-height:1.2}p{margin:0}button{font:inherit;cursor:pointer}input,select,textarea{font:inherit}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.shell{width:100%;max-width:720px;padding:var(--sp-5) var(--sp-4) var(--sp-8);gap:var(--sp-5);flex-direction:column;flex:1;margin-inline:auto;display:flex}.shell-wide{max-width:920px}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--sp-5);box-shadow:var(--shadow)}.btn{justify-content:center;align-items:center;gap:var(--sp-2);min-height:var(--hit);padding:0 var(--sp-5);border-radius:var(--r-md);border:1px solid var(--border-strong);background:var(--surface-hover);color:var(--text-h);font-weight:600;font-size:var(--fs-base);-webkit-user-select:none;user-select:none;transition:background-color .15s,border-color .15s;display:inline-flex}.btn:hover{background:var(--bg-raised)}.btn:active{transition:transform 50ms;transform:scale(.96)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:var(--accent-strong);border-color:var(--accent-strong);color:#fff}.btn-primary:hover{background:var(--accent)}.btn-danger{background:var(--err-soft);border-color:var(--err);color:var(--err)}.btn-ghost{color:var(--text);background:0 0;border-color:#0000}.btn-ghost:hover{background:var(--surface-hover)}.btn-sm{min-height:34px;padding:0 var(--sp-3);font-size:var(--fs-sm);border-radius:var(--r-sm)}.field{gap:var(--sp-1);flex-direction:column;display:flex}.field label{font-size:var(--fs-sm);color:var(--text-dim);letter-spacing:.02em;font-weight:600}.field input,.field select{min-height:var(--hit);padding:0 var(--sp-3);background:var(--bg-inset);border:1px solid var(--border);border-radius:var(--r-md);color:var(--text-h);transition:border-color .15s}.field input:focus,.field select:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}.field .hint{font-size:var(--fs-xs);color:var(--text-dim)}.progress-track{background:var(--bg-inset);border:1px solid var(--border);border-radius:999px;width:100%;height:8px;overflow:hidden}.progress-fill{background:linear-gradient(90deg, var(--accent-strong), var(--accent));border-radius:999px;height:100%;transition:width .3s}.chip{font-size:var(--fs-xs);background:var(--accent-soft);color:var(--accent);border:1px solid var(--accent-border);border-radius:999px;align-items:center;gap:6px;padding:3px 10px;font-weight:600;display:inline-flex}.chip-ok{background:var(--ok-soft);color:var(--ok);border-color:#34d39966}.chip-warn{background:var(--warn-soft);color:var(--warn);border-color:#fbbf2466}.chip-err{background:var(--err-soft);color:var(--err);border-color:#f8717166}.toast-stack{bottom:var(--sp-5);gap:var(--sp-2);z-index:100;flex-direction:column;width:min(420px,100vw - 32px);display:flex;position:fixed;left:50%;transform:translate(-50%)}.toast{background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--r-md);padding:var(--sp-3) var(--sp-4);box-shadow:var(--shadow);font-size:var(--fs-sm);color:var(--text-h);align-items:center;gap:var(--sp-2);animation:.25s toast-in;display:flex}@keyframes toast-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.page-head{align-items:center;gap:var(--sp-3);flex-wrap:wrap;display:flex}.page-head h1{font-size:var(--fs-2xl);flex:1}.page-head .muted{color:var(--text-dim);font-size:var(--fs-sm)}@media (width<=640px){.page-head h1{font-size:var(--fs-xl)}.card{padding:var(--sp-4)}}:root{--px:5px}.mascot{--px:5px;width:calc(16 * var(--px));height:calc(16 * var(--px));image-rendering:pixelated;flex-shrink:0;position:relative}.mascot:before{content:"";width:var(--px);height:var(--px);box-shadow: 7 * var(--px) 0 var(--px) 0 #8b5cf6, 8 * var(--px) 0 var(--px) 0 #8b5cf6, 7 * var(--px) 1 * var(--px) var(--px) 0 #a78bfa, 8 * var(--px) 1 * var(--px) var(--px) 0 #a78bfa,  5 * var(--px) 2 * var(--px) 6 * var(--px) 1 * var(--px) #7c3aed, 4 * var(--px) 3 * var(--px) 8 * var(--px) 1 * var(--px) #6d28d9, 4 * var(--px) 4 * var(--px) 8 * var(--px) 2 * var(--px) #6d28d9,  4 * var(--px) 6 * var(--px) 8 * var(--px) 4 * var(--px) #f2f0ff,  6 * var(--px) 7 * var(--px) 1 * var(--px) 2 * var(--px) #1e1b2e, 9 * var(--px) 7 * var(--px) 1 * var(--px) 2 * var(--px) #1e1b2e,  5 * var(--px) 9 * var(--px) 1 * var(--px) 1 * var(--px) #f472b6, 10 * var(--px) 9 * var(--px) 1 * var(--px) 1 * var(--px) #f472b6,  7 * var(--px) 9 * var(--px) 2 * var(--px) 1 * var(--px) #1e1b2e,  4 * var(--px) 11 * var(--px) 8 * var(--px) 4 * var(--px) #4c1d95,  5 * var(--px) 15 * var(--px) 2 * var(--px) 1 * var(--px) #3b0f6e, 9 * var(--px) 15 * var(--px) 2 * var(--px) 1 * var(--px) #3b0f6e;background:0 0;transition:box-shadow .2s;position:absolute;top:0;left:0}.mascot.mascot-happy:before{box-shadow:7 * var(--px) 0 var(--px) 0 #8b5cf6, 8 * var(--px) 0 var(--px) 0 #8b5cf6, 7 * var(--px) 1 * var(--px) var(--px) 0 #a78bfa, 8 * var(--px) 1 * var(--px) var(--px) 0 #a78bfa, 5 * var(--px) 2 * var(--px) 6 * var(--px) 1 * var(--px) #7c3aed, 4 * var(--px) 3 * var(--px) 8 * var(--px) 1 * var(--px) #6d28d9, 4 * var(--px) 4 * var(--px) 8 * var(--px) 2 * var(--px) #6d28d9, 4 * var(--px) 6 * var(--px) 8 * var(--px) 4 * var(--px) #f2f0ff, 6 * var(--px) 7 * var(--px) 1 * var(--px) 2 * var(--px) #1e1b2e, 9 * var(--px) 7 * var(--px) 1 * var(--px) 2 * var(--px) #1e1b2e, 5 * var(--px) 9 * var(--px) 1 * var(--px) 1 * var(--px) #f472b6, 10 * var(--px) 9 * var(--px) 1 * var(--px) 1 * var(--px) #f472b6, 6 * var(--px) 9 * var(--px) 4 * var(--px) 1 * var(--px) #1e1b2e, 4 * var(--px) 11 * var(--px) 8 * var(--px) 4 * var(--px) #4c1d95, 3 * var(--px) 11 * var(--px) 1 * var(--px) 1 * var(--px) #4c1d95, 12 * var(--px) 11 * var(--px) 1 * var(--px) 1 * var(--px) #4c1d95, 5 * var(--px) 15 * var(--px) 2 * var(--px) 1 * var(--px) #3b0f6e, 9 * var(--px) 15 * var(--px) 2 * var(--px) 1 * var(--px) #3b0f6e}@keyframes mascot-bob{0%,to{transform:translateY(0)}50%{transform:translateY(-3px)}}.particles{pointer-events:none;z-index:0;position:fixed;inset:0;overflow:hidden}.particles span{background:var(--accent);opacity:.35;border-radius:1px;width:6px;height:6px;position:absolute;bottom:-10px}@keyframes particle-rise{0%{opacity:.4;transform:translateY(0)rotate(0)}to{opacity:0;transform:translateY(-110vh)rotate(360deg)}}@media (prefers-reduced-motion:no-preference){.mascot:before,.mascot.mascot-happy:before{animation:1.6s ease-in-out infinite mascot-bob}.particles span{animation:linear infinite particle-rise}}
