/* ── Design tokens — oklch perceptually uniform palette ─────────────────── */
:root {
  color-scheme: light dark;

  /* Primitive palette — Amber/Orange brand (DeviceSunsetCheck) */
  --brand-50:  oklch(97% 0.022 55);
  --brand-100: oklch(93% 0.055 55);
  --brand-200: oklch(87% 0.090 55);
  --brand-300: oklch(79% 0.125 55);
  --brand-400: oklch(71% 0.160 50);
  --brand-500: oklch(63% 0.192 45);   /* accent */
  --brand-600: oklch(54% 0.180 40);   /* accent-dark */
  --brand-700: oklch(44% 0.155 38);
  --brand-800: oklch(34% 0.120 36);
  --brand-900: oklch(26% 0.085 34);
  --brand-950: oklch(18% 0.055 32);

  /* Semantic light-mode tokens */
  --color-bg:       oklch(97% 0.005 220);
  --color-surface:  oklch(100% 0 0);
  --color-text:     oklch(22% 0.015 220);
  --color-muted:    oklch(52% 0.010 220);
  --color-border:   oklch(88% 0.008 220);
  --color-focus:    oklch(22% 0.015 220);
  --color-primary:  var(--brand-500);
  --color-primary-dark: var(--brand-600);
  --color-soft:     var(--brand-50);
  --color-band-bg:  var(--brand-100);

  /* Semantic states */
  --color-success: oklch(46% 0.140 162);
  --color-warn:    oklch(52% 0.145 52);
  --color-danger:  oklch(47% 0.165 22);
  --color-critical: oklch(42% 0.185 22);

  /* Typography */
  --font-body: "Instrument Sans", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --font-display: "Sora", "Avenir Next Condensed", "Segoe UI", system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  /* Spacing / radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;

  font-family: var(--font-body);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg:      oklch(16% 0.010 220);
    --color-surface: oklch(22% 0.012 220);
    --color-text:    oklch(92% 0.008 220);
    --color-muted:   oklch(65% 0.010 220);
    --color-border:  oklch(32% 0.012 220);
    --color-focus:   oklch(90% 0.008 220);
    --color-soft:    oklch(26% 0.018 45);
    --color-band-bg: oklch(24% 0.018 45);
  }
}

/* ── Reset ───────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
body {
  margin: 0;
  background:
    radial-gradient(circle at 12% -8%, oklch(93% 0.055 55 / 0.45) 0%, transparent 46%),
    radial-gradient(circle at 102% 8%, oklch(93% 0.065 5 / 0.30) 0%, transparent 40%),
    var(--color-bg);
  color: var(--color-text);
  line-height: 1.55;
}
a { color: var(--color-primary-dark); }

/* ── Skip link ───────────────────────────────────────────────────────────── */
.skip-link {
  position: absolute;
  left: 12px;
  top: -64px;
  z-index: 4;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  background: oklch(14% 0.020 230);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}
.skip-link:focus-visible { top: 10px; }

/* ── Focus rings (WCAG 2.2 AA minimum 2px) ──────────────────────────────── */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ── Navigation / topbar ────────────────────────────────────────────────── */
.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 64px;
  padding: 0 32px;
  background: oklch(100% 0 0 / 0.88);
  border-bottom: 1px solid var(--color-border);
  backdrop-filter: blur(12px);
}
@media (prefers-color-scheme: dark) {
  .topbar { background: oklch(22% 0.012 220 / 0.90); }
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--color-text);
  font-family: var(--font-display);
  letter-spacing: -0.015em;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}
.brand-mark {
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: linear-gradient(150deg, oklch(87% 0.140 55) 0%, oklch(63% 0.192 45) 52%, oklch(26% 0.085 34) 100%);
  box-shadow: inset 0 0 0 2px oklch(100% 0 0 / 0.35), 0 4px 10px -3px oklch(63% 0.192 45 / 0.60);
  flex-shrink: 0;
}
nav {
  display: flex;
  flex: 1;
  gap: 18px;
  overflow: hidden;
}
nav a, .lang {
  color: var(--color-muted);
  font-size: 0.95rem;
  font-weight: 650;
  text-decoration: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 8px;
}
nav a[aria-current="page"] {
  color: var(--color-primary);
  font-weight: 700;
}
a:hover, a:focus-visible { text-decoration: underline; text-decoration-thickness: 2px; }

/* ── Layout ─────────────────────────────────────────────────────────────── */
main {
  width: min(1120px, calc(100% - 32px));
  margin: 0 auto;
}

/* ── Hero ────────────────────────────────────────────────────────────────── */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.6fr);
  gap: 32px;
  align-items: center;
  padding: 72px 0 44px;
}
.eyebrow {
  color: var(--color-primary-dark);
  font-size: 0.82rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
h1, h2, h3, p { overflow-wrap: anywhere; }
h1 {
  font-family: var(--font-display);
  max-width: 820px;
  margin: 0;
  font-size: clamp(2.2rem, 4vw, 4.6rem);
  line-height: 1.02;
  letter-spacing: -0.018em;
}
h2 { margin-top: 0; font-size: 1.65rem; font-family: var(--font-display); letter-spacing: -0.012em; }
h3 { margin-bottom: 8px; font-family: var(--font-display); letter-spacing: -0.010em; }
.lead {
  max-width: 760px;
  color: var(--color-muted);
  font-size: 1.18rem;
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.actions, .search-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, oklch(71% 0.160 50) 0%, oklch(63% 0.192 45) 55%, oklch(44% 0.155 38) 100%);
  color: white;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 1rem;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 8px 22px -6px oklch(63% 0.192 45 / 0.55);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.button:hover, .button:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 12px 28px -6px oklch(63% 0.192 45 / 0.62);
  text-decoration: none;
  color: white;
}
.button:active { transform: translateY(0); }
.button:disabled, button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
  pointer-events: none;
}
.button.secondary {
  background: var(--color-surface);
  color: var(--color-primary-dark);
  border-color: oklch(80% 0.080 55);
  box-shadow: 0 4px 16px -8px oklch(44% 0.155 38 / 0.40);
}
.button.secondary:hover, .button.secondary:focus-visible {
  border-color: var(--color-primary);
  color: var(--color-primary-dark);
}

/* ── Hero media ─────────────────────────────────────────────────────────── */
.hero-media {
  position: relative;
  min-width: 0;
  margin: 0;
}
.hero-media img {
  display: block;
  width: 100%;
  aspect-ratio: 900 / 434;
  object-fit: cover;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 50px oklch(22% 0.015 220 / 0.14);
}
.scorecard {
  position: absolute;
  right: 14px;
  bottom: 14px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  width: min(92%, 420px);
  padding: 10px;
  border: 1px solid oklch(100% 0 0 / 0.62);
  border-radius: var(--radius-md);
  background: oklch(100% 0 0 / 0.92);
  box-shadow: 0 14px 30px oklch(22% 0.015 220 / 0.16);
  backdrop-filter: blur(10px);
}
.scorecard span {
  min-width: 0;
  color: var(--color-muted);
  font-size: 0.78rem;
}
.scorecard strong {
  display: block;
  color: var(--color-text);
  font-size: 1.45rem;
}

/* ── Cards & surfaces ────────────────────────────────────────────────────── */
small, .muted { color: var(--color-muted); }
section { padding: 30px 0; }
.band {
  margin-inline: calc(50% - 50vw);
  padding-inline: max(16px, calc((100vw - 1120px) / 2));
  background: linear-gradient(180deg, var(--color-band-bg) 0%, var(--color-soft) 100%);
}
.grid {
  display: grid;
  gap: 16px;
}
.grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.cards { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

article, .diagnostic-panel, .support-status, .ad-slot, .facts div, .columns > div {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  padding: 20px;
  box-shadow: 0 6px 24px oklch(22% 0.015 220 / 0.06);
}
.grid.cards article, .device-card {
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.grid.cards article:hover, .device-card:hover {
  transform: translateY(-3px);
  border-color: oklch(79% 0.125 55);
  box-shadow: 0 14px 34px -10px oklch(63% 0.192 45 / 0.28);
}
.device-card a { color: var(--color-text); text-decoration: none; }

/* ── Risk badges ─────────────────────────────────────────────────────────── */
.risk {
  display: inline-flex;
  margin-bottom: 10px;
  padding: 3px 10px;
  border-radius: 999px;
  color: white;
  background: var(--color-warn);
  font-size: 0.82rem;
  font-weight: 800;
}
.risk.critical { background: var(--color-critical); }
.risk.high { background: var(--color-warn); }
.risk.watch { background: var(--brand-700); } /* brand-700 oklch(44% 0.155 38) ensures AA 4.5:1 vs white */
.risk.ok { background: var(--color-success); }

/* ── Page sections ───────────────────────────────────────────────────────── */
.page-head {
  padding: 50px 0 24px;
}
.page-head p {
  max-width: 820px;
  color: var(--color-muted);
  font-size: 1.08rem;
}

/* ── Diagnostic ──────────────────────────────────────────────────────────── */
.diagnostic-panel label {
  display: block;
  margin-bottom: 8px;
  font-weight: 800;
}
.onboarding-strip, .onboarding-guide {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--color-soft) 0%, var(--color-surface) 100%);
  padding: 22px;
  box-shadow: 0 8px 26px oklch(22% 0.015 220 / 0.08);
}
.onboarding-guide .actions { margin: 14px 0 8px; }
.onboarding-guide p, .onboarding-strip p { color: var(--color-muted); }
.aha-note {
  margin-top: 16px;
  border: 1px solid oklch(79% 0.125 55);
  border-radius: var(--radius-sm);
  background: var(--color-soft);
  padding: 12px;
}
#diagnostic-form { margin: 0; }
input[type="search"] {
  flex: 1 1 260px;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font: inherit;
  background: var(--color-surface);
  color: var(--color-text);
}
input[type="text"], input[type="email"], textarea, select {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font: inherit;
  background: var(--color-surface);
  color: var(--color-text);
}
textarea { resize: vertical; min-height: 140px; }

/* ── Result / output states ──────────────────────────────────────────────── */
.result {
  display: block;
  margin-top: 16px;
  padding: 16px;
  border-radius: var(--radius-sm);
  background: var(--color-soft);
}
.result[data-tone="success"] { border: 1px solid var(--color-success); }
.result[data-tone="warn"]    { border: 1px solid var(--color-warn); }
.result[data-tone="error"]   { border: 1px solid var(--color-danger); }
.result span { display: block; margin: 6px 0; color: var(--color-primary-dark); font-weight: 800; }
.result p { margin: 10px 0; }
.result .checklist { margin: 8px 0; }

/* ── Contact / conversion panels ────────────────────────────────────────── */
.contact-panel, .conversion-panel {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  padding: 20px;
  box-shadow: 0 4px 16px oklch(22% 0.015 220 / 0.05);
}
.conversion-panel p { margin-bottom: 0; color: var(--color-muted); }
.contact-panel form { display: grid; gap: 12px; }
.contact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.contact-panel label { display: block; margin-bottom: 6px; font-weight: 700; }
.contact-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ── Lists ───────────────────────────────────────────────────────────────── */
.checklist, .columns ul, .steps { padding-left: 22px; }

/* ── Device detail ───────────────────────────────────────────────────────── */
.device-detail { margin: 34px 0; background: transparent; border: 0; padding: 0; box-shadow: none; }
.facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}
dt { color: var(--color-muted); font-size: 0.84rem; }
dd { margin: 0; font-weight: 800; }
.columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  padding: 24px 0;
}

/* ── Ad slot ─────────────────────────────────────────────────────────────── */
.ad-slot {
  color: var(--color-muted);
  text-align: center;
  border-style: dashed;
  box-shadow: none;
}
.ad-frame { display: block; min-height: 100px; }
.affiliate-note { color: var(--color-muted); font-size: 0.93rem; }

/* ── Footer ──────────────────────────────────────────────────────────────── */
footer {
  margin-top: 48px;
  padding: 28px 32px;
  color: var(--color-muted);
  border-top: 1px solid var(--color-border);
  background: linear-gradient(180deg, var(--color-surface) 0%, var(--color-soft) 100%);
}
.footer-links { display: flex; flex-wrap: wrap; gap: 8px 14px; }
.footer-links a { color: var(--color-primary-dark); font-weight: 700; display: inline-flex; align-items: center; min-height: 24px; padding: 4px 6px; }

/* ── Tables (compliance matrix) ─────────────────────────────────────────── */
.compliance-matrix table { width: 100%; border-collapse: collapse; background: var(--color-surface); }
.table-wrap { overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.compliance-matrix th, .compliance-matrix td { padding: 12px 10px; border-bottom: 1px solid var(--color-border); text-align: left; vertical-align: top; }
.compliance-matrix thead th { background: var(--color-band-bg); font-size: 0.9rem; }

/* ── FAQ ─────────────────────────────────────────────────────────────────── */
.faq-list { display: grid; gap: 10px; }
.faq-list details { border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); padding: 12px 14px; }
.faq-list summary { cursor: pointer; font-weight: 700; }
.faq-list p { margin: 10px 0 0; color: var(--color-muted); }

/* ── Admin ───────────────────────────────────────────────────────────────── */
.admin-shell code, .admin-shell pre { font-family: var(--font-mono); }
.admin-shell pre { overflow-x: auto; margin: 0; padding: 14px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: oklch(14% 0.020 230); color: oklch(92% 0.008 220); }

/* ── Compliance disclaimer ───────────────────────────────────────────────── */
.compliance-disclaimer {
  margin: 20px 0 0;
  padding: 12px 16px;
  border: 1px solid oklch(79% 0.125 55);
  border-left: 4px solid var(--brand-700);
  border-radius: var(--radius-sm);
  background: var(--color-soft);
  color: var(--color-muted);
  font-size: 0.9rem;
}
.compliance-disclaimer p { margin: 0; }

/* ── Cookie consent banner (RGPD/ePrivacy) ───────────────────────────────── */
.cookie-consent {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 16px 24px;
  background: var(--color-surface);
  border-top: 2px solid var(--brand-500);
  box-shadow: 0 -4px 24px -6px oklch(0% 0 0 / 0.18);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
}
@media (prefers-color-scheme: dark) {
  .cookie-consent { background: oklch(22% 0.012 220); }
}
.cookie-consent .cookie-title {
  margin: 0;
  font-size: 0.95rem;
}
.cookie-consent .cookie-body {
  margin: 0;
  font-size: 0.88rem;
  color: var(--color-muted);
  flex: 1 1 260px;
}
.cookie-consent .cookie-actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}
.cookie-consent .button {
  font-size: 0.88rem;
  padding: 8px 18px;
}

/* Respect reduced-motion: disable transitions/animations for users who opt out */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Account / auth UI ──────────────────────────────────────────────────── */
.topbar-actions { display: inline-flex; align-items: center; gap: 14px; flex-shrink: 0; }
.account-root { display: inline-flex; align-items: center; min-height: 36px; }
.account-signin {
  appearance: none; border: 1px solid var(--color-border); background: var(--color-surface);
  color: var(--color-text); font-family: var(--font-body); font-weight: 700; font-size: 0.9rem;
  padding: 7px 16px; border-radius: 999px; cursor: pointer; white-space: nowrap;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.account-signin:hover { border-color: var(--color-primary); color: var(--color-primary-dark); }
.account-signin:active { transform: translateY(1px); }
.account-menu { position: relative; }
.account-avatar {
  width: 38px; height: 38px; border-radius: 50%; cursor: pointer; overflow: hidden;
  border: 2px solid var(--color-border); background: linear-gradient(150deg, var(--brand-300), var(--brand-600));
  color: oklch(100% 0 0); font-weight: 800; font-size: 0.9rem; font-family: var(--font-display);
  display: inline-flex; align-items: center; justify-content: center; padding: 0;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.account-avatar:hover { border-color: var(--color-primary); box-shadow: 0 0 0 3px oklch(63% 0.192 45 / 0.18); }
.account-avatar img { width: 100%; height: 100%; object-fit: cover; }
.account-dropdown {
  position: absolute; right: 0; top: calc(100% + 10px); min-width: 224px; z-index: 30;
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md);
  box-shadow: 0 18px 40px -16px oklch(22% 0.04 220 / 0.45); padding: 8px; display: flex; flex-direction: column; gap: 2px;
}
.account-dropdown__id { padding: 8px 10px 10px; border-bottom: 1px solid var(--color-border); margin-bottom: 4px; line-height: 1.35; }
.account-dropdown__id strong { display: block; font-family: var(--font-display); font-size: 0.95rem; }
.account-dropdown__id span { display: block; color: var(--color-muted); font-size: 0.82rem; word-break: break-all; }
.account-dropdown__link, .account-dropdown__logout {
  appearance: none; border: 0; background: transparent; text-align: left; width: 100%;
  font-family: var(--font-body); font-size: 0.92rem; font-weight: 600; color: var(--color-text);
  padding: 9px 10px; border-radius: var(--radius-sm); cursor: pointer; text-decoration: none;
}
.account-dropdown__link:hover, .account-dropdown__logout:hover { background: var(--color-soft); }
.account-dropdown__logout { color: var(--color-danger); }

/* Login popup */
body.dialog-open { overflow: hidden; }
.login-dialog { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 20px; }
.login-dialog__backdrop { position: absolute; inset: 0; background: oklch(18% 0.02 220 / 0.55); backdrop-filter: blur(3px); }
.login-dialog__panel {
  position: relative; z-index: 1; width: min(420px, 100%); background: var(--color-surface);
  border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 30px 28px 26px;
  box-shadow: 0 30px 70px -24px oklch(18% 0.04 220 / 0.6); text-align: center;
  animation: dialog-in .18s ease;
}
@keyframes dialog-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
.login-dialog__close {
  position: absolute; top: 12px; right: 14px; border: 0; background: transparent; font-size: 1.6rem;
  line-height: 1; color: var(--color-muted); cursor: pointer; padding: 4px 8px; border-radius: var(--radius-sm);
}
.login-dialog__close:hover { color: var(--color-text); background: var(--color-soft); }
.login-dialog__panel h2 { font-size: 1.4rem; margin: 0 0 8px; }
.login-dialog__intro { color: var(--color-muted); font-size: 0.95rem; margin: 0 0 20px; }
.login-google {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
  text-decoration: none; font-weight: 700;
}
.login-google__icon {
  display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: oklch(100% 0 0); color: oklch(45% 0.18 25); font-family: var(--font-display); font-weight: 800; font-size: 0.85rem;
}
.login-dialog__note { color: var(--color-muted); font-size: 0.8rem; margin: 16px 0 0; line-height: 1.5; }

/* Track button */
.track-button { margin-top: 14px; }
.track-button.is-tracked {
  background: var(--color-success); border-color: transparent; color: oklch(100% 0 0);
}
.track-button.is-tracked::before { content: "✓ "; }

/* Account page + watchlist */
.account-page .account-card {
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  padding: 24px 26px; margin-bottom: 22px;
}
.account-card h2 { margin-top: 0; }
.watchlist-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin-top: 8px; }
.watchlist-item {
  border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 16px 18px;
  background: var(--color-bg); display: flex; flex-direction: column; gap: 8px;
}
.watchlist-item h3 { margin: 0; font-size: 1.05rem; }
.watchlist-item p { margin: 0; color: var(--color-muted); font-size: 0.9rem; }
.watchlist-remove { align-self: flex-start; margin-top: 4px; font-size: 0.85rem; padding: 6px 14px; }
.empty-state { padding: 22px; text-align: center; border: 1px dashed var(--color-border); border-radius: var(--radius-md); }
.empty-state p { color: var(--color-muted); margin-top: 0; }

.account-gdpr { margin-top: 16px; gap: 12px; flex-wrap: wrap; }
.button.danger { background: var(--color-danger); border-color: transparent; color: oklch(100% 0 0); }
.button.danger:hover { background: var(--color-critical); }
.account-action-status { margin-top: 12px; font-weight: 650; color: var(--color-success); }

/* Login feedback toast */
.account-toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 90;
  padding: 12px 22px; border-radius: 999px; font-weight: 650; font-size: 0.92rem; color: oklch(100% 0 0);
  box-shadow: 0 14px 32px -12px oklch(22% 0.04 220 / 0.5); animation: dialog-in .2s ease;
}
.account-toast--ok { background: var(--color-success); }
.account-toast--warn { background: var(--color-warn); }

/* ── Mobile ──────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .topbar { align-items: flex-start; flex-direction: column; gap: 10px; padding: 14px 16px; }
  nav { gap: 10px; flex-wrap: wrap; overflow: visible; }
  .hero, .grid.three, .columns, .facts { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .hero { padding-top: 42px; }
  .scorecard { position: static; width: auto; margin-top: 12px; }
  h1 { font-size: 2.3rem; }
  .topbar { min-height: auto; }
  main { width: calc(100% - 24px); }
  .topbar-actions { width: 100%; justify-content: space-between; }
  .watchlist-grid { grid-template-columns: 1fr; }
}