:root{--accent: #8fb0cb;--on-accent: #22364a;--accent-ink: #4d6a82;--accent-soft: #628cae;--tint: #f0f5fa;--thumb-bg: #f1ece3;--tint-track: #f2e7bd;--text: #332f2b;--text-muted: #6b6560;--text-faint: #a29b93;--text-disabled: #c6beb4;--surface: #ffffff;--surface-soft: #f7f3ec;--hairline: #f2ece3;--divider: #f3ede5;--divider-2: #f3ede5;--chip-bg: #f4efe7;--track: #efece7;--success: #5f8153;--success-soft: #f2f7ef;--accent-2: #f5dd93;--gold: #f5dd93;--gold-soft: #fdf9e8;--gold-deep: #5c4d18;--gold-ink: #8a7327;--gold-edge: #e8c96a;--danger: #c75146;--danger-soft: #fbeae7;--danger-ink: #a63d33;--frame: #efece7;--font: "GenJyuuGothicX", "Noto Sans TC", -apple-system, "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;--shadow-card: 0 1px 2px rgba(74, 69, 64, .04), 0 6px 18px rgba(74, 69, 64, .045);--shadow-frame: 0 10px 24px rgba(0, 0, 0, .1)}*{box-sizing:border-box}html,body{margin:0;padding:0;background:#fdfbf7;font-family:var(--font);color:var(--text);-webkit-tap-highlight-color:transparent}button{font-family:inherit;border:none;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}input{font-family:inherit}#root{min-height:100vh;display:flex;justify-content:center;align-items:flex-start;padding:24px 12px}.phone-frame{width:100%;max-width:380px;background:var(--frame);padding:8px;border-radius:26px;box-shadow:var(--shadow-frame)}.phone-screen{background:var(--surface);border-radius:20px;overflow:hidden;min-height:min(78vh,720px);display:flex;flex-direction:column;position:relative}@media (max-width: 480px){#root{padding:0;min-height:100dvh;align-items:stretch}.phone-frame{max-width:100%;padding:0;border-radius:0;box-shadow:none;background:transparent}.phone-screen{border-radius:0;min-height:100dvh;height:100dvh}}.scroll-area{flex:1;overflow-y:auto}.top-header{padding:14px 15px 11px;border-bottom:1px solid var(--divider)}.eyebrow{font:600 13px/1.4 var(--font);color:var(--accent-ink);letter-spacing:.05em}.h1{font:900 21px/1.3 var(--font);color:var(--text);margin-top:4px}.h1-lg{font:900 24px/1.3 var(--font);color:var(--text)}.sub{font:500 13px/1.5 var(--font);color:var(--text-faint)}.footer-bar{padding:12px 15px 14px;border-top:1px solid var(--divider)}.btn-primary{background:var(--accent);color:var(--on-accent);text-align:center;font:700 16px var(--font);padding:14px;border-radius:12px;width:100%;transition:opacity .15s}.btn-primary:active{opacity:.85}.btn-primary:disabled,.btn-primary.disabled{background:var(--text-disabled);color:#fff}.btn-outline{background:#fff;border:1.5px solid var(--accent);color:var(--accent-ink);text-align:center;font:700 15px var(--font);padding:13px;border-radius:11px}.btn-row{display:flex;gap:9px}.tint-box{background:var(--tint);border-radius:11px;padding:9px 11px;font:500 12px/1.5 var(--font);color:var(--accent-ink)}.spinner-ring{border-radius:50%;border:4px solid var(--tint);border-top-color:var(--accent);animation:spin .9s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.card{background:#fff;border:1px solid var(--hairline);border-radius:12px;box-shadow:var(--shadow-card)}.chip{font:600 13px var(--font);padding:9px 16px;border-radius:12px;border:1.5px solid var(--hairline);background:var(--chip-bg);color:#7a7269;white-space:nowrap}.chip.selected{background:var(--accent);color:var(--on-accent);border-color:var(--accent);font-weight:700}.chip.disabled{background:var(--chip-bg);color:var(--text-disabled);border:1.5px dashed #ddd2c6}.pill{font:700 13px var(--font);color:var(--on-accent);background:var(--accent);padding:6px 13px;border-radius:20px}.pill.muted{font:600 13px var(--font);color:var(--text-muted);background:var(--chip-bg)}.err-banner{background:var(--danger-soft);color:var(--danger);border-radius:10px;padding:9px 11px;font:600 13px/1.5 var(--font)}.progress-track{height:6px;background:var(--track);border-radius:6px;overflow:hidden}.progress-track.on-tint{background:var(--tint-track)}.progress-fill{display:block;height:100%;background:var(--accent);transition:width .3s ease}