/* ==========================================================================
   HeCAPTe — Digital Rust Design System
   Warm, tech-dystopian aesthetic. Brutalist structure, corrupted palette,
   noise texture, offset solid shadows. Dark-first.
   ========================================================================== */

/* --- Custom Properties (Design Tokens) ---------------------------------- */
:root {
  /* Main palette: light → dark */
  --dr-ghost-pixel: #f7eae8;
  --dr-phosphor-smoke: #efd5d1;
  --dr-phantom-current: #e7c0ba;
  --dr-corrupted-cache: #dfaba3;
  --dr-copper-trace: #d7968c;
  --dr-fatal-error: #cf8175;
  --dr-rouge-signal: #c76c5e;
  --dr-amber-alert: #bf6c47;  /* shifted from #bf5747 for WCAG AA 4.5:1 on both surfaces */
  --dr-firewall-breach: #b74230;
  --dr-rust: #af2e1a;
  --dr-kernel-panic: #9d2917;
  --dr-data-rot: #8c2414;
  --dr-bricked-board: #7a2012;
  --dr-dark-packet: #691b0f;
  --dr-daemon-blood: #57170d;
  --dr-bad-sector: #46120a;
  --dr-core-meltdown: #340d07;
  --dr-null-pointer: #230905;
  --dr-horizon: #110402;

  /* ANSI / Accent palette */
  --dr-memory-leek: #8fa667;
  --dr-memory-leek-dim: #627247;
  --dr-memory-leek-bright: #94a577;
  --dr-stack-overglow: #d4a759;
  --dr-stack-overglow-dim: #a07e43;
  --dr-stack-overglow-bright: #d3ae6e;
  --dr-blue-screen: #8791b0;
  --dr-dead-thread: #6fa5a0;
  --dr-dead-thread-dim: #4c726e;
  --dr-thermal-throttle: #d78556;
  --dr-fractured-shell: #ba5a7d;

  /* Semantic surfaces */
  --dr-surface-base: var(--dr-horizon);
  --dr-surface-secondary: var(--dr-null-pointer);
  --dr-surface-elevated: var(--dr-core-meltdown);
  --dr-surface-highlight: var(--dr-bad-sector);
  --dr-surface-active: #5a1810;

  /* Semantic text */
  --dr-text-primary: var(--dr-ghost-pixel);
  --dr-text-secondary: var(--dr-phosphor-smoke);
  --dr-text-tertiary: #c9a39c;
  --dr-text-link: var(--dr-phantom-current);
  --dr-text-link-hover: var(--dr-fatal-error);
  --dr-text-on-accent: var(--dr-ghost-pixel);
  --dr-text-muted: rgba(239, 213, 209, 0.55);  /* 0.50→0.55 for WCAG AA 4.5:1 minimum */

  /* Semantic accents */
  --dr-accent: var(--dr-rust);
  --dr-accent-secondary: var(--dr-fatal-error);
  --dr-focus-ring: var(--dr-stack-overglow);

  /* Semantic state */
  --dr-success: var(--dr-memory-leek);
  --dr-warning: var(--dr-stack-overglow);
  --dr-error: var(--dr-amber-alert);
  --dr-critical: var(--dr-rust);
  --dr-info: var(--dr-dead-thread);

  /* Borders */
  --dr-border: 2px solid var(--dr-dark-packet);
  --dr-border-thick: 4px solid var(--dr-dark-packet);
  --dr-border-subtle: 1px solid var(--dr-bad-sector);
  --dr-border-focus: 2px solid var(--dr-stack-overglow);

  /* RGB values for rgba() usage */
  --dr-bg-rgb: 17, 4, 2;
  --dr-accent-rgb: 175, 46, 26;
  --dr-success-rgb: 143, 166, 103;
  --dr-error-rgb: 191, 108, 71;  /* matches --dr-amber-alert #bf6c47 */
  --dr-warning-rgb: 212, 167, 89;
  --dr-highlight: rgba(255, 255, 255, 0.1);

  /* Offset solid shadows (warm, never pure black) */
  --dr-shadow-offset-sm: 2px 2px 0 0 var(--dr-surface-highlight);
  --dr-shadow-offset-md: 3px 3px 0 0 var(--dr-surface-highlight);
  --dr-shadow-offset-lg: 4px 4px 0 0 var(--dr-surface-highlight);
  --dr-shadow-offset-xl: 6px 6px 0 0 var(--dr-surface-highlight);
  --dr-shadow-hover-sm: 3px 3px 0 0 var(--dr-surface-highlight);
  --dr-shadow-hover-md: 4px 4px 0 0 var(--dr-surface-highlight);
  --dr-shadow-hover-lg: 6px 6px 0 0 var(--dr-surface-highlight);
  --dr-shadow-active: 0 0 0 0 var(--dr-surface-highlight);
  --dr-shadow-inner-highlight: inset 0 1px 0 var(--dr-highlight);
  --dr-shadow-accent-glow: 0 0 12px rgba(var(--dr-accent-rgb), 0.35);

  /* Radius */
  --dr-radius-sm: 2px;
  --dr-radius: 4px;
  --dr-radius-lg: 6px;

  /* Typography */
  --dr-font-heading: "Cairo Play", system-ui, sans-serif;
  --dr-font-body: "Fira Sans", system-ui, -apple-system, sans-serif;
  --dr-font-mono: "Fira Code", "Fira Code Nerd Font", ui-monospace, monospace;
  --dr-text-xs: 0.75rem;
  --dr-text-sm: 0.875rem;
  --dr-text-base: 1rem;
  --dr-text-lg: 1.25rem;
  --dr-text-xl: 1.75rem;
  --dr-text-2xl: 2.5rem;
  --dr-text-3xl: 4rem;
  --dr-text-display: clamp(4rem, 15vw, 8rem);
  --dr-letter-spacing: -0.02em;

  /* Spacing */
  --dr-space-xs: 0.25rem;
  --dr-space-sm: 0.5rem;
  --dr-space-md: 1rem;
  --dr-space-lg: 1.5rem;
  --dr-space-xl: 2.5rem;
  --dr-space-2xl: 4rem;

  /* Z-index */
  --dr-z-content: 10;
  --dr-z-sidebar: 100;
  --dr-z-drawer: 200;
  --dr-z-modal: 300;
  --dr-z-noise: 1000;

  /* Transitions */
  --dr-duration-instant: 0.01ms;
  --dr-duration-fast: 150ms;
  --dr-duration-normal: 250ms;
  --dr-duration-slow: 400ms;
  --dr-duration-dramatic: 600ms;
  --dr-ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --dr-ease-out-expo: cubic-bezier(0.22, 1, 0.36, 1);
  --dr-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --dr-transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- Reset & Base ------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
}

body {
  min-height: 100%;
  font-family: var(--dr-font-body);
  font-weight: 500;
  font-size: var(--dr-text-base);
  line-height: 1.6;
  color: var(--dr-text-primary);
  background: var(--dr-surface-base);
  display: flex;
  justify-content: center;
  padding: var(--dr-space-2xl) var(--dr-space-lg) var(--dr-space-2xl);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Atmospheric noise texture — non-negotiable */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  opacity: 0.025;
  pointer-events: none;
  z-index: var(--dr-z-noise);
}

/* --- Typography --------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--dr-font-heading);
  font-weight: 700;
  letter-spacing: var(--dr-letter-spacing);
  line-height: 1.1;
  color: var(--dr-text-primary);
}

h1 {
  font-size: var(--dr-text-xl);
  margin-bottom: var(--dr-space-sm);
}

h2 {
  font-size: var(--dr-text-lg);
  margin: 0 0 var(--dr-space-sm);
}

h3 {
  font-size: var(--dr-text-base);
  margin: 0 0 var(--dr-space-xs);
}

p {
  color: var(--dr-text-secondary);
  margin-top: 0;
  line-height: 1.6;
}

a {
  color: var(--dr-text-link);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color var(--dr-transition-fast);
}

a:hover {
  color: var(--dr-text-link-hover);
  text-decoration-thickness: 2px;
}

a:visited {
  color: var(--dr-corrupted-cache);
}

a:active {
  color: var(--dr-rust);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--dr-accent);
  color: var(--dr-text-on-accent);
  padding: var(--dr-space-sm) var(--dr-space-md);
  z-index: var(--dr-z-modal);
  font-family: var(--dr-font-body);
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--dr-radius);
}

.skip-link:focus {
  left: 50%;
  transform: translateX(-50%);
  outline: 2px solid var(--dr-focus-ring);
  outline-offset: 2px;
}

/* --- Bracket notation (decorative motif) -------------------------------- */
.bracket {
  color: var(--dr-dark-packet);
  opacity: 0.5;
  font-family: var(--dr-font-heading);
  font-weight: 700;
}

/* --- Layout ------------------------------------------------------------- */
.container {
  max-width: 960px;
  width: 100%;
}

.container.narrow {
  max-width: 520px;
}

.top-actions {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--dr-space-lg);
  padding: var(--dr-space-lg) 0;
  border-bottom: var(--dr-border-thick);
  margin-bottom: var(--dr-space-lg);
}

/* --- Cards -------------------------------------------------------------- */
.card {
  background: var(--dr-surface-elevated);
  padding: var(--dr-space-lg);
  border: var(--dr-border);
  border-radius: var(--dr-radius);
  box-shadow:
    var(--dr-shadow-offset-md),
    var(--dr-shadow-inner-highlight);
  margin-bottom: var(--dr-space-lg);
  position: relative;
}

.card h2 {
  margin-top: 0;
  margin-bottom: var(--dr-space-sm);
}

/* Scanline overlay on cards */
.card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(var(--dr-accent-rgb), 0.015) 2px,
    rgba(var(--dr-accent-rgb), 0.015) 4px
  );
  pointer-events: none;
  border-radius: var(--dr-radius);
}

.card-success {
  border-left: 3px solid var(--dr-success);
}

/* --- Labels & Inputs ---------------------------------------------------- */
label {
  display: block;
  margin-bottom: var(--dr-space-sm);
  font-weight: 600;
  font-size: var(--dr-text-sm);
  color: var(--dr-text-primary);
  font-family: var(--dr-font-body);
  letter-spacing: var(--dr-letter-spacing);
}

input[type="text"],
input[type="password"] {
  width: 100%;
  padding: var(--dr-space-sm) var(--dr-space-md);
  border: 2px solid var(--dr-surface-highlight);
  border-radius: var(--dr-radius);
  background: var(--dr-surface-base);
  color: var(--dr-text-primary);
  font-family: var(--dr-font-body);
  font-size: var(--dr-text-sm);
  outline: none;
  transition:
    border-color var(--dr-transition-fast),
    box-shadow var(--dr-transition-fast);
  margin-bottom: var(--dr-space-md);
}

input[type="text"]::placeholder,
input[type="password"]::placeholder {
  color: var(--dr-text-muted);
  font-style: italic;
}

input[type="text"]:focus,
input[type="password"]:focus {
  border-color: var(--dr-accent);
  box-shadow:
    0 0 0 1px rgba(var(--dr-accent-rgb), 0.3),
    inset 0 1px 2px rgba(0, 0, 0, 0.2);
  outline: 2px solid var(--dr-focus-ring);
  outline-offset: 2px;
}

input[disabled] {
  background: var(--dr-surface-highlight);
  color: var(--dr-text-tertiary);
  border-color: var(--dr-dark-packet);
  cursor: not-allowed;
}

/* --- Buttons ------------------------------------------------------------ */
button,
.button {
  background: var(--dr-accent);
  color: var(--dr-text-on-accent);
  border: none;
  border-radius: var(--dr-radius);
  box-shadow:
    var(--dr-shadow-offset-sm),
    var(--dr-shadow-inner-highlight);
  padding: var(--dr-space-sm) var(--dr-space-xl);
  font-family: var(--dr-font-heading);
  font-weight: 600;
  font-size: var(--dr-text-sm);
  letter-spacing: 0.01em;
  cursor: pointer;
  transition:
    transform var(--dr-duration-fast) var(--dr-ease-default),
    box-shadow var(--dr-duration-fast) var(--dr-ease-default),
    background-color var(--dr-duration-fast) var(--dr-ease-default);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--dr-space-xs);
  text-decoration: none;
}

button:hover,
.button:hover {
  background: var(--dr-accent-secondary);
  box-shadow:
    var(--dr-shadow-hover-md),
    var(--dr-shadow-inner-highlight);
}

button:active,
.button:active {
  box-shadow: var(--dr-shadow-active);
}

button:disabled {
  background: var(--dr-surface-highlight);
  color: var(--dr-text-muted);
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

button.secondary,
.button.secondary {
  background: transparent;
  color: var(--dr-text-secondary);
  border: 2px solid var(--dr-dark-packet);
  box-shadow: var(--dr-shadow-offset-sm);
}

button.secondary:hover,
.button.secondary:hover {
  border-color: var(--dr-accent);
  color: var(--dr-text-primary);
  background: var(--dr-surface-elevated);
  box-shadow: var(--dr-shadow-hover-md);
}

button.secondary:active,
.button.secondary:active {
  box-shadow: var(--dr-shadow-active);
}

button.ghost,
.button.ghost {
  background: transparent;
  color: var(--dr-text-link);
  border: 2px solid var(--dr-copper-trace);
  box-shadow: var(--dr-shadow-offset-sm);
}

button.ghost:hover,
.button.ghost:hover {
  border-color: var(--dr-accent);
  color: var(--dr-text-primary);
  background: var(--dr-surface-elevated);
  box-shadow: var(--dr-shadow-hover-md);
}

button.ghost:active,
.button.ghost:active {
  box-shadow: var(--dr-shadow-active);
}

button.danger {
  background: var(--dr-error);
  color: var(--dr-text-on-accent);
}

button.danger:hover {
  background: var(--dr-firewall-breach);
}

@media (hover: hover) {
  button:hover,
  .button:hover {
    transform: translate(-2px, -2px);
  }

  button:active,
  .button:active {
    transform: translate(2px, 2px);
  }

  button.secondary:hover,
  .button.secondary:hover {
    transform: translate(-2px, -2px);
  }

  button.secondary:active,
  .button.secondary:active {
    transform: translate(2px, 2px);
  }

  button.ghost:hover,
  .button.ghost:hover {
    transform: translate(-2px, -2px);
  }

  button.ghost:active,
  .button.ghost:active {
    transform: translate(2px, 2px);
  }
}

button.small {
  padding: var(--dr-space-xs) var(--dr-space-sm);
  font-size: var(--dr-text-xs);
}

/* --- Actions row -------------------------------------------------------- */
.actions {
  margin-top: var(--dr-space-md);
  display: flex;
  justify-content: flex-end;
  gap: var(--dr-space-sm);
}

/* --- Tables ------------------------------------------------------------- */
table {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
  border: var(--dr-border);
}

.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

th,
td {
  text-align: left;
  padding: var(--dr-space-sm) var(--dr-space-md);
  border-bottom: var(--dr-border-subtle);
  color: var(--dr-text-primary);
  font-size: var(--dr-text-sm);
  overflow-wrap: break-word;
}

thead th {
  background: var(--dr-surface-secondary);
  color: var(--dr-text-primary);
  font-family: var(--dr-font-heading);
  font-weight: 700;
  letter-spacing: var(--dr-letter-spacing);
  border-bottom: var(--dr-border);
}

tbody tr:nth-child(odd) {
  background: var(--dr-surface-elevated);
}

tbody tr:nth-child(even) {
  background: var(--dr-surface-base);
}

tbody tr:hover {
  background: var(--dr-surface-highlight);
}

/* --- Utility classes ---------------------------------------------------- */
.muted {
  color: var(--dr-text-tertiary);
}

.mono {
  font-family: var(--dr-font-mono);
  word-break: break-all;
  max-width: 240px;
  font-size: var(--dr-text-xs);
}

.small {
  font-size: var(--dr-text-xs);
}

.blur {
  filter: blur(9px);
  transition: filter var(--dr-duration-fast) var(--dr-ease-default), opacity var(--dr-duration-fast) var(--dr-ease-default);
  cursor: pointer;
}

.blur:hover,
.blur:focus {
  filter: none;
  opacity: 0.95;
}

.warning {
  color: var(--dr-warning);
}

.success {
  color: var(--dr-success);
}

.status-subtle {
  color: var(--dr-info);
  font-family: var(--dr-font-mono);
  font-size: var(--dr-text-sm);
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: var(--dr-text-xs);
  color: var(--dr-text-tertiary);
  margin-bottom: var(--dr-space-xs);
  display: inline-block;
  font-family: var(--dr-font-heading);
}

/* --- Error / Alert ------------------------------------------------------ */
.error {
  background: rgba(var(--dr-error-rgb), 0.1);
  border: var(--dr-border);
  border-left: 3px solid var(--dr-error);
  border-radius: var(--dr-radius);
  padding: var(--dr-space-md) var(--dr-space-lg);
  margin-bottom: var(--dr-space-md);
  color: var(--dr-text-primary);
  box-shadow: var(--dr-shadow-offset-sm);
}

/* --- Note block (info box) ---------------------------------------------- */
.note-block {
  padding: var(--dr-space-sm) var(--dr-space-md);
  border-radius: var(--dr-radius);
  background: rgba(var(--dr-accent-rgb), 0.08);
  border: var(--dr-border-subtle);
  color: var(--dr-text-secondary);
  font-size: var(--dr-text-sm);
  box-shadow: var(--dr-shadow-offset-sm);
}

/* --- Divider ------------------------------------------------------------ */
.divider {
  height: var(--dr-space-xs);
  background: repeating-linear-gradient(
    45deg,
    var(--dr-dark-packet),
    var(--dr-dark-packet) 8px,
    transparent 8px,
    transparent 16px
  );
  margin: var(--dr-space-lg) 0;
  clip-path: polygon(0 0, 100% 0, 98% 100%, 2% 100%);
}

/* --- Inline edit modal (replaces prompt/confirm) ----------------------- */
.edit-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(var(--dr-bg-rgb), 0.85);
  z-index: var(--dr-z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--dr-space-md);
}

.edit-modal {
  background: var(--dr-surface-elevated);
  border: var(--dr-border);
  border-radius: var(--dr-radius);
  box-shadow: var(--dr-shadow-offset-lg), var(--dr-shadow-inner-highlight);
  padding: var(--dr-space-lg);
  width: 100%;
  max-width: 480px;
  position: relative;
  overflow: hidden;
  animation: dr-enter var(--dr-duration-normal) var(--dr-ease-out-expo) both;
}

.edit-modal::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(var(--dr-accent-rgb), 0.015) 2px,
    rgba(var(--dr-accent-rgb), 0.015) 4px
  );
  pointer-events: none;
  border-radius: var(--dr-radius);
}

.edit-modal h2 {
  margin-bottom: var(--dr-space-md);
}

.edit-modal .actions {
  margin-top: var(--dr-space-lg);
}

/* --- Confirm dialog (replaces confirm()) ------------------------------- */
.confirm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(var(--dr-bg-rgb), 0.85);
  z-index: var(--dr-z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--dr-space-md);
}

.confirm-dialog {
  background: var(--dr-surface-elevated);
  border: var(--dr-border-thick);
  border-top: 4px solid var(--dr-error);
  border-radius: var(--dr-radius);
  box-shadow: var(--dr-shadow-offset-lg), var(--dr-shadow-inner-highlight);
  padding: var(--dr-space-lg);
  width: 100%;
  max-width: 420px;
  position: relative;
  overflow: hidden;
  animation: dr-enter var(--dr-duration-normal) var(--dr-ease-out-expo) both;
}

.confirm-dialog::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(var(--dr-accent-rgb), 0.015) 2px,
    rgba(var(--dr-accent-rgb), 0.015) 4px
  );
  pointer-events: none;
  border-radius: var(--dr-radius);
}

.confirm-dialog h2 {
  margin-bottom: var(--dr-space-sm);
}

.confirm-dialog p {
  margin-bottom: var(--dr-space-md);
}

.confirm-dialog .actions {
  margin-top: 0;
}

/* --- Inline note with indicator ----------------------------------------- */
.inline-note {
  display: inline-flex;
  align-items: center;
  gap: var(--dr-space-sm);
  font-size: var(--dr-text-xs);
  color: var(--dr-text-tertiary);
}

.inline-note::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: var(--dr-radius-sm);
  background: var(--dr-warning);
  box-shadow: 0 0 8px rgba(var(--dr-warning-rgb), 0.5);
}

/* --- Badge / Pill ------------------------------------------------------- */
.pill {
  display: inline-block;
  padding: var(--dr-space-xs) var(--dr-space-sm);
  border-radius: var(--dr-radius-sm);
  background: rgba(var(--dr-accent-rgb), 0.15);
  color: var(--dr-text-primary);
  font-family: var(--dr-font-mono);
  font-size: var(--dr-text-xs);
  font-weight: 700;
  border: 1px solid rgba(var(--dr-accent-rgb), 0.3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* --- Scrollbar ---------------------------------------------------------- */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--dr-dark-packet);
  border-radius: var(--dr-radius);
  border: 2px solid var(--dr-surface-secondary);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--dr-accent);
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--dr-dark-packet) transparent;
}

/* --- Selection ---------------------------------------------------------- */
::selection {
  background: var(--dr-accent);
  color: var(--dr-text-primary);
}

/* --- Focus visible (mandatory gold ring) -------------------------------- */
:focus-visible {
  outline: 2px solid var(--dr-focus-ring);
  outline-offset: 2px;
}

/* --- Reduced motion ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .preset-option:hover .preset-card {
    transform: none;
  }
}

/* --- Staggered entrance animation --------------------------------------- */
@keyframes dr-enter {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.card {
  animation: dr-enter var(--dr-duration-normal) var(--dr-ease-out-expo) both;
}

.card:nth-child(2) { animation-delay: 60ms; }
.card:nth-child(3) { animation-delay: 120ms; }
.card:nth-child(4) { animation-delay: 180ms; }

/* --- Blinking cursor for solver status ---------------------------------- */
@keyframes dr-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.cursor-blink::after {
  content: '█';
  animation: dr-blink 1s step-end infinite;
  color: var(--dr-accent);
  margin-left: var(--dr-space-xs);
}

/* --- Pulse animation for streaming/active states ------------------------ */
@keyframes dr-pulse {
  0%, 100% {
    opacity: 1;
    box-shadow: 0 0 6px rgba(var(--dr-accent-rgb), 0.3);
  }
  50% {
    opacity: 0.6;
    box-shadow: 0 0 2px rgba(var(--dr-accent-rgb), 0.15);
  }
}

/* --- Demo page: solver status ------------------------------------------- */
#status {
  font-family: var(--dr-font-mono);
  font-size: var(--dr-text-sm);
  font-weight: 700;
  margin-top: var(--dr-space-md);
  min-height: 1.6em;
}

/* --- Preset selector (settings page) ------------------------------------ */
.preset-selector {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--dr-space-md);
  margin: var(--dr-space-lg) 0;
}

.preset-option {
  cursor: pointer;
}

.preset-option input[type="radio"] {
  display: none;
}

.preset-card {
  border: var(--dr-border);
  border-radius: var(--dr-radius);
  padding: var(--dr-space-md);
  background: var(--dr-surface-base);
  box-shadow: var(--dr-shadow-offset-sm);
  transition:
    border-color var(--dr-transition-fast),
    background-color var(--dr-transition-fast),
    box-shadow var(--dr-transition-fast);
}

.preset-card h3 {
  color: var(--dr-text-secondary);
  margin: 0 0 var(--dr-space-xs);
}

.preset-card p {
  margin: 0;
  color: var(--dr-text-tertiary);
}

@media (hover: hover) {
  .preset-option:hover .preset-card {
    border-color: var(--dr-copper-trace);
    transform: translate(-2px, -2px);
    box-shadow:
      var(--dr-shadow-hover-md),
      var(--dr-shadow-inner-highlight);
  }
}

.preset-option:focus-within .preset-card {
  border-color: var(--dr-copper-trace);
  box-shadow:
    var(--dr-shadow-hover-md),
    var(--dr-shadow-inner-highlight);
}

.preset-card .preset-label {
  font-size: var(--dr-text-sm);
}

.preset-card .preset-desc {
  margin-top: var(--dr-space-xs);
}

.preset-option input[type="radio"]:checked + .preset-card {
  border-color: var(--dr-success);
  background: rgba(var(--dr-success-rgb), 0.08);
  box-shadow:
    var(--dr-shadow-offset-md),
    0 0 12px rgba(var(--dr-success-rgb), 0.2);
}

.preset-option input[type="radio"]:checked + .preset-card h3 {
  color: var(--dr-success);
}

/* --- Angled clip path for hero moments ---------------------------------- */
.dr-hero {
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - 3vw),
    75% 100%,
    50% calc(100% - 3vw),
    25% 100%,
    0 calc(100% - 3vw)
  );
}

/* --- Top bar inside cards for extra personality ------------------------- */
.card-accent-top {
  border-top: var(--dr-border-thick);
}

/* --- Responsive tweaks -------------------------------------------------- */
.auth-options {
  display: flex;
  flex-direction: column;
  gap: var(--dr-space-md);
  margin-top: var(--dr-space-md);
}

.auth-options .button {
  width: 100%;
}

.auth-hint {
  font-size: var(--dr-text-xs);
  margin-top: var(--dr-space-xs);
  color: var(--dr-text-tertiary);
}

.field-hint {
  font-size: var(--dr-text-xs);
  margin-bottom: var(--dr-space-md);
  color: var(--dr-text-tertiary);
}

.field-error {
  font-size: var(--dr-text-xs);
  color: var(--dr-error);
  margin-top: calc(-1 * var(--dr-space-sm));
  margin-bottom: var(--dr-space-md);
}

.inline-form {
  display: inline;
}

.nav-actions {
  display: flex;
  gap: var(--dr-space-sm);
  align-items: center;
  flex-wrap: wrap;
}

.site-actions {
  display: flex;
  align-items: center;
  gap: var(--dr-space-xs);
}

.hidden {
  display: none !important;
}

@media (max-width: 640px) {
  body {
    padding: var(--dr-space-md) var(--dr-space-sm) var(--dr-space-xl);
  }

  .top-actions {
    flex-direction: column;
    gap: var(--dr-space-md);
  }

  .top-actions > div:last-child {
    display: flex;
    flex-wrap: wrap;
    gap: var(--dr-space-sm);
  }

  .preset-selector {
    grid-template-columns: 1fr;
  }

  h1 {
    font-size: var(--dr-text-lg);
  }

  /* --- Responsive card-table pattern ----------------------------------- */
  /* On mobile, collapse table rows into stacked cards with labeled fields */
  .responsive-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .responsive-table table {
    border: none;
  }

  .responsive-table tbody tr {
    display: block;
    background: var(--dr-surface-elevated);
    border: var(--dr-border);
    border-radius: var(--dr-radius);
    box-shadow: var(--dr-shadow-offset-sm);
    padding: var(--dr-space-md);
    margin-bottom: var(--dr-space-md);
  }

  .responsive-table tbody tr:nth-child(odd),
  .responsive-table tbody tr:nth-child(even) {
    background: var(--dr-surface-elevated);
  }

  .responsive-table tbody tr:hover {
    background: var(--dr-surface-highlight);
  }

  .responsive-table td {
    display: flex;
    align-items: baseline;
    gap: var(--dr-space-sm);
    padding: var(--dr-space-xs) 0;
    border-bottom: var(--dr-border-subtle);
    font-size: var(--dr-text-sm);
  }

  .responsive-table td:last-child {
    border-bottom: none;
  }

  .responsive-table td::before {
    content: attr(data-label);
    font-family: var(--dr-font-heading);
    font-weight: 700;
    font-size: var(--dr-text-xs);
    letter-spacing: var(--dr-letter-spacing);
    color: var(--dr-text-tertiary);
    text-transform: uppercase;
    min-width: 5.5rem;
    flex-shrink: 0;
  }

  /* Cells without a label (e.g. Actions column) don't get a pseudo */
  .responsive-table td[data-label=""]::before,
  .responsive-table td:not([data-label])::before {
    content: none;
  }

  .responsive-table td[data-label=""],
  .responsive-table td:not([data-label]) {
    justify-content: flex-start;
    padding-top: var(--dr-space-sm);
    border-bottom: none;
  }

  .responsive-table .site-actions {
    gap: var(--dr-space-sm);
  }

  .responsive-table .site-actions button,
  .responsive-table .site-actions .button {
    flex: 1;
    min-height: 44px;
  }

  /* Full-width mono cells on mobile so code doesn't get clipped */
  .responsive-table .mono {
    max-width: none;
    word-break: break-all;
  }

  /* Hide the scroll wrapper on mobile — we don't need it with cards */
  .responsive-table .table-wrap {
    overflow-x: visible;
  }
}

/* ── Light Mode (Gruvbox Light Soft) ─────────────────────────── */
@media (prefers-color-scheme: light) {
  :root {
    --dr-surface-base: #f2e5bc;
    --dr-surface-secondary: #ebdbb2;
    --dr-surface-elevated: #d5c4a1;
    --dr-surface-highlight: #bdae93;
    --dr-surface-active: #a89984;

    --dr-text-primary: #282828;
    --dr-text-secondary: #504945;
    --dr-text-tertiary: #585249;  /* darkened from #665c54 for WCAG AA on base/elevated; 3.55:1 on highlight (AA Large) */
    --dr-text-link: #076678;
    --dr-text-link-hover: #9d0006;
    --dr-text-on-accent: #f2e5bc;
    --dr-text-muted: rgba(40, 40, 40, 0.4);

    --dr-accent: #9d0006;
    --dr-accent-secondary: #af3a03;
    --dr-focus-ring: #b57614;

    --dr-success: #6b660d;  /* darkened from #79740e for WCAG AA 4.73:1 on base */
    --dr-warning: #8f5c10;  /* darkened from #b57614 for WCAG AA 4.51:1 on base */
    --dr-error: #9d0006;
    --dr-critical: #af3a03;
    --dr-info: #427b58;

    --dr-border: 2px solid #bdae93;
    --dr-border-thick: 4px solid #bdae93;
    --dr-border-subtle: 1px solid #d5c4a1;
    --dr-border-focus: 2px solid #b57614;

    --dr-bg-rgb: 242, 229, 188;
    --dr-accent-rgb: 157, 0, 6;
    --dr-success-rgb: 107, 102, 13;  /* matches --dr-success #6b660d */
    --dr-error-rgb: 157, 0, 6;
    --dr-warning-rgb: 143, 92, 16;  /* matches --dr-warning #8f5c10 */
    --dr-highlight: rgba(0, 0, 0, 0.06);

    --dr-shadow-offset-sm: 2px 2px 0 0 #bdae93;
    --dr-shadow-offset-md: 3px 3px 0 0 #bdae93;
    --dr-shadow-offset-lg: 4px 4px 0 0 #bdae93;
    --dr-shadow-offset-xl: 6px 6px 0 0 #bdae93;
    --dr-shadow-hover-sm: 3px 3px 0 0 #a89984;
    --dr-shadow-hover-md: 4px 4px 0 0 #a89984;
    --dr-shadow-hover-lg: 6px 6px 0 0 #a89984;
    --dr-shadow-active: 0 0 0 0 #bdae93;
    --dr-shadow-inner-highlight: inset 0 -1px 0 var(--dr-highlight);
    --dr-shadow-accent-glow: 0 0 12px rgba(157, 0, 6, 0.25);

    --dr-ghost-pixel: #282828;
    --dr-phosphor-smoke: #504945;
    --dr-phantom-current: #076678;
    --dr-corrupted-cache: #427b58;
    --dr-copper-trace: #665c54;
    --dr-fatal-error: #504945;
    --dr-rouge-signal: #665c54;
    --dr-amber-alert: #9d0006;
    --dr-firewall-breach: #af3a03;
    --dr-rust: #9d0006;
    --dr-kernel-panic: #af3a03;
    --dr-data-rot: #8f3f71;
    --dr-bricked-board: #665c54;
    --dr-dark-packet: #bdae93;
    --dr-daemon-blood: #665c54;
    --dr-bad-sector: #d5c4a1;
    --dr-core-meltdown: #ebdbb2;
    --dr-null-pointer: #ebdbb2;
    --dr-horizon: #f2e5bc;

    --dr-memory-leek: #6b660d;
    --dr-memory-leek-dim: #6b660d;
    --dr-memory-leek-bright: #6b660d;
    --dr-stack-overglow: #b57614;
    --dr-stack-overglow-dim: #b57614;
    --dr-stack-overglow-bright: #b57614;
    --dr-blue-screen: #076678;
    --dr-dead-thread: #427b58;
    --dr-dead-thread-dim: #427b58;
    --dr-thermal-throttle: #af3a03;
    --dr-fractured-shell: #8f3f71;
  }

  body::before {
    opacity: 0.03;
  }

  a:visited {
    color: var(--dr-data-rot);
  }

  a:active {
    color: var(--dr-accent);
  }

  .card::after,
  .edit-modal::after,
  .confirm-dialog::after {
    background: repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgba(var(--dr-accent-rgb), 0.02) 2px,
      rgba(var(--dr-accent-rgb), 0.02) 4px
    );
  }

  input[type="text"],
  input[type="password"] {
    border-color: var(--dr-surface-highlight);
    background: var(--dr-surface-base);
    color: var(--dr-text-primary);
  }

  input[type="text"]:focus,
  input[type="password"]:focus {
    border-color: var(--dr-accent);
    box-shadow:
      0 0 0 1px rgba(var(--dr-accent-rgb), 0.3),
      inset 0 1px 2px rgba(0, 0, 0, 0.1);
    outline: 2px solid var(--dr-focus-ring);
    outline-offset: 2px;
  }

  input[disabled] {
    background: var(--dr-surface-highlight);
    color: var(--dr-text-tertiary);
    border-color: var(--dr-surface-elevated);
  }

  button,
  .button {
    background: var(--dr-accent);
    color: var(--dr-text-on-accent);
  }

  button:hover,
  .button:hover {
    background: var(--dr-accent-secondary);
  }

  button:disabled {
    background: var(--dr-surface-elevated);
    color: var(--dr-text-muted);
  }

  button.secondary,
  .button.secondary {
    background: transparent;
    color: var(--dr-text-secondary);
    border: 2px solid var(--dr-dark-packet);
  }

  button.secondary:hover,
  .button.secondary:hover {
    border-color: var(--dr-accent);
    color: var(--dr-text-primary);
    background: var(--dr-surface-highlight);
  }

  button.ghost,
  .button.ghost {
    background: transparent;
    color: var(--dr-text-link);
    border: 2px solid var(--dr-copper-trace);
  }

  button.ghost:hover,
  .button.ghost:hover {
    border-color: var(--dr-accent);
    color: var(--dr-text-primary);
    background: var(--dr-surface-highlight);
  }

  button.danger {
    background: var(--dr-error);
  }

  button.danger:hover {
    background: var(--dr-critical);
  }

  .error {
    background: rgba(var(--dr-error-rgb), 0.08);
    border-color: var(--dr-dark-packet);
    border-left-color: var(--dr-error);
  }

  .blur {
    filter: blur(9px);
  }

  .blur:hover,
  .blur:focus {
    filter: none;
    opacity: 1;
  }

  .divider {
    background: repeating-linear-gradient(
      45deg,
      var(--dr-dark-packet),
      var(--dr-dark-packet) 8px,
      transparent 8px,
      transparent 16px
    );
  }

  .pill {
    background: rgba(var(--dr-accent-rgb), 0.1);
    color: var(--dr-text-primary);
    border-color: rgba(var(--dr-accent-rgb), 0.25);
  }

  .preset-card {
    background: var(--dr-surface-base);
  }

  .preset-option input[type="radio"]:checked + .preset-card {
    background: rgba(var(--dr-success-rgb), 0.08);
    box-shadow:
      var(--dr-shadow-offset-md),
      0 0 12px rgba(var(--dr-success-rgb), 0.15);
  }

  ::-webkit-scrollbar-thumb {
    background: var(--dr-surface-highlight);
    border-color: var(--dr-surface-secondary);
  }

  ::-webkit-scrollbar-thumb:hover {
    background: var(--dr-accent);
  }

  * {
    scrollbar-color: var(--dr-surface-highlight) transparent;
  }

  ::selection {
    background: var(--dr-accent);
    color: var(--dr-text-on-accent);
  }
}