:root {
      --navy: #1B2A5B;
      --red: #9F1111;
      --cream: #F5F1E6;
      --gold: #C9A227;
      --brand-display: "Baskerville Old Face", "Palatino Linotype", "Book Antiqua", Georgia, serif;
      --ink: #16213a;
      --paper: #fffdf7;
      --white: #ffffff;
      --line: rgba(27, 42, 91, 0.14);
      --shadow: 0 24px 60px rgba(16, 29, 63, 0.14);
      --shadow-soft: 0 16px 34px rgba(16, 29, 63, 0.08);
      --hero-shadow: 0 30px 60px rgba(10, 19, 44, 0.22);
      --page-bg-start: #f8f4ea;
      --page-bg-mid: #fffdf7;
      --page-bg-end: #f3ebdb;
      --page-sheen: rgba(27, 42, 91, 0.06);
      --frame-nav-surface: rgba(255, 253, 247, 0.94);
      --frame-nav-border: rgba(27, 42, 91, 0.22);
      --frame-nav-shadow: 0 12px 28px rgba(16, 29, 63, 0.08);
      --frame-height: 92px;
      --nib-frame-max-width: 1200px;
      --nib-content-max-width: 1180px;
      --hero-graphic: url("/assets/themes/emblem-signature_v1.0.svg");
      --login-graphic: url("/assets/themes/emblem-signature_v1.0.svg");
      --nib-ui-heading-1-size: 46px;
      --nib-ui-heading-2-size: 24px;
      --nib-ui-select-trigger-height: 48px;
      --nib-ui-select-search-height: 40px;
      --nib-ui-select-option-height: 44px;
      --frame-footer-surface: rgba(247, 243, 233, 0.96);
      --frame-footer-border: rgba(27, 42, 91, 0.2);
      --frame-footer-note: #5b6784;
      --nav-surface: rgba(255, 253, 247, 0.9);
      --nav-border: rgba(27, 42, 91, 0.2);
      --nav-shadow: 0 12px 28px rgba(16, 29, 63, 0.08);
      --phase-text: #5d6785;
      --primary-start: #1b2a5b;
      --primary-end: #31467d;
      --primary-border: rgba(27, 42, 91, 0.94);
      --primary-text: #ffffff;
      --secondary-bg: rgba(255, 255, 255, 0.84);
      --secondary-text: #1b2a5b;
      --secondary-border: rgba(27, 42, 91, 0.14);
      --secondary-shadow: 0 14px 26px rgba(16, 29, 63, 0.08);
      --accent-start: #d4b345;
      --accent-end: #c79b17;
      --accent-border: rgba(201, 162, 39, 0.64);
      --accent-text: #15295c;
      --hero-overlay-start: rgba(18, 31, 64, 0.92);
      --hero-overlay-end: rgba(155, 27, 46, 0.72);
      --hero-burst-one: rgba(201, 162, 39, 0.2);
      --hero-burst-two: rgba(155, 27, 46, 0.18);
      --hero-burst-three: rgba(27, 42, 91, 0.24);
      --surface-bg: rgba(255, 255, 255, 0.92);
      --surface-bg-strong: rgba(255, 255, 255, 0.97);
      --surface-border: rgba(27, 42, 91, 0.1);
      --card-bg: rgba(255, 255, 255, 0.94);
      --card-border: rgba(255, 255, 255, 0.58);
      --login-shell-start: rgba(99, 74, 124, 0.9);
      --login-shell-end: rgba(147, 82, 103, 0.84);
      --login-shell-border: rgba(255, 255, 255, 0.18);
      --login-shell-shadow: 0 30px 62px rgba(10, 19, 44, 0.28);
      --login-brand-bg-start: rgba(255, 253, 247, 0.98);
      --login-brand-bg-end: rgba(245, 241, 230, 0.96);
      --login-brand-border: rgba(201, 162, 39, 0.3);
      --login-brand-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 16px 26px rgba(11, 18, 36, 0.12);
      --login-panel-bg: rgba(255, 255, 255, 0.96);
      --login-panel-border: rgba(255, 255, 255, 0.62);
      --input-bg: rgba(255, 255, 255, 0.97);
      --input-border: rgba(27, 42, 91, 0.14);
      --muted-text: #5b6784;
      --banner-start: rgba(27, 42, 91, 0.96);
      --banner-end: rgba(155, 27, 46, 0.88);
      --drawer-backdrop: rgba(17, 28, 59, 0.38);
      --drawer-bg-start: rgba(255, 255, 255, 0.98);
      --drawer-bg-end: rgba(245, 241, 230, 0.98);
      --drawer-shadow: -20px 0 50px rgba(17, 28, 59, 0.18);
      --footer-surface: rgba(247, 243, 233, 0.92);
      --footer-border: rgba(27, 42, 91, 0.2);
      --footer-note: #5b6784;
      --theme-menu-bg: rgba(255, 253, 247, 0.98);
      --theme-menu-border: rgba(27, 42, 91, 0.12);
      --theme-menu-shadow: 0 20px 42px rgba(16, 29, 63, 0.14);
      --theme-option-hover: rgba(27, 42, 91, 0.05);
      --theme-option-active: rgba(27, 42, 91, 0.08);
      --toolbar-icon-filter: drop-shadow(0 4px 8px rgba(27, 42, 91, 0.16));
      --table-shell-border: rgba(27, 42, 91, 0.12);
      --table-shell-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(247, 243, 233, 0.93));
      --table-head-bg: rgba(245, 241, 230, 0.86);
      --table-head-text: #1b2a5b;
      --table-line: rgba(63, 74, 96, 0.18);
      --table-line-strong: rgba(49, 60, 82, 0.32);
      --table-row-hover: rgba(27, 42, 91, 0.045);
      --timeline-shell-bg: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(245,241,230,0.92));
      --timeline-shell-border: rgba(201, 162, 39, 0.18);
      --row-menu-panel-bg: rgba(255, 254, 250, 0.99);
      --row-menu-panel-border: rgba(27, 42, 91, 0.18);
      --row-menu-panel-shadow: 0 24px 40px rgba(16, 29, 63, 0.2);
      --row-menu-item-bg: rgba(249, 244, 233, 0.98);
      --row-menu-item-hover: rgba(230, 214, 177, 0.92);
      --row-menu-item-border: rgba(27, 42, 91, 0.12);
      --row-menu-item-text: #1b2a5b;
      --row-tone-neutral: rgba(0, 0, 0, 0.02);
      --row-tone-review: rgba(252, 236, 215, 0.94);
      --row-tone-minor-revision: rgba(252, 236, 215, 0.94);
      --row-tone-major-revision: rgba(248, 225, 189, 0.96);
      --row-tone-accepted: rgba(221, 247, 231, 0.92);
      --row-tone-rejected: rgba(249, 224, 229, 0.92);
      --row-tone-incomplete: rgba(0, 0, 0, 0.04);
      --row-accent-neutral: rgba(120, 120, 120, 0.5);
      --row-accent-review: #8b4f18;
      --row-accent-minor-revision: #8b4f18;
      --row-accent-major-revision: #8a4c12;
      --row-accent-accepted: #156f49;
      --row-accent-rejected: #94304b;
      --row-accent-incomplete: rgba(120, 120, 120, 0.6);
    }
    html[data-navigation-theme="nibveda-flat-full-content"] {
      --nib-frame-max-width: 100%;
      --nib-content-max-width: 100%;
    }
    html[data-theme="navy-focus"] {
      --page-bg-start: #edf1fb;
      --page-bg-mid: #fafbff;
      --page-bg-end: #ecf0fa;
      --page-sheen: rgba(27, 42, 91, 0.09);
      --nav-surface: rgba(233, 239, 252, 0.92);
      --nav-border: rgba(27, 42, 91, 0.24);
      --phase-text: #4f5d82;
      --primary-start: #142451;
      --primary-end: #233c75;
      --secondary-bg: rgba(236, 241, 252, 0.88);
      --secondary-border: rgba(27, 42, 91, 0.18);
      --hero-overlay-start: rgba(14, 24, 51, 0.94);
      --hero-overlay-end: rgba(27, 42, 91, 0.8);
      --surface-bg: rgba(247, 249, 255, 0.95);
      --card-bg: rgba(244, 247, 255, 0.96);
      --input-bg: rgba(250, 252, 255, 0.98);
      --banner-start: rgba(20, 36, 81, 0.97);
      --banner-end: rgba(49, 70, 125, 0.9);
      --footer-surface: rgba(230, 236, 248, 0.96);
      --footer-border: rgba(27, 42, 91, 0.22);
      --footer-note: #4f5d82;
      --theme-menu-bg: rgba(244, 247, 255, 0.99);
      --theme-option-hover: rgba(27, 42, 91, 0.06);
      --theme-option-active: rgba(27, 42, 91, 0.1);
      --toolbar-icon-filter: drop-shadow(0 4px 8px rgba(20, 36, 81, 0.18));
      --table-shell-border: rgba(27, 42, 91, 0.15);
      --table-shell-bg: linear-gradient(180deg, rgba(246, 249, 255, 0.98), rgba(231, 237, 251, 0.95));
      --table-head-bg: rgba(224, 232, 248, 0.94);
      --table-head-text: #142451;
      --table-line: rgba(63, 74, 96, 0.2);
      --table-row-hover: rgba(27, 42, 91, 0.055);
      --timeline-shell-bg: linear-gradient(180deg, rgba(248, 250, 255, 0.99), rgba(232, 238, 252, 0.95));
      --timeline-shell-border: rgba(27, 42, 91, 0.16);
      --row-menu-panel-bg: rgba(245, 249, 255, 0.99);
      --row-menu-panel-border: rgba(27, 42, 91, 0.18);
      --row-menu-item-bg: rgba(236, 242, 252, 0.98);
      --row-menu-item-hover: rgba(210, 223, 246, 0.96);
    }
    html[data-theme="regal-red"] {
      --page-bg-start: #fbf2ef;
      --page-bg-mid: #fffaf8;
      --page-bg-end: #f6ebe8;
      --page-sheen: rgba(155, 27, 46, 0.07);
      --nav-surface: rgba(255, 249, 246, 0.93);
      --nav-border: rgba(155, 27, 46, 0.22);
      --phase-text: #7d4d5a;
      --primary-start: #8f1b35;
      --primary-end: #b6324d;
      --primary-border: rgba(143, 27, 53, 0.76);
      --secondary-text: #8f1b35;
      --secondary-border: rgba(155, 27, 46, 0.18);
      --hero-overlay-start: rgba(91, 19, 38, 0.92);
      --hero-overlay-end: rgba(27, 42, 91, 0.76);
      --surface-border: rgba(155, 27, 46, 0.12);
      --input-border: rgba(155, 27, 46, 0.16);
      --banner-start: rgba(143, 27, 53, 0.95);
      --banner-end: rgba(27, 42, 91, 0.84);
      --footer-surface: rgba(251, 241, 239, 0.96);
      --footer-border: rgba(155, 27, 46, 0.2);
      --footer-note: #724b56;
      --theme-menu-bg: rgba(255, 249, 246, 0.99);
      --theme-option-hover: rgba(155, 27, 46, 0.06);
      --theme-option-active: rgba(155, 27, 46, 0.11);
      --toolbar-icon-filter: drop-shadow(0 4px 8px rgba(155, 27, 46, 0.18));
      --table-shell-border: rgba(155, 27, 46, 0.14);
      --table-shell-bg: linear-gradient(180deg, rgba(255, 251, 250, 0.98), rgba(251, 240, 236, 0.95));
      --table-head-bg: rgba(248, 232, 229, 0.94);
      --table-head-text: #8f1b35;
      --table-line: rgba(80, 68, 83, 0.2);
      --table-row-hover: rgba(155, 27, 46, 0.045);
      --timeline-shell-bg: linear-gradient(180deg, rgba(255, 252, 251, 0.99), rgba(250, 238, 235, 0.95));
      --timeline-shell-border: rgba(155, 27, 46, 0.15);
      --row-menu-panel-bg: rgba(255, 250, 249, 0.99);
      --row-menu-panel-border: rgba(155, 27, 46, 0.18);
      --row-menu-item-bg: rgba(252, 238, 235, 0.98);
      --row-menu-item-hover: rgba(245, 214, 209, 0.96);
      --row-menu-item-text: #8f1b35;
    }
    html[data-theme="parchment-cream"] {
      --page-bg-start: #faf6ee;
      --page-bg-mid: #fffdf8;
      --page-bg-end: #f3ead8;
      --page-sheen: rgba(201, 162, 39, 0.06);
      --nav-surface: rgba(250, 246, 238, 0.94);
      --nav-border: rgba(201, 162, 39, 0.24);
      --phase-text: #786a4c;
      --primary-start: #1b2a5b;
      --primary-end: #3d4967;
      --secondary-bg: rgba(255, 251, 244, 0.9);
      --secondary-border: rgba(201, 162, 39, 0.22);
      --accent-start: #c79d2b;
      --accent-end: #dfbb59;
      --hero-overlay-start: rgba(27, 42, 91, 0.84);
      --hero-overlay-end: rgba(113, 84, 31, 0.66);
      --surface-bg: rgba(255, 251, 243, 0.95);
      --card-bg: rgba(255, 252, 246, 0.96);
      --input-bg: rgba(255, 253, 248, 0.98);
      --input-border: rgba(201, 162, 39, 0.18);
      --banner-start: rgba(27, 42, 91, 0.9);
      --banner-end: rgba(201, 162, 39, 0.76);
      --footer-surface: rgba(247, 240, 226, 0.96);
      --footer-border: rgba(201, 162, 39, 0.22);
      --footer-note: #6e654d;
      --theme-menu-bg: rgba(255, 252, 246, 0.99);
      --theme-option-hover: rgba(201, 162, 39, 0.08);
      --theme-option-active: rgba(201, 162, 39, 0.12);
      --toolbar-icon-filter: drop-shadow(0 4px 8px rgba(201, 162, 39, 0.2));
      --table-shell-border: rgba(201, 162, 39, 0.16);
      --table-shell-bg: linear-gradient(180deg, rgba(255, 253, 248, 0.98), rgba(248, 241, 226, 0.96));
      --table-head-bg: rgba(248, 239, 220, 0.92);
      --table-head-text: #5f5130;
      --table-line: rgba(99, 88, 66, 0.19);
      --table-row-hover: rgba(201, 162, 39, 0.05);
      --timeline-shell-bg: linear-gradient(180deg, rgba(255, 253, 249, 0.99), rgba(248, 241, 226, 0.95));
      --timeline-shell-border: rgba(201, 162, 39, 0.18);
      --row-menu-panel-bg: rgba(255, 252, 247, 0.99);
      --row-menu-panel-border: rgba(201, 162, 39, 0.2);
      --row-menu-item-bg: rgba(250, 241, 222, 0.98);
      --row-menu-item-hover: rgba(239, 223, 184, 0.96);
      --row-menu-item-text: #5f5130;
    }
    html[data-theme="gold-accent"] {
      --page-bg-start: #fcf8ef;
      --page-bg-mid: #fffdf8;
      --page-bg-end: #f5eddd;
      --page-sheen: rgba(201, 162, 39, 0.08);
      --nav-surface: rgba(255, 251, 243, 0.94);
      --nav-border: rgba(173, 125, 18, 0.24);
      --phase-text: #786339;
      --primary-start: #ad7d12;
      --primary-end: #cfa12b;
      --primary-border: rgba(173, 125, 18, 0.7);
      --primary-text: #16274e;
      --secondary-border: rgba(201, 162, 39, 0.24);
      --accent-start: #1b2a5b;
      --accent-end: #30477b;
      --accent-border: rgba(27, 42, 91, 0.58);
      --accent-text: #ffffff;
      --hero-overlay-start: rgba(82, 60, 12, 0.84);
      --hero-overlay-end: rgba(27, 42, 91, 0.76);
      --surface-border: rgba(201, 162, 39, 0.18);
      --card-border: rgba(201, 162, 39, 0.22);
      --input-border: rgba(201, 162, 39, 0.22);
      --banner-start: rgba(173, 125, 18, 0.92);
      --banner-end: rgba(27, 42, 91, 0.84);
      --footer-surface: rgba(248, 243, 231, 0.97);
      --footer-border: rgba(173, 125, 18, 0.22);
      --footer-note: #6f6547;
      --theme-menu-bg: rgba(255, 252, 245, 0.99);
      --theme-option-hover: rgba(201, 162, 39, 0.08);
      --theme-option-active: rgba(201, 162, 39, 0.14);
      --toolbar-icon-filter: drop-shadow(0 4px 8px rgba(173, 125, 18, 0.2));
      --table-shell-border: rgba(201, 162, 39, 0.18);
      --table-shell-bg: linear-gradient(180deg, rgba(255, 252, 246, 0.98), rgba(246, 236, 214, 0.95));
      --table-head-bg: rgba(246, 233, 198, 0.92);
      --table-head-text: #7a5907;
      --table-line: rgba(102, 88, 58, 0.2);
      --table-row-hover: rgba(201, 162, 39, 0.055);
      --timeline-shell-bg: linear-gradient(180deg, rgba(255, 252, 247, 0.99), rgba(246, 235, 211, 0.95));
      --timeline-shell-border: rgba(201, 162, 39, 0.2);
      --row-menu-panel-bg: rgba(255, 252, 245, 0.99);
      --row-menu-panel-border: rgba(201, 162, 39, 0.22);
      --row-menu-item-bg: rgba(247, 235, 206, 0.98);
      --row-menu-item-hover: rgba(236, 217, 167, 0.96);
      --row-menu-item-text: #7a5907;
    }
    html[data-theme="logo-classic"] {
      --page-bg-start: #f8f4eb;
      --page-bg-mid: #fffdf8;
      --page-bg-end: #f4ead8;
      --page-sheen: rgba(155, 27, 46, 0.045);
      --nav-surface: rgba(255, 252, 246, 0.95);
      --nav-border: rgba(27, 42, 91, 0.24);
      --primary-start: #102550;
      --primary-end: #9b1b2e;
      --secondary-bg: rgba(255, 253, 248, 0.92);
      --secondary-text: #102550;
      --secondary-border: rgba(155, 27, 46, 0.14);
      --accent-start: #c9a227;
      --accent-end: #e2c15a;
      --accent-text: #102550;
      --surface-bg: rgba(255, 253, 248, 0.96);
      --card-bg: rgba(255, 253, 248, 0.98);
      --input-border: rgba(27, 42, 91, 0.16);
      --footer-surface: rgba(247, 241, 229, 0.97);
      --footer-border: rgba(27, 42, 91, 0.24);
      --theme-menu-bg: rgba(255, 253, 248, 0.99);
      --theme-option-hover: rgba(155, 27, 46, 0.055);
      --theme-option-active: rgba(155, 27, 46, 0.11);
      --table-shell-border: rgba(27, 42, 91, 0.14);
      --table-head-bg: rgba(247, 239, 226, 0.94);
      --table-head-text: #102550;
      --timeline-shell-border: rgba(155, 27, 46, 0.14);
      --row-menu-panel-bg: rgba(255, 252, 247, 0.99);
      --row-menu-panel-border: rgba(27, 42, 91, 0.18);
      --row-menu-item-bg: rgba(249, 241, 230, 0.98);
      --row-menu-item-hover: rgba(238, 222, 194, 0.96);
    }
    html[data-theme="ink-insight"] {
      --page-bg-start: #eef2fb;
      --page-bg-mid: #fbfcff;
      --page-bg-end: #edf1f8;
      --page-sheen: rgba(27, 42, 91, 0.085);
      --nav-surface: rgba(241, 245, 253, 0.95);
      --nav-border: rgba(16, 37, 80, 0.25);
      --primary-start: #0f244f;
      --primary-end: #1b3c78;
      --secondary-bg: rgba(246, 249, 255, 0.92);
      --secondary-text: #0f244f;
      --secondary-border: rgba(16, 37, 80, 0.18);
      --accent-start: #9b1b2e;
      --accent-end: #c9a227;
      --accent-text: #ffffff;
      --surface-bg: rgba(249, 251, 255, 0.96);
      --card-bg: rgba(247, 250, 255, 0.98);
      --input-border: rgba(16, 37, 80, 0.18);
      --footer-surface: rgba(232, 238, 249, 0.97);
      --footer-border: rgba(16, 37, 80, 0.24);
      --theme-menu-bg: rgba(247, 250, 255, 0.99);
      --theme-option-hover: rgba(16, 37, 80, 0.06);
      --theme-option-active: rgba(16, 37, 80, 0.11);
      --table-shell-border: rgba(16, 37, 80, 0.16);
      --table-head-bg: rgba(226, 234, 249, 0.96);
      --table-head-text: #0f244f;
      --timeline-shell-border: rgba(16, 37, 80, 0.16);
      --row-menu-panel-bg: rgba(247, 250, 255, 0.99);
      --row-menu-panel-border: rgba(16, 37, 80, 0.2);
      --row-menu-item-bg: rgba(235, 241, 252, 0.98);
      --row-menu-item-hover: rgba(213, 226, 248, 0.96);
    }
    html[data-theme="crimson-ink"] {
      --page-bg-start: #f8eef0;
      --page-bg-mid: #fff9fa;
      --page-bg-end: #f2e4e8;
      --page-sheen: rgba(155, 27, 46, 0.08);
      --nav-surface: rgba(255, 248, 249, 0.95);
      --nav-border: rgba(155, 27, 46, 0.26);
      --primary-start: #9b1b2e;
      --primary-end: #1b2a5b;
      --secondary-bg: rgba(255, 250, 250, 0.92);
      --secondary-text: #8f1b35;
      --secondary-border: rgba(155, 27, 46, 0.18);
      --accent-start: #c9a227;
      --accent-end: #efd47a;
      --accent-text: #1b2a5b;
      --surface-bg: rgba(255, 250, 250, 0.96);
      --card-bg: rgba(255, 250, 250, 0.98);
      --input-border: rgba(155, 27, 46, 0.18);
      --footer-surface: rgba(249, 235, 238, 0.97);
      --footer-border: rgba(155, 27, 46, 0.24);
      --theme-menu-bg: rgba(255, 250, 250, 0.99);
      --theme-option-hover: rgba(155, 27, 46, 0.06);
      --theme-option-active: rgba(155, 27, 46, 0.12);
      --table-shell-border: rgba(155, 27, 46, 0.16);
      --table-head-bg: rgba(248, 229, 233, 0.96);
      --table-head-text: #8f1b35;
      --timeline-shell-border: rgba(155, 27, 46, 0.16);
      --row-menu-panel-bg: rgba(255, 250, 250, 0.99);
      --row-menu-panel-border: rgba(155, 27, 46, 0.2);
      --row-menu-item-bg: rgba(252, 237, 240, 0.98);
      --row-menu-item-hover: rgba(245, 214, 220, 0.96);
    }
    html[data-theme="ivory-seal"] {
      --page-bg-start: #fbf7ee;
      --page-bg-mid: #fffdfa;
      --page-bg-end: #f3ead7;
      --page-sheen: rgba(201, 162, 39, 0.075);
      --nav-surface: rgba(255, 252, 244, 0.95);
      --nav-border: rgba(201, 162, 39, 0.28);
      --primary-start: #7d1630;
      --primary-end: #c9a227;
      --secondary-bg: rgba(255, 253, 247, 0.92);
      --secondary-text: #1b2a5b;
      --secondary-border: rgba(201, 162, 39, 0.24);
      --accent-start: #1b2a5b;
      --accent-end: #9b1b2e;
      --accent-text: #ffffff;
      --surface-bg: rgba(255, 253, 247, 0.96);
      --card-bg: rgba(255, 253, 247, 0.98);
      --input-border: rgba(201, 162, 39, 0.22);
      --footer-surface: rgba(248, 240, 224, 0.97);
      --footer-border: rgba(201, 162, 39, 0.26);
      --theme-menu-bg: rgba(255, 253, 247, 0.99);
      --theme-option-hover: rgba(201, 162, 39, 0.08);
      --theme-option-active: rgba(201, 162, 39, 0.15);
      --table-shell-border: rgba(201, 162, 39, 0.2);
      --table-head-bg: rgba(247, 235, 205, 0.96);
      --table-head-text: #65480b;
      --timeline-shell-border: rgba(201, 162, 39, 0.2);
      --row-menu-panel-bg: rgba(255, 252, 244, 0.99);
      --row-menu-panel-border: rgba(201, 162, 39, 0.22);
      --row-menu-item-bg: rgba(250, 240, 216, 0.98);
      --row-menu-item-hover: rgba(238, 220, 178, 0.96);
    }
    html[data-theme="executive-maroon"] {
      --page-bg-start: #f5eef2;
      --page-bg-mid: #fffafc;
      --page-bg-end: #eee6ed;
      --page-sheen: rgba(27, 42, 91, 0.05);
      --nav-surface: rgba(255, 250, 252, 0.95);
      --nav-border: rgba(92, 35, 73, 0.24);
      --primary-start: #5c2349;
      --primary-end: #1b2a5b;
      --secondary-bg: rgba(255, 250, 252, 0.92);
      --secondary-text: #5c2349;
      --secondary-border: rgba(92, 35, 73, 0.18);
      --accent-start: #c9a227;
      --accent-end: #9b1b2e;
      --accent-text: #ffffff;
      --surface-bg: rgba(255, 250, 252, 0.96);
      --card-bg: rgba(255, 250, 252, 0.98);
      --input-border: rgba(92, 35, 73, 0.18);
      --footer-surface: rgba(242, 233, 239, 0.97);
      --footer-border: rgba(92, 35, 73, 0.22);
      --theme-menu-bg: rgba(255, 250, 252, 0.99);
      --theme-option-hover: rgba(92, 35, 73, 0.06);
      --theme-option-active: rgba(92, 35, 73, 0.12);
      --table-shell-border: rgba(92, 35, 73, 0.16);
      --table-head-bg: rgba(239, 226, 236, 0.96);
      --table-head-text: #5c2349;
      --timeline-shell-border: rgba(92, 35, 73, 0.16);
      --row-menu-panel-bg: rgba(255, 250, 252, 0.99);
      --row-menu-panel-border: rgba(92, 35, 73, 0.2);
      --row-menu-item-bg: rgba(247, 235, 243, 0.98);
      --row-menu-item-hover: rgba(235, 215, 230, 0.96);
    }
    html[data-theme="heritage-white"] {
      --page-bg-start: #fcfcfb;
      --page-bg-mid: #ffffff;
      --page-bg-end: #f5f0e3;
      --page-sheen: rgba(27, 42, 91, 0.035);
      --nav-surface: rgba(255, 255, 255, 0.97);
      --nav-border: rgba(27, 42, 91, 0.18);
      --phase-text: #61708f;
      --primary-start: #1b2a5b;
      --primary-end: #9b1b2e;
      --primary-border: rgba(27, 42, 91, 0.9);
      --secondary-bg: rgba(255, 255, 255, 0.95);
      --secondary-text: #1b2a5b;
      --secondary-border: rgba(201, 162, 39, 0.18);
      --accent-start: #c9a227;
      --accent-end: #e3c86f;
      --accent-border: rgba(201, 162, 39, 0.58);
      --accent-text: #16274e;
      --hero-overlay-start: rgba(20, 33, 70, 0.88);
      --hero-overlay-end: rgba(155, 27, 46, 0.7);
      --surface-bg: rgba(255, 255, 255, 0.97);
      --surface-bg-strong: rgba(255, 255, 255, 0.995);
      --surface-border: rgba(27, 42, 91, 0.08);
      --card-bg: rgba(255, 255, 255, 0.985);
      --card-border: rgba(27, 42, 91, 0.08);
      --input-bg: rgba(255, 255, 255, 0.995);
      --input-border: rgba(27, 42, 91, 0.12);
      --muted-text: #62708d;
      --banner-start: rgba(27, 42, 91, 0.96);
      --banner-end: rgba(201, 162, 39, 0.86);
      --drawer-bg-start: rgba(255, 255, 255, 0.99);
      --drawer-bg-end: rgba(250, 246, 236, 0.98);
      --footer-surface: rgba(250, 248, 242, 0.98);
      --footer-border: rgba(27, 42, 91, 0.18);
      --footer-note: #64708b;
      --theme-menu-bg: rgba(255, 255, 255, 0.99);
      --theme-option-hover: rgba(27, 42, 91, 0.045);
      --theme-option-active: rgba(27, 42, 91, 0.08);
      --toolbar-icon-filter: drop-shadow(0 4px 8px rgba(27, 42, 91, 0.14));
      --table-shell-border: rgba(27, 42, 91, 0.12);
      --table-shell-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(249, 245, 236, 0.95));
      --table-head-bg: rgba(247, 243, 233, 0.92);
      --table-head-text: #1b2a5b;
      --table-line: rgba(63, 74, 96, 0.16);
      --table-line-strong: rgba(49, 60, 82, 0.28);
      --table-row-hover: rgba(27, 42, 91, 0.038);
      --timeline-shell-bg: linear-gradient(180deg, rgba(255,255,255,0.99), rgba(249,245,236,0.95));
      --timeline-shell-border: rgba(201, 162, 39, 0.14);
      --row-menu-panel-bg: rgba(255, 255, 255, 0.99);
      --row-menu-panel-border: rgba(27, 42, 91, 0.14);
      --row-menu-item-bg: rgba(250, 246, 237, 0.98);
      --row-menu-item-hover: rgba(240, 229, 202, 0.96);
      --row-menu-item-text: #1b2a5b;
    }
    html[data-theme="trust-ledger"] {
      --page-bg-start: #edf2f9;
      --page-bg-mid: #f9fbff;
      --page-bg-end: #f3ecdc;
      --page-sheen: rgba(27, 42, 91, 0.085);
      --nav-surface: rgba(245, 248, 253, 0.96);
      --nav-border: rgba(17, 34, 76, 0.24);
      --phase-text: #53637f;
      --primary-start: #11224c;
      --primary-end: #36548e;
      --primary-border: rgba(17, 34, 76, 0.9);
      --secondary-bg: rgba(255, 255, 255, 0.94);
      --secondary-text: #11224c;
      --secondary-border: rgba(17, 34, 76, 0.16);
      --accent-start: #c9a227;
      --accent-end: #dbbb5b;
      --accent-border: rgba(201, 162, 39, 0.6);
      --accent-text: #11224c;
      --hero-overlay-start: rgba(17, 34, 76, 0.92);
      --hero-overlay-end: rgba(155, 27, 46, 0.68);
      --surface-bg: rgba(248, 251, 255, 0.96);
      --surface-bg-strong: rgba(255, 255, 255, 0.985);
      --surface-border: rgba(17, 34, 76, 0.1);
      --card-bg: rgba(250, 252, 255, 0.985);
      --card-border: rgba(17, 34, 76, 0.1);
      --input-bg: rgba(255, 255, 255, 0.995);
      --input-border: rgba(17, 34, 76, 0.14);
      --muted-text: #56647e;
      --banner-start: rgba(17, 34, 76, 0.97);
      --banner-end: rgba(201, 162, 39, 0.84);
      --drawer-bg-start: rgba(249, 251, 255, 0.99);
      --drawer-bg-end: rgba(245, 239, 225, 0.98);
      --footer-surface: rgba(238, 243, 250, 0.98);
      --footer-border: rgba(17, 34, 76, 0.2);
      --footer-note: #56647e;
      --theme-menu-bg: rgba(249, 251, 255, 0.99);
      --theme-option-hover: rgba(17, 34, 76, 0.05);
      --theme-option-active: rgba(17, 34, 76, 0.085);
      --toolbar-icon-filter: drop-shadow(0 4px 8px rgba(17, 34, 76, 0.16));
      --table-shell-border: rgba(17, 34, 76, 0.14);
      --table-shell-bg: linear-gradient(180deg, rgba(250, 252, 255, 0.99), rgba(242, 236, 221, 0.95));
      --table-head-bg: rgba(232, 239, 249, 0.95);
      --table-head-text: #11224c;
      --table-line: rgba(54, 73, 108, 0.18);
      --table-line-strong: rgba(40, 58, 92, 0.3);
      --table-row-hover: rgba(17, 34, 76, 0.045);
      --timeline-shell-bg: linear-gradient(180deg, rgba(250,252,255,0.99), rgba(242,236,221,0.95));
      --timeline-shell-border: rgba(201, 162, 39, 0.16);
      --row-menu-panel-bg: rgba(248, 251, 255, 0.99);
      --row-menu-panel-border: rgba(17, 34, 76, 0.16);
      --row-menu-item-bg: rgba(236, 242, 250, 0.98);
      --row-menu-item-hover: rgba(220, 230, 245, 0.96);
      --row-menu-item-text: #11224c;
    }
    html[data-theme="midnight-obsidian"] {
      --page-bg-start: #d6dcea;
      --page-bg-mid: #e9eef6;
      --page-bg-end: #cfc7d7;
      --page-sheen: rgba(12, 21, 47, 0.15);
      --nav-surface: rgba(235, 240, 249, 0.94);
      --nav-border: rgba(32, 46, 86, 0.24);
      --phase-text: #596783;
      --primary-start: #101b3c;
      --primary-end: #253763;
      --primary-border: rgba(16, 27, 60, 0.9);
      --secondary-text: #102248;
      --secondary-border: rgba(32, 46, 86, 0.18);
      --accent-start: #b48a22;
      --accent-end: #dcc57d;
      --accent-text: #102248;
      --hero-overlay-start: rgba(7, 12, 29, 0.94);
      --hero-overlay-end: rgba(53, 31, 74, 0.86);
      --hero-burst-one: rgba(214, 197, 125, 0.14);
      --hero-burst-two: rgba(111, 52, 130, 0.18);
      --hero-burst-three: rgba(18, 28, 58, 0.3);
      --surface-bg: rgba(248, 250, 255, 0.96);
      --surface-bg-strong: rgba(253, 254, 255, 0.988);
      --card-bg: rgba(248, 251, 255, 0.98);
      --input-bg: rgba(252, 253, 255, 0.995);
      --input-border: rgba(32, 46, 86, 0.16);
      --login-shell-start: rgba(10, 17, 39, 0.92);
      --login-shell-end: rgba(46, 39, 79, 0.88);
      --login-shell-border: rgba(223, 198, 122, 0.22);
      --login-shell-shadow: 0 34px 72px rgba(5, 10, 24, 0.34);
      --login-brand-bg-start: rgba(250, 251, 255, 0.97);
      --login-brand-bg-end: rgba(229, 234, 244, 0.94);
      --login-brand-border: rgba(180, 138, 34, 0.34);
      --login-panel-bg: rgba(249, 251, 255, 0.94);
      --login-panel-border: rgba(214, 221, 239, 0.58);
      --muted-text: #5a6680;
      --banner-start: rgba(16, 27, 60, 0.96);
      --banner-end: rgba(73, 44, 80, 0.84);
      --footer-surface: rgba(233, 237, 246, 0.98);
      --footer-border: rgba(32, 46, 86, 0.22);
      --footer-note: #59667f;
      --theme-menu-bg: rgba(248, 250, 255, 0.99);
      --theme-option-hover: rgba(32, 46, 86, 0.05);
      --theme-option-active: rgba(32, 46, 86, 0.09);
      --table-shell-border: rgba(32, 46, 86, 0.14);
      --table-shell-bg: linear-gradient(180deg, rgba(250, 252, 255, 0.99), rgba(237, 241, 249, 0.95));
      --table-head-bg: rgba(228, 235, 248, 0.95);
      --table-head-text: #102248;
      --table-row-hover: rgba(16, 27, 60, 0.042);
      --timeline-shell-bg: linear-gradient(180deg, rgba(251,253,255,0.99), rgba(237,241,249,0.95));
      --timeline-shell-border: rgba(185, 147, 41, 0.18);
      --row-menu-panel-bg: rgba(247, 250, 255, 0.99);
      --row-menu-panel-border: rgba(32, 46, 86, 0.16);
      --row-menu-item-bg: rgba(236, 241, 250, 0.98);
      --row-menu-item-hover: rgba(220, 228, 244, 0.96);
      --row-menu-item-text: #102248;
    }
    html[data-theme="silver-mist"] {
      --page-bg-start: #edf2f8;
      --page-bg-mid: #ffffff;
      --page-bg-end: #e2e8f0;
      --page-sheen: rgba(90, 104, 128, 0.06);
      --nav-surface: rgba(255, 255, 255, 0.96);
      --nav-border: rgba(90, 104, 128, 0.18);
      --phase-text: #6b768c;
      --primary-start: #54647d;
      --primary-end: #7a879a;
      --primary-border: rgba(84, 100, 125, 0.72);
      --primary-text: #ffffff;
      --secondary-text: #324763;
      --secondary-border: rgba(90, 104, 128, 0.14);
      --accent-start: #c9a227;
      --accent-end: #e1c56e;
      --accent-text: #223759;
      --hero-overlay-start: rgba(201, 208, 220, 0.74);
      --hero-overlay-end: rgba(126, 140, 166, 0.64);
      --hero-burst-one: rgba(255, 255, 255, 0.34);
      --hero-burst-two: rgba(175, 184, 200, 0.2);
      --hero-burst-three: rgba(94, 110, 136, 0.18);
      --surface-bg: rgba(255, 255, 255, 0.97);
      --surface-bg-strong: rgba(255, 255, 255, 0.995);
      --card-bg: rgba(255, 255, 255, 0.99);
      --input-bg: rgba(255, 255, 255, 0.998);
      --input-border: rgba(90, 104, 128, 0.14);
      --login-shell-start: rgba(246, 248, 252, 0.92);
      --login-shell-end: rgba(213, 220, 231, 0.86);
      --login-shell-border: rgba(103, 119, 144, 0.22);
      --login-shell-shadow: 0 28px 60px rgba(76, 91, 116, 0.18);
      --login-brand-bg-start: rgba(255, 255, 255, 0.99);
      --login-brand-bg-end: rgba(242, 245, 249, 0.96);
      --login-brand-border: rgba(103, 119, 144, 0.18);
      --login-panel-bg: rgba(255, 255, 255, 0.94);
      --login-panel-border: rgba(120, 135, 158, 0.18);
      --muted-text: #6b768c;
      --banner-start: rgba(84, 100, 125, 0.94);
      --banner-end: rgba(201, 162, 39, 0.8);
      --footer-surface: rgba(245, 247, 250, 0.98);
      --footer-border: rgba(90, 104, 128, 0.16);
      --footer-note: #6b768c;
      --theme-menu-bg: rgba(255, 255, 255, 0.99);
      --theme-option-hover: rgba(90, 104, 128, 0.045);
      --theme-option-active: rgba(90, 104, 128, 0.08);
      --table-shell-border: rgba(90, 104, 128, 0.12);
      --table-shell-bg: linear-gradient(180deg, rgba(255,255,255,0.99), rgba(244,246,250,0.95));
      --table-head-bg: rgba(242, 245, 249, 0.95);
      --table-head-text: #324763;
      --table-row-hover: rgba(90, 104, 128, 0.036);
      --row-menu-panel-bg: rgba(255,255,255,0.99);
      --row-menu-panel-border: rgba(90,104,128,0.15);
      --row-menu-item-bg: rgba(245,247,250,0.98);
      --row-menu-item-hover: rgba(231,236,243,0.96);
      --row-menu-item-text: #324763;
    }
    html[data-theme="studio-plain"] {
      --page-bg-start: #f7f9fc;
      --page-bg-mid: #ffffff;
      --page-bg-end: #eef2f8;
      --page-sheen: rgba(27, 42, 91, 0.035);
      --nav-surface: rgba(255, 255, 255, 0.97);
      --nav-border: rgba(27, 42, 91, 0.18);
      --phase-text: #65728e;
      --primary-start: #1b2a5b;
      --primary-end: #31467d;
      --secondary-text: #1b2a5b;
      --secondary-border: rgba(27, 42, 91, 0.12);
      --accent-start: #c9a227;
      --accent-end: #dfc26b;
      --accent-text: #1b2a5b;
      --hero-overlay-start: rgba(240, 244, 251, 0.86);
      --hero-overlay-end: rgba(221, 229, 242, 0.8);
      --hero-burst-one: rgba(201, 162, 39, 0.08);
      --hero-burst-two: rgba(27, 42, 91, 0.06);
      --hero-burst-three: rgba(27, 42, 91, 0.1);
      --surface-bg: rgba(255, 255, 255, 0.975);
      --surface-bg-strong: rgba(255, 255, 255, 0.998);
      --card-bg: rgba(255, 255, 255, 0.99);
      --input-bg: rgba(255, 255, 255, 0.998);
      --input-border: rgba(27, 42, 91, 0.12);
      --login-shell-start: rgba(255, 255, 255, 0.9);
      --login-shell-end: rgba(241, 245, 251, 0.88);
      --login-shell-border: rgba(27, 42, 91, 0.12);
      --login-shell-shadow: 0 28px 54px rgba(27, 42, 91, 0.1);
      --login-brand-bg-start: rgba(255, 255, 255, 1);
      --login-brand-bg-end: rgba(247, 249, 252, 0.98);
      --login-brand-border: rgba(27, 42, 91, 0.1);
      --login-panel-bg: rgba(255, 255, 255, 0.97);
      --login-panel-border: rgba(27, 42, 91, 0.1);
      --muted-text: #62708d;
      --banner-start: rgba(27, 42, 91, 0.94);
      --banner-end: rgba(201, 162, 39, 0.8);
      --footer-surface: rgba(249, 250, 252, 0.98);
      --footer-border: rgba(27, 42, 91, 0.16);
      --footer-note: #65728e;
      --theme-menu-bg: rgba(255, 255, 255, 0.99);
      --theme-option-hover: rgba(27, 42, 91, 0.04);
      --theme-option-active: rgba(27, 42, 91, 0.075);
      --table-shell-border: rgba(27, 42, 91, 0.1);
      --table-shell-bg: linear-gradient(180deg, rgba(255,255,255,0.99), rgba(247,249,252,0.95));
      --table-head-bg: rgba(244, 247, 251, 0.95);
      --table-head-text: #1b2a5b;
      --table-row-hover: rgba(27, 42, 91, 0.032);
      --row-menu-panel-bg: rgba(255,255,255,0.99);
      --row-menu-panel-border: rgba(27,42,91,0.14);
      --row-menu-item-bg: rgba(247,249,252,0.98);
      --row-menu-item-hover: rgba(236,240,247,0.96);
      --row-menu-item-text: #1b2a5b;
    }
    html[data-theme="sandstone-ledger"] {
      --page-bg-start: #f3e8d3;
      --page-bg-mid: #fbf6eb;
      --page-bg-end: #e4d1b0;
      --page-sheen: rgba(143, 106, 39, 0.08);
      --nav-surface: rgba(255, 251, 244, 0.95);
      --nav-border: rgba(143, 106, 39, 0.22);
      --phase-text: #7a6948;
      --primary-start: #6d5530;
      --primary-end: #9c7b46;
      --primary-border: rgba(109, 85, 48, 0.74);
      --primary-text: #fffdf8;
      --secondary-text: #5c4727;
      --secondary-border: rgba(143, 106, 39, 0.18);
      --accent-start: #1b2a5b;
      --accent-end: #485f94;
      --accent-text: #ffffff;
      --hero-overlay-start: rgba(93, 68, 33, 0.86);
      --hero-overlay-end: rgba(148, 111, 62, 0.72);
      --hero-burst-one: rgba(230, 196, 124, 0.18);
      --hero-burst-two: rgba(114, 77, 36, 0.14);
      --hero-burst-three: rgba(82, 61, 29, 0.22);
      --surface-bg: rgba(255, 252, 245, 0.96);
      --surface-bg-strong: rgba(255, 254, 249, 0.99);
      --card-bg: rgba(255, 252, 246, 0.98);
      --input-bg: rgba(255, 253, 248, 0.997);
      --input-border: rgba(143, 106, 39, 0.16);
      --login-shell-start: rgba(121, 92, 55, 0.88);
      --login-shell-end: rgba(185, 152, 104, 0.84);
      --login-shell-border: rgba(251, 236, 200, 0.24);
      --login-shell-shadow: 0 30px 62px rgba(74, 55, 25, 0.24);
      --login-brand-bg-start: rgba(255, 250, 239, 0.99);
      --login-brand-bg-end: rgba(241, 229, 201, 0.96);
      --login-brand-border: rgba(143, 106, 39, 0.24);
      --login-panel-bg: rgba(255, 252, 245, 0.95);
      --login-panel-border: rgba(251, 241, 217, 0.44);
      --muted-text: #76684b;
      --banner-start: rgba(109, 85, 48, 0.94);
      --banner-end: rgba(27, 42, 91, 0.8);
      --footer-surface: rgba(247, 240, 227, 0.98);
      --footer-border: rgba(143, 106, 39, 0.2);
      --footer-note: #76684b;
      --theme-menu-bg: rgba(255, 252, 245, 0.99);
      --theme-option-hover: rgba(143, 106, 39, 0.055);
      --theme-option-active: rgba(143, 106, 39, 0.095);
      --table-shell-border: rgba(143, 106, 39, 0.16);
      --table-shell-bg: linear-gradient(180deg, rgba(255,253,248,0.99), rgba(245,235,214,0.95));
      --table-head-bg: rgba(243, 231, 203, 0.95);
      --table-head-text: #5c4727;
      --table-row-hover: rgba(143, 106, 39, 0.04);
      --row-menu-panel-bg: rgba(255,252,246,0.99);
      --row-menu-panel-border: rgba(143,106,39,0.18);
      --row-menu-item-bg: rgba(248,239,218,0.98);
      --row-menu-item-hover: rgba(236,220,182,0.96);
      --row-menu-item-text: #5c4727;
    }
    html[data-theme="harbor-blue"] {
      --page-bg-start: #dfeef3;
      --page-bg-mid: #f8fdff;
      --page-bg-end: #d7e6e8;
      --page-sheen: rgba(33, 76, 113, 0.07);
      --nav-surface: rgba(247, 252, 253, 0.95);
      --nav-border: rgba(33, 76, 113, 0.2);
      --phase-text: #5b6f83;
      --primary-start: #1f4b73;
      --primary-end: #3f7193;
      --primary-border: rgba(31, 75, 115, 0.76);
      --primary-text: #ffffff;
      --secondary-text: #1f4b73;
      --secondary-border: rgba(33, 76, 113, 0.16);
      --accent-start: #c9a227;
      --accent-end: #d8c17f;
      --accent-text: #18365a;
      --hero-overlay-start: rgba(18, 56, 86, 0.82);
      --hero-overlay-end: rgba(73, 132, 146, 0.68);
      --hero-burst-one: rgba(207, 189, 132, 0.16);
      --hero-burst-two: rgba(116, 184, 198, 0.18);
      --hero-burst-three: rgba(31, 75, 115, 0.2);
      --surface-bg: rgba(249, 253, 255, 0.96);
      --surface-bg-strong: rgba(254, 255, 255, 0.99);
      --card-bg: rgba(249, 253, 255, 0.98);
      --input-bg: rgba(254, 255, 255, 0.997);
      --input-border: rgba(33, 76, 113, 0.15);
      --login-shell-start: rgba(24, 77, 113, 0.84);
      --login-shell-end: rgba(111, 171, 173, 0.8);
      --login-shell-border: rgba(214, 237, 239, 0.26);
      --login-shell-shadow: 0 30px 62px rgba(19, 66, 96, 0.22);
      --login-brand-bg-start: rgba(251, 255, 255, 0.99);
      --login-brand-bg-end: rgba(230, 241, 241, 0.96);
      --login-brand-border: rgba(78, 129, 149, 0.2);
      --login-panel-bg: rgba(250, 253, 255, 0.95);
      --login-panel-border: rgba(214, 232, 238, 0.42);
      --muted-text: #5c6f80;
      --banner-start: rgba(31, 75, 115, 0.94);
      --banner-end: rgba(201, 162, 39, 0.8);
      --footer-surface: rgba(239, 247, 248, 0.98);
      --footer-border: rgba(33, 76, 113, 0.18);
      --footer-note: #5c6f80;
      --theme-menu-bg: rgba(250,254,255,0.99);
      --theme-option-hover: rgba(33,76,113,0.05);
      --theme-option-active: rgba(33,76,113,0.085);
      --table-shell-border: rgba(33,76,113,0.14);
      --table-shell-bg: linear-gradient(180deg, rgba(250,254,255,0.99), rgba(234,243,244,0.95));
      --table-head-bg: rgba(228, 239, 243, 0.95);
      --table-head-text: #1f4b73;
      --table-row-hover: rgba(33, 76, 113, 0.036);
      --row-menu-panel-bg: rgba(249,253,255,0.99);
      --row-menu-panel-border: rgba(33,76,113,0.15);
      --row-menu-item-bg: rgba(236,244,246,0.98);
      --row-menu-item-hover: rgba(220,234,239,0.96);
      --row-menu-item-text: #1f4b73;
    }
    html[data-theme="ruby-twilight"] {
      --page-bg-start: #f3e7eb;
      --page-bg-mid: #fdf8fa;
      --page-bg-end: #eadde3;
      --page-sheen: rgba(127, 32, 56, 0.07);
      --nav-surface: rgba(255, 250, 251, 0.95);
      --nav-border: rgba(127, 32, 56, 0.2);
      --phase-text: #7b5361;
      --primary-start: #7f2038;
      --primary-end: #b64a62;
      --primary-border: rgba(127, 32, 56, 0.76);
      --primary-text: #ffffff;
      --secondary-text: #7f2038;
      --secondary-border: rgba(127, 32, 56, 0.16);
      --accent-start: #1b2a5b;
      --accent-end: #415b95;
      --accent-text: #ffffff;
      --hero-overlay-start: rgba(74, 17, 40, 0.88);
      --hero-overlay-end: rgba(117, 52, 92, 0.7);
      --hero-burst-one: rgba(241, 198, 174, 0.14);
      --hero-burst-two: rgba(189, 76, 111, 0.18);
      --hero-burst-three: rgba(84, 20, 44, 0.22);
      --surface-bg: rgba(255, 250, 251, 0.965);
      --surface-bg-strong: rgba(255, 253, 253, 0.992);
      --card-bg: rgba(255, 250, 251, 0.982);
      --input-bg: rgba(255, 253, 253, 0.997);
      --input-border: rgba(127, 32, 56, 0.15);
      --login-shell-start: rgba(112, 23, 49, 0.88);
      --login-shell-end: rgba(180, 79, 111, 0.82);
      --login-shell-border: rgba(250, 214, 223, 0.24);
      --login-shell-shadow: 0 32px 66px rgba(71, 16, 32, 0.24);
      --login-brand-bg-start: rgba(255, 250, 251, 0.99);
      --login-brand-bg-end: rgba(246, 233, 236, 0.96);
      --login-brand-border: rgba(160, 66, 94, 0.2);
      --login-panel-bg: rgba(255, 250, 251, 0.95);
      --login-panel-border: rgba(248, 223, 229, 0.42);
      --muted-text: #765664;
      --banner-start: rgba(127, 32, 56, 0.94);
      --banner-end: rgba(27, 42, 91, 0.82);
      --footer-surface: rgba(247, 238, 241, 0.98);
      --footer-border: rgba(127, 32, 56, 0.18);
      --footer-note: #765664;
      --theme-menu-bg: rgba(255,251,252,0.99);
      --theme-option-hover: rgba(127,32,56,0.05);
      --theme-option-active: rgba(127,32,56,0.095);
      --table-shell-border: rgba(127,32,56,0.14);
      --table-shell-bg: linear-gradient(180deg, rgba(255,252,253,0.99), rgba(246,236,239,0.95));
      --table-head-bg: rgba(245, 229, 233, 0.95);
      --table-head-text: #7f2038;
      --table-row-hover: rgba(127, 32, 56, 0.036);
      --row-menu-panel-bg: rgba(255,251,252,0.99);
      --row-menu-panel-border: rgba(127,32,56,0.15);
      --row-menu-item-bg: rgba(248,236,239,0.98);
      --row-menu-item-hover: rgba(239,220,226,0.96);
      --row-menu-item-text: #7f2038;
    }
    html[data-theme="porcelain-day"] {
      --page-bg-start: #fbfaf4;
      --page-bg-mid: #fffefb;
      --page-bg-end: #ece2ce;
      --page-sheen: rgba(69, 109, 166, 0.05);
      --nav-surface: rgba(255, 255, 251, 0.96);
      --nav-border: rgba(69, 109, 166, 0.18);
      --phase-text: #6b6f81;
      --primary-start: #456da6;
      --primary-end: #6b8cc2;
      --primary-border: rgba(69, 109, 166, 0.72);
      --primary-text: #ffffff;
      --secondary-text: #36537d;
      --secondary-border: rgba(69, 109, 166, 0.14);
      --accent-start: #c9a227;
      --accent-end: #ead596;
      --accent-text: #36537d;
      --hero-overlay-start: rgba(235, 239, 246, 0.78);
      --hero-overlay-end: rgba(205, 193, 161, 0.66);
      --hero-burst-one: rgba(234, 213, 150, 0.16);
      --hero-burst-two: rgba(77, 124, 189, 0.12);
      --hero-burst-three: rgba(69, 109, 166, 0.12);
      --surface-bg: rgba(255, 255, 251, 0.97);
      --surface-bg-strong: rgba(255, 255, 253, 0.995);
      --card-bg: rgba(255, 255, 251, 0.985);
      --input-bg: rgba(255, 255, 253, 0.998);
      --input-border: rgba(69, 109, 166, 0.14);
      --login-shell-start: rgba(233, 236, 243, 0.88);
      --login-shell-end: rgba(206, 194, 163, 0.78);
      --login-shell-border: rgba(69, 109, 166, 0.18);
      --login-shell-shadow: 0 28px 58px rgba(72, 95, 134, 0.16);
      --login-brand-bg-start: rgba(255, 255, 253, 1);
      --login-brand-bg-end: rgba(243, 238, 227, 0.97);
      --login-brand-border: rgba(69, 109, 166, 0.16);
      --login-panel-bg: rgba(255, 255, 252, 0.96);
      --login-panel-border: rgba(226, 219, 202, 0.52);
      --muted-text: #6b7080;
      --banner-start: rgba(69, 109, 166, 0.92);
      --banner-end: rgba(201, 162, 39, 0.78);
      --footer-surface: rgba(247, 244, 236, 0.98);
      --footer-border: rgba(69, 109, 166, 0.16);
      --footer-note: #6b7080;
      --theme-menu-bg: rgba(255,255,252,0.99);
      --theme-option-hover: rgba(69,109,166,0.045);
      --theme-option-active: rgba(69,109,166,0.08);
      --table-shell-border: rgba(69,109,166,0.12);
      --table-shell-bg: linear-gradient(180deg, rgba(255,255,253,0.99), rgba(243,238,226,0.95));
      --table-head-bg: rgba(241, 236, 223, 0.95);
      --table-head-text: #36537d;
      --table-row-hover: rgba(69, 109, 166, 0.03);
      --row-menu-panel-bg: rgba(255,255,252,0.99);
      --row-menu-panel-border: rgba(69,109,166,0.14);
      --row-menu-item-bg: rgba(247,242,232,0.98);
      --row-menu-item-hover: rgba(236,228,211,0.96);
      --row-menu-item-text: #36537d;
    }
    html[data-theme="command-brick"] {
      --page-bg-start: #efe0d5;
      --page-bg-mid: #faf4ef;
      --page-bg-end: #e2d0c4;
      --page-sheen: rgba(138, 44, 35, 0.08);
      --nav-surface: rgba(255, 250, 246, 0.95);
      --nav-border: rgba(138, 44, 35, 0.22);
      --phase-text: #7b5f56;
      --primary-start: #8a2c23;
      --primary-end: #b35b45;
      --primary-border: rgba(138, 44, 35, 0.76);
      --primary-text: #ffffff;
      --secondary-text: #762e28;
      --secondary-border: rgba(138, 44, 35, 0.16);
      --accent-start: #1b2a5b;
      --accent-end: #415b95;
      --accent-text: #ffffff;
      --hero-overlay-start: rgba(118, 38, 28, 0.88);
      --hero-overlay-end: rgba(35, 55, 106, 0.76);
      --hero-burst-one: rgba(224, 172, 118, 0.16);
      --hero-burst-two: rgba(196, 86, 66, 0.18);
      --hero-burst-three: rgba(35, 55, 106, 0.18);
      --surface-bg: rgba(255, 250, 246, 0.965);
      --surface-bg-strong: rgba(255, 253, 251, 0.992);
      --card-bg: rgba(255, 250, 246, 0.982);
      --input-bg: rgba(255, 253, 251, 0.997);
      --input-border: rgba(138, 44, 35, 0.15);
      --login-shell-start: rgba(128, 41, 31, 0.88);
      --login-shell-end: rgba(40, 60, 115, 0.78);
      --login-shell-border: rgba(243, 216, 200, 0.24);
      --login-shell-shadow: 0 32px 64px rgba(72, 29, 24, 0.24);
      --login-brand-bg-start: rgba(255, 251, 248, 0.99);
      --login-brand-bg-end: rgba(242, 231, 223, 0.96);
      --login-brand-border: rgba(138, 44, 35, 0.2);
      --login-panel-bg: rgba(255, 250, 247, 0.95);
      --login-panel-border: rgba(243, 224, 214, 0.46);
      --muted-text: #77635d;
      --banner-start: rgba(138, 44, 35, 0.94);
      --banner-end: rgba(27, 42, 91, 0.84);
      --footer-surface: rgba(246, 237, 232, 0.98);
      --footer-border: rgba(138, 44, 35, 0.18);
      --footer-note: #77635d;
      --theme-menu-bg: rgba(255,251,247,0.99);
      --theme-option-hover: rgba(138,44,35,0.05);
      --theme-option-active: rgba(138,44,35,0.095);
      --table-shell-border: rgba(138,44,35,0.14);
      --table-shell-bg: linear-gradient(180deg, rgba(255,252,249,0.99), rgba(244,232,223,0.95));
      --table-head-bg: rgba(243, 228, 218, 0.95);
      --table-head-text: #762e28;
      --table-row-hover: rgba(138, 44, 35, 0.034);
      --row-menu-panel-bg: rgba(255,251,248,0.99);
      --row-menu-panel-border: rgba(138,44,35,0.15);
      --row-menu-item-bg: rgba(246,233,224,0.98);
      --row-menu-item-hover: rgba(236,216,202,0.96);
      --row-menu-item-text: #762e28;
    }
    html[data-theme="cobalt-ceramic"] {
      --page-bg-start: #eef3fa;
      --page-bg-mid: #fcfdff;
      --page-bg-end: #f0ece3;
      --page-sheen: rgba(31, 75, 134, 0.06);
      --nav-surface: rgba(251, 253, 255, 0.95);
      --nav-border: rgba(31, 75, 134, 0.2);
      --phase-text: #5d6d84;
      --primary-start: #1f4b86;
      --primary-end: #5f86bb;
      --primary-border: rgba(31, 75, 134, 0.74);
      --primary-text: #ffffff;
      --secondary-text: #1f4b86;
      --secondary-border: rgba(31, 75, 134, 0.14);
      --accent-start: #c9a227;
      --accent-end: #e3cd86;
      --accent-text: #1f4b86;
      --hero-overlay-start: rgba(230, 238, 250, 0.8);
      --hero-overlay-end: rgba(190, 204, 227, 0.68);
      --hero-burst-one: rgba(227, 205, 134, 0.16);
      --hero-burst-two: rgba(92, 145, 201, 0.16);
      --hero-burst-three: rgba(31, 75, 134, 0.14);
      --surface-bg: rgba(252, 254, 255, 0.968);
      --surface-bg-strong: rgba(255, 255, 255, 0.994);
      --card-bg: rgba(252, 254, 255, 0.982);
      --input-bg: rgba(255, 255, 255, 0.998);
      --input-border: rgba(31, 75, 134, 0.14);
      --login-shell-start: rgba(237, 244, 252, 0.9);
      --login-shell-end: rgba(195, 211, 235, 0.82);
      --login-shell-border: rgba(31, 75, 134, 0.18);
      --login-shell-shadow: 0 28px 58px rgba(39, 73, 126, 0.16);
      --login-brand-bg-start: rgba(255, 255, 255, 1);
      --login-brand-bg-end: rgba(242, 246, 252, 0.97);
      --login-brand-border: rgba(31, 75, 134, 0.16);
      --login-panel-bg: rgba(255, 255, 255, 0.97);
      --login-panel-border: rgba(220, 229, 243, 0.54);
      --muted-text: #5e6f81;
      --banner-start: rgba(31, 75, 134, 0.92);
      --banner-end: rgba(201, 162, 39, 0.78);
      --footer-surface: rgba(244, 248, 252, 0.98);
      --footer-border: rgba(31, 75, 134, 0.16);
      --footer-note: #5e6f81;
      --theme-menu-bg: rgba(252,254,255,0.99);
      --theme-option-hover: rgba(31,75,134,0.045);
      --theme-option-active: rgba(31,75,134,0.08);
      --table-shell-border: rgba(31,75,134,0.12);
      --table-shell-bg: linear-gradient(180deg, rgba(253,255,255,0.99), rgba(242,244,238,0.95));
      --table-head-bg: rgba(236, 242, 248, 0.95);
      --table-head-text: #1f4b86;
      --table-row-hover: rgba(31, 75, 134, 0.03);
      --row-menu-panel-bg: rgba(252,254,255,0.99);
      --row-menu-panel-border: rgba(31,75,134,0.14);
      --row-menu-item-bg: rgba(240,245,249,0.98);
      --row-menu-item-hover: rgba(226,235,243,0.96);
      --row-menu-item-text: #1f4b86;
    }
    html[data-theme="auric-night"] {
      --page-bg-start: #e7e0cf;
      --page-bg-mid: #f5efe2;
      --page-bg-end: #d7cfbf;
      --page-sheen: rgba(122, 100, 27, 0.08);
      --nav-surface: rgba(252, 248, 240, 0.95);
      --nav-border: rgba(122, 100, 27, 0.22);
      --phase-text: #6c654f;
      --primary-start: #7a641b;
      --primary-end: #b59235;
      --primary-border: rgba(122, 100, 27, 0.76);
      --primary-text: #18254a;
      --secondary-text: #514523;
      --secondary-border: rgba(122, 100, 27, 0.16);
      --accent-start: #18254a;
      --accent-end: #324773;
      --accent-text: #ffffff;
      --hero-overlay-start: rgba(28, 37, 70, 0.9);
      --hero-overlay-end: rgba(122, 100, 27, 0.76);
      --hero-burst-one: rgba(215, 187, 102, 0.18);
      --hero-burst-two: rgba(91, 71, 21, 0.16);
      --hero-burst-three: rgba(24, 37, 74, 0.24);
      --surface-bg: rgba(255, 252, 246, 0.965);
      --surface-bg-strong: rgba(255, 253, 249, 0.992);
      --card-bg: rgba(255, 252, 246, 0.982);
      --input-bg: rgba(255, 253, 249, 0.997);
      --input-border: rgba(122, 100, 27, 0.15);
      --login-shell-start: rgba(31, 39, 71, 0.9);
      --login-shell-end: rgba(129, 104, 28, 0.82);
      --login-shell-border: rgba(229, 208, 147, 0.24);
      --login-shell-shadow: 0 32px 68px rgba(19, 24, 46, 0.28);
      --login-brand-bg-start: rgba(255, 252, 246, 0.99);
      --login-brand-bg-end: rgba(243, 233, 208, 0.96);
      --login-brand-border: rgba(122, 100, 27, 0.22);
      --login-panel-bg: rgba(255, 252, 246, 0.95);
      --login-panel-border: rgba(241, 229, 192, 0.46);
      --muted-text: #71674f;
      --banner-start: rgba(122, 100, 27, 0.94);
      --banner-end: rgba(24, 37, 74, 0.84);
      --footer-surface: rgba(248, 242, 230, 0.98);
      --footer-border: rgba(122, 100, 27, 0.18);
      --footer-note: #71674f;
      --theme-menu-bg: rgba(255,252,246,0.99);
      --theme-option-hover: rgba(122,100,27,0.05);
      --theme-option-active: rgba(122,100,27,0.095);
      --table-shell-border: rgba(122,100,27,0.14);
      --table-shell-bg: linear-gradient(180deg, rgba(255,252,247,0.99), rgba(244,236,220,0.95));
      --table-head-bg: rgba(243, 233, 208, 0.95);
      --table-head-text: #514523;
      --table-row-hover: rgba(122, 100, 27, 0.036);
      --row-menu-panel-bg: rgba(255,252,246,0.99);
      --row-menu-panel-border: rgba(122,100,27,0.15);
      --row-menu-item-bg: rgba(247,238,219,0.98);
      --row-menu-item-hover: rgba(235,221,184,0.96);
      --row-menu-item-text: #514523;
    }
    html[data-theme="dusk-velvet"] {
      --page-bg-start: #ecdde8;
      --page-bg-mid: #f8f2f7;
      --page-bg-end: #dccad7;
      --page-sheen: rgba(93, 46, 83, 0.07);
      --nav-surface: rgba(255, 250, 253, 0.95);
      --nav-border: rgba(93, 46, 83, 0.2);
      --phase-text: #746177;
      --primary-start: #5d2e53;
      --primary-end: #8b506f;
      --primary-border: rgba(93, 46, 83, 0.76);
      --primary-text: #ffffff;
      --secondary-text: #5d2e53;
      --secondary-border: rgba(93, 46, 83, 0.16);
      --accent-start: #c9a227;
      --accent-end: #e1c37a;
      --accent-text: #35264a;
      --hero-overlay-start: rgba(71, 31, 69, 0.9);
      --hero-overlay-end: rgba(131, 80, 111, 0.72);
      --hero-burst-one: rgba(223, 193, 121, 0.16);
      --hero-burst-two: rgba(149, 90, 134, 0.18);
      --hero-burst-three: rgba(93, 46, 83, 0.2);
      --surface-bg: rgba(255, 250, 253, 0.966);
      --surface-bg-strong: rgba(255, 253, 254, 0.992);
      --card-bg: rgba(255, 250, 253, 0.982);
      --input-bg: rgba(255, 253, 254, 0.997);
      --input-border: rgba(93, 46, 83, 0.15);
      --login-shell-start: rgba(79, 36, 73, 0.9);
      --login-shell-end: rgba(146, 92, 121, 0.82);
      --login-shell-border: rgba(240, 214, 231, 0.24);
      --login-shell-shadow: 0 32px 68px rgba(58, 25, 52, 0.24);
      --login-brand-bg-start: rgba(255, 251, 253, 0.99);
      --login-brand-bg-end: rgba(244, 234, 240, 0.96);
      --login-brand-border: rgba(125, 70, 107, 0.2);
      --login-panel-bg: rgba(255, 251, 253, 0.95);
      --login-panel-border: rgba(240, 219, 233, 0.44);
      --muted-text: #726179;
      --banner-start: rgba(93, 46, 83, 0.94);
      --banner-end: rgba(201, 162, 39, 0.82);
      --footer-surface: rgba(244, 236, 241, 0.98);
      --footer-border: rgba(93, 46, 83, 0.18);
      --footer-note: #726179;
      --theme-menu-bg: rgba(255,251,253,0.99);
      --theme-option-hover: rgba(93,46,83,0.05);
      --theme-option-active: rgba(93,46,83,0.095);
      --table-shell-border: rgba(93,46,83,0.14);
      --table-shell-bg: linear-gradient(180deg, rgba(255,252,254,0.99), rgba(242,233,239,0.95));
      --table-head-bg: rgba(240, 228, 236, 0.95);
      --table-head-text: #5d2e53;
      --table-row-hover: rgba(93, 46, 83, 0.034);
      --row-menu-panel-bg: rgba(255,251,253,0.99);
      --row-menu-panel-border: rgba(93,46,83,0.15);
      --row-menu-item-bg: rgba(245,235,241,0.98);
      --row-menu-item-hover: rgba(233,216,228,0.96);
      --row-menu-item-text: #5d2e53;
    }
    html[data-theme="bronze-court"] {
      --page-bg-start: #f0e1cb;
      --page-bg-mid: #faf5ec;
      --page-bg-end: #dcc6a8;
      --page-sheen: rgba(142, 94, 31, 0.08);
      --nav-surface: rgba(255, 251, 245, 0.95);
      --nav-border: rgba(142, 94, 31, 0.22);
      --phase-text: #786753;
      --primary-start: #8e5e1f;
      --primary-end: #c37d31;
      --primary-border: rgba(142, 94, 31, 0.76);
      --primary-text: #ffffff;
      --secondary-text: #6f4b1d;
      --secondary-border: rgba(142, 94, 31, 0.16);
      --accent-start: #20345d;
      --accent-end: #415785;
      --accent-text: #ffffff;
      --hero-overlay-start: rgba(95, 59, 18, 0.88);
      --hero-overlay-end: rgba(138, 88, 39, 0.72);
      --hero-burst-one: rgba(224, 183, 107, 0.18);
      --hero-burst-two: rgba(179, 111, 43, 0.16);
      --hero-burst-three: rgba(32, 52, 93, 0.18);
      --surface-bg: rgba(255, 251, 246, 0.966);
      --surface-bg-strong: rgba(255, 254, 250, 0.992);
      --card-bg: rgba(255, 251, 246, 0.982);
      --input-bg: rgba(255, 254, 250, 0.997);
      --input-border: rgba(142, 94, 31, 0.15);
      --login-shell-start: rgba(114, 73, 24, 0.88);
      --login-shell-end: rgba(188, 124, 52, 0.82);
      --login-shell-border: rgba(245, 221, 175, 0.24);
      --login-shell-shadow: 0 32px 66px rgba(75, 50, 17, 0.24);
      --login-brand-bg-start: rgba(255, 252, 247, 0.99);
      --login-brand-bg-end: rgba(243, 232, 211, 0.96);
      --login-brand-border: rgba(142, 94, 31, 0.22);
      --login-panel-bg: rgba(255, 252, 247, 0.95);
      --login-panel-border: rgba(243, 228, 195, 0.44);
      --muted-text: #766754;
      --banner-start: rgba(142, 94, 31, 0.94);
      --banner-end: rgba(32, 52, 93, 0.84);
      --footer-surface: rgba(247, 240, 229, 0.98);
      --footer-border: rgba(142, 94, 31, 0.18);
      --footer-note: #766754;
      --theme-menu-bg: rgba(255,252,247,0.99);
      --theme-option-hover: rgba(142,94,31,0.05);
      --theme-option-active: rgba(142,94,31,0.095);
      --table-shell-border: rgba(142,94,31,0.14);
      --table-shell-bg: linear-gradient(180deg, rgba(255,252,248,0.99), rgba(244,236,221,0.95));
      --table-head-bg: rgba(243, 231, 207, 0.95);
      --table-head-text: #6f4b1d;
      --table-row-hover: rgba(142, 94, 31, 0.036);
      --row-menu-panel-bg: rgba(255,252,247,0.99);
      --row-menu-panel-border: rgba(142,94,31,0.15);
      --row-menu-item-bg: rgba(247,238,220,0.98);
      --row-menu-item-hover: rgba(235,220,186,0.96);
      --row-menu-item-text: #6f4b1d;
    }
    html[data-theme="celestial-navy"] {
      --hero-graphic: url("/assets/themes/celestial-navy_v1.0.svg");
      --login-graphic: url("/assets/themes/celestial-navy_v1.0.svg");
      --page-bg-start: #e9edf7;
      --page-bg-mid: #f7f9fd;
      --page-bg-end: #dde3f2;
      --page-sheen: rgba(201, 162, 39, 0.06);
      --nav-surface: rgba(247, 249, 253, 0.95);
      --nav-border: rgba(13, 26, 61, 0.2);
      --phase-text: #4e5a7c;
      --primary-start: #0d1a3d;
      --primary-end: #2a4a8c;
      --primary-border: rgba(201, 162, 39, 0.6);
      --primary-text: #ffffff;
      --secondary-text: #142a63;
      --secondary-border: rgba(13, 26, 61, 0.14);
      --accent-start: #c9a227;
      --accent-end: #e8cf85;
      --accent-text: #0d1a3d;
      --hero-overlay-start: rgba(10, 17, 39, 0.94);
      --hero-overlay-end: rgba(42, 74, 140, 0.82);
      --hero-burst-one: rgba(201, 162, 39, 0.18);
      --hero-burst-two: rgba(42, 74, 140, 0.2);
      --hero-burst-three: rgba(13, 26, 61, 0.2);
      --surface-bg: rgba(250, 252, 255, 0.96);
      --surface-bg-strong: rgba(255, 255, 255, 0.99);
      --card-bg: rgba(250, 252, 255, 0.98);
      --input-bg: rgba(255, 255, 255, 0.997);
      --input-border: rgba(13, 26, 61, 0.15);
      --login-shell-start: rgba(10, 17, 39, 0.9);
      --login-shell-end: rgba(42, 74, 140, 0.82);
      --login-shell-border: rgba(201, 162, 39, 0.24);
      --login-shell-shadow: 0 32px 66px rgba(6, 10, 24, 0.3);
      --login-brand-bg-start: rgba(255, 255, 255, 0.99);
      --login-brand-bg-end: rgba(238, 242, 250, 0.96);
      --login-brand-border: rgba(13, 26, 61, 0.2);
      --login-panel-bg: rgba(255, 255, 255, 0.96);
      --login-panel-border: rgba(224, 231, 245, 0.5);
      --muted-text: #5c6685;
      --banner-start: rgba(13, 26, 61, 0.94);
      --banner-end: rgba(201, 162, 39, 0.8);
      --footer-surface: rgba(240, 243, 250, 0.98);
      --footer-border: rgba(13, 26, 61, 0.18);
      --footer-note: #5c6685;
      --theme-menu-bg: rgba(250, 252, 255, 0.99);
      --theme-option-hover: rgba(13, 26, 61, 0.05);
      --theme-option-active: rgba(13, 26, 61, 0.09);
      --table-shell-border: rgba(13, 26, 61, 0.14);
      --table-shell-bg: linear-gradient(180deg, rgba(250, 252, 255, 0.99), rgba(233, 237, 247, 0.95));
      --table-head-bg: rgba(228, 233, 245, 0.94);
      --table-head-text: #142a63;
      --table-row-hover: rgba(13, 26, 61, 0.036);
      --row-menu-panel-bg: rgba(250, 252, 255, 0.99);
      --row-menu-panel-border: rgba(13, 26, 61, 0.16);
      --row-menu-item-bg: rgba(237, 240, 249, 0.98);
      --row-menu-item-hover: rgba(220, 226, 243, 0.96);
      --row-menu-item-text: #142a63;
    }
    html[data-theme="garnet-velvet"] {
      --hero-graphic: url("/assets/themes/garnet-velvet_v1.0.svg");
      --login-graphic: url("/assets/themes/garnet-velvet_v1.0.svg");
      --page-bg-start: #f7e9ec;
      --page-bg-mid: #fdf6f7;
      --page-bg-end: #ecd6db;
      --page-sheen: rgba(201, 162, 39, 0.06);
      --nav-surface: rgba(253, 246, 247, 0.95);
      --nav-border: rgba(74, 15, 31, 0.22);
      --phase-text: #7a4a53;
      --primary-start: #4a0f1f;
      --primary-end: #8f1b35;
      --primary-border: rgba(201, 162, 39, 0.62);
      --primary-text: #ffffff;
      --secondary-text: #5c1626;
      --secondary-border: rgba(74, 15, 31, 0.16);
      --accent-start: #c9a227;
      --accent-end: #e8cf85;
      --accent-text: #4a0f1f;
      --hero-overlay-start: rgba(38, 8, 16, 0.92);
      --hero-overlay-end: rgba(143, 27, 53, 0.8);
      --hero-burst-one: rgba(201, 162, 39, 0.2);
      --hero-burst-two: rgba(143, 27, 53, 0.2);
      --hero-burst-three: rgba(74, 15, 31, 0.2);
      --surface-bg: rgba(255, 251, 251, 0.96);
      --surface-bg-strong: rgba(255, 253, 253, 0.99);
      --card-bg: rgba(255, 251, 251, 0.98);
      --input-bg: rgba(255, 253, 253, 0.997);
      --input-border: rgba(74, 15, 31, 0.16);
      --login-shell-start: rgba(38, 8, 16, 0.9);
      --login-shell-end: rgba(143, 27, 53, 0.82);
      --login-shell-border: rgba(201, 162, 39, 0.26);
      --login-shell-shadow: 0 32px 66px rgba(28, 6, 12, 0.32);
      --login-brand-bg-start: rgba(255, 252, 252, 0.99);
      --login-brand-bg-end: rgba(246, 234, 236, 0.96);
      --login-brand-border: rgba(74, 15, 31, 0.22);
      --login-panel-bg: rgba(255, 252, 252, 0.96);
      --login-panel-border: rgba(245, 224, 229, 0.48);
      --muted-text: #7c5b62;
      --banner-start: rgba(74, 15, 31, 0.94);
      --banner-end: rgba(201, 162, 39, 0.8);
      --footer-surface: rgba(249, 238, 241, 0.98);
      --footer-border: rgba(74, 15, 31, 0.18);
      --footer-note: #7c5b62;
      --theme-menu-bg: rgba(255, 252, 252, 0.99);
      --theme-option-hover: rgba(74, 15, 31, 0.05);
      --theme-option-active: rgba(74, 15, 31, 0.095);
      --table-shell-border: rgba(74, 15, 31, 0.15);
      --table-shell-bg: linear-gradient(180deg, rgba(255, 253, 253, 0.99), rgba(246, 232, 235, 0.95));
      --table-head-bg: rgba(243, 226, 230, 0.94);
      --table-head-text: #5c1626;
      --table-row-hover: rgba(74, 15, 31, 0.036);
      --row-menu-panel-bg: rgba(255, 252, 252, 0.99);
      --row-menu-panel-border: rgba(74, 15, 31, 0.16);
      --row-menu-item-bg: rgba(248, 235, 238, 0.98);
      --row-menu-item-hover: rgba(238, 214, 219, 0.96);
      --row-menu-item-text: #5c1626;
    }
    html[data-theme="emerald-ledger"] {
      --hero-graphic: url("/assets/themes/emerald-ledger_v1.0.svg");
      --login-graphic: url("/assets/themes/emerald-ledger_v1.0.svg");
      --page-bg-start: #e7f2ec;
      --page-bg-mid: #f6faf7;
      --page-bg-end: #d7e8dd;
      --page-sheen: rgba(201, 162, 39, 0.055);
      --nav-surface: rgba(246, 250, 247, 0.95);
      --nav-border: rgba(15, 42, 34, 0.2);
      --phase-text: #4f6b5e;
      --primary-start: #0f2a22;
      --primary-end: #1f6e52;
      --primary-border: rgba(201, 162, 39, 0.6);
      --primary-text: #ffffff;
      --secondary-text: #15382c;
      --secondary-border: rgba(15, 42, 34, 0.14);
      --accent-start: #c9a227;
      --accent-end: #e8cf85;
      --accent-text: #0f2a22;
      --hero-overlay-start: rgba(9, 22, 18, 0.92);
      --hero-overlay-end: rgba(31, 110, 82, 0.78);
      --hero-burst-one: rgba(201, 162, 39, 0.18);
      --hero-burst-two: rgba(31, 110, 82, 0.2);
      --hero-burst-three: rgba(15, 42, 34, 0.2);
      --surface-bg: rgba(250, 253, 251, 0.96);
      --surface-bg-strong: rgba(254, 255, 254, 0.99);
      --card-bg: rgba(250, 253, 251, 0.98);
      --input-bg: rgba(254, 255, 254, 0.997);
      --input-border: rgba(15, 42, 34, 0.14);
      --login-shell-start: rgba(9, 22, 18, 0.9);
      --login-shell-end: rgba(31, 110, 82, 0.8);
      --login-shell-border: rgba(201, 162, 39, 0.24);
      --login-shell-shadow: 0 32px 66px rgba(6, 15, 12, 0.3);
      --login-brand-bg-start: rgba(255, 255, 254, 0.99);
      --login-brand-bg-end: rgba(238, 245, 240, 0.96);
      --login-brand-border: rgba(15, 42, 34, 0.2);
      --login-panel-bg: rgba(255, 255, 254, 0.96);
      --login-panel-border: rgba(223, 237, 228, 0.5);
      --muted-text: #55705f;
      --banner-start: rgba(15, 42, 34, 0.94);
      --banner-end: rgba(201, 162, 39, 0.8);
      --footer-surface: rgba(239, 246, 242, 0.98);
      --footer-border: rgba(15, 42, 34, 0.18);
      --footer-note: #55705f;
      --theme-menu-bg: rgba(250, 253, 251, 0.99);
      --theme-option-hover: rgba(15, 42, 34, 0.05);
      --theme-option-active: rgba(15, 42, 34, 0.09);
      --table-shell-border: rgba(15, 42, 34, 0.14);
      --table-shell-bg: linear-gradient(180deg, rgba(250, 253, 251, 0.99), rgba(228, 240, 233, 0.95));
      --table-head-bg: rgba(224, 238, 230, 0.94);
      --table-head-text: #15382c;
      --table-row-hover: rgba(15, 42, 34, 0.036);
      --row-menu-panel-bg: rgba(250, 253, 251, 0.99);
      --row-menu-panel-border: rgba(15, 42, 34, 0.15);
      --row-menu-item-bg: rgba(233, 244, 237, 0.98);
      --row-menu-item-hover: rgba(212, 233, 222, 0.96);
      --row-menu-item-text: #15382c;
    }
    html[data-theme="sapphire-glass"] {
      --hero-graphic: url("/assets/themes/sapphire-glass_v1.0.svg");
      --login-graphic: url("/assets/themes/sapphire-glass_v1.0.svg");
      --page-bg-start: #e8f0fb;
      --page-bg-mid: #f7fbff;
      --page-bg-end: #d7e6f7;
      --page-sheen: rgba(74, 134, 214, 0.07);
      --nav-surface: rgba(247, 251, 255, 0.95);
      --nav-border: rgba(18, 50, 110, 0.2);
      --phase-text: #4f6488;
      --primary-start: #12326e;
      --primary-end: #4a86d6;
      --primary-border: rgba(201, 162, 39, 0.56);
      --primary-text: #ffffff;
      --secondary-text: #163c7c;
      --secondary-border: rgba(18, 50, 110, 0.14);
      --accent-start: #c9a227;
      --accent-end: #e8cf85;
      --accent-text: #12326e;
      --hero-overlay-start: rgba(10, 26, 58, 0.9);
      --hero-overlay-end: rgba(74, 134, 214, 0.72);
      --hero-burst-one: rgba(201, 162, 39, 0.18);
      --hero-burst-two: rgba(74, 134, 214, 0.22);
      --hero-burst-three: rgba(18, 50, 110, 0.2);
      --surface-bg: rgba(250, 253, 255, 0.96);
      --surface-bg-strong: rgba(255, 255, 255, 0.99);
      --card-bg: rgba(250, 253, 255, 0.98);
      --input-bg: rgba(255, 255, 255, 0.997);
      --input-border: rgba(18, 50, 110, 0.14);
      --login-shell-start: rgba(10, 26, 58, 0.88);
      --login-shell-end: rgba(74, 134, 214, 0.78);
      --login-shell-border: rgba(201, 162, 39, 0.24);
      --login-shell-shadow: 0 32px 64px rgba(6, 16, 36, 0.28);
      --login-brand-bg-start: rgba(255, 255, 255, 0.99);
      --login-brand-bg-end: rgba(237, 244, 253, 0.96);
      --login-brand-border: rgba(18, 50, 110, 0.2);
      --login-panel-bg: rgba(255, 255, 255, 0.96);
      --login-panel-border: rgba(221, 233, 249, 0.5);
      --muted-text: #56698c;
      --banner-start: rgba(18, 50, 110, 0.92);
      --banner-end: rgba(201, 162, 39, 0.78);
      --footer-surface: rgba(238, 245, 253, 0.98);
      --footer-border: rgba(18, 50, 110, 0.16);
      --footer-note: #56698c;
      --theme-menu-bg: rgba(250, 253, 255, 0.99);
      --theme-option-hover: rgba(18, 50, 110, 0.05);
      --theme-option-active: rgba(18, 50, 110, 0.085);
      --table-shell-border: rgba(18, 50, 110, 0.13);
      --table-shell-bg: linear-gradient(180deg, rgba(250, 253, 255, 0.99), rgba(230, 240, 251, 0.95));
      --table-head-bg: rgba(226, 237, 250, 0.94);
      --table-head-text: #163c7c;
      --table-row-hover: rgba(18, 50, 110, 0.034);
      --row-menu-panel-bg: rgba(250, 253, 255, 0.99);
      --row-menu-panel-border: rgba(18, 50, 110, 0.15);
      --row-menu-item-bg: rgba(233, 242, 251, 0.98);
      --row-menu-item-hover: rgba(213, 229, 248, 0.96);
      --row-menu-item-text: #163c7c;
    }
    html[data-theme="saffron-dawn"] {
      --hero-graphic: url("/assets/themes/saffron-dawn_v1.0.svg");
      --login-graphic: url("/assets/themes/saffron-dawn_v1.0.svg");
      --page-bg-start: #fdf1de;
      --page-bg-mid: #fffaf0;
      --page-bg-end: #f6dfb8;
      --page-sheen: rgba(224, 138, 43, 0.07);
      --nav-surface: rgba(255, 250, 240, 0.95);
      --nav-border: rgba(201, 122, 31, 0.22);
      --phase-text: #8a6a45;
      --primary-start: #c97a1f;
      --primary-end: #e8a94a;
      --primary-border: rgba(27, 42, 91, 0.5);
      --primary-text: #ffffff;
      --secondary-text: #8a4f14;
      --secondary-border: rgba(201, 122, 31, 0.16);
      --accent-start: #1b2a5b;
      --accent-end: #3a4f8a;
      --accent-text: #ffffff;
      --hero-overlay-start: rgba(88, 51, 8, 0.88);
      --hero-overlay-end: rgba(27, 42, 91, 0.76);
      --hero-burst-one: rgba(232, 169, 74, 0.24);
      --hero-burst-two: rgba(27, 42, 91, 0.2);
      --hero-burst-three: rgba(139, 79, 20, 0.2);
      --surface-bg: rgba(255, 253, 248, 0.96);
      --surface-bg-strong: rgba(255, 254, 251, 0.99);
      --card-bg: rgba(255, 253, 248, 0.98);
      --input-bg: rgba(255, 254, 251, 0.997);
      --input-border: rgba(201, 122, 31, 0.16);
      --login-shell-start: rgba(88, 51, 8, 0.88);
      --login-shell-end: rgba(27, 42, 91, 0.78);
      --login-shell-border: rgba(232, 169, 74, 0.28);
      --login-shell-shadow: 0 32px 66px rgba(60, 34, 6, 0.3);
      --login-brand-bg-start: rgba(255, 253, 247, 0.99);
      --login-brand-bg-end: rgba(250, 238, 216, 0.96);
      --login-brand-border: rgba(201, 122, 31, 0.24);
      --login-panel-bg: rgba(255, 253, 247, 0.96);
      --login-panel-border: rgba(247, 229, 194, 0.5);
      --muted-text: #8a7150;
      --banner-start: rgba(201, 122, 31, 0.92);
      --banner-end: rgba(27, 42, 91, 0.82);
      --footer-surface: rgba(250, 240, 222, 0.98);
      --footer-border: rgba(201, 122, 31, 0.2);
      --footer-note: #8a7150;
      --theme-menu-bg: rgba(255, 253, 247, 0.99);
      --theme-option-hover: rgba(201, 122, 31, 0.06);
      --theme-option-active: rgba(201, 122, 31, 0.1);
      --table-shell-border: rgba(201, 122, 31, 0.16);
      --table-shell-bg: linear-gradient(180deg, rgba(255, 253, 248, 0.99), rgba(248, 233, 202, 0.95));
      --table-head-bg: rgba(246, 227, 191, 0.94);
      --table-head-text: #8a4f14;
      --table-row-hover: rgba(201, 122, 31, 0.04);
      --row-menu-panel-bg: rgba(255, 253, 247, 0.99);
      --row-menu-panel-border: rgba(201, 122, 31, 0.18);
      --row-menu-item-bg: rgba(249, 236, 209, 0.98);
      --row-menu-item-hover: rgba(240, 216, 172, 0.96);
      --row-menu-item-text: #8a4f14;
    }
    html[data-theme="orchid-noir"] {
      --hero-graphic: url("/assets/themes/orchid-noir_v1.0.svg");
      --login-graphic: url("/assets/themes/orchid-noir_v1.0.svg");
      --page-bg-start: #f2e9f5;
      --page-bg-mid: #faf6fb;
      --page-bg-end: #e2cfe9;
      --page-sheen: rgba(201, 162, 39, 0.055);
      --nav-surface: rgba(250, 246, 251, 0.95);
      --nav-border: rgba(42, 17, 64, 0.2);
      --phase-text: #6f5a78;
      --primary-start: #2a1140;
      --primary-end: #6a2f7a;
      --primary-border: rgba(201, 162, 39, 0.58);
      --primary-text: #ffffff;
      --secondary-text: #3d1858;
      --secondary-border: rgba(42, 17, 64, 0.14);
      --accent-start: #c9a227;
      --accent-end: #e8cf85;
      --accent-text: #2a1140;
      --hero-overlay-start: rgba(22, 8, 34, 0.92);
      --hero-overlay-end: rgba(106, 47, 122, 0.78);
      --hero-burst-one: rgba(201, 162, 39, 0.18);
      --hero-burst-two: rgba(106, 47, 122, 0.22);
      --hero-burst-three: rgba(42, 17, 64, 0.2);
      --surface-bg: rgba(253, 250, 254, 0.96);
      --surface-bg-strong: rgba(255, 253, 255, 0.99);
      --card-bg: rgba(253, 250, 254, 0.98);
      --input-bg: rgba(255, 253, 255, 0.997);
      --input-border: rgba(42, 17, 64, 0.15);
      --login-shell-start: rgba(22, 8, 34, 0.9);
      --login-shell-end: rgba(106, 47, 122, 0.8);
      --login-shell-border: rgba(201, 162, 39, 0.25);
      --login-shell-shadow: 0 32px 66px rgba(14, 5, 22, 0.32);
      --login-brand-bg-start: rgba(255, 253, 255, 0.99);
      --login-brand-bg-end: rgba(244, 236, 246, 0.96);
      --login-brand-border: rgba(42, 17, 64, 0.2);
      --login-panel-bg: rgba(255, 253, 255, 0.96);
      --login-panel-border: rgba(236, 223, 240, 0.5);
      --muted-text: #6f5d76;
      --banner-start: rgba(42, 17, 64, 0.94);
      --banner-end: rgba(201, 162, 39, 0.8);
      --footer-surface: rgba(246, 239, 248, 0.98);
      --footer-border: rgba(42, 17, 64, 0.18);
      --footer-note: #6f5d76;
      --theme-menu-bg: rgba(253, 250, 254, 0.99);
      --theme-option-hover: rgba(42, 17, 64, 0.05);
      --theme-option-active: rgba(42, 17, 64, 0.095);
      --table-shell-border: rgba(42, 17, 64, 0.15);
      --table-shell-bg: linear-gradient(180deg, rgba(253, 250, 254, 0.99), rgba(240, 227, 243, 0.95));
      --table-head-bg: rgba(236, 219, 240, 0.94);
      --table-head-text: #3d1858;
      --table-row-hover: rgba(42, 17, 64, 0.036);
      --row-menu-panel-bg: rgba(253, 250, 254, 0.99);
      --row-menu-panel-border: rgba(42, 17, 64, 0.16);
      --row-menu-item-bg: rgba(245, 235, 248, 0.98);
      --row-menu-item-hover: rgba(230, 209, 235, 0.96);
      --row-menu-item-text: #3d1858;
    }
    html[data-theme="arctic-frost"] {
      --hero-graphic: url("/assets/themes/arctic-frost_v1.0.svg");
      --login-graphic: url("/assets/themes/arctic-frost_v1.0.svg");
      --page-bg-start: #eef3f8;
      --page-bg-mid: #ffffff;
      --page-bg-end: #dde6ee;
      --page-sheen: rgba(90, 104, 128, 0.05);
      --nav-surface: rgba(255, 255, 255, 0.96);
      --nav-border: rgba(79, 100, 128, 0.2);
      --phase-text: #5c6c81;
      --primary-start: #3d5068;
      --primary-end: #7f97b8;
      --primary-border: rgba(201, 162, 39, 0.5);
      --primary-text: #ffffff;
      --secondary-text: #3d5068;
      --secondary-border: rgba(79, 100, 128, 0.14);
      --accent-start: #c9a227;
      --accent-end: #e8cf85;
      --accent-text: #3d5068;
      --hero-overlay-start: rgba(28, 38, 52, 0.86);
      --hero-overlay-end: rgba(127, 151, 184, 0.68);
      --hero-burst-one: rgba(201, 162, 39, 0.16);
      --hero-burst-two: rgba(127, 151, 184, 0.2);
      --hero-burst-three: rgba(61, 80, 104, 0.18);
      --surface-bg: rgba(255, 255, 255, 0.97);
      --surface-bg-strong: rgba(255, 255, 255, 0.995);
      --card-bg: rgba(255, 255, 255, 0.99);
      --input-bg: rgba(255, 255, 255, 0.998);
      --input-border: rgba(79, 100, 128, 0.14);
      --login-shell-start: rgba(28, 38, 52, 0.88);
      --login-shell-end: rgba(127, 151, 184, 0.78);
      --login-shell-border: rgba(201, 162, 39, 0.22);
      --login-shell-shadow: 0 30px 62px rgba(18, 24, 34, 0.26);
      --login-brand-bg-start: rgba(255, 255, 255, 0.99);
      --login-brand-bg-end: rgba(242, 245, 249, 0.96);
      --login-brand-border: rgba(79, 100, 128, 0.18);
      --login-panel-bg: rgba(255, 255, 255, 0.94);
      --login-panel-border: rgba(224, 231, 239, 0.5);
      --muted-text: #5c6c81;
      --banner-start: rgba(61, 80, 104, 0.92);
      --banner-end: rgba(201, 162, 39, 0.78);
      --footer-surface: rgba(245, 247, 250, 0.98);
      --footer-border: rgba(79, 100, 128, 0.16);
      --footer-note: #5c6c81;
      --theme-menu-bg: rgba(255, 255, 255, 0.99);
      --theme-option-hover: rgba(79, 100, 128, 0.045);
      --theme-option-active: rgba(79, 100, 128, 0.08);
      --table-shell-border: rgba(79, 100, 128, 0.12);
      --table-shell-bg: linear-gradient(180deg, rgba(255,255,255,0.99), rgba(238,242,247,0.95));
      --table-head-bg: rgba(236, 240, 245, 0.95);
      --table-head-text: #3d5068;
      --table-row-hover: rgba(79, 100, 128, 0.032);
      --row-menu-panel-bg: rgba(255,255,255,0.99);
      --row-menu-panel-border: rgba(79,100,128,0.14);
      --row-menu-item-bg: rgba(240,243,247,0.98);
      --row-menu-item-hover: rgba(226,232,239,0.96);
      --row-menu-item-text: #3d5068;
    }
    html[data-theme="terracotta-scholar"] {
      --hero-graphic: url("/assets/themes/terracotta-scholar_v1.0.svg");
      --login-graphic: url("/assets/themes/terracotta-scholar_v1.0.svg");
      --page-bg-start: #f7ece0;
      --page-bg-mid: #fdf8f2;
      --page-bg-end: #ecd6bd;
      --page-sheen: rgba(181, 86, 47, 0.07);
      --nav-surface: rgba(253, 248, 242, 0.95);
      --nav-border: rgba(181, 86, 47, 0.22);
      --phase-text: #8a6650;
      --primary-start: #a8552d;
      --primary-end: #c97a45;
      --primary-border: rgba(27, 42, 91, 0.5);
      --primary-text: #ffffff;
      --secondary-text: #7a3e20;
      --secondary-border: rgba(181, 86, 47, 0.16);
      --accent-start: #1b2a5b;
      --accent-end: #3a4f8a;
      --accent-text: #ffffff;
      --hero-overlay-start: rgba(27, 42, 91, 0.88);
      --hero-overlay-end: rgba(181, 86, 47, 0.76);
      --hero-burst-one: rgba(201, 162, 39, 0.18);
      --hero-burst-two: rgba(181, 86, 47, 0.22);
      --hero-burst-three: rgba(27, 42, 91, 0.2);
      --surface-bg: rgba(255, 251, 246, 0.96);
      --surface-bg-strong: rgba(255, 253, 250, 0.99);
      --card-bg: rgba(255, 251, 246, 0.98);
      --input-bg: rgba(255, 253, 250, 0.997);
      --input-border: rgba(181, 86, 47, 0.16);
      --login-shell-start: rgba(27, 42, 91, 0.88);
      --login-shell-end: rgba(181, 86, 47, 0.8);
      --login-shell-border: rgba(201, 162, 39, 0.26);
      --login-shell-shadow: 0 32px 66px rgba(48, 25, 12, 0.3);
      --login-brand-bg-start: rgba(255, 252, 248, 0.99);
      --login-brand-bg-end: rgba(246, 233, 217, 0.96);
      --login-brand-border: rgba(181, 86, 47, 0.22);
      --login-panel-bg: rgba(255, 252, 248, 0.96);
      --login-panel-border: rgba(243, 225, 202, 0.48);
      --muted-text: #8a7160;
      --banner-start: rgba(181, 86, 47, 0.92);
      --banner-end: rgba(27, 42, 91, 0.84);
      --footer-surface: rgba(248, 239, 229, 0.98);
      --footer-border: rgba(181, 86, 47, 0.18);
      --footer-note: #8a7160;
      --theme-menu-bg: rgba(255, 252, 248, 0.99);
      --theme-option-hover: rgba(181, 86, 47, 0.05);
      --theme-option-active: rgba(181, 86, 47, 0.095);
      --table-shell-border: rgba(181, 86, 47, 0.15);
      --table-shell-bg: linear-gradient(180deg, rgba(255, 253, 249, 0.99), rgba(244, 229, 210, 0.95));
      --table-head-bg: rgba(243, 226, 205, 0.94);
      --table-head-text: #7a3e20;
      --table-row-hover: rgba(181, 86, 47, 0.036);
      --row-menu-panel-bg: rgba(255, 252, 248, 0.99);
      --row-menu-panel-border: rgba(181, 86, 47, 0.16);
      --row-menu-item-bg: rgba(247, 234, 217, 0.98);
      --row-menu-item-hover: rgba(237, 214, 190, 0.96);
      --row-menu-item-text: #7a3e20;
    }
    html[data-theme="indigo-quartz"] {
      --hero-graphic: url("/assets/themes/indigo-quartz_v1.0.svg");
      --login-graphic: url("/assets/themes/indigo-quartz_v1.0.svg");
      --page-bg-start: #ece9f7;
      --page-bg-mid: #f8f7fd;
      --page-bg-end: #d9d3ef;
      --page-sheen: rgba(201, 162, 39, 0.055);
      --nav-surface: rgba(249, 248, 253, 0.95);
      --nav-border: rgba(36, 27, 82, 0.2);
      --phase-text: #5d5580;
      --primary-start: #241b52;
      --primary-end: #4a3596;
      --primary-border: rgba(201, 162, 39, 0.58);
      --primary-text: #ffffff;
      --secondary-text: #2f2368;
      --secondary-border: rgba(36, 27, 82, 0.14);
      --accent-start: #c9a227;
      --accent-end: #e8cf85;
      --accent-text: #241b52;
      --hero-overlay-start: rgba(18, 13, 42, 0.92);
      --hero-overlay-end: rgba(74, 53, 150, 0.78);
      --hero-burst-one: rgba(201, 162, 39, 0.18);
      --hero-burst-two: rgba(74, 53, 150, 0.22);
      --hero-burst-three: rgba(36, 27, 82, 0.2);
      --surface-bg: rgba(251, 250, 254, 0.96);
      --surface-bg-strong: rgba(254, 253, 255, 0.99);
      --card-bg: rgba(251, 250, 254, 0.98);
      --input-bg: rgba(254, 253, 255, 0.997);
      --input-border: rgba(36, 27, 82, 0.15);
      --login-shell-start: rgba(18, 13, 42, 0.9);
      --login-shell-end: rgba(74, 53, 150, 0.8);
      --login-shell-border: rgba(201, 162, 39, 0.25);
      --login-shell-shadow: 0 32px 66px rgba(10, 8, 26, 0.32);
      --login-brand-bg-start: rgba(254, 253, 255, 0.99);
      --login-brand-bg-end: rgba(240, 237, 248, 0.96);
      --login-brand-border: rgba(36, 27, 82, 0.2);
      --login-panel-bg: rgba(254, 253, 255, 0.96);
      --login-panel-border: rgba(228, 224, 244, 0.5);
      --muted-text: #5d5580;
      --banner-start: rgba(36, 27, 82, 0.94);
      --banner-end: rgba(201, 162, 39, 0.8);
      --footer-surface: rgba(243, 241, 250, 0.98);
      --footer-border: rgba(36, 27, 82, 0.18);
      --footer-note: #5d5580;
      --theme-menu-bg: rgba(251, 250, 254, 0.99);
      --theme-option-hover: rgba(36, 27, 82, 0.05);
      --theme-option-active: rgba(36, 27, 82, 0.095);
      --table-shell-border: rgba(36, 27, 82, 0.15);
      --table-shell-bg: linear-gradient(180deg, rgba(251, 250, 254, 0.99), rgba(233, 229, 246, 0.95));
      --table-head-bg: rgba(229, 224, 245, 0.94);
      --table-head-text: #2f2368;
      --table-row-hover: rgba(36, 27, 82, 0.036);
      --row-menu-panel-bg: rgba(251, 250, 254, 0.99);
      --row-menu-panel-border: rgba(36, 27, 82, 0.16);
      --row-menu-item-bg: rgba(238, 234, 249, 0.98);
      --row-menu-item-hover: rgba(219, 211, 241, 0.96);
      --row-menu-item-text: #2f2368;
    }
    html[data-theme="jade-imperial"] {
      --hero-graphic: url("/assets/themes/jade-imperial_v1.0.svg");
      --login-graphic: url("/assets/themes/jade-imperial_v1.0.svg");
      --page-bg-start: #e7f3ee;
      --page-bg-mid: #f6fbf9;
      --page-bg-end: #d3e9dd;
      --page-sheen: rgba(201, 162, 39, 0.055);
      --nav-surface: rgba(246, 251, 249, 0.95);
      --nav-border: rgba(12, 38, 32, 0.2);
      --phase-text: #4d6b5e;
      --primary-start: #0c2620;
      --primary-end: #1f8f6b;
      --primary-border: rgba(201, 162, 39, 0.6);
      --primary-text: #ffffff;
      --secondary-text: #123a2f;
      --secondary-border: rgba(12, 38, 32, 0.14);
      --accent-start: #c9a227;
      --accent-end: #e8cf85;
      --accent-text: #0c2620;
      --hero-overlay-start: rgba(7, 19, 16, 0.92);
      --hero-overlay-end: rgba(31, 143, 107, 0.78);
      --hero-burst-one: rgba(201, 162, 39, 0.2);
      --hero-burst-two: rgba(31, 143, 107, 0.2);
      --hero-burst-three: rgba(12, 38, 32, 0.2);
      --surface-bg: rgba(250, 253, 252, 0.96);
      --surface-bg-strong: rgba(254, 255, 254, 0.99);
      --card-bg: rgba(250, 253, 252, 0.98);
      --input-bg: rgba(254, 255, 254, 0.997);
      --input-border: rgba(12, 38, 32, 0.14);
      --login-shell-start: rgba(7, 19, 16, 0.9);
      --login-shell-end: rgba(31, 143, 107, 0.8);
      --login-shell-border: rgba(201, 162, 39, 0.26);
      --login-shell-shadow: 0 32px 66px rgba(4, 12, 10, 0.3);
      --login-brand-bg-start: rgba(255, 255, 254, 0.99);
      --login-brand-bg-end: rgba(236, 245, 241, 0.96);
      --login-brand-border: rgba(12, 38, 32, 0.22);
      --login-panel-bg: rgba(255, 255, 254, 0.96);
      --login-panel-border: rgba(220, 237, 229, 0.5);
      --muted-text: #4d6b5e;
      --banner-start: rgba(12, 38, 32, 0.94);
      --banner-end: rgba(201, 162, 39, 0.8);
      --footer-surface: rgba(237, 246, 242, 0.98);
      --footer-border: rgba(12, 38, 32, 0.18);
      --footer-note: #4d6b5e;
      --theme-menu-bg: rgba(250, 253, 252, 0.99);
      --theme-option-hover: rgba(12, 38, 32, 0.05);
      --theme-option-active: rgba(12, 38, 32, 0.095);
      --table-shell-border: rgba(12, 38, 32, 0.15);
      --table-shell-bg: linear-gradient(180deg, rgba(250, 253, 252, 0.99), rgba(224, 240, 232, 0.95));
      --table-head-bg: rgba(220, 238, 229, 0.94);
      --table-head-text: #123a2f;
      --table-row-hover: rgba(12, 38, 32, 0.036);
      --row-menu-panel-bg: rgba(250, 253, 252, 0.99);
      --row-menu-panel-border: rgba(12, 38, 32, 0.16);
      --row-menu-item-bg: rgba(231, 243, 236, 0.98);
      --row-menu-item-hover: rgba(208, 231, 218, 0.96);
      --row-menu-item-text: #123a2f;
    }
    html[data-theme="rosewood-classic"] {
      --hero-graphic: url("/assets/themes/rosewood-classic_v1.0.svg");
      --login-graphic: url("/assets/themes/rosewood-classic_v1.0.svg");
      --page-bg-start: #f6e9e6;
      --page-bg-mid: #fcf5f2;
      --page-bg-end: #e8d0c9;
      --page-sheen: rgba(201, 162, 39, 0.06);
      --nav-surface: rgba(252, 245, 242, 0.95);
      --nav-border: rgba(53, 24, 26, 0.2);
      --phase-text: #83625e;
      --primary-start: #35181a;
      --primary-end: #7a3b2e;
      --primary-border: rgba(201, 162, 39, 0.6);
      --primary-text: #ffffff;
      --secondary-text: #4a231f;
      --secondary-border: rgba(53, 24, 26, 0.15);
      --accent-start: #c9a227;
      --accent-end: #e8cf85;
      --accent-text: #35181a;
      --hero-overlay-start: rgba(24, 11, 12, 0.92);
      --hero-overlay-end: rgba(122, 59, 46, 0.78);
      --hero-burst-one: rgba(201, 162, 39, 0.2);
      --hero-burst-two: rgba(122, 59, 46, 0.2);
      --hero-burst-three: rgba(53, 24, 26, 0.2);
      --surface-bg: rgba(254, 250, 249, 0.96);
      --surface-bg-strong: rgba(255, 253, 252, 0.99);
      --card-bg: rgba(254, 250, 249, 0.98);
      --input-bg: rgba(255, 253, 252, 0.997);
      --input-border: rgba(53, 24, 26, 0.15);
      --login-shell-start: rgba(24, 11, 12, 0.9);
      --login-shell-end: rgba(122, 59, 46, 0.8);
      --login-shell-border: rgba(201, 162, 39, 0.26);
      --login-shell-shadow: 0 32px 66px rgba(16, 7, 8, 0.32);
      --login-brand-bg-start: rgba(255, 252, 251, 0.99);
      --login-brand-bg-end: rgba(245, 233, 230, 0.96);
      --login-brand-border: rgba(53, 24, 26, 0.22);
      --login-panel-bg: rgba(255, 252, 251, 0.96);
      --login-panel-border: rgba(243, 224, 219, 0.48);
      --muted-text: #83655f;
      --banner-start: rgba(53, 24, 26, 0.94);
      --banner-end: rgba(201, 162, 39, 0.8);
      --footer-surface: rgba(247, 237, 234, 0.98);
      --footer-border: rgba(53, 24, 26, 0.18);
      --footer-note: #83655f;
      --theme-menu-bg: rgba(255, 252, 251, 0.99);
      --theme-option-hover: rgba(53, 24, 26, 0.05);
      --theme-option-active: rgba(53, 24, 26, 0.095);
      --table-shell-border: rgba(53, 24, 26, 0.15);
      --table-shell-bg: linear-gradient(180deg, rgba(255, 253, 252, 0.99), rgba(244, 230, 226, 0.95));
      --table-head-bg: rgba(243, 227, 223, 0.94);
      --table-head-text: #4a231f;
      --table-row-hover: rgba(53, 24, 26, 0.036);
      --row-menu-panel-bg: rgba(255, 252, 251, 0.99);
      --row-menu-panel-border: rgba(53, 24, 26, 0.16);
      --row-menu-item-bg: rgba(247, 235, 233, 0.98);
      --row-menu-item-hover: rgba(236, 216, 212, 0.96);
      --row-menu-item-text: #4a231f;
    }
    html[data-theme="steel-horizon"] {
      --hero-graphic: url("/assets/themes/steel-horizon_v1.0.svg");
      --login-graphic: url("/assets/themes/steel-horizon_v1.0.svg");
      --page-bg-start: #e9edf1;
      --page-bg-mid: #f7f9fb;
      --page-bg-end: #dbe1e7;
      --page-sheen: rgba(83, 106, 130, 0.05);
      --nav-surface: rgba(247, 249, 251, 0.95);
      --nav-border: rgba(43, 58, 74, 0.2);
      --phase-text: #56687b;
      --primary-start: #2b3a4a;
      --primary-end: #536a82;
      --primary-border: rgba(201, 162, 39, 0.5);
      --primary-text: #ffffff;
      --secondary-text: #2b3a4a;
      --secondary-border: rgba(43, 58, 74, 0.14);
      --accent-start: #c9a227;
      --accent-end: #e8cf85;
      --accent-text: #2b3a4a;
      --hero-overlay-start: rgba(20, 27, 35, 0.9);
      --hero-overlay-end: rgba(83, 106, 130, 0.72);
      --hero-burst-one: rgba(201, 162, 39, 0.16);
      --hero-burst-two: rgba(83, 106, 130, 0.2);
      --hero-burst-three: rgba(43, 58, 74, 0.2);
      --surface-bg: rgba(250, 251, 253, 0.96);
      --surface-bg-strong: rgba(254, 255, 255, 0.99);
      --card-bg: rgba(250, 251, 253, 0.98);
      --input-bg: rgba(254, 255, 255, 0.997);
      --input-border: rgba(43, 58, 74, 0.14);
      --login-shell-start: rgba(20, 27, 35, 0.9);
      --login-shell-end: rgba(83, 106, 130, 0.8);
      --login-shell-border: rgba(201, 162, 39, 0.24);
      --login-shell-shadow: 0 32px 64px rgba(12, 16, 22, 0.3);
      --login-brand-bg-start: rgba(254, 255, 255, 0.99);
      --login-brand-bg-end: rgba(238, 241, 244, 0.96);
      --login-brand-border: rgba(43, 58, 74, 0.2);
      --login-panel-bg: rgba(254, 255, 255, 0.96);
      --login-panel-border: rgba(223, 228, 233, 0.5);
      --muted-text: #56687b;
      --banner-start: rgba(43, 58, 74, 0.92);
      --banner-end: rgba(201, 162, 39, 0.78);
      --footer-surface: rgba(240, 243, 246, 0.98);
      --footer-border: rgba(43, 58, 74, 0.16);
      --footer-note: #56687b;
      --theme-menu-bg: rgba(250, 251, 253, 0.99);
      --theme-option-hover: rgba(43, 58, 74, 0.045);
      --theme-option-active: rgba(43, 58, 74, 0.08);
      --table-shell-border: rgba(43, 58, 74, 0.13);
      --table-shell-bg: linear-gradient(180deg, rgba(250, 251, 253, 0.99), rgba(230, 234, 238, 0.95));
      --table-head-bg: rgba(228, 233, 237, 0.94);
      --table-head-text: #2b3a4a;
      --table-row-hover: rgba(43, 58, 74, 0.034);
      --row-menu-panel-bg: rgba(250, 251, 253, 0.99);
      --row-menu-panel-border: rgba(43, 58, 74, 0.15);
      --row-menu-item-bg: rgba(235, 239, 242, 0.98);
      --row-menu-item-hover: rgba(216, 223, 228, 0.96);
      --row-menu-item-text: #2b3a4a;
    }
    html[data-theme="dark-theme"] {
      --ink: #e9ecf5;
      --navy: #e8cf85;
      --line: rgba(233, 236, 245, 0.14);
      --shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
      --shadow-soft: 0 16px 34px rgba(0, 0, 0, 0.4);
      --hero-shadow: 0 30px 60px rgba(0, 0, 0, 0.55);
      --page-bg-start: #0a0e1a;
      --page-bg-mid: #10152a;
      --page-bg-end: #0a0c16;
      --page-sheen: rgba(201, 162, 39, 0.05);
      --frame-nav-surface: rgba(13, 18, 33, 0.92);
      --frame-nav-border: rgba(201, 162, 39, 0.2);
      --frame-nav-shadow: 0 14px 30px rgba(0, 0, 0, 0.5);
      --phase-text: #9aa4c2;
      --primary-start: #c9a227;
      --primary-end: #e8cf85;
      --primary-border: rgba(201, 162, 39, 0.7);
      --primary-text: #14192a;
      --secondary-bg: rgba(28, 34, 54, 0.86);
      --secondary-text: #e9ecf5;
      --secondary-border: rgba(233, 236, 245, 0.16);
      --secondary-shadow: 0 14px 26px rgba(0, 0, 0, 0.4);
      --accent-start: #9b1b2e;
      --accent-end: #cf4a5f;
      --accent-border: rgba(155, 27, 46, 0.6);
      --accent-text: #ffffff;
      --hero-overlay-start: rgba(4, 6, 14, 0.96);
      --hero-overlay-end: rgba(20, 24, 44, 0.92);
      --hero-burst-one: rgba(201, 162, 39, 0.16);
      --hero-burst-two: rgba(155, 27, 46, 0.16);
      --hero-burst-three: rgba(42, 74, 140, 0.22);
      --surface-bg: rgba(21, 27, 44, 0.92);
      --surface-bg-strong: rgba(26, 33, 53, 0.97);
      --surface-border: rgba(233, 236, 245, 0.1);
      --card-bg: rgba(23, 29, 47, 0.94);
      --card-border: rgba(233, 236, 245, 0.12);
      --login-shell-start: rgba(6, 9, 20, 0.95);
      --login-shell-end: rgba(30, 24, 44, 0.9);
      --login-shell-border: rgba(201, 162, 39, 0.3);
      --login-shell-shadow: 0 34px 72px rgba(0, 0, 0, 0.6);
      --login-brand-bg-start: rgba(26, 32, 51, 0.98);
      --login-brand-bg-end: rgba(19, 24, 40, 0.96);
      --login-brand-border: rgba(201, 162, 39, 0.32);
      --login-brand-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 16px 26px rgba(0, 0, 0, 0.4);
      --login-panel-bg: rgba(19, 24, 40, 0.94);
      --login-panel-border: rgba(233, 236, 245, 0.12);
      --input-bg: rgba(15, 19, 33, 0.9);
      --input-border: rgba(233, 236, 245, 0.18);
      --muted-text: #9aa4c2;
      --banner-start: rgba(8, 11, 22, 0.96);
      --banner-end: rgba(155, 27, 46, 0.7);
      --drawer-backdrop: rgba(0, 0, 0, 0.6);
      --drawer-bg-start: rgba(19, 24, 40, 0.98);
      --drawer-bg-end: rgba(13, 17, 30, 0.98);
      --drawer-shadow: -20px 0 50px rgba(0, 0, 0, 0.5);
      --theme-menu-bg: rgba(23, 29, 47, 0.99);
      --theme-menu-border: rgba(233, 236, 245, 0.14);
      --theme-menu-shadow: 0 20px 42px rgba(0, 0, 0, 0.5);
      --theme-option-hover: rgba(233, 236, 245, 0.06);
      --theme-option-active: rgba(233, 236, 245, 0.1);
      --table-shell-border: rgba(233, 236, 245, 0.12);
      --table-shell-bg: linear-gradient(180deg, rgba(23, 29, 47, 0.95), rgba(15, 19, 33, 0.92));
      --table-head-bg: rgba(28, 34, 54, 0.92);
      --table-head-text: #e9ecf5;
      --table-line: rgba(233, 236, 245, 0.12);
      --table-line-strong: rgba(233, 236, 245, 0.22);
      --table-row-hover: rgba(233, 236, 245, 0.05);
      --timeline-shell-bg: linear-gradient(180deg, rgba(23, 29, 47, 0.95), rgba(15, 19, 33, 0.92));
      --timeline-shell-border: rgba(201, 162, 39, 0.22);
      --row-menu-panel-bg: rgba(23, 29, 47, 0.98);
      --row-menu-panel-border: rgba(233, 236, 245, 0.14);
      --row-menu-item-bg: rgba(28, 34, 54, 0.96);
      --row-menu-item-hover: rgba(38, 45, 68, 0.96);
      --row-menu-item-text: #e9ecf5;
      --hero-graphic: url("/assets/themes/emblem-dark_v1.0.svg");
      --login-graphic: url("/assets/themes/emblem-dark_v1.0.svg");
    }
    html[data-theme="dark-theme"] .brand img.wordmark,
    html[data-theme="dark-theme"] .brand-wordmark,
    html[data-theme="dark-theme"] .footer-brand-line img,
    html[data-theme="dark-theme"] .event-drawer-head-logo {
      background: #ffffff;
      padding: 6px 12px;
      border-radius: 10px;
    }
    html[data-theme="dark-theme"] .login-emblem {
      background: #ffffff;
      padding: 8px;
      border-radius: 999px;
      box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.12);
    }
    html[data-theme="bright-theme"] {
      --ink: #10162a;
      --line: rgba(16, 22, 42, 0.1);
      --shadow: 0 24px 60px rgba(16, 22, 42, 0.12);
      --shadow-soft: 0 16px 34px rgba(16, 22, 42, 0.07);
      --hero-shadow: 0 30px 60px rgba(16, 22, 42, 0.18);
      --page-bg-start: #ffffff;
      --page-bg-mid: #fbfbfe;
      --page-bg-end: #f2f4f9;
      --page-sheen: rgba(27, 42, 91, 0.03);
      --frame-nav-surface: rgba(255, 255, 255, 0.98);
      --frame-nav-border: rgba(16, 22, 42, 0.12);
      --frame-nav-shadow: 0 12px 24px rgba(16, 22, 42, 0.06);
      --phase-text: #4c5670;
      --primary-start: #10162a;
      --primary-end: #223055;
      --primary-border: rgba(16, 22, 42, 0.9);
      --primary-text: #ffffff;
      --secondary-bg: rgba(255, 255, 255, 0.95);
      --secondary-text: #10162a;
      --secondary-border: rgba(16, 22, 42, 0.1);
      --secondary-shadow: 0 14px 26px rgba(16, 22, 42, 0.06);
      --accent-start: #c9a227;
      --accent-end: #e8cf85;
      --accent-border: rgba(201, 162, 39, 0.6);
      --accent-text: #10162a;
      --hero-overlay-start: rgba(16, 22, 42, 0.94);
      --hero-overlay-end: rgba(155, 27, 46, 0.6);
      --hero-burst-one: rgba(201, 162, 39, 0.2);
      --hero-burst-two: rgba(155, 27, 46, 0.16);
      --hero-burst-three: rgba(16, 22, 42, 0.22);
      --surface-bg: rgba(255, 255, 255, 0.97);
      --surface-bg-strong: rgba(255, 255, 255, 0.995);
      --surface-border: rgba(16, 22, 42, 0.08);
      --card-bg: rgba(255, 255, 255, 0.98);
      --card-border: rgba(16, 22, 42, 0.08);
      --login-shell-start: rgba(16, 22, 42, 0.92);
      --login-shell-end: rgba(155, 27, 46, 0.68);
      --login-shell-border: rgba(201, 162, 39, 0.3);
      --login-shell-shadow: 0 30px 62px rgba(16, 22, 42, 0.22);
      --login-brand-bg-start: rgba(255, 255, 255, 0.99);
      --login-brand-bg-end: rgba(247, 248, 251, 0.97);
      --login-brand-border: rgba(201, 162, 39, 0.3);
      --login-brand-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 16px 26px rgba(16, 22, 42, 0.08);
      --login-panel-bg: rgba(255, 255, 255, 0.98);
      --login-panel-border: rgba(16, 22, 42, 0.08);
      --input-bg: rgba(255, 255, 255, 0.99);
      --input-border: rgba(16, 22, 42, 0.12);
      --muted-text: #4c5670;
      --banner-start: rgba(16, 22, 42, 0.95);
      --banner-end: rgba(155, 27, 46, 0.7);
      --theme-menu-bg: rgba(255, 255, 255, 0.99);
      --theme-menu-border: rgba(16, 22, 42, 0.1);
      --theme-menu-shadow: 0 20px 42px rgba(16, 22, 42, 0.12);
      --theme-option-hover: rgba(16, 22, 42, 0.045);
      --theme-option-active: rgba(16, 22, 42, 0.08);
      --table-shell-border: rgba(16, 22, 42, 0.1);
      --table-shell-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(246, 247, 250, 0.95));
      --table-head-bg: rgba(243, 244, 248, 0.92);
      --table-head-text: #10162a;
      --table-line: rgba(16, 22, 42, 0.12);
      --table-line-strong: rgba(16, 22, 42, 0.24);
      --table-row-hover: rgba(16, 22, 42, 0.035);
      --timeline-shell-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(246, 247, 250, 0.95));
      --timeline-shell-border: rgba(201, 162, 39, 0.2);
      --row-menu-panel-bg: rgba(255, 255, 255, 0.99);
      --row-menu-panel-border: rgba(16, 22, 42, 0.12);
      --row-menu-item-bg: rgba(244, 245, 249, 0.98);
      --row-menu-item-hover: rgba(230, 233, 241, 0.96);
      --row-menu-item-text: #10162a;
      --hero-graphic: url("/assets/themes/emblem-bright_v1.0.svg");
      --login-graphic: url("/assets/themes/emblem-bright_v1.0.svg");
    }


    html[data-button-style="signature-gloss"],
    [data-button-style-preview="signature-gloss"] {
      --nib-ui-on-primary: #ffffff;
      --nib-ui-on-secondary: var(--secondary-text);
      --nib-ui-on-accent: var(--accent-text, var(--navy));
      --nib-ui-on-danger: #ffffff;
      --nib-ui-on-outline: var(--secondary-text);
      --nib-ui-on-flat: var(--secondary-text);
      --nib-ui-button-radius-base: 16px;
      --nib-ui-button-radius-soft: 12px;
      --nib-ui-button-radius-pill: 999px;
      --nib-ui-button-shell-primary: linear-gradient(135deg, var(--primary-start), color-mix(in srgb, var(--primary-end) 78%, var(--red) 22%));
      --nib-ui-button-shell-secondary: linear-gradient(180deg, rgba(255,253,247,0.99), rgba(245,241,230,0.93));
      --nib-ui-button-shell-accent: linear-gradient(135deg, var(--accent-start), color-mix(in srgb, var(--accent-end) 84%, #ffffff 16%));
      --nib-ui-button-shell-danger: linear-gradient(135deg, color-mix(in srgb, var(--red) 92%, #ffffff 8%), color-mix(in srgb, var(--red) 70%, #c9a227 30%));
      --nib-ui-button-shell-outline: linear-gradient(180deg, rgba(255,255,255,0.86), rgba(255,255,255,0.46));
      --nib-ui-button-shell-flat: color-mix(in srgb, var(--cream) 82%, #ffffff 18%);
      --nib-ui-button-border-primary: color-mix(in srgb, var(--primary-start) 58%, var(--gold) 42%);
      --nib-ui-button-border-secondary: var(--nib-ui-gloss-line);
      --nib-ui-button-border-accent: color-mix(in srgb, var(--gold) 62%, var(--primary-start) 38%);
      --nib-ui-button-border-danger: color-mix(in srgb, var(--red) 60%, #ffffff 40%);
      --nib-ui-button-border-outline: color-mix(in srgb, var(--primary-start) 34%, var(--gold) 20%);
      --nib-ui-button-shadow-rest: var(--nib-ui-gloss-shadow-soft), var(--nib-ui-gloss-inner);
      --nib-ui-button-shadow-strong: 0 18px 32px rgba(16, 29, 63, 0.22), var(--nib-ui-gloss-inner);
      --nib-ui-button-shadow-hover: 0 20px 34px rgba(16, 29, 63, 0.16), var(--nib-ui-gloss-inner);
      --nib-ui-button-shadow-flat: 0 12px 26px rgba(16,29,63,0.08);
      --nib-ui-button-shadow-pressed: inset 0 1px 8px rgba(16, 29, 63, 0.12);
      --nib-ui-button-highlight-bg: linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.22) 48%, rgba(255,255,255,0) 100%);
      --nib-ui-button-highlight-opacity: 0.76;
      --nib-ui-button-highlight-radius: calc(var(--nib-ui-button-radius-base) - 1px) calc(var(--nib-ui-button-radius-base) - 1px) 12px 12px;
      --nib-ui-button-translate-hover: -1px;
      --nib-ui-button-icon-bg: var(--nib-ui-button-shell-primary);
      --nib-ui-button-icon-border: color-mix(in srgb, var(--gold) 42%, var(--primary-start) 58%);
      --nib-ui-button-icon-shadow: 0 16px 30px rgba(16, 29, 63, 0.2), var(--nib-ui-gloss-inner);
      --nib-ui-chip-bg: linear-gradient(180deg, rgba(255,255,255,0.76), rgba(255,255,255,0.34));
      --nib-ui-chip-border: color-mix(in srgb, var(--gold) 34%, transparent);
      --nib-ui-chip-shadow: inset 0 1px 0 rgba(255,255,255,0.76);
    }

    html[data-button-style="royal-gradient"],
    [data-button-style-preview="royal-gradient"] {
      --nib-ui-on-primary: #ffffff;
      --nib-ui-on-secondary: var(--secondary-text);
      --nib-ui-on-accent: var(--navy);
      --nib-ui-on-danger: #ffffff;
      --nib-ui-on-outline: var(--secondary-text);
      --nib-ui-on-flat: var(--secondary-text);
      --nib-ui-button-radius-base: 18px;
      --nib-ui-button-radius-soft: 14px;
      --nib-ui-button-font-weight: 800;
      --nib-ui-button-shell-primary: linear-gradient(135deg, #11224c 0%, #9b1b2e 54%, #d8b650 100%);
      --nib-ui-button-shell-secondary: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,243,232,0.95));
      --nib-ui-button-shell-accent: linear-gradient(135deg, #c9a227 0%, #efd47a 48%, #9b1b2e 100%);
      --nib-ui-button-shell-danger: linear-gradient(135deg, #9b1b2e 0%, #cf5367 100%);
      --nib-ui-button-shadow-rest: 0 16px 30px rgba(17, 34, 76, 0.18), inset 0 1px 0 rgba(255,255,255,0.7);
      --nib-ui-button-shadow-strong: 0 18px 34px rgba(17, 34, 76, 0.24), inset 0 1px 0 rgba(255,255,255,0.72);
      --nib-ui-button-shadow-hover: 0 22px 38px rgba(17, 34, 76, 0.22), inset 0 1px 0 rgba(255,255,255,0.75);
      --nib-ui-button-highlight-bg: linear-gradient(180deg, rgba(255,255,255,0.72), rgba(255,255,255,0.16) 44%, rgba(255,255,255,0) 100%);
      --nib-ui-button-icon-bg: linear-gradient(135deg, #11224c 0%, #9b1b2e 100%);
    }

    html[data-button-style="soft-neumorph"],
    [data-button-style-preview="soft-neumorph"] {
      --nib-ui-on-primary: #ffffff;
      --nib-ui-on-secondary: var(--secondary-text);
      /* Fixed navy, not var(--navy): the accent surface here is always gold-toned, but Dark
         theme repurposes --navy into a pale gold for legibility elsewhere, which would put
         near-identical pale-gold text on a gold button (BUG_AUDIT_v1.0.md #26). */
      --nib-ui-on-accent: #1b2a5b;
      --nib-ui-on-danger: #ffffff;
      --nib-ui-on-outline: var(--secondary-text);
      --nib-ui-on-flat: var(--secondary-text);
      --nib-ui-button-radius-base: 20px;
      --nib-ui-button-radius-soft: 16px;
      --nib-ui-button-border-style: solid;
      --nib-ui-button-shell-primary: linear-gradient(145deg, color-mix(in srgb, var(--navy) 88%, #ffffff 12%), color-mix(in srgb, var(--navy) 62%, #ffffff 38%));
      --nib-ui-button-shell-secondary: linear-gradient(145deg, #fffaf0, #f1e9da);
      --nib-ui-button-shell-accent: linear-gradient(145deg, #e6c868, #c59d26);
      --nib-ui-button-shell-danger: linear-gradient(145deg, #c4455c, #962338);
      --nib-ui-button-border-primary: rgba(255,255,255,0.45);
      --nib-ui-button-border-secondary: rgba(255,255,255,0.72);
      --nib-ui-button-border-accent: rgba(255,255,255,0.46);
      --nib-ui-button-border-danger: rgba(255,255,255,0.34);
      --nib-ui-button-border-outline: rgba(255,255,255,0.8);
      --nib-ui-button-shadow-rest: 8px 8px 18px rgba(27, 42, 91, 0.14), -7px -7px 18px rgba(255,255,255,0.92);
      --nib-ui-button-shadow-strong: 10px 10px 22px rgba(27, 42, 91, 0.16), -8px -8px 20px rgba(255,255,255,0.95);
      --nib-ui-button-shadow-hover: 12px 12px 24px rgba(27, 42, 91, 0.18), -8px -8px 22px rgba(255,255,255,0.96);
      --nib-ui-button-shadow-flat: 7px 7px 16px rgba(27, 42, 91, 0.12), -6px -6px 16px rgba(255,255,255,0.92);
      --nib-ui-button-shadow-pressed: inset 8px 8px 14px rgba(27, 42, 91, 0.12), inset -7px -7px 14px rgba(255,255,255,0.9);
      --nib-ui-button-highlight-bg: linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0.08) 50%, rgba(255,255,255,0) 100%);
      --nib-ui-button-highlight-opacity: 0.5;
      --nib-ui-button-icon-bg: linear-gradient(145deg, color-mix(in srgb, var(--red) 74%, #ffffff 26%), color-mix(in srgb, var(--gold) 52%, var(--red) 48%));
      --nib-ui-chip-bg: linear-gradient(145deg, #fffaf0, #efe6d6);
      --nib-ui-chip-shadow: inset 1px 1px 0 rgba(255,255,255,0.9), 4px 4px 10px rgba(27,42,91,0.08);
    }

    html[data-button-style="frosted-glass"],
    [data-button-style-preview="frosted-glass"] {
      --nib-ui-on-primary: #ffffff;
      --nib-ui-on-secondary: var(--secondary-text);
      --nib-ui-on-accent: var(--navy);
      --nib-ui-on-danger: #ffffff;
      --nib-ui-on-outline: var(--secondary-text);
      --nib-ui-on-flat: var(--secondary-text);
      --nib-ui-button-radius-base: 18px;
      --nib-ui-button-radius-soft: 14px;
      --nib-ui-button-font-weight: 600;
      --nib-ui-button-backdrop-filter: blur(12px) saturate(140%);
      --nib-ui-button-shell-primary: linear-gradient(135deg, rgba(27,42,91,0.72), rgba(155,27,46,0.62));
      --nib-ui-button-shell-secondary: linear-gradient(135deg, rgba(255,255,255,0.72), rgba(255,255,255,0.52));
      --nib-ui-button-shell-accent: linear-gradient(135deg, rgba(201,162,39,0.76), rgba(255,255,255,0.46));
      --nib-ui-button-shell-danger: linear-gradient(135deg, rgba(155,27,46,0.94), rgba(178,44,66,0.82));
      --nib-ui-button-border-primary: rgba(255,255,255,0.42);
      --nib-ui-button-border-secondary: rgba(255,255,255,0.6);
      --nib-ui-button-border-accent: rgba(255,255,255,0.46);
      --nib-ui-button-border-danger: rgba(255,255,255,0.34);
      --nib-ui-button-border-outline: rgba(255,255,255,0.56);
      --nib-ui-button-shadow-rest: 0 18px 28px rgba(17, 28, 59, 0.16);
      --nib-ui-button-shadow-strong: 0 18px 32px rgba(17, 28, 59, 0.2);
      --nib-ui-button-shadow-hover: 0 22px 36px rgba(17, 28, 59, 0.22);
      --nib-ui-button-shadow-flat: 0 14px 24px rgba(17, 28, 59, 0.12);
      --nib-ui-button-shadow-pressed: inset 0 1px 10px rgba(17,28,59,0.18);
      --nib-ui-button-highlight-bg: linear-gradient(180deg, rgba(255,255,255,0.46), rgba(255,255,255,0.12) 48%, rgba(255,255,255,0) 100%);
      --nib-ui-button-highlight-opacity: 0.46;
      --nib-ui-button-icon-bg: linear-gradient(135deg, rgba(27,42,91,0.78), rgba(201,162,39,0.58));
      --nib-ui-chip-bg: linear-gradient(135deg, rgba(255,255,255,0.62), rgba(255,255,255,0.28));
    }

    html[data-button-style="brutalist-retro"],
    [data-button-style-preview="brutalist-retro"] {
      --nib-ui-on-primary: #ffffff;
      --nib-ui-on-secondary: var(--secondary-text);
      --nib-ui-on-accent: var(--navy);
      --nib-ui-on-danger: #ffffff;
      --nib-ui-on-outline: var(--secondary-text);
      --nib-ui-on-flat: var(--secondary-text);
      --nib-ui-button-radius-base: 8px;
      --nib-ui-button-radius-soft: 8px;
      --nib-ui-button-font-family: var(--brand-display);
      --nib-ui-button-font-weight: 800;
      --nib-ui-button-letter-spacing: 0.04em;
      --nib-ui-button-text-transform: uppercase;
      --nib-ui-button-icon-radius: 8px;
      --nib-ui-button-shell-primary: linear-gradient(180deg, #1b2a5b, #1b2a5b);
      --nib-ui-button-shell-secondary: linear-gradient(180deg, #fffdf7, #fffdf7);
      --nib-ui-button-shell-accent: linear-gradient(180deg, #c9a227, #c9a227);
      --nib-ui-button-shell-danger: linear-gradient(180deg, #9b1b2e, #9b1b2e);
      --nib-ui-button-border-primary: #0f1b3a;
      --nib-ui-button-border-secondary: #1b2a5b;
      --nib-ui-button-border-accent: #7d6111;
      --nib-ui-button-border-danger: #5e0f1d;
      --nib-ui-button-border-outline: #1b2a5b;
      --nib-ui-button-shadow-rest: 5px 5px 0 rgba(17, 34, 76, 0.9);
      --nib-ui-button-shadow-strong: 5px 5px 0 rgba(17, 34, 76, 0.95);
      --nib-ui-button-shadow-hover: 7px 7px 0 rgba(17, 34, 76, 0.95);
      --nib-ui-button-shadow-flat: 4px 4px 0 rgba(17, 34, 76, 0.75);
      --nib-ui-button-shadow-pressed: 2px 2px 0 rgba(17,34,76,0.95);
      --nib-ui-button-highlight-bg: none;
      --nib-ui-button-highlight-opacity: 0;
      --nib-ui-button-translate-hover: -2px;
      --nib-ui-button-icon-bg: linear-gradient(180deg, #9b1b2e, #9b1b2e);
      --nib-ui-button-icon-shadow: 4px 4px 0 rgba(17,34,76,0.9);
      --nib-ui-chip-bg: linear-gradient(180deg, #ffffff, #ffffff);
      --nib-ui-chip-border: #1b2a5b;
      --nib-ui-chip-shadow: 3px 3px 0 rgba(17,34,76,0.65);
    }

    html[data-button-style="paper-ledger"],
    [data-button-style-preview="paper-ledger"] {
      --nib-ui-on-primary: #ffffff;
      --nib-ui-on-secondary: var(--secondary-text);
      --nib-ui-on-accent: var(--navy);
      --nib-ui-on-danger: #ffffff;
      --nib-ui-on-outline: var(--secondary-text);
      --nib-ui-on-flat: var(--secondary-text);
      --nib-ui-button-radius-base: 12px;
      --nib-ui-button-radius-soft: 10px;
      --nib-ui-button-font-family: var(--brand-display);
      --nib-ui-button-letter-spacing: 0.01em;
      --nib-ui-button-shell-primary: linear-gradient(180deg, #1b2a5b, #31467d);
      --nib-ui-button-shell-secondary: linear-gradient(180deg, #fffdf8, #f4eddf);
      --nib-ui-button-shell-accent: linear-gradient(180deg, #e7cf83, #c9a227);
      --nib-ui-button-shell-danger: linear-gradient(180deg, #b4384d, #9b1b2e);
      --nib-ui-button-border-primary: rgba(27,42,91,0.68);
      --nib-ui-button-border-secondary: rgba(110,101,77,0.28);
      --nib-ui-button-border-accent: rgba(141,108,18,0.44);
      --nib-ui-button-shadow-rest: 0 8px 18px rgba(27, 42, 91, 0.08);
      --nib-ui-button-shadow-strong: 0 10px 20px rgba(27, 42, 91, 0.12);
      --nib-ui-button-shadow-hover: 0 12px 24px rgba(27, 42, 91, 0.12);
      --nib-ui-button-shadow-flat: 0 8px 16px rgba(27,42,91,0.06);
      --nib-ui-button-shadow-pressed: inset 0 1px 6px rgba(27,42,91,0.08);
      --nib-ui-button-highlight-bg: linear-gradient(180deg, rgba(255,255,255,0.45), rgba(255,255,255,0) 100%);
      --nib-ui-button-highlight-opacity: 0.32;
      --nib-ui-button-icon-bg: linear-gradient(180deg, #fffdf8, #efe6d5);
      --nib-ui-button-icon-border: rgba(110,101,77,0.3);
      --nib-ui-button-icon-shadow: 0 8px 16px rgba(27, 42, 91, 0.08);
    }

    html[data-button-style="executive-solid"],
    [data-button-style-preview="executive-solid"] {
      --nib-ui-on-primary: #ffffff;
      --nib-ui-on-secondary: var(--secondary-text);
      /* Fixed navy, not var(--navy): the accent surface here is always gold-toned, but Dark
         theme repurposes --navy into a pale gold for legibility elsewhere, which would put
         near-identical pale-gold text on a gold button (BUG_AUDIT_v1.0.md #26). */
      --nib-ui-on-accent: #1b2a5b;
      --nib-ui-on-danger: #ffffff;
      --nib-ui-on-outline: var(--secondary-text);
      --nib-ui-on-flat: var(--secondary-text);
      --nib-ui-button-radius-base: 14px;
      --nib-ui-button-radius-soft: 12px;
      --nib-ui-button-font-family: var(--brand-display);
      --nib-ui-button-highlight-opacity: 0;
      --nib-ui-button-shell-primary: linear-gradient(180deg, #1b2a5b, #1b2a5b);
      --nib-ui-button-shell-secondary: linear-gradient(180deg, #ffffff, #ffffff);
      --nib-ui-button-shell-accent: linear-gradient(180deg, #c9a227, #c9a227);
      --nib-ui-button-shell-danger: linear-gradient(180deg, #9b1b2e, #9b1b2e);
      --nib-ui-button-border-primary: rgba(27,42,91,0.88);
      --nib-ui-button-border-secondary: rgba(27,42,91,0.16);
      --nib-ui-button-border-accent: rgba(201,162,39,0.84);
      --nib-ui-button-border-danger: rgba(155,27,46,0.84);
      --nib-ui-button-shadow-rest: 0 10px 20px rgba(17, 34, 76, 0.12);
      --nib-ui-button-shadow-strong: 0 12px 24px rgba(17, 34, 76, 0.16);
      --nib-ui-button-shadow-hover: 0 14px 26px rgba(17, 34, 76, 0.18);
      --nib-ui-button-shadow-flat: 0 8px 16px rgba(17,34,76,0.1);
      --nib-ui-button-shadow-pressed: inset 0 1px 6px rgba(17,34,76,0.12);
      --nib-ui-button-highlight-bg: none;
      --nib-ui-button-icon-bg: linear-gradient(180deg, #1b2a5b, #1b2a5b);
      --nib-ui-button-icon-shadow: 0 10px 18px rgba(17,34,76,0.14);
      --nib-ui-chip-bg: linear-gradient(180deg, #ffffff, #ffffff);
    }

    html[data-button-style="midnight-glow"],
    [data-button-style-preview="midnight-glow"] {
      --nib-ui-on-primary: #ffffff;
      --nib-ui-on-secondary: var(--cream);
      --nib-ui-on-accent: var(--navy);
      --nib-ui-on-danger: #ffffff;
      --nib-ui-on-outline: var(--secondary-text);
      --nib-ui-on-flat: var(--secondary-text);
      --nib-ui-button-radius-base: 18px;
      --nib-ui-button-radius-soft: 14px;
      --nib-ui-button-backdrop-filter: saturate(120%);
      --nib-ui-button-shell-primary: linear-gradient(135deg, #0f1b38 0%, #1b2a5b 54%, #7a1630 100%);
      --nib-ui-button-shell-secondary: linear-gradient(135deg, rgba(20,30,60,0.92), rgba(34,47,84,0.82));
      --nib-ui-button-shell-accent: linear-gradient(135deg, #c9a227 0%, #f0d887 100%);
      --nib-ui-button-shell-danger: linear-gradient(135deg, #7a1630 0%, #b4334a 100%);
      --nib-ui-button-border-primary: rgba(233,214,150,0.38);
      --nib-ui-button-border-secondary: rgba(214,221,246,0.18);
      --nib-ui-button-border-accent: rgba(240,216,135,0.58);
      --nib-ui-button-border-danger: rgba(193,73,101,0.5);
      --nib-ui-button-shadow-rest: 0 16px 30px rgba(10, 18, 38, 0.32), 0 0 0 1px rgba(240,216,135,0.08);
      --nib-ui-button-shadow-strong: 0 18px 34px rgba(10, 18, 38, 0.38), 0 0 0 1px rgba(240,216,135,0.1);
      --nib-ui-button-shadow-hover: 0 22px 38px rgba(10, 18, 38, 0.42), 0 0 0 1px rgba(240,216,135,0.12);
      --nib-ui-button-shadow-flat: 0 12px 20px rgba(10,18,38,0.22);
      --nib-ui-button-shadow-pressed: inset 0 1px 10px rgba(10,18,38,0.2);
      --nib-ui-button-highlight-bg: linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0.05) 48%, rgba(255,255,255,0) 100%);
      --nib-ui-button-highlight-opacity: 0.42;
      --nib-ui-button-icon-bg: linear-gradient(135deg, #1b2a5b 0%, #c9a227 100%);
      --nib-ui-chip-bg: linear-gradient(180deg, rgba(35,47,86,0.92), rgba(24,33,61,0.82));
      --nib-ui-chip-border: rgba(240,216,135,0.24);
    }

    html[data-button-style="ceramic-pill"],
    [data-button-style-preview="ceramic-pill"] {
      --nib-ui-on-primary: var(--secondary-text);
      --nib-ui-on-secondary: var(--secondary-text);
      --nib-ui-on-accent: var(--navy);
      --nib-ui-on-danger: #ffffff;
      --nib-ui-on-outline: var(--secondary-text);
      --nib-ui-on-flat: var(--secondary-text);
      --nib-ui-button-radius-base: 999px;
      --nib-ui-button-radius-soft: 999px;
      --nib-ui-button-icon-radius: 999px;
      --nib-ui-button-shell-primary: linear-gradient(180deg, color-mix(in srgb, var(--primary-start) 8%, #ffffff 92%), color-mix(in srgb, var(--primary-end) 16%, #f5efe4 84%));
      --nib-ui-button-shell-secondary: linear-gradient(180deg, #ffffff 0%, color-mix(in srgb, var(--cream) 72%, #ffffff 28%) 100%);
      --nib-ui-button-shell-accent: linear-gradient(180deg, color-mix(in srgb, var(--accent-start) 48%, #ffffff 52%), color-mix(in srgb, var(--accent-end) 86%, #ffffff 14%) 100%);
      --nib-ui-button-shell-danger: linear-gradient(180deg, #f2b2bc 0%, #b73b50 100%);
      --nib-ui-button-border-primary: color-mix(in srgb, var(--primary-start) 22%, var(--gold) 28%);
      --nib-ui-button-border-secondary: color-mix(in srgb, var(--primary-start) 14%, transparent);
      --nib-ui-button-border-accent: color-mix(in srgb, var(--accent-end) 48%, transparent);
      --nib-ui-button-border-danger: rgba(155,27,46,0.36);
      --nib-ui-button-shadow-rest: 0 14px 24px rgba(27, 42, 91, 0.1), inset 0 2px 0 rgba(255,255,255,0.96);
      --nib-ui-button-shadow-strong: 0 16px 28px rgba(27, 42, 91, 0.14), inset 0 2px 0 rgba(255,255,255,0.98);
      --nib-ui-button-shadow-hover: 0 18px 30px rgba(27, 42, 91, 0.16), inset 0 2px 0 rgba(255,255,255,0.98);
      --nib-ui-button-shadow-flat: 0 10px 18px rgba(27,42,91,0.08);
      --nib-ui-button-highlight-bg: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,255,255,0.35) 52%, rgba(255,255,255,0) 100%);
      --nib-ui-button-highlight-opacity: 0.82;
      --nib-ui-button-highlight-radius: 999px;
      --nib-ui-button-icon-bg: linear-gradient(180deg, color-mix(in srgb, var(--primary-start) 10%, #ffffff 90%) 0%, color-mix(in srgb, var(--cream) 68%, #ffffff 32%) 100%);
      --nib-ui-button-icon-border: rgba(201,162,39,0.36);
      --nib-ui-button-icon-shadow: 0 12px 22px rgba(27, 42, 91, 0.12), inset 0 2px 0 rgba(255,255,255,0.98);
      --nib-ui-chip-bg: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(245,241,230,0.82));
    }

    html[data-button-style="metallic-gold"],
    [data-button-style-preview="metallic-gold"] {
      --nib-ui-on-primary: var(--navy);
      --nib-ui-on-secondary: var(--secondary-text);
      --nib-ui-on-accent: var(--navy);
      --nib-ui-on-danger: #ffffff;
      --nib-ui-on-outline: var(--secondary-text);
      --nib-ui-on-flat: var(--secondary-text);
      --nib-ui-button-radius-base: 15px;
      --nib-ui-button-radius-soft: 12px;
      --nib-ui-button-font-weight: 800;
      --nib-ui-button-letter-spacing: 0.02em;
      --nib-ui-button-shell-primary: linear-gradient(135deg, #8b6710 0%, #c9a227 32%, #f6df96 50%, #b88b1c 78%, #7c5d12 100%);
      --nib-ui-button-shell-secondary: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(247,243,233,0.94));
      --nib-ui-button-shell-accent: linear-gradient(135deg, #c9a227 0%, #f8edc0 52%, #9b1b2e 100%);
      --nib-ui-button-shell-danger: linear-gradient(135deg, #9b1b2e 0%, #c74d63 100%);
      --nib-ui-button-border-primary: rgba(124,93,18,0.76);
      --nib-ui-button-border-secondary: rgba(201,162,39,0.24);
      --nib-ui-button-border-accent: rgba(124,93,18,0.58);
      --nib-ui-button-shadow-rest: 0 16px 28px rgba(96, 69, 12, 0.18), inset 0 1px 0 rgba(255,255,255,0.82);
      --nib-ui-button-shadow-strong: 0 18px 32px rgba(96, 69, 12, 0.22), inset 0 1px 0 rgba(255,255,255,0.84);
      --nib-ui-button-shadow-hover: 0 20px 34px rgba(96, 69, 12, 0.24), inset 0 1px 0 rgba(255,255,255,0.86);
      --nib-ui-button-shadow-flat: 0 10px 18px rgba(96,69,12,0.12);
      --nib-ui-button-icon-bg: linear-gradient(135deg, #8b6710 0%, #f6df96 50%, #b88b1c 100%);
      --nib-ui-chip-bg: linear-gradient(180deg, rgba(255,250,238,0.92), rgba(249,238,207,0.8));
    }

    html[data-button-style="minimal-outline"],
    [data-button-style-preview="minimal-outline"] {
      --nib-ui-on-primary: var(--secondary-text);
      --nib-ui-on-secondary: var(--secondary-text);
      --nib-ui-on-accent: var(--secondary-text);
      --nib-ui-on-danger: var(--red);
      --nib-ui-on-outline: var(--secondary-text);
      --nib-ui-on-flat: var(--secondary-text);
      --nib-ui-button-radius-base: 14px;
      --nib-ui-button-radius-soft: 10px;
      --nib-ui-button-font-family: var(--brand-display);
      --nib-ui-button-font-weight: 600;
      --nib-ui-button-letter-spacing: 0.01em;
      --nib-ui-button-shell-primary: linear-gradient(180deg, rgba(255,255,255,0.99), color-mix(in srgb, var(--cream) 30%, #ffffff 70%));
      --nib-ui-button-shell-secondary: linear-gradient(180deg, rgba(255,255,255,0.99), color-mix(in srgb, var(--cream) 18%, #ffffff 82%));
      --nib-ui-button-shell-accent: linear-gradient(135deg, color-mix(in srgb, var(--accent-start) 14%, #ffffff 86%), color-mix(in srgb, var(--accent-end) 24%, #ffffff 76%));
      --nib-ui-button-shell-danger: linear-gradient(135deg, color-mix(in srgb, var(--red) 12%, #ffffff 88%), color-mix(in srgb, var(--red) 22%, #ffffff 78%));
      --nib-ui-button-border-primary: color-mix(in srgb, var(--primary-start) 28%, transparent);
      --nib-ui-button-border-secondary: color-mix(in srgb, var(--primary-start) 16%, transparent);
      --nib-ui-button-border-accent: color-mix(in srgb, var(--accent-end) 42%, transparent);
      --nib-ui-button-border-danger: color-mix(in srgb, var(--red) 38%, transparent);
      --nib-ui-button-border-outline: rgba(27,42,91,0.22);
      --nib-ui-button-shadow-rest: 0 4px 12px rgba(27, 42, 91, 0.05);
      --nib-ui-button-shadow-strong: 0 6px 14px rgba(27, 42, 91, 0.07);
      --nib-ui-button-shadow-hover: 0 8px 16px rgba(27, 42, 91, 0.08);
      --nib-ui-button-shadow-flat: 0 3px 10px rgba(27,42,91,0.04);
      --nib-ui-button-shadow-pressed: inset 0 1px 4px rgba(27,42,91,0.08);
      --nib-ui-button-highlight-bg: none;
      --nib-ui-button-highlight-opacity: 0;
      --nib-ui-button-translate-hover: 0;
      --nib-ui-button-icon-bg: linear-gradient(180deg, rgba(255,255,255,0.98), color-mix(in srgb, var(--cream) 14%, #ffffff 86%));
      --nib-ui-button-icon-border: rgba(27,42,91,0.18);
      --nib-ui-button-icon-shadow: 0 4px 12px rgba(27, 42, 91, 0.05);
      --nib-ui-chip-bg: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,255,255,0.96));
      --nib-ui-chip-border: rgba(27,42,91,0.14);
      --nib-ui-chip-shadow: none;
    }

    html[data-button-style="velvet-depth"],
    [data-button-style-preview="velvet-depth"] {
      --nib-ui-on-primary: #ffffff;
      --nib-ui-on-secondary: var(--secondary-text);
      --nib-ui-on-accent: var(--navy);
      --nib-ui-on-danger: #ffffff;
      --nib-ui-on-outline: var(--secondary-text);
      --nib-ui-on-flat: var(--secondary-text);
      --nib-ui-button-radius-base: 18px;
      --nib-ui-button-radius-soft: 14px;
      --nib-ui-button-font-weight: 700;
      --nib-ui-button-shell-primary: linear-gradient(135deg, #6a1d4d 0%, #1b2a5b 100%);
      --nib-ui-button-shell-secondary: linear-gradient(135deg, rgba(255,255,255,0.96), rgba(245,239,246,0.92));
      --nib-ui-button-shell-accent: linear-gradient(135deg, #9b1b2e 0%, #c9a227 100%);
      --nib-ui-button-shell-danger: linear-gradient(135deg, #8e1930 0%, #5e153d 100%);
      --nib-ui-button-border-primary: rgba(201,162,39,0.32);
      --nib-ui-button-border-secondary: rgba(106,29,77,0.18);
      --nib-ui-button-border-accent: rgba(201,162,39,0.42);
      --nib-ui-button-border-danger: rgba(155,27,46,0.42);
      --nib-ui-button-shadow-rest: 0 16px 28px rgba(49, 20, 43, 0.22), inset 0 1px 0 rgba(255,255,255,0.5);
      --nib-ui-button-shadow-strong: 0 18px 32px rgba(49, 20, 43, 0.26), inset 0 1px 0 rgba(255,255,255,0.52);
      --nib-ui-button-shadow-hover: 0 22px 36px rgba(49, 20, 43, 0.28), inset 0 1px 0 rgba(255,255,255,0.54);
      --nib-ui-button-shadow-flat: 0 10px 18px rgba(49,20,43,0.14);
      --nib-ui-button-highlight-bg: linear-gradient(180deg, rgba(255,255,255,0.34), rgba(255,255,255,0.08) 50%, rgba(255,255,255,0) 100%);
      --nib-ui-button-highlight-opacity: 0.52;
      --nib-ui-button-icon-bg: linear-gradient(135deg, #6a1d4d 0%, #c9a227 100%);
      --nib-ui-chip-bg: linear-gradient(180deg, rgba(255,250,252,0.86), rgba(244,232,240,0.72));
      --nib-ui-chip-border: rgba(106,29,77,0.18);
    }

    html[data-button-style="obsidian-command"],
    [data-button-style-preview="obsidian-command"] {
      --nib-ui-on-primary: #f7edc3;
      --nib-ui-on-secondary: #dfe6f7;
      --nib-ui-on-accent: #131f43;
      --nib-ui-on-danger: #ffffff;
      --nib-ui-on-outline: #102248;
      --nib-ui-on-flat: #dfe6f7;
      --nib-ui-button-radius-base: 12px;
      --nib-ui-button-radius-soft: 10px;
      --nib-ui-button-font-family: var(--brand-display);
      --nib-ui-button-font-weight: 800;
      --nib-ui-button-letter-spacing: 0.03em;
      --nib-ui-button-shell-primary: linear-gradient(135deg, #0a1230 0%, #162a57 50%, #2b2046 100%);
      --nib-ui-button-shell-secondary: linear-gradient(135deg, #223156 0%, #1b2746 100%);
      --nib-ui-button-shell-accent: linear-gradient(135deg, #d9b14a 0%, #f2df9c 55%, #b58b2f 100%);
      --nib-ui-button-shell-danger: linear-gradient(135deg, #8a2034 0%, #c44d60 100%);
      --nib-ui-button-border-primary: rgba(233, 208, 128, 0.42);
      --nib-ui-button-border-secondary: rgba(198, 208, 232, 0.18);
      --nib-ui-button-border-accent: rgba(123, 91, 20, 0.42);
      --nib-ui-button-border-danger: rgba(233, 190, 198, 0.28);
      --nib-ui-button-shadow-rest: 0 18px 34px rgba(8, 14, 30, 0.34), inset 0 1px 0 rgba(255,255,255,0.08);
      --nib-ui-button-shadow-hover: 0 22px 38px rgba(8, 14, 30, 0.4), inset 0 1px 0 rgba(255,255,255,0.1);
      --nib-ui-button-shadow-strong: 0 20px 36px rgba(8, 14, 30, 0.38), inset 0 1px 0 rgba(255,255,255,0.1);
      --nib-ui-button-shadow-flat: 0 10px 20px rgba(8, 14, 30, 0.24);
      --nib-ui-button-shadow-pressed: inset 0 2px 12px rgba(5,10,24,0.36);
      --nib-ui-button-highlight-bg: linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.04) 52%, rgba(255,255,255,0) 100%);
      --nib-ui-button-highlight-opacity: 0.32;
      --nib-ui-button-icon-bg: linear-gradient(135deg, #101c3a 0%, #c19a36 100%);
      --nib-ui-chip-bg: linear-gradient(180deg, rgba(31,43,78,0.92), rgba(18,26,51,0.84));
      --nib-ui-chip-border: rgba(233, 208, 128, 0.22);
    }

    html[data-button-style="silver-outline"],
    [data-button-style-preview="silver-outline"] {
      --nib-ui-on-primary: #31435f;
      --nib-ui-on-secondary: #31435f;
      --nib-ui-on-accent: #223759;
      --nib-ui-on-danger: #a63a52;
      --nib-ui-on-outline: #31435f;
      --nib-ui-on-flat: #31435f;
      --nib-ui-button-radius-base: 14px;
      --nib-ui-button-radius-soft: 12px;
      --nib-ui-button-font-family: var(--brand-display);
      --nib-ui-button-font-weight: 600;
      --nib-ui-button-shell-primary: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(235,240,247,0.96));
      --nib-ui-button-shell-secondary: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(245,247,251,0.96));
      --nib-ui-button-shell-accent: linear-gradient(180deg, rgba(255,250,238,0.98), rgba(246,235,201,0.94));
      --nib-ui-button-shell-danger: linear-gradient(180deg, rgba(255,245,247,0.98), rgba(249,227,232,0.95));
      --nib-ui-button-border-primary: rgba(114, 127, 150, 0.28);
      --nib-ui-button-border-secondary: rgba(114, 127, 150, 0.22);
      --nib-ui-button-border-accent: rgba(201, 162, 39, 0.34);
      --nib-ui-button-border-danger: rgba(166, 58, 82, 0.26);
      --nib-ui-button-shadow-rest: 0 6px 14px rgba(76, 91, 116, 0.08);
      --nib-ui-button-shadow-hover: 0 10px 18px rgba(76, 91, 116, 0.1);
      --nib-ui-button-shadow-strong: 0 8px 16px rgba(76, 91, 116, 0.1);
      --nib-ui-button-shadow-flat: 0 4px 10px rgba(76, 91, 116, 0.06);
      --nib-ui-button-shadow-pressed: inset 0 1px 4px rgba(76,91,116,0.08);
      --nib-ui-button-highlight-bg: none;
      --nib-ui-button-highlight-opacity: 0;
      --nib-ui-button-icon-bg: linear-gradient(180deg, rgba(255,255,255,0.99), rgba(233,238,246,0.95));
      --nib-ui-button-icon-border: rgba(114, 127, 150, 0.26);
      --nib-ui-button-icon-shadow: 0 4px 10px rgba(76, 91, 116, 0.08);
      --nib-ui-chip-bg: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(241,244,249,0.94));
      --nib-ui-chip-border: rgba(114, 127, 150, 0.18);
    }

    html[data-button-style="studio-plain"],
    [data-button-style-preview="studio-plain"] {
      --nib-ui-on-primary: #ffffff;
      --nib-ui-on-secondary: #1b2a5b;
      --nib-ui-on-accent: #1b2a5b;
      --nib-ui-on-danger: #ffffff;
      --nib-ui-on-outline: #1b2a5b;
      --nib-ui-on-flat: #1b2a5b;
      --nib-ui-button-radius-base: 10px;
      --nib-ui-button-radius-soft: 8px;
      --nib-ui-button-font-family: var(--brand-display);
      --nib-ui-button-font-weight: 700;
      --nib-ui-button-shell-primary: linear-gradient(180deg, #1b2a5b, #24376f);
      --nib-ui-button-shell-secondary: linear-gradient(180deg, #ffffff, #ffffff);
      --nib-ui-button-shell-accent: linear-gradient(180deg, #f9efca, #ead28a);
      --nib-ui-button-shell-danger: linear-gradient(180deg, #9b1b2e, #b82f44);
      --nib-ui-button-border-primary: rgba(27,42,91,0.86);
      --nib-ui-button-border-secondary: rgba(27,42,91,0.14);
      --nib-ui-button-border-accent: rgba(201,162,39,0.38);
      --nib-ui-button-border-danger: rgba(155,27,46,0.72);
      --nib-ui-button-shadow-rest: 0 8px 16px rgba(27, 42, 91, 0.1);
      --nib-ui-button-shadow-hover: 0 10px 18px rgba(27, 42, 91, 0.12);
      --nib-ui-button-shadow-strong: 0 10px 18px rgba(27, 42, 91, 0.12);
      --nib-ui-button-shadow-flat: 0 4px 10px rgba(27,42,91,0.06);
      --nib-ui-button-shadow-pressed: inset 0 1px 6px rgba(27,42,91,0.12);
      --nib-ui-button-highlight-bg: none;
      --nib-ui-button-highlight-opacity: 0;
      --nib-ui-button-icon-bg: linear-gradient(180deg, #1b2a5b, #24376f);
      --nib-ui-button-icon-shadow: 0 8px 16px rgba(27, 42, 91, 0.12);
      --nib-ui-chip-bg: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,250,252,0.95));
      --nib-ui-chip-border: rgba(27,42,91,0.14);
    }

    html[data-button-style="sandstone-ledger"],
    [data-button-style-preview="sandstone-ledger"] {
      --nib-ui-on-primary: #fffdf8;
      --nib-ui-on-secondary: #5b4729;
      --nib-ui-on-accent: #ffffff;
      --nib-ui-on-danger: #ffffff;
      --nib-ui-on-outline: #5b4729;
      --nib-ui-on-flat: #5b4729;
      --nib-ui-button-radius-base: 12px;
      --nib-ui-button-radius-soft: 10px;
      --nib-ui-button-font-family: var(--brand-display);
      --nib-ui-button-shell-primary: linear-gradient(180deg, #7a5c33, #9e7640);
      --nib-ui-button-shell-secondary: linear-gradient(180deg, #fff9ef, #f3e3bf);
      --nib-ui-button-shell-accent: linear-gradient(180deg, #1b2a5b, #33497e);
      --nib-ui-button-shell-danger: linear-gradient(180deg, #9b1b2e, #b53d4f);
      --nib-ui-button-border-primary: rgba(105, 81, 44, 0.7);
      --nib-ui-button-border-secondary: rgba(143, 106, 39, 0.26);
      --nib-ui-button-border-accent: rgba(27, 42, 91, 0.52);
      --nib-ui-button-border-danger: rgba(155, 27, 46, 0.48);
      --nib-ui-button-shadow-rest: 0 10px 18px rgba(92, 71, 39, 0.12);
      --nib-ui-button-shadow-hover: 0 12px 22px rgba(92, 71, 39, 0.15);
      --nib-ui-button-shadow-strong: 0 12px 20px rgba(92, 71, 39, 0.14);
      --nib-ui-button-shadow-flat: 0 6px 12px rgba(92,71,39,0.08);
      --nib-ui-button-shadow-pressed: inset 0 1px 6px rgba(92,71,39,0.1);
      --nib-ui-button-highlight-bg: linear-gradient(180deg, rgba(255,255,255,0.42), rgba(255,255,255,0.08) 48%, rgba(255,255,255,0) 100%);
      --nib-ui-button-highlight-opacity: 0.36;
      --nib-ui-button-icon-bg: linear-gradient(180deg, #fff7eb, #edd7a8);
      --nib-ui-button-icon-border: rgba(143,106,39,0.3);
      --nib-ui-button-icon-shadow: 0 8px 16px rgba(92, 71, 39, 0.12);
      --nib-ui-chip-bg: linear-gradient(180deg, rgba(255,251,243,0.96), rgba(244,232,203,0.92));
      --nib-ui-chip-border: rgba(143,106,39,0.18);
    }

    html[data-button-style="harbor-gloss"],
    [data-button-style-preview="harbor-gloss"] {
      --nib-ui-on-primary: #ffffff;
      --nib-ui-on-secondary: #1f4b73;
      --nib-ui-on-accent: #18365a;
      --nib-ui-on-danger: #ffffff;
      --nib-ui-on-outline: #1f4b73;
      --nib-ui-on-flat: #1f4b73;
      --nib-ui-button-radius-base: 18px;
      --nib-ui-button-radius-soft: 14px;
      --nib-ui-button-shell-primary: linear-gradient(135deg, #1d4d76 0%, #4f8aa9 52%, #82b6c1 100%);
      --nib-ui-button-shell-secondary: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(236,246,248,0.94));
      --nib-ui-button-shell-accent: linear-gradient(135deg, #d0b65a 0%, #efe0a0 52%, #87b7c1 100%);
      --nib-ui-button-shell-danger: linear-gradient(135deg, #8a2740 0%, #c85d73 100%);
      --nib-ui-button-border-primary: rgba(34, 97, 130, 0.56);
      --nib-ui-button-border-secondary: rgba(70, 126, 150, 0.18);
      --nib-ui-button-border-accent: rgba(159, 135, 58, 0.34);
      --nib-ui-button-border-danger: rgba(138, 39, 64, 0.38);
      --nib-ui-button-shadow-rest: 0 16px 28px rgba(23, 71, 102, 0.18), inset 0 1px 0 rgba(255,255,255,0.68);
      --nib-ui-button-shadow-hover: 0 20px 32px rgba(23, 71, 102, 0.22), inset 0 1px 0 rgba(255,255,255,0.72);
      --nib-ui-button-shadow-strong: 0 18px 30px rgba(23, 71, 102, 0.2), inset 0 1px 0 rgba(255,255,255,0.72);
      --nib-ui-button-shadow-flat: 0 10px 18px rgba(23,71,102,0.12);
      --nib-ui-button-highlight-bg: linear-gradient(180deg, rgba(255,255,255,0.7), rgba(255,255,255,0.14) 48%, rgba(255,255,255,0) 100%);
      --nib-ui-button-highlight-opacity: 0.62;
      --nib-ui-button-icon-bg: linear-gradient(135deg, #1f4b73 0%, #d0b65a 100%);
      --nib-ui-chip-bg: linear-gradient(180deg, rgba(255,255,255,0.82), rgba(230,243,246,0.72));
      --nib-ui-chip-border: rgba(70,126,150,0.18);
    }

    html[data-button-style="ruby-glass"],
    [data-button-style-preview="ruby-glass"] {
      --nib-ui-on-primary: #ffffff;
      --nib-ui-on-secondary: #7f2038;
      --nib-ui-on-accent: #ffffff;
      --nib-ui-on-danger: #ffffff;
      --nib-ui-on-outline: #7f2038;
      --nib-ui-on-flat: #7f2038;
      --nib-ui-button-radius-base: 18px;
      --nib-ui-button-radius-soft: 14px;
      --nib-ui-button-backdrop-filter: blur(14px) saturate(150%);
      --nib-ui-button-shell-primary: linear-gradient(135deg, rgba(127,32,56,0.82), rgba(186,83,109,0.62));
      --nib-ui-button-shell-secondary: linear-gradient(135deg, rgba(255,255,255,0.74), rgba(255,243,246,0.58));
      --nib-ui-button-shell-accent: linear-gradient(135deg, rgba(27,42,91,0.8), rgba(201,162,39,0.56));
      --nib-ui-button-shell-danger: linear-gradient(135deg, rgba(120,16,35,0.88), rgba(195,70,94,0.68));
      --nib-ui-button-border-primary: rgba(255, 222, 230, 0.34);
      --nib-ui-button-border-secondary: rgba(255, 232, 237, 0.4);
      --nib-ui-button-border-accent: rgba(219, 201, 156, 0.3);
      --nib-ui-button-border-danger: rgba(255, 213, 223, 0.26);
      --nib-ui-button-shadow-rest: 0 18px 30px rgba(80, 16, 34, 0.22);
      --nib-ui-button-shadow-hover: 0 22px 36px rgba(80, 16, 34, 0.26);
      --nib-ui-button-shadow-strong: 0 20px 32px rgba(80, 16, 34, 0.24);
      --nib-ui-button-shadow-flat: 0 12px 20px rgba(80,16,34,0.14);
      --nib-ui-button-shadow-pressed: inset 0 1px 8px rgba(66,12,28,0.22);
      --nib-ui-button-highlight-bg: linear-gradient(180deg, rgba(255,255,255,0.36), rgba(255,255,255,0.1) 48%, rgba(255,255,255,0) 100%);
      --nib-ui-button-highlight-opacity: 0.44;
      --nib-ui-button-icon-bg: linear-gradient(135deg, rgba(127,32,56,0.9), rgba(201,162,39,0.62));
      --nib-ui-chip-bg: linear-gradient(180deg, rgba(255,250,252,0.84), rgba(248,231,237,0.74));
      --nib-ui-chip-border: rgba(127,32,56,0.18);
    }

    html[data-button-style="porcelain-neumorph"],
    [data-button-style-preview="porcelain-neumorph"] {
      --nib-ui-on-primary: #35527d;
      --nib-ui-on-secondary: #35527d;
      --nib-ui-on-accent: #35527d;
      --nib-ui-on-danger: #ffffff;
      --nib-ui-on-outline: #35527d;
      --nib-ui-on-flat: #35527d;
      --nib-ui-button-radius-base: 20px;
      --nib-ui-button-radius-soft: 16px;
      --nib-ui-button-shell-primary: linear-gradient(145deg, #fffef9, #efe5d0);
      --nib-ui-button-shell-secondary: linear-gradient(145deg, #ffffff, #f7f1e5);
      --nib-ui-button-shell-accent: linear-gradient(145deg, #efe1ab, #d2b357);
      --nib-ui-button-shell-danger: linear-gradient(145deg, #c14d5f, #97263a);
      --nib-ui-button-border-primary: rgba(109, 131, 165, 0.26);
      --nib-ui-button-border-secondary: rgba(215, 200, 170, 0.48);
      --nib-ui-button-border-accent: rgba(201, 162, 39, 0.36);
      --nib-ui-button-border-danger: rgba(255,255,255,0.28);
      --nib-ui-button-shadow-rest: 9px 9px 18px rgba(161, 147, 122, 0.16), -7px -7px 18px rgba(255,255,255,0.98);
      --nib-ui-button-shadow-hover: 12px 12px 24px rgba(161, 147, 122, 0.18), -8px -8px 22px rgba(255,255,255,0.99);
      --nib-ui-button-shadow-strong: 10px 10px 20px rgba(161, 147, 122, 0.17), -8px -8px 20px rgba(255,255,255,0.99);
      --nib-ui-button-shadow-flat: 7px 7px 16px rgba(161,147,122,0.12), -6px -6px 16px rgba(255,255,255,0.96);
      --nib-ui-button-shadow-pressed: inset 8px 8px 14px rgba(161,147,122,0.12), inset -7px -7px 14px rgba(255,255,255,0.94);
      --nib-ui-button-highlight-bg: linear-gradient(180deg, rgba(255,255,255,0.5), rgba(255,255,255,0.08) 50%, rgba(255,255,255,0) 100%);
      --nib-ui-button-highlight-opacity: 0.46;
      --nib-ui-button-icon-bg: linear-gradient(145deg, #fffef9, #eadfc5);
      --nib-ui-button-icon-border: rgba(109,131,165,0.22);
      --nib-ui-button-icon-shadow: 8px 8px 16px rgba(161,147,122,0.14), -6px -6px 16px rgba(255,255,255,0.98);
      --nib-ui-chip-bg: linear-gradient(145deg, #fffef9, #f3ead8);
      --nib-ui-chip-border: rgba(215,200,170,0.42);
    }

    html[data-button-style="command-retro"],
    [data-button-style-preview="command-retro"] {
      --nib-ui-on-primary: #fff8f4;
      --nib-ui-on-secondary: #7a2f29;
      --nib-ui-on-accent: #ffffff;
      --nib-ui-on-danger: #ffffff;
      --nib-ui-on-outline: #7a2f29;
      --nib-ui-on-flat: #7a2f29;
      --nib-ui-button-radius-base: 8px;
      --nib-ui-button-radius-soft: 8px;
      --nib-ui-button-font-family: var(--brand-display);
      --nib-ui-button-font-weight: 800;
      --nib-ui-button-letter-spacing: 0.03em;
      --nib-ui-button-text-transform: uppercase;
      --nib-ui-button-shell-primary: linear-gradient(180deg, #8a2c23, #b25642);
      --nib-ui-button-shell-secondary: linear-gradient(180deg, #fffaf5, #f7e5d6);
      --nib-ui-button-shell-accent: linear-gradient(180deg, #1b2a5b, #35508a);
      --nib-ui-button-shell-danger: linear-gradient(180deg, #7a1728, #a62f43);
      --nib-ui-button-border-primary: #5a1f18;
      --nib-ui-button-border-secondary: #8a2c23;
      --nib-ui-button-border-accent: #15234c;
      --nib-ui-button-border-danger: #5a1220;
      --nib-ui-button-shadow-rest: 4px 4px 0 rgba(25, 44, 85, 0.86);
      --nib-ui-button-shadow-hover: 6px 6px 0 rgba(25, 44, 85, 0.92);
      --nib-ui-button-shadow-strong: 5px 5px 0 rgba(25, 44, 85, 0.9);
      --nib-ui-button-shadow-flat: 3px 3px 0 rgba(25,44,85,0.72);
      --nib-ui-button-shadow-pressed: 1px 1px 0 rgba(25,44,85,0.92);
      --nib-ui-button-highlight-bg: none;
      --nib-ui-button-highlight-opacity: 0;
      --nib-ui-button-translate-hover: -2px;
      --nib-ui-button-icon-bg: linear-gradient(180deg, #1b2a5b, #35508a);
      --nib-ui-button-icon-shadow: 4px 4px 0 rgba(25,44,85,0.86);
      --nib-ui-chip-bg: linear-gradient(180deg, #fffaf5, #f7e5d6);
      --nib-ui-chip-border: #8a2c23;
      --nib-ui-chip-shadow: 3px 3px 0 rgba(25,44,85,0.64);
    }

    html[data-button-style="cobalt-ceramic"],
    [data-button-style-preview="cobalt-ceramic"] {
      --nib-ui-on-primary: #1f4b86;
      --nib-ui-on-secondary: #1f4b86;
      --nib-ui-on-accent: #1f4b86;
      --nib-ui-on-danger: #ffffff;
      --nib-ui-on-outline: #1f4b86;
      --nib-ui-on-flat: #1f4b86;
      --nib-ui-button-radius-base: 999px;
      --nib-ui-button-radius-soft: 999px;
      --nib-ui-button-shell-primary: linear-gradient(180deg, #ffffff 0%, #edf4ff 100%);
      --nib-ui-button-shell-secondary: linear-gradient(180deg, #ffffff 0%, #f4f8ff 100%);
      --nib-ui-button-shell-accent: linear-gradient(180deg, #f7ebbc 0%, #e4cb7d 100%);
      --nib-ui-button-shell-danger: linear-gradient(180deg, #e27f92 0%, #b42f47 100%);
      --nib-ui-button-border-primary: rgba(31,75,134,0.44);
      --nib-ui-button-border-secondary: rgba(31,75,134,0.22);
      --nib-ui-button-border-accent: rgba(201,162,39,0.3);
      --nib-ui-button-border-danger: rgba(180,47,71,0.36);
      --nib-ui-button-shadow-rest: 0 14px 24px rgba(31, 75, 134, 0.1), inset 0 2px 0 rgba(255,255,255,0.98);
      --nib-ui-button-shadow-hover: 0 18px 30px rgba(31, 75, 134, 0.14), inset 0 2px 0 rgba(255,255,255,1);
      --nib-ui-button-shadow-strong: 0 16px 28px rgba(31, 75, 134, 0.12), inset 0 2px 0 rgba(255,255,255,1);
      --nib-ui-button-shadow-flat: 0 10px 18px rgba(31,75,134,0.08);
      --nib-ui-button-highlight-bg: linear-gradient(180deg, rgba(255,255,255,1), rgba(255,255,255,0.4) 52%, rgba(255,255,255,0) 100%);
      --nib-ui-button-highlight-opacity: 0.86;
      --nib-ui-button-highlight-radius: 999px;
      --nib-ui-button-icon-bg: linear-gradient(180deg, #ffffff 0%, #edf4ff 100%);
      --nib-ui-button-icon-border: rgba(31,75,134,0.32);
      --nib-ui-button-icon-shadow: 0 12px 20px rgba(31, 75, 134, 0.12), inset 0 2px 0 rgba(255,255,255,1);
      --nib-ui-chip-bg: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(240,246,255,0.92));
      --nib-ui-chip-border: rgba(31,75,134,0.16);
    }

    html[data-button-style="auric-focus"],
    [data-button-style-preview="auric-focus"] {
      --nib-ui-on-primary: #16254b;
      --nib-ui-on-secondary: #514523;
      --nib-ui-on-accent: #ffffff;
      --nib-ui-on-danger: #ffffff;
      --nib-ui-on-outline: #16254b;
      --nib-ui-on-flat: #16254b;
      --nib-ui-button-radius-base: 14px;
      --nib-ui-button-radius-soft: 12px;
      --nib-ui-button-font-weight: 800;
      --nib-ui-button-letter-spacing: 0.02em;
      --nib-ui-button-shell-primary: linear-gradient(135deg, #7a641b 0%, #d9bb61 46%, #f5e8b7 58%, #b38e30 100%);
      --nib-ui-button-shell-secondary: linear-gradient(180deg, rgba(255,252,246,0.98), rgba(244,236,216,0.95));
      --nib-ui-button-shell-accent: linear-gradient(135deg, #18254a 0%, #314874 100%);
      --nib-ui-button-shell-danger: linear-gradient(135deg, #9b1b2e 0%, #c24d61 100%);
      --nib-ui-button-border-primary: rgba(106, 85, 23, 0.64);
      --nib-ui-button-border-secondary: rgba(122, 100, 27, 0.22);
      --nib-ui-button-border-accent: rgba(24, 37, 74, 0.54);
      --nib-ui-button-border-danger: rgba(155, 27, 46, 0.44);
      --nib-ui-button-shadow-rest: 0 16px 30px rgba(85, 68, 18, 0.18), inset 0 1px 0 rgba(255,255,255,0.84);
      --nib-ui-button-shadow-hover: 0 20px 34px rgba(85, 68, 18, 0.22), inset 0 1px 0 rgba(255,255,255,0.88);
      --nib-ui-button-shadow-strong: 0 18px 32px rgba(85, 68, 18, 0.2), inset 0 1px 0 rgba(255,255,255,0.86);
      --nib-ui-button-shadow-flat: 0 10px 18px rgba(85,68,18,0.12);
      --nib-ui-button-highlight-bg: linear-gradient(180deg, rgba(255,255,255,0.78), rgba(255,255,255,0.2) 48%, rgba(255,255,255,0) 100%);
      --nib-ui-button-highlight-opacity: 0.72;
      --nib-ui-button-icon-bg: linear-gradient(135deg, #7a641b 0%, #f5e8b7 50%, #b38e30 100%);
      --nib-ui-chip-bg: linear-gradient(180deg, rgba(255,250,239,0.92), rgba(247,236,204,0.84));
      --nib-ui-chip-border: rgba(122,100,27,0.18);
    }

    html[data-button-style="dusk-velvet"],
    [data-button-style-preview="dusk-velvet"] {
      --nib-ui-on-primary: #fff9fc;
      --nib-ui-on-secondary: #5d2e53;
      --nib-ui-on-accent: #35264a;
      --nib-ui-on-danger: #ffffff;
      --nib-ui-on-outline: #5d2e53;
      --nib-ui-on-flat: #5d2e53;
      --nib-ui-button-radius-base: 18px;
      --nib-ui-button-radius-soft: 14px;
      --nib-ui-button-shell-primary: linear-gradient(135deg, #5d2e53 0%, #8b506f 54%, #c28ea8 100%);
      --nib-ui-button-shell-secondary: linear-gradient(135deg, rgba(255,255,255,0.98), rgba(247,238,243,0.94));
      --nib-ui-button-shell-accent: linear-gradient(135deg, #d2b15b 0%, #efdba0 52%, #7b506f 100%);
      --nib-ui-button-shell-danger: linear-gradient(135deg, #8b1b36 0%, #bf4d66 100%);
      --nib-ui-button-border-primary: rgba(131, 80, 111, 0.5);
      --nib-ui-button-border-secondary: rgba(93, 46, 83, 0.16);
      --nib-ui-button-border-accent: rgba(201, 162, 39, 0.36);
      --nib-ui-button-border-danger: rgba(139, 27, 54, 0.4);
      --nib-ui-button-shadow-rest: 0 18px 30px rgba(73, 31, 64, 0.22), inset 0 1px 0 rgba(255,255,255,0.54);
      --nib-ui-button-shadow-hover: 0 22px 36px rgba(73, 31, 64, 0.26), inset 0 1px 0 rgba(255,255,255,0.56);
      --nib-ui-button-shadow-strong: 0 20px 32px rgba(73, 31, 64, 0.24), inset 0 1px 0 rgba(255,255,255,0.56);
      --nib-ui-button-shadow-flat: 0 10px 18px rgba(73,31,64,0.14);
      --nib-ui-button-highlight-bg: linear-gradient(180deg, rgba(255,255,255,0.3), rgba(255,255,255,0.08) 50%, rgba(255,255,255,0) 100%);
      --nib-ui-button-highlight-opacity: 0.48;
      --nib-ui-button-icon-bg: linear-gradient(135deg, #5d2e53 0%, #d2b15b 100%);
      --nib-ui-chip-bg: linear-gradient(180deg, rgba(255,248,252,0.88), rgba(245,233,241,0.78));
      --nib-ui-chip-border: rgba(93,46,83,0.18);
    }

    html[data-button-style="bronze-gradient"],
    [data-button-style-preview="bronze-gradient"] {
      --nib-ui-on-primary: #fffdf8;
      --nib-ui-on-secondary: #6f4b1d;
      --nib-ui-on-accent: #ffffff;
      --nib-ui-on-danger: #ffffff;
      --nib-ui-on-outline: #6f4b1d;
      --nib-ui-on-flat: #6f4b1d;
      --nib-ui-button-radius-base: 17px;
      --nib-ui-button-radius-soft: 14px;
      --nib-ui-button-font-weight: 800;
      --nib-ui-button-shell-primary: linear-gradient(135deg, #8e5e1f 0%, #c78435 40%, #e0b164 58%, #5d3e1d 100%);
      --nib-ui-button-shell-secondary: linear-gradient(180deg, rgba(255,252,247,0.98), rgba(247,238,219,0.94));
      --nib-ui-button-shell-accent: linear-gradient(135deg, #20345d 0%, #46608f 100%);
      --nib-ui-button-shell-danger: linear-gradient(135deg, #942137 0%, #c24e62 100%);
      --nib-ui-button-border-primary: rgba(117, 76, 24, 0.68);
      --nib-ui-button-border-secondary: rgba(142, 94, 31, 0.22);
      --nib-ui-button-border-accent: rgba(32, 52, 93, 0.52);
      --nib-ui-button-border-danger: rgba(148, 33, 55, 0.42);
      --nib-ui-button-shadow-rest: 0 16px 28px rgba(98, 64, 20, 0.18), inset 0 1px 0 rgba(255,255,255,0.72);
      --nib-ui-button-shadow-hover: 0 20px 34px rgba(98, 64, 20, 0.22), inset 0 1px 0 rgba(255,255,255,0.76);
      --nib-ui-button-shadow-strong: 0 18px 30px rgba(98, 64, 20, 0.2), inset 0 1px 0 rgba(255,255,255,0.76);
      --nib-ui-button-shadow-flat: 0 10px 18px rgba(98,64,20,0.12);
      --nib-ui-button-highlight-bg: linear-gradient(180deg, rgba(255,255,255,0.66), rgba(255,255,255,0.18) 50%, rgba(255,255,255,0) 100%);
      --nib-ui-button-highlight-opacity: 0.62;
      --nib-ui-button-icon-bg: linear-gradient(135deg, #8e5e1f 0%, #e0b164 52%, #20345d 100%);
      --nib-ui-chip-bg: linear-gradient(180deg, rgba(255,250,242,0.9), rgba(244,233,209,0.84));
      --nib-ui-chip-border: rgba(142,94,31,0.18);
    }

    html[data-button-style="two-tone"],
    [data-button-style-preview="two-tone"] {
      --nib-ui-on-primary: #ffffff;
      --nib-ui-on-secondary: var(--ink);
      --nib-ui-on-accent: var(--accent-text, var(--navy));
      --nib-ui-on-danger: #ffffff;
      --nib-ui-on-outline: var(--primary-start);
      --nib-ui-on-flat: var(--ink);
      --nib-ui-button-radius-base: 0 0 0 16px;
      --nib-ui-button-radius-soft: 0 0 0 14px;
      --nib-ui-button-radius-pill: 0 0 0 999px;
      --nib-ui-button-shell-primary: var(--primary-start);
      --nib-ui-button-shell-secondary: var(--surface-bg, #ffffff);
      --nib-ui-button-shell-accent: var(--accent-start, var(--gold));
      --nib-ui-button-shell-danger: var(--red);
      --nib-ui-button-shell-outline: transparent;
      --nib-ui-button-shell-flat: var(--surface-bg, #ffffff);
      --nib-ui-button-border-primary: var(--primary-start);
      --nib-ui-button-border-secondary: var(--surface-border, rgba(27,42,91,0.16));
      --nib-ui-button-border-accent: var(--accent-start, var(--gold));
      --nib-ui-button-border-danger: var(--red);
      --nib-ui-button-border-outline: var(--primary-start);
      --nib-ui-button-shadow-rest: none;
      --nib-ui-button-shadow-strong: none;
      --nib-ui-button-shadow-hover: none;
      --nib-ui-button-shadow-flat: none;
      --nib-ui-button-shadow-pressed: none;
      --nib-ui-button-highlight-bg: none;
      --nib-ui-button-highlight-opacity: 0;
      --nib-ui-button-highlight-radius: 0;
      --nib-ui-button-translate-hover: 0px;
      --nib-ui-button-icon-bg: var(--primary-start);
      --nib-ui-button-icon-border: var(--primary-start);
      --nib-ui-button-icon-shadow: none;
      --nib-ui-chip-bg: var(--surface-bg, #ffffff);
      --nib-ui-chip-border: var(--surface-border, rgba(27,42,91,0.16));
      --nib-ui-chip-shadow: none;
    }

    /* ==== DARK THEME BUTTON ADAPTATION ====
       The dark theme flips --navy (gold), --ink and --secondary-text (light) but most button styles pair
       those with fixed light/gold fills, giving light-on-light or gold-on-gold text. Only colours are
       adapted here; each style keeps its own radius, shadow and hover geometry. */
    html[data-theme="dark-theme"][data-button-style],
    html[data-theme="dark-theme"] [data-button-style-preview] {
      --nib-ui-on-outline: #e9ecf5;
      --nib-ui-button-shell-outline: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
      --nib-ui-button-border-outline: rgba(232, 207, 133, 0.55);
    }

    html[data-theme="dark-theme"]:is([data-button-style="signature-gloss"], [data-button-style="royal-gradient"], [data-button-style="soft-neumorph"], [data-button-style="frosted-glass"], [data-button-style="brutalist-retro"], [data-button-style="paper-ledger"], [data-button-style="executive-solid"], [data-button-style="ceramic-pill"], [data-button-style="metallic-gold"], [data-button-style="minimal-outline"], [data-button-style="velvet-depth"]),
    html[data-theme="dark-theme"] :is([data-button-style-preview="signature-gloss"], [data-button-style-preview="royal-gradient"], [data-button-style-preview="soft-neumorph"], [data-button-style-preview="frosted-glass"], [data-button-style-preview="brutalist-retro"], [data-button-style-preview="paper-ledger"], [data-button-style-preview="executive-solid"], [data-button-style-preview="ceramic-pill"], [data-button-style-preview="metallic-gold"], [data-button-style-preview="minimal-outline"], [data-button-style-preview="velvet-depth"]) {
      --nib-ui-on-secondary: #e9ecf5;
      --nib-ui-button-shell-secondary: linear-gradient(180deg, rgba(40,48,74,0.98), rgba(28,34,54,0.98));
      --nib-ui-button-border-secondary: rgba(233, 236, 245, 0.2);
    }

    html[data-theme="dark-theme"]:is([data-button-style="signature-gloss"], [data-button-style="soft-neumorph"], [data-button-style="ceramic-pill"], [data-button-style="minimal-outline"], [data-button-style="two-tone"], [data-button-style="metallic-gold"]),
    html[data-theme="dark-theme"] :is([data-button-style-preview="signature-gloss"], [data-button-style-preview="soft-neumorph"], [data-button-style-preview="ceramic-pill"], [data-button-style-preview="minimal-outline"], [data-button-style-preview="two-tone"], [data-button-style-preview="metallic-gold"]) {
      --nib-ui-on-primary: #14192a;
    }

    html[data-theme="dark-theme"]:is([data-button-style="frosted-glass"], [data-button-style="brutalist-retro"], [data-button-style="paper-ledger"], [data-button-style="midnight-glow"], [data-button-style="ceramic-pill"], [data-button-style="minimal-outline"], [data-button-style="royal-gradient"], [data-button-style="metallic-gold"], [data-button-style="velvet-depth"]),
    html[data-theme="dark-theme"] :is([data-button-style-preview="frosted-glass"], [data-button-style-preview="brutalist-retro"], [data-button-style-preview="paper-ledger"], [data-button-style-preview="midnight-glow"], [data-button-style-preview="ceramic-pill"], [data-button-style-preview="minimal-outline"], [data-button-style-preview="royal-gradient"], [data-button-style-preview="metallic-gold"], [data-button-style-preview="velvet-depth"]) {
      --nib-ui-on-accent: #1b2a5b;
    }



    :root {
      --nib-ui-radius-xs: 8px;
      --nib-ui-radius-sm: 12px;
      --nib-ui-radius-md: 16px;
      --nib-ui-radius-lg: 22px;
      --nib-ui-control-height-sm: 38px;
      --nib-ui-control-height-md: 46px;
      --nib-ui-control-height-lg: 54px;
      --nib-ui-control-height-input: 44px;
      --nib-ui-control-height-textarea: 96px;
      --nib-ui-control-font-size: 15px;
      --nib-ui-control-font-size-sm: 13px;
      --nib-ui-control-padding-y: 10px;
      --nib-ui-control-x: 18px;
      --nib-ui-icon-size: 48px;
      --nib-base-font-size: 16px;
      --nib-ui-gloss-line: color-mix(in srgb, var(--primary-start) 16%, transparent);
      --nib-ui-gloss-line-strong: color-mix(in srgb, var(--primary-start) 28%, transparent);
      --nib-ui-gloss-sheen: linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.22) 48%, rgba(255,255,255,0) 100%);
      --nib-ui-gloss-surface: linear-gradient(180deg, rgba(255,255,255,0.99), rgba(255,255,255,0.94));
      --nib-ui-gloss-surface-warm: linear-gradient(180deg, rgba(255,253,247,0.99), rgba(245,241,230,0.93));
      --nib-ui-gloss-shadow: 0 16px 34px rgba(16, 29, 63, 0.14);
      --nib-ui-gloss-shadow-soft: 0 10px 24px rgba(16, 29, 63, 0.1);
      --nib-ui-gloss-inner: inset 0 1px 0 rgba(255,255,255,0.9), inset 0 -12px 24px rgba(255,255,255,0.18);
      --nib-ui-gloss-danger: linear-gradient(135deg, color-mix(in srgb, var(--red) 92%, #ffffff 8%), color-mix(in srgb, var(--red) 70%, #c9a227 30%));
      --nib-ui-gloss-brand: linear-gradient(135deg, var(--primary-start), color-mix(in srgb, var(--primary-end) 78%, var(--red) 22%));
      --nib-ui-gloss-accent: linear-gradient(135deg, var(--accent-start), color-mix(in srgb, var(--accent-end) 84%, #ffffff 16%));
      --nib-ui-input-text: var(--ink);
      --nib-ui-on-primary: var(--primary-text, #ffffff);
      --nib-ui-on-secondary: var(--secondary-text);
      --nib-ui-on-accent: var(--accent-text, #ffffff);
      --nib-ui-on-danger: #ffffff;
      --nib-ui-on-outline: var(--secondary-text);
      --nib-ui-on-flat: var(--secondary-text);
      --nib-ui-button-radius-base: var(--nib-ui-radius-md);
      --nib-ui-button-radius-soft: var(--nib-ui-radius-sm);
      --nib-ui-button-radius-pill: 999px;
      --nib-ui-button-shell-primary: var(--nib-ui-gloss-brand);
      --nib-ui-button-shell-secondary: var(--nib-ui-gloss-surface-warm);
      --nib-ui-button-shell-accent: var(--nib-ui-gloss-accent);
      --nib-ui-button-shell-danger: var(--nib-ui-gloss-danger);
      --nib-ui-button-shell-outline: linear-gradient(180deg, rgba(255,255,255,0.86), rgba(255,255,255,0.46));
      --nib-ui-button-shell-flat: color-mix(in srgb, var(--cream) 82%, #ffffff 18%);
      --nib-ui-button-border-primary: color-mix(in srgb, var(--primary-start) 58%, var(--gold) 42%);
      --nib-ui-button-border-secondary: var(--nib-ui-gloss-line);
      --nib-ui-button-border-accent: color-mix(in srgb, var(--gold) 62%, var(--primary-start) 38%);
      --nib-ui-button-border-danger: color-mix(in srgb, var(--red) 60%, #ffffff 40%);
      --nib-ui-button-border-outline: color-mix(in srgb, var(--primary-start) 34%, var(--gold) 20%);
      --nib-ui-button-border-hover: var(--nib-ui-gloss-line-strong);
      --nib-ui-button-shadow-rest: var(--nib-ui-gloss-shadow-soft), var(--nib-ui-gloss-inner);
      --nib-ui-button-shadow-strong: 0 18px 32px rgba(16, 29, 63, 0.22), var(--nib-ui-gloss-inner);
      --nib-ui-button-shadow-hover: 0 20px 34px rgba(16, 29, 63, 0.16), var(--nib-ui-gloss-inner);
      --nib-ui-button-shadow-flat: 0 12px 26px rgba(16,29,63,0.08);
      --nib-ui-button-shadow-pressed: inset 0 1px 8px rgba(16, 29, 63, 0.12);
      --nib-ui-button-highlight-bg: var(--nib-ui-gloss-sheen);
      --nib-ui-button-highlight-opacity: 0.76;
      --nib-ui-button-highlight-radius: calc(var(--nib-ui-button-radius-base) - 1px) calc(var(--nib-ui-button-radius-base) - 1px) 12px 12px;
      --nib-ui-button-translate-hover: -1px;
      --nib-ui-button-scale-hover: 1;
      --nib-ui-button-font-family: var(--brand-display);
      --nib-ui-button-font-weight: 700;
      --nib-ui-button-letter-spacing: 0;
      --nib-ui-button-text-transform: none;
      --nib-ui-button-border-style: solid;
      --nib-ui-button-backdrop-filter: none;
      --nib-ui-button-filter: none;
      --nib-ui-button-hover-wash: linear-gradient(135deg, rgba(201,162,39,0.28), rgba(155,27,46,0.16));
      --nib-ui-button-active-wash: linear-gradient(135deg, rgba(27,42,91,0.24), rgba(155,27,46,0.28));
      --nib-ui-button-hover-wash-opacity: 0.18;
      --nib-ui-button-active-wash-opacity: 0.28;
      --nib-ui-button-icon-bg: var(--nib-ui-button-shell-primary);
      --nib-ui-button-icon-border: color-mix(in srgb, var(--gold) 42%, var(--primary-start) 58%);
      --nib-ui-button-icon-shadow: 0 16px 30px rgba(16, 29, 63, 0.2), var(--nib-ui-gloss-inner);
      --nib-ui-button-icon-radius: var(--nib-ui-button-radius-pill);
      --nib-ui-chip-bg: linear-gradient(180deg, rgba(255,255,255,0.76), rgba(255,255,255,0.34));
      --nib-ui-chip-border: color-mix(in srgb, var(--gold) 34%, transparent);
      --nib-ui-chip-shadow: inset 0 1px 0 rgba(255,255,255,0.76);
    }

    :where(button, .nib-ui-button, summary) {
      font-family: var(--nib-ui-button-font-family);
      letter-spacing: var(--nib-ui-button-letter-spacing);
      text-transform: var(--nib-ui-button-text-transform);
    }

    :where(button, .nib-ui-button) {
      touch-action: manipulation;
    }

    :where(button, .nib-ui-button):where(
      :not(.login-link-button):not(.appearance-option):not(.theme-option):not(.header-role-option):not(.header-account-menu-item):not(.portal-row-summary):not(.mobile-header-summary):not(.portal-file-chip):not(.portal-file-action):not(.portal-inline-timeline-toggle):not(.nibveda-compact-button-table):not(.chair-submenu-button):not(.chair-action-chip):not(.reviewer-workspace-tab):not(.admin-tab-button):not(.organizer-workspace-tab-button):not(.track-chair-workspace-tab):not(.author-email-box-card):not(.category-card):not(.link-button)
    ) {
      --nib-ui-button-fg: var(--nib-ui-on-primary, var(--primary-text, #ffffff));
      position: relative;
      isolation: isolate;
      min-height: var(--nib-ui-control-height-md);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: var(--nib-ui-control-padding-y) var(--nib-ui-control-x);
      font-size: var(--nib-ui-control-font-size);
      border-radius: var(--nib-ui-button-radius-base);
      border: 1px var(--nib-ui-button-border-style) var(--nib-ui-button-border-primary);
      background: var(--nib-ui-button-shell-primary);
      color: var(--nib-ui-button-fg);
      box-shadow: var(--nib-ui-button-shadow-rest);
      backdrop-filter: var(--nib-ui-button-backdrop-filter);
      filter: var(--nib-ui-button-filter);
      overflow: hidden;
      text-decoration: none;
      font-weight: var(--nib-ui-button-font-weight);
      cursor: pointer;
      transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background 180ms ease, color 180ms ease;
    }

    :where(button, .nib-ui-button):where(
      :not(.login-link-button):not(.appearance-option):not(.theme-option):not(.header-role-option):not(.header-account-menu-item):not(.portal-row-summary):not(.mobile-header-summary):not(.portal-file-chip):not(.portal-file-action):not(.portal-inline-timeline-toggle):not(.nibveda-compact-button-table):not(.chair-submenu-button):not(.chair-action-chip):not(.reviewer-workspace-tab):not(.admin-tab-button):not(.organizer-workspace-tab-button):not(.track-chair-workspace-tab):not(.author-email-box-card):not(.category-card):not(.link-button)
    ):hover {
      transform: translateY(var(--nib-ui-button-translate-hover)) scale(var(--nib-ui-button-scale-hover));
      border-color: var(--nib-ui-button-border-hover);
      box-shadow: var(--nib-ui-button-shadow-hover);
    }

    :where(button, .nib-ui-button):where(
      :not(.login-link-button):not(.appearance-option):not(.theme-option):not(.header-role-option):not(.header-account-menu-item):not(.portal-row-summary):not(.mobile-header-summary):not(.portal-file-chip):not(.portal-file-action):not(.portal-inline-timeline-toggle):not(.nibveda-compact-button-table):not(.chair-submenu-button):not(.chair-action-chip):not(.reviewer-workspace-tab):not(.admin-tab-button):not(.organizer-workspace-tab-button):not(.track-chair-workspace-tab):not(.author-email-box-card):not(.category-card):not(.link-button)
    ):active {
      transform: translateY(0);
      box-shadow: var(--nib-ui-button-shadow-pressed);
    }

    :where(.nib-ui-button--secondary) {
      --nib-ui-button-fg: var(--secondary-text);
      border-color: var(--nib-ui-gloss-line);
      background: var(--nib-ui-gloss-surface-warm);
      color: var(--nib-ui-button-fg);
    }

    :where(.nib-ui-button--accent) {
      --nib-ui-button-fg: var(--nib-ui-on-accent, var(--accent-text, #ffffff));
      border-color: color-mix(in srgb, var(--gold) 62%, var(--primary-start) 38%);
      background: var(--nib-ui-gloss-accent);
      color: var(--nib-ui-button-fg);
    }

    :where(.nib-ui-button--danger) {
      --nib-ui-button-fg: #ffffff;
      border-color: color-mix(in srgb, var(--red) 60%, #ffffff 40%);
      background: var(--nib-ui-gloss-danger);
      color: var(--nib-ui-button-fg);
    }

    :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
      border: 1px solid var(--input-border);
      border-radius: 14px;
      background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,253,247,0.92));
      color: var(--nib-ui-input-text);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.86), 0 8px 18px rgba(16, 29, 63, 0.04);
      font: inherit;
      font-size: var(--nib-ui-control-font-size);
      letter-spacing: 0;
      transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
    }

    :where(input:not([type="checkbox"]):not([type="radio"]), select) {
      min-height: var(--nib-ui-control-height-input);
    }

    :where(textarea) {
      min-height: var(--nib-ui-control-height-textarea);
    }

    :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea):focus {
      border-color: color-mix(in srgb, var(--gold) 70%, var(--primary-start) 30%);
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 24%, transparent), inset 0 1px 0 rgba(255,255,255,0.92);
      outline: none;
    }

    :where(fieldset) {
      border-color: var(--nib-ui-gloss-line);
    }

    .nib-ui-surface,
    .nib-ui-menu,
    .portal-row-actions,
    .portal-dialog-panel {
      border: 1px solid var(--nib-ui-gloss-line);
      background: var(--nib-ui-gloss-surface);
      box-shadow: var(--nib-ui-gloss-shadow);
      backdrop-filter: blur(16px) saturate(118%);
    }

    .appearance-menu,
    .theme-menu,
    .header-role-menu,
    .mobile-header-panel {
      border: 1px solid var(--theme-menu-border, var(--nib-ui-gloss-line));
      background: var(--theme-menu-bg, rgba(255,253,247,0.99));
      color: var(--ink);
      box-shadow: var(--theme-menu-shadow, var(--nib-ui-gloss-shadow));
      backdrop-filter: blur(8px) saturate(106%);
    }

    .nib-ui-surface,
    .nib-ui-menu {
      position: relative;
      overflow: hidden;
    }

    .nib-ui-surface::before,
    .nib-ui-menu::before,
    .appearance-menu::before,
    .theme-menu::before,
    .header-role-menu::before,
    .mobile-header-panel::before {
      content: "";
      position: absolute;
      inset: 0 0 auto;
      height: 48%;
      background: var(--nib-ui-gloss-sheen);
      pointer-events: none;
      opacity: 0.3;
    }

    .appearance-menu > *,
    .theme-menu > *,
    .header-role-menu > *,
    .mobile-header-panel > * {
      position: relative;
      z-index: 1;
    }

    .nib-ui-button,
    .header-nav-link,
    .appearance-summary,
    .theme-summary,
    .button-style-summary,
    .header-role-summary,
    .header-action-button,
    .page-header-action-group .header-action-button,
    .organizer-workspace-tab-button {
      position: relative;
      isolation: isolate;
      min-height: var(--nib-ui-control-height-md);
      border-radius: var(--nib-ui-button-radius-base);
      border: 1px solid var(--nib-ui-button-border-secondary);
      background: var(--nib-ui-button-shell-secondary);
      color: var(--nib-ui-button-fg, var(--secondary-text));
      box-shadow: var(--nib-ui-button-shadow-rest);
      overflow: hidden;
      letter-spacing: 0;
      text-decoration: none;
    }

    .nib-ui-button,
    .header-nav-link,
    .appearance-summary,
    .theme-summary,
    .button-style-summary,
    .header-role-summary,
    .header-action-button,
    .page-header-action-group .header-action-button,
    .organizer-workspace-tab-button {
      --nib-ui-button-fg: var(--nib-ui-on-secondary, var(--secondary-text));
    }

    .nib-ui-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: var(--nib-ui-control-padding-y) var(--nib-ui-control-x);
      font-size: var(--nib-ui-control-font-size);
      font-weight: var(--nib-ui-button-font-weight);
      cursor: pointer;
      color: var(--nib-ui-button-fg);
      white-space: nowrap;
      flex: 0 0 auto;
    }

    .header-nav-link,
    .appearance-summary,
    .theme-summary,
    .button-style-summary,
    .header-role-summary {
      --nib-ui-button-fg: var(--nib-ui-on-primary, var(--primary-text, #ffffff));
      border-color: var(--nib-ui-button-border-primary);
      background: var(--nib-ui-button-shell-primary);
      color: var(--nib-ui-button-fg);
      box-shadow: var(--nib-ui-button-shadow-strong);
    }

    .nib-ui-button--pill {
      border-radius: var(--nib-ui-button-radius-pill);
    }

    .nib-ui-button--rounded {
      border-radius: var(--nib-ui-button-radius-base);
    }

    .nib-ui-button--compact {
      min-height: var(--nib-ui-control-height-sm);
      border-radius: var(--nib-ui-button-radius-soft);
      padding: calc(var(--nib-ui-control-padding-y) - 2px) calc(var(--nib-ui-control-x) - 4px);
      font-size: var(--nib-ui-control-font-size-sm);
    }

    .nib-ui-button--outline {
      --nib-ui-button-fg: var(--nib-ui-on-outline, var(--secondary-text));
      background: var(--nib-ui-button-shell-outline);
      color: var(--nib-ui-button-fg);
      border-color: var(--nib-ui-button-border-outline);
      box-shadow: var(--nib-ui-button-shadow-flat);
    }

    .nib-ui-button--flat {
      --nib-ui-button-fg: var(--nib-ui-on-flat, var(--secondary-text));
      background: var(--nib-ui-button-shell-flat);
      color: var(--nib-ui-button-fg);
      box-shadow: var(--nib-ui-button-shadow-flat);
    }

    .nib-ui-button__leading-icon {
      width: 18px;
      height: 18px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto;
      line-height: 0;
      position: relative;
      z-index: 1;
      color: var(--nib-ui-button-fg, currentColor);
    }

    .nib-ui-button__label {
      min-width: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      line-height: 1.15;
      position: relative;
      z-index: 1;
      color: var(--nib-ui-button-fg, currentColor);
    }

    .nib-ui-button svg,
    .nib-ui-icon-glyph svg,
    .nib-ui-icon-button svg {
      width: 19px;
      height: 19px;
      display: block;
      stroke: currentColor;
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-width: 2.2;
    }

    .nib-ui-icon-button {
      width: var(--nib-ui-icon-size);
      min-width: var(--nib-ui-icon-size);
      height: var(--nib-ui-icon-size);
      min-height: var(--nib-ui-icon-size);
      padding: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }

    .nib-ui-icon-button--circle {
      border-radius: var(--nib-ui-button-icon-radius);
    }

    .nib-ui-icon-button--square {
      border-radius: min(var(--nib-ui-button-icon-radius), 14px);
    }

    .nib-ui-icon-button--soft {
      background: var(--nib-ui-gloss-surface-warm);
      color: var(--nib-ui-on-secondary, var(--secondary-text));
    }

    .nib-ui-button::before,
    .header-nav-link::before,
    .appearance-summary::before,
    .theme-summary::before,
    .button-style-summary::before,
    .header-role-summary::before,
    .header-action-button::before,
    .page-header-action-group .header-action-button::before,
    .organizer-workspace-tab-button::before {
      content: "";
      position: absolute;
      inset: 1px 1px auto;
      height: 50%;
      border-radius: var(--nib-ui-button-highlight-radius);
      background: var(--nib-ui-button-highlight-bg);
      opacity: var(--nib-ui-button-highlight-opacity);
      pointer-events: none;
      z-index: 0;
    }

    .nib-ui-button::after,
    .header-nav-link::after,
    .appearance-summary::after,
    .theme-summary::after,
    .button-style-summary::after,
    .header-role-summary::after,
    .header-action-button::after,
    .page-header-action-group .header-action-button::after,
    .organizer-workspace-tab-button::after {
      content: "";
      position: absolute;
      inset: 0;
      background: var(--nib-ui-button-hover-wash);
      opacity: 0;
      pointer-events: none;
      z-index: 0;
      transition: opacity 180ms ease, background 180ms ease;
    }

    .nib-ui-button > *,
    .header-nav-link > *,
    .appearance-summary > *,
    .theme-summary > *,
    .button-style-summary > *,
    .header-role-summary > *,
    .header-action-button > *,
    .page-header-action-group .header-action-button > *,
    .organizer-workspace-tab-button > * {
      position: relative;
      z-index: 1;
    }

    .nib-ui-button:hover,
    .header-nav-link:hover,
    .appearance-summary:hover,
    .theme-summary:hover,
    .button-style-summary:hover,
    .header-role-summary:hover,
    .header-action-button:hover,
    .page-header-action-group .header-action-button:hover,
    .organizer-workspace-tab-button:hover {
      transform: translateY(var(--nib-ui-button-translate-hover));
      border-color: var(--nib-ui-button-border-hover);
      box-shadow: var(--nib-ui-button-shadow-hover);
    }

    .nib-ui-button:hover::after,
    .header-nav-link:hover::after,
    .appearance-summary:hover::after,
    .theme-summary:hover::after,
    .button-style-summary:hover::after,
    .header-role-summary:hover::after,
    .header-action-button:hover::after,
    .page-header-action-group .header-action-button:hover::after,
    .organizer-workspace-tab-button:hover::after {
      opacity: var(--nib-ui-button-hover-wash-opacity);
    }

    .nib-ui-button:active,
    .header-nav-link:active,
    .appearance-summary:active,
    .theme-summary:active,
    .button-style-summary:active,
    .header-role-summary:active,
    .header-action-button:active,
    .page-header-action-group .header-action-button:active,
    .organizer-workspace-tab-button:active {
      transform: translateY(0);
      box-shadow: var(--nib-ui-button-shadow-pressed);
    }

    .nib-ui-button:active::after,
    .header-nav-link:active::after,
    .appearance-summary:active::after,
    .theme-summary:active::after,
    .button-style-summary:active::after,
    .header-role-summary:active::after,
    .header-action-button:active::after,
    .page-header-action-group .header-action-button:active::after,
    .organizer-workspace-tab-button:active::after {
      background: var(--nib-ui-button-active-wash);
      opacity: var(--nib-ui-button-active-wash-opacity);
    }

    .nib-ui-button--primary,
    .header-action-button.primary,
    .page-header-action-group .header-action-button.primary,
    .organizer-workspace-tab-button[aria-pressed="true"] {
      --nib-ui-button-fg: var(--nib-ui-on-primary, var(--primary-text, #ffffff));
      border-color: var(--nib-ui-button-border-primary);
      background: var(--nib-ui-button-shell-primary);
      color: var(--nib-ui-button-fg);
      box-shadow: var(--nib-ui-button-shadow-strong);
    }

    .appearance-switcher[open] .appearance-summary,
    .theme-switcher[open] .theme-summary,
    .button-style-switcher[open] .button-style-summary,
    .header-role-switcher[open] .header-role-summary,
    .header-nav-link[aria-current="page"] {
      --nib-ui-button-fg: var(--nib-ui-on-accent, var(--accent-text, #ffffff));
      border-color: var(--nib-ui-button-border-accent);
      background: var(--nib-ui-button-shell-accent);
      color: var(--nib-ui-button-fg);
      box-shadow: var(--nib-ui-button-shadow-strong);
    }

    .nib-ui-button--secondary {
      --nib-ui-button-fg: var(--nib-ui-on-secondary, var(--secondary-text));
      border-color: var(--nib-ui-button-border-secondary);
      background: var(--nib-ui-button-shell-secondary);
      color: var(--nib-ui-button-fg);
    }

    .nib-ui-button--accent {
      --nib-ui-button-fg: var(--nib-ui-on-accent, var(--accent-text, #ffffff));
      border-color: var(--nib-ui-button-border-accent);
      background: var(--nib-ui-button-shell-accent);
      color: var(--nib-ui-button-fg);
    }

    .nib-ui-button--danger,
    .header-action-button.logout,
    .page-header-action-group .header-action-button.logout {
      --nib-ui-button-fg: var(--nib-ui-on-danger, #ffffff);
      border-color: var(--nib-ui-button-border-danger);
      background: var(--nib-ui-button-shell-danger);
      color: var(--nib-ui-button-fg);
    }

    .header-action-button.logout,
    .page-header-action-group .header-action-button.logout {
      color: var(--nib-ui-button-fg);
    }

    .mobile-header-summary,
    .portal-row-summary,
    .portal-inline-timeline-toggle,
    .nib-ui-icon-button {
      --nib-ui-icon-fg: var(--nib-ui-on-primary, var(--primary-text, #ffffff));
      border-radius: var(--nib-ui-button-radius-pill);
      background: var(--nib-ui-button-icon-bg);
      color: var(--nib-ui-icon-fg);
      border-color: var(--nib-ui-button-icon-border);
      box-shadow: var(--nib-ui-button-icon-shadow);
    }

    .nib-ui-chip,
    .appearance-current-label,
    .theme-current-label,
    .button-style-current-label,
    .header-role-current,
    .role-chip,
    .pill {
      border: 1px solid var(--nib-ui-chip-border);
      background: var(--nib-ui-chip-bg);
      box-shadow: var(--nib-ui-chip-shadow);
      letter-spacing: 0;
    }

    .appearance-current-label,
    .theme-current-label,
    .button-style-current-label,
    .header-role-current {
      color: var(--secondary-text);
    }

    .nibveda-toggle-button,
    .nib-ui-toggle,
    .chair-switch-toggle {
      display: grid;
      grid-template-columns: auto auto 1fr;
      gap: 12px;
      align-items: center;
      min-width: 0;
      padding: 14px 16px;
      border-radius: 16px;
      border: 1px solid color-mix(in srgb, var(--gold, #c9a227) 24%, transparent);
      background: rgba(255,255,255,0.76);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.88), 0 10px 24px rgba(16,29,63,0.05);
      cursor: pointer;
    }

    .nibveda-toggle-button input,
    .nib-ui-toggle input,
    .chair-switch-toggle input {
      position: absolute;
      opacity: 0;
      pointer-events: none;
    }

    .nibveda-toggle-button .nib-ui-toggle-control,
    .nib-ui-toggle-control,
    .chair-switch-toggle-control {
      position: relative;
      width: 62px;
      height: 34px;
      border-radius: 999px;
      background: color-mix(in srgb, var(--navy, #1b2a5b) 16%, #c7d6ee 84%);
      box-shadow: inset 0 1px 3px rgba(16,29,63,0.18);
      transition: background 0.18s ease, box-shadow 0.18s ease;
    }

    .nibveda-toggle-button .nib-ui-toggle-control::after,
    .nib-ui-toggle-control::after,
    .chair-switch-toggle-control::after {
      content: "";
      position: absolute;
      top: 3px;
      left: 3px;
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: #ffffff;
      box-shadow: 0 6px 16px rgba(16,29,63,0.18);
      transition: transform 0.18s ease;
    }

    .nibveda-toggle-button input:checked + .nib-ui-toggle-control,
    .nib-ui-toggle input:checked + .nib-ui-toggle-control,
    .chair-switch-toggle input:checked + .chair-switch-toggle-control {
      background: linear-gradient(135deg, color-mix(in srgb, var(--navy, #1b2a5b) 80%, #09203f 20%), color-mix(in srgb, var(--accent-end, var(--accent-start, #9b1b2e)) 72%, #d8f6ff 28%));
      box-shadow: inset 0 1px 3px rgba(5,18,46,0.26);
    }

    .nibveda-toggle-button input:checked + .nib-ui-toggle-control::after,
    .nib-ui-toggle input:checked + .nib-ui-toggle-control::after,
    .chair-switch-toggle input:checked + .chair-switch-toggle-control::after {
      transform: translateX(28px);
    }

    .nibveda-toggle-button input:focus-visible + .nib-ui-toggle-control,
    .nib-ui-toggle input:focus-visible + .nib-ui-toggle-control,
    .chair-switch-toggle input:focus-visible + .chair-switch-toggle-control {
      outline: 2px solid color-mix(in srgb, var(--gold, #c9a227) 72%, #ffffff 28%);
      outline-offset: 3px;
    }

    .nibveda-toggle-button.is-disabled,
    .nib-ui-toggle.is-disabled,
    .chair-switch-toggle.is-disabled {
      opacity: 0.68;
      cursor: not-allowed;
    }

    .nibveda-toggle-button .nib-ui-toggle-text,
    .nib-ui-toggle-text,
    .chair-switch-toggle-text {
      display: grid;
      gap: 2px;
      min-width: 0;
    }

    .nibveda-toggle-button .nib-ui-toggle-text strong,
    .nibveda-toggle-button .nib-ui-toggle-text small,
    .nibveda-toggle-button .nib-ui-toggle-state,
    .nib-ui-toggle-text strong,
    .nib-ui-toggle-text small,
    .nib-ui-toggle-state,
    .chair-switch-toggle-text strong,
    .chair-switch-toggle-text small,
    .chair-switch-toggle-state {
      display: block;
    }

    .nibveda-toggle-button .nib-ui-toggle-text strong,
    .nib-ui-toggle-text strong,
    .chair-switch-toggle-text strong {
      color: var(--navy, #1b2a5b);
    }

    .nibveda-toggle-button .nib-ui-toggle-text small,
    .nib-ui-toggle-text small,
    .chair-switch-toggle-text small {
      color: var(--muted-text, rgba(27,42,91,0.68));
      font-weight: 700;
    }

    .nibveda-toggle-button .nib-ui-toggle-state,
    .nib-ui-toggle-state,
    .chair-switch-toggle-state {
      margin-top: 2px;
      color: color-mix(in srgb, var(--navy, #1b2a5b) 72%, var(--gold, #c9a227) 28%);
      font-size: 11px;
      font-weight: 900;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .nib-ui-tabs,
    .organizer-workspace-tabs {
      border-radius: var(--nib-ui-radius-lg);
      border: 1px solid var(--nib-ui-gloss-line);
      background: linear-gradient(180deg, rgba(255,255,255,0.74), rgba(255,255,255,0.36));
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.78), 0 12px 28px rgba(16,29,63,0.08);
    }

    /* Zero-specificity default: wrapped in :where() so the .nib-ui-button--* variant classes
       (outline, secondary, accent, flat, danger...) can actually override it. */
    :where(button:not(.login-link-button):not(.appearance-option):not(.theme-option):not(.header-role-option):not(.header-account-menu-item):not(.portal-row-summary):not(.mobile-header-summary):not(.portal-inline-timeline-toggle):not(.portal-file-chip):not(.portal-file-action):not(.nibveda-compact-button-table):not(.application-card):not(.portal-feedback-link):not(.chair-submenu-button):not(.chair-action-chip):not(.reviewer-workspace-tab):not(.admin-tab-button):not(.organizer-workspace-tab-button):not(.track-chair-workspace-tab):not(.chair-track-visual-legend-item):not(.chair-drawer-card-value-link):not(.chair-decision-tab):not(.author-email-box-card):not(.category-card):not(.link-button)) {
      --nib-ui-button-fg: var(--nib-ui-on-primary, var(--primary-text, #ffffff));
      border-radius: var(--nib-ui-button-radius-base);
      border-color: var(--nib-ui-button-border-primary);
      background: var(--nib-ui-button-shell-primary);
      color: var(--nib-ui-button-fg);
      box-shadow: var(--nib-ui-button-shadow-rest);
      letter-spacing: 0;
    }

    .nibveda-compact-button-table {
      --nib-table-button-width: clamp(128px, 14vw, 156px);
      min-width: min(100%, var(--nib-table-button-width));
      max-width: min(100%, var(--nib-table-button-width));
      min-height: 34px;
      border-radius: 10px;
      padding: 5px 9px;
      font-size: 10.8px;
      line-height: 1.15;
      white-space: normal;
    }

    .header-nav-link,
    .appearance-summary,
    .theme-summary,
    .button-style-summary,
    .header-role-summary,
    .header-action-button,
    .page-header-action-group .header-action-button {
      border-radius: var(--nib-ui-button-radius-base);
    }

    .appearance-switcher[open]::after,
    .appearance-switcher[open]::after,
    .theme-switcher[open]::after,
    .header-role-switcher[open]::after,
    .mobile-header-menu[open]::after {
      content: "";
      position: absolute;
      top: 100%;
      right: 0;
      width: min(280px, calc(100vw - 32px));
      height: 20px;
    }

    .portal-row-menu[open]::after {
      content: "";
      position: absolute;
      top: 0;
      left: 100%;
      width: 22px;
      height: 72px;
    }

    .nib-ui-showcase {
      padding: 28px 0 44px;
      display: grid;
      gap: 20px;
    }

    .nib-ui-showcase-hero,
    .nib-ui-showcase-card {
      border-radius: 22px;
      border: 1px solid var(--nib-ui-gloss-line);
      background: var(--nib-ui-gloss-surface);
      box-shadow: var(--nib-ui-gloss-shadow-soft);
    }

    .nib-ui-showcase-hero {
      padding: 24px;
      display: grid;
      gap: 10px;
    }

    .nib-ui-showcase-hero h1,
    .nib-ui-showcase-card h2 {
      margin: 0;
      color: var(--navy);
      font-family: var(--brand-display);
      letter-spacing: 0;
    }

    .nib-ui-showcase-hero p,
    .nib-ui-showcase-card p {
      margin: 0;
      color: var(--muted-text);
      line-height: 1.6;
    }

    .nib-ui-showcase-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 16px;
    }

    .nib-ui-showcase-card {
      padding: 18px;
      display: grid;
      gap: 14px;
      align-content: start;
    }

    .nib-ui-showcase-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      align-items: center;
    }

    .nib-ui-showcase-form {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
    }

    .nib-ui-showcase-form .full {
      grid-column: 1 / -1;
    }

    @media (max-width: 900px) {
      .nib-ui-showcase-grid,
      .nib-ui-showcase-form {
        grid-template-columns: 1fr;
      }
    }


  a { color: inherit; }
  /* A close (x) button is always a true circle: the general button padding and minimum height would squash it into an oval. */
  button[aria-label="Close"], button[aria-label="Clear search"] {
    box-sizing: border-box; min-width: 0; min-height: 0; padding: 0 !important; aspect-ratio: 1 / 1; flex: none;
    display: inline-flex; align-items: center; justify-content: center; line-height: 1; border-radius: 50% !important;
  }
  /* The header is sticky: a link to a section on the page must stop below it, not behind it. */
  html { scroll-padding-top: 140px; }
  .nib-ui-button, button, .path-chip, .pill, .role-chip, .appearance-summary, .header-nav-link, summary {
    font-family: var(--brand-display);
    letter-spacing: 0;
  }

  /* ---------- Header (EMT) ---------- */
  header { position: sticky; top: 0; z-index: 10; min-height: var(--frame-height); box-sizing: border-box; backdrop-filter: blur(16px); background: linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0)), var(--frame-nav-surface); border-bottom: 2px solid var(--frame-nav-border); box-shadow: var(--frame-nav-shadow); }
  header > nav { width: 100%; max-width: var(--nib-frame-max-width, 1200px); margin: 0 auto; padding: 16px 20px; min-height: calc(var(--frame-height) - 2px); box-sizing: border-box; display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; }
  .brand { display: block; min-width: 0; text-decoration: none; flex: 0 1 auto; }
  .brand-copy { display: grid; gap: 4px; min-width: 0; text-align: left; justify-items: start; align-content: start; }
  .brand-wordmark { display: block; height: 58px; width: auto; max-width: min(100%, 420px); object-fit: contain; justify-self: start; filter: drop-shadow(0 6px 14px rgba(27, 42, 91, 0.08)); }
  .brand-title { font-family: var(--brand-display); color: var(--navy); font-size: 14px; font-weight: 500; letter-spacing: 0.13em; text-transform: uppercase; line-height: 1.12; text-align: left; margin-left: 53px; }
  .brand-title-accent,
  .brand-tagline-accent { color: var(--red); }
  .brand-title-tag { display: inline-flex; align-items: center; line-height: 1; vertical-align: middle; background: var(--navy); color: var(--gold); padding: 5px 14px 4px 10px; clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%); }
  .header-right-cluster { margin-left: auto; display: grid; gap: 12px; justify-items: end; align-content: end; min-width: 0; }
  .nav-links { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; width: 100%; }
  .header-nav-link,
  .appearance-summary,
  .header-role-summary,
  .page-header-action-group .header-action-button {
    min-height: var(--nib-ui-control-height-md);
    padding: var(--nib-ui-control-padding-y) var(--nib-ui-control-x);
    font-size: var(--nib-ui-control-font-size);
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background 180ms ease, color 180ms ease;
  }
  .header-nav-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    font-weight: 700;
  }
  .header-nav-link:hover { transform: translateY(-1px); }
  .app-account-area { display: inline-flex; align-items: center; gap: 10px; }
  .app-cart-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px;
    background: var(--red); color: #fff; font-size: 10.5px; font-weight: 800; margin-left: 6px;
  }

  /* ---------- Mobile hamburger menu (EMT) ---------- */
  .mobile-header-menu {
    display: none;
    position: relative;
    z-index: 3;
  }
  .public-mobile-header-menu { display: none; }
  .mobile-header-menu summary::-webkit-details-marker { display: none; }
  .mobile-header-summary {
    list-style: none;
    width: 48px;
    height: 48px;
    min-height: 48px;
    padding: 0;
    border-radius: 999px;
    border: 1px solid rgba(201, 162, 39, 0.26);
    background: linear-gradient(135deg, var(--primary-start) 0%, var(--red) 100%);
    color: #ffffff;
    box-shadow: 0 18px 30px rgba(16, 29, 63, 0.18);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
  }
  .mobile-header-summary:hover,
  .mobile-header-menu[open] .mobile-header-summary {
    transform: translateY(-1px);
    box-shadow: 0 22px 34px rgba(16, 29, 63, 0.22);
  }
  .mobile-header-panel {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    width: min(260px, calc(100vw - 32px));
    padding: 12px;
    border-radius: 20px;
    border: 1px solid var(--theme-menu-border);
    background: var(--theme-menu-bg);
    box-shadow: var(--theme-menu-shadow);
    backdrop-filter: blur(14px);
    display: grid;
    gap: 10px;
    z-index: 42;
  }
  .mobile-header-panel .header-nav-link {
    width: 100%;
    justify-content: flex-start;
  }
  .mobile-header-panel .app-account-area { display: grid; gap: 10px; width: 100%; }
  .ui-hamburger-lines {
    width: 22px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    color: currentColor;
  }
  .ui-hamburger-lines::before,
  .ui-hamburger-lines::after,
  .ui-hamburger-lines span {
    content: "";
    position: absolute;
    left: 0;
    width: 22px;
    height: 3px;
    border-radius: 999px;
    background: currentColor;
  }
  .ui-hamburger-lines::before { top: 0; }
  .ui-hamburger-lines span { top: 6px; }
  .ui-hamburger-lines::after { top: 12px; }
  .ui-hamburger-button { isolation: isolate; }

  /* ---------- Account avatar menu (EMT header-account-*) ---------- */
  .header-account-menu { position: relative; display: inline-flex; flex-direction: column; align-items: flex-end; z-index: 4; }
  .header-account-menu summary::-webkit-details-marker { display: none; }
  .header-account-summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; }
  .header-account-avatar {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 999px;
    background: linear-gradient(135deg, var(--navy), var(--red));
    color: var(--white, #fff); font-family: var(--brand-display); font-weight: 700; font-size: 15px; letter-spacing: 0.02em;
    box-shadow: var(--shadow-soft);
    border: 2px solid rgba(255,255,255,0.85);
    transition: transform 180ms ease, box-shadow 180ms ease;
  }
  .header-account-avatar--lg { width: 56px; height: 56px; font-size: 20px; flex: 0 0 auto; }
  .header-account-summary:hover .header-account-avatar,
  .header-account-menu[open] .header-account-avatar { transform: translateY(-1px); box-shadow: 0 14px 26px rgba(16, 29, 63, 0.24); }
  .header-account-summary:focus-visible { outline: none; }
  .header-account-summary:focus-visible .header-account-avatar { outline: 3px solid rgba(201, 162, 39, 0.35); outline-offset: 2px; }
  .header-account-summary-text { display: none; }
  .header-account-menu-panel {
    position: absolute; top: calc(100% + 10px); right: 0;
    min-width: 240px; width: max-content; max-width: min(300px, calc(100vw - 32px));
    padding: 10px; border-radius: 18px;
    border: 1px solid var(--theme-menu-border);
    background: var(--theme-menu-bg);
    box-shadow: var(--theme-menu-shadow);
    backdrop-filter: blur(14px);
    display: grid; gap: 6px;
    z-index: 42;
  }
  .header-account-card {
    display: flex; align-items: center; gap: 12px;
    padding: 8px 8px 12px; margin-bottom: 2px;
    border-bottom: 1px solid var(--theme-menu-border);
  }
  .header-account-card-text { min-width: 0; display: grid; gap: 2px; }
  .header-account-name { font-weight: 700; color: var(--navy); font-size: 15px; line-height: 1.25; word-break: break-word; }
  .header-account-meta { font-size: 12px; color: var(--muted-text); word-break: break-all; line-height: 1.3; }
  .header-account-badge {
    justify-self: start; margin-top: 3px; padding: 3px 10px; border-radius: 999px;
    font-size: 10.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
    background: var(--navy); color: var(--gold);
  }
  .header-account-menu-item {
    display: flex; align-items: center; justify-content: center;
    width: 100%; text-align: center; text-decoration: none; box-sizing: border-box;
    border-radius: 999px;
    border: 1px solid rgba(27, 42, 91, 0.14);
    background: linear-gradient(180deg, #ffffff 0%, #f4f5fa 100%);
    color: var(--navy);
    padding: 9px 16px; font-size: 13px; font-weight: 600; letter-spacing: 0.03em;
    cursor: pointer;
    box-shadow: 0 10px 22px rgba(16, 29, 63, 0.14), inset 0 1px 0 rgba(255,255,255,0.9);
    transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
  }
  .header-account-menu-item:hover { box-shadow: 0 14px 28px rgba(16, 29, 63, 0.2), inset 0 1px 0 rgba(255,255,255,0.9); transform: translateY(-1px); border-color: rgba(27, 42, 91, 0.28); }
  .header-account-menu-item.logout { color: var(--red); border-color: rgba(159, 17, 17, 0.16); box-shadow: 0 10px 22px rgba(159, 17, 17, 0.14), inset 0 1px 0 rgba(255,255,255,0.9); }
  .header-account-menu-item.logout:hover { box-shadow: 0 14px 28px rgba(159, 17, 17, 0.22), inset 0 1px 0 rgba(255,255,255,0.9); border-color: rgba(159, 17, 17, 0.32); }
  .app-account-menu-slot { display: inline-flex; align-items: center; }

  /* ---------- Footer (EMT) ---------- */
  footer {
    margin-top: 0;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    backdrop-filter: blur(16px);
    background: linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0)), var(--frame-nav-surface);
    border-top: 2px solid var(--frame-nav-border);
    box-shadow: var(--frame-nav-shadow);
  }
  .footer-inner { width: 100%; max-width: var(--nib-content-max-width, 1180px); margin: 0 auto; padding: 16px 20px; display: grid; gap: 8px; }
  .footer-minimal { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
  .footer-brand-line { display: grid; gap: 6px; }
  .footer-brand-line img { height: 38px; width: auto; object-fit: contain; }
  .footer-brand-tagline { font-family: var(--brand-display); color: var(--navy); font-size: 12px; font-weight: 500; letter-spacing: 0.13em; text-transform: uppercase; line-height: 1.12; margin-left: 35px; }
  .footer-office-block {
    display: grid;
    gap: 2px;
    max-width: 520px;
    color: #5b6784;
    text-align: right;
  }
  .footer-office-block strong {
    color: var(--navy);
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .footer-office-block span {
    line-height: 1.45;
    font-size: 13px;
  }

  /* ---------- Headings (EMT) ---------- */
  h1, h2, h3 { font-family: var(--brand-display); letter-spacing: 0; }
  h1 { margin: 0; font-size: var(--nib-ui-heading-1-size, 46px); line-height: 1.04; }
  h2 { margin: 0 0 10px; color: var(--navy); font-size: var(--nib-ui-heading-2-size, 24px); }

  /* ---------- EMT breakpoint steps ---------- */
  @media (min-width: 1601px) {
    :root {
      --nib-ui-control-font-size: 16px;
      --nib-ui-control-font-size-sm: 13.5px;
      --nib-ui-control-height-md: 48px;
      --nib-ui-control-height-lg: 56px;
      --nib-ui-control-height-input: 46px;
      --nib-ui-control-x: 20px;
      --nib-ui-select-trigger-height: 50px;
      --nib-ui-heading-1-size: 50px;
      --nib-ui-heading-2-size: 26px;
    }
  }
  @media (max-width: 1280px) {
    :root {
      --frame-height: 88px;
      --nib-ui-control-font-size: 14.5px;
      --nib-ui-control-height-sm: 36px;
      --nib-ui-control-height-md: 44px;
      --nib-ui-control-height-input: 42px;
      --nib-ui-control-x: 16px;
      --nib-ui-select-trigger-height: 46px;
      --nib-ui-select-option-height: 42px;
      --nib-ui-heading-1-size: 40px;
      --nib-ui-heading-2-size: 22px;
    }
    header > nav { padding: 14px 18px; }
  }
  @media (max-width: 980px) {
    :root {
      --nib-ui-control-font-size: 14px;
      --nib-ui-control-height-md: 43px;
      --nib-ui-control-height-input: 42px;
      --nib-ui-control-x: 15px;
    }
  }
  @media (max-width: 720px) {
    :root {
      --frame-height: auto;
      --nib-ui-control-font-size: 13.5px;
      --nib-ui-control-font-size-sm: 12.5px;
      --nib-ui-control-height-sm: 34px;
      --nib-ui-control-height-md: 42px;
      --nib-ui-control-height-input: 42px;
      --nib-ui-control-x: 14px;
      --nib-ui-select-trigger-height: 44px;
      --nib-ui-select-option-height: 40px;
    }
    header > nav { align-items: center; flex-wrap: wrap; padding: 6px 14px 4px; gap: 8px; }
    .brand { min-width: 0; flex: 1 1 100%; width: 100%; text-align: left; }
    header .brand-copy { gap: 0; width: 100%; justify-items: start; text-align: left; }
    header .brand-wordmark { height: 46px; max-width: min(100%, 238px); justify-self: start; }
    header .brand-title { font-size: 13px; letter-spacing: 0.13em; margin-left: 0; text-align: left; }
    footer { align-items: stretch; }
    .header-right-cluster { width: auto; gap: 8px; justify-items: end; margin-left: auto; }
    .nav-links { gap: 6px; justify-content: flex-end; }
    .nav-links > .header-nav-link { display: none; }
    .nav-links > .app-account-area--wide { display: none; }
    .public-mobile-header-menu { display: inline-flex; }
    .mobile-header-summary { width: 42px; height: 42px; min-height: 42px; }
    h1 { font-size: 36px; }
    .footer-minimal { flex-direction: column; align-items: flex-start; }
    .footer-office-block { max-width: none; text-align: left; }
  }
  @media (max-width: 560px) {
    .header-account-menu-panel { max-width: calc(100vw - 20px); }
    :root {
      --nib-ui-control-font-size: 13px;
      --nib-ui-control-height-md: 40px;
      --nib-ui-control-height-input: 40px;
      --nib-ui-control-x: 12px;
    }
    nav { padding-inline: 14px; }
    h1 { font-size: 32px; }
    h2 { font-size: 22px; }
    .mobile-header-panel { width: min(260px, calc(100vw - 20px)); }
  }


.nib-select { position: relative; display: inline-block; vertical-align: middle; max-width: 100%; }
.nib-select.is-block { display: block; width: 100%; }
.nib-select > select.nib-select-native { visibility: hidden; padding-right: 46px; max-width: 100%; box-sizing: border-box; }
.nib-select.is-block > select.nib-select-native { width: 100%; }
.nib-select .nib-select-button {
  position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; margin: 0; box-sizing: border-box;
  display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 40px 0 14px;
  border: 1px solid var(--input-border, #d9d2c4); border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,253,247,0.92));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.86), 0 8px 18px rgba(16, 29, 63, 0.04);
  color: var(--nib-ui-input-text, #252b3d); font: inherit; font-size: var(--nib-ui-control-font-size, 14px); font-weight: 500;
  letter-spacing: 0; text-align: left; text-transform: none; text-shadow: none; line-height: 1.2; cursor: pointer;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.nib-select .nib-select-button:hover { border-color: color-mix(in srgb, var(--gold, #c9a227) 55%, var(--input-border, #d9d2c4) 45%); transform: none; filter: none; }
.nib-select .nib-select-button:focus-visible, .nib-select .nib-select-button.is-open {
  border-color: color-mix(in srgb, var(--gold, #c9a227) 70%, var(--navy, #1b2a5b) 30%); outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold, #c9a227) 24%, transparent), inset 0 1px 0 rgba(255,255,255,0.92);
}
.nib-select .nib-select-button::after {
  content: ""; position: absolute; right: 16px; top: 50%; width: 7px; height: 7px;
  border-right: 2px solid var(--secondary-text, #5b6784); border-bottom: 2px solid var(--secondary-text, #5b6784);
  transform: translateY(-70%) rotate(45deg); transition: transform 180ms ease;
}
.nib-select .nib-select-button.is-open::after { transform: translateY(-25%) rotate(-135deg); }
.nib-select .nib-select-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nib-select.is-disabled .nib-select-button { opacity: .55; cursor: not-allowed; }

.nib-select-list {
  position: fixed; z-index: 100000; margin: 0; padding: 6px; list-style: none; box-sizing: border-box; overflow-y: auto; overscroll-behavior: contain;
  background: #ffffff; border: 1px solid var(--input-border, #d9d2c4); border-radius: 14px;
  box-shadow: 0 18px 44px rgba(16, 29, 63, 0.22), 0 2px 6px rgba(16, 29, 63, 0.08);
  font-family: var(--sans, -apple-system, "Segoe UI", Roboto, Arial, sans-serif); font-size: 14px; scrollbar-width: thin;
  animation: nib-select-in 130ms ease-out;
}
@keyframes nib-select-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.nib-select-option {
  position: relative; margin: 1px 0; padding: 9px 14px 9px 36px; border-radius: 9px; color: var(--nib-ui-input-text, #252b3d);
  line-height: 1.3; cursor: pointer; user-select: none;
}
.nib-select-option.is-active { background: rgba(27, 42, 91, 0.09); }
.nib-select-option.is-selected { color: var(--navy, #1b2a5b); font-weight: 700; }
.nib-select-option.is-selected::before {
  content: ""; position: absolute; left: 15px; top: 50%; width: 5px; height: 10px;
  border-right: 2px solid var(--gold, #c9a227); border-bottom: 2px solid var(--gold, #c9a227); transform: translateY(-65%) rotate(45deg);
}
.nib-select-option.is-disabled { opacity: .4; cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) { .nib-select-list { animation: none; } .nib-select .nib-select-button::after { transition: none; } }


  .nib-ui-button:disabled { opacity: 0.5; cursor: not-allowed; transform: none; filter: saturate(0.7); }
  .message { padding: 10px 14px; border-radius: 10px; font-size: 13.5px; margin-bottom: 12px; }
  .message.error { background: rgba(220,80,90,0.12); color: #94304b; border: 1px solid rgba(220,80,90,0.3); }
  .message.success { background: rgba(60,180,120,0.12); color: #156f49; border: 1px solid rgba(60,180,120,0.3); }
  .message.notice { background: rgba(201,162,39,0.14); color: #8b4f18; border: 1px solid rgba(201,162,39,0.35); line-height: 1.55; }
  .link-button { background: none; border: none; padding: 0; margin: 0; font: inherit; color: var(--navy, #1b2a5b); text-decoration: underline; cursor: pointer; }
  .link-button:disabled { opacity: 0.6; cursor: default; }
  .form-field { display: grid; gap: 5px; margin-bottom: 12px; }
  .form-field label { font-size: 13px; font-weight: 700; color: var(--secondary-text); }
  .form-field .field-error { color: var(--red, #b3261e); font-size: 12px; }
  .inline-controls { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
  @media (max-width: 520px) {
    .inline-controls { flex-direction: column; align-items: stretch; }
    .inline-controls > select, .inline-controls > input, .inline-controls > button, .inline-controls > textarea { width: 100%; }
  }
  .auth-divider { display: flex; align-items: center; gap: 12px; margin: 14px 0; color: var(--muted-text); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
  .auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--surface-border); }
  .auth-actions { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 6px; }
  .auth-actions .nib-ui-button { width: 100%; justify-content: center; }
  .oidc-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
  .oidc-buttons:has(> :only-child) { grid-template-columns: 1fr; }
  .oidc-buttons .oidc-lead { display: none; }
  .oidc-buttons .oidc-provider-button { min-height: 40px; padding: 0 10px; font-size: 13.5px; }
  .oidc-buttons .oidc-provider-button__content { gap: 8px; }
  .oidc-buttons .oidc-provider-button__icon { width: 18px; height: 18px; flex-basis: 18px; }
  .oidc-provider-button { width: 100%; justify-content: center; font-weight: 700; }
  .oidc-provider-button__content { display: inline-flex; align-items: center; justify-content: center; gap: 12px; }
  .oidc-provider-button__icon { width: 20px; height: 20px; flex: 0 0 20px; display: block; object-fit: contain; }
  .oidc-provider-button__label { line-height: 1.15; }
  /* The sign-in card: short enough for a laptop screen, with a brand edge, tidy fields and a clear focus. Shared by the customer site, admin and expert panel. */
  .auth-shell { max-width: 400px; margin: 18px auto; }
  .auth-shell .form-card, .auth-shell.admin-panel { position: relative; overflow: hidden; padding: 22px 24px 20px; border-radius: 22px; box-shadow: 0 30px 60px rgba(16, 29, 63, 0.14), 0 0 0 1px rgba(27, 42, 91, 0.06); }
  .auth-shell .form-card::before, .auth-shell.admin-panel::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, var(--gold, #c9a227), var(--red, #9f1111), var(--navy, #1b2a5b)); }
  .auth-shell h1, .auth-shell h2 { font-size: 22px; line-height: 1.15; margin: 4px 0 2px; }
  .auth-shell .form-lead { font-size: 13px; margin: 0 0 12px; }
  .auth-shell .form-field { gap: 4px; margin-bottom: 10px; }
  .auth-shell .form-field label { font-size: 12.5px; letter-spacing: 0.02em; }
  .auth-shell .form-field input:not([type="checkbox"]):not([type="radio"]) { min-height: 40px; height: 40px; padding: 0 12px; font-size: 14px; border-radius: 11px; transition: box-shadow 0.2s ease, border-color 0.2s ease; }
  .auth-shell .form-field input:focus { outline: none; border-color: var(--gold, #c9a227); box-shadow: 0 0 0 4px rgba(201, 162, 39, 0.22); }
  .auth-shell .form-actions { margin-top: 12px; gap: 8px 14px; }
  .auth-shell .nib-ui-button--primary { min-height: 42px; letter-spacing: 0.02em; }
  .auth-shell .message { margin-bottom: 10px; padding: 8px 12px; font-size: 13px; }
  .auth-shell .muted-link { font-size: 12.5px; line-height: 1.45; }
  /* ---------- Sign-in and register: a brand panel beside the form ---------- */
  .auth-shell.auth-split { max-width: 880px; margin: 24px auto; display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); border-radius: 26px; overflow: hidden; background: var(--card-bg); border: 1px solid var(--card-border); box-shadow: 0 40px 80px rgba(16, 29, 63, 0.18); }
  .auth-split .form-card { border: 0; border-radius: 0; box-shadow: none; background: transparent; padding: 26px 32px 24px; }
  .auth-split .form-card::before { display: none; }
  .auth-aside { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: 32px 30px; color: #fff; background:
    radial-gradient(420px 260px at 100% 0%, rgba(155, 27, 46, 0.6), transparent 62%),
    radial-gradient(360px 240px at 0% 100%, rgba(201, 162, 39, 0.22), transparent 60%),
    linear-gradient(160deg, #071331, #10204c 60%, #1b2a5b); }
  .auth-aside::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px); background-size: 40px 40px; -webkit-mask-image: radial-gradient(ellipse at 30% 30%, #000 20%, transparent 78%); mask-image: radial-gradient(ellipse at 30% 30%, #000 20%, transparent 78%); }
  .auth-aside > * { position: relative; }
  .auth-aside__kicker { font-family: var(--sans); font-size: 11px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: #e8c75a; }
  .auth-aside h2 { margin: 0; font-size: clamp(1.45rem, 2.4vw, 1.9rem); line-height: 1.12; color: #fff; }
  .auth-aside__lead { font-family: var(--sans); font-size: 14px; line-height: 1.55; color: rgba(255, 255, 255, 0.82); margin: 0; }
  .auth-aside__list { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
  .auth-aside__list li { position: relative; padding-left: 26px; font-family: var(--sans); font-size: 13.5px; line-height: 1.45; color: rgba(255, 255, 255, 0.92); }
  .auth-aside__list li::before { content: ""; position: absolute; left: 2px; top: 0.35em; width: 12px; height: 6px; border-left: 2.5px solid #e8c75a; border-bottom: 2.5px solid #e8c75a; transform: rotate(-45deg); }
  .auth-aside__note { margin: 8px 0 0; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.18); font-family: var(--sans); font-size: 12px; color: rgba(255, 255, 255, 0.62); }
  .auth-split h1 { margin: 0 0 2px; font-size: 24px; }
  .nib-ui-button--block { width: 100%; justify-content: center; min-height: 44px; margin-top: 4px; }
  .auth-links { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 14px; }
  .auth-links--center { justify-content: center; }
  .auth-links a { font-weight: 700; color: var(--navy); text-decoration: none; }
  .auth-links a:hover { text-decoration: underline; }
  .auth-split .checkbox-field { align-items: flex-start; margin: 2px 0 12px; line-height: 1.45; }
  .auth-split .checkbox-field input { margin-top: 2px; flex: none; }
  .auth-split .form-row-2 { gap: 12px; }
  @media (max-width: 760px) { .auth-shell.auth-split { grid-template-columns: 1fr; max-width: 440px; } .auth-aside { display: none; } .auth-split .form-card { padding: 24px 22px; } }
  /* Which product and which side this sign-in belongs to, e.g. SKILLPROJECT . ADMIN */
  .auth-context { display: inline-flex; align-items: center; gap: 8px; padding: 4px 11px; border-radius: 999px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; line-height: 1.2; color: var(--navy); background: rgba(27, 42, 91, 0.08); border: 1px solid rgba(27, 42, 91, 0.14); float: right; margin: 2px 0 6px 12px; }
  .auth-context b { color: var(--red, #9f1111); }
  .auth-context i { width: 4px; height: 4px; border-radius: 50%; background: var(--gold, #c9a227); }
  .auth-split .form-card > h2 { margin: 0 0 2px; font-size: 24px; }
  .auth-split .form-card .link-button { font-size: 13px; font-weight: 700; color: var(--navy); }
  .auth-split .auth-links .link-button { text-decoration: none; }
  .auth-split .auth-links .link-button:hover { text-decoration: underline; }
  .confirm-overlay { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(17,28,59,0.5); }
  .confirm-box { width: min(480px, 100%); padding: 22px 24px; border-radius: 18px; background: var(--card-bg, #fff); border: 1px solid var(--card-border, #dfe3ef); border-top: 5px solid #d6455a; box-shadow: 0 24px 60px rgba(17,28,59,0.35); }
  .confirm-box h3 { margin: 0 0 8px; font-family: var(--brand-display, inherit); font-size: 20px; color: var(--navy, #1b2a5b); }
  .npa-toasts { position: fixed; right: 20px; bottom: 24px; z-index: 520; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; max-width: min(420px, calc(100vw - 32px)); pointer-events: none; }
  .npa-toast { pointer-events: auto; display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 16px; border-radius: 12px; background: var(--navy, #1b2a5b); color: #fff; font-size: 14px; line-height: 1.35; box-shadow: 0 10px 26px rgba(0,0,0,0.3); border-left: 5px solid rgba(255,255,255,0.35); transition: opacity 0.35s, transform 0.35s; animation: npa-toast-in .22s ease-out; }
  .npa-toast.is-success { border-left-color: #3cb478; } .npa-toast.is-error { background: #7a2536; border-left-color: #ff8a98; }
  .npa-toast.is-out { opacity: 0; transform: translateY(6px); }
  .npa-toast-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
  .npa-toast-btn, .npa-toast-x { background: transparent; border: 1px solid rgba(255,255,255,0.45); color: #fff; border-radius: 999px; font: inherit; font-size: 13px; padding: 2px 10px; cursor: pointer; flex: none; } .npa-toast-x { border: 0; font-size: 20px; line-height: 1; padding: 0 4px; opacity: .8; }
  .npa-toast-act { background: rgba(255,255,255,0.18); font-weight: 700; }
  @keyframes npa-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }



  :root {
    --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  }
  * { box-sizing: border-box; }
  body {
    margin: 0;
    font-family: var(--sans);
    color: var(--ink);
    background: linear-gradient(180deg, var(--page-bg-start), var(--page-bg-mid) 40%, var(--page-bg-end));
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
  }
  .app-shell { display: flex; flex-direction: column; min-height: 100vh; }

  main.app-main { flex: 1; width: 100%; max-width: var(--nib-content-max-width, 1180px); margin: 0 auto; padding: 0 24px 64px; }
  main.app-main.narrow { max-width: 640px; padding-top: 28px; }

  .footer-disclaimer {
    margin: 4px 0 0; font-family: var(--sans); font-size: 11px; line-height: 1.6;
    color: var(--muted-text); max-width: var(--nib-content-max-width, 1180px);
  }
  .footer-disclaimer a { color: var(--muted-text); text-decoration: underline; }

/* ---------- Profile page ---------- */
  .profile-page { padding-top: 28px; display: grid; gap: 20px; }
  .profile-hero {
    display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
    background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 20px;
    padding: 24px 26px; box-shadow: var(--shadow-soft);
  }
  .form-field input:disabled { opacity: 0.65; cursor: not-allowed; background: color-mix(in srgb, var(--page-bg-mid) 60%, var(--card-bg) 40%); }
  .profile-avatar { width: 88px; height: 88px; font-size: 30px; border-width: 3px; flex: 0 0 auto; }
  .profile-hero-text { flex: 1 1 260px; min-width: 0; display: grid; gap: 6px; }
  .profile-hero-text h1 { color: var(--navy); font-size: var(--nib-ui-heading-2-size, 24px); line-height: 1.2; word-break: break-word; }
  .profile-hero-meta { font-family: var(--sans); font-size: 13.5px; color: var(--muted-text); word-break: break-word; }
  .profile-badges { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
  .profile-hero-actions { display: flex; gap: 10px; flex-wrap: wrap; }
  .profile-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr); gap: 20px; align-items: start; }
  .profile-main { display: grid; gap: 20px; min-width: 0; }
  .profile-side { display: grid; gap: 20px; }
  .password-strength { display: grid; gap: 6px; }
  .password-strength-bar { height: 6px; border-radius: 999px; background: var(--surface-border); overflow: hidden; }
  .password-strength-bar span { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--red); transition: width 180ms ease, background 180ms ease; }
  .password-strength[data-score="1"] .password-strength-bar span { width: 25%; background: #c0392b; }
  .password-strength[data-score="2"] .password-strength-bar span { width: 50%; background: #d68910; }
  .password-strength[data-score="3"] .password-strength-bar span { width: 75%; background: #2e8b57; }
  .password-strength[data-score="4"] .password-strength-bar span { width: 100%; background: #1e7e4f; }
  .password-strength-label { font-family: var(--sans); font-size: 12.5px; color: var(--muted-text); }
  .profile-card {
    background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 18px;
    padding: 22px 24px; box-shadow: var(--shadow-soft);
  }
  .profile-card h2 { margin: 0 0 6px; }
  .profile-card-lead { font-family: var(--sans); font-size: 13.5px; color: var(--muted-text); margin: 0 0 18px; line-height: 1.55; }
  .profile-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0 16px; }
  .profile-stat {
    display: grid; gap: 2px; padding: 14px 12px; border-radius: 14px; text-align: center;
    background: color-mix(in srgb, var(--page-bg-mid) 60%, var(--card-bg) 40%); border: 1px solid var(--surface-border);
  }
  .profile-stat strong { font-family: var(--brand-display); font-size: 26px; color: var(--navy); line-height: 1.1; }
  .profile-stat span { font-family: var(--sans); font-size: 11.5px; font-weight: 700; color: var(--muted-text); text-transform: uppercase; letter-spacing: 0.04em; }
  .profile-side-button { width: 100%; }
  .profile-facts { margin: 12px 0 0; display: grid; gap: 0; }
  .profile-facts > div { display: flex; justify-content: space-between; gap: 14px; padding: 11px 0; border-top: 1px solid var(--surface-border); font-family: var(--sans); font-size: 13.5px; }
  .profile-facts > div:first-child { border-top: none; }
  .profile-facts dt { color: var(--muted-text); font-weight: 600; flex: 0 0 auto; }
  .profile-facts dd { margin: 0; color: var(--navy); font-weight: 700; text-align: right; word-break: break-all; }
  @media (max-width: 900px) { .profile-grid { grid-template-columns: 1fr; } }
  @media (max-width: 560px) { .profile-hero { padding: 18px; } .profile-hero-actions { width: 100%; } .profile-hero-actions > * { flex: 1 1 0; } }

  /* ---------- OIDC sign-in buttons ---------- */

  /* ---------- Hero ---------- */
  .hero { text-align: center; padding: 46px 0 18px; }
  .hero-eyebrow {
    display: inline-flex; align-items: center; gap: 6px; padding: 5px 14px; border-radius: 999px;
    background: var(--card-bg, #fff); border: 1px solid var(--gold);
    color: var(--secondary-text); font-size: 11.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
    margin-bottom: 18px;
  }
  .hero h1 { color: var(--navy); margin: 0 0 14px; }
  .brand-promise { font-family: var(--brand-display); color: var(--gold); font-size: 16px; font-weight: 700; margin: 0 0 10px; letter-spacing: 0.01em; }
  .hero p { font-family: var(--sans); color: var(--muted-text); font-size: 16.5px; max-width: 620px; margin: 0 auto 20px; line-height: 1.6; }

  /* ---------- NIBVEDA Express banner ---------- */
  .express-banner {
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
    max-width: 780px; margin: 22px auto 0; padding: 18px 24px; border-radius: 16px;
    background: linear-gradient(120deg, var(--navy), color-mix(in srgb, var(--navy) 80%, #1b2a5b));
    box-shadow: var(--shadow);
  }
  .express-banner-bolt {
    flex: 0 0 auto; width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center;
    justify-content: center; background: var(--gold); color: var(--navy); font-size: 20px;
  }
  .express-banner-text { flex: 1 1 260px; display: grid; gap: 2px; }
  .express-banner-title { font-family: var(--brand-display); font-weight: 800; letter-spacing: 0.06em; color: var(--gold); font-size: 13px; text-transform: uppercase; }
  .express-banner-headline { font-family: var(--brand-display); color: #fff; font-size: 17px; font-weight: 700; }
  .express-banner-footnote { font-family: var(--sans); color: rgba(255,255,255,0.72); font-size: 11.5px; line-height: 1.5; }
  .express-banner-cta { flex: 0 0 auto; color: #fff !important; border-color: rgba(255,255,255,0.55) !important; }
  @media (max-width: 560px) { .express-banner { justify-content: center; text-align: center; } .express-banner-text { text-align: center; } }

  /* ---------- Coupon promo banner ---------- */
  .coupon-banner {
    display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
    max-width: 780px; margin: 22px auto 32px; padding: 16px 22px; border-radius: 16px;
    background: linear-gradient(120deg, color-mix(in srgb, var(--gold) 16%, var(--card-bg)), var(--card-bg));
    border: 1px solid var(--gold); box-shadow: var(--shadow-soft);
  }
  .coupon-banner-code {
    flex: 0 0 auto; font-family: var(--brand-display); font-weight: 700; font-size: 15px;
    letter-spacing: 0.06em; color: var(--navy); background: var(--card-bg); border: 1.5px dashed var(--gold);
    border-radius: 10px; padding: 9px 14px;
  }
  .coupon-banner-text { flex: 1 1 260px; display: grid; gap: 2px; }
  .coupon-banner-text strong { color: var(--navy); font-family: var(--brand-display); font-size: 14.5px; }
  .coupon-banner-text span { font-family: var(--sans); font-size: 12.5px; color: var(--muted-text); line-height: 1.5; }
  .coupon-banner-cta { flex: 0 0 auto; }
  @media (max-width: 560px) { .coupon-banner { justify-content: center; text-align: center; } .coupon-banner-text { text-align: center; } }

  /* ---------- Feature highlights (front page) ---------- */
  .feature-highlights {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 18px;
    max-width: 1080px; margin: 0 auto 34px;
  }
  .feature-card {
    --fc: #1b2a5b; position: relative; display: flex; flex-direction: column; padding: 22px 22px 18px; border-radius: 18px; background: var(--card-bg);
    border: 1px solid var(--card-border); border-top: 4px solid var(--fc); box-shadow: var(--shadow-soft); text-align: left;
    transition: transform .18s ease, box-shadow .18s ease;
  }
  .feature-card:nth-child(4n+2) { --fc: #c9a227; } .feature-card:nth-child(4n+3) { --fc: #1f9d63; } .feature-card:nth-child(4n) { --fc: #b26ef0; }
  .feature-card:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(27, 42, 91, 0.14); }
  .feature-card.tone-green { --fc: #1f9d63; }
  .feature-card.tone-navy { --fc: #4f8cff; }
  .feature-card.tone-purple { --fc: #b26ef0; }
  .feature-card.tone-teal { --fc: #1fb8a6; }
  .feature-card.tone-gold { --fc: #c9a227; }
  .feature-card.tone-rose { --fc: #c0405a; }
  .feature-tag { align-self: flex-start; margin-bottom: 10px; padding: 3px 11px; border-radius: 999px; background: color-mix(in srgb, var(--fc) 14%, #fff); color: color-mix(in srgb, var(--fc) 70%, #1b2a5b); font-family: var(--sans); font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
  .feature-card h3 { font-size: 17px !important; line-height: 1.3; }
  .feature-card p { flex: 1; font-size: 13.5px !important; line-height: 1.6 !important; }
  .feature-link { margin-top: 14px; font-family: var(--sans); font-size: 13px; font-weight: 800; color: var(--fc); text-decoration: none; }
  .feature-link:hover { text-decoration: underline; }
  .section-kicker { display: inline-block; margin-bottom: 8px; padding: 3px 12px; border-radius: 999px; background: rgba(201,162,39,0.16); color: #7a5f0a; font-family: var(--sans); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
  .section-kicker.on-dark { background: rgba(255,255,255,0.14); color: #f2d675; }
  .promise-panel { max-width: 1080px; margin: 0 auto 44px; padding: 30px 32px; border-radius: 22px; background: linear-gradient(135deg, #1b2a5b, #2f3f80); color: #fff; box-shadow: 0 18px 44px rgba(27,42,91,0.28); }
  .promise-head h2 { margin: 0 0 18px; color: #fff; font-size: 26px; }
  .promise-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 22px; }
  .promise-grid h3 { margin: 0 0 6px; color: #f2d675; font-family: var(--brand-display); font-size: 16px; }
  .promise-grid p { margin: 0; font-family: var(--sans); font-size: 13.5px; line-height: 1.6; color: rgba(255,255,255,0.86); }
  .header-nav-link.nav-highlight { background: linear-gradient(135deg, #f6dd8a, #c9a227) !important; color: #2b2100 !important; border-color: #b18a17 !important; box-shadow: 0 6px 16px rgba(201,162,39,0.35), inset 0 1px 0 rgba(255,255,255,0.6) !important; text-shadow: none !important; }
  .header-nav-link.nav-highlight:hover { filter: brightness(1.05); }
  .ls-spotlight { display: grid; grid-template-columns: 1.25fr 1fr; gap: 28px; align-items: center; max-width: 1080px; margin: 0 auto 36px; padding: 30px 32px; border-radius: 24px; background: linear-gradient(135deg, #fffaf0, #fdf1cf); border: 1.5px solid #e2c766; box-shadow: 0 18px 44px rgba(201,162,39,0.22); }
  @media (max-width: 820px) { .ls-spotlight { grid-template-columns: 1fr; } }
  .ls-spotlight h2 { margin: 0 0 10px; font-size: 28px; color: var(--navy); }
  .ls-spotlight p { margin: 0 0 14px; font-family: var(--sans); color: var(--secondary-text); font-size: 15px; line-height: 1.6; }
  .ls-spotlight-list { margin: 0 0 18px; padding: 0; list-style: none; font-family: var(--sans); font-size: 14px; color: var(--secondary-text); }
  .ls-spotlight-list li { position: relative; padding: 5px 0 5px 24px; }
  .ls-spotlight-list li::before { content: ""; position: absolute; left: 4px; top: 11px; width: 6px; height: 11px; border-right: 2.5px solid #c9a227; border-bottom: 2.5px solid #c9a227; transform: rotate(45deg) scale(.8); transform-origin: center; }
  .ls-spotlight-list strong { color: var(--navy); }
  .ls-spotlight-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
  .ls-spotlight-live { font-family: var(--sans); font-size: 13px; color: #6b5310; }
  .ls-spotlight-live strong { color: var(--navy); }
  .ls-mock-folder { position: relative; max-width: 340px; margin: 0 auto; }
  .ls-mock-tab { display: flex; gap: 4px; align-items: center; width: 44%; height: 26px; padding: 0 12px; box-sizing: border-box; border-radius: 14px 14px 0 0; background: #16224d; }
  .ls-mock-tab i, .ls-mock-legend i { display: inline-block; width: 22px; height: 7px; border-radius: 4px; background: #4f8cff; }
  .ls-mock-tab .s-code, .ls-mock-legend .s-code { background: #2dd4bf; }
  .ls-mock-tab .s-report, .ls-mock-legend .s-report { background: #f5c542; }
  .ls-mock-legend .s-paper { background: #c77dff; }
  .ls-mock-body { display: flex; flex-direction: column; gap: 5px; padding: 18px 20px 20px; border-radius: 0 20px 22px 22px; background: linear-gradient(160deg, #3b4a86, #1b2a5b); color: #fff; box-shadow: 0 16px 36px rgba(27,42,91,0.35); font-family: var(--sans); font-size: 12.5px; }
  .ls-mock-body strong { font-family: var(--brand-display); font-size: 18px; line-height: 1.25; }
  .ls-mock-pill { align-self: flex-start; padding: 2px 11px; border-radius: 999px; background: #d6f3e5; color: #16724a; font-size: 11px; font-weight: 800; }
  .ls-mock-marks { align-self: flex-start; margin-top: 4px; padding: 2px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.5); background: rgba(255,255,255,0.16); font-weight: 800; }
  .ls-mock-legend { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 12px; font-family: var(--sans); font-size: 12px; font-weight: 700; color: var(--secondary-text); }
  .ls-mock-legend span { display: inline-flex; align-items: center; gap: 6px; }
  .step-card.is-highlight { position: relative; border: 2px solid #c9a227; background: linear-gradient(180deg, #fffaf0, #fff); box-shadow: 0 14px 34px rgba(201,162,39,0.28); }
  .step-badge { position: absolute; top: -11px; right: 14px; padding: 2px 11px; border-radius: 999px; background: #c9a227; color: #2b2100; font-family: var(--sans); font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
  .trust-mini-highlight { background: #fff7e0; border-radius: 10px; padding: 7px 10px !important; color: #6b5310; }
  .ls-order-banner { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 4px 0 18px; padding: 14px 18px; border-radius: 16px; background: linear-gradient(135deg, #fffaf0, #fdf1cf); border: 1.5px solid #e2c766; font-family: var(--sans); font-size: 14px; color: #5a4608; line-height: 1.5; }
  .ls-order-banner strong { color: var(--navy); }
  .home-jump { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; max-width: 1080px; margin: -6px auto 8px; }
  .home-jump a { padding: 6px 14px; border-radius: 999px; background: var(--card-bg); border: 1px solid var(--card-border); font-family: var(--sans); font-size: 12.5px; font-weight: 700; color: var(--navy); text-decoration: none; box-shadow: var(--shadow-soft); }
  .home-jump a:hover { border-color: #c9a227; background: #fff7e0; }
  .section-heading--projects { margin-top: 30px; }
  .section-heading--sub { margin: 26px 0 14px; }
  .section-heading--sub h2 { font-size: 20px; }
  .offers-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: stretch; max-width: 1080px; margin: 40px auto 36px; }
  .offers-row .express-banner, .offers-row .coupon-banner { margin: 0; height: 100%; box-sizing: border-box; }
  @media (max-width: 900px) { .offers-row { grid-template-columns: 1fr; margin: 30px auto 28px; } }
  @media (max-width: 560px) {
    .hero { padding-top: 14px; }
    .hero h1 { font-size: 25px; line-height: 1.2; margin-bottom: 8px; }
    .hero p { font-size: 14px; line-height: 1.55; margin-bottom: 14px; }
    .hero-eyebrow { font-size: 10px; padding: 5px 12px; margin-bottom: 12px; }
    .brand-promise { font-size: 14px !important; margin-bottom: 8px !important; }
            .section-heading { margin: 32px 0 14px; }
      .ls-spotlight { padding: 22px 20px; gap: 20px; }
    .ls-spotlight h2 { font-size: 23px; }
    .promise-panel { padding: 22px 20px; }
    .promise-head h2 { font-size: 21px; }
    .feature-highlights { grid-template-columns: 1fr; }
        .home-jump a { padding: 6px 11px; font-size: 12px; }
  }
  .detail-layout > .detail-hero { grid-column: 1 / -1; }
  .cp-hero, .mo-hero { max-width: 1080px; margin: 20px auto 22px; }
  .mo-layout { max-width: 1080px; margin: 0 auto; }
  .mo-main { min-width: 0; }
  .cart-layout { align-items: start; }
  table.cart-table tr.cart-group-head td { padding: 16px 12px 6px; border-bottom: none; background: rgba(27,42,91,0.04); }
  .cart-project-name { font-family: var(--brand-display); font-size: 16px; color: var(--navy); }
  .cart-project-name a { color: inherit; text-decoration: none; }
  .cart-project-name a:hover { text-decoration: underline; }
  .cart-view-link { margin-left: 10px; font-family: var(--sans); font-size: 12.5px; font-weight: 800; color: #8a6a0c; text-decoration: none; }
  .cart-view-link:hover { text-decoration: underline; }
  .cart-item-label { font-family: var(--sans); font-weight: 700; color: var(--ink); }
  table.cart-table tr.cart-add-row td { padding: 8px 12px 16px; background: rgba(27,42,91,0.04); border-bottom: 1px solid var(--surface-border); }
  .cart-add-buttons { display: inline-flex; flex-wrap: wrap; gap: 8px; margin-left: 6px; vertical-align: middle; }
  .cart-summary-action { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px dashed var(--surface-border); font-family: var(--sans); }
  .cart-summary-action > div { display: flex; flex-direction: column; min-width: 0; }
  .cart-summary-action strong { color: var(--navy); font-size: 13.5px; }
  .cart-summary-action .muted-link { font-size: 12px; line-height: 1.4; }
  .cart-summary-action .nib-ui-button { flex: none; }
  .cart-popup-backdrop { position: fixed; inset: 0; z-index: 150; display: flex; justify-content: center; align-items: flex-start; padding: 6vh 16px 20px; overflow-y: auto; background: rgba(12,18,38,0.55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
  .cart-popup { position: relative; width: 100%; max-width: 520px; padding: 26px 26px 22px; border-radius: 20px; background: #fff; box-shadow: 0 28px 70px rgba(12,18,38,0.45); animation: nib-select-in 160ms ease-out; }
  .cart-popup h3 { margin: 0 0 12px; font-family: var(--brand-display); font-size: 20px; color: var(--navy); }
  .cart-popup-close { position: absolute; top: 12px; right: 14px; width: 34px; height: 34px; padding: 0 !important; border-radius: 50% !important; border: none !important; background: rgba(27,42,91,0.08) !important; color: var(--navy) !important; font-size: 22px; line-height: 1; box-shadow: none !important; cursor: pointer; }
  .cart-popup .express-delivery-card { margin: 0; padding: 0; border: none; box-shadow: none; background: none; }
  .cart-popup .express-delivery-card h2 { display: none; }
  .cart-popup .coupon-box { margin: 0; }
  .cart-popup .nib-ui-button { width: auto; }
  .chapter-picker { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 6px; }
  .chapter-option { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1.5px solid var(--card-border); border-radius: 12px; background: var(--card-bg); cursor: pointer; font-family: var(--sans); }
  .chapter-option:hover { border-color: #c9a227; }
  .chapter-option:has(input:checked) { border-color: #c9a227; background: #fff8e3; }
  .chapter-option input { margin-top: 3px; flex: none; }
  .chapter-option span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .chapter-option strong { font-size: 13.5px; color: var(--navy); }
  .chapter-option em { font-style: normal; font-weight: 600; font-size: 11.5px; color: var(--muted-text); }
  .chapter-option small { font-size: 12px; line-height: 1.4; color: var(--muted-text); }
  .chapter-picker-tools { display: flex; gap: 12px; margin: 4px 0 0; font-family: var(--sans); font-size: 12.5px; }
  @media (max-width: 640px) { .chapter-picker { grid-template-columns: 1fr; } }
  .cart-save-tag { display: inline-block; padding: 1px 9px; border-radius: 999px; background: rgba(31,157,99,0.14); color: #16724a; font-family: var(--sans); font-size: 11.5px; font-weight: 800; }
  .cart-savings { margin-top: 12px; padding: 12px 14px; border-radius: 14px; background: #f1fbf5; border: 1.5px solid rgba(31,157,99,0.45); color: #16724a; font-family: var(--sans); font-size: 13px; }
  .cart-savings > strong { display: block; margin-bottom: 6px; font-size: 14.5px; }
  .cart-savings > div { display: flex; justify-content: space-between; gap: 10px; padding: 2px 0; }
  .cart-savings .cart-savings-total { margin-top: 4px; padding-top: 6px; border-top: 1px dashed rgba(31,157,99,0.5); font-weight: 800; }
  .cart-includes { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; }
  .order-includes { border-bottom: none !important; padding-top: 0 !important; }
  @media (max-width: 860px) { .mo-layout.cart-layout > .mo-main { order: 0; } }
  @media (max-width: 860px) { .cart-aside .cart-summary-card { position: static; } }
  .cart-summary-card .cart-summary:first-of-type { margin-top: 0; }
  .sp-layout { max-width: 1080px; margin: 0 auto; }
  @media (max-width: 860px) { .mo-layout > .mo-aside { display: contents; } .mo-aside > .detail-card { order: 3; margin-bottom: 0; } .mo-aside > #mo-ls { order: 1; } .mo-layout > .mo-main { order: 2; } .mo-layout { gap: 18px; } }
  .mo-main .order-summary-row > div:first-child { min-width: 0; }
  .mo-main .order-summary-row > div:first-child strong { white-space: nowrap; }
  .mo-main .order-card:last-child { margin-bottom: 0 !important; }
  .mo-hero .hero-eyebrow { margin-bottom: 12px; }
  .mo-hero h1 { margin-bottom: 8px; }
  .cp-hero .hero-eyebrow { margin-bottom: 12px; }
  .cp-hero h1 { margin-bottom: 8px; }
  .cp-aside { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
  .cp-aside .detail-card { margin: 0; }
  .cp-ls-card h2 { margin: 6px 0 8px; font-size: 20px; color: var(--navy); }
  .cp-ls-card p { margin: 0 0 12px; line-height: 1.55; }
  .cp-rules-card .ls-spotlight-list { margin: 0; }
  @media (max-width: 860px) { .cp-aside { position: static; } }
  @media (max-width: 560px) { .detail-facts div { padding: 8px 10px; } .detail-facts strong { font-size: 12.5px; } .detail-facts { gap: 8px; } .cp-hero { margin-top: 12px; } .detail-jump a { padding: 5px 11px; font-size: 12px; } }
  .detail-crumbs { margin-bottom: 10px; font-family: var(--sans); font-size: 13px; font-weight: 700; }
  .detail-crumbs a { color: var(--secondary-text); text-decoration: none; }
  .detail-crumbs a:hover { color: var(--navy); text-decoration: underline; }
  .detail-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
  .detail-facts div { padding: 10px 12px; border-radius: 12px; background: rgba(27,42,91,0.05); border: 1px solid var(--surface-border); }
  .detail-facts span { display: block; font-family: var(--sans); font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-text); }
  .detail-facts strong { display: block; margin-top: 2px; font-family: var(--sans); font-size: 14px; color: var(--navy); line-height: 1.3; }
  .detail-jump { display: flex; gap: 8px; flex-wrap: wrap; }
  .detail-jump a { padding: 6px 14px; border-radius: 999px; background: var(--card-bg); border: 1px solid var(--card-border); font-family: var(--sans); font-size: 12.5px; font-weight: 700; color: var(--navy); text-decoration: none; }
  .detail-jump a:hover { border-color: #c9a227; background: #fff7e0; }
  .detail-jump a.is-free { border-color: rgba(31,157,99,0.5); background: #f1fbf5; color: #16724a; }
  .detail-jump a.is-ls { border-color: #c9a227; background: linear-gradient(135deg, #f6dd8a, #e2bf4a); color: #2b2100; }
  .detail-jump a.is-order { background: var(--navy); border-color: var(--navy); color: #fff; }
  .lang-card { padding: 16px 18px !important; }
  .lang-card .lang-flex { margin: 0; }
  .flow-card { border: 2px solid #e2c766 !important; background: linear-gradient(135deg, #fffaf0, #fdf1cf) !important; }
  .flow-card h2 { margin: 6px 0 12px; font-size: 21px; color: var(--navy); }
  .flow-steps { margin-bottom: 14px !important; }
  .flow-steps li.is-ls { background: #fff; border: 2px solid #c9a227; box-shadow: 0 8px 20px rgba(201,162,39,0.25); }
  @media (max-width: 860px) {
    .detail-layout .build-order-panel { order: 1; position: static; }
    .detail-layout #detail-main { order: 2; }
    .detail-facts { grid-template-columns: 1fr 1fr; }
  }
  .feature-card-legacy {
    padding: 20px; border-radius: 16px; background: var(--card-bg); border: 1px solid var(--card-border);
    box-shadow: var(--shadow-soft); text-align: left;
  }
  .feature-card h3 { margin: 0 0 6px; color: var(--navy); font-size: 14.5px; font-family: var(--brand-display); }
  .feature-card p { margin: 0; font-family: var(--sans); color: var(--muted-text); font-size: 12.5px; line-height: 1.55; }

  /* ---------- Expert panel ---------- */
  .expert-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; margin-top: 12px; }
  .expert-card {
    padding: 24px; border-radius: 18px; background: var(--card-bg); border: 1px solid var(--card-border);
    box-shadow: var(--shadow-soft); text-align: center;
  }
  .expert-avatar { width: 64px; height: 64px; font-size: 22px; margin: 0 auto 14px; }
  .expert-card h3 { margin: 0 0 4px; color: var(--navy); font-family: var(--brand-display); font-size: 16px; }
  .expert-title { font-family: var(--sans); color: var(--muted-text); font-size: 12.5px; font-weight: 700; margin-bottom: 12px; }
  .expert-stats { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
  .expert-bio { font-family: var(--sans); color: var(--ink); font-size: 13px; line-height: 1.6; margin: 0; text-align: left; }

  .search-bar {
    display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
    background: var(--surface-bg); border: 1px solid var(--surface-border);
    border-radius: 18px; padding: 14px; box-shadow: var(--shadow);
    max-width: 780px; margin: 0 auto;
  }
  .search-bar input[type="search"] { flex: 1 1 260px; font-family: var(--sans); }
  .search-bar--pro { max-width: 820px; padding: 10px; gap: 10px; flex-wrap: nowrap; border-radius: 999px; background: #fff; border: 1.5px solid #e2d3c0; box-shadow: 0 16px 40px rgba(27,42,91,0.16), 0 2px 6px rgba(27,42,91,0.06); transition: box-shadow .2s ease, border-color .2s ease; }
  .search-bar--pro:focus-within { border-color: #c9a227; box-shadow: 0 18px 44px rgba(201,162,39,0.28), 0 0 0 4px rgba(201,162,39,0.18); }
  .search-field { position: relative; flex: 1 1 auto; display: flex; align-items: center; gap: 12px; min-width: 0; padding: 0 8px 0 18px; cursor: text; }
  .search-glass { position: relative; flex: none; width: 18px; height: 18px; border: 2.5px solid #8a6a0c; border-radius: 50%; box-sizing: border-box; }
  .search-glass::after { content: ""; position: absolute; width: 8px; height: 2.5px; background: #8a6a0c; border-radius: 2px; right: -7px; bottom: -3px; transform: rotate(45deg); transform-origin: left center; }
  .search-bar--pro .search-field input[type="search"] { flex: 1 1 auto; min-width: 0; min-height: 0; height: 44px; padding: 0; border: none !important; border-radius: 0; background: transparent !important; box-shadow: none !important; font-size: 16px; color: var(--ink); outline: none; }
  .search-bar--pro input[type="search"]::-webkit-search-cancel-button { display: none; }
  .search-kbd { flex: none; padding: 2px 9px; border-radius: 7px; border: 1px solid #d9cdb8; border-bottom-width: 2px; background: #faf6ee; color: #7a6a4a; font-family: var(--sans); font-size: 12px; font-weight: 700; }
  .search-clear { flex: none; width: 28px; height: 28px; padding: 0 !important; border-radius: 50% !important; border: none !important; background: rgba(27,42,91,0.09) !important; color: var(--navy) !important; font-size: 19px; line-height: 1; box-shadow: none !important; cursor: pointer; }
  .search-go { flex: none; border-radius: 999px !important; padding-left: 26px !important; padding-right: 26px !important; min-height: 46px; }
  .search-suggest { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; max-width: 820px; margin: 14px auto 0; font-family: var(--sans); font-size: 12.5px; color: var(--muted-text); }
  .search-suggest button { padding: 5px 13px; border-radius: 999px; border: 1px solid var(--card-border); background: var(--card-bg); color: var(--navy); font-family: var(--sans); font-size: 12.5px; font-weight: 700; box-shadow: none; cursor: pointer; }
  .search-suggest button:hover { border-color: #c9a227; background: #fff7e0; }
  @media (max-width: 560px) {
    .search-bar--pro { border-radius: 22px; flex-wrap: wrap; padding: 8px; }
    .search-bar--pro .search-field { padding-left: 12px; }
    .search-kbd { display: none; }
    .search-go { width: 100%; }
    #search-custom-button { width: 100%; }
  }

  /* ---------- Category picker ---------- */
  .section-heading { text-align: center; margin: 44px 0 20px; }
  .section-heading h2 { color: var(--navy); margin: 0 0 6px; }
  .section-heading p { font-family: var(--sans); color: var(--muted-text); font-size: 14.5px; margin: 0; }

  .filter-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; justify-content: center; }
  .filter-row select { min-width: 160px; font-family: var(--sans); }

  /* ---------- Results / cards ---------- */
  .results-meta { margin: 30px 0 14px; color: var(--muted-text); font-size: 13.5px; font-family: var(--sans); display: flex; justify-content: space-between; align-items: center; }
  .project-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; margin-top: 8px; }
  .project-card {
    background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 16px;
    padding: 20px; box-shadow: var(--shadow-soft); display: flex; flex-direction: column; gap: 12px;
    text-decoration: none; color: inherit; position: relative;
  }
  .project-card:hover { box-shadow: var(--shadow); transform: translateY(-3px); transition: 160ms ease; border-color: var(--gold); }
  .project-card .card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
  .project-card h3 { margin: 0; font-size: 17.5px; color: var(--navy); line-height: 1.3; }
  .project-card p.summary { margin: 0; font-family: var(--sans); color: var(--muted-text); font-size: 13.5px; line-height: 1.55; flex: 1; }
  .chip-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
  .chip {
    display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px;
    font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: 0.01em;
    background: var(--card-bg, #fff); border: 1px solid var(--gold);
    color: var(--secondary-text);
  }
  .difficulty-dot { display: inline-flex; align-items: center; gap: 5px; font-family: var(--sans); font-size: 11px; font-weight: 700; text-transform: capitalize; color: var(--muted-text); }
  .difficulty-dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
  .difficulty-dot.beginner { color: #156f49; }
  .difficulty-dot.intermediate { color: #8b4f18; }
  .difficulty-dot.advanced { color: #94304b; }
  .difficulty-dot.capstone { color: #5b3aa8; }
  .price-row { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--sans); font-size: 12.5px; color: var(--muted-text); padding-top: 10px; border-top: 1px dashed var(--surface-border); }
  .price-row strong { color: var(--navy); font-size: 16px; font-family: var(--brand-display); }
  .pricing-note {
    display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; margin-top: 10px; padding: 7px 12px;
    border-radius: 999px; border: 1px dashed var(--gold); background: transparent; cursor: pointer;
    font-family: var(--sans); font-size: 12px; font-weight: 700; color: var(--navy);
  }
  .pricing-note:hover { background: rgba(201,162,39,0.12); }
  .pricing-popup-backdrop {
    position: fixed; inset: 0; background: rgba(17,28,59,0.45); display: flex;
    justify-content: center; z-index: 200; padding: 20px; overflow-y: auto;
  }
  .pricing-popup {
    max-width: 420px; width: 100%; background: var(--card-bg); border-radius: 18px; padding: 26px;
    box-shadow: var(--shadow); margin: auto;
  }
  .pricing-popup h3 { margin: 0 0 10px; font-family: var(--brand-display); color: var(--navy); font-size: 18px; }
  .pricing-popup p { margin: 0 0 18px; font-family: var(--sans); color: var(--muted-text); font-size: 14px; line-height: 1.6; }
  .pricing-popup .nib-ui-button { width: 100%; }
  .express-pricing-table { width: 100%; border-collapse: collapse; margin-bottom: 14px; font-family: var(--sans); font-size: 13.5px; }
  .express-pricing-table td { padding: 8px 0; border-bottom: 1px solid var(--surface-border); }
  .express-pricing-table td:first-child { color: var(--ink); }
  .express-pricing-table td:last-child { text-align: right; font-weight: 700; color: var(--navy); }
  .express-pricing-table tr:last-child td { border-bottom: none; color: #156f49; font-weight: 700; }
  .pricing-popup-footnote { font-size: 11.5px !important; line-height: 1.5 !important; color: var(--muted-text) !important; }

  /* ---------- Skill-enhancement welcome popup ---------- */
  .pricing-popup-backdrop[data-welcome] { background: rgba(12,18,38,0.58); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
  @keyframes welcomePopupIn {
    from { opacity: 0; transform: translateY(10px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }
  .welcome-popup {
    max-width: 500px; position: relative; padding: 0; overflow: hidden;
    border-radius: 22px; animation: welcomePopupIn 260ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  .welcome-popup-top-accent { height: 6px; width: 100%; background: var(--nib-ui-gloss-accent); }
  .welcome-popup-body { padding: 30px 32px 32px; }
  .welcome-popup-close {
    position: absolute; top: 18px; right: 18px; width: 30px; height: 30px; border-radius: 50%;
    border: 1px solid var(--card-border); background: var(--card-bg); color: var(--muted-text);
    font-size: 15px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: color 140ms ease, border-color 140ms ease, transform 140ms ease;
  }
  .welcome-popup-close:hover { color: var(--navy); border-color: var(--gold); transform: rotate(90deg); }
  .welcome-popup-eyebrow {
    display: inline-block; font-family: var(--sans); font-weight: 800; letter-spacing: 0.07em;
    color: var(--gold); font-size: 11px; text-transform: uppercase; margin-bottom: 10px;
  }
  .welcome-popup h3 {
    margin: 0 0 12px; padding-right: 26px; font-size: 21px; line-height: 1.25;
  }
  .welcome-popup > .welcome-popup-body > p {
    margin: 0 0 22px; font-family: var(--sans); color: var(--muted-text); font-size: 14px; line-height: 1.65;
  }
  .welcome-popup-list {
    list-style: none; margin: 0 0 24px; padding: 18px; display: flex; flex-direction: column; gap: 14px;
    background: color-mix(in srgb, var(--card-bg) 60%, var(--page-bg-mid) 40%);
    border: 1px solid var(--surface-border); border-radius: 16px;
  }
  .welcome-popup-list li { display: flex; align-items: flex-start; gap: 12px; }
  .welcome-popup-list-check {
    flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; background: #156f49; margin-top: 7px;
  }
  .welcome-popup-list span:last-child {
    font-family: var(--sans); color: var(--ink); font-size: 13.5px; line-height: 1.55;
  }
  .welcome-popup-actions { display: flex; flex-direction: column; gap: 12px; align-items: center; }
  .welcome-popup-actions .nib-ui-button { width: 100%; }
  .welcome-popup-secondary-link {
    text-align: center; font-family: var(--sans); font-size: 12.5px; font-weight: 600; color: var(--muted-text);
    text-decoration: none; background: none; border: none; cursor: pointer; padding: 2px 0; transition: color 140ms ease;
  }
  .welcome-popup-secondary-link:hover { color: var(--navy); text-decoration: underline; }
  /* ---------- Welcome popup, split view: a brand panel and the offer ---------- */
  .welcome-popup.welcome-split { max-width: 880px; width: 100%; display: grid; grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr); padding: 0; border-radius: 26px; box-shadow: 0 50px 100px rgba(3, 8, 22, 0.5); }
  .welcome-split .welcome-popup-close { top: 16px; right: 16px; z-index: 3; }
  .welcome-aside { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 14px; padding: 34px 30px 28px; color: #fff; background:
    radial-gradient(420px 260px at 100% 0%, rgba(155, 27, 46, 0.6), transparent 62%),
    radial-gradient(360px 240px at 0% 100%, rgba(201, 162, 39, 0.24), transparent 60%),
    linear-gradient(160deg, #071331, #10204c 60%, #1b2a5b); }
  .welcome-aside::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px); background-size: 40px 40px; -webkit-mask-image: radial-gradient(ellipse at 30% 25%, #000 20%, transparent 78%); mask-image: radial-gradient(ellipse at 30% 25%, #000 20%, transparent 78%); }
  .welcome-aside > * { position: relative; }
  .welcome-split .welcome-aside .welcome-popup-eyebrow { color: #e8c75a; margin: 0; }
  .welcome-split .welcome-aside h3 { margin: 0; padding: 0; color: #fff; font-size: clamp(1.45rem, 2.4vw, 1.85rem); line-height: 1.12; }
  .welcome-split .welcome-aside .welcome-aside-lead { margin: 0; font-size: 13.5px; line-height: 1.6; color: rgba(255, 255, 255, 0.82); }
  .welcome-trio { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 10px; }
  .welcome-trio li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.16); }
  .welcome-trio span { display: grid; gap: 1px; font-family: var(--sans); }
  .welcome-trio b { font-size: 13px; color: #fff; }
  .welcome-trio small { font-size: 11.5px; color: rgba(255, 255, 255, 0.68); }
  .welcome-sheet { flex: none; width: 26px; height: 34px; border-radius: 5px; background: linear-gradient(#1b2a5b 0 0) 6px 8px / 14px 2px no-repeat, linear-gradient(#c9a227 0 0) 6px 14px / 14px 2px no-repeat, linear-gradient(#cfd5e6 0 0) 6px 20px / 9px 2px no-repeat, #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.28); }
  .welcome-sheet--red { background: linear-gradient(#9b1b2e 0 0) 6px 8px / 14px 2px no-repeat, linear-gradient(#c9a227 0 0) 6px 14px / 14px 2px no-repeat, linear-gradient(#cfd5e6 0 0) 6px 20px / 9px 2px no-repeat, #fff; }
  .welcome-sheet--navy { background: linear-gradient(#e8c75a 0 0) 6px 8px / 14px 2px no-repeat, linear-gradient(rgba(255,255,255,0.5) 0 0) 6px 14px / 14px 2px no-repeat, linear-gradient(rgba(255,255,255,0.35) 0 0) 6px 20px / 9px 2px no-repeat, #10204c; }
  .welcome-split .welcome-aside .welcome-aside-note { margin: auto 0 0; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.18); font-size: 11.5px; line-height: 1.55; color: rgba(255, 255, 255, 0.64); }
  .welcome-main { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 30px 32px 26px; background: var(--card-bg); }
  .welcome-main::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 5px; background: linear-gradient(90deg, var(--gold), var(--red), var(--navy)); }
  .welcome-main-kicker { font-family: var(--sans); font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--red); padding-right: 40px; }
  .welcome-split .welcome-popup-list { margin: 0; padding: 0; background: none; border: 0; gap: 10px; }
  .welcome-split .welcome-popup-list li { align-items: flex-start; gap: 12px; padding: 12px 14px; border-radius: 14px; background: color-mix(in srgb, var(--card-bg) 55%, var(--page-bg-mid) 45%); border: 1px solid var(--surface-border); }
  .welcome-num { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-family: var(--sans); font-size: 12.5px; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--primary-start, #1b2a5b), var(--red)); }
  .welcome-split .welcome-popup-list span:last-child { font-family: var(--sans); font-size: 13.5px; line-height: 1.5; color: var(--ink); }
  .welcome-split .welcome-popup-list strong { color: var(--navy); }
  .welcome-split .welcome-offer { margin: 0; }
  .welcome-split .welcome-popup-actions { gap: 8px; margin-top: 2px; }
  .welcome-split .welcome-popup-actions .nib-ui-button { min-height: 46px; }
  @media (max-width: 760px) {
    .welcome-popup.welcome-split { grid-template-columns: 1fr; max-width: 460px; }
    .welcome-aside { padding: 24px 22px 18px; gap: 10px; }
    .welcome-trio, .welcome-aside-note, .welcome-split .welcome-aside .welcome-aside-lead { display: none; }
    .welcome-main { padding: 20px 22px 22px; }
  }
  @media (max-height: 820px) and (min-width: 761px) {
    .welcome-aside { padding: 26px 26px 22px; gap: 11px; }
    .welcome-main { padding: 24px 28px 20px; gap: 11px; }
    .welcome-split .welcome-popup-list li { padding: 9px 12px; }
  }
  .home-notice { margin: 14px auto 0; max-width: 640px; padding: 9px 16px; border-radius: 12px; background: rgba(201,162,39,0.16); border: 1px solid rgba(201,162,39,0.4); color: #6b4310; font-family: var(--sans); font-size: 14px; font-weight: 700; text-align: center; }
  .site-banner { background: rgba(201,162,39,0.22); color: #6b4310; text-align: center; padding: 9px 16px; font-family: var(--sans); font-size: 14px; font-weight: 700; border-bottom: 1px solid rgba(201,162,39,0.4); }
  .empty-state { text-align: center; padding: 60px 20px; color: var(--muted-text); font-family: var(--sans); }
  .empty-state p { margin: 0 0 16px; font-size: 14.5px; }

  /* ---------- How it works ---------- */
  .steps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
  .step-card { padding: 20px; border-radius: 16px; background: var(--card-bg); border: 1px solid var(--card-border); box-shadow: var(--shadow-soft); }
  .step-card .step-number {
    width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: var(--nib-ui-gloss-accent); color: var(--accent-text, #fff); font-weight: 800; font-family: var(--brand-display); font-size: 14px; margin-bottom: 12px;
  }
  .step-card h3 { font-size: 15px; color: var(--navy); margin: 0 0 6px; }
  .step-card p { font-family: var(--sans); color: var(--muted-text); font-size: 13px; line-height: 1.55; margin: 0; }

  /* ---------- Detail page ---------- */
  .detail-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: 24px; align-items: start; }
  @media (max-width: 860px) { .detail-layout { grid-template-columns: 1fr; } }
  .detail-card, .order-card, .form-card {
    background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 18px;
    padding: 28px; box-shadow: var(--shadow-soft);
  }
  .detail-card .eyebrow { font-family: var(--sans); font-size: 12px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; }
  .detail-card h1 { color: var(--navy); margin: 0 0 10px; font-size: var(--nib-ui-heading-2-size, 24px); line-height: 1.25; }
  .detail-card .summary { font-family: var(--sans); color: var(--muted-text); font-size: 15.5px; margin-bottom: 18px; line-height: 1.6; }
  .detail-card .description { font-family: var(--sans); line-height: 1.75; color: var(--ink); font-size: 14.5px; }
  .terms-card .description { margin-bottom: 22px; }
  .terms-list { margin: 10px 0 0; padding-left: 22px; }
  .terms-list li { margin-bottom: 6px; }
  .detail-card .description-heading { font-family: var(--brand-display); color: var(--navy); font-size: 15px; margin: 0 0 8px; }

  /* ---------- Sample documentation ---------- */
  .samples-heading { max-width: 720px; margin-left: auto; margin-right: auto; }
  .samples-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; margin-top: 24px; }
  .sample-card {
    background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 16px;
    padding: 20px; box-shadow: var(--shadow-soft); display: flex; flex-direction: column; gap: 12px;
  }
  .sample-card-top { display: flex; align-items: center; gap: 10px; }
  .sample-card h3 { margin: 0; font-size: 17px; color: var(--navy); line-height: 1.3; }
  .sample-card p.summary { margin: 0; font-family: var(--sans); color: var(--muted-text); font-size: 13.5px; line-height: 1.55; }
  .sample-card-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
  .sample-card-actions .nib-ui-button { flex: 1 1 auto; }
  .sample-card-link { font-size: 12.5px; text-align: right; }
  .sample-docs-panel { margin-top: 20px; }
  .sample-docs-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 16px; }
  .sample-docs-head h2 { font-family: var(--brand-display); color: var(--navy); font-size: 16px; margin: 0 0 4px; }
  .sample-docs-head p { font-family: var(--sans); color: var(--muted-text); font-size: 13px; line-height: 1.5; margin: 0; }
  .sample-docs-actions { display: flex; gap: 10px; flex-wrap: wrap; }

  /* ---------- Build-your-order panel ---------- */
  .build-order-panel { display: flex; flex-direction: column; gap: 0; position: sticky; top: 90px; overflow: hidden; }
  .build-order-panel .panel-head { padding: 18px 20px; background: var(--nib-ui-gloss-brand); color: var(--primary-text, #fff); }
  .build-order-panel .panel-head h2 { font-size: 16px; margin: 0 0 2px; color: inherit; }
  .build-order-panel .panel-head p { font-family: var(--sans); font-size: 12px; margin: 0; opacity: 0.86; }
  .build-order-panel .panel-body { padding: 16px 20px; display: flex; flex-direction: column; gap: 4px; }
  .build-option {
    display: flex; align-items: center; gap: 12px; padding: 13px 4px; border-bottom: 1px solid var(--surface-border);
    cursor: pointer; font-family: var(--sans);
  }
  .build-option:last-of-type { border-bottom: none; }
  .build-option input[type="checkbox"] { width: 18px; height: 18px; min-height: auto; flex: 0 0 auto; accent-color: var(--navy); }
  .build-option .option-text { flex: 1; display: flex; flex-direction: column; }
  .build-option .option-text strong { font-size: 13.5px; color: var(--navy); font-weight: 700; }
  .build-option .option-text small { font-size: 11.5px; color: var(--muted-text); }
  .build-option .option-price { font-size: 14px; font-weight: 700; color: var(--navy); font-family: var(--brand-display); white-space: nowrap; }
  .build-order-total {
    display: flex; justify-content: space-between; align-items: baseline; padding: 14px 20px;
    background: var(--surface-bg-strong, var(--surface-bg)); border-top: 1px solid var(--surface-border);
    font-family: var(--sans); font-size: 13px; color: var(--muted-text);
  }
  .build-order-total strong { font-family: var(--brand-display); font-size: 21px; color: var(--navy); }
  .build-order-actions { padding: 16px 20px 20px; }
  .build-order-actions button { width: 100%; }
  .trust-mini { padding: 0 20px 18px; display: flex; flex-direction: column; gap: 8px; }
  .trust-mini-item { display: flex; align-items: center; gap: 8px; font-family: var(--sans); font-size: 12px; color: var(--muted-text); }
  .trust-mini-item::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #156f49; flex: 0 0 auto; }
  .build-order-footnote { margin: 0; padding: 0 20px 18px; font-family: var(--sans); font-size: 11.5px; line-height: 1.55; color: var(--muted-text); }
  .build-order-footnote em { color: var(--navy); font-style: normal; font-weight: 700; }

  /* ---------- Cart / Orders tables ---------- */
  table.cart-table, table.orders-table { width: 100%; border-collapse: collapse; font-family: var(--sans); }
  table.cart-table th, table.cart-table td, table.orders-table th, table.orders-table td {
    text-align: left; padding: 13px 10px; border-bottom: 1px solid var(--table-line, var(--surface-border)); font-size: 13.5px;
  }
  table.cart-table th, table.orders-table th { color: var(--table-head-text, var(--navy)); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; }
  .cart-summary { display: flex; justify-content: flex-end; gap: 24px; align-items: baseline; padding: 8px 10px; font-family: var(--sans); font-size: 13.5px; color: var(--muted-text); }
  .cart-summary strong { color: var(--navy); font-size: 15px; font-family: var(--sans); font-weight: 700; }
  .cart-summary--discount strong { color: #156f49; }
  .cart-summary--total { padding-top: 14px; border-top: 1px dashed var(--surface-border); margin-top: 4px; font-size: 15px; }
  .cart-summary--total strong { color: var(--navy); font-size: 22px; font-family: var(--brand-display); }

  /* ---------- Order customization (cart page) ---------- */
  .customize-order-card h2 { font-family: var(--brand-display); color: var(--navy); font-size: 17px; margin: 0 0 4px; }
  .customize-order-card > .muted-link { display: block; margin-bottom: 16px; }
  .customize-block { padding: 14px 16px; border-radius: 12px; border: 1px dashed var(--surface-border); background: var(--surface-bg-strong, var(--surface-bg)); margin-bottom: 14px; }
  .customize-block h3 { font-family: var(--brand-display); color: var(--navy); font-size: 14.5px; margin: 0 0 12px; }
  .customize-block .form-field:last-child { margin-bottom: 0; }
  .radio-row { display: flex; gap: 18px; flex-wrap: wrap; }
  .radio-row label { display: inline-flex; align-items: center; gap: 6px; font-family: var(--sans); font-size: 13.5px; color: var(--ink); font-weight: 400; }
  .radio-row input[type="radio"] { width: auto; min-height: auto; }
  .customize-footnote { margin: 10px 0 0; font-family: var(--sans); font-size: 11.5px; line-height: 1.55; color: var(--muted-text); }
  .customize-footnote em { color: var(--navy); font-style: normal; font-weight: 700; }

  /* ---------- NIBVEDA Express (cart page) ---------- */
  .express-delivery-card h2 { font-family: var(--brand-display); color: var(--navy); font-size: 17px; margin: 0 0 4px; }
  .express-delivery-card > .muted-link { display: block; margin-bottom: 14px; }
  .express-delivery-card input[type="datetime-local"] { font-family: var(--sans); }
  .express-fee-note { margin: 0 0 12px; font-family: var(--sans); font-size: 13px; color: var(--navy); }
  .express-fee-note strong { color: #8b4f18; }
  .inline-controls { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 4px; margin-bottom: 12px; }
  .cart-summary--rush strong { color: #8b4f18; }

  /* ---------- Coupon box (cart page) ---------- */
  .coupon-box { margin: 6px 10px 10px; padding: 14px 16px; border-radius: 12px; border: 1px dashed var(--surface-border); background: var(--surface-bg-strong, var(--surface-bg)); }
  .coupon-box-fields { display: flex; gap: 10px; flex-wrap: wrap; }
  .coupon-box-fields input[type="text"] { flex: 1 1 220px; font-family: var(--sans); }
  .coupon-box-upload-label { display: block; font-family: var(--sans); font-size: 11.5px; font-weight: 700; color: var(--secondary-text); margin: 12px 0 5px; }
  .coupon-box input[type="file"] { width: 100%; font-family: var(--sans); font-size: 12.5px; }
  .coupon-box--applied { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; border-style: solid; border-color: var(--gold); }
  .coupon-box--applied strong { color: var(--navy); font-family: var(--brand-display); }
  .custom-idea-banner {
    display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 20px;
    padding: 18px 22px; border-radius: 16px; background: var(--surface-bg-strong, var(--surface-bg));
    border: 1px dashed var(--gold);
  }
  .custom-idea-banner .text strong { display: block; color: var(--navy); font-family: var(--brand-display); font-size: 15.5px; margin-bottom: 3px; }
  .custom-idea-banner .text span { font-family: var(--sans); font-size: 12.5px; color: var(--muted-text); }

  /* ---------- FAQ accordion ---------- */
  .faq-list { display: flex; flex-direction: column; gap: 10px; }
  .faq-item {
    padding: 4px 20px; border-radius: 14px; background: var(--card-bg);
    border: 1px solid var(--card-border); box-shadow: var(--shadow-soft);
  }
  .faq-item summary {
    list-style: none; cursor: pointer; padding: 16px 0; font-family: var(--brand-display);
    color: var(--navy); font-size: 14.5px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  }
  .faq-item summary::-webkit-details-marker { display: none; }
  .faq-item summary::after { content: "+"; font-size: 18px; color: var(--gold); flex-shrink: 0; }
  .faq-item[open] summary::after { content: "\2212"; }
  .faq-item p { margin: 0 0 16px; font-family: var(--sans); color: var(--muted-text); font-size: 13.5px; line-height: 1.6; }
  .faq-item p a { color: var(--navy); font-weight: 700; }

  /* ---------- Status pills ---------- */
  .status-pill {
    display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 999px; font-size: 11px; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.04em; font-family: var(--sans);
  }
  .status-pill.placed, .status-pill.payment_pending, .status-pill.pending, .status-pill.unassigned { background: rgba(201,162,39,0.18); color: #8b4f18; }
  .status-pill.paid, .status-pill.assigned { background: rgba(155,193,255,0.28); color: #1b2a5b; }
  .status-pill.in_progress { background: rgba(155,193,255,0.28); color: #1b2a5b; }
  .status-pill.delivered, .status-pill.completed { background: rgba(60,180,120,0.2); color: #156f49; }
  .status-pill.cancelled { background: rgba(220,80,90,0.18); color: #94304b; }
  .quote-pill { background: rgba(220,80,90,0.14); color: #94304b; }

  .order-summary-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--surface-border); font-family: var(--sans); }
  .order-summary-row:last-child { border-bottom: none; }
  /* Save is pinned to the card's top-right corner so it is always the same place and size; the badges wrap in the space beside it. */
  .project-card { position: relative; }
  .project-card .card-top { flex-wrap: wrap; align-items: center; gap: 6px 8px; min-height: 36px; padding-right: 84px; }
  .project-card .card-top .save-toggle { position: absolute; top: 14px; right: 14px; margin: 0; }
  .project-card .card-top .free-badge, .project-card .card-top .difficulty-dot { flex: 0 0 auto; white-space: nowrap; }
  /* Save for later: a quiet text toggle on each project card and on the project page. */
  .save-toggle { margin-left: auto; flex: 0 0 auto; white-space: nowrap; line-height: 1.3; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--surface-border); background: var(--card-bg); box-shadow: none; color: var(--navy); font-family: var(--sans); font-size: 11.5px; font-weight: 700; cursor: pointer; }
  .save-toggle:hover { border-color: var(--gold); }
  .save-toggle.is-saved { background: color-mix(in srgb, #c9a227 18%, var(--card-bg)); border-color: #c9a227; color: #6b4b00; }
  .save-toggle:disabled { opacity: .6; cursor: wait; }
  .save-toggle::before { content: ""; display: inline-block; width: 8px; height: 11px; margin-right: 6px; vertical-align: -1px; background: currentColor; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 72%, 0 100%); opacity: .5; }
  .save-toggle.is-saved::before { opacity: 1; }
  /* Deciding on a delivery: the reader's end card, the Learning Space status strip, and the My Orders pointer. */
  .lp-decision { width: 100%; box-sizing: border-box; margin: 14px 0 6px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--lp-ctl-line, rgba(127,127,127,0.4)); background: var(--lp-ctl, transparent); text-align: left; }
  .lp-decision:empty { display: none; }
  .lp-decision h3 { margin: 0 0 4px; font-size: 16px; color: var(--lp-strong); }
  .lp-decision p { margin: 0 0 10px; font-size: 13.5px; line-height: 1.5; }
  .lp-decision.is-open { border: 2px solid #c9a227; }
  .lp-decision.is-final { border-color: #1f9d63; background: color-mix(in srgb, #1f9d63 14%, transparent); }
  .lp-decision-buttons { display: flex; gap: 10px; flex-wrap: wrap; }
  .lp-decision-panel { display: grid; gap: 10px; margin-top: 12px; padding: 12px 14px; border-radius: 12px; border: 1px dashed var(--lp-ctl-line, rgba(127,127,127,0.5)); font-size: 13.5px; line-height: 1.45; }
  .lp-decision-panel[hidden] { display: none; }
  .lp-decision-panel textarea { width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--lp-ctl-line, rgba(127,127,127,0.5)); background: rgba(255,255,255,0.92); color: #1b2a5b; font: inherit; font-size: 14px; }
  .lp-final-warning { padding: 10px 12px; border-radius: 10px; background: #fff3d6; border: 1px solid #f0a23a; color: #6b3d00; }
  .lp-check { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; }
  .lp-check input { margin-top: 3px; }
  .lp-decision-msg { margin-top: 8px; font-size: 13px; font-weight: 700; color: #b3261e; }
  .lp-decision-msg:empty { display: none; }
  .lp-end-rate[hidden] { display: none; }
  .rv-reply { margin-top: 8px; padding: 8px 12px; border-radius: 10px; border-left: 3px solid #c9a227; background: rgba(201,162,39,0.1); font-size: 13.5px; line-height: 1.45; }
  /* The path every delivery follows: Read, Decide, Quiz, Download. Same strip in the reader and on the document cards. */
  .ls-steps, .lp-steps { display: flex; gap: 4px; margin: 10px 0 4px; padding: 0; list-style: none; }
  .ls-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
  .ls-steps li, .lp-steps li { flex: 1 1 0; display: flex; align-items: center; gap: 6px; min-width: 0; padding: 5px 7px; border-radius: 999px; border: 1px solid var(--surface-border, rgba(127,127,127,0.35)); font-family: var(--sans, inherit); font-size: 11.5px; font-weight: 700; opacity: 0.6; }
  .ls-steps li i, .lp-steps li i { flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-style: normal; font-size: 10.5px; background: rgba(127,127,127,0.22); }
  .ls-steps li span, .lp-steps li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ls-steps li.done, .lp-steps li.done { opacity: 1; border-color: #1f9d63; }
  .ls-steps li.done i, .lp-steps li.done i { background: #1f9d63; color: #fff; }
  .ls-steps li.now, .lp-steps li.now { opacity: 1; border-color: #c9a227; background: #fff7e0; color: #4a3a0c; }
  .ls-steps li.now i, .lp-steps li.now i { background: #c9a227; color: #fff; }
  .ls-steps.is-paused li.now, .lp-steps.is-paused li.now { border-color: #d9700f; background: #fdeeda; }
  .ls-steps.is-paused li.now i, .lp-steps.is-paused li.now i { background: #d9700f; }
  .lp-steps { justify-content: center; margin: 0 0 14px; }
  .lp-steps li { flex: 0 1 auto; padding: 6px 12px; font-size: 12.5px; color: inherit; }
  .lp-steps li.now { color: #4a3a0c; }
  .ls-decision { margin-top: 8px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--surface-border); border-left: 4px solid var(--surface-border); font-family: var(--sans); font-size: 12.5px; line-height: 1.45; }
  .ls-decision.is-open { border-left-color: #c9a227; background: #fff7e0; color: #4a3a0c; }
  .ls-decision.is-open a { color: #1b2a5b; font-weight: 800; }
  .ls-decision.is-final { border-left-color: #1f9d63; background: color-mix(in srgb, #1f9d63 10%, transparent); }
  .order-decision { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 4px 0 10px; padding: 10px 14px; border-radius: 12px; border: 1px solid #ecd28a; border-left: 4px solid #c9a227; background: #fff7e0; color: #4a3a0c; font-family: var(--sans); font-size: 13.5px; line-height: 1.45; }
  /* Find your project (quiz) */
  .find-link { display: inline-block; margin: 10px auto 2px; color: var(--navy); font-family: var(--sans); font-size: 14px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
  .find-link:hover { color: #8a6a0c; }
  .fp-quiz { display: grid; gap: 18px; }
  .fp-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
  .fp-chip { padding: 7px 14px; border-radius: 999px; border: 1px solid var(--surface-border); background: var(--card-bg); box-shadow: none; color: var(--navy); font-family: var(--sans); font-size: 13px; font-weight: 700; cursor: pointer; }
  .fp-chip:hover { border-color: var(--gold); }
  .fp-chip.on { background: var(--navy); border-color: var(--navy); color: #fff; }
  .fp-reset { justify-self: start; padding: 0; border: none; background: none; box-shadow: none; color: var(--navy); font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }
  .fp-count { margin: 4px 2px 8px; font-size: 13px; }
  .fp-result { position: relative; }
  .fp-result.is-top { border: 2px solid #c9a227; }
  .fp-result h3 { margin: 0; font-size: 18px; color: var(--navy); }
  .fp-result h3 a { color: inherit; text-decoration: none; }
  .fp-best { position: absolute; top: -11px; right: 16px; padding: 2px 12px; border-radius: 999px; background: #c9a227; color: #1b2a5b; font-family: var(--sans); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
  .fp-actions { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
  /* Project page: what learners say, and related projects */
  .rv-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; font-family: var(--sans); }
  .rv-avg { font-family: var(--brand-display); font-size: 34px; font-weight: 800; color: var(--navy); line-height: 1; }
  .rv-stars { color: #c9a227; font-size: 20px; letter-spacing: 2px; }
  .rv-dims { display: grid; gap: 8px; margin: 14px 0; font-family: var(--sans); font-size: 13.5px; }
  .rv-dim { display: grid; grid-template-columns: 130px 1fr 34px; align-items: center; gap: 10px; }
  .rv-bar { height: 8px; border-radius: 999px; background: var(--surface-border); overflow: hidden; }
  .rv-bar span { display: block; height: 100%; border-radius: 999px; background: #1f9d63; }
  .rv-comments { display: grid; gap: 10px; }
  .rv-comment { margin: 0; padding: 10px 14px; border-left: 4px solid #c9a227; border-radius: 0 10px 10px 0; background: color-mix(in srgb, #c9a227 8%, var(--card-bg)); font-family: var(--sans); }
  .rv-comment blockquote { margin: 0 0 4px; font-size: 14px; line-height: 1.5; color: var(--ink); }
  .rv-comment figcaption { font-size: 12px; color: var(--muted-text); }
  .rel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
  .rel-tile { display: grid; gap: 4px; align-content: start; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--surface-border); background: var(--card-bg); color: var(--ink); text-decoration: none; font-family: var(--sans); font-size: 13.5px; line-height: 1.35; }
  .rel-tile:hover { border-color: var(--gold); box-shadow: var(--shadow-soft); }
  .rel-tile strong { color: var(--navy); }
  .rel-tile .chip { justify-self: start; }
  /* My Orders: order again, what is not ordered yet, running-late note */
  .order-actions { display: grid; gap: 10px; margin-top: 8px; padding-top: 12px; border-top: 1px dashed var(--surface-border); font-family: var(--sans); }
  .order-more { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 13.5px; }
  .order-again { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 13px; }
  .order-timeline-hint.is-late { padding: 8px 12px; border-radius: 10px; background: #fff3d6; border: 1px solid #f0a23a; color: #6b3d00; }
  .dash-order.is-late { border-left: 4px solid #e07b1f; padding-left: 12px; }
  .dash-tag { display: inline-block; margin-left: 6px; padding: 1px 9px; border-radius: 999px; background: #1f9d63; color: #fff; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; vertical-align: 1px; }
  @media (max-width: 640px) { .rv-dim { grid-template-columns: 100px 1fr 30px; } }
  /* Refer and earn */
  .rf-link-row { display: flex; gap: 10px; flex-wrap: wrap; }
  .rf-link-row input { flex: 1 1 280px; min-width: 0; padding: 10px 14px; border-radius: 999px; border: 1px solid var(--surface-border); background: color-mix(in srgb, var(--page-bg-mid) 50%, var(--card-bg) 50%); color: var(--ink); font: inherit; font-family: var(--sans); font-size: 14px; }
  .rf-share { display: flex; gap: 10px; flex-wrap: wrap; }
  .rf-steps { margin: 0; padding-left: 20px; display: grid; gap: 10px; font-family: var(--sans); font-size: 14px; line-height: 1.5; }
  .rf-list { list-style: none; margin: 0; padding: 0; font-family: var(--sans); font-size: 14px; }
  .rf-list li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px dashed var(--surface-border); }
  .rf-list li:first-child { border-top: none; padding-top: 2px; }
  .rf-coupon.is-spent { opacity: .6; }
  .rf-coupon-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .04em; }
  /* The notification bell in the header: an "Alerts" button with an unread badge, and a panel of recent updates. */
  .header-bell { position: relative; display: inline-flex; flex-direction: column; align-items: flex-end; z-index: 4; }
  .header-bell summary::-webkit-details-marker { display: none; }
  /* Top-right of the header, beside the avatar: a plain text link and a drawn bell -- no button look. */
  [data-auth-only][hidden] { display: none !important; }
  /* The top-right corner of the header: its own spot above the avatar, apart from the row of nav buttons. */
  header > nav { position: relative; }
  .header-utility { position: absolute; top: 8px; right: 20px; display: flex; align-items: center; gap: 14px; z-index: 5; }
  .has-header-utility .header-right-cluster { padding-top: 34px; }
  .header-plain-link { display: inline-flex; align-items: center; margin-right: 0; padding: 4px 2px; border-bottom: 2px solid transparent; color: var(--navy); font-family: var(--sans); font-size: 14px; font-weight: 700; text-decoration: none; white-space: nowrap; }
  .header-plain-link:hover { border-bottom-color: var(--gold); }
  .header-bell-summary { list-style: none; cursor: pointer; position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; color: var(--navy); }
  .header-bell-summary:hover, .header-bell[open] .header-bell-summary { background: color-mix(in srgb, var(--navy) 9%, transparent); }
  .header-bell-summary:focus-visible { outline: 3px solid rgba(201, 162, 39, 0.35); }
  .bell-icon { position: relative; display: block; width: 20px; height: 22px; }
  .bell-icon::before { content: ""; position: absolute; left: 3px; top: 2px; width: 14px; height: 12px; border-radius: 7px 7px 2px 2px; background: currentColor; }
  .bell-icon::after { content: ""; position: absolute; left: 7px; top: 17px; width: 6px; height: 4px; border-radius: 0 0 6px 6px; background: currentColor; }
  .bell-rim { position: absolute; left: 1px; top: 13px; width: 18px; height: 3px; border-radius: 2px; background: currentColor; }
  .header-bell-count { position: absolute; top: 1px; right: -1px; margin: 0; min-width: 17px; height: 17px; padding: 0 4px; box-sizing: border-box; font-size: 10px; }
  a.header-account-menu-item.header-account-menu-item--refer { display: none; }
  @media (max-width: 640px) {
    .header-refer-link { display: none; }
    a.header-account-menu-item.header-account-menu-item--refer { display: flex; }
    /* On a phone the corner holds just the bell, and the panel spans the header (the nav is its anchor). */
    .header-utility { display: contents; }
    .header-bell-summary { position: absolute; top: 6px; right: 12px; }
    .has-header-utility .header-right-cluster { padding-top: 0; }
  }
  .header-bell-panel { position: absolute; top: calc(100% + 10px); right: 0; width: 340px; max-width: calc(100vw - 24px); max-height: min(70vh, 520px); display: flex; flex-direction: column; border-radius: 18px; border: 1px solid var(--theme-menu-border); background: var(--theme-menu-bg); box-shadow: var(--theme-menu-shadow); backdrop-filter: blur(14px); z-index: 42; overflow: hidden; font-family: var(--sans); }
  .header-bell-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--theme-menu-border); color: var(--navy); font-size: 14px; }
  .header-bell-readall { padding: 0; border: none; background: none; box-shadow: none; color: var(--navy); font: inherit; font-size: 12.5px; font-weight: 700; text-decoration: underline; cursor: pointer; }
  /* On a phone the button sits mid-header, so the panel spans the header instead (the sticky header is its anchor). */
  @media (max-width: 640px) {
    .header-bell { position: static; }
    .header-bell-panel { position: absolute; top: 100%; left: 12px; right: 12px; width: auto; max-width: none; margin-top: 4px; }
  }
  .header-bell-list { overflow-y: auto; display: grid; }
  .header-bell-empty { margin: 0; padding: 18px 16px; color: var(--muted-text); font-size: 13px; line-height: 1.5; }
  .header-bell-item { display: grid; gap: 3px; padding: 11px 14px 11px 16px; border-bottom: 1px solid var(--theme-menu-border); border-left: 4px solid transparent; color: var(--ink); text-decoration: none; font-size: 13.5px; line-height: 1.4; }
  .header-bell-item:last-child { border-bottom: none; }
  .header-bell-item:hover { background: color-mix(in srgb, var(--navy) 6%, transparent); }
  .header-bell-item.is-unread { border-left-color: #c9a227; background: color-mix(in srgb, #c9a227 10%, transparent); }
  .header-bell-item.is-unread .header-bell-title { font-weight: 800; }
  .header-bell-title { color: var(--navy); font-weight: 600; }
  .header-bell-body { color: var(--muted-text); font-size: 12.5px; }
  .header-bell-time { color: var(--muted-text); font-size: 11.5px; }
  /* My Orders: search box and sort on one row, status chips (with counts) below, result line under them. */
  .mo-toolbar { margin-bottom: 18px; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--surface-border); background: var(--card-bg); font-family: var(--sans); }
  .mo-toolbar[hidden] { display: none; }
  .mo-toolbar-row { display: flex; gap: 10px; flex-wrap: wrap; }
  .mo-toolbar-row input[type="search"] { flex: 1 1 260px; min-width: 0; padding: 10px 14px; border-radius: 999px; border: 1px solid var(--surface-border); background: var(--card-bg); color: var(--ink); font: inherit; font-size: 14px; }
  .mo-toolbar-row select { flex: 0 0 auto; padding: 10px 14px; border-radius: 999px; border: 1px solid var(--surface-border); background: var(--card-bg); color: var(--ink); font: inherit; font-size: 14px; }
  .mo-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
  .mo-chips .ls-chip:disabled { opacity: .45; cursor: not-allowed; }
  .mo-chip-count { display: inline-block; min-width: 18px; margin-left: 4px; padding: 0 6px; border-radius: 999px; background: color-mix(in srgb, currentColor 14%, transparent); font-size: 11.5px; text-align: center; }
  .mo-result { min-height: 0; margin-top: 10px; font-size: 13px; }
  .mo-result:empty { display: none; }
  .mo-result .link-button, .mo-main .empty-state .link-button { padding: 0; border: none; border-radius: 0; background: none; box-shadow: none; color: var(--navy); font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }
  /* Customer dashboard: an action list with a coloured edge per kind of item, order/learning rows with a progress bar. */
  .dash-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-family: var(--sans); }
  .dash-item { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--surface-border); border-left: 5px solid var(--dash-tone, var(--surface-border)); background: color-mix(in srgb, var(--dash-tone, transparent) 7%, var(--card-bg)); font-size: 14px; line-height: 1.45; }
  .dash-item-text { min-width: 0; }
  .dash-item.tone-pending { --dash-tone: #c9a227; }
  .dash-item.tone-review { --dash-tone: #8e44ad; }
  .dash-item.tone-quote { --dash-tone: #e07b1f; }
  .dash-item.tone-cart { --dash-tone: #2f6fdb; }
  .dash-item.tone-reply { --dash-tone: #0f8b8d; }
  .dash-item.tone-learn { --dash-tone: #1f9d63; }
  .dash-item.tone-saved { --dash-tone: #c9a227; }
  .dash-item-actions { display: flex; gap: 8px; flex-wrap: wrap; flex: 0 0 auto; }
  .dash-clear { display: grid; gap: 4px; padding: 6px 0; font-family: var(--sans); font-size: 14px; }
  .dash-order { padding: 14px 0; border-top: 1px dashed var(--surface-border); font-family: var(--sans); }
  .dash-order:first-of-type { border-top: none; padding-top: 4px; }
  .dash-order-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 10px; }
  .dash-order-stage { margin-top: 8px; font-size: 13.5px; }
  .dash-bar { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
  .dash-bar span { height: 8px; border-radius: 999px; background: var(--surface-border); }
  .dash-bar span.is-done { background: #1f9d63; }
  .dash-bar span.is-current { background: #e07b1f; animation: npa-attn-soft 1.6s ease-in-out infinite; }
  .dash-progress { height: 8px; border-radius: 999px; background: var(--surface-border); overflow: hidden; }
  .dash-progress span { display: block; height: 100%; border-radius: 999px; background: #1f9d63; }
  .dash-cart-line { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--sans); font-size: 15px; }
  .dash-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-family: var(--sans); font-size: 14px; }
  @media (max-width: 640px) { .dash-item { flex-direction: column; align-items: flex-start; } }
  /* Order progress: a dot per step on a connecting line -- filled green when done, a pulsing amber ring for the step in progress, hollow for what's still ahead. Vertical on narrow screens. */
  .order-timeline { list-style: none; margin: 4px 0 0; padding: 14px 0 6px; display: flex; gap: 0; font-family: var(--sans); }
  .order-timeline li { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 0 4px; }
  .order-timeline li::before { content: ""; position: absolute; top: 8px; left: -50%; width: 100%; height: 3px; background: var(--surface-border); z-index: 0; }
  .order-timeline li:first-child::before { display: none; }
  .order-timeline li.is-done::before, .order-timeline li.is-current::before { background: #1f9d63; }
  .order-timeline .ot-dot { position: relative; z-index: 1; width: 19px; height: 19px; border-radius: 50%; border: 3px solid var(--surface-border); background: var(--card-bg); box-sizing: border-box; }
  .order-timeline li.is-done .ot-dot { background: #1f9d63; border-color: #1f9d63; }
  .order-timeline li.is-current .ot-dot { border-color: #e07b1f; background: #fff3d6; animation: npa-attn-soft 1.6s ease-in-out infinite; }
  .order-timeline .ot-label { font-size: 12.5px; font-weight: 700; color: var(--navy); line-height: 1.25; }
  .order-timeline li.is-todo .ot-label { color: var(--secondary-text); font-weight: 600; }
  .order-timeline .ot-date { font-size: 11.5px; color: var(--secondary-text); }
  .order-timeline-hint { margin: 2px 0 6px; font-size: 13px; text-align: center; }
  @media (max-width: 640px) {
    .order-timeline { flex-direction: column; gap: 10px; padding-left: 6px; }
    .order-timeline li { flex-direction: row; align-items: center; text-align: left; gap: 10px; padding: 0; }
    .order-timeline li::before { top: -10px; left: 8px; width: 3px; height: 10px; }
    .order-timeline-hint { text-align: left; }
    /* The order header's two columns collided on phones; stack them. */
    .mo-main .order-summary-row { flex-direction: column; align-items: stretch; }
    .mo-main .order-summary-row > div:first-child strong { white-space: normal; }
    .mo-main .order-summary-row > div:last-child { text-align: left !important; }
  }
  .learn-progress-bar { display: inline-block; width: 160px; height: 8px; border-radius: 999px; background: var(--surface-border); overflow: hidden; }
  .learn-unit-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 10px; font-family: var(--sans); }
  .learn-unit-head h2 { margin: 0; font-size: 18px; color: var(--navy); word-break: break-all; }
  .learn-unit-foot { display: flex; gap: 10px; justify-content: space-between; padding: 6px 0 20px; }
  .learn-tabs { display: flex; gap: 4px; margin-bottom: 10px; }
  .learn-tab { flex: 1; padding: 7px 4px; border-radius: 9px; border: 1px solid var(--surface-border); background: none; box-shadow: none; font-weight: 700; font-size: 13px; color: var(--navy); cursor: pointer; }
  .learn-tab.on { background: var(--navy); color: #fff; }
  .learn-steps { margin-top: 10px; display: grid; gap: 6px; }
  .learn-step { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; cursor: pointer; }
  .learn-rate-box { margin-bottom: 12px; padding: 10px 12px; border: 1px solid var(--surface-border); border-radius: 12px; font-size: 13.5px; }
  .learn-print-block { display: none; }
  @media print { .learn-shell, header, footer, .site-banner { display: none !important; } .learn-print-block { display: block !important; padding: 40px; font-size: 18px; } }

  /* ---------- Learning Space (cards) ---------- */
  .app-shell > header { z-index: 60; }
  .ls-hero { text-align: center; padding: 34px 16px 14px; font-family: var(--sans); }
  .ls-eyebrow { display: inline-block; padding: 4px 14px; border-radius: 999px; background: rgba(201,162,39,0.18); color: #6b4310; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
  .ls-hero h1 { font-family: var(--brand-display); color: var(--navy); font-size: 40px; margin: 12px 0 8px; }
  .ls-hero p { max-width: 620px; margin: 0 auto; color: var(--muted-text); line-height: 1.6; }
  .ls-stats { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 18px; }
  .ls-stat { min-width: 118px; padding: 12px 18px; border-radius: 16px; background: var(--card-bg, #fff); border: 1px solid var(--surface-border); }
  .ls-stat strong { display: block; font-family: var(--brand-display); font-size: 26px; color: var(--navy); line-height: 1.1; }
  .ls-stat span { font-size: 12px; color: var(--muted-text); font-weight: 700; }
  .ls-filters { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 14px 0 20px; }
  .ls-chip { padding: 7px 16px; border-radius: 999px; border: 1px solid var(--surface-border); background: var(--card-bg, #fff); box-shadow: none; color: var(--navy); font-weight: 700; font-size: 13px; cursor: pointer; }
  .ls-chip.on { background: var(--navy); color: #fff; border-color: var(--navy); }
  .ls-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 22px; padding-bottom: 20px; }
  .ls-card { display: flex; flex-direction: column; background: var(--card-bg, #fff); border: 1px solid var(--surface-border); border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-soft); transition: transform .18s, box-shadow .18s; font-family: var(--sans); }
  .ls-card:hover { transform: translateY(-4px); box-shadow: 0 18px 44px rgba(27,42,91,0.18); }
  .ls-cover { position: relative; aspect-ratio: 16 / 10; display: flex; align-items: center; justify-content: center; overflow: hidden; background: linear-gradient(135deg, #1b2a5b, #3b4a86); }
  .tone-paper .ls-cover { background: linear-gradient(135deg, #4a2a5b, #7a3f8f); }
  .tone-code .ls-cover { background: linear-gradient(135deg, #0f3d3e, #17767a); }
  .ls-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; pointer-events: none; }
  .ls-cover-fallback { font-family: var(--brand-display); font-size: 44px; font-weight: 800; color: rgba(255,255,255,0.28); letter-spacing: .04em; text-transform: uppercase; }
  .ls-cover.has-image .ls-cover-fallback { display: none; }
  .ls-ribbon { position: absolute; left: 12px; top: 12px; z-index: 2; padding: 3px 11px; border-radius: 999px; background: rgba(0,0,0,0.6); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
  .ls-body { padding: 14px 16px 6px; flex: 1; }
  .ls-body h3 { margin: 8px 0 4px; color: var(--navy); font-size: 17px; line-height: 1.3; }
  .ls-meta { font-size: 12.5px; color: var(--muted-text); word-break: break-all; }
  .ls-progress { margin-top: 8px; font-size: 12.5px; font-weight: 700; color: var(--navy); }
  .ls-diy { margin-top: 8px; padding: 6px 10px; border-radius: 10px; background: rgba(201,162,39,0.13); color: #6b4310; font-size: 12px; line-height: 1.4; }
  .ls-pill { display: inline-block; padding: 2px 11px; border-radius: 999px; background: rgba(27,42,91,0.1); color: var(--navy); font-size: 11px; font-weight: 800; }
  .ls-pill.ok { background: rgba(31,157,99,0.15); color: #16724a; }
  .ls-pill.warn { background: rgba(224,123,31,0.16); color: #a4560f; }
  .ls-actions { display: grid; gap: 8px; padding: 12px 16px 16px; }
  .ls-start { display: block; text-align: center; padding: 15px 18px; border-radius: 14px; background: linear-gradient(135deg, var(--navy), #3b4a86); color: #fff; font-weight: 800; font-size: 17px; letter-spacing: .02em; text-decoration: none; box-shadow: 0 8px 20px rgba(27,42,91,0.28); }
  .ls-start:hover { filter: brightness(1.12); }
  .ls-download { padding: 9px; border-radius: 12px; border: 1px solid var(--navy); background: none; box-shadow: none; color: var(--navy); font-weight: 700; cursor: pointer; }
  .ls-lock { text-align: center; font-size: 12px; color: var(--muted-text); }
  .ls-card.is-cancelled { opacity: .7; }
  .ls-docs { margin: 4px 16px 0; padding: 4px 0; border-top: 1px dashed var(--surface-border); max-height: 230px; overflow: auto; }
  .ls-doc { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--surface-border); font-size: 13px; }
  .ls-doc:last-child { border-bottom: none; }
  .ls-doc-main { min-width: 0; display: flex; flex-direction: column; }
  .ls-doc-main strong { color: var(--navy); font-size: 13px; }
  .ls-doc-main .diy-tag { align-self: flex-start; margin: 2px 0 0; }
  .ls-doc-actions { display: flex; gap: 6px; flex: none; }
  .ls-read { padding: 6px 12px; border-radius: 999px; background: var(--navy); color: #fff; font-size: 12.5px; font-weight: 700; text-decoration: none; }
  .ls-dl { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--navy); background: none; box-shadow: none; color: var(--navy); font-size: 12.5px; font-weight: 700; cursor: pointer; }
  .ls-start.is-off { background: var(--surface-border); color: var(--muted-text); box-shadow: none; cursor: default; }
  /* folders */
  .ls-folders { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 30px 24px; padding-top: 14px; }
  .ls-folder { --fc1: #3b4a86; --fc2: #1b2a5b; --fcd: #16224d; position: relative; display: block; width: 100%; padding: 0; border: none; background: none; box-shadow: none; text-align: left; cursor: pointer; font-family: var(--sans); transition: transform .18s; }
  .ls-folder.tone-paper { --fc1: #7a3f8f; --fc2: #4a2a5b; --fcd: #3d2150; }
  .ls-folder.tone-code { --fc1: #17767a; --fc2: #0f3d3e; --fcd: #0b3031; }
  .ls-folder.tone-none { --fc1: #8b93ab; --fc2: #5b6784; --fcd: #4d5872; }
  .ls-folder:hover { transform: translateY(-5px); }
  .ls-folder:hover .ls-paper.p1 { transform: translateY(-14px) rotate(-1deg); }
  .ls-folder:hover .ls-paper.p2 { transform: translateY(-9px) rotate(2deg); }
  .ls-folder:focus-visible { outline: 3px solid #c9a227; outline-offset: 4px; border-radius: 18px; }
  .ls-folder-tab { display: flex; align-items: center; gap: 4px; width: 46%; min-width: 96px; height: 24px; margin-left: 4px; padding: 0 12px; box-sizing: border-box; border-radius: 14px 14px 0 0; background: var(--fcd); }
  .ls-folder-back { position: relative; display: block; height: 232px; border-radius: 0 20px 22px 22px; background: linear-gradient(160deg, var(--fc1), var(--fc2)); box-shadow: 0 14px 34px rgba(27,42,91,0.28); }
  .ls-paper { position: absolute; z-index: 1; left: 16px; right: 16px; top: 16px; height: 120px; border-radius: 8px; background: #fff; overflow: hidden; transition: transform .2s; box-shadow: 0 2px 8px rgba(0,0,0,0.18); }
  .ls-paper.p2 { left: 26px; right: 26px; top: 12px; background: #e6e9f3; transform: rotate(2.4deg); }
  .ls-paper.p1 { transform: rotate(-1.4deg); }
  .ls-paper img { width: 100%; height: 100%; object-fit: cover; object-position: top; pointer-events: none; }
  .ls-folder-front { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; min-height: 60%; max-height: 92%; box-sizing: border-box; padding: 12px 16px; border-radius: 12px 12px 20px 20px; background: linear-gradient(180deg, var(--fc1), var(--fc2)); box-shadow: 0 -6px 14px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.35); color: #fff; display: flex; flex-direction: column; gap: 3px; }
  .ls-folder-front .ls-pill { align-self: flex-start; background: rgba(255,255,255,0.9); color: #1b2a5b; }
  .ls-folder-front .ls-pill.ok { background: #d6f3e5; color: #16724a; }
  .ls-folder-front .ls-pill.warn { background: #ffe9d1; color: #a4560f; }
  .ls-folder-title { font-size: 15.5px; line-height: 1.25; color: #fff; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-shadow: 0 1px 2px rgba(0,0,0,0.3); }
  .ls-folder-meta { font-size: 11.5px; color: rgba(255,255,255,0.86); }
  .ls-folder.is-cancelled { opacity: .6; }
  .ls-stripe { display: inline-block; width: 22px; height: 7px; border-radius: 4px; background: #4f8cff; }
  .ls-stripe.s-guide { background: #4f8cff; }
  .ls-stripe.s-paper { background: #c77dff; }
  .ls-stripe.s-code { background: #2dd4bf; }
  .ls-stripe.s-report { background: #f5c542; }
  .ls-doc-card { border-top: 6px solid var(--kc, #4f8cff); }
  .ls-doc-card.k-guide { --kc: #4f8cff; --kt: #1d4fc4; --kbg: rgba(79,140,255,0.14); }
  .ls-doc-card.k-paper { --kc: #c77dff; --kt: #7a2fb8; --kbg: rgba(199,125,255,0.16); }
  .ls-doc-card.k-code { --kc: #2dd4bf; --kt: #0d6b61; --kbg: rgba(45,212,191,0.16); }
  .ls-doc-card.k-report { --kc: #f5c542; --kt: #8a6300; --kbg: rgba(245,197,66,0.2); }
  .ls-doc-card { box-shadow: var(--shadow-soft), inset 0 0 0 0 transparent; }
  .ls-doc-card .ls-cover { border-bottom: 3px solid var(--kc); }
  .ls-kind-chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px 2px 8px; border-radius: 999px; background: var(--kbg); color: var(--kt); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
  .ls-kind-chip .ls-stripe { width: 14px; height: 6px; background: var(--kc); }
  .ls-legend-in { justify-content: flex-start; margin: 0 0 14px; }
  .ls-marks { margin: 10px 0 4px; padding: 9px 11px; border-radius: 12px; background: rgba(27,42,91,0.05); border: 1px solid var(--surface-border); font-size: 12.5px; }
  .ls-marks-top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
  .ls-marks-top strong { color: var(--navy); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
  .ls-marks-score { font-weight: 800; color: var(--navy); }
  .ls-marks-bar { position: relative; height: 8px; margin: 7px 0 5px; border-radius: 999px; background: rgba(27,42,91,0.12); }
  .ls-marks-bar i { display: block; height: 100%; border-radius: 999px; background: #e07b1f; }
  .ls-marks-bar b { position: absolute; top: -3px; width: 2px; height: 14px; background: var(--navy); border-radius: 1px; }
  .ls-marks-note { color: var(--muted-text); font-size: 11.5px; }
  .ls-marks.is-pass { background: rgba(31,157,99,0.1); border-color: rgba(31,157,99,0.35); }
  .ls-marks.is-pass .ls-marks-bar i { background: #1f9d63; }
  .ls-marks.is-pass .ls-marks-note { color: #16724a; font-weight: 700; }
  .ls-marks.is-fail { background: rgba(224,123,31,0.1); border-color: rgba(224,123,31,0.35); }
  .ls-marks.is-fail .ls-marks-note { color: #a4560f; font-weight: 700; }
  .ls-marks.is-none .ls-marks-top span { color: var(--muted-text); font-weight: 700; }
  .ls-folder-marks { align-self: flex-start; margin-top: 2px; padding: 1px 9px; border-radius: 999px; background: rgba(255,255,255,0.2); border: 1px solid rgba(255,255,255,0.45); color: #fff; font-size: 11.5px; font-weight: 800; }
  .ls-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; justify-content: center; align-items: center; margin: -4px 0 14px; font-family: var(--sans); font-size: 12.5px; color: var(--muted-text); }
  .ls-legend span { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
  .ls-legend em { font-style: normal; opacity: .8; }
  .ls-open-stripes { display: inline-flex; gap: 4px; vertical-align: middle; margin-left: 6px; }
  .ls-open-stripes .ls-stripe { box-shadow: 0 0 0 1px rgba(255,255,255,0.5); }
  /* inside a folder */
  .ls-crumbs { display: flex; align-items: center; gap: 10px; padding: 18px 0 10px; font-family: var(--sans); color: var(--muted-text); }
  .ls-crumbs strong { color: var(--navy); }
  .ls-crumb-back { padding: 6px 14px; border-radius: 999px; border: 1px solid var(--navy); background: none; box-shadow: none; color: var(--navy); font-weight: 700; cursor: pointer; }
  .ls-open-head { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; padding: 20px 22px; margin-bottom: 22px; border-radius: 22px; background: linear-gradient(135deg, #1b2a5b, #3b4a86); color: #fff; font-family: var(--sans); }
  .ls-open-head.tone-paper { background: linear-gradient(135deg, #4a2a5b, #7a3f8f); }
  .ls-open-head.tone-code { background: linear-gradient(135deg, #0f3d3e, #17767a); }
  .ls-open-head.tone-none { background: linear-gradient(135deg, #5b6784, #8b93ab); }
  .ls-open-icon { width: 64px; height: 50px; position: relative; flex: none; }
  .ls-open-icon::before { content: ""; position: absolute; left: 0; top: 0; width: 26px; height: 10px; border-radius: 6px 6px 0 0; background: rgba(255,255,255,0.55); }
  .ls-open-icon span { position: absolute; left: 0; right: 0; top: 8px; bottom: 0; border-radius: 4px 10px 10px 10px; background: rgba(255,255,255,0.85); }
  .ls-open-text { flex: 1; min-width: 220px; }
  .ls-open-text h2 { margin: 6px 0 4px; font-family: var(--brand-display); font-size: 26px; color: #fff; }
  .ls-open-text .ls-meta, .ls-open-text .ls-progress { color: rgba(255,255,255,0.88); }
  .ls-open-text .ls-pill { background: rgba(255,255,255,0.9); color: #1b2a5b; }
  .ls-open-text .ls-pill.ok { background: #d6f3e5; color: #16724a; }
  .ls-open-text .ls-pill.warn { background: #ffe9d1; color: #a4560f; }
  .ls-open-start { min-width: 220px; background: #c9a227 !important; color: #1b2a5b !important; box-shadow: 0 8px 20px rgba(0,0,0,0.25) !important; }
  .ls-docgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; padding-bottom: 30px; }
  .ls-doc-card { position: relative; display: flex; flex-direction: column; background: var(--card-bg, #fff); border: 1px solid var(--surface-border); border-radius: 18px; overflow: hidden; box-shadow: var(--shadow-soft); font-family: var(--sans); animation: ls-pop .28s ease backwards; }
  .ls-doc-card .ls-cover-fallback { font-size: 26px; }
  .ls-doc-card .ls-body h3 { font-size: 15px; }
  .ls-actions-row { display: grid; grid-template-columns: 1fr; gap: 8px; padding: 10px 14px 14px; }
  .ls-read-big { display: block; text-align: center; padding: 11px 12px; border-radius: 12px; background: linear-gradient(135deg, var(--navy), #3b4a86); color: #fff; font-size: 15px; font-weight: 800; line-height: 1.2; text-decoration: none; }
  .ls-doc-card .ls-body { flex: 1; }
  .ls-actions-row .ls-download { width: 100%; padding: 9px 12px; font-size: 14px; line-height: 1.2; }
  .ls-hint { margin: 0 14px 14px; font-size: 12.5px; font-weight: 800; color: #a4560f; text-align: center; }
  /* Messages that need attention: a highlighted, gently blinking notice (steady when motion is reduced). */
  .ls-alert, .lp-alert { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 12px; border-radius: 12px; border: 1.5px solid #f0a23a; background: #fff3d6; color: #8a4a00 !important; font-weight: 800; line-height: 1.3; animation: npa-attn 1.3s ease-in-out infinite; }
  .ls-alert::before, .lp-alert::before { content: "!"; flex: none; width: 20px; height: 20px; border-radius: 50%; background: #e07b1f; color: #fff; font-size: 13px; font-weight: 900; line-height: 20px; text-align: center; }
  .lp-title .lp-alert-tag { align-self: flex-start; width: fit-content; max-width: 100%; margin-top: 2px; padding: 1px 10px; border-radius: 999px; background: #f5c542; color: #3d2a00; font-size: 12px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; animation: npa-attn-tag 1.3s ease-in-out infinite; }
  .ls-marks.is-fail { animation: npa-attn-soft 1.6s ease-in-out infinite; }
  .ls-quiz-go { background: linear-gradient(135deg, #c9a227, #e0b93a); color: #2b2100; animation: npa-attn-btn 1.3s ease-in-out infinite; }
  #lp-quiz-start { animation: npa-attn-btn 1.3s ease-in-out infinite; }
  @keyframes npa-attn-btn { 0%, 100% { box-shadow: 0 0 0 0 rgba(201,162,39,0.75); } 50% { box-shadow: 0 0 0 8px rgba(201,162,39,0); } }
  @keyframes npa-attn { 0%, 100% { background: #fff3d6; box-shadow: 0 0 0 0 rgba(224,123,31,0.55); } 50% { background: #ffd98a; box-shadow: 0 0 0 6px rgba(224,123,31,0); } }
  @keyframes npa-attn-tag { 0%, 100% { background: #f5c542; box-shadow: 0 0 0 0 rgba(245,197,66,0.7); } 50% { background: #ffdf7a; box-shadow: 0 0 0 5px rgba(245,197,66,0); } }
  @keyframes npa-attn-soft { 0%, 100% { box-shadow: 0 0 0 0 rgba(224,123,31,0.4); } 50% { box-shadow: 0 0 0 5px rgba(224,123,31,0); } }
  @media (prefers-reduced-motion: reduce) { .ls-alert, .lp-alert, .lp-title .lp-alert-tag, .ls-marks.is-fail, #lp-quiz-start, .ls-quiz-go { animation: none; } }
  .ls-download:disabled, .ls-dl:disabled { opacity: .45; cursor: not-allowed; }
  .lp-hint { font-size: 12px; }
  /* opening a folder */
  .ls-folders { perspective: 1200px; }
  .ls-folder-back, .ls-folder-front, .ls-paper, .ls-folder { transition: transform .62s cubic-bezier(.3,.7,.2,1), opacity .5s, box-shadow .4s; }
  .ls-folder-front { transform-origin: left bottom; }
  .ls-folders.is-opening .ls-folder:not(.opening) { opacity: 0; transform: scale(.9); pointer-events: none; }
  .ls-folders.is-opening .ls-folder.opening { transform: translateY(-6px) scale(1.14); z-index: 5; }
  .ls-folder.opening .ls-folder-front { transform: rotateY(-118deg); box-shadow: 0 0 0 rgba(0,0,0,0); }
  .ls-folder.opening .ls-paper.p1 { transform: translateY(-46px) rotate(-3deg); }
  .ls-folder.opening .ls-paper.p2 { transform: translateY(-30px) rotate(5deg); }
  .ls-folder.opening .ls-folder-back { box-shadow: 0 26px 60px rgba(27,42,91,0.45); }
  #ls-open.unfold .ls-open-head { animation: ls-unfold .5s cubic-bezier(.2,.8,.2,1) backwards; transform-origin: top center; }
  #ls-open.unfold .ls-crumbs { animation: ls-fade .4s backwards; }
  @keyframes ls-unfold { from { opacity: 0; transform: perspective(900px) rotateX(-40deg) scaleY(.6); } to { opacity: 1; transform: none; } }
  @keyframes ls-fade { from { opacity: 0; } to { opacity: 1; } }
  @keyframes ls-pop { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
  .ls-empty { grid-column: 1 / -1; text-align: center; padding: 50px 16px; font-family: var(--sans); }
  .ls-empty-mark { font-size: 46px; color: var(--gold, #c9a227); }
  .ls-section-title { font-family: var(--brand-display); color: var(--navy); margin: 26px 0 10px; }
  .ls-reports { display: grid; gap: 8px; margin-bottom: 30px; }
  .ls-report { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border: 1px solid var(--surface-border); border-radius: 14px; background: var(--card-bg, #fff); font-family: var(--sans); }
  .ls-report .ls-download { padding: 8px 16px; }

  /* ---------- The full-screen reader ---------- */
  body.bare { margin: 0; background: #0d1222; overflow: hidden; }
  .bare-main { padding: 0; margin: 0; max-width: none; }
  .lp { display: flex; flex-direction: column; height: 100vh; height: 100dvh; background: var(--lp-bg); color: var(--lp-text); font-family: var(--sans); }
  .lp [hidden] { display: none !important; }
  .lp-top { display: flex; align-items: center; gap: 16px; padding: 9px 16px; background: var(--lp-bar); border-bottom: 1px solid var(--lp-line); }
  .lp-top { position: relative; }
  .lp-back { color: var(--lp-accent); font-weight: 800; text-decoration: none; white-space: nowrap; font-size: 14px; }
  .lp-title { flex: 1; min-width: 0; display: flex; flex-direction: column; }
  .lp-title strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; color: var(--lp-strong); }
  .lp-title span { font-size: 12px; color: var(--lp-accent); }
  .lp-tools { display: flex; gap: 6px; flex-wrap: wrap; }
  .lp .lp-tools button { padding: 6px 13px; border-radius: 999px; border: 1px solid var(--lp-ctl-line); background: var(--lp-ctl); box-shadow: none; color: var(--lp-text); font-size: 13px; font-weight: 700; cursor: pointer; }
  .lp .lp-tools button:hover, .lp .lp-tools button.on { background: var(--lp-hover); border-color: var(--lp-accent); }
  .lp .lp-tools button.off { opacity: .55; }
  .lp-body { flex: 1; display: flex; min-height: 0; position: relative; }
  .lp-rail { width: 176px; flex: none; overflow: auto; padding: 8px 10px 16px; background: var(--lp-rail); border-right: 1px solid var(--lp-line); }
  .lp-rail.hidden { display: none; }
  .lp-rail-unit { margin: 12px 0 6px; font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--lp-muted); word-break: break-all; }
  .lp .lp-thumb { position: relative; display: block; width: 100%; min-height: 84px; margin: 0 0 8px; padding: 0; border: 2px solid transparent; border-radius: 6px; background: var(--lp-thumb); box-shadow: none; overflow: hidden; cursor: pointer; }
  .lp-thumb img { display: none; width: 100%; height: auto; pointer-events: none; }
  .lp-thumb.ready img { display: block; }
  .lp-thumb .n { position: absolute; left: 4px; top: 4px; z-index: 1; padding: 1px 6px; border-radius: 4px; background: rgba(0,0,0,0.65); color: #fff; font-size: 10px; font-weight: 700; }
  .lp .lp-thumb.current { border-color: var(--lp-accent); }
  .lp-stage { flex: 1; position: relative; min-width: 0; display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse at center, var(--lp-stage-a) 0%, var(--lp-stage-b) 75%); }
  .lp-canvas { width: 100%; height: 100%; box-sizing: border-box; padding: 14px 70px 40px; display: flex; align-items: center; justify-content: center; }
  .lp-canvas img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; background: #fff; box-shadow: var(--lp-shadow); filter: var(--lp-img-filter); user-select: none; -webkit-user-drag: none; pointer-events: none; }
  .lp-index { position: absolute; inset: 0; z-index: 3; overflow: auto; display: flex; justify-content: center; align-items: flex-start; padding: 22px 70px 46px; }
  .lp-index-paper { width: min(640px, 100%); box-sizing: border-box; margin: auto 0; padding: 40px 46px 34px; border-radius: 6px; background: #fdfbf5; color: #1e2436; box-shadow: var(--lp-shadow); font-family: Georgia, 'Times New Roman', serif; animation: lp-index-in .35s ease-out; }
  @keyframes lp-index-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
  .lp-index-kicker { font-family: var(--sans); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #8a6a0c; }
  .lp-index-paper h2 { margin: 6px 0 2px; font-size: 34px; letter-spacing: .01em; color: #1b2a5b; }
  .lp-index-file { padding-bottom: 14px; margin-bottom: 12px; border-bottom: 2px solid #1b2a5b; font-family: var(--sans); font-size: 12.5px; color: #5b6784; word-break: break-all; }
  .lp-index-paper ol { list-style: none; margin: 0; padding: 0; }
  .lp .lp-index-row { display: flex; align-items: baseline; gap: 8px; width: 100%; padding: 8px 6px; margin: 0; border: none; border-radius: 6px; background: none; box-shadow: none; color: #1e2436; font-family: Georgia, 'Times New Roman', serif; font-size: 16px; text-align: left; cursor: pointer; }
  .lp .lp-index-row:hover { background: rgba(201,162,39,0.16); }
  .lp-index-row .no { flex: none; min-width: 22px; color: #8a6a0c; font-family: var(--sans); font-size: 12px; font-weight: 800; }
  .lp-index-row .t { flex: 0 1 auto; min-width: 0; font-weight: 600; }
  .lp-index-row .dots { flex: 1 1 24px; min-width: 16px; border-bottom: 2px dotted #b9b19a; transform: translateY(-4px); }
  .lp-index-row .pg { flex: none; font-family: var(--sans); font-weight: 800; color: #1b2a5b; }
  .lp-index-row.seen .t::after { content: " \2713"; color: #1f9d63; font-weight: 800; }
  .lp-index-foot { margin: 16px 0 12px; font-family: var(--sans); font-size: 12.5px; color: #5b6784; }
  .lp .lp-index-start { border-radius: 999px; padding: 9px 20px; font-weight: 800; }
  .lp .lp-index-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 100%; min-height: 84px; margin: 0 0 8px; padding: 0; border: 2px solid transparent; border-radius: 6px; background: #fdfbf5; color: #1b2a5b; box-shadow: none; cursor: pointer; font-family: Georgia, serif; }
  .lp-index-tile strong { font-size: 17px; }
  .lp-index-tile small { font-family: var(--sans); font-size: 10.5px; color: #8a6a0c; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
  .lp .lp-index-tile.current { border-color: var(--lp-accent); }
  .lp-turn { position: absolute; inset: 0; z-index: 4; overflow: hidden; pointer-events: none; perspective: 2400px; perspective-origin: 30% 50%; }
  .lp-turn-sheet, .lp-turn-cast { position: absolute; }
  .lp-turn-sheet { transform-origin: left center; will-change: transform; }
  .lp-turn-cast { background: linear-gradient(90deg, rgba(0,0,0,0.5), rgba(0,0,0,0) 70%); border-radius: 6px; }
  .lp-turn-face { position: absolute; inset: 0; overflow: hidden; border-radius: 6px; }
  .lp-turn-face.front img { display: block; width: 100%; height: 100%; object-fit: fill; background: #fff; filter: var(--lp-img-filter); }
  .lp-turn-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,0), rgba(0,0,0,0.5)); opacity: 0; }
  .lp-tools #lp-turn-btn.off { opacity: .6; }
  @media (max-width: 720px) { .lp-index { padding: 10px 8px 40px; } .lp-index-paper { padding: 26px 20px 22px; } .lp-index-paper h2 { font-size: 28px; } }
  .lp-stage.wide .lp-canvas { display: block; overflow: auto; text-align: center; }
  .lp-stage.wide .lp-canvas img { display: inline-block; max-width: none; max-height: none; }
  .pv-tabs { display: inline-flex; gap: 6px; margin-right: 6px; flex-wrap: wrap; }
  /* Top bar in two rows: back / title / Save / Order, then the document tabs with zoom and full screen. */
  .lp-top.pv-top { flex-wrap: wrap; row-gap: 8px; }
  .pv-top .lp-title { flex: 1 1 180px; }
  .pv-top .lp-tools { order: 3; flex: 1 1 100%; align-items: center; }
  .pv-top .pv-tabs { margin-right: auto; }
  /* Save and Order: the two things to do from here, set apart from the reader controls. */
  .pv-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
  .lp .pv-save-btn { display: inline-flex; align-items: center; gap: 8px; padding: 7px 16px; border-radius: 999px; border: 2px solid #c9a227; background: transparent; box-shadow: none; color: var(--lp-strong); font-size: 13.5px; font-weight: 800; cursor: pointer; }
  .lp .pv-save-btn:hover { background: color-mix(in srgb, #c9a227 20%, transparent); }
  .lp .pv-save-btn.is-saved { background: #c9a227; color: #1b2a5b; }
  .lp .pv-save-btn:disabled { opacity: .6; cursor: wait; }
  .pv-save-btn[hidden] { display: none; }
  .pv-ribbon { width: 11px; height: 15px; background: currentColor; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 72%, 0 100%); opacity: .55; }
  .pv-save-btn.is-saved .pv-ribbon { opacity: 1; }
  .lp a.pv-order-btn { display: inline-flex; align-items: center; padding: 8px 18px; border-radius: 999px; background: #1b2a5b; border: 2px solid #1b2a5b; color: #fff; font-size: 13.5px; font-weight: 800; text-decoration: none; white-space: nowrap; }
  .lp a.pv-order-btn:hover { background: #2a3d80; }
  .pv-toast { position: fixed; left: 50%; bottom: 74px; transform: translateX(-50%); z-index: 30; max-width: min(520px, calc(100vw - 24px)); padding: 11px 18px; border-radius: 14px; background: #1b2a5b; color: #fff; font-family: var(--sans); font-size: 13.5px; line-height: 1.45; box-shadow: 0 14px 34px rgba(16, 29, 63, 0.35); text-align: center; }
  .pv-toast[hidden] { display: none; }
  .pv-toast a { color: #f2d675; font-weight: 800; }
  .pv-free-tag { align-self: flex-start; padding: 1px 10px; border-radius: 999px; background: #1f9d63; color: #fff !important; font-weight: 800; }
  .pv-end-card { width: min(560px, 100%); }
  .pv-lock { font-size: 26px; }
  .pv-similar { margin-top: 16px; padding: 12px 14px; border-radius: 14px; background: #fff7e0; border: 1px solid #ecd28a; color: #4a3a0c; font-size: 13.5px; text-align: left; line-height: 1.45; }
  .pv-similar .lp-btn { background: #fff; }
  .free-badge { display: inline-block; padding: 2px 10px; border-radius: 999px; background: rgba(31,157,99,0.14); color: #16724a; font-size: 11px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }
  .cart-quote { margin-top: 10px; padding: 10px 12px; border-radius: 12px; font-family: var(--sans); font-size: 13px; line-height: 1.45; }
  .cart-quote.is-wait { background: #fff7e0; border: 1px solid #ecd28a; color: #4a3a0c; }
  .cart-quote.is-ready { background: #eef4ff; border: 1.5px solid #6f97e6; color: #1f3563; }
  .cart-quote.is-done { background: #f1fbf5; border: 1px solid rgba(31,157,99,0.45); color: #16724a; }
  .cart-titles { margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: #fff; border: 1px solid #b9cdf5; }
  .cart-title-option { align-items: flex-start; margin: 6px 0 0; line-height: 1.4; font-weight: 600; color: var(--navy); }
  .cart-quote-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
  .cart-blocked { margin: 16px 0; padding: 14px 16px; border-radius: 14px; background: #fff7e0; border: 1.5px solid #ecd28a; color: #4a3a0c; font-family: var(--sans); font-size: 14px; line-height: 1.5; }
  .cart-pending-note { margin: 16px 0; padding: 14px 16px; border-radius: 14px; background: #eef4ff; border: 1.5px solid #b9cdf5; color: #1f3563; font-family: var(--sans); font-size: 14px; line-height: 1.5; }
  /* Arriving in the cart right after "Add Selected to Cart" -- a few pulses to point at the rest of that project, then it settles back to a normal row. */
  .cart-group-head--highlight td, .cart-add-row--highlight td { animation: npa-attn 1.4s ease-in-out 3; border-radius: 10px; }
  .cp-scope-note { margin: 0 0 14px; padding: 10px 14px; border-radius: 12px; background: #eef4ff; border: 1px solid #b9cdf5; color: #1f3563; font-family: var(--sans); font-size: 13.5px; line-height: 1.5; }
  .cp-estimate { margin: 18px 0 6px; padding: 14px 16px; border-radius: 14px; background: #f1fbf5; border: 1.5px solid rgba(31,157,99,0.45); font-family: var(--sans); }
  .cp-estimate-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
  .cp-estimate-label { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: #16724a; }
  .cp-estimate-price { font-size: 26px; color: var(--navy); font-family: var(--brand-display); }
  .cp-estimate-lines { list-style: none; margin: 0 0 6px; padding: 0; font-size: 13px; color: var(--secondary-text); }
  .cp-estimate-lines li { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; border-bottom: 1px dashed rgba(31,157,99,0.3); }
  .deliv-section { margin: 14px 0; padding: 14px 16px; border-radius: 14px; background: #f6faf7; border: 1px solid #cfe6d8; }
  .deliv-section h3 { margin: 0 0 10px; font-size: 16px; color: var(--navy); }
  .deliv-section [hidden] { display: none !important; }
  .lp-copyright-note { margin: 10px 0 0; padding: 9px 12px; border-radius: 10px; background: #fff4e8; border: 1px solid #e59a4a; color: #6b3a05; font-size: 12.5px; line-height: 1.45; text-align: left; }
  .originality-declare { padding: 10px 12px; border-radius: 10px; background: #fff4e8; border: 1px solid #e59a4a; color: #6b3a05; }
  .cp-academic-warn { margin: 0 0 14px; padding: 12px 14px; border-radius: 12px; background: #fff4e8; border: 1.5px solid #e59a4a; color: #6b3a05; font-family: var(--sans); font-size: 13.5px; line-height: 1.5; }
  .cp-academic-warn a { color: #8a4a00; font-weight: 700; }
  .plan-block { margin: 22px 0 6px; padding: 18px 20px; border-radius: 16px; background: #f7f9ff; border: 1px solid #d5def5; }
  .plan-block h2 { margin: 0 0 4px; font-size: 19px; color: var(--navy); }
  .check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px 14px; }
  .project-id-line { font-weight: 700; letter-spacing: .02em; }
  .lang-flex { display: flex; gap: 12px; align-items: flex-start; margin: 4px 0 18px; padding: 12px 14px; border-radius: 14px; background: #eef4ff; border: 1px solid #b9cdf5; color: #1f3563; font-family: var(--sans); font-size: 14px; line-height: 1.5; }
  .lang-flex-tag { flex: none; padding: 2px 10px; border-radius: 999px; background: #1f4fbf; color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
  .lang-pick-wrap { margin: 2px 0 10px 32px; padding: 10px 12px; border-radius: 12px; background: #eef4ff; border: 1px solid #b9cdf5; }
  .lang-pick-label { display: block; margin-bottom: 6px; font-size: 12.5px; font-weight: 800; color: #1f3563; }
  .lang-pick { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
  .lang-pick input { padding: 7px 10px; border-radius: 10px; border: 1px solid var(--surface-border); background: #fff; font-size: 14px; font-family: var(--sans); max-width: 100%; }
  .lang-pick select { max-width: 100%; min-width: 220px; }
  .lang-pick input { flex: 1; min-width: 180px; }
  .cart-lang { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
  .detail-main { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
  .detail-main > .detail-card, .detail-main > .sample-docs-panel { margin-top: 0; }
  .similar-card { padding: 22px 24px; border-radius: 20px; border: 1.5px dashed #c9a227; background: linear-gradient(135deg, #fffaf0, #fff5dc); }
  .similar-tag { display: inline-block; margin-bottom: 8px; padding: 2px 12px; border-radius: 999px; background: #1b2a5b; color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
  .similar-card h2 { margin: 0 0 8px; font-size: 22px; color: var(--navy); }
  .similar-card > p { margin: 0 0 14px; font-family: var(--sans); font-size: 14.5px; color: var(--muted-text); line-height: 1.55; }
  .similar-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 14px; }
  @media (max-width: 640px) { .similar-cols { grid-template-columns: 1fr; } }
  .similar-cols h3 { margin: 0 0 6px; font-size: 13px; color: var(--navy); text-transform: uppercase; letter-spacing: .05em; }
  .similar-cols ul { margin: 0; padding-left: 18px; font-family: var(--sans); font-size: 13.5px; color: var(--muted-text); line-height: 1.55; }
  .similar-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 0 0 16px; padding: 0; list-style: none; counter-reset: sim; }
  @media (max-width: 640px) { .similar-steps { grid-template-columns: 1fr 1fr; } }
  .similar-steps li { counter-increment: sim; padding: 10px 10px 10px 34px; position: relative; border-radius: 12px; background: rgba(255,255,255,0.75); border: 1px solid #ecd28a; font-family: var(--sans); font-size: 12.5px; color: var(--muted-text); line-height: 1.35; }
  .similar-steps li::before { content: counter(sim); position: absolute; left: 9px; top: 9px; width: 18px; height: 18px; border-radius: 50%; background: #c9a227; color: #fff; font-size: 11px; font-weight: 800; line-height: 18px; text-align: center; }
  .similar-steps strong { display: block; color: var(--navy); }
  .similar-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
  .similar-fine { margin: 12px 0 0; font-family: var(--sans); font-size: 12px; color: var(--muted-text); }
  .free-preview-panel { margin-top: 18px; border: 1.5px solid rgba(31,157,99,0.4); background: linear-gradient(135deg, #f2fbf6, #ffffff); }
  .cp-similar-note { margin: 0 0 14px; padding: 10px 14px; border-radius: 12px; background: #fff7e0; border: 1px solid #ecd28a; color: #4a3a0c; font-size: 13.5px; }
  .filter-chip-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 0 0 12px; }
  .filter-toggle { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; border: 1.5px solid var(--surface-border); background: #fff; color: var(--navy); font-size: 13px; font-weight: 700; cursor: pointer; }
  .filter-toggle[aria-pressed="true"] { border-color: #1f9d63; background: rgba(31,157,99,0.12); color: #16724a; }
  .lp-zoom { display: inline-flex; gap: 2px; align-items: center; }
  .lp .lp-zoom button { min-width: 36px; padding: 6px 10px; }
  .lp .lp-zoom button:disabled { opacity: .35; cursor: default; }
  .lp .lp-arrow { position: absolute; top: 50%; z-index: 3; width: 46px; height: 78px; margin-top: -39px; border: none; border-radius: 12px; background: var(--lp-ctl); box-shadow: none; color: var(--lp-strong); font-size: 34px; line-height: 1; cursor: pointer; }
  .lp .lp-arrow:hover { background: var(--lp-hover); }
  .lp .lp-arrow:disabled { opacity: .2; cursor: default; }
  .lp-arrow.prev { left: 10px; }
  .lp-arrow.next { right: 10px; }
  .lp-caption { position: absolute; left: 0; right: 0; bottom: 8px; z-index: 2; text-align: center; font-size: 12.5px; color: var(--lp-muted); pointer-events: none; }
  .lp-loading { position: absolute; z-index: 1; color: var(--lp-muted); font-size: 15px; pointer-events: none; }
  .lp-toast { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); z-index: 6; max-width: 90%; padding: 9px 18px; border-radius: 999px; background: rgba(0,0,0,0.75); color: #fff; font-size: 13px; text-align: center; }
  .lp-message { position: absolute; top: 12px; left: 16px; right: 16px; z-index: 6; }
  .lp-panel { width: 340px; flex: none; overflow: auto; padding: 12px; background: #f7f8fc; color: #252b3d; border-left: 1px solid rgba(0,0,0,0.2); }
  .lp-panel-note { font-size: 12.5px; color: #5b6784; margin: 4px 0; }
  .lp-contents { position: absolute; left: 12px; top: 8px; z-index: 8; width: 330px; max-height: 76%; overflow: auto; padding: 8px; border-radius: 14px; background: #fff; color: #252b3d; box-shadow: 0 20px 60px rgba(0,0,0,0.5); }
  .lp-contents-head { padding: 6px 10px; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #5b6784; }
  .lp .lp-contents-item { display: block; width: 100%; padding: 8px 10px; margin: 1px 0; border: none; border-radius: 9px; background: none; box-shadow: none; color: #252b3d; text-align: left; font-size: 13.5px; font-weight: 600; cursor: pointer; word-break: break-all; }
  .lp-contents-item small { display: block; font-weight: 500; font-size: 11.5px; color: #5b6784; }
  .lp-contents-item:hover { background: rgba(27,42,91,0.07); }
  .lp .lp-contents-item.current { background: rgba(27,42,91,0.13); }
  .lp-contents-item.seen::before { content: "\2713  "; color: #1f9d63; font-weight: 800; }
  .lp-bottom { display: flex; align-items: center; gap: 12px; padding: 8px 16px; background: var(--lp-bar); border-top: 1px solid var(--lp-line); }
  .lp .lp-bottom button { padding: 7px 16px; border-radius: 999px; border: 1px solid var(--lp-ctl-line); background: var(--lp-ctl); box-shadow: none; color: var(--lp-text); font-size: 13px; font-weight: 700; cursor: pointer; }
  .lp .lp-bottom button:disabled { opacity: .35; cursor: default; }
  .lp-track { flex: 1; height: 10px; border-radius: 999px; background: var(--lp-track); cursor: pointer; overflow: hidden; }
  #lp-track-fill { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #c9a227, #f0d266); transition: width .25s; }
  .lp-count { min-width: 74px; text-align: center; font-size: 13px; font-weight: 700; color: var(--lp-strong); }
  .lp-end { position: absolute; inset: 0; z-index: 7; display: flex; align-items: center; justify-content: center; padding: 20px; background: var(--lp-end-bg); overflow: auto; }
  .lp-end-card { width: min(520px, 100%); padding: 26px 28px; border-radius: 22px; background: #fff; color: #252b3d; text-align: center; box-shadow: 0 30px 90px rgba(0,0,0,0.6); }
  /* The decision screen is a wide popup so everything shows at once: rating on the left, the decision on the right. */
  .lp-end-card.lp-end-wide { width: min(960px, 100%); max-height: calc(100% - 8px); overflow: auto; padding: 20px 26px; display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; align-items: start; }
  .lp-end-wide > * { grid-column: 1 / -1; }
  .lp-end-wide > .lp-end-rate { grid-column: 1; margin: 6px 0 0; }
  .lp-end-wide > .lp-decision { grid-column: 2; margin: 6px 0 0; }
  .lp-end-wide > .lp-end-rate[hidden] ~ .lp-decision { grid-column: 1 / -1; }
  .lp-end-wide .lp-end-mark { width: 40px; height: 40px; line-height: 40px; font-size: 22px; margin-bottom: 2px; }
  .lp-end-wide .lp-steps { margin-bottom: 8px; }
  .lp-end-wide h2 { margin: 0 0 4px; font-size: 21px; }
  .lp-end-wide .stars-row { padding: 1px 0; }
  .lp-end-wide .lp-end-actions { margin-top: 12px; }
  .lp-end-wide .lp-copyright-note { margin: 8px 0 4px; padding: 7px 10px; }
  .lp-end-wide .lp-end-rate .lp-copyright-note, .lp-end-wide .lp-end-rate .muted-link { font-size: 12px; }
  @media (max-width: 760px) {
    .lp-end-card.lp-end-wide { display: block; padding: 18px 16px; }
    .lp-end-wide > .lp-end-rate, .lp-end-wide > .lp-decision { margin: 12px 0 0; }
  }
  .lp-end-mark { width: 56px; height: 56px; margin: 0 auto 8px; border-radius: 50%; background: rgba(31,157,99,0.15); color: #1f9d63; font-size: 30px; line-height: 56px; }
  .lp-end-card h2 { margin: 4px 0; color: #1b2a5b; font-family: var(--brand-display); }
  .lp-end-rate { margin: 12px 0; text-align: left; }
  .lp-end-rate input { width: 100%; margin-top: 6px; }
  .lp-end-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 10px; }
  .lp .lp-btn, .lp-btn { display: inline-block; padding: 9px 18px; border-radius: 999px; border: 1px solid rgba(27,42,91,0.25); background: #eef0f7; box-shadow: none; color: #1b2a5b; font-size: 14px; font-weight: 700; text-decoration: none; cursor: pointer; }
  .lp .lp-btn.primary, .lp-btn.primary { background: #c9a227; border-color: #c9a227; color: #1b2a5b; font-weight: 800; }

  /* reader themes (chosen by the developer; the choice is remembered on their device) */
  .lp { --lp-bg: #0d1222; --lp-bar: #151b31; --lp-line: rgba(255,255,255,0.08); --lp-text: #e8ebf5; --lp-strong: #ffffff; --lp-muted: #aab3d3; --lp-accent: #e0b93a;
        --lp-rail: #10162a; --lp-thumb: #1c2440; --lp-stage-a: #1a2240; --lp-stage-b: #0d1222; --lp-ctl: rgba(255,255,255,0.06); --lp-ctl-line: rgba(255,255,255,0.18);
        --lp-hover: rgba(224,185,58,0.25); --lp-track: rgba(255,255,255,0.14); --lp-shadow: 0 24px 70px rgba(0,0,0,0.6); --lp-img-filter: none; --lp-end-bg: rgba(9,13,26,0.95); }
  .lp[data-theme="midnight"] { --lp-bg: #000; --lp-bar: #0a0a0a; --lp-line: rgba(255,255,255,0.09); --lp-text: #d9dbe4; --lp-strong: #f1f2f7; --lp-muted: #9096ab; --lp-accent: #d9b446;
        --lp-rail: #060606; --lp-thumb: #151515; --lp-stage-a: #0a0a0a; --lp-stage-b: #000; --lp-ctl: rgba(255,255,255,0.05); --lp-ctl-line: rgba(255,255,255,0.15);
        --lp-img-filter: brightness(0.86); --lp-end-bg: rgba(0,0,0,0.96); --lp-shadow: 0 20px 60px rgba(0,0,0,0.9); }
  .lp[data-theme="light"] { --lp-bg: #eef0f6; --lp-bar: #ffffff; --lp-line: rgba(27,42,91,0.12); --lp-text: #252b3d; --lp-strong: #1b2a5b; --lp-muted: #5b6784; --lp-accent: #8a6a0c;
        --lp-rail: #f3f4fa; --lp-thumb: #dde2ee; --lp-stage-a: #ffffff; --lp-stage-b: #e3e6ef; --lp-ctl: rgba(27,42,91,0.06); --lp-ctl-line: rgba(27,42,91,0.25);
        --lp-hover: rgba(201,162,39,0.28); --lp-track: rgba(27,42,91,0.15); --lp-shadow: 0 12px 36px rgba(27,42,91,0.28); --lp-end-bg: rgba(238,240,246,0.96); }
  .lp[data-theme="paper"] { --lp-bg: #efe4cf; --lp-bar: #e6d8bd; --lp-line: rgba(74,59,37,0.16); --lp-text: #4a3b25; --lp-strong: #35280f; --lp-muted: #7a6748; --lp-accent: #8f5f0e;
        --lp-rail: #e9dcc2; --lp-thumb: #d8c8a4; --lp-stage-a: #f6ecd6; --lp-stage-b: #e3d4b5; --lp-ctl: rgba(74,59,37,0.07); --lp-ctl-line: rgba(74,59,37,0.3);
        --lp-hover: rgba(143,95,14,0.22); --lp-track: rgba(74,59,37,0.18); --lp-shadow: 0 12px 36px rgba(74,59,37,0.32); --lp-img-filter: sepia(0.22) brightness(0.97); --lp-end-bg: rgba(239,228,207,0.96); }
  .lp[data-theme="contrast"] { --lp-bg: #000; --lp-bar: #000; --lp-line: rgba(255,255,255,0.6); --lp-text: #fff; --lp-strong: #fff; --lp-muted: #e6e6e6; --lp-accent: #ffd400;
        --lp-rail: #000; --lp-thumb: #262626; --lp-stage-a: #000; --lp-stage-b: #000; --lp-ctl: transparent; --lp-ctl-line: #fff; --lp-hover: rgba(255,212,0,0.4);
        --lp-track: rgba(255,255,255,0.4); --lp-shadow: 0 0 0 2px #fff; --lp-end-bg: rgba(0,0,0,0.97); }
  .lp-theme-menu { position: absolute; right: 16px; top: 52px; z-index: 20; width: 230px; padding: 8px; border-radius: 14px; background: var(--lp-bar); color: var(--lp-text); border: 1px solid var(--lp-ctl-line); box-shadow: 0 20px 50px rgba(0,0,0,0.5); font-family: var(--sans); }
  .lp-theme-head { padding: 4px 8px 6px; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--lp-muted); }
  .lp .lp-theme-option { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 8px; margin: 1px 0; border: 1px solid transparent; border-radius: 10px; background: none; box-shadow: none; color: var(--lp-text); font-size: 13.5px; font-weight: 600; text-align: left; cursor: pointer; }
  .lp .lp-theme-option:hover { background: var(--lp-ctl); }
  .lp .lp-theme-option.on { border-color: var(--lp-accent); background: var(--lp-hover); }
  .lp-swatch { flex: none; width: 34px; height: 22px; border-radius: 6px; border: 1px solid rgba(128,128,128,0.5); }
  .lp-end-mark.fail { background: rgba(224,123,31,0.16); color: #d9700f; }
  .lp-quiz { text-align: left; max-height: 92vh; overflow: auto; }
  .lp-quiz-result { text-align: center; }
  .lp-quiz-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; font-weight: 700; color: #5b6784; }
  .lp-quiz-bar { flex: 1; max-width: 220px; height: 8px; border-radius: 999px; background: rgba(27,42,91,0.12); overflow: hidden; }
  .lp-quiz-bar span { display: block; height: 100%; background: #c9a227; transition: width .25s; }
  .lp-quiz-question { margin: 14px 0; font-size: 18px; line-height: 1.4; color: #1b2a5b; }
  .lp-quiz-options { display: grid; gap: 8px; margin-bottom: 14px; }
  .lp .lp-quiz-option { display: flex; align-items: flex-start; justify-content: flex-start; gap: 10px; width: 100%; padding: 11px 12px; border: 2px solid rgba(27,42,91,0.15); border-radius: 12px; background: #fff; box-shadow: none; color: #252b3d; text-align: left; font-size: 14.5px; line-height: 1.4; cursor: pointer; }
  .lp .lp-quiz-option:hover { border-color: #c9a227; }
  .lp .lp-quiz-option.picked { border-color: #1b2a5b; background: rgba(27,42,91,0.07); }
  .lp .lp-quiz-option > span:last-child { flex: 1; text-align: left; }
  .lp-quiz-letter { flex: none; width: 24px; height: 24px; border-radius: 50%; background: #eef0f7; color: #1b2a5b; font-weight: 800; font-size: 12.5px; line-height: 24px; text-align: center; }
  .lp-quiz-option.picked .lp-quiz-letter { background: #1b2a5b; color: #fff; }
  .lp-quiz-review { margin-top: 16px; text-align: left; display: grid; gap: 10px; }
  .lp-review-item { padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(27,42,91,0.15); font-size: 13.5px; }
  .lp-review-item.right { border-color: rgba(31,157,99,0.5); background: rgba(31,157,99,0.06); }
  .lp-review-item.wrong { border-color: rgba(217,72,15,0.45); background: rgba(217,72,15,0.05); }
  .lp-review-option { padding: 2px 0 2px 8px; color: #4a5470; }
  .lp-review-option.is-correct { color: #16724a; font-weight: 700; }
  .lp-review-option.is-chosen { color: #b23a0a; font-weight: 700; }
  .lp-btn:disabled { opacity: .5; cursor: default; }
  @media (max-width: 900px) {
    .lp-rail { display: none; }
    .lp-top { flex-wrap: wrap; gap: 8px; }
    .lp-canvas { padding: 8px 8px 38px; }
    .lp .lp-arrow { width: 34px; height: 60px; margin-top: -30px; font-size: 26px; }
    .lp-panel { position: absolute; right: 0; top: 0; bottom: 0; z-index: 6; width: min(340px, 92%); }
  }
  .stars-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 3px 0; font-family: var(--sans); font-size: 13.5px; }
  .stars { display: inline-flex; }
  .stars .star { background: none; border: none; box-shadow: none; padding: 0 2px; font-size: 24px; line-height: 1; color: #cfd3e0; cursor: pointer; }
  .stars .star.on { color: #c9a227; }
  .diy-tag { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: rgba(27,42,91,0.1); border: 1px solid rgba(27,42,91,0.25); color: var(--navy); font-family: var(--sans); font-size: 10.5px; font-weight: 800; letter-spacing: 0.06em; vertical-align: middle; }
  .diy-note { margin: 6px 0 0; padding: 8px 12px; border-radius: 10px; background: rgba(201,162,39,0.13); border: 1px solid rgba(201,162,39,0.35); color: #6b4310; font-family: var(--sans); font-size: 13px; line-height: 1.5; }
  .order-item-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 12px 0; border-top: 1px dashed var(--surface-border); font-family: var(--sans); }
  .order-title-block { padding-top: 14px; border-top: 1px solid var(--surface-border); }
  .order-title { font-family: var(--brand-display); font-weight: 800; font-size: 17px; color: var(--navy); }
  .order-title + .order-item-row { border-top: none; }
  .order-item-main { flex: 0 1 34%; min-width: 0; }
  .order-item-files { flex: 1 1 auto; min-width: 0; font-size: 13.5px; overflow-wrap: anywhere; }
  @media (max-width: 640px) {
    .order-item-row { flex-wrap: wrap; }
    .order-item-main, .order-item-files { flex: 1 1 100%; }
  }

  /* ---------- Forms ---------- */
  .auth-shell { max-width: 400px; margin: 18px auto; }
  .form-card h1 { color: var(--navy); font-size: var(--nib-ui-heading-2-size, 24px); margin: 0 0 4px; }
  .form-card .form-lead { font-family: var(--sans); color: var(--muted-text); font-size: 13.5px; margin: 0 0 20px; }
  .form-field { display: grid; gap: 6px; margin-bottom: 14px; }
  .form-field label { font-family: var(--sans); font-size: 12.5px; font-weight: 700; color: var(--secondary-text); }
  .form-field .field-error { color: var(--red); font-size: 12px; font-family: var(--sans); }
  .form-field input, .form-field select, .form-field textarea { font-family: var(--sans); }
  .checkbox-field { display: flex; align-items: center; gap: 8px; font-family: var(--sans); font-size: 13px; color: var(--secondary-text); }
  .checkbox-field input { width: auto; min-height: auto; accent-color: var(--navy); }
  .form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  @media (max-width: 560px) { .form-row-2 { grid-template-columns: 1fr; } }
  .form-actions { margin-top: 18px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
  .muted-link { font-family: var(--sans); font-size: 13px; color: var(--muted-text); }

  [hidden] { display: none !important; }

  .build-option.is-locked { opacity: .55; cursor: not-allowed; }
  .build-option.is-locked input { cursor: not-allowed; }
  .need-doc-note { margin: -4px 0 12px; padding: 10px 14px; border-radius: 12px; font-family: var(--sans); font-size: 13px; line-height: 1.5; }
  .need-doc-note.is-locked { background: rgba(232,160,30,0.15); border: 1px solid rgba(232,160,30,0.5); color: #7a4d08; }
  .need-doc-note.is-open { background: rgba(31,157,99,0.1); border: 1px solid rgba(31,157,99,0.35); color: #17683f; }
  .cart-needdoc { margin-top: 8px; padding: 9px 12px; border-radius: 10px; background: rgba(214,69,90,0.1); border: 1px solid rgba(214,69,90,0.4); color: #a12a41; font-family: var(--sans); font-size: 13px; line-height: 1.5; }
  .cp-need-doc { margin: 8px 0 0; padding: 9px 12px; border-radius: 10px; background: rgba(232,160,30,0.15); border: 1px solid rgba(232,160,30,0.5); color: #7a4d08; font-family: var(--sans); font-size: 13px; line-height: 1.5; }

  .build-option.is-taken { opacity: .6; cursor: not-allowed; }
  .in-cart-tag { display: inline-block; margin-left: 8px; padding: 1px 9px; border-radius: 999px; background: rgba(31,157,99,0.14); border: 1px solid rgba(31,157,99,0.4); color: #17683f; font-family: var(--sans); font-size: 10.5px; font-weight: 800; letter-spacing: .04em; vertical-align: middle; }
  .customize-fixed, .cp-fixed { margin: 6px 0 10px; padding: 10px 14px; border-radius: 12px; background: rgba(27,42,91,0.07); border: 1px solid rgba(27,42,91,0.2); color: var(--navy); font-family: var(--sans); font-size: 13.5px; line-height: 1.5; }

  .cart-hero { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 22px; align-items: start; }
  .cart-hero-ls { padding: 16px 18px; border-radius: 18px; border: 1.5px solid #e6cf85; background: linear-gradient(135deg, #fffaf0, #fdf0cf); font-family: var(--sans); }
  .cart-hero-ls .section-kicker { display: inline-block; margin-bottom: 4px; font-size: 10.5px; }
  .cart-hero-ls strong { display: block; font-family: var(--brand-display); font-size: 18px; color: var(--navy); margin-bottom: 6px; }
  .cart-hero-ls p { margin: 0 0 12px; font-size: 12.5px; line-height: 1.5; color: var(--muted-text); }
  @media (max-width: 860px) { .cart-hero { grid-template-columns: 1fr; } }

  /* The intro sentence runs along a slim ribbon under the search box, so the search sits higher on the page. */
  .hero .brand-promise { margin-bottom: 18px; }
  .hero-ribbon { max-width: 1120px; margin: 16px auto 0; overflow: hidden; border-radius: 999px; border: 1px solid var(--card-border); background: linear-gradient(90deg, rgba(201,162,39,0.10), rgba(255,255,255,0.7), rgba(201,162,39,0.10)); -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
  .hero-ribbon-track { display: flex; width: max-content; animation: hero-ribbon 70s linear infinite; }
  .hero-ribbon:hover .hero-ribbon-track { animation-play-state: paused; }
  .hero-ribbon-track span { flex: none; padding: 9px 40px; font-family: var(--sans); font-size: 13.5px; color: var(--navy); white-space: nowrap; }
  @keyframes hero-ribbon { from { transform: translateX(0); } to { transform: translateX(-50%); } }
  @media (prefers-reduced-motion: reduce) {
    .hero-ribbon { border-radius: 16px; -webkit-mask-image: none; mask-image: none; }
    .hero-ribbon-track { animation: none; width: auto; }
    .hero-ribbon-track span { white-space: normal; padding: 10px 16px; }
    .hero-ribbon-track span + span { display: none; }
  }

  /* ---------- Categories: a tab on the left edge that opens a slide-out panel ---------- */
  .cat-tab { position: fixed; left: 0; top: 50%; transform: translateY(-50%); z-index: 40; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 16px 9px 12px; border: 0; border-radius: 0 16px 16px 0; background: linear-gradient(180deg, #24346f, var(--navy)); color: #fff; cursor: pointer; box-shadow: 4px 6px 18px rgba(27,42,91,0.28); transition: padding .18s, box-shadow .18s; }
  .cat-tab:hover, .cat-tab:focus-visible { padding-left: 14px; box-shadow: 6px 8px 22px rgba(27,42,91,0.4); outline: none; }
  .cat-tab-label { writing-mode: vertical-rl; transform: rotate(180deg); font-family: var(--brand-display); font-size: 14px; font-weight: 700; letter-spacing: .06em; max-height: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cat-tab-count { min-width: 22px; padding: 1px 6px; border-radius: 999px; background: #c9a227; color: #2b2100; font-family: var(--sans); font-size: 11px; font-weight: 800; text-align: center; }
  .cat-tab.is-filtered { background: linear-gradient(180deg, #d7b13a, #b8901a); color: #2b2100; }
  .cat-tab.is-filtered .cat-tab-count { background: var(--navy); color: #fff; }
  .cat-backdrop { position: fixed; inset: 0; z-index: 110; background: rgba(17,28,59,0.42); backdrop-filter: blur(2px); }
  .cat-backdrop[hidden] { display: none; }
  .cat-panel { position: fixed; left: 0; top: 0; bottom: 0; z-index: 120; width: min(360px, 90vw); display: flex; flex-direction: column; padding: 22px 20px; background: var(--card-bg); border-right: 3px solid #c9a227; box-shadow: 12px 0 40px rgba(17,28,59,0.3); transform: translateX(-105%); transition: transform .26s ease; visibility: hidden; }
  .cat-panel.is-open { transform: none; visibility: visible; }
  .cat-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
  .cat-panel-head h2 { margin: 2px 0 0; font-size: 24px; color: var(--navy); }
  .cat-panel-close { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--card-border); background: #fff; color: var(--navy); font-size: 20px; line-height: 1; cursor: pointer; }
  .cat-panel-close:hover { border-color: #c9a227; }
  .cat-panel-note { margin: 8px 0 14px; font-family: var(--sans); font-size: 13px; color: var(--muted-text); line-height: 1.5; }
  .cat-list { display: flex; flex-direction: column; gap: 8px; overflow-y: auto; padding: 2px 4px 8px 2px; }
  .cat-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border-radius: 14px; border: 1.5px solid var(--card-border); border-left: 5px solid var(--dot); background: #fff; text-align: left; cursor: pointer; font-family: var(--sans); transition: transform .14s, box-shadow .14s, background .14s; }
  .cat-row:hover, .cat-row:focus-visible { transform: translateX(3px); box-shadow: 0 8px 18px rgba(27,42,91,0.14); outline: none; }
  .cat-name { flex: 1; font-size: 14px; font-weight: 700; color: var(--navy); line-height: 1.3; }
  .cat-count { flex: none; padding: 1px 10px; border-radius: 999px; background: rgba(27,42,91,0.09); color: var(--navy); font-size: 12px; font-weight: 800; }
  .cat-row[aria-pressed="true"] { background: #fff8e3; border-color: #c9a227; border-left-color: #c9a227; }
  .cat-row[aria-pressed="true"] .cat-count { background: #c9a227; color: #2b2100; }
  @media (max-width: 640px) { .cat-tab { padding: 12px 7px 9px; } .cat-tab-label { font-size: 12.5px; max-height: 160px; } }
  @media (prefers-reduced-motion: reduce) { .cat-panel { transition: none; } }

  /* ---------- Skill snapshot: developers, popular domains, industry demand ---------- */
  .pulse { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.1fr) minmax(0, 1.1fr); max-width: 1120px; margin: 34px auto 20px; border-radius: 26px; overflow: hidden; background: var(--card-bg); border: 1px solid var(--card-border); box-shadow: 0 22px 50px rgba(27,42,91,0.16); text-align: left; }
  .pulse-lead { padding: 28px 26px; color: #fff; background: radial-gradient(circle at 15% 0%, rgba(201,162,39,0.35), transparent 55%), linear-gradient(160deg, #1b2a5b, #2a3f8c); font-family: var(--sans); }
  .pulse-kicker { display: inline-block; padding: 3px 12px; border-radius: 999px; background: rgba(255,255,255,0.14); color: #f1d477; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
  .pulse-number { margin: 14px 0 2px; font-family: var(--brand-display); font-size: 58px; line-height: 1; font-weight: 800; color: #f5d46b; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
  .pulse-caption { margin: 0 0 18px !important; max-width: none !important; font-size: 15px !important; line-height: 1.45 !important; color: rgba(255,255,255,0.88) !important; text-align: left !important; }
  .pulse-facts { list-style: none; margin: 0; padding: 14px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; border-top: 1px solid rgba(255,255,255,0.18); font-size: 12.5px; color: rgba(255,255,255,0.85); }
  .pulse-facts li { position: relative; padding-left: 14px; line-height: 1.35; }
  .pulse-facts li::before { content: ""; position: absolute; left: 0; top: 6px; width: 6px; height: 6px; border-radius: 50%; background: #c9a227; }
  .pulse-facts strong { color: #fff; font-size: 14px; }
  .pulse-col { padding: 24px 22px; border-left: 1px solid var(--card-border); font-family: var(--sans); }
  .pulse-col h3 { margin: 0; font-family: var(--brand-display); font-size: 18px; color: var(--navy); }
  .pulse-sub { margin: 4px 0 14px !important; max-width: none !important; font-size: 12.5px !important; line-height: 1.45 !important; color: var(--muted-text) !important; text-align: left !important; }
  .pulse-bars { display: flex; flex-direction: column; gap: 9px; }
  .pulse-bar { display: flex; align-items: center; gap: 12px; width: 100%; padding: 4px 6px 4px 4px; border: 0; border-radius: 12px; background: transparent; text-align: left; cursor: pointer; font-family: var(--sans); transition: background .15s, transform .15s; }
  .pulse-bar:hover, .pulse-bar:focus-visible { background: #fff7e0; transform: translateX(3px); outline: none; }
  .pulse-rank { flex: none; width: 22px; text-align: center; font-family: var(--brand-display); font-size: 18px; font-weight: 800; color: #c9a227; }
  .pulse-bar-body { flex: 1; min-width: 0; }
  .pulse-bar-name { display: block; margin-bottom: 4px; font-size: 13.5px; font-weight: 700; color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pulse-bar-track { display: block; height: 8px; border-radius: 999px; background: rgba(27,42,91,0.09); overflow: hidden; }
  .pulse-bar-fill { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #c9a227, #1f9d63); }
  .pulse-demand { display: flex; flex-direction: column; gap: 8px; }
  .pulse-chip { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border-radius: 12px; border: 1.5px solid var(--card-border); background: #fff; cursor: pointer; font-family: var(--sans); text-align: left; transition: border-color .15s, transform .15s, box-shadow .15s; }
  .pulse-chip:hover, .pulse-chip:focus-visible { border-color: #c9a227; transform: translateX(3px); box-shadow: 0 6px 14px rgba(27,42,91,0.12); outline: none; }
  .pulse-chip-name { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 700; color: var(--navy); }
  .pulse-heat { flex: none; display: inline-flex; align-items: flex-end; gap: 3px; height: 16px; }
  .pulse-heat i { width: 5px; border-radius: 2px; background: rgba(27,42,91,0.14); }
  .pulse-heat i:nth-child(1) { height: 6px; } .pulse-heat i:nth-child(2) { height: 11px; } .pulse-heat i:nth-child(3) { height: 16px; }
  .heat-1 .pulse-heat i:nth-child(-n+1) { background: #1f9d63; }
  .heat-2 .pulse-heat i:nth-child(-n+2) { background: #e8a01e; }
  .heat-3 .pulse-heat i:nth-child(-n+3) { background: #d6455a; }
  .pulse-level { flex: none; min-width: 52px; text-align: right; font-size: 11.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--muted-text); }
  .heat-3 .pulse-level { color: #a12a41; } .heat-2 .pulse-level { color: #9a6408; } .heat-1 .pulse-level { color: #17683f; }
  @media (max-width: 980px) { .pulse { grid-template-columns: 1fr; } .pulse-col { border-left: 0; border-top: 1px solid var(--card-border); } }
  @media (max-width: 560px) { .pulse-number { font-size: 46px; } .pulse-facts { grid-template-columns: 1fr; } }

  /* ---------- Coupons: the list in the cart popup and the latest offer in the welcome popup ---------- */
  .coupon-available { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--surface-border); }
  .coupon-available-title { margin-bottom: 8px; font-family: var(--sans); font-size: 11.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--secondary-text); }
  .coupon-offer { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; padding: 11px 13px; border-radius: 12px; border: 1.5px solid var(--card-border); background: #fff; }
  .coupon-offer.is-latest { border-color: #c9a227; background: #fffaf0; }
  .coupon-offer-main { flex: 1 1 200px; min-width: 0; font-family: var(--sans); }
  .coupon-offer-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .coupon-offer-top code, .welcome-offer code { padding: 2px 9px; border-radius: 8px; background: rgba(27,42,91,0.08); border: 1px dashed rgba(27,42,91,0.35); color: var(--navy); font-family: ui-monospace, Consolas, monospace; font-size: 13px; font-weight: 800; letter-spacing: .04em; }
  .coupon-offer-top strong { color: #17683f; font-size: 13.5px; }
  .coupon-new { padding: 1px 9px; border-radius: 999px; background: #c9a227; color: #2b2100; font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
  .coupon-offer-desc { margin-top: 4px; font-size: 12.5px; line-height: 1.45; color: var(--ink); }
  .coupon-offer-note { margin-top: 2px; font-size: 11.5px; color: var(--muted-text); }
  .coupon-offer-actions { display: flex; gap: 8px; flex: none; }
  [data-copy-code].is-copied { border-color: #1f9d63 !important; color: #17683f !important; }
  .welcome-offer { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin: 0 0 18px; padding: 14px 16px; border-radius: 14px; border: 1.5px dashed #c9a227; background: linear-gradient(135deg, #fffaf0, #fdf0cf); font-family: var(--sans); }
  .welcome-offer[hidden] { display: none; }
  .welcome-offer .nib-ui-button { width: auto; flex: 0 0 auto; }
  .welcome-offer-text { flex: 1 1 220px; display: grid; gap: 3px; }
  .welcome-offer-kicker { font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #8a6a0c; }
  .welcome-offer-text strong { color: var(--navy); font-family: var(--brand-display); font-size: 16px; }
  .welcome-offer-text span:last-child { font-size: 12.5px; line-height: 1.45; color: var(--muted-text); }
  .coupon-offer.is-applied { border-color: #1f9d63; background: #f1fbf5; }
  .coupon-new.coupon-on { background: #1f9d63; color: #fff; }
  .cart-popup .coupon-box--applied { margin-bottom: 10px; }

  /* ---------- Projects toolbar: title and count on the left, category and free-preview filters on the right, all on one row ---------- */
  .projects-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px 24px; flex-wrap: wrap; margin: 34px 0 18px; padding: 14px 18px; border-radius: 18px; background: var(--card-bg); border: 1px solid var(--card-border); box-shadow: var(--shadow-soft); }
  .projects-bar-title { display: flex; flex-direction: column; gap: 2px; min-width: 0; text-align: left; }
  .projects-bar-title h2 { margin: 0; font-size: 22px; line-height: 1.25; color: var(--navy); }
  .projects-bar-count { font-family: var(--sans); font-size: 13px; color: var(--muted-text); }
  .projects-bar-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
  .projects-bar-tools select { min-width: 210px; font-family: var(--sans); }
  @media (max-width: 640px) { .projects-bar { padding: 12px 14px; } .projects-bar-tools { width: 100%; } .projects-bar-tools select { flex: 1 1 auto; min-width: 0; } }

  /* ---------- Free preview: the file strip of the source-code tab ---------- */
  .pv-files { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 8px 16px; border-bottom: 1px solid var(--lp-line, rgba(127,127,127,0.25)); font-family: var(--sans); font-size: 12px; }
  .pv-files[hidden] { display: none; }
  .pv-files-label { margin-right: 4px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; opacity: .7; }
  .pv-file { padding: 3px 11px; border-radius: 999px; border: 1px solid var(--lp-line, rgba(127,127,127,0.4)); background: transparent; color: inherit; font-family: ui-monospace, Consolas, monospace; font-size: 11.5px; cursor: pointer; }
  .pv-file.on { background: #c9a227; border-color: #c9a227; color: #2b2100; font-weight: 800; }
  .pv-file.more { border-style: dashed; font-family: var(--sans); opacity: .85; }
  .pv-locked-list { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; max-height: 96px; overflow-y: auto; padding-top: 4px; }
  .pv-file.locked { opacity: .45; cursor: not-allowed; text-decoration: line-through; text-decoration-thickness: 1px; }

  /* ---- updates, estimate and questions on an order ---- */
  .order-updates { display: grid; gap: 8px; margin: 4px 0 12px; }
  .order-estimate { padding: 10px 14px; border-radius: 12px; background: rgba(27,42,91,0.06); border-left: 4px solid #6b7ec9; font-size: 14px; }
  .order-estimate.is-late { background: #fff3d6; border-left-color: #e0a21f; }
  .order-estimate strong { font-size: 15px; }
  .order-question { padding: 12px 14px; border-radius: 12px; background: rgba(201,162,39,0.14); border: 1px solid rgba(201,162,39,0.4); }
  .order-question p { margin: 4px 0 8px; }
  .order-question textarea { width: 100%; box-sizing: border-box; padding: 8px 10px; border-radius: 10px; border: 1px solid #cfd5e6; font: inherit; }
  .order-question .inline-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 8px; }
  .order-note { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; padding: 6px 12px; border-radius: 10px; background: rgba(27,42,91,0.04); font-size: 13.5px; }
  .order-note small { color: #6a7390; }
  /* A plain, always-present list of every project, for search engines and for anyone who prefers links to filters. */
  .catalog-index { margin-top: 36px; padding-top: 24px; border-top: 1px solid rgba(27,42,91,0.14); }
  .catalog-index h2 { margin: 0 0 14px; font-size: 20px; }
  .catalog-index__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px 26px; }
  .catalog-index__group h3 { margin: 0 0 6px; font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--red); }
  .catalog-index__group ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
  .catalog-index__group a { font-size: 14px; color: var(--navy); text-decoration: none; }
  .catalog-index__group a:hover { text-decoration: underline; }