:root {
  --wa-green: #25D366;
  --wa-green-dark: #128C7E;
  --wa-green-deep: #075E54;
  --wa-green-soft: #dcf8e7;
  --wa-green-tint: #edfdf3;
  --wa-text: #16332b;
  --wa-text-soft: #5e7f75;
  --wa-line: #d8efe0;
  --wa-line-strong: #b9e7c7;
  --wa-shadow: 0 18px 45px rgba(7, 94, 84, 0.08), 0 3px 12px rgba(18, 140, 126, 0.06);
}

html,
body.pro-wa-ui,
body.pro-login {
  background: linear-gradient(180deg, #fbfffc 0%, #f4fcf7 100%) !important;
}

body.pro-wa-ui,
body.pro-login {
  color: var(--wa-text) !important;
}

body.pro-wa-ui::before,
body.pro-login::before {
  opacity: .22 !important;
  background-image:
    linear-gradient(rgba(37, 211, 102, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37, 211, 102, .055) 1px, transparent 1px) !important;
}

/* Sidebar */
body.pro-wa-ui .pro-sidebar {
  background: linear-gradient(180deg, #ffffff 0%, #f5fdf8 100%) !important;
  border-right: 1px solid var(--wa-line) !important;
  box-shadow: 8px 0 30px rgba(18, 140, 126, 0.06) !important;
}

.pro-brand {
  border-bottom: 1px solid var(--wa-line) !important;
}

.pro-brand-logo,
.premium-login-logo,
.premium-preview-brand,
.premium-whatsapp-logo {
  background: linear-gradient(145deg, var(--wa-green) 0%, var(--wa-green-dark) 100%) !important;
  color: #fff !important;
  box-shadow: 0 14px 28px rgba(37, 211, 102, 0.20) !important;
}

.pro-brand-copy strong,
.pro-user-card strong,
.pro-page-title strong,
.pro-nav-parent,
.pro-nav-link,
.premium-panel h2,
.premium-login-brand strong,
.premium-mobile-brand strong,
.premium-login-heading h2,
.premium-showcase-copy h1,
.premium-preview-content,
.premium-side-card strong,
.premium-campaign-name strong,
.premium-kpi-card h3,
.premium-kpi-value {
  color: var(--wa-text) !important;
}

.pro-brand-copy small,
.pro-user-card small,
.pro-page-title span,
.pro-nav-section-label,
.premium-panel-head p,
.premium-login-brand small,
.premium-mobile-brand small,
.premium-login-heading p,
.premium-showcase-copy p,
.premium-showcase-kicker,
.premium-kpi-card p,
.premium-side-card small,
.premium-campaign-name small,
.premium-panel-kicker,
.premium-text-link,
.premium-login-footer,
.premium-login-trust,
.premium-login-security small {
  color: var(--wa-text-soft) !important;
}

.pro-workspace-chip,
.pro-sidebar-footer {
  background: linear-gradient(180deg, #f5fff8 0%, #effbf3 100%) !important;
  border: 1px solid var(--wa-line) !important;
}

.pro-workspace-chip small { color: var(--wa-text-soft) !important; }
.pro-workspace-chip strong { color: var(--wa-green-deep) !important; }
.pro-live-dot {
  background: var(--wa-green) !important;
  box-shadow: 0 0 0 5px rgba(37, 211, 102, .12), 0 0 14px rgba(37, 211, 102, .28) !important;
}

.pro-primary-action,
body.pro-wa-ui .btn,
.premium-btn-solid,
.premium-signin-button,
.premium-card-action,
.premium-channel-card > a {
  background: linear-gradient(135deg, var(--wa-green) 0%, var(--wa-green-dark) 100%) !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: 0 12px 26px rgba(18, 140, 126, .18) !important;
}

.pro-primary-action:hover,
body.pro-wa-ui .btn:hover,
.premium-signin-button:hover,
.premium-card-action:hover,
.premium-channel-card > a:hover {
  filter: brightness(1.02);
  transform: translateY(-1px);
}

.pro-nav-link,
.pro-nav-parent {
  color: #40685e !important;
}

.pro-nav-link:hover,
.pro-nav-parent:hover {
  color: var(--wa-green-deep) !important;
  background: #eefbf3 !important;
}

.pro-nav-link.active,
.pro-nav-group.open > .pro-nav-parent {
  color: var(--wa-green-deep) !important;
  background: linear-gradient(90deg, rgba(37, 211, 102, .18), rgba(18, 140, 126, .10)) !important;
  border: 1px solid var(--wa-line-strong) !important;
  box-shadow: inset 3px 0 0 var(--wa-green) !important;
}

.pro-nav-link.active .pro-nav-icon,
.pro-nav-group.open > .pro-nav-parent .pro-nav-icon,
.pro-nav-icon svg,
.premium-panel-kicker,
.premium-text-link,
.premium-status,
.premium-login-kicker,
.premium-security-icon,
.premium-showcase-kicker i {
  color: var(--wa-green-dark) !important;
}

.pro-nav-sub::before {
  background: rgba(37, 211, 102, .16) !important;
}

.pro-avatar {
  background: linear-gradient(145deg, rgba(37, 211, 102, .18), rgba(18, 140, 126, .12)) !important;
  border-color: var(--wa-line-strong) !important;
}

.pro-logout,
.pro-wallet,
.pro-business-switch select,
.pro-menu-search input,
body.pro-wa-ui input[type="text"],
body.pro-wa-ui input[type="email"],
body.pro-wa-ui input[type="number"],
body.pro-wa-ui input[type="password"],
body.pro-wa-ui input[type="url"],
body.pro-wa-ui input[type="tel"],
body.pro-wa-ui input[type="date"],
body.pro-wa-ui input[type="datetime-local"],
body.pro-wa-ui select,
body.pro-wa-ui textarea,
.premium-field,
.premium-field input {
  background: #fff !important;
  border-color: var(--wa-line) !important;
  color: var(--wa-text) !important;
  box-shadow: none !important;
}

.pro-menu-search input:focus,
body.pro-wa-ui input:focus,
body.pro-wa-ui select:focus,
body.pro-wa-ui textarea:focus,
.premium-field:focus-within {
  border-color: rgba(18, 140, 126, .45) !important;
  box-shadow: 0 0 0 4px rgba(37, 211, 102, .10) !important;
}

body.pro-wa-ui .pro-topbar {
  background: rgba(255,255,255,.92) !important;
  border-bottom: 1px solid var(--wa-line) !important;
  box-shadow: 0 8px 24px rgba(18, 140, 126, 0.04) !important;
}

body.pro-wa-ui .card,
body.pro-wa-ui .suite-card,
body.pro-wa-ui .project-card,
body.pro-wa-ui .event-box,
body.pro-wa-ui .note-box,
body.pro-wa-ui .compact-card,
.premium-kpi-card,
.premium-panel,
.premium-side-card,
.premium-login-card,
.premium-product-preview,
.premium-preview-main,
.premium-preview-sidebar,
.premium-preview-float,
.chat-sidebar,
.chat-left-panel,
.chat-shell,
.table-wrap,
.table-responsive {
  background: #fff !important;
  border: 1px solid var(--wa-line) !important;
  box-shadow: var(--wa-shadow) !important;
}

.premium-dashboard-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #ffffff 0%, #f0fff6 55%, #e3f9ec 100%) !important;
  border: 1px solid var(--wa-line-strong) !important;
  box-shadow: var(--wa-shadow) !important;
}

.premium-dashboard-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at top right, rgba(37, 211, 102, 0.16), transparent 26%),
    radial-gradient(circle at bottom left, rgba(18, 140, 126, 0.10), transparent 22%);
  pointer-events: none;
}

.premium-hero-copy,
.premium-hero-content,
.premium-insight-grid,
.premium-performance-grid,
.premium-table-wrap,
.premium-dashboard-layout,
.premium-dashboard-secondary,
.premium-dashboard-primary {
  position: relative;
  z-index: 1;
}

.premium-live-badge,
.premium-plan-pill,
.premium-kpi-chip,
.pro-wallet {
  background: #ecfbf2 !important;
  color: var(--wa-green-deep) !important;
  border: 1px solid var(--wa-line-strong) !important;
}

.premium-hero-actions .premium-btn-light,
body.pro-wa-ui .btn.secondary,
body.pro-wa-ui .btn.ghost,
.premium-btn-light {
  background: #fff !important;
  color: var(--wa-green-deep) !important;
  border: 1px solid var(--wa-line-strong) !important;
  box-shadow: none !important;
}

.premium-kpi-emerald,
.premium-kpi-teal,
.premium-kpi-blue,
.premium-kpi-violet,
.premium-kpi-amber {
  background: linear-gradient(180deg, #ffffff 0%, #f8fffb 100%) !important;
}

.premium-kpi-top,
.premium-kpi-footer,
.premium-side-card-head,
.premium-channel-meta,
.premium-usage-detail,
.premium-login-trust,
.premium-login-security {
  border-color: var(--wa-line) !important;
}

.premium-kpi-icon,
.premium-campaign-icon,
.premium-status i,
.premium-field-icon,
.premium-security-icon,
.premium-preview-cards article i,
.premium-preview-title i,
.premium-preview-inbox article i {
  background: #ecfbf2 !important;
  color: var(--wa-green-dark) !important;
}

.premium-ring,
.premium-usage-donut {
  background:
    conic-gradient(var(--ring, var(--wa-green-dark)) calc(var(--value) * 1%), rgba(37, 211, 102, .12) 0) !important;
}

.premium-mini-line,
.premium-cell-metric i,
.premium-insight-track {
  background: #e9f8ef !important;
}

.premium-mini-line span,
.premium-cell-metric em,
.premium-insight-track span,
.premium-kpi-footer i {
  background: linear-gradient(90deg, var(--wa-green) 0%, var(--wa-green-dark) 100%) !important;
}

.premium-table thead th,
.pro-table thead th,
table thead th {
  background: #f1fdf6 !important;
  color: var(--wa-green-deep) !important;
  border-bottom: 1px solid var(--wa-line) !important;
}

.premium-table tbody tr:hover,
.pro-table tbody tr:hover,
table tbody tr:hover {
  background: #fbfffc !important;
}

.premium-status {
  background: #ecfbf2 !important;
  border: 1px solid var(--wa-line-strong) !important;
}

.premium-channel-card {
  background: linear-gradient(180deg, #ffffff 0%, #f1fdf6 100%) !important;
}

.premium-channel-card .premium-side-card-glow {
  background: radial-gradient(circle, rgba(37, 211, 102, 0.18) 0%, rgba(37, 211, 102, 0) 72%) !important;
}

.premium-quick-links a,
.pro-quick-links a,
.pro-card-link {
  background: #f6fff9 !important;
  border: 1px solid var(--wa-line) !important;
  color: var(--wa-text) !important;
}

.premium-quick-links a:hover,
.pro-quick-links a:hover,
.pro-card-link:hover {
  background: #ecfbf2 !important;
  border-color: var(--wa-line-strong) !important;
}

/* Login experience */
body.pro-login {
  min-height: 100vh;
  background:
    radial-gradient(circle at top left, rgba(37, 211, 102, .10), transparent 22%),
    radial-gradient(circle at bottom right, rgba(18, 140, 126, .08), transparent 24%),
    linear-gradient(180deg, #fcfffd 0%, #f5fcf8 100%) !important;
}

.premium-login-showcase {
  background: linear-gradient(145deg, #ffffff 0%, #f0fff6 62%, #e6f9ee 100%) !important;
  border-right: 1px solid var(--wa-line) !important;
}

.premium-login-grid {
  background-image: linear-gradient(rgba(37, 211, 102, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(37, 211, 102, .06) 1px, transparent 1px) !important;
}

.premium-login-orb-one,
.premium-hero-orb-one,
.premium-preview-float-one {
  background: radial-gradient(circle, rgba(37, 211, 102, .20) 0%, rgba(37, 211, 102, 0) 68%) !important;
}

.premium-login-orb-two,
.premium-hero-orb-two,
.premium-preview-float-two {
  background: radial-gradient(circle, rgba(18, 140, 126, .18) 0%, rgba(18, 140, 126, 0) 68%) !important;
}

.premium-showcase-kicker,
.premium-login-kicker {
  background: #ecfbf2 !important;
  border: 1px solid var(--wa-line-strong) !important;
}

.premium-login-card {
  background: rgba(255,255,255,.96) !important;
}

.premium-login-security {
  background: #f6fff9 !important;
}

.premium-password-toggle {
  color: var(--wa-green-dark) !important;
}

.premium-preview-topbar,
.premium-preview-cards article,
.premium-preview-chart,
.premium-preview-inbox,
.premium-preview-title,
.premium-preview-lower {
  background: #f8fffb !important;
  border-color: var(--wa-line) !important;
}

.premium-preview-topbar span,
.premium-preview-topbar div i,
.premium-preview-topbar div b,
.premium-preview-cards article span,
.premium-preview-cards article b,
.premium-preview-title b,
.premium-preview-inbox span,
.premium-preview-inbox article b,
.premium-preview-chart span {
  background: #dff7e8 !important;
}

.premium-preview-chart svg,
.premium-preview-float span,
.premium-preview-brand,
.premium-text-link span,
.premium-card-action span {
  color: var(--wa-green-dark) !important;
}

/* General utility cleanup */
.alert.error {
  background: #fff1f1 !important;
  border-color: #ffd6d6 !important;
}

.alert.success,
.alert.warning,
.alert {
  border-radius: 14px !important;
}

@media (max-width: 1024px) {
  body.pro-wa-ui .pro-main {
    margin-left: 0 !important;
  }
  body.pro-wa-ui .pro-sidebar {
    box-shadow: 18px 0 36px rgba(18, 140, 126, .12) !important;
  }
}