| :root { |
| --bg-primary: #0f172a; |
| --bg-surface: #111c33; |
| --bg-surface-2: #16243f; |
| --bg-surface-3: #1b2b49; |
| --border: rgba(148, 163, 184, 0.14); |
| --border-strong: rgba(148, 163, 184, 0.28); |
|
|
| --text-primary: #e5eefb; |
| --text-secondary: rgba(226, 232, 240, 0.82); |
| --text-muted: rgba(148, 163, 184, 0.75); |
| --text-inverse: #ffffff; |
|
|
| --accent: #6366f1; |
| --accent-hover: #4f46e5; |
| --accent-light: rgba(99, 102, 241, 0.16); |
| --accent-glow: rgba(99, 102, 241, 0.26); |
|
|
| --authentic: #22c55e; |
| --authentic-bg: rgba(34, 197, 94, 0.12); |
| --authentic-glow: rgba(34, 197, 94, 0.24); |
|
|
| --ai-generated: #f43f5e; |
| --ai-generated-bg: rgba(244, 63, 94, 0.12); |
| --ai-generated-glow: rgba(244, 63, 94, 0.24); |
|
|
| --suspect: #f59e0b; |
| --suspect-bg: rgba(245, 158, 11, 0.14); |
| --suspect-glow: rgba(245, 158, 11, 0.24); |
|
|
| --nav-bg: rgba(8, 17, 31, 0.72); |
| --nav-border: rgba(148, 163, 184, 0.12); |
| --nav-link: rgba(226, 232, 240, 0.72); |
| --nav-link-hover-bg: rgba(99, 102, 241, 0.14); |
| --theme-toggle-bg: rgba(99, 102, 241, 0.12); |
| --theme-toggle-border: rgba(148, 163, 184, 0.12); |
|
|
| --hero-bg: linear-gradient(180deg, #08111f 0%, #0f172a 45%, #0b1324 100%); |
| --hero-accent-1: rgba(99, 102, 241, 0.22); |
| --hero-accent-2: rgba(56, 189, 248, 0.12); |
| --mesh-line: rgba(148, 163, 184, 0.08); |
| --badge-bg: rgba(99, 102, 241, 0.12); |
| --badge-border: rgba(129, 140, 248, 0.3); |
| --badge-text: #c7d2fe; |
| --badge-bg-strong-1: rgba(99, 102, 241, 0.22); |
| --badge-bg-strong-2: rgba(56, 189, 248, 0.2); |
| --heading-strong: #f8fafc; |
| --body-soft: rgba(226, 232, 240, 0.72); |
| --surface-card: rgba(15, 23, 42, 0.64); |
| --surface-soft: rgba(15, 23, 42, 0.45); |
| --surface-border: rgba(148, 163, 184, 0.14); |
| --surface-border-strong: rgba(148, 163, 184, 0.22); |
| --logo-grad-1: rgba(99, 102, 241, 0.25); |
| --logo-grad-2: rgba(129, 140, 248, 0.55); |
| --stat-label: rgba(191, 219, 254, 0.72); |
| --diagram-line-1: rgba(99, 102, 241, 0.65); |
| --diagram-line-2: rgba(56, 189, 248, 0.05); |
|
|
| --font-sans: 'Inter', system-ui, -apple-system, sans-serif; |
| --font-mono: 'JetBrains Mono', 'Fira Code', monospace; |
|
|
| --radius-sm: 8px; |
| --radius-md: 12px; |
| --radius-lg: 18px; |
| --radius-xl: 28px; |
|
|
| --shadow-sm: 0 1px 3px rgba(2, 6, 23, 0.18), 0 1px 2px rgba(2, 6, 23, 0.14); |
| --shadow-md: 0 12px 30px rgba(2, 6, 23, 0.24), 0 4px 12px rgba(2, 6, 23, 0.18); |
| --shadow-lg: 0 24px 80px rgba(2, 6, 23, 0.38), 0 8px 20px rgba(2, 6, 23, 0.26); |
| } |
|
|
| :root[data-theme='light'] { |
| --bg-primary: #f8fafc; |
| --bg-surface: #ffffff; |
| --bg-surface-2: #eef2ff; |
| --bg-surface-3: #e2e8f0; |
| --border: rgba(15, 23, 42, 0.09); |
| --border-strong: rgba(15, 23, 42, 0.18); |
|
|
| --text-primary: #0f172a; |
| --text-secondary: rgba(15, 23, 42, 0.82); |
| --text-muted: rgba(51, 65, 85, 0.7); |
| --text-inverse: #ffffff; |
|
|
| --accent: #4f46e5; |
| --accent-hover: #4338ca; |
| --accent-light: rgba(79, 70, 229, 0.1); |
| --accent-glow: rgba(79, 70, 229, 0.18); |
|
|
| --authentic: #16a34a; |
| --authentic-bg: rgba(22, 163, 74, 0.12); |
| --authentic-glow: rgba(22, 163, 74, 0.18); |
|
|
| --ai-generated: #e11d48; |
| --ai-generated-bg: rgba(225, 29, 72, 0.12); |
| --ai-generated-glow: rgba(225, 29, 72, 0.18); |
|
|
| --suspect: #d97706; |
| --suspect-bg: rgba(217, 119, 6, 0.12); |
| --suspect-glow: rgba(217, 119, 6, 0.18); |
|
|
| --nav-bg: rgba(255, 255, 255, 0.82); |
| --nav-border: rgba(15, 23, 42, 0.08); |
| --nav-link: rgba(15, 23, 42, 0.72); |
| --nav-link-hover-bg: rgba(79, 70, 229, 0.08); |
| --theme-toggle-bg: rgba(79, 70, 229, 0.08); |
| --theme-toggle-border: rgba(15, 23, 42, 0.08); |
|
|
| --hero-bg: linear-gradient(180deg, #f8fafc 0%, #eef2ff 46%, #e2e8f0 100%); |
| --hero-accent-1: rgba(79, 70, 229, 0.14); |
| --hero-accent-2: rgba(14, 165, 233, 0.08); |
| --mesh-line: rgba(71, 85, 105, 0.09); |
| --badge-bg: rgba(79, 70, 229, 0.1); |
| --badge-border: rgba(79, 70, 229, 0.18); |
| --badge-text: #4338ca; |
| --badge-bg-strong-1: rgba(79, 70, 229, 0.12); |
| --badge-bg-strong-2: rgba(14, 165, 233, 0.1); |
| --heading-strong: #0f172a; |
| --body-soft: rgba(15, 23, 42, 0.72); |
| --surface-card: rgba(255, 255, 255, 0.82); |
| --surface-soft: rgba(255, 255, 255, 0.72); |
| --surface-border: rgba(15, 23, 42, 0.08); |
| --surface-border-strong: rgba(15, 23, 42, 0.14); |
| --logo-grad-1: rgba(79, 70, 229, 0.18); |
| --logo-grad-2: rgba(14, 165, 233, 0.18); |
| --stat-label: rgba(67, 56, 202, 0.78); |
| --diagram-line-1: rgba(79, 70, 229, 0.5); |
| --diagram-line-2: rgba(14, 165, 233, 0.08); |
|
|
| --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04); |
| --shadow-md: 0 10px 28px rgba(15, 23, 42, 0.1), 0 4px 10px rgba(15, 23, 42, 0.05); |
| --shadow-lg: 0 24px 80px rgba(15, 23, 42, 0.14), 0 10px 24px rgba(15, 23, 42, 0.08); |
| } |
|
|
| *, *::before, *::after { |
| box-sizing: border-box; |
| margin: 0; |
| padding: 0; |
| } |
|
|
| html { |
| font-size: 16px; |
| scroll-behavior: smooth; |
| -webkit-font-smoothing: antialiased; |
| -moz-osx-font-smoothing: grayscale; |
| } |
|
|
| body { |
| font-family: var(--font-sans); |
| background-color: var(--bg-primary); |
| color: var(--text-primary); |
| line-height: 1.6; |
| min-height: 100vh; |
| transition: background-color 0.25s ease, color 0.25s ease; |
| } |
|
|
| body::before { |
| content: ''; |
| position: fixed; |
| inset: 0; |
| pointer-events: none; |
| background: radial-gradient(circle at top, var(--accent-light), transparent 26%); |
| } |
|
|
| #root { |
| min-height: 100vh; |
| display: flex; |
| flex-direction: column; |
| width: 100%; |
| } |
|
|
| img, video { |
| max-width: 100%; |
| display: block; |
| } |
|
|
| button, input, a, section, article, nav, div { |
| transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease; |
| } |
|
|
| ::-webkit-scrollbar { width: 6px; height: 6px; } |
| ::-webkit-scrollbar-track { background: transparent; } |
| ::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, 0.35); border-radius: 99px; } |
| ::-webkit-scrollbar-thumb:hover { background: rgba(148, 163, 184, 0.55); } |
|
|
| ::selection { background: var(--accent-light); color: var(--text-primary); } |
|
|
| :focus-visible { |
| outline: 2px solid var(--accent); |
| outline-offset: 2px; |
| border-radius: 6px; |
| } |
|
|
