@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;0,9..40,800;1,9..40,400&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* ── Reset ── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* ── Variables ── */
:root {
  /* Dark mode defaults */
  --pm-header:  #060d18;
  --pm-suggest: #040b14;
  --bg:         #06080e;
  --surface:    #0b1220;
  --surface-hi: #0f1929;
  --border:     #182438;
  --border-hi:  #22334e;
  --text:       #dde8f5;
  --text-mid:   #6078a0;
  --text-dim:   #2e4260;
  --blue:       #f50605;
  --blue-light: #ff3b3a;
  --blue-dim:   #d70605;
  --blue-pale:  #1e0000;
  --orange:     #f59e0b;
  --red:        #f87171;
  --green:      #34d399;

  --radius-sm:  4px;
  --radius:     8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
}

html.light, .light {
  --pm-header:  #0f172a;
  --pm-suggest: #091120;
  --bg:         #e8eef9;
  --surface:    #ffffff;
  --surface-hi: #edf2fc;
  --border:     #c4d4ec;
  --border-hi:  #a8bede;
  --text:       #0d1526;
  --text-mid:   #3a527a;
  --text-dim:   #7b93b8;
  --blue:       #f50605;
  --blue-light: #ff3b3a;
  --blue-dim:   #d70605;
  --blue-pale:  #ffe6e6;
  --orange:     #d97706;
  --red:        #dc2626;
  --green:      #059669;
}

html.dark, .dark {
  --pm-header:  #060d18;
  --pm-suggest: #040b14;
  --bg:         #06080e;
  --surface:    #0b1220;
  --surface-hi: #0f1929;
  --border:     #182438;
  --border-hi:  #22334e;
  --text:       #dde8f5;
  --text-mid:   #6078a0;
  --text-dim:   #2e4260;
  --blue:       #f50605;
  --blue-light: #ff3b3a;
  --blue-dim:   #d70605;
  --blue-pale:  #1e0000;
  --orange:     #f59e0b;
  --red:        #f87171;
  --green:      #34d399;
}

/* ── Base ── */
body {
  background: var(--bg);
  font-family: 'DM Sans', 'Helvetica Neue', Arial, sans-serif;
  color: var(--text);
  transition: background 0.2s ease, color 0.2s ease;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 14px;
  line-height: 1.5;
}

/* ── Subtle grid texture ── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 40px 40px;
  opacity: 0.18;
  pointer-events: none;
  z-index: 0;
}

html.light body::before { opacity: 0.10; }

#root { position: relative; z-index: 1; }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 3px; background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-hi); border-radius: 10px; }
::-webkit-scrollbar-track { background: transparent; }

/* ── Focus ── */
input:focus, select:focus {
  outline: none !important;
  border-color: var(--blue) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 14%, transparent) !important;
}
button:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

/* ── Inputs ── */
input, select, textarea { color-scheme: dark; }
.light input, .light select, .light textarea { color-scheme: light; }
input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; filter: invert(0.8); }
.light input[type="date"]::-webkit-calendar-picker-indicator { filter: none; }
select option { background: var(--surface); color: var(--text); }

/* ── Animations ── */
@keyframes spin { to { transform: rotate(360deg); } }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.45; }
}

/* Page-load card stagger */
@keyframes cardSlideUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}
.card-anim {
  animation: cardSlideUp 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Numbered section badges */
@keyframes badgePulse {
  0%   { box-shadow: 0 0 0 0 rgba(245,6,5,0.35); }
  60%  { box-shadow: 0 0 0 6px rgba(245,6,5,0); }
  100% { box-shadow: 0 0 0 0 rgba(245,6,5,0); }
}
.badge-pulse {
  animation: badgePulse 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.6s both;
}

/* Result card section reveals */
@keyframes resultReveal {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.result-reveal {
  animation: resultReveal 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Diesel bar chart rise */
@keyframes barRise {
  from { transform: scaleY(0); transform-origin: bottom; opacity: 0; }
  to   { transform: scaleY(1); transform-origin: bottom; opacity: 1; }
}
.bar-rise {
  animation: barRise 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ── Calculate button ── */
.calc-btn-active {
  transition: all 0.18s ease !important;
}
.calc-btn-active:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}
.calc-btn-active:active {
  transform: translateY(0);
  filter: brightness(0.96);
}

/* ── Rate quote buttons ── */
.rate-btn-good:hover { background: rgba(52,211,153,0.07) !important; border-color: var(--green) !important; color: var(--green) !important; }
.rate-btn-bad:hover  { background: rgba(248,113,113,0.07) !important; border-color: var(--red) !important; color: var(--red) !important; }

/* ── Topline header accent ── */
.app-header-accent {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--blue) 30%, var(--blue) 70%, transparent 100%);
  opacity: 0.35;
}