/* ================================================================
   LuiOzi MT — Design System
   Fonte única de verdade para cores, tipografia e componentes.
   Marca: Azul #1d4ed8 (light) / #3b82f6 (dark)
   ================================================================ */

/* ================================================================
   TOKENS DE COR — MODO CLARO
   ================================================================ */
:root {
  --apple-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  /* Marca */
  --brand-primary:      #1d4ed8;
  --brand-primary-hover:#1e40af;
  --brand-light:        #3b82f6;
  --brand-bg:           rgba(29, 78, 216, 0.08);
  --brand-border:       rgba(29, 78, 216, 0.30);

  /* Superfícies */
  --color-bg:            #f2f2f7;
  --color-bg-secondary:  #f5f5f7;
  --color-bg-elevated:   #ffffff;
  --color-card-bg:       #ffffff;
  --color-card-border:   #e5e7eb;
  --color-input-bg:      #f5f5f7;
  --color-input-border:  #d1d5db;
  --color-input-focus:   #1d4ed8;
  --color-footer-bg:     #f5f5f7;
  --color-nav-bg:        rgba(255, 255, 255, 0.85);
  --color-nav-border:    rgba(0, 0, 0, 0.08);
  --color-overlay:       rgba(0, 0, 0, 0.03);

  /* Texto */
  --color-text:           #1d1d1f;
  --color-text-secondary: #4b5563;
  --color-text-tertiary:  #9ca3af;
  --color-link:           #1d4ed8;
  --color-link-hover:     #1e40af;

  /* Acentos */
  --color-accent:         #1d4ed8;
  --color-accent-hover:   #1e40af;
  --color-success:        #16a34a;
  --color-warning:        #d97706;
  --color-error:          #dc2626;

  /* Bordas */
  --color-border:       #e5e7eb;
  --color-border-light: #f3f4f6;

  /* App interior (layout shell) */
  --app-bg:               #f2f2f7;
  --app-surface:          #ffffff;
  --app-surface-secondary:#f9fafb;
  --app-surface-tertiary: #f1f5f9;
  --app-border:           rgba(0, 0, 0, 0.08);
  --app-separator:        rgba(0, 0, 0, 0.12);
  --app-text-1:           #1d1d1f;
  --app-text-2:           #4b5563;
  --app-text-3:           #9ca3af;
  --app-nav-active-bg:    rgba(29, 78, 216, 0.08);
  --app-nav-active-text:  #1d4ed8;
  --app-nav-hover-bg:     rgba(0, 0, 0, 0.04);
}

/* ================================================================
   TOKENS DE COR — MODO ESCURO
   ================================================================ */
.dark {
  /* Marca — variante mais clara para contraste em fundo escuro */
  --brand-primary:      #3b82f6;
  --brand-primary-hover:#60a5fa;
  --brand-light:        #60a5fa;
  --brand-bg:           rgba(59, 130, 246, 0.12);
  --brand-border:       rgba(59, 130, 246, 0.30);

  /* Superfícies */
  --color-bg:            #000000;
  --color-bg-secondary:  #111111;
  --color-bg-elevated:   #1c1c1e;
  --color-card-bg:       #1c1c1e;
  --color-card-border:   #2c2c2e;
  --color-input-bg:      #1c1c1e;
  --color-input-border:  rgba(255, 255, 255, 0.12);
  --color-input-focus:   #3b82f6;
  --color-footer-bg:     #111111;
  --color-nav-bg:        rgba(17, 17, 17, 0.85);
  --color-nav-border:    rgba(255, 255, 255, 0.08);
  --color-overlay:       rgba(255, 255, 255, 0.02);

  /* Texto */
  --color-text:           #f5f5f7;
  --color-text-secondary: #a1a1aa;
  --color-text-tertiary:  #71717a;
  --color-link:           #60a5fa;
  --color-link-hover:     #93c5fd;

  /* Acentos */
  --color-accent:         #3b82f6;
  --color-accent-hover:   #60a5fa;
  --color-success:        #22c55e;
  --color-warning:        #f59e0b;
  --color-error:          #ef4444;

  /* Bordas */
  --color-border:       #3f3f46;
  --color-border-light: #27272a;

  /* App interior (layout shell) */
  --app-bg:               #000000;
  --app-surface:          #111111;
  --app-surface-secondary:#1c1c1e;
  --app-surface-tertiary: #2c2c2e;
  --app-border:           rgba(255, 255, 255, 0.08);
  --app-separator:        rgba(255, 255, 255, 0.12);
  --app-text-1:           #f5f5f7;
  --app-text-2:           rgba(235, 235, 245, 0.70);
  --app-text-3:           rgba(235, 235, 245, 0.35);
  --app-nav-active-bg:    rgba(59, 130, 246, 0.14);
  --app-nav-active-text:  #60a5fa;
  --app-nav-hover-bg:     rgba(255, 255, 255, 0.05);
}

/* ================================================================
   BASE GLOBAL
   ================================================================ */
*, *::before, *::after { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

html { font-family: var(--apple-font); }

/* Página pública (auth/marketing) */
body.apple-page {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 17px;
  line-height: 1.47;
  font-weight: 400;
  letter-spacing: -0.022em;
}

/* App interior */
html:not(.dark) body { background-color: var(--app-bg); }
html:not(.dark) main { background-color: var(--app-bg); }

/* ================================================================
   COMPONENTES PÚBLICOS (auth / marketing)
   ================================================================ */

/* ---- Nav pública ---- */
.an {
  position: fixed; top: 0; left: 0; right: 0; z-index: 9999;
  height: 48px;
  background: var(--color-nav-bg);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 0.5px solid var(--color-nav-border);
}
.an-inner { max-width: 980px; margin: 0 auto; padding: 0 22px; height: 48px; display: flex; align-items: center; justify-content: space-between; }
.an-brand { font-size: 21px; font-weight: 600; color: var(--color-text); text-decoration: none; letter-spacing: -0.04em; }
.an-links { display: flex; gap: 28px; align-items: center; }
.an-links a { font-size: 12px; font-weight: 400; color: var(--color-text-secondary); text-decoration: none; transition: color 0.2s; white-space: nowrap; }
.an-links a:hover { color: var(--color-text); }
.an-right { display: flex; align-items: center; gap: 12px; }
.an-cta { display: inline-flex; align-items: center; font-size: 12px; color: #fff; background: var(--color-accent); padding: 4px 14px; border-radius: 980px; text-decoration: none; transition: background 0.2s; }
.an-cta:hover { background: var(--color-accent-hover); }
.an-login { font-size: 12px; color: var(--color-link); text-decoration: none; transition: color 0.2s; }
.an-login:hover { color: var(--color-link-hover); }
.an-theme {
  background: none; border: none; cursor: pointer;
  color: var(--color-text-secondary); padding: 6px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px; transition: background 0.15s, color 0.15s;
}
.an-theme:hover { background: var(--app-nav-hover-bg); color: var(--color-text); }
.an-theme svg { width: 16px; height: 16px; }
/* Ícones de tema */
.dark .an-theme .t-sun { display: block; }
.dark .an-theme .t-moon { display: none; }
.an-theme .t-sun { display: none; }
.an-theme .t-moon { display: block; }

.an-mobile { display: none; background: none; border: none; cursor: pointer; color: var(--color-text-secondary); padding: 4px; }
.an-mobile svg { width: 20px; height: 20px; }
.an-mobile-menu { display: none; position: fixed; top: 48px; left: 0; right: 0; background: var(--color-bg); border-bottom: 1px solid var(--color-border); padding: 12px 22px; z-index: 9998; }
.an-mobile-menu.open { display: block; }
.an-mobile-menu a { display: block; padding: 10px 0; font-size: 17px; color: var(--color-text); text-decoration: none; border-bottom: 1px solid var(--color-border-light); }
.an-mobile-menu a:last-child { border-bottom: none; }

/* ---- Logo ---- */
.alogo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.alogo-img { height: 30px; width: auto; display: block; }
.alogo-img-lg { height: 44px; width: auto; display: block; }
.alogo-name { font-size: 17px; font-weight: 600; letter-spacing: -0.025em; color: var(--color-text); }
.aauth-logo { width: 52px; height: 52px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 4px; }
.aauth-logo img { width: 52px; height: 52px; object-fit: contain; }

/* ---- Botões públicos ---- */
.ab { display: inline-flex; align-items: center; gap: 6px; font-family: var(--apple-font); font-size: 17px; line-height: 1.18; font-weight: 400; letter-spacing: -0.022em; border-radius: 980px; padding: 12px 24px; transition: all 0.2s; text-decoration: none; cursor: pointer; border: none; }
.ab-primary { background: var(--color-accent); color: #fff; }
.ab-primary:hover { background: var(--color-accent-hover); }
.ab-secondary { background: transparent; color: var(--color-link); padding: 12px 4px; }
.ab-secondary:hover { text-decoration: underline; }
.ab-secondary::after { content: ' \203A'; font-size: 20px; line-height: 0; }
.ab-outline { background: transparent; color: var(--color-accent); border: 1px solid var(--color-accent); }
.ab-outline:hover { background: var(--color-accent); color: #fff; }
.ab-sm { font-size: 14px; padding: 8px 18px; }
.ab-full { width: 100%; justify-content: center; }

/* ---- Seções ---- */
.as { padding: 80px 0; position: relative; }
.as-alt { background: var(--color-bg-secondary); }
.as-title { font-size: 48px; line-height: 1.08; font-weight: 600; letter-spacing: -0.003em; text-align: center; margin: 0 0 6px; }
.as-subtitle { font-size: 21px; line-height: 1.38; font-weight: 400; color: var(--color-text-secondary); text-align: center; max-width: 700px; margin: 0 auto 50px; }
.ac { max-width: 980px; margin: 0 auto; padding: 0 22px; }
.ac-wide { max-width: 1120px; margin: 0 auto; padding: 0 22px; }

/* ---- Vídeo ---- */
.av { max-width: 980px; margin: 40px auto 0; padding: 0 22px; }
.av-wrap { position: relative; border-radius: 20px; overflow: hidden; background: var(--color-bg-secondary); aspect-ratio: 16/9; }
.av-wrap video { width: 100%; height: 100%; object-fit: cover; display: block; }
.av-fallback { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #1d1d1f 0%, #2d2d30 50%, #1d1d1f 100%); }
html:not(.dark) .av-fallback { background: linear-gradient(135deg, #f5f5f7 0%, #e8e8ed 50%, #f5f5f7 100%); }
.av-fallback span { font-size: 21px; color: var(--color-text-tertiary); }

/* ---- Cards ---- */
.acard { background: var(--color-card-bg); border-radius: 18px; overflow: hidden; transition: transform 0.25s, box-shadow 0.25s; border: 1px solid var(--color-card-border); }
.acard:hover { transform: scale(1.02); box-shadow: 0 12px 40px rgba(0,0,0,0.08); }
.dark .acard:hover { box-shadow: 0 12px 40px rgba(0,0,0,0.3); }
.acard-body { padding: 30px; }
.acard h3 { font-size: 21px; font-weight: 600; margin: 0 0 8px; }
.acard p { font-size: 14px; line-height: 1.5; color: var(--color-text-secondary); margin: 0; }
.acard-icon { width: 36px; height: 36px; margin-bottom: 14px; color: var(--color-accent); }
.acard-link { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; color: var(--color-link); text-decoration: none; margin-top: 12px; transition: gap 0.2s; }
.acard-link:hover { gap: 8px; }
.acard-link::after { content: '\203A'; font-size: 18px; line-height: 0; }

/* ---- Grid ---- */
.ag-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.ag-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.ag-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }

/* ---- Pricing Card ---- */
.ap-card { background: var(--color-card-bg); border: 1px solid var(--color-card-border); border-radius: 18px; padding: 40px 24px 32px; text-align: center; display: flex; flex-direction: column; transition: transform 0.25s, box-shadow 0.25s; position: relative; }
.ap-card:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0,0,0,0.08); }
.dark .ap-card:hover { box-shadow: 0 12px 40px rgba(0,0,0,0.3); }
.ap-card.featured { border-color: var(--color-accent); border-width: 2px; }
.ap-badge { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: var(--color-accent); color: #fff; font-size: 12px; font-weight: 600; padding: 4px 16px; border-radius: 980px; white-space: nowrap; }
.ap-name { font-size: 21px; font-weight: 600; margin: 0 0 16px; }
.ap-price { font-size: 36px; font-weight: 600; letter-spacing: -0.02em; margin: 0; }
.ap-period { font-size: 14px; color: var(--color-text-tertiary); margin: 4px 0 0; }
.ap-branch { font-size: 12px; color: var(--color-text-tertiary); margin: 4px 0 20px; }
.ap-features { list-style: none; padding: 0; margin: 0 0 24px; text-align: left; }
.ap-features li { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 14px; color: var(--color-text-secondary); }
.ap-features .check { width: 16px; height: 16px; color: var(--color-success); flex-shrink: 0; }
.ap-days { font-size: 12px; color: var(--color-text-tertiary); margin-top: auto; padding-top: 8px; }

/* ---- Two Column ---- */
.a2col { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }

/* ---- Tabela IRT ---- */
.at { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; }
.at th { font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-tertiary); padding: 12px 0; text-align: left; border-bottom: 1px solid var(--color-border); }
.at td { padding: 12px 0; color: var(--color-text-secondary); border-bottom: 1px solid var(--color-border-light); }
.at tr:last-child td { border-bottom: none; }
.at .rate { text-align: right; font-weight: 600; }
.at th:last-child { text-align: right; }
.at-note { font-size: 12px; color: var(--color-text-tertiary); background: var(--color-bg-secondary); border-radius: 12px; padding: 12px 16px; margin-top: 16px; }

/* ---- Feature List ---- */
.afl { list-style: none; padding: 0; margin: 16px 0 0; }
.afl li { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; font-size: 14px; color: var(--color-text-secondary); }
.afl .check { width: 16px; height: 16px; color: var(--color-success); flex-shrink: 0; margin-top: 2px; }

/* ---- Info Box ---- */
.ainfo { background: var(--color-bg-secondary); border-radius: 14px; padding: 24px; border: 1px solid var(--color-border-light); }
.ainfo h4 { font-size: 17px; font-weight: 600; margin: 0 0 8px; }
.ainfo p, .ainfo li { font-size: 14px; color: var(--color-text-secondary); line-height: 1.5; }
.ainfo-accent { border-color: var(--color-accent); border-left: 3px solid var(--color-accent); }

/* ---- Licensing ---- */
.al-price-row { display: flex; justify-content: space-between; padding: 10px 0; font-size: 14px; border-bottom: 1px solid var(--color-border-light); }
.al-price-row:last-child { border-bottom: none; }
.al-price-row span:first-child { color: var(--color-text-secondary); }
.al-price-row span:last-child { font-weight: 600; }
.al-total { font-size: 28px; font-weight: 600; color: var(--color-accent); margin: 16px 0 0; }

/* ---- Formulários públicos ---- */
.ainput { width: 100%; font-family: var(--apple-font); font-size: 17px; line-height: 1.24; font-weight: 400; letter-spacing: -0.022em; color: var(--color-text); background: var(--color-input-bg); border: 1px solid var(--color-input-border); border-radius: 12px; padding: 12px 16px; outline: none; transition: border-color 0.2s, box-shadow 0.2s; box-sizing: border-box; }
.ainput::placeholder { color: var(--color-text-tertiary); }
.ainput:focus { border-color: var(--color-input-focus); box-shadow: 0 0 0 4px rgba(29, 78, 216, 0.12); }
.dark .ainput:focus { box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15); }
.alabel { display: block; font-size: 14px; font-weight: 500; color: var(--color-text-secondary); margin-bottom: 6px; letter-spacing: -0.01em; }
.aform-group { margin-bottom: 16px; }
.aform-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.aform-section { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-tertiary); padding-bottom: 8px; margin-bottom: 16px; border-bottom: 1px solid var(--color-border-light); }
.aform-note { font-size: 14px; color: var(--color-text-secondary); background: var(--color-bg-secondary); border-radius: 12px; padding: 14px 16px; display: flex; align-items: center; gap: 10px; }
.aform-note svg { width: 20px; height: 20px; color: var(--color-success); flex-shrink: 0; }
.aform-link { text-align: center; font-size: 14px; color: var(--color-text-tertiary); padding-top: 20px; margin-top: 20px; border-top: 1px solid var(--color-border-light); }
.aform-link a { color: var(--color-link); text-decoration: none; font-weight: 500; }
.aform-link a:hover { text-decoration: underline; }

/* ---- Auth Card ---- */
.aauth { background: var(--color-card-bg); border: 1px solid var(--color-card-border); border-radius: 20px; padding: 40px; box-shadow: 0 4px 24px rgba(0,0,0,0.06); max-width: 400px; margin: 0 auto; }
.dark .aauth { box-shadow: 0 4px 24px rgba(0,0,0,0.25); }
.aauth.wide { max-width: 520px; }
.aauth-header { text-align: center; margin-bottom: 28px; }
.aauth-header h1 { font-size: 28px; font-weight: 600; margin: 12px 0 4px; }
.aauth-header p { font-size: 14px; color: var(--color-text-tertiary); margin: 0; }
.aauth-logo-fallback { width: 52px; height: 52px; border-radius: 14px; background: var(--brand-primary); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 700; }

/* ---- Footer público ---- */
.af { background: var(--color-bg-secondary); padding: 16px 0; border-top: 1px solid var(--color-border); }
.af-inner { max-width: 980px; margin: 0 auto; padding: 0 22px; display: flex; justify-content: space-between; align-items: center; }
.af p { font-size: 12px; color: var(--color-text-tertiary); margin: 0; }

/* ---- WhatsApp flutuante ---- */
.awa { position: fixed; bottom: 24px; right: 24px; z-index: 9998; width: 52px; height: 52px; border-radius: 50%; background: #25D366; color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(37,211,102,0.3); text-decoration: none; transition: transform 0.25s, box-shadow 0.25s; }
.awa:hover { transform: scale(1.08); box-shadow: 0 6px 20px rgba(37,211,102,0.4); }
.awa svg { width: 26px; height: 26px; }

/* ---- Animação reveal ---- */
.ar { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; }
.ar.visible { opacity: 1; transform: translateY(0); }

/* ---- Alertas públicos (auth) ---- */
.aalert { border-radius: 12px; padding: 14px 16px; font-size: 14px; display: flex; align-items: flex-start; gap: 10px; margin-bottom: 20px; }
.aalert-success { background: rgba(22, 163, 74, 0.08); color: #15803d; border: 1px solid rgba(22, 163, 74, 0.25); }
.aalert-error   { background: rgba(220, 38, 38, 0.08); color: #b91c1c; border: 1px solid rgba(220, 38, 38, 0.20); }
.dark .aalert-success { background: rgba(34, 197, 94, 0.10); color: #4ade80; border-color: rgba(34, 197, 94, 0.25); }
.dark .aalert-error   { background: rgba(239, 68, 68, 0.10); color: #f87171; border-color: rgba(239, 68, 68, 0.25); }
.aalert svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }

/* ---- PWA Banner ---- */
.apwa { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 10000; background: var(--color-bg-elevated); border-top: 1px solid var(--color-border); padding: 12px 22px; box-shadow: 0 -4px 20px rgba(0,0,0,0.06); }
.apwa.show { display: block; }
.apwa-inner { max-width: 980px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.apwa-info { display: flex; align-items: center; gap: 12px; font-size: 14px; }
.apwa-info strong { color: var(--color-text); }
.apwa-info span { color: var(--color-text-tertiary); font-size: 12px; }
.apwa-actions { display: flex; gap: 8px; }

/* ================================================================
   BRAND TAILWIND OVERRIDES
   Garante que bg-brand / text-brand usem azul #1d4ed8 mesmo
   se o app.css compilado tiver escala diferente.
   ================================================================ */
.bg-brand   { background-color: #1d4ed8; }
.text-brand { color: #1d4ed8; }
.border-brand { border-color: #1d4ed8; }
.hover\:bg-brand\/90:hover { background-color: #1e40af; }
.bg-brand\/10  { background-color: rgba(29, 78, 216, 0.10); }
.bg-brand\/20  { background-color: rgba(29, 78, 216, 0.16); }
.border-brand\/30 { border-color: rgba(29, 78, 216, 0.30); }
.border-brand\/40 { border-color: rgba(29, 78, 216, 0.40); }
.border-brand\/50 { border-color: rgba(29, 78, 216, 0.50); }
.focus\:ring-brand\/50:focus { --tw-ring-color: rgba(29, 78, 216, 0.50); }
.focus\:border-brand\/50:focus { border-color: rgba(29, 78, 216, 0.50); }
.hover\:border-brand\/50:hover { border-color: rgba(29, 78, 216, 0.50); }
.hover\:text-brand:hover { color: #1d4ed8; }
.text-brand-light { color: #3b82f6; }
.hover\:text-brand-light:hover { color: #3b82f6; }

/* Dark — variante mais clara para contraste */
.dark .bg-brand   { background-color: #3b82f6; }
.dark .text-brand { color: #3b82f6; }
.dark .hover\:bg-brand\/90:hover { background-color: #60a5fa; }
.dark .text-brand-light { color: #60a5fa; }
.dark .hover\:text-brand-light:hover { color: #60a5fa; }
.dark .bg-brand\/10  { background-color: rgba(59, 130, 246, 0.12); }

/* ================================================================
   APP INTERIOR — COMPONENTES (.lu-*)
   ================================================================ */

/* ---- Header ---- */
.lu-header {
  background: var(--app-surface);
  border-bottom: 1px solid var(--app-border);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
}

/* ---- Sidebar ---- */
.lu-sidebar {
  background: var(--app-surface);
  border-right: 1px solid var(--app-border);
}

/* ---- Nav items ---- */
.lu-nav-item {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--app-text-2);
  text-decoration: none;
  background: transparent;
  border: none;
  border-left: 2px solid transparent;
  cursor: pointer;
  box-sizing: border-box;
  text-align: left;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.lu-nav-item:hover {
  background: var(--app-nav-hover-bg);
  color: var(--app-text-1);
}
.lu-nav-item.is-active {
  background: var(--app-nav-active-bg);
  color: var(--app-nav-active-text);
  border-left-color: var(--app-nav-active-text);
}
.lu-nav-item.is-active .lu-nav-icon { color: var(--app-nav-active-text); }

.lu-nav-subitem { padding: 7px 10px; font-size: 13px; }

/* ---- Nav group label ---- */
.lu-nav-group-label {
  display: block; font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--app-text-3); padding: 12px 14px 4px;
}

/* ---- Nav icon ---- */
.lu-nav-icon {
  flex-shrink: 0; width: 20px; height: 20px;
  color: var(--app-text-3); transition: color 0.15s ease;
}
.lu-nav-item:hover .lu-nav-icon { color: var(--app-text-2); }

/* ---- Flash alerts (app interior) ---- */
.lu-alert {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 16px; border-radius: 12px;
  font-size: 14px; margin-bottom: 16px;
}
.lu-alert svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }
.lu-alert-success {
  background: rgba(22, 163, 74, 0.10);
  color: #15803d;
  border: 1px solid rgba(22, 163, 74, 0.25);
}
.lu-alert-error {
  background: rgba(220, 38, 38, 0.08);
  color: #b91c1c;
  border: 1px solid rgba(220, 38, 38, 0.20);
}
.lu-alert-warning {
  background: rgba(217, 119, 6, 0.10);
  color: #92400e;
  border: 1px solid rgba(217, 119, 6, 0.25);
}
.dark .lu-alert-success {
  background: rgba(34, 197, 94, 0.10);
  color: #4ade80;
  border-color: rgba(34, 197, 94, 0.25);
}
.dark .lu-alert-error {
  background: rgba(239, 68, 68, 0.10);
  color: #f87171;
  border-color: rgba(239, 68, 68, 0.25);
}
.dark .lu-alert-warning {
  background: rgba(245, 158, 11, 0.12);
  color: #fcd34d;
  border-color: rgba(245, 158, 11, 0.25);
}

/* ---- Sidebar collapse toggle ---- */
.lu-sidebar-toggle {
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--app-border);
  background: transparent; color: var(--app-text-3);
  cursor: pointer; flex-shrink: 0;
  transition: background 0.15s ease, color 0.15s ease;
}
.lu-sidebar-toggle:hover { background: var(--app-nav-hover-bg); color: var(--app-text-1); }
.lu-sidebar-toggle svg { width: 14px; height: 14px; transition: transform 0.25s ease; }

#desktop-sidebar { transition: width 0.25s cubic-bezier(0.4,0,0.2,1); }
#main-content    { transition: padding-left 0.25s cubic-bezier(0.4,0,0.2,1); }

/* Sidebar colapsada */
html.sidebar-collapsed #desktop-sidebar { width: 56px !important; }
html.sidebar-collapsed #desktop-sidebar .lu-nav-label,
html.sidebar-collapsed #desktop-sidebar .lu-nav-chevron,
html.sidebar-collapsed #desktop-sidebar .lu-submenu-wrapper,
html.sidebar-collapsed #desktop-sidebar .lu-sidebar-footer-info { display: none !important; }
html.sidebar-collapsed #desktop-sidebar .lu-nav-item {
  justify-content: center !important; padding: 10px !important; gap: 0 !important;
}
html.sidebar-collapsed #desktop-sidebar .lu-nav-icon { width: 22px; height: 22px; }
html.sidebar-collapsed #desktop-sidebar .lu-sidebar-toggle { margin: 0 auto; }
html.sidebar-collapsed #desktop-sidebar .lu-sidebar-toggle svg { transform: rotate(180deg); }
@media (min-width: 1024px) {
  html.sidebar-collapsed #main-content { padding-left: 56px !important; }
}

/* ---- Mobile drawer backdrop ---- */
.lu-backdrop {
  position: fixed; inset: 0; z-index: 39;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s ease;
}
.lu-backdrop.is-open { opacity: 1; pointer-events: auto; }

/* ================================================================
   DARK MODE — OVERRIDES PARA VIEWS DARK-FIRST
   (Views usam classes slate/gray sem prefixo dark:)
   ================================================================ */

/* Superfícies estruturais */
.dark header.fixed,
.dark header[class*="fixed"] { background-color: var(--app-surface) !important; border-bottom-color: var(--app-border) !important; }
.dark footer.fixed,
.dark footer[class*="fixed"] { background-color: var(--app-surface) !important; border-top-color: var(--app-border) !important; }
.dark aside.fixed { background-color: var(--app-surface-secondary) !important; border-right-color: var(--app-border) !important; }

/* Alertas semânticos em modo escuro */
.dark .bg-emerald-50 { background-color: rgba(16,185,129,.08); }
.dark .bg-green-50   { background-color: rgba(34,197,94,.08); }
.dark .text-emerald-800 { color: #6ee7b7; }
.dark .text-green-800   { color: #86efac; }
.dark .border-emerald-200 { border-color: rgba(16,185,129,.25); }
.dark .border-green-200   { border-color: rgba(34,197,94,.25); }

.dark .bg-rose-50  { background-color: rgba(244,63,94,.08); }
.dark .bg-red-50   { background-color: rgba(239,68,68,.08); }
.dark .text-rose-800 { color: #fda4af; }
.dark .text-red-800  { color: #fca5a5; }
.dark .border-rose-200 { border-color: rgba(244,63,94,.25); }
.dark .border-red-200  { border-color: rgba(239,68,68,.25); }

.dark .bg-amber-50  { background-color: rgba(245,158,11,.08); }
.dark .bg-yellow-50 { background-color: rgba(234,179,8,.08); }
.dark .text-amber-800  { color: #fcd34d; }
.dark .text-yellow-800 { color: #fde047; }
.dark .border-amber-200  { border-color: rgba(245,158,11,.25); }
.dark .border-yellow-200 { border-color: rgba(234,179,8,.25); }

.dark .bg-blue-50  { background-color: rgba(59,130,246,.08); }
.dark .text-blue-800 { color: #93c5fd; }
.dark .border-blue-200 { border-color: rgba(59,130,246,.25); }

.dark .bg-purple-50    { background-color: rgba(168,85,247,.08); }
.dark .text-purple-800 { color: #d8b4fe; }
.dark .border-purple-200 { border-color: rgba(168,85,247,.25); }

/* Gradientes em cards de stats */
.dark .from-amber-50   { --tw-gradient-from: rgba(245,158,11,.05); }
.dark .from-emerald-50 { --tw-gradient-from: rgba(16,185,129,.05); }
.dark .from-blue-50    { --tw-gradient-from: rgba(59,130,246,.05); }
.dark .from-rose-50    { --tw-gradient-from: rgba(244,63,94,.05); }
.dark .to-yellow-50    { --tw-gradient-to: rgba(234,179,8,.03); }
.dark .to-emerald-50   { --tw-gradient-to: rgba(16,185,129,.03); }
.dark .to-blue-50      { --tw-gradient-to: rgba(59,130,246,.03); }

.dark .bg-slate-50 { background-color: #1c1c1e; }
.dark .bg-gray-50  { background-color: #1c1c1e; }

/* Formulários sempre escuros no modo dark */
.dark input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]),
.dark select,
.dark textarea {
  background-color: #1c1c1e;
  color: #f5f5f7;
  border-color: rgba(255,255,255,.12);
  color-scheme: dark;
}
.dark input:focus:not([type=checkbox]):not([type=radio]),
.dark select:focus,
.dark textarea:focus {
  border-color: rgba(59, 130, 246, 0.60);
  outline: none;
}

/* Tabelas em modo escuro */
.dark table tbody tr:hover { background-color: rgba(255,255,255,.04); }
.dark table thead,
.dark table tfoot { background-color: rgba(15,23,42,.6); }

/* ================================================================
   MODO CLARO — REVERSÃO DAS VIEWS DARK-FIRST
   Views usam bg-slate-800/900, text-slate-100 sem dark:
   Estas regras normalizam para o modo claro sem tocar nas views.
   ================================================================ */

/* Fundo de página */
html:not(.dark) body,
html:not(.dark) main { background-color: var(--app-bg) !important; }

/* Superfícies: slate-900 → cinza suave, slate-800 → branco, slate-700 → terciário */
html:not(.dark) main .bg-slate-950,
html:not(.dark) main .bg-slate-900,
html:not(.dark) main .bg-gray-900 { background-color: var(--app-surface-secondary) !important; }

html:not(.dark) main .bg-slate-800,
html:not(.dark) main .bg-gray-800 { background-color: var(--app-surface) !important; }

html:not(.dark) main .bg-slate-700,
html:not(.dark) main .bg-gray-700 { background-color: var(--app-surface-tertiary) !important; }

/* Opacidade-slate para containers e modais internos */
html:not(.dark) main .bg-slate-900\/30,
html:not(.dark) main .bg-slate-900\/50,
html:not(.dark) main .bg-slate-900\/70,
html:not(.dark) main .bg-slate-900\/80,
html:not(.dark) main .bg-slate-900\/90 { background-color: var(--app-surface-secondary) !important; }

html:not(.dark) main .bg-slate-800\/30,
html:not(.dark) main .bg-slate-800\/40,
html:not(.dark) main .bg-slate-800\/50,
html:not(.dark) main .bg-slate-800\/60,
html:not(.dark) main .bg-slate-800\/70,
html:not(.dark) main .bg-slate-800\/80,
html:not(.dark) main .bg-slate-800\/95 { background-color: var(--app-surface) !important; }

html:not(.dark) main .bg-slate-700\/20,
html:not(.dark) main .bg-slate-700\/30,
html:not(.dark) main .bg-slate-700\/50 { background-color: var(--app-surface-tertiary) !important; }

/* Backdrop de modal — mantém semi-opaco escuro */
html:not(.dark) main .bg-slate-900\/75 { background-color: rgba(0, 0, 0, 0.45) !important; }

/* Modais com posição fixed/absolute */
html:not(.dark) .bg-slate-800\/95,
html:not(.dark) .bg-slate-900\/95 { background-color: rgba(255,255,255,0.97) !important; }
html:not(.dark) .fixed .bg-slate-900,
html:not(.dark) .absolute .bg-slate-900,
html:not(.dark) .fixed .bg-slate-800,
html:not(.dark) .absolute .bg-slate-800 { background-color: var(--app-surface) !important; }
html:not(.dark) .fixed .border-slate-700,
html:not(.dark) .fixed .border-slate-800,
html:not(.dark) .absolute .border-slate-700,
html:not(.dark) .absolute .border-slate-800 { border-color: #e5e7eb !important; }
html:not(.dark) .fixed .text-slate-100,
html:not(.dark) .fixed .text-slate-200,
html:not(.dark) .fixed .text-slate-300,
html:not(.dark) .absolute .text-slate-100,
html:not(.dark) .absolute .text-slate-200,
html:not(.dark) .absolute .text-slate-300 { color: #1d1d1f !important; }

/* Texto claro-sobre-escuro → escuro-sobre-claro */
html:not(.dark) main .text-slate-100 { color: var(--app-text-1) !important; }
html:not(.dark) main .text-slate-200 { color: #3a3a3c !important; }
html:not(.dark) main .text-slate-300 { color: #4b5563 !important; }
html:not(.dark) main .text-slate-400 { color: #6b7280 !important; }
html:not(.dark) main .text-slate-500 { color: #9ca3af !important; }
html:not(.dark) main .text-slate-600 { color: #4b5563 !important; }
html:not(.dark) main .text-slate-700 { color: #374151 !important; }
html:not(.dark) main .text-gray-100  { color: var(--app-text-1) !important; }
html:not(.dark) main .text-gray-200  { color: #3a3a3c !important; }
html:not(.dark) main .text-gray-300  { color: #4b5563 !important; }

/* Cores semânticas claras (100-400) → versões escuras para fundo branco */
html:not(.dark) main .text-green-100,
html:not(.dark) main .text-green-200 { color: #15803d !important; }
html:not(.dark) main .text-green-300,
html:not(.dark) main .text-green-400 { color: #16a34a !important; }
html:not(.dark) main .text-emerald-100,
html:not(.dark) main .text-emerald-200 { color: #047857 !important; }
html:not(.dark) main .text-emerald-300,
html:not(.dark) main .text-emerald-400 { color: #059669 !important; }
html:not(.dark) main .text-yellow-100,
html:not(.dark) main .text-yellow-200 { color: #92400e !important; }
html:not(.dark) main .text-yellow-300,
html:not(.dark) main .text-yellow-400 { color: #b45309 !important; }
html:not(.dark) main .text-amber-100,
html:not(.dark) main .text-amber-200 { color: #92400e !important; }
html:not(.dark) main .text-amber-300,
html:not(.dark) main .text-amber-400 { color: #b45309 !important; }
html:not(.dark) main .text-orange-100,
html:not(.dark) main .text-orange-200 { color: #9a3412 !important; }
html:not(.dark) main .text-orange-300,
html:not(.dark) main .text-orange-400 { color: #c2410c !important; }
html:not(.dark) main .text-red-100,
html:not(.dark) main .text-red-200 { color: #b91c1c !important; }
html:not(.dark) main .text-red-300,
html:not(.dark) main .text-red-400 { color: #dc2626 !important; }
html:not(.dark) main .text-rose-100,
html:not(.dark) main .text-rose-200 { color: #be123c !important; }
html:not(.dark) main .text-rose-300,
html:not(.dark) main .text-rose-400 { color: #e11d48 !important; }
html:not(.dark) main .text-blue-100,
html:not(.dark) main .text-blue-200 { color: #1d4ed8 !important; }
html:not(.dark) main .text-blue-300,
html:not(.dark) main .text-blue-400 { color: #2563eb !important; }
html:not(.dark) main .text-indigo-100,
html:not(.dark) main .text-indigo-200 { color: #4338ca !important; }
html:not(.dark) main .text-indigo-300,
html:not(.dark) main .text-indigo-400 { color: #4f46e5 !important; }
html:not(.dark) main .text-violet-100,
html:not(.dark) main .text-violet-200 { color: #6d28d9 !important; }
html:not(.dark) main .text-purple-100,
html:not(.dark) main .text-purple-200 { color: #6d28d9 !important; }
html:not(.dark) main .text-pink-100,
html:not(.dark) main .text-pink-200 { color: #be185d !important; }
html:not(.dark) main .text-cyan-100,
html:not(.dark) main .text-cyan-200 { color: #0e7490 !important; }
html:not(.dark) main .text-teal-100,
html:not(.dark) main .text-teal-200 { color: #0f766e !important; }

/* Bordas dark → claras */
html:not(.dark) main .border-slate-600,
html:not(.dark) main .border-slate-700,
html:not(.dark) main .border-slate-800,
html:not(.dark) main .border-gray-600,
html:not(.dark) main .border-gray-700,
html:not(.dark) main .border-gray-800 { border-color: #e5e7eb !important; }
html:not(.dark) main .border-slate-700\/30,
html:not(.dark) main .border-slate-700\/50,
html:not(.dark) main .border-slate-800\/30,
html:not(.dark) main .border-slate-800\/50 { border-color: rgba(0,0,0,0.08) !important; }
html:not(.dark) main .border-slate-300 { border-color: #d1d5db !important; }

/* Divisores de tabela */
html:not(.dark) main .divide-slate-600 > :not([hidden]) ~ :not([hidden]),
html:not(.dark) main .divide-slate-700 > :not([hidden]) ~ :not([hidden]),
html:not(.dark) main .divide-slate-800 > :not([hidden]) ~ :not([hidden]),
html:not(.dark) main .divide-gray-700  > :not([hidden]) ~ :not([hidden]),
html:not(.dark) main .divide-gray-800  > :not([hidden]) ~ :not([hidden]) { border-color: #f0f0f5 !important; }

/* Hover states */
html:not(.dark) main .hover\:bg-slate-800:hover,
html:not(.dark) main .hover\:bg-slate-700:hover,
html:not(.dark) main .hover\:bg-slate-600:hover,
html:not(.dark) main .hover\:bg-gray-800:hover,
html:not(.dark) main .hover\:bg-gray-700:hover { background-color: var(--app-bg) !important; }
html:not(.dark) main .hover\:bg-slate-800\/30:hover,
html:not(.dark) main .hover\:bg-slate-800\/50:hover,
html:not(.dark) main .hover\:bg-slate-700\/30:hover,
html:not(.dark) main .hover\:bg-slate-700\/50:hover { background-color: var(--app-bg) !important; }
html:not(.dark) main tr:hover > td { background-color: var(--app-nav-hover-bg) !important; }

/* Formulários no modo claro */
html:not(.dark) main input[class*="bg-slate-"],
html:not(.dark) main select[class*="bg-slate-"],
html:not(.dark) main textarea[class*="bg-slate-"],
html:not(.dark) main input[class*="bg-gray-"],
html:not(.dark) main select[class*="bg-gray-"],
html:not(.dark) main textarea[class*="bg-gray-"] {
  background-color: var(--app-surface) !important;
  color: var(--app-text-1) !important;
  border-color: #d1d5db !important;
}
html:not(.dark) main input[class*="bg-slate-"]:focus,
html:not(.dark) main select[class*="bg-slate-"]:focus,
html:not(.dark) main textarea[class*="bg-slate-"]:focus {
  border-color: #1d4ed8 !important;
  box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.12) !important;
}
html:not(.dark) main input::placeholder,
html:not(.dark) main textarea::placeholder { color: #9ca3af !important; }

/* Thead no modo claro */
html:not(.dark) main thead { background-color: var(--app-surface-secondary) !important; }
html:not(.dark) main thead tr,
html:not(.dark) main thead th { background-color: transparent !important; }
html:not(.dark) main thead th { color: #6b7280 !important; border-bottom-color: #e5e7eb !important; }

/* Labels de formulário */
html:not(.dark) main label { color: #374151; }

/* Linhas alternadas em tabelas */
html:not(.dark) main tbody tr:nth-child(even) { background-color: rgba(0,0,0,0.015); }

/* Cards com sombra suave no claro */
html:not(.dark) main .rounded-xl[class*="bg-slate-"],
html:not(.dark) main .rounded-2xl[class*="bg-slate-"],
html:not(.dark) main .rounded-lg[class*="bg-slate-"] {
  box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 6px rgba(0,0,0,0.04) !important;
}

/* Cards de status semânticos */
html:not(.dark) main .bg-green-500\/10  { background-color: #f0fdf4 !important; }
html:not(.dark) main .border-green-500\/30 { border-color: #86efac !important; }
html:not(.dark) main .bg-yellow-500\/10 { background-color: #fefce8 !important; }
html:not(.dark) main .border-yellow-500\/30 { border-color: #fde047 !important; }
html:not(.dark) main .bg-red-500\/10   { background-color: #fff1f2 !important; }
html:not(.dark) main .border-red-500\/30 { border-color: #fca5a5 !important; }
html:not(.dark) main .bg-blue-500\/10  { background-color: #eff6ff !important; }
html:not(.dark) main .border-blue-500\/30 { border-color: #93c5fd !important; }
html:not(.dark) main .bg-amber-500\/10 { background-color: #fffbeb !important; }
html:not(.dark) main .border-amber-500\/30 { border-color: #fcd34d !important; }
html:not(.dark) main .bg-green-500\/20 { background-color: #dcfce7 !important; }
html:not(.dark) main .bg-yellow-500\/20 { background-color: #fef9c3 !important; }
html:not(.dark) main .bg-red-500\/20   { background-color: #fee2e2 !important; }
html:not(.dark) main .bg-amber-500\/20 { background-color: #fef3c7 !important; }

/* Dropdowns */
html:not(.dark) [role="menu"][class*="bg-slate-"],
html:not(.dark) [role="listbox"][class*="bg-slate-"],
html:not(.dark) [x-ref="panel"][class*="bg-slate-"] {
  background-color: #ffffff !important;
  border-color: #e5e7eb !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1), 0 2px 6px rgba(0,0,0,0.06) !important;
}

/* ring-* */
html:not(.dark) main .ring-slate-700,
html:not(.dark) main .ring-slate-800 { --tw-ring-color: #e5e7eb !important; }

/* Scrollbar no modo claro */
html:not(.dark) ::-webkit-scrollbar { width: 6px; height: 6px; }
html:not(.dark) ::-webkit-scrollbar-track { background: var(--app-bg); }
html:not(.dark) ::-webkit-scrollbar-thumb { background: #c7c7cc; border-radius: 3px; }
html:not(.dark) ::-webkit-scrollbar-thumb:hover { background: #8e8e93; }

/* Modal overlay bg-black */
.bg-black\/50 { background-color: rgba(0,0,0,.5) !important; }
.bg-black\/60 { background-color: rgba(0,0,0,.6) !important; }
.bg-black\/70 { background-color: rgba(0,0,0,.7) !important; }
.bg-black\/75 { background-color: rgba(0,0,0,.75) !important; }
.bg-black\/80 { background-color: rgba(0,0,0,.8) !important; }

/* ================================================================
   RESPONSIVIDADE — APP INTERIOR (tabelas e grids)
   ================================================================ */

/* Tabelas sem wrapper explícito de overflow ficam roláveis em mobile */
@media (max-width: 1023px) {
  main table {
    min-width: max-content;
  }
  /* Qualquer tabela diretamente numa div sem overflow-x fica contida */
  main > div table:not([data-no-scroll]) {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
}

/* Grids de KPI: colapsar para 2 colunas em tablet, 1 em mobile */
@media (max-width: 767px) {
  main [style*="grid-template-columns:repeat(4"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  main [style*="grid-template-columns:repeat(3"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  main [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}
@media (max-width: 480px) {
  main [style*="grid-template-columns:repeat(4"],
  main [style*="grid-template-columns:repeat(2"] {
    grid-template-columns: 1fr !important;
  }
}

/* ================================================================
   RESPONSIVIDADE PÚBLICA
   ================================================================ */
@media (max-width: 768px) {
  .an-links { display: none; }
  .an-mobile { display: flex; }
  .ah h1 { font-size: 32px; }
  .ah-sub { font-size: 19px; }
  .as { padding: 56px 0; }
  .as-title { font-size: 28px; }
  .as-subtitle { font-size: 17px; margin-bottom: 32px; }
  .ag-2, .ag-3, .ag-4 { grid-template-columns: 1fr; }
  .a2col { grid-template-columns: 1fr; gap: 32px; }
  .aauth { padding: 24px; margin: 0 16px; }
  .aform-grid { grid-template-columns: 1fr; }
  .af-inner { flex-direction: column; gap: 4px; text-align: center; }
  .ap-card { padding: 28px 20px 24px; }
  .apwa-inner { flex-direction: column; text-align: center; }
}
@media (min-width: 769px) and (max-width: 1023px) {
  .ag-3, .ag-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 769px) {
  .an-mobile { display: none; }
  .an-mobile-menu { display: none !important; }
}

/* ================================================================
   POS LOCK SCREEN — animação de PIN errado
   ================================================================ */
@keyframes posLockShake {
  0%   { transform: translateX(0); }
  15%  { transform: translateX(-8px); }
  30%  { transform: translateX(8px); }
  45%  { transform: translateX(-6px); }
  60%  { transform: translateX(6px); }
  75%  { transform: translateX(-3px); }
  90%  { transform: translateX(3px); }
  100% { transform: translateX(0); }
}

/* WhatsApp animations */
@keyframes wa-ping { 75%, 100% { transform: scale(2); opacity: 0; } }
@keyframes wa-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(37,211,102,.7), 0 4px 15px rgba(37,211,102,.4); } 50% { box-shadow: 0 0 0 12px rgba(37,211,102,0), 0 4px 25px rgba(37,211,102,.6); } }
@keyframes wa-bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-6px); } 60% { transform: translateY(-3px); } }
@keyframes badge-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } }