:root { --bg: #05030f; --line: rgba(120, 140, 255, 0.35); --text: #e8ecff; --muted: #8f97c4; --cyan: #00f0ff;
  --red: #ff4d6d; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: radial-gradient(ellipse at 50% 110%, #3a0f5c 0%, #120836 45%, #05030f 80%) fixed;
  color: var(--text); font: 16px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
body { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 16px; }
.box { width: 100%; max-width: 380px; background: rgba(10, 8, 30, 0.88); border: 1px solid var(--line); border-radius: 14px;
  padding: 28px 24px; box-shadow: 0 0 40px rgba(255, 61, 242, 0.15); }
h1 { margin: 0; font-size: 22px; letter-spacing: 0.2em; color: var(--cyan); text-shadow: 0 0 10px rgba(0, 240, 255, 0.7); text-align: center; }
.sub { margin: 6px 0 22px; color: var(--muted); text-align: center; font-size: 14px; }
label { display: block; font-size: 14px; margin: 14px 0 6px; color: var(--muted); }
input { width: 100%; font: inherit; font-size: 16px; /* 16px stops iPhone zooming in */ color: var(--text);
  background: #0b0920; border: 1px solid var(--line); border-radius: 8px; padding: 12px; min-height: 48px; }
input:focus { outline: 2px solid var(--cyan); outline-offset: 1px; }
button { width: 100%; margin-top: 18px; min-height: 52px; font-family: inherit; font-size: 17px; font-weight: 700; color: #031014; background: var(--cyan);
  border: 0; border-radius: 10px; cursor: pointer; box-shadow: 0 0 20px rgba(0, 240, 255, 0.4); }
button:disabled { opacity: 0.6; cursor: wait; }
button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.msg { min-height: 1.4em; margin: 12px 0 0; color: var(--red); font-size: 14px; }