/* ==========================================================================
   GroupNet Enterprise UI/UX Design System (Preserving Official Brand Colors)
   Brand Palette: Deep Teal (#0f766e, #0b5d56, #083f3a), Emerald (#0e9b6f),
                  Amber (#d97706), Warm Surface (#fffefb, #faf9f2, #f6f5ef).
   ========================================================================== */

:root {
  --brand: #0f766e;
  --brand-strong: #0b5d56;
  --brand-deep: #083f3a;
  --brand-soft: #e0f2ee;
  --brand-softer: #f0f9f6;
  --emerald: #0e9b6f;
  --amber: #d97706;
  --surface: #fffefb;
  --surface-2: #faf9f2;
  --ink: #101f28;
  --ink-2: #3b535e;
  --line: #e7e4d8;
}

/* ---------- Smooth Polish for Body & Scrolling ---------- */
html {
  scroll-behavior: smooth;
}

body {
  text-rendering: optimizeLegibility !important;
  -webkit-font-smoothing: antialiased !important;
}

/* ---------- High-End Glassmorphism Top Navigation ---------- */
.nav, header:not(.hero) {
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
  background: rgba(255, 254, 251, 0.94) !important;
  backdrop-filter: blur(18px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(180%) !important;
  border-bottom: 1px solid rgba(231, 228, 216, 0.85) !important;
  box-shadow: 0 4px 20px -2px rgba(16, 31, 40, 0.05) !important;
}

/* ---------- Hero Ambient Glow & Structure ---------- */
.hero {
  position: relative !important;
  top: auto !important;
  z-index: 1 !important;
  overflow: hidden !important;
  padding: 60px 0 36px !important;
  background: radial-gradient(ellipse 70% 60% at 75% 20%, rgba(15, 118, 110, 0.09), transparent 60%),
              radial-gradient(ellipse 60% 50% at 20% 80%, rgba(14, 155, 111, 0.06), transparent 50%),
              var(--bg, #f6f5ef) !important;
}

/* Enterprise Live Badge */
.gn-pill-enterprise {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 254, 251, 0.95);
  border: 1px solid rgba(15, 118, 110, 0.22);
  padding: 6px 16px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 700;
  color: #0b5d56;
  box-shadow: 0 2px 10px rgba(15, 118, 110, 0.08);
  margin-bottom: 18px;
  letter-spacing: -0.01em;
}

.gn-live-pulse {
  width: 9px;
  height: 9px;
  background: #10b981;
  border-radius: 50%;
  position: relative;
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  animation: gnPulse 2s infinite cubic-bezier(0.4, 0, 0.6, 1);
}

@keyframes gnPulse {
  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); }
}

.hero h1 {
  font-size: clamp(34px, 4.4vw, 54px) !important;
  font-weight: 900 !important;
  line-height: 1.18 !important;
  letter-spacing: -0.025em !important;
  margin: 12px 0 16px !important;
}

.hero h1 .grad {
  background: linear-gradient(135deg, #0f766e 0%, #0e9b6f 65%, #3fbf8f 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}

.hero p.sub {
  font-size: 17.5px !important;
  line-height: 1.68 !important;
  color: #3b535e !important;
  max-width: 580px !important;
  margin-bottom: 28px !important;
}

.hero-ctas {
  display: flex !important;
  gap: 14px !important;
  flex-wrap: wrap !important;
  margin-bottom: 24px !important;
}

.btn-primary.gn-btn-glow {
  background: linear-gradient(135deg, #0f766e 0%, #0e9b6f 100%) !important;
  box-shadow: 0 8px 24px -4px rgba(15, 118, 110, 0.45) !important;
  position: relative;
  overflow: hidden;
}

.btn-primary.gn-btn-glow:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 14px 32px -6px rgba(15, 118, 110, 0.55) !important;
}

.hero-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 6px;
}

.hero-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(255, 254, 251, 0.9);
  border: 1px solid #e7e4d8;
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #3b535e;
  box-shadow: 0 1px 4px rgba(0,0,0,0.03);
}

.hero-chip .ic {
  font-weight: 800;
  color: #0e9b6f;
  font-size: 13.5px;
}

/* ---------- Enterprise Hero Console Card ---------- */
.hero-console-card {
  background: rgba(255, 254, 251, 0.96);
  border: 1.5px solid rgba(15, 118, 110, 0.18);
  border-radius: 24px;
  padding: 22px 24px;
  box-shadow: 0 24px 60px -16px rgba(8, 63, 58, 0.22), 0 8px 24px -6px rgba(16, 31, 40, 0.05);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}

.hero-console-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 30px 72px -16px rgba(8, 63, 58, 0.28), 0 12px 28px -6px rgba(16, 31, 40, 0.08);
}

.console-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #e7e4d8;
  padding-bottom: 14px;
  margin-bottom: 16px;
}

.console-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: #3b535e;
}

.console-status .status-dot {
  width: 8px;
  height: 8px;
  background: #10b981;
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 6px #10b981;
}

.console-tabs {
  display: flex;
  gap: 6px;
}

.console-tab {
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 8px;
  border: 1px solid transparent;
}

.console-tab.active-wa {
  background: #e8f9ee;
  color: #128c7e;
  border-color: #a7f3d0;
}

.console-tab.active-tg {
  background: #e0f2fe;
  color: #0284c7;
  border-color: #bae6fd;
}

.console-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  background: #faf9f2;
  border: 1px solid #e7e4d8;
  border-radius: 14px;
  padding: 12px;
  margin-bottom: 16px;
  text-align: center;
}

.c-stat .c-val {
  font-size: 17px;
  font-weight: 900;
  color: #0b5d56;
  font-feature-settings: "tnum" on, "lnum" on;
}

.c-stat .c-lbl {
  font-size: 11.5px;
  font-weight: 600;
  color: #7b8b92;
  margin-top: 2px;
}

/* Flow Items inside the Console Card */
.hero-console-card .flow {
  display: grid;
  gap: 8px;
  max-width: none !important;
}

.hero-console-card .fl {
  padding: 12px 14px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(231, 228, 216, 0.8) !important;
  background: rgba(255, 254, 251, 0.7) !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.hero-console-card .fl.now {
  background: #fffefb !important;
  border-color: #0f766e !important;
  box-shadow: 0 6px 20px -4px rgba(15, 118, 110, 0.22) !important;
  transform: translateX(-4px) !important;
}

/* Numbered step badge inside .fl */
.hero-console-card .step-num {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: rgba(15, 118, 110, 0.1);
  color: #0f766e;
  font-weight: 900;
  font-size: 13.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(15, 118, 110, 0.25);
  flex-shrink: 0;
  transition: all 0.25s ease;
}

.hero-console-card .fl.now .step-num {
  background: #0f766e;
  color: #ffffff;
  border-color: #0b5d56;
  box-shadow: 0 2px 8px rgba(15, 118, 110, 0.4);
}

/* ---------- Bento Grid & Section Panes ---------- */
.pane {
  border-radius: 14px !important;
  box-shadow: 0 10px 30px -10px rgba(16, 31, 40, 0.08), 0 1px 3px rgba(16, 31, 40, 0.03) !important;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.28s ease !important;
}

.pane:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 20px 48px -12px rgba(15, 118, 110, 0.16) !important;
}

.pane.adv {
  background: linear-gradient(150deg, #083f3a 0%, #0f766e 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 20px 50px -15px rgba(8, 63, 58, 0.45) !important;
}

.pane.pub {
  background: #fffefb !important;
  border: 1.5px solid #e7e4d8 !important;
}

/* Flowstep Badges */
.flowsteps .n {
  border-radius: 12px !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06) !important;
}

/* Interactive Dashboard Window (#panel) */
.wdash {
  border-radius: 22px !important;
  border: 1px solid #e7e4d8 !important;
  box-shadow: 0 20px 50px -15px rgba(16, 31, 40, 0.12), 0 4px 12px rgba(16, 31, 40, 0.04) !important;
  overflow: hidden !important;
}

.wdash-bar {
  background: #1e293b !important;
  color: #f8fafc !important;
  padding: 12px 18px !important;
}

.wkpi {
  border-radius: 14px !important;
  border: 1px solid #e7e4d8 !important;
  background: #fffefb !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.wkpi:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 18px -4px rgba(15, 118, 110, 0.12) !important;
}

/* ---------- Network Selector & Badges ---------- */
.gn-network-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 700;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.gn-network-badge.wa {
  background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
  color: #ffffff;
  box-shadow: 0 4px 14px -3px rgba(37, 211, 102, 0.42);
}

.gn-network-badge.tg {
  background: linear-gradient(135deg, #229ed9 0%, #1778b0 100%);
  color: #ffffff;
  box-shadow: 0 4px 14px -3px rgba(34, 158, 217, 0.42);
}

.gn-network-badge:hover {
  transform: translateY(-2px);
  filter: brightness(1.06);
}

/* ---------- ADVERTISER WORKSPACE (/app/) POLISH ---------- */
/* Elevated segmented control tabs */
.tabs, #advtabs {
  display: flex !important;
  gap: 8px !important;
  background: #eef2f6 !important;
  padding: 6px !important;
  border-radius: 14px !important;
  border: 1px solid #cbd5e1 !important;
  margin-bottom: 24px !important;
  flex-wrap: wrap !important;
}

.tabs button, #advtabs button {
  border-radius: 12px !important;
  padding: 10px 20px !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  color: #334155 !important;
  border: 1px solid transparent !important;
  background: #ffffff !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer !important;
}

.tabs button:hover, #advtabs button:hover {
  background: #f8fafc !important;
  color: #0f766e !important;
  border-color: #0f766e !important;
}

.tabs button.on, #advtabs button.on {
  background: linear-gradient(135deg, #0f766e 0%, #0e9b6f 100%) !important;
  color: #ffffff !important;
  border: 1px solid #0b5d56 !important;
  box-shadow: 0 4px 16px -3px rgba(15, 118, 110, 0.5) !important;
}

/* Workspace cards */
.card {
  border-radius: 14px !important;
  border: 1.5px solid #e2e8f0 !important;
  background: #ffffff !important;
  box-shadow: 0 8px 24px -6px rgba(16, 31, 40, 0.06), 0 2px 6px rgba(16, 31, 40, 0.02) !important;
  padding: 24px !important;
  transition: box-shadow 0.25s ease !important;
}

/* Campaign Tiles */
.tiles, .ac-tiles {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
  gap: 16px !important;
  margin-bottom: 24px !important;
}

.tile {
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 14px !important;
  padding: 18px 20px !important;
  box-shadow: 0 4px 14px -4px rgba(16, 31, 40, 0.05) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
}

.tile:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(15, 118, 110, 0.4) !important;
  box-shadow: 0 10px 24px -6px rgba(15, 118, 110, 0.15) !important;
}

.tile .v, .tile .num {
  font-size: 28px !important;
  font-weight: 900 !important;
  color: #0b5d56 !important;
  font-feature-settings: "tnum" on, "lnum" on !important;
}

.tile .l, .tile .lbl {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #64748b !important;
  text-transform: uppercase !important;
}

/* Inputs & Form Fields */
input, select, textarea {
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  padding: 11px 15px !important;
  font-size: 14.5px !important;
  color: #0f172a !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

input:focus, select:focus, textarea:focus {
  outline: none !important;
  border-color: #0f766e !important;
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.18) !important;
}

/* Action button in workspace: prominent, high contrast */
.adv-new-big {
  border-radius: 8px !important;
  background: linear-gradient(135deg, #0f766e 0%, #0e9b6f 100%) !important;
  color: #ffffff !important;
  padding: 12px 28px !important;
  font-weight: 800 !important;
  font-size: 16.5px !important;
  box-shadow: 0 6px 20px -4px rgba(15, 118, 110, 0.5) !important;
  border: 1px solid #0b5d56 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  transition: all 0.22s ease !important;
}

.adv-new-big:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 28px -6px rgba(15, 118, 110, 0.65) !important;
  background: linear-gradient(135deg, #0b5d56 0%, #0c825d 100%) !important;
}

/* File Picker Button */
.fpick {
  border: 1.5px dashed #0f766e !important;
  border-radius: 14px !important;
  background: #f0fdfa !important;
  padding: 12px 18px !important;
  transition: all 0.2s ease !important;
}

.fpick:hover {
  background: #ccfbf1 !important;
}

/* ==========================================================================
   ENTERPRISE SAAS DASHBOARD & WORKSPACE UPGRADE (/app/)
   Zero-Jitter Engine + Luxury Modern UI Tokens
   ========================================================================== */

/* ---------- 1. Zero Jitter & Anti-Flicker Architecture ---------- */
html {
  scrollbar-gutter: stable !important;
  scroll-behavior: auto !important;
}

/* Eliminate translateY displacement jump */
@keyframes panein {
  from { opacity: 0.85; }
  to { opacity: 1; }
}

.pane-in {
  animation: panein 0.12s ease-out !important;
  transform: none !important;
}

/* Tabular numerals globally for counters, metrics, and clocks */
.ac-clock, .ac-clock b, .tile .v, .pill, #who, #a1free424, #a1rsv486, .uc-txt {
  font-variant-numeric: tabular-nums !important;
  font-feature-settings: 'tnum' 1 !important;
}

/* Minimum heights to eliminate layout shifting on DOM replacement */
#a1tiles, #p0tiles {
  min-height: 110px !important;
}

#a1list {
  min-height: 80px !important;
}

/* Smooth anchor offsets */
* {
  scroll-margin-top: 76px !important;
}

/* ---------- 2. High-End Glassmorphism Top Navigation ---------- */
header:not(.hero) {
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
  background: rgba(255, 255, 255, 0.94) !important;
  backdrop-filter: blur(16px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
  border-bottom: 1px solid rgba(226, 232, 240, 0.85) !important;
  box-shadow: 0 4px 16px -2px rgba(15, 23, 42, 0.04) !important;
  height: 64px !important;
}

header:not(.hero) .hin {
  max-width: 1260px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

/* Modern Role Switcher Dropdown */
#viewas {
  appearance: none !important;
  -webkit-appearance: none !important;
  background: #f8fafc url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230f766e' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat left 12px center !important;
  padding: 7px 14px 7px 32px !important;
  border: 1.5px solid rgba(15, 118, 110, 0.25) !important;
  border-radius: 8px !important;
  font-family: inherit !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  color: #0f766e !important;
  cursor: pointer !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.03) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

#viewas:hover {
  background-color: #f0fdfa !important;
  border-color: #0f766e !important;
  box-shadow: 0 4px 12px -2px rgba(15, 118, 110, 0.2) !important;
}

#rolepill {
  background: rgba(15, 118, 110, 0.08) !important;
  color: #0f766e !important;
  border: 1px solid rgba(15, 118, 110, 0.2) !important;
  border-radius: 8px !important;
  padding: 5px 14px !important;
  font-weight: 700 !important;
  font-size: 12.5px !important;
  letter-spacing: -0.2px !important;
}

#who {
  font-weight: 600 !important;
  color: #475569 !important;
  font-size: 13.5px !important;
  margin-inline-end: 8px !important;
}

#signout {
  background: #ffffff !important;
  color: #64748b !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  padding: 6px 16px !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  transition: all 0.15s ease !important;
  cursor: pointer !important;
}

#signout:hover {
  background: #fef2f2 !important;
  color: #ef4444 !important;
  border-color: #fecaca !important;
  box-shadow: 0 2px 8px -1px rgba(239, 68, 68, 0.15) !important;
}

/* ---------- 3. Modern User Profile Card (#ucard448) ---------- */
#ucard448 {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: linear-gradient(135deg, #ffffff 0%, #f9fbfb 100%) !important;
  border: 1px solid rgba(15, 118, 110, 0.15) !important;
  border-inline-start: 4px solid #0f766e !important;
  border-radius: 14px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.03), 0 8px 24px -4px rgba(15, 118, 110, 0.06) !important;
  padding: 16px 22px !important;
  margin: 0 0 22px !important;
}

#ucard448 .uc-ava {
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #0f766e 0%, #0d9488 100%) !important;
  box-shadow: 0 4px 14px -2px rgba(15, 118, 110, 0.35) !important;
  border: 2px solid #ffffff !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
}

#ucard448 .uc-nm {
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  letter-spacing: -0.3px !important;
}

#ucard448 .uc-role, #ucard448 .pill, .tag, .badge, #rolepill, .console-tab, .hero-chip, .gn-pill-enterprise {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
}

/* ---------- 4. Segmented Tab Control (#advtabs, #pubtabs, #admtabs) ---------- */
#advtabs, #pubtabs, #admtabs {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 14px !important;
  padding: 5px !important;
  margin-bottom: 24px !important;
  overflow-x: auto !important;
}

#advtabs button, #pubtabs button, #admtabs button {
  background: transparent !important;
  color: #64748b !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 9px 20px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  white-space: nowrap !important;
}

#advtabs button:hover, #pubtabs button:hover, #admtabs button:hover {
  color: #0f172a !important;
  background: rgba(255, 255, 255, 0.5) !important;
}

#advtabs button.on, #pubtabs button.on, #admtabs button.on {
  background: #ffffff !important;
  color: #0f766e !important;
  font-weight: 800 !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08) !important;
}

/* ---------- 5. Luxury Enterprise KPI Metric Cards (.tiles .tile) ---------- */
.tiles {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)) !important;
  gap: 16px !important;
  margin-bottom: 24px !important;
}

.tiles .tile {
  background: #ffffff !important;
  border: 1px solid rgba(226, 232, 240, 0.9) !important;
  border-radius: 14px !important;
  padding: 20px 22px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.03), 0 6px 16px -2px rgba(15, 23, 42, 0.03) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
  min-height: 110px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}

.tiles .tile:hover {
  border-color: rgba(15, 118, 110, 0.3) !important;
  box-shadow: 0 8px 24px -4px rgba(15, 118, 110, 0.1), 0 2px 6px rgba(0,0,0,0.03) !important;
}

.tiles .tile .k {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #64748b !important;
  margin-bottom: 8px !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.tiles .tile .v {
  font-size: 30px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  letter-spacing: -0.5px !important;
  font-variant-numeric: tabular-nums !important;
}

/* Highlight first tile (Wallet / Revenue) */
.tiles .tile:first-child {
  background: linear-gradient(135deg, #ffffff 0%, #f0fdfa 100%) !important;
  border-color: rgba(15, 118, 110, 0.25) !important;
}

.tiles .tile:first-child .v {
  color: #0f766e !important;
}

/* ---------- 6. Enterprise Campaign Rows (.ac-row) ---------- */
.ac-row {
  background: #ffffff !important;
  border: 1px solid rgba(226, 232, 240, 0.9) !important;
  border-radius: 14px !important;
  padding: 14px 20px !important;
  margin-bottom: 12px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.02) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.ac-row:hover {
  border-color: rgba(15, 118, 110, 0.3) !important;
  box-shadow: 0 6px 18px -3px rgba(15, 118, 110, 0.08) !important;
}

.ac-thumb {
  width: 44px !important;
  height: 44px !important;
  border-radius: 10px !important;
  object-fit: cover !important;
}

.ac-thumb.ac-ph {
  background: linear-gradient(135deg, #0f766e 0%, #0d9488 100%) !important;
  color: #ffffff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 800 !important;
  font-size: 16px !important;
}

.ac-name b {
  font-size: 15.5px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
}

.ac-clock {
  font-variant-numeric: tabular-nums !important;
  font-feature-settings: 'tnum' !important;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  padding: 6px 12px !important;
  font-size: 13px !important;
  color: #475569 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.ac-clock b {
  font-variant-numeric: tabular-nums !important;
  display: inline-block !important;
  min-width: 115px !important;
  text-align: right !important;
}

.ac-side button.sm {
  background: #f0fdfa !important;
  color: #0f766e !important;
  border: 1px solid rgba(15, 118, 110, 0.25) !important;
  border-radius: 8px !important;
  padding: 7px 16px !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.ac-side button.sm:hover {
  background: #0f766e !important;
  color: #ffffff !important;
  box-shadow: 0 3px 10px -2px rgba(15, 118, 110, 0.3) !important;
}

/* Headings and Greetings */
#advhello373 {
  font-size: 24px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  letter-spacing: -0.4px !important;
}



/* ==========================================================================
   ENTERPRISE ADMIN MANAGEMENT SUITE (#v-adm)
   ========================================================================== */

#v-adm {
  animation: admFadeIn 0.25s ease-out;
}

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

/* Page Header in Admin */
#v-adm .page-head {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(240, 253, 250, 0.85)) !important;
  border: 1px solid rgba(15, 118, 110, 0.18) !important;
  border-radius: 14px !important;
  padding: 24px 28px !important;
  margin-bottom: 24px !important;
  box-shadow: 0 10px 30px -10px rgba(15, 118, 110, 0.08) !important;
  position: relative;
  overflow: hidden;
}

#v-adm .page-head::before {
  content: '● מרכז שליטה וניהול רשתי • Enterprise Management Suite';
  display: inline-block;
  font-size: 11.5px;
  font-weight: 700;
  color: #0f766e;
  background: #ccfbf1;
  padding: 4px 12px;
  border-radius: 8px;
  margin-bottom: 12px;
  letter-spacing: 0.3px;
}

#v-adm .page-head h1 {
  font-size: 26px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  margin: 0 0 6px 0 !important;
  letter-spacing: -0.5px !important;
}

#v-adm .page-head .sub {
  font-size: 14.5px !important;
  color: #475569 !important;
  line-height: 1.5 !important;
}

/* Enterprise Category Bar (#admcats) */
#admcats {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(226, 232, 240, 0.9) !important;
  border-radius: 14px !important;
  padding: 10px 14px !important;
  margin-bottom: 18px !important;
  box-shadow: 0 8px 24px -6px rgba(15, 23, 42, 0.05) !important;
}

#admcats button[data-cat] {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 18px !important;
  border-radius: 12px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #475569 !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  white-space: nowrap !important;
}

#admcats button[data-cat]:hover {
  background: #f0fdfa !important;
  color: #0f766e !important;
  transform: translateY(-1px) !important;
}

#admcats button[data-cat].on {
  background: linear-gradient(135deg, #0f766e, #0e9b6f) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  box-shadow: 0 6px 18px -4px rgba(15, 118, 110, 0.35) !important;
  transform: translateY(-1px) !important;
}

#admcats button[data-cat] .n {
  background: rgba(0, 0, 0, 0.08) !important;
  color: inherit !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  padding: 2px 7px !important;
  border-radius: 8px !important;
}

#admcats button[data-cat].on .n {
  background: rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
}

/* Sub-Navigation Tabs (#admtabs) */
#admtabs {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-bottom: 24px !important;
  padding: 4px 0 !important;
}

#admtabs button {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 16px !important;
  border-radius: 10px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: #334155 !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02) !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  white-space: nowrap !important;
}

#admtabs button:hover {
  border-color: #0f766e !important;
  color: #0f766e !important;
  background: #f0fdfa !important;
}

#admtabs button.on {
  background: #0f766e !important;
  color: #ffffff !important;
  border-color: #0f766e !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 14px -2px rgba(15, 118, 110, 0.3) !important;
}

/* Admin Cards & Content Sections */
#v-adm .card {
  background: #ffffff !important;
  border: 1px solid rgba(226, 232, 240, 0.9) !important;
  border-radius: 14px !important;
  padding: 24px 28px !important;
  margin-bottom: 24px !important;
  box-shadow: 0 10px 30px -8px rgba(15, 23, 42, 0.06) !important;
}

#v-adm .card h2 {
  font-size: 20px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  margin: 0 0 16px 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  letter-spacing: -0.3px !important;
}

#v-adm .card .sub {
  font-size: 13.5px !important;
  color: #64748b !important;
}

/* Enterprise Data Tables */
#v-adm table {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  background: #ffffff !important;
  margin: 16px 0 !important;
  box-shadow: 0 4px 16px -4px rgba(15, 23, 42, 0.04) !important;
}

#v-adm thead th {
  background: #f8fafc !important;
  color: #475569 !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  padding: 12px 16px !important;
  border-bottom: 2px solid #e2e8f0 !important;
  text-align: right !important;
  white-space: nowrap !important;
}

#v-adm tbody tr {
  transition: background-color 0.15s ease !important;
}

#v-adm tbody tr:hover {
  background-color: #f0fdfa !important;
}

#v-adm tbody td {
  padding: 13px 16px !important;
  font-size: 13.5px !important;
  color: #1e293b !important;
  border-bottom: 1px solid #f1f5f9 !important;
  vertical-align: middle !important;
}

#v-adm tbody tr:last-child td {
  border-bottom: none !important;
}

/* Status Badges & Pills */
#v-adm .pill, .pill, .tag, .badge, #rolepill, .console-tab, .hero-chip, .gn-pill-enterprise {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
}

#v-adm .pill.ok, .pill.ok {
  background: #dcfce7 !important;
  color: #15803d !important;
  border: 1px solid #bbf7d0 !important;
}

#v-adm .pill.warn, .pill.warn {
  background: #fef3c7 !important;
  color: #b45309 !important;
  border: 1px solid #fde68a !important;
}

#v-adm .pill.bad, .pill.bad {
  background: #ffe4e6 !important;
  color: #be123c !important;
  border: 1px solid #fecdd3 !important;
}

#v-adm .pill.mute, .pill.mute {
  background: #f1f5f9 !important;
  color: #475569 !important;
  border: 1px solid #e2e8f0 !important;
}

/* Admin Buttons */
#v-adm button.sm {
  background: #f8fafc !important;
  color: #334155 !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 8px !important;
  padding: 6px 14px !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

#v-adm button.sm:hover {
  background: #0f766e !important;
  color: #ffffff !important;
  border-color: #0f766e !important;
  box-shadow: 0 3px 10px -2px rgba(15, 118, 110, 0.3) !important;
}

#v-adm button.sm.on {
  background: #0f766e !important;
  color: #ffffff !important;
  border-color: #0f766e !important;
}

/* Admin Filter Inputs & Selects */
#v-adm input, #v-adm select, #v-adm textarea {
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 10px !important;
  padding: 8px 14px !important;
  font-size: 13.5px !important;
  color: #0f172a !important;
  background: #ffffff !important;
  transition: all 0.15s ease !important;
}

#v-adm input:focus, #v-adm select:focus, #v-adm textarea:focus {
  outline: none !important;
  border-color: #0f766e !important;
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.15) !important;
}

/* WhatsApp Management Console (#mchat, .wa-app) */
.wa-app {
  border: 1px solid #cbd5e1 !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  box-shadow: 0 12px 36px -8px rgba(15, 23, 42, 0.08) !important;
  background: #ffffff !important;
}

.wa-side {
  border-left: 1px solid #e2e8f0 !important;
  background: #f8fafc !important;
}

.wa-bar {
  background: #f1f5f9 !important;
  border-bottom: 1px solid #e2e8f0 !important;
  padding: 12px 16px !important;
}

/* Mobile Responsiveness for Admin */
@media (max-width: 768px) {
  #admcats {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 8px !important;
  }
  #admtabs {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 8px !important;
  }
  #v-adm table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

/* ==========================================================================
   GroupNet Enterprise Dashboard Upgrade (Zero-Emoji, Crisp Lucide Icons, Soft Shadows, Strict RTL)
   ========================================================================== */

/* Universal Vector SVG Icon System */
.gn-ic {
  display: inline-block !important;
  vertical-align: middle !important;
  width: 18px !important;
  height: 18px !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  fill: none !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  flex-shrink: 0 !important;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), stroke 0.15s ease !important;
}

/* Strict RTL & Icon Alignment */
[dir="rtl"] button,
[dir="rtl"] .tab,
[dir="rtl"] [data-t],
[dir="rtl"] [data-cat],
[dir="rtl"] .adv-new-big,
[dir="rtl"] .wl-step,
[dir="rtl"] .hero-chip,
[dir="rtl"] .fpick {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  text-align: right !important;
  direction: rtl !important;
}

/* Base Body & Viewport Neutral Background */
html, body, #app, main, .wrap {
  background-color: #f8fafc !important;
  color: #334155 !important;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11" !important;
}

/* High Text Hierarchy */
h1, h2, h3, h4, .page-head h1 {
  color: #0f172a !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em !important;
}

p, td, div:not([class*="btn"]):not(button) {
  color: #334155;
}

span:not(button span):not(.btn span):not([class*="btn"] span):not(.bigbtn span):not(.pri span):not(.badge):not(.pill):not(.pk273-rec):not(.status-badge) {
  color: #334155;
}

.sub, .hint, .muted, small, label {
  color: #64748b !important;
}

/* Cards Elevation: Crisp borders, modern dual subtle shadows, 16px radius */
.card,
#v-adm .card,
#v-adv .card,
#v-pub .card,
#v-agt .card,
#v-onboard.card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 14px !important;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05), 0 10px 25px -5px rgba(15, 23, 42, 0.05) !important;
  padding: 24px !important;
  margin-bottom: 24px !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.card:hover,
#v-adm .card:hover,
#v-adv .card:hover,
#v-pub .card:hover {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.06), 0 20px 30px -10px rgba(15, 23, 42, 0.07) !important;
  border-color: #cbd5e1 !important;
}

/* KPI Metric Tiles */
.tiles, .ac-tiles {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
  gap: 16px !important;
  margin-bottom: 24px !important;
}

.tiles .tile {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 14px !important;
  padding: 20px 22px !important;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05), 0 10px 25px -5px rgba(15, 23, 42, 0.05) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  min-height: 110px !important;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease, border-color 0.2s ease !important;
}

.tiles .tile:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.06), 0 16px 28px -6px rgba(15, 23, 42, 0.08) !important;
  border-color: #cbd5e1 !important;
}

.tiles .tile .k {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: #64748b !important;
  text-transform: uppercase !important;
  letter-spacing: 0.3px !important;
}

.tiles .tile .k .gn-ic {
  width: 18px !important;
  height: 18px !important;
  color: #0f766e !important;
  stroke: #0f766e !important;
}

.tiles .tile .v {
  font-size: 28px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  letter-spacing: -0.025em !important;
  margin: 10px 0 4px !important;
}

.tiles .tile .d {
  font-size: 12.5px !important;
  color: #64748b !important;
}

/* Enterprise Tabs (#advtabs, #pubtabs, #admtabs) */
#advtabs, #pubtabs, #admtabs {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 14px !important;
  padding: 6px !important;
  margin-bottom: 24px !important;
}

#advtabs button, #pubtabs button, #admtabs button {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: transparent !important;
  color: #64748b !important;
  border: 1px solid transparent !important;
  border-radius: 10px !important;
  padding: 9px 18px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  cursor: pointer !important;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
  white-space: nowrap !important;
}

#advtabs button:hover, #pubtabs button:hover, #admtabs button:hover {
  color: #0f172a !important;
  background: rgba(255, 255, 255, 0.75) !important;
}

#advtabs button.on, #pubtabs button.on, #admtabs button.on {
  background: #ffffff !important;
  color: #0f766e !important;
  border-color: #e2e8f0 !important;
  font-weight: 700 !important;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.05) !important;
}

#advtabs button.on .gn-ic, #pubtabs button.on .gn-ic, #admtabs button.on .gn-ic {
  stroke: #0f766e !important;
}

/* Category Bar (#admcats) */
#admcats {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 14px !important;
  padding: 10px 14px !important;
  margin-bottom: 20px !important;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05), 0 10px 25px -5px rgba(15, 23, 42, 0.05) !important;
}

#admcats button[data-cat] {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 9px 16px !important;
  border-radius: 12px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #475569 !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  white-space: nowrap !important;
}

#admcats button[data-cat] .gn-ic {
  stroke: currentColor !important;
}

#admcats button[data-cat]:hover {
  background: #f0fdfa !important;
  color: #0f766e !important;
  transform: translateY(-1px) !important;
}

#admcats button[data-cat].on {
  background: linear-gradient(135deg, #0f766e, #0e9b6f) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  box-shadow: 0 4px 14px -2px rgba(15, 118, 110, 0.4) !important;
  transform: translateY(-1px) !important;
}

#admcats button[data-cat].on .gn-ic {
  stroke: #ffffff !important;
}

#admcats button[data-cat] .n {
  background: rgba(0, 0, 0, 0.08) !important;
  color: inherit !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  padding: 2px 7px !important;
  border-radius: 8px !important;
}

#admcats button[data-cat].on .n {
  background: rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
}

/* Primary Action Buttons */
.adv-new-big, #adv-new-big {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: linear-gradient(135deg, #0f766e 0%, #0e9b6f 100%) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 10px 22px !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 14px -2px rgba(15, 118, 110, 0.4) !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.adv-new-big:hover, #adv-new-big:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px -3px rgba(15, 118, 110, 0.5) !important;
}

.adv-new-big .gn-ic, #adv-new-big .gn-ic {
  width: 18px !important;
  height: 18px !important;
  stroke: #ffffff !important;
}

/* Secondary & Action Buttons */
button.sm {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: #f8fafc !important;
  color: #334155 !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 8px !important;
  padding: 6px 14px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

button.sm:hover {
  background: #0f766e !important;
  color: #ffffff !important;
  border-color: #0f766e !important;
  box-shadow: 0 3px 10px -2px rgba(15, 118, 110, 0.3) !important;
}

button.sm:hover .gn-ic {
  stroke: #ffffff !important;
}

/* Form Inputs, Selects, and Textareas */
input, select, textarea {
  border: 1px solid #cbd5e1 !important;
  border-radius: 10px !important;
  padding: 9px 14px !important;
  font-size: 14px !important;
  color: #0f172a !important;
  background: #ffffff !important;
  transition: all 0.15s ease !important;
}

input:focus, select:focus, textarea:focus {
  outline: none !important;
  border-color: #0f766e !important;
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.15) !important;
}

/* Clean Pills */
.pill, .tag, .badge, #rolepill, .console-tab, .hero-chip, .gn-pill-enterprise {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
}

/* ==========================================================================
   SLEEK ENTERPRISE RECTANGULAR BUTTONS (ELIMINATE ALL ROUND PILLS)
   Linear / Stripe / Vercel Modern Enterprise Geometry: 8px radius
   ========================================================================== */

/* Universal Button Base */
button,
.btn,
.bigbtn,
.pri,
.adv-new-big,
#adv-new-big,
#passlogin,
#sendlink,
#ob-save,
#a3sentgo,
#a3auto,
#leadAdv,
#leadOwn,
#subGroup,
.advnew528-go,
.fpick,
.leadok button,
button.sm,
button.ghost,
input[type="button"],
input[type="submit"] {
  border-radius: 8px !important;
  font-family: inherit !important;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Primary Action Buttons */
button:not(.ghost):not(.sm):not(.sheet-x):not([data-t]):not([data-cat]),
.bigbtn,
.pri,
.adv-new-big,
#adv-new-big,
#passlogin,
#ob-save,
#a3sentgo,
#leadAdv,
.advnew528-go {
  background: linear-gradient(180deg, #0f766e 0%, #0d6962 100%) !important;
  border: 1px solid #0d5f59 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
}

button:not(.ghost):not(.sm):not(.sheet-x):not([data-t]):not([data-cat]):hover,
.bigbtn:hover,
.pri:hover,
.adv-new-big:hover,
#adv-new-big:hover,
#passlogin:hover,
#ob-save:hover,
#a3sentgo:hover,
#leadAdv:hover,
.advnew528-go:hover {
  background: linear-gradient(180deg, #11827a 0%, #0f766e 100%) !important;
  border-color: #0b544e !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
  transform: translateY(-1px) !important;
}

/* Secondary & Ghost Buttons */
button.ghost,
button.sm:not(.pri):not(.primary):not([class*="green"]):not([class*="teal"]):not(.auth-btn-magic):not(.kitur-submit-btn):not(#btn-open-wizard-p0):not(#crm-fast-export-btn):not(#po-export-csv),
#sendlink:not(.auth-btn-magic),
#leadOwn,
#subGroup,
#signout {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #334155 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
}

button.ghost:hover,
button.sm:hover,
#sendlink:hover,
#leadOwn:hover,
#subGroup:hover,
#signout:hover {
  background: #f8fafc !important;
  border-color: #94a3b8 !important;
  color: #0f172a !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
}

/* Segmented Tabs (#advtabs, #pubtabs, #admtabs) */
#advtabs, #pubtabs, #admtabs {
  border-radius: 10px !important;
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
  padding: 4px !important;
  gap: 4px !important;
}

#advtabs button, #pubtabs button, #admtabs button {
  border-radius: 8px !important;
  font-weight: 600 !important;
  padding: 8px 14px !important;
  font-size: 13.5px !important;
  border: 1px solid transparent !important;
}

#advtabs button.on, #pubtabs button.on, #admtabs button.on {
  background: #ffffff !important;
  color: #0f766e !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
  font-weight: 700 !important;
}

/* Category Filter Bar (#admcats) */
#admcats {
  border-radius: 10px !important;
  padding: 6px 8px !important;
  border: 1px solid #e2e8f0 !important;
  gap: 6px !important;
}

#admcats button[data-cat] {
  border-radius: 8px !important;
  padding: 7px 12px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

#admcats button[data-cat].on {
  background: #0f766e !important;
  color: #ffffff !important;
  border-color: #0f766e !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

#admcats button[data-cat] .n {
  border-radius: 6px !important;
  padding: 1px 6px !important;
}

/* Status Badges & Pills: Crisp 6px Tags */
.pill,
.tag,
.badge,
#rolepill,
.console-tab,
.hero-chip,
.gn-pill-enterprise,
.gn-network-badge {
  border-radius: 6px !important;
  padding: 3px 8px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

/* Dropdown Role Selector */
#viewas {
  border-radius: 8px !important;
  padding: 6px 12px 6px 28px !important;
}

/* Cards & Surfaces: 14px radius, crisp subtle dual-layer shadow */
.card,
#v-adm .card,
#v-adv .card,
#v-pub .card,
#v-agt .card,
#v-onboard.card {
  border-radius: 14px !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.04), 0 6px 16px -4px rgba(15, 23, 42, 0.04) !important;
  background: #ffffff !important;
}

.tiles .tile {
  border-radius: 12px !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.03), 0 4px 12px -2px rgba(15, 23, 42, 0.03) !important;
}


/* ==========================================================================
   HOMEPAGE HIGH-CONTRAST WCAG AAA COMPLIANCE FOR DARK CARDS & SECTIONS
   ========================================================================== */
#advs,
.pane.adv,
.cta-band,
.auth-side,
.wdash-bar,
.wa-head,
[data-theme="dark"],
.dark-card {
  color: #ffffff !important;
}

#advs h1, #advs h2, #advs h3, #advs h4,
.pane.adv h1, .pane.adv h2, .pane.adv h3, .pane.adv h4,
.cta-band h1, .cta-band h2, .cta-band h3, .cta-band h4,
.auth-side h1, .auth-side h2, .auth-side h3, .auth-side h4 {
  color: #ffffff !important;
  font-weight: 800 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25) !important;
}

#advs .who,
.pane.adv .who {
  color: #a7f3d0 !important;
  opacity: 1 !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}

#advs b, #advs div b, #advs li b,
.pane.adv b, .pane.adv div b, .pane.adv li b,
.cta-band b, .auth-side b, .auth-side .t {
  color: #ffffff !important;
  font-weight: 700 !important;
}

#advs em, #advs div em, #advs li em,
.pane.adv em, .pane.adv div em, .pane.adv li em {
  color: #ffffff !important;
  opacity: 1 !important;
  font-style: normal !important;
}

.cta-band p, .cta-band span,
.auth-side p, .auth-side span, .auth-side .s {
  color: #ccfbf1 !important;
  opacity: 1 !important;
  font-style: normal !important;
}

#advs ol.flowsteps li .n,
.pane.adv ol.flowsteps li .n {
  background: rgba(255, 255, 255, 0.22) !important;
  color: #ffffff !important;
  border: 1.5px solid rgba(255, 255, 255, 0.45) !important;
  border-radius: 50% !important;
  font-weight: 800 !important;
}

#advs p, #advs span, #advs div, #advs li,
.pane.adv p, .pane.adv span, .pane.adv div, .pane.adv li {
  color: #ffffff !important;
}

#advs button,
.pane.adv button {
  background: #ffffff !important;
  color: #064e3b !important;
  font-weight: 800 !important;
  border: none !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2) !important;
  padding: 12px 24px !important;
  cursor: pointer !important;
}

#advs button:hover,
.pane.adv button:hover {
  background: #f0fdfa !important;
  color: #064e3b !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25) !important;
}

/* ==========================================================================
   HOMEPAGE LEFT CARD INTEGRITY (#pubs, .pane.pub - Light Surface)
   ========================================================================== */
#pubs,
.pane.pub {
  background: #fffefb !important;
  color: #334155 !important;
}

#pubs h1, #pubs h2, #pubs h3, #pubs h4,
.pane.pub h1, .pane.pub h2, .pane.pub h3, .pane.pub h4 {
  color: #0f172a !important;
  font-weight: 800 !important;
}

#pubs .who,
.pane.pub .who {
  color: #0f766e !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
}

#pubs b, #pubs div b, #pubs li b,
.pane.pub b, .pane.pub div b, .pane.pub li b {
  color: #0f172a !important;
  font-weight: 700 !important;
}

#pubs em, #pubs div em, #pubs li em,
.pane.pub em, .pane.pub div em, .pane.pub li em {
  color: #334155 !important;
  font-style: normal !important;
  opacity: 1 !important;
}

#pubs p, #pubs span, #pubs div, #pubs li,
.pane.pub p, .pane.pub span, .pane.pub div, .pane.pub li {
  color: #334155 !important;
}

#pubs ol.flowsteps li .n,
.pane.pub ol.flowsteps li .n {
  background: #f1f5f9 !important;
  color: #0f766e !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 50% !important;
  font-weight: 800 !important;
}

#pubs button,
.pane.pub button {
  background: linear-gradient(180deg, #0f766e 0%, #0d6962 100%) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  border: 1px solid #0d5f59 !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
  padding: 12px 24px !important;
  cursor: pointer !important;
}

#pubs button:hover,
.pane.pub button:hover {
  background: linear-gradient(180deg, #115e59 0%, #0f766e 100%) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(15, 118, 110, 0.25) !important;
}

.cta-band button {
  border-radius: 8px !important;
  font-weight: 700 !important;
}

/* ==========================================================================
   MODAL & POPUP CLOSE "X" BUTTON GEOMETRIC CENTERING
   ========================================================================== */
#gfx-reg .rg-x,
#gfx-ct .x,
.sheet-x,
.modal-close,
button.close-btn,
button.sheet-x,
button.x,
[data-giftclose] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  padding: 0 !important;
  text-align: center !important;
  vertical-align: middle !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  box-sizing: border-box !important;
  border-radius: 50% !important;
  font-size: 18px !important;
}

#gfx-reg .rg-x svg,
#gfx-ct .x svg,
.sheet-x svg,
.modal-close svg {
  display: block !important;
  margin: auto !important;
  pointer-events: none !important;
  width: 18px !important;
  height: 18px !important;
}


/* ==========================================================================
   BUTTON TEXT & CONTRAST SYSTEMIC FIX (WCAG AAA)
   Ensures ALL buttons with dark / green / teal / primary backgrounds
   render 100% crisp white text (#ffffff) on all internal spans, b, strong, divs
   ========================================================================== */

/* Universal button child color inheritance: any child inside a button inherits the button text color */
button span,
button b,
button strong,
button small,
button div,
button i,
.btn span,
.btn b,
.btn strong,
.btn small,
.btn div,
.bigbtn span,
.bigbtn b,
.bigbtn strong,
.pri span,
.pri b,
.adv-new-big span,
#adv-new-big span,
[role="button"] span {
  color: inherit !important;
}

/* Explicit white color on all action buttons and their children */
button:not(.ghost):not(.sheet-x):not([data-t]):not([data-cat]):not(.catpick450-m button):not(.mbrich-bar button):not(.gn-role-btn):not(.btn-kitur-trigger):not(.kitur-copy-btn):not(.pwiz-btn-demo-conn):not(.pwiz-copy-code-btn):not(#pwiz-btn-select-all):not(#pwiz-btn-clear-all):not(#pwiz-back-step-1):not(#pwiz-back-step-2):not(#pwiz-btn-edit-settings):not(#mwa-btn-reload):not(#mtg-btn-reload):not(#signout):not(#gologin):not(.gbtn-official):not(#wl-more),
.bigbtn,
.pri,
.adv-new-big,
#adv-new-big,
#passlogin,
#sendlink.auth-btn-magic,
#lc-go,
#c-submit,
.c-save,
#mkgo,
#topup-go,
#ob-save,
.ob-btn,
.pk273-btn,
.pk273-auto,
.ag272-go,
.col278-go,
#ct-send,
#ct-next,
.kitur-submit-btn,
.kitur-apply-btn,
#kitur-btn-submit,
#kitur-std-submit,
#pwiz-btn-code,
#pwiz-goto-step-2,
#pwiz-goto-step-3,
#pwiz-btn-finish-to-dashboard,
#pwiz-btn-activate-monetization,
#btn-open-wizard-p0,
#pub-tg-chadd,
#crm-fast-export-btn,
#po-export-csv,
#btn-adm-test-broadcast,
button[class*="pri"],
button[class*="primary"],
.btn-primary {
  color: #ffffff !important;
}

button:not(.ghost):not(.sheet-x):not([data-t]):not([data-cat]):not(.catpick450-m button):not(.mbrich-bar button):not(.gn-role-btn):not(.btn-kitur-trigger):not(.kitur-copy-btn):not(.pwiz-btn-demo-conn):not(.pwiz-copy-code-btn):not(#pwiz-btn-select-all):not(#pwiz-btn-clear-all):not(#pwiz-back-step-1):not(#pwiz-back-step-2):not(#pwiz-btn-edit-settings):not(#mwa-btn-reload):not(#mtg-btn-reload):not(#signout):not(#gologin):not(.gbtn-official):not(#wl-more) *,
.bigbtn *,
.pri *,
.adv-new-big *,
#adv-new-big *,
#passlogin *,
#sendlink.auth-btn-magic *,
#lc-go *,
#c-submit *,
.c-save *,
#mkgo *,
#topup-go *,
#ob-save *,
.ob-btn *,
.pk273-btn *,
.pk273-auto *,
.ag272-go *,
.col278-go *,
#ct-send *,
#ct-next *,
.kitur-submit-btn *,
.kitur-apply-btn *,
#kitur-btn-submit *,
#kitur-std-submit *,
#pwiz-btn-code *,
#pwiz-goto-step-2 *,
#pwiz-goto-step-3 *,
#pwiz-btn-finish-to-dashboard *,
#pwiz-btn-activate-monetization *,
#btn-open-wizard-p0 *,
#pub-tg-chadd *,
#crm-fast-export-btn *,
#po-export-csv *,
#btn-adm-test-broadcast *,
button[class*="pri"] *,
button[class*="primary"] *,
.btn-primary * {
  color: #ffffff !important;
}

/* Ensure SVG icons inside white-text buttons stay crisp white */
button:not(.ghost):not(.sheet-x):not([data-t]):not([data-cat]):not(.catpick450-m button):not(.mbrich-bar button):not(.gn-role-btn):not(.btn-kitur-trigger):not(.kitur-copy-btn):not(.pwiz-btn-demo-conn):not(.pwiz-copy-code-btn):not(#pwiz-btn-select-all):not(#pwiz-btn-clear-all):not(#pwiz-back-step-1):not(#pwiz-back-step-2):not(#pwiz-btn-edit-settings):not(#mwa-btn-reload):not(#mtg-btn-reload):not(#signout):not(#gologin):not(.gbtn-official):not(#wl-more) svg,
.bigbtn svg,
.pri svg,
#btn-open-wizard-p0 svg,
#pub-tg-chadd svg,
.kitur-submit-btn svg,
.kitur-apply-btn svg {
  stroke: #ffffff !important;
  color: #ffffff !important;
}

/* Google Official Button - STRICT DARK TEXT ON WHITE */
button#gologin,
.gbtn-official,
#gologin *,
.gbtn-official * {
  background-color: #ffffff !important;
  color: #1f2937 !important;
  border-color: #dadce0 !important;
}

/* HIGH-CONTRAST WCAG AAA FIX FOR CONTACT SECTION */
#contact .cta-band,
#contact .cta-band * {
  box-sizing: border-box;
}
#contact .cta-band {
  background: #ffffff !important;
  color: #0f172a !important;
}
#contact .cta-band h2,
#contact .ct-side h2 {
  color: #064e3b !important;
  font-weight: 900 !important;
}
#contact .cta-band p,
#contact .ct-side p {
  color: #1e293b !important;
  font-weight: 500 !important;
}
#contact .ct-side .ct-brand b {
  color: #0b3d38 !important;
}
#contact .ct-side .ct-brand small {
  color: #0f766e !important;
}
#contact .ct-form label {
  color: #0f172a !important;
  font-weight: 700 !important;
}
#contact .ct-seg button {
  color: #1e293b !important;
  font-weight: 700 !important;
}
#contact .ct-seg button[aria-pressed="true"] {
  color: #064e3b !important;
  background: #ecfdf5 !important;
  border-color: #0d9488 !important;
}
#contact .ct-side .it b {
  color: #0f766e !important;
  font-weight: 700 !important;
}
#contact .ct-side .it,
#contact .ct-side .it span {
  color: #1e293b !important;
}