/* ══════════════════════════════════════════════════════════════ ImportaSEI — Motion Design System v2 Carregado no final do de todas as telas. Dark-first · light via :root.light / body.light ══════════════════════════════════════════════════════════════ */ @import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&family=JetBrains+Mono:wght@400;500;600&family=Instrument+Serif:ital@0;1&display=swap'); /* ══════════════════════════════════════════════ TOKENS — dark ══════════════════════════════════════════════ */ :root { --bg: #05070d; --bg1: #0a0e17; --bg2: #101623; --bg3: #161d2c; --bg4: #1d2538; --glass: rgba(12,16,28,.40); --glass-bd: rgba(255,255,255,.10); --glass-hi: rgba(255,255,255,.06); --bd: #232a3d; --bd2: #323a52; --tx: #e8eef8; --tx2: #8b94a8; --tx3: #4e566c; --blue:#58a6ff; --blue-bg:#0d2149; --blue-bd:#1f6feb; --green:#3fb950; --green-bg:#0d2b1a; --green-bd:#238636; --red:#f85149; --red-bg:#2d1212; --red-bd:#da3633; --amber:#d29922; --amber-bg:#2d1e00; --amber-bd:#9e6a03; --purple:#a371f7; --purple-bg:#1e1040; --purple-bd:#6e40c9; --teal:#2dd4bf; --teal-bg:#0d2d2a; --teal-bd:#0f766e; --a1:#2dd4bf; --a2:#58a6ff; --a3:#a371f7; --accent:#4f8ef7; --accent-soft:rgba(79,142,247,.14); --accent-bd:rgba(79,142,247,.32); --accent-dim:rgba(79,142,247,.13); --grad-brand: linear-gradient(135deg, #2dd4bf 0%, #58a6ff 55%, #a371f7 100%); --grad-brand-soft: linear-gradient(135deg, rgba(45,212,191,.16), rgba(88,166,255,.16) 55%, rgba(163,113,247,.16)); --grad-line: linear-gradient(90deg, transparent, rgba(79,142,247,.32), transparent); --glow-a: 0 0 0 1px rgba(79,142,247,.35), 0 0 24px rgba(79,142,247,.25); --glow-teal: 0 0 0 1px rgba(45,212,191,.35), 0 0 22px rgba(45,212,191,.22); --glow-pur: 0 0 0 1px rgba(163,113,247,.35), 0 0 22px rgba(163,113,247,.22); --shadow-xs: 0 1px 2px rgba(0,0,0,.5); --shadow-sm: 0 2px 10px rgba(0,0,0,.55); --shadow-md: 0 10px 30px rgba(0,0,0,.55); --shadow-lg: 0 20px 60px rgba(0,0,0,.55); --shadow-card: inset 0 1px 0 var(--glass-hi), 0 6px 20px rgba(0,0,0,.45); --shadow-pop: inset 0 1px 0 var(--glass-hi), 0 12px 40px rgba(0,0,0,.6), 0 0 0 1px var(--glass-bd); --r:10px; --rl:14px; --rxl:20px; --rp:999px; --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s7:32px; --s8:48px; --s9:64px; --topbar-h:64px; --sidebar-w:244px; --sidebar-w-collapsed:64px; --font-sans:'Inter','Segoe UI',system-ui,-apple-system,sans-serif; --font-mono:'JetBrains Mono','Consolas','Courier New',monospace; --font-serif:'Instrument Serif',Georgia,'Times New Roman',serif; --display-size:36px; --display-weight:800; --display-track:-1px; --h1-size:24px; --h1-lh:1.25; --h1-weight:700; --h1-track:-.2px; --h2-size:18px; --h2-lh:1.3; --h2-weight:700; --h2-track:-.2px; --h3-size:14px; --h3-lh:1.35; --h3-weight:700; --h3-track:-.1px; --body-size:14px; --body-lh:1.55; --small-size:12px; --small-lh:1.5; --label-size:11px; --label-weight:600; --label-track:.5px; --micro-size:10px; --micro-track:.8px; --mono-size:12px; /* ── Aliases Motion Dashboard (referência visual; usam tokens ImportaSEI) ── */ --bg-0:var(--bg); --bg-1:var(--bg1); --bg-2:var(--bg2); --bg-3:var(--bg3); --bg-4:var(--bg4); --tx-0:var(--tx); --tx-1:var(--tx2); --tx-2:var(--tx3); --tx-3:#3a4154; --line:var(--glass-bd); --line-2:var(--bd2); --card:rgba(12,16,28,.40); --motion-topbar-bg:rgba(10,14,24,.65); --glass-blur:18px; --grad:var(--grad-brand); --grad-soft:var(--grad-brand-soft); --aurora-1:rgba(94,234,212,.28); --aurora-2:rgba(125,211,252,.22); --aurora-3:rgba(196,181,253,.25); color-scheme: dark; } /* ── Light mode ── */ :root.light, body.light { --bg:#f4f6fb; --bg1:#fff; --bg2:#fff; --bg3:#f0f2f8; --bg4:#e6eaf2; --glass:rgba(255,255,255,.72); --glass-bd:rgba(12,20,36,.06); --glass-hi:rgba(255,255,255,.8); --bd:#dfe3ec; --bd2:#c3cad6; --tx:#0e1422; --tx2:#525b6f; --tx3:#8b92a3; --blue:#0969da; --blue-bg:#ddf4ff; --blue-bd:#54aeff; --green:#1a7f37; --green-bg:#dafbe1; --green-bd:#2da44e; --red:#cf222e; --red-bg:#ffebe9; --red-bd:#ff8182; --amber:#9a6700; --amber-bg:#fff8c5; --amber-bd:#d4a72c; --purple:#8250df; --purple-bg:#fbefff; --purple-bd:#c297ff; --teal:#0f766e; --teal-bg:#ccfbf1; --teal-bd:#2dd4bf; --a1:#0f766e; --a2:#0969da; --a3:#8250df; --accent:#0969da; --accent-soft:rgba(9,105,218,.08); --accent-bd:rgba(9,105,218,.3); --accent-dim:rgba(9,105,218,.1); --grad-brand: linear-gradient(135deg,#2dd4bf 0%,#0969da 55%,#8250df 100%); --grad-brand-soft: linear-gradient(135deg,rgba(45,212,191,.1),rgba(9,105,218,.08) 55%,rgba(130,80,223,.1)); --grad-line: linear-gradient(90deg,transparent,rgba(9,105,218,.3),transparent); --glow-a: 0 0 0 3px rgba(9,105,218,.12); --glow-teal: 0 0 0 3px rgba(45,212,191,.18); --glow-pur: 0 0 0 3px rgba(130,80,223,.14); --shadow-xs:0 1px 2px rgba(10,20,40,.05); --shadow-sm:0 2px 8px rgba(10,20,40,.06); --shadow-md:0 10px 30px rgba(10,20,40,.1); --shadow-lg:0 18px 50px rgba(10,20,40,.12); --shadow-card:0 1px 2px rgba(10,20,40,.04),0 4px 16px rgba(10,20,40,.06); --shadow-pop:0 10px 40px rgba(10,20,40,.12),0 0 0 1px var(--glass-bd); --tx-3:#8b92a3; --card:rgba(255,255,255,.78); --motion-topbar-bg:rgba(255,255,255,.82); --aurora-1:rgba(13,148,136,.12); --aurora-2:rgba(2,132,199,.1); --aurora-3:rgba(124,58,237,.1); color-scheme: light; } /* ══════════════════════════════════════════════ RESET BASE ══════════════════════════════════════════════ */ *,*::before,*::after { box-sizing:border-box; margin:0; padding:0; } html,body { min-height:100vh; } body { position:relative; background:var(--bg); color:var(--tx); font-family:var(--font-sans); font-size:var(--body-size); line-height:var(--body-lh); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; transition:background-color .45s cubic-bezier(.6,.2,.2,1), color .35s ease; } /* ══════════════════════════════════════════════ KEYFRAMES — todas as animações Motion v2 ══════════════════════════════════════════════ */ /* Drift dos 3 orbs dentro de .bg-stage (Motion Dashboard) */ @keyframes v2drift-a { 0%,100% { transform:translate(0,0) scale(1); } 50% { transform:translate(88px,60px) scale(1.08); } } @keyframes v2drift-b { 0%,100% { transform:translate(0,0) scale(1); } 50% { transform:translate(-72px,96px) scale(.94); } } @keyframes v2drift-c { 0%,100% { transform:translate(0,0) scale(1); } 50% { transform:translate(48px,-72px) scale(1.1); } } /* Aurora / orbs — trajectória ampla (referência Motion Dashboard) */ @keyframes v2float { 0%,100% { transform:translate(0,0) scale(1); } 33% { transform:translate(56px,-42px) scale(1.07); } 66% { transform:translate(-48px,58px) scale(.93); } } @keyframes v2orb { 0%,100% { transform:translate(0,0) scale(1); } 33% { transform:translate(42px,-28px) scale(1.12); } 66% { transform:translate(-32px,36px) scale(.92); } } /* Fade-in de entrada de elementos */ @keyframes v2fadein { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } } /* Fade-in lateral (sidebar, painéis) */ @keyframes v2slidein { from { opacity:0; transform:translateX(-12px); } to { opacity:1; transform:translateX(0); } } /* Fade-in vindo de baixo (modais, overlays) */ @keyframes v2slideup { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:translateY(0); } } /* Scale in (badges, chips, avatares) */ @keyframes v2scalein { from { opacity:0; transform:scale(.85); } to { opacity:1; transform:scale(1); } } /* Spinner de carregamento */ @keyframes v2spin { to { transform:rotate(360deg); } } /* Pulse — dots de status, chips ao vivo */ @keyframes v2pulse { 0%,100% { opacity:.5; transform:scale(1); } 50% { opacity:1; transform:scale(1.35); } } /* Pulse de glow — card-title dot, stat icons */ @keyframes v2glowpulse { 0%,100% { box-shadow:0 0 4px currentColor; } 50% { box-shadow:0 0 14px currentColor, 0 0 28px currentColor; } } /* Shimmer — barra de progresso */ @keyframes v2shimmer { 0% { transform:translateX(-100%); } 100% { transform:translateX(100%); } } /* Shine — botão primário no hover */ @keyframes v2shine { from { transform:translateX(-100%) skewX(-15deg); } to { transform:translateX(200%) skewX(-15deg); } } /* Scan line — efeito tech no grid-bg */ @keyframes v2scan { 0% { transform:translateY(-100%); opacity:0; } 10% { opacity:1; } 90% { opacity:1; } 100% { transform:translateY(100vh); opacity:0; } } /* Blink cursor — terminais, log */ @keyframes v2blink { 0%,100%{opacity:1} 50%{opacity:0} } /* Número contador (usado via JS) */ @keyframes v2countup { from { opacity:0; transform:translateY(4px) scale(.9); } to { opacity:1; transform:translateY(0) scale(1); } } /* ══════════════════════════════════════════════ AURORA — atmosfera de fundo ══════════════════════════════════════════════ */ /* Palco Motion: 3 orbs (.a1 .a2 .a3), injetado por motion-shell.js */ .bg-stage { position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none; } .bg-stage .aurora.a1, .bg-stage .aurora.a2, .bg-stage .aurora.a3 { position:absolute; inset:auto; border-radius:50%; filter:blur(92px); opacity:.88; will-change:transform; pointer-events:none; overflow:visible; } .bg-stage .aurora.a1 { width:720px; height:720px; background:radial-gradient(circle,var(--aurora-1),transparent 70%); top:-260px; left:-180px; animation:v2drift-a 26s ease-in-out infinite; } .bg-stage .aurora.a2 { width:820px; height:820px; background:radial-gradient(circle,var(--aurora-2),transparent 70%); top:20%; right:-260px; left:auto; animation:v2drift-b 32s ease-in-out infinite; } .bg-stage .aurora.a3 { width:640px; height:640px; background:radial-gradient(circle,var(--aurora-3),transparent 70%); bottom:-220px; left:30%; top:auto; animation:v2drift-c 28s ease-in-out -8s infinite; } :root.light .bg-stage .aurora.a1, :root.light .bg-stage .aurora.a2, :root.light .bg-stage .aurora.a3 { opacity:.62; filter:blur(88px); } @media (prefers-reduced-motion:reduce) { .bg-stage .aurora.a1, .bg-stage .aurora.a2, .bg-stage .aurora.a3 { animation:none; } } /* Aurora legada: wrapper só com classe "aurora" + ::before/::after + (HTML antigo; oculto com #motion-bg-stage) */ .aurora:not(.a1):not(.a2):not(.a3) { position:fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden; } body:has(#motion-bg-stage) > .aurora:not(.a1):not(.a2):not(.a3) { display:none !important; } .aurora:not(.a1):not(.a2):not(.a3)::before, .aurora:not(.a1):not(.a2):not(.a3)::after { content:''; position:absolute; border-radius:50%; filter:blur(88px); opacity:.58; animation:v2float 26s ease-in-out infinite; } .aurora:not(.a1):not(.a2):not(.a3)::before { width:620px; height:620px; background:radial-gradient(circle,rgba(45,212,191,.35),transparent 70%); top:-180px; left:-140px; } .aurora:not(.a1):not(.a2):not(.a3)::after { width:760px; height:760px; background:radial-gradient(circle,rgba(163,113,247,.3),transparent 70%); bottom:-220px; right:-180px; animation-delay:-9s; } .aurora:not(.a1):not(.a2):not(.a3) i { position:absolute; width:460px; height:460px; border-radius:50%; filter:blur(76px); opacity:.48; background:radial-gradient(circle,rgba(88,166,255,.34),transparent 70%); top:28%; left:42%; animation:v2float 30s ease-in-out -15s infinite; } :root.light .aurora:not(.a1):not(.a2):not(.a3)::before { opacity:.22; } :root.light .aurora:not(.a1):not(.a2):not(.a3)::after { opacity:.18; } :root.light .aurora:not(.a1):not(.a2):not(.a3) i { opacity:.22; } /* Grid tech overlay (passo 56px alinhado ao Motion Dashboard) */ .grid-bg { position:fixed; inset:0; pointer-events:none; z-index:0; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size:56px 56px; mask-image:radial-gradient(ellipse 90% 70% at 50% 40%,#000 0%,transparent 85%); -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 40%,#000 0%,transparent 85%); } :root.light .grid-bg { background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); } /* Ruído / grain muito leve (Motion “animated noise” simplificado) */ @keyframes v2noise-jitter { 0%,100% { transform:translate(0,0) rotate(0deg); } 33% { transform:translate(.35%,-.28%) rotate(.015deg); } 66% { transform:translate(-.32%,.22%) rotate(-.012deg); } } .motion-noise { position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.055; mix-blend-mode:soft-light; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E"); background-size:180px 180px; animation:v2noise-jitter 18s ease-in-out infinite; } :root.light .motion-noise { opacity:.04; mix-blend-mode:multiply; } @media (prefers-reduced-motion:reduce) { .motion-noise { animation:none; } } /* Scan line sobre o grid */ .grid-bg::after { content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(transparent, rgba(79,142,247,.06) 50%, transparent); height:120px; width:100%; animation:v2scan 8s linear 2s infinite; } :root.light .grid-bg::after { background:linear-gradient(transparent,rgba(9,105,218,.04) 50%,transparent); } .app-root { position:relative; z-index:1; min-height:100vh; display:flex; flex-direction:column; } /* Orbs decorativos extras (.orb) — login e hero sections */ .orb { position:absolute; border-radius:50%; filter:blur(40px); pointer-events:none; animation:v2orb 18s ease-in-out infinite; } .orb-2 { animation-delay:-6s; } .orb-3 { animation-delay:-12s; } /* ══════════════════════════════════════════════ SCROLLBAR ══════════════════════════════════════════════ */ *::-webkit-scrollbar { width:6px; height:6px; } *::-webkit-scrollbar-thumb { background:var(--bd2); border-radius:6px; } *::-webkit-scrollbar-thumb:hover { background:var(--tx3); } *::-webkit-scrollbar-track { background:transparent; } /* ══════════════════════════════════════════════ TIPOGRAFIA ══════════════════════════════════════════════ */ h1,.h1 { font-size:var(--h1-size); line-height:var(--h1-lh); font-weight:var(--h1-weight); letter-spacing:var(--h1-track); color:var(--tx); } h2,.h2 { font-size:var(--h2-size); line-height:var(--h2-lh); font-weight:var(--h2-weight); letter-spacing:var(--h2-track); color:var(--tx); } h3,.h3 { font-size:var(--h3-size); line-height:var(--h3-lh); font-weight:var(--h3-weight); letter-spacing:var(--h3-track); color:var(--tx); } .display { font-size:var(--display-size); font-weight:var(--display-weight); letter-spacing:var(--display-track); line-height:1.1; color:var(--tx); } p,.body { font-size:var(--body-size); line-height:var(--body-lh); color:var(--tx2); } .small { font-size:var(--small-size); line-height:var(--small-lh); color:var(--tx2); } .label { font-size:var(--label-size); font-weight:var(--label-weight); letter-spacing:var(--label-track); text-transform:uppercase; color:var(--tx2); } .micro { font-size:var(--micro-size); letter-spacing:var(--micro-track); text-transform:uppercase; color:var(--tx3); font-weight:700; } code,.mono,pre { font-family:var(--font-mono); font-size:var(--mono-size); } .serif-display,.serif { font-family:var(--font-serif); font-weight:400; font-style:normal; } .gradient-text { background:var(--grad-brand); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; } /* ══════════════════════════════════════════════ TOPBAR ══════════════════════════════════════════════ */ body .top, body .topbar { height:var(--topbar-h) !important; background:var(--motion-topbar-bg) !important; backdrop-filter:blur(var(--glass-blur)) saturate(180%) !important; -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(180%) !important; border-bottom:1px solid var(--line) !important; display:flex; align-items:center; gap:18px; padding:0 28px; flex-shrink:0; position:sticky; top:0; z-index:40; box-shadow:0 1px 0 rgba(255,255,255,.04) !important; animation:v2fadein .3s ease both; } :root.light body .top, :root.light body .topbar, body.light .top, body.light .topbar { background:var(--motion-topbar-bg) !important; border-bottom:1px solid var(--line) !important; } /* Logo / marca */ body .top-mark, body .topbar-mark { width:28px; height:28px; border-radius:8px; background:var(--grad-brand) !important; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:800; color:#05070d !important; letter-spacing:-.5px; box-shadow:0 4px 14px rgba(88,166,255,.35),inset 0 1px 0 rgba(255,255,255,.3) !important; flex-shrink:0; text-decoration:none; transition:transform .2s, box-shadow .2s; } body .top-mark:hover, body .topbar-mark:hover { transform:scale(1.05) rotate(-3deg); box-shadow:0 6px 20px rgba(88,166,255,.5),inset 0 1px 0 rgba(255,255,255,.3) !important; } body .top-logo b, body .topbar-wm b, body .tb-brand b { background:var(--grad-brand) !important; -webkit-background-clip:text !important; background-clip:text !important; -webkit-text-fill-color:transparent !important; } body .top-sep, body .topbar-sep { width:1px; height:22px; background:var(--bd); margin:0 4px; flex-shrink:0; } body .top-crumb, body .topbar-crumb { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--tx2); } body .top-crumb strong, body .topbar-crumb strong { color:var(--tx); font-weight:600; } body .top-right, body .topbar-right { margin-left:auto; display:flex; align-items:center; gap:8px; } body .topbar-spacer { flex:1; } /* Search bar */ body .top-search, body .topbar-search { display:flex; align-items:center; gap:8px; background:var(--bg3); border:1px solid var(--bd); border-radius:var(--r); padding:6px 12px; min-width:220px; cursor:text; transition:border-color .15s, box-shadow .2s; } body .top-search:hover, body .topbar-search:hover { border-color:var(--bd2); } body .top-search:focus-within, body .topbar-search:focus-within { border-color:var(--accent) !important; box-shadow:var(--glow-a); } body .top-search input, body .topbar-search input { background:none; border:none; outline:none; color:var(--tx); font:inherit; flex:1; font-size:13px; } body .top-kbd, body .topbar-kbd { font:10px/1 var(--font-mono); padding:2px 5px; border:1px solid var(--bd); border-radius:4px; color:var(--tx3); background:var(--bg2); } /* Icon buttons */ body .top-icon, body .topbar-icon { width:34px; height:34px; border-radius:var(--r); border:1px solid var(--bd); background:var(--bg3) !important; color:var(--tx2); display:inline-flex; align-items:center; justify-content:center; font-size:14px; cursor:pointer; transition:all .15s; position:relative; } body .top-icon:hover, body .topbar-icon:hover { border-color:var(--accent-bd); color:var(--tx); background:var(--bg4) !important; box-shadow:var(--glow-a); transform:translateY(-1px); } body .top-icon:active, body .topbar-icon:active { transform:translateY(0); } body .top-icon.has-dot::after, body .topbar-icon.has-dot::after { content:''; position:absolute; top:7px; right:8px; width:7px; height:7px; border-radius:50%; background:var(--red); box-shadow:0 0 0 2px var(--bg2); animation:v2pulse 2s ease-in-out infinite; } /* Back button */ body .top-back, body .tb-back, body .topbar-back { display:inline-flex; align-items:center; gap:6px; padding:7px 12px; border-radius:var(--r); background:var(--bg3); border:1px solid var(--bd); color:var(--tx2); font:600 12px/1 var(--font-sans); cursor:pointer; transition:all .15s; text-decoration:none; } body .top-back:hover, body .tb-back:hover, body .topbar-back:hover { border-color:var(--accent-bd); color:var(--tx); background:var(--bg4); box-shadow:var(--glow-a); } body .top-back:active, body .tb-back:active, body .topbar-back:active { transform:translateY(1px); } /* Avatar */ body .top-avatar, body .topbar-avatar { width:34px; height:34px; border-radius:50%; background:var(--grad-brand) !important; color:#05070d; font-weight:800; font-size:12px; display:flex; align-items:center; justify-content:center; cursor:pointer; border:2px solid transparent; box-shadow:0 2px 10px rgba(79,142,247,.3); transition:transform .2s, box-shadow .2s; flex-shrink:0; } body .top-avatar:hover, body .topbar-avatar:hover { transform:scale(1.08); box-shadow:0 4px 18px rgba(79,142,247,.5); } /* ══════════════════════════════════════════════ SIDEBAR ══════════════════════════════════════════════ */ body .shell { flex:1; display:flex; min-height:0; overflow:hidden; } body .sidebar { width:var(--sidebar-w) !important; flex-shrink:0; background: linear-gradient(180deg,rgba(13,33,73,.18),transparent 30%), rgba(22,28,44,.60) !important; backdrop-filter:blur(16px) saturate(160%) !important; -webkit-backdrop-filter:blur(16px) saturate(160%) !important; border-right:1px solid var(--glass-bd) !important; display:flex; flex-direction:column; overflow:hidden; transition:width .22s ease; animation:v2slidein .35s ease both; } :root.light body .sidebar, body.light .sidebar { background: linear-gradient(180deg,rgba(9,105,218,.04),transparent 30%), rgba(255,255,255,.88) !important; } /* Card do projeto ativo */ body .sidebar-proj { margin:14px 12px 10px; padding:14px; border-radius:var(--rl); background:var(--grad-brand-soft) !important; border:1px solid var(--glass-bd) !important; position:relative; overflow:hidden; cursor:pointer; transition:transform .15s ease, box-shadow .2s; } body .sidebar-proj:hover { transform:translateY(-2px) !important; box-shadow:0 8px 24px rgba(79,142,247,.2); } body .sidebar-proj::before { content:''; position:absolute; inset:0; background:radial-gradient(circle at 80% 0%,rgba(163,113,247,.18),transparent 60%); pointer-events:none; } body .sidebar-proj-label { font-size:9px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--tx2); margin-bottom:6px; display:flex; align-items:center; gap:6px; } body .sidebar-proj-label::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--green); box-shadow:0 0 8px var(--green); animation:v2pulse 2.5s ease-in-out infinite; } /* Grupos nav */ body .nav-group-label, body .nav-label { font-size:9px !important; color:var(--tx3); font-weight:700 !important; letter-spacing:1.4px !important; text-transform:uppercase; padding:14px 20px 6px !important; display:flex; justify-content:space-between; align-items:center; cursor:pointer; user-select:none; } body .nav-group-label .tog { font-size:10px; color:var(--tx3); transition:transform .25s cubic-bezier(.4,0,.2,1); } body .nav-group-label.collapsed .tog { transform:rotate(-90deg); } body .nav-group { max-height:1000px; overflow:hidden; transition:max-height .3s cubic-bezier(.4,0,.2,1); } body .nav-group.collapsed { max-height:0; } /* Item de navegação */ body .nav { position:relative; margin:2px 10px; padding:8px 12px; border-radius:var(--r); cursor:pointer; color:var(--tx2); font-size:13px; font-weight:500; display:flex; align-items:center; gap:10px; transition:background .15s, color .15s, transform .1s; border:1px solid transparent; text-decoration:none; } body .nav .ni { width:18px; height:18px; display:flex; align-items:center; justify-content:center; font-size:14px; flex-shrink:0; color:var(--tx2); transition:color .15s, transform .2s; } body .nav:hover { background:rgba(255,255,255,.05) !important; color:var(--tx) !important; } body .nav:hover .ni { color:var(--tx) !important; transform:scale(1.1); } body .nav:active { transform:scale(.97); } /* Item ativo — glow neon v2 */ body .nav.on { color:var(--tx) !important; font-weight:600 !important; background:linear-gradient(90deg,var(--accent-soft),transparent 80%) !important; border-color:var(--accent-bd) !important; box-shadow:none !important; } body .nav.on::before { content:'' !important; position:absolute !important; left:-10px !important; top:6px !important; bottom:6px !important; width:3px !important; border-radius:3px !important; background:var(--grad-brand) !important; box-shadow:0 0 12px rgba(88,166,255,.7) !important; } body .nav.on .ni { color:var(--a2) !important; } body .nav-badge { margin-left:auto; font-size:9px; background:var(--bg4); color:var(--tx2); border:1px solid var(--bd); padding:1px 6px; border-radius:999px; font-weight:600; letter-spacing:.3px; animation:v2scalein .3s ease both; } body .nav-badge.new { background:var(--accent-soft); color:var(--a2); border-color:var(--accent-bd); animation:v2pulse 2s ease-in-out infinite; } body .nav-soon { opacity:.45; cursor:not-allowed; } /* Status strip */ body .sidebar-status { margin:auto 12px 14px; padding:10px 12px; border-radius:var(--r); background:var(--bg3); border:1px solid var(--bd); font-size:11px; color:var(--tx2); display:flex; flex-direction:column; gap:4px; } body .sidebar-status .row { display:flex; align-items:center; justify-content:space-between; gap:6px; } body .sidebar-status .row span:first-child { color:var(--tx2); } body .sidebar-status .row strong { color:var(--tx); font-weight:600; } body .sidebar-status .dot, body .sidebar-status .sdot { width:6px; height:6px; border-radius:50%; background:var(--green); box-shadow:0 0 8px var(--green); display:inline-block; margin-right:6px; animation:v2pulse 2.5s ease-in-out infinite; } /* ══════════════════════════════════════════════ PAGE CONTAINER ══════════════════════════════════════════════ */ body .page { flex:1; overflow-y:auto; padding:28px 32px 48px; } body .page-head { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:22px; gap:20px; flex-wrap:wrap; animation:v2fadein .35s ease both; } body .page-eyebrow { font-size:11px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; color:var(--tx2); margin-bottom:6px; } body .page-title { font-size:26px; font-weight:800; letter-spacing:-.4px; color:var(--tx); line-height:1.2; } body .page-subtitle { font-size:14px; color:var(--tx2); margin-top:4px; } /* Fade-in escalonado para elementos da página */ body .page > * { animation:v2fadein .35s ease both; } body .page > *:nth-child(1) { animation-delay:.04s; } body .page > *:nth-child(2) { animation-delay:.08s; } body .page > *:nth-child(3) { animation-delay:.12s; } body .page > *:nth-child(4) { animation-delay:.16s; } body .page > *:nth-child(5) { animation-delay:.20s; } body .page > *:nth-child(6) { animation-delay:.24s; } /* ══════════════════════════════════════════════ CARDS ══════════════════════════════════════════════ */ body .card, body .hcard { background:rgba(12,16,28,.40) !important; backdrop-filter:blur(18px) saturate(180%) !important; -webkit-backdrop-filter:blur(18px) saturate(180%) !important; border:1px solid rgba(255,255,255,.10) !important; border-radius:14px !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 8px 28px rgba(0,0,0,.5) !important; padding:20px 22px !important; transition:border-color .2s, box-shadow .2s, transform .2s !important; } body .card:hover { border-color:rgba(79,142,247,.28) !important; transform:translateY(-2px) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 12px 32px rgba(0,0,0,.5) !important; } :root.light body .card, body.light .card, :root.light body .hcard, body.light .hcard { background:rgba(255,255,255,.82) !important; border:1px solid rgba(12,20,36,.08) !important; box-shadow:0 1px 2px rgba(10,20,40,.04),0 4px 16px rgba(10,20,40,.06) !important; } :root.light body .card:hover, body.light .card:hover { box-shadow:0 8px 28px rgba(10,20,40,.12) !important; } body .card-title { font-size:11px !important; font-weight:700 !important; letter-spacing:.7px; text-transform:uppercase; color:var(--tx2) !important; margin-bottom:14px !important; display:flex; align-items:center; gap:8px; } body .card-title .dot { width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 8px var(--accent); animation:v2glowpulse 2.5s ease-in-out infinite; } /* ══════════════════════════════════════════════ STAT CARDS — kstat, stat-* ══════════════════════════════════════════════ */ body .stat, body .kstat, body .stat-card { position:relative; overflow:hidden; background:rgba(12,16,28,.38) !important; backdrop-filter:blur(18px) saturate(180%) !important; -webkit-backdrop-filter:blur(18px) saturate(180%) !important; border:1px solid rgba(255,255,255,.10) !important; border-radius:14px !important; padding:18px 20px; box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 8px 28px rgba(0,0,0,.5) !important; transition:border-color .2s, transform .2s, box-shadow .2s !important; animation:v2fadein .45s ease both; } body .stat.clickable:hover, body .kstat.clickable:hover, body .stat-card:hover { border-color:rgba(79,142,247,.35) !important; transform:translateY(-3px) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 16px 44px rgba(0,0,0,.55) !important; } /* Halo de cor por tipo — maior e mais vibrante */ body .stat::after, body .kstat::after { content:''; position:absolute; top:-50px; right:-50px; width:200px; height:200px; border-radius:50%; opacity:.25; pointer-events:none; filter:blur(40px); transition:opacity .3s; } body .stat.clickable:hover::after, body .kstat.clickable:hover::after { opacity:.42; } body .stat-blue::after, body .kstat-blue::after { background:var(--blue); } body .stat-green::after, body .kstat-green::after { background:var(--green); } body .stat-amber::after, body .kstat-amber::after { background:var(--amber); } body .stat-purple::after, body .kstat-purple::after { background:var(--purple); } body .stat-teal::after, body .kstat-teal::after { background:var(--teal); } body .stat-red::after, body .kstat-red::after { background:var(--red); } /* Valores das stats — animação de entrada */ body .stat-val, body .kstat-val, body .s-val { font-size:28px; font-weight:800; color:var(--tx); letter-spacing:-.6px; line-height:1; margin-bottom:4px; font-variant-numeric:tabular-nums; animation:v2countup .4s ease both; } body .stat-lbl, body .kstat-lbl, body .s-lbl { font-size:11px; font-weight:600; color:var(--tx2); text-transform:uppercase; letter-spacing:.5px; } body .stat-sub, body .kstat-sub, body .s-sub { font-size:11px; color:var(--tx3); margin-top:4px; } /* Ícone das stats */ body .stat-ico, body .kstat-ico, body .s-icon { width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:15px; border:1px solid var(--glass-bd); transition:transform .2s, box-shadow .2s; } body .stat:hover .stat-ico, body .kstat.clickable:hover .kstat-ico { transform:scale(1.1) rotate(-5deg); } body .stat-trend, body .kstat-trend { font-size:11px; font-weight:700; padding:3px 8px; border-radius:999px; display:inline-flex; align-items:center; gap:3px; animation:v2scalein .3s ease both; } body .stat-trend.up, body .kstat-trend.up { background:var(--green-bg); color:var(--green); } body .stat-trend.down, body .kstat-trend.down { background:var(--red-bg); color:var(--red); } body .stat-trend.flat, body .kstat-trend.flat { background:var(--bg4); color:var(--tx2); } /* ══════════════════════════════════════════════ BOTÕES ══════════════════════════════════════════════ */ body .btn { padding:9px 18px; border-radius:var(--r); border:1px solid var(--bd); font-size:13px; font-weight:600; cursor:pointer; transition:transform .1s, box-shadow .2s, border-color .15s, background .15s, opacity .15s; display:inline-flex; align-items:center; gap:8px; font-family:inherit; color:var(--tx); background:var(--bg3); letter-spacing:-.1px; position:relative; overflow:hidden; } body .btn:hover { border-color:var(--bd2); background:var(--bg4); transform:translateY(-1px); } body .btn:active { transform:translateY(1px) !important; opacity:.9; } body .btn:disabled { opacity:.4; cursor:not-allowed; transform:none !important; } /* Botão primário com shine */ body .btn-primary, body .btn-p, body [class*="btn-primary"] { color:#fff !important; border-color:transparent !important; background:linear-gradient(135deg,#1f6feb 0%,#4f8ef7 55%,#6e40c9 100%) !important; box-shadow:0 4px 14px rgba(79,142,247,.35),inset 0 1px 0 rgba(255,255,255,.2) !important; } body .btn-primary::after, body .btn-p::after { content:''; position:absolute; top:-50%; left:0; width:40%; height:200%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent); transform:translateX(-100%) skewX(-15deg); transition:none; } body .btn-primary:hover, body .btn-p:hover { box-shadow:0 6px 22px rgba(79,142,247,.55),inset 0 1px 0 rgba(255,255,255,.3) !important; transform:translateY(-2px) !important; } body .btn-primary:hover::after, body .btn-p:hover::after { animation:v2shine .6s ease forwards; } body .btn-success { background:linear-gradient(135deg,var(--green-bd),#1a7f37) !important; color:#fff !important; border-color:transparent !important; } body .btn-success:hover { box-shadow:0 4px 14px rgba(35,134,54,.4) !important; } body .btn-danger { background:linear-gradient(135deg,var(--red-bd),#a7272b) !important; color:#fff !important; border-color:transparent !important; } body .btn-ghost { background:transparent; border-color:var(--bd); color:var(--tx2); } body .btn-ghost:hover { color:var(--tx); background:var(--bg3); } body .btn-sm { padding:6px 12px; font-size:12px; border-radius:8px; } /* Spinner */ .spin, body .spin { width:13px; height:13px; border:2px solid rgba(255,255,255,.25); border-top-color:#fff; border-radius:50%; animation:v2spin .7s linear infinite; display:inline-block; } /* ══════════════════════════════════════════════ CHIPS / BADGES ══════════════════════════════════════════════ */ body .chip { display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:600; padding:3px 10px; border-radius:999px; border:1px solid; letter-spacing:.2px; animation:v2scalein .3s ease both; } body .badge { border-radius:20px !important; } body .chip-blue { background:var(--blue-bg); color:var(--blue); border-color:var(--blue-bd); } body .chip-green { background:var(--green-bg); color:var(--green); border-color:var(--green-bd); } body .chip-amber { background:var(--amber-bg); color:var(--amber); border-color:var(--amber-bd); } body .chip-red { background:var(--red-bg); color:var(--red); border-color:var(--red-bd); } body .chip-purple { background:var(--purple-bg); color:var(--purple); border-color:var(--purple-bd); } body .chip-teal { background:var(--teal-bg); color:var(--teal); border-color:var(--teal-bd); } body .chip-mute { background:var(--bg4); color:var(--tx2); border-color:var(--bd); } body .chip .pulse { width:6px; height:6px; border-radius:50%; background:currentColor; box-shadow:0 0 6px currentColor; animation:v2pulse 1.8s ease-in-out infinite; } /* ══════════════════════════════════════════════ MÓDULOS (.mod) — hover com gradiente e elevação ══════════════════════════════════════════════ */ body .mod { background:rgba(22,28,44,.55) !important; backdrop-filter:blur(12px) !important; -webkit-backdrop-filter:blur(12px) !important; border:1px solid rgba(255,255,255,.08) !important; border-radius:14px !important; transition:transform .2s cubic-bezier(.4,0,.2,1), border-color .15s, box-shadow .2s !important; overflow:hidden !important; position:relative !important; } body .mod::before { content:'' !important; position:absolute !important; inset:0 !important; opacity:0 !important; transition:opacity .25s !important; background:var(--grad-brand-soft) !important; pointer-events:none !important; } body .mod:hover { transform:translateY(-4px) !important; border-color:var(--accent-bd) !important; box-shadow:0 18px 44px rgba(0,0,0,.45) !important; } body .mod:hover::before { opacity:.7 !important; } body .mod-arrow { transition:transform .15s, opacity .15s; opacity:.5; } body .mod:hover .mod-arrow { transform:translateX(4px) !important; opacity:1; } body .mod-ico { transition:transform .2s; } body .mod:hover .mod-ico { transform:scale(1.08) rotate(-4deg); } /* ══════════════════════════════════════════════ HERO / BANNER ══════════════════════════════════════════════ */ body .hero { background:rgba(22,28,44,.55) !important; backdrop-filter:blur(14px) !important; -webkit-backdrop-filter:blur(14px) !important; border:1px solid rgba(255,255,255,.08) !important; border-radius:14px !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 6px 20px rgba(0,0,0,.45) !important; animation:v2fadein .4s ease both; } /* ══════════════════════════════════════════════ INPUTS ══════════════════════════════════════════════ */ body input, body select, body textarea, body .field input, body .field select, body .field textarea { background:var(--bg3) !important; border:1px solid var(--bd) !important; border-radius:var(--r) !important; color:var(--tx) !important; font:inherit; font-size:13px; min-height:34px; padding:8px 12px; outline:none; transition:border-color .15s, box-shadow .2s, background .15s; font-family:inherit; } body input:focus, body select:focus, body textarea:focus, body .field input:focus, body .field select:focus, body .field textarea:focus { border-color:var(--accent) !important; background:var(--bg2) !important; box-shadow:var(--glow-a) !important; outline:none !important; } body .field label { display:block; font-size:11px; font-weight:600; color:var(--tx2); margin-bottom:6px; text-transform:uppercase; letter-spacing:.5px; } /* ══════════════════════════════════════════════ PROGRESS BAR — gradiente + shimmer ══════════════════════════════════════════════ */ body .pbar { height:8px; background:var(--bg4); border-radius:999px; overflow:hidden; position:relative; } body .pbar-fill, body [class*="progress-fill"], body [class*="prog-fill"], body [class*="pbar-fill"] { height:100%; background:var(--grad-brand) !important; border-radius:999px; transition:width .7s cubic-bezier(.4,0,.2,1); position:relative; } body .pbar-fill::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent); animation:v2shimmer 2.2s linear infinite; } /* ══════════════════════════════════════════════ TABELAS ══════════════════════════════════════════════ */ body table { border-collapse:collapse; } body table thead th { background:var(--bg3); border-bottom:1px solid var(--bd) !important; color:var(--tx3) !important; font-size:10px !important; letter-spacing:.7px !important; text-transform:uppercase !important; } body table tbody td { border-bottom:1px solid rgba(127,127,127,.18); } body table tbody tr { transition:background .12s; } body table tbody tr:hover td { background:rgba(79,142,247,.06); } /* ══════════════════════════════════════════════ SIDEBAR PROJECT CARD ══════════════════════════════════════════════ */ body .sidebar-proj { background:var(--grad-brand-soft) !important; border:1px solid rgba(255,255,255,.08) !important; } /* ══════════════════════════════════════════════ FONT BASE ══════════════════════════════════════════════ */ body { font-family:var(--font-sans) !important; } /* ══════════════════════════════════════════════ DSTAT — classes reais do bots.html dashboard ══════════════════════════════════════════════ */ body .dstat { background:rgba(22,28,44,.55) !important; backdrop-filter:blur(14px) saturate(140%) !important; -webkit-backdrop-filter:blur(14px) saturate(140%) !important; border:1px solid rgba(255,255,255,.08) !important; border-radius:14px !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 6px 20px rgba(0,0,0,.45) !important; transition:border-color .2s, transform .2s, box-shadow .2s !important; position:relative !important; overflow:hidden !important; animation:v2fadein .4s ease both; } body .dstat:nth-child(1) { animation-delay:.05s; } body .dstat:nth-child(2) { animation-delay:.10s; } body .dstat:nth-child(3) { animation-delay:.15s; } body .dstat:nth-child(4) { animation-delay:.20s; } body .dstat:hover { border-color:rgba(79,142,247,.32) !important; transform:translateY(-3px) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 14px 36px rgba(0,0,0,.5) !important; } /* Halo colorido grande no canto */ body .dstat::after { content:'' !important; position:absolute !important; top:-40px !important; right:-40px !important; width:160px !important; height:160px !important; border-radius:50% !important; opacity:.15 !important; pointer-events:none !important; filter:blur(30px) !important; transition:opacity .3s !important; } body .dstat:hover::after { opacity:.28 !important; } body .dstat-blue::after { background:var(--blue) !important; } body .dstat-green::after { background:var(--green) !important; } body .dstat-purple::after { background:var(--purple) !important; } body .dstat-amber::after { background:var(--amber) !important; } body .dstat-teal::after { background:var(--teal) !important; } body .dstat-red::after { background:var(--red) !important; } /* Ícone dstat */ body .dstat-ico { width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:18px; transition:transform .2s, box-shadow .2s; } body .dstat:hover .dstat-ico { transform:scale(1.1) rotate(-5deg); } body .dstat-blue .dstat-ico { background:rgba(88,166,255,.14) !important; } body .dstat-green .dstat-ico { background:rgba(63,185,80,.14) !important; } body .dstat-purple .dstat-ico { background:rgba(163,113,247,.14) !important; } body .dstat-amber .dstat-ico { background:rgba(210,153,34,.14) !important; } body .dstat-teal .dstat-ico { background:rgba(45,212,191,.14) !important; } /* Valores dstat */ body .dstat-val { font-size:26px !important; font-weight:800 !important; color:var(--tx) !important; letter-spacing:-1px !important; line-height:1 !important; margin-bottom:4px !important; font-variant-numeric:tabular-nums; animation:v2countup .5s ease both; } body .dstat-lbl { font-size:11px !important; font-weight:600 !important; color:var(--tx2) !important; text-transform:uppercase !important; letter-spacing:.5px !important; } body .dstat-sub { font-size:11px !important; color:var(--tx3) !important; margin-top:4px !important; } /* ══════════════════════════════════════════════ HCARD — cards de módulo/navegação ══════════════════════════════════════════════ */ body .hcard { background:rgba(22,28,44,.55) !important; backdrop-filter:blur(14px) saturate(140%) !important; -webkit-backdrop-filter:blur(14px) saturate(140%) !important; border:1px solid rgba(255,255,255,.08) !important; border-radius:var(--rl) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 4px 14px rgba(0,0,0,.4) !important; transition:transform .2s, border-color .2s, box-shadow .2s !important; animation:v2fadein .4s ease both; } body .hcard:hover { border-color:rgba(79,142,247,.28) !important; transform:translateY(-3px) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 12px 32px rgba(0,0,0,.5) !important; } /* ══════════════════════════════════════════════ NAV ATIVO — neon glow no item selecionado ══════════════════════════════════════════════ */ body .nav.on { color:var(--tx) !important; font-weight:600 !important; background:linear-gradient(90deg,rgba(79,142,247,.14),transparent 80%) !important; border-color:rgba(79,142,247,.32) !important; } body .nav.on::before { content:'' !important; position:absolute !important; left:-10px !important; top:6px !important; bottom:6px !important; width:3px !important; border-radius:3px !important; background:var(--grad-brand) !important; box-shadow:0 0 12px rgba(88,166,255,.7) !important; } body .nav.on .ni { color:var(--a2) !important; } /* ══════════════════════════════════════════════ RESPONSIVO ══════════════════════════════════════════════ */ @media (max-width:900px) { body .sidebar { display:none; } body .page { padding:18px 16px 40px; } body .top-search, body .topbar-search { min-width:140px; } body .page-title { font-size:22px; } body .kpi-grid, body .kpi-row { grid-template-columns:repeat(2,1fr) !important; } }