/* Inter hospedada no próprio servidor (a política de segurança bloqueia o Google Fonts). Variável: 100–900. */
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url('/conseller-ui/fonts/InterVariable.woff2') format('woff2')}
/* =====================================================================
   CONSELLER — Motion & KPI layer (v1)
   Camada visual e aditiva, carregada depois do polish V8 em TODAS as páginas.
   Mesma ideia do ESSENZIELLE (cartões de KPI com barra de luz, números em destaque,
   textos que entram em sequência, fundo com brilho), no estilo Conseller: Verde Pitão
   como sinal (barra, ícone, foco), neutros do tema claro/escuro. Não altera dados/ações.
   ===================================================================== */
:root{--cm-ease:cubic-bezier(.16,1,.3,1);--cm-green:var(--accent,#16A34A);--cm-good:#22c55e;--cm-warn:var(--warn,#f59e0b);--cm-bad:var(--danger,#ef4444)}

/* ---- 1. Fundo: brilho suave de marca, numa camada fixa (não repinta ao rolar) ---- */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(900px 520px at 6% -10%,color-mix(in srgb,var(--cm-green) 10%,transparent),transparent 62%),
             radial-gradient(760px 460px at 100% -6%,color-mix(in srgb,var(--cm-green) 5%,transparent),transparent 60%),
             radial-gradient(700px 420px at 50% 120%,color-mix(in srgb,var(--cm-green) 4%,transparent),transparent 60%)}
html[data-theme="light"] body::before{background:radial-gradient(900px 520px at 6% -10%,color-mix(in srgb,var(--cm-green) 8%,transparent),transparent 62%),radial-gradient(760px 460px at 100% -6%,color-mix(in srgb,var(--cm-green) 4%,transparent),transparent 60%)}

/* ---- 2. Cartões de KPI ---- */
.kpis,.kpi-grid,.kpi-wrap{--kc:var(--cm-green)}
:is(.kpi,.kpi-box,.kpi-card,.kpis>div,.kpis>.card,.kpi-grid>div,.kpi-grid>.card):not([style*="background"]){
  position:relative!important;min-width:0;overflow:hidden;contain:layout style;
  background:linear-gradient(180deg,color-mix(in srgb,var(--kc,var(--cm-green)) 8%,var(--bg-2)),var(--bg-2) 72%)!important;
  border:1px solid color-mix(in srgb,var(--kc,var(--cm-green)) 16%,var(--border))!important;
  box-shadow:0 1px 0 rgba(255,255,255,.03) inset,0 10px 26px rgba(0,0,0,.14)!important;
  transition:transform .28s var(--cm-ease),border-color .2s ease,box-shadow .28s var(--cm-ease)!important}
html[data-theme="light"] :is(.kpi,.kpi-box,.kpi-card,.kpis>div,.kpis>.card,.kpi-grid>div,.kpi-grid>.card){
  background:linear-gradient(180deg,color-mix(in srgb,var(--kc,var(--cm-green)) 7%,#fff),#fff 72%)!important;box-shadow:0 8px 22px rgba(20,60,35,.07)!important}
/* barra de luz no topo, nasce da esquerda quando o cartão entra */
.kpi::before,.kpi-box::before,.kpi-card::before,.kpis>div::before,.kpis>.card::before,.kpi-grid>div::before,.kpi-grid>.card::before{
  content:"";position:absolute!important;inset:0 0 auto 0!important;width:auto!important;height:3px;opacity:1!important;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--kc,var(--cm-green)) 55%,#fff) 50%,transparent) -60% 0/45% 100% no-repeat,
    linear-gradient(90deg,var(--kc,var(--cm-green)),color-mix(in srgb,var(--kc,var(--cm-green)) 25%,transparent) 70%,transparent);
  box-shadow:0 0 12px color-mix(in srgb,var(--kc,var(--cm-green)) 55%,transparent);
  transform-origin:left;animation:cm-bar .9s var(--cm-ease) .1s both,cm-runner 6.5s linear 1.2s infinite}
/* brilho que atravessa o cartão ao passar o mouse */
.kpi::after,.kpi-box::after,.kpi-card::after,.kpis>div::after,.kpis>.card::after,.kpi-grid>div::after{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;opacity:0;
  background:linear-gradient(105deg,transparent 35%,color-mix(in srgb,var(--kc,var(--cm-green)) 14%,transparent) 50%,transparent 65%);transform:translateX(-60%);transition:opacity .2s ease}
@media (hover:hover) and (pointer:fine){
  :is(.kpi,.kpi-box,.kpi-card,.kpis>div,.kpis>.card,.kpi-grid>div):hover{transform:translateY(-3px)!important;border-color:color-mix(in srgb,var(--kc,var(--cm-green)) 50%,var(--border))!important;
    box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 18px 34px rgba(0,0,0,.2),0 0 0 1px color-mix(in srgb,var(--kc,var(--cm-green)) 18%,transparent)!important}
  :is(.kpi,.kpi-box,.kpi-card,.kpis>div,.kpis>.card,.kpi-grid>div):hover::after{opacity:1;transform:translateX(60%);transition:transform .9s var(--cm-ease),opacity .2s ease}
}
/* tons: verde = bom · âmbar = atenção · vermelho = problema */
:is(.kpi,.kpi-box,.kpi-card).ok,:is(.kpi,.kpi-box,.kpi-card).good,:is(.kpi,.kpi-box,.kpi-card).pos{--kc:var(--cm-good)}
:is(.kpi,.kpi-box,.kpi-card).warn,:is(.kpi,.kpi-box,.kpi-card).attention{--kc:var(--cm-warn)}
:is(.kpi,.kpi-box,.kpi-card).danger,:is(.kpi,.kpi-box,.kpi-card).crit,:is(.kpi,.kpi-box,.kpi-card).bad,:is(.kpi,.kpi-box,.kpi-card).neg{--kc:var(--cm-bad)}
:is(.kpi,.kpi-box,.kpi-card).danger .kpi-value,:is(.kpi,.kpi-box,.kpi-card).crit .kpi-value,:is(.kpi,.kpi-box,.kpi-card).bad .kpi-value{color:var(--cm-bad)!important}
:is(.kpi,.kpi-box,.kpi-card).warn .kpi-value{color:var(--cm-warn)!important}
:is(.kpi,.kpi-box,.kpi-card).ok .kpi-value,:is(.kpi,.kpi-box,.kpi-card).good .kpi-value,:is(.kpi,.kpi-box,.kpi-card).pos .kpi-value{color:var(--cm-good)!important}

/* rótulo, número e nota: mesma hierarquia em todo o sistema */
.kpi-label,.kpi-box small,.kpi-card small,.kpis>div>small,.kpi-top{display:flex!important;align-items:center;gap:9px;font-size:10.5px!important;font-weight:800!important;letter-spacing:.07em!important;text-transform:uppercase!important;line-height:1.3!important;color:var(--text-2)!important}
.kpi-top .kpi-label{display:block!important}
.kpi-label svg,.kpi-top svg{flex:none;box-sizing:border-box;
  color:var(--kc,var(--cm-green))!important;background:linear-gradient(145deg,color-mix(in srgb,var(--kc,var(--cm-green)) 22%,transparent),color-mix(in srgb,var(--kc,var(--cm-green)) 8%,transparent))!important;
  box-shadow:0 0 0 1px color-mix(in srgb,var(--kc,var(--cm-green)) 25%,transparent) inset}
.kpi-value,.kpi-val,.kpi-box b,.kpi-card b,.kpis>div>strong,.kpis>.card>strong,.kpi strong{
  display:block;margin:8px 0 0!important;font-size:clamp(22px,2.1vw,30px)!important;font-weight:800!important;line-height:1.08!important;letter-spacing:-.035em!important;
  font-variant-numeric:tabular-nums;white-space:nowrap;min-width:0;max-width:100%;overflow:hidden;color:var(--text-0)}
.kpi-sub,.kpi small:not(.kpi-label),.kpi-box>span,.kpi-card>span{display:block;margin-top:5px;font-size:11.5px;line-height:1.5;color:var(--text-2)!important;font-weight:500!important;text-transform:none!important;letter-spacing:0!important}
.kpi-delta{font-weight:800}

/* ---- 3. Textos que entram em sequência (uma vez, ao abrir a página) ---- */
@keyframes cm-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes cm-wipe{from{opacity:0;clip-path:inset(0 100% 0 0)}to{opacity:1;clip-path:inset(0 0 0 0)}}
@keyframes cm-bar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.csl-section-header-title,.page-head h1,.csl-content>h1{animation:cm-wipe .7s var(--cm-ease) .04s both;font-weight:850!important;letter-spacing:-.04em!important}
.csl-section-header-sub,.page-head p,.csl-content>h1+p{animation:cm-rise .6s var(--cm-ease) .16s both;color:var(--text-2)}
.csl-section-header-icon{animation:cm-rise .5s var(--cm-ease) both}
.kpis>*,.kpi-grid>*{animation:cm-rise .5s var(--cm-ease) both!important}
.kpis>:nth-child(2),.kpi-grid>:nth-child(2){animation-delay:.05s!important}.kpis>:nth-child(3),.kpi-grid>:nth-child(3){animation-delay:.1s!important}.kpis>:nth-child(4),.kpi-grid>:nth-child(4){animation-delay:.15s!important}
.kpis>:nth-child(5),.kpi-grid>:nth-child(5){animation-delay:.2s!important}.kpis>:nth-child(6),.kpi-grid>:nth-child(6){animation-delay:.25s!important}.kpis>:nth-child(n+7),.kpi-grid>:nth-child(n+7){animation-delay:.3s!important}
.kpi-label,.kpi-top{animation:cm-rise .55s var(--cm-ease) .12s both}
.kpi-value,.kpi-val,.kpi-box b,.kpi-card b{animation:cm-rise .6s var(--cm-ease) .2s both}
.kpi-sub{animation:cm-rise .6s var(--cm-ease) .28s both}

/* ---- 4. Cartões e painéis, títulos de seção, tabelas ---- */
[class="card"]:not([style*="background"]),[class="csl-card"]:not([style*="background"]),[class="panel"]:not([style*="background"]){background:linear-gradient(180deg,color-mix(in srgb,var(--cm-green) 3.5%,var(--bg-1)),var(--bg-1) 180px)!important;border-color:color-mix(in srgb,var(--cm-green) 9%,var(--border))!important}
html[data-theme="light"] :is([class="card"],[class="csl-card"],[class="panel"]):not([style*="background"]){background:linear-gradient(180deg,color-mix(in srgb,var(--cm-green) 4%,#fff),#fff 180px)!important}
.card>h2:first-child,.card>h3:first-child,.panel>h2:first-child,.panel>h3:first-child,.csl-card>h2:first-child,.csl-card>h3:first-child{font-weight:800;letter-spacing:-.025em}
table thead th,.table-wrap thead th{font-size:10.5px!important;font-weight:800!important;letter-spacing:.07em!important;text-transform:uppercase!important;color:var(--text-2)!important}
table tbody td{font-variant-numeric:tabular-nums}
.badge,.csl-badge,.pill{font-weight:700;letter-spacing:.01em}

/* ---- 5. Otimização: tabelas e listas longas só pintam o que aparece ---- */
.table-wrap tbody tr{content-visibility:auto;contain-intrinsic-size:auto 46px}

@media (max-width:640px){.kpi-value,.kpi-val,.kpi-box b,.kpi-card b,.kpis>div>strong{font-size:clamp(20px,6.4vw,26px)!important}}
@media (prefers-reduced-motion:reduce){
  .kpis>*,.kpi-grid>*,.kpi-label,.kpi-top,.kpi-value,.kpi-val,.kpi-box b,.kpi-card b,.kpi-sub,.csl-section-header-title,.csl-section-header-sub,.csl-section-header-icon,.page-head h1,.page-head p,.kpi::before,.kpi-box::before,.kpi-card::before,.kpis>div::before{animation:none!important}
  :is(.kpi,.kpi-box,.kpi-card,.kpis>div):hover{transform:none!important}}

/* =====================================================================
   v2 — barra de navegação, menus, cabeçalhos, filtros, tabelas, avisos, janelas
   ===================================================================== */
html{scrollbar-gutter:stable}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
::selection{background:color-mix(in srgb,var(--cm-green) 32%,transparent);color:inherit}
*{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--cm-green) 35%,var(--bg-4)) transparent}
::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--cm-green) 28%,var(--bg-4))!important;border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--cm-green) 60%,var(--bg-4))!important}

/* barra superior: item ativo em pílula com brilho; hover com fundo suave */
.csl-topnav .csl-navlink,.csl-topnav .csl-nav-group-toggle{border-radius:10px;transition:background .18s ease,color .18s ease,box-shadow .2s ease}
.csl-topnav .csl-navlink:hover,.csl-topnav .csl-nav-group-toggle:hover,.csl-topnav .csl-nav-group.csl-open>.csl-nav-group-toggle{background:color-mix(in srgb,var(--cm-green) 11%,var(--bg-3))!important;color:var(--text-0)!important}
.csl-topnav .csl-navlink.csl-active,.csl-topnav .csl-nav-group:has(.csl-subnav-link.csl-active)>.csl-nav-group-toggle{
  background:linear-gradient(180deg,color-mix(in srgb,var(--cm-green) 22%,transparent),color-mix(in srgb,var(--cm-green) 10%,transparent))!important;color:var(--cm-green)!important;
  box-shadow:0 0 0 1px color-mix(in srgb,var(--cm-green) 38%,transparent) inset,0 6px 16px color-mix(in srgb,var(--cm-green) 16%,transparent)}
.csl-topnav .csl-nav-caret{transition:transform .2s var(--cm-ease)}
.csl-topnav .csl-nav-group:hover>.csl-nav-group-toggle .csl-nav-caret,.csl-topnav .csl-nav-group.csl-open>.csl-nav-group-toggle .csl-nav-caret{transform:rotate(180deg)}

/* menus suspensos: entram suavemente, com borda de luz e links com barra lateral */
.csl-topnav .csl-subnav-inner{border-radius:16px!important;border-color:color-mix(in srgb,var(--cm-green) 22%,var(--border-strong))!important;
  background:linear-gradient(180deg,color-mix(in srgb,var(--cm-green) 5%,var(--bg-2)),var(--bg-2) 140px)!important;
  box-shadow:0 24px 50px rgba(0,0,0,.35),0 0 0 1px color-mix(in srgb,var(--cm-green) 8%,transparent)!important;transform-origin:top left}
@media (prefers-reduced-motion:no-preference){
  .csl-topnav .csl-subnav .csl-subnav-inner{transform:translateY(-6px) scale(.985);opacity:0;transition:transform .22s var(--cm-ease),opacity .18s ease}
  .csl-topnav .csl-nav-group.csl-open .csl-subnav-inner,.csl-topnav .csl-nav-group:hover .csl-subnav-inner,.csl-topnav .csl-nav-group:focus-within .csl-subnav-inner{transform:none;opacity:1}
}
.csl-topnav .csl-subnav a,.csl-dropdown-menu a{position:relative;border-radius:9px;transition:background .15s ease,color .15s ease,padding-left .18s var(--cm-ease)}
.csl-topnav .csl-subnav a:hover,.csl-dropdown-menu a:hover{background:color-mix(in srgb,var(--cm-green) 12%,var(--bg-3))!important;color:var(--text-0)!important;padding-left:calc(var(--cm-pad,12px) + 4px)}
.csl-topnav .csl-subnav a.csl-active{color:var(--cm-green)!important;background:color-mix(in srgb,var(--cm-green) 10%,transparent)!important}

/* cabeçalho de seção: ícone com anel e brilho, título forte */
.csl-section-header{position:relative}
.csl-section-header-icon{border-radius:14px!important;background:linear-gradient(145deg,var(--cm-green),color-mix(in srgb,var(--cm-green) 62%,#000))!important;
  box-shadow:0 8px 20px color-mix(in srgb,var(--cm-green) 30%,transparent),0 0 0 1px color-mix(in srgb,#fff 12%,transparent) inset!important}
.csl-section-header-title{background:linear-gradient(90deg,var(--text-0,currentColor) 55%,color-mix(in srgb,var(--text-0,currentColor) 62%,var(--cm-green)));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
@supports not (background:color-mix(in srgb,red,blue)){.csl-section-header-title{background:none;-webkit-text-fill-color:currentColor}}

/* filtros e abas: chips, segmentados, abas — feedback claro de hover e seleção */
.chip,.seg button,.view-tabs button,.seg a,.view-tabs a{transition:background .16s ease,border-color .16s ease,color .16s ease,box-shadow .2s ease,transform .15s var(--cm-ease)}
@media (hover:hover){.chip:not(.on):hover,.seg button:not(.on):hover,.view-tabs button:not(.on):hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--cm-green) 45%,var(--border-strong))!important;color:var(--text-0)}}
.chip.on,.seg button.on,.view-tabs button.on,.chip.active,.seg button.active,.view-tabs button.active{
  background:linear-gradient(180deg,color-mix(in srgb,var(--cm-green) 92%,#fff),var(--cm-green))!important;color:var(--accent-ink,#04120a)!important;border-color:var(--cm-green)!important;
  box-shadow:0 6px 16px color-mix(in srgb,var(--cm-green) 30%,transparent)}
.chip:active,.seg button:active,.view-tabs button:active{transform:scale(.97)}

/* avisos */
.notice{position:relative;border-radius:12px!important;border:1px solid color-mix(in srgb,var(--cm-green) 18%,var(--border))!important;background:linear-gradient(90deg,color-mix(in srgb,var(--cm-green) 8%,var(--bg-2)),var(--bg-2) 60%)!important;padding-left:16px}
.notice::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--cm-green)}

/* tabelas: contorno suave, cabeçalho fixo mais claro, linhas alternadas bem leves */
.table-wrap{border:1px solid var(--border);border-radius:14px;overflow:auto;background:var(--bg-1)}
table thead th,.table-wrap thead th{background:color-mix(in srgb,var(--cm-green) 5%,var(--bg-2))!important;border-bottom:1px solid color-mix(in srgb,var(--cm-green) 18%,var(--border))!important}
table tbody tr{transition:background .12s ease}
table tbody tr:nth-child(even){background:color-mix(in srgb,var(--text-0) 1.6%,transparent)}
table tfoot td{font-weight:800;background:color-mix(in srgb,var(--cm-green) 5%,var(--bg-2))}

/* janelas e painéis flutuantes: entram com escala, fundo desfocado só atrás */
@keyframes cm-pop{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
.csl-modal,.csl-notice-modal,.modal-box{animation:cm-pop .24s var(--cm-ease) both}
.csl-modal-overlay,.csl-notice-overlay,.modal-back.on{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}
.csl-modal,.modal-box{border-radius:18px!important;border:1px solid color-mix(in srgb,var(--cm-green) 18%,var(--border-strong))!important;box-shadow:0 30px 70px rgba(0,0,0,.45)!important}

/* números grandes do Dashboard e afins */
.big,.num-hero{font-variant-numeric:tabular-nums;letter-spacing:-.035em;font-weight:800}
.badge,.csl-badge{border-radius:999px;box-shadow:0 0 0 1px color-mix(in srgb,currentColor 18%,transparent) inset}

/* entrada dos blocos da página (uma vez) */
@media (prefers-reduced-motion:no-preference){
  .csl-content>.card,.csl-content>section,.csl-content>.grid,.csl-content>.table-wrap{animation:cm-rise .55s var(--cm-ease) both}
  .csl-content>:nth-child(3){animation-delay:.05s}.csl-content>:nth-child(4){animation-delay:.1s}.csl-content>:nth-child(5){animation-delay:.15s}.csl-content>:nth-child(n+6){animation-delay:.2s}
}

/* =====================================================================
   v3 — KPIs com fio de luz, listas, botões, barras e textos animados
   ===================================================================== */
@keyframes cm-runner{from{background-position:-60% 0,0 0}to{background-position:160% 0,0 0}}
:is(.kpis,.kpi-grid)>:nth-child(2)::before{animation-delay:.1s,-1.1s}:is(.kpis,.kpi-grid)>:nth-child(3)::before{animation-delay:.1s,-2.2s}
:is(.kpis,.kpi-grid)>:nth-child(4)::before{animation-delay:.1s,-3.3s}:is(.kpis,.kpi-grid)>:nth-child(5)::before{animation-delay:.1s,-4.4s}:is(.kpis,.kpi-grid)>:nth-child(n+6)::before{animation-delay:.1s,-5.5s}

/* listas: linhas e cartões de lista entram em sequência; no hover ganham barra verde, fundo e deslocamento */
:is(.imp-row,.exp-row,.order-fin-row,.of-row,.nf-row,.nb-row,.digest-item,.reput-item,.bal-row,.vale-row,.sync-row,.ac-row,.mw-item,.exp-up-item,.exp-co-side-item,.pick-row,.alert-list>*,.mw-list>*){
  position:relative;transition:transform .3s var(--cm-ease),background-color .22s ease,border-color .22s ease,box-shadow .3s ease}
@media (prefers-reduced-motion:no-preference){
  :is(.imp-row,.exp-row,.order-fin-row,.of-row,.nf-row,.nb-row,.digest-item,.reput-item,.bal-row,.vale-row,.sync-row,.ac-row,.mw-item,.exp-up-item,.exp-co-side-item,.pick-row,.alert-list>*,.mw-list>*){animation:cm-rise .45s var(--cm-ease) both}
  table tbody tr{animation:cm-rise .42s var(--cm-ease) both}
  table tbody tr:nth-child(2){animation-delay:.03s}table tbody tr:nth-child(3){animation-delay:.06s}table tbody tr:nth-child(4){animation-delay:.09s}table tbody tr:nth-child(5){animation-delay:.12s}table tbody tr:nth-child(6){animation-delay:.15s}table tbody tr:nth-child(n+7){animation-delay:.18s}
}
@media (hover:hover) and (pointer:fine){
  :is(.imp-row,.exp-row,.order-fin-row,.of-row,.nf-row,.nb-row,.digest-item,.reput-item,.bal-row,.vale-row,.sync-row,.ac-row,.mw-item,.exp-up-item,.exp-co-side-item,.alert-list>*,.mw-list>*):hover{
    background-color:color-mix(in srgb,var(--cm-green) 7%,transparent);border-color:color-mix(in srgb,var(--cm-green) 40%,var(--border-strong))!important;transform:translateX(3px);box-shadow:0 10px 22px -14px color-mix(in srgb,var(--cm-green) 60%,transparent)}
  table tbody tr:hover>td:first-child{box-shadow:inset 3px 0 0 var(--cm-green)}
}

/* botões: brilho que atravessa ao passar o mouse, glow e "afunda" ao clicar */
.btn,button.secondary,button.danger,button.primary,.cc-btn,a.btn{position:relative;overflow:hidden;isolation:isolate;transition:transform .2s var(--cm-ease),box-shadow .25s ease,background-color .18s ease,border-color .18s ease,color .18s ease}
.btn::before,button.secondary::before,button.danger::before,button.primary::before,.cc-btn::before,a.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.22) 50%,transparent 65%);transform:translateX(-70%)}
.btn svg,button.secondary svg,button.primary svg,.cc-btn svg{transition:transform .3s var(--cm-ease)}
@media (hover:hover) and (pointer:fine){
  :is(.btn,button.secondary,button.danger,button.primary,.cc-btn,a.btn):hover:not(:disabled)::before{opacity:1;transform:translateX(70%);transition:transform .8s var(--cm-ease),opacity .2s ease}
  :is(.btn:not(.secondary),button.primary):hover:not(:disabled){box-shadow:0 10px 24px -10px color-mix(in srgb,var(--cm-green) 70%,transparent)!important}
  :is(.btn.secondary,button.secondary):hover:not(:disabled){box-shadow:0 8px 18px -12px color-mix(in srgb,var(--cm-green) 55%,transparent)!important;border-color:color-mix(in srgb,var(--cm-green) 45%,var(--border-strong))!important}
  :is(.btn,button.primary):hover:not(:disabled) svg:not(:only-child){transform:translateX(2px) scale(1.08)}
}
:is(.btn,button.secondary,button.danger,button.primary,.cc-btn,a.btn):active:not(:disabled){transform:scale(.97)!important;transition-duration:.08s}
:is(.btn,button.secondary,button.primary)[aria-busy="true"]::after,:is(.btn,button.secondary,button.primary).busy::after,:is(.btn,button.primary).loading::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,transparent,#fff,transparent) -60% 0/50% 100% no-repeat;animation:cm-runner 1.1s linear infinite}
button.tab,.tab{transition:background-color .2s ease,color .2s ease,transform .22s var(--cm-ease),box-shadow .25s ease}
@media (hover:hover) and (pointer:fine){button.tab:not(.on):not(.active):hover{transform:translateY(-1px)}}

/* barras: crescem ao aparecer, com brilho correndo por dentro e glow */
@keyframes cm-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes cm-shine{from{background-position:-120% 0}to{background-position:220% 0}}
.csl-progress-fill,.progress-fill,.pbar>i,.bar>.fill,.bar-fill{position:relative;overflow:hidden;transform-origin:left;animation:cm-grow .8s var(--cm-ease) both;box-shadow:0 0 10px color-mix(in srgb,var(--cm-green) 45%,transparent)}
.csl-progress-fill::after,.progress-fill::after,.pbar>i::after,.bar>.fill::after,.bar-fill::after{
  content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.45) 50%,transparent 80%) -120% 0/60% 100% no-repeat;animation:cm-shine 2.6s ease-in-out .9s infinite}

/* textos: filete verde que cresce sob o título de cada bloco */
@keyframes cm-underline{from{transform:scaleX(0);opacity:0}to{transform:scaleX(1);opacity:1}}
:is(.card,.csl-card,.panel)>:is(h2,h3):first-child{position:relative}
:is(.card,.csl-card,.panel)>:is(h2,h3):first-child::after{content:"";position:absolute;left:0;bottom:-4px;width:34px;height:2px;border-radius:2px;transform-origin:left;
  background:linear-gradient(90deg,var(--cm-green),transparent);animation:cm-underline .8s var(--cm-ease) .25s both}
td.num,.num,.big,.kpi-delta{font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){
  :is(.csl-progress-fill,.progress-fill,.pbar>i,.bar>.fill,.bar-fill)::after,:is(.card,.csl-card,.panel)>:is(h2,h3):first-child::after,.csl-progress-fill,.progress-fill,table tbody tr{animation:none!important}
  .kpi::before,.kpi-box::before,.kpi-card::before,.kpis>div::before{animation:none!important}
}

/* =====================================================================
   v5 — menus legíveis, botões de clique, campos, contraste de textos e informações
   ===================================================================== */
/* informações em cinza ficavam apagadas: um tom mais legível nos dois temas (rótulos, notas, datas) */
html[data-theme="dark"]{--text-2:#8b9b90}
html[data-theme="light"]{--text-2:#66756b}
.csl-section-header-sub,.page-head p,.csl-content>h1+p{color:var(--text-1)!important}
input[type=checkbox],input[type=radio],progress{accent-color:var(--accent)}

/* menu suspenso: texto maior e mais claro, ponto verde que acende no hover, entrada em escada */
.csl-topnav .csl-subnav-link{font-size:13px!important;font-weight:600!important;color:var(--text-1)!important;padding:9px 12px!important;display:flex;align-items:center;gap:9px}
.csl-topnav .csl-subnav-link::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--border-strong);transition:background .2s ease,transform .25s var(--cm-ease),box-shadow .25s ease}
.csl-topnav .csl-subnav-link:hover::before,.csl-topnav .csl-subnav-link.csl-active::before{background:var(--cm-green);transform:scale(1.35);box-shadow:0 0 8px color-mix(in srgb,var(--cm-green) 70%,transparent)}
.csl-topnav .csl-subnav-link.csl-active{font-weight:800!important}
@media (prefers-reduced-motion:no-preference){
  .csl-topnav .csl-nav-group:hover .csl-subnav-link,.csl-topnav .csl-nav-group.csl-open .csl-subnav-link{animation:cm-rise .32s var(--cm-ease) both}
  .csl-topnav .csl-subnav-link:nth-child(2){animation-delay:.03s}.csl-topnav .csl-subnav-link:nth-child(3){animation-delay:.06s}.csl-topnav .csl-subnav-link:nth-child(4){animation-delay:.09s}
  .csl-topnav .csl-subnav-link:nth-child(5){animation-delay:.12s}.csl-topnav .csl-subnav-link:nth-child(6){animation-delay:.15s}.csl-topnav .csl-subnav-link:nth-child(n+7){animation-delay:.18s}
  .csl-topnav .csl-nav-group:hover .mg-card,.csl-topnav .csl-nav-group.csl-open .mg-card{animation:cm-rise .38s var(--cm-ease) both}
  .mg-card:nth-of-type(2){animation-delay:.05s!important}.mg-card:nth-of-type(3){animation-delay:.1s!important}
}
/* mega-menu de Marketplaces: botões de destino com realce e elevação, cartões com brilho na borda */
.mg-sec,.mg-title{color:var(--text-1)!important;letter-spacing:.09em!important}
.mg-card{transition:border-color .2s ease,box-shadow .3s ease,transform .3s var(--cm-ease)}
@media (hover:hover){.mg-card:hover{transform:translateY(-1px);box-shadow:0 12px 26px -16px rgba(0,0,0,.7),0 0 0 1px color-mix(in srgb,var(--cm-green) 14%,transparent)}}
.mg-a{font-weight:650!important;transition:transform .2s var(--cm-ease),border-color .18s ease,color .18s ease,background-color .18s ease,box-shadow .25s ease!important}
@media (hover:hover){.mg-a:hover{transform:translateY(-2px);box-shadow:0 10px 18px -12px color-mix(in srgb,var(--cm-green) 80%,transparent)}}
.mg-a:active{transform:scale(.96)}
.mg-a.mg-on{box-shadow:0 0 0 1px color-mix(in srgb,var(--cm-green) 40%,transparent) inset}
.mg-brand{box-shadow:0 4px 12px -6px rgba(0,0,0,.6);transition:transform .2s var(--cm-ease)}
.mg-card:hover .mg-brand{transform:scale(1.04)}
.mg-chip{transition:opacity .2s ease,border-color .2s ease}.mg-chip:hover{opacity:1;border-color:var(--border-strong)}

/* botões de clique: relevo, brilho e "afundar" — primário em verde com luz interna, secundário com contorno, perigo em vermelho */
.btn,button.primary,button.secondary,button.danger,.cc-btn,a.btn{letter-spacing:-.005em;font-weight:700;border-radius:10px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.btn:not([class*="secondary"]):not([class*="danger"]):not([class*="ghost"]):not([class*="warn"]):not([class*="link"]):not([class*="light"]):not([class*="outline"]):not(:disabled),button.primary:not(:disabled){
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent-2,var(--accent)) 90%,#fff),var(--accent))!important;color:var(--accent-ink,#04120a)!important;border:1px solid color-mix(in srgb,var(--accent) 80%,#000)!important;
  box-shadow:0 1px 0 rgba(255,255,255,.28) inset,0 8px 18px -10px color-mix(in srgb,var(--accent) 80%,transparent)!important}
.btn.danger,button.danger{background:linear-gradient(180deg,color-mix(in srgb,var(--danger) 88%,#fff),var(--danger))!important;color:#fff!important;border:1px solid color-mix(in srgb,var(--danger) 78%,#000)!important;box-shadow:0 1px 0 rgba(255,255,255,.22) inset,0 8px 18px -10px color-mix(in srgb,var(--danger) 75%,transparent)!important}
.btn.secondary:not(:disabled),button.secondary:not(:disabled){background:var(--bg-2)!important;color:var(--text-0)!important;border:1px solid var(--border-strong)!important;box-shadow:0 1px 0 rgba(255,255,255,.04) inset!important}
:is(.btn,button.primary,button.secondary,button.danger,.cc-btn,a.btn):active:not(:disabled){box-shadow:0 2px 6px rgba(0,0,0,.35) inset!important}
:is(.btn,button.primary,button.secondary,button.danger,.cc-btn,a.btn):disabled{opacity:.5;cursor:not-allowed;filter:saturate(.6)}
:is(.btn,button,a.btn,input,select,textarea,.chip,.seg button,.tab):focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* campos: contorno que acende no hover e anel suave no foco */
:is(input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea){transition:border-color .18s ease,box-shadow .22s ease,background-color .18s ease}
:is(input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea):hover:not(:disabled):not(:focus){border-color:color-mix(in srgb,var(--cm-green) 35%,var(--border-strong))}
:is(input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea):focus{border-color:var(--accent)!important;box-shadow:0 0 0 3px var(--accent-soft)!important;outline:none}

/* títulos e blocos de informação */
.csl-section-header-title{font-weight:850!important}
.csl-section-header-sub{font-size:13.5px;line-height:1.5}
:is(.card,.csl-card,.panel)>:is(h2,h3){font-weight:800}
:is(.card,.csl-card,.panel) :is(small,.muted,.hint,.meta){color:var(--text-2)}
.kpi-delta{font-weight:800;letter-spacing:.005em}

/* =====================================================================
   v6 — barras de seleção, títulos de página, KPIs e botões (acabamento)
   ===================================================================== */
/* barras de seleção (select): seta própria que muda no hover/foco, cantos mais redondos, texto nunca cortado */
select:not([multiple]):not([size]){
  -webkit-appearance:none;appearance:none;cursor:pointer;text-overflow:ellipsis;border-radius:10px;
  padding-right:32px!important;background-repeat:no-repeat!important;background-position:right 11px center!important;background-size:12px!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A8B5AB' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")!important}
html[data-theme="light"] select:not([multiple]):not([size]){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2359675E' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")!important}
select:not([multiple]):not([size]):hover:not(:disabled),select:not([multiple]):not([size]):focus{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322C55E' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")!important}
select option{background:var(--bg-2);color:var(--text-0)}
select:not([multiple]):not([size]):disabled{opacity:.55;cursor:not-allowed}
@supports (field-sizing:content){select:not([multiple]):not([size]):not([style*="width"]){field-sizing:content;min-width:7.5rem}}
/* filtros do Dashboard: largura inline fixa cortava "Todas as empresas" */
#homeCompany,#homeAccount{width:auto!important;min-width:162px!important}
/* seleção múltipla (componente próprio) */
.csl-multiselect-control{border-radius:10px;transition:border-color .18s ease,box-shadow .22s ease}
.csl-multiselect-control:hover{border-color:color-mix(in srgb,var(--cm-green) 40%,var(--border-strong))}
.csl-multiselect-control:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.csl-multiselect-chip{border-radius:999px;background:color-mix(in srgb,var(--cm-green) 14%,var(--bg-3));border:1px solid color-mix(in srgb,var(--cm-green) 30%,transparent);font-weight:700}

/* título de cada página: filete de luz embaixo do cabeçalho, ícone que reage ao mouse */
.csl-section-header{position:relative;padding-bottom:16px}
.csl-section-header::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:min(220px,40%);border-radius:2px;transform-origin:left;
  background:linear-gradient(90deg,var(--cm-green),color-mix(in srgb,var(--cm-green) 20%,transparent) 70%,transparent);animation:cm-underline .9s var(--cm-ease) .3s both}
.csl-section-header-icon{transition:transform .35s var(--cm-ease),box-shadow .3s ease}
@media (hover:hover){.csl-section-header:hover .csl-section-header-icon{transform:rotate(-6deg) scale(1.06)}}
.csl-section-header-title{letter-spacing:-.045em!important}

/* cada KPI: rótulo mais legível, ícone reage ao passar o mouse, valor com destaque */
.kpi-label,.kpi-top{color:var(--text-1)!important;font-weight:800!important}
.kpi-label svg,.kpi-top svg{transition:transform .35s var(--cm-ease),box-shadow .3s ease}
@media (hover:hover){:is(.kpi,.kpi-box,.kpi-card,.kpis>div):hover :is(.kpi-label,.kpi-top) svg{transform:scale(1.12) rotate(-5deg);box-shadow:0 0 0 1px color-mix(in srgb,var(--kc,var(--cm-green)) 45%,transparent) inset,0 6px 14px -6px color-mix(in srgb,var(--kc,var(--cm-green)) 70%,transparent)}}
:is(.kpi,.kpi-box,.kpi-card,.kpis>div)::selection{background:transparent}
.kpi-goto{transition:transform .25s var(--cm-ease),background-color .2s ease,color .2s ease,border-color .2s ease!important}
@media (hover:hover){.kpi-goto:hover{transform:translate(2px,-2px)}}

/* botões: elevação no hover, ícone+texto alinhados, tamanhos coerentes */
.btn,button.primary,button.secondary,button.danger,.cc-btn,a.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:38px;padding:0 16px}
.btn.sm,.btn.mini,button.mini,.secondary.mini{min-height:32px;padding:0 12px;font-size:12px;border-radius:9px}
@media (hover:hover) and (pointer:fine){:is(.btn,button.primary,button.secondary,button.danger,.cc-btn,a.btn):hover:not(:disabled){transform:translateY(-1px)}}
.btn svg,button.primary svg,button.secondary svg,button.danger svg{width:16px;height:16px;flex:none}

/* menus suspensos: um por vez, sem sobreposição — o que fecha some na hora; o que está sob o mouse fica por cima */
.csl-topnav .csl-nav-group:not(:hover):not(.csl-open):not(:focus-within) .csl-subnav,
.csl-topnav .csl-nav-group:not(:hover):not(.csl-open):not(:focus-within) .csl-subnav-inner{transition:none!important}
.csl-topnav .csl-nav-group:hover>.csl-subnav{z-index:1003!important}
.csl-topnav .csl-nav-group.csl-open:not(:hover)>.csl-subnav{z-index:1002!important}

/* =====================================================================
   v7 — lista de produtos: foto maior, dados do produto maiores e linhas mais respiradas
   ===================================================================== */
.home-prod-cell{gap:14px!important}
.home-prod-thumb{width:58px!important;height:58px!important;flex:0 0 58px!important;border-radius:13px!important;border:1px solid var(--border-strong)!important;
  background:var(--bg-3);box-shadow:0 6px 16px -8px rgba(0,0,0,.6);transition:transform .3s var(--cm-ease),box-shadow .3s ease,border-color .2s ease}
.home-prod-thumb-placeholder{font-size:20px!important}
.home-prod-cell>div:last-child{min-width:0}
.home-prod-cell b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:14px;font-weight:700;line-height:1.35;color:var(--text-0)}
.home-prod-cell>div:last-child>div{margin-top:3px;font-size:11.5px!important;font-weight:600;letter-spacing:.01em;color:var(--text-2)!important}
@media (hover:hover){tr:hover .home-prod-thumb{transform:scale(1.1);border-color:color-mix(in srgb,var(--cm-green) 55%,var(--border-strong))!important;box-shadow:0 12px 24px -10px rgba(0,0,0,.7),0 0 0 2px color-mix(in srgb,var(--cm-green) 22%,transparent)}}
/* dados da linha (preço, custo, unidades, faturado, representatividade, lucro, margem) */
#homeProductsTable td,#homeProductsTable th,table:has(.home-prod-cell) td,table:has(.home-prod-cell) th{padding-top:12px!important;padding-bottom:12px!important}
table:has(.home-prod-cell) td{font-size:13.5px;vertical-align:middle}
table:has(.home-prod-cell) th{font-size:11px!important}
table:has(.home-prod-cell) td.num-hero{font-size:15px!important;font-weight:800!important;letter-spacing:-.01em}
table:has(.home-prod-cell) td.num-profit{font-size:14.5px!important;font-weight:800!important}
table:has(.home-prod-cell) tbody tr{border-bottom:1px solid var(--border)}
/* mesma ideia nas listas pequenas por loja e no estoque do Full */
.rk-mini-thumb{width:42px!important;height:42px!important;flex:0 0 42px!important;border-radius:10px!important}
.rk-mini-cell{gap:12px!important}.rk-mini-table td{font-size:12.5px!important;padding:10px 9px!important}
.prod-thumb{width:50px!important;height:50px!important;border-radius:11px!important;border:1px solid var(--border-strong)}
.prod-title{font-size:13.5px!important;font-weight:700;max-width:340px!important}
table:has(.home-prod-cell) td:not(:first-child),table:has(.home-prod-cell) th:not(:first-child){white-space:nowrap}
table:has(.home-prod-cell) td:first-child{min-width:260px}

/* v8 — foto do produto ocupa a altura inteira da linha */
.home-prod-thumb{width:84px!important;height:84px!important;flex:0 0 84px!important;border-radius:14px!important}
.home-prod-cell{gap:16px!important}
.home-prod-thumb-placeholder{font-size:26px!important}
.home-prod-cell b{font-size:14.5px}
table:has(.home-prod-cell) td,table:has(.home-prod-cell) th{padding-top:8px!important;padding-bottom:8px!important}
table:has(.home-prod-cell) thead th{padding-top:12px!important;padding-bottom:12px!important}
table:has(.home-prod-cell) td:first-child{padding-left:12px!important;min-width:320px}
.rk-mini-thumb{width:56px!important;height:56px!important;flex:0 0 56px!important}
.prod-thumb{width:64px!important;height:64px!important}

/* =====================================================================
   v9 — botões do menu: mais visíveis, mais animados, com brilho em movimento por trás de cada um
   ===================================================================== */
@keyframes cm-flow{from{background-position:0% 50%}to{background-position:-200% 50%}}
@keyframes cm-aura{0%,100%{box-shadow:0 0 0 1px color-mix(in srgb,var(--cm-green) 38%,transparent) inset,0 6px 16px color-mix(in srgb,var(--cm-green) 14%,transparent)}50%{box-shadow:0 0 0 1px color-mix(in srgb,var(--cm-green) 60%,transparent) inset,0 8px 24px color-mix(in srgb,var(--cm-green) 34%,transparent)}}
@keyframes cm-glint{0%,55%{transform:translateX(-130%)}100%{transform:translateX(230%)}}

/* barra superior: cada item vira um botão com corpo, borda de luz e brilho correndo por trás */
.csl-topnav>.csl-navlink,.csl-topnav .csl-nav-group-toggle{
  position:relative;overflow:hidden;isolation:isolate;border-radius:11px!important;
  color:var(--text-0)!important;font-weight:650;letter-spacing:-.005em;
  background:linear-gradient(180deg,color-mix(in srgb,var(--cm-green) 8%,var(--bg-3)),color-mix(in srgb,var(--cm-green) 3%,var(--bg-2)))!important;
  border:1px solid color-mix(in srgb,var(--cm-green) 18%,var(--border))!important;
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 6px 14px -10px rgba(0,0,0,.7)!important;
  transition:transform .25s var(--cm-ease),border-color .2s ease,box-shadow .3s ease,background-color .2s ease!important}
.csl-topnav>.csl-navlink::before,.csl-topnav .csl-nav-group-toggle::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;opacity:.9;
  background:linear-gradient(105deg,transparent 30%,color-mix(in srgb,var(--cm-green) 20%,transparent) 50%,transparent 70%) 0 0/60% 100% no-repeat;animation:cm-glint 7s ease-in-out infinite}
.csl-topnav>:nth-child(2)::before,.csl-topnav>:nth-child(2) .csl-nav-group-toggle::before{animation-delay:.6s}
.csl-topnav>:nth-child(3)::before,.csl-topnav>:nth-child(3) .csl-nav-group-toggle::before{animation-delay:1.2s}
.csl-topnav>:nth-child(4)::before,.csl-topnav>:nth-child(4) .csl-nav-group-toggle::before{animation-delay:1.8s}
.csl-topnav>:nth-child(5)::before,.csl-topnav>:nth-child(5) .csl-nav-group-toggle::before{animation-delay:2.4s}
.csl-topnav>:nth-child(n+6)::before,.csl-topnav>:nth-child(n+6) .csl-nav-group-toggle::before{animation-delay:3s}
.csl-topnav>.csl-navlink .csl-ic,.csl-topnav .csl-nav-group-toggle .csl-ic:not(.csl-nav-caret){color:var(--cm-green);filter:drop-shadow(0 0 5px color-mix(in srgb,var(--cm-green) 45%,transparent));transition:transform .3s var(--cm-ease)}
@media (hover:hover) and (pointer:fine){
  .csl-topnav>.csl-navlink:hover,.csl-topnav .csl-nav-group-toggle:hover,.csl-topnav .csl-nav-group.csl-open>.csl-nav-group-toggle{transform:translateY(-2px);border-color:color-mix(in srgb,var(--cm-green) 60%,transparent)!important;
    box-shadow:0 1px 0 rgba(255,255,255,.07) inset,0 12px 22px -12px color-mix(in srgb,var(--cm-green) 75%,transparent)!important}
  .csl-topnav>.csl-navlink:hover .csl-ic,.csl-topnav .csl-nav-group-toggle:hover .csl-ic:not(.csl-nav-caret){transform:scale(1.18) rotate(-6deg)}
}
.csl-topnav>.csl-navlink:active,.csl-topnav .csl-nav-group-toggle:active{transform:scale(.96)}
.csl-topnav>.csl-navlink.csl-active,.csl-topnav .csl-nav-group:has(.csl-subnav-link.csl-active)>.csl-nav-group-toggle{animation:cm-aura 3.2s ease-in-out infinite;color:var(--cm-green)!important;border-color:color-mix(in srgb,var(--cm-green) 65%,transparent)!important}

/* itens do menu suspenso: botões em linha, com corpo, texto claro e brilho passando por trás */
.csl-topnav .csl-subnav-inner{gap:4px!important;padding:12px!important}
.csl-topnav .csl-subnav-link{
  position:relative;overflow:hidden;isolation:isolate;color:var(--text-0)!important;font-weight:650!important;border-radius:11px!important;margin:0;
  background:linear-gradient(180deg,color-mix(in srgb,var(--cm-green) 7%,var(--bg-3)),color-mix(in srgb,var(--cm-green) 2%,var(--bg-2)))!important;
  border:1px solid color-mix(in srgb,var(--cm-green) 14%,var(--border))!important;
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset;
  transition:transform .25s var(--cm-ease),border-color .2s ease,box-shadow .3s ease,padding-left .2s var(--cm-ease)!important}
.csl-topnav .csl-subnav-link::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;
  background:linear-gradient(100deg,transparent 25%,color-mix(in srgb,var(--cm-green) 18%,transparent) 50%,transparent 75%) 0 0/250% 100% no-repeat;animation:cm-flow 6s linear infinite}
.csl-topnav .csl-subnav-link:nth-child(2n)::after{animation-duration:7.5s;animation-delay:-2s}.csl-topnav .csl-subnav-link:nth-child(3n)::after{animation-duration:9s;animation-delay:-4s}
@media (hover:hover) and (pointer:fine){
  .csl-topnav .csl-subnav-link:hover{transform:translateX(4px);border-color:color-mix(in srgb,var(--cm-green) 62%,transparent)!important;box-shadow:0 10px 20px -12px color-mix(in srgb,var(--cm-green) 80%,transparent)!important;background:linear-gradient(180deg,color-mix(in srgb,var(--cm-green) 16%,var(--bg-3)),color-mix(in srgb,var(--cm-green) 7%,var(--bg-2)))!important}
}
.csl-topnav .csl-subnav-link:active{transform:scale(.97)}
.csl-topnav .csl-subnav-link.csl-active{border-color:color-mix(in srgb,var(--cm-green) 70%,transparent)!important;animation:cm-aura 3.2s ease-in-out infinite;background:linear-gradient(180deg,color-mix(in srgb,var(--cm-green) 22%,var(--bg-3)),color-mix(in srgb,var(--cm-green) 9%,var(--bg-2)))!important}
/* botões de destino do mega-menu (Lojas, Anúncios, Publicidade…) com o mesmo brilho em movimento */
.mg-a{position:relative;overflow:hidden;isolation:isolate;color:var(--text-0)!important;background:linear-gradient(180deg,color-mix(in srgb,var(--cm-green) 7%,var(--bg-3)),var(--bg-2))!important;border-color:color-mix(in srgb,var(--cm-green) 16%,var(--border))!important}
.mg-a::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(100deg,transparent 25%,color-mix(in srgb,var(--cm-green) 18%,transparent) 50%,transparent 75%) 0 0/250% 100% no-repeat;animation:cm-flow 7s linear infinite}
.mg-a:nth-child(2n)::after{animation-delay:-2.5s}.mg-a:nth-child(3n)::after{animation-delay:-5s}
@media (prefers-reduced-motion:reduce){
  .csl-topnav>.csl-navlink::before,.csl-topnav .csl-nav-group-toggle::before,.csl-topnav .csl-subnav-link::after,.mg-a::after,.csl-topnav>.csl-navlink.csl-active,.csl-topnav .csl-subnav-link.csl-active{animation:none!important}
}

/* =====================================================================
   v10 — todos os botões e ícones: relevo, movimento e reação ao toque
   ===================================================================== */
@keyframes cm-spin{to{transform:rotate(360deg)}}
@keyframes cm-ring{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--cm-green) 45%,transparent)}70%,100%{box-shadow:0 0 0 14px transparent}}
@keyframes cm-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}

/* o menu do topo: mesmo visual de botão, com mais peso de seletor para vencer regras antigas */
.csl-shell .csl-topnav .csl-navlink{
  position:relative;overflow:hidden;isolation:isolate;border-radius:11px!important;color:var(--text-0)!important;font-weight:650;
  background:linear-gradient(180deg,color-mix(in srgb,var(--cm-green) 8%,var(--bg-3)),color-mix(in srgb,var(--cm-green) 3%,var(--bg-2)))!important;
  border:1px solid color-mix(in srgb,var(--cm-green) 18%,var(--border))!important;box-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 6px 14px -10px rgba(0,0,0,.7)!important}
.csl-shell .csl-topnav .csl-navlink.csl-active{color:var(--cm-green)!important;border-color:color-mix(in srgb,var(--cm-green) 65%,transparent)!important}

/* ícones dentro de qualquer elemento clicável: crescem e inclinam no hover, "afundam" no clique */
:is(a,button,.btn,.chip,.tab,summary,label.chk)>svg:not(.csl-nav-caret):not(.csl-brand-mark){transition:transform .3s var(--cm-ease),filter .25s ease,color .2s ease}
@media (hover:hover) and (pointer:fine){
  :is(a,button,.btn,.chip,.tab,summary):hover>svg:not(.csl-nav-caret):not(.csl-brand-mark){transform:scale(1.15) rotate(-6deg)}
  :is(a,button,.btn,.chip,.tab,summary):hover>svg:not(.csl-nav-caret):not(.csl-brand-mark):is([class*="trash"],[class*="x"]){transform:scale(1.15) rotate(8deg)}
}
:is(a,button,.btn,.chip,.tab,summary):active>svg:not(.csl-nav-caret):not(.csl-brand-mark){transform:scale(.88)}
/* botões só de ícone: círculo que acende */
button:has(>svg:only-child),.csl-menu-btn,.csl-collapse-btn,.csl-modal-close,.icon-btn{border-radius:11px;transition:background-color .2s ease,border-color .2s ease,transform .22s var(--cm-ease),box-shadow .25s ease}
@media (hover:hover){button:has(>svg:only-child):hover:not(:disabled),.csl-menu-btn:hover,.csl-collapse-btn:hover,.csl-modal-close:hover{background:color-mix(in srgb,var(--cm-green) 14%,var(--bg-3))!important;border-color:color-mix(in srgb,var(--cm-green) 50%,var(--border-strong))!important;transform:translateY(-1px);box-shadow:0 8px 16px -10px color-mix(in srgb,var(--cm-green) 70%,transparent)}}

/* canto direito do menu: alternador de tema, avatar com anel girando e botão Sair */
.csl-theme-switcher{border-radius:12px!important;background:linear-gradient(180deg,color-mix(in srgb,var(--cm-green) 6%,var(--bg-3)),var(--bg-2))!important;border:1px solid color-mix(in srgb,var(--cm-green) 16%,var(--border))!important}
.csl-theme-choice{transition:background-color .2s ease,color .2s ease,transform .22s var(--cm-ease)!important}
.csl-theme-choice:hover{color:var(--text-0)!important;transform:translateY(-1px)}
.csl-theme-choice.is-active{background:linear-gradient(180deg,color-mix(in srgb,var(--cm-green) 30%,transparent),color-mix(in srgb,var(--cm-green) 14%,transparent))!important;color:var(--cm-green)!important;box-shadow:0 0 0 1px color-mix(in srgb,var(--cm-green) 50%,transparent) inset,0 4px 12px -4px color-mix(in srgb,var(--cm-green) 60%,transparent)!important}
.csl-avatar{position:relative;isolation:isolate;font-weight:850}
.csl-avatar::before{content:"";position:absolute;inset:-3px;z-index:-1;border-radius:50%;background:conic-gradient(from 0deg,var(--cm-green),transparent 35%,color-mix(in srgb,var(--cm-green) 60%,#fff) 60%,transparent 85%,var(--cm-green));animation:cm-spin 6s linear infinite;
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1.5px));mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1.5px))}
a[href="/logout"].csl-navlink{border-radius:11px;transition:background-color .2s ease,color .2s ease,transform .22s var(--cm-ease)}
@media (hover:hover){a[href="/logout"].csl-navlink:hover{color:#ff8b95!important;background:color-mix(in srgb,#ff4d5e 14%,transparent)!important;transform:translateY(-1px)}a[href="/logout"].csl-navlink:hover>svg{transform:translateX(3px)!important}}

/* olhinho de privacidade, paginação e botão flutuante */
.csl-eye-toggle{border-radius:11px!important;background:linear-gradient(180deg,color-mix(in srgb,var(--cm-green) 7%,var(--bg-3)),var(--bg-2))!important;border:1px solid color-mix(in srgb,var(--cm-green) 18%,var(--border-strong))!important;transition:transform .22s var(--cm-ease),box-shadow .25s ease,border-color .2s ease!important}
@media (hover:hover){.csl-eye-toggle:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--cm-green) 55%,transparent)!important;box-shadow:0 8px 16px -10px color-mix(in srgb,var(--cm-green) 70%,transparent)}}
.csl-pagination button,.pagination button{border-radius:10px;min-width:34px;transition:transform .2s var(--cm-ease),background-color .2s ease,border-color .2s ease,box-shadow .25s ease}
@media (hover:hover){.csl-pagination button:hover:not(:disabled):not(.active),.pagination button:hover:not(:disabled):not(.active){transform:translateY(-2px);border-color:color-mix(in srgb,var(--cm-green) 50%,var(--border-strong))}}
.csl-pagination button.active,.pagination button.active,.csl-pagination .active{background:linear-gradient(180deg,color-mix(in srgb,var(--accent-2,var(--accent)) 88%,#fff),var(--accent))!important;color:var(--accent-ink,#04120a)!important;box-shadow:0 8px 16px -8px color-mix(in srgb,var(--accent) 80%,transparent)}
#phy-launcher{animation:cm-ring 3.2s ease-out infinite}
#phy-launcher:hover{animation-play-state:paused;filter:drop-shadow(0 0 12px color-mix(in srgb,var(--cm-green) 70%,transparent))}
/* troca de ícone de estado: pequena pulsada quando um botão fica ativo/pressionado */
:is(button,.btn,.chip,.tab)[aria-pressed="true"]>svg,:is(button,.btn,.chip,.tab).active>svg{filter:drop-shadow(0 0 5px color-mix(in srgb,var(--cm-green) 55%,transparent))}
@media (prefers-reduced-motion:reduce){.csl-avatar::before,#phy-launcher{animation:none!important}}

/* =====================================================================
   v11 — todas as páginas e módulos: cabeçalhos com animação por trás, abas em cápsula, chips vivos, estados vazios, avisos e revelação ao rolar
   ===================================================================== */
@keyframes cm-wave2{from{background-position:70% 40%,0 center}to{background-position:70% 40%,-360px center}}
@keyframes cm-bars{from{background-position:0 bottom}to{background-position:-160px bottom}}
@keyframes cm-pulse-soft{0%,100%{opacity:.55}50%{opacity:1}}

/* título de cada página: aurora verde + onda de faturamento correndo por trás do texto */
.csl-content>.csl-section-header{position:relative;isolation:isolate}
.csl-content>.csl-section-header::before{content:"";position:absolute;z-index:-1;right:0;top:-35%;bottom:0;width:58%;pointer-events:none;opacity:.75;
  background:radial-gradient(60% 70% at 70% 40%,color-mix(in srgb,var(--cm-green) 22%,transparent),transparent 70%) 70% 40%/100% 100% no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 80' preserveAspectRatio='none'%3E%3Cpath d='M0 62 C30 62 40 28 72 32 S124 58 156 44 S214 8 246 22 S322 52 360 62 V80 H0 Z' fill='rgb(34,197,94)' fill-opacity='.09'/%3E%3Cpath d='M0 62 C30 62 40 28 72 32 S124 58 156 44 S214 8 246 22 S322 52 360 62' fill='none' stroke='rgb(34,197,94)' stroke-opacity='.5' stroke-width='1.5'/%3E%3C/svg%3E") 0 center/360px 70% repeat-x;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 35%,#000 78%,transparent);mask-image:linear-gradient(90deg,transparent,#000 35%,#000 78%,transparent);animation:cm-wave2 26s linear infinite}
/* cabeçalho de bloco dentro de card: colunas de gráfico subindo por trás do título */
.card>.csl-section-header{position:relative;isolation:isolate}
.card>.csl-section-header::before{content:"";position:absolute;z-index:-1;left:0;bottom:8px;height:48px;width:44%;pointer-events:none;opacity:.45;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 40' preserveAspectRatio='none'%3E%3Cg fill='rgb(34,197,94)' fill-opacity='.22'%3E%3Crect x='4' y='24' width='8' height='16' rx='2'/%3E%3Crect x='20' y='16' width='8' height='24' rx='2'/%3E%3Crect x='36' y='20' width='8' height='20' rx='2'/%3E%3Crect x='52' y='8' width='8' height='32' rx='2'/%3E%3Crect x='68' y='14' width='8' height='26' rx='2'/%3E%3Crect x='84' y='4' width='8' height='36' rx='2'/%3E%3Crect x='100' y='12' width='8' height='28' rx='2'/%3E%3Crect x='116' y='6' width='8' height='34' rx='2'/%3E%3Crect x='132' y='18' width='8' height='22' rx='2'/%3E%3Crect x='148' y='10' width='8' height='30' rx='2'/%3E%3C/g%3E%3C/svg%3E") repeat-x 0 bottom/160px 100%;
  -webkit-mask-image:linear-gradient(90deg,#000 20%,transparent);mask-image:linear-gradient(90deg,#000 20%,transparent);animation:cm-bars 14s linear infinite}
/* h1 soltos (páginas sem cabeçalho padrão) ganham o mesmo brilho de fundo */
.csl-content>h1:first-child,.page-head{position:relative;isolation:isolate}
.csl-content>h1:first-child::before,.page-head::before{content:"";position:absolute;z-index:-1;left:-20px;top:-40%;width:360px;height:180%;pointer-events:none;background:radial-gradient(closest-side,color-mix(in srgb,var(--cm-green) 16%,transparent),transparent);animation:cm-pulse-soft 6s ease-in-out infinite}

/* abas de todas as páginas: cápsula com seleção em verde e brilho */
.tabs{display:flex;flex-wrap:wrap;gap:4px;padding:4px;width:fit-content;max-width:100%;border:1px solid color-mix(in srgb,var(--cm-green) 16%,var(--border-strong));border-radius:14px;background:linear-gradient(180deg,color-mix(in srgb,var(--cm-green) 6%,var(--bg-3)),var(--bg-2));margin-bottom:16px}
.tabs button,.tabs a{border:0!important;border-bottom:0!important;border-radius:10px!important;padding:8px 15px!important;margin:0!important;font-weight:750;font-size:12.5px;color:var(--text-1)!important;background:transparent!important;text-decoration:none;
  transition:background-color .2s ease,color .2s ease,transform .22s var(--cm-ease),box-shadow .25s ease}
@media (hover:hover){.tabs button:not(.on):not(.active):hover,.tabs a:not(.on):not(.active):hover{color:var(--text-0)!important;background:color-mix(in srgb,var(--cm-green) 12%,transparent)!important;transform:translateY(-1px)}}
.tabs button.on,.tabs button.active,.tabs a.on,.tabs a.active,.tabs [aria-selected="true"]{color:var(--accent-ink,#04120a)!important;
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent-2,var(--accent)) 88%,#fff),var(--accent))!important;box-shadow:0 1px 0 rgba(255,255,255,.3) inset,0 8px 18px -8px color-mix(in srgb,var(--accent) 80%,transparent);animation:cm-pop .3s var(--cm-ease)}

/* chips de filtro (Hoje, 7 dias, status…) mais vivos */
button.chip,a.chip{color:var(--text-0)!important;border:1px solid color-mix(in srgb,var(--cm-green) 22%,var(--border-strong))!important;background:color-mix(in srgb,var(--bg-3) 75%,transparent)!important;opacity:.94;border-radius:999px;font-weight:750}
@media (hover:hover){button.chip:not(.on):not(.active):hover,a.chip:not(.on):not(.active):hover{opacity:1;background:color-mix(in srgb,var(--cm-green) 14%,var(--bg-3))!important;border-color:color-mix(in srgb,var(--cm-green) 60%,transparent)!important;box-shadow:0 10px 18px -12px color-mix(in srgb,var(--cm-green) 80%,transparent)}}

/* estados vazios: ícone flutuando e contorno que respira */
.empty,.csl-empty{border-radius:16px;animation:cm-pulse-border 4s ease-in-out infinite}
@keyframes cm-pulse-border{0%,100%{border-color:var(--border-strong)}50%{border-color:color-mix(in srgb,var(--cm-green) 45%,var(--border-strong))}}
.empty svg,.csl-empty svg{animation:cm-bob 3.4s ease-in-out infinite;color:var(--cm-green);filter:drop-shadow(0 0 8px color-mix(in srgb,var(--cm-green) 40%,transparent))}

/* esqueletos de carregamento e avisos (toast) */
.skeleton,.csl-skeleton,[class*="skeleton"]{background:linear-gradient(100deg,var(--bg-3) 30%,color-mix(in srgb,var(--cm-green) 12%,var(--bg-3)) 50%,var(--bg-3) 70%) 0 0/250% 100%;animation:cm-flow 1.6s linear infinite}
.cui-toast{animation:cm-pop .3s var(--cm-ease) both;border-radius:12px;box-shadow:0 18px 40px -12px rgba(0,0,0,.6),0 0 0 1px color-mix(in srgb,var(--cm-green) 22%,transparent)}

/* revelação ao rolar: blocos abaixo da dobra sobem e aparecem quando chegam à tela */
.cm-pre{opacity:0;transform:translateY(16px);animation:none!important}
.cm-pre.cm-in{opacity:1;transform:none;transition:opacity .6s var(--cm-ease),transform .6s var(--cm-ease)}
@media (prefers-reduced-motion:reduce){.cm-pre{opacity:1;transform:none}.csl-content>.csl-section-header::before,.card>.csl-section-header::before,.csl-content>h1:first-child::before,.page-head::before,.empty,.csl-empty,.empty svg,.csl-empty svg,.skeleton{animation:none!important}}

/* =====================================================================
   v12 — barras de busca e de filtros, paginação, botões de status, KPIs e animações
   ===================================================================== */
@keyframes cm-blink{0%,100%{transform:scaleY(1)}45%{transform:scaleY(.1)}}
@keyframes cm-border-run{from{background-position:0% 50%}to{background-position:200% 50%}}

/* barra de busca: campo em cápsula, com lupa que acende e brilho correndo na borda ao focar */
:is(input[type="search"],input.search,input[placeholder^="Buscar"],input[placeholder^="Pesquisar"],input[placeholder^="Procurar"]):not(svg ~ input):not(:has(~ svg)){
  border-radius:999px!important;padding-left:40px!important;
  background-color:color-mix(in srgb,var(--cm-green) 4%,var(--bg-2))!important;background-repeat:no-repeat!important;background-position:14px center!important;background-size:16px!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23788a7e' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E")!important;
  transition:border-color .2s ease,box-shadow .3s ease,background-color .2s ease,transform .25s var(--cm-ease)!important}
:is(input[type="search"],input.search,input[placeholder^="Buscar"],input[placeholder^="Pesquisar"],input[placeholder^="Procurar"]):not(svg ~ input):not(:has(~ svg)):focus{
  transform:translateY(-1px);background-color:var(--bg-2)!important;box-shadow:0 0 0 3px var(--accent-soft),0 12px 24px -14px color-mix(in srgb,var(--cm-green) 80%,transparent)!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322C55E' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E")!important}
input[type="search"]::-webkit-search-cancel-button{cursor:pointer;filter:hue-rotate(80deg) saturate(2)}

/* barra de filtros (Loja / Exibir lojas / Período / Buscar): rótulos pequenos, campos alinhados, linha de luz que acende com o foco */
.toolbar{position:relative}
.toolbar .field>label,.toolbar>div>label{font-size:10.5px!important;font-weight:800!important;letter-spacing:.08em;text-transform:uppercase;color:var(--text-1)!important;margin-bottom:6px!important}
.toolbar:focus-within::after{content:"";position:absolute;left:0;right:0;bottom:-8px;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,var(--cm-green),transparent) 0 50%/200% 100%;animation:cm-border-run 2.4s linear infinite}
.account-filter-btn{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:40px;padding:0 14px;border-radius:10px;border:1px solid var(--border-strong);background:var(--bg-2);color:var(--text-0);font-weight:650;cursor:pointer;transition:border-color .18s ease,box-shadow .22s ease,transform .22s var(--cm-ease)}
@media (hover:hover){.account-filter-btn:hover{border-color:color-mix(in srgb,var(--cm-green) 55%,var(--border-strong));transform:translateY(-1px);box-shadow:0 10px 20px -14px color-mix(in srgb,var(--cm-green) 80%,transparent)}}
.account-filter-panel{border-radius:14px;border:1px solid color-mix(in srgb,var(--cm-green) 20%,var(--border-strong));box-shadow:0 24px 50px rgba(0,0,0,.4);animation:cm-pop .22s var(--cm-ease) both}

/* paginação: barra com relevo, botões Anterior/Próxima que acendem */
.pagination-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:10px 14px;border:1px solid color-mix(in srgb,var(--cm-green) 14%,var(--border));border-radius:14px;background:linear-gradient(90deg,color-mix(in srgb,var(--cm-green) 6%,var(--bg-2)),var(--bg-2) 60%)}
.pagination-bar .pg-info{font-size:12.5px;font-weight:650;color:var(--text-1)}
.pagination-bar button{min-width:96px}
.pagination-bar button:disabled{opacity:.4}
.pagination-bar [data-role="next"]:not(:disabled){border-color:color-mix(in srgb,var(--cm-green) 50%,var(--border-strong))!important;color:var(--cm-green)!important}
@media (hover:hover){.pagination-bar [data-role="next"]:hover:not(:disabled)>*,.pagination-bar button:hover:not(:disabled){letter-spacing:.01em}}

/* botões de status: atenção (âmbar), sucesso (verde), perigo (vermelho) com relevo e luz */
button.warn,.btn.warn,button.attention{color:#ffc768!important;background:linear-gradient(180deg,rgba(255,174,50,.16),rgba(255,174,50,.06))!important;border:1px solid rgba(255,174,50,.5)!important;box-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 8px 18px -12px rgba(255,174,50,.7)!important}
button.ok,.btn.ok,button.success{color:var(--cm-green)!important;background:linear-gradient(180deg,color-mix(in srgb,var(--cm-green) 18%,transparent),color-mix(in srgb,var(--cm-green) 7%,transparent))!important;border:1px solid color-mix(in srgb,var(--cm-green) 55%,transparent)!important}
.c49-primary,button.c49-primary{background:linear-gradient(180deg,color-mix(in srgb,var(--accent-2,var(--accent)) 88%,#fff),var(--accent))!important;color:var(--accent-ink,#04120a)!important;border:1px solid color-mix(in srgb,var(--accent) 80%,#000)!important;box-shadow:0 1px 0 rgba(255,255,255,.28) inset,0 8px 18px -10px color-mix(in srgb,var(--accent) 80%,transparent)!important;border-radius:10px;font-weight:800}

/* olhinho de privacidade: pisca ao passar o mouse */
@media (hover:hover){.csl-eye-toggle:hover>svg{animation:cm-blink .5s ease both}}

/* linha de status (motor automático, sincronização): ponto que pulsa e barra de luz */
.auto-dot{position:relative}
.auto-dot.on,.auto-dot.running{animation:cm-ring 2.4s ease-out infinite}
.notice,.syncbox{border-radius:12px}
.kpi-sub,.kpi-label{transition:color .2s ease}
@media (hover:hover){:is(.kpi,.kpi-box,.kpi-card):hover .kpi-sub{color:var(--text-1)!important}}
@media (prefers-reduced-motion:reduce){.toolbar:focus-within::after,.account-filter-panel,.auto-dot.on,.auto-dot.running,.csl-eye-toggle:hover>svg{animation:none!important}}