/* paleta-contro.css — GERADO por ferramentas/gerar_paletas.py (v1.2, base 1.5.160). NÃO EDITE OS TOKENS À MÃO: mude a tabela PALETAS do gerador e rode de novo.
   Cada «cor de destaque» que o servidor já guarda por operador (data-cor) vira uma PALETA COMPLETA, em cada um dos 3 modos. Sem mudança de API, banco ou permissão. */

/* Contrô · claro */
:root[data-cor="amber"]:not([data-tema="escuro"]):not([data-tema="noturno"]), :root:not([data-cor]):not([data-tema="escuro"]):not([data-tema="noturno"]) {
  --bg: #F6F8FA; --card-bg: #FFFFFF; --surface-2: #EEF2F7; --border: #DCE2EB;
  --text: #202734; --text-muted: #5A6476; --text-3: #98A1B1; --sidebar-bg: #202734;
  --primary: #245AC7; --primary-hover: #1F4DAB; --primary-fg: #FFFFFF;
  --accent-text: #245AC7; --accent-dim: color-mix(in srgb, #245AC7 13%, #FFFFFF);
  --pal-sb-bg: #202734; --pal-sb-texto: #F2F5F9; --pal-sb-acento: #64AEFF; --pal-sb-acento-fg: #202734; --pal-giro: 0deg;
  --marca-eletrico: #64AEFF; --marca-grafite: #202734; --marca-acao: #245AC7;
}

/* Contrô · escuro */
:root[data-cor="amber"][data-tema="escuro"], :root:not([data-cor])[data-tema="escuro"] {
  --bg: #171C26; --card-bg: #202734; --surface-2: #283041; --border: #333C4F;
  --text: #F2F5F9; --text-muted: #A6AFBF; --text-3: #6E7890; --sidebar-bg: #141820;
  --primary: #64AEFF; --primary-hover: #80BDFF; --primary-fg: #202734;
  --accent-text: #80BDFF; --accent-dim: color-mix(in srgb, #64AEFF 16%, #202734);
  --pal-sb-bg: #141820; --pal-sb-texto: #F2F5F9; --pal-sb-acento: #64AEFF; --pal-sb-acento-fg: #202734; --pal-giro: 0deg;
  --marca-eletrico: #64AEFF; --marca-grafite: #141820; --marca-acao: #64AEFF;
}

/* Contrô · noturno */
:root[data-cor="amber"][data-tema="noturno"], :root:not([data-cor])[data-tema="noturno"] {
  --bg: #191615; --card-bg: #221D1A; --surface-2: #2B241F; --border: #382F2A;
  --text: #F0E6DA; --text-muted: #A89686; --text-3: #7A6B5C; --sidebar-bg: #171312;
  --primary: #64AEFF; --primary-hover: #80BDFF; --primary-fg: #202734;
  --accent-text: #80BDFF; --accent-dim: color-mix(in srgb, #64AEFF 16%, #221D1A);
  --pal-sb-bg: #171312; --pal-sb-texto: #F2F5F9; --pal-sb-acento: #64AEFF; --pal-sb-acento-fg: #202734; --pal-giro: 0deg;
  --marca-eletrico: #64AEFF; --marca-grafite: #171312; --marca-acao: #64AEFF;
}

/* Violeta · claro */
:root[data-cor="roxo"]:not([data-tema="escuro"]):not([data-tema="noturno"]) {
  --bg: #F5F4F8; --card-bg: #FFFFFF; --surface-2: #EDEBF4; --border: #D8D4E5;
  --text: #1A152E; --text-muted: #544E6A; --text-3: #88819C; --sidebar-bg: #1B1530;
  --primary: #6D5DE6; --primary-hover: #5E50C6; --primary-fg: #FFFFFF;
  --accent-text: #6959E5; --accent-dim: color-mix(in srgb, #6D5DE6 13%, #FFFFFF);
  --pal-sb-bg: #1B1530; --pal-sb-texto: #F0EEF6; --pal-sb-acento: #B3A7FF; --pal-sb-acento-fg: #10151C; --pal-giro: 37deg;
  --marca-eletrico: #B3A7FF; --marca-grafite: #1B1530; --marca-acao: #6D5DE6;
}

/* Violeta · escuro */
:root[data-cor="roxo"][data-tema="escuro"] {
  --bg: #120E1D; --card-bg: #1A162A; --surface-2: #231D37; --border: #322A4B;
  --text: #F0EFF6; --text-muted: #ADA8BD; --text-3: #7E7891; --sidebar-bg: #0D0A17;
  --primary: #A89BFF; --primary-hover: #B8ADFF; --primary-fg: #10151C;
  --accent-text: #B8ADFF; --accent-dim: color-mix(in srgb, #A89BFF 16%, #1A162A);
  --pal-sb-bg: #0D0A17; --pal-sb-texto: #F0EEF6; --pal-sb-acento: #B3A7FF; --pal-sb-acento-fg: #10151C; --pal-giro: 37deg;
  --marca-eletrico: #B3A7FF; --marca-grafite: #0D0A17; --marca-acao: #A89BFF;
}

/* Violeta · noturno */
:root[data-cor="roxo"][data-tema="noturno"] {
  --bg: #1A1515; --card-bg: #221C1B; --surface-2: #2B2320; --border: #382E2A;
  --text: #F0E6DA; --text-muted: #A89686; --text-3: #7A6B5C; --sidebar-bg: #171213;
  --primary: #A89BFF; --primary-hover: #B8ADFF; --primary-fg: #10151C;
  --accent-text: #B8ADFF; --accent-dim: color-mix(in srgb, #A89BFF 16%, #221C1B);
  --pal-sb-bg: #171213; --pal-sb-texto: #F0EEF6; --pal-sb-acento: #B3A7FF; --pal-sb-acento-fg: #10151C; --pal-giro: 37deg;
  --marca-eletrico: #B3A7FF; --marca-grafite: #171213; --marca-acao: #A89BFF;
}

/* Oceano · claro */
:root[data-cor="azul"]:not([data-tema="escuro"]):not([data-tema="noturno"]) {
  --bg: #F3F6F9; --card-bg: #FFFFFF; --surface-2: #EAEFF6; --border: #D2DBE8;
  --text: #111F31; --text-muted: #49596E; --text-3: #7D8CA1; --sidebar-bg: #112034;
  --primary: #2563EB; --primary-hover: #2055CA; --primary-fg: #FFFFFF;
  --accent-text: #2563EB; --accent-dim: color-mix(in srgb, #2563EB 13%, #FFFFFF);
  --pal-sb-bg: #112034; --pal-sb-texto: #EEF2F6; --pal-sb-acento: #6AA8FF; --pal-sb-acento-fg: #10151C; --pal-giro: 4deg;
  --marca-eletrico: #6AA8FF; --marca-grafite: #112034; --marca-acao: #2563EB;
}

/* Oceano · escuro */
:root[data-cor="azul"][data-tema="escuro"] {
  --bg: #0C141F; --card-bg: #121E2D; --surface-2: #19283B; --border: #243851;
  --text: #EFF2F6; --text-muted: #A8B1BD; --text-3: #788391; --sidebar-bg: #091019;
  --primary: #6AA8FF; --primary-hover: #85B8FF; --primary-fg: #10151C;
  --accent-text: #85B8FF; --accent-dim: color-mix(in srgb, #6AA8FF 16%, #121E2D);
  --pal-sb-bg: #091019; --pal-sb-texto: #EEF2F6; --pal-sb-acento: #6AA8FF; --pal-sb-acento-fg: #10151C; --pal-giro: 4deg;
  --marca-eletrico: #6AA8FF; --marca-grafite: #091019; --marca-acao: #6AA8FF;
}

/* Oceano · noturno */
:root[data-cor="azul"][data-tema="noturno"] {
  --bg: #191616; --card-bg: #211D1B; --surface-2: #2A2420; --border: #372F2A;
  --text: #F0E6DA; --text-muted: #A89686; --text-3: #7A6B5C; --sidebar-bg: #161413;
  --primary: #6AA8FF; --primary-hover: #85B8FF; --primary-fg: #10151C;
  --accent-text: #85B8FF; --accent-dim: color-mix(in srgb, #6AA8FF 16%, #211D1B);
  --pal-sb-bg: #161413; --pal-sb-texto: #EEF2F6; --pal-sb-acento: #6AA8FF; --pal-sb-acento-fg: #10151C; --pal-giro: 4deg;
  --marca-eletrico: #6AA8FF; --marca-grafite: #161413; --marca-acao: #6AA8FF;
}

/* Floresta · claro */
:root[data-cor="verde"]:not([data-tema="escuro"]):not([data-tema="noturno"]) {
  --bg: #F4F8F7; --card-bg: #FFFFFF; --surface-2: #EBF4F1; --border: #D4E5DE;
  --text: #152E24; --text-muted: #4E6A5F; --text-3: #819C91; --sidebar-bg: #153025;
  --primary: #0F7F56; --primary-hover: #0D6D4A; --primary-fg: #FFFFFF;
  --accent-text: #0F7F56; --accent-dim: color-mix(in srgb, #0F7F56 13%, #FFFFFF);
  --pal-sb-bg: #153025; --pal-sb-texto: #EEF6F3; --pal-sb-acento: #3DDC97; --pal-sb-acento-fg: #10151C; --pal-giro: -57deg;
  --marca-eletrico: #3DDC97; --marca-grafite: #153025; --marca-acao: #0F7F56;
}

/* Floresta · escuro */
:root[data-cor="verde"][data-tema="escuro"] {
  --bg: #0E1D17; --card-bg: #162A22; --surface-2: #1D372D; --border: #2A4B3E;
  --text: #EFF6F3; --text-muted: #A8BDB5; --text-3: #789187; --sidebar-bg: #0A1712;
  --primary: #3DDC97; --primary-hover: #60E2AA; --primary-fg: #10151C;
  --accent-text: #60E2AA; --accent-dim: color-mix(in srgb, #3DDC97 16%, #162A22);
  --pal-sb-bg: #0A1712; --pal-sb-texto: #EEF6F3; --pal-sb-acento: #3DDC97; --pal-sb-acento-fg: #10151C; --pal-giro: -57deg;
  --marca-eletrico: #3DDC97; --marca-grafite: #0A1712; --marca-acao: #3DDC97;
}

/* Floresta · noturno */
:root[data-cor="verde"][data-tema="noturno"] {
  --bg: #191814; --card-bg: #221F19; --surface-2: #2A261E; --border: #373129;
  --text: #F0E6DA; --text-muted: #A89686; --text-3: #7A6B5C; --sidebar-bg: #171512;
  --primary: #3DDC97; --primary-hover: #60E2AA; --primary-fg: #10151C;
  --accent-text: #60E2AA; --accent-dim: color-mix(in srgb, #3DDC97 16%, #221F19);
  --pal-sb-bg: #171512; --pal-sb-texto: #EEF6F3; --pal-sb-acento: #3DDC97; --pal-sb-acento-fg: #10151C; --pal-giro: -57deg;
  --marca-eletrico: #3DDC97; --marca-grafite: #171512; --marca-acao: #3DDC97;
}

/* Rubi · claro */
:root[data-cor="rosa"]:not([data-tema="escuro"]):not([data-tema="noturno"]) {
  --bg: #F8F4F5; --card-bg: #FFFFFF; --surface-2: #F4EBEE; --border: #E5D4DA;
  --text: #2E151E; --text-muted: #6A4E58; --text-3: #9C818B; --sidebar-bg: #30151F;
  --primary: #C2185B; --primary-hover: #A7154E; --primary-fg: #FFFFFF;
  --accent-text: #C2185B; --accent-dim: color-mix(in srgb, #C2185B 13%, #FFFFFF);
  --pal-sb-bg: #30151F; --pal-sb-texto: #F6EEF1; --pal-sb-acento: #FF7AB8; --pal-sb-acento-fg: #10151C; --pal-giro: 121deg;
  --marca-eletrico: #FF7AB8; --marca-grafite: #30151F; --marca-acao: #C2185B;
}

/* Rubi · escuro */
:root[data-cor="rosa"][data-tema="escuro"] {
  --bg: #1D0E14; --card-bg: #2A161D; --surface-2: #371D27; --border: #4B2A36;
  --text: #F6EFF1; --text-muted: #BDA8B0; --text-3: #917881; --sidebar-bg: #170A0F;
  --primary: #FF7AB8; --primary-hover: #FF92C5; --primary-fg: #10151C;
  --accent-text: #FF92C5; --accent-dim: color-mix(in srgb, #FF7AB8 16%, #2A161D);
  --pal-sb-bg: #170A0F; --pal-sb-texto: #F6EEF1; --pal-sb-acento: #FF7AB8; --pal-sb-acento-fg: #10151C; --pal-giro: 121deg;
  --marca-eletrico: #FF7AB8; --marca-grafite: #170A0F; --marca-acao: #FF7AB8;
}

/* Rubi · noturno */
:root[data-cor="rosa"][data-tema="noturno"] {
  --bg: #1C1513; --card-bg: #251C19; --surface-2: #2D231E; --border: #3A2E28;
  --text: #F0E6DA; --text-muted: #A89686; --text-3: #7A6B5C; --sidebar-bg: #1A1211;
  --primary: #FF7AB8; --primary-hover: #FF92C5; --primary-fg: #10151C;
  --accent-text: #FF92C5; --accent-dim: color-mix(in srgb, #FF7AB8 16%, #251C19);
  --pal-sb-bg: #1A1211; --pal-sb-texto: #F6EEF1; --pal-sb-acento: #FF7AB8; --pal-sb-acento-fg: #10151C; --pal-giro: 121deg;
  --marca-eletrico: #FF7AB8; --marca-grafite: #1A1211; --marca-acao: #FF7AB8;
}

/* Maré · claro */
:root[data-cor="ciano"]:not([data-tema="escuro"]):not([data-tema="noturno"]) {
  --bg: #F3F8F9; --card-bg: #FFFFFF; --surface-2: #EAF3F5; --border: #D3E3E6;
  --text: #132A2F; --text-muted: #4C666B; --text-3: #80999E; --sidebar-bg: #132D32;
  --primary: #0B7285; --primary-hover: #096272; --primary-fg: #FFFFFF;
  --accent-text: #0B7285; --accent-dim: color-mix(in srgb, #0B7285 13%, #FFFFFF);
  --pal-sb-bg: #132D32; --pal-sb-texto: #EEF5F6; --pal-sb-acento: #3FD9EE; --pal-sb-acento-fg: #10151C; --pal-giro: -24deg;
  --marca-eletrico: #3FD9EE; --marca-grafite: #132D32; --marca-acao: #0B7285;
}

/* Maré · escuro */
:root[data-cor="ciano"][data-tema="escuro"] {
  --bg: #0D1B1E; --card-bg: #14282B; --surface-2: #1C3438; --border: #28474D;
  --text: #EFF5F6; --text-muted: #A8BABD; --text-3: #788D91; --sidebar-bg: #0A1518;
  --primary: #3FD9EE; --primary-hover: #62E0F1; --primary-fg: #10151C;
  --accent-text: #62E0F1; --accent-dim: color-mix(in srgb, #3FD9EE 16%, #14282B);
  --pal-sb-bg: #0A1518; --pal-sb-texto: #EEF5F6; --pal-sb-acento: #3FD9EE; --pal-sb-acento-fg: #10151C; --pal-giro: -24deg;
  --marca-eletrico: #3FD9EE; --marca-grafite: #0A1518; --marca-acao: #3FD9EE;
}

/* Maré · noturno */
:root[data-cor="ciano"][data-tema="noturno"] {
  --bg: #191816; --card-bg: #211E1B; --surface-2: #2A2520; --border: #37302A;
  --text: #F0E6DA; --text-muted: #A89686; --text-3: #7A6B5C; --sidebar-bg: #161513;
  --primary: #3FD9EE; --primary-hover: #62E0F1; --primary-fg: #10151C;
  --accent-text: #62E0F1; --accent-dim: color-mix(in srgb, #3FD9EE 16%, #211E1B);
  --pal-sb-bg: #161513; --pal-sb-texto: #EEF5F6; --pal-sb-acento: #3FD9EE; --pal-sb-acento-fg: #10151C; --pal-giro: -24deg;
  --marca-eletrico: #3FD9EE; --marca-grafite: #161513; --marca-acao: #3FD9EE;
}

/* Amostras (claro) do seletor de paletas */
.paleta-amostra[data-pal="amber"] i:nth-child(1) { background: #202734; }
.paleta-amostra[data-pal="amber"] i:nth-child(2) { background: #F6F8FA; }
.paleta-amostra[data-pal="amber"] i:nth-child(3) { background: #245AC7; }
.paleta-amostra[data-pal="roxo"] i:nth-child(1) { background: #1B1530; }
.paleta-amostra[data-pal="roxo"] i:nth-child(2) { background: #F5F4F8; }
.paleta-amostra[data-pal="roxo"] i:nth-child(3) { background: #6D5DE6; }
.paleta-amostra[data-pal="azul"] i:nth-child(1) { background: #112034; }
.paleta-amostra[data-pal="azul"] i:nth-child(2) { background: #F3F6F9; }
.paleta-amostra[data-pal="azul"] i:nth-child(3) { background: #2563EB; }
.paleta-amostra[data-pal="verde"] i:nth-child(1) { background: #153025; }
.paleta-amostra[data-pal="verde"] i:nth-child(2) { background: #F4F8F7; }
.paleta-amostra[data-pal="verde"] i:nth-child(3) { background: #0F7F56; }
.paleta-amostra[data-pal="rosa"] i:nth-child(1) { background: #30151F; }
.paleta-amostra[data-pal="rosa"] i:nth-child(2) { background: #F8F4F5; }
.paleta-amostra[data-pal="rosa"] i:nth-child(3) { background: #C2185B; }
.paleta-amostra[data-pal="ciano"] i:nth-child(1) { background: #132D32; }
.paleta-amostra[data-pal="ciano"] i:nth-child(2) { background: #F3F8F9; }
.paleta-amostra[data-pal="ciano"] i:nth-child(3) { background: #0B7285; }

/* ============================================================================================
   Aplicação da paleta (escrito à mão; os tokens acima são gerados). Tudo usa as variáveis --pal-*:
   nada de cor fixa espalhada.
   ============================================================================================ */

/* ---- Barra lateral: escopo com as cores do menu da paleta (antes: azul elétrico fixo) ---- */
.sidebar,
.interface-visual .sidebar {
  --card-bg: var(--pal-sb-bg);
  --surface-2: color-mix(in srgb, var(--pal-sb-texto) 8%, var(--pal-sb-bg));
  --border: color-mix(in srgb, var(--pal-sb-texto) 15%, var(--pal-sb-bg));
  --text: var(--pal-sb-texto);
  --text-muted: color-mix(in srgb, var(--pal-sb-texto) 74%, var(--pal-sb-bg));
  --text-3: color-mix(in srgb, var(--pal-sb-texto) 50%, var(--pal-sb-bg));
  --primary: var(--pal-sb-acento);
  --primary-fg: var(--pal-sb-acento-fg);
  --accent-dim: color-mix(in srgb, var(--pal-sb-acento) 20%, var(--pal-sb-bg));
  background: var(--pal-sb-bg);
}
.interface-visual .sidebar .nav-item.active { background: var(--pal-sb-acento); color: var(--pal-sb-acento-fg); }
.interface-visual .sidebar .nav-item.active .nav-icon { color: var(--pal-sb-acento-fg); }

/* ---- Logo viva: a MESMA arte do kit (máscara do próprio PNG), pintada com as cores do contexto —
        «CONTR» na cor do texto do fundo em que está, o «Ô» no acento da paleta. Não ofusca: o fundo da logo
        é sempre o menu/painel escuro (contraste conferido em relatorios/CONTRASTE_PALETAS.md). ---- */
.marca-programa-icone,
img.marca-login,
.lv-assinatura,
.mob-hero-topo img {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1381' height='614'/%3E");
  background: linear-gradient(to right, var(--logo-texto, var(--text)) 0 83.64%, var(--logo-o, var(--primary)) 83.64% 100%);
  -webkit-mask: url("/static/img/contro-marca-mascara.png") center / contain no-repeat;
          mask: url("/static/img/contro-marca-mascara.png") center / contain no-repeat;
  object-fit: contain;
}
/* menu recolhido e topo do celular: só o símbolo Ô */
.app.collapsed .marca-programa-icone,
.mob-simbolo img {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='211' height='614'/%3E");
  background: var(--logo-o, var(--primary));
  -webkit-mask: url("/static/img/contro-marca-o-mascara.png") center / contain no-repeat;
          mask: url("/static/img/contro-marca-o-mascara.png") center / contain no-repeat;
}
.lv-marca, .mob-hero { --logo-texto: var(--pal-sb-texto); --logo-o: var(--pal-sb-acento); }

/* ---- Login: painel da marca na paleta ---- */
.lv-marca {
  color: var(--pal-sb-texto);
  background:
    radial-gradient(ellipse 70% 55% at 85% 100%, color-mix(in srgb, var(--pal-sb-acento) 16%, transparent), transparent 70%),
    linear-gradient(160deg, color-mix(in srgb, var(--pal-sb-texto) 9%, var(--pal-sb-bg)) 0%, var(--pal-sb-bg) 55%, color-mix(in srgb, #000 22%, var(--pal-sb-bg)) 100%);
}
.lv-marca::after { background: linear-gradient(to bottom, transparent, var(--pal-sb-acento) 30%, var(--pal-sb-acento) 70%, transparent); }
.lv-frase { color: var(--pal-sb-texto); }
.lv-sub { color: var(--pal-sb-acento); }
.lv-sub::before { background: var(--pal-sb-acento); }
.lv-grafismo { filter: hue-rotate(var(--pal-giro, 0deg)); }   /* arte desenhada em azul da marca → matiz da paleta */

/* ---- Celular: topo, Início e barra na paleta ---- */
@media (max-width: 760px) {
  .main > .topbar {
    background: var(--pal-sb-bg); box-shadow: 0 6px 18px color-mix(in srgb, var(--pal-sb-bg) 30%, transparent);
    --text: var(--pal-sb-texto); --text-muted: color-mix(in srgb, var(--pal-sb-texto) 74%, var(--pal-sb-bg)); --text-3: color-mix(in srgb, var(--pal-sb-texto) 50%, var(--pal-sb-bg));
    --card-bg: color-mix(in srgb, var(--pal-sb-texto) 9%, var(--pal-sb-bg)); --surface-2: color-mix(in srgb, var(--pal-sb-texto) 11%, var(--pal-sb-bg)); --border: color-mix(in srgb, var(--pal-sb-texto) 17%, var(--pal-sb-bg));
    --accent-text: var(--pal-sb-acento); --primary: var(--pal-sb-acento); --primary-fg: var(--pal-sb-acento-fg);
    color: var(--pal-sb-texto);
  }
  .main > .topbar h1, .main > .topbar .rc-titulo { color: var(--pal-sb-texto) !important; }
  .mob-voltar { color: var(--pal-sb-texto) !important; }
  .mob-aba.ativa { background: color-mix(in srgb, var(--primary) 24%, var(--card-bg)); }
  .mob-avatar { background: var(--pal-sb-bg); color: var(--pal-sb-acento); box-shadow: 0 0 0 2px color-mix(in srgb, var(--pal-sb-acento) 50%, transparent); }
  .mob-hero { background: var(--pal-sb-bg); color: var(--pal-sb-texto); }
  .mob-hero::after { filter: hue-rotate(var(--pal-giro, 0deg)); }
  .mob-hero-topo span, .mob-hero-status span { color: color-mix(in srgb, var(--pal-sb-texto) 78%, var(--pal-sb-bg)); }
  .mob-hero h1 { color: var(--pal-sb-texto); }
  .mob-hero h1::before { background: var(--pal-sb-acento); }
  .mob-acao-principal { background: var(--primary); color: var(--primary-fg); box-shadow: 0 10px 22px color-mix(in srgb, var(--primary) 30%, transparent); }
  :root[data-tema="escuro"] .mob-acao-principal, :root[data-tema="noturno"] .mob-acao-principal { background: var(--primary); color: var(--primary-fg); box-shadow: none; }
  .mob-bloco::before { background: var(--pal-sb-acento); }
}

/* ---- Traços da marca no conteúdo: a barrinha do Ô acompanha a paleta ---- */
.interface-visual .unidade-card-nome::before { background: var(--marca-eletrico); }

/* ============================================================================================
   Botão «Paleta» (todos os perfis, todas as telas): gatilho + painel com as 6 paletas e os 3 modos
   ============================================================================================ */
.aparencia-rapida-gatilho .paleta-ponto {
  width: 11px; height: 11px; border-radius: 50%; flex: 0 0 auto; background: var(--primary);
  box-shadow: 0 0 0 2px var(--card-bg), 0 0 0 3px var(--border);
}
.aparencia-rapida-painel { width: min(360px, calc(100vw - 24px)); }
.paleta-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 6px; }
.paleta-cartao {
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 10px; min-height: 0; padding: 8px 10px; text-align: left;
  border: 2px solid var(--border); border-radius: 12px; background: var(--card-bg); color: var(--text); cursor: pointer; font-size: 12.5px;
}
.paleta-cartao:hover { border-color: color-mix(in srgb, var(--primary) 55%, var(--border)); }
.paleta-cartao:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
.paleta-cartao.active, .paleta-cartao[aria-pressed="true"] { border-color: var(--primary); background: var(--accent-dim); }
.paleta-cartao b { font-size: 12.5px; line-height: 1.2; }
.paleta-cartao small { grid-column: 2; color: var(--text-muted); font-size: 11px; line-height: 1.25; }
.paleta-amostra { grid-row: 1 / span 2; display: flex; width: 44px; height: 32px; border-radius: 8px; overflow: hidden; border: 1px solid var(--border); }
.paleta-amostra i { display: block; height: 100%; }
.paleta-amostra i:nth-child(1) { width: 32%; }
.paleta-amostra i:nth-child(2) { width: 46%; }
.paleta-amostra i:nth-child(3) { width: 22%; }
.paleta-aviso { margin: 10px 0 0; color: var(--text-muted); font-size: 11px; line-height: 1.4; }

/* login: botão solto no canto (não há barra de topo) */
.paleta-flutuante { position: fixed; top: 14px; right: 14px; z-index: 3000; }
.paleta-flutuante .aparencia-rapida-painel { position: absolute; right: 0; top: calc(100% + 8px); }