/* =============================================================
COMPREHENSIVE DESIGN SYSTEM (ROOT VARIABLES)
============================================================= */
:root {
/* ═══════════════════════════════════════════════════════════
1. TYPOGRAPHY - අකුරු මෝස්තර
═══════════════════════════════════════════════════════════ */
/* Font Families */
--font-primary: 'Inter', 'Poppins', system-ui, sans-serif;
--font-display: 'Space Grotesk', 'Orbitron', sans-serif;
--font-mono: 'JetBrains Mono', 'Fira Code', monospace;
--font-handwriting: 'Caveat', cursive;
/* Font Sizes - Fluid Scale */
--font-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
--font-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
--font-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
--font-md: clamp(1.125rem, 1rem + 0.625vw, 1.25rem);
--font-lg: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
--font-xl: clamp(1.5rem, 1.3rem + 1vw, 2rem);
--font-2xl: clamp(2rem, 1.7rem + 1.5vw, 3rem);
--font-3xl: clamp(2.5rem, 2rem + 2.5vw, 4rem);
--font-4xl: clamp(3rem, 2.5rem + 3vw, 5rem);
/* Font Weights */
--font-weight-thin: 100;
--font-weight-extralight: 200;
--font-weight-light: 300;
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--font-weight-extrabold: 800;
--font-weight-black: 900;
/* Line Heights */
--line-height-tight: 1.2;
--line-height-snug: 1.375;
--line-height-normal: 1.5;
--line-height-relaxed: 1.625;
--line-height-loose: 2;
/* Letter Spacing */
--letter-spacing-tighter: -0.05em;
--letter-spacing-tight: -0.025em;
--letter-spacing-normal: 0em;
--letter-spacing-wide: 0.025em;
--letter-spacing-wider: 0.05em;
--letter-spacing-widest: 0.1em;
/* ═══════════════════════════════════════════════════════════
2. COLOR SYSTEM - වර්ණ පද්ධතිය
═══════════════════════════════════════════════════════════ */
/* Brand Colors */
--primary: #7e61ff;
--primary-light: #9a7fff;
--primary-dark: #6247e5;
--primary-hover: #8d70ff;
--secondary: #ff2ea6;
--secondary-light: #ff5cbb;
--secondary-dark: #e5298c;
--secondary-hover: #ff45b0;
--accent: #00f2ff;
--accent-light: #33f5ff;
--accent-dark: #00d9e6;
--accent-hover: #1af4ff;
/* Functional/Semantic Colors */
--success: #10b981;
--success-light: #34d399;
--success-dark: #059669;
--danger: #ef4444;
--danger-light: #f87171;
--danger-dark: #dc2626;
--warning: #f59e0b;
--warning-light: #fbbf24;
--warning-dark: #d97706;
--info: #3b82f6;
--info-light: #60a5fa;
--info-dark: #2563eb;
/* Cyber & Neon Palette - සයිබර් සහ නියොන් වර්ණ */
--neon-cyan: #00f5ff;
--neon-purple: #b200ff;
--neon-pink: #ff2d78;
--neon-emerald: #00ff9d;
--neon-yellow: #fffc00;
--neon-orange: #ff6b00;
--neon-blue: #0066ff;
--alien-neon: #ccff00;
--electric-violet: #8b00ff;
/* Luxury/Premium Theme */
--maroon: #6b0f1a;
--maroon-light: #8b1526;
--gold: #d4af37;
--gold-light: #f4cf5a;
--silver: #c0c0c0;
--bronze: #cd7f32;
/* Grayscale Palette */
--white: #ffffff;
--gray-50: #f9fafb;
--gray-100: #f3f4f6;
--gray-200: #e5e7eb;
--gray-300: #d1d5db;
--gray-400: #9ca3af;
--gray-500: #6b7280;
--gray-600: #4b5563;
--gray-700: #374151;
--gray-800: #1f2937;
--gray-900: #111827;
--black: #000000;
/* ═══════════════════════════════════════════════════════════
3. BACKGROUNDS & SURFACES - පසුබිම් වර්ණ
═══════════════════════════════════════════════════════════ */
--bg-void: #020408; /* ඉතා තද (Deep Black) */
--bg-dark: #0a0812; /* ප්රධාන තද පසුබිම */
--bg-darker: #060610; /* තව තද */
--bg-card: #1a1625; /* කාඩ්පත් සඳහා */
--bg-elevated: #252538; /* මතුපිටින් පෙනෙන කොටස් */
--bg-hover: #2d2a45; /* Hover state */
--bg-active: #353250; /* Active state */
--bg-disabled: #1a1a2e; /* Disabled state */
/* Chat/Message Backgrounds */
--bot-msg-bg: rgba(60, 60, 100, 0.7);
--user-msg-bg: rgba(0, 123, 255, 0.5);
--system-msg-bg: rgba(100, 100, 100, 0.4);
/* Overlay Backgrounds */
--overlay-light: rgba(0, 0, 0, 0.5);
--overlay-medium: rgba(0, 0, 0, 0.7);
--overlay-heavy: rgba(0, 0, 0, 0.85);
--overlay-blur: rgba(10, 8, 18, 0.8);
/* ═══════════════════════════════════════════════════════════
4. TEXT COLORS - අකුරු වල වර්ණ
═══════════════════════════════════════════════════════════ */
--text-primary: #f0f4ff;
--text-secondary: rgba(200, 210, 240, 0.70);
--text-tertiary: rgba(180, 190, 220, 0.55);
--text-muted: rgba(160, 175, 210, 0.45);
--text-disabled: rgba(140, 155, 190, 0.35);
--text-inverse: #020408;
--text-link: var(--primary);
--text-link-hover: var(--primary-light);
/* ═══════════════════════════════════════════════════════════
5. GLASSMORPHISM - වීදුරු ආචරණ
═══════════════════════════════════════════════════════════ */
--glass-bg: rgba(255, 255, 255, 0.05);
--glass-bg-light: rgba(255, 255, 255, 0.08);
--glass-bg-heavy: rgba(255, 255, 255, 0.12);
--glass-border: rgba(255, 255, 255, 0.1);
--glass-border-bright: rgba(255, 255, 255, 0.2);
--glass-blur: blur(20px);
--glass-blur-light: blur(10px);
--glass-blur-heavy: blur(30px);
--glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
/* ═══════════════════════════════════════════════════════════
6. BORDERS & GLOWS - දාර සහ දීප්තිය
═══════════════════════════════════════════════════════════ */
/* Border Colors */
--border-subtle: rgba(255, 255, 255, 0.08);
--border-medium: rgba(255, 255, 255, 0.15);
--border-bright: rgba(255, 255, 255, 0.20);
--border-primary: var(--primary);
--border-danger: var(--danger);
--border-success: var(--success);
/* Border Widths */
--border-thin: 1px;
--border-medium: 2px;
--border-thick: 3px;
--border-heavy: 4px;
/* Glow Effects */
--glow-primary: 0 0 20px rgba(126, 97, 255, 0.4);
--glow-primary-strong: 0 0 30px rgba(126, 97, 255, 0.6);
--glow-secondary: 0 0 20px rgba(255, 46, 166, 0.4);
--glow-cyan: 0 0 20px rgba(0, 242, 255, 0.3);
--glow-cyan-strong: 0 0 30px rgba(0, 242, 255, 0.5);
--glow-maroon: 0 0 20px rgba(107, 15, 26, 0.8);
--glow-success: 0 0 20px rgba(16, 185, 129, 0.4);
--glow-danger: 0 0 20px rgba(239, 68, 68, 0.4);
--glow-neon: 0 0 25px currentColor;
/* ═══════════════════════════════════════════════════════════
7. SHADOWS - සෙවනැලි
═══════════════════════════════════════════════════════════ */
--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
--shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
--shadow-md: 0 10px 40px rgba(0, 0, 0, 0.2);
--shadow-lg: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
--shadow-xl: 0 35px 60px -15px rgba(0, 0, 0, 0.6);
--shadow-2xl: 0 50px 100px -20px rgba(0, 0, 0, 0.7);
--shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.1);
/* Colored Shadows */
--shadow-primary: 0 10px 40px rgba(126, 97, 255, 0.3);
--shadow-secondary: 0 10px 40px rgba(255, 46, 166, 0.3);
--shadow-accent: 0 10px 40px rgba(0, 242, 255, 0.3);
/* ═══════════════════════════════════════════════════════════
8. BORDER RADIUS - දාරවල වටකුරු බව
═══════════════════════════════════════════════════════════ */
--radius-none: 0;
--radius-xs: 4px;
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 16px;
--radius-xl: 20px;
--radius-2xl: 28px;
--radius-3xl: 36px;
--radius-full: 9999px;
/* ═══════════════════════════════════════════════════════════
9. SPACING SCALE - පරතරය පරිමාණ
═══════════════════════════════════════════════════════════ */
--spacing-0: 0;
--spacing-1: 0.25rem; /* 4px */
--spacing-2: 0.5rem; /* 8px */
--spacing-3: 0.75rem; /* 12px */
--spacing-4: 1rem; /* 16px */
--spacing-5: 1.25rem; /* 20px */
--spacing-6: 1.5rem; /* 24px */
--spacing-7: 1.75rem; /* 28px */
--spacing-8: 2rem; /* 32px */
--spacing-10: 2.5rem; /* 40px */
--spacing-12: 3rem; /* 48px */
--spacing-16: 4rem; /* 64px */
--spacing-20: 5rem; /* 80px */
--spacing-24: 6rem; /* 96px */
--spacing-32: 8rem; /* 128px */
/* ═══════════════════════════════════════════════════════════
10. TRANSITIONS & ANIMATIONS - කාල පරාසයන්
═══════════════════════════════════════════════════════════ */
/* Duration */
--duration-instant: 0s;
--duration-fast: 0.15s;
--duration-normal: 0.3s;
--duration-slow: 0.5s;
--duration-slower: 0.75s;
--duration-slowest: 1s;
/* Legacy Support */
--speed-fast: var(--duration-fast);
--speed-normal: var(--duration-normal);
--speed-slow: var(--duration-slow);
/* Easing Functions */
--ease-linear: linear;
--ease-in: cubic-bezier(0.4, 0, 1, 1);
--ease-out: cubic-bezier(0, 0, 0.2, 1);
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
--ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
--ease-out-expo: cubic-bezier(0.16, 1, 0.30, 1);
--ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
--ease-elastic: cubic-bezier(0.68, -0.6, 0.32, 1.6);
/* ═══════════════════════════════════════════════════════════
11. Z-INDEX SCALE - ස්ථර අනුක්රමය
═══════════════════════════════════════════════════════════ */
--z-index-base: 0;
--z-index-background: -1;
--z-index-dropdown: 1000;
--z-index-sticky: 1020;
--z-index-fixed: 1030;
--z-index-modal-backdrop: 1040;
--z-index-modal: 1050;
--z-index-popover: 1060;
--z-index-tooltip: 1070;
--z-index-notification: 1080;
--z-index-top: 9999;
/* ═══════════════════════════════════════════════════════════
12. LAYOUT & SPACING - පිරිසැලසුම්
═══════════════════════════════════════════════════════════ */
/* Sidebar */
--sidebar-w: 280px;
--sidebar-w-expanded: 320px;
--sidebar-w-collapsed: 72px;
/* Navigation */
--topnav-h: 68px;
--bottomnav-h: 64px;
/* Container Widths */
--container-xs: 480px;
--container-sm: 640px;
--container-md: 768px;
--container-lg: 1024px;
--container-xl: 1280px;
--container-2xl: 1536px;
/* Padding & Margins */
--container-padding: clamp(1rem, 5vw, 3rem);
--section-padding: clamp(2rem, 8vw, 6rem);
--card-padding: clamp(1rem, 3vw, 1.5rem);
--modal-padding: 1.8rem;
/* Gaps */
--gap-xs: 0.5rem;
--gap-sm: 0.75rem;
--gap-md: 1rem;
--gap-lg: 1.5rem;
--gap-xl: 2rem;
--gap-2xl: 3rem;
/* ═══════════════════════════════════════════════════════════
13. GRADIENTS - අනුක්රම වර්ණ මිශ්රණ
═══════════════════════════════════════════════════════════ */
--gradient-primary: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
--gradient-secondary: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-light) 100%);
--gradient-accent: linear-gradient(135deg, var(--accent) 0%, var(--neon-cyan) 100%);
--gradient-sunset: linear-gradient(135deg, #ff6b6b 0%, #ff8e53 50%, #ffd93d 100%);
--gradient-ocean: linear-gradient(135deg, #00f2ff 0%, #3b82f6 50%, #8b5cf6 100%);
--gradient-cyberpunk: linear-gradient(135deg, var(--neon-purple) 0%, var(--neon-pink) 50%, var(--neon-cyan) 100%);
--gradient-dark: linear-gradient(180deg, var(--bg-dark) 0%, var(--bg-void) 100%);
--gradient-glass: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
/* ═══════════════════════════════════════════════════════════
14. OPACITY SCALE - පාරදෘශ්යතා පරිමාණ
═══════════════════════════════════════════════════════════ */
--opacity-0: 0;
--opacity-5: 0.05;
--opacity-10: 0.1;
--opacity-20: 0.2;
--opacity-30: 0.3;
--opacity-40: 0.4;
--opacity-50: 0.5;
--opacity-60: 0.6;
--opacity-70: 0.7;
--opacity-80: 0.8;
--opacity-90: 0.9;
--opacity-100: 1;
/* ═══════════════════════════════════════════════════════════
15. BREAKPOINTS - ප්රතිචාර ලක්ෂ්ය
═══════════════════════════════════════════════════════════ */
--breakpoint-xs: 480px;
--breakpoint-sm: 640px;
--breakpoint-md: 768px;
--breakpoint-lg: 1024px;
--breakpoint-xl: 1280px;
--breakpoint-2xl: 1536px;
/* ═══════════════════════════════════════════════════════════
16. EFFECTS & FILTERS - බලපෑම් සහ පෙරහන්
═══════════════════════════════════════════════════════════ */
/* Blur */
--blur-none: 0;
--blur-sm: 4px;
--blur-md: 8px;
--blur-lg: 16px;
--blur-xl: 24px;
--blur-2xl: 40px;
/* Backdrop Filters */
--backdrop-blur-sm: blur(4px);
--backdrop-blur-md: blur(12px);
--backdrop-blur-lg: blur(20px);
--backdrop-blur-xl: blur(30px);
/* Brightness */
--brightness-dim: 0.8;
--brightness-normal: 1;
--brightness-bright: 1.2;
--brightness-brighter: 1.5;
/* Saturation */
--saturate-low: 0.5;
--saturate-normal: 1;
--saturate-high: 1.5;
--saturate-higher: 2;
/* ═══════════════════════════════════════════════════════════
17. SCROLLBAR STYLING - අනුචලන තීරු මෝස්තර
═══════════════════════════════════════════════════════════ */
--scrollbar-width: 8px;
--scrollbar-track: var(--bg-card);
--scrollbar-thumb: rgba(126, 97, 255, 0.4);
--scrollbar-thumb-hover: rgba(126, 97, 255, 0.6);
/* ═══════════════════════════════════════════════════════════
18. FOCUS & INTERACTION STATES - නාභිගත සහ අන්තර්ක්රියා තත්වයන්
═══════════════════════════════════════════════════════════ */
--focus-ring: 0 0 0 3px rgba(126, 97, 255, 0.3);
--focus-ring-danger: 0 0 0 3px rgba(239, 68, 68, 0.3);
--focus-ring-success: 0 0 0 3px rgba(16, 185, 129, 0.3);
--focus-offset: 2px;
/* Hover Transformations */
--hover-scale: 1.05;
--hover-scale-sm: 1.02;
--hover-scale-lg: 1.1;
/* Active States */
--active-scale: 0.95;
}
:root,
[data-bs-theme=light] {
--bs-blue: #0d6efd;
--bs-indigo: #6610f2;
--bs-purple: #6f42c1;
--bs-pink: #d63384;
--bs-red: #dc3545;
--bs-orange: #fd7e14;
--bs-yellow: #ffc107;
--bs-green: #198754;
--bs-teal: #20c997;
--bs-cyan: #0dcaf0;
--bs-black: #000;
--bs-white: #fff;
--bs-gray: #6c757d;
--bs-gray-dark: #343a40;
--bs-gray-100: #f8f9fa;
--bs-gray-200: #e9ecef;
--bs-gray-300: #dee2e6;
--bs-gray-400: #ced4da;
--bs-gray-500: #adb5bd;
--bs-gray-600: #6c757d;
--bs-gray-700: #495057;
--bs-gray-800: #343a40;
--bs-gray-900: #212529;
--bs-primary: #0d6efd;
--bs-secondary: #6c757d;
--bs-success: #198754;
--bs-info: #0dcaf0;
--bs-warning: #ffc107;
--bs-danger: #dc3545;
--bs-light: #f8f9fa;
--bs-dark: #212529;
--bs-primary-rgb: 13, 110, 253;
--bs-secondary-rgb: 108, 117, 125;
--bs-success-rgb: 25, 135, 84;
--bs-info-rgb: 13, 202, 240;
--bs-warning-rgb: 255, 193, 7;
--bs-danger-rgb: 220, 53, 69;
--bs-light-rgb: 248, 249, 250;
--bs-dark-rgb: 33, 37, 41;
--bs-primary-text-emphasis: #052c65;
--bs-secondary-text-emphasis: #2b2f32;
--bs-success-text-emphasis: #0a3622;
--bs-info-text-emphasis: #055160;
--bs-warning-text-emphasis: #664d03;
--bs-danger-text-emphasis: #58151c;
--bs-light-text-emphasis: #495057;
--bs-dark-text-emphasis: #495057;
--bs-primary-bg-subtle: #cfe2ff;
--bs-secondary-bg-subtle: #e2e3e5;
--bs-success-bg-subtle: #d1e7dd;
--bs-info-bg-subtle: #cff4fc;
--bs-warning-bg-subtle: #fff3cd;
--bs-danger-bg-subtle: #f8d7da;
--bs-light-bg-subtle: #fcfcfd;
--bs-dark-bg-subtle: #ced4da;
--bs-primary-border-subtle: #9ec5fe;
--bs-secondary-border-subtle: #c4c8cb;
--bs-success-border-subtle: #a3cfbb;
--bs-info-border-subtle: #9eeaf9;
--bs-warning-border-subtle: #ffe69c;
--bs-danger-border-subtle: #f1aeb5;
--bs-light-border-subtle: #e9ecef;
--bs-dark-border-subtle: #adb5bd;
--bs-white-rgb: 255, 255, 255;
--bs-black-rgb: 0, 0, 0;
--bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
--bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
--bs-body-font-family: var(--bs-font-sans-serif);
--bs-body-font-size: 1rem;
--bs-body-font-weight: 400;
--bs-body-line-height: 1.5;
--bs-body-color: #212529;
--bs-body-color-rgb: 33, 37, 41;
--bs-body-bg: #fff;
--bs-body-bg-rgb: 255, 255, 255;
--bs-emphasis-color: #000;
--bs-emphasis-color-rgb: 0, 0, 0;
--bs-secondary-color: rgba(33, 37, 41, 0.75);
--bs-secondary-color-rgb: 33, 37, 41;
--bs-secondary-bg: #e9ecef;
--bs-secondary-bg-rgb: 233, 236, 239;
--bs-tertiary-color: rgba(33, 37, 41, 0.5);
--bs-tertiary-color-rgb: 33, 37, 41;
--bs-tertiary-bg: #f8f9fa;
--bs-tertiary-bg-rgb: 248, 249, 250;
--bs-heading-color: inherit;
--bs-link-color: #0d6efd;
--bs-link-color-rgb: 13, 110, 253;
--bs-link-decoration: underline;
--bs-link-hover-color: #0a58ca;
--bs-link-hover-color-rgb: 10, 88, 202;
--bs-code-color: #d63384;
--bs-highlight-color: #212529;
--bs-highlight-bg: #fff3cd;
--bs-border-width: 1px;
--bs-border-style: solid;
--bs-border-color: #dee2e6;
--bs-border-color-translucent: rgba(0, 0, 0, 0.175);
--bs-border-radius: 0.375rem;
--bs-border-radius-sm: 0.25rem;
--bs-border-radius-lg: 0.5rem;
--bs-border-radius-xl: 1rem;
--bs-border-radius-xxl: 2rem;
--bs-border-radius-2xl: var(--bs-border-radius-xxl);
--bs-border-radius-pill: 50rem;
--bs-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
--bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
--bs-box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
--bs-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075);
--bs-focus-ring-width: 0.25rem;
--bs-focus-ring-opacity: 0.25;
--bs-focus-ring-color: rgba(13, 110, 253, 0.25);
--bs-form-valid-color: #198754;
--bs-form-valid-border-color: #198754;
--bs-form-invalid-color: #dc3545;
--bs-form-invalid-border-color: #dc3545;
}
[data-bs-theme=dark] {
color-scheme: dark;
--bs-body-color: #dee2e6;
--bs-body-color-rgb: 222, 226, 230;
--bs-body-bg: #212529;
--bs-body-bg-rgb: 33, 37, 41;
--bs-emphasis-color: #fff;
--bs-emphasis-color-rgb: 255, 255, 255;
--bs-secondary-color: rgba(222, 226, 230, 0.75);
--bs-secondary-color-rgb: 222, 226, 230;
--bs-secondary-bg: #343a40;
--bs-secondary-bg-rgb: 52, 58, 64;
--bs-tertiary-color: rgba(222, 226, 230, 0.5);
--bs-tertiary-color-rgb: 222, 226, 230;
--bs-tertiary-bg: #2b3035;
--bs-tertiary-bg-rgb: 43, 48, 53;
--bs-primary-text-emphasis: #6ea8fe;
--bs-secondary-text-emphasis: #a7acb1;
--bs-success-text-emphasis: #75b798;
--bs-info-text-emphasis: #6edff6;
--bs-warning-text-emphasis: #ffda6a;
--bs-danger-text-emphasis: #ea868f;
--bs-light-text-emphasis: #f8f9fa;
--bs-dark-text-emphasis: #dee2e6;
--bs-primary-bg-subtle: #031633;
--bs-secondary-bg-subtle: #161719;
--bs-success-bg-subtle: #051b11;
--bs-info-bg-subtle: #032830;
--bs-warning-bg-subtle: #332701;
--bs-danger-bg-subtle: #2c0b0e;
--bs-light-bg-subtle: #343a40;
--bs-dark-bg-subtle: #1a1d20;
--bs-primary-border-subtle: #084298;
--bs-secondary-border-subtle: #41464b;
--bs-success-border-subtle: #0f5132;
--bs-info-border-subtle: #087990;
--bs-warning-border-subtle: #997404;
--bs-danger-border-subtle: #842029;
--bs-light-border-subtle: #495057;
--bs-dark-border-subtle: #343a40;
--bs-heading-color: inherit;
--bs-link-color: #6ea8fe;
--bs-link-hover-color: #8bb9fe;
--bs-link-color-rgb: 110, 168, 254;
--bs-link-hover-color-rgb: 139, 185, 254;
--bs-code-color: #e685b5;
--bs-highlight-color: #dee2e6;
--bs-highlight-bg: #664d03;
--bs-border-color: #495057;
--bs-border-color-translucent: rgba(255, 255, 255, 0.15);
--bs-form-valid-color: #75b798;
--bs-form-valid-border-color: #75b798;
--bs-form-invalid-color: #ea868f;
--bs-form-invalid-border-color: #ea868f;
}
/* --- Particle Canvas (Background) --- */
#particle-canvas {
position: absolute; top: 0; left: 0; width: 100%; height: 100%;
z-index: var(--z-index-background);
}
/* ==========================================
9. Custom Context Right-Click Menu
(async function masterLoader() {
let rootDoc;
try {
const res = await fetch('../src/root/root.html');
if (!res.ok) throw new Error(`HTTP ${res.status} fetching root.html`);
rootDoc = new DOMParser().parseFromString(await res.text(), 'text/html');
} catch (err) {
console.error('❌ [Master Loader] Failed to fetch root.html:', err);
return;
}
function inject(selector, slotId, appendToBody = false) {
const el = rootDoc.querySelector(selector);
const slot = document.getElementById(slotId);
if (!el) { console.warn(`[Master Loader] "${selector}" not found in root.html`); return false; }
if (appendToBody) {
document.body.appendChild(el);
} else {
if (!slot) { console.warn(`[Master Loader] Slot "#${slotId}" not found`); return false; }
slot.appendChild(el);
}
return true;
}
inject('#custom-menu', 'slot-menu'); // Right-click context menu
inject('#user-profile-container', 'slot-profile'); // Navbar profile dropdown
inject('#custom-signout-modal', null, true); // Sign-out confirm modal
inject('#settings-modal', null, true); // Full settings modal
console.log('✅ [Master Loader] root.html components injected');
// Load root scripts sequentially AFTER injection
const rootScripts = [
{ src: '../src/root/menu.js', type: 'text/javascript' },
{ src: '../src/root/setting.js', type: 'text/javascript' },
{ src: '../src/root/profile.js', type: 'module' },
];
for (const { src, type } of rootScripts) {
try {
await new Promise((resolve, reject) => {
const script = document.createElement('script');
script.src = src;
script.type = type;
script.onload = resolve;
script.onerror = () => reject(new Error(`Failed: ${src}`));
document.body.appendChild(script);
});
console.log(`✅ [Master Loader] Loaded: ${src}`);
} catch (err) {
console.error('❌ [Master Loader]', err);
}
}
console.log('🚀 [Master Loader] All root scripts loaded. System online.');
})();
========================================== */
/* Updated menu.css */
/* ═══════════════════════════════════════════════════════════════
3. UTILITY ELEMENTS
═══════════════════════════════════════════════════════════════ */
/* Particle Canvas */
#particle-canvas {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
z-index: var(--z-index-background);
}
/* ═══════════════════════════════════════════════════════════════
4. CUSTOM RIGHT-CLICK CONTEXT MENU
═══════════════════════════════════════════════════════════════ */
.custom-context-menu {
display: none; /* Shown programmatically via menu.js */
position: fixed;
background: rgba(15, 23, 42, 0.92);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border: 1px solid var(--border-strong);
border-radius: 16px;
width: 240px;
box-shadow: var(--shadow-lg);
z-index: var(--z-index-top);
padding: 8px;
color: var(--text-primary);
font-family: var(--font-primary);
}
.menu-label {
font-size: 10px;
text-transform: uppercase;
letter-spacing: var(--letter-spacing-widest);
color: var(--text-tertiary);
padding: 8px 14px 4px;
font-weight: var(--font-weight-bold);
}
.custom-context-menu li {
list-style: none;
padding: 10px 14px;
cursor: pointer;
display: flex;
align-items: center;
gap: 12px;
border-radius: var(--radius-sm);
transition: background var(--duration-fast) var(--ease-out),
transform var(--duration-fast) var(--ease-out);
}
.custom-context-menu li i {
width: 16px;
color: var(--primary);
}
.custom-context-menu li:hover {
background: rgba(255, 255, 255, 0.1);
transform: translateX(4px);
}
.ai-action { color: #a855f7; }
.ai-action:hover {
background: #a855f7 !important;
color: var(--white) !important;
}
.badge {
margin-left: auto;
font-size: 9px;
background: rgba(147, 51, 234, 0.2);
padding: 2px 6px;
border-radius: 4px;
}
/* Animated status dot (used in context menu footer) */
.dot {
display: inline-block;
height: 8px;
width: 8px;
background-color: #22c55e;
border-radius: 50%;
box-shadow: 0 0 8px #22c55e;
}
/* ═══════════════════════════════════════════════════════════════
5. PROFILE DROPDOWN MENU
═══════════════════════════════════════════════════════════════ */
/* Profile Menu Container Styling */
#profile-menu {
transform-origin: top right;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
background: linear-gradient(135deg, rgba(15, 15, 15, 0.9), rgba(5, 5, 5, 0.95));
}
#profile-menu::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(rgba(255, 215, 0, 0.03) 1px, transparent 1px);
background-size: 100% 3px;
pointer-events: none;
border-radius: inherit;
opacity: 0.3;
}
/* Profile Menu Items Animations */
.profile-menu-item:hover {
background: rgba(255, 215, 0, 0.08);
color: var(--brand-yellow);
/* Make sure --brand-yellow is defined if needed elsewhere */
box-shadow: inset 0 0 15px rgba(255, 215, 0, 0.05);
}
.profile-menu-item i {
transition: transform 0.3s ease;
}
.profile-menu-item:hover i {
transform: scale(1.2) rotate(-5deg);
color: #FFD700 !important;
}
/* Status Indicator Dot */
.status-dot {
position: absolute;
bottom: 2px;
right: 2px;
width: 10px;
height: 10px;
background: #10b981;
border: 2px solid #080808;
border-radius: 50%;
animation: statusPulse 2s infinite;
}
@keyframes statusPulse {
0% {
box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
}
70% {
box-shadow: 0 0 0 10px rgba(16, 185, 129, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
}
}