<style>
/* ═══ THEME SYSTEM — Enterprise-Grade CSS Custom Properties ═══ */
/* ═══ :root defaults = Tuwaiq (cold-load login page) ═══ */
:root {
--bg-root: #FEF8F3; --bg-card: #ECE7E2; --bg-surface: #F5E6D3; --bg-input: #B8844A; --bg-hover: rgba(144,75,50,.06);
--border: rgba(212,196,183,.06); --border-active: rgba(212,196,183,.12); --border-input: rgba(212,196,183,.20);
--text-primary: #1D1B19; --text-secondary: #50453B; --text-muted: #82756A; --text-dim: #A09890; --text-faint: #D4C4B7;
--accent: #0d9488; --accent-bg: rgba(13,148,136,.08); --accent-gold: #7D562D; --accent-rose: #904B32;
--color-teal: #0d9488; --color-teal-bg: rgba(13,148,136,.08); --color-teal-border: rgba(13,148,136,.12);
--color-gold: #7D562D; --color-gold-bg: rgba(125,86,45,.08); --color-gold-border: rgba(125,86,45,.12);
--color-green: #0d9488; --color-green-bg: rgba(13,148,136,.06); --color-green-border: rgba(13,148,136,.10);
--color-blue: #4a7a9e; --color-blue-bg: rgba(74,122,158,.06); --color-blue-border: rgba(74,122,158,.12);
--color-rose: #904B32; --color-rose-bg: rgba(144,75,50,.08); --color-rose-border: rgba(144,75,50,.12);
--color-purple: #82756A; --color-purple-bg: rgba(130,117,106,.06); --color-purple-border: rgba(130,117,106,.10);
--color-warn: #904B32; --color-warn-bg: rgba(144,75,50,.06);
--color-amber: #D97706; --color-session: #4a7a9e; --color-session-bg: rgba(74,122,158,.06);
--color-gray: #82756A; --color-white: #fff; --color-black: #1D1B19;
--overlay: rgba(62,46,31,.3); --overlay-heavy: rgba(62,46,31,.6);
--shadow: rgba(154,111,61,.06); --scrollbar: #D4C4B7;
--text-on-frame: #FEF8F3; --text-on-frame-muted: rgba(254,248,243,.7);
--bg-header: #9A6F3D; --bg-subheader: #D4A373; --bg-footer: #B8844A;
--theme-radius: 8px; --theme-radius-sm: 4px; --theme-radius-lg: 12px; --fs-scale: 1.0;
--cat-platform: #6d28d9; --cat-core: #475569; --cat-governance: #0d7377; --cat-growth: #4d7c0f; --cat-specialist: #2563eb; --cat-extended: #be185d;
}
[data-theme="dark"] {
--bg-root: #141519; --bg-card: #1b1f25; --bg-surface: #1e232f; --bg-input: #181d27; --bg-hover: rgba(13,148,136,.08);
--border: #28313f; --border-active: #3a4559; --border-input: #28313f;
--text-primary: #e8ecf5; --text-secondary: #b4bfd4; --text-muted: #8893a9; --text-dim: #515c73; --text-faint: #364157;
--accent: #0d9488; --accent-bg: rgba(13,148,136,.08); --accent-gold: #c8a656; --accent-rose: #c56a76;
--color-teal: #0d9488; --color-teal-bg: rgba(13,148,136,.08); --color-teal-border: rgba(13,148,136,.15);
--color-gold: #b8956a; --color-gold-bg: rgba(184,149,106,.08); --color-gold-border: rgba(184,149,106,.15);
--color-green: #5a9a6b; --color-green-bg: rgba(90,154,107,.08); --color-green-border: rgba(90,154,107,.15);
--color-blue: #5b8fb9; --color-blue-bg: rgba(91,143,185,.08); --color-blue-border: rgba(91,143,185,.15);
--color-rose: #d97676; --color-rose-bg: rgba(217,118,118,.08); --color-rose-border: rgba(217,118,118,.15);
--color-purple: #8a7fa0; --color-purple-bg: rgba(138,127,160,.08); --color-purple-border: rgba(138,127,160,.15);
--color-warn: #c08080; --color-warn-bg: rgba(192,128,128,.08);
--color-amber: #D97706; --color-session: #6b9aaa; --color-session-bg: rgba(107,154,170,.08);
--color-gray: #8a8a96; --color-white: #fff; --color-black: #000;
--overlay: rgba(0,0,0,.65); --overlay-heavy: rgba(0,0,0,.85);
--shadow: rgba(0,0,0,.45); --scrollbar: #2d3646;
--fs-scale: 1.0;
--cat-platform: #a78bfa; --cat-core: #94a3b8; --cat-governance: #5eead4; --cat-growth: #86efac; --cat-specialist: #93c5fd; --cat-extended: #f9a8d4;
}
[data-theme="light"] {
--bg-root: #f2f2ef; --bg-card: #fafaf8; --bg-surface: #eaeae6; --bg-input: #e4e4df; --bg-hover: rgba(13,148,136,.08);
--border: #d5d5cf; --border-active: #bfbfb6; --border-input: #d5d5cf;
--text-primary: #1a1a1e; --text-secondary: #44444d; --text-muted: #6b6b73; --text-dim: #9999a1; --text-faint: #c0c0c6;
--accent: #0d9488; --accent-bg: rgba(13,148,136,.08); --accent-gold: #c8a656; --accent-rose: #c56a76;
--color-teal: #0d9488; --color-teal-bg: rgba(13,148,136,.08); --color-teal-border: rgba(13,148,136,.15);
--color-gold: #b8956a; --color-gold-bg: rgba(184,149,106,.08); --color-gold-border: rgba(184,149,106,.15);
--color-green: #5a9a6b; --color-green-bg: rgba(90,154,107,.08); --color-green-border: rgba(90,154,107,.15);
--color-blue: #5b8fb9; --color-blue-bg: rgba(91,143,185,.08); --color-blue-border: rgba(91,143,185,.15);
--color-rose: #d97676; --color-rose-bg: rgba(217,118,118,.08); --color-rose-border: rgba(217,118,118,.15);
--color-purple: #8a7fa0; --color-purple-bg: rgba(138,127,160,.08); --color-purple-border: rgba(138,127,160,.15);
--color-warn: #c08080; --color-warn-bg: rgba(192,128,128,.08);
--color-amber: #D97706; --color-session: #6b9aaa; --color-session-bg: rgba(107,154,170,.08);
--color-gray: #8a8a96; --color-white: #fff; --color-black: #000;
--overlay: rgba(0,0,0,.3); --overlay-heavy: rgba(0,0,0,.55);
--shadow: rgba(0,0,0,.12); --scrollbar: #ccccc5;
--fs-scale: 1.0;
--cat-platform: #6d28d9; --cat-core: #475569; --cat-governance: #0d7377; --cat-growth: #4d7c0f; --cat-specialist: #2563eb; --cat-extended: #be185d;
}
[data-theme="warm"] {
--bg-root: #1b1613; --bg-card: #251e18; --bg-surface: #2a221a; --bg-input: #201a14; --bg-hover: rgba(13,148,136,.08);
--border: #4a3d30; --border-active: #5e4d3c; --border-input: #4a3d30;
--text-primary: #e8ecf5; --text-secondary: #b4bfd4; --text-muted: #8893a9; --text-dim: #515c73; --text-faint: #364157;
--accent: #0d9488; --accent-bg: rgba(13,148,136,.08); --accent-gold: #c8a656; --accent-rose: #c56a76;
--color-teal: #0d9488; --color-teal-bg: rgba(13,148,136,.08); --color-teal-border: rgba(13,148,136,.15);
--color-gold: #b8956a; --color-gold-bg: rgba(184,149,106,.08); --color-gold-border: rgba(184,149,106,.15);
--color-green: #5a9a6b; --color-green-bg: rgba(90,154,107,.08); --color-green-border: rgba(90,154,107,.15);
--color-blue: #5b8fb9; --color-blue-bg: rgba(91,143,185,.08); --color-blue-border: rgba(91,143,185,.15);
--color-rose: #d97676; --color-rose-bg: rgba(217,118,118,.08); --color-rose-border: rgba(217,118,118,.15);
--color-purple: #8a7fa0; --color-purple-bg: rgba(138,127,160,.08); --color-purple-border: rgba(138,127,160,.15);
--color-warn: #c08080; --color-warn-bg: rgba(192,128,128,.08);
--color-amber: #D97706; --color-session: #6b9aaa; --color-session-bg: rgba(107,154,170,.08);
--color-gray: #8a8a96; --color-white: #fff; --color-black: #000;
--overlay: rgba(0,0,0,.65); --overlay-heavy: rgba(0,0,0,.85);
--shadow: rgba(0,0,0,.45); --scrollbar: #3d3228;
--fs-scale: 1.0;
--cat-platform: #a78bfa; --cat-core: #94a3b8; --cat-governance: #5eead4; --cat-growth: #86efac; --cat-specialist: #93c5fd; --cat-extended: #f9a8d4;
}
[data-theme="cool"] {
--bg-root: #111825; --bg-card: #182030; --bg-surface: #1c2640; --bg-input: #172236; --bg-hover: rgba(13,148,136,.08);
--border: #2e3d5c; --border-active: #3f5474; --border-input: #2e3d5c;
--text-primary: #e8ecf5; --text-secondary: #b4bfd4; --text-muted: #8893a9; --text-dim: #515c73; --text-faint: #364157;
--accent: #0d9488; --accent-bg: rgba(13,148,136,.08); --accent-gold: #c8a656; --accent-rose: #c56a76;
--color-teal: #0d9488; --color-teal-bg: rgba(13,148,136,.08); --color-teal-border: rgba(13,148,136,.15);
--color-gold: #b8956a; --color-gold-bg: rgba(184,149,106,.08); --color-gold-border: rgba(184,149,106,.15);
--color-green: #5a9a6b; --color-green-bg: rgba(90,154,107,.08); --color-green-border: rgba(90,154,107,.15);
--color-blue: #5b8fb9; --color-blue-bg: rgba(91,143,185,.08); --color-blue-border: rgba(91,143,185,.15);
--color-rose: #d97676; --color-rose-bg: rgba(217,118,118,.08); --color-rose-border: rgba(217,118,118,.15);
--color-purple: #8a7fa0; --color-purple-bg: rgba(138,127,160,.08); --color-purple-border: rgba(138,127,160,.15);
--color-warn: #c08080; --color-warn-bg: rgba(192,128,128,.08);
--color-amber: #D97706; --color-session: #6b9aaa; --color-session-bg: rgba(107,154,170,.08);
--color-gray: #8a8a96; --color-white: #fff; --color-black: #000;
--overlay: rgba(0,0,0,.65); --overlay-heavy: rgba(0,0,0,.85);
--shadow: rgba(0,0,0,.45); --scrollbar: #263350;
--fs-scale: 1.0;
--cat-platform: #a78bfa; --cat-core: #94a3b8; --cat-governance: #5eead4; --cat-growth: #86efac; --cat-specialist: #93c5fd; --cat-extended: #f9a8d4;
}
/* ═══ FIVE-THEME DESIGN SYSTEM (CFORMO V2 — Framed Approach) ═══ */
[data-theme="agama"] {
--bg-root: #FCF9F4; --bg-card: #EBE8E3; --bg-surface: #F6F3EE; --bg-header: #863625; --bg-input: #9C4128; --bg-hover: rgba(157,65,49,.06);
--bg-subheader: #BC5947; --bg-footer: #9C4128; --bg-card-alt: #E5E2DD; --bg-recessed: #DCDAD5;
--border: rgba(220,192,187,.06); --border-active: rgba(220,192,187,.12); --border-input: rgba(220,192,187,.18);
--text-primary: #1C1C19; --text-secondary: #56423F; --text-muted: #89726E; --text-dim: #A89490; --text-faint: #DCC0BB;
--text-on-frame: #FFFFFF; --text-on-frame-muted: rgba(255,255,255,.7);
--accent: #0d9488; --accent-bg: rgba(13,148,136,.08); --accent-gold: #89726E; --accent-rose: #9D4131;
--color-teal: #0d9488; --color-teal-bg: rgba(13,148,136,.08); --color-teal-border: rgba(13,148,136,.12);
--color-gold: #89726E; --color-gold-bg: rgba(137,114,110,.08); --color-gold-border: rgba(137,114,110,.12);
--color-green: #0d9488; --color-green-bg: rgba(13,148,136,.06); --color-green-border: rgba(13,148,136,.10);
--color-blue: #4a7a9e; --color-blue-bg: rgba(74,122,158,.06); --color-blue-border: rgba(74,122,158,.10);
--color-rose: #B72119; --color-rose-bg: rgba(183,33,25,.08); --color-rose-border: rgba(183,33,25,.12);
--color-purple: #89726E; --color-purple-bg: rgba(137,114,110,.06); --color-purple-border: rgba(137,114,110,.10);
--color-warn: #B72119; --color-warn-bg: rgba(183,33,25,.06);
--color-amber: #D97706; --color-session: #4a7a9e; --color-session-bg: rgba(74,122,158,.06);
--color-vermilion: #9D4131; --color-vermilion-dark: #BC5947; --color-vermilion-bg: rgba(157,65,49,.08); --color-secondary: #B72119; --color-outline: #89726E;
--color-gray: #89726E; --color-white: #fff; --color-black: #1C1C19;
--overlay: rgba(28,28,25,.3); --overlay-heavy: rgba(28,28,25,.6);
--shadow: rgba(157,65,49,.06); --scrollbar: #DCC0BB;
--theme-radius: 4px; --theme-radius-sm: 2px; --theme-radius-lg: 6px; --fs-scale: 1.0;
--cat-platform: #6d28d9; --cat-core: #475569; --cat-governance: #0d7377; --cat-growth: #4d7c0f; --cat-specialist: #2563eb; --cat-extended: #be185d;
}
[data-theme="palagai"] {
--bg-root: #FFF9ED; --bg-card: #EDE8DB; --bg-surface: #F7F2E6; --bg-header: #5A4800; --bg-input: #6F5800; --bg-hover: rgba(111,88,0,.06);
--bg-subheader: #8C7000; --bg-footer: #6F5800; --bg-card-alt: #E5E0D4; --bg-recessed: #DCDAD0;
--border: rgba(180,165,130,.06); --border-active: rgba(180,165,130,.12); --border-input: rgba(180,165,130,.18);
--text-primary: #1C1B16; --text-secondary: #4A4530; --text-muted: #7A7460; --text-dim: #A09880; --text-faint: #C8C0A8;
--text-on-frame: #FFFFFF; --text-on-frame-muted: rgba(255,255,255,.7);
--accent: #0d9488; --accent-bg: rgba(13,148,136,.08); --accent-gold: #6F5800; --accent-rose: #6F5800;
--color-teal: #0d9488; --color-teal-bg: rgba(13,148,136,.08); --color-teal-border: rgba(13,148,136,.12);
--color-gold: #6F5800; --color-gold-bg: rgba(255,224,136,.12); --color-gold-border: rgba(111,88,0,.12);
--color-green: #0d9488; --color-green-bg: rgba(13,148,136,.06); --color-green-border: rgba(13,148,136,.10);
--color-blue: #4a7a9e; --color-blue-bg: rgba(74,122,158,.06); --color-blue-border: rgba(74,122,158,.10);
--color-rose: #6F5800; --color-rose-bg: rgba(111,88,0,.08); --color-rose-border: rgba(111,88,0,.12);
--color-purple: #7A7460; --color-purple-bg: rgba(122,116,96,.06); --color-purple-border: rgba(122,116,96,.10);
--color-warn: #6F5800; --color-warn-bg: rgba(111,88,0,.06);
--color-amber: #D97706; --color-session: #4a7a9e; --color-session-bg: rgba(74,122,158,.06);
--color-palagai: #6F5800; --color-palagai-dark: #8C7000; --color-palagai-bg: rgba(111,88,0,.08); --color-palagai-leaf: #FFE088; --color-outline: #7A7460;
--color-gray: #7A7460; --color-white: #fff; --color-black: #1C1B16;
--overlay: rgba(28,27,22,.3); --overlay-heavy: rgba(28,27,22,.6);
--shadow: rgba(111,88,0,.06); --scrollbar: #C8C0A8;
--theme-radius: 4px; --theme-radius-sm: 2px; --theme-radius-lg: 6px; --fs-scale: 1.0;
--cat-platform: #6d28d9; --cat-core: #475569; --cat-governance: #0d7377; --cat-growth: #4d7c0f; --cat-specialist: #2563eb; --cat-extended: #be185d;
}
[data-theme="tuwaiq"] {
--bg-root: #FEF8F3; --bg-card: #ECE7E2; --bg-surface: #F5E6D3; --bg-header: #9A6F3D; --bg-input: #B8844A; --bg-hover: rgba(144,75,50,.06);
--bg-subheader: #D4A373; --bg-footer: #B8844A; --bg-card-alt: #E6E2DD; --bg-recessed: #DED9D4; --bg-sidebar-r: #ECE7E2;
--border: rgba(212,196,183,.06); --border-active: rgba(212,196,183,.12); --border-input: rgba(212,196,183,.20);
--text-primary: #1D1B19; --text-secondary: #50453B; --text-muted: #82756A; --text-dim: #A09890; --text-faint: #D4C4B7;
--text-on-frame: #FEF8F3; --text-on-frame-muted: rgba(254,248,243,.7);
--accent: #0d9488; --accent-bg: rgba(13,148,136,.08); --accent-rose: #904B32; --accent-gold: #7D562D; --accent-platinum: #82756A;
--color-teal: #0d9488; --color-teal-bg: rgba(13,148,136,.08); --color-teal-border: rgba(13,148,136,.12);
--color-gold: #7D562D; --color-gold-bg: rgba(125,86,45,.08); --color-gold-border: rgba(125,86,45,.12);
--color-green: #0d9488; --color-green-bg: rgba(13,148,136,.06); --color-green-border: rgba(13,148,136,.10);
--color-blue: #4a7a9e; --color-blue-bg: rgba(74,122,158,.06); --color-blue-border: rgba(74,122,158,.12);
--color-rose: #904B32; --color-rose-bg: rgba(144,75,50,.08); --color-rose-border: rgba(144,75,50,.12);
--color-purple: #82756A; --color-purple-bg: rgba(130,117,106,.06); --color-purple-border: rgba(130,117,106,.10);
--color-warn: #904B32; --color-warn-bg: rgba(144,75,50,.06);
--color-amber: #D97706; --color-session: #4a7a9e; --color-session-bg: rgba(74,122,158,.06);
--color-tuwaiq: #904B32; --color-tuwaiq-dark: #D4A373; --color-tuwaiq-bg: rgba(144,75,50,.08); --color-v2030: #006A64; --color-outline: #82756A;
--color-gray: #82756A; --color-white: #fff; --color-black: #1D1B19;
--overlay: rgba(29,27,25,.3); --overlay-heavy: rgba(29,27,25,.6);
--shadow: rgba(144,75,50,.06); --scrollbar: #D4C4B7;
--theme-radius: 8px; --theme-radius-sm: 4px; --theme-radius-lg: 12px; --fs-scale: 1.0;
--cat-platform: #6d28d9; --cat-core: #475569; --cat-governance: #0d7377; --cat-growth: #4d7c0f; --cat-specialist: #2563eb; --cat-extended: #be185d;
}
/* ═══ Atlas — "The Deep Observer" Executive Blue ═══ */
[data-theme="atlas"] {
--bg-root: #0A1929; --bg-card: #132F4C; --bg-surface: #0D2137; --bg-header: #003652; --bg-input: #0D2137; --bg-hover: rgba(126,221,212,.06);
--bg-subheader: #0D2137; --bg-footer: #0D2137; --bg-card-alt: #173A5E; --bg-recessed: #0D2137; --bg-sidebar-r: #0D2137;
--border: rgba(255,255,255,.08); --border-active: rgba(255,255,255,.15); --border-input: rgba(255,255,255,.12);
--text-primary: #E3EDF7; --text-secondary: #92BDE0; --text-muted: #6B8EB5; --text-dim: #4A6F94; --text-faint: #2C4A6B;
--text-on-frame: #E3EDF7; --text-on-frame-muted: #6B8EB5;
--accent: #7EDDD4; --accent-bg: rgba(126,221,212,.12); --accent-rose: #E06C75; --accent-gold: #F0C674;
--color-teal: #7EDDD4; --color-teal-bg: rgba(126,221,212,.10); --color-teal-border: rgba(126,221,212,.15);
--color-gold: #F0C674; --color-gold-bg: rgba(240,198,116,.10); --color-gold-border: rgba(240,198,116,.15);
--color-green: #7EDDD4; --color-green-bg: rgba(126,221,212,.08); --color-green-border: rgba(126,221,212,.12);
--color-blue: #92BDE0; --color-blue-bg: rgba(146,189,224,.08); --color-blue-border: rgba(146,189,224,.12);
--color-rose: #E06C75; --color-rose-bg: rgba(224,108,117,.10); --color-rose-border: rgba(224,108,117,.15);
--color-purple: #B39DDB; --color-purple-bg: rgba(179,157,219,.08); --color-purple-border: rgba(179,157,219,.12);
--color-warn: #E06C75; --color-warn-bg: rgba(224,108,117,.10);
--color-amber: #F0C674; --color-session: #92BDE0; --color-session-bg: rgba(146,189,224,.08);
--color-atlas: #003652; --color-atlas-sky: #7EDDD4; --color-atlas-bg: rgba(126,221,212,.12); --color-atlas-deep: #0A1929; --color-atlas-content: #132F4C; --color-atlas-earth: #E06C75; --color-outline: #6B8EB5;
--color-gray: #6B8EB5; --color-white: #E3EDF7; --color-black: #0A1929;
--overlay: rgba(10,25,41,.5); --overlay-heavy: rgba(10,25,41,.8);
--shadow: rgba(0,30,47,.25); --scrollbar: #4A6F94;
--theme-radius: 8px; --theme-radius-sm: 4px; --theme-radius-lg: 12px; --fs-scale: 1.0;
--cat-platform: #a78bfa; --cat-core: #94a3b8; --cat-governance: #5eead4; --cat-growth: #86efac; --cat-specialist: #93c5fd; --cat-extended: #f9a8d4;
}
[data-theme="circuit"] {
--bg-root: #2a2d35; --bg-card: #323640; --bg-surface: #232630; --bg-header: #1a1c22; --bg-input: #1e2028; --bg-hover: rgba(0,105,112,.08); --bg-subheader: #252830; --bg-footer: #1e2028;
--border: rgba(185,202,203,.05); --border-active: rgba(185,202,203,.10); --border-input: rgba(185,202,203,.15);
--text-primary: #dde1e8; --text-secondary: #a0a8b6; --text-muted: #6b7a85; --text-dim: #4e5663; --text-faint: #363c47;
--text-on-frame: #dde1e8; --text-on-frame-muted: rgba(221,225,232,.6);
--accent: #0d9488; --accent-bg: rgba(13,148,136,.10); --accent-gold: #b8956a; --accent-rose: #c56a76;
--color-teal: #0d9488; --color-teal-bg: rgba(13,148,136,.10); --color-teal-border: rgba(13,148,136,.15);
--color-gold: #b8956a; --color-gold-bg: rgba(184,149,106,.10); --color-gold-border: rgba(184,149,106,.15);
--color-green: #5a9a6b; --color-green-bg: rgba(90,154,107,.10); --color-green-border: rgba(90,154,107,.15);
--color-blue: #5b8fb9; --color-blue-bg: rgba(91,143,185,.10); --color-blue-border: rgba(91,143,185,.15);
--color-rose: #c56a76; --color-rose-bg: rgba(197,106,118,.10); --color-rose-border: rgba(197,106,118,.15);
--color-purple: #8a7fa0; --color-purple-bg: rgba(138,127,160,.08); --color-purple-border: rgba(138,127,160,.12);
--color-warn: #c56a76; --color-warn-bg: rgba(197,106,118,.10);
--color-amber: #D97706; --color-session: #5b8fb9; --color-session-bg: rgba(91,143,185,.08);
--color-circuit: #006970; --color-circuit-bg: rgba(0,105,112,.12); --color-circuit-hover: #008a93; --color-circuit-light: rgba(0,105,112,.06); --color-circuit-glow: rgba(0,240,255,.08);
--color-gray: #8a8a96; --color-white: #fff; --color-black: #000;
--overlay: rgba(0,0,0,.4); --overlay-heavy: rgba(0,0,0,.7);
--shadow: rgba(24,28,29,.04); --scrollbar: #363c47;
--theme-radius: 0px; --theme-radius-sm: 0px; --theme-radius-lg: 0px; --fs-scale: 1.0;
--cat-platform: #a78bfa; --cat-core: #94a3b8; --cat-governance: #5eead4; --cat-growth: #86efac; --cat-specialist: #93c5fd; --cat-extended: #f9a8d4;
}
/* Circuit: 0px radius now handled by --theme-radius: 0px in all var() references */
/* ═══ Vision 2030 — "The Sovereign Archive" ═══ */
[data-theme="vision"] {
--bg-root: #f0f2f1; --bg-card: #fafbfa; --bg-surface: #f2f4f3; --bg-input: #00504b; --bg-hover: rgba(0,80,75,.06); --bg-header: #00504b; --bg-subheader: #006a64; --bg-footer: #00504b; --bg-card-alt: #eceeed; --bg-recessed: #e2e4e3;
--border: rgba(0,50,47,.12); --border-active: rgba(0,50,47,.20); --border-input: rgba(0,50,47,.15);
--text-primary: #191c1c; --text-secondary: #3f4847; --text-muted: #6f7978; --text-dim: #9aadab; --text-faint: #bec9c7; --text-on-frame: #ffffff; --text-on-frame-muted: rgba(255,255,255,.7);
--accent: #006a64; --accent-bg: rgba(0,106,100,.08); --accent-rose: #b72119; --accent-gold: #c8a656; --accent-sky: #7eddd4;
--color-teal: #7eddd4; --color-teal-bg: rgba(126,221,212,.08); --color-teal-border: rgba(126,221,212,.15);
--color-gold: #c8a656; --color-gold-bg: rgba(200,166,86,.08); --color-gold-border: rgba(200,166,86,.15);
--color-green: #2d6a4f; --color-green-bg: rgba(45,106,79,.08); --color-green-border: rgba(45,106,79,.12);
--color-rose: #b72119; --color-rose-bg: rgba(183,33,25,.06); --color-rose-border: rgba(183,33,25,.12);
--color-purple: #6f5f8a; --color-purple-bg: rgba(111,95,138,.06); --color-purple-border: rgba(111,95,138,.10);
--color-warn: #b72119; --color-warn-bg: rgba(183,33,25,.06);
--color-amber: #d97706; --color-session: #4a7a9e; --color-session-bg: rgba(74,122,158,.06);
--color-gray: #8a8a96; --color-white: #fff; --color-black: #000;
--overlay: rgba(0,32,30,.3); --overlay-heavy: rgba(0,32,30,.6);
--shadow: rgba(0,50,47,.08); --scrollbar: #bec9c7;
--theme-radius: 4px; --theme-radius-sm: 2px; --theme-radius-lg: 6px; --fs-scale: 1.0;
--cat-platform: #6d28d9; --cat-core: #475569; --cat-governance: #0d7377; --cat-growth: #4d7c0f; --cat-specialist: #2563eb; --cat-extended: #be185d;
}
/* Vision: silk-finish header gradient */
[data-theme="vision"] [data-nexi-header]{background:linear-gradient(135deg,#00504b,#006a64) !important}
/* Vision: framed theme — saturated header/footer + whitewashed content */
[data-theme="vision"] [data-footer]{background:#00504b !important;border-top:1px solid rgba(126,221,212,.12) !important}
[data-theme="vision"] [data-subheader]{background:#006a64 !important}
/* ═══ STITCH DATA-ATTRIBUTE CSS — backgrounds only ═══ */
[data-nexi-header]{background-color:var(--bg-header,var(--bg-input)) !important}
[data-subheader]{background-color:var(--bg-subheader,var(--bg-surface)) !important}
[data-footer]{background-color:var(--bg-footer,var(--bg-input)) !important}
[data-footer] [data-chat-input]{background:rgba(255,255,255,.10) !important;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:none !important;color:var(--text-on-frame) !important}
[data-footer] [data-chat-input]::placeholder{color:rgba(255,255,255,.5) !important;opacity:1}
[data-footer] textarea::placeholder{color:rgba(255,255,255,.5) !important;opacity:1}
[data-nexi-roster]{background-color:var(--bg-surface) !important;border-right:1px solid var(--border) !important}
[data-nexi-panel]{background-color:var(--bg-card) !important;box-shadow:0 4px 16px var(--shadow) !important}
/* ═══ Atlas "Deep Observer" — scoped overrides ═══ */
[data-theme="atlas"] [data-nexi-header]{background:#003652 !important;border-bottom:none !important}
[data-theme="atlas"] [data-subheader]{background:#0D2137 !important;border-bottom:0.5px solid rgba(255,255,255,.06) !important}
[data-theme="atlas"] [data-footer]{background:#0D2137 !important;border-top:0.5px solid rgba(255,255,255,.06) !important}
[data-theme="atlas"] [data-nexi-roster]{background:#0D2137 !important;border-right-color:rgba(255,255,255,.06) !important}
[data-theme="atlas"] [data-nexi-panel]{border-color:rgba(255,255,255,.06) !important}
[data-theme="atlas"] [role="dialog"][data-nexi-panel]{background:#132F4C !important;border:0.5px solid rgba(255,255,255,.08) !important}
[data-theme="atlas"] [role="dialog"] table thead tr{background:#0D2137}
[data-theme="atlas"] [role="dialog"] table thead th{color:#7EDDD4}
[data-theme="atlas"] [role="dialog"] table tbody tr:nth-child(even){background:#0A1929}
[data-theme="atlas"] [role="dialog"] table tbody tr:nth-child(odd){background:#132F4C}
/* Atlas glass surfaces */
[data-theme="atlas"] .nexi-glass{background:rgba(255,255,255,.06);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:0.5px solid rgba(255,255,255,.08)}
@media(max-width:768px){[data-theme="atlas"] .nexi-glass{background:#132F4C;backdrop-filter:none;-webkit-backdrop-filter:none}}
/* Atlas custom scrollbar */
[data-theme="atlas"] ::-webkit-scrollbar-thumb{background:rgba(126,221,212,.2)}
[data-theme="atlas"] ::-webkit-scrollbar-thumb:hover{background:rgba(126,221,212,.35)}
/* Atlas footer input contrast */
[data-theme="atlas"] [data-footer] ::placeholder{color:rgba(255,255,255,.4) !important;opacity:1}
[data-theme="atlas"] [data-footer] [data-chat-input]::placeholder{color:rgba(255,255,255,.4) !important;opacity:1}
/* ═══ Background → Text Color Pairing Contract ═══ */
[data-nexi-header],[data-nexi-header] span,[data-nexi-header] div,[data-nexi-header] a{color:var(--text-on-frame)}
[data-nexi-header] svg{stroke:var(--text-on-frame)}
[data-subheader],[data-subheader] > div:first-child,[data-subheader] > div:first-child span,[data-subheader] > div:first-child div{color:var(--text-on-frame)}
[data-subheader] > div:first-child svg{stroke:var(--text-on-frame)}
[data-footer],[data-footer] > div span,[data-footer] > div div,[data-footer] > div a{color:var(--text-on-frame)}
[data-footer] svg{stroke:var(--text-on-frame)}
[data-nexi-roster]{color:var(--text-primary)}
[data-nexi-panel]:not([role="dialog"]){color:var(--text-primary) !important}
[data-nexi-panel]:not([role="dialog"]) svg{stroke:var(--text-muted)}
/* FORCE GovStack headers — maximum specificity with !important */
div[role="button"][aria-expanded]{color:var(--text-primary) !important}
div[role="button"][aria-expanded="true"]{color:var(--accent-rose, var(--accent)) !important}
div[role="button"][aria-expanded] span{color:inherit !important}
div[role="button"][aria-expanded] > span{color:inherit !important}
/* Roster grid — hard clip, no overflow */
/* Roster grid — no CSS overrides, uses inline styles */
*{box-sizing:border-box;margin:0;padding:0}
*:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
[data-theme="circuit"] *:focus-visible{outline-color:#0d9488}
html{height:100%;overflow:hidden !important;overscroll-behavior:none}
body{height:100%;overflow:hidden !important;overscroll-behavior:none;background:var(--bg-root);font-family:'DM Sans','Noto Sans Arabic',system-ui,sans-serif;color:var(--text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
#root{height:100%;overflow:hidden !important}
.font-display{font-family:'DM Serif Display',Georgia,serif}
.font-structural{font-family:'DM Sans',system-ui,sans-serif}
.font-body{font-family:'DM Sans',system-ui,sans-serif}
.glass{backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
/* Old per-theme header/footer overrides removed — handled by data-attribute CSS above */
.theme-swatch{position:relative}.theme-swatch .theme-tip{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);z-index:1000;background:var(--bg-card);border:.5px solid var(--border-active);padding:10px 14px;min-width:220px;max-width:280px;border-radius:var(--theme-radius,8px);box-shadow:0 8px 24px var(--shadow);font-family:'DM Sans',sans-serif;font-size:12px;line-height:1.6;color:var(--text-primary);opacity:0;pointer-events:none;transition:opacity .15s ease;white-space:pre-line}
.theme-swatch:hover .theme-tip{opacity:1}
/* ═══ GLOBAL TYPOGRAPHY FLOOR — Enterprise readability minimum ═══ */
[data-theme="agama"] *, [data-theme="palagai"] *, [data-theme="tuwaiq"] *, [data-theme="vision"] *, [data-theme="atlas"] *, [data-theme="circuit"] * { font-family: inherit; line-height: 1.45 }
[data-theme="agama"] button, [data-theme="palagai"] button, [data-theme="tuwaiq"] button, [data-theme="vision"] button, [data-theme="atlas"] button, [data-theme="circuit"] button { line-height: 1.3 }
/* ═══ Modern Thin Scrollbars — All Themes ═══ */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--scrollbar,#888);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--text-dim,#666)}
*{scrollbar-width:thin;scrollbar-color:var(--scrollbar,#888) transparent}
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes pulse{0%,100%{opacity:.4}50%{opacity:1}}
@keyframes listenPulse{0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,.7)}50%{box-shadow:0 0 0 6px rgba(239,68,68,0)}}
@keyframes dot1{0%,80%,100%{transform:scale(0)}40%{transform:scale(1)}}
@keyframes dot2{0%,80%,100%{transform:scale(0)}50%{transform:scale(1)}}
@keyframes toastIn{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}
@keyframes dot3{0%,80%,100%{transform:scale(0)}60%{transform:scale(1)}}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes wtGlow{0%,100%{box-shadow:0 0 0 3px rgba(13,148,136,.2)}50%{box-shadow:0 0 0 6px rgba(13,148,136,.35)}}.wt-hl{animation:wtGlow 2s ease infinite;position:relative;z-index:2}
@keyframes failoverPulse{0%,100%{opacity:0.7;box-shadow:0 0 0 0 rgba(217,119,6,0)}50%{opacity:1;box-shadow:0 0 20px 4px rgba(217,119,6,0.2)}}
button{font-family:inherit;cursor:pointer}textarea{font-family:inherit}textarea:focus{outline:none}
.sug-chip{cursor:pointer;transition:all .2s;border:1px solid var(--border);background:var(--bg-card);color:var(--text-secondary);display:block;width:100%;padding:10px 14px;border-radius:10px;font-size:12px;text-align:left}
.sug-chip:hover{border-color:var(--accent);background:var(--accent-bg);color:var(--accent)}
.roster-card{transition:all .2s;cursor:pointer;background:var(--bg-card);border-radius:14px;padding:18px;border:1px solid var(--border)}
.roster-card:hover{transform:translateY(-3px);box-shadow:0 8px 24px var(--shadow)}
/* ═══ ED-7: Mobile Responsive Breakpoints ═══ */
@media (max-width: 768px) {
  body { font-size: 14px; }
  /* Panels go full-width on tablet/mobile */
  [data-nexi-panel] { position: fixed !important; left: 0 !important; top: 48px !important; width: 100% !important; height: calc(100% - 48px) !important; border-radius: 0 !important; z-index: 1000 !important; }
  /* Header condenses */
  [data-nexi-header] { padding: 0 8px !important; height: 44px !important; }
  [data-nexi-header] .nexi-brand-text { display: none !important; }
  /* Hide side panels on mobile */
  [style*="position: fixed"][style*="width: 200"] { display: none !important; }
  [style*="position: fixed"][style*="width: 200"] { display: none !important; }
  /* Clear margins on mobile */
  [style*="marginLeft"] { margin-left: 0 !important; }
  [style*="marginRight"] { margin-right: 0 !important; }
  /* Avatar bar becomes scrollable row */
  [data-nexi-roster] { padding: 6px 8px !important; gap: 4px !important; }
  [data-nexi-roster] > div { min-width: 40px !important; }
  /* Chat area adjusts */
  [data-nexi-chat] { padding: 48px 8px 84px 8px !important; }
  /* Input bar stacks */
  [data-nexi-input] { padding: 6px 8px !important; }
  /* Grid layouts go single column */
  .nexi-grid-2, .nexi-grid-3, .nexi-grid-4 { grid-template-columns: 1fr !important; }
  .nexi-grid-5 { grid-template-columns: repeat(2, 1fr) !important; }
  /* Expanded roster cards */
  [data-nexi-roster-expanded] { max-height: 60vh !important; }
  /* Touch targets minimum 44px */
  button, [role="button"], select, input[type="checkbox"] { min-height: 44px; min-width: 44px; }
  select, input, textarea { font-size: 16px !important; /* prevents iOS zoom */ }
  /* Venture config grids */
  .nexi-config-grid { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 480px) {
  /* Phone: single column everything */
  .nexi-grid-2, .nexi-grid-3, .nexi-grid-4, .nexi-grid-5 { grid-template-columns: 1fr !important; }
  [data-nexi-header] { height: 40px !important; }
  [data-nexi-roster] > div > span { font-size: 11px !important; max-width: 36px !important; }
  /* Hide less critical header buttons on small phones */
  [data-nexi-header] .nexi-desktop-only { display: none !important; }
  /* Scorecard metric cards stack */
  .nexi-metric-row { flex-direction: column !important; }
}
/* ═══ ED-8: WCAG 2.1 AA Accessibility ═══ */
/* Focus-visible ring for keyboard navigation */
:focus-visible { outline: 2px solid var(--accent) !important; outline-offset: 2px !important; border-radius: 4px; }
:focus:not(:focus-visible) { outline: none; }
/* Skip-to-content link */
.nexi-skip-link { position: absolute; top: -60px; left: 8px; padding: 8px 16px; background: var(--accent); color: #000; font-weight: 700; font-size: 14px; border-radius: 0 0 8px 8px; z-index: 10000; transition: top 0.2s; text-decoration: none; }
.nexi-skip-link:focus { top: 0; }
/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
/* High contrast focus for buttons */
button:focus-visible, [role="button"]:focus-visible { box-shadow: 0 0 0 2px var(--bg-root), 0 0 0 4px var(--accent); }
/* Screen reader only utility */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0; }
/* Ensure minimum contrast for interactive elements */
a, button, [role="button"] { color: inherit; }
a:focus-visible, button:focus-visible { z-index: 1; position: relative; }
.btn-primary{padding:7px 16px;border-radius:6px;border:none;background:var(--color-teal);color:#fff;font-size:11px;font-weight:700;cursor:pointer;font-family:inherit;transition:opacity .15s}.btn-primary:hover{opacity:.85}.btn-primary:disabled{opacity:.4;cursor:default}
.btn-secondary{padding:7px 16px;border-radius:6px;border:1px solid var(--border);background:transparent;color:var(--text-secondary);font-size:11px;font-weight:600;cursor:pointer;font-family:inherit;transition:all .15s}.btn-secondary:hover{border-color:var(--color-teal);color:var(--color-teal)}
.btn-destructive{padding:7px 16px;border-radius:6px;border:none;background:var(--color-rose);color:#fff;font-size:11px;font-weight:700;cursor:pointer;font-family:inherit;transition:opacity .15s}.btn-destructive:hover{opacity:.85}
.btn-ghost{padding:7px 16px;border-radius:6px;border:none;background:transparent;color:var(--text-dim);font-size:11px;font-weight:600;cursor:pointer;font-family:inherit;transition:color .15s}.btn-ghost:hover{color:var(--text-primary)}
.btn-sm{padding:4px 10px;font-size:11px;border-radius:4px}
/* ═══ CSS UTILITY CLASSES — Foundation for inline style migration (UXI-02) ═══ */
.nxi-flex{display:flex}.nxi-flex-col{display:flex;flex-direction:column}.nxi-center{align-items:center}.nxi-between{justify-content:space-between}
.nxi-gap-4{gap:4px}.nxi-gap-6{gap:6px}.nxi-gap-8{gap:8px}.nxi-gap-12{gap:12px}.nxi-gap-16{gap:16px}
.nxi-pointer{cursor:pointer}.nxi-inherit{font-family:inherit}
.nxi-fw-500{font-weight:500}.nxi-fw-600{font-weight:600}.nxi-fw-700{font-weight:700}
.nxi-fs-11{font-size:11px}.nxi-fs-12{font-size:12px}.nxi-fs-13{font-size:13px}.nxi-fs-14{font-size:14px}
.nxi-uppercase{text-transform:uppercase;letter-spacing:0.05em}
.nxi-mono{font-family:monospace}.nxi-sans{font-family:'DM Sans',sans-serif}.nxi-serif{font-family:'DM Serif Display',serif}
.nxi-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nxi-pill{padding:2px 8px;border-radius:var(--theme-radius-sm,3px);font-size:11px;font-weight:600;white-space:nowrap}
.nxi-card{background:var(--bg-card);border-radius:var(--theme-radius);padding:12px}
.nxi-border{border:1px solid var(--border)}.nxi-border-b{border-bottom:1px solid var(--border)}
.nxi-text-primary{color:var(--text-primary)}.nxi-text-secondary{color:var(--text-secondary)}.nxi-text-muted{color:var(--text-muted)}.nxi-text-dim{color:var(--text-dim)}.nxi-text-faint{color:var(--text-faint)}
.nxi-accent{color:var(--accent)}.nxi-accent-bg{background:var(--accent-bg)}
.nxi-w-full{width:100%}.nxi-h-full{height:100%}
.nxi-shrink-0{flex-shrink:0}.nxi-flex-1{flex:1}
.nxi-nowrap{white-space:nowrap}.nxi-pre-line{white-space:pre-line}
.nxi-overflow-auto{overflow-y:auto}.nxi-overflow-hidden{overflow:hidden}
.nxi-relative{position:relative}.nxi-absolute{position:absolute}
.nxi-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.nxi-border{border:1px solid var(--border)}.nxi-border-b{border-bottom:1px solid var(--border)}
.nxi-text-primary{color:var(--text-primary)}.nxi-text-secondary{color:var(--text-secondary)}.nxi-text-muted{color:var(--text-muted)}.nxi-text-dim{color:var(--text-dim)}
.nxi-accent{color:var(--accent)}.nxi-accent-bg{background:var(--accent-bg)}
select,input[type="date"],input[type="datetime-local"]{color-scheme:dark;background:var(--bg-root);color:var(--text-primary);border:1px solid var(--border)}
