@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500&family=Space+Grotesk:wght@500;600;700&family=Urbanist:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&display=swap'); /* Tokens de design: cores, raios e sombras reutilizados por todos os componentes abaixo */ :root{ --bg:#f7f7f6;--card:#ffffff;--muted:#68686a;--accent:#F6BE00;--accent-ink:#1a1a1a;--text:#17171a; --border:#e5e5e3;--border-strong:#d3d3d0;--surface-muted:#f7f7f5;--accent-weak:rgba(246,190,0,.16);--text-faint:#9a9a98; --white:#ffffff;--accent-hover:#d9a600;--on-accent:#1a1a1a;--selection-text:#000000; --danger:#dc2626;--danger-bg:#fef2f2;--danger-bg-strong:#fee2e2;--danger-border:#fecaca; --success:#16a34a;--success-bg:#f0fdf4;--success-border:#bbf7d0; --backdrop:rgba(15,15,13,.5); --radius-sm:8px;--radius-md:12px;--radius-lg:16px; --shadow-sm:0 1px 2px rgba(15,15,13,.06);--shadow-md:0 6px 16px rgba(15,15,13,.08);--shadow-lg:0 20px 40px rgba(15,15,13,.16); --event-shadow:0 1px 3px rgba(15,15,13,.10),0 1px 2px rgba(15,15,13,.06);--event-shadow-hover:0 10px 22px rgba(15,15,13,.14),0 2px 6px rgba(15,15,13,.08); --font-display:'Space Grotesk',Segoe UI,Arial,sans-serif; --font-body:'Plus Jakarta Sans',Segoe UI,Arial,sans-serif; --font-ui:'Urbanist',Segoe UI,Arial,sans-serif; --base-font-family:var(--font-body); /* altura padrão compartilhada por inputs de texto/data/número, selects, o seletor de cor e botões (tamanho normal) — garante que fiquem alinhados quando aparecem lado a lado, como em "Nova rede" (campo + cor + Adicionar) */ --control-h:38px; } /* Modo escuro: os mesmos tokens, com os fundos claros trocados por tons de preto/cinza e o roxo de acento trocado por amarelo (base #F6BE00). Ativado via [data-theme="dark"] na tag , alternado pelo botão de tema e persistido pelo JS. */ :root[data-theme="dark"]{ --bg:#121214;--card:#1c1d22;--muted:#9aa1ac;--accent:#F6BE00;--accent-ink:#F6BE00;--text:#f1f2f4; --border:#2c2d33;--border-strong:#3d3e46;--surface-muted:#202126;--accent-weak:rgba(246,190,0,.16);--text-faint:#6b7280; --accent-hover:#d9a600;--on-accent:#1a1a1a; --danger:#f87171;--danger-bg:#3a1518;--danger-bg-strong:#4a1a1e;--danger-border:#5c2328; --success:#4ade80;--success-bg:#142a1c;--success-border:#1f4b2c; --backdrop:rgba(0,0,0,.65); --shadow-sm:0 1px 2px rgba(0,0,0,.25);--shadow-md:0 6px 16px rgba(0,0,0,.35);--shadow-lg:0 20px 40px rgba(0,0,0,.5); --event-shadow:0 1px 3px rgba(0,0,0,.35),0 1px 2px rgba(0,0,0,.25);--event-shadow-hover:0 10px 24px rgba(0,0,0,.5),0 2px 6px rgba(0,0,0,.35); } /* Reset global e layout base da página */ *{box-sizing:border-box} ::selection{background:var(--accent);color:var(--selection-text)} body{font-family:var(--base-font-family);background:var(--bg);margin:0;padding:0;color:var(--text);-webkit-font-smoothing:antialiased;transition:background .2s,color .2s} button,input,select,textarea,option{font-family:var(--font-ui)} .container{max-width:1900px;margin:0 auto} /* Brilho de fundo que acompanha o mouse (Início e Login) — canvas inserido via mouse-light.js como 1º filho do body, substitui o gradiente radial estático de .auth-page::before/.home-body::before (que continua servindo de fallback em telas sem mouse ou com "reduzir movimento" ativado). Desenho (rastro de blobs desbotando) é feito em JS a cada frame; aqui só o posicionamento/tamanho do canvas. */ .mouse-light-canvas{position:fixed;inset:0;pointer-events:none} /* Shell do portal: sidebar fixa à esquerda (menu de ferramentas + seletor de marca, montados por portal-shell.js) + área de conteúdo da ferramenta atual à direita. O padding:28px que antes vivia no body agora é do .portal-main, pra sidebar ficar encostada nas bordas da janela. */ .portal-shell{display:flex;align-items:stretch;min-height:100vh} .portal-sidebar{width:236px;flex-shrink:0;background:var(--card);border-right:1px solid var(--border);display:flex;flex-direction:column;gap:18px;padding:18px 14px;position:sticky;top:0;height:100vh;overflow-y:auto;transition:width .2s ease,padding .2s ease} .portal-main{flex:1;min-width:0;padding:28px} .portal-topbar{display:flex;align-items:center;justify-content:space-between;gap:8px} .portal-logo{display:flex;align-items:center;gap:8px;padding:0 4px;font-weight:900;font-size:15px;color:var(--text);letter-spacing:-.01em;min-width:0} .portal-logo-mark{width:26px;height:26px;border-radius:8px;background:var(--accent);color:var(--on-accent);display:flex;align-items:center;justify-content:center;font-weight:900;font-size:13px;flex-shrink:0} /* Navegação entre ferramentas do portal — mesma linguagem visual de .settings-nav-btn (usado no menu lateral de Configurações), só que como links em vez de