:root { color-scheme: light; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #18231e; background: #f3f7f3; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 15% 0%, #dceee1 0, transparent 34%), #f3f7f3; }
button, input { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible { outline: 3px solid #75b88d; outline-offset: 2px; }
.shell { width: min(100% - 32px, 520px); margin: 0 auto; padding: clamp(48px, 10vh, 96px) 0 40px; }
.heading { display: flex; align-items: center; gap: 14px; margin-bottom: 28px; }
.mark { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 15px; background: #163d29; color: #fff; font-size: 25px; font-weight: 700; }
.eyebrow { margin: 0 0 3px; color: #648775; font-size: 10px; font-weight: 800; letter-spacing: .24em; }
h1 { margin: 0; font-size: 26px; letter-spacing: -.04em; }
.card { padding: 34px; background: #fff; border: 1px solid #dce9de; border-radius: 25px; box-shadow: 0 22px 70px #244a2b12; }
.card-top { display: flex; align-items: center; gap: 8px; color: #407653; font-size: 12px; font-weight: 700; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: #3da268; box-shadow: 0 0 0 4px #e6f5ea; }
h2 { margin: 15px 0 10px; font-size: 25px; line-height: 1.28; letter-spacing: -.035em; }
.description, .field-help, .note { color: #66766a; line-height: 1.7; }
.description { margin: 0 0 26px; font-size: 14px; }
label { display: block; margin-bottom: 9px; font-size: 13px; font-weight: 750; }
.input-row { position: relative; }
input { width: 100%; height: 51px; padding: 0 76px 0 14px; border: 1px solid #ccd9cf; border-radius: 12px; background: #fafdfa; color: #1d3023; letter-spacing: .08em; }
input::placeholder { color: #a3b1a7; letter-spacing: 0; }
.icon-button { position: absolute; top: 7px; right: 7px; height: 37px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; color: #39764f; font-size: 12px; font-weight: 700; }
.field-help { margin: 9px 0 22px; font-size: 12px; }
.primary, .secondary, .quiet { border-radius: 11px; font-weight: 750; }
.primary { width: 100%; min-height: 48px; border: 0; background: #174e30; color: #fff; }
.primary:hover { background: #0d3c21; }
.error { margin: 18px 0 0; color: #bd3b32; font-size: 13px; }
.result { margin-top: 28px; padding: 24px; border: 1px solid #cde8d2; border-radius: 17px; background: #f4fbf5; }
.result-header { display: flex; align-items: center; justify-content: space-between; color: #496a53; font-size: 12px; font-weight: 750; }
.live-tag { padding: 5px 8px; border-radius: 999px; background: #e2f2e5; color: #438054; font-size: 11px; }
.code { display: block; margin: 16px 0 17px; color: #163d29; font-size: clamp(40px, 10vw, 55px); font-weight: 800; letter-spacing: .1em; font-variant-numeric: tabular-nums; }
.meter { height: 6px; overflow: hidden; border-radius: 999px; background: #dceade; }
.meter div { width: 100%; height: 100%; border-radius: inherit; background: #36935b; transition: width .2s linear; }
.countdown { margin: 9px 0 18px; color: #5f7565; font-size: 12px; }
.result-actions { display: flex; gap: 10px; }
.secondary, .quiet { min-height: 41px; padding: 0 14px; font-size: 12px; }
.secondary { border: 1px solid #bcd9c3; background: #fff; color: #28633e; }
.quiet { border: 0; background: transparent; color: #687a6b; }
.note { margin: 23px 8px 0; font-size: 12px; }
@media (max-width: 520px) { .shell { width: min(100% - 24px, 520px); padding-top: 36px; } .card { padding: 25px 20px; border-radius: 19px; } .code { letter-spacing: .07em; } }