:root {
  --theme-warm-shadow: 0 24px 60px rgba(0, 0, 0, 0.42);
}

body.theme-professional-slate,
body.theme-professional-slate-light,
body.theme-midnight-ops,
body.theme-midnight-ops-light,
body.theme-library-bright {
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}

body.theme-professional-slate {
  color-scheme: dark;
  --brand-pop: #ff8f3c;
  --brand-pop-strong: #ffb36f;
  --bg: #0f1318;
  --bg-elevated: #171d24;
  --panel: rgba(21, 28, 36, 0.92);
  --panel-strong: rgba(25, 32, 42, 0.97);
  --panel-soft: rgba(21, 28, 36, 0.78);
  --fg: #dfe7ef;
  --fg-strong: #f7fbff;
  --muted: #a4afbc;
  --accent: #ff8c42;
  --accent-2: #ffb26b;
  --accent-3: #ffd0a6;
  --accent-soft: rgba(255, 140, 66, 0.14);
  --accent-line: rgba(255, 140, 66, 0.34);
  --border: rgba(140, 156, 176, 0.28);
  --border-strong: rgba(255, 178, 107, 0.52);
  --shadow: 0 0 0 1px rgba(255, 255, 255, 0.04), 0 12px 30px rgba(5, 10, 18, 0.26), var(--theme-warm-shadow);
  --orange: #ff8c42;
  --orange-soft: rgba(255, 140, 66, 0.14);
  --orange-line: rgba(255, 140, 66, 0.42);
  --yellow: #f4c95d;
  --yellow-soft: rgba(244, 201, 93, 0.14);
  --yellow-line: rgba(244, 201, 93, 0.38);
  --green: #48c78e;
  --green-soft: rgba(72, 199, 142, 0.14);
  --green-line: rgba(72, 199, 142, 0.38);
  --blue-soft: rgba(123, 163, 255, 0.14);
  --blue-line: rgba(123, 163, 255, 0.32);
}

body.theme-professional-slate,
html:has(body.theme-professional-slate) {
  background:
    radial-gradient(circle at top, rgba(255, 178, 107, 0.07), transparent 28%),
    linear-gradient(180deg, #11161c 0%, #0d1117 42%, #0a0e13 100%);
}

body.theme-professional-slate {
  background:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px),
    radial-gradient(circle at top, rgba(255, 178, 107, 0.08), transparent 26%),
    linear-gradient(180deg, #11161c 0%, #0d1117 42%, #0a0e13 100%);
  background-size: 24px 24px, 24px 24px, 100% 100%, 100% 100%;
}

body.theme-professional-slate-light {
  color-scheme: light;
  --brand-pop: #d2641e;
  --brand-pop-strong: #e07d3f;
  --bg: #f3efe8;
  --bg-elevated: #fbf8f2;
  --panel: rgba(255, 251, 245, 0.96);
  --panel-strong: rgba(255, 254, 250, 0.98);
  --panel-soft: rgba(247, 241, 233, 0.92);
  --fg: #3d3127;
  --fg-strong: #221912;
  --muted: #726253;
  --accent: #a95e22;
  --accent-2: #c97b3f;
  --accent-3: #ebbc96;
  --accent-soft: rgba(169, 94, 34, 0.09);
  --accent-line: rgba(169, 94, 34, 0.22);
  --border: rgba(116, 95, 76, 0.2);
  --border-strong: rgba(169, 94, 34, 0.34);
  --shadow: 0 1px 0 rgba(255, 255, 255, 0.82), 0 14px 38px rgba(63, 42, 24, 0.08);
  --orange: #c96d1e;
  --orange-soft: rgba(201, 109, 30, 0.12);
  --orange-line: rgba(201, 109, 30, 0.3);
  --yellow: #ae7c08;
  --yellow-soft: rgba(174, 124, 8, 0.11);
  --yellow-line: rgba(174, 124, 8, 0.26);
  --green: #2f7d55;
  --green-soft: rgba(47, 125, 85, 0.11);
  --green-line: rgba(47, 125, 85, 0.24);
  --blue-soft: rgba(77, 108, 196, 0.1);
  --blue-line: rgba(77, 108, 196, 0.22);
}

body.theme-professional-slate-light,
html:has(body.theme-professional-slate-light) {
  background:
    radial-gradient(circle at top, rgba(201, 123, 63, 0.08), transparent 32%),
    linear-gradient(180deg, #f8f4ee 0%, #efe8df 58%, #e8ded2 100%);
}

body.theme-professional-slate-light {
  background:
    linear-gradient(rgba(169,94,34,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(169,94,34,0.025) 1px, transparent 1px),
    radial-gradient(circle at top, rgba(201, 123, 63, 0.08), transparent 28%),
    linear-gradient(180deg, #f8f4ee 0%, #efe8df 58%, #e8ded2 100%);
  background-size: 24px 24px, 24px 24px, 100% 100%, 100% 100%;
}

body.theme-midnight-ops {
  color-scheme: dark;
  --brand-pop: #ff8a38;
  --brand-pop-strong: #ffae67;
  --bg: #07111b;
  --bg-elevated: #0b1825;
  --panel: rgba(12, 24, 38, 0.92);
  --panel-strong: rgba(15, 30, 47, 0.97);
  --panel-soft: rgba(12, 24, 38, 0.76);
  --fg: #dce8f6;
  --fg-strong: #f4f9ff;
  --muted: #98aec6;
  --accent: #59c3ff;
  --accent-2: #8bd9ff;
  --accent-3: #c5eeff;
  --accent-soft: rgba(89, 195, 255, 0.14);
  --accent-line: rgba(89, 195, 255, 0.36);
  --border: rgba(117, 153, 189, 0.3);
  --border-strong: rgba(139, 217, 255, 0.5);
  --shadow: 0 0 0 1px rgba(89, 195, 255, 0.06), 0 12px 32px rgba(4, 10, 20, 0.32), 0 24px 60px rgba(2, 7, 15, 0.48);
  --orange: #ff9a3c;
  --orange-soft: rgba(255, 154, 60, 0.14);
  --orange-line: rgba(255, 154, 60, 0.44);
  --yellow: #ffd166;
  --yellow-soft: rgba(255, 209, 102, 0.14);
  --yellow-line: rgba(255, 209, 102, 0.38);
  --green: #43d17a;
  --green-soft: rgba(67, 209, 122, 0.14);
  --green-line: rgba(67, 209, 122, 0.38);
  --blue-soft: rgba(89, 195, 255, 0.16);
  --blue-line: rgba(89, 195, 255, 0.34);
}

body.theme-midnight-ops,
html:has(body.theme-midnight-ops) {
  background:
    radial-gradient(circle at top, rgba(89, 195, 255, 0.08), transparent 32%),
    linear-gradient(180deg, #09121d 0%, #06101a 44%, #050b12 100%);
}

body.theme-midnight-ops {
  background:
    linear-gradient(rgba(89,195,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(89,195,255,0.03) 1px, transparent 1px),
    radial-gradient(circle at top, rgba(89, 195, 255, 0.12), transparent 24%),
    linear-gradient(180deg, #09121d 0%, #06101a 44%, #050b12 100%);
  background-size: 22px 22px, 22px 22px, 100% 100%, 100% 100%;
}

body.theme-midnight-ops-light {
  color-scheme: light;
  --brand-pop: #d15a19;
  --brand-pop-strong: #e17436;
  --bg: #eef5fb;
  --bg-elevated: #f8fbff;
  --panel: rgba(255, 255, 255, 0.96);
  --panel-strong: rgba(255, 255, 255, 0.99);
  --panel-soft: rgba(241, 248, 255, 0.92);
  --fg: #1f3448;
  --fg-strong: #11202e;
  --muted: #5d748a;
  --accent: #1477bf;
  --accent-2: #2597df;
  --accent-3: #7bcbf5;
  --accent-soft: rgba(20, 119, 191, 0.08);
  --accent-line: rgba(20, 119, 191, 0.22);
  --border: rgba(88, 117, 148, 0.22);
  --border-strong: rgba(37, 151, 223, 0.34);
  --shadow: 0 1px 0 rgba(255, 255, 255, 0.82), 0 16px 42px rgba(18, 48, 76, 0.08);
  --orange: #dc7b2c;
  --orange-soft: rgba(220, 123, 44, 0.12);
  --orange-line: rgba(220, 123, 44, 0.28);
  --yellow: #b78a12;
  --yellow-soft: rgba(183, 138, 18, 0.11);
  --yellow-line: rgba(183, 138, 18, 0.25);
  --green: #1f8a61;
  --green-soft: rgba(31, 138, 97, 0.11);
  --green-line: rgba(31, 138, 97, 0.24);
  --blue-soft: rgba(20, 119, 191, 0.08);
  --blue-line: rgba(20, 119, 191, 0.22);
}

body.theme-midnight-ops-light,
html:has(body.theme-midnight-ops-light) {
  background:
    radial-gradient(circle at top, rgba(37, 151, 223, 0.08), transparent 32%),
    linear-gradient(180deg, #f6fbff 0%, #eaf3fb 56%, #dfeaf6 100%);
}

body.theme-midnight-ops-light {
  background:
    linear-gradient(rgba(20,119,191,0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20,119,191,0.022) 1px, transparent 1px),
    radial-gradient(circle at top, rgba(37, 151, 223, 0.08), transparent 28%),
    linear-gradient(180deg, #f6fbff 0%, #eaf3fb 56%, #dfeaf6 100%);
  background-size: 24px 24px, 24px 24px, 100% 100%, 100% 100%;
}

body.theme-library-bright {
  color-scheme: light;
  --brand-pop: #db5a1f;
  --brand-pop-strong: #ea7335;
  --bg: #fff6dc;
  --bg-elevated: #fffbee;
  --panel: rgba(255, 251, 239, 0.97);
  --panel-strong: rgba(255, 255, 248, 0.99);
  --panel-soft: rgba(255, 244, 209, 0.94);
  --fg: #37281b;
  --fg-strong: #1f130c;
  --muted: #6b5844;
  --accent: #e3401f;
  --accent-2: #ff6a2b;
  --accent-3: #ffbb6e;
  --accent-soft: rgba(255, 106, 43, 0.12);
  --accent-line: rgba(227, 64, 31, 0.24);
  --border: rgba(117, 80, 37, 0.24);
  --border-strong: rgba(227, 64, 31, 0.42);
  --shadow: 0 2px 0 rgba(255,255,255,0.78), 0 14px 0 rgba(165, 98, 28, 0.04), 0 24px 44px rgba(126, 74, 18, 0.12);
  --orange: #ef6a1e;
  --orange-soft: rgba(239, 106, 30, 0.16);
  --orange-line: rgba(239, 106, 30, 0.34);
  --yellow: #e3b51a;
  --yellow-soft: rgba(227, 181, 26, 0.16);
  --yellow-line: rgba(227, 181, 26, 0.34);
  --green: #2d9b4c;
  --green-soft: rgba(45, 155, 76, 0.16);
  --green-line: rgba(45, 155, 76, 0.34);
  --blue-soft: rgba(78, 133, 255, 0.12);
  --blue-line: rgba(78, 133, 255, 0.28);
}

body.theme-library-bright,
html:has(body.theme-library-bright) {
  background:
    radial-gradient(circle at top, rgba(255, 106, 43, 0.1), transparent 28%),
    linear-gradient(180deg, #fff7de 0%, #ffeec0 48%, #f6d78c 100%);
}

body.theme-library-bright {
  background:
    linear-gradient(rgba(172,95,25,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(172,95,25,0.045) 1px, transparent 1px),
    radial-gradient(circle at top, rgba(255, 106, 43, 0.12), transparent 24%),
    linear-gradient(180deg, #fff7de 0%, #ffeec0 48%, #f6d78c 100%);
  background-size: 20px 20px, 20px 20px, 100% 100%, 100% 100%;
}

body.theme-professional-slate::before,
body.theme-professional-slate-light::before,
body.theme-midnight-ops::before,
body.theme-midnight-ops-light::before,
body.theme-library-bright::before {
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0) 16%, rgba(0,0,0,0.08));
  opacity: 0.5;
}

body.theme-professional-slate-light::before,
body.theme-midnight-ops-light::before {
  background: linear-gradient(180deg, rgba(255,255,255,0.4), rgba(255,255,255,0.08) 18%, rgba(77,95,130,0.05));
  opacity: 0.72;
}

body.theme-library-bright::before {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.46), rgba(255,255,255,0.12) 20%, rgba(196,122,33,0.08)),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.12) 0 2px, rgba(255,255,255,0) 2px 36px);
  opacity: 0.78;
}

body.theme-professional-slate a,
body.theme-professional-slate a:visited {
  color: #ffc793;
  text-decoration-color: rgba(255, 199, 147, 0.65);
}

body.theme-professional-slate-light a,
body.theme-professional-slate-light a:visited {
  color: #9d531e;
  text-decoration-color: rgba(157, 83, 30, 0.42);
}

body.theme-midnight-ops a,
body.theme-midnight-ops a:visited {
  color: #9fe3ff;
  text-decoration-color: rgba(159, 227, 255, 0.65);
}

body.theme-midnight-ops-light a,
body.theme-midnight-ops-light a:visited {
  color: #0f78bc;
  text-decoration-color: rgba(15, 120, 188, 0.4);
}

body.theme-library-bright a,
body.theme-library-bright a:visited {
  color: #b53b1b;
  text-decoration-color: rgba(181, 59, 27, 0.42);
}

body.theme-professional-slate .topbar,
body.theme-professional-slate-light .topbar,
body.theme-midnight-ops .topbar,
body.theme-midnight-ops-light .topbar,
body.theme-library-bright .topbar,
body.theme-professional-slate .card,
body.theme-professional-slate-light .card,
body.theme-midnight-ops .card,
body.theme-midnight-ops-light .card,
body.theme-library-bright .card,
body.theme-professional-slate .hero-panel,
body.theme-professional-slate-light .hero-panel,
body.theme-midnight-ops .hero-panel,
body.theme-midnight-ops-light .hero-panel,
body.theme-library-bright .hero-panel,
body.theme-professional-slate .item,
body.theme-professional-slate-light .item,
body.theme-midnight-ops .item,
body.theme-midnight-ops-light .item,
body.theme-library-bright .item,
body.theme-professional-slate .signal-card,
body.theme-professional-slate-light .signal-card,
body.theme-midnight-ops .signal-card,
body.theme-midnight-ops-light .signal-card,
body.theme-library-bright .signal-card,
body.theme-professional-slate .lesson-card,
body.theme-professional-slate-light .lesson-card,
body.theme-midnight-ops .lesson-card,
body.theme-midnight-ops-light .lesson-card,
body.theme-library-bright .lesson-card,
body.theme-professional-slate .summary-card,
body.theme-professional-slate-light .summary-card,
body.theme-midnight-ops .summary-card,
body.theme-midnight-ops-light .summary-card,
body.theme-library-bright .summary-card {
  background: linear-gradient(180deg, var(--panel-strong), var(--panel));
  border-color: var(--border);
  box-shadow: var(--shadow);
}

body.theme-professional-slate-light .topbar::before,
body.theme-professional-slate-light .card::before,
body.theme-professional-slate-light .item::before,
body.theme-professional-slate-light .hero-panel::before,
body.theme-professional-slate-light .signal-card::before,
body.theme-professional-slate-light .lesson-card::before,
body.theme-professional-slate-light .summary-card::before,
body.theme-midnight-ops-light .topbar::before,
body.theme-midnight-ops-light .card::before,
body.theme-midnight-ops-light .item::before,
body.theme-midnight-ops-light .hero-panel::before,
body.theme-midnight-ops-light .signal-card::before,
body.theme-midnight-ops-light .lesson-card::before,
body.theme-midnight-ops-light .summary-card::before,
body.theme-professional-slate .topbar::before,
body.theme-professional-slate .card::before,
body.theme-professional-slate .item::before,
body.theme-professional-slate .hero-panel::before,
body.theme-professional-slate .signal-card::before,
body.theme-professional-slate .lesson-card::before,
body.theme-professional-slate .summary-card::before,
body.theme-midnight-ops .topbar::before,
body.theme-midnight-ops .card::before,
body.theme-midnight-ops .item::before,
body.theme-midnight-ops .hero-panel::before,
body.theme-midnight-ops .signal-card::before,
body.theme-midnight-ops .lesson-card::before,
body.theme-midnight-ops .summary-card::before,
body.theme-library-bright .topbar::before,
body.theme-library-bright .card::before,
body.theme-library-bright .item::before,
body.theme-library-bright .hero-panel::before,
body.theme-library-bright .signal-card::before,
body.theme-library-bright .lesson-card::before,
body.theme-library-bright .summary-card::before {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.04), transparent);
}

body.theme-library-bright .topbar::before,
body.theme-library-bright .card::before,
body.theme-library-bright .item::before,
body.theme-library-bright .hero-panel::before,
body.theme-library-bright .signal-card::before,
body.theme-library-bright .lesson-card::before,
body.theme-library-bright .summary-card::before {
  background:
    linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent),
    linear-gradient(0deg, rgba(255, 182, 61, 0.06), rgba(255, 182, 61, 0));
}

body.theme-professional-slate-light .topbar::after,
body.theme-professional-slate-light .card::after,
body.theme-professional-slate-light .item::after,
body.theme-professional-slate-light .hero-panel::after,
body.theme-professional-slate-light .signal-card::after,
body.theme-professional-slate .topbar::after,
body.theme-professional-slate .card::after,
body.theme-professional-slate .item::after,
body.theme-professional-slate .hero-panel::after,
body.theme-professional-slate .signal-card::after,
body.theme-midnight-ops-light .topbar::after,
body.theme-midnight-ops-light .card::after,
body.theme-midnight-ops-light .item::after,
body.theme-midnight-ops-light .hero-panel::after,
body.theme-midnight-ops-light .signal-card::after,
body.theme-midnight-ops .topbar::after,
body.theme-midnight-ops .card::after,
body.theme-midnight-ops .item::after,
body.theme-midnight-ops .hero-panel::after,
body.theme-midnight-ops .signal-card::after,
body.theme-library-bright .topbar::after,
body.theme-library-bright .card::after,
body.theme-library-bright .item::after,
body.theme-library-bright .hero-panel::after,
body.theme-library-bright .signal-card::after {
  border-color: rgba(255,255,255,0.06);
}

body.theme-professional-slate-light .topbar::after,
body.theme-professional-slate-light .card::after,
body.theme-professional-slate-light .item::after,
body.theme-professional-slate-light .hero-panel::after,
body.theme-professional-slate-light .signal-card::after,
body.theme-midnight-ops-light .topbar::after,
body.theme-midnight-ops-light .card::after,
body.theme-midnight-ops-light .item::after,
body.theme-midnight-ops-light .hero-panel::after,
body.theme-midnight-ops-light .signal-card::after {
  border-color: rgba(65, 84, 110, 0.08);
}

body.theme-library-bright .topbar::after,
body.theme-library-bright .card::after,
body.theme-library-bright .item::after,
body.theme-library-bright .hero-panel::after,
body.theme-library-bright .signal-card::after {
  border-color: rgba(193, 111, 23, 0.14);
}

body.theme-professional-slate-light .brand-home,
body.theme-professional-slate-light .brand-home:visited,
body.theme-professional-slate-light h1,
body.theme-professional-slate-light h2,
body.theme-professional-slate-light h3,
body.theme-professional-slate-light h4,
body.theme-professional-slate-light h5,
body.theme-professional-slate-light h6,
body.theme-midnight-ops-light .brand-home,
body.theme-midnight-ops-light .brand-home:visited,
body.theme-midnight-ops-light h1,
body.theme-midnight-ops-light h2,
body.theme-midnight-ops-light h3,
body.theme-midnight-ops-light h4,
body.theme-midnight-ops-light h5,
body.theme-midnight-ops-light h6,
body.theme-library-bright .brand-home,
body.theme-library-bright .brand-home:visited,
body.theme-library-bright h1,
body.theme-library-bright h2,
body.theme-library-bright h3,
body.theme-library-bright h4,
body.theme-library-bright h5,
body.theme-library-bright h6 {
  text-shadow: none;
}

body.theme-professional-slate .utility-nav a,
body.theme-professional-slate .utility-nav a:visited,
body.theme-professional-slate .navlinks a,
body.theme-professional-slate .navlinks a:visited,
body.theme-professional-slate .search-form button,
body.theme-professional-slate .button-link,
body.theme-professional-slate .top-actions button,
body.theme-professional-slate .mockup-actions .primary-cta,
body.theme-professional-slate .theme-toggle-button {
  background: linear-gradient(180deg, #ffd2aa 0%, #ffb26b 100%);
  border-color: rgba(255, 199, 147, 0.86);
  color: #24140a;
  box-shadow: 0 8px 22px rgba(255, 140, 66, 0.12);
}

body.theme-professional-slate-light .utility-nav a,
body.theme-professional-slate-light .utility-nav a:visited,
body.theme-professional-slate-light .navlinks a,
body.theme-professional-slate-light .navlinks a:visited,
body.theme-professional-slate-light .search-form button,
body.theme-professional-slate-light .button-link,
body.theme-professional-slate-light .top-actions button,
body.theme-professional-slate-light .mockup-actions .primary-cta,
body.theme-professional-slate-light .theme-toggle-button {
  background: linear-gradient(180deg, #cf8a4f 0%, #b56b30 100%);
  border-color: rgba(169, 94, 34, 0.42);
  color: #fff9f3;
  box-shadow: 0 10px 24px rgba(169, 94, 34, 0.12);
}

body.theme-professional-slate .mockup-actions .secondary-cta,
body.theme-professional-slate .mockup-mini-nav a,
body.theme-professional-slate .mockup-tab,
body.theme-professional-slate .utility-chip {
  background: rgba(255, 178, 107, 0.06);
  border-color: var(--border);
  color: var(--fg-strong);
}

body.theme-professional-slate-light .mockup-actions .secondary-cta,
body.theme-professional-slate-light .mockup-mini-nav a,
body.theme-professional-slate-light .mockup-tab,
body.theme-professional-slate-light .utility-chip {
  background: rgba(169, 94, 34, 0.05);
  border-color: var(--border);
  color: var(--fg-strong);
}

body.theme-midnight-ops .utility-nav a,
body.theme-midnight-ops .utility-nav a:visited,
body.theme-midnight-ops .navlinks a,
body.theme-midnight-ops .navlinks a:visited,
body.theme-midnight-ops .search-form button,
body.theme-midnight-ops .button-link,
body.theme-midnight-ops .top-actions button,
body.theme-midnight-ops .mockup-actions .primary-cta,
body.theme-midnight-ops .theme-toggle-button {
  background: linear-gradient(180deg, #ffbe85 0%, #ff8a38 100%);
  border-color: rgba(255, 170, 107, 0.82);
  color: #2a1406;
  box-shadow: 0 10px 24px rgba(255, 138, 56, 0.18);
}

body.theme-midnight-ops-light .utility-nav a,
body.theme-midnight-ops-light .utility-nav a:visited,
body.theme-midnight-ops-light .navlinks a,
body.theme-midnight-ops-light .navlinks a:visited,
body.theme-midnight-ops-light .search-form button,
body.theme-midnight-ops-light .button-link,
body.theme-midnight-ops-light .top-actions button,
body.theme-midnight-ops-light .mockup-actions .primary-cta,
body.theme-midnight-ops-light .theme-toggle-button {
  background: linear-gradient(180deg, #ee9358 0%, #d15a19 100%);
  border-color: rgba(209, 90, 25, 0.44);
  color: #fff9f5;
  box-shadow: 0 10px 24px rgba(209, 90, 25, 0.16);
}

body.theme-midnight-ops .mockup-actions .secondary-cta,
body.theme-midnight-ops .mockup-mini-nav a,
body.theme-midnight-ops .mockup-tab,
body.theme-midnight-ops .utility-chip {
  background: rgba(89, 195, 255, 0.08);
  border-color: var(--border);
  color: var(--fg-strong);
}

body.theme-midnight-ops-light .mockup-actions .secondary-cta,
body.theme-midnight-ops-light .mockup-mini-nav a,
body.theme-midnight-ops-light .mockup-tab,
body.theme-midnight-ops-light .utility-chip {
  background: rgba(20, 119, 191, 0.05);
  border-color: var(--border);
  color: var(--fg-strong);
}

body.theme-library-bright .utility-nav a,
body.theme-library-bright .utility-nav a:visited,
body.theme-library-bright .navlinks a,
body.theme-library-bright .navlinks a:visited,
body.theme-library-bright .search-form button,
body.theme-library-bright .button-link,
body.theme-library-bright .top-actions button,
body.theme-library-bright .mockup-actions .primary-cta,
body.theme-library-bright .theme-toggle-button {
  background: linear-gradient(180deg, #ffb347 0%, #ff7a21 55%, #e03f1f 100%);
  border-color: rgba(190, 70, 20, 0.46);
  color: #fff7f0;
  box-shadow: 0 12px 26px rgba(227, 64, 31, 0.18);
}

body.theme-library-bright .mockup-actions .secondary-cta,
body.theme-library-bright .mockup-mini-nav a,
body.theme-library-bright .mockup-tab,
body.theme-library-bright .utility-chip {
  background: rgba(255, 106, 43, 0.08);
  border-color: rgba(174, 95, 25, 0.22);
  color: var(--fg-strong);
}

body.theme-professional-slate .utility-nav a:hover,
body.theme-professional-slate .navlinks a:hover,
body.theme-professional-slate .search-form button:hover,
body.theme-professional-slate .button-link:hover,
body.theme-professional-slate .top-actions button:hover,
body.theme-professional-slate .mockup-actions .primary-cta:hover,
body.theme-professional-slate .theme-toggle-button:hover {
  background: linear-gradient(180deg, #ffe0c4 0%, #ffbf83 100%);
}

body.theme-professional-slate-light .utility-nav a:hover,
body.theme-professional-slate-light .navlinks a:hover,
body.theme-professional-slate-light .search-form button:hover,
body.theme-professional-slate-light .button-link:hover,
body.theme-professional-slate-light .top-actions button:hover,
body.theme-professional-slate-light .mockup-actions .primary-cta:hover,
body.theme-professional-slate-light .theme-toggle-button:hover {
  background: linear-gradient(180deg, #d89763 0%, #bf7640 100%);
}

body.theme-midnight-ops .utility-nav a:hover,
body.theme-midnight-ops .navlinks a:hover,
body.theme-midnight-ops .search-form button:hover,
body.theme-midnight-ops .button-link:hover,
body.theme-midnight-ops .top-actions button:hover,
body.theme-midnight-ops .mockup-actions .primary-cta:hover,
body.theme-midnight-ops .theme-toggle-button:hover {
  background: linear-gradient(180deg, #ffc996 0%, #ff9f59 100%);
}

body.theme-midnight-ops-light .utility-nav a:hover,
body.theme-midnight-ops-light .navlinks a:hover,
body.theme-midnight-ops-light .search-form button:hover,
body.theme-midnight-ops-light .button-link:hover,
body.theme-midnight-ops-light .top-actions button:hover,
body.theme-midnight-ops-light .mockup-actions .primary-cta:hover,
body.theme-midnight-ops-light .theme-toggle-button:hover {
  background: linear-gradient(180deg, #f0a56f 0%, #df7440 100%);
}

body.theme-library-bright .utility-nav a:hover,
body.theme-library-bright .navlinks a:hover,
body.theme-library-bright .search-form button:hover,
body.theme-library-bright .button-link:hover,
body.theme-library-bright .top-actions button:hover,
body.theme-library-bright .mockup-actions .primary-cta:hover,
body.theme-library-bright .theme-toggle-button:hover {
  background: linear-gradient(180deg, #ffc567 0%, #ff8b32 55%, #ea4b1d 100%);
}

body.theme-professional-slate-light .panel-label,
body.theme-professional-slate-light .signal-label,
body.theme-professional-slate-light .kicker {
  background: rgba(169, 94, 34, 0.06);
}

body.theme-professional-slate-light .category-chip--technique {
  color: #7a340a;
  background: rgba(201, 109, 30, 0.18);
  border-color: rgba(201, 109, 30, 0.42);
}

body.theme-professional-slate-light .category-chip--evasion {
  color: #6b5200;
  background: rgba(174, 124, 8, 0.18);
  border-color: rgba(174, 124, 8, 0.38);
}

body.theme-professional-slate-light .category-chip--fundamental {
  color: #185437;
  background: rgba(47, 125, 85, 0.18);
  border-color: rgba(47, 125, 85, 0.36);
}

body.theme-midnight-ops-light .panel-label,
body.theme-midnight-ops-light .signal-label,
body.theme-midnight-ops-light .kicker {
  background: rgba(20, 119, 191, 0.06);
}

body.theme-midnight-ops-light .category-chip--technique {
  color: #7f3208;
  background: rgba(220, 123, 44, 0.18);
  border-color: rgba(220, 123, 44, 0.4);
}

body.theme-midnight-ops-light .category-chip--evasion {
  color: #6e5305;
  background: rgba(183, 138, 18, 0.18);
  border-color: rgba(183, 138, 18, 0.36);
}

body.theme-midnight-ops-light .category-chip--fundamental {
  color: #14553b;
  background: rgba(31, 138, 97, 0.18);
  border-color: rgba(31, 138, 97, 0.34);
}

body.theme-library-bright .panel-label,
body.theme-library-bright .signal-label,
body.theme-library-bright .kicker {
  background: rgba(255, 106, 43, 0.1);
  color: #9f3515;
  border-color: rgba(181, 59, 27, 0.22);
}

body.theme-library-bright .category-chip--technique {
  color: #7b2f08;
  background: rgba(239, 106, 30, 0.24);
  border-color: rgba(181, 68, 13, 0.42);
}

body.theme-library-bright .category-chip--evasion {
  color: #654b00;
  background: rgba(227, 181, 26, 0.26);
  border-color: rgba(160, 122, 6, 0.4);
}

body.theme-library-bright .category-chip--fundamental {
  color: #12532c;
  background: rgba(45, 155, 76, 0.24);
  border-color: rgba(26, 114, 53, 0.38);
}

body.theme-professional-slate .mockup-hero h1,
body.theme-professional-slate-light .mockup-hero h1,
body.theme-midnight-ops .mockup-hero h1,
body.theme-midnight-ops-light .mockup-hero h1,
body.theme-library-bright .mockup-hero h1 {
  max-width: 14ch;
}

body.theme-professional-slate .theme-callout,
body.theme-professional-slate-light .theme-callout,
body.theme-midnight-ops .theme-callout,
body.theme-midnight-ops-light .theme-callout,
body.theme-library-bright .theme-callout {
  padding: 0.9rem 1rem;
  border: 1px dashed var(--border);
  background: var(--accent-soft);
  color: var(--fg);
}

body.theme-professional-slate .theme-stack,
body.theme-professional-slate-light .theme-stack,
body.theme-midnight-ops .theme-stack,
body.theme-midnight-ops-light .theme-stack,
body.theme-library-bright .theme-stack {
  display: grid;
  gap: 0.9rem;
}

body.theme-library-bright .lesson-card,
body.theme-library-bright .summary-card,
body.theme-library-bright .card {
  border-width: 2px;
}

body.theme-library-bright .lesson-card--technique {
  background: linear-gradient(180deg, rgba(255, 240, 228, 0.98), rgba(255, 228, 206, 0.98));
}

body.theme-library-bright .lesson-card--evasion {
  background: linear-gradient(180deg, rgba(255, 248, 219, 0.99), rgba(250, 236, 174, 0.98));
}

body.theme-library-bright .lesson-card--fundamental {
  background: linear-gradient(180deg, rgba(235, 255, 230, 0.99), rgba(208, 242, 190, 0.98));
}

body.theme-library-bright .category-chip {
  font-weight: 700;
}

body.theme-library-bright .meta-pill {
  background: rgba(255, 255, 255, 0.5);
  border-color: rgba(145, 90, 25, 0.2);
  color: #412616;
}

body.theme-library-bright .mockup-tabs,
body.theme-library-bright .utility-chip-row,
body.theme-library-bright .mockup-actions {
  gap: 0.75rem;
}

.theme-toggle-button {
  white-space: nowrap;
}


body.theme-midnight-ops .catalog-card--walkthrough {
  border-color: rgba(208, 114, 255, 0.62);
  background: linear-gradient(180deg, rgba(48, 18, 84, 0.92), rgba(15, 8, 34, 0.98));
  box-shadow: 0 0 0 1px rgba(208, 114, 255, 0.18), 0 0 32px rgba(208, 114, 255, 0.18), 0 18px 42px rgba(4, 10, 20, 0.45);
}

body.theme-midnight-ops .catalog-card--fundamentals {
  border-color: rgba(67, 209, 122, 0.58);
  background: linear-gradient(180deg, rgba(8, 42, 26, 0.92), rgba(4, 18, 10, 0.98));
  box-shadow: 0 0 0 1px rgba(67, 209, 122, 0.14), 0 0 26px rgba(67, 209, 122, 0.12), 0 18px 42px rgba(4, 10, 20, 0.42);
}

body.theme-midnight-ops .catalog-card--techniques {
  border-color: rgba(255, 154, 60, 0.58);
  background: linear-gradient(180deg, rgba(56, 28, 8, 0.92), rgba(20, 10, 4, 0.98));
  box-shadow: 0 0 0 1px rgba(255, 154, 60, 0.14), 0 0 26px rgba(255, 154, 60, 0.12), 0 18px 42px rgba(4, 10, 20, 0.42);
}

body.theme-midnight-ops .catalog-card--evasion {
  border-color: rgba(255, 209, 102, 0.56);
  background: linear-gradient(180deg, rgba(58, 44, 8, 0.92), rgba(24, 18, 4, 0.98));
  box-shadow: 0 0 0 1px rgba(255, 209, 102, 0.14), 0 0 26px rgba(255, 209, 102, 0.12), 0 18px 42px rgba(4, 10, 20, 0.42);
}

body.theme-midnight-ops .catalog-card--defense {
  border-color: rgba(89, 195, 255, 0.56);
  background: linear-gradient(180deg, rgba(10, 28, 56, 0.92), rgba(4, 12, 24, 0.98));
  box-shadow: 0 0 0 1px rgba(89, 195, 255, 0.14), 0 0 26px rgba(89, 195, 255, 0.12), 0 18px 42px rgba(4, 10, 20, 0.42);
}

body.theme-midnight-ops .catalog-pill--walkthrough { color: #d895ff; }
body.theme-midnight-ops .catalog-pill--fundamentals { color: #7bffad; }
body.theme-midnight-ops .catalog-pill--techniques { color: #ffbe84; }
body.theme-midnight-ops .catalog-pill--evasion { color: #ffe188; }
body.theme-midnight-ops .catalog-pill--defense { color: #9fe3ff; }

body.theme-library-bright .item {
  background: linear-gradient(180deg, rgba(255, 250, 238, 0.98), rgba(255, 244, 220, 0.98));
  border-color: rgba(170, 103, 27, 0.24);
}

body.theme-library-bright .catalog-card {
  border-width: 2px;
}

body.theme-library-bright .catalog-card--walkthrough {
  border-color: rgba(146, 82, 189, 0.44);
  background: linear-gradient(180deg, rgba(249, 240, 255, 0.98), rgba(236, 220, 253, 0.98));
  box-shadow: 0 10px 28px rgba(132, 75, 176, 0.10);
}

body.theme-library-bright .catalog-card--fundamentals {
  border-color: rgba(34, 132, 65, 0.36);
  background: linear-gradient(180deg, rgba(239, 255, 233, 0.98), rgba(217, 245, 206, 0.98));
  box-shadow: 0 10px 28px rgba(45, 155, 76, 0.09);
}

body.theme-library-bright .catalog-card--techniques {
  border-color: rgba(187, 84, 24, 0.38);
  background: linear-gradient(180deg, rgba(255, 242, 228, 0.98), rgba(255, 226, 201, 0.98));
  box-shadow: 0 10px 28px rgba(239, 106, 30, 0.10);
}

body.theme-library-bright .catalog-card--evasion {
  border-color: rgba(166, 126, 9, 0.36);
  background: linear-gradient(180deg, rgba(255, 249, 224, 0.99), rgba(248, 234, 171, 0.98));
  box-shadow: 0 10px 28px rgba(227, 181, 26, 0.10);
}

body.theme-library-bright .catalog-card--defense {
  border-color: rgba(56, 108, 214, 0.34);
  background: linear-gradient(180deg, rgba(234, 243, 255, 0.98), rgba(212, 228, 252, 0.98));
  box-shadow: 0 10px 28px rgba(78, 133, 255, 0.08);
}

body.theme-library-bright .catalog-pill--walkthrough {
  color: #7d43a6;
  background: rgba(162, 98, 204, 0.14);
}

body.theme-library-bright .catalog-pill--fundamentals {
  color: #176135;
  background: rgba(45, 155, 76, 0.14);
}

body.theme-library-bright .catalog-pill--techniques {
  color: #8a3910;
  background: rgba(239, 106, 30, 0.14);
}

body.theme-library-bright .catalog-pill--evasion {
  color: #765805;
  background: rgba(227, 181, 26, 0.14);
}

body.theme-library-bright .catalog-pill--defense {
  color: #2e58b7;
  background: rgba(78, 133, 255, 0.12);
}

body.theme-library-bright .content-link,
body.theme-library-bright .content-link:visited {
  color: #8c3115;
}

body.theme-library-bright .item-top strong,
body.theme-library-bright .item-top .content-link {
  color: #27170d;
}


.family-selector-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
  margin: 1rem 0 1.25rem;
}

.family-box {
  border: 2px solid var(--border);
  padding: 1rem;
  background: linear-gradient(180deg, var(--panel-strong), var(--panel));
  box-shadow: var(--shadow);
}

.family-subfamily-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.9rem;
}

.family-subfamily-link,
.family-subfamily-link:visited {
  display: inline-flex;
  align-items: center;
  padding: 0.55rem 0.8rem;
  border: 1px solid currentColor;
  text-decoration: none;
  font-weight: 700;
}

body.theme-library-bright .family-box--lakera {
  border-color: rgba(146, 82, 189, 0.42);
  background: linear-gradient(180deg, rgba(249, 240, 255, 0.98), rgba(236, 220, 253, 0.98));
  box-shadow: 0 12px 28px rgba(132, 75, 176, 0.10);
}

body.theme-library-bright .family-box--coming-soon {
  border-style: dashed;
  border-color: rgba(170, 103, 27, 0.28);
  background: linear-gradient(180deg, rgba(255, 250, 238, 0.98), rgba(255, 244, 220, 0.98));
}

body.theme-library-bright .family-subfamily-link--walkthrough,
body.theme-library-bright .family-subfamily-link--walkthrough:visited {
  color: #7d43a6;
  background: rgba(162, 98, 204, 0.12);
  border-color: rgba(146, 82, 189, 0.34);
}

body.theme-library-bright .family-subfamily-link--walkthrough:hover {
  background: rgba(162, 98, 204, 0.18);
}

body.theme-midnight-ops .family-box--lakera {
  border-color: rgba(208, 114, 255, 0.58);
  background: linear-gradient(180deg, rgba(48, 18, 84, 0.92), rgba(15, 8, 34, 0.98));
  box-shadow: 0 0 0 1px rgba(208, 114, 255, 0.18), 0 0 32px rgba(208, 114, 255, 0.18), 0 18px 42px rgba(4, 10, 20, 0.45);
}

body.theme-midnight-ops .family-box--coming-soon {
  border-style: dashed;
}

body.theme-midnight-ops .family-subfamily-link--walkthrough,
body.theme-midnight-ops .family-subfamily-link--walkthrough:visited {
  color: #d895ff;
  background: rgba(208, 114, 255, 0.12);
  border-color: rgba(208, 114, 255, 0.34);
}

body.theme-midnight-ops .family-subfamily-link--walkthrough:hover {
  background: rgba(208, 114, 255, 0.18);
}


.catalog-card-top {
  align-items: flex-start;
}

.catalog-id-pill {
  white-space: nowrap;
  flex-shrink: 0;
}

.catalog-summary {
  margin-top: 0.75rem;
}

.catalog-context {
  margin-top: 0.7rem;
  color: var(--muted);
}

body.theme-library-bright .catalog-context {
  color: #5d4635;
}
body.theme-midnight-ops .catalog-context {
  color: #b8c9d8;
}

@media (max-width: 720px) {
  .catalog-card-top {
    flex-direction: column;
    align-items: flex-start;
  }

  .catalog-id-pill {
    white-space: normal;
  }
}


.catalog-id-pill,
.catalog-id-pill:visited {
  text-decoration: none;
}