:root {
  --bg: #0b1220;
  --bg2: #111c33;
  --card: rgb(17 24 39 / 0.62);
  --border: rgb(148 163 184 / 0.18);
  --fg: #e5edf8;
  --muted: #94a3b8;
  --accent: #38bdf8;
  --accent2: #a78bfa;
  --bad: #f87171;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px;
  color: var(--fg);
  background:
    radial-gradient(1200px 600px at 80% 0%, rgb(56 189 248 / 0.16), transparent 60%),
    radial-gradient(900px 600px at 0% 100%, rgb(167 139 250 / 0.16), transparent 60%),
    linear-gradient(160deg, var(--bg2), var(--bg));
  overflow: hidden;
}

/* Backdrop */
.backdrop { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; }
.streets path { fill: none; stroke: rgb(148 163 184 / 0.10); stroke-width: 10; stroke-linecap: round; }
.route {
  fill: none; stroke: url(#routeGrad); stroke-width: 4; stroke-linecap: round;
  stroke-dasharray: 1000; stroke-dashoffset: 1000;
  animation: draw 9s linear infinite;
  filter: drop-shadow(0 0 6px rgb(56 189 248 / 0.6));
}
.pin { stroke: #fff; stroke-width: 3; }
.pin.start { fill: #22c55e; }
.pin.end { fill: #f43f5e; }
.car .dot { fill: #fff; stroke: var(--accent); stroke-width: 3; }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* Card */
.card {
  position: relative; z-index: 1; width: 100%; max-width: 380px;
  padding: 28px 24px 24px; border-radius: 20px;
  background: var(--card); border: 1px solid var(--border);
  backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 30px 80px rgb(0 0 0 / 0.45), inset 0 1px 0 rgb(255 255 255 / 0.06);
  animation: rise .6s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes rise { from { opacity: 0; transform: translateY(16px) scale(.98); } }

.brand { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; }
.logo {
  width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; flex: none;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  box-shadow: 0 8px 24px rgb(56 189 248 / 0.35);
}
.logo svg { width: 26px; height: 26px; fill: #0b1220; }
h1 { margin: 0; font-size: 1.35rem; letter-spacing: -0.01em; }
.tagline { margin: 2px 0 0; color: var(--muted); font-size: 0.9rem; }

form { display: grid; gap: 14px; }
.field { display: grid; gap: 6px; }
.field > span { font-size: 0.8rem; color: var(--muted); font-weight: 500; }
input[type=text], input:not([type]), input[type=password] {
  width: 100%; font: inherit; font-size: 1rem; color: var(--fg);
  padding: 12px 14px; border-radius: 12px;
  background: rgb(15 23 42 / 0.7); border: 1px solid var(--border);
  outline: none; transition: border-color .15s, box-shadow .15s;
}
input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px rgb(56 189 248 / 0.18); }
.pw { position: relative; }
.pw input { padding-right: 68px; }
.toggle {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  font: inherit; font-size: 0.8rem; color: var(--muted); background: none; border: none;
  padding: 6px 10px; border-radius: 8px; cursor: pointer;
}
.toggle:hover, .toggle:focus-visible { color: var(--fg); background: rgb(148 163 184 / 0.12); outline: none; }

.remember { display: flex; align-items: center; gap: 10px; font-size: 0.85rem; color: var(--muted); cursor: pointer; }
.remember input { width: 18px; height: 18px; accent-color: var(--accent); margin: 0; }

.error {
  margin: 0; padding: 10px 12px; border-radius: 10px; font-size: 0.85rem;
  color: #fecaca; background: rgb(248 113 113 / 0.12); border: 1px solid rgb(248 113 113 / 0.3);
}
.shake { animation: shake .35s; }
@keyframes shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }

.submit {
  position: relative; margin-top: 4px; width: 100%; font: inherit; font-weight: 600; font-size: 1rem;
  color: #0b1220; padding: 13px; border: none; border-radius: 12px; cursor: pointer;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  box-shadow: 0 10px 30px rgb(56 189 248 / 0.3);
  transition: transform .12s, box-shadow .12s, filter .12s;
}
.submit:hover { filter: brightness(1.08); box-shadow: 0 12px 36px rgb(56 189 248 / 0.4); }
.submit:active { transform: translateY(1px); }
.submit:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.submit .spinner {
  display: none; position: absolute; right: 16px; top: 50%; width: 18px; height: 18px; margin-top: -9px;
  border: 2px solid rgb(11 18 32 / 0.3); border-top-color: #0b1220; border-radius: 50%;
  animation: spin .7s linear infinite;
}
.submit.busy { cursor: progress; }
.submit.busy .spinner { display: block; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .route { animation: none; stroke-dashoffset: 0; }
  .car { display: none; }
  .card { animation: none; }
}