:root {
  --tausta: #f3f5f8; --kortti: #ffffff; --teksti: #1b2430; --heikko: #5b6675;
  --korostus: #0b5cad; --korostus-tumma: #08467f; --reuna: #d5dbe3; --virhe: #b3261e; --ok: #1e7d32;
}
@media (prefers-color-scheme: dark) {
  :root { --tausta: #11161d; --kortti: #1a212b; --teksti: #e6ebf1; --heikko: #9aa6b5;
          --korostus: #4c9be8; --korostus-tumma: #2f7fcf; --reuna: #2c3644; --virhe: #ef8a80; --ok: #7bd389; }
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; align-items: center;
       justify-content: center; padding: 16px; background: var(--tausta); color: var(--teksti);
       font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.kortti { width: 100%; max-width: 400px; background: var(--kortti); border: 1px solid var(--reuna);
          border-radius: 12px; padding: 32px 28px; box-shadow: 0 4px 24px rgba(0,0,0,.06); }
header { text-align: center; margin-bottom: 24px; }
.logo { width: 56px; height: 56px; margin: 0 auto 12px; border-radius: 14px; background: var(--korostus);
        color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 20px; letter-spacing: 1px; }
h1 { margin: 0; font-size: 24px; }
.ala { margin: 2px 0 0; color: var(--heikko); font-size: 14px; }
h2 { font-size: 18px; margin: 0 0 8px; }
p { margin: 0 0 16px; color: var(--heikko); }
label { display: block; font-weight: 600; margin-bottom: 6px; }
input { width: 100%; padding: 12px 14px; font-size: 17px; border: 1px solid var(--reuna); border-radius: 8px;
        background: var(--tausta); color: var(--teksti); margin-bottom: 16px; }
input:focus { outline: 2px solid var(--korostus); outline-offset: 1px; }
#koodi { letter-spacing: 6px; text-align: center; font-variant-numeric: tabular-nums; }
button { width: 100%; padding: 12px; font-size: 16px; font-weight: 600; border: 0; border-radius: 8px;
         background: var(--korostus); color: #fff; cursor: pointer; }
button:hover { background: var(--korostus-tumma); }
button:disabled { opacity: .6; cursor: wait; }
button.linkki { background: none; color: var(--korostus); margin-top: 8px; font-weight: 500; }
#viesti { margin: 16px 0 0; min-height: 1.5em; text-align: center; }
#viesti.virhe { color: var(--virhe); }
#viesti.ok { color: var(--ok); }
footer { margin-top: 20px; color: var(--heikko); font-size: 13px; }