:root { --fg:#1f2328; --muted:#6b7280; --ok:#1DB446; --warn:#E8A33D; --bad:#D9534F; }
* { box-sizing:border-box; }
body { margin:0; padding:24px 20px; font-family:system-ui,"Noto Sans TC",sans-serif;
       color:var(--fg); background:#fff; }
h1 { font-size:20px; margin:0 0 4px; }
p.sub { margin:0 0 24px; color:var(--muted); font-size:14px; }
button { width:100%; padding:16px; font-size:17px; font-weight:600; color:#fff;
         background:var(--ok); border:0; border-radius:12px; margin-bottom:12px; }
button.secondary { background:#4b5563; }
button:disabled { opacity:.5; }
input { width:100%; padding:14px; font-size:20px; letter-spacing:.3em;
        text-align:center; border:1px solid #d1d5db; border-radius:12px;
        margin-bottom:16px; }
#result { padding:16px; border-radius:12px; font-size:15px; line-height:1.6;
          background:#f3f4f6; display:none; white-space:pre-wrap; }
#result.ok   { background:#e8f7ee; border-left:4px solid var(--ok); }
#result.warn { background:#fdf3e3; border-left:4px solid var(--warn); }
#result.bad  { background:#fdecea; border-left:4px solid var(--bad); }