:root { color-scheme: dark; font-family: Inter, "Noto Sans TC", "Microsoft JhengHei", sans-serif; background: #101827; color: #edf2f7; }
* { box-sizing: border-box; } body { margin: 0; min-width: 320px; }.page-shell { width: min(100% - 32px, 720px); min-height: 100vh; margin: 0 auto; padding: 56px 0; }.brand { color: #9cc2ff; font-size: 1.125rem; font-weight: 800; text-decoration: none; letter-spacing: .04em; }.card { margin-top: 28px; padding: clamp(24px, 6vw, 54px); border: 1px solid #2c3a52; border-radius: 20px; background: #182337; box-shadow: 0 24px 70px #05091666; }.eyebrow { margin: 0; color: #75a7ff; font-size: .75rem; font-weight: 800; letter-spacing: .14em; }h1 { margin: 12px 0; font-size: clamp(2rem, 7vw, 3.4rem); line-height: 1.08; }.intro, .note { color: #b9c4d4; line-height: 1.7; }label { display: block; margin: 30px 0 9px; font-weight: 700; }.form-row { display: flex; gap: 10px; }input { min-width: 0; flex: 1; border: 1px solid #50627d; border-radius: 9px; background: #0e1624; color: #fff; padding: 14px 15px; font: inherit; }input:focus { outline: 3px solid #3c7ce866; border-color: #75a7ff; }button { border: 0; border-radius: 9px; background: #6fa4ff; color: #07111f; cursor: pointer; padding: 0 20px; font: inherit; font-weight: 800; }button:hover { background: #9cc2ff; } button:disabled { cursor: wait; opacity: .7; }.message { margin: 12px 0 0; }.error { color: #ffb4ab; }.result { margin-top: 28px; padding-top: 4px; border-top: 1px solid #33445f; }.result label { margin-top: 20px; }.result img { display: block; max-width: 100%; height: auto; margin: 26px auto 0; padding: 10px; border-radius: 10px; background: #fff; }.note { font-size: .875rem; text-align: center; }code { color: #d3e2ff; }@media (max-width: 540px) { .page-shell { padding-top: 32px; }.form-row { flex-direction: column; }button { min-height: 48px; } }