:root {
  color-scheme: light;
  --color-primary: #174d43;
  --color-accent: #9d3a21;
  --color-background: #f7f5ee;
  --color-surface: #ffffff;
  --color-text: #202c29;
  --color-muted: #505e59;
  --color-border: #b8c4be;
  font-family: system-ui, sans-serif;
  line-height: 1.6;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-primary: #a4dccc;
    --color-accent: #ffba9e;
    --color-background: #14201c;
    --color-surface: #1d2c26;
    --color-text: #eef4ef;
    --color-muted: #c0ccc4;
    --color-border: #5f7769;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --color-primary: #a4dccc;
  --color-accent: #ffba9e;
  --color-background: #14201c;
  --color-surface: #1d2c26;
  --color-text: #eef4ef;
  --color-muted: #c0ccc4;
  --color-border: #5f7769;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--color-background); color: var(--color-text); }
header, main, footer { max-width: 1160px; margin: auto; padding: 24px 16px; }
header, footer, nav { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
header { justify-content: space-between; border-bottom: 1px solid var(--color-border); }
a { color: var(--color-primary); text-underline-offset: 3px; }
button, #app-banner a { font: inherit; border: 1px solid var(--color-primary); border-radius: 6px; padding: 10px 16px; background: var(--color-surface); color: var(--color-primary); cursor: pointer; }
:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 4px; }
.hero { padding: 28px 0 44px; max-width: 760px; }
h1 { font-size: clamp(2rem, 6vw, 3.6rem); line-height: 1.15; letter-spacing: -0.035em; }
#app-banner { display: flex; gap: 12px; flex-wrap: wrap; }
#offers-list { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 20px; padding: 0; list-style: none; }
.offer-card { padding: 18px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 10px; min-width: 0; }
.offer-main { display: block; text-decoration: none; }
.offer-title { font-size: 1.15rem; line-height: 1.4; overflow-wrap: anywhere; }
.offer-image { display: block; width: 100%; height: 160px; object-fit: contain; border-radius: 6px; }
.offer-image-placeholder { background: var(--color-background); }
.offer-price { font-size: 1.6rem; font-weight: 750; margin-bottom: 4px; }
.offer-badge { display: inline-block; margin-left: 12px; padding: 2px 8px; background: var(--color-primary); color: var(--color-surface); border-radius: 4px; }
.offer-disclosure, .offer-checked, .offer-confirm, .offer-mention { font-size: .85rem; color: var(--color-muted); }
.offer-disclosure { margin-top: 0; }
footer { border-top: 1px solid var(--color-border); margin-bottom: 180px; }
.consent-bar { position: fixed; bottom: 0; left: 0; right: 0; max-height: 65vh; overflow: auto; padding: 16px; background: var(--color-surface); border-top: 2px solid var(--color-border); box-shadow: 0 -3px 20px #0002; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px; }
.consent-bar p { flex-basis: 100%; margin: 0; text-align: center; }
[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

.offer-recommendation { margin-top: 16px; padding: 12px; border-radius: 6px; background: var(--color-background); overflow-wrap: anywhere; }
.offer-summary { margin: 0 0 10px; }
.offer-sources { display: flex; flex-wrap: wrap; gap: 8px; }
.offer-source-chip { border: 1px solid var(--color-border); border-radius: 20px; padding: 4px 10px; background: var(--color-surface); font-size: .85rem; }
#submit { max-width: 640px; padding: 28px 0; }
#submit-form { display: grid; gap: 10px; }
#submit-form input:not([type="radio"]), #submit-form select { min-width: 0; width: 100%; padding: 10px; border: 1px solid var(--color-border); border-radius: 6px; background: var(--color-surface); color: var(--color-text); font: inherit; }
#submit-form fieldset { margin: 0; border: 1px solid var(--color-border); }
#submit-form fieldset label { display: inline-block; margin-right: 16px; }
#submit-form button { justify-self: start; }
#submit-form button:disabled { cursor: wait; opacity: .6; }
.submit-honeypot { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.db-offline-banner { padding: 1rem; background: var(--color-surface, #f1f5f9); color: var(--color-text, #1e293b); border-bottom: 2px solid var(--color-primary, #2563eb); text-align: center; }
#submit-form :disabled { opacity: .6; cursor: not-allowed; }