:root {
  --arc-bg: #f8f9fa;
  --arc-surface: #ffffff;
  --arc-elevated: #f1f3f5;
  --arc-accent: #047857;
  --arc-brand: #10b981;
  --arc-accent-strong: #065f46;
  --arc-accent-soft: rgb(4 120 87 / 0.09);
  --arc-on-accent: #ffffff;
  --arc-text: #0f172a;
  --arc-muted: #64748b;
  --arc-border: #e5e7eb;
  --arc-border-strong: #cbd5e1;
  --arc-danger: #c2414f;
  --arc-warning: #a16207;
  --arc-font: "Plus Jakarta Sans", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --arc-radius-sm: 8px;
  --arc-radius-md: 12px;
  --arc-radius-lg: 16px;
  --arc-shadow: 0 12px 32px rgb(15 23 42 / 0.07);
  --arc-focus: 0 0 0 3px rgb(4 120 87 / 0.22);
  color-scheme: light;
}

.arc-dark {
  --arc-bg: #0b0d0f;
  --arc-surface: #11161a;
  --arc-elevated: #171d22;
  --arc-accent: #34d399;
  --arc-brand: #10b981;
  --arc-accent-strong: #6ee7b7;
  --arc-accent-soft: rgb(52 211 153 / 0.12);
  --arc-on-accent: #07130b;
  --arc-text: #f7f7f3;
  --arc-muted: #9ca3af;
  --arc-border: rgb(255 255 255 / 0.09);
  --arc-border-strong: rgb(255 255 255 / 0.18);
  --arc-danger: #ef8d8d;
  --arc-warning: #e3bd73;
  --arc-shadow: 0 18px 50px rgb(0 0 0 / 0.28);
  --arc-focus: 0 0 0 3px rgb(52 211 153 / 0.3);
  color-scheme: dark;
}

/* Shared cookie presentation for the static site and the recorder. */
html body { padding-bottom: var(--consent-space, 0px); }
.arc-consent {
  box-sizing: border-box; color: var(--arc-text); background: var(--arc-surface);
  border: 1px solid var(--arc-border-strong); border-radius: var(--arc-radius-md);
  padding: 18px 20px; font: 14px/1.5 var(--arc-font);
}
.arc-consent-floating {
  position: fixed; z-index: 40; bottom: max(16px, env(safe-area-inset-bottom));
  left: 50%; transform: translateX(-50%); width: min(760px, calc(100% - 32px));
  max-height: calc(100dvh - 32px); overflow-y: auto; box-shadow: var(--arc-shadow); pointer-events: none;
}
.arc-consent-settings { margin: 20px 0; }
.arc-consent p { margin: 0; }
.arc-consent [role="status"]:empty { display: none; }
.arc-consent-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.arc-consent-floating .arc-consent-actions { pointer-events: auto; }
.arc-consent .arc-consent-actions button {
  min-height: 44px; min-width: 84px; padding: 9px 16px; border-radius: 6px;
  border: 1px solid var(--arc-border-strong); background: var(--arc-elevated);
  color: var(--arc-text); font: inherit; font-weight: 600; cursor: pointer;
}
.arc-consent .arc-consent-actions button:hover { border-color: var(--arc-accent); }
.arc-consent a { color: var(--arc-accent); text-decoration: underline; }
.arc-consent :focus-visible { outline: 2px solid var(--arc-accent); outline-offset: 3px; }
@media (max-width: 480px) {
  .arc-consent { padding: 14px 16px; }
  .arc-consent-floating { width: calc(100% - 24px); bottom: max(12px, env(safe-area-inset-bottom)); }
}