@font-face {
            font-family: "Saudi";
            src: local("Saudi"), url("/assets/fonts/moc/Saudi.woff2") format("woff2");
            font-display: swap;
        }
        @font-face {
            font-family: "Al-Awwal";
            src: local("Al-Awwal"), url("/assets/fonts/moc/Al-Awwal.woff2") format("woff2");
            font-display: swap;
        }
        @font-face {
            font-family: "Masmak";
            src: local("Masmak"), url("/assets/fonts/moc/Masmak.woff2") format("woff2");
            font-display: swap;
        }
        @font-face {
            font-family: "Al Naseeb";
            src: local("Al Naseeb"), url("/assets/fonts/moc/Al-Naseeb.woff2") format("woff2");
            font-display: swap;
        }
        @font-face {
            font-family: "Watad";
            src: local("Watad"), url("/assets/fonts/moc/Watad.woff2") format("woff2");
            font-display: swap;
        }
        @font-face {
            font-family: "Year of Camel";
            src: local("Year of Camel"), url("/assets/fonts/moc/Year-of-Camel.woff2") format("woff2");
            font-display: swap;
        }
        @font-face {
            font-family: "Year of Handcrafts";
            src: local("Year of Handcrafts"), url("/assets/fonts/moc/Year-of-Handcrafts.woff2") format("woff2");
            font-display: swap;
        }
        @font-face {
            font-family: "Year of Arabic Poetry";
            src: local("Year of Arabic Poetry"), url("/assets/fonts/moc/Year-of-Arabic-Poetry.woff2") format("woff2");
            font-display: swap;
        }

        /* ══════════════════════════════════════════════
           IKRAM  — DESIGN SYSTEM v2  (LIGHT + DARK)
           All !important flags ensure overrides beat
           Tailwind Play CDN's runtime-injected styles.
        ══════════════════════════════════════════════ */

        /* ── LIGHT MODE (default) ── */
        :root {
            --font-family-site: "Cairo", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
            --font-weight-body: 400;
            --line-height-body: 1.7;
            --ui-page-bg: #edf1f7;
            --ui-page-bg-2: #f5f7fb;
            --ui-component-bg: #ffffff;
            --ui-component-border: #dce4ef;
            --ui-nested-bg: #f4f8fc;
            --ui-nested-border: #e2ebf4;
            --ui-top-widget-bg: #0f172a;
            --ui-top-widget-border: #1f3a5f;
            --ui-top-widget-title: #ffffff;
            --ui-top-widget-text: #cbd5e1;
            --ui-top-widget-icon-bg: #ffffff;
            --ui-top-widget-icon-color: #14b8a6;
            --ui-top-widget-radius: 16px;
            --ui-top-widget-padding: 20px;
            --ui-sidebar-bg: #07111f;
            --ui-sidebar-bg-2: #0d1f32;
            --ui-sidebar-border: #1e293b;
            --ui-sidebar-brand-text: #ffffff;
            --ui-sidebar-text: #cbd5e1;
            --ui-sidebar-muted: #7f95ad;
            --ui-sidebar-link-bg: transparent;
            --ui-sidebar-link-hover-bg: #123047;
            --ui-sidebar-active-bg: #0f766e;
            --ui-sidebar-active-text: #ffffff;
            --ui-sidebar-icon-bg: #102238;
            --ui-sidebar-icon-text: #67e8f9;
            --ui-sidebar-radius: 12px;
            --ui-sidebar-item-height: 44px;
            --ui-sidebar-width: 280px;
            --ui-btn-primary-bg: #0f766e;
            --ui-btn-primary-text: #ffffff;
            --ui-btn-primary-border: #0d9488;
            --ui-btn-secondary-bg: #ffffff;
            --ui-btn-secondary-text: #0f172a;
            --ui-btn-secondary-border: #dbe7f3;
            --ui-btn-danger-bg: #fee2e2;
            --ui-btn-danger-text: #991b1b;
            --ui-btn-danger-border: #fecaca;
            --ui-btn-radius: 12px;
            --ui-btn-padding-y: 10px;
            --ui-btn-padding-x: 16px;
            --ui-btn-border-width: 1px;
            --ui-btn-bg-alpha: 100%;
            --ui-btn-border-alpha: 100%;
            --ui-btn-shadow: 0 8px 20px rgba(var(--ink-rgb), .12);
            --ui-filter-btn-bg-color: #f8fbff;
            --ui-filter-btn-text: #0f172a;
            --ui-filter-btn-border-color: #dbe7f3;
            --ui-filter-btn-active-bg: #0f766e;
            --ui-filter-btn-active-text: #ffffff;
            --ui-filter-btn-radius: 12px;
            --ui-filter-btn-border-width: 1px;
            --ui-filter-btn-bg-alpha: 100%;
            --ui-filter-btn-border-alpha: 100%;
            --ui-filter-btn-shadow: none;
            --ui-filter-btn-bg: color-mix(in srgb, var(--ui-filter-btn-bg-color) var(--ui-filter-btn-bg-alpha), transparent);
            --ui-filter-btn-border: color-mix(in srgb, var(--ui-filter-btn-border-color) var(--ui-filter-btn-border-alpha), transparent);
            --ui-header-btn-bg-color: #14b8a6;
            --ui-header-btn-text: #ffffff;
            --ui-header-btn-border-color: #5eead4;
            --ui-header-btn-radius: 12px;
            --ui-header-btn-border-width: 1px;
            --ui-header-btn-bg-alpha: 100%;
            --ui-header-btn-border-alpha: 100%;
            --ui-header-btn-shadow: 0 14px 34px rgba(var(--ink-rgb), .18);
            --ui-header-btn-bg: color-mix(in srgb, var(--ui-header-btn-bg-color) var(--ui-header-btn-bg-alpha), transparent);
            --ui-header-btn-border: color-mix(in srgb, var(--ui-header-btn-border-color) var(--ui-header-btn-border-alpha), transparent);
            --ui-btn-primary-bg-final: color-mix(in srgb, var(--ui-btn-primary-bg) var(--ui-btn-bg-alpha), transparent);
            --ui-btn-primary-border-final: color-mix(in srgb, var(--ui-btn-primary-border) var(--ui-btn-border-alpha), transparent);
            --ui-btn-secondary-bg-final: color-mix(in srgb, var(--ui-btn-secondary-bg) var(--ui-btn-bg-alpha), transparent);
            --ui-btn-secondary-border-final: color-mix(in srgb, var(--ui-btn-secondary-border) var(--ui-btn-border-alpha), transparent);
            --ui-btn-danger-bg-final: color-mix(in srgb, var(--ui-btn-danger-bg) var(--ui-btn-bg-alpha), transparent);
            --ui-btn-danger-border-final: color-mix(in srgb, var(--ui-btn-danger-border) var(--ui-btn-border-alpha), transparent);
            --ui-card-bg: #ffffff;
            --ui-card-border: #dbe7f3;
            --ui-card-title: #0f172a;
            --ui-card-text: #475569;
            --ui-card-icon-bg: #eef6ff;
            --ui-card-icon-color: #0f766e;
            --ui-card-badge-bg: #f8fbff;
            --ui-card-badge-text: #0f766e;
            --ui-card-badge-border: #bfdbfe;
            --ui-card-button-bg: #0f766e;
            --ui-card-button-text: #ffffff;
            --ui-card-button-border: #0d9488;
            --ui-card-title-size: 15px;
            --ui-card-text-size: 13px;
            --ui-card-button-size: 12px;
            --ui-card-icon-size: 20px;
            --ui-card-radius: 16px;
            --ui-card-inner-radius: 12px;
            --ui-card-padding: 16px;
            --ui-card-gap: 12px;
            --ui-card-border-width: 1px;
            --ui-card-shadow-mode: soft;
            --ui-card-shadow-color: #0f172a;
            --ui-card-shadow-alpha: 10%;
            --ui-card-shadow-x: 0px;
            --ui-card-shadow-y: 8px;
            --ui-card-shadow-blur: 24px;
            --ui-card-shadow-spread: 0px;
            --ui-card-outer-gap: 14px;
            --ui-card-margin-y: 0px;
            --ui-card-min-width: 180px;
            --ui-card-max-width: none;
            --ui-card-cols-mobile: 1;
            --ui-card-cols-tablet: 2;
            --ui-card-cols-desktop: 3;
            --ui-card-cols-wide: 4;
            --ui-card-detail-cols: 2;
            --ui-card-shadow: var(--ui-card-shadow-x) var(--ui-card-shadow-y) var(--ui-card-shadow-blur) var(--ui-card-shadow-spread) color-mix(in srgb, var(--ui-card-shadow-color) var(--ui-card-shadow-alpha), transparent);
            /* Master color tokens: edit these first when changing the site palette. */
            --white: #ffffff;
            --black: #000000;
            --white-rgb: 255,255,255;
            --black-rgb: 0,0,0;
            --p-rgb: 11,18,32;
            --t-rgb: 14,124,120;
            --g-rgb: 193,138,40;
            --surface-rgb: 255,255,255;
            --ink-rgb: 15,23,42;
            --muted-rgb: 136,153,174;
            --success-rgb: 52,211,153;
            --danger-rgb: 190,18,60;
            --warning-rgb: 251,191,36;
            --info-rgb: 59,130,246;
            --sidebar-rgb: 185,200,215;
            --sidebar-muted-rgb: 110,140,160;
            --sidebar-soft-rgb: 170,190,210;
            --sidebar-strong-rgb: 220,236,250;
            --hero-muted-rgb: 140,170,195;
            --hero-text-rgb: 185,210,228;
            --hero-chip-rgb: 190,210,230;
            --auth-hero-start: #060e1a;
            --auth-hero-mid: #091522;
            --auth-hero-end: #0c3138;
            --error-page-bg: #fafafa;
            --error-card-bg: #ffffff;
            --error-text: #777777;
            --error-heading: #222222;
            --error-border: #efefef;
            --error-accent: #dd4814;
            --sidebar-start: #0d1f32;
            --sidebar-mid: #07111e;
            --sidebar-end: #050d18;
            --sidebar-base: #060d18;
            --sidebar-active: #11313b;
            --brand-cyan: #67e8f9;
            --brand-cyan-rgb: 103,232,249;
            --brand-gold-soft: #fef3c7;
            --danger-soft: #fca5a5;
            --gold-bright: #fbbf24;
            --btn-primary-start: #0b1220;
            --btn-primary-end: #0f766e;
            --btn-primary-end-dark: #0a5c5a;
            --service-excellence: #1e40af;
            --service-governance: #7c3aed;
            --service-compliance: #059669;
            --service-cybersecurity: #dc2626;
            --service-quality: #d97706;
            --service-audit: #0891b2;
            --service-accreditation: #7c2d12;
            --service-initiatives: #be185d;
            --service-risk: #9a3412;
            --service-maturity: #1d4ed8;
            --service-warning-bg: #fee2e2;
            --dashboard-evidence: #0d9488;
            --dashboard-conditions: #1d4ed8;
            --dashboard-reports: #be123c;
            --dashboard-settings: #475569;
            --entity-default-primary: #1e40af;
            --entity-default-secondary: #93c5fd;

            --p:   #0b1220;   /* primary navy */
            --t:   #0e7c78;   /* teal brand */
            --g:   #c18a28;   /* gold accent */

            --bg:  var(--ui-page-bg);
            --bg2: var(--ui-page-bg-2);
            --sur: var(--ui-component-bg);
            --sur2:var(--ui-nested-bg);

            --bdr: var(--ui-component-border);
            --bdr2:#c4d0de;

            --tx1: #0f172a;
            --tx2: #475569;
            --tx3: #8899ae;
            --txl: #0e7490;

            --hbg: rgba(255,255,255,.97);
            --hbd: rgba(220,228,239,.90);
            --hsh: 0 1px 0 rgba(220,228,239,.9), 0 4px 20px rgba(15,23,42,.06);

            --cbg: var(--ui-component-bg);
            --cbd: var(--ui-component-border);
            --csh: 0 2px 8px rgba(15,23,42,.07), 0 1px 2px rgba(15,23,42,.04);
            --csh2:0 8px 28px rgba(15,23,42,.14), 0 2px 8px rgba(15,23,42,.06);
            --cnb: var(--ui-nested-bg);
            --cnbd:var(--ui-nested-border);

            --thbg:var(--ui-nested-bg);
            --thbd:var(--ui-nested-border);
            --trtx:#475569;
            --rh:  #edf5ff;

            --ibg: var(--ui-component-bg);
            --ibd: var(--ui-component-border);
            --ifc: #0e7c78;
            --ish: inset 0 1px 2px rgba(15,23,42,.04);
            --iri: 0 0 0 3px rgba(14,124,120,.15);

            --lbl: #0f172a;

            --btx: #ffffff;
            --bsh: 0 6px 18px rgba(15,23,42,.22);
            --bsh2:0 10px 26px rgba(15,23,42,.30);
            --b2bg:#ffffff;
            --b2tx:#0f172a;
            --b2bd:#dce4ef;
            --b2sh:0 2px 6px rgba(15,23,42,.07);

            --asg: #ecfdf5; --ast: #065f46; --asb: #a7f3d0;
            --aeg: #fff1f2; --aet: #9f1239; --aeb: #fecdd3;
            --awg: #fffbeb; --awt: #92400e; --awb: #fde68a;
            --aig: #eff6ff; --ait: #1e40af; --aib: #bfdbfe;

            --swa: var(--white);
            --swt: #0f172a;
            --sws: #475569;

            --sbr: 12px;
            --ibr: 9px;
            --bbr: 9px;
            --tr:  200ms;
        }

        /* ── DARK MODE ── */
        [data-theme="dark"],
        html[data-theme-preset$="_dark"] {
            --ui-page-bg: #070d17;
            --ui-page-bg-2: #0b1220;
            --ui-component-bg: #0d1521;
            --ui-component-border: #182538;
            --ui-nested-bg: #09111e;
            --ui-nested-border: #152030;
            --ui-top-widget-bg: #07111f;
            --ui-top-widget-border: #1e293b;
            --ui-top-widget-title: #ffffff;
            --ui-top-widget-text: #cbd5e1;
            --ui-top-widget-icon-bg: #102238;
            --ui-top-widget-icon-color: #67e8f9;
            --ui-top-widget-radius: 16px;
            --ui-top-widget-padding: 20px;
            --ui-sidebar-bg: #050d18;
            --ui-sidebar-bg-2: #0d1f32;
            --ui-sidebar-border: #182538;
            --ui-sidebar-brand-text: #ffffff;
            --ui-sidebar-text: #cbd5e1;
            --ui-sidebar-muted: #7f95ad;
            --ui-sidebar-link-bg: transparent;
            --ui-sidebar-link-hover-bg: #102238;
            --ui-sidebar-active-bg: #0f766e;
            --ui-sidebar-active-text: #ffffff;
            --ui-sidebar-icon-bg: #102238;
            --ui-sidebar-icon-text: #67e8f9;
            --ui-sidebar-radius: 12px;
            --ui-sidebar-item-height: 44px;
            --ui-sidebar-width: 280px;
            --ui-btn-primary-bg: #0f766e;
            --ui-btn-primary-text: #ffffff;
            --ui-btn-primary-border: #14b8a6;
            --ui-btn-secondary-bg: #111d2e;
            --ui-btn-secondary-text: #e0e8f4;
            --ui-btn-secondary-border: #182538;
            --ui-btn-danger-bg: #3f1d24;
            --ui-btn-danger-text: #fca5a5;
            --ui-btn-danger-border: #7f1d1d;
            --ui-btn-radius: 12px;
            --ui-btn-padding-y: 10px;
            --ui-btn-padding-x: 16px;
            --ui-btn-border-width: 1px;
            --ui-btn-bg-alpha: 100%;
            --ui-btn-border-alpha: 100%;
            --ui-btn-shadow: 0 8px 20px rgba(var(--ink-rgb), .12);
            --ui-filter-btn-bg-color: #111d2e;
            --ui-filter-btn-text: #e0e8f4;
            --ui-filter-btn-border-color: #182538;
            --ui-filter-btn-active-bg: #0f766e;
            --ui-filter-btn-active-text: #ffffff;
            --ui-filter-btn-radius: 12px;
            --ui-filter-btn-border-width: 1px;
            --ui-filter-btn-bg-alpha: 100%;
            --ui-filter-btn-border-alpha: 100%;
            --ui-filter-btn-shadow: none;
            --ui-filter-btn-bg: color-mix(in srgb, var(--ui-filter-btn-bg-color) var(--ui-filter-btn-bg-alpha), transparent);
            --ui-filter-btn-border: color-mix(in srgb, var(--ui-filter-btn-border-color) var(--ui-filter-btn-border-alpha), transparent);
            --ui-header-btn-bg-color: #0f766e;
            --ui-header-btn-text: #ffffff;
            --ui-header-btn-border-color: #14b8a6;
            --ui-header-btn-radius: 12px;
            --ui-header-btn-border-width: 1px;
            --ui-header-btn-bg-alpha: 100%;
            --ui-header-btn-border-alpha: 100%;
            --ui-header-btn-shadow: 0 14px 34px rgba(var(--ink-rgb), .18);
            --ui-header-btn-bg: color-mix(in srgb, var(--ui-header-btn-bg-color) var(--ui-header-btn-bg-alpha), transparent);
            --ui-header-btn-border: color-mix(in srgb, var(--ui-header-btn-border-color) var(--ui-header-btn-border-alpha), transparent);
            --ui-btn-primary-bg-final: color-mix(in srgb, var(--ui-btn-primary-bg) var(--ui-btn-bg-alpha), transparent);
            --ui-btn-primary-border-final: color-mix(in srgb, var(--ui-btn-primary-border) var(--ui-btn-border-alpha), transparent);
            --ui-btn-secondary-bg-final: color-mix(in srgb, var(--ui-btn-secondary-bg) var(--ui-btn-bg-alpha), transparent);
            --ui-btn-secondary-border-final: color-mix(in srgb, var(--ui-btn-secondary-border) var(--ui-btn-border-alpha), transparent);
            --ui-btn-danger-bg-final: color-mix(in srgb, var(--ui-btn-danger-bg) var(--ui-btn-bg-alpha), transparent);
            --ui-btn-danger-border-final: color-mix(in srgb, var(--ui-btn-danger-border) var(--ui-btn-border-alpha), transparent);
            --ui-card-bg: #0d1521;
            --ui-card-border: #182538;
            --ui-card-title: #e0e8f4;
            --ui-card-text: #8899ae;
            --ui-card-icon-bg: #102238;
            --ui-card-icon-color: #67e8f9;
            --ui-card-badge-bg: #09111e;
            --ui-card-badge-text: #93c5fd;
            --ui-card-badge-border: #152030;
            --ui-card-button-bg: #0f766e;
            --ui-card-button-text: #ffffff;
            --ui-card-button-border: #14b8a6;
            --ui-card-title-size: 15px;
            --ui-card-text-size: 13px;
            --ui-card-button-size: 12px;
            --ui-card-icon-size: 20px;
            --ui-card-radius: 16px;
            --ui-card-inner-radius: 12px;
            --ui-card-padding: 16px;
            --ui-card-gap: 12px;
            --ui-card-border-width: 1px;
            --ui-card-shadow-mode: soft;
            --ui-card-shadow-color: #000000;
            --ui-card-shadow-alpha: 18%;
            --ui-card-shadow-x: 0px;
            --ui-card-shadow-y: 8px;
            --ui-card-shadow-blur: 24px;
            --ui-card-shadow-spread: 0px;
            --ui-card-outer-gap: 14px;
            --ui-card-margin-y: 0px;
            --ui-card-min-width: 180px;
            --ui-card-max-width: none;
            --ui-card-cols-mobile: 1;
            --ui-card-cols-tablet: 2;
            --ui-card-cols-desktop: 3;
            --ui-card-cols-wide: 4;
            --ui-card-detail-cols: 2;
            --ui-card-shadow: var(--ui-card-shadow-x) var(--ui-card-shadow-y) var(--ui-card-shadow-blur) var(--ui-card-shadow-spread) color-mix(in srgb, var(--ui-card-shadow-color) var(--ui-card-shadow-alpha), transparent);
            --p-rgb: 5,11,20;
            --t-rgb: 20,184,166;
            --g-rgb: 193,138,40;
            --surface-rgb: 13,21,33;
            --ink-rgb: 224,232,244;
            --muted-rgb: 78,96,112;
            --sidebar-start: #0d1f32;
            --sidebar-mid: #07111e;
            --sidebar-end: #050d18;
            --sidebar-base: #060d18;
            --sidebar-active: #11313b;
            --btn-primary-start: #0e7c78;
            --btn-primary-end: #0a5c5a;

            --bg:  var(--ui-page-bg);
            --bg2: var(--ui-page-bg-2);
            --sur: var(--ui-component-bg);
            --sur2:var(--ui-nested-bg);

            --bdr: var(--ui-component-border);
            --bdr2:#213249;

            --tx1: #e0e8f4;
            --tx2: #8899ae;
            --tx3: #4e6070;
            --txl: #14b8a6;

            --hbg: rgba(9,17,31,.97);
            --hbd: rgba(24,37,56,.95);
            --hsh: 0 1px 0 rgba(24,37,56,.95), 0 4px 20px rgba(var(--black-rgb),.25);

            --cbg: var(--ui-component-bg);
            --cbd: var(--ui-component-border);
            --csh: 0 2px 8px rgba(0,0,0,.18), 0 1px 2px rgba(var(--black-rgb),.12);
            --csh2:0 8px 28px rgba(0,0,0,.32), 0 2px 8px rgba(0,0,0,.18);
            --cnb: var(--ui-nested-bg);
            --cnbd:var(--ui-nested-border);

            --thbg:var(--ui-nested-bg);
            --thbd:var(--ui-nested-border);
            --trtx:#8899ae;
            --rh:  #111d2e;

            --ibg: var(--ui-component-bg);
            --ibd: var(--ui-component-border);
            --ifc: #14b8a6;
            --ish: inset 0 1px 2px rgba(0,0,0,.20);
            --iri: 0 0 0 3px rgba(20,184,166,.14);

            --lbl: #e0e8f4;

            --btx: #ffffff;
            --bsh: 0 6px 18px rgba(14,124,120,.22);
            --bsh2:0 10px 26px rgba(14,124,120,.32);
            --b2bg:#111d2e;
            --b2tx:#e0e8f4;
            --b2bd:#182538;
            --b2sh:0 2px 6px rgba(0,0,0,.15);

            --asg: rgba(6,78,59,.18);   --ast: #6ee7b7; --asb: rgba(52,211,153,.20);
            --aeg: rgba(127,29,29,.18); --aet: #fca5a5; --aeb: rgba(239,68,68,.18);
            --awg: rgba(120,53,15,.18); --awt: #fcd34d; --awb: rgba(245,158,11,.18);
            --aig: rgba(30,58,138,.18); --ait: #93c5fd; --aib: rgba(59,130,246,.18);

            --swa: #0d1521;
            --swt: #e0e8f4;
            --sws: #8899ae;
        }

        /* ── Legacy aliases (all internal pages use these) ── */
        :root {
            --c-primary:              var(--p);
            --c-secondary:            var(--t);
            --c-accent:               var(--g);
            --c-page-bg:              var(--bg);
            --c-page-bg-2:            var(--bg2);
            --c-card-bg:              var(--cbg);
            --c-nested-card-bg:       var(--cnb);
            --c-nested-card-border:   var(--cnbd);
            --c-sidebar-bg:           var(--sidebar-base);
            --c-sidebar-text:         rgba(var(--sidebar-rgb), .85);
            --c-sidebar-active-bg:    var(--sidebar-active);
            --c-sidebar-active-text:  var(--white);
            --c-text-primary:         var(--tx1);
            --c-text-secondary:       var(--tx2);
            --c-text-muted:           var(--tx3);
            --c-heading:              var(--tx1);
            --c-link:                 var(--txl);
            --c-border:               var(--bdr);
            --c-input-bg:             var(--ibg);
            --c-input-focus:          var(--ifc);
            --c-table-header:         var(--thbg);
            --c-table-hover:          var(--rh);
            --c-btn-bg:               var(--p);
            --c-btn-text:             var(--white);
            --c-btn-secondary-bg:     var(--sur);
            --c-btn-secondary-text:   var(--tx1);
            --c-swal-bg:              var(--swa);
            --c-swal-confirm:         var(--p);
            --c-alert-success-bg:     var(--asg); --c-alert-success-text: var(--ast); --c-alert-success-border: var(--asb);
            --c-alert-error-bg:       var(--aeg); --c-alert-error-text:   var(--aet); --c-alert-error-border:   var(--aeb);
            --c-alert-warning-bg:     var(--awg); --c-alert-warning-text: var(--awt); --c-alert-warning-border: var(--awb);
            --c-alert-info-bg:        var(--aig); --c-alert-info-text:    var(--ait); --c-alert-info-border:    var(--aib);
            --shadow-sm:              var(--csh);
            --shadow-card:            var(--csh);
            --shadow-md:              var(--csh2);
            --shadow-lg:              0 24px 64px rgba(var(--ink-rgb), .18);
            --custom-shadow-card:     var(--csh);
            --custom-shadow-inner:    inset 0 1px 0 rgba(var(--white-rgb), .55);
            --custom-shadow-button:   var(--bsh);
            --custom-shadow-nested:   0 1px 4px rgba(var(--ink-rgb), .05);
            --hover-lift:             2px;
            --transition:             200ms;
            --glass-blur:             0px;
            --glass-saturation:       100%;
            --surface-alpha:          100%;
            --nested-surface-alpha:   100%;
            --border-alpha:           100%;
            --input-alpha:            100%;
            --table-header-alpha:     100%;
            --focus-ring-size:        3px;
            --radius-card:            12px;
            --radius-btn:             9px;
            --radius-input:           9px;
            --fs-heading:             22px;
            --fs-component:           14px;
            --fs-small:               12px;
            --fs-nav:                 13px;
            --fs-button:              13px;
            --fs-table:               13px;
            --fs-input:               14px;
            --fs-card:                14px;
            --sidebar-width:          var(--ui-sidebar-width);
            --nav-item-height:        var(--ui-sidebar-item-height);
            --nav-icon-size:          16px;

            /* Compatibility aliases for legacy views. Keep all page views on the same theme source. */
            --card-bg:                var(--ui-card-bg);
            --card-border:            var(--ui-card-border);
            --card-shadow:            var(--ui-card-shadow);
            --card-shadow-hover:      var(--shadow-md);
            --txt-primary:            var(--c-text-primary);
            --txt-secondary:          var(--c-text-secondary);
            --txt-muted:              var(--c-text-muted);
            --bg-surface:             var(--ui-component-bg);
            --bg-inset:               var(--ui-nested-bg);
            --input-bg:               var(--c-input-bg);
            --input-border:           var(--c-border);
            --btn-primary-bg:         var(--ui-btn-primary-bg-final);
            --btn-primary-text:       var(--ui-btn-primary-text);
            --btn-primary-border:     var(--ui-btn-primary-border-final);
            --btn-primary-shadow:     var(--ui-btn-shadow);
            --btn-secondary-bg:       var(--ui-btn-secondary-bg-final);
            --btn-secondary-text:     var(--ui-btn-secondary-text);
            --btn-secondary-border:   var(--ui-btn-secondary-border-final);
            --clr-navy:               var(--ui-top-widget-bg);
            --clr-teal:               var(--c-secondary);
            --clr-teal-light:         var(--ui-card-icon-color);
            --clr-gold:               var(--c-accent);
            --bdr-accent:             var(--ui-card-button-border);
            --badge-teal-bg:          var(--ui-card-badge-bg);
            --badge-teal-bdr:         var(--ui-card-badge-border);
            --badge-teal-txt:         var(--ui-card-badge-text);
            --badge-gold-bg:          var(--c-alert-warning-bg);
            --badge-gold-bdr:         var(--c-alert-warning-border);
            --badge-gold-txt:         var(--c-alert-warning-text);
            --badge-slate-bg:         var(--c-nested-card-bg);
            --badge-slate-bdr:        var(--c-nested-card-border);
            --badge-slate-txt:        var(--c-text-secondary);
            --content-gap:            var(--ui-card-outer-gap);
            --dur:                    var(--transition);
            --ease:                   ease;
            --btn-primary-txt:        var(--ui-btn-primary-text);
            --btn-primary-hover-shadow: var(--shadow-md);
        }

        [data-theme="dark"],
        html[data-theme-preset$="_dark"] {
            --c-primary:              var(--sidebar-end);
            --c-card-bg:              var(--cbg);
            --c-nested-card-bg:       var(--cnb);
            --c-nested-card-border:   var(--cnbd);
            --c-text-primary:         var(--tx1);
            --c-text-secondary:       var(--tx2);
            --c-text-muted:           var(--tx3);
            --c-heading:              var(--tx1);
            --c-link:                 var(--txl);
            --c-border:               var(--bdr);
            --c-input-bg:             var(--ibg);
            --c-input-focus:          var(--ifc);
            --c-table-header:         var(--thbg);
            --c-table-hover:          var(--rh);
            --c-btn-bg:               var(--t);
            --c-btn-secondary-bg:     var(--sur);
            --c-btn-secondary-text:   var(--tx1);
            --c-swal-bg:              var(--swa);
            --c-alert-success-bg:     var(--asg); --c-alert-success-text: var(--ast); --c-alert-success-border: var(--asb);
            --c-alert-error-bg:       var(--aeg); --c-alert-error-text:   var(--aet); --c-alert-error-border:   var(--aeb);
            --c-alert-warning-bg:     var(--awg); --c-alert-warning-text: var(--awt); --c-alert-warning-border: var(--awb);
            --c-alert-info-bg:        var(--aig); --c-alert-info-text:    var(--ait); --c-alert-info-border:    var(--aib);
            --shadow-lg:              0 24px 64px rgba(var(--black-rgb), .36);
            --custom-shadow-button:   var(--bsh);
            --card-bg:                var(--ui-card-bg);
            --card-border:            var(--ui-card-border);
            --card-shadow:            var(--ui-card-shadow);
            --card-shadow-hover:      var(--shadow-md);
            --txt-primary:            var(--c-text-primary);
            --txt-secondary:          var(--c-text-secondary);
            --txt-muted:              var(--c-text-muted);
            --bg-surface:             var(--ui-component-bg);
            --bg-inset:               var(--ui-nested-bg);
            --input-bg:               var(--c-input-bg);
            --input-border:           var(--c-border);
            --btn-primary-bg:         var(--ui-btn-primary-bg-final);
            --btn-primary-text:       var(--ui-btn-primary-text);
            --btn-primary-border:     var(--ui-btn-primary-border-final);
            --btn-primary-shadow:     var(--ui-btn-shadow);
            --btn-secondary-bg:       var(--ui-btn-secondary-bg-final);
            --btn-secondary-text:     var(--ui-btn-secondary-text);
            --btn-secondary-border:   var(--ui-btn-secondary-border-final);
            --clr-navy:               var(--ui-top-widget-bg);
            --clr-teal:               var(--c-secondary);
            --clr-teal-light:         var(--ui-card-icon-color);
            --clr-gold:               var(--c-accent);
            --bdr-accent:             var(--ui-card-button-border);
            --badge-teal-bg:          var(--ui-card-badge-bg);
            --badge-teal-bdr:         var(--ui-card-badge-border);
            --badge-teal-txt:         var(--ui-card-badge-text);
            --badge-gold-bg:          var(--c-alert-warning-bg);
            --badge-gold-bdr:         var(--c-alert-warning-border);
            --badge-gold-txt:         var(--c-alert-warning-text);
            --badge-slate-bg:         var(--c-nested-card-bg);
            --badge-slate-bdr:        var(--c-nested-card-border);
            --badge-slate-txt:        var(--c-text-secondary);
            --content-gap:            var(--ui-card-outer-gap);
            --dur:                    var(--transition);
            --ease:                   ease;
            --btn-primary-txt:        var(--ui-btn-primary-text);
            --btn-primary-hover-shadow: var(--shadow-md);
        }

        /* Legacy view theme bridge: maps older utility-heavy views back to the active theme. */
        .theme-legacy-view {
            color: var(--txt-primary) !important;
            background: transparent !important;
        }
        .theme-legacy-view .bg-white,
        .theme-legacy-view .bg-slate-50,
        .theme-legacy-view .bg-slate-100,
        .theme-legacy-view .bg-slate-900\/\[0\.02\] {
            background: var(--card-bg) !important;
        }
        .theme-legacy-view .bg-slate-900,
        .theme-legacy-view .bg-slate-950,
        .theme-legacy-view .bg-slate-800 {
            background: var(--ui-top-widget-bg) !important;
        }
        .theme-legacy-view .bg-slate-200,
        .theme-legacy-view .bg-slate-300 {
            background: var(--bg-inset) !important;
        }
        .theme-legacy-view .text-slate-900,
        .theme-legacy-view .text-slate-800,
        .theme-legacy-view .text-slate-700,
        .theme-legacy-view .text-slate-600 {
            color: var(--txt-primary) !important;
        }
        .theme-legacy-view .text-slate-500,
        .theme-legacy-view .text-slate-400,
        .theme-legacy-view .text-slate-300 {
            color: var(--txt-muted) !important;
        }
        .theme-legacy-view .text-teal-400,
        .theme-legacy-view .text-teal-600,
        .theme-legacy-view .text-teal-700,
        .theme-legacy-view .text-teal-900 {
            color: var(--c-secondary) !important;
        }
        .theme-legacy-view .border-slate-100,
        .theme-legacy-view .border-slate-200,
        .theme-legacy-view .border-slate-200\/80,
        .theme-legacy-view .border-slate-200\/60,
        .theme-legacy-view .border-slate-300,
        .theme-legacy-view .border-slate-700\/60,
        .theme-legacy-view .border-slate-800 {
            border-color: var(--card-border) !important;
        }
        .theme-legacy-view .shadow-sm,
        .theme-legacy-view .shadow-md {
            box-shadow: var(--card-shadow) !important;
        }
        .theme-legacy-view input,
        .theme-legacy-view select,
        .theme-legacy-view textarea {
            background: var(--input-bg) !important;
            border-color: var(--input-border) !important;
            color: var(--txt-primary) !important;
        }
        .theme-legacy-view .bg-teal-50,
        .theme-legacy-view .bg-teal-100,
        .theme-legacy-view .bg-teal-500\/10 {
            background: var(--badge-teal-bg) !important;
        }
        .theme-legacy-view .border-teal-500\/20 {
            border-color: var(--badge-teal-bdr) !important;
        }
        .theme-legacy-view .bg-amber-50,
        .theme-legacy-view .bg-amber-100 {
            background: var(--c-alert-warning-bg) !important;
        }
        .theme-legacy-view .text-amber-500,
        .theme-legacy-view .text-amber-800 {
            color: var(--c-alert-warning-text) !important;
        }
        .theme-legacy-view .border-amber-200 {
            border-color: var(--c-alert-warning-border) !important;
        }
        .theme-legacy-view .bg-red-50,
        .theme-legacy-view .bg-emerald-50 {
            background: var(--c-alert-error-bg) !important;
        }
        .theme-legacy-view .text-red-500,
        .theme-legacy-view .text-red-800 {
            color: var(--c-alert-error-text) !important;
        }
        .theme-legacy-view .border-red-200,
        .theme-legacy-view .border-emerald-200 {
            border-color: var(--c-alert-error-border) !important;
        }
        .theme-legacy-view .bg-purple-100,
        .theme-legacy-view .bg-blue-100 {
            background: var(--c-alert-info-bg) !important;
        }
        .theme-legacy-view .text-purple-700,
        .theme-legacy-view .text-blue-700 {
            color: var(--c-alert-info-text) !important;
        }
        .theme-legacy-view .border-purple-200,
        .theme-legacy-view .border-blue-200 {
            border-color: var(--c-alert-info-border) !important;
        }