/* DROP OS — estilo opcional "Glassy" (vidro escuro) sobre o visual v2. Escolhido em Aparência (panel-appearance.js),
   salvo no navegador (dropos.appearance.v1 .skin) e aplicado antes da 1a pintura pelo anti-FOUC (html[data-skin="glassy"]).
   Sempre escuro: com o Glassy o data-theme fica "dark" e o sol/lua só leva para a Aparência.
   Regras: nada de display/visibility/order/pointer-events/grade; cores de estado inline intactas; sem o atributo, nada muda.
   Desempenho: blur só em 3 superfícies (menu, cabeçalho, camadas) e só em tela grande; cards são vidro "pintado" (sem blur).
   Gerado de glassy.src.css (macros html[data-ui="v2"][data-skin="glassy"] html[data-ui="v2"][data-skin="glassy"] body.dropos-workspace:is(body, #gl-a#gl-b#gl-c) @media (min-width: 1025px) and (hover: hover) and (pointer: fine) @media (max-width: 1024px) @media (prefers-reduced-motion: no-preference)). */

/* ---------- Miniaturas do modal Aparência (valem com ou sem o Glassy: só elementos novos) ---------- */
html[data-ui="v2"] body.dropos-workspace #dwAppearance .dw-skin-sample { position: relative; }
/* peças posicionadas (absolute já as torna caixas: nada de display) */
html[data-ui="v2"] body.dropos-workspace #dwAppearance :is(.dw-skin-rail, .dw-skin-rail > *, .dw-skin-body, .dw-skin-body > *, .dw-skin-kpis > *) { position: absolute; }
html[data-ui="v2"] body.dropos-workspace #dwAppearance .dw-skin-rail { left: 10px; top: 10px; bottom: 10px; width: 18px; border-radius: 6px; }
html[data-ui="v2"] body.dropos-workspace #dwAppearance .dw-skin-rail > b { left: 4px; top: 6px; width: 10px; height: 10px; border-radius: 3px; }
html[data-ui="v2"] body.dropos-workspace #dwAppearance .dw-skin-rail > i { left: 5px; width: 8px; height: 8px; border-radius: 50%; }
html[data-ui="v2"] body.dropos-workspace #dwAppearance .dw-skin-rail > i:nth-of-type(1) { top: 26px; }
html[data-ui="v2"] body.dropos-workspace #dwAppearance .dw-skin-rail > i:nth-of-type(2) { top: 40px; }
html[data-ui="v2"] body.dropos-workspace #dwAppearance .dw-skin-rail > i:nth-of-type(3) { top: 54px; }
html[data-ui="v2"] body.dropos-workspace #dwAppearance .dw-skin-body { left: 38px; right: 10px; top: 10px; bottom: 10px; }
html[data-ui="v2"] body.dropos-workspace #dwAppearance .dw-skin-body > b { left: 0; top: 2px; width: 55%; height: 8px; border-radius: 4px; }
html[data-ui="v2"] body.dropos-workspace #dwAppearance .dw-skin-body > .dw-skin-kpis { left: 0; right: 0; top: 18px; height: 22px; }
html[data-ui="v2"] body.dropos-workspace #dwAppearance .dw-skin-kpis > i { top: 0; bottom: 0; width: calc((100% - 12px) / 3); border-radius: 6px; }
html[data-ui="v2"] body.dropos-workspace #dwAppearance .dw-skin-kpis > i:nth-of-type(1) { left: 0; }
html[data-ui="v2"] body.dropos-workspace #dwAppearance .dw-skin-kpis > i:nth-of-type(2) { left: calc((100% - 12px) / 3 + 6px); }
html[data-ui="v2"] body.dropos-workspace #dwAppearance .dw-skin-kpis > i:nth-of-type(3) { right: 0; }
html[data-ui="v2"] body.dropos-workspace #dwAppearance .dw-skin-body > em { left: 0; right: 0; top: 46px; bottom: 0; border-radius: 6px; }
/* Padrão: superfícies sólidas do v2 com o vermelho da marca */
html[data-ui="v2"] body.dropos-workspace #dwAppearance .dw-skin-padrao { background: hsl(var(--v2-background)) !important; }
html[data-ui="v2"] body.dropos-workspace #dwAppearance .dw-skin-padrao .dw-skin-rail { background: hsl(var(--v2-card)); border: 1px solid hsl(var(--v2-border)); }
html[data-ui="v2"] body.dropos-workspace #dwAppearance .dw-skin-padrao .dw-skin-rail b { background: hsl(356 100% 57%); }
html[data-ui="v2"] body.dropos-workspace #dwAppearance .dw-skin-padrao .dw-skin-rail i { background: hsl(var(--v2-muted-foreground) / .5); }
html[data-ui="v2"] body.dropos-workspace #dwAppearance .dw-skin-padrao .dw-skin-body > b { background: hsl(var(--v2-foreground) / .7); }
html[data-ui="v2"] body.dropos-workspace #dwAppearance .dw-skin-padrao :is(.dw-skin-kpis i, .dw-skin-body > em) { background: hsl(var(--v2-card)); border: 1px solid hsl(var(--v2-border)); border-radius: 3px; }
/* Glassy: fundo azul-noite com reflexos, vidro claro a 10%, ciano e esmeralda */
html[data-ui="v2"] body.dropos-workspace #dwAppearance .dw-skin-glassy { background: radial-gradient(120% 90% at 10% 0%, rgb(56 132 255 / .35), transparent 60%), radial-gradient(90% 80% at 100% 100%, rgb(34 211 238 / .22), transparent 60%), #060912 !important; }
html[data-ui="v2"] body.dropos-workspace #dwAppearance .dw-skin-glassy .dw-skin-rail { background: rgb(255 255 255 / .06); border: 1px solid rgb(255 255 255 / .12); }
html[data-ui="v2"] body.dropos-workspace #dwAppearance .dw-skin-glassy .dw-skin-rail b { background: #38bdf8; box-shadow: 0 0 8px #38bdf8; }
html[data-ui="v2"] body.dropos-workspace #dwAppearance .dw-skin-glassy .dw-skin-rail i { background: rgb(255 255 255 / .45); }
html[data-ui="v2"] body.dropos-workspace #dwAppearance .dw-skin-glassy .dw-skin-body > b { background: rgb(255 255 255 / .85); }
html[data-ui="v2"] body.dropos-workspace #dwAppearance .dw-skin-glassy :is(.dw-skin-kpis i, .dw-skin-body > em) { background: linear-gradient(180deg, rgb(255 255 255 / .12), rgb(255 255 255 / .03)); border: 1px solid rgb(255 255 255 / .12); box-shadow: inset 0 1px 0 rgb(255 255 255 / .18); border-radius: 7px; }
html[data-ui="v2"] body.dropos-workspace #dwAppearance .dw-skin-glassy .dw-skin-kpis > i:nth-of-type(1) { box-shadow: inset 0 1px 0 rgb(255 255 255 / .18), inset 0 -3px 0 #34d399; }

/* ---------- Tokens: remapeados (o v2 inteiro passa a usar a paleta de vidro) ---------- */
html[data-ui="v2"][data-skin="glassy"], html[data-ui="v2"][data-skin="glassy"][data-theme] {
  color-scheme: dark;
  --v2-background: 228 45% 4%;
  --v2-foreground: 0 0% 100%;
  /* card e popover translúcidos (hsl(H S L / a) é válido; o v2 só usa --v2-card com alfa no tema claro, que o Glassy desliga) */
  --v2-card: 222 38% 14% / .42;
  --v2-card-foreground: 0 0% 100%;
  --v2-popover: 226 40% 9% / .94;
  --v2-popover-foreground: 0 0% 100%;
  /* ciano em 42% de luz: branco por cima dá 3,5:1 e ele como texto no fundo escuro dá 5,4:1 */
  --v2-primary: 198 90% 42%;
  --v2-primary-foreground: 0 0% 100%;
  --v2-primary-glow: 190 95% 72%;
  --v2-primary-deep: 200 90% 44%;
  --v2-secondary: 223 30% 16%;
  --v2-secondary-foreground: 0 0% 100%;
  --v2-muted: 223 30% 14%;
  --v2-muted-foreground: 220 14% 70%;
  --v2-accent: 222 32% 19%;
  --v2-accent-foreground: 0 0% 100%;
  --v2-destructive: 356 96% 64%;
  --v2-destructive-foreground: 0 0% 100%;
  --v2-success: 158 64% 52%;
  --v2-success-foreground: 226 55% 7%;
  --v2-warning: 38 92% 60%;
  --v2-warning-foreground: 226 55% 7%;
  --v2-border: 222 22% 21%;
  --v2-input: 222 22% 24%;
  --v2-ring: 195 92% 58%;
  --v2-header-start: 228 45% 4%;
  --v2-header-end: 226 40% 7%;
  --v2-conversion: 187 85% 53%;
  --v2-chart-revenue: 158 64% 52%;
  --v2-chart-profit: 158 64% 52%;
  --v2-sidebar-background: 228 45% 4%;
  --v2-sidebar-foreground: 0 0% 100%;
  --v2-sidebar-primary: 198 90% 42%;
  --v2-sidebar-primary-foreground: 0 0% 100%;
  --v2-sidebar-accent: 222 32% 16%;
  --v2-sidebar-accent-foreground: 0 0% 100%;
  --v2-sidebar-border: 222 22% 18%;
  --v2-sidebar-ring: 195 92% 58%;
  --v2-merchant-shadow: inset 0 1px 0 rgb(255 255 255 / .07), 0 12px 32px -14px rgb(0 0 0 / .7);
  --v2-admin-shadow: inset 0 1px 0 rgb(255 255 255 / .07), 0 12px 32px -14px rgb(0 0 0 / .7);
  --v2-shadow-red: 0 10px 30px -10px hsl(195 92% 58% / .45);
  --v2-glow-red: 0 0 24px hsl(195 92% 58% / .35);
  /* tokens próprios do Glassy */
  --gl-line: rgb(255 255 255 / .10);
  --gl-line-strong: rgb(255 255 255 / .16);
  --gl-glass: linear-gradient(180deg, rgb(255 255 255 / .075) 0%, rgb(255 255 255 / .025) 38%, rgb(255 255 255 / .012) 100%);
  --gl-shine: inset 0 1px 0 rgb(255 255 255 / .09), inset 0 0 0 1px rgb(255 255 255 / .02);
  --gl-drop: 0 18px 40px -22px rgb(0 0 0 / .85);
  --gl-chrome: 226 45% 6%;
}

/* ---------- Fundo: quase preto azulado com reflexos (pintado no <html>, atrás de tudo) ---------- */
html[data-ui="v2"][data-skin="glassy"] {
  background:
    radial-gradient(900px 520px at 12% -8%, rgb(37 99 235 / .20), transparent 62%),
    radial-gradient(760px 460px at 92% 4%, rgb(34 211 238 / .10), transparent 60%),
    radial-gradient(1100px 700px at 55% 108%, rgb(79 70 229 / .13), transparent 62%),
    linear-gradient(180deg, #070a13 0%, #04060c 100%) !important;
  background-attachment: fixed !important;
  background-color: #05070d !important;
}
html[data-ui="v2"][data-skin="glassy"] body.dropos-workspace:is(body, #gl-a#gl-b#gl-c) { background: transparent !important; }
html[data-ui="v2"][data-skin="glassy"] body.dropos-workspace:is(body, #gl-a#gl-b#gl-c) :is(#app, #app > main.main, .app, .app > main) { background: transparent !important; }

/* ---------- Menu lateral: vidro escuro ---------- */
html[data-ui="v2"][data-skin="glassy"] body.dropos-workspace:is(body, #gl-a#gl-b#gl-c) :is(#app > .sidebar, .app > #side) {
  background: linear-gradient(180deg, hsl(var(--gl-chrome) / .86), hsl(228 45% 4% / .9)) !important;
  border-right: 1px solid var(--gl-line) !important;
  box-shadow: inset -1px 0 0 rgb(255 255 255 / .02);
}
html[data-ui="v2"][data-skin="glassy"] body.dropos-workspace:is(body, #gl-a#gl-b#gl-c) :is(.side-nav .tab-btn, #nav > button) { border-radius: 12px !important; }
html[data-ui="v2"][data-skin="glassy"] body.dropos-workspace:is(body, #gl-a#gl-b#gl-c) :is(.side-nav .tab-btn.active, .side-nav .tab-btn[aria-current="page"], #nav > button.on) {
  background: linear-gradient(90deg, hsl(195 92% 58% / .16), hsl(195 92% 58% / .04)) !important;
  color: hsl(195 95% 72%) !important;
  box-shadow: inset 0 0 0 1px hsl(195 92% 58% / .22), inset 3px 0 0 hsl(195 92% 58%) !important;
}
html[data-ui="v2"][data-skin="glassy"] body.dropos-workspace:is(body, #gl-a#gl-b#gl-c) :is(.side-nav .tab-btn, #nav > button):not(.active):not(.on):hover { background: rgb(255 255 255 / .05) !important; }
html[data-ui="v2"][data-skin="glassy"] body.dropos-workspace:is(body, #gl-a#gl-b#gl-c) :is(.dw-appearance-open, .ms-btn) { border-radius: 14px !important; border-color: var(--gl-line) !important; background: rgb(255 255 255 / .035) !important; }

/* ---------- Cabeçalho ---------- */
html[data-ui="v2"][data-skin="glassy"] body.dropos-workspace:is(body, #gl-a#gl-b#gl-c) #app .main-top {
  background: linear-gradient(180deg, hsl(var(--gl-chrome) / .82), hsl(var(--gl-chrome) / .66)) !important;
  border-bottom: 1px solid var(--gl-line) !important;
}

/* ---------- Cards de vidro (lojista e super) ---------- */
/* vidro completo (degradê + brilho + sombra + canto 18px) só em cards que já são caixas com respiro interno */
html[data-ui="v2"][data-skin="glassy"] body.dropos-workspace:is(body, #gl-a#gl-b#gl-c) :is(.vg-kpi, .vg-card, .card, .rz-card, .rp-kpi, .rt-stat, .acc-stat, .gwcv-kpi, .cd-kpi, .sd-card) {
  background-image: var(--gl-glass) !important;
  border-color: var(--gl-line) !important;
  border-radius: 18px !important;
  box-shadow: var(--gl-shine), var(--gl-drop) !important;
}
/* painéis genéricos: só a borda clara (canto e preenchimento do v2 ficam; alguns não têm respiro interno) */
html[data-ui="v2"][data-skin="glassy"] body.dropos-workspace:is(body, #gl-a#gl-b#gl-c) :is(.dw-motion-card, #app .panel) { border-color: var(--gl-line) !important; }
/* KPI: o realce colorido do topo vira um brilho fino (mesma cor de estado) */
html[data-ui="v2"][data-skin="glassy"] body.dropos-workspace:is(body, #gl-a#gl-b#gl-c) #overviewContent .vg-kpis > * { border-radius: 18px !important; border-color: var(--gl-line) !important; }
html[data-ui="v2"][data-skin="glassy"] body.dropos-workspace:is(body, #gl-a#gl-b#gl-c) #overviewContent .vg-kpis > .vg-kpi.rev { border-top-color: rgb(52 211 153 / .55) !important; }
html[data-ui="v2"][data-skin="glassy"] body.dropos-workspace:is(body, #gl-a#gl-b#gl-c) #overviewContent .vg-kpis > .vg-kpi:nth-child(2) { border-top-color: hsl(195 92% 58% / .55) !important; }
/* tabelas dentro de card: o cabeçalho fica no vidro */
html[data-ui="v2"][data-skin="glassy"] body.dropos-workspace:is(body, #gl-a#gl-b#gl-c) :is(#app, .app) table thead th { background: rgb(255 255 255 / .03) !important; border-bottom-color: var(--gl-line) !important; color: hsl(220 14% 72%) !important; letter-spacing: .02em; }
html[data-ui="v2"][data-skin="glassy"] body.dropos-workspace:is(body, #gl-a#gl-b#gl-c) :is(#app, .app) table tbody td { border-bottom-color: rgb(255 255 255 / .06) !important; }
html[data-ui="v2"][data-skin="glassy"] body.dropos-workspace:is(body, #gl-a#gl-b#gl-c) :is(#app, .app) table tbody tr:hover > td { background: rgb(255 255 255 / .025) !important; }

/* ---------- Pílulas e botões ---------- */
html[data-ui="v2"][data-skin="glassy"] body.dropos-workspace:is(body, #gl-a#gl-b#gl-c) :is(.vg-pill, #perDash > .btn, .top .row > .btn:not(.hamb), .pill, .rc-chip) { border-radius: 999px !important; }
html[data-ui="v2"][data-skin="glassy"] body.dropos-workspace:is(body, #gl-a#gl-b#gl-c) :is(.vg-pill, .top .btn, .btn:not(.brand):not(.danger):not(.on)) { border-color: var(--gl-line) !important; }
html[data-ui="v2"][data-skin="glassy"] body.dropos-workspace:is(body, #gl-a#gl-b#gl-c) :is(.vg-pill:not(.on), .top .btn:not(.on):not(.brand)) { background: rgb(255 255 255 / .04) !important; }
html[data-ui="v2"][data-skin="glassy"] body.dropos-workspace:is(body, #gl-a#gl-b#gl-c) :is(.vg-pill.on, #perDash > .btn.on, .top .btn.on) {
  background: linear-gradient(180deg, hsl(195 95% 66%), hsl(198 90% 52%)) !important;
  border-color: hsl(195 95% 70% / .6) !important;
  color: hsl(226 55% 7%) !important;
  box-shadow: 0 6px 18px -8px hsl(195 92% 58% / .7), inset 0 1px 0 rgb(255 255 255 / .35) !important;
}
html[data-ui="v2"][data-skin="glassy"] body.dropos-workspace:is(body, #gl-a#gl-b#gl-c) :is(.btn, button.btn, .btn-atualizar, .ui-v2-tools button) { border-radius: 12px !important; }
html[data-ui="v2"][data-skin="glassy"] body.dropos-workspace:is(body, #gl-a#gl-b#gl-c) .ui-v2-tools button, html[data-ui="v2"][data-skin="glassy"] body.dropos-workspace:is(body, #gl-a#gl-b#gl-c) #btnAtualizar { background: rgb(255 255 255 / .04) !important; border-color: var(--gl-line) !important; }
/* botões neutros viram vidro; botão com cor própria inline (estado) fica como está */
html[data-ui="v2"][data-skin="glassy"] body.dropos-workspace:is(body, #gl-a#gl-b#gl-c) :is(#app, .app) .btn:not(.brand):not(.danger):not(.on):not(.primary):not(.pri):not(.active):not(.sel):not([aria-pressed="true"]):not([style*="background"]) { background-color: rgb(255 255 255 / .045) !important; border-color: var(--gl-line) !important; }

/* ---------- Campos ---------- */
html[data-ui="v2"][data-skin="glassy"] body.dropos-workspace:is(body, #gl-a#gl-b#gl-c) :is(#app, .app, dialog, .modal-bg) :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]), select, textarea) {
  background-color: rgb(255 255 255 / .04) !important;
  border-color: rgb(255 255 255 / .12) !important;
  border-radius: 12px !important;
}
html[data-ui="v2"][data-skin="glassy"] body.dropos-workspace:is(body, #gl-a#gl-b#gl-c) :is(#app, .app, dialog, .modal-bg) :is(input, select, textarea):focus-visible { border-color: hsl(195 92% 58% / .7) !important; box-shadow: 0 0 0 3px hsl(195 92% 58% / .2) !important; outline: none !important; }

/* ---------- Camadas: modais, diálogos, paleta Ctrl K ---------- */
html[data-ui="v2"][data-skin="glassy"] body.dropos-workspace:is(body, #gl-a#gl-b#gl-c) :is(.modal-bg, #gwTestOv, #cfgPalOv) { background-color: rgb(3 5 12 / .86) !important; }
html[data-ui="v2"][data-skin="glassy"] body.dropos-workspace:is(body, #gl-a#gl-b#gl-c) :is(.modal-bg > .modal, .modal-bg .modal-box, dialog[open]) {
  border: 1px solid var(--gl-line-strong) !important;
  border-radius: 22px !important;
  background-image: linear-gradient(180deg, rgb(255 255 255 / .06), rgb(255 255 255 / .01) 30%) !important;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .1), 0 30px 80px -30px rgb(0 0 0 / .9) !important;
}
html[data-ui="v2"][data-skin="glassy"] body.dropos-workspace:is(body, #gl-a#gl-b#gl-c) dialog[open]::backdrop { background: rgb(3 5 12 / .86); }
html[data-ui="v2"][data-skin="glassy"] body.dropos-workspace:is(body, #gl-a#gl-b#gl-c) #dwAppearance .dw-theme-card { border-radius: 16px !important; border-color: var(--gl-line) !important; }
html[data-ui="v2"][data-skin="glassy"] body.dropos-workspace:is(body, #gl-a#gl-b#gl-c) #dwAppearance .dw-theme-card[aria-pressed=true] { border-color: hsl(195 92% 58%) !important; background: hsl(195 92% 58% / .06) !important; }
html[data-ui="v2"][data-skin="glassy"] body.dropos-workspace:is(body, #gl-a#gl-b#gl-c) #dwAppearance .dw-theme-sample { border-radius: 10px !important; }

/* ---------- Gráficos: grade e linhas no tom do vidro ---------- */
html[data-ui="v2"][data-skin="glassy"] body.dropos-workspace:is(body, #gl-a#gl-b#gl-c) :is(#app, .app) svg :is(line, path)[stroke="#27272f" i] { stroke: rgb(255 255 255 / .08) !important; }

/* ---------- Blur: só em tela grande e onde o navegador suporta (iPhone antigo trava com blur em muitos cards) ---------- */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  @media (min-width: 1025px) and (hover: hover) and (pointer: fine) {
    html[data-ui="v2"][data-skin="glassy"] body.dropos-workspace:is(body, #gl-a#gl-b#gl-c) :is(#app > .sidebar, .app > #side) { -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%); background: linear-gradient(180deg, hsl(var(--gl-chrome) / .62), hsl(228 45% 4% / .72)) !important; }
    html[data-ui="v2"][data-skin="glassy"] body.dropos-workspace:is(body, #gl-a#gl-b#gl-c) #app .main-top { -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); background: hsl(var(--gl-chrome) / .82) !important; }
    html[data-ui="v2"][data-skin="glassy"] body.dropos-workspace:is(body, #gl-a#gl-b#gl-c) :is(.modal-bg, #gwTestOv, #cfgPalOv) { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
    html[data-ui="v2"][data-skin="glassy"] body.dropos-workspace:is(body, #gl-a#gl-b#gl-c) dialog[open]::backdrop { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
  }
}

/* ---------- Menu só com ícones (tela grande com mouse) ----------
   O menu mantém a largura e o layout de sempre; o clip-path mostra só a faixa de 72px dos ícones (e corta também o clique
   fora dela). Ao passar o mouse ou focar pelo teclado, ele abre por cima do conteúdo. Nada muda de lugar dentro do menu. */
@media (min-width: 1025px) and (hover: hover) and (pointer: fine) {
  html[data-ui="v2"][data-skin="glassy"] body.dropos-workspace:is(body, #gl-a#gl-b#gl-c) :is(#app > .sidebar, .app > #side) { z-index: 60; }
  html[data-ui="v2"][data-skin="glassy"] body.dropos-workspace:is(body, #gl-a#gl-b#gl-c) #app > main.main { margin-left: 72px !important; width: calc(100% - 72px) !important; }
  html[data-ui="v2"][data-skin="glassy"] body.dropos-workspace:is(body, #gl-a#gl-b#gl-c) .app > main { margin-left: 72px !important; width: calc(100% - 72px) !important; }
  html[data-ui="v2"][data-skin="glassy"] body.dropos-workspace:is(body, #gl-a#gl-b#gl-c) :is(#app > .sidebar, .app > #side):not(:hover):not(:has(:focus-visible)) {
    clip-path: inset(0 calc(100% - 72px) 0 0);
    background-image: linear-gradient(90deg, transparent 71px, var(--gl-line) 71px, var(--gl-line) 72px, transparent 72px), linear-gradient(180deg, hsl(var(--gl-chrome) / .62), hsl(228 45% 4% / .72)) !important;
  }
  /* recolhido: textos somem (cor transparente), ícones ficam com cor própria */
  html[data-ui="v2"][data-skin="glassy"] body.dropos-workspace:is(body, #gl-a#gl-b#gl-c) :is(#app > .sidebar, .app > #side):not(:hover):not(:has(:focus-visible)) :is(*, *::before, *::after) { color: transparent !important; }
  html[data-ui="v2"][data-skin="glassy"] body.dropos-workspace:is(body, #gl-a#gl-b#gl-c) :is(#app > .sidebar, .app > #side):not(:hover):not(:has(:focus-visible)) svg { color: hsl(0 0% 100% / .72) !important; }
  html[data-ui="v2"][data-skin="glassy"] body.dropos-workspace:is(body, #gl-a#gl-b#gl-c) :is(#app > .sidebar, .app > #side):not(:hover):not(:has(:focus-visible)) :is(.side-nav .tab-btn, #nav > button)::before { background-color: hsl(0 0% 100% / .72) !important; }
  html[data-ui="v2"][data-skin="glassy"] body.dropos-workspace:is(body, #gl-a#gl-b#gl-c) :is(#app > .sidebar, .app > #side):not(:hover):not(:has(:focus-visible)) :is(.side-nav .tab-btn.active, .side-nav .tab-btn[aria-current="page"], #nav > button.on)::before { background-color: hsl(195 95% 66%) !important; }
  html[data-ui="v2"][data-skin="glassy"] body.dropos-workspace:is(body, #gl-a#gl-b#gl-c) :is(#app > .sidebar, .app > #side):not(:hover):not(:has(:focus-visible)) :is(.side-nav .tab-btn, #nav > button)::after { background-color: transparent !important; }
  html[data-ui="v2"][data-skin="glassy"] body.dropos-workspace:is(body, #gl-a#gl-b#gl-c) :is(#app > .sidebar, .app > #side):not(:hover):not(:has(:focus-visible)) :is(.ms-av, #dwAppearanceOpen, #btnPainelAdmin, #btnLogout, #btnMinhaLoja, #btnSair)::before { background-color: hsl(0 0% 100% / .72) !important; }
  html[data-ui="v2"][data-skin="glassy"] body.dropos-workspace:is(body, #gl-a#gl-b#gl-c) .app > #side:not(:hover):not(:has(:focus-visible)) #meAv { color: hsl(0 0% 100%) !important; }
  html[data-ui="v2"][data-skin="glassy"] body.dropos-workspace:is(body, #gl-a#gl-b#gl-c) :is(#app > .sidebar, .app > #side):is(:hover, :has(:focus-visible)) { clip-path: inset(0 -80px 0 0); box-shadow: 24px 0 60px -24px rgb(0 0 0 / .85) !important; }
}

/* ---------- Celular: mais opaco (sem blur) ---------- */
@media (max-width: 1024px) {
  html[data-ui="v2"][data-skin="glassy"] body.dropos-workspace:is(body, #gl-a#gl-b#gl-c) :is(#app > .sidebar, .app > #side) { background: hsl(var(--gl-chrome) / .97) !important; }
  html[data-ui="v2"][data-skin="glassy"] body.dropos-workspace:is(body, #gl-a#gl-b#gl-c) #app .main-top { background: hsl(var(--gl-chrome) / .94) !important; }
}

/* ---------- Movimento: o card sobe 5px no hover (framer whileHover y:-5); nada disso com movimento reduzido ---------- */
@media (prefers-reduced-motion: no-preference) {
  html[data-ui="v2"][data-skin="glassy"] body.dropos-workspace:is(body, #gl-a#gl-b#gl-c) :is(.vg-kpi, .card.kpi, .rt-stat, .acc-stat, .gwcv-kpi, .cd-kpi, .rz-card, .rp-kpi, .orders-stat, .sd-card) { transition: transform .28s cubic-bezier(.16, 1, .3, 1), box-shadow .28s ease, border-color .28s ease !important; }
  html[data-ui="v2"][data-skin="glassy"] body.dropos-workspace:is(body, #gl-a#gl-b#gl-c) :is(.vg-kpi, .card.kpi, .rt-stat, .acc-stat, .gwcv-kpi, .cd-kpi, .rz-card, .rp-kpi, .orders-stat, .sd-card):hover { transform: translateY(-5px) !important; border-color: var(--gl-line-strong) !important; box-shadow: var(--gl-shine), 0 24px 44px -20px rgb(0 0 0 / .9), 0 0 0 1px hsl(195 92% 58% / .08) !important; }
  @media (min-width: 1025px) and (hover: hover) and (pointer: fine) { html[data-ui="v2"][data-skin="glassy"] body.dropos-workspace:is(body, #gl-a#gl-b#gl-c) :is(#app > .sidebar, .app > #side) { transition: clip-path .24s cubic-bezier(.16, 1, .3, 1), box-shadow .24s ease !important; } }
}

/* ---------- Barras fixas sobre o conteúdo: continuam sólidas (o card translúcido deixaria o texto de baixo aparecer) ---------- */
html[data-ui="v2"][data-skin="glassy"] body.dropos-workspace:is(body, #gl-a#gl-b#gl-c) #storeView .cfg-savebar { background: hsl(226 40% 8%) !important; border-top: 1px solid var(--gl-line) !important; box-shadow: 0 -12px 30px -12px rgb(0 0 0 / .8) !important; }
/* contador da aba ativa do Recuperador (branco sobre ciano clareado): escurece só o fundo do número */
html[data-ui="v2"][data-skin="glassy"] body.dropos-workspace:is(body, #gl-a#gl-b#gl-c) #rcViews > [aria-selected="true"] > b { background: rgb(0 0 0 / .25) !important; }
/* contador da aba ativa do Funil (branco a 20% sobre o ciano clareava demais o fundo do número) */
html[data-ui="v2"][data-skin="glassy"] body.dropos-workspace:is(body, #gl-a#gl-b#gl-c) #prodModalBg .funil-tab.active .ft-n { background: rgb(0 0 0 / .25) !important; }