:root {
  --bb-primary: #652886;
  --bb-secondary: #a400fc;
  --bb-accent: #ffc600;
  --bb-accent-soft: #ffe16a;

  --bg: #f8f5fa;
  --bg-soft: #f1eaf5;
  --panel: rgba(255, 255, 255, 0.92);
  --panel-strong: #ffffff;
  --border: rgba(101, 40, 134, 0.16);
  --border-strong: rgba(255, 198, 0, 0.72);
  --text: #28182f;
  --muted: #74697a;

  --purple: var(--bb-secondary);
  --purple-deep: var(--bb-primary);
  --gold: var(--bb-accent);
  --gold-soft: var(--bb-accent-soft);
}

body {
  color: var(--text);
  font-family: "Heebo", "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 18% 8%, rgba(164, 0, 252, 0.12), transparent 34rem),
    radial-gradient(circle at 86% 15%, rgba(255, 198, 0, 0.16), transparent 28rem),
    linear-gradient(135deg, #fbf9fc 0%, #f5eff8 48%, #fbf8fc 100%);
}

h1,
h2,
h3,
.status-panel strong {
  font-family: "Jost", "Heebo", sans-serif;
  letter-spacing: -0.025em;
}

h1 {
  font-weight: 700;
}

h2,
h3,
.status-panel strong {
  font-weight: 600;
}

button,
input,
select,
textarea {
  font-family: "Heebo", "Segoe UI", sans-serif;
}

.hero-copy {
  background:
    linear-gradient(135deg, rgba(101, 40, 134, 0.13), rgba(164, 0, 252, 0.08) 58%, rgba(255, 198, 0, 0.11)),
    var(--panel);
}

.hero-copy::after {
  border-color: rgba(255, 198, 0, 0.34);
}

.eyebrow,
.tile small,
.competition-note a,
.offer-code,
.compare-badge,
.offer-price strong,
.special-offer strong,
.compare-limit,
.comparison-table th {
  color: var(--bb-primary);
}

.eyebrow::before {
  background: var(--bb-accent);
}

.status-panel {
  border-color: rgba(101, 40, 134, 0.18);
  background:
    linear-gradient(160deg, rgba(101, 40, 134, 0.12), transparent 38%),
    linear-gradient(145deg, rgba(164, 0, 252, 0.06), rgba(255, 198, 0, 0.08)),
    var(--panel);
}

.selector,
.comparison {
  background: var(--panel);
}

.tile {
  color: var(--text);
  border-color: var(--border);
  background:
    linear-gradient(145deg, rgba(101, 40, 134, 0.04), rgba(164, 0, 252, 0.02)),
    rgba(255, 255, 255, 0.76);
}

.tile:hover,
.tile:focus-visible {
  border-color: rgba(164, 0, 252, 0.52);
  box-shadow: 0 10px 26px rgba(101, 40, 134, 0.1);
}

.tile.active {
  border-color: var(--bb-secondary);
  background:
    linear-gradient(145deg, rgba(101, 40, 134, 0.13), rgba(164, 0, 252, 0.12) 62%, rgba(255, 198, 0, 0.14)),
    #ffffff;
  box-shadow: 0 16px 32px rgba(101, 40, 134, 0.13);
}

.summary {
  border-color: rgba(101, 40, 134, 0.2);
  background: linear-gradient(135deg, rgba(101, 40, 134, 0.11), rgba(164, 0, 252, 0.08), rgba(255, 198, 0, 0.12));
}

.reset-button,
.choose-button,
.compare-action,
.competition-button {
  color: #24172a;
  background: linear-gradient(135deg, var(--bb-accent), #ffd94f);
}

.clear-compare-button {
  color: var(--text);
  border: 1px solid rgba(101, 40, 134, 0.18);
  background: rgba(101, 40, 134, 0.07);
}

.competition-note a {
  text-decoration-color: rgba(164, 0, 252, 0.42);
}

.competition-note a:hover,
.competition-note a:focus-visible {
  color: var(--bb-secondary);
}

.offer-card {
  border-color: var(--border);
  background:
    linear-gradient(180deg, rgba(164, 0, 252, 0.035), rgba(101, 40, 134, 0.025)),
    var(--panel-strong);
  box-shadow: 0 18px 48px rgba(63, 29, 79, 0.09);
}

.offer-card.is-compared {
  border-color: rgba(164, 0, 252, 0.62);
  box-shadow:
    0 18px 48px rgba(63, 29, 79, 0.1),
    0 0 0 1px rgba(164, 0, 252, 0.12);
}

.offer-code,
.compare-badge {
  border-color: rgba(101, 40, 134, 0.28);
  background: rgba(101, 40, 134, 0.07);
}

.offer-price {
  border-color: rgba(101, 40, 134, 0.22);
  background: linear-gradient(135deg, rgba(101, 40, 134, 0.1), rgba(164, 0, 252, 0.07), rgba(255, 198, 0, 0.11));
}

.offer-price.has-special-price {
  border-color: rgba(255, 198, 0, 0.72);
  background:
    linear-gradient(135deg, rgba(255, 198, 0, 0.18), rgba(164, 0, 252, 0.08)),
    rgba(255, 198, 0, 0.05);
}

.highlight-box {
  border-color: rgba(101, 40, 134, 0.1);
  background: rgba(101, 40, 134, 0.045);
}

.special-value,
.special-price,
.promo-value strong {
  color: var(--bb-primary);
}

.special-offer {
  border-color: rgba(255, 198, 0, 0.46);
  background:
    linear-gradient(135deg, rgba(255, 198, 0, 0.16), rgba(164, 0, 252, 0.07)),
    rgba(255, 198, 0, 0.05);
}

.details-button,
.modal-close {
  color: var(--text);
  border-color: rgba(101, 40, 134, 0.16);
  background: rgba(101, 40, 134, 0.055);
}

.details-button:hover,
.details-button:focus-visible,
.compare-toggle:hover,
.compare-toggle:focus-visible {
  border-color: rgba(164, 0, 252, 0.6);
}

.compare-toggle {
  color: var(--bb-primary);
  border-color: rgba(101, 40, 134, 0.28);
  background: rgba(101, 40, 134, 0.06);
}

.compare-toggle.active {
  color: #24172a;
  background: linear-gradient(135deg, var(--bb-accent), #ffd94f);
}

.compare-bar {
  border-color: rgba(101, 40, 134, 0.24);
  background:
    linear-gradient(135deg, rgba(101, 40, 134, 0.1), rgba(164, 0, 252, 0.07), rgba(255, 198, 0, 0.08)),
    var(--panel);
}

.competition-section {
  border-color: rgba(164, 0, 252, 0.24);
  background:
    radial-gradient(circle at 18% 8%, rgba(164, 0, 252, 0.12), transparent 26rem),
    linear-gradient(135deg, rgba(101, 40, 134, 0.12), rgba(255, 198, 0, 0.08)),
    var(--panel);
  box-shadow:
    0 18px 54px rgba(63, 29, 79, 0.1),
    0 0 34px rgba(164, 0, 252, 0.05);
}

.comparison-summary {
  border-color: rgba(164, 0, 252, 0.24);
  background: rgba(164, 0, 252, 0.06);
}

.comparison-table-wrap {
  border-color: rgba(101, 40, 134, 0.12);
}

.comparison-table {
  background: rgba(101, 40, 134, 0.025);
}

.comparison-table th {
  background: rgba(101, 40, 134, 0.07);
}

.comparison-table .different {
  background: rgba(255, 198, 0, 0.13);
  box-shadow: inset 0 0 0 1px rgba(255, 198, 0, 0.1);
}

.offer-modal,
.competition-modal {
  background: rgba(29, 15, 36, 0.58);
  backdrop-filter: blur(5px);
}

.offer-modal-card,
.competition-modal-card {
  border-color: rgba(164, 0, 252, 0.24);
  background:
    linear-gradient(180deg, rgba(164, 0, 252, 0.04), rgba(101, 40, 134, 0.025)),
    #ffffff;
}

.competition-choice,
.competition-tab {
  color: var(--text);
  border-color: rgba(101, 40, 134, 0.2);
  background: rgba(101, 40, 134, 0.055);
}

.competition-choice:hover,
.competition-choice:focus-visible,
.competition-tab:hover,
.competition-tab:focus-visible {
  border-color: rgba(164, 0, 252, 0.62);
}

.competition-tab.active {
  color: #ffffff;
  background: linear-gradient(135deg, var(--bb-primary), var(--bb-secondary));
}

.empty {
  border-color: rgba(101, 40, 134, 0.28);
  background: rgba(101, 40, 134, 0.035);
}

/* Explicit dark-mode variant. Add/remove the class on <body> to switch themes. */
body.dark-mode {
  --bg: #0b0710;
  --bg-soft: #140b1b;
  --panel: rgba(27, 15, 35, 0.88);
  --panel-strong: rgba(34, 18, 44, 0.96);
  --border: rgba(255, 255, 255, 0.11);
  --border-strong: rgba(255, 198, 0, 0.7);
  --text: #fffaf0;
  --muted: #c7bacd;

  color: var(--text);
  background:
    radial-gradient(circle at 16% 7%, rgba(101, 40, 134, 0.48), transparent 35rem),
    radial-gradient(circle at 82% 13%, rgba(164, 0, 252, 0.22), transparent 30rem),
    radial-gradient(circle at 72% 78%, rgba(255, 198, 0, 0.08), transparent 30rem),
    linear-gradient(135deg, #09060d 0%, #120817 48%, #08050b 100%);
}

body.dark-mode .hero-copy {
  background:
    linear-gradient(135deg, rgba(101, 40, 134, 0.34), rgba(164, 0, 252, 0.12) 60%, rgba(255, 198, 0, 0.08)),
    rgba(13, 8, 18, 0.86);
}

body.dark-mode .status-panel {
  border-color: rgba(255, 198, 0, 0.17);
  background:
    linear-gradient(160deg, rgba(101, 40, 134, 0.32), transparent 39%),
    linear-gradient(145deg, rgba(164, 0, 252, 0.08), rgba(255, 198, 0, 0.05)),
    var(--panel);
}

body.dark-mode .selector,
body.dark-mode .comparison,
body.dark-mode .compare-bar,
body.dark-mode .competition-section {
  background-color: var(--panel);
}

body.dark-mode .tile {
  color: var(--text);
  border-color: var(--border);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.055), rgba(164, 0, 252, 0.025)),
    rgba(255, 255, 255, 0.025);
}

body.dark-mode .tile:hover,
body.dark-mode .tile:focus-visible {
  border-color: rgba(164, 0, 252, 0.58);
}

body.dark-mode .tile.active {
  border-color: var(--bb-accent);
  background:
    linear-gradient(145deg, rgba(101, 40, 134, 0.42), rgba(164, 0, 252, 0.18) 62%, rgba(255, 198, 0, 0.1)),
    rgba(255, 255, 255, 0.045);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.22);
}

body.dark-mode .summary {
  border-color: rgba(255, 198, 0, 0.18);
  background: linear-gradient(135deg, rgba(101, 40, 134, 0.3), rgba(164, 0, 252, 0.1), rgba(255, 198, 0, 0.07));
}

body.dark-mode .eyebrow,
body.dark-mode .tile small,
body.dark-mode .competition-note a,
body.dark-mode .offer-code,
body.dark-mode .compare-badge,
body.dark-mode .offer-price strong,
body.dark-mode .special-offer strong,
body.dark-mode .compare-limit,
body.dark-mode .comparison-table th {
  color: var(--bb-accent);
}

body.dark-mode .offer-card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(164, 0, 252, 0.02)),
    var(--panel-strong);
  box-shadow: 0 20px 56px rgba(0, 0, 0, 0.26);
}

body.dark-mode .offer-code,
body.dark-mode .compare-badge,
body.dark-mode .highlight-box,
body.dark-mode .details-button,
body.dark-mode .modal-close,
body.dark-mode .compare-toggle,
body.dark-mode .competition-choice,
body.dark-mode .competition-tab {
  color: var(--text);
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.045);
}

body.dark-mode .offer-price {
  border-color: rgba(164, 0, 252, 0.28);
  background: linear-gradient(135deg, rgba(101, 40, 134, 0.28), rgba(164, 0, 252, 0.09), rgba(255, 198, 0, 0.06));
}

body.dark-mode .special-value,
body.dark-mode .special-price,
body.dark-mode .promo-value strong {
  color: var(--bb-accent);
}

body.dark-mode .special-offer {
  border-color: rgba(255, 198, 0, 0.32);
  background:
    linear-gradient(135deg, rgba(255, 198, 0, 0.13), rgba(164, 0, 252, 0.07)),
    rgba(255, 198, 0, 0.035);
}

body.dark-mode .compare-bar {
  border-color: rgba(164, 0, 252, 0.3);
  background:
    linear-gradient(135deg, rgba(101, 40, 134, 0.28), rgba(164, 0, 252, 0.08), rgba(255, 198, 0, 0.05)),
    rgba(20, 10, 27, 0.94);
}

body.dark-mode .competition-section {
  border-color: rgba(164, 0, 252, 0.28);
  background:
    radial-gradient(circle at 18% 8%, rgba(164, 0, 252, 0.14), transparent 26rem),
    linear-gradient(135deg, rgba(101, 40, 134, 0.28), rgba(255, 198, 0, 0.05)),
    rgba(15, 8, 21, 0.95);
}

body.dark-mode .comparison-summary {
  border-color: rgba(164, 0, 252, 0.26);
  background: rgba(164, 0, 252, 0.075);
}

body.dark-mode .comparison-table {
  background: rgba(255, 255, 255, 0.018);
}

body.dark-mode .comparison-table th {
  background: rgba(101, 40, 134, 0.24);
}

body.dark-mode .offer-modal-card,
body.dark-mode .competition-modal-card {
  border-color: rgba(164, 0, 252, 0.3);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(164, 0, 252, 0.02)),
    #170d1e;
}

body.dark-mode .competition-tab.active {
  color: #ffffff;
  border-color: transparent;
  background: linear-gradient(135deg, var(--bb-primary), var(--bb-secondary));
}

body.dark-mode .empty {
  border-color: rgba(164, 0, 252, 0.3);
  background: rgba(164, 0, 252, 0.04);
}