/*
 * Mendes Hub: base do layout (reset, tipografia, cabeçalho no topo, seletor de idioma, movimento).
 * Regras copiadas do bloco <helmet><style> comum das telas e de design-source/hub.css.
 * Só usa tokens de tokens.css para cor, sombra, raio e fonte.
 */

/* hub.css:2-3 */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--color-bg);overflow-x:hidden}

/* <helmet> comum: links e transições */
a{color:inherit;text-decoration:none}
a:hover{color:var(--color-text-strong)}
a{transition:color .15s}
button{transition:box-shadow .15s}

/* Títulos: Bricolage Grotesque; h1 com degradê do branco para o verde */
h1,h2{font-family:var(--font-display)}
h1{font-weight:800;letter-spacing:-0.02em;background:var(--gradient-title);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}

/* Fundo da página: grade de 44px + brilhos verdes (div raiz de cada tela) */
.app{min-height:100vh;box-sizing:border-box;background:var(--gradient-page);color:var(--color-text);font-family:var(--font-sans);display:flex;flex-direction:column}

/* Cabeçalho no topo (PDF p. 1). O trilho lateral de hub.css (>=1100px) NÃO é usado. */
.topbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding:18px clamp(16px, 3vw, 40px);border-bottom:1px solid var(--color-divider);background:var(--color-bg-header);box-shadow:var(--shadow-header)}
.topbar__logo{display:flex;align-items:center;gap:12px;color:inherit;text-decoration:none}  /* <a> no logo: vai ao Dashboard */
.topbar__mark{width:28px;height:28px;box-sizing:border-box;border-radius:var(--radius-icon);background:var(--gradient-logo);border:1px solid var(--color-border-strong);box-shadow:var(--shadow-logo);display:flex;align-items:center;justify-content:center}
.topbar__dot{width:10px;height:10px;border-radius:50%;background:var(--color-accent);box-shadow:var(--shadow-glow)}
.topbar__brand{font-size:16px;font-weight:700;letter-spacing:0.01em}
/* margin-right:auto: menu logo depois do logo, como na p. 1 do PDF (com 14 módulos o menu enchia a linha;
   com 2, o space-between do design o centralizaria). Decisão do controlador na revisão da Task 2. */
.topbar__nav{display:flex;flex-wrap:wrap;gap:4px;font-size:14px;font-weight:600;margin-right:auto}
.topbar__link{padding:8px 9px;border-radius:var(--radius-nav);color:var(--color-text-muted)}
.topbar__link[aria-current="page"]{border-radius:var(--radius-icon);background:var(--gradient-nav-active);box-shadow:var(--shadow-nav-active);color:var(--color-text)}
.topbar__link--badge{display:inline-flex;align-items:center;gap:6px}
.topbar__actions{display:flex;align-items:center;gap:12px}

/* Seletor de idioma: visual de #hub-lang (hub.css:6-12), sem position:fixed porque fica no topo */
.lang-switch{display:flex;gap:6px;padding:4px;border-radius:var(--radius-button-lg);background:var(--color-lang-bg);border:1px solid var(--color-border-strong);box-shadow:var(--shadow-lang)}
.lang-switch button,.theme-toggle{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;height:34px;padding:0 10px;border-radius:var(--radius-icon);border:1px solid transparent;background:transparent;color:var(--color-text-muted);font:700 12px var(--font-sans);letter-spacing:.04em;cursor:pointer;transition:background .2s,color .2s,border-color .2s,transform .15s}
.lang-switch button:hover,.theme-toggle:hover{color:var(--color-text)}
.lang-switch button:active,.theme-toggle:active{transform:scale(.97)}
.lang-switch button[aria-pressed="true"]{background:var(--color-accent-tint-lang);border-color:var(--color-accent);color:var(--color-text)}
.lang-switch .fl{display:flex;line-height:0}
.lang-switch .fl svg{display:block;width:24px;height:17px;border-radius:var(--radius-flag)}

/* Botão de tema: não existe no design; mesmo visual de um botão do seletor de idioma, dentro de uma caixa igual */
.theme-toggle{flex:none;width:44px;padding:0}
.theme-toggle__box{display:flex;padding:4px;border-radius:var(--radius-button-lg);background:var(--color-lang-bg);border:1px solid var(--color-border-strong);box-shadow:var(--shadow-lang)}
.theme-toggle svg{display:block}
[data-theme="dark"] .theme-toggle__sun,[data-theme="light"] .theme-toggle__moon{display:none}

/* Área de conteúdo (<main> de cada tela) */
.page{width:100%;max-width:2400px;box-sizing:border-box;margin:0 auto;padding:32px clamp(16px, 3vw, 56px) 56px;display:flex;flex-direction:column;gap:28px}

/* Telas de conta (login, recuperação de senha, bloqueio): ui/auth_base.html.
   Não existem no design: layout derivado, só com tokens e medidas do design
   (card padded, gap de campos 16px de NewProject.dc.html:69-78, parágrafo 15px/1.5 de Main.dc.html:70). */
.auth{flex:1;display:flex;align-items:center;justify-content:center;padding:56px clamp(16px, 3vw, 40px)}
.auth__panel{width:100%;max-width:420px;display:flex;flex-direction:column;gap:24px}
.auth__logo{justify-content:center}
.auth__form{display:flex;flex-direction:column;gap:16px}
.auth__text{margin:0;font-size:15px;line-height:1.5;color:var(--color-text-muted)}
.auth__aside{margin:0;font-size:13px;text-align:center;color:var(--color-text-muted)}
.auth__aside a{color:var(--color-text-soft)}
/* Páginas dos termos (accounts/legal/page.html; 2026-10-29, Design System.md §7, L1): o mesmo
   layout, mais largo e alinhado em cima; o texto em parágrafos de 15px/1.6 (como .auth__text). */
.auth--top{align-items:flex-start}
.auth__panel--wide{max-width:760px}
.legal-nav{justify-content:center}
.legal{display:flex;flex-direction:column;gap:12px;font-size:15px;line-height:1.6;color:var(--color-text-muted)}
.legal h2{margin:16px 0 0;font-size:16px;line-height:1.4;font-weight:600;color:var(--color-text)}
.legal p,.legal ul{margin:0}
.legal ul{padding-left:20px;display:flex;flex-direction:column;gap:6px}
.legal a,.legal-links a{color:var(--color-text-soft)}
.legal strong{color:var(--color-text)}
.legal-links{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px;font-size:15px;line-height:1.5}

/* Formulários do cabeçalho (bandeiras, tema): o <form> ocupa a largura do botão e não muda o alinhamento */
.lang-switch__form,.theme-toggle__box form{display:flex;flex:1;margin:0}
.theme-toggle__box form{flex:none}

/* Menu do usuário (nome à direita; Settings, Workspace, Log out). Derivado: não existe no design.
   Medidas de botão e cartão do Design System; largura mínima e posição são deste menu. */
.user-menu{position:relative}
.card.user-menu__panel{position:absolute;right:0;top:calc(100% + 8px);z-index:20;display:flex;flex-direction:column;gap:2px;width:340px;max-height:calc(100vh - 96px);overflow-y:auto;padding:8px;box-sizing:border-box}
.user-menu__item{display:block;width:100%;box-sizing:border-box;margin:0;padding:10px 12px;border:0;border-radius:var(--radius-icon);background:transparent;color:var(--color-text-muted);font-family:var(--font-sans);font-size:14px;font-weight:600;text-align:left;text-decoration:none;cursor:pointer}
.user-menu__item:hover,.user-menu__item:focus-visible{color:var(--color-text);background:var(--color-accent-tint-lang);outline:none}
.user-menu__logout{display:flex;margin:0}
/* Bandeiras e tema dentro do menu do usuário (logado): o cabeçalho fica numa linha a 1280 px em
   pt-BR com Pipeline e Quotes no menu (Design System.md §19). Mesmas caixas do cabeçalho; só a
   linha e o divisor são deste menu (estimados). */
.user-menu__prefs{display:flex;align-items:center;gap:8px;padding:4px 4px 10px;margin-bottom:4px;border-bottom:1px solid var(--color-divider)}
.user-menu__prefs .lang-switch{flex:1}
[x-cloak]{display:none !important}

/* Texto utilitário */
.text-muted{color:var(--color-text-muted)}
.text-mono{font-family:var(--font-mono)}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* Foco visível pelo teclado. Botões: regra do design (Pipeline.dc.html:21, Marketing.dc.html:21).
   Links: derivado (o design não define foco em links). Campos: components.css. */
button:focus-visible{outline:none;border-color:var(--color-accent);box-shadow:var(--shadow-focus)}
a:focus-visible{outline:none;box-shadow:var(--shadow-focus)}

/* Movimento: hub.css:49-58 */
@keyframes hubIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.page > *{animation:hubIn .55s cubic-bezier(.2,.7,.2,1) both}
.page > *:nth-child(2){animation-delay:.05s}
.page > *:nth-child(3){animation-delay:.1s}
.page > *:nth-child(4){animation-delay:.15s}
.page > *:nth-child(n+5){animation-delay:.2s}
button,a{transition:background .2s,border-color .2s,color .2s,box-shadow .2s,transform .15s}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important;scroll-behavior:auto !important}
}

/* Menu do usuário e abas de Configurações (2026-11-05; Design System.md §19, MU1 a MU4). Derivado:
   o design não tem este menu; só tokens e medidas que já existem (caixa de ícone de 32 px como o
   .kpi__icon, avatar do Design System, chips das abas). Medidas novas são estimadas. */
.user-menu__trigger{gap:8px;padding:0 10px 0 4px;position:relative}
.avatar.user-menu__avatar{width:28px;height:28px;font-size:11px;border-radius:var(--radius-icon);box-shadow:none}
.avatar--photo{object-fit:cover;background:var(--color-surface-3);padding:0}
.user-menu__chevron{color:var(--color-text-muted)}
.user-menu__dot{position:absolute;top:4px;left:26px;width:8px;height:8px;border-radius:50%;background:var(--color-warning);box-shadow:0 0 0 2px var(--color-surface-2)}
.user-menu__head{display:flex;align-items:center;gap:12px;padding:10px;border-radius:var(--radius-icon);color:var(--color-text);text-decoration:none}
.user-menu__head:hover,.user-menu__head:focus-visible{background:var(--color-accent-tint-lang);outline:none}
.user-menu__who{display:flex;flex-direction:column;gap:3px;min-width:0}
.user-menu__name{font-size:15px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.user-menu__email{font-family:var(--font-mono);font-size:12px;color:var(--color-text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.user-menu__meta{display:flex;align-items:center;gap:8px;min-width:0}
.user-menu__studio{font-size:12px;color:var(--color-text-soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.user-menu__group{display:flex;flex-direction:column;gap:2px;padding-top:8px;margin-top:4px;border-top:1px solid var(--color-divider)}
.user-menu__label{padding:2px 12px 4px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--color-text-muted)}
.user-menu__item--rich{display:flex;align-items:center;gap:12px;padding:8px 10px}
.user-menu__icon{width:32px;height:32px;flex:none;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-icon);background:var(--color-surface-3);box-shadow:inset 0 0 0 1px var(--color-border-strong);color:var(--color-text-soft)}
.user-menu__text{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.user-menu__title{color:var(--color-text);font-size:14px;font-weight:600}
.user-menu__sub{font-size:12px;font-weight:500;color:var(--color-text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.user-menu__panel .user-menu__prefs{margin:4px 0 0;padding:10px 4px;border-top:1px solid var(--color-divider)}
.user-menu__item--danger:hover,.user-menu__item--danger:focus-visible{color:var(--color-danger-text);background:var(--color-danger-tint)}
.settings-photo{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.settings-photo__actions{display:flex;flex-direction:column;gap:8px}
.settings-photo__buttons{display:flex;gap:8px;flex-wrap:wrap}
.settings-photo label.btn{cursor:pointer}
.settings-photo label.btn:has(input:focus-visible){box-shadow:var(--shadow-focus)}
/* Editor de zoom e posição da foto (aba Profile, 2026-11-07; Alpine photoCrop): o quadro de corte
   com o lado de fora escurecido (--color-bg-header, translúcido nos dois temas) e as miniaturas. */
.photo-crop{display:grid;grid-template-columns:auto minmax(0,1fr);gap:22px;align-items:start;margin-top:14px;padding:18px;border:1px solid var(--color-border);border-radius:var(--radius-control);background:var(--color-surface-2)}
.photo-crop[hidden]{display:none}
.photo-crop__stage{position:relative;width:280px;max-width:100%;aspect-ratio:1;border-radius:var(--radius-control);overflow:hidden;background:var(--color-surface);cursor:grab;touch-action:none;user-select:none}
.photo-crop__stage:focus-visible{outline:none;box-shadow:var(--shadow-focus)}
.photo-crop__stage--dragging{cursor:grabbing}
.photo-crop__view{position:absolute;inset:0;width:100%;height:100%;display:block}
.photo-crop__frame{position:absolute;inset:8%;border-radius:var(--radius-avatar-lg);border:2px solid var(--color-accent);box-shadow:0 0 0 999px var(--color-bg-header);pointer-events:none}
.photo-crop__side{display:grid;gap:16px;min-width:0}
.photo-crop__group{display:grid;gap:8px}
.photo-crop__zoom{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;color:var(--color-text-muted)}
.photo-crop__zoom input{width:100%;accent-color:var(--color-accent)}
.photo-crop__previews{display:flex;gap:16px;align-items:end}
.photo-crop__previews figure{margin:0;display:grid;gap:6px;justify-items:center}
.photo-crop__previews figcaption{font-size:11px;color:var(--color-text-muted)}
.photo-crop__buttons{display:flex;gap:8px;flex-wrap:wrap}
@media (max-width:640px){.photo-crop{grid-template-columns:1fr}}

/* ============================================================================================
   Menu lateral (Mendes, 2026-11-05: "aprovado, pode seguir"; mockup menu-lateral-mockup-v3.html).
   ui/nav.html (o menu, .topbar.side), ui/appbar.html (a barra do topo) e ui/side.js (recolher,
   celular). .shell.is-mini: só os ícones (cookie hub_side). Os ícones são máscaras (CSP: sem
   estilo em linha; o HTML dos links continua igual ao do menu no topo).
   ============================================================================================ */
.shell{--side-w:248px;display:grid;grid-template-columns:var(--side-w) minmax(0,1fr);min-height:100vh;transition:grid-template-columns .25s ease}
.shell.is-mini{--side-w:72px}
.shell__main{min-width:0;display:flex;flex-direction:column}
.topbar.side{position:sticky;top:0;z-index:40;height:100vh;box-sizing:border-box;display:flex;flex-direction:column;flex-wrap:nowrap;align-items:stretch;justify-content:flex-start;gap:0;padding:16px 12px;border-bottom:0;border-right:1px solid var(--color-divider);background:var(--color-surface);box-shadow:none}
.side__head{padding:2px 6px 14px;margin-bottom:6px;border-bottom:1px solid var(--color-divider)}
.side .topbar__logo{gap:10px}
.side .topbar__mark{flex:none}
.topbar__mark--logo{width:28px;height:28px;padding:3px;box-sizing:border-box;overflow:hidden}  /* logo do estúdio (2026-11-06) */
.topbar__mark--logo img{display:block;width:100%;height:100%;object-fit:contain;border-radius:calc(var(--radius-icon) - 3px)}
.side .topbar__brand{min-width:0}
.side__name{overflow:hidden;text-overflow:ellipsis}
.side .topbar__brand{display:flex;flex-direction:column;font-size:14.5px;letter-spacing:-.01em;white-space:nowrap}
.side__studio{display:block;font-size:11.5px;font-weight:500;letter-spacing:0;color:var(--color-text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side__scroll{flex:1;min-height:0;display:flex;flex-direction:column;gap:2px;padding-top:6px}
.side .topbar__nav{display:flex;flex-direction:column;flex-wrap:nowrap;gap:2px;margin:0;font-size:14px;font-weight:500}
.side__gh{height:24px;display:flex;align-items:center;padding:0 12px;margin-top:10px;font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--color-text-dim)}
.side__scroll>.side__gh:first-child{margin-top:0}
.side .topbar__link,.side__home{position:relative;display:flex;align-items:center;gap:12px;height:38px;box-sizing:border-box;padding:0 12px;border-radius:10px;background:none;box-shadow:none;color:var(--color-text-soft);font-size:14px;font-weight:500;white-space:nowrap;transition:background .15s,color .15s}
.side .topbar__link::before,.side__home::before{content:"";flex:none;width:18px;height:18px;background:currentColor;opacity:.8;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:center;mask-position:center}
.side .topbar__link:hover,.side__home:hover{background:var(--color-surface-2);color:var(--color-text)}
.side .topbar__link[aria-current="page"],.side__home[aria-current="page"]{border-radius:10px;background:var(--color-accent-tint);box-shadow:none;color:var(--color-accent-soft-text);font-weight:600}
.side .topbar__link[aria-current="page"]::before,.side__home[aria-current="page"]::before{opacity:1;background:var(--color-accent)}
.side .topbar__link[aria-current="page"]::after,.side__home[aria-current="page"]::after{content:"";position:absolute;left:-12px;top:9px;bottom:9px;width:3px;border-radius:0 3px 3px 0;background:var(--color-accent)}
.side .topbar__link--badge .badge{margin-left:auto}
.side .topbar__link:focus-visible,.side__home:focus-visible,.side__toggle:focus-visible,.side .topbar__logo:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}
.side .side__home::before{-webkit-mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><rect x='1.5' y='1.5' width='5.5' height='5.5' rx='1.5'></rect><rect x='9' y='1.5' width='5.5' height='5.5' rx='1.5'></rect><rect x='1.5' y='9' width='5.5' height='5.5' rx='1.5'></rect><rect x='9' y='9' width='5.5' height='5.5' rx='1.5'></rect></svg>");mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><rect x='1.5' y='1.5' width='5.5' height='5.5' rx='1.5'></rect><rect x='9' y='1.5' width='5.5' height='5.5' rx='1.5'></rect><rect x='1.5' y='9' width='5.5' height='5.5' rx='1.5'></rect><rect x='9' y='9' width='5.5' height='5.5' rx='1.5'></rect></svg>")}
.side .topbar__link[href="/projects/"]::before{-webkit-mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M8 1.5l6.5 3.5L8 8.5 1.5 5z'></path><path d='M1.5 8.5L8 12l6.5-3.5'></path></svg>");mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M8 1.5l6.5 3.5L8 8.5 1.5 5z'></path><path d='M1.5 8.5L8 12l6.5-3.5'></path></svg>")}
.side .topbar__link[href="/dashboard/tasks/"]::before{-webkit-mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M3 8.5l3 3 7-7'></path></svg>");mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M3 8.5l3 3 7-7'></path></svg>")}
.side .topbar__link[href="/clients/"]::before{-webkit-mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><circle cx='6' cy='5.5' r='2.8'></circle><path d='M1.5 14c0-2.5 2-4.3 4.5-4.3s4.5 1.8 4.5 4.3M11 3a2.6 2.6 0 010 5M12.5 9.8c1.3.6 2 2 2 4.2'></path></svg>");mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><circle cx='6' cy='5.5' r='2.8'></circle><path d='M1.5 14c0-2.5 2-4.3 4.5-4.3s4.5 1.8 4.5 4.3M11 3a2.6 2.6 0 010 5M12.5 9.8c1.3.6 2 2 2 4.2'></path></svg>")}
.side .topbar__link[href="/quotes/"]::before{-webkit-mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M4 1.5h6l3 3v10H4z'></path><path d='M6.5 8h4M6.5 11h4'></path></svg>");mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M4 1.5h6l3 3v10H4z'></path><path d='M6.5 8h4M6.5 11h4'></path></svg>")}
.side .topbar__link[href="/team/"]::before{-webkit-mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><circle cx='8' cy='5' r='3'></circle><path d='M2.5 14.5c0-3 2.5-5 5.5-5s5.5 2 5.5 5'></path></svg>");mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><circle cx='8' cy='5' r='3'></circle><path d='M2.5 14.5c0-3 2.5-5 5.5-5s5.5 2 5.5 5'></path></svg>")}
.side .topbar__link[href="/equipment/"]::before{-webkit-mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><rect x='1.5' y='4' width='13' height='9.5' rx='2'></rect><circle cx='8' cy='8.7' r='2.6'></circle><path d='M5.5 4l1-2h3l1 2'></path></svg>");mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><rect x='1.5' y='4' width='13' height='9.5' rx='2'></rect><circle cx='8' cy='8.7' r='2.6'></circle><path d='M5.5 4l1-2h3l1 2'></path></svg>")}
.side .topbar__link[href="/finance/"]::before{-webkit-mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M1.5 12.5V4.5L8 1.5l6.5 3v8M5 14.5v-5h6v5'></path></svg>");mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M1.5 12.5V4.5L8 1.5l6.5 3v8M5 14.5v-5h6v5'></path></svg>")}
.side .topbar__link[href^="/leads/"]::before{-webkit-mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><circle cx='8' cy='8' r='6.5'></circle><circle cx='8' cy='8' r='3'></circle></svg>");mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><circle cx='8' cy='8' r='6.5'></circle><circle cx='8' cy='8' r='3'></circle></svg>")}
.side__foot{display:flex;flex-direction:column;gap:8px;padding-top:10px;margin-top:10px;border-top:1px solid var(--color-divider)}
.side__toggle{appearance:none;position:relative;display:flex;align-items:center;gap:12px;height:36px;padding:0 12px;border:0;border-radius:10px;background:none;color:var(--color-text-muted);font:inherit;font-size:13px;cursor:pointer}
.side__toggle:hover{background:var(--color-surface-2);color:var(--color-text)}
.side__toggle svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.side__toggle kbd{margin-left:auto;font:600 11px var(--font-mono);padding:1px 6px;border-radius:5px;border:1px solid var(--color-border-strong);color:var(--color-text-dim)}
.side .user-menu{width:100%}
.side .user-menu__trigger{width:100%;height:auto;min-height:0;justify-content:flex-start;gap:10px;padding:8px;border:1px solid var(--color-border);border-radius:12px;background:var(--color-bg);box-shadow:none;text-align:left}
.side .user-menu__trigger:hover{border-color:var(--color-border-strong);background:var(--color-surface-2)}
.side .avatar.user-menu__avatar{width:32px;height:32px;font-size:12px}
.side .user-menu__first{flex:1;min-width:0;display:flex;flex-direction:column;font-size:13px;font-weight:700;color:var(--color-text)}
.side .user-menu__dot{top:6px;left:34px}
.side .card.user-menu__panel{position:fixed;left:12px;right:auto;top:auto;bottom:76px;max-height:calc(100vh - 100px);transform-origin:bottom left}
/* o menu da conta abre para cima: a seta aponta para cima e vira ao abrir */
.side .user-menu__chevron{flex:none;transform:rotate(180deg);transition:transform .2s ease}
.side .user-menu__trigger[aria-expanded="true"] .user-menu__chevron{transform:none}
.side .lang-switch{width:100%;box-sizing:border-box}
.side__shade{position:fixed;inset:0;z-index:35;background:rgba(0,0,0,.5)}
.side__shade[hidden]{display:none}
.appbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:12px;min-height:64px;box-sizing:border-box;padding:12px clamp(16px, 3vw, 40px);border-bottom:1px solid var(--color-divider);background:var(--color-bg-header);box-shadow:var(--shadow-header)}
@supports (backdrop-filter:blur(1px)){.appbar{background:color-mix(in srgb, var(--color-bg) 82%, transparent);backdrop-filter:blur(12px)}}
.appbar__menu{display:none;appearance:none;width:38px;height:38px;flex:none;align-items:center;justify-content:center;border:1px solid var(--color-border-strong);border-radius:10px;background:var(--color-surface-2);color:var(--color-text);cursor:pointer}
.appbar__menu svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.appbar__crumb{flex:1;min-width:0;font-size:13.5px;color:var(--color-text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.appbar__crumb b{color:var(--color-text);font-weight:600}
.appbar__crumb span+b::before{content:" / ";color:var(--color-text-dim);font-weight:400}
.appbar .topbar__actions{margin-left:auto}
/* recolhido: só os ícones, o nome ao passar o mouse */
.shell.is-mini .side__lbl,.shell.is-mini .side__toggle kbd{display:none}
.shell.is-mini .side__head{display:flex;justify-content:center;padding-left:0;padding-right:0}
.shell.is-mini .side__gh{height:13px;margin-top:6px;padding:0}
.shell.is-mini .side__gh::after{content:"";display:block;width:24px;height:1px;margin:0 auto;background:var(--color-divider)}
.shell.is-mini .side .topbar__link,.shell.is-mini .side__home,.shell.is-mini .side__toggle{justify-content:center;width:44px;padding:0;margin:0 auto;font-size:0}
.shell.is-mini .side .topbar__link[aria-current="page"]::after,.shell.is-mini .side__home[aria-current="page"]::after{left:-14px}
.shell.is-mini .side .topbar__link--badge .badge{position:absolute;top:3px;right:2px;margin:0}
.shell.is-mini .side__chev{transform:scaleX(-1);transform-origin:9.75px 8px}
.shell.is-mini .side .user-menu__trigger{justify-content:center;padding:6px;border-color:transparent;background:none}
.shell.is-mini .side .user-menu__chevron{display:none}
.shell.is-mini .side [data-tip]:hover::after{content:attr(data-tip);position:absolute;left:calc(100% + 14px);top:50%;bottom:auto;width:auto;transform:translateY(-50%);z-index:60;padding:6px 10px;border-radius:8px;background:var(--color-surface-3);border:1px solid var(--color-border-strong);color:var(--color-text);font-size:12.5px;font-weight:600;white-space:nowrap;box-shadow:0 8px 24px rgba(0,0,0,.4);pointer-events:none}
@media (max-width:900px){
  .shell,.shell.is-mini{grid-template-columns:minmax(0,1fr)}
  .topbar.side{position:fixed;left:0;top:0;bottom:0;width:272px;transform:translateX(-100%);transition:transform .25s ease;box-shadow:20px 0 60px rgba(0,0,0,.5)}
  .shell.is-open .topbar.side{transform:none}
  .appbar__menu{display:inline-flex}
  .side__toggle{display:none}
  .shell.is-mini .side__lbl{display:revert}
  .shell.is-mini .side .topbar__link,.shell.is-mini .side__home{justify-content:flex-start;width:auto;padding:0 12px;margin:0;font-size:14px}
  .shell.is-mini .side__gh{height:24px;margin-top:10px;padding:0 12px}
  .shell.is-mini .side__gh::after{display:none}
  .shell.is-mini .side .user-menu__trigger{justify-content:flex-start;padding:8px;border-color:var(--color-border);background:var(--color-bg)}
  .appbar .topbar__actions .btn__label{display:none}
}
@media (prefers-reduced-motion:reduce){.shell,.topbar.side{transition:none}}