/* Kasetra look: charcoal #1E2124 + orange #FF6B1A, light and dark.
   Light is the base; dark follows the device unless the person picks one. */
@font-face { font-family:"Manrope"; src:url("/assets/fonts/manrope.woff2") format("woff2"); font-weight:200 800; font-style:normal; font-display:swap; }

:root {
  color-scheme: light;
  --charcoal:#1E2124; --volt:#FF6B1A; --on-volt:#1E2124;
  --bg:#F7F5F1; --surface:#FFFFFF; --surface-2:#FAF8F5; --hover:#FBF3EC;
  --text:#1E2124; --soft:#5E636A; --line:#E3E1DC;
  --field:#FFFFFF; --field-off:#F1EFEB;
  --top-bg:#1E2124; --top-text:#F4F2EE; --top-muted:#A8AEB4; --top-line:#2E3236; --top-hover:#2C3034;
  --banner-bg:#EDEBE6; --banner-line:#DDDAD3;
  --bad:#B42318; --bad-bg:#FDECEA; --good:#1E7A46; --good-bg:#E7F4EC;
  --warn:#B4500F; --warn-bg:#FFF1E6; --warn-line:#FFC79E; --warn-text:#6B2E06;
  --neutral:#555B61; --neutral-bg:#EEF0F2;
  --shadow:0 1px 2px rgba(30,33,36,.06), 0 8px 24px rgba(30,33,36,.06);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg:#1E2124; --surface:#272B2F; --surface-2:#2C3034; --hover:#33302D;
    --text:#F4F2EE; --soft:#A8AEB4; --line:#3A3F44;
    --field:#1E2124; --field-off:#24272A;
    --top-bg:#16181A; --top-line:#2A2E32; --top-hover:#272B2F;
    --banner-bg:#272B2F; --banner-line:#3A3F44;
    --bad:#FF8A80; --bad-bg:#3A1F1C; --good:#6FD39A; --good-bg:#1C3326;
    --warn:#FFB27A; --warn-bg:#3A2618; --warn-line:#6B3A17; --warn-text:#FFD2B0;
    --neutral:#C3C8CD; --neutral-bg:#33373B;
    --shadow:none;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg:#1E2124; --surface:#272B2F; --surface-2:#2C3034; --hover:#33302D;
  --text:#F4F2EE; --soft:#A8AEB4; --line:#3A3F44;
  --field:#1E2124; --field-off:#24272A;
  --top-bg:#16181A; --top-line:#2A2E32; --top-hover:#272B2F;
  --banner-bg:#272B2F; --banner-line:#3A3F44;
  --bad:#FF8A80; --bad-bg:#3A1F1C; --good:#6FD39A; --good-bg:#1C3326;
  --warn:#FFB27A; --warn-bg:#3A2618; --warn-line:#6B3A17; --warn-text:#FFD2B0;
  --neutral:#C3C8CD; --neutral-bg:#33373B;
  --shadow:none;
}

* { box-sizing:border-box; margin:0; padding:0; }
html,body { min-height:100%; }
body { background:var(--bg); color:var(--text); font-family:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,sans-serif; display:flex; align-items:center; justify-content:center; padding:24px 16px; min-height:100vh; -webkit-font-smoothing:antialiased; }
main { width:100%; max-width:400px; }

/* The logo: the orange ring with its dot and the K, then the word */
.brand { text-align:center; margin-bottom:24px; font-size:40px; font-weight:800; letter-spacing:-0.045em; line-height:1; color:var(--text); }
.brand, .brand a { display:flex; align-items:center; justify-content:center; gap:.28em; }
.brand a { color:inherit; text-decoration:none; }
.brand .mark { width:1.4em; height:1.4em; flex:0 0 auto; letter-spacing:0; }

.card { background:var(--surface); color:var(--text); border-radius:14px; padding:28px 24px; border:1px solid var(--line); box-shadow:var(--shadow); }
h1 { font-size:21px; font-weight:800; letter-spacing:-0.02em; margin-bottom:6px; }
p.lead { color:var(--soft); font-size:15px; line-height:1.5; margin-bottom:20px; }
label { display:block; font-size:14px; font-weight:700; margin:14px 0 6px; }
input { width:100%; font:inherit; font-size:16px; padding:12px 14px; border:1px solid var(--line); border-radius:8px; color:var(--text); background:var(--field); }
input:focus, select:focus { outline:2px solid var(--volt); outline-offset:1px; border-color:transparent; }
input.code { font-size:28px; letter-spacing:10px; text-align:center; font-variant-numeric:tabular-nums; }
button { font-family:inherit; }
button.primary { width:100%; margin-top:20px; background:var(--volt); color:var(--on-volt); border:0; border-radius:8px; padding:13px; font-size:16px; font-weight:800; cursor:pointer; min-height:48px; }
button.primary:hover { filter:brightness(1.06); }
button.primary.quiet { background:transparent; color:var(--text); border:1px solid var(--line); margin-top:10px; }
button.primary:disabled { opacity:.6; cursor:default; }
.linkish { background:none; border:0; color:var(--soft); text-decoration:underline; font-size:14px; cursor:pointer; padding:6px 0; min-height:36px; }
.row { display:flex; justify-content:space-between; align-items:center; margin-top:16px; gap:12px; flex-wrap:wrap; }
.msg { margin-top:16px; font-size:14px; line-height:1.4; border-radius:8px; padding:10px 12px; display:none; }
.msg.show { display:block; }
.msg.bad { background:var(--bad-bg); color:var(--bad); }
.msg.good { background:var(--good-bg); color:var(--good); }
.hint { color:var(--soft); font-size:13px; margin-top:6px; line-height:1.4; }
.foot { text-align:center; color:var(--soft); font-size:13px; margin-top:18px; }

/* Auto / Light / Dark switch */
.theme-switch { display:inline-flex; border:1px solid var(--line); border-radius:999px; padding:3px; gap:2px; }
.theme-switch button { background:none; border:0; color:var(--soft); font-size:13px; font-weight:700; padding:6px 12px; border-radius:999px; cursor:pointer; min-height:34px; }
.theme-switch button[aria-pressed="true"] { background:var(--volt); color:var(--on-volt); }
.switch-row { display:flex; justify-content:center; margin-top:18px; }

[hidden] { display:none !important; }