/* ============================================================================
   ClarAuto — shared design layer v2 (loaded AFTER each page's inline <style>,
   so these refinements win at equal specificity). Elevates the existing
   iOS-ish system into a quieter, more premium "German-dashboard" feel:
   considered warm-neutral grays, layered depth, a confident brand red,
   tabular numerals for money/specs. Single, deliberate light theme.
   v2 adds a motion system: purposeful micro-interactions, staggered
   entrances, loading skeletons and a generation progress bar — all
   GPU-friendly (transform/opacity only) and disabled under Reduce Motion.
   ========================================================================= */
:root {
  --bg:          #f3f2f4;   /* ground — a hair of warmth vs pure iOS #f2f2f7 */
  --surface:     #ffffff;
  --surface-2:   #fbfafc;   /* insets, inputs */
  --ink:         #1a1a1d;   /* near-black, faintly warm */
  --ink-2:       #46454b;   /* secondary text */
  --muted:       #74727b;   /* chosen warm-gray, not inherited #8e8e93 */
  --faint:       #a4a2ab;   /* hints */
  --line:        #e9e7ed;   /* hairline */
  --line-2:      #d8d6de;

  --accent:      #c0392b;   /* ClarAuto brand red — kept */
  --accent-ink:  #9a2a1e;   /* pressed / hover-dark */
  --accent-tint: #fdf1ef;   /* wash */
  --accent-ring: rgba(192, 57, 43, .20);

  --good: #1f9d57;  --good-tint: #e9f7ef;
  --warn: #b07d08;  --warn-tint: #fbf3df;
  --bad:  #c0392b;  --bad-tint:  #fdecea;

  --radius:    16px;
  --radius-sm: 11px;
  --radius-xs: 9px;

  --shadow-sm: 0 1px 2px rgba(22, 18, 28, .06), 0 1px 3px rgba(22, 18, 28, .04);
  --shadow:    0 2px 4px rgba(22, 18, 28, .05), 0 10px 26px rgba(22, 18, 28, .07);
  --shadow-lg: 0 5px 10px rgba(22, 18, 28, .06), 0 20px 50px rgba(22, 18, 28, .12);

  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* motion tokens — one timing language everywhere */
  --dur-1: 140ms;
  --dur-2: 250ms;
  --dur-3: 420ms;
  --ease:        cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

html { -webkit-text-size-adjust: 100%; scrollbar-color: #cfccd6 transparent; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: rgba(192, 57, 43, .16); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: #cfccd6;
  border-radius: 99px;
  border: 3px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: #b7b4c0; background-clip: padding-box; }

/* numerals that line up: prices, km, kW, years */
.vprice, .vnet, .vspecs, .count, .cmp td, .stat, .stat-num,
.history-price, .price, td, th, input[type="number"] {
  font-variant-numeric: tabular-nums;
}

/* ── Shared entrance motion ───────────────────────────────────────────────
   transform/opacity only; `backwards` fill so hover transforms still work
   the moment the animation ends. */
@keyframes ca-rise {
  from { opacity: 0; transform: translateY(10px); }
}
@keyframes ca-pop {
  from { opacity: 0; transform: scale(.97); }
}

/* ── Top navigation ───────────────────────────────────────────────────── */
.nav {
  background: rgba(255, 255, 255, .82);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid var(--line);
  height: 56px;
  box-shadow: 0 1px 0 rgba(22, 18, 28, .02);
}
.nav-brand {
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.nav-brand span { color: var(--accent); }
.nav-link {
  position: relative;
  color: var(--muted);
  font-weight: 600;
  letter-spacing: -0.01em;
  border-bottom: 2px solid transparent;
  transition: color var(--dur-1) ease;
}
.nav-link::after {
  content: '';
  position: absolute;
  left: 12px; right: 12px; bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
  transform: scaleX(0);
  opacity: 0;
  transition: transform var(--dur-2) var(--ease), opacity var(--dur-2) ease;
}
.nav-link:hover { color: var(--ink); }
.nav-link:hover::after { transform: scaleX(.4); opacity: .35; }
.nav-link.active { color: var(--accent); border-bottom-color: transparent; }
.nav-link.active::after {
  transform: scaleX(1);
  opacity: 1;
  animation: ca-navline var(--dur-3) var(--ease) both;
}
@keyframes ca-navline { from { transform: scaleX(0); } }
.nav-user { color: var(--faint); }
.nav-logout { color: var(--accent); }

/* ── Page header / wordmark ───────────────────────────────────────────── */
.brand { animation: ca-rise var(--dur-3) var(--ease) backwards; }
.brand h1 { letter-spacing: -0.03em; font-weight: 800; font-size: clamp(23px, 21px + 1.2vw, 30px); }
.brand h1 span { color: var(--accent); }
.brand p { color: var(--muted); }
.page-title { letter-spacing: -0.02em; }

/* ── Cards / panels — rise in softly on load ──────────────────────────── */
.card, .panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.card, .panel, .changelog-card {
  animation: ca-rise var(--dur-3) var(--ease) backwards;
}
.changelog-card { animation-delay: 60ms; }

/* ── Staggered list entrances (short + capped, so filters stay snappy) ── */
.history-item, .vcard, .stat-card, .user-row, .bar-row {
  animation: ca-rise 320ms var(--ease) backwards;
}
:is(.history-item, .vcard, .stat-card, .user-row, .bar-row):nth-child(2) { animation-delay: 40ms; }
:is(.history-item, .vcard, .stat-card, .user-row, .bar-row):nth-child(3) { animation-delay: 80ms; }
:is(.history-item, .vcard, .stat-card, .user-row, .bar-row):nth-child(4) { animation-delay: 120ms; }
:is(.history-item, .vcard, .stat-card, .user-row, .bar-row):nth-child(5) { animation-delay: 160ms; }
:is(.history-item, .vcard, .stat-card, .user-row, .bar-row):nth-child(n+6) { animation-delay: 200ms; }

/* ── Uppercase micro-labels ───────────────────────────────────────────── */
.label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  color: var(--muted);
}

/* ── Inputs ───────────────────────────────────────────────────────────── */
input[type="url"], input[type="text"], input[type="number"],
input[type="password"], textarea, select {
  border: 1.5px solid var(--line-2);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--ink);
  transition: border-color var(--dur-1) ease, background var(--dur-1) ease, box-shadow var(--dur-1) ease;
}
input[type="url"]:hover:not(:focus), input[type="text"]:hover:not(:focus),
input[type="number"]:hover:not(:focus), input[type="password"]:hover:not(:focus),
textarea:hover:not(:focus), select:hover:not(:focus) {
  border-color: #c6c3ce;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--accent);
  background: var(--surface);
  box-shadow: 0 0 0 3.5px var(--accent-ring);
  outline: none;
}
::placeholder { color: var(--faint); }

/* ── Primary action buttons (Generate / Search) ───────────────────────── */
.btn-generate, .search-btn, #goBtn {
  background: linear-gradient(180deg, #cf4032 0%, var(--accent) 62%, #b3311f 100%);
  border: none;
  border-radius: var(--radius-sm);
  color: #fff;
  font-weight: 700;
  letter-spacing: -0.01em;
  box-shadow: 0 1px 0 rgba(255,255,255,.18) inset,
              0 2px 6px var(--accent-ring),
              var(--shadow-sm);
  transition: filter var(--dur-1) ease, transform 60ms ease, box-shadow var(--dur-1) ease;
}
.btn-generate:hover:not(:disabled), .search-btn:hover, #goBtn:hover:not(:disabled) {
  filter: brightness(1.05);
  box-shadow: 0 1px 0 rgba(255,255,255,.22) inset,
              0 4px 14px var(--accent-ring), var(--shadow);
}
.btn-generate:active:not(:disabled), .search-btn:active, #goBtn:active:not(:disabled) {
  transform: translateY(1px) scale(.99);
  filter: brightness(.97);
}
.btn-generate:disabled, .search-btn:disabled, #goBtn:disabled {
  background: var(--line-2); color: #fff; box-shadow: none; cursor: default;
}

/* ── Download / secondary buttons keep their hue, gain depth ──────────── */
.dl-btn, .open-btn { box-shadow: var(--shadow-sm); }
.dl-btn:hover, .open-btn:hover { box-shadow: var(--shadow); }

/* ── Press feedback for every secondary control (skill: 0.95–0.98x tap) ── */
.dl-btn:active, .open-btn:active, .filter-tab:active, .history-dl:active,
.status-toggle:active, .btn:active, .mini-btn:active, .icobtn:active,
.country-btn:active, .scheme-btn:active, .btn-add:active, .add-more-btn:active,
.history-url-save:active, .logo-change-btn:active, .regen-btn:active,
.chip:active {
  transform: scale(.97);
}
.filter-tab { transition: all var(--dur-1) ease; }
.filter-tab:hover:not(.active) { border-color: #c6c3ce; color: var(--ink); }
.status-toggle:hover { filter: brightness(.97); }

/* ── Keyboard focus visibility (a11y) ─────────────────────────────────── */
a:focus-visible, button:focus-visible, .chip:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ── Result cards on EU Stock — deeper, calmer ────────────────────────── */
.vcard {
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  transition: box-shadow var(--dur-2) ease, transform var(--dur-2) ease;
}
.vcard:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.vprice { letter-spacing: -0.02em; }

/* ── Status pills / VAT badges — semantic, not accent ─────────────────── */
.vat-badge.ded  { background: var(--good-tint); color: var(--good); }
.vat-badge.unknown { background: #f0eff3; color: var(--muted); }
.vat-badge.margin { background: var(--bad-tint); color: var(--bad); }
.eq-chip.hit  { background: var(--good-tint); color: var(--good); }
.eq-chip.warn { background: var(--warn-tint); color: var(--warn); }

/* ── Loading skeletons (skill: skeletons beat spinners) ───────────────── */
.skeleton {
  position: relative;
  overflow: hidden;
  background: #eceaef;
  border-radius: var(--radius-sm);
}
.skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent);
  animation: ca-shimmer 1.4s ease infinite;
}
@keyframes ca-shimmer { to { transform: translateX(100%); } }
.skel-card { height: 140px; }

/* ── Offer generation progress (index page) ───────────────────────────── */
.status.loading { white-space: normal; }
.gen-row { display: flex; align-items: center; gap: 4px; }
.gen-msg { flex: 1; min-width: 0; transition: opacity 180ms ease; }
.gen-progress {
  margin-top: 10px;
  height: 4px;
  border-radius: 99px;
  background: rgba(192, 57, 43, .14);
  overflow: hidden;
}
.gen-progress-fill {
  position: relative;
  height: 100%;
  width: 0%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--accent), #e2604f);
  transition: width .5s var(--ease);
}
.gen-progress-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  animation: ca-shimmer 1.2s linear infinite;
}

/* ── Status + downloads reveal ────────────────────────────────────────── */
.status.success { animation: ca-pop var(--dur-2) var(--ease-spring) backwards; }
.status.error   { animation: ca-pop var(--dur-2) var(--ease) backwards; }
.downloads h3   { animation: ca-rise var(--dur-2) var(--ease) backwards; }
.dl-grid .dl-btn { animation: ca-rise 360ms var(--ease) backwards; }
.dl-grid .dl-btn:nth-child(1) { animation-delay: 50ms; }
.dl-grid .dl-btn:nth-child(2) { animation-delay: 120ms; }
.dl-grid .dl-btn:nth-child(3) { animation-delay: 190ms; }
.dl-grid .dl-btn:nth-child(4) { animation-delay: 260ms; }

/* ── Comfortable touch targets on tablets/phones (a11y) ───────────────── */
@media (pointer: coarse) {
  .filter-tab, .history-dl, .status-toggle, .mini-btn, .icobtn { min-height: 40px; }
  .nav-link { padding-left: 16px; padding-right: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: .001ms !important;
    animation-delay: 0ms !important;
    transition-duration: .001ms !important;
  }
}