:root { --fg: #1a1a1a; --muted: #666; --warn-bg: #fff6e5; --warn-bd: #e0a800; --ok: #1a7f37; }
* { box-sizing: border-box; }
body { font-family: system-ui, "Noto Sans TC", sans-serif; color: var(--fg); line-height: 1.6; margin: 0; background: #fafafa; }
main { max-width: 640px; margin: 0 auto; padding: 24px 16px 64px; }
h1 { font-size: 1.5rem; } h2 { font-size: 1.1rem; margin-top: 24px; }
.note, .hint { color: var(--muted); font-size: .9rem; }
.warn { background: var(--warn-bg); border: 1px solid var(--warn-bd); border-radius: 8px; padding: 12px 16px; margin: 16px 0; }
.ok { color: var(--ok); font-weight: 600; }
form { display: flex; flex-direction: column; gap: 12px; }
label { display: flex; flex-direction: column; gap: 4px; font-weight: 600; }
input, select { padding: 8px; font-size: 1rem; border: 1px solid #ccc; border-radius: 6px; }
fieldset { border: 1px solid #ddd; border-radius: 8px; }
.row { display: flex; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.row input { flex: 1; min-width: 120px; }
button { padding: 10px 16px; font-size: 1rem; border: 0; border-radius: 6px; background: #1a1a1a; color: #fff; cursor: pointer; }
button[type="button"] { background: #eee; color: #1a1a1a; }
#result, #msg { margin-top: 16px; }
a { color: #0b5cad; word-break: break-all; }