/* Standalone styling for the site passcode page — it must render before the
   app's own stylesheet is reachable. */
:root {
  --ink-900:#07090C; --ink-800:#101620; --line:#212C3B;
  --teal:#2DD4BF; --text:#E8EDF4; --muted:#8A99AD; --danger:#FF6B6B;
}
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { height:100%; margin:0; }
body {
  background:
    radial-gradient(1200px 620px at 50% -12%, rgba(45,212,191,.10), transparent 62%),
    var(--ink-900);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.gate-wrap { min-height:100%; display:grid; place-items:center; padding:26px; }
.gate-card {
  width:100%; max-width:340px; display:grid; justify-items:center; gap:0;
  text-align:center;
}
.gate-card img { border-radius:18px; box-shadow:0 18px 44px -16px rgba(45,212,191,.55); }
.gate-card h1 { font-size:26px; font-weight:650; letter-spacing:-.4px; margin:18px 0 4px; }
.gate-card p  { font-size:14px; color:var(--muted); margin:0 0 26px; }
.gate-card input {
  width:100%; font-size:16px; padding:15px 17px;
  background:var(--ink-800); border:1px solid var(--line); border-radius:16px;
  color:var(--text); outline:none;
  transition:border-color .18s, box-shadow .18s;
}
.gate-card input::placeholder { color:#5E6E82; }
.gate-card input:focus { border-color:var(--teal); box-shadow:0 0 0 4px rgba(45,212,191,.13); }
.gate-card button {
  width:100%; margin-top:14px; font-size:16px; font-weight:600;
  padding:15px 18px; border:0; border-radius:16px;
  background:var(--teal); color:#04201C;
}
.gate-card button:active { transform:scale(.985); }
.gate-err { color:var(--danger); font-size:13.5px; margin:14px 0 0 !important; }
.gate-card input.pin {
  text-align:center; font-size:26px; letter-spacing:14px;
  padding-left:31px; font-variant-numeric:tabular-nums;
}
.gate-card button:disabled, .gate-card input:disabled { opacity:.45; }