@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&family=Plus+Jakarta+Sans:wght@400;500;600;700;800;900&display=swap");

:root {
  /* Fonts */
  --font-sans: "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Clean White Light Theme */
  --bg-app: #F8FAFC;
  --bg-surface: #FFFFFF;
  --bg-card: #FFFFFF;
  --bg-surface-hover: #F1F5F9;
  --bg-surface-elevated: #F8FAFC;
  --bg-input: #FFFFFF;
  --bg-sidebar: #FFFFFF;
  --bg-topbar: #FFFFFF;

  /* Borders & Dividers */
  --border-subtle: #E2E8F0;
  --border-card: #E2E8F0;
  --border-hover: #CBD5E1;
  --border-focus: #2563EB;

  /* Brand Accents */
  --primary: #2563EB;
  --primary-hover: #1D4ED8;
  --primary-light: #EFF6FF;
  --primary-gradient: linear-gradient(135deg, #2563EB 0%, #0284C7 100%);
  --cyan: #0284C7;
  --accent-purple: #7C3AED;

  /* Status Colors (Light Theme) */
  --success: #16A34A;
  --success-bg: #DCFCE7;
  --success-border: #86EFAC;
  --success-text: #15803D;

  --danger: #DC2626;
  --danger-bg: #FEE2E2;
  --danger-border: #FCA5A5;
  --danger-text: #B91C1C;

  --warning: #D97706;
  --warning-bg: #FEF3C7;
  --warning-border: #FCD34D;
  --warning-text: #B45309;

  --info: #0284C7;
  --info-bg: #E0F2FE;
  --info-border: #7DD3FC;
  --info-text: #0369A1;

  /* Typography Colors (High Contrast Light Mode) */
  --text-primary: #0F172A;
  --text-secondary: #334155;
  --text-tertiary: #475569;
  --text-inverse: #FFFFFF;

  /* Sizing & Radius */
  --sidebar-width: 250px;
  --topbar-height: 64px;
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-pill: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 12px -2px rgba(0, 0, 0, 0.06), 0 2px 4px -2px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 10px 25px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.03);
}

/* ==========================================================================
   RESET & BASE
   ========================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  color-scheme: light;
}

section[id], .dashboard-module, .card[id], div[id] {
  scroll-margin-top: 74px;
}

body, html {
  font-family: "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-primary);
  background-color: var(--bg-app);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

input, button, select, textarea {
  font-family: "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.5;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
  font-family: "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--text-primary);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.3;
}

h1 { font-size: 1.4rem; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1.05rem; }
h4 { font-size: 0.95rem; }

p {
  color: var(--text-secondary);
}

a {
  color: var(--primary);
  text-decoration: none;
  transition: all 0.15s ease;
}

a:hover {
  color: var(--primary-hover);
}

img {
  display: block;
  max-width: 100%;
}

code, kbd, samp, pre {
  font-family: "JetBrains Mono", Consolas, monospace;
}

code {
  font-size: 0.84em;
  padding: 0.15em 0.4em;
  border-radius: var(--radius-xs);
  background: #F1F5F9;
  color: #1E293B;
  border: 1px solid #E2E8F0;
  font-weight: 500;
}

/* Scrollbars */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #F1F5F9;
}
::-webkit-scrollbar-thumb {
  background: #CBD5E1;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #94A3B8;
}

/* Utilities */
.muted { color: var(--text-tertiary) !important; }
.text-sec { color: var(--text-secondary) !important; }
.ok-text { color: var(--success-text) !important; font-weight: 600; }
.danger-text { color: var(--danger-text) !important; font-weight: 600; }
.warn-text { color: var(--warning-text) !important; font-weight: 600; }
.info-text { color: var(--info-text) !important; font-weight: 600; }
.wide { width: 100%; }
.no-margin { margin: 0 !important; }
.text-center { text-align: center; }

/* SVG Icons */
.icon {
  width: 17px;
  height: 17px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  stroke-width: 2;
}

.icon-lg { width: 22px; height: 22px; }
.icon-sm { width: 15px; height: 15px; }

/* ==========================================================================
   NÚT GẠT BẬT / TẮT (IOS / MODERN TOGGLE SWITCHES)
   ========================================================================== */
/* Convert all standard checkboxes & check labels into smooth toggle switches */
.check,
.checkline,
.switch-row,
.switch-label,
label.check,
label.checkline,
label:has(> input[type="checkbox"]) {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  cursor: pointer !important;
  user-select: none !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  color: var(--text-primary) !important;
  margin: 6px 0 10px !important;
  width: fit-content !important;
  max-width: 100% !important;
  text-align: left !important;
  vertical-align: middle !important;
}

.check input[type="checkbox"],
.checkline input[type="checkbox"],
.switch-row input[type="checkbox"],
.switch-label input[type="checkbox"],
label:has(> input[type="checkbox"]) input[type="checkbox"],
input[type="checkbox"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 38px !important;
  height: 20px !important;
  background-color: #CBD5E1 !important;
  border-radius: 20px !important;
  position: relative !important;
  cursor: pointer !important;
  outline: none !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  flex-shrink: 0 !important;
  border: 1px solid #94A3B8 !important;
  margin: 0 !important;
  display: inline-block !important;
}

input[type="checkbox"]::before,
.check input[type="checkbox"]::before,
.switch-row input[type="checkbox"]::before {
  content: "" !important;
  position: absolute !important;
  top: 2px !important;
  left: 2px !important;
  width: 14px !important;
  height: 14px !important;
  background-color: #FFFFFF !important;
  border-radius: 50% !important;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

/* KHI BẬT: ĐỔI SANG MÀU XANH LÁ CÂY NỔI BẬT (EMERALD / GREEN ON STATE) - ĐẢM BẢO SPECIFICITY CAO HƠN */
.check input[type="checkbox"]:checked,
.checkline input[type="checkbox"]:checked,
.switch-row input[type="checkbox"]:checked,
.switch-label input[type="checkbox"]:checked,
label:has(> input[type="checkbox"]) input[type="checkbox"]:checked,
input[type="checkbox"]:checked {
  background-color: #10B981 !important;
  border-color: #10B981 !important;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.45) !important;
}

.check input[type="checkbox"]:checked::before,
.checkline input[type="checkbox"]:checked::before,
.switch-row input[type="checkbox"]:checked::before,
.switch-label input[type="checkbox"]:checked::before,
label:has(> input[type="checkbox"]) input[type="checkbox"]:checked::before,
input[type="checkbox"]:checked::before {
  transform: translateX(18px) !important;
}

input[type="checkbox"]:focus-visible {
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.25) !important;
}

/* DARK MODE CHO SWITCHES */
html[data-theme="dark"] .check input[type="checkbox"]:not(:checked),
html[data-theme="dark"] .checkline input[type="checkbox"]:not(:checked),
html[data-theme="dark"] .switch-row input[type="checkbox"]:not(:checked),
html[data-theme="dark"] input[type="checkbox"]:not(:checked),
body.dark-mode .check input[type="checkbox"]:not(:checked),
body.dark-mode input[type="checkbox"]:not(:checked) {
  background-color: #1E293B !important;
  border-color: #475569 !important;
}

html[data-theme="dark"] .check input[type="checkbox"]:checked,
html[data-theme="dark"] .checkline input[type="checkbox"]:checked,
html[data-theme="dark"] .switch-row input[type="checkbox"]:checked,
html[data-theme="dark"] input[type="checkbox"]:checked,
body.dark-mode .check input[type="checkbox"]:checked,
body.dark-mode input[type="checkbox"]:checked {
  background-color: #10B981 !important;
  border-color: #10B981 !important;
  box-shadow: 0 2px 10px rgba(16, 185, 129, 0.45) !important;
}

/* Collapsible Card Details */
details.card > summary {
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: color 0.15s ease;
}

details.card > summary::-webkit-details-marker {
  display: none;
}

details.card > summary::before {
  content: '►';
  display: inline-block;
  font-size: 0.75rem;
  color: var(--primary);
  margin-right: 8px;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

details.card[open] > summary::before {
  transform: rotate(90deg);
}

details.card[open] > summary {
  padding-bottom: 4px;
}

/* Switch card for feature toggles */
.toggle-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}

.toggle-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  transition: all 0.15s ease;
}

.toggle-card:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-sm);
}

.switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin: 0;
}

.switch-row > div {
  display: flex;
  flex-direction: column;
}

.switch-row strong {
  font-size: 0.9rem;
  color: var(--text-primary);
}

.switch-row small {
  font-size: 0.78rem;
  color: var(--text-secondary);
}

.mini-toggle-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
  padding: 12px;
  background: #F8FAFC;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-card);
}

/* Group moderation configuration table cell & Policy Card */
.group-policy-card {
  background: var(--bg-card, #1e293b);
  border: 1px solid var(--border-card, rgba(255, 255, 255, 0.08));
  border-radius: 12px;
  padding: 18px 20px;
  margin-bottom: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.group-policy-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-card, rgba(255, 255, 255, 0.08));
}

.group-policy-header h4 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary, #f8fafc);
  display: flex;
  align-items: center;
  gap: 8px;
}

.group-policy-header p {
  margin: 2px 0 0;
  font-size: 0.8rem;
  color: var(--text-muted, #94a3b8);
}

.group-policy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.group-policy-item {
  background: var(--bg-surface, rgba(255, 255, 255, 0.04));
  border: 1px solid var(--border-card, rgba(255, 255, 255, 0.08));
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  transition: all 0.2s ease;
  cursor: pointer;
}

.group-policy-item:hover {
  background: var(--bg-surface-hover, rgba(255, 255, 255, 0.08));
  border-color: var(--primary, #3b82f6);
  transform: translateY(-1px);
}

.group-policy-item .info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.group-policy-item .info strong {
  font-size: 0.88rem;
  color: var(--text-primary, #f8fafc);
  display: flex;
  align-items: center;
  gap: 6px;
}

.group-policy-item .info span {
  font-size: 0.75rem;
  color: var(--text-muted, #94a3b8);
}

.group-policy-allowed-box {
  background: var(--bg-surface, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--border-card, rgba(255, 255, 255, 0.08));
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 14px;
}

.group-policy-allowed-box label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary, #f8fafc);
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.group-policy-allowed-box textarea {
  width: 100%;
  border-radius: 8px;
  padding: 8px 12px;
  font-family: monospace;
  font-size: 0.82rem;
  resize: vertical;
}

.group-policy-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

/* Modernized Moderation Table Cells */
.moderation-group-cell {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 220px;
}

.moderation-group-avatar {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

.moderation-group-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
}

.moderation-group-name {
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--text-primary, #f8fafc);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 240px;
}

.moderation-group-sub {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  color: var(--text-muted, #94a3b8);
}

.moderation-copy-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 1px 4px;
  font-size: 0.72rem;
  color: var(--primary, #3b82f6);
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  transition: all 0.15s ease;
}

.moderation-copy-btn:hover {
  background: rgba(59, 130, 246, 0.15);
}

.moderation-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(140px, 1fr));
  gap: 6px 12px;
  align-items: center;
  min-width: 310px;
  padding: 4px 0;
}

.moderation-form .check {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 !important;
  font-size: 0.8rem !important;
  color: var(--text-primary, #f8fafc) !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  user-select: none !important;
}

.moderation-form .check input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--primary, #3b82f6);
  cursor: pointer;
}

.moderation-mute-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 230px;
}

.moderation-mute-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.moderation-mute-form input {
  flex: 1;
  min-width: 90px;
  padding: 5px 8px;
  font-size: 0.78rem;
  height: 30px;
  border-radius: 6px;
}

.moderation-mute-form select {
  width: 85px;
  padding: 4px 6px;
  font-size: 0.78rem;
  height: 30px;
  border-radius: 6px;
  background: var(--bg-surface, #1e293b);
  color: var(--text-primary, #f8fafc);
  border: 1px solid var(--border-card, rgba(255, 255, 255, 0.12));
}

.moderation-mute-form .btn-mute {
  padding: 4px 8px;
  font-size: 0.78rem;
  height: 30px;
  background: #f59e0b;
  color: #1e1e1e;
  font-weight: 600;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

.moderation-mute-form .btn-unmute {
  padding: 4px 8px;
  font-size: 0.78rem;
  height: 30px;
  border-radius: 6px;
}

.moderation-active-mutes {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 2px;
}

.moderation-mute-tag {
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.35);
  color: #fbbf24;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.7rem;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.moderation-mute-tag button {
  background: transparent;
  border: none;
  color: #f87171;
  font-weight: bold;
  cursor: pointer;
  padding: 0;
  margin: 0;
  font-size: 0.8rem;
  line-height: 1;
}

.moderation-save-btn {
  padding: 6px 14px !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  min-width: 65px;
  transition: all 0.2s ease !important;
}

/* ==========================================================================
   APP LAYOUT & SIDEBAR & TOPBAR
   ========================================================================== */
.app-shell {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  width: var(--sidebar-width);
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border-card);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 50;
  padding: 20px 14px;
  box-shadow: var(--shadow-sm);
}

.sidebar-scrim {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.4);
  backdrop-filter: blur(2px);
  z-index: 45;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 10px 12px;
  border-bottom: none;
  margin-bottom: 12px;
}

.brand-mark {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  background: var(--primary);
  color: #FFFFFF;
  font-size: 1.15rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.35);
}

.brand strong {
  font-size: 1rem;
  font-weight: 800;
  color: var(--text-primary);
  display: block;
}

.brand span {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--primary);
  text-transform: uppercase;
}

.nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  overflow-y: auto;
}

.nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 0.88rem;
  transition: all 0.15s ease;
}

.nav a:hover {
  background: #F1F5F9;
  color: var(--text-primary);
}

.nav a.active {
  background: var(--primary);
  color: #FFFFFF;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25);
}

.nav a.active .icon {
  color: #FFFFFF;
}

.api-status-widget {
  margin-top: auto;
  padding: 12px;
  background: #F8FAFC;
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
}

.user-wallet-widget {
  margin-top: auto;
  padding: 12px;
  background: #F0FDF4;
  border: 1px solid #BBF7D0;
  border-radius: var(--radius-md);
}

.user-wallet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.user-wallet-amount {
  font-size: 1.15rem;
  font-weight: 800;
  color: #15803D;
  margin-top: 4px;
  font-family: inherit;
  letter-spacing: -0.5px;
}

.status-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
}

.status-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #94A3B8;
}

.status-indicator.online .status-dot {
  background: var(--success);
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.2);
}

.status-indicator.offline .status-dot {
  background: var(--danger);
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.2);
}

/* MODERN ACCOUNT QR CREATION BANNER */
.account-qr-banner {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 20px 24px;
  margin-bottom: 24px;
  box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.03);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.account-qr-banner-head {
  display: flex;
  align-items: center;
  gap: 14px;
}

.account-qr-icon-badge {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: #EFF6FF;
  color: #2563EB;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.account-qr-icon-badge svg {
  width: 22px;
  height: 22px;
}

.account-qr-banner-head h3 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: #0F172A;
}

.account-qr-banner-head p {
  margin: 3px 0 0;
  font-size: 0.83rem;
  color: #64748B;
}

.account-qr-form-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  width: 100%;
}

.account-qr-input-wrap {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
}

.account-qr-input-icon {
  position: absolute;
  left: 14px;
  width: 18px;
  height: 18px;
  color: #94A3B8;
  pointer-events: none;
}

.account-qr-input {
  width: 100%;
  padding: 12px 16px 12px 42px !important;
  font-size: 0.92rem !important;
  border: 1.5px solid #CBD5E1 !important;
  border-radius: 8px !important;
  background: #F8FAFC !important;
  color: #0F172A !important;
  transition: all 0.2s ease !important;
}

.account-qr-input:focus {
  background: #FFFFFF !important;
  border-color: #2563EB !important;
  box-shadow: 0 0 0 3.5px rgba(37, 99, 235, 0.12) !important;
  outline: none !important;
}

.account-qr-btn {
  padding: 12px 26px !important;
  font-size: 0.92rem !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  background: #2563EB !important;
  color: #FFFFFF !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25) !important;
}

.account-qr-btn:hover:not(:disabled) {
  background: #1D4ED8 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.38) !important;
}

.account-qr-btn:active:not(:disabled) {
  transform: translateY(0) !important;
}

.account-qr-btn:disabled {
  opacity: 0.55 !important;
  cursor: not-allowed !important;
}

@media (max-width: 640px) {
  .account-qr-form-row {
    flex-direction: column;
    align-items: stretch;
  }
  .account-qr-btn {
    width: 100%;
    justify-content: center;
  }
}

.main-panel {
  flex: 1;
  margin-left: var(--sidebar-width);
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.topbar {
  height: var(--topbar-height);
  background: var(--bg-topbar);
  border-bottom: 1px solid var(--border-card);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  position: sticky;
  top: 0;
  z-index: 40;
  box-shadow: var(--shadow-sm);
  gap: 12px;
}

.topbar-info {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1 1 auto;
}

.topbar-heading-group {
  min-width: 0;
}

.topbar-info h1 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.3;
}

.topbar-info p, .topbar-subtitle {
  font-size: 0.78rem;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.3;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.container {
  max-width: 1300px;
  width: 100%;
  margin: 0 auto;
  padding: 24px 28px 60px;
}

/* ==========================================================================
   MODULE SWITCHER (SEGMENTED TABS)
   ========================================================================== */
.module-switcher {
  display: flex;
  gap: 6px;
  background: #E2E8F0;
  padding: 4px;
  border-radius: var(--radius-md);
  margin-bottom: 24px;
  overflow-x: auto;
}

.module-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.module-tab:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.6);
}

.module-tab.is-active {
  background: #FFFFFF;
  color: var(--primary);
  box-shadow: var(--shadow-sm);
}

.module-tab-copy small {
  display: none;
}

.dashboard-module.is-module-hidden,
[data-module].is-module-hidden {
  display: none !important;
}

/* ==========================================================================
   CARDS & GRIDS
   ========================================================================== */
.card {
  background: var(--bg-surface);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 20px;
}

.card:last-child {
  margin-bottom: 0;
}

/* ULTRA-PREMIUM THEMED CARDS - LIGHT MODE (Default) */
.card-theme-google {
  background: #FFFFFF !important;
  border: 1.5px solid rgba(66, 133, 244, 0.4) !important;
  box-shadow: 0 4px 18px -4px rgba(66, 133, 244, 0.12), 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

.card-theme-cyan {
  background: #FFFFFF !important;
  border: 1.5px solid rgba(6, 182, 212, 0.4) !important;
  box-shadow: 0 4px 18px -4px rgba(6, 182, 212, 0.12), 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

.card-theme-emerald {
  background: #FFFFFF !important;
  border: 1.5px solid rgba(16, 185, 129, 0.4) !important;
  box-shadow: 0 4px 18px -4px rgba(16, 185, 129, 0.12), 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

.card-theme-purple {
  background: #FFFFFF !important;
  border: 1.5px solid rgba(139, 92, 246, 0.4) !important;
  box-shadow: 0 4px 18px -4px rgba(139, 92, 246, 0.12), 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

.card-theme-indigo {
  background: #FFFFFF !important;
  border: 1.5px solid rgba(99, 102, 241, 0.4) !important;
  box-shadow: 0 4px 18px -4px rgba(99, 102, 241, 0.12), 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

.card-theme-rose {
  background: #FFFFFF !important;
  border: 1.5px solid rgba(244, 63, 94, 0.4) !important;
  box-shadow: 0 4px 18px -4px rgba(244, 63, 94, 0.12), 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

.card-theme-amber {
  background: #FFFFFF !important;
  border: 1.5px solid rgba(245, 158, 11, 0.45) !important;
  box-shadow: 0 4px 18px -4px rgba(245, 158, 11, 0.12), 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

.card-theme-crimson {
  background: #FFFFFF !important;
  border: 1.5px solid rgba(239, 68, 68, 0.45) !important;
  box-shadow: 0 4px 18px -4px rgba(239, 68, 68, 0.12), 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

.card-theme-violet {
  background: #FFFFFF !important;
  border: 1.5px solid rgba(168, 85, 247, 0.4) !important;
  box-shadow: 0 4px 18px -4px rgba(168, 85, 247, 0.12), 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

.card-theme-fuchsia {
  background: #FFFFFF !important;
  border: 1.5px solid rgba(217, 70, 239, 0.4) !important;
  box-shadow: 0 4px 18px -4px rgba(217, 70, 239, 0.12), 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

.card-theme-sky {
  background: #FFFFFF !important;
  border: 1.5px solid rgba(14, 165, 233, 0.4) !important;
  box-shadow: 0 4px 18px -4px rgba(14, 165, 233, 0.12), 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

/* ULTRA-PREMIUM THEMED CARDS - DARK MODE */
html[data-theme="dark"] .card-theme-google,
body.dark-mode .card-theme-google {
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.82) 0%, rgba(15, 23, 42, 0.96) 100%) !important;
  border: 1px solid rgba(66, 133, 244, 0.42) !important;
  box-shadow: 0 10px 30px -10px rgba(66, 133, 244, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="dark"] .card-theme-cyan,
body.dark-mode .card-theme-cyan {
  background: linear-gradient(180deg, rgba(20, 36, 54, 0.85) 0%, rgba(11, 20, 35, 0.96) 100%) !important;
  border: 1px solid rgba(6, 182, 212, 0.42) !important;
  box-shadow: 0 10px 30px -10px rgba(6, 182, 212, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="dark"] .card-theme-emerald,
body.dark-mode .card-theme-emerald {
  background: linear-gradient(180deg, rgba(18, 38, 32, 0.85) 0%, rgba(10, 24, 20, 0.96) 100%) !important;
  border: 1px solid rgba(16, 185, 129, 0.42) !important;
  box-shadow: 0 10px 30px -10px rgba(16, 185, 129, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="dark"] .card-theme-purple,
body.dark-mode .card-theme-purple {
  background: linear-gradient(180deg, rgba(32, 26, 56, 0.85) 0%, rgba(17, 14, 34, 0.96) 100%) !important;
  border: 1px solid rgba(139, 92, 246, 0.42) !important;
  box-shadow: 0 10px 30px -10px rgba(139, 92, 246, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="dark"] .card-theme-indigo,
body.dark-mode .card-theme-indigo {
  background: linear-gradient(180deg, rgba(25, 30, 58, 0.85) 0%, rgba(14, 18, 38, 0.96) 100%) !important;
  border: 1px solid rgba(99, 102, 241, 0.42) !important;
  box-shadow: 0 10px 30px -10px rgba(99, 102, 241, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="dark"] .card-theme-rose,
body.dark-mode .card-theme-rose {
  background: linear-gradient(180deg, rgba(42, 22, 32, 0.85) 0%, rgba(24, 12, 18, 0.96) 100%) !important;
  border: 1px solid rgba(244, 63, 94, 0.42) !important;
  box-shadow: 0 10px 30px -10px rgba(244, 63, 94, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="dark"] .card-theme-amber,
body.dark-mode .card-theme-amber {
  background: linear-gradient(180deg, rgba(40, 32, 20, 0.85) 0%, rgba(24, 18, 10, 0.96) 100%) !important;
  border: 1px solid rgba(245, 158, 11, 0.42) !important;
  box-shadow: 0 10px 30px -10px rgba(245, 158, 11, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="dark"] .card-theme-crimson,
body.dark-mode .card-theme-crimson {
  background: linear-gradient(180deg, rgba(44, 20, 20, 0.85) 0%, rgba(26, 10, 10, 0.96) 100%) !important;
  border: 1px solid rgba(239, 68, 68, 0.42) !important;
  box-shadow: 0 10px 30px -10px rgba(239, 68, 68, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="dark"] .card-theme-violet,
body.dark-mode .card-theme-violet {
  background: linear-gradient(180deg, rgba(34, 22, 52, 0.85) 0%, rgba(19, 11, 32, 0.96) 100%) !important;
  border: 1px solid rgba(168, 85, 247, 0.42) !important;
  box-shadow: 0 10px 30px -10px rgba(168, 85, 247, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="dark"] .card-theme-fuchsia,
body.dark-mode .card-theme-fuchsia {
  background: linear-gradient(180deg, rgba(38, 20, 44, 0.85) 0%, rgba(22, 10, 26, 0.96) 100%) !important;
  border: 1px solid rgba(217, 70, 239, 0.42) !important;
  box-shadow: 0 10px 30px -10px rgba(217, 70, 239, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="dark"] .card-theme-sky,
body.dark-mode .card-theme-sky {
  background: linear-gradient(180deg, rgba(18, 34, 52, 0.85) 0%, rgba(10, 20, 32, 0.96) 100%) !important;
  border: 1px solid rgba(14, 165, 233, 0.42) !important;
  box-shadow: 0 10px 30px -10px rgba(14, 165, 233, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

.card-theme-google,
.card-theme-cyan,
.card-theme-emerald,
.card-theme-purple,
.card-theme-indigo,
.card-theme-rose,
.card-theme-amber,
.card-theme-crimson,
.card-theme-violet,
.card-theme-fuchsia,
.card-theme-sky {
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.card-theme-google:hover { border-color: rgba(66, 133, 244, 0.7) !important; box-shadow: 0 10px 28px -6px rgba(66, 133, 244, 0.2) !important; }
.card-theme-cyan:hover { border-color: rgba(6, 182, 212, 0.7) !important; box-shadow: 0 10px 28px -6px rgba(6, 182, 212, 0.2) !important; }
.card-theme-emerald:hover { border-color: rgba(16, 185, 129, 0.7) !important; box-shadow: 0 10px 28px -6px rgba(16, 185, 129, 0.2) !important; }
.card-theme-purple:hover { border-color: rgba(139, 92, 246, 0.7) !important; box-shadow: 0 10px 28px -6px rgba(139, 92, 246, 0.2) !important; }
.card-theme-indigo:hover { border-color: rgba(99, 102, 241, 0.7) !important; box-shadow: 0 10px 28px -6px rgba(99, 102, 241, 0.2) !important; }
.card-theme-rose:hover { border-color: rgba(244, 63, 94, 0.7) !important; box-shadow: 0 10px 28px -6px rgba(244, 63, 94, 0.2) !important; }
.card-theme-amber:hover { border-color: rgba(245, 158, 11, 0.7) !important; box-shadow: 0 10px 28px -6px rgba(245, 158, 11, 0.2) !important; }
.card-theme-crimson:hover { border-color: rgba(239, 68, 68, 0.7) !important; box-shadow: 0 10px 28px -6px rgba(239, 68, 68, 0.2) !important; }
.card-theme-violet:hover { border-color: rgba(168, 85, 247, 0.7) !important; box-shadow: 0 10px 28px -6px rgba(168, 85, 247, 0.2) !important; }
.card-theme-fuchsia:hover { border-color: rgba(217, 70, 239, 0.7) !important; box-shadow: 0 10px 28px -6px rgba(217, 70, 239, 0.2) !important; }
.card-theme-sky:hover { border-color: rgba(14, 165, 233, 0.7) !important; box-shadow: 0 10px 28px -6px rgba(14, 165, 233, 0.2) !important; }


.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-card);
}

.card-header h2, .card-header h3 {
  font-size: 1.05rem;
  font-weight: 700;
}

.card-header p {
  font-size: 0.8rem;
}

.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.section-head h2 {
  font-size: 1.15rem;
  font-weight: 700;
}

.section-head p {
  font-size: 0.82rem;
  color: var(--text-secondary);
}

.grid {
  display: grid;
  gap: 18px;
  margin-bottom: 20px;
}

.grid.two { grid-template-columns: repeat(2, 1fr); }
.grid.three { grid-template-columns: repeat(3, 1fr); }
.grid.four { grid-template-columns: repeat(4, 1fr); }

/* STATS */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
}

.stat {
  background: var(--bg-surface);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  box-shadow: var(--shadow-sm);
}

.stat span {
  display: block;
  font-size: 0.78rem;
  color: var(--text-secondary);
  font-weight: 600;
}

.stat b {
  display: block;
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--text-primary);
  margin: 4px 0 2px;
}

.stat small {
  font-size: 0.74rem;
  color: var(--text-tertiary);
}

.mini-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  background: #F8FAFC;
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  text-align: center;
}

.mini-stats div b {
  display: block;
  font-size: 1.1rem;
  color: var(--primary);
  font-weight: 700;
}

.mini-stats div span {
  font-size: 0.72rem;
  color: var(--text-secondary);
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.15s ease;
  text-align: center;
}

.btn.primary {
  background: var(--primary);
  color: #FFFFFF;
}

.btn.primary:hover {
  background: var(--primary-hover);
  box-shadow: var(--shadow-sm);
}

.btn.warning {
  background: var(--warning-bg);
  border-color: var(--warning-border);
  color: var(--warning-text);
}

.btn.warning:hover {
  background: #FDE68A;
}

.btn.ghost {
  background: #FFFFFF;
  border-color: var(--border-card);
  color: var(--text-primary);
}

.btn.ghost:hover {
  background: #F1F5F9;
  border-color: var(--border-hover);
}

.btn.danger {
  background: #FFFFFF;
  border-color: var(--danger-border);
  color: var(--danger-text);
}

.btn.danger:hover {
  background: var(--danger-bg);
}

.btn.sm {
  padding: 5px 11px;
  font-size: 0.78rem;
}

.btn.lg {
  padding: 11px 22px;
  font-size: 0.95rem;
}

.button-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* ==========================================================================
   FORMS & INPUTS
   ========================================================================== */
.form-grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

label:not(.check):not(.checkline):not(.switch-row):not(.switch-label):not(:has(> input[type="checkbox"])) {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--text-secondary);
}

input, select, textarea {
  width: 100%;
  padding: 8px 12px;
  background: var(--bg-input);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
  color: var(--text-primary);
  font-family: inherit;
  transition: all 0.15s ease;
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

input::placeholder, textarea::placeholder {
  color: #94A3B8;
}

textarea {
  resize: vertical;
  min-height: 70px;
}

.inline-form {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* ==========================================================================
   TABLES
   ========================================================================== */
.table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  background: #FFFFFF;
}

table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 0.86rem;
}

th {
  background: #F8FAFC;
  color: var(--text-secondary);
  font-weight: 700;
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-card);
}

td {
  padding: 11px 14px;
  border-bottom: 1px solid #F1F5F9;
  color: var(--text-primary);
  vertical-align: middle;
}

tr:last-child td {
  border-bottom: none;
}

tr:hover td {
  background: #F8FAFC;
}

/* ==========================================================================
   BADGES & PILLS
   ========================================================================== */
.badge, .pill, .status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  font-size: 0.74rem;
  font-weight: 700;
  line-height: 1;
}

.badge.active, .pill.on, .status-active {
  background: rgba(16, 185, 129, 0.15) !important;
  color: #10B981 !important;
  border: 1px solid rgba(16, 185, 129, 0.35) !important;
}

.badge.danger, .pill.danger-pill, .status-locked {
  background: rgba(239, 68, 68, 0.15) !important;
  color: #EF4444 !important;
  border: 1px solid rgba(239, 68, 68, 0.35) !important;
}

.badge.relogin, .pill.relogin, .status-relogin {
  background: rgba(245, 158, 11, 0.15) !important;
  color: #F59E0B !important;
  border: 1px solid rgba(245, 158, 11, 0.35) !important;
}

.badge.warn, .status-stopped {
  background: rgba(234, 179, 8, 0.12) !important;
  color: #EAB308 !important;
  border: 1px solid rgba(234, 179, 8, 0.25) !important;
}

.badge.neutral, .status-not_logged_in {
  background: rgba(148, 163, 184, 0.12) !important;
  color: #94A3B8 !important;
  border: 1px solid rgba(148, 163, 184, 0.25) !important;
}

.status-error {
  background: rgba(239, 68, 68, 0.15) !important;
  color: #EF4444 !important;
  border: 1px solid rgba(239, 68, 68, 0.35) !important;
}

.user-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  background: #F1F5F9;
  border: 1px solid var(--border-card);
  border-radius: var(--radius-pill);
  font-size: 0.82rem;
  color: var(--text-primary);
}

.user-avatar-mini {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--primary);
  color: #FFFFFF;
  font-size: 0.72rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ==========================================================================
   HERO / BANNER CARDS
   ========================================================================== */
.glass-panel, .sale-hero, .billing-hero, .profile-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 26px;
  background: #FFFFFF;
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  margin-bottom: 20px;
}

.eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
  display: block;
}

.sale-chip-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.sale-chip {
  padding: 3px 8px;
  background: #F8FAFC;
  border: 1px solid var(--border-card);
  border-radius: var(--radius-xs);
  font-size: 0.78rem;
  color: var(--text-secondary);
}

.profile-balance-card, .billing-status {
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.profile-balance-card span, .billing-status small {
  font-size: 0.78rem;
  color: var(--text-secondary);
}

.profile-balance-card strong, .billing-status strong {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--primary);
}

/* ==========================================================================
   ACCOUNT ROWS & WORKSPACES
   ========================================================================== */
.account-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.search-field {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
}

.search-field .icon {
  position: absolute;
  left: 10px;
  color: var(--text-tertiary);
}

.search-field input {
  padding-left: 32px;
}

.account-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}

.account-row {
  display: grid;
  grid-template-columns: 2fr 1.2fr 1fr 1fr auto;
  align-items: center;
  padding: 12px 18px;
  background: var(--bg-surface);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  transition: all 0.15s ease;
}

.account-row:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-sm);
}

.account-identity {
  display: flex;
  align-items: center;
  gap: 12px;
}

.account-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #E0E7FF;
  color: var(--primary);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
}

.account-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
}

.account-cell > span:first-child,
.account-cell .account-cell-label {
  display: block;
  font-size: 0.72rem;
  color: var(--text-secondary);
}

.account-cell .status-badge {
  display: inline-flex !important;
  width: fit-content !important;
  max-width: fit-content !important;
  align-items: center;
  justify-content: center;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: 0.74rem;
  font-weight: 600;
  white-space: nowrap;
}

.account-cell strong {
  font-size: 0.86rem;
}

.account-row-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* WORKSPACE ISOLATION & DEDICATED FULL VIEW */
body.account-workspace-mode .account-overview-panel,
.account-control-card.account-workspace-mode .account-overview-panel,
[data-module="accounts"].account-workspace-mode .account-overview-panel {
  display: none !important;
}

body.account-workspace-mode .account-workspaces,
.account-control-card.account-workspace-mode .account-workspaces {
  display: block !important;
}

.account-workspace-shell {
  display: block;
}

.account-workspace-shell[hidden] {
  display: none !important;
}

body.account-workspace-mode .account-workspace-shell:not([hidden]),
.account-control-card.account-workspace-mode .account-workspace-shell:not([hidden]) {
  display: block !important;
  animation: fadeInWorkspace 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

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

.account-workspace-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  background: var(--bg-surface);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  margin-bottom: 20px;
  gap: 16px;
  flex-wrap: wrap;
  box-shadow: var(--shadow-sm);
}

/* ==========================================================================
   PLANS MATRIX
   ========================================================================== */
.plan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}

.plan-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  padding: 22px;
  display: flex;
  flex-direction: column;
  transition: all 0.15s ease;
}

.plan-card:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-md);
}

.plan-top {
  display: flex;
  justify-content: space-between;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 8px;
}

.plan-card h3 {
  font-size: 1.15rem;
  margin-bottom: 6px;
}

.plan-card p {
  font-size: 0.82rem;
  margin-bottom: 14px;
  flex: 1;
}

.plan-card strong {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 14px;
}

/* ==========================================================================
   CODEBOX & LOGS
   ========================================================================== */
.codebox, .logbox, .lookup-result-body, .tool-result-body {
  background: #0F172A;
  color: #F8FAFC;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  font-size: 0.8rem;
  line-height: 1.6;
  white-space: pre-wrap !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  max-width: 100% !important;
  max-height: 380px;
  overflow-y: auto;
  border: 1px solid #334155;
}

/* ==========================================================================
   TOASTS & NOTICES
   ========================================================================== */
.toast-container {
  position: fixed;
  top: 18px;
  right: 24px;
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  background: #FFFFFF;
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--text-primary);
}

.toast.success { border-left: 4px solid var(--success); }
.toast.danger { border-left: 4px solid var(--danger); }
.toast.warning { border-left: 4px solid var(--warning); }

.dashboard-floating-notice {
  background: #FEF3C7;
  border: 1px solid #FCD34D;
  border-radius: var(--radius-md);
  padding: 12px 18px;
  color: #92400E;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* ==========================================================================
   ADMIN CONSOLE LAYOUT
   ========================================================================== */
.admin-console {
  display: flex;
  min-height: 100vh;
  background: var(--bg-app);
}

.admin-sidebar {
  width: var(--sidebar-width);
  background: #FFFFFF;
  border-right: 1px solid var(--border-card);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  padding: 20px 14px;
  z-index: 50;
}

.admin-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: none;
  margin-bottom: 12px;
}

.admin-brand .brand-mark {
  background: #0F172A;
}

.admin-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  overflow-y: auto;
}

.admin-nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 0.86rem;
}

.admin-nav a:hover {
  background: #F1F5F9;
  color: var(--text-primary);
}

.admin-nav a.active {
  background: var(--primary);
  color: #FFFFFF;
}

.admin-nav a.active .icon {
  color: #FFFFFF;
}

.admin-main {
  flex: 1;
  margin-left: var(--sidebar-width);
  padding: 24px 28px 60px;
  overflow-y: auto;
  min-width: 0;
}

.admin-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 24px;
}

.admin-tab-panel[hidden] {
  display: none !important;
}

/* ==========================================================================
/* ==========================================================================
   AUTH PAGE & LANDING HERO (ULTRA-PREMIUM SAAS REDESIGN)
   ========================================================================== */
body.is-login {
  background: #080C17 !important;
  color: #F8FAFC !important;
  background-image: 
    radial-gradient(circle at 15% 15%, rgba(59, 130, 246, 0.18), transparent 40%),
    radial-gradient(circle at 85% 75%, rgba(139, 92, 246, 0.16), transparent 45%),
    radial-gradient(circle at 50% 40%, rgba(6, 182, 212, 0.08), transparent 55%),
    radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px) !important;
  background-size: auto, auto, auto, 28px 28px !important;
  background-attachment: fixed !important;
}

body.is-login .app-shell,
body.is-login .main-panel {
  background: transparent !important;
}

/* Landing Auth Topbar */
.landing-auth-topbar {
  position: sticky;
  top: 0;
  z-index: 90;
  width: 100%;
  background: rgba(11, 15, 25, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.landing-auth-topbar-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.landing-auth-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.landing-brand-mark {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, #3B82F6 0%, #1D4ED8 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.35);
}

.landing-brand-mark svg {
  width: 20px;
  height: 20px;
}

.landing-auth-brand-name {
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #FFFFFF;
  display: block;
}

.landing-auth-brand-badge {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #38BDF8;
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.25);
  padding: 1px 6px;
  border-radius: 4px;
}

.landing-auth-status-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  font-weight: 600;
  color: #94A3B8;
  background: rgba(30, 41, 59, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 6px 14px;
  border-radius: 999px;
}

.pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10B981;
  box-shadow: 0 0 10px #10B981;
  animation: pulseDot 2s infinite;
}

@keyframes pulseDot {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.landing-auth-nav-btns {
  display: flex;
  align-items: center;
  gap: 10px;
}

.landing-nav-link {
  font-size: 0.85rem;
  font-weight: 600;
  color: #94A3B8;
  text-decoration: none;
  padding: 7px 14px;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.landing-nav-link:hover, .landing-nav-link.active {
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.06);
}

.landing-nav-btn-highlight {
  font-size: 0.85rem;
  font-weight: 700;
  color: #FFFFFF;
  text-decoration: none;
  background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
  padding: 7px 16px;
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35);
  transition: all 0.2s ease;
}

.landing-nav-btn-highlight:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.5);
}

/* SaaS Auth Hero Container */
.saas-auth-hero {
  display: grid;
  grid-template-columns: 1.15fr 0.95fr;
  align-items: center;
  gap: 50px;
  max-width: 1240px;
  margin: 0 auto;
  padding: 40px 16px 60px 16px;
  min-height: calc(100vh - 75px);
}

/* Left Hero Showcase */
.auth-hero-left {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.auth-pill-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(59, 130, 246, 0.12);
  border: 1px solid rgba(59, 130, 246, 0.3);
  width: fit-content;
}

.auth-pill-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #38BDF8;
}

.auth-pill-text {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #38BDF8;
}

.auth-hero-title {
  font-size: 2.35rem;
  font-weight: 900;
  line-height: 1.22;
  letter-spacing: -0.03em;
  color: #FFFFFF;
  margin: 0;
}

.auth-gradient-text {
  background: linear-gradient(135deg, #60A5FA 0%, #A78BFA 50%, #38BDF8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

.auth-hero-desc {
  font-size: 0.98rem;
  line-height: 1.65;
  color: #94A3B8;
  margin: 0;
}

/* 4 Feature Cards Grid */
.auth-feature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-top: 6px;
}

.auth-feat-item {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  backdrop-filter: blur(10px);
  transition: all 0.25s ease;
}

.auth-feat-item:hover {
  background: rgba(30, 41, 59, 0.7);
  border-color: rgba(59, 130, 246, 0.35);
  transform: translateY(-2px);
}

.auth-feat-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.auth-feat-icon svg {
  width: 20px;
  height: 20px;
}

.icon-blue { background: rgba(59, 130, 246, 0.15); color: #60A5FA; border: 1px solid rgba(59, 130, 246, 0.3); }
.icon-cyan { background: rgba(6, 182, 212, 0.15); color: #38BDF8; border: 1px solid rgba(6, 182, 212, 0.3); }
.icon-purple { background: rgba(168, 85, 247, 0.15); color: #C084FC; border: 1px solid rgba(168, 85, 247, 0.3); }
.icon-emerald { background: rgba(16, 185, 129, 0.15); color: #34D399; border: 1px solid rgba(16, 185, 129, 0.3); }

.auth-feat-item h4 {
  font-size: 0.88rem;
  font-weight: 700;
  color: #FFFFFF;
  margin: 0 0 4px 0;
}

.auth-feat-item p {
  font-size: 0.78rem;
  color: #94A3B8;
  line-height: 1.45;
  margin: 0;
}

/* Plans Preview Row */
.auth-plans-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 8px;
}

.auth-plan-pill {
  padding: 12px 14px;
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  position: relative;
  transition: all 0.2s ease;
}

.auth-plan-pill:hover {
  border-color: rgba(59, 130, 246, 0.4);
}

.auth-plan-highlight {
  border-color: rgba(59, 130, 246, 0.4);
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.8) 0%, rgba(30, 58, 138, 0.35) 100%);
}

.auth-plan-badge {
  font-size: 0.65rem;
  font-weight: 700;
  color: #94A3B8;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.badge-hot {
  color: #F59E0B;
}

.auth-plan-pill strong {
  font-size: 0.95rem;
  font-weight: 800;
  color: #FFFFFF;
}

.auth-plan-pill small {
  font-size: 0.72rem;
  color: #64748B;
}

.auth-contact-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  font-size: 0.82rem;
  color: #64748B;
  padding-top: 6px;
}

.auth-contact-footer a {
  color: #38BDF8;
  text-decoration: none;
  font-weight: 700;
}

.auth-contact-footer a:hover {
  text-decoration: underline;
}

/* Right Glassmorphic Card */
.auth-card-wrap {
  display: flex;
  justify-content: center;
}

.auth-glass-card {
  width: 100%;
  max-width: 440px;
  background: rgba(17, 24, 39, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 24px;
  padding: 32px 30px;
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.7), 0 0 50px rgba(59, 130, 246, 0.12);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

.auth-card-logo {
  text-align: center;
  margin-bottom: 18px;
}

.auth-card-logo img {
  max-height: 42px;
  max-width: 160px;
  object-fit: contain;
}

/* Nav Tabs */
.auth-nav-tabs {
  display: flex;
  background: rgba(11, 15, 25, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 4px;
  border-radius: 12px;
  margin-bottom: 22px;
  gap: 4px;
}

.auth-nav-tabs a {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 9px;
  font-size: 0.85rem;
  font-weight: 700;
  color: #94A3B8;
  text-decoration: none;
  transition: all 0.2s ease;
}

.auth-nav-tabs a svg {
  width: 16px;
  height: 16px;
}

.auth-nav-tabs a.active {
  background: #2563EB;
  color: #FFFFFF;
  box-shadow: 0 2px 10px rgba(37, 99, 235, 0.4);
}

.auth-form-head {
  margin-bottom: 20px;
}

.auth-form-head h2 {
  font-size: 1.25rem;
  font-weight: 800;
  color: #FFFFFF;
  margin: 0 0 4px 0;
}

.auth-form-head p {
  font-size: 0.82rem;
  color: #94A3B8;
  margin: 0;
}

/* Auth Form Fields */
.auth-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.auth-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.auth-field label {
  font-size: 0.82rem;
  font-weight: 600;
  color: #CBD5E1;
}

.auth-input-container {
  position: relative;
  display: flex;
  align-items: center;
}

.auth-field-icon {
  position: absolute;
  left: 14px;
  width: 18px;
  height: 18px;
  color: #64748B;
  pointer-events: none;
}

.auth-input-container input {
  width: 100%;
  padding: 11px 40px 11px 42px;
  background: rgba(11, 15, 25, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  color: #FFFFFF;
  font-size: 0.9rem;
  transition: all 0.2s ease;
}

.auth-input-container input:focus {
  outline: none;
  border-color: #3B82F6;
  background: rgba(15, 23, 42, 0.95);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
}

.auth-input-container input::placeholder {
  color: #475569;
}

.auth-eye-btn {
  position: absolute;
  right: 12px;
  background: none;
  border: none;
  color: #94A3B8;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.7;
  transition: opacity 0.15s;
}

.auth-eye-btn:hover {
  opacity: 1;
}

.auth-eye-btn svg {
  width: 18px;
  height: 18px;
}

.auth-submit-btn {
  width: 100%;
  padding: 12px 18px;
  background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
  border: none;
  border-radius: 10px;
  color: #FFFFFF;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 4px 16px rgba(37, 99, 235, 0.4);
  transition: all 0.2s ease;
  margin-top: 6px;
}

.auth-submit-btn svg {
  width: 18px;
  height: 18px;
  transition: transform 0.2s ease;
}

.auth-submit-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 22px rgba(37, 99, 235, 0.55);
}

.auth-submit-btn:hover svg {
  transform: translateX(3px);
}

.auth-submit-btn:active {
  transform: translateY(0);
}

/* Auth Divider & Google Button */
.auth-divider {
  display: flex;
  align-items: center;
  margin: 12px 0 10px 0;
  text-align: center;
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.auth-divider span {
  padding: 0 12px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #64748B;
  text-transform: uppercase;
}

.auth-google-btn {
  width: 100%;
  padding: 11px 18px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  color: #FFFFFF;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  transition: all 0.2s ease;
  backdrop-filter: blur(10px);
}

.auth-google-btn:hover {
  background: rgba(255, 255, 255, 0.13);
  border-color: rgba(255, 255, 255, 0.28);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  color: #FFFFFF;
}

.auth-google-btn:active {
  transform: translateY(0);
}

.google-svg-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.auth-switch-text {
  text-align: center;
  font-size: 0.82rem;
  color: #94A3B8;
  margin: 8px 0 0 0;
}

.auth-switch-text a {
  color: #38BDF8;
  font-weight: 700;
  text-decoration: none;
}

.auth-switch-text a:hover {
  text-decoration: underline;
}

.auth-trust-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.72rem;
  font-weight: 600;
  color: #64748B;
}

@media (max-width: 960px) {
  .saas-auth-hero {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 20px 16px 40px;
    min-height: calc(100vh - 80px);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .auth-hero-left {
    display: none !important;
  }
  .auth-card-wrap {
    width: 100%;
    max-width: 440px;
    margin: 0 auto;
  }
  .auth-glass-card {
    padding: 26px 20px;
    border-radius: 20px;
  }
  .landing-auth-status-pill {
    display: none;
  }
}

/* ==========================================================================
   COMMERCIAL SAAS COMPONENTS (VIETQR, ONBOARDING, SUPPORT WIDGET, FAQ)
   ========================================================================== */
/* Onboarding Wizard */
.onboarding-card {
  background: linear-gradient(135deg, #EFF6FF 0%, #F0FDF4 100%);
  border: 1px solid #BFDBFE;
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  margin-bottom: 24px;
  box-shadow: var(--shadow-sm);
  position: relative;
}

.onboarding-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 14px;
}

.onboarding-step {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: var(--radius-md);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: all 0.15s ease;
  position: relative;
}

.onboarding-step:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-sm);
}

.onboarding-step-num {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--primary);
  color: #FFFFFF;
  font-size: 0.75rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.onboarding-step strong {
  font-size: 0.9rem;
  color: var(--text-primary);
}

.onboarding-step p {
  font-size: 0.78rem;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

/* Expiry Alert Banner */
.expiry-alert-banner {
  background: #FFFBEB;
  border: 1px solid #FDE68A;
  border-left: 4px solid var(--warning);
  border-radius: var(--radius-md);
  padding: 12px 18px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.expiry-alert-banner p {
  color: #92400E;
  font-size: 0.88rem;
  font-weight: 500;
  margin: 0;
}

.expiry-alert-banner b {
  color: #B45309;
}

/* VietQR Generator & 1-Touch Copy */
.vietqr-wrapper {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 20px;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  padding: 20px;
  align-items: center;
}

.vietqr-box {
  background: #FFFFFF;
  border: 2px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 10px;
  text-align: center;
  box-shadow: var(--shadow-sm);
}

.vietqr-box img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-xs);
  display: block;
}

.vietqr-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 16px;
}

.preset-chip {
  padding: 6px 12px;
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  font-size: 0.8rem;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--trans-fast);
}

.vietqr-modal-grid {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 18px;
  align-items: start;
}

@media (max-width: 640px) {
  .vietqr-modal-grid {
    grid-template-columns: 1fr !important;
  }
}

.btn-copy-field.active {
  background: #10B981 !important;
  border-color: #10B981 !important;
  color: #FFFFFF !important;
}

.preset-chip:hover, .preset-chip.is-selected {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #FFFFFF !important;
}

.copy-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
  color: var(--text-primary);
}

.copy-btn {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xs);
  padding: 3px 8px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--primary);
  cursor: pointer;
  transition: all 0.15s ease;
}

.copy-btn:hover {
  background: var(--primary-light);
  border-color: var(--primary);
}

.copy-btn.copied {
  background: var(--success-bg);
  border-color: var(--success-border);
  color: var(--success-text);
}

/* Plan Badges & Features */
.plan-badge-popular {
  position: absolute;
  top: -12px;
  right: 20px;
  background: var(--primary);
  color: #FFFFFF;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.35);
}

.plan-card {
  position: relative;
}

.plan-card.is-popular {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2), var(--shadow-md);
}

.plan-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 14px 0 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border-subtle);
}

.plan-features li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.plan-features li::before {
  content: "✓";
  color: var(--success);
  font-weight: 800;
}

/* FAQ Accordion */
.faq-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.faq-item {
  background: #FFFFFF;
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  padding: 14px 18px;
}

.faq-item summary {
  font-weight: 700;
  color: var(--text-primary);
  cursor: pointer;
  font-size: 0.9rem;
}

.faq-item p {
  margin-top: 8px;
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.55;
}

/* Floating Multi-Channel Support Widget */
.floating-support-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9990;
}

.floating-support-btn {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--primary, #2563eb);
  color: #FFFFFF;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.4);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.floating-support-btn:hover {
  transform: scale(1.06);
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.5);
}

.floating-support-menu {
  position: absolute;
  bottom: 62px;
  right: 0;
  width: 275px;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: var(--radius-lg, 16px);
  box-shadow: 0 16px 40px -4px rgba(15, 23, 42, 0.16), 0 4px 14px rgba(15, 23, 42, 0.08);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  transform-origin: bottom right;
  transition: all 0.18s ease;
  z-index: 9992;
}

.floating-support-head {
  padding: 6px 8px 8px;
  border-bottom: 1px solid #E2E8F0;
  margin-bottom: 4px;
}

.floating-support-head strong {
  font-size: 0.88rem;
  font-weight: 700;
  color: #0F172A;
  display: block;
}

.floating-support-head small {
  font-size: 0.72rem;
  color: #64748B;
  display: block;
  margin-top: 1px;
}

.floating-support-menu[hidden] {
  display: none !important;
}

@media (max-width: 768px) {
  body.is-authenticated .floating-support-container,
  .floating-support-container {
    bottom: 78px;
    right: 14px;
    z-index: 9995;
  }
  .floating-support-btn {
    width: 46px;
    height: 46px;
  }
  .floating-support-menu {
    bottom: 54px;
    right: 0;
    width: min(280px, calc(100vw - 28px));
    max-height: calc(100vh - 150px);
    overflow-y: auto;
  }
}

.support-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--radius-md, 10px);
  color: #1E293B;
  font-size: 0.86rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.15s ease;
}

.support-item:hover {
  background: #F1F5F9;
  color: #2563EB;
  transform: translateX(2px);
}

.support-item .icon {
  flex-shrink: 0;
}

.support-item.item-zalo .icon {
  color: #0068FF;
}

.support-item.item-group .icon {
  color: #06b6d4;
}

.support-item.item-phone .icon {
  color: #10b981;
}

.support-item.item-fb .icon {
  color: #1877f2;
}

.support-item.item-faq .icon {
  color: #8b5cf6;
}


/* ==========================================================================
   RESPONSIVE BREAKPOINTS & MOBILE SIDEBAR CONTROLS
   ========================================================================== */
.mobile-menu-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-card);
  background: #FFFFFF;
  color: var(--text-primary);
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.15s ease;
}

.mobile-menu-btn:hover {
  background: #F1F5F9;
  border-color: var(--primary);
}

.sidebar-close-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-xs);
  border: 1px solid var(--border-card);
  background: #F8FAFC;
  color: var(--text-secondary);
  cursor: pointer;
  margin-left: auto;
  transition: all 0.15s ease;
}

.sidebar-close-btn:hover {
  background: #FEE2E2;
  color: var(--danger);
  border-color: var(--danger-border);
}

.sidebar-scrim {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 10400 !important;
  border: none;
  cursor: pointer;
}

/* ==========================================================================
   MODAL DIALOGS & CENTER POPUPS
   ========================================================================== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 16px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.modal-overlay.show,
.modal-overlay.is-open {
  opacity: 1 !important;
  visibility: visible !important;
  display: flex !important;
}

.modal-overlay[hidden] {
  display: none !important;
}

.modal-card {
  background: #FFFFFF;
  border-radius: 14px;
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(0, 0, 0, 0.08);
  max-width: 520px;
  width: 100%;
  padding: 24px;
  position: relative;
  transform: scale(0.92) translateY(12px);
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.modal-overlay.show .modal-card,
.modal-overlay.is-open .modal-card {
  transform: scale(1) translateY(0) !important;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.modal-header h3 {
  margin: 0;
  font-size: 1.15rem;
  color: #0F172A;
  font-weight: 700;
}

.modal-body {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #334155;
  margin-bottom: 20px;
}

.modal-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

/* Specific styling for Dashboard Center Floating Notice Modal */
.dashboard-notice-modal .modal-card {
  border-top: 4px solid #10B981;
}

.dashboard-notice-modal .dashboard-notice-body {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  padding: 14px 16px;
  color: #1E293B;
  font-size: 0.95rem;
  line-height: 1.6;
  max-height: 320px;
  overflow-y: auto;
}

/* Specific styling for QR Login Center Floating Modal */
.qr-login-modal {
  z-index: 1050 !important;
}

.qr-login-modal.is-open {
  display: flex !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

.qr-login-modal.is-open .modal-card {
  transform: scale(1) translateY(0) !important;
}

.loading-spinner {
  width: 38px;
  height: 38px;
  border: 3.5px solid #E2E8F0;
  border-top-color: #10B981;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

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

.status-dot-pulse {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #10B981;
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  animation: pulseGreen 1.5s infinite;
}

@keyframes pulseGreen {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 8px rgba(16, 185, 129, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
  }
}

@media (max-width: 1200px) {
  .stat-grid { grid-template-columns: repeat(3, 1fr); }
  .grid.three { grid-template-columns: repeat(2, 1fr); }
  .admin-stat-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1024px) {
  .mobile-menu-btn { display: inline-flex !important; }
  .sidebar-close-btn { display: inline-flex !important; }

  .sidebar-scrim {
    z-index: 10400 !important;
  }
  
  .sidebar, .admin-sidebar {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    transform: translateX(-100%) !important;
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
    z-index: 10500 !important;
    width: min(295px, 86vw) !important;
    box-shadow: 10px 0 40px rgba(0, 0, 0, 0.55) !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
    padding-top: max(16px, env(safe-area-inset-top, 16px)) !important;
    padding-bottom: max(24px, calc(16px + env(safe-area-inset-bottom, 20px))) !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

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

  .sidebar-open .sidebar-scrim {
    display: block !important;
  }

  body.sidebar-open .mobile-bottom-nav {
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.2s ease;
  }

  .sidebar .brand, .admin-sidebar .admin-brand {
    position: relative !important;
    z-index: 2 !important;
    flex-shrink: 0 !important;
    margin-bottom: 14px !important;
    padding: 4px 6px !important;
    border-bottom: none !important;
  }

  .sidebar .nav, .admin-sidebar .admin-nav {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .sidebar .user-wallet-widget,
  .sidebar .api-status-widget,
  .admin-sidebar .user-chip {
    margin-top: 14px !important;
    flex-shrink: 0 !important;
    position: relative !important;
    z-index: 2 !important;
  }

  .main-panel, .admin-main { margin-left: 0 !important; }
  .saas-auth { grid-template-columns: 1fr; gap: 30px; }
}

@media (max-width: 768px) {
  .grid.two, .grid.three, .grid.four, .toggle-grid { grid-template-columns: 1fr; }
  .stat-grid, .admin-stat-grid { grid-template-columns: repeat(2, 1fr); }
  .vietqr-wrapper { grid-template-columns: 1fr; }
  .onboarding-steps { grid-template-columns: 1fr; }
  .faq-grid { grid-template-columns: 1fr; }
  .account-row { grid-template-columns: 1fr; gap: 8px; }
  .account-cell { display: none; }
  .glass-panel, .sale-hero, .billing-hero, .profile-hero { flex-direction: column; align-items: flex-start; }
  .profile-balance-card, .billing-status { align-items: flex-start; text-align: left; }

  .topbar {
    height: 56px !important;
    padding: 0 12px !important;
    gap: 8px !important;
    overflow: visible !important;
  }
  .topbar-subtitle, .topbar-info p, .topbar p {
    display: none !important;
  }
  .topbar-info h1, .topbar h1 {
    font-size: 0.92rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 180px !important;
    margin: 0 !important;
  }
  .topbar-actions {
    gap: 5px !important;
  }
  .user-chip {
    padding: 3px 6px !important;
    font-size: 0.75rem !important;
    gap: 4px !important;
  }
  .user-name-text {
    max-width: 65px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  .admin-panel-topbtn .btn-text {
    display: none !important;
  }
  .topbar-actions .btn {
    padding: 5px 8px !important;
    font-size: 0.75rem !important;
  }
  .container {
    padding: 14px 12px 60px !important;
  }
}

@media (max-width: 480px) {
  .stat-grid, .admin-stat-grid { grid-template-columns: 1fr; }
  .plan-grid { grid-template-columns: 1fr; }
  .topbar { padding: 0 8px !important; }
  .topbar-info h1 { display: none !important; }
  .user-name-text { max-width: 48px !important; }
  .container { padding: 12px 8px 60px !important; }
}

/* ==========================================================================
   LANDING PAGE STYLES
   ========================================================================== */
/* ==========================================================================
   LANDING PAGE STYLES - VIP PRO MODERN & CLASSIC EDITORIAL LUXURY
   ========================================================================== */
:root {
  --vip-bg-obsidian: #070A10;
  --vip-bg-surface: #0B0F19;
  --vip-bg-card: #0F1626;
  --vip-bg-card-elevated: #141C30;
  --vip-border: rgba(255, 255, 255, 0.08);
  --vip-border-gold: rgba(212, 175, 55, 0.35);
  --vip-border-gold-subtle: rgba(212, 175, 55, 0.15);
  --vip-gold: #D4AF37;
  --vip-gold-glow: rgba(212, 175, 55, 0.28);
  --vip-gold-light: #F6E0A4;
  --vip-gold-dark: #A67C1E;
  --vip-emerald: #10B981;
  --vip-emerald-glow: rgba(16, 185, 129, 0.28);
  --vip-text-primary: #F8FAFC;
  --vip-text-secondary: #94A3B8;
  --vip-text-muted: #64748B;
  --font-serif-prestige: 'Cinzel', 'Playfair Display', Georgia, serif;
}

.landing-body {
  background: var(--vip-bg-obsidian);
  color: var(--vip-text-primary);
  font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, sans-serif;
  margin: 0;
  padding: 0;
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

.landing-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
  z-index: 2;
}

/* Toast */
.landing-toast {
  position: fixed;
  bottom: 28px;
  right: 28px;
  background: #111827;
  color: #F8FAFC;
  border: 1px solid var(--vip-gold);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.7), 0 0 20px var(--vip-gold-glow);
  padding: 14px 22px;
  border-radius: 12px;
  font-size: 0.92rem;
  font-weight: 700;
  z-index: 99999;
  transform: translateY(100px);
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.landing-toast.show {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

/* NAVBAR */
.landing-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(7, 10, 16, 0.88);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--vip-border-gold-subtle);
  transition: all 0.2s ease;
}

.landing-nav-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 74px;
  gap: 20px;
}

.landing-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.brand-crest-mark {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, #182236 0%, #0D1424 100%);
  border: 1px solid var(--vip-border-gold);
  box-shadow: 0 4px 14px rgba(0,0,0,0.5), inset 0 1px 0 rgba(246, 224, 164, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.brand-crest-mark .crest-icon {
  font-size: 0.8rem;
  position: absolute;
  top: -4px;
  right: -4px;
}
.brand-crest-mark .crest-letter {
  font-family: var(--font-serif-prestige);
  font-size: 1.4rem;
  font-weight: 900;
  color: var(--vip-gold-light);
  line-height: 1;
}

.landing-logo-img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  border-radius: 12px;
  border: 1px solid var(--vip-border-gold);
}

.brand-text-block {
  display: flex;
  flex-direction: column;
}

.landing-brand-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.25rem;
  font-weight: 900;
  color: #FFFFFF;
  letter-spacing: -0.3px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.vip-tag {
  font-size: 0.65rem;
  font-weight: 900;
  letter-spacing: 0.5px;
  padding: 2px 7px;
  background: linear-gradient(135deg, var(--vip-gold-dark), var(--vip-gold));
  color: #070A10;
  border-radius: 999px;
}

.landing-brand-sub {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--vip-emerald);
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.landing-nav-links {
  display: flex;
  align-items: center;
  gap: 24px;
}

.landing-nav-links .nav-link {
  color: var(--vip-text-secondary);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
  transition: all 0.2s ease;
  position: relative;
  padding: 4px 0;
}

.landing-nav-links .nav-link:hover {
  color: var(--vip-gold-light);
}

.landing-nav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.nav-hotline-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.25);
  color: #34D399;
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 600;
  transition: all 0.2s ease;
}
.nav-hotline-pill:hover {
  background: rgba(16, 185, 129, 0.16);
  border-color: #34D399;
}
.hotline-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10B981;
  box-shadow: 0 0 8px #10B981;
}

/* BUTTONS */
.btn-luxury-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 18px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--vip-border);
  color: #F8FAFC;
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 700;
  transition: all 0.2s ease;
}
.btn-luxury-ghost:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.25);
  color: #FFFFFF;
}

.btn-vip-gold {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 20px;
  border-radius: 10px;
  background: linear-gradient(135deg, #E5C07B 0%, #D4AF37 50%, #B8860B 100%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #070A10;
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 800;
  box-shadow: 0 4px 16px var(--vip-gold-glow);
  transition: all 0.25s ease;
}
.btn-vip-gold:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(212, 175, 55, 0.45);
  filter: brightness(1.05);
}

.btn-vip-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 32px;
  border-radius: 12px;
  background: linear-gradient(135deg, #10B981 0%, #059669 100%);
  border: 1px solid rgba(167, 243, 208, 0.4);
  color: #FFFFFF;
  text-decoration: none;
  font-size: 1.05rem;
  font-weight: 800;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(16, 185, 129, 0.35), 0 0 15px rgba(16, 185, 129, 0.2);
  transition: all 0.25s ease;
}
.btn-vip-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 40px rgba(16, 185, 129, 0.5), 0 0 20px rgba(16, 185, 129, 0.3);
}
.btn-shine {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(60deg, transparent 40%, rgba(255,255,255,0.3) 50%, transparent 60%);
  transform: rotate(25deg);
  animation: btnShineAnim 4s infinite;
}
@keyframes btnShineAnim {
  0% { transform: translateX(-100%) rotate(25deg); }
  20%, 100% { transform: translateX(100%) rotate(25deg); }
}

.btn-vip-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 28px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--vip-border-gold);
  color: var(--vip-gold-light);
  text-decoration: none;
  font-size: 1rem;
  font-weight: 700;
  transition: all 0.25s ease;
}
.btn-vip-secondary:hover {
  background: rgba(212, 175, 55, 0.12);
  border-color: var(--vip-gold);
  color: #FFFFFF;
  transform: translateY(-2px);
}

/* HERO SECTION */
.landing-hero-vip {
  position: relative;
  padding: 70px 0 80px;
  background: radial-gradient(circle at 40% 15%, rgba(212, 175, 55, 0.08) 0%, transparent 55%),
              radial-gradient(circle at 85% 35%, rgba(16, 185, 129, 0.07) 0%, transparent 50%),
              #070A10;
  overflow: hidden;
}

.landing-ambient-glow {
  position: absolute;
  top: -200px;
  left: 50%;
  transform: translateX(-50%);
  width: 1000px;
  height: 600px;
  background: radial-gradient(ellipse, rgba(16, 185, 129, 0.12) 0%, rgba(212, 175, 55, 0.08) 40%, transparent 70%);
  pointer-events: none;
  z-index: 1;
}

.hero-split-grid {
  display: grid;
  grid-template-columns: 1.12fr 0.88fr;
  gap: 48px;
  align-items: center;
}

.prestige-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  background: rgba(212, 175, 55, 0.08);
  border: 1px solid var(--vip-border-gold);
  border-radius: 999px;
  margin-bottom: 24px;
}
.prestige-eyebrow.centered {
  margin: 0 auto 16px;
}
.prestige-eyebrow .eyebrow-seal {
  font-size: 0.95rem;
}
.prestige-eyebrow .eyebrow-text {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--vip-gold-light);
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.hero-title-vip {
  font-size: 3.1rem;
  font-weight: 900;
  line-height: 1.18;
  color: #FFFFFF;
  margin: 0 0 22px;
  letter-spacing: -1px;
}

.gold-gradient-text {
  background: linear-gradient(135deg, #FDE68A 0%, #D4AF37 50%, #F59E0B 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline;
}

.d-mobile-block {
  display: none;
}

.hero-subtitle-vip {
  font-size: 1.12rem;
  color: var(--vip-text-secondary);
  line-height: 1.75;
  margin: 0 0 36px;
  max-width: 600px;
}

.hero-cta-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 26px;
  flex-wrap: wrap;
}

.hero-reassurance-row {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 36px;
  flex-wrap: wrap;
}

.reassurance-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: #CBD5E1;
}
.reassurance-check {
  color: #10B981;
  font-weight: 900;
}

.hero-social-proof {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--vip-border);
  max-width: fit-content;
}

.avatar-stack {
  display: flex;
  align-items: center;
}
.avatar-circle {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid #070A10;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 800;
  color: #FFFFFF;
  margin-left: -8px;
}
.avatar-circle:first-child {
  margin-left: 0;
}
.avatar-more {
  background: #334155;
  font-size: 0.68rem;
}

.proof-text .proof-stars {
  color: #F59E0B;
  font-size: 0.95rem;
  letter-spacing: 1px;
}
.proof-text .proof-score {
  color: #FFFFFF;
  font-weight: 800;
  font-size: 0.85rem;
}
.proof-text .proof-sub {
  font-size: 0.78rem;
  color: var(--vip-text-muted);
}
.proof-text .proof-sub b {
  color: var(--vip-text-secondary);
}

/* EXECUTIVE CLOUD VPS COMMAND CENTER MOCKUP */
.hero-right-visual {
  position: relative;
}

.command-center-frame {
  background: #0B101D;
  border: 1px solid var(--vip-border-gold);
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7), 0 0 35px rgba(16, 185, 129, 0.08);
  overflow: hidden;
  position: relative;
}

.terminal-glass-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  background: #070B14;
  border-bottom: 1px solid var(--vip-border);
}

.terminal-dots {
  display: flex;
  gap: 6px;
}
.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.dot-red { background: #EF4444; }
.dot-yellow { background: #F59E0B; }
.dot-green { background: #10B981; }

.terminal-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  font-weight: 600;
  color: #94A3B8;
  display: flex;
  align-items: center;
  gap: 6px;
}
.live-pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10B981;
  box-shadow: 0 0 8px #10B981;
  animation: pulseLive 2s infinite;
}
@keyframes pulseLive {
  0% { opacity: 0.4; transform: scale(0.9); }
  50% { opacity: 1; transform: scale(1.15); }
  100% { opacity: 0.4; transform: scale(0.9); }
}
.status-running {
  color: #10B981;
  font-weight: 700;
}

.terminal-latency {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  color: var(--vip-gold-light);
}

.command-stat-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid var(--vip-border);
}

.command-stat-box {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.command-stat-box small {
  font-size: 0.68rem;
  color: var(--vip-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.command-stat-box strong {
  font-size: 0.98rem;
  font-weight: 800;
  color: #FFFFFF;
}
.text-gold { color: #F59E0B !important; }
.text-emerald { color: #10B981 !important; }
.text-safe { color: #38BDF8 !important; }

.terminal-accounts-section {
  padding: 14px 16px;
  border-bottom: 1px solid var(--vip-border);
}

.terminal-sec-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--vip-gold-light);
  letter-spacing: 0.5px;
  margin-bottom: 10px;
}

.terminal-acc-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.terminal-acc-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  gap: 10px;
}
.acc-avatar {
  font-size: 1.3rem;
}
.acc-info {
  flex: 1;
  min-width: 0;
}
.acc-name {
  font-size: 0.85rem;
  font-weight: 700;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  gap: 6px;
}
.acc-badge {
  font-size: 0.65rem;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.1);
  color: #94A3B8;
  font-weight: 600;
}
.acc-task {
  font-size: 0.72rem;
  color: var(--vip-text-muted);
}
.acc-task b {
  color: #CBD5E1;
}

.acc-status-tag {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.tag-running {
  background: rgba(245, 158, 11, 0.15);
  color: #FBBF24;
  border: 1px solid rgba(245, 158, 11, 0.3);
}
.tag-success {
  background: rgba(16, 185, 129, 0.15);
  color: #34D399;
  border: 1px solid rgba(16, 185, 129, 0.3);
}
.tag-ai {
  background: rgba(139, 92, 246, 0.15);
  color: #A78BFA;
  border: 1px solid rgba(139, 92, 246, 0.3);
}

.terminal-log-feed {
  padding: 12px 16px;
  background: #060911;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.log-line {
  color: #94A3B8;
  line-height: 1.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.log-time { color: #64748B; }
.log-node { color: #38BDF8; font-weight: 600; }
.log-ok { color: #10B981; font-weight: 700; }
.log-info { color: #38BDF8; }
.log-gold { color: #F59E0B; font-weight: 700; }

/* PRESTIGE METRICS & TRUST TICKER STRIP */
.landing-prestige-strip {
  padding: 40px 0;
  background: linear-gradient(180deg, rgba(13, 20, 36, 0.6) 0%, rgba(7, 10, 16, 0.9) 100%);
  border-top: 1px solid var(--vip-border-gold-subtle);
  border-bottom: 1px solid var(--vip-border-gold-subtle);
}

.prestige-strip-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.prestige-item {
  padding: 12px 16px;
  border-left: 2px solid var(--vip-gold);
}
.prestige-num {
  font-family: var(--font-serif-prestige);
  font-size: 2.2rem;
  font-weight: 900;
  color: var(--vip-gold-light);
  line-height: 1.1;
  margin-bottom: 6px;
}
.prestige-label {
  font-size: 1rem;
  font-weight: 800;
  color: #FFFFFF;
  margin-bottom: 6px;
}
.prestige-desc {
  font-size: 0.82rem;
  color: var(--vip-text-muted);
  margin: 0;
  line-height: 1.5;
}

/* SECTION HEADINGS */
.landing-section-vip {
  padding: 85px 0;
  position: relative;
}

.section-heading-vip {
  max-width: 800px;
  margin: 0 auto 56px;
}
.section-heading-vip.text-center {
  text-align: center;
}
.section-title-vip {
  font-size: 2.4rem;
  font-weight: 900;
  color: #FFFFFF;
  margin: 12px 0 16px;
  letter-spacing: -0.5px;
  line-height: 1.25;
}
.section-desc-vip {
  font-size: 1.05rem;
  color: var(--vip-text-secondary);
  line-height: 1.7;
  margin: 0;
}

/* FEATURE MATRIX */
.feature-matrix-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.feature-vip-card {
  background: var(--vip-bg-card);
  border: 1px solid var(--vip-border);
  border-radius: 16px;
  padding: 32px 28px;
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
}
.feature-vip-card:hover {
  transform: translateY(-6px);
  border-color: var(--vip-border-gold);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.5), 0 0 25px rgba(212, 175, 55, 0.1);
}

.feature-icon-wrapper {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  margin-bottom: 20px;
}
.icon-emerald { background: rgba(16, 185, 129, 0.12); border: 1px solid rgba(16, 185, 129, 0.3); }
.icon-gold { background: rgba(212, 175, 55, 0.12); border: 1px solid rgba(212, 175, 55, 0.3); }
.icon-blue { background: rgba(59, 130, 246, 0.12); border: 1px solid rgba(59, 130, 246, 0.3); }
.icon-purple { background: rgba(139, 92, 246, 0.12); border: 1px solid rgba(139, 92, 246, 0.3); }
.icon-amber { background: rgba(245, 158, 11, 0.12); border: 1px solid rgba(245, 158, 11, 0.3); }
.icon-rose { background: rgba(244, 63, 94, 0.12); border: 1px solid rgba(244, 63, 94, 0.3); }

.feature-badge {
  font-size: 0.68rem;
  font-weight: 800;
  color: var(--vip-gold);
  letter-spacing: 0.6px;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.feature-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: #FFFFFF;
  margin: 0 0 12px;
  line-height: 1.35;
}

.feature-text {
  font-size: 0.92rem;
  color: var(--vip-text-secondary);
  line-height: 1.65;
  margin: 0 0 20px;
  flex: 1;
}

.feature-bullet-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding-top: 16px;
}
.feature-bullet-list li {
  font-size: 0.84rem;
  color: #CBD5E1;
  line-height: 1.45;
}

/* ROI COMPARISON */
.comparison-section {
  background: #090E1A;
  border-top: 1px solid var(--vip-border);
  border-bottom: 1px solid var(--vip-border);
}

.comparison-table-wrap {
  background: var(--vip-bg-card);
  border: 1px solid var(--vip-border-gold);
  border-radius: 18px;
  overflow-x: auto;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
}

.comparison-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 720px;
}

.comparison-table th {
  padding: 20px 24px;
  text-align: left;
  font-size: 1rem;
  font-weight: 800;
  border-bottom: 1px solid var(--vip-border-gold);
}
.col-criteria { width: 25%; background: rgba(0, 0, 0, 0.2); color: #94A3B8; }
.col-manual { width: 35%; background: rgba(239, 68, 68, 0.08); color: #FCA5A5; }
.col-botzalo { width: 40%; background: rgba(212, 175, 55, 0.12); color: var(--vip-gold-light); font-size: 1.05rem; }

.comparison-table td {
  padding: 18px 24px;
  font-size: 0.92rem;
  line-height: 1.6;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.td-criteria { background: rgba(0, 0, 0, 0.1); color: #E2E8F0; }
.td-manual { background: rgba(239, 68, 68, 0.02); color: #94A3B8; }
.td-botzalo { background: rgba(212, 175, 55, 0.04); color: #FFFFFF; font-weight: 600; }
.highlight-check {
  color: #10B981;
  font-weight: 900;
  font-size: 1.1rem;
  margin-right: 4px;
}

/* PRICING SECTION */
.pricing-section {
  background: radial-gradient(circle at 50% 20%, rgba(212, 175, 55, 0.06) 0%, transparent 60%), #070A10;
}

.plan-grid-vip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  align-items: stretch;
  margin-bottom: 50px;
}

.plan-card-vip {
  background: var(--vip-bg-card);
  border: 1px solid var(--vip-border);
  border-radius: 18px;
  padding: 36px 30px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: all 0.3s ease;
}
.plan-card-vip:hover {
  transform: translateY(-4px);
  border-color: rgba(212, 175, 55, 0.4);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.6);
}

.plan-highlight-royal {
  background: linear-gradient(180deg, #121A2C 0%, #0F1626 100%);
  border: 1.5px solid var(--vip-gold);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.7), 0 0 35px var(--vip-gold-glow);
  transform: scale(1.03);
  z-index: 5;
}
.plan-highlight-royal:hover {
  transform: scale(1.03) translateY(-4px);
}

.royal-ribbon {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #F59E0B, #D4AF37);
  color: #070A10;
  padding: 4px 18px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 12px rgba(212, 175, 55, 0.4);
  white-space: nowrap;
}

.plan-badge-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.3);
  color: #34D399;
  font-size: 0.75rem;
  font-weight: 700;
  margin-bottom: 12px;
}

.plan-name-vip {
  font-size: 1.4rem;
  font-weight: 800;
  color: #FFFFFF;
  margin: 0 0 6px;
}

.plan-desc-vip {
  font-size: 0.85rem;
  color: var(--vip-text-muted);
  margin: 0 0 20px;
  min-height: 40px;
}

.plan-price-block {
  margin-bottom: 24px;
}
.price-main {
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.price-main .currency {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--vip-gold-light);
}
.price-main .amount {
  font-family: var(--font-serif-prestige);
  font-size: 2.6rem;
  font-weight: 900;
  color: #FFFFFF;
  line-height: 1;
}
.price-sub {
  font-size: 0.82rem;
  color: var(--vip-text-secondary);
  margin-top: 4px;
}
.price-sub b {
  color: #34D399;
}

.plan-divider {
  height: 1px;
  background: var(--vip-border);
  margin-bottom: 24px;
}

.plan-perks-list {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}
.plan-perks-list li {
  font-size: 0.9rem;
  color: #CBD5E1;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  line-height: 1.45;
}
.perk-check {
  color: #10B981;
  font-weight: 900;
  flex-shrink: 0;
}

.plan-action-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.btn-plan-action {
  width: 100%;
  padding: 14px;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 800;
  text-align: center;
  text-decoration: none;
  transition: all 0.25s ease;
  box-sizing: border-box;
}
.btn-royal-solid {
  background: linear-gradient(135deg, #F59E0B 0%, #D4AF37 50%, #B8860B 100%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #070A10;
  box-shadow: 0 8px 24px var(--vip-gold-glow);
}
.btn-royal-solid:hover {
  filter: brightness(1.1);
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(212, 175, 55, 0.5);
}
.btn-royal-outline {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--vip-border-gold);
  color: var(--vip-gold-light);
}
.btn-royal-outline:hover {
  background: rgba(212, 175, 55, 0.15);
  color: #FFFFFF;
  border-color: var(--vip-gold);
}
.plan-guarantee-note {
  text-align: center;
  font-size: 0.75rem;
  color: var(--vip-text-muted);
}

/* FREE TRIAL CALLOUT */
.free-trial-callout {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(212, 175, 55, 0.08) 100%);
  border: 1.5px dashed var(--vip-gold);
  border-radius: 18px;
  padding: 32px 40px;
}
.trial-callout-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}
.trial-badge-wrap {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: rgba(212, 175, 55, 0.15);
  border: 1px solid var(--vip-border-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  flex-shrink: 0;
}
.trial-info-text {
  flex: 1;
  min-width: 280px;
}
.trial-title {
  font-size: 1.3rem;
  font-weight: 800;
  color: #FFFFFF;
  margin: 0 0 6px;
}
.trial-desc {
  font-size: 0.92rem;
  color: var(--vip-text-secondary);
  margin: 0;
  line-height: 1.6;
}
.btn-trial-glow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 12px;
  background: linear-gradient(135deg, #10B981, #059669);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #FFFFFF;
  text-decoration: none;
  font-weight: 800;
  font-size: 0.95rem;
  box-shadow: 0 8px 24px rgba(16, 185, 129, 0.4);
  white-space: nowrap;
  transition: all 0.25s ease;
}
.btn-trial-glow:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(16, 185, 129, 0.55);
}

/* MARKETING TEMPLATES */
.templates-section {
  background: #090E1A;
  border-top: 1px solid var(--vip-border);
  border-bottom: 1px solid var(--vip-border);
}

.template-cards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.tpl-card-vip {
  background: var(--vip-bg-card);
  border: 1px solid var(--vip-border);
  border-radius: 16px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  transition: all 0.25s ease;
}
.tpl-card-vip:hover {
  border-color: var(--vip-border-gold);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4);
}

.tpl-category {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 6px;
  margin-bottom: 8px;
}
.cat-bds { background: rgba(59, 130, 246, 0.15); color: #60A5FA; }
.cat-finance { background: rgba(16, 185, 129, 0.15); color: #34D399; }
.cat-retail { background: rgba(245, 158, 11, 0.15); color: #FBBF24; }
.cat-recruit { background: rgba(139, 92, 246, 0.15); color: #C084FC; }

.tpl-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: #FFFFFF;
  margin: 0;
}

.tpl-body-preview {
  background: #060911;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  padding: 14px;
}
.tpl-pre-code {
  margin: 0;
  white-space: pre-wrap;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8rem;
  color: #CBD5E1;
  line-height: 1.6;
  max-height: 130px;
  overflow-y: auto;
}

.tpl-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.btn-copy-tpl {
  background: rgba(212, 175, 55, 0.1);
  border: 1px solid var(--vip-border-gold);
  color: var(--vip-gold-light);
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}
.btn-copy-tpl:hover {
  background: rgba(212, 175, 55, 0.22);
  color: #FFFFFF;
}
.btn-use-tpl {
  color: var(--vip-text-secondary);
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
}
.btn-use-tpl:hover {
  color: #34D399;
}

/* AFFILIATE 15% */
.affiliate-section {
  background: #070A10;
}

.affiliate-luxury-box {
  background: linear-gradient(135deg, #0F172A 0%, #0B1120 100%);
  border: 1.5px solid var(--vip-border-gold);
  border-radius: 20px;
  padding: 44px;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.6), 0 0 30px var(--vip-gold-glow);
  position: relative;
  overflow: hidden;
}

.affiliate-badge-top {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--vip-gold-light);
  letter-spacing: 0.8px;
  margin-bottom: 20px;
}

.affiliate-split {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 40px;
  align-items: center;
}

.affiliate-title {
  font-size: 2.1rem;
  font-weight: 900;
  color: #FFFFFF;
  margin: 0 0 14px;
  line-height: 1.25;
}

.affiliate-desc {
  font-size: 0.95rem;
  color: var(--vip-text-secondary);
  line-height: 1.7;
  margin: 0 0 28px;
}

.affiliate-steps {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.step-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.step-badge {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(212, 175, 55, 0.15);
  border: 1px solid var(--vip-gold);
  color: var(--vip-gold-light);
  font-weight: 900;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.step-content b {
  display: block;
  font-size: 0.95rem;
  color: #FFFFFF;
  margin-bottom: 2px;
}
.step-content span {
  font-size: 0.82rem;
  color: var(--vip-text-muted);
}

.affiliate-stat-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--vip-border-gold);
  border-radius: 16px;
  padding: 32px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.stat-icon {
  font-size: 2.4rem;
  margin-bottom: 8px;
}
.stat-rate {
  font-family: var(--font-serif-prestige);
  font-size: 3.5rem;
  font-weight: 900;
  color: var(--vip-gold);
  line-height: 1;
  margin-bottom: 4px;
}
.stat-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: #FFFFFF;
  margin-bottom: 6px;
}
.stat-sub {
  font-size: 0.82rem;
  color: #34D399;
  margin: 0 0 20px;
}
.btn-vip-gold.wide {
  width: 100%;
  padding: 13px;
  box-sizing: border-box;
}
.stat-hint {
  font-size: 0.72rem;
  color: var(--vip-text-muted);
  margin-top: 10px;
}

/* FAQ ACCORDION */
.faq-section {
  background: #090E1A;
}

.faq-accordion-container {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.faq-vip-item {
  background: var(--vip-bg-card);
  border: 1px solid var(--vip-border);
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.2s ease;
}
.faq-vip-item[open] {
  border-color: var(--vip-border-gold);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.faq-vip-question {
  padding: 18px 22px;
  font-size: 1rem;
  font-weight: 700;
  color: #FFFFFF;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 14px;
  list-style: none;
  user-select: none;
}
.faq-vip-question::-webkit-details-marker {
  display: none;
}

.faq-q-icon {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(212, 175, 55, 0.12);
  border: 1px solid var(--vip-border-gold);
  color: var(--vip-gold-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 0.85rem;
  flex-shrink: 0;
}

.faq-q-title {
  flex: 1;
}

.faq-arrow {
  font-size: 0.75rem;
  color: var(--vip-gold);
  transition: transform 0.25s ease;
}
.faq-vip-item[open] .faq-arrow {
  transform: rotate(180deg);
}

.faq-vip-answer {
  padding: 0 22px 20px 62px;
}
.faq-vip-answer p {
  margin: 0;
  font-size: 0.92rem;
  color: var(--vip-text-secondary);
  line-height: 1.7;
}
.faq-vip-answer b {
  color: #FFFFFF;
}

/* FINAL CTA BANNER */
.landing-final-cta {
  padding: 90px 0;
  position: relative;
  background: #070A10;
  overflow: hidden;
}

.final-cta-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 800px;
  height: 400px;
  background: radial-gradient(ellipse, rgba(16, 185, 129, 0.15) 0%, rgba(212, 175, 55, 0.1) 40%, transparent 70%);
  pointer-events: none;
}

.final-cta-card {
  background: linear-gradient(135deg, #10192A 0%, #0B111F 100%);
  border: 1.5px solid var(--vip-gold);
  border-radius: 24px;
  padding: 60px 40px;
  text-align: center;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.8), 0 0 45px var(--vip-gold-glow);
  position: relative;
  max-width: 960px;
  margin: 0 auto;
}

.final-cta-seal {
  font-size: 2.4rem;
  margin-bottom: 12px;
}

.final-cta-title {
  font-size: 2.3rem;
  font-weight: 900;
  color: #FFFFFF;
  margin: 0 0 16px;
  letter-spacing: -0.5px;
  line-height: 1.25;
}

.final-cta-subtitle {
  font-size: 1.08rem;
  color: var(--vip-text-secondary);
  line-height: 1.7;
  max-width: 680px;
  margin: 0 auto 36px;
}

.btn-vip-primary.xl {
  padding: 18px 40px;
  font-size: 1.15rem;
}

.final-reassurance {
  margin-top: 24px;
  font-size: 0.85rem;
  color: var(--vip-text-muted);
}
.final-reassurance span {
  color: #A7F3D0;
}

/* FOOTER */
.landing-footer-vip {
  background: #04070D;
  border-top: 1px solid var(--vip-border-gold-subtle);
  padding: 64px 0 0;
  color: var(--vip-text-secondary);
}

.footer-top-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.4fr;
  gap: 40px;
  padding-bottom: 48px;
}

.footer-mission-text {
  font-size: 0.85rem;
  line-height: 1.7;
  color: var(--vip-text-muted);
  margin: 16px 0 20px;
}

.footer-badges-strip {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.badge-shield {
  font-size: 0.65rem;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #94A3B8;
  letter-spacing: 0.5px;
}

.footer-col-title {
  font-size: 0.95rem;
  font-weight: 800;
  color: #FFFFFF;
  margin: 0 0 18px;
  letter-spacing: 0.3px;
}

.footer-link-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer-link-list li a {
  color: var(--vip-text-muted);
  text-decoration: none;
  font-size: 0.86rem;
  transition: all 0.2s ease;
}
.footer-link-list li a:hover {
  color: var(--vip-gold-light);
  padding-left: 4px;
}

.footer-contact-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 0.86rem;
}
.footer-contact-list li {
  color: var(--vip-text-muted);
}
.contact-highlight-link {
  display: inline-block;
  color: #34D399 !important;
  text-decoration: none;
  font-weight: 700;
  transition: all 0.2s ease;
}
.contact-highlight-link:hover {
  color: #6EE7B7 !important;
  padding-left: 4px;
}

.footer-bottom-bar {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding: 22px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.bottom-copy {
  font-size: 0.8rem;
  color: var(--vip-text-muted);
}
.bottom-trust-tag {
  font-size: 0.8rem;
  color: var(--vip-gold-light);
  font-weight: 600;
}

/* RESPONSIVE BREAKPOINTS */
@media (max-width: 1024px) {
  .hero-split-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .hero-title-vip {
    font-size: 2.6rem;
  }
  .prestige-strip-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .feature-matrix-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .plan-grid-vip {
    grid-template-columns: 1fr;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
  }
  .plan-highlight-royal {
    transform: none;
  }
  .plan-highlight-royal:hover {
    transform: translateY(-4px);
  }
  .template-cards-grid {
    grid-template-columns: 1fr;
  }
  .affiliate-split {
    grid-template-columns: 1fr;
  }
  .footer-top-grid {
    grid-template-columns: 1fr 1fr;
    gap: 30px;
  }
}

@media (max-width: 768px) {
  .landing-nav-links {
    display: none;
  }
  .d-none-mobile {
    display: none !important;
  }
  .hero-title-vip {
    font-size: 2.1rem;
  }
  .hero-subtitle-vip {
    font-size: 1rem;
  }
  .hero-cta-bar {
    flex-direction: column;
    width: 100%;
  }
  .btn-vip-primary, .btn-vip-secondary {
    width: 100%;
    box-sizing: border-box;
  }
  .command-stat-strip {
    grid-template-columns: repeat(2, 1fr);
  }
  .prestige-strip-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .feature-matrix-grid {
    grid-template-columns: 1fr;
  }
  .affiliate-luxury-box {
    padding: 24px;
  }
  .final-cta-card {
    padding: 40px 20px;
  }
  .final-cta-title {
    font-size: 1.7rem;
  }
  .footer-top-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

@media (max-width: 640px) {
  .d-mobile-block {
    display: block;
  }
  .landing-container {
    padding: 0 14px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .landing-header {
    height: 62px;
    width: 100%;
    overflow: hidden;
  }
  .landing-nav-wrap {
    height: 62px;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
  }
  .brand-crest-mark {
    width: 34px;
    height: 34px;
    border-radius: 9px;
  }
  .brand-crest-mark .crest-letter {
    font-size: 1.1rem;
  }
  .landing-brand-title {
    font-size: 1.05rem;
  }
  .vip-tag {
    font-size: 0.58rem;
    padding: 1px 5px;
  }
  .landing-brand-sub {
    display: none;
  }
  .landing-nav-actions {
    gap: 6px;
  }
  .btn-luxury-ghost.sm {
    padding: 6px 10px;
    font-size: 0.78rem;
  }
  .btn-vip-gold.sm {
    padding: 6px 10px;
    font-size: 0.78rem;
  }
  .prestige-eyebrow {
    white-space: normal;
    text-align: center;
    padding: 6px 12px;
    max-width: 100%;
    box-sizing: border-box;
    border-radius: 12px;
  }
  .prestige-eyebrow .eyebrow-text {
    font-size: 0.68rem;
    letter-spacing: 0.3px;
    line-height: 1.35;
  }
  .hero-title-vip {
    font-size: 1.75rem;
    line-height: 1.25;
    letter-spacing: -0.5px;
  }
  .hero-subtitle-vip {
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 24px;
  }
  .btn-vip-primary.lg {
    padding: 13px 14px;
    font-size: 0.92rem;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    justify-content: center;
  }
  .btn-vip-primary.lg .btn-arrow {
    display: none;
  }
  .btn-vip-secondary.lg {
    padding: 12px 14px;
    font-size: 0.88rem;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    justify-content: center;
  }
  .hero-reassurance-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 24px;
  }
  .hero-social-proof {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
  }
  .command-center-frame {
    border-radius: 14px;
  }
  .terminal-glass-header {
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 12px;
  }
  .terminal-title {
    font-size: 0.68rem;
  }
  .terminal-latency {
    font-size: 0.65rem;
  }
  .command-stat-strip {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    padding: 10px;
  }
  .command-stat-box {
    padding: 8px 10px;
  }
  .command-stat-box strong {
    font-size: 0.88rem;
  }
  .terminal-sec-title {
    font-size: 0.62rem;
  }
  .terminal-acc-card {
    padding: 8px 10px;
    flex-wrap: wrap;
    gap: 6px;
  }
  .acc-name {
    font-size: 0.8rem;
  }
  .acc-task {
    font-size: 0.68rem;
  }
  .log-line {
    font-size: 0.65rem;
  }
  .section-title-vip {
    font-size: 1.65rem;
    line-height: 1.25;
  }
  .section-desc-vip {
    font-size: 0.92rem;
  }
  .feature-vip-card {
    padding: 24px 20px;
  }
  .plan-card-vip {
    padding: 28px 20px;
  }
  .price-main .amount {
    font-size: 2.2rem;
  }
  .free-trial-callout {
    padding: 24px 18px;
  }
  .affiliate-luxury-box {
    padding: 24px 16px;
  }
  .affiliate-title {
    font-size: 1.6rem;
  }
  .final-cta-card {
    padding: 36px 18px;
  }
  .final-cta-title {
    font-size: 1.55rem;
  }
  .btn-vip-primary.xl {
    padding: 15px 20px;
    font-size: 0.95rem;
    width: 100%;
    box-sizing: border-box;
  }
  .btn-vip-primary.xl .btn-arrow {
    display: none;
  }
  .prestige-num {
    font-size: 1.8rem;
  }
  .trial-callout-inner {
    flex-direction: column;
    align-items: flex-start;
  }
  .btn-trial-glow {
    width: 100%;
    box-sizing: border-box;
    justify-content: center;
  }
}


/* ==========================================================================
   INPUT WITH ACTION & IMAGE PICKER / LOCAL UPLOADER
   ========================================================================== */
.input-with-action {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}
.input-with-action input {
  flex: 1;
}
.input-with-action button {
  white-space: nowrap;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-color: rgba(56, 189, 248, 0.35);
  color: #38BDF8;
}
.input-with-action button:hover {
  background: rgba(56, 189, 248, 0.15);
  border-color: #38BDF8;
}

/* Upload Dropzone */
.upload-dropzone {
  border: 2px dashed rgba(56, 189, 248, 0.35);
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.5);
  padding: 24px 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}
.upload-dropzone:hover,
.upload-dropzone.dragover {
  border-color: #38BDF8;
  background: rgba(56, 189, 248, 0.08);
  transform: translateY(-1px);
}
.dropzone-icon-wrap {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(56, 189, 248, 0.12);
  color: #38BDF8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}
.upload-progress-wrap {
  margin-top: 14px;
}
.progress-bar-track {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 99px;
  overflow: hidden;
}
.progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #38BDF8, #10B981);
  transition: width 0.3s ease;
}

/* Media Gallery Grid */
.media-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  max-height: 280px;
  overflow-y: auto;
  padding-right: 4px;
}
.media-item-card {
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: all 0.2s ease;
}
.media-item-card:hover {
  border-color: rgba(56, 189, 248, 0.4);
  background: rgba(15, 23, 42, 0.95);
  transform: translateY(-2px);
}
.media-thumb-wrap {
  width: 100%;
  height: 100px;
  border-radius: 6px;
  overflow: hidden;
  background: #020617;
  display: flex;
  align-items: center;
  justify-content: center;
}
.media-thumb-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}
.media-item-card:hover .media-thumb-wrap img {
  transform: scale(1.05);
}
.media-info-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.media-filename {
  font-size: 0.78rem;
  font-weight: 600;
  color: #F1F5F9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.media-meta {
  font-size: 0.7rem;
  color: #94A3B8;
}
.media-actions-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
}
.media-actions-wrap .btn {
  flex: 1;
  padding: 3px 6px;
  font-size: 0.72rem;
}

/* =========================================================
   MODAL POPUP & OVERLAY STYLES
   ========================================================= */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(2, 6, 23, 0.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.modal-overlay.show,
.modal-overlay.is-open,
.modal-overlay:not([hidden]):not([style*="display: none"]):not([style*="display:none"]) {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  display: flex !important;
}

.modal-overlay[hidden],
.modal-overlay[style*="display: none"],
.modal-overlay[style*="display:none"] {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.modal-card {
  background: #FFFFFF;
  border: 1px solid #CBD5E1;
  border-radius: 16px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(0, 0, 0, 0.05);
  max-width: 760px;
  width: 96%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  padding: 24px;
  animation: modalPopIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  color: #0F172A;
  overflow: hidden;
  box-sizing: border-box;
}

html[data-theme="dark"] .modal-card,
body.dark-mode .modal-card {
  background: #0f172a !important;
  background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
  color: #f8fafc !important;
}

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

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #E2E8F0;
  padding-bottom: 14px;
  flex-shrink: 0;
}

html[data-theme="dark"] .modal-header,
body.dark-mode .modal-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.modal-header h2,
.modal-header h3 {
  margin: 0;
  font-size: 1.15rem;
  color: #0F172A;
  font-weight: 700;
}

html[data-theme="dark"] .modal-header h2,
html[data-theme="dark"] .modal-header h3,
body.dark-mode .modal-header h2,
body.dark-mode .modal-header h3 {
  color: #F8FAFC !important;
}

.modal-body {
  padding: 16px 0;
  overflow-y: auto;
  flex: 1;
  color: #334155;
  font-size: 0.95rem;
  line-height: 1.6;
}

html[data-theme="dark"] .modal-body,
body.dark-mode .modal-body {
  color: #CBD5E1 !important;
}

.modal-actions {
  padding-top: 14px;
  border-top: 1px solid #E2E8F0;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-shrink: 0;
}

html[data-theme="dark"] .modal-actions,
body.dark-mode .modal-actions {
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* Toast styling */
.toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 100000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

.toast {
  pointer-events: auto;
  min-width: 280px;
  max-width: 420px;
  padding: 12px 18px;
  border-radius: 10px;
  background: #1e293b;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #f8fafc;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5);
  font-size: 0.88rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 10px;
  animation: toastSlideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.toast.success {
  border-color: rgba(34, 197, 94, 0.5);
  background: linear-gradient(135deg, #14532d 0%, #0f172a 100%);
}

.toast.info {
  border-color: rgba(56, 189, 248, 0.5);
  background: linear-gradient(135deg, #0369a1 0%, #0f172a 100%);
}

.toast.danger {
  border-color: rgba(239, 68, 68, 0.5);
  background: linear-gradient(135deg, #7f1d1d 0%, #0f172a 100%);
}

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

/* =========================================================
   COMMERCIAL SaaS FEATURES 1, 2, 4 STYLES
   ========================================================= */
.vip-subscription-banner {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.vip-subscription-banner:hover {
  box-shadow: 0 12px 30px rgba(56, 189, 248, 0.15);
}

.content-tpl-card:hover {
  background: rgba(30, 41, 59, 0.8) !important;
  border-color: rgba(129, 140, 248, 0.4) !important;
  transform: translateY(-2px);
}

.group-pool-pill {
  transition: all 0.2s ease;
}

.group-pool-pill:hover {
  border-color: rgba(56, 189, 248, 0.6) !important;
  color: #38bdf8 !important;
}

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

.btn-quick-topup:hover {
  border-color: rgba(56, 189, 248, 0.6);
  color: #38bdf8;
}

/* SaaS Plan Metric Cards */
.metric-card {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  padding: 18px 20px !important;
  border-radius: 12px !important;
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05) !important;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
  position: relative !important;
  overflow: hidden !important;
}

html[data-theme="dark"] .metric-card,
body.dark-mode .metric-card {
  background: linear-gradient(145deg, rgba(30, 41, 59, 0.7) 0%, rgba(15, 23, 42, 0.85) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25) !important;
}

.metric-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #38bdf8, #818cf8, #c084fc);
  opacity: 0.8;
}

.metric-card:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(56, 189, 248, 0.45) !important;
  box-shadow: 0 8px 25px rgba(56, 189, 248, 0.15) !important;
}

.metric-card .metric-header {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 12px !important;
}

.metric-card .metric-icon {
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.1rem !important;
  border: 1px solid transparent !important;
  flex-shrink: 0 !important;
}

.metric-card .metric-label {
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  color: #475569 !important;
}

html[data-theme="dark"] .metric-card .metric-label,
body.dark-mode .metric-card .metric-label {
  color: #94a3b8 !important;
}

.metric-card .metric-value {
  font-size: 1.55rem !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  margin-bottom: 12px !important;
  letter-spacing: -0.02em !important;
  color: #0F172A !important;
}

html[data-theme="dark"] .metric-card .metric-value,
body.dark-mode .metric-card .metric-value {
  color: #F8FAFC !important;
}

.metric-card .metric-footer {
  font-size: 0.78rem !important;
  color: #475569 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

html[data-theme="dark"] .metric-card .metric-footer,
body.dark-mode .metric-card .metric-footer {
  color: #64748b !important;
}

@media (max-width: 640px) {
  .vietqr-topup-grid {
    grid-template-columns: 1fr !important;
    text-align: center;
  }
  .vip-countdown-box {
    width: 100%;
    justify-content: center;
  }
}

/* Realtime Live Pulse & Spin Animations */
@keyframes livePulseGlow {
  0% {
    transform: scale(0.92);
    opacity: 0.7;
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  }
  70% {
    transform: scale(1.15);
    opacity: 1;
    box-shadow: 0 0 0 7px rgba(16, 185, 129, 0);
  }
  100% {
    transform: scale(0.92);
    opacity: 0.7;
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
  }
}

.live-pulse-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  background: #10B981;
  border-radius: 50%;
  margin-right: 5px;
  flex-shrink: 0;
  animation: livePulseGlow 1.8s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

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

.loading-spin svg, .btn.loading-spin svg {
  animation: spinIcon 0.75s linear infinite;
}

/* ==========================================================================
   DARK MODE & NIGHT MODE THEME SYSTEM + NÚT GỘP CHUYỂN GIAO DIỆN
   ========================================================================== */

/* Dark Mode Variables */
html[data-theme="dark"],
:root[data-theme="dark"],
body.dark-mode {
  color-scheme: dark;

  /* Backgrounds */
  --bg-app: #0B0F19;
  --bg-surface: #111827;
  --bg-card: #111827;
  --bg-surface-hover: #1F2937;
  --bg-surface-elevated: #151F32;
  --bg-input: #0F172A;
  --bg-sidebar: #0C101C;
  --bg-topbar: #0C101C;

  /* Borders & Dividers */
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-card: rgba(255, 255, 255, 0.12);
  --border-hover: rgba(255, 255, 255, 0.22);
  --border-focus: #38BDF8;

  /* Brand Accents */
  --primary: #3B82F6;
  --primary-hover: #2563EB;
  --primary-light: rgba(59, 130, 246, 0.15);
  --cyan: #38BDF8;
  --accent-purple: #A855F7;

  /* Status Colors */
  --success: #22C55E;
  --success-bg: rgba(34, 197, 94, 0.14);
  --success-border: rgba(34, 197, 94, 0.32);
  --success-text: #4ADE80;

  --danger: #EF4444;
  --danger-bg: rgba(239, 68, 68, 0.14);
  --danger-border: rgba(239, 68, 68, 0.32);
  --danger-text: #F87171;

  --warning: #F59E0B;
  --warning-bg: rgba(245, 158, 11, 0.14);
  --warning-border: rgba(245, 158, 11, 0.32);
  --warning-text: #FBBF24;

  --info: #38BDF8;
  --info-bg: rgba(56, 189, 248, 0.14);
  --info-border: rgba(56, 189, 248, 0.32);
  --info-text: #38BDF8;

  /* Typography */
  --text-primary: #F8FAFC;
  --text-secondary: #94A3B8;
  --text-tertiary: #64748B;
  --text-inverse: #0F172A;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.65);
}

/* Specific Dark Mode Overrides for Hardcoded Components */
html[data-theme="dark"] body {
  background-color: var(--bg-app) !important;
  color: var(--text-primary) !important;
}

html[data-theme="dark"] .sidebar {
  background: var(--bg-sidebar) !important;
  border-right-color: var(--border-card) !important;
}

html[data-theme="dark"] .topbar {
  background: rgba(12, 16, 28, 0.94) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-bottom-color: var(--border-card) !important;
}

html[data-theme="dark"] .nav a:hover {
  background: var(--bg-surface-hover) !important;
  color: var(--text-primary) !important;
}

html[data-theme="dark"] .user-chip {
  background: var(--bg-surface-elevated) !important;
  border-color: var(--border-card) !important;
  color: var(--text-primary) !important;
}

html[data-theme="dark"] .btn.ghost {
  background: var(--bg-surface-elevated) !important;
  border-color: var(--border-card) !important;
  color: var(--text-primary) !important;
}

html[data-theme="dark"] .btn.ghost:hover {
  background: var(--bg-surface-hover) !important;
  border-color: var(--border-hover) !important;
  color: #FFFFFF !important;
}

html[data-theme="dark"] .btn.danger {
  background: rgba(239, 68, 68, 0.12) !important;
  border-color: rgba(239, 68, 68, 0.35) !important;
  color: #F87171 !important;
}

html[data-theme="dark"] .btn.danger:hover {
  background: rgba(239, 68, 68, 0.22) !important;
  border-color: #EF4444 !important;
}

html[data-theme="dark"] .table-wrap {
  background: var(--bg-surface) !important;
  border-color: var(--border-card) !important;
}

html[data-theme="dark"] th {
  background: var(--bg-surface-elevated) !important;
  color: var(--text-secondary) !important;
  border-bottom-color: var(--border-card) !important;
}

html[data-theme="dark"] td {
  border-bottom-color: var(--border-subtle) !important;
  color: var(--text-primary) !important;
}

html[data-theme="dark"] tr:hover td {
  background: var(--bg-surface-hover) !important;
}

html[data-theme="dark"] .modal-card {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-card) !important;
  color: var(--text-primary) !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.1) !important;
}

html[data-theme="dark"] .account-qr-banner {
  background: var(--bg-surface) !important;
  border-color: var(--border-card) !important;
}

html[data-theme="dark"] .account-qr-banner-head h3 {
  color: var(--text-primary) !important;
}

html[data-theme="dark"] .account-qr-input {
  background: var(--bg-input) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-card) !important;
}

html[data-theme="dark"] .account-qr-input:focus {
  background: var(--bg-surface-elevated) !important;
  border-color: var(--border-focus) !important;
}

html[data-theme="dark"] .module-switcher {
  background: #111827 !important;
  border: 1px solid var(--border-card) !important;
}

html[data-theme="dark"] .module-tab.active {
  background: #1F2937 !important;
  color: #38BDF8 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35) !important;
}

html[data-theme="dark"] .module-tab:not(.active) {
  color: var(--text-secondary) !important;
}

html[data-theme="dark"] .module-tab:not(.active):hover {
  color: var(--text-primary) !important;
  background: rgba(255, 255, 255, 0.05) !important;
}

html[data-theme="dark"] .glass-panel,
html[data-theme="dark"] .sale-hero,
html[data-theme="dark"] .billing-hero,
html[data-theme="dark"] .profile-hero {
  background: var(--bg-surface) !important;
  border-color: var(--border-card) !important;
}

html[data-theme="dark"] .toast {
  background: var(--bg-surface-elevated) !important;
  border-color: var(--border-card) !important;
  color: var(--text-primary) !important;
  box-shadow: var(--shadow-lg) !important;
}

html[data-theme="dark"] .badge.neutral {
  background: #1F2937 !important;
  color: #94A3B8 !important;
  border-color: #374151 !important;
}

html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]),
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
  background: var(--bg-input) !important;
  border-color: var(--border-card) !important;
  color: var(--text-primary) !important;
}

html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] textarea:focus {
  border-color: var(--border-focus) !important;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.15) !important;
}

html[data-theme="dark"] select option {
  background: #111827 !important;
  color: #F8FAFC !important;
}

html[data-theme="dark"] ::-webkit-scrollbar-track {
  background: #0B0F19 !important;
}
html[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: #1E293B !important;
}
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: #334155 !important;
}

/* Dark Mode: Floating Support Widget */
html[data-theme="dark"] .floating-support-menu,
body.dark-mode .floating-support-menu {
  background: #111827 !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  box-shadow: 0 18px 44px -4px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="dark"] .floating-support-head,
body.dark-mode .floating-support-head {
  border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

html[data-theme="dark"] .floating-support-head strong,
body.dark-mode .floating-support-head strong {
  color: #F8FAFC !important;
}

html[data-theme="dark"] .floating-support-head small,
body.dark-mode .floating-support-head small {
  color: #94A3B8 !important;
}

html[data-theme="dark"] .support-item,
body.dark-mode .support-item {
  color: #E2E8F0 !important;
}

html[data-theme="dark"] .support-item:hover,
body.dark-mode .support-item:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #38BDF8 !important;
}

/* Dark Mode: Onboarding Wizard */
html[data-theme="dark"] .onboarding-card,
body.dark-mode .onboarding-card {
  background: linear-gradient(135deg, rgba(30, 58, 138, 0.28) 0%, rgba(15, 23, 42, 0.95) 100%) !important;
  border: 1px solid rgba(59, 130, 246, 0.35) !important;
}

html[data-theme="dark"] .onboarding-card h3,
body.dark-mode .onboarding-card h3 {
  color: #F8FAFC !important;
}

html[data-theme="dark"] .onboarding-step,
body.dark-mode .onboarding-step {
  background: #111827 !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

html[data-theme="dark"] .onboarding-step strong,
body.dark-mode .onboarding-step strong {
  color: #F8FAFC !important;
}

html[data-theme="dark"] .onboarding-step p,
body.dark-mode .onboarding-step p {
  color: #94A3B8 !important;
}

html[data-theme="dark"] .onboarding-step:hover,
body.dark-mode .onboarding-step:hover {
  border-color: #38BDF8 !important;
  background: #172033 !important;
}

html[data-theme="dark"] #dismissOnboarding24h,
body.dark-mode #dismissOnboarding24h {
  color: #94A3B8 !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  background: rgba(255, 255, 255, 0.05) !important;
}

/* Dark Mode: FAQ Items */
html[data-theme="dark"] .faq-item,
body.dark-mode .faq-item {
  background: #111827 !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

html[data-theme="dark"] .faq-item summary,
body.dark-mode .faq-item summary {
  color: #F8FAFC !important;
}

html[data-theme="dark"] .faq-item p,
body.dark-mode .faq-item p {
  color: #94A3B8 !important;
}

/* ==========================================================================
   NÚT GỘP CHUYỂN DARKMODE / NIGHT MODE (PILL TOGGLE SWITCH)
   ========================================================================== */
.theme-switch-pill {
  display: inline-flex;
  align-items: center;
  position: relative;
  height: 32px;
  width: 66px;
  padding: 3px;
  background: var(--bg-surface-hover, #E2E8F0);
  border: 1px solid var(--border-card, #CBD5E1);
  border-radius: var(--radius-pill, 9999px);
  cursor: pointer;
  user-select: none;
  transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.12);
  flex-shrink: 0;
  outline: none;
}

.theme-switch-pill:hover {
  border-color: var(--border-hover, #94A3B8);
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.18);
}

.theme-switch-pill:focus-visible {
  box-shadow: 0 0 0 2px var(--primary), inset 0 1px 3px rgba(0, 0, 0, 0.12);
}

.theme-pill-option {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  height: 100%;
  z-index: 2;
  color: var(--text-tertiary, #94A3B8);
  transition: color 0.25s ease, transform 0.2s ease;
  border-radius: var(--radius-pill);
}

.theme-pill-option svg {
  width: 14px;
  height: 14px;
  stroke-width: 2.2;
}

.theme-pill-indicator {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: 28px;
  height: 24px;
  border-radius: var(--radius-pill);
  background: #FFFFFF;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2), 0 0 1px rgba(0, 0, 0, 0.25);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.25s ease, box-shadow 0.25s ease;
  z-index: 1;
}

/* Light state (default when not dark) */
html:not([data-theme="dark"]) .theme-switch-pill .theme-pill-option.theme-pill-light,
html[data-theme="light"] .theme-switch-pill .theme-pill-option.theme-pill-light {
  color: #D97706 !important; /* amber sun */
}

html:not([data-theme="dark"]) .theme-switch-pill .theme-pill-option.theme-pill-dark,
html[data-theme="light"] .theme-switch-pill .theme-pill-option.theme-pill-dark {
  color: #94A3B8 !important;
}

html:not([data-theme="dark"]) .theme-switch-pill .theme-pill-indicator,
html[data-theme="light"] .theme-switch-pill .theme-pill-indicator {
  transform: translateX(0);
  background: #FFFFFF;
}

/* Dark state */
html[data-theme="dark"] .theme-switch-pill {
  background: rgba(15, 23, 42, 0.9) !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.5) !important;
}

html[data-theme="dark"] .theme-switch-pill:hover {
  border-color: rgba(56, 189, 248, 0.5) !important;
}

html[data-theme="dark"] .theme-switch-pill .theme-pill-indicator {
  transform: translateX(31px);
  background: linear-gradient(135deg, #2563EB 0%, #0284C7 100%) !important;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.55), 0 0 12px rgba(56, 189, 248, 0.35) !important;
}

html[data-theme="dark"] .theme-switch-pill .theme-pill-option.theme-pill-dark {
  color: #FFFFFF !important;
}

html[data-theme="dark"] .theme-switch-pill .theme-pill-option.theme-pill-light {
  color: #64748B !important;
}

@media (max-width: 768px) {
  .theme-switch-pill {
    height: 28px;
    width: 56px;
    padding: 2px;
  }
  .theme-pill-indicator {
    top: 2px;
    bottom: 2px;
    left: 2px;
    width: 24px;
    height: 22px;
  }
  html[data-theme="dark"] .theme-switch-pill .theme-pill-indicator {
    transform: translateX(27px);
  }
  .theme-pill-option svg {
    width: 12px;
    height: 12px;
  }
}

/* ==========================================================================
   ENHANCED LIGHT MODE TEXT & ACCESSIBILITY CONTRAST (WCAG AA/AAA)
   ========================================================================== */
html:not([data-theme="dark"]),
html[data-theme="light"] {
  --text-primary: #0F172A;
  --text-secondary: #334155;
  --text-tertiary: #475569;
  --border-card: #E2E8F0;
  --border-subtle: #E2E8F0;
}

html:not([data-theme="dark"]) .card,
html[data-theme="light"] .card {
  background: #FFFFFF !important;
  border-color: #E2E8F0 !important;
  color: #0F172A !important;
}

/* MODAL DIALOGS LIGHT MODE */
html:not([data-theme="dark"]) .modal-card,
html[data-theme="light"] .modal-card {
  background: #FFFFFF !important;
  border: 1px solid #CBD5E1 !important;
  color: #0F172A !important;
  box-shadow: 0 25px 60px -12px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
}

html:not([data-theme="dark"]) .modal-header,
html[data-theme="light"] .modal-header {
  border-bottom: 1px solid #E2E8F0 !important;
}

html:not([data-theme="dark"]) .modal-header h2,
html:not([data-theme="dark"]) .modal-header h3,
html:not([data-theme="dark"]) #confirmModalTitle,
html[data-theme="light"] .modal-header h2,
html[data-theme="light"] .modal-header h3,
html[data-theme="light"] #confirmModalTitle {
  color: #0F172A !important;
  font-weight: 700 !important;
}

html:not([data-theme="dark"]) .modal-body,
html:not([data-theme="dark"]) #confirmModalText,
html[data-theme="light"] .modal-body,
html[data-theme="light"] #confirmModalText {
  color: #334155 !important;
  font-weight: 500 !important;
}

html:not([data-theme="dark"]) .modal-actions,
html[data-theme="light"] .modal-actions {
  border-top: 1px solid #E2E8F0 !important;
}

html:not([data-theme="dark"]) .modal-actions .btn.ghost,
html[data-theme="light"] .modal-actions .btn.ghost,
html:not([data-theme="dark"]) #confirmModalCancel,
html[data-theme="light"] #confirmModalCancel {
  background: #F1F5F9 !important;
  color: #1E293B !important;
  border: 1px solid #CBD5E1 !important;
  font-weight: 600 !important;
}

html:not([data-theme="dark"]) .modal-actions .btn.ghost:hover,
html[data-theme="light"] .modal-actions .btn.ghost:hover,
html:not([data-theme="dark"]) #confirmModalCancel:hover,
html[data-theme="light"] #confirmModalCancel:hover {
  background: #E2E8F0 !important;
  color: #0F172A !important;
}

html:not([data-theme="dark"]) .modal-actions .btn.primary,
html[data-theme="light"] .modal-actions .btn.primary,
html:not([data-theme="dark"]) #confirmModalOk,
html[data-theme="light"] #confirmModalOk {
  background: #2563EB !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
}

html:not([data-theme="dark"]) .group-policy-card,
html[data-theme="light"] .group-policy-card {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  color: #0F172A !important;
}

html:not([data-theme="dark"]) .media-item-card,
html[data-theme="light"] .media-item-card {
  background: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
  color: #0F172A !important;
}

html:not([data-theme="dark"]) .upload-dropzone,
html[data-theme="light"] .upload-dropzone {
  background: #F8FAFC !important;
  border: 2px dashed #94A3B8 !important;
  color: #334155 !important;
}

html:not([data-theme="dark"]) .toast,
html[data-theme="light"] .toast {
  background: #FFFFFF !important;
  border: 1px solid #CBD5E1 !important;
  color: #0F172A !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12) !important;
}

html:not([data-theme="dark"]) .card-header h2,
html:not([data-theme="dark"]) .card-header h3,
html[data-theme="light"] .card-header h2,
html[data-theme="light"] .card-header h3 {
  color: #0F172A !important;
  font-weight: 700;
}

html:not([data-theme="dark"]) .card-header p,
html[data-theme="light"] .card-header p {
  color: #475569 !important;
  font-weight: 500;
}

html:not([data-theme="dark"]) .muted,
html[data-theme="light"] .muted {
  color: #475569 !important;
  font-weight: 500;
}

html:not([data-theme="dark"]) small.muted,
html[data-theme="light"] small.muted,
html:not([data-theme="dark"]) p.muted,
html[data-theme="light"] p.muted,
html:not([data-theme="dark"]) span.muted,
html[data-theme="light"] span.muted {
  color: #475569 !important;
}

html:not([data-theme="dark"]) label,
html[data-theme="light"] label {
  color: #0F172A !important;
  font-weight: 600;
}

html:not([data-theme="dark"]) label.check,
html[data-theme="light"] label.check {
  color: #1E293B !important;
  font-weight: 500;
}

html:not([data-theme="dark"]) .stat,
html[data-theme="light"] .stat {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
}

html:not([data-theme="dark"]) .stat span,
html[data-theme="light"] .stat span {
  color: #475569 !important;
  font-weight: 600;
}

html:not([data-theme="dark"]) .stat b,
html[data-theme="light"] .stat b {
  color: #0F172A !important;
}

html:not([data-theme="dark"]) .stat small,
html[data-theme="light"] .stat small {
  color: #475569 !important;
  font-weight: 600;
}

html:not([data-theme="dark"]) textarea,
html:not([data-theme="dark"]) input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
html:not([data-theme="dark"]) select,
html[data-theme="light"] textarea,
html[data-theme="light"] input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
html[data-theme="light"] select {
  background: #FFFFFF !important;
  color: #0F172A !important;
  border: 1px solid #CBD5E1 !important;
}

html:not([data-theme="dark"]) textarea::placeholder,
html:not([data-theme="dark"]) input::placeholder,
html[data-theme="light"] textarea::placeholder,
html[data-theme="light"] input::placeholder {
  color: #64748B !important;
}

html:not([data-theme="dark"]) table th,
html[data-theme="light"] table th {
  background: #F8FAFC !important;
  color: #1E293B !important;
  font-weight: 700 !important;
  border-bottom: 1.5px solid #CBD5E1 !important;
}

html:not([data-theme="dark"]) table td,
html[data-theme="light"] table td {
  color: #0F172A !important;
  border-bottom: 1px solid #F1F5F9 !important;
}

/* Light Mode Overrides for Hardcoded Dark Sub-Boxes */
html:not([data-theme="dark"]) .vip-subscription-banner,
html[data-theme="light"] .vip-subscription-banner {
  background: linear-gradient(135deg, #EFF6FF 0%, #FFFFFF 100%) !important;
  border: 1.5px solid #BFDBFE !important;
  box-shadow: 0 4px 18px rgba(37, 99, 235, 0.08) !important;
}

html:not([data-theme="dark"]) #vipPlanNameText,
html[data-theme="light"] #vipPlanNameText {
  color: #0F172A !important;
}

html:not([data-theme="dark"]) .vip-countdown-box,
html[data-theme="light"] .vip-countdown-box {
  background: #FEF3C7 !important;
  border: 1px solid #FCD34D !important;
}

html:not([data-theme="dark"]) .vip-countdown-box small,
html[data-theme="light"] .vip-countdown-box small {
  color: #92400E !important;
}

html:not([data-theme="dark"]) #vipCountdownText,
html[data-theme="light"] #vipCountdownText {
  color: #B45309 !important;
}

html:not([data-theme="dark"]) #weeklyAnalyticsCard,
html[data-theme="light"] #weeklyAnalyticsCard {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.05) !important;
}

html:not([data-theme="dark"]) #weeklyAnalyticsCard .section-head h2,
html[data-theme="light"] #weeklyAnalyticsCard .section-head h2 {
  color: #0F172A !important;
}

html:not([data-theme="dark"]) #weeklyAnalyticsCard .section-head p,
html[data-theme="light"] #weeklyAnalyticsCard .section-head p {
  color: #475569 !important;
}

html:not([data-theme="dark"]) #weeklyAnalyticsCard > div > div:first-child,
html[data-theme="light"] #weeklyAnalyticsCard > div > div:first-child {
  background: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
}

html:not([data-theme="dark"]) #weeklyAnalyticsCard .grid.three > div,
html[data-theme="light"] #weeklyAnalyticsCard .grid.three > div {
  background: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
}

html:not([data-theme="dark"]) #weeklyAnalyticsCard .grid.three small,
html[data-theme="light"] #weeklyAnalyticsCard .grid.three small {
  color: #475569 !important;
}

html:not([data-theme="dark"]) [data-autojoin-batch-form],
html[data-theme="light"] [data-autojoin-batch-form] {
  background: #F8FAFC !important;
  border: 1.5px solid #86EFAC !important;
}

html:not([data-theme="dark"]) [data-autojoin-batch-form] label,
html[data-theme="light"] [data-autojoin-batch-form] label {
  color: #065F46 !important;
}

html:not([data-theme="dark"]) [data-autojoin-batch-form] small,
html[data-theme="light"] [data-autojoin-batch-form] small {
  color: #334155 !important;
}

html:not([data-theme="dark"]) [data-autojoin-batch-form] span,
html[data-theme="light"] [data-autojoin-batch-form] span {
  color: #334155 !important;
}

html:not([data-theme="dark"]) .template-card,
html[data-theme="light"] .template-card {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  color: #0F172A !important;
}

html:not([data-theme="dark"]) .template-card:hover,
html[data-theme="light"] .template-card:hover {
  border-color: #93C5FD !important;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.1) !important;
}

html:not([data-theme="dark"]) .template-card span,
html[data-theme="light"] .template-card span {
  color: #334155 !important;
}

html:not([data-theme="dark"]) #groupPoolListContainer,
html[data-theme="light"] #groupPoolListContainer {
  background: #FFFFFF !important;
}

html:not([data-theme="dark"]) #groupPoolSelectedCategoryTitle,
html[data-theme="light"] #groupPoolSelectedCategoryTitle {
  color: #0F172A !important;
}

html:not([data-theme="dark"]) #groupPoolSelectedCategoryDesc,
html[data-theme="light"] #groupPoolSelectedCategoryDesc {
  color: #475569 !important;
}

html:not([data-theme="dark"]) [data-autojoin-progress-wrap],
html[data-theme="light"] [data-autojoin-progress-wrap] {
  background: #F8FAFC !important;
  border-color: #BAE6FD !important;
}

html:not([data-theme="dark"]) [data-autojoin-progress-title],
html[data-theme="light"] [data-autojoin-progress-title] {
  color: #0F172A !important;
}

html:not([data-theme="dark"]) [data-autojoin-progress-msg],
html[data-theme="light"] [data-autojoin-progress-msg] {
  background: #FFFFFF !important;
  color: #0F172A !important;
  border-color: #E2E8F0 !important;
}

html:not([data-theme="dark"]) #contentStudioModal .modal-card,
html[data-theme="light"] #contentStudioModal .modal-card {
  background: #FFFFFF !important;
  color: #0F172A !important;
}

html:not([data-theme="dark"]) #contentStudioModal div[style*="rgba(15, 23, 42"],
html[data-theme="light"] #contentStudioModal div[style*="rgba(15, 23, 42"] {
  background: #F8FAFC !important;
  border-color: #C7D2FE !important;
}

html:not([data-theme="dark"]) #contentStudioModal strong,
html[data-theme="light"] #contentStudioModal strong {
  color: #3730A3 !important;
}

html:not([data-theme="dark"]) #contentStudioInput,
html[data-theme="light"] #contentStudioInput {
  background: #FFFFFF !important;
  color: #0F172A !important;
  border: 1px solid #CBD5E1 !important;
}

html:not([data-theme="dark"]) #contentStudioPreviewBox,
html[data-theme="light"] #contentStudioPreviewBox {
  background: #F0FDF4 !important;
  color: #065F46 !important;
}

html:not([data-theme="dark"]) [data-auto-leave-panel] > div[style*="background: #F8FAFC"],
html[data-theme="light"] [data-auto-leave-panel] > div[style*="background: #F8FAFC"] {
  background: #F8FAFC !important;
  border-color: #E2E8F0 !important;
}

/* ==========================================================================
   COMPREHENSIVE DUAL-THEME HIGH-CONTRAST SYSTEM (LIGHT & DARK MODE)
   ========================================================================== */

/* --- 1. AFFILIATE MODULE --- */
.affiliate-balance-chip {
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(56, 189, 248, 0.3);
  border-radius: 12px;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.affiliate-chip-title {
  color: #F8FAFC;
}
.affiliate-chip-amount {
  color: #10B981;
}
.affiliate-link-input {
  background: rgba(15, 23, 42, 0.8);
  color: #38BDF8;
  border: 1px solid rgba(56, 189, 248, 0.3);
}
.affiliate-rules-box {
  background: rgba(15, 23, 42, 0.6);
  border: 1px dashed rgba(255, 255, 255, 0.15);
  color: #CBD5E1;
}
.affiliate-rules-title {
  color: #FBBF24;
}
.affiliate-rules-list li {
  color: #94A3B8;
}
.affiliate-rules-list li b {
  color: #F8FAFC;
}

/* Affiliate Light Mode */
html:not([data-theme="dark"]) .affiliate-balance-chip,
html[data-theme="light"] .affiliate-balance-chip,
body:not(.dark-mode) .affiliate-balance-chip {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}
html:not([data-theme="dark"]) .affiliate-chip-title,
html[data-theme="light"] .affiliate-chip-title,
body:not(.dark-mode) .affiliate-chip-title {
  color: #0F172A !important;
}
html:not([data-theme="dark"]) .affiliate-chip-amount,
html[data-theme="light"] .affiliate-chip-amount,
body:not(.dark-mode) .affiliate-chip-amount {
  color: #059669 !important;
}
html:not([data-theme="dark"]) .affiliate-link-input,
html[data-theme="light"] .affiliate-link-input,
body:not(.dark-mode) .affiliate-link-input {
  background: #FFFFFF !important;
  color: #0284C7 !important;
  border: 1px solid #CBD5E1 !important;
}
html:not([data-theme="dark"]) .affiliate-rules-box,
html[data-theme="light"] .affiliate-rules-box,
body:not(.dark-mode) .affiliate-rules-box {
  background: #F8FAFC !important;
  border: 1px dashed #CBD5E1 !important;
  color: #334155 !important;
}
html:not([data-theme="dark"]) .affiliate-rules-title,
html[data-theme="light"] .affiliate-rules-title,
body:not(.dark-mode) .affiliate-rules-title {
  color: #B45309 !important;
}
html:not([data-theme="dark"]) .affiliate-rules-list li,
html[data-theme="light"] .affiliate-rules-list li,
body:not(.dark-mode) .affiliate-rules-list li {
  color: #334155 !important;
}
html:not([data-theme="dark"]) .affiliate-rules-list li b,
html[data-theme="light"] .affiliate-rules-list li b,
body:not(.dark-mode) .affiliate-rules-list li b {
  color: #0F172A !important;
}

/* --- 2. TOOLS MODULE (.tool-picker-box & .group-picker) --- */
.tool-picker-box,
.group-picker {
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 8px;
  padding: 12px;
  background: rgba(15, 23, 42, 0.55);
}
.tool-picker-box .group-picker-head small,
.tool-picker-box [data-bulk-target-status],
.group-picker .group-picker-head small,
.group-picker [data-group-status] {
  color: #94A3B8;
}
.tool-picker-box label,
.group-picker label {
  color: #E2E8F0;
  font-weight: 600;
}
.tool-picker-box select,
.group-picker select {
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid rgba(148, 163, 184, 0.2);
  color: #E2E8F0;
}
.tool-picker-box select[disabled],
.group-picker select[disabled] {
  background: rgba(15, 23, 42, 0.4);
  color: #64748B;
}

/* Tool Picker & Group Picker Dark Mode High Contrast */
html[data-theme="dark"] .tool-picker-box,
html[data-theme="dark"] .group-picker,
body.dark-mode .tool-picker-box,
body.dark-mode .group-picker {
  background: rgba(15, 23, 42, 0.65) !important;
  border: 1px solid rgba(148, 163, 184, 0.25) !important;
}
html[data-theme="dark"] .tool-picker-box .group-picker-head small,
html[data-theme="dark"] .tool-picker-box [data-bulk-target-status],
html[data-theme="dark"] .group-picker .group-picker-head small,
html[data-theme="dark"] .group-picker [data-group-status],
body.dark-mode .tool-picker-box .group-picker-head small,
body.dark-mode .tool-picker-box [data-bulk-target-status],
body.dark-mode .group-picker .group-picker-head small,
body.dark-mode .group-picker [data-group-status] {
  color: #CBD5E1 !important;
}
html[data-theme="dark"] .tool-picker-box label,
html[data-theme="dark"] .group-picker label,
body.dark-mode .tool-picker-box label,
body.dark-mode .group-picker label {
  color: #F8FAFC !important;
  font-weight: 600 !important;
}
html[data-theme="dark"] .tool-picker-box input[type="search"],
html[data-theme="dark"] .group-picker input[type="search"],
body.dark-mode .tool-picker-box input[type="search"],
body.dark-mode .group-picker input[type="search"] {
  background: rgba(15, 23, 42, 0.85) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: #F8FAFC !important;
}
html[data-theme="dark"] .tool-picker-box select,
html[data-theme="dark"] .group-picker select,
body.dark-mode .tool-picker-box select,
body.dark-mode .group-picker select {
  background: rgba(15, 23, 42, 0.85) !important;
  border: 1px solid rgba(148, 163, 184, 0.3) !important;
  color: #F8FAFC !important;
}
html[data-theme="dark"] .tool-picker-box select[disabled],
html[data-theme="dark"] .group-picker select[disabled],
body.dark-mode .tool-picker-box select[disabled],
body.dark-mode .group-picker select[disabled] {
  background: rgba(15, 23, 42, 0.5) !important;
  color: #94A3B8 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Tool Picker & Group Picker Light Mode High Contrast */
html:not([data-theme="dark"]) .tool-picker-box,
html:not([data-theme="dark"]) .group-picker,
html[data-theme="light"] .tool-picker-box,
html[data-theme="light"] .group-picker,
body:not(.dark-mode) .tool-picker-box,
body:not(.dark-mode) .group-picker {
  background: #F8FAFC !important;
  border: 1px solid #CBD5E1 !important;
}
html:not([data-theme="dark"]) .tool-picker-box .group-picker-head small,
html:not([data-theme="dark"]) .tool-picker-box [data-bulk-target-status],
html:not([data-theme="dark"]) .group-picker .group-picker-head small,
html:not([data-theme="dark"]) .group-picker [data-group-status],
html[data-theme="light"] .tool-picker-box .group-picker-head small,
html[data-theme="light"] .tool-picker-box [data-bulk-target-status],
html[data-theme="light"] .group-picker .group-picker-head small,
html[data-theme="light"] .group-picker [data-group-status],
body:not(.dark-mode) .tool-picker-box .group-picker-head small,
body:not(.dark-mode) .tool-picker-box [data-bulk-target-status],
body:not(.dark-mode) .group-picker .group-picker-head small,
body:not(.dark-mode) .group-picker [data-group-status] {
  color: #475569 !important;
}
html:not([data-theme="dark"]) .tool-picker-box label,
html:not([data-theme="dark"]) .group-picker label,
html[data-theme="light"] .tool-picker-box label,
html[data-theme="light"] .group-picker label,
body:not(.dark-mode) .tool-picker-box label,
body:not(.dark-mode) .group-picker label {
  color: #0F172A !important;
}
html:not([data-theme="dark"]) .tool-picker-box input[type="search"],
html:not([data-theme="dark"]) .group-picker input[type="search"],
html[data-theme="light"] .tool-picker-box input[type="search"],
html[data-theme="light"] .group-picker input[type="search"],
body:not(.dark-mode) .tool-picker-box input[type="search"],
body:not(.dark-mode) .group-picker input[type="search"] {
  background: #FFFFFF !important;
  border: 1px solid #CBD5E1 !important;
  color: #0F172A !important;
}
html:not([data-theme="dark"]) .tool-picker-box select,
html:not([data-theme="dark"]) .group-picker select,
html[data-theme="light"] .tool-picker-box select,
html[data-theme="light"] .group-picker select,
body:not(.dark-mode) .tool-picker-box select,
body:not(.dark-mode) .group-picker select {
  background: #FFFFFF !important;
  border: 1px solid #CBD5E1 !important;
  color: #0F172A !important;
}
html:not([data-theme="dark"]) .tool-picker-box select[disabled],
html:not([data-theme="dark"]) .group-picker select[disabled],
html[data-theme="light"] .tool-picker-box select[disabled],
html[data-theme="light"] .group-picker select[disabled],
body:not(.dark-mode) .tool-picker-box select[disabled],
body:not(.dark-mode) .group-picker select[disabled] {
  background: #F1F5F9 !important;
  color: #475569 !important;
  border: 1px solid #CBD5E1 !important;
}

/* --- 3. VIETQR TRANSFER MODAL (.vietqr-detail-row) --- */
.vietqr-detail-row {
  background: rgba(15, 23, 42, 0.6);
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--border-card);
}
.vietqr-detail-label {
  font-size: 0.72rem;
  color: #94A3B8;
  display: block;
}
.vietqr-val-blue {
  color: #38BDF8;
}
.vietqr-val-code {
  color: #F8FAFC;
  background: transparent;
  border: none;
}
.vietqr-val-title {
  color: #F8FAFC;
}
.vietqr-val-amount {
  color: #34D399;
}
.vietqr-val-memo {
  color: #38BDF8;
  background: transparent;
  border: none;
}

/* VietQR Transfer Modal Light Mode */
html:not([data-theme="dark"]) .vietqr-detail-row,
html[data-theme="light"] .vietqr-detail-row,
body:not(.dark-mode) .vietqr-detail-row {
  background: #F8FAFC !important;
  border: 1px solid #CBD5E1 !important;
}
html:not([data-theme="dark"]) .vietqr-detail-label,
html[data-theme="light"] .vietqr-detail-label,
body:not(.dark-mode) .vietqr-detail-label {
  color: #475569 !important;
  font-weight: 600 !important;
}
html:not([data-theme="dark"]) .vietqr-val-blue,
html[data-theme="light"] .vietqr-val-blue,
body:not(.dark-mode) .vietqr-val-blue {
  color: #0284C7 !important;
}
html:not([data-theme="dark"]) .vietqr-val-code,
html[data-theme="light"] .vietqr-val-code,
body:not(.dark-mode) .vietqr-val-code {
  color: #0F172A !important;
  background: #EEF2F6 !important;
  padding: 2px 6px !important;
  border: 1px solid #CBD5E1 !important;
}
html:not([data-theme="dark"]) .vietqr-val-title,
html[data-theme="light"] .vietqr-val-title,
body:not(.dark-mode) .vietqr-val-title {
  color: #0F172A !important;
}
html:not([data-theme="dark"]) .vietqr-val-amount,
html[data-theme="light"] .vietqr-val-amount,
body:not(.dark-mode) .vietqr-val-amount {
  color: #059669 !important;
}
html:not([data-theme="dark"]) .vietqr-val-memo,
html[data-theme="light"] .vietqr-val-memo,
body:not(.dark-mode) .vietqr-val-memo {
  color: #0284C7 !important;
  background: #E0F2FE !important;
  padding: 2px 6px !important;
  border: 1px solid #BAE6FD !important;
}

/* --- 4. INSTANT TOPUP MODAL (.vietqr-topup-grid) --- */
.vietqr-topup-grid {
  display: grid;
  grid-template-columns: 210px 1fr;
  gap: 16px;
  align-items: center;
  padding: 14px;
  border-radius: 12px;
}
.vietqr-topup-row {
  padding: 6px 10px;
  border-radius: 6px;
}
.vietqr-topup-memo-row {
  padding: 6px 10px;
  border-radius: 6px;
}

/* Topup Grid Dark Mode */
html[data-theme="dark"] .vietqr-topup-grid,
body.dark-mode .vietqr-topup-grid {
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid rgba(56, 189, 248, 0.25);
  color: #F8FAFC;
}
html[data-theme="dark"] .vietqr-topup-row,
body.dark-mode .vietqr-topup-row {
  background: rgba(30, 41, 59, 0.6);
  color: #F8FAFC;
}
html[data-theme="dark"] .vietqr-topup-memo-row,
body.dark-mode .vietqr-topup-memo-row {
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.35);
  color: #FBBF24;
}

/* Topup Grid Light Mode */
html:not([data-theme="dark"]) .vietqr-topup-grid,
html[data-theme="light"] .vietqr-topup-grid,
body:not(.dark-mode) .vietqr-topup-grid {
  background: #FFFFFF !important;
  border: 1px solid #CBD5E1 !important;
  color: #0F172A !important;
}
html:not([data-theme="dark"]) .vietqr-topup-row,
html[data-theme="light"] .vietqr-topup-row,
body:not(.dark-mode) .vietqr-topup-row {
  background: #F1F5F9 !important;
  color: #0F172A !important;
}
html:not([data-theme="dark"]) .vietqr-topup-memo-row,
html[data-theme="light"] .vietqr-topup-memo-row,
body:not(.dark-mode) .vietqr-topup-memo-row {
  background: #FEF3C7 !important;
  border: 1px solid #FDE68A !important;
  color: #92400E !important;
}

/* --- 5. PERFORMANCE CHART & METRIC PILLS --- */
.chart-canvas-wrap {
  position: relative;
  width: 100%;
  height: 220px;
  border-radius: 8px;
  padding: 12px;
  box-sizing: border-box;
}
.chart-sub-pill {
  border-radius: 8px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.chart-sub-label {
  font-size: 0.72rem;
  display: block;
}
.chart-icon-box {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Chart Dark Mode */
html[data-theme="dark"] .chart-canvas-wrap,
body.dark-mode .chart-canvas-wrap {
  background: rgba(15, 23, 42, 0.4);
  border: 1px solid rgba(148, 163, 184, 0.12);
}
html[data-theme="dark"] .chart-sub-pill,
body.dark-mode .chart-sub-pill {
  background: rgba(30, 41, 59, 0.6);
}
html[data-theme="dark"] .chart-pill-blue,
body.dark-mode .chart-pill-blue {
  border: 1px solid rgba(56, 189, 248, 0.2);
}
html[data-theme="dark"] .chart-pill-blue #analyticsTotalSent,
body.dark-mode .chart-pill-blue #analyticsTotalSent {
  color: #38BDF8 !important;
}
html[data-theme="dark"] .chart-pill-purple,
body.dark-mode .chart-pill-purple {
  border: 1px solid rgba(168, 85, 247, 0.2);
}
html[data-theme="dark"] .chart-pill-purple #analyticsMediaRatio,
body.dark-mode .chart-pill-purple #analyticsMediaRatio {
  color: #C084FC !important;
}
html[data-theme="dark"] .chart-pill-green,
body.dark-mode .chart-pill-green {
  border: 1px solid rgba(16, 185, 129, 0.2);
}
html[data-theme="dark"] .chart-sub-label,
body.dark-mode .chart-sub-label {
  color: #94A3B8;
}

/* Chart Light Mode */
html:not([data-theme="dark"]) .chart-canvas-wrap,
html[data-theme="light"] .chart-canvas-wrap,
body:not(.dark-mode) .chart-canvas-wrap {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
}
html:not([data-theme="dark"]) .chart-sub-pill,
html[data-theme="light"] .chart-sub-pill,
body:not(.dark-mode) .chart-sub-pill {
  background: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
}
html:not([data-theme="dark"]) .chart-sub-label,
html[data-theme="light"] .chart-sub-label,
body:not(.dark-mode) .chart-sub-label {
  color: #475569 !important;
  font-weight: 500 !important;
}
html:not([data-theme="dark"]) .chart-pill-blue #analyticsTotalSent,
html[data-theme="light"] .chart-pill-blue #analyticsTotalSent,
body:not(.dark-mode) .chart-pill-blue #analyticsTotalSent {
  color: #0284C7 !important;
}
html:not([data-theme="dark"]) .chart-pill-purple #analyticsMediaRatio,
html[data-theme="light"] .chart-pill-purple #analyticsMediaRatio,
body:not(.dark-mode) .chart-pill-purple #analyticsMediaRatio {
  color: #7C3AED !important;
}
html:not([data-theme="dark"]) .chart-pill-green #analyticsSuccessRate,
html[data-theme="light"] .chart-pill-green #analyticsSuccessRate,
body:not(.dark-mode) .chart-pill-green #analyticsSuccessRate {
  color: #059669 !important;
}

/* --- 6. VIP SUBSCRIPTION BANNER --- */
.vip-subscription-banner {
  margin-bottom: 20px;
  border-radius: 12px;
  padding: 16px 20px;
}
.vip-countdown-box {
  border-radius: 8px;
  padding: 6px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* VIP Banner Dark Mode */
html[data-theme="dark"] .vip-subscription-banner,
body.dark-mode .vip-subscription-banner {
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.95), rgba(15, 23, 42, 0.98));
  border: 1px solid rgba(56, 189, 248, 0.3);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}
html[data-theme="dark"] #vipPlanNameText,
body.dark-mode #vipPlanNameText {
  color: #F8FAFC !important;
  font-size: 1.1rem;
}
html[data-theme="dark"] .vip-countdown-box,
body.dark-mode .vip-countdown-box {
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid rgba(245, 158, 11, 0.35);
}
html[data-theme="dark"] .vip-countdown-box small,
body.dark-mode .vip-countdown-box small {
  color: #94A3B8;
}

/* VIP Banner Light Mode */
html:not([data-theme="dark"]) .vip-subscription-banner,
html[data-theme="light"] .vip-subscription-banner,
body:not(.dark-mode) .vip-subscription-banner {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05) !important;
}
html:not([data-theme="dark"]) #vipPlanNameText,
html[data-theme="light"] #vipPlanNameText,
body:not(.dark-mode) #vipPlanNameText {
  color: #0F172A !important;
  font-size: 1.1rem;
}
html:not([data-theme="dark"]) .vip-countdown-box,
html[data-theme="light"] .vip-countdown-box,
body:not(.dark-mode) .vip-countdown-box {
  background: #FEF3C7 !important;
  border: 1px solid #FDE68A !important;
}
html:not([data-theme="dark"]) .vip-countdown-box small,
html[data-theme="light"] .vip-countdown-box small,
body:not(.dark-mode) .vip-countdown-box small {
  color: #92400E !important;
  font-weight: 700 !important;
}
html:not([data-theme="dark"]) #vipCountdownText,
html[data-theme="light"] #vipCountdownText,
body:not(.dark-mode) #vipCountdownText {
  color: #B45309 !important;
}

/* --- 7. QUEUE PACING & CAMPAIGN MEDIA BOXES --- */
.queue-pacing-box {
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 12px;
  margin-top: 10px;
}
.campaign-media-box {
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 12px;
}

/* Dark Mode */
html[data-theme="dark"] .queue-pacing-box,
body.dark-mode .queue-pacing-box {
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(244, 63, 94, 0.25);
}
html[data-theme="dark"] .queue-pacing-title,
body.dark-mode .queue-pacing-title {
  color: #FDA4AF;
}
html[data-theme="dark"] .campaign-media-box,
body.dark-mode .campaign-media-box {
  background: rgba(15, 23, 42, 0.5);
  border: 1px solid rgba(148, 163, 184, 0.2);
}

/* Light Mode */
html:not([data-theme="dark"]) .queue-pacing-box,
html[data-theme="light"] .queue-pacing-box,
body:not(.dark-mode) .queue-pacing-box {
  background: #FFF1F2 !important;
  border: 1px solid #FECDD3 !important;
}
html:not([data-theme="dark"]) .queue-pacing-title,
html[data-theme="light"] .queue-pacing-title,
body:not(.dark-mode) .queue-pacing-title {
  color: #9F1239 !important;
  font-weight: 700 !important;
}
html:not([data-theme="dark"]) .queue-pacing-box label b,
html[data-theme="light"] .queue-pacing-box label b,
body:not(.dark-mode) .queue-pacing-box label b {
  color: #0F172A !important;
}
html:not([data-theme="dark"]) .campaign-media-box,
html[data-theme="light"] .campaign-media-box,
body:not(.dark-mode) .campaign-media-box {
  background: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
}

/* --- 8. SPIN-TEXT & CONTENT STUDIO --- */
.spin-text-box {
  border-radius: 10px;
  padding: 14px;
}
.spin-text-textarea {
  width: 100%;
  font-family: monospace;
  font-size: 0.85rem;
  line-height: 1.5;
  border-radius: 8px;
  padding: 10px;
}
.spin-text-preview-box {
  margin-top: 4px;
  padding: 10px;
  border-left: 3px solid #10B981;
  border-radius: 4px;
  font-size: 0.82rem;
  white-space: pre-wrap;
}

/* Dark Mode */
html[data-theme="dark"] .spin-text-box,
body.dark-mode .spin-text-box {
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(99, 102, 241, 0.3);
}
html[data-theme="dark"] .spin-text-title,
body.dark-mode .spin-text-title {
  color: #38BDF8;
}
html[data-theme="dark"] .spin-text-textarea,
body.dark-mode .spin-text-textarea {
  background: rgba(0, 0, 0, 0.25);
  color: #F8FAFC;
  border: 1px solid rgba(148, 163, 184, 0.2);
}
html[data-theme="dark"] .spin-text-preview-box,
body.dark-mode .spin-text-preview-box {
  background: rgba(0, 0, 0, 0.4);
  color: #E2E8F0;
}

/* Light Mode */
html:not([data-theme="dark"]) .spin-text-box,
html[data-theme="light"] .spin-text-box,
body:not(.dark-mode) .spin-text-box {
  background: #F8FAFC !important;
  border: 1px solid #C7D2FE !important;
}
html:not([data-theme="dark"]) .spin-text-title,
html[data-theme="light"] .spin-text-title,
body:not(.dark-mode) .spin-text-title {
  color: #4338CA !important;
}
html:not([data-theme="dark"]) .spin-text-textarea,
html[data-theme="light"] .spin-text-textarea,
body:not(.dark-mode) .spin-text-textarea {
  background: #FFFFFF !important;
  color: #0F172A !important;
  border: 1px solid #CBD5E1 !important;
}
html:not([data-theme="dark"]) .spin-text-preview-box,
html[data-theme="light"] .spin-text-preview-box,
body:not(.dark-mode) .spin-text-preview-box {
  background: #F0FDF4 !important;
  color: #065F46 !important;
  border-left-color: #10B981 !important;
}

/* --- 9. GROUP POOL BOX (.group-pool-box) --- */
.group-pool-box {
  border-radius: 10px;
  padding: 14px;
}

/* Dark Mode */
html[data-theme="dark"] .group-pool-box,
body.dark-mode .group-pool-box {
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid rgba(56, 189, 248, 0.25);
}
html[data-theme="dark"] #groupPoolSelectedCategoryTitle,
body.dark-mode #groupPoolSelectedCategoryTitle {
  font-size: 0.92rem;
  color: #F8FAFC;
}

/* Light Mode */
html:not([data-theme="dark"]) .group-pool-box,
html[data-theme="light"] .group-pool-box,
body:not(.dark-mode) .group-pool-box {
  background: #FFFFFF !important;
  border: 1px solid #CBD5E1 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}
html:not([data-theme="dark"]) #groupPoolSelectedCategoryTitle,
html[data-theme="light"] #groupPoolSelectedCategoryTitle,
body:not(.dark-mode) #groupPoolSelectedCategoryTitle {
  color: #0F172A !important;
  font-size: 0.92rem;
  font-weight: 700;
}

/* --- 10. MARKETING TEMPLATE CARDS --- */
.template-card {
  border-radius: 8px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.2s ease;
}
.template-card-category {
  font-size: 0.75rem;
  font-weight: 700;
}
.template-card-title {
  margin: 0 0 6px;
  font-size: 0.92rem;
}
.template-card-desc {
  font-size: 0.8rem;
  margin: 0 0 10px;
  line-height: 1.4;
  max-height: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

/* Dark Mode */
html[data-theme="dark"] .template-card,
body.dark-mode .template-card {
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
html[data-theme="dark"] .template-card-category,
body.dark-mode .template-card-category {
  color: #94A3B8;
}
html[data-theme="dark"] .template-card-title,
body.dark-mode .template-card-title {
  color: #F1F5F9;
}
html[data-theme="dark"] .template-card-desc,
body.dark-mode .template-card-desc {
  color: #94A3B8;
}

/* Light Mode */
html:not([data-theme="dark"]) .template-card,
html[data-theme="light"] .template-card,
body:not(.dark-mode) .template-card {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03) !important;
}
html:not([data-theme="dark"]) .template-card-category,
html[data-theme="light"] .template-card-category,
body:not(.dark-mode) .template-card-category {
  color: #0284C7 !important;
}
html:not([data-theme="dark"]) .template-card-title,
html[data-theme="light"] .template-card-title,
body:not(.dark-mode) .template-card-title {
  color: #0F172A !important;
}
html:not([data-theme="dark"]) .template-card-desc,
html[data-theme="light"] .template-card-desc,
body:not(.dark-mode) .template-card-desc {
  color: #475569 !important;
}

/* --- 11. AUTOJOIN PROGRESS WRAP --- */
.autojoin-progress-wrap {
  padding: 16px;
  border-radius: 10px;
}
.autojoin-progress-track {
  width: 100%;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 10px;
}
.autojoin-progress-msg {
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 6px;
  max-width: 100%;
}

/* Dark Mode */
html[data-theme="dark"] .autojoin-progress-wrap,
body.dark-mode .autojoin-progress-wrap {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(30, 41, 59, 0.95));
  border: 1.5px solid rgba(56, 189, 248, 0.4);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
html[data-theme="dark"] .autojoin-progress-wrap [data-autojoin-progress-title],
body.dark-mode .autojoin-progress-wrap [data-autojoin-progress-title] {
  color: #F8FAFC !important;
}
html[data-theme="dark"] .autojoin-progress-track,
body.dark-mode .autojoin-progress-track {
  background: rgba(15, 23, 42, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
html[data-theme="dark"] .autojoin-progress-msg,
body.dark-mode .autojoin-progress-msg {
  color: #E2E8F0;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

/* Light Mode */
html:not([data-theme="dark"]) .autojoin-progress-wrap,
html[data-theme="light"] .autojoin-progress-wrap,
body:not(.dark-mode) .autojoin-progress-wrap {
  background: #F0F9FF !important;
  border: 1.5px solid #BAE6FD !important;
  box-shadow: 0 4px 16px rgba(2, 132, 199, 0.1) !important;
}
html:not([data-theme="dark"]) .autojoin-progress-wrap [data-autojoin-progress-title],
html[data-theme="light"] .autojoin-progress-wrap [data-autojoin-progress-title],
body:not(.dark-mode) .autojoin-progress-wrap [data-autojoin-progress-title] {
  color: #0369A1 !important;
}
html:not([data-theme="dark"]) .autojoin-progress-track,
html[data-theme="light"] .autojoin-progress-track,
body:not(.dark-mode) .autojoin-progress-track {
  background: #E0F2FE !important;
  border: 1px solid #BAE6FD !important;
}
html:not([data-theme="dark"]) .autojoin-progress-msg,
html[data-theme="light"] .autojoin-progress-msg,
body:not(.dark-mode) .autojoin-progress-msg {
  color: #0369A1 !important;
  background: #FFFFFF !important;
  border: 1px solid #BAE6FD !important;
}
html:not([data-theme="dark"]) .autojoin-progress-stats,
html[data-theme="light"] .autojoin-progress-stats,
body:not(.dark-mode) .autojoin-progress-stats {
  color: #334155 !important;
}

/* --- 12. MOBILE BOTTOM NAVIGATION DUAL THEME --- */
html:not([data-theme="dark"]) .mobile-bottom-nav,
html[data-theme="light"] .mobile-bottom-nav,
body:not(.dark-mode) .mobile-bottom-nav {
  background: rgba(255, 255, 255, 0.96) !important;
  border-top: 1px solid #E2E8F0 !important;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08) !important;
}
html:not([data-theme="dark"]) .mobile-bottom-item,
html[data-theme="light"] .mobile-bottom-item,
body:not(.dark-mode) .mobile-bottom-item {
  color: #64748B !important;
}
html:not([data-theme="dark"]) .mobile-bottom-item.active,
html[data-theme="light"] .mobile-bottom-item.active,
body:not(.dark-mode) .mobile-bottom-item.active {
  color: #2563EB !important;
}

/* ==========================================================================
   CINEMATIC HERO CANVAS & INTERACTIVE CONSOLE TABS
   ========================================================================== */
.hero-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  opacity: 0.65;
}

.terminal-tab-nav {
  display: flex;
  background: rgba(10, 14, 23, 0.85);
  border-bottom: 1px solid rgba(212, 175, 55, 0.15);
  padding: 4px 8px;
  gap: 6px;
}

.console-tab-btn {
  background: transparent;
  border: none;
  color: var(--vip-text-muted);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.console-tab-btn:hover {
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.05);
}

.console-tab-btn.active {
  color: var(--vip-gold-light);
  background: rgba(212, 175, 55, 0.12);
  border: 1px solid rgba(212, 175, 55, 0.25);
}

.console-tab-panel {
  display: none;
  animation: fadeInPanel 0.25s ease forwards;
}

.console-tab-panel.active {
  display: block;
}

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

/* Telemetry Grid inside Console */
.telemetry-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  padding: 16px;
}

.telemetry-card {
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 12px 14px;
}

.telemetry-label {
  font-size: 0.72rem;
  color: var(--vip-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.telemetry-value {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.15rem;
  font-weight: 700;
  color: #F8FAFC;
}

.telemetry-bar-bg {
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  margin-top: 8px;
  overflow: hidden;
}

.telemetry-bar-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.4s ease;
}

.fill-emerald { background: linear-gradient(90deg, #059669, #10B981); }
.fill-gold { background: linear-gradient(90deg, #D4AF37, #F59E0B); }
.fill-blue { background: linear-gradient(90deg, #2563EB, #38BDF8); }

/* ==========================================================================
   ROI & COST SAVINGS CALCULATOR
   ========================================================================== */
.roi-calculator-wrap {
  background: linear-gradient(145deg, rgba(13, 19, 33, 0.95), rgba(7, 10, 16, 0.98));
  border: 1px solid rgba(212, 175, 55, 0.25);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  border-radius: 20px;
  padding: 36px 40px;
  margin-top: 36px;
  position: relative;
  overflow: hidden;
}

.roi-calculator-wrap::before {
  content: '';
  position: absolute;
  top: -80px;
  right: -80px;
  width: 250px;
  height: 250px;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.12) 0%, transparent 70%);
  pointer-events: none;
}

.roi-slider-container {
  max-width: 650px;
  margin: 0 auto 32px auto;
  text-align: center;
}

.roi-slider-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.roi-slider-label {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--vip-text-secondary);
}

.roi-slider-badge {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--vip-gold-light);
  background: rgba(212, 175, 55, 0.15);
  border: 1px solid rgba(212, 175, 55, 0.35);
  padding: 4px 14px;
  border-radius: 8px;
}

.roi-range-input {
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  outline: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.roi-range-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FFF, var(--vip-gold-light));
  border: 3px solid #070A10;
  box-shadow: 0 0 12px rgba(212, 175, 55, 0.8);
  cursor: grab;
  transition: transform 0.15s ease;
}

.roi-range-input::-webkit-slider-thumb:hover {
  transform: scale(1.18);
}

.roi-ticks-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.72rem;
  color: var(--vip-text-muted);
  margin-top: 8px;
}

.roi-output-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.roi-metric-card {
  background: rgba(15, 23, 42, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 20px 18px;
  text-align: center;
  transition: transform 0.25s ease, border-color 0.25s ease;
}

.roi-metric-card:hover {
  transform: translateY(-3px);
  border-color: rgba(212, 175, 55, 0.3);
}

.roi-metric-card.highlight-gold {
  background: linear-gradient(145deg, rgba(212, 175, 55, 0.12), rgba(15, 23, 42, 0.8));
  border: 1px solid rgba(212, 175, 55, 0.45);
  box-shadow: 0 8px 24px rgba(212, 175, 55, 0.15);
}

.roi-card-icon {
  font-size: 1.5rem;
  margin-bottom: 8px;
}

.roi-card-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.45rem;
  font-weight: 800;
  color: #FFFFFF;
  margin-bottom: 4px;
}

.roi-metric-card.highlight-gold .roi-card-num {
  color: var(--vip-gold-light);
}

.roi-card-label {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--vip-text-secondary);
  margin-bottom: 4px;
}

.roi-card-sub {
  font-size: 0.72rem;
  color: var(--vip-text-muted);
}

.roi-footer-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.roi-cta-text {
  font-size: 0.9rem;
  color: var(--vip-text-secondary);
}

/* ==========================================================================
   TEMPLATE CATEGORY FILTER BAR
   ========================================================================== */
.tpl-filter-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 32px;
}

.tpl-filter-btn {
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--vip-text-secondary);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  padding: 8px 18px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.tpl-filter-btn:hover {
  background: rgba(212, 175, 55, 0.1);
  border-color: rgba(212, 175, 55, 0.35);
  color: #FFFFFF;
}

.tpl-filter-btn.active {
  background: linear-gradient(135deg, var(--vip-gold-dark), var(--vip-gold));
  color: #070A10;
  border-color: transparent;
  box-shadow: 0 4px 14px rgba(212, 175, 55, 0.35);
}

/* ==========================================================================
   FLOATING LIVE BEACON & ACCORDION SMOOTHING
   ========================================================================== */
.floating-live-beacon {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 999;
  background: rgba(10, 14, 23, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(16, 185, 129, 0.4);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  border-radius: 999px;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #F8FAFC;
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.25s ease;
}

.floating-live-beacon:hover {
  transform: translateY(-2px);
  border-color: var(--vip-emerald);
  box-shadow: 0 10px 28px rgba(16, 185, 129, 0.25);
  color: #FFFFFF;
}

.beacon-pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10B981;
  box-shadow: 0 0 8px #10B981;
  animation: beaconPulse 1.8s infinite;
}

@keyframes beaconPulse {
  0% { transform: scale(0.9); opacity: 0.7; }
  50% { transform: scale(1.3); opacity: 1; }
  100% { transform: scale(0.9); opacity: 0.7; }
}

@media (max-width: 768px) {
  .floating-live-beacon {
    display: none;
  }
  .roi-calculator-wrap {
    padding: 24px 18px;
  }
  .roi-output-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .roi-footer-cta {
    flex-direction: column;
    gap: 14px;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .roi-output-grid {
    grid-template-columns: 1fr;
  }
  .telemetry-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   COMPREHENSIVE DUAL-THEME AUDIT & ACCESSIBILITY OVERRIDES (WCAG AAA)
   Ensures 100% readable contrast in both Light Mode and Dark Slate Mode
   ========================================================================== */

/* 1. VIETQR GENERATOR & ONE-TOUCH COPY (IN-PAGE) */
/* Dark Mode */
html[data-theme="dark"] .vietqr-wrapper,
body.dark-mode .vietqr-wrapper {
  background: rgba(15, 23, 42, 0.7) !important;
  border: 1px solid rgba(148, 163, 184, 0.25) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
}
html[data-theme="dark"] .vietqr-wrapper label,
body.dark-mode .vietqr-wrapper label {
  color: #F8FAFC !important;
  font-weight: 600 !important;
}
html[data-theme="dark"] .vietqr-wrapper input,
html[data-theme="dark"] .vietqr-wrapper select,
body.dark-mode .vietqr-wrapper input,
body.dark-mode .vietqr-wrapper select {
  background: rgba(15, 23, 42, 0.9) !important;
  border: 1px solid rgba(148, 163, 184, 0.3) !important;
  color: #F8FAFC !important;
}
html[data-theme="dark"] .vietqr-box,
body.dark-mode .vietqr-box {
  background: #FFFFFF !important;
  border: 2px solid rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}
html[data-theme="dark"] .preset-chip,
body.dark-mode .preset-chip {
  background: rgba(30, 41, 59, 0.8) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: #CBD5E1 !important;
}
html[data-theme="dark"] .preset-chip:hover,
html[data-theme="dark"] .preset-chip.is-selected,
body.dark-mode .preset-chip:hover,
body.dark-mode .preset-chip.is-selected {
  background: #2563EB !important;
  border-color: #38BDF8 !important;
  color: #FFFFFF !important;
  box-shadow: 0 0 10px rgba(37, 99, 235, 0.4) !important;
}
html[data-theme="dark"] .copy-row,
body.dark-mode .copy-row {
  background: rgba(15, 23, 42, 0.75) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #F1F5F9 !important;
}
html[data-theme="dark"] .copy-row span,
html[data-theme="dark"] .copy-row b,
body.dark-mode .copy-row span,
body.dark-mode .copy-row b {
  color: #F1F5F9 !important;
}
html[data-theme="dark"] .copy-row code,
body.dark-mode .copy-row code {
  background: rgba(15, 23, 42, 0.9) !important;
  border: 1px solid rgba(56, 189, 248, 0.3) !important;
  color: #38BDF8 !important;
}
html[data-theme="dark"] .copy-btn,
body.dark-mode .copy-btn {
  background: rgba(30, 41, 59, 0.9) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  color: #38BDF8 !important;
}
html[data-theme="dark"] .copy-btn:hover,
body.dark-mode .copy-btn:hover {
  background: rgba(37, 99, 235, 0.25) !important;
  border-color: #38BDF8 !important;
  color: #FFFFFF !important;
}
html[data-theme="dark"] .copy-btn.copied,
body.dark-mode .copy-btn.copied {
  background: rgba(16, 185, 129, 0.25) !important;
  border-color: #10B981 !important;
  color: #34D399 !important;
}

/* Light Mode */
html:not([data-theme="dark"]) .vietqr-wrapper,
html[data-theme="light"] .vietqr-wrapper,
body:not(.dark-mode) .vietqr-wrapper {
  background: #FFFFFF !important;
  border: 1px solid #CBD5E1 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}
html:not([data-theme="dark"]) .vietqr-wrapper label,
html[data-theme="light"] .vietqr-wrapper label,
body:not(.dark-mode) .vietqr-wrapper label {
  color: #0F172A !important;
  font-weight: 600 !important;
}
html:not([data-theme="dark"]) .vietqr-wrapper input,
html:not([data-theme="dark"]) .vietqr-wrapper select,
html[data-theme="light"] .vietqr-wrapper input,
html[data-theme="light"] .vietqr-wrapper select,
body:not(.dark-mode) .vietqr-wrapper input,
body:not(.dark-mode) .vietqr-wrapper select {
  background: #FFFFFF !important;
  border: 1px solid #CBD5E1 !important;
  color: #0F172A !important;
}
html:not([data-theme="dark"]) .preset-chip,
html[data-theme="light"] .preset-chip,
body:not(.dark-mode) .preset-chip {
  background: #F1F5F9 !important;
  border: 1px solid #CBD5E1 !important;
  color: #334155 !important;
}
html:not([data-theme="dark"]) .preset-chip:hover,
html:not([data-theme="dark"]) .preset-chip.is-selected,
html[data-theme="light"] .preset-chip:hover,
html[data-theme="light"] .preset-chip.is-selected,
body:not(.dark-mode) .preset-chip:hover,
body:not(.dark-mode) .preset-chip.is-selected {
  background: #2563EB !important;
  border-color: #2563EB !important;
  color: #FFFFFF !important;
}
html:not([data-theme="dark"]) .copy-row,
html[data-theme="light"] .copy-row,
body:not(.dark-mode) .copy-row {
  background: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
  color: #0F172A !important;
}
html:not([data-theme="dark"]) .copy-row span,
html:not([data-theme="dark"]) .copy-row b,
html[data-theme="light"] .copy-row span,
html[data-theme="light"] .copy-row b,
body:not(.dark-mode) .copy-row span,
body:not(.dark-mode) .copy-row b {
  color: #0F172A !important;
}
html:not([data-theme="dark"]) .copy-row code,
html[data-theme="light"] .copy-row code,
body:not(.dark-mode) .copy-row code {
  background: #E0F2FE !important;
  border: 1px solid #BAE6FD !important;
  color: #0369A1 !important;
}
html:not([data-theme="dark"]) .copy-btn,
html[data-theme="light"] .copy-btn,
body:not(.dark-mode) .copy-btn {
  background: #FFFFFF !important;
  border: 1px solid #CBD5E1 !important;
  color: #2563EB !important;
}
html:not([data-theme="dark"]) .copy-btn:hover,
html[data-theme="light"] .copy-btn:hover,
body:not(.dark-mode) .copy-btn:hover {
  background: #EFF6FF !important;
  border-color: #2563EB !important;
}
html:not([data-theme="dark"]) .copy-btn.copied,
html[data-theme="light"] .copy-btn.copied,
body:not(.dark-mode) .copy-btn.copied {
  background: #DCFCE7 !important;
  border-color: #86EFAC !important;
  color: #15803D !important;
}

/* 2. MINI STATS (WORKSPACE PROFILE / SUMMARY - ELEVATED KPI TILES) */
.mini-stats {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 14px !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
}

.mini-stats > div {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  padding: 16px 18px;
  text-align: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.mini-stats > div:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

.mini-stats div b {
  display: block;
  font-size: 1.55rem !important;
  font-weight: 800 !important;
  line-height: 1.15;
  margin-bottom: 4px;
}

.mini-stats div span {
  font-size: 0.8rem !important;
  font-weight: 600;
  color: #64748B !important;
  display: block;
}

/* Light Mode Semantic Colors */
html:not([data-theme="dark"]) .mini-stats > div,
html[data-theme="light"] .mini-stats > div,
body:not(.dark-mode) .mini-stats > div {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
}

/* Card 1: Groups synced - Indigo */
html:not([data-theme="dark"]) .mini-stats > div:nth-child(1) b,
html[data-theme="light"] .mini-stats > div:nth-child(1) b,
body:not(.dark-mode) .mini-stats > div:nth-child(1) b {
  color: #4F46E5 !important;
}

/* Card 2: Queued - Sky / Cyan */
html:not([data-theme="dark"]) .mini-stats > div:nth-child(2) b,
html[data-theme="light"] .mini-stats > div:nth-child(2) b,
body:not(.dark-mode) .mini-stats > div:nth-child(2) b {
  color: #0284C7 !important;
}

/* Card 3: Sent - Emerald */
html:not([data-theme="dark"]) .mini-stats > div:nth-child(3) b,
html[data-theme="light"] .mini-stats > div:nth-child(3) b,
body:not(.dark-mode) .mini-stats > div:nth-child(3) b {
  color: #16A34A !important;
}

/* Card 4: Failed - Crimson */
html:not([data-theme="dark"]) .mini-stats > div:nth-child(4) b,
html[data-theme="light"] .mini-stats > div:nth-child(4) b,
body:not(.dark-mode) .mini-stats > div:nth-child(4) b {
  color: #DC2626 !important;
}

/* Dark Mode Semantic Colors */
html[data-theme="dark"] .mini-stats > div,
body.dark-mode .mini-stats > div {
  background: #141B2D !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25) !important;
}

html[data-theme="dark"] .mini-stats > div:hover,
body.dark-mode .mini-stats > div:hover {
  border-color: rgba(255, 255, 255, 0.18) !important;
}

html[data-theme="dark"] .mini-stats div span,
body.dark-mode .mini-stats div span {
  color: #94A3B8 !important;
}

html[data-theme="dark"] .mini-stats > div:nth-child(1) b,
body.dark-mode .mini-stats > div:nth-child(1) b {
  color: #818CF8 !important; /* Soft Indigo */
}

html[data-theme="dark"] .mini-stats > div:nth-child(2) b,
body.dark-mode .mini-stats > div:nth-child(2) b {
  color: #38BDF8 !important; /* Soft Sky */
}

html[data-theme="dark"] .mini-stats > div:nth-child(3) b,
body.dark-mode .mini-stats > div:nth-child(3) b {
  color: #34D399 !important; /* Soft Emerald */
}

html[data-theme="dark"] .mini-stats > div:nth-child(4) b,
body.dark-mode .mini-stats > div:nth-child(4) b {
  color: #F87171 !important; /* Soft Crimson */
}

/* 3. MINI TOGGLE GRIDS (CHECKBOXES / SWITCH GRIDS) */
html[data-theme="dark"] .mini-toggle-grid,
body.dark-mode .mini-toggle-grid {
  background: rgba(15, 23, 42, 0.65) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}
html[data-theme="dark"] .mini-toggle-grid label,
html[data-theme="dark"] .mini-toggle-grid .check,
body.dark-mode .mini-toggle-grid label,
body.dark-mode .mini-toggle-grid .check {
  color: #F8FAFC !important;
}

html:not([data-theme="dark"]) .mini-toggle-grid,
html[data-theme="light"] .mini-toggle-grid,
body:not(.dark-mode) .mini-toggle-grid {
  background: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
}
html:not([data-theme="dark"]) .mini-toggle-grid label,
html:not([data-theme="dark"]) .mini-toggle-grid .check,
html[data-theme="light"] .mini-toggle-grid label,
html[data-theme="light"] .mini-toggle-grid .check,
body:not(.dark-mode) .mini-toggle-grid label,
body:not(.dark-mode) .mini-toggle-grid .check {
  color: #0F172A !important;
}

/* 4. EXPIRY ALERT BANNER */
html[data-theme="dark"] .expiry-alert-banner,
body.dark-mode .expiry-alert-banner {
  background: rgba(245, 158, 11, 0.12) !important;
  border: 1px solid rgba(245, 158, 11, 0.35) !important;
  border-left: 4px solid #F59E0B !important;
}
html[data-theme="dark"] .expiry-alert-banner p,
body.dark-mode .expiry-alert-banner p {
  color: #FCD34D !important;
}

html:not([data-theme="dark"]) .expiry-alert-banner,
html[data-theme="light"] .expiry-alert-banner,
body:not(.dark-mode) .expiry-alert-banner {
  background: #FFFBEB !important;
  border: 1px solid #FDE68A !important;
  border-left: 4px solid #D97706 !important;
}
html:not([data-theme="dark"]) .expiry-alert-banner p,
html[data-theme="light"] .expiry-alert-banner p,
body:not(.dark-mode) .expiry-alert-banner p {
  color: #92400E !important;
}

/* 5. DASHBOARD NOTICE MODAL */
html[data-theme="dark"] .dashboard-notice-modal .dashboard-notice-body,
body.dark-mode .dashboard-notice-modal .dashboard-notice-body {
  background: rgba(15, 23, 42, 0.75) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #F1F5F9 !important;
}

html:not([data-theme="dark"]) .dashboard-notice-modal .dashboard-notice-body,
html[data-theme="light"] .dashboard-notice-modal .dashboard-notice-body,
body:not(.dark-mode) .dashboard-notice-modal .dashboard-notice-body {
  background: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
  color: #1E293B !important;
}

/* 6. SALE CHIPS */
html[data-theme="dark"] .sale-chip,
body.dark-mode .sale-chip {
  background: rgba(30, 41, 59, 0.7) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #CBD5E1 !important;
}

html:not([data-theme="dark"]) .sale-chip,
html[data-theme="light"] .sale-chip,
body:not(.dark-mode) .sale-chip {
  background: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
  color: #334155 !important;
}

/* 7. API STATUS WIDGET */
html[data-theme="dark"] .api-status-widget,
body.dark-mode .api-status-widget {
  background: rgba(15, 23, 42, 0.65) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}
html[data-theme="dark"] .api-status-widget small,
html[data-theme="dark"] .api-status-widget input,
body.dark-mode .api-status-widget small,
body.dark-mode .api-status-widget input {
  color: #CBD5E1 !important;
}

html:not([data-theme="dark"]) .api-status-widget,
html[data-theme="light"] .api-status-widget,
body:not(.dark-mode) .api-status-widget {
  background: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
}
html:not([data-theme="dark"]) .api-status-widget small,
html[data-theme="light"] .api-status-widget small,
body:not(.dark-mode) .api-status-widget small {
  color: #475569 !important;
}

/* 8. STATUS BADGE (NOT LOGGED IN) */
html[data-theme="dark"] .status-not_logged_in,
body.dark-mode .status-not_logged_in {
  background: rgba(148, 163, 184, 0.15) !important;
  color: #94A3B8 !important;
  border: 1px solid rgba(148, 163, 184, 0.25) !important;
}

html:not([data-theme="dark"]) .status-not_logged_in,
html[data-theme="light"] .status-not_logged_in,
body:not(.dark-mode) .status-not_logged_in {
  background: #F1F5F9 !important;
  color: #475569 !important;
  border: 1px solid #CBD5E1 !important;
}

/* 9. ADMIN SIDEBAR & MOBILE NAVIGATION BUTTONS */
html[data-theme="dark"] .admin-sidebar,
body.dark-mode .admin-sidebar {
  background: #0C101C !important;
  border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
}
html[data-theme="dark"] .mobile-menu-btn,
body.dark-mode .mobile-menu-btn {
  background: rgba(15, 23, 42, 0.8) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: #F8FAFC !important;
}
html[data-theme="dark"] .sidebar-close-btn,
body.dark-mode .sidebar-close-btn {
  background: rgba(15, 23, 42, 0.8) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: #CBD5E1 !important;
}

html:not([data-theme="dark"]) .admin-sidebar,
html[data-theme="light"] .admin-sidebar,
body:not(.dark-mode) .admin-sidebar {
  background: #FFFFFF !important;
  border-right: 1px solid #E2E8F0 !important;
}
html:not([data-theme="dark"]) .mobile-menu-btn,
html[data-theme="light"] .mobile-menu-btn,
body:not(.dark-mode) .mobile-menu-btn {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  color: #0F172A !important;
}
html:not([data-theme="dark"]) .sidebar-close-btn,
html[data-theme="light"] .sidebar-close-btn,
body:not(.dark-mode) .sidebar-close-btn {
  background: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
  color: #334155 !important;
}

/* ==========================================================================
   LOOKUP FRIENDS & USER INFO RICH CARDS
   ========================================================================== */
.lookup-friends-container {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.lookup-friends-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding: 8px 12px;
  background: rgba(15, 23, 42, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
}

.lookup-search-wrap {
  flex: 1;
  min-width: 220px;
  position: relative;
  display: flex;
  align-items: center;
}

.lookup-search-icon {
  position: absolute;
  left: 10px;
  font-size: 0.85rem;
  opacity: 0.6;
  pointer-events: none;
}

.lookup-search-input {
  width: 100%;
  padding: 7px 12px 7px 32px !important;
  border-radius: 8px !important;
  font-size: 0.82rem !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  background: rgba(0, 0, 0, 0.25) !important;
  color: #F8FAFC !important;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.lookup-search-input:focus {
  border-color: #0EA5E9 !important;
  box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.25) !important;
  outline: none;
}

.lookup-actions-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lookup-friends-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px;
  max-height: 520px;
  overflow-y: auto;
  padding: 4px 2px;
}

.lookup-friends-grid::-webkit-scrollbar {
  width: 6px;
}

.lookup-friends-grid::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 4px;
}

.friend-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
  position: relative;
}

.friend-card:hover {
  transform: translateY(-2px);
  border-color: rgba(14, 165, 233, 0.45);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}

.friend-card-avatar-wrap {
  position: relative;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
}

.friend-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.15);
  background: #1E293B;
  display: block;
}

.friend-avatar-placeholder {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0EA5E9, #6366F1);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.1rem;
  border: 2px solid rgba(255, 255, 255, 0.2);
}

.friend-gender-badge {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  font-size: 0.62rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #0F172A;
}

.friend-gender-badge.male {
  background: #0284C7;
  color: #FFFFFF;
}

.friend-gender-badge.female {
  background: #EC4899;
  color: #FFFFFF;
}

.friend-card-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.friend-card-header {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}

.friend-name {
  font-weight: 600;
  font-size: 0.88rem;
  color: #F8FAFC;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
}

.friend-username {
  font-size: 0.72rem;
  color: #38BDF8;
  font-weight: 500;
}

.friend-zname {
  font-size: 0.72rem;
  color: #94A3B8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.friend-uid-row {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
}

.friend-uid {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.74rem;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.35);
  color: #CBD5E1;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.btn-copy-sm {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 2px 4px;
  font-size: 0.78rem;
  opacity: 0.65;
  border-radius: 4px;
  transition: opacity 0.15s, background-color 0.15s;
}

.btn-copy-sm:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.12);
}

.friend-bio {
  font-size: 0.72rem;
  color: #94A3B8;
  font-style: italic;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}

.friend-card-actions {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}

.friend-card-actions .btn {
  padding: 3px 8px !important;
  font-size: 0.72rem !important;
  border-radius: 6px !important;
}

/* User Profile Card */
.user-profile-card {
  margin-top: 12px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(15, 23, 42, 0.6);
}

.user-profile-cover {
  height: 110px;
  background: linear-gradient(135deg, #0284C7, #6366F1);
  background-size: cover;
  background-position: center;
  position: relative;
}

.user-profile-header {
  padding: 0 16px 14px;
  margin-top: -36px;
  display: flex;
  align-items: flex-end;
  gap: 14px;
}

.user-profile-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #0F172A;
  background: #1E293B;
  flex-shrink: 0;
}

.user-profile-avatar-placeholder {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 3px solid #0F172A;
  background: linear-gradient(135deg, #0EA5E9, #6366F1);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.8rem;
  flex-shrink: 0;
}

.user-profile-info {
  flex: 1;
  min-width: 0;
}

.user-profile-name {
  font-size: 1.1rem;
  font-weight: 700;
  color: #F8FAFC;
  margin: 0;
}

.user-profile-details {
  padding: 12px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
  font-size: 0.82rem;
}

.user-detail-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.user-detail-label {
  font-size: 0.72rem;
  color: #94A3B8;
}

.user-detail-value {
  font-weight: 500;
  color: #F1F5F9;
}

/* Avatar Preview Card */
.avatar-preview-card {
  margin-top: 12px;
  text-align: center;
  padding: 24px;
  background: rgba(15, 23, 42, 0.6);
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.avatar-preview-img {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #0EA5E9;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

/* Light Mode Support */
html:not([data-theme="dark"]) .lookup-friends-toolbar,
html[data-theme="light"] .lookup-friends-toolbar,
body:not(.dark-mode) .lookup-friends-toolbar {
  background: #F8FAFC !important;
  border-color: #E2E8F0 !important;
}

html:not([data-theme="dark"]) .lookup-search-input,
html[data-theme="light"] .lookup-search-input,
body:not(.dark-mode) .lookup-search-input {
  background: #FFFFFF !important;
  border-color: #CBD5E1 !important;
  color: #0F172A !important;
}

html:not([data-theme="dark"]) .friend-card,
html[data-theme="light"] .friend-card,
body:not(.dark-mode) .friend-card {
  background: #FFFFFF !important;
  border-color: #E2E8F0 !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04) !important;
}

html:not([data-theme="dark"]) .friend-card:hover,
html[data-theme="light"] .friend-card:hover,
body:not(.dark-mode) .friend-card:hover {
  border-color: #0EA5E9 !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08) !important;
}

html:not([data-theme="dark"]) .friend-name,
html[data-theme="light"] .friend-name,
body:not(.dark-mode) .friend-name {
  color: #0F172A !important;
}

html:not([data-theme="dark"]) .friend-uid,
html[data-theme="light"] .friend-uid,
body:not(.dark-mode) .friend-uid {
  background: #F1F5F9 !important;
  border-color: #E2E8F0 !important;
  color: #334155 !important;
}

html:not([data-theme="dark"]) .friend-avatar,
html[data-theme="light"] .friend-avatar,
body:not(.dark-mode) .friend-avatar {
  border-color: #E2E8F0 !important;
  background: #F1F5F9 !important;
}

html:not([data-theme="dark"]) .friend-gender-badge,
html[data-theme="light"] .friend-gender-badge,
body:not(.dark-mode) .friend-gender-badge {
  border-color: #FFFFFF !important;
}

html:not([data-theme="dark"]) .user-profile-card,
html[data-theme="light"] .user-profile-card,
body:not(.dark-mode) .user-profile-card,
html:not([data-theme="dark"]) .avatar-preview-card,
html[data-theme="light"] .avatar-preview-card,
body:not(.dark-mode) .avatar-preview-card {
  background: #FFFFFF !important;
  border-color: #E2E8F0 !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04) !important;
}

html:not([data-theme="dark"]) .user-profile-avatar,
html[data-theme="light"] .user-profile-avatar,
body:not(.dark-mode) .user-profile-avatar {
  border-color: #FFFFFF !important;
}

html:not([data-theme="dark"]) .user-profile-name,
html[data-theme="light"] .user-profile-name,
body:not(.dark-mode) .user-profile-name {
  color: #0F172A !important;
}

html:not([data-theme="dark"]) .user-detail-value,
html[data-theme="light"] .user-detail-value,
body:not(.dark-mode) .user-detail-value {
  color: #1E293B !important;
}

/* Friend Requests Lookup Cards & Actions */
.lookup-friendreq-container {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.lookup-friendreq-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding: 8px 12px;
  background: rgba(15, 23, 42, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
}

.lookup-friendreq-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 12px;
  max-height: 560px;
  overflow-y: auto;
  padding: 4px 2px;
}

.lookup-friendreq-grid::-webkit-scrollbar {
  width: 6px;
}

.lookup-friendreq-grid::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 4px;
}

.friendreq-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px;
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, opacity 0.2s ease;
  position: relative;
}

.friendreq-card:hover {
  transform: translateY(-2px);
  border-color: rgba(14, 165, 233, 0.45);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.friendreq-card-avatar-wrap {
  position: relative;
  width: 50px;
  height: 50px;
  flex-shrink: 0;
}

.friendreq-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.15);
  background: #1E293B;
  display: block;
}

.friendreq-avatar-placeholder {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0EA5E9, #8B5CF6);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.15rem;
  border: 2px solid rgba(255, 255, 255, 0.2);
}

.friendreq-card-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.friendreq-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  flex-wrap: wrap;
}

.friendreq-name {
  font-weight: 600;
  font-size: 0.9rem;
  color: #F8FAFC;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 190px;
}

.friendreq-zname {
  font-size: 0.72rem;
  color: #94A3B8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.friendreq-msg-bubble {
  margin-top: 4px;
  padding: 8px 10px;
  background: rgba(14, 165, 233, 0.08);
  border-left: 3px solid #0EA5E9;
  border-radius: 0 8px 8px 0;
  font-size: 0.78rem;
  color: #E2E8F0;
  line-height: 1.4;
  word-break: break-word;
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.friendreq-msg-icon {
  flex-shrink: 0;
  font-size: 0.85rem;
}

.friendreq-msg-text {
  font-style: italic;
}

.friendreq-time-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.7rem;
  color: #64748B;
  margin-top: 2px;
}

.friendreq-card-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.btn-friend-accept {
  background: linear-gradient(135deg, #10B981, #059669) !important;
  color: #FFFFFF !important;
  border: 1px solid #059669 !important;
  font-weight: 600 !important;
  padding: 5px 12px !important;
  font-size: 0.75rem !important;
  border-radius: 6px !important;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.15s, box-shadow 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.btn-friend-accept:hover {
  opacity: 0.92;
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(16, 185, 129, 0.35);
}

.btn-friend-reject {
  background: rgba(239, 68, 68, 0.1) !important;
  color: #F87171 !important;
  border: 1px solid rgba(239, 68, 68, 0.35) !important;
  font-weight: 500 !important;
  padding: 5px 12px !important;
  font-size: 0.75rem !important;
  border-radius: 6px !important;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, transform 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.btn-friend-reject:hover {
  background: rgba(239, 68, 68, 0.22) !important;
  color: #FECACA !important;
  transform: translateY(-1px);
}

.friendreq-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
}

.friendreq-status-badge.accepted {
  background: rgba(16, 185, 129, 0.15);
  color: #34D399;
  border: 1px solid rgba(16, 185, 129, 0.35);
}

.friendreq-status-badge.rejected {
  background: rgba(239, 68, 68, 0.15);
  color: #F87171;
  border: 1px solid rgba(239, 68, 68, 0.35);
}

/* Light mode for Friend Requests */
html:not([data-theme="dark"]) .lookup-friendreq-toolbar,
html[data-theme="light"] .lookup-friendreq-toolbar,
body:not(.dark-mode) .lookup-friendreq-toolbar {
  background: #F8FAFC !important;
  border-color: #E2E8F0 !important;
}

html:not([data-theme="dark"]) .friendreq-card,
html[data-theme="light"] .friendreq-card,
body:not(.dark-mode) .friendreq-card {
  background: #FFFFFF !important;
  border-color: #E2E8F0 !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04) !important;
}

html:not([data-theme="dark"]) .friendreq-card:hover,
html[data-theme="light"] .friendreq-card:hover,
body:not(.dark-mode) .friendreq-card:hover {
  border-color: #0EA5E9 !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08) !important;
}

html:not([data-theme="dark"]) .friendreq-name,
html[data-theme="light"] .friendreq-name,
body:not(.dark-mode) .friendreq-name {
  color: #0F172A !important;
}

html:not([data-theme="dark"]) .friendreq-avatar,
html[data-theme="light"] .friendreq-avatar,
body:not(.dark-mode) .friendreq-avatar {
  border-color: #E2E8F0 !important;
  background: #F1F5F9 !important;
}

html:not([data-theme="dark"]) .friendreq-msg-bubble,
html[data-theme="light"] .friendreq-msg-bubble,
body:not(.dark-mode) .friendreq-msg-bubble {
  background: #F0F9FF !important;
  border-left-color: #0284C7 !important;
  color: #0F172A !important;
}

html:not([data-theme="dark"]) .friendreq-card-actions,
html[data-theme="light"] .friendreq-card-actions,
body:not(.dark-mode) .friendreq-card-actions {
  border-top-color: #E2E8F0 !important;
}

/* ==========================================================================
   MODAL OVERLAYS & USERINFO PREVIEW MODAL
   ========================================================================== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10005;
  padding: 16px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.22s ease, visibility 0.22s ease;
}

.modal-overlay.show,
.modal-overlay.is-open {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.modal-overlay .modal-card {
  transform: scale(0.94) translateY(12px);
  transition: transform 0.24s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.modal-overlay.show .modal-card,
.modal-overlay.is-open .modal-card {
  transform: scale(1) translateY(0) !important;
}

.userinfo-modal-card {
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.12) !important;
}

html:not([data-theme="dark"]) .userinfo-modal-card,
html[data-theme="light"] .userinfo-modal-card,
body:not(.dark-mode) .userinfo-modal-card {
  background: #FFFFFF !important;
  border-color: #E2E8F0 !important;
}

html:not([data-theme="dark"]) #uinfo-modal-name,
html[data-theme="light"] #uinfo-modal-name,
body:not(.dark-mode) #uinfo-modal-name {
  color: #0F172A !important;
}

html:not([data-theme="dark"]) #uinfo-modal-zname,
html:not([data-theme="dark"]) #uinfo-modal-gender,
html:not([data-theme="dark"]) #uinfo-modal-dob,
html[data-theme="light"] #uinfo-modal-zname,
html[data-theme="light"] #uinfo-modal-gender,
html[data-theme="light"] #uinfo-modal-dob,
body:not(.dark-mode) #uinfo-modal-zname,
body:not(.dark-mode) #uinfo-modal-gender,
body:not(.dark-mode) #uinfo-modal-dob {
  color: #1E293B !important;
}

/* ==========================================================================
   ACCOUNT WORKSPACE HARMONIOUS THEME SYSTEM (LIGHT & DARK MODE)
   ========================================================================== */

/* 1. WORKSPACE HERO BANNER */
html:not([data-theme="dark"]) .account-workspace-hero,
html[data-theme="light"] .account-workspace-hero,
body:not(.dark-mode) .account-workspace-hero,
body.theme-light .account-workspace-hero {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 2px 8px -2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04) !important;
  color: #0F172A !important;
}

html:not([data-theme="dark"]) .account-workspace-hero h2,
html[data-theme="light"] .account-workspace-hero h2,
body:not(.dark-mode) .account-workspace-hero h2,
body.theme-light .account-workspace-hero h2 {
  color: #0F172A !important;
  font-weight: 800 !important;
}

html:not([data-theme="dark"]) .account-workspace-hero .muted,
html[data-theme="light"] .account-workspace-hero .muted,
body:not(.dark-mode) .account-workspace-hero .muted,
body.theme-light .account-workspace-hero .muted {
  color: #475569 !important;
}

html:not([data-theme="dark"]) .account-workspace-hero code,
html[data-theme="light"] .account-workspace-hero code,
body:not(.dark-mode) .account-workspace-hero code,
body.theme-light .account-workspace-hero code {
  background: #F1F5F9 !important;
  color: #1E293B !important;
  border: 1px solid #CBD5E1 !important;
  font-weight: 600 !important;
}

html[data-theme="dark"] .account-workspace-hero,
body.dark-mode .account-workspace-hero {
  background: linear-gradient(180deg, rgba(20, 30, 48, 0.88) 0%, rgba(12, 18, 32, 0.96) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  color: #F8FAFC !important;
}

html[data-theme="dark"] .account-workspace-hero h2,
body.dark-mode .account-workspace-hero h2 {
  color: #F8FAFC !important;
  font-weight: 800 !important;
}

html[data-theme="dark"] .account-workspace-hero .muted,
body.dark-mode .account-workspace-hero .muted {
  color: #94A3B8 !important;
}

html[data-theme="dark"] .account-workspace-hero code,
body.dark-mode .account-workspace-hero code {
  background: rgba(15, 23, 42, 0.8) !important;
  color: #38BDF8 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.account-workspace-hero .account-avatar {
  width: 44px !important;
  height: 44px !important;
  font-size: 1.15rem !important;
  font-weight: 800 !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, #2563EB 0%, #0284C7 100%) !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.28) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

/* 2. GHOST BUTTONS IN WORKSPACE */
html:not([data-theme="dark"]) .account-workspace-shell .btn.ghost,
html[data-theme="light"] .account-workspace-shell .btn.ghost,
body:not(.dark-mode) .account-workspace-shell .btn.ghost,
body.theme-light .account-workspace-shell .btn.ghost,
html:not([data-theme="dark"]) .button-row .btn.ghost,
html[data-theme="light"] .button-row .btn.ghost,
body:not(.dark-mode) .button-row .btn.ghost,
body.theme-light .button-row .btn.ghost {
  background: #F8FAFC !important;
  border: 1px solid #CBD5E1 !important;
  color: #1E293B !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

html:not([data-theme="dark"]) .account-workspace-shell .btn.ghost:hover,
html[data-theme="light"] .account-workspace-shell .btn.ghost:hover,
body:not(.dark-mode) .account-workspace-shell .btn.ghost:hover,
body.theme-light .account-workspace-shell .btn.ghost:hover,
html:not([data-theme="dark"]) .button-row .btn.ghost:hover,
html[data-theme="light"] .button-row .btn.ghost:hover,
body:not(.dark-mode) .button-row .btn.ghost:hover,
body.theme-light .button-row .btn.ghost:hover {
  background: #E2E8F0 !important;
  border-color: #94A3B8 !important;
  color: #0F172A !important;
}

/* 3. DANGER BUTTON IN WORKSPACE */
html:not([data-theme="dark"]) .account-workspace-shell .btn.danger,
html[data-theme="light"] .account-workspace-shell .btn.danger,
body:not(.dark-mode) .account-workspace-shell .btn.danger,
body.theme-light .account-workspace-shell .btn.danger {
  background: #FEE2E2 !important;
  border: 1px solid #FCA5A5 !important;
  color: #DC2626 !important;
  font-weight: 700 !important;
}

html:not([data-theme="dark"]) .account-workspace-shell .btn.danger:hover,
html[data-theme="light"] .account-workspace-shell .btn.danger:hover,
body:not(.dark-mode) .account-workspace-shell .btn.danger:hover,
body.theme-light .account-workspace-shell .btn.danger:hover {
  background: #FCA5A5 !important;
  color: #991B1B !important;
}

html[data-theme="dark"] .account-workspace-shell .btn.danger,
body.dark-mode .account-workspace-shell .btn.danger {
  background: rgba(239, 68, 68, 0.15) !important;
  border: 1px solid rgba(239, 68, 68, 0.4) !important;
  color: #F87171 !important;
  font-weight: 700 !important;
}

/* 4. WORKSPACE CARDS COLOR HARMONY IN LIGHT MODE */
html:not([data-theme="dark"]) .account-workspace-shell .card,
html[data-theme="light"] .account-workspace-shell .card,
body:not(.dark-mode) .account-workspace-shell .card,
body.theme-light .account-workspace-shell .card,
html:not([data-theme="dark"]) #accountAutomationContent .card,
html[data-theme="light"] #accountAutomationContent .card,
body:not(.dark-mode) #accountAutomationContent .card,
body.theme-light #accountAutomationContent .card {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  color: #0F172A !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

/* Accented subtle colored borders for themed cards in Light Mode */
html:not([data-theme="dark"]) .card-theme-indigo,
html[data-theme="light"] .card-theme-indigo,
body:not(.dark-mode) .card-theme-indigo,
body.theme-light .card-theme-indigo {
  border-top: 3px solid #6366F1 !important;
}

html:not([data-theme="dark"]) .card-theme-rose,
html[data-theme="light"] .card-theme-rose,
body:not(.dark-mode) .card-theme-rose,
body.theme-light .card-theme-rose {
  border-top: 3px solid #F43F5E !important;
}

html:not([data-theme="dark"]) .card-theme-cyan,
html[data-theme="light"] .card-theme-cyan,
body:not(.dark-mode) .card-theme-cyan,
body.theme-light .card-theme-cyan {
  border-top: 3px solid #06B6D4 !important;
}

html:not([data-theme="dark"]) .card-theme-emerald,
html[data-theme="light"] .card-theme-emerald,
body:not(.dark-mode) .card-theme-emerald,
body.theme-light .card-theme-emerald {
  border-top: 3px solid #10B981 !important;
}

html:not([data-theme="dark"]) .card-theme-purple,
html[data-theme="light"] .card-theme-purple,
body:not(.dark-mode) .card-theme-purple,
body.theme-light .card-theme-purple {
  border-top: 3px solid #8B5CF6 !important;
}

html:not([data-theme="dark"]) .card-theme-amber,
html[data-theme="light"] .card-theme-amber,
body:not(.dark-mode) .card-theme-amber,
body.theme-light .card-theme-amber {
  border-top: 3px solid #F59E0B !important;
}

html:not([data-theme="dark"]) .card-theme-crimson,
html[data-theme="light"] .card-theme-crimson,
body:not(.dark-mode) .card-theme-crimson,
body.theme-light .card-theme-crimson {
  border-top: 3px solid #EF4444 !important;
}

/* 5. TABLES IN WORKSPACE LIGHT MODE */
html:not([data-theme="dark"]) .account-workspace-shell .table-wrap,
html[data-theme="light"] .account-workspace-shell .table-wrap,
body:not(.dark-mode) .account-workspace-shell .table-wrap,
body.theme-light .account-workspace-shell .table-wrap,
html:not([data-theme="dark"]) #accountAutomationContent .table-wrap,
html[data-theme="light"] #accountAutomationContent .table-wrap,
body:not(.dark-mode) #accountAutomationContent .table-wrap,
body.theme-light #accountAutomationContent .table-wrap {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
}

html:not([data-theme="dark"]) .account-workspace-shell table th,
html[data-theme="light"] .account-workspace-shell table th,
body:not(.dark-mode) .account-workspace-shell table th,
body.theme-light .account-workspace-shell table th,
html:not([data-theme="dark"]) #accountAutomationContent table th,
html[data-theme="light"] #accountAutomationContent table th,
body:not(.dark-mode) #accountAutomationContent table th,
body.theme-light #accountAutomationContent table th {
  background: #F8FAFC !important;
  color: #334155 !important;
  border-bottom: 1px solid #E2E8F0 !important;
  font-weight: 700 !important;
}

html:not([data-theme="dark"]) .account-workspace-shell table td,
html[data-theme="light"] .account-workspace-shell table td,
body:not(.dark-mode) .account-workspace-shell table td,
body.theme-light .account-workspace-shell table td,
html:not([data-theme="dark"]) #accountAutomationContent table td,
html[data-theme="light"] #accountAutomationContent table td,
body:not(.dark-mode) #accountAutomationContent table td,
body.theme-light #accountAutomationContent table td {
  background: #FFFFFF !important;
  color: #0F172A !important;
  border-bottom: 1px solid #F1F5F9 !important;
}

/* 6. INPUTS & TEXTAREAS IN WORKSPACE */
html:not([data-theme="dark"]) .account-workspace-shell input,
html:not([data-theme="dark"]) .account-workspace-shell textarea,
html:not([data-theme="dark"]) .account-workspace-shell select,
html[data-theme="light"] .account-workspace-shell input,
html[data-theme="light"] .account-workspace-shell textarea,
html[data-theme="light"] .account-workspace-shell select,
body:not(.dark-mode) .account-workspace-shell input,
body:not(.dark-mode) .account-workspace-shell textarea,
body:not(.dark-mode) .account-workspace-shell select,
body.theme-light .account-workspace-shell input,
body.theme-light .account-workspace-shell textarea,
body.theme-light .account-workspace-shell select {
  background: #FFFFFF !important;
  border: 1px solid #CBD5E1 !important;
  color: #0F172A !important;
}

html:not([data-theme="dark"]) .account-workspace-shell input:focus,
html:not([data-theme="dark"]) .account-workspace-shell textarea:focus,
html:not([data-theme="dark"]) .account-workspace-shell select:focus,
html[data-theme="light"] .account-workspace-shell input:focus,
html[data-theme="light"] .account-workspace-shell textarea:focus,
html[data-theme="light"] .account-workspace-shell select:focus,
body:not(.dark-mode) .account-workspace-shell input:focus,
body:not(.dark-mode) .account-workspace-shell textarea:focus,
body:not(.dark-mode) .account-workspace-shell select:focus,
body.theme-light .account-workspace-shell input:focus,
body.theme-light .account-workspace-shell textarea:focus,
body.theme-light .account-workspace-shell select:focus {
  border-color: #2563EB !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;
}

/* ==========================================================================
   7. WORKSPACE FORM SUBMIT BUTTONS & BALANCED CARD GRID
   ========================================================================== */
/* Prevent form submit buttons from stretching to 1100px */
.account-workspace-shell form > button[type="submit"]:not(.wide),
.account-workspace-shell .form-grid > button[type="submit"]:not(.wide),
#accountAutomationContent form > button[type="submit"]:not(.wide),
#accountAutomationContent .form-grid > button[type="submit"]:not(.wide) {
  align-self: flex-start !important;
  width: auto !important;
  min-width: 190px !important;
  padding: 10px 24px !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  font-size: 0.88rem !important;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25) !important;
  cursor: pointer !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

.account-workspace-shell form > button[type="submit"]:hover,
#accountAutomationContent form > button[type="submit"]:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.35) !important;
}

/* Specific buttons inside form grids */
#badwords {
  display: flex !important;
  flex-direction: column !important;
}

#badwords form {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
}

#badwords form label:has(textarea) {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
}

#badwords form textarea {
  flex: 1 !important;
  min-height: 250px !important;
}

/* Workspace action buttons row polish */
.compact-row .btn {
  border-radius: 8px !important;
  font-weight: 600 !important;
  padding: 7px 14px !important;
  font-size: 0.84rem !important;
  transition: all 0.18s ease !important;
}

.compact-row .btn:hover {
  transform: translateY(-1px);
}

.compact-row .btn-action-stop {
  color: #EF4444 !important;
  border-color: rgba(239, 68, 68, 0.35) !important;
  background: transparent !important;
}

.compact-row .btn-action-stop:hover {
  background: rgba(239, 68, 68, 0.1) !important;
  border-color: #EF4444 !important;
}

html[data-theme="dark"] .compact-row .btn.ghost,
body.dark-mode .compact-row .btn.ghost {
  background: rgba(30, 41, 59, 0.8) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #E2E8F0 !important;
}

html[data-theme="dark"] .compact-row .btn.ghost:hover,
body.dark-mode .compact-row .btn.ghost:hover {
  background: rgba(51, 65, 85, 0.9) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
  color: #FFFFFF !important;
}





/* ==========================================================================
   DYNAMIC 3D GIF ROLE BADGES & KPI ICON SUITE
   ========================================================================== */
.role-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.2;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  transition: all 0.2s ease;
  white-space: nowrap;
}
.role-badge-pill:hover {
  transform: translateY(-1px);
}

.role-badge-pill.role-admin {
  background: rgba(245, 158, 11, 0.16);
  border: 1px solid rgba(245, 158, 11, 0.45);
  color: #F59E0B;
  box-shadow: 0 2px 10px rgba(245, 158, 11, 0.2);
}
.role-badge-pill.role-support {
  background: rgba(2, 132, 199, 0.16);
  border: 1px solid rgba(56, 189, 248, 0.45);
  color: #38BDF8;
  box-shadow: 0 2px 10px rgba(56, 189, 248, 0.2);
}
.role-badge-pill.role-user {
  background: rgba(16, 185, 129, 0.14);
  border: 1px solid rgba(16, 185, 129, 0.38);
  color: #34D399;
  box-shadow: 0 2px 10px rgba(16, 185, 129, 0.15);
}
.role-badge-pill.role-vip {
  background: rgba(168, 85, 247, 0.16);
  border: 1px solid rgba(168, 85, 247, 0.45);
  color: #C084FC;
  box-shadow: 0 2px 10px rgba(168, 85, 247, 0.2);
}

.role-table-icon,
.role-badge-gif {
  width: 18px;
  height: 18px;
  object-fit: contain;
  vertical-align: middle;
  flex-shrink: 0;
  display: inline-block;
}

.kpi-icon-gif {
  width: 32px;
  height: 32px;
  object-fit: contain;
  display: inline-block;
  vertical-align: middle;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.35));
}
.kpi-icon-gif-sm {
  width: 20px;
  height: 20px;
  object-fit: contain;
  display: inline-block;
  vertical-align: middle;
}
.kpi-icon-gif-lg {
  width: 42px;
  height: 42px;
  object-fit: contain;
  display: inline-block;
  vertical-align: middle;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.45));
}

.topbar-bell-gif {
  width: 22px;
  height: 22px;
  object-fit: contain;
  display: block;
}

.role-badge-icon {
  width: 16px;
  height: 16px;
  object-fit: contain;
  vertical-align: middle;
  flex-shrink: 0;
  display: inline-block;
}

.role-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  border-radius: 9999px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: middle;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.role-badge-pill.role-admin {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.22), rgba(220, 38, 38, 0.25));
  border: 1px solid rgba(245, 158, 11, 0.6);
  color: #FDE68A;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.3);
}

.role-badge-pill.role-support {
  background: linear-gradient(135deg, rgba(2, 132, 199, 0.22), rgba(56, 189, 248, 0.25));
  border: 1px solid rgba(56, 189, 248, 0.6);
  color: #BAE6FD;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.3);
}

.role-badge-pill.role-user {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.22), rgba(5, 150, 105, 0.25));
  border: 1px solid rgba(16, 185, 129, 0.6);
  color: #A7F3D0;
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.3);
}

.role-badge-pill.role-vip {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.22), rgba(236, 72, 153, 0.25));
  border: 1px solid rgba(168, 85, 247, 0.6);
  color: #F5D0FE;
  box-shadow: 0 0 10px rgba(168, 85, 247, 0.3);
}

html[data-theme="light"] .role-badge-pill.role-admin {
  background: #FEF3C7;
  border-color: #F59E0B;
  color: #B45309;
}

html[data-theme="light"] .role-badge-pill.role-support {
  background: #E0F2FE;
  border-color: #0284C7;
  color: #0369A1;
}

html[data-theme="light"] .role-badge-pill.role-user {
  background: #D1FAE5;
  border-color: #10B981;
  color: #047857;
}

html[data-theme="light"] .role-badge-pill.role-vip {
  background: #F3E8FF;
  border-color: #A855F7;
  color: #7E22CE;
}

/* ==========================================================================
   ULTRA MINIMAL ACCOUNT QUOTA PILL (PC & MOBILE OPTIMIZED)
   ========================================================================== */
.account-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px 20px;
  margin-bottom: 22px;
}

.account-quota-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border-radius: 9999px;
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #E2E8F0;
  font-size: 0.95rem;
  line-height: 1.25;
  white-space: nowrap;
  user-select: none;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
}

.account-quota-pill:hover {
  border-color: rgba(56, 189, 248, 0.45);
  background: rgba(15, 23, 42, 0.92);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35), 0 0 16px rgba(56, 189, 248, 0.18);
  transform: translateY(-1px);
}

.account-quota-pill .quota-pill-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #F59E0B;
  filter: drop-shadow(0 0 6px rgba(245, 158, 11, 0.55));
}

.account-quota-pill .quota-pill-icon svg {
  width: 16px;
  height: 16px;
  display: block;
}

.account-quota-pill .quota-pill-text {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  color: #94A3B8;
  letter-spacing: 0.01em;
}

.account-quota-pill .quota-pill-text b {
  font-weight: 700;
  color: #F8FAFC;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

/* Light Theme Overrides */
html:not([data-theme="dark"]) .account-quota-pill,
html[data-theme="light"] .account-quota-pill {
  background: #F8FAFC;
  border-color: #CBD5E1;
  color: #334155;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

html:not([data-theme="dark"]) .account-quota-pill:hover,
html[data-theme="light"] .account-quota-pill:hover {
  background: #FFFFFF;
  border-color: #94A3B8;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}

html:not([data-theme="dark"]) .account-quota-pill .quota-pill-text,
html[data-theme="light"] .account-quota-pill .quota-pill-text {
  color: #64748B;
}

html:not([data-theme="dark"]) .account-quota-pill .quota-pill-text b,
html[data-theme="light"] .account-quota-pill .quota-pill-text b {
  color: #0F172A;
}

/* Responsive for Mobile & Small Tablets */
@media (max-width: 640px) {
  .account-section-head {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin-bottom: 16px;
  }

  .account-section-head .account-quota-pill {
    align-self: flex-end;
    margin-left: auto;
    padding: 7px 16px;
    font-size: 0.90rem;
    gap: 8px;
    margin-top: 2px;
  }

  .account-section-head .account-quota-pill .quota-pill-icon svg {
    width: 15px;
    height: 15px;
  }

  .account-section-head .account-quota-pill .quota-pill-text b {
    font-size: 0.98rem;
  }
}

.account-avatar-img,
img.account-avatar,
img.avatar {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 1.5px solid rgba(255, 255, 255, 0.20);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  background: #1E293B;
  display: inline-block;
  vertical-align: middle;
}

.account-avatar,
.avatar {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.25), rgba(59, 130, 246, 0.4));
  border: 1.5px solid rgba(59, 130, 246, 0.45);
  color: #60A5FA;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
  user-select: none;
  vertical-align: middle;
}

.account-identity,
.account-main {
  display: flex;
  align-items: center;
  gap: 12px;
}

html:not([data-theme="dark"]) .account-avatar-img,
html[data-theme="light"] .account-avatar-img {
  border-color: rgba(0, 0, 0, 0.12);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  background: #F1F5F9;
}

html:not([data-theme="dark"]) .account-avatar,
html[data-theme="light"] .account-avatar {
  background: #E0E7FF;
  border-color: #C7D2FE;
  color: #4338CA;
}

/* ==========================================================================
   WALLET PANEL COMPACT FOR MOBILE
   ========================================================================== */
.wallet-glass-panel .profile-balance-card .balance-info {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
}

@media (max-width: 768px) {
  #wallet .wallet-glass-panel {
    padding: 12px 14px !important;
    margin-bottom: 12px !important;
    border-radius: 14px !important;
    gap: 8px !important;
  }
  #wallet .wallet-glass-panel .eyebrow {
    font-size: 0.68rem !important;
    margin-bottom: 2px !important;
    letter-spacing: 0.04em !important;
  }
  #wallet .wallet-glass-panel h2 {
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    margin: 0 !important;
    line-height: 1.25 !important;
  }
  #wallet .wallet-glass-panel p.wallet-desc {
    display: none !important;
  }
  #wallet .wallet-glass-panel .sale-chip-row {
    margin-top: 6px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  #wallet .wallet-glass-panel .sale-chip {
    font-size: 0.72rem !important;
    padding: 3px 8px !important;
    border-radius: 6px !important;
  }
  #wallet .wallet-glass-panel .profile-balance-card {
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding-top: 10px !important;
    margin-top: 4px !important;
    border-top: 1px solid var(--border-card) !important;
  }
  #wallet .wallet-glass-panel .profile-balance-card .balance-info {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
  }
  #wallet .wallet-glass-panel .profile-balance-card span {
    font-size: 0.72rem !important;
    color: var(--text-secondary) !important;
  }
  #wallet .wallet-glass-panel .profile-balance-card strong {
    font-size: 1.3rem !important;
    font-weight: 800 !important;
    color: var(--primary) !important;
    line-height: 1.2 !important;
  }
  #wallet .wallet-glass-panel .profile-balance-card .btn {
    margin-top: 0 !important;
    padding: 7px 14px !important;
    font-size: 0.8rem !important;
    border-radius: 8px !important;
  }
}