@import "tailwindcss"; @import "tw-animate-css"; @import "shadcn/tailwind.css"; @custom-variant dark (&:is(.dark *)); @theme { --color-g-base: #050510; --color-g-surface: #0a0f1e; --color-g-panel: #0f1629; --color-g-raised: #141c35; --color-g-border: #1a2444; --color-g-line: #1f2f55; --color-g-text: #f0f4ff; --color-g-muted: #8896b8; --color-g-faint: #3d4f78; --color-g-green: #00e87b; --color-g-green2: #00c966; --color-g-emerald: #10b981; --color-g-cyan: #06b6d4; --color-g-amber: #fbbf24; --color-g-red: #f43f5e; --color-g-blue: #3b82f6; --color-g-purple: #a78bfa; --color-g-pink: #ec4899; --font-sans: var(--font-jakarta), system-ui, -apple-system, sans-serif; --font-mono: var(--font-jetbrains), ui-monospace, 'Fira Code', monospace; } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { background: var(--color-g-base, #050510); color: var(--color-g-text, #f0f4ff); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; transition: background 0.3s ease, color 0.3s ease; } ::selection { background: rgba(0, 232, 123, 0.15); color: #f0f4ff; } ::-webkit-scrollbar { width: 5px; height: 5px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: #1a2444; border-radius: 99px; } ::-webkit-scrollbar-thumb:hover { background: #1f2f55; } *:focus-visible { outline: 2px solid rgba(0, 232, 123, 0.4); outline-offset: 2px; } /* ── Ambient gradient keyframes ────────────────────────────── */ @keyframes float-orb { 0%, 100% { transform: translate(0, 0) scale(1); } 25% { transform: translate(30px, -50px) scale(1.1); } 50% { transform: translate(-20px, 20px) scale(0.95); } 75% { transform: translate(50px, 30px) scale(1.05); } } @keyframes glow-pulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } } @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } @keyframes gradient-flow { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @keyframes fade-in-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } @keyframes pulse-ring { 0% { box-shadow: 0 0 0 0 rgba(0, 232, 123, 0.4); } 70% { box-shadow: 0 0 0 6px rgba(0, 232, 123, 0); } 100% { box-shadow: 0 0 0 0 rgba(0, 232, 123, 0); } } @keyframes border-glow { 0%, 100% { border-color: rgba(0, 232, 123, 0.15); } 50% { border-color: rgba(0, 232, 123, 0.35); } } @keyframes count-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @keyframes slide-in-right { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @layer components { /* ── Glass ───────────────────────────────────────────────── */ .glass { background: rgba(10, 15, 30, 0.7); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border: 1px solid rgba(255, 255, 255, 0.04); } .glass-strong { background: rgba(15, 22, 41, 0.85); backdrop-filter: blur(40px) saturate(200%); -webkit-backdrop-filter: blur(40px) saturate(200%); border: 1px solid rgba(255, 255, 255, 0.06); } /* ── Cards ───────────────────────────────────────────────── */ .g-card { position: relative; background: linear-gradient(135deg, rgba(15, 22, 41, 0.8) 0%, rgba(10, 15, 30, 0.9) 100%); border: 1px solid rgba(26, 36, 68, 0.6); border-radius: 16px; overflow: hidden; transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s; } .g-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,0.03) 0%, transparent 50%); pointer-events: none; border-radius: inherit; } .g-card:hover { border-color: rgba(0, 232, 123, 0.15); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(0, 232, 123, 0.05); transform: translateY(-1px); } .g-card-glow { position: relative; background: linear-gradient(135deg, rgba(15, 22, 41, 0.8) 0%, rgba(10, 15, 30, 0.9) 100%); border: 1px solid rgba(0, 232, 123, 0.12); border-radius: 16px; overflow: hidden; transition: all 0.3s; animation: border-glow 4s ease-in-out infinite; } .g-card-glow::before { content: ''; position: absolute; inset: -1px; background: linear-gradient(135deg, rgba(0,232,123,0.1) 0%, transparent 40%, rgba(6,182,212,0.05) 100%); border-radius: inherit; pointer-events: none; z-index: 0; } .g-card-glow:hover { border-color: rgba(0, 232, 123, 0.25); box-shadow: 0 0 30px rgba(0, 232, 123, 0.08), 0 8px 32px rgba(0, 0, 0, 0.4); transform: translateY(-2px); } /* ── Inputs ──────────────────────────────────────────────── */ .g-input { background: rgba(10, 15, 30, 0.6); border: 1px solid rgba(26, 36, 68, 0.8); border-radius: 10px; color: #f0f4ff; font-size: 0.875rem; padding: 0.5rem 0.875rem; transition: all 0.2s ease; outline: none; width: 100%; } .g-input::placeholder { color: #3d4f78; } .g-input:focus { border-color: rgba(0, 232, 123, 0.4); box-shadow: 0 0 0 3px rgba(0, 232, 123, 0.08), 0 0 20px rgba(0, 232, 123, 0.05); background: rgba(10, 15, 30, 0.8); } /* ── Buttons ─────────────────────────────────────────────── */ .g-btn { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.5rem 1rem; border-radius: 10px; font-size: 0.8125rem; font-weight: 500; letter-spacing: -0.01em; transition: all 0.2s ease; cursor: pointer; white-space: nowrap; border: 1px solid rgba(26, 36, 68, 0.8); background: rgba(15, 22, 41, 0.6); color: #8896b8; } .g-btn:hover { background: rgba(20, 28, 53, 0.9); border-color: rgba(31, 47, 85, 0.9); color: #f0f4ff; transform: translateY(-1px); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4); } .g-btn:active { transform: translateY(0); box-shadow: none; } .g-btn-primary { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.5rem 1rem; border-radius: 10px; font-size: 0.8125rem; font-weight: 600; letter-spacing: -0.01em; transition: all 0.2s ease; cursor: pointer; white-space: nowrap; border: 1px solid rgba(0, 232, 123, 0.3); background: linear-gradient(135deg, rgba(0, 232, 123, 0.15) 0%, rgba(6, 182, 212, 0.1) 100%); color: #00e87b; } .g-btn-primary:hover { background: linear-gradient(135deg, rgba(0, 232, 123, 0.25) 0%, rgba(6, 182, 212, 0.15) 100%); border-color: rgba(0, 232, 123, 0.5); box-shadow: 0 0 24px rgba(0, 232, 123, 0.15), 0 4px 16px rgba(0, 0, 0, 0.3); transform: translateY(-1px); } .g-btn-danger { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.5rem 1rem; border-radius: 10px; font-size: 0.8125rem; font-weight: 600; letter-spacing: -0.01em; transition: all 0.2s ease; cursor: pointer; white-space: nowrap; border: 1px solid rgba(244, 63, 94, 0.3); background: linear-gradient(135deg, rgba(244, 63, 94, 0.1) 0%, rgba(236, 72, 153, 0.05) 100%); color: #f43f5e; } .g-btn-danger:hover { background: linear-gradient(135deg, rgba(244, 63, 94, 0.2) 0%, rgba(236, 72, 153, 0.1) 100%); border-color: rgba(244, 63, 94, 0.5); box-shadow: 0 0 24px rgba(244, 63, 94, 0.12), 0 4px 16px rgba(0, 0, 0, 0.3); transform: translateY(-1px); } /* ── Table ───────────────────────────────────────────────── */ .g-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.875rem; } .g-table thead tr { background: rgba(20, 28, 53, 0.5); } .g-table thead th { padding: 0.75rem 1rem; text-align: left; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #3d4f78; border-bottom: 1px solid rgba(26, 36, 68, 0.6); } .g-table tbody tr { border-bottom: 1px solid rgba(26, 36, 68, 0.3); transition: all 0.15s ease; } .g-table tbody tr:last-child { border-bottom: none; } .g-table tbody tr:hover { background: linear-gradient(90deg, rgba(0, 232, 123, 0.03) 0%, rgba(6, 182, 212, 0.02) 100%); } .g-table tbody td { padding: 0.875rem 1rem; vertical-align: middle; } /* ── Badges ──────────────────────────────────────────────── */ .g-badge { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.1875rem 0.5625rem; border-radius: 99px; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.02em; } .g-badge-green { background: rgba(0,232,123,0.1); border: 1px solid rgba(0,232,123,0.2); color: #00e87b; } .g-badge-amber { background: rgba(251,191,36,0.1); border: 1px solid rgba(251,191,36,0.2); color: #fbbf24; } .g-badge-red { background: rgba(244,63,94,0.1); border: 1px solid rgba(244,63,94,0.2); color: #f43f5e; } .g-badge-blue { background: rgba(59,130,246,0.1); border: 1px solid rgba(59,130,246,0.2); color: #3b82f6; } .g-badge-purple { background: rgba(167,139,250,0.08); border: 1px solid rgba(167,139,250,0.15); color: #a78bfa; } .g-badge-neutral { background: rgba(136,150,184,0.06); border: 1px solid rgba(136,150,184,0.12); color: #8896b8; } /* ── Gradient text ───────────────────────────────────────── */ .gradient-text { background: linear-gradient(135deg, #f0f4ff 0%, #8896b8 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .gradient-accent { background: linear-gradient(135deg, #00e87b 0%, #06b6d4 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ── Stat ─────────────────────────────────────────────────── */ .g-stat-num { font-size: 2rem; font-weight: 800; letter-spacing: -0.05em; line-height: 1; font-variant-numeric: tabular-nums; animation: count-up 0.6s ease-out; } /* ── Divider ─────────────────────────────────────────────── */ .g-divider { height: 1px; background: linear-gradient(90deg, transparent, #1a2444 30%, #1a2444 70%, transparent); } /* ── Pulse dot ───────────────────────────────────────────── */ .g-pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: #00e87b; box-shadow: 0 0 8px rgba(0,232,123,0.6); animation: pulse-ring 2s ease-out infinite; } /* ── Page heading ────────────────────────────────────────── */ .g-page-title { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.04em; background: linear-gradient(135deg, #f0f4ff 0%, #8896b8 80%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .g-page-sub { font-size: 0.8125rem; color: #3d4f78; margin-top: 0.25rem; } /* ── Glow line ───────────────────────────────────────────── */ .glow-line { height: 1px; background: linear-gradient(90deg, transparent, rgba(0,232,123,0.4), rgba(6,182,212,0.3), transparent); } /* ── Shimmer effect ──────────────────────────────────────── */ .shimmer { background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.04) 50%, transparent 100%); background-size: 200% 100%; animation: shimmer 3s ease-in-out infinite; } /* ── Animated stagger ────────────────────────────────────── */ .animate-in { animation: fade-in-up 0.4s ease-out both; } /* ── Backward compat aliases ─────────────────────────────── */ .card-panel { position: relative; background: linear-gradient(135deg, rgba(15,22,41,0.8), rgba(10,15,30,0.9)); border: 1px solid rgba(26,36,68,0.6); border-radius: 16px; overflow: hidden; } .btn-ghost { display:inline-flex;align-items:center;gap:.375rem;padding:.5rem 1rem;border-radius:10px;font-size:.8125rem;font-weight:500;transition:all .2s;cursor:pointer;border:1px solid rgba(26,36,68,.8);background:rgba(15,22,41,.6);color:#8896b8; } .btn-ghost:hover { background:rgba(20,28,53,.9);border-color:rgba(31,47,85,.9);color:#f0f4ff;transform:translateY(-1px);box-shadow:0 4px 16px rgba(0,0,0,.4); } .btn-danger { display:inline-flex;align-items:center;gap:.375rem;padding:.5rem 1rem;border-radius:10px;font-size:.8125rem;font-weight:600;transition:all .2s;cursor:pointer;border:1px solid rgba(244,63,94,.3);background:linear-gradient(135deg,rgba(244,63,94,.1),rgba(236,72,153,.05));color:#f43f5e; } .btn-danger:hover { background:linear-gradient(135deg,rgba(244,63,94,.2),rgba(236,72,153,.1));border-color:rgba(244,63,94,.5);transform:translateY(-1px); } .page-title { font-size:1.5rem;font-weight:800;letter-spacing:-.04em;background:linear-gradient(135deg,#f0f4ff,#8896b8 80%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; } .page-subtitle { font-size:.8125rem;color:#3d4f78;margin-top:.25rem; } } :root { --background: oklch(1 0 0); --foreground: oklch(0.145 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0.145 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.145 0 0); --primary: oklch(0.205 0 0); --primary-foreground: oklch(0.985 0 0); --secondary: oklch(0.97 0 0); --secondary-foreground: oklch(0.205 0 0); --muted: oklch(0.97 0 0); --muted-foreground: oklch(0.556 0 0); --accent: oklch(0.97 0 0); --accent-foreground: oklch(0.205 0 0); --destructive: oklch(0.577 0.245 27.325); --border: oklch(0.922 0 0); --input: oklch(0.922 0 0); --ring: oklch(0.708 0 0); --chart-1: oklch(0.809 0.105 251.813); --chart-2: oklch(0.623 0.214 259.815); --chart-3: oklch(0.546 0.245 262.881); --chart-4: oklch(0.488 0.243 264.376); --chart-5: oklch(0.424 0.199 265.638); --radius: 0.625rem; --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.145 0 0); --sidebar-primary: oklch(0.205 0 0); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.97 0 0); --sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-border: oklch(0.922 0 0); --sidebar-ring: oklch(0.708 0 0); } .dark { --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.205 0 0); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.205 0 0); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.922 0 0); --primary-foreground: oklch(0.205 0 0); --secondary: oklch(0.269 0 0); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.269 0 0); --muted-foreground: oklch(0.708 0 0); --accent: oklch(0.269 0 0); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.704 0.191 22.216); --border: oklch(1 0 0 / 10%); --input: oklch(1 0 0 / 15%); --ring: oklch(0.556 0 0); --chart-1: oklch(0.809 0.105 251.813); --chart-2: oklch(0.623 0.214 259.815); --chart-3: oklch(0.546 0.245 262.881); --chart-4: oklch(0.488 0.243 264.376); --chart-5: oklch(0.424 0.199 265.638); --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.269 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(1 0 0 / 10%); --sidebar-ring: oklch(0.556 0 0); } @theme inline { --font-sans: var(--font-sans); --color-sidebar-ring: var(--sidebar-ring); --color-sidebar-border: var(--sidebar-border); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar: var(--sidebar); --color-chart-5: var(--chart-5); --color-chart-4: var(--chart-4); --color-chart-3: var(--chart-3); --color-chart-2: var(--chart-2); --color-chart-1: var(--chart-1); --color-ring: var(--ring); --color-input: var(--input); --color-border: var(--border); --color-destructive: var(--destructive); --color-accent-foreground: var(--accent-foreground); --color-accent: var(--accent); --color-muted-foreground: var(--muted-foreground); --color-muted: var(--muted); --color-secondary-foreground: var(--secondary-foreground); --color-secondary: var(--secondary); --color-primary-foreground: var(--primary-foreground); --color-primary: var(--primary); --color-popover-foreground: var(--popover-foreground); --color-popover: var(--popover); --color-card-foreground: var(--card-foreground); --color-card: var(--card); --color-foreground: var(--foreground); --color-background: var(--background); --radius-sm: calc(var(--radius) * 0.6); --radius-md: calc(var(--radius) * 0.8); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) * 1.4); --radius-2xl: calc(var(--radius) * 1.8); --radius-3xl: calc(var(--radius) * 2.2); --radius-4xl: calc(var(--radius) * 2.6); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } html { @apply font-sans; } } /* ═══════════════════════════════════════════════════════════════ LIGHT MODE — Vivid lavender-ivory palette Activated by: document.documentElement.setAttribute('data-theme','light') ═══════════════════════════════════════════════════════════════ */ [data-theme="light"] { --color-g-base: #faf8ff; --color-g-surface: #f0e8ff; --color-g-panel: #e5d8ff; --color-g-raised: #d8c8ff; --color-g-border: #c0aef0; --color-g-line: #a898e0; --color-g-text: #120e38; --color-g-muted: #4a4278; --color-g-faint: #9088c0; --color-g-green: #009a50; --color-g-green2: #007a3e; --color-g-emerald: #048555; --color-g-cyan: #0078a0; --color-g-amber: #b86e00; --color-g-red: #c4223e; --color-g-blue: #1a55c0; --color-g-purple: #5820c0; --color-g-pink: #b01870; } [data-theme="light"] body { background: #faf8ff; color: #120e38; } [data-theme="light"] ::selection { background: rgba(88, 32, 192, 0.12); color: #120e38; } [data-theme="light"] ::-webkit-scrollbar-thumb { background: #c0aef0; } [data-theme="light"] .glass { background: rgba(240, 232, 255, 0.75); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border: 1px solid rgba(192, 174, 240, 0.5); } [data-theme="light"] .glass-strong { background: rgba(229, 216, 255, 0.88); backdrop-filter: blur(40px) saturate(200%); -webkit-backdrop-filter: blur(40px) saturate(200%); border: 1px solid rgba(192, 174, 240, 0.6); } [data-theme="light"] .g-card { background: linear-gradient(135deg, rgba(240, 232, 255, 0.9) 0%, rgba(250, 248, 255, 0.95) 100%); border: 1px solid rgba(192, 174, 240, 0.5); } [data-theme="light"] .g-card::before { background: linear-gradient(135deg, rgba(255,255,255,0.5) 0%, transparent 50%); } [data-theme="light"] .g-card:hover { border-color: rgba(0, 154, 80, 0.3); box-shadow: 0 8px 32px rgba(88, 32, 192, 0.08), 0 0 0 1px rgba(0, 154, 80, 0.08); } [data-theme="light"] .g-card-glow { background: linear-gradient(135deg, rgba(240, 232, 255, 0.9) 0%, rgba(250, 248, 255, 0.95) 100%); border: 1px solid rgba(0, 154, 80, 0.2); animation: none; } [data-theme="light"] .g-card-glow::before { background: linear-gradient(135deg, rgba(0,154,80,0.05) 0%, transparent 40%, rgba(0,120,160,0.03) 100%); } [data-theme="light"] .g-card-glow:hover { border-color: rgba(0, 154, 80, 0.4); box-shadow: 0 0 30px rgba(0, 154, 80, 0.06), 0 8px 32px rgba(88, 32, 192, 0.08); } [data-theme="light"] .g-input { background: rgba(250, 248, 255, 0.8); border-color: rgba(192, 174, 240, 0.7); color: #120e38; } [data-theme="light"] .g-input::placeholder { color: #9088c0; } [data-theme="light"] .g-input:focus { border-color: rgba(0, 154, 80, 0.5); box-shadow: 0 0 0 3px rgba(0, 154, 80, 0.08); background: rgba(255, 255, 255, 0.9); } [data-theme="light"] .g-btn { background: rgba(240, 232, 255, 0.7); border-color: rgba(192, 174, 240, 0.7); color: #4a4278; } [data-theme="light"] .g-btn:hover { background: rgba(229, 216, 255, 0.9); border-color: rgba(168, 152, 224, 0.9); color: #120e38; } [data-theme="light"] .g-btn-primary { background: linear-gradient(135deg, rgba(0, 154, 80, 0.12) 0%, rgba(0, 120, 160, 0.08) 100%); border-color: rgba(0, 154, 80, 0.35); color: #007a3e; } [data-theme="light"] .g-btn-primary:hover { background: linear-gradient(135deg, rgba(0, 154, 80, 0.22) 0%, rgba(0, 120, 160, 0.12) 100%); border-color: rgba(0, 154, 80, 0.55); box-shadow: 0 0 24px rgba(0, 154, 80, 0.12), 0 4px 16px rgba(88, 32, 192, 0.08); } [data-theme="light"] .g-btn-danger { background: linear-gradient(135deg, rgba(196, 34, 62, 0.08) 0%, rgba(176, 24, 112, 0.04) 100%); border-color: rgba(196, 34, 62, 0.3); color: #c4223e; } [data-theme="light"] .g-table thead tr { background: rgba(216, 200, 255, 0.4); } [data-theme="light"] .g-table tbody tr:hover { background: linear-gradient(90deg, rgba(0, 154, 80, 0.03) 0%, rgba(0, 120, 160, 0.02) 100%); } [data-theme="light"] .g-badge-green { background: rgba(0,154,80,0.08); border-color: rgba(0,154,80,0.2); color: #007a3e; } [data-theme="light"] .g-badge-amber { background: rgba(184,110,0,0.08); border-color: rgba(184,110,0,0.2); color: #b86e00; } [data-theme="light"] .g-badge-red { background: rgba(196,34,62,0.08); border-color: rgba(196,34,62,0.2); color: #c4223e; } [data-theme="light"] .g-badge-blue { background: rgba(26,85,192,0.08); border-color: rgba(26,85,192,0.2); color: #1a55c0; } [data-theme="light"] .g-badge-purple { background: rgba(88,32,192,0.06); border-color: rgba(88,32,192,0.15); color: #5820c0; } [data-theme="light"] .g-badge-neutral { background: rgba(74,66,120,0.06); border-color: rgba(74,66,120,0.12); color: #4a4278; } [data-theme="light"] .gradient-text { background: linear-gradient(135deg, #120e38 0%, #4a4278 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } [data-theme="light"] .gradient-accent { background: linear-gradient(135deg, #009a50 0%, #0078a0 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } [data-theme="light"] .g-page-title { background: linear-gradient(135deg, #120e38 0%, #4a4278 80%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } [data-theme="light"] .g-divider { background: linear-gradient(90deg, transparent, #c0aef0 30%, #c0aef0 70%, transparent); } [data-theme="light"] .g-pulse-dot { background: #009a50; box-shadow: 0 0 8px rgba(0,154,80,0.5); } [data-theme="light"] .glow-line { background: linear-gradient(90deg, transparent, rgba(0,154,80,0.35), rgba(0,120,160,0.25), transparent); } [data-theme="light"] .shimmer { background: linear-gradient(90deg, transparent 0%, rgba(88,32,192,0.04) 50%, transparent 100%); background-size: 200% 100%; } [data-theme="light"] .g-stat-num { color: #120e38; } [data-theme="light"] .g-page-sub { color: #9088c0; }