/* CarWise – deep plum & warm cream theme */
:root {
  --bg: #FBF6EC;            /* warm cream page */
  --surface: #FFFDF8;       /* ivory cards */
  --surface-2: #F4EBDD;     /* deeper cream for sections */
  --text: #2A1A33;          /* near-black plum */
  --muted: #6F6275;
  --border: #E8DCCB;
  --plum: #3B1F4A;          /* header / hero */
  --plum-2: #4E2A62;
  --on-plum: #FBF3E4;       /* cream text on plum */
  --accent: #7A4FA0;        /* violet */
  --accent-soft: #EFE5F6;
  --gold: #C99A3B;          /* stars & highlights */
  --good: #2F7A55;
  --good-soft: #E2F1E8;
  --warn: #9A5B12;
  --warn-soft: #F8EBD6;
  --bad: #A3304A;
  --bad-soft: #F8E1E5;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(59, 31, 74, .06), 0 4px 14px rgba(59, 31, 74, .06);
  --shadow-lift: 0 6px 14px rgba(59, 31, 74, .12), 0 18px 40px rgba(59, 31, 74, .14);
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1C1022;
    --surface: #26162E;
    --surface-2: #2F1C39;
    --text: #F5ECDD;
    --muted: #BCA9C2;
    --border: #3E2949;
    --plum: #140A19;
    --plum-2: #2A1533;
    --on-plum: #F5ECDD;
    --accent: #C7A2E8;
    --accent-soft: #3A2347;
    --gold: #E2B860;
    --good: #7CCFA0;
    --good-soft: #1E3529;
    --warn: #EBB062;
    --warn-soft: #3A2A14;
    --bad: #F08DA2;
    --bad-soft: #3D1A24;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 14px rgba(0, 0, 0, .25);
    --shadow-lift: 0 8px 18px rgba(0, 0, 0, .4), 0 20px 44px rgba(0, 0, 0, .35);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #1C1022; --surface: #26162E; --surface-2: #2F1C39; --text: #F5ECDD; --muted: #BCA9C2; --border: #3E2949;
  --plum: #140A19; --plum-2: #2A1533; --on-plum: #F5ECDD; --accent: #C7A2E8; --accent-soft: #3A2347; --gold: #E2B860;
  --good: #7CCFA0; --good-soft: #1E3529; --warn: #EBB062; --warn-soft: #3A2A14; --bad: #F08DA2; --bad-soft: #3D1A24;
  color-scheme: dark;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font: 15px/1.55 var(--sans);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, .logo, .serif { font-family: var(--serif); font-optical-sizing: auto; letter-spacing: -.01em; }
h1 { font-weight: 600; }
h2, h3 { font-weight: 600; }
a { color: var(--accent); text-underline-offset: 2px; }
img { max-width: 100%; display: block; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Header */
.site-header {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px;
  padding: 14px 24px; background: var(--plum); color: var(--on-plum);
  position: sticky; top: 0; z-index: 10; box-shadow: 0 2px 12px rgba(20, 8, 26, .25);
}
.logo { font-weight: 700; font-size: 1.55rem; text-decoration: none; color: var(--on-plum); }
.logo span { color: var(--gold); font-style: italic; }
.site-header nav { display: flex; gap: 4px; flex-wrap: wrap; }
.site-header nav a {
  text-decoration: none; color: color-mix(in srgb, var(--on-plum) 75%, transparent); padding: 7px 12px; border-radius: 999px; font-weight: 500;
  transition: background .15s, color .15s;
}
.site-header nav a:hover { color: var(--on-plum); background: rgba(255, 255, 255, .08); }
.site-header nav a.active { background: var(--on-plum); color: var(--plum); }
.pill { display: inline-block; min-width: 1.5em; padding: 0 6px; border-radius: 999px; background: var(--gold); color: #2A1A33; font-size: .78em; font-weight: 700; text-align: center; }

.banner { margin: 12px 16px 0; padding: 10px 14px; border-radius: var(--radius); background: var(--warn-soft); color: var(--warn); }

main { padding: 20px 16px; max-width: 1280px; margin: 0 auto; }
.site-footer { padding: 28px 16px 36px; color: var(--muted); font-size: .85rem; text-align: center; border-top: 1px solid var(--border); margin-top: 24px; }

/* Hero */
.hero {
  position: relative; overflow: hidden;
  background: radial-gradient(120% 140% at 100% 0%, #6B3A86 0%, var(--plum-2) 45%, var(--plum) 100%);
  color: var(--on-plum); border-radius: 22px; padding: 30px 32px; margin-bottom: 20px;
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; align-items: center;
}
.hero::after {
  content: ""; position: absolute; right: -60px; bottom: -80px; width: 260px; height: 260px; border-radius: 50%;
  border: 28px solid rgba(201, 154, 59, .18); pointer-events: none;
}
.hero h1 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); line-height: 1.1; margin: 0 0 10px; }
.hero h1 em { color: var(--gold); font-style: italic; }
.hero p { margin: 0; max-width: 44ch; color: color-mix(in srgb, var(--on-plum) 85%, transparent); }
.hero-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; position: relative; z-index: 1; }
.hero-stat { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12); border-radius: 14px; padding: 12px 14px; }
.hero-stat b { display: block; font-family: var(--serif); font-size: 1.7rem; line-height: 1.1; color: var(--on-plum); }
.hero-stat span { font-size: .8rem; color: color-mix(in srgb, var(--on-plum) 75%, transparent); }
@media (max-width: 760px) { .hero { grid-template-columns: 1fr; padding: 22px 20px; } }

/* Browse layout */
.browse { display: grid; grid-template-columns: 290px 1fr; gap: 20px; align-items: start; }
@media (max-width: 860px) { .browse { grid-template-columns: 1fr; } }
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); }
.filters { position: sticky; top: 84px; max-height: calc(100vh - 100px); overflow: auto; }
@media (max-width: 860px) { .filters { position: static; max-height: none; } }
.filters h2, .panel h2 { font-size: 1.15rem; margin: 0 0 10px; color: var(--text); }
.filters fieldset { border: 0; padding: 0; margin: 0 0 16px; }
.filters legend { font-weight: 700; font-size: .72rem; color: var(--accent); margin-bottom: 6px; text-transform: uppercase; letter-spacing: .08em; }
.filters label { display: flex; align-items: center; gap: 8px; font-size: .92rem; padding: 3px 0; }
.filters input[type=checkbox] { accent-color: var(--accent); width: 16px; height: 16px; }
.filters input[type=range], input[type=range] { width: 100%; accent-color: var(--accent); }
input[type=search], select {
  font: inherit; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg); color: var(--text);
}
.filters input[type=search], .filters select { width: 100%; }
.weight-row { display: grid; grid-template-columns: 1fr 44px; align-items: center; gap: 6px; font-size: .88rem; margin-top: 4px; }
.weight-row .small { text-align: right; font-weight: 700; color: var(--accent); }
.small { font-size: .8rem; color: var(--muted); }
button, .btn {
  font: inherit; font-weight: 600; font-size: .9rem; cursor: pointer; border: 1px solid var(--border); background: var(--surface); color: var(--text);
  padding: 8px 14px; border-radius: 999px; text-decoration: none; display: inline-block; transition: background .15s, border-color .15s, color .15s;
}
button:hover, .btn:hover { border-color: var(--accent); color: var(--accent); }
button.primary, .btn.primary { background: var(--plum); border-color: var(--plum); color: var(--on-plum); }
button.primary:hover, .btn.primary:hover { background: var(--plum-2); color: var(--on-plum); }
button:disabled { opacity: .5; cursor: not-allowed; }

.results-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.results-head strong { font-family: var(--serif); font-size: 1.15rem; font-weight: 600; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }

/* Cards */
.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
  display: flex; flex-direction: column; box-shadow: var(--shadow);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); }
@media (prefers-reduced-motion: reduce) { .card, .card:hover { transition: none; transform: none; } }
.card > a { text-decoration: none; position: relative; display: block; }
.card .thumb { aspect-ratio: 16/10; background: linear-gradient(135deg, var(--accent-soft), var(--surface-2)); display: flex; align-items: center; justify-content: center; color: var(--muted); }
.card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.card .body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.card h3 { margin: 0; font-size: 1.22rem; line-height: 1.2; }
.card h3 a { color: var(--text); text-decoration: none; }
.card h3 a:hover { color: var(--accent); }
.card .variant { color: var(--muted); font-size: .88rem; margin-top: -4px; }
.card .price { font-family: var(--serif); font-weight: 700; font-size: 1.3rem; color: var(--plum-2); }
.card .actions { margin-top: auto; padding-top: 6px; display: flex; gap: 8px; }
.badges { display: flex; gap: 5px; flex-wrap: wrap; }
.badge { font-size: .7rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); letter-spacing: .01em; }
.badge.used { background: var(--warn-soft); color: var(--warn); }
.badge.awd { background: var(--good-soft); color: var(--good); }
.badge.over { background: var(--bad-soft); color: var(--bad); }
.kv { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 10px; font-size: .86rem; padding: 8px 0; border-top: 1px dashed var(--border); border-bottom: 1px dashed var(--border); }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; text-align: right; font-weight: 600; }
.stars { color: var(--gold); letter-spacing: 1px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .card .price { color: var(--accent); } }
:root[data-theme="dark"] .card .price { color: var(--accent); }

/* Solidness ring */
.ring { position: absolute; top: 10px; right: 10px; width: 64px; height: 64px; border-radius: 50%;
  background: var(--surface); box-shadow: 0 4px 12px rgba(20, 8, 26, .25); display: grid; place-items: center; }
.ring svg { position: absolute; inset: 4px; width: 56px; height: 56px; transform: rotate(-90deg); }
.ring .track { stroke: var(--surface-2); }
.ring .val { stroke-linecap: round; transition: stroke-dasharray .4s ease; }
.ring b { font-family: var(--serif); font-size: 1.15rem; line-height: 1; color: var(--text); position: relative; }
.ring small { position: absolute; bottom: -18px; left: 50%; transform: translateX(-50%); font-size: .62rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; background: var(--plum); color: var(--on-plum); padding: 1px 6px; border-radius: 999px; white-space: nowrap; }
.ring.partial-ring { outline: 2px dashed var(--gold); outline-offset: 2px; }
.ring.na b { font-size: .8rem; color: var(--muted); }
.ring.lg { position: relative; top: auto; right: auto; width: 96px; height: 96px; flex: none; }
.ring.lg svg { inset: 6px; width: 84px; height: 84px; }
.ring.lg b { font-size: 1.7rem; }

.score { display: flex; align-items: center; gap: 8px; }
.score-bar { flex: 1; height: 8px; background: var(--surface-2); border-radius: 4px; overflow: hidden; }
.score-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--good)); }
.score b { min-width: 2.2em; text-align: right; }
.score-head { display: flex; align-items: center; gap: 16px; margin: 14px 0; }

/* Compare */
.table-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
table.compare { border-collapse: collapse; width: 100%; min-width: 560px; }
table.compare th, table.compare td { padding: 10px 14px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
table.compare thead th { position: sticky; top: 0; background: var(--surface); }
table.compare tbody th { color: var(--muted); font-weight: 600; width: 190px; }
table.compare td.best { background: var(--good-soft); color: var(--good); font-weight: 700; }
table.compare .section td, table.compare .section th { background: var(--plum); color: var(--on-plum); font-family: var(--serif); font-weight: 600; font-size: 1rem; letter-spacing: .01em; }
table.compare tbody tr:not(.section):hover td:not(.best), table.compare tbody tr:not(.section):hover th { background: color-mix(in srgb, var(--accent-soft) 50%, transparent); }
.compare-head img { width: 100%; height: 120px; object-fit: cover; border-radius: 10px; margin-bottom: 8px; }
.compare-head a { font-family: var(--serif); font-size: 1.05rem; text-decoration: none; color: var(--text); }

/* Detail */
.back { display: inline-block; margin-bottom: 12px; font-weight: 600; text-decoration: none; }
.detail { display: grid; grid-template-columns: 1.3fr 1fr; gap: 20px; }
@media (max-width: 860px) { .detail { grid-template-columns: 1fr; } }
.detail h1 { font-size: 2rem; line-height: 1.1; }
.gallery-main { aspect-ratio: 16/10; background: linear-gradient(135deg, var(--accent-soft), var(--surface-2)); border-radius: var(--radius); overflow: hidden; display: flex; align-items: center; justify-content: center; color: var(--muted); box-shadow: var(--shadow); }
.gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.gallery-thumbs { display: flex; gap: 8px; margin-top: 8px; overflow-x: auto; }
.gallery-thumbs img { width: 92px; height: 58px; object-fit: cover; border-radius: 8px; cursor: pointer; border: 2px solid transparent; opacity: .8; }
.gallery-thumbs img.active, .gallery-thumbs img:hover { border-color: var(--gold); opacity: 1; }
.credit { font-size: .75rem; color: var(--muted); margin-top: 6px; }
.big-price { font-family: var(--serif); font-size: 2rem; font-weight: 700; color: var(--plum-2); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .big-price { color: var(--accent); } }
:root[data-theme="dark"] .big-price { color: var(--accent); }
.proscons { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 600px) { .proscons { grid-template-columns: 1fr; } }
.proscons ul { padding-left: 0; margin: 4px 0; list-style: none; }
.proscons li { padding: 4px 0 4px 26px; position: relative; }
.proscons .pros li::before { content: "✓"; position: absolute; left: 0; color: var(--good); font-weight: 700; }
.proscons .cons li::before { content: "–"; position: absolute; left: 4px; color: var(--bad); font-weight: 700; }
.sources-list li { margin-bottom: 6px; }

/* Charts */
.chart-controls { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; margin-bottom: 12px; }
.chart-controls label { display: flex; flex-direction: column; gap: 4px; font-size: .8rem; font-weight: 600; color: var(--muted); }
.chart svg { width: 100%; height: auto; display: block; }
.chart text { fill: var(--muted); font-size: 11px; font-family: var(--sans); }
.chart .axis line, .chart .axis path { stroke: var(--border); }
.chart circle { cursor: pointer; }
.chart-tip { position: fixed; pointer-events: none; background: var(--plum); color: var(--on-plum); padding: 6px 10px; border-radius: 8px; font-size: .8rem; z-index: 20; box-shadow: var(--shadow-lift); }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: .85rem; margin-top: 10px; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; vertical-align: middle; }
.page-title { font-size: 1.9rem; margin: 4px 0 6px; }

.na { color: var(--muted); font-weight: 400; }
.approx { color: var(--warn); font-size: .8em; }
.empty { padding: 40px; text-align: center; color: var(--muted); }

.thumb.noimg::after, .gallery-main.noimg::after { content: "Image unavailable"; color: var(--muted); font-size: .9rem; }
.gallery-main.noimg { display: flex; }
.partial { color: var(--warn); }
.filters summary { cursor: pointer; list-style: none; }
.filters summary::-webkit-details-marker { display: none; }
.filters summary h2 { display: inline; }
@media (max-width: 860px) { .filters summary h2::after { content: " ▾"; color: var(--accent); } .filters details[open] summary { margin-bottom: 12px; } }
@media (min-width: 861px) { .filters summary { pointer-events: none; margin-bottom: 12px; } }
@media (max-width: 520px) { .site-header { padding: 12px 16px; } main { padding: 16px; } }

/* ===== Hero photo (both themes) ===== */
.hero { isolation: isolate; }
.hero-photo { position: absolute; inset: 0; z-index: -1; overflow: hidden; border-radius: 22px; opacity: .8; }
.hero-photo img { height: 100%; width: 100%; object-fit: cover; object-position: center 45%; filter: brightness(.82) saturate(.9); }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 22px;
  background: linear-gradient(90deg, #290f31 0%, rgba(41, 15, 49, .95) 32%, rgba(41, 15, 49, .18) 100%); }
.hero { min-height: 365px; }
.hero h1 { font-size: clamp(2.7rem, 5.2vw, 5.3rem); letter-spacing: -.045em; }
.hero h1 em { color: #f1bf6b; }
.hero-stats { align-self: end; justify-self: end; width: 100%; max-width: 390px; }
.hero-stat { backdrop-filter: blur(14px); background: rgba(44, 17, 50, .78); border-color: rgba(239, 195, 126, .28); }
.hero-stat b { color: #f2c36c; }
@media (max-width: 860px) { .hero { grid-template-columns: 1fr; } .hero-stats { justify-self: start; max-width: 100%; } .hero-photo { opacity: .46; }
  .hero::before { background: linear-gradient(90deg, #290f31 0%, rgba(41, 15, 49, .78) 100%); } }
@media (max-width: 560px) { .hero { padding: 28px 22px; min-height: 0; } .hero h1 { font-size: 2.6rem; } .hero-photo { opacity: .25; } }

/* Theme toggle */
.theme-toggle { background: transparent; border: 1px solid rgba(255, 255, 255, .25); color: var(--on-plum); width: 38px; height: 38px; padding: 0;
  border-radius: 999px; display: inline-grid; place-items: center; font-size: 1.05rem; margin-left: 6px; }
.theme-toggle:hover { border-color: var(--gold); color: var(--gold); }
.site-header nav { align-items: center; }

/* ===== Dark plum, cream & antique gold (default theme) ===== */
:root[data-theme="dark"] { --bg: #200c24; --surface: #341638; --surface-2: #46234a; --text: #fff4e5; --muted: #dbc6d4; --border: #68466a;
  --plum: #280e30; --plum-2: #47204e; --on-plum: #fff4e5; --accent: #e5ad52; --accent-soft: #533248; --gold: #e9ba6a;
  --good: #bfe0bb; --good-soft: #2d4939; --warn: #EBB062; --warn-soft: #3A2A14; --bad: #F08DA2; --bad-soft: #3D1A24;
  --shadow: 0 12px 35px rgba(18, 4, 20, .24); color-scheme: dark; }
:root[data-theme="dark"] body { background: radial-gradient(ellipse 75% 35% at 80% 0%, #5b2b5b 0%, transparent 90%), #200c24; }
:root[data-theme="dark"] .site-header { background: #2b102f; border-bottom: 1px solid #6b4568; padding: 19px clamp(20px, 4vw, 62px); }
:root[data-theme="dark"] .logo { font-family: Georgia, serif; font-style: italic; font-size: 2rem; letter-spacing: -.06em; }
:root[data-theme="dark"] .logo span { color: #f2c36c; }
:root[data-theme="dark"] .site-header nav a.active { background: #f5dfb9; color: #301334; border-radius: 9px; }
:root[data-theme="dark"] main { max-width: 1500px; padding: 26px clamp(16px, 3vw, 44px); }
:root[data-theme="dark"] .hero { background: linear-gradient(90deg, #2b1032 0%, rgba(43, 16, 50, .97) 30%, rgba(43, 16, 50, .53) 65%, rgba(43, 16, 50, .22) 100%);
  border: 1px solid #855979; padding: clamp(26px, 4vw, 55px); }
:root[data-theme="dark"] .hero h1 { font-family: Georgia, serif; font-weight: 600; }
@media (min-width: 861px) { :root[data-theme="dark"] .browse { grid-template-columns: 270px minmax(0, 1fr); gap: 24px; } }
:root[data-theme="dark"] .panel, :root[data-theme="dark"] .card, :root[data-theme="dark"] .table-wrap { border-color: #754e70; box-shadow: 0 10px 30px rgba(0, 0, 0, .12); }
:root[data-theme="dark"] .grid { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 20px; }
:root[data-theme="dark"] .card { background: #371b3c; border-radius: 15px; }
:root[data-theme="dark"] .card .thumb { aspect-ratio: 16/9; background: #4c3651; }
:root[data-theme="dark"] .card .body { background: #371b3c; padding: 20px; gap: 10px; }
:root[data-theme="dark"] .card h3 { font-family: Georgia, serif; font-size: 1.35rem; }
:root[data-theme="dark"] .card .price { font-family: var(--sans); font-size: 1.5rem; color: #f2c36c; }
:root[data-theme="dark"] .card .actions button, :root[data-theme="dark"] .card .actions a { border-radius: 11px; flex: 1; text-align: center; }
:root[data-theme="dark"] .results-head strong { font-family: var(--sans); font-size: 1.45rem; letter-spacing: -.035em; }
:root[data-theme="dark"] .filters { background: #321636; }
:root[data-theme="dark"] .filters legend { color: #f2c36c; }
:root[data-theme="dark"] .filters fieldset { border-bottom: 1px solid #5a3a5c; padding-bottom: 13px; }
:root[data-theme="dark"] button.primary, :root[data-theme="dark"] .btn.primary { background: #edbd70; color: #2b102f; border-color: #edbd70; font-weight: 700; }
:root[data-theme="dark"] button.primary:hover, :root[data-theme="dark"] .btn.primary:hover { background: #f7d69c; color: #2b102f; }
:root[data-theme="dark"] .compare-head img { height: 175px; border-radius: 8px; }
:root[data-theme="dark"] .gallery-main { aspect-ratio: 16/9; border-radius: 8px; }
:root[data-theme="dark"] .gallery-thumbs img { width: 120px; height: 78px; border-radius: 7px; }
:root[data-theme="dark"] .big-price { color: #f2c36c; }
:root[data-theme="dark"] table.compare .section td, :root[data-theme="dark"] table.compare .section th { background: #280e30; }
@media (max-width: 520px) { :root[data-theme="dark"] .site-header { padding: 14px 16px; } :root[data-theme="dark"] main { padding: 16px; } }