:root{--ground: #edf1ef;--panel: #ffffff;--sunken: #f5f7f6;--ink: #12211c;--ink-soft: #54655e;--ink-faint: #8a9992;--rule: #d5deda;--brand: #2f7d63;--brand-dim: #e3f0ea;--brand-deep: #1f5a47;--danger: #c4453d}*{box-sizing:border-box}body{margin:0;background:var(--ground);color:var(--ink);font-family:Noto Sans TC,-apple-system,Segoe UI,sans-serif;font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}.page{max-width:40rem;margin:0 auto;padding:1rem}.card{background:var(--panel);border:1px solid var(--rule);border-radius:.6rem;padding:.9rem 1rem}.btn{width:100%;border:0;border-radius:.6rem;background:var(--brand);color:#fff;font:inherit;font-weight:500;padding:.75rem 1rem;cursor:pointer}.btn:hover{background:var(--brand-deep)}.btn:disabled{background:var(--sunken);color:var(--ink-faint);cursor:not-allowed}.input{width:100%;border:1px solid var(--rule);border-radius:.45rem;background:var(--panel);color:var(--ink);font:inherit;padding:.65rem .7rem}.input:focus{outline:2px solid var(--brand);outline-offset:-1px}.error{color:var(--danger);font-size:.85rem}.hint{color:var(--ink-faint);font-size:.8rem}