/* ============================================================
   luxo.css — Design premium Y'ALL Ouvidoria PWA
   Glassmorphism · Gradiente animado · Componentes de luxo
   ============================================================ */

/* ── 1. Fundo animado ─────────────────────────────────────── */
.lux-corpo {
  min-height: 100vh;
  background: linear-gradient(-45deg, #0d0008, #3d0020, #7a0038, #da0766, #9f0249, #1a0010) !important;
  background-size: 500% 500% !important;
  background-image: none !important;
  animation: luxGradient 18s ease infinite;
  position: relative;
  overflow-x: hidden;
}
@keyframes luxGradient {
  0%   { background-position: 0%   50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0%   50%; }
}

/* Orbes de luz flutuantes */
.lux-orb {
  position: fixed;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.22;
  pointer-events: none;
  z-index: 0;
  animation: orbFloat 22s ease-in-out infinite;
}
.lux-orb-1 { width: 520px; height: 520px; background: radial-gradient(circle, #da0766, transparent); top: -120px; left: -120px; }
.lux-orb-2 { width: 420px; height: 420px; background: radial-gradient(circle, #9f0249, transparent); bottom: -80px; right: -80px; animation-delay: -11s; }
.lux-orb-3 { width: 260px; height: 260px; background: radial-gradient(circle, #f5c842, transparent); top: 45%; left: 55%; animation-delay: -6s; opacity: 0.1; }
@keyframes orbFloat {
  0%,100% { transform: translate(0,0)   scale(1);   }
  33%      { transform: translate(30px,-50px) scale(1.08); }
  66%      { transform: translate(-25px,35px) scale(0.93); }
}

/* ── 2. Wrapper de página ─────────────────────────────────── */
.lux-wrap {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  padding: 32px 16px 48px;
}
@media (max-width: 576px) { .lux-wrap { padding: 16px 12px 40px; } }

/* ── 3. Glass Card ────────────────────────────────────────── */
.glass-card {
  background: rgba(255,255,255,0.07);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 24px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.08);
  overflow: hidden;
}
.glass-card-header {
  background: linear-gradient(135deg, rgba(218,7,102,0.88) 0%, rgba(159,2,73,0.88) 100%);
  padding: 22px 28px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.glass-card-body { padding: 28px; }
@media (max-width: 576px) {
  .glass-card-header { padding: 18px 20px; }
  .glass-card-body   { padding: 20px; }
}

/* Card menor dentro do glass */
.glass-inner {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 16px;
}
.glass-inner:last-child { margin-bottom: 0; }

/* ── 4. Ícone de cabeçalho ────────────────────────────────── */
.lux-header-icon {
  width: 46px; height: 46px;
  border-radius: 14px;
  background: rgba(255,255,255,0.18);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem;
  margin-right: 14px;
  flex-shrink: 0;
}

/* ── 5. Inputs de luxo ────────────────────────────────────── */
.lux-field { position: relative; margin-bottom: 20px; }
.lux-label {
  display: block;
  color: rgba(255,255,255,0.65);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.lux-label i { margin-right: 5px; }
.lux-input {
  display: block;
  width: 100%;
  background: rgba(255,255,255,0.07);
  border: 1.5px solid rgba(255,255,255,0.18);
  border-radius: 14px;
  color: #fff;
  padding: 13px 18px;
  font-size: 0.95rem;
  line-height: 1.5;
  transition: border-color 0.25s, box-shadow 0.25s, background 0.25s;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  font-family: inherit;
}
.lux-input::placeholder { color: rgba(255,255,255,0.35); }
.lux-input:focus {
  border-color: #da0766;
  background: rgba(255,255,255,0.11);
  box-shadow: 0 0 0 3px rgba(218,7,102,0.22), 0 4px 20px rgba(0,0,0,0.2);
}
/* Select */
.lux-select-wrap { position: relative; }
.lux-select-wrap::after {
  content: '▾';
  position: absolute; right: 16px; top: 50%;
  transform: translateY(-50%);
  color: rgba(255,255,255,0.55);
  pointer-events: none;
  font-size: 0.85rem;
}
.lux-input option { background: #3d0025; color: #fff; }
/* Textarea */
.lux-textarea { resize: vertical; min-height: 160px; }
/* Char counter */
.lux-char-count {
  text-align: right;
  font-size: 0.72rem;
  color: rgba(255,255,255,0.38);
  margin-top: -10px;
  margin-bottom: 10px;
}

/* ── 6. Checkboxes & Radios de luxo ──────────────────────── */
.lux-checks { display: flex; flex-direction: column; gap: 12px; }
.lux-check  {
  display: flex; align-items: flex-start; gap: 12px;
  cursor: pointer; color: rgba(255,255,255,0.82); font-size: 0.9rem;
  line-height: 1.45; user-select: none;
}
.lux-check input[type="checkbox"],
.lux-check input[type="radio"] {
  appearance: none; -webkit-appearance: none;
  width: 20px; height: 20px; border-radius: 7px;
  border: 2px solid rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.07);
  cursor: pointer; flex-shrink: 0;
  margin-top: 2px; position: relative;
  transition: all 0.2s;
}
.lux-check input[type="radio"] { border-radius: 50%; }
.lux-check input[type="checkbox"]:checked,
.lux-check input[type="radio"]:checked {
  background: linear-gradient(135deg, #da0766, #9f0249);
  border-color: #da0766;
  box-shadow: 0 2px 10px rgba(218,7,102,0.4);
}
.lux-check input[type="checkbox"]:checked::after {
  content: ''; position: absolute;
  top: 3px; left: 6px; width: 5px; height: 9px;
  border: 2px solid #fff; border-top: none; border-left: none;
  transform: rotate(43deg);
}
.lux-check input[type="radio"]:checked::after {
  content: ''; position: absolute;
  top: 4px; left: 4px; width: 8px; height: 8px;
  border-radius: 50%; background: #fff;
}

/* ── 7. Toggle de privacidade ─────────────────────────────── */
.lux-privacy {
  display: flex;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.13);
  border-radius: 50px;
  padding: 4px; gap: 4px;
}
.lux-privacy input[type="radio"] { display: none !important; }
.lux-privacy-label {
  flex: 1; text-align: center;
  padding: 10px 18px; border-radius: 50px;
  cursor: pointer; font-size: 0.86rem; font-weight: 600;
  color: rgba(255,255,255,0.55);
  transition: all 0.3s ease;
  display: flex; align-items: center; justify-content: center; gap: 7px;
}
.lux-privacy input[type="radio"]:checked + .lux-privacy-label {
  background: linear-gradient(135deg, #da0766, #9f0249);
  color: #fff;
  box-shadow: 0 4px 16px rgba(218,7,102,0.42);
}

/* ── 8. Divider decorativo ────────────────────────────────── */
.lux-divider {
  display: flex; align-items: center; gap: 14px;
  margin: 22px 0; color: rgba(255,255,255,0.3);
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 2px;
}
.lux-divider::before, .lux-divider::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(to right, transparent, rgba(255,255,255,0.18), transparent);
}

/* ── 9. Botão principal ───────────────────────────────────── */
.btn-lux {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 15px 32px;
  background: linear-gradient(135deg, #da0766 0%, #9f0249 50%, #da0766 100%);
  background-size: 200% auto;
  border: none; border-radius: 14px; color: #fff;
  font-size: 1rem; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; cursor: pointer;
  transition: all 0.4s ease;
  box-shadow: 0 6px 28px rgba(218,7,102,0.48), 0 2px 8px rgba(0,0,0,0.3);
  position: relative; overflow: hidden;
  text-decoration: none;
}
.btn-lux::before {
  content: ''; position: absolute;
  top: -50%; left: -75%; width: 50%; height: 200%;
  background: rgba(255,255,255,0.15);
  transform: skewX(-22deg); transition: left 0.55s ease;
}
.btn-lux:hover {
  background-position: right center;
  box-shadow: 0 10px 36px rgba(218,7,102,0.65), 0 4px 16px rgba(0,0,0,0.4);
  transform: translateY(-2px); color: #fff;
}
.btn-lux:hover::before { left: 130%; }
.btn-lux:active { transform: translateY(0); }

/* Variante outline */
.btn-lux-outline {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 13px 28px;
  background: transparent;
  border: 1.5px solid rgba(218,7,102,0.65);
  border-radius: 14px; color: rgba(255,255,255,0.88);
  font-size: 0.9rem; font-weight: 600; letter-spacing: 0.5px;
  cursor: pointer; transition: all 0.3s ease;
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(218,7,102,0.18);
}
.btn-lux-outline:hover {
  background: rgba(218,7,102,0.22);
  border-color: #da0766; color: #fff;
  transform: translateY(-1px); text-decoration: none;
}

/* ── 10. Badge de protocolo (ouro) ───────────────────────── */
.protocol-badge {
  display: inline-block;
  background: linear-gradient(135deg, #f5c842, #d4920a);
  color: #1a0010;
  font-family: 'Courier New', monospace;
  font-size: 1.05rem; font-weight: 800;
  padding: 9px 24px; border-radius: 50px;
  letter-spacing: 2px;
  box-shadow: 0 4px 22px rgba(245,200,66,0.55);
  animation: protocolGlow 2.5s ease-in-out infinite alternate;
}
@keyframes protocolGlow {
  from { box-shadow: 0 4px 22px rgba(245,200,66,0.45); }
  to   { box-shadow: 0 6px 32px rgba(245,200,66,0.85); }
}

/* ── 11. Ícone de sucesso ─────────────────────────────────── */
.success-ring {
  width: 88px; height: 88px; border-radius: 50%;
  background: linear-gradient(135deg, #2ed573, #00b06a);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 28px;
  box-shadow: 0 8px 32px rgba(46,213,115,0.45);
  animation: successPop 0.55s cubic-bezier(0.175,0.885,0.32,1.275);
}
@keyframes successPop {
  from { transform: scale(0); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
.success-ring svg { width: 42px; height: 42px; stroke: #fff; fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

/* ── 12. Bolhas de chat ───────────────────────────────────── */
.chat-thread {
  display: flex; flex-direction: column; gap: 14px;
  padding: 4px 0 8px;
}
.chat-bubble {
  max-width: 88%; padding: 14px 18px;
  border-radius: 20px; font-size: 0.91rem; line-height: 1.55;
  animation: bubbleIn 0.3s ease;
}
@keyframes bubbleIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.bubble-admin {
  background: linear-gradient(135deg, rgba(218,7,102,0.28), rgba(159,2,73,0.28));
  border: 1px solid rgba(218,7,102,0.38);
  color: #fff; border-bottom-left-radius: 5px;
  align-self: flex-start;
}
.bubble-user {
  background: rgba(255,255,255,0.09);
  border: 1px solid rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.9); border-bottom-right-radius: 5px;
  align-self: flex-end;
}
.bubble-label {
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.8px; margin-bottom: 6px; opacity: 0.65;
}
.bubble-date { font-size: 0.7rem; opacity: 0.5; margin-top: 6px; }

/* ── 13. Tag de tipo/status ───────────────────────────────── */
.lux-tag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 12px; border-radius: 50px;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.5px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.8);
}
.lux-tag-encerrada {
  background: rgba(46,213,115,0.18);
  border-color: rgba(46,213,115,0.4);
  color: #2ed573;
}
.lux-tag-aberta {
  background: rgba(245,200,66,0.18);
  border-color: rgba(245,200,66,0.4);
  color: #f5c842;
}

/* ── 14. Logo no topo (public pages) ─────────────────────── */
.lux-logo-bar {
  text-align: center;
  margin-bottom: 28px;
}
.lux-logo-bar img { height: 56px; filter: drop-shadow(0 4px 16px rgba(0,0,0,0.5)); }

/* ── 15. Index hero ───────────────────────────────────────── */
.hero-brand-text {
  color: #fff;
  text-shadow: 0 2px 20px rgba(0,0,0,0.5);
}
.hero-brand-text .hey { font-size: 3.4rem; font-weight: 900; letter-spacing: -1px; }
.hero-brand-text p { font-size: 1.05rem; line-height: 1.7; color: rgba(255,255,255,0.82); }
.hero-logo { filter: drop-shadow(0 8px 32px rgba(0,0,0,0.55)); max-width: 100%; }

.action-divider {
  display: flex; align-items: center; gap: 12px;
  color: rgba(255,255,255,0.3); font-size: 0.76rem;
  text-transform: uppercase; letter-spacing: 2px;
  margin: 18px 0;
}
.action-divider::before, .action-divider::after {
  content: ''; flex: 1; height: 1px;
  background: rgba(255,255,255,0.14);
}

/* ── 16. Encerrada ribbon ─────────────────────────────────── */
.encerrada-banner {
  background: rgba(46,213,115,0.12);
  border: 1px solid rgba(46,213,115,0.35);
  border-radius: 14px;
  padding: 14px 20px;
  color: #2ed573;
  display: flex; align-items: center; gap: 10px;
  font-size: 0.9rem; font-weight: 600;
}

/* ── 17. Utilitários ──────────────────────────────────────── */
.text-white-80 { color: rgba(255,255,255,0.80) !important; }
.text-white-55 { color: rgba(255,255,255,0.55) !important; }
.text-gold     { color: #f5c842 !important; }
.text-pink     { color: #da0766 !important; }
.fw-800        { font-weight: 800 !important; }
.ls-wide       { letter-spacing: 1.5px; }
.rounded-xl    { border-radius: 18px !important; }
.mt-lux        { margin-top: 24px; }

/* ── 18. Scrollbar ────────────────────────────────────────── */
::-webkit-scrollbar          { width: 5px; }
::-webkit-scrollbar-track    { background: rgba(255,255,255,0.03); }
::-webkit-scrollbar-thumb    { background: rgba(218,7,102,0.5); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #da0766; }

/* ── 19. Animação fade-in-up ──────────────────────────────── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-in-up { animation: fadeInUp 0.5s ease both; }
.fade-in-up.delay-1 { animation-delay: 0.08s; }
.fade-in-up.delay-2 { animation-delay: 0.16s; }
.fade-in-up.delay-3 { animation-delay: 0.24s; }

/* ============================================================
   20. TEMA CLARO — [data-theme="light"]  +  auto (media query)
   Aplica quando forçado light OU sistema em light + modo auto.
   Nota: seletor [data-theme="light"] #corpo tem especificidade
   (1,1,0) > (1,0,0) do inline <style>, vencendo mesmo com
   !important dos templates.
   ============================================================ */

/* -- 20a. Mixins de especificidade usando :is() -- */
/* Alvo: forçado light OU auto+sistema light */
:is([data-theme="light"]) #corpo,
:is([data-theme="auto"]) #corpo {
  /* sobrescrito pelo @media abaixo no modo auto */
  /* aqui só o light force */
}
[data-theme="light"] #corpo {
  background: linear-gradient(-45deg, #fdf2f8, #fce7f3, #fbcfe8, #f9a8d4, #fce7f3, #fdf4ff) !important;
  background-size: 500% 500% !important;
  animation: luxGradient 18s ease infinite !important;
}
@media (prefers-color-scheme: light) {
  html:not([data-theme="dark"]):not([data-theme="light"]) #corpo {
    background: linear-gradient(-45deg, #fdf2f8, #fce7f3, #fbcfe8, #f9a8d4, #fce7f3, #fdf4ff) !important;
    background-size: 500% 500% !important;
    animation: luxGradient 18s ease infinite !important;
  }
}

/* -- 20b. Orbes no tema claro -- */
[data-theme="light"] .lux-orb,
[data-theme="light"] .lux-orb-1,
[data-theme="light"] .lux-orb-2,
[data-theme="light"] .lux-orb-3 { opacity: 0.10; }
[data-theme="light"] .lux-orb-1 { background: radial-gradient(circle, #da0766, transparent); }
[data-theme="light"] .lux-orb-2 { background: radial-gradient(circle, #f9a8d4, transparent); }
[data-theme="light"] .lux-orb-3 { background: radial-gradient(circle, #f5c842, transparent); opacity: 0.07; }
@media (prefers-color-scheme: light) {
  html:not([data-theme="dark"]):not([data-theme="light"]) .lux-orb { opacity: 0.10; }
  html:not([data-theme="dark"]):not([data-theme="light"]) .lux-orb-1 { background: radial-gradient(circle, #da0766, transparent); }
  html:not([data-theme="dark"]):not([data-theme="light"]) .lux-orb-2 { background: radial-gradient(circle, #f9a8d4, transparent); }
  html:not([data-theme="dark"]):not([data-theme="light"]) .lux-orb-3 { background: radial-gradient(circle, #f5c842, transparent); opacity: 0.07; }
}

/* -- Regra helper: agrega seletores claro+auto para componentes -- */
/* Uso interno: os blocos abaixo repetem o padrão para não depender de
   pré-processador. Preferiu-se clareza sobre DRY neste arquivo. */

/* ── Glass Card ── */
[data-theme="light"] .glass-card {
  background: rgba(255,255,255,0.78);
  border: 1px solid rgba(218,7,102,0.13);
  box-shadow: 0 8px 40px rgba(218,7,102,0.10), 0 2px 8px rgba(0,0,0,0.05);
}
[data-theme="light"] .glass-card-body { background: rgba(255,255,255,0.0); }
[data-theme="light"] .glass-inner {
  background: rgba(255,255,255,0.60);
  border: 1px solid rgba(218,7,102,0.09);
}
@media (prefers-color-scheme: light) {
  html:not([data-theme="dark"]):not([data-theme="light"]) .glass-card {
    background: rgba(255,255,255,0.78);
    border: 1px solid rgba(218,7,102,0.13);
    box-shadow: 0 8px 40px rgba(218,7,102,0.10), 0 2px 8px rgba(0,0,0,0.05);
  }
  html:not([data-theme="dark"]):not([data-theme="light"]) .glass-inner {
    background: rgba(255,255,255,0.60);
    border: 1px solid rgba(218,7,102,0.09);
  }
}

/* ── Ícone de cabeçalho ── */
[data-theme="light"] .lux-header-icon { background: rgba(218,7,102,0.10); }
@media (prefers-color-scheme: light) {
  html:not([data-theme="dark"]):not([data-theme="light"]) .lux-header-icon { background: rgba(218,7,102,0.10); }
}

/* ── Labels e textos ── */
[data-theme="light"] .lux-label       { color: #8b2252; }
[data-theme="light"] .lux-char-count  { color: rgba(159,2,73,0.42); }
[data-theme="light"] .text-white-80   { color: #2d0018 !important; }
[data-theme="light"] .text-white-55   { color: #8b2252 !important; }
@media (prefers-color-scheme: light) {
  html:not([data-theme="dark"]):not([data-theme="light"]) .lux-label      { color: #8b2252; }
  html:not([data-theme="dark"]):not([data-theme="light"]) .lux-char-count { color: rgba(159,2,73,0.42); }
  html:not([data-theme="dark"]):not([data-theme="light"]) .text-white-80  { color: #2d0018 !important; }
  html:not([data-theme="dark"]):not([data-theme="light"]) .text-white-55  { color: #8b2252 !important; }
}

/* ── Inputs ── */
[data-theme="light"] .lux-input {
  background: rgba(255,255,255,0.90);
  border: 1.5px solid rgba(218,7,102,0.22);
  color: #2d0018;
}
[data-theme="light"] .lux-input::placeholder { color: rgba(159,2,73,0.35); }
[data-theme="light"] .lux-input:focus {
  background: rgba(255,255,255,1);
  border-color: #da0766;
  box-shadow: 0 0 0 3px rgba(218,7,102,0.15), 0 4px 20px rgba(0,0,0,0.06);
}
[data-theme="light"] .lux-select-wrap::after { color: rgba(159,2,73,0.55); }
[data-theme="light"] .lux-input option { background: #fff0f7; color: #2d0018; }
@media (prefers-color-scheme: light) {
  html:not([data-theme="dark"]):not([data-theme="light"]) .lux-input {
    background: rgba(255,255,255,0.90);
    border: 1.5px solid rgba(218,7,102,0.22);
    color: #2d0018;
  }
  html:not([data-theme="dark"]):not([data-theme="light"]) .lux-input::placeholder { color: rgba(159,2,73,0.35); }
  html:not([data-theme="dark"]):not([data-theme="light"]) .lux-input:focus {
    background: rgba(255,255,255,1);
    border-color: #da0766;
    box-shadow: 0 0 0 3px rgba(218,7,102,0.15);
  }
  html:not([data-theme="dark"]):not([data-theme="light"]) .lux-select-wrap::after { color: rgba(159,2,73,0.55); }
  html:not([data-theme="dark"]):not([data-theme="light"]) .lux-input option { background: #fff0f7; color: #2d0018; }
}

/* ── Checkboxes ── */
[data-theme="light"] .lux-check { color: #4a0025; }
[data-theme="light"] .lux-check input[type="checkbox"],
[data-theme="light"] .lux-check input[type="radio"] {
  background: rgba(255,255,255,0.70);
  border-color: rgba(218,7,102,0.28);
}
@media (prefers-color-scheme: light) {
  html:not([data-theme="dark"]):not([data-theme="light"]) .lux-check { color: #4a0025; }
  html:not([data-theme="dark"]):not([data-theme="light"]) .lux-check input[type="checkbox"],
  html:not([data-theme="dark"]):not([data-theme="light"]) .lux-check input[type="radio"] {
    background: rgba(255,255,255,0.70);
    border-color: rgba(218,7,102,0.28);
  }
}

/* ── Privacy toggle ── */
[data-theme="light"] .lux-privacy {
  background: rgba(255,255,255,0.65);
  border-color: rgba(218,7,102,0.18);
}
[data-theme="light"] .lux-privacy-label { color: #9f0249; }
@media (prefers-color-scheme: light) {
  html:not([data-theme="dark"]):not([data-theme="light"]) .lux-privacy {
    background: rgba(255,255,255,0.65);
    border-color: rgba(218,7,102,0.18);
  }
  html:not([data-theme="dark"]):not([data-theme="light"]) .lux-privacy-label { color: #9f0249; }
}

/* ── Divider ── */
[data-theme="light"] .lux-divider { color: rgba(159,2,73,0.45); }
[data-theme="light"] .lux-divider::before,
[data-theme="light"] .lux-divider::after {
  background: linear-gradient(to right, transparent, rgba(218,7,102,0.2), transparent);
}
@media (prefers-color-scheme: light) {
  html:not([data-theme="dark"]):not([data-theme="light"]) .lux-divider { color: rgba(159,2,73,0.45); }
  html:not([data-theme="dark"]):not([data-theme="light"]) .lux-divider::before,
  html:not([data-theme="dark"]):not([data-theme="light"]) .lux-divider::after {
    background: linear-gradient(to right, transparent, rgba(218,7,102,0.2), transparent);
  }
}

/* ── Botão outline ── */
[data-theme="light"] .btn-lux-outline {
  border-color: rgba(218,7,102,0.55);
  color: #9f0249;
  box-shadow: 0 4px 16px rgba(218,7,102,0.10);
}
[data-theme="light"] .btn-lux-outline:hover {
  background: rgba(218,7,102,0.08);
  border-color: #da0766;
  color: #7a0038;
}
@media (prefers-color-scheme: light) {
  html:not([data-theme="dark"]):not([data-theme="light"]) .btn-lux-outline {
    border-color: rgba(218,7,102,0.55);
    color: #9f0249;
  }
  html:not([data-theme="dark"]):not([data-theme="light"]) .btn-lux-outline:hover {
    background: rgba(218,7,102,0.08);
    color: #7a0038;
  }
}

/* ── Chat bubbles (portal) ── */
[data-theme="light"] .bubble-admin {
  background: linear-gradient(135deg, rgba(218,7,102,0.10), rgba(159,2,73,0.07));
  border-color: rgba(218,7,102,0.22);
  color: #2d0018;
}
[data-theme="light"] .bubble-user {
  background: rgba(255,255,255,0.80);
  border-color: rgba(218,7,102,0.12);
  color: #2d0018;
}
@media (prefers-color-scheme: light) {
  html:not([data-theme="dark"]):not([data-theme="light"]) .bubble-admin {
    background: linear-gradient(135deg, rgba(218,7,102,0.10), rgba(159,2,73,0.07));
    border-color: rgba(218,7,102,0.22);
    color: #2d0018;
  }
  html:not([data-theme="dark"]):not([data-theme="light"]) .bubble-user {
    background: rgba(255,255,255,0.80);
    border-color: rgba(218,7,102,0.12);
    color: #2d0018;
  }
}

/* ── Tags ── */
[data-theme="light"] .lux-tag {
  background: rgba(218,7,102,0.07);
  border-color: rgba(218,7,102,0.18);
  color: #9f0249;
}
[data-theme="light"] .lux-tag-encerrada { color: #0a7048; background: rgba(46,213,115,0.08); }
[data-theme="light"] .lux-tag-aberta    { color: #8a5c00; background: rgba(245,200,66,0.12); border-color: rgba(218,163,0,0.35); }
@media (prefers-color-scheme: light) {
  html:not([data-theme="dark"]):not([data-theme="light"]) .lux-tag {
    background: rgba(218,7,102,0.07);
    border-color: rgba(218,7,102,0.18);
    color: #9f0249;
  }
  html:not([data-theme="dark"]):not([data-theme="light"]) .lux-tag-encerrada { color: #0a7048; }
  html:not([data-theme="dark"]):not([data-theme="light"]) .lux-tag-aberta    { color: #8a5c00; }
}

/* ── Logo bar ── */
[data-theme="light"] .lux-logo-bar img { filter: drop-shadow(0 4px 16px rgba(218,7,102,0.22)); }
@media (prefers-color-scheme: light) {
  html:not([data-theme="dark"]):not([data-theme="light"]) .lux-logo-bar img { filter: drop-shadow(0 4px 16px rgba(218,7,102,0.22)); }
}

/* ── Hero ── */
[data-theme="light"] .hero-brand-text { color: #2d0018; text-shadow: 0 2px 16px rgba(218,7,102,0.12); }
[data-theme="light"] .hero-brand-text p { color: #7a0038; }
[data-theme="light"] .action-divider { color: rgba(159,2,73,0.5); }
[data-theme="light"] .action-divider::before,
[data-theme="light"] .action-divider::after { background: rgba(218,7,102,0.15); }
@media (prefers-color-scheme: light) {
  html:not([data-theme="dark"]):not([data-theme="light"]) .hero-brand-text { color: #2d0018; text-shadow: 0 2px 16px rgba(218,7,102,0.12); }
  html:not([data-theme="dark"]):not([data-theme="light"]) .hero-brand-text p { color: #7a0038; }
  html:not([data-theme="dark"]):not([data-theme="light"]) .action-divider { color: rgba(159,2,73,0.5); }
  html:not([data-theme="dark"]):not([data-theme="light"]) .action-divider::before,
  html:not([data-theme="dark"]):not([data-theme="light"]) .action-divider::after { background: rgba(218,7,102,0.15); }
}

/* ── Encerrada banner ── */
[data-theme="light"] .encerrada-banner { color: #0a7048; background: rgba(46,213,115,0.08); border-color: rgba(46,213,115,0.28); }
@media (prefers-color-scheme: light) {
  html:not([data-theme="dark"]):not([data-theme="light"]) .encerrada-banner { color: #0a7048; }
}

/* ── Scrollbar ── */
[data-theme="light"] ::-webkit-scrollbar-track { background: rgba(218,7,102,0.04); }
@media (prefers-color-scheme: light) {
  html:not([data-theme="dark"]):not([data-theme="light"]) ::-webkit-scrollbar-track { background: rgba(218,7,102,0.04); }
}

/* ============================================================
   21. SELETOR DE TEMA FLUTUANTE
   ============================================================ */
.lux-theme-sw {
  position: fixed;
  bottom: 22px;
  right: 18px;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 3px;
  background: rgba(15,0,9,0.82);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(218,7,102,0.28);
  border-radius: 50px;
  padding: 5px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.45);
  transition: box-shadow 0.3s;
}
[data-theme="light"] .lux-theme-sw {
  background: rgba(255,255,255,0.92);
  border-color: rgba(218,7,102,0.22);
  box-shadow: 0 4px 24px rgba(218,7,102,0.15);
}
@media (prefers-color-scheme: light) {
  html:not([data-theme="dark"]):not([data-theme="light"]) .lux-theme-sw {
    background: rgba(255,255,255,0.92);
    border-color: rgba(218,7,102,0.22);
    box-shadow: 0 4px 24px rgba(218,7,102,0.15);
  }
}
.lts-btn {
  width: 33px; height: 33px;
  border-radius: 50px;
  border: none;
  background: transparent;
  color: rgba(255,255,255,0.45);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.78rem;
  transition: all 0.2s;
  position: relative;
}
.lts-btn:hover { color: rgba(255,255,255,0.88); background: rgba(255,255,255,0.09); }
.lts-btn.lts-active {
  background: linear-gradient(135deg, #da0766, #9f0249);
  color: #fff;
  box-shadow: 0 2px 10px rgba(218,7,102,0.45);
}
[data-theme="light"] .lts-btn { color: rgba(159,2,73,0.45); }
[data-theme="light"] .lts-btn:hover { color: #9f0249; background: rgba(218,7,102,0.08); }
[data-theme="light"] .lts-btn.lts-active { color: #fff; }
@media (prefers-color-scheme: light) {
  html:not([data-theme="dark"]):not([data-theme="light"]) .lts-btn { color: rgba(159,2,73,0.45); }
  html:not([data-theme="dark"]):not([data-theme="light"]) .lts-btn:hover { color: #9f0249; background: rgba(218,7,102,0.08); }
  html:not([data-theme="dark"]):not([data-theme="light"]) .lts-btn.lts-active { color: #fff; }
}
/* Tooltip nos botões */
.lts-btn[title]:hover::after {
  content: attr(title);
  position: absolute;
  bottom: calc(100% + 7px);
  left: 50%; transform: translateX(-50%);
  background: rgba(15,0,9,0.9);
  color: #fff;
  font-size: 0.68rem;
  padding: 4px 9px;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
}
[data-theme="light"] .lts-btn[title]:hover::after {
  background: rgba(45,0,24,0.88);
}