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

:root {
  /* Brand colors - same in both themes */
  --primary: #4F46E5;
  --primary-600: #4338CA;
  --primary-700: #3730A3;
  --primary-soft: rgba(79, 70, 229, 0.12);
  --primary-light: #818CF8;
  --action: #EA580C;
  --action-light: #FB923C;
  --action-bg: #FEF9C3;
  --tech: #0EA5E9;
  --tech-bg: rgba(14, 165, 233, 0.12);
  --economy: #10B981;
  --economy-bg: rgba(16, 185, 129, 0.12);
  --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;
}

/* ===== DARK THEME (default) ===== */

[data-theme="dark"], :root {
  --secondary: #FFFFFF;
  --ink: #0F172A;
  --background: #0F172A;
  --surface: #1E293B;
  --surface-raised: rgba(30, 41, 59, 0.84);
  --surface-soft: #1E293B;
  --text-main: #FFFFFF;
  --text-muted: #94A3B8;
  --text-soft: #64748B;
  --border: #334155;
  --border-strong: #475569;
  --ring: rgba(79, 70, 229, 0.3);
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 8px 24px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 18px 45px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 28px 70px rgba(0, 0, 0, 0.45);
}

/* ===== LIGHT THEME ===== */

[data-theme="light"] {
  --secondary: #0F172A;
  --ink: #0F172A;
  --background: #F8FAFC;
  --surface: #FFFFFF;
  --surface-raised: rgba(255, 255, 255, 0.84);
  --surface-soft: #F1F5F9;
  --text-main: #0F172A;
  --text-muted: #64748B;
  --text-soft: #94A3B8;
  --border: #E2E8F0;
  --border-strong: #CBD5E1;
  --ring: rgba(79, 70, 229, 0.2);
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 8px 24px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 18px 45px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 28px 70px rgba(0, 0, 0, 0.12);
}

* {
  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);
}

/* Utilitários globais */

.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; }
}
.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;
  }
}
: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;
}

.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;
}

/* 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;
}

.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: 5-col grid — sempre visível */
.steps-flow {
  display: grid;
  grid-template-columns: repeat(5, 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-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;
}

.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 */
.faq-section {
  max-width: 800px;
  margin: 0 auto;
  padding: 3rem 1.5rem;
}

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

.faq-item {
  background: var(--home-surface);
  border: 1px solid var(--home-border);
  border-radius: var(--home-radius);
  overflow: hidden;
  transition: all 0.3s ease;
}

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

.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  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: all 0.2s ease;
}

.faq-question svg:first-child {
  color: var(--home-primary);
  flex-shrink: 0;
}

.faq-question span {
  flex: 1;
}

.faq-chevron {
  color: var(--home-text-muted);
  transition: transform 0.3s ease;
  flex-shrink: 0;
}

.faq-item-open .faq-chevron {
  transform: rotate(90deg);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
}

.faq-item-open .faq-answer {
  max-height: 300px;
  padding: 0 1.5rem 1.25rem;
}

.faq-answer p {
  color: var(--home-text-muted);
  line-height: 1.7;
  padding-left: 2.25rem;
}

/* 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"] .faq-item {
  background: #FFFFFF;
  border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .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"] .faq-question {
  color: #0F172A;
}

[data-theme="light"] .faq-chevron {
  color: #94A3B8;
}

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

[data-theme="light"] .cta-section .cta-content {
  background: linear-gradient(135deg, #4F46E5, #7C3AED);
  color: #FFFFFF;
}

[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);
}

[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;
}
.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%);
  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%);
  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-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(100, 116, 139, 0.1);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

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

.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;
}

.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 {
  margin: 0.75rem 0 0;
  color: #ef4444;
  font-size: 0.9rem;
}

.push-gate-hint {
  margin: 0.75rem 0 0;
  font-size: 0.85rem;
}
.layout-container {
  display: flex;
  min-height: 100vh;
  background-color: var(--background);
  position: relative;
}

/* Mobile Button */
.mobile-menu-btn {
  display: none;
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 50;
  background: var(--primary);
  color: white;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  font-size: 1.5rem;
  border: none;
  box-shadow: 0 4px 6px rgba(79, 70, 229, 0.3);
  cursor: pointer;
}

.mobile-topbar {
  display: none;
}

.mobile-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 30;
  backdrop-filter: blur(2px);
}

.sidebar {
  width: 280px;
  background-color: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  z-index: 40;
  transition: transform 0.3s ease;
}

.logo {
  font-family: var(--font-title);
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--secondary);
  margin-bottom: 2.5rem;
  letter-spacing: -0.5px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

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

.logo span {
  color: var(--primary);
}

.nav-menu {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}

.nav-item {
  padding: 0.875rem 1.25rem;
  border-radius: 0.75rem;
  color: var(--text-muted);
  font-weight: 600;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.nav-item:hover {
  background-color: rgba(0, 0, 0, 0.04);
  color: var(--secondary);
  transform: translateX(4px);
}

.nav-item.active {
  background-color: rgba(79, 70, 229, 0.1);
  color: var(--primary);
}

.nav-admin-link {
  background: rgba(16, 185, 129, 0.08);
  color: #10B981;
  border: 1px solid rgba(16, 185, 129, 0.18);
}

.nav-admin-link:hover {
  background: rgba(16, 185, 129, 0.14);
  color: #059669;
}

.sidebar-footer {
  margin-top: auto;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem 0;
}

.avatar {
  width: 44px;
  height: 44px;
  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: 1.2rem;
  box-shadow: 0 4px 6px -1px rgba(79, 70, 229, 0.3);
  flex-shrink: 0;
}

.avatar-img {
  object-fit: cover;
  background: none;
}

.user-details {
  display: flex;
  flex-direction: column;
}

.user-details strong {
  font-size: 0.95rem;
  color: var(--secondary);
}

.user-details span {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.logout {
  color: var(--error);
}

.logout:hover {
  background-color: rgba(239, 68, 68, 0.1);
  color: var(--error);
  transform: translateX(4px);
}

/* Nav group (collapsible) */
.nav-group {
  display: flex;
  flex-direction: column;
}

.nav-group-toggle {
  width: 100%;
  justify-content: space-between;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  background: none;
  border: none;
}

.nav-group-arrow {
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.nav-group-arrow.open {
  transform: rotate(180deg);
}

.nav-group-items {
  display: flex;
  flex-direction: column;
  padding-left: 1rem;
}

.nav-sub {
  padding-left: 2rem;
  font-size: 0.875rem;
}

.main-content {
  flex: 1;
  padding: 2.5rem 3rem;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100vh;
  min-width: 0;
}

/* Page Headers Common Style */
.page-header {
  margin-bottom: 2.5rem;
}

.page-header h1 {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

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

/* --- Mobile Responsiveness --- */
@media (max-width: 768px) {
  .mobile-topbar {
    position: fixed;
    top: 0.5rem;
    left: 0.5rem;
    right: 0.5rem;
    z-index: 55;
    display: grid;
    grid-template-columns: 42px 1fr 42px;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.55rem;
    border-radius: 1rem;
    background: rgba(15, 23, 42, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(16px);
    box-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.5);
  }

  .mobile-topbar-back,
  .mobile-topbar-menu {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.06);
    color: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.14);
  }

  .mobile-topbar-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    color: white;
    text-decoration: none;
    font-family: var(--font-title);
    font-weight: 800;
    letter-spacing: -0.4px;
    min-width: 0;
  }

  .mobile-topbar-logo-img {
    width: 24px;
    height: 24px;
    object-fit: contain;
    flex-shrink: 0;
  }

  .mobile-topbar-logo span {
    font-size: 1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .mobile-topbar-logo span span {
    color: var(--primary);
  }

  .mobile-menu-btn {
    display: none;
  }
  
  .sidebar {
    position: fixed;
    top: 0;
    right: 0;
    left: auto;
    bottom: 0;
    transform: translateX(100%);
    width: 250px;
    padding: 1rem;
    border-right: none;
    border-left: 1px solid var(--border);
  }

  .sidebar.open {
    transform: translateX(0);
  }

  .mobile-overlay {
    display: block;
  }

  .main-content {
    padding: 4.25rem 0.75rem 1rem;
    overflow-x: hidden;
  }

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

  .page-header h1 {
    font-size: 1.15rem;
    margin-bottom: 0.25rem;
  }

  .page-header p {
    font-size: 0.82rem;
  }

  .nav-item {
    padding: 0.55rem 0.85rem;
    gap: 0.5rem;
    font-size: 0.82rem;
    border-radius: 0.6rem;
  }

  .nav-menu {
    gap: 0.15rem;
  }

  .nav-sub {
    padding-left: 1.5rem;
    font-size: 0.78rem;
  }

  .nav-group-items {
    padding-left: 0.5rem;
  }

  .logo {
    font-size: 1.25rem;
    margin-bottom: 1rem;
  }

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

  .user-info {
    padding: 0.25rem 0;
  }

  .avatar {
    width: 34px;
    height: 34px;
    font-size: 0.9rem;
  }

  .user-details strong {
    font-size: 0.85rem;
  }

  .user-details span {
    font-size: 0.72rem;
  }

  /* Mobile scrolled header - shrink on scroll */
  .mobile-topbar {
    transition: padding 0.25s ease, box-shadow 0.25s ease;
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
  }

  .mobile-topbar.scrolled {
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
    box-shadow: 0 8px 25px -8px rgba(0, 0, 0, 0.6);
  }

  .mobile-topbar.scrolled .mobile-topbar-logo-img {
    width: 20px;
    height: 20px;
  }

  .mobile-topbar.scrolled .mobile-topbar-logo span {
    font-size: 0.88rem;
  }

  .mobile-topbar.scrolled .mobile-topbar-back,
  .mobile-topbar.scrolled .mobile-topbar-menu {
    width: 36px;
    height: 36px;
  }

  /* Sidebar theme row */
  .sidebar-theme-row {
    display: flex;
    align-items: center;
  }

  .theme-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.85rem;
    border-radius: 0.6rem;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    width: 100%;
    justify-content: flex-start;
  }

  .theme-toggle-btn:hover {
    background: rgba(0, 0, 0, 0.04);
    border-color: var(--primary);
    color: var(--primary);
  }

  /* Sidebar sub-nav icons */
  .nav-sub svg {
    flex-shrink: 0;
  }
}
.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: 1.4fr 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 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);
}

@media (max-width: 780px) {
  .install-app-card {
    grid-template-columns: 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;
}

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

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

.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: 1.2fr 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);
}

.dashboard-empty-hero h2 {
  margin: 0.65rem 0 0.5rem;
  font-size: 1.45rem;
  color: var(--secondary);
}

.dashboard-empty-hero p {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.55;
}

.empty-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1rem;
}

.dashboard-empty-hero-aside {
  display: grid;
  gap: 0.75rem;
}

.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);
}

.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);
}

.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;
}

/* 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;
  }

  .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;
  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;
}

.dashboard-category-bar {
  display: flex;
  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);
}

.dashboard-category-arrow.left {
  left: -8px;
}

.dashboard-category-arrow.right {
  right: -8px;
}

.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;
}

/* 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;
}

/* ── Resumo principal — 3 perguntas ───────────────────────── */
.savings-summary-card {
  background: var(--home-surface);
  border: 1px solid var(--home-border);
  border-radius: 16px;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.savings-summary-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 0.5rem;
}

.savings-summary-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
}

.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: rgba(16, 185, 129, 0.06);
  border: 1px solid rgba(16, 185, 129, 0.22);
  border-radius: 12px;
  padding: 0.5rem 0.75rem;
}

.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;
}

.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%;
  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;
  flex-shrink: 0;
}

.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.2rem 0.5rem;
  border-radius: 6px;
  white-space: nowrap;
}

/* 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);
}

.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;
  }
}
.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;
}

.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;
}

.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;
}

@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;
}

.gc-member-avatar.gc-empty {
  background: var(--border);
  color: var(--text-muted);
}

.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);
}

.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;
  }
}
.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;
  }
}
.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;
}

/* 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(280px, 1fr));
  gap: 1rem;
}

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

.billing-sub-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: white;
  flex-shrink: 0;
}

.billing-sub-info {
  flex: 1;
  min-width: 0;
}

.billing-sub-info h4 {
  font-size: 1rem;
  margin-bottom: 0.25rem;
  color: var(--secondary);
}

.billing-sub-info p {
  color: var(--text-muted);
  font-size: 0.875rem;
  margin-bottom: 0.25rem;
}

.billing-sub-price {
  color: var(--primary);
  font-weight: 700;
  font-size: 0.9rem;
}

/* 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); }
}
/* 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;
}

.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;
  }
}
.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);
}

/* 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;
}

.webhook-status {
  margin-bottom: 1rem;
}

.webhook-listening {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: rgba(14, 165, 233, 0.08);
  border: 1px solid rgba(14, 165, 233, 0.2);
  border-radius: 0.5rem;
  font-size: 0.85rem;
  color: #0EA5E9;
}

.webhook-listening svg {
  flex-shrink: 0;
}

.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;
}

.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;
  }
}
.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;
  }
}
.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);
}

/* 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;
}

.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: rgba(79, 70, 229, 0.1);
  color: var(--primary);
}

.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 */
.gd-rules p {
  padding-left: 1rem;
  position: relative;
}

.gd-rules p::before {
  content: '•';
  position: absolute;
  left: 0;
  color: var(--text-soft);
}

/* 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;
}

.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;
}

.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-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); }
}
.create-group-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);
}

.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);
}

.create-group-form {
  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-group {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  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.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-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

/* Price Simulation */
.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);
}

/* Cycles */
.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);
}

/* 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;
}

/* Entrance Fee Display */
.entrance-fee-display {
  margin-top: 1.25rem;
  padding: 1rem;
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  opacity: 0.85;
}

.entrance-fee-header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}

.entrance-fee-header svg {
  color: var(--primary);
}

.entrance-fee-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--secondary);
  margin-bottom: 0.5rem;
}

.entrance-fee-hint {
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.5;
}

/* Adesao Info Box */
.adesao-info-box {
  margin-top: 1rem;
  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);
}

/* 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); }
}

.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;
}

.approval-notice svg { flex-shrink: 0; }

/* 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);
}

/* Credential Type Grid */
.cred-type-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.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) {
  .form-grid,
  .custom-cycle-fields {
    grid-template-columns: 1fr;
  }

  .form-footer {
    padding: 1rem;
    justify-content: stretch;
  }

  .form-footer .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);
}

.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;
}

/* 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);
}

@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;
  }

  .finance-table-header span:last-child,
  .finance-table-row .finance-renewal-cell {
    display: none;
  }
}
.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-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;
}

.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;
}

.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);
}

.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-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); } }
/* ============================================
   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;
}

/* Mobile Button Admin */
.admin-mobile-btn {
  display: none;
  position: fixed;
  top: 0.75rem;
  left: 1rem;
  z-index: 50;
  background: var(--surface);
  color: var(--text-main);
  width: 40px;
  height: 40px;
  border-radius: 0.5rem;
  font-size: 1.25rem;
  border: 1px solid var(--border);
  cursor: pointer;
}

.admin-mobile-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 30;
  backdrop-filter: blur(2px);
}

.admin-sidebar {
  width: 260px;
  min-height: 100vh;
  background-color: var(--surface);
  color: var(--text-main);
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  z-index: 40;
  transition: transform 0.3s ease;
  border-right: 1px solid var(--border);
  overflow-y: auto;
}

.admin-logo {
  font-family: var(--font-title);
  font-size: 1.5rem;
  font-weight: 800;
  margin-bottom: 3rem;
  color: var(--text-main);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

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

.admin-logo span {
  color: var(--primary);
}

.admin-nav {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}

.admin-nav .nav-item {
  padding: 0.875rem 1rem;
  border-radius: 0.5rem;
  color: var(--text-muted);
  font-weight: 500;
  transition: all 0.2s;
}

.admin-nav .nav-item:hover {
  background-color: var(--primary-soft);
  color: var(--text-main);
}

.admin-nav .nav-item.active {
  background-color: var(--primary);
  color: white;
}

.admin-footer {
  margin-top: auto;
  border-top: 1px solid var(--border);
  padding-top: 1rem;
  flex-shrink: 0;
}

.admin-footer-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.admin-footer .logout {
  color: #EF4444;
}

.admin-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

.admin-page-wrap {
  padding: 2rem;
  overflow-y: auto;
  flex: 1;
  padding-bottom: 4rem;
}

/* Admin Common Elements */
.admin-header {
  margin-bottom: 2rem;
}

.admin-header h1 {
  font-size: 1.75rem;
  color: var(--text-main);
}

.admin-card {
  background: var(--surface);
  border-radius: 0.75rem;
  border: 1px solid var(--border);
  padding: 1.5rem;
  box-shadow: var(--shadow-xs);
}

/* --- Mobile Responsiveness Admin --- */
@media (max-width: 768px) {
  .admin-mobile-btn {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .admin-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    transform: translateX(-100%);
  }

  .admin-sidebar.open {
    transform: translateX(0);
  }

  .admin-mobile-overlay {
    display: block;
  }

  .admin-page-wrap {
    padding: 1rem 0.5rem;
  }
  
  .admin-card {
    padding: 1rem;
  }
}
.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.8rem;
  color: var(--text-muted);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.metric-value {
  font-family: var(--font-title);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--secondary);
  line-height: 1.2;
}

.metric-value.positive { color: var(--success); }
.metric-value.negative { color: var(--error); }

.metric-sub {
  font-size: 0.78rem;
  color: var(--text-soft);
}

.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; }
}

@media (max-width: 640px) {
  .metrics-grid { grid-template-columns: 1fr; }
  .metric-card { padding: 1.25rem; }
  .metric-value { font-size: 1.35rem; }
  .panel-header { padding: 1rem 1.25rem; }
  .activity-item { padding: 0.75rem 1.25rem; }
  .stat-row { padding: 0.875rem 1.25rem; }
  .admin-dashboard .admin-header h1 { font-size: 1.3rem; }
  .admin-dashboard .admin-header p { font-size: 0.82rem; }
}
.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);
}

@media (max-width: 768px) {
  .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;
  }

  .users-table th,
  .users-table td {
    padding: 0.75rem;
  }
}
.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;
  }

  .user-tabs {
    flex-direction: column;
  }

  .user-tab {
    justify-content: center;
  }

  .global-crons-grid {
    grid-template-columns: 1fr;
  }

  .cron-detail-row {
    flex-wrap: wrap;
  }
}

/* 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;
}

.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;
}
.interest-list-page .admin-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.interest-list-page .admin-header .btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.interest-accordion {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.interest-accordion .service-section {
  background: var(--card-bg, rgba(255,255,255,0.04));
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  border: 1px solid var(--border-color, #334155);
}

.interest-accordion .service-header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background: none;
  border: none;
  cursor: pointer;
  transition: background 0.15s;
}

.interest-accordion .service-header:hover {
  background: var(--hover-bg, #1E293B);
}

.interest-accordion .service-info {
  display: flex;
  align-items: center;
  gap: 14px;
}

.interest-accordion .service-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 18px;
  flex-shrink: 0;
}

.interest-accordion .service-icon img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.interest-accordion .service-info h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary, #FFFFFF);
}

.interest-accordion .service-meta {
  font-size: 13px;
  color: var(--text-secondary, #64748B);
}

.interest-accordion .service-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-secondary, #64748B);
}

.interest-entries {
  padding: 0 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.interest-entry-card {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 14px 16px;
  background: var(--surface-bg, #1E293B);
  border-radius: 10px;
  border: 1px solid var(--border-color, #334155);
  gap: 16px;
}

.entry-user {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.entry-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--primary-color, #0EA5E9);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 14px;
  flex-shrink: 0;
}

.entry-details strong {
  display: block;
  font-size: 14px;
  color: var(--text-primary, #FFFFFF);
  margin-bottom: 2px;
}

.entry-contact {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.contact-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--text-secondary, #64748B);
}

.entry-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
}

.entry-date {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--text-secondary, #64748B);
  white-space: nowrap;
}

.entry-message {
  margin: 0;
  padding: 8px 12px;
  background: var(--card-bg, rgba(255,255,255,0.04));
  border-radius: 6px;
  font-size: 13px;
  color: var(--text-secondary, #64748B);
  border: 1px solid var(--border-color, #334155);
  max-width: 280px;
  text-align: right;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  background: var(--card-bg, rgba(255,255,255,0.04));
  border-radius: 12px;
  border: 1px dashed var(--border-color, #334155);
  color: var(--text-secondary, #64748B);
  font-size: 15px;
}

@media (max-width: 640px) {
  .interest-list-page .admin-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .interest-entry-card {
    flex-direction: column;
  }

  .entry-meta {
    align-items: flex-start;
    width: 100%;
  }

  .entry-message {
    text-align: left;
    max-width: 100%;
  }
}
.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;
  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;
}

.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 {
    grid-template-columns: repeat(2, 1fr);
  }

  .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); }
}

.subscriptions-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.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;
}

/* Renewal stats cards */
.subscriptions-renewals {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

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

.renewal-card svg {
  color: var(--text-muted);
  flex-shrink: 0;
}

.renewal-card div {
  flex: 1;
}

.renewal-count {
  display: block;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--secondary);
  line-height: 1;
}

.renewal-card small {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.renewal-value {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--primary);
  flex-shrink: 0;
}

.renewal-card.alert {
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.25);
}

.renewal-card.alert svg {
  color: #ef4444;
}

.renewal-card.alert .renewal-count {
  color: #ef4444;
}

.renewal-card.warning {
  background: rgba(245, 158, 11, 0.08);
  border-color: rgba(245, 158, 11, 0.25);
}

.renewal-card.warning svg {
  color: #f59e0b;
}

.renewal-card.warning .renewal-count {
  color: #f59e0b;
}

.renewal-card.critical {
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.3);
}

.renewal-card.critical svg {
  color: #ef4444;
}

.renewal-card.critical .renewal-count {
  color: #ef4444;
  font-weight: 800;
}

.renewal-card.critical .renewal-value {
  color: #ef4444;
}

/* 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;
  }
}

/* ── Clickable Stat Cards ─────────────────────────────── */
.stat-card.clickable,
.renewal-card.clickable {
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.stat-card.clickable:hover,
.renewal-card.clickable:hover {
  background: rgba(99, 102, 241, 0.06);
  border-color: rgba(99, 102, 241, 0.3);
}

.stat-detail-hint {
  display: block;
  font-size: 0.65rem;
  color: #818cf8;
  font-weight: 500;
  margin-top: 2px;
  opacity: 0;
  transition: opacity 0.15s;
}

.stat-card.clickable:hover .stat-detail-hint,
.renewal-card.clickable:hover .stat-detail-hint {
  opacity: 1;
}

.renewal-hint {
  position: absolute;
  bottom: 4px;
  right: 8px;
  font-size: 0.6rem;
  color: #818cf8;
  font-weight: 500;
  opacity: 0;
  transition: opacity 0.15s;
}

.renewal-card.clickable {
  position: relative;
}

.renewal-card.clickable:hover .renewal-hint {
  opacity: 1;
}

/* ── 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;
  }
}
.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);
}

.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: flex;
  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);
}

.group-btn.delete:hover {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.2);
  color: #EF4444;
}

.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 > label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 0.75rem;
}

.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;
}

.channel-btn.active {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}

.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);
}

.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;
}

.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;
}

/* 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;
}

.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);
}

/* 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 {
    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;
}

.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;
  }

  .actions-cell {
    flex-direction: column;
  }

  .target-toggle,
  .channel-toggle {
    flex-direction: column;
  }
}
.settings-page {
  max-width: 700px;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.settings-page .admin-header {
  margin-bottom: 0;
}

.settings-page .admin-header h1 {
  font-size: 1.75rem;
  color: var(--secondary);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.settings-page .admin-header p {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin-top: 0.25rem;
}

/* ── Card ── */
.settings-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 1rem;
  overflow: hidden;
}

/* ── Sections ── */
.settings-section {
  border-bottom: 1px solid var(--border);
}

.settings-section:last-child {
  border-bottom: none;
}

.settings-section-header {
  padding: 1.25rem 1.75rem;
  border-bottom: 1px solid var(--border);
  background: var(--background);
}

.settings-section-header h2 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--secondary);
}

.settings-section-body {
  padding: 1.5rem 1.75rem;
}

/* ── 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.warning {
  background: rgba(245, 158, 11, 0.06);
  border-color: rgba(245, 158, 11, 0.2);
}

.settings-info-block.warning svg {
  color: var(--warning);
}

/* ── Footer ── */
.settings-footer {
  display: flex;
  justify-content: flex-end;
}

.settings-footer .btn {
  padding: 0.65rem 1.5rem;
  font-size: 0.9rem;
  font-weight: 600;
  border-radius: 0.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

/* ── Success Banner ── */
.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 ── */
.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;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .settings-page {
    max-width: 100%;
  }

  .settings-section-header,
  .settings-section-body {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .settings-footer {
    justify-content: stretch;
  }

  .settings-footer .btn {
    flex: 1;
    justify-content: center;
  }

  .gateway-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Gateway Selector ── */
.gateway-description {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

.gateway-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.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%;
}

/* ── Gateway Credentials ── */
.gateway-credentials {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1rem;
}

.gateway-credentials .form-group {
  margin-bottom: 0;
}
.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;
  }
}
.billing-dashboard {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.billing-dashboard .admin-header {
  margin-bottom: 0;
}

.billing-dashboard .admin-header h1 {
  font-size: 1.75rem;
  color: var(--secondary);
}

.billing-dashboard .admin-header p {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin-top: 0.25rem;
}

.billing-nav-links {
  display: flex;
  gap: 0.5rem;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.5rem;
}

.billing-nav {
  padding: 0.5rem 1.25rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--text-muted);
  font-size: 0.9rem;
  font-weight: 500;
  transition: all 0.2s;
}

.billing-nav:hover {
  background: var(--surface-hover);
  color: var(--text);
}

.billing-nav.active {
  background: var(--primary);
  color: white;
}

.billing-metrics {
  grid-template-columns: repeat(4, 1fr);
}

.billing-sections {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.billing-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 1.5rem;
}

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

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

.billing-section-header h2 {
  margin-bottom: 0;
}

.billing-section-total {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--success);
}

.metric-sub {
  display: block;
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 0.15rem;
}

.metric-card.highlight {
  border: 1px solid rgba(79, 70, 229, 0.3);
  background: rgba(79, 70, 229, 0.03);
}

.metric-card-active {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
  box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.15) !important;
}

.billing-table-wrap {
  overflow-x: auto;
}

.billing-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.billing-table th {
  text-align: left;
  padding: 0.75rem;
  border-bottom: 2px solid var(--border);
  color: var(--text-muted);
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.billing-table td {
  padding: 0.75rem;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}

.billing-table tr:hover td {
  background: var(--surface-hover);
}

.status-badge {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: capitalize;
}

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

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

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

.status-pending {
  background: rgba(107, 114, 128, 0.1);
  color: #6B7280;
}

.error-cell {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-muted);
  font-size: 0.8rem;
}

.empty-state {
  color: var(--text-muted);
  font-size: 0.9rem;
  text-align: center;
  padding: 2rem;
}

.billing-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  color: var(--text-muted);
}

@media (max-width: 1200px) {
  .billing-metrics {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 900px) {
  .billing-metrics {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .billing-metrics {
    grid-template-columns: 1fr;
  }

  .billing-nav-links {
    overflow-x: auto;
    white-space: nowrap;
  }
}

.billing-force-bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.billing-force-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.5rem;
  background: var(--primary);
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.billing-force-btn:hover:not(:disabled) {
  opacity: 0.9;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
}

.billing-force-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.billing-force-result {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-weight: 500;
}

.billing-force-result.success {
  background: rgba(16, 185, 129, 0.1);
  color: #10B981;
}

.billing-force-result.error {
  background: rgba(239, 68, 68, 0.1);
  color: #EF4444;
}

.billing-force-dismiss {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  font-size: 1.1rem;
  padding: 0 0.25rem;
  opacity: 0.7;
}

.billing-force-dismiss:hover {
  opacity: 1;
}

.spinning {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@media (max-width: 600px) {
  .billing-force-bar {
    flex-direction: column;
    align-items: stretch;
  }
}
.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;
  }
}
.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;
  }
}
.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;
  }
}
.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-search {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  padding: 0.5rem 1rem;
  margin-bottom: 1rem;
}

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

.pe-search svg {
  color: #6b7280;
  flex-shrink: 0;
}

.pe-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.pe-filter-btn {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.75rem;
  border-radius: 2rem;
  border: 1px solid var(--border);
  background: var(--card-bg);
  color: var(--text-secondary);
  font-size: 0.78rem;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}

.pe-filter-btn:hover {
  background: var(--bg-secondary, rgba(255,255,255,0.05));
  color: var(--text);
}

.pe-filter-btn.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

.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-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.pe-card {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  padding: 0.875rem 1rem;
  transition: border-color 0.15s;
}

.pe-card:hover {
  border-color: var(--primary);
}

.pe-card-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0;
}

.pe-card-icon svg {
  font-size: 0;
}

.pe-card-content {
  flex: 1;
  min-width: 0;
}

.pe-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}

.pe-card-title {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text);
}

.pe-card-time {
  font-size: 0.75rem;
  color: #6b7280;
  white-space: nowrap;
  cursor: default;
}

.pe-card-message {
  font-size: 0.85rem;
  color: var(--text-secondary, #9ca3af);
  margin: 0 0 0.5rem;
  line-height: 1.4;
}

.pe-card-footer {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.pe-meta-summary {
  font-size: 0.75rem;
  color: #6b7280;
}

.pe-meta-discount {
  color: #10B981;
  font-weight: 600;
}

.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;
}

.pe-link-group {
  font-weight: 400;
  font-size: 0.85rem;
}

.pe-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.6rem;
  border-radius: 1rem;
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: capitalize;
  white-space: nowrap;
}

.pe-badge-user_registered { background: #1e3a5f; color: #60a5fa; }
.pe-badge-group_created { background: #1e3a5f; color: #60a5fa; }
.pe-badge-group_deleted { background: #450a0a; color: #fca5a5; }
.pe-badge-group_approved { background: #052e16; color: #6ee7b7; }
.pe-badge-group_rejected { background: #450a0a; color: #fca5a5; }
.pe-badge-subscription_cancelled { background: #451a03; color: #fcd34d; }
.pe-badge-member_joined { background: #052e16; color: #6ee7b7; }
.pe-badge-member_left { background: #1f2937; color: #9ca3af; }
.pe-badge-payment { background: #0c4a6e; color: #7dd3fc; }
.pe-badge-refund { background: #3b0764; color: #d8b4fe; }
.pe-badge-withdrawal_requested { background: #451a03; color: #fcd34d; }
.pe-badge-withdrawal_approved { background: #052e16; color: #6ee7b7; }
.pe-badge-withdrawal_rejected { background: #450a0a; color: #fca5a5; }
.pe-badge-info { background: #1e1b4b; color: #a5b4fc; }

/* Icon background colors per type */
.pe-card-icon.pe-badge-user_registered { background: #1e3a5f; color: #60a5fa; }
.pe-card-icon.pe-badge-group_created { background: #1e3a5f; color: #60a5fa; }
.pe-card-icon.pe-badge-group_deleted { background: #450a0a; color: #fca5a5; }
.pe-card-icon.pe-badge-group_approved { background: #052e16; color: #6ee7b7; }
.pe-card-icon.pe-badge-group_rejected { background: #450a0a; color: #fca5a5; }
.pe-card-icon.pe-badge-subscription_cancelled { background: #451a03; color: #fcd34d; }
.pe-card-icon.pe-badge-member_joined { background: #052e16; color: #6ee7b7; }
.pe-card-icon.pe-badge-member_left { background: #1f2937; color: #9ca3af; }
.pe-card-icon.pe-badge-payment { background: #0c4a6e; color: #7dd3fc; }
.pe-card-icon.pe-badge-refund { background: #3b0764; color: #d8b4fe; }
.pe-card-icon.pe-badge-withdrawal_requested { background: #451a03; color: #fcd34d; }
.pe-card-icon.pe-badge-withdrawal_approved { background: #052e16; color: #6ee7b7; }
.pe-card-icon.pe-badge-withdrawal_rejected { background: #450a0a; color: #fca5a5; }
.pe-card-icon.pe-badge-info { background: #1e1b4b; color: #a5b4fc; }

/* ==================== 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;
  }

  .pe-filters {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 0.25rem;
  }

  .pe-card-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .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;
  }
}
.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;
}
.results-tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.tab-btn {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  background: var(--card-bg);
  border: 1px solid var(--border);
  color: var(--text-secondary, #9ca3af);
  border-radius: 0.4rem;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.15s;
}

.tab-btn:hover {
  border-color: #4F46E5;
  color: var(--text);
}

.tab-btn.active {
  background: rgba(79, 70, 229, 0.15);
  border-color: #4F46E5;
  color: #818cf8;
}

.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;
  }
}
.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); }
}
.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 */
.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;
}

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

.btn-outline {
  background: transparent;
  border: 1px solid var(--border, rgba(255,255,255,0.12));
  color: var(--text, #e2e8f0);
}

.btn-outline:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.05);
}

.btn-sm {
  padding: 0.35rem 0.65rem;
  font-size: 0.78rem;
}

.btn-icon {
  padding: 0.35rem;
  background: transparent;
  border: none;
  color: var(--text-muted, #94a3b8);
  border-radius: 0.25rem;
}

.btn-icon:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text, #e2e8f0);
}

.btn-ghost {
  background: transparent;
  border: none;
  color: var(--text-muted, #94a3b8);
  font-size: 1.2rem;
  padding: 0;
  line-height: 1;
}

.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%;
  }
}
.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;
  }
}