@charset "UTF-8";
:root {
  --color-primary: #ee696b;
  --color-secondary: #b12495;
  --color-accent: #ca61c3;
  --color-cyan: #ee85b5;
  --color-violet: #ff958c;
}

* {
  scrollbar-width: thin;
  scrollbar-color: rgba(88, 28, 135, 0.5019607843) #1a1a1a;
}

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

::-webkit-scrollbar-track {
  background: #1a1a1a;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: rgba(88, 28, 135, 0.5019607843);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(88, 28, 135, 0.7019607843);
}

body {
  font-size: 0.8rem;
}

.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

#menu {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.menu-hidden {
  transform: translateX(-100%);
}

.menu-visible {
  transform: translateX(0);
}

@media (min-width: 640px) {
  #menu {
    transition: none;
  }
  .menu-hidden,
  .menu-visible {
    transform: none;
  }
}
.public-body {
  position: relative;
  overflow-x: hidden;
}

.laptop {
  background: linear-gradient(135deg, #422d48, #684a57);
  border-radius: 20px;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
  transform: rotateY(-15deg) rotateX(5deg);
  transition: transform 0.3s ease;
  pointer-events: auto;
}

.screen {
  pointer-events: auto;
  position: relative;
  z-index: 1;
}
.screen .flex-1.overflow-y-auto {
  pointer-events: auto;
  -webkit-overflow-scrolling: touch;
}

.laptop-interactive {
  background: linear-gradient(135deg, #422d48, #684a57);
  border-radius: 20px;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
  transform: rotateY(-8deg) rotateX(3deg);
  transition: transform 0.3s ease;
}
.laptop-interactive:hover {
  transform: rotateY(0deg) rotateX(0deg);
}

.device-mockup {
  perspective: 1000px;
  transform-style: preserve-3d;
}

.laptop {
  background: linear-gradient(135deg, #422d48, #684a57);
  border-radius: 20px;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
  transform: rotateY(-15deg) rotateX(5deg);
  transition: transform 0.3s ease;
}

.screen .flex-1.overflow-y-auto {
  transform: translateZ(10px);
}

.screen {
  border-radius: 15px;
  position: relative;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
}
.screen::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(238, 105, 107, 0.1), rgba(238, 133, 181, 0.1));
  pointer-events: none;
}

.glass-nav {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  border-radius: 20px;
  backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.glass-nav::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
}
.glass-nav {
  transition: all 0.3s ease;
}
.glass-nav:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.company-logo {
  filter: grayscale(1) brightness(0.5);
  transition: all 0.3s ease;
}
.company-logo:hover {
  filter: grayscale(0) brightness(1);
}

.gradient-text {
  background: linear-gradient(135deg, var(--pub-accent, #ee696b), var(--pub-accent-light, #b12495));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.color-primary {
  color: var(--pub-accent, #ee696b);
}

.color-secondary {
  color: var(--pub-accent, #b12495);
}

.color-accent {
  color: var(--pub-accent, #ca61c3);
}

.color-custom {
  color: #ee85b5;
}

.color-custom_2 {
  color: #ff958c;
}

.from-custom {
  --tw-gradient-from: var(--color-primary) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(59 130 246 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.to-custom {
  --tw-gradient-to: var(--color-violet) var(--tw-gradient-to-position);
}

.btn-primary {
  background: linear-gradient(135deg, #7c3aed, #a855f7);
  border: none;
  border-radius: 42px;
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.3);
  font-weight: 700;
  letter-spacing: 0.03em;
  transition: all 0.2s ease;
}
.btn-primary:hover {
  box-shadow: 0 6px 20px rgba(124, 58, 237, 0.4);
  transform: translateY(-2px);
}

.feature-card {
  background: var(--pub-glass-bg, rgba(255, 255, 255, 0.55));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--pub-glass-border, rgba(211, 208, 230, 0.5));
  border-radius: 20px;
  box-shadow: var(--pub-shadow-card, 2px 6px 30px 0 rgba(124, 58, 237, 0.08));
  transition: all 0.2s ease;
}
.feature-card:hover {
  box-shadow: var(--pub-shadow-card-hover, 2px 6px 30px 0 rgba(124, 58, 237, 0.2));
  transform: translateY(-4px);
}

.sender-card {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  border-radius: 16px;
}
.sender-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  transition: left 0.8s ease;
  z-index: 1;
}
.sender-card.status-active {
  border-left: 4px solid #ee696b;
}
.sender-card.status-inactive {
  border-left: 4px solid #ef4444;
}

.status-badge {
  position: relative;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: all 0.3s ease;
}
.status-badge.status-active {
  background: linear-gradient(135deg, rgba(32, 180, 32, 0.2), rgba(36, 177, 106, 0.2));
  color: rgb(88.5849056604, 225.4150943396, 88.5849056604);
  border: 1px solid rgba(32, 180, 32, 0.3);
}
.status-badge.status-inactive {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(220, 38, 38, 0.2));
  color: #fca5a5;
  border: 1px solid rgba(239, 68, 68, 0.3);
}
.status-badge.status-verified {
  background: linear-gradient(135deg, rgba(0, 255, 255, 0.2), rgba(51, 255, 255, 0.2));
  color: #66ffff;
  border: 1px solid rgba(0, 255, 255, 0.3);
}
.status-badge.status-unverified {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(217, 119, 6, 0.2));
  color: #fcd34d;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
    transform: translateY(-50%) scale(1);
  }
  50% {
    opacity: 0.5;
    transform: translateY(-50%) scale(1.2);
  }
}
.action-btn {
  position: relative;
  padding: 8px 16px;
  border-radius: 10px;
  font-size: 0.875rem;
  font-weight: 500;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  border: 1px solid transparent;
}
.action-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s ease;
}
.action-btn.btn-test {
  background: linear-gradient(135deg, rgba(32, 180, 32, 0.8), rgba(45.2830188679, 217.7169811321, 45.2830188679, 0.9));
  color: white;
  border-color: rgba(32, 180, 32, 0.3);
}
.action-btn.btn-activate {
  background: linear-gradient(135deg, rgba(238, 105, 107, 0.8), rgba(177, 36, 149, 0.9));
  color: white;
  border-color: rgba(238, 105, 107, 0.3);
}
.action-btn.btn-deactivate {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.8), rgba(220, 38, 38, 0.9));
  color: white;
  border-color: rgba(239, 68, 68, 0.3);
}
.action-btn.btn-edit {
  background: linear-gradient(135deg, rgba(107, 114, 128, 0.8), rgba(75, 85, 99, 0.9));
  color: white;
  border-color: rgba(107, 114, 128, 0.3);
}
.action-btn.btn-delete {
  background: linear-gradient(135deg, rgba(220, 38, 38, 0.8), rgba(185, 28, 28, 0.9));
  color: white;
  border-color: rgba(220, 38, 38, 0.3);
}

.progress-container {
  position: relative;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  overflow: hidden;
  height: 8px;
}
.progress-container .progress-bar {
  height: 100%;
  border-radius: 10px;
  position: relative;
  overflow: hidden;
  transition: all 0.5s ease;
}
.progress-container .progress-bar::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
}
.progress-container .progress-bar.progress-low {
  background: linear-gradient(90deg, #ee696b, #b12495);
}
.progress-container .progress-bar.progress-medium {
  background: linear-gradient(90deg, #f59e0b, #d97706);
}
.progress-container .progress-bar.progress-high {
  background: linear-gradient(90deg, #ef4444, #dc2626);
}

.empty-state .empty-icon {
  transition: all 0.3s ease;
}

.toast {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(20px);
  border-radius: 12px;
  backdrop-filter: blur(20px) saturate(180%);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.toast.show {
  transform: translateX(0);
}
.toast.toast-success {
  border-left: 4px solid #20b420;
  background: linear-gradient(135deg, rgba(32, 180, 32, 0.1), rgba(36, 177, 106, 0.1));
}
.toast.toast-error {
  border-left: 4px solid #ef4444;
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(220, 38, 38, 0.1));
}
.toast.toast-info {
  border-left: 4px solid #00FFFF;
  background: linear-gradient(135deg, rgba(0, 255, 255, 0.1), rgba(51, 255, 255, 0.1));
}

.loading {
  position: relative;
  pointer-events: none;
}
.loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top: 2px solid #ee696b;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.sender-grid {
  display: grid;
  gap: 1.5rem;
}
@media (min-width: 768px) {
  .sender-grid {
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  }
}
@media (min-width: 1200px) {
  .sender-grid {
    grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
  }
}

.page-header {
  position: relative;
}
.page-header::before {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
}

@media (max-width: 768px) {
  .action-btn {
    padding: 6px 12px;
    font-size: 0.8rem;
  }
}
@media (prefers-color-scheme: dark) {
  .sender-card {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.03) 100%);
  }
}
:root {
  --dash-bg-primary: #f2f4f9;
  --dash-bg-secondary: #ffffff;
  --dash-bg-sidebar: #ffffff;
  --dash-bg-header: #ffffff;
  --dash-bg-card: #ffffff;
  --dash-bg-input: #f8f9fa;
  --dash-border-primary: #e5e7eb;
  --dash-border-secondary: #d1d5db;
  --dash-text-primary: #111827;
  --dash-text-secondary: #4b5563;
  --dash-text-muted: #6b7280;
  --dash-shadow-card: 0 1px 3px rgba(0,0,0,0.05);
  --dash-shadow-card-hover: 0 4px 6px rgba(0,0,0,0.05);
}

html.dark {
  --dash-bg-primary: #11111A;
  --dash-bg-secondary: #161622;
  --dash-bg-sidebar: #161622;
  --dash-bg-header: #161622;
  --dash-bg-card: #161622;
  --dash-bg-input: #11111A;
  --dash-border-primary: #2B2B40;
  --dash-border-secondary: #3f3f5a;
  --dash-text-primary: #ffffff;
  --dash-text-secondary: #9ca3af;
  --dash-text-muted: #6b7280;
  --dash-shadow-card: 0 1px 3px rgba(0,0,0,0.2);
  --dash-shadow-card-hover: 0 4px 6px rgba(0,0,0,0.3);
}

.dashboard-sidebar {
  background: var(--dash-bg-sidebar, linear-gradient(180deg, #4c1d95 0%, #5b21b6 40%, #6d28d9 100%));
  color: #fff;
}
.dashboard-sidebar .sidebar-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  padding: 0 12px;
  margin-bottom: 8px;
}
.dashboard-sidebar .sidebar-section-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.12);
}
.dashboard-sidebar .sidebar-menu-item {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.85rem;
  font-weight: 500;
  transition: all 0.2s ease;
  text-decoration: none;
  margin-bottom: 2px;
}
.dashboard-sidebar .sidebar-menu-item .sidebar-icon {
  width: 20px;
  margin-right: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
  transition: color 0.2s ease;
}
.dashboard-sidebar .sidebar-menu-item:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}
.dashboard-sidebar .sidebar-menu-item:hover .sidebar-icon {
  color: #fff;
}
.dashboard-sidebar .sidebar-menu-item.active {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.dashboard-sidebar .sidebar-menu-item.active .sidebar-icon {
  color: #fff;
}
.dashboard-sidebar .sidebar-user-area {
  background: rgba(0, 0, 0, 0.15);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.dashboard-header {
  background: var(--dash-bg-header);
  border-bottom: 1px solid var(--dash-border-primary);
  backdrop-filter: blur(12px);
  transition: background 0.3s ease, border-color 0.3s ease;
}
.dashboard-header .header-search {
  background: var(--dash-bg-input);
  border: 1px solid var(--dash-border-primary);
  border-radius: 10px;
  color: var(--dash-text-primary);
  padding: 8px 12px 8px 36px;
  font-size: 0.85rem;
  transition: all 0.2s ease;
  width: 220px;
}
.dashboard-header .header-search::-moz-placeholder {
  color: var(--dash-text-muted);
}
.dashboard-header .header-search::placeholder {
  color: var(--dash-text-muted);
}
.dashboard-header .header-search:focus {
  outline: none;
  border-color: #7c3aed;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15);
  width: 280px;
}
.dashboard-header .header-icon-btn {
  padding: 8px;
  border-radius: 10px;
  color: var(--dash-text-muted);
  transition: all 0.2s ease;
  position: relative;
}
.dashboard-header .header-icon-btn:hover {
  background: var(--dash-bg-input);
  color: var(--dash-text-primary);
}
.dashboard-header .header-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7c3aed, #a855f7);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 600;
  font-size: 0.8rem;
  cursor: pointer;
  transition: box-shadow 0.2s ease;
}
.dashboard-header .header-avatar:hover {
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.3);
}
.dashboard-header .header-lang-select {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: var(--dash-bg-input);
  color: var(--dash-text-primary);
  border: 1px solid var(--dash-border-primary);
  border-radius: 8px;
  padding: 6px 28px 6px 10px;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.2s ease;
}
.dashboard-header .header-lang-select:hover {
  border-color: #7c3aed;
}
.dashboard-header .header-lang-select:focus {
  outline: none;
  border-color: #7c3aed;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15);
}
.dashboard-header .notification-dot {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 8px;
  height: 8px;
  background: #ef4444;
  border-radius: 50%;
  border: 2px solid var(--dash-bg-header);
}

.dashboard-content {
  background: var(--dash-bg-primary);
  transition: background 0.3s ease;
}

.theme-toggle-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: var(--dash-bg-secondary, #1a1d2e);
  border: 1px solid var(--dash-border-primary);
  border-radius: 12px;
  padding: 6px;
  min-width: 160px;
  box-shadow: var(--dash-shadow-card-hover);
  z-index: 50;
}
.theme-toggle-dropdown .theme-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.85rem;
  color: var(--dash-text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
}
.theme-toggle-dropdown .theme-option:hover {
  background: var(--dash-bg-input);
  color: var(--dash-text-primary);
}
.theme-toggle-dropdown .theme-option.active {
  background: rgba(124, 58, 237, 0.1);
  color: #7c3aed;
}

.feature-card {
  background: var(--dash-bg-card) !important;
  border-color: var(--dash-border-primary) !important;
  box-shadow: var(--dash-shadow-card);
  transition: all 0.3s ease;
}
.feature-card:hover {
  box-shadow: var(--dash-shadow-card-hover);
  border-color: rgba(124, 58, 237, 0.25) !important;
}

.dash-table-card {
  background: var(--dash-bg-card);
  border: 1px solid var(--dash-border-primary);
  border-radius: 16px;
  box-shadow: var(--dash-shadow-card);
  overflow: hidden;
  transition: all 0.3s ease;
}

.dash-table-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--dash-border-primary);
}

.dash-table-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--dash-text-primary);
  margin: 0;
}
.dash-table-title .dash-table-icon {
  color: #6366f1;
  display: flex;
  align-items: center;
}

.dash-table-search {
  position: relative;
}
.dash-table-search input {
  background: var(--dash-bg-input);
  border: 1px solid var(--dash-border-primary);
  border-radius: 10px;
  padding: 8px 12px 8px 36px;
  font-size: 0.85rem;
  color: var(--dash-text-primary);
  transition: all 0.2s ease;
  width: 220px;
}
.dash-table-search input::-moz-placeholder {
  color: var(--dash-text-muted);
}
.dash-table-search input::placeholder {
  color: var(--dash-text-muted);
}
.dash-table-search input:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}
.dash-table-search svg {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--dash-text-muted);
  pointer-events: none;
}

.dash-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.dash-table thead th {
  background: var(--dash-bg-input);
  color: var(--dash-text-secondary);
  font-weight: 500;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--dash-border-primary);
  white-space: nowrap;
  text-align: left;
}
.dash-table thead th:first-child {
  padding-left: 24px;
}
.dash-table thead th:last-child {
  padding-right: 24px;
}
.dash-table tbody tr {
  transition: background 0.15s ease;
}
.dash-table tbody tr:hover {
  background: var(--dash-bg-input);
}
.dash-table tbody tr:not(:last-child) td {
  border-bottom: 1px solid var(--dash-border-primary);
}
.dash-table tbody td {
  padding: 16px 20px;
  color: var(--dash-text-primary);
  font-size: 0.875rem;
  vertical-align: middle;
}
.dash-table tbody td:first-child {
  padding-left: 24px;
}
.dash-table tbody td:last-child {
  padding-right: 24px;
}

.dash-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
}
.dash-badge.dash-badge-success {
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
}
.dash-badge.dash-badge-warning {
  background: rgba(245, 158, 11, 0.1);
  color: #f59e0b;
}
.dash-badge.dash-badge-danger {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}
.dash-badge.dash-badge-primary {
  background: rgba(99, 102, 241, 0.1);
  color: #6366f1;
}
.dash-badge.dash-badge-info {
  background: rgba(6, 182, 212, 0.1);
  color: #06b6d4;
}

.dash-badge-dot {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: var(--dash-text-secondary);
}
.dash-badge-dot::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.dash-badge-dot.dot-success::before {
  background: #10b981;
}
.dash-badge-dot.dot-warning::before {
  background: #f59e0b;
}
.dash-badge-dot.dot-danger::before {
  background: #ef4444;
}
.dash-badge-dot.dot-primary::before {
  background: #6366f1;
}
.dash-badge-dot.dot-info::before {
  background: #06b6d4;
}

.dash-pagination {
  display: flex;
  justify-content: flex-end;
  padding: 16px 24px;
  gap: 4px;
}
.dash-pagination .dash-page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--dash-text-secondary);
  background: transparent;
  border: 1px solid var(--dash-border-primary);
  cursor: pointer;
  transition: all 0.2s ease;
}
.dash-pagination .dash-page-btn:hover {
  background: var(--dash-bg-input);
  color: var(--dash-text-primary);
  border-color: #6366f1;
}
.dash-pagination .dash-page-btn.active {
  background: #6366f1;
  color: #fff;
  border-color: #6366f1;
}
.dash-pagination .dash-page-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

html:not(.dark) body:not(.public-body) main .bg-gray-900,
html:not(.dark) body:not(.public-body) main .bg-gray-800 {
  background-color: var(--dash-bg-secondary) !important;
}
html:not(.dark) body:not(.public-body) main .bg-zinc-800\/40,
html:not(.dark) body:not(.public-body) main .bg-zinc-800\/50,
html:not(.dark) body:not(.public-body) main .bg-zinc-800\/60,
html:not(.dark) body:not(.public-body) main .bg-zinc-900\/50 {
  background-color: var(--dash-bg-card) !important;
}
html:not(.dark) body:not(.public-body) main .bg-gray-700,
html:not(.dark) body:not(.public-body) main .bg-gray-700\/50 {
  background-color: #e2e8f0 !important;
}
html:not(.dark) body:not(.public-body) main .bg-gray-800\/50,
html:not(.dark) body:not(.public-body) main .bg-gray-800\/40 {
  background-color: var(--dash-bg-card) !important;
}
html:not(.dark) body:not(.public-body) main .bg-black\/20,
html:not(.dark) body:not(.public-body) main .bg-black\/30,
html:not(.dark) body:not(.public-body) main .bg-black\/40,
html:not(.dark) body:not(.public-body) main .bg-black\/50 {
  background-color: rgba(0, 0, 0, 0.03) !important;
}
html:not(.dark) body:not(.public-body) main .text-white {
  color: var(--dash-text-primary) !important;
}
html:not(.dark) body:not(.public-body) main [class*=bg-gradient-to-r], html:not(.dark) body:not(.public-body) main [class*=bg-gradient-to-r] .text-white, html:not(.dark) body:not(.public-body) main [class*=bg-gradient-to-r] *,
html:not(.dark) body:not(.public-body) main [class*=bg-gradient-to-br],
html:not(.dark) body:not(.public-body) main [class*=bg-gradient-to-br] .text-white,
html:not(.dark) body:not(.public-body) main [class*=bg-gradient-to-br] *,
html:not(.dark) body:not(.public-body) main [class*=bg-gradient-to-bl],
html:not(.dark) body:not(.public-body) main [class*=bg-gradient-to-bl] .text-white,
html:not(.dark) body:not(.public-body) main [class*=bg-gradient-to-bl] *,
html:not(.dark) body:not(.public-body) main [class*=bg-gradient-to-t],
html:not(.dark) body:not(.public-body) main [class*=bg-gradient-to-t] .text-white,
html:not(.dark) body:not(.public-body) main [class*=bg-gradient-to-t] *,
html:not(.dark) body:not(.public-body) main [class*=bg-gradient-to-b],
html:not(.dark) body:not(.public-body) main [class*=bg-gradient-to-b] .text-white,
html:not(.dark) body:not(.public-body) main [class*=bg-gradient-to-b] *,
html:not(.dark) body:not(.public-body) main [class*=bg-gradient-to-l],
html:not(.dark) body:not(.public-body) main [class*=bg-gradient-to-l] .text-white,
html:not(.dark) body:not(.public-body) main [class*=bg-gradient-to-l] *,
html:not(.dark) body:not(.public-body) main [style*=gradient],
html:not(.dark) body:not(.public-body) main [style*=gradient] .text-white,
html:not(.dark) body:not(.public-body) main [style*=gradient] * {
  color: #fff !important;
}
html:not(.dark) body:not(.public-body) main [class*=bg-indigo-].text-white, html:not(.dark) body:not(.public-body) main [class*=bg-indigo-] .text-white,
html:not(.dark) body:not(.public-body) main [class*=bg-purple-].text-white,
html:not(.dark) body:not(.public-body) main [class*=bg-purple-] .text-white,
html:not(.dark) body:not(.public-body) main [class*=bg-green-].text-white,
html:not(.dark) body:not(.public-body) main [class*=bg-green-] .text-white,
html:not(.dark) body:not(.public-body) main [class*=bg-blue-].text-white,
html:not(.dark) body:not(.public-body) main [class*=bg-blue-] .text-white,
html:not(.dark) body:not(.public-body) main [class*=bg-red-].text-white,
html:not(.dark) body:not(.public-body) main [class*=bg-red-] .text-white,
html:not(.dark) body:not(.public-body) main [class*=bg-rose-].text-white,
html:not(.dark) body:not(.public-body) main [class*=bg-rose-] .text-white {
  color: #fff !important;
}
html:not(.dark) body:not(.public-body) main button.bg-blue-600, html:not(.dark) body:not(.public-body) main a.bg-blue-600, html:not(.dark) body:not(.public-body) main .btn.bg-blue-600 {
  background-color: #eff6ff !important;
  border: 1px solid #bfdbfe;
  box-shadow: 0 1px 2px rgba(37, 99, 235, 0.08);
}
html:not(.dark) body:not(.public-body) main button.bg-blue-600, html:not(.dark) body:not(.public-body) main button.bg-blue-600.text-white, html:not(.dark) body:not(.public-body) main button.bg-blue-600 *, html:not(.dark) body:not(.public-body) main a.bg-blue-600, html:not(.dark) body:not(.public-body) main a.bg-blue-600.text-white, html:not(.dark) body:not(.public-body) main a.bg-blue-600 *, html:not(.dark) body:not(.public-body) main .btn.bg-blue-600, html:not(.dark) body:not(.public-body) main .btn.bg-blue-600.text-white, html:not(.dark) body:not(.public-body) main .btn.bg-blue-600 * {
  color: #2563eb !important;
}
html:not(.dark) body:not(.public-body) main button.bg-blue-600:hover, html:not(.dark) body:not(.public-body) main a.bg-blue-600:hover, html:not(.dark) body:not(.public-body) main .btn.bg-blue-600:hover {
  background-color: #dbeafe !important;
  border-color: #93c5fd;
}
html:not(.dark) body:not(.public-body) main button.bg-red-600, html:not(.dark) body:not(.public-body) main a.bg-red-600, html:not(.dark) body:not(.public-body) main .btn.bg-red-600 {
  background-color: #fef2f2 !important;
  border: 1px solid #fecaca;
  box-shadow: 0 1px 2px rgba(220, 38, 38, 0.08);
}
html:not(.dark) body:not(.public-body) main button.bg-red-600, html:not(.dark) body:not(.public-body) main button.bg-red-600.text-white, html:not(.dark) body:not(.public-body) main button.bg-red-600 *, html:not(.dark) body:not(.public-body) main a.bg-red-600, html:not(.dark) body:not(.public-body) main a.bg-red-600.text-white, html:not(.dark) body:not(.public-body) main a.bg-red-600 *, html:not(.dark) body:not(.public-body) main .btn.bg-red-600, html:not(.dark) body:not(.public-body) main .btn.bg-red-600.text-white, html:not(.dark) body:not(.public-body) main .btn.bg-red-600 * {
  color: #dc2626 !important;
}
html:not(.dark) body:not(.public-body) main button.bg-red-600:hover, html:not(.dark) body:not(.public-body) main a.bg-red-600:hover, html:not(.dark) body:not(.public-body) main .btn.bg-red-600:hover {
  background-color: #fee2e2 !important;
  border-color: #fca5a5;
}
html:not(.dark) body:not(.public-body) main button.bg-green-600, html:not(.dark) body:not(.public-body) main a.bg-green-600, html:not(.dark) body:not(.public-body) main .btn.bg-green-600 {
  background-color: #f0fdf4 !important;
  border: 1px solid #bbf7d0;
  box-shadow: 0 1px 2px rgba(22, 163, 74, 0.08);
}
html:not(.dark) body:not(.public-body) main button.bg-green-600, html:not(.dark) body:not(.public-body) main button.bg-green-600.text-white, html:not(.dark) body:not(.public-body) main button.bg-green-600 *, html:not(.dark) body:not(.public-body) main a.bg-green-600, html:not(.dark) body:not(.public-body) main a.bg-green-600.text-white, html:not(.dark) body:not(.public-body) main a.bg-green-600 *, html:not(.dark) body:not(.public-body) main .btn.bg-green-600, html:not(.dark) body:not(.public-body) main .btn.bg-green-600.text-white, html:not(.dark) body:not(.public-body) main .btn.bg-green-600 * {
  color: #16a34a !important;
}
html:not(.dark) body:not(.public-body) main button.bg-green-600:hover, html:not(.dark) body:not(.public-body) main a.bg-green-600:hover, html:not(.dark) body:not(.public-body) main .btn.bg-green-600:hover {
  background-color: #dcfce7 !important;
  border-color: #86efac;
}
html:not(.dark) body:not(.public-body) main button.bg-purple-600, html:not(.dark) body:not(.public-body) main a.bg-purple-600, html:not(.dark) body:not(.public-body) main .btn.bg-purple-600 {
  background-color: #f5f3ff !important;
  border: 1px solid #ddd6fe;
  box-shadow: 0 1px 2px rgba(124, 58, 237, 0.08);
}
html:not(.dark) body:not(.public-body) main button.bg-purple-600, html:not(.dark) body:not(.public-body) main button.bg-purple-600.text-white, html:not(.dark) body:not(.public-body) main button.bg-purple-600 *, html:not(.dark) body:not(.public-body) main a.bg-purple-600, html:not(.dark) body:not(.public-body) main a.bg-purple-600.text-white, html:not(.dark) body:not(.public-body) main a.bg-purple-600 *, html:not(.dark) body:not(.public-body) main .btn.bg-purple-600, html:not(.dark) body:not(.public-body) main .btn.bg-purple-600.text-white, html:not(.dark) body:not(.public-body) main .btn.bg-purple-600 * {
  color: #7c3aed !important;
}
html:not(.dark) body:not(.public-body) main button.bg-purple-600:hover, html:not(.dark) body:not(.public-body) main a.bg-purple-600:hover, html:not(.dark) body:not(.public-body) main .btn.bg-purple-600:hover {
  background-color: #ede9fe !important;
  border-color: #c4b5fd;
}
html:not(.dark) body:not(.public-body) main .text-gray-100,
html:not(.dark) body:not(.public-body) main .text-gray-200 {
  color: var(--dash-text-primary) !important;
}
html:not(.dark) body:not(.public-body) main .text-gray-300,
html:not(.dark) body:not(.public-body) main .text-gray-400,
html:not(.dark) body:not(.public-body) main .text-zinc-400 {
  color: var(--dash-text-secondary) !important;
}
html:not(.dark) body:not(.public-body) main .text-gray-500,
html:not(.dark) body:not(.public-body) main .text-zinc-500 {
  color: var(--dash-text-muted) !important;
}
html:not(.dark) body:not(.public-body) main .text-blue-100, html:not(.dark) body:not(.public-body) main .text-blue-200, html:not(.dark) body:not(.public-body) main .text-blue-300 {
  color: #1d4ed8 !important;
}
html:not(.dark) body:not(.public-body) main .text-green-100, html:not(.dark) body:not(.public-body) main .text-green-200, html:not(.dark) body:not(.public-body) main .text-green-300 {
  color: #15803d !important;
}
html:not(.dark) body:not(.public-body) main .text-red-100, html:not(.dark) body:not(.public-body) main .text-red-200, html:not(.dark) body:not(.public-body) main .text-red-300 {
  color: #b91c1c !important;
}
html:not(.dark) body:not(.public-body) main .text-purple-100, html:not(.dark) body:not(.public-body) main .text-purple-200, html:not(.dark) body:not(.public-body) main .text-purple-300 {
  color: #6d28d9 !important;
}
html:not(.dark) body:not(.public-body) main .text-yellow-100, html:not(.dark) body:not(.public-body) main .text-yellow-200, html:not(.dark) body:not(.public-body) main .text-yellow-300 {
  color: #a16207 !important;
}
html:not(.dark) body:not(.public-body) main .text-orange-100, html:not(.dark) body:not(.public-body) main .text-orange-200, html:not(.dark) body:not(.public-body) main .text-orange-300 {
  color: #c2410c !important;
}
html:not(.dark) body:not(.public-body) main .text-pink-100, html:not(.dark) body:not(.public-body) main .text-pink-200, html:not(.dark) body:not(.public-body) main .text-pink-300 {
  color: #be185d !important;
}
html:not(.dark) body:not(.public-body) main .text-indigo-100, html:not(.dark) body:not(.public-body) main .text-indigo-200, html:not(.dark) body:not(.public-body) main .text-indigo-300 {
  color: #4338ca !important;
}
html:not(.dark) body:not(.public-body) main .text-cyan-100, html:not(.dark) body:not(.public-body) main .text-cyan-200, html:not(.dark) body:not(.public-body) main .text-cyan-300 {
  color: #0e7490 !important;
}
html:not(.dark) body:not(.public-body) main .border-gray-700,
html:not(.dark) body:not(.public-body) main .border-gray-600,
html:not(.dark) body:not(.public-body) main .border-zinc-700,
html:not(.dark) body:not(.public-body) main .border-zinc-600 {
  border-color: var(--dash-border-primary) !important;
}
html:not(.dark) body:not(.public-body) main .border-gray-800,
html:not(.dark) body:not(.public-body) main .border-zinc-800 {
  border-color: var(--dash-border-secondary) !important;
}
html:not(.dark) body:not(.public-body) main .border-white\/10,
html:not(.dark) body:not(.public-body) main .border-white\/5 {
  border-color: var(--dash-border-primary) !important;
}
html:not(.dark) body:not(.public-body) main .divide-gray-700 > * + *,
html:not(.dark) body:not(.public-body) main .divide-zinc-700 > * + * {
  border-color: var(--dash-border-primary) !important;
}
html:not(.dark) body:not(.public-body) main .ring-gray-700,
html:not(.dark) body:not(.public-body) main .ring-zinc-700 {
  --tw-ring-color: var(--dash-border-primary) !important;
}
html:not(.dark) body:not(.public-body) main input.bg-gray-700, html:not(.dark) body:not(.public-body) main input.bg-gray-800, html:not(.dark) body:not(.public-body) main input.bg-zinc-700, html:not(.dark) body:not(.public-body) main input.bg-zinc-800, html:not(.dark) body:not(.public-body) main select.bg-gray-700, html:not(.dark) body:not(.public-body) main select.bg-gray-800, html:not(.dark) body:not(.public-body) main select.bg-zinc-700, html:not(.dark) body:not(.public-body) main select.bg-zinc-800, html:not(.dark) body:not(.public-body) main textarea.bg-gray-700, html:not(.dark) body:not(.public-body) main textarea.bg-gray-800, html:not(.dark) body:not(.public-body) main textarea.bg-zinc-700, html:not(.dark) body:not(.public-body) main textarea.bg-zinc-800 {
  background-color: var(--dash-bg-input) !important;
  color: var(--dash-text-primary) !important;
}
html:not(.dark) body:not(.public-body) main table th {
  color: var(--dash-text-secondary) !important;
}
html:not(.dark) body:not(.public-body) main table td {
  color: var(--dash-text-primary) !important;
  border-color: var(--dash-border-primary) !important;
}
html:not(.dark) body:not(.public-body) main .hover\:bg-gray-700:hover,
html:not(.dark) body:not(.public-body) main .hover\:bg-gray-800:hover,
html:not(.dark) body:not(.public-body) main .hover\:bg-zinc-700:hover {
  background-color: #e2e8f0 !important;
}
html:not(.dark) body:not(.public-body) main .hover\:text-white:hover {
  color: var(--dash-text-primary) !important;
}
html:not(.dark) body:not(.public-body) main .from-gray-900,
html:not(.dark) body:not(.public-body) main .from-gray-800 {
  --tw-gradient-from: var(--dash-bg-secondary) !important;
}
html:not(.dark) body:not(.public-body) main .to-gray-900,
html:not(.dark) body:not(.public-body) main .to-gray-800 {
  --tw-gradient-to: var(--dash-bg-secondary) !important;
}
html:not(.dark) body:not(.public-body) main .via-gray-900,
html:not(.dark) body:not(.public-body) main .via-gray-800 {
  --tw-gradient-via: var(--dash-bg-secondary) !important;
}
html:not(.dark) body:not(.public-body) main .shadow-2xl,
html:not(.dark) body:not(.public-body) main .shadow-xl,
html:not(.dark) body:not(.public-body) main .shadow-lg {
  box-shadow: var(--dash-shadow-card) !important;
}
html:not(.dark) body:not(.public-body) main .placeholder-gray-400::-moz-placeholder, html:not(.dark) body:not(.public-body) main .placeholder-gray-500::-moz-placeholder {
  color: var(--dash-text-muted) !important;
}
html:not(.dark) body:not(.public-body) main .placeholder-gray-400::placeholder,
html:not(.dark) body:not(.public-body) main .placeholder-gray-500::placeholder {
  color: var(--dash-text-muted) !important;
}
html:not(.dark) body:not(.public-body) main * {
  scrollbar-color: #cbd5e1 #f1f5f9;
}
html:not(.dark) body:not(.public-body) main ::-webkit-scrollbar-track {
  background: #f1f5f9;
}
html:not(.dark) body:not(.public-body) main ::-webkit-scrollbar-thumb {
  background: #cbd5e1;
}
html:not(.dark) body:not(.public-body) main ::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

html:not(.dark) body:not(.public-body) {
  scrollbar-color: #c7d2fe #f1f5f9;
}
html:not(.dark) body:not(.public-body) *, html:not(.dark) body:not(.public-body) {
  scrollbar-color: #c7d2fe #f1f5f9;
}

html:not(.dark) body:not(.public-body)::-webkit-scrollbar,
html:not(.dark) body:not(.public-body) *::-webkit-scrollbar {
  width: 8px;
}
html:not(.dark) body:not(.public-body)::-webkit-scrollbar-track,
html:not(.dark) body:not(.public-body) *::-webkit-scrollbar-track {
  background: #f1f5f9;
}
html:not(.dark) body:not(.public-body)::-webkit-scrollbar-thumb,
html:not(.dark) body:not(.public-body) *::-webkit-scrollbar-thumb {
  background: #c7d2fe;
  border-radius: 4px;
}
html:not(.dark) body:not(.public-body)::-webkit-scrollbar-thumb:hover,
html:not(.dark) body:not(.public-body) *::-webkit-scrollbar-thumb:hover {
  background: #a5b4fc;
}

html:not(.dark) body:not(.public-body) .template-card,
html:not(.dark) body:not(.public-body) .form-card,
html:not(.dark) body:not(.public-body) .detail-card {
  background: var(--dash-bg-card) !important;
  border-color: var(--dash-border-primary) !important;
  backdrop-filter: none;
}
html:not(.dark) body:not(.public-body) .search-box {
  background: var(--dash-bg-input) !important;
  border-color: var(--dash-border-primary) !important;
  backdrop-filter: none;
}
html:not(.dark) body:not(.public-body) .stat-item {
  background: var(--dash-bg-input) !important;
  border-color: var(--dash-border-primary) !important;
}
html:not(.dark) body:not(.public-body) .form-control {
  background: var(--dash-bg-input) !important;
  border-color: var(--dash-border-primary) !important;
  color: var(--dash-text-primary) !important;
}
html:not(.dark) body:not(.public-body) .form-label {
  color: var(--dash-text-primary) !important;
}
html:not(.dark) body:not(.public-body) .form-help {
  color: var(--dash-text-muted) !important;
}
html:not(.dark) body:not(.public-body) .preview-container {
  background: var(--dash-bg-input) !important;
  border-color: var(--dash-border-primary) !important;
}
html:not(.dark) body:not(.public-body) .sender-card {
  background: var(--dash-bg-card) !important;
  border-color: var(--dash-border-primary) !important;
  backdrop-filter: none;
}
html:not(.dark) body:not(.public-body) .sender-card.status-active {
  border-left: 4px solid #8b5cf6;
}
html:not(.dark) body:not(.public-body) .feature-card {
  backdrop-filter: none;
}
html:not(.dark) body:not(.public-body) .category-badge.bg-green-600 {
  background-color: rgba(22, 163, 74, 0.12) !important;
  color: #15803d !important;
  border: 1px solid rgba(22, 163, 74, 0.25);
}
html:not(.dark) body:not(.public-body) .category-badge.bg-red-600 {
  background-color: rgba(220, 38, 38, 0.1) !important;
  color: #dc2626 !important;
  border: 1px solid rgba(220, 38, 38, 0.25);
}
html:not(.dark) body:not(.public-body) .category-badge.bg-blue-600 {
  background-color: rgba(37, 99, 235, 0.1) !important;
  color: #2563eb !important;
  border: 1px solid rgba(37, 99, 235, 0.25);
}
html:not(.dark) body:not(.public-body) .category-badge.bg-yellow-600 {
  background-color: rgba(217, 119, 6, 0.1) !important;
  color: #b45309 !important;
  border: 1px solid rgba(217, 119, 6, 0.25);
}
html:not(.dark) body:not(.public-body) .status-badge.status-active {
  color: #15803d !important;
}
html:not(.dark) body:not(.public-body) .status-badge.status-inactive {
  color: #dc2626 !important;
}
html:not(.dark) body:not(.public-body) .status-badge.status-verified {
  color: #0e7490 !important;
}
html:not(.dark) body:not(.public-body) .status-badge.status-unverified {
  color: #b45309 !important;
}
html:not(.dark) body:not(.public-body) .text-green-400 {
  color: #16a34a !important;
}
html:not(.dark) body:not(.public-body) .text-red-400 {
  color: #dc2626 !important;
}
html:not(.dark) body:not(.public-body) .text-blue-400 {
  color: #2563eb !important;
}
html:not(.dark) body:not(.public-body) .text-yellow-400 {
  color: #d97706 !important;
}
html:not(.dark) body:not(.public-body) .text-purple-400 {
  color: #7c3aed !important;
}
html:not(.dark) body:not(.public-body) .text-indigo-400 {
  color: #4f46e5 !important;
}
html:not(.dark) body:not(.public-body) .text-cyan-400 {
  color: #0891b2 !important;
}
html:not(.dark) body:not(.public-body) .text-emerald-400 {
  color: #059669 !important;
}
html:not(.dark) body:not(.public-body) .text-orange-400 {
  color: #ea580c !important;
}
html:not(.dark) body:not(.public-body) .text-pink-400 {
  color: #db2777 !important;
}
html:not(.dark) body:not(.public-body) .bg-blue-500.bg-opacity-20 {
  background-color: rgba(37, 99, 235, 0.12) !important;
}
html:not(.dark) body:not(.public-body) .bg-green-500.bg-opacity-20,
html:not(.dark) body:not(.public-body) .bg-emerald-500.bg-opacity-20 {
  background-color: rgba(22, 163, 74, 0.12) !important;
}
html:not(.dark) body:not(.public-body) .bg-purple-500.bg-opacity-20 {
  background-color: rgba(124, 58, 237, 0.12) !important;
}
html:not(.dark) body:not(.public-body) .bg-red-500.bg-opacity-20 {
  background-color: rgba(220, 38, 38, 0.12) !important;
}
html:not(.dark) body:not(.public-body) .bg-yellow-500.bg-opacity-20 {
  background-color: rgba(217, 119, 6, 0.12) !important;
}
html:not(.dark) body:not(.public-body) .template-menu, html:not(.dark) body:not(.public-body) .template-menu.bg-zinc-800,
html:not(.dark) body:not(.public-body) .sender-menu,
html:not(.dark) body:not(.public-body) .sender-menu.bg-zinc-800,
html:not(.dark) body:not(.public-body) #team-dropdown,
html:not(.dark) body:not(.public-body) #team-dropdown.bg-zinc-800 {
  background-color: var(--dash-bg-secondary) !important;
  border-color: var(--dash-border-primary) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.06) !important;
}
html:not(.dark) body:not(.public-body) #team-dropdown .text-white:not([class*=bg-gradient] .text-white) {
  color: var(--dash-text-primary) !important;
}
html:not(.dark) body:not(.public-body) #team-dropdown [class*=bg-gradient-to] .text-white,
html:not(.dark) body:not(.public-body) #team-dropdown [class*=bg-gradient-to] * {
  color: #fff !important;
}
html:not(.dark) body:not(.public-body) #team-dropdown .text-gray-400 {
  color: var(--dash-text-muted) !important;
}
html:not(.dark) body:not(.public-body) #team-dropdown .bg-gray-700 {
  background-color: #f3f4f6 !important;
}
html:not(.dark) body:not(.public-body) #team-dropdown .hover\:bg-gray-700:hover {
  background-color: #f3f4f6 !important;
}
html:not(.dark) body:not(.public-body) #team-dropdown .border-gray-700 {
  border-color: var(--dash-border-primary) !important;
}
html:not(.dark) body:not(.public-body) button.bg-blue-600, html:not(.dark) body:not(.public-body) a.bg-blue-600, html:not(.dark) body:not(.public-body) .btn.bg-blue-600 {
  background-color: #eff6ff !important;
  color: #2563eb !important;
  border: 1px solid #bfdbfe;
  box-shadow: 0 1px 2px rgba(37, 99, 235, 0.08);
}
html:not(.dark) body:not(.public-body) button.bg-blue-600, html:not(.dark) body:not(.public-body) button.bg-blue-600 *, html:not(.dark) body:not(.public-body) a.bg-blue-600, html:not(.dark) body:not(.public-body) a.bg-blue-600 *, html:not(.dark) body:not(.public-body) .btn.bg-blue-600, html:not(.dark) body:not(.public-body) .btn.bg-blue-600 * {
  color: #2563eb !important;
}
html:not(.dark) body:not(.public-body) button.bg-blue-600:hover, html:not(.dark) body:not(.public-body) a.bg-blue-600:hover, html:not(.dark) body:not(.public-body) .btn.bg-blue-600:hover {
  background-color: #dbeafe !important;
  border-color: #93c5fd;
}
html:not(.dark) body:not(.public-body) button.bg-yellow-600, html:not(.dark) body:not(.public-body) a.bg-yellow-600, html:not(.dark) body:not(.public-body) .btn.bg-yellow-600 {
  background-color: #fffbeb !important;
  color: #b45309 !important;
  border: 1px solid #fde68a;
  box-shadow: 0 1px 2px rgba(217, 119, 6, 0.08);
}
html:not(.dark) body:not(.public-body) button.bg-yellow-600, html:not(.dark) body:not(.public-body) button.bg-yellow-600 *, html:not(.dark) body:not(.public-body) a.bg-yellow-600, html:not(.dark) body:not(.public-body) a.bg-yellow-600 *, html:not(.dark) body:not(.public-body) .btn.bg-yellow-600, html:not(.dark) body:not(.public-body) .btn.bg-yellow-600 * {
  color: #b45309 !important;
}
html:not(.dark) body:not(.public-body) button.bg-yellow-600:hover, html:not(.dark) body:not(.public-body) a.bg-yellow-600:hover, html:not(.dark) body:not(.public-body) .btn.bg-yellow-600:hover {
  background-color: #fef3c7 !important;
  border-color: #fcd34d;
}
html:not(.dark) body:not(.public-body) button.bg-red-600, html:not(.dark) body:not(.public-body) a.bg-red-600, html:not(.dark) body:not(.public-body) .btn.bg-red-600 {
  background-color: #fef2f2 !important;
  color: #dc2626 !important;
  border: 1px solid #fecaca;
  box-shadow: 0 1px 2px rgba(220, 38, 38, 0.08);
}
html:not(.dark) body:not(.public-body) button.bg-red-600, html:not(.dark) body:not(.public-body) button.bg-red-600 *, html:not(.dark) body:not(.public-body) a.bg-red-600, html:not(.dark) body:not(.public-body) a.bg-red-600 *, html:not(.dark) body:not(.public-body) .btn.bg-red-600, html:not(.dark) body:not(.public-body) .btn.bg-red-600 * {
  color: #dc2626 !important;
}
html:not(.dark) body:not(.public-body) button.bg-red-600:hover, html:not(.dark) body:not(.public-body) a.bg-red-600:hover, html:not(.dark) body:not(.public-body) .btn.bg-red-600:hover {
  background-color: #fee2e2 !important;
  border-color: #fca5a5;
}
html:not(.dark) body:not(.public-body) button.bg-green-600, html:not(.dark) body:not(.public-body) a.bg-green-600, html:not(.dark) body:not(.public-body) .btn.bg-green-600 {
  background-color: #f0fdf4 !important;
  color: #16a34a !important;
  border: 1px solid #bbf7d0;
  box-shadow: 0 1px 2px rgba(22, 163, 74, 0.08);
}
html:not(.dark) body:not(.public-body) button.bg-green-600, html:not(.dark) body:not(.public-body) button.bg-green-600 *, html:not(.dark) body:not(.public-body) a.bg-green-600, html:not(.dark) body:not(.public-body) a.bg-green-600 *, html:not(.dark) body:not(.public-body) .btn.bg-green-600, html:not(.dark) body:not(.public-body) .btn.bg-green-600 * {
  color: #16a34a !important;
}
html:not(.dark) body:not(.public-body) button.bg-green-600:hover, html:not(.dark) body:not(.public-body) a.bg-green-600:hover, html:not(.dark) body:not(.public-body) .btn.bg-green-600:hover {
  background-color: #dcfce7 !important;
  border-color: #86efac;
}
html:not(.dark) body:not(.public-body) button.bg-purple-600, html:not(.dark) body:not(.public-body) a.bg-purple-600, html:not(.dark) body:not(.public-body) .btn.bg-purple-600 {
  background-color: #f5f3ff !important;
  color: #7c3aed !important;
  border: 1px solid #ddd6fe;
  box-shadow: 0 1px 2px rgba(124, 58, 237, 0.08);
}
html:not(.dark) body:not(.public-body) button.bg-purple-600, html:not(.dark) body:not(.public-body) button.bg-purple-600 *, html:not(.dark) body:not(.public-body) a.bg-purple-600, html:not(.dark) body:not(.public-body) a.bg-purple-600 *, html:not(.dark) body:not(.public-body) .btn.bg-purple-600, html:not(.dark) body:not(.public-body) .btn.bg-purple-600 * {
  color: #7c3aed !important;
}
html:not(.dark) body:not(.public-body) button.bg-purple-600:hover, html:not(.dark) body:not(.public-body) a.bg-purple-600:hover, html:not(.dark) body:not(.public-body) .btn.bg-purple-600:hover {
  background-color: #ede9fe !important;
  border-color: #c4b5fd;
}
html:not(.dark) body:not(.public-body) button.bg-indigo-600, html:not(.dark) body:not(.public-body) a.bg-indigo-600, html:not(.dark) body:not(.public-body) .btn.bg-indigo-600 {
  background-color: #eef2ff !important;
  color: #4f46e5 !important;
  border: 1px solid #c7d2fe;
  box-shadow: 0 1px 2px rgba(79, 70, 229, 0.08);
}
html:not(.dark) body:not(.public-body) button.bg-indigo-600, html:not(.dark) body:not(.public-body) button.bg-indigo-600 *, html:not(.dark) body:not(.public-body) a.bg-indigo-600, html:not(.dark) body:not(.public-body) a.bg-indigo-600 *, html:not(.dark) body:not(.public-body) .btn.bg-indigo-600, html:not(.dark) body:not(.public-body) .btn.bg-indigo-600 * {
  color: #4f46e5 !important;
}
html:not(.dark) body:not(.public-body) button.bg-indigo-600:hover, html:not(.dark) body:not(.public-body) a.bg-indigo-600:hover, html:not(.dark) body:not(.public-body) .btn.bg-indigo-600:hover {
  background-color: #e0e7ff !important;
  border-color: #a5b4fc;
}
html:not(.dark) body:not(.public-body) button.bg-pink-600, html:not(.dark) body:not(.public-body) a.bg-pink-600, html:not(.dark) body:not(.public-body) .btn.bg-pink-600 {
  background-color: #fdf2f8 !important;
  color: #db2777 !important;
  border: 1px solid #fbcfe8;
  box-shadow: 0 1px 2px rgba(219, 39, 119, 0.08);
}
html:not(.dark) body:not(.public-body) button.bg-pink-600, html:not(.dark) body:not(.public-body) button.bg-pink-600 *, html:not(.dark) body:not(.public-body) a.bg-pink-600, html:not(.dark) body:not(.public-body) a.bg-pink-600 *, html:not(.dark) body:not(.public-body) .btn.bg-pink-600, html:not(.dark) body:not(.public-body) .btn.bg-pink-600 * {
  color: #db2777 !important;
}
html:not(.dark) body:not(.public-body) button.bg-pink-600:hover, html:not(.dark) body:not(.public-body) a.bg-pink-600:hover, html:not(.dark) body:not(.public-body) .btn.bg-pink-600:hover {
  background-color: #fce7f3 !important;
  border-color: #f9a8d4;
}
html:not(.dark) body:not(.public-body) button.bg-gray-700, html:not(.dark) body:not(.public-body) a.bg-gray-700, html:not(.dark) body:not(.public-body) .btn.bg-gray-700 {
  background-color: #f3f4f6 !important;
  color: var(--dash-text-primary) !important;
  border: 1px solid var(--dash-border-primary);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
html:not(.dark) body:not(.public-body) button.bg-gray-700, html:not(.dark) body:not(.public-body) button.bg-gray-700 *, html:not(.dark) body:not(.public-body) a.bg-gray-700, html:not(.dark) body:not(.public-body) a.bg-gray-700 *, html:not(.dark) body:not(.public-body) .btn.bg-gray-700, html:not(.dark) body:not(.public-body) .btn.bg-gray-700 * {
  color: var(--dash-text-primary) !important;
}
html:not(.dark) body:not(.public-body) button.bg-gray-700:hover, html:not(.dark) body:not(.public-body) a.bg-gray-700:hover, html:not(.dark) body:not(.public-body) .btn.bg-gray-700:hover {
  background-color: #e5e7eb !important;
  border-color: var(--dash-border-secondary);
}
html:not(.dark) body:not(.public-body) [class*=bg-gradient-to-r][class*=from-purple] {
  background: linear-gradient(to right, #7c3aed, #3b82f6) !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.25);
}
html:not(.dark) body:not(.public-body) [class*=bg-gradient-to-r][class*=from-purple], html:not(.dark) body:not(.public-body) [class*=bg-gradient-to-r][class*=from-purple] * {
  color: #fff !important;
}
html:not(.dark) body:not(.public-body) [class*=bg-gradient-to-r][class*=from-purple]:hover {
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.35);
}
html:not(.dark) body:not(.public-body) [class*=bg-gradient-to-r][class*=from-green] {
  background: linear-gradient(to right, #16a34a, #059669) !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(22, 163, 74, 0.25);
}
html:not(.dark) body:not(.public-body) [class*=bg-gradient-to-r][class*=from-green], html:not(.dark) body:not(.public-body) [class*=bg-gradient-to-r][class*=from-green] * {
  color: #fff !important;
}
html:not(.dark) body:not(.public-body) [class*=bg-gradient-to-r][class*=from-green]:hover {
  box-shadow: 0 4px 12px rgba(22, 163, 74, 0.35);
}
html:not(.dark) body:not(.public-body) [class*=bg-gradient-to-r][class*=from-red] {
  background: linear-gradient(to right, #dc2626, #b91c1c) !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.25);
}
html:not(.dark) body:not(.public-body) [class*=bg-gradient-to-r][class*=from-red], html:not(.dark) body:not(.public-body) [class*=bg-gradient-to-r][class*=from-red] * {
  color: #fff !important;
}
html:not(.dark) body:not(.public-body) [class*=bg-gradient-to-r][class*=from-blue] {
  background: linear-gradient(to right, #2563eb, #4f46e5) !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25);
}
html:not(.dark) body:not(.public-body) [class*=bg-gradient-to-r][class*=from-blue], html:not(.dark) body:not(.public-body) [class*=bg-gradient-to-r][class*=from-blue] * {
  color: #fff !important;
}
html:not(.dark) body:not(.public-body) .bg-zinc-800\/40 {
  border-color: var(--dash-border-primary) !important;
}
html:not(.dark) body:not(.public-body) #loading-overlay .text-white,
html:not(.dark) body:not(.public-body) .notification .text-white,
html:not(.dark) body:not(.public-body) [class*=backdrop-blur] .text-white {
  color: #fff !important;
}
html:not(.dark) body:not(.public-body) #notification-message {
  color: #fff !important;
}
html:not(.dark) body:not(.public-body) .feature-card input[type=text],
html:not(.dark) body:not(.public-body) .feature-card input[type=email],
html:not(.dark) body:not(.public-body) .feature-card input[type=password],
html:not(.dark) body:not(.public-body) .feature-card input[type=url],
html:not(.dark) body:not(.public-body) .feature-card input[type=number],
html:not(.dark) body:not(.public-body) .feature-card input[type=tel],
html:not(.dark) body:not(.public-body) .feature-card input[type=search],
html:not(.dark) body:not(.public-body) .feature-card input[type=date],
html:not(.dark) body:not(.public-body) .feature-card input[type=time],
html:not(.dark) body:not(.public-body) .feature-card select,
html:not(.dark) body:not(.public-body) .feature-card textarea {
  background-color: var(--dash-bg-input) !important;
  color: var(--dash-text-primary) !important;
  border-color: var(--dash-border-primary) !important;
}
html:not(.dark) body:not(.public-body) .feature-card input[type=text]::-moz-placeholder, html:not(.dark) body:not(.public-body) .feature-card input[type=email]::-moz-placeholder, html:not(.dark) body:not(.public-body) .feature-card input[type=password]::-moz-placeholder, html:not(.dark) body:not(.public-body) .feature-card input[type=url]::-moz-placeholder, html:not(.dark) body:not(.public-body) .feature-card input[type=number]::-moz-placeholder, html:not(.dark) body:not(.public-body) .feature-card input[type=tel]::-moz-placeholder, html:not(.dark) body:not(.public-body) .feature-card input[type=search]::-moz-placeholder, html:not(.dark) body:not(.public-body) .feature-card input[type=date]::-moz-placeholder, html:not(.dark) body:not(.public-body) .feature-card input[type=time]::-moz-placeholder, html:not(.dark) body:not(.public-body) .feature-card select::-moz-placeholder, html:not(.dark) body:not(.public-body) .feature-card textarea::-moz-placeholder {
  color: var(--dash-text-muted) !important;
}
html:not(.dark) body:not(.public-body) .feature-card input[type=text]::placeholder,
html:not(.dark) body:not(.public-body) .feature-card input[type=email]::placeholder,
html:not(.dark) body:not(.public-body) .feature-card input[type=password]::placeholder,
html:not(.dark) body:not(.public-body) .feature-card input[type=url]::placeholder,
html:not(.dark) body:not(.public-body) .feature-card input[type=number]::placeholder,
html:not(.dark) body:not(.public-body) .feature-card input[type=tel]::placeholder,
html:not(.dark) body:not(.public-body) .feature-card input[type=search]::placeholder,
html:not(.dark) body:not(.public-body) .feature-card input[type=date]::placeholder,
html:not(.dark) body:not(.public-body) .feature-card input[type=time]::placeholder,
html:not(.dark) body:not(.public-body) .feature-card select::placeholder,
html:not(.dark) body:not(.public-body) .feature-card textarea::placeholder {
  color: var(--dash-text-muted) !important;
}
html:not(.dark) body:not(.public-body) .feature-card select option {
  background: var(--dash-bg-secondary);
  color: var(--dash-text-primary);
}
html:not(.dark) body:not(.public-body) .feature-card input[type=file] {
  color: var(--dash-text-secondary) !important;
}
html:not(.dark) body:not(.public-body) .feature-card input[type=radio] + label,
html:not(.dark) body:not(.public-body) .feature-card .form-check-label {
  color: var(--dash-text-primary) !important;
}
html:not(.dark) body:not(.public-body) .feature-card .phase-form {
  background: var(--dash-bg-input) !important;
  border-color: var(--dash-border-primary) !important;
}
html:not(.dark) body:not(.public-body) .search-box input, html:not(.dark) body:not(.public-body) .search-box select {
  color: var(--dash-text-primary) !important;
}
html:not(.dark) body:not(.public-body) .search-box input::-moz-placeholder, html:not(.dark) body:not(.public-body) .search-box select::-moz-placeholder {
  color: var(--dash-text-muted) !important;
}
html:not(.dark) body:not(.public-body) .search-box input::placeholder, html:not(.dark) body:not(.public-body) .search-box select::placeholder {
  color: var(--dash-text-muted) !important;
}
html:not(.dark) body:not(.public-body) .search-box select option {
  background: var(--dash-bg-secondary);
  color: var(--dash-text-primary);
}

html:not(.dark) body:not(.public-body) .ts-wrapper.single .ts-control,
html:not(.dark) body:not(.public-body) .ts-wrapper.multi .ts-control {
  background-color: transparent !important;
  color: var(--dash-text-primary) !important;
}
html:not(.dark) body:not(.public-body) .ts-wrapper .ts-control input {
  color: var(--dash-text-primary) !important;
}
html:not(.dark) body:not(.public-body) .ts-wrapper .ts-control input::-moz-placeholder {
  color: var(--dash-text-muted) !important;
}
html:not(.dark) body:not(.public-body) .ts-wrapper .ts-control input::placeholder {
  color: var(--dash-text-muted) !important;
}
html:not(.dark) body:not(.public-body) .ts-control .item,
html:not(.dark) body:not(.public-body) .ts-wrapper.single .ts-control .item {
  color: var(--dash-text-primary) !important;
}
html:not(.dark) body:not(.public-body) .ts-dropdown {
  background-color: var(--dash-bg-secondary) !important;
  border-color: var(--dash-border-primary) !important;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1) !important;
}
html:not(.dark) body:not(.public-body) .ts-dropdown .ts-dropdown-content {
  background-color: var(--dash-bg-secondary) !important;
}
html:not(.dark) body:not(.public-body) .ts-dropdown .option {
  color: var(--dash-text-primary) !important;
}
html:not(.dark) body:not(.public-body) .ts-dropdown .option:hover,
html:not(.dark) body:not(.public-body) .ts-dropdown .option.active {
  background-color: rgba(124, 58, 237, 0.1) !important;
  color: #7c3aed !important;
}
html:not(.dark) body:not(.public-body) .ts-dropdown .option.selected {
  background-color: rgba(124, 58, 237, 0.15) !important;
}
html:not(.dark) body:not(.public-body) .ts-dropdown .optgroup-header {
  color: var(--dash-text-muted) !important;
}
html:not(.dark) body:not(.public-body) .ts-dropdown .no-results {
  color: var(--dash-text-muted) !important;
}
html:not(.dark) body:not(.public-body) .ts-wrapper .ts-control::after {
  border-color: var(--dash-text-muted) transparent transparent transparent !important;
}
html:not(.dark) body:not(.public-body) .ts-wrapper.dropdown-active .ts-control::after {
  border-color: transparent transparent var(--dash-text-muted) transparent !important;
}
html:not(.dark) body:not(.public-body) .ts-dropdown-content::-webkit-scrollbar-track {
  background: var(--dash-bg-input);
}
html:not(.dark) body:not(.public-body) .ts-dropdown-content::-webkit-scrollbar-thumb {
  background: var(--dash-border-secondary);
}
html:not(.dark) body:not(.public-body) .ts-dropdown-content::-webkit-scrollbar-thumb:hover {
  background: var(--dash-text-muted);
}

html:not(.dark) body:not(.public-body),
html:not(.dark) body.bg-gray-900:not(.public-body) {
  background: var(--dash-bg-primary) !important;
  color: var(--dash-text-primary) !important;
}
html:not(.dark) .bg-gradient-to-br.from-gray-900.via-gray-900.to-purple-900 {
  opacity: 0 !important;
}
html:not(.dark) body:not(.public-body) h1, html:not(.dark) body:not(.public-body) h2, html:not(.dark) body:not(.public-body) h3, html:not(.dark) body:not(.public-body) h4, html:not(.dark) body:not(.public-body) h5, html:not(.dark) body:not(.public-body) h6 {
  color: var(--dash-text-primary);
}
html:not(.dark) .toast {
  background: var(--dash-bg-secondary) !important;
  border-color: var(--dash-border-primary) !important;
  color: var(--dash-text-primary) !important;
}

html.dark body:not(.public-body) h1, html.dark body:not(.public-body) h2, html.dark body:not(.public-body) h3, html.dark body:not(.public-body) h4, html.dark body:not(.public-body) h5, html.dark body:not(.public-body) h6 {
  color: var(--dash-text-primary);
}

html:not(.dark) body:not(.public-body) #ai-chat-widget [class*=bg-gradient], html:not(.dark) body:not(.public-body) #ai-chat-widget [class*=bg-gradient] * {
  color: #fff !important;
}
html:not(.dark) body:not(.public-body) #ai-chat-widget > button.bg-indigo-600 {
  background-color: #4f46e5 !important;
}
html:not(.dark) body:not(.public-body) #ai-chat-widget > button.bg-indigo-600, html:not(.dark) body:not(.public-body) #ai-chat-widget > button.bg-indigo-600 * {
  color: #fff !important;
}
html:not(.dark) body:not(.public-body) #ai-chat-widget button.bg-indigo-600 {
  background-color: #4f46e5 !important;
  border: none !important;
}
html:not(.dark) body:not(.public-body) #ai-chat-widget button.bg-indigo-600, html:not(.dark) body:not(.public-body) #ai-chat-widget button.bg-indigo-600 * {
  color: #fff !important;
}
html:not(.dark) body:not(.public-body) #ai-chat-widget > button > span[style] {
  color: #fff !important;
}
html:not(.dark) body:not(.public-body) #ai-chat-widget .bg-gray-50 {
  background-color: #f9fafb !important;
}
html:not(.dark) body:not(.public-body) #ai-chat-widget .bg-white {
  background-color: #fff !important;
}
html:not(.dark) body:not(.public-body) #ai-chat-widget .text-gray-800 {
  color: #1f2937 !important;
}
html:not(.dark) body:not(.public-body) #ai-chat-widget .text-gray-400 {
  color: #9ca3af !important;
}
html:not(.dark) body:not(.public-body) #ai-chat-widget .text-gray-500 {
  color: #6b7280 !important;
}
html:not(.dark) body:not(.public-body) #ai-chat-widget .text-gray-900 {
  color: #111827 !important;
}
html:not(.dark) body:not(.public-body) #ai-chat-widget .text-indigo-100 {
  color: #e0e7ff !important;
}
html:not(.dark) body:not(.public-body) #ai-chat-widget .text-indigo-700 {
  color: #4338ca !important;
}
html:not(.dark) body:not(.public-body) #ai-chat-widget .border-gray-100 {
  border-color: #f3f4f6 !important;
}
html:not(.dark) body:not(.public-body) #ai-chat-widget .border-gray-200 {
  border-color: #e5e7eb !important;
}
html:not(.dark) body:not(.public-body) #ai-chat-widget input.bg-gray-100 {
  background-color: #f3f4f6 !important;
  color: #111827 !important;
}
html:not(.dark) body:not(.public-body) #ai-chat-widget .shadow-2xl {
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
}

.sender-badge-verified {
  background-color: rgba(34, 197, 94, 0.15);
  color: #22c55e;
}

.sender-badge-unverified {
  background-color: rgba(234, 179, 8, 0.15);
  color: #eab308;
}

.sender-warning {
  background-color: rgba(120, 53, 15, 0.2);
  border: 1px solid rgba(234, 179, 8, 0.3);
  color: #facc15;
}

html:not(.dark) body:not(.public-body) .sender-badge-verified {
  background-color: rgba(34, 197, 94, 0.1);
  color: #15803d;
}
html:not(.dark) body:not(.public-body) .sender-badge-unverified {
  background-color: rgba(234, 179, 8, 0.1);
  color: #a16207;
}
html:not(.dark) body:not(.public-body) .sender-warning {
  background-color: rgba(254, 243, 199, 0.7);
  border-color: rgba(234, 179, 8, 0.4);
  color: #92400e;
}

.no-senders-modal {
  background: var(--dash-bg-card);
  border: 1px solid var(--dash-border-primary);
}

.no-senders-modal-body {
  background: var(--dash-bg-card);
}

.no-senders-modal-footer {
  background: var(--dash-bg-input);
  border-top: 1px solid var(--dash-border-primary);
}

.no-senders-modal-cancel {
  color: var(--dash-text-secondary);
  border: 1px solid var(--dash-border-primary);
  background: var(--dash-bg-card);
}
.no-senders-modal-cancel:hover {
  background: var(--dash-bg-input);
}

.use-template-modal {
  background: var(--dash-bg-card);
  border: 1px solid var(--dash-border-primary);
}

.use-template-modal-body {
  background: var(--dash-bg-card);
}

.use-template-modal-select {
  background: var(--dash-bg-input);
  border: 1px solid var(--dash-border-primary);
  color: var(--dash-text-primary);
}
.use-template-modal-select option {
  background: var(--dash-bg-secondary);
  color: var(--dash-text-primary);
}

.use-template-modal-footer {
  border-top: 1px solid var(--dash-border-primary);
}

.use-template-modal-cancel {
  color: var(--dash-text-secondary);
  border: 1px solid var(--dash-border-primary);
  background: var(--dash-bg-card);
}
.use-template-modal-cancel:hover {
  background: var(--dash-bg-input);
}

.delete-team-modal {
  background: var(--dash-bg-card);
  border: 1px solid var(--dash-border-primary);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
}

.delete-team-modal-input {
  background: var(--dash-bg-input);
  border: 1px solid var(--dash-border-primary);
  color: var(--dash-text-primary);
}
.delete-team-modal-input::-moz-placeholder {
  color: var(--dash-text-muted);
}
.delete-team-modal-input::placeholder {
  color: var(--dash-text-muted);
}
.delete-team-modal-input:focus {
  outline: none;
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

.delete-team-modal-footer {
  border-top: 1px solid var(--dash-border-primary);
}

.delete-team-modal-cancel {
  color: var(--dash-text-secondary);
  border: 1px solid var(--dash-border-primary);
  background: var(--dash-bg-card);
}
.delete-team-modal-cancel:hover {
  background: var(--dash-bg-input);
}

.public-body {
  --pub-bg-primary: #ffffff;
  --pub-bg-secondary: #f8f7fc;
  --pub-bg-tertiary: #f0eef7;
  --pub-bg-card: #ffffff;
  --pub-bg-card-hover: #f8f7fc;
  --pub-bg-input: #f8f7fc;
  --pub-border: #d3d0e6;
  --pub-border-subtle: #e8e5f0;
  --pub-text-primary: #1a0e3e;
  --pub-text-secondary: #5a5478;
  --pub-text-muted: #8e88a4;
  --pub-accent: #7c3aed;
  --pub-accent-hover: #6d28d9;
  --pub-accent-light: #a78bfa;
  --pub-accent-soft: rgba(124, 58, 237, 0.08);
  --pub-accent-gradient: linear-gradient(135deg, #7c3aed, #a855f7);
  --pub-shadow-card: 2px 6px 30px 0 rgba(124, 58, 237, 0.08);
  --pub-shadow-card-hover: 2px 6px 30px 0 rgba(124, 58, 237, 0.2);
  --pub-overlay-light: rgba(124, 58, 237, 0.02);
  --pub-overlay-medium: rgba(124, 58, 237, 0.04);
  --pub-scrollbar-track: #f0eef7;
  --pub-scrollbar-thumb: #c4bdd8;
  --pub-scrollbar-thumb-hover: #9b91b8;
  --pub-glass-bg: rgba(255, 255, 255, 0.55);
  --pub-glass-border: rgba(211, 208, 230, 0.5);
  --pub-section-gradient: linear-gradient(180deg, #fff 40%, #f0eef7 80%, #e4dff5 100%);
}

html.dark .public-body {
  --pub-bg-primary: #0c0a1a;
  --pub-bg-secondary: #141028;
  --pub-bg-tertiary: #1e1836;
  --pub-bg-card: #161230;
  --pub-bg-card-hover: #1e1836;
  --pub-bg-input: #1e1836;
  --pub-border: #2a2448;
  --pub-border-subtle: #1e1836;
  --pub-text-primary: #f0ecff;
  --pub-text-secondary: #a8a0c4;
  --pub-text-muted: #6e6790;
  --pub-accent: #a78bfa;
  --pub-accent-hover: #8b5cf6;
  --pub-accent-light: #c4b5fd;
  --pub-accent-soft: rgba(167, 139, 250, 0.12);
  --pub-accent-gradient: linear-gradient(135deg, #8b5cf6, #c084fc);
  --pub-shadow-card: 2px 6px 30px 0 rgba(0, 0, 0, 0.25);
  --pub-shadow-card-hover: 2px 6px 30px 0 rgba(0, 0, 0, 0.4);
  --pub-overlay-light: rgba(167, 139, 250, 0.03);
  --pub-overlay-medium: rgba(167, 139, 250, 0.06);
  --pub-scrollbar-track: #141028;
  --pub-scrollbar-thumb: #2a2448;
  --pub-scrollbar-thumb-hover: #3d3566;
  --pub-glass-bg: rgba(22, 18, 48, 0.55);
  --pub-glass-border: rgba(42, 36, 72, 0.5);
  --pub-section-gradient: linear-gradient(180deg, #0c0a1a 40%, #141028 80%, #1e1836 100%);
}

.public-body {
  background: var(--pub-bg-primary);
  color: var(--pub-text-primary);
  font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  position: relative;
  overflow-x: hidden;
  transition: background 0.3s ease, color 0.3s ease;
}
.public-body h1, .public-body h2, .public-body h3, .public-body h4, .public-body h5, .public-body h6 {
  font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  letter-spacing: -0.02em;
}
.public-body h1 {
  letter-spacing: -0.03em;
}

html.dark .public-body {
  background: #0c0a1a;
}

.public-body .glass-card {
  background: var(--pub-glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--pub-glass-border);
  border-radius: 20px;
  box-shadow: var(--pub-shadow-card);
  transition: all 0.2s ease;
}
.public-body .glass-card:hover {
  box-shadow: var(--pub-shadow-card-hover);
  transform: translateY(-4px);
}

.section-curved {
  margin-top: -40px;
  border-radius: 40px 40px 0 0;
  position: relative;
  z-index: 2;
}

.public-body .btn-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  border-radius: 42px;
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.03em;
  transition: all 0.2s ease;
}
.public-body .btn-pill--primary {
  background: var(--pub-accent-gradient);
  color: #fff;
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.3);
}
.public-body .btn-pill--primary:hover {
  box-shadow: 0 6px 20px rgba(124, 58, 237, 0.4);
  transform: translateY(-2px);
}
.public-body .btn-pill--outline {
  background: transparent;
  color: var(--pub-accent);
  border: 2px solid var(--pub-accent);
}
.public-body .btn-pill--outline:hover {
  background: var(--pub-accent-soft);
  transform: translateY(-2px);
}

.section-gradient {
  background: var(--pub-section-gradient);
}

.section-muted {
  background: #faf9fc;
}

html.dark .section-muted {
  background: #110e24;
}

.section-accent {
  background: #f5f0ff;
}

html.dark .section-accent {
  background: #140e2a;
}

.public-body {
  scrollbar-color: var(--pub-scrollbar-thumb) var(--pub-scrollbar-track);
}
.public-body, .public-body * {
  scrollbar-width: thin;
  scrollbar-color: var(--pub-scrollbar-thumb) var(--pub-scrollbar-track);
}
.public-body ::-webkit-scrollbar {
  width: 10px;
}
.public-body ::-webkit-scrollbar-track {
  background: var(--pub-scrollbar-track);
  border-radius: 4px;
}
.public-body ::-webkit-scrollbar-thumb {
  background: var(--pub-scrollbar-thumb);
  border-radius: 4px;
}
.public-body ::-webkit-scrollbar-thumb:hover {
  background: var(--pub-scrollbar-thumb-hover);
}

.public-body .checkout-card,
.public-body .subscription-card,
.public-body .plan-card,
.public-body .success-card {
  background: var(--pub-glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--pub-glass-border);
  border-radius: 20px;
  box-shadow: var(--pub-shadow-card);
  transition: all 0.2s ease;
}
.public-body .checkout-card:hover,
.public-body .subscription-card:hover,
.public-body .plan-card:hover,
.public-body .success-card:hover {
  box-shadow: var(--pub-shadow-card-hover);
  transform: translateY(-4px);
}
.public-body .plan-card.popular {
  border: 2px solid var(--pub-accent);
  background: var(--pub-accent-soft);
}

.public-body .blog-content p {
  color: var(--pub-text-secondary);
}
.public-body .blog-content h2 {
  color: var(--pub-text-primary);
}
.public-body .blog-content h3 {
  color: var(--pub-text-primary);
}
.public-body .blog-content blockquote {
  border-left-color: var(--pub-accent);
  color: var(--pub-text-secondary);
}

.public-body #card-element,
.public-body .StripeElement {
  padding: 16px;
  border: 1px solid var(--pub-border);
  border-radius: 8px;
  color: var(--pub-text-primary);
  background: var(--pub-bg-input);
  box-sizing: border-box;
  transition: box-shadow 150ms ease, border-color 150ms ease;
}
.public-body .StripeElement--focus {
  border-color: var(--pub-accent);
  box-shadow: 0 0 0 3px var(--pub-accent-soft);
}
.public-body .StripeElement--invalid {
  border-color: #fa755a;
}

.public-body .stat-card {
  background: var(--pub-glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--pub-glass-border);
  transition: all 0.2s ease;
}
.public-body .stat-card:hover {
  box-shadow: var(--pub-shadow-card-hover);
  transform: translateY(-2px);
}

.public-body .category-pill {
  background: var(--pub-bg-tertiary);
  border: 1px solid var(--pub-border);
}

.public-body .sidebar-sticky::-webkit-scrollbar-track {
  background: var(--pub-overlay-medium);
}
.public-body .sidebar-sticky::-webkit-scrollbar-thumb {
  background: var(--pub-scrollbar-thumb);
}
.public-body .sidebar-sticky::-webkit-scrollbar-thumb:hover {
  background: var(--pub-scrollbar-thumb-hover);
}

.theme-toggle-public {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--pub-border);
  background: var(--pub-glass-bg);
  backdrop-filter: blur(8px);
  color: var(--pub-text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
}
.theme-toggle-public:hover {
  background: var(--pub-accent-soft);
  color: var(--pub-accent);
  border-color: var(--pub-accent);
}
.theme-toggle-public svg {
  width: 18px;
  height: 18px;
}
.theme-toggle-public .icon-sun,
.theme-toggle-public .icon-moon {
  display: none;
}

html.dark .theme-toggle-public .icon-sun {
  display: block;
}

html:not(.dark) .theme-toggle-public .icon-moon {
  display: block;
}

.public-body #navbar {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

html:not(.dark) .public-body #navbar .text-white,
html:not(.dark) .public-body #navbar .text-xl.font-bold.text-white {
  color: var(--pub-text-primary);
}
html:not(.dark) .public-body #navbar .text-zinc-300,
html:not(.dark) .public-body #navbar .text-gray-300 {
  color: var(--pub-text-secondary);
}
html:not(.dark) .public-body #navbar .hover\:text-white:hover {
  color: var(--pub-text-primary);
}
html:not(.dark) .public-body #navbar.navbar-scrolled {
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--pub-border);
  box-shadow: 0 4px 20px rgba(124, 58, 237, 0.06) !important;
}
html:not(.dark) .public-body #language-dropdown-nav,
html:not(.dark) .public-body #resources-dropdown-menu {
  background: var(--pub-bg-card);
  border: 1px solid var(--pub-border);
  box-shadow: var(--pub-shadow-card-hover);
}
html:not(.dark) .public-body #language-dropdown-nav a,
html:not(.dark) .public-body #resources-dropdown-menu a {
  color: var(--pub-text-secondary);
}
html:not(.dark) .public-body #language-dropdown-nav a:hover,
html:not(.dark) .public-body #resources-dropdown-menu a:hover {
  background: var(--pub-bg-tertiary);
  color: var(--pub-text-primary);
}
html:not(.dark) .public-body #language-switcher-nav {
  color: var(--pub-text-secondary);
}
html:not(.dark) .public-body #language-switcher-nav:hover {
  background: var(--pub-overlay-medium);
}
html:not(.dark) .public-body #mobile-menu-button {
  color: var(--pub-text-secondary);
}
html:not(.dark) .public-body #mobile-menu-button:hover {
  color: var(--pub-text-primary);
}
html:not(.dark) .public-body a.text-pink-400 {
  color: #7c3aed;
}
html:not(.dark) .public-body a.text-pink-400:hover {
  color: #6d28d9;
}

html:not(.dark) .public-body #mobile-menu {
  background: var(--pub-bg-primary) !important;
}
html:not(.dark) .public-body #mobile-menu .text-white {
  color: var(--pub-text-primary);
}
html:not(.dark) .public-body #mobile-menu .text-gray-300,
html:not(.dark) .public-body #mobile-menu .text-gray-400 {
  color: var(--pub-text-secondary);
}
html:not(.dark) .public-body #mobile-menu .text-gray-500 {
  color: var(--pub-text-muted);
}
html:not(.dark) .public-body #mobile-menu .text-gray-600 {
  color: var(--pub-text-muted);
}
html:not(.dark) .public-body #mobile-menu .border-gray-800 {
  border-color: var(--pub-border);
}
html:not(.dark) .public-body #mobile-menu a.hover\:text-white:hover {
  color: var(--pub-text-primary);
}
html:not(.dark) .public-body #mobile-menu a.hover\:bg-gray-800\/50:hover {
  background: var(--pub-bg-tertiary);
}

html:not(.dark) .public-body footer {
  border-top-color: var(--pub-border);
}
html:not(.dark) .public-body footer .text-white {
  color: var(--pub-text-primary);
}
html:not(.dark) .public-body footer .text-gray-300 {
  color: var(--pub-text-secondary);
}
html:not(.dark) .public-body footer .text-gray-400 {
  color: var(--pub-text-muted);
}
html:not(.dark) .public-body footer input[type=email] {
  background: var(--pub-bg-input) !important;
  border-color: var(--pub-border) !important;
  color: var(--pub-text-primary) !important;
}
html:not(.dark) .public-body footer input[type=email]::-moz-placeholder {
  color: var(--pub-text-muted) !important;
}
html:not(.dark) .public-body footer input[type=email]::placeholder {
  color: var(--pub-text-muted) !important;
}
html:not(.dark) .public-body footer input[type=email]:focus {
  border-color: var(--pub-accent) !important;
}
html:not(.dark) .public-body footer .bg-gray-800\/50 {
  background: var(--pub-bg-card);
  border-color: var(--pub-border);
}
html:not(.dark) .public-body footer .border-rose-900\/50 {
  border-color: var(--pub-border);
}

.public-body a, .public-body button, .public-body input, .public-body select, .public-body textarea {
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.public-body input[type=text].pub-input,
.public-body input[type=email].pub-input,
.public-body input[type=password].pub-input,
.public-body input[type=url].pub-input,
.public-body input[type=number].pub-input,
.public-body input[type=tel].pub-input,
.public-body input[type=search].pub-input,
.public-body input[type=date].pub-input,
.public-body select.pub-input,
.public-body textarea.pub-input {
  background: var(--pub-bg-input);
  border: 1px solid var(--pub-border);
  color: var(--pub-text-primary);
  border-radius: 8px;
  transition: all 0.15s ease;
}
.public-body input[type=text].pub-input::-moz-placeholder, .public-body input[type=email].pub-input::-moz-placeholder, .public-body input[type=password].pub-input::-moz-placeholder, .public-body input[type=url].pub-input::-moz-placeholder, .public-body input[type=number].pub-input::-moz-placeholder, .public-body input[type=tel].pub-input::-moz-placeholder, .public-body input[type=search].pub-input::-moz-placeholder, .public-body input[type=date].pub-input::-moz-placeholder, .public-body select.pub-input::-moz-placeholder, .public-body textarea.pub-input::-moz-placeholder {
  color: var(--pub-text-muted);
}
.public-body input[type=text].pub-input::placeholder,
.public-body input[type=email].pub-input::placeholder,
.public-body input[type=password].pub-input::placeholder,
.public-body input[type=url].pub-input::placeholder,
.public-body input[type=number].pub-input::placeholder,
.public-body input[type=tel].pub-input::placeholder,
.public-body input[type=search].pub-input::placeholder,
.public-body input[type=date].pub-input::placeholder,
.public-body select.pub-input::placeholder,
.public-body textarea.pub-input::placeholder {
  color: var(--pub-text-muted);
}
.public-body input[type=text].pub-input:focus,
.public-body input[type=email].pub-input:focus,
.public-body input[type=password].pub-input:focus,
.public-body input[type=url].pub-input:focus,
.public-body input[type=number].pub-input:focus,
.public-body input[type=tel].pub-input:focus,
.public-body input[type=search].pub-input:focus,
.public-body input[type=date].pub-input:focus,
.public-body select.pub-input:focus,
.public-body textarea.pub-input:focus {
  outline: none;
  border-color: var(--pub-accent);
  box-shadow: 0 0 0 3px var(--pub-accent-soft);
}

.public-body .btn-primary {
  background: var(--pub-accent-gradient) !important;
  border: none !important;
  border-radius: 42px !important;
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.3);
  font-weight: 700;
  letter-spacing: 0.03em;
  transition: all 0.2s ease;
}
.public-body .btn-primary::before {
  display: none !important;
}
.public-body .btn-primary:hover {
  box-shadow: 0 6px 20px rgba(124, 58, 237, 0.4);
  transform: translateY(-2px);
}

html:not(.dark) .public-body.bg-gray-900,
html:not(.dark) .public-body .bg-gray-900 {
  background-color: var(--pub-bg-primary) !important;
}
html:not(.dark) .public-body .bg-gray-800 {
  background-color: var(--pub-bg-secondary) !important;
}
html:not(.dark) .public-body .bg-gray-800\/50,
html:not(.dark) .public-body .bg-gray-800\/40 {
  background-color: var(--pub-bg-card) !important;
}
html:not(.dark) .public-body .bg-zinc-800,
html:not(.dark) .public-body .bg-zinc-800\/40,
html:not(.dark) .public-body .bg-zinc-800\/50,
html:not(.dark) .public-body .bg-zinc-800\/60,
html:not(.dark) .public-body .bg-zinc-900\/50 {
  background-color: var(--pub-bg-card) !important;
}
html:not(.dark) .public-body .bg-gray-900\/40 {
  background-color: var(--pub-bg-card) !important;
}
html:not(.dark) .public-body .bg-black\/20,
html:not(.dark) .public-body .bg-black\/30,
html:not(.dark) .public-body .bg-black\/40,
html:not(.dark) .public-body .bg-black\/50 {
  background-color: var(--pub-overlay-light) !important;
}
html:not(.dark) .public-body .bg-gray-700,
html:not(.dark) .public-body .bg-gray-700\/50 {
  background-color: var(--pub-bg-tertiary) !important;
}
html:not(.dark) .public-body .bg-zinc-900:not(.bg-gradient-to-r .bg-zinc-900) {
  background-color: var(--pub-bg-secondary) !important;
}
html:not(.dark) .public-body [class*=bg-gradient-to-r] > .bg-zinc-900 {
  background-color: var(--pub-bg-secondary) !important;
  color: var(--pub-text-primary) !important;
}
html:not(.dark) .public-body .text-white:not([class*=bg-gradient] .text-white):not(.btn-primary .text-white):not(.btn-primary):not([style*=gradient]) {
  color: var(--pub-text-primary) !important;
}
html:not(.dark) .public-body .text-gray-100,
html:not(.dark) .public-body .text-gray-200 {
  color: var(--pub-text-primary) !important;
}
html:not(.dark) .public-body .text-gray-300,
html:not(.dark) .public-body .text-gray-400,
html:not(.dark) .public-body .text-zinc-300,
html:not(.dark) .public-body .text-zinc-400 {
  color: var(--pub-text-secondary) !important;
}
html:not(.dark) .public-body .text-gray-500,
html:not(.dark) .public-body .text-zinc-500 {
  color: var(--pub-text-muted) !important;
}
html:not(.dark) .public-body [class*=bg-gradient-to-r], html:not(.dark) .public-body [class*=bg-gradient-to-r] .text-white, html:not(.dark) .public-body [class*=bg-gradient-to-r] *,
html:not(.dark) .public-body [class*=bg-gradient-to-br],
html:not(.dark) .public-body [class*=bg-gradient-to-br] .text-white,
html:not(.dark) .public-body [class*=bg-gradient-to-br] *,
html:not(.dark) .public-body [class*=bg-gradient-to-bl],
html:not(.dark) .public-body [class*=bg-gradient-to-bl] .text-white,
html:not(.dark) .public-body [class*=bg-gradient-to-bl] *,
html:not(.dark) .public-body [class*=bg-gradient-to-t],
html:not(.dark) .public-body [class*=bg-gradient-to-t] .text-white,
html:not(.dark) .public-body [class*=bg-gradient-to-t] *,
html:not(.dark) .public-body [class*=bg-gradient-to-b],
html:not(.dark) .public-body [class*=bg-gradient-to-b] .text-white,
html:not(.dark) .public-body [class*=bg-gradient-to-b] *,
html:not(.dark) .public-body [class*=bg-gradient-to-l],
html:not(.dark) .public-body [class*=bg-gradient-to-l] .text-white,
html:not(.dark) .public-body [class*=bg-gradient-to-l] *,
html:not(.dark) .public-body .btn-primary,
html:not(.dark) .public-body .btn-primary .text-white,
html:not(.dark) .public-body .btn-primary *,
html:not(.dark) .public-body [style*=gradient],
html:not(.dark) .public-body [style*=gradient] .text-white,
html:not(.dark) .public-body [style*=gradient] * {
  color: #fff !important;
}
html:not(.dark) .public-body [class*=bg-green-].text-white, html:not(.dark) .public-body [class*=bg-green-] .text-white,
html:not(.dark) .public-body [class*=bg-purple-].text-white,
html:not(.dark) .public-body [class*=bg-purple-] .text-white,
html:not(.dark) .public-body [class*=bg-indigo-].text-white,
html:not(.dark) .public-body [class*=bg-indigo-] .text-white,
html:not(.dark) .public-body [class*=bg-blue-].text-white,
html:not(.dark) .public-body [class*=bg-blue-] .text-white,
html:not(.dark) .public-body [class*=bg-red-].text-white,
html:not(.dark) .public-body [class*=bg-red-] .text-white,
html:not(.dark) .public-body [class*=bg-rose-].text-white,
html:not(.dark) .public-body [class*=bg-rose-] .text-white {
  color: #fff !important;
}
html:not(.dark) .public-body .border-gray-700,
html:not(.dark) .public-body .border-gray-600,
html:not(.dark) .public-body .border-gray-800,
html:not(.dark) .public-body .border-zinc-700,
html:not(.dark) .public-body .border-zinc-600,
html:not(.dark) .public-body .border-zinc-800 {
  border-color: var(--pub-border) !important;
}
html:not(.dark) .public-body .border-white\/10,
html:not(.dark) .public-body .border-white\/5 {
  border-color: var(--pub-border) !important;
}
html:not(.dark) .public-body .border-rose-900\/50 {
  border-color: var(--pub-border) !important;
}
html:not(.dark) .public-body input.border-zinc-600, html:not(.dark) .public-body select.border-zinc-600, html:not(.dark) .public-body textarea.border-zinc-600 {
  border-color: var(--pub-border) !important;
}
html:not(.dark) .public-body .text-gray-600 {
  color: var(--pub-text-muted) !important;
}
html:not(.dark) .public-body .hover\:bg-gray-700:hover,
html:not(.dark) .public-body .hover\:bg-gray-800:hover,
html:not(.dark) .public-body .hover\:bg-zinc-700:hover,
html:not(.dark) .public-body .hover\:bg-gray-800\/50:hover,
html:not(.dark) .public-body .hover\:bg-gray-600:hover,
html:not(.dark) .public-body .hover\:bg-zinc-700\/60:hover {
  background-color: var(--pub-bg-tertiary) !important;
}
html:not(.dark) .public-body .hover\:text-white:hover {
  color: var(--pub-text-primary) !important;
}
html:not(.dark) .public-body button.bg-gray-700, html:not(.dark) .public-body button.bg-gray-600, html:not(.dark) .public-body a.bg-gray-700, html:not(.dark) .public-body a.bg-gray-600 {
  background-color: var(--pub-bg-tertiary) !important;
  color: var(--pub-text-primary) !important;
}
html:not(.dark) .public-body input.bg-gray-700, html:not(.dark) .public-body input.bg-gray-800, html:not(.dark) .public-body input.bg-zinc-700, html:not(.dark) .public-body input.bg-zinc-800, html:not(.dark) .public-body select.bg-gray-700, html:not(.dark) .public-body select.bg-gray-800, html:not(.dark) .public-body select.bg-zinc-700, html:not(.dark) .public-body select.bg-zinc-800, html:not(.dark) .public-body textarea.bg-gray-700, html:not(.dark) .public-body textarea.bg-gray-800, html:not(.dark) .public-body textarea.bg-zinc-700, html:not(.dark) .public-body textarea.bg-zinc-800 {
  background-color: var(--pub-bg-input) !important;
  color: var(--pub-text-primary) !important;
  border-color: var(--pub-border) !important;
}
html:not(.dark) .public-body .placeholder-gray-400::-moz-placeholder, html:not(.dark) .public-body .placeholder-gray-500::-moz-placeholder {
  color: var(--pub-text-muted) !important;
}
html:not(.dark) .public-body .placeholder-gray-400::placeholder,
html:not(.dark) .public-body .placeholder-gray-500::placeholder {
  color: var(--pub-text-muted) !important;
}
html:not(.dark) .public-body .from-gray-900,
html:not(.dark) .public-body .from-gray-800 {
  --tw-gradient-from: var(--pub-bg-primary) !important;
}
html:not(.dark) .public-body .to-gray-900,
html:not(.dark) .public-body .to-gray-800 {
  --tw-gradient-to: var(--pub-bg-primary) !important;
}
html:not(.dark) .public-body .via-gray-900,
html:not(.dark) .public-body .via-gray-800 {
  --tw-gradient-via: var(--pub-bg-primary) !important;
}
html:not(.dark) .public-body .shadow-2xl,
html:not(.dark) .public-body .shadow-xl {
  box-shadow: var(--pub-shadow-card) !important;
}
html:not(.dark) .public-body .divide-gray-700 > * + *,
html:not(.dark) .public-body .divide-zinc-700 > * + * {
  border-color: var(--pub-border) !important;
}
html:not(.dark) .public-body .ring-gray-700,
html:not(.dark) .public-body .ring-zinc-700 {
  --tw-ring-color: var(--pub-border) !important;
}
html:not(.dark) .public-body #ai-chat-widget {
  color: revert;
}
html:not(.dark) .public-body #ai-chat-widget .text-white {
  color: #fff !important;
}
html:not(.dark) .public-body #ai-chat-widget .text-gray-800 {
  color: #1f2937 !important;
}
html:not(.dark) .public-body #ai-chat-widget .text-gray-900 {
  color: #111827 !important;
}
html:not(.dark) .public-body #ai-chat-widget .text-gray-200 {
  color: #e5e7eb !important;
}
html:not(.dark) .public-body #ai-chat-widget .text-gray-400 {
  color: #9ca3af !important;
}
html:not(.dark) .public-body #ai-chat-widget .text-gray-500 {
  color: #6b7280 !important;
}
html:not(.dark) .public-body #ai-chat-widget .text-indigo-100 {
  color: #e0e7ff !important;
}
html:not(.dark) .public-body #ai-chat-widget .text-indigo-700 {
  color: #4338ca !important;
}
html:not(.dark) .public-body #ai-chat-widget .text-indigo-300 {
  color: #a5b4fc !important;
}
html:not(.dark) .public-body #ai-chat-widget .text-pink-500 {
  color: #ec4899 !important;
}
html:not(.dark) .public-body #ai-chat-widget .bg-white {
  background-color: #fff !important;
}
html:not(.dark) .public-body #ai-chat-widget .bg-gray-50 {
  background-color: #f9fafb !important;
}
html:not(.dark) .public-body #ai-chat-widget .bg-gray-100 {
  background-color: #f3f4f6 !important;
}
html:not(.dark) .public-body #ai-chat-widget .bg-gray-200 {
  background-color: #e5e7eb !important;
}
html:not(.dark) .public-body #ai-chat-widget .bg-indigo-50 {
  background-color: #eef2ff !important;
}
html:not(.dark) .public-body #ai-chat-widget .border-gray-100 {
  border-color: #f3f4f6 !important;
}
html:not(.dark) .public-body #ai-chat-widget .border-gray-200 {
  border-color: #e5e7eb !important;
}
html:not(.dark) .public-body #ai-chat-widget .border-indigo-100 {
  border-color: #e0e7ff !important;
}
html:not(.dark) .public-body #ai-chat-widget .placeholder-gray-500::-moz-placeholder {
  color: #6b7280 !important;
}
html:not(.dark) .public-body #ai-chat-widget .placeholder-gray-500::placeholder {
  color: #6b7280 !important;
}
html:not(.dark) .public-body #ai-chat-widget input.bg-gray-100 {
  background-color: #f3f4f6 !important;
  color: #111827 !important;
  border-color: transparent !important;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.animate-fade-in {
  opacity: 0;
  animation: fadeIn 0.8s ease-out forwards;
}

.animate-fade-in:nth-child(1) {
  animation-delay: 0.1s;
}

.animate-fade-in:nth-child(2) {
  animation-delay: 0.2s;
}

.animate-fade-in:nth-child(3) {
  animation-delay: 0.3s;
}

.animate-fade-in:nth-child(4) {
  animation-delay: 0.4s;
}

.animate-fade-in:nth-child(5) {
  animation-delay: 0.5s;
}

.animate-fade-in:nth-child(6) {
  animation-delay: 0.6s;
}

.animate-fade-in:nth-child(7) {
  animation-delay: 0.7s;
}

.animate-fade-in:nth-child(8) {
  animation-delay: 0.8s;
}

.animate-fade-in:nth-child(9) {
  animation-delay: 0.9s;
}

.animate-fade-in:nth-child(10) {
  animation-delay: 1s;
}

.fade-in-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.fade-in-scroll.fade-in-visible {
  opacity: 1;
  transform: translateY(0);
}

.fade-in-scroll:nth-child(1) {
  transition-delay: 0s;
}

.fade-in-scroll:nth-child(2) {
  transition-delay: 0.1s;
}

.fade-in-scroll:nth-child(3) {
  transition-delay: 0.2s;
}

.fade-in-scroll:nth-child(4) {
  transition-delay: 0.3s;
}

.fade-in-scroll:nth-child(5) {
  transition-delay: 0.4s;
}

.fade-in-scroll:nth-child(6) {
  transition-delay: 0.5s;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.slide-in-text {
  opacity: 0;
  animation: slideIn 0.6s ease-out forwards;
}

.hover-lift {
  transition: all 0.2s ease;
}
.hover-lift:hover {
  transform: translateY(-6px);
  box-shadow: 2px 6px 30px 0 rgba(124, 58, 237, 0.2);
}

.hover-scale {
  transition: transform 0.2s ease;
}
.hover-scale:hover {
  transform: scale(1.03);
}

.timeline-item {
  opacity: 0;
  transform: translateX(-30px);
  transition: all 0.6s ease-out;
}
.timeline-item.fade-in-visible {
  opacity: 1;
  transform: translateX(0);
}

.team-card {
  transition: box-shadow 0.15s ease;
}

.value-card {
  transition: all 0.2s ease;
}
.value-card:hover {
  transform: translateY(-4px);
  box-shadow: 2px 6px 30px 0 rgba(124, 58, 237, 0.18);
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin-right: 8px;
}

.laptop {
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
  position: relative;
}

.screen {
  background: #000 !important;
  border-radius: 8px 8px 0 0 !important;
  overflow: hidden;
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5);
}

.stat-card {
  background: var(--pub-bg-card, rgba(255, 255, 255, 0.05));
  border: 1px solid var(--pub-border, rgba(255, 255, 255, 0.1));
  transition: box-shadow 0.15s ease;
}
.stat-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.chart-container {
  position: relative;
  height: 100%;
}

@media (max-width: 768px) {
  .hover-lift:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(124, 58, 237, 0.08);
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
html {
  scroll-behavior: auto;
}

* {
  scrollbar-width: thin;
  scrollbar-color: #d4d4d8 #f4f4f5;
}

html.dark * {
  scrollbar-color: #3f3f46 #18181b;
}

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

::-webkit-scrollbar-track {
  background: #f4f4f5;
  border-radius: 4px;
}

html.dark ::-webkit-scrollbar-track {
  background: #18181b;
}

::-webkit-scrollbar-thumb {
  background: #d4d4d8;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #a1a1aa;
}

html.dark ::-webkit-scrollbar-thumb {
  background: #3f3f46;
}
html.dark ::-webkit-scrollbar-thumb:hover {
  background: #52525b;
}

.transition-all {
  transition: all 0.15s ease;
}

.transition-transform {
  transition: transform 0.15s ease;
}

.transition-opacity {
  transition: opacity 0.15s ease;
}

.transform-gpu {
  transform: translateZ(0);
  will-change: transform;
}

.decorative-circle {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

.decorative-circle--purple {
  background: radial-gradient(circle, rgba(124, 58, 237, 0.06) 0%, transparent 70%);
}

.decorative-circle--light {
  background: radial-gradient(circle, rgba(168, 85, 247, 0.04) 0%, transparent 70%);
}

html.dark .decorative-circle--purple {
  background: radial-gradient(circle, rgba(167, 139, 250, 0.06) 0%, transparent 70%);
}
html.dark .decorative-circle--light {
  background: radial-gradient(circle, rgba(196, 181, 253, 0.04) 0%, transparent 70%);
}

@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-12px);
  }
}
.floating-element {
  animation: float 6s ease-in-out infinite;
}

.gradient-text-animated {
  background: linear-gradient(135deg, #7c3aed, #a855f7, #7c3aed);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientShift 4s ease infinite;
}

@keyframes gradientShift {
  0% {
    background-position: 0% center;
  }
  50% {
    background-position: 100% center;
  }
  100% {
    background-position: 0% center;
  }
}
.section-alt {
  background: var(--pub-bg-secondary, #f8f7fc);
}

html.dark .section-alt {
  background: var(--pub-bg-secondary, #141028);
}

.spotlight-gallery {
  max-width: 960px;
  margin: 0 auto;
}

.spotlight-gallery__main {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  background: var(--pub-bg-tertiary, #f4f4f5);
  border: 1px solid var(--pub-border, #e4e4e7);
  box-shadow: 2px 6px 30px 0 rgba(124, 58, 237, 0.08);
  cursor: pointer;
  transition: box-shadow 0.3s ease;
}
.spotlight-gallery__main:hover {
  box-shadow: 2px 8px 40px 0 rgba(124, 58, 237, 0.18);
}

.spotlight-gallery__stage {
  position: relative;
  aspect-ratio: 16/10;
  overflow: hidden;
}

.spotlight-gallery__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  opacity: 0;
  transition: opacity 0.5s ease, transform 0.5s ease;
  transform: scale(1.02);
}
.spotlight-gallery__image.active {
  opacity: 1;
  transform: scale(1);
  z-index: 1;
}

.spotlight-gallery__progress {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(255, 255, 255, 0.15);
  z-index: 2;
}

.spotlight-gallery__progress-bar {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--pub-accent, #7c3aed), #a78bfa);
  border-radius: 0 2px 2px 0;
  transition: width 0.1s linear;
}

.spotlight-gallery.playing .spotlight-gallery__progress-bar {
  animation: spotlightProgress 5s linear forwards;
}

@keyframes spotlightProgress {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}
.spotlight-gallery__thumbs {
  display: flex;
  gap: 12px;
  margin-top: 16px;
  justify-content: center;
}
@media (max-width: 640px) {
  .spotlight-gallery__thumbs {
    gap: 8px;
    overflow-x: auto;
    justify-content: flex-start;
    padding-bottom: 4px;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .spotlight-gallery__thumbs::-webkit-scrollbar {
    display: none;
  }
}

.spotlight-gallery__thumb {
  flex: 0 0 auto;
  width: 100px;
  aspect-ratio: 16/10;
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid transparent;
  padding: 0;
  cursor: pointer;
  background: var(--pub-bg-tertiary, #f4f4f5);
  transition: all 0.25s ease;
  opacity: 0.55;
}
@media (max-width: 640px) {
  .spotlight-gallery__thumb {
    width: 72px;
    border-radius: 8px;
  }
}
.spotlight-gallery__thumb img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
.spotlight-gallery__thumb:hover {
  opacity: 0.85;
  transform: translateY(-2px);
}
.spotlight-gallery__thumb.active {
  border-color: var(--pub-accent, #7c3aed);
  opacity: 1;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15);
}

.spinner {
  border: 2px solid var(--pub-border, #e4e4e7);
  border-top: 2px solid var(--pub-accent, #7c3aed);
  border-radius: 50%;
  width: 20px;
  height: 20px;
  animation: spin 2s linear infinite;
  display: inline-block;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
#card-element,
.StripeElement {
  padding: 16px;
  border: 1px solid var(--pub-border, #e4e4e7);
  border-radius: 8px;
  color: var(--pub-text-primary, #09090b);
  background: var(--pub-bg-input, #f4f4f5);
  box-sizing: border-box;
  transition: box-shadow 150ms ease, border-color 150ms ease;
}

.StripeElement--focus {
  border-color: var(--pub-accent, #7c3aed);
  box-shadow: 0 0 0 3px var(--pub-accent-soft, rgba(124, 58, 237, 0.08));
}

.StripeElement--invalid {
  border-color: #fa755a;
}

.checkout-card,
.subscription-card,
.plan-card,
.success-card {
  background: var(--pub-glass-bg, rgba(255, 255, 255, 0.55));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--pub-glass-border, rgba(211, 208, 230, 0.5));
  border-radius: 20px;
  box-shadow: var(--pub-shadow-card, 2px 6px 30px 0 rgba(124, 58, 237, 0.08));
  transition: all 0.2s ease;
}
.checkout-card:hover,
.subscription-card:hover,
.plan-card:hover,
.success-card:hover {
  box-shadow: var(--pub-shadow-card-hover, 2px 6px 30px 0 rgba(124, 58, 237, 0.2));
  transform: translateY(-4px);
}

.plan-card.popular {
  border: 2px solid var(--pub-accent, #7c3aed);
  background: var(--pub-accent-soft, rgba(124, 58, 237, 0.08));
}

.gradient-text {
  background: linear-gradient(135deg, var(--pub-accent, #7c3aed), var(--pub-accent-light, #a78bfa));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.blog-title {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-weight: 200;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.blog-content {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.125rem;
  line-height: 1.8;
}
.blog-content p {
  margin-bottom: 1.8rem;
  color: var(--pub-text-secondary, #e5e7eb);
}
.blog-content h2 {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: 2rem;
  font-weight: 300;
  margin: 3rem 0 1.5rem;
  color: var(--pub-text-primary, #ffffff);
  letter-spacing: -0.01em;
}
.blog-content h3 {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: 1.5rem;
  font-weight: 400;
  margin: 2.5rem 0 1rem;
  color: var(--pub-text-primary, #ffffff);
}
.blog-content blockquote {
  border-left: 3px solid var(--pub-accent, #7c3aed);
  padding-left: 2rem;
  margin: 3rem 0;
  font-style: italic;
  font-size: 1.25rem;
  color: var(--pub-text-secondary, #d1d5db);
}
.blog-content img {
  width: 100%;
  height: auto;
  border-radius: 0.5rem;
  margin: 3rem 0;
}

.related-card {
  transition: all 0.2s ease;
}
.related-card:hover {
  transform: translateY(-4px);
  box-shadow: 2px 6px 30px 0 rgba(124, 58, 237, 0.2);
}

.sidebar-card {
  transition: all 0.2s ease;
}
.sidebar-card:hover {
  transform: translateY(-2px);
  box-shadow: 2px 6px 30px 0 rgba(124, 58, 237, 0.15);
}

.category-pill {
  background: var(--pub-bg-tertiary, #f4f4f5);
  border: 1px solid var(--pub-border, #e4e4e7);
}

.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 3px;
  background: var(--pub-accent, #7c3aed);
  z-index: 100;
  transition: width 0.3s ease;
}

.share-btn {
  transition: all 0.2s ease;
}
.share-btn:hover {
  transform: translateY(-2px);
  box-shadow: 2px 6px 30px 0 rgba(124, 58, 237, 0.12);
}

.sidebar-sticky {
  position: sticky;
  top: 6rem;
  max-height: calc(100vh - 4rem);
  overflow-y: auto;
}
.sidebar-sticky::-webkit-scrollbar {
  width: 6px;
}
.sidebar-sticky::-webkit-scrollbar-track {
  background: var(--pub-overlay-medium, rgba(255, 255, 255, 0.1));
  border-radius: 3px;
}
.sidebar-sticky::-webkit-scrollbar-thumb {
  background: var(--pub-scrollbar-thumb, #d4d4d8);
  border-radius: 3px;
}
.sidebar-sticky::-webkit-scrollbar-thumb:hover {
  background: var(--pub-scrollbar-thumb-hover, #a1a1aa);
}

.glass-card {
  background: var(--pub-glass-bg, rgba(255, 255, 255, 0.55));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--pub-glass-border, rgba(211, 208, 230, 0.5));
  border-radius: 20px;
}

.form-card,
.template-card,
.detail-card {
  background: linear-gradient(135deg, rgba(16, 16, 20, 0.8), rgba(31, 32, 41, 0.8));
  border: 1px solid rgba(75, 85, 99, 0.3);
  backdrop-filter: blur(10px);
  border-radius: 0.75rem;
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: #e5e7eb;
  margin-bottom: 0.5rem;
}

.form-control {
  width: 100%;
  padding: 0.75rem 1rem;
  background: rgba(31, 32, 41, 0.8);
  border: 1px solid rgba(75, 85, 99, 0.5);
  border-radius: 0.75rem;
  color: #ffffff;
  font-size: 0.875rem;
  transition: all 0.2s ease;
}
.form-control:focus {
  outline: none;
  border-color: #8b5cf6;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}
.form-control::-moz-placeholder {
  color: #9ca3af;
}
.form-control::placeholder {
  color: #9ca3af;
}

.form-check {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.form-check-input {
  width: 1.25rem;
  height: 1.25rem;
}

.form-help {
  font-size: 0.75rem;
  color: #9ca3af;
  margin-top: 0.25rem;
}

.preview-container {
  background: rgba(31, 32, 41, 0.8);
  border: 1px solid rgba(75, 85, 99, 0.3);
  border-radius: 0.75rem;
  min-height: 400px;
  display: flex;
  flex-direction: column;
}
.preview-container.detail {
  background: white;
  min-height: 500px;
  overflow: hidden;
}

.preview-iframe {
  flex: 1;
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 0.75rem;
  background: white;
}
.preview-iframe.detail {
  height: 600px;
  border-radius: 0;
}

.template-card {
  transition: all 0.3s ease;
  overflow: visible;
}
.template-card:hover {
  transform: translateY(-2px);
  border-color: rgba(139, 92, 246, 0.5);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.category-badge {
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  border-radius: 0.5rem;
  font-weight: 500;
}

.search-box {
  background: rgba(31, 32, 41, 0.8);
  border: 1px solid rgba(75, 85, 99, 0.3);
  backdrop-filter: blur(10px);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
}

.stat-item {
  text-align: center;
  padding: 1rem;
  background: rgba(31, 32, 41, 0.5);
  border: 1px solid rgba(75, 85, 99, 0.3);
  border-radius: 0.75rem;
}

#templatesGrid {
  overflow: visible;
}

.template-item {
  overflow: visible;
  position: relative;
  z-index: 1;
}
.template-item:has(.template-menu:not(.hidden)) {
  z-index: 60;
}

.tox-tinymce {
  border-radius: 12px !important;
  border: 1px solid #374151 !important;
}

.tox .tox-editor-header {
  background: #1f2937 !important;
  border-bottom: 1px solid #374151 !important;
  border-radius: 12px 12px 0 0 !important;
}
.tox .tox-toolbar,
.tox .tox-toolbar__overflow,
.tox .tox-toolbar__primary {
  background: #1f2937 !important;
}
.tox .tox-edit-area,
.tox .tox-edit-area__iframe {
  background: #111827 !important;
}
.tox .tox-button {
  color: #d1d5db !important;
}
.tox .tox-button:hover {
  background: #374151 !important;
}
.tox .tox-fullscreen {
  z-index: 99999 !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
}

.tox-fullscreen {
  z-index: 99999 !important;
}
.tox-fullscreen .tox-editor-header {
  background: #1f2937 !important;
  border-bottom: 1px solid #374151 !important;
  border-radius: 0 !important;
}
.tox-fullscreen .tox-edit-area,
.tox-fullscreen .tox-edit-area__iframe {
  background: #111827 !important;
}

.tox.tox-tinymce.tox-fullscreen {
  z-index: 999999 !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.tox-fullscreen .feature-card {
  z-index: 1 !important;
}

.categories-checkboxes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.5rem;
}
.categories-checkboxes input[type=checkbox] {
  margin-right: 0.5rem;
}

.image-preview {
  max-width: 200px;
  max-height: 150px;
  border-radius: 0.75rem;
  -o-object-fit: cover;
     object-fit: cover;
}

.custom-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: rgba(139, 92, 246, 0.5) rgba(30, 41, 59, 0.5);
}
.custom-scrollbar::-webkit-scrollbar {
  width: 8px;
}
.custom-scrollbar::-webkit-scrollbar-track {
  background: rgba(30, 41, 59, 0.5);
  border-radius: 4px;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(139, 92, 246, 0.5);
  border-radius: 4px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: rgba(139, 92, 246, 0.7);
}

.phase-card {
  background: rgba(51, 65, 85, 0.6);
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 16px;
  transition: all 0.3s ease;
  position: relative;
}
.phase-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(139, 92, 246, 0.2);
  border-color: #8b5cf6;
}
.phase-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #8b5cf6, #06b6d4);
  border-radius: 12px 12px 0 0;
}

.order-badge {
  background: linear-gradient(45deg, #8b5cf6, #06b6d4);
  color: white;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 600;
  flex-shrink: 0;
}

.sender-card {
  background: rgba(51, 65, 85, 0.6);
  border: 2px solid rgba(148, 163, 184, 0.2);
  border-radius: 12px;
  padding: 16px;
  transition: all 0.3s ease;
  cursor: pointer;
}
.sender-card:hover {
  border-color: #8b5cf6;
  background: rgba(139, 92, 246, 0.05);
}
.sender-card.selected {
  border-color: #8b5cf6;
  background: rgba(139, 92, 246, 0.1);
}

.capacity-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.capacity-bar {
  flex: 1;
  height: 6px;
  background: rgba(148, 163, 184, 0.2);
  border-radius: 3px;
  overflow: hidden;
}
.capacity-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #10b981, #059669);
  transition: width 0.3s ease;
}

.capacity-summary {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(6, 182, 212, 0.1));
  border: 1px solid rgba(139, 92, 246, 0.3);
  border-radius: 12px;
  padding: 20px;
  margin-top: 16px;
}

.stat-item {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid rgba(148, 163, 184, 0.1);
}
.stat-item:last-child {
  border-bottom: none;
}

.phase-creator {
  background: rgba(30, 41, 59, 0.6);
  border: 2px dashed rgba(148, 163, 184, 0.3);
  border-radius: 12px;
  padding: 24px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
}
.phase-creator:hover:not(.disabled) {
  border-color: #8b5cf6;
  background: rgba(139, 92, 246, 0.05);
}
.phase-creator.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.phase-form {
  background: rgba(30, 41, 59, 0.8);
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 12px;
  padding: 24px;
  margin-top: 16px;
}

.schedule-preview {
  background: rgba(139, 92, 246, 0.1);
  border: 1px solid rgba(139, 92, 246, 0.3);
  border-radius: 8px;
  padding: 16px;
  margin-top: 16px;
}

.schedule-day {
  display: flex;
  justify-content: space-between;
  padding: 8px 12px;
  background: rgba(51, 65, 85, 0.5);
  border-radius: 6px;
  margin-bottom: 8px;
}

.empty-phases {
  text-align: center;
  padding: 60px 20px;
  color: #64748b;
  border: 2px dashed rgba(148, 163, 184, 0.2);
  border-radius: 12px;
}
.empty-phases i {
  font-size: 3rem;
  margin-bottom: 16px;
  opacity: 0.5;
}

.form-section {
  transition: all 0.3s ease;
}
.form-section.hidden {
  display: none;
}

.email-import-method input[type=radio] {
  opacity: 0;
  position: absolute;
}
.email-import-method input[type=radio]:checked + label {
  border-color: #8b5cf6;
  background-color: #8b5cf6;
  background-opacity: 0.1;
  color: #ffffff;
}
.email-import-method label {
  display: block;
  cursor: pointer;
  padding: 1rem;
  border: 2px solid #374151;
  border-radius: 0.75rem;
  background-color: #1f2937;
  color: #d1d5db;
  transition: all 0.2s ease;
}
.email-import-method label:hover {
  border-color: #6b7280;
}

.wizard-progress {
  position: relative;
  display: flex;
  justify-content: space-between;
  padding: 0 5%;
  margin-bottom: 2rem;
}

.wizard-progress-line {
  position: absolute;
  top: 20px;
  left: 5%;
  right: 5%;
  height: 2px;
  background-color: #3f3f46;
  z-index: 0;
}

.wizard-progress-line-fill {
  height: 100%;
  background-color: #a855f7;
  transition: width 0.5s ease;
  width: 0%;
}

.wizard-step-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 1;
  cursor: default;
}
.wizard-step-indicator.completed {
  cursor: pointer;
}

.wizard-step-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #52525b;
  background-color: #27272a;
  color: #9ca3af;
  font-size: 0.875rem;
  transition: all 0.3s ease;
  box-shadow: 0 0 0 4px var(--dash-bg-primary, #18181b);
}
.completed .wizard-step-circle {
  border-color: #22c55e;
  background-color: #22c55e;
  color: #ffffff;
}
.current .wizard-step-circle {
  border-color: #a855f7;
  background-color: #a855f7;
  color: #ffffff;
}

.wizard-step-label {
  margin-top: 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: #6b7280;
  text-align: center;
  transition: color 0.3s ease;
  white-space: nowrap;
}
.completed .wizard-step-label {
  color: #4ade80;
}
.current .wizard-step-label {
  color: #c084fc;
}

.wizard-step.hidden {
  display: none;
}

html:not(.dark) body:not(.public-body) main .wizard-progress-line {
  background-color: var(--dash-border-primary);
}
html:not(.dark) body:not(.public-body) main .wizard-step-circle {
  border-color: var(--dash-border-primary);
  background-color: var(--dash-bg-input);
  color: #6b7280;
}
.completed html:not(.dark) body:not(.public-body) main .wizard-step-circle {
  border-color: #22c55e;
  background-color: #22c55e;
  color: #ffffff;
}
.current html:not(.dark) body:not(.public-body) main .wizard-step-circle {
  border-color: #a855f7;
  background-color: #a855f7;
  color: #ffffff;
}
html:not(.dark) body:not(.public-body) main .wizard-step-label {
  color: #6b7280;
}
.completed html:not(.dark) body:not(.public-body) main .wizard-step-label {
  color: #16a34a;
}
.current html:not(.dark) body:not(.public-body) main .wizard-step-label {
  color: #9333ea;
}
html:not(.dark) body:not(.public-body) main .email-import-method label {
  background-color: var(--dash-bg-input);
  border-color: var(--dash-border-primary);
}

/* ==========================================================================
   Public Pages — extracted from inline <style> blocks
   ========================================================================== */
/* --------------------------------------------------------------------------
   Hero Section (index.html.twig)
   -------------------------------------------------------------------------- */
.hero-aurora {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.hero-aurora__blob {
  position: absolute;
  border-radius: 50%;
  will-change: transform;
}

.hero-aurora__blob--1 {
  width: 700px;
  height: 700px;
  background: radial-gradient(circle at center, rgba(124, 58, 237, 0.35) 0%, transparent 65%);
  top: -15%;
  right: -8%;
  animation: hero-drift-1 20s ease-in-out infinite;
}

.hero-aurora__blob--2 {
  width: 550px;
  height: 550px;
  background: radial-gradient(circle at center, rgba(59, 130, 246, 0.3) 0%, transparent 65%);
  bottom: -10%;
  left: -8%;
  animation: hero-drift-2 25s ease-in-out infinite;
}

.hero-aurora__blob--3 {
  width: 450px;
  height: 450px;
  background: radial-gradient(circle at center, rgba(168, 85, 247, 0.25) 0%, transparent 65%);
  top: 35%;
  left: 45%;
  animation: hero-drift-3 18s ease-in-out infinite;
}

html:not(.dark) .hero-aurora__blob {
  opacity: 0.6;
}

html.dark .hero-aurora__blob {
  opacity: 1;
}

@keyframes hero-drift-1 {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  33% {
    transform: translate(-50px, 40px) scale(1.08);
  }
  66% {
    transform: translate(30px, -25px) scale(0.95);
  }
}
@keyframes hero-drift-2 {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  33% {
    transform: translate(60px, -35px) scale(1.05);
  }
  66% {
    transform: translate(-35px, 50px) scale(1.1);
  }
}
@keyframes hero-drift-3 {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(45px, -45px) scale(1.12);
  }
}
.hero-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(124, 58, 237, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(124, 58, 237, 0.04) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, black 10%, transparent 80%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, black 10%, transparent 80%);
}

.hero-glow {
  position: absolute;
  width: 600px;
  height: 600px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -55%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(124, 58, 237, 0.12) 0%, transparent 60%);
  pointer-events: none;
}

html.dark .hero-glow {
  background: radial-gradient(circle, rgba(124, 58, 237, 0.2) 0%, transparent 60%);
}

.hero-enter {
  opacity: 0;
  transform: translateY(32px);
  animation: heroEnter 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes heroEnter {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.hero-float {
  position: absolute;
  background: var(--pub-bg-card);
  border: 1px solid var(--pub-border);
  border-radius: 1rem;
  padding: 0.875rem 1.125rem;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
  will-change: transform;
  animation: heroFloat 7s ease-in-out infinite;
  animation-delay: var(--d, 0s);
  z-index: 5;
}

html.dark .hero-float {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
}

@keyframes heroFloat {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-14px);
  }
}
.hero-float__label {
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--pub-text-muted);
  margin-bottom: 0.25rem;
}

.hero-float__value {
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1;
  color: var(--pub-text-primary);
}

.hero-float__change {
  font-size: 0.7rem;
  font-weight: 600;
  margin-left: 0.375rem;
}

@media (max-width: 1199px) {
  .hero-float {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-aurora__blob {
    animation: none;
  }
  .hero-float {
    animation: none;
  }
  .hero-enter {
    animation: none;
    opacity: 1;
    transform: none;
  }
}
/* --------------------------------------------------------------------------
   Blog Fade Cards (index.html.twig)
   -------------------------------------------------------------------------- */
.blog-fade-card {
  position: relative;
  border-radius: 1.25rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--pub-bg-card);
  border: 1px solid var(--pub-border);
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}

.blog-fade-card:hover {
  box-shadow: 0 12px 40px rgba(124, 58, 237, 0.12);
}

html.dark .blog-fade-card:hover {
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}

.blog-fade-visible .blog-fade-card {
  opacity: 1;
  transform: translateY(0);
}

.blog-fade-visible .blog-fade-card:nth-child(1) {
  transition-delay: 0s;
}

.blog-fade-visible .blog-fade-card:nth-child(2) {
  transition-delay: 0.12s;
}

.blog-fade-visible .blog-fade-card:nth-child(3) {
  transition-delay: 0.24s;
}

.blog-fade-card__img-wrap {
  position: relative;
  height: 220px;
  overflow: hidden;
}

.blog-fade-card__img-wrap img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 0.6s ease;
}

.blog-fade-card:hover .blog-fade-card__img-wrap img {
  transform: scale(1.06);
}

.blog-fade-card__img-fade {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(to top, var(--pub-bg-card) 0%, transparent 100%);
  z-index: 1;
  pointer-events: none;
}

.blog-fade-card--noimg .blog-fade-card__img-wrap {
  height: 160px;
  background: var(--pub-accent-soft);
  display: flex;
  align-items: center;
  justify-content: center;
}

.blog-fade-card__content {
  padding: 0 1.75rem 1.75rem;
  margin-top: -1rem;
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.blog-fade-card__content .blog-fc-cat {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: 9999px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--pub-accent-soft);
  color: var(--pub-accent);
}

.blog-fade-card__content h3 {
  color: var(--pub-text-primary);
  font-weight: 700;
  line-height: 1.3;
}

.blog-fade-card__content .blog-fc-meta {
  color: var(--pub-text-muted);
  font-size: 0.8rem;
}

.blog-fade-card__content .blog-fc-arrow {
  color: var(--pub-accent);
  transition: transform 0.3s ease;
}

.blog-fade-card:hover .blog-fc-arrow {
  transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
  .blog-fade-card {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
/* --------------------------------------------------------------------------
   Section 2 — Steps Cards (index.html.twig)
   -------------------------------------------------------------------------- */
.s2-card {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.s2-cards-visible .s2-card {
  opacity: 1;
  transform: translateY(0);
}

.s2-cards-visible .s2-card:nth-child(1) {
  transition-delay: 0s;
}

.s2-cards-visible .s2-card:nth-child(2) {
  transition-delay: 0.12s;
}

.s2-cards-visible .s2-card:nth-child(3) {
  transition-delay: 0.24s;
}

.s2-cards-visible .s2-card:nth-child(4) {
  transition-delay: 0.36s;
}

.s2-icon-wrap {
  position: relative;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.25rem;
  transition: transform 0.3s ease;
}

.s2-card:hover .s2-icon-wrap {
  transform: scale(1.08);
}

.s2-icon-wrap::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 1.125rem;
  background: inherit;
  opacity: 0;
  filter: blur(12px);
  transition: opacity 0.4s ease;
  z-index: -1;
}

.s2-card:hover .s2-icon-wrap::after {
  opacity: 0.5;
}

.s2-step {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}

.s2-connector {
  display: none;
}

@media (min-width: 1024px) {
  .s2-connector {
    display: block;
    position: absolute;
    top: 4.25rem;
    left: 4.5rem;
    right: 4.5rem;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--pub-border) 15%, var(--pub-border) 85%, transparent 100%);
    z-index: 0;
  }
  .s2-connector::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--pub-accent), transparent);
    opacity: 0;
    transition: opacity 0.8s ease 0.5s;
  }
  .s2-cards-visible .s2-connector::before {
    opacity: 0.4;
  }
}
@media (prefers-reduced-motion: reduce) {
  .s2-card {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .s2-icon-wrap::after {
    display: none;
  }
}
/* --------------------------------------------------------------------------
   Auth Pages — Brand Panel & Form Components (login, register)
   -------------------------------------------------------------------------- */
.auth-brand {
  background: linear-gradient(135deg, #1e1b4b 0%, #312e81 30%, #4c1d95 70%, #1e1b4b 100%);
  position: relative;
  overflow: hidden;
}

.auth-brand::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 20%, rgba(124, 58, 237, 0.35) 0%, transparent 50%), radial-gradient(circle at 70% 80%, rgba(59, 130, 246, 0.25) 0%, transparent 50%), radial-gradient(circle at 50% 50%, rgba(168, 85, 247, 0.15) 0%, transparent 60%);
}

.auth-shape {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.auth-feature {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem;
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: background 0.3s ease;
}

.auth-feature:hover {
  background: rgba(255, 255, 255, 0.08);
}

.auth-feature-icon {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.auth-checkbox {
  width: 1rem;
  height: 1rem;
  border-radius: 0.25rem;
  border: 1px solid var(--pub-border);
  background: var(--pub-bg-input);
  accent-color: var(--pub-accent);
}

.auth-social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 0.75rem;
  border-radius: 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  transition: all 0.2s ease;
  background: var(--pub-bg-input);
  border: 1px solid var(--pub-border);
  color: var(--pub-text-secondary);
}

.auth-social-btn:hover {
  background: var(--pub-bg-card-hover);
  color: var(--pub-text-primary);
  border-color: var(--pub-accent);
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--pub-border);
}

/* --------------------------------------------------------------------------
   Public body text overrides
   -------------------------------------------------------------------------- */
html:not(.dark) .public-body .text-green-400 {
  color: #16a34a !important;
}

/* --------------------------------------------------------------------------
   3D Carousel (gallery section)
   -------------------------------------------------------------------------- */
.carousel-3d {
  position: relative;
  width: 100%;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.carousel-3d__viewport {
  position: relative;
  perspective: 1200px;
  overflow: visible;
  padding: 40px 0;
}

.carousel-3d__track {
  position: relative;
  width: 100%;
  height: 420px;
  transform-style: preserve-3d;
}

@media (max-width: 768px) {
  .carousel-3d__track {
    height: 260px;
  }
}
@media (max-width: 480px) {
  .carousel-3d__track {
    height: 200px;
  }
}
.carousel-3d__slide {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 65%;
  max-width: 720px;
  aspect-ratio: 16/10;
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  backface-visibility: hidden;
  will-change: transform, opacity;
  contain: layout style paint;
  transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.6s cubic-bezier(0.23, 1, 0.32, 1);
  transform: translate(-50%, -50%) translateX(0) translateZ(-400px) rotateY(0deg) scale(0.7);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
}

@media (max-width: 768px) {
  .carousel-3d__slide {
    width: 80%;
  }
}
.carousel-3d__slide img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
  pointer-events: none;
}

.carousel-3d__slide[data-pos="0"] {
  transform: translate(-50%, -50%) translateZ(0) rotateY(0deg) scale(1);
  opacity: 1;
  box-shadow: 0 25px 60px rgba(124, 58, 237, 0.2), 0 8px 20px rgba(0, 0, 0, 0.1);
  z-index: 5;
  pointer-events: auto;
  cursor: zoom-in;
}

.carousel-3d__slide[data-pos="1"] {
  transform: translate(-50%, -50%) translateX(55%) translateZ(-180px) rotateY(-12deg) scale(0.82);
  opacity: 0.75;
  z-index: 4;
  pointer-events: auto;
  cursor: pointer;
}

.carousel-3d__slide[data-pos="-1"] {
  transform: translate(-50%, -50%) translateX(-55%) translateZ(-180px) rotateY(12deg) scale(0.82);
  opacity: 0.75;
  z-index: 4;
  pointer-events: auto;
  cursor: pointer;
}

.carousel-3d__slide[data-pos="2"] {
  transform: translate(-50%, -50%) translateX(90%) translateZ(-360px) rotateY(-20deg) scale(0.65);
  opacity: 0.45;
  z-index: 3;
  pointer-events: auto;
  cursor: pointer;
}

.carousel-3d__slide[data-pos="-2"] {
  transform: translate(-50%, -50%) translateX(-90%) translateZ(-360px) rotateY(20deg) scale(0.65);
  opacity: 0.45;
  z-index: 3;
  pointer-events: auto;
  cursor: pointer;
}

.carousel-3d__slide[data-pos="3"],
.carousel-3d__slide[data-pos="-3"] {
  transform: translate(-50%, -50%) translateX(120%) translateZ(-500px) scale(0.5);
  opacity: 0;
  visibility: hidden;
  z-index: 1;
}

.carousel-3d__slide[data-pos="-3"] {
  transform: translate(-50%, -50%) translateX(-120%) translateZ(-500px) scale(0.5);
}

.carousel-3d__slide[data-pos="0"]:hover {
  box-shadow: 0 30px 80px rgba(124, 58, 237, 0.25), 0 12px 30px rgba(0, 0, 0, 0.12);
  transform: translate(-50%, -50%) translateZ(10px) scale(1.02);
}

@media (prefers-reduced-motion: reduce) {
  .carousel-3d__slide {
    transition: none !important;
  }
}
.carousel-3d.is-dragging .carousel-3d__slide {
  transition: none !important;
}

.carousel-3d__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--pub-border);
  background: var(--pub-glass-bg);
  backdrop-filter: blur(12px);
  color: var(--pub-text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.25s ease;
  opacity: 0;
}

.carousel-3d:hover .carousel-3d__nav {
  opacity: 1;
}

.carousel-3d__nav:hover {
  background: var(--pub-accent);
  color: white;
  border-color: var(--pub-accent);
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 4px 20px rgba(124, 58, 237, 0.4);
}

.carousel-3d__nav--prev {
  left: 8px;
}

.carousel-3d__nav--next {
  right: 8px;
}

@media (min-width: 1024px) {
  .carousel-3d__nav--prev {
    left: -24px;
  }
  .carousel-3d__nav--next {
    right: -24px;
  }
}
@media (max-width: 768px) {
  .carousel-3d__nav {
    width: 40px;
    height: 40px;
    opacity: 1;
  }
}
.carousel-3d__dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 24px;
}

.carousel-3d__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: none;
  padding: 0;
  cursor: pointer;
  background: var(--pub-border);
  transition: all 0.3s ease;
}

.carousel-3d__dot:hover {
  background: var(--pub-accent-light);
  transform: scale(1.3);
}

.carousel-3d__dot.active {
  background: var(--pub-accent);
  box-shadow: 0 0 0 3px var(--pub-accent-soft);
  transform: scale(1.2);
}

.carousel-3d__progress {
  width: 200px;
  height: 3px;
  margin: 16px auto 0;
  border-radius: 3px;
  background: var(--pub-border);
  overflow: hidden;
}

.carousel-3d__progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--pub-accent), var(--pub-accent-light));
  border-radius: 3px;
  transition: width 0.1s linear;
}

html:not(.dark) .carousel-3d__slide {
  border: 1px solid rgba(0, 0, 0, 0.08);
}

html:not(.dark) .carousel-3d__slide[data-pos="0"] {
  box-shadow: 0 16px 48px rgba(124, 58, 237, 0.12), 0 6px 16px rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(0, 0, 0, 0.06);
}

html:not(.dark) .carousel-3d__slide[data-pos="1"],
html:not(.dark) .carousel-3d__slide[data-pos="-1"] {
  opacity: 0.85;
}

html:not(.dark) .carousel-3d__slide[data-pos="2"],
html:not(.dark) .carousel-3d__slide[data-pos="-2"] {
  opacity: 0.55;
}

html:not(.dark) .carousel-3d__nav:hover {
  box-shadow: 0 4px 16px rgba(124, 58, 237, 0.25);
}

.lb-dot.active {
  background: white !important;
  transform: scale(1.5);
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
}

/* --------------------------------------------------------------------------
   Public page form fields
   -------------------------------------------------------------------------- */
.pub-input {
  background: var(--pub-bg-input);
  border: 1px solid var(--pub-border);
  color: var(--pub-text-primary);
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
  width: 100%;
  backdrop-filter: blur(8px);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.pub-input::-moz-placeholder {
  color: var(--pub-text-muted);
}

.pub-input::placeholder {
  color: var(--pub-text-muted);
}

.pub-input:focus {
  outline: none;
  border-color: var(--pub-accent);
  box-shadow: 0 0 0 3px var(--pub-accent-soft);
}

.pub-input option {
  background: var(--pub-bg-card);
  color: var(--pub-text-primary);
}

.pub-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--pub-text-secondary);
  margin-bottom: 0.5rem;
}

.pub-tab {
  flex: 1;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  font-weight: 500;
  transition: all 0.2s ease;
  border: none;
  cursor: pointer;
}

.pub-tab.active {
  background: var(--pub-accent);
  color: white;
}

.pub-tab:not(.active) {
  background: var(--pub-bg-input);
  color: var(--pub-text-secondary);
}

.pub-tab:not(.active):hover {
  background: var(--pub-bg-tertiary);
}

.pub-radio-option {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem;
  background: var(--pub-bg-input);
  border: 1px solid var(--pub-border);
  border-radius: 0.5rem;
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.pub-radio-option:hover {
  border-color: var(--pub-accent);
}

.legal-card {
  background: var(--pub-bg-card);
  border: 1px solid var(--pub-border);
  border-radius: 0.75rem;
  padding: 1.5rem;
  transition: background 0.3s ease;
}

.legal-heading {
  color: var(--pub-accent);
}

.legal-text {
  color: var(--pub-text-secondary);
}

.legal-link {
  color: var(--pub-accent);
  transition: opacity 0.2s ease;
}

.legal-link:hover {
  text-decoration: underline;
  opacity: 0.85;
}

.pub-btn-primary {
  background: var(--pub-accent-gradient);
  color: white;
  border: none;
  border-radius: 0.75rem;
  padding: 0.75rem 2rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.pub-btn-primary:hover {
  opacity: 0.9;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px var(--pub-accent-soft);
}

.spinner {
  border: 2px solid var(--pub-border, #e4e4e7);
  border-top: 2px solid var(--pub-accent, #7c3aed);
  border-radius: 50%;
  width: 20px;
  height: 20px;
  animation: spin 2s linear infinite;
  display: inline-block;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
#card-element,
.StripeElement {
  padding: 16px;
  border: 1px solid var(--pub-border, #e4e4e7);
  border-radius: 8px;
  color: var(--pub-text-primary, #09090b);
  background: var(--pub-bg-input, #f4f4f5);
  box-sizing: border-box;
  transition: box-shadow 150ms ease, border-color 150ms ease;
}

.StripeElement--focus {
  border-color: var(--pub-accent, #7c3aed);
  box-shadow: 0 0 0 3px var(--pub-accent-soft, rgba(124, 58, 237, 0.08));
}

.StripeElement--invalid {
  border-color: #fa755a;
}

.checkout-card,
.subscription-card,
.plan-card,
.success-card {
  background: var(--pub-glass-bg, rgba(255, 255, 255, 0.55));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--pub-glass-border, rgba(211, 208, 230, 0.5));
  border-radius: 20px;
  box-shadow: var(--pub-shadow-card, 2px 6px 30px 0 rgba(124, 58, 237, 0.08));
  transition: all 0.2s ease;
}

.checkout-card:hover,
.subscription-card:hover,
.plan-card:hover,
.success-card:hover {
  box-shadow: var(--pub-shadow-card-hover, 2px 6px 30px 0 rgba(124, 58, 237, 0.2));
  transform: translateY(-4px);
}

.plan-card.popular {
  border: 2px solid var(--pub-accent, #7c3aed);
  background: var(--pub-accent-soft, rgba(124, 58, 237, 0.08));
}

.gradient-text {
  background: linear-gradient(135deg, var(--pub-accent, #7c3aed), var(--pub-accent-light, #a78bfa));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.blog-title {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-weight: 200;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.blog-content {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.125rem;
  line-height: 1.8;
}

.blog-content p {
  margin-bottom: 1.8rem;
  color: var(--pub-text-secondary, #e5e7eb);
}

.blog-content h2 {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: 2rem;
  font-weight: 300;
  margin: 3rem 0 1.5rem;
  color: var(--pub-text-primary, #ffffff);
  letter-spacing: -0.01em;
}

.blog-content h3 {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: 1.5rem;
  font-weight: 400;
  margin: 2.5rem 0 1rem;
  color: var(--pub-text-primary, #ffffff);
}

.blog-content blockquote {
  border-left: 3px solid var(--pub-accent, #7c3aed);
  padding-left: 2rem;
  margin: 3rem 0;
  font-style: italic;
  font-size: 1.25rem;
  color: var(--pub-text-secondary, #d1d5db);
}

.blog-content img {
  width: 100%;
  height: auto;
  border-radius: 0.5rem;
  margin: 3rem 0;
}

.related-card {
  transition: all 0.2s ease;
}

.related-card:hover {
  transform: translateY(-4px);
  box-shadow: 2px 6px 30px 0 rgba(124, 58, 237, 0.2);
}

.sidebar-card {
  transition: all 0.2s ease;
}

.sidebar-card:hover {
  transform: translateY(-2px);
  box-shadow: 2px 6px 30px 0 rgba(124, 58, 237, 0.15);
}

.category-pill {
  background: var(--pub-bg-tertiary, #f4f4f5);
  border: 1px solid var(--pub-border, #e4e4e7);
}

.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 3px;
  background: var(--pub-accent, #7c3aed);
  z-index: 100;
  transition: width 0.3s ease;
}

.share-btn {
  transition: all 0.2s ease;
}

.share-btn:hover {
  transform: translateY(-2px);
  box-shadow: 2px 6px 30px 0 rgba(124, 58, 237, 0.12);
}

.sidebar-sticky {
  position: sticky;
  top: 6rem;
  max-height: calc(100vh - 4rem);
  overflow-y: auto;
}

.sidebar-sticky::-webkit-scrollbar {
  width: 6px;
}

.sidebar-sticky::-webkit-scrollbar-track {
  background: var(--pub-overlay-medium, rgba(255, 255, 255, 0.1));
  border-radius: 3px;
}

.sidebar-sticky::-webkit-scrollbar-thumb {
  background: var(--pub-scrollbar-thumb, #d4d4d8);
  border-radius: 3px;
}

.sidebar-sticky::-webkit-scrollbar-thumb:hover {
  background: var(--pub-scrollbar-thumb-hover, #a1a1aa);
}

.glass-card {
  background: var(--pub-glass-bg, rgba(255, 255, 255, 0.55));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--pub-glass-border, rgba(211, 208, 230, 0.5));
  border-radius: 20px;
}

.form-card,
.template-card,
.detail-card {
  background: linear-gradient(135deg, rgba(16, 16, 20, 0.8), rgba(31, 32, 41, 0.8));
  border: 1px solid rgba(75, 85, 99, 0.3);
  backdrop-filter: blur(10px);
  border-radius: 0.75rem;
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: #e5e7eb;
  margin-bottom: 0.5rem;
}

.form-control {
  width: 100%;
  padding: 0.75rem 1rem;
  background: rgba(31, 32, 41, 0.8);
  border: 1px solid rgba(75, 85, 99, 0.5);
  border-radius: 0.75rem;
  color: #ffffff;
  font-size: 0.875rem;
  transition: all 0.2s ease;
}

.form-control:focus {
  outline: none;
  border-color: #8b5cf6;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}

.form-control::-moz-placeholder {
  color: #9ca3af;
}

.form-control::placeholder {
  color: #9ca3af;
}

.form-check {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.form-check-input {
  width: 1.25rem;
  height: 1.25rem;
}

.form-help {
  font-size: 0.75rem;
  color: #9ca3af;
  margin-top: 0.25rem;
}

.preview-container {
  background: rgba(31, 32, 41, 0.8);
  border: 1px solid rgba(75, 85, 99, 0.3);
  border-radius: 0.75rem;
  min-height: 400px;
  display: flex;
  flex-direction: column;
}

.preview-container.detail {
  background: white;
  min-height: 500px;
  overflow: hidden;
}

.preview-iframe {
  flex: 1;
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 0.75rem;
  background: white;
}

.preview-iframe.detail {
  height: 600px;
  border-radius: 0;
}

.template-card {
  transition: all 0.3s ease;
  overflow: visible;
}

.template-card:hover {
  transform: translateY(-2px);
  border-color: rgba(139, 92, 246, 0.5);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.category-badge {
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  border-radius: 0.5rem;
  font-weight: 500;
}

.search-box {
  background: rgba(31, 32, 41, 0.8);
  border: 1px solid rgba(75, 85, 99, 0.3);
  backdrop-filter: blur(10px);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
}

.stat-item {
  text-align: center;
  padding: 1rem;
  background: rgba(31, 32, 41, 0.5);
  border: 1px solid rgba(75, 85, 99, 0.3);
  border-radius: 0.75rem;
}

#templatesGrid {
  overflow: visible;
}

.template-item {
  overflow: visible;
  position: relative;
  z-index: 1;
}

.template-item:has(.template-menu:not(.hidden)) {
  z-index: 60;
}

.tox-tinymce {
  border-radius: 12px !important;
  border: 1px solid #374151 !important;
}

.tox .tox-editor-header {
  background: #1f2937 !important;
  border-bottom: 1px solid #374151 !important;
  border-radius: 12px 12px 0 0 !important;
}

.tox .tox-toolbar,
.tox .tox-toolbar__overflow,
.tox .tox-toolbar__primary {
  background: #1f2937 !important;
}

.tox .tox-edit-area,
.tox .tox-edit-area__iframe {
  background: #111827 !important;
}

.tox .tox-button {
  color: #d1d5db !important;
}

.tox .tox-button:hover {
  background: #374151 !important;
}

.tox .tox-fullscreen {
  z-index: 99999 !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
}

.tox-fullscreen {
  z-index: 99999 !important;
}

.tox-fullscreen .tox-editor-header {
  background: #1f2937 !important;
  border-bottom: 1px solid #374151 !important;
  border-radius: 0 !important;
}

.tox-fullscreen .tox-edit-area,
.tox-fullscreen .tox-edit-area__iframe {
  background: #111827 !important;
}

.tox.tox-tinymce.tox-fullscreen {
  z-index: 999999 !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.tox-fullscreen .feature-card {
  z-index: 1 !important;
}

.categories-checkboxes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.5rem;
}

.categories-checkboxes input[type=checkbox] {
  margin-right: 0.5rem;
}

.image-preview {
  max-width: 200px;
  max-height: 150px;
  border-radius: 0.75rem;
  -o-object-fit: cover;
     object-fit: cover;
}

.custom-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: rgba(139, 92, 246, 0.5) rgba(30, 41, 59, 0.5);
}

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

.custom-scrollbar::-webkit-scrollbar-track {
  background: rgba(30, 41, 59, 0.5);
  border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(139, 92, 246, 0.5);
  border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: rgba(139, 92, 246, 0.7);
}

.phase-card {
  background: rgba(51, 65, 85, 0.6);
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 16px;
  transition: all 0.3s ease;
  position: relative;
}

.phase-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(139, 92, 246, 0.2);
  border-color: #8b5cf6;
}

.phase-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #8b5cf6, #06b6d4);
  border-radius: 12px 12px 0 0;
}

.order-badge {
  background: linear-gradient(45deg, #8b5cf6, #06b6d4);
  color: white;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 600;
  flex-shrink: 0;
}

.sender-card {
  background: rgba(51, 65, 85, 0.6);
  border: 2px solid rgba(148, 163, 184, 0.2);
  border-radius: 12px;
  padding: 16px;
  transition: all 0.3s ease;
  cursor: pointer;
}

.sender-card:hover {
  border-color: #8b5cf6;
  background: rgba(139, 92, 246, 0.05);
}

.sender-card.selected {
  border-color: #8b5cf6;
  background: rgba(139, 92, 246, 0.1);
}

.capacity-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.capacity-bar {
  flex: 1;
  height: 6px;
  background: rgba(148, 163, 184, 0.2);
  border-radius: 3px;
  overflow: hidden;
}

.capacity-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #10b981, #059669);
  transition: width 0.3s ease;
}

.capacity-summary {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(6, 182, 212, 0.1));
  border: 1px solid rgba(139, 92, 246, 0.3);
  border-radius: 12px;
  padding: 20px;
  margin-top: 16px;
}

.stat-item {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid rgba(148, 163, 184, 0.1);
}

.stat-item:last-child {
  border-bottom: none;
}

.phase-creator {
  background: rgba(30, 41, 59, 0.6);
  border: 2px dashed rgba(148, 163, 184, 0.3);
  border-radius: 12px;
  padding: 24px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.phase-creator:hover:not(.disabled) {
  border-color: #8b5cf6;
  background: rgba(139, 92, 246, 0.05);
}

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

.phase-form {
  background: rgba(30, 41, 59, 0.8);
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 12px;
  padding: 24px;
  margin-top: 16px;
}

.schedule-preview {
  background: rgba(139, 92, 246, 0.1);
  border: 1px solid rgba(139, 92, 246, 0.3);
  border-radius: 8px;
  padding: 16px;
  margin-top: 16px;
}

.schedule-day {
  display: flex;
  justify-content: space-between;
  padding: 8px 12px;
  background: rgba(51, 65, 85, 0.5);
  border-radius: 6px;
  margin-bottom: 8px;
}

.empty-phases {
  text-align: center;
  padding: 60px 20px;
  color: #64748b;
  border: 2px dashed rgba(148, 163, 184, 0.2);
  border-radius: 12px;
}

.empty-phases i {
  font-size: 3rem;
  margin-bottom: 16px;
  opacity: 0.5;
}

.form-section {
  transition: all 0.3s ease;
}

.form-section.hidden {
  display: none;
}

.email-import-method input[type=radio] {
  opacity: 0;
  position: absolute;
}

.email-import-method input[type=radio]:checked + label {
  border-color: #8b5cf6;
  background-color: #8b5cf6;
  background-opacity: 0.1;
  color: #ffffff;
}

.email-import-method label {
  display: block;
  cursor: pointer;
  padding: 1rem;
  border: 2px solid #374151;
  border-radius: 0.75rem;
  background-color: #1f2937;
  color: #d1d5db;
  transition: all 0.2s ease;
}

.email-import-method label:hover {
  border-color: #6b7280;
}

.wizard-progress {
  position: relative;
  display: flex;
  justify-content: space-between;
  padding: 0 5%;
  margin-bottom: 2rem;
}

.wizard-progress-line {
  position: absolute;
  top: 20px;
  left: 5%;
  right: 5%;
  height: 2px;
  background-color: #3f3f46;
  z-index: 0;
}

.wizard-progress-line-fill {
  height: 100%;
  background-color: #a855f7;
  transition: width 0.5s ease;
  width: 0%;
}

.wizard-step-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 1;
  cursor: default;
}

.wizard-step-indicator.completed {
  cursor: pointer;
}

.wizard-step-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #52525b;
  background-color: #27272a;
  color: #9ca3af;
  font-size: 0.875rem;
  transition: all 0.3s ease;
  box-shadow: 0 0 0 4px var(--dash-bg-primary, #18181b);
}

.completed .wizard-step-circle {
  border-color: #22c55e;
  background-color: #22c55e;
  color: #ffffff;
}

.current .wizard-step-circle {
  border-color: #a855f7;
  background-color: #a855f7;
  color: #ffffff;
}

.wizard-step-label {
  margin-top: 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: #6b7280;
  text-align: center;
  transition: color 0.3s ease;
  white-space: nowrap;
}

.completed .wizard-step-label {
  color: #4ade80;
}

.current .wizard-step-label {
  color: #c084fc;
}

.wizard-step.hidden {
  display: none;
}

html:not(.dark) body:not(.public-body) main .wizard-progress-line {
  background-color: var(--dash-border-primary);
}

html:not(.dark) body:not(.public-body) main .wizard-step-circle {
  border-color: var(--dash-border-primary);
  background-color: var(--dash-bg-input);
  color: #6b7280;
}

.completed html:not(.dark) body:not(.public-body) main .wizard-step-circle {
  border-color: #22c55e;
  background-color: #22c55e;
  color: #ffffff;
}

.current html:not(.dark) body:not(.public-body) main .wizard-step-circle {
  border-color: #a855f7;
  background-color: #a855f7;
  color: #ffffff;
}

html:not(.dark) body:not(.public-body) main .wizard-step-label {
  color: #6b7280;
}

.completed html:not(.dark) body:not(.public-body) main .wizard-step-label {
  color: #16a34a;
}

.current html:not(.dark) body:not(.public-body) main .wizard-step-label {
  color: #9333ea;
}

html:not(.dark) body:not(.public-body) main .email-import-method label {
  background-color: var(--dash-bg-input);
  border-color: var(--dash-border-primary);
}

/* FAQ Accordion */
.faq-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.3s ease;
  opacity: 0;
}

.faq-open .faq-content {
  max-height: 300px;
  opacity: 1;
}

.faq-open .faq-icon {
  transform: rotate(180deg);
}

.faq-toggle:hover {
  background: var(--pub-overlay-light);
}

/* Blog index page */
.blog-category-badge {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  background: var(--pub-accent-soft);
  color: var(--pub-accent);
  transition: opacity 0.2s;
}

.blog-category-badge:hover {
  opacity: 0.8;
}

.blog-card-title {
  color: inherit;
  text-decoration: none;
}

.blog-card-title:hover {
  color: var(--pub-accent);
}

.blog-pagination-btn {
  display: inline-block;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  font-weight: 500;
  color: var(--pub-text-primary);
  background: var(--pub-bg-card);
  border: 1px solid var(--pub-border);
  transition: all 0.2s;
}

.blog-pagination-btn:hover {
  border-color: var(--pub-accent);
  color: var(--pub-accent);
}

.blog-pagination-btn.active {
  background: var(--pub-accent);
  border-color: var(--pub-accent);
  color: white;
}

.blog-sidebar-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  color: var(--pub-text-secondary);
  transition: all 0.2s;
}

.blog-sidebar-link:hover {
  background: var(--pub-overlay-light);
  color: var(--pub-text-primary);
}

.blog-sidebar-link.active {
  background: var(--pub-accent-soft);
  color: var(--pub-accent);
}

/* Blog show — comments */
.public-body .blog-comment {
  background: var(--pub-bg-card);
  border: 1px solid var(--pub-border);
  border-radius: 0.75rem;
  padding: 1.25rem;
}

.public-body .blog-comment-author {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--pub-text-primary);
}

.public-body .blog-comment-date {
  font-size: 0.75rem;
  color: var(--pub-text-muted);
}

.public-body .blog-comment-body {
  font-size: 0.875rem;
  line-height: 1.625;
  color: var(--pub-text-secondary);
}

.public-body .blog-comment-reply {
  font-size: 0.75rem;
  margin-top: 0.5rem;
  color: var(--pub-accent);
  transition: opacity 0.2s;
}

.public-body .blog-comment-reply:hover {
  opacity: 0.75;
}

.public-body .blog-comment-replies {
  margin-left: 2.75rem;
  margin-top: 0.75rem;
  padding-left: 1rem;
  border-left: 2px solid var(--pub-border);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.public-body .blog-comment-replies .blog-comment {
  border: none;
  background: transparent;
  padding: 0.5rem 0;
}

.public-body .blog-comment-link {
  color: var(--pub-accent);
  text-decoration: underline;
}

.public-body .blog-comment-link:hover {
  opacity: 0.75;
}

.public-body .blog-comment-msg-success {
  color: #22c55e;
}

.public-body .blog-comment-msg-error {
  color: #ef4444;
}

/* Auth brand panel — force white text in both light and dark mode */
html:not(.dark) .public-body .auth-brand .text-white:not(._noop):not(._noop2):not(._noop3):not(._noop4):not(._noop5),
html:not(.dark) .public-body .auth-brand h2,
html:not(.dark) .public-body .auth-brand p,
html:not(.dark) .public-body .auth-brand span,
.public-body .auth-brand h2,
.public-body .auth-brand p,
.public-body .auth-brand span {
  color: #fff !important;
}

/* Force white text on colored backgrounds in light mode */
html:not(.dark) .public-body [class*=bg-purple-].text-white:not(._noop):not(._noop2):not(._noop3):not(._noop4):not(._noop5),
html:not(.dark) .public-body [class*=bg-indigo-].text-white:not(._noop):not(._noop2):not(._noop3):not(._noop4):not(._noop5),
html:not(.dark) .public-body [class*=bg-green-].text-white:not(._noop):not(._noop2):not(._noop3):not(._noop4):not(._noop5),
html:not(.dark) .public-body [class*=bg-blue-].text-white:not(._noop):not(._noop2):not(._noop3):not(._noop4):not(._noop5),
html:not(.dark) .public-body [class*=bg-red-].text-white:not(._noop):not(._noop2):not(._noop3):not(._noop4):not(._noop5),
html:not(.dark) .public-body [class*=bg-rose-].text-white:not(._noop):not(._noop2):not(._noop3):not(._noop4):not(._noop5),
html:not(.dark) .public-body [class*=bg-purple-] .text-white:not(._noop):not(._noop2):not(._noop3):not(._noop4):not(._noop5),
html:not(.dark) .public-body [class*=bg-indigo-] .text-white:not(._noop):not(._noop2):not(._noop3):not(._noop4):not(._noop5),
html:not(.dark) .public-body [class*=bg-green-] .text-white:not(._noop):not(._noop2):not(._noop3):not(._noop4):not(._noop5),
html:not(.dark) .public-body [class*=bg-blue-] .text-white:not(._noop):not(._noop2):not(._noop3):not(._noop4):not(._noop5),
html:not(.dark) .public-body [class*=bg-red-] .text-white:not(._noop):not(._noop2):not(._noop3):not(._noop4):not(._noop5),
html:not(.dark) .public-body [class*=bg-rose-] .text-white:not(._noop):not(._noop2):not(._noop3):not(._noop4):not(._noop5) {
  color: #fff !important;
}/*# sourceMappingURL=main.css.map */