:root {
  --brand-dark: #111827;
  --brand-red: #d3122c;
  --bg: #f8fafc;
  --text: #1e293b;
  --muted: #64748b;
  --line: #e2e8f0;
}
body {
  font-family: Montserrat, sans-serif;
  background: var(--bg);
  color: var(--text);
}
.app-top {
  background: #fff;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 50;
}
.app-top a { color: var(--text); text-decoration: none; font-weight: 600; font-size: .92rem; }
.app-top a.active, .app-top a:hover { color: var(--brand-red); }
.btn-login-mini, .btn-outline-mini, .btn-main {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; font-weight: 700; padding: .55rem 1.1rem;
}
.btn-login-mini { background: var(--brand-red); color: #fff !important; }
.btn-outline-mini { border: 1px solid var(--line); background: #fff; }
.btn-main {
  background: var(--brand-red); color: #fff; border: 0; width: 100%;
  padding: .85rem 1rem; border-radius: 14px;
}
.btn-main:disabled { opacity: .6; }
.card-soft {
  background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 1.25rem;
}
.muted { color: var(--muted); }
.trip-item, .seat {
  border: 1px solid var(--line); border-radius: 14px; background: #fff;
}
.trip-item { padding: 1rem; cursor: pointer; transition: .2s; }
.trip-item:hover { border-color: var(--brand-red); }
.seat-grid { display: grid; gap: 6px; justify-content: start; }
.seat {
  width: 42px; height: 42px; display:flex; align-items:center; justify-content:center;
  font-size: .75rem; font-weight: 700; cursor: pointer;
}
.seat.occ { background: #e2e8f0; color: #94a3b8; cursor: not-allowed; }
.seat.sel { background: var(--brand-red); color: #fff; border-color: var(--brand-red); }
.seat.gap { visibility: hidden; }
.auth-box { max-width: 460px; margin: 0 auto; }
.steps { display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:1rem; }
.step-pill {
  background:#fff; border:1px solid var(--line); border-radius:999px;
  padding:.35rem .8rem; font-size:.8rem; font-weight:700; color:var(--muted);
}
.step-pill.on { background: rgba(211,18,44,.08); color: var(--brand-red); border-color: transparent; }
.pay-overlay {
  position: fixed; inset: 0; background: rgba(248,250,252,.96); z-index: 1000;
  display:none; align-items:center; justify-content:center; text-align:center; padding: 24px;
}
.pay-overlay.show { display:flex; }
iframe.pay-frame {
  position: fixed; inset: 0; width: 100%; height: 100%; border: 0; z-index: 999; background: #fff;
}