/* --- Design System & Base Variables (Eye-Comfort Warm Paper Theme) --- */
:root {
	/* Warm Paper Palette & Ink Tones */
	--color-brand: #66CCFF;
	--color-primary: #16739B;
	--color-primary-hover: #0F5D80;
	--color-primary-light: #E6F7FF;
	--color-primary-muted: #4B7285;
	--color-primary-contrast: #FFFFFF;
	--color-brand-contrast: #123047;

	--color-secondary: #B8532A;
	--color-secondary-hover: #963E1F;
	--color-secondary-light: #FFF0E8;

	--color-surface: #FAFAFA;
	--color-surface-card: #FFFFFF;
	--color-surface-muted: #F0F5F8;
	
	--color-text-main: #1A2B3A;
	--color-text-muted: #4E6473;
	--color-text-subtle: #6E8493;
	--color-border: #D6E2EA;
	--color-table-header-green: #5B963E;
	--color-table-footer-grey: #EEF4F7;
	--table-header-background: var(--color-table-footer-grey);
	--table-header-text: var(--color-text-main);
	--table-body-background: var(--color-surface-card);
	--table-row-hover-background: var(--color-primary-light);
	--table-scroll-shadow: var(--color-primary-translucent-10);
	--color-success: #147D64;
	--color-warning: #A85D00;
	--color-danger: #C93A3A;
	--color-chart-indigo: #16739B;
	--color-chart-orange: #E6753F;
	--color-chart-green: #147D64;
	--color-chart-gold: #A86F00;
	--color-chart-rose: #B83C63;
	--color-chart-violet: #6945A8;
	--color-chart-cyan: #087E8B;
	--color-primary-translucent-4: rgba(22, 115, 155, 0.035);
	--color-primary-translucent-10: rgba(22, 115, 155, 0.08);
	--color-primary-translucent-20: rgba(22, 115, 155, 0.16);
	--color-danger-translucent-4: rgba(201, 58, 58, 0.04);
	--color-danger-translucent-10: rgba(201, 58, 58, 0.1);
	--color-danger-translucent-16: rgba(201, 58, 58, 0.16);
	--color-overlay: rgba(26, 43, 58, 0.48);
	--color-warning-translucent-12: rgba(168, 93, 0, 0.1);
	--color-success-translucent-12: rgba(20, 125, 100, 0.12);
	--color-surface-card-translucent-20: rgba(255, 255, 255, 0.72);

	/* Base Mappings */
	--bg-base: var(--color-surface);
	--bg-panel: var(--color-surface-card);
	--bg-card: var(--color-surface-card);
	--border-color: var(--color-border);
	--border-hover: rgba(31, 55, 91, 0.18);
	
	--accent-cyan: var(--color-primary);
	--accent-purple: var(--color-secondary);
	--accent-violet: var(--color-primary-hover);
	--accent-success: var(--color-success);
	--accent-warning: var(--color-warning);
	--accent-danger: var(--color-danger);
	
	--text-primary: var(--color-text-main);
	--text-secondary: var(--color-text-muted);
	--text-muted: var(--color-text-subtle);
	--text-inverse: var(--color-primary-contrast);
	--bg-surface-muted: var(--color-surface-muted);
	--font-display: 'Sarabun', 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--font-body: 'Sarabun', 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--font-accent: 'Outfit', 'Sarabun', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--font-mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
	--font-outfit: var(--font-accent);
	--font-sarabun: var(--font-body);
	--motion-dialog-enter: 280ms;
	--motion-dialog-exit: 180ms;
	--motion-dialog-ease: cubic-bezier(0.16, 1, 0.3, 1);

	--font-size-2xs: 0.75rem;
	--font-size-xs: 0.8125rem;
	--font-size-sm: 0.875rem;
	--font-size-base: 0.9375rem;
	--font-size-md: 1rem;
	--font-size-lg: 1.125rem;
	--font-size-xl: 1.25rem;
	--font-size-2xl: 1.5rem;
	--font-size-3xl: 1.875rem;
	--font-size-4xl: 2.25rem;
	--font-size-hero: clamp(2.25rem, 3.5vw, 3rem);

	--line-height-tight: 1.35;
	--line-height-normal: 1.6;
	--line-height-loose: 1.75;
	--role-system-bg: rgba(105, 100, 93, 0.1);
	--role-system-fg: var(--color-text-muted);
	--role-executive-bg: rgba(194, 101, 43, 0.12);
	--role-executive-fg: var(--color-secondary);
	--role-management-bg: rgba(31, 55, 91, 0.1);
	--role-management-fg: var(--color-primary);
	--role-sales-bg: rgba(22, 122, 68, 0.1);
	--role-sales-fg: var(--accent-success);
	--dashboard-canvas: var(--executive-canvas);
	--dashboard-accent-soft: var(--executive-kpi-blue-soft);
	--dashboard-kpi-accent: var(--executive-kpi-blue);
	--dashboard-kpi-tint: var(--executive-kpi-blue-wash);
	--dashboard-rank-background: var(--executive-gold-soft);
	--dashboard-rank-text: var(--executive-gold);
	--dashboard-sales-accent: var(--executive-coral);
	--dashboard-section-accent: var(--executive-blue);
	--dashboard-section-surface: var(--executive-kpi-blue-wash);
	--dashboard-series-color: var(--dashboard-chart-gold);
	--dashboard-accent: var(--executive-blue);
	--dashboard-panel-background: var(--executive-kpi-surface);
	--dashboard-panel-strong: var(--executive-blue);
	--dashboard-panel-muted: var(--executive-panel-muted);
	--dashboard-border: var(--executive-border);
	--dashboard-text: var(--executive-text);
	--dashboard-text-muted: var(--executive-text-muted);
	--dashboard-text-subtle: var(--executive-text-muted);
	--dashboard-text-on-strong: var(--executive-text-on-strong);
	--dashboard-success: var(--executive-positive);
	--dashboard-warning: var(--executive-gold);
	--dashboard-danger: var(--executive-rose);
	--dashboard-warning-background: var(--color-warning-translucent-12);
	--dashboard-row-hover: var(--color-primary-translucent-4);
	--dashboard-focus-ring: var(--executive-blue);
	--dashboard-strong-divider: var(--color-surface-card-translucent-20);
	--dashboard-shadow: 0 14px 32px var(--color-primary-translucent-10);
	--dashboard-chart-indigo: var(--executive-chart-indigo);
	--dashboard-chart-orange: var(--executive-chart-orange);
	--dashboard-chart-green: var(--executive-chart-green);
	--dashboard-chart-gold: var(--color-chart-gold);
	--dashboard-chart-rose: var(--executive-chart-rose);
	--dashboard-chart-violet: var(--executive-chart-violet);
	--dashboard-chart-cyan: var(--executive-chart-green);
	--dashboard-chart-surface: var(--executive-panel-muted);
	--marketing-page-series-1: var(--dashboard-chart-indigo);
	--marketing-page-series-2: var(--dashboard-chart-orange);
	--marketing-page-series-3: var(--dashboard-chart-green);
	--marketing-page-series-4: var(--dashboard-chart-gold);
	--marketing-page-series-5: var(--dashboard-chart-rose);
	--marketing-page-series-6: var(--dashboard-chart-violet);
	--marketing-page-series-7: var(--dashboard-chart-cyan);
	--marketing-page-series-8: color-mix(in srgb, var(--dashboard-chart-indigo) 55%, var(--dashboard-chart-rose));
	--marketing-page-series-9: color-mix(in srgb, var(--dashboard-chart-green) 55%, var(--dashboard-chart-gold));
	--marketing-rank-gold-background: var(--dashboard-rank-background);
	--marketing-rank-gold-border: var(--dashboard-chart-gold);
	--marketing-rank-gold-text: var(--dashboard-rank-text);
	--marketing-rank-silver-background: var(--bg-surface-muted);
	--marketing-rank-silver-border: var(--text-muted);
	--marketing-rank-silver-text: var(--text-primary);
	--marketing-rank-bronze-background: color-mix(in srgb, var(--dashboard-chart-orange) 16%, var(--bg-panel));
	--marketing-rank-bronze-border: var(--dashboard-chart-orange);
	--marketing-rank-bronze-text: var(--dashboard-chart-orange);
	--color-executive-track: #edf1f6;
	--color-executive-chart-blue: #326bf0;
	--color-executive-chart-coral: #e76735;
	--color-executive-chart-teal: #129a87;
	--color-executive-chart-gold: #dfa520;
	--color-executive-chart-rose: #df4476;
	--color-executive-chart-violet: #8b55d9;
	--color-executive-chart-lime: #26a65a;
	--executive-stage-fill: var(--executive-slate);
	--executive-chart-violet: var(--color-executive-chart-violet);
	--executive-chart-lime: var(--color-executive-chart-lime);
	--executive-canvas: var(--color-surface);
	--color-executive-ink: #202a43;
	--executive-ink: var(--color-executive-ink);
	--color-executive-muted: #48536b;
	--executive-muted: var(--color-executive-muted);
	--color-executive-border: #e1e6ed;
	--executive-border: var(--color-executive-border);
	--color-executive-gold: #865700;
	--executive-gold: var(--color-executive-gold);
	--color-executive-gold-soft: #fff0be;
	--executive-gold-soft: var(--color-executive-gold-soft);
	--color-executive-rose: #a52159;
	--executive-rose: var(--color-executive-rose);
	--color-executive-rose-soft: #ffe2ef;
	--executive-rose-soft: var(--color-executive-rose-soft);
	--color-executive-green: #147544;
	--executive-green: var(--color-executive-green);
	--color-executive-green-soft: #d9f2dc;
	--executive-green-soft: var(--color-executive-green-soft);
	--color-executive-blue: #225ec7;
	--executive-blue: var(--color-executive-blue);
	--color-executive-coral: #ac391c;
	--executive-coral: var(--color-executive-coral);
	--color-executive-violet: #6b3bc6;
	--executive-violet: var(--color-executive-violet);
	--color-executive-teal: #086d65;
	--executive-teal: var(--color-executive-teal);
	--color-executive-slate: #526078;
	--executive-slate: var(--color-executive-slate);
	--executive-section-accent: var(--executive-blue);
	--executive-stage-color: var(--executive-slate);
	--executive-stage-surface: var(--executive-kpi-border);
	--executive-panel: var(--color-dashboard-kpi-surface);
	--executive-panel-muted: var(--color-executive-track);
	--executive-panel-strong: var(--color-executive-blue);
	--executive-text: var(--color-executive-ink);
	--executive-text-muted: var(--color-executive-muted);
	--executive-text-subtle: var(--color-executive-muted);
	--executive-text-on-strong: var(--color-dashboard-kpi-surface);
	--executive-positive: var(--color-executive-green);
	--executive-warning: var(--color-warning);
	--executive-accent: var(--color-executive-blue);
	--executive-accent-soft: var(--color-dashboard-kpi-blue-soft);
	--executive-row-hover: var(--color-primary-translucent-4);
	--executive-focus-ring: var(--color-primary-translucent-20);
	--executive-shadow: 0 16px 40px var(--color-primary-translucent-10);
	--executive-strong-divider: var(--color-surface-card-translucent-20);
	--executive-accent-gradient: linear-gradient(180deg, var(--color-primary-hover), var(--color-primary));
	--executive-chart-indigo: var(--color-executive-chart-blue);
	--executive-chart-orange: var(--color-executive-chart-coral);
	--executive-chart-green: var(--color-executive-chart-teal);
	--executive-chart-gold: var(--color-executive-chart-gold);
	--executive-chart-rose: var(--color-executive-chart-rose);
	--executive-chart-surface: var(--color-surface-muted);
	--executive-chart-ink: var(--color-dashboard-kpi-surface);
	--color-dashboard-kpi-surface: #ffffff;
	--executive-kpi-surface: var(--color-dashboard-kpi-surface);
	--color-dashboard-kpi-border: #dbe4ef;
	--executive-kpi-border: var(--color-dashboard-kpi-border);
	--color-dashboard-kpi-muted: #46566b;
	--executive-kpi-muted: var(--color-dashboard-kpi-muted);
	--color-dashboard-kpi-blue: #225ec7;
	--executive-kpi-blue: var(--color-dashboard-kpi-blue);
	--color-dashboard-kpi-blue-soft: #dce8ff;
	--executive-kpi-blue-soft: var(--color-dashboard-kpi-blue-soft);
	--color-dashboard-kpi-coral: #ac391c;
	--executive-kpi-coral: var(--color-dashboard-kpi-coral);
	--color-dashboard-kpi-coral-soft: #ffe0ce;
	--executive-kpi-coral-soft: var(--color-dashboard-kpi-coral-soft);
	--color-dashboard-kpi-violet: #6b3bc6;
	--executive-kpi-violet: var(--color-dashboard-kpi-violet);
	--color-dashboard-kpi-violet-soft: #e8dcff;
	--executive-kpi-violet-soft: var(--color-dashboard-kpi-violet-soft);
	--color-dashboard-kpi-teal: #086d65;
	--executive-kpi-teal: var(--color-dashboard-kpi-teal);
	--color-dashboard-kpi-teal-soft: #c9efe4;
	--executive-kpi-teal-soft: var(--color-dashboard-kpi-teal-soft);
	--color-dashboard-kpi-blue-wash: #f3f7fe;
	--color-dashboard-kpi-coral-wash: #fff6ef;
	--color-dashboard-kpi-violet-wash: #f8f4fd;
	--color-dashboard-kpi-teal-wash: #eff9f5;
	--executive-kpi-blue-wash: var(--color-dashboard-kpi-blue-wash);
	--executive-kpi-coral-wash: var(--color-dashboard-kpi-coral-wash);
	--executive-kpi-violet-wash: var(--color-dashboard-kpi-violet-wash);
	--executive-kpi-teal-wash: var(--color-dashboard-kpi-teal-wash);
	--executive-kpi-accent: var(--executive-kpi-blue);
	--executive-kpi-tint: var(--executive-kpi-blue-wash);
	--application-panel: var(--color-surface-card);
	--application-panel-muted: var(--color-primary-light);
	--application-border: var(--color-border);
	--application-text: var(--color-text-main);
	--application-text-muted: var(--color-text-muted);
	--application-accent: var(--color-primary);
	--application-accent-hover: var(--color-primary-hover);
	--application-danger: var(--color-danger);
	--application-action-icon: var(--color-text-muted);
	--application-action-icon-hover: var(--color-text-main);
	--application-action-hover-background: var(--color-primary-light);
	--application-focus-ring: var(--color-primary-translucent-20);
	--application-overlay: var(--color-overlay);
	--application-text-on-accent: var(--color-surface-card);
	--application-shadow: 0 14px 32px var(--color-primary-translucent-10);
	--access-background: var(--color-surface);
	--access-panel: var(--color-surface-card);
	--access-border: var(--color-border);
	--access-accent: var(--color-primary);
	--access-accent-hover: var(--color-primary-hover);
	--access-accent-muted: var(--color-primary-light);
	--access-warning: var(--color-warning);
	--access-warning-muted: var(--color-warning-translucent-12);
	--access-text-muted: var(--color-text-muted);
	--access-text-on-accent: var(--color-surface-card);
	--access-shadow: var(--dashboard-shadow);
	--sidebar-panel: var(--color-surface-card);
	--sidebar-border: var(--color-border);
	--sidebar-text: var(--color-text-main);
	--sidebar-text-muted: var(--color-text-muted);
	--sidebar-accent: var(--color-primary);
	--sidebar-accent-muted: var(--color-primary-light);
	--sidebar-secondary: var(--color-secondary);
	--sidebar-secondary-muted: var(--color-secondary-light);
	--sidebar-danger: var(--color-danger);
	--sidebar-danger-muted: var(--color-danger-translucent-4);
	--sidebar-danger-hover: var(--color-danger-translucent-10);
	--sidebar-danger-border: var(--color-danger-translucent-16);
	--sidebar-overlay: var(--color-overlay);
	--sidebar-focus-ring: var(--color-primary);
	--sidebar-text-on-accent: var(--color-surface-card);
	--sidebar-shadow: 0 8px 24px var(--color-primary-translucent-10);
	--team-tree-line: var(--color-border);
	--team-tree-accent: var(--color-primary);
	--team-tree-accent-soft: var(--color-primary-light);
	--team-tree-row: var(--color-primary-translucent-4);
	--team-tree-surface: var(--color-surface-card);
	--team-tree-section: var(--color-surface-muted);
	--team-tree-error: var(--color-danger);
	--color-dashboard-ui-canvas: #F8FAFC;
	--dashboard-ui-canvas: var(--color-dashboard-ui-canvas);
	--color-dashboard-ui-card: #FFFFFF;
	--dashboard-ui-card: var(--color-dashboard-ui-card);
	--color-dashboard-ui-white: #FFFFFF;
	--dashboard-ui-white: var(--color-dashboard-ui-white);
	--color-dashboard-ui-border: #E2E8F0;
	--dashboard-ui-border: var(--color-dashboard-ui-border);
	--color-dashboard-ui-border-strong: #CBD5E1;
	--dashboard-ui-border-strong: var(--color-dashboard-ui-border-strong);
	--color-dashboard-ui-border-subtle: #EDF2F7;
	--dashboard-ui-border-subtle: var(--color-dashboard-ui-border-subtle);

	--color-dashboard-ui-text-display: #0F172A;
	--dashboard-ui-text-display: var(--color-dashboard-ui-text-display);
	--color-dashboard-ui-text-heading: #1E293B;
	--dashboard-ui-text-heading: var(--color-dashboard-ui-text-heading);
	--color-dashboard-ui-text-body: #334155;
	--dashboard-ui-text-body: var(--color-dashboard-ui-text-body);
	--color-dashboard-ui-text-muted-dark: #475569;
	--dashboard-ui-text-muted-dark: var(--color-dashboard-ui-text-muted-dark);
	--color-dashboard-ui-text-muted: #64748B;
	--dashboard-ui-text-muted: var(--color-dashboard-ui-text-muted);
	--color-dashboard-ui-text-subtle: #94A3B8;
	--dashboard-ui-text-subtle: var(--color-dashboard-ui-text-subtle);

	--color-dashboard-ui-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.05), 0 1px 2px rgba(15, 23, 42, 0.03);
	--dashboard-ui-shadow-sm: var(--color-dashboard-ui-shadow-sm);
	--color-dashboard-ui-shadow-md: 0 4px 14px rgba(15, 23, 42, 0.07), 0 2px 4px rgba(15, 23, 42, 0.04);
	--dashboard-ui-shadow-md: var(--color-dashboard-ui-shadow-md);
	--color-dashboard-ui-shadow-hover: 0 10px 25px rgba(15, 23, 42, 0.1), 0 4px 8px rgba(15, 23, 42, 0.05);
	--dashboard-ui-shadow-hover: var(--color-dashboard-ui-shadow-hover);

	--color-dashboard-ui-green-bg: #E6F8EB;
	--dashboard-ui-green-bg: var(--color-dashboard-ui-green-bg);
	--color-dashboard-ui-green-bg-gradient: #CFF2D8;
	--dashboard-ui-green-bg-gradient: var(--color-dashboard-ui-green-bg-gradient);
	--color-dashboard-ui-green-border: #86DC9D;
	--dashboard-ui-green-border: var(--color-dashboard-ui-green-border);
	--color-dashboard-ui-green-text: #047857;
	--dashboard-ui-green-text: var(--color-dashboard-ui-green-text);
	--color-dashboard-ui-green-text-deep: #065F46;
	--dashboard-ui-green-text-deep: var(--color-dashboard-ui-green-text-deep);
	--color-dashboard-ui-green-badge: #C3F2CE;
	--dashboard-ui-green-badge: var(--color-dashboard-ui-green-badge);
	--color-dashboard-ui-green-accent: #10B981;
	--dashboard-ui-green-accent: var(--color-dashboard-ui-green-accent);
	--color-dashboard-ui-green-accent-dark: #065F46;
	--dashboard-ui-green-accent-dark: var(--color-dashboard-ui-green-accent-dark);
	--color-dashboard-ui-green-glow: rgba(16, 185, 129, 0.25);
	--dashboard-ui-green-glow: var(--color-dashboard-ui-green-glow);
	--color-dashboard-ui-green-shadow: rgba(16, 185, 129, 0.35);
	--dashboard-ui-green-shadow: var(--color-dashboard-ui-green-shadow);

	--color-dashboard-ui-blue-bg: #E0F0FE;
	--dashboard-ui-blue-bg: var(--color-dashboard-ui-blue-bg);
	--color-dashboard-ui-blue-bg-gradient: #BAE0FD;
	--dashboard-ui-blue-bg-gradient: var(--color-dashboard-ui-blue-bg-gradient);
	--color-dashboard-ui-blue-border: #7DBEF9;
	--dashboard-ui-blue-border: var(--color-dashboard-ui-blue-border);
	--color-dashboard-ui-blue-text: #0265D2;
	--dashboard-ui-blue-text: var(--color-dashboard-ui-blue-text);
	--color-dashboard-ui-blue-text-deep: #1E40AF;
	--dashboard-ui-blue-text-deep: var(--color-dashboard-ui-blue-text-deep);
	--color-dashboard-ui-blue-badge: #BFDBFE;
	--dashboard-ui-blue-badge: var(--color-dashboard-ui-blue-badge);
	--color-dashboard-ui-blue-accent: #2563EB;
	--dashboard-ui-blue-accent: var(--color-dashboard-ui-blue-accent);
	--color-dashboard-ui-blue-accent-dark: #1D4ED8;
	--dashboard-ui-blue-accent-dark: var(--color-dashboard-ui-blue-accent-dark);
	--color-dashboard-ui-blue-glow: rgba(37, 99, 235, 0.25);
	--dashboard-ui-blue-glow: var(--color-dashboard-ui-blue-glow);
	--color-dashboard-ui-blue-shadow: rgba(37, 99, 235, 0.35);
	--dashboard-ui-blue-shadow: var(--color-dashboard-ui-blue-shadow);

	--color-dashboard-ui-purple-bg: #F1E8FE;
	--dashboard-ui-purple-bg: var(--color-dashboard-ui-purple-bg);
	--color-dashboard-ui-purple-bg-gradient: #DFC7FD;
	--dashboard-ui-purple-bg-gradient: var(--color-dashboard-ui-purple-bg-gradient);
	--color-dashboard-ui-purple-border: #BCA2FB;
	--dashboard-ui-purple-border: var(--color-dashboard-ui-purple-border);
	--color-dashboard-ui-purple-text: #6D28D9;
	--dashboard-ui-purple-text: var(--color-dashboard-ui-purple-text);
	--color-dashboard-ui-purple-text-deep: #5B21B6;
	--dashboard-ui-purple-text-deep: var(--color-dashboard-ui-purple-text-deep);
	--color-dashboard-ui-purple-badge: #DDD6FE;
	--dashboard-ui-purple-badge: var(--color-dashboard-ui-purple-badge);
	--color-dashboard-ui-purple-accent: #8B5CF6;
	--dashboard-ui-purple-accent: var(--color-dashboard-ui-purple-accent);
	--color-dashboard-ui-purple-accent-dark: #5B21B6;
	--dashboard-ui-purple-accent-dark: var(--color-dashboard-ui-purple-accent-dark);
	--color-dashboard-ui-purple-glow: rgba(139, 92, 246, 0.25);
	--dashboard-ui-purple-glow: var(--color-dashboard-ui-purple-glow);
	--color-dashboard-ui-purple-shadow: rgba(139, 92, 246, 0.35);
	--dashboard-ui-purple-shadow: var(--color-dashboard-ui-purple-shadow);

	--color-dashboard-ui-amber-bg: #FEF3D6;
	--dashboard-ui-amber-bg: var(--color-dashboard-ui-amber-bg);
	--color-dashboard-ui-amber-bg-gradient: #FDE29D;
	--dashboard-ui-amber-bg-gradient: var(--color-dashboard-ui-amber-bg-gradient);
	--color-dashboard-ui-amber-border: #FBBF24;
	--dashboard-ui-amber-border: var(--color-dashboard-ui-amber-border);
	--color-dashboard-ui-amber-text: #B45309;
	--dashboard-ui-amber-text: var(--color-dashboard-ui-amber-text);
	--color-dashboard-ui-amber-text-deep: #92400E;
	--dashboard-ui-amber-text-deep: var(--color-dashboard-ui-amber-text-deep);
	--color-dashboard-ui-amber-badge: #FDE68A;
	--dashboard-ui-amber-badge: var(--color-dashboard-ui-amber-badge);
	--color-dashboard-ui-amber-accent: #F59E0B;
	--dashboard-ui-amber-accent: var(--color-dashboard-ui-amber-accent);
	--color-dashboard-ui-amber-accent-dark: #92400E;
	--dashboard-ui-amber-accent-dark: var(--color-dashboard-ui-amber-accent-dark);
	--color-dashboard-ui-amber-btn-bg: #D97706;
	--dashboard-ui-amber-btn-bg: var(--color-dashboard-ui-amber-btn-bg);
	--color-dashboard-ui-amber-btn-hover: #B45309;
	--dashboard-ui-amber-btn-hover: var(--color-dashboard-ui-amber-btn-hover);
	--color-dashboard-ui-amber-glow: rgba(245, 158, 11, 0.25);
	--dashboard-ui-amber-glow: var(--color-dashboard-ui-amber-glow);
	--color-dashboard-ui-amber-shadow: rgba(245, 158, 11, 0.35);
	--dashboard-ui-amber-shadow: var(--color-dashboard-ui-amber-shadow);

	--color-dashboard-ui-red-bg: #FEE2E2;
	--dashboard-ui-red-bg: var(--color-dashboard-ui-red-bg);
	--color-dashboard-ui-red-bg-gradient: #FECACA;
	--dashboard-ui-red-bg-gradient: var(--color-dashboard-ui-red-bg-gradient);
	--color-dashboard-ui-red-border: #F87171;
	--dashboard-ui-red-border: var(--color-dashboard-ui-red-border);
	--color-dashboard-ui-red-text: #DC2626;
	--dashboard-ui-red-text: var(--color-dashboard-ui-red-text);
	--color-dashboard-ui-red-text-deep: #991B1B;
	--dashboard-ui-red-text-deep: var(--color-dashboard-ui-red-text-deep);
	--color-dashboard-ui-red-badge: #FECDD3;
	--dashboard-ui-red-badge: var(--color-dashboard-ui-red-badge);
	--color-dashboard-ui-red-accent: #EF4444;
	--dashboard-ui-red-accent: var(--color-dashboard-ui-red-accent);
	--color-dashboard-ui-red-accent-dark: #B91C1C;
	--dashboard-ui-red-accent-dark: var(--color-dashboard-ui-red-accent-dark);
	--color-dashboard-ui-red-glow: rgba(239, 68, 68, 0.25);
	--dashboard-ui-red-glow: var(--color-dashboard-ui-red-glow);
	--color-dashboard-ui-red-shadow: rgba(239, 68, 68, 0.35);
	--dashboard-ui-red-shadow: var(--color-dashboard-ui-red-shadow);

	--color-dashboard-ui-peach-bg: #FFEDD5;
	--dashboard-ui-peach-bg: var(--color-dashboard-ui-peach-bg);
	--color-dashboard-ui-peach-bg-gradient: #FED7AA;
	--dashboard-ui-peach-bg-gradient: var(--color-dashboard-ui-peach-bg-gradient);
	--color-dashboard-ui-peach-border: #FB923C;
	--dashboard-ui-peach-border: var(--color-dashboard-ui-peach-border);
	--color-dashboard-ui-peach-text: #C2410C;
	--dashboard-ui-peach-text: var(--color-dashboard-ui-peach-text);
	--color-dashboard-ui-peach-text-deep: #9A3412;
	--dashboard-ui-peach-text-deep: var(--color-dashboard-ui-peach-text-deep);
	--color-dashboard-ui-peach-badge: #FFEDD5;
	--dashboard-ui-peach-badge: var(--color-dashboard-ui-peach-badge);
	--color-dashboard-ui-peach-accent: #F97316;
	--dashboard-ui-peach-accent: var(--color-dashboard-ui-peach-accent);
	--color-dashboard-ui-peach-glow: rgba(249, 115, 22, 0.25);
	--dashboard-ui-peach-glow: var(--color-dashboard-ui-peach-glow);

	--color-dashboard-ui-teal-bg: #CCFBF1;
	--dashboard-ui-teal-bg: var(--color-dashboard-ui-teal-bg);
	--color-dashboard-ui-teal-bg-gradient: #99F6E4;
	--dashboard-ui-teal-bg-gradient: var(--color-dashboard-ui-teal-bg-gradient);
	--color-dashboard-ui-teal-border: #2DD4BF;
	--dashboard-ui-teal-border: var(--color-dashboard-ui-teal-border);
	--color-dashboard-ui-teal-text: #0F766E;
	--dashboard-ui-teal-text: var(--color-dashboard-ui-teal-text);
	--color-dashboard-ui-teal-text-deep: #115E59;
	--dashboard-ui-teal-text-deep: var(--color-dashboard-ui-teal-text-deep);
	--color-dashboard-ui-teal-badge: #99F6E4;
	--dashboard-ui-teal-badge: var(--color-dashboard-ui-teal-badge);
	--color-dashboard-ui-teal-accent: #14B8A6;
	--dashboard-ui-teal-accent: var(--color-dashboard-ui-teal-accent);
	--color-dashboard-ui-teal-accent-dark: #115E59;
	--dashboard-ui-teal-accent-dark: var(--color-dashboard-ui-teal-accent-dark);
	--color-dashboard-ui-teal-glow: rgba(20, 184, 166, 0.25);
	--dashboard-ui-teal-glow: var(--color-dashboard-ui-teal-glow);

	--color-dashboard-ui-slate-bg: #F1F5F9;
	--dashboard-ui-slate-bg: var(--color-dashboard-ui-slate-bg);
	--color-dashboard-ui-slate-bg-gradient: #E2E8F0;
	--dashboard-ui-slate-bg-gradient: var(--color-dashboard-ui-slate-bg-gradient);
	--color-dashboard-ui-slate-border: #CBD5E1;
	--dashboard-ui-slate-border: var(--color-dashboard-ui-slate-border);
	--color-dashboard-ui-slate-text: #475569;
	--dashboard-ui-slate-text: var(--color-dashboard-ui-slate-text);
	--color-dashboard-ui-slate-text-deep: #334155;
	--dashboard-ui-slate-text-deep: var(--color-dashboard-ui-slate-text-deep);
	--color-dashboard-ui-slate-badge: #E2E8F0;
	--dashboard-ui-slate-badge: var(--color-dashboard-ui-slate-badge);
	--color-dashboard-ui-slate-accent: #64748B;
	--dashboard-ui-slate-accent: var(--color-dashboard-ui-slate-accent);
	--color-dashboard-ui-slate-glow: rgba(71, 85, 105, 0.2);
	--dashboard-ui-slate-glow: var(--color-dashboard-ui-slate-glow);

	--color-dashboard-ui-pulse-green: #10B981;
	--dashboard-ui-pulse-green: var(--color-dashboard-ui-pulse-green);
	--color-dashboard-ui-pulse-green-shadow: rgba(16, 185, 129, 0.45);
	--dashboard-ui-pulse-green-shadow: var(--color-dashboard-ui-pulse-green-shadow);
	--color-dashboard-ui-hover-bg: #F0F7FF;
	--dashboard-ui-hover-bg: var(--color-dashboard-ui-hover-bg);
	--color-dashboard-ui-focus-ring: rgba(37, 99, 235, 0.35);
	--dashboard-ui-focus-ring: var(--color-dashboard-ui-focus-ring);

	--executive-radius: 12px;
	--executive-radius-lg: 16px;
	--executive-radius-pill: 9999px;

	--executive-positive: var(--dashboard-ui-green-text-deep);
	--executive-positive-bg: var(--dashboard-ui-green-bg);
	--executive-negative: var(--dashboard-ui-red-text-deep);
	--executive-negative-bg: var(--dashboard-ui-red-bg);
	--executive-neutral: var(--dashboard-ui-slate-text-deep);
	--executive-neutral-bg: var(--dashboard-ui-slate-bg);

	--color-table-scroll-shadow: rgba(37, 99, 235, 0.12);
	--table-scroll-shadow: var(--color-table-scroll-shadow);
	--color-table-header-bg: #F1F5F9;
	--table-header-bg: var(--color-table-header-bg);
	--table-header-accent: var(--dashboard-ui-blue-accent);
	--color-dashboard-ui-dot-shadow-blue: rgba(37, 99, 235, 0.18);
	--dashboard-ui-dot-shadow-blue: var(--color-dashboard-ui-dot-shadow-blue);
	--color-dashboard-ui-track-shadow: rgba(0, 0, 0, 0.06);
	--dashboard-ui-track-shadow: var(--color-dashboard-ui-track-shadow);
	--color-dashboard-ui-fill-shadow: rgba(0, 0, 0, 0.12);
	--dashboard-ui-fill-shadow: var(--color-dashboard-ui-fill-shadow);
	color-scheme: light;
}

:root[data-theme="dark"] {
	color-scheme: dark;
	--color-brand: #66CCFF;
	--color-primary: #9db7e5;
	--color-primary-hover: #bfd0ef;
	--color-primary-light: #273248;
	--color-primary-muted: #a9b4c7;
	--color-primary-contrast: #101318;
	--color-secondary: #f0a06a;
	--color-secondary-hover: #ffb17b;
	--color-secondary-light: #3c2b24;
	--color-surface: #101318;
	--color-surface-card: #181d24;
	--color-surface-muted: #222933;
	--color-text-main: #f4efe6;
	--color-text-muted: #b8b0a3;
	--color-text-subtle: #938c81;
	--color-border: #353d49;
	--color-table-header-green: #8db95a;
	--color-table-footer-grey: #252c36;
	--color-success: #67d49a;
	--color-warning: #f4ba67;
	--color-danger: #ff8585;
	--color-chart-indigo: #9db7e5;
	--color-chart-orange: #f0a06a;
	--color-chart-green: #67d49a;
	--color-chart-gold: #e6bd62;
	--color-chart-rose: #ef8bac;
	--color-chart-violet: #b99ae8;
	--color-chart-cyan: #68cbd3;
	--color-primary-translucent-4: rgba(157, 183, 229, 0.05);
	--color-primary-translucent-10: rgba(157, 183, 229, 0.1);
	--color-primary-translucent-20: rgba(157, 183, 229, 0.2);
	--color-danger-translucent-4: rgba(255, 133, 133, 0.06);
	--color-danger-translucent-10: rgba(255, 133, 133, 0.12);
	--color-danger-translucent-16: rgba(255, 133, 133, 0.2);
	--color-overlay: rgba(5, 7, 10, 0.72);
	--color-warning-translucent-12: rgba(244, 186, 103, 0.14);
	--color-success-translucent-12: rgba(103, 212, 154, 0.14);
	--color-surface-card-translucent-20: rgba(24, 29, 36, 0.72);
	--color-shadow-18: rgba(5, 7, 10, 0.18);
	--color-shadow-28: rgba(5, 7, 10, 0.28);
	--color-shadow-35: rgba(5, 7, 10, 0.35);
	--color-shadow-42: rgba(5, 7, 10, 0.42);
	--color-shadow-48: rgba(5, 7, 10, 0.48);
	--color-shadow-50: rgba(5, 7, 10, 0.5);
	--color-shadow-62: rgba(5, 7, 10, 0.62);
	--color-dashboard-ui-canvas: var(--color-surface);
	--color-dashboard-ui-card: var(--color-surface-card);
	--color-dashboard-ui-white: var(--color-surface-card);
	--color-dashboard-ui-border: var(--color-border);
	--color-dashboard-ui-border-strong: var(--color-primary-muted);
	--color-dashboard-ui-border-subtle: var(--color-surface-muted);
	--color-dashboard-ui-text-display: var(--color-text-main);
	--color-dashboard-ui-text-heading: var(--color-text-main);
	--color-dashboard-ui-text-body: var(--color-text-muted);
	--color-dashboard-ui-text-muted-dark: var(--color-text-muted);
	--color-dashboard-ui-text-muted: var(--color-text-subtle);
	--color-dashboard-ui-text-subtle: var(--color-text-subtle);
	--color-dashboard-ui-shadow-sm: 0 1px 3px var(--color-shadow-28), 0 1px 2px var(--color-shadow-18);
	--color-dashboard-ui-shadow-md: 0 4px 14px var(--color-shadow-35), 0 2px 4px var(--color-shadow-28);
	--color-dashboard-ui-shadow-hover: 0 10px 25px var(--color-shadow-48), 0 4px 8px var(--color-shadow-35);
	--color-dashboard-ui-green-bg: var(--color-executive-green-soft);
	--color-dashboard-ui-green-bg-gradient: var(--color-dashboard-kpi-teal-soft);
	--color-dashboard-ui-green-border: var(--color-executive-green);
	--color-dashboard-ui-green-text: var(--color-success);
	--color-dashboard-ui-green-text-deep: var(--color-success);
	--color-dashboard-ui-green-badge: var(--color-dashboard-kpi-teal-soft);
	--color-dashboard-ui-green-accent: var(--color-success);
	--color-dashboard-ui-green-accent-dark: var(--color-success);
	--color-dashboard-ui-green-glow: var(--color-success-translucent-12);
	--color-dashboard-ui-green-shadow: var(--color-success-translucent-12);
	--color-dashboard-ui-blue-bg: var(--color-primary-light);
	--color-dashboard-ui-blue-bg-gradient: var(--color-dashboard-kpi-blue-soft);
	--color-dashboard-ui-blue-border: var(--color-primary-muted);
	--color-dashboard-ui-blue-text: var(--color-primary);
	--color-dashboard-ui-blue-text-deep: var(--color-primary-hover);
	--color-dashboard-ui-blue-badge: var(--color-dashboard-kpi-blue-soft);
	--color-dashboard-ui-blue-accent: var(--color-primary);
	--color-dashboard-ui-blue-accent-dark: var(--color-primary-hover);
	--color-dashboard-ui-blue-glow: var(--color-primary-translucent-20);
	--color-dashboard-ui-blue-shadow: var(--color-primary-translucent-20);
	--color-dashboard-ui-purple-bg: var(--color-dashboard-kpi-violet-wash);
	--color-dashboard-ui-purple-bg-gradient: var(--color-dashboard-kpi-violet-soft);
	--color-dashboard-ui-purple-border: var(--color-executive-violet);
	--color-dashboard-ui-purple-text: var(--color-executive-violet);
	--color-dashboard-ui-purple-text-deep: var(--color-executive-violet);
	--color-dashboard-ui-purple-badge: var(--color-dashboard-kpi-violet-soft);
	--color-dashboard-ui-purple-accent: var(--color-executive-violet);
	--color-dashboard-ui-purple-accent-dark: var(--color-executive-violet);
	--color-dashboard-ui-purple-glow: var(--color-primary-translucent-20);
	--color-dashboard-ui-purple-shadow: var(--color-primary-translucent-20);
	--color-dashboard-ui-amber-bg: var(--color-executive-gold-soft);
	--color-dashboard-ui-amber-bg-gradient: var(--color-dashboard-kpi-coral-soft);
	--color-dashboard-ui-amber-border: var(--color-warning);
	--color-dashboard-ui-amber-text: var(--color-warning);
	--color-dashboard-ui-amber-text-deep: var(--color-warning);
	--color-dashboard-ui-amber-badge: var(--color-executive-gold-soft);
	--color-dashboard-ui-amber-accent: var(--color-warning);
	--color-dashboard-ui-amber-accent-dark: var(--color-warning);
	--color-dashboard-ui-amber-btn-bg: var(--color-warning);
	--color-dashboard-ui-amber-btn-hover: var(--color-executive-gold);
	--color-dashboard-ui-amber-glow: var(--color-warning-translucent-12);
	--color-dashboard-ui-amber-shadow: var(--color-warning-translucent-12);
	--color-dashboard-ui-red-bg: var(--color-executive-rose-soft);
	--color-dashboard-ui-red-bg-gradient: var(--color-dashboard-kpi-coral-soft);
	--color-dashboard-ui-red-border: var(--color-danger);
	--color-dashboard-ui-red-text: var(--color-danger);
	--color-dashboard-ui-red-text-deep: var(--color-danger);
	--color-dashboard-ui-red-badge: var(--color-executive-rose-soft);
	--color-dashboard-ui-red-accent: var(--color-danger);
	--color-dashboard-ui-red-accent-dark: var(--color-danger);
	--color-dashboard-ui-red-glow: var(--color-danger-translucent-16);
	--color-dashboard-ui-red-shadow: var(--color-danger-translucent-16);
	--color-dashboard-ui-peach-bg: var(--color-dashboard-kpi-coral-wash);
	--color-dashboard-ui-peach-bg-gradient: var(--color-dashboard-kpi-coral-soft);
	--color-dashboard-ui-peach-border: var(--color-secondary);
	--color-dashboard-ui-peach-text: var(--color-secondary);
	--color-dashboard-ui-peach-text-deep: var(--color-secondary-hover);
	--color-dashboard-ui-peach-badge: var(--color-dashboard-kpi-coral-soft);
	--color-dashboard-ui-peach-accent: var(--color-secondary);
	--color-dashboard-ui-peach-glow: var(--color-warning-translucent-12);
	--color-dashboard-ui-teal-bg: var(--color-dashboard-kpi-teal-wash);
	--color-dashboard-ui-teal-bg-gradient: var(--color-dashboard-kpi-teal-soft);
	--color-dashboard-ui-teal-border: var(--color-executive-teal);
	--color-dashboard-ui-teal-text: var(--color-executive-teal);
	--color-dashboard-ui-teal-text-deep: var(--color-executive-teal);
	--color-dashboard-ui-teal-badge: var(--color-dashboard-kpi-teal-soft);
	--color-dashboard-ui-teal-accent: var(--color-executive-teal);
	--color-dashboard-ui-teal-accent-dark: var(--color-executive-teal);
	--color-dashboard-ui-teal-glow: var(--color-success-translucent-12);
	--color-dashboard-ui-slate-bg: var(--color-surface-muted);
	--color-dashboard-ui-slate-bg-gradient: var(--color-table-footer-grey);
	--color-dashboard-ui-slate-border: var(--color-border);
	--color-dashboard-ui-slate-text: var(--color-text-muted);
	--color-dashboard-ui-slate-text-deep: var(--color-text-main);
	--color-dashboard-ui-slate-badge: var(--color-table-footer-grey);
	--color-dashboard-ui-slate-accent: var(--color-text-muted);
	--color-dashboard-ui-slate-glow: var(--color-shadow-28);
	--color-dashboard-ui-pulse-green: var(--color-success);
	--color-dashboard-ui-pulse-green-shadow: var(--color-success-translucent-12);
	--color-dashboard-ui-hover-bg: var(--color-primary-light);
	--color-dashboard-ui-focus-ring: var(--color-primary-translucent-20);
	--color-table-scroll-shadow: var(--color-shadow-35);
	--color-table-header-bg: var(--color-surface-muted);
	--color-dashboard-ui-dot-shadow-blue: var(--color-primary-translucent-20);
	--color-dashboard-ui-track-shadow: var(--color-shadow-28);
	--color-dashboard-ui-fill-shadow: var(--color-shadow-48);
	--border-hover: var(--color-primary-translucent-20);
	--role-system-bg: var(--color-surface-muted);
	--role-executive-bg: var(--color-secondary-light);
	--role-management-bg: var(--color-primary-light);
	--role-sales-bg: var(--color-success-translucent-12);
	--color-executive-track: #252c36;
	--color-executive-chart-blue: #9db7e5;
	--color-executive-chart-coral: #f0a06a;
	--color-executive-chart-teal: #68cbbf;
	--color-executive-chart-gold: #e6bd62;
	--color-executive-chart-rose: #ef8bac;
	--color-executive-chart-violet: #b99ae8;
	--color-executive-chart-lime: #83cf78;
	--color-executive-ink: #f4efe6;
	--color-executive-muted: #b8b0a3;
	--color-executive-border: #353d49;
	--color-executive-gold: #f4c86f;
	--color-executive-gold-soft: #3a3121;
	--color-executive-rose: #ef8bac;
	--color-executive-rose-soft: #3e2731;
	--color-executive-green: #67d49a;
	--color-executive-green-soft: #20382d;
	--color-executive-blue: #9db7e5;
	--color-executive-coral: #f0a06a;
	--color-executive-violet: #b99ae8;
	--color-executive-teal: #68cbbf;
	--color-executive-slate: #b0bac9;
	--color-dashboard-kpi-surface: #181d24;
	--color-dashboard-kpi-border: #353d49;
	--color-dashboard-kpi-muted: #b8b0a3;
	--color-dashboard-kpi-blue: #9db7e5;
	--color-dashboard-kpi-blue-soft: #293750;
	--color-dashboard-kpi-coral: #f0a06a;
	--color-dashboard-kpi-coral-soft: #402c24;
	--color-dashboard-kpi-violet: #b99ae8;
	--color-dashboard-kpi-violet-soft: #342a46;
	--color-dashboard-kpi-teal: #68cbbf;
	--color-dashboard-kpi-teal-soft: #203936;
	--color-dashboard-kpi-blue-wash: #202938;
	--color-dashboard-kpi-coral-wash: #30241f;
	--color-dashboard-kpi-violet-wash: #2b2535;
	--color-dashboard-kpi-teal-wash: #1d302e;
	--dialog-backdrop-bg: var(--color-overlay);
	--dialog-card-shadow: 0 25px 50px -12px var(--color-shadow-62);
	--dialog-btn-cancel-hover: var(--color-primary-translucent-10);
	--bureau-border-subtle: var(--color-border);
	--bureau-control-bg: var(--color-surface-card-translucent-20);
	--bureau-control-hover-bg: var(--color-surface-muted);
	--bureau-control-focus-ring: var(--color-primary-translucent-20);
	--bureau-calc-bg: var(--color-success-translucent-12);
	--bureau-calc-border: var(--color-success);
	--bureau-highlight-bg: var(--color-warning-translucent-12);
	--bureau-highlight-border: var(--color-secondary);
	--bureau-highlight-total-bg: var(--color-secondary-light);
	--bureau-success-bg: var(--color-success-translucent-12);
	--bureau-danger-light: var(--color-danger-translucent-10);
	--bureau-blue-bg: var(--color-primary-translucent-10);
	--bureau-shadow: var(--color-shadow-28);
	--bureau-shadow-md: var(--color-shadow-42);
	--bureau-shadow-light: var(--color-shadow-18);
	--bureau-foryou-bg: var(--color-primary-translucent-10);
	--bureau-foryou-border: var(--color-primary-translucent-20);
	--bureau-dplus-bg: var(--color-warning-translucent-12);
	--bureau-dplus-border: var(--color-secondary);
	--password-success-bg: var(--color-success-translucent-12);
	--password-success-border: var(--color-success);
	--password-danger-bg: var(--color-danger-translucent-10);
	--password-danger-border: var(--color-danger);
	--password-input-bg: var(--color-surface-card);
	--password-input-focus-shadow: var(--color-primary-translucent-10);
	--password-card-shadow: 0 16px 48px var(--color-shadow-35);
	--password-card-shadow-hover: 0 24px 60px var(--color-shadow-48);
	--chip-bg-color: var(--color-surface-muted);
	--modal-backdrop-bg: var(--color-overlay);
	--modal-card-shadow: 0 25px 50px -12px var(--color-shadow-62);
	--modal-close-btn-hover-bg: var(--color-primary-translucent-10);
	--status-active-bg: var(--color-success-translucent-12);
	--status-active-border: var(--color-success);
	--status-inactive-bg: var(--color-surface-muted);
	--status-inactive-border: var(--color-border);
	--toggle-bg-off: var(--color-border);
	--toggle-knob: var(--color-text-main);
	--toggle-shadow: var(--color-shadow-50);
}

/* --- Base Resets --- */
*, *::before, *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	scrollbar-color: var(--color-primary-muted) var(--color-surface-muted);
}

::selection {
	background-color: var(--color-primary);
	color: var(--text-inverse);
}

input,
select,
textarea {
	accent-color: var(--color-primary);
	caret-color: var(--color-primary);
}

body {
	background-color: var(--bg-base);
	color: var(--text-primary);
	font-family: var(--font-body);
	font-size: var(--font-size-base);
	line-height: var(--line-height-normal);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	min-height: 100vh;
	display: flex;
	overflow-x: hidden;
}

@keyframes fadeInUp {
	from { opacity: 0; transform: translateY(16px); }
	to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in {
	animation: fadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
	opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
	.animate-fade-in {
		animation: none;
		opacity: 1;
	}
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-display);
	font-weight: 700;
	line-height: var(--line-height-tight);
	letter-spacing: normal;
	text-wrap: balance;
	color: var(--text-primary);
}

/* --- Layout Structure --- */
.app-wrapper {
	display: flex;
	width: 100%;
	min-height: 100vh;
	position: relative;
}

.main-content {
	flex: 1;
	margin-left: 304px;
	padding: 28px 32px 48px;
	min-width: 0;
	position: relative;
	z-index: 1;
	overflow-x: hidden;
	max-width: 100%;
}

/* --- Ambient Glow Backgrounds --- */
.ambient-glow {
	position: absolute;
	width: 600px;
	height: 600px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(30, 58, 138, 0.05) 0%, rgba(249, 115, 22, 0.02) 50%, rgba(0,0,0,0) 100%);
	top: -200px;
	right: -100px;
	pointer-events: none;
	z-index: 0;
}

/* --- Typography & Header --- */
.hero-banner {
	margin-bottom: 24px;
	padding-top: 4px;
	position: relative;
}

.hero-title {
	font-size: var(--font-size-hero);
	font-weight: 800;
	max-width: 1100px;
	line-height: var(--line-height-tight);
	letter-spacing: normal;
	color: var(--color-primary);
	margin-bottom: 10px;
	padding-top: 2px;
}

.hero-subtitle {
	font-family: var(--font-body);
	font-size: var(--font-size-lg);
	color: var(--text-secondary);
	max-width: 600px;
	font-weight: 400;
	line-height: var(--line-height-normal);
}



/* --- Bento Grid System --- */
.bento-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	grid-auto-flow: dense;
	margin-bottom: 48px;
}

.bento-card {
	background: var(--bg-card);
	border: none;
	border-radius: 24px;
	padding: 32px;
	position: relative;
	overflow: hidden;
	min-width: 0;
	
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	box-shadow: 0 8px 30px rgba(30, 58, 138, 0.04);
	transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.bento-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: radial-gradient(800px circle at var(--x, 0px) var(--y, 0px), rgba(30, 58, 138, 0.03), transparent 40%);
	pointer-events: none;
	z-index: 1;
}

.bento-card:hover {
	transform: translateY(-4px) scale(1.01);
	box-shadow: 0 20px 40px rgba(30, 58, 138, 0.08);
}

.bento-card.col-2 {
	grid-column: span 2;
}

.bento-card.row-2 {
	grid-row: span 2;
}

/* Card components */
.card-header-meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 24px;
}

.card-label {
	font-size: var(--font-size-xs);
	font-weight: 600;
	color: var(--text-secondary);
	letter-spacing: 0.02em;
}

.card-icon {
	width: 42px;
	height: 42px;
	border-radius: 12px;
	background: var(--color-primary-light);
	border: 1px solid rgba(30, 58, 138, 0.05);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-primary);
}

.card-icon .material-symbols-outlined {
	font-size: 24px;
	flex-shrink: 0;
}

.card-value {
	font-family: var(--font-display);
	font-size: var(--font-size-4xl);
	font-weight: 700;
	margin-bottom: 8px;
	letter-spacing: normal;
	color: var(--color-primary);
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum";
}

.card-change {
	font-size: var(--font-size-sm);
	display: flex;
	align-items: center;
	gap: 4px;
}

.card-change.up {
	color: var(--accent-success);
}

.card-change.down {
	color: var(--accent-danger);
}

.card-change .change-icon {
	font-size: 16px;
	flex-shrink: 0;
}

/* Custom Bento Card flex layout helper */
.bento-card-flex {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
}

/* --- Progress Bar --- */
.progress-container,
.progress-container-sm {
	background: var(--color-primary-light);
	height: 6px;
	border-radius: 10px;
	overflow: hidden;
	margin-top: 16px;
}

.progress-container-sm {
	width: 120px;
	margin-top: 0;
	margin-bottom: 8px;
}

.progress-bar {
	height: 100%;
	background: linear-gradient(90deg, var(--color-secondary), var(--color-primary));
	border-radius: 10px;
	width: 0%;
}

.progress-bar.accent-cyan {
	background: var(--accent-cyan);
}

/* --- Section Title Pinning (GSAP ready) --- */
.split-section {
	display: flex;
	gap: 48px;
	margin-top: 32px;
	margin-bottom: 64px;
}

.section-pin {
	flex: 0 0 320px;
}

.section-pin h2 {
	font-size: var(--font-size-3xl);
	font-weight: 800;
	letter-spacing: normal;
	line-height: var(--line-height-tight);
	position: sticky;
	top: 48px;
}

.section-pin-desc {
	color: var(--text-secondary);
	margin-top: 16px;
	font-weight: 400;
	line-height: var(--line-height-normal);
}

.tool-name {
	font-weight: 600;
	font-size: var(--font-size-base);
}

/* Excel-like Table */
.excel-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--font-size-base);
	background: var(--color-surface-card);
	font-family: inherit;
}
.excel-table th, .excel-table td {
	border: 1px solid #111827;
	padding: 0.5rem 1rem;
	vertical-align: middle;
}
.excel-table td.text-center { text-align: center; }
.excel-table td.text-right { text-align: right; }
.excel-table td.text-left { text-align: left; }
.excel-table td.font-bold { font-weight: bold; }
.excel-bg-yellow { background-color: #fef08a; }
.excel-bg-red { background-color: #ef4444; color: white; }
.excel-bg-gray { background-color: #f1f5f9; }

.section-pin-action {
	margin-top: 32px;
}

.section-content {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

/* --- Premium Data Table --- */
.table-panel {
	background: var(--bg-panel);
	border: 1px solid var(--border-color);
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 4px 20px rgba(30, 58, 138, 0.03);
}

.table-header {
	padding: 24px 32px;
	border-bottom: 1px solid var(--border-color);
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.table-title {
	font-size: var(--font-size-xl);
	font-weight: 700;
	color: var(--color-primary);
	line-height: var(--line-height-tight);
}

.table-wrapper {
	overflow-x: auto;
}

table {
	width: 100%;
	border-collapse: collapse;
	text-align: left;
	font-variant-numeric: tabular-nums;
	background-color: var(--table-body-background);
}

th {
	padding: 18px 32px;
	font-size: var(--font-size-xs);
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--table-header-text);
	border-bottom: 1px solid var(--border-color);
	background-color: var(--table-header-background);
	line-height: var(--line-height-tight);
}

td {
	padding: 20px 32px;
	font-size: var(--font-size-base);
	border-bottom: 1px solid var(--border-color);
	color: var(--text-primary);
	background-color: var(--table-body-background);
	line-height: var(--line-height-normal);
}

tr:last-child td {
	border-bottom: none;
}

tr:hover td {
	background: var(--table-row-hover-background);
}

/* Font Styling helpers */
.font-outfit {
	font-family: var(--font-accent);
}

.font-display {
	font-family: var(--font-display);
}

.font-sarabun,
.font-body {
	font-family: var(--font-body);
}

.font-mono {
	font-family: var(--font-mono);
}

.tabular-nums {
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum";
}

.font-weight-500 {
	font-weight: 500;
}

.font-weight-600 {
	font-weight: 600;
}

.text-primary-color {
	color: var(--text-primary);
}

.text-secondary-color {
	color: var(--text-secondary);
}

.text-muted-color {
	color: var(--text-muted);
}

.text-sm-muted {
	font-size: var(--font-size-2xs);
	color: var(--text-muted);
}

.card-subtext {
	font-size: var(--font-size-xs);
	color: var(--text-muted);
}

/* Score styling helpers */
.score-green {
	font-family: var(--font-display);
	font-weight: 600;
	color: var(--accent-success);
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum";
}

.score-yellow {
	font-family: var(--font-display);
	font-weight: 600;
	color: var(--accent-warning);
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum";
}

.score-red {
	font-family: var(--font-display);
	font-weight: 600;
	color: var(--accent-danger);
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum";
}

/* Custom badges */
.status-badge {
	display: inline-flex;
	align-items: center;
	padding: 4px 12px;
	border-radius: 50px;
	font-size: var(--font-size-2xs);
	font-weight: 600;
	line-height: 1.4;
}

.status-badge.approved {
	background: rgba(16, 185, 129, 0.1);
	color: var(--accent-success);
	border: 1px solid rgba(16, 185, 129, 0.2);
}

.status-badge.pending {
	background: var(--color-secondary-light);
	color: var(--color-secondary);
	border: 1px solid rgba(249, 115, 22, 0.2);
}

.status-badge.rejected {
	background: rgba(239, 68, 68, 0.1);
	color: var(--accent-danger);
	border: 1px solid rgba(239, 68, 68, 0.2);
}

/* --- Buttons & Inputs --- */
.btn-primary {
	background: var(--color-primary);
	color: var(--color-primary-contrast);
	border: none;
	padding: 12px 24px;
	border-radius: 10px;
	font-weight: 600;
	font-family: var(--font-body);
	font-size: var(--font-size-base);
	line-height: var(--line-height-normal);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
}

.btn-primary:hover {
	background: var(--color-primary-hover);
	box-shadow: 0 4px 12px rgba(30, 58, 138, 0.2);
}

.btn-secondary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: var(--color-surface-card);
	color: var(--color-primary);
	border: 1px solid var(--color-border);
	padding: 12px 24px;
	border-radius: 10px;
	font-weight: 600;
	font-family: var(--font-body);
	font-size: var(--font-size-base);
	line-height: var(--line-height-normal);
	cursor: pointer;
	text-decoration: none;
}

.btn-secondary .material-symbols-outlined {
	flex-shrink: 0;
	font-size: 20px;
	line-height: 1;
}

.btn-secondary:hover {
	background: var(--color-primary-light);
	border-color: var(--color-primary);
}

/* --- Partner Marquee --- */
.marquee-container {
	width: 100%;
	overflow: hidden;
	padding: 24px 0;
	border-top: 1px solid var(--border-color);
	border-bottom: 1px solid var(--border-color);
	margin-bottom: 48px;
	background-color: var(--color-surface-card);
}

.marquee-content {
	display: flex;
	gap: 80px;
	width: max-content;
}

.marquee-item {
	font-family: var(--font-display);
	font-size: var(--font-size-xl);
	font-weight: 700;
	color: var(--text-secondary);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* --- Card Stacking Structure --- */
.stacked-section {
	margin-top: 96px;
	margin-bottom: 96px;
}

.stacked-section-title {
	font-size: var(--font-size-3xl);
	font-weight: 800;
	letter-spacing: normal;
	line-height: var(--line-height-tight);
	margin-bottom: 48px;
	max-width: 600px;
}

.stacked-cards-container {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.stacked-card {
	background: var(--color-surface-card);
	border: 1px solid var(--border-color);
	border-radius: 24px;
	padding: 40px;
	position: sticky;
	top: 120px;
	min-height: 250px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	box-shadow: 0 -10px 30px rgba(30, 58, 138, 0.03), 0 10px 20px rgba(0, 0, 0, 0.02);
}

.stacked-card-desc {
	color: var(--text-secondary);
	max-width: 650px;
	line-height: var(--line-height-normal);
	font-weight: 400;
}

.stacked-card-footer {
	display: flex;
	gap: 24px;
	border-top: 1px solid var(--border-color);
	padding-top: 24px;
	margin-top: 24px;
}

.meta-label {
	font-size: var(--font-size-2xs);
	color: var(--text-muted);
}

/* Theme customization classes for stacked cards */
.card-purple {
	border-color: rgba(138, 43, 226, 0.2);
}
.card-blue {
	border-color: rgba(30, 58, 138, 0.2);
}
.card-green {
	border-color: rgba(16, 185, 129, 0.2);
}

.text-purple {
	color: var(--color-secondary);
}
.text-blue {
	color: var(--color-primary);
}
.text-green {
	color: var(--accent-success);
}

.text-primary-theme {
	color: var(--color-primary);
}
.text-secondary-theme {
	color: var(--color-secondary);
}
.text-success-theme {
	color: var(--accent-success);
}
.text-warning-theme {
	color: var(--accent-warning);
}
.text-danger-theme {
	color: var(--accent-danger);
}

/* --- Responsive Adjustments --- */
@media (max-width: 1200px) {
	.bento-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.bento-card.col-2 {
		grid-column: span 2;
	}
}

@media (max-width: 1024px) {
	.main-content {
		margin-left: 0;
		padding: calc(72px + env(safe-area-inset-top, 0px)) 16px 32px;
	}
	.split-section {
		flex-direction: column;
		gap: 24px;
	}
	.section-pin {
		flex: auto;
	}
	.section-pin h2 {
		position: static;
	}
}

@media (max-width: 768px) {
	.bento-grid {
		grid-template-columns: 1fr;
	}
	.bento-card.col-2 {
		grid-column: span 1;
	}
}

/* Empty Dashboard State */
.empty-dashboard {
	padding: 2rem;
}
.empty-title {
	margin-bottom: 1rem;
}

/* Utilities */
.d-flex-between {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}
.title-mb-sm {
	margin-bottom: 0.5rem;
}
.mt-4 { margin-top: 1rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-4 { margin-bottom: 1.5rem; }
.mx-auto { margin-left: auto; margin-right: auto; }
.max-w-800 { max-width: 800px; }

.grid-2-col {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.5rem;
}
@media (max-width: 768px) {
	.grid-2-col {
		grid-template-columns: 1fr;
	}
}

.role-selector {
	padding: 0.5rem;
	border-radius: 8px;
	border: 1px solid var(--color-border);
	font-family: inherit;
	background-color: var(--color-surface-card);
}

.is-hidden {
	display: none !important;
}

.data-table-wrapper {
	max-height: min(34rem, 55dvh);
	overflow: auto;
	overscroll-behavior: contain;
	scrollbar-gutter: stable;
	scrollbar-color: var(--color-primary) var(--color-surface-muted);
	scrollbar-width: thin;
}

.data-table {
	min-width: 980px;
	border-collapse: separate;
	border-spacing: 0;
	background-color: var(--table-body-background);
}

.data-table thead th {
	position: sticky;
	top: 0;
	z-index: 2;
	background-color: var(--table-header-background);
	color: var(--table-header-text);
	border-bottom: 2px solid var(--color-primary-hover);
	box-shadow: 0 2px 0 var(--table-scroll-shadow);
}

.data-table tbody tr:hover td {
	background-color: var(--table-row-hover-background);
}