Spaces:
Running
Running
| <html lang="fr" class="dark"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Orion IA - Enterprise Orchestrator</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet"> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet"> | |
| <script> | |
| tailwind.config = { | |
| darkMode: 'class', | |
| theme: { | |
| extend: { | |
| fontFamily: { | |
| sans: ['"Plus Jakarta Sans"', 'system-ui', 'sans-serif'], | |
| mono: ['"JetBrains Mono"', 'monospace'], | |
| }, | |
| colors: { | |
| slate: { | |
| 50: '#f8fafc', | |
| 100: '#f1f5f9', | |
| 200: '#e2e8f0', | |
| 300: '#cbd5e1', | |
| 400: '#94a3b8', | |
| 500: '#64748b', | |
| 600: '#475569', | |
| 700: '#334155', | |
| 800: '#1e293b', | |
| 900: '#0f172a', | |
| 950: '#020617', | |
| }, | |
| indigo: { | |
| 450: '#6366f1', | |
| 550: '#4f46e5', | |
| }, | |
| rose: { | |
| 450: '#f43f5e', | |
| 550: '#e11d48', | |
| }, | |
| emerald: { | |
| 450: '#10b981', | |
| 550: '#059669', | |
| }, | |
| amber: { | |
| 450: '#f59e0b', | |
| 550: '#d97706', | |
| }, | |
| sky: { | |
| 450: '#38bdf8', | |
| 550: '#0284c7', | |
| }, | |
| violet: { | |
| 450: '#8b5cf6', | |
| 550: '#7c3aed', | |
| }, | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| :root { | |
| --bg-deep: #03040a; | |
| --bg-base: #080a12; | |
| --bg-raised: #0c0e1a; | |
| --bg-surface: #111320; | |
| --bg-card: #151726; | |
| --bg-hover: #1a1d30; | |
| --bg-active: #1e2138; | |
| --text-primary: #f0f1f6; | |
| --text-secondary: #8b92a8; | |
| --text-tertiary: #5a6078; | |
| --text-muted: #3a3f52; | |
| --border-subtle: rgba(255,255,255,0.04); | |
| --border-mid: rgba(255,255,255,0.08); | |
| --border-strong: rgba(255,255,255,0.12); | |
| --glow-indigo: rgba(99,102,241,0.15); | |
| --glow-emerald: rgba(16,185,129,0.15); | |
| --glow-amber: rgba(245,158,11,0.12); | |
| --glow-rose: rgba(244,63,94,0.15); | |
| --glow-sky: rgba(56,189,248,0.12); | |
| --glow-violet: rgba(139,92,246,0.12); | |
| } | |
| *, *::before, *::after { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| html { | |
| scroll-behavior: smooth; | |
| } | |
| body { | |
| font-family: 'Plus Jakarta Sans', system-ui, sans-serif; | |
| background: var(--bg-deep); | |
| color: var(--text-primary); | |
| overflow-x: hidden; | |
| -webkit-font-smoothing: antialiased; | |
| -moz-osx-font-smoothing: grayscale; | |
| min-height: 100vh; | |
| } | |
| /* === ANIMATED MESH BACKGROUND === */ | |
| #mesh-canvas { | |
| position: fixed; | |
| inset: 0; | |
| z-index: 0; | |
| pointer-events: none; | |
| opacity: 0.6; | |
| } | |
| /* === GLASS SURFACES === */ | |
| .glass { | |
| background: rgba(17, 19, 32, 0.72); | |
| backdrop-filter: blur(20px) saturate(1.3); | |
| -webkit-backdrop-filter: blur(20px) saturate(1.3); | |
| border: 1px solid var(--border-subtle); | |
| } | |
| .glass-elevated { | |
| background: rgba(17, 19, 32, 0.85); | |
| backdrop-filter: blur(24px) saturate(1.4); | |
| -webkit-backdrop-filter: blur(24px) saturate(1.4); | |
| border: 1px solid var(--border-mid); | |
| } | |
| .glass-strong { | |
| background: rgba(21, 23, 38, 0.92); | |
| backdrop-filter: blur(30px) saturate(1.5); | |
| -webkit-backdrop-filter: blur(30px) saturate(1.5); | |
| border: 1px solid var(--border-strong); | |
| } | |
| /* === SCROLLBAR === */ | |
| ::-webkit-scrollbar { | |
| width: 4px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: transparent; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: rgba(255, 255, 255, 0.06); | |
| border-radius: 10px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: rgba(255, 255, 255, 0.12); | |
| } | |
| /* === TEXT SELECTION === */ | |
| ::selection { | |
| background: rgba(99, 102, 241, 0.25); | |
| color: #fff; | |
| } | |
| /* === LIVE DOT === */ | |
| .live-dot { | |
| width: 7px; | |
| height: 7px; | |
| border-radius: 50%; | |
| position: relative; | |
| flex-shrink: 0; | |
| } | |
| .live-dot::before { | |
| content: ''; | |
| position: absolute; | |
| inset: -3px; | |
| border-radius: 50%; | |
| animation: live-ring 2s ease-out infinite; | |
| } | |
| @keyframes live-ring { | |
| 0% { | |
| transform: scale(1); | |
| opacity: 0.6; | |
| } | |
| 100% { | |
| transform: scale(2.5); | |
| opacity: 0; | |
| } | |
| } | |
| .live-dot-green { | |
| background: #22c55e; | |
| box-shadow: 0 0 8px rgba(34,197,94,0.4); | |
| } | |
| .live-dot-green::before { | |
| background: rgba(34,197,94,0.3); | |
| } | |
| .live-dot-amber { | |
| background: #f59e0b; | |
| box-shadow: 0 0 8px rgba(245,158,11,0.4); | |
| } | |
| .live-dot-amber::before { | |
| background: rgba(245,158,11,0.3); | |
| } | |
| .live-dot-rose { | |
| background: #f43f5e; | |
| box-shadow: 0 0 8px rgba(244,63,94,0.4); | |
| } | |
| .live-dot-rose::before { | |
| background: rgba(244,63,94,0.3); | |
| } | |
| /* === PULSE EFFECTS === */ | |
| @keyframes pulse-slow { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0.65; } | |
| } | |
| .pulse-slow { | |
| animation: pulse-slow 3s ease-in-out infinite; | |
| } | |
| @keyframes shimmer { | |
| 0% { background-position: -200% 0; } | |
| 100% { background-position: 200% 0; } | |
| } | |
| .shimmer-bar { | |
| background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.03) 50%, transparent 100%); | |
| background-size: 200% 100%; | |
| animation: shimmer 4s ease-in-out infinite; | |
| } | |
| /* === STATUS BADGES === */ | |
| .badge { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 5px; | |
| padding: 3px 10px; | |
| border-radius: 9999px; | |
| font-size: 11px; | |
| font-weight: 600; | |
| letter-spacing: 0.03em; | |
| border: 1px solid transparent; | |
| white-space: nowrap; | |
| } | |
| .badge-green { | |
| background: rgba(34,197,94,0.10); | |
| color: #4ade80; | |
| border-color: rgba(34,197,94,0.15); | |
| } | |
| .badge-amber { | |
| background: rgba(245,158,11,0.10); | |
| color: #fbbf24; | |
| border-color: rgba(245,158,11,0.15); | |
| } | |
| .badge-rose { | |
| background: rgba(244,63,94,0.10); | |
| color: #fb7185; | |
| border-color: rgba(244,63,94,0.15); | |
| } | |
| .badge-sky { | |
| background: rgba(56,189,248,0.10); | |
| color: #7dd3fc; | |
| border-color: rgba(56,189,248,0.15); | |
| } | |
| .badge-violet { | |
| background: rgba(139,92,246,0.10); | |
| color: #a78bfa; | |
| border-color: rgba(139,92,246,0.15); | |
| } | |
| .badge-slate { | |
| background: rgba(100,116,139,0.10); | |
| color: #94a3b8; | |
| border-color: rgba(100,116,139,0.15); | |
| } | |
| /* === CARDS === */ | |
| .panel { | |
| border-radius: 14px; | |
| border: 1px solid var(--border-subtle); | |
| transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .panel::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| height: 1px; | |
| background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06) 20%, rgba(255,255,255,0.06) 80%, transparent); | |
| opacity: 0; | |
| transition: opacity 0.3s ease; | |
| } | |
| .panel:hover { | |
| border-color: var(--border-strong); | |
| transform: translateY(-1px); | |
| } | |
| .panel:hover::before { | |
| opacity: 1; | |
| } | |
| /* === LEAD PIPELINE ROWS === */ | |
| .lead-row { | |
| display: grid; | |
| grid-template-columns: 48px 1fr 100px 110px 90px 40px; | |
| align-items: center; | |
| gap: 14px; | |
| padding: 12px 16px; | |
| border-radius: 10px; | |
| transition: all 0.25s ease; | |
| cursor: pointer; | |
| position: relative; | |
| } | |
| .lead-row:hover { | |
| background: var(--bg-hover); | |
| } | |
| .lead-row.is-selected { | |
| background: rgba(99, 102, 241, 0.08); | |
| border: 1px solid rgba(99, 102, 241, 0.2); | |
| } | |
| .lead-row.has-unread::after { | |
| content: ''; | |
| position: absolute; | |
| left: 0; | |
| top: 50%; | |
| transform: translateY(-50%); | |
| width: 3px; | |
| height: 16px; | |
| border-radius: 0 2px 2px 0; | |
| background: #6366f1; | |
| } | |
| /* === MESSAGES === */ | |
| .msg-whatsapp-in { | |
| align-self: flex-start; | |
| background: var(--bg-hover); | |
| border: 1px solid var(--border-subtle); | |
| border-radius: 14px 14px 14px 4px; | |
| padding: 12px 14px; | |
| max-width: 90%; | |
| color: var(--text-primary); | |
| font-size: 13px; | |
| line-height: 1.55; | |
| position: relative; | |
| word-break: break-word; | |
| } | |
| .msg-whatsapp-out { | |
| align-self: flex-end; | |
| background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%); | |
| border-radius: 14px 14px 4px 14px; | |
| padding: 12px 14px; | |
| max-width: 90%; | |
| color: #fff; | |
| font-size: 13px; | |
| line-height: 1.55; | |
| position: relative; | |
| word-break: break-word; | |
| box-shadow: 0 4px 16px rgba(79,70,229,0.2); | |
| } | |
| .msg-meta { | |
| display: flex; | |
| align-items: center; | |
| justify-content: flex-end; | |
| gap: 4px; | |
| margin-top: 5px; | |
| font-size: 10px; | |
| opacity: 0.65; | |
| } | |
| /* === TIMELINE === */ | |
| .timeline-container { | |
| position: relative; | |
| padding-left: 28px; | |
| } | |
| .timeline-line { | |
| position: absolute; | |
| left: 9px; | |
| top: 8px; | |
| bottom: 0; | |
| width: 2px; | |
| border-radius: 1px; | |
| background: linear-gradient(to bottom, rgba(99,102,241,0.25), rgba(139,92,246,0.08), rgba(139,92,246,0.02)); | |
| } | |
| .timeline-item { | |
| position: relative; | |
| padding-bottom: 20px; | |
| } | |
| .timeline-item:last-child { | |
| padding-bottom: 0; | |
| } | |
| .timeline-dot { | |
| position: absolute; | |
| left: -24px; | |
| top: 3px; | |
| width: 10px; | |
| height: 10px; | |
| border-radius: 50%; | |
| border: 2px solid var(--bg-raised); | |
| z-index: 2; | |
| transition: transform 0.3s ease, box-shadow 0.3s ease; | |
| } | |
| .timeline-item:hover .timeline-dot { | |
| transform: scale(1.2); | |
| } | |
| .timeline-card { | |
| background: var(--bg-card); | |
| border: 1px solid var(--border-subtle); | |
| border-radius: 10px; | |
| padding: 12px 14px; | |
| font-size: 12.5px; | |
| line-height: 1.5; | |
| transition: all 0.2s ease; | |
| } | |
| .timeline-card:hover { | |
| background: var(--bg-hover); | |
| border-color: var(--border-mid); | |
| } | |
| /* === CHECKLIST === */ | |
| .checklist-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| padding: 9px 14px; | |
| border-radius: 10px; | |
| transition: background 0.2s ease; | |
| font-size: 12.5px; | |
| } | |
| .checklist-item:hover { | |
| background: var(--bg-hover); | |
| } | |
| .check-circle { | |
| width: 18px; | |
| height: 18px; | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| flex-shrink: 0; | |
| transition: all 0.3s ease; | |
| } | |
| .check-circle.done { | |
| background: #22c55e; | |
| color: #fff; | |
| box-shadow: 0 0 8px rgba(34,197,94,0.3); | |
| } | |
| .check-circle.pending { | |
| border: 1.5px solid var(--text-muted); | |
| } | |
| .check-circle.running { | |
| border: 1.5px solid #6366f1; | |
| animation: spin-check 1.5s linear infinite; | |
| } | |
| @keyframes spin-check { | |
| 0% { transform: rotate(0deg); } | |
| 100% { transform: rotate(360deg); } | |
| } | |
| /* === CHARTS === */ | |
| .sparkline-container { | |
| position: relative; | |
| height: 50px; | |
| } | |
| .chart-bar-fill { | |
| border-radius: 3px; | |
| transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .chart-bar-fill::after { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| right: 0; | |
| width: 30%; | |
| height: 100%; | |
| background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent); | |
| animation: shimmer 3s ease-in-out infinite; | |
| } | |
| /* === FLOATING PARTICLES === */ | |
| .particle { | |
| position: absolute; | |
| border-radius: 50%; | |
| pointer-events: none; | |
| animation: float-particle linear infinite; | |
| } | |
| @keyframes float-particle { | |
| 0% { | |
| transform: translateY(100vh) translateX(0) scale(0); | |
| opacity: 0; | |
| } | |
| 10% { | |
| opacity: 0.4; | |
| } | |
| 90% { | |
| opacity: 0.4; | |
| } | |
| 100% { | |
| transform: translateY(-20px) translateX(var(--drift)) scale(0.8); | |
| opacity: 0; | |
| } | |
| } | |
| /* === PARTICLE BURST ON CLICK === */ | |
| .click-burst { | |
| position: absolute; | |
| pointer-events: none; | |
| } | |
| .click-particle { | |
| position: absolute; | |
| width: 4px; | |
| height: 4px; | |
| border-radius: 50%; | |
| animation: burst-out 0.6s ease-out forwards; | |
| } | |
| @keyframes burst-out { | |
| 0% { | |
| transform: translate(0, 0) scale(1); | |
| opacity: 1; | |
| } | |
| 100% { | |
| transform: translate(var(--bx), var(--by)) scale(0); | |
| opacity: 0; | |
| } | |
| } | |
| /* === NUMBERS COUNTER === */ | |
| .num-counter { | |
| font-variant-numeric: tabular-nums; | |
| transition: color 0.3s ease; | |
| } | |
| /* === BUTTONS === */ | |
| .btn-glow { | |
| position: relative; | |
| overflow: hidden; | |
| transition: all 0.3s ease; | |
| } | |
| .btn-glow:hover { | |
| box-shadow: 0 0 20px var(--glow-indigo); | |
| } | |
| .btn-glow::after { | |
| content: ''; | |
| position: absolute; | |
| inset: 0; | |
| background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,0.15), transparent 60%); | |
| opacity: 0; | |
| transition: opacity 0.3s ease; | |
| } | |
| .btn-glow:hover::after { | |
| opacity: 1; | |
| } | |
| /* === DOCUMENT CARD === */ | |
| .doc-card { | |
| border-radius: 12px; | |
| border: 1px solid var(--border-subtle); | |
| overflow: hidden; | |
| transition: all 0.3s ease; | |
| cursor: pointer; | |
| } | |
| .doc-card:hover { | |
| border-color: var(--border-strong); | |
| transform: translateY(-2px); | |
| box-shadow: 0 8px 24px rgba(0,0,0,0.2); | |
| } | |
| /* === PHASE STEPPER === */ | |
| .phase-step { | |
| flex: 1; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| position: relative; | |
| cursor: pointer; | |
| } | |
| .phase-step:not(:last-child)::after { | |
| content: ''; | |
| position: absolute; | |
| top: 12px; | |
| right: -50%; | |
| width: 100%; | |
| height: 1.5px; | |
| background: var(--border-subtle); | |
| z-index: 0; | |
| } | |
| .phase-step.completed:not(:last-child)::after { | |
| background: linear-gradient(90deg, #22c55e, rgba(34,197,94,0.3)); | |
| } | |
| .phase-dot { | |
| width: 26px; | |
| height: 26px; | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 10px; | |
| position: relative; | |
| z-index: 1; | |
| transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); | |
| flex-shrink: 0; | |
| } | |
| .phase-dot.completed { | |
| background: #22c55e; | |
| color: #fff; | |
| box-shadow: 0 0 12px rgba(34,197,94,0.3); | |
| } | |
| .phase-dot.active { | |
| background: #6366f1; | |
| color: #fff; | |
| box-shadow: 0 0 16px rgba(99,102,241,0.35); | |
| animation: phase-pulse 2s ease-in-out infinite; | |
| } | |
| .phase-dot.pending { | |
| background: var(--bg-card); | |
| border: 1.5px solid var(--border-mid); | |
| color: var(--text-muted); | |
| } | |
| @keyframes phase-pulse { | |
| 0%, 100% { box-shadow: 0 0 16px rgba(99,102,241,0.35); } | |
| 50% { box-shadow: 0 0 24px rgba(99,102,241,0.5); } | |
| } | |
| /* === SCROLLING TEXT === */ | |
| .marquee-track { | |
| display: flex; | |
| animation: marquee 40s linear infinite; | |
| white-space: nowrap; | |
| } | |
| @keyframes marquee { | |
| 0% { transform: translateX(0); } | |
| 100% { transform: translateX(-50%); } | |
| } | |
| /* === RESIZE HANDLE === */ | |
| .resize-handle { | |
| width: 3px; | |
| cursor: col-resize; | |
| background: transparent; | |
| transition: background 0.2s; | |
| } | |
| .resize-handle:hover { | |
| background: rgba(99,102,241,0.4); | |
| } | |
| /* === ENTRY ANIMATIONS === */ | |
| @keyframes fadeUp { | |
| from { | |
| opacity: 0; | |
| transform: translateY(20px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; } | |
| to { opacity: 1; } | |
| } | |
| @keyframes scaleIn { | |
| from { | |
| opacity: 0; | |
| transform: scale(0.95); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: scale(1); | |
| } | |
| } | |
| @keyframes slideInRight { | |
| from { | |
| opacity: 0; | |
| transform: translateX(20px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateX(0); | |
| } | |
| } | |
| @keyframes slideInLeft { | |
| from { | |
| opacity: 0; | |
| transform: translateX(-20px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateX(0); | |
| } | |
| } | |
| .anim-fade-up { | |
| animation: fadeUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; | |
| opacity: 0; | |
| } | |
| .anim-scale-in { | |
| animation: scaleIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards; | |
| opacity: 0; | |
| } | |
| .anim-slide-right { | |
| animation: slideInRight 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards; | |
| opacity: 0; | |
| } | |
| .delay-1 { animation-delay: 0.1s; } | |
| .delay-2 { animation-delay: 0.2s; } | |
| .delay-3 { animation-delay: 0.3s; } | |
| .delay-4 { animation-delay: 0.4s; } | |
| .delay-5 { animation-delay: 0.5s; } | |
| .delay-6 { animation-delay: 0.6s; } | |
| .delay-7 { animation-delay: 0.7s; } | |
| .delay-8 { animation-delay: 0.8s; } | |
| /* === NOISE TEXTURE === */ | |
| .noise-overlay { | |
| position: fixed; | |
| inset: 0; | |
| z-index: 9999; | |
| pointer-events: none; | |
| opacity: 0.018; | |
| background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); | |
| } | |
| /* === MOBILE DRAWER === */ | |
| @media (max-width: 1024px) { | |
| .mobile-drawer { | |
| position: fixed; | |
| bottom: 0; | |
| left: 0; | |
| right: 0; | |
| z-index: 100; | |
| border-radius: 20px 20px 0 0; | |
| max-height: 85vh; | |
| transform: translateY(100%); | |
| transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); | |
| } | |
| .mobile-drawer.open { | |
| transform: translateY(0); | |
| } | |
| .mobile-drawer-overlay { | |
| position: fixed; | |
| inset: 0; | |
| background: rgba(0,0,0,0.5); | |
| z-index: 99; | |
| opacity: 0; | |
| pointer-events: none; | |
| transition: opacity 0.3s ease; | |
| } | |
| .mobile-drawer-overlay.open { | |
| opacity: 1; | |
| pointer-events: auto; | |
| } | |
| } | |
| /* === TOOLTIP === */ | |
| [data-tooltip] { | |
| position: relative; | |
| } | |
| [data-tooltip]::after { | |
| content: attr(data-tooltip); | |
| position: absolute; | |
| bottom: calc(100% + 6px); | |
| left: 50%; | |
| transform: translateX(-50%) scale(0.95); | |
| background: var(--bg-surface); | |
| border: 1px solid var(--border-mid); | |
| color: var(--text-primary); | |
| padding: 5px 10px; | |
| border-radius: 8px; | |
| font-size: 11px; | |
| white-space: nowrap; | |
| pointer-events: none; | |
| opacity: 0; | |
| transition: all 0.2s ease; | |
| z-index: 50; | |
| font-family: 'Plus Jakarta Sans', sans-serif; | |
| } | |
| [data-tooltip]:hover::after { | |
| opacity: 1; | |
| transform: translateX(-50%) scale(1); | |
| } | |
| /* === RING CHART === */ | |
| .ring-chart { | |
| position: relative; | |
| width: 64px; | |
| height: 64px; | |
| } | |
| .ring-chart svg { | |
| transform: rotate(-90deg); | |
| } | |
| .ring-chart circle { | |
| fill: none; | |
| stroke-width: 5; | |
| stroke-linecap: round; | |
| } | |
| .ring-chart .bg-ring { | |
| stroke: rgba(255,255,255,0.04); | |
| } | |
| .ring-chart .fg-ring { | |
| transition: stroke-dashoffset 0.8s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| .ring-chart .ring-text { | |
| position: absolute; | |
| inset: 0; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 14px; | |
| font-weight: 700; | |
| } | |
| /* === VERTICAL BARS CHART === */ | |
| .vbar { | |
| width: 4px; | |
| border-radius: 2px; | |
| transition: height 0.5s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s ease; | |
| } | |
| /* === MINI CHART LINE === */ | |
| .mini-chart { | |
| width: 80px; | |
| height: 32px; | |
| } | |
| /* === AVATAR STACK === */ | |
| .avatar-stack { | |
| display: flex; | |
| } | |
| .avatar-stack img, | |
| .avatar-stack .avatar-fallback { | |
| width: 26px; | |
| height: 26px; | |
| border-radius: 50%; | |
| border: 2px solid var(--bg-raised); | |
| margin-left: -8px; | |
| transition: transform 0.2s ease, margin 0.2s ease; | |
| } | |
| .avatar-stack img:first-child, | |
| .avatar-stack .avatar-fallback:first-child { | |
| margin-left: 0; | |
| } | |
| .avatar-stack:hover img, | |
| .avatar-stack:hover .avatar-fallback { | |
| margin-left: 2px; | |
| } | |
| .avatar-fallback { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 9px; | |
| font-weight: 700; | |
| color: #fff; | |
| } | |
| /* === MODAL === */ | |
| .modal-overlay { | |
| position: fixed; | |
| inset: 0; | |
| z-index: 200; | |
| background: rgba(2, 3, 10, 0.75); | |
| backdrop-filter: blur(8px); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| opacity: 0; | |
| pointer-events: none; | |
| transition: opacity 0.3s ease; | |
| } | |
| .modal-overlay.open { | |
| opacity: 1; | |
| pointer-events: auto; | |
| } | |
| .modal-card { | |
| transform: scale(0.95) translateY(10px); | |
| transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); | |
| } | |
| .modal-overlay.open .modal-card { | |
| transform: scale(1) translateY(0); | |
| } | |
| /* === SCROLL INDICATOR === */ | |
| .scroll-indicator { | |
| position: absolute; | |
| bottom: 8px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| width: 20px; | |
| height: 3px; | |
| border-radius: 2px; | |
| background: var(--text-muted); | |
| opacity: 0.5; | |
| } | |
| /* === HORIZONTAL RULE WITH TEXT === */ | |
| .hr-with-text { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| color: var(--text-tertiary); | |
| font-size: 11px; | |
| font-weight: 500; | |
| } | |
| .hr-with-text::before, | |
| .hr-with-text::after { | |
| content: ''; | |
| flex: 1; | |
| height: 1px; | |
| background: var(--border-subtle); | |
| } | |
| /* === PROGRESS ARC === */ | |
| .progress-arc { | |
| position: relative; | |
| } | |
| .progress-arc .arc-value { | |
| position: absolute; | |
| inset: 0; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| /* === HOVER GLOW UNDERLAY === */ | |
| .hover-glow { | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .hover-glow::before { | |
| content: ''; | |
| position: absolute; | |
| inset: -2px; | |
| background: linear-gradient(135deg, rgba(99,102,241,0.15), rgba(139,92,246,0.1), rgba(56,189,248,0.1)); | |
| opacity: 0; | |
| transition: opacity 0.4s ease; | |
| filter: blur(16px); | |
| z-index: -1; | |
| border-radius: inherit; | |
| } | |
| .hover-glow:hover::before { | |
| opacity: 1; | |
| } | |
| /* === INFO ROW === */ | |
| .info-row { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 7px 0; | |
| border-bottom: 1px solid var(--border-subtle); | |
| } | |
| .info-row:last-child { | |
| border-bottom: none; | |
| } | |
| /* === AI THINKING DOTS === */ | |
| .thinking-dots { | |
| display: inline-flex; | |
| gap: 3px; | |
| } | |
| .thinking-dots span { | |
| width: 5px; | |
| height: 5px; | |
| border-radius: 50%; | |
| background: currentColor; | |
| animation: thinking-bounce 1.2s ease-in-out infinite; | |
| } | |
| .thinking-dots span:nth-child(2) { animation-delay: 0.15s; } | |
| .thinking-dots span:nth-child(3) { animation-delay: 0.3s; } | |
| @keyframes thinking-bounce { | |
| 0%, 80%, 100% { transform: translateY(0); opacity: 0.4; } | |
| 40% { transform: translateY(-6px); opacity: 1; } | |
| } | |
| /* === KEYBOARD SHORTCUT === */ | |
| kbd { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| min-width: 20px; | |
| height: 20px; | |
| padding: 0 5px; | |
| background: var(--bg-card); | |
| border: 1px solid var(--border-mid); | |
| border-radius: 5px; | |
| font-size: 10px; | |
| font-weight: 600; | |
| font-family: 'JetBrains Mono', monospace; | |
| color: var(--text-secondary); | |
| } | |
| /* === CUSTOM RANGE INPUT === */ | |
| input[type="range"] { | |
| -webkit-appearance: none; | |
| appearance: none; | |
| height: 3px; | |
| border-radius: 2px; | |
| background: var(--border-subtle); | |
| outline: none; | |
| } | |
| input[type="range"]::-webkit-slider-thumb { | |
| -webkit-appearance: none; | |
| width: 14px; | |
| height: 14px; | |
| border-radius: 50%; | |
| background: #6366f1; | |
| border: 2px solid var(--bg-raised); | |
| cursor: pointer; | |
| box-shadow: 0 0 8px rgba(99,102,241,0.3); | |
| transition: transform 0.2s; | |
| } | |
| input[type="range"]::-webkit-slider-thumb:hover { | |
| transform: scale(1.2); | |
| } | |
| /* === SVG SPARKLINE === */ | |
| .sparkline-svg { | |
| overflow: visible; | |
| } | |
| .sparkline-svg path { | |
| fill: none; | |
| stroke-width: 1.5; | |
| stroke-linecap: round; | |
| stroke-linejoin: round; | |
| } | |
| .sparkline-area { | |
| fill-opacity: 0.12; | |
| } | |
| /* === SYSTEM HEALTH RING === */ | |
| .health-ring-wrapper { | |
| position: relative; | |
| width: 56px; | |
| height: 56px; | |
| } | |
| .health-ring-wrapper svg { | |
| transform: rotate(-90deg); | |
| } | |
| /* === CONNECTION LINES ANIMATION === */ | |
| @keyframes dash { | |
| to { stroke-dashoffset: -20; } | |
| } | |
| .conn-line { | |
| stroke-dasharray: 4 4; | |
| animation: dash 1.5s linear infinite; | |
| } | |
| /* === ACTIVITY FEED ITEM === */ | |
| .activity-item { | |
| padding: 10px 14px; | |
| border-radius: 10px; | |
| transition: background 0.2s ease; | |
| cursor: pointer; | |
| } | |
| .activity-item:hover { | |
| background: var(--bg-hover); | |
| } | |
| .activity-item + .activity-item { | |
| border-top: 1px solid var(--border-subtle); | |
| } | |
| /* === FOCUS RING === */ | |
| .focus-ring:focus-visible { | |
| outline: none; | |
| box-shadow: 0 0 0 2px var(--bg-deep), 0 0 0 4px rgba(99,102,241,0.4); | |
| border-radius: 8px; | |
| } | |
| /* === RESPONSIVE GRID HELPERS === */ | |
| @media (min-width: 1025px) { | |
| .three-col { | |
| display: grid; | |
| grid-template-columns: 320px 1fr 380px; | |
| gap: 16px; | |
| } | |
| } | |
| @media (max-width: 1024px) { | |
| .three-col { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 12px; | |
| } | |
| } | |
| /* === SCROLL SHADOW === */ | |
| .scroll-shadow { | |
| position: relative; | |
| } | |
| .scroll-shadow::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| right: 0; | |
| height: 30px; | |
| background: linear-gradient(to top, var(--bg-card), transparent); | |
| pointer-events: none; | |
| z-index: 2; | |
| } | |
| /* === DETAIL DRAWER === */ | |
| .detail-panel { | |
| position: fixed; | |
| top: 0; | |
| right: 0; | |
| bottom: 0; | |
| width: 460px; | |
| max-width: 100vw; | |
| z-index: 150; | |
| transform: translateX(100%); | |
| transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); | |
| } | |
| .detail-panel.open { | |
| transform: translateX(0); | |
| } | |
| .detail-overlay { | |
| position: fixed; | |
| inset: 0; | |
| z-index: 140; | |
| background: rgba(2,3,10,0.6); | |
| backdrop-filter: blur(4px); | |
| opacity: 0; | |
| pointer-events: none; | |
| transition: opacity 0.3s ease; | |
| } | |
| .detail-overlay.open { | |
| opacity: 1; | |
| pointer-events: auto; | |
| } | |
| /* === TEXT GRADIENT === */ | |
| .text-gradient { | |
| background: linear-gradient(135deg, #f0f1f6 0%, #a5b4fc 50%, #7dd3fc 100%); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .text-gradient-indigo { | |
| background: linear-gradient(135deg, #818cf8 0%, #c4b5fd 100%); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| /* === TABS === */ | |
| .tab-pill { | |
| padding: 6px 14px; | |
| border-radius: 8px; | |
| font-size: 12px; | |
| font-weight: 600; | |
| color: var(--text-tertiary); | |
| cursor: pointer; | |
| transition: all 0.2s ease; | |
| border: none; | |
| background: transparent; | |
| } | |
| .tab-pill:hover { | |
| color: var(--text-secondary); | |
| background: var(--bg-hover); | |
| } | |
| .tab-pill.active { | |
| color: var(--text-primary); | |
| background: var(--bg-active); | |
| box-shadow: inset 0 1px 0 rgba(255,255,255,0.04); | |
| } | |
| /* === CONTEXT MENU === */ | |
| .ctx-menu { | |
| position: absolute; | |
| background: var(--bg-surface); | |
| border: 1px solid var(--border-mid); | |
| border-radius: 12px; | |
| padding: 6px; | |
| min-width: 180px; | |
| z-index: 100; | |
| box-shadow: 0 16px 48px rgba(0,0,0,0.4); | |
| opacity: 0; | |
| transform: scale(0.95); | |
| transition: all 0.15s ease; | |
| pointer-events: none; | |
| } | |
| .ctx-menu.open { | |
| opacity: 1; | |
| transform: scale(1); | |
| pointer-events: auto; | |
| } | |
| .ctx-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| padding: 8px 12px; | |
| border-radius: 8px; | |
| font-size: 12.5px; | |
| cursor: pointer; | |
| transition: background 0.15s ease; | |
| color: var(--text-secondary); | |
| } | |
| .ctx-item:hover { | |
| background: var(--bg-hover); | |
| color: var(--text-primary); | |
| } | |
| .ctx-item i { | |
| width: 16px; | |
| text-align: center; | |
| font-size: 11px; | |
| } | |
| /* === RESPONSIVE COLLAPSE === */ | |
| @media (max-width: 768px) { | |
| .hide-mobile { | |
| display: none ; | |
| } | |
| .full-mobile { | |
| width: 100% ; | |
| } | |
| } | |
| /* === STAGGERED ANIMATION FOR LIST ITEMS === */ | |
| .stagger-list > * { | |
| opacity: 0; | |
| animation: fadeUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; | |
| } | |
| .stagger-list > *:nth-child(1) { animation-delay: 0.05s; } | |
| .stagger-list > *:nth-child(2) { animation-delay: 0.10s; } | |
| .stagger-list > *:nth-child(3) { animation-delay: 0.15s; } | |
| .stagger-list > *:nth-child(4) { animation-delay: 0.20s; } | |
| .stagger-list > *:nth-child(5) { animation-delay: 0.25s; } | |
| .stagger-list > *:nth-child(6) { animation-delay: 0.30s; } | |
| .stagger-list > *:nth-child(7) { animation-delay: 0.35s; } | |
| .stagger-list > *:nth-child(8) { animation-delay: 0.40s; } |