/* IL Connect theme tokens.
   Loaded on catalog / landing / guide. Auth pages keep auth-shell.css. */

:root,
html[data-theme="light"] {
  color-scheme: light;

  --il-bg-page: #eef3f9;
  --il-bg-elevated: #f7f9fc;
  --il-bg-card: #ffffff;
  --il-bg-control: #f4f8ff;
  --il-border: rgba(88, 130, 196, 0.28);
  --il-border-strong: rgba(15, 70, 160, 0.36);

  --il-text-primary: #101828;
  --il-text-secondary: #344054;
  --il-text-muted: #5b6b80;
  --il-text-placeholder: #7a8799;
  /* Foreground for permanently dark surfaces (hero panels, dark auth card). */
  --il-text-on-dark: #f8fbff;
  --il-text-on-dark-secondary: #c7d7ef;
  --il-text-on-dark-muted: #9dc4ff;
  --il-text-on-accent: #ffffff;

  --il-surface-hero: linear-gradient(138deg, #071224 0%, #0a1d3d 54%, #07172f 100%);
  --il-shadow-panel: 0 18px 42px rgba(7, 18, 36, 0.16);

  --il-accent: #0f62fe;
  --il-accent-hover: #0043ce;
  --il-success: #1f7a46;
  --il-danger: #8a2f2f;
  --il-gold: #8a6d1f;
  --il-gold-ink: #3d3010;

  --bg-0: var(--il-bg-page);
  --bg-1: var(--il-bg-elevated);
  --ink: var(--il-text-primary);
  --ink-soft: var(--il-text-secondary);
  --muted: var(--il-text-muted);
  --blue-deep: var(--il-accent-hover);

  --ilc-ink: var(--il-text-primary);
  --ilc-ink-soft: var(--il-text-secondary);
  --ilc-muted: var(--il-text-muted);
  --ilc-line: var(--il-border);
  --ilc-bg-fallback: var(--il-bg-page);
  --ilc-surface: rgba(255, 255, 255, 0.82);
  --ilc-surface-solid: rgba(255, 255, 255, 0.94);
  --ilc-atmosphere-overlay: rgba(244, 248, 255, 0.16);
  --ilc-atmosphere-mid: rgba(244, 248, 255, 0.1);
  --ilc-atmosphere-bottom: rgba(238, 244, 252, 0.08);
  --ilc-atmosphere-veil: rgba(244, 248, 255, 0.12);
  --ilc-hero-wash: rgba(244, 248, 255, 0.42);
  --ilc-hero-bg: rgba(248, 251, 255, 0.72);
  --ilc-panel-bg: rgba(255, 255, 255, 0.86);
  --ilc-card-bg: var(--il-bg-card);
  --ilc-card-body-top: #ffffff;
  --ilc-card-body-bottom: #f6f9ff;
  --ilc-pagination-bg: rgba(255, 255, 255, 0.9);
  --ilc-footer-bg: rgba(248, 251, 255, 0.9);
  --ilc-input-bg: var(--il-bg-control);
  --ilc-elevated: var(--il-bg-elevated);
  --ilc-chip: #f4f8ff;
  --ilc-icon-well: linear-gradient(145deg, #fff, #eaf2ff);
  --ilc-border-cool: var(--il-border);
  --ilc-wallpaper-scale: 110%;
  --ilc-content-calm:
    radial-gradient(ellipse 56% 46% at 50% 20%, rgba(248, 251, 255, 0.82), transparent 70%),
    radial-gradient(ellipse 92% 68% at 50% 38%, rgba(238, 244, 252, 0.48), transparent 76%);
  --ilc-edge-soft:
    linear-gradient(90deg, rgba(238, 244, 252, 0.58) 0%, transparent 12%, transparent 88%, rgba(238, 244, 252, 0.58) 100%);
}

html[data-theme="dark"] {
  color-scheme: dark;
  background-color: #071224;

  --il-bg-page: #071224;
  --il-bg-elevated: #0d1830;
  --il-bg-card: #101c34;
  --il-bg-control: #0d1830;
  --il-border: rgba(148, 180, 229, 0.32);
  --il-border-strong: rgba(155, 193, 255, 0.55);

  --il-text-primary: #f4f7fb;
  --il-text-secondary: #d5deeb;
  --il-text-muted: #c5d0e0;
  --il-text-placeholder: #9aa9bf;
  --il-text-on-dark: #f8fbff;
  --il-text-on-dark-secondary: #c7d7ef;
  --il-text-on-dark-muted: #9dc4ff;
  --il-text-on-accent: #ffffff;

  --il-surface-hero: linear-gradient(138deg, #071224 0%, #0a1d3d 54%, #07172f 100%);
  --il-shadow-panel: 0 22px 48px rgba(0, 0, 0, 0.35);

  --il-accent: #5b8def;
  --il-accent-hover: #9ec1ff;
  --il-success: #3dca74;
  --il-danger: #f0a0a0;
  --il-gold: #e8c547;
  --il-gold-ink: #f4e8c0;

  --bg-0: var(--il-bg-page);
  --bg-1: var(--il-bg-elevated);
  --ink: var(--il-text-primary);
  --ink-soft: var(--il-text-secondary);
  --muted: var(--il-text-muted);
  --blue-deep: var(--il-accent-hover);

  --ilc-ink: var(--il-text-primary);
  --ilc-ink-soft: var(--il-text-secondary);
  --ilc-muted: var(--il-text-muted);
  --ilc-line: var(--il-border);
  --ilc-bg-fallback: var(--il-bg-page);
  --ilc-surface: rgba(12, 22, 40, 0.92);
  --ilc-surface-solid: rgba(12, 22, 40, 0.96);
  --ilc-atmosphere-overlay: rgba(7, 18, 36, 0.28);
  --ilc-atmosphere-mid: rgba(7, 18, 36, 0.18);
  --ilc-atmosphere-bottom: rgba(5, 14, 28, 0.12);
  --ilc-atmosphere-veil: rgba(7, 18, 36, 0.2);
  --ilc-hero-wash: rgba(10, 20, 38, 0.55);
  --ilc-hero-bg: rgba(10, 20, 38, 0.72);
  --ilc-panel-bg: rgba(12, 22, 40, 0.88);
  --ilc-card-bg: var(--il-bg-card);
  --ilc-card-body-top: #13233f;
  --ilc-card-body-bottom: #0e1a30;
  --ilc-pagination-bg: rgba(12, 22, 40, 0.94);
  --ilc-footer-bg: rgba(8, 16, 32, 0.94);
  --ilc-input-bg: var(--il-bg-control);
  --ilc-elevated: var(--il-bg-elevated);
  --ilc-chip: #1a3058;
  --ilc-icon-well: linear-gradient(145deg, #1a3058, #152848);
  --ilc-border-cool: var(--il-border);
  --ilc-wallpaper-scale: 110%;
  --ilc-content-calm:
    radial-gradient(ellipse 56% 46% at 50% 20%, rgba(8, 16, 32, 0.72), transparent 70%),
    radial-gradient(ellipse 92% 68% at 50% 38%, rgba(7, 18, 36, 0.4), transparent 76%);
  --ilc-edge-soft:
    linear-gradient(90deg, rgba(7, 18, 36, 0.55) 0%, transparent 12%, transparent 88%, rgba(7, 18, 36, 0.55) 100%);
}

html[data-theme="light"] {
  color-scheme: light;
  background-color: var(--il-bg-page);
}

html[data-theme="dark"] body.ilc-site,
html[data-theme="light"] body.ilc-site {
  color: var(--il-text-primary);
  background-color: var(--il-bg-page);
}

html[data-theme="dark"] .ilc-site-header,
html[data-theme="dark"] body.ilc-site .ilc-site-header,
html[data-theme="light"] .ilc-site-header,
html[data-theme="light"] body.ilc-site .ilc-site-header {
  background: var(--il-bg-elevated);
  border-bottom-color: var(--il-border);
}

html[data-theme="dark"] .ilc-nav-link,
html[data-theme="dark"] .ilc-brand-name,
html[data-theme="dark"] .ilc-brand-tagline,
html[data-theme="light"] .ilc-nav-link,
html[data-theme="light"] .ilc-brand-name,
html[data-theme="light"] .ilc-brand-tagline {
  color: var(--il-text-secondary);
}

html[data-theme="dark"] .ilc-nav-link:hover,
html[data-theme="dark"] .ilc-nav-link:focus-visible {
  color: var(--il-accent-hover);
  background: rgba(26, 48, 88, 0.72);
  box-shadow: none;
}

html[data-theme="light"] .ilc-nav-link:hover,
html[data-theme="light"] .ilc-nav-link:focus-visible {
  color: var(--il-accent-hover);
  background: rgba(255, 255, 255, 0.9);
}

html[data-theme="dark"] .ilc-nav-link--primary,
html[data-theme="dark"].ilc-landing .ilc-nav-link--primary,
html[data-theme="dark"] body.ilc-landing .ilc-nav-link--primary {
  background: linear-gradient(180deg, #1a3058, #12243f);
  border-color: rgba(15, 98, 254, 0.4);
  color: #c6dcff;
  box-shadow: none;
}

html[data-theme="light"] .ilc-nav-link--primary {
  background: linear-gradient(180deg, #fff, #f4f8ff);
  border-color: rgba(15, 98, 254, 0.18);
  color: var(--il-accent-hover);
}

html[data-theme="dark"] .ilc-nav-toggle,
html[data-theme="light"] .ilc-nav-toggle {
  background: var(--il-bg-control);
  color: var(--il-text-primary);
  border-color: var(--il-border);
}

html[data-theme="dark"] .ilc-customer-name,
html[data-theme="light"] .ilc-customer-name {
  color: var(--il-text-primary);
}

html[data-theme="dark"] .ilc-sign-out-btn,
html[data-theme="light"] .ilc-sign-out-btn {
  color: var(--il-text-secondary);
}

html[data-theme="dark"] .ilc-sign-out-btn:hover,
html[data-theme="dark"] .ilc-sign-out-btn:focus-visible,
html[data-theme="light"] .ilc-sign-out-btn:hover,
html[data-theme="light"] .ilc-sign-out-btn:focus-visible {
  color: var(--il-text-primary);
}

html[data-theme="dark"] .ilc-founder-chip,
html[data-theme="dark"] .ilc-wholesale-chip {
  color-scheme: dark;
}

html[data-theme="dark"] .ilc-founder-chip {
  background: linear-gradient(135deg, #1f2a14, #162010);
  border-color: rgba(201, 162, 39, 0.5);
  color: var(--il-gold-ink);
  -webkit-text-fill-color: var(--il-gold-ink);
  box-shadow: none;
}

html[data-theme="dark"] .ilc-founder-chip .ilc-founder-chip-tier {
  color: var(--il-gold);
  -webkit-text-fill-color: var(--il-gold);
}

html[data-theme="dark"] .ilc-founder-chip .ilc-founder-chip-number {
  color: var(--il-gold-ink);
  -webkit-text-fill-color: var(--il-gold-ink);
}

html[data-theme="dark"] .ilc-wholesale-chip {
  background: linear-gradient(135deg, #152033, #101828);
  border-color: rgba(148, 180, 229, 0.5);
  color: var(--il-text-primary);
  -webkit-text-fill-color: var(--il-text-primary);
  box-shadow: none;
}

html[data-theme="dark"] .ilc-wholesale-chip .ilc-wholesale-chip-tier {
  color: var(--il-accent-hover);
  -webkit-text-fill-color: var(--il-accent-hover);
}

html[data-theme="dark"] .ilc-wholesale-chip .ilc-wholesale-chip-number {
  color: var(--il-text-primary);
  -webkit-text-fill-color: var(--il-text-primary);
}

html[data-theme="light"] .ilc-founder-chip,
html[data-theme="light"] .ilc-wholesale-chip {
  color-scheme: light;
}

html[data-theme="light"] .ilc-founder-chip {
  background: linear-gradient(135deg, rgba(253, 248, 235, 0.96), rgba(245, 236, 211, 0.92));
  border-color: rgba(201, 162, 39, 0.45);
  color: #3d3010;
  -webkit-text-fill-color: #3d3010;
}

html[data-theme="light"] .ilc-wholesale-chip {
  background: linear-gradient(135deg, #eef4fb, #e4eef8);
  border-color: rgba(88, 130, 196, 0.4);
  color: #102030;
  -webkit-text-fill-color: #102030;
}

html[data-theme="dark"] .ilc-footer-brand p,
html[data-theme="dark"] .ilc-footer-col a,
html[data-theme="dark"] .ilc-footer-note,
html[data-theme="dark"] .ilc-footer-legal p {
  color: var(--il-text-primary);
}

html[data-theme="dark"] .catalog-pricing-note,
html[data-theme="dark"] .ilc-footer-col strong,
html[data-theme="light"] .catalog-pricing-note {
  color: var(--il-text-secondary);
}

html[data-theme="dark"] .catalog-result-count,
html[data-theme="light"] .catalog-result-count {
  color: var(--il-text-muted);
  -webkit-text-fill-color: var(--il-text-muted);
}

html[data-theme="dark"] .catalog-clear-filters,
html[data-theme="light"] .catalog-clear-filters {
  color: var(--il-accent);
  -webkit-text-fill-color: var(--il-accent);
}

/*
 * Landing hero is a permanently dark surface in both page themes.
 * Never inherit page-level light-theme body ink here.
 */
.landing-hero,
html[data-theme="light"] .landing-hero,
html[data-theme="dark"] .landing-hero {
  color: var(--il-text-on-dark);
  background:
    radial-gradient(circle at 82% 26%, rgba(23, 111, 255, 0.34), transparent 28%),
    radial-gradient(circle at 48% 120%, rgba(201, 162, 39, 0.17), transparent 38%),
    var(--il-surface-hero);
}

.landing-hero h1,
html[data-theme="light"] .landing-hero h1,
html[data-theme="dark"] .landing-hero h1 {
  color: var(--il-text-on-dark);
  -webkit-text-fill-color: var(--il-text-on-dark);
}

.landing-hero .landing-lede,
html[data-theme="light"] .landing-hero .landing-lede,
html[data-theme="dark"] .landing-hero .landing-lede {
  color: var(--il-text-on-dark-secondary);
  -webkit-text-fill-color: var(--il-text-on-dark-secondary);
}

.landing-hero .landing-eyebrow,
html[data-theme="light"] .landing-hero .landing-eyebrow,
html[data-theme="dark"] .landing-hero .landing-eyebrow {
  color: var(--il-text-on-dark-muted);
  -webkit-text-fill-color: var(--il-text-on-dark-muted);
}

.landing-hero .landing-signals,
html[data-theme="light"] .landing-hero .landing-signals,
html[data-theme="dark"] .landing-hero .landing-signals {
  color: var(--il-text-on-dark-secondary);
}

.landing-hero .landing-btn-primary,
html[data-theme="light"] .landing-hero .landing-btn-primary,
html[data-theme="dark"] .landing-hero .landing-btn-primary {
  color: var(--il-text-on-accent);
  -webkit-text-fill-color: var(--il-text-on-accent);
}

.landing-hero .landing-btn-secondary,
html[data-theme="light"] .landing-hero .landing-btn-secondary,
html[data-theme="dark"] .landing-hero .landing-btn-secondary {
  border-color: rgba(255, 255, 255, 0.55);
  background: rgba(8, 18, 36, 0.62);
  color: var(--il-text-on-dark);
  -webkit-text-fill-color: var(--il-text-on-dark);
}

.landing-hero .landing-btn-secondary:hover,
html[data-theme="light"] .landing-hero .landing-btn-secondary:hover,
html[data-theme="dark"] .landing-hero .landing-btn-secondary:hover {
  background: rgba(8, 18, 36, 0.82);
  border-color: rgba(255, 255, 255, 0.75);
  color: var(--il-text-on-dark);
}

html[data-theme="dark"] .catalog-page-btn,
html[data-theme="light"] .catalog-page-btn {
  appearance: none;
  color-scheme: inherit;
  background: var(--il-bg-control);
  background-image: none;
  border-color: var(--il-border);
  color: var(--il-text-primary);
  -webkit-text-fill-color: var(--il-text-primary);
}

html[data-theme="dark"] .catalog-page-btn:focus-visible,
html[data-theme="dark"] .ilc-founder-chip:focus-visible,
html[data-theme="dark"] .ilc-wholesale-chip:focus-visible {
  outline: 2px solid var(--il-accent-hover);
  outline-offset: 2px;
}

html[data-theme="dark"] .ilc-commerce-card,
html[data-theme="light"] .ilc-commerce-card {
  background: var(--il-bg-card);
  border-color: var(--il-border);
  color: var(--il-text-primary);
}

html[data-theme="dark"] .ilc-commerce-card .commerce-name,
html[data-theme="dark"] .ilc-commerce-card .commerce-price-value,
html[data-theme="light"] .ilc-commerce-card .commerce-name,
html[data-theme="light"] .ilc-commerce-card .commerce-price-value {
  color: var(--il-text-primary);
  -webkit-text-fill-color: var(--il-text-primary);
}

html[data-theme="dark"] .ilc-commerce-card .commerce-category,
html[data-theme="dark"] .ilc-commerce-card .commerce-presentation,
html[data-theme="dark"] .ilc-commerce-card .commerce-label,
html[data-theme="dark"] .ilc-commerce-card .commerce-price-kicker,
html[data-theme="dark"] .ilc-commerce-card .commerce-price-note,
html[data-theme="dark"] .ilc-commerce-card .commerce-price-empty,
html[data-theme="dark"] .ilc-commerce-card .commerce-tags span,
html[data-theme="dark"] .ilc-commerce-card .commerce-secondary-sep,
html[data-theme="dark"] .ilc-commerce-card .commerce-coa,
html[data-theme="light"] .ilc-commerce-card .commerce-category,
html[data-theme="light"] .ilc-commerce-card .commerce-presentation,
html[data-theme="light"] .ilc-commerce-card .commerce-label,
html[data-theme="light"] .ilc-commerce-card .commerce-price-kicker,
html[data-theme="light"] .ilc-commerce-card .commerce-price-note {
  color: var(--il-text-muted);
  opacity: 1;
  -webkit-text-fill-color: var(--il-text-muted);
}

html[data-theme="dark"] .ilc-commerce-card .strength-pill,
html[data-theme="dark"] .ilc-commerce-card button.strength-pill,
html[data-theme="light"] .ilc-commerce-card .strength-pill,
html[data-theme="light"] .ilc-commerce-card button.strength-pill {
  appearance: none;
  color-scheme: inherit;
  background: var(--il-bg-control);
  border-color: var(--il-border);
  color: var(--il-text-primary);
}

html[data-theme="dark"] .ilc-commerce-card .commerce-stock.is-in,
html[data-theme="light"] .ilc-commerce-card .commerce-stock.is-in { color: var(--il-success); }
html[data-theme="dark"] .ilc-commerce-card .commerce-stock.is-low,
html[data-theme="light"] .ilc-commerce-card .commerce-stock.is-low { color: #9a6b12; }
html[data-theme="dark"] .ilc-commerce-card .commerce-stock.is-unavailable,
html[data-theme="light"] .ilc-commerce-card .commerce-stock.is-unavailable { color: var(--il-danger); }

html[data-theme="dark"] .guide-kicker,
html[data-theme="dark"] .area-card,
html[data-theme="dark"] .product-card,
html[data-theme="dark"] .shop-card,
html[data-theme="dark"] .result-card,
html[data-theme="dark"] .shortlist-drawer,
html[data-theme="dark"] .guide-footer,
html[data-theme="light"] .area-card,
html[data-theme="light"] .product-card,
html[data-theme="light"] .shop-card,
html[data-theme="light"] .result-card {
  background: var(--il-bg-card);
  color: var(--il-text-primary);
  border-color: var(--il-border);
}

html[data-theme="dark"] select,
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] input[type="text"] {
  color-scheme: dark;
  background: var(--il-bg-control);
  color: var(--il-text-primary);
  border-color: var(--il-border);
}

html[data-theme="light"] select,
html[data-theme="light"] input[type="number"],
html[data-theme="light"] input[type="search"],
html[data-theme="light"] input[type="text"] {
  color-scheme: light;
  background: var(--il-bg-control);
  color: var(--il-text-primary);
  border-color: var(--il-border);
}

html[data-theme="dark"] .shortlist-trigger,
html[data-theme="light"] .shortlist-trigger {
  background: var(--il-bg-elevated);
  border-color: var(--il-border);
  color: var(--il-text-primary);
}

html[data-theme="dark"] .shortlist-trigger strong,
html[data-theme="light"] .shortlist-trigger strong {
  color: var(--il-text-primary);
}

html[data-theme="dark"] .shortlist-trigger small,
html[data-theme="light"] .shortlist-trigger small {
  color: var(--il-text-muted);
}

html[data-theme="dark"] .ilc-redesign-member-btn,
html[data-theme="dark"] .ilc-redesign-member-panel {
  color-scheme: dark;
  background: var(--il-bg-control);
  border-color: var(--il-border);
  color: var(--il-text-primary);
  -webkit-text-fill-color: var(--il-text-primary);
  box-shadow: none;
}

html[data-theme="dark"] .ilc-redesign-member-btn strong {
  color: var(--il-gold);
  -webkit-text-fill-color: var(--il-gold);
}

html[data-theme="dark"] .ilc-redesign-member-btn small,
html[data-theme="dark"] .ilc-redesign-member-panel p,
html[data-theme="dark"] .ilc-redesign-member-panel a {
  color: var(--il-text-secondary);
  -webkit-text-fill-color: var(--il-text-secondary);
}

html[data-theme="light"] .ilc-redesign-member-btn,
html[data-theme="light"] .ilc-redesign-member-panel {
  color-scheme: light;
  background: #f7f4ea;
  border-color: rgba(201, 162, 39, 0.4);
  color: #3d3010;
  -webkit-text-fill-color: #3d3010;
}

html[data-theme="light"] .ilc-redesign-member-btn strong {
  color: #8a6d1f;
  -webkit-text-fill-color: #8a6d1f;
}

html[data-theme="light"] .ilc-redesign-member-btn small,
html[data-theme="light"] .ilc-redesign-member-panel p,
html[data-theme="light"] .ilc-redesign-member-panel a {
  color: #5c4a18;
  -webkit-text-fill-color: #5c4a18;
}

html[data-theme="dark"] .ilc-nav-actions {
  background: var(--il-bg-elevated);
  border-color: var(--il-border);
}

html[data-theme="light"] .ilc-nav-actions {
  background: rgba(255, 255, 255, 0.96);
  border-color: var(--il-border);
}

html[data-theme="dark"] .landing-route-card,
html[data-theme="dark"] .landing-featured-shell,
html[data-theme="light"] .landing-route-card,
html[data-theme="light"] .landing-featured-shell {
  background: var(--il-bg-card);
  border-color: var(--il-border);
  color: var(--il-text-primary);
  box-shadow: var(--il-shadow-panel);
}

html[data-theme="dark"] .landing-route-card h3,
html[data-theme="dark"] .landing-section-heading h2,
html[data-theme="dark"] .landing-featured-head h2,
html[data-theme="light"] .landing-route-card h3,
html[data-theme="light"] .landing-section-heading h2,
html[data-theme="light"] .landing-featured-head h2 {
  color: var(--il-text-primary);
}

html[data-theme="dark"] .landing-route-card p,
html[data-theme="dark"] .landing-section-heading p,
html[data-theme="dark"] .landing-featured-lede,
html[data-theme="dark"] .landing-disclaimer,
html[data-theme="dark"] .landing-kicker,
html[data-theme="dark"] .landing-card-link,
html[data-theme="light"] .landing-route-card p,
html[data-theme="light"] .landing-section-heading p,
html[data-theme="light"] .landing-featured-lede,
html[data-theme="light"] .landing-disclaimer,
html[data-theme="light"] .landing-kicker,
html[data-theme="light"] .landing-card-link {
  color: var(--il-text-secondary);
}

html[data-theme="dark"] .landing-featured-all.landing-btn-secondary,
html[data-theme="light"] .landing-featured-all.landing-btn-secondary {
  background: var(--il-bg-control);
  border-color: var(--il-border-strong);
  color: var(--il-text-primary);
  -webkit-text-fill-color: var(--il-text-primary);
}

html[data-theme="dark"] .landing-btn-secondary,
html[data-theme="light"] .landing-btn-secondary {
  background: var(--il-bg-control);
  border-color: var(--il-border-strong);
  color: var(--il-text-primary);
}

html[data-theme="dark"] .landing-bottom-cta,
html[data-theme="light"] .landing-bottom-cta {
  background: var(--il-bg-elevated);
  background-image: none;
  border-color: var(--il-border);
  color: var(--il-text-primary);
}

html[data-theme="dark"] .guide-home-link,
html[data-theme="dark"] .guide-panel,
html[data-theme="dark"] .guide-card,
html[data-theme="light"] .guide-home-link,
html[data-theme="light"] .guide-panel,
html[data-theme="light"] .guide-card {
  background: var(--il-bg-card);
  border-color: var(--il-border);
  color: var(--il-text-primary);
}