/* Noqte's look for the few pages id.noqte.me shows (tokens from noqte/web/src/styles.css). */
@font-face { font-family: "Vazirmatn"; src: url("/fonts/vazirmatn-33.003.woff2") format("woff2"); font-weight: 400 800; font-display: swap; }
:root {
  --tomato: #E04A2F; --tomato-d: #A9361F; --tomato-ink: #A9361F; --teal: #177A77; --teal-d: #0E5754; --teal-l: #D4EFEA;
  --cream: #FFF5E8; --paper: #FFFDF8; --surface: #FFFFFF; --line: #EBDCC8; --line-2: #DCC8AC;
  --ink: #2B2230; --ink-2: #675A6B; --rim: #2B2230; --edge: #2B2230; --bad-bg: #FFD9CF; --bad-fg: #A9361F;
  --dots: rgba(224, 74, 47, .11); color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --tomato: #EC5B40; --tomato-d: #A63A24; --tomato-ink: #FF9A86; --teal: #2FA39E; --teal-d: #17706C; --teal-l: #1D3D3C;
    --cream: #171219; --paper: #221B28; --surface: #2D2534; --line: #3A3041; --line-2: #0F0B12;
    --ink: #F5ECE0; --ink-2: #B7A9BA; --rim: #5A4C63; --edge: #0C080F; --bad-bg: #4A2420; --bad-fg: #FFAA98;
    --dots: rgba(236, 91, 64, .07); color-scheme: dark;
  }
}
* { box-sizing: border-box; letter-spacing: 0; }
html, body { margin: 0; min-height: 100dvh; }
body {
  font: 400 16px/1.8 "Vazirmatn", system-ui, sans-serif; color: var(--ink); background-color: var(--cream);
  background-image: radial-gradient(circle at 1px 1px, var(--dots) 1.2px, transparent 1.6px); background-size: 26px 26px;
  display: grid; place-items: center; padding: max(24px, env(safe-area-inset-top)) 16px 32px;
}
.card {
  width: 100%; max-width: 440px; background: var(--paper); border: 2px solid var(--rim); border-radius: 24px;
  box-shadow: 0 5px 0 var(--edge); padding: 22px 18px 18px;
}
.label { margin: 0 0 6px; font-weight: 800; font-size: 13px; color: var(--tomato-ink); }
h1 { margin: 0 0 8px; font-size: 24px; line-height: 1.5; font-weight: 800; }
p { margin: 0 0 14px; color: var(--ink-2); }
.hint { font-size: 13.5px; margin: -6px 0 16px; }
.field { display: grid; gap: 6px; margin-bottom: 14px; font-weight: 800; font-size: 14px; color: var(--ink-2); }
input {
  width: 100%; font: 600 17px/1.5 "Vazirmatn", system-ui, sans-serif; color: var(--ink); background: var(--surface);
  border: 2px solid var(--line); border-radius: 16px; padding: 12px 14px; outline: none;
}
input:focus { border-color: var(--teal); box-shadow: 0 0 0 4px var(--teal-l); }
.btn {
  display: flex; width: 100%; justify-content: center; align-items: center; min-height: 54px; margin: 6px 0 8px;
  font: 800 18px/1.2 "Vazirmatn", system-ui, sans-serif; color: #fff; background: var(--tomato); border: 0; border-radius: 18px;
  box-shadow: 0 5px 0 var(--tomato-d); text-decoration: none; cursor: pointer;
}
.btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--tomato-d); }
.btn.quiet { background: var(--paper); color: var(--teal-d); border: 2px solid var(--line); box-shadow: 0 4px 0 var(--line-2); }
.error { color: var(--bad-fg); background: var(--bad-bg); padding: 10px 14px; border-radius: 14px; font-weight: 700; font-size: 14.5px; }
.ok-dot { width: 46px; height: 46px; border-radius: 50%; background: var(--teal); border: 3px solid var(--rim); margin: 2px 0 12px; }
:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }