.live-card-preview {
  --rail-bg: #1d232f;
  --rail-bg-soft: #252c3a;
  --rail-text: #aab2c0;
  --rail-text-strong: #e8ebf0;
  --rail-line: #313947;
  --accent-bright: #2dd4bf;

  --h-bg: #dde1e9;
  --h-surface: #ffffff;
  --h-surface-soft: #f7f8fa;
  --h-panel: #e7ebf2;        /* recessed library panel so the white cards pop */
  --card-hover-mix: 14%;     /* exam-card hover tint strength */
  --h-text: #1f2733;
  --h-text-soft: #5b6573;
  --h-text-faint: #8d95a3;
  --h-line: #e3e6ea;
  --h-line-strong: #cfd4db;

  --h-accent: #0f766e;
  --h-accent-deep: #0b5d57;
  --h-accent-tint: #ecf6f4;
  --h-accent-chip-border: #cde7e2;

  --h-good: #1f7a4d;
  --h-good-tint: #ecf6f0;
  --h-good-line: #cfe5db;
  --h-bad: #b03a3a;
  --h-bad-tint: #faeeee;
  --h-bad-line: #ecd2d2;
  --h-flag: #b07d2b;
  --h-flag-tint: #fdf6e7;
  --h-flag-line: #ecdcb8;

  --h-btn-primary-text: #ffffff;
  --h-card-shadow: 0 1px 2px rgba(31, 39, 51, 0.04);
  --h-overlay: rgba(15, 23, 42, 0.55);
  --h-radius: 8px;
  --h-radius-lg: 12px;
  --h-font-num: 'Cascadia Mono', Consolas, ui-monospace, monospace;
}

.live-card-preview[data-theme="dark"] {
  --rail-bg: #161b24;
  --rail-bg-soft: #1f2530;
  --rail-line: #2b3340;

  --h-bg: #10141b;
  --h-surface: #1a212c;
  --h-surface-soft: #1f2733;
  --h-panel: var(--h-surface);  /* dark: panel sits flush with the surface */
  --card-hover-mix: 11%;
  --h-text: #e2e7ee;
  --h-text-soft: #a8b1bf;
  --h-text-faint: #79828f;
  --h-line: #28303d;
  --h-line-strong: #39434f;

  --h-accent: #2bb3a3;
  --h-accent-deep: #4ecdbd;
  --h-accent-tint: #182d2b;
  --h-accent-chip-border: #28534d;

  --h-good: #5fc28e;
  --h-good-tint: #1a2c23;
  --h-good-line: #2b4a3a;
  --h-bad: #dd8f8f;
  --h-bad-tint: #2f2022;
  --h-bad-line: #4d3032;
  --h-flag: #d3aa64;
  --h-flag-tint: #2e271a;
  --h-flag-line: #4a3e26;

  --h-btn-primary-text: #0d1a18;
  --h-card-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  --h-overlay: rgba(0, 0, 0, 0.6);
}


.exam-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 0.9rem;
}
.exam-card {
  position: relative;
  background: var(--h-surface);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 1px solid var(--h-line);
  border-radius: var(--h-radius-lg);
  padding: 1.1rem 1.2rem;
  box-shadow: var(--h-card-shadow);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  transition: border-color 0.15s, background-color 0.15s, transform 0.15s;
}
/* modern-enhancements.css paints a full-card ::before overlay for an animated
   border; it swallows clicks once homepage-styles.css no longer overrides it */
.exam-card::before { content: none !important; animation: none !important; }

/* Per-exam accent: homepage.js assigns exam-c0..c11 by library position.
   A muted hue tints the top strip, code badge and icon so cards scan apart
   without reintroducing the old rainbow. */
.exam-card { border-top: 3px solid var(--card-accent, var(--h-line-strong)); }
.exam-c0  { --card-accent: #12877d; }
.exam-c1  { --card-accent: #5b6bbf; }
.exam-c2  { --card-accent: #a87926; }
.exam-c3  { --card-accent: #4e8a55; }
.exam-c4  { --card-accent: #a85585; }
.exam-c5  { --card-accent: #3e7ca6; }
.exam-c6  { --card-accent: #b05c4a; }
.exam-c7  { --card-accent: #7a8c3a; }
.exam-c8  { --card-accent: #8a64b8; }
.exam-c9  { --card-accent: #3a8fa3; }
.exam-c10 { --card-accent: #b04a6e; }
.exam-c11 { --card-accent: #74787e; }
.live-card-preview[data-theme="dark"] .exam-c0   { --card-accent: #3bb8aa; }
.live-card-preview[data-theme="dark"] .exam-c1   { --card-accent: #8b97e0; }
.live-card-preview[data-theme="dark"] .exam-c2   { --card-accent: #d3aa64; }
.live-card-preview[data-theme="dark"] .exam-c3   { --card-accent: #7dbb84; }
.live-card-preview[data-theme="dark"] .exam-c4   { --card-accent: #cf8ab4; }
.live-card-preview[data-theme="dark"] .exam-c5   { --card-accent: #74aed0; }
.live-card-preview[data-theme="dark"] .exam-c6   { --card-accent: #d99181; }
.live-card-preview[data-theme="dark"] .exam-c7   { --card-accent: #aabf6a; }
.live-card-preview[data-theme="dark"] .exam-c8   { --card-accent: #b596dd; }
.live-card-preview[data-theme="dark"] .exam-c9   { --card-accent: #6fbecf; }
.live-card-preview[data-theme="dark"] .exam-c10 { --card-accent: #d8849f; }
.live-card-preview[data-theme="dark"] .exam-c11 { --card-accent: #9aa0a8; }
.exam-card[class*="exam-c"] .exam-badge {
  color: color-mix(in srgb, var(--card-accent) 75%, var(--h-text));
  background: color-mix(in srgb, var(--card-accent) 10%, var(--h-surface));
  border-color: color-mix(in srgb, var(--card-accent) 35%, transparent);
}
.exam-card[class*="exam-c"] .exam-icon { color: var(--card-accent); }
/* hover tints the whole card with its own palette hue, not just the border */
/* Hover tint uses the per-theme --card-hover-mix (14% light, 11% dark) so the
   wash is strong enough over near-white in light mode. Flat, no glow/shadow. */
.exam-card:hover {
  border-color: color-mix(in srgb, var(--card-accent, var(--h-accent)) 70%, transparent);
  background: color-mix(in srgb, var(--card-accent, var(--h-accent)) var(--card-hover-mix), var(--h-surface));
  transform: translateY(-1px);
}
.exam-card:focus-visible { outline: 2px solid var(--h-accent); outline-offset: 2px; }
.exam-card.selected { border-color: var(--h-accent); box-shadow: 0 0 0 1px var(--h-accent); }
.exam-card .exam-badge {
  align-self: flex-start;
  font-family: var(--h-font-num);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--h-accent-deep);
  background: var(--h-accent-tint);
  border: 1px solid var(--h-accent-chip-border);
  border-radius: 6px;
  padding: 0.16rem 0.5rem;
  text-transform: none;
}
.exam-card .exam-icon {
  position: absolute;
  top: 1.05rem;
  right: 2.6rem;
  font-size: 1rem;
  color: var(--h-text-faint);
}
.exam-delete {
  position: absolute;
  top: 0.8rem;
  right: 0.8rem;
  background: none;
  border: none;
  color: var(--h-text-faint);
  cursor: pointer;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity 0.15s, color 0.15s;
}
.exam-card:hover .exam-delete, .exam-delete:focus-visible { opacity: 1; }
.exam-delete:hover { color: var(--h-bad); }
.exam-delete:focus-visible { outline: 2px solid var(--h-accent); outline-offset: 1px; }
.exam-card--preview .exam-preview-flag {
  position: absolute;
  top: 1.05rem;
  right: 2.6rem;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--h-flag);
  border: 1px solid var(--h-flag);
  border-radius: 5px;
  padding: 0.1rem 0.4rem;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.exam-card--preview .exam-icon { display: none; }
.exam-title { font-size: 1rem; font-weight: 700; color: var(--h-text); line-height: 1.3; }
.exam-subtitle { font-size: 0.8125rem; color: var(--h-text-soft); line-height: 1.4; }

.exam-taxonomy { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.15rem; }
.exam-taxonomy-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--h-text-soft);
  background: var(--h-surface-soft);
  border: 1px solid var(--h-line);
  border-radius: 999px;
  padding: 0.14rem 0.5rem;
}
.exam-taxonomy-chip i { font-size: 0.6rem; color: var(--h-text-faint); }
.exam-taxonomy-chip--code { color: var(--h-accent-deep); background: var(--h-accent-tint); border-color: var(--h-accent-chip-border); }
.exam-taxonomy-chip--code i { color: var(--h-accent); }

.exam-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--h-line);
  border-radius: var(--h-radius);
  overflow: hidden;
  margin-top: 0.3rem;
}
.exam-stat {
  background: var(--h-surface-soft);
  text-align: center;
  padding: 0.45rem 0.25rem;
  display: flex;
  flex-direction: column;
}
.exam-stat + .exam-stat { border-left: 1px solid var(--h-line); }
.exam-stat-number {
  font-family: var(--h-font-num);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--h-text);
  font-variant-numeric: tabular-nums;
}
.exam-stat-label {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--h-text-faint);
}
.exam-total-info, .exam-study-info { font-size: 0.74rem; color: var(--h-text-faint); }
.exam-card-offer,
.pro-modal-offer {
  position: relative;
  overflow: hidden;
  background: var(--h-flag-tint);
  border: 1px solid var(--h-flag-line);
  border-left: 3px solid var(--h-flag);
  border-radius: var(--h-radius);
  color: var(--h-text);
}
.exam-card-offer {
  margin-top: 0.45rem;
  padding: 0.58rem 0.65rem 0.55rem;
}
.pro-modal-offer {
  margin: 0 0 1rem;
  padding: 0.72rem 0.8rem 0.68rem;
}
.offer-topline,
.offer-prices {
  display: flex;
  align-items: baseline;
}
.offer-topline { justify-content: space-between; gap: 0.7rem; }
.offer-label {
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--h-flag);
}
.offer-discount {
  font-family: var(--h-font-num);
  font-size: 0.78rem;
  color: var(--h-flag);
}
.offer-prices { gap: 0.45rem; margin-top: 0.18rem; }
.offer-price-old {
  font-family: var(--h-font-num);
  font-size: 0.78rem;
  color: var(--h-text-faint);
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
}
.offer-price-arrow { color: var(--h-text-faint); font-size: 0.72rem; }
.offer-price-new {
  font-family: var(--h-font-num);
  font-size: 1.1rem;
  line-height: 1;
  color: var(--h-text);
  font-variant-numeric: tabular-nums;
}
.offer-meta {
  margin-top: 0.32rem;
  font-size: 0.68rem;
  color: var(--h-text-soft);
}
.offer-code {
  font-family: var(--h-font-num);
  font-size: 0.67rem;
  font-weight: 800;
  color: var(--h-flag);
  background: color-mix(in srgb, var(--h-flag) 10%, transparent);
  border: 1px dashed var(--h-flag-line);
  border-radius: 4px;
  padding: 0.08rem 0.24rem;
}
.exam-feature {
  font-size: 0.72rem;
  color: var(--h-text-faint);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.exam-card-actions { display: flex; gap: 0.5rem; margin-top: 0.45rem; }
.exam-card-start, .exam-card-study, .exam-card-unlock {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font: inherit;
  font-size: 0.8438rem;
  font-weight: 600;
  border-radius: var(--h-radius);
  padding: 0.5rem 0.6rem;
  min-height: 38px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.exam-card-start { background: var(--h-accent); color: var(--h-btn-primary-text); }
.exam-card-start:hover { background: var(--h-accent-deep); }
.exam-card-study { background: var(--h-surface); border-color: var(--h-line-strong); color: var(--h-text-soft); }
.exam-card-study:hover { border-color: var(--h-accent); color: var(--h-accent); }
.exam-card-unlock { background: var(--h-flag-tint); border-color: var(--h-flag-line); color: var(--h-flag); }
.exam-card-unlock:hover { border-color: var(--h-flag); }
.exam-card-labs {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: 100%;
  margin-top: 0.45rem;
  font: inherit;
  font-size: 0.8438rem;
  font-weight: 600;
  border-radius: var(--h-radius);
  padding: 0.45rem 0.6rem;
  min-height: 36px;
  text-decoration: none;
  background: var(--h-surface);
  border: 1px solid var(--h-line-strong);
  color: var(--h-text-soft);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.exam-card-labs:hover { border-color: var(--h-accent); color: var(--h-accent); }
.exam-card-labs:focus-visible { outline: 2px solid var(--h-accent); outline-offset: 2px; }
.exam-card-start:focus-visible, .exam-card-study:focus-visible, .exam-card-unlock:focus-visible {
  outline: 2px solid var(--h-accent);
  outline-offset: 2px;
}
.exam-card.importing-exam { opacity: 0.6; pointer-events: none; }