:root {
  color-scheme: dark;
  --bg: #071017;
  --card: #101e28;
  --border: #24404e;
  --text: #f4f8fa;
  --muted: #9bb0bb;
  --accent: #00cfa8;
  --accent-dark: #008b75;
  --danger: #ff6872;
}
* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
body {
  min-height: 100dvh;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 50% 18%, rgba(0, 207, 168, .13), transparent 34rem),
    linear-gradient(145deg, #071017, #08151d 60%, #061016);
  color: var(--text);
}
button, input { font: inherit; }
.gate-shell {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: max(20px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
}
.gate-card {
  width: min(100%, 410px);
  padding: 34px 30px 30px;
  background: color-mix(in srgb, var(--card) 94%, transparent);
  border: 1px solid var(--border);
  border-radius: 22px;
  box-shadow: 0 24px 90px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.035);
}
.gate-lock {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: rgba(0,207,168,.1);
  border: 1px solid rgba(0,207,168,.4);
  font-size: 29px;
}
h1 { margin: 0; text-align: center; font-size: clamp(1.55rem, 6vw, 2rem); }
p { margin: 10px 0 26px; text-align: center; color: var(--muted); }
label { display: block; margin-bottom: 8px; color: #c9d6dc; font-size: .92rem; }
.password-row { position: relative; }
input {
  width: 100%;
  min-height: 52px;
  padding: 12px 52px 12px 14px;
  border-radius: 13px;
  border: 1px solid #2b4654;
  background: #08131a;
  color: var(--text);
  outline: none;
}
input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0,207,168,.14); }
.toggle {
  position: absolute;
  right: 6px;
  top: 6px;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.submit {
  width: 100%;
  min-height: 52px;
  margin-top: 16px;
  border: 0;
  border-radius: 13px;
  background: linear-gradient(135deg, var(--accent), #00ac91);
  color: #001b16;
  font-weight: 800;
  cursor: pointer;
}
.submit:hover { filter: brightness(1.07); }
.submit:disabled { opacity: .6; cursor: wait; }
.error { min-height: 22px; margin-top: 14px; color: var(--danger); text-align: center; font-size: .92rem; }
@media (max-width: 420px) {
  .gate-card { padding: 28px 20px 24px; border-radius: 18px; }
}