/* =========================================================
   LMS Theme Engine
   Semantic tokens are the single source of truth for all themes.
   ========================================================= */

:root {
    color-scheme: light;
    --font-family: 'Sarabun', sans-serif;
    --header-height: 70px;
    --drawer-top: var(--header-height);
    --background-intensity: .35;
    --effect-intensity: .55;
    --effect-density: .5;

    /* Stable stacking order: content < header < overlay < drawer < dropdown < modal < loading. */
    --z-background: -3;
    --z-effects: -2;
    --z-content: 1;
    /* Drawer lives inside Header, so the Header stacking context must stay above the sibling Overlay. */
    --z-overlay: 1090;
    --z-header: 1200;
    --z-drawer: 1210;
    --z-dropdown: 1250;
    --z-modal: 2000;
    --z-loading: 999999;
    --z-skip-link: 1000000;

    --primary: #173b67;
    --secondary: #18735d;
    --accent: #2f75d6;
    --success: #15803d;
    --warning: #b45309;
    --danger: #b91c1c;
    --info: #0369a1;

    --bg: #eef4f8;
    --surface-card: #ffffff;
    --surface-muted: #f7fafc;
    --surface-subtle: #edf3f7;
    --surface-strong: #dbe6ee;
    --card-bg: var(--surface-card);
    --card-text: var(--text);
    --card-text-muted: var(--text-muted);
    --text: #30465d;
    --text-strong: #17283b;
    --text-muted: #5b7086;
    --text-light: var(--text-muted);
    --border: #cbd8e2;

    --header-bg: #173b67;
    --header-text: #ffffff;
    --header-text-muted: #dce8f6;
    --header-icon: #8fc7ff;
    --icon-accent: var(--accent);
    --icon-warning: var(--warning);
    --icon-danger: var(--danger);
    --footer-bg: #173b67;
    --footer-text: #edf6ff;
    --footer-muted: #c7daed;
    --drawer-bg: #ffffff;
    --drawer-text: #1f354b;
    --drawer-muted: var(--text-muted);
    --dropdown-bg: #ffffff;
    --dropdown-text: #1f354b;
    --overlay-bg: rgba(8, 24, 40, .58);

    --button-bg: #2f75d6;
    --button-text: #ffffff;
    --success-button-text: #ffffff;
    --warning-button-text: #ffffff;
    --danger-button-text: #ffffff;
    --button-hover: #245fae;
    --button-secondary-bg: var(--surface-strong);
    --button-secondary-text: var(--text-strong);
    --input-bg: var(--surface-muted);
    --input-text: var(--text);
    --input-placeholder: var(--text-muted);
    --table-header-bg: #e7eff6;
    --table-header-text: #173b67;
    --table-row-hover: #eff6fb;
    --modal-bg: var(--surface-card);
    --modal-text: var(--text);
    --tooltip-bg: var(--text-strong);
    --tooltip-text: var(--surface-card);

    --success-bg: #dcfce7;
    --success-text: #14532d;
    --warning-bg: #fef3c7;
    --warning-text: #78350f;
    --danger-bg: #fee2e2;
    --danger-text: #7f1d1d;
    --info-bg: #e0f2fe;
    --info-text: #0c4a6e;

    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --shadow-sm: 0 2px 8px rgba(19, 52, 80, .08);
    --shadow-md: 0 10px 28px rgba(19, 52, 80, .13);
    --shadow-lg: 0 24px 60px rgba(7, 27, 45, .24);
    --focus-ring: #75b6ff;

    --theme-background-gradient:
        radial-gradient(circle at 12% 5%, rgba(47, 117, 214, .14), transparent 34%),
        radial-gradient(circle at 88% 18%, rgba(24, 115, 93, .12), transparent 32%),
        linear-gradient(145deg, #f6fafc 0%, #eaf2f7 100%);
    --theme-pattern:
        linear-gradient(30deg, rgba(23, 59, 103, .08) 12%, transparent 12.5%, transparent 87%, rgba(23, 59, 103, .08) 87.5%),
        linear-gradient(150deg, rgba(24, 115, 93, .06) 12%, transparent 12.5%, transparent 87%, rgba(24, 115, 93, .06) 87.5%);
    --header-pattern: linear-gradient(90deg, transparent, rgba(255, 255, 255, .08), transparent);
    --footer-pattern: linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
}

html[data-color-mode="dark"] {
    color-scheme: dark;
}


/* Prevent temporary low-contrast interpolation while switching complete theme token sets. */
html.theme-switching *,
html.theme-switching *::before,
html.theme-switching *::after {
    transition: none !important;
}

/* ---------------- Classic ---------------- */
html[data-theme="classic"][data-color-mode="light"] {
    --primary: #173b67;
    --secondary: #18735d;
    --accent: #2f75d6;
    --bg: #eef4f8;
    --surface-card: #ffffff;
    --surface-muted: #f7fafc;
    --surface-subtle: #edf3f7;
    --surface-strong: #dbe6ee;
    --text: #30465d;
    --text-strong: #17283b;
    --text-muted: #5b7086;
    --border: #cbd8e2;
    --header-bg: #173b67;
    --header-text: #ffffff;
    --header-text-muted: #dce8f6;
    --header-icon: #8fc7ff;
    --footer-bg: #16365e;
    --footer-text: #f4f9ff;
    --footer-muted: #c7daed;
    --drawer-bg: #ffffff;
    --drawer-text: #1f354b;
    --dropdown-bg: #ffffff;
    --dropdown-text: #1f354b;
    --button-bg: #2f75d6;
    --button-hover: #245fae;
    --table-header-bg: #e7eff6;
    --theme-background-gradient:
        radial-gradient(circle at 12% 5%, rgba(47, 117, 214, .14), transparent 34%),
        radial-gradient(circle at 88% 18%, rgba(24, 115, 93, .12), transparent 32%),
        linear-gradient(145deg, #f6fafc 0%, #eaf2f7 100%);
}
html[data-theme="classic"][data-color-mode="dark"] {
    --primary: #9ac7ff;
    --secondary: #63d6b7;
    --accent: #66a8ff;
    --bg: #0d1824;
    --surface-card: #142433;
    --surface-muted: #101e2b;
    --surface-subtle: #1a2b3a;
    --surface-strong: #24394b;
    --text: #d7e4ef;
    --text-strong: #f4f8fb;
    --text-muted: #a8bdcf;
    --border: #30485b;
    --header-bg: #09131d;
    --header-text: #f7fbff;
    --header-text-muted: #bed2e4;
    --header-icon: #78b7ff;
    --footer-bg: #09131d;
    --footer-text: #f7fbff;
    --footer-muted: #adc3d6;
    --drawer-bg: #122230;
    --drawer-text: #edf6ff;
    --dropdown-bg: #172938;
    --dropdown-text: #edf6ff;
    --button-bg: #2f70c4;
    --button-hover: #2a65b0;
    --input-bg: #0f1d29;
    --input-text: #edf6ff;
    --table-header-bg: #1c3041;
    --table-header-text: #eaf4ff;
    --modal-bg: #142433;
    --modal-text: #e9f2f9;
    --overlay-bg: rgba(0, 5, 10, .72);
    --shadow-sm: 0 2px 10px rgba(0, 0, 0, .22);
    --shadow-md: 0 12px 32px rgba(0, 0, 0, .34);
    --shadow-lg: 0 28px 70px rgba(0, 0, 0, .52);
    --theme-background-gradient:
        radial-gradient(circle at 12% 5%, rgba(74, 142, 224, .16), transparent 34%),
        radial-gradient(circle at 88% 18%, rgba(47, 164, 133, .12), transparent 32%),
        linear-gradient(145deg, #0d1824 0%, #101e2b 100%);
}

/* ---------------- Luxury ---------------- */
html[data-theme="luxury"][data-color-mode="light"] {
    --primary: #3d235a;
    --secondary: #7b4b1e;
    --accent: #b7832f;
    --bg: #f6efe4;
    --surface-card: #fffaf0;
    --surface-muted: #f8f0e4;
    --surface-subtle: #efe2cf;
    --surface-strong: #dfcdb0;
    --text: #4d3f36;
    --text-strong: #241b22;
    --text-muted: #726257;
    --border: #d7bf99;
    --header-bg: #17111f;
    --header-text: #fff7df;
    --header-text-muted: #e5d2ac;
    --header-icon: #e7bd63;
    --footer-bg: #17111f;
    --footer-text: #fff7df;
    --footer-muted: #dcc69c;
    --drawer-bg: #fffaf0;
    --drawer-text: #2f2330;
    --dropdown-bg: #fffaf0;
    --dropdown-text: #2f2330;
    --button-bg: #8f6422;
    --button-hover: #6e4b18;
    --button-text: #ffffff;
    --table-header-bg: #eadcc5;
    --table-header-text: #3b2746;
    --radius-sm: 4px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --shadow-sm: 0 3px 10px rgba(57, 35, 42, .12);
    --shadow-md: 0 16px 38px rgba(57, 35, 42, .18);
    --shadow-lg: 0 30px 70px rgba(30, 18, 27, .28);
    --theme-background-gradient:
        radial-gradient(circle at 20% 10%, rgba(183, 131, 47, .16), transparent 30%),
        linear-gradient(135deg, #fffaf0, #f1e4d0);
    --theme-pattern:
        linear-gradient(135deg, transparent 45%, rgba(143, 100, 34, .1) 46%, rgba(143, 100, 34, .1) 48%, transparent 49%),
        linear-gradient(45deg, transparent 45%, rgba(61, 35, 90, .07) 46%, rgba(61, 35, 90, .07) 48%, transparent 49%);
    --header-pattern: repeating-linear-gradient(90deg, transparent 0 32px, rgba(231, 189, 99, .22) 33px 34px, transparent 35px 66px);
    --footer-pattern: repeating-linear-gradient(90deg, transparent 0 22px, rgba(231, 189, 99, .16) 23px 24px, transparent 25px 46px);
}
html[data-theme="luxury"][data-color-mode="dark"] {
    --primary: #e0bf77;
    --secondary: #b898e4;
    --accent: #d5a84f;
    --bg: #0c0910;
    --surface-card: #17121c;
    --surface-muted: #120e16;
    --surface-subtle: #211928;
    --surface-strong: #30243a;
    --text: #e8dfd4;
    --text-strong: #fff9ee;
    --text-muted: #c1b2a3;
    --border: #4f3d34;
    --header-bg: #08060b;
    --header-text: #fff5d8;
    --header-text-muted: #d9c59e;
    --header-icon: #e4b956;
    --footer-bg: #08060b;
    --footer-text: #fff5d8;
    --footer-muted: #cdb88f;
    --drawer-bg: #17121c;
    --drawer-text: #fff4e5;
    --dropdown-bg: #1d1623;
    --dropdown-text: #fff4e5;
    --button-bg: #8a631f;
    --button-hover: #7c591c;
    --input-bg: #100c14;
    --input-text: #f5ede4;
    --table-header-bg: #261d2e;
    --table-header-text: #f6e8c7;
    --modal-bg: #17121c;
    --modal-text: #f5ede4;
    --overlay-bg: rgba(0, 0, 0, .78);
    --radius-sm: 4px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --shadow-sm: 0 3px 14px rgba(0, 0, 0, .35);
    --shadow-md: 0 18px 44px rgba(0, 0, 0, .5);
    --shadow-lg: 0 34px 80px rgba(0, 0, 0, .68);
    --theme-background-gradient:
        radial-gradient(circle at 18% 8%, rgba(213, 168, 79, .15), transparent 30%),
        linear-gradient(135deg, #0c0910, #15101a);
}

/* ---------------- Minimal ---------------- */
html[data-theme="minimal"][data-color-mode="light"] {
    --primary: #20242a;
    --secondary: #5d6b79;
    --accent: #4f6b86;
    --bg: #f8f9fa;
    --surface-card: #ffffff;
    --surface-muted: #fbfbfc;
    --surface-subtle: #f1f3f5;
    --surface-strong: #e6e9ec;
    --text: #38414a;
    --text-strong: #181c20;
    --text-muted: #66717b;
    --border: #dfe3e6;
    --header-bg: #ffffff;
    --header-text: #20242a;
    --header-text-muted: #5f6871;
    --header-icon: #4f6b86;
    --footer-bg: #ffffff;
    --footer-text: #3d464f;
    --footer-muted: #6c757d;
    --drawer-bg: #ffffff;
    --drawer-text: #20242a;
    --dropdown-bg: #ffffff;
    --dropdown-text: #20242a;
    --button-bg: #303840;
    --button-hover: #171b1f;
    --table-header-bg: #f2f4f6;
    --table-header-text: #20242a;
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --shadow-sm: 0 1px 3px rgba(22, 28, 34, .06);
    --shadow-md: 0 6px 18px rgba(22, 28, 34, .08);
    --shadow-lg: 0 18px 44px rgba(22, 28, 34, .14);
    --theme-background-gradient: linear-gradient(180deg, #fbfbfc, #f4f6f7);
    --theme-pattern: linear-gradient(rgba(32, 36, 42, .025) 1px, transparent 1px), linear-gradient(90deg, rgba(32, 36, 42, .025) 1px, transparent 1px);
}
html[data-theme="minimal"][data-color-mode="dark"] {
    --primary: #f0f3f5;
    --secondary: #a9b3bd;
    --accent: #8eb1d0;
    --bg: #111315;
    --surface-card: #191c1f;
    --surface-muted: #151719;
    --surface-subtle: #202428;
    --surface-strong: #2b3035;
    --text: #d8dde2;
    --text-strong: #f8f9fa;
    --text-muted: #a0a9b1;
    --border: #343a40;
    --header-bg: #151719;
    --header-text: #f8f9fa;
    --header-text-muted: #b3bbc3;
    --header-icon: #8eb1d0;
    --footer-bg: #151719;
    --footer-text: #f0f3f5;
    --footer-muted: #a7b0b8;
    --drawer-bg: #191c1f;
    --drawer-text: #f0f3f5;
    --dropdown-bg: #202428;
    --dropdown-text: #f0f3f5;
    --button-bg: #d5dce2;
    --button-text: #151719;
    --button-hover: #ffffff;
    --input-bg: #131618;
    --input-text: #edf0f2;
    --table-header-bg: #24282c;
    --table-header-text: #f0f3f5;
    --modal-bg: #191c1f;
    --modal-text: #edf0f2;
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --theme-background-gradient: linear-gradient(180deg, #111315, #151719);
}

/* ---------------- High-tech ---------------- */
html[data-theme="hightech"][data-color-mode="light"] {
    --primary: #13213f;
    --secondary: #5d20b8;
    --accent: #0077e6;
    --bg: #edf6ff;
    --surface-card: #fafdff;
    --surface-muted: #f3f9ff;
    --surface-subtle: #e5f1fb;
    --surface-strong: #cfe4f5;
    --text: #273b50;
    --text-strong: #0b1a2c;
    --text-muted: #536d86;
    --border: #b8d3e7;
    --header-bg: #0a1328;
    --header-text: #e8fbff;
    --header-text-muted: #a7dce9;
    --header-icon: #30e3ff;
    --footer-bg: #0a1328;
    --footer-text: #e8fbff;
    --footer-muted: #a7dce9;
    --drawer-bg: #f8fcff;
    --drawer-text: #10263b;
    --dropdown-bg: #f8fcff;
    --dropdown-text: #10263b;
    --button-bg: #006dd6;
    --button-hover: #004f9f;
    --table-header-bg: #dceefa;
    --focus-ring: #20c9ff;
    --radius-sm: 3px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --shadow-sm: 0 0 10px rgba(0, 119, 230, .12);
    --shadow-md: 0 0 24px rgba(0, 119, 230, .18);
    --shadow-lg: 0 0 46px rgba(38, 37, 180, .26);
    --theme-background-gradient:
        radial-gradient(circle at 80% 15%, rgba(93, 32, 184, .12), transparent 28%),
        radial-gradient(circle at 14% 12%, rgba(0, 119, 230, .13), transparent 30%),
        linear-gradient(145deg, #f8fcff, #e8f4ff);
    --theme-pattern:
        linear-gradient(rgba(0, 119, 230, .08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(93, 32, 184, .07) 1px, transparent 1px);
    --header-pattern: repeating-linear-gradient(90deg, transparent 0 28px, rgba(48, 227, 255, .16) 29px 30px);
}
html[data-theme="hightech"][data-color-mode="dark"] {
    --primary: #7ad9ff;
    --secondary: #bf84ff;
    --accent: #16d8ff;
    --bg: #050814;
    --surface-card: #0b1022;
    --surface-muted: #080c1b;
    --surface-subtle: #10172d;
    --surface-strong: #18233e;
    --text: #c9e7f4;
    --text-strong: #f2fcff;
    --text-muted: #91b6c8;
    --border: #25415d;
    --header-bg: #03050c;
    --header-text: #e8fbff;
    --header-text-muted: #96c8d8;
    --header-icon: #25ecff;
    --footer-bg: #03050c;
    --footer-text: #e8fbff;
    --footer-muted: #96c8d8;
    --drawer-bg: #080e1d;
    --drawer-text: #e7faff;
    --dropdown-bg: #0c1427;
    --dropdown-text: #e7faff;
    --button-bg: #006bd6;
    --button-hover: #0060c1;
    --input-bg: #070c19;
    --input-text: #e7faff;
    --table-header-bg: #111a31;
    --table-header-text: #dff9ff;
    --modal-bg: #0b1022;
    --modal-text: #dff9ff;
    --focus-ring: #16d8ff;
    --radius-sm: 3px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --shadow-sm: 0 0 12px rgba(22, 216, 255, .13);
    --shadow-md: 0 0 28px rgba(22, 216, 255, .2);
    --shadow-lg: 0 0 58px rgba(160, 73, 255, .28);
    --theme-background-gradient:
        radial-gradient(circle at 80% 15%, rgba(172, 73, 255, .16), transparent 30%),
        radial-gradient(circle at 14% 12%, rgba(22, 216, 255, .14), transparent 34%),
        linear-gradient(145deg, #050814, #070d1d);
}

/* ---------------- Nature ---------------- */
html[data-theme="nature"][data-color-mode="light"] {
    --primary: #24573b;
    --secondary: #7b5d2d;
    --accent: #3f7d4b;
    --bg: #f2f2df;
    --surface-card: #fffdf0;
    --surface-muted: #f7f5e8;
    --surface-subtle: #ecebd6;
    --surface-strong: #dce0bf;
    --text: #44513f;
    --text-strong: #213125;
    --text-muted: #66705e;
    --border: #c9cfaa;
    --header-bg: #24573b;
    --header-text: #fffdf0;
    --header-text-muted: #dce9d1;
    --header-icon: #d8e58c;
    --footer-bg: #4d3b22;
    --footer-text: #fff8e6;
    --footer-muted: #e4d5b6;
    --drawer-bg: #fffdf0;
    --drawer-text: #29402c;
    --dropdown-bg: #fffdf0;
    --dropdown-text: #29402c;
    --button-bg: #397746;
    --button-hover: #285c34;
    --table-header-bg: #e2e6c9;
    --radius-sm: 10px;
    --radius-md: 18px;
    --radius-lg: 26px;
    --shadow-sm: 0 3px 10px rgba(57, 75, 44, .09);
    --shadow-md: 0 12px 30px rgba(57, 75, 44, .14);
    --shadow-lg: 0 26px 62px rgba(57, 75, 44, .24);
    --theme-background-gradient:
        radial-gradient(circle at 15% 10%, rgba(224, 210, 118, .22), transparent 30%),
        linear-gradient(145deg, #fbf8e8, #edf0d9);
    --theme-pattern:
        radial-gradient(ellipse at 10% 20%, rgba(63, 125, 75, .09) 0 10%, transparent 11%),
        radial-gradient(ellipse at 85% 70%, rgba(123, 93, 45, .07) 0 12%, transparent 13%);
    --header-pattern: repeating-linear-gradient(125deg, transparent 0 28px, rgba(216, 229, 140, .1) 29px 31px);
    --footer-pattern: repeating-linear-gradient(45deg, transparent 0 24px, rgba(255, 248, 230, .06) 25px 26px);
}
html[data-theme="nature"][data-color-mode="dark"] {
    --primary: #b8d893;
    --secondary: #d2ae70;
    --accent: #77b982;
    --bg: #10170f;
    --surface-card: #182218;
    --surface-muted: #131c13;
    --surface-subtle: #202d20;
    --surface-strong: #2b3b2b;
    --text: #d9e4d4;
    --text-strong: #f3f8ef;
    --text-muted: #a9baa2;
    --border: #3c4d39;
    --header-bg: #0d170f;
    --header-text: #f2f9ed;
    --header-text-muted: #bcd0b5;
    --header-icon: #d6e98f;
    --footer-bg: #171109;
    --footer-text: #fff4dd;
    --footer-muted: #d2c09d;
    --drawer-bg: #172117;
    --drawer-text: #f0f7ec;
    --dropdown-bg: #1d2a1d;
    --dropdown-text: #f0f7ec;
    --button-bg: #3c7a48;
    --button-hover: #366e41;
    --input-bg: #121a12;
    --input-text: #edf5e8;
    --table-header-bg: #223022;
    --table-header-text: #edf5e8;
    --modal-bg: #182218;
    --modal-text: #edf5e8;
    --radius-sm: 10px;
    --radius-md: 18px;
    --radius-lg: 26px;
    --theme-background-gradient:
        radial-gradient(circle at 15% 10%, rgba(183, 201, 100, .12), transparent 30%),
        linear-gradient(145deg, #10170f, #151e14);
}

/* ---------------- Floral ---------------- */
html[data-theme="floral"][data-color-mode="light"] {
    --primary: #74416a;
    --secondary: #b96c7f;
    --accent: #c45a7d;
    --bg: #fff3f6;
    --surface-card: #fffafb;
    --surface-muted: #fff6f8;
    --surface-subtle: #f9e8ee;
    --surface-strong: #efd5df;
    --text: #5a4450;
    --text-strong: #34202b;
    --text-muted: #7f6572;
    --border: #e7c5d2;
    --header-bg: #7a3f68;
    --header-text: #fff8fb;
    --header-text-muted: #f4dbe5;
    --header-icon: #ffd1df;
    --footer-bg: #69385d;
    --footer-text: #fff8fb;
    --footer-muted: #eecfdb;
    --drawer-bg: #fffafb;
    --drawer-text: #4b2d3c;
    --dropdown-bg: #fffafb;
    --dropdown-text: #4b2d3c;
    --button-bg: #b84e72;
    --button-hover: #923b5a;
    --table-header-bg: #f5dfe7;
    --radius-sm: 12px;
    --radius-md: 22px;
    --radius-lg: 30px;
    --shadow-sm: 0 3px 12px rgba(126, 64, 92, .09);
    --shadow-md: 0 14px 34px rgba(126, 64, 92, .15);
    --shadow-lg: 0 28px 68px rgba(126, 64, 92, .24);
    --theme-background-gradient:
        radial-gradient(circle at 15% 8%, rgba(236, 159, 184, .24), transparent 28%),
        radial-gradient(circle at 88% 20%, rgba(184, 151, 230, .18), transparent 30%),
        linear-gradient(145deg, #fffafb, #fdeef4);
    --theme-pattern:
        radial-gradient(circle at 20% 20%, rgba(196, 90, 125, .08) 0 6px, transparent 7px),
        radial-gradient(circle at 80% 60%, rgba(116, 65, 106, .07) 0 8px, transparent 9px);
    --header-pattern: repeating-linear-gradient(120deg, transparent 0 26px, rgba(255, 209, 223, .12) 27px 29px);
    --footer-pattern: repeating-linear-gradient(60deg, transparent 0 22px, rgba(255, 248, 251, .08) 23px 25px);
}
html[data-theme="floral"][data-color-mode="dark"] {
    --primary: #f2b7d0;
    --secondary: #c7a0f2;
    --accent: #ef79a4;
    --bg: #1b1018;
    --surface-card: #281823;
    --surface-muted: #21141d;
    --surface-subtle: #32202c;
    --surface-strong: #432b3b;
    --text: #ead8e1;
    --text-strong: #fff6fa;
    --text-muted: #c5aab7;
    --border: #563848;
    --header-bg: #170c14;
    --header-text: #fff5fa;
    --header-text-muted: #e7c7d5;
    --header-icon: #ffb8d2;
    --footer-bg: #170c14;
    --footer-text: #fff5fa;
    --footer-muted: #d9b9c7;
    --drawer-bg: #261720;
    --drawer-text: #fff2f8;
    --dropdown-bg: #30202b;
    --dropdown-text: #fff2f8;
    --button-bg: #b84d73;
    --button-hover: #a64568;
    --input-bg: #1d121a;
    --input-text: #f8eaf1;
    --table-header-bg: #36232f;
    --table-header-text: #f8eaf1;
    --modal-bg: #281823;
    --modal-text: #f8eaf1;
    --radius-sm: 12px;
    --radius-md: 22px;
    --radius-lg: 30px;
    --theme-background-gradient:
        radial-gradient(circle at 15% 8%, rgba(239, 121, 164, .16), transparent 28%),
        radial-gradient(circle at 88% 20%, rgba(177, 116, 239, .14), transparent 30%),
        linear-gradient(145deg, #1b1018, #22131d);
}

/* ---------------- Custom ---------------- */
html[data-theme="custom"][data-color-mode="light"] {
    --theme-background-gradient:
        radial-gradient(circle at 12% 8%, color-mix(in srgb, var(--primary) 22%, transparent), transparent 34%),
        radial-gradient(circle at 88% 18%, color-mix(in srgb, var(--secondary) 18%, transparent), transparent 32%),
        linear-gradient(145deg, var(--bg), color-mix(in srgb, var(--bg) 88%, var(--primary)));
    --theme-pattern:
        linear-gradient(45deg, color-mix(in srgb, var(--primary) 7%, transparent) 25%, transparent 25%),
        linear-gradient(-45deg, color-mix(in srgb, var(--secondary) 7%, transparent) 25%, transparent 25%);
}
html[data-theme="custom"][data-color-mode="dark"] {
    --theme-background-gradient:
        radial-gradient(circle at 12% 8%, color-mix(in srgb, var(--primary) 20%, transparent), transparent 34%),
        radial-gradient(circle at 88% 18%, color-mix(in srgb, var(--secondary) 16%, transparent), transparent 32%),
        linear-gradient(145deg, var(--bg), color-mix(in srgb, var(--bg) 90%, #000000));
    --theme-pattern:
        linear-gradient(45deg, color-mix(in srgb, var(--primary) 7%, transparent) 25%, transparent 25%),
        linear-gradient(-45deg, color-mix(in srgb, var(--secondary) 7%, transparent) 25%, transparent 25%);
}

/* ---------------- Ocean (imported from user-supplied assets.zip) ---------------- */
html[data-theme="ocean"][data-color-mode="light"] {
    /* Exact Ocean palette aliases from the supplied assets.zip */
    --page-bg:#dff6fa; --page-bg-alt:#c5edf3;
    --surface-1:#f8feff; --surface-2:#eaf9fb; --surface-3:#d6f0f3; --surface-elevated:#fbffff;
    --text-primary:#123541; --text-secondary:#52727b; --text-disabled:#839aa0;
    --primary-hover:#05647d; --primary-soft:#d4f1f6; --secondary-hover:#0c7a6e; --accent-soft:#fff0d9;
    --header-muted:#4e727d; --header-border:#4fb8ca;
    --footer-border:#d7aa66; --drawer-muted:#55747d; --drawer-border:#b4e0e7;
    --menu-hover-bg:#d9f4f7; --menu-hover-text:#05647d;
    --card-bg:#f8feff; --card-text:#123541; --card-muted:#52727b; --card-border:#addce4;
    --table-bg:#f8feff; --table-head-bg:#087e9b; --table-head-text:#fff; --table-row-hover:#e5f8fa;
    --input-placeholder:#759096; --input-border:#9bcdd6; --input-focus:#0794b3;
    --primary: #087e9b;
    --secondary: #119b8b;
    --accent: #d89b4a;
    --bg: #dff6fa;
    --surface-card: #f8feff;
    --surface-muted: #eefbfd;
    --surface-subtle: #d9f1f5;
    --surface-strong: #c6e7ee;
    --text: #123541;
    --text-strong: #0b2d37;
    --text-muted: #52727b;
    --border: #addce4;
    --header-bg: linear-gradient(180deg, rgba(226, 249, 252, .97), rgba(196, 237, 244, .95));
    --header-text: #0f5064;
    --header-text-muted: #4e727d;
    --header-icon: #0786a5;
    --footer-bg: linear-gradient(180deg, #0b687b, #074654);
    --footer-text: #f0feff;
    --footer-muted: #c7eef3;
    --drawer-bg: #f2fdff;
    --drawer-text: #104e60;
    --dropdown-bg: #f8feff;
    --dropdown-text: #104e60;
    --button-bg: #087e9b;
    --button-hover: #05647d;
    --table-header-bg: #087e9b;
    --table-header-text: #ffffff;
    --modal-bg: #f8feff;
    --modal-text: #123541;
    --input-bg: #fbffff;
    --input-text: #123541;
    --radius-sm: 10px;
    --radius-md: 18px;
    --radius-lg: 26px;
    --shadow-sm: 0 3px 12px rgba(0, 105, 145, .09);
    --shadow-md: 0 14px 34px rgba(0, 105, 145, .15);
    --shadow-lg: 0 30px 68px rgba(0, 70, 105, .27);
    --theme-background-gradient:
        linear-gradient(180deg, rgba(255, 255, 255, .78), transparent 20%),
        linear-gradient(180deg, #dff6fa 0%, #c5edf3 56%, #94dbe5 100%);
    --theme-pattern:
        radial-gradient(circle at 25% 25%, rgba(255, 255, 255, .62) 0 3px, transparent 4px),
        radial-gradient(circle at 70% 45%, rgba(7, 134, 165, .08) 0 13px, transparent 14px),
        linear-gradient(170deg, transparent 0 46%, rgba(255, 255, 255, .3) 47% 49%, transparent 50%);
    --header-pattern: repeating-radial-gradient(ellipse at 50% 120%, transparent 0 17px, rgba(255, 255, 255, .14) 18px 21px, transparent 22px 38px);
    --footer-pattern: radial-gradient(circle at 20% 0%, rgba(255, 255, 255, .08), transparent 35%);
}
html[data-theme="ocean"][data-color-mode="dark"] {
    /* Exact Ocean dark palette aliases from the supplied assets.zip */
    --page-bg:#061c26; --page-bg-alt:#082a35;
    --surface-1:#0d3340; --surface-2:#103e4c; --surface-3:#154b59; --surface-elevated:#124452;
    --text-primary:#edfcff; --text-secondary:#b8dce3; --text-disabled:#789ba3;
    --primary-hover:#68d7e9; --primary-soft:#124a57; --secondary-hover:#6ed9c5; --accent-soft:#4a361d;
    --header-muted:#b8dce3; --header-border:#237c90;
    --footer-border:#bd8c4d; --drawer-muted:#b8dce3; --drawer-border:#286173;
    --menu-hover-bg:#124655; --menu-hover-text:#fff;
    --card-bg:#0d3340; --card-text:#edfcff; --card-muted:#b8dce3; --card-border:#2b6574;
    --table-bg:#0d3340; --table-head-bg:#12677b; --table-head-text:#fff; --table-row-hover:#144653;
    --input-placeholder:#8cadb5; --input-border:#367081; --input-focus:#54d8ee;
    --primary: #32bad3;
    --secondary: #3bc6ad;
    --accent: #e6b76f;
    --bg: #061c26;
    --surface-card: #0d3340;
    --surface-muted: #0a2834;
    --surface-subtle: #103946;
    --surface-strong: #154b59;
    --text: #edfcff;
    --text-strong: #ffffff;
    --text-muted: #b8dce3;
    --border: #2b6574;
    --header-bg: linear-gradient(180deg, rgba(5, 28, 38, .97), rgba(8, 49, 61, .96));
    --header-text: #edfcff;
    --header-text-muted: #b8dce3;
    --header-icon: #62ddf0;
    --footer-bg: linear-gradient(180deg, #05232c, #031318);
    --footer-text: #effeff;
    --footer-muted: #b2d9e0;
    --drawer-bg: #092934;
    --drawer-text: #edfcff;
    --dropdown-bg: #0c3441;
    --dropdown-text: #edfcff;
    --button-bg: #147f95;
    --button-hover: #1c9bb3;
    --input-bg: #071f29;
    --input-text: #edfcff;
    --table-header-bg: #12677b;
    --table-header-text: #ffffff;
    --modal-bg: #0d3340;
    --modal-text: #edfcff;
    --radius-sm: 10px;
    --radius-md: 18px;
    --radius-lg: 26px;
    --theme-background-gradient:
        linear-gradient(180deg, rgba(66, 203, 238, .08), transparent 20%),
        linear-gradient(180deg, #061c26 0%, #082a35 58%, #0e4656 100%);
    --theme-pattern:
        radial-gradient(circle at 24% 22%, rgba(173, 239, 255, .12) 0 3px, transparent 4px),
        radial-gradient(circle at 72% 40%, rgba(40, 146, 170, .16) 0 12px, transparent 14px),
        linear-gradient(170deg, transparent 0 46%, rgba(255, 255, 255, .06) 47% 49%, transparent 50%);
    --header-pattern: repeating-radial-gradient(ellipse at 50% 120%, transparent 0 17px, rgba(255, 255, 255, .08) 18px 21px, transparent 22px 38px);
    --footer-pattern: radial-gradient(circle at 20% 0%, rgba(255, 255, 255, .05), transparent 35%);
}

/* =========================================================
   Token application to shared UI
   ========================================================= */

html,
body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-family);
}

.theme-background {
    background: var(--bg);
}
.theme-background::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--theme-pattern), var(--theme-background-gradient);
    background-size: 54px 54px, 74px 74px, auto, auto, cover;
    background-position: 0 0, 0 0, center, center, center;
    opacity: var(--background-intensity);
}

body .navbar,
body .site-header {
    background: var(--header-bg);
    color: var(--header-text);
    box-shadow: var(--shadow-md);
}
.site-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--header-pattern);
    background-size: auto 100%;
    opacity: var(--background-intensity);
    pointer-events: none;
}
.nav-container { position: relative; z-index: 1; }
.logo { color: var(--header-text); }
.logo-mark { background: color-mix(in srgb, var(--header-text) 11%, transparent); color: var(--header-icon); }
.nav-links > li > a,
.dropdown-btn,
.header-actions .icon-button { color: var(--header-text-muted); }
.nav-links > li > a:hover,
.nav-links > li > a:focus-visible,
.nav-links > li > a.is-active,
.dropdown-btn:hover,
.dropdown-btn:focus-visible,
.dropdown.is-active > .dropdown-btn,
.header-actions .icon-button:hover,
.header-actions .icon-button:focus-visible {
    color: var(--header-text);
    background: color-mix(in srgb, var(--header-text) 12%, transparent);
}
.nav-links > li > a.profile-link { color: var(--header-text-muted); }

.dropdown-content {
    background: var(--dropdown-bg);
    color: var(--dropdown-text);
    border-color: var(--border);
    box-shadow: var(--shadow-lg);
}
.dropdown-content a { color: var(--dropdown-text); }
.dropdown-content a:hover,
.dropdown-content a:focus-visible { color: var(--text-strong); background: var(--surface-subtle); }
.dropdown-divider { background: var(--border); }

.drawer-overlay { background: var(--overlay-bg); backdrop-filter: blur(2px); }
@media (max-width: 900px) {
    .mobile-drawer.nav-links {
        background: var(--drawer-bg);
        color: var(--drawer-text);
        border-inline-end: 1px solid var(--border);
    }
    .mobile-drawer.nav-links > li > a,
    .mobile-drawer .dropdown-btn { color: var(--drawer-text); }
    .mobile-drawer.nav-links > li > a:hover,
    .mobile-drawer.nav-links > li > a:focus-visible,
    .mobile-drawer.nav-links > li > a.is-active,
    .mobile-drawer .dropdown-btn:hover,
    .mobile-drawer .dropdown-btn:focus-visible {
        color: var(--drawer-text);
        background: var(--surface-subtle);
    }
    .mobile-drawer .dropdown-content {
        background: var(--surface-muted);
        color: var(--drawer-text);
        border-color: var(--border);
    }
}

body .welcome-box {
    background: linear-gradient(135deg, var(--header-bg), color-mix(in srgb, var(--header-bg) 70%, #000000));
    color: var(--header-text);
    border: 1px solid color-mix(in srgb, var(--header-text) 14%, transparent);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

body .card,
body .stat-card,
body .tab-wrapper,
body .login-box,
body .font-preview,
body .settings-actions,
body .theme-option-card,
body .preview-card {
    background: var(--surface-card);
    color: var(--card-text, var(--text));
    border-color: var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}
body .card h1,
body .card h2,
body .card h3,
body .card h4,
body .stat-card h3 { color: var(--text-strong); }
body .card h3 { border-bottom-color: var(--surface-subtle); }
body .card :where(.settings-help, .muted, .text-muted, small),
body .stat-card :where(.muted, .text-muted, p),
body .theme-option-card small,
body .preview-card p { color: var(--card-text-muted, var(--text-muted)); }
body .stat-card i { background: var(--surface-subtle); }

body .form-control,
body select,
body textarea,
body input[type="text"],
body input[type="password"],
body input[type="number"],
body input[type="date"],
body input[type="email"],
body input[type="search"],
body input[type="file"] {
    background: var(--input-bg);
    color: var(--input-text);
    border-color: var(--border);
    border-radius: var(--radius-sm);
}
body input::placeholder,
body textarea::placeholder { color: var(--input-placeholder); opacity: 1; }
body .form-control:focus,
body select:focus,
body textarea:focus,
body input:focus-visible {
    outline: 2px solid transparent;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus-ring) 35%, transparent);
    background: var(--input-bg);
}

body .btn,
body button.btn {
    border-radius: var(--radius-sm);
}
body .btn-primary {
    background: var(--button-bg);
    color: var(--button-text);
}
body .btn-primary:hover,
body .btn-primary:focus-visible { background: var(--button-hover); color: var(--button-text); transform: translateY(-1px); }
body .btn:not(.btn-primary):not(.btn-danger):not(.btn-success):not(.btn-warning) {
    background: var(--button-secondary-bg);
    color: var(--button-secondary-text);
    border: 1px solid var(--border);
}
body .btn-danger { background: var(--danger); color: var(--danger-button-text); }
body .btn-success { background: var(--success); color: var(--success-button-text); }
body .btn-warning { background: var(--warning); color: var(--warning-button-text); }

body .table { color: var(--text); }
body .table th {
    background: var(--table-header-bg);
    color: var(--table-header-text);
    border-color: var(--border);
}
body .table td { border-color: var(--border); }
body .table tbody tr:hover { background: var(--table-row-hover); }

body .status-badge.available,
body .alert-success { background: var(--success-bg); color: var(--success-text); border-color: color-mix(in srgb, var(--success) 48%, var(--border)); }
body .status-badge.borrowed,
body .alert-warning { background: var(--warning-bg); color: var(--warning-text); border-color: color-mix(in srgb, var(--warning) 48%, var(--border)); }
body .alert-danger { background: var(--danger-bg); color: var(--danger-text); border-color: color-mix(in srgb, var(--danger) 48%, var(--border)); }
body .alert-info { background: var(--info-bg); color: var(--info-text); border-color: color-mix(in srgb, var(--info) 48%, var(--border)); }

body .modal-overlay { background: var(--overlay-bg); backdrop-filter: blur(4px); }
body .modal-content {
    background: var(--modal-bg);
    color: var(--modal-text);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}
body .close-btn,
body .modal-close { color: var(--text-muted); background: var(--surface-subtle); }
body .close-btn:hover,
body .modal-close:hover { color: var(--danger); }

.tooltip::after { background: var(--tooltip-bg); color: var(--tooltip-text); box-shadow: var(--shadow-sm); }

body .footer {
    background: var(--footer-bg);
    color: var(--footer-text);
    border-top-color: color-mix(in srgb, var(--footer-text) 18%, transparent);
}
.footer-decoration {
    background-image: var(--footer-pattern);
    background-size: 48px 48px;
    opacity: var(--background-intensity);
}
.footer-stats strong { color: var(--footer-text); }
.footer p,
.footer-stats { color: var(--footer-muted); }

#global-progress-overlay { background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(8px); }
.progress-spinner { color: var(--accent); }
.progress-text { color: var(--text-strong); }
.progress-bar-bg { background: var(--surface-strong); }
.progress-bar-fill { background: linear-gradient(90deg, var(--primary), var(--accent), var(--secondary)); }

.tab-wrapper label { color: var(--text-muted); }
.tab-wrapper label:hover { background: var(--surface-subtle); color: var(--text-strong); }
.tab-wrapper input[type="radio"]:checked + label { background: var(--button-bg); color: var(--button-text); }
.tab-panels { border-top-color: var(--border); }

.toggle-switch-track { background: var(--surface-strong); }
.toggle-switch input:checked + .toggle-switch-track { background: var(--accent); }

.login-page-shell { background: linear-gradient(145deg, color-mix(in srgb, var(--bg) 92%, var(--primary)), var(--bg)); }
.login-card { border-top: 5px solid var(--accent); }
.login-icon { background: var(--surface-subtle); color: var(--primary); }
.login-help { background: var(--surface-muted); border: 1px solid var(--border); border-radius: var(--radius-sm); }

.theme-option-card { background: var(--surface-muted); }
.mode-option span { background: var(--surface-muted); color: var(--text); border-color: var(--border); }
.settings-preview { border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
.preview-header { background: var(--header-bg); color: var(--header-text); }
.preview-body { background: var(--bg); }
.preview-footer { background: var(--footer-bg); color: var(--footer-text); }
.settings-actions { background: color-mix(in srgb, var(--surface-card) 92%, transparent); backdrop-filter: blur(10px); border: 1px solid var(--border); }
.settings-save-status { background: var(--success-bg); color: var(--success-text); }
.color-control input[type="color"] { background: var(--input-bg); border-color: var(--border); }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 3px solid color-mix(in srgb, var(--focus-ring) 72%, transparent);
    outline-offset: 2px;
}

/* Extra theme-specific visual language */
html[data-theme="luxury"] .card,
html[data-theme="luxury"] .tab-wrapper { border-block-start: 2px solid color-mix(in srgb, var(--accent) 65%, var(--border)); }
html[data-theme="hightech"] .card:hover,
html[data-theme="hightech"] .form-control:focus { box-shadow: 0 0 22px color-mix(in srgb, var(--accent) 22%, transparent); }
html[data-theme="nature"] .logo-mark,
html[data-theme="floral"] .logo-mark,
html[data-theme="ocean"] .logo-mark { border-radius: 50%; }
html[data-theme="minimal"] .card,
html[data-theme="minimal"] .stat-card,
html[data-theme="minimal"] .tab-wrapper { box-shadow: none; }

/* Specificity bridge for legacy page selectors that were centralized from inline blocks. */
body[class*="page-"] .card,
body[class*="page-"] .stat-card,
body[class*="page-"] .tab-wrapper,
body[class*="page-"] .login-box {
    background: var(--surface-card);
    color: var(--card-text, var(--text));
    border-color: var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}
body[class*="page-"] .tab-wrapper label { color: var(--text-muted); }
body[class*="page-"] .tab-wrapper label:hover { background: var(--surface-subtle); color: var(--text-strong); }
body[class*="page-"] .tab-wrapper input[type="radio"]:checked + label { background: var(--button-bg); color: var(--button-text); }
body[class*="page-"] .tab-panels { border-top-color: var(--border); }
body[class*="page-"] .form-control {
    background: var(--input-bg);
    color: var(--input-text);
    border-color: var(--border);
}
body[class*="page-"] .btn-primary { background: var(--button-bg); color: var(--button-text); }
body[class*="page-"] .btn-primary:hover,
body[class*="page-"] .btn-primary:focus-visible { background: var(--button-hover); color: var(--button-text); }
body[class*="page-"] .table th { background: var(--table-header-bg); color: var(--table-header-text); border-color: var(--border); }
body[class*="page-"] .table td { border-color: var(--border); }


/* Settings theme swatches */
.theme-option-classic { --swatch-1: #173b67; --swatch-2: #18735d; --swatch-3: #eef4f8; }
.theme-option-luxury { --swatch-1: #17111f; --swatch-2: #b7832f; --swatch-3: #f6efe4; }
.theme-option-minimal { --swatch-1: #20242a; --swatch-2: #dfe3e6; --swatch-3: #ffffff; }
.theme-option-hightech { --swatch-1: #050814; --swatch-2: #16d8ff; --swatch-3: #bf84ff; }
.theme-option-nature { --swatch-1: #24573b; --swatch-2: #7b5d2d; --swatch-3: #f2f2df; }
.theme-option-floral { --swatch-1: #74416a; --swatch-2: #c45a7d; --swatch-3: #fff3f6; }
.theme-option-custom { --swatch-1: #2563eb; --swatch-2: #7c3aed; --swatch-3: #f8fafc; }
.theme-option-ocean { --swatch-1: #075b83; --swatch-2: #087f76; --swatch-3: #e4f7fb; }


/* =========================================================
   Reusable themed surfaces not present in the original app
   ========================================================= */
.sidebar,
.popup,
.popover {
    background: var(--card-bg);
    color: var(--card-text);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

.sidebar {
    width: min(19rem, 88vw);
    padding: 1rem;
}

.sidebar a,
.sidebar button {
    color: inherit;
}

.sidebar a:hover,
.sidebar button:hover,
.sidebar .is-active {
    background: var(--surface-subtle);
    color: var(--primary);
}

.popup,
.popover {
    padding: 1rem;
    z-index: var(--z-dropdown);
}

/* Theme-aware scrollbar. Firefox uses scrollbar-color; WebKit uses pseudo elements. */
* {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--primary) 72%, var(--border)) var(--surface-muted);
}

*::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

*::-webkit-scrollbar-track {
    background: var(--surface-muted);
}

*::-webkit-scrollbar-thumb {
    min-height: 36px;
    background: color-mix(in srgb, var(--primary) 72%, var(--border));
    border: 3px solid var(--surface-muted);
    border-radius: 999px;
}

*::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--primary) 88%, var(--text));
}