@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

/* Os tokens de design (--primary, --surface, --text-main, --border e o
   switch de tema por `data-theme`) vivem agora em `src/styles/shadcn.css`,
   junto da camada Tailwind v4 / shadcn/ui. Este arquivo continua consumindo
   os mesmos nomes de variavel — por isso o CSS legado nao mudou de
   comportamento. */

/* ===== ALIASES de tokens legados =====
   Varias paginas ainda referenciam `--text-primary`, `--text-secondary`,
   `--bg-primary` e `--accent-primary`. Sem estas definicoes o `var()` fica
   invalido e o navegador descarta a regra inteira — o texto herda a cor do
   pai e o input fica sem fundo (vale para o modal de cartao). */

:root {
  --text-primary: var(--text-main);
  --text-secondary: var(--text-muted);
  --bg-primary: var(--background);
  --accent-primary: var(--primary);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
}

body {
  font-family: var(--font-text);
  background: var(--background);
  color: var(--text-main);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  font-size: 16px;
  min-height: 100vh;
  transition: background 0.3s ease, color 0.3s ease;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-title);
  color: var(--text-main);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

a {
  text-decoration: none;
  color: inherit;
}

button {
  cursor: pointer;
  font-family: var(--font-text);
  border: none;
  background: none;
}

input,
select,
textarea {
  font-family: var(--font-text);
  color: var(--text-main);
  background-color: var(--background);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
}

/* Sem isso o menu nativo do navegador abre branco e o texto fica ilegível
   no tema escuro — as <option> não herdam cor do elemento pai. */

select option {
  background-color: var(--surface);
  color: var(--text-main);
}

select:focus,
input:focus,
textarea:focus {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}

/* Utilitários globais */

/* Tabelas com many colunas estouravam a largura da tela no celular.
   A classe já era usada no JSX mas nunca recebeu o comportamento de scroll. */

.table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table-responsive > table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-xs);
  font-weight: 600;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
  gap: 0.5rem;
}

.btn-primary {
  background: linear-gradient(90deg, var(--primary), var(--action));
  color: white;
  box-shadow: 0 10px 22px rgba(79, 70, 229, 0.3);
}

.btn-primary:hover {
  background: linear-gradient(90deg, var(--primary-600), var(--action-light));
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(79, 70, 229, 0.4);
}

.btn-outline {
  border: 1px solid var(--border-strong);
  color: var(--text-main);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
}

.btn-outline:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
  transform: translateY(-1px);
}

.card {
  background-color: var(--surface);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
}

::selection {
  background: rgba(79, 70, 229, 0.3);
}

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--background);
}

::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--border-strong);
}

/* Theme Toggle Button */

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.theme-toggle:hover {
  background: var(--primary-soft);
  color: var(--primary);
  border-color: var(--primary);
  transform: scale(1.05);
}

.sidebar-theme-toggle {
  width: 100%;
  height: 40px;
  border-radius: var(--radius-xs);
}

.sidebar-theme-row {
  padding: 0;
  margin-bottom: 0.5rem;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }
}

/* Global Mobile Tweaks */

@media (max-width: 768px) {
  body {
    font-size: 14px;
  }
  .btn {
    padding: 0.6rem 1rem;
    font-size: 0.875rem;
  }
  h1 { font-size: 1.5rem !important; }
  h2 { font-size: 1.25rem !important; }
  h3 { font-size: 1.1rem !important; }
}

@media (max-width: 480px) {
  body {
    font-size: 13px;
  }
  .btn {
    padding: 0.5rem 0.85rem;
    font-size: 0.82rem;
  }
  .btn-lg {
    padding: 0.75rem 1.25rem;
    font-size: 0.9rem;
  }
  h1 { font-size: 1.25rem !important; }
  h2 { font-size: 1.1rem !important; }
  h3 { font-size: 1rem !important; }
}
.avatar-picker {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.avatar-picker-upload {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  width: 100%;
  padding: 0.9rem 1rem;
  border-radius: 0.95rem;
  border: 1px dashed var(--border-strong);
  background: rgba(148, 163, 184, 0.06);
  color: inherit;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.avatar-picker-upload:hover:not(:disabled) {
  border-color: var(--primary);
  background: var(--primary-soft);
}

.avatar-picker-upload:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.avatar-picker-upload-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 0.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-soft);
  color: var(--primary);
}

.avatar-picker-upload-text {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.avatar-picker-upload-text strong {
  font-size: 0.95rem;
}

.avatar-picker-upload-text small {
  color: var(--text-muted);
  font-size: 0.78rem;
}

.avatar-picker-divider {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-muted);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
}

.avatar-picker-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

.avatar-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(58px, 1fr));
  gap: 0.6rem;
  max-height: 340px;
  overflow-y: auto;
  padding: 0.25rem;
  margin: -0.25rem;
}

.avatar-picker-item {
  position: relative;
  aspect-ratio: 1;
  padding: 0;
  border-radius: 50%;
  border: 2px solid transparent;
  background: transparent;
  cursor: pointer;
  transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}

.avatar-picker-item img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  background: var(--surface-soft);
}

.avatar-picker-item:hover:not(:disabled) {
  transform: translateY(-2px) scale(1.04);
  border-color: var(--border-strong);
}

.avatar-picker-item.is-selected {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}

.avatar-picker-item:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.avatar-picker-check {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--primary);
  color: #fff;
  border: 2px solid var(--surface);
}

.avatar-picker-compact .avatar-picker-grid {
  grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
  max-height: 300px;
  gap: 0.45rem;
}
.avatar-gate-backdrop {
  position: fixed;
  inset: 0;
  z-index: 700;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(15, 23, 42, 0.78);
  backdrop-filter: blur(10px);
  overflow-y: auto;
}

.avatar-gate-modal {
  width: min(560px, 100%);
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  border-radius: 1.25rem;
  padding: 1.5rem;
  border: 1px solid rgba(79, 70, 229, 0.22);
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.99), rgba(30, 41, 59, 0.99));
  box-shadow: 0 30px 80px -30px rgba(15, 23, 42, 0.65);
  color: #e2e8f0;
}

[data-theme='light'] .avatar-gate-modal {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(248, 250, 252, 0.99));
  color: #0f172a;
}

.avatar-gate-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.avatar-gate-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
  background: rgba(79, 70, 229, 0.14);
  color: var(--primary-light);
  font-size: 0.78rem;
  font-weight: 700;
}

[data-theme='light'] .avatar-gate-badge {
  color: var(--primary);
}

.avatar-gate-intro {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.avatar-gate-avatar {
  width: 68px;
  height: 68px;
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  border: 2px solid rgba(148, 163, 184, 0.25);
}

.avatar-gate-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-gate-intro h2 {
  margin: 0 0 0.25rem;
  font-size: 1.3rem;
}

.avatar-gate-intro p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.5;
}

.avatar-gate-error {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 1rem;
  padding: 0.7rem 0.85rem;
  border-radius: 0.75rem;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #fca5a5;
  font-size: 0.85rem;
}

.avatar-gate-save {
  width: 100%;
  min-height: 50px;
  margin-top: 1.1rem;
  border-radius: 0.95rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-weight: 700;
}

.avatar-gate-save:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

@media (max-width: 520px) {
  .avatar-gate-modal {
    padding: 1.15rem;
    border-radius: 1rem;
  }

  .avatar-gate-intro {
    align-items: flex-start;
  }
}
.sc-container {
  width: 100%;
}

.sc-viewport {
  overflow: hidden;
  border-radius: 1rem;
}

.sc-track {
  display: flex;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.sc-page {
  flex: 0 0 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  min-width: 0;
}

.sc-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 0.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0.875rem;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
  text-decoration: none;
  color: var(--text);
}

.sc-card:hover {
  transform: translateY(-2px);
  border-color: var(--primary);
  box-shadow: 0 6px 16px -4px rgba(79, 70, 229, 0.25);
}

.sc-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

.sc-card-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.sc-card-icon span {
  font-size: 1.1rem;
}

.sc-card-name {
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.sc-card-status {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.65rem;
  color: var(--success);
  font-weight: 600;
}

.sc-card-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--success);
  flex-shrink: 0;
}

.sc-card-spots {
  font-size: 0.6rem;
  color: var(--text-muted);
}

.sc-dots {
  display: flex;
  justify-content: center;
  gap: 0.35rem;
  margin-top: 0.75rem;
}

.sc-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--border);
  transition: all 0.3s;
  cursor: pointer;
  border: none;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sc-dot:hover {
  background: rgba(79, 70, 229, 0.5);
}

.sc-dot.active {
  background: var(--primary);
  transform: scale(1.4);
}

@media (max-width: 640px) {
  .sc-page {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
  }

  .sc-card {
    padding: 0.75rem 0.35rem;
    gap: 0.35rem;
  }

  .sc-card-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
  }

  .sc-card-name {
    font-size: 0.7rem;
  }

  .sc-card-status {
    font-size: 0.6rem;
  }

  .sc-card-spots {
    font-size: 0.55rem;
  }
}

@media (min-width: 641px) and (max-width: 900px) {
  .sc-page {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.625rem;
  }
}

@media (min-width: 901px) {
  .sc-page {
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
  }

  .sc-card {
    padding: 1.25rem 0.75rem;
  }

  .sc-card-icon {
    width: 52px;
    height: 52px;
  }

  .sc-card-name {
    font-size: 0.9rem;
  }
}
/* Confete — camada descartável, sem clique e sem rolagem. */
.confetti-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 5;
}

.confetti-piece {
  position: absolute;
  top: 0;
  display: block;
  border-radius: 2px;
  will-change: transform, opacity;
}

.confetti-piece.is-round {
  border-radius: 50%;
}

/* Overlay de tela cheia: cadastro e onboarding. */
.confetti-overlay {
  position: fixed;
  inset: 0;
  z-index: 120;
  overflow: hidden;
  pointer-events: none;
}
:root {
  --home-bg: #0F172A;
  --home-surface: rgba(255, 255, 255, 0.03);
  --home-surface-hover: rgba(255, 255, 255, 0.06);
  --home-border: rgba(255, 255, 255, 0.08);
  --home-border-strong: rgba(255, 255, 255, 0.15);
  --home-text: #FFFFFF;
  --home-text-muted: #94A3B8;
  --home-primary: #4F46E5;
  --home-primary-hover: #3730A3;
  --home-secondary: #1E293B;
  --home-success: #10B981;
  --home-blue: #0EA5E9;
  --home-radius: 1rem;
  --home-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --home-shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.2), 0 8px 10px -6px rgba(0, 0, 0, 0.2);
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

[data-theme="light"] .home-container,
[data-theme="light"] .home-container {
  --home-bg: #F1F5F9;
  --home-surface: #FFFFFF;
  --home-surface-hover: #F8FAFC;
  --home-border: rgba(0, 0, 0, 0.1);
  --home-border-strong: rgba(0, 0, 0, 0.2);
  --home-text: #0F172A;
  --home-text-muted: #475569;
  --home-secondary: #FFFFFF;
  --home-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
  --home-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.05);
}

.home-container {
  min-height: 100vh;
  background-color: var(--home-bg);
  color: var(--home-text);
  font-family: var(--font-text), 'Inter', system-ui, sans-serif;
  position: relative;
}

.ambient-light {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  background: radial-gradient(ellipse at 50% 0%, rgba(79, 70, 229, 0.12) 0%, rgba(79, 70, 229, 0.03) 30%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.grid-pattern {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  background-size: 64px 64px;
  pointer-events: none;
  z-index: 0;
  mask-image: radial-gradient(ellipse at top, black 0%, transparent 70%);
}

.main-content {
  position: relative;
  z-index: 1;
  padding-top: 80px;
}

/* O <main> da landing usa a classe global `.main-content`, que o dashboard
   (UserLayout.css) define com `height: 100vh` + `overflow-y: auto`. Aqui isso
   virava um scroll interno: o documento quase nao rolava, o navbar nunca
   entrava no estado "scrolled" e o rodape ficava espremido numa faixa de
   ~400px. Na landing a rolagem e do documento, como num site normal. */
.home-container .main-content {
  height: auto;
  overflow: visible;
}

.home-footer {
  text-align: center;
  padding: 2rem 1rem;
  color: var(--home-text-muted);
  font-size: 0.8rem;
  border-top: 1px solid var(--home-border);
}

/* Navbar */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  transition: all 0.3s ease;
  padding: 1rem 0;
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.navbar-scrolled {
  background: rgba(15, 23, 42, 0.95);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--home-border);
  padding: 0.5rem 0;
  box-shadow: 0 4px 20px rgb(0 0 0 / 0.2);
}

.navbar-content {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-title), 'Poppins', sans-serif;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--home-text);
  text-decoration: none;
}

.logo-icon {
  width: 36px;
  height: 36px;
  background: linear-gradient(90deg, #4F46E5, #EA580C);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: white;
}

.logo-img {
  width: 36px;
  height: 36px;
  object-fit: contain;
}

.navbar-nav {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.navbar-nav-desktop {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.navbar-nav-mobile {
  display: none;
}

.navbar-nav-header {
  display: none;
}

.menu-close {
  display: none;
}

.navbar-nav-links {
  display: contents;
}

.navbar-backdrop {
  display: none;
}

.nav-link {
  background: none;
  border: none;
  color: var(--home-text-muted);
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.2s ease;
  padding: 0.5rem 0;
}

.nav-link:hover {
  color: var(--home-text);
}

.navbar-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.nav-mobile-actions {
  display: none;
  flex-direction: column;
  gap: 0.75rem;
  padding-top: 1rem;
  margin-top: 0.5rem;
  border-top: 1px solid var(--home-border);
}

.btn-full {
  width: 100%;
}

.menu-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--home-text);
  cursor: pointer;
  padding: 0.5rem;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border-radius: 0.75rem;
  font-family: var(--font-title), 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  border: none;
}

.btn-primary {
  background: linear-gradient(90deg, #4F46E5, #EA580C);
  color: white;
  box-shadow: 0 4px 14px rgba(79, 70, 229, 0.35);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(79, 70, 229, 0.45);
  filter: brightness(1.05);
}

.btn-outline {
  background: transparent;
  color: var(--home-text);
  border: 1px solid var(--home-border-strong);
}

.btn-outline:hover {
  background: var(--home-surface-hover);
  border-color: rgba(255, 255, 255, 0.3);
}

.btn-lg {
  padding: 1rem 2rem;
  font-size: 1rem;
  border-radius: 1rem;
}

/* CTA do Grupo VIP (WhatsApp) — coração roxo + nome do grupo. */
.btn-vip {
  gap: 0.45rem;
}

.btn-vip-heart {
  font-size: 1.05rem;
  line-height: 1;
  display: inline-block;
  transition: transform 0.2s ease;
  filter: drop-shadow(0 2px 6px rgba(139, 92, 246, 0.45));
}

.btn-vip:hover .btn-vip-heart {
  transform: scale(1.18);
}

/* CTA principal do hero: a única coisa que a página precisa que a pessoa
   clique. Por isso é o botão mais forte da tela (cor, tamanho e pulso). */
.btn.btn-hero {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 1.15rem 2.4rem;
  font-size: 1.08rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  border-radius: 1.15rem;
  border: none;
  background: linear-gradient(135deg, #4F46E5 0%, #7C3AED 55%, #A855F7 100%);
  color: #fff;
  overflow: hidden;
  box-shadow: 0 18px 40px -18px rgba(79, 70, 229, 0.9);
  animation: heroCtaPulse 2.8s ease-in-out infinite;
}

.btn.btn-hero:hover {
  transform: translateY(-2px) scale(1.02);
  color: #fff;
  box-shadow: 0 26px 50px -18px rgba(79, 70, 229, 0.95);
}

.btn.btn-hero:active {
  transform: translateY(0) scale(1);
}

.btn.btn-hero svg {
  transition: transform 0.25s ease;
}

.btn.btn-hero:hover svg {
  transform: translateX(4px);
}

@keyframes heroCtaPulse {
  0%, 100% {
    box-shadow: 0 18px 40px -18px rgba(79, 70, 229, 0.9), 0 0 0 0 rgba(79, 70, 229, 0.32);
  }
  50% {
    box-shadow: 0 18px 40px -18px rgba(79, 70, 229, 0.9), 0 0 0 12px rgba(79, 70, 229, 0);
  }
}

/* Hero */
.hero {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  padding: 5rem 1.5rem 1.5rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-title {
  font-family: var(--font-title), 'Poppins', sans-serif;
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--home-text);
  margin-bottom: 1rem;
  animation: fadeInUp 0.6s ease 0.1s both;
}

.text-gradient {
  background: linear-gradient(90deg, #818CF8, #FB923C);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-subtitle {
  font-size: clamp(0.9rem, 1.8vw, 1.1rem);
  color: var(--home-text-muted);
  max-width: 600px;
  line-height: 1.6;
  margin-bottom: 1.5rem;
  animation: fadeInUp 0.6s ease 0.2s both;
}

.hero-buttons {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  margin-bottom: 1.5rem;
  animation: fadeInUp 0.6s ease 0.3s both;
  flex-wrap: wrap;
}

/* Selo de prova social: mostra gente real que entrou neste mês */
.hero-proof {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.35rem 1rem 0.35rem 0.4rem;
  border-radius: 999px;
  background: var(--home-surface);
  border: 1px solid var(--home-border);
  box-shadow: 0 14px 34px -28px rgba(0, 0, 0, 0.9);
  margin-bottom: 1.35rem;
  animation: fadeInUp 0.6s ease 0.05s both;
  max-width: 100%;
}

.hero-proof .hero-trust-avatars {
  display: flex;
  flex-shrink: 0;
}

.hero-proof .hero-trust-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid var(--home-bg);
  background: #4F46E5;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.68rem;
  font-weight: 700;
  margin-left: -0.55rem;
  overflow: hidden;
  flex-shrink: 0;
}

.hero-proof .hero-trust-avatar:first-child {
  margin-left: 0;
}

.hero-proof .hero-trust-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-proof .hero-trust-avatar span {
  color: #fff;
  line-height: 1;
}

.hero-proof-text {
  font-size: 0.82rem;
  color: var(--home-text-muted);
  line-height: 1.2;
  min-width: 0;
}

.hero-proof-text strong {
  color: var(--home-text);
  font-weight: 700;
}

/* ── SplitDemo: a assinatura visual da conta dividida ─────────────── */
.split-demo {
  width: min(720px, 100%);
  margin: 0 auto 1.75rem;
  padding: 1.25rem 1.4rem 1.35rem;
  background: var(--home-surface);
  border: 1px solid var(--home-border);
  border-radius: 1.25rem;
  text-align: left;
  position: relative;
  overflow: hidden;
  animation: fadeInUp 0.6s ease 0.35s both;
  box-shadow: 0 30px 70px -50px rgba(79, 70, 229, 0.9);
}

.split-demo::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 15% 0%, rgba(79, 70, 229, 0.14), transparent 60%);
  pointer-events: none;
}

.split-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.9rem;
  flex-wrap: wrap;
  position: relative;
}

.split-service {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--home-text);
  min-width: 0;
}

.split-service img {
  width: 30px;
  height: 30px;
  object-fit: contain;
  border-radius: 8px;
  flex-shrink: 0;
}

.split-service-fallback {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 800;
  flex-shrink: 0;
}

.split-price-full {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  white-space: nowrap;
}

.split-price-full small {
  font-size: 0.64rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--home-text-muted);
  font-weight: 600;
}

.split-price-full strong {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--home-text);
}

.split-bar {
  display: flex;
  gap: 4px;
  margin: 1.05rem 0 0.7rem;
  height: 14px;
  position: relative;
}

.split-slice {
  flex: 1 1 0;
  min-width: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(129, 140, 248, 0.45), rgba(99, 102, 241, 0.25));
}

/* Fatia vazia: a vaga do grupo esperando alguém entrar. */
.split-slice.is-vazia {
  background: rgba(148, 163, 184, 0.16);
}

.split-slice.is-full {
  background: linear-gradient(180deg, #818CF8, #6366F1);
}

.split-slice.is-yours {
  background: linear-gradient(180deg, #4F46E5, #7C3AED);
  box-shadow: 0 0 20px rgba(79, 70, 229, 0.6);
}

/* Faixa do grupo: quem já entrou, quantas vagas faltam. */
.split-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 0.9rem;
  position: relative;
}

.split-group-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.28rem 0.65rem;
  border-radius: 999px;
  background: rgba(79, 70, 229, 0.12);
  border: 1px solid rgba(79, 70, 229, 0.28);
  color: var(--home-primary);
  font-size: 0.76rem;
  font-weight: 700;
}

.split-group-badge.is-completo {
  background: rgba(16, 185, 129, 0.14);
  border-color: rgba(16, 185, 129, 0.4);
  color: #047857;
}

.split-group-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  animation: splitPulse 1.6s ease-in-out infinite;
}

@keyframes splitPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.72); }
}

.split-group-hint {
  font-size: 0.74rem;
  color: var(--home-text-muted);
  font-weight: 600;
}

.split-parts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  position: relative;
}

.split-part {
  flex: 1 1 0;
  min-width: 112px;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.55rem 0.65rem;
  border-radius: 0.7rem;
  background: var(--home-bg);
  border: 1px solid var(--home-border);
  transition: border-color 0.3s ease, background 0.3s ease, opacity 0.3s ease;
}

/* Vaga: a parte do grupo que ainda está esperando alguém. */
.split-part.is-vaga {
  border-style: dashed;
  border-color: rgba(148, 163, 184, 0.4);
  opacity: 0.72;
}

.split-part-person {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
}

.split-person-avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
  border: 1px dashed rgba(148, 163, 184, 0.55);
}

.split-part.is-in .split-person-avatar {
  border: none;
}

.split-part small {
  font-size: 0.64rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--home-text-muted);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.split-part strong {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--home-text);
}

.split-part.is-yours {
  border-color: rgba(79, 70, 229, 0.55);
  background: rgba(79, 70, 229, 0.12);
}

.split-part.is-yours strong {
  color: var(--home-primary);
}

.split-note {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0.9rem 0 0;
  font-size: 0.82rem;
  color: var(--home-text-muted);
  line-height: 1.5;
  position: relative;
}

.split-note svg {
  color: #FBBF24;
  flex-shrink: 0;
  margin-top: 2px;
}

.split-note strong {
  color: var(--home-text);
}

.hero-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  animation: fadeInUp 0.6s ease 0.4s both;
  flex-wrap: wrap;
  text-align: center;
}

.hero-stat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  padding: 0.75rem 1.25rem;
  background: var(--home-surface);
  border: 1px solid var(--home-border);
  border-radius: 1rem;
  min-width: 140px;
}

.hero-stat-card-highlight {
  background: rgba(52, 211, 153, 0.08);
  border-color: rgba(52, 211, 153, 0.2);
}

.hero-stat-emoji {
  font-size: 1.25rem;
  line-height: 1;
}

.hero-stat-value {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--home-text);
  line-height: 1.2;
}

.hero-stat-card-highlight .hero-stat-value {
  color: #34d399;
}

.hero-stat-label {
  font-size: 0.72rem;
  color: var(--home-text-muted);
  line-height: 1.3;
}

.hero-savings-disclaimer {
  margin-top: 1rem;
  font-size: 0.7rem;
  color: var(--home-text-muted);
  text-align: center;
  opacity: 0.6;
  animation: fadeInUp 0.6s ease 0.5s both;
}

.hero-stat-card .hero-trust-avatars {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-bottom: 0.35rem;
}

.hero-stat-card .hero-trust-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid var(--home-bg);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 700;
  margin-left: -0.6rem;
  overflow: hidden;
  flex-shrink: 0;
}

.hero-stat-card .hero-trust-avatar:first-child {
  margin-left: 0;
}

.hero-stat-card .hero-trust-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.hero-stat-card .hero-trust-avatar span {
  color: white;
  line-height: 1;
}

.hero-trust-avatar-more {
  background: rgba(255, 255, 255, 0.15) !important;
  color: var(--home-text) !important;
  font-size: 0.65rem !important;
  border-color: var(--home-border) !important;
}

.trust-avatars {
  display: flex;
}

.trust-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid var(--home-bg);
  background: linear-gradient(135deg, #4F46E5, #818CF8);
  margin-left: -0.75rem;
}

.trust-avatar:first-child {
  margin-left: 0;
}

.trust-avatar:nth-child(2) {
  background: linear-gradient(135deg, #EA580C, #FB923C);
}

.trust-avatar:nth-child(3) {
  background: linear-gradient(135deg, #10B981, #0EA5E9);
}

.trust-avatar:nth-child(4) {
  background: linear-gradient(135deg, #818CF8, #4F46E5);
}

.hero-trust span {
  font-size: 0.85rem;
  color: var(--home-text-muted);
}

.hero-trust span strong {
  color: var(--home-text);
}

.hero-trust-savings {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
}

.hero-trust-savings-value {
  font-size: 1rem;
  font-weight: 700;
  color: #34d399;
}

.hero-trust-savings-label {
  font-size: 0.78rem;
  color: var(--home-text-muted);
}

.hero-trust-divider {
  width: 1px;
  height: 32px;
  background: var(--home-border);
}

.hero-trust-users {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.trust-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.trust-text strong {
  color: var(--home-text);
  font-weight: 700;
}

.trust-text span {
  color: var(--home-text-muted);
  font-size: 0.875rem;
}

/* Stats */
.stats-section {
  max-width: 1280px;
  margin: 0 auto;
  padding: 2rem 1.5rem 5rem;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

.stat-card {
  background: var(--home-surface);
  border: 1px solid var(--home-border);
  border-radius: var(--home-radius);
  padding: 2rem 1.5rem;
  text-align: center;
  transition: all 0.3s ease;
}

.stat-card:hover {
  background: var(--home-surface-hover);
  border-color: var(--home-border-strong);
  transform: translateY(-4px);
}

.stat-value {
  font-family: var(--font-title), 'Poppins', sans-serif;
  font-size: 2rem;
  font-weight: 800;
  color: var(--home-primary);
  margin-bottom: 0.5rem;
}

.stat-label {
  color: var(--home-text-muted);
  font-size: 0.9rem;
}

/* Section Header */
.section-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 700px;
  margin: 0 auto 2.5rem;
  padding: 0 1.5rem;
}

.section-tag {
  display: inline-block;
  padding: 0.35rem 1rem;
  background: var(--primary-soft);
  border: 1px solid rgba(79, 70, 229, 0.2);
  border-radius: 9999px;
  color: var(--home-primary);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 1rem;
  text-align: center;
}

.section-title {
  font-family: var(--font-title), 'Poppins', sans-serif;
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 1rem;
  color: var(--home-text);
  text-align: center;
}

.section-description {
  color: var(--home-text-muted);
  font-size: 1.1rem;
  line-height: 1.6;
  text-align: center;
}

/* Categories Quick Access */
/* Services */
.services-section {
  max-width: 1280px;
  margin: 0 auto;
  padding: 3rem 1.5rem;
  overflow-x: hidden;
}

.services-header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.services-header-btn {
  white-space: nowrap;
  flex-shrink: 0;
}

.home-search-wrap {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1rem;
  background: var(--home-surface);
  border: 1px solid var(--home-border);
  border-radius: 2rem;
  margin-top: 1.5rem;
  transition: border-color 0.2s;
}

.home-search-wrap:focus-within {
  border-color: var(--primary);
}

.home-search-wrap svg {
  color: var(--home-text-muted);
  flex-shrink: 0;
}

.home-search-wrap input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  font-size: 0.9rem;
  color: var(--home-text);
}

.home-search-wrap input::placeholder {
  color: var(--home-text-muted);
}

.home-search-clear {
  background: none;
  border: none;
  color: var(--home-text-muted);
  cursor: pointer;
  display: flex;
  padding: 2px;
}

.home-category-wrapper {
  position: relative;
  margin-top: 1rem;
}

.home-category-bar {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 0.25rem;
  scroll-behavior: smooth;
}

.home-category-bar::-webkit-scrollbar {
  display: none;
}

.home-category-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--home-border);
  background: var(--home-surface);
  color: var(--home-text);
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  backdrop-filter: blur(8px);
  transition: all 0.2s;
}

.home-category-arrow:hover {
  background: var(--home-surface-hover);
  border-color: var(--home-border-strong);
}

.home-category-arrow.left {
  left: -4px;
}

.home-category-arrow.right {
  right: -4px;
}

.home-category-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 1rem;
  border-radius: 2rem;
  border: 1px solid var(--home-border);
  background: var(--home-surface);
  color: var(--home-text-muted);
  font-size: 0.82rem;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.2s ease;
}

.home-category-pill:hover {
  border-color: var(--home-border-strong);
  color: var(--home-text);
}

.home-category-pill.active {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
}

.home-pill-icon {
  font-size: 0.85rem;
}

.home-services-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 0.5rem;
  margin-top: 1.5rem;
}

.home-services-wrapper {
  position: relative;
}

.home-services-wrapper.has-fade::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 160px;
  background: linear-gradient(to bottom, transparent, var(--home-bg, #0b0f19));
  pointer-events: none;
  z-index: 1;
}

.home-show-more {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
}

.home-show-more .btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.home-show-more-count {
  font-size: 0.8rem;
  color: var(--home-text-muted);
}

.home-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 3rem 1rem;
  color: var(--home-text-muted);
  font-size: 0.95rem;
}

.home-service-card {
  background: var(--home-surface);
  border: 1px solid var(--home-border);
  border-radius: 0.75rem;
  overflow: hidden;
  text-decoration: none;
  color: var(--home-text);
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  padding: 0.5rem 0.25rem 0.35rem;
  opacity: 0;
  animation: homeCardIn 0.5s ease-out forwards;
  min-width: 0;
}

@keyframes homeCardIn {
  from { opacity: 0; transform: translateY(20px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.home-service-card:hover {
  transform: translateY(-6px) scale(1.03);
  box-shadow: 0 16px 32px -4px rgb(0 0 0 / 0.2);
  border-color: var(--home-border-strong);
}

.home-card-pinned {
  border-color: #4F46E5;
  box-shadow: 0 2px 12px rgb(79 70 229 / 0.2);
}

.home-card-featured {
  border-color: #EA580C;
}

.home-service-header {
  position: relative;
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.65rem;
  overflow: hidden;
}

.home-service-logo {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgb(0 0 0 / 0.15));
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.home-service-card:hover .home-service-logo {
  transform: scale(1.15) rotate(3deg);
}

.home-service-icon-text {
  width: 40px;
  height: 40px;
  background: rgba(255,255,255,0.08);
  border-radius: 0.65rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-title), 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  color: white;
}

.home-badge-pin,
.home-badge-star {
  position: absolute;
  top: 6px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--home-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  color: var(--primary);
}

.home-badge-star {
  left: 6px;
}

.home-badge-pin {
  right: 6px;
}

.home-service-name {
  font-size: 0.6rem;
  font-weight: 600;
  color: var(--home-text-muted);
  text-align: center;
  line-height: 1.1;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 0.25rem;
}

/* How it Works */
.how-it-works-section {
  max-width: 1280px;
  margin: 0 auto;
  padding: 3rem 1.5rem;
}

/* Desktop: 4-col grid — sempre visível */
.steps-flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem;
  position: relative;
}

/* Mobile/tablet: scroll wrapper fica visível e flow mobile vira flex */
.steps-scroll-wrapper {
  display: none;
}

/* Flow mobile: visível só quando wrapper está ativo */
.steps-flow-mobile {
  display: none;
}

.step-card {
  background: var(--home-surface);
  border: 1px solid var(--home-border);
  border-radius: var(--home-radius);
  padding: 1.25rem;
  text-align: left;
  transition: all 0.3s ease;
  position: relative;
}

.step-card:hover {
  background: var(--home-surface-hover);
  border-color: var(--home-border-strong);
  transform: translateY(-3px);
}

/* Desktop: arrow between steps */
.step-arrow {
  position: absolute;
  right: -0.85rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--home-border-strong);
  font-size: 1.1rem;
  font-weight: 700;
  z-index: 1;
  pointer-events: none;
  opacity: 0.5;
}

/* Last step: hide arrow */
.step-card:last-child .step-arrow {
  display: none;
}

.step-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--primary-soft);
  color: var(--home-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.75rem;
}

.step-number {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-family: var(--font-title), 'Poppins', sans-serif;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--home-border-strong);
  line-height: 1;
  opacity: 0.6;
}

.step-card h3 {
  font-size: 0.9rem;
  font-weight: 700;
  margin-bottom: 0.35rem;
  color: var(--home-text);
  padding-right: 2rem; /* space for step-number */
}

.step-card p {
  color: var(--home-text-muted);
  font-size: 0.78rem;
  line-height: 1.5;
  margin: 0;
}

/* ── Highlight card (step 06) ───────────────────────────── */
.step-highlight-card {
  background: var(--home-surface);
  border: 1px solid var(--home-primary);
  border-radius: var(--home-radius);
  padding: 1.5rem;
  text-align: left;
  position: relative;
  margin-top: 1.5rem;
  overflow: hidden;
  transition: all 0.3s ease;
}

.step-highlight-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(79, 70, 229, 0.06), rgba(124, 58, 237, 0.03));
  pointer-events: none;
}

.step-highlight-card:hover {
  border-color: var(--home-primary);
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(79, 70, 229, 0.15);
}

.step-highlight-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.85rem;
}

.step-highlight-card .step-number {
  color: var(--home-primary);
  opacity: 0.25;
}

.step-highlight-card h3 {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.4rem;
  color: var(--home-text);
  padding-right: 2.5rem;
}

.step-highlight-card p {
  color: var(--home-text-muted);
  font-size: 0.82rem;
  line-height: 1.55;
  margin: 0 0 1rem;
}

.step-highlight-copy {
  min-width: 0;
}

/* Desktop: o card vira uma faixa horizontal (ícone | texto | ação) */
@media (min-width: 769px) {
  .step-highlight-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 1.25rem;
    padding: 1.15rem 1.5rem;
    margin-top: 1.25rem;
  }

  .step-highlight-icon {
    margin-bottom: 0;
  }

  .step-highlight-card h3 {
    margin-bottom: 0.15rem;
    padding-right: 0;
  }

  .step-highlight-card p {
    margin: 0;
  }
}

.step-highlight-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  color: #ffffff;
  padding: 0.6rem 1.2rem;
  border-radius: 0.6rem;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.25s ease;
}

.step-highlight-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 15px rgba(79, 70, 229, 0.4);
  color: #ffffff;
}

/* Steps carousel dots */
.steps-dots {
  display: none;
  justify-content: center;
  gap: 0.4rem;
  margin-top: 1rem;
}

.steps-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--home-border);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: all 0.3s ease;
}

.steps-dot.active {
  background: var(--home-primary);
  transform: scale(1.4);
}

/* Home Carousel - Grupos Disponíveis */
.home-available-groups {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1.5rem 2rem;
}

.home-carousel {
  margin-top: 1rem;
}

.home-carousel-track {
  display: flex;
  gap: 1rem;
}

.home-carousel-card {
  flex: 0 0 calc(33.333% - 0.667rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 1.25rem 1rem;
  background: var(--home-surface);
  border: 1px solid var(--home-border);
  border-radius: var(--home-radius);
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
  text-decoration: none;
  color: var(--home-text);
}

.home-carousel-card:hover {
  transform: translateY(-3px);
  border-color: var(--home-primary);
  box-shadow: 0 8px 20px -5px rgba(79, 70, 229, 0.3);
}

.home-carousel-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

.home-carousel-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-carousel-icon span {
  font-size: 1.25rem;
}

.home-carousel-info {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.home-carousel-name {
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--home-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.home-carousel-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.7rem;
  color: var(--home-success);
  font-weight: 600;
}

.home-carousel-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--home-success);
  flex-shrink: 0;
}

.home-carousel-spots {
  font-size: 0.65rem;
  color: var(--home-text-muted);
}

.home-carousel-dots {
  display: flex;
  justify-content: center;
  gap: 0.4rem;
  margin-top: 1rem;
}

.home-carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--home-border);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: all 0.2s;
}

.home-carousel-dot.active {
  background: var(--home-primary);
  transform: scale(1.3);
}

/* Testimonials Carousel */
.testimonials-carousel {
  overflow: hidden;
  position: relative;
}

.testimonials-track {
  display: flex;
  transition: transform 0.4s ease;
}

.testimonials-track .testimonial-card {
  flex: 0 0 100%;
  min-width: 0;
}

.testimonials-dots {
  display: flex;
  justify-content: center;
  gap: 0.4rem;
  margin-top: 1.25rem;
}

.testimonials-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--home-border);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: all 0.2s;
}

.testimonials-dot.active {
  background: var(--home-primary);
  transform: scale(1.3);
}

.testimonial-card {
  background: var(--home-surface);
  border: 1px solid var(--home-border);
  border-radius: var(--home-radius);
  padding: 1.25rem;
  transition: all 0.3s ease;
}

.testimonial-card:hover {
  background: var(--home-surface-hover);
  border-color: var(--home-border-strong);
}

.testimonial-stars {
  display: flex;
  gap: 0.2rem;
  color: #FBBF24;
  margin-bottom: 0.75rem;
}

.testimonial-text {
  color: var(--home-text);
  line-height: 1.6;
  margin-bottom: 1rem;
  font-size: 0.9rem;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.steps-cta {
  text-align: center;
  margin-top: 2.5rem;
}

/* Testimonials */
.testimonials-section {
  max-width: 1280px;
  margin: 0 auto;
  padding: 3rem 1.5rem;
}

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.testimonial-card {
  background: var(--home-surface);
  border: 1px solid var(--home-border);
  border-radius: var(--home-radius);
  padding: 2rem;
  transition: all 0.3s ease;
}

.testimonial-card:hover {
  background: var(--home-surface-hover);
  border-color: var(--home-border-strong);
}

.testimonial-stars {
  display: flex;
  gap: 0.25rem;
  color: #FBBF24;
  margin-bottom: 1.25rem;
}

.testimonial-text {
  color: var(--home-text);
  line-height: 1.7;
  margin-bottom: 1.5rem;
  font-size: 1rem;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.testimonial-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(90deg, #4F46E5, #EA580C);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: white;
  overflow: hidden;
  flex-shrink: 0;
}

.testimonial-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.testimonial-author strong {
  display: block;
  color: var(--home-text);
  font-weight: 700;
}

.testimonial-author span {
  color: var(--home-text-muted);
  font-size: 0.85rem;
}

.testimonials-empty {
  text-align: center;
  padding: 3rem 1.5rem;
  color: var(--home-text-muted);
}

.testimonials-empty p {
  margin-bottom: 1rem;
}

/* FAQ */
.home-container .faq-section {
  max-width: 800px;
  margin: 0 auto;
  padding: 3rem 1.5rem;
}

.home-container .faq-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.home-container .faq-item {
  background: var(--home-surface);
  border: 1px solid var(--home-border);
  border-radius: var(--home-radius);
  overflow: hidden;
  transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease;
}

.home-container .faq-item:hover {
  border-color: var(--home-border-strong);
}

.home-container .faq-item-open {
  border-color: var(--home-primary);
  background: var(--home-surface-hover);
}

.home-container .faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.35rem;
  background: none;
  border: none;
  color: var(--home-text);
  font-family: var(--font-title), 'Poppins', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: color 0.2s ease;
}

.home-container .faq-question:hover {
  color: var(--home-primary);
}

.home-container .faq-question-text {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  min-width: 0;
}

.home-container .faq-question-index {
  font-family: var(--font-title), 'Poppins', sans-serif;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--home-text-muted);
  opacity: 0.55;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  transition: color 0.25s ease, opacity 0.25s ease;
}

.home-container .faq-item-open .faq-question-index {
  color: var(--home-primary);
  opacity: 1;
}

.home-container .faq-question-label {
  min-width: 0;
}

.home-container .faq-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--home-bg);
  border: 1px solid var(--home-border);
  color: var(--home-text-muted);
  flex-shrink: 0;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.home-container .faq-question:hover .faq-toggle {
  border-color: var(--home-primary);
  color: var(--home-primary);
}

.home-container .faq-item-open .faq-toggle {
  background: var(--home-primary);
  border-color: var(--home-primary);
  color: #fff;
  transform: rotate(90deg);
}

.home-container .faq-chevron {
  transition: transform 0.3s ease;
}

/* Resposta: animação em grid (0fr -> 1fr). Sem max-height magico, sem
   vazar texto por trás do item fechado, e a altura sempre acompanha o texto. */
.home-container .faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows 0.32s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.32s;
}

.home-container .faq-answer-inner {
  overflow: hidden;
  min-height: 0;
}

.home-container .faq-item-open .faq-answer {
  grid-template-rows: 1fr;
  visibility: visible;
}

.home-container .faq-answer p {
  color: var(--home-text-muted);
  line-height: 1.7;
  margin: 0;
  padding: 0 1.35rem 1.25rem 3.05rem;
  max-width: 62ch;
}

/* CTA Section */
.cta-section {
  max-width: 1280px;
  margin: 0 auto;
  padding: 2rem 1.5rem 4rem;
}

.cta-card {
  position: relative;
  background: linear-gradient(135deg, var(--home-surface), var(--home-surface-hover));
  border: 1px solid var(--home-border);
  border-radius: 2rem;
  padding: 4rem 3rem;
  overflow: hidden;
  text-align: center;
}

.cta-content {
  position: relative;
  z-index: 1;
  max-width: 640px;
  margin: 0 auto;
}

.cta-content h2 {
  font-family: var(--font-title), 'Poppins', sans-serif;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 800;
  margin-bottom: 1rem;
  color: var(--home-text);
}

.cta-content p {
  color: var(--home-text-muted);
  font-size: 1.1rem;
  line-height: 1.7;
  margin-bottom: 2rem;
}

.cta-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

.cta-decoration {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.cta-circle {
  position: absolute;
  border-radius: 50%;
  background: rgba(79, 70, 229, 0.08);
}

.cta-circle:nth-child(1) {
  width: 300px;
  height: 300px;
  top: -150px;
  right: -100px;
}

.cta-circle:nth-child(2) {
  width: 200px;
  height: 200px;
  bottom: -100px;
  left: -50px;
  background: rgba(14, 165, 233, 0.08);
}

.cta-circle:nth-child(3) {
  width: 150px;
  height: 150px;
  bottom: 50px;
  right: 10%;
  background: rgba(79, 70, 229, 0.05);
}

/* Footer */
.footer {
  position: static;
  border-top: 1px solid var(--home-border);
  background: var(--home-surface);
  padding: 4rem 1.5rem 2rem;
}

.footer-grid {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr repeat(3, 1fr);
  gap: 3rem;
  margin-bottom: 3rem;
}

.footer-brand p {
  color: var(--home-text-muted);
  line-height: 1.7;
  margin: 1.25rem 0;
  max-width: 320px;
}

.footer-social {
  display: flex;
  gap: 0.75rem;
}

.footer-social a {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--home-surface);
  border: 1px solid var(--home-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--home-text-muted);
  font-size: 0.75rem;
  font-weight: 700;
  transition: all 0.2s ease;
}

.footer-social a:hover {
  background: var(--home-surface-hover);
  border-color: var(--home-border-strong);
  color: var(--home-text);
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.footer-links h4 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--home-text);
  margin-bottom: 0.5rem;
}

.footer-links a,
.footer-links button {
  color: var(--home-text-muted);
  font-size: 0.9rem;
  text-decoration: none;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  padding: 0;
  transition: color 0.2s ease;
}

.footer-links a:hover,
.footer-links button:hover {
  color: var(--home-text);
}

.footer-bottom {
  max-width: 1280px;
  margin: 0 auto;
  padding-top: 2rem;
  border-top: 1px solid var(--home-border);
  text-align: center;
  color: var(--home-text-muted);
  font-size: 0.9rem;
}

/* Animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive */
@media (min-width: 1025px) {
  .home-category-arrow {
    display: flex;
  }
}

@media (max-width: 1024px) {
  .home-services-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .services-header-row {
    flex-direction: column;
  }

  /* Mobile/tablet: mostrar wrapper com carrossel, esconder grid desktop */
  .how-it-works-section .steps-scroll-wrapper {
    display: block !important;
    overflow: hidden;
  }

  .how-it-works-section .steps-flow {
    display: none !important;
  }

  .how-it-works-section .steps-flow-mobile {
    display: flex !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 0.75rem;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.5rem;
    scrollbar-width: none;
    scrollbar-color: transparent transparent;
    flex-wrap: nowrap;
  }

  .how-it-works-section .steps-flow-mobile::-webkit-scrollbar {
    display: none;
  }

  .how-it-works-section .steps-flow-mobile .step-card {
    flex: 0 0 82%;
    scroll-snap-align: start;
    min-width: 0;
  }

  .how-it-works-section .step-arrow {
    display: none !important;
  }

  .how-it-works-section .steps-dots {
    display: flex;
    justify-content: center;
    gap: 0.4rem;
    margin-top: 1rem;
  }

  .testimonials-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .navbar {
    background: rgba(15, 23, 42, 0.92);
    backdrop-filter: blur(16px);
  }

  [data-theme="light"] .navbar {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(16px);
  }

  .navbar-scrolled {
    background: rgba(15, 23, 42, 0.98);
  }

  [data-theme="light"] .navbar-scrolled {
    background: rgba(255, 255, 255, 0.98);
  }

  .navbar-content {
    padding: 0 1rem;
  }

  .logo {
    font-size: 1.1rem;
    gap: 0.4rem;
    height: 40px;
  }

  .logo-icon {
    width: 28px;
    height: 28px;
    font-size: 0.85rem;
    flex-shrink: 0;
  }

  .logo-img {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
  }

  .navbar-register-btn {
    display: none !important;
  }

  .navbar-login-btn {
    display: none !important;
  }

  .navbar-actions .theme-toggle,
  .navbar-actions .theme-toggle-light {
    display: none !important;
  }

  .home-services-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 0.4rem;
  }

  .home-service-header {
    width: 52px;
    height: 52px;
  }

  .home-service-logo {
    max-width: 100%;
    max-height: 100%;
  }

  .home-service-name {
    font-size: 0.55rem;
  }

  .navbar-nav-desktop {
    display: none;
  }

  .navbar-nav-mobile {
    display: flex;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 280px;
    max-width: 85vw;
    background: var(--surface);
    border-left: 1px solid var(--border);
    padding: 0;
    flex-direction: column;
    gap: 0;
    transform: translateX(100%);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 300;
    max-height: 100vh;
    overflow-y: auto;
    box-shadow: -4px 0 24px rgb(0 0 0 / 0.2);
  }

  [data-theme="light"] .navbar-nav-mobile {
    background: #FFFFFF;
    border-left-color: rgba(0, 0, 0, 0.1);
    box-shadow: -4px 0 24px rgb(0 0 0 / 0.1);
  }

  .navbar-nav-mobile-open {
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
  }

  .navbar-nav-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
  }

  .navbar-nav-header .logo {
    font-size: 1.1rem;
  }

  .menu-close {
    display: flex;
    background: none;
    border: none;
    color: var(--text);
    cursor: pointer;
    padding: 0.25rem;
    align-items: center;
    justify-content: center;
  }

  .navbar-nav-links {
    display: flex;
    flex-direction: column;
    padding: 0.5rem 0;
    flex: 1;
  }

  .nav-link {
    padding: 0.875rem 1.25rem;
    width: 100%;
    text-align: left;
    border-bottom: 1px solid var(--border);
    font-size: 0.95rem;
  }

  .nav-mobile-actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
  }

  .nav-mobile-theme {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0;
  }

  .menu-toggle {
    display: flex;
  }

  .navbar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 250;
    animation: fadeIn 0.2s ease;
  }

  .hero {
    padding: 4rem 1.25rem 2rem;
  }

  .hero-title {
    font-size: 2rem;
    margin-bottom: 1rem;
  }

  .hero-subtitle {
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
  }

  .hero-buttons {
    flex-direction: column;
    width: 100%;
    margin-bottom: 1.5rem;
  }

  .hero-buttons .btn {
    width: 100%;
  }

  .hero-trust {
    margin-bottom: 0;
  }

  .hero-stat-card {
    min-width: 120px;
    padding: 0.6rem 0.75rem;
  }

  .home-available-groups {
    padding: 0 1rem 1.5rem;
  }

  .home-carousel-card {
    flex: 0 0 100%;
  }

  .home-services-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.35rem;
  }

  .steps-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }

  .step-card {
    padding: 1rem;
  }

  .step-icon {
    width: 36px;
    height: 36px;
  }

  .step-number {
    font-size: 1.25rem;
  }

  .step-card h3 {
    font-size: 0.85rem;
  }

  .step-card p {
    font-size: 0.75rem;
  }

  .testimonials-track .testimonial-card {
    padding: 1.25rem;
  }

  .cta-card {
    padding: 2rem 1.25rem;
  }

  .cta-buttons {
    flex-direction: column;
  }

  .cta-buttons .btn {
    width: 100%;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .step-card {
    flex: 0 0 78%;
    scroll-snap-align: start;
  }

  .step-highlight-card {
    padding: 1.25rem;
  }
}

@media (max-width: 480px) {
  .hero {
    padding: 3rem 1rem 1.5rem;
  }

  .hero-title {
    font-size: 1.75rem;
  }

  .hero-subtitle {
    font-size: 0.85rem;
  }

  .hero-buttons .btn {
    padding: 0.75rem 1.25rem;
    font-size: 0.88rem;
  }

  .home-services-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.3rem;
  }

  .step-card {
    flex: 0 0 84%;
    padding: 0.75rem;
  }

  .step-icon {
    width: 32px;
    height: 32px;
  }

  .step-number {
    font-size: 1rem;
    top: 0.75rem;
    right: 0.75rem;
  }

  .step-card h3 {
    font-size: 0.8rem;
    margin-bottom: 0.2rem;
  }

  .step-card p {
    font-size: 0.7rem;
  }

  .services-section {
    padding: 2rem 1rem;
  }

  .home-service-header {
    width: 48px;
    height: 48px;
  }

  .home-service-logo {
    max-width: 100%;
    max-height: 100%;
  }

  .home-service-name {
    font-size: 0.5rem;
  }

  .cta-card {
    padding: 1.5rem 1rem;
  }

  .footer-grid {
    gap: 1.5rem;
  }
}

/* Light mode navbar */
[data-theme="light"] .navbar,
[data-theme="light"] .navbar-scrolled {
  background: rgba(255, 255, 255, 0.95);
  border-bottom-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .navbar-scrolled {
  box-shadow: 0 4px 20px rgb(0 0 0 / 0.08);
}

[data-theme="light"] .navbar-nav-mobile {
  background: #FFFFFF;
  border-left-color: rgba(0, 0, 0, 0.08);
  box-shadow: -4px 0 24px rgb(0 0 0 / 0.1);
}

[data-theme="light"] .navbar-nav-header {
  border-bottom-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .navbar-nav-links .nav-link {
  border-bottom-color: rgba(0, 0, 0, 0.06);
  color: #0F172A;
}

[data-theme="light"] .navbar-nav-links .nav-link:hover {
  background: rgba(0, 0, 0, 0.03);
}

[data-theme="light"] .nav-mobile-actions {
  border-top-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .menu-close {
  color: #0F172A;
}

/* ==================== LIGHT MODE: FULL OVERRIDES ==================== */

[data-theme="light"] .home-container .home-bg {
  background: linear-gradient(135deg, #EEF2FF 0%, #F1F5F9 50%, #FDF4FF 100%);
}

[data-theme="light"] .hero-title {
  color: #0F172A;
}

[data-theme="light"] .hero-title .gradient-text {
  background: linear-gradient(135deg, #4F46E5, #7C3AED, #EA580C);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

[data-theme="light"] .hero-subtitle {
  color: #475569;
}

[data-theme="light"] .hero-badge {
  background: rgba(79, 70, 229, 0.08);
  border-color: rgba(79, 70, 229, 0.15);
  color: #4F46E5;
}

[data-theme="light"] .hero-badge .verified-icon {
  color: #10B981;
}

[data-theme="light"] .hero-actions .btn-primary {
  background: #4F46E5;
  color: #FFFFFF;
  box-shadow: 0 4px 14px rgba(79, 70, 229, 0.35);
}

[data-theme="light"] .hero-actions .btn-primary:hover {
  background: #4338CA;
  box-shadow: 0 6px 20px rgba(79, 70, 229, 0.45);
}

[data-theme="light"] .hero-actions .btn-outline {
  color: #0F172A;
  border-color: rgba(0, 0, 0, 0.2);
  background: rgba(255, 255, 255, 0.8);
}

[data-theme="light"] .hero-actions .btn-outline:hover {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.3);
}

[data-theme="light"] .hero-stat-card {
  background: #FFFFFF;
  border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .hero-stat-card-highlight {
  background: rgba(52, 211, 153, 0.06);
  border-color: rgba(52, 211, 153, 0.15);
}

[data-theme="light"] .hero-stat-value {
  color: #0F172A;
}

[data-theme="light"] .hero-stat-label {
  color: #64748B;
}

[data-theme="light"] .hero-stats {
  color: #475569;
}

[data-theme="light"] .stat-card {
  background: #FFFFFF;
  border-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .stat-card .stat-value {
  color: #0F172A;
}

[data-theme="light"] .stat-card .stat-label {
  color: #64748B;
}

[data-theme="light"] .about-card {
  background: #FFFFFF;
  border-color: rgba(0, 0, 0, 0.1);
  color: #0F172A;
}

[data-theme="light"] .about-card p {
  color: #475569;
}

[data-theme="light"] .section-tag {
  background: rgba(79, 70, 229, 0.08);
  border-color: rgba(79, 70, 229, 0.15);
  color: #4F46E5;
}

[data-theme="light"] .section-title {
  color: #0F172A;
}

[data-theme="light"] .section-description {
  color: #475569;
}

[data-theme="light"] .service-card {
  background: #FFFFFF;
  border-color: rgba(0, 0, 0, 0.08);
  color: #0F172A;
}

[data-theme="light"] .service-card:hover {
  border-color: rgba(79, 70, 229, 0.3);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .service-card .service-name {
  color: #0F172A;
}

[data-theme="light"] .service-card .service-price {
  color: #475569;
}

[data-theme="light"] .service-card .service-category {
  color: #64748B;
}

[data-theme="light"] .service-card .service-price-original {
  color: #94A3B8;
}

[data-theme="light"] .category-filters {
  background: #FFFFFF;
  border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .category-filter-btn {
  color: #475569;
  border-color: rgba(0, 0, 0, 0.08);
  background: #FFFFFF;
}

[data-theme="light"] .category-filter-btn.active {
  background: #4F46E5;
  color: #FFFFFF;
  border-color: #4F46E5;
}

[data-theme="light"] .category-filter-btn:hover:not(.active) {
  background: rgba(79, 70, 229, 0.08);
}

[data-theme="light"] .search-input {
  background: #FFFFFF;
  border-color: rgba(0, 0, 0, 0.12);
  color: #0F172A;
}

[data-theme="light"] .search-input::placeholder {
  color: #94A3B8;
}

[data-theme="light"] .search-input:focus {
  border-color: #4F46E5;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12);
}

[data-theme="light"] .step-card {
  background: #FFFFFF;
  border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .step-card:hover {
  background: #F8FAFC;
  border-color: rgba(79, 70, 229, 0.2);
}

[data-theme="light"] .step-card h3 {
  color: #0F172A;
}

[data-theme="light"] .step-card p {
  color: #475569;
}

[data-theme="light"] .step-number {
  color: rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .step-icon {
  background: rgba(79, 70, 229, 0.1);
  color: #4F46E5;
}

[data-theme="light"] .step-highlight-card {
  background: #FFFFFF;
  border-color: #4F46E5;
}

[data-theme="light"] .step-highlight-card::before {
  background: linear-gradient(135deg, rgba(79, 70, 229, 0.05), rgba(124, 58, 237, 0.02));
}

[data-theme="light"] .step-highlight-card:hover {
  box-shadow: 0 4px 20px rgba(79, 70, 229, 0.18);
}

[data-theme="light"] .step-highlight-card h3 {
  color: #0F172A;
}

[data-theme="light"] .step-highlight-card p {
  color: #475569;
}

[data-theme="light"] .testimonial-card {
  background: #FFFFFF;
  border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .testimonial-text {
  color: #334155;
}

[data-theme="light"] .testimonial-author strong {
  color: #0F172A;
}

[data-theme="light"] .testimonial-author span {
  color: #64748B;
}

[data-theme="light"] .testimonials-empty {
  color: #475569;
}

[data-theme="light"] .home-container .faq-item {
  background: #FFFFFF;
  border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .home-container .faq-item-open {
  border-color: rgba(79, 70, 229, 0.3);
  box-shadow: 0 2px 8px rgba(79, 70, 229, 0.08);
}

[data-theme="light"] .home-container .faq-question {
  color: #0F172A;
}

[data-theme="light"] .home-container .faq-toggle {
  background: #F1F5F9;
  border-color: rgba(0, 0, 0, 0.07);
  color: #64748B;
}

/* Item aberto: o chip continua sendo o destaque (vem DEPOIS do override
   acima, senao o cinza do tema claro apagava o preenchimento e o chevron). */
[data-theme="light"] .home-container .faq-item-open .faq-toggle {
  background: var(--home-primary);
  border-color: var(--home-primary);
  color: #FFFFFF;
}

[data-theme="light"] .home-container .faq-question-index {
  color: #64748B;
}

[data-theme="light"] .home-container .faq-answer p {
  color: #475569;
}

/* Card CTA no tema claro: o degradê vai no CARD inteiro.
   Antes ele ficava no `.cta-content` (bloco interno de 640px, sem padding e
   sem raio) e desenhava um retangulo roxo solto dentro do card branco — com
   o botao primario sumindo no fundo e o outline com texto escuro sobre
   roxo. O card e a unica coisa que deve receber o degradê. */
[data-theme="light"] .cta-section .cta-card {
  background: linear-gradient(135deg, #4F46E5, #7C3AED);
  border-color: transparent;
  box-shadow: 0 20px 45px -18px rgba(79, 70, 229, 0.55);
}

[data-theme="light"] .cta-section .cta-content h2 {
  color: #FFFFFF;
}

[data-theme="light"] .cta-section .cta-content p {
  color: rgba(255, 255, 255, 0.85);
}

/* Botoes sobre o degradê: o primario vira branco (o roxo do cartao deixaria
   o botao invisivel) e o outline ganha borda clara. */
[data-theme="light"] .cta-section .cta-buttons .btn-primary {
  background: #FFFFFF;
  color: #4F46E5;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.22);
}

[data-theme="light"] .cta-section .cta-buttons .btn-primary:hover {
  background: #EEF2FF;
  color: #3730A3;
}

[data-theme="light"] .cta-section .cta-buttons .btn-outline {
  background: rgba(255, 255, 255, 0.12);
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.5);
}

[data-theme="light"] .cta-section .cta-buttons .btn-outline:hover {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.75);
  color: #FFFFFF;
}

[data-theme="light"] .home-footer {
  background: #0F172A;
  color: #CBD5E1;
}

[data-theme="light"] .footer-bottom {
  color: #94A3B8;
  border-top-color: rgba(255, 255, 255, 0.08);
}
.login-container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background-color: var(--background);
  padding: 2rem;
  position: relative;
  overflow: hidden;
}

/* Background decoration */
.login-container::before {
  content: '';
  position: absolute;
  top: -20%;
  left: -10%;
  width: 50vw;
  height: 50vw;
  background: radial-gradient(circle, rgba(79,70,229,0.12) 0%, rgba(79,70,229,0) 60%);
  border-radius: 50%;
  z-index: 0;
}

.login-container::after {
  content: '';
  position: absolute;
  bottom: -20%;
  right: -10%;
  width: 60vw;
  height: 60vw;
  background: radial-gradient(circle, rgba(79,70,229,0.05) 0%, rgba(79,70,229,0) 60%);
  border-radius: 50%;
  z-index: 0;
}

.login-card {
  background: var(--surface);
  width: 100%;
  max-width: 420px;
  border-radius: 1.5rem;
  padding: 3rem 2.5rem;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border);
  position: relative;
  z-index: 1;
  backdrop-filter: blur(10px);
}

.login-header {
  text-align: center;
  margin-bottom: 2.5rem;
}

.login-logo {
  text-align: center;
  margin-bottom: 1.5rem;
}

.login-logo img {
  width: 64px;
  height: 64px;
  object-fit: contain;
}

.login-header h2 {
  font-size: 1.875rem;
  margin-bottom: 0.5rem;
  color: var(--secondary);
}

.login-header p {
  color: var(--text-muted);
  font-size: 0.95rem;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.form-group label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--secondary);
}

.form-group input {
  padding: 0.875rem 1rem;
  border-radius: 0.75rem;
  border: 1px solid var(--border);
  background-color: var(--background);
  font-family: var(--font-text);
  font-size: 1rem;
  color: var(--text-main);
  transition: all 0.2s ease;
}

.form-group input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(79,70,229,0.2);
  background-color: var(--surface);
}

.form-group input::placeholder {
  color: #64748B;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: -0.25rem;
}

.forgot-password {
  font-size: 0.875rem;
  color: var(--primary);
  font-weight: 500;
  transition: color 0.2s;
}

.forgot-password:hover {
  color: #818CF8;
  text-decoration: underline;
}

.btn-full {
  width: 100%;
  padding: 1rem;
  font-size: 1.05rem;
  margin-top: 0.5rem;
  box-shadow: 0 4px 6px -1px rgba(79,70,229,0.2);
}

.btn-full:hover {
  box-shadow: 0 6px 10px -1px rgba(79,70,229,0.3);
  transform: translateY(-2px);
}

.login-footer {
  margin-top: 2.5rem;
  text-align: center;
  font-size: 0.95rem;
  color: var(--text-muted);
}

.login-footer a {
  color: var(--primary);
  font-weight: 600;
  transition: color 0.2s;
}

.login-footer a:hover {
  color: #818CF8;
  text-decoration: underline;
}

/* Animations */
@keyframes slideUpFade {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.login-card {
  animation: slideUpFade 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.register-container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background-color: var(--background);
  padding: 2rem;
  position: relative;
  overflow: hidden;
}

.register-container::before {
  content: '';
  position: absolute;
  top: -10%;
  right: -10%;
  width: 50vw;
  height: 50vw;
  background: radial-gradient(circle, rgba(79,70,229,0.08) 0%, rgba(79,70,229,0) 60%);
  border-radius: 50%;
  z-index: 0;
}

.register-card {
  background: var(--surface);
  width: 100%;
  max-width: 420px;
  border-radius: 1.5rem;
  padding: 3rem 2.5rem;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border);
  position: relative;
  z-index: 1;
  backdrop-filter: blur(10px);
  animation: slideUpFade 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.register-header {
  text-align: center;
  margin-bottom: 2.5rem;
}

.register-logo {
  text-align: center;
  margin-bottom: 1.5rem;
}

.register-logo img {
  width: 64px;
  height: 64px;
  object-fit: contain;
}

.register-header h2 {
  font-size: 1.875rem;
  margin-bottom: 0.5rem;
  color: var(--secondary);
}

.register-header p {
  color: var(--text-muted);
  font-size: 0.95rem;
}

.register-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.register-footer {
  margin-top: 2.5rem;
  text-align: center;
  font-size: 0.95rem;
  color: var(--text-muted);
}

.register-footer a {
  color: var(--primary);
  font-weight: 600;
  transition: color 0.2s;
}

.register-footer a:hover {
  color: #818CF8;
  text-decoration: underline;
}

/* ----------- Cadastro em etapas ----------- */
.reg-progress {
  display: flex;
  gap: 6px;
  margin-bottom: 1.5rem;
}

.reg-progress-bar {
  flex: 1;
  height: 4px;
  border-radius: 999px;
  background: var(--border);
  transition: background 0.25s ease;
}

.reg-progress-bar.done {
  background: var(--primary);
}

.reg-progress-bar.current {
  background: var(--primary);
  opacity: 0.55;
}

.register-form .form-hint {
  display: block;
  margin-top: 6px;
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--text-muted);
}

.reg-nav {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.reg-nav .btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.reg-nav-next {
  margin-left: auto;
  justify-content: center;
}

@media (max-width: 480px) {
  .reg-nav {
    flex-direction: column-reverse;
  }

  .reg-nav-next {
    margin-left: 0;
    width: 100%;
  }
}

/* ─────────── Erro inline abaixo do input ─────────── */
.register-form .field-error {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  color: #EF4444;
  animation: regFieldShake 0.25s ease;
}

.register-form .input-error {
  border-color: #EF4444 !important;
  background-color: rgba(239, 68, 68, 0.06);
}

.register-form .input-error:focus {
  outline-color: #EF4444;
}

@keyframes regFieldShake {
  0%, 100% { transform: translateX(0); }
  30%      { transform: translateX(-3px); }
  70%      { transform: translateX(3px); }
}

/* ─────────── Origem: chips em vez de <select> ─────────── */
.lead-source-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.lead-source-chip {
  padding: 0.45rem 0.75rem;
  min-height: 38px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-main);
  font-size: 0.82rem;
  font-family: inherit;
  line-height: 1.2;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.lead-source-chip:hover:not(.selected) {
  border-color: var(--primary);
  color: var(--primary);
}

.lead-source-chip.selected {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  font-weight: 600;
}

.lead-source-chip:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

@media (max-width: 480px) {
  .lead-source-chip {
    font-size: 0.78rem;
    padding: 0.4rem 0.6rem;
    min-height: 36px;
  }
}.forgot-container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background-color: var(--background);
  padding: 2rem;
  position: relative;
  overflow: hidden;
}

.forgot-container::before {
  content: '';
  position: absolute;
  top: 10%;
  left: 10%;
  width: 40vw;
  height: 40vw;
  background: radial-gradient(circle, rgba(79,70,229,0.12) 0%, rgba(79,70,229,0) 60%);
  border-radius: 50%;
  z-index: 0;
}

.forgot-card {
  background: var(--surface);
  width: 100%;
  max-width: 420px;
  border-radius: 1.5rem;
  padding: 3rem 2.5rem;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border);
  position: relative;
  z-index: 1;
  backdrop-filter: blur(10px);
  animation: slideUpFade 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.forgot-header {
  text-align: center;
  margin-bottom: 2.5rem;
}

.forgot-header h2 {
  font-size: 1.875rem;
  margin-bottom: 0.5rem;
  color: var(--secondary);
}

.forgot-header p {
  color: var(--text-muted);
  font-size: 0.95rem;
}

.forgot-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.forgot-error {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #ef4444;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  font-size: 0.875rem;
  text-align: center;
}

.success-message {
  text-align: center;
  padding: 1rem 0;
}

.icon-circle {
  width: 64px;
  height: 64px;
  background-color: rgba(16,185,129,0.12);
  color: var(--success);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  margin: 0 auto 1rem;
}

.success-message h3 {
  color: var(--success);
  margin-bottom: 0.5rem;
}

.success-message p {
  color: var(--text-muted);
}

.forgot-footer {
  margin-top: 2.5rem;
  text-align: center;
  font-size: 0.95rem;
  color: var(--text-muted);
}

.forgot-footer a {
  color: var(--primary);
  font-weight: 600;
  transition: color 0.2s;
}

.forgot-footer a:hover {
  color: #818CF8;
  text-decoration: underline;
}
.reset-container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background-color: var(--background);
  padding: 2rem;
  position: relative;
  overflow: hidden;
}

.reset-container::before {
  content: '';
  position: absolute;
  top: 10%;
  left: 10%;
  width: 40vw;
  height: 40vw;
  background: radial-gradient(circle, rgba(79,70,229,0.12) 0%, rgba(79,70,229,0) 60%);
  border-radius: 50%;
  z-index: 0;
}

.reset-card {
  background: var(--surface);
  width: 100%;
  max-width: 420px;
  border-radius: 1.5rem;
  padding: 3rem 2.5rem;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border);
  position: relative;
  z-index: 1;
  backdrop-filter: blur(10px);
  animation: slideUpFade 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.reset-header {
  text-align: center;
  margin-bottom: 2.5rem;
}

.reset-header h2 {
  font-size: 1.875rem;
  margin-bottom: 0.5rem;
  color: var(--secondary);
}

.reset-header p {
  color: var(--text-muted);
  font-size: 0.95rem;
}

.reset-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.reset-error {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #ef4444;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  font-size: 0.875rem;
  text-align: center;
}

.reset-error-state {
  text-align: center;
  padding: 1rem 0;
}

.icon-circle-error {
  width: 64px;
  height: 64px;
  background-color: rgba(239, 68, 68, 0.12);
  color: #ef4444;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  margin: 0 auto 1rem;
}

.reset-error-state p {
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.6;
}

.reset-footer {
  margin-top: 2.5rem;
  text-align: center;
  font-size: 0.95rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.reset-footer a {
  color: var(--primary);
  font-weight: 600;
  transition: color 0.2s;
}

.reset-footer a:hover {
  color: #818CF8;
  text-decoration: underline;
}
.payment-return-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.payment-return-container {
  width: 100%;
  max-width: 480px;
  text-align: center;
}

.payment-return-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-title), 'Poppins', sans-serif;
  font-size: 1.5rem;
  font-weight: 800;
  color: white;
  margin-bottom: 2rem;
}

.payment-return-logo .logo-icon {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #4F46E5, #818CF8);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}

.payment-return-logo-img {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.payment-return-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 1.5rem;
  padding: 2.5rem 2rem;
  backdrop-filter: blur(16px);
  color: white;
  animation: fadeInUp 0.5s ease;
}

.payment-return-card .return-icon {
  margin: 0 auto 1.5rem;
}

.payment-return-card.success .return-icon {
  color: #10B981;
}

.payment-return-card.pending .return-icon {
  color: #F59E0B;
}

.payment-return-card.failure .return-icon {
  color: #EF4444;
}

.payment-return-card h2 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
}

.payment-return-card p {
  color: #94A3B8;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.return-actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.return-actions .btn {
  width: 100%;
  justify-content: center;
}

.payment-return-security {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  color: #64748B;
  font-size: 0.8rem;
  margin-top: 1.5rem;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 480px) {
  .payment-return-card {
    padding: 2rem 1.5rem;
  }

  .payment-return-card h2 {
    font-size: 1.25rem;
  }
}
.not-found-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--background);
  padding: 2rem;
}

.not-found-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 1.5rem;
  padding: 3rem 2.5rem;
  text-align: center;
  max-width: 420px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.not-found-logo {
  width: 64px;
  height: 64px;
  object-fit: contain;
  margin-bottom: 0.5rem;
}

.not-found-card h1 {
  font-size: 4rem;
  font-weight: 800;
  color: var(--primary);
  margin: 0;
  line-height: 1;
}

.not-found-card p {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--secondary);
  margin: 0;
}

.not-found-card span {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}

.not-found-card .btn {
  margin-top: 0.75rem;
}
/* ============================================
   SEO PAGES - Modern Design System
   ============================================ */

/* ==================== BASE ==================== */
.seo-page {
  min-height: 100vh;
  background: #050510;
  color: #e2e8f0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  overflow-x: hidden;
}

.seo-page * {
  box-sizing: border-box;
}

.seo-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  gap: 1rem;
  color: rgba(255,255,255,0.4);
}

.seo-loading svg {
  color: #818cf8;
}

/* ==================== HERO ==================== */
.seo-hero {
  position: relative;
  text-align: center;
  padding: 8rem 1.5rem 4rem;
  overflow: hidden;
}

.seo-hero::before {
  content: '';
  position: absolute;
  top: -50%;
  left: 50%;
  transform: translateX(-50%);
  width: 800px;
  height: 800px;
  background: radial-gradient(circle, rgba(79,70,229,0.15) 0%, transparent 70%);
  pointer-events: none;
}

.seo-hero::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);
}

.seo-hero h1 {
  font-size: clamp(2rem, 5vw, 3.25rem);
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 1rem;
  line-height: 1.15;
  letter-spacing: -0.03em;
  position: relative;
}

.seo-subtitle {
  font-size: clamp(1rem, 2.5vw, 1.2rem);
  color: rgba(255,255,255,0.5);
  margin: 0;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
  position: relative;
}

/* ==================== CONTENT ==================== */
.seo-content {
  max-width: 860px;
  margin: 0 auto;
  padding: 3rem 1.5rem 5rem;
}

/* ==================== SECTIONS ==================== */
.seo-section {
  margin-bottom: 3.5rem;
}

.seo-section h2 {
  font-size: 1.6rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 1.25rem;
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.seo-section h2::before {
  content: '';
  width: 4px;
  height: 1.4rem;
  background: linear-gradient(180deg, #818cf8, #4F46E5);
  border-radius: 2px;
  flex-shrink: 0;
}

.seo-section p {
  font-size: 1.05rem;
  line-height: 1.75;
  color: rgba(255,255,255,0.6);
  margin: 0 0 1rem;
}

/* ==================== LIST ==================== */
.seo-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.seo-list li {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.75rem 1rem;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.04);
  border-radius: 0.7rem;
  color: rgba(255,255,255,0.7);
  font-size: 0.95rem;
  transition: all 0.2s ease;
}

.seo-list li:hover {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
}

.seo-list li svg {
  color: #34d399;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}

/* ==================== STEPS ==================== */
.seo-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}

.seo-step {
  position: relative;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 1rem;
  padding: 1.5rem 1.25rem;
  text-align: center;
  transition: all 0.3s ease;
}

.seo-step:hover {
  background: rgba(255,255,255,0.04);
  border-color: rgba(79,70,229,0.3);
  transform: translateY(-2px);
}

.step-number {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: linear-gradient(135deg, #4F46E5, #7c3aed);
  color: white;
  font-weight: 700;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 0.85rem;
  box-shadow: 0 4px 15px rgba(79,70,229,0.3);
}

.seo-step h3 {
  font-size: 0.95rem;
  font-weight: 600;
  color: #ffffff;
  margin: 0 0 0.4rem;
}

.seo-step p {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.45);
  margin: 0;
  line-height: 1.4;
}

/* ==================== FEATURES ==================== */
.seo-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin-top: 1.25rem;
}

.seo-feature {
  position: relative;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 1rem;
  padding: 1.5rem;
  transition: all 0.3s ease;
  overflow: hidden;
}

.seo-feature::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(129,140,248,0.4), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.seo-feature:hover {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
  transform: translateY(-2px);
}

.seo-feature:hover::before {
  opacity: 1;
}

.seo-feature svg {
  color: #818cf8;
  margin-bottom: 0.75rem;
  width: 24px;
  height: 24px;
}

.seo-feature h3 {
  font-size: 0.95rem;
  font-weight: 600;
  color: #ffffff;
  margin: 0 0 0.35rem;
}

.seo-feature p {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.45);
  margin: 0;
  line-height: 1.5;
}

/* ==================== CTA ==================== */
.seo-cta {
  position: relative;
  text-align: center;
  padding: 3.5rem 2rem;
  background: linear-gradient(135deg, rgba(79,70,229,0.1), rgba(124,58,237,0.08));
  border-radius: 1.25rem;
  border: 1px solid rgba(79,70,229,0.2);
  margin-top: 3rem;
  overflow: hidden;
}

.seo-cta::before {
  content: '';
  position: absolute;
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(79,70,229,0.15) 0%, transparent 70%);
  pointer-events: none;
}

.seo-cta h2 {
  font-size: 1.75rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 0.6rem;
  position: relative;
  letter-spacing: -0.02em;
}

.seo-cta h2::before {
  display: none;
}

.seo-cta p {
  color: rgba(255,255,255,0.5);
  margin: 0 0 1.75rem;
  font-size: 1.05rem;
  position: relative;
}

.seo-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: linear-gradient(135deg, #4F46E5, #7c3aed);
  color: white;
  padding: 0.9rem 2rem;
  border-radius: 0.75rem;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.25s ease;
  box-shadow: 0 4px 20px rgba(79,70,229,0.35);
  position: relative;
}

.seo-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 25px rgba(79,70,229,0.45);
  background: linear-gradient(135deg, #5b53e8, #8b5cf6);
}

.seo-btn-primary:active {
  transform: translateY(0);
}

.seo-cta-buttons {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
}

.seo-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: transparent;
  color: rgba(255, 255, 255, 0.85);
  padding: 0.9rem 1.75rem;
  border-radius: 0.75rem;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.25);
  transition: all 0.25s ease;
}

.seo-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.4);
  color: #ffffff;
  transform: translateY(-1px);
}

.seo-btn-secondary:active {
  transform: translateY(0);
}

/* ==================== FAQ ==================== */
.faq-search {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  max-width: 440px;
  margin: 2rem auto 0;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 0.85rem;
  padding: 0.85rem 1.15rem;
  transition: all 0.25s ease;
  position: relative;
}

.faq-search:focus-within {
  border-color: rgba(79,70,229,0.5);
  background: rgba(255,255,255,0.06);
  box-shadow: 0 0 0 3px rgba(79,70,229,0.1);
}

.faq-search svg {
  color: rgba(255,255,255,0.3);
  flex-shrink: 0;
}

.faq-search input {
  background: none;
  border: none;
  outline: none;
  color: #ffffff;
  font-size: 0.95rem;
  width: 100%;
  font-family: inherit;
}

.faq-search input::placeholder {
  color: rgba(255,255,255,0.25);
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.faq-item {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 0.85rem;
  overflow: hidden;
  transition: all 0.25s ease;
}

.faq-item:hover {
  background: rgba(255,255,255,0.035);
  border-color: rgba(255,255,255,0.08);
}

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 1.1rem 1.25rem;
  background: none;
  border: none;
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  gap: 1rem;
  transition: color 0.2s ease;
}

.faq-question:hover {
  color: #c7d2fe;
}

.faq-question svg {
  color: rgba(255,255,255,0.3);
  flex-shrink: 0;
  transition: transform 0.25s ease;
}

.faq-answer {
  padding: 0 1.25rem 1.1rem;
  animation: faqSlideDown 0.25s ease;
}

@keyframes faqSlideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

.faq-answer p {
  font-size: 0.92rem;
  color: rgba(255,255,255,0.7);
  line-height: 1.7;
  margin: 0;
  padding: 0.6rem 0 0.6rem 1rem;
  border-left: 2px solid rgba(129,140,248,0.4);
}

/* ==================== PLATFORM PAGE ==================== */
.platform-hero {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 0;
  max-width: 860px;
  margin: 0 auto;
}

.platform-hero-icon {
  width: 100px;
  height: 100px;
  border-radius: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 3rem;
  box-shadow: 0 8px 30px rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.08);
  position: relative;
}

.platform-hero-icon img {
  width: 56px;
  height: 56px;
  object-fit: contain;
}

.platform-hero-info {
  flex: 1;
}

.platform-hero-info h1 {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  margin-bottom: 0.5rem;
}

.platform-hero-info .seo-subtitle {
  text-align: left;
  margin: 0;
}

.platform-price-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: linear-gradient(135deg, rgba(16,185,129,0.12), rgba(52,211,153,0.08));
  color: #34d399;
  padding: 0.5rem 1rem;
  border-radius: 2rem;
  font-size: 0.85rem;
  font-weight: 600;
  margin-top: 0.75rem;
  border: 1px solid rgba(16,185,129,0.2);
}

.platform-price-tag::before {
  content: '💰';
  font-size: 0.85rem;
}

.platform-official-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: rgba(255,255,255,0.4);
  font-size: 0.85rem;
  text-decoration: none;
  margin-top: 0.5rem;
  transition: color 0.2s ease;
}

.platform-official-link:hover {
  color: #818cf8;
}

/* Price cards */
.platform-price-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 1.25rem;
}

.platform-price-card {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 1rem;
  padding: 1.5rem;
  text-align: center;
  transition: all 0.3s ease;
}

.platform-price-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255,255,255,0.1);
}

.platform-price-card.highlight {
  background: linear-gradient(135deg, rgba(16,185,129,0.08), rgba(52,211,153,0.04));
  border-color: rgba(16,185,129,0.25);
}

.platform-price-card svg {
  margin-bottom: 0.5rem;
  opacity: 0.7;
}

.platform-price-card h3 {
  font-size: 0.85rem;
  font-weight: 500;
  color: rgba(255,255,255,0.5);
  margin: 0 0 0.3rem;
}

.platform-price-card .price-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
}

.platform-price-card .price-unit {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.35);
  margin: 0.15rem 0 0;
}

.platform-price-card.highlight .price-value {
  color: #34d399;
}

/* ==================== RESPONSIVE ==================== */
@media (max-width: 768px) {
  .seo-hero {
    padding: 6rem 1rem 2.5rem;
  }

  .seo-hero h1 {
    font-size: 1.75rem;
  }

  .seo-content {
    padding: 2rem 1rem 3rem;
  }

  .seo-section h2 {
    font-size: 1.3rem;
  }

  .seo-steps {
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
  }

  .seo-features {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .seo-cta {
    padding: 2.5rem 1.25rem;
  }

  .seo-cta h2 {
    font-size: 1.4rem;
  }

  .platform-hero {
    flex-direction: column;
    text-align: center;
  }

  .platform-hero-info .seo-subtitle {
    text-align: center;
  }

  .platform-hero-info h1 {
    text-align: center;
  }

  .platform-price-grid {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .platform-price-card {
    padding: 1.25rem;
  }
}

@media (max-width: 480px) {
  .seo-steps {
    grid-template-columns: 1fr;
  }

  .seo-step {
    padding: 1.25rem 1rem;
  }
}
.pwa-gate-backdrop {
  position: fixed;
  inset: 0;
  z-index: 600;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(15, 23, 42, 0.72);
  backdrop-filter: blur(10px);
}

.pwa-gate-modal {
  width: min(560px, 100%);
  /* Sem isto, o `min(560px, 100%)` fica com a porcentagem indefinida (o pai
     tem largura automática) e o modal fica com 560px — estourando a tela do
     celular e criando rolagem horizontal no dashboard inteiro. */
  max-width: calc(100vw - 2rem);
  border-radius: 1.25rem;
  padding: 1.5rem;
  border: 1px solid rgba(79, 70, 229, 0.18);
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,250,252,0.98));
  box-shadow: 0 30px 80px -30px rgba(15, 23, 42, 0.55);
  color: #0f172a;
}

[data-theme='dark'] .pwa-gate-modal {
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.98), rgba(30, 41, 59, 0.98));
  color: #e2e8f0;
}

.pwa-gate-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.pwa-gate-close {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: transparent;
  color: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.pwa-gate-close:hover {
  background: rgba(148, 163, 184, 0.12);
}

.pwa-gate-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
  background: rgba(79, 70, 229, 0.12);
  color: var(--primary);
  font-size: 0.8rem;
  font-weight: 700;
}

.pwa-gate-modal h2 {
  margin: 0 0 0.6rem;
  font-size: 1.4rem;
}

.pwa-gate-text {
  margin: 0 0 1rem;
  color: var(--text-muted);
  line-height: 1.55;
}

.pwa-gate-points {
  display: grid;
  gap: 0.55rem;
  margin-bottom: 1.25rem;
}

.pwa-gate-points div {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.95rem;
}

.pwa-gate-points svg {
  color: var(--success);
  flex-shrink: 0;
}

.pwa-gate-actions {
  display: grid;
  gap: 0.75rem;
}

.pwa-gate-btn {
  min-height: 52px;
  border-radius: 0.95rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  font-weight: 700;
}

.pwa-gate-secondary {
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: transparent;
  color: var(--text-muted);
  padding: 0.85rem 1rem;
  border-radius: 0.95rem;
  cursor: pointer;
  font-weight: 600;
}

.pwa-gate-secondary:hover {
  background: rgba(148, 163, 184, 0.08);
  color: inherit;
}

.pwa-gate-hint {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-muted);
}
.push-gate-backdrop {
  position: fixed;
  inset: 0;
  z-index: 610;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(15, 23, 42, 0.72);
  backdrop-filter: blur(10px);
}

.push-gate-modal {
  position: relative;
  width: min(560px, 100%);
  /* Mesmo motivo do modal do PWA: sem max-width o modal fica com 560px fixos
     e estoura a tela do celular. */
  max-width: calc(100vw - 2rem);
  border-radius: 1.25rem;
  padding: 1.5rem;
  border: 1px solid rgba(79, 70, 229, 0.18);
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,250,252,0.98));
  box-shadow: 0 30px 80px -30px rgba(15, 23, 42, 0.55);
  color: #0f172a;
}

[data-theme='dark'] .push-gate-modal {
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.98), rgba(30, 41, 59, 0.98));
  color: #e2e8f0;
}

.push-gate-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
  background: rgba(79, 70, 229, 0.12);
  color: var(--primary);
  font-size: 0.8rem;
  font-weight: 700;
  margin-bottom: 0.9rem;
}

/* Passo a passo para desbloquear no navegador (quando o bloqueio vem de lá). */
.push-gate-steps {
  margin: 0 0 1rem;
  padding: 0.85rem 1rem 0.85rem 2rem;
  border-radius: 0.8rem;
  background: rgba(100, 116, 139, 0.08);
  color: var(--text-muted);
  font-size: 0.85rem;
  line-height: 1.6;
}

.push-gate-steps li + li {
  margin-top: 0.35rem;
}

.push-gate-steps strong {
  color: var(--text);
}

.push-gate-modal h2 {
  margin: 0 0 0.6rem;
  font-size: 1.4rem;
}

.push-gate-text,
.push-gate-hint {
  color: var(--text-muted);
  line-height: 1.55;
}

.push-gate-text {
  margin: 0 0 1rem;
}

.push-gate-actions {
  display: grid;
  gap: 0.5rem;
}

.push-gate-btn {
  min-height: 52px;
  border-radius: 0.95rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  font-weight: 700;
}

.push-gate-skip {
  background: none;
  border: 1px solid rgba(100, 116, 139, 0.2);
  color: var(--text-muted);
  padding: 0.7rem 1rem;
  border-radius: 0.75rem;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.push-gate-skip:hover {
  background: rgba(100, 116, 139, 0.08);
  color: var(--text);
}

.push-gate-error {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  margin: 0.75rem 0 0;
  color: #ef4444;
  font-size: 0.9rem;
}

.push-gate-error svg {
  flex-shrink: 0;
  margin-top: 0.15rem;
}

.push-gate-hint {
  margin: 0.75rem 0 0;
  font-size: 0.85rem;
}
.wallet-page {
  animation: slideUpFade 0.3s ease-out forwards;
}

@keyframes slideUpFade {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.page-header {
  margin-bottom: 2rem;
}

.page-header h1 {
  font-size: 1.75rem;
  margin-bottom: 0.5rem;
  color: var(--secondary);
}

.page-header p {
  color: var(--text-muted);
}

.page-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.error-banner {
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.25);
  color: #EF4444;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  font-size: 0.9rem;
  margin-bottom: 1.5rem;
}

/* Balance Card */
.wallet-balance-card {
  background: linear-gradient(135deg, var(--primary), #818CF8);
  border-radius: 1rem;
  padding: 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  color: white;
}

.wallet-balance-main {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.wallet-balance-main > svg {
  opacity: 0.9;
}

.wallet-balance-main span {
  display: block;
  font-size: 0.9rem;
  opacity: 0.85;
  margin-bottom: 0.25rem;
}

.wallet-balance-main h2 {
  font-size: 2rem;
  font-weight: 700;
  margin: 0;
}

.wallet-balance-card .btn {
  background: rgba(255, 255, 255, 0.2);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 0.7rem 1.25rem;
  font-size: 0.9rem;
  font-weight: 600;
  border-radius: 0.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  transition: all 0.2s;
}

.wallet-balance-card .btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.3);
}

.wallet-balance-card .btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Stats Row */
.wallet-stats-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-bottom: 2.5rem;
}

.wallet-stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 1rem;
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.wallet-stat-card svg {
  color: var(--primary);
  flex-shrink: 0;
}

.wallet-stat-card span {
  display: block;
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 0.15rem;
}

.wallet-stat-card strong {
  color: var(--secondary);
  font-size: 1.15rem;
}

/* Sections */
.wallet-section {
  margin-bottom: 2.5rem;
}

.wallet-section h2 {
  font-size: 1.25rem;
  margin-bottom: 1rem;
  color: var(--secondary);
}

.wallet-empty {
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: 1rem;
  padding: 2rem;
  text-align: center;
  color: var(--text-muted);
}

/* Transaction List */
.wallet-tx-list {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 1rem;
  overflow: hidden;
}

.wallet-tx-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border);
  transition: background 0.15s;
}

.wallet-tx-row:last-child {
  border-bottom: none;
}

.wallet-tx-row:hover {
  background: rgba(0, 0, 0, 0.015);
}

.wallet-tx-icon {
  width: 40px;
  height: 40px;
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.wallet-tx-icon.credit {
  background: rgba(16, 185, 129, 0.1);
  color: #10B981;
}

.wallet-tx-icon.debit {
  background: rgba(239, 68, 68, 0.1);
  color: #EF4444;
}

.wallet-tx-info {
  flex: 1;
  min-width: 0;
}

.wallet-tx-info strong {
  display: block;
  font-size: 0.9rem;
  color: var(--secondary);
  margin-bottom: 0.1rem;
}

.wallet-tx-info span {
  display: block;
  font-size: 0.78rem;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wallet-tx-amounts {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.25rem;
  flex-shrink: 0;
}

.wallet-tx-amount {
  font-size: 0.95rem;
  font-weight: 700;
}

.wallet-tx-amount.positive {
  color: #10B981;
}

.wallet-tx-amount.negative {
  color: #EF4444;
}

.wallet-tx-date {
  font-size: 0.72rem;
  color: var(--text-muted);
}

/* Status Badge */
.status-badge {
  padding: 0.25rem 0.6rem;
  border-radius: 2rem;
  font-size: 0.7rem;
  font-weight: 600;
}

.status-badge.pago {
  background: rgba(16, 185, 129, 0.1);
  color: #10B981;
}

.status-badge.pendente {
  background: rgba(245, 158, 11, 0.1);
  color: #F59E0B;
}

.status-badge.vencido {
  background: rgba(239, 68, 68, 0.1);
  color: #EF4444;
}

/* Modal */
.wallet-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  z-index: 1000;
  backdrop-filter: blur(4px);
}

.wallet-modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 1.5rem;
  padding: 1.5rem;
  width: 100%;
  max-width: 480px;
  position: relative;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2);
  max-height: 90vh;
  overflow-y: auto;
}

.wallet-modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0.25rem;
}

.wallet-modal-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding-right: 2rem;
}

.wallet-modal-header svg {
  color: var(--primary);
}

.wallet-modal-header h3 {
  font-size: 1.1rem;
  color: var(--secondary);
  margin-bottom: 0.15rem;
}

.wallet-modal-header p {
  color: var(--text-muted);
  font-size: 0.85rem;
  margin: 0;
}

.wallet-modal-body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Form Groups */
.manage-form-group {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.manage-form-group label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
}

.manage-form-group input,
.manage-form-group select {
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  font-size: 0.9rem;
  background: var(--background);
  color: var(--text-main);
  outline: none;
}

.manage-form-group input:focus,
.manage-form-group select:focus {
  border-color: var(--primary);
}

.wallet-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

/* Method Toggle */
.wallet-method-toggle {
  display: flex;
  gap: 0.5rem;
}

.wallet-method-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: var(--background);
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.wallet-method-btn.active {
  border-color: var(--primary);
  color: var(--primary);
  background: rgba(79, 70, 229, 0.05);
  font-weight: 600;
}

.wallet-method-btn:hover {
  border-color: var(--primary);
}

/* Info Box */
.wallet-info-box {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: rgba(14, 165, 233, 0.06);
  border: 1px solid rgba(14, 165, 233, 0.15);
  border-radius: 0.5rem;
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.wallet-info-box svg {
  color: #0EA5E9;
  flex-shrink: 0;
  margin-top: 1px;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.7rem 1.25rem;
  border-radius: 0.5rem;
  font-size: 0.9rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-primary {
  background: var(--primary);
  color: white;
}

.btn-primary:hover:not(:disabled) {
  filter: brightness(1.1);
}

.btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-full {
  width: 100%;
}

.spin {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem;
  color: var(--text-muted);
  gap: 1rem;
}

/* Toast */
.toast-success {
  position: fixed;
  top: 1.5rem;
  right: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.2rem;
  background: #10B981;
  color: white;
  border-radius: 0.75rem;
  font-size: 0.9rem;
  font-weight: 500;
  z-index: 9999;
  animation: toastIn 0.3s ease-out;
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.3);
}

.toast-success button {
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  padding: 0;
  display: flex;
  margin-left: 0.5rem;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.toast-success button:hover {
  opacity: 1;
}

@keyframes toastIn {
  from { opacity: 0; transform: translateY(-12px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 768px) {
  .wallet-balance-card {
    flex-direction: column;
    gap: 1rem;
    align-items: stretch;
    text-align: center;
  }

  .wallet-balance-main {
    justify-content: center;
  }

  .wallet-balance-main h2 {
    font-size: 1.5rem;
  }

  .wallet-stats-row {
    grid-template-columns: 1fr;
  }

  .wallet-tx-row {
    flex-wrap: wrap;
  }

  .wallet-tx-amounts {
    width: 100%;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding-left: 52px;
  }

  .wallet-form-row {
    grid-template-columns: 1fr;
  }
}
.my-cards-page {
  max-width: 800px;
  margin: 0 auto;
}

.page-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.my-cards-info-box {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.875rem 1rem;
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-bottom: 1.5rem;
}

.my-cards-info-box svg {
  flex-shrink: 0;
  color: var(--accent-green);
}

.my-cards-empty {
  text-align: center;
  padding: 3rem 1rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 16px;
}

.my-cards-empty svg {
  color: var(--text-muted);
  margin-bottom: 1rem;
}

.my-cards-empty h3 {
  margin: 0 0 0.5rem;
}

.my-cards-empty p {
  color: var(--text-secondary);
  margin: 0 0 1.5rem;
}

.my-cards-grid {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.my-card-item {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.25rem;
  transition: border-color 0.2s;
}

.my-card-item:hover {
  border-color: var(--accent-primary);
}

.my-card-item.is-default {
  border-color: var(--accent-green);
}

.my-card-item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.my-card-brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
}

.my-card-brand-icon {
  font-size: 1.25rem;
}

.my-card-brand-name {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.my-card-default-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--accent-green);
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: 20px;
  padding: 0.25rem 0.75rem;
}

.my-card-number {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  font-family: 'SF Mono', 'Fira Code', 'Courier New', monospace;
  color: var(--text-primary);
  margin-bottom: 0.75rem;
}

.my-card-number .card-reveal-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0.2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: color 0.15s ease;
  letter-spacing: 0;
}

.my-card-number .card-reveal-btn:hover {
  color: var(--primary);
}

.my-card-details {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.my-card-holder {
  font-size: 0.85rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.my-card-expiry {
  font-size: 0.85rem;
  font-family: 'SF Mono', 'Fira Code', 'Courier New', monospace;
  color: var(--text-secondary);
  font-weight: 600;
}

.my-card-actions {
  display: flex;
  gap: 0.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

.btn-danger-outline {
  background: transparent;
  color: #EF4444;
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
  font-size: 0.8rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  transition: all 0.2s;
}

.btn-danger-outline:hover:not(:disabled) {
  background: rgba(239, 68, 68, 0.1);
  border-color: #EF4444;
}

.btn-danger-outline:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.my-cards-add-modal {
  max-width: 500px;
}

.add-card-error {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 10px;
  padding: 0.75rem 1rem;
  font-size: 0.85rem;
  color: #EF4444;
  margin-bottom: 1rem;
}

.add-card-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.card-form-row {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.card-form-row label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.card-form-row input {
  padding: 0.7rem 0.85rem;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: 0.95rem;
  transition: border-color 0.2s;
}

.card-form-row input:focus {
  outline: none;
  border-color: var(--accent-primary);
}

.card-form-row input.field-error {
  border-color: #EF4444;
}

.field-error-msg {
  font-size: 0.75rem;
  color: #EF4444;
}

.card-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

@media (max-width: 600px) {
  .page-header-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .my-card-number {
    font-size: 1.1rem;
    letter-spacing: 0.1em;
  }

  .my-card-actions {
    flex-direction: column;
  }

  .my-card-actions .btn {
    width: 100%;
    justify-content: center;
  }
}

/* Remove card confirmation modal */
.confirm-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  backdrop-filter: blur(3px);
}

.confirm-modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 1.25rem;
  padding: 2rem;
  max-width: 380px;
  width: 100%;
  text-align: center;
  position: relative;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  animation: cardPop 0.2s ease-out;
}

@keyframes cardPop {
  from { opacity: 0; transform: scale(0.95) translateY(8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.confirm-modal-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s;
}

.confirm-modal-close:hover { color: var(--text); }

.confirm-modal-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
}

.confirm-modal-icon.danger {
  background: rgba(239, 68, 68, 0.1);
  color: #EF4444;
}

.confirm-modal h3 {
  font-size: 1.1rem;
  color: var(--text);
  margin: 0 0 0.5rem;
}

.confirm-modal p {
  color: var(--text-muted);
  font-size: 0.875rem;
  line-height: 1.55;
  margin: 0 0 1.5rem;
}

.confirm-modal p strong { color: var(--text); }

.confirm-modal-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
}

.confirm-modal-actions .btn-outline {
  flex: 1;
  justify-content: center;
}

.confirm-modal-actions .btn-danger {
  flex: 1;
  justify-content: center;
  background: #EF4444;
  color: white;
  border: none;
  border-radius: 0.5rem;
  padding: 0.6rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: background 0.2s;
}

.confirm-modal-actions .btn-danger:hover:not(:disabled) { background: #DC2626; }
.confirm-modal-actions .btn-danger:disabled { opacity: 0.6; cursor: not-allowed; }

.spin { animation: spin 0.8s linear infinite; }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
/* ===========================================================================
   Modal de renovação de assinatura
   ---------------------------------------------------------------------------
   Mesma linguagem visual do painel de cobrança (overlay, cartão, opções de
   método), mas isolado: o modal de fatura e o de renovação são fluxos
   diferentes e podem evoluir separadamente.
   ========================================================================= */

.ren-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(2, 6, 23, 0.78);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 1rem;
}

.ren-modal {
  position: relative;
  width: 100%;
  max-width: 480px;
  max-height: 92vh;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 1rem;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}

.ren-modal-close {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 0.5rem;
  background: var(--surface-soft, rgba(148, 163, 184, 0.12));
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.ren-modal-close:hover {
  color: var(--text-main);
  background: rgba(148, 163, 184, 0.22);
}

.ren-modal-header {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1.15rem 1.25rem;
  border-bottom: 1px solid var(--border);
  color: var(--primary);
}

.ren-modal-header.is-success {
  color: #22c55e;
}

.ren-modal-header h3 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-main);
}

.ren-modal-header p {
  margin: 0.15rem 0 0;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.ren-modal-body {
  padding: 1.15rem 1.25rem 1.35rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* ------------------------------- aviso ----------------------------------- */
.ren-warning {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  padding: 0.7rem 0.85rem;
  border-radius: 0.6rem;
  border: 1px solid rgba(245, 158, 11, 0.32);
  background: rgba(245, 158, 11, 0.1);
  color: #fbbf24;
  font-size: 0.82rem;
  line-height: 1.45;
}

.ren-warning svg {
  flex-shrink: 0;
  margin-top: 1px;
}

/* ------------------------------ métodos ---------------------------------- */
.ren-method-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.ren-method {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.8rem 0.9rem;
  border-radius: 0.65rem;
  border: 1px solid var(--border);
  background: var(--surface-soft, rgba(148, 163, 184, 0.07));
  color: var(--text-muted);
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.ren-method:hover {
  border-color: var(--border-strong);
  color: var(--text-main);
}

.ren-method.active {
  border-color: var(--primary);
  background: rgba(79, 70, 229, 0.12);
  color: var(--primary);
}

.ren-method span {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.ren-method strong {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-main);
}

.ren-method.active strong {
  color: var(--primary);
}

.ren-method small {
  font-size: 0.74rem;
  color: var(--text-soft);
}

/* ------------------------------ cartões ---------------------------------- */
.ren-cards {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.ren-cards-title {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-soft);
}

.ren-card-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.6rem 0.75rem;
  border-radius: 0.55rem;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.84rem;
  transition: border-color 0.15s, background 0.15s;
}

.ren-card-row.selected {
  border-color: var(--primary);
  background: rgba(79, 70, 229, 0.12);
  color: var(--primary);
}

.ren-card-number {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--text-main);
}

.ren-card-brand {
  margin-left: auto;
  font-size: 0.74rem;
  color: var(--text-soft);
}

.ren-hint {
  margin: 0;
  font-size: 0.78rem;
  color: var(--text-soft);
}

/* ---------------------- cartão: cadastrar / trocar ------------------------ */
.ren-cards-empty {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: 0.85rem 0.9rem;
  border-radius: 0.65rem;
  border: 1px dashed var(--border-strong);
  background: var(--surface-soft, rgba(148, 163, 184, 0.07));
}

.ren-cards-empty .ren-hint {
  line-height: 1.45;
}

/* Botao proprio (sem `.btn`) para nao herdar as regras globais de `.btn-outline`
   que conflitam entre as paginas do app. */
.ren-add-card-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  width: 100%;
  padding: 0.6rem 0.85rem;
  border-radius: 0.55rem;
  border: 1px solid var(--primary);
  background: rgba(79, 70, 229, 0.12);
  color: var(--primary);
  font-family: inherit;
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.ren-add-card-btn:hover:not(:disabled) {
  background: var(--primary);
  border-color: var(--primary);
  color: #FFFFFF;
}

.ren-add-card-btn.is-secondary {
  border-color: var(--border-strong);
  background: transparent;
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 500;
}

.ren-add-card-btn.is-secondary:hover:not(:disabled) {
  background: rgba(79, 70, 229, 0.1);
  border-color: var(--primary);
  color: var(--primary);
}

.ren-add-card-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* O modal de cadastro de cartao abre por cima do modal de renovacao. Os dois
   overlays usam o mesmo z-index, entao o bump garante a ordem independente
   do contexto de empilhamento. */
.ren-modal-overlay ~ .wallet-modal-overlay {
  z-index: 1100;
}

/* ------------------------------- resumo ---------------------------------- */
.ren-summary {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.35rem 1rem;
  padding: 0.85rem 0.95rem;
  border-radius: 0.65rem;
  background: var(--surface-soft, rgba(148, 163, 184, 0.08));
  font-size: 0.85rem;
}

.ren-summary span {
  color: var(--text-muted);
}

.ren-summary strong {
  color: var(--text-main);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* --------------------------------- PIX ----------------------------------- */
.ren-pix-body {
  align-items: center;
}

.ren-qrcode {
  width: 220px;
  height: 220px;
  border-radius: 0.75rem;
  background: #fff;
  padding: 8px;
}

.ren-copy-section {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.ren-copy-section label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-soft);
}

.ren-copy-row {
  display: flex;
  gap: 0.5rem;
}

.ren-copy-row input {
  flex: 1;
  min-width: 0;
  padding: 0.5rem 0.65rem;
  border-radius: 0.5rem;
  border: 1px solid var(--border);
  background: var(--background);
  color: var(--text-main);
  font-size: 0.75rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.ren-polling-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.ren-error {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  width: 100%;
  padding: 0.65rem 0.8rem;
  border-radius: 0.55rem;
  border: 1px solid rgba(239, 68, 68, 0.35);
  background: rgba(239, 68, 68, 0.1);
  color: #fca5a5;
  font-size: 0.82rem;
  line-height: 1.4;
}

.ren-error svg {
  flex-shrink: 0;
  margin-top: 1px;
}

.ren-secure-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  margin: 0;
  font-size: 0.74rem;
  color: var(--text-soft);
  text-align: center;
}

.ren-success-text {
  margin: 0;
  font-size: 0.87rem;
  line-height: 1.5;
  color: var(--text-muted);
}

.ren-confirm-btn {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  font-size: 0.92rem;
  font-weight: 600;
}

.ren-confirm-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* O app tem varias regras globais de `.btn-outline` (algumas de paginas do
   admin vazam para o usuario inteiro). O botao secundario do modal declara
   as cores aqui para nao depender de qual delas vence o conflito. */
.ren-confirm-btn.btn-outline {
  background: var(--surface);
  color: var(--text-main);
  border: 1px solid var(--border-strong);
}

.ren-confirm-btn.btn-outline:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: #FFFFFF;
}

/* ---------------------------------------------------------------------------
   Ciclo de pagamento + cupom (renovacao)

   O ciclo ja vem marcado no ciclo que a pessoa tinha na assinatura, e o
   total exibido e "preco mensal x meses do ciclo" — o preco do ciclo
   aparece sempre, para ninguem confundir o valor mensal com o total.
   --------------------------------------------------------------------------- */
.ren-block-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}

.ren-cycle-block,
.ren-coupon-block {
  margin-top: 1rem;
}

.ren-cycle-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.ren-cycle-option {
  flex: 1 1 120px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  padding: 0.6rem 0.75rem;
  border-radius: 0.6rem;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text-main);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.ren-cycle-option strong {
  font-size: 0.88rem;
  font-weight: 600;
}

.ren-cycle-option small {
  font-size: 0.74rem;
  color: var(--text-muted);
}

.ren-cycle-option:hover {
  border-color: var(--primary);
}

.ren-cycle-option.active {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 12%, transparent);
}

.ren-coupon-row {
  display: flex;
  gap: 0.5rem;
}

.ren-coupon-row input {
  flex: 1;
  min-width: 0;
  padding: 0.55rem 0.7rem;
  border-radius: 0.55rem;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text-main);
  font-size: 0.85rem;
  text-transform: uppercase;
}

.ren-coupon-row input:focus {
  outline: none;
  border-color: var(--primary);
}

.ren-coupon-ok,
.ren-coupon-error {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0.45rem 0 0;
  font-size: 0.78rem;
}

.ren-coupon-ok {
  color: var(--success, #22c55e);
}

.ren-coupon-error {
  color: var(--danger, #ef4444);
}

.ren-summary-discount {
  color: var(--success, #22c55e);
}

.ren-summary-total-label {
  margin-top: 0.35rem;
  padding-top: 0.45rem;
  border-top: 1px solid var(--border-strong);
  font-weight: 600;
  color: var(--text-main) !important;
}

.ren-summary-total {
  font-size: 1.05rem;
  font-weight: 700;
}

@media (max-width: 520px) {
  .ren-modal {
    max-width: 100%;
  }

  .ren-qrcode {
    width: 180px;
    height: 180px;
  }
}
/* ===========================================================================
   Card de renovação da assinatura
   ---------------------------------------------------------------------------
   Mesmo tom do aviso do modal de renovação (`.ren-warning`), mas em um bloco
   que fica dentro de cards e listagens. As cores vêm das variáveis do tema
   (escuro/claro) para não repetir a paleta em cada tela.
   ========================================================================= */

.rrc-card {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  width: 100%;
  padding: 0.8rem 0.9rem;
  border-radius: 0.7rem;
  border: 1px solid rgba(245, 158, 11, 0.32);
  background: rgba(245, 158, 11, 0.1);
  text-align: left;
}

.rrc-card.is-danger {
  border-color: rgba(239, 68, 68, 0.35);
  background: rgba(239, 68, 68, 0.1);
}

.rrc-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--warning, #F59E0B);
}

.rrc-card.is-danger .rrc-icon {
  color: var(--error, #EF4444);
}

.rrc-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3rem;
  min-width: 0;
  flex: 1;
}

.rrc-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-main);
}

.rrc-text {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--text-muted);
}

.rrc-btn {
  margin-top: 0.15rem;
  font-size: 0.78rem;
}

@media (max-width: 640px) {
  .rrc-card {
    padding: 0.65rem 0.7rem;
  }

  .rrc-text {
    font-size: 0.74rem;
  }
}
.sac-container {
  width: 100%;
}

.sac-viewport {
  overflow: hidden;
  border-radius: 1rem;
}

.sac-track {
  display: flex;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.sac-page {
  flex: 0 0 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  min-width: 0;
}

.sac-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1.25rem 0.75rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--service-color, var(--primary));
  border-radius: 0.875rem;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
  color: var(--text);
  font-family: inherit;
}

.sac-card:hover {
  transform: translateY(-2px);
  border-color: var(--primary);
  border-left-color: var(--service-color, var(--primary));
  box-shadow: 0 6px 16px -4px rgba(79, 70, 229, 0.25);
}

.sac-card-logo {
  width: 52px;
  height: 52px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  font-size: 1.25rem;
}

.sac-card-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.sac-card-name {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.sac-card-status {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.65rem;
  color: var(--success);
  font-weight: 600;
}

.sac-card-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--success);
  flex-shrink: 0;
}

/* Renovação vencida: o serviço continua listado, mas sem acesso. */
.sac-card.is-overdue {
  border-color: rgba(239, 68, 68, 0.45);
}

.sac-card-status.is-overdue {
  color: #f87171;
}

.sac-card-status.is-overdue .sac-card-dot {
  background: #ef4444;
}

/* O card virou `div` (o aviso de renovação tem botão próprio e não pode
   ficar dentro de outro botão): o clique e o teclado seguem igual. */
.sac-card:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Aviso de renovação ocupando a largura do card. */
.sac-card .rrc-card {
  width: 100%;
}

.sac-dots {
  display: flex;
  justify-content: center;
  gap: 0.35rem;
  margin-top: 0.75rem;
}

.sac-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--border);
  transition: all 0.3s;
  cursor: pointer;
  border: none;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sac-dot:hover {
  background: rgba(79, 70, 229, 0.5);
}

.sac-dot.active {
  background: var(--primary);
  transform: scale(1.4);
}

@media (max-width: 640px) {
  .sac-page {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
  }

  .sac-card {
    padding: 0.75rem 0.35rem;
    gap: 0.35rem;
  }

  .sac-card-logo {
    width: 36px;
    height: 36px;
    border-radius: 8px;
  }

  .sac-card-name {
    font-size: 0.7rem;
  }

  .sac-card-status {
    font-size: 0.6rem;
  }
}

@media (min-width: 641px) and (max-width: 900px) {
  .sac-page {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.625rem;
  }
}/* ============================================================
   ENGAJAMENTO DE CATÁLOGO
   Estilos das seções novas do dashboard e do catálogo:
   ofertas patrocinadas, recomendados, oportunidades, votação
   e o botão "Avise-me quando houver uma vaga".

   Prefixos usados (nenhum colide com o resto do app):
     .sponsored-*  ofertas patrocinadas
     .recommended-* card de recomendados
     .opp-*        ofertas e oportunidades
     .vote-card-*  card de votação
     .watch-btn-*  botão de lista de espera
   ============================================================ */

/* ─────────────────────────────────────────────────────────────
   OFERTAS PATROCINADAS
   ───────────────────────────────────────────────────────────── */
.sponsored-section {
  margin-bottom: 3rem;
}

.sponsored-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}

.sponsored-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--action);
  background: var(--action-bg);
  color: #7C2D12;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  margin-bottom: 0.6rem;
}

.sponsored-header h2 {
  font-size: 1.5rem;
  color: var(--secondary);
  margin: 0 0 0.25rem;
}

.sponsored-header p {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 0;
  max-width: 52ch;
}

.sponsored-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1rem;
}

.sponsored-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.sponsored-card:hover {
  transform: translateY(-3px);
  border-color: var(--action);
  box-shadow: var(--shadow-md);
}

/* Faixa de destaque no topo do card — é o que faz parecer "destaque". */
.sponsored-card::before {
  content: '';
  display: block;
  height: 4px;
  background: linear-gradient(90deg, var(--action), var(--action-light), var(--primary));
}

.sponsored-badge {
  position: absolute;
  top: 0.9rem;
  left: 0.9rem;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #7C2D12;
  background: var(--action-bg);
  border: 1px solid rgba(234, 88, 12, 0.35);
  padding: 0.28rem 0.6rem;
  border-radius: 999px;
  z-index: 2;
}

/* Sem banner não tem nada para o selo "flutuar" por cima: ele entra no fluxo
   e não cobre o título do anúncio. */
.sponsored-card--no-banner .sponsored-badge {
  position: static;
  align-self: flex-start;
  margin-bottom: 0.15rem;
}

.sponsored-banner {
  width: 100%;
  height: 130px;
  object-fit: cover;
  display: block;
  background: var(--surface-soft);
}

.sponsored-card-body {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 1.1rem 1.15rem 1.25rem;
  flex: 1;
}

.sponsored-card-body h3 {
  font-size: 1.05rem;
  color: var(--text-main);
  margin: 0;
  line-height: 1.35;
}

.sponsored-card-body p {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.5;
}

.sponsored-service {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-main);
}

.sponsored-service-logo {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

.sponsored-service-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.sponsored-service-logo span {
  font-size: 0.8rem;
}

.sponsored-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: auto;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
}

.sponsored-sponsor {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.sponsored-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--action);
  text-decoration: none;
  white-space: nowrap;
}

.sponsored-cta:hover {
  text-decoration: underline;
}

/* Variante compacta: dentro de "Ofertas e oportunidades". */
.opp-card .sponsored-section {
  margin-bottom: 0;
}

.sponsored-grid--compact {
  grid-template-columns: 1fr;
  gap: 0.6rem;
}

.sponsored-card--compact {
  flex-direction: row;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0.9rem;
}

.sponsored-card--compact::before {
  display: none;
}

.sponsored-card--compact .sponsored-badge {
  position: static;
  align-self: flex-start;
  font-size: 0.6rem;
  padding: 0.2rem 0.45rem;
}

.sponsored-card--compact .sponsored-card-body {
  padding: 0;
  gap: 0.2rem;
  flex: 1;
}

.sponsored-card--compact .sponsored-card-body h3 {
  font-size: 0.88rem;
}

.sponsored-card--compact .sponsored-card-body p {
  font-size: 0.76rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sponsored-card--compact .sponsored-foot {
  border-top: none;
  padding-top: 0;
  margin-top: 0.1rem;
}

.sponsored-card--compact .sponsored-sponsor {
  display: none;
}

/* ─────────────────────────────────────────────────────────────
   RECOMENDADOS PARA VOCÊ — faixa compacta do topo
   Cada item é só logo + nome, em scroll horizontal: o card
   grande comia a tela inteira do celular.
   ───────────────────────────────────────────────────────────── */
.recommended-section {
  margin-bottom: 2rem;
}

.recommended-head {
  margin-bottom: 0.7rem;
}

.recommended-head-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem 1rem;
  flex-wrap: wrap;
}

.recommended-title {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 1.25rem;
  color: var(--secondary);
  margin: 0;
}

.recommended-title svg {
  color: var(--primary-light);
  flex-shrink: 0;
}

.recommended-tagline {
  font-size: 0.92rem;
  font-weight: 800;
  background: linear-gradient(90deg, var(--primary-light), var(--economy));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 0;
  white-space: nowrap;
}

.recommended-sub {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin: 0.15rem 0 0;
}

/* A faixa rola na horizontal e some a barra: no celular o polegar
   desliza e o conteúdo continua reachable com um toque. */
.highlight-strip {
  display: flex;
  gap: 0.55rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding: 0.7rem 0.15rem 0.6rem;
  margin: 0 -0.15rem;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.highlight-strip::-webkit-scrollbar {
  display: none;
}

.highlight-chip {
  position: relative;
  flex: 0 0 auto;
  width: 104px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  padding: 0.7rem 0.5rem 0.6rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--text);
  scroll-snap-align: start;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.highlight-chip:hover {
  transform: translateY(-3px);
  border-color: var(--primary);
  box-shadow: var(--shadow-md);
}

.highlight-chip-logo {
  width: 44px;
  height: 44px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

.highlight-chip-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.highlight-chip-logo span {
  font-size: 1.1rem;
}

.highlight-chip-name {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-main);
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}

/* Oferta patrocinada: leve destaque + efeitos, sem roubar a tela. */
.highlight-chip--offer {
  border-color: rgba(234, 88, 12, 0.45);
  background:
    radial-gradient(circle at 50% 0%, rgba(234, 88, 12, 0.16), transparent 62%),
    var(--surface);
  box-shadow: 0 0 0 1px rgba(234, 88, 12, 0.16), 0 10px 26px -14px rgba(234, 88, 12, 0.6);
  animation: offer-glow 3.4s ease-in-out infinite;
}

.highlight-chip--offer:hover {
  border-color: var(--action);
}

.highlight-chip-ribbon {
  position: absolute;
  top: -0.5rem;
  left: 50%;
  transform: translateX(-50%);
  max-width: calc(100% - 0.5rem);
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.52rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #7C2D12;
  background: var(--action-bg);
  border: 1px solid rgba(234, 88, 12, 0.4);
  padding: 0.14rem 0.4rem;
  border-radius: 999px;
  white-space: nowrap;
  pointer-events: none;
}

/* Brilho que atravessa o card patrocinado no hover. */
.highlight-chip--offer::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    105deg,
    transparent 30%,
    rgba(255, 255, 255, 0.16) 48%,
    transparent 66%
  );
  background-size: 220% 100%;
  background-position: 130% 0;
  transition: background-position 0.7s ease;
  pointer-events: none;
}

.highlight-chip--offer:hover::after {
  background-position: -30% 0;
}

@keyframes offer-glow {
  0%, 100% {
    box-shadow: 0 0 0 1px rgba(234, 88, 12, 0.16), 0 10px 26px -14px rgba(234, 88, 12, 0.5);
  }
  50% {
    box-shadow: 0 0 0 1px rgba(234, 88, 12, 0.4), 0 14px 32px -12px rgba(234, 88, 12, 0.85);
  }
}

/* ─────────────────────────────────────────────────────────────
   BOTÃO "AVISE-ME QUANDO HOUVER UMA VAGA"
   ───────────────────────────────────────────────────────────── */
.watch-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.5rem 0.85rem;
  font-size: 0.78rem;
  font-weight: 700;
  font-family: inherit;
  color: var(--primary-light);
  background: var(--primary-soft);
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.18s ease;
  text-align: center;
  line-height: 1.2;
}

.watch-btn:hover:not(:disabled) {
  background: rgba(79, 70, 229, 0.22);
  border-color: var(--primary);
}

.watch-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

.watch-btn--active {
  color: var(--economy);
  background: var(--economy-bg);
}

.watch-btn--active:hover:not(:disabled) {
  background: rgba(16, 185, 129, 0.22);
  border-color: var(--economy);
}

.watch-btn--sm {
  padding: 0.35rem 0.65rem;
  font-size: 0.7rem;
}

.watch-btn--block {
  width: 100%;
}

/* ─────────────────────────────────────────────────────────────
   OFERTAS E OPORTUNIDADES
   ───────────────────────────────────────────────────────────── */
.opp-section {
  margin-bottom: 3rem;
}

.opp-header h2 {
  font-size: 1.5rem;
  color: var(--secondary);
  margin: 0 0 0.3rem;
}

.opp-header p {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 0 0 1.25rem;
}

.opp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
}

.opp-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  /* Item de grid: sem `min-width: 0` ele não encolhe abaixo do conteúdo
     mínimo e um nome longo (ex.: "Extensão DividePass — 7 dias") estica a
     grade inteira, criando rolagem horizontal no celular. */
  min-width: 0;
}

.opp-card-title {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-main);
  margin: 0;
}

.opp-card-title svg {
  color: var(--primary-light);
  flex-shrink: 0;
}

.opp-list {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.opp-row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.6rem 0.7rem;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.18s ease, transform 0.18s ease;
}

.opp-row:hover {
  border-color: var(--primary);
  transform: translateX(2px);
}

.opp-row-logo {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

.opp-row-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.opp-row-logo span {
  font-size: 0.85rem;
}

.opp-row-main {
  flex: 1;
  min-width: 0;
}

.opp-row-name {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.opp-row-sub {
  display: block;
  font-size: 0.72rem;
  color: var(--text-muted);
}

.opp-row-price {
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--economy);
  white-space: nowrap;
}

.opp-row-badge {
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--success);
  background: var(--economy-bg);
  padding: 0.18rem 0.4rem;
  border-radius: 999px;
  white-space: nowrap;
}

.opp-empty {
  font-size: 0.8rem;
  color: var(--text-muted);
  padding: 0.75rem 0;
  margin: 0;
}

.opp-savings-row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.6rem 0.7rem;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.18s ease;
}

.opp-savings-row:hover {
  border-color: var(--economy);
}

.opp-savings-main {
  flex: 1;
  min-width: 0;
}

.opp-savings-name {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.opp-savings-prices {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  font-size: 0.74rem;
}

.opp-savings-old {
  color: var(--text-muted);
  text-decoration: line-through;
}

.opp-savings-new {
  color: var(--economy);
  font-weight: 800;
}

.opp-savings-badge {
  font-size: 0.68rem;
  font-weight: 800;
  color: var(--economy);
  background: var(--economy-bg);
  padding: 0.22rem 0.45rem;
  border-radius: 999px;
  white-space: nowrap;
}

/* ─────────────────────────────────────────────────────────────
   "O QUE VOCÊ GOSTARIA DE COMPARTILHAR?" (voto)
   ───────────────────────────────────────────────────────────── */
.vote-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.35rem;
  margin-bottom: 3rem;
}

.vote-card-header {
  margin-bottom: 1rem;
}

.vote-card-header h2 {
  font-size: 1.35rem;
  color: var(--secondary);
  margin: 0 0 0.3rem;
}

.vote-card-header p {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 0;
  max-width: 60ch;
}

.vote-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.75rem;
}

.vote-item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.7rem 0.8rem;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: border-color 0.18s ease, background 0.18s ease;
}

.vote-item--voted {
  border-color: var(--economy);
  background: var(--economy-bg);
}

.vote-item-logo {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

.vote-item-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.vote-item-logo span {
  font-size: 0.9rem;
}

.vote-item-main {
  flex: 1;
  min-width: 0;
}

.vote-item-name {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vote-item-sub {
  display: block;
  font-size: 0.7rem;
  color: var(--text-muted);
}

.vote-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.42rem 0.7rem;
  font-size: 0.75rem;
  font-weight: 700;
  font-family: inherit;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.18s ease;
  white-space: nowrap;
}

.vote-btn:hover:not(:disabled) {
  border-color: var(--economy);
  color: var(--economy);
}

.vote-btn--active {
  color: #052E1F;
  background: var(--economy);
  border-color: var(--economy);
}

.vote-btn--active:hover:not(:disabled) {
  color: #052E1F;
  background: var(--economy);
  filter: brightness(1.08);
}

.vote-btn:disabled {
  opacity: 0.55;
  cursor: default;
}

/* ─────────────────────────────────────────────────────────────
   RESPONSIVO
   ───────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .sponsored-header h2,
  .recommended-title,
  .opp-header h2,
  .vote-card-header h2 {
    font-size: 1.1rem;
  }

  .recommended-tagline {
    font-size: 0.85rem;
  }

  /* A faixa continua rolando; os itens ficam um pouco menores para caber
     mais logos na tela do celular. */
  .highlight-chip {
    width: 92px;
    padding: 0.6rem 0.4rem 0.55rem;
  }

  .highlight-chip-logo {
    width: 40px;
    height: 40px;
  }

  .highlight-chip-name {
    font-size: 0.68rem;
  }

  .sponsored-grid,
  .opp-grid,
  .vote-grid {
    grid-template-columns: 1fr;
  }

  .vote-card {
    padding: 1rem;
  }
}

/* Quem tem-motion reduzido não vê o brilho pulsando do patrocinado. */
@media (prefers-reduced-motion: reduce) {
  .highlight-chip--offer {
    animation: none;
  }

  .highlight-chip--offer::after {
    display: none;
  }
}
/* ===========================================================================
   Popup de feedback do usuário
   ---------------------------------------------------------------------------
   Mesma linguagem visual do modal de suporte (overlay, cartão, campos), mas
   com o tom do CTA do dashboard: a ideia é chamar atenção, não parecer
   formulário de suporte.
   ========================================================================= */

.feedback-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(2, 6, 23, 0.78);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 1rem;
  animation: feedbackFadeIn 0.2s ease-out;
}

.feedback-modal {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 1.25rem;
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  animation: feedbackSlideUp 0.3s ease-out;
}

@keyframes feedbackFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes feedbackSlideUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.feedback-modal-close {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 0.5rem;
  background: var(--surface-soft, rgba(148, 163, 184, 0.12));
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.feedback-modal-close:hover {
  color: var(--text-main);
  background: rgba(148, 163, 184, 0.22);
}

/* ------------------------------- cabeçalho ------------------------------- */
.feedback-modal-header {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 1.35rem 1.5rem 1.1rem;
  border-bottom: 1px solid var(--border);
}

.feedback-modal-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 0.85rem;
  background: linear-gradient(135deg, rgba(79, 70, 229, 0.22), rgba(124, 58, 237, 0.18));
  border: 1px solid rgba(129, 140, 248, 0.35);
  color: var(--primary-light, #818cf8);
}

.feedback-modal-header h3 {
  margin: 0 0 0.2rem;
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--text-main);
  padding-right: 2rem;
}

.feedback-modal-header p {
  margin: 0;
  font-size: 0.84rem;
  color: var(--text-muted);
}

/* -------------------------------- formulário ----------------------------- */
.feedback-modal-form {
  padding: 1.25rem 1.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.feedback-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.feedback-field label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-muted);
}

.feedback-field textarea {
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: 0.65rem;
  padding: 0.85rem 0.95rem;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--text-main);
  font-family: inherit;
  resize: vertical;
  min-height: 140px;
  transition: border-color 0.2s;
}

.feedback-field textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--ring);
}

.feedback-field textarea.field-error {
  border-color: #EF4444;
}

.feedback-field textarea::placeholder {
  color: var(--text-soft);
}

.feedback-field-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.feedback-hint {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.74rem;
  color: var(--text-soft);
}

.feedback-hint svg {
  color: var(--primary-light, #818cf8);
}

.feedback-error-hint {
  font-size: 0.74rem;
  color: #EF4444;
}

.feedback-char-count {
  font-size: 0.72rem;
  color: var(--text-soft);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.feedback-error {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.65rem 0.85rem;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 0.6rem;
  font-size: 0.82rem;
  line-height: 1.4;
  color: #FCA5A5;
}

.feedback-error svg {
  flex-shrink: 0;
  margin-top: 1px;
}

/* --------------------------------- ações -------------------------------- */
.feedback-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
}

.feedback-modal-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.62rem 1.2rem;
  font-size: 0.87rem;
  font-weight: 600;
  border-radius: 0.55rem;
  cursor: pointer;
  transition: all 0.2s;
}

.feedback-modal-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* O app tem varias regras globais de `.btn-outline` (algumas de paginas do
   admin vazam para o usuario inteiro). As cores do botao secundario sao
   declaradas aqui para nao depender de qual delas vence o conflito. */
.feedback-actions .feedback-modal-btn.btn-outline {
  background: var(--surface);
  color: var(--text-main);
  border: 1px solid var(--border-strong);
}

.feedback-actions .feedback-modal-btn.btn-outline:hover:not(:disabled) {
  background: var(--primary);
  border-color: var(--primary);
  color: #FFFFFF;
}

/* -------------------------------- sucesso ------------------------------- */
.feedback-modal-success {
  padding: 2.5rem 1.5rem 2rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
}

.feedback-success-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.3);
  color: #10B981;
}

.feedback-modal-success h3 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-main);
}

.feedback-modal-success p {
  margin: 0;
  max-width: 34ch;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--text-muted);
}

.feedback-modal-success .feedback-modal-btn {
  margin-top: 0.6rem;
}

@media (max-width: 520px) {
  .feedback-modal {
    max-width: 100%;
    max-height: 95vh;
  }

  .feedback-modal-header {
    padding: 1.15rem 1.1rem 1rem;
  }

  .feedback-modal-form {
    padding: 1rem 1.1rem 1.25rem;
  }

  .feedback-actions {
    flex-direction: column-reverse;
  }

  .feedback-actions .feedback-modal-btn {
    width: 100%;
  }
}
/* ==========================================================================
   Card de convite do Grupo Oficial da DividePass no WhatsApp
   --------------------------------------------------------------------------
   Fica no dashboard, acima do card de feedback. A ideia é chamar atenção:
   fundo no verde oficial do WhatsApp, ícone da marca em destaque e um botão
   branco (máximo contraste sobre o verde) com a chamada principal.
   ========================================================================== */

.wa-group-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-bottom: 1.5rem;
  padding: 1.25rem 1.4rem;
  border-radius: 1.1rem;
  background:
    radial-gradient(circle at 88% -10%, rgba(37, 211, 102, 0.3), transparent 55%),
    linear-gradient(135deg, #0a4f2b 0%, #0d6b34 42%, #12803f 100%);
  border: 1px solid rgba(37, 211, 102, 0.55);
  box-shadow: 0 20px 42px -22px rgba(9, 94, 49, 0.95);
  color: #fff;
}

/* Marca d'água da marca: preenche o lado direito do card sem competir
   com o texto (fica em 8% de opacidade). */
.wa-group-watermark {
  position: absolute;
  top: 50%;
  right: -18px;
  transform: translateY(-50%) rotate(-12deg);
  color: #fff;
  opacity: 0.09;
  pointer-events: none;
  z-index: 0;
}

/* Brilhos decorativos no fundo do card. */
.wa-group-glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

.wa-group-glow-a {
  top: -60px;
  right: -40px;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.18) 0%, transparent 70%);
}

.wa-group-glow-b {
  bottom: -80px;
  left: -50px;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, rgba(37, 211, 102, 0.35) 0%, transparent 70%);
}

/* Ícone oficial do WhatsApp dentro de um bloco de vidro. */
.wa-group-icon {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  box-shadow: 0 12px 24px -14px rgba(0, 0, 0, 0.75);
}

/* Anel pulsando — é o que puxa o olho para o ícone. */
.wa-group-icon::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 22px;
  border: 2px solid rgba(255, 255, 255, 0.55);
  animation: wa-group-pulse 2.4s ease-out infinite;
}

@keyframes wa-group-pulse {
  0% {
    transform: scale(0.9);
    opacity: 0.85;
  }
  70% {
    transform: scale(1.12);
    opacity: 0;
  }
  100% {
    transform: scale(1.12);
    opacity: 0;
  }
}

.wa-group-body {
  position: relative;
  z-index: 1;
  flex: 1;
  min-width: 0;
}

.wa-group-title {
  display: block;
  font-size: 1.08rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #fff;
}

.wa-group-desc {
  margin: 0.3rem 0 0;
  font-size: 0.86rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.92);
}

/* Botão branco sobre o verde: é o ponto de maior contraste do card. */
.wa-group-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.85rem;
  padding: 0.75rem 1.3rem;
  border-radius: 999px;
  background: #ffffff;
  color: #0f7a43;
  font-size: 0.92rem;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 12px 26px -14px rgba(0, 0, 0, 0.7);
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.wa-group-btn:hover {
  transform: translateY(-2px);
  background: #f2fff7;
  color: #0b5c31;
  box-shadow: 0 18px 32px -14px rgba(0, 0, 0, 0.8);
}

.wa-group-btn svg {
  flex-shrink: 0;
}

.wa-group-btn-arrow {
  transition: transform 0.18s ease;
}

.wa-group-btn:hover .wa-group-btn-arrow {
  transform: translateX(3px);
}

@media (max-width: 640px) {
  .wa-group-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.9rem;
    padding: 1.1rem 1.15rem;
  }

  .wa-group-watermark {
    display: none;
  }

  .wa-group-btn {
    width: 100%;
    justify-content: center;
  }
}

/* Quem pede menos movimento não recebe pulso nem levitação. */
@media (prefers-reduced-motion: reduce) {
  .wa-group-icon::after {
    animation: none;
  }

  .wa-group-btn,
  .wa-group-btn-arrow {
    transition: none;
  }

  .wa-group-btn:hover {
    transform: none;
  }

  .wa-group-btn:hover .wa-group-btn-arrow {
    transform: none;
  }
}
/* Card de chamada "Comece a criar o seu grupo agora" — fica no topo da home
   de quem disse, no onboarding, que quer criar um grupo. */

.create-group-cta {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 1.25rem;
  padding: 1rem 1.15rem;
  border: 1px solid var(--primary);
  border-radius: var(--radius);
  background: linear-gradient(120deg, var(--primary-soft), transparent 85%);
}

.create-group-cta-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--primary);
  color: #fff;
}

.create-group-cta-text {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
  flex: 1;
}

.create-group-cta-text strong {
  font-size: 0.95rem;
  color: var(--text-main);
}

.create-group-cta-text span {
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--text-muted);
}

.create-group-cta-button {
  flex-shrink: 0;
  padding: 0.6rem 1.1rem;
  border-radius: var(--radius-sm);
  background: var(--primary);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: filter 0.2s ease, transform 0.2s ease;
}

.create-group-cta-button:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.create-group-cta-close {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.create-group-cta-close:hover {
  background: rgba(148, 163, 184, 0.15);
  color: var(--text-main);
}

@media (max-width: 640px) {
  .create-group-cta {
    flex-wrap: wrap;
    gap: 0.7rem;
    padding: 0.9rem;
  }

  .create-group-cta-text {
    flex: 1 1 calc(100% - 60px);
  }

  .create-group-cta-button {
    flex: 1 1 auto;
    text-align: center;
  }

  .create-group-cta-close {
    position: absolute;
    right: 0.6rem;
    top: 0.6rem;
  }
}
/* ============================================================
   INSIGHTS DA VISÃO GERAL
   Card "Top mais vendidos", lista de "Últimas assinaturas",
   hero personalizado do dashboard e slides (tarjas) da página
   de plataforma.

   Prefixos usados (nenhum colide com o resto do app):
     .ins-*        cabeçalho/seção compartilhados
     .top-sell-*   carrossel de mais vendidos
     .recent-*     últimas assinaturas
     .dash-hero-*  hero personalizado do dashboard
     .plat-slide-* slides (tarjas) da página de plataforma
   ============================================================ */

/* ─────────────────────────────────────────────────────────────
   CABEÇALHO DE SEÇÃO
   ───────────────────────────────────────────────────────────── */
.ins-section {
  margin-bottom: 2.5rem;
  /* O dashboard vive num layout flex: sem `min-width: 0` a seção aceita a
     largura do conteúdo e a página ganha rolagem horizontal no celular. */
  min-width: 0;
  max-width: 100%;
}

.ins-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.1rem;
}

.ins-head-main {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.ins-head-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border-radius: 12px;
  background: var(--action-bg);
  color: var(--action);
}

.ins-head-icon.ins-head-icon--green {
  background: var(--economy-bg);
  color: var(--economy);
}

.ins-head-icon.ins-head-icon--blue {
  background: var(--tech-bg);
  color: var(--tech);
}

.ins-head h2 {
  font-size: 1.35rem;
  line-height: 1.2;
  color: var(--secondary);
  margin: 0;
}

.ins-head p {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin: 0.15rem 0 0;
}

.ins-head-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--primary);
  text-decoration: none;
  white-space: nowrap;
}

.ins-head-link:hover {
  text-decoration: underline;
}

/* ─────────────────────────────────────────────────────────────
   CARROSSEL "TOP MAIS VENDIDOS"
   ───────────────────────────────────────────────────────────── */
.top-sell {
  position: relative;
  min-width: 0;
  max-width: 100%;
}

.top-sell-viewport {
  position: relative;
  min-width: 0;
  max-width: 100%;
}

.top-sell-track {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 0.25rem 0.25rem 1rem;
  scrollbar-width: none;
  /* O scroller precisa ser limitado pelo pai — senão ele cresce até a soma
     dos cards e a página inteira ganha rolagem horizontal no celular. */
  min-width: 0;
  max-width: 100%;
}

.top-sell-track::-webkit-scrollbar {
  display: none;
}

.top-sell-card {
  scroll-snap-align: start;
  flex: 0 0 232px;
  width: 232px;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.top-sell-card:hover {
  transform: translateY(-4px);
  border-color: var(--action);
  box-shadow: var(--shadow-md);
}

.top-sell-media {
  position: relative;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  background: var(--surface-soft);
  overflow: hidden;
}

.top-sell-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.14), transparent 65%);
  pointer-events: none;
}

.top-sell-media img {
  width: 58%;
  height: 58%;
  object-fit: contain;
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.35));
  z-index: 1;
}

.top-sell-media--empty {
  background: var(--surface-soft);
}

.top-sell-media-letter {
  font-size: 2.6rem;
  font-weight: 800;
  color: var(--text-main);
  z-index: 1;
}

.top-sell-rank {
  position: absolute;
  top: 0.7rem;
  left: 0.7rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.32rem 0.6rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: rgba(15, 23, 42, 0.82);
  color: #fff;
  backdrop-filter: blur(6px);
}

.top-sell-rank--first {
  background: linear-gradient(135deg, #f59e0b, #ea580c);
  color: #fff;
}

.top-sell-badge {
  position: absolute;
  top: 0.7rem;
  right: 0.7rem;
  z-index: 2;
  padding: 0.28rem 0.55rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 800;
  background: var(--economy-bg);
  color: var(--economy);
}

.top-sell-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 0.9rem 1rem 1rem;
  gap: 0.35rem;
}

.top-sell-title {
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--secondary);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.top-sell-meta {
  font-size: 0.74rem;
  color: var(--text-muted);
  margin: 0;
}

.top-sell-old {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.top-sell-old s {
  opacity: 0.8;
}

.top-sell-off {
  padding: 0.1rem 0.4rem;
  border-radius: 6px;
  font-size: 0.68rem;
  font-weight: 800;
  background: var(--economy-bg);
  color: var(--economy);
}

.top-sell-price {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--secondary);
  letter-spacing: -0.02em;
  margin-top: auto;
}

.top-sell-price small {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-left: 0.2rem;
}

.top-sell-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  margin-top: 0.7rem;
  padding: 0.6rem 0.8rem;
  border-radius: var(--radius-sm);
  background: var(--action);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  transition: filter 0.15s ease;
}

.top-sell-card:hover .top-sell-cta {
  filter: brightness(1.08);
}

.top-sell-details {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  margin-top: 0.55rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
}

.top-sell-nav {
  position: absolute;
  top: 38%;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--secondary);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: background 0.15s ease, transform 0.15s ease;
}

.top-sell-nav:hover {
  background: var(--surface-soft);
}

.top-sell-nav--prev { left: -14px; }
.top-sell-nav--next { right: -14px; }

.top-sell-nav[disabled] {
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 640px) {
  .top-sell-nav { display: none; }
  .top-sell-card { flex-basis: 190px; width: 190px; }
  .top-sell-price { font-size: 1.3rem; }
}

/* ─────────────────────────────────────────────────────────────
   ÚLTIMAS ASSINATURAS
   ───────────────────────────────────────────────────────────── */
.recent-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 0.35rem 0.4rem;
}

.recent-list {
  display: flex;
  flex-direction: column;
}

.recent-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.6rem 0.55rem;
  border-radius: var(--radius-sm);
  transition: background 0.15s ease;
}

.recent-item + .recent-item {
  border-top: 1px solid var(--border);
  border-radius: 0;
}

.recent-item:hover {
  background: var(--surface-soft);
}

.recent-avatar {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 0.85rem;
  font-weight: 800;
  overflow: hidden;
}

.recent-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.recent-info {
  min-width: 0;
  flex: 1;
}

.recent-name {
  display: block;
  font-size: 0.87rem;
  font-weight: 700;
  color: var(--secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.recent-what {
  display: block;
  font-size: 0.76rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.recent-what b {
  color: var(--text-main);
  font-weight: 600;
}

.recent-when {
  flex: 0 0 auto;
  font-size: 0.7rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.recent-empty {
  padding: 1.2rem 0.8rem;
  text-align: center;
  font-size: 0.82rem;
  color: var(--text-muted);
}

/* Versão em faixa (dashboard): avatares + nome em linha */
.recent-strip {
  display: flex;
  gap: 0.6rem;
  overflow-x: auto;
  padding-bottom: 0.4rem;
  scrollbar-width: none;
  min-width: 0;
  max-width: 100%;
}

.recent-strip::-webkit-scrollbar { display: none; }

.recent-chip {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 0 0 auto;
  padding: 0.4rem 0.75rem 0.4rem 0.45rem;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  text-decoration: none;
  color: inherit;
}

.recent-chip:hover {
  border-color: var(--primary);
}

.recent-chip .recent-avatar {
  width: 28px;
  height: 28px;
  font-size: 0.75rem;
}

.recent-chip-name {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--secondary);
  white-space: nowrap;
}

/* ─────────────────────────────────────────────────────────────
   HERO PERSONALIZADO DO DASHBOARD
   ───────────────────────────────────────────────────────────── */
.dash-hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background:
    radial-gradient(900px 380px at 88% 12%, rgba(79, 70, 229, 0.28), transparent 62%),
    radial-gradient(700px 320px at 8% 92%, rgba(234, 88, 12, 0.16), transparent 60%),
    var(--surface);
  margin-bottom: 2rem;
}

.dash-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.5rem;
  align-items: center;
  padding: 1.6rem 1.8rem;
}

.dash-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: var(--action-bg);
  color: var(--action);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  margin-bottom: 0.7rem;
}

.dash-hero-title {
  font-size: 1.6rem;
  line-height: 1.18;
  color: var(--secondary);
  margin: 0 0 0.45rem;
  letter-spacing: -0.02em;
}

.dash-hero-title em {
  font-style: normal;
  color: var(--primary-light);
}

.dash-hero-text {
  font-size: 0.88rem;
  color: var(--text-muted);
  margin: 0 0 1rem;
  max-width: 58ch;
}

.dash-hero-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1.1rem;
}

.dash-hero-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-soft);
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--text-main);
}

.dash-hero-chip--on {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-soft);
}

.dash-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
}

.dash-hero-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.68rem 1.1rem;
  border-radius: var(--radius-sm);
  background: var(--action);
  color: #fff;
  font-size: 0.88rem;
  font-weight: 700;
  text-decoration: none;
  transition: filter 0.15s ease, transform 0.15s ease;
}

.dash-hero-btn:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.dash-hero-btn--ghost {
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--secondary);
}

.dash-hero-btn--ghost:hover {
  background: var(--surface-soft);
  filter: none;
}

.dash-hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem;
  margin-top: 1.2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

.dash-hero-stat b {
  display: block;
  font-size: 1.05rem;
  color: var(--secondary);
}

.dash-hero-stat span {
  font-size: 0.72rem;
  color: var(--text-muted);
}

/* Logo gigante do serviço em destaque */
.dash-hero-art {
  position: relative;
  display: grid;
  place-items: center;
  width: 170px;
  height: 170px;
  border-radius: 32px;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  overflow: hidden;
}

.dash-hero-art::before {
  content: '';
  position: absolute;
  inset: -40%;
  background: radial-gradient(circle, var(--hero-glow, rgba(79, 70, 229, 0.45)), transparent 62%);
  opacity: 0.55;
}

.dash-hero-art img {
  position: relative;
  width: 62%;
  height: 62%;
  object-fit: contain;
  filter: drop-shadow(0 14px 30px rgba(0, 0, 0, 0.4));
}

.dash-hero-art-letter {
  position: relative;
  font-size: 3.2rem;
  font-weight: 800;
  color: var(--text-main);
}

.dash-hero-off {
  position: absolute;
  bottom: 0.6rem;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  background: var(--economy-bg);
  color: var(--economy);
  font-size: 0.7rem;
  font-weight: 800;
  white-space: nowrap;
}

@media (max-width: 860px) {
  .dash-hero-inner {
    grid-template-columns: 1fr;
    padding: 1.25rem 1.1rem;
  }

  .dash-hero-art {
    width: 110px;
    height: 110px;
    border-radius: 22px;
    order: -1;
  }

  .dash-hero-title { font-size: 1.3rem; }
}

/* ─────────────────────────────────────────────────────────────
   SLIDES (TARJAS) DA PÁGINA DE PLATAFORMA
   ───────────────────────────────────────────────────────────── */
.plat-slides {
  position: relative;
  margin-bottom: 1.75rem;
}

.plat-slide {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 1.6rem;
  align-items: center;
  padding: 1.5rem 1.7rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background:
    radial-gradient(700px 320px at 92% 18%, var(--slide-glow, rgba(79, 70, 229, 0.3)), transparent 62%),
    var(--surface);
  overflow: hidden;
  animation: platSlideIn 0.35s ease;
}

@keyframes platSlideIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.plat-slide-art {
  display: grid;
  place-items: center;
  width: 130px;
  height: 130px;
  border-radius: 26px;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  overflow: hidden;
}

.plat-slide-art img {
  width: 60%;
  height: 60%;
  object-fit: contain;
  filter: drop-shadow(0 12px 26px rgba(0, 0, 0, 0.4));
}

.plat-slide-art-letter {
  font-size: 2.6rem;
  font-weight: 800;
  color: var(--text-main);
}

.plat-slide-body {
  min-width: 0;
}

.plat-slide-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.28rem 0.65rem;
  border-radius: 999px;
  background: var(--economy-bg);
  color: var(--economy);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.6rem;
}

.plat-slide-kicker--neutral {
  background: var(--primary-soft);
  color: var(--primary);
}

.plat-slide-title {
  font-size: 1.45rem;
  line-height: 1.18;
  color: var(--secondary);
  margin: 0 0 0.35rem;
  letter-spacing: -0.02em;
}

.plat-slide-sub {
  font-size: 0.87rem;
  color: var(--text-muted);
  margin: 0 0 0.9rem;
  max-width: 52ch;
}

.plat-slide-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.45rem 1rem;
  margin-bottom: 1rem;
  list-style: none;
  padding: 0;
  margin-block: 0 1rem;
}

.plat-slide-features li {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  font-size: 0.8rem;
  color: var(--text-main);
}

.plat-slide-features svg {
  color: var(--economy);
  flex: 0 0 auto;
  margin-top: 2px;
}

.plat-slide-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.7rem 1.2rem;
  border-radius: var(--radius-sm);
  background: var(--action);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
  transition: filter 0.15s ease;
}

.plat-slide-cta:hover { filter: brightness(1.08); }

.plat-slide-price {
  text-align: right;
  flex: 0 0 auto;
}

.plat-slide-price-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.2rem;
}

.plat-slide-price-value {
  display: block;
  font-size: 2.1rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--secondary);
  line-height: 1;
}

.plat-slide-price-value small {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
}

.plat-slide-price-old {
  display: block;
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 0.25rem;
}

.plat-slide-people {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.9rem;
}

.plat-slide-avatars {
  display: flex;
}

.plat-slide-avatars .recent-avatar {
  width: 28px;
  height: 28px;
  border: 2px solid var(--surface);
  font-size: 0.7rem;
}

.plat-slide-avatars .recent-avatar + .recent-avatar {
  margin-left: -10px;
}

.plat-slide-people-text {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.plat-slide-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--secondary);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}

.plat-slide-nav--prev { left: -13px; }
.plat-slide-nav--next { right: -13px; }
.plat-slide-nav[disabled] { opacity: 0; pointer-events: none; }

.plat-dots {
  display: flex;
  justify-content: center;
  gap: 0.4rem;
  margin-top: 0.8rem;
}

.plat-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: var(--border-strong);
  cursor: pointer;
  padding: 0;
  transition: width 0.2s ease, background 0.2s ease;
}

.plat-dot.active {
  width: 22px;
  border-radius: 999px;
  background: var(--action);
}

@media (max-width: 900px) {
  .plat-slide {
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 1.2rem 1.1rem;
  }

  .plat-slide-art {
    width: 84px;
    height: 84px;
    border-radius: 18px;
  }

  .plat-slide-price {
    text-align: left;
  }

  .plat-slide-price-value { font-size: 1.7rem; }
  .plat-slide-nav { display: none; }
}
.fade-in {
  animation: slideUpFade 0.4s ease-out forwards;
}

@keyframes slideUpFade {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Announcements Banner */
.announcements-banner-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 2rem;
}

.install-app-card {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, auto);
  gap: 1.25rem;
  align-items: center;
  margin-bottom: 1.5rem;
  padding: 1.25rem;
  border-radius: 1.25rem;
  border: 1px solid rgba(79, 70, 229, 0.18);
  background:
    radial-gradient(circle at top right, rgba(14, 165, 233, 0.14), transparent 34%),
    linear-gradient(135deg, rgba(79, 70, 229, 0.12), rgba(234, 88, 12, 0.08)),
    var(--surface);
  box-shadow: 0 18px 40px -24px rgba(79, 70, 229, 0.45);
}

.install-app-card-bottom {
  margin-top: 1rem;
  margin-bottom: 0;
}

.install-app-card-copy {
  min-width: 0;
}

.install-app-card-copy h2 {
  margin: 0.45rem 0 0.45rem;
  font-size: 1.25rem;
  color: var(--secondary);
}

.install-app-card-copy p {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.5;
}

.install-app-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  width: fit-content;
  background: rgba(79, 70, 229, 0.12);
  color: var(--primary);
  font-size: 0.8rem;
  font-weight: 700;
}

.install-app-card-copy ul {
  list-style: none;
  padding: 0;
  margin: 0.9rem 0 0;
  display: grid;
  gap: 0.5rem;
}

.install-app-card-copy li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-main);
  font-size: 0.92rem;
}

.install-app-card-copy li svg {
  color: var(--success);
  flex-shrink: 0;
}

.install-app-card-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.75rem;
  min-width: 250px;
}

.install-app-btn {
  min-height: 52px;
  border-radius: 0.95rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  font-weight: 700;
  box-shadow: 0 12px 25px -15px rgba(79, 70, 229, 0.65);
}

.install-app-hide {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--text-muted);
  font-size: 0.85rem;
  cursor: pointer;
  user-select: none;
}

.install-app-hide input {
  width: 16px;
  height: 16px;
  accent-color: var(--primary);
}

/* Abaixo de 960px o card empilha: a coluna de ações (min-width 250px) não
   cabe mais ao lado do texto sem espremer o conteúdo. */
@media (max-width: 960px) {
  .install-app-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .install-app-card-actions {
    min-width: 0;
  }
}

.announcement-banner {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-radius: 0.75rem;
  border: 1px solid transparent;
  animation: bannerSlideIn 0.3s ease-out;
}

@keyframes bannerSlideIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

.announcement-banner.info {
  background: rgba(14, 165, 233, 0.08);
  border-color: rgba(14, 165, 233, 0.2);
}

.announcement-banner.warning {
  background: rgba(245, 158, 11, 0.08);
  border-color: rgba(245, 158, 11, 0.2);
}

.announcement-banner.success {
  background: rgba(16, 185, 129, 0.08);
  border-color: rgba(16, 185, 129, 0.2);
}

.announcement-banner.urgent {
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.2);
}

.announcement-banner-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.announcement-banner-content strong {
  font-size: 0.95rem;
  color: var(--secondary);
}

.announcement-banner-content span {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.4;
}

.announcement-dismiss-btn {
  flex-shrink: 0;
  padding: 0.35rem 0.85rem;
  border-radius: 0.5rem;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.announcement-dismiss-btn:hover {
  background: var(--border);
  color: var(--secondary);
}

.page-header {
  margin-bottom: 2rem;
  min-width: 0;
  max-width: 100%;
}

.page-header h1 {
  font-size: 1.75rem;
  margin-bottom: 0.5rem;
  color: var(--secondary);
  /* A saudação pode trazer um e-mail longo (sem espaços): sem isso o texto
     estoura a largura e é cortado pelo overflow-x hidden do .main-content. */
  overflow-wrap: anywhere;
  word-break: break-word;
  max-width: 100%;
}

.page-header p {
  color: var(--text-muted);
  overflow-wrap: anywhere;
  word-break: break-word;
  max-width: 100%;
}

.dashboard-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  margin-bottom: 3rem;
}

.metric-card-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}

.metric-pill,
.metric-badge,
.empty-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border-radius: 999px;
  padding: 0.35rem 0.7rem;
  font-size: 0.75rem;
  font-weight: 700;
}

.metric-pill {
  background: rgba(255, 255, 255, 0.14);
  color: white;
}

.metric-pill.pill-green {
  background: rgba(16, 185, 129, 0.12);
  color: var(--success);
}

.metric-badge {
  background: rgba(255, 255, 255, 0.16);
  color: white;
}

.dashboard-empty-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: 1rem;
  margin-bottom: 2rem;
  padding: 1.25rem;
  border-radius: 1.25rem;
  border: 1px solid rgba(79, 70, 229, 0.16);
  background:
    radial-gradient(circle at top right, rgba(79, 70, 229, 0.16), transparent 30%),
    radial-gradient(circle at bottom left, rgba(14, 165, 233, 0.12), transparent 28%),
    var(--surface);
  box-shadow: 0 18px 40px -26px rgba(15, 23, 42, 0.28);
  min-width: 0;
  max-width: 100%;
}

.dashboard-empty-hero h2 {
  margin: 0.65rem 0 0.5rem;
  font-size: 1.45rem;
  color: var(--secondary);
  overflow-wrap: anywhere;
  word-break: break-word;
  max-width: 100%;
}

.dashboard-empty-hero p {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.55;
  overflow-wrap: anywhere;
  word-break: break-word;
  max-width: 100%;
}

.empty-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1rem;
  min-width: 0;
}

.dashboard-empty-hero-aside {
  display: grid;
  gap: 0.75rem;
  min-width: 0;
}

.empty-hero-card {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1rem;
  border-radius: 1rem;
  background: rgba(15, 23, 42, 0.04);
  border: 1px solid rgba(148, 163, 184, 0.18);
  min-width: 0;
}

.empty-hero-card strong {
  font-size: 0.82rem;
  color: var(--text-muted);
  font-weight: 600;
}

.empty-hero-card span {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--secondary);
  overflow-wrap: anywhere;
  word-break: break-word;
  max-width: 100%;
}

.metric-card {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 1.5rem;
  border-radius: 1rem;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.05);
}

.metric-card.highlight {
  background: linear-gradient(135deg, var(--primary), #818CF8);
  color: white;
  border: none;
}

.metric-card.highlight h3,
.metric-card.highlight .metric-subtitle {
  color: rgba(255, 255, 255, 0.9);
}

.metric-card h3 {
  font-size: 0.95rem;
  color: var(--text-muted);
  font-weight: 500;
  margin-bottom: 0.5rem;
}

.metric-value {
  font-size: 2rem;
  font-weight: 700;
  font-family: var(--font-title);
  margin-bottom: 0.25rem;
}

.metric-value.positive {
  color: var(--success);
}

.metric-card.highlight .metric-value.positive {
  color: white;
}

.metric-subtitle {
  font-size: 0.85rem;
  color: var(--text-muted);
}

@media (max-width: 480px) {
  .dashboard-empty-hero {
    grid-template-columns: 1fr;
    padding: 1rem;
  }

  .dashboard-empty-hero h2 {
    font-size: 1.2rem;
  }

  .dashboard-empty-hero-aside {
    grid-template-columns: 1fr 1fr;
  }

  .metric-card {
    padding: 1rem;
  }

  .metric-value {
    font-size: 1.6rem;
  }

  .metric-card h3 {
    font-size: 0.85rem;
  }

  .metric-card.highlight {
    background: linear-gradient(135deg, var(--primary), #818CF8);
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }

  .metric-card.highlight .metric-value {
    font-size: 1.4rem;
  }

  .metric-card.highlight .metric-subtitle {
    font-size: 0.78rem;
  }

  .metric-card-topline {
    flex-direction: column;
    align-items: flex-start;
  }

  .section-title-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .section-title-row .btn-sm {
    font-size: 0.78rem;
    padding: 0.4rem 0.75rem;
  }

  .active-services-section,
  .available-services-section {
    margin-bottom: 2rem;
  }
}

.section-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  gap: 1rem;
  flex-wrap: wrap;
}

.section-title-row h2 {
  font-size: 1.5rem;
  margin: 0;
  color: var(--secondary);
}

.btn-sm {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
}

.active-services-section,
.available-services-section,
.available-groups-section {
  margin-bottom: 3rem;
}

/* ══ Topo do dashboard: saudação + Grupo VIP ═════════════════════════
   O card do WhatsApp era um bloco grande no meio da tela. Virou um botão
   compacto no cabeçalho — o verde oficial do WhatsApp continua sendo a única
   exceção de cor do dashboard (o resto é roxo), então o clique continua
   instantaneamente reconhecível. */
.dashboard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

.dashboard-header h1 {
  margin-bottom: 0;
}

/* Linha do convite do Grupo VIP — fica logo abaixo do hero.
   Não usa mais `.page-header` porque o hero já é o cabeçalho da tela. */
.dashboard-vip-row {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin: -1.25rem 0 1.5rem;
}

@media (max-width: 640px) {
  .dashboard-vip-row {
    justify-content: stretch;
    margin-top: -0.75rem;
  }

  .dashboard-vip-row .whatsapp-vip-chip {
    width: 100%;
    justify-content: center;
  }
}

.whatsapp-vip-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
  padding: 0.55rem 0.95rem;
  border-radius: 999px;
  background:
    radial-gradient(circle at 88% 10%, rgba(255, 255, 255, 0.2), transparent 45%),
    linear-gradient(135deg, #0f7a43 0%, #17a94e 45%, #25d366 100%);
  border: 1px solid rgba(37, 211, 102, 0.5);
  box-shadow: 0 12px 26px -14px rgba(15, 122, 67, 0.85);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.whatsapp-vip-chip:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 32px -14px rgba(15, 122, 67, 0.95);
  color: #fff;
}

.whatsapp-vip-chip svg {
  flex-shrink: 0;
}

@media (max-width: 768px) {
  /* No celular o cabeçalho empilha: saudação em cima, Grupo VIP em largura
     total abaixo (alvo de toque grande, e o verde chama o olho). */
  .dashboard-header {
    flex-direction: column;
    align-items: stretch;
    gap: 0.6rem;
    margin-bottom: 1rem;
  }

  .whatsapp-vip-chip {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 640px) {
  .whatsapp-vip-chip {
    padding: 0.45rem 0.75rem;
    font-size: 0.78rem;
  }
}

/* Feedback CTA — convite para o usuário sugerir o que falta na plataforma */
.feedback-cta-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  border-radius: 1rem;
  background: linear-gradient(135deg, rgba(79, 70, 229, 0.1), rgba(124, 58, 237, 0.07));
  border: 1px solid rgba(129, 140, 248, 0.28);
  margin-bottom: 1.5rem;
  position: relative;
  overflow: hidden;
}

/* Brilho decorativo na direita — dá destaque sem poluir o texto. */
.feedback-cta-card::after {
  content: '';
  position: absolute;
  top: -50%;
  right: -10%;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(129, 140, 248, 0.14) 0%, transparent 70%);
  pointer-events: none;
}

.feedback-cta-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(129, 140, 248, 0.16);
  border: 1px solid rgba(129, 140, 248, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-light, #818cf8);
  flex-shrink: 0;
}

.feedback-cta-content {
  flex: 1;
  min-width: 0;
  position: relative;
  z-index: 1;
}

.feedback-cta-content strong {
  display: block;
  font-size: 0.95rem;
  color: var(--secondary);
  margin-bottom: 0.2rem;
}

.feedback-cta-content p {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.4;
}

.feedback-cta-action {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.feedback-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  white-space: nowrap;
}

/* Testimonial Prompt Card */
.testimonial-prompt-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  border-radius: 1rem;
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.08), rgba(234, 88, 12, 0.05));
  border: 1px solid rgba(251, 191, 36, 0.2);
  margin-bottom: 1.5rem;
}

.testimonial-prompt-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(251, 191, 36, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #D97706;
  flex-shrink: 0;
}

.testimonial-prompt-content {
  flex: 1;
  min-width: 0;
}

.testimonial-prompt-content strong {
  display: block;
  font-size: 0.95rem;
  color: var(--secondary);
  margin-bottom: 0.2rem;
}

.testimonial-prompt-content p {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.4;
}

.testimonial-prompt-action {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  flex-shrink: 0;
}

.testimonial-prompt-dismiss {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 0.75rem;
  cursor: pointer;
  text-align: center;
  padding: 0.2rem;
  transition: color 0.2s;
}

.testimonial-prompt-dismiss:hover {
  color: var(--text);
}

/* CTA reward button — gold/green accent to signal value */
.testimonial-cta-btn {
  background: linear-gradient(135deg, #16a34a, #15803d) !important;
  border-color: #16a34a !important;
  font-size: 0.8rem !important;
  white-space: nowrap;
}

.testimonial-cta-btn:hover {
  background: linear-gradient(135deg, #15803d, #166534) !important;
  border-color: #15803d !important;
}

/* Home subscriptions: 2-col grid, vertical compact cards */
.home-subscriptions-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.65rem;
  margin-bottom: 0.75rem;
}

/* Tablet: 3 colunas para melhor uso do espaço */
@media (min-width: 481px) and (max-width: 780px) {
  .home-subscriptions-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
  }

  .home-sub-card {
    padding: 1rem 0.5rem;
  }

  .home-sub-logo {
    width: 48px;
    height: 48px;
  }

  .home-sub-name {
    font-size: 0.82rem;
  }
}

/* Desktop: 4 colunas */
@media (min-width: 781px) {
  .home-subscriptions-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 0.85rem;
  }
}

.home-sub-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.9rem 0.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0.85rem;
  border-left: 3px solid var(--service-color);
  cursor: pointer;
  transition: transform 0.18s, box-shadow 0.18s;
  text-align: center;
  width: 100%;
}

.home-sub-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px -4px rgba(0, 0, 0, 0.1);
}

.home-sub-logo {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  font-weight: 800;
  color: white;
  overflow: hidden;
  flex-shrink: 0;
}

.home-sub-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}

.home-sub-name {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--secondary);
  line-height: 1.2;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 100%;
}

.home-sub-status {
  font-size: 0.68rem;
  font-weight: 600;
  color: #16a34a;
}

/* telas muito pequenas (iPhone SE / 320px) */
@media (max-width: 360px) {
  .home-sub-card {
    padding: 0.5rem 0.2rem;
  }

  .home-sub-logo {
    width: 30px;
    height: 30px;
    font-size: 0.95rem;
  }

  .home-sub-logo img {
    border-radius: 8px;
  }

  .home-sub-name {
    font-size: 0.65rem;
  }

  .home-sub-status {
    font-size: 0.58rem;
  }
}

.service-info-sub {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.view-all-link {
  display: block;
  text-align: center;
  margin-top: 1rem;
  color: var(--primary);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  padding: 0.5rem;
  border-radius: 0.5rem;
  transition: background 0.2s;
}

.view-all-link:hover {
  background: rgba(79, 70, 229, 0.06);
}

@media (max-width: 480px) {
  /* Home subscriptions: 2-col grid é o padrão — escala para telas muito pequenas */
  .home-subscriptions-grid {
    gap: 0.5rem;
  }

  .home-sub-card {
    padding: 0.65rem 0.3rem;
    gap: 0.3rem;
  }

  .home-sub-logo {
    width: 36px;
    height: 36px;
    font-size: 1.1rem;
    border-radius: 8px;
  }

  .home-sub-logo img {
    border-radius: 8px;
  }

  .home-sub-name {
    font-size: 0.7rem;
  }

  .home-sub-status {
    font-size: 0.62rem;
  }

  .testimonial-prompt-card {
    flex-wrap: wrap;
  }

  .feedback-cta-card {
    flex-wrap: wrap;
  }

  .feedback-cta-action {
    width: 100%;
  }

  .feedback-cta-btn {
    width: 100%;
    justify-content: center;
  }

  .testimonial-prompt-content {
    padding-right: 0;
  }

  .testimonial-prompt-action {
    width: 100%;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .testimonial-cta-btn {
    flex: 1;
    min-width: 0;
    font-size: 0.78rem !important;
  }

  .testimonial-prompt-dismiss {
    font-size: 0.75rem;
    white-space: nowrap;
    padding: 0.4rem 0.5rem;
  }

}

/* Carousel - Grupos Disponíveis */
.available-groups-section {
  margin-bottom: 2rem;
}

.available-groups-section .section-subtitle {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 0;
}

.carousel-container {
  position: relative;
  margin-top: 1rem;
}

.carousel-track {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 0.25rem;
}

.carousel-track::-webkit-scrollbar {
  display: none;
}

.carousel-card {
  flex: 0 0 calc(33.333% - 0.667rem);
  min-width: 0;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 1.25rem 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 1rem;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
  text-align: center;
}

.carousel-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.1);
  border-color: var(--service-color, var(--primary));
}

.carousel-card-icon {
  width: 56px;
  height: 56px;
  border-radius: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

.carousel-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.carousel-card-emoji {
  font-size: 1.5rem;
}

.carousel-card-info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

.carousel-card-name {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.carousel-card-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  color: var(--success);
  font-weight: 600;
}

.carousel-card-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--success);
  flex-shrink: 0;
}

.carousel-card-spots {
  font-size: 0.7rem;
  color: var(--text-muted);
}

.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1rem;
}

.carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}

.carousel-dot.active {
  background: var(--primary);
  transform: scale(1.3);
}

@media (max-width: 640px) {
  .carousel-card {
    flex: 0 0 calc(100% - 0rem);
  }
}

@media (min-width: 641px) and (max-width: 900px) {
  .carousel-card {
    flex: 0 0 calc(50% - 0.5rem);
  }
}

.empty-state {
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: 1rem;
  padding: 3rem 1.5rem;
  text-align: center;
}

.empty-state p {
  color: var(--text-muted);
  margin-bottom: 1rem;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
}

.service-card {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  background: var(--surface);
  padding: 1.25rem;
  border-radius: 1rem;
  border: 1px solid var(--border);
  transition: transform 0.2s, box-shadow 0.2s;
}

.active-service-card {
  cursor: pointer;
  text-align: left;
  width: 100%;
  border-left: 4px solid var(--service-color);
}

.active-service-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.05);
}

.service-icon {
  width: 56px;
  height: 56px;
  border-radius: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  font-weight: 800;
  color: white;
  flex-shrink: 0;
  overflow: hidden;
}

.service-icon-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 1rem;
}

.service-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.service-info h4 {
  font-size: 1.1rem;
  margin: 0;
  color: var(--secondary);
}

.service-profile {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin: 0;
}

.group-creator-tag {
  display: inline-block;
  font-size: 0.75rem;
  color: var(--text-muted);
  background: rgba(79, 70, 229, 0.08);
  padding: 0.15rem 0.5rem;
  border-radius: 1rem;
  margin-bottom: 0.25rem;
}

.group-creator-tag strong {
  color: var(--primary);
  font-weight: 600;
}

.status {
  padding: 0.25rem 0.75rem;
  border-radius: 2rem;
  font-size: 0.75rem;
  font-weight: 600;
}

.status.active {
  background: rgba(16, 185, 129, 0.1);
  color: var(--success);
}

.status.full {
  background: rgba(239, 68, 68, 0.1);
  color: var(--error);
}

/* Available Services */
.available-services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 0.5rem;
}

.available-service-card-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  background: var(--surface);
  border-radius: 0.85rem;
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: 0 2px 6px rgb(0 0 0 / 0.03);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
  opacity: 0;
  animation: cardPop 0.4s ease-out forwards;
  text-decoration: none;
  padding-bottom: 0.32rem;
  cursor: pointer;
}

.available-service-card-wrapper:hover {
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 8px 16px -4px rgb(0 0 0 / 0.1);
}

.available-service-name {
  font-size: 0.6rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-align: center;
  line-height: 1.1;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 0.25rem;
}

.available-service-card-wrapper.card-subscribed {
  background: rgba(16, 185, 129, 0.08);
  border-color: rgba(16, 185, 129, 0.3);
}

.available-service-card-wrapper.card-subscribed:hover {
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.5);
}

@keyframes cardPop {
  from { opacity: 0; transform: translateY(12px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.available-service-card:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 10px 20px -4px rgb(0 0 0 / 0.08);
}

.available-service-card-wrapper.card-pinned {
  border-color: var(--primary);
  box-shadow: 0 2px 12px rgb(79 70 229 / 0.2);
}

.available-service-card-wrapper.card-featured {
  border-color: var(--action);
}

.available-service-header-icon {
  position: relative;
  width: calc(100% - 0.7rem);
  aspect-ratio: 0.96;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.9rem;
  margin-top: 0.35rem;
  margin-bottom: 0.1rem;
}

.service-badge-pin,
.service-badge-star {
  position: absolute;
  top: 7px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.service-badge-pin {
  right: 7px;
  background: var(--primary);
}

.service-badge-star {
  left: 7px;
  background: var(--action);
}

.available-service-logo-lg {
  width: 68px;
  height: 68px;
  object-fit: contain;
  filter: drop-shadow(0 3px 6px rgb(0 0 0 / 0.12));
}

.available-service-icon-lg {
  width: 58px;
  height: 58px;
  background: rgba(255,255,255,0.12);
  border-radius: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.45rem;
  font-weight: 800;
  color: white;
  text-shadow: 0 2px 4px rgb(0 0 0 / 0.2);
}

.available-service-btn {
  display: block;
  width: 100%;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.8rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  transition: all 0.2s ease;
}

.available-service-btn.btn-primary {
  background: var(--primary);
  color: white;
}

.available-service-btn.btn-primary:hover {
  filter: brightness(1.1);
}

.available-service-btn.btn-subscribed {
  background: rgba(16, 185, 129, 0.1);
  color: var(--success);
  border: 1px solid rgba(16, 185, 129, 0.25);
}

.available-service-btn.btn-subscribed:hover {
  background: rgba(16, 185, 129, 0.15);
}

/* Dashboard Catalog Filters */
.dashboard-catalog-filters {
  margin-bottom: 1.25rem;
}

.dashboard-search-wrap {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  padding: 0.6rem 0.85rem;
  margin-bottom: 0.75rem;
  transition: border-color 0.2s;
}

.dashboard-search-wrap:focus-within {
  border-color: var(--primary);
}

.dashboard-search-wrap svg {
  color: var(--text-soft);
  flex-shrink: 0;
}

.dashboard-search-wrap input {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  border: none;
  background: transparent;
  font-size: 0.9rem;
  color: var(--text-main);
  outline: none;
}

.dashboard-search-wrap input::placeholder {
  color: var(--text-soft);
}

.dashboard-search-clear {
  background: none;
  border: none;
  color: var(--text-soft);
  cursor: pointer;
  padding: 0.15rem;
  display: flex;
  border-radius: 50%;
  transition: color 0.2s;
}

.dashboard-search-clear:hover {
  color: var(--text-main);
}

.dashboard-category-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
  /* Reserva as faixas das setas dentro do próprio wrapper: assim elas nunca
     ficam fora da área visível (antes usavam left/right negativos e eram
     cortadas pelo overflow-x hidden do layout). */
  padding-inline: 2.25rem;
}

/* Sem setas na tela (não há overflow) não precisa reservar espaço. */
.dashboard-category-wrapper:not(:has(.dashboard-category-arrow)) {
  padding-inline: 0;
}

.dashboard-category-bar {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  gap: 0.45rem;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-behavior: smooth;
  padding: 0.15rem 0;
  -webkit-overflow-scrolling: touch;
}

.dashboard-category-bar::-webkit-scrollbar {
  display: none;
}

.dashboard-category-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgb(0 0 0 / 0.12);
  transition: all 0.2s;
  flex-shrink: 0;
}

.dashboard-category-arrow:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-soft);
}

.dashboard-category-arrow.left {
  left: 0;
}

.dashboard-category-arrow.right {
  right: 0;
}

.dashboard-category-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.dashboard-category-pill:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-soft);
}

.dashboard-category-pill.active {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}

.dashboard-category-pill .category-pill-icon {
  font-size: 0.95rem;
}

@media (max-width: 768px) {
  .dashboard-category-arrow {
    display: none;
  }

  .dashboard-metrics {
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-bottom: 2rem;
  }

  .metric-card {
    padding: 1.25rem;
  }

  .metric-value {
    font-size: 1.5rem;
  }

  .section-title-row h2 {
    font-size: 1.25rem;
  }

  .services-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .available-services-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.3rem;
  }

  .available-service-card-wrapper {
    border-radius: 0.75rem;
    padding-bottom: 0.14rem;
  }

  .available-service-header-icon {
    width: calc(100% - 0.22rem);
    aspect-ratio: 0.98;
    border-radius: 0.7rem;
    margin-top: 0.18rem;
    margin-bottom: 0.03rem;
  }

  .available-service-logo-lg {
    width: 46px;
    height: 46px;
  }

  .available-service-icon-lg {
    width: 36px;
    height: 36px;
    font-size: 1rem;
  }

  .available-service-name {
    font-size: 0.54rem;
  }

  .service-icon {
    width: 44px;
    height: 44px;
    font-size: 1.35rem;
  }

  .service-info h4 {
    font-size: 0.95rem;
  }
}

@media (max-width: 360px) {
  .available-services-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ── Savings Card ─────────────────────────────────────────── */
.savings-card {
  background: var(--home-surface);
  border: 1px solid var(--home-border);
  border-radius: var(--home-radius);
  padding: 0.75rem 1rem;
  margin-bottom: 1.5rem;
  position: relative;
}

.savings-card-header {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.5rem;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--home-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.savings-card-icon {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  background: rgba(52, 211, 153, 0.12);
  color: #34d399;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.savings-card-icon svg {
  width: 10px;
  height: 10px;
}

.savings-total-row {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  margin-bottom: 0.2rem;
}

.savings-total-value {
  font-size: 1.1rem;
  font-weight: 700;
  color: #34d399;
  line-height: 1;
}

.savings-total-label {
  font-size: 0.72rem;
  color: var(--home-text-muted);
}

.savings-month-row {
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
  margin-bottom: 0.4rem;
}

.savings-month-value {
  font-size: 0.88rem;
  font-weight: 600;
  color: #818cf8;
}

.savings-month-label {
  font-size: 0.68rem;
  color: var(--home-text-muted);
}

.savings-breakdown {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 0.5rem;
}

.savings-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.6rem;
  background: var(--home-bg);
  border-radius: 0.4rem;
  border: 1px solid var(--home-border);
}

.savings-item-icon {
  width: 20px;
  height: 20px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  color: white;
  flex-shrink: 0;
  overflow: hidden;
}

.savings-item-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.savings-item-name {
  flex: 1;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--home-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.savings-item-value {
  font-size: 0.72rem;
  font-weight: 600;
  color: #34d399;
  flex-shrink: 0;
}

.savings-projection {
  display: flex;
  align-items: flex-start;
  gap: 0.3rem;
  padding: 0.35rem 0.6rem;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 0.4rem;
  font-size: 0.65rem;
  color: var(--home-text-muted);
  line-height: 1.5;
}

.savings-projection svg {
  color: #34d399;
  flex-shrink: 0;
  margin-top: 1px;
}

.savings-projection strong {
  color: #818cf8;
  font-weight: 600;
}

.savings-breakdown-toggle {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  background: none;
  border: none;
  color: var(--home-text-muted);
  font-size: 0.65rem;
  cursor: pointer;
  padding: 0;
  margin-bottom: 0.5rem;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.15s;
}

.savings-breakdown-toggle:hover {
  color: var(--home-text);
}

.savings-breakdown-header {
  margin-bottom: 0.2rem;
}

.savings-breakdown-note {
  font-size: 0.62rem;
  color: var(--home-text-muted);
  font-style: italic;
}

.savings-item-info {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.savings-item-sub {
  font-size: 0.6rem;
  color: var(--home-text-muted);
}

.savings-breakdown-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 0.35rem;
  margin-top: 0.2rem;
  border-top: 1px solid var(--home-border);
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--home-text);
}

.savings-breakdown-total .savings-item-value {
  font-size: 0.75rem;
}

.savings-divider {
  height: 1px;
  background: var(--home-border);
  margin: 0.5rem 0;
}

/* ── Savings Comparison Card (Comparativo Real de Economia) ── */
.savings-comparison-card {
  background: var(--home-surface);
  border: 1px solid var(--home-border);
  border-radius: 16px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* ── NOVO: Section wrapper ─────────────────────────────────── */
.savings-comp-section {
  display: flex;
  flex-direction: column;
  gap: 1rem;

  /* Os tokens --home-* só são trocados dentro de .home-container, então no
     dashboard eles ficavam presos no valor do tema escuro. Aqui reapontamos
     para os tokens do app e os cards respeitam claro/escuro. */
  --home-surface: var(--surface);
  --home-surface-hover: var(--surface-soft);
  --home-border: var(--border);
  --home-border-strong: var(--border-strong);
  --home-bg: var(--surface-soft);
  --home-text: var(--text-main);
  --home-text-muted: var(--text-muted);
  --home-text-secondary: var(--text-muted);
  --home-radius: 1rem;
}

/* Header */
.savings-comp-header {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.savings-comp-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--home-text);
  margin: 0;
}

.savings-comp-subtitle {
  font-size: 0.82rem;
  color: var(--home-text-secondary, #94a3b8);
  margin: 0;
}

/* Toggle "clique aqui e saiba mais" */
.savings-expand-toggle {
  align-self: flex-start;
  margin-top: 0.35rem;
  padding: 0.45rem 0.9rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--primary);
  background: rgba(79, 70, 229, 0.08);
  border: 1px solid rgba(79, 70, 229, 0.3);
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
}

.savings-expand-toggle:hover {
  background: rgba(79, 70, 229, 0.16);
  border-color: var(--primary);
}

/* Card colapsado: só o número principal */
.savings-collapsed-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  width: 100%;
  padding: 1.15rem 1.25rem;
  background: var(--home-surface);
  border: 1px solid var(--home-border);
  border-radius: 16px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: var(--home-text);
  transition: all 0.2s;
}

.savings-collapsed-card:hover {
  border-color: var(--primary);
  box-shadow: 0 6px 18px -6px rgba(79, 70, 229, 0.3);
}

.savings-collapsed-item {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.savings-collapsed-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--home-text-secondary, #94a3b8);
}

.savings-collapsed-value {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--success);
  line-height: 1.1;
}

.savings-collapsed-value small {
  font-size: 0.8rem;
  font-weight: 600;
  opacity: 0.75;
  margin-left: 0.15rem;
}

.savings-collapsed-pct {
  padding: 0.35rem 0.8rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--success);
  background: rgba(34, 197, 94, 0.12);
  border-radius: 999px;
}

/* ── Resumo principal — 3 perguntas ───────────────────────── */
.savings-summary-card {
  /* Card âncora da seção: único bloco com gradiente/shadow marcante. */
  background:
    radial-gradient(circle at 100% 0%, var(--primary-soft), transparent 42%),
    linear-gradient(135deg, var(--surface), var(--surface-soft));
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  box-shadow: var(--shadow-sm);
}

.savings-summary-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 0.5rem;
}

.savings-summary-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  min-width: 0;
}

.savings-summary-q {
  font-size: 0.67rem;
  color: var(--home-text-secondary, #94a3b8);
  text-align: center;
  line-height: 1.3;
  font-weight: 500;
}

.savings-q-highlight {
  color: rgba(16, 185, 129, 0.85);
}

.savings-summary-original {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--home-text-secondary, #64748b);
  white-space: nowrap;
}

.savings-summary-original small {
  font-size: 0.7rem;
  font-weight: 600;
  opacity: 0.7;
  margin-left: 2px;
}

.savings-summary-vs {
  font-size: 0.7rem;
  color: var(--home-text-secondary, #64748b);
  font-weight: 600;
  padding: 0 0.25rem;
}

.savings-summary-dp {
  font-size: 1.1rem;
  font-weight: 800;
  color: #a78bfa;
  white-space: nowrap;
}

.savings-summary-dp small {
  font-size: 0.7rem;
  font-weight: 600;
  opacity: 0.8;
  margin-left: 2px;
}

.savings-summary-divider {
  width: 1px;
  height: 40px;
  background: var(--home-border);
  flex-shrink: 0;
}

.savings-col-highlight {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.12), rgba(16, 185, 129, 0.04));
  border: 1px solid rgba(16, 185, 129, 0.22);
  border-radius: 12px;
  padding: 0.5rem 0.75rem;
  min-width: 0;
}

.savings-summary-savings {
  font-size: 1.2rem;
  font-weight: 900;
  color: #10b981;
  white-space: nowrap;
}

.savings-summary-savings small {
  font-size: 0.7rem;
  font-weight: 600;
  opacity: 0.8;
  margin-left: 2px;
}

.savings-summary-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.savings-summary-pct {
  font-size: 0.8rem;
  font-weight: 700;
  color: #10b981;
  background: rgba(16, 185, 129, 0.1);
  padding: 0.25rem 0.65rem;
  border-radius: 99px;
}

.savings-summary-annual {
  font-size: 0.78rem;
  color: var(--home-text-secondary, #64748b);
}

/* Disclaimer */
.savings-disclaimer {
  display: flex;
  align-items: flex-start;
  gap: 0.35rem;
  font-size: 0.68rem;
  color: var(--home-text-secondary, #64748b);
  opacity: 0.7;
  padding: 0 0.25rem;
}

.savings-disclaimer svg {
  flex-shrink: 0;
  margin-top: 1px;
}

/* Unavailable group */
.savings-unavailable-group {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.savings-unavailable-label {
  font-size: 0.72rem;
  color: var(--home-text-secondary, #64748b);
  font-style: italic;
  padding: 0.25rem 0.5rem;
}

/* Negative alert */
.savings-negative-alert {
  font-size: 0.7rem;
  color: #ef4444;
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: 8px;
  padding: 0.4rem 0.75rem;
  text-align: center;
}

/* Botão ver mais/menos */
.savings-show-more-btn {
  width: 100%;
  padding: 0.6rem;
  background: rgba(167, 139, 250, 0.08);
  border: 1px dashed rgba(167, 139, 250, 0.35);
  border-radius: 10px;
  color: #a78bfa;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  margin-top: 0.25rem;
}

.savings-show-more-btn:hover {
  background: rgba(167, 139, 250, 0.14);
  border-color: rgba(167, 139, 250, 0.5);
}

.savings-comp-arrow-col {
  display: flex;
  align-items: center;
  justify-content: center;
}

.savings-comp-arrow {
  font-size: 1.2rem;
  color: var(--home-text-secondary, #64748b);
  font-weight: 700;
}

.savings-comp-highlights {
  display: flex;
  align-items: center;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

.savings-comp-pct-badge {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.25);
  border-radius: 99px;
  padding: 0.3rem 0.75rem;
}

.savings-comp-pct-value {
  font-size: 1.05rem;
  font-weight: 800;
  color: #10b981;
}

.savings-comp-pct-label {
  font-size: 0.72rem;
  color: rgba(16, 185, 129, 0.8);
  font-weight: 500;
}

.savings-comp-annual-note {
  font-size: 0.78rem;
  color: var(--home-text-secondary, #64748b);
}

/* ── Lista de serviços ────────────────────────────────────── */
.savings-comp-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Service row */
.savings-service-row {
  background: var(--home-surface);
  border: 1px solid var(--home-border);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 0.15s;
}

.savings-service-row:hover {
  border-color: rgba(167, 139, 250, 0.3);
}

.savings-service-row.expanded {
  border-color: rgba(167, 139, 250, 0.4);
}

.savings-service-row.unavailable {
  opacity: 0.55;
  border-style: dashed;
}

.savings-service-main {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: none;
  border: none;
  cursor: pointer;
  width: 100%;
  min-width: 0;
  text-align: left;
  color: inherit;
}

.savings-service-icon {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.82rem;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  overflow: hidden;
}

.savings-service-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 4px;
}

.savings-service-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.savings-service-name {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--home-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.savings-service-plan {
  font-size: 0.7rem;
  color: var(--home-text-secondary, #64748b);
}

.savings-service-prices {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  /* Pode encolher: os preços quebram em vez de empurrar a linha para fora. */
  flex-shrink: 1;
  min-width: 0;
}

/* Linha inline de preços no card (mobile/desktop) */
.savings-price-inline {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.4rem;
  flex-shrink: 1;
  min-width: 0;
}

.savings-price-direct {
  font-size: 0.72rem;
  color: var(--home-text-secondary, #64748b);
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.savings-price-divide {
  font-size: 0.75rem;
  font-weight: 700;
  color: #a78bfa;
  white-space: nowrap;
}

.savings-badge {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.18rem 0.45rem;
  border-radius: 5px;
  white-space: nowrap;
  flex-shrink: 0;
}

.badge-savings {
  background: rgba(16, 185, 129, 0.12);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.25);
}

.badge-negative {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.2);
}

.savings-service-official-price {
  font-size: 0.75rem;
  color: var(--home-text-secondary, #64748b);
  text-decoration: line-through;
  white-space: nowrap;
}

.savings-service-dp-price {
  font-size: 0.82rem;
  font-weight: 700;
  color: #a78bfa;
  white-space: nowrap;
}

.savings-service-savings-badge {
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.2rem 0.5rem;
  border-radius: 6px;
  white-space: nowrap;
}

.savings-service-chevron {
  color: var(--home-text-secondary, #64748b);
  flex-shrink: 0;
  transition: transform 0.2s;
}

.savings-service-chevron.rotated {
  transform: rotate(180deg);
}

.savings-service-unavailable-badge {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.68rem;
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.1);
  padding: 0.25rem 0.55rem;
  border-radius: 6px;
  /* Quebra em duas linhas quando o espaço aperta (antes era nowrap fixo). */
  white-space: normal;
  min-width: 0;
  flex-shrink: 1;
}

.savings-service-unavailable-badge svg {
  flex-shrink: 0;
}

/* Chevron de expandir/recolher do comparativo */
.savings-chevron {
  color: var(--home-text-secondary, #64748b);
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.savings-chevron.rotated {
  transform: rotate(180deg);
}

/* Expanded detail — classes efetivamente usadas pelo JSX do dashboard */
.savings-detail {
  border-top: 1px solid var(--home-border);
  padding: 0.85rem 1rem;
  background: var(--home-bg);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  animation: savingsDetailIn 0.25s ease-out;
}

.savings-detail-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem 1rem;
}

.savings-detail-col {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.savings-staleness-warning {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.68rem;
  color: var(--warning);
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.2);
  border-radius: 8px;
  padding: 0.35rem 0.6rem;
}

.savings-staleness-warning svg {
  flex-shrink: 0;
}

/* Expanded detail */
.savings-service-detail {
  border-top: 1px solid var(--home-border);
  padding: 0.75rem 1rem;
  background: var(--home-bg);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.savings-service-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem 1.5rem;
}

.savings-detail-item {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.savings-detail-label {
  font-size: 0.65rem;
  color: var(--home-text-secondary, #64748b);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.savings-detail-value {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--home-text);
  overflow-wrap: break-word;
}

.savings-detail-value.muted {
  color: var(--home-text-secondary, #64748b);
}

.savings-detail-value.dp {
  color: #a78bfa;
}

.savings-detail-value.savings {
  color: #10b981;
}

.savings-detail-billing-note {
  font-size: 0.65rem;
  color: var(--home-text-secondary, #64748b);
  margin-top: 0.2rem;
}

.strikethrough {
  text-decoration: line-through;
}

/* ── Bloco economia anual ─────────────────────────────────── */
.savings-comp-annual-card {
  background: var(--home-surface);
  border: 1px solid rgba(16, 185, 129, 0.25);
  border-radius: 14px;
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.savings-comp-annual-header {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.savings-comp-annual-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--home-text);
}

.savings-comp-annual-sub {
  font-size: 0.72rem;
  color: var(--home-text-secondary, #64748b);
}

.savings-comp-annual-rows {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.savings-comp-annual-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.savings-comp-annual-row.total {
  padding-top: 0.5rem;
  border-top: 1px solid var(--home-border);
}

.savings-comp-annual-row-label {
  font-size: 0.8rem;
  color: var(--home-text-secondary, #64748b);
}

.savings-comp-annual-row-value {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--home-text);
}

.savings-comp-annual-row-value.muted {
  color: var(--home-text-secondary, #64748b);
  text-decoration: line-through;
}

.savings-comp-annual-row-value.dp {
  color: #a78bfa;
}

.savings-comp-annual-row-value.savings {
  color: #10b981;
  font-size: 1rem;
}

/* ── Promo tag ───────────────────────────────────────────── */
.savings-promo-tag {
  display: inline-block;
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
  font-size: 0.58rem;
  font-weight: 600;
  padding: 0.05rem 0.3rem;
  border-radius: 3px;
  margin-left: 0.3rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* ── Tooltip trigger ─────────────────────────────────────── */
.savings-tooltip-trigger {
  display: inline-flex;
  align-items: center;
  color: var(--home-text-secondary, #64748b);
  cursor: help;
  position: relative;
  margin-left: 2px;
}

.savings-tooltip-trigger::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 6px);
  right: 0;
  background: #1e1e2e;
  color: #e2e8f0;
  font-size: 0.65rem;
  font-weight: 400;
  padding: 0.35rem 0.55rem;
  border-radius: 6px;
  white-space: nowrap;
  max-width: 200px;
  white-space: normal;
  text-align: left;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
  z-index: 100;
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  line-height: 1.4;
}

.savings-tooltip-trigger:hover::after {
  opacity: 1;
}

/* ── Disclaimer ──────────────────────────────────────────── */
.savings-comp-disclaimer {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  font-size: 0.68rem;
  color: var(--home-text-secondary, #64748b);
  line-height: 1.4;
  padding: 0.5rem 0;
  border-top: 1px solid var(--home-border);
}

.savings-comp-disclaimer svg {
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--home-text-secondary, #64748b);
}

/* ── Negative savings ─────────────────────────────────────── */
.savings-service-row.negative {
  border-color: rgba(239, 68, 68, 0.25);
}

.savings-service-row.negative:hover {
  border-color: rgba(239, 68, 68, 0.4);
}

.savings-service-savings-badge.negative {
  background: rgba(239, 68, 68, 0.1);
  color: #f87171;
}

.savings-detail-value.negative,
.savings-service-savings-badge.negative {
  color: #f87171;
}

.savings-detail-negative-alert {
  font-size: 0.62rem;
  color: #f87171;
  background: rgba(239, 68, 68, 0.06);
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  margin-top: 0.25rem;
  display: inline-block;
}

.savings-detail-footer {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin-top: 0.25rem;
}

/* ── Unavailable section ─────────────────────────────────── */
.savings-unavailable-section {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: 0.5rem;
}

.savings-unavailable-title {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--home-text-secondary, #64748b);
  margin: 0;
  padding-bottom: 0.25rem;
}

/* ── Price items with tooltip ─────────────────────────────── */
.savings-service-price-item {
  display: flex;
  align-items: center;
  gap: 0.15rem;
}

.savings-detail-promo-note {
  font-size: 0.6rem;
  color: #f59e0b;
  font-style: italic;
}

/* Light theme */
[data-theme="light"] .savings-card {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .savings-card {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .savings-comparison-card {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .savings-comp-title {
  color: #475569;
}

[data-theme="light"] .savings-comp-title svg {
  color: #059669;
}

[data-theme="light"] .savings-comp-badge {
  background: rgba(5, 150, 105, 0.1);
  color: #059669;
}

[data-theme="light"] .savings-comp-summary {
  background: #f8fafc;
  border-color: rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .savings-comp-stat-divider {
  background: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .savings-comp-table-header {
  color: #64748b;
  border-color: rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .savings-comp-row {
  background: #f8fafc;
}

[data-theme="light"] .savings-comp-row:hover {
  background: #f1f5f9;
  border-color: rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .savings-comp-price-tag {
  color: #94a3b8;
}

[data-theme="light"] .savings-comp-price-val.dp-price {
  color: #7c3aed;
}

[data-theme="light"] .savings-comp-savings-badge {
  background: rgba(5, 150, 105, 0.1);
  color: #059669;
}

[data-theme="light"] .savings-comp-total-value {
  color: #059669;
}

[data-theme="light"] .savings-comp-total-label {
  color: #64748b;
}

[data-theme="light"] .savings-comp-total-row {
  border-color: rgba(0, 0, 0, 0.06);
}

/* ── Light theme — novo comparativo ── */
[data-theme="light"] .savings-comp-section {
}

[data-theme="light"] .savings-comp-title {
  color: #0f172a;
}

[data-theme="light"] .savings-comp-subtitle {
  color: #64748b;
}

[data-theme="light"] .savings-comp-summary-card {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .savings-comp-price-label {
  color: #64748b;
}

[data-theme="light"] .savings-comp-price-value.original {
  color: #94a3b8;
}

[data-theme="light"] .savings-comp-price-value.dp {
  color: #7c3aed;
}

[data-theme="light"] .savings-comp-price-value.savings {
  color: #059669;
}

[data-theme="light"] .savings-comp-arrow {
  color: #94a3b8;
}

[data-theme="light"] .savings-comp-price-col.highlight {
  background: rgba(5, 150, 105, 0.06);
  border-color: rgba(5, 150, 105, 0.2);
}

[data-theme="light"] .savings-comp-pct-badge {
  background: rgba(5, 150, 105, 0.08);
  border-color: rgba(5, 150, 105, 0.2);
}

[data-theme="light"] .savings-comp-pct-value {
  color: #059669;
}

[data-theme="light"] .savings-comp-pct-label {
  color: #059669;
}

[data-theme="light"] .savings-comp-annual-note {
  color: #64748b;
}

[data-theme="light"] .savings-comp-annual-card {
  background: #ffffff;
  border-color: rgba(5, 150, 105, 0.2);
}

[data-theme="light"] .savings-comp-annual-title {
  color: #0f172a;
}

[data-theme="light"] .savings-comp-annual-row-value.dp {
  color: #7c3aed;
}

[data-theme="light"] .savings-comp-annual-row-value.savings {
  color: #059669;
}

[data-theme="light"] .savings-comp-annual-row-value.muted {
  color: #94a3b8;
}

[data-theme="light"] .savings-service-row {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .savings-service-row:hover {
  border-color: rgba(124, 58, 237, 0.25);
}

[data-theme="light"] .savings-service-row.expanded {
  border-color: rgba(124, 58, 237, 0.35);
}

[data-theme="light"] .savings-service-name {
  color: #0f172a;
}

[data-theme="light"] .savings-service-plan {
  color: #64748b;
}

[data-theme="light"] .savings-service-official-price {
  color: #94a3b8;
}

[data-theme="light"] .savings-service-dp-price {
  color: #7c3aed;
}

[data-theme="light"] .savings-service-savings-badge {
  background: rgba(5, 150, 105, 0.08);
  color: #059669;
}

[data-theme="light"] .savings-service-chevron {
  color: #94a3b8;
}

[data-theme="light"] .savings-service-detail {
  background: #f8fafc;
  border-color: rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .savings-detail-value.dp {
  color: #7c3aed;
}

[data-theme="light"] .savings-detail-value.savings {
  color: #059669;
}

[data-theme="light"] .savings-detail-label {
  color: #94a3b8;
}

[data-theme="light"] .savings-detail-billing-note {
  color: #94a3b8;
}

[data-theme="light"] .savings-service-unavailable-badge {
  color: #d97706;
  background: rgba(217, 119, 6, 0.08);
}

[data-theme="light"] .savings-promo-tag {
  background: rgba(217, 119, 6, 0.1);
  color: #d97706;
}

[data-theme="light"] .savings-tooltip-trigger::after {
  background: #1e293b;
  color: #e2e8f0;
  border-color: rgba(255,255,255,0.1);
}

[data-theme="light"] .savings-comp-disclaimer {
  color: #94a3b8;
}

[data-theme="light"] .savings-comp-disclaimer svg {
  color: #94a3b8;
}

[data-theme="light"] .savings-service-row.negative {
  border-color: rgba(220, 38, 38, 0.2);
}

[data-theme="light"] .savings-detail-negative-alert {
  background: rgba(220, 38, 38, 0.05);
  color: #dc2626;
}

[data-theme="light"] .savings-service-savings-badge.negative {
  background: rgba(220, 38, 38, 0.08);
  color: #dc2626;
}

[data-theme="light"] .savings-detail-value.negative {
  color: #dc2626;
}

/* ── Mobile-first responsive ────────────────────────────────── */
@media (max-width: 600px) {
  /* Summary card: stack vertically */
  .savings-comp-summary-card {
    padding: 1rem;
  }

  .savings-comp-summary-prices {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

  .savings-comp-price-col {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--home-border);
  }

  .savings-comp-price-col.highlight {
    background: rgba(16, 185, 129, 0.06);
    border: 1px solid rgba(16, 185, 129, 0.2);
    border-radius: 10px;
    padding: 0.6rem 0.75rem;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
  }

  .savings-comp-price-col.highlight .savings-comp-price-label {
    font-size: 0.72rem;
  }

  .savings-comp-price-col.highlight .savings-comp-price-value {
    font-size: 1.3rem;
  }

  .savings-comp-arrow-col {
    display: none;
  }

  .savings-comp-arrow {
    display: none;
  }

  .savings-comp-highlights {
    flex-direction: column;
    gap: 0.5rem;
    align-items: center;
  }

  /* Service row: stack prices vertically on mobile */
  .savings-service-prices {
    flex-direction: column;
    align-items: flex-end;
    gap: 0.2rem;
  }

  .savings-service-official-price {
    font-size: 0.68rem;
  }

  .savings-service-dp-price {
    font-size: 0.78rem;
  }

  /* Annual card: stack */
  .savings-comp-annual-rows {
    gap: 0.5rem;
  }

  .savings-comp-annual-row {
    flex-direction: column;
    gap: 0.15rem;
    align-items: flex-start;
  }

  .savings-comp-annual-row.total {
    padding-top: 0.6rem;
  }

  .savings-comp-annual-row-value {
    font-size: 0.92rem;
  }

  /* Expanded detail: 1 column on mobile */
  .savings-service-detail-grid {
    grid-template-columns: 1fr;
  }
}

[data-theme="light"] .savings-card-header {
  color: #475569;
}

[data-theme="light"] .savings-item {
  background: #f8fafc;
  border-color: rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .savings-projection {
  background: rgba(0, 0, 0, 0.03);
}

[data-theme="light"] .savings-breakdown-total {
  border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .savings-divider {
  background: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .savings-breakdown-toggle {
  color: #64748b;
}

[data-theme="light"] .savings-breakdown-toggle:hover {
  color: #0f172a;
}

@media (max-width: 480px) {
  .savings-card {
    padding: 0.6rem 0.75rem;
  }

  .savings-total-value {
    font-size: 1rem;
  }

  .savings-item-name {
    font-size: 0.7rem;
  }
}

/* ----------- Pedido de foto de perfil ----------- */
.avatar-prompt-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  border-radius: 1rem;
  background: linear-gradient(135deg, rgba(79, 70, 229, 0.08), rgba(234, 88, 12, 0.05));
  border: 1px solid rgba(79, 70, 229, 0.2);
  margin-bottom: 1.5rem;
}

.avatar-prompt-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(79, 70, 229, 0.12);
  color: #4F46E5;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.avatar-prompt-content {
  flex: 1;
  min-width: 0;
}

.avatar-prompt-content strong {
  display: block;
  font-size: 0.95rem;
  color: var(--text-main);
  margin-bottom: 0.15rem;
}

.avatar-prompt-content p {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--text-muted);
}

.avatar-prompt-error {
  display: block;
  margin-top: 0.35rem;
  color: #EF4444;
  font-size: 0.78rem;
}

.avatar-prompt-action {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}

.avatar-prompt-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.avatar-prompt-dismiss {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 0.82rem;
  cursor: pointer;
  padding: 0.25rem;
  text-decoration: underline;
}

.avatar-prompt-dismiss:hover {
  color: var(--text-main);
}

@media (max-width: 640px) {
  .avatar-prompt-card {
    flex-direction: column;
    align-items: flex-start;
  }

  .avatar-prompt-action {
    width: 100%;
    justify-content: space-between;
  }
}

/* ═══════════════════════════════════════════════════════════════
   /dashboard — chips de logo, responsividade e movimento
   ═══════════════════════════════════════════════════════════════ */

/* ── Chips de logo de plataforma ────────────────────────────────
   Mesmo tratamento em todos os cards: logo contida (object-fit)
   sobre um chip neutro com borda — assim um PNG transparente não
   fica "solto" dentro do tile colorido da marca. */
.savings-service-icon img,
.available-service-logo-lg,
.active-services-section .sac-card-logo img,
.available-groups-section .sc-card-icon img {
  object-fit: contain;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  transition: transform 0.25s ease;
}

/* Linha do comparativo: tile de 40px com chip de 32px (logo de 24px). */
.savings-service-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
}

.savings-service-icon img {
  width: 32px;
  height: 32px;
  margin: 4px;
  padding: 3px;
  border-radius: 8px;
}

/* Carrosséis: mesma base nos dois grids (48px / 36px no mobile). */
.active-services-section .sac-card-logo,
.available-groups-section .sc-card-icon {
  width: 48px;
  height: 48px;
  border-radius: 10px;
}

.active-services-section .sac-card-logo img,
.available-groups-section .sc-card-icon img {
  width: 40px;
  height: 40px;
  margin: 4px;
  padding: 3px;
  border-radius: 8px;
}

/* Catálogo: mesmo chip, dentro do bloco colorido do serviço. */
.available-service-logo-lg {
  width: 64px;
  height: 64px;
  padding: 6px;
  border-radius: 14px;
}

.available-service-icon-lg {
  width: 52px;
  height: 52px;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text-main);
  text-shadow: none;
  transition: transform 0.25s ease;
}

@media (max-width: 768px) {
  .available-service-logo-lg {
    width: 42px;
    height: 42px;
    padding: 4px;
    border-radius: 10px;
  }

  .available-service-icon-lg {
    width: 34px;
    height: 34px;
    border-radius: 10px;
  }
}

@media (max-width: 640px) {
  .active-services-section .sac-card-logo,
  .available-groups-section .sc-card-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
  }

  .active-services-section .sac-card-logo img,
  .available-groups-section .sc-card-icon img {
    width: 30px;
    height: 30px;
    margin: 3px;
    padding: 2px;
    border-radius: 6px;
  }
}

@media (min-width: 901px) {
  .active-services-section .sac-card-logo,
  .available-groups-section .sc-card-icon {
    width: 52px;
    height: 52px;
  }

  .active-services-section .sac-card-logo img,
  .available-groups-section .sc-card-icon img {
    width: 44px;
    height: 44px;
  }
}

/* ── Resumo de economia: colapsa sem estourar ───────────────── */
@media (max-width: 900px) {
  .savings-summary-row {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  }

  .savings-summary-divider {
    display: none;
  }

  .savings-col-highlight {
    grid-column: 1 / -1;
  }
}

@media (max-width: 600px) {
  .savings-summary-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
  }

  .savings-summary-vs {
    display: none;
  }

  .savings-summary-original,
  .savings-summary-dp {
    font-size: 1rem;
  }
}

/* Linha do comparativo: os preços descem para uma segunda linha. */
@media (max-width: 560px) {
  .savings-service-main {
    flex-wrap: wrap;
    row-gap: 0.55rem;
  }

  .savings-service-prices,
  .savings-price-inline {
    flex: 1 0 100%;
    justify-content: space-between;
  }

  .savings-service-unavailable-badge {
    flex: 1 0 100%;
  }
}

/* Detalhe expandido: 4 → 2 → 1 colunas. */
@media (max-width: 700px) {
  .savings-detail-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 420px) {
  .savings-detail-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ── Movimento ──────────────────────────────────────────────────
   Entradas discretas (150–400ms) e hover leve. O bloco final
   desliga tudo para quem prefere menos movimento. */
.available-services-grid > .available-service-card-wrapper {
  animation: cardPop 0.4s ease-out both;
}

.available-services-grid > .available-service-card-wrapper:nth-child(1) { animation-delay: 0ms; }
.available-services-grid > .available-service-card-wrapper:nth-child(2) { animation-delay: 40ms; }
.available-services-grid > .available-service-card-wrapper:nth-child(3) { animation-delay: 80ms; }
.available-services-grid > .available-service-card-wrapper:nth-child(4) { animation-delay: 120ms; }
.available-services-grid > .available-service-card-wrapper:nth-child(5) { animation-delay: 160ms; }
.available-services-grid > .available-service-card-wrapper:nth-child(6) { animation-delay: 200ms; }
.available-services-grid > .available-service-card-wrapper:nth-child(7) { animation-delay: 240ms; }
.available-services-grid > .available-service-card-wrapper:nth-child(8) { animation-delay: 280ms; }
.available-services-grid > .available-service-card-wrapper:nth-child(9) { animation-delay: 320ms; }
.available-services-grid > .available-service-card-wrapper:nth-child(10) { animation-delay: 360ms; }
.available-services-grid > .available-service-card-wrapper:nth-child(11) { animation-delay: 400ms; }
.available-services-grid > .available-service-card-wrapper:nth-child(n + 12) { animation-delay: 440ms; }

.savings-comp-list > .savings-service-row {
  animation: savingsRowIn 0.3s ease-out backwards;
}

.savings-comp-list > .savings-service-row:nth-child(1) { animation-delay: 0ms; }
.savings-comp-list > .savings-service-row:nth-child(2) { animation-delay: 60ms; }
.savings-comp-list > .savings-service-row:nth-child(3) { animation-delay: 120ms; }
.savings-comp-list > .savings-service-row:nth-child(n + 4) { animation-delay: 180ms; }

@keyframes savingsRowIn {
  from { transform: translateY(8px); }
  to { transform: translateY(0); }
}

@keyframes savingsDetailIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Hover: micro-elevação e logos que respiram. */
.available-service-card-wrapper:hover .available-service-logo-lg,
.available-service-card-wrapper:hover .available-service-icon-lg,
.active-services-section .sac-card:hover .sac-card-logo img,
.available-groups-section .sc-card:hover .sc-card-icon img,
.savings-service-row:hover .savings-service-icon img {
  transform: scale(1.06);
}

.install-app-btn {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.install-app-btn:hover {
  transform: translateY(-1px);
}

.savings-collapsed-card:hover {
  transform: translateY(-2px);
}

.dashboard-category-pill:hover {
  transform: translateY(-1px);
}

/* ── Menos movimento (preferência do sistema) ──────────────── */
@media (prefers-reduced-motion: reduce) {
  .fade-in,
  .announcement-banner,
  .savings-detail {
    animation: none !important;
  }

  .available-service-card-wrapper {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .savings-service-row {
    animation: none !important;
    transform: none !important;
  }

  .available-service-card-wrapper:hover,
  .available-service-logo-lg,
  .available-service-icon-lg,
  .savings-service-icon img,
  .active-services-section .sac-card-logo img,
  .available-groups-section .sc-card-icon img,
  .savings-collapsed-card:hover,
  .dashboard-category-pill:hover,
  .install-app-btn:hover {
    transform: none !important;
    transition: none !important;
  }

  /* Grupo VIP: sem levitar para quem pede menos movimento. */
  .whatsapp-vip-chip:hover {
    transform: none !important;
    transition: none !important;
  }
}
.platform-picker {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.platform-picker-helper {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 0 0 0.5rem;
}

.platform-picker-loading {
  font-size: 0.85rem;
  color: var(--text-muted);
  padding: 1rem;
  text-align: center;
  background: var(--surface-soft, rgba(148, 163, 184, 0.08));
  border-radius: 0.5rem;
}

.platform-picker-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  max-height: 260px;
  overflow-y: auto;
  padding-right: 2px;
}

/* Dentro dos blocos por categoria quem rola é o container: cada bloco
   acompanha o tamanho do conteúdo dele. */
.platform-picker-grid.is-grouped {
  max-height: none;
  overflow: visible;
  padding-right: 0;
}

.platform-picker-groups {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-height: 340px;
  overflow-y: auto;
  padding-right: 4px;
}

.platform-picker-group {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.platform-picker-group-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.platform-picker-none-row {
  display: flex;
  padding-bottom: 0.15rem;
  border-bottom: 1px dashed var(--border);
  margin-bottom: 0.1rem;
}

.platform-picker-search {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: var(--background);
  color: var(--text-muted);
}

.platform-picker-search input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  color: var(--text-main);
  font-size: 0.85rem;
  font-family: inherit;
}

.platform-picker-search button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  padding: 2px;
}

.platform-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.7rem;
  min-height: 36px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-main);
  font-size: 0.8rem;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.platform-pill:hover:not(.selected) {
  border-color: var(--primary);
  color: var(--primary);
}

.platform-pill.selected {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  font-weight: 600;
}

.platform-pill-icon {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  object-fit: cover;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.6rem;
  font-weight: 700;
}

.platform-pill-name {
  white-space: nowrap;
}

.platform-pill-check {
  flex-shrink: 0;
}

.platform-pill-none {
  border-style: dashed;
}

.platform-picker-custom {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: 0.25rem;
}

.platform-custom-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  align-self: flex-start;
  padding: 0.25rem 0.4rem 0.25rem 0.6rem;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
}

.platform-custom-tag button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.22);
  border: none;
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  padding: 2px;
}

.platform-custom-add {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--text-muted);
}

.platform-custom-add input {
  flex: 1;
  min-width: 0;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: var(--background);
  color: var(--text-main);
  font-size: 0.82rem;
  font-family: inherit;
}

.platform-custom-add button {
  padding: 0.45rem 0.75rem;
  border: 1px solid var(--primary);
  border-radius: 0.5rem;
  background: transparent;
  color: var(--primary);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.platform-custom-add button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}.ob-flow {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 1rem;
  background: var(--background);
}

.ob-card {
  position: relative;
  width: 100%;
  max-width: 520px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 1.25rem;
  box-shadow: var(--shadow-sm, 0 10px 30px rgba(0, 0, 0, 0.18));
  padding: 2rem 1.75rem;
}

@keyframes obFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.ob-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(79, 70, 229, 0.14);
  color: #4F46E5;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
}

.ob-icon-done {
  background: rgba(34, 197, 94, 0.15);
  color: #22C55E;
}

.ob-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text-main);
  text-align: center;
  margin: 0 0 0.5rem;
  line-height: 1.35;
}

.ob-question {
  text-align: left;
  margin-bottom: 1rem;
}

/* Etiqueta da pergunta: onde a pessoa está no caminho. A última pergunta
   avisa que é a última — a pessoa sabe que falta um passo para terminar. */
.ob-eyebrow {
  display: block;
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 0.45rem;
}

.ob-question-helper {
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--text-muted);
  margin: -0.55rem 0 1rem;
}

.ob-sub {
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--text-muted);
  text-align: center;
  margin: 0 0 1.25rem;
}

.ob-info-body p {
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--secondary, var(--text-main));
  margin: 0 0 0.75rem;
}

.ob-info .ob-title { margin-bottom: 0.9rem; }

.ob-avatar-area {
  position: relative;
  display: flex;
  justify-content: center;
  margin: 0 auto 1.5rem;
  width: 112px;
  height: 112px;
}

.ob-avatar-img,
.ob-avatar-placeholder {
  width: 112px;
  height: 112px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--border);
}

.ob-avatar-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.25rem;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, #4F46E5 0%, #7C3AED 50%, #EA580C 100%);
  box-shadow: 0 10px 30px rgba(79, 70, 229, 0.28);
}

/* Botão de câmera sobreposto no canto do avatar, em vez de um link solto
   abaixo dos botões — o alvo fica onde o olho já está. */
.ob-avatar-edit {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary);
  color: #fff;
  border: 2px solid var(--surface);
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease;
}

.ob-avatar-edit:hover:not(:disabled) {
  transform: scale(1.08);
  background: var(--action);
}

.ob-avatar-edit:disabled { opacity: 0.6; cursor: not-allowed; }

.ob-actions-center {
  justify-content: center;
}

.ob-btn-block {
  width: 100%;
  justify-content: center;
  padding: 0.85rem 1.5rem;
}

/* ─────────── Etapa de indicações ─────────── */
.ob-invites {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.ob-invites-helper {
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--text-muted);
  margin: 0;
}

.ob-invites-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
}

.ob-invites-list li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.65rem;
  border-radius: 0.6rem;
  background: var(--background);
  border: 1px solid var(--border);
}

.ob-invites-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #4F46E5, #EA580C);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  flex-shrink: 0;
}

.ob-invites-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.ob-invites-info strong {
  font-size: 0.88rem;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ob-invites-info span {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.ob-invites-list li button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  flex-shrink: 0;
}

.ob-invites-list li button:hover {
  background: rgba(239, 68, 68, 0.12);
  color: #EF4444;
}

.ob-invites-count {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-weight: 600;
}

.ob-invites-count strong {
  color: var(--primary);
  font-size: 0.95rem;
}

.ob-invites-form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.75rem;
  border-radius: 0.7rem;
  border: 1px dashed var(--border-strong, #475569);
  background: var(--background);
}

.ob-invites-row {
  display: flex;
  gap: 0.45rem;
}

.ob-invites-row input {
  flex: 1;
  min-width: 0;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: var(--surface);
  color: var(--text-main);
  font-size: 0.85rem;
  font-family: inherit;
}

.ob-invites-row input:focus {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}

.ob-invites-row button {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.55rem 0.85rem;
  border: none;
  border-radius: 0.5rem;
  background: linear-gradient(90deg, var(--primary), var(--action));
  color: #fff;
  font-size: 0.82rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
}

.ob-invites-row button:disabled { opacity: 0.6; cursor: not-allowed; }

.ob-invites-hint {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin: 0;
}

.ob-invites-hint strong { color: var(--primary); }

@media (max-width: 480px) {
  .ob-invites-row { flex-wrap: wrap; }
  .ob-invites-row input { flex: 1 1 100%; }
  .ob-invites-row button { width: 100%; justify-content: center; }
}

.ob-options {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  max-height: 300px;
  overflow-y: auto;
  margin-bottom: 1rem;
}

.ob-option {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  text-align: left;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: 0.6rem;
  background: var(--background);
  color: var(--text-main);
  font-size: 0.88rem;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.ob-option:hover { border-color: var(--primary); }

.ob-option.selected {
  border-color: var(--primary);
  background: rgba(79, 70, 229, 0.09);
  font-weight: 600;
}

.ob-radio {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--border);
  flex-shrink: 0;
  position: relative;
}

.ob-option.selected .ob-radio { border-color: var(--primary); }

.ob-option.selected .ob-radio::after {
  content: '';
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  background: var(--primary);
}

.ob-checkbox {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  border: 2px solid var(--border);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.ob-option.selected .ob-checkbox { border-color: var(--primary); }

.ob-custom-input,
.ob-textarea {
  width: 100%;
  padding: 0.65rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: 0.6rem;
  background: var(--background);
  color: var(--text-main);
  font-size: 0.88rem;
  font-family: inherit;
  resize: vertical;
}

.ob-textarea { margin-bottom: 1rem; }

/* Bloco da resposta aberta: campo + dica embaixo. */
.ob-text-block { margin-bottom: 0.5rem; }

.ob-text-block .ob-textarea { margin-bottom: 0.45rem; }

.ob-text-hint {
  font-size: 0.76rem;
  color: var(--text-soft);
  margin: 0;
}

/* Botão de continuar travado (ex.: ainda faltam convidados). */
.ob-btn-primary:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.ob-yesno {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  margin-bottom: 1.25rem;
}

.ob-yn {
  padding: 0.9rem;
  border: 1px solid var(--border);
  border-radius: 0.7rem;
  background: var(--background);
  color: var(--text-main);
  font-size: 0.95rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
}

.ob-yn.selected {
  border-color: var(--primary);
  background: rgba(79, 70, 229, 0.12);
  color: var(--primary);
}

.ob-error {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.6rem 0.75rem;
  margin-bottom: 0.9rem;
  border-radius: 0.5rem;
  background: rgba(239, 68, 68, 0.1);
  color: #EF4444;
  font-size: 0.82rem;
  font-weight: 600;
}

.ob-actions {
  display: flex;
  gap: 0.6rem;
  align-items: center;
}

.ob-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.75rem 1.4rem;
  border-radius: 0.6rem;
  background: linear-gradient(90deg, var(--primary), var(--action));
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(79, 70, 229, 0.28);
}

.ob-btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }

.ob-next { margin-left: auto; }

.ob-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.7rem 1rem;
  border: 1px solid var(--border);
  border-radius: 0.6rem;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.88rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}

.ob-btn-ghost:hover { color: var(--text-main); border-color: var(--primary); }
.ob-btn-ghost:disabled { opacity: 0.6; cursor: not-allowed; }

.ob-upload-link {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0.9rem auto 0;
  background: none;
  border: none;
  color: var(--primary);
  font-size: 0.85rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}

.ob-upload-link:disabled { opacity: 0.6; cursor: not-allowed; }

@media (max-width: 480px) {
  .ob-flow { padding: 0.5rem; align-items: flex-start; }
  .ob-card { padding: 1.25rem 1rem; border-radius: 0.85rem; }
  .ob-title { font-size: 1.02rem; }
  .ob-avatar-img, .ob-avatar-placeholder { width: 76px; height: 76px; }
}.onboarding-page {
  min-height: 100vh;
  background: var(--background);
}

.onboarding-page-loading {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
}/* Selos do grupo — compartilhados por catálogo, página do grupo e Meus Grupos.
   Paleta: verde = confiança (verificado / sem anúncios), âmbar = atenção
   (tem anúncio), neutro = informação (tipo de conta). */

.group-tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
  min-width: 0;
}

.group-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.group-tag-icon {
  flex-shrink: 0;
}

.group-tag-label {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Verificado pela DividePass — o selo mais forte da tela */
.group-tag-verified {
  color: #047857;
  background: linear-gradient(135deg, #10B981, #059669);
  border-color: rgba(16, 185, 129, 0.5);
  box-shadow: 0 4px 12px -6px rgba(16, 185, 129, 0.75);
}

[data-theme="light"] .group-tag-verified {
  color: #FFFFFF;
}

/* Sem anúncios — o benefício que o comprador procura */
.group-tag-noads {
  color: #047857;
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.32);
}

/* Com anúncios — informação relevante, mas sem alarmar */
.group-tag-ads {
  color: #B45309;
  background: rgba(245, 158, 11, 0.14);
  border-color: rgba(245, 158, 11, 0.32);
}

/* Tipo de conta */
.group-tag-plan {
  color: var(--text-muted);
  background: var(--surface-soft);
  border-color: var(--border);
}

[data-theme="light"] .group-tag-plan {
  color: #475569;
  background: #F1F5F9;
  border-color: rgba(0, 0, 0, 0.08);
}

/* Via Parceiro (revenda Pulse Coding): acesso privado, vem de parceiro. */
.group-tag-parceiro {
  color: #6D28D9;
  background: rgba(139, 92, 246, 0.14);
  border-color: rgba(139, 92, 246, 0.32);
}

[data-theme="light"] .group-tag-parceiro {
  color: #5B21B6;
  background: #EDE9FE;
  border-color: rgba(109, 40, 217, 0.22);
}

/* Esgotado: o fornecedor está sem estoque — o grupo existe, mas não entra
   mais gente. Vermelho para o cliente ver antes de clicar. */
.group-tag-esgotado {
  color: #B91C1C;
  background: rgba(239, 68, 68, 0.14);
  border-color: rgba(239, 68, 68, 0.32);
}

[data-theme="light"] .group-tag-esgotado {
  color: #991B1B;
  background: #FEE2E2;
  border-color: rgba(185, 28, 28, 0.22);
}

/* Tamanho compacto (linhas apertadas, cards pequenos) */
.group-tags-sm .group-tag {
  padding: 0.15rem 0.4rem;
  font-size: 0.62rem;
  gap: 0.25rem;
}

/* Animação de entrada discreta */
.group-tag-verified {
  animation: groupTagIn 0.35s cubic-bezier(0.34, 1.4, 0.64, 1) both;
}

@keyframes groupTagIn {
  from {
    opacity: 0;
    transform: scale(0.85);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .group-tag-verified {
    animation: none;
  }
}
.catalog-page {
  animation: slideUpFade 0.4s ease-out forwards;
}

@keyframes slideUpFade {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.page-header {
  margin-bottom: 2rem;
}

.page-header h1 {
  font-size: 1.75rem;
  margin-bottom: 0.5rem;
  color: var(--secondary);
}

.page-header p {
  color: var(--text-muted);
}

.back-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--text-muted);
  background: none;
  border: none;
  font-size: 0.9rem;
  cursor: pointer;
  margin-bottom: 1rem;
  padding: 0;
  transition: color 0.2s;
}

.back-btn:hover {
  color: var(--primary);
}

.info-banner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.2);
  color: var(--success);
  padding: 1rem 1.25rem;
  border-radius: 1rem;
  margin-bottom: 1.5rem;
  font-size: 0.95rem;
}

.info-banner a {
  margin-left: auto;
  color: var(--success);
  font-weight: 600;
  text-decoration: underline;
}

/* ===== CATALOG GRID ===== */
.catalog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 0.5rem;
}

.catalog-card {
  background: var(--surface);
  border-radius: 0.85rem;
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: 0 2px 8px rgb(0 0 0 / 0.04);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  padding-bottom: 0.4rem;
  opacity: 0;
  animation: cardPop 0.4s ease-out forwards;
  cursor: pointer;
}

@keyframes cardPop {
  from { opacity: 0; transform: translateY(16px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.catalog-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 12px 24px -4px rgb(0 0 0 / 0.1);
}

.catalog-card.subscribed {
  border-color: rgba(16, 185, 129, 0.25);
}

.catalog-card-pinned {
  border-color: var(--primary);
  box-shadow: 0 2px 12px rgb(79 70 229 / 0.2);
}

.catalog-card-featured {
  border-color: var(--action);
}

.catalog-badge-pin,
.catalog-badge-star {
  position: absolute;
  top: 8px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.catalog-badge-pin {
  right: 8px;
  background: var(--primary);
}

.catalog-badge-star {
  left: 8px;
  background: var(--action);
}

.catalog-header {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.65rem;
}

.catalog-logo {
  width: 44px;
  height: 44px;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgb(0 0 0 / 0.15));
  transition: transform 0.3s ease;
}

.catalog-card:hover .catalog-logo {
  transform: scale(1.1);
}

.catalog-icon-text {
  width: 48px;
  height: 48px;
  background: rgba(255,255,255,0.05);
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--secondary);
  box-shadow: 0 2px 6px rgb(0 0 0 / 0.1);
  transition: transform 0.3s ease;
}

.catalog-card:hover .catalog-icon-text {
  transform: scale(1.1);
}

.catalog-service-name {
  font-size: 0.6rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-align: center;
  line-height: 1.1;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 0.25rem;
}

/* Groups Grid (detail page) */
.catalog-filters {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
  align-items: center;
}

.sort-select {
  padding: 0.5rem 0.75rem;
  border-radius: 0.75rem;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-main);
  font-size: 0.875rem;
  cursor: pointer;
  outline: none;
  transition: border-color 0.2s;
}

.sort-select:focus {
  border-color: var(--primary);
}

/* Catalog Toolbar (service list page) */
.catalog-toolbar {
  margin-bottom: 1rem;
}

.catalog-search-wrap {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  padding: 0.6rem 1rem;
  transition: border-color 0.2s;
}

.catalog-search-wrap:focus-within {
  border-color: var(--primary);
}

.catalog-search-wrap svg {
  color: var(--text-muted);
  flex-shrink: 0;
}

.catalog-search-wrap input {
  border: none;
  background: none;
  outline: none;
  font-size: 0.95rem;
  color: var(--text-main);
  width: 100%;
}

.catalog-search-wrap input::placeholder {
  color: var(--text-soft);
}

/* Category Filter Bar */
.category-filter-bar {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
  scrollbar-width: none;
}

.category-filter-bar::-webkit-scrollbar {
  display: none;
}

.category-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.category-pill:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-soft);
}

.category-pill.active {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}

.category-pill-icon {
  font-size: 1rem;
}

.category-pill-label {
  line-height: 1;
}

/* Category Badge on service cards */
.category-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}

.search-input-wrap {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  padding: 0.5rem 0.75rem;
  flex: 1;
  min-width: 200px;
  transition: border-color 0.2s;
}

.search-input-wrap:focus-within {
  border-color: var(--primary);
}

.search-input-wrap svg {
  color: var(--text-muted);
  flex-shrink: 0;
}

.search-input-wrap input {
  border: none;
  background: none;
  outline: none;
  font-size: 0.875rem;
  color: var(--text-main);
  width: 100%;
}

.search-input-wrap input::placeholder {
  color: var(--text-muted);
}

.search-clear {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  display: flex;
  padding: 0.15rem;
  border-radius: 50%;
  transition: color 0.2s;
}

.search-clear:hover {
  color: var(--primary);
}

.filter-btn {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  padding: 0.5rem 0.875rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.filter-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.filter-btn.active {
  background: rgba(79, 70, 229, 0.08);
  border-color: var(--primary);
  color: var(--primary);
}

.empty-groups {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--text-muted);
  font-size: 0.95rem;
}

/* Bloco "Avise-me quando houver uma vaga" (serviço sem grupo aberto). */
.catalog-watch-suggestion {
  max-width: 420px;
  margin: 1.25rem auto 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: center;
}

.catalog-watch-suggestion p {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin: 0;
}

.groups-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.5rem;
}

.group-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 1rem;
  padding: 1.25rem;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.05);
  transition: transform 0.2s, box-shadow 0.2s;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Grupo verificado pela DividePass: compra mais segura, então o card inteiro
   ganha um fio verde — o selo é o que segura o olhar. */
.group-card.is-verified {
  border-color: rgba(16, 185, 129, 0.38);
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.05), 0 14px 34px -26px rgba(16, 185, 129, 0.75);
}

.group-card.is-verified:hover {
  border-color: rgba(16, 185, 129, 0.6);
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.05), 0 18px 40px -24px rgba(16, 185, 129, 0.85);
}

.group-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.05);
}

.group-card-full {
  opacity: 0.7;
}

.group-card-full:hover {
  transform: none;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.05);
}

/* Top Section: Photo + Info */
.gc-top {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.gc-photo {
  width: 80px;
  height: 80px;
  border-radius: 0.75rem;
  overflow: hidden;
  flex-shrink: 0;
  border: 2px solid var(--border);
}

.gc-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gc-photo-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.5rem;
  font-weight: 700;
}

.gc-photo-placeholder img {
  width: 60%;
  height: 60%;
  object-fit: contain;
}

.gc-info {
  flex: 1;
  min-width: 0;
}

.gc-name-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.35rem;
}

.gc-name-row h3 {
  font-size: 1rem;
  color: var(--text);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gc-verified {
  color: #0EA5E9;
  flex-shrink: 0;
  animation: verifiedPulseStrong 1.8s ease-in-out infinite;
}

/* Grupo criado por usuário que ainda não foi aprovado pela equipe: aparece
   no catálogo, mas não aceita pagamento. */
.gc-awaiting {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--warning, #F59E0B);
  background: var(--warning-bg, rgba(245, 158, 11, 0.12));
  border: 1px solid var(--warning-border, rgba(245, 158, 11, 0.35));
  white-space: nowrap;
}

@keyframes verifiedPulseStrong {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(14, 165, 233, 0)); }
  50% { transform: scale(1.15); filter: drop-shadow(0 0 8px rgba(14, 165, 233, 0.5)); }
}

.gc-stats-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.gc-members {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.gc-vagas {
  font-size: 0.65rem;
  font-weight: 800;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  background: rgba(16, 185, 129, 0.1);
  color: var(--success);
  text-transform: uppercase;
}

.gc-vagas.full {
  background: rgba(239, 68, 68, 0.1);
  color: var(--error);
}

.gc-ref {
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  background: rgba(79, 70, 229, 0.1);
  color: var(--primary);
  font-family: monospace;
}

/* Divider */
.gc-divider {
  height: 1px;
  background: var(--border);
  margin: 0.85rem 0;
  opacity: 0.5;
}

/* Price Section */
.gc-price {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.gc-price-label {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.gc-price-value {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--primary);
  font-family: var(--font-title);
}

.gc-price-value small {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-weight: 500;
  margin-left: 0.25rem;
}

/* Bottom Section */
.gc-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.gc-member-avatars {
  display: flex;
}

.gc-member-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--primary);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 700;
  margin-left: -0.5rem;
  border: 2px solid var(--surface);
  overflow: hidden;
}

.gc-member-avatar:first-child {
  margin-left: 0;
}

.gc-member-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Vaga vazia (grupo sem membros) e contador "+N".
   Nomes próprios de propósito: um `.gc-empty` solto aqui colidia com o
   `.gc-empty` do wizard de criação de grupo (virava um quadrado tracejado
   de 46px no lugar do círculo de 28px). */
.gc-member-avatar.gc-member-avatar-empty {
  background: var(--border);
  color: var(--text-muted);
}

.gc-member-avatar.gc-member-more {
  background: var(--surface-soft);
  color: var(--text-muted);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.gc-creator {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.72rem;
  color: var(--text-muted);
}

.gc-creator-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.gc-creator-avatar:not(img) {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--primary), #818CF8);
  color: white;
  font-size: 0.55rem;
  font-weight: 700;
}

.gc-creator-avatar.gc-avatar-dp {
  background: linear-gradient(135deg, var(--primary), #818CF8);
}

/* Selos do grupo (verificado / anúncios / tipo de conta) */
.gc-tags {
  margin-top: 0.45rem;
}

/* Grupo oficial: mostra o LOGO da DividePass (o mark tem pontas que um
   círculo cortaria, então o chip é quadrado com cantos arredondados). */
.gc-creator-logo {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  object-fit: contain;
  padding: 2px;
  background: var(--surface-soft);
  border: 1px solid var(--border);
}

.gc-creator strong {
  color: var(--text);
}

.gc-official-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--primary);
  background: rgba(79, 70, 229, 0.1);
  padding: 0.15rem 0.4rem;
  border-radius: 1rem;
  animation: oficialPulse 2s ease-in-out infinite;
}

@keyframes oficialPulse {
  0%, 100% {
    background: rgba(79, 70, 229, 0.1);
    box-shadow: 0 0 0 0 rgba(79, 70, 229, 0);
  }
  50% {
    background: rgba(79, 70, 229, 0.2);
    box-shadow: 0 0 12px 2px rgba(79, 70, 229, 0.2);
  }
}

/* Old styles kept for compatibility */
.group-card-header {
  display: none;
}

.group-card-body {
  display: none;
}

.group-price {
  display: none;
}

.group-card-creator {
  display: none;
}

/* group-card-footer removed — card is now fully clickable */

.group-card-footer .btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-full {
  width: 100%;
}

.btn-card-cta {
  font-size: 0.95rem;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  transition: all 0.2s ease;
}

.btn-disabled {
  width: 100%;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  font-size: 0.95rem;
  font-weight: 700;
  text-align: center;
  background: var(--background);
  color: var(--text-muted);
  border: 1px solid var(--border);
  cursor: not-allowed;
  opacity: 0.6;
}

/* Catalog Detail Header */
.catalog-detail-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}

.catalog-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.catalog-detail-header .page-header {
  margin-bottom: 0;
}

.btn-interest-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.1rem;
  background: linear-gradient(135deg, #4F46E5, #818CF8);
  color: white;
  border: none;
  border-radius: 0.75rem;
  font-size: 0.875rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(79, 70, 229, 0.25);
}

.btn-share-header {
  background: linear-gradient(135deg, #0F766E, #14B8A6);
  box-shadow: 0 2px 8px rgba(20, 184, 166, 0.25);
}

.btn-interest-header:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.35);
}

.btn-share-header:hover {
  box-shadow: 0 4px 12px rgba(20, 184, 166, 0.35);
}

/* Modal */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 1rem;
  animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.modal-content {
  background: var(--surface);
  border-radius: 1rem;
  padding: 1.75rem;
  max-width: 480px;
  width: 100%;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
  animation: slideUpFade 0.3s ease;
}

.modal-content h3 {
  font-size: 1.25rem;
  color: var(--secondary);
  margin-bottom: 0.5rem;
}

.modal-content p {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin-bottom: 1rem;
  line-height: 1.5;
}

.modal-content textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  padding: 0.75rem;
  font-size: 0.9rem;
  resize: vertical;
  background: var(--background);
  color: var(--text-main);
  margin-bottom: 1.25rem;
  font-family: inherit;
}

.modal-content textarea:focus {
  outline: none;
  border-color: var(--primary);
}

.modal-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
}

.interest-success {
  text-align: center;
  padding: 1.5rem 0;
  color: var(--success);
}

.interest-success svg {
  margin-bottom: 0.5rem;
}

.interest-success p {
  color: var(--success);
  font-weight: 600;
}

@media (max-width: 768px) {
  /* === Catalog Grid (services list) === */
  .catalog-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.35rem;
  }

  .catalog-header {
    height: auto;
    aspect-ratio: 0.98;
  }

  .catalog-logo,
  .catalog-icon-text {
    width: 40px;
    height: 40px;
    font-size: 1.15rem;
  }

  .catalog-service-name {
    font-size: 0.58rem;
  }

  /* === Group Detail Header === */
  .catalog-detail-header {
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
  }

  .catalog-detail-actions {
    width: 100%;
  }

  .catalog-detail-header .page-header {
    margin-bottom: 0;
  }

  .catalog-detail-header .page-header h1 {
    font-size: 1.1rem;
    margin-bottom: 0.15rem;
  }

  .catalog-detail-header .page-header p {
    font-size: 0.78rem;
    margin: 0;
  }

  .btn-interest-header {
    width: 100%;
    justify-content: center;
    padding: 0.55rem 0.85rem;
    font-size: 0.8rem;
    border-radius: 0.65rem;
  }

  /* === Filters === */
  .catalog-filters {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
    margin-bottom: 1rem;
  }

  .catalog-filters .search-input-wrap {
    grid-column: 1 / -1;
  }

  .catalog-filters-row {
    display: flex;
    gap: 0.5rem;
  }

  .catalog-filters-row .filter-btn,
  .catalog-filters-row .sort-select {
    flex: 1;
  }

  .search-input-wrap {
    min-width: unset;
    padding: 0.45rem 0.7rem;
    border-radius: 0.6rem;
  }

  .search-input-wrap input {
    font-size: 0.82rem;
  }

  .filter-btn {
    padding: 0.4rem 0.7rem;
    font-size: 0.78rem;
    border-radius: 0.6rem;
    justify-content: center;
  }

  .sort-select {
    padding: 0.4rem 0.65rem;
    font-size: 0.78rem;
    border-radius: 0.6rem;
  }

  /* === Groups Grid === */
  .groups-grid {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  /* === Group Card === */
  .group-card {
    padding: 0.7rem;
    border-radius: 0.75rem;
  }

  .group-card-header {
    margin-bottom: 0.4rem;
    gap: 0.35rem;
  }

  .group-card-header h3 {
    font-size: 0.9rem;
    gap: 0.25rem;
  }

  /* === Verified Badge — PULSING === */
  .verified-badge {
    display: inline-flex;
    color: #0EA5E9;
    animation: verifiedPulseStrong 1.8s ease-in-out infinite;
  }

  .verified-badge svg {
    width: 20px;
    height: 20px;
  }

  @keyframes verifiedPulseStrong {
    0%, 100% {
      transform: scale(1);
      filter: drop-shadow(0 0 0 rgba(14, 165, 233, 0));
    }
    50% {
      transform: scale(1.2);
      filter: drop-shadow(0 0 10px rgba(14, 165, 233, 0.6));
    }
  }

  /* === Tags === */
  .tag {
    padding: 0.2rem 0.5rem;
    font-size: 0.65rem;
  }

  /* === Card Body === */
  .group-card-body {
    gap: 0.45rem;
  }

  /* === Progress === */
  .group-progress {
    gap: 0.2rem;
  }

  .progress-bar {
    height: 4px;
  }

  .progress-text {
    font-size: 0.68rem;
  }

  /* === Price — FOCAL POINT === */
  .group-price {
    padding-top: 0.4rem;
    gap: 0.05rem;
  }

  .price-label {
    font-size: 0.68rem;
  }

  .price-value {
    font-size: 1.25rem;
  }

  .price-value small {
    font-size: 0.72rem;
  }

  /* === Creator — FOCAL POINT === */
  .group-card-creator {
    padding-top: 0.35rem;
    margin-top: 0;
    font-size: 0.7rem;
    gap: 0.35rem;
  }

  .group-card-creator-avatar {
    width: 26px;
    height: 26px;
    font-size: 0.6rem;
  }

  .group-card-creator-avatar-placeholder {
    width: 26px;
    height: 26px;
    font-size: 0.6rem;
  }

  /* === Oficial Seal — PULSE === */
  .group-card-official-seal {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    font-size: 0.62rem;
    font-weight: 700;
    color: var(--primary);
    background: rgba(79, 70, 229, 0.12);
    padding: 0.15rem 0.4rem;
    border-radius: 1rem;
    margin-left: auto;
    animation: oficialPulse 2s ease-in-out infinite;
  }

  @keyframes oficialPulse {
    0%, 100% {
      background: rgba(79, 70, 229, 0.12);
      box-shadow: 0 0 0 0 rgba(79, 70, 229, 0);
    }
    50% {
      background: rgba(79, 70, 229, 0.22);
      box-shadow: 0 0 12px 2px rgba(79, 70, 229, 0.2);
    }
  }

  /* === Card hover effect === */
  .group-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px -4px rgb(0 0 0 / 0.1);
  }

  /* === Modal === */
  .modal-actions {
    flex-direction: column;
  }

  .modal-actions .btn {
    width: 100%;
    justify-content: center;
  }

  /* === Info Banner === */
  .info-banner {
    font-size: 0.82rem;
    padding: 0.75rem 1rem;
    gap: 0.5rem;
    margin-bottom: 1rem;
  }

  .info-banner a {
    font-size: 0.78rem;
  }

  /* === Empty Groups === */
  .empty-groups {
    padding: 2rem 1rem;
    font-size: 0.85rem;
  }
}

/* ============================================================
   PÁGINA DA PLATAFORMA — layout novo (2026-11-08)
   Grade de grupos + lateral de prova social, chips de desconto
   no cabeçalho e CTA dentro do card.
   ============================================================ */

/* Grade + lateral */
.plat-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 1.5rem;
  align-items: start;
}

.plat-layout .groups-grid {
  margin-bottom: 0;
}

.plat-side {
  position: sticky;
  top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.plat-side .ins-section {
  margin-bottom: 0;
}

.plat-side-note {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.8rem 0.9rem;
  border-radius: var(--radius-md);
  background: var(--primary-soft);
  color: var(--text-main);
  font-size: 0.78rem;
  line-height: 1.45;
}

.plat-side-note svg {
  flex: 0 0 auto;
  margin-top: 2px;
  color: var(--primary);
}

@media (max-width: 1100px) {
  .plat-layout {
    grid-template-columns: 1fr;
  }

  .plat-side {
    position: static;
  }
}

/* Cabeçalho da plataforma: logo + chips */
.catalog-platform-title {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.catalog-platform-logo {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  object-fit: contain;
  background: var(--surface-soft);
  padding: 6px;
  flex: 0 0 auto;
}

.catalog-platform-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.5rem;
}

.catalog-platform-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-soft);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
}

.catalog-platform-chip--off {
  border-color: transparent;
  background: var(--economy-bg);
  color: var(--economy);
  font-weight: 800;
}

/* Preço do grupo: linha principal + desconto */
.gc-price {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.gc-price-main {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.gc-off {
  flex: 0 0 auto;
  padding: 0.2rem 0.5rem;
  border-radius: 8px;
  background: var(--economy-bg);
  color: var(--economy);
  font-size: 0.75rem;
  font-weight: 800;
}

.gc-price-old {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.74rem;
  color: var(--text-muted);
}

.gc-price-old s {
  opacity: 0.85;
}

/* CTA dentro do card */
.gc-cta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.9rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--border);
}

.gc-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.55rem 0.95rem;
  border-radius: var(--radius-sm);
  background: var(--action);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 700;
  transition: filter 0.15s ease;
}

.group-card:hover .gc-cta {
  filter: brightness(1.08);
}

.gc-cta--full {
  background: var(--surface-soft);
  color: var(--text-muted);
}

.gc-see-details {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
}
.credentials-page {
  animation: slideUpFade 0.4s ease-out forwards;
}

@keyframes slideUpFade {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.page-header {
  margin-bottom: 2rem;
}

.page-header h1 {
  font-size: 1.75rem;
  margin-bottom: 0.5rem;
  color: var(--secondary);
}

.page-header p {
  color: var(--text-muted);
}

.empty-credentials {
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: 1rem;
  padding: 3rem 1.5rem;
  text-align: center;
  max-width: 520px;
  margin: 2rem auto;
}

.empty-credentials svg {
  color: var(--text-muted);
  margin-bottom: 1rem;
}

.empty-credentials h2 {
  color: var(--secondary);
  margin-bottom: 0.75rem;
  font-size: 1.25rem;
}

.empty-credentials p {
  color: var(--text-muted);
  margin-bottom: 1.5rem;
  line-height: 1.6;
}

.credentials-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1rem;
}

.credential-list-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 1rem;
  padding: 1.25rem;
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: all 0.2s;
  border-left: 4px solid var(--service-color);
}

.credential-list-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.05);
  border-color: var(--service-color);
}

.credential-list-icon {
  width: 48px;
  height: 48px;
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 800;
  color: white;
  flex-shrink: 0;
  overflow: hidden;
}

.credential-list-icon-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.credential-list-info {
  flex: 1;
}

.credential-list-info h3 {
  font-size: 1.1rem;
  margin-bottom: 0.25rem;
  color: var(--secondary);
}

.credential-list-info p {
  font-size: 0.875rem;
  color: var(--text-muted);
}

.credential-list-action {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--primary);
  font-weight: 600;
  font-size: 0.9rem;
}

@media (max-width: 768px) {
  .credentials-list {
    grid-template-columns: 1fr;
  }

  .credential-list-card {
    padding: 1rem;
  }
}
/* ═══════════════════════════════════════════════════════════════════════════
   MINHAS ENTREGAS (Pulse Coding)
   ---------------------------------------------------------------------------
   A tela do cliente: o acesso que ele comprou (conta, link, licença, código).
   Segue a paleta do tema do site.
   ═══════════════════════════════════════════════════════════════════════════ */

.deliveries-page {
  max-width: 62rem;
  margin: 0 auto;
  padding: 1.5rem 1rem 3rem;
}

.deliveries-page .page-header {
  margin-bottom: 1.25rem;
}

.deliveries-page .page-header h1 {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--text-main);
  margin-bottom: 0.25rem;
}

.deliveries-page .page-header p {
  color: var(--text-muted);
  font-size: 0.9rem;
  max-width: 40rem;
}

/* ------------------------------------------------------------------ */
/* Avisos                                                              */
/* ------------------------------------------------------------------ */
.md-alert {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 0.85rem 1rem;
  margin-bottom: 0.9rem;
  background: var(--surface);
}

.md-alert > svg {
  flex-shrink: 0;
  margin-top: 0.1rem;
}

.md-alert strong {
  display: block;
  color: var(--text-main);
  font-size: 0.9rem;
  margin-bottom: 0.12rem;
}

.md-alert p {
  margin: 0;
  font-size: 0.84rem;
  color: var(--text-muted);
}

.md-alert-wait {
  border-color: rgba(59, 130, 246, 0.35);
  background: rgba(59, 130, 246, 0.07);
}

.md-alert-wait > svg {
  color: #2563eb;
}

.md-alert-error {
  border-color: rgba(220, 38, 38, 0.35);
  background: rgba(220, 38, 38, 0.07);
}

.md-alert-error > svg {
  color: #dc2626;
}

/* ------------------------------------------------------------------ */
/* Lista de entregas                                                   */
/* ------------------------------------------------------------------ */
.md-list {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.md-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}

.md-card-head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--border);
}

.md-card-icon {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm, 10px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(79, 70, 229, 0.1);
  color: var(--primary);
  flex-shrink: 0;
}

.md-card-title {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.md-card-title strong {
  color: var(--text-main);
  font-size: 0.95rem;
  overflow-wrap: anywhere;
}

.md-card-title small {
  color: var(--text-muted);
  font-size: 0.76rem;
}

.md-badge {
  flex-shrink: 0;
  border-radius: 999px;
  padding: 0.2rem 0.6rem;
  font-size: 0.72rem;
  font-weight: 700;
  background: rgba(79, 70, 229, 0.1);
  color: var(--primary);
}

.md-card-body {
  padding: 0.85rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.md-field {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.md-field-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--text-soft);
}

.md-field-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.md-field-value {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 0.9rem;
  color: var(--text-main);
  background: transparent;
  border: none;
  padding: 0;
}

.md-link {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.md-copy {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm, 8px);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.md-copy:hover {
  color: var(--primary);
  border-color: var(--primary);
}

.md-credits {
  font-size: 0.82rem;
  color: var(--text-muted);
}

.md-expira {
  font-size: 0.76rem;
  color: var(--text-soft);
}

/* ------------------------------------------------------------------ */
/* Estado vazio e rodapé                                               */
/* ------------------------------------------------------------------ */
.md-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.5rem;
  padding: 2.5rem 1.25rem;
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
  color: var(--text-muted);
}

.md-empty h2 {
  color: var(--text-main);
  font-size: 1.05rem;
  margin: 0;
}

.md-empty p {
  max-width: 30rem;
  font-size: 0.86rem;
  margin: 0;
}

.md-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.5rem;
  padding: 0.6rem 1rem;
  border-radius: var(--radius-sm, 10px);
  background: var(--primary);
  color: #fff;
  font-size: 0.86rem;
  font-weight: 600;
  text-decoration: none;
}

.md-foot {
  margin-top: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  align-items: flex-start;
}

.md-refresh {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  border-radius: var(--radius-sm, 10px);
  padding: 0.45rem 0.8rem;
  font-size: 0.82rem;
  cursor: pointer;
}

.md-refresh:hover {
  color: var(--primary);
  border-color: var(--primary);
}

.md-warn {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  font-size: 0.78rem;
  color: var(--text-muted);
  margin: 0;
}

.md-warn svg {
  flex-shrink: 0;
  margin-top: 0.1rem;
  color: #d97706;
}

/* ------------------------------------------------------------------ */
/* Celular                                                              */
/* ------------------------------------------------------------------ */
@media (max-width: 640px) {
  .deliveries-page {
    padding: 1rem 0.85rem 2.5rem;
  }

  .deliveries-page .page-header h1 {
    font-size: 1.35rem;
  }
}
.billing-content {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

.payment-methods h2, .invoice-history h2 {
  font-size: 1.25rem;
  margin-bottom: 1rem;
  color: var(--secondary);
}

.card-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 1.5rem;
  border-radius: 1rem;
  max-width: 600px;
}

.card-brand {
  display: inline-block;
  background: rgba(16, 185, 129, 0.1);
  color: var(--success);
  font-weight: 800;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  margin-bottom: 0.5rem;
}

.card-info p {
  color: var(--text-muted);
  margin: 0;
}

.table-responsive {
  overflow-x: auto;
  background: var(--surface);
  border-radius: 1rem;
  border: 1px solid var(--border);
}

.invoice-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.invoice-table th {
  background: var(--background);
  padding: 1rem 1.5rem;
  font-weight: 600;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}

.invoice-table td {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

.invoice-table tbody tr:last-child td {
  border-bottom: none;
}

.invoice-table tbody tr:hover {
  background: rgba(0,0,0,0.01);
}

.status-badge {
  padding: 0.35rem 0.75rem;
  border-radius: 2rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
}

.status-badge.pago {
  background: rgba(16, 185, 129, 0.1);
  color: var(--success);
}

.status-badge.pendente {
  background: rgba(245, 158, 11, 0.1);
  color: var(--warning);
}

.pay-btn {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.status-badge.vencido {
  background: rgba(239, 68, 68, 0.1);
  color: #EF4444;
}

/* Estado da ASSINATURA (derivado do módulo de acesso): vale diferente do
   status da fatura, que continua em .pago/.pendente/.vencido. */
.status-badge.ativa {
  background: rgba(16, 185, 129, 0.1);
  color: var(--success);
}

.status-badge.atrasada {
  background: rgba(239, 68, 68, 0.1);
  color: #EF4444;
}

/* Assinaturas ativas */
.billing-subscriptions h2 {
  font-size: 1.25rem;
  margin-bottom: 1rem;
  color: var(--secondary);
}

.billing-empty {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 1rem;
  padding: 1.5rem;
  color: var(--text-muted);
}

.billing-subscriptions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1rem;
}

/* Cartão de assinatura: conteúdo em coluna, cabeçalho alinhado */
.billing-sub-card {
  position: relative;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 1rem;
  padding: 1.1rem 1.25rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}

.billing-sub-card::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--service-color, var(--primary));
}

.billing-sub-card:hover {
  transform: translateY(-2px);
  border-color: var(--border);
  box-shadow: 0 8px 22px -12px rgba(0, 0, 0, 0.5);
}

.billing-sub-card-pending {
  border-color: rgba(234, 179, 8, 0.4);
  background: linear-gradient(180deg, rgba(234, 179, 8, 0.07), transparent 60%);
}

.billing-sub-card-pending::before {
  background: #EAB308;
}

/* Cabeçalho: ícone + nome + badge no mesmo eixo */
.billing-sub-head {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.billing-sub-icon {
  width: 44px;
  height: 44px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.05rem;
  color: white;
  flex-shrink: 0;
}

.billing-sub-head-text {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
  flex: 1;
}

.billing-sub-head-text h4 {
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--secondary);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.billing-sub-head-text p {
  color: var(--text-muted);
  font-size: 0.8rem;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.billing-sub-price {
  color: var(--primary);
  font-weight: 700;
  font-size: 1.05rem;
  margin-left: auto;
  white-space: nowrap;
}

/* Linha de vencimento + status */
.billing-sub-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
}

.billing-sub-due {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.billing-sub-due strong {
  color: var(--text);
  font-weight: 600;
}

.billing-sub-pending-note {
  font-size: 0.72rem;
  color: var(--text-muted);
  font-style: italic;
  max-width: 15rem;
  line-height: 1.35;
}

/* Box de pendência com total e botão de pagamento */
.billing-sub-pending-box {
  display: flex;
  align-items: center;
  gap: 0.6rem 0.75rem;
  flex-wrap: wrap;
  padding: 0.75rem 0.85rem;
  background: rgba(234, 179, 8, 0.09);
  border: 1px solid rgba(234, 179, 8, 0.28);
  border-radius: 0.7rem;
}

.billing-sub-pending-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.billing-sub-pending-total {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--secondary);
  margin-right: auto;
}

.billing-sub-pay-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  white-space: nowrap;
}

/* Escolha de método de pagamento */
.pay-method-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-bottom: 1rem;
}

.pay-method-option {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  width: 100%;
  padding: 0.9rem 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  cursor: pointer;
  text-align: left;
  color: var(--text);
  font-family: inherit;
  transition: all 0.2s;
}

.pay-method-option:hover {
  border-color: var(--primary);
}

.pay-method-option.active {
  border-color: var(--primary);
  background: rgba(79, 70, 229, 0.08);
  box-shadow: 0 0 0 1px var(--primary) inset;
}

.pay-method-text {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.pay-method-text strong {
  font-size: 0.92rem;
}

.pay-method-text small {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.pay-method-hint {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin: 0.25rem 0;
}

.pay-method-summary {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.4rem 1rem;
  padding: 0.85rem 1rem;
  margin: 1rem 0;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  font-size: 0.85rem;
}

.pay-method-summary span {
  color: var(--text-muted);
}

.pay-method-summary strong {
  text-align: right;
}

.pay-confirm-btn {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.saved-card-row.selected {
  border-color: var(--primary);
  background: rgba(79, 70, 229, 0.08);
}

/* Modal de detalhes */
.invoice-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  z-index: 1000;
  backdrop-filter: blur(4px);
}

.invoice-modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 1.5rem;
  padding: 1.5rem;
  width: 100%;
  max-width: 420px;
  position: relative;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2);
}

.invoice-modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0.25rem;
}

.invoice-modal-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding-right: 2rem;
}

.invoice-modal-header svg {
  color: var(--primary);
}

.invoice-modal-header h3 {
  font-size: 1.1rem;
  color: var(--secondary);
  margin-bottom: 0.25rem;
}

.invoice-modal-header p {
  color: var(--text-muted);
  font-size: 0.875rem;
}

.invoice-modal-body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.invoice-modal-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: var(--background);
  border-radius: 0.75rem;
}

.invoice-modal-row svg {
  color: var(--text-muted);
  flex-shrink: 0;
}

.invoice-modal-row span {
  flex: 1;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.invoice-modal-row strong {
  color: var(--secondary);
}

.invoice-modal-row.pending {
  color: var(--warning);
  background: rgba(245, 158, 11, 0.1);
}

.invoice-modal-row.pending svg {
  color: var(--warning);
}

.invoice-modal-row.pending span {
  color: var(--warning);
}

.invoice-modal-row.overdue {
  color: #EF4444;
  background: rgba(239, 68, 68, 0.1);
}

.invoice-modal-row.overdue svg {
  color: #EF4444;
}

.invoice-modal-row.overdue span {
  color: #EF4444;
}

.loading-cell,
.error-cell,
.empty-cell {
  text-align: center;
  padding: 2rem;
  color: var(--text-muted);
}

.billing-pending-section {
  margin-bottom: 1.5rem;
}

.billing-pending-section h2 {
  font-size: 1.1rem;
  color: var(--secondary);
  margin-bottom: 0.75rem;
}

.billing-pending-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.billing-pending-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid #F59E0B;
  border-radius: var(--radius-sm);
  padding: 1rem 1.25rem;
  gap: 1rem;
}

.billing-pending-info {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.billing-pending-group {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.billing-pending-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: white;
  flex-shrink: 0;
  font-size: 0.85rem;
}

.billing-pending-group strong {
  font-size: 0.9rem;
  color: var(--text);
  display: block;
}

.billing-pending-service {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.billing-pending-id {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-family: monospace;
}

.billing-pending-amount {
  font-size: 1rem !important;
  font-weight: 700;
  color: var(--secondary) !important;
}

.invoice-group-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.invoice-group-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: white;
  flex-shrink: 0;
  font-size: 0.85rem;
}

.invoice-group-info strong {
  display: block;
  font-size: 0.85rem;
}

.invoice-group-info span {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.pix-modal {
  max-width: 420px;
}

.pix-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.pix-qrcode-img {
  max-width: 250px;
  width: 100%;
  border-radius: var(--radius-sm);
  background: white;
  padding: 0.5rem;
}

.pix-copy-section {
  width: 100%;
}

.pix-copy-section label {
  display: block;
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 0.4rem;
}

.pix-copy-row {
  display: flex;
  gap: 0.5rem;
}

.pix-copy-input {
  flex: 1;
  padding: 0.6rem 0.75rem;
  background: var(--surface-hover);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  color: var(--text);
  min-width: 0;
}

.pix-polling-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--primary);
}

.pix-error {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: #EF4444;
  background: rgba(239, 68, 68, 0.1);
  padding: 0.6rem 1rem;
  border-radius: var(--radius-sm);
  width: 100%;
}

.spinning {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
/* Lista de regrinhas do grupo (detalhe, checkout e credenciais). */
.group-rules-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.group-rules-list li {
  position: relative;
  padding-left: 0.9rem;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--text-muted);
}

.group-rules-list li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: var(--text-soft);
}
/* IOPay Card Form Styles */
.iopay-card-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.card-form-row {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.card-form-row label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
}

.card-form-row input {
  padding: 0.75rem 1rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  font-size: 0.95rem;
  background: var(--background);
  color: var(--text-main);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.card-form-row input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

.card-form-row input::placeholder {
  color: var(--text-muted);
  opacity: 0.6;
}

.card-form-row input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.card-form-row input.field-error {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

.field-error-msg {
  font-size: 0.72rem;
  color: #ef4444;
  margin-top: -0.15rem;
}

.card-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

/* Submit button animations */
.iopay-submit-btn {
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.iopay-submit-btn.processing {
  background: var(--primary) !important;
  opacity: 0.85;
  cursor: wait;
}

.iopay-submit-btn.success {
  background: #10b981 !important;
  border-color: #10b981 !important;
  color: white !important;
}

.iopay-submit-btn.error {
  background: #ef4444 !important;
  border-color: #ef4444 !important;
  color: white !important;
}

/* Payment method selector for IOPay */
.iopay-method-selector {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.iopay-method-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem;
  background: var(--background);
  border: 2px solid var(--border);
  border-radius: 0.5rem;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
  transition: all 0.2s;
}

.iopay-method-btn:hover {
  border-color: var(--primary);
}

.iopay-method-btn.active {
  border-color: var(--primary);
  color: var(--primary);
  background: rgba(79, 70, 229, 0.06);
}

/* PIX result display */
.iopay-pix-result {
  text-align: center;
  padding: 1.5rem;
}

.iopay-pix-result .pix-qrcode {
  max-width: 200px;
  margin: 0 auto 1rem;
  border-radius: 0.5rem;
  background: #FFFFFF;
  padding: 8px;
}

.iopay-pix-result .pix-copy-paste {
  background: var(--background);
  border: 1px dashed var(--border);
  border-radius: 0.5rem;
  padding: 0.75rem;
  word-break: break-all;
  font-family: monospace;
  font-size: 0.8rem;
  color: var(--text-main);
  margin-bottom: 1rem;
  user-select: all;
}

.iopay-pix-result .pix-waiting {
  color: var(--text-muted);
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1rem;
}
.checkout-page {
  animation: slideUpFade 0.4s ease-out forwards;
}

@keyframes slideUpFade {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.page-header {
  margin-bottom: 2rem;
}

.page-header h1 {
  font-size: 1.75rem;
  margin-bottom: 0.5rem;
  color: var(--secondary);
}

.page-header p {
  color: var(--text-muted);
}

.back-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--text-muted);
  background: none;
  border: none;
  font-size: 0.9rem;
  cursor: pointer;
  margin-bottom: 1rem;
  padding: 0;
  transition: color 0.2s;
}

.back-btn:hover {
  color: var(--primary);
}

.empty-checkout {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 1rem;
  padding: 3rem 1.5rem;
  text-align: center;
}

.empty-checkout h2 {
  margin-bottom: 0.5rem;
  color: var(--secondary);
}

.empty-checkout p {
  color: var(--text-muted);
  margin-bottom: 1.5rem;
}

/* Success Card */
.success-card {
  max-width: 520px;
  margin: 2rem auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 1.5rem;
  padding: 3rem 2rem;
  text-align: center;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.05);
}

.success-icon {
  width: 80px;
  height: 80px;
  background: rgba(16, 185, 129, 0.1);
  color: var(--success);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
}

.success-card h2 {
  color: var(--secondary);
  margin-bottom: 0.75rem;
}

.success-card p {
  color: var(--text-muted);
  line-height: 1.7;
  margin-bottom: 2rem;
}

.success-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* Payment Success Overlay */
.payment-success-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.payment-success-card {
  background: var(--surface);
  border-radius: 1.5rem;
  padding: 3rem 2.5rem;
  text-align: center;
  max-width: 420px;
  width: 90%;
  animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes popIn {
  0% { transform: scale(0.5); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.payment-success-icon {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: rgba(16, 185, 129, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); }
  50% { box-shadow: 0 0 0 15px rgba(16, 185, 129, 0); }
}

.payment-success-icon svg {
  color: #10B981;
}

.payment-success-card h2 {
  color: var(--secondary);
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

.payment-success-card p {
  color: var(--text-muted);
  margin-bottom: 0.5rem;
  line-height: 1.6;
}

.payment-success-amount {
  font-size: 2rem;
  font-weight: 700;
  color: #10B981;
  margin: 1rem 0;
}

.payment-success-redirect {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
  color: var(--text-muted);
  font-size: 0.85rem;
}

.payment-success-redirect .spinner-small {
  width: 16px;
  height: 16px;
  border: 2px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Payment Error Banner */
.payment-error-banner {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 0.75rem;
  padding: 1rem 1.25rem;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
  animation: shake 0.5s ease-in-out;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-5px); }
  40%, 80% { transform: translateX(5px); }
}

.payment-error-banner svg {
  color: #EF4444;
  flex-shrink: 0;
  margin-top: 2px;
}

.payment-error-banner .error-text {
  flex: 1;
}

.payment-error-banner .error-text strong {
  color: #EF4444;
  display: block;
  margin-bottom: 0.25rem;
}

.payment-error-banner .error-text p {
  color: var(--text-muted);
  font-size: 0.85rem;
  margin: 0;
}

/* Processing Animation */
.processing-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: fadeIn 0.3s ease-out;
}

.processing-card {
  background: var(--surface);
  border-radius: 1.5rem;
  padding: 3rem 2.5rem;
  text-align: center;
  max-width: 380px;
  width: 90%;
  animation: popIn 0.4s ease-out;
}

.processing-card .spinner-large {
  width: 60px;
  height: 60px;
  border: 4px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 0 auto 1.5rem;
}

.processing-card h3 {
  color: var(--secondary);
  margin-bottom: 0.5rem;
}

.processing-card p {
  color: var(--text-muted);
  font-size: 0.9rem;
}

/* Checkout Grid */
.checkout-grid {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 2rem;
  align-items: start;
  max-width: 100%;
  overflow: hidden;
}

.checkout-summary,
.checkout-payment {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 1rem;
  padding: 1.5rem;
  min-width: 0;
  overflow: hidden;
}

.checkout-summary h3,
.checkout-payment h3 {
  font-size: 1.1rem;
  margin-bottom: 1.25rem;
  color: var(--secondary);
}

.summary-service {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1.25rem;
}

.summary-icon {
  width: 56px;
  height: 56px;
  border-radius: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  font-weight: 800;
  color: white;
  flex-shrink: 0;
}

.summary-service h4 {
  font-size: 1.1rem;
  margin-bottom: 0.25rem;
  color: var(--secondary);
}

.summary-service p {
  font-size: 0.875rem;
  color: var(--text-muted);
}

.summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 0;
  color: var(--text-muted);
  font-size: 0.95rem;
}

.summary-row strong {
  color: var(--secondary);
}

.summary-total {
  border-top: 1px dashed var(--border);
  margin-top: 0.5rem;
  padding-top: 1rem;
  font-size: 1.1rem;
}

.summary-total strong {
  font-size: 1.35rem;
  color: var(--primary);
}

/* Billing Cycle Selector */
.checkout-rules {
  display: flex;
  gap: 0.75rem;
  background: rgba(251, 146, 60, 0.05);
  border: 1px solid rgba(251, 146, 60, 0.15);
  border-radius: 0.75rem;
  padding: 1rem;
  margin-bottom: 1rem;
  color: var(--text-main);
}

.checkout-rules svg {
  color: #FB923C;
  flex-shrink: 0;
}

.checkout-rules strong {
  display: block;
  font-size: 0.85rem;
  margin-bottom: 0.25rem;
}

.checkout-rules p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.85rem;
  line-height: 1.5;
}

.cycle-selector {
  margin: 1.25rem 0;
}

.cycle-selector label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--secondary);
  margin-bottom: 0.75rem;
}

.cycle-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}

.cycle-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 0.875rem 0.5rem;
  background: var(--background);
  border: 2px solid var(--border);
  border-radius: 0.75rem;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
  position: relative;
}

.cycle-option:hover {
  border-color: var(--primary);
}

.cycle-option.selected {
  border-color: var(--primary);
  background: rgba(79, 70, 229, 0.08);
}

.cycle-label {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--secondary);
}

.cycle-price {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--primary);
}

.cycle-months {
  font-size: 0.7rem;
  color: var(--text-muted);
}

.cycle-discount {
  position: absolute;
  top: -0.5rem;
  right: -0.25rem;
  background: var(--success);
  color: white;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0.2rem 0.4rem;
  border-radius: 999px;
}

/* Entrance Fee Highlight */
.entrance-fee-highlight {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.08), rgba(239, 68, 68, 0.03));
  border: 2px solid rgba(239, 68, 68, 0.25);
  border-radius: 0.75rem;
  padding: 1rem 1.25rem;
  margin: 1rem 0;
  position: relative;
}

.entrance-fee-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.entrance-fee-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #EF4444;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 900;
  flex-shrink: 0;
}

.entrance-fee-header strong {
  color: #EF4444;
  font-size: 0.9rem;
}

.entrance-fee-desc {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin: 0 0 0.75rem 0;
  line-height: 1.5;
}

.entrance-fee-desc strong {
  color: #EF4444;
}

.entrance-fee-amount {
  font-size: 1.5rem;
  font-weight: 800;
  color: #EF4444;
  font-family: var(--font-title);
}

.cycle-months-sub {
  font-size: 0.7rem;
  color: var(--text-muted);
}

/* Adesao Info Box */
.adesao-info-box {
  margin: 1rem 0;
  padding: 1rem;
  background: rgba(79, 70, 229, 0.04);
  border: 1px solid rgba(79, 70, 229, 0.15);
  border-radius: 0.75rem;
}

.adesao-info-box h4 {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 0.5rem;
}

.adesao-info-box p {
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: 0.5rem;
}

.adesao-info-list {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0;
}

.adesao-info-list li {
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.6;
  padding-left: 1.2rem;
  position: relative;
}

.adesao-info-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.45rem;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary);
}

/* Renewal Note */
.renewal-note {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: var(--text-muted);
  padding: 0.5rem 0;
  margin-top: 0.25rem;
}

.renewal-note svg {
  color: var(--success);
  flex-shrink: 0;
}

.renewal-note strong {
  color: var(--success);
}

@media (max-width: 768px) {
  .cycle-options {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Payment Methods */
.payment-methods {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.payment-method {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem;
  background: var(--background);
  border: 2px solid var(--border);
  border-radius: 0.75rem;
  cursor: pointer;
  transition: all 0.2s;
  text-align: left;
}

.payment-method:hover {
  border-color: var(--primary);
}

.payment-method.active {
  border-color: var(--primary);
  background: rgba(79, 70, 229, 0.05);
}

.payment-method svg {
  color: var(--primary);
  flex-shrink: 0;
}

.payment-method strong {
  display: block;
  color: var(--secondary);
  font-size: 0.9rem;
}

.payment-method span {
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* Payment Content */
.payment-content {
  margin-bottom: 1.5rem;
}

.pix-code {
  background: var(--background);
  border: 1px dashed var(--border);
  border-radius: 0.75rem;
  padding: 1rem;
  word-break: break-all;
  font-family: monospace;
  font-size: 0.85rem;
  color: var(--secondary);
  margin-bottom: 0.75rem;
}

.payment-help {
  color: var(--text-muted);
  font-size: 0.875rem;
  text-align: center;
}

.form-row {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 1rem;
}

.form-row label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
}

.form-row input {
  padding: 0.75rem 1rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  font-size: 0.95rem;
  background: var(--background);
  color: var(--text-main);
}

.form-row input:focus {
  outline: none;
  border-color: var(--primary);
}

.form-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.btn-pay {
  margin-bottom: 1rem;
}

.secure-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  color: var(--text-muted);
  font-size: 0.8rem;
  margin: 0;
}

.saved-cards-section {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.saved-cards-title {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 0 0 0.25rem;
  font-weight: 500;
}

.saved-card-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-card);
}

.saved-card-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--text);
  font-family: monospace;
}

.saved-card-number {
  font-family: monospace;
  letter-spacing: 0.5px;
}

.saved-card-brand {
  font-family: inherit;
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: uppercase;
  font-family: sans-serif;
}

.card-reveal-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0.2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: color 0.15s ease;
}

.card-reveal-btn:hover {
  color: var(--primary);
}

.add-card-toggle {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.82rem;
  color: var(--primary);
  padding: 0.4rem 0;
  margin-top: 0.25rem;
}

.saved-card-row .btn-sm {
  padding: 0.4rem 0.75rem;
  font-size: 0.78rem;
  white-space: nowrap;
}

/* Payment button group */
.payment-buttons {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.payment-buttons .btn {
  padding: 0.85rem 1rem;
}

.checkout-payment-info {
  margin-top: -0.25rem;
  padding: 0.75rem 1rem;
  background: var(--primary-soft);
  border-radius: 0.5rem;
  border: 1px solid var(--border);
}

.checkout-info-text {
  font-size: 0.775rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0;
}

.checkout-info-text + .checkout-info-text {
  margin-top: 0.35rem;
}

.checkout-info-text strong {
  color: var(--text-main);
}

/* Novo design simplificado */
.checkout-simple {
  grid-template-columns: 320px 1fr;
}

.checkout-simple .checkout-summary,
.checkout-simple .checkout-payment {
  padding: 1.25rem;
}

.checkout-payment-simple {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.payment-provider {
  text-align: center;
}

.provider-badge {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(79, 70, 229, 0.1);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
}

.payment-provider h3 {
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
  color: var(--secondary);
}

.payment-provider p {
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.6;
}

.payment-benefits {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.payment-benefits li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.payment-benefits li svg {
  color: var(--success);
  flex-shrink: 0;
}

.spin {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.auth-buttons-checkout {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1rem;
}

.auth-buttons-checkout .btn-outline {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-main);
}

.auth-buttons-checkout .btn-outline:hover {
  background: var(--background);
}

@media (max-width: 900px) {
  .checkout-grid,
  .checkout-simple {
    grid-template-columns: 1fr;
  }

  .success-actions {
    flex-direction: column;
  }

  .success-actions .btn {
    width: 100%;
  }
}

@media (max-width: 768px) {
  .checkout-page {
    padding-top: 0;
    overflow: hidden;
  }

  .checkout-grid {
    gap: 0.75rem;
  }

  .checkout-summary,
  .checkout-payment,
  .checkout-simple .checkout-summary,
  .checkout-simple .checkout-payment {
    padding: 0.85rem;
    border-radius: 0.85rem;
  }

  .page-header {
    margin-bottom: 0.75rem;
  }

  .page-header h1 {
    font-size: 1.1rem;
    margin-bottom: 0.2rem;
  }

  .page-header p {
    font-size: 0.8rem;
  }

  .checkout-summary h3,
  .checkout-payment h3 {
    font-size: 0.88rem;
    margin-bottom: 0.6rem;
  }

  .summary-icon {
    width: 38px;
    height: 38px;
    font-size: 1.15rem;
    border-radius: 0.65rem;
  }

  .summary-service {
    gap: 0.7rem;
    padding-bottom: 0.85rem;
    margin-bottom: 0.85rem;
  }

  .summary-service h4 {
    font-size: 0.88rem;
  }

  .summary-service p {
    font-size: 0.75rem;
  }

  .summary-row {
    padding: 0.5rem 0;
    font-size: 0.85rem;
  }

  .summary-total strong {
    font-size: 1.1rem;
  }

  .entrance-fee-highlight {
    padding: 0.65rem 0.85rem;
    margin: 0.6rem 0;
  }

  .entrance-fee-header strong {
    font-size: 0.82rem;
  }

  .entrance-fee-desc {
    font-size: 0.72rem;
    margin-bottom: 0.25rem;
  }

  .entrance-fee-amount {
    font-size: 1.2rem;
  }

  .payment-flow-steps {
    padding: 0.75rem 0;
    gap: 0.35rem;
  }

  .payment-step span {
    font-size: 0.6rem;
  }

  .step-number {
    width: 26px;
    height: 26px;
    font-size: 0.7rem;
  }

  .payment-step-line {
    width: 24px;
  }

  .provider-badge {
    width: 44px;
    height: 44px;
    margin-bottom: 0.5rem;
  }

  .provider-badge svg {
    width: 22px;
    height: 22px;
  }

  .payment-provider h3 {
    font-size: 0.95rem;
    margin-bottom: 0.25rem;
  }

  .payment-provider p {
    font-size: 0.75rem;
    line-height: 1.4;
  }

  .iopay-processing {
    padding: 1.5rem 0.85rem;
  }

  .processing-animation {
    width: 56px;
    height: 56px;
    margin-bottom: 0.85rem;
  }

  .checkout-rules {
    padding: 0.65rem;
    gap: 0.4rem;
    font-size: 0.75rem;
  }

  .checkout-rules strong {
    font-size: 0.78rem;
  }

  .checkout-rules p {
    font-size: 0.72rem;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .entrance-fee-desc {
    font-size: 0.72rem;
  }

  .cycle-options {
    gap: 0.45rem;
  }

  .cycle-option {
    padding: 0.5rem 0.35rem;
  }

  .cycle-label {
    font-size: 0.75rem;
  }

  .cycle-price {
    font-size: 0.8rem;
  }

  .btn {
    padding: 0.6rem 1rem;
    font-size: 0.85rem;
  }

  .btn-lg {
    padding: 0.7rem 1.25rem;
    font-size: 0.9rem;
  }

  .secure-note {
    font-size: 0.72rem;
    margin-top: 0.5rem;
  }

  .entrance-paid-badge {
    font-size: 0.8rem;
    padding: 0.55rem 0.85rem;
  }

  .deadline-warning {
    padding: 0.75rem;
    gap: 0.5rem;
  }

  .deadline-warning strong {
    font-size: 0.85rem;
  }

  .deadline-warning p {
    font-size: 0.75rem;
  }

  .access-blocked-card {
    padding: 1.5rem 1rem;
  }

  .access-blocked-card h3 {
    font-size: 1.05rem;
  }

  .payment-error-banner {
    font-size: 0.8rem;
    padding: 0.65rem 0.85rem;
    margin-bottom: 0.75rem;
  }
}

/* Extra small mobile */
@media (max-width: 420px) {
  .checkout-simple .checkout-summary,
  .checkout-simple .checkout-payment {
    padding: 0.85rem;
    border-radius: 0.85rem;
  }

  .checkout-summary h3,
  .checkout-payment h3 {
    font-size: 0.88rem;
    margin-bottom: 0.6rem;
  }

  .summary-service {
    gap: 0.75rem;
    padding-bottom: 0.85rem;
    margin-bottom: 0.85rem;
  }

  .summary-icon {
    width: 38px;
    height: 38px;
    font-size: 1.15rem;
  }

  .summary-service h4 {
    font-size: 0.88rem;
  }

  .summary-service p {
    font-size: 0.75rem;
  }

  .summary-row {
    padding: 0.5rem 0;
    font-size: 0.85rem;
  }

  .summary-total {
    font-size: 1rem;
  }

  .summary-total strong {
    font-size: 1.1rem;
  }

  .entrance-fee-highlight {
    padding: 0.6rem 0.85rem;
    margin: 0.5rem 0;
  }

  .entrance-fee-amount {
    font-size: 1.2rem;
  }

  .provider-badge {
    width: 44px;
    height: 44px;
  }

  .payment-provider h3 {
    font-size: 0.9rem;
  }

  .payment-provider p {
    font-size: 0.75rem;
  }

  .btn-verify {
    padding: 0.65rem 1rem;
    font-size: 0.82rem;
  }

  .iopay-processing {
    padding: 1.5rem 0.85rem;
  }

  .iopay-processing h3 {
    font-size: 1rem;
  }

  .iopay-processing p {
    font-size: 0.82rem;
  }

  .processing-animation {
    width: 56px;
    height: 56px;
    margin-bottom: 0.85rem;
  }

  .payment-methods {
    gap: 0.5rem;
  }

  .payment-method {
    padding: 0.75rem;
  }

  .payment-method strong {
    font-size: 0.82rem;
  }

  .payment-method span {
    font-size: 0.7rem;
  }

  .cycle-options {
    gap: 0.5rem;
  }

  .cycle-option {
    padding: 0.55rem 0.35rem;
  }

  .access-blocked-card {
    padding: 1.5rem 1rem;
  }

  .access-blocked-card h3 {
    font-size: 1.05rem;
  }

  .access-blocked-card p {
    font-size: 0.82rem;
  }
}

/* Payment Flow Steps */
.payment-flow-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1.25rem 0;
}

.payment-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  opacity: 0.4;
}

.payment-step.active {
  opacity: 1;
}

.payment-step.completed {
  opacity: 1;
}

.step-number {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-muted);
}

.payment-step.active .step-number {
  border-color: var(--primary);
  color: var(--primary);
  background: rgba(79, 70, 229, 0.1);
}

.payment-step.completed .step-number {
  border-color: #10B981;
  background: #10B981;
  color: white;
}

.payment-step span {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
}

.payment-step.active span {
  color: var(--primary);
}

.payment-step-line {
  width: 40px;
  height: 2px;
  background: var(--border);
  margin-bottom: 1.2rem;
}

.payment-step-line.completed {
  background: #10B981;
}

/* Entrance Paid Badge */
.entrance-paid-badge {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: 0.5rem;
  color: #10B981;
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

/* Deadline Warning */
.deadline-warning {
  display: flex;
  gap: 0.75rem;
  padding: 1rem;
  background: rgba(234, 179, 8, 0.08);
  border: 1px solid rgba(234, 179, 8, 0.3);
  border-radius: 0.5rem;
  margin-bottom: 1rem;
}

.deadline-warning svg {
  color: #EAB308;
  flex-shrink: 0;
  margin-top: 0.1rem;
}

.deadline-warning strong {
  display: block;
  font-size: 0.95rem;
  color: #EAB308;
  margin-bottom: 0.25rem;
}

.deadline-warning p {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin: 0;
}

/* Entrance Row */
.entrance-row {
  color: #EAB308;
}

.entrance-row strong {
  color: #EAB308;
}

/* Access Blocked Card */
.access-blocked-card {
  background: var(--surface);
  border: 1px solid rgba(234, 179, 8, 0.3);
  border-radius: 1rem;
  padding: 2.5rem 2rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.access-blocked-card svg {
  color: #EAB308;
}

.access-blocked-card h3 {
  font-size: 1.25rem;
  color: var(--secondary);
  margin: 0;
}

.access-blocked-card p {
  color: var(--text-muted);
  max-width: 400px;
}

/* Processing card animation */
.iopay-processing {
  text-align: center;
  padding: 2.5rem 1.5rem;
  background: var(--card);
  border: 2px solid var(--primary);
  border-radius: var(--radius-lg);
}

.btn-verify {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s ease;
  background: rgba(79, 70, 229, 0.1);
  color: var(--primary);
  border: 1px solid rgba(79, 70, 229, 0.3);
}

.btn-verify:hover:not(:disabled) {
  background: rgba(79, 70, 229, 0.18);
  border-color: var(--primary);
}

.btn-verify:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.processing-animation {
  width: 80px;
  height: 80px;
  margin: 0 auto 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(79, 70, 229, 0.08);
  color: var(--primary);
}

.processing-animation svg {
  animation: pulse-spin 1.2s ease-in-out infinite;
}

@keyframes pulse-spin {
  0% { transform: rotate(0deg) scale(1); opacity: 1; }
  50% { transform: rotate(180deg) scale(1.15); opacity: 0.7; }
  100% { transform: rotate(360deg) scale(1); opacity: 1; }
}

.iopay-processing h3 {
  font-size: 1.2rem;
  color: var(--secondary);
  margin: 0 0 0.5rem;
}

.iopay-processing p {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin: 0;
}

/* Coupon in Checkout */
.coupon-checkout-section {
  margin: 0.5rem 0;
}

/* Testimonial reward auto-applied notice */
.testimonial-reward-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 0.85rem;
  border-radius: 0.6rem;
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.25);
  margin-bottom: 0.5rem;
  font-size: 0.85rem;
  color: #10B981;
}

.testimonial-reward-notice .reward-amount {
  font-weight: 700;
  font-size: 0.95rem;
}

/* ── Campo de CPF (Pix Automático da Woovi) ───────────────────────────────
   A Woovi só cria a assinatura recorrente de um cliente que ela resolva
   pelo CPF (taxID). Sem ele, o backend responde 400 `cpf_required` e o
   campo aparece no lugar do botão de pagamento. */
.checkout-cpf-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 1rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--border);
  border-radius: 0.6rem;
  background: rgba(14, 165, 233, 0.05);
  text-align: left;
}

.checkout-cpf-field label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--secondary);
}

.checkout-cpf-field input {
  width: 100%;
  max-width: 230px;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 0.4rem;
  background: var(--surface);
  color: var(--text-main);
  font-family: inherit;
  font-size: 1rem;
  letter-spacing: 0.04em;
}

.checkout-cpf-field input:focus {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}

.checkout-cpf-field input[aria-invalid="true"] {
  border-color: #ef4444;
}

.checkout-cpf-hint {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.5;
}

.checkout-cpf-erro {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.78rem;
  color: #ef4444;
  margin: 0;
}

.coupon-input-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.4rem 0.5rem;
  background: var(--surface);
}

.coupon-input-row svg {
  color: var(--primary, #4F46E5);
  flex-shrink: 0;
}

.coupon-input-row input {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 0.82rem;
  font-family: monospace;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  outline: none;
  min-width: 0;
}

.coupon-input-row input::placeholder {
  color: var(--text-muted);
  text-transform: none;
  font-family: inherit;
  font-weight: 400;
}

.coupon-apply-btn {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--primary, #4F46E5);
  border-radius: 4px;
  background: transparent;
  color: var(--primary, #4F46E5);
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.coupon-apply-btn:hover:not(:disabled) {
  background: var(--primary, #4F46E5);
  color: white;
}

.coupon-apply-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.coupon-applied {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.6rem;
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: var(--radius-sm);
  background: rgba(16, 185, 129, 0.06);
  font-size: 0.82rem;
}

.coupon-applied svg {
  color: var(--success, #10B981);
  flex-shrink: 0;
}

.coupon-applied-code {
  font-family: monospace;
  font-weight: 700;
  color: var(--success, #10B981);
}

.coupon-applied-discount {
  font-weight: 700;
  color: var(--success, #10B981);
  margin-left: auto;
}

.coupon-remove-btn {
  display: flex;
  padding: 0.15rem;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 4px;
}

.coupon-remove-btn:hover {
  color: var(--danger, #EF4444);
  background: rgba(239, 68, 68, 0.1);
}

.coupon-checkout-error {
  font-size: 0.75rem;
  color: var(--danger, #EF4444);
  margin: 0.3rem 0 0;
  padding-left: 0.25rem;
}

.coupon-min-warning {
  font-size: 0.73rem;
  color: var(--warning, #F59E0B);
  margin: 0.3rem 0 0;
  padding-left: 0.25rem;
  font-weight: 600;
}

.original-price {
  text-decoration: line-through;
  opacity: 0.5;
  font-size: 0.85em;
  font-weight: 400;
}

.discounted-price {
  color: var(--success, #10B981);
  font-weight: 800;
}
.checkout-link-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--background);
  padding: 1rem;
}

.checkout-link-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 1rem;
  padding: 2rem;
  max-width: 420px;
  width: 100%;
  text-align: center;
}

.cl-success-card { padding: 3rem 2rem; }

.checkout-link-card h2 {
  margin: 1rem 0 0.5rem;
  color: var(--text-main);
}

.checkout-link-card p {
  color: var(--text-muted);
  margin: 0.25rem 0;
}

.checkout-link-header { margin-bottom: 0.5rem; }
.checkout-link-header h1 {
  font-size: 1.5rem;
  color: var(--primary);
  margin: 0.5rem 0 0.25rem;
}
.checkout-link-header p {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin: 0;
}

.cl-logo-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), #6366f1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.checkout-link-amount {
  margin: 1.5rem 0;
  padding: 1rem;
  background: var(--background);
  border-radius: 0.75rem;
}
.checkout-link-amount span {
  display: block;
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 0.25rem;
}
.checkout-link-amount strong {
  font-size: 2rem;
  color: var(--text-main);
}

.checkout-link-expiry {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 1rem;
}

/* METHOD SELECTION */
.cl-select-method {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-top: 0.5rem;
}
.cl-select-label {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-bottom: 0.25rem;
}
.cl-method-btn {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.85rem 1rem;
  background: var(--surface, var(--card-bg));
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  cursor: pointer;
  transition: all 0.2s;
  color: var(--text-main);
  text-align: left;
}
.cl-method-btn:hover:not(:disabled) {
  border-color: var(--primary);
  background: rgba(79, 70, 229, 0.05);
}
.cl-method-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.cl-method-btn svg:first-child { color: var(--primary); flex-shrink: 0; }
.cl-method-info { flex: 1; display: flex; flex-direction: column; }
.cl-method-name { font-size: 0.9rem; font-weight: 700; }
.cl-method-desc { font-size: 0.72rem; color: var(--text-muted); }
.cl-method-arrow { color: var(--text-muted); flex-shrink: 0; }

/* PROCESSING */
.cl-processing {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 2rem 0;
  color: var(--text-muted);
}

/* CARD SECTION */
.cl-card-section {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 0.5rem;
  text-align: left;
}
.cl-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 0.8rem;
  cursor: pointer;
  padding: 0;
  align-self: flex-start;
}
.cl-back-btn:hover { color: var(--text-main); }
.cl-card-error {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 0.75rem;
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: 0.5rem;
  color: var(--danger, #EF4444);
  font-size: 0.8rem;
}

/* PIX */
.checkout-link-pix {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.pix-qr-wrapper {
  background: #FFFFFF;
  padding: 12px;
  border-radius: 0.75rem;
  display: inline-block;
}
.pix-qr-img { max-width: 200px; display: block; }
.pix-instruction { font-size: 0.85rem; color: var(--text-muted); margin: 0; }
.pix-copy-box {
  width: 100%;
  background: var(--background);
  border: 1px dashed var(--border);
  border-radius: 0.5rem;
  padding: 0.75rem;
  word-break: break-all;
  font-family: monospace;
  font-size: 0.75rem;
  color: var(--text-main);
  text-align: left;
}
.pix-loading { font-size: 0.8rem; color: var(--text-muted); }
.cl-copy-btn { margin-top: 0; }

.checkout-link-polling {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 0.5rem;
}

.checkout-link-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  margin-top: 1.5rem;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.success-animation { animation: successPop 0.5s ease-out; }
.cl-success-desc { color: var(--text-muted); font-size: 0.85rem; }
.cl-error-icon { margin-bottom: 0.5rem; }

@keyframes successPop {
  0% { transform: scale(0); opacity: 0; }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); opacity: 1; }
}

@media (max-width: 480px) {
  .checkout-link-card { padding: 1.5rem; }
  .checkout-link-amount strong { font-size: 1.6rem; }
  .pix-qr-img { max-width: 160px; }
}
.group-chat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 1rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 420px;
}

.group-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1.15rem;
  border-bottom: 1px solid var(--border);
}

.group-chat-header h3 {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--secondary);
  margin: 0;
}

.group-chat-count {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.group-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  min-height: 120px;
  max-height: 280px;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

.group-chat-messages::-webkit-scrollbar {
  width: 4px;
}

.group-chat-messages::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 2px;
}

.group-chat-empty {
  text-align: center;
  padding: 1.5rem 0;
}

.group-chat-empty p {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin: 0;
}

.group-chat-msg {
  display: flex;
  gap: 0.5rem;
  max-width: 85%;
}

.group-chat-msg.mine {
  margin-left: auto;
  flex-direction: row-reverse;
}

.group-chat-msg-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.15rem;
}

.group-chat-msg-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.group-chat-msg-avatar span {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text-muted);
}

.group-chat-msg-content {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.group-chat-msg-name {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-muted);
  padding-left: 0.5rem;
}

.group-chat-msg.mine .group-chat-msg-name {
  text-align: right;
  padding-right: 0.5rem;
  padding-left: 0;
}

.group-chat-msg-bubble {
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: 0.85rem;
  padding: 0.5rem 0.75rem;
}

.group-chat-msg.mine .group-chat-msg-bubble {
  background: var(--primary);
  border-color: var(--primary);
}

.group-chat-msg-bubble p {
  font-size: 0.85rem;
  color: var(--text-main);
  margin: 0;
  line-height: 1.4;
  word-break: break-word;
}

.group-chat-msg.mine .group-chat-msg-bubble p {
  color: white;
}

.group-chat-msg-time {
  font-size: 0.65rem;
  color: var(--text-soft);
  padding: 0 0.5rem;
}

.group-chat-msg.mine .group-chat-msg-time {
  text-align: right;
}

.group-chat-input {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.75rem;
  border-top: 1px solid var(--border);
}

.group-chat-input input {
  flex: 1;
  border: 1px solid var(--border);
  border-radius: 2rem;
  padding: 0.5rem 0.85rem;
  font-size: 0.85rem;
  background: var(--background);
  color: var(--text-main);
  outline: none;
  transition: border-color 0.2s;
}

.group-chat-input input:focus {
  border-color: var(--primary);
}

.group-chat-input button {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: var(--primary);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: filter 0.2s;
  flex-shrink: 0;
}

.group-chat-input button:hover:not(:disabled) {
  filter: brightness(1.1);
}

.group-chat-input button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.group-chat-error {
  padding: 0.4rem 0.75rem;
  font-size: 0.75rem;
  color: var(--danger, #EF4444);
  background: rgba(239, 68, 68, 0.1);
  border-top: 1px solid rgba(239, 68, 68, 0.2);
}

.spin {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@media (max-width: 768px) {
  .group-chat {
    max-height: 350px;
  }

  .group-chat-messages {
    max-height: 220px;
  }
}
.contact-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 1rem;
  animation: fadeIn 0.2s ease-out;
}

.contact-modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 1rem;
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  animation: slideUp 0.3s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.contact-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--border);
}

.contact-modal-header h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--secondary);
  margin: 0 0 0.2rem;
}

.contact-modal-header p {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin: 0;
}

.contact-modal-close {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 0.375rem;
  transition: all 0.2s;
}

.contact-modal-close:hover {
  background: var(--border);
  color: var(--secondary);
}

.contact-modal-form {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.contact-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.contact-field label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-muted);
}

.contact-field select,
.contact-field textarea {
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  padding: 0.7rem 0.85rem;
  font-size: 0.9rem;
  color: var(--secondary);
  font-family: inherit;
  resize: vertical;
  transition: border-color 0.2s;
}

.contact-field select:focus,
.contact-field textarea:focus {
  outline: none;
  border-color: var(--primary);
}

.contact-field select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  padding-right: 2rem;
}

.contact-char-count {
  font-size: 0.72rem;
  color: var(--text-muted);
  text-align: right;
}

.contact-error {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 0.85rem;
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: 0.5rem;
  font-size: 0.82rem;
  color: #EF4444;
}

.contact-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
  padding-top: 0.5rem;
}

.contact-actions .btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 1.2rem;
  font-size: 0.85rem;
  font-weight: 600;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.2s;
}

.contact-actions .btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.contact-modal-success {
  padding: 2.5rem 1.5rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.contact-modal-success svg {
  color: #10B981;
}

.contact-modal-success h4 {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--secondary);
  margin: 0;
}

.contact-modal-success p {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.5;
}

.contact-success-note {
  font-size: 0.8rem !important;
  color: var(--text-muted);
  margin-top: 0.5rem !important;
}

@media (max-width: 480px) {
  .contact-modal {
    max-width: 100%;
    margin: 0.5rem;
    max-height: 95vh;
  }

  .contact-modal-header {
    padding: 1rem;
  }

  .contact-modal-form {
    padding: 1rem;
  }

  .contact-actions {
    flex-direction: column;
  }

  .contact-actions .btn {
    justify-content: center;
  }
}
/* ============================================================
   Busca de código de acesso por e-mail
   Usado pelo componente `EmailCodeSearch`:
     - tela de credenciais do membro (ServiceCredentials)
     - tela "Gerenciar Grupo" (ManageGroup)
   ============================================================ */

.verification-code-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 1rem;
  padding: 1.5rem;
  margin-top: 1.5rem;
  border-left: 4px solid #0EA5E9;
}

.verification-code-header {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.verification-code-header svg {
  color: #0EA5E9;
  flex-shrink: 0;
  margin-top: 0.15rem;
}

.verification-code-header h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--secondary);
  margin: 0 0 0.25rem;
}

.verification-code-header p {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.5;
}

.fetch-code-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  justify-content: center;
  margin-bottom: 1rem;
}

.fetch-code-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.verification-code-result {
  background: var(--background);
  border: 1px solid rgba(14, 165, 233, 0.3);
  border-radius: 0.75rem;
  padding: 1rem;
}

.sensitive-warning {
  border-color: rgba(234, 88, 12, 0.4);
  background: rgba(234, 88, 12, 0.05);
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
}

.sensitive-icon {
  color: #EA580C;
  flex-shrink: 0;
  margin-top: 2px;
}

.sensitive-content {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.sensitive-label {
  font-weight: 600;
  color: #EA580C;
  font-size: 0.85rem;
}

.sensitive-message {
  font-size: 0.82rem;
  color: var(--text);
  line-height: 1.4;
}

.sensitive-meta {
  font-size: 0.82rem;
  color: var(--text-muted);
}

.code-display {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border);
}

.code-value {
  font-family: 'Courier New', Courier, monospace;
  font-size: 1.75rem;
  font-weight: 700;
  color: #0EA5E9;
  letter-spacing: 0.15em;
}

.code-meta {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.code-meta strong {
  color: var(--secondary);
}

.code-timestamp {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.25rem;
}

.verification-code-empty {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: rgba(234, 179, 8, 0.08);
  border: 1px solid rgba(234, 179, 8, 0.2);
  border-radius: 0.5rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.verification-code-empty svg {
  color: #EAB308;
  flex-shrink: 0;
}

.email-delay-warning {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-align: center;
  margin: 0.5rem 0 0;
  line-height: 1.5;
}

.contact-admin-link {
  background: none;
  border: none;
  color: var(--primary);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
  transition: color 0.2s;
}

.contact-admin-link:hover {
  color: var(--primary);
  text-decoration: underline;
}

/* Card de ação manual (Netflix / link que precisa ser clicado) */
.manual-action-card {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  background: rgba(229, 9, 20, 0.05);
  border: 1px solid rgba(229, 9, 20, 0.3);
  border-radius: 0.75rem;
  padding: 1.25rem;
  margin-top: 0.75rem;
}

.manual-action-content {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}

/* Detalhes do pedido: quem pediu, em qual aparelho e quando */
.manual-action-details {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  padding: 0.75rem 0.875rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.5rem;
}

.manual-action-detail {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  font-size: 0.85rem;
  color: var(--text);
}

.manual-action-detail-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.manual-action-title {
  font-weight: 700;
  font-size: 1rem;
  color: var(--secondary);
}

.manual-action-desc {
  font-size: 0.875rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.manual-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  font-size: 0.9rem;
  border-radius: 0.5rem;
  text-decoration: none;
  width: fit-content;
}

.manual-action-hint {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.4;
}

/* ── Variante embutida ──────────────────────────────────────
   Dentro de um `manage-card` o bloco não repete borda nem
   padding: o card externo já cuida do enquadramento.
   ─────────────────────────────────────────────────────────── */
.verification-code-section.email-code-search--embedded {
  background: transparent;
  border: none;
  border-left: none;
  border-radius: 0;
  padding: 0;
  margin-top: 0;
}

@media (max-width: 768px) {
  .verification-code-section {
    padding: 1rem;
  }

  .code-value {
    font-size: 1.3rem;
  }
}
/* =============================================================
   CARD — E-MAIL GERENCIADO PELA DIVIDEPASS
   Aparece na tela do membro (ServiceCredentials) e na tela do
   dono (ManageGroup). Mostra o e-mail do grupo, o passo a passo
   para trocar o e-mail da conta da plataforma e o botao de criar
   a caixa (quando o dono pode).
   ============================================================= */

.managed-email-card {
  margin: 1.25rem 0 0;
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-soft);
}

.managed-email-head {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  margin-bottom: 0.9rem;
}

.managed-email-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
}

.managed-email-head h3 {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
  margin: 0 0 0.15rem;
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--text-main);
}

.managed-email-tag {
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  background: var(--economy-bg, rgba(16, 185, 129, 0.14));
  color: var(--success, #10B981);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.managed-email-head p {
  margin: 0;
  font-size: 0.83rem;
  line-height: 1.45;
  color: var(--text-muted);
}

/* ------------------------------------------------------- endereco */
.managed-email-address {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.75rem;
  margin-bottom: 0.9rem;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-muted);
}

.managed-email-address code {
  flex: 1;
  min-width: 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-main);
  word-break: break-all;
}

.managed-email-copy {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: var(--radius-xs);
  background: var(--surface-soft);
  color: var(--text-main);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.managed-email-copy:hover {
  background: var(--primary);
  color: #fff;
}

/* --------------------------------------------------------- passos */
.managed-email-steps {
  margin: 0 0 0.85rem;
  padding-left: 1.15rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--text-muted);
}

.managed-email-steps strong { color: var(--text-main); }

.managed-email-foot {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
  font-size: 0.77rem;
  color: var(--text-soft);
}

/* --------------------------------------------------------- acoes */
.managed-email-intro {
  margin: 0 0 0.85rem;
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--text-muted);
}

.managed-email-create { width: 100%; justify-content: center; }

.managed-email-toggle-manual {
  display: block;
  margin: 0.7rem auto 0;
  background: none;
  border: none;
  padding: 0;
  color: var(--text-muted);
  font-size: 0.8rem;
  text-decoration: underline;
  cursor: pointer;
}

.managed-email-toggle-manual:hover { color: var(--text-main); }

.managed-email-manual {
  margin-top: 0.9rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--border);
}

.managed-email-manual-title {
  margin: 0 0 0.7rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-main);
}

.managed-email-label {
  display: block;
  margin-bottom: 0.65rem;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.managed-email-label input {
  display: block;
  width: 100%;
  margin-top: 0.3rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background: var(--surface);
  color: var(--text-main);
  font-size: 0.86rem;
}

.managed-email-label input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--ring);
}

.managed-email-error {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.85rem 0 0;
  font-size: 0.8rem;
  color: var(--error);
}
.credentials-page {
  animation: slideUpFade 0.4s ease-out forwards;
}

@keyframes slideUpFade {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.page-header {
  margin-bottom: 2rem;
}

.page-header h1 {
  font-size: 1.75rem;
  margin-bottom: 0.5rem;
  color: var(--secondary);
}

.page-header p {
  color: var(--text-muted);
}

.back-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--text-muted);
  background: none;
  border: none;
  font-size: 0.9rem;
  cursor: pointer;
  margin-bottom: 1rem;
  padding: 0;
  transition: color 0.2s;
}

.back-btn:hover {
  color: var(--primary);
}

.empty-state,
.access-denied {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 1rem;
  padding: 3rem 1.5rem;
  text-align: center;
  max-width: 520px;
  margin: 2rem auto;
}

.empty-state h2,
.access-denied h2 {
  color: var(--secondary);
  margin-bottom: 0.75rem;
}

.empty-state p,
.access-denied p {
  color: var(--text-muted);
  margin-bottom: 1.5rem;
  line-height: 1.6;
}

.access-denied svg {
  color: var(--warning);
  margin-bottom: 1rem;
}

/* Credential Card */
.credential-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.05);
  border-left: 4px solid var(--service-color);
}

.credential-header {
  padding: 1.5rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
  gap: 1rem;
}

.credential-service {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.credential-icon {
  width: 56px;
  height: 56px;
  border-radius: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  font-weight: 800;
  color: white;
  overflow: hidden;
  flex-shrink: 0;
}

.credential-icon-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 1rem;
}

.credential-header h2 {
  font-size: 1.5rem;
  margin: 0 0 0.25rem;
}

.credential-subtitle {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.modal-group-name {
  font-size: 0.85rem;
  color: var(--text-muted);
  font-weight: 500;
}

.credential-description {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.credential-site-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.8rem;
  color: var(--primary);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s;
}

.credential-site-link:hover {
  color: var(--primary);
  text-decoration: underline;
}

.profile-badge {
  display: inline-block;
  background: var(--surface);
  padding: 0.4rem 1rem;
  border-radius: 2rem;
  font-size: 0.875rem;
  font-weight: 600;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  margin-top: 0.35rem;
}

.credential-header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.access-credentials-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  white-space: nowrap;
}

.chat-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  white-space: nowrap;
}

.chat-toggle-btn.active {
  background: var(--primary);
  color: white;
}

[data-theme="light"] .chat-toggle-btn {
  background: var(--background);
  color: var(--text);
  border-color: var(--border);
}

[data-theme="light"] .chat-toggle-btn.active {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}

.credential-body {
  padding: 1.5rem 2rem;
}

/* Rules Highlight */
.credential-rules-highlight {
  background: linear-gradient(135deg, rgba(79, 70, 229, 0.06), rgba(79, 70, 229, 0.02));
  border: 1px solid rgba(79, 70, 229, 0.2);
  border-left: 4px solid var(--primary);
  border-radius: 0.75rem;
  padding: 1.25rem;
  margin-bottom: 1.25rem;
}

.rules-highlight-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  color: var(--primary);
}

.rules-highlight-header strong {
  font-size: 0.95rem;
  color: var(--secondary);
}

.credential-rules-highlight p {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0;
}

/* Inline Credential Viewer */
.credential-inline-viewer {
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  padding: 1.25rem;
  margin-bottom: 1.25rem;
  animation: slideUpFade 0.3s ease-out;
}

.credential-inline-viewer .cred-section h3 {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--secondary);
  margin-bottom: 0.75rem;
}

.credential-inline-viewer .cred-section h3 svg {
  color: var(--primary);
}

.credentials-inline-footer {
  text-align: center;
  padding-top: 1rem;
  border-top: 1px dashed var(--border);
  margin-top: 0.5rem;
}

.credentials-inline-footer p {
  font-size: 0.82rem;
  color: var(--text-muted);
  font-style: italic;
  margin: 0;
}

/* No credentials state */
.no-credentials {
  text-align: center;
  padding: 1.5rem 1rem;
  color: var(--text-muted);
}

.no-credentials svg {
  margin-bottom: 0.75rem;
  color: var(--warning);
}

.no-credentials p {
  margin: 0 0 0.5rem;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.no-credentials-hint {
  font-size: 0.82rem !important;
  color: var(--text-muted) !important;
  max-width: 460px;
  margin: 0 auto 1rem !important;
  line-height: 1.5;
}

.no-credentials-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
}

/* Credential fields */
.cred-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 0.75rem;
}

.cred-field:last-child {
  margin-bottom: 0;
}

.cred-field label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
}

.cred-field-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--surface);
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  border: 1px solid var(--border);
}

.cred-field-box code {
  font-family: 'Courier New', Courier, monospace;
  font-size: 1rem;
  color: var(--secondary);
  word-break: break-all;
  line-height: 1.4;
}

.cred-actions {
  display: flex;
  gap: 0.25rem;
  flex-shrink: 0;
}

.cred-action-btn {
  width: 34px;
  height: 34px;
  border-radius: 0.375rem;
  border: none;
  background: transparent;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
}

.cred-action-btn:hover {
  background: var(--border);
  color: var(--primary);
}

.cred-profile-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  padding: 1rem;
}

.cred-profile-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border);
}

.cred-profile-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.cred-profile-header h4 {
  font-size: 0.9rem;
  font-weight: 600;
  margin: 0;
}

/* Meta Grid */
.credential-meta-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}

.credential-meta-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--background);
  padding: 1rem;
  border-radius: 0.75rem;
  border: 1px solid var(--border);
}

.credential-meta-item svg {
  color: var(--primary);
  flex-shrink: 0;
}

.credential-meta-item span {
  display: block;
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 0.15rem;
}

.credential-meta-item strong {
  color: var(--secondary);
  font-size: 0.95rem;
}

/* Actions Row */
.credential-actions-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}

.manage-sub-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: var(--text-main);
  background: var(--surface);
}

[data-theme="light"] .manage-sub-btn {
  color: #0F172A;
  background: #FFFFFF;
  border-color: #CBD5E1;
}

.cancel-text-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: none;
  border: none;
  color: #EF4444;
  font-size: 0.82rem;
  cursor: pointer;
  padding: 0.4rem 0.6rem;
  border-radius: 0.375rem;
  transition: all 0.2s;
  opacity: 0.7;
}

.cancel-text-btn:hover {
  opacity: 1;
  background: rgba(239, 68, 68, 0.08);
}

.cancel-text-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Verification Code Section */
.verification-code-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 1rem;
  padding: 1.5rem;
  margin-top: 1.5rem;
  border-left: 4px solid #0EA5E9;
}

.verification-code-header {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.verification-code-header svg {
  color: #0EA5E9;
  flex-shrink: 0;
  margin-top: 0.15rem;
}

.verification-code-header h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--secondary);
  margin: 0 0 0.25rem;
}

.verification-code-header p {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.5;
}

.fetch-code-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  justify-content: center;
  margin-bottom: 1rem;
}

.fetch-code-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.verification-code-result {
  background: var(--background);
  border: 1px solid rgba(14, 165, 233, 0.3);
  border-radius: 0.75rem;
  padding: 1rem;
}

.sensitive-warning {
  border-color: rgba(234, 88, 12, 0.4);
  background: rgba(234, 88, 12, 0.05);
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
}

.sensitive-icon {
  color: #EA580C;
  flex-shrink: 0;
  margin-top: 2px;
}

.sensitive-content {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.sensitive-label {
  font-weight: 600;
  color: #EA580C;
  font-size: 0.85rem;
}

.sensitive-message {
  font-size: 0.82rem;
  color: var(--text);
  line-height: 1.4;
}

.sensitive-meta {
  font-size: 0.82rem;
  color: var(--text-muted);
}

.code-display {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border);
}

.code-value {
  font-family: 'Courier New', Courier, monospace;
  font-size: 1.75rem;
  font-weight: 700;
  color: #0EA5E9;
  letter-spacing: 0.15em;
}

.code-meta {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.code-meta strong {
  color: var(--secondary);
}

.code-timestamp {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.25rem;
}

.verification-code-empty {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: rgba(234, 179, 8, 0.08);
  border: 1px solid rgba(234, 179, 8, 0.2);
  border-radius: 0.5rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.verification-code-empty svg {
  color: #EAB308;
  flex-shrink: 0;
}

.email-delay-warning {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-align: center;
  margin: 0.5rem 0 0;
  line-height: 1.5;
}

.contact-admin-link {
  background: none;
  border: none;
  color: var(--primary);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
  transition: color 0.2s;
}

/* Contato do dono — grupo em que o CODIGO DE CONFIRMAÇÃO e repassado na mao.
   Sem busca automatica, o membro precisa de um caminho para falar com o dono. */
.owner-contact-card {
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.owner-contact-title {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-main);
}

.owner-contact-title svg { color: var(--primary); }

.owner-contact-text {
  margin: 0.5rem 0 0;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--text-muted);
}

.owner-contact-value {
  display: inline-block;
  margin-top: 0.7rem;
  padding: 0.55rem 0.9rem;
  border-radius: var(--radius-sm);
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
  word-break: break-all;
}

.owner-contact-button {
  margin-top: 0.85rem;
  background: none;
  border: none;
  padding: 0;
  color: var(--primary);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
}

.contact-admin-link:hover {
  color: var(--primary);
  text-decoration: underline;
}

.spin {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@media (max-width: 768px) {
  .credential-header {
    flex-direction: column;
    align-items: flex-start;
    padding: 1.25rem;
  }

  .credential-header-actions {
    width: 100%;
  }

  .access-credentials-btn,
  .chat-toggle-btn {
    flex: 1;
    justify-content: center;
    min-width: 0;
    font-size: 0.78rem;
    padding: 0.5rem 0.5rem;
    gap: 0;
  }

  .access-credentials-btn svg,
  .chat-toggle-btn svg {
    display: none;
  }

  .credential-body {
    padding: 1rem;
  }

  .credential-meta-grid {
    grid-template-columns: 1fr;
  }

  .credential-actions-row {
    flex-direction: column;
    gap: 0.75rem;
    align-items: stretch;
  }

  .manage-sub-btn {
    justify-content: center;
  }

  .cancel-text-btn {
    justify-content: center;
  }

  .verification-code-section {
    padding: 1rem;
  }

  .code-value {
    font-size: 1.3rem;
  }
}

/* Card de ação manual (Netflix / link que precisa ser clicado) */
.manual-action-card {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  background: rgba(229, 9, 20, 0.05);
  border: 1px solid rgba(229, 9, 20, 0.3);
  border-radius: 0.75rem;
  padding: 1.25rem;
  margin-top: 0.75rem;
}

.manual-action-content {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}

/* Detalhes do pedido: quem pediu, em qual aparelho e quando */
.manual-action-details {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  padding: 0.75rem 0.875rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.5rem;
}

.manual-action-detail {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  font-size: 0.85rem;
  color: var(--text);
}

.manual-action-detail-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.manual-action-title {
  font-weight: 700;
  font-size: 1rem;
  color: var(--secondary);
}

.manual-action-desc {
  font-size: 0.875rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.manual-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  font-size: 0.9rem;
  border-radius: 0.5rem;
  text-decoration: none;
  width: fit-content;
}

.manual-action-hint {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.4;
}

/* ── Estado da assinatura ────────────────────────────────────────────────── */

/* Etiqueta ao lado da data de renovação. */
.access-status-tag {
  display: inline-block;
  margin-top: 0.25rem;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  background: rgba(239, 68, 68, 0.16);
  color: #fca5a5;
  font-size: 0.64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  width: fit-content;
}

.access-status-tag.is-active {
  background: rgba(16, 185, 129, 0.14);
  color: #6ee7b7;
}

.access-status-tag.is-overdue {
  background: rgba(245, 158, 11, 0.16);
  color: #fcd34d;
}

.access-status-tag.is-pending {
  background: rgba(14, 165, 233, 0.16);
  color: #7dd3fc;
}

.access-denied-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}
.support-page {
  max-width: 800px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  gap: 1rem;
  flex-wrap: wrap;
}

.page-header-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.page-header-left svg {
  color: var(--primary);
}

.page-header-left h1 {
  font-size: 1.5rem;
  margin: 0;
}

.page-header-left p {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin: 0;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 3rem 1rem;
  text-align: center;
  color: var(--text-muted);
}

.empty-state svg {
  opacity: 0.3;
}

.empty-state h3 {
  margin: 0;
  color: var(--secondary);
}

.empty-state p {
  margin: 0;
  font-size: 0.9rem;
}

.tickets-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.ticket-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.25rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s, transform 0.2s;
}

.ticket-card:hover {
  border-color: var(--primary);
  transform: translateY(-1px);
}

.ticket-card-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.ticket-icon {
  width: 40px;
  height: 40px;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ticket-info {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.ticket-info h3 {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--secondary);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ticket-category {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.ticket-date {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.ticket-card-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
  margin-left: 1rem;
}

.ticket-status-badge {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.2rem 0.6rem;
  border-radius: 1rem;
  white-space: nowrap;
}

.ticket-msg-count {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* Create Ticket */
.create-ticket-page {
  max-width: 600px;
}

.form-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 1rem;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.form-card .form-group {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.form-card label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
}

.form-card input,
.form-card select,
.form-card textarea {
  padding: 0.75rem 1rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  font-size: 0.95rem;
  background: var(--background);
  color: var(--text-main);
  outline: none;
  font-family: inherit;
}

.form-card input:focus,
.form-card select:focus,
.form-card textarea:focus {
  border-color: var(--primary);
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  padding-top: 0.5rem;
}

/* Ticket Detail */
.ticket-detail-page {
  max-width: 700px;
}

.ticket-detail-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.ticket-detail-header h1 {
  font-size: 1.3rem;
  margin: 0;
}

.ticket-detail-meta {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.messages-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.message-bubble {
  padding: 1rem 1.25rem;
  border-radius: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.message-bubble.user {
  background: var(--surface);
  border: 1px solid var(--border);
}

.message-bubble.admin {
  background: rgba(79, 70, 229, 0.06);
  border: 1px solid rgba(79, 70, 229, 0.15);
}

.message-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.message-header strong {
  color: var(--secondary);
}

.message-body {
  font-size: 0.9rem;
  line-height: 1.5;
  white-space: pre-wrap;
}

.reply-form {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 1rem;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.reply-form textarea {
  width: 100%;
  min-height: 100px;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  font-size: 0.95rem;
  background: var(--background);
  color: var(--text-main);
  outline: none;
  resize: vertical;
  font-family: inherit;
}

.reply-form textarea:focus {
  border-color: var(--primary);
}

.reply-form-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
}

.reply-image-btn {
  width: 36px;
  height: 36px;
  border-radius: 0.5rem;
  border: 1px solid var(--border);
  background: var(--background);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
}

.reply-image-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: rgba(79, 70, 229, 0.05);
}

.image-preview-box {
  position: relative;
  display: inline-block;
  border-radius: 0.75rem;
  overflow: hidden;
  border: 1px solid var(--border);
}

.image-preview-box img {
  max-width: 250px;
  max-height: 180px;
  display: block;
  object-fit: cover;
  border-radius: 0.75rem;
}

.remove-image-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s;
}

.remove-image-btn:hover {
  background: rgba(239, 68, 68, 0.8);
}

.image-upload-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 1.5rem;
  border: 2px dashed var(--border);
  border-radius: 0.75rem;
  background: var(--background);
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
}

.image-upload-area:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: rgba(79, 70, 229, 0.03);
}

.image-upload-area span {
  font-size: 0.9rem;
  font-weight: 500;
}

.image-upload-area small {
  font-size: 0.78rem;
  opacity: 0.7;
}

.message-image {
  display: block;
  margin-top: 0.5rem;
}

.message-image img {
  max-width: 300px;
  max-height: 220px;
  border-radius: 0.5rem;
  object-fit: cover;
  border: 1px solid var(--border);
  cursor: pointer;
  transition: transform 0.2s;
}

.message-image img:hover {
  transform: scale(1.02);
}

@media (max-width: 768px) {
  .page-header {
    flex-direction: column;
    align-items: stretch;
  }

  .ticket-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  .ticket-card-right {
    margin-left: 0;
  }
}

.form-hint {
  display: block;
  margin-top: 6px;
  font-size: 0.82rem;
  line-height: 1.4;
  opacity: 0.7;
}

.form-hint.critical-hint {
  color: var(--danger, #ef4444);
  opacity: 1;
  font-weight: 600;
}

.ticket-priority-badge {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
}

.ticket-archived-banner {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding: 0.7rem 1rem;
  border-radius: var(--radius-sm, 0.5rem);
  background: rgba(107, 114, 128, 0.12);
  border: 1px solid var(--border);
  color: var(--text-muted, #94a3b8);
  font-size: 0.85rem;
  line-height: 1.4;
}
.share-page {
  animation: slideUpFade 0.4s ease-out forwards;
}

@keyframes slideUpFade {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.share-page .page-header {
  margin-bottom: 2rem;
}

.share-page .page-header h1 {
  font-size: 1.75rem;
  margin-bottom: 0.5rem;
  color: var(--secondary);
}

.share-page .page-header p {
  color: var(--text-muted);
}

/* Referral Code Card */
.referral-code-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 1.25rem;
  padding: 2rem;
  margin-bottom: 2.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

.referral-code-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--primary);
}

.referral-code-header h2 {
  font-size: 1.2rem;
  color: var(--secondary);
  margin: 0;
}

.code-display {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--background);
  border: 2px dashed var(--border-strong);
  border-radius: var(--radius-md);
  padding: 1rem 1.5rem;
  min-width: 280px;
}

.code-text {
  flex: 1;
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--primary);
  text-align: center;
}

.copy-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-xs);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  transition: all 0.2s ease;
  flex-shrink: 0;
  cursor: pointer;
}

.copy-btn:hover {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}

.copy-btn-sm {
  width: 34px;
  height: 34px;
}

.share-link-box {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  padding: 0.75rem 1rem;
  width: 100%;
  max-width: 500px;
}

.share-link-icon {
  color: var(--text-muted);
  flex-shrink: 0;
}

.share-link-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
}

.share-link-text {
  flex: 1;
  font-size: 0.8rem;
  color: var(--secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.share-main-btn {
  padding: 0.75rem 2rem;
  font-size: 0.95rem;
}

/* Points Info Inline (inside referral code card) */
.points-info-inline {
  width: 100%;
  border-top: 1px solid var(--border);
  padding-top: 1.5rem;
  margin-top: 0.5rem;
}

.points-info-inline .points-info-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  color: var(--primary);
}

.points-info-inline .points-info-header h3 {
  font-size: 1rem;
  color: var(--secondary);
  margin: 0;
}

.points-info-inline .points-rules {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.points-info-inline .points-rules li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.points-info-inline .points-rule-value {
  background: rgba(79, 70, 229, 0.08);
  color: var(--primary);
  font-weight: 700;
  padding: 0.25rem 0.6rem;
  border-radius: 0.5rem;
  font-size: 0.8rem;
  white-space: nowrap;
}

/* Share by Group */
.share-groups-section {
  margin-bottom: 2.5rem;
}

.share-groups-section .section-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.share-groups-section .section-title-row h2 {
  font-size: 1.25rem;
  color: var(--secondary);
  margin: 0;
}

.group-share-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.group-share-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 1rem 1.25rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.group-share-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
}

.group-share-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: white;
  flex-shrink: 0;
  overflow: hidden;
  font-size: 1.25rem;
}

.group-share-icon-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.group-share-info {
  flex: 1;
  min-width: 0;
}

.group-share-info h4 {
  font-size: 1rem;
  color: var(--secondary);
  margin-bottom: 0.2rem;
}

.group-share-info p {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 0;
}

.copy-btn-group {
  width: 38px;
  height: 38px;
}

/* Referrals Section */
.referrals-section {
  margin-bottom: 2.5rem;
}

.referrals-section .section-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.referrals-section .section-title-row h2 {
  font-size: 1.25rem;
  color: var(--secondary);
  margin: 0;
}

.points-total {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(79, 70, 229, 0.08);
  color: var(--primary);
  padding: 0.4rem 0.85rem;
  border-radius: 2rem;
  font-size: 0.85rem;
  font-weight: 700;
}

.points-total svg {
  color: var(--primary);
}

.referrals-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.referral-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 1rem 1.25rem;
}

.referral-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
  flex-shrink: 0;
}

.referral-info {
  flex: 1;
  min-width: 0;
}

.referral-info h4 {
  font-size: 0.95rem;
  color: var(--secondary);
  margin-bottom: 0.15rem;
}

.referral-date {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.referral-item .status-badge {
  padding: 0.3rem 0.7rem;
  border-radius: 2rem;
  font-size: 0.75rem;
  font-weight: 600;
  flex-shrink: 0;
}

.referral-item .status-badge.pending {
  background: rgba(245, 158, 11, 0.1);
  color: var(--warning);
}

.referral-item .status-badge.active {
  background: rgba(16, 185, 129, 0.1);
  color: var(--success);
}

.referral-points {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--primary);
  white-space: nowrap;
  flex-shrink: 0;
}

.empty-state {
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: 1rem;
  padding: 3rem 1.5rem;
  text-align: center;
}

.empty-state p {
  color: var(--text-muted);
  margin-top: 0.75rem;
}

.empty-icon {
  color: var(--text-soft);
}

/* Points Info */
.points-info {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.5rem;
}

.points-info-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  color: var(--primary);
}

.points-info-header h3 {
  font-size: 1rem;
  color: var(--secondary);
  margin: 0;
}

.points-rules {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.points-rules li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.9rem;
  color: var(--text-muted);
}

.points-rule-value {
  background: rgba(79, 70, 229, 0.08);
  color: var(--primary);
  font-weight: 700;
  padding: 0.25rem 0.6rem;
  border-radius: 0.5rem;
  font-size: 0.85rem;
  white-space: nowrap;
}

/* Loading */
.loading-cell {
  text-align: center;
  padding: 3rem;
  color: var(--text-muted);
}

/* Responsive */
@media (max-width: 768px) {
  .share-page .page-header h1 {
    font-size: 1.5rem;
  }

  .referral-code-card {
    padding: 1.5rem;
  }

  .code-display {
    min-width: 0;
    padding: 0.75rem 1rem;
  }

  .code-text {
    font-size: 1.35rem;
    letter-spacing: 0.15em;
  }

  .share-link-box {
    flex-wrap: wrap;
  }

  .share-link-label {
    width: 100%;
  }

  .group-share-card {
    padding: 0.85rem 1rem;
  }

  .group-share-icon {
    width: 42px;
    height: 42px;
  }

  .referral-item {
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
  }

  .referral-item .status-badge {
    order: 4;
  }

  .referral-points {
    order: 5;
  }
}
.profile-page {
  max-width: 640px;
  margin: 0 auto;
}

.profile-page .page-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
}

.profile-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2.5rem;
  box-shadow: var(--shadow-sm);
}

.profile-notifications-card {
  border: 1px solid rgba(79, 70, 229, 0.2);
  border-radius: var(--radius-lg);
  padding: 1rem;
  background: linear-gradient(180deg, rgba(79, 70, 229, 0.08), rgba(79, 70, 229, 0.03));
  margin-bottom: 1.5rem;
}

.profile-notifications-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.85rem;
}

.profile-notifications-header h3 {
  font-size: 0.95rem;
  margin: 0 0 0.2rem;
}

.profile-notifications-header p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.82rem;
}

.profile-notifications-status {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}

.profile-notifications-status.on {
  background: rgba(16, 185, 129, 0.12);
  color: #10B981;
}

.profile-notifications-status.off {
  background: rgba(148, 163, 184, 0.12);
  color: var(--text-muted);
}

.profile-notifications-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.profile-notifications-text {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.profile-notifications-text strong {
  font-size: 0.86rem;
}

.profile-notifications-text span {
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.4;
}

/* Avatar */
.profile-avatar-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 2rem;
}

.profile-avatar-btn {
  position: relative;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  border: 3px solid var(--primary);
  overflow: hidden;
  cursor: pointer;
  background: var(--primary-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.profile-avatar-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 0 0 4px var(--ring);
}

.profile-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-avatar-initials {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--primary);
  user-select: none;
}

.profile-avatar-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.profile-avatar-btn:hover .profile-avatar-overlay {
  opacity: 1;
}

.profile-avatar-hint {
  margin-top: 0.5rem;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.profile-avatar-presets-btn {
  margin-top: 0.6rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.profile-avatar-presets-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-soft);
}

/* Modal de avatares prontos */
.profile-avatars-modal {
  position: fixed;
  inset: 0;
  z-index: 650;
  display: grid;
  place-items: center;
  padding: 1rem;
}

.profile-avatars-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(8px);
}

.profile-avatars-panel {
  position: relative;
  width: min(480px, 100%);
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  padding: 1.25rem;
  border-radius: 1.1rem;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}

.profile-avatars-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.profile-avatars-header h3 {
  margin: 0;
  font-size: 1.1rem;
}

.profile-avatars-close {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.profile-avatars-close:hover {
  background: rgba(148, 163, 184, 0.12);
}

.profile-avatars-actions {
  margin-top: 1rem;
  display: flex;
  justify-content: flex-end;
}

.profile-avatars-actions .btn {
  min-height: 44px;
  padding: 0 1.25rem;
  border-radius: 0.85rem;
  font-weight: 700;
}

/* Message */
.profile-message {
  padding: 0.75rem 1rem;
  border-radius: var(--radius-xs);
  margin-bottom: 1.5rem;
  font-size: 0.9rem;
  font-weight: 500;
}

.profile-message.success {
  background: var(--economy-bg);
  color: var(--economy);
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.profile-message.error {
  background: rgba(239, 68, 68, 0.1);
  color: var(--error);
  border: 1px solid rgba(239, 68, 68, 0.3);
}

/* Fields */
.profile-fields {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.profile-fields .form-group label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-main);
  margin-bottom: 0.35rem;
}

.profile-fields .form-group input {
  width: 100%;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-xs);
  border: 1px solid var(--border);
  background: var(--surface-soft);
  color: var(--text-main);
  font-size: 0.95rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.profile-fields .form-group input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--ring);
}

.profile-name-copy-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.profile-name-copy-row input {
  flex: 1;
}

.profile-copy-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background: var(--surface-soft);
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
}

.profile-copy-btn:hover {
  background: var(--primary-soft);
  color: var(--primary);
  border-color: var(--primary);
}

.profile-copy-btn:active {
  transform: scale(0.95);
}

.profile-fields .form-group input::placeholder {
  color: var(--text-soft);
}

.disabled-field {
  opacity: 0.6;
  cursor: not-allowed !important;
}

.field-hint {
  font-size: 0.75rem;
  color: var(--text-soft);
  margin-top: 0.25rem;
}

/* CPF — as ações de trocar/remover e o erro de validação.
   O `.field-hint` acima é global do app; estas regras são do perfil. */
.profile-fields .profile-cpf-acoes {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.6rem;
}

.profile-fields .profile-cpf-erro {
  display: block;
  font-size: 0.75rem;
  color: var(--danger, #ef4444);
  margin-top: 0.35rem;
}

.profile-fields .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

/* Actions */
.profile-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}

@media (max-width: 600px) {
  .profile-card {
    padding: 1.5rem;
  }

  .profile-notifications-header,
  .profile-notifications-body {
    flex-direction: column;
    align-items: flex-start;
  }

  .profile-fields .form-row {
    grid-template-columns: 1fr;
  }

  .profile-actions {
    flex-direction: column-reverse;
  }

  .profile-actions .btn {
    width: 100%;
  }
}

.danger-zone {
  margin-top: 2rem;
  padding: 1.5rem;
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: var(--radius-lg);
  background: rgba(239, 68, 68, 0.05);
}

.danger-zone h3 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #ef4444;
  font-size: 1rem;
  margin: 0 0 0.5rem;
}

.danger-zone > p {
  color: var(--text-muted);
  font-size: 0.85rem;
  margin: 0 0 1rem;
}

.danger-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.btn-danger {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.25rem;
  border: none;
  border-radius: 8px;
  background: #ef4444;
  color: white;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 0.88rem;
}

.btn-danger:hover:not(:disabled) {
  background: #dc2626;
}

.btn-danger:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.delete-error {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem;
  border-radius: 8px;
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.2);
  margin-bottom: 1rem;
}

.delete-error svg {
  color: #ef4444;
  flex-shrink: 0;
  margin-top: 2px;
}

.delete-error p {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text);
}

.pending-payments-list {
  margin-top: 0.5rem;
}

.pending-payments-list ul {
  margin: 0.25rem 0 0;
  padding-left: 1.25rem;
}

.pending-payments-list li {
  font-size: 0.82rem;
  color: var(--text-muted);
}
.group-detail-page {
  max-width: 680px;
  animation: slideUpFade 0.4s ease-out forwards;
  padding-bottom: 5rem;
}

@keyframes slideUpFade {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Header */
.gd-header {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 1rem;
  padding: 1.25rem;
  margin-bottom: 1rem;
}

.gd-header-service {
  width: 64px;
  height: 64px;
  border-radius: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

.gd-service-logo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gd-service-icon-text {
  font-size: 1.75rem;
  font-weight: 800;
  color: white;
}

.gd-header-info {
  flex: 1;
  min-width: 0;
}

.gd-header-info h1 {
  font-size: 1.2rem;
  margin: 0 0 0.15rem;
  color: var(--secondary);
  line-height: 1.3;
}

.gd-header-sub {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 0 0 0.6rem;
}

.gd-header-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.gd-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.6rem;
  border-radius: 2rem;
  font-size: 0.72rem;
  font-weight: 600;
}

.gd-badge.verified {
  background: linear-gradient(135deg, #10B981, #059669);
  color: #FFFFFF;
  font-weight: 700;
  box-shadow: 0 4px 12px -6px rgba(16, 185, 129, 0.8);
}

/* Selos (anúncios / tipo de conta) logo abaixo dos badges do header */
.gd-group-tags {
  margin-top: 0.55rem;
}

.gd-badge.status.open {
  background: rgba(16, 185, 129, 0.1);
  color: var(--success);
}

.gd-badge.status.forming {
  background: rgba(245, 158, 11, 0.1);
  color: #F59E0B;
}

.gd-badge.status.closed {
  background: rgba(100, 116, 139, 0.1);
  color: #64748B;
}

.gd-badge.spots {
  background: rgba(14, 165, 233, 0.1);
  color: #0EA5E9;
}

.gd-header-price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex-shrink: 0;
}

.gd-price-value {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--primary);
}

.gd-price-cycle {
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* CTA */
.gd-cta {
  margin-bottom: 1rem;
}

.gd-cta-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.85rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 0.75rem;
  text-decoration: none;
  text-align: center;
}

.gd-share-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  margin-top: 0.75rem;
  padding: 0.85rem 1.5rem;
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: 0.75rem;
}

/* Sections */
.gd-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 1rem;
  margin-bottom: 0.75rem;
  overflow: hidden;
}

.gd-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 1rem 1.25rem;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-main);
  transition: background 0.2s;
}

.gd-section-header:hover {
  background: rgba(255, 255, 255, 0.02);
}

.gd-section-header h2 {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--secondary);
  margin: 0;
}

.gd-section-header svg {
  color: var(--text-soft);
  flex-shrink: 0;
}

.gd-section-body {
  padding: 0 1.25rem 1.25rem;
}

.gd-section-body h3 {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--secondary);
  margin: 1rem 0 0.4rem;
}

.gd-section-body h3:first-child {
  margin-top: 0;
}

.gd-section-body p {
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0 0 0.5rem;
}

.gd-section-body p:last-child {
  margin-bottom: 0;
}

/* Badge Row */
.gd-badge-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1rem;
}

.gd-seal {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(79, 70, 229, 0.1);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.gd-badge-row span {
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* Rules: as regrinhas sao uma lista compartilhada (components/GroupRules.css). */

/* Loyalty */
.gd-loyalty-intro {
  margin-bottom: 1rem !important;
}

.gd-loyalty-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
}

.gd-loyalty-list li {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.6;
  padding-left: 1.25rem;
  position: relative;
  margin-bottom: 0.6rem;
}

.gd-loyalty-list li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: var(--text-soft);
}

.gd-loyalty-notice {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  background: rgba(14, 165, 233, 0.06);
  border: 1px solid rgba(14, 165, 233, 0.15);
  border-radius: 0.75rem;
  padding: 1rem;
  color: #0EA5E9;
}

.gd-loyalty-notice svg {
  flex-shrink: 0;
  margin-top: 2px;
}

.gd-loyalty-notice strong {
  display: block;
  font-size: 0.88rem;
  margin-bottom: 0.2rem;
}

.gd-loyalty-notice p {
  font-size: 0.82rem !important;
  color: #0EA5E9 !important;
  margin: 0 !important;
}

/* Admin Profile */
.gd-admin-profile {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0.5rem 0;
}

.gd-admin-avatar-link {
  display: block;
  margin-bottom: 0.5rem;
}

.gd-admin-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid rgba(79, 70, 229, 0.2);
}

.gd-admin-avatar-placeholder {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), #818CF8);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 700;
  border: 3px solid rgba(79, 70, 229, 0.2);
}

.gd-admin-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--secondary);
  text-decoration: none;
  margin-bottom: 0.75rem;
}

.gd-admin-name:hover {
  color: var(--primary);
}

.gd-admin-meta {
  display: flex;
  justify-content: center;
  gap: 2rem;
  width: 100%;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
}

.gd-admin-meta-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}

.gd-admin-meta-label {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.gd-admin-badges {
  display: flex;
  gap: 0.3rem;
}

.gd-admin-badge {
  font-size: 1.3rem;
}

/* Members */
.gd-members-grid {
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.gd-member {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  text-decoration: none;
  width: 64px;
}

.gd-member:hover .gd-member-name {
  color: var(--primary);
}

.gd-member-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
}

.gd-member-avatar-placeholder {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--border);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: 700;
}

.gd-member-name {
  font-size: 0.72rem;
  color: var(--text-muted);
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  transition: color 0.2s;
}

/* Criado por */
.gd-created-by {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  text-decoration: none;
  transition: opacity 0.2s;
}

.gd-created-by:hover {
  opacity: 0.8;
}

.gd-created-by-label {
  font-size: 0.82rem;
  color: var(--text-muted);
  flex-shrink: 0;
}

.gd-created-by-profile {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--background);
  padding: 0.4rem 0.8rem 0.4rem 0.4rem;
  border-radius: 2rem;
  border: 1px solid var(--border);
  transition: border-color 0.2s;
}

.gd-created-by:hover .gd-created-by-profile {
  border-color: var(--primary);
}

.gd-created-by-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
}

.gd-created-by-avatar-placeholder {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), #818CF8);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
}

.gd-created-by-name {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-main);
}

.gd-official-seal {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--primary);
  background: rgba(79, 70, 229, 0.1);
  padding: 0.15rem 0.5rem;
  border-radius: 1rem;
  margin-left: 0.25rem;
}

.gd-created-by.official .gd-created-by-avatar-placeholder {
  background: linear-gradient(135deg, var(--primary), #818CF8);
}

.gd-created-by.official .gd-created-by-name {
  color: var(--primary);
}

/* FAQ */
.gd-faq-list {
  display: flex;
  flex-direction: column;
}

.gd-faq-item {
  border-bottom: 1px solid var(--border);
}

.gd-faq-item:last-child {
  border-bottom: none;
}

.gd-faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.9rem 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-main);
  font-size: 0.88rem;
  text-align: left;
  gap: 0.75rem;
  transition: color 0.2s;
}

.gd-faq-question:hover {
  color: var(--primary);
}

.gd-faq-question svg {
  color: var(--text-soft);
  flex-shrink: 0;
}

.gd-faq-answer {
  padding-bottom: 0.75rem;
}

.gd-faq-answer p {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.6;
}

/* Bottom CTA */
.gd-bottom-cta {
  margin-top: 1.5rem;
}

/* Meta */
.gd-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.gd-unlimited {
  font-size: 0.75rem;
  background: rgba(16, 185, 129, 0.1);
  color: var(--success);
  padding: 0.15rem 0.5rem;
  border-radius: 1rem;
}

/* Responsive */
@media (max-width: 768px) {
  .group-detail-page {
    padding-bottom: 5rem;
  }

  .gd-header {
    flex-direction: column;
    align-items: stretch;
  }

  .gd-header-service {
    width: 56px;
    height: 56px;
  }

  .gd-header-price {
    flex-direction: row;
    align-items: center;
    gap: 0.3rem;
  }

  .gd-share-btn {
    margin-top: 0.5rem;
  }

  .gd-members-grid {
    gap: 1rem;
  }
}
.user-public-page {
  max-width: 680px;
  animation: slideUpFade 0.4s ease-out forwards;
}

@keyframes slideUpFade {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.up-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 1rem;
  margin-bottom: 0.75rem;
  overflow: hidden;
}

/* Profile Card */
.up-profile-card {
  text-align: center;
}

.up-avatar-section {
  padding: 2rem 1.25rem;
}

.up-avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid rgba(79, 70, 229, 0.15);
  margin-bottom: 0.75rem;
}

.up-avatar-placeholder {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), #818CF8);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: 700;
  margin: 0 auto 0.75rem;
  border: 4px solid rgba(79, 70, 229, 0.15);
}

.up-avatar-section h1 {
  font-size: 1.35rem;
  margin: 0 0 0.15rem;
  color: var(--secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.up-official-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--primary);
  background: rgba(79, 70, 229, 0.1);
  padding: 0.2rem 0.6rem;
  border-radius: 1rem;
}

.up-full-name {
  font-size: 0.88rem;
  color: var(--text-muted);
  margin: 0 0 0.75rem;
}

.up-meta {
  display: flex;
  justify-content: center;
  gap: 1rem;
}

.up-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.82rem;
  color: var(--text-muted);
}

/* Groups Section */
.up-section-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border);
}

.up-section-header svg {
  color: var(--primary);
}

.up-section-header h2 {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--secondary);
  margin: 0;
}

.up-empty {
  padding: 2rem 1.25rem;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.up-groups-list {
  padding: 0.5rem 0;
}

.up-group-card {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem 1.25rem;
  text-decoration: none;
  color: var(--text-main);
  transition: background 0.2s;
}

.up-group-card:hover {
  background: rgba(255, 255, 255, 0.02);
}

.up-group-icon {
  width: 44px;
  height: 44px;
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  color: white;
  font-size: 1.2rem;
  font-weight: 800;
}

.up-group-icon-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.up-group-info {
  flex: 1;
  min-width: 0;
}

.up-group-info h3 {
  font-size: 0.9rem;
  margin: 0 0 0.1rem;
  color: var(--secondary);
  font-weight: 600;
}

.up-group-info p {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin: 0 0 0.3rem;
}

.up-group-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.up-group-status {
  font-size: 0.68rem;
  font-weight: 600;
  padding: 0.1rem 0.45rem;
  border-radius: 1rem;
}

.up-group-status.open {
  background: rgba(16, 185, 129, 0.1);
  color: var(--success);
}

.up-group-status.forming {
  background: rgba(245, 158, 11, 0.1);
  color: #F59E0B;
}

.up-group-status.closed {
  background: rgba(100, 116, 139, 0.1);
  color: #64748B;
}

.up-group-members {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.up-group-owner-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--primary);
  background: rgba(79, 70, 229, 0.08);
  padding: 0.1rem 0.4rem;
  border-radius: 1rem;
}

.up-group-link-icon {
  color: var(--text-soft);
  flex-shrink: 0;
}

/* Responsive */
@media (max-width: 768px) {
  .up-avatar-section {
    padding: 1.5rem 1rem;
  }

  .up-avatar, .up-avatar-placeholder {
    width: 80px;
    height: 80px;
    font-size: 1.75rem;
  }
}
.subscription-manage-page {
  animation: slideUpFade 0.4s ease-out forwards;
}

@keyframes slideUpFade {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.modal-group-name {
  font-size: 0.85rem;
  color: var(--text-muted);
  font-weight: 500;
}

.spin {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.sub-manage-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.05);
  border-left: 4px solid var(--service-color);
}

.sub-manage-header {
  padding: 1.5rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
  gap: 1rem;
}

.sub-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  border-radius: 2rem;
  font-size: 0.875rem;
  font-weight: 600;
}

.sub-status-badge.active {
  background: rgba(16, 185, 129, 0.1);
  color: #10B981;
}

.sub-status-badge.cancelled {
  background: rgba(239, 68, 68, 0.1);
  color: #EF4444;
}

/* Atrasada: ainda é possível renovar (a carência de 7 dias está correndo). */
.sub-status-badge.overdue {
  background: rgba(245, 158, 11, 0.1);
  color: #F59E0B;
}

.sub-status-badge.pending {
  background: rgba(14, 165, 233, 0.1);
  color: #0EA5E9;
}

.sub-manage-body {
  padding: 1.5rem 2rem;
}

.sub-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.sub-detail-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--background);
  padding: 1rem;
  border-radius: 0.75rem;
  border: 1px solid var(--border);
}

.sub-detail-item svg {
  color: var(--primary);
  flex-shrink: 0;
}

.sub-detail-item span {
  display: block;
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 0.15rem;
}

.sub-detail-item strong {
  color: var(--secondary);
  font-size: 0.95rem;
}

.sub-site-link {
  margin-bottom: 1.5rem;
}

.sub-danger-zone {
  background: rgba(239, 68, 68, 0.04);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: 0.75rem;
  padding: 1.25rem;
}

.sub-danger-zone h3 {
  font-size: 0.95rem;
  color: #EF4444;
  margin-bottom: 0.5rem;
}

.sub-danger-zone p {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 1rem;
  line-height: 1.5;
}

.btn-danger {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  background: #EF4444;
  color: white;
  border: none;
  border-radius: 0.5rem;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}

.btn-danger:hover {
  background: #DC2626;
}

.btn-danger:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-full {
  width: 100%;
  justify-content: center;
}

.text-warning {
  color: #F59E0B;
}

.sub-billing-history {
  margin-top: 1.5rem;
  border-top: 1px solid var(--border);
  padding-top: 1.5rem;
}

.sub-billing-history h3 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  color: var(--secondary);
  margin-bottom: 1rem;
}

.billing-history-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.billing-history-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1rem;
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  flex-wrap: wrap;
}

.billing-history-date {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
  min-width: 90px;
}

.billing-history-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.billing-history-amount {
  font-weight: 700;
  color: var(--text);
}

.billing-history-status {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
}

.billing-history-status.status-approved {
  background: rgba(16, 185, 129, 0.1);
  color: #10B981;
}

.billing-history-status.status-failed {
  background: rgba(239, 68, 68, 0.1);
  color: #EF4444;
}

.billing-history-status.status-pending,
.billing-history-status.status-processing {
  background: rgba(245, 158, 11, 0.1);
  color: #F59E0B;
}

.billing-history-error {
  font-size: 0.7rem;
  color: var(--error);
  flex-basis: 100%;
  padding-left: 0;
}

.sub-cancelled-notice {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.75rem;
  padding: 1.5rem;
  background: rgba(234, 179, 8, 0.04);
  border: 1px solid rgba(234, 179, 8, 0.2);
  border-radius: 0.75rem;
}

.sub-cancelled-notice svg {
  color: #EAB308;
}

.sub-cancelled-notice p {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0;
}

/* Payment Info Cards */
.sub-payment-info-card {
  margin-top: 1.5rem;
  padding: 1.25rem;
  background: var(--surface-alt, rgba(255,255,255,0.03));
  border: 1px solid var(--border);
  border-radius: 0.75rem;
}

.sub-payment-info-card h3 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 1rem 0;
}

.payment-recipient {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.recipient-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

.recipient-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.recipient-initials {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary, #4F46E5);
  color: white;
  font-weight: 700;
  font-size: 1rem;
}

.recipient-details {
  display: flex;
  flex-direction: column;
}

.recipient-details strong {
  font-size: 0.95rem;
  color: var(--text);
}

.recipient-details span {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.fee-breakdown {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.fee-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.875rem;
  color: var(--text);
}

.fee-deduction {
  color: var(--text-muted);
  font-size: 0.8rem;
}

.fee-total {
  padding-top: 0.5rem;
  border-top: 1px solid var(--border);
  font-weight: 600;
}

.sub-next-charge-highlight {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1.5rem;
  padding: 1.25rem;
  background: linear-gradient(135deg, rgba(79, 70, 229, 0.08), rgba(79, 70, 229, 0.02));
  border: 1px solid rgba(79, 70, 229, 0.2);
  border-radius: 0.75rem;
}

.sub-next-charge-highlight svg {
  color: var(--primary, #4F46E5);
  flex-shrink: 0;
}

.sub-next-charge-highlight div {
  display: flex;
  flex-direction: column;
}

.sub-next-charge-highlight span {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.sub-next-charge-highlight strong {
  font-size: 1.1rem;
  color: var(--primary, #4F46E5);
}

.sub-next-charge-highlight .charge-date {
  font-size: 0.85rem;
  color: var(--text);
  margin-top: 0.15rem;
}

@media (max-width: 768px) {
  .sub-manage-header {
    flex-direction: column;
    align-items: flex-start;
    padding: 1.25rem;
  }

  .sub-manage-body {
    padding: 1.25rem;
  }

  .sub-detail-grid {
    grid-template-columns: 1fr;
  }
}
.subscription-history-page {
  animation: slideUpFade 0.4s ease-out forwards;
}

@keyframes slideUpFade {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.history-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.history-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  cursor: pointer;
  transition: all 0.2s;
}

.history-card:hover {
  border-color: var(--primary);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.history-card.cancelled {
  opacity: 0.7;
}

.history-card.cancelled:hover {
  opacity: 1;
}

/* Atrasada: continua no histórico, mas com a cobrança em aberto. */
.history-card.overdue {
  border-color: rgba(245, 158, 11, 0.45);
}

.history-icon {
  width: 44px;
  height: 44px;
  border-radius: 0.65rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: 700;
  color: white;
  flex-shrink: 0;
}

.history-icon-img {
  width: 26px;
  height: 26px;
  object-fit: contain;
}

.history-info {
  flex: 1;
  min-width: 0;
}

.history-info h3 {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 0.15rem;
}

.history-info p {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 0.2rem;
}

.history-date {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.history-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.3rem;
  flex-shrink: 0;
}

.history-status {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
}

.history-status.active {
  background: rgba(16, 185, 129, 0.1);
  color: #10B981;
}

.history-status.cancelled {
  background: rgba(239, 68, 68, 0.1);
  color: #EF4444;
}

.history-status.overdue {
  background: rgba(245, 158, 11, 0.1);
  color: #F59E0B;
}

.history-status.pending {
  background: rgba(14, 165, 233, 0.1);
  color: #0EA5E9;
}

.history-amount {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text);
}

.history-filters {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}

.filter-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.filter-tab:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.filter-tab.active {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
}

.filter-tab span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.2);
  font-size: 0.75rem;
  font-weight: 700;
}

.filter-tab:not(.active) span {
  background: rgba(0, 0, 0, 0.06);
}

.history-empty-filter {
  text-align: center;
  padding: 2rem;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.back-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.85rem;
  border-radius: 0.5rem;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  margin-bottom: 1.25rem;
}

.back-btn:hover {
  background: rgba(0, 0, 0, 0.04);
  color: var(--text);
}

@media (max-width: 768px) {
  .back-btn {
    display: none;
  }

  .history-card {
    padding: 0.85rem 1rem;
  }

  .history-icon {
    width: 38px;
    height: 38px;
  }

  .history-filters {
    gap: 0.35rem;
  }

  .filter-tab {
    padding: 0.4rem 0.75rem;
    font-size: 0.8rem;
  }

  .filter-tab span {
    font-size: 0.72rem;
    padding: 0.1rem 0.35rem;
  }
}
.tf-page {
  padding: 1.5rem;
  max-width: 600px;
  margin: 0 auto;
}

.tf-container {
  background: var(--card-bg, #111827);
  border-radius: 12px;
  border: 1px solid var(--border, #1f2937);
  padding: 2rem;
}

.tf-container h1 {
  color: var(--text, #f9fafb);
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
}

.tf-subtitle {
  color: var(--text-secondary, #9ca3af);
  font-size: 0.9rem;
  margin-bottom: 1.5rem;
}

.tf-message {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  margin-bottom: 1rem;
  font-size: 0.85rem;
}

.tf-message.success {
  background: rgba(16, 185, 129, 0.15);
  color: #10B981;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.tf-message.error {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.tf-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.tf-rating-row label {
  display: block;
  color: var(--text, #f9fafb);
  font-weight: 600;
  font-size: 0.85rem;
  margin-bottom: 0.5rem;
}

.tf-stars {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.tf-star {
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px;
  transition: transform 0.15s;
}

.tf-star:hover {
  transform: scale(1.15);
}

.tf-rating-label {
  margin-left: 0.5rem;
  font-size: 0.8rem;
  color: var(--text-secondary, #9ca3af);
}

.tf-form-group {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.tf-form-group label {
  color: var(--text, #f9fafb);
  font-weight: 600;
  font-size: 0.85rem;
}

.tf-form-group input,
.tf-form-group textarea {
  background: var(--bg-secondary, #0d1117);
  border: 1px solid var(--border, #1f2937);
  border-radius: 8px;
  padding: 0.65rem 0.75rem;
  color: var(--text, #f9fafb);
  font-size: 0.9rem;
  resize: vertical;
  font-family: inherit;
}

.tf-form-group input:focus,
.tf-form-group textarea:focus {
  outline: none;
  border-color: #4F46E5;
}

.tf-form-group input::placeholder,
.tf-form-group textarea::placeholder {
  color: var(--text-secondary, #6b7280);
}

.tf-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: #4F46E5;
  color: white;
  border: none;
  border-radius: 8px;
  padding: 0.75rem 1.25rem;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}

.tf-submit:hover:not(:disabled) {
  background: #4338CA;
}

.tf-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.tf-my-testimonials {
  margin-top: 2rem;
  border-top: 1px solid var(--border, #1f2937);
  padding-top: 1.5rem;
}

.tf-my-testimonials h2 {
  color: var(--text, #f9fafb);
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.tf-my-card {
  background: var(--bg-secondary, #0d1117);
  border: 1px solid var(--border, #1f2937);
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 0.75rem;
}

.tf-my-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.tf-my-stars {
  display: flex;
  gap: 0.15rem;
}

.tf-my-card p {
  color: var(--text-secondary, #d1d5db);
  font-size: 0.9rem;
  line-height: 1.5;
  margin-bottom: 0.75rem;
}

.tf-my-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.tf-my-footer span {
  font-size: 0.8rem;
  color: var(--text-secondary, #6b7280);
}

.tf-delete-btn {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  background: none;
  border: none;
  color: #ef4444;
  font-size: 0.8rem;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
  transition: background 0.2s;
}

.tf-delete-btn:hover {
  background: rgba(239, 68, 68, 0.15);
}

.tf-status {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.2rem 0.6rem;
  border-radius: 9999px;
}

.tf-status.approved {
  background: rgba(16, 185, 129, 0.15);
  color: #10B981;
}

.tf-status.rejected {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

.tf-status.pending {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
}

/* Reward success screen */
.tf-reward-success {
  text-align: center;
  padding: 1rem 0.5rem;
}

.tf-reward-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.2), rgba(234, 88, 12, 0.15));
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.25rem;
  color: #D97706;
}

.tf-reward-success h2 {
  font-size: 1.35rem;
  color: var(--text, #f9fafb);
  margin: 0 0 0.75rem;
}

.tf-reward-sub {
  font-size: 1rem;
  color: var(--text-secondary, #9ca3af);
  margin: 0 0 0.5rem;
  line-height: 1.5;
}

.tf-reward-sub strong {
  color: #10B981;
  font-size: 1.05rem;
}

.tf-reward-expiry {
  font-size: 0.85rem;
  color: var(--text-secondary, #9ca3af);
  margin: 0 0 1.5rem;
}

.tf-reward-expiry strong {
  color: var(--text, #f9fafb);
}

.tf-reward-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: #4F46E5;
  color: white;
  border: none;
  border-radius: 10px;
  padding: 0.75rem 1.5rem;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s;
  margin-bottom: 1rem;
  box-shadow: 0 8px 20px rgba(79, 70, 229, 0.4);
}

.tf-reward-cta:hover {
  background: #4338CA;
}

.tf-reward-note {
  font-size: 0.78rem;
  color: var(--text-secondary, #6b7280);
  margin: 0;
}

/* Cupom box */
.tf-coupon-box {
  display: inline-block;
  background: rgba(79, 70, 229, 0.1);
  border: 2px dashed rgba(79, 70, 229, 0.5);
  border-radius: 12px;
  padding: 0.85rem 1.25rem;
  margin: 0.75rem auto 1.25rem;
  min-width: 240px;
  text-align: center;
}

.tf-coupon-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(79, 70, 229, 0.8);
  margin-bottom: 0.4rem;
}

.tf-coupon-code-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
}

.tf-coupon-code {
  font-size: 1.35rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  color: #FCD34D;
  font-family: 'Courier New', Courier, monospace;
}

.tf-copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.35rem 0.65rem;
  border-radius: 6px;
  border: 1px solid rgba(79, 70, 229, 0.4);
  background: rgba(79, 70, 229, 0.15);
  color: rgba(79, 70, 229, 0.9);
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  white-space: nowrap;
}

.tf-copy-btn:hover {
  background: rgba(79, 70, 229, 0.25);
  color: #818CF8;
}

.tf-copy-btn.copied {
  background: rgba(16, 185, 129, 0.15);
  border-color: rgba(16, 185, 129, 0.4);
  color: #10B981;
}

.tf-coupon-expiry {
  font-size: 0.75rem;
  color: rgba(156, 163, 175, 0.8);
  margin: 0.4rem 0 0;
}

.tf-reward-actions {
  margin-bottom: 0.75rem;
}

@media (max-width: 480px) {
  .tf-reward-icon {
    width: 64px;
    height: 64px;
  }

  .tf-reward-success h2 {
    font-size: 1.15rem;
  }

  .tf-reward-sub {
    font-size: 0.9rem;
  }

  .tf-coupon-box {
    padding: 0.7rem 0.85rem;
    min-width: 0;
    width: 100%;
  }

  .tf-coupon-code {
    font-size: 1.1rem;
  }
}

.spin {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ----------- Foto no depoimento ----------- */
.tf-avatar-current {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  background: var(--background);
}

.tf-avatar-current img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.tf-avatar-current span {
  font-size: 0.85rem;
  color: var(--text-muted);
}
/* =============================================================================
   COMPONENTES COMPARTILHADOS DA CRIAÇÃO DE GRUPO
   -----------------------------------------------------------------------------
   Usados pelas DUAS rotas de criação:
     - /dashboard/my-groups/create  (usuário)
     - /admin/groups/new            (admin)

   Prefixo `gc-` em todas as classes: o app tem arquivos de estilo com nomes
   repetidos e a ordem de import decide quem vence (ver memória do projeto).
   ============================================================================= */

/* ---------------------------------------------------------------- trilha */
.gc-steps {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  list-style: none;
  padding: 0;
  margin: 0 0 1.25rem;
  overflow-x: auto;
  scrollbar-width: none;
}

.gc-steps::-webkit-scrollbar { display: none; }

.gc-step {
  display: flex;
  align-items: center;
  flex: 1 1 0;
  min-width: 0;
}

.gc-step + .gc-step::before {
  content: '';
  flex: 1;
  height: 2px;
  min-width: 10px;
  background: var(--border);
  border-radius: 2px;
  margin-right: 0.25rem;
}

.gc-step.done + .gc-step::before,
.gc-step.active + .gc-step::before {
  background: var(--primary);
}

.gc-step-btn {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  background: none;
  border: none;
  padding: 0.35rem 0.5rem;
  cursor: pointer;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  transition: color 0.2s, background 0.2s;
}

.gc-step-btn:disabled { cursor: default; opacity: 0.55; }

.gc-step-btn:not(:disabled):hover {
  background: var(--primary-soft);
  color: var(--primary);
}

.gc-step-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--border);
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 700;
  flex-shrink: 0;
  transition: all 0.2s;
}

.gc-step.active .gc-step-dot {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.gc-step.done .gc-step-dot {
  background: var(--primary-soft);
  border-color: var(--primary);
  color: var(--primary);
}

.gc-step-label { overflow: hidden; text-overflow: ellipsis; }

/* ------------------------------------------------- busca de plataforma */
.gc-search {
  position: relative;
  margin-bottom: 1.1rem;
}

.gc-search-box {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.65rem 0.85rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.gc-search-box:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--ring);
}

.gc-search-box svg { color: var(--text-muted); flex-shrink: 0; }

.gc-search-box input {
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  outline: none;
  color: var(--text-main);
  font-size: 0.95rem;
}

.gc-search-box input::placeholder { color: var(--text-soft); }

.gc-search-clear {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  display: inline-flex;
  padding: 0;
}

.gc-search-clear:hover { color: var(--text-main); }

.gc-section-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin: 0 0 0.6rem;
}

.gc-section-title .gc-badge {
  background: var(--primary-soft);
  color: var(--primary);
  border-radius: 999px;
  padding: 0.1rem 0.5rem;
  font-size: 0.68rem;
  letter-spacing: 0;
  text-transform: none;
}

.gc-platform-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 0.6rem;
}

.gc-platform {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem 0.85rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: left;
  color: var(--text-main);
  transition: border-color 0.2s, transform 0.15s, box-shadow 0.2s;
}

.gc-platform:hover {
  border-color: var(--primary);
  transform: translateY(-1px);
  box-shadow: var(--shadow-xs);
}

.gc-platform.selected {
  border-color: var(--primary);
  background: var(--primary-soft);
}

.gc-platform-icon {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
  font-weight: 700;
  color: #fff;
}

.gc-platform-icon img { width: 100%; height: 100%; object-fit: cover; }

.gc-platform-info { min-width: 0; flex: 1; }

.gc-platform-name {
  display: block;
  font-weight: 600;
  font-size: 0.9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gc-platform-meta {
  display: block;
  font-size: 0.72rem;
  color: var(--text-muted);
}

.gc-empty {
  padding: 1.4rem;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.88rem;
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
}

/* --------------------------------------------------------- modal/popup */
.gc-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.62);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  z-index: 1000;
  animation: gc-fade 0.15s ease-out;
}

@keyframes gc-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.gc-modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 460px;
  padding: 1.5rem;
  animation: gc-pop 0.18s ease-out;
}

@keyframes gc-pop {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.gc-modal-title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-main);
  margin: 0 0 0.6rem;
}

.gc-modal-text {
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.55;
  margin: 0 0 1.1rem;
}

.gc-modal-platform {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem 0.85rem;
  background: var(--surface-soft);
  border-radius: var(--radius-md);
  margin-bottom: 1.1rem;
}

.gc-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
  flex-wrap: wrap;
}

/* ------------------------------------------------------------- planos */
.gc-plan-list {
  display: grid;
  gap: 0.7rem;
}

.gc-plan {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 0.95rem 1.05rem;
  cursor: pointer;
  color: var(--text-main);
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
}

.gc-plan:hover {
  border-color: var(--primary);
  transform: translateY(-1px);
}

.gc-plan.selected {
  border-color: var(--primary);
  background: var(--primary-soft);
  box-shadow: 0 0 0 1px var(--primary) inset;
}

.gc-plan-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.8rem;
}

.gc-plan-name {
  font-weight: 700;
  font-size: 0.98rem;
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.gc-plan-check {
  color: var(--primary);
  flex-shrink: 0;
}

.gc-plan-price {
  font-weight: 700;
  color: var(--primary);
  white-space: nowrap;
  font-size: 0.95rem;
}

.gc-plan-price small {
  display: block;
  font-weight: 500;
  color: var(--text-muted);
  font-size: 0.7rem;
  text-align: right;
}

.gc-plan-details {
  list-style: none;
  margin: 0.6rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.28rem;
}

.gc-plan-details li {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.45;
}

.gc-plan-details svg { flex-shrink: 0; margin-top: 2px; color: var(--text-soft); }

.gc-plan-range {
  margin-top: 0.7rem;
  padding-top: 0.6rem;
  border-top: 1px dashed var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.gc-plan-range strong { color: var(--text-main); }

/* -------------------------------------------------------- visibilidade */
/* Rotulo de secao no padrao das telas novas ("VISIBILIDADE NA PLATAFORMA",
   "STATUS DA ASSINATURA", "VAGAS DISPONÍVEIS", "COMUNICAÇÃO"). */
.gc-section-label {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  margin: 0 0 0.7rem;
}

.gc-visibility-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.9rem;
}

.gc-visibility-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  text-align: center;
  padding: 1.4rem 1.1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  color: var(--text-main);
  transition: border-color 0.2s, background 0.2s, transform 0.15s;
}

.gc-visibility-card:hover { border-color: var(--primary); transform: translateY(-1px); }

/* selecionado: fundo azul-claro e titulo roxo */
.gc-visibility-card.selected {
  border-color: var(--primary);
  background: rgba(79, 70, 229, 0.08);
  box-shadow: 0 0 0 1px var(--primary) inset;
}

.gc-visibility-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  margin-bottom: 0.35rem;
}

.gc-visibility-icon.is-public {
  background: rgba(79, 70, 229, 0.14);
  color: var(--primary);
}

.gc-visibility-icon.is-private {
  background: rgba(245, 158, 11, 0.16);
  color: var(--warning);
}

.gc-visibility-title {
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--text-main);
}

.gc-visibility-card.selected .gc-visibility-title { color: var(--primary); }

.gc-visibility-desc {
  font-size: 0.86rem;
  color: var(--text-muted);
}

/* -------------------------------------------------------------- resumo */
.gc-summary {
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.05rem 1.15rem;
}

.gc-summary h3 {
  margin: 0 0 0.8rem;
  font-size: 1rem;
  color: var(--text-main);
}

.gc-summary ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}

.gc-summary li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.88rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border);
}

.gc-summary li:last-child { border-bottom: none; padding-bottom: 0; }
.gc-summary li span { color: var(--text-muted); }
.gc-summary li strong { color: var(--text-main); text-align: right; }

/* ------------------------------------------------------------ políticas */
.gc-policies {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.05rem 1.15rem;
  background: var(--surface);
}

.gc-policies-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text-main);
  margin: 0 0 0.6rem;
}

.gc-policies-title svg { color: var(--warning); }

.gc-policies ul {
  margin: 0 0 0.9rem;
  padding-left: 1.1rem;
  display: grid;
  gap: 0.4rem;
}

.gc-policies li {
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--text-muted);
}

.gc-policies li strong { color: var(--text-main); }

.gc-policies-check {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.7rem 0.8rem;
  background: var(--surface-soft);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--text-main);
}

.gc-policies-check input {
  margin-top: 2px;
  width: 16px;
  height: 16px;
  accent-color: var(--primary);
  flex-shrink: 0;
  cursor: pointer;
}

/* --------------------------------------------------------------- avisos */
.gc-note {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.8rem 0.9rem;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  line-height: 1.5;
  margin-top: 1rem;
}

.gc-note svg { flex-shrink: 0; margin-top: 2px; }

.gc-note.info { background: var(--primary-soft); color: var(--text-main); }
.gc-note.info svg { color: var(--primary); }
.gc-note.warn { background: rgba(245, 158, 11, 0.12); color: var(--text-main); }
.gc-note.warn svg { color: var(--warning); }
.gc-note.error { background: rgba(239, 68, 68, 0.12); color: var(--text-main); }
.gc-note.error svg { color: var(--error); }
.gc-note.success { background: rgba(16, 185, 129, 0.12); color: var(--text-main); }
.gc-note.success svg { color: var(--success); }
.gc-note code {
  background: rgba(148, 163, 184, 0.18);
  padding: 0.05rem 0.3rem;
  border-radius: 4px;
  font-size: 0.82em;
}

/* --------------------------------------------------------- campos extras */
.gc-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 1rem;
}

.gc-field > label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-main);
}

.gc-field input,
.gc-field select,
.gc-field textarea {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.75rem;
  color: var(--text-main);
  font-size: 0.92rem;
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  width: 100%;
}

.gc-field input:focus,
.gc-field select:focus,
.gc-field textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--ring);
}

.gc-field small { font-size: 0.76rem; color: var(--text-muted); }

.gc-grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0 1rem;
}

.gc-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.gc-tag {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-main);
  border-radius: 999px;
  padding: 0.4rem 0.85rem;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.gc-tag:hover { border-color: var(--primary); }

.gc-tag.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

/* ------------------------------------------------- tipos de regrinha */
.gc-rule-types {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.gc-rule-type {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  width: 100%;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.7rem;
  color: var(--text-main);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}

.gc-rule-type:hover { border-color: var(--primary); }

.gc-rule-type.active {
  border-color: var(--primary);
  background: var(--primary-soft);
}

.gc-rule-type-check {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  flex-shrink: 0;
  border: 1.5px solid var(--border);
  border-radius: 5px;
  color: #fff;
}

.gc-rule-type.active .gc-rule-type-check {
  background: var(--primary);
  border-color: var(--primary);
}

.gc-rule-type-body {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.gc-rule-type-body strong {
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.3;
}

.gc-rule-type-body small {
  font-size: 0.76rem;
  color: var(--text-muted);
  line-height: 1.4;
}

.gc-rule-custom-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 0.7rem;
}

.gc-rule-custom-item {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.6rem;
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: 0.83rem;
  color: var(--text-main);
}

.gc-rule-custom-item > svg { color: var(--text-muted); flex-shrink: 0; }
.gc-rule-custom-item > span { flex: 1; min-width: 0; }

.gc-rule-custom-item button {
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0.2rem;
  border-radius: 4px;
}

.gc-rule-custom-item button:hover { color: var(--danger, #ef4444); }

.gc-rule-custom-add {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 0.5rem;
}

.gc-rule-custom-add input {
  flex: 1;
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.75rem;
  color: var(--text-main);
  font-size: 0.92rem;
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.gc-rule-custom-add input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--ring);
}

.gc-rule-custom-add button { flex-shrink: 0; }
.gc-rule-custom-add button:disabled { opacity: 0.55; cursor: not-allowed; }

@media (max-width: 640px) {
  .gc-rule-types { grid-template-columns: 1fr; }
  .gc-rule-custom-add { flex-direction: column; align-items: stretch; }
}

/* --------------------------------------------------------- custo/planos */
.gc-price-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
  padding: 0.7rem 0.85rem;
  background: var(--surface-soft);
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  color: var(--text-muted);
}

.gc-price-box strong { color: var(--text-main); }

.gc-suggestion {
  background: none;
  border: 1px solid var(--primary);
  color: var(--primary);
  border-radius: 999px;
  padding: 0.25rem 0.7rem;
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.gc-suggestion:hover { background: var(--primary-soft); }

/* --------------------------------------------- taxa de adesão (linha reta) */
.gc-fee-line {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.4rem 0.6rem;
  margin: 0 0 1rem;
  padding: 0.6rem 0.85rem;
  background: var(--surface-soft);
  border-radius: var(--radius-sm);
  font-size: 0.86rem;
  color: var(--text-muted);
}

.gc-fee-line strong {
  color: var(--text-main);
  font-size: 0.95rem;
}

.gc-fee-line small {
  flex: 1 1 100%;
  font-size: 0.76rem;
  color: var(--text-soft);
  line-height: 1.4;
}

/* ------------------------------------------------- valor por pessoa */
.gc-per-slot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  flex-wrap: wrap;
  margin-top: 0.6rem;
  padding: 0.7rem 0.85rem;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  font-size: 0.84rem;
  color: var(--text-muted);
}

.gc-per-slot strong {
  color: var(--primary);
  font-size: 1.05rem;
  font-weight: 700;
}

.gc-per-slot strong small {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
}

/* ------------------------------------------------ simulação de recebimento */
.gc-simulation {
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 0.9rem 1rem;
  margin-top: 1rem;
}

.gc-simulation h3 {
  margin: 0 0 0.6rem;
  font-size: 0.92rem;
  color: var(--text-main);
}

.gc-simulation-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.4rem 0;
  font-size: 0.86rem;
  color: var(--text-muted);
}

.gc-simulation-row + .gc-simulation-row { border-top: 1px solid var(--border); }

.gc-simulation-row strong {
  font-size: 1rem;
  font-weight: 700;
  white-space: nowrap;
}

/* o que o cliente paga: azul, em negrito */
.gc-simulation-row.is-client strong { color: var(--primary); }

/* a taxa da plataforma: vermelha, um pouco menor */
.gc-simulation-row.is-fee strong {
  color: var(--error);
  font-size: 0.9rem;
  font-weight: 700;
}

/* o líquido do dono: verde, em negrito */
.gc-simulation-row.is-net strong { color: var(--success); }

/* ------------------------------------------------------ etapa de vagas */
/* Card "VAGAS DISPONÍVEIS": stepper (- numero +) e a caixa verde do
   quanto o dono recebe por mês. */
.gc-slots-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  padding: 1.3rem 1.15rem 1.15rem;
  text-align: center;
}

.gc-slots-card .gc-section-label { text-align: left; }

.gc-stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.4rem;
  margin: 0.4rem 0 1.1rem;
}

.gc-stepper-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text-main);
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, transform 0.15s;
}

.gc-stepper-btn:hover:not(:disabled) {
  border-color: var(--primary);
  color: var(--primary);
  transform: translateY(-1px);
}

.gc-stepper-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.gc-stepper-value {
  min-width: 3rem;
  font-size: 2rem;
  font-weight: 800;
  color: var(--text-main);
  line-height: 1;
  text-align: center;
}

.gc-receive-box {
  background: var(--surface-soft);
  border-radius: var(--radius-sm);
  padding: 0.85rem 1rem;
  font-size: 0.95rem;
  color: var(--text-muted);
}

.gc-receive-box strong {
  color: var(--success);
  font-weight: 800;
  font-size: 1.08rem;
}

.gc-receive-box small {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.76rem;
  color: var(--text-soft);
}

.gc-receive-box.is-empty strong { color: var(--text-soft); }

/* --------------------------------------------- status da assinatura */
.gc-subscription-list {
  display: grid;
  gap: 0.7rem;
}

.gc-subscription-card {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  width: 100%;
  text-align: left;
  padding: 0.95rem 1.05rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  color: var(--text-main);
  transition: border-color 0.2s, background 0.2s, transform 0.15s;
}

.gc-subscription-card:hover { transform: translateY(-1px); }

.gc-subscription-card.is-success:hover { border-color: var(--success); }
.gc-subscription-card.is-warning:hover { border-color: var(--warning); }

/* selecionado: borda e fundo na cor da opcao */
.gc-subscription-card.is-success.selected {
  border-color: var(--success);
  background: rgba(16, 185, 129, 0.09);
}

.gc-subscription-card.is-warning.selected {
  border-color: var(--warning);
  background: rgba(245, 158, 11, 0.11);
}

.gc-subscription-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex-shrink: 0;
  color: #fff;
}

.gc-subscription-icon.is-success { background: var(--success); }
.gc-subscription-icon.is-warning { background: var(--warning); }

.gc-subscription-body {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.gc-subscription-body strong {
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--text-main);
}

.gc-subscription-body small {
  font-size: 0.84rem;
  color: var(--text-muted);
  line-height: 1.45;
}

/* --------------------------------------------------- comunicacao/chat */
.gc-block { margin-top: 1.3rem; }

/* Dica curta embaixo de um campo (planos da plataforma). */
.gc-field-hint {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.74rem;
  line-height: 1.45;
  color: var(--text-muted);
}

/* Resumo do plano: o que o usuário vai ver no card. */
.plan-editor-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.85rem 0;
}

.plan-editor-summary span {
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--text-muted);
}

.gc-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.95rem 1.05rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.gc-toggle-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.gc-toggle-text strong {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-main);
}

.gc-toggle-text span {
  font-size: 0.84rem;
  color: var(--text-muted);
}

.gc-switch {
  position: relative;
  flex-shrink: 0;
  width: 46px;
  height: 26px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: var(--border-strong);
  cursor: pointer;
  transition: background 0.2s;
}

.gc-switch.on { background: var(--primary); }

.gc-switch-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.35);
  transition: transform 0.2s;
}

.gc-switch.on .gc-switch-knob { transform: translateX(20px); }

@media (max-width: 640px) {
  .gc-platform-grid { grid-template-columns: 1fr; }
  .gc-step-label { display: none; }
  .gc-visibility-grid { grid-template-columns: 1fr; }
}

/* ------------------------------------------- editor de planos (admin) */
.plans-editor-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.1rem;
  flex-wrap: wrap;
}

.plans-editor-head h2 { margin-bottom: 0.35rem; }
.plans-editor-head .section-desc { margin: 0; max-width: 62ch; }

.plans-editor-list {
  display: grid;
  gap: 0.9rem;
}

/* Rodapé do editor de planos: botão "Salvar planos" separado. */
.plans-editor-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

.plans-editor-footer .gc-field-hint { margin-top: 0; max-width: 56ch; }

.plans-editor-footer .btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
}

.plan-editor-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1rem 1.1rem;
  background: var(--surface-soft);
}

.plan-editor-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  margin-bottom: 0.9rem;
  flex-wrap: wrap;
}

.plan-editor-head strong { font-size: 0.95rem; color: var(--text-main); }

.plan-editor-actions {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.plan-editor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0 1rem;
}

.plan-editor-card .gc-field { margin-bottom: 0.85rem; }

@media (max-width: 640px) {
  .plan-editor-grid { grid-template-columns: 1fr; }
}

/* --------------------------------------------- gerenciamento de acesso (IA) */
/* Bloco "Deixar a DividePass gerenciar o e-mail do grupo com IA" (etapa de
   credenciais). Explica o que acontece e por que Recommended. */
.gc-managed-note {
  margin-top: 0.9rem;
  padding: 1rem 1.05rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.gc-managed-note-title {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 0.7rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--primary);
}

.gc-managed-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.gc-managed-steps li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.84rem;
  line-height: 1.45;
  color: var(--text-muted);
}

.gc-managed-steps strong { color: var(--text-main); }

.gc-managed-step-num {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
}

.gc-managed-note-foot {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.85rem 0 0;
  padding-top: 0.7rem;
  border-top: 1px solid var(--border);
  font-size: 0.78rem;
  color: var(--text-muted);
}

.gc-managed-hint {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.7rem 0 0;
  font-size: 0.78rem;
  color: var(--text-muted);
}

/* ------------------------------------- confirmacao por e-mail (novo passo) */
/* Pergunta que aparece quando a plataforma exige confirmacao por e-mail ao
   acessar com um dispositivo diferente: o dono escolhe se repassa o codigo na
   mao (manual) ou deixa a DividePass buscar com IA (managed). */
.gc-code-delivery {
  margin-top: 1.1rem;
}

.gc-code-delivery-question {
  margin-bottom: 0.85rem;
}

.gc-code-delivery-title {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  margin: 0 0 0.3rem;
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--text-main);
}

.gc-code-delivery-title svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--warning);
}

.gc-code-delivery-sub {
  margin: 0;
  font-size: 0.84rem;
  color: var(--text-muted);
}

.gc-code-delivery-options {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.gc-code-option {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  width: 100%;
  padding: 0.85rem 0.95rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.gc-code-option:hover { border-color: var(--primary); }

.gc-code-option.active {
  border-color: var(--primary);
  background: var(--primary-soft);
}

.gc-code-option-radio {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  border: 2px solid var(--border);
  border-radius: 50%;
  background: transparent;
  position: relative;
}

.gc-code-option.active .gc-code-option-radio { border-color: var(--primary); }

.gc-code-option.active .gc-code-option-radio::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--primary);
}

.gc-code-option-body {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}

.gc-code-option-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem;
  font-size: 0.88rem;
  color: var(--text-main);
}

.gc-code-option-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  flex-shrink: 0;
}

.gc-code-option-icon.managed {
  background: rgba(99, 102, 241, 0.16);
  color: var(--primary);
}

.gc-code-option-icon.manual {
  background: rgba(16, 185, 129, 0.14);
  color: var(--success);
}

.gc-code-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.gc-code-option-desc {
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--text-muted);
}

.gc-code-manual {
  margin-top: 0.9rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.gc-code-manual-title {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 0.4rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-main);
}

.gc-code-manual-title svg { color: var(--primary); }

.gc-code-manual-text {
  margin: 0 0 0.85rem;
  font-size: 0.83rem;
  line-height: 1.5;
  color: var(--text-muted);
}

.gc-code-manual .gc-field { margin-bottom: 0.7rem; }

.gc-field-hint {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.3rem;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.gc-code-manual-warning {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0;
  padding: 0.7rem 0.8rem;
  border-radius: var(--radius-sm);
  background: rgba(245, 158, 11, 0.12);
  font-size: 0.81rem;
  line-height: 1.45;
  color: var(--text-main);
}

.gc-code-manual-warning svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--warning);
}
/* Seletor "tem anúncios?" — controle binário, visual de segmentado.
   Verde = sem anúncios (o benefício), âmbar = com anúncios (a informação). */

.ads-toggle-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
}

.ads-toggle {
  display: inline-flex;
  align-items: stretch;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.ads-option {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.6rem 1rem;
  border-radius: 0.7rem;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease,
    color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.ads-option:hover:not(:disabled) {
  transform: translateY(-1px);
  border-color: var(--border-strong);
  color: var(--text);
}

.ads-option:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.ads-option:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.ads-option svg {
  flex-shrink: 0;
}

.ads-option-with.active {
  background: rgba(245, 158, 11, 0.14);
  border-color: rgba(245, 158, 11, 0.45);
  color: #B45309;
  box-shadow: 0 6px 16px -10px rgba(245, 158, 11, 0.9);
}

.ads-option-without.active {
  background: rgba(16, 185, 129, 0.14);
  border-color: rgba(16, 185, 129, 0.45);
  color: #047857;
  box-shadow: 0 6px 16px -10px rgba(16, 185, 129, 0.9);
}

[data-theme="light"] .ads-option-with.active {
  color: #92400E;
}

[data-theme="light"] .ads-option-without.active {
  color: #065F46;
}

/* "Não mostrar" — opção neutra: o grupo fica sem selo no card */
.ads-option-hidden.active {
  background: var(--surface-soft);
  border-color: var(--border-strong);
  color: var(--text-muted);
}

[data-theme="light"] .ads-option-hidden.active {
  color: #475569;
}

.ads-hint {
  margin: 0;
  font-size: 0.75rem;
  color: var(--text-muted);
  line-height: 1.45;
}
.create-group-page {
  animation: slideUpFade 0.3s ease-out forwards;
  padding-bottom: 6rem;
  max-width: 860px;
  margin: 0 auto;
}

@keyframes slideUpFade {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.back-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--text-muted);
  background: none;
  border: none;
  font-size: 0.9rem;
  cursor: pointer;
  margin-bottom: 1rem;
  padding: 0;
  transition: color 0.2s;
}

.back-btn:hover {
  color: var(--primary);
}

.page-header {
  margin-bottom: 1.5rem;
}

.page-header h1 {
  font-size: 1.75rem;
  margin-bottom: 0.5rem;
  color: var(--secondary);
}

.page-header p {
  color: var(--text-muted);
}

/* ==========================================================
   WIZARD — trilha de etapas
   ========================================================== */
.wizard-steps {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  list-style: none;
  padding: 0;
  margin: 0 0 1.25rem;
  overflow-x: auto;
  scrollbar-width: none;
}

.wizard-steps::-webkit-scrollbar { display: none; }

.wizard-step {
  display: flex;
  align-items: center;
  flex: 1 1 0;
  min-width: 0;
}

.wizard-step + .wizard-step::before {
  content: '';
  flex: 1;
  height: 2px;
  min-width: 10px;
  background: var(--border);
  border-radius: 2px;
  margin-right: 0.25rem;
}

.wizard-step.done + .wizard-step::before,
.wizard-step.active + .wizard-step::before {
  background: var(--primary);
}

.wizard-step-btn {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  background: none;
  border: none;
  padding: 0.35rem 0.5rem;
  cursor: pointer;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  transition: color 0.2s, background 0.2s;
}

.wizard-step-btn:disabled {
  cursor: default;
  opacity: 0.55;
}

.wizard-step-btn:not(:disabled):hover {
  background: var(--primary-soft);
  color: var(--primary);
}

.wizard-step-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--border);
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 700;
  flex-shrink: 0;
  transition: all 0.2s;
}

.wizard-step.done .wizard-step-dot {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
}

.wizard-step.active .wizard-step-dot {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-soft);
  box-shadow: 0 0 0 4px var(--primary-soft);
}

.wizard-step.active .wizard-step-btn {
  color: var(--secondary);
}

.wizard-step-label {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ==========================================================
   WIZARD — cartao da etapa
   ========================================================== */
.wizard-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.wizard-card-head {
  padding: 1.5rem 1.75rem 1.25rem;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, var(--primary-soft), transparent);
}

.wizard-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--primary);
  margin-bottom: 0.5rem;
}

.wizard-card-head h2 {
  font-size: 1.25rem;
  color: var(--secondary);
  margin-bottom: 0.35rem;
  line-height: 1.3;
}

.wizard-card-head .section-desc {
  margin-bottom: 0;
}

.wizard-card-body {
  padding: 1.75rem;
}

/* ==========================================================
   WIZARD — rodape
   ========================================================== */
.wizard-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 1.75rem;
  border-top: 1px solid var(--border);
  background: var(--background);
  flex-wrap: wrap;
}

.wizard-foot-left,
.wizard-foot-right {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.wizard-card .btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.65rem 1.25rem;
  border-radius: var(--radius-xs);
  font-size: 0.9rem;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.wizard-card .btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.wizard-card .btn-outline {
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text-main);
}

.wizard-card .btn-outline:hover:not(:disabled) {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
}

.wizard-card .btn-ghost {
  background: transparent;
  border: none;
  color: var(--text-muted);
}

.wizard-card .btn-danger-text {
  color: var(--error, #EF4444);
}

.wizard-card .btn-danger-text:hover:not(:disabled) {
  background: rgba(239, 68, 68, 0.1);
  color: var(--error, #EF4444);
}

.wizard-saved {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.78rem;
  color: var(--success);
  font-weight: 600;
}

.wizard-step-error {
  margin: 0 1.75rem 1rem;
  padding: 0.65rem 0.9rem;
  border-radius: var(--radius-sm);
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.25);
  color: var(--error, #EF4444);
  font-size: 0.85rem;
  font-weight: 600;
}

/* ==========================================================
   WIZARD — oferta de retomar rascunho
   ========================================================== */
.wizard-resume {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.9rem 1.1rem;
  margin-bottom: 1.25rem;
  background: var(--primary-soft);
  border: 1px solid rgba(79, 70, 229, 0.3);
  border-radius: var(--radius-md);
  color: var(--primary);
}

.wizard-resume > svg { flex-shrink: 0; }

.wizard-resume-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  flex: 1;
  min-width: 0;
}

.wizard-resume-text strong {
  font-size: 0.9rem;
  color: var(--secondary);
}

.wizard-resume-text span {
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.45;
}

.wizard-resume-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.wizard-resume-actions .btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 0.95rem;
  border-radius: var(--radius-xs);
  font-size: 0.82rem;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.wizard-resume-actions .btn-primary {
  background: linear-gradient(90deg, var(--primary), var(--action));
  color: white;
}

.wizard-resume-actions .btn-outline {
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text-main);
}

.wizard-resume-actions .btn-outline:hover {
  border-color: var(--primary);
  color: var(--primary);
}

/* ==========================================================
   WIZARD — seletor de plataforma
   ========================================================== */
.service-picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 0.75rem;
}

.service-pick {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  padding: 1.1rem 0.75rem;
  border: 2px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--background);
  cursor: pointer;
  transition: border-color 0.18s, transform 0.18s, box-shadow 0.18s;
}

.service-pick:hover {
  border-color: var(--primary);
  transform: translateY(-2px);
}

.service-pick.active {
  border-color: var(--primary);
  background: var(--primary-soft);
  box-shadow: 0 8px 20px rgba(79, 70, 229, 0.15);
}

.service-pick img {
  width: 42px;
  height: 42px;
  object-fit: contain;
  border-radius: 8px;
}

.service-pick-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 8px;
  color: white;
  font-weight: 800;
  font-size: 1.1rem;
}

.service-pick-name {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.3;
}

.service-pick.active .service-pick-name {
  color: var(--secondary);
}

.service-pick-check {
  position: absolute;
  top: 6px;
  right: 6px;
  color: var(--primary);
}

/* ==========================================================
   WIZARD — campos
   ========================================================== */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 1rem;
}

.form-group:last-child {
  margin-bottom: 0;
}

/* Seletor "tem anúncios?" — fica logo abaixo do tipo de conta */
.form-group.ads-field {
  margin-top: 0.5rem;
  margin-bottom: 0;
  padding-top: 1.1rem;
  border-top: 1px dashed var(--border);
}

.form-group label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
}

.form-group input,
.form-group select,
.form-group textarea {
  padding: 0.75rem 1rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  font-size: 0.95rem;
  background: var(--background);
  color: var(--text-main);
  outline: none;
  font-family: inherit;
  transition: border-color 0.18s, box-shadow 0.18s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: var(--text-soft);
}

.field-hint {
  font-size: 0.75rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

/* ==========================================================
   WIZARD — PIX
   ========================================================== */
.pix-type-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.6rem;
}

.pix-type-btn {
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--background);
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}

.pix-type-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.pix-type-btn.active {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--primary);
}

.wizard-warn {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 0.6rem;
  padding: 0.7rem 0.85rem;
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.25);
  border-radius: var(--radius-sm);
  font-size: 0.78rem;
  color: var(--warning, #F59E0B);
  line-height: 1.5;
}

.wizard-warn svg { flex-shrink: 0; margin-top: 2px; }

.wizard-warn code {
  background: rgba(0, 0, 0, 0.18);
  padding: 0.05rem 0.3rem;
  border-radius: 4px;
  font-size: 0.72rem;
}

/* ==========================================================
   WIZARD — resumo
   ========================================================== */
.wizard-summary {
  margin-top: 1.5rem;
  padding: 1.1rem 1.25rem;
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.wizard-summary h3 {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--secondary);
  margin-bottom: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.wizard-summary ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.wizard-summary li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.85rem;
  padding-bottom: 0.45rem;
  border-bottom: 1px dashed var(--border);
}

.wizard-summary li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.wizard-summary li span {
  color: var(--text-muted);
  flex-shrink: 0;
}

.wizard-summary li strong {
  color: var(--secondary);
  font-weight: 600;
  text-align: right;
  word-break: break-word;
}

/* ==========================================================
   WIZARD — simulacao (3 linhas, sem porcentagem)
   ========================================================== */
.price-simulation {
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  padding: 1rem;
  margin-top: 1rem;
}

.sim-header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--secondary);
  margin-bottom: 0.75rem;
}

.sim-header svg {
  color: var(--primary);
}

.sim-grid {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

/* 1) Valor cobrado por pessoa — AZUL, maior que o da plataforma */
.sim-row-charged {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  font-size: 0.95rem;
  color: #3B82F6;
}

.sim-row-charged span:last-child {
  font-size: 1.3rem;
  font-weight: 800;
  white-space: nowrap;
}

/* 2) Valor da plataforma — VERMELHO */
.sim-row-platform {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  font-size: 0.9rem;
  color: #EF4444;
}

.sim-row-platform strong {
  font-size: 1.05rem;
  font-weight: 800;
  color: #EF4444;
  white-space: nowrap;
}

/* 3) Você recebe — VERDE, em destaque */
.sim-row-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  border-top: 1px solid var(--border);
  padding-top: 0.7rem;
  margin-top: 0.15rem;
  font-size: 0.9rem;
  color: var(--text-muted);
}

.sim-row-total strong {
  font-size: 1.6rem;
  font-weight: 800;
  color: #10B981;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.sim-footnote {
  display: block;
  margin-top: 0.85rem;
  padding-top: 0.65rem;
  border-top: 1px dashed var(--border);
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--text-muted);
}

/* Bloco informativo (taxa de adesao) */
.wizard-info {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 0.6rem;
  padding: 0.7rem 0.85rem;
  background: var(--primary-soft);
  border: 1px solid rgba(79, 70, 229, 0.22);
  border-radius: var(--radius-sm);
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--text-muted);
}

.wizard-info svg { flex-shrink: 0; margin-top: 2px; color: var(--primary); }

.wizard-info strong { color: var(--secondary); }

/* campo somente leitura (taxa de adesao) */
.form-group input[readonly],
.form-group input:disabled {
  opacity: 0.75;
  cursor: not-allowed;
  background: var(--surface);
  border-style: dashed;
}

/* ==========================================================
   Ciclos
   ========================================================== */
.cycles-grid {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.cycle-check {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: var(--background);
  cursor: pointer;
  font-size: 0.88rem;
  color: var(--text-muted);
  transition: all 0.2s;
  user-select: none;
}

.cycle-check input {
  display: none;
}

.cycle-check.active {
  border-color: var(--primary);
  color: var(--primary);
  background: rgba(79, 70, 229, 0.05);
  font-weight: 600;
}

.cycle-check:hover {
  border-color: var(--primary);
}

.custom-cycle-fields {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 1rem;
  margin-top: 1rem;
}

/* ==========================================================
   Toggle
   ========================================================== */
.toggle-section {
  margin-top: 0.5rem;
}

.toggle-label {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  cursor: pointer;
  padding: 1rem;
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  transition: border-color 0.2s;
}

.toggle-label:hover {
  border-color: var(--primary);
}

.toggle-label input[type="checkbox"] {
  display: none;
}

.toggle-switch {
  width: 44px;
  height: 24px;
  background: var(--border);
  border-radius: 12px;
  position: relative;
  flex-shrink: 0;
  transition: background 0.3s;
  margin-top: 2px;
}

.toggle-switch::after {
  content: '';
  width: 20px;
  height: 20px;
  background: white;
  border-radius: 50%;
  position: absolute;
  top: 2px;
  left: 2px;
  transition: transform 0.3s;
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.15);
}

.toggle-label input:checked + .toggle-switch {
  background: var(--primary);
}

.toggle-label input:checked + .toggle-switch::after {
  transform: translateX(20px);
}

.toggle-text {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.toggle-text strong {
  font-size: 0.9rem;
  color: var(--secondary);
}

.toggle-text small {
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* ==========================================================
   Foto do grupo
   ========================================================== */
.group-photo-upload {
  margin-top: 0.35rem;
}

.photo-preview {
  position: relative;
  width: 120px;
  height: 120px;
  border-radius: 0.75rem;
  overflow: hidden;
  border: 2px solid var(--border);
}

.photo-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  border: none;
  font-size: 0.7rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.photo-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 120px;
  border: 2px dashed var(--border);
  border-radius: 0.75rem;
  cursor: pointer;
  color: var(--text-muted);
  gap: 0.35rem;
  transition: all 0.15s;
}

.photo-placeholder:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.photo-placeholder span {
  font-size: 0.7rem;
  font-weight: 600;
}

/* ==========================================================
   Estado / avisos
   ========================================================== */
.spin {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem;
  color: var(--text-muted);
  gap: 1rem;
}

.error-banner {
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.25);
  color: #EF4444;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  font-size: 0.9rem;
  margin-bottom: 1.5rem;
}

.approval-notice {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.2);
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  color: var(--warning, #F59E0B);
  font-weight: 600;
  margin-top: 1.25rem;
}

.approval-notice svg { flex-shrink: 0; }

/* ==========================================================
   Tipo de conta
   ========================================================== */
.plan-type-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.35rem;
}

.plan-type-btn {
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}

.plan-type-btn:hover {
  border-color: var(--primary);
  color: var(--text);
}

.plan-type-btn.active {
  border-color: var(--primary);
  background: rgba(79, 70, 229, 0.1);
  color: var(--primary);
}

.plan-type-btn.custom {
  border-style: dashed;
}

.plan-type-btn.custom.active {
  border-style: solid;
  border-color: var(--warning, #F59E0B);
  background: rgba(245, 158, 11, 0.1);
  color: var(--warning, #F59E0B);
}

/* ==========================================================
   Tipo de credencial
   ========================================================== */
.cred-type-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}

.cred-type-btn {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}

.cred-type-btn:hover {
  border-color: var(--primary);
  color: var(--text);
}

.cred-type-btn.active {
  border-color: var(--primary);
  background: rgba(79, 70, 229, 0.1);
  color: var(--primary);
}

@media (max-width: 768px) {
  .create-group-page { padding-bottom: 2rem; }

  .wizard-card-body { padding: 1.25rem; }
  .wizard-card-head { padding: 1.25rem 1.25rem 1rem; }
  .wizard-foot { padding: 1rem 1.25rem; }
  .wizard-step-error { margin: 0 1.25rem 1rem; }

  .wizard-step-label { display: none; }
  .wizard-step.active .wizard-step-label { display: inline; }

  .form-grid,
  .custom-cycle-fields {
    grid-template-columns: 1fr;
  }

  .wizard-foot { justify-content: stretch; }
  .wizard-foot-left,
  .wizard-foot-right { flex: 1; }
  .wizard-foot .btn { flex: 1; justify-content: center; }
  .wizard-saved { order: -1; width: 100%; justify-content: flex-end; }

  .wizard-resume { flex-wrap: wrap; }
  .wizard-resume-text { flex: 1 1 100%; order: -1; }
  .wizard-resume-actions { width: 100%; }
  .wizard-resume-actions .btn { flex: 1; justify-content: center; }
}
.manage-group-page {
  animation: slideUpFade 0.3s ease-out forwards;
}

@keyframes slideUpFade {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.back-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--text-muted);
  background: none;
  border: none;
  font-size: 0.9rem;
  cursor: pointer;
  margin-bottom: 1rem;
  padding: 0;
  transition: color 0.2s;
}

.back-btn:hover {
  color: var(--primary);
}

.page-header {
  margin-bottom: 2rem;
}

.page-header h1 {
  font-size: 1.75rem;
  margin-bottom: 0.5rem;
  color: var(--secondary);
}

.page-header p {
  color: var(--text-muted);
}

.manage-group-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 1.5rem;
  align-items: start;
}

.manage-group-main {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.manage-group-sidebar {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  position: sticky;
  top: 2rem;
}

.manage-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 1rem;
  overflow: hidden;
}

.manage-card-header {
  padding: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
  gap: 1rem;
}

.manage-service-info {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.manage-service-icon {
  width: 52px;
  height: 52px;
  border-radius: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 800;
  color: white;
  flex-shrink: 0;
  overflow: hidden;
}

.manage-service-icon-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 1rem;
}

.manage-service-info h2 {
  font-size: 1.2rem;
  margin-bottom: 0.15rem;
}

.manage-group-label {
  font-size: 0.85rem;
  color: var(--text-muted);
  font-weight: 500;
}

.manage-status {
  padding: 0.35rem 0.85rem;
  border-radius: 2rem;
  font-size: 0.78rem;
  font-weight: 600;
}

.manage-status.open {
  background: rgba(16, 185, 129, 0.1);
  color: #10B981;
}

.manage-status.closed {
  background: rgba(239, 68, 68, 0.1);
  color: #EF4444;
}

.manage-status.forming {
  background: rgba(245, 158, 11, 0.1);
  color: #F59E0B;
}

.manage-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
}

.manage-stat {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--surface);
  padding: 1.25rem 1.5rem;
}

.manage-stat svg {
  color: var(--primary);
  flex-shrink: 0;
}

.manage-stat span {
  display: block;
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-bottom: 0.15rem;
}

.manage-stat strong {
  color: var(--secondary);
  font-size: 1.1rem;
}

/* Card Title */
.manage-card-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--border);
}

.manage-card-title svg {
  color: var(--primary);
}

.manage-card-title h3 {
  font-size: 1rem;
  color: var(--secondary);
}

/* Conteúdo do card (abaixo do título) */
.manage-card-body {
  padding: 1.25rem 1.5rem 1.5rem;
}

.manage-empty-text {
  padding: 1.5rem;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.9rem;
}

/* Members */
.manage-members-list {
  display: flex;
  flex-direction: column;
}

.manage-member-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1.5rem;
  border-bottom: 1px solid var(--border);
}

.manage-member-row:last-child {
  border-bottom: none;
}

.manage-member-number {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--primary);
  background: rgba(79, 70, 229, 0.08);
  padding: 0.2rem 0.5rem;
  border-radius: 0.375rem;
  min-width: 2rem;
  text-align: center;
}

.manage-member-info {
  flex: 1;
  min-width: 0;
}

.manage-member-info strong {
  display: block;
  font-size: 0.9rem;
  color: var(--secondary);
  margin-bottom: 0.1rem;
}

.manage-member-info span {
  display: block;
  font-size: 0.78rem;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.manage-member-check {
  color: #10B981;
  flex-shrink: 0;
}

/* Credentials */
.manage-form-group {
  padding: 0 1.5rem;
  margin-bottom: 1rem;
}

.manage-form-group:first-of-type {
  margin-top: 1.25rem;
}

.manage-form-group label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 0.35rem;
}

.manage-form-group input {
  width: 100%;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  font-size: 0.9rem;
  background: var(--background);
  color: var(--text-main);
  outline: none;
  box-sizing: border-box;
}

.manage-form-group input:focus {
  border-color: var(--primary);
}

.manage-password-input {
  position: relative;
  display: flex;
  align-items: center;
}

.manage-password-input input {
  padding-right: 2.75rem;
}

.manage-password-toggle {
  position: absolute;
  right: 0.5rem;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0.25rem;
  display: flex;
}

.manage-password-toggle:hover {
  color: var(--secondary);
}

.manage-card .btn-full {
  margin: 0 1.5rem 1.5rem;
  width: calc(100% - 3rem);
}

/* Danger Zone */
.manage-danger-zone {
  border-color: rgba(239, 68, 68, 0.2);
}

.manage-danger-zone h3 {
  color: #EF4444;
}

.manage-danger-zone p {
  padding: 0 1.5rem;
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: 1rem;
  margin-top: 0;
}

/* Financial Dashboard */
.finance-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  border-bottom: 1px solid var(--border);
}

.finance-summary-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  background: var(--surface);
  padding: 1rem 1.25rem;
  text-align: center;
}

.finance-summary-item span {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.finance-summary-item strong {
  font-size: 1rem;
  color: var(--secondary);
}

.finance-negative {
  color: var(--danger, #EF4444) !important;
}

.finance-positive {
  color: var(--success, #10B981) !important;
}

.finance-total {
  background: rgba(16, 185, 129, 0.04);
}

.finance-fee-info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.6rem 1.5rem;
  font-size: 0.72rem;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}

.finance-members-table {
  display: flex;
  flex-direction: column;
}

.finance-table-header {
  display: grid;
  grid-template-columns: 2fr 0.8fr 0.8fr 0.8fr 1fr;
  gap: 0.5rem;
  padding: 0.65rem 1.5rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface-soft, rgba(0,0,0,0.02));
}

.finance-table-header span {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.finance-table-row {
  display: grid;
  grid-template-columns: 2fr 0.8fr 0.8fr 0.8fr 1fr;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border-bottom: 1px solid var(--border);
  align-items: center;
  transition: background 0.15s;
}

.finance-table-row:last-child {
  border-bottom: none;
}

.finance-table-row:hover {
  background: var(--surface-hover, rgba(255,255,255,0.02));
}

.finance-member-cell {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.finance-member-cell strong {
  font-size: 0.85rem;
  color: var(--secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.finance-member-cell span {
  font-size: 0.72rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.finance-amount-cell {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--secondary);
}

.finance-fee-cell {
  font-size: 0.82rem;
  color: var(--danger, #EF4444);
}

.finance-net-cell {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--success, #10B981);
}

.finance-renewal-cell {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.finance-renewal-cell svg {
  color: var(--primary);
  flex-shrink: 0;
}

/* Finance Balance & Withdrawal */
.finance-balance-section {
  padding: 1rem 1.5rem 1.25rem;
}

.finance-balance-card {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.08), rgba(14, 165, 233, 0.06));
  border: 1px solid rgba(16, 185, 129, 0.2);
  border-radius: 0.75rem;
  padding: 1rem 1.25rem;
}

.finance-balance-info {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin-bottom: 0.75rem;
}

.finance-balance-info span {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.finance-balance-value {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--success, #10B981);
}

.finance-withdrawal-form {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.finance-withdrawal-input {
  flex: 1;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  font-size: 0.85rem;
  background: var(--surface);
  color: var(--text-main);
  outline: none;
  min-width: 0;
}

.finance-withdrawal-input:focus {
  border-color: var(--success, #10B981);
}

.finance-withdrawal-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.55rem 1rem;
  background: var(--success, #10B981);
  color: white;
  border: none;
  border-radius: 0.5rem;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
  flex-shrink: 0;
}

.finance-withdrawal-btn:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

.finance-withdrawal-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.finance-withdrawal-pending {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.finance-withdrawal-badge {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
}

.finance-withdrawal-badge.pending {
  background: rgba(245, 158, 11, 0.12);
  color: var(--warning, #F59E0B);
}

.finance-withdrawal-amount {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-main);
}

.manage-card-section {
  padding: 1rem 1.5rem 0;
}

.manage-card-subtitle {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.75rem;
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 600;
}

.manage-card-subtitle svg {
  color: var(--primary);
}

.finance-history-scroll {
  overflow-x: auto;
}

.finance-history-table {
  width: 100%;
  min-width: 700px;
  border-collapse: collapse;
}

.finance-history-table thead th {
  padding: 0.7rem 0.5rem;
  border-bottom: 1px solid var(--border);
  text-align: left;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.finance-history-table tbody td {
  padding: 0.8rem 0.5rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.85rem;
  color: var(--text-main);
  white-space: nowrap;
}

.finance-history-table tbody tr:last-child td {
  border-bottom: none;
}

.finance-history-table tbody tr:hover {
  background: var(--surface-hover, rgba(255,255,255,0.02));
}

.finance-history-table td:nth-child(1),
.finance-history-table td:nth-child(3),
.finance-history-table td:nth-child(4),
.finance-history-table td:nth-child(5) {
  font-variant-numeric: tabular-nums;
}

.finance-history-table td:nth-child(4) {
  color: var(--danger, #EF4444);
}

.finance-history-table td:nth-child(5) {
  color: var(--success, #10B981);
  font-weight: 700;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.7rem 1.25rem;
  border-radius: 0.5rem;
  font-size: 0.9rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-primary {
  background: var(--primary);
  color: white;
}

.btn-primary:hover {
  filter: brightness(1.1);
}

.btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-danger {
  background: #EF4444;
  color: white;
}

.btn-danger:hover {
  background: #DC2626;
}

.btn-danger:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-full {
  width: 100%;
}

.spin {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem;
  color: var(--text-muted);
  gap: 1rem;
}

.empty-state {
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: 1rem;
  padding: 3rem 1.5rem;
  text-align: center;
}

.empty-state p {
  color: var(--text-muted);
  margin-bottom: 1rem;
}

/* Toast */
.toast-success {
  position: fixed;
  top: 1.5rem;
  right: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.2rem;
  background: #10B981;
  color: white;
  border-radius: 0.75rem;
  font-size: 0.9rem;
  font-weight: 500;
  z-index: 9999;
  animation: toastIn 0.3s ease-out;
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.3);
}

.toast-success button {
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  padding: 0;
  display: flex;
  margin-left: 0.5rem;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.toast-success button:hover {
  opacity: 1;
}

@keyframes toastIn {
  from { opacity: 0; transform: translateY(-12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Approval Status Cards */
.manage-approval-pending {
  border-left: 3px solid var(--warning, #F59E0B);
  background: rgba(245, 158, 11, 0.05);
}

.manage-approval-pending svg { color: var(--warning, #F59E0B); }
.manage-approval-pending h3 { color: var(--warning, #F59E0B); font-size: 0.95rem; margin: 0.5rem 0 0.25rem; }
.manage-approval-pending p { color: var(--text-muted); font-size: 0.82rem; margin: 0; }

.manage-approval-rejected {
  border-left: 3px solid var(--danger, #EF4444);
  background: rgba(239, 68, 68, 0.05);
}

.manage-approval-rejected svg { color: var(--danger, #EF4444); }
.manage-approval-rejected h3 { color: var(--danger, #EF4444); font-size: 0.95rem; margin: 0.5rem 0 0.25rem; }
.manage-approval-rejected p { color: var(--text); font-size: 0.82rem; margin: 0.25rem 0; }
.rejected-hint { color: var(--text-muted) !important; font-size: 0.75rem !important; font-style: italic; }

.manage-approved-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: rgba(16, 185, 129, 0.1);
  color: var(--success, #10B981);
  margin-left: 0.5rem;
}

/* Aviso de assinatura pendente (o grupo ainda esta em formacao) */
.manage-subscription-banner {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-wrap: wrap;
  padding: 0.9rem 1.05rem;
  margin-bottom: 1rem;
  border: 1px solid rgba(245, 158, 11, 0.45);
  border-left: 3px solid var(--warning, #F59E0B);
  border-radius: var(--radius-md);
  background: rgba(245, 158, 11, 0.08);
}

.manage-subscription-banner > svg { color: var(--warning, #F59E0B); flex-shrink: 0; }

.manage-subscription-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  flex: 1 1 240px;
  min-width: 0;
}

.manage-subscription-text strong { font-size: 0.92rem; color: var(--text-main); }
.manage-subscription-text span { font-size: 0.83rem; color: var(--text-muted); line-height: 1.45; }

/* Credential Type Grid */
.cred-type-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.4rem;
  margin-top: 0.35rem;
}

.cred-type-btn {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}

.cred-type-btn:hover {
  border-color: var(--primary);
  color: var(--text);
}

.cred-type-btn.active {
  border-color: var(--primary);
  background: rgba(79, 70, 229, 0.08);
  color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary);
}

/* Plan Type Grid */
.plan-type-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.75rem;
}

.plan-type-btn {
  padding: 0.35rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-muted);
  font-size: 0.7rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}

.plan-type-btn:hover {
  border-color: var(--primary);
  color: var(--text);
}

.plan-type-btn.active {
  border-color: var(--primary);
  background: rgba(79, 70, 229, 0.1);
  color: var(--primary);
}

.plan-type-btn.custom {
  border-style: dashed;
}

.plan-type-btn.custom.active {
  border-style: solid;
  border-color: var(--warning, #F59E0B);
  background: rgba(245, 158, 11, 0.1);
  color: var(--warning, #F59E0B);
}

.plan-type-custom-input {
  width: 100%;
  padding: 0.45rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text);
  font-size: 0.8rem;
}

.plan-type-custom-input:focus {
  outline: none;
  border-color: var(--warning, #F59E0B);
}

/* ==========================================================
   GESTÃO DO GRUPO — botão de salvar, chips, simulação e modal
   ========================================================== */

/* O botão "Salvar" dos cards da lateral não tinha estilo NENHUM: o texto
   saía colado no card, sem forma de botão e sem estado de carregamento. */
.manage-save-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: calc(100% - 3rem);
  margin: 0 1.5rem 1.5rem;
  padding: 0.6rem 1rem;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 0.5rem;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: filter 0.15s, transform 0.15s, opacity 0.15s;
}

.manage-save-btn:hover:not(:disabled) {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.manage-save-btn:disabled {
  opacity: 1;
  background: transparent;
  border: 1px dashed var(--border);
  color: var(--text-muted);
  cursor: not-allowed;
  transform: none;
}

/* Dentro do card-mãe o respiro já vem do .manage-card-body. */
.manage-block .manage-save-btn {
  width: 100%;
  margin: 0;
}

/* Os grids de escolha encostavam na borda do card. O escopo fica na lateral
   da tela do usuário para não mexer no painel admin, que usa as mesmas
   classes com um container de padding diferente. */
.manage-group-sidebar .plan-type-grid,
.manage-group-sidebar .cycles-grid {
  padding: 0 1.5rem;
}

/* Sem esta margem os chips de ciclo encostavam no botão "Salvar". */
.manage-group-sidebar .cycles-grid {
  margin-bottom: 1rem;
}

.manage-group-sidebar .plan-type-custom-input,
.manage-group-sidebar .custom-cycle-fields {
  margin-left: 1.5rem;
  margin-right: 1.5rem;
}

.manage-group-sidebar .plan-type-custom-input {
  width: calc(100% - 3rem);
}

/* ── Card-mãe ─────────────────────────────────────────────────── */
.manage-master-card .manage-card-body {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.manage-block {
  display: flex;
  flex-direction: column;
}

.manage-block + .manage-block {
  padding-top: 1.75rem;
  border-top: 1px solid var(--border);
}

.manage-block-head {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  margin-bottom: 1rem;
}

.manage-block-head > svg {
  color: var(--primary);
  flex-shrink: 0;
  margin-top: 0.15rem;
}

.manage-block-head h4 {
  font-size: 0.92rem;
  color: var(--secondary);
  margin-bottom: 0.2rem;
}

.manage-block-head p {
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0;
}

.manage-block-danger .manage-block-head > svg {
  color: #EF4444;
}

.manage-block-danger .manage-block-head h4 {
  color: #EF4444;
}

/* Valores que o dono não edita aqui (vêm da criação do grupo). */
.manage-readonly-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.manage-readonly-item {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: var(--surface-soft, rgba(0, 0, 0, 0.02));
}

.manage-readonly-item span {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.manage-readonly-item strong {
  font-size: 1rem;
  color: var(--secondary);
}

.manage-warn {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 0.6rem;
  padding: 0.7rem 0.85rem;
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.25);
  border-radius: var(--radius-sm, 0.5rem);
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--warning, #F59E0B);
}

.manage-warn svg {
  flex-shrink: 0;
  margin-top: 0.1rem;
}

.manage-warn code {
  background: rgba(0, 0, 0, 0.15);
  padding: 0.05rem 0.3rem;
  border-radius: 0.25rem;
  font-size: 0.74rem;
}

/* Chips do tipo de chave PIX (mesma linguagem do wizard de criação). */
.pix-type-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.6rem;
}

.pix-type-btn {
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--background);
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}

.pix-type-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.pix-type-btn.active {
  border-color: var(--primary);
  background: var(--primary-soft, rgba(79, 70, 229, 0.1));
  color: var(--primary);
}

/* ── Simulação de recebimento (o talão) ──────────────────────── */
.sim-receipt {
  padding: 1rem 1.15rem;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  background: var(--surface-soft, rgba(0, 0, 0, 0.02));
}

.sim-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.35rem 0;
}

.sim-row span {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.sim-row strong {
  font-size: 0.95rem;
  font-weight: 700;
  white-space: nowrap;
}

.sim-charged { color: var(--primary); }
.sim-fee { color: #EF4444; }
.sim-net { color: var(--success, #10B981); }

.sim-divider {
  height: 1px;
  margin: 0.6rem 0;
  background-image: linear-gradient(to right, var(--border) 50%, transparent 50%);
  background-size: 8px 1px;
  background-repeat: repeat-x;
}

.sim-row-total span {
  font-weight: 600;
  color: var(--secondary);
}

.sim-row-total strong {
  font-size: 1.15rem;
  font-weight: 800;
}

.sim-footnote {
  margin: 0.6rem 0 0;
  font-size: 0.75rem;
  color: var(--text-muted);
  line-height: 1.5;
}

/* ── Saque: chave PIX vem do grupo, em dropdown ──────────────── */
.finance-pix-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  flex: 1.4;
  min-width: 0;
}

.finance-pix-field label {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.finance-pix-select {
  width: 100%;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.7rem center;
  padding-right: 2rem;
}

.finance-pix-select:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.finance-pix-hint {
  font-size: 0.7rem;
  color: var(--text-muted);
}

.finance-pix-hint strong {
  color: var(--primary);
}

/* ── Banner de erro (antes o erro era engolido) ──────────────── */
.manage-error-banner {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1rem;
  padding: 0.8rem 1rem;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 0.6rem;
  color: #EF4444;
  font-size: 0.85rem;
}

.manage-error-banner span {
  flex: 1;
}

.manage-error-banner button {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  display: flex;
  padding: 0.2rem;
  opacity: 0.7;
}

.manage-error-banner button:hover {
  opacity: 1;
}

/* ── Modo admin (vendo o grupo de outro usuário) ──────────────────── */
/* Aviso discreto no topo: o admin precisa saber que não está no painel
   do dono antes de olhar carteira e saques. */
.manage-admin-banner {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1rem;
  padding: 0.7rem 0.9rem;
  background: rgba(79, 70, 229, 0.08);
  border: 1px solid rgba(79, 70, 229, 0.25);
  border-radius: 0.6rem;
  color: var(--primary);
  font-size: 0.85rem;
}

.manage-admin-banner-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.manage-admin-banner-text strong {
  font-weight: 600;
}

.manage-admin-banner-text span {
  color: var(--text-muted);
  font-size: 0.78rem;
}

.manage-admin-banner-back {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.35rem 0.65rem;
  border-radius: 0.4rem;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.2s;
}

.manage-admin-banner-back:hover {
  color: var(--primary);
}

/* Saque no modo admin: só informação (saldo, pendências e histórico),
   sem botão de solicitar — quem pede saque é o dono do grupo. */
.finance-withdrawal-info {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  align-items: flex-end;
}

.finance-withdrawal-info-text {
  font-size: 0.78rem;
  color: var(--text-muted);
  text-align: right;
  max-width: 320px;
}

.finance-withdrawal-history {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border);
}

.finance-withdrawal-history-title {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.finance-withdrawal-history ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.finance-withdrawal-history li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.8rem;
  color: var(--text);
}

.finance-withdrawal-history li strong {
  margin-left: auto;
  font-weight: 600;
}

.finance-withdrawal-status {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.15);
  color: var(--text-muted);
}

.finance-withdrawal-status.pending {
  background: rgba(245, 158, 11, 0.12);
  color: #F59E0B;
}

.finance-withdrawal-status.completed {
  background: rgba(34, 197, 94, 0.12);
  color: #22C55E;
}

.finance-withdrawal-status.rejected {
  background: rgba(239, 68, 68, 0.1);
  color: #EF4444;
}

.finance-withdrawal-date {
  font-size: 0.72rem;
  color: var(--text-muted);
  min-width: 72px;
  text-align: right;
}

/* Danger zone no modo admin: a exclusão fica como nota, sem botão. */
.manage-danger-note {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.7rem 0.85rem;
  border-radius: 0.5rem;
  background: rgba(239, 68, 68, 0.05);
  color: var(--text-muted);
  font-size: 0.8rem;
}

.manage-danger-note svg {
  flex-shrink: 0;
  margin-top: 1px;
  color: #EF4444;
}

/* ── Modais (exclusão e pedido de preço) ─────────────────────── */
/* Base neutra: o mesmo modal serve para a exclusão (variante
   `.modal--danger`, em vermelho) e para o pedido de novo preço. */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(15, 23, 42, 0.68);
  animation: modalFade 0.15s ease-out;
}

@keyframes modalFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.modal {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 1rem;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35);
  animation: modalPop 0.18s ease-out;
}

.modal--danger {
  border-color: rgba(239, 68, 68, 0.3);
}

@keyframes modalPop {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

.modal-head {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.modal-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 0.65rem;
  background: rgba(79, 70, 229, 0.12);
  color: var(--primary);
  flex-shrink: 0;
}

.modal--danger .modal-icon {
  background: rgba(239, 68, 68, 0.12);
  color: #EF4444;
}

.modal-headings {
  flex: 1;
  min-width: 0;
}

.modal-head h3 {
  font-size: 1.05rem;
  color: var(--secondary);
  margin-bottom: 0.2rem;
  word-break: break-word;
}

.modal-head p {
  margin: 0;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.modal--danger .modal-head p {
  color: #EF4444;
  font-weight: 600;
}

.modal-close {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  padding: 0.25rem;
  border-radius: 0.4rem;
}

.modal-close:hover:not(:disabled) {
  color: var(--secondary);
  background: var(--surface-soft, rgba(0, 0, 0, 0.04));
}

.modal-body {
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  /* Só o corpo rola: cabeçalho e botões ficam sempre à vista. */
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
}

.modal-alert {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.85rem 1rem;
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.28);
  border-radius: 0.65rem;
}

.modal-alert > svg {
  color: #EF4444;
  flex-shrink: 0;
  margin-top: 0.15rem;
}

.modal-alert div {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.modal-alert strong {
  font-size: 0.88rem;
  color: var(--secondary);
}

.modal-alert span {
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.modal-alert-soft {
  background: rgba(245, 158, 11, 0.08);
  border-color: rgba(245, 158, 11, 0.28);
}

.modal-alert-soft > svg {
  color: var(--warning, #F59E0B);
}

/* Variante informativa (indigo) — usada no pedido de novo preço. */
.modal-alert-info {
  background: rgba(79, 70, 229, 0.07);
  border-color: rgba(79, 70, 229, 0.25);
}

.modal-alert-info > svg {
  color: var(--primary);
}

.modal-list {
  margin: 0;
  padding-left: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-size: 0.84rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.modal-confirm-label {
  display: block;
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 0.4rem;
}

.modal-confirm-label strong {
  color: var(--secondary);
}

.modal-input {
  width: 100%;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: var(--background);
  color: var(--text-main);
  font-size: 0.9rem;
  outline: none;
  box-sizing: border-box;
}

.modal-input:focus {
  border-color: var(--primary);
}

.modal--danger .modal-input:focus {
  border-color: #EF4444;
}

.modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
  padding: 1rem 1.5rem 1.25rem;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

.modal-foot .btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

/* ── Pedido de novo preço por vaga ───────────────────────────── */
.price-request-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.price-request-field label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--secondary);
}

.price-request-input {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 0.9rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: var(--background);
}

.price-request-input:focus-within {
  border-color: var(--primary);
}

.price-request-input span {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-muted);
}

.price-request-input input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  color: var(--text-main);
  font-size: 1rem;
  padding: 0.7rem 0;
}

.price-request-hint {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.price-request-field textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: var(--background);
  color: var(--text-main);
  font-family: inherit;
  font-size: 0.88rem;
  outline: none;
  resize: vertical;
}

.price-request-field textarea:focus {
  border-color: var(--primary);
}

.sim-receipt-compact {
  padding: 0.8rem 1rem;
}

/* Link "Solicitar novo valor" dentro do card de valor. */
.manage-inline-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  align-self: flex-start;
  margin-top: 0.35rem;
  padding: 0;
  background: none;
  border: none;
  color: var(--primary);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.manage-inline-link:hover {
  opacity: 0.75;
}

/* Selo de anúncios no card "Tipo de Conta / Plano". */
.manage-ads-block {
  padding: 0 1.5rem 1rem;
}

.manage-ads-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}

/* Prévia das regrinhas no card "Regras do grupo": é a lista que o membro
   lê no detalhe, no checkout e nas credenciais. */
.manage-rules-preview {
  background: var(--surface-2, rgba(127, 127, 127, 0.06));
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  padding: 0.75rem 0.9rem;
  margin-bottom: 1rem;
}

.manage-rules-preview-title {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-soft, var(--text-muted));
  margin-bottom: 0.5rem;
}

@media (max-width: 900px) {
  .manage-group-layout {
    grid-template-columns: 1fr;
  }

  .manage-group-sidebar {
    position: static;
  }

  .manage-stats-grid {
    grid-template-columns: 1fr;
  }

  .finance-summary {
    grid-template-columns: 1fr;
  }

  .finance-table-header,
  .finance-table-row {
    grid-template-columns: 1.5fr 0.7fr 0.7fr 0.7fr;
  }

  .manage-readonly-grid {
    grid-template-columns: 1fr;
  }

  .finance-withdrawal-form {
    flex-direction: column;
    align-items: stretch;
  }

  .finance-pix-field {
    flex: 1 1 auto;
  }

  .modal-foot {
    flex-direction: column-reverse;
  }

  .modal-foot .btn {
    width: 100%;
    justify-content: center;
  }

  .finance-table-header span:last-child,
  .finance-table-row .finance-renewal-cell {
    display: none;
  }
}
.my-groups-page {
  max-width: 900px;
}

.page-header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 2rem;
  flex-wrap: wrap;
  gap: 1rem;
}

.page-header-row h1 {
  font-size: 1.75rem;
  margin-bottom: 0.25rem;
}

.page-header-row p {
  color: var(--text-muted);
}

.empty-state {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 1rem;
  padding: 3rem 1.5rem;
  text-align: center;
}

.empty-state svg {
  color: var(--text-muted);
  margin-bottom: 1rem;
}

.empty-state h2 {
  margin-bottom: 0.5rem;
}

.empty-state p {
  color: var(--text-muted);
  margin-bottom: 1.5rem;
}

.my-groups-grid {
  display: grid;
  gap: 1rem;
}

.my-group-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 1rem;
  padding: 1.25rem;
}

/* Top Section */
.mg-top {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.mg-photo {
  width: 70px;
  height: 70px;
  border-radius: 0.75rem;
  overflow: hidden;
  flex-shrink: 0;
  border: 2px solid var(--border);
}

.mg-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mg-photo-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.3rem;
  font-weight: 700;
}

.mg-photo-placeholder img {
  width: 60%;
  height: 60%;
  object-fit: contain;
}

.mg-info {
  flex: 1;
  min-width: 0;
}

.mg-name-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.35rem;
  flex-wrap: wrap;
}

.mg-name-row h3 {
  font-size: 1rem;
  color: var(--text);
  margin: 0;
}

/* Selos do grupo (verificado / anúncios / tipo de conta) */
.mg-tags {
  margin: 0 0 0.4rem;
}

.mg-stats-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.gc-members {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.gc-vagas {
  font-size: 0.65rem;
  font-weight: 800;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  background: rgba(16, 185, 129, 0.1);
  color: var(--success);
  text-transform: uppercase;
}

.gc-vagas.full {
  background: rgba(239, 68, 68, 0.1);
  color: var(--error);
}

.gc-ref {
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  background: rgba(79, 70, 229, 0.1);
  color: var(--primary);
  font-family: monospace;
}

/* Rascunho: grupo criado pelo wizard mas ainda nao publicado */
.mg-draft-badge {
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: rgba(245, 158, 11, 0.14);
  color: var(--warning, #F59E0B);
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.my-group-card.is-draft {
  border-style: dashed;
  border-color: rgba(245, 158, 11, 0.4);
  background: linear-gradient(180deg, rgba(245, 158, 11, 0.04), transparent);
}

.my-group-card.is-draft .mg-photo-placeholder {
  opacity: 0.75;
}

.gc-price-value {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--primary);
  font-family: var(--font-title);
}

.gc-price-value small {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-weight: 500;
  margin-left: 0.25rem;
}

/* Price */
.mg-price {
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
}

/* Actions */
.mg-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.gc-divider {
  height: 1px;
  background: var(--border);
  margin: 0.75rem 0;
}

.btn-sm {
  padding: 0.4rem 0.75rem;
  font-size: 0.82rem;
}

.btn-danger-outline {
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #EF4444;
  background: transparent;
  cursor: pointer;
  border-radius: 0.375rem;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  transition: all 0.2s;
  padding: 0.4rem 0.6rem;
}

.btn-danger-outline:hover {
  background: rgba(239, 68, 68, 0.08);
}

.mg-mobile-price {
  display: none;
}

.desktop-only {
  display: block;
}
@media (max-width: 640px) {
  .my-groups-grid {
    gap: 0.75rem;
  }

  .my-group-card {
    padding: 0.875rem;
    border-radius: 0.875rem;
  }

  .mg-top {
    gap: 0.75rem;
    align-items: center;
  }

  .mg-photo {
    width: 52px;
    height: 52px;
    border-radius: 0.6rem;
  }

  .mg-name-row h3 {
    font-size: 0.9rem;
  }

  .mg-stats-row {
    gap: 0.35rem;
  }

  .gc-ref,
  .gc-members {
    font-size: 0.72rem;
  }

  .gc-vagas {
    font-size: 0.65rem;
    padding: 0.15rem 0.45rem;
  }

  .gc-divider:not(.desktop-only) {
    display: none;
  }

  .desktop-only {
    display: none !important;
  }

  .mg-mobile-price {
    display: block;
    margin-top: 0.4rem;
  }

  .mg-mobile-price .gc-price-value {
    font-size: 1.1rem;
  }

  .mg-mobile-price .gc-price-value small {
    font-size: 0.7rem;
  }

  .mg-price {
    display: none;
  }

  .mg-actions {
    justify-content: flex-end;
  }

  .btn-sm {
    font-size: 0.78rem;
    padding: 0.4rem 0.75rem;
  }
}

/* Delete confirmation modal */
.confirm-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  backdrop-filter: blur(3px);
}

.confirm-modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 1.25rem;
  padding: 2rem;
  max-width: 380px;
  width: 100%;
  text-align: center;
  position: relative;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  animation: slideUpFade 0.2s ease-out;
}

.confirm-modal-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s;
}

.confirm-modal-close:hover {
  color: var(--text);
}

.confirm-modal-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
}

.confirm-modal-icon.danger {
  background: rgba(239, 68, 68, 0.1);
  color: #EF4444;
}

.confirm-modal h3 {
  font-size: 1.15rem;
  color: var(--secondary);
  margin: 0 0 0.5rem;
}

.confirm-modal p {
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 0 0 1.5rem;
}

.confirm-modal p strong {
  color: var(--text);
}

/* Erro dentro do modal de exclusão (ex.: grupo com pagamento confirmado,
   que só a equipe pode excluir). */
.confirm-modal-error {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  text-align: left;
  background: rgba(239, 68, 68, 0.09);
  border: 1px solid rgba(239, 68, 68, 0.28);
  border-radius: 0.65rem;
  padding: 0.7rem 0.85rem;
  margin: 0 0 1.25rem;
  color: var(--text-muted);
  font-size: 0.83rem;
  line-height: 1.5;
}

.confirm-modal-error svg {
  color: #EF4444;
  flex-shrink: 0;
  margin-top: 0.1rem;
}

.confirm-modal-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
}

.confirm-modal-actions .btn-outline {
  flex: 1;
  justify-content: center;
}

.confirm-modal-actions .btn-danger {
  flex: 1;
  justify-content: center;
  background: #EF4444;
  color: white;
  border: none;
}

.confirm-modal-actions .btn-danger:hover {
  background: #DC2626;
}

.spinning {
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes slideUpFade {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.my-cupons .page-header {
  margin-bottom: 1.5rem;
}

.my-cupons-empty {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--text-muted);
}

.my-cupons-empty h3 {
  color: var(--text-main);
  margin: 1rem 0 0.4rem;
}

.my-cupons-section {
  margin-bottom: 2rem;
}

.my-cupons-section h2 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 1rem;
}

.my-cupons-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem;
}

.coupon-card {
  border: 1px dashed var(--border-strong, #475569);
  border-radius: 0.85rem;
  padding: 1.25rem;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  position: relative;
  overflow: hidden;
}

.coupon-card.available {
  border-color: var(--primary);
  background: linear-gradient(135deg, rgba(79, 70, 229, 0.06), transparent);
}

.coupon-card.used {
  opacity: 0.55;
}

.coupon-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.coupon-status {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
}

.coupon-status.available { background: rgba(34, 197, 94, 0.15); color: #15803D; }
.coupon-status.used      { background: rgba(148, 163, 184, 0.18); color: var(--text-muted); }
.coupon-status.expired   { background: rgba(239, 68, 68, 0.15); color: #B91C1C; }

.coupon-expiry {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.coupon-value {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--primary);
}

.coupon-code-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.coupon-code {
  font-family: monospace;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  background: var(--background);
  padding: 0.3rem 0.6rem;
  border-radius: 0.4rem;
  color: var(--text-main);
}

.coupon-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 0.4rem;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}

.coupon-copy:hover { color: var(--primary); border-color: var(--primary); }

.coupon-desc {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin: 0;
}

.my-cupons-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.coupon-used-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border);
  border-radius: 0.7rem;
  background: var(--surface);
}

.coupon-used-icon {
  color: var(--text-muted);
  flex-shrink: 0;
}

.coupon-used-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.coupon-used-info strong {
  font-size: 0.9rem;
  color: var(--text-main);
}

.coupon-used-info span {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.coupon-used-date {
  font-size: 0.78rem;
  color: var(--text-muted);
  white-space: nowrap;
}
/* ============================================
   ADMIN NOTIFICATIONS — Bell, Badge, Dropdown
   ============================================ */

/* Bell Button */
.notif-bell-wrapper {
  position: relative;
}

.notif-bell-btn {
  position: relative;
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 0.5rem;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.notif-bell-btn:hover {
  background: var(--primary-soft);
  color: var(--text-main);
}

.notif-bell-urgent {
  animation: notif-pulse 2s infinite;
}

@keyframes notif-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

/* Badge */
.notif-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  background: #EF4444;
  color: white;
  font-size: 0.625rem;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  line-height: 1;
  pointer-events: none;
  border: 2px solid var(--surface);
}

/* Dropdown */
.notif-dropdown {
  position: fixed;
  top: 1rem;
  right: 1rem;
  width: 380px;
  max-height: 520px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: notif-slide-in 0.2s ease;
}

@keyframes notif-slide-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

.notif-dropdown-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text-main);
}

.notif-close-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 0.375rem;
  display: flex;
  transition: all 0.15s;
}

.notif-close-btn:hover {
  background: var(--primary-soft);
  color: var(--text-main);
}

/* List */
.notif-list {
  flex: 1;
  overflow-y: auto;
  max-height: 400px;
}

.notif-empty {
  padding: 3rem 1rem;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.875rem;
}

.notif-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.875rem 1.25rem;
  cursor: pointer;
  transition: background 0.15s;
  border-bottom: 1px solid var(--border);
}

.notif-item:hover {
  background: var(--primary-soft);
}

.notif-item:last-child {
  border-bottom: none;
}

.notif-item-urgent {
  background: rgba(239, 68, 68, 0.06);
  border-left: 3px solid #EF4444;
}

.notif-item-urgent:hover {
  background: rgba(239, 68, 68, 0.12);
}

/* Icon */
.notif-icon {
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.notif-icon-payment { background: rgba(16, 185, 129, 0.12); color: #10B981; }
.notif-icon-member_joined { background: rgba(59, 130, 246, 0.12); color: #3B82F6; }
.notif-icon-member_left { background: rgba(239, 68, 68, 0.12); color: #EF4444; }
.notif-icon-user_registered { background: rgba(139, 92, 246, 0.12); color: #8B5CF6; }
.notif-icon-group_created { background: rgba(16, 185, 129, 0.12); color: #10B981; }
.notif-icon-group_approved { background: rgba(16, 185, 129, 0.12); color: #10B981; }
.notif-icon-group_rejected { background: rgba(239, 68, 68, 0.12); color: #EF4444; }
.notif-icon-group_deleted { background: rgba(239, 68, 68, 0.12); color: #EF4444; }
.notif-icon-subscription_cancelled { background: rgba(245, 158, 11, 0.12); color: #F59E0B; }
.notif-icon-info { background: rgba(107, 114, 128, 0.12); color: #6B7280; }

/* Content */
.notif-content {
  flex: 1;
  min-width: 0;
}

.notif-title {
  font-weight: 600;
  font-size: 0.8125rem;
  color: var(--text-main);
  margin-bottom: 0.125rem;
}

.notif-message {
  font-size: 0.75rem;
  color: var(--text-muted);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.notif-time {
  font-size: 0.6875rem;
  color: var(--text-muted);
  margin-top: 0.25rem;
  opacity: 0.7;
}

.notif-urgent-icon {
  color: #EF4444;
  flex-shrink: 0;
  margin-top: 0.25rem;
}

/* Footer */
.notif-dropdown-footer {
  border-top: 1px solid var(--border);
  padding: 0.75rem;
  text-align: center;
}

.notif-view-all {
  background: none;
  border: none;
  color: var(--primary);
  font-weight: 600;
  font-size: 0.8125rem;
  cursor: pointer;
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  transition: all 0.15s;
  width: 100%;
}

.notif-view-all:hover {
  background: var(--primary-soft);
}

/* ============================================
   URGENT PAYMENT POPUP
   ============================================ */

.urgent-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: urgent-fade-in 0.25s ease;
}

@keyframes urgent-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.urgent-modal {
  background: var(--surface);
  border: 2px solid #EF4444;
  border-radius: 1rem;
  width: 90%;
  max-width: 480px;
  box-shadow: 0 25px 80px rgba(239, 68, 68, 0.25);
  animation: urgent-slide-up 0.3s ease;
  overflow: hidden;
}

@keyframes urgent-slide-up {
  from { opacity: 0; transform: translateY(20px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.urgent-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.25rem 1.5rem;
  background: rgba(239, 68, 68, 0.08);
  border-bottom: 1px solid rgba(239, 68, 68, 0.15);
}

.urgent-icon {
  color: #EF4444;
  animation: urgent-icon-pulse 1.5s infinite;
}

@keyframes urgent-icon-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.15); opacity: 0.8; }
}

.urgent-header h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: #EF4444;
  margin: 0;
}

.urgent-body {
  padding: 1.25rem 1.5rem;
}

.urgent-message {
  font-size: 0.9rem;
  color: var(--text-main);
  line-height: 1.5;
  margin: 0 0 1rem;
}

.urgent-details {
  background: var(--background);
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border);
}

.urgent-detail-row {
  display: flex;
  gap: 0.75rem;
  font-size: 0.8rem;
  padding: 0.375rem 0;
  border-bottom: 1px solid var(--border);
}

.urgent-detail-row:last-child {
  border-bottom: none;
}

.urgent-detail-row span:first-child {
  color: var(--text-muted);
  font-weight: 600;
  min-width: 60px;
}

.urgent-detail-row span:last-child {
  color: var(--text-main);
}

.urgent-meta {
  font-family: monospace;
  font-size: 0.7rem;
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 80px;
  overflow-y: auto;
}

.urgent-footer {
  display: flex;
  gap: 0.75rem;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--border);
  justify-content: flex-end;
}

.urgent-btn-secondary {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-weight: 600;
  font-size: 0.875rem;
  padding: 0.625rem 1.25rem;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.15s;
}

.urgent-btn-secondary:hover {
  background: var(--primary-soft);
  color: var(--text-main);
}

.urgent-btn-primary {
  background: #EF4444;
  border: none;
  color: white;
  font-weight: 700;
  font-size: 0.875rem;
  padding: 0.625rem 1.25rem;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.15s;
}

.urgent-btn-primary:hover {
  background: #DC2626;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.35);
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
  .notif-dropdown {
    width: calc(100vw - 2rem);
    right: 1rem;
    left: 1rem;
    top: 0.75rem;
    max-height: 70vh;
  }

  .urgent-modal {
    width: 95%;
    margin: 1rem;
  }
}

/* ============================================
   LIGHT MODE
   ============================================ */

[data-theme="light"] .notif-dropdown {
  background: #ffffff;
  border-color: #e2e8f0;
}

[data-theme="light"] .notif-item:hover {
  background: #f1f5f9;
}

[data-theme="light"] .notif-item-urgent {
  background: rgba(239, 68, 68, 0.04);
  border-left-color: #EF4444;
}

[data-theme="light"] .urgent-overlay {
  background: rgba(0, 0, 0, 0.4);
}

[data-theme="light"] .urgent-modal {
  background: #ffffff;
}

[data-theme="light"] .urgent-body {
  color: #1e293b;
}

[data-theme="light"] .urgent-details {
  background: #f8fafc;
  border-color: #e2e8f0;
}
.admin-layout {
  display: flex;
  height: 100vh;
  background-color: var(--background);
  position: relative;
}

/* ---------------------------------------------
   Botão mobile
   --------------------------------------------- */
.admin-mobile-btn {
  display: none;
  position: fixed;
  top: 0.75rem;
  left: 1rem;
  z-index: 60;
  background: var(--surface);
  color: var(--text-main);
  width: 40px;
  height: 40px;
  border-radius: 0.6rem;
  border: 1px solid var(--border);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm);
}

.admin-mobile-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 50;
  backdrop-filter: blur(2px);
}

/* ---------------------------------------------
   Rail lateral
   --------------------------------------------- */
.admin-sidebar {
  width: 268px;
  min-height: 100vh;
  background-color: var(--surface);
  color: var(--text-main);
  display: flex;
  flex-direction: column;
  padding: 1.25rem 0.875rem 1rem;
  z-index: 55;
  transition: transform 0.3s ease;
  border-right: 1px solid var(--border);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.admin-logo {
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.25rem 0.625rem 1.25rem;
  color: var(--text-main);
}

.admin-logo-img {
  width: 34px;
  height: 34px;
  object-fit: contain;
  border-radius: 9px;
  background: var(--surface-soft);
  padding: 4px;
}

.admin-logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  min-width: 0;
}

.admin-logo-text strong {
  font-family: var(--font-title);
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.admin-logo-text em {
  font-style: normal;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  font-weight: 600;
  color: var(--text-soft);
  margin-top: 2px;
}

.admin-nav {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0.25rem;
}

.admin-nav-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.admin-nav-group.has-rule {
  margin-top: 0.9rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--border);
}

/* Eyebrow do grupo — é o que dá hierarquia à navegação. */
.admin-nav-group-label {
  font-size: 0.63rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--text-soft);
  padding: 0.35rem 0.7rem 0.45rem;
}

.admin-nav .nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.7rem;
  border-radius: 0.55rem;
  color: var(--text-muted);
  font-size: 0.885rem;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 0.16s ease, color 0.16s ease;
}

.admin-nav .nav-item .nav-item-icon {
  flex-shrink: 0;
  opacity: 0.85;
}

.admin-nav .nav-item:hover {
  background-color: var(--surface-soft);
  color: var(--text-main);
}

.admin-nav .nav-item:hover .nav-item-icon {
  opacity: 1;
}

/* Item ativo: fundo tintado + barra lateral, em vez de pílula cheia. */
.admin-nav .nav-item.active {
  background-color: var(--primary-soft);
  color: var(--primary);
  font-weight: 600;
}

.admin-nav .nav-item.active .nav-item-icon {
  opacity: 1;
}

.admin-nav .nav-item.active::before {
  content: '';
  position: absolute;
  left: -0.875rem;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 18px;
  border-radius: 0 3px 3px 0;
  background: var(--primary);
}

/* Badge de feedbacks novos — empurra para a direita do item do menu. */
.admin-nav .nav-item-badge {
  margin-left: auto;
  background: var(--action);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
  padding: 0.22rem 0.4rem;
  border-radius: 9999px;
  min-width: 1.25rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.admin-footer {
  margin-top: auto;
  border-top: 1px solid var(--border);
  padding-top: 0.85rem;
  flex-shrink: 0;
}

.admin-footer-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  padding: 0 0.25rem;
}

.admin-footer .nav-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.5rem 0.7rem;
  border: none;
  background: none;
  border-radius: 0.55rem;
  color: var(--error);
  font-size: 0.885rem;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: background-color 0.16s ease;
}

.admin-footer .nav-item:hover {
  background-color: var(--surface-soft);
}

.admin-version {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  text-align: center;
  padding: 0.5rem 0 0.25rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-soft);
  opacity: 0.8;
  font-variant-numeric: tabular-nums;
  user-select: none;
}

.admin-version::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--primary);
  opacity: 0.7;
  flex-shrink: 0;
}

/* ---------------------------------------------
   Área de conteúdo + barra de contexto
   --------------------------------------------- */
.admin-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow-y: auto;
  min-width: 0;
  /* Rolagem com "inércia" no iOS — sem isso a lista de usuários trava
     no dedo em vez de accompanying o gesto. */
  -webkit-overflow-scrolling: touch;
}

/* Trilha "Seção › Página" + sub-navegação. Fica no topo de todas as páginas. */
.admin-context-bar {
  position: sticky;
  top: 0;
  z-index: 25;
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 54px;
  padding: 0.55rem 2rem;
  background: var(--background);
  border-bottom: 1px solid var(--border);
}

.admin-context-trail {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
}

.admin-context-section {
  font-size: 0.63rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--text-soft);
}

.admin-context-sep {
  color: var(--text-soft);
  opacity: 0.55;
  flex-shrink: 0;
}

.admin-context-page {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-main);
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-context-tabs {
  margin-left: auto;
  display: flex;
  gap: 2px;
  padding: 3px;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: 0.6rem;
  flex-shrink: 0;
}

.admin-context-tab {
  padding: 0.32rem 0.7rem;
  border-radius: 0.42rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.16s ease, color 0.16s ease;
}

.admin-context-tab:hover {
  color: var(--text-main);
}

.admin-context-tab.active {
  background: var(--surface);
  color: var(--text-main);
  font-weight: 600;
  box-shadow: var(--shadow-xs);
}

.admin-page-wrap {
  padding: 1.75rem 2rem 4rem;
  flex: 1;
}

/* ---------------------------------------------
   Elementos comuns do admin (mantidos para as
   outras 21 páginas que usam as mesmas classes)
   --------------------------------------------- */
.admin-header {
  margin-bottom: 2rem;
}

.admin-header h1 {
  font-size: 1.75rem;
  color: var(--text-main);
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.admin-card {
  background: var(--surface);
  border-radius: 0.75rem;
  border: 1px solid var(--border);
  padding: 1.5rem;
  box-shadow: var(--shadow-xs);
}

/* ---------------------------------------------
   Mobile
   --------------------------------------------- */
@media (max-width: 768px) {
  .admin-mobile-btn {
    display: flex;
  }

  .admin-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    transform: translateX(-100%);
    box-shadow: var(--shadow-lg);
  }

  .admin-sidebar.open {
    transform: translateX(0);
  }

  .admin-mobile-overlay {
    display: block;
  }

  .admin-context-bar {
    padding: 0.55rem 1rem;
    padding-left: 3.75rem;
    min-height: 50px;
    gap: 0.5rem;
    overflow-x: auto;
  }

  .admin-context-tabs {
    margin-left: 0;
  }

  .admin-context-tab {
    padding: 0.3rem 0.55rem;
    font-size: 0.75rem;
  }

  .admin-page-wrap {
    padding: 0.85rem 0.75rem calc(3rem + env(safe-area-inset-bottom));
  }

  .admin-card {
    padding: 1rem;
  }
}
/* ═══════════════════════════════════════════════════════════════════════════
   ADMIN NO CELULAR — o contrato de densidade do painel
   ---------------------------------------------------------------------------
   O painel do DividePass é usado pelo operador no celular, com o polegar. As
   três regras abaixo valem para TODA página do admin:

   1. TABELA VIRA CARTÃO. Nenhuma lista principal exige rolagem lateral para
      ser lida. A linha da tabela vira um cartão empilhado e cada coluna
      vira uma linha rótulo → valor.

   2. FILTRO NÃO EMPILHA. Uma fileira de filtros por linha vira grade de 2
      colunas (ou faixa rolável). Filtro que ocupa a tela inteira empurra o
      conteúdo para baixo e é a primeira coisa que faz o painel parecer
      "quebrado".

   3. NENHUM SCROLL ANINHADO. Painel com rolagem própria dentro da página
      obriga o operador a rolar dois eixos. No celular a lista cresce e a
      página rola uma vez só.

   Para participar do contrato, a tabela recebe `ad-card-table` e cada <td>
   recebe `data-label="Nome da coluna"`. Papel da célula:
     .ad-lead    — identidade (avatar, nome, e-mail) — ocupa a linha inteira
     .ad-pick    — seleção em lote — vira o quadrado no canto do cartão
     .ad-actions — rodapé de ações — ganha fio divisório
   ═══════════════════════════════════════════════════════════════════════════ */

/* ------------------------------------------------------------------ */
/* 0. Ações do topo da página                                           */
/* ------------------------------------------------------------------ */
.admin-content .admin-header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* ------------------------------------------------------------------ */
/* 1. Tabela → cartão                                                 */
/* ------------------------------------------------------------------ */
@media (max-width: 720px) {
  /* O contêiner de rolagem deixa de rolar: em modo cartão não existe
     largura mínima para alcançar. */
  .admin-content .ad-cards .table-responsive {
    overflow-x: visible;
  }

  .admin-content .ad-card-table {
    width: 100%;
    min-width: 0;
  }

  /* Sem moldura dupla: o cartão é o cartão, não um cartão dentro de
     outro cartão. */
  .admin-content .admin-card:has(> .ad-card-table) {
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
  }

  .admin-content .ad-card-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }

  .admin-content .ad-card-table,
  .admin-content .ad-card-table tbody,
  .admin-content .ad-card-table tr,
  .admin-content .ad-card-table td {
    display: block;
    width: auto;
    float: none;
  }

  .admin-content .ad-card-table tr {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 0.7rem 0.8rem;
    margin: 0 0 0.55rem;
    box-shadow: var(--shadow-xs);
  }

  .admin-content .ad-card-table tr:last-child {
    margin-bottom: 0;
  }

  .admin-content .ad-card-table tbody tr:hover {
    background: var(--surface);
  }

  .admin-content .ad-card-table td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.9rem;
    padding: 0.24rem 0;
    border: none;
    text-align: right;
    font-size: 0.85rem;
    color: var(--text-main);
    min-width: 0;
  }

  .admin-content .ad-card-table td > * {
    min-width: 0;
  }

  /* Rótulo da coluna: fonte pequena, à esquerda, e o valor encosta na
     direita. É o que substitui o cabeçalho da tabela. */
  .admin-content .ad-card-table td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--text-soft);
    text-align: left;
    line-height: 1.6;
  }

  /* Identidade: nome + e-mail no topo do cartão, sem rótulo. */
  .admin-content .ad-card-table td.ad-lead {
    justify-content: flex-start;
    text-align: left;
    padding-bottom: 0.55rem;
  }

  .admin-content .ad-card-table td.ad-lead::before {
    content: none;
  }

  /* Seleção em lote: quadrado flutuante no canto do cartão. */
  .admin-content .ad-card-table td.ad-pick {
    position: absolute;
    top: 0.62rem;
    left: 0.72rem;
    padding: 0;
    width: auto;
  }

  .admin-content .ad-card-table td.ad-pick::before {
    content: none;
  }

  .admin-content .ad-card-table--pick td.ad-lead {
    padding-left: 1.9rem;
  }

  /* Ações: rodapé do cartão. */
  .admin-content .ad-card-table td.ad-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.55rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--border);
  }

  .admin-content .ad-card-table td.ad-actions::before {
    content: none;
  }

  /* O rodapé ocupa a linha inteira: os botões ficam em linha, encostados
     à direita (sem isso eles quebram um por linha e o cartão cresce).
     O botão solto (sem wrapper) mantém o próprio tamanho. */
  .admin-content .ad-card-table td.ad-actions > * {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
  }

  /* Variante em grade: duas colunas de metadados por linha. */
  .admin-content .ad-card-table--grid tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem 0.85rem;
    align-items: start;
  }

  .admin-content .ad-card-table--grid td {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.12rem;
    text-align: left;
  }

  .admin-content .ad-card-table--grid td::before {
    line-height: 1.4;
  }

  .admin-content .ad-card-table--grid td.ad-lead,
  .admin-content .ad-card-table--grid td.ad-actions {
    grid-column: 1 / -1;
  }

  .admin-content .ad-card-table--grid td.ad-actions {
    flex-direction: row;
    justify-content: flex-end;
  }

  /* O container da tabela deixa de ser uma caixa: os cartões são as caixas. */
  .admin-content .ad-cards {
    border: none;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
    padding: 0;
  }
}

/* ------------------------------------------------------------------ */
/* 2. Cabeçalho de página compacto                                    */
/* ------------------------------------------------------------------ */
@media (max-width: 720px) {
  .admin-content .admin-header {
    margin-bottom: 1rem;
    gap: 0.6rem;
  }

  .admin-content .admin-header h1 {
    font-size: 1.2rem;
    line-height: 1.25;
    margin-bottom: 0.1rem;
  }

  .admin-content .page-subtitle {
    font-size: 0.8rem;
  }

  /* Botões de ação do topo: dois por linha, sem estourar a largura. */
  .admin-content .admin-header-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    width: 100%;
  }

  .admin-content .admin-header-actions .btn {
    padding: 0.6rem 0.5rem;
    font-size: 0.78rem;
    gap: 0.35rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Botão sozinho (não cabe em par) ocupa a linha inteira. */
  .admin-content .admin-header-actions .btn:only-child {
    grid-column: 1 / -1;
  }
}

/* ------------------------------------------------------------------ */
/* 3. Faixa rolável — abas, chips e períodos                         */
/* ------------------------------------------------------------------ */
@media (max-width: 720px) {
  .admin-content .ad-scroll-row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 0.4rem;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0 -0.75rem;
    padding: 0.1rem 0.75rem 0.35rem;
  }

  .admin-content .ad-scroll-row::-webkit-scrollbar {
    display: none;
  }

  .admin-content .ad-scroll-row > * {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }
}

/* ------------------------------------------------------------------ */
/* 4. Filtros em grade de 2 colunas                                   */
/* ------------------------------------------------------------------ */
@media (max-width: 720px) {
  .admin-content .ad-filter-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
    width: 100%;
  }

  .admin-content .ad-filter-grid > * {
    width: 100%;
    min-width: 0;
  }

  .admin-content .ad-filter-grid > .ad-filter-wide {
    grid-column: 1 / -1;
  }
}

/* ------------------------------------------------------------------ */
/* 5. Sem rolagem aninhada                                            */
/* ------------------------------------------------------------------ */
@media (max-width: 720px) {
  .admin-content .activity-list,
  .admin-content .support-list,
  .admin-content .ev-list,
  .admin-content .ob-response-list {
    max-height: none;
    overflow: visible;
  }
}
.admin-dashboard {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.admin-dashboard .admin-header {
  margin-bottom: 0;
}

.admin-dashboard .admin-header h1 {
  font-size: 1.75rem;
  color: var(--secondary);
}

.admin-dashboard .admin-header p {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin-top: 0.25rem;
}

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

.metric-card {
  background: var(--surface);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  padding: 1.5rem;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  box-shadow: var(--shadow-xs);
  transition: box-shadow 0.2s, transform 0.2s;
}

.metric-card:hover {
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.metric-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.metric-icon.users { background: rgba(14, 165, 233, 0.1); color: var(--info); }
.metric-icon.subscriptions { background: rgba(16, 185, 129, 0.1); color: var(--success); }
.metric-icon.revenue { background: rgba(79, 70, 229, 0.1); color: var(--primary); }
.metric-icon.costs { background: rgba(239, 68, 68, 0.1); color: var(--error); }
.metric-icon.profit { background: rgba(16, 185, 129, 0.1); color: var(--success); }
.metric-icon.tickets { background: rgba(245, 158, 11, 0.1); color: var(--warning); }

.metric-info {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.metric-label {
  font-size: 0.73rem;
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.metric-value {
  font-family: var(--font-title);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--secondary);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.metric-value.positive { color: var(--success); }
.metric-value.negative { color: var(--error); }

.metric-sub {
  font-size: 0.75rem;
  color: var(--text-soft);
}

/* ═══ Card de pagamentos (toggle com a lista de quem pagou) ═══
   Escopado em .admin-dashboard: as classes do admin são globais e
   vazam para as outras telas. */
.admin-dashboard .pay-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}

.admin-dashboard .pay-head {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  padding: 1.15rem 1.25rem;
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.18s ease;
}

.admin-dashboard .pay-head:hover { background: rgba(79, 70, 229, 0.05); }
.admin-dashboard .pay-head:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }

.admin-dashboard .pay-head-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgba(79, 70, 229, 0.1);
  color: var(--primary);
}

.admin-dashboard .pay-head-info {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
  flex: 1;
}

.admin-dashboard .pay-head-label {
  font-size: 0.73rem;
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.admin-dashboard .pay-head-total {
  font-family: var(--font-title);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--secondary);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.admin-dashboard .pay-head-sub {
  font-size: 0.75rem;
  color: var(--text-soft);
}

.admin-dashboard .pay-chevron {
  color: var(--text-muted);
  flex-shrink: 0;
  transition: transform 0.22s ease;
}

.admin-dashboard .pay-chevron.is-open { transform: rotate(180deg); }

.admin-dashboard .pay-list {
  border-top: 1px solid var(--border);
  padding: 0.35rem 1.25rem 0.85rem;
}

.admin-dashboard .pay-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1.3fr) minmax(0, 1.1fr) auto;
  grid-template-areas: 'dot who group money';
  gap: 0.9rem;
  align-items: center;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--border);
}

.admin-dashboard .pay-row:last-child { border-bottom: none; }

.admin-dashboard .pay-dot {
  grid-area: dot;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-muted);
  flex-shrink: 0;
}

.admin-dashboard .pay-dot.is-paid { background: var(--success); }
.admin-dashboard .pay-dot.is-pending { background: var(--warning); }
.admin-dashboard .pay-dot.is-failed { background: var(--error); }
.admin-dashboard .pay-dot.is-refunded { background: var(--info); }

.admin-dashboard .pay-who,
.admin-dashboard .pay-group {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.admin-dashboard .pay-who { grid-area: who; }
.admin-dashboard .pay-group { grid-area: group; }

.admin-dashboard .pay-who strong,
.admin-dashboard .pay-group strong {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-main);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-dashboard .pay-who span,
.admin-dashboard .pay-group span {
  font-size: 0.74rem;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-dashboard .pay-money {
  grid-area: money;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.25rem;
  flex-shrink: 0;
}

.admin-dashboard .pay-money strong {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-main);
  font-variant-numeric: tabular-nums;
}

.admin-dashboard .pay-badge {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  background: rgba(148, 163, 184, 0.18);
  color: var(--text-muted);
  white-space: nowrap;
}

.admin-dashboard .pay-badge.is-paid { background: rgba(16, 185, 129, 0.15); color: var(--success); }
.admin-dashboard .pay-badge.is-pending { background: rgba(245, 158, 11, 0.15); color: var(--warning); }
.admin-dashboard .pay-badge.is-failed { background: rgba(239, 68, 68, 0.13); color: var(--error); }
.admin-dashboard .pay-badge.is-refunded { background: rgba(14, 165, 233, 0.13); color: var(--info); }

.admin-dashboard .pay-foot {
  margin: 0.6rem 0 0;
  font-size: 0.74rem;
  color: var(--text-muted);
}

.activity-section {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 1.25rem;
}

.activity-panel,
.stats-panel {
  background: var(--surface);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}

.panel-header {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.panel-header h2 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--secondary);
}

.panel-header .badge {
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
}

.activity-list {
  list-style: none;
  max-height: 400px;
  overflow-y: auto;
}

.activity-item {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  padding: 0.875rem 1.5rem;
  border-bottom: 1px solid var(--border);
  transition: background 0.15s;
}

.activity-item:last-child { border-bottom: none; }
.activity-item:hover { background: var(--surface-soft); }

.activity-dot {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.85rem;
  margin-top: 2px;
}

.activity-dot.green { background: rgba(16, 185, 129, 0.1); color: var(--success); }
.activity-dot.blue { background: rgba(14, 165, 233, 0.1); color: var(--info); }
.activity-dot.orange { background: rgba(79, 70, 229, 0.1); color: var(--primary); }
.activity-dot.red { background: rgba(239, 68, 68, 0.1); color: var(--error); }
.activity-dot.gray { background: rgba(100, 116, 139, 0.1); color: var(--text-muted); }

.activity-content {
  flex: 1;
  min-width: 0;
}

.activity-desc {
  font-size: 0.875rem;
  color: var(--text-main);
  line-height: 1.4;
}

.activity-time {
  font-size: 0.78rem;
  color: var(--text-soft);
  margin-top: 0.15rem;
}

.stats-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.stat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--border);
}

.stat-row:last-child { border-bottom: none; }

.stat-label {
  font-size: 0.875rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.stat-value {
  font-family: var(--font-title);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--secondary);
}

.empty-state {
  text-align: center;
  padding: 3rem 1.5rem;
  color: var(--text-muted);
}

.empty-state svg { margin-bottom: 0.75rem; opacity: 0.4; }
.empty-state p { font-size: 0.875rem; }

.loading-state {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4rem 1.5rem;
  color: var(--text-muted);
  gap: 0.75rem;
}

.loading-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@media (max-width: 1024px) {
  .metrics-grid { grid-template-columns: repeat(2, 1fr); }
  .activity-section { grid-template-columns: 1fr; }
}

/* ─────────────────────────────────────────────────────────────
   Celular: o painel precisa caber numa tela, não numa coluna.

   9 indicadores empilhados = 9 blocos de 130px = mais de mil
   pixels de rolagem antes de o operador ver qualquer número.
   Em 2 colunas e em versão compacta, os 9 cabem em 5 linhas e
   a fila do operador (que é a pergunta real do painel) fica
   visível junto com o contexto.
   ───────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .admin-dashboard {
    gap: 1rem;
  }

  .metrics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
  }

  .metric-card {
    position: relative;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1rem;
    padding: 0.65rem 0.7rem;
  }

  /* O ícone vira selo no canto: sai do fluxo e não empurra o número. */
  .metric-icon {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 24px;
    height: 24px;
    border-radius: 8px;
  }

  .metric-icon svg {
    width: 13px;
    height: 13px;
  }

  .metric-label {
    font-size: 0.58rem;
    letter-spacing: 0.07em;
    line-height: 1.3;
    padding-right: 1.6rem;
  }

  .metric-value {
    font-size: 1.12rem;
    letter-spacing: -0.02em;
  }

  .metric-sub {
    font-size: 0.66rem;
    line-height: 1.35;
  }

  /* Card de pagamentos: cabeçalho compacto e lista em duas linhas (quem
     pagou + valor na primeira, grupo na segunda). */
  .admin-dashboard .pay-head {
    padding: 0.8rem 0.9rem;
    gap: 0.7rem;
  }

  .admin-dashboard .pay-head-icon {
    width: 30px;
    height: 30px;
    border-radius: 9px;
  }

  .admin-dashboard .pay-head-icon svg { width: 15px; height: 15px; }
  .admin-dashboard .pay-head-total { font-size: 1.15rem; }
  .admin-dashboard .pay-head-label { font-size: 0.6rem; }
  .admin-dashboard .pay-head-sub { font-size: 0.66rem; line-height: 1.35; }

  .admin-dashboard .pay-list { padding: 0.2rem 0.9rem 0.6rem; }

  .admin-dashboard .pay-row {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      'dot who money'
      '. group group';
    gap: 0.15rem 0.6rem;
    padding: 0.6rem 0;
  }

  .admin-dashboard .pay-money { grid-row: 1; grid-column: 3; }
  .admin-dashboard .pay-group { grid-row: 2; grid-column: 2 / 4; }
  .admin-dashboard .pay-who strong,
  .admin-dashboard .pay-group strong { font-size: 0.8rem; }
  .admin-dashboard .pay-who span,
  .admin-dashboard .pay-group span { font-size: 0.7rem; }

  /* Fila do operador: linha compacta, com o número colado no título. */
  .queue-head {
    padding: 0.75rem 0.9rem;
    gap: 0.5rem;
  }

  .queue-item {
    padding: 0.65rem 0.9rem;
    gap: 0.65rem;
  }

  .queue-item-icon {
    width: 30px;
    height: 30px;
    border-radius: 9px;
  }

  .queue-item-title {
    font-size: 0.84rem;
    line-height: 1.3;
  }

  .queue-item-count {
    font-size: 1.05rem;
  }

  .queue-groups-head {
    padding: 0.7rem 0.9rem 0.45rem;
  }

  .queue-group-row {
    padding: 0.5rem 0.9rem;
    gap: 0.6rem;
  }

  .queue-group-approve {
    padding: 0.4rem 0.7rem;
    font-size: 0.75rem;
  }

  .queue-empty {
    padding: 1rem 0.9rem;
  }

  /* Painéis: cabeçalho curto e lista sem rolagem própria. */
  .panel-header {
    padding: 0.8rem 0.9rem;
  }

  .panel-header h2 {
    font-size: 0.92rem;
  }

  .activity-item {
    padding: 0.6rem 0.9rem;
    gap: 0.65rem;
  }

  .activity-dot {
    width: 28px;
    height: 28px;
  }

  .activity-desc {
    font-size: 0.82rem;
  }

  .activity-time {
    font-size: 0.72rem;
  }

  .stat-row {
    padding: 0.7rem 0.9rem;
  }

  .stat-label {
    font-size: 0.82rem;
  }

  .stat-value {
    font-size: 1rem;
  }

  .support-row {
    padding: 0.7rem 0.9rem;
  }

  .support-row-subject {
    font-size: 0.85rem;
  }
}

@media (max-width: 360px) {
  /* Tela muito estreita: 2 colunas apertam o número. Uma coluna de
     números grandes vale mais do que dois números cortados. */
  .metrics-grid {
    grid-template-columns: 1fr;
  }

  .metric-card {
    flex-direction: row;
    align-items: center;
    gap: 0.7rem;
    padding: 0.6rem 0.75rem;
  }

  .metric-icon {
    position: static;
    width: 34px;
    height: 34px;
    border-radius: 10px;
  }

  .metric-icon svg {
    width: 16px;
    height: 16px;
  }

  .metric-label {
    padding-right: 0;
  }

  .metric-value {
    font-size: 1.2rem;
  }
}

/* ---------------------------------------------
   Bloco de suporte (aparece só com ticket aberto)
   --------------------------------------------- */
.support-block {
  background: var(--surface);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
  margin-bottom: 1.5rem;
}

.support-block .panel-header h2 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.support-see-all {
  background: none;
  border: none;
  color: var(--primary);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0.25rem 0;
}

.support-see-all:hover {
  text-decoration: underline;
}

.support-list {
  list-style: none;
  max-height: 320px;
  overflow-y: auto;
}

.support-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1.5rem;
  background: none;
  border: none;
  border-bottom: 1px solid var(--border);
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease;
}

.support-list li:last-child .support-row {
  border-bottom: none;
}

.support-row:hover {
  background: var(--primary-soft);
}

.support-priority-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--text-muted, #94a3b8);
}

.support-row.priority-high .support-priority-dot {
  background: #f59e0b;
}

.support-row.priority-critical .support-priority-dot {
  background: #ef4444;
}

.support-row-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.support-row-subject {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-main);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.support-row-meta {
  font-size: 0.78rem;
  color: var(--text-muted, #94a3b8);
}

.priority-badge {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  flex-shrink: 0;
}

.priority-badge.high {
  background: rgba(245, 158, 11, 0.15);
  color: #b45309;
}

.priority-badge.critical {
  background: rgba(239, 68, 68, 0.15);
  color: #dc2626;
}

/* ---------------------------------------------
   Fila do operador — a assinatura do painel.
   O painel abre aqui: primeiro o que está esperando
   decisão, depois os números como contexto.
   --------------------------------------------- */
.operator-queue {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}

.queue-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border);
}

.queue-head h2 {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  margin: 0;
}

.queue-count {
  margin-left: auto;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--action);
  background: var(--action-bg);
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
}

.queue-count-ok {
  color: var(--success);
  background: var(--economy-bg);
}

.queue-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ── Grupos aguardando aprovação (topo da fila) ────────────────────────── */
.queue-groups {
  border-bottom: 1px solid var(--border);
  background: var(--warning-bg, rgba(245, 158, 11, 0.06));
}

.queue-groups-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.8rem 1.25rem 0.6rem;
}

.queue-groups-title {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.83rem;
  font-weight: 700;
  color: var(--text-main);
}

.queue-groups-title svg {
  color: var(--warning, #F59E0B);
}

.queue-groups-see-all {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: none;
  border: none;
  padding: 0;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--action);
  cursor: pointer;
}

.queue-groups-see-all:hover {
  text-decoration: underline;
}

.queue-groups-list {
  list-style: none;
  margin: 0;
  padding: 0 0 0.4rem;
}

.queue-group-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 1.25rem;
}

.queue-group-info {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.queue-group-name {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-main);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.queue-group-meta {
  font-size: 0.75rem;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.queue-group-approve {
  flex-shrink: 0;
  padding: 0.45rem 0.95rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: #fff;
  background: var(--primary);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: filter 0.15s ease, opacity 0.15s ease;
}

.queue-group-approve:hover:not(:disabled) {
  filter: brightness(1.08);
}

.queue-group-approve:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.queue-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem 1.25rem;
  background: none;
  border: none;
  border-bottom: 1px solid var(--border);
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease;
}

.queue-list li:last-child .queue-item {
  border-bottom: none;
}

.queue-item:hover {
  background: var(--surface-soft);
}

.queue-item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  flex-shrink: 0;
}

.queue-item.error .queue-item-icon { background: rgba(239, 68, 68, 0.12); color: var(--error); }
.queue-item.warning .queue-item-icon { background: rgba(245, 158, 11, 0.12); color: var(--warning); }
.queue-item.info .queue-item-icon { background: var(--tech-bg); color: var(--tech); }

.queue-item-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.queue-item-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-main);
}

.queue-item-action {
  font-size: 0.76rem;
  color: var(--text-muted);
}

.queue-item-count {
  font-family: var(--font-title);
  font-size: 1.25rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--text-main);
  flex-shrink: 0;
}

.queue-item.error .queue-item-count { color: var(--error); }
.queue-item.warning .queue-item-count { color: var(--warning); }

.queue-item-arrow {
  color: var(--text-soft);
  flex-shrink: 0;
  transition: transform 0.15s ease;
}

.queue-item:hover .queue-item-arrow {
  transform: translateX(2px);
  color: var(--text-muted);
}

.queue-empty {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1.25rem;
  color: var(--success);
}

.queue-empty div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.queue-empty strong {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-main);
}

.queue-empty span {
  font-size: 0.8rem;
  color: var(--text-muted);
}
.users-page {
  animation: slideUpFade 0.4s ease-out forwards;
}

@keyframes slideUpFade {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.admin-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 2rem;
  gap: 1rem;
  flex-wrap: wrap;
}

.admin-header h1 {
  font-size: 1.75rem;
  margin-bottom: 0.25rem;
  color: var(--secondary);
}

.page-subtitle {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin: 0;
}

.users-toolbar {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.search-box {
  flex: 1;
  min-width: 280px;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
}

.search-box svg {
  color: var(--text-muted);
  flex-shrink: 0;
}

.search-box input {
  flex: 1;
  border: none;
  background: transparent;
  outline: none;
  font-size: 0.95rem;
  color: var(--text-main);
}

.search-box input::placeholder {
  color: var(--text-muted);
}

.error-banner {
  background: rgba(239, 68, 68, 0.1);
  color: #EF4444;
  padding: 1rem;
  border-radius: 0.75rem;
  margin-bottom: 1.5rem;
}

.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem;
  color: var(--text-muted);
  gap: 1rem;
}

.spin {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.users-table-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.05);
}

.users-table {
  width: 100%;
  border-collapse: collapse;
}

.users-table th {
  text-align: left;
  padding: 1rem 1.25rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  background: var(--background);
  border-bottom: 1px solid var(--border);
}

.users-table td {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

.users-table tbody tr:last-child td {
  border-bottom: none;
}

.users-table tbody tr:hover {
  background: var(--background);
}

.user-cell {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), #818CF8);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.9rem;
}

.user-cell strong {
  display: block;
  color: var(--secondary);
  font-size: 0.95rem;
}

.user-cell span {
  color: var(--text-muted);
  font-size: 0.85rem;
}

.contact-cell {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.contact-cell svg {
  color: var(--primary);
}

.role-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.75rem;
  border-radius: 2rem;
  font-size: 0.8rem;
  font-weight: 600;
}

.role-badge.admin {
  background: rgba(79, 70, 229, 0.1);
  color: var(--primary);
}

.role-badge.user {
  background: rgba(14, 165, 233, 0.1);
  color: var(--blue, #0EA5E9);
}

.status-badge {
  display: inline-flex;
  padding: 0.35rem 0.75rem;
  border-radius: 2rem;
  font-size: 0.8rem;
  font-weight: 600;
}

.status-badge.active {
  background: rgba(16, 185, 129, 0.1);
  color: var(--success);
}

.status-badge.pending {
  background: rgba(245, 158, 11, 0.1);
  color: var(--warning);
}

.status-badge.inactive,
.status-badge.suspended {
  background: rgba(239, 68, 68, 0.1);
  color: var(--error);
}

.date-cell {
  color: var(--text-muted);
  font-size: 0.9rem;
}

.action-btn {
  width: 32px;
  height: 32px;
  border-radius: 0.5rem;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.action-btn:hover {
  background: var(--background);
  color: var(--secondary);
}

.action-btn.danger:hover {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

.action-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.actions-cell {
  display: flex;
  gap: 0.25rem;
}

.empty-table {
  padding: 3rem;
  text-align: center;
  color: var(--text-muted);
}

/* Faixa intermediária (tablet): a tabela ainda existe, mas as colunas
   secundárias saem para o operador não precisar rolar de lado. No celular
   a linha vira cartão (ver admin-responsive.css). */
@media (min-width: 721px) and (max-width: 900px) {
  .users-table th:nth-child(4),
  .users-table td:nth-child(4),
  .users-table th:nth-child(5),
  .users-table td:nth-child(5) {
    display: none;
  }
}

@media (max-width: 900px) {
  .users-table th,
  .users-table td {
    padding: 0.75rem;
  }
}

/* ----------- Filtros e ordenação ----------- */
.users-filters {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.users-filter {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0 0.6rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: var(--background);
  color: var(--text-muted);
  height: 42px;
}

.users-filter select,
.users-filter-select {
  border: none;
  background: transparent;
  color: var(--text-main);
  font-size: 0.85rem;
  padding: 0.4rem 0.2rem;
  cursor: pointer;
  font-family: inherit;
}

.users-filter select:focus,
.users-filter-select:focus {
  outline: none;
}

.users-filter-select {
  height: 42px;
  padding: 0 0.7rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
}

.users-filter-clear {
  height: 42px;
  padding: 0 0.8rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.82rem;
  cursor: pointer;
}

.users-filter-clear:hover {
  color: var(--text-main);
  border-color: var(--primary);
}

.action-btn.whatsapp {
  color: #25D366;
}

.action-btn.whatsapp:hover {
  background: rgba(37, 211, 102, 0.12);
}

@media (max-width: 768px) {
  .users-filters {
    width: 100%;
  }
}

/* Celular: os filtros viram grade de 2 colunas. Empilhados, quatro
   filtros ocupavam meia tela e o resultado da busca ficava abaixo
   da dobra. */
@media (max-width: 720px) {
  .users-toolbar {
    gap: 0.6rem;
    margin-bottom: 1rem;
  }

  .search-box {
    min-width: 0;
    width: 100%;
    padding: 0.6rem 0.8rem;
  }

  .search-box input {
    font-size: 0.9rem;
  }

  .users-filters {
    gap: 0.45rem;
  }

  .users-filter,
  .users-filter-select,
  .users-filter-clear {
    min-width: 0;
    max-width: 100%;
    height: 40px;
  }

  .users-filter {
    padding: 0 0.5rem;
    gap: 0.25rem;
  }

  .users-filter select,
  .users-filter-select {
    font-size: 0.78rem;
    width: 100%;
    min-width: 0;
    text-overflow: ellipsis;
  }

  .users-filter-select {
    padding: 0 0.5rem;
  }

  .users-filter-clear {
    font-size: 0.78rem;
    height: 38px;
  }

  /* A tabela vira cartão: o cartão não usa as bordas da tabela. */
  .users-table tbody tr.row-selected {
    background: rgba(79, 70, 229, 0.08);
    border-color: var(--primary);
  }

  .users-table tbody tr.row-selected:hover {
    background: rgba(79, 70, 229, 0.1);
  }

  .user-cell strong {
    font-size: 0.92rem;
  }

  .user-cell span {
    font-size: 0.78rem;
    word-break: break-all;
  }

  /* E-mail longo não pode empurrar o cartão para fora da tela. */
  .admin-content .users-table td.ad-lead .user-cell {
    flex: 1;
    min-width: 0;
  }

  .user-cell > div {
    min-width: 0;
  }

  /* No cartão as pílulas de papel e push ficam lado a lado. */
  .admin-content .users-table td[data-label="Permissão"] {
    flex-direction: column;
    align-items: flex-start;
  }

  /* A coluna de seleção vira o quadrado no canto do cartão. O !important
     do desktop precisa ser anulado aqui. */
  .admin-content .users-table td.ad-pick {
    padding: 0 !important;
  }

  .admin-content .users-table td.ad-pick .users-check-btn {
    width: 38px;
    height: 38px;
    padding: 0;
    align-items: center;
    justify-content: center;
  }

  /* Barra de ações em lote: 2 botões por linha, "limpar seleção" na
     largura toda. */
  .users-bulk-bar {
    padding: 0.6rem 0.75rem;
    gap: 0.6rem;
  }

  .users-bulk-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
    width: 100%;
    margin-left: 0;
  }

  .users-bulk-actions .btn {
    width: 100%;
    justify-content: center;
    padding: 0.5rem 0.35rem;
    font-size: 0.75rem;
    gap: 0.3rem;
  }

  .users-bulk-actions .btn-ghost {
    grid-column: 1 / -1;
  }
}

/* As duas pílulas da coluna "Permissão" (papel + push) em uma linha só. */
.users-perm-cell {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.users-perm-cell .push-enabled {
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
  font-size: 0.7rem;
}

/* ============================================================
   Seleção em lote
   ============================================================ */

.users-select-cell {
  width: 44px;
  text-align: center;
  padding-left: 1rem !important;
  padding-right: 0 !important;
}

.users-check-btn {
  background: transparent;
  border: none;
  padding: 0.25rem;
  cursor: pointer;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  transition: color 0.15s ease, transform 0.15s ease;
}

.users-check-btn:hover:not(:disabled) {
  color: var(--primary);
  transform: scale(1.08);
}

.users-check-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.users-check-mixed {
  color: var(--primary);
}

.users-check-hidden {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}

.users-table tbody tr.row-selected {
  background: rgba(79, 70, 229, 0.06);
}

.users-table tbody tr.row-selected:hover {
  background: rgba(79, 70, 229, 0.1);
}

.users-bulk-bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  background: var(--surface);
  border: 1px solid var(--primary);
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.12);
}

.users-bulk-count {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--text-main);
  font-size: 0.9rem;
}

.users-bulk-count svg {
  color: var(--primary);
}

.users-bulk-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-left: auto;
}

.users-bulk-panel {
  display: flex;
  align-items: flex-end;
  gap: 0.75rem;
  flex-wrap: wrap;
  width: 100%;
  padding-top: 0.75rem;
  margin-top: 0.25rem;
  border-top: 1px solid var(--border);
}

.users-bulk-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.users-bulk-field select {
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text-main);
  border-radius: var(--radius-xs);
  padding: 0.5rem 0.75rem;
  font-size: 0.85rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
  min-width: 190px;
}

.users-bulk-report {
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.35);
  color: var(--text-main);
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  margin-bottom: 1rem;
  font-size: 0.85rem;
}

.users-bulk-report.has-errors {
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.35);
}

.users-bulk-report ul {
  margin: 0.5rem 0 0;
  padding-left: 1.1rem;
  color: var(--danger);
  font-size: 0.8rem;
}

.users-page .btn-sm {
  padding: 0.5rem 0.9rem;
  font-size: 0.8rem;
}

.users-page .btn-danger {
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.4);
  color: #EF4444;
}

.users-page .btn-danger:hover:not(:disabled) {
  background: #EF4444;
  border-color: #EF4444;
  color: white;
}

.users-page .btn-ghost {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
}

.users-page .btn-ghost:hover:not(:disabled) {
  border-color: var(--border-strong);
  color: var(--text-main);
}

@media (max-width: 768px) {
  .users-bulk-actions {
    margin-left: 0;
    width: 100%;
  }

  .users-bulk-field,
  .users-bulk-field select {
    width: 100%;
    min-width: 0;
  }
}
/* ===========================================================================
   Registro de eventos
   ---------------------------------------------------------------------------
   O log é lido em camadas: barra de controle (busca + período), filtro por
   tipo com contagem, contagem do resultado, e por fim o registro agrupado por
   dia. Cada camada responde uma pergunta diferente e fica visualmente
   separada para o operador não precisar adivinhar onde cada coisa está.
   ========================================================================= */

.ev-root {
  display: flex;
  flex-direction: column;
}

/* --------------------------------- toolbar -------------------------------- */
.ev-toolbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.ev-search {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  min-width: 240px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0.6rem;
  padding: 0.5rem 0.85rem;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.ev-search:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}

.ev-search svg {
  color: var(--text-soft);
  flex-shrink: 0;
}

.ev-search input {
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  outline: none;
  color: var(--text-main);
  font-size: 0.88rem;
  font-family: inherit;
}

.ev-search input::placeholder {
  color: var(--text-soft);
}

.ev-search-clear {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: none;
  border-radius: 50%;
  background: var(--surface-soft);
  color: var(--text-muted);
  cursor: pointer;
  flex-shrink: 0;
}

.ev-search-clear:hover {
  color: var(--text-main);
}

/* Controle de período — segmentado, igual à sub-nav do painel. */
.ev-period {
  display: flex;
  gap: 2px;
  padding: 3px;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: 0.6rem;
  flex-shrink: 0;
}

.ev-period button {
  padding: 0.34rem 0.7rem;
  border: none;
  border-radius: 0.45rem;
  background: none;
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}

.ev-period button:hover {
  color: var(--text-main);
}

.ev-period button.active {
  background: var(--surface);
  color: var(--primary);
  font-weight: 600;
  box-shadow: var(--shadow-xs);
}

/* ------------------------------ filtro por tipo --------------------------- */
.ev-chips-block {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.ev-chips-label {
  font-size: 0.63rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--text-soft);
  padding-top: 0.45rem;
  flex-shrink: 0;
}

.ev-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.ev-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.34rem 0.6rem;
  border-radius: 2rem;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  white-space: nowrap;
}

.ev-chip:hover:not(:disabled) {
  color: var(--text-main);
  border-color: var(--border-strong);
}

.ev-chip.active {
  background: var(--primary-soft);
  border-color: var(--primary);
  color: var(--primary);
  font-weight: 600;
}

.ev-chip:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}

.ev-chip-count {
  font-size: 0.68rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  padding: 0.05rem 0.35rem;
  border-radius: 1rem;
  background: rgba(148, 163, 184, 0.16);
  color: var(--text-muted);
}

.ev-chip.active .ev-chip-count {
  background: rgba(79, 70, 229, 0.2);
  color: var(--primary);
}

.ev-chip.is-empty .ev-chip-count {
  background: rgba(148, 163, 184, 0.08);
}

/* --------------------------------- stats ---------------------------------- */
.ev-stats {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  flex-wrap: wrap;
  padding-bottom: 0.75rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.8rem;
  color: var(--text-muted);
}

.ev-stats-main strong {
  color: var(--text-main);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.ev-stats-main em {
  font-style: normal;
  color: var(--text-main);
}

.ev-stats-sub {
  color: var(--text-soft);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------- dias ----------------------------------- */
.ev-days {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.ev-day-head {
  position: sticky;
  top: 54px;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0;
  margin-bottom: 0.4rem;
  background: var(--background);
  border-bottom: 1px solid var(--border);
  color: var(--text-soft);
}

.ev-day-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}

.ev-day-count {
  font-size: 0.68rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  padding: 0.05rem 0.4rem;
  border-radius: 1rem;
  background: var(--surface-soft);
  color: var(--text-muted);
}

.ev-day-items {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

/* ---------------------------------- linha --------------------------------- */
.ev-row {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0.6rem;
  overflow: hidden;
  transition: border-color 0.15s;
}

.ev-row:hover {
  border-color: var(--border-strong);
}

.ev-row.is-open {
  border-color: var(--primary);
}

.ev-row-main {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: start;
  gap: 0.75rem;
  padding: 0.7rem 0.85rem;
  cursor: pointer;
  outline: none;
}

.ev-row-main:focus-visible {
  box-shadow: inset 0 0 0 2px var(--primary);
}

.ev-row-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.ev-row-title {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-main);
  line-height: 1.35;
}

.ev-row-message {
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.4;
}

.ev-row-chips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.25rem;
}

.ev-fmt {
  font-size: 0.72rem;
  color: var(--text-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}

.ev-fmt.is-discount {
  color: var(--economy);
  font-weight: 600;
}

/* Horário: monoespaçado e tabular para a coluna não dançar. */
.ev-row-time {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  flex-shrink: 0;
  white-space: nowrap;
}

.ev-row-time time {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  letter-spacing: -0.01em;
}

.ev-row-time em {
  font-style: normal;
  font-size: 0.68rem;
  color: var(--text-soft);
}

.ev-row-caret {
  color: var(--text-soft);
  flex-shrink: 0;
  margin-top: 0.15rem;
  transition: transform 0.2s ease;
}

.ev-row.is-open .ev-row-caret {
  transform: rotate(180deg);
}

/* ------------------------------- detalhe ---------------------------------- */
.ev-row-detail {
  border-top: 1px solid var(--border);
  background: var(--surface-soft);
  padding: 0.85rem;
}

.ev-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 0.75rem 1.25rem;
}

.ev-detail-item {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.ev-detail-item label {
  font-size: 0.63rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-soft);
}

.ev-detail-item span {
  font-size: 0.8rem;
  color: var(--text-main);
  word-break: break-word;
}

.ev-detail-item span.is-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.72rem;
  color: var(--text-muted);
}

.ev-detail-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.9rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
}

.ev-ghost-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.32rem 0.7rem;
  border-radius: 0.45rem;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  font-size: 0.76rem;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}

.ev-ghost-btn:hover {
  color: var(--text-main);
  border-color: var(--border-strong);
}

/* ------------------------------ carregar mais ------------------------------ */
.ev-more-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding: 1.25rem 0 0.5rem;
}

.ev-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1.1rem;
  border-radius: 0.6rem;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-main);
  font-size: 0.82rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.ev-more-btn:hover:not(:disabled) {
  border-color: var(--primary);
  background: var(--primary-soft);
}

.ev-more-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.ev-more-hint {
  font-size: 0.72rem;
  color: var(--text-soft);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------- tons ----------------------------------- */
.ev-tone-blue   { --ev-bg: #1e3a5f; --ev-fg: #93c5fd; }
.ev-tone-green  { --ev-bg: #052e16; --ev-fg: #6ee7b7; }
.ev-tone-red    { --ev-bg: #450a0a; --ev-fg: #fca5a5; }
.ev-tone-amber  { --ev-bg: #451a03; --ev-fg: #fcd34d; }
.ev-tone-violet { --ev-bg: #3b0764; --ev-fg: #d8b4fe; }
.ev-tone-cyan   { --ev-bg: #0c4a6e; --ev-fg: #7dd3fc; }
.ev-tone-slate  { --ev-bg: #1f2937; --ev-fg: #cbd5e1; }

.ev-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--ev-bg);
  color: var(--ev-fg);
}

.ev-type-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.1rem 0.5rem;
  border-radius: 1rem;
  font-size: 0.68rem;
  font-weight: 600;
  white-space: nowrap;
  background: var(--ev-bg);
  color: var(--ev-fg);
}

/* ------------------------------- responsivo ------------------------------- */
@media (max-width: 860px) {
  .ev-chips-block {
    flex-direction: column;
    gap: 0.35rem;
  }

  .ev-chips-label {
    padding-top: 0;
  }

  .ev-row-main {
    grid-template-columns: auto 1fr auto;
  }

  .ev-row-time {
    grid-column: 2 / -1;
    align-items: flex-start;
    flex-direction: row;
    gap: 0.4rem;
  }

  .ev-row-caret {
    grid-row: 1;
    grid-column: 3;
  }
}

@media (max-width: 640px) {
  .ev-period {
    width: 100%;
    overflow-x: auto;
  }

  .ev-detail-grid {
    grid-template-columns: 1fr;
  }
}

/* ─────────────────────────────────────────────────────────────
   Celular — o registro de eventos é lido com o polegar.
   Os chips viram uma faixa rolável (dez filtros empilhados
   ocupavam meia tela antes da primeira linha da lista) e a linha
   do log encurta para caber em 2 linhas de título.
   ───────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .ev-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
    margin: 0 -0.75rem;
    padding: 0.15rem 0.75rem 0.35rem;
  }

  .ev-chips::-webkit-scrollbar {
    display: none;
  }

  .ev-chip {
    flex: 0 0 auto;
    scroll-snap-align: start;
    padding: 0.4rem 0.7rem;
  }

  .ev-chip-count {
    padding: 0.05rem 0.35rem;
    font-size: 0.66rem;
  }

  .ev-chips-block {
    margin-bottom: 0.35rem;
  }

  .ev-toolbar {
    gap: 0.5rem;
    margin-bottom: 0.85rem;
  }

  .ev-search {
    min-width: 0;
    width: 100%;
    padding: 0.5rem 0.75rem;
  }

  .ev-search input {
    font-size: 0.85rem;
  }

  .ev-period {
    width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .ev-period::-webkit-scrollbar {
    display: none;
  }

  .ev-period button {
    padding: 0.44rem 0.8rem;
    font-size: 0.76rem;
  }

  .ev-row-main {
    padding: 0.6rem 0.7rem;
    gap: 0.55rem;
  }

  .ev-row-title {
    font-size: 0.84rem;
  }

  .ev-row-message {
    font-size: 0.78rem;
  }

  .ev-icon {
    width: 26px;
    height: 26px;
  }
}
.user-detail-page {
  animation: slideUpFade 0.3s ease-out forwards;
}

@keyframes slideUpFade {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.user-detail-header {
  margin-bottom: 1.5rem;
}

.back-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--text-muted);
  background: none;
  border: none;
  font-size: 0.9rem;
  cursor: pointer;
  margin-bottom: 0.75rem;
  padding: 0;
  transition: color 0.2s;
  text-decoration: none;
}

.back-btn:hover {
  color: var(--primary);
}

.user-tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.user-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  color: var(--text-muted);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.user-tab:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.user-tab.active {
  background: rgba(79, 70, 229, 0.1);
  border-color: var(--primary);
  color: var(--primary);
}

.user-form {
  padding: 1.5rem;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-bottom: 1rem;
}

.form-row {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.form-row label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
}

.form-row input,
.form-row select {
  padding: 0.75rem 1rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: var(--background);
  color: var(--text-main);
  font-size: 0.95rem;
}

.form-row input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.form-row input:focus,
.form-row select:focus {
  outline: none;
  border-color: var(--primary);
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  margin-top: 1rem;
}

.history-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.history-table th,
.history-table td {
  padding: 1rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

.history-table th {
  color: var(--text-muted);
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.35rem 0.75rem;
  border-radius: 2rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
}

.status-badge.active,
.status-badge.paid {
  background: rgba(16, 185, 129, 0.1);
  color: var(--success);
}

.status-badge.pending {
  background: rgba(251, 146, 60, 0.1);
  color: #FB923C;
}

.status-badge.cancelled,
.status-badge.expired,
.status-badge.failed {
  background: rgba(239, 68, 68, 0.1);
  color: var(--error);
}

.status-badge.inactive,
.status-badge.suspended {
  background: rgba(148, 163, 184, 0.1);
  color: var(--text-muted);
}

.empty-table {
  padding: 2rem;
  text-align: center;
  color: var(--text-muted);
}

.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 3rem;
  color: var(--text-muted);
}

.spin {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@media (max-width: 768px) {
  .form-grid {
    grid-template-columns: 1fr;
  }

  /* As 7 abas empilhavam em 7 linhas e empurravam o conteúdo para
     baixo. Viram uma faixa rolável que fica presa no topo. */
  .user-detail-header {
    margin-bottom: 0.9rem;
  }

  .back-btn {
    margin-bottom: 0.5rem;
    font-size: 0.85rem;
  }

  .user-tabs {
    margin-bottom: 1rem;
    gap: 0.35rem;
    border-bottom: 1px solid var(--border);
    padding-bottom: 0.35rem;
  }

  .user-tab {
    padding: 0.55rem 0.75rem;
    font-size: 0.85rem;
    gap: 0.35rem;
  }

  .global-crons-grid {
    grid-template-columns: 1fr;
  }

  .cron-detail-row {
    flex-wrap: wrap;
  }
}

/* ─────────────────────────────────────────────────────────────
   Link do grupo na aba Assinaturas
   O operador não quer ler o nome do grupo — quer abrir o grupo.
   ───────────────────────────────────────────────────────────── */
.user-sub-group-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--primary);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px dashed rgba(99, 102, 241, 0.45);
  padding-bottom: 1px;
  transition: color 0.15s, border-color 0.15s, gap 0.15s;
}

.user-sub-group-link:hover {
  color: #818cf8;
  border-bottom-color: #818cf8;
  gap: 0.45rem;
}

.user-sub-group-link:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 4px;
}

.user-sub-group-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 18ch;
}

.user-sub-group-link svg {
  flex-shrink: 0;
  opacity: 0.75;
}

/* No celular o nome do grupo fica com espaço para respirar. */
@media (max-width: 720px) {
  .user-sub-group-name {
    max-width: 14ch;
  }

  .user-form {
    padding: 1rem;
  }

  .form-actions .btn {
    width: 100%;
    justify-content: center;
  }
}

/* Crons Tab */
.crons-tab {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.crons-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.crons-section-header h3 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text);
  margin: 0;
}

.crons-subtitle {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.global-crons-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 0.75rem;
}

.global-cron-card {
  background: var(--bg-secondary, #0d1117);
  border: 1px solid var(--border, #1f2937);
  border-radius: 10px;
  padding: 1rem;
  transition: border-color 0.2s;
}

.global-cron-card.affected {
  border-left: 3px solid #10B981;
}

.global-cron-card.not-affected {
  border-left: 3px solid #374151;
  opacity: 0.7;
}

.global-cron-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.5rem;
}

.global-cron-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.global-cron-card.affected .global-cron-icon {
  background: rgba(16, 185, 129, 0.15);
  color: #10B981;
}

.global-cron-card.not-affected .global-cron-icon {
  background: rgba(107, 114, 128, 0.15);
  color: #6b7280;
}

.global-cron-info {
  flex: 1;
}

.global-cron-info strong {
  display: block;
  color: var(--text);
  font-size: 0.9rem;
}

.cron-schedule {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-family: 'Courier New', monospace;
}

.cron-affected-badge {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.2rem 0.5rem;
  border-radius: 9999px;
  white-space: nowrap;
}

.cron-affected-badge.yes {
  background: rgba(16, 185, 129, 0.15);
  color: #10B981;
}

.cron-affected-badge.no {
  background: rgba(107, 114, 128, 0.15);
  color: #6b7280;
}

.global-cron-desc {
  font-size: 0.82rem;
  color: var(--text-secondary);
  margin: 0.5rem 0;
  line-height: 1.5;
}

.global-cron-detail {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border, #1f2937);
}

.global-cron-detail strong {
  display: block;
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-bottom: 0.35rem;
}

.cron-detail-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: var(--text-secondary);
  padding: 0.3rem 0;
}

.cron-detail-amount {
  font-weight: 600;
  color: var(--text);
}

.cron-detail-status {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.1rem 0.4rem;
  border-radius: 9999px;
}

.cron-detail-status.active {
  background: rgba(16, 185, 129, 0.15);
  color: #10B981;
}

.cron-detail-status.retrying {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
}

.cron-detail-status.failed {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

.cron-card-info {
  font-family: 'Courier New', monospace;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.cron-next-charge {
  font-size: 0.75rem;
  color: #0ea5e9;
}

.log-details-cell {
  max-width: 300px;
  font-size: 0.78rem;
}

.log-detail-item {
  display: block;
  color: var(--text-secondary);
  line-height: 1.4;
}

.log-detail-item strong {
  color: var(--text-muted);
}

/* Modal */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 1rem;
}

.modal-content {
  background: var(--card-bg, #111827);
  border: 1px solid var(--border, #1f2937);
  border-radius: 12px;
  width: 100%;
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
}

/* No celular o modal vira folha de baixo: ocupa a largura toda, o
   cabeçalho fica preso no topo e as ações ficam presas no rodapé —
   o operador não precisa rolar até o botão para confirmar. */
@media (max-width: 640px) {
  .modal-overlay {
    align-items: flex-end;
    padding: 0;
  }

  .modal-content {
    max-width: 100%;
    border-radius: 16px 16px 0 0;
    max-height: 92vh;
    padding-bottom: env(safe-area-inset-bottom);
  }

  .modal-header {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--card-bg, #111827);
    padding: 0.85rem 1rem;
  }

  .modal-body {
    padding: 1rem;
    gap: 0.8rem;
  }

  .modal-actions {
    position: sticky;
    bottom: 0;
    background: var(--card-bg, #111827);
    border-top: 1px solid var(--border, #1f2937);
    padding: 0.7rem 1rem;
  }

  .modal-actions .btn {
    flex: 1;
    justify-content: center;
    padding: 0.65rem 0.5rem;
    font-size: 0.85rem;
  }
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border, #1f2937);
}

.modal-header h3 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  margin: 0;
}

.modal-close {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0.25rem;
}

.modal-close:hover {
  color: var(--text);
}

.modal-body {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.modal-body .form-group {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.modal-body .form-group label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
}

.modal-body .form-group select,
.modal-body .form-group input {
  background: var(--bg-secondary, #0d1117);
  border: 1px solid var(--border, #1f2937);
  border-radius: 8px;
  padding: 0.6rem 0.75rem;
  color: var(--text);
  font-size: 0.9rem;
}

.modal-body .form-group select:focus,
.modal-body .form-group input:focus {
  outline: none;
  border-color: #4F46E5;
}

.modal-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  padding-top: 0.5rem;
}
.ob-invite-list {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 1.25rem;
}

.ob-invite-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.7rem;
  border-radius: 0.6rem;
  background: var(--background);
  border: 1px solid var(--border);
}

.ob-invite-row .ob-invite-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #4F46E5, #EA580C);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  flex-shrink: 0;
}

.ob-invite-info { flex: 1; min-width: 0; }

.ob-invite-info strong { display: block; font-size: 0.88rem; color: var(--text-main); }
.ob-invite-info span { font-size: 0.78rem; color: var(--text-muted); }

.ob-invite-wa {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.65rem;
  border-radius: 0.45rem;
  background: rgba(37, 211, 102, 0.14);
  color: #15803D;
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.ob-invite-wa:hover { background: rgba(37, 211, 102, 0.26); }/* ═══ Relatório de onboarding ═══ */

/* Aviso informativo (ex.: coluna de origem sem permissão de leitura). */
.onboarding-notice {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.85rem 1rem;
  margin-bottom: 1rem;
  border: 1px solid rgba(79, 70, 229, 0.35);
  border-left: 3px solid var(--primary, #4F46E5);
  border-radius: var(--radius-md, 0.85rem);
  background: rgba(79, 70, 229, 0.08);
  color: var(--text, #0F172A);
  font-size: 0.86rem;
  line-height: 1.5;
}

.onboarding-notice svg { color: var(--primary, #4F46E5); flex-shrink: 0; margin-top: 2px; }
.onboarding-notice code {
  background: rgba(15, 23, 42, 0.08);
  padding: 0.05rem 0.3rem;
  border-radius: 4px;
  font-size: 0.82rem;
}

.onboarding-report .ob-report-stats,
.ob-answers-tab .ob-report-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 0.85rem;
  margin-bottom: 1.5rem;
}

.ob-report-stat {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.9rem 1rem;
  border-radius: var(--radius-md, 0.85rem);
  border: 1px solid var(--border);
  background: var(--surface);
  color: #4F46E5;
}

.ob-report-stat.green  { color: #22C55E; }
.ob-report-stat.blue   { color: #3B82F6; }
.ob-report-stat.orange { color: #F59E0B; }
.ob-report-stat.purple { color: #A855F7; }
.ob-report-stat.red    { color: #EF4444; }

/* Card que abre a sheet (Pessoas indicadas). */
.ob-report-stat.is-clickable {
  width: 100%;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.ob-report-stat.is-clickable:hover {
  border-color: var(--primary);
  transform: translateY(-2px);
}

.ob-report-stat.is-clickable:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.ob-report-stat-chevron {
  margin-left: auto;
  flex-shrink: 0;
  color: var(--text-soft);
}

.ob-report-stat-value {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--text-main);
  line-height: 1.2;
}

.ob-report-stat-value em {
  font-style: normal;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
}

.ob-report-stat-label {
  display: block;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.ob-report-tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--border);
}

.ob-report-tab {
  padding: 0.65rem 1rem;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  font-size: 0.9rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}

.ob-report-tab.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

.ob-report-empty {
  font-size: 0.85rem;
  color: var(--text-muted);
  padding: 1rem 0;
  margin: 0;
}

/* Texto de apoio no topo de um card (ex.: de onde veio a pergunta). */
.ob-card-intro {
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--text-muted);
  margin: -0.4rem 0 1rem;
}

/* ─────────────────────────────────────────────────────────────
   Respostas abertas do onboarding — "o que você espera encontrar
   na plataforma?".
   Cada frase foi escrita por uma pessoa: entra como citação, com o
   nome e a data, não como número.
   ───────────────────────────────────────────────────────────── */
.ob-open-card {
  grid-column: 1 / -1;
  border-color: var(--primary);
  box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.18);
}

.ob-open-intro {
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--text-muted);
  margin: -0.4rem 0 1rem;
}

.ob-open-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.ob-open-item {
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: 0.7rem;
  padding: 0.8rem 0.9rem;
}

.ob-open-who {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 0.5rem;
}

.ob-open-who img,
.ob-open-who .is-initials {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.ob-open-who .is-initials {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 0.75rem;
  font-weight: 700;
}

.ob-open-who > div {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
  min-width: 0;
}

.ob-open-who .link-name {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-main);
  text-decoration: none;
}

.ob-open-who .link-name:hover {
  color: var(--primary);
}

.ob-open-who span:last-child {
  font-size: 0.72rem;
  color: var(--text-soft);
}

.ob-open-text {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--text-main);
}

/* A resposta aberta ocupa a linha inteira do grid de detalhes. */
.ob-detail-item.is-wide {
  grid-column: 1 / -1;
}

.ob-detail-quote {
  font-weight: 500;
  font-style: italic;
  color: var(--text-main);
  line-height: 1.55;
}

.ob-custom-tag {
  display: inline-block;
  margin-left: 0.3rem;
  padding: 0.05rem 0.35rem;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.18);
  color: var(--text-muted);
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 600;
  vertical-align: middle;
}

.ob-report-toolbar {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  align-items: center;
  padding: 0 0 0.85rem;
}

/* Busca: estilos próprios, para não depender do .search-box de outra tela. */
.ob-report-toolbar .search-box {
  flex: 1;
  min-width: 220px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0.6rem;
  padding: 0.5rem 0.85rem;
}

.ob-report-toolbar .search-box:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}

.ob-report-toolbar .search-box svg {
  color: var(--text-soft);
  flex-shrink: 0;
}

.ob-report-toolbar .search-box input {
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  outline: none;
  color: var(--text-main);
  font-size: 0.88rem;
  font-family: inherit;
}

.ob-report-toolbar .search-box input::placeholder {
  color: var(--text-soft);
}

.ob-report-toolbar select {
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: var(--background);
  color: var(--text-main);
  font-size: 0.85rem;
  font-family: inherit;
}

.ob-interest-pill {
  display: inline-block;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 700;
}

.ob-interest-pill.sim     { background: rgba(34, 197, 94, 0.15); color: #15803D; }
.ob-interest-pill.talvez  { background: rgba(245, 158, 11, 0.15); color: #B45309; }
.ob-interest-pill.nao     { background: rgba(107, 114, 128, 0.15); color: #4B5563; }
.ob-interest-pill.none    { background: rgba(148, 163, 184, 0.15); color: var(--text-muted); }

/* ═══ Aba de qualificação no UserDetail ═══ */
.ob-answers-tab {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Indicador cujo valor é texto (a origem do cadastro), não um número. */
.ob-report-stat-value.is-text {
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.35;
}

/* O telefone da pessoa indicada vem junto do nome, no chip. */
.ob-invite-phone {
  font-weight: 500;
  opacity: 0.75;
}

/* Cada bloco de categoria dentro de um card. */
.chart-card .ob-platform-group + .ob-platform-group {
  margin-top: 0.85rem;
}

.ob-answer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0.85rem;
  padding: 1.25rem;
}

.ob-answer-item {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.7rem 0.85rem;
  border-radius: 0.6rem;
  background: var(--background);
  border: 1px solid var(--border);
}

.ob-answer-label {
  font-size: 0.76rem;
  color: var(--text-muted);
  line-height: 1.35;
}

.ob-answer-value {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text-main);
}

.ob-interest-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 1.25rem;
}

.ob-interest-tag {
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  background: rgba(79, 70, 229, 0.1);
  color: var(--primary);
  font-size: 0.8rem;
  font-weight: 600;
}

.ob-interest-tag.custom {
  background: rgba(148, 163, 184, 0.16);
  color: var(--text-muted);
  font-style: italic;
}.ob-invite-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.18rem 0.5rem;
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.14);
  color: #15803D;
  font-size: 0.74rem;
  font-weight: 600;
  white-space: nowrap;
}

.ob-invite-chip:hover { background: rgba(34, 197, 94, 0.26); }

/* Sem telefone não há link de WhatsApp — vira um rótulo neutro. */
.ob-invite-chip.is-static {
  background: rgba(148, 163, 184, 0.18);
  color: var(--text-muted);
}

.ob-invite-chip.is-static:hover { background: rgba(148, 163, 184, 0.18); }

/* ═══ Gráficos de distribuição (mesmo padrão visual da pesquisa) ═══ */
.charts-section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.chart-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0.85rem;
  padding: 1.25rem;
}

.chart-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.chart-header h3 {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-main);
  margin: 0;
  flex: 1;
}

.chart-total {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.chart-bars {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.bar-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.bar-label {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 140px;
  font-size: 0.82rem;
  color: var(--text-main);
  white-space: nowrap;
}

.bar-icon {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  object-fit: cover;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.6rem;
  font-weight: 700;
}

.bar-track {
  flex: 1;
  height: 22px;
  background: var(--surface-soft, #1E293B);
  border-radius: 0.3rem;
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  border-radius: 0.3rem;
  background: #4F46E5;
  transition: width 0.5s ease;
  min-width: 2px;
}

.bar-value {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 72px;
  justify-content: flex-end;
}

.bar-count {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-main);
}

.bar-pct {
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* ═══ Funil do onboarding ═══
   De onde o usuário entra até onde ele para. Fica acima dos KPIs porque é
   a leitura de funil que explica o resto da página. */
.ob-funnel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem 1.5rem;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.25rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 0.85rem);
}

.ob-funnel-step {
  min-width: 0;
}

.ob-funnel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.45rem;
}

.ob-funnel-label {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-weight: 500;
}

.ob-funnel-value {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--text-main);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.ob-funnel-value em {
  font-style: normal;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.ob-funnel-track {
  height: 8px;
  border-radius: 999px;
  background: var(--surface-soft, #1E293B);
  overflow: hidden;
}

.ob-funnel-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--primary);
  min-width: 3px;
  transition: width 0.5s ease;
}

.ob-funnel-note {
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0;
  padding: 0.6rem 0.75rem;
  border-radius: 0.6rem;
  background: rgba(245, 158, 11, 0.1);
  color: var(--warning);
  font-size: 0.8rem;
  line-height: 1.45;
}

/* ═══ Lista de respostas ═══
   Cada resposta é uma ficha, não uma linha de tabela: uma tabela de 8 colunas
   obrigava a_admin a ler de lado para lado e escondia as plataformas — que é
   justamente o que interessa. */
.ob-responses {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.ob-response-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.ob-response {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 0.85rem);
  padding: 0.9rem 1.1rem;
  transition: border-color 0.15s ease;
}

.ob-response:hover {
  border-color: var(--border-strong);
}

.ob-response.is-open {
  border-color: var(--primary);
}

.ob-response-head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.ob-response-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--surface-soft, #1E293B);
}

.ob-response-avatar.is-initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  font-weight: 800;
  font-size: 0.9rem;
}

.ob-response-who {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.ob-response-mail {
  font-size: 0.78rem;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ob-response-time {
  font-size: 0.75rem;
  color: var(--text-soft);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Botão de WhatsApp no lead — abre a conversa com o texto já escrito. */
.ob-whatsapp-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.6rem;
  border-radius: 0.5rem;
  background: rgba(37, 211, 102, 0.12);
  border: 1px solid rgba(37, 211, 102, 0.35);
  color: #22C55E;
  font-size: 0.75rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.ob-whatsapp-btn:hover {
  background: rgba(37, 211, 102, 0.2);
  border-color: rgba(37, 211, 102, 0.55);
  transform: translateY(-1px);
}

[data-theme="light"] .ob-whatsapp-btn {
  color: #15803D;
  background: rgba(37, 211, 102, 0.1);
  border-color: rgba(37, 211, 102, 0.3);
}

/* Respostas curtas viram etiquetas, não colunas. */
.ob-response-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.7rem;
}

.ob-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  padding: 0.22rem 0.55rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--background);
  font-size: 0.78rem;
  color: var(--text-main);
}

.ob-chip b {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-soft);
}

.ob-response-groups {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 0.8rem;
  padding-top: 0.75rem;
  border-top: 1px dashed var(--border);
}

.ob-group-block {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.ob-group-title {
  font-size: 0.63rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--text-soft);
}

.ob-platform-group {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.ob-platform-group-label {
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--text-muted);
  min-width: 132px;
  flex-shrink: 0;
}

.ob-platform-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  flex: 1;
  min-width: 0;
}

.ob-platform-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.55rem 0.2rem 0.25rem;
  border-radius: 999px;
  background: rgba(79, 70, 229, 0.1);
  color: var(--text-main);
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
}

.ob-platform-chip.is-muted {
  background: var(--surface-soft, #1E293B);
  color: var(--text-muted);
  font-weight: 500;
}

.ob-platform-chip img,
.ob-platform-initial {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.ob-platform-initial {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
}

/* Etiqueta da categoria dentro de um card que junta várias. */
.ob-category-tag {
  font-style: normal;
  font-size: 0.68rem;
  color: var(--text-soft);
  white-space: nowrap;
}

.ob-report-count {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* E-mail abaixo do nome — usado na aba "Abandonaram". */
.ob-cell-sub {
  display: block;
  font-size: 0.78em;
  color: var(--text-muted);
}

.ob-expand-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 0.45rem;
  border: 1px solid var(--border);
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  flex-shrink: 0;
}

.ob-expand-btn:hover {
  background: var(--primary-soft);
  color: var(--primary);
  border-color: transparent;
}

/* Respostas completas de um usuário, dentro da ficha. */
.ob-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0.75rem 1.5rem;
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--border);
}

.ob-detail-item {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.ob-detail-q {
  font-size: 0.72rem;
  color: var(--text-soft);
  line-height: 1.35;
}

.ob-detail-a {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-main);
}

@media (max-width: 640px) {
  .ob-platform-group-label {
    min-width: 100%;
  }

  /* Em tela estreita o botão de WhatsApp fica só com o ícone. */
  .ob-whatsapp-btn {
    padding: 0.3rem 0.4rem;
    font-size: 0;
    gap: 0;
  }

  .ob-whatsapp-btn svg {
    width: 15px;
    height: 15px;
  }
}

/* ─────────────────────────────────────────────────────────────
   Celular — o relatório é lido antes de qualquer ação, então o
   topo precisa caber numa tela: indicadores em 2 colunas, abas
   numa faixa rolável e o gráfico com o rótulo acima da barra.
   ───────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .onboarding-report .ob-report-stats,
  .ob-answers-tab .ob-report-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    margin-bottom: 1rem;
  }

  .ob-report-stat {
    padding: 0.6rem 0.65rem;
    gap: 0.45rem;
    border-radius: 0.7rem;
  }

  .ob-report-stat svg {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
  }

  .ob-report-stat-value {
    font-size: 1.1rem;
  }

  .ob-report-stat-value em {
    font-size: 0.68rem;
  }

  .ob-report-stat-label {
    font-size: 0.7rem;
    line-height: 1.3;
  }

  /* Abas numa faixa rolável: "Abandonaram (12)" não quebra de linha. */
  .ob-report-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0 -0.75rem;
    padding: 0 0.75rem;
    margin-bottom: 1rem;
  }

  .ob-report-tabs::-webkit-scrollbar {
    display: none;
  }

  .ob-report-tab {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 0.6rem 0.8rem;
    font-size: 0.85rem;
  }

  /* Gráfico: o rótulo sobe e a barra fica com a largura toda.
     O flex:1 do desktop colapsaria a barra na vertical (basis 0). */
  .bar-row {
    flex-direction: column;
    align-items: stretch;
    gap: 0.3rem;
  }

  .bar-label {
    min-width: 0;
    font-size: 0.78rem;
  }

  .bar-track {
    flex: 0 0 auto;
    width: 100%;
    height: 18px;
  }

  .bar-value {
    min-width: 0;
    justify-content: flex-start;
    gap: 0.3rem;
  }

  .bar-count {
    font-size: 0.78rem;
  }

  .bar-pct {
    font-size: 0.7rem;
  }
}/* ═══ Lista de espera / interesses ═══ */

.interest-list-page .admin-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  gap: 1rem;
  flex-wrap: wrap;
}

.interest-list-page .admin-header .btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ─────────────────────────── guia (3 passos) */
.interest-guide {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0.85rem;
  margin-bottom: 1.25rem;
}

.interest-guide-step {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.85rem 0.95rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.interest-guide-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(79, 70, 229, 0.14);
  color: var(--primary);
  font-size: 0.78rem;
  font-weight: 800;
}

.interest-guide-step div {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.interest-guide-step strong {
  font-size: 0.88rem;
  color: var(--text-main);
}

.interest-guide-step span {
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.45;
}

/* ─────────────────────────── barra de filtros */
.interest-toolbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.85rem;
}

.interest-search {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1 1 320px;
  min-width: 0;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 10px);
  background: var(--surface);
  color: var(--text-muted);
}

.interest-search input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  color: var(--text-main);
  font-size: 0.88rem;
}

.interest-search .search-clear {
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  display: inline-flex;
  padding: 2px;
  border-radius: 6px;
}

.interest-search .search-clear:hover { color: var(--text-main); }

.interest-filter {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 10px);
  background: var(--surface);
  color: var(--text-muted);
}

.interest-filter select {
  border: none;
  outline: none;
  background: transparent;
  color: var(--text-main);
  font-size: 0.85rem;
  font-family: inherit;
  cursor: pointer;
}

.interest-check-filter {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.83rem;
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
}

/* ─────────────────────────── barra de seleção */
.interest-selection-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.6rem 0.9rem;
  margin-bottom: 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-soft);
}

.interest-selection-info {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.85rem;
  color: var(--text);
}

.interest-selection-info svg { color: var(--primary); }

.interest-warn-chip {
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: rgba(245, 158, 11, 0.14);
  color: var(--warning);
  font-size: 0.72rem;
  font-weight: 700;
}

.interest-selection-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* ─────────────────────────── tabela */
.interest-table-wrap {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  overflow: hidden;
}

.interest-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.interest-table thead th {
  text-align: left;
  padding: 0.7rem 0.8rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  background: var(--surface-soft);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.interest-table tbody td {
  padding: 0.65rem 0.8rem;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  vertical-align: middle;
}

.interest-table tbody tr:last-child td { border-bottom: none; }
.interest-table tbody tr:hover { background: var(--surface-soft); }
.interest-table tbody tr.is-selected {
  background: rgba(79, 70, 229, 0.08);
}

.interest-col-check { width: 36px; }
.interest-col-check input { cursor: pointer; accent-color: var(--primary); }

.entry-user {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
}

.entry-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(79, 70, 229, 0.14);
  color: var(--primary);
  font-weight: 700;
  font-size: 0.85rem;
}

.entry-details {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.entry-details strong {
  color: var(--text-main);
  font-size: 0.87rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.entry-email {
  font-size: 0.75rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.contact-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--text);
  white-space: nowrap;
}

.contact-item svg { color: var(--text-muted); }

.interest-no-contact {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-style: italic;
}

.interest-service-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  white-space: nowrap;
}

.interest-service-chip img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  border-radius: 5px;
}

.interest-service-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 5px;
  color: #fff;
  font-size: 0.62rem;
  font-weight: 800;
}

.interest-group-cell,
.interest-message-cell {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-muted);
}

.entry-date {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
  color: var(--text-muted);
  font-size: 0.8rem;
}

.interest-actions-cell { width: 48px; text-align: right; }

.interest-wa-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.3rem 0.45rem;
  text-decoration: none;
}

.interest-no-results {
  padding: 1.5rem;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.86rem;
}

.interest-show-all {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.75rem auto 0;
}

/* ─────────────────────────── compositor */
.interest-composer {
  margin-top: 1.25rem;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  opacity: 0.72;
  transition: opacity 0.2s, border-color 0.2s;
}

.interest-composer.is-active {
  opacity: 1;
  border-color: var(--primary);
  box-shadow: 0 0 0 1px rgba(79, 70, 229, 0.25);
}

.interest-composer-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.9rem;
}

.interest-composer-head h3 {
  margin: 0 0 0.2rem;
  font-size: 1rem;
  color: var(--text-main);
}

.interest-composer-head p {
  margin: 0;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.interest-composer-badge {
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  background: rgba(79, 70, 229, 0.14);
  color: var(--primary);
  font-size: 0.74rem;
  font-weight: 700;
  white-space: nowrap;
}

.interest-composer-grid {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) 2fr;
  gap: 0.85rem;
  margin-bottom: 0.85rem;
}

.interest-composer-grid .form-group label {
  display: block;
  margin-bottom: 0.3rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
}

.interest-composer-grid input,
.interest-composer-grid textarea {
  width: 100%;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 10px);
  background: var(--surface-soft);
  color: var(--text-main);
  font-family: inherit;
  font-size: 0.86rem;
  resize: vertical;
}

.interest-composer-grid input:focus,
.interest-composer-grid textarea:focus {
  outline: none;
  border-color: var(--primary);
}

.interest-composer-grid input:disabled,
.interest-composer-grid textarea:disabled { opacity: 0.6; cursor: not-allowed; }

.interest-channels { margin-bottom: 0.85rem; }

.interest-channels > label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
}

.interest-channels-list {
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.interest-channel-btn {
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--text-muted);
  font-size: 0.8rem;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.interest-channel-btn:hover:not(:disabled) { border-color: var(--primary); color: var(--text-main); }
.interest-channel-btn.active {
  background: rgba(79, 70, 229, 0.14);
  border-color: var(--primary);
  color: var(--primary);
  font-weight: 700;
}
.interest-channel-btn:disabled { opacity: 0.55; cursor: not-allowed; }

.interest-channels-hint {
  margin: 0.4rem 0 0;
  font-size: 0.74rem;
  color: var(--text-muted);
  line-height: 1.45;
}

.interest-composer-error {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.8rem;
  margin-bottom: 0.75rem;
  border-radius: var(--radius-sm, 10px);
  background: rgba(239, 68, 68, 0.1);
  color: var(--error);
  font-size: 0.82rem;
}

.interest-composer-footer {
  display: flex;
  justify-content: flex-end;
}

.interest-composer-footer .btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.interest-success {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 0.9rem;
  margin-bottom: 1rem;
  border-radius: var(--radius-sm, 10px);
  background: rgba(16, 185, 129, 0.12);
  color: var(--success);
  font-size: 0.85rem;
}

@media (max-width: 900px) {
  .interest-composer-grid { grid-template-columns: 1fr; }
  .interest-table-wrap { overflow-x: auto; }
  .interest-table { min-width: 860px; }
}
.platforms-page {
  animation: slideUpFade 0.4s ease-out forwards;
}

@keyframes slideUpFade {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.platforms-search {
  margin-bottom: 1.5rem;
}

.platforms-search input {
  width: 100%;
  max-width: 360px;
  padding: 0.7rem 1rem;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  font-size: 0.9rem;
  background: var(--surface);
  color: var(--text-main);
  outline: none;
  transition: border-color 0.2s;
}

.platforms-search input:focus {
  border-color: var(--primary);
}

.platforms-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.25rem;
}

.platform-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--surface);
  padding: 1.15rem 1.25rem;
  border-radius: 1rem;
  border: 1px solid var(--border);
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: transform 0.2s, box-shadow 0.2s;
}

.platform-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.05);
}

.platform-inactive {
  opacity: 0.6;
}

.platform-icon {
  width: 52px;
  height: 52px;
  border-radius: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.5rem;
  font-weight: 800;
  flex-shrink: 0;
  overflow: hidden;
}

.platform-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.platform-info {
  flex: 1;
  min-width: 0;
}

.platform-info h4 {
  font-size: 1rem;
  margin: 0;
  color: var(--secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.platform-status {
  padding: 0.25rem 0.7rem;
  border-radius: 2rem;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  flex-shrink: 0;
}

.platform-status.active {
  background: rgba(16, 185, 129, 0.1);
  color: var(--success);
}

.platform-status.inactive {
  background: rgba(100, 116, 139, 0.12);
  color: #64748B;
}

.empty-state {
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: 1rem;
  padding: 3rem 1.5rem;
  text-align: center;
}

.empty-state p {
  color: var(--text-muted);
  margin: 0;
}

/* ── Platform Form Page ── */
.platform-form-page {
  max-width: 900px;
  animation: slideUpFade 0.3s ease-out forwards;
  padding-bottom: 6rem;
}

.back-btn-platform {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  white-space: nowrap;
  color: var(--text-muted);
  background: none;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  font-size: 0.85rem;
  cursor: pointer;
  margin-bottom: 1rem;
  padding: 0.5rem 0.85rem;
  transition: all 0.2s;
}

.back-btn-platform:hover {
  color: var(--primary);
  border-color: var(--primary);
}

.platform-form-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 1rem;
  padding: 0;
  overflow: hidden;
}

/* Bloco "Exibição no catálogo": fica ABAIXO do card do formulário, como
   um card próprio (não dentro da seção de dados). */
.platform-visibility-section {
  margin-top: 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 1rem;
  overflow: hidden;
}

.platform-visibility-section h2 { margin-bottom: 0.35rem; }

.platform-visibility-section .section-desc {
  margin-bottom: 1.15rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.platform-visibility-section .platform-form-footer {
  margin-top: 1.35rem;
  margin-left: -2rem;
  margin-right: -2rem;
  border-top: 1px solid var(--border);
}

.pf-section {
  padding: 1.75rem 2rem;
}

.pf-section + .platform-form-footer {
  border-top: 1px solid var(--border);
}

.pf-section h2 {
  font-size: 1.05rem;
  color: var(--secondary);
  margin-bottom: 1.25rem;
  font-weight: 700;
}

.form-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.form-row-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 1rem;
}

.form-group:last-child {
  margin-bottom: 0;
}

.form-group label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
}

.form-group input,
.form-group select,
.form-group textarea {
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  font-size: 0.9rem;
  background: var(--background);
  color: var(--text-main);
  outline: none;
  transition: border-color 0.2s;
  width: 100%;
  box-sizing: border-box;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--primary);
}

.form-group textarea {
  resize: vertical;
  min-height: 70px;
}

/* ── Icon Upload ── */
.icon-upload-group {
  margin-bottom: 0;
}

.icon-upload {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.icon-preview {
  width: 56px;
  height: 56px;
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.3rem;
  font-weight: 800;
  flex-shrink: 0;
  overflow: hidden;
}

.icon-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.upload-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  padding: 0.45rem 0.75rem;
  cursor: pointer;
  white-space: nowrap;
}

.icon-fallback {
  font-size: 0.85rem;
}

/* ── Color Input ── */
.color-input {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.color-input input[type="color"] {
  width: 40px;
  height: 40px;
  border: 2px solid var(--border);
  border-radius: 0.5rem;
  cursor: pointer;
  padding: 2px;
  background: transparent;
}

.color-input span {
  font-size: 0.85rem;
  color: var(--text-muted);
  font-family: monospace;
}

/* ── Category Selector ── */
.category-selector {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.6rem;
}

.category-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  padding: 0.85rem 0.5rem;
  border-radius: 0.75rem;
  border: 2px solid var(--border);
  background: var(--background);
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
}

.category-option:hover {
  border-color: var(--primary-light);
  color: var(--text-main);
  background: rgba(79, 70, 229, 0.03);
}

.category-option.selected {
  border-color: var(--primary);
  background: rgba(79, 70, 229, 0.08);
  color: var(--primary);
}

.category-option-icon {
  font-size: 1.6rem;
  line-height: 1;
}

.category-option-label {
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.2;
}

.category-option-desc {
  font-size: 0.65rem;
  color: var(--text-soft);
  line-height: 1.2;
}

.category-option.selected .category-option-desc {
  color: var(--primary-light);
}

/* ── Form Footer ── */
.platform-form-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  padding: 1rem 2rem;
  background: var(--background);
}

.platform-form-footer .btn {
  padding: 0.6rem 1.25rem;
  font-size: 0.9rem;
  font-weight: 600;
  border-radius: 0.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

/* ── Error Banner ── */
.error-banner {
  background: rgba(239, 68, 68, 0.1);
  color: #EF4444;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.85rem;
  margin-bottom: 1rem;
  border: 1px solid rgba(239, 68, 68, 0.2);
}

.spin {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ── Responsive ── */
.toggle-option {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}

.toggle-option:hover {
  border-color: var(--primary);
}

.toggle-option input[type="checkbox"] {
  accent-color: var(--primary);
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.toggle-content {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.toggle-content svg {
  color: var(--primary);
  flex-shrink: 0;
}

.toggle-content strong {
  display: block;
  font-size: 0.85rem;
  color: var(--text-main);
}

.toggle-content span {
  display: block;
  font-size: 0.75rem;
  color: var(--text-muted);
}

@media (max-width: 768px) {
  .platforms-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .platforms-search input {
    max-width: 100%;
  }

  .platform-form-page {
    padding-bottom: 5rem;
  }

  .pf-section {
    padding: 1.25rem 1rem;
  }

  .form-row-2,
  .form-row-3 {
    grid-template-columns: 1fr;
  }

  .category-selector {
    /* No celular as categorias viram uma faixa que desliza na horizontal:
       a grade de 2 colunas deixava a página inteira gigante para rolar. */
    display: flex;
    flex-wrap: nowrap;
    grid-template-columns: none;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding-bottom: 0.35rem;
    margin-inline: -1rem;
    padding-inline: 1rem;
  }

  .category-option {
    flex: 0 0 8.5rem;
    scroll-snap-align: start;
    padding: 0.7rem 0.4rem;
  }

  .category-option-desc {
    display: none;
  }

  .platform-form-footer {
    padding: 1rem;
    justify-content: stretch;
  }

  .platform-form-footer .btn {
    flex: 1;
    justify-content: center;
  }
}

/* ═══════ Tabs ═══════ */
.pf-tabs {
  display: flex;
  gap: 0.25rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0;
}

.pf-tab {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.7rem 1.25rem;
  border: none;
  background: none;
  color: var(--text-muted);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: all 0.15s;
}

.pf-tab:hover {
  color: var(--text-main);
}

.pf-tab.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
  font-weight: 600;
}

/* ═══════ Financial Dashboard ═══════ */
.fin-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}

.fin-stat-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 1rem;
  padding: 1.25rem;
}

.fin-stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.fin-stat-info {
  display: flex;
  flex-direction: column;
}

.fin-stat-info span {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.fin-stat-info strong {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--secondary);
}

.fin-section {
  margin-bottom: 2rem;
}

.fin-section h3 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--secondary);
  margin-bottom: 1rem;
}

.fin-empty {
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: 0.75rem;
  padding: 2rem;
  text-align: center;
  color: var(--text-muted);
}

.fin-bars {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.fin-bar-row {
  display: grid;
  grid-template-columns: 200px 1fr 100px;
  align-items: center;
  gap: 1rem;
}

.fin-bar-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-main);
  white-space: nowrap;
}

.fin-bar-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.fin-bar-count {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-weight: 400;
}

.fin-bar-track {
  height: 8px;
  background: var(--border);
  border-radius: 4px;
  overflow: hidden;
}

.fin-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.5s ease;
}

.fin-bar-value {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-main);
  text-align: right;
}

@media (max-width: 768px) {
  .fin-stats-grid {
    grid-template-columns: 1fr 1fr;
  }

  .fin-bar-row {
    grid-template-columns: 1fr;
    gap: 0.25rem;
  }

  .fin-bar-value {
    text-align: left;
  }
}
.subscriptions-page {
  animation: slideUpFade 0.3s ease-out forwards;
}

@keyframes slideUpFade {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 1rem;
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.03);
}

.stat-card svg {
  color: var(--primary);
}

.stat-card span {
  display: block;
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--secondary);
  line-height: 1;
}

.stat-card small {
  color: var(--text-muted);
  font-size: 0.8rem;
}

.subscriptions-toolbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}

.search-box {
  flex: 1;
  min-width: 260px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  padding: 0 0.75rem;
}

.search-box svg {
  color: var(--text-muted);
}

.search-box input {
  flex: 1;
  background: transparent;
  border: none;
  padding: 0.75rem 0;
  color: var(--text-main);
  outline: none;
}

.filter-box {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  padding: 0 0.75rem;
}

.filter-box svg {
  color: var(--text-muted);
}

.filter-box select {
  background: transparent;
  border: none;
  padding: 0.75rem 0;
  color: var(--text-main);
  outline: none;
  cursor: pointer;
}

.filter-group {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* Stat card highlight for revenue */
.stat-card.highlight {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(52, 211, 153, 0.05));
  border-color: rgba(52, 211, 153, 0.3);
}

.stat-card.highlight svg {
  color: #34d399;
}

.stat-card.highlight span {
  color: #34d399;
}

.sub-value-equivalent {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-muted);
  margin-top: 2px;
}

/* Cycle cell in table */
.cycle-cell {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.cycle-label {
  font-weight: 600;
  font-size: 0.85rem;
}

.cycle-months {
  font-size: 0.72rem;
  color: var(--text-muted);
}

/* Renewal row highlights */
.renewal-soon {
  background: rgba(239, 68, 68, 0.05);
}

.renewal-this-month {
  background: rgba(245, 158, 11, 0.05);
}

.renewal-urgent {
  color: #ef4444;
  font-weight: 700;
}

.renewal-month {
  color: #f59e0b;
  font-weight: 600;
}

.subscriptions-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.subscriptions-table th,
.subscriptions-table td {
  padding: 1rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

.subscriptions-table th {
  color: var(--text-muted);
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
}

.link-name {
  display: block;
  color: var(--primary);
  cursor: pointer;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.15s;
}

.link-name:hover {
  color: var(--secondary);
  text-decoration: underline;
}

.link-group {
  color: var(--text-muted);
  font-weight: 400;
  font-size: 0.8rem;
}

.link-group:hover {
  color: var(--primary);
}

.user-cell {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.user-cell span {
  color: var(--text-muted);
  font-size: 0.8rem;
}

.user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), #818CF8);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
}

.service-cell strong {
  display: block;
  color: var(--secondary);
}

.service-cell span {
  color: var(--text-muted);
  font-size: 0.8rem;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.35rem 0.75rem;
  border-radius: 2rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
}

.status-badge.active {
  background: rgba(16, 185, 129, 0.1);
  color: var(--success);
}

.status-badge.pending {
  background: rgba(251, 146, 60, 0.1);
  color: #FB923C;
}

.status-badge.cancelled,
.status-badge.expired {
  background: rgba(239, 68, 68, 0.1);
  color: var(--error);
}

.status-badge.inactive {
  background: rgba(148, 163, 184, 0.1);
  color: var(--text-muted);
}

.date-cell {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  color: var(--text-muted);
  font-size: 0.85rem;
}

.actions-cell {
  display: flex;
  gap: 0.5rem;
}

.action-btn {
  width: 34px;
  height: 34px;
  border-radius: 0.5rem;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
}

.action-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.action-btn.danger:hover {
  border-color: var(--error);
  color: var(--error);
}

/* Modal */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 1rem;
  box-sizing: border-box;
}

.modal-content {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 1rem;
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 25px -5px rgba(0,0,0,0.2);
}

.sub-viewer-overlay {
  position: fixed;
  inset: 0;
  background: transparent;
  z-index: 9999;
}

.sub-viewer-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 600px;
  max-width: 95vw;
  background: #ffffff;
  border-left: 1px solid var(--border);
  z-index: 10000;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

[data-theme="dark"] .sub-viewer-panel {
  background: #0f172a;
}

.sub-viewer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.sub-viewer-header h3 {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0;
}

.sub-viewer-close {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-muted);
  cursor: pointer;
  padding: 0.4rem 0.6rem;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sub-viewer-close:hover {
  color: var(--text-main);
  background: var(--bg-secondary);
}

.sub-detail-modal {
  max-width: 720px;
}

.sub-detail-body {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.detail-section {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.detail-section h4 {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin: 0;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border);
}

.detail-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.detail-item {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.detail-item label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
}

[data-theme="dark"] .detail-item label {
  color: var(--text-muted);
}

.detail-item span {
  font-size: 0.9rem;
  color: #111827;
}

[data-theme="dark"] .detail-item span {
  color: var(--text-main);
}

.detail-value {
  font-weight: 700;
  font-size: 1rem;
  color: var(--secondary);
}

.detail-discount {
  font-weight: 400;
  font-size: 0.8rem;
  color: var(--success);
  margin-left: 0.5rem;
}

.detail-mono {
  font-family: monospace;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.detail-email {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.detail-table-wrap {
  overflow-x: auto;
}

.detail-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
}

.detail-table th,
.detail-table td {
  padding: 0.6rem 0.75rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

.detail-table th {
  color: var(--text-muted);
  font-weight: 600;
  font-size: 0.7rem;
  text-transform: uppercase;
}

.detail-table td {
  color: var(--text-main);
}

.tx-eye-btn {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-muted);
  cursor: pointer;
  padding: 0.3rem 0.5rem;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}

.tx-eye-btn:hover {
  color: var(--primary);
  border-color: var(--primary);
  background: rgba(79, 70, 229, 0.08);
}

[data-theme="dark"] .tx-eye-btn:hover {
  background: rgba(79, 70, 229, 0.15);
}

.detail-loading {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-muted);
  font-size: 0.85rem;
  padding: 1rem 0;
}

.detail-empty {
  color: var(--text-muted);
  font-size: 0.85rem;
  padding: 1rem 0;
  text-align: center;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem;
  border-bottom: 1px solid var(--border);
}

.modal-header h3 {
  font-size: 1.1rem;
  color: var(--secondary);
}

.modal-close {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
}

.modal-form {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.modal-form .form-row {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.modal-form label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
}

.modal-form input,
.modal-form select {
  padding: 0.75rem 1rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: var(--background);
  color: var(--text-main);
  font-size: 0.95rem;
}

.modal-form input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.modal-form input:focus,
.modal-form select:focus {
  outline: none;
  border-color: var(--primary);
}

.form-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  padding-top: 0.5rem;
}

.spin {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@media (max-width: 768px) {
  .subscriptions-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .subscriptions-table th,
  .subscriptions-table td {
    padding: 0.75rem;
  }

  .form-row-2 {
    grid-template-columns: 1fr;
  }

  .detail-row {
    grid-template-columns: 1fr;
  }

  .sub-viewer-panel {
    width: 100vw;
    max-width: 100vw;
  }
}

/* ── Stat Detail Modal ─────────────────────────────────── */
.stat-detail-modal {
  width: 640px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}

.stat-detail-modal .sub-viewer-body {
  flex: 1;
  overflow-y: auto;
  padding: 0;
}

.stat-detail-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  position: sticky;
  top: 0;
  z-index: 1;
}

.stat-detail-total {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.stat-detail-sum {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.stat-detail-sum strong {
  color: var(--success, #34d399);
}

.stat-detail-list {
  display: flex;
  flex-direction: column;
}

.stat-detail-row {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  grid-template-rows: auto auto;
  gap: 0.25rem 0.75rem;
  align-items: center;
  padding: 0.6rem 1rem;
  border-bottom: 1px solid var(--border);
  transition: background 0.1s;
}

.stat-detail-row:last-child {
  border-bottom: none;
}

.stat-detail-row:hover {
  background: var(--surface);
}

.stat-detail-row.clickable-row {
  cursor: pointer;
}

.stat-detail-row.clickable-row:hover {
  background: rgba(99, 102, 241, 0.06);
}

.stat-detail-user {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.user-avatar-sm {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4f46e5, #818cf8);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  flex-shrink: 0;
}

.stat-detail-user strong {
  display: block;
  font-size: 0.8rem;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
}

.stat-detail-user span {
  display: block;
  font-size: 0.68rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
}

.stat-detail-service {
  display: flex;
  flex-direction: column;
}

.stat-detail-service strong {
  font-size: 0.78rem;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
}

.stat-detail-service span {
  font-size: 0.65rem;
  color: var(--text-muted);
}

.stat-detail-amount {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  grid-row: 1 / 3;
  grid-column: 3;
}

.amount-monthly {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--success, #34d399);
}

.amount-total,
.amount-date {
  font-size: 0.62rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.stat-detail-next {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.65rem;
  color: #f59e0b;
  grid-column: 1 / 3;
}

.stat-detail-next svg {
  flex-shrink: 0;
}

.stat-detail-arrow {
  font-size: 1rem;
  color: #818cf8;
  font-weight: 300;
  grid-row: 1 / 3;
  grid-column: 4;
  line-height: 1;
}

.empty-detail {
  text-align: center;
  padding: 2rem;
  color: var(--text-muted);
  font-size: 0.85rem;
}

/* Light theme for stat detail */
[data-theme="light"] .stat-detail-summary {
  background: #f8fafc;
  border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .stat-detail-row:hover {
  background: #f1f5f9;
}

[data-theme="light"] .stat-detail-row.clickable-row:hover {
  background: rgba(99, 102, 241, 0.06);
}

@media (max-width: 640px) {
  .stat-detail-modal {
    width: 100vw;
  }

  .stat-detail-row {
    grid-template-columns: 1fr auto;
  }

  .stat-detail-service {
    display: none;
  }

  .stat-detail-next {
    grid-column: 1;
  }
}

/* ── Avisos ─────────────────────────────────────────────── */
.subscriptions-page .error-banner {
  background: rgba(239, 68, 68, 0.1);
  color: var(--error);
  padding: 0.85rem 1rem;
  border-radius: 0.75rem;
  margin-bottom: 1rem;
  font-size: 0.88rem;
}

.subscriptions-page .notice-banner {
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.25);
  color: #b45309;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  margin-bottom: 1rem;
  font-size: 0.85rem;
}

[data-theme="dark"] .subscriptions-page .notice-banner {
  color: #fbbf24;
}

/* ── Card "Precisam de atenção" ────────────────────────── */
/* (removido: o card virou a métrica `.subs-metric-attention`) */

.stat-detail-warn {
  color: #f59e0b !important;
}

/* ── Tira de próximas renovações (só contagem) ─────────── */
/* (removida: a contagem virou a linha `.subs-renewals` no fim do arquivo) */

/* ── Paginação ──────────────────────────────────────────── */
.subscriptions-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}

.pagination-info {
  font-size: 0.82rem;
  color: var(--text-muted);
}

.pagination-controls {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.pagination-size select {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-main);
  border-radius: 0.5rem;
  padding: 0.35rem 0.5rem;
  font-size: 0.8rem;
  cursor: pointer;
}

.subscriptions-page .btn-sm {
  padding: 0.4rem 0.75rem;
  font-size: 0.8rem;
  gap: 0.3rem;
  white-space: nowrap;
}

/* ── Tabela ─────────────────────────────────────────────── */
.value-cell {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.value-original {
  text-decoration: line-through;
  color: var(--text-muted);
  font-size: 0.78rem;
}

.status-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
}

.status-badge.overdue {
  background: rgba(239, 68, 68, 0.12);
  color: var(--error);
}

.status-badge.retrying {
  background: rgba(245, 158, 11, 0.12);
  color: #b45309;
}

[data-theme="dark"] .status-badge.retrying {
  color: #fbbf24;
}

.renewal-overdue-row {
  background: rgba(239, 68, 68, 0.05);
}

.renewal-overdue-text {
  color: var(--error);
  font-weight: 700;
}

.stat-detail-flag {
  color: var(--error);
}

.stat-detail-flag svg {
  color: var(--error);
}

/* ═══════════════════════════════════════════════════════════════
   Layout minimalista da tela de assinaturas

   Todas as classes novas são prefixadas com `.subs-` DE PROPÓSITO:
   o Vite concatena todo o CSS do app num bundle único, então um nome
   solto (`.stat-card`, `.filter-box`) vaza para as outras telas —
   foi o que aconteceu com `.error-cell` no painel de cobranças.
   ═══════════════════════════════════════════════════════════════ */

/* ── Cabeçalho ─────────────────────────────────────────────── */
.subs-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

/* ── Métricas: uma linha só, sem caixinha ──────────────────── */
.subs-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.85rem;
  padding: 0 0 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}

.subs-metric {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
  padding: 0.2rem 0;
  border: none;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  border-radius: 0.5rem;
  transition: opacity 0.15s;
}

.subs-metric:hover {
  opacity: 0.72;
}

.subs-metric:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 4px;
}

.subs-metric-value {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--secondary);
}

.subs-metric-value svg {
  color: inherit;
}

.subs-metric-label {
  font-size: 0.8rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.subs-metric-note {
  font-size: 0.7rem;
  color: var(--text-soft, var(--text-muted));
  white-space: nowrap;
}

.subs-metric-attention.is-alert .subs-metric-value,
.subs-metric-attention.is-alert .subs-metric-label {
  color: var(--error);
}

/* ── Renovações ─────────────────────────────────────────────── */
.subs-renewals {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
  margin-bottom: 1.1rem;
}

.subs-renewals-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.subs-renewal-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3rem;
  padding: 0.2rem 0.65rem;
  border-radius: 2rem;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  font-size: 0.75rem;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}

.subs-renewal-chip strong {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--secondary);
}

.subs-renewal-chip:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.subs-renewals-hint {
  margin-left: auto;
  font-size: 0.72rem;
  color: var(--text-soft, var(--text-muted));
}

/* ── Toolbar: busca + campos ───────────────────────────────── */
.subs-toolbar {
  display: flex;
  align-items: flex-end;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 0.65rem;
}

.subs-search {
  flex: 1 1 260px;
  min-width: 220px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0.6rem;
  padding: 0 0.7rem;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.subs-search:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12);
}

.subs-search > svg {
  color: var(--text-muted);
  flex-shrink: 0;
}

.subs-search input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  padding: 0.55rem 0;
  color: var(--text-main);
  outline: none;
  font-size: 0.88rem;
}

.subs-search input::placeholder {
  color: var(--text-soft, var(--text-muted));
}

.subs-search-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0.2rem;
  border-radius: 0.35rem;
}

.subs-search-clear:hover {
  color: var(--text-main);
  background: var(--surface-soft);
}

/* Select com rótulo: o texto pequeno diz o que é o campo */
.subs-field {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.subs-field > span {
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  padding-left: 0.15rem;
}

.subs-field select {
  appearance: none;
  -webkit-appearance: none;
  background-color: var(--surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.6rem center;
  background-size: 0.7rem;
  border: 1px solid var(--border);
  border-radius: 0.6rem;
  color: var(--text-main);
  font-size: 0.85rem;
  padding: 0.5rem 1.9rem 0.5rem 0.65rem;
  cursor: pointer;
  min-width: 9.5rem;
}

.subs-field select:focus {
  outline: none;
  border-color: var(--primary);
}

.subs-refresh {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 0.85rem;
  border-radius: 0.6rem;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-main);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}

.subs-refresh:hover {
  border-color: var(--primary);
  color: var(--primary);
}

/* ── Pílulas de status ─────────────────────────────────────── */
.subs-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 1.1rem;
}

.subs-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.32rem 0.7rem;
  border-radius: 2rem;
  border: 1px solid transparent;
  background: var(--surface-soft);
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.subs-pill b {
  font-weight: 700;
  font-size: 0.72rem;
  color: var(--text-soft, var(--text-muted));
  background: var(--surface);
  border-radius: 2rem;
  padding: 0.05rem 0.42rem;
  min-width: 1.4rem;
  text-align: center;
}

.subs-pill:hover {
  color: var(--text-main);
}

.subs-pill.is-active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.subs-pill.is-active b {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

/* ── Tabela ─────────────────────────────────────────────────── */
.subscriptions-page .subscriptions-table th {
  text-transform: none;
  letter-spacing: 0.01em;
  font-size: 0.75rem;
  padding: 0.7rem 1rem;
  white-space: nowrap;
}

.subscriptions-page .subscriptions-table td {
  padding: 0.7rem 1rem;
  vertical-align: middle;
}

.subscriptions-page .subscriptions-table tbody tr {
  transition: background 0.12s;
}

.subscriptions-page .subscriptions-table tbody tr:hover {
  background: var(--surface-soft);
}

/* Vencida: fundo discreto + barra na lateral (a linha é a informação). */
.subscriptions-page .renewal-overdue-row {
  background: rgba(239, 68, 68, 0.06);
  box-shadow: inset 3px 0 0 var(--error);
}

.subscriptions-page .renewal-overdue-row:hover {
  background: rgba(239, 68, 68, 0.1);
}

.subscriptions-page .status-cell {
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.subscriptions-page .user-avatar {
  width: 32px;
  height: 32px;
  font-size: 0.85rem;
}

.subscriptions-page .cycle-label {
  font-weight: 500;
  color: var(--text-muted);
  font-size: 0.82rem;
}

/* "vence em 3 dias" — o prazo relativo ao lado da data */
.subs-due {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.subs-due.is-overdue {
  color: var(--error);
  font-weight: 600;
}

/* ── Responsivo ─────────────────────────────────────────────── */
@media (max-width: 900px) {
  .subs-metrics {
    gap: 0.9rem 1.3rem;
  }

  .subs-renewals-hint {
    display: none;
  }
}

@media (max-width: 640px) {
  .subs-metric-value {
    font-size: 1.25rem;
  }

  .subs-toolbar {
    align-items: stretch;
  }

  .subs-field,
  .subs-field select {
    flex: 1 1 100%;
    min-width: 0;
  }

  .subs-refresh {
    flex: 1 1 100%;
    justify-content: center;
  }
}

.subscription-edit-page {
  max-width: 720px;
  margin: 0 auto;
}

.subscription-edit-page .back-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.85rem;
  padding: 0;
  margin-bottom: 1.5rem;
}

.subscription-edit-page .back-btn:hover { color: var(--primary); }

.subscription-edit-page .page-header { margin-bottom: 1.5rem; }
.subscription-edit-page .page-header h1 { font-size: 1.5rem; margin-bottom: 0.25rem; color: var(--secondary); }
.subscription-edit-page .page-header p { color: var(--text-muted); font-size: 0.85rem; }

.sub-edit-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2rem;
}

.sub-edit-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

.sub-edit-info label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  display: block;
  margin-bottom: 0.25rem;
}

.sub-edit-info p {
  margin: 0;
  font-weight: 600;
  color: var(--text);
}

.sub-edit-info span {
  font-size: 0.82rem;
  color: var(--text-muted);
}

.sub-edit-info .mono {
  font-family: monospace;
  font-size: 0.82rem;
  font-weight: 400;
  word-break: break-all;
}

.sub-edit-divider {
  height: 1px;
  background: var(--border);
  margin: 1.5rem 0;
}

.sub-edit-fields {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.sub-edit-fields .form-group label {
  display: block;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 0.35rem;
}

.sub-edit-fields input,
.sub-edit-fields select {
  width: 100%;
  padding: 0.6rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-card);
  color: var(--text);
  font-size: 0.9rem;
}

.sub-edit-fields input:focus,
.sub-edit-fields select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
}

.sub-edit-fields .field-hint {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.sub-edit-fields .field-hint strong {
  color: var(--text);
  font-weight: 600;
}

.sub-edit-fields .field-hint-manual {
  color: #b45309;
}

.sub-edit-fields .field-hint-discount {
  color: var(--text-muted);
  font-style: italic;
}

[data-theme="dark"] .sub-edit-fields .field-hint-manual {
  color: #fbbf24;
}

.price-notice {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.7rem 0.9rem;
  background: rgba(79, 70, 229, 0.08);
  border: 1px solid rgba(79, 70, 229, 0.22);
  border-radius: 8px;
  font-size: 0.83rem;
  color: var(--text-muted);
}

.price-notice svg {
  color: var(--primary);
  flex-shrink: 0;
  margin-top: 2px;
}

.transfer-box {
  border: 1px solid rgba(79, 70, 229, 0.25);
  background: rgba(79, 70, 229, 0.06);
  border-radius: 10px;
  padding: 0.9rem 1rem;
}

.transfer-head {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--primary);
  margin-bottom: 0.6rem;
}

.transfer-box ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.85rem;
  color: var(--text);
}

.transfer-box li {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.transfer-label {
  min-width: 58px;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-muted);
}

.transfer-hint {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-style: normal;
}

.transfer-box .transfer-warn {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  color: #b45309;
  font-size: 0.8rem;
}

.sub-edit-note.transfer-note {
  background: rgba(79, 70, 229, 0.08);
  border-color: rgba(79, 70, 229, 0.25);
}

.sub-edit-note.transfer-note svg { color: var(--primary); }

.form-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.sub-edit-note {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: rgba(234, 179, 8, 0.08);
  border: 1px solid rgba(234, 179, 8, 0.2);
  border-radius: 8px;
  margin-top: 1.25rem;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.sub-edit-note svg { color: #eab308; flex-shrink: 0; }

.sub-edit-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}

.success-banner {
  padding: 0.75rem 1rem;
  border-radius: 8px;
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.3);
  color: #10b981;
  font-size: 0.85rem;
  margin-bottom: 1rem;
}

@media (max-width: 600px) {
  .sub-edit-card { padding: 1.25rem; }
  .sub-edit-info-grid, .form-row-2 { grid-template-columns: 1fr; }
  .sub-edit-actions { flex-direction: column-reverse; }
  .sub-edit-actions .btn { width: 100%; }
}
.groups-page {
  animation: slideUpFade 0.4s ease-out forwards;
}

@keyframes slideUpFade {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.admin-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1.5rem;
  gap: 1rem;
  flex-wrap: wrap;
}

.admin-header h1 {
  font-size: 1.75rem;
  margin-bottom: 0.25rem;
  color: var(--secondary);
}

.page-subtitle {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin: 0;
}

.groups-header-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}

.error-banner {
  background: rgba(239, 68, 68, 0.1);
  color: #EF4444;
  padding: 1rem;
  border-radius: 0.75rem;
  margin-bottom: 1.5rem;
}

.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem;
  color: var(--text-muted);
  gap: 1rem;
}

.spin {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Search Bars */
.service-search-bar,
.groups-search-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  padding: 0.6rem 1rem;
  margin-bottom: 1.25rem;
  color: var(--text-muted);
}

.service-search-bar input,
.groups-search-bar input {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--text-main);
  font-size: 0.9rem;
  outline: none;
}

.service-search-bar input::placeholder,
.groups-search-bar input::placeholder {
  color: var(--text-muted);
}

.search-clear {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 2px;
  display: flex;
  align-items: center;
  border-radius: 50%;
  transition: all 0.2s;
}

.search-clear:hover {
  background: var(--border);
  color: var(--secondary);
}

/* Platform Grid */
.platform-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0.75rem;
}

.platform-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  cursor: pointer;
  transition: all 0.2s;
  text-align: left;
  width: 100%;
}

.platform-card:hover {
  border-color: var(--primary);
  background: rgba(79, 70, 229, 0.03);
  transform: translateY(-1px);
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.05);
}

.platform-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 0.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 800;
  font-size: 1.1rem;
  flex-shrink: 0;
  overflow: hidden;
}

.platform-card-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.platform-card-info {
  flex: 1;
  min-width: 0;
}

.platform-card-info h3 {
  font-size: 0.9rem;
  margin: 0 0 0.15rem;
  color: var(--secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.platform-card-info span {
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* Service icon in groups view */
.service-icon-sm {
  width: 40px;
  height: 40px;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 800;
  font-size: 1rem;
  flex-shrink: 0;
  overflow: hidden;
}

.service-icon-sm img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Back button */
.back-btn-platform {
  width: 36px;
  height: 36px;
  border-radius: 0.5rem;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.back-btn-platform:hover {
  border-color: var(--primary);
  color: var(--primary);
}

/* Groups Grid */
.groups-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1rem;
}

.group-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  padding: 1.25rem;
  transition: transform 0.2s, box-shadow 0.2s;
}

.group-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.05);
}

.group-full {
  opacity: 0.8;
}

.group-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 0.75rem;
  gap: 0.5rem;
}

.group-name-wrap h4 {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0 0 0.2rem 0;
  font-size: 1rem;
  color: var(--secondary);
}

.verified-badge-admin {
  display: inline-flex;
  filter: drop-shadow(0 0 3px rgba(14, 165, 233, 0.5));
}

.group-meta-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.group-reference {
  font-size: 0.7rem;
  font-weight: 700;
  font-family: monospace;
  color: var(--primary);
  background: rgba(79, 70, 229, 0.1);
  padding: 0.15rem 0.45rem;
  border-radius: 0.25rem;
}

.group-creator {
  display: inline;
  font-size: 0.7rem;
  color: var(--text-muted);
}

.creator-admin {
  color: var(--primary);
  font-weight: 700;
}

.group-card-header h4 {
  font-size: 1rem;
  color: var(--secondary);
  margin: 0;
}

.group-tag {
  padding: 0.3rem 0.7rem;
  border-radius: 2rem;
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
}

.group-tag.open {
  background: rgba(16, 185, 129, 0.1);
  color: #10B981;
}

.group-tag.full {
  background: rgba(239, 68, 68, 0.1);
  color: #EF4444;
}

.group-body-row {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  align-items: stretch;
}

.group-progress {
  flex: 1;
  min-width: 100px;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  justify-content: center;
}

.progress-bar {
  height: 6px;
  background: var(--border);
  border-radius: 999px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.3s ease;
}

.progress-text {
  font-size: 0.75rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.group-members-list {
  flex: 2;
  min-width: 0;
}

.member-list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.member-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.45rem;
  background: var(--background);
  border-radius: 0.4rem;
  border: 1px solid var(--border);
  text-decoration: none;
  transition: all 0.15s;
}

.member-item:hover {
  border-color: var(--primary);
  background: rgba(79, 70, 229, 0.03);
}

.member-avatar-sm {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), #818CF8);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  font-weight: 700;
  flex-shrink: 0;
}

.member-item-info {
  flex: 1;
  min-width: 0;
}

.member-item-info strong {
  display: block;
  font-size: 0.78rem;
  color: var(--secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.member-empty {
  color: var(--text-muted);
  font-size: 0.8rem;
  padding: 0.35rem 0;
}

.member-more {
  justify-content: center;
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 600;
}

.group-price {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--border);
  margin-bottom: 1rem;
}

.price-label {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.price-value {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--primary);
}

.price-value small {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-weight: 500;
}

.group-warning {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  color: #EF4444;
  margin-bottom: 1rem;
  padding: 0.5rem;
  background: rgba(239, 68, 68, 0.05);
  border-radius: 0.5rem;
}

.group-card-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
}

.group-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  padding: 0.5rem;
  border-radius: 0.5rem;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--background);
  color: var(--text-muted);
  transition: all 0.2s;
  text-decoration: none;
}

.group-btn:hover {
  background: var(--surface);
  color: var(--secondary);
}

/* "Controlar" — a mesma tela de /manage que o dono do grupo usa. Fica com a
   cor da marca para o admin achar rápido. */
.group-btn.manage {
  color: var(--primary);
  border-color: rgba(99, 102, 241, 0.35);
  background: rgba(99, 102, 241, 0.08);
}

.group-btn.manage:hover {
  background: rgba(99, 102, 241, 0.16);
  border-color: var(--primary);
  color: var(--primary);
}

.group-btn.delete:hover {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.2);
  color: #EF4444;
}

/* Em tela estreita os três botões encolhem demais: viram duas colunas e o
   "Controlar" ocupa a linha inteira. */
@media (max-width: 520px) {
  .group-card-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .group-card-actions .group-btn.manage {
    grid-column: 1 / -1;
  }
}

.empty-groups {
  padding: 3rem 2rem;
  text-align: center;
  color: var(--text-muted);
}

.empty-groups p {
  margin-bottom: 1rem;
}

.btn-sm {
  padding: 0.5rem 0.75rem;
  font-size: 0.8rem;
}

/* New Card Styles (gc-*) */
.gc-top {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.gc-photo {
  width: 70px;
  height: 70px;
  border-radius: 0.75rem;
  overflow: hidden;
  flex-shrink: 0;
  border: 2px solid var(--border);
}

.gc-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gc-photo-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.3rem;
  font-weight: 700;
}

.gc-photo-placeholder img {
  width: 60%;
  height: 60%;
  object-fit: contain;
}

.gc-info {
  flex: 1;
  min-width: 0;
}

.gc-name-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.35rem;
}

.gc-name-row h4 {
  font-size: 1rem;
  color: var(--text);
  margin: 0;
}

.gc-stats-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.gc-members {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.gc-vagas {
  font-size: 0.65rem;
  font-weight: 800;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  background: rgba(16, 185, 129, 0.1);
  color: var(--success);
  text-transform: uppercase;
}

.gc-vagas.full {
  background: rgba(239, 68, 68, 0.1);
  color: var(--error);
}

.gc-ref {
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  background: rgba(79, 70, 229, 0.1);
  color: var(--primary);
  font-family: monospace;
}

.gc-divider {
  height: 1px;
  background: var(--border);
  margin: 0.85rem 0;
  opacity: 0.5;
}

.gc-verified {
  color: #0EA5E9;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .platform-grid {
    grid-template-columns: 1fr 1fr;
  }

  .groups-grid {
    grid-template-columns: 1fr;
  }

  .admin-header {
    flex-direction: column;
  }

  .groups-header-actions {
    width: 100%;
    justify-content: flex-end;
  }
}

@media (max-width: 480px) {
  .platform-grid {
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
  }

  .platform-card {
    padding: 0.65rem 0.75rem;
    gap: 0.5rem;
  }

  .platform-card-icon {
    width: 36px;
    height: 36px;
    font-size: 0.9rem;
  }

  .platform-card-info h3 {
    font-size: 0.78rem;
  }

  .platform-card-info span {
    font-size: 0.65rem;
  }

  .admin-header h1 {
    font-size: 1.2rem;
  }
}

/* Tabs */
.groups-tabs {
  display: flex;
  gap: 0.5rem;
  margin: 1rem 0;
  border-bottom: 2px solid var(--border);
  padding-bottom: 0;
}

.groups-tab {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.6rem 1rem;
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: -2px;
  transition: all 0.15s;
}

.groups-tab:hover { color: var(--text); }

.groups-tab.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

.groups-tab.pending.active { color: var(--warning, #F59E0B); border-bottom-color: var(--warning, #F59E0B); }
.groups-tab.rejected.active { color: var(--danger, #EF4444); border-bottom-color: var(--danger, #EF4444); }

/* Pending Groups */
.pending-groups-section { margin: 1rem 0; }

.pending-groups-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.pending-group-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
  border-left: 4px solid var(--warning, #F59E0B);
}

.pending-group-card.rejected-card {
  border-left-color: var(--danger, #EF4444);
  opacity: 0.8;
}

.pending-group-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.75rem;
}

.pending-group-info { display: flex; flex-direction: column; gap: 0.2rem; }
.pending-group-info h3 { font-size: 1rem; color: var(--text); margin: 0; }
.pending-group-service { font-size: 0.82rem; color: var(--primary); font-weight: 600; }
.pending-group-owner { font-size: 0.78rem; color: var(--text-muted); }

.pending-badge, .rejected-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
}

.pending-badge { background: rgba(245, 158, 11, 0.1); color: var(--warning, #F59E0B); }
.rejected-badge { background: rgba(239, 68, 68, 0.1); color: var(--danger, #EF4444); }

.pending-group-details {
  display: flex;
  gap: 1rem;
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}

.pending-group-rules {
  font-size: 0.8rem;
  color: var(--text);
  padding: 0.5rem 0.75rem;
  background: var(--surface-hover, rgba(0,0,0,0.03));
  border-radius: var(--radius-sm);
  margin-bottom: 0.75rem;
  line-height: 1.4;
}

.rejected-reason {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.6rem 0.75rem;
  background: rgba(239, 68, 68, 0.05);
  border-radius: var(--radius-sm);
  margin-bottom: 0.75rem;
  font-size: 0.82rem;
  color: var(--text);
  border: 1px solid rgba(239, 68, 68, 0.15);
}

.rejected-reason svg { color: var(--danger, #EF4444); flex-shrink: 0; margin-top: 2px; }

.pending-group-actions {
  display: flex;
  gap: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border);
}

.approve-btn, .reject-btn {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.45rem 0.85rem;
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid;
}

.approve-btn {
  background: rgba(16, 185, 129, 0.08);
  border-color: rgba(16, 185, 129, 0.3);
  color: var(--success, #10B981);
}

.approve-btn:hover:not(:disabled) { background: var(--success, #10B981); color: white; }

.reject-btn {
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.3);
  color: var(--danger, #EF4444);
}

.reject-btn:hover:not(:disabled) { background: var(--danger, #EF4444); color: white; }

.approve-btn:disabled, .reject-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Reject Modal */
.reject-modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  width: 100%;
  max-width: 480px;
  margin: auto;
}

.reject-modal-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border);
}

.reject-modal-header svg { color: var(--danger, #EF4444); }
.reject-modal-header h3 { flex: 1; margin: 0; font-size: 1rem; color: var(--text); }
.reject-modal-header .close-btn { background: none; border: none; font-size: 1.5rem; cursor: pointer; color: var(--text-muted); padding: 0; line-height: 1; }

.reject-modal-body { padding: 1.25rem; }
.reject-modal-body p { margin: 0.25rem 0; font-size: 0.85rem; color: var(--text); }

.reject-form-group { margin-top: 1rem; }
.reject-form-group label { display: block; font-size: 0.8rem; font-weight: 700; color: var(--text); margin-bottom: 0.3rem; }
.reject-form-group textarea {
  width: 100%;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text);
  font-size: 0.85rem;
  resize: vertical;
}
.reject-form-group textarea:focus { outline: none; border-color: var(--danger, #EF4444); }

.reject-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--border);
}

.cancel-btn {
  padding: 0.5rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}

.confirm-reject-btn {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--danger, #EF4444);
  color: white;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
}

.confirm-reject-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.notification-composer-card {
  margin: 1.25rem 0;
  padding: 1rem;
  border: 1px solid rgba(79, 70, 229, 0.22);
  border-radius: 0.9rem;
  background: linear-gradient(180deg, rgba(79, 70, 229, 0.08), rgba(79, 70, 229, 0.03));
}

.notification-composer-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.notification-composer-header h3 {
  font-size: 0.98rem;
  margin: 0.35rem 0 0.25rem;
  color: var(--secondary);
}

.notification-composer-badge,
.notification-composer-meta {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}

.notification-composer-badge {
  background: rgba(79, 70, 229, 0.12);
  color: var(--primary);
}

.notification-composer-meta {
  background: rgba(16, 185, 129, 0.12);
  color: #10B981;
}

.notification-composer-grid {
  display: grid;
  gap: 1rem;
}

.notification-composer-message textarea {
  min-height: 100px;
  resize: vertical;
}

.notification-composer-channels {
  margin-top: 1rem;
}

.notification-composer-channels-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.notification-composer-channels-head > label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
}

.notification-composer-channels-all {
  background: none;
  border: none;
  padding: 0;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--primary);
  cursor: pointer;
}

.notification-composer-channels-all:hover {
  text-decoration: underline;
}

.notification-composer-channels-hint {
  margin: 0.6rem 0 0;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.notification-composer-channel-toggle {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.channel-btn {
  padding: 0.5rem 1rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: var(--surface);
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-muted);
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

/* Ponto de estado: os canais são ESCOLHA MÚLTIPLA (a bolinha vazia é o
   estado desligado), não opções exclusivas. */
.channel-btn::before {
  content: '';
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  opacity: 0.45;
  transition: opacity 0.2s, background 0.2s;
}

.channel-btn:hover {
  border-color: var(--primary);
  color: var(--text);
}

.channel-btn.active {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}

.channel-btn.active::before {
  background: currentColor;
  opacity: 1;
}

.channel-btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.notification-composer-error {
  margin-top: 0.9rem;
  color: var(--error);
  font-size: 0.875rem;
  padding: 0.5rem 0.75rem;
  background: rgba(239, 68, 68, 0.08);
  border-radius: 0.5rem;
}

.notification-composer-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 1rem;
}

@media (max-width: 768px) {
  .notification-composer-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .notification-composer-channel-toggle {
    flex-direction: column;
  }

  .channel-btn {
    width: 100%;
    justify-content: center;
  }
}
.group-form-page {
  animation: slideUpFade 0.3s ease-out forwards;
  padding-bottom: 6rem;
}

@keyframes slideUpFade {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.back-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--text-muted);
  background: none;
  border: none;
  font-size: 0.9rem;
  cursor: pointer;
  margin-bottom: 1rem;
  padding: 0;
  transition: color 0.2s;
}

.back-btn:hover {
  color: var(--primary);
}

.group-form-card {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.form-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 1rem;
  padding: 1.5rem;
}

.form-section h2 {
  font-size: 1.1rem;
  color: var(--secondary);
  margin-bottom: 0.5rem;
}

.section-desc {
  color: var(--text-muted);
  font-size: 0.85rem;
  margin-bottom: 1rem;
  line-height: 1.5;
}

.form-section strong {
  color: var(--primary);
}

/* ═══ Seções recolhíveis (accordion) — tela de EDIÇÃO ═══════════════
   O corpo fica no DOM e recolhe com altura zero: os campos
   obrigatórios continuam validados pelo navegador mesmo fechado. */

.group-form-card.is-compact {
  gap: 0.6rem;
}

.accordion-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0.9rem;
  overflow: hidden;
}

.accordion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  padding: 0.8rem 1rem;
  background: none;
  border: none;
  font-family: inherit;
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--secondary);
  text-align: left;
  cursor: pointer;
  transition: color 0.2s, background 0.2s;
}

.accordion-header:hover {
  color: var(--primary);
  background: rgba(79, 70, 229, 0.05);
}

.accordion-header:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}

.accordion-title {
  flex: 1;
  min-width: 0;
}

.accordion-chevron {
  flex-shrink: 0;
  color: var(--text-muted);
  transition: transform 0.2s ease;
}

.accordion-card.is-open .accordion-chevron {
  transform: rotate(180deg);
}

.accordion-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.22s ease;
}

.accordion-card.is-open .accordion-body {
  grid-template-rows: 1fr;
}

.accordion-body-inner {
  min-height: 0;
  overflow: hidden;
}

.accordion-card.is-open .accordion-body-inner {
  padding: 0 1rem 1rem;
}

/* Avisos discretos (coluna que ainda não existe no banco, etc.). */
.gf-note {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.7rem 0.85rem;
  border-radius: 0.6rem;
  font-size: 0.82rem;
  line-height: 1.5;
  margin-bottom: 0.85rem;
}

.gf-note svg {
  flex-shrink: 0;
  margin-top: 2px;
}

.gf-note.info {
  background: var(--primary-soft);
  color: var(--text-main);
}

.gf-note.info svg {
  color: var(--primary);
}

.gf-note.warn {
  background: rgba(245, 158, 11, 0.12);
  color: var(--text-main);
}

.gf-note.warn svg {
  color: var(--warning, #F59E0B);
}

.gf-note code {
  background: rgba(148, 163, 184, 0.18);
  padding: 0.05rem 0.3rem;
  border-radius: 4px;
  font-size: 0.82em;
}

/* ═══ Dados bancários / transferência ════════════════════════════════ */

.bank-subtitle {
  font-size: 0.92rem;
  color: var(--secondary);
  margin: 1rem 0 0.6rem;
}

.bank-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.6rem;
  margin-bottom: 0.85rem;
}

.bank-item {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.65rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: 0.7rem;
  background: var(--background);
}

.bank-item-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.bank-item-value {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--secondary);
  word-break: break-word;
}

.bank-item-value.is-empty {
  color: var(--text-muted);
  font-weight: 500;
}

.bank-item-input {
  width: 100%;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  font-size: 0.88rem;
  background: var(--surface);
  color: var(--text-main);
  outline: none;
}

.bank-item-input:focus {
  border-color: var(--primary);
}

.bank-item-hint {
  font-size: 0.75rem;
  color: var(--text-muted);
  line-height: 1.45;
}

.bank-list {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin-bottom: 0.85rem;
}

.bank-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 0.55rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: 0.7rem;
  background: var(--background);
  font-size: 0.85rem;
}

.bank-row strong {
  color: var(--secondary);
}

.bank-row-meta {
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* ═══ Log do grupo (linha do tempo) ═════════════════════════════════ */

.log-timeline {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.log-item {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 0.7rem;
  background: var(--background);
}

.log-item-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  background: rgba(79, 70, 229, 0.12);
  color: var(--primary);
}

.log-item-main {
  flex: 1;
  min-width: 0;
}

.log-item-title {
  font-size: 0.87rem;
  font-weight: 600;
  color: var(--secondary);
}

.log-item-msg {
  font-size: 0.79rem;
  color: var(--text-muted);
  margin-top: 0.1rem;
  word-break: break-word;
}

.log-item-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.3rem;
  font-size: 0.72rem;
  color: var(--text-muted);
}

.log-badge {
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  background: rgba(79, 70, 229, 0.12);
  color: var(--primary);
  white-space: nowrap;
}

.log-empty {
  text-align: center;
  padding: 1.25rem 0.5rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.group-alert-card {
  margin: 1.25rem 0;
  padding: 1rem;
  border: 1px solid rgba(79, 70, 229, 0.22);
  border-radius: 0.9rem;
  background: linear-gradient(180deg, rgba(79, 70, 229, 0.08), rgba(79, 70, 229, 0.03));
}

.group-alert-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.group-alert-header h3 {
  font-size: 0.98rem;
  margin-bottom: 0.25rem;
  color: var(--secondary);
}

.group-alert-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  background: rgba(79, 70, 229, 0.12);
  color: var(--primary);
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}

.group-alert-grid {
  margin-bottom: 1rem;
}

.group-alert-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.group-alert-meta {
  font-size: 0.82rem;
  color: var(--text-muted);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

/* Seletor "tem anúncios?" — logo abaixo do tipo de conta */
.form-group.ads-field {
  margin-top: 0.5rem;
  padding-top: 1.1rem;
  border-top: 1px dashed var(--border);
}

.form-group label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
}

.form-group input,
.form-group select,
.form-group textarea {
  padding: 0.75rem 1rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  font-size: 0.95rem;
  background: var(--background);
  color: var(--text-main);
  outline: none;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--primary);
}

.form-inline {
  display: flex;
  gap: 1rem;
  align-items: flex-end;
}

.form-inline .form-group {
  flex: 1;
}

.checkbox-group label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: var(--background);
}

.checkbox-group input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--primary);
}

/* Sticky Footer */
.form-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  padding: 1rem 2rem;
  background: var(--surface);
  border-top: 1px solid var(--border);
  z-index: 100;
  box-shadow: 0 -4px 20px rgb(0 0 0 / 0.15);
}

.form-footer .btn-outline {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
}

.form-footer .btn-outline:hover {
  background: var(--background);
  border-color: var(--text-muted);
  color: var(--secondary);
}

.form-footer .btn {
  padding: 0.7rem 1.5rem;
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: 0.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.spin {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.section-header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.btn-sm {
  padding: 0.45rem 0.9rem;
  font-size: 0.85rem;
  gap: 0.35rem;
  white-space: nowrap;
}

.btn-icon {
  width: 32px;
  height: 32px;
  border-radius: 0.5rem;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-icon.danger:hover {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.3);
  color: #EF4444;
}

.credential-entry {
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  padding: 1rem;
  margin-bottom: 0.75rem;
}

.credential-entry-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}

.credential-entry-header h3 {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--secondary);
}

.credential-entry-badges {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.assigned-badge {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--success);
  background: rgba(16, 185, 129, 0.1);
  padding: 0.2rem 0.6rem;
  border-radius: 1rem;
  white-space: nowrap;
}

.available-badge {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-muted);
  background: var(--background);
  border: 1px dashed var(--border);
  padding: 0.2rem 0.6rem;
  border-radius: 1rem;
  white-space: nowrap;
}

.cred-fields {
  grid-template-columns: 1fr 1fr 1fr;
}

/* Atribuicao da credencial (group_credentials.assigned_to).
   Vinculada = so aquele membro enxerga o acesso. Compartilhada = todo
   membro ativo enxerga. */
.cred-assignment {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.85rem 1rem;
  border-radius: 10px;
  border: 1px solid var(--border);
  margin-bottom: 1.25rem;
  font-size: 0.85rem;
  line-height: 1.45;
}

.cred-assignment > svg {
  flex-shrink: 0;
  margin-top: 0.15rem;
}

.cred-assignment-text {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  flex: 1;
}

.cred-assignment-text strong {
  color: var(--text-primary);
}

.cred-assignment-text span {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.cred-assignment.is-locked {
  background: rgba(245, 158, 11, 0.08);
  border-color: rgba(245, 158, 11, 0.35);
}

.cred-assignment.is-locked > svg {
  color: var(--warning);
}

.cred-assignment.is-shared {
  background: rgba(16, 185, 129, 0.08);
  border-color: rgba(16, 185, 129, 0.3);
}

.cred-assignment.is-shared > svg {
  color: var(--success);
}

.cred-assignment button {
  flex-shrink: 0;
  align-self: center;
}

/* Toggle Section */
.toggle-section {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}

.toggle-label {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  cursor: pointer;
  padding: 1rem;
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  transition: border-color 0.2s;
}

.toggle-label:hover {
  border-color: var(--primary);
}

.toggle-label input[type="checkbox"] {
  display: none;
}

.toggle-switch {
  width: 44px;
  height: 24px;
  background: var(--border);
  border-radius: 12px;
  position: relative;
  flex-shrink: 0;
  transition: background 0.3s;
  margin-top: 2px;
}

.toggle-switch::after {
  content: '';
  width: 20px;
  height: 20px;
  background: white;
  border-radius: 50%;
  position: absolute;
  top: 2px;
  left: 2px;
  transition: transform 0.3s;
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.15);
}

.toggle-label input:checked + .toggle-switch {
  background: var(--primary);
}

.toggle-label input:checked + .toggle-switch::after {
  transform: translateX(20px);
}

.toggle-text {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.toggle-text strong {
  font-size: 0.9rem;
  color: var(--secondary);
}

.toggle-text small {
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* Profiles Section */
.profiles-section {
  margin-top: 1.25rem;
}

.profiles-section h3 {
  font-size: 1rem;
  color: var(--secondary);
  margin-bottom: 0.25rem;
}

.profile-entry {
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  padding: 1rem;
  margin-bottom: 0.75rem;
}

.profile-entry-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}

.profile-entry-header h4 {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--secondary);
  margin: 0;
}

.profile-entry-badges {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.add-profile-inline-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.8rem 1rem;
  margin-top: 0.5rem;
  background: transparent;
  border: 2px dashed var(--border);
  border-radius: 0.75rem;
  color: var(--text-muted);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.add-profile-inline-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: rgba(79, 70, 229, 0.03);
}

/* Members Management */
.members-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.member-entry {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
}

.member-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.member-number {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--primary);
  background: rgba(79, 70, 229, 0.08);
  padding: 0.2rem 0.5rem;
  border-radius: 0.375rem;
  min-width: 2rem;
  text-align: center;
}

.member-info strong {
  display: block;
  font-size: 0.9rem;
  color: var(--secondary);
  margin-bottom: 0.1rem;
}

.member-email {
  display: block;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.add-member-row {
  display: flex;
  gap: 0.5rem;
}

.add-member-row input {
  flex: 1;
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  font-size: 0.9rem;
  background: var(--background);
  color: var(--text-main);
  outline: none;
}

.add-member-row input:focus {
  border-color: var(--primary);
}

/* Toast */
.toast-success {
  position: fixed;
  top: 1.5rem;
  right: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.2rem;
  background: #10B981;
  color: rgba(16,185,129,0.12);
  border-radius: 0.75rem;
  font-size: 0.9rem;
  font-weight: 500;
  z-index: 9999;
  animation: toastIn 0.3s ease-out;
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.3);
}

.toast-success button {
  background: none;
  border: none;
  color: rgba(16,185,129,0.12);
  cursor: pointer;
  padding: 0;
  display: flex;
  margin-left: 0.5rem;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.toast-success button:hover {
  opacity: 1;
}

@keyframes toastIn {
  from { opacity: 0; transform: translateY(-12px); }
  to { opacity: 1; transform: translateY(0); }
}

.field-hint {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 0.15rem;
}

/* ═══ Seletor do dono do grupo ═══════════════════════════════════════ */

.owner-current {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.owner-current-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.55rem 0.7rem;
  border-radius: 0.5rem;
  border: 1px solid var(--border);
  background: var(--surface);
}

.owner-current-info strong {
  font-size: 0.85rem;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.owner-current-info small {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.owner-picker {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.owner-search {
  position: relative;
}

.owner-search input {
  width: 100%;
  padding-right: 2.2rem;
}

.owner-search-spinner {
  position: absolute;
  right: 0.65rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
}

.owner-empty {
  margin: 0;
  padding: 0.4rem 0.2rem;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.owner-results {
  display: flex;
  flex-direction: column;
  border-radius: 0.5rem;
  border: 1px solid var(--border);
  background: var(--surface);
  overflow: hidden;
  max-height: 220px;
  overflow-y: auto;
}

.owner-result {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  width: 100%;
  padding: 0.55rem 0.7rem;
  border: none;
  border-bottom: 1px solid var(--border);
  background: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.85rem;
  color: var(--text);
  text-align: left;
  transition: background 0.15s ease;
}

.owner-result:last-child {
  border-bottom: none;
}

.owner-result:hover {
  background: var(--primary-soft);
}

.owner-result strong {
  font-weight: 600;
}

.owner-result span {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.owner-cancel {
  align-self: flex-start;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0.45rem;
  padding: 0.35rem 0.7rem;
  font-size: 0.78rem;
  font-weight: 600;
  font-family: inherit;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.owner-cancel:hover {
  color: var(--text);
  border-color: var(--border-strong);
}

.cycles-grid {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.cycle-check {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: var(--background);
  cursor: pointer;
  font-size: 0.88rem;
  color: var(--text-muted);
  transition: all 0.2s;
  user-select: none;
}

.cycle-check input {
  display: none;
}

.cycle-check.active {
  border-color: var(--primary);
  color: var(--primary);
  background: rgba(79, 70, 229, 0.05);
  font-weight: 600;
}

.cycle-check:hover {
  border-color: var(--primary);
}

.price-simulation {
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  padding: 1rem;
}

.sim-header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--secondary);
  margin-bottom: 0.75rem;
}

.sim-header svg {
  color: var(--primary);
}

.sim-grid {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.sim-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.88rem;
  padding: 0.3rem 0;
}

.sim-row.fee {
  color: var(--text-muted);
  font-size: 0.82rem;
}

.sim-row.total {
  border-top: 1px solid var(--border);
  padding-top: 0.5rem;
  margin-top: 0.25rem;
  font-size: 0.95rem;
}

.sim-row.total strong {
  color: var(--success);
}

/* Simulação nova: 3 linhas, sem porcentagem (regra de faixas da plataforma) */
.sim-row-charged {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  font-size: 0.95rem;
  color: #3B82F6;
}

.sim-row-charged span:last-child {
  font-size: 1.3rem;
  font-weight: 800;
  white-space: nowrap;
}

.sim-row-platform {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  font-size: 0.9rem;
  color: #EF4444;
}

.sim-row-platform strong {
  font-size: 1.05rem;
  font-weight: 800;
  color: #EF4444;
  white-space: nowrap;
}

.sim-row-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  border-top: 1px solid var(--border);
  padding-top: 0.7rem;
  margin-top: 0.15rem;
  font-size: 0.9rem;
  color: var(--text-muted);
}

.sim-row-total strong {
  font-size: 1.6rem;
  font-weight: 800;
  color: #10B981;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

/* Group Photo Upload */
.group-photo-upload {
  margin-top: 0.35rem;
}

.photo-preview {
  position: relative;
  width: 120px;
  height: 120px;
  border-radius: 0.75rem;
  overflow: hidden;
  border: 2px solid var(--border);
}

.photo-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(0,0,0,0.7);
  color: white;
  border: none;
  font-size: 0.7rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.photo-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 120px;
  border: 2px dashed var(--border);
  border-radius: 0.75rem;
  cursor: pointer;
  color: var(--text-muted);
  gap: 0.35rem;
  transition: all 0.15s;
}

.photo-placeholder:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.photo-placeholder span {
  font-size: 0.7rem;
  font-weight: 600;
}

/* Plan Type Grid */
.plan-type-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.35rem;
}

.plan-type-btn {
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}

.plan-type-btn:hover {
  border-color: var(--primary);
  color: var(--text);
}

.plan-type-btn.active {
  border-color: var(--primary);
  background: rgba(79, 70, 229, 0.1);
  color: var(--primary);
}

.plan-type-btn.custom {
  border-style: dashed;
}

.plan-type-btn.custom.active {
  border-style: solid;
  border-color: var(--warning, #F59E0B);
  background: rgba(245, 158, 11, 0.1);
  color: var(--warning, #F59E0B);
}

.plan-type-custom-input {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text);
  font-size: 0.85rem;
}

.plan-type-custom-input:focus {
  outline: none;
  border-color: var(--warning, #F59E0B);
}

@media (max-width: 768px) {
  .form-grid,
  .cred-fields,
  .bank-grid {
    grid-template-columns: 1fr;
  }

  .form-inline {
    flex-direction: column;
  }

  .section-header-row {
    flex-direction: column;
  }

  .form-footer {
    padding: 1rem;
    justify-content: stretch;
  }

  .form-footer .btn {
    flex: 1;
    justify-content: center;
  }
}
.search-select-wrapper {
  position: relative;
  width: 100%;
}

.search-select-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.5rem;
}

.search-select-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
  background: rgba(79, 70, 229, 0.12);
  color: var(--primary, #4f46e5);
  font-size: 0.8rem;
  font-weight: 600;
}

.search-select-tag-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: none;
  background: rgba(79, 70, 229, 0.15);
  color: inherit;
  cursor: pointer;
  padding: 0;
  transition: background 0.15s;
}

.search-select-tag-remove:hover {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
}

.search-select-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.search-select-icon {
  position: absolute;
  left: 0.75rem;
  color: var(--text-muted, #94a3b8);
  pointer-events: none;
}

.search-select-input {
  width: 100%;
  padding: 0.65rem 0.75rem 0.65rem 2.75rem;
  border-radius: 0.5rem;
  border: 1px solid var(--border, #e2e8f0);
  background: var(--surface, #fff);
  font-family: inherit;
  font-size: 0.9rem;
  color: var(--text, #0f172a);
  outline: none;
  transition: border-color 0.2s;
}

.search-select-input:focus {
  border-color: var(--primary, #4f46e5);
}

.search-select-input::placeholder {
  color: var(--text-muted, #94a3b8);
}

.search-select-spinner {
  position: absolute;
  right: 0.75rem;
  width: 16px;
  height: 16px;
  border: 2px solid var(--border, #e2e8f0);
  border-top-color: var(--primary, #4f46e5);
  border-radius: 50%;
  animation: search-spin 0.6s linear infinite;
}

@keyframes search-spin {
  to { transform: rotate(360deg); }
}

.search-select-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 100;
  margin-top: 0.25rem;
  max-height: 260px;
  overflow-y: auto;
  border-radius: 0.5rem;
  border: 1px solid var(--border, #e2e8f0);
  background: var(--surface, #fff);
  box-shadow: 0 8px 24px -4px rgba(15, 23, 42, 0.15);
}

.search-select-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.6rem 0.75rem;
  border: none;
  background: none;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s;
}

.search-select-option:hover {
  background: rgba(79, 70, 229, 0.06);
}

.search-select-option.selected {
  background: rgba(79, 70, 229, 0.1);
}

.search-select-option + .search-select-option {
  border-top: 1px solid rgba(0, 0, 0, 0.04);
}

.search-select-option-info {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.search-select-option-name {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text, #0f172a);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-select-option-email {
  font-size: 0.78rem;
  color: var(--text-muted, #94a3b8);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-select-check {
  color: var(--primary, #4f46e5);
  font-weight: 700;
  font-size: 0.85rem;
  flex-shrink: 0;
}

.search-select-empty {
  padding: 1rem;
  text-align: center;
  color: var(--text-muted, #94a3b8);
  font-size: 0.875rem;
}

.search-select-error {
  margin-top: 0.4rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  background: rgba(239, 68, 68, 0.08);
  color: #ef4444;
  font-size: 0.8rem;
}

/* Group members preview */
.group-members-preview {
  margin-top: 0.75rem;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 0.5rem;
  overflow: hidden;
}

.group-members-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.75rem;
  background: rgba(79, 70, 229, 0.06);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--primary, #4f46e5);
}

.group-members-list {
  max-height: 200px;
  overflow-y: auto;
}

.group-member-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.75rem;
  border-top: 1px solid rgba(0, 0, 0, 0.04);
}

.group-member-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(79, 70, 229, 0.12);
  color: var(--primary, #4f46e5);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  flex-shrink: 0;
}

.group-member-info {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.group-member-name {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text, #0f172a);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.group-member-profile {
  font-weight: 400;
  color: var(--text-muted, #94a3b8);
}

.group-member-email {
  font-size: 0.75rem;
  color: var(--text-muted, #94a3b8);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.group-members-empty {
  padding: 0.75rem;
  text-align: center;
  color: var(--text-muted, #94a3b8);
  font-size: 0.82rem;
}
.announcement-form-card {
  margin-bottom: 2rem;
}

/* Resumo do que saiu, por canal. */
.announcement-success {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 0.85rem;
  padding: 0.75rem 0.9rem;
  border-radius: 0.6rem;
  background: rgba(16, 185, 129, 0.12);
  color: #10B981;
  font-size: 0.85rem;
  font-weight: 600;
}

.announcement-success svg {
  flex-shrink: 0;
  margin-top: 0.1rem;
}

.announcement-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1rem;
}

.announcement-form input[type="text"],
.announcement-form textarea,
.announcement-form select,
.announcement-form input[type="email"] {
  padding: 0.75rem;
  border-radius: 0.5rem;
  border: 1px solid var(--border);
  font-family: inherit;
  font-size: 0.95rem;
}

.announcement-form textarea {
  min-height: 100px;
  resize: vertical;
}

.form-row {
  display: flex;
  gap: 1rem;
}

.form-row > input[type="text"] {
  flex: 1;
}

.form-row > select {
  min-width: 180px;
}

.target-row {
  flex-direction: column;
  gap: 0.75rem;
}

.target-toggle {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.channel-toggle {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.channel-btn {
  padding: 0.5rem 1rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: var(--surface);
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-muted);
  transition: all 0.2s;
}

.channel-btn.active {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}

.target-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: var(--surface);
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-muted);
  transition: all 0.2s;
}

.target-btn.active {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}

.email-input {
  max-width: 350px;
}

.form-error {
  color: var(--error);
  font-size: 0.875rem;
  padding: 0.5rem 0.75rem;
  background: rgba(239, 68, 68, 0.08);
  border-radius: 0.5rem;
}

.actions-cell {
  display: flex;
  gap: 0.5rem;
  white-space: nowrap;
}

.toggle-btn {
  padding: 0.25rem 0.5rem;
  font-size: 0.8rem;
}

.delete-btn {
  padding: 0.25rem 0.5rem;
  font-size: 0.8rem;
  color: var(--error);
  border-color: var(--error);
}

.status-badge.info {
  background: rgba(14, 165, 233, 0.1);
  color: #0EA5E9;
}

.status-badge.warning {
  background: rgba(245, 158, 11, 0.1);
  color: #f59e0b;
}

.status-badge.success {
  background: rgba(16, 185, 129, 0.1);
  color: var(--success);
}

.status-badge.urgent {
  background: rgba(239, 68, 68, 0.1);
  color: var(--error);
}

@media (max-width: 768px) {
  .form-row {
    flex-direction: column;
  }

  .form-row > select {
    min-width: unset;
  }

  /* Só os avisos empilham as ações no celular. `.actions-cell` é classe
     global e esta regra vazava para as outras telas do painel. */
  .announcement-actions-cell {
    flex-direction: column;
  }

  .target-toggle,
  .channel-toggle {
    flex-direction: column;
  }
}
/* ============================================================
   ADMIN — Ofertas Patrocinadas
   ============================================================ */

.spon-admin {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* ── Resumo ─────────────────────────────────────────────── */
.spon-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 0.85rem;
}

.spon-stat-card {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--primary-light);
}

.spon-stat-card--green { color: var(--success); }
.spon-stat-card--purple { color: var(--primary-light); }
.spon-stat-card--blue { color: var(--info); }

.spon-stat-val {
  display: block;
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--text-main);
  line-height: 1.2;
}

.spon-stat-lbl {
  display: block;
  font-size: 0.72rem;
  color: var(--text-muted);
}

/* ── Botões ────────────────────────────────────────────── */
.spon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.55rem 0.95rem;
  font-size: 0.85rem;
  font-weight: 700;
  font-family: inherit;
  border-radius: var(--radius-xs);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.18s ease;
}

.spon-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

.spon-btn--primary {
  background: var(--primary);
  color: #fff;
}

.spon-btn--primary:hover:not(:disabled) {
  background: var(--primary-600);
}

.spon-btn--ghost {
  background: var(--surface-soft);
  border-color: var(--border);
  color: var(--text-main);
}

.spon-btn--ghost:hover:not(:disabled) {
  border-color: var(--primary);
  color: var(--primary-light);
}

.spon-btn--danger {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.35);
  color: #EF4444;
}

.spon-btn--danger:hover:not(:disabled) {
  background: rgba(239, 68, 68, 0.2);
}

.spon-actions-bar {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
  flex-wrap: wrap;
}

/* ── Aviso de resultado ────────────────────────────────── */
.spon-result {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-xs);
  font-size: 0.85rem;
  font-weight: 600;
}

.spon-result--success {
  background: var(--economy-bg);
  color: var(--economy);
}

.spon-result--error {
  background: rgba(239, 68, 68, 0.1);
  color: #EF4444;
}

/* ── Formulário ────────────────────────────────────────── */
.spon-form-inline {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.35rem;
}

.spon-form-header h3 {
  font-size: 1.05rem;
  color: var(--text-main);
  margin: 0 0 1rem;
}

.spon-form {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.spon-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.spon-form .form-group label {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: 0.35rem;
}

.spon-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
  padding-top: 0.35rem;
}

/* ── Lista ─────────────────────────────────────────────── */
.spon-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 3rem 1rem;
  color: var(--text-muted);
  font-size: 0.9rem;
  text-align: center;
}

.spon-list {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.spon-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.15rem;
}

.spon-card--paused,
.spon-card--ended {
  opacity: 0.72;
}

.spon-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.spon-card-titles {
  flex: 1;
  min-width: 220px;
}

.spon-badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #7C2D12;
  background: var(--action-bg);
  border: 1px solid rgba(234, 88, 12, 0.3);
  padding: 0.22rem 0.55rem;
  border-radius: 999px;
  margin-bottom: 0.45rem;
}

.spon-card-titles h3 {
  font-size: 1rem;
  color: var(--text-main);
  margin: 0 0 0.25rem;
}

.spon-card-titles p {
  font-size: 0.83rem;
  color: var(--text-muted);
  margin: 0;
}

.spon-status {
  font-size: 0.7rem;
  font-weight: 800;
  padding: 0.28rem 0.6rem;
  border-radius: 999px;
  white-space: nowrap;
}

.spon-status--active {
  background: var(--economy-bg);
  color: var(--economy);
}

.spon-status--paused {
  background: rgba(245, 158, 11, 0.12);
  color: var(--warning);
}

.spon-status--ended {
  background: rgba(107, 114, 128, 0.12);
  color: var(--text-muted);
}

.spon-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin: 0.9rem 0;
  padding: 0.7rem 0.85rem;
  background: var(--surface-soft);
  border-radius: var(--radius-xs);
}

.spon-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.spon-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
}

.spon-sponsor {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.spon-sponsor strong {
  color: var(--text-main);
}

.spon-sponsor em {
  font-style: normal;
  font-size: 0.75rem;
}

.spon-card-actions {
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.spon-expired {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--warning);
  align-self: center;
}

/* ── Modal de confirmação ──────────────────────────────── */
.spon-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 1rem;
}

.spon-modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  max-width: 420px;
  width: 100%;
}

.spon-modal h3 {
  font-size: 1.05rem;
  color: var(--text-main);
  margin: 0 0 0.5rem;
}

.spon-modal p {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 0 0 1.1rem;
}

.spon-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
}

@media (max-width: 640px) {
  .spon-form-row {
    grid-template-columns: 1fr;
  }
}
/* ============================================================================
   CONFIGURAÇÕES DA PLATAFORMA (Admin)

   A tela tem 9 seções. A rolagem longa era o problema: o admin abria a página
   para trocar UM campo e tinha de passar por todo o resto.

   A solução aqui é de três partes:
     1. menu lateral fixo com âncoras (a seção ativa é destacada);
     2. cada seção é um CARD separado (não um bloco dentro de um card só);
     3. barra de SALVAR fixa no rodapé, que diz quantas alterações estão
        pendentes — o "Salvar" nunca some da tela.
   ========================================================================== */

.settings-page {
  max-width: 1150px;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* ── Cabeçalho ─────────────────────────────────────────────────────────── */
.settings-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.settings-hero-text h1 {
  font-size: 1.6rem;
  color: var(--secondary);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
}

.settings-hero-text p {
  color: var(--text-muted);
  font-size: 0.88rem;
  margin-top: 0.25rem;
}

/* Resumo do estado atual: ambiente, gateway, divisão. */
.settings-hero-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.settings-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  white-space: nowrap;
}

.settings-chip.chip-prod {
  border-color: rgba(34, 197, 94, 0.35);
  background: rgba(34, 197, 94, 0.1);
  color: #22c55e;
}

.settings-chip.chip-sandbox {
  border-color: rgba(245, 158, 11, 0.35);
  background: rgba(245, 158, 11, 0.1);
  color: #f59e0b;
}

.settings-chip.chip-ativo {
  border-color: rgba(14, 165, 233, 0.4);
  background: rgba(14, 165, 233, 0.1);
  color: var(--info);
}

.settings-chip.chip-alerta {
  border-color: rgba(239, 68, 68, 0.35);
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

/* ── Layout: menu + conteúdo ───────────────────────────────────────────── */
.settings-layout {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
}

/* Menu lateral: fica parado enquanto a página rola. */
.settings-nav {
  position: sticky;
  top: 4.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.5rem;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  background: var(--surface);
}

.settings-nav-item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  padding: 0.5rem 0.65rem;
  border: none;
  border-radius: 0.5rem;
  background: transparent;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  transition: all 0.15s ease;
}

.settings-nav-item:hover {
  background: var(--background);
  color: var(--text-main);
}

.settings-nav-item.active {
  background: rgba(14, 165, 233, 0.12);
  color: var(--info);
}

.settings-nav-item svg {
  flex-shrink: 0;
}

/* ── Conteúdo: pilha de cards ──────────────────────────────────────────── */
.settings-content {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  min-width: 0;
}

/* Cada seção é um card próprio (antes: um card só com divisórias). */
.settings-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 1rem;
  overflow: hidden;
  /* Compensa a barra de contexto fixa do painel admin ao pular para a seção. */
  scroll-margin-top: 4.5rem;
}

.settings-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--border);
  background: var(--background);
}

.settings-section-header h2 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--secondary);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
}

.settings-section-hint {
  font-size: 0.78rem;
  color: var(--text-muted);
  text-align: right;
}

.settings-section-hint strong {
  color: var(--text-main);
}

.settings-section-body {
  padding: 1.25rem 1.5rem;
}

.settings-footnote {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 0.75rem;
}

.settings-inline-alert {
  margin-top: 1rem;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

/* ── Info Blocks ───────────────────────────────────────────────────────── */
.settings-info-block {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.85rem 1rem;
  border-radius: 0.5rem;
  background: rgba(14, 165, 233, 0.06);
  border: 1px solid rgba(14, 165, 233, 0.15);
  margin-top: 0.75rem;
}

.settings-info-block svg {
  color: var(--info);
  flex-shrink: 0;
  margin-top: 2px;
}

.settings-info-block p {
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0;
}

.settings-info-block strong {
  color: var(--text-main);
}

.settings-info-block code {
  font-size: 0.78rem;
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: 0.25rem;
  padding: 0.05rem 0.3rem;
  word-break: break-all;
}

.settings-info-block.warning {
  background: rgba(245, 158, 11, 0.06);
  border-color: rgba(245, 158, 11, 0.2);
}

.settings-info-block.warning svg {
  color: var(--warning);
}

/* ── Barra fixa de salvar ──────────────────────────────────────────────── */
.settings-footer {
  position: sticky;
  bottom: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border);
  border-radius: 0.85rem;
  background: var(--surface);
  box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.08);
}

.settings-footer.tem-pendencias {
  border-color: rgba(245, 158, 11, 0.45);
}

.settings-footer-info {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.settings-footer.tem-pendencias .settings-footer-info {
  color: var(--warning);
}

.settings-footer-info strong {
  color: var(--text-main);
}

.settings-footer .btn {
  padding: 0.6rem 1.4rem;
  font-size: 0.88rem;
  font-weight: 600;
  border-radius: 0.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

/* ── Banners ───────────────────────────────────────────────────────────── */
.success-banner {
  background: rgba(16, 185, 129, 0.1);
  color: var(--success);
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.85rem;
  border: 1px solid rgba(16, 185, 129, 0.2);
}

.error-banner {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.85rem;
  border: 1px solid rgba(239, 68, 68, 0.2);
}

/* ── Loading ───────────────────────────────────────────────────────────── */
.loading-state {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4rem 1.5rem;
  color: var(--text-muted);
  gap: 0.75rem;
}

.loading-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.spin {
  animation: spin 1s linear infinite;
}

/* ── Gateway Selector ──────────────────────────────────────────────────── */
.gateway-description {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

.gateway-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.gateway-grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.gateway-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem;
  background: var(--background);
  border: 2px solid var(--border);
  border-radius: 0.75rem;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
  position: relative;
  font-family: inherit;
  color: inherit;
}

.gateway-card:hover {
  border-color: var(--primary);
}

.gateway-card.active {
  border-color: var(--primary);
  background: rgba(79, 70, 229, 0.06);
}

.gateway-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  flex-shrink: 0;
}

.gateway-card-info {
  flex: 1;
  min-width: 0;
}

.gateway-card-info strong {
  display: block;
  font-size: 0.9rem;
  color: var(--secondary);
  margin-bottom: 0.15rem;
}

.gateway-card-info span {
  font-size: 0.75rem;
  color: var(--text-muted);
  line-height: 1.4;
}

.gateway-card-check {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
}

.gateway-check-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

/* ── Credenciais ───────────────────────────────────────────────────────── */
.gateway-credentials {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1rem;
}

.gateway-credentials .form-group {
  margin-bottom: 0;
}

/* Campo com botão de ação (mostrar/ocultar senha). */
.field-with-action {
  display: flex;
  align-items: stretch;
  gap: 0.4rem;
}

.field-with-action input {
  flex: 1;
  min-width: 0;
}

.field-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.35rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: var(--background);
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.field-action:hover {
  border-color: var(--primary);
  color: var(--primary);
}

/* Abas de credenciais: escolher qual gateway editar SEM ativar nenhum. */
.gateway-cred-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.9rem 1.5rem 0;
}

.gateway-cred-tab {
  padding: 0.4rem 0.85rem;
  border-radius: 0.5rem;
  border: 1px solid var(--border);
  background: var(--background);
  color: var(--secondary);
  font-size: 0.82rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.2s ease;
}

.gateway-cred-tab:hover {
  border-color: var(--primary);
  color: var(--text);
}

.gateway-cred-tab.active {
  border-color: var(--primary);
  background: rgba(79, 70, 229, 0.06);
  color: var(--primary);
}

/* ── Divisão por método (PIX / cartão) ─────────────────────────────────── */
.split-toggle {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  background: var(--surface, transparent);
  cursor: pointer;
}

.split-toggle input[type="checkbox"] {
  margin-top: 0.2rem;
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--primary);
  cursor: pointer;
}

.split-toggle strong {
  display: block;
  color: var(--secondary);
  font-size: 0.92rem;
}

.split-toggle-hint {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.8rem;
  color: var(--text-muted, #8b8b9a);
}

/* Resumo ao vivo: para onde vai cada método. */
.split-resumo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  background: var(--background);
}

.split-resumo > div {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.split-resumo span {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.split-resumo strong {
  font-size: 0.9rem;
  color: var(--secondary);
}

.split-resumo svg {
  color: var(--text-muted);
  flex-shrink: 0;
}

.split-gateway-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.split-gateway-grid .form-group {
  margin-bottom: 0;
}

/* Onde a divisão vale: só no checkout V2 (teste) ou em todos. */
.split-scope-group {
  margin-top: 1rem;
}

.split-scope-options {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.split-scope-option {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: 0.6rem;
  cursor: pointer;
}

.split-scope-option input[type="radio"] {
  margin-top: 0.25rem;
  accent-color: var(--primary);
  cursor: pointer;
  /* Outras telas do admin têm `.form-group input { width: 100% }` (Platforms.css).
     Aqui o radio está dentro de um `.form-group`, então essa regra transformava o
     radio numa barra de 100% de largura e empurrava o texto para o lado
     oposto do cartão. O radio volta ao tamanho natural. */
  width: auto;
  flex: 0 0 auto;
}

.split-scope-option strong {
  display: block;
  color: var(--secondary);
  font-size: 0.88rem;
}

/* ============================================================================
   CREDENCIAIS DA WOOVI — um AppID por ambiente
   ========================================================================== */
.woovi-creds {
  margin-top: 1.25rem;
}

.woovi-creds-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.woovi-cred-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 0.85rem;
  background: var(--background);
}

.woovi-cred-card.em-uso {
  border-color: rgba(14, 165, 233, 0.5);
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.08);
}

.woovi-cred-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
}

.woovi-cred-title strong {
  display: block;
  font-size: 0.95rem;
  color: var(--secondary);
}

.woovi-cred-title code {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.woovi-cred-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  white-space: nowrap;
  color: var(--info);
  background: rgba(14, 165, 233, 0.12);
  border: 1px solid rgba(14, 165, 233, 0.3);
}

.woovi-cred-desc {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin: 0;
}

.woovi-cred-field {
  display: flex;
  align-items: stretch;
  gap: 0.4rem;
}

.woovi-cred-field input {
  flex: 1;
  min-width: 0;
}

.woovi-cred-eye {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.35rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: var(--surface);
  color: var(--text-muted);
  cursor: pointer;
  flex-shrink: 0;
}

.woovi-cred-eye:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.woovi-cred-test {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0 0.7rem;
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}

.woovi-cred-result {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  padding: 0.55rem 0.7rem;
  border-radius: 0.5rem;
  font-size: 0.78rem;
  line-height: 1.45;
}

.woovi-cred-result svg {
  flex-shrink: 0;
  margin-top: 2px;
}

.woovi-cred-result strong {
  display: block;
  font-weight: 600;
}

.woovi-cred-result em {
  display: block;
  font-style: normal;
  opacity: 0.85;
  margin-top: 0.15rem;
}

.woovi-cred-result.ok {
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.25);
  color: var(--success);
}

.woovi-cred-result.erro {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.25);
  color: #ef4444;
}

.woovi-creds-foot {
  font-size: 0.76rem;
  color: var(--text-muted);
  margin: 1rem 0 0;
}

.woovi-creds-foot code {
  font-size: 0.74rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0.25rem;
  padding: 0.05rem 0.3rem;
}

/* ── Responsivo ────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .settings-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Menu vira uma faixa horizontal rolável no topo. */
  .settings-nav {
    position: static;
    flex-direction: row;
    overflow-x: auto;
    gap: 0.35rem;
    padding: 0.4rem;
  }

  .settings-nav-item {
    width: auto;
    white-space: nowrap;
  }

  .settings-section-hint {
    text-align: left;
  }
}

@media (max-width: 768px) {
  .settings-page {
    max-width: 100%;
  }

  .settings-hero-text h1 {
    font-size: 1.3rem;
  }

  .settings-section-header,
  .settings-section-body {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .gateway-cred-tabs {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .gateway-grid,
  .gateway-grid-2 {
    grid-template-columns: 1fr;
  }

  .settings-footer {
    flex-direction: column;
    align-items: stretch;
    gap: 0.6rem;
  }

  .settings-footer .btn {
    width: 100%;
    justify-content: center;
  }

  .settings-footer-info {
    justify-content: center;
  }
}
.wallets-page {
  animation: slideUpFade 0.4s ease-out forwards;
}

@keyframes slideUpFade {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.wallets-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}

.wallets-stats .stat-card,
.wallet-detail-stats .stat-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 1rem;
  padding: 1.25rem 1.5rem;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.05);
}

.wallets-stats .stat-card svg,
.wallet-detail-stats .stat-card svg {
  color: var(--primary);
  flex-shrink: 0;
}

.wallets-stats .stat-card div,
.wallet-detail-stats .stat-card div {
  display: flex;
  flex-direction: column;
}

.wallets-stats .stat-card span,
.wallet-detail-stats .stat-card span {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--secondary);
}

.wallets-stats .stat-card small,
.wallet-detail-stats .stat-card small {
  color: var(--text-muted);
  font-size: 0.8rem;
}

.wallet-detail-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}

.wallets-toolbar {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.section-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--secondary);
  margin-bottom: 1rem;
  margin-top: 0.5rem;
}

.section-title svg {
  color: var(--warning);
}

.back-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: none;
  border: none;
  color: var(--primary);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0.5rem 0;
  margin-bottom: 1rem;
  transition: opacity 0.2s;
}

.back-btn:hover {
  opacity: 0.8;
}

.admin-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.05);
  margin-bottom: 2rem;
}

.table-responsive {
  overflow-x: auto;
}

.wallets-table {
  width: 100%;
  border-collapse: collapse;
}

.wallets-table th {
  text-align: left;
  padding: 1rem 1.25rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  background: var(--background);
  border-bottom: 1px solid var(--border);
}

.wallets-table td {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

.wallets-table tbody tr:last-child td {
  border-bottom: none;
}

.wallets-table tbody tr:hover {
  background: var(--background);
}

.user-cell {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), #818CF8);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.9rem;
  flex-shrink: 0;
}

.user-cell strong {
  display: block;
  color: var(--secondary);
  font-size: 0.95rem;
}

.user-cell span {
  color: var(--text-muted);
  font-size: 0.85rem;
}

.type-badge {
  display: inline-flex;
  padding: 0.3rem 0.65rem;
  border-radius: 2rem;
  font-size: 0.78rem;
  font-weight: 600;
}

.type-badge.credit {
  background: rgba(16, 185, 129, 0.1);
  color: #10B981;
}

.type-badge.debit {
  background: rgba(239, 68, 68, 0.1);
  color: #EF4444;
}

.type-badge.withdrawal {
  background: rgba(245, 158, 11, 0.1);
  color: var(--warning);
}

.type-badge.refund {
  background: rgba(79, 70, 229, 0.1);
  color: var(--primary);
}

.type-badge.adjustment {
  background: rgba(107, 114, 128, 0.1);
  color: #6B7280;
}

.status-badge {
  display: inline-flex;
  padding: 0.35rem 0.75rem;
  border-radius: 2rem;
  font-size: 0.8rem;
  font-weight: 600;
}

.status-badge.pending {
  background: rgba(245, 158, 11, 0.1);
  color: var(--warning);
}

.status-badge.completed,
.status-badge.paid,
.status-badge.active {
  background: rgba(16, 185, 129, 0.1);
  color: var(--success);
}

.status-badge.rejected,
.status-badge.failed,
.status-badge.cancelled {
  background: rgba(239, 68, 68, 0.1);
  color: var(--error);
}

.status-badge.credit {
  background: rgba(16, 185, 129, 0.1);
  color: #10B981;
}

.status-badge.debit {
  background: rgba(239, 68, 68, 0.1);
  color: #EF4444;
}

.text-success {
  color: #10B981;
}

.text-danger {
  color: #EF4444;
}

.date-cell {
  color: var(--text-muted);
  font-size: 0.9rem;
}

.actions-cell {
  display: flex;
  gap: 0.5rem;
}

.action-btn {
  width: 32px;
  height: 32px;
  border-radius: 0.5rem;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.action-btn:hover {
  background: var(--background);
  color: var(--secondary);
}

.action-btn.success:hover {
  background: rgba(16, 185, 129, 0.1);
  color: #10B981;
}

.action-btn.danger:hover {
  background: rgba(239, 68, 68, 0.1);
  color: #EF4444;
}

.action-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.search-box {
  flex: 1;
  min-width: 280px;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
}

.search-box svg {
  color: var(--text-muted);
  flex-shrink: 0;
}

.search-box input {
  flex: 1;
  border: none;
  background: transparent;
  outline: none;
  font-size: 0.95rem;
  color: var(--text-main);
}

.search-box input::placeholder {
  color: var(--text-muted);
}

.error-banner {
  background: rgba(239, 68, 68, 0.1);
  color: #EF4444;
  padding: 1rem;
  border-radius: 0.75rem;
  margin-bottom: 1.5rem;
}

.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem;
  color: var(--text-muted);
  gap: 1rem;
}

.spin {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.empty-table {
  padding: 3rem;
  text-align: center;
  color: var(--text-muted);
}

@media (max-width: 768px) {
  .wallets-stats {
    grid-template-columns: 1fr;
  }

  .wallets-table th:nth-child(4),
  .wallets-table td:nth-child(4) {
    display: none;
  }

  .wallets-table th,
  .wallets-table td {
    padding: 0.75rem;
  }
}

.tx-detail-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.tx-detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.875rem 1rem;
  border-bottom: 1px solid var(--border);
}

.tx-detail-row:last-child {
  border-bottom: none;
}

.tx-detail-label {
  font-size: 0.85rem;
  color: var(--text-muted);
  font-weight: 500;
  flex-shrink: 0;
}

.tx-detail-value {
  font-size: 0.85rem;
  color: var(--text);
  font-weight: 600;
  text-align: right;
  word-break: break-all;
  max-width: 70%;
}

.view-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 0.5rem;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
}

.view-btn:hover {
  color: var(--primary);
  border-color: var(--primary);
  background: var(--primary-light);
}

/* Tabs */
.wallets-tabs {
  display: flex;
  gap: 0.25rem;
  margin-bottom: 1.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  padding: 0.35rem;
  overflow-x: auto;
}

.wallets-tab {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 1rem;
  border: none;
  border-radius: 0.5rem;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}

.wallets-tab:hover {
  background: var(--background);
  color: var(--text);
}

.wallets-tab.active {
  background: var(--primary);
  color: white;
}

.wallets-tab.active .wallets-tab-count {
  background: rgba(255,255,255,0.25);
  color: white;
}

.wallets-tab-count {
  font-size: 0.7rem;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  background: var(--background);
  color: var(--text-muted);
  font-weight: 700;
}

/* Finance Tab */
.finance-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 2rem;
}

.finance-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  padding: 1.25rem;
}

.finance-card svg {
  flex-shrink: 0;
}

.finance-card div {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.finance-card span {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-weight: 500;
}

.finance-card strong {
  font-size: 1.15rem;
  font-weight: 700;
}

.finance-card-green svg { color: #10B981; }
.finance-card-green strong { color: #10B981; }

.finance-card-red svg { color: #EF4444; }
.finance-card-red strong { color: #EF4444; }

.finance-card-blue svg { color: #0EA5E9; }
.finance-card-blue strong { color: #0EA5E9; }

.finance-card-yellow svg { color: #F59E0B; }
.finance-card-yellow strong { color: #F59E0B; }

.finance-card-purple svg { color: var(--primary); }
.finance-card-purple strong { color: var(--primary); }

.finance-card-teal svg { color: #14B8A6; }
.finance-card-teal strong { color: #14B8A6; }

.finance-card small {
  display: block;
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 2px;
}

.finance-card-active {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
  box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.15);
}

.finance-card {
  transition: all 0.15s;
}

.finance-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Modal */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.modal-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 1rem;
  width: 100%;
  max-width: 440px;
  margin: 1rem;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--border);
}

.modal-header h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--secondary);
}

.modal-header button {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0.25rem;
}

.modal-body {
  padding: 1.25rem 1.5rem;
}

.modal-body p {
  font-size: 0.9rem;
  color: var(--text);
  margin: 0;
}

.modal-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--border);
}

.modal-actions .btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: all 0.15s;
}

.modal-actions .btn-outline {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
}

.modal-actions .btn-outline:hover {
  background: var(--background);
  color: var(--text);
}

.modal-actions .btn-danger {
  background: #EF4444;
  color: white;
}

.modal-actions .btn-danger:hover {
  background: #DC2626;
}

.modal-actions .btn-danger:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

@media (max-width: 768px) {
  .wallets-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .finance-grid {
    grid-template-columns: 1fr;
  }

  .wallets-tabs {
    gap: 0;
  }

  .wallets-tab {
    padding: 0.5rem 0.75rem;
    font-size: 0.8rem;
  }
}
/* ==========================================================================
   Cobranças Recorrentes — /admin/billing
   --------------------------------------------------------------------------
   Linguagem visual: minimalista, hairline (bordas de 1px), um único acento
   (índigo) e números tabulares. Tudo que antes era texto " grudado " mora
   em tabelas com respiro real: padding de célula, cabeçalho em banda,
   linhas com hover e scroll horizontal com no mínimo de largura.

   NOTA DE ESPECIFICIDADE: App.css é importado DEPOIS deste arquivo
   (App.jsx importa as páginas antes do CSS global), então qualquer regra
   aqui que possa empatar com App.css precisa de um seletor mais
   específico — por isso o prefixo `.billing-dashboard` é usado nas bases.
   ========================================================================== */

/* ------------------------------------------------------------- animações */

@keyframes billingRise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes billingFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes billingPop {
  from { opacity: 0; transform: translateY(10px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes billingSlideIn {
  from { opacity: 0; transform: translateX(26px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes billingShimmer {
  from { background-position: -220% 0; }
  to   { background-position: 220% 0; }
}

/* ------------------------------------------------------------------ base */

.billing-dashboard {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  /* IMPORTANTE: esta animação é SÓ de opacidade. Um `transform` retido aqui
     (ex.: translateY(0) com fill-mode "both") criaria um containing block e
     quebraria o `position: fixed` do modal e do toast — eles passariam a se
     posicionar dentro da página em vez da viewport. */
  animation: billingFade 0.45s ease both;
}

/* ------------------------------------------------------------------ hero */

.billing-dashboard .billing-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.7rem;
  margin-bottom: 0;
  padding: 0 0 1.15rem;
  border-bottom: 1px solid var(--border);
}

/* Fio de acento embaixo do título — dá identidade sem pesar. */
.billing-dashboard .billing-hero::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 92px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--primary), var(--action));
}

.billing-hero-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.billing-hero-copy {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
  max-width: 60ch;
}

.billing-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  align-self: flex-start;
  padding: 0.26rem 0.62rem;
  border-radius: 999px;
  background: var(--primary-soft);
  border: 1px solid color-mix(in srgb, var(--primary) 24%, transparent);
  color: var(--primary);
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.5;
}
.billing-dashboard .billing-hero h1 {
  margin: 0;
  font-size: clamp(1.55rem, 2.2vw, 2.05rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--text-main);
}

.billing-dashboard .billing-hero p {
  margin: 0;
  max-width: 60ch;
  color: var(--text-muted);
  font-size: 0.92rem;
  line-height: 1.6;
}

.billing-hero-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.billing-icon-btn {
  padding: 0.45rem 0.55rem;
  min-width: 34px;
}

/* -------------------------------------------------------------- KPI strip */

.billing-kpi-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.875rem;
  animation: billingRise 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.05s both;
}

.billing-kpi {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  width: 100%;
  padding: 1.05rem 1.15rem 1.1rem;
  text-align: left;
  font: inherit;
  color: inherit;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
  cursor: pointer;
  transition:
    transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.22s ease,
    border-color 0.22s ease;
}

/* Barra de acento que aparece no hover. */
.billing-kpi::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--kpi-accent, var(--primary));
  opacity: 0;
  transition: opacity 0.22s ease;
}

.billing-kpi:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--kpi-accent, var(--primary)) 42%, var(--border));
  box-shadow: var(--shadow-md);
}

.billing-kpi:hover::before { opacity: 1; }

.billing-kpi:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.billing-kpi--revenue { --kpi-accent: var(--primary); }
.billing-kpi--subscriptions { --kpi-accent: var(--success); }
.billing-kpi--profit { --kpi-accent: var(--info); }
.billing-kpi--costs { --kpi-accent: var(--error); }
.billing-kpi--tickets { --kpi-accent: var(--warning); }

.billing-kpi-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.billing-kpi-label {
  font-size: 0.69rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-muted);
  line-height: 1.4;
}

.billing-kpi-icon {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  color: var(--kpi-accent, var(--primary));
  background: color-mix(in srgb, var(--kpi-accent, var(--primary)) 13%, transparent);
  transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.billing-kpi:hover .billing-kpi-icon {
  transform: scale(1.08) rotate(-5deg);
}

.billing-kpi-value {
  font-family: var(--font-title);
  font-size: 1.7rem;
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.05;
  color: var(--text-main);
  font-variant-numeric: tabular-nums;
}

.billing-kpi-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.5rem;
}

.billing-kpi-sub {
  font-size: 0.76rem;
  line-height: 1.45;
  color: var(--text-soft);
}

.billing-kpi-arrow {
  flex-shrink: 0;
  color: var(--kpi-accent, var(--primary));
  opacity: 0;
  transform: translate(-4px, 4px);
  transition: opacity 0.22s ease, transform 0.22s ease;
}

.billing-kpi:hover .billing-kpi-arrow {
  opacity: 1;
  transform: translate(0, 0);
}

/* -------------------------------------------------------------- seções */

.billing-dashboard .billing-section {
  position: relative;
  padding: 1.3rem 1.5rem 1.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  animation: billingRise 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.billing-dashboard .billing-section--agenda { animation-delay: 0.08s; }
.billing-dashboard .billing-section--nocard { animation-delay: 0.13s; }
.billing-dashboard .billing-section--today { animation-delay: 0.18s; }
.billing-dashboard .billing-section--failures { animation-delay: 0.23s; }

.billing-dashboard .billing-section--warning {
  border-color: color-mix(in srgb, var(--error) 30%, var(--border));
  background:
    radial-gradient(circle at 100% 0%, rgba(239, 68, 68, 0.08), transparent 20rem),
    var(--surface);
}

.billing-section--warning .billing-section-eyebrow {
  color: var(--error);
}

.billing-dashboard .billing-section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.1rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--border);
}

.billing-section-head {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  min-width: 0;
}

.billing-section-eyebrow {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-soft);
  line-height: 1.5;
}

.billing-dashboard .billing-section h2 {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  font-size: 1.08rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-main);
  line-height: 1.3;
}

.billing-section-sub {
  max-width: 70ch;
  margin: 0;
  color: var(--text-muted);
  font-size: 0.83rem;
  line-height: 1.5;
}

.billing-section-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.billing-section-total {
  font-family: var(--font-title);
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--success);
  font-variant-numeric: tabular-nums;
}

.billing-pagination {
  padding: 0 0.3rem;
  font-size: 0.78rem;
  color: var(--text-muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------- tabelas */

.billing-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

/* min-width garante que as 8 colunas não se esmaguem: texto colado é
   justamente o que acontece quando a coluna perde o espaço dela. */
.billing-table {
  width: 100%;
  min-width: 960px;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.86rem;
}

.billing-table thead th {
  padding: 0.7rem 0.68rem;
  background: var(--surface-soft);
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-align: left;
  white-space: nowrap;
}

.billing-table tbody td {
  padding: 0.72rem 0.68rem;
  border-bottom: 1px solid var(--border);
  color: var(--text-main);
  vertical-align: middle;
  transition: background 0.16s ease;
}

.billing-table tbody tr:last-child td {
  border-bottom: none;
}

.billing-table tbody tr:hover td {
  background: var(--primary-soft);
}

/* Colunas numéricas: alinhadas à direita e com dígitos tabulares. */
.billing-th-num { text-align: right; }

.billing-num {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-weight: 650;
}

.billing-nowrap { white-space: nowrap; }

/* --------------------------------------------------------- células */

.billing-cell-user {
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  min-width: 0;
  max-width: 175px;
}

.billing-cell-user strong {
  font-size: 0.875rem;
  font-weight: 650;
  line-height: 1.35;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* O e-mail NUNCA pode quebrar no meio: sem nowrap o `overflow-wrap: anywhere`
   cortava "joao.silva@email.com" em três linhas — é o "texto grudado" que
   estragava a leitura da tabela. */
.billing-cell-user span {
  font-size: 0.76rem;
  line-height: 1.4;
  color: var(--text-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.billing-cell-stack {
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  min-width: 0;
  max-width: 150px;
}

.billing-cell-stack > span {
  font-size: 0.85rem;
  line-height: 1.35;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.billing-cell-muted {
  font-size: 0.76rem;
  line-height: 1.4;
  color: var(--text-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.billing-card-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  padding: 0.2rem 0.48rem;
  border-radius: 999px;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 0.73rem;
  font-weight: 600;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.billing-no-card {
  display: inline-flex;
  align-items: center;
  padding: 0.22rem 0.55rem;
  border-radius: 999px;
  background: rgba(239, 68, 68, 0.12);
  color: #EF4444;
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}

/* -------------------------------------------------------- status badges */

.billing-dashboard .status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.22rem 0.6rem;
  border-radius: 999px;
  font-size: 0.73rem;
  font-weight: 650;
  line-height: 1.5;
  white-space: nowrap;
}

.billing-dashboard .status-badge.approved { background: rgba(16, 185, 129, 0.12); color: #10B981; }
.billing-dashboard .status-badge.failed { background: rgba(239, 68, 68, 0.12); color: #EF4444; }
.billing-dashboard .status-badge.processing { background: rgba(245, 158, 11, 0.14); color: #F59E0B; }
.billing-dashboard .status-badge.pending { background: rgba(107, 114, 128, 0.14); color: #94A3B8; }
.billing-dashboard .status-badge.active { background: rgba(16, 185, 129, 0.12); color: #10B981; }
.billing-dashboard .status-badge.overdue { background: rgba(239, 68, 68, 0.12); color: #EF4444; }
.billing-dashboard .status-badge.retrying { background: rgba(245, 158, 11, 0.14); color: #F59E0B; }

/* ------------------------------------------------------------- botões */

.billing-charge-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.36rem 0.62rem;
  border-radius: 999px;
  background: var(--primary-soft);
  border: 1px solid color-mix(in srgb, var(--primary) 38%, transparent);
  color: var(--primary);
  font-size: 0.73rem;
  font-weight: 650;
  white-space: nowrap;
  transition:
    transform 0.18s ease,
    background 0.18s ease,
    color 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease;
}

.billing-charge-btn:hover:not(:disabled) {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(79, 70, 229, 0.28);
}

.billing-charge-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.billing-origin-badge {
  display: inline-block;
  align-self: flex-start;
  max-width: 100%;
  padding: 0.16rem 0.55rem;
  border-radius: 999px;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.billing-attempt {
  font-size: 0.78rem;
  font-weight: 650;
  color: var(--warning);
  white-space: nowrap;
}

.billing-attempt-high { color: #EF4444; }

.billing-row-no-card td {
  background: rgba(239, 68, 68, 0.045);
}

.billing-table tbody tr:hover .billing-row-no-card td,
.billing-table tbody tr:hover td.billing-row-no-card {
  background: rgba(239, 68, 68, 0.08);
}

/* -------------------------------------------------------------- agenda */

.billing-agenda {
  display: flex;
  flex-direction: column;
  gap: 1.35rem;
}

.billing-agenda-group {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.billing-agenda-group.overdue { --agenda-accent: #EF4444; }
.billing-agenda-group.today { --agenda-accent: var(--primary); }
.billing-agenda-group.week { --agenda-accent: #F59E0B; }
.billing-agenda-group.later { --agenda-accent: var(--text-soft); }

.billing-agenda-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.billing-agenda-dot {
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--agenda-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--agenda-accent) 18%, transparent);
}

.billing-dashboard .billing-agenda-title {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-main);
}

.billing-agenda-count {
  min-width: 1.55rem;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--agenda-accent) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--agenda-accent) 26%, transparent);
  color: var(--agenda-accent);
  font-size: 0.72rem;
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.billing-agenda-sum {
  margin-left: auto;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------- estado vazio */

.billing-dashboard .empty-state {
  padding: 1.8rem 1.1rem;
  background: transparent;
  border: 1px dashed var(--border);
  box-shadow: none;
  border-radius: var(--radius-md);
  color: var(--text-soft);
  font-size: 0.86rem;
  line-height: 1.5;
  text-align: center;
}

.billing-modal .empty-state {
  border-radius: var(--radius-sm);
}

/* ------------------------------------------------------------ skeleton */

.billing-skeleton {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.billing-skeleton-row {
  height: 42px;
  border-radius: var(--radius-sm);
  background: linear-gradient(
    90deg,
    var(--surface-soft) 25%,
    color-mix(in srgb, var(--surface-soft) 45%, var(--surface)) 50%,
    var(--surface-soft) 75%
  );
  background-size: 220% 100%;
  animation: billingShimmer 1.4s linear infinite;
}

/* --------------------------------------------- cobrança avulsa (painel) */

.billing-panel {
  padding: 1.3rem 1.5rem 1.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  animation: billingPop 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.billing-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.1rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--border);
}

.billing-panel-header h3 {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-main);
}

.billing-panel-form {
  display: grid;
  gap: 1rem;
  max-width: 520px;
}

.billing-panel-form label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.billing-panel-form input {
  width: 100%;
  padding: 0.6rem 0.7rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-soft);
  color: var(--text-main);
  font-size: 0.9rem;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.billing-panel-form input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 4px var(--ring);
}

.billing-method-options {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.billing-panel-error {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 0.85rem;
  border-radius: var(--radius-sm);
  background: rgba(239, 68, 68, 0.1);
  color: #EF4444;
  font-size: 0.86rem;
  line-height: 1.45;
}

.billing-panel-success {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--success);
  font-weight: 650;
  font-size: 0.9rem;
}

.billing-panel-info {
  padding: 0.85rem 1rem;
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
  border: 1px solid var(--border);
  font-size: 0.88rem;
  line-height: 1.7;
  color: var(--text-main);
}

.billing-panel-pix {
  margin-bottom: 0.5rem;
  padding: 0.75rem;
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
  border: 1px dashed var(--border);
  word-break: break-all;
  font-family: monospace;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--text-main);
}

.billing-panel-qr { text-align: center; }

.billing-panel-qr img {
  max-width: 200px;
  padding: 8px;
  border-radius: var(--radius-sm);
  background: #FFFFFF;
}

.billing-panel-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.billing-panel-link input {
  flex: 1;
  font-size: 0.82rem;
}

/* --------------------------------------------------- erro / resultado */

.billing-error-banner {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.8rem 1rem;
  border-radius: var(--radius-md);
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #EF4444;
  font-size: 0.85rem;
  line-height: 1.45;
}

.billing-force-result {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.8rem 1rem;
  border-radius: var(--radius-md);
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1.45;
  animation: billingPop 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.billing-force-result.success {
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.3);
  color: #10B981;
}

.billing-force-result.error {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #EF4444;
}

.billing-force-result.warning {
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.3);
  color: #F59E0B;
}

.billing-force-result-body {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  flex: 1;
}

.billing-force-errors {
  margin: 0;
  padding-left: 1.1rem;
  font-size: 0.78rem;
  font-weight: 400;
}

.billing-force-dismiss {
  padding: 0 0.25rem;
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  font-size: 1.15rem;
  line-height: 1;
  opacity: 0.7;
  transition: opacity 0.18s ease;
}

.billing-force-dismiss:hover { opacity: 1; }

/* ---------------------------------------------------------- error cell */

/* Motivo do gateway: até 2 linhas com ellipsis + title para o texto cheio.
   O wrapper é um BLOCO (não flex): dentro de um flex container o
   `display: -webkit-box` seria blockified para `flow-root`, o line-clamp
   deixaria de funcionar e a coluna colapsaria na largura da palavra mais
   longa. O min-width impede que a coluna "Motivo" encolha. */
.billing-reason {
  display: block;
  min-width: 230px;
  max-width: 330px;
}

.billing-reason .billing-cell-muted {
  display: block;
  margin-top: 0.25rem;
  white-space: normal;
  line-height: 1.45;
}

/* ATENÇÃO — COLISÃO DE CLASSE: `src/pages/user/Billing.css` também define
   `.error-cell` (com `padding: 2rem` e `text-align: center`). Como todo o CSS
   é bundlado em um arquivo único, a regra do app do usuário vazava para o
   admin e inflava a célula "Motivo" em ~64px. O prefixo `.billing-dashboard`
   aumenta a especificidade e vence a regra do outro arquivo. */
.billing-dashboard .error-cell {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 320px;
  margin: 0;
  padding: 0;
  text-align: left;
  color: var(--text-muted);
  font-size: 0.81rem;
  line-height: 1.45;
  white-space: normal;
}

/* ------------------------------------------------------------- toast */

.billing-toast {
  position: fixed;
  top: 1.25rem;
  right: 1.25rem;
  z-index: 1200;
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  max-width: 420px;
  padding: 0.85rem 1rem;
  border-radius: var(--radius-md);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--text);
  animation: billingSlideIn 0.32s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.billing-toast.success { border-left: 3px solid var(--success); }
.billing-toast.success svg { color: var(--success); }
.billing-toast.error { border-left: 3px solid var(--error); }
.billing-toast.error svg { color: #EF4444; }
.billing-toast.warning { border-left: 3px solid var(--warning); }
.billing-toast.warning svg { color: #F59E0B; }
.billing-toast.info { border-left: 3px solid var(--primary); }
.billing-toast.info svg { color: var(--primary); }

.billing-toast span { flex: 1; }

.billing-toast button {
  display: flex;
  align-items: center;
  padding: 0;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.18s ease;
}

.billing-toast button:hover { color: var(--text-main); }

/* -------------------------------------------------------- drill-down */

.billing-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background:
    radial-gradient(circle at 50% 0%, rgba(79, 70, 229, 0.18), transparent 26rem),
    rgba(2, 6, 23, 0.62);
  backdrop-filter: blur(10px) saturate(1.1);
  animation: billingFade 0.22s ease both;
}

.billing-modal {
  display: flex;
  flex-direction: column;
  width: 720px;
  max-width: 100%;
  max-height: 82vh;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  animation: billingPop 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.billing-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.05rem 1.35rem;
  background: var(--surface-soft);
  border-bottom: 1px solid var(--border);
}

.billing-modal-header h3 {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-main);
}

.billing-modal-desc {
  margin: 0;
  padding: 0.95rem 1.35rem 0;
  color: var(--text-muted);
  font-size: 0.84rem;
  line-height: 1.5;
}

.billing-modal-body {
  padding: 0.95rem 1.35rem 1.35rem;
  overflow-y: auto;
}

.billing-modal-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.95rem 1.35rem 1.35rem;
  overflow-y: auto;
}

.billing-modal-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
  transition: border-color 0.18s ease, transform 0.18s ease;
}

.billing-modal-row:hover {
  border-color: var(--primary);
  transform: translateX(2px);
}

.billing-modal-row-info {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.billing-modal-row-info strong {
  font-size: 0.86rem;
  font-weight: 650;
  line-height: 1.35;
  color: var(--text-main);
}

.billing-modal-row-info span {
  font-size: 0.76rem;
  line-height: 1.4;
  color: var(--text-soft);
}

.billing-modal-value {
  font-weight: 700;
  white-space: nowrap;
  color: var(--text-main);
  font-variant-numeric: tabular-nums;
}

.billing-modal-value.success { color: var(--success); }
.billing-modal-value.failed { color: #EF4444; }

/* ---------------------------------------------------------- spinner */

.spinning {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ------------------------------------------------------------- responsivo */

@media (max-width: 1200px) {
  .billing-kpi-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .billing-kpi-strip {
    grid-template-columns: 1fr;
  }

  .billing-hero-row {
    flex-direction: column;
    align-items: stretch;
  }

  .billing-dashboard .billing-section {
    padding: 1.1rem 1rem 1.25rem;
  }

  .billing-agenda-sum {
    margin-left: 0;
    width: 100%;
  }
}

@media (max-width: 600px) {
  .billing-toast {
    left: 1rem;
    right: 1rem;
    max-width: none;
  }

  /* Sem flex-wrap o botão de atualizar ficava órfão numa linha sozinha. */
  .billing-hero-actions {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
  }

  .billing-hero-actions > .btn:first-child {
    grid-column: 1 / -1;
  }

  .billing-icon-btn {
    justify-self: end;
  }

  .billing-kpi-value {
    font-size: 1.5rem;
  }

  .billing-panel {
    padding: 1.1rem 1rem 1.25rem;
  }
}
.billing-calendar-page {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.billing-calendar-page .admin-header {
  margin-bottom: 0;
}

.billing-calendar-page .admin-header h1 {
  font-size: 1.75rem;
  color: var(--secondary);
}

.billing-calendar-page .admin-header p {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin-top: 0.25rem;
}

.calendar-container {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 1.5rem;
}

.calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}

.calendar-header h2 {
  font-size: 1.25rem;
  color: var(--secondary);
  text-transform: capitalize;
}

.cal-nav-btn {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.5rem;
  cursor: pointer;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.cal-nav-btn:hover {
  background: var(--surface-hover);
}

.calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.25rem;
  margin-bottom: 0.5rem;
}

.cal-weekday {
  text-align: center;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  padding: 0.5rem 0;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.25rem;
}

.cal-cell {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.5rem;
  min-height: 90px;
  cursor: default;
  transition: all 0.15s;
}

.cal-cell.empty {
  background: transparent;
  border-color: transparent;
}

.cal-cell.has-data {
  cursor: pointer;
}

.cal-cell.has-data:hover {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary);
}

.cal-cell.today {
  border-color: var(--primary);
  background: rgba(79, 70, 229, 0.03);
}

.cal-cell.selected {
  border-color: var(--primary);
  background: rgba(79, 70, 229, 0.08);
  box-shadow: 0 0 0 2px var(--primary);
}

.cal-day {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text);
}

.cal-summary {
  margin-top: 0.35rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.cal-amount {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--success);
}

.cal-count {
  font-size: 0.65rem;
  color: var(--text-muted);
}

.cal-indicators {
  display: flex;
  gap: 0.2rem;
  margin-top: 0.15rem;
}

.cal-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.cal-dot.green { background: #10B981; }
.cal-dot.red { background: #EF4444; }
.cal-dot.yellow { background: #F59E0B; }

.cal-loading {
  text-align: center;
  padding: 3rem;
  color: var(--text-muted);
}

.day-panel-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  justify-content: flex-end;
  z-index: 1000;
}

.day-panel {
  width: 420px;
  max-width: 90vw;
  height: 100%;
  background: var(--surface);
  overflow-y: auto;
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
}

.day-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem;
  border-bottom: 1px solid var(--border);
}

.day-panel-header h3 {
  font-size: 1.1rem;
  color: var(--secondary);
  text-transform: capitalize;
}

.day-panel-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  padding: 0.25rem;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
}

.day-panel-close:hover {
  background: var(--surface-hover);
  color: var(--text);
}

.day-panel-summary {
  display: flex;
  gap: 1rem;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--border);
}

.summary-item {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  font-weight: 600;
}

.summary-item.approved { color: #10B981; }
.summary-item.failed { color: #EF4444; }
.summary-item.pending { color: #F59E0B; }

.day-panel-list {
  flex: 1;
  overflow-y: auto;
  padding: 1rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.day-charge-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  gap: 1rem;
}

.day-charge-info {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.day-charge-info strong {
  font-size: 0.9rem;
  color: var(--text);
}

.day-charge-service {
  font-size: 0.8rem;
  color: var(--primary);
  font-weight: 500;
}

.day-charge-group {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.day-charge-details {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.25rem;
}

.day-charge-amount {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text);
}

.day-charge-error {
  font-size: 0.7rem;
  color: var(--error);
  max-width: 150px;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.day-charge-user-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.day-charge-email {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.day-charge-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.15rem;
}

.day-charge-card {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.72rem;
  color: var(--text-muted);
}

.day-charge-cycle {
  font-size: 0.7rem;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  background: rgba(79, 70, 229, 0.1);
  color: var(--primary);
  font-weight: 500;
}

.day-charge-attempt {
  font-size: 0.7rem;
  color: #f59e0b;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 2rem;
  color: var(--text-muted);
  text-align: center;
}

.empty-state svg {
  color: var(--text-muted);
  opacity: 0.5;
}

@media (max-width: 900px) {
  .calendar-grid {
    gap: 0.15rem;
  }

  .cal-cell {
    min-height: 70px;
    padding: 0.35rem;
  }

  .cal-amount {
    font-size: 0.65rem;
  }

  .cal-count {
    font-size: 0.6rem;
  }
}

/* ---------------------------------------------
   Dias passados (a grade só mostra o futuro)
   --------------------------------------------- */
.cal-cell.past {
  opacity: 0.45;
}

.cal-dot.blue { background: #4F46E5; }

.calendar-legend {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 0.78rem;
}

.calendar-legend svg {
  flex-shrink: 0;
  margin-top: 0.1rem;
}

/* ---------------------------------------------
   Sheet do dia: resumo e ações
   --------------------------------------------- */
.summary-item.scheduled { color: #4F46E5; }

.summary-item.amount {
  margin-left: auto;
  color: var(--text);
  font-weight: 700;
}

.day-panel-error {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1.5rem;
  color: var(--error);
  font-size: 0.85rem;
}

.day-panel-bulk {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 0.85rem 1.5rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface-soft);
}

.cal-bulk-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--primary);
  border-radius: var(--radius-sm);
  background: var(--primary);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.cal-bulk-btn:hover:not(:disabled) {
  opacity: 0.9;
}

.cal-bulk-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.cal-bulk-hint {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.day-charge-no-card {
  color: var(--error);
  font-weight: 600;
}

.cal-badge {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
}

.cal-badge.scheduled { background: rgba(79, 70, 229, 0.12); color: #4F46E5; }
.cal-badge.approved { background: rgba(16, 185, 129, 0.12); color: #10B981; }
.cal-badge.failed { background: rgba(239, 68, 68, 0.12); color: #EF4444; }
.cal-badge.processing { background: rgba(245, 158, 11, 0.12); color: #F59E0B; }
.cal-badge.pending { background: rgba(107, 114, 128, 0.12); color: #6B7280; }
.cal-badge.cancelled { background: rgba(107, 114, 128, 0.12); color: #6B7280; }

.day-charge-actions {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: 0.35rem;
  align-items: stretch;
}

.cal-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  padding: 0.35rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text);
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.cal-action-btn:hover:not(:disabled) {
  border-color: var(--primary);
  color: var(--primary);
}

.cal-action-btn.primary {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.cal-action-btn.primary:hover:not(:disabled) {
  opacity: 0.9;
  color: #fff;
}

.cal-action-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.cal-reschedule {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.4rem;
  flex-wrap: wrap;
}

.cal-reschedule input {
  padding: 0.35rem 0.45rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-soft);
  color: var(--text);
  font-size: 0.78rem;
}

/* ---------------------------------------------
   Toast
   --------------------------------------------- */
.cal-toast {
  position: fixed;
  top: 1.5rem;
  right: 1.5rem;
  z-index: 1300;
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  max-width: 420px;
  padding: 0.85rem 1rem;
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  font-size: 0.85rem;
  color: var(--text);
}

.cal-toast.success { border-left: 3px solid var(--success); }
.cal-toast.success svg { color: var(--success); }
.cal-toast.error { border-left: 3px solid var(--error); }
.cal-toast.error svg { color: var(--error); }
.cal-toast.warning { border-left: 3px solid var(--warning); }
.cal-toast.warning svg { color: var(--warning); }
.cal-toast.info { border-left: 3px solid var(--primary); }
.cal-toast.info svg { color: var(--primary); }

.cal-toast span { flex: 1; }

.cal-toast button {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 0;
}

.cal-toast button:hover { color: var(--text); }

@media (max-width: 600px) {
  .cal-toast {
    left: 1rem;
    right: 1rem;
    max-width: none;
  }
}

.billing-failures-page {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.billing-failures-page .admin-header {
  margin-bottom: 0;
}

.billing-failures-page .admin-header h1 {
  font-size: 1.75rem;
  color: var(--secondary);
}

.billing-failures-page .admin-header p {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin-top: 0.25rem;
}

.failures-filters {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 1.25rem;
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 140px;
}

.filter-group label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.filter-group select {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text);
  font-size: 0.85rem;
}

.search-group {
  flex: 1;
  min-width: 200px;
}

.search-input-wrap {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.75rem;
  background: var(--bg);
}

.search-input-wrap svg {
  color: var(--text-muted);
  flex-shrink: 0;
}

.search-input-wrap input {
  border: none;
  background: none;
  outline: none;
  color: var(--text);
  font-size: 0.85rem;
  width: 100%;
}

.failures-table-wrap {
  overflow-x: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.failures-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.failures-table th {
  text-align: left;
  padding: 0.75rem 1rem;
  border-bottom: 2px solid var(--border);
  color: var(--text-muted);
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.failures-table td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  vertical-align: middle;
}

.failures-table tr:hover td {
  background: var(--surface-hover);
}

.failure-user {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.failure-user strong {
  font-size: 0.85rem;
}

.failure-user span {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.failure-amount {
  font-weight: 700;
}

.attempt-badge {
  display: inline-block;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
}

.attempt-1 {
  background: rgba(245, 158, 11, 0.1);
  color: #F59E0B;
}

.attempt-2 {
  background: rgba(239, 68, 68, 0.1);
  color: #EF4444;
}

.attempt-3 {
  background: rgba(239, 68, 68, 0.2);
  color: #DC2626;
}

.failure-error {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--error);
  font-size: 0.8rem;
}

.retry-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--primary);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--primary);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.retry-btn:hover:not(:disabled) {
  background: var(--primary);
  color: white;
}

.retry-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.retry-btn .spinning {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.failures-loading {
  text-align: center;
  padding: 3rem;
  color: var(--text-muted);
}

.failures-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 3rem;
  color: var(--text-muted);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.failures-empty svg {
  color: var(--warning);
}

@media (max-width: 900px) {
  .failures-filters {
    flex-direction: column;
  }

  .filter-group {
    min-width: auto;
  }
}

/* ---------------------------------------------
   Erro de carga, origem e ações
   --------------------------------------------- */
.failures-error-banner {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.85rem 1rem;
  border-radius: var(--radius-sm);
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: var(--error);
  font-size: 0.85rem;
}

.failures-error-banner ul {
  margin: 0.35rem 0 0;
  padding-left: 1.1rem;
}

.failures-empty code {
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.05rem 0.3rem;
  font-size: 0.8rem;
}

.failure-origin {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.attempt-badge.attempt-0 {
  background: rgba(107, 114, 128, 0.12);
  color: #6B7280;
}

.failure-actions {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  align-items: flex-start;
}

.retry-btn.secondary {
  border-color: var(--border);
  color: var(--text);
}

.retry-btn.secondary:hover:not(:disabled) {
  background: var(--surface-hover);
  border-color: var(--border-strong);
  color: var(--text);
}

/* ---------------------------------------------
   Toast
   --------------------------------------------- */
.failures-toast {
  position: fixed;
  top: 1.5rem;
  right: 1.5rem;
  z-index: 1300;
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  max-width: 420px;
  padding: 0.85rem 1rem;
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  font-size: 0.85rem;
  color: var(--text);
}

.failures-toast.success { border-left: 3px solid var(--success); }
.failures-toast.success svg { color: var(--success); }
.failures-toast.error { border-left: 3px solid var(--error); }
.failures-toast.error svg { color: var(--error); }
.failures-toast.warning { border-left: 3px solid var(--warning); }
.failures-toast.warning svg { color: var(--warning); }
.failures-toast.info { border-left: 3px solid var(--primary); }
.failures-toast.info svg { color: var(--primary); }

.failures-toast span { flex: 1; }

.failures-toast button {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 0;
}

.failures-toast button:hover { color: var(--text); }

@media (max-width: 600px) {
  .failures-toast {
    left: 1rem;
    right: 1rem;
    max-width: none;
  }
}

.cron-management-page {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.cron-management-page .admin-header {
  margin-bottom: 0;
}

.cron-management-page .admin-header h1 {
  font-size: 1.75rem;
  color: var(--secondary);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.cron-management-page .admin-header p {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin-top: 0.25rem;
}

.cron-actions-bar {
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
}

.cron-refresh-btn,
.cron-schedule-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 1rem;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.cron-refresh-btn {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
}

.cron-refresh-btn:hover:not(:disabled) {
  background: var(--surface-hover);
}

.cron-schedule-btn {
  background: var(--primary);
  border: 1px solid var(--primary);
  color: white;
}

.cron-schedule-btn:hover {
  background: #4338CA;
}

.cron-loading {
  text-align: center;
  padding: 3rem;
  color: var(--text-muted);
}

.cron-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.cron-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: all 0.2s;
}

.cron-card.active {
  border-left: 4px solid #10B981;
}

.cron-card.inactive {
  border-left: 4px solid #6B7280;
  opacity: 0.8;
}

.cron-card:hover {
  box-shadow: var(--shadow-sm);
}

.cron-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 1.25rem 1.5rem 0.75rem;
}

.cron-info {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.cron-name {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
}

.cron-name strong {
  color: var(--secondary);
}

.cron-status-badge {
  font-size: 0.7rem;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-weight: 700;
}

.cron-status-badge.active {
  background: rgba(16, 185, 129, 0.1);
  color: #10B981;
}

.cron-status-badge.inactive {
  background: rgba(107, 114, 128, 0.1);
  color: #6B7280;
}

.cron-description {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.cron-type-badge {
  font-size: 0.7rem;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: rgba(79, 70, 229, 0.1);
  color: var(--primary);
  font-weight: 600;
  text-transform: uppercase;
}

.cron-card-body {
  padding: 0 1.5rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.cron-detail {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.cron-detail svg {
  color: var(--primary);
  flex-shrink: 0;
}

.cron-card-actions {
  display: flex;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border-top: 1px solid var(--border);
}

.cron-toggle-btn,
.cron-run-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.85rem;
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.cron-toggle-btn {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
}

.cron-toggle-btn.activate {
  border-color: #10B981;
  color: #10B981;
}

.cron-toggle-btn.deactivate {
  border-color: #F59E0B;
  color: #F59E0B;
}

.cron-toggle-btn:hover {
  background: var(--surface-hover);
}

.cron-run-btn {
  border: 1px solid var(--primary);
  background: transparent;
  color: var(--primary);
}

.cron-run-btn:hover:not(:disabled) {
  background: var(--primary);
  color: white;
}

.cron-run-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.text-success { color: #10B981; }
.text-muted { color: var(--text-muted); }

.spinning {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Scheduler Overlay */
.scheduler-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  padding: 2rem;
}

.scheduler-panel {
  background: var(--surface);
  border-radius: var(--radius-sm);
  width: 500px;
  max-width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.scheduler-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem;
  border-bottom: 1px solid var(--border);
}

.scheduler-header h3 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.1rem;
  color: var(--secondary);
  margin: 0;
}

.close-btn {
  background: none;
  border: none;
  font-size: 1.5rem;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0.25rem;
  line-height: 1;
}

.close-btn:hover {
  color: var(--text);
}

.scheduler-form {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.scheduler-form .form-group {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.scheduler-form label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
}

.scheduler-form select,
.scheduler-form input {
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text);
  font-size: 0.85rem;
}

.scheduler-form select:focus,
.scheduler-form input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.15);
}

.scheduler-submit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.7rem 1.25rem;
  background: var(--primary);
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
  margin-top: 0.5rem;
}

.scheduler-submit-btn:hover:not(:disabled) {
  background: #4338CA;
}

.scheduler-submit-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.scheduler-result {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--border);
}

.scheduler-result.success {
  background: rgba(16, 185, 129, 0.05);
  color: #10B981;
}

.scheduler-result.error {
  background: rgba(239, 68, 68, 0.05);
  color: #EF4444;
}

.scheduler-result strong {
  display: block;
  margin-bottom: 0.25rem;
}

.scheduler-result p {
  font-size: 0.8rem;
  margin: 0;
  color: var(--text-muted);
}

.loading-text {
  font-size: 0.85rem;
  color: var(--text-muted);
  padding: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Scheduler Step */
.scheduler-step {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--border);
}

.scheduler-step:last-child {
  border-bottom: none;
}

.step-label {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Search Row */
.search-row {
  display: flex;
  gap: 0.5rem;
}

.search-row input {
  flex: 1;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text);
  font-size: 0.85rem;
}

.search-row input:focus {
  outline: none;
  border-color: var(--primary);
}

.search-btn {
  padding: 0.6rem 1rem;
  border: 1px solid var(--primary);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--primary);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
}

.search-btn:hover:not(:disabled) {
  background: var(--primary);
  color: white;
}

.search-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Search Results */
.search-results {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.search-result-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.75rem;
  cursor: pointer;
  transition: background 0.15s;
}

.search-result-item:hover {
  background: var(--surface-hover);
}

.result-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--primary);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 700;
  flex-shrink: 0;
}

.result-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.result-info strong {
  font-size: 0.85rem;
  color: var(--text);
}

.result-info span {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.result-subs {
  font-size: 0.7rem;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: rgba(79, 70, 229, 0.1);
  color: var(--primary);
  font-weight: 600;
  white-space: nowrap;
}

.search-empty {
  font-size: 0.8rem;
  color: var(--text-muted);
  text-align: center;
  padding: 0.75rem;
}

/* Selected User Card */
.selected-user-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  background: rgba(16, 185, 129, 0.05);
  border: 1px solid rgba(16, 185, 129, 0.2);
  border-radius: var(--radius-sm);
}

.selected-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #10B981;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  font-weight: 700;
  flex-shrink: 0;
}

.selected-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.selected-info strong {
  font-size: 0.9rem;
  color: var(--text);
}

.selected-info span {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.change-btn {
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
}

.change-btn:hover {
  background: var(--surface-hover);
  color: var(--text);
}

/* Subscription Options */
.sub-options {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  max-height: 200px;
  overflow-y: auto;
}

.sub-option {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.15s;
}

.sub-option:hover {
  border-color: var(--primary);
  background: rgba(79, 70, 229, 0.03);
}

.sub-option.selected {
  border-color: var(--primary);
  background: rgba(79, 70, 229, 0.08);
  box-shadow: 0 0 0 1px var(--primary);
}

.sub-option-info {
  display: flex;
  flex-direction: column;
}

.sub-option-info strong {
  font-size: 0.85rem;
  color: var(--text);
}

.sub-option-info span {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.sub-option-details {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.sub-amount {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--success);
}

.sub-cycle {
  font-size: 0.7rem;
  color: var(--text-muted);
}

/* Cron Details Button */
.cron-details-btn {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 0.85rem;
  border: 1px solid rgba(14, 165, 233, 0.3);
  border-radius: var(--radius-sm);
  background: rgba(14, 165, 233, 0.08);
  color: var(--primary-blue, #0EA5E9);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.cron-details-btn:hover {
  background: rgba(14, 165, 233, 0.15);
  border-color: rgba(14, 165, 233, 0.5);
}

/* Details Panel */
.details-panel {
  max-width: 700px;
}

.details-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 3rem;
  color: var(--text-muted);
}

.details-error {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1.5rem;
  color: var(--danger, #EF4444);
  font-size: 0.9rem;
}

.details-content {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 1rem 1.5rem;
}

.details-cron-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border);
}

.details-cron-name {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
}

.details-cron-name strong {
  color: var(--text);
}

.text-success { color: var(--success, #10B981); }
.text-muted { color: var(--text-muted); }

.details-section {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.details-section h4 {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.details-description {
  font-size: 0.85rem;
  color: var(--text);
  line-height: 1.5;
  padding: 0.75rem;
  background: var(--surface);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--primary);
}

.details-schedule-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--text);
}

.details-schedule-row code {
  font-size: 0.8rem;
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  background: var(--surface);
  color: var(--primary);
  font-weight: 600;
}

/* Stats Grid */
.details-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.5rem;
}

.stat-card {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 0.75rem;
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1px solid var(--border);
}

.stat-card.green { border-left: 3px solid var(--success, #10B981); }
.stat-card.red { border-left: 3px solid var(--danger, #EF4444); }
.stat-card.blue { border-left: 3px solid var(--primary-blue, #0EA5E9); }
.stat-card.orange { border-left: 3px solid var(--warning, #F59E0B); }
.stat-card.purple { border-left: 3px solid var(--primary); }

.stat-card div {
  display: flex;
  flex-direction: column;
}

.stat-value {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--text);
}

.stat-label {
  font-size: 0.7rem;
  color: var(--text-muted);
}

/* Users List */
.details-users-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  max-height: 300px;
  overflow-y: auto;
}

.details-user-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.75rem;
  background: var(--surface);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}

.details-user-row.retrying {
  border-color: rgba(245, 158, 11, 0.3);
  background: rgba(245, 158, 11, 0.05);
}

.user-row-info {
  display: flex;
  flex-direction: column;
  min-width: 120px;
}

.user-row-info strong {
  font-size: 0.8rem;
  color: var(--text);
}

.user-row-info span {
  font-size: 0.7rem;
  color: var(--text-muted);
}

.user-row-details {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.user-service {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--primary-blue, #0EA5E9);
}

.user-group {
  font-size: 0.7rem;
  color: var(--text-muted);
}

.user-row-amount {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  min-width: 60px;
}

.user-row-amount span:first-child {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--success, #10B981);
}

.user-next-charge {
  font-size: 0.7rem;
  color: var(--text-muted);
}

.user-row-status {
  min-width: 60px;
  text-align: right;
}

.status-badge {
  display: inline-block;
  font-size: 0.65rem;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  font-weight: 600;
}

.status-badge.active {
  background: rgba(16, 185, 129, 0.1);
  color: var(--success, #10B981);
}

.status-badge.retrying {
  background: rgba(245, 158, 11, 0.1);
  color: var(--warning, #F59E0B);
}

/* Executions List */
.details-executions-list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  max-height: 250px;
  overflow-y: auto;
}

.execution-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.65rem;
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
}

.execution-row.success { background: rgba(16, 185, 129, 0.05); }
.execution-row.failed { background: rgba(239, 68, 68, 0.05); }
.execution-row.neutral { background: var(--surface); }

.exec-indicator {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.execution-row.success .exec-indicator { background: var(--success, #10B981); }
.execution-row.failed .exec-indicator { background: var(--danger, #EF4444); }
.execution-row.neutral .exec-indicator { background: var(--text-muted); }

.exec-info {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.exec-action {
  font-weight: 600;
  color: var(--text);
  font-size: 0.78rem;
}

.exec-time {
  font-size: 0.7rem;
  color: var(--text-muted);
}

.exec-details {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.details-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 2rem;
  color: var(--text-muted);
  font-size: 0.85rem;
}

@media (max-width: 600px) {
  .scheduler-overlay {
    padding: 1rem;
  }

  .cron-card-actions {
    flex-direction: column;
  }

  .cron-details-btn,
  .cron-toggle-btn,
  .cron-run-btn {
    width: 100%;
    justify-content: center;
  }

  .details-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .details-user-row {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .user-row-info {
    min-width: 100%;
  }

  .user-row-details {
    min-width: 0;
    flex: 1;
  }

  .user-row-amount,
  .user-row-status {
    min-width: auto;
  }
}

/* ---------------------------------------------
   Avisos: fonte dos agendamentos e ajuste manual
   --------------------------------------------- */
.cron-source-warning,
.cron-manual-notice {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.9rem 1rem;
  border-radius: var(--radius-sm);
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.35);
  color: var(--text);
  font-size: 0.85rem;
}

.cron-source-warning svg,
.cron-manual-notice svg {
  color: var(--warning);
  flex-shrink: 0;
}

.cron-source-warning p,
.cron-manual-notice p {
  margin: 0.35rem 0 0;
  color: var(--text-muted);
  white-space: pre-wrap;
}

.cron-source-warning code,
.cron-manual-notice code {
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.05rem 0.3rem;
  font-size: 0.8rem;
}

.cron-notice-close {
  margin-top: 0.6rem;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 0.75rem;
  padding: 0.3rem 0.6rem;
  cursor: pointer;
}

.cron-notice-close:hover {
  color: var(--text);
  border-color: var(--border-strong);
}

/* ---------------------------------------------
   Tabelas dos detalhes (assinaturas e faturas)
   --------------------------------------------- */
.cron-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.cron-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
}

.cron-table th {
  text-align: left;
  padding: 0.6rem 0.75rem;
  border-bottom: 2px solid var(--border);
  color: var(--text-muted);
  font-weight: 600;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.cron-table td {
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  vertical-align: middle;
}

.cron-table tbody tr:hover td {
  background: var(--surface-hover);
}

.cron-table-user {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.cron-table-user strong {
  font-size: 0.8rem;
}

.cron-table-user span {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.cron-card-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.cron-no-card {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--error);
  white-space: nowrap;
}

.cron-card-unknown {
  font-size: 0.75rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.cron-days-overdue {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--error);
  white-space: nowrap;
}

.cron-charge-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.35rem 0.6rem;
  border: 1px solid var(--primary);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--primary);
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.cron-charge-btn:hover:not(:disabled) {
  background: var(--primary);
  color: #fff;
}

.cron-charge-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.cron-row-actions {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  align-items: flex-start;
}

.cron-open-btn {
  padding: 0.3rem 0.55rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text);
  font-size: 0.7rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.cron-open-btn:hover:not(:disabled) {
  border-color: var(--border-strong);
  background: var(--surface-hover);
}

.cron-open-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.details-empty-text {
  margin: 0;
  padding: 0.75rem;
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 0.82rem;
}

.search-error {
  color: var(--error);
}

/* ---------------------------------------------
   Toast
   --------------------------------------------- */
.cron-toast {
  position: fixed;
  top: 1.5rem;
  right: 1.5rem;
  z-index: 1300;
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  max-width: 460px;
  padding: 0.85rem 1rem;
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  font-size: 0.85rem;
  color: var(--text);
}

.cron-toast.success { border-left: 3px solid var(--success); }
.cron-toast.success svg { color: var(--success); }
.cron-toast.error { border-left: 3px solid var(--error); }
.cron-toast.error svg { color: var(--error); }
.cron-toast.warning { border-left: 3px solid var(--warning); }
.cron-toast.warning svg { color: var(--warning); }
.cron-toast.info { border-left: 3px solid var(--primary); }
.cron-toast.info svg { color: var(--primary); }

.cron-toast span { flex: 1; }

.cron-toast button {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 0;
}

.cron-toast button:hover { color: var(--text); }

@media (max-width: 600px) {
  .cron-toast {
    left: 1rem;
    right: 1rem;
    max-width: none;
  }
}
.coupons-page { padding: 1.5rem; max-width: 1100px; margin: 0 auto; }

.coupon-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0.75rem; margin: 1.25rem 0; }
.coupon-stat-card { display: flex; align-items: center; gap: 0.6rem; padding: 0.75rem 1rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.coupon-stat-card.green { border-left: 3px solid var(--success, #10B981); }
.coupon-stat-card.blue { border-left: 3px solid var(--primary-blue, #0EA5E9); }
.coupon-stat-card.purple { border-left: 3px solid var(--primary, #4F46E5); }
.coupon-stat-card div { display: flex; flex-direction: column; }
.stat-val { font-size: 1.15rem; font-weight: 800; color: var(--text); }
.stat-lbl { font-size: 0.7rem; color: var(--text-muted); }

/* Tabs */
.coupon-tabs {
  display: flex;
  gap: 0.25rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1.25rem;
}
.coupon-tab {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.65rem 1rem;
  border: none;
  background: none;
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: all 0.15s;
}
.coupon-tab:hover { color: var(--text-main); }
.coupon-tab.active {
  color: var(--primary, #4F46E5);
  border-bottom-color: var(--primary, #4F46E5);
}

.coupon-actions-bar { display: flex; gap: 0.75rem; margin-bottom: 1.25rem; }

.coupon-refresh-btn, .coupon-add-btn {
  display: flex; align-items: center; gap: 0.4rem;
  padding: 0.55rem 1rem; border-radius: var(--radius-sm);
  font-size: 0.85rem; font-weight: 600; cursor: pointer; border: 1px solid var(--border);
}
.coupon-refresh-btn { background: var(--surface); color: var(--text); }
.coupon-refresh-btn:hover { background: var(--surface-hover); }
.coupon-add-btn { background: var(--primary, #4F46E5); color: white; border-color: var(--primary); }
.coupon-add-btn:hover { opacity: 0.9; }

.coupon-loading { text-align: center; padding: 3rem; color: var(--text-muted); }
.coupon-empty { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; padding: 3rem; color: var(--text-muted); }
.coupon-empty p { font-size: 0.95rem; }

.coupon-list { display: flex; flex-direction: column; gap: 0.75rem; }

.coupon-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1rem 1.25rem; transition: border-color 0.2s;
}
.coupon-card:hover { border-color: var(--primary, #4F46E5); }
.coupon-card.inactive { opacity: 0.65; }

.coupon-card-header { margin-bottom: 0.6rem; }
.coupon-code-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.coupon-code {
  font-family: monospace; font-size: 1.05rem; font-weight: 800;
  color: var(--primary, #4F46E5); letter-spacing: 0.05em;
}
.copy-btn {
  background: none; border: 1px solid var(--border); border-radius: 4px;
  padding: 0.2rem 0.35rem; cursor: pointer; color: var(--text-muted); display: flex;
}
.copy-btn:hover { background: var(--surface-hover); color: var(--text); }

.discount-badge {
  display: inline-flex; align-items: center; gap: 0.25rem;
  font-size: 0.72rem; font-weight: 700; padding: 0.2rem 0.5rem; border-radius: 999px;
}
.discount-badge.percentage { background: rgba(79, 70, 229, 0.1); color: var(--primary, #4F46E5); }
.discount-badge.fixed { background: rgba(16, 185, 129, 0.1); color: var(--success, #10B981); }

.status-tag {
  font-size: 0.65rem; font-weight: 700; padding: 0.15rem 0.45rem; border-radius: 999px;
}
.status-tag.expired { background: rgba(239, 68, 68, 0.1); color: var(--danger, #EF4444); }
.status-tag.maxed { background: rgba(245, 158, 11, 0.1); color: var(--warning, #F59E0B); }
.status-tag.inactive-tag { background: rgba(107, 114, 128, 0.1); color: var(--text-muted); }

.coupon-desc { font-size: 0.8rem; color: var(--text-muted); margin-top: 0.35rem; }

.coupon-card-body { display: flex; flex-wrap: wrap; gap: 0.35rem 1.25rem; padding: 0.5rem 0; border-top: 1px solid var(--border); }
.coupon-detail-row { display: flex; align-items: center; gap: 0.35rem; font-size: 0.78rem; }
.detail-label { color: var(--text-muted); }
.detail-value { font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 0.25rem; }

.coupon-card-actions { display: flex; gap: 0.5rem; padding-top: 0.6rem; border-top: 1px solid var(--border); }

.toggle-active-btn, .edit-btn, .delete-btn {
  display: flex; align-items: center; gap: 0.3rem;
  padding: 0.4rem 0.7rem; border-radius: var(--radius-sm);
  font-size: 0.75rem; font-weight: 600; cursor: pointer; border: 1px solid var(--border);
  background: var(--surface); color: var(--text-muted); transition: all 0.15s;
}
.toggle-active-btn:hover, .edit-btn:hover { background: var(--surface-hover); color: var(--text); border-color: var(--primary, #4F46E5); }
.toggle-active-btn.activate { border-color: rgba(16, 185, 129, 0.3); color: var(--success, #10B981); }
.toggle-active-btn.deactivate { border-color: rgba(245, 158, 11, 0.3); color: var(--warning, #F59E0B); }
.delete-btn:hover { border-color: var(--danger, #EF4444); color: var(--danger, #EF4444); }

/* Inline Form */
.coupon-form-inline {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.coupon-form-header {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--border);
}
.coupon-form-header h3 {
  margin: 0;
  font-size: 1rem;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.coupon-form { padding: 1.25rem 1.5rem; display: flex; flex-direction: column; gap: 0.85rem; }
.coupon-form .form-group { display: flex; flex-direction: column; gap: 0.3rem; }
.coupon-form label { font-size: 0.78rem; font-weight: 700; color: var(--text); }
.coupon-form input, .coupon-form select {
  padding: 0.55rem 0.75rem; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg); color: var(--text); font-size: 0.85rem;
}
.coupon-form input:focus, .coupon-form select:focus { outline: none; border-color: var(--primary, #4F46E5); }
.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }

/* Group selector section */
.coupon-group-section {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.coupon-group-section label { font-size: 0.78rem; font-weight: 700; color: var(--text); }

.coupon-platform-filter {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
}
.coupon-platform-filter svg { color: var(--text-muted); flex-shrink: 0; }
.coupon-platform-filter select {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 0.82rem;
  outline: none;
  padding: 0;
}

.coupon-group-search {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
}
.coupon-group-search svg { color: var(--text-muted); flex-shrink: 0; }
.coupon-group-search input {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 0.82rem;
  outline: none;
  padding: 0;
}

.coupon-group-select {
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text);
  font-size: 0.82rem;
}
.coupon-group-select:focus { outline: none; border-color: var(--primary, #4F46E5); }

.coupon-group-count {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.checkbox-label {
  display: flex !important;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.checkbox-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
}
.checkbox-help {
  color: var(--text-muted);
  font-size: 0.75rem;
}

.coupon-form-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border);
  margin-top: 0.25rem;
}
.coupon-cancel-btn {
  padding: 0.55rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}
.coupon-cancel-btn:hover { background: var(--surface-hover); }

.coupon-save-btn {
  display: flex; align-items: center; justify-content: center; gap: 0.4rem;
  padding: 0.55rem 1.25rem; border-radius: var(--radius-sm);
  background: var(--primary, #4F46E5); color: white; border: none;
  font-size: 0.85rem; font-weight: 700; cursor: pointer;
}
.coupon-save-btn:hover { opacity: 0.9; }
.coupon-save-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.coupon-result {
  display: flex; align-items: center; gap: 0.4rem;
  padding: 0.65rem 1rem; margin: 0.75rem 1.5rem 1rem;
  border-radius: var(--radius-sm); font-size: 0.82rem;
}
.coupon-result.success { background: rgba(16, 185, 129, 0.08); color: var(--success, #10B981); }
.coupon-result.error { background: rgba(239, 68, 68, 0.08); color: var(--danger, #EF4444); }

/* Delete Confirm */
.delete-confirm-modal {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 2rem; text-align: center; max-width: 360px; margin: auto;
  display: flex; flex-direction: column; align-items: center; gap: 0.75rem;
}
.text-danger { color: var(--danger, #EF4444); }
.delete-confirm-modal h3 { color: var(--text); margin: 0; }
.delete-confirm-modal p { color: var(--text-muted); font-size: 0.85rem; margin: 0; }
.delete-confirm-actions { display: flex; gap: 0.75rem; margin-top: 0.75rem; }
.cancel-delete-btn {
  padding: 0.5rem 1rem; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text); font-size: 0.85rem; font-weight: 600; cursor: pointer;
}
.confirm-delete-btn {
  padding: 0.5rem 1rem; border: none; border-radius: var(--radius-sm);
  background: var(--danger, #EF4444); color: white; font-size: 0.85rem; font-weight: 700; cursor: pointer;
}

@media (max-width: 600px) {
  .coupon-stats { grid-template-columns: repeat(2, 1fr); }
  .coupon-card-actions { flex-wrap: wrap; }
  .form-row-2 { grid-template-columns: 1fr; }
  .coupon-tabs { overflow-x: auto; }
  .coupon-form { padding: 1rem; }
  .coupon-form-header { padding: 0.75rem 1rem; }
}
.platform-events-page {
  padding: 0;
}

.pe-header {
  margin-bottom: 1.5rem;
}

.pe-header h1 {
  font-size: 1.5rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.pe-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 3rem;
  color: #6b7280;
}

.pe-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 4rem;
  color: #6b7280;
}

.pe-link {
  color: var(--primary, #4F46E5);
  cursor: pointer;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.15s;
}

.pe-link:hover {
  color: var(--secondary, #818CF8);
  text-decoration: underline;
}

/* ==================== GROUPS TABLE ==================== */
.groups-list-table {
  width: 100%;
  border-collapse: collapse;
}

.groups-list-table th {
  text-align: left;
  padding: 0.75rem 1rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #9ca3af;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.groups-list-table td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.85rem;
  color: var(--text);
  vertical-align: middle;
}

.groups-list-table tr:hover {
  background: rgba(255,255,255,0.02);
}

.group-name-cell {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.group-thumb {
  width: 40px;
  height: 40px;
  border-radius: 0.5rem;
  object-fit: cover;
}

.group-thumb-placeholder {
  width: 40px;
  height: 40px;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
}

.official-badge {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.1rem 0.4rem;
  border-radius: 0.25rem;
  font-size: 0.65rem;
  font-weight: 600;
  background: #1e3a5f;
  color: #60a5fa;
  vertical-align: middle;
}

.owner-cell {
  display: flex;
  flex-direction: column;
}

.owner-cell small {
  color: #9ca3af;
  font-size: 0.75rem;
}

.plan-badge {
  display: inline-block;
  padding: 0.2rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  background: var(--card-bg);
  border: 1px solid var(--border);
  text-transform: capitalize;
}

.entrance-badge {
  color: #f59e0b;
  font-weight: 500;
}

.slug-code {
  padding: 0.2rem 0.5rem;
  border-radius: 0.25rem;
  background: var(--card-bg);
  border: 1px solid var(--border);
  font-size: 0.8rem;
  font-family: monospace;
  color: #9ca3af;
}

.status-badge {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: 1rem;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: capitalize;
}

.status-badge.active {
  background: #052e16;
  color: #6ee7b7;
}

.status-badge.pending {
  background: #451a03;
  color: #fcd34d;
}

.status-badge.rejected,
.status-badge.cancelled {
  background: #450a0a;
  color: #fca5a5;
}

/* Modal */
.pe-viewer-overlay {
  position: fixed;
  inset: 0;
  background: transparent;
  z-index: 1000;
}

.pe-viewer-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 520px;
  max-width: 95vw;
  background: #ffffff;
  border-left: 1px solid var(--border);
  z-index: 1001;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

[data-theme="dark"] .pe-viewer-panel {
  background: #0f172a;
}

.pe-viewer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.pe-viewer-header h3 {
  font-size: 1.1rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
}

.pe-viewer-close {
  background: var(--card-bg);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 1rem;
  cursor: pointer;
  padding: 0.4rem 0.6rem;
  border-radius: 6px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pe-viewer-close:hover {
  color: var(--text);
  background: var(--bg-secondary, rgba(255,255,255,0.05));
}

.pe-viewer-body {
  padding: 1.5rem;
  overflow-y: auto;
  flex: 1;
}

.pe-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.pe-detail-item label {
  display: block;
  font-size: 0.75rem;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.25rem;
  font-weight: 600;
}

[data-theme="dark"] .pe-detail-item label {
  color: #9ca3af;
}

.pe-detail-item span {
  font-size: 0.95rem;
  font-weight: 500;
  color: #111827;
}

[data-theme="dark"] .pe-detail-item span {
  color: #e2e8f0;
}

.pe-detail-divider {
  grid-column: 1 / -1;
  height: 1px;
  background: #e5e7eb;
  margin: 0.25rem 0;
}

[data-theme="dark"] .pe-detail-divider {
  background: #374151;
}

/* ==================== TABLE CELLS ==================== */
.date-cell {
  font-size: 0.82rem;
  color: var(--text-muted, rgba(255,255,255,0.4));
  white-space: nowrap;
}

.actions-cell {
  display: flex;
  gap: 0.4rem;
  justify-content: flex-end;
}

.action-btn {
  padding: 0.35rem 0.75rem;
  border-radius: 0.5rem;
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  background: rgba(255,255,255,0.04);
  color: var(--text, #e2e8f0);
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  white-space: nowrap;
}

.action-btn:hover {
  background: rgba(255,255,255,0.08);
}

.action-btn.success {
  color: #34d399;
  border-color: rgba(16,185,129,0.25);
}

.action-btn.success:hover {
  background: rgba(16,185,129,0.1);
}

.action-btn.danger {
  color: #f87171;
  border-color: rgba(239,68,68,0.25);
}

.action-btn.danger:hover {
  background: rgba(239,68,68,0.1);
}

.action-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

@media (max-width: 640px) {
  .pe-detail-grid {
    grid-template-columns: 1fr;
  }

  .pe-viewer-panel {
    width: 100vw;
    max-width: 100vw;
  }

  .groups-list-table {
    font-size: 0.8rem;
  }

  .groups-list-table th,
  .groups-list-table td {
    padding: 0.5rem 0.75rem;
  }

  .actions-cell {
    flex-wrap: wrap;
    gap: 0.3rem;
  }

  .action-btn {
    padding: 0.3rem 0.6rem;
    font-size: 0.75rem;
  }

  .pe-viewer-panel {
    width: 100vw;
    max-width: 100vw;
  }

  .pe-viewer-body {
    padding: 1rem;
  }
}

/* ─────────────────────────────────────────────────────────────
   Celular — a página de eventos é uma folha de largura inteira.
   ───────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .pe-header {
    margin-bottom: 1rem;
  }

  .pe-header h1 {
    font-size: 1.2rem;
  }

  .pe-header p {
    font-size: 0.8rem;
  }

  /* A tabela rola de lado, mas a primeira coluna fica grudada: o
     operador vê o nome do grupo enquanto arrasta. */
  .admin-content .table-responsive {
    -webkit-overflow-scrolling: touch;
    /* Sombras nas bordas: sinaliza que há mais coluna fora da tela. */
    background:
      linear-gradient(to right, var(--surface) 30%, rgba(0, 0, 0, 0)) left center / 24px 100% no-repeat,
      linear-gradient(to left, var(--surface) 30%, rgba(0, 0, 0, 0)) right center / 24px 100% no-repeat;
    background-attachment: local, local;
  }

  .groups-list-table th:first-child,
  .groups-list-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--surface);
    box-shadow: 1px 0 0 var(--border);
  }

  .groups-list-table th:first-child {
    background: var(--bg-secondary, #0d1117);
    z-index: 2;
  }

  .groups-list-table td {
    padding: 0.45rem 0.7rem;
    font-size: 0.8rem;
  }

  .groups-list-table th {
    padding: 0.45rem 0.7rem;
    font-size: 0.66rem;
  }
}
.surveys-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: 1.25rem;
}

.add-btn {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  background: #4F46E5;
  border: none;
  color: #ffffff;
  border-radius: 0.4rem;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
}

.add-btn:hover {
  background: #4338ca;
}

.survey-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.survey-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.survey-card-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
}

.survey-card-title h3 {
  font-size: 1rem;
  color: var(--text);
  margin: 0;
  line-height: 1.3;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.status-dot.active {
  background: #10b981;
  box-shadow: 0 0 6px rgba(16, 185, 129, 0.5);
}

.status-dot.inactive {
  background: #6b7280;
}

.survey-card-actions {
  display: flex;
  gap: 0.25rem;
}

.icon-btn {
  background: none;
  border: none;
  color: var(--text-secondary, #9ca3af);
  cursor: pointer;
  padding: 0.35rem;
  border-radius: 0.35rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}

.icon-btn:hover {
  background: var(--border);
  color: var(--text);
}

.icon-btn.danger:hover {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

.survey-card-desc {
  font-size: 0.85rem;
  color: var(--text-secondary, #9ca3af);
  margin: 0;
  line-height: 1.4;
}

.survey-card-meta {
  display: flex;
  gap: 1rem;
  font-size: 0.8rem;
  color: var(--text-secondary, #9ca3af);
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.survey-card-link {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--bg-secondary, #1a1a2e);
  border: 1px solid var(--border);
  border-radius: 0.4rem;
  padding: 0.4rem 0.6rem;
  font-size: 0.75rem;
}

.link-text {
  color: #818cf8;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.copy-btn {
  background: none;
  border: none;
  color: var(--text-secondary, #9ca3af);
  cursor: pointer;
  padding: 0.2rem;
  display: flex;
  align-items: center;
  transition: color 0.15s;
}

.copy-btn:hover {
  color: #10b981;
}

.survey-card-footer {
  display: flex;
  gap: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border);
}

.results-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.5rem;
  background: rgba(79, 70, 229, 0.1);
  border: 1px solid rgba(79, 70, 229, 0.3);
  color: #818cf8;
  border-radius: 0.4rem;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.15s;
}

.results-btn:hover {
  background: rgba(79, 70, 229, 0.2);
}

/* ==================== FORM ==================== */

.survey-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.form-section {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  padding: 1.25rem;
}

.form-section h2 {
  font-size: 1rem;
  color: var(--text);
  margin: 0 0 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border);
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.form-grid .full-width {
  grid-column: 1 / -1;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.form-group label {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text);
}

.form-group input,
.form-group textarea,
.form-group select {
  background: var(--bg-secondary, #1a1a2e);
  border: 1px solid var(--border);
  border-radius: 0.4rem;
  padding: 0.5rem 0.75rem;
  color: var(--text);
  font-size: 0.85rem;
  font-family: inherit;
  transition: border-color 0.15s;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #4F46E5;
}

.help-text {
  font-size: 0.75rem;
  color: var(--text-secondary, #9ca3af);
  margin: 0;
}

.slug-input-group {
  display: flex;
  align-items: center;
  background: var(--bg-secondary, #1a1a2e);
  border: 1px solid var(--border);
  border-radius: 0.4rem;
  overflow: hidden;
}

.slug-prefix {
  padding: 0.5rem 0.6rem;
  font-size: 0.85rem;
  color: var(--text-secondary, #9ca3af);
  background: rgba(0, 0, 0, 0.15);
  border-right: 1px solid var(--border);
  white-space: nowrap;
}

.slug-input-group input {
  border: none !important;
  background: transparent !important;
  border-radius: 0 !important;
}

.toggle-group {
  display: flex;
}

.toggle-btn {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.75rem;
  background: var(--bg-secondary, #1a1a2e);
  border: 1px solid var(--border);
  border-radius: 0.4rem;
  color: var(--text-secondary, #9ca3af);
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.15s;
}

.toggle-btn.active {
  background: rgba(16, 185, 129, 0.1);
  border-color: rgba(16, 185, 129, 0.3);
  color: #10b981;
}

.checkbox-label {
  flex-direction: row !important;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--text);
  cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: #4F46E5;
}

/* ==================== STEPS ==================== */

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.section-header h2 {
  margin: 0;
  padding: 0;
  border: none;
}

.add-step-btn {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.75rem;
  background: rgba(79, 70, 229, 0.15);
  border: 1px solid rgba(79, 70, 229, 0.3);
  color: #818cf8;
  border-radius: 0.4rem;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.15s;
}

.add-step-btn:hover {
  background: rgba(79, 70, 229, 0.25);
}

.empty-steps {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2rem;
  color: var(--text-secondary, #9ca3af);
  gap: 0.5rem;
}

.steps-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.step-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background: var(--bg-secondary, #1a1a2e);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  padding: 0.75rem;
}

.step-card-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.step-number {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #4F46E5;
  color: white;
  font-size: 0.8rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.step-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.step-type-badge {
  font-size: 0.7rem;
  font-weight: 500;
  padding: 0.1rem 0.4rem;
  border-radius: 0.25rem;
  text-transform: uppercase;
  width: fit-content;
}

.step-type-badge.info {
  background: rgba(14, 165, 233, 0.15);
  color: #38bdf8;
}

.step-type-badge.question {
  background: rgba(234, 88, 12, 0.15);
  color: #fb923c;
}

.step-type-badge.platforms {
  background: rgba(168, 85, 247, 0.15);
  color: #c084fc;
}

.step-info h4 {
  font-size: 0.85rem;
  color: var(--text);
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.step-actions {
  display: flex;
  gap: 0.15rem;
}

.step-preview {
  font-size: 0.8rem;
  color: var(--text-secondary, #9ca3af);
  margin: 0;
  line-height: 1.4;
}

.step-options-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.option-chip {
  font-size: 0.7rem;
  padding: 0.15rem 0.5rem;
  background: rgba(234, 88, 12, 0.1);
  border: 1px solid rgba(234, 88, 12, 0.2);
  color: #fb923c;
  border-radius: 1rem;
}

.step-branch-preview {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.35rem;
  font-size: 0.7rem;
  color: var(--text-secondary, #9ca3af);
}

.step-branch-preview svg {
  color: #a855f7;
  flex-shrink: 0;
}

.branch-sim-preview {
  color: #10B981;
  font-weight: 600;
}

.branch-nao-preview {
  color: #EF4444;
  font-weight: 600;
}

.step-platforms-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.platform-chip {
  font-size: 0.7rem;
  padding: 0.15rem 0.5rem;
  background: rgba(168, 85, 247, 0.1);
  border: 1px solid rgba(168, 85, 247, 0.2);
  color: #c084fc;
  border-radius: 1rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.platform-chip img {
  width: 12px;
  height: 12px;
  border-radius: 2px;
}

.no-platforms {
  font-size: 0.75rem;
  color: var(--text-secondary, #9ca3af);
  font-style: italic;
}

/* ==================== MODAL ==================== */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 1rem;
}

.modal-content {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  width: 100%;
  max-width: 600px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}

.step-modal {
  max-width: 650px;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border);
}

.modal-header h2 {
  font-size: 1rem;
  margin: 0;
}

.close-btn {
  background: none;
  border: none;
  color: var(--text-secondary, #9ca3af);
  cursor: pointer;
  padding: 0.25rem;
}

.modal-body {
  padding: 1.25rem;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--border);
}

.cancel-btn {
  padding: 0.5rem 1rem;
  background: var(--bg-secondary, #1a1a2e);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 0.4rem;
  font-size: 0.85rem;
  cursor: pointer;
}

.auto-save-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  color: #f59e0b;
  margin-left: 0.75rem;
  animation: fadeIn 0.3s ease;
}

.auto-save-badge.saved {
  color: #10B981;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.save-btn {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  background: #4F46E5;
  border: none;
  color: white;
  border-radius: 0.4rem;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.15s;
}

.save-btn:hover {
  background: #4338ca;
}

.save-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ==================== TYPE SELECTOR ==================== */

.type-selector {
  display: flex;
  gap: 0.5rem;
}

.type-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.6rem;
  background: var(--bg-secondary, #1a1a2e);
  border: 1px solid var(--border);
  color: var(--text-secondary, #9ca3af);
  border-radius: 0.4rem;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.15s;
}

.type-btn:hover {
  border-color: #4F46E5;
  color: var(--text);
}

.type-btn.active {
  background: rgba(79, 70, 229, 0.15);
  border-color: #4F46E5;
  color: #818cf8;
}

.type-btn.small {
  flex: none;
  padding: 0.4rem 0.75rem;
}

/* ==================== BRANCH SELECTOR ==================== */

.branch-selector {
  margin-top: 0.75rem;
}

.branch-selector label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.branch-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.branch-option {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.branch-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.branch-sim {
  color: #10B981;
}

.branch-nao {
  color: #EF4444;
}

.branch-select {
  width: 100%;
  padding: 0.5rem 0.75rem;
  background: var(--bg-secondary, #1a1a2e);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 0.4rem;
  font-size: 0.8rem;
  cursor: pointer;
}

.branch-select:focus {
  outline: none;
  border-color: #4F46E5;
}

/* ==================== OPTIONS EDITOR ==================== */

.options-editor {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.option-row {
  display: flex;
  gap: 0.4rem;
  align-items: center;
}

.option-input {
  flex: 1;
}

.add-option-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  padding: 0.4rem;
  background: rgba(168, 85, 247, 0.1);
  border: 1px dashed rgba(168, 85, 247, 0.3);
  color: #c084fc;
  border-radius: 0.4rem;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.15s;
}

.add-option-btn:hover {
  background: rgba(168, 85, 247, 0.2);
}

/* ==================== PLATFORMS SELECTOR ==================== */

.platforms-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.5rem;
}

.platform-select-card {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem;
  background: var(--bg-secondary, #1a1a2e);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.15s;
}

.platform-select-card:hover {
  border-color: #4F46E5;
}

.platform-select-card.selected {
  background: rgba(79, 70, 229, 0.1);
  border-color: #4F46E5;
}

.platform-select-icon {
  width: 28px;
  height: 28px;
  border-radius: 0.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.platform-select-icon.category-icon {
  background: rgba(168, 85, 247, 0.2);
  color: #c084fc;
}

.platform-select-icon img {
  width: 18px;
  height: 18px;
  border-radius: 2px;
}

.platform-select-icon span {
  color: white;
  font-size: 0.7rem;
  font-weight: 700;
}

.platform-select-name {
  font-size: 0.8rem;
  color: var(--text);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.check-icon {
  color: var(--text-secondary, #9ca3af);
  opacity: 0;
  transition: opacity 0.15s;
}

.check-icon.visible {
  color: #10b981;
  opacity: 1;
}

/* ==================== INLINE STEP EDITOR ==================== */

.step-inline-editor {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  background: var(--bg-secondary, #1a1a2e);
  border: none;
  border-radius: 0;
  overflow: hidden;
}

.inline-editor-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  background: rgba(79, 70, 229, 0.1);
  border-bottom: 1px solid rgba(79, 70, 229, 0.2);
  flex-shrink: 0;
}

.inline-editor-header h3 {
  font-size: 0.9rem;
  color: #818cf8;
  margin: 0;
}

.inline-editor-body {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  overflow-y: auto;
  flex: 1;
}

.inline-editor-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

/* ==================== SUCCESS BANNER ==================== */

.success-banner {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: 0.5rem;
  color: #10b981;
  font-size: 0.85rem;
  font-weight: 500;
  margin-bottom: 1rem;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ==================== RESPONSIVE ==================== */

@media (max-width: 768px) {
  .surveys-grid {
    grid-template-columns: 1fr;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  .type-selector {
    flex-direction: column;
  }

  .branch-options {
    grid-template-columns: 1fr;
  }

  .platforms-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .modal-content {
    max-height: 95vh;
    border-radius: 0.5rem;
  }
}

/* Steps Summary */
.steps-summary {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.step-summary-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.75rem;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 0.4rem;
}

.step-summary-row .step-number {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #4F46E5;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  flex-shrink: 0;
}

.step-summary-title {
  color: #e2e8f0;
  font-size: 0.85rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.steps-edit-cta {
  display: flex;
  justify-content: center;
  margin-top: 1rem;
}

.edit-steps-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1.5rem;
  background: #4F46E5;
  color: white;
  border: none;
  border-radius: 0.5rem;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}

.edit-steps-btn:hover {
  background: #4338ca;
}

/* Steps Editor Full Page */
.steps-editor-page {
  height: 100vh;
  overflow-y: auto !important;
  display: flex;
  flex-direction: column;
}

.steps-editor-list {
  padding: 0;
}

.steps-list-full {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.step-card-full {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.5rem;
  padding: 1rem 1.25rem;
}

.step-card-full .step-card-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.step-card-full .step-number {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #4F46E5;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 700;
  flex-shrink: 0;
}

.step-card-full .step-info {
  flex: 1;
}

.step-card-full .step-info h4 {
  margin: 0.25rem 0 0;
  font-size: 0.95rem;
  color: #f1f5f9;
}

.step-card-full .step-actions {
  display: flex;
  gap: 0.3rem;
  flex-shrink: 0;
}

.step-card-full .step-preview {
  margin: 0.75rem 0 0;
  font-size: 0.85rem;
  color: #94a3b8;
  line-height: 1.5;
}

.step-card-full .step-options-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.75rem;
}

.step-card-full .step-platforms-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.75rem;
}

.step-card-full .step-branch-preview {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.75rem;
  font-size: 0.8rem;
  color: #94a3b8;
}
/* Mesmo desenho de aba do relatório de onboarding: sublinhado + cor primária.
   Duas abas com linguagem diferente no mesmo painel desorientam. */
.results-tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
}

.tab-btn {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.65rem 1rem;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  font-size: 0.9rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.tab-btn:hover {
  color: var(--text-main);
}

.tab-btn.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

.header-subtitle {
  font-size: 0.8rem;
  color: var(--text-secondary, #9ca3af);
  font-weight: 400;
}

/* ==================== SUMMARY CARDS ==================== */

.summary-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.summary-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 0.6rem;
  padding: 1rem 1.25rem;
}

.summary-icon {
  width: 44px;
  height: 44px;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.summary-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text);
  display: block;
  line-height: 1.2;
}

.summary-label {
  font-size: 0.75rem;
  color: var(--text-secondary, #9ca3af);
}

/* ==================== CHARTS ==================== */

.charts-section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.charts-section h2 {
  font-size: 1rem;
  color: var(--text);
  margin: 0;
}

.no-charts {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2rem;
  color: var(--text-secondary, #9ca3af);
  gap: 0.5rem;
}

.chart-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 0.6rem;
  padding: 1.25rem;
}

.chart-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.chart-header h3 {
  font-size: 0.9rem;
  color: var(--text);
  margin: 0;
  flex: 1;
}

.chart-total {
  font-size: 0.75rem;
  color: var(--text-secondary, #9ca3af);
}

.chart-bars {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.bar-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.bar-label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 120px;
  font-size: 0.8rem;
  color: var(--text);
}

.bar-icon {
  width: 16px;
  height: 16px;
  border-radius: 2px;
}

.bar-track {
  flex: 1;
  height: 24px;
  background: var(--bg-secondary, #1a1a2e);
  border-radius: 0.3rem;
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  border-radius: 0.3rem;
  transition: width 0.5s ease;
  min-width: 2px;
}

.bar-value {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 70px;
  justify-content: flex-end;
}

.bar-count {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
}

.bar-pct {
  font-size: 0.75rem;
  color: var(--text-secondary, #9ca3af);
}

/* ==================== RESPONSES ==================== */

.responses-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.response-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  overflow: hidden;
}

.response-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  cursor: pointer;
  transition: background 0.15s;
}

.response-header:hover {
  background: var(--bg-secondary, #1a1a2e);
}

.response-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 1;
  min-width: 0;
}

.response-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #4F46E5;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 600;
  flex-shrink: 0;
}

.response-info strong {
  font-size: 0.9rem;
  color: var(--text);
  display: block;
}

.response-meta {
  font-size: 0.75rem;
  color: var(--text-secondary, #9ca3af);
  display: block;
}

.response-actions {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--text-secondary, #9ca3af);
}

.response-details {
  padding: 0.75rem 1rem 1rem;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.answer-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--border);
}

.answer-row:last-child {
  border-bottom: none;
}

.answer-label {
  font-size: 0.8rem;
  color: var(--text-secondary, #9ca3af);
  min-width: 120px;
  flex-shrink: 0;
}

.answer-value {
  font-size: 0.85rem;
  color: var(--text);
  font-weight: 500;
  text-align: right;
}

/* ==================== RATING RESULTS ==================== */

.rating-results {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.rating-avg {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: var(--bg-secondary, rgba(255,255,255,0.03));
  border-radius: 0.5rem;
}

.rating-avg-number {
  font-size: 2rem;
  font-weight: 700;
  color: #FBBF24;
}

.rating-avg-stars {
  display: flex;
  gap: 0.15rem;
}

.rating-result-star {
  font-size: 1.25rem;
  color: #6b7280;
}

.rating-result-star.filled {
  color: #FBBF24;
}

.rating-avg-count {
  font-size: 0.8rem;
  color: var(--text-secondary, #9ca3af);
  margin-left: auto;
}

/* ==================== TEXT RESPONSES ==================== */

.text-responses-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.text-response-item {
  display: flex;
  gap: 0.75rem;
  padding: 0.75rem;
  background: var(--bg-secondary, rgba(255,255,255,0.03));
  border-radius: 0.5rem;
}

.text-response-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #4F46E5;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 600;
  flex-shrink: 0;
}

.text-response-content {
  flex: 1;
  min-width: 0;
}

.text-response-user {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text);
  display: block;
}

.text-response-text {
  font-size: 0.85rem;
  color: var(--text-secondary, #9ca3af);
  margin: 0.25rem 0 0;
  white-space: pre-wrap;
  word-break: break-word;
}

.text-response-date {
  font-size: 0.7rem;
  color: var(--text-secondary, #6b7280);
  display: block;
  margin-top: 0.25rem;
}

/* ==================== RESPONSIVE ==================== */

@media (max-width: 768px) {
  .summary-cards {
    grid-template-columns: 1fr;
  }

  .bar-row {
    flex-wrap: wrap;
  }

  .bar-label {
    min-width: 100px;
  }

  .results-tabs {
    overflow-x: auto;
  }
}
/* ═══ Sheet de indicações do onboarding ═══
   Drawer pela direita no desktop, bottom sheet no celular. */

.ob-sheet-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: rgba(2, 6, 23, 0.62);
  backdrop-filter: blur(3px);
  display: flex;
  justify-content: flex-end;
  animation: obSheetFadeIn 0.2s ease-out;
}

.ob-sheet {
  width: min(480px, 100%);
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-left: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  animation: obSheetSlideIn 0.26s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes obSheetFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes obSheetSlideIn {
  from { transform: translateX(28px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

/* ─── Cabeçalho ─────────────────────────────────────────────────────── */

.ob-sheet-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1.15rem 1.25rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.ob-sheet-heading {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-width: 0;
}

.ob-sheet-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 0.6rem;
  background: rgba(239, 68, 68, 0.14);
  color: #EF4444;
}

.ob-sheet-heading h3 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
}

.ob-sheet-heading p {
  margin: 0.1rem 0 0;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.ob-sheet-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 0.5rem;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.ob-sheet-close:hover {
  color: var(--text-main);
  border-color: var(--border-strong);
  background: var(--surface-soft);
}

/* ─── Busca ─────────────────────────────────────────────────────────── */

.ob-sheet-toolbar {
  padding: 0.85rem 1.25rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.ob-sheet-search {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: 0.6rem;
  padding: 0.55rem 0.8rem;
}

.ob-sheet-search:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}

.ob-sheet-search svg {
  color: var(--text-soft);
  flex-shrink: 0;
}

.ob-sheet-search input {
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  outline: none;
  color: var(--text-main);
  font-size: 0.85rem;
}

.ob-sheet-search input::placeholder {
  color: var(--text-soft);
}

/* ─── Corpo ─────────────────────────────────────────────────────────── */

.ob-sheet-body {
  flex: 1;
  overflow-y: auto;
  padding: 1rem 1.25rem 1.5rem;
}

.ob-sheet-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  padding: 3rem 1rem;
  text-align: center;
  color: var(--text-muted);
}

.ob-sheet-empty p {
  margin: 0;
  font-size: 0.85rem;
}

/* ─── Grupo: quem indicou ──────────────────────────────────────────── */

.ob-invite-group {
  margin-bottom: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 0.85rem);
  background: var(--background);
  overflow: hidden;
}

.ob-invite-group-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 0.85rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface-soft);
}

.ob-invite-group-avatar {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 50%;
  object-fit: cover;
}

.ob-invite-group-avatar.is-initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--primary);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
}

.ob-invite-group-who {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.ob-invite-group-who strong,
.ob-invite-group-who a {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-main);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ob-invite-group-who span {
  font-size: 0.74rem;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ob-invite-group-count {
  flex-shrink: 0;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 0.7rem;
  font-weight: 700;
  white-space: nowrap;
}

/* ─── Item: a pessoa indicada ───────────────────────────────────────── */

.ob-invite-group-list {
  display: flex;
  flex-direction: column;
}

.ob-invite-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem 0.85rem;
  border-top: 1px solid var(--border);
}

.ob-invite-item:first-child {
  border-top: none;
}

.ob-invite-item-avatar {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(34, 197, 94, 0.16);
  color: #15803D;
  font-size: 0.8rem;
  font-weight: 700;
}

.ob-invite-item-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.ob-invite-item-info strong {
  font-size: 0.85rem;
  color: var(--text-main);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ob-invite-item-info span {
  font-size: 0.74rem;
  color: var(--text-muted);
}

.ob-invite-item-actions {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
}

.ob-invite-item-wa {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.6rem;
  border-radius: 0.5rem;
  background: rgba(37, 211, 102, 0.14);
  color: #15803D;
  font-size: 0.76rem;
  font-weight: 700;
  white-space: nowrap;
  transition: background 0.18s ease;
}

.ob-invite-item-wa:hover {
  background: rgba(37, 211, 102, 0.26);
}

.ob-invite-item-wa.is-disabled {
  background: transparent;
  color: var(--text-soft);
  cursor: default;
}

.ob-invite-item-call {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 0.5rem;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  transition: color 0.18s ease, border-color 0.18s ease;
}

.ob-invite-item-call:hover {
  color: var(--primary);
  border-color: var(--primary);
}

/* ─── Celular: bottom sheet ─────────────────────────────────────────── */

@media (max-width: 640px) {
  .ob-sheet-overlay {
    align-items: flex-end;
  }

  .ob-sheet {
    width: 100%;
    height: auto;
    max-height: 88vh;
    border-left: none;
    border-top: 1px solid var(--border);
    border-radius: 1.1rem 1.1rem 0 0;
    animation: obSheetSlideUp 0.26s cubic-bezier(0.22, 1, 0.36, 1);
  }

  @keyframes obSheetSlideUp {
    from { transform: translateY(40px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
  }

  .ob-sheet-body {
    padding-bottom: 2rem;
  }

  .ob-invite-item {
    flex-wrap: wrap;
    gap: 0.45rem;
    padding: 0.6rem 0.85rem;
  }

  .ob-invite-item-actions {
    width: 100%;
    justify-content: flex-end;
  }
}
.ta-page {
  padding: 1.5rem;
  max-width: 800px;
  margin: 0 auto;
}

.ta-header {
  margin-bottom: 1.5rem;
}

.ta-header h1 {
  color: var(--text, #f9fafb);
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
}

.ta-header p {
  color: var(--text-secondary, #9ca3af);
  font-size: 0.9rem;
}

.ta-filters {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.ta-filter-btn {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--card-bg, #111827);
  border: 1px solid var(--border, #1f2937);
  color: var(--text-secondary, #9ca3af);
  padding: 0.45rem 0.9rem;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.ta-filter-btn:hover {
  border-color: #4F46E5;
  color: var(--text, #f9fafb);
}

.ta-filter-btn.active {
  background: #4F46E5;
  border-color: #4F46E5;
  color: white;
}

.ta-count {
  background: rgba(255, 255, 255, 0.15);
  padding: 0.1rem 0.4rem;
  border-radius: 9999px;
  font-size: 0.72rem;
}

.ta-filter-btn:not(.active) .ta-count {
  background: var(--bg-secondary, #0d1117);
}

.ta-loading {
  text-align: center;
  padding: 3rem;
  color: var(--text-secondary, #9ca3af);
}

.ta-empty {
  text-align: center;
  padding: 3rem;
  color: var(--text-secondary, #6b7280);
}

.ta-empty p {
  margin-top: 0.75rem;
}

.ta-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.ta-card {
  background: var(--card-bg, #111827);
  border: 1px solid var(--border, #1f2937);
  border-radius: 10px;
  padding: 1.25rem;
  transition: border-color 0.2s;
}

.ta-card:hover {
  border-color: #374151;
}

.ta-card.approved {
  border-left: 3px solid #10B981;
}

.ta-card.rejected {
  border-left: 3px solid #ef4444;
}

.ta-card.pending {
  border-left: 3px solid #f59e0b;
}

.ta-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.ta-user {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.ta-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4F46E5, #818CF8);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
}

.ta-user strong {
  display: block;
  color: var(--text, #f9fafb);
  font-size: 0.9rem;
}

.ta-user span {
  display: block;
  color: var(--text-secondary, #6b7280);
  font-size: 0.75rem;
}

.ta-card-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.ta-stars {
  display: flex;
  gap: 0.1rem;
}

.ta-status {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.2rem 0.55rem;
  border-radius: 9999px;
}

.ta-status.approved {
  background: rgba(16, 185, 129, 0.15);
  color: #10B981;
}

.ta-status.rejected {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

.ta-status.pending {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
}

.ta-text {
  color: var(--text-secondary, #d1d5db);
  font-size: 0.9rem;
  line-height: 1.6;
  margin-bottom: 0.75rem;
}

.ta-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ta-date {
  font-size: 0.75rem;
  color: var(--text-secondary, #6b7280);
}

.ta-actions {
  display: flex;
  gap: 0.4rem;
}

.ta-approve-btn,
.ta-reject-btn,
.ta-delete-btn {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.35rem 0.7rem;
  border-radius: 6px;
  border: none;
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.ta-approve-btn {
  background: rgba(16, 185, 129, 0.15);
  color: #10B981;
}

.ta-approve-btn:hover:not(:disabled) {
  background: rgba(16, 185, 129, 0.25);
}

.ta-reject-btn {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
}

.ta-reject-btn:hover:not(:disabled) {
  background: rgba(245, 158, 11, 0.25);
}

.ta-delete-btn {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
  padding: 0.35rem;
}

.ta-delete-btn:hover:not(:disabled) {
  background: rgba(239, 68, 68, 0.2);
}

.ta-approve-btn:disabled,
.ta-reject-btn:disabled,
.ta-delete-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.spin {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
/* ============================================================
   Painel admin — listagem de feedbacks do usuário
   ============================================================ */

.feedback-admin-page {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.feedback-admin-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0;
}

.feedback-admin-header h1 {
  color: var(--text-main);
  font-family: var(--font-title);
  font-size: clamp(1.55rem, 2vw, 2.15rem);
  letter-spacing: -0.02em;
  margin: 0 0 0.25rem;
}

.feedback-admin-header .page-subtitle {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.94rem;
}

/* ── Avisos ─────────────────────────────────────────────── */

.feedback-admin-banner {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.2);
  color: var(--error);
  padding: 0.85rem 1rem;
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
  margin-bottom: 0;
}

.feedback-admin-banner span {
  flex: 1;
  min-width: 0;
  word-break: break-word;
}

.feedback-admin-banner-close {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  padding: 0.1rem;
  display: flex;
  align-items: center;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.feedback-admin-banner-close:hover {
  opacity: 1;
}

/* ── Toolbar: filtros + busca ────────────────────────────── */

.feedback-admin-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.feedback-admin-tabs {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.feedback-admin-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-muted);
  padding: 0.45rem 0.9rem;
  border-radius: 9999px;
  font-size: 0.84rem;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.2s;
}

.feedback-admin-tab:hover {
  border-color: var(--primary);
  color: var(--text-main);
}

.feedback-admin-tab.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.feedback-admin-tab-count {
  background: rgba(255, 255, 255, 0.16);
  padding: 0.05rem 0.42rem;
  border-radius: 9999px;
  font-size: 0.72rem;
  font-weight: 600;
  min-width: 1.3rem;
  text-align: center;
}

.feedback-admin-tab:not(.active) .feedback-admin-tab-count {
  background: var(--surface-soft);
  color: var(--text-soft);
}

.feedback-admin-search {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.45rem 0.75rem;
  color: var(--text-soft);
  min-width: 260px;
  flex: 1 1 260px;
  max-width: 380px;
  transition: border-color 0.2s;
}

.feedback-admin-search:focus-within {
  border-color: var(--primary);
}

.feedback-admin-search input {
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  outline: none;
  color: var(--text-main);
  font-size: 0.88rem;
  font-family: inherit;
}

.feedback-admin-search input::placeholder {
  color: var(--text-soft);
}

.feedback-admin-search button {
  background: none;
  border: none;
  color: var(--text-soft);
  cursor: pointer;
  display: flex;
  padding: 0.1rem;
  transition: color 0.2s;
}

.feedback-admin-search button:hover {
  color: var(--text-main);
}

/* ── Estados ─────────────────────────────────────────────── */

.feedback-admin-loading,
.feedback-admin-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  padding: 3.5rem 1.5rem;
  color: var(--text-muted);
  text-align: center;
}

.feedback-admin-empty {
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
}

.feedback-admin-empty h3 {
  margin: 0;
  font-size: 1.05rem;
  color: var(--text-main);
  font-family: var(--font-title);
}

.feedback-admin-empty p {
  margin: 0;
  font-size: 0.9rem;
}

.feedback-admin-empty svg {
  opacity: 0.4;
}

.feedback-admin-empty-hint {
  margin-top: 0.35rem !important;
  font-size: 0.8rem !important;
  color: var(--text-soft) !important;
  max-width: 46ch;
  line-height: 1.55;
}

.feedback-admin-empty-hint code {
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.08rem 0.35rem;
  font-size: 0.76rem;
}

/* ── Lista ───────────────────────────────────────────────── */

.feedback-admin-list {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.feedback-admin-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--primary);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  padding: 1.15rem 1.25rem;
  transition: border-color 0.2s, transform 0.2s;
}

.feedback-admin-card:hover {
  border-color: var(--border-strong);
  border-left-color: var(--primary);
}

.feedback-admin-card.new {
  border-left-color: var(--warning);
}

.feedback-admin-card.reviewed {
  border-left-color: var(--info);
}

.feedback-admin-card.done {
  border-left-color: var(--success);
  opacity: 0.82;
}

.feedback-admin-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.feedback-admin-user {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
}

.feedback-admin-avatar {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
}

.feedback-admin-user-info {
  min-width: 0;
}

.feedback-admin-user-info strong {
  display: block;
  color: var(--text-main);
  font-size: 0.92rem;
  font-weight: 600;
}

.feedback-admin-email {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--text-muted);
  font-size: 0.78rem;
  text-decoration: none;
  transition: color 0.2s;
}

.feedback-admin-email:hover {
  color: var(--primary-light);
  text-decoration: underline;
}

.feedback-admin-head-right {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-wrap: wrap;
}

.feedback-admin-status {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.22rem 0.6rem;
  border-radius: 9999px;
  white-space: nowrap;
}

.feedback-admin-status.new {
  background: rgba(245, 158, 11, 0.15);
  color: var(--warning);
}

.feedback-admin-status.reviewed {
  background: rgba(14, 165, 233, 0.15);
  color: var(--info);
}

.feedback-admin-status.done {
  background: rgba(16, 185, 129, 0.15);
  color: var(--success);
}

.feedback-admin-date {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.3;
}

.feedback-admin-date time {
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 500;
}

.feedback-admin-date span {
  color: var(--text-soft);
  font-size: 0.72rem;
}

.feedback-admin-origin {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.7rem;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: 9999px;
  padding: 0.15rem 0.55rem;
  color: var(--text-soft);
  font-size: 0.72rem;
}

.feedback-admin-message {
  color: var(--text-main);
  font-size: 0.92rem;
  line-height: 1.65;
  margin: 0.75rem 0 1rem;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ── Ações ───────────────────────────────────────────────── */

.feedback-admin-actions {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
  border-top: 1px solid var(--border);
  padding-top: 0.85rem;
}

.feedback-admin-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  color: var(--text-muted);
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius-xs);
  font-size: 0.79rem;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s;
}

.feedback-admin-btn:hover:not(:disabled) {
  border-color: var(--border-strong);
  color: var(--text-main);
}

.feedback-admin-btn.done:hover:not(:disabled) {
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.3);
  color: var(--success);
}

.feedback-admin-btn.reply:hover {
  border-color: var(--primary);
  color: var(--primary-light);
}

.feedback-admin-btn.delete {
  margin-left: auto;
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.2);
  color: var(--error);
  padding: 0.35rem 0.5rem;
}

.feedback-admin-btn.delete:hover:not(:disabled) {
  background: rgba(239, 68, 68, 0.18);
  color: var(--error);
}

.feedback-admin-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ── Paginação ───────────────────────────────────────────── */

.feedback-admin-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 0.5rem 0 0.25rem;
  color: var(--text-muted);
  font-size: 0.84rem;
}

/* ── Responsivo ──────────────────────────────────────────── */

@media (max-width: 640px) {
  .feedback-admin-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .feedback-admin-search {
    max-width: none;
    min-width: 0;
    /* O container virou coluna: sem isso o flex-basis vira ALTURA
       e a caixa de busca estica verticalmente. */
    flex: 0 0 auto;
  }

  .feedback-admin-head-right {
    width: 100%;
    justify-content: space-between;
  }

  .feedback-admin-btn.delete {
    margin-left: 0;
  }
}
.savings-stats {
  padding: 1.5rem;
  max-width: 1400px;
  margin: 0 auto;
}

.savings-stats .admin-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
  gap: 1rem;
}

.savings-stats .admin-page-header h1 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 0.25rem;
}

.savings-stats .admin-page-header p {
  margin: 0;
  color: var(--text-muted, #94a3b8);
  font-size: 0.875rem;
}

/* Stats cards */
.savings-stats-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.savings-stats-cards .stat-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem;
  background: var(--surface, #1e1e2e);
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  border-radius: 0.75rem;
}

.stat-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.stat-card-content {
  display: flex;
  flex-direction: column;
}

.stat-card-value {
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.2;
}

.stat-card-label {
  font-size: 0.75rem;
  color: var(--text-muted, #94a3b8);
}

/* Sections */
.savings-section {
  margin-bottom: 1.5rem;
}

.savings-section h2 {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0 0 0.75rem;
  color: var(--text, #e2e8f0);
}

/* Service grid */
.savings-service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.75rem;
}

.savings-service-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  background: var(--surface, #1e1e2e);
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  border-radius: 0.5rem;
  gap: 0.5rem;
}

.savings-service-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.savings-service-name {
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.savings-service-count {
  font-size: 0.72rem;
  color: var(--text-muted, #94a3b8);
}

.savings-service-value {
  font-size: 0.9rem;
  font-weight: 700;
  color: #34d399;
  flex-shrink: 0;
}

/* Filters */
.savings-filters {
  margin-bottom: 1rem;
}

.savings-filters-panel {
  margin-top: 0.75rem;
  padding: 1rem;
  background: var(--surface, #1e1e2e);
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  border-radius: 0.5rem;
}

.savings-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: flex-end;
}

.filter-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 140px;
}

.filter-field-wide {
  flex: 1;
  min-width: 200px;
}

.filter-field label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted, #94a3b8);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.filter-field select,
.filter-field input[type="date"] {
  padding: 0.5rem 0.75rem;
  background: var(--bg, #0f0f14);
  border: 1px solid var(--border, rgba(255,255,255,0.12));
  border-radius: 0.375rem;
  color: var(--text, #e2e8f0);
  font-size: 0.85rem;
}

.filter-search {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: var(--bg, #0f0f14);
  border: 1px solid var(--border, rgba(255,255,255,0.12));
  border-radius: 0.375rem;
}

.filter-search input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: var(--text, #e2e8f0);
  font-size: 0.85rem;
}

.filter-search svg {
  color: var(--text-muted, #94a3b8);
  flex-shrink: 0;
}

/* Table */
.savings-table-wrap {
  overflow-x: auto;
  background: var(--surface, #1e1e2e);
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  border-radius: 0.75rem;
}

.savings-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.savings-table th {
  padding: 0.75rem 1rem;
  text-align: left;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted, #94a3b8);
  border-bottom: 1px solid var(--border, rgba(255,255,255,0.08));
  white-space: nowrap;
}

.savings-table td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border, rgba(255,255,255,0.05));
  vertical-align: middle;
}

.savings-table tr:last-child td {
  border-bottom: none;
}

.savings-table tr:hover {
  background: rgba(255, 255, 255, 0.02);
}

.savings-table .row-no-savings {
  opacity: 0.6;
}

.savings-user-cell {
  display: flex;
  flex-direction: column;
}

.savings-user-name {
  font-weight: 600;
}

.savings-user-email {
  font-size: 0.72rem;
  color: var(--text-muted, #94a3b8);
}

.savings-table-info {
  padding: 0.75rem 1rem;
  font-size: 0.78rem;
  color: var(--text-muted, #94a3b8);
  border-top: 1px solid var(--border, rgba(255,255,255,0.08));
  margin: 0;
}

/* Badges */
.badge {
  display: inline-block;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
}

.badge-success { background: rgba(52, 211, 153, 0.15); color: #34d399; }
.badge-warning { background: rgba(245, 158, 11, 0.15); color: #f59e0b; }
.badge-danger { background: rgba(239, 68, 68, 0.15); color: #ef4444; }
.badge-info { background: rgba(99, 102, 241, 0.15); color: #818cf8; }

/* Text helpers */
.text-success { color: #34d399; }
.text-muted { color: var(--text-muted, #94a3b8); }

/* Modal */
.savings-modal {
  max-width: 600px;
}

.savings-modal .modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border, rgba(255,255,255,0.08));
}

.savings-modal .modal-header h3 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
}

.savings-modal .modal-body {
  padding: 1.25rem;
}

.savings-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.detail-item {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.detail-label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted, #94a3b8);
}

.detail-value {
  font-size: 0.9rem;
  font-weight: 500;
}

.detail-value small {
  color: var(--text-muted, #94a3b8);
}

/* Loading & empty */
.admin-loading,
.admin-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 3rem;
  color: var(--text-muted, #94a3b8);
}

.admin-error-banner {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 0.5rem;
  color: #ef4444;
  margin-bottom: 1rem;
}

/* Buttons
   ─────────────────────────────────────────────────────────────────────────
   Estas regras são ESCOPADAS em `.savings-stats` de propósito.

   O Vite junta TODOS os CSS do app em UM arquivo só. Uma regra `.btn-outline`
   sem escopo aqui vaza para o app inteiro — e como este arquivo entra no
   bundle por último, ela vencia a `.btn-outline` global do `index.css`.

   O estrago: `color: var(--text, #e2e8f0)` com a variável `--text` não
   existindo globalmente caía no fallback #e2e8f0 (cinza claríssimo) — e o
   botão "Copiar Código PIX" do checkout ficava INVISÍVEL no cartão branco.
   ───────────────────────────────────────────────────────────────────────── */
.savings-stats .btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.875rem;
  border-radius: 0.375rem;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  border: none;
  text-decoration: none;
}

.savings-stats .btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.savings-stats .btn-outline {
  background: transparent;
  border: 1px solid var(--border, rgba(255,255,255,0.12));
  color: var(--text, #e2e8f0);
}

.savings-stats .btn-outline:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.05);
}

.savings-stats .btn-sm {
  padding: 0.35rem 0.65rem;
  font-size: 0.78rem;
}

.savings-stats .btn-icon {
  padding: 0.35rem;
  background: transparent;
  border: none;
  color: var(--text-muted, #94a3b8);
  border-radius: 0.25rem;
}

.savings-stats .btn-icon:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text, #e2e8f0);
}

.savings-stats .btn-ghost {
  background: transparent;
  border: none;
  color: var(--text-muted, #94a3b8);
  font-size: 1.2rem;
  padding: 0;
  line-height: 1;
}

.savings-stats .btn-ghost:hover {
  color: var(--text, #e2e8f0);
}

/* Modal base */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 500;
  padding: 1rem;
}

.modal-content {
  background: var(--surface, #1e1e2e);
  border: 1px solid var(--border, rgba(255,255,255,0.12));
  border-radius: 0.75rem;
  max-height: 90vh;
  overflow-y: auto;
  width: 100%;
}

.rotate-180 {
  transform: rotate(180deg);
}

/* Spin animation */
@keyframes spin {
  to { transform: rotate(360deg); }
}

.spin {
  animation: spin 1s linear infinite;
}

/* Plan badge in table */
.plan-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  background: rgba(139, 92, 246, 0.12);
  color: #a78bfa;
  font-size: 0.62rem;
  font-weight: 600;
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  margin-top: 0.15rem;
}

/* Preços oficiais por plano section */
.savings-section-desc {
  color: var(--text-muted, #94a3b8);
  font-size: 0.82rem;
  margin: -0.5rem 0 1rem;
}

.savings-plans-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.75rem;
}

.savings-plan-group {
  background: var(--surface, #161622);
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  border-radius: 10px;
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.savings-plan-group-name {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text, #e2e8f0);
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--border, rgba(255,255,255,0.08));
  margin-bottom: 0.1rem;
}

.savings-plan-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.savings-plan-name {
  font-size: 0.75rem;
  color: var(--text-secondary, #94a3b8);
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.savings-plan-price {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text, #e2e8f0);
  white-space: nowrap;
}

.savings-plan-price small {
  font-size: 0.62rem;
  font-weight: 500;
  color: var(--text-secondary, #94a3b8);
}

/* Responsive */
@media (max-width: 768px) {
  .savings-stats {
    padding: 1rem;
  }

  .savings-stats-cards {
    grid-template-columns: 1fr 1fr;
  }

  .savings-detail-grid {
    grid-template-columns: 1fr;
  }

  .filter-field {
    min-width: 120px;
  }
}
.service-plans-page {
  padding: 1.5rem;
  max-width: 1400px;
  margin: 0 auto;
}

.service-plans-page .admin-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
  gap: 1rem;
}

.service-plans-page .admin-page-header h1 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 0.25rem;
}

.service-plans-page .admin-page-header p {
  margin: 0;
  color: var(--text-muted, #94a3b8);
  font-size: 0.875rem;
}

.header-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* Stats cards */
.sp-stats-cards {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.sp-stat-card {
  background: var(--surface, #161622);
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  border-radius: 10px;
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
}

.sp-stat-value {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--text, #e2e8f0);
}

.sp-stat-value.success {
  color: #10b981;
}

.sp-stat-value.warning {
  color: #f59e0b;
}

.sp-stat-label {
  font-size: 0.65rem;
  color: var(--text-secondary, #64748b);
  text-align: center;
}

/* Filtros */
.sp-filters {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.sp-filter-search {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--surface, #161622);
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  border-radius: 8px;
  padding: 0.4rem 0.75rem;
  flex: 1;
  min-width: 200px;
  color: var(--text-secondary, #64748b);
}

.sp-filter-search input {
  background: none;
  border: none;
  outline: none;
  color: var(--text, #e2e8f0);
  font-size: 0.85rem;
  width: 100%;
}

.sp-filter-search input::placeholder {
  color: var(--text-muted, #64748b);
}

.sp-filters select {
  background: var(--surface, #161622);
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  border-radius: 8px;
  color: var(--text, #e2e8f0);
  padding: 0.4rem 0.75rem;
  font-size: 0.82rem;
  cursor: pointer;
}

.sp-filter-stale {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  color: var(--text-secondary, #64748b);
  cursor: pointer;
  white-space: nowrap;
}

.sp-filter-stale input {
  cursor: pointer;
}

/* Tabela */
.sp-table-wrap {
  background: var(--surface, #161622);
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  border-radius: 12px;
  overflow: hidden;
}

.sp-table {
  width: 100%;
  border-collapse: collapse;
}

.sp-table th {
  text-align: left;
  padding: 0.75rem 1rem;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-secondary, #64748b);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: rgba(255,255,255,0.02);
  border-bottom: 1px solid var(--border, rgba(255,255,255,0.06));
}

.sp-table td {
  padding: 0.65rem 1rem;
  font-size: 0.82rem;
  color: var(--text, #e2e8f0);
  border-bottom: 1px solid rgba(255,255,255,0.04);
  vertical-align: middle;
}

.sp-table tbody tr:last-child td {
  border-bottom: none;
}

.sp-table tbody tr:hover {
  background: rgba(255,255,255,0.02);
}

.sp-table tbody tr.inactive-row {
  opacity: 0.5;
}

.sp-service-name {
  font-weight: 600;
  display: block;
}

.sp-plan-name {
  font-weight: 600;
  display: block;
}

.sp-plan-key {
  display: block;
  font-size: 0.65rem;
  color: var(--text-secondary, #64748b);
  font-family: monospace;
}

/* Type badges */
.sp-type-badge {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 600;
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.sp-type-badge.type-recurring {
  background: rgba(52, 211, 153, 0.12);
  color: #34d399;
}

.sp-type-badge.type-promotional {
  background: rgba(245, 158, 11, 0.12);
  color: #f59e0b;
}

.sp-type-badge.type-annual {
  background: rgba(96, 165, 250, 0.12);
  color: #60a5fa;
}

.sp-type-badge.type-monthly {
  background: rgba(167, 139, 250, 0.12);
  color: #a78bfa;
}

.sp-type-badge.type-one_time {
  background: rgba(251, 113, 133, 0.12);
  color: #fb7185;
}

.sp-billing-cycle {
  color: var(--text-secondary, #64748b);
}

.sp-price-cell {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.sp-price {
  font-weight: 700;
  color: var(--text, #e2e8f0);
}

.sp-promo-price {
  font-size: 0.65rem;
  color: #f59e0b;
  text-decoration: line-through;
}

/* Verified/stale */
.sp-verified-cell {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.sp-stale-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: rgba(245, 158, 11, 0.12);
  color: #f59e0b;
  font-size: 0.65rem;
  font-weight: 600;
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
}

.sp-verified-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: rgba(52, 211, 153, 0.1);
  color: #34d399;
  font-size: 0.65rem;
  font-weight: 600;
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
}

.sp-unverified-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: rgba(100, 116, 139, 0.1);
  color: #64748b;
  font-size: 0.65rem;
  font-weight: 600;
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
}

.sp-source-link {
  color: var(--text-secondary, #64748b);
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  transition: color 0.15s;
}

.sp-source-link:hover {
  color: #60a5fa;
}

/* Status badge */
.sp-status-badge {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 600;
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
}

.sp-status-badge.active {
  background: rgba(52, 211, 153, 0.1);
  color: #34d399;
}

.sp-status-badge.inactive {
  background: rgba(100, 116, 139, 0.1);
  color: #64748b;
}

.sp-table-info {
  padding: 0.5rem 1rem;
  font-size: 0.75rem;
  color: var(--text-secondary, #64748b);
  border-top: 1px solid var(--border, rgba(255,255,255,0.06));
}

/* Modal */
.sp-modal {
  max-width: 680px;
  width: 95%;
}

.sp-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
}

.sp-form-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.sp-form-field.full {
  grid-column: 1 / -1;
}

.sp-form-field label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary, #64748b);
}

.sp-form-field input,
.sp-form-field select,
.sp-form-field textarea {
  background: var(--surface, #161622);
  border: 1px solid var(--border, rgba(255,255,255,0.12));
  border-radius: 8px;
  color: var(--text, #e2e8f0);
  padding: 0.5rem 0.75rem;
  font-size: 0.85rem;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s;
  width: 100%;
}

.sp-form-field input:focus,
.sp-form-field select:focus,
.sp-form-field textarea:focus {
  border-color: rgba(167, 139, 250, 0.5);
}

.sp-form-field input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.sp-form-field textarea {
  resize: vertical;
  min-height: 60px;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  padding-top: 1.4rem;
}

.checkbox-label input {
  width: auto;
  cursor: pointer;
}

.sp-form-alert {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  background: rgba(96, 165, 250, 0.08);
  border: 1px solid rgba(96, 165, 250, 0.2);
  border-radius: 8px;
  padding: 0.75rem;
  font-size: 0.75rem;
  color: #60a5fa;
  line-height: 1.4;
  margin-bottom: 1rem;
}

.sp-form-alert svg {
  flex-shrink: 0;
  margin-top: 1px;
}

/* Spin animation */
@keyframes spin {
  to { transform: rotate(360deg); }
}
.spin {
  animation: spin 1s linear infinite;
}

/* Responsive */
@media (max-width: 900px) {
  .sp-stats-cards {
    grid-template-columns: repeat(3, 1fr);
  }

  .sp-table {
    font-size: 0.75rem;
  }

  .sp-table th,
  .sp-table td {
    padding: 0.5rem 0.6rem;
  }

  .sp-form-grid {
    grid-template-columns: 1fr;
  }

  .sp-form-field.full {
    grid-column: auto;
  }
}

@media (max-width: 600px) {
  .service-plans-page {
    padding: 1rem;
  }

  .sp-stats-cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .sp-filters {
    flex-direction: column;
    align-items: stretch;
  }

  .sp-filter-search {
    min-width: unset;
  }
}
.expenses-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.stat-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem;
  border-radius: 0.75rem;
  border: 1px solid var(--border, #e2e8f0);
  background: var(--surface, #fff);
}

.stat-icon {
  width: 40px;
  height: 40px;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.stat-info {
  display: flex;
  flex-direction: column;
}

.stat-value {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text, #0f172a);
}

.stat-label {
  font-size: 0.78rem;
  color: var(--text-muted, #94a3b8);
}

/* Próximos Vencimentos */
.upcoming-section {
  margin-bottom: 1.5rem;
  padding: 1rem;
  border-radius: 0.75rem;
  border: 1px solid var(--border, #e2e8f0);
  background: var(--surface, #fff);
}

.upcoming-section h3 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.75rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text, #0f172a);
}

.upcoming-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.upcoming-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.65rem 0.75rem;
  border-radius: 0.5rem;
  border: 1px solid var(--border, #e2e8f0);
  background: var(--surface, #fff);
  transition: border-color 0.2s;
}

.upcoming-card:hover {
  border-color: var(--primary, #6366f1);
}

.upcoming-card.overdue {
  border-left: 3px solid #ef4444;
  background: rgba(239, 68, 68, 0.04);
}

.upcoming-card.urgent {
  border-left: 3px solid #f59e0b;
  background: rgba(245, 158, 11, 0.04);
}

.upcoming-card.warning {
  border-left: 3px solid #3b82f6;
}

.upcoming-left {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
  flex: 1;
}

.upcoming-cat-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.upcoming-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.upcoming-desc {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text, #0f172a);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.upcoming-meta {
  font-size: 0.72rem;
  color: var(--text-muted, #94a3b8);
}

.upcoming-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex-shrink: 0;
}

.upcoming-amount {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text, #0f172a);
}

.upcoming-countdown {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.15rem 0.4rem;
  border-radius: 0.25rem;
}

.upcoming-countdown.overdue {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.1);
}

.upcoming-countdown.urgent {
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.1);
}

.upcoming-countdown.warning {
  color: #3b82f6;
  background: rgba(59, 130, 246, 0.1);
}

.upcoming-countdown.normal {
  color: var(--text-muted, #94a3b8);
  background: var(--surface-alt, rgba(0, 0, 0, 0.03));
}

/* Collapsible sections */
.collapsible-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0;
  margin: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
  font: inherit;
}

.collapsible-header h3 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text, #0f172a);
}

.collapsible-arrow {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text-muted, #94a3b8);
  transition: transform 0.2s;
  transform: rotate(0deg);
}

.collapsible-arrow.open {
  transform: rotate(90deg);
}

.expenses-chart-card {
  margin-bottom: 1.5rem;
}

.expenses-chart-card h3 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1rem;
  font-size: 0.95rem;
}

.expenses-chart {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.chart-bar-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.chart-bar-label {
  width: 140px;
  font-size: 0.8rem;
  color: var(--text-muted, #94a3b8);
  text-align: right;
  flex-shrink: 0;
}

.chart-bar-track {
  flex: 1;
  height: 20px;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 4px;
  overflow: hidden;
}

.chart-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.4s ease;
}

.chart-bar-value {
  width: 100px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text, #0f172a);
}

.expenses-filters {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.filter-search {
  position: relative;
  flex: 1;
  min-width: 200px;
}

.filter-search svg {
  position: absolute;
  left: 0.7rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted, #94a3b8);
}

.filter-search input {
  width: 100%;
  padding: 0.5rem 0.75rem 0.5rem 2rem;
  border-radius: 0.5rem;
  border: 1px solid var(--border, #e2e8f0);
  background: var(--surface, #fff);
  font-family: inherit;
  font-size: 0.85rem;
  color: var(--text, #0f172a);
}

.expenses-filters select,
.expenses-filters input[type="month"] {
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  border: 1px solid var(--border, #e2e8f0);
  background: var(--surface, #fff);
  font-family: inherit;
  font-size: 0.85rem;
  color: var(--text, #0f172a);
}

.form-hint {
  font-size: 0.72rem;
  color: var(--text-muted, #94a3b8);
  font-style: italic;
}

.form-group-highlight input {
  font-size: 1.05rem;
  font-weight: 600;
}

.expenses-list {
  display: flex;
  flex-direction: column;
}

.expense-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  gap: 1rem;
}

.expense-item:last-child {
  border-bottom: none;
}

.expense-item.paid {
  opacity: 0.6;
}

.expense-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.expense-cat-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.expense-info {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.expense-desc {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text, #0f172a);
}

.expense-meta {
  font-size: 0.75rem;
  color: var(--text-muted, #94a3b8);
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.expense-right {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-shrink: 0;
}

.expense-amount {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text, #0f172a);
  white-space: nowrap;
}

.expense-status {
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

.expense-actions {
  display: flex;
  gap: 0.25rem;
}

.icon-btn {
  width: 28px;
  height: 28px;
  border-radius: 0.35rem;
  border: 1px solid var(--border, #e2e8f0);
  background: var(--surface, #fff);
  color: var(--text-muted, #94a3b8);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.8rem;
  transition: all 0.15s;
}

.icon-btn:hover {
  background: rgba(79, 70, 229, 0.06);
  color: var(--primary, #4f46e5);
  border-color: var(--primary, #4f46e5);
}

.icon-btn.delete:hover {
  background: rgba(239, 68, 68, 0.06);
  color: #ef4444;
  border-color: #ef4444;
}

.expense-inline-form {
  margin-bottom: 1.5rem;
}

.expense-inline-form h3 {
  margin: 0 0 1rem;
  font-size: 1.05rem;
}

.expense-inline-form .form-error {
  margin: 0 0 0.75rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  background: rgba(239, 68, 68, 0.08);
  color: #ef4444;
  font-size: 0.85rem;
}

.expense-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem;
}

.expense-form-grid .form-group {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.expense-form-grid label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text, #0f172a);
}

.expense-form-grid input[type="text"],
.expense-form-grid input[type="number"],
.expense-form-grid input[type="date"],
.expense-form-grid select {
  padding: 0.55rem 0.7rem;
  border-radius: 0.5rem;
  border: 1px solid var(--border, #e2e8f0);
  background: var(--surface, #fff);
  font-family: inherit;
  font-size: 0.85rem;
  color: var(--text, #0f172a);
}

.expense-form-grid .form-checkbox {
  grid-column: 1 / -1;
}

.checkbox-label {
  display: flex !important;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-size: 0.85rem;
}

.checkbox-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
}

.expense-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border, #e2e8f0);
}

.platform-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 50;
  max-height: 200px;
  overflow-y: auto;
  border-radius: 0.5rem;
  border: 1px solid var(--border, #e2e8f0);
  background: var(--surface, #fff);
  box-shadow: 0 8px 24px -4px rgba(15, 23, 42, 0.15);
}

.platform-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.5rem 0.7rem;
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.85rem;
  color: var(--text, #0f172a);
  text-align: left;
}

.platform-option:hover {
  background: rgba(79, 70, 229, 0.06);
}

.platform-icon {
  font-size: 1rem;
  width: 24px;
  text-align: center;
}

.platform-sub {
  font-size: 0.75rem;
  color: var(--text-muted, #94a3b8);
  margin-left: auto;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 600;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(6px);
}

.modal-content {
  width: min(440px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  border-radius: 1rem;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e2e8f0);
  box-shadow: 0 20px 60px -15px rgba(15, 23, 42, 0.3);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border, #e2e8f0);
}

.modal-header h2 {
  margin: 0;
  font-size: 1.1rem;
}

.modal-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: rgba(100, 116, 139, 0.1);
  color: var(--text-muted, #94a3b8);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.delete-modal-body {
  padding: 1.25rem;
}

.delete-modal-body p {
  margin: 0 0 0.75rem;
  font-size: 0.9rem;
  color: var(--text, #0f172a);
}

.delete-options {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin: 1rem 0;
}

.delete-option {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.85rem 1rem;
  border-radius: 0.65rem;
  border: 1px solid var(--border, #e2e8f0);
  background: var(--surface, #fff);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: all 0.15s;
}

.delete-option:hover {
  border-color: var(--primary, #4f46e5);
  background: rgba(79, 70, 229, 0.04);
}

.delete-option-all {
  border-color: rgba(239, 68, 68, 0.3);
}

.delete-option-all:hover {
  border-color: #ef4444;
  background: rgba(239, 68, 68, 0.04);
}

.delete-option-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text, #0f172a);
}

.delete-option-desc {
  font-size: 0.78rem;
  color: var(--text-muted, #94a3b8);
}

.delete-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 1rem;
}

.btn-danger {
  background: #ef4444;
  color: #fff;
  border: none;
}

.btn-danger:hover {
  background: #dc2626;
}

@media (max-width: 640px) {
  .expense-form-grid {
    grid-template-columns: 1fr;
  }

  .expense-item {
    flex-direction: column;
    align-items: flex-start;
  }

  .expense-right {
    width: 100%;
    justify-content: space-between;
  }

  .chart-bar-label {
    width: 80px;
    font-size: 0.72rem;
  }

  .expenses-filters {
    flex-direction: column;
  }

  .filter-search {
    min-width: 100%;
  }
}
/* Gráfico SVG do painel admin (src/components/AdminChart.jsx). */

.chart-wrap {
  position: relative;
  width: 100%;
  min-width: 0;
}

.chart-svg {
  display: block;
  width: 100%;
  overflow: visible;
}

/* Grade: só na horizontal e bem discreta. Grade vertical compete com as
   barras e suja a leitura. */
.chart-grid-line {
  stroke: var(--border);
  stroke-width: 1;
  stroke-dasharray: 2 6;
  opacity: 0.5;
}

/* Linha do zero — um degrau mais forte que a grade. */
.chart-axis-line {
  stroke: var(--border-strong);
  stroke-width: 1;
  opacity: 0.75;
}

.chart-axis-text {
  fill: var(--text-soft);
  font-size: 11px;
  font-weight: 500;
  font-family: var(--font-text);
  font-variant-numeric: tabular-nums;
}

.chart-axis-text-x {
  fill: var(--text-muted);
  font-weight: 600;
}

/* Valor escrito sobre a barra. */
.chart-value-text {
  fill: var(--text-main);
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-text);
  font-variant-numeric: tabular-nums;
  opacity: 0.85;
}

.chart-bar {
  transition: opacity 0.15s ease;
}

.chart-line {
  transition: opacity 0.15s ease;
}

.chart-dot {
  transition: r 0.12s ease;
}

.chart-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 190px;
  color: var(--text-soft);
  font-size: 0.85rem;
  text-align: center;
  padding: 1.5rem;
}

/* Tooltip: card escuro com blur, sombra e ponto colorido por série. */
.chart-tooltip {
  position: absolute;
  z-index: 5;
  transform: translateX(-50%);
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 180px;
  padding: 0.7rem 0.85rem;
  background: var(--surface-raised);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xs);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(10px);
  font-size: 0.79rem;
}

.chart-tooltip-title {
  font-weight: 700;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  padding-bottom: 0.15rem;
  border-bottom: 1px solid var(--border);
}

.chart-tooltip-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-main);
}

.chart-tooltip-row i {
  width: 9px;
  height: 9px;
  border-radius: 3px;
  flex-shrink: 0;
}

.chart-tooltip-label {
  flex: 1;
  color: var(--text-muted);
  white-space: nowrap;
}

.chart-tooltip-row strong {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

@media (max-width: 640px) {
  .chart-tooltip {
    min-width: 140px;
    font-size: 0.72rem;
  }
}
/* Evolução da Plataforma (src/pages/admin/Evolution.jsx). */

.evolution-page {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* ============================================================ *
 * Cabeçalho
 * ============================================================ */

.evo-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.evo-head-title {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-width: 0;
}

.evo-head-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  flex-shrink: 0;
  color: #fff;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
  box-shadow: 0 6px 16px rgba(79, 70, 229, 0.32);
}

.evo-head h1 {
  font-family: var(--font-title);
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--secondary);
  line-height: 1.2;
}

.evo-head p {
  color: var(--text-muted);
  font-size: 0.85rem;
  margin-top: 0.15rem;
}

.evo-head-actions {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-wrap: wrap;
}

/* Seletor de período (Dia / Semana / Mês) */

.evo-period {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.evo-period button {
  padding: 0.4rem 0.95rem;
  border-radius: 7px;
  font-size: 0.81rem;
  font-weight: 600;
  color: var(--text-muted);
  transition: background 0.18s ease, color 0.18s ease;
  white-space: nowrap;
}

.evo-period button:hover {
  color: var(--text-main);
}

.evo-period button.active {
  background: var(--primary);
  color: #fff;
  box-shadow: 0 2px 8px rgba(79, 70, 229, 0.35);
}

.evo-refresh {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.83rem;
  padding: 0.5rem 0.9rem;
}

/* ============================================================ *
 * KPIs
 * ============================================================ */

.evo-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.9rem;
}

.evo-kpi {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  padding: 1rem 1.1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.evo-kpi:hover {
  border-color: var(--border-strong);
  transform: translateY(-1px);
}

.evo-kpi-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  flex-shrink: 0;
}

.evo-kpi-icon.primary { background: var(--primary-soft); color: var(--primary-light); }
.evo-kpi-icon.tech { background: var(--tech-bg); color: var(--tech); }
.evo-kpi-icon.economy { background: var(--economy-bg); color: var(--economy); }
.evo-kpi-icon.action { background: rgba(234, 88, 12, 0.12); color: var(--action); }

.evo-kpi-body {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.evo-kpi-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.055em;
  color: var(--text-muted);
}

.evo-kpi-value {
  font-family: var(--font-title);
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--secondary);
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.evo-kpi-sub {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  font-size: 0.74rem;
  color: var(--text-soft);
}

.evo-kpi-sub em {
  font-style: normal;
  font-weight: 700;
}

.evo-kpi-sub em.up { color: var(--success); }
.evo-kpi-sub em.down { color: var(--error); }

/* ============================================================ *
 * Cartões de gráfico
 * ============================================================ */

.evo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 1rem;
}

/* Financeiro: receita numa coluna estreita, custos/lucro numa coluna maior
   (duas séries lineares precisam de mais largura para não virar uma
   escada). */
.evo-grid--finance {
  grid-template-columns: minmax(300px, 1fr) minmax(0, 1.7fr);
}

.evo-grid--finance .evo-card--wide {
  grid-column: auto;
}

.evo-card {
  --accent: var(--primary);
  --accent-soft: var(--primary-soft);

  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.25rem 1.35rem 1.1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.evo-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
}

.evo-card--primary { --accent: var(--primary); --accent-soft: var(--primary-soft); }
.evo-card--tech { --accent: var(--tech); --accent-soft: var(--tech-bg); }
.evo-card--action { --accent: var(--action); --accent-soft: rgba(234, 88, 12, 0.12); }
.evo-card--economy { --accent: var(--economy); --accent-soft: var(--economy-bg); }

/* Fio de cor no topo do cartão: identifica a métrica de relance.
   O próprio `::before` tem o raio — sem `overflow: hidden` no cartão,
   que cortaria o tooltip do gráfico na hora de passar o mouse. */
.evo-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  background: var(--accent);
  opacity: 0.85;
  pointer-events: none;
}

.evo-card--wide {
  grid-column: 1 / -1;
}

.evo-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.evo-card-title {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-width: 0;
  flex: 1 1 auto;
}

.evo-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  flex-shrink: 0;
  color: var(--accent);
  background: var(--accent-soft);
}

.evo-card-icon.finance { color: var(--economy); background: var(--economy-bg); }
.evo-card-icon.muted { color: var(--text-muted); background: var(--surface-soft); }

.evo-card-title h3 {
  font-family: var(--font-title);
  font-size: 1rem;
  font-weight: 700;
  color: var(--secondary);
  line-height: 1.3;
}

.evo-card-title p {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 0.1rem;
}

/* Número do período — o que o admin quer ver de relance. */
.evo-card-figure {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.15;
}

.evo-card-figure strong {
  font-family: var(--font-title);
  font-size: 1.55rem;
  font-weight: 800;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.evo-card-figure span {
  font-size: 0.71rem;
  color: var(--text-soft);
  font-weight: 600;
}

.evo-card-body {
  margin: 0 -0.35rem;
}

.evo-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--border);
  font-size: 0.78rem;
  color: var(--text-muted);
}

.evo-card-foot--split {
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
}

.evo-card-stat strong {
  color: var(--text-main);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.evo-card-stat strong.up { color: var(--success); }
.evo-card-stat strong.down { color: var(--error); }

.evo-delta {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  padding: 0.12rem 0.45rem;
  border-radius: 6px;
  font-size: 0.74rem;
}

.evo-delta.up {
  color: var(--success);
  background: var(--economy-bg);
}

.evo-delta.down {
  color: var(--error);
  background: rgba(239, 68, 68, 0.12);
}

/* Legenda dos gráficos */

.evo-legend {
  display: flex;
  align-items: center;
  gap: 0.6rem 0.95rem;
  flex-wrap: wrap;
  flex: 0 1 auto;
  min-width: 0;
}

.evo-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.77rem;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
}

.evo-legend-item i {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  display: inline-block;
}

/* ============================================================ *
 * Tabela
 * ============================================================ */

.evo-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.evo-table th,
.evo-table td {
  padding: 0.6rem 0.85rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

.evo-table th {
  font-size: 0.69rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.evo-table td {
  color: var(--text-main);
  font-variant-numeric: tabular-nums;
}

.evo-table tbody tr:last-child td {
  border-bottom: none;
}

.evo-table tbody tr:hover {
  background: var(--surface-soft);
}

.evo-table-total {
  font-weight: 700;
  color: var(--economy) !important;
}

.evo-note {
  font-size: 0.77rem;
  color: var(--text-soft);
  font-style: italic;
}

.evo-warning {
  border-color: var(--warning) !important;
}

/* ============================================================ *
 * Responsivo
 * ============================================================ */

@media (max-width: 1100px) {
  .evo-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .evo-grid--finance {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 900px) {
  .evo-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }
}

@media (max-width: 640px) {
  .evo-kpis {
    grid-template-columns: minmax(0, 1fr);
  }

  .evo-head h1 {
    font-size: 1.25rem;
  }

  .evo-head-actions {
    width: 100%;
    justify-content: space-between;
  }

  .evo-card {
    padding: 1.1rem 1rem 0.95rem;
  }

  .evo-card-figure strong {
    font-size: 1.3rem;
  }
}
/* ============================================================
   Painel admin — gestão de e-mail
   ============================================================ */

.email-admin-page {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.email-admin-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.email-admin-header h1 {
  color: var(--text-main);
  font-family: var(--font-title);
  font-size: clamp(1.55rem, 2vw, 2.15rem);
  letter-spacing: -0.02em;
  margin: 0 0 0.25rem;
}

.email-admin-header .page-subtitle {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.94rem;
  max-width: 60ch;
}

.email-admin-header-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* ── Avisos ─────────────────────────────────────────────── */

.email-alert {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.8rem 1rem;
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
  border: 1px solid transparent;
}

.email-alert span {
  flex: 1;
  min-width: 0;
}

.email-alert button {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  font-size: 1.15rem;
  line-height: 1;
  opacity: 0.7;
  padding: 0 0.2rem;
}

.email-alert button:hover {
  opacity: 1;
}

.email-alert.is-success {
  background: rgba(16, 185, 129, 0.1);
  border-color: rgba(16, 185, 129, 0.25);
  color: var(--success);
}

.email-alert.is-error {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.25);
  color: var(--error);
}

/* ── Cartões de número ──────────────────────────────────── */

.email-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0.85rem;
}

.email-stat-card {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1rem 1.1rem;
  background: var(--bg-card, var(--background));
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.email-stat-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  flex-shrink: 0;
}

.email-stat-icon.is-success {
  background: rgba(16, 185, 129, 0.12);
  color: var(--success);
}

.email-stat-icon.is-primary {
  background: var(--primary-soft);
  color: var(--primary-light);
}

.email-stat-icon.is-error {
  background: rgba(239, 68, 68, 0.12);
  color: var(--error);
}

.email-stat-icon.is-muted {
  background: rgba(148, 163, 184, 0.12);
  color: var(--text-muted);
}

.email-stat-card strong {
  display: block;
  color: var(--text-main);
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.2;
}

.email-stat-card span:not(.email-stat-icon) {
  display: block;
  color: var(--text-muted);
  font-size: 0.82rem;
}

/* ── Painéis ────────────────────────────────────────────── */

.email-panel {
  background: var(--bg-card, var(--background));
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.email-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.email-panel-head h2 {
  color: var(--text-main);
  font-size: 1.05rem;
  margin: 0 0 0.2rem;
}

.email-panel-head p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.85rem;
}

/* ── Interruptores ──────────────────────────────────────── */

.email-toggle-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0.6rem;
}

.email-toggle {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}

.email-toggle:hover {
  border-color: var(--border-strong);
}

.email-toggle input[type='checkbox'] {
  width: 17px;
  height: 17px;
  margin-top: 2px;
  accent-color: var(--primary);
  cursor: pointer;
  flex-shrink: 0;
}

.email-toggle-body strong {
  display: block;
  color: var(--text-main);
  font-size: 0.9rem;
  font-weight: 600;
}

.email-toggle-body em {
  display: block;
  color: var(--text-muted);
  font-size: 0.79rem;
  font-style: normal;
  line-height: 1.45;
  margin-top: 0.15rem;
}

/* ── Campos numéricos ───────────────────────────────────── */

.email-number-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0.85rem;
  padding-top: 0.35rem;
  border-top: 1px solid var(--border);
}

.email-number-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding-top: 0.85rem;
}

.email-number-field span {
  color: var(--text-main);
  font-size: 0.85rem;
  font-weight: 600;
}

.email-number-field input {
  width: 110px;
  padding: 0.5rem 0.7rem;
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  color: var(--text-main);
  font-size: 0.9rem;
}

.email-number-field input:focus {
  outline: none;
  border-color: var(--primary);
}

.email-number-field em {
  color: var(--text-muted);
  font-size: 0.78rem;
  font-style: normal;
}

/* ── Filtros ────────────────────────────────────────────── */

.email-filters {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  align-items: center;
}

.email-search {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex: 1;
  min-width: 220px;
  padding: 0.5rem 0.75rem;
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  color: var(--text-muted);
}

.email-search:focus-within {
  border-color: var(--primary);
}

.email-search input {
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  outline: none;
  color: var(--text-main);
  font-size: 0.88rem;
}

.email-filters select {
  padding: 0.5rem 0.7rem;
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  color: var(--text-main);
  font-size: 0.85rem;
  cursor: pointer;
}

/* ── Tabela ─────────────────────────────────────────────── */

.email-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.email-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.email-table th {
  text-align: left;
  padding: 0.65rem 0.85rem;
  background: rgba(148, 163, 184, 0.06);
  color: var(--text-muted);
  font-size: 0.74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.email-table td {
  padding: 0.7rem 0.85rem;
  border-top: 1px solid var(--border);
  color: var(--text);
  vertical-align: top;
}

.email-table tbody tr:hover {
  background: rgba(148, 163, 184, 0.04);
}

.email-cell-when {
  white-space: nowrap;
}

.email-cell-when strong {
  display: block;
  color: var(--text-main);
  font-size: 0.83rem;
  font-weight: 600;
}

.email-cell-when span {
  color: var(--text-soft);
  font-size: 0.74rem;
}

.email-cell-to {
  color: var(--text-muted);
  white-space: nowrap;
}

.email-cell-subject {
  max-width: 340px;
}

.email-cell-subject em.email-cell-error {
  display: block;
  color: var(--error);
  font-size: 0.75rem;
  font-style: normal;
  margin-top: 0.2rem;
}

.email-chip {
  display: inline-block;
  padding: 0.2rem 0.55rem;
  background: var(--primary-soft);
  border-radius: 999px;
  color: var(--primary-light);
  font-size: 0.74rem;
  font-weight: 600;
  white-space: nowrap;
}

.email-status {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 600;
  white-space: nowrap;
}

.email-status.is-success {
  background: rgba(16, 185, 129, 0.12);
  color: var(--success);
}

.email-status.is-error {
  background: rgba(239, 68, 68, 0.12);
  color: var(--error);
}

.email-status.is-info {
  background: var(--primary-soft);
  color: var(--primary-light);
}

.email-status.is-muted {
  background: rgba(148, 163, 184, 0.12);
  color: var(--text-muted);
}

/* ── Vazio e paginação ──────────────────────────────────── */

.email-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  padding: 2.5rem 1rem;
  color: var(--text-muted);
  text-align: center;
}

.email-empty strong {
  color: var(--text-main);
  font-size: 0.95rem;
}

.email-empty span {
  font-size: 0.85rem;
  max-width: 44ch;
}

.email-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  color: var(--text-muted);
  font-size: 0.85rem;
}

.spin {
  animation: email-spin 0.9s linear infinite;
}

@keyframes email-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 640px) {
  .email-admin-header-actions {
    width: 100%;
  }

  .email-admin-header-actions .btn {
    flex: 1;
  }

  .email-cell-subject {
    max-width: none;
  }
}
/* ═══════════════════════════════════════════════════════════════════════════
   PULSE CODING — painel do admin
   ---------------------------------------------------------------------------
   Duas telas: o catálogo importado (PulseCatalog) e o detalhe do pedido
   (PulseOrderDetail). As duas usam as variáveis do tema do painel.

   No celular vale o mesmo contrato do resto do admin (admin-responsive.css):
   tabela vira cartão, filtro não empilha, nenhum scroll aninhado.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ------------------------------------------------------------------ */
/* Cartões de resumo                                                   */
/* ------------------------------------------------------------------ */
.pulse-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.85rem;
  margin-bottom: 1rem;
}

.admin-content .pulse-stat {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.9rem 1rem;
}

.pulse-stat > svg {
  color: var(--primary);
  flex-shrink: 0;
  margin-top: 0.15rem;
}

.pulse-stat > div {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  min-width: 0;
}

.pulse-stat span {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-soft);
  font-weight: 700;
}

.pulse-stat strong {
  font-size: 1.32rem;
  line-height: 1.15;
  color: var(--text-main);
}

.pulse-stat small {
  font-size: 0.74rem;
  color: var(--text-muted);
}

.pulse-stat-warn {
  color: #b45309 !important;
  font-weight: 700;
}

.pulse-status-text {
  font-size: 1.05rem !important;
}

/* ------------------------------------------------------------------ */
/* Abas e busca                                                         */
/* ------------------------------------------------------------------ */
.pulse-tabs {
  display: flex;
  gap: 0.4rem;
  margin-bottom: 0.85rem;
}

.pulse-tab {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  border-radius: var(--radius-sm, 10px);
  padding: 0.5rem 0.9rem;
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.pulse-tab:hover {
  color: var(--text-main);
}

.pulse-tab-active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.pulse-search {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 10px);
  background: var(--surface);
  padding: 0 0.65rem;
  color: var(--text-muted);
}

.pulse-search input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  padding: 0.6rem 0;
  color: var(--text-main);
  font-size: 0.9rem;
  outline: none;
}

/* ------------------------------------------------------------------ */
/* Tabela do catálogo                                                   */
/* ------------------------------------------------------------------ */
.pulse-title {
  font-weight: 650;
  color: var(--text-main);
  font-size: 0.92rem;
}

.pulse-sub {
  display: block;
  color: var(--text-muted);
  font-size: 0.76rem;
  margin-top: 0.1rem;
}

.pulse-muted {
  color: var(--text-muted);
  font-size: 0.84rem;
}

.pulse-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border-radius: 999px;
  padding: 0.18rem 0.55rem;
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}

.pulse-tag-ok {
  background: rgba(22, 163, 74, 0.12);
  color: #15803d;
}

.pulse-tag-warn {
  background: rgba(217, 119, 6, 0.14);
  color: #b45309;
}

.pulse-tag-off {
  background: rgba(148, 163, 184, 0.16);
  color: #475569;
}

.pulse-tag-muted {
  background: rgba(100, 116, 139, 0.12);
  color: #64748b;
}

/* ------------------------------------------------------------------ */
/* Alertas                                                              */
/* ------------------------------------------------------------------ */
.admin-content .pulse-alert {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  margin-bottom: 0.9rem;
  padding: 0.85rem 1rem;
}

.pulse-alert > svg {
  flex-shrink: 0;
  margin-top: 0.1rem;
}

.pulse-alert strong {
  display: block;
  color: var(--text-main);
  font-size: 0.9rem;
  margin-bottom: 0.15rem;
}

.pulse-alert p {
  color: var(--text-muted);
  font-size: 0.84rem;
  margin: 0;
}

.pulse-alert-hint {
  margin-top: 0.35rem !important;
  font-size: 0.78rem !important;
}

.pulse-alert-error {
  border-color: rgba(220, 38, 38, 0.35);
  background: rgba(220, 38, 38, 0.07);
}

.pulse-alert-error > svg {
  color: #dc2626;
}

.pulse-alert-warn {
  border-color: rgba(217, 119, 6, 0.35);
  background: rgba(217, 119, 6, 0.08);
}

.pulse-alert-warn > svg {
  color: #b45309;
}

/* ------------------------------------------------------------------ */
/* Estado vazio                                                         */
/* ------------------------------------------------------------------ */
.pulse-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
  padding: 2rem 1.25rem;
  color: var(--text-muted);
}

.pulse-empty strong {
  color: var(--text-main);
  font-size: 0.98rem;
}

.pulse-empty p {
  max-width: 34rem;
  font-size: 0.85rem;
  margin: 0 0 0.4rem;
}

/* ------------------------------------------------------------------ */
/* Detalhe do pedido                                                    */
/* ------------------------------------------------------------------ */
.pulse-back {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.82rem;
  cursor: pointer;
  padding: 0;
  margin-bottom: 0.35rem;
}

.pulse-back:hover {
  color: var(--text-main);
}

.pulse-creds {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.pulse-cred-box {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 0.8rem 0.9rem;
  background: var(--surface);
}

.pulse-cred-box-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  font-weight: 650;
  color: var(--text-main);
  font-size: 0.9rem;
  margin-bottom: 0.55rem;
}

.pulse-cred {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0;
  min-width: 0;
}

.pulse-cred-label {
  flex: 0 0 5.5rem;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-soft);
  font-weight: 700;
}

.pulse-cred code {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 0.86rem;
  color: var(--text-main);
  background: transparent;
}

.pulse-cred-copy {
  flex-shrink: 0;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  border-radius: var(--radius-sm, 8px);
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.pulse-cred-copy:hover {
  color: var(--primary);
  border-color: var(--primary);
}

/* ------------------------------------------------------------------ */
/* Linha do tempo                                                       */
/* ------------------------------------------------------------------ */
.pulse-timeline {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.pulse-event {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
}

.pulse-event-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--primary);
  margin-top: 0.4rem;
  flex-shrink: 0;
}

.pulse-event strong {
  display: block;
  font-size: 0.86rem;
  color: var(--text-main);
}

.pulse-event p {
  margin: 0.1rem 0 0;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.pulse-event small {
  font-size: 0.73rem;
  color: var(--text-soft);
}

.pulse-links {
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}

/* ------------------------------------------------------------------ */
/* Celular: cards em grade, rótulo → valor                             */
/* ------------------------------------------------------------------ */
@media (max-width: 720px) {
  .pulse-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
  }

  .admin-content .pulse-stat {
    padding: 0.7rem 0.75rem;
    gap: 0.5rem;
  }

  .pulse-stat strong {
    font-size: 1.12rem;
  }

  .pulse-cred {
    flex-wrap: wrap;
  }

  .pulse-cred-label {
    flex: 0 0 100%;
  }
}
.pesquisa-container {
  min-height: 100vh;
  min-height: 100dvh;
  background: #0a0a1a;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow-x: hidden;
}

/* ==================== PROGRESS ==================== */

.pesquisa-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1.25rem;
  background: rgba(10, 10, 26, 0.95);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.progress-bar {
  flex: 1;
  height: 4px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #4F46E5, #818cf8);
  border-radius: 2px;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.progress-label {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 500;
  min-width: 30px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ==================== STEP CONTENT ==================== */

.pesquisa-step {
  flex: 1;
  padding: 4rem 1.25rem 6rem;
  display: flex;
  flex-direction: column;
  animation: stepSlideIn 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.pesquisa-step.backward {
  animation: stepSlideBack 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes stepSlideIn {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes stepSlideBack {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.step-content {
  max-width: 480px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.step-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.75rem;
}

.step-icon {
  color: #818cf8;
  margin-bottom: 0.25rem;
}

.step-header h1 {
  font-size: 1.5rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
  line-height: 1.3;
}

.step-description {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.5);
  margin: 0;
  line-height: 1.5;
}

.step-image {
  width: 220px;
  height: 220px;
  object-fit: cover;
  border-radius: 0.75rem;
  display: block;
  margin: 0 auto;
}

.step-text-content {
  text-align: center;
}

.step-text-content p {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.75);
  margin: 0 0 0.75rem;
  line-height: 1.6;
}

/* ==================== FORM INPUTS ==================== */

.step-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.input-group {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.input-group label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 500;
}

.input-group input {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.6rem;
  padding: 0.85rem 1rem;
  color: #ffffff;
  font-size: 1rem;
  font-family: inherit;
  transition: all 0.2s;
  -webkit-appearance: none;
}

.input-group input:focus {
  outline: none;
  border-color: #4F46E5;
  background: rgba(79, 70, 229, 0.05);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
}

.input-group input::placeholder {
  color: rgba(255, 255, 255, 0.25);
}

.input-group.error input {
  border-color: #ef4444;
  background: rgba(239, 68, 68, 0.05);
}

.error-text {
  font-size: 0.75rem;
  color: #fca5a5;
}

/* ==================== OPTIONS ==================== */

.step-options {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.option-btn {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 1rem 1.25rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.75rem;
  color: rgba(255, 255, 255, 0.8);
  font-size: 1rem;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.2s;
  text-align: left;
}

.option-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
}

.option-btn:active {
  transform: scale(0.98);
}

.option-btn.selected {
  background: rgba(79, 70, 229, 0.12);
  border-color: rgba(79, 70, 229, 0.4);
  color: #ffffff;
}

/* Radio / Checkbox */
.radio {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s;
}

.selected .radio {
  border-color: #818cf8;
}

.radio-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #818cf8;
}

.checkbox {
  width: 20px;
  height: 20px;
  border-radius: 0.3rem;
  border: 2px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s;
}

.checkbox.checked {
  background: #4F46E5;
  border-color: #4F46E5;
  color: white;
}

/* Text Input */
.text-input-step {
  width: 100%;
}

.survey-text-input {
  width: 100%;
  background: var(--input-bg, rgba(255,255,255,0.05));
  border: 2px solid var(--border);
  border-radius: 12px;
  padding: 1rem;
  color: var(--text);
  font-size: 1rem;
  font-family: inherit;
  resize: vertical;
  min-height: 100px;
  transition: border-color 0.2s;
  box-sizing: border-box;
}

.survey-text-input:focus {
  outline: none;
  border-color: #4F46E5;
}

.survey-text-input::placeholder {
  color: var(--text-secondary, #9ca3af);
}

/* Rating Stars */
.rating-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 0;
}

.rating-stars {
  display: flex;
  gap: 0.5rem;
}

.star-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.25rem;
  transition: transform 0.15s;
}

.star-btn:hover {
  transform: scale(1.15);
}

.star-btn.active {
  animation: starPop 0.2s ease;
}

@keyframes starPop {
  0% { transform: scale(1); }
  50% { transform: scale(1.25); }
  100% { transform: scale(1); }
}

.rating-label {
  color: #FBBF24;
  font-weight: 600;
  font-size: 0.95rem;
  margin: 0;
}

/* Yes/No */
.yes-no-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.yes-btn.selected {
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.4);
}

.yes-btn.selected svg {
  color: #10b981;
}

.no-btn.selected {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.4);
}

.no-btn.selected svg {
  color: #ef4444;
}

/* Platforms */
.platforms-options {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.6rem;
}

@media (max-width: 480px) {
  .platforms-options {
    grid-template-columns: repeat(3, 1fr);
  }
}

.platform-btn {
  padding: 0.65rem 0.4rem;
  flex-direction: column;
  gap: 0.35rem;
  text-align: center;
  font-size: 0.72rem;
}

.platform-icon {
  width: 40px;
  height: 40px;
  border-radius: 0;
  background: transparent !important;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.platform-icon img {
  width: 36px;
  height: 36px;
  border-radius: 4px;
  object-fit: contain;
}

.platform-icon span {
  color: white;
  font-size: 0.9rem;
  font-weight: 700;
}

/* ==================== NAVIGATION ==================== */

.pesquisa-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  padding-bottom: max(1rem, env(safe-area-inset-bottom));
  background: rgba(10, 10, 26, 0.95);
  backdrop-filter: blur(8px);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  z-index: 100;
}

.nav-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.9rem 1rem;
  border-radius: 0.75rem;
  font-size: 1rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
}

.nav-btn.back {
  flex: 0.4;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.6);
}

.nav-btn.back:hover {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
}

.nav-btn.next {
  background: #4F46E5;
  color: white;
  box-shadow: 0 4px 15px rgba(79, 70, 229, 0.3);
}

.nav-btn.next:hover {
  background: #4338ca;
  box-shadow: 0 6px 20px rgba(79, 70, 229, 0.4);
}

.nav-btn.next:active {
  transform: scale(0.98);
}

.nav-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ==================== STATES ==================== */

.pesquisa-loading,
.pesquisa-error,
.pesquisa-success {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  text-align: center;
  gap: 1rem;
}

.pesquisa-loading {
  color: rgba(255, 255, 255, 0.5);
}

.pesquisa-error {
  color: rgba(255, 255, 255, 0.5);
}

.pesquisa-error h2 {
  color: #ef4444;
  margin: 0;
}

.pesquisa-error p {
  margin: 0;
}

.pesquisa-success {
  color: white;
}

.success-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(16, 185, 129, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #10b981;
  margin-bottom: 0.5rem;
  animation: successPop 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes successPop {
  from {
    transform: scale(0.5);
    opacity: 0;
  }
  50% {
    transform: scale(1.1);
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.pesquisa-success h2 {
  font-size: 1.75rem;
  margin: 0;
}

.pesquisa-success p {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
}

.success-subtitle {
  font-size: 0.85rem !important;
  color: rgba(255, 255, 255, 0.35) !important;
}

/* ==================== SPIN ANIMATION ==================== */

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.spin {
  animation: spin 1s linear infinite;
}

/* ==================== RESPONSIVE ==================== */

@media (min-width: 768px) {
  .pesquisa-container {
    background: linear-gradient(135deg, #0a0a1a 0%, #1a1033 100%);
  }

  .step-header h1 {
    font-size: 1.75rem;
  }

  .option-btn {
    padding: 1.1rem 1.5rem;
  }
}
/* Final visual layer for app dashboards */

@keyframes dpFadeLift {
  from {
    opacity: 0;
    transform: translateY(18px);
    filter: saturate(0.92);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: saturate(1);
  }
}

@keyframes dpSoftPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.25); }
  50% { box-shadow: 0 0 0 8px rgba(79, 70, 229, 0); }
}

.fade-in,
.catalog-page,
.checkout-page,
.credentials-page,
.users-page,
.platforms-page,
.groups-page,
.group-form-page,
.subscriptions-page,
.user-detail-page,
.platform-form-page,
.billing-page,
.support-page,
.create-ticket-page,
.ticket-detail-page {
  animation: dpFadeLift 0.48s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.main-content,
.admin-page-wrap {
  scroll-behavior: smooth;
}

.page-header,
.admin-header {
  position: relative;
  margin-bottom: 1.75rem;
}

.page-header h1,
.admin-header h1 {
  color: var(--text-main);
  font-size: clamp(1.55rem, 2vw, 2.15rem);
  letter-spacing: -0.02em;
}

.page-header p,
.page-subtitle,
.admin-header p {
  color: var(--text-muted);
  font-size: 0.94rem;
}

.admin-card,
.metric-card,
.service-card,
.available-service-card,
.catalog-card,
.group-card,
.checkout-summary,
.checkout-payment,
.credential-card,
.billing-sub-card,
.billing-empty,
.empty-checkout,
.empty-state,
.access-denied,
.form-card,
.form-section,
.pf-section,
.users-table-card,
.table-responsive,
.service-section,
.stat-card,
.platform-card,
.reply-form,
.ticket-card,
.invoice-modal,
.credentials-modal,
.modal-content {
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}

.admin-card,
.metric-card,
.service-card,
.available-service-card,
.catalog-card,
.group-card,
.checkout-summary,
.checkout-payment,
.credential-card,
.billing-sub-card,
.billing-empty,
.empty-checkout,
.empty-state,
.access-denied,
.form-card,
.form-section,
.pf-section,
.users-table-card,
.table-responsive,
.service-section,
.platform-card,
.reply-form {
  border-radius: var(--radius-md);
}

.metric-card,
.service-card,
.available-service-card,
.catalog-card,
.group-card,
.platform-card,
.billing-sub-card,
.ticket-card,
.service-section,
.stat-card {
  transition:
    transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.22s ease,
    border-color 0.22s ease,
    background 0.22s ease;
}

.metric-card:hover,
.service-card:hover,
.available-service-card:hover,
.catalog-card:hover,
.group-card:hover,
.platform-card:hover,
.billing-sub-card:hover,
.ticket-card:hover,
.service-section:hover,
.stat-card:hover {
  transform: translateY(-4px);
  border-color: var(--primary);
  box-shadow: var(--shadow-md);
}

.metric-card.highlight {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 90% 5%, rgba(255,255,255,0.12), transparent 11rem),
    linear-gradient(135deg, #3730A3 0%, #4F46E5 52%, #EA580C 140%);
  box-shadow: 0 20px 40px rgba(79, 70, 229, 0.3);
}

.metric-card.highlight::after {
  content: '';
  position: absolute;
  inset: auto -20% -45% 40%;
  height: 120px;
  background: rgba(255,255,255,0.08);
  filter: blur(26px);
  transform: rotate(-12deg);
}

.metric-value,
.price-value,
.stat-card span {
  letter-spacing: 0;
}

.back-btn,
.back-btn-platform {
  padding: 0.48rem 0.72rem !important;
  border-radius: var(--radius-xs);
  background: var(--surface-soft) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-xs);
  color: var(--text-muted) !important;
}

.back-btn:hover,
.back-btn-platform:hover {
  color: var(--primary-light) !important;
  border-color: var(--primary) !important;
  transform: translateX(-2px);
}

.search-box,
.search-input-wrap,
.filter-box,
.form-group input,
.form-group select,
.form-group textarea,
.form-row input,
.form-row select,
.form-card input,
.form-card select,
.form-card textarea,
.modal-form input,
.modal-form select,
.reply-form textarea,
.color-input {
  background: var(--surface-soft) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-xs) !important;
  box-shadow: var(--shadow-xs);
  color: var(--text-main) !important;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.search-box:focus-within,
.search-input-wrap:focus-within,
.filter-box:focus-within,
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
.form-row input:focus,
.form-row select:focus,
.form-card input:focus,
.form-card select:focus,
.form-card textarea:focus,
.modal-form input:focus,
.modal-form select:focus,
.reply-form textarea:focus {
  background: var(--surface) !important;
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 4px var(--ring), var(--shadow-xs) !important;
}

table {
  border-collapse: separate !important;
  border-spacing: 0;
}

.users-table th,
.invoice-table th,
.subscriptions-table th,
.history-table th {
  background: var(--surface-soft) !important;
  color: var(--text-muted) !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.04em !important;
}

.users-table td,
.invoice-table td,
.subscriptions-table td,
.history-table td {
  background: transparent;
  transition: background 0.18s ease;
}

.users-table tbody tr:hover td,
.invoice-table tbody tr:hover td,
.subscriptions-table tbody tr:hover td,
.history-table tbody tr:hover td {
  background: var(--primary-soft) !important;
}

.status-badge,
.role-badge,
.status,
.tag,
.status-pill,
.group-tag,
.ticket-status-badge,
.cycle-check,
.group-tag-item,
.profile-badge,
.assigned-badge,
.available-badge {
  border-radius: 999px !important;
  border: 1px solid currentColor;
  border-color: color-mix(in srgb, currentColor 18%, transparent);
  letter-spacing: 0;
}

.user-avatar,
.avatar,
.admin-avatar,
.member-avatar-sm,
.member-avatar,
.service-icon,
.available-service-icon,
.catalog-icon-text,
.summary-icon,
.credential-icon,
.modal-icon,
.billing-sub-icon,
.platform-icon,
.icon-preview {
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 10px 22px rgba(0, 0, 0, 0.15);
}

.btn,
.action-btn,
.platform-btn,
.group-btn,
.filter-btn,
.cycle-option,
.payment-method,
.reply-image-btn,
.cred-action-btn,
.user-tab,
.add-profile-inline-btn,
.btn-icon {
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease,
    background 0.18s ease,
    color 0.18s ease;
}

.btn:hover,
.action-btn:hover,
.platform-btn:hover,
.group-btn:hover,
.filter-btn:hover,
.cycle-option:hover,
.payment-method:hover,
.reply-image-btn:hover,
.cred-action-btn:hover,
.user-tab:hover,
.add-profile-inline-btn:hover,
.btn-icon:hover {
  transform: translateY(-1px);
}

.btn-primary:disabled,
.btn:disabled {
  transform: none !important;
  box-shadow: none !important;
}

.catalog-header,
.available-service-header,
.platform-header,
.service-groups,
.platform-actions {
  background: var(--surface) !important;
}

.progress-bar {
  background: var(--border) !important;
}

.progress-fill {
  box-shadow: 0 0 12px color-mix(in srgb, currentColor 25%, transparent);
}

.info-banner,
.checkout-rules,
.entrance-fee-highlight,
.group-rules,
.group-warning,
.price-simulation,
.credential-meta-item,
.invoice-modal-row,
.cred-profile-card,
.profile-entry,
.credential-entry,
.toggle-label,
.member-item {
  border-radius: var(--radius-xs) !important;
  box-shadow: var(--shadow-xs);
}

.modal-overlay,
.credentials-modal-overlay,
.invoice-modal-overlay {
  background:
    radial-gradient(circle at 50% 0%, rgba(79, 70, 229, 0.15), transparent 26rem),
    rgba(0, 0, 0, 0.6) !important;
  backdrop-filter: blur(10px) saturate(1.1) !important;
}

.modal-content,
.credentials-modal,
.invoice-modal {
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-lg) !important;
  animation: dpFadeLift 0.28s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.credential-card {
  border-left: 0 !important;
  position: relative;
  overflow: hidden;
}

.credential-card::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: var(--service-color, var(--primary));
}

.credential-header {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--service-color, var(--primary)) 13%, transparent), var(--surface-soft)) !important;
}

.cycle-option.selected,
.user-tab.active,
.filter-btn.active,
.cycle-check.active {
  animation: dpSoftPulse 1.8s ease-out 1;
  box-shadow: 0 0 0 4px var(--ring), var(--shadow-xs);
}

.form-footer,
.platform-form-footer {
  left: var(--shell-offset, 0) !important;
  background: var(--surface) !important;
  backdrop-filter: blur(18px) saturate(1.08);
  border-top: 1px solid var(--border) !important;
  box-shadow: 0 -18px 46px var(--shadow-sm) !important;
}

.admin-layout {
  --shell-offset: 280px;
}

.layout-container {
  --shell-offset: 280px;
}

.loading-state {
  min-height: 240px;
}

.spin {
  color: var(--primary);
}

@media (max-width: 768px) {
  .admin-layout,
  .layout-container {
    --shell-offset: 0;
  }

  .page-header,
  .admin-header {
    margin-bottom: 1.25rem;
  }

  .modal-content,
  .credentials-modal,
  .invoice-modal {
    border-radius: var(--radius-md) !important;
  }
}
/*! tailwindcss v4.3.4 | MIT License | https://tailwindcss.com */
@layer properties {
  @supports (((-webkit-hyphens: none)) and (not (margin-trim: block))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    *, :before, :after, ::backdrop {
      --tw-translate-x: 0;
      --tw-translate-y: 0;
      --tw-translate-z: 0;
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-space-x-reverse: 0;
      --tw-border-style: solid;
      --tw-leading: initial;
      --tw-font-weight: initial;
      --tw-tracking: initial;
      --tw-ordinal: initial;
      --tw-slashed-zero: initial;
      --tw-numeric-figure: initial;
      --tw-numeric-spacing: initial;
      --tw-numeric-fraction: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-outline-style: solid;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-backdrop-blur: initial;
      --tw-backdrop-brightness: initial;
      --tw-backdrop-contrast: initial;
      --tw-backdrop-grayscale: initial;
      --tw-backdrop-hue-rotate: initial;
      --tw-backdrop-invert: initial;
      --tw-backdrop-opacity: initial;
      --tw-backdrop-saturate: initial;
      --tw-backdrop-sepia: initial;
      --tw-duration: initial;
      --tw-ease: initial;
      --tw-scale-x: 1;
      --tw-scale-y: 1;
      --tw-scale-z: 1;
      --tw-content: "";
      --tw-animation-delay: 0s;
      --tw-animation-direction: normal;
      --tw-animation-duration: initial;
      --tw-animation-fill-mode: none;
      --tw-animation-iteration-count: 1;
      --tw-enter-blur: 0;
      --tw-enter-opacity: 1;
      --tw-enter-rotate: 0;
      --tw-enter-scale: 1;
      --tw-enter-translate-x: 0;
      --tw-enter-translate-y: 0;
      --tw-exit-blur: 0;
      --tw-exit-opacity: 1;
      --tw-exit-rotate: 0;
      --tw-exit-scale: 1;
      --tw-exit-translate-x: 0;
      --tw-exit-translate-y: 0;
    }
  }
}

@layer theme {
  :root, :host {
    --color-violet-400: oklch(70.2% .183 293.541);
    --color-violet-500: oklch(60.6% .25 292.717);
    --color-black: #000;
    --color-white: #fff;
    --spacing: .25rem;
    --container-xs: 20rem;
    --container-sm: 24rem;
    --container-md: 28rem;
    --container-lg: 32rem;
    --container-7xl: 80rem;
    --text-xs: .75rem;
    --text-xs--line-height: calc(1 / .75);
    --text-sm: .875rem;
    --text-sm--line-height: calc(1.25 / .875);
    --text-base: 1rem;
    --text-base--line-height: calc(1.5 / 1);
    --text-lg: 1.125rem;
    --text-lg--line-height: calc(1.75 / 1.125);
    --text-xl: 1.25rem;
    --text-xl--line-height: calc(1.75 / 1.25);
    --text-2xl: 1.5rem;
    --text-2xl--line-height: calc(2 / 1.5);
    --text-3xl: 1.875rem;
    --text-3xl--line-height: calc(2.25 / 1.875);
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    --tracking-tight: -.025em;
    --tracking-widest: .1em;
    --leading-relaxed: 1.625;
    --radius-xs: 8px;
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 18px;
    --shadow-xs: 0 1px 2px 0 #0000000d;
    --shadow-sm: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;
    --shadow-md: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
    --shadow-lg: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
    --ease-in-out: cubic-bezier(.4, 0, .2, 1);
    --animate-spin: spin 1s linear infinite;
    --animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
    --blur-xl: 24px;
    --default-transition-duration: .15s;
    --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    --radius: .875rem;
  }
}

.\@container\/card-header {
  container: card-header / inline-size;
}

.pointer-events-none {
  pointer-events: none;
}

.visible {
  visibility: visible;
}

.sr-only {
  clip-path: inset(50%);
  white-space: nowrap;
  border-width: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  position: absolute;
  overflow: hidden;
}

.absolute {
  position: absolute;
}

.fixed {
  position: fixed;
}

.relative {
  position: relative;
}

.static {
  position: static;
}

.sticky {
  position: sticky;
}

.inset-0 {
  inset: 0;
}

.inset-x-0 {
  inset-inline: 0;
}

.inset-x-2 {
  inset-inline: calc(var(--spacing) * 2);
}

.inset-y-0 {
  inset-block: 0;
}

.top-0 {
  top: 0;
}

.top-1\/2 {
  top: 50%;
}

.top-2 {
  top: calc(var(--spacing) * 2);
}

.top-4 {
  top: calc(var(--spacing) * 4);
}

.top-\[50\%\] {
  top: 50%;
}

.right-0 {
  right: 0;
}

.right-2 {
  right: calc(var(--spacing) * 2);
}

.right-4 {
  right: calc(var(--spacing) * 4);
}

.bottom-0 {
  bottom: 0;
}

.left-0 {
  left: 0;
}

.left-1\/2 {
  left: 50%;
}

.left-2 {
  left: calc(var(--spacing) * 2);
}

.left-\[50\%\] {
  left: 50%;
}

.z-10 {
  z-index: 10;
}

.z-40 {
  z-index: 40;
}

.z-50 {
  z-index: 50;
}

.z-\[1\] {
  z-index: 1;
}

.order-123 {
  order: 123;
}

.col-start-2 {
  grid-column-start: 2;
}

.row-span-2 {
  grid-row: span 2 / span 2;
}

.row-start-1 {
  grid-row-start: 1;
}

.container {
  width: 100%;
}

@media (min-width: 40rem) {
  .container {
    max-width: 40rem;
  }
}

@media (min-width: 48rem) {
  .container {
    max-width: 48rem;
  }
}

@media (min-width: 64rem) {
  .container {
    max-width: 64rem;
  }
}

@media (min-width: 80rem) {
  .container {
    max-width: 80rem;
  }
}

@media (min-width: 96rem) {
  .container {
    max-width: 96rem;
  }
}

.-mx-1 {
  margin-inline: calc(var(--spacing) * -1);
}

.mx-auto {
  margin-inline: auto;
}

.my-1 {
  margin-block: var(--spacing);
}

.mt-0\.5 {
  margin-top: calc(var(--spacing) * .5);
}

.mt-1 {
  margin-top: var(--spacing);
}

.mt-2 {
  margin-top: calc(var(--spacing) * 2);
}

.mt-3 {
  margin-top: calc(var(--spacing) * 3);
}

.mt-4 {
  margin-top: calc(var(--spacing) * 4);
}

.mt-5 {
  margin-top: calc(var(--spacing) * 5);
}

.mt-10 {
  margin-top: calc(var(--spacing) * 10);
}

.mt-auto {
  margin-top: auto;
}

.mb-1 {
  margin-bottom: var(--spacing);
}

.mb-2 {
  margin-bottom: calc(var(--spacing) * 2);
}

.ml-auto {
  margin-left: auto;
}

.line-clamp-1 {
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  overflow: hidden;
}

.block {
  display: block;
}

.flex {
  display: flex;
}

.grid {
  display: grid;
}

.hidden {
  display: none;
}

.hidden\! {
  display: none !important;
}

.inline {
  display: inline;
}

.inline-flex {
  display: inline-flex;
}

.table {
  display: table;
}

.table-caption {
  display: table-caption;
}

.table-cell {
  display: table-cell;
}

.table-row {
  display: table-row;
}

.field-sizing-content {
  field-sizing: content;
}

.aspect-square {
  aspect-ratio: 1;
}

.size-2 {
  width: calc(var(--spacing) * 2);
  height: calc(var(--spacing) * 2);
}

.size-2\.5 {
  width: calc(var(--spacing) * 2.5);
  height: calc(var(--spacing) * 2.5);
}

.size-3\.5 {
  width: calc(var(--spacing) * 3.5);
  height: calc(var(--spacing) * 3.5);
}

.size-4 {
  width: calc(var(--spacing) * 4);
  height: calc(var(--spacing) * 4);
}

.size-5 {
  width: calc(var(--spacing) * 5);
  height: calc(var(--spacing) * 5);
}

.size-6 {
  width: calc(var(--spacing) * 6);
  height: calc(var(--spacing) * 6);
}

.size-8 {
  width: calc(var(--spacing) * 8);
  height: calc(var(--spacing) * 8);
}

.size-9 {
  width: calc(var(--spacing) * 9);
  height: calc(var(--spacing) * 9);
}

.size-10 {
  width: calc(var(--spacing) * 10);
  height: calc(var(--spacing) * 10);
}

.size-12 {
  width: calc(var(--spacing) * 12);
  height: calc(var(--spacing) * 12);
}

.size-16 {
  width: calc(var(--spacing) * 16);
  height: calc(var(--spacing) * 16);
}

.size-full {
  width: 100%;
  height: 100%;
}

.h-2 {
  height: calc(var(--spacing) * 2);
}

.h-2\.5 {
  height: calc(var(--spacing) * 2.5);
}

.h-5 {
  height: calc(var(--spacing) * 5);
}

.h-6 {
  height: calc(var(--spacing) * 6);
}

.h-8 {
  height: calc(var(--spacing) * 8);
}

.h-9 {
  height: calc(var(--spacing) * 9);
}

.h-10 {
  height: calc(var(--spacing) * 10);
}

.h-\[calc\(100\%-1px\)\] {
  height: calc(100% - 1px);
}

.h-\[var\(--radix-select-trigger-height\)\] {
  height: var(--radix-select-trigger-height);
}

.h-auto {
  height: auto;
}

.h-full {
  height: 100%;
}

.h-px {
  height: 1px;
}

.h-screen {
  height: 100vh;
}

.max-h-\(--radix-dropdown-menu-content-available-height\) {
  max-height: var(--radix-dropdown-menu-content-available-height);
}

.max-h-\(--radix-select-content-available-height\) {
  max-height: var(--radix-select-content-available-height);
}

.min-h-4 {
  min-height: calc(var(--spacing) * 4);
}

.min-h-16 {
  min-height: calc(var(--spacing) * 16);
}

.min-h-screen {
  min-height: 100vh;
}

.w-1 {
  width: var(--spacing);
}

.w-2\.5 {
  width: calc(var(--spacing) * 2.5);
}

.w-3\/4 {
  width: 75%;
}

.w-56 {
  width: calc(var(--spacing) * 56);
}

.w-72 {
  width: calc(var(--spacing) * 72);
}

.w-\[280px\] {
  width: 280px;
}

.w-\[286px\] {
  width: 286px;
}

.w-fit {
  width: fit-content;
}

.w-full {
  width: 100%;
}

.max-w-7xl {
  max-width: var(--container-7xl);
}

.max-w-\[calc\(100\%-2rem\)\] {
  max-width: calc(100% - 2rem);
}

.max-w-md {
  max-width: var(--container-md);
}

.max-w-sm {
  max-width: var(--container-sm);
}

.min-w-0 {
  min-width: 0;
}

.min-w-\[8rem\] {
  min-width: 8rem;
}

.min-w-\[var\(--radix-select-trigger-width\)\] {
  min-width: var(--radix-select-trigger-width);
}

.flex-1 {
  flex: 1;
}

.shrink-0 {
  flex-shrink: 0;
}

.caption-bottom {
  caption-side: bottom;
}

.origin-\(--radix-dropdown-menu-content-transform-origin\) {
  transform-origin: var(--radix-dropdown-menu-content-transform-origin);
}

.origin-\(--radix-popover-content-transform-origin\) {
  transform-origin: var(--radix-popover-content-transform-origin);
}

.origin-\(--radix-select-content-transform-origin\) {
  transform-origin: var(--radix-select-content-transform-origin);
}

.origin-\(--radix-tooltip-content-transform-origin\) {
  transform-origin: var(--radix-tooltip-content-transform-origin);
}

.-translate-x-1\/2 {
  --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
  translate: var(--tw-translate-x) var(--tw-translate-y);
}

.translate-x-\[-50\%\] {
  --tw-translate-x: -50%;
  translate: var(--tw-translate-x) var(--tw-translate-y);
}

.-translate-y-1\/2 {
  --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
  translate: var(--tw-translate-x) var(--tw-translate-y);
}

.translate-y-0\.5 {
  --tw-translate-y: calc(var(--spacing) * .5);
  translate: var(--tw-translate-x) var(--tw-translate-y);
}

.translate-y-\[-50\%\] {
  --tw-translate-y: -50%;
  translate: var(--tw-translate-x) var(--tw-translate-y);
}

.translate-y-\[calc\(-50\%_-_2px\)\] {
  --tw-translate-y: calc(-50% - 2px);
  translate: var(--tw-translate-x) var(--tw-translate-y);
}

.rotate-45 {
  rotate: 45deg;
}

.rotate-180 {
  rotate: 180deg;
}

.transform {
  transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
}

.transform\! {
  transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ) !important;
}

.animate-in {
  animation: enter var(--tw-animation-duration, var(--tw-duration, .15s))var(--tw-ease, ease)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none);
}

.animate-pulse {
  animation: var(--animate-pulse);
}

.animate-spin {
  animation: var(--animate-spin);
}

.cursor-default {
  cursor: default;
}

.touch-none {
  touch-action: none;
}

.resize {
  resize: both;
}

.scroll-my-1 {
  scroll-margin-block: var(--spacing);
}

.auto-rows-min {
  grid-auto-rows: min-content;
}

.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid-cols-\[0_1fr\] {
  grid-template-columns: 0 1fr;
}

.grid-cols-\[42px_1fr_42px\] {
  grid-template-columns: 42px 1fr 42px;
}

.grid-rows-\[auto_1fr\] {
  grid-template-rows: auto 1fr;
}

.grid-rows-\[auto_auto\] {
  grid-template-rows: auto auto;
}

.flex-col {
  flex-direction: column;
}

.flex-col-reverse {
  flex-direction: column-reverse;
}

.flex-wrap {
  flex-wrap: wrap;
}

.place-content-center {
  place-content: center;
}

.place-items-center {
  place-items: center;
}

.items-center {
  align-items: center;
}

.items-start {
  align-items: flex-start;
}

.justify-between {
  justify-content: space-between;
}

.justify-center {
  justify-content: center;
}

.justify-items-start {
  justify-items: start;
}

.gap-0 {
  gap: 0;
}

.gap-0\.5 {
  gap: calc(var(--spacing) * .5);
}

.gap-1 {
  gap: var(--spacing);
}

.gap-1\.5 {
  gap: calc(var(--spacing) * 1.5);
}

.gap-2 {
  gap: calc(var(--spacing) * 2);
}

.gap-2\.5 {
  gap: calc(var(--spacing) * 2.5);
}

.gap-3 {
  gap: calc(var(--spacing) * 3);
}

.gap-4 {
  gap: calc(var(--spacing) * 4);
}

.gap-6 {
  gap: calc(var(--spacing) * 6);
}

.gap-8 {
  gap: calc(var(--spacing) * 8);
}

:where(.-space-x-2 > :not(:last-child)) {
  --tw-space-x-reverse: 0;
  margin-inline-start: calc(calc(var(--spacing) * -2) * var(--tw-space-x-reverse));
  margin-inline-end: calc(calc(var(--spacing) * -2) * calc(1 - var(--tw-space-x-reverse)));
}

.gap-y-0\.5 {
  row-gap: calc(var(--spacing) * .5);
}

.self-start {
  align-self: flex-start;
}

.justify-self-end {
  justify-self: flex-end;
}

.truncate {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.overflow-hidden {
  overflow: hidden;
}

.overflow-x-auto {
  overflow-x: auto;
}

.overflow-x-hidden {
  overflow-x: hidden;
}

.overflow-y-auto {
  overflow-y: auto;
}

.rounded {
  border-radius: .875rem;
}

.rounded-2xl {
  border-radius: 26px;
}

.rounded-\[2px\] {
  border-radius: 2px;
}

.rounded-\[4px\] {
  border-radius: 4px;
}

.rounded-\[10px\] {
  border-radius: 10px;
}

.rounded-\[inherit\] {
  border-radius: inherit;
}

.rounded-full {
  border-radius: 2147483647px;
}

.rounded-lg {
  border-radius: 18px;
}

.rounded-md {
  border-radius: 14px;
}

.rounded-sm {
  border-radius: 10px;
}

.rounded-xl {
  border-radius: 22px;
}

.rounded-xs {
  border-radius: 8px;
}

.rounded-r-full {
  border-top-right-radius: 2147483647px;
  border-bottom-right-radius: 2147483647px;
}

.border {
  border-style: var(--tw-border-style);
  border-width: 1px;
}

.border-t {
  border-top-style: var(--tw-border-style);
  border-top-width: 1px;
}

.border-r {
  border-right-style: var(--tw-border-style);
  border-right-width: 1px;
}

.border-b {
  border-bottom-style: var(--tw-border-style);
  border-bottom-width: 1px;
}

.border-l {
  border-left-style: var(--tw-border-style);
  border-left-width: 1px;
}

.border-dashed {
  --tw-border-style: dashed;
  border-style: dashed;
}

.border-action\/30 {
  border-color: var(--action);
}

@supports (color: color-mix(in lab, red, red)) {
  .border-action\/30 {
    border-color: color-mix(in oklab, var(--action) 30%, transparent);
  }
}

.border-border {
  border-color: var(--border);
}

.border-border-strong {
  border-color: var(--border-strong);
}

.border-destructive\/30 {
  border-color: var(--error);
}

@supports (color: color-mix(in lab, red, red)) {
  .border-destructive\/30 {
    border-color: color-mix(in oklab, var(--error) 30%, transparent);
  }
}

.border-economy\/25 {
  border-color: var(--economy);
}

@supports (color: color-mix(in lab, red, red)) {
  .border-economy\/25 {
    border-color: color-mix(in oklab, var(--economy) 25%, transparent);
  }
}

.border-input {
  border-color: var(--border-strong);
}

.border-primary\/30 {
  border-color: var(--primary);
}

@supports (color: color-mix(in lab, red, red)) {
  .border-primary\/30 {
    border-color: color-mix(in oklab, var(--primary) 30%, transparent);
  }
}

.border-success\/30 {
  border-color: var(--success);
}

@supports (color: color-mix(in lab, red, red)) {
  .border-success\/30 {
    border-color: color-mix(in oklab, var(--success) 30%, transparent);
  }
}

.border-tech\/30 {
  border-color: var(--tech);
}

@supports (color: color-mix(in lab, red, red)) {
  .border-tech\/30 {
    border-color: color-mix(in oklab, var(--tech) 30%, transparent);
  }
}

.border-transparent {
  border-color: #0000;
}

.border-violet-400\/35 {
  border-color: #a685ff59;
}

@supports (color: color-mix(in lab, red, red)) {
  .border-violet-400\/35 {
    border-color: color-mix(in oklab, var(--color-violet-400) 35%, transparent);
  }
}

.border-warning\/30 {
  border-color: var(--warning);
}

@supports (color: color-mix(in lab, red, red)) {
  .border-warning\/30 {
    border-color: color-mix(in oklab, var(--warning) 30%, transparent);
  }
}

.border-white\/10 {
  border-color: #ffffff1a;
}

@supports (color: color-mix(in lab, red, red)) {
  .border-white\/10 {
    border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
  }
}

.border-t-transparent {
  border-top-color: #0000;
}

.border-l-transparent {
  border-left-color: #0000;
}

.bg-accent {
  background-color: var(--surface-soft);
}

.bg-action, .bg-action\/10 {
  background-color: var(--action);
}

@supports (color: color-mix(in lab, red, red)) {
  .bg-action\/10 {
    background-color: color-mix(in oklab, var(--action) 10%, transparent);
  }
}

.bg-action\/12 {
  background-color: var(--action);
}

@supports (color: color-mix(in lab, red, red)) {
  .bg-action\/12 {
    background-color: color-mix(in oklab, var(--action) 12%, transparent);
  }
}

.bg-background {
  background-color: var(--background);
}

.bg-black\/50 {
  background-color: #00000080;
}

@supports (color: color-mix(in lab, red, red)) {
  .bg-black\/50 {
    background-color: color-mix(in oklab, var(--color-black) 50%, transparent);
  }
}

.bg-border {
  background-color: var(--border);
}

.bg-card, .bg-card\/60 {
  background-color: var(--surface);
}

@supports (color: color-mix(in lab, red, red)) {
  .bg-card\/60 {
    background-color: color-mix(in oklab, var(--surface) 60%, transparent);
  }
}

.bg-card\/90 {
  background-color: var(--surface);
}

@supports (color: color-mix(in lab, red, red)) {
  .bg-card\/90 {
    background-color: color-mix(in oklab, var(--surface) 90%, transparent);
  }
}

.bg-destructive, .bg-destructive\/10 {
  background-color: var(--error);
}

@supports (color: color-mix(in lab, red, red)) {
  .bg-destructive\/10 {
    background-color: color-mix(in oklab, var(--error) 10%, transparent);
  }
}

.bg-destructive\/12 {
  background-color: var(--error);
}

@supports (color: color-mix(in lab, red, red)) {
  .bg-destructive\/12 {
    background-color: color-mix(in oklab, var(--error) 12%, transparent);
  }
}

.bg-economy, .bg-economy\/10 {
  background-color: var(--economy);
}

@supports (color: color-mix(in lab, red, red)) {
  .bg-economy\/10 {
    background-color: color-mix(in oklab, var(--economy) 10%, transparent);
  }
}

.bg-foreground {
  background-color: var(--text-main);
}

.bg-muted, .bg-muted\/50 {
  background-color: var(--surface-soft);
}

@supports (color: color-mix(in lab, red, red)) {
  .bg-muted\/50 {
    background-color: color-mix(in oklab, var(--surface-soft) 50%, transparent);
  }
}

.bg-popover {
  background-color: var(--surface);
}

.bg-primary, .bg-primary\/10 {
  background-color: var(--primary);
}

@supports (color: color-mix(in lab, red, red)) {
  .bg-primary\/10 {
    background-color: color-mix(in oklab, var(--primary) 10%, transparent);
  }
}

.bg-primary\/12 {
  background-color: var(--primary);
}

@supports (color: color-mix(in lab, red, red)) {
  .bg-primary\/12 {
    background-color: color-mix(in oklab, var(--primary) 12%, transparent);
  }
}

.bg-primary\/15 {
  background-color: var(--primary);
}

@supports (color: color-mix(in lab, red, red)) {
  .bg-primary\/15 {
    background-color: color-mix(in oklab, var(--primary) 15%, transparent);
  }
}

.bg-primary\/20 {
  background-color: var(--primary);
}

@supports (color: color-mix(in lab, red, red)) {
  .bg-primary\/20 {
    background-color: color-mix(in oklab, var(--primary) 20%, transparent);
  }
}

.bg-secondary {
  background-color: var(--surface-soft);
}

.bg-success, .bg-success\/10 {
  background-color: var(--success);
}

@supports (color: color-mix(in lab, red, red)) {
  .bg-success\/10 {
    background-color: color-mix(in oklab, var(--success) 10%, transparent);
  }
}

.bg-success\/12 {
  background-color: var(--success);
}

@supports (color: color-mix(in lab, red, red)) {
  .bg-success\/12 {
    background-color: color-mix(in oklab, var(--success) 12%, transparent);
  }
}

.bg-tech, .bg-tech\/10 {
  background-color: var(--tech);
}

@supports (color: color-mix(in lab, red, red)) {
  .bg-tech\/10 {
    background-color: color-mix(in oklab, var(--tech) 10%, transparent);
  }
}

.bg-tech\/12 {
  background-color: var(--tech);
}

@supports (color: color-mix(in lab, red, red)) {
  .bg-tech\/12 {
    background-color: color-mix(in oklab, var(--tech) 12%, transparent);
  }
}

.bg-transparent {
  background-color: #0000;
}

.bg-violet-500\/12 {
  background-color: #8d54ff1f;
}

@supports (color: color-mix(in lab, red, red)) {
  .bg-violet-500\/12 {
    background-color: color-mix(in oklab, var(--color-violet-500) 12%, transparent);
  }
}

.bg-warning, .bg-warning\/10 {
  background-color: var(--warning);
}

@supports (color: color-mix(in lab, red, red)) {
  .bg-warning\/10 {
    background-color: color-mix(in oklab, var(--warning) 10%, transparent);
  }
}

.bg-warning\/12 {
  background-color: var(--warning);
}

@supports (color: color-mix(in lab, red, red)) {
  .bg-warning\/12 {
    background-color: color-mix(in oklab, var(--warning) 12%, transparent);
  }
}

.bg-white\/\[0\.02\] {
  background-color: #ffffff05;
}

@supports (color: color-mix(in lab, red, red)) {
  .bg-white\/\[0\.02\] {
    background-color: color-mix(in oklab, var(--color-white) 2%, transparent);
  }
}

.fill-current {
  fill: currentColor;
}

.fill-foreground {
  fill: var(--text-main);
}

.fill-primary {
  fill: var(--primary);
}

.object-contain {
  object-fit: contain;
}

.object-cover {
  object-fit: cover;
}

.p-0 {
  padding: 0;
}

.p-1 {
  padding: var(--spacing);
}

.p-2 {
  padding: calc(var(--spacing) * 2);
}

.p-3 {
  padding: calc(var(--spacing) * 3);
}

.p-4 {
  padding: calc(var(--spacing) * 4);
}

.p-5 {
  padding: calc(var(--spacing) * 5);
}

.p-6 {
  padding: calc(var(--spacing) * 6);
}

.p-\[3px\] {
  padding: 3px;
}

.p-px {
  padding: 1px;
}

.px-1\.5 {
  padding-inline: calc(var(--spacing) * 1.5);
}

.px-2 {
  padding-inline: calc(var(--spacing) * 2);
}

.px-3 {
  padding-inline: calc(var(--spacing) * 3);
}

.px-4 {
  padding-inline: calc(var(--spacing) * 4);
}

.px-5 {
  padding-inline: calc(var(--spacing) * 5);
}

.px-6 {
  padding-inline: calc(var(--spacing) * 6);
}

.py-0\.5 {
  padding-block: calc(var(--spacing) * .5);
}

.py-1 {
  padding-block: var(--spacing);
}

.py-1\.5 {
  padding-block: calc(var(--spacing) * 1.5);
}

.py-2 {
  padding-block: calc(var(--spacing) * 2);
}

.py-2\.5 {
  padding-block: calc(var(--spacing) * 2.5);
}

.py-3 {
  padding-block: calc(var(--spacing) * 3);
}

.py-4 {
  padding-block: calc(var(--spacing) * 4);
}

.py-5 {
  padding-block: calc(var(--spacing) * 5);
}

.py-6 {
  padding-block: calc(var(--spacing) * 6);
}

.py-14 {
  padding-block: calc(var(--spacing) * 14);
}

.pt-0 {
  padding-top: 0;
}

.pt-6 {
  padding-top: calc(var(--spacing) * 6);
}

.pt-20 {
  padding-top: calc(var(--spacing) * 20);
}

.pr-2 {
  padding-right: calc(var(--spacing) * 2);
}

.pr-8 {
  padding-right: calc(var(--spacing) * 8);
}

.pb-4 {
  padding-bottom: calc(var(--spacing) * 4);
}

.pb-7 {
  padding-bottom: calc(var(--spacing) * 7);
}

.pb-10 {
  padding-bottom: calc(var(--spacing) * 10);
}

.pl-2 {
  padding-left: calc(var(--spacing) * 2);
}

.pl-8 {
  padding-left: calc(var(--spacing) * 8);
}

.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.align-middle {
  vertical-align: middle;
}

.text-2xl {
  font-size: var(--text-2xl);
  line-height: var(--tw-leading, var(--text-2xl--line-height));
}

.text-3xl {
  font-size: var(--text-3xl);
  line-height: var(--tw-leading, var(--text-3xl--line-height));
}

.text-base {
  font-size: var(--text-base);
  line-height: var(--tw-leading, var(--text-base--line-height));
}

.text-lg {
  font-size: var(--text-lg);
  line-height: var(--tw-leading, var(--text-lg--line-height));
}

.text-sm {
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
}

.text-xl {
  font-size: var(--text-xl);
  line-height: var(--tw-leading, var(--text-xl--line-height));
}

.text-xs {
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
}

.text-\[0\.95rem\] {
  font-size: .95rem;
}

.leading-none {
  --tw-leading: 1;
  line-height: 1;
}

.leading-relaxed {
  --tw-leading: var(--leading-relaxed);
  line-height: var(--leading-relaxed);
}

.font-bold {
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
}

.font-extrabold {
  --tw-font-weight: var(--font-weight-extrabold);
  font-weight: var(--font-weight-extrabold);
}

.font-medium {
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
}

.font-semibold {
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
}

.tracking-tight {
  --tw-tracking: var(--tracking-tight);
  letter-spacing: var(--tracking-tight);
}

.tracking-widest {
  --tw-tracking: var(--tracking-widest);
  letter-spacing: var(--tracking-widest);
}

.text-balance {
  text-wrap: balance;
}

.break-all {
  word-break: break-all;
}

.whitespace-nowrap {
  white-space: nowrap;
}

.text-action {
  color: var(--action);
}

.text-background {
  color: var(--background);
}

.text-card-foreground {
  color: var(--text-main);
}

.text-current {
  color: currentColor;
}

.text-destructive {
  color: var(--error);
}

.text-economy {
  color: var(--economy);
}

.text-foreground, .text-foreground\/60 {
  color: var(--text-main);
}

@supports (color: color-mix(in lab, red, red)) {
  .text-foreground\/60 {
    color: color-mix(in oklab, var(--text-main) 60%, transparent);
  }
}

.text-muted {
  color: var(--surface-soft);
}

.text-muted-foreground {
  color: var(--text-muted);
}

.text-popover-foreground {
  color: var(--text-main);
}

.text-primary {
  color: var(--primary);
}

.text-primary-foreground {
  color: #fff;
}

.text-secondary-foreground {
  color: var(--text-main);
}

.text-success {
  color: var(--success);
}

.text-tech {
  color: var(--tech);
}

.text-warning {
  color: var(--warning);
}

.text-white {
  color: var(--color-white);
}

.text-white\/45 {
  color: #ffffff73;
}

@supports (color: color-mix(in lab, red, red)) {
  .text-white\/45 {
    color: color-mix(in oklab, var(--color-white) 45%, transparent);
  }
}

.capitalize {
  text-transform: capitalize;
}

.italic {
  font-style: italic;
}

.tabular-nums {
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal, ) var(--tw-slashed-zero, ) var(--tw-numeric-figure, ) var(--tw-numeric-spacing, ) var(--tw-numeric-fraction, );
}

.line-through {
  text-decoration-line: line-through;
}

.underline {
  text-decoration-line: underline;
}

.underline-offset-4 {
  text-underline-offset: 4px;
}

.opacity-50 {
  opacity: .5;
}

.opacity-70 {
  opacity: .7;
}

.shadow {
  --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}

.shadow-lg {
  --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, #0000001a), 0 4px 6px -4px var(--tw-shadow-color, #0000001a);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}

.shadow-md {
  --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, #0000001a), 0 2px 4px -2px var(--tw-shadow-color, #0000001a);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}

.shadow-sm {
  --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}

.shadow-xs {
  --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, #0000000d);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}

.ring-0 {
  --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}

.ring-2 {
  --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}

.ring-background {
  --tw-ring-color: var(--background);
}

.ring-offset-background {
  --tw-ring-offset-color: var(--background);
}

.outline-hidden {
  --tw-outline-style: none;
  outline-style: none;
}

@media (forced-colors: active) {
  .outline-hidden {
    outline-offset: 2px;
    outline: 2px solid #0000;
  }
}

.outline {
  outline-style: var(--tw-outline-style);
  outline-width: 1px;
}

.blur {
  --tw-blur: blur(8px);
  filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
}

.invert {
  --tw-invert: invert(100%);
  filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
}

.filter {
  filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
}

.backdrop-blur-xl {
  --tw-backdrop-blur: blur(var(--blur-xl));
  -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
  backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
}

.transition {
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
}

.transition-\[color\,box-shadow\] {
  transition-property: color, box-shadow;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
}

.transition-all {
  transition-property: all;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
}

.transition-colors {
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
}

.transition-opacity {
  transition-property: opacity;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
}

.transition-shadow {
  transition-property: box-shadow;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
}

.transition-transform {
  transition-property: transform, translate, scale, rotate;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
}

.transition-none {
  transition-property: none;
}

.duration-150 {
  --tw-duration: .15s;
  transition-duration: .15s;
}

.duration-200 {
  --tw-duration: .2s;
  transition-duration: .2s;
}

.ease-in-out {
  --tw-ease: var(--ease-in-out);
  transition-timing-function: var(--ease-in-out);
}

.fade-in-0 {
  --tw-enter-opacity: 0;
}

.outline-none {
  --tw-outline-style: none;
  outline-style: none;
}

.select-none {
  -webkit-user-select: none;
  user-select: none;
}

.zoom-in-95 {
  --tw-enter-scale: .95;
}

.fade-in {
  --tw-enter-opacity: 0;
}

.paused {
  animation-play-state: paused;
}

.running {
  animation-play-state: running;
}

@media (hover: hover) {
  :is(:where(.group):hover .group-hover\:scale-105) {
    --tw-scale-x: 105%;
    --tw-scale-y: 105%;
    --tw-scale-z: 105%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }
}

:is(:where(.group\/avatar-group):has([data-size="lg"]) .group-has-data-\[size\=lg\]\/avatar-group\:size-10) {
  width: calc(var(--spacing) * 10);
  height: calc(var(--spacing) * 10);
}

:is(:where(.group\/avatar-group):has([data-size="sm"]) .group-has-data-\[size\=sm\]\/avatar-group\:size-6) {
  width: calc(var(--spacing) * 6);
  height: calc(var(--spacing) * 6);
}

:is(:where(.group)[data-disabled="true"] .group-data-\[disabled\=true\]\:pointer-events-none) {
  pointer-events: none;
}

:is(:where(.group)[data-disabled="true"] .group-data-\[disabled\=true\]\:opacity-50) {
  opacity: .5;
}

:is(:where(.group\/tabs)[data-orientation="horizontal"] .group-data-\[orientation\=horizontal\]\/tabs\:h-9) {
  height: calc(var(--spacing) * 9);
}

:is(:where(.group\/tabs)[data-orientation="vertical"] .group-data-\[orientation\=vertical\]\/tabs\:h-fit) {
  height: fit-content;
}

:is(:where(.group\/tabs)[data-orientation="vertical"] .group-data-\[orientation\=vertical\]\/tabs\:w-full) {
  width: 100%;
}

:is(:where(.group\/tabs)[data-orientation="vertical"] .group-data-\[orientation\=vertical\]\/tabs\:flex-col) {
  flex-direction: column;
}

:is(:where(.group\/tabs)[data-orientation="vertical"] .group-data-\[orientation\=vertical\]\/tabs\:justify-start) {
  justify-content: flex-start;
}

:is(:where(.group\/avatar)[data-size="default"] .group-data-\[size\=default\]\/avatar\:size-2\.5) {
  width: calc(var(--spacing) * 2.5);
  height: calc(var(--spacing) * 2.5);
}

:is(:where(.group\/switch)[data-size="default"] .group-data-\[size\=default\]\/switch\:size-4) {
  width: calc(var(--spacing) * 4);
  height: calc(var(--spacing) * 4);
}

:is(:where(.group\/avatar)[data-size="lg"] .group-data-\[size\=lg\]\/avatar\:size-3) {
  width: calc(var(--spacing) * 3);
  height: calc(var(--spacing) * 3);
}

:is(:where(.group\/alert-dialog-content)[data-size="sm"] .group-data-\[size\=sm\]\/alert-dialog-content\:grid) {
  display: grid;
}

:is(:where(.group\/alert-dialog-content)[data-size="sm"] .group-data-\[size\=sm\]\/alert-dialog-content\:grid-cols-2) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

:is(:where(.group\/avatar)[data-size="sm"] .group-data-\[size\=sm\]\/avatar\:size-2) {
  width: calc(var(--spacing) * 2);
  height: calc(var(--spacing) * 2);
}

:is(:where(.group\/avatar)[data-size="sm"] .group-data-\[size\=sm\]\/avatar\:text-xs) {
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
}

:is(:where(.group\/switch)[data-size="sm"] .group-data-\[size\=sm\]\/switch\:size-3) {
  width: calc(var(--spacing) * 3);
  height: calc(var(--spacing) * 3);
}

:is(:where(.group\/tabs-list)[data-variant="line"] .group-data-\[variant\=line\]\/tabs-list\:bg-transparent) {
  background-color: #0000;
}

:is(:where(.peer):disabled ~ .peer-disabled\:cursor-not-allowed) {
  cursor: not-allowed;
}

:is(:where(.peer):disabled ~ .peer-disabled\:opacity-50) {
  opacity: .5;
}

.selection\:bg-primary ::selection {
  background-color: var(--primary);
}

.selection\:bg-primary::selection {
  background-color: var(--primary);
}

.selection\:text-primary-foreground ::selection {
  color: #fff;
}

.selection\:text-primary-foreground::selection {
  color: #fff;
}

.file\:inline-flex::file-selector-button {
  display: inline-flex;
}

.file\:h-7::file-selector-button {
  height: calc(var(--spacing) * 7);
}

.file\:border-0::file-selector-button {
  border-style: var(--tw-border-style);
  border-width: 0;
}

.file\:bg-transparent::file-selector-button {
  background-color: #0000;
}

.file\:text-sm::file-selector-button {
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
}

.file\:font-medium::file-selector-button {
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
}

.file\:text-foreground::file-selector-button {
  color: var(--text-main);
}

.placeholder\:text-muted-foreground::placeholder {
  color: var(--text-muted);
}

.after\:absolute:after {
  content: var(--tw-content);
  position: absolute;
}

.after\:bg-foreground:after {
  content: var(--tw-content);
  background-color: var(--text-main);
}

.after\:opacity-0:after {
  content: var(--tw-content);
  opacity: 0;
}

.after\:transition-opacity:after {
  content: var(--tw-content);
  transition-property: opacity;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
}

:is(:where(.group\/tabs)[data-orientation="horizontal"] .group-data-\[orientation\=horizontal\]\/tabs\:after\:inset-x-0):after {
  content: var(--tw-content);
  inset-inline: 0;
}

:is(:where(.group\/tabs)[data-orientation="horizontal"] .group-data-\[orientation\=horizontal\]\/tabs\:after\:bottom-\[-5px\]):after {
  content: var(--tw-content);
  bottom: -5px;
}

:is(:where(.group\/tabs)[data-orientation="horizontal"] .group-data-\[orientation\=horizontal\]\/tabs\:after\:h-0\.5):after {
  content: var(--tw-content);
  height: calc(var(--spacing) * .5);
}

:is(:where(.group\/tabs)[data-orientation="vertical"] .group-data-\[orientation\=vertical\]\/tabs\:after\:inset-y-0):after {
  content: var(--tw-content);
  inset-block: 0;
}

:is(:where(.group\/tabs)[data-orientation="vertical"] .group-data-\[orientation\=vertical\]\/tabs\:after\:-right-1):after {
  content: var(--tw-content);
  right: calc(var(--spacing) * -1);
}

:is(:where(.group\/tabs)[data-orientation="vertical"] .group-data-\[orientation\=vertical\]\/tabs\:after\:w-0\.5):after {
  content: var(--tw-content);
  width: calc(var(--spacing) * .5);
}

.last\:border-b-0:last-child {
  border-bottom-style: var(--tw-border-style);
  border-bottom-width: 0;
}

@media (hover: hover) {
  .hover\:-translate-y-0\.5:hover {
    --tw-translate-y: calc(var(--spacing) * -.5);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .hover\:border-\[\#818cf8\]:hover {
    border-color: #818cf8;
  }

  .hover\:border-primary:hover {
    border-color: var(--primary);
  }

  .hover\:border-violet-400\/60:hover {
    border-color: #a685ff99;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .hover\:border-violet-400\/60:hover {
      border-color: color-mix(in oklab, var(--color-violet-400) 60%, transparent);
    }
  }

  .hover\:bg-accent:hover {
    background-color: var(--surface-soft);
  }

  .hover\:bg-destructive\/90:hover {
    background-color: var(--error);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .hover\:bg-destructive\/90:hover {
      background-color: color-mix(in oklab, var(--error) 90%, transparent);
    }
  }

  .hover\:bg-economy\/15:hover {
    background-color: var(--economy);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .hover\:bg-economy\/15:hover {
      background-color: color-mix(in oklab, var(--economy) 15%, transparent);
    }
  }

  .hover\:bg-muted\/50:hover {
    background-color: var(--surface-soft);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .hover\:bg-muted\/50:hover {
      background-color: color-mix(in oklab, var(--surface-soft) 50%, transparent);
    }
  }

  .hover\:bg-primary\/10:hover {
    background-color: var(--primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .hover\:bg-primary\/10:hover {
      background-color: color-mix(in oklab, var(--primary) 10%, transparent);
    }
  }

  .hover\:bg-primary\/90:hover {
    background-color: var(--primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .hover\:bg-primary\/90:hover {
      background-color: color-mix(in oklab, var(--primary) 90%, transparent);
    }
  }

  .hover\:bg-secondary\/80:hover {
    background-color: var(--surface-soft);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .hover\:bg-secondary\/80:hover {
      background-color: color-mix(in oklab, var(--surface-soft) 80%, transparent);
    }
  }

  .hover\:bg-violet-500\/22:hover {
    background-color: #8d54ff38;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .hover\:bg-violet-500\/22:hover {
      background-color: color-mix(in oklab, var(--color-violet-500) 22%, transparent);
    }
  }

  .hover\:bg-white\/5:hover {
    background-color: #ffffff0d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .hover\:bg-white\/5:hover {
      background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
    }
  }

  .hover\:text-\[\#818cf8\]:hover {
    color: #818cf8;
  }

  .hover\:text-accent-foreground:hover, .hover\:text-foreground:hover {
    color: var(--text-main);
  }

  .hover\:text-primary:hover {
    color: var(--primary);
  }

  .hover\:text-white:hover {
    color: var(--color-white);
  }

  .hover\:underline:hover {
    text-decoration-line: underline;
  }

  .hover\:opacity-100:hover {
    opacity: 1;
  }

  .hover\:shadow-md:hover {
    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, #0000001a), 0 2px 4px -2px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
}

.focus\:bg-accent:focus {
  background-color: var(--surface-soft);
}

.focus\:text-accent-foreground:focus {
  color: var(--text-main);
}

.focus\:ring-2:focus {
  --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}

.focus\:ring-ring:focus {
  --tw-ring-color: var(--primary);
}

.focus\:ring-offset-2:focus {
  --tw-ring-offset-width: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
}

.focus\:outline-hidden:focus {
  --tw-outline-style: none;
  outline-style: none;
}

@media (forced-colors: active) {
  .focus\:outline-hidden:focus {
    outline-offset: 2px;
    outline: 2px solid #0000;
  }
}

.focus-visible\:border-ring:focus-visible {
  border-color: var(--primary);
}

.focus-visible\:ring-\[3px\]:focus-visible {
  --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}

.focus-visible\:ring-destructive\/20:focus-visible {
  --tw-ring-color: var(--error);
}

@supports (color: color-mix(in lab, red, red)) {
  .focus-visible\:ring-destructive\/20:focus-visible {
    --tw-ring-color: color-mix(in oklab, var(--error) 20%, transparent);
  }
}

.focus-visible\:ring-ring\/50:focus-visible {
  --tw-ring-color: var(--primary);
}

@supports (color: color-mix(in lab, red, red)) {
  .focus-visible\:ring-ring\/50:focus-visible {
    --tw-ring-color: color-mix(in oklab, var(--primary) 50%, transparent);
  }
}

.focus-visible\:outline-1:focus-visible {
  outline-style: var(--tw-outline-style);
  outline-width: 1px;
}

.focus-visible\:outline-ring:focus-visible {
  outline-color: var(--primary);
}

.disabled\:pointer-events-none:disabled {
  pointer-events: none;
}

.disabled\:cursor-not-allowed:disabled {
  cursor: not-allowed;
}

.disabled\:opacity-50:disabled {
  opacity: .5;
}

.has-aria-expanded\:bg-muted\/50:has([aria-expanded="true"]) {
  background-color: var(--surface-soft);
}

@supports (color: color-mix(in lab, red, red)) {
  .has-aria-expanded\:bg-muted\/50:has([aria-expanded="true"]) {
    background-color: color-mix(in oklab, var(--surface-soft) 50%, transparent);
  }
}

.has-data-\[slot\=alert-dialog-media\]\:grid-rows-\[auto_auto_1fr\]:has([data-slot="alert-dialog-media"]) {
  grid-template-rows: auto auto 1fr;
}

.has-data-\[slot\=alert-dialog-media\]\:gap-x-6:has([data-slot="alert-dialog-media"]) {
  column-gap: calc(var(--spacing) * 6);
}

.has-data-\[slot\=card-action\]\:grid-cols-\[1fr_auto\]:has([data-slot="card-action"]) {
  grid-template-columns: 1fr auto;
}

.has-\[\>svg\]\:grid-cols-\[calc\(var\(--spacing\)\*4\)_1fr\]:has( > svg) {
  grid-template-columns: calc(var(--spacing) * 4) 1fr;
}

.has-\[\>svg\]\:gap-x-3:has( > svg) {
  column-gap: calc(var(--spacing) * 3);
}

.has-\[\>svg\]\:px-1\.5:has( > svg) {
  padding-inline: calc(var(--spacing) * 1.5);
}

.has-\[\>svg\]\:px-2\.5:has( > svg) {
  padding-inline: calc(var(--spacing) * 2.5);
}

.has-\[\>svg\]\:px-3:has( > svg) {
  padding-inline: calc(var(--spacing) * 3);
}

.has-\[\>svg\]\:px-4:has( > svg) {
  padding-inline: calc(var(--spacing) * 4);
}

.aria-invalid\:border-destructive[aria-invalid="true"] {
  border-color: var(--error);
}

.aria-invalid\:ring-destructive\/20[aria-invalid="true"] {
  --tw-ring-color: var(--error);
}

@supports (color: color-mix(in lab, red, red)) {
  .aria-invalid\:ring-destructive\/20[aria-invalid="true"] {
    --tw-ring-color: color-mix(in oklab, var(--error) 20%, transparent);
  }
}

.data-\[disabled\]\:pointer-events-none[data-disabled] {
  pointer-events: none;
}

.data-\[disabled\]\:opacity-50[data-disabled] {
  opacity: .5;
}

.data-\[inset\]\:pl-8[data-inset] {
  padding-left: calc(var(--spacing) * 8);
}

.data-\[orientation\=horizontal\]\:h-px[data-orientation="horizontal"] {
  height: 1px;
}

.data-\[orientation\=horizontal\]\:w-full[data-orientation="horizontal"] {
  width: 100%;
}

.data-\[orientation\=horizontal\]\:flex-col[data-orientation="horizontal"] {
  flex-direction: column;
}

.data-\[orientation\=vertical\]\:h-full[data-orientation="vertical"] {
  height: 100%;
}

.data-\[orientation\=vertical\]\:w-px[data-orientation="vertical"] {
  width: 1px;
}

.data-\[placeholder\]\:text-muted-foreground[data-placeholder] {
  color: var(--text-muted);
}

.data-\[side\=bottom\]\:translate-y-1[data-side="bottom"] {
  --tw-translate-y: var(--spacing);
  translate: var(--tw-translate-x) var(--tw-translate-y);
}

.data-\[side\=bottom\]\:slide-in-from-top-2[data-side="bottom"] {
  --tw-enter-translate-y: calc(2*var(--spacing)*-1);
}

.data-\[side\=left\]\:-translate-x-1[data-side="left"] {
  --tw-translate-x: calc(var(--spacing) * -1);
  translate: var(--tw-translate-x) var(--tw-translate-y);
}

.data-\[side\=left\]\:slide-in-from-right-2[data-side="left"] {
  --tw-enter-translate-x: calc(2*var(--spacing));
}

.data-\[side\=right\]\:translate-x-1[data-side="right"] {
  --tw-translate-x: var(--spacing);
  translate: var(--tw-translate-x) var(--tw-translate-y);
}

.data-\[side\=right\]\:slide-in-from-left-2[data-side="right"] {
  --tw-enter-translate-x: calc(2*var(--spacing)*-1);
}

.data-\[side\=top\]\:-translate-y-1[data-side="top"] {
  --tw-translate-y: calc(var(--spacing) * -1);
  translate: var(--tw-translate-x) var(--tw-translate-y);
}

.data-\[side\=top\]\:slide-in-from-bottom-2[data-side="top"] {
  --tw-enter-translate-y: calc(2*var(--spacing));
}

.data-\[size\=default\]\:h-9[data-size="default"] {
  height: calc(var(--spacing) * 9);
}

.data-\[size\=default\]\:h-\[1\.15rem\][data-size="default"] {
  height: 1.15rem;
}

.data-\[size\=default\]\:w-8[data-size="default"] {
  width: calc(var(--spacing) * 8);
}

.data-\[size\=lg\]\:size-10[data-size="lg"] {
  width: calc(var(--spacing) * 10);
  height: calc(var(--spacing) * 10);
}

.data-\[size\=sm\]\:size-6[data-size="sm"] {
  width: calc(var(--spacing) * 6);
  height: calc(var(--spacing) * 6);
}

.data-\[size\=sm\]\:h-3\.5[data-size="sm"] {
  height: calc(var(--spacing) * 3.5);
}

.data-\[size\=sm\]\:h-8[data-size="sm"] {
  height: calc(var(--spacing) * 8);
}

.data-\[size\=sm\]\:w-6[data-size="sm"] {
  width: calc(var(--spacing) * 6);
}

.data-\[size\=sm\]\:max-w-xs[data-size="sm"] {
  max-width: var(--container-xs);
}

:is(.\*\:data-\[slot\=alert-description\]\:text-destructive\/90 > *)[data-slot="alert-description"] {
  color: var(--error);
}

@supports (color: color-mix(in lab, red, red)) {
  :is(.\*\:data-\[slot\=alert-description\]\:text-destructive\/90 > *)[data-slot="alert-description"] {
    color: color-mix(in oklab, var(--error) 90%, transparent);
  }
}

:is(.\*\:data-\[slot\=avatar\]\:ring-2 > *)[data-slot="avatar"] {
  --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}

:is(.\*\:data-\[slot\=avatar\]\:ring-background > *)[data-slot="avatar"] {
  --tw-ring-color: var(--background);
}

:is(.\*\:data-\[slot\=select-value\]\:line-clamp-1 > *)[data-slot="select-value"] {
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  overflow: hidden;
}

:is(.\*\:data-\[slot\=select-value\]\:flex > *)[data-slot="select-value"] {
  display: flex;
}

:is(.\*\:data-\[slot\=select-value\]\:items-center > *)[data-slot="select-value"] {
  align-items: center;
}

:is(.\*\:data-\[slot\=select-value\]\:gap-2 > *)[data-slot="select-value"] {
  gap: calc(var(--spacing) * 2);
}

.data-\[state\=active\]\:bg-background[data-state="active"] {
  background-color: var(--background);
}

.data-\[state\=active\]\:text-foreground[data-state="active"] {
  color: var(--text-main);
}

:is(:where(.group\/tabs-list)[data-variant="default"] .group-data-\[variant\=default\]\/tabs-list\:data-\[state\=active\]\:shadow-sm)[data-state="active"] {
  --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}

:is(:where(.group\/tabs-list)[data-variant="line"] .group-data-\[variant\=line\]\/tabs-list\:data-\[state\=active\]\:bg-transparent)[data-state="active"] {
  background-color: #0000;
}

:is(:where(.group\/tabs-list)[data-variant="line"] .group-data-\[variant\=line\]\/tabs-list\:data-\[state\=active\]\:shadow-none)[data-state="active"] {
  --tw-shadow: 0 0 #0000;
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}

:is(:where(.group\/tabs-list)[data-variant="line"] .group-data-\[variant\=line\]\/tabs-list\:data-\[state\=active\]\:after\:opacity-100)[data-state="active"]:after {
  content: var(--tw-content);
  opacity: 1;
}

.data-\[state\=checked\]\:translate-x-\[calc\(100\%-2px\)\][data-state="checked"] {
  --tw-translate-x: calc(100% - 2px);
  translate: var(--tw-translate-x) var(--tw-translate-y);
}

.data-\[state\=checked\]\:border-primary[data-state="checked"] {
  border-color: var(--primary);
}

.data-\[state\=checked\]\:bg-primary[data-state="checked"] {
  background-color: var(--primary);
}

.data-\[state\=checked\]\:text-primary-foreground[data-state="checked"] {
  color: #fff;
}

.data-\[state\=closed\]\:animate-accordion-up[data-state="closed"] {
  animation: accordion-up var(--tw-animation-duration, var(--tw-duration, .2s))var(--tw-ease, ease-out)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none);
}

.data-\[state\=closed\]\:animate-out[data-state="closed"] {
  animation: exit var(--tw-animation-duration, var(--tw-duration, .15s))var(--tw-ease, ease)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none);
}

.data-\[state\=closed\]\:duration-300[data-state="closed"] {
  --tw-duration: .3s;
  transition-duration: .3s;
}

.data-\[state\=closed\]\:fade-out-0[data-state="closed"] {
  --tw-exit-opacity: 0;
}

.data-\[state\=closed\]\:zoom-out-95[data-state="closed"] {
  --tw-exit-scale: .95;
}

.data-\[state\=closed\]\:slide-out-to-bottom[data-state="closed"] {
  --tw-exit-translate-y: 100%;
}

.data-\[state\=closed\]\:slide-out-to-left[data-state="closed"] {
  --tw-exit-translate-x: -100%;
}

.data-\[state\=closed\]\:slide-out-to-right[data-state="closed"] {
  --tw-exit-translate-x: 100%;
}

.data-\[state\=closed\]\:slide-out-to-top[data-state="closed"] {
  --tw-exit-translate-y: -100%;
}

.data-\[state\=open\]\:animate-accordion-down[data-state="open"] {
  animation: accordion-down var(--tw-animation-duration, var(--tw-duration, .2s))var(--tw-ease, ease-out)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none);
}

.data-\[state\=open\]\:animate-in[data-state="open"] {
  animation: enter var(--tw-animation-duration, var(--tw-duration, .15s))var(--tw-ease, ease)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none);
}

.data-\[state\=open\]\:bg-accent[data-state="open"], .data-\[state\=open\]\:bg-secondary[data-state="open"] {
  background-color: var(--surface-soft);
}

.data-\[state\=open\]\:text-accent-foreground[data-state="open"] {
  color: var(--text-main);
}

.data-\[state\=open\]\:text-muted-foreground[data-state="open"] {
  color: var(--text-muted);
}

.data-\[state\=open\]\:duration-500[data-state="open"] {
  --tw-duration: .5s;
  transition-duration: .5s;
}

.data-\[state\=open\]\:fade-in-0[data-state="open"] {
  --tw-enter-opacity: 0;
}

.data-\[state\=open\]\:zoom-in-95[data-state="open"] {
  --tw-enter-scale: .95;
}

.data-\[state\=open\]\:slide-in-from-bottom[data-state="open"] {
  --tw-enter-translate-y: 100%;
}

.data-\[state\=open\]\:slide-in-from-left[data-state="open"] {
  --tw-enter-translate-x: -100%;
}

.data-\[state\=open\]\:slide-in-from-right[data-state="open"] {
  --tw-enter-translate-x: 100%;
}

.data-\[state\=open\]\:slide-in-from-top[data-state="open"] {
  --tw-enter-translate-y: -100%;
}

.data-\[state\=selected\]\:bg-muted[data-state="selected"] {
  background-color: var(--surface-soft);
}

.data-\[state\=unchecked\]\:translate-x-0[data-state="unchecked"] {
  --tw-translate-x: 0px;
  translate: var(--tw-translate-x) var(--tw-translate-y);
}

.data-\[state\=unchecked\]\:bg-input[data-state="unchecked"] {
  background-color: var(--border-strong);
}

.data-\[variant\=destructive\]\:text-destructive[data-variant="destructive"] {
  color: var(--error);
}

.data-\[variant\=destructive\]\:focus\:bg-destructive\/10[data-variant="destructive"]:focus {
  background-color: var(--error);
}

@supports (color: color-mix(in lab, red, red)) {
  .data-\[variant\=destructive\]\:focus\:bg-destructive\/10[data-variant="destructive"]:focus {
    background-color: color-mix(in oklab, var(--error) 10%, transparent);
  }
}

.data-\[variant\=destructive\]\:focus\:text-destructive[data-variant="destructive"]:focus {
  color: var(--error);
}

.data-\[variant\=line\]\:rounded-none[data-variant="line"] {
  border-radius: 0;
}

@media (min-width: 40rem) {
  .sm\:max-w-lg {
    max-width: var(--container-lg);
  }

  .sm\:max-w-sm {
    max-width: var(--container-sm);
  }

  .sm\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sm\:flex-row {
    flex-direction: row;
  }

  .sm\:items-center {
    align-items: center;
  }

  .sm\:items-start {
    align-items: flex-start;
  }

  .sm\:justify-between {
    justify-content: space-between;
  }

  .sm\:justify-end {
    justify-content: flex-end;
  }

  .sm\:text-left {
    text-align: left;
  }

  :is(:where(.group\/alert-dialog-content)[data-size="default"] .sm\:group-data-\[size\=default\]\/alert-dialog-content\:row-span-2) {
    grid-row: span 2 / span 2;
  }

  :is(:where(.group\/alert-dialog-content)[data-size="default"] .sm\:group-data-\[size\=default\]\/alert-dialog-content\:place-items-start) {
    place-items: start;
  }

  :is(:where(.group\/alert-dialog-content)[data-size="default"] .sm\:group-data-\[size\=default\]\/alert-dialog-content\:text-left) {
    text-align: left;
  }

  :is(:where(.group\/alert-dialog-content):has([data-slot="alert-dialog-media"]) :is(:where(.group\/alert-dialog-content)[data-size="default"] .sm\:group-data-\[size\=default\]\/alert-dialog-content\:group-has-data-\[slot\=alert-dialog-media\]\/alert-dialog-content\:col-start-2)) {
    grid-column-start: 2;
  }

  :is(:where(.group\/alert-dialog-content)[data-size="default"] .sm\:group-data-\[size\=default\]\/alert-dialog-content\:has-data-\[slot\=alert-dialog-media\]\:grid-rows-\[auto_1fr\]):has([data-slot="alert-dialog-media"]) {
    grid-template-rows: auto 1fr;
  }

  .data-\[size\=default\]\:sm\:max-w-lg[data-size="default"] {
    max-width: var(--container-lg);
  }
}

@media (min-width: 48rem) {
  .md\:col-span-2 {
    grid-column: span 2 / span 2;
  }

  .md\:flex {
    display: flex;
  }

  .md\:hidden {
    display: none;
  }

  .md\:h-screen {
    height: 100vh;
  }

  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .md\:justify-between {
    justify-content: space-between;
  }

  .md\:overflow-x-hidden {
    overflow-x: hidden;
  }

  .md\:overflow-y-auto {
    overflow-y: auto;
  }

  .md\:px-10 {
    padding-inline: calc(var(--spacing) * 10);
  }

  .md\:pt-10 {
    padding-top: calc(var(--spacing) * 10);
  }

  .md\:text-sm {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
}

@media (min-width: 64rem) {
  .lg\:col-span-1 {
    grid-column: span 1 / span 1;
  }

  .lg\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .lg\:grid-cols-\[2fr_repeat\(3\,1fr\)\] {
    grid-template-columns: 2fr repeat(3, 1fr);
  }

  .lg\:gap-12 {
    gap: calc(var(--spacing) * 12);
  }
}

.dark\:border-input:is([data-theme="dark"] *) {
  border-color: var(--border-strong);
}

.dark\:bg-destructive\/60:is([data-theme="dark"] *) {
  background-color: var(--error);
}

@supports (color: color-mix(in lab, red, red)) {
  .dark\:bg-destructive\/60:is([data-theme="dark"] *) {
    background-color: color-mix(in oklab, var(--error) 60%, transparent);
  }
}

.dark\:bg-input\/30:is([data-theme="dark"] *) {
  background-color: var(--border-strong);
}

@supports (color: color-mix(in lab, red, red)) {
  .dark\:bg-input\/30:is([data-theme="dark"] *) {
    background-color: color-mix(in oklab, var(--border-strong) 30%, transparent);
  }
}

.dark\:text-muted-foreground:is([data-theme="dark"] *) {
  color: var(--text-muted);
}

@media (hover: hover) {
  .dark\:hover\:bg-accent\/50:is([data-theme="dark"] *):hover {
    background-color: var(--surface-soft);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:hover\:bg-accent\/50:is([data-theme="dark"] *):hover {
      background-color: color-mix(in oklab, var(--surface-soft) 50%, transparent);
    }
  }

  .dark\:hover\:bg-input\/50:is([data-theme="dark"] *):hover {
    background-color: var(--border-strong);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:hover\:bg-input\/50:is([data-theme="dark"] *):hover {
      background-color: color-mix(in oklab, var(--border-strong) 50%, transparent);
    }
  }

  .dark\:hover\:text-foreground:is([data-theme="dark"] *):hover {
    color: var(--text-main);
  }
}

.dark\:focus-visible\:ring-destructive\/40:is([data-theme="dark"] *):focus-visible {
  --tw-ring-color: var(--error);
}

@supports (color: color-mix(in lab, red, red)) {
  .dark\:focus-visible\:ring-destructive\/40:is([data-theme="dark"] *):focus-visible {
    --tw-ring-color: color-mix(in oklab, var(--error) 40%, transparent);
  }
}

.dark\:aria-invalid\:ring-destructive\/40:is([data-theme="dark"] *)[aria-invalid="true"] {
  --tw-ring-color: var(--error);
}

@supports (color: color-mix(in lab, red, red)) {
  .dark\:aria-invalid\:ring-destructive\/40:is([data-theme="dark"] *)[aria-invalid="true"] {
    --tw-ring-color: color-mix(in oklab, var(--error) 40%, transparent);
  }
}

.dark\:data-\[state\=active\]\:border-input:is([data-theme="dark"] *)[data-state="active"] {
  border-color: var(--border-strong);
}

.dark\:data-\[state\=active\]\:bg-input\/30:is([data-theme="dark"] *)[data-state="active"] {
  background-color: var(--border-strong);
}

@supports (color: color-mix(in lab, red, red)) {
  .dark\:data-\[state\=active\]\:bg-input\/30:is([data-theme="dark"] *)[data-state="active"] {
    background-color: color-mix(in oklab, var(--border-strong) 30%, transparent);
  }
}

.dark\:data-\[state\=active\]\:text-foreground:is([data-theme="dark"] *)[data-state="active"] {
  color: var(--text-main);
}

:is(:where(.group\/tabs-list)[data-variant="line"] .dark\:group-data-\[variant\=line\]\/tabs-list\:data-\[state\=active\]\:border-transparent:is([data-theme="dark"] *))[data-state="active"] {
  border-color: #0000;
}

:is(:where(.group\/tabs-list)[data-variant="line"] .dark\:group-data-\[variant\=line\]\/tabs-list\:data-\[state\=active\]\:bg-transparent:is([data-theme="dark"] *))[data-state="active"] {
  background-color: #0000;
}

.dark\:data-\[state\=checked\]\:bg-primary:is([data-theme="dark"] *)[data-state="checked"] {
  background-color: var(--primary);
}

.dark\:data-\[state\=checked\]\:bg-primary-foreground:is([data-theme="dark"] *)[data-state="checked"] {
  background-color: #fff;
}

.dark\:data-\[state\=unchecked\]\:bg-foreground:is([data-theme="dark"] *)[data-state="unchecked"] {
  background-color: var(--text-main);
}

.dark\:data-\[state\=unchecked\]\:bg-input\/80:is([data-theme="dark"] *)[data-state="unchecked"] {
  background-color: var(--border-strong);
}

@supports (color: color-mix(in lab, red, red)) {
  .dark\:data-\[state\=unchecked\]\:bg-input\/80:is([data-theme="dark"] *)[data-state="unchecked"] {
    background-color: color-mix(in oklab, var(--border-strong) 80%, transparent);
  }
}

.dark\:data-\[variant\=destructive\]\:focus\:bg-destructive\/20:is([data-theme="dark"] *)[data-variant="destructive"]:focus {
  background-color: var(--error);
}

@supports (color: color-mix(in lab, red, red)) {
  .dark\:data-\[variant\=destructive\]\:focus\:bg-destructive\/20:is([data-theme="dark"] *)[data-variant="destructive"]:focus {
    background-color: color-mix(in oklab, var(--error) 20%, transparent);
  }
}

.\[\&_p\]\:leading-relaxed p {
  --tw-leading: var(--leading-relaxed);
  line-height: var(--leading-relaxed);
}

.\[\&_svg\]\:pointer-events-none svg {
  pointer-events: none;
}

.\[\&_svg\]\:shrink-0 svg {
  flex-shrink: 0;
}

.\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-3 svg:not([class*="size-"]) {
  width: calc(var(--spacing) * 3);
  height: calc(var(--spacing) * 3);
}

.\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-4 svg:not([class*="size-"]) {
  width: calc(var(--spacing) * 4);
  height: calc(var(--spacing) * 4);
}

.\[\&_svg\:not\(\[class\*\=\'text-\'\]\)\]\:text-muted-foreground svg:not([class*="text-"]) {
  color: var(--text-muted);
}

.\[\&_tr\]\:border-b tr {
  border-bottom-style: var(--tw-border-style);
  border-bottom-width: 1px;
}

.\[\&_tr\:last-child\]\:border-0 tr:last-child {
  border-style: var(--tw-border-style);
  border-width: 0;
}

.\[\&\:has\(\[role\=checkbox\]\)\]\:pr-0:has([role="checkbox"]) {
  padding-right: 0;
}

.\[\.border-b\]\:pb-6.border-b {
  padding-bottom: calc(var(--spacing) * 6);
}

.\[\.border-t\]\:pt-6.border-t {
  padding-top: calc(var(--spacing) * 6);
}

:is(.\*\:\[span\]\:last\:flex > *):is(span):last-child {
  display: flex;
}

:is(.\*\:\[span\]\:last\:items-center > *):is(span):last-child {
  align-items: center;
}

:is(.\*\:\[span\]\:last\:gap-2 > *):is(span):last-child {
  gap: calc(var(--spacing) * 2);
}

:is(.data-\[variant\=destructive\]\:\*\:\[svg\]\:text-destructive\![data-variant="destructive"] > *):is(svg) {
  color: var(--error) !important;
}

:is(.\*\:\[svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-8 > *):is(svg:not([class*="size-"])) {
  width: calc(var(--spacing) * 8);
  height: calc(var(--spacing) * 8);
}

.\[\&\>\[role\=checkbox\]\]\:translate-y-\[2px\] > [role="checkbox"] {
  --tw-translate-y: 2px;
  translate: var(--tw-translate-x) var(--tw-translate-y);
}

.\[\&\>svg\]\:pointer-events-none > svg {
  pointer-events: none;
}

.\[\&\>svg\]\:size-3 > svg {
  width: calc(var(--spacing) * 3);
  height: calc(var(--spacing) * 3);
}

.\[\&\>svg\]\:size-4 > svg {
  width: calc(var(--spacing) * 4);
  height: calc(var(--spacing) * 4);
}

.\[\&\>svg\]\:translate-y-0\.5 > svg {
  --tw-translate-y: calc(var(--spacing) * .5);
  translate: var(--tw-translate-x) var(--tw-translate-y);
}

.\[\&\>svg\]\:text-current > svg {
  color: currentColor;
}

:is(:where(.group\/avatar-group):has([data-size="lg"]) .group-has-data-\[size\=lg\]\/avatar-group\:\[\&\>svg\]\:size-5) > svg {
  width: calc(var(--spacing) * 5);
  height: calc(var(--spacing) * 5);
}

:is(:where(.group\/avatar-group):has([data-size="sm"]) .group-has-data-\[size\=sm\]\/avatar-group\:\[\&\>svg\]\:size-3) > svg {
  width: calc(var(--spacing) * 3);
  height: calc(var(--spacing) * 3);
}

:is(:where(.group\/avatar)[data-size="default"] .group-data-\[size\=default\]\/avatar\:\[\&\>svg\]\:size-2) > svg, :is(:where(.group\/avatar)[data-size="lg"] .group-data-\[size\=lg\]\/avatar\:\[\&\>svg\]\:size-2) > svg {
  width: calc(var(--spacing) * 2);
  height: calc(var(--spacing) * 2);
}

:is(:where(.group\/avatar)[data-size="sm"] .group-data-\[size\=sm\]\/avatar\:\[\&\>svg\]\:hidden) > svg {
  display: none;
}

.\[\&\>tr\]\:last\:border-b-0 > tr:last-child {
  border-bottom-style: var(--tw-border-style);
  border-bottom-width: 0;
}

.\[\&\[data-state\=open\]\>svg\]\:rotate-180[data-state="open"] > svg {
  rotate: 180deg;
}

@media (hover: hover) {
  a.\[a\&\]\:hover\:bg-accent:hover {
    background-color: var(--surface-soft);
  }

  a.\[a\&\]\:hover\:bg-destructive\/90:hover {
    background-color: var(--error);
  }

  @supports (color: color-mix(in lab, red, red)) {
    a.\[a\&\]\:hover\:bg-destructive\/90:hover {
      background-color: color-mix(in oklab, var(--error) 90%, transparent);
    }
  }

  a.\[a\&\]\:hover\:bg-primary\/90:hover {
    background-color: var(--primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    a.\[a\&\]\:hover\:bg-primary\/90:hover {
      background-color: color-mix(in oklab, var(--primary) 90%, transparent);
    }
  }

  a.\[a\&\]\:hover\:bg-secondary\/90:hover {
    background-color: var(--surface-soft);
  }

  @supports (color: color-mix(in lab, red, red)) {
    a.\[a\&\]\:hover\:bg-secondary\/90:hover {
      background-color: color-mix(in oklab, var(--surface-soft) 90%, transparent);
    }
  }

  a.\[a\&\]\:hover\:text-accent-foreground:hover {
    color: var(--text-main);
  }

  a.\[a\&\]\:hover\:underline:hover {
    text-decoration-line: underline;
  }
}

@property --tw-animation-delay {
  syntax: "*";
  inherits: false;
  initial-value: 0s;
}

@property --tw-animation-direction {
  syntax: "*";
  inherits: false;
  initial-value: normal;
}

@property --tw-animation-duration {
  syntax: "*";
  inherits: false
}

@property --tw-animation-fill-mode {
  syntax: "*";
  inherits: false;
  initial-value: none;
}

@property --tw-animation-iteration-count {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-enter-blur {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-enter-opacity {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-enter-rotate {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-enter-scale {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-enter-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-enter-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-exit-blur {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-exit-opacity {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-exit-rotate {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-exit-scale {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-exit-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-exit-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

:root {
  --primary: #4f46e5;
  --primary-600: #4338ca;
  --primary-700: #3730a3;
  --primary-soft: #4f46e51f;
  --primary-light: #818cf8;
  --action: #ea580c;
  --action-light: #fb923c;
  --action-bg: #fef9c3;
  --tech: #0ea5e9;
  --tech-bg: #0ea5e91f;
  --economy: #10b981;
  --economy-bg: #10b9811f;
  --success: #10b981;
  --warning: #f59e0b;
  --error: #ef4444;
  --info: #0ea5e9;
  --radius-xs: 8px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --font-title: "Inter", sans-serif;
  --font-text: "Inter", sans-serif;
}

[data-theme="dark"], :root {
  --secondary: #fff;
  --ink: #0f172a;
  --background: #0f172a;
  --surface: #1e293b;
  --surface-raised: #1e293bd6;
  --surface-soft: #1e293b;
  --text-main: #fff;
  --text-muted: #94a3b8;
  --text-soft: #64748b;
  --text: #e2e8f0;
  --border: #334155;
  --border-strong: #475569;
  --ring: #4f46e54d;
  --shadow-xs: 0 1px 2px #0000004d;
  --shadow-sm: 0 8px 24px #0000004d;
  --shadow-md: 0 18px 45px #00000059;
  --shadow-lg: 0 28px 70px #00000073;
}

[data-theme="light"] {
  --secondary: #0f172a;
  --ink: #0f172a;
  --background: #f8fafc;
  --surface: #fff;
  --surface-raised: #ffffffd6;
  --surface-soft: #f1f5f9;
  --text-main: #0f172a;
  --text-muted: #64748b;
  --text-soft: #94a3b8;
  --text: #0f172a;
  --border: #e2e8f0;
  --border-strong: #cbd5e1;
  --ring: #4f46e533;
  --shadow-xs: 0 1px 2px #0000000d;
  --shadow-sm: 0 8px 24px #00000014;
  --shadow-md: 0 18px 45px #0000001a;
  --shadow-lg: 0 28px 70px #0000001f;
}

@layer base {
  *, :after, :before, ::backdrop {
    border: 0 solid;
  }

  ::file-selector-button {
    border: 0 solid;
  }
}

@layer components {
  .dp-focus-ring {
    outline: none;
  }

  .dp-focus-ring:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
  }

  .dp-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
  }

  .dp-section-title {
    font-family: var(--font-title);
    letter-spacing: -.02em;
    color: var(--text-main);
    font-weight: 800;
    line-height: 1.2;
  }
}

@property --tw-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-translate-z {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-rotate-x {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-y {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-z {
  syntax: "*";
  inherits: false
}

@property --tw-skew-x {
  syntax: "*";
  inherits: false
}

@property --tw-skew-y {
  syntax: "*";
  inherits: false
}

@property --tw-space-x-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-leading {
  syntax: "*";
  inherits: false
}

@property --tw-font-weight {
  syntax: "*";
  inherits: false
}

@property --tw-tracking {
  syntax: "*";
  inherits: false
}

@property --tw-ordinal {
  syntax: "*";
  inherits: false
}

@property --tw-slashed-zero {
  syntax: "*";
  inherits: false
}

@property --tw-numeric-figure {
  syntax: "*";
  inherits: false
}

@property --tw-numeric-spacing {
  syntax: "*";
  inherits: false
}

@property --tw-numeric-fraction {
  syntax: "*";
  inherits: false
}

@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-ring-inset {
  syntax: "*";
  inherits: false
}

@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}

@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}

@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-blur {
  syntax: "*";
  inherits: false
}

@property --tw-brightness {
  syntax: "*";
  inherits: false
}

@property --tw-contrast {
  syntax: "*";
  inherits: false
}

@property --tw-grayscale {
  syntax: "*";
  inherits: false
}

@property --tw-hue-rotate {
  syntax: "*";
  inherits: false
}

@property --tw-invert {
  syntax: "*";
  inherits: false
}

@property --tw-opacity {
  syntax: "*";
  inherits: false
}

@property --tw-saturate {
  syntax: "*";
  inherits: false
}

@property --tw-sepia {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-blur {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-brightness {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-contrast {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-grayscale {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-hue-rotate {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-invert {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-opacity {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-saturate {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-sepia {
  syntax: "*";
  inherits: false
}

@property --tw-duration {
  syntax: "*";
  inherits: false
}

@property --tw-ease {
  syntax: "*";
  inherits: false
}

@property --tw-scale-x {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-scale-y {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-scale-z {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-content {
  syntax: "*";
  inherits: false;
  initial-value: "";
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes pulse {
  50% {
    opacity: .5;
  }
}

@keyframes enter {
  from {
    opacity: var(--tw-enter-opacity, 1);
    transform: translate3d(var(--tw-enter-translate-x, 0),var(--tw-enter-translate-y, 0),0)scale3d(var(--tw-enter-scale, 1),var(--tw-enter-scale, 1),var(--tw-enter-scale, 1))rotate(var(--tw-enter-rotate, 0));
    filter: blur(var(--tw-enter-blur, 0));
  }
}

@keyframes exit {
  to {
    opacity: var(--tw-exit-opacity, 1);
    transform: translate3d(var(--tw-exit-translate-x, 0),var(--tw-exit-translate-y, 0),0)scale3d(var(--tw-exit-scale, 1),var(--tw-exit-scale, 1),var(--tw-exit-scale, 1))rotate(var(--tw-exit-rotate, 0));
    filter: blur(var(--tw-exit-blur, 0));
  }
}

@keyframes accordion-down {
  from {
    height: 0;
  }

  to {
    height: var(--radix-accordion-content-height, var(--bits-accordion-content-height, var(--reka-accordion-content-height, var(--kb-accordion-content-height, var(--ngp-accordion-content-height, auto)))));
  }
}

@keyframes accordion-up {
  from {
    height: var(--radix-accordion-content-height, var(--bits-accordion-content-height, var(--reka-accordion-content-height, var(--kb-accordion-content-height, var(--ngp-accordion-content-height, auto)))));
  }

  to {
    height: 0;
  }
}