:root {
  --ink: #101820;
  --yellow: #facc15;
  --green: #0f766e;
  --blue: #2563eb;
  --muted: #64748b;
  --line: #dde5ef;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  background:
    radial-gradient(ellipse 34rem 24rem at var(--cursor-x, 18%) var(--cursor-y, 18%), rgba(250, 204, 21, 0.24), transparent 72%),
    radial-gradient(ellipse 30rem 24rem at 85% 15%, rgba(37, 99, 235, 0.18), transparent 70%),
    linear-gradient(135deg, #fefce8, #eff6ff 48%, #f0fdf4);
  color: var(--ink);
  overflow-x: hidden;
  position: relative;
}

body::before {
  animation: roadMotion 9s linear infinite;
  background:
    linear-gradient(115deg, transparent 0 46%, rgba(16, 24, 32, 0.07) 47%, transparent 48% 100%),
    linear-gradient(90deg, transparent 0 12%, rgba(250, 204, 21, 0.16) 12% 13%, transparent 13% 25%);
  background-size: 220px 100%, 140px 100%;
  content: "";
  inset: 0;
  mask-image: radial-gradient(ellipse 82% 70% at 50% 36%, black 12%, transparent 86%);
  pointer-events: none;
  position: fixed;
  z-index: 0;
}

.app {
  width: min(1000px, calc(100% - 32px));
  margin: 0 auto;
  padding: 42px 0;
  position: relative;
  z-index: 1;
}

.hero {
  padding: 30px 0;
}

.eyebrow {
  color: var(--green);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

h1 {
  font-size: clamp(2.4rem, 7vw, 5.4rem);
  line-height: 0.95;
  margin: 0 0 16px;
}

p { color: var(--muted); }

.planner,
.result,
.history {
  background: rgba(255, 255, 255, 0.76);
  border: 1px solid var(--line);
  border-radius: 8px;
  backdrop-filter: blur(16px);
  box-shadow: 0 16px 36px rgba(16, 24, 32, 0.08);
}

@keyframes roadMotion {
  from { background-position: 0 0, 0 0; }
  to { background-position: 440px 0, 280px 0; }
}

.planner {
  display: grid;
  grid-template-columns: repeat(3, 1fr) auto;
  gap: 12px;
  padding: 16px;
}

label {
  display: grid;
  gap: 8px;
  font-weight: 800;
}

select,
button {
  border: 1px solid var(--line);
  border-radius: 8px;
  font: inherit;
  padding: 13px;
}

button {
  align-self: end;
  background: var(--green);
  border: 0;
  color: white;
  cursor: pointer;
  font-weight: 900;
}

.result {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, 1fr);
  margin: 18px 0;
  padding: 18px;
}

.metric span {
  color: var(--muted);
  display: block;
  font-weight: 800;
}

.metric strong {
  font-size: 1.8rem;
}

.history {
  padding: 18px;
}

.trip {
  border-top: 1px solid var(--line);
  padding: 12px 0;
}

@media (max-width: 820px) {
  .planner,
  .result {
    grid-template-columns: 1fr;
  }
}