:root {
  --bg: #f5f7fb;
  --card: #ffffff;
  --line: #dfe5ef;
  --text: #182230;
  --muted: #66758a;
  --primary: #0ea5e9;
  --primary-soft: #e6f6fd;
  --success: #16a34a;
  --warning: #f59e0b;
  --danger: #dc2626;
}
body { background: var(--bg); color: var(--text); }
.brand-dot { width: 12px; height: 12px; border-radius: 999px; background: linear-gradient(135deg, #0ea5e9, #22c55e); display: inline-block; }
.page { display: none; }
.page.active { display: block; }
.hero-card-main { background: linear-gradient(135deg, #ffffff 0%, #f0f7ff 100%); }
.text-bg-primary-soft { background: var(--primary-soft); color: var(--primary); border: 1px solid #bce7fb; }
.flash-container { position: fixed; top: 16px; right: 16px; z-index: 3000; display: grid; gap: 10px; max-width: 420px; }
.flash { background: var(--card); border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(11,31,53,.12); border-left: 5px solid var(--primary); border-radius: 14px; padding: 12px 14px; }
.flash.success { border-left-color: var(--success); }
.flash.error { border-left-color: var(--danger); }
.flash.warning { border-left-color: var(--warning); }
#map, #adminMap { width: 100%; height: 460px; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); }
#adminMap { height: 360px; }
.status { font-size: 14px; color: var(--muted); }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-size: 12px; color: var(--muted); }
.chip-good { background: #ecfdf3; color: #166534; border-color: #bbf7d0; }
.chip-warn { background: #fff7ed; color: #9a3412; border-color: #fed7aa; }
.stack-list { display: grid; gap: 12px; }
.result-box { background: #f8fbff; border: 1px solid #d5ebfb; border-radius: 14px; padding: 14px; line-height: 1.65; }
.card h4, .stack-list .card h4 { font-size: 1rem; }
.station-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.price-corner { font-size: 2rem; font-weight: 800; line-height: 1; color: #0f172a; text-align: right; min-width: 90px; }
.sponsor { margin-top: 10px; background: linear-gradient(135deg, #f0f9ff 0%, #ecfeff 100%); border: 1px dashed #7dd3fc; border-radius: 12px; padding: 10px 12px; font-size: 13px; color: #0c4a6e; }
.form-label { font-size: .82rem; color: var(--muted); }
.data-table-wrap { max-height: 520px; overflow: auto; }
.table thead th { position: sticky; top: 0; background: #f8fafc; z-index: 2; }
.table td, .table th { white-space: nowrap; }
.auth-status-card { border-left: 5px solid var(--primary); }
.car-card { border-left: 5px solid #10b981; }
.user-role { display: inline-flex; padding: 4px 8px; border-radius: 999px; background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; font-size: 12px; }
.user-status { display: inline-flex; padding: 4px 8px; border-radius: 999px; background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; font-size: 12px; }
.favorite-note { font-size: 12px; color: var(--muted); background: #f8fafc; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; }
.deposit-bar { height: 10px; background: #e5edf6; border-radius: 999px; overflow: hidden; }
.deposit-bar > span { display: block; height: 100%; background: linear-gradient(90deg, #0ea5e9, #22c55e); border-radius: 999px; }
.nav-link.btn { border: 0; color: #475569; }
.nav-link.btn.active, .nav-link.btn:hover { color: #0f172a; }
.subview { display: none; }
.subview.active { display: block; }
.empty-state { padding: 18px; border: 1px dashed var(--line); border-radius: 14px; color: var(--muted); background: #fafcff; }
@media (max-width: 991.98px) {
  #map { height: 360px; }
  .price-corner { font-size: 1.6rem; }
}