/* cookie-consent — minimal, dark-mode aware. Override any --cc-* token. */
:root {
  --cc-bg: #ffffff;
  --cc-text: #1a1a2e;
  --cc-muted: #6b7280;
  --cc-border: #e5e7eb;
  --cc-link: #4361ee;
  --cc-btn-bg: #4361ee;
  --cc-btn-fg: #ffffff;
  --cc-btn2-bg: #f1f3f9;
  --cc-btn2-fg: #1a1a2e;
  --cc-radius: 8px;
  --cc-shadow: 0 -2px 16px rgba(0, 0, 0, 0.12);
  --cc-z: 2147483600;
}
@media (prefers-color-scheme: dark) {
  :root {
    --cc-bg: #1e1e2e;
    --cc-text: #e4e4e7;
    --cc-muted: #9ca3af;
    --cc-border: #2d2d3d;
    --cc-link: #8ea2ff;
    --cc-btn2-bg: #2a2a3a;
    --cc-btn2-fg: #e4e4e7;
    --cc-shadow: 0 -2px 16px rgba(0, 0, 0, 0.5);
  }
}

.cc-banner {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: var(--cc-z);
  background: var(--cc-bg);
  color: var(--cc-text);
  border-top: 1px solid var(--cc-border);
  box-shadow: var(--cc-shadow);
  padding: 16px clamp(16px, 4vw, 32px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  font: 14px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
}
.cc-text { flex: 1 1 320px; min-width: 0; }
.cc-link { color: var(--cc-link); text-decoration: underline; }

.cc-prefs {
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  padding: 4px 0;
  border-top: 1px solid var(--cc-border);
  margin-top: 4px;
}
.cc-row { display: inline-flex; align-items: center; gap: 8px; color: var(--cc-muted); }
.cc-row input { accent-color: var(--cc-btn-bg); }

.cc-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.cc-btn {
  appearance: none;
  border: 1px solid transparent;
  border-radius: var(--cc-radius);
  padding: 10px 18px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
/* Accept and reject share identical sizing/weight: equal prominence (required). */
.cc-btn-primary { background: var(--cc-btn-bg); color: var(--cc-btn-fg); }
.cc-btn-secondary { background: var(--cc-btn2-bg); color: var(--cc-btn2-fg); border-color: var(--cc-border); }
.cc-btn:focus-visible { outline: 2px solid var(--cc-link); outline-offset: 2px; }

@media (max-width: 560px) {
  .cc-actions { width: 100%; }
  .cc-btn { flex: 1 1 auto; }
}