/*
 * Pro WhatsApp SaaS UI v2
 * Clean interface layer. Existing PHP workflows and backend logic remain unchanged.
 */
:root {
  --pro-bg: #f5f7f8;
  --pro-surface: #ffffff;
  --pro-surface-soft: #f8faf9;
  --pro-surface-green: #edf9f2;
  --pro-sidebar: #0b1f18;
  --pro-sidebar-soft: #102a20;
  --pro-text: #12221b;
  --pro-text-soft: #52645c;
  --pro-text-faint: #7a8a82;
  --pro-border: #e3e9e6;
  --pro-border-strong: #d4ded9;
  --pro-green: var(--brand-primary, #16a34a);
  --pro-green-dark: #0f7a3e;
  --pro-teal: var(--brand-secondary, #0f766e);
  --pro-red: #dc2626;
  --pro-orange: #d97706;
  --pro-blue: #2563eb;
  --pro-shadow-sm: 0 1px 2px rgba(15, 31, 24, .04), 0 1px 6px rgba(15, 31, 24, .03);
  --pro-shadow-md: 0 14px 35px rgba(15, 31, 24, .08);
  --pro-radius-sm: 8px;
  --pro-radius: 12px;
  --pro-radius-lg: 18px;
  --pro-sidebar-width: 264px;
  --pro-topbar-height: 72px;
}

* { box-sizing: border-box; }
html { background: var(--pro-bg); }
body.pro-wa-ui,
body.pro-login {
  margin: 0;
  color: var(--pro-text);
  background: var(--pro-bg);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
body.pro-wa-ui a { color: inherit; }
body.pro-wa-ui button,
body.pro-wa-ui input,
body.pro-wa-ui select,
body.pro-wa-ui textarea,
body.pro-login button,
body.pro-login input { font: inherit; }
body.pro-wa-ui h1,
body.pro-wa-ui h2,
body.pro-wa-ui h3,
body.pro-wa-ui p { margin-top: 0; }

/* Application shell */
body.pro-wa-ui .pro-shell { min-height: 100vh; background: var(--pro-bg); }
body.pro-wa-ui .pro-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 50;
  display: flex;
  width: var(--pro-sidebar-width);
  height: 100vh;
  flex-direction: column;
  overflow: hidden;
  color: #d7e5de;
  background: var(--pro-sidebar);
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.pro-brand {
  display: flex;
  min-height: 83px;
  align-items: center;
  gap: 11px;
  padding: 18px 20px;
  color: #fff !important;
  border-bottom: 1px solid rgba(255,255,255,.08);
  text-decoration: none;
}
.pro-brand-logo,
.pro-login-logo {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  place-items: center;
  overflow: hidden;
  color: #fff;
  background: var(--pro-green);
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
}
.pro-brand-logo img,
.pro-login-logo img { width: 100%; height: 100%; object-fit: contain; background: #fff; padding: 3px; }
.pro-brand-logo b,
.pro-login-logo b { font-size: 18px; font-weight: 800; }
.pro-brand-copy { min-width: 0; display: flex; flex-direction: column; }
.pro-brand-copy strong { overflow: hidden; font-size: 16px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.pro-brand-copy small { overflow: hidden; margin-top: 2px; color: #8eaaa0; font-size: 10.5px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }

.pro-workspace-chip {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 14px 16px 8px;
  padding: 10px 11px;
  color: #cfe2d8;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 10px;
}
.pro-workspace-chip > span:last-child { display: flex; min-width: 0; flex-direction: column; }
.pro-workspace-chip small { color: #789589; font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.pro-workspace-chip strong { overflow: hidden; margin-top: 1px; font-size: 11.5px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.pro-live-dot { width: 8px; height: 8px; flex: 0 0 8px; background: #3ddc84; border-radius: 50%; box-shadow: 0 0 0 4px rgba(61,220,132,.1); }

.pro-primary-action {
  display: flex !important;
  min-height: 43px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 8px 16px 10px;
  padding: 10px 14px;
  color: #fff !important;
  background: var(--pro-green) !important;
  border: 0 !important;
  border-radius: 10px !important;
  font-size: 12.5px;
  font-weight: 750;
  text-decoration: none !important;
  box-shadow: 0 8px 22px rgba(22,163,74,.16) !important;
  transition: transform .18s ease, filter .18s ease;
}
.pro-primary-action:hover { filter: brightness(.95); transform: translateY(-1px); }
.pro-primary-action span { font-size: 18px; font-weight: 400; line-height: 1; }

.pro-nav {
  display: flex !important;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 3px;
  margin: 0 !important;
  padding: 7px 12px 18px !important;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.13) transparent;
}
.pro-nav::-webkit-scrollbar { width: 5px; }
.pro-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 99px; }
.pro-nav-section-label {
  margin: 12px 10px 5px;
  color: #607b70;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.pro-nav-link,
.pro-nav-parent {
  display: flex !important;
  width: 100%;
  min-height: 40px;
  align-items: center;
  gap: 10px;
  padding: 8px 10px !important;
  color: #a9bfb5 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 9px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-align: left;
  text-decoration: none !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: background .16s ease, color .16s ease;
}
.pro-nav-link:hover,
.pro-nav-parent:hover { color: #fff !important; background: rgba(255,255,255,.06) !important; }
.pro-nav-link.active { color: #fff !important; background: rgba(22,163,74,.2) !important; box-shadow: inset 3px 0 0 var(--pro-green) !important; }
.pro-nav-icon { display: grid; width: 21px; height: 21px; flex: 0 0 21px; place-items: center; color: currentColor; }
.pro-nav-icon svg { width: 18px !important; height: 18px !important; fill: currentColor !important; }
.pro-nav-icon img { width: 18px; height: 18px; object-fit: contain; filter: grayscale(1) brightness(1.7); opacity: .8; }
.pro-nav-label { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pro-nav-caret { margin-left: auto; color: #607b70; font-size: 14px; transition: transform .16s ease; }
.pro-nav-group.open > .pro-nav-parent .pro-nav-caret { transform: rotate(180deg); }
.pro-nav-sub { display: none; position: relative; gap: 2px; padding: 3px 0 4px 15px; }
.pro-nav-sub::before { position: absolute; top: 3px; bottom: 5px; left: 20px; width: 1px; content: ""; background: rgba(255,255,255,.08); }
.pro-nav-group.open > .pro-nav-sub { display: flex; flex-direction: column; }
.pro-nav-sub .pro-nav-link { min-height: 35px; padding-top: 6px !important; padding-bottom: 6px !important; font-size: 11.5px !important; }
.pro-nav-sub .pro-nav-icon { width: 18px; height: 18px; flex-basis: 18px; }
.pro-nav-sub .pro-nav-icon svg { width: 15px !important; height: 15px !important; }

.pro-sidebar-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.pro-user-card { display: flex; min-width: 0; flex: 1; align-items: center; gap: 9px; color: #dce9e3 !important; text-decoration: none; }
.pro-user-card > span:nth-child(2) { display: flex; min-width: 0; flex-direction: column; }
.pro-user-card strong { overflow: hidden; font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }
.pro-user-card small { color: #759287; font-size: 9.5px; }
.pro-avatar { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; color: #d9ffe8; background: rgba(22,163,74,.2); border: 1px solid rgba(71,221,127,.2); border-radius: 10px; font-size: 12px; font-weight: 800; }
.pro-logout { display: grid; width: 32px; height: 32px; place-items: center; color: #789589 !important; border-radius: 8px; text-decoration: none; transform: rotate(90deg); }
.pro-logout:hover { color: #fff !important; background: rgba(255,255,255,.06); }

body.pro-wa-ui .pro-main { min-height: 100vh; margin-left: var(--pro-sidebar-width) !important; background: var(--pro-bg) !important; }
body.pro-wa-ui .pro-topbar {
  position: sticky !important;
  top: 0;
  z-index: 40;
  display: flex !important;
  min-height: var(--pro-topbar-height) !important;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 0 28px !important;
  background: rgba(255,255,255,.94) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--pro-border) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: blur(14px);
}
.pro-topbar-left,
.pro-topbar-right { display: flex; align-items: center; gap: 12px; }
.pro-page-title { display: flex; flex-direction: column; }
.pro-page-title strong { color: var(--pro-text); font-size: 15px; font-weight: 750; line-height: 1.25; }
.pro-page-title span { color: var(--pro-text-faint); font-size: 10.5px; line-height: 1.3; }
.pro-menu-btn { display: none !important; width: 38px !important; height: 38px !important; place-items: center; padding: 0 !important; color: var(--pro-text) !important; background: #fff !important; border: 1px solid var(--pro-border) !important; border-radius: 10px !important; box-shadow: none !important; }
.pro-menu-search { position: relative; display: flex; align-items: center; }
.pro-menu-search > span { position: absolute; left: 12px; color: var(--pro-text-faint); font-size: 16px; pointer-events: none; }
.pro-menu-search input {
  width: 210px;
  height: 38px;
  padding: 0 12px 0 35px !important;
  color: var(--pro-text) !important;
  background: var(--pro-surface-soft) !important;
  border: 1px solid var(--pro-border) !important;
  border-radius: 10px !important;
  outline: none;
  box-shadow: none !important;
  transition: width .18s ease, border-color .18s ease, background .18s ease;
}
.pro-menu-search input:focus { width: 250px; background: #fff !important; border-color: rgba(22,163,74,.45) !important; }
.pro-business-switch select {
  max-width: 190px;
  height: 38px !important;
  padding: 0 34px 0 12px !important;
  color: var(--pro-text-soft) !important;
  background-color: #fff !important;
  border: 1px solid var(--pro-border) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}
.pro-wallet { display: flex; height: 38px; align-items: center; gap: 7px; padding: 0 12px; color: var(--pro-text) !important; background: var(--pro-surface-green); border: 1px solid #d8efdf; border-radius: 10px; text-decoration: none; }
.pro-wallet small { color: var(--pro-text-soft); font-size: 9.5px; font-weight: 650; text-transform: uppercase; }
.pro-wallet strong { font-size: 11.5px; }

body.pro-wa-ui .pro-content { width: 100%; max-width: 1540px; margin: 0 auto; padding: 28px 30px 44px !important; }

/* Shared application controls */
body.pro-wa-ui .btn {
  display: inline-flex !important;
  min-height: 40px !important;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 15px !important;
  color: #fff !important;
  background: var(--pro-green) !important;
  border: 1px solid var(--pro-green) !important;
  border-radius: 9px !important;
  font-size: 12px !important;
  font-weight: 720 !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: filter .16s ease, transform .16s ease, border-color .16s ease;
}
body.pro-wa-ui .btn:hover { filter: brightness(.96); transform: translateY(-1px); }
body.pro-wa-ui .btn.secondary,
body.pro-wa-ui .btn.ghost { color: var(--pro-text) !important; background: #fff !important; border-color: var(--pro-border-strong) !important; }
body.pro-wa-ui .btn.bad,
body.pro-wa-ui .btn.danger { color: #fff !important; background: var(--pro-red) !important; border-color: var(--pro-red) !important; }
body.pro-wa-ui .btn.small { min-height: 32px !important; padding: 6px 10px !important; font-size: 10.5px !important; border-radius: 8px !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 {
  color: var(--pro-text) !important;
  background: #fff !important;
  border: 1px solid var(--pro-border) !important;
  border-radius: var(--pro-radius) !important;
  box-shadow: var(--pro-shadow-sm) !important;
}
body.pro-wa-ui .card { padding: 20px !important; }
body.pro-wa-ui .grid { gap: 16px !important; }
body.pro-wa-ui .muted { color: var(--pro-text-soft) !important; }

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="search"],
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,
body.pro-wa-ui .input,
body.pro-wa-ui .suite-input {
  min-height: 42px;
  padding: 10px 12px !important;
  color: var(--pro-text) !important;
  background-color: #fff !important;
  border: 1px solid var(--pro-border-strong) !important;
  border-radius: 9px !important;
  outline: none !important;
  box-shadow: none !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}
body.pro-wa-ui textarea { min-height: 110px; resize: vertical; }
body.pro-wa-ui input:focus,
body.pro-wa-ui select:focus,
body.pro-wa-ui textarea:focus,
body.pro-wa-ui .input:focus { border-color: rgba(22,163,74,.55) !important; box-shadow: 0 0 0 3px rgba(22,163,74,.09) !important; }
body.pro-wa-ui label { color: var(--pro-text-soft); font-size: 11.5px; font-weight: 700; }

body.pro-wa-ui .table-wrap,
body.pro-wa-ui .table-responsive { overflow: auto; background: #fff; border: 1px solid var(--pro-border) !important; border-radius: 11px !important; }
body.pro-wa-ui table { width: 100%; border-collapse: collapse !important; color: var(--pro-text); background: #fff !important; }
body.pro-wa-ui th { padding: 11px 13px !important; color: var(--pro-text-faint) !important; background: var(--pro-surface-soft) !important; border: 0 !important; border-bottom: 1px solid var(--pro-border) !important; font-size: 9.5px !important; font-weight: 800 !important; letter-spacing: .055em; text-align: left; text-transform: uppercase; white-space: nowrap; }
body.pro-wa-ui td { padding: 12px 13px !important; color: var(--pro-text-soft) !important; background: #fff !important; border: 0 !important; border-bottom: 1px solid #edf1ef !important; font-size: 11.5px !important; vertical-align: middle; }
body.pro-wa-ui tbody tr:last-child td { border-bottom: 0 !important; }
body.pro-wa-ui tbody tr:hover td { background: #fbfdfc !important; }

body.pro-wa-ui .alert { margin: 0 0 16px !important; padding: 11px 13px !important; border: 1px solid var(--pro-border) !important; border-radius: 10px !important; font-size: 11.5px !important; box-shadow: none !important; }
body.pro-wa-ui .alert.success { color: #126735 !important; background: #effbf3 !important; border-color: #cdeed8 !important; }
body.pro-wa-ui .alert.error { color: #a61b1b !important; background: #fff2f2 !important; border-color: #ffd1d1 !important; }
body.pro-wa-ui .alert.warning { color: #8b5208 !important; background: #fff8e8 !important; border-color: #fae0a9 !important; }

/* Dashboard */
.pro-dashboard-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.pro-dashboard-eyebrow,
.pro-section-kicker { display: block; margin-bottom: 5px; color: var(--pro-green-dark); font-size: 9.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.pro-dashboard-head h1 { margin: 0 0 5px; color: var(--pro-text); font-size: clamp(25px, 2vw, 32px); font-weight: 760; letter-spacing: -.035em; line-height: 1.15; }
.pro-dashboard-head p { margin: 0; color: var(--pro-text-soft); font-size: 12.5px; }
.pro-dashboard-actions { display: flex; gap: 9px; }

.pro-kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 16px; }
.pro-kpi-card { display: flex; min-width: 0; align-items: flex-start; gap: 13px; padding: 18px; background: #fff; border: 1px solid var(--pro-border); border-radius: var(--pro-radius); box-shadow: var(--pro-shadow-sm); }
.pro-kpi-icon { display: grid; width: 38px; height: 38px; flex: 0 0 38px; place-items: center; color: var(--pro-green-dark); background: var(--pro-surface-green); border: 1px solid #d9efe1; border-radius: 10px; font-size: 11px; font-weight: 850; }
.pro-kpi-copy { display: flex; min-width: 0; flex-direction: column; }
.pro-kpi-copy > span { color: var(--pro-text-soft); font-size: 10.5px; font-weight: 650; }
.pro-kpi-copy > strong { margin: 3px 0 1px; color: var(--pro-text); font-size: 24px; font-weight: 760; letter-spacing: -.03em; line-height: 1.1; }
.pro-kpi-copy > small { overflow: hidden; color: var(--pro-text-faint); font-size: 9.5px; text-overflow: ellipsis; white-space: nowrap; }

.pro-dashboard-layout { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(280px, .72fr); gap: 16px; align-items: start; }
.pro-dashboard-main-column,
.pro-dashboard-side-column { display: grid; gap: 16px; min-width: 0; }
.pro-panel { min-width: 0; overflow: hidden; background: #fff; border: 1px solid var(--pro-border); border-radius: var(--pro-radius); box-shadow: var(--pro-shadow-sm); }
.pro-panel-head { display: flex; min-height: 66px; align-items: center; justify-content: space-between; gap: 18px; padding: 15px 18px; border-bottom: 1px solid var(--pro-border); }
.pro-panel-head.compact { min-height: auto; padding-bottom: 12px; border-bottom: 0; }
.pro-panel-head h2 { margin: 0; color: var(--pro-text); font-size: 14px; font-weight: 750; letter-spacing: -.015em; }
.pro-panel-head a { color: var(--pro-green-dark); font-size: 10.5px; font-weight: 750; text-decoration: none; }
.pro-panel-head .pro-section-kicker { margin-bottom: 2px; font-size: 8.5px; }

.pro-performance-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.pro-performance-grid article { display: flex; align-items: center; gap: 13px; padding: 20px 18px; border-right: 1px solid var(--pro-border); }
.pro-performance-grid article:last-child { border-right: 0; }
.pro-performance-grid article > div:last-child { display: flex; min-width: 0; flex-direction: column; }
.pro-performance-grid article strong { color: var(--pro-text); font-size: 11.5px; }
.pro-performance-grid article small { margin-top: 3px; color: var(--pro-text-faint); font-size: 9.5px; }
.pro-ring { --ring-color: var(--pro-green); position: relative; display: grid; width: 60px; height: 60px; flex: 0 0 60px; place-items: center; border-radius: 50%; background: conic-gradient(var(--ring-color) calc(var(--value) * 1%), #edf2ef 0); }
.pro-ring::after { position: absolute; inset: 6px; content: ""; background: #fff; border-radius: 50%; }
.pro-ring span { position: relative; z-index: 1; color: var(--pro-text); font-size: 11px; font-weight: 800; }
.pro-ring.is-danger { --ring-color: #e76c6c; }

.pro-table-wrap { overflow-x: auto; }
.pro-table { width: 100%; border-collapse: collapse; }
.pro-table th { padding: 10px 16px; color: var(--pro-text-faint); background: var(--pro-surface-soft); border-bottom: 1px solid var(--pro-border); font-size: 8.5px; font-weight: 800; letter-spacing: .07em; text-align: left; text-transform: uppercase; white-space: nowrap; }
.pro-table td { padding: 13px 16px; color: var(--pro-text-soft); border-bottom: 1px solid #edf1ef; font-size: 10.5px; vertical-align: middle; white-space: nowrap; }
.pro-table tbody tr:last-child td { border-bottom: 0; }
.pro-table tbody tr:hover td { background: #fbfdfc; }
.pro-table-title { display: flex; flex-direction: column; color: inherit; text-decoration: none; }
.pro-table-title strong { max-width: 240px; overflow: hidden; color: var(--pro-text); font-size: 11px; text-overflow: ellipsis; }
.pro-table-title small { margin-top: 2px; color: var(--pro-text-faint); font-size: 8.8px; }
.pro-status { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; color: var(--pro-text-soft); background: #f3f5f4; border-radius: 999px; font-size: 9px; font-weight: 700; }
.pro-status i { width: 5px; height: 5px; background: #95a39c; border-radius: 50%; }
.pro-status.success { color: #12723b; background: #eaf9ef; }
.pro-status.success i { background: #22a85a; }
.pro-status.warning { color: #94600e; background: #fff6df; }
.pro-status.warning i { background: #e0a01d; }
.pro-status.danger { color: #ad2d2d; background: #fff0f0; }
.pro-status.danger i { background: #de5151; }
.pro-empty-state { display: flex; min-height: 210px; align-items: center; justify-content: center; flex-direction: column; padding: 26px; text-align: center; }
.pro-empty-state > span { display: grid; width: 42px; height: 42px; place-items: center; color: var(--pro-green-dark); background: var(--pro-surface-green); border-radius: 12px; font-size: 17px; }
.pro-empty-state strong { margin-top: 11px; color: var(--pro-text); font-size: 12px; }
.pro-empty-state p { max-width: 340px; margin: 4px 0 12px; color: var(--pro-text-faint); font-size: 10px; }

.pro-channel-card,
.pro-usage-card,
.pro-quick-card { padding: 0 17px 17px; }
.pro-channel-card .pro-panel-head,
.pro-usage-card .pro-panel-head,
.pro-quick-card .pro-panel-head { margin: 0 -17px; padding-left: 17px; padding-right: 17px; }
.pro-channel-status { position: relative; display: flex; align-items: center; gap: 11px; padding: 13px; background: var(--pro-surface-soft); border: 1px solid var(--pro-border); border-radius: 11px; }
.pro-channel-mark { display: grid; width: 38px; height: 38px; flex: 0 0 38px; place-items: center; color: #fff; background: #9ba8a1; border-radius: 50%; font-size: 11px; font-weight: 850; }
.pro-channel-status.connected .pro-channel-mark { background: var(--pro-green); }
.pro-channel-status > div { display: flex; min-width: 0; flex: 1; flex-direction: column; }
.pro-channel-status strong { color: var(--pro-text); font-size: 11px; }
.pro-channel-status small { overflow: hidden; margin-top: 2px; color: var(--pro-text-faint); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.pro-channel-status > i { width: 8px; height: 8px; background: #a6b0ab; border-radius: 50%; }
.pro-channel-status.connected > i { background: #26bd63; box-shadow: 0 0 0 4px rgba(38,189,99,.1); }
.pro-card-link { display: flex; align-items: center; justify-content: space-between; margin-top: 11px; color: var(--pro-green-dark); font-size: 10px; font-weight: 750; text-decoration: none; }
.pro-usage-percent { color: var(--pro-green-dark); font-size: 12px; font-weight: 800; }
.pro-usage-numbers { display: flex; align-items: baseline; gap: 5px; margin: 6px 0 10px; }
.pro-usage-numbers strong { color: var(--pro-text); font-size: 22px; font-weight: 770; letter-spacing: -.025em; }
.pro-usage-numbers span { color: var(--pro-text-faint); font-size: 9.5px; }
.pro-progress { height: 7px; overflow: hidden; background: #edf2ef; border-radius: 99px; }
.pro-progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--pro-green), var(--pro-teal)); border-radius: inherit; }
.pro-usage-meta { display: flex; justify-content: space-between; margin-top: 8px; color: var(--pro-text-faint); font-size: 9px; }
.pro-usage-meta a { color: var(--pro-green-dark); font-weight: 700; text-decoration: none; }
.pro-quick-links { display: grid; gap: 7px; }
.pro-quick-links a { display: flex; align-items: center; gap: 10px; padding: 10px; color: inherit; background: var(--pro-surface-soft); border: 1px solid transparent; border-radius: 10px; text-decoration: none; transition: border-color .15s ease, background .15s ease; }
.pro-quick-links a:hover { background: #fff; border-color: var(--pro-border-strong); }
.pro-quick-links a > span { display: grid; width: 31px; height: 31px; flex: 0 0 31px; place-items: center; color: var(--pro-green-dark); background: var(--pro-surface-green); border-radius: 8px; font-size: 12px; }
.pro-quick-links a > div { display: flex; min-width: 0; flex-direction: column; }
.pro-quick-links strong { color: var(--pro-text); font-size: 10px; }
.pro-quick-links small { overflow: hidden; margin-top: 1px; color: var(--pro-text-faint); font-size: 8.5px; text-overflow: ellipsis; white-space: nowrap; }

/* Legacy module polish */
body.pro-wa-ui .page-head,
body.pro-wa-ui .suite-page-head,
body.pro-wa-ui .ee-page-head { display: flex !important; align-items: flex-end !important; justify-content: space-between !important; gap: 18px !important; margin: 0 0 20px !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; }
body.pro-wa-ui .page-head h1,
body.pro-wa-ui .suite-page-head h1,
body.pro-wa-ui .ee-page-head h1 { margin: 0 0 4px !important; color: var(--pro-text) !important; font-size: 25px !important; font-weight: 760 !important; letter-spacing: -.03em !important; }
body.pro-wa-ui .page-head p,
body.pro-wa-ui .suite-page-head p,
body.pro-wa-ui .ee-page-head p { margin: 0 !important; color: var(--pro-text-soft) !important; font-size: 11.5px !important; }
body.pro-wa-ui .tabs,
body.pro-wa-ui .suite-tabs { gap: 6px !important; padding: 4px !important; background: #edf2ef !important; border: 0 !important; border-radius: 10px !important; }
body.pro-wa-ui .tabs a,
body.pro-wa-ui .suite-tabs a { padding: 8px 11px !important; color: var(--pro-text-soft) !important; background: transparent !important; border: 0 !important; border-radius: 8px !important; font-size: 10.5px !important; font-weight: 700 !important; }
body.pro-wa-ui .tabs a.active,
body.pro-wa-ui .suite-tabs a.active { color: var(--pro-text) !important; background: #fff !important; box-shadow: var(--pro-shadow-sm) !important; }
body.pro-wa-ui .badge,
body.pro-wa-ui .status-badge { padding: 4px 8px !important; border-radius: 999px !important; font-size: 9px !important; font-weight: 700 !important; }

/* Inbox and dense operational screens */
body.pro-wa-ui .chat-suite,
body.pro-wa-ui .chat-shell { overflow: hidden !important; background: #fff !important; border: 1px solid var(--pro-border) !important; border-radius: var(--pro-radius) !important; box-shadow: var(--pro-shadow-sm) !important; }
body.pro-wa-ui .chat-left-panel,
body.pro-wa-ui .chat-sidebar { background: #fbfdfc !important; border-right: 1px solid var(--pro-border) !important; }
body.pro-wa-ui .chat-message,
body.pro-wa-ui .message-bubble { border-radius: 12px !important; box-shadow: none !important; }

/* Login */
body.pro-login { min-height: 100vh; overflow-x: hidden; background: #fff; }
.pro-login-shell { display: grid; min-height: 100vh; grid-template-columns: minmax(460px, .95fr) minmax(500px, 1.05fr); }
.pro-login-showcase { position: relative; display: flex; overflow: hidden; flex-direction: column; justify-content: space-between; padding: 34px clamp(38px, 5vw, 76px); color: #fff; background: #081e16; }
.pro-login-showcase::before { position: absolute; inset: 0; content: ""; background: radial-gradient(circle at 18% 15%, rgba(35,195,99,.22), transparent 31%), radial-gradient(circle at 100% 90%, rgba(15,118,110,.22), transparent 34%); pointer-events: none; }
.pro-login-showcase::after { position: absolute; right: -180px; bottom: -240px; width: 540px; height: 540px; content: ""; border: 1px solid rgba(255,255,255,.08); border-radius: 50%; box-shadow: 0 0 0 70px rgba(255,255,255,.025), 0 0 0 140px rgba(255,255,255,.018); pointer-events: none; }
.pro-login-brand,
.pro-showcase-copy,
.pro-login-foot { position: relative; z-index: 1; }
.pro-login-brand { display: flex; align-items: center; gap: 11px; }
.pro-login-brand > span:last-child { display: flex; flex-direction: column; }
.pro-login-brand strong { font-size: 15px; }
.pro-login-brand small { margin-top: 1px; color: #8ca99d; font-size: 9.5px; }
.pro-showcase-copy { max-width: 580px; margin: 70px 0; }
.pro-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 19px; color: #a9c6b8; font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.pro-eyebrow i { width: 7px; height: 7px; background: #34d979; border-radius: 50%; box-shadow: 0 0 0 4px rgba(52,217,121,.12); }
.pro-showcase-copy h1 { max-width: 590px; margin: 0; color: #fff; font-size: clamp(34px, 4vw, 54px); font-weight: 690; letter-spacing: -.045em; line-height: 1.08; }
.pro-showcase-copy > p { max-width: 550px; margin: 20px 0 30px; color: #9fb8ad; font-size: 13px; line-height: 1.75; }
.pro-feature-list { display: grid; gap: 10px; max-width: 520px; }
.pro-feature-list article { display: flex; align-items: flex-start; gap: 13px; padding: 13px 14px; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.07); border-radius: 11px; backdrop-filter: blur(4px); }
.pro-feature-list article > span { display: grid; width: 28px; height: 28px; flex: 0 0 28px; place-items: center; color: #4ce18b; background: rgba(52,217,121,.09); border-radius: 8px; font-size: 8.5px; font-weight: 800; }
.pro-feature-list article > div { display: flex; flex-direction: column; }
.pro-feature-list strong { color: #effbf5; font-size: 10.5px; }
.pro-feature-list small { margin-top: 2px; color: #829f92; font-size: 9.5px; line-height: 1.55; }
.pro-login-foot { color: #69877a; font-size: 9.5px; }

.pro-login-form-side { display: grid; position: relative; place-items: center; padding: 46px clamp(34px, 6vw, 92px); background: #fff; }
.pro-login-mobile-brand { display: none; }
.pro-login-card { width: 100%; max-width: 430px; }
.pro-login-heading { margin-bottom: 31px; }
.pro-login-kicker { display: block; margin-bottom: 8px; color: var(--pro-green-dark); font-size: 9px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.pro-login-heading h2 { margin: 0; color: var(--pro-text); font-size: 31px; font-weight: 760; letter-spacing: -.035em; line-height: 1.2; }
.pro-login-heading p { margin: 7px 0 0; color: var(--pro-text-soft); font-size: 12px; }
.pro-login .alert { margin: 0 0 15px; padding: 11px 13px; color: #9d2525; background: #fff4f4; border: 1px solid #ffd7d7; border-radius: 10px; font-size: 10.5px; }
.pro-login .alert.success { color: #126735; background: #effbf3; border-color: #cdeed8; }
.pro-signin-form { display: flex; flex-direction: column; }
.pro-signin-form > label { margin: 0 0 7px; color: var(--pro-text-soft); font-size: 10.5px; font-weight: 730; }
.pro-field { position: relative; display: flex; align-items: center; margin-bottom: 19px; }
.pro-field-icon { position: absolute; left: 13px; z-index: 1; display: grid; width: 20px; place-items: center; color: #82938a; font-size: 11px; font-weight: 750; pointer-events: none; }
.pro-field input { width: 100%; height: 50px; padding: 0 48px 0 42px; color: var(--pro-text); background: #fff; border: 1px solid var(--pro-border-strong); border-radius: 11px; outline: none; box-shadow: none; transition: border-color .16s ease, box-shadow .16s ease; }
.pro-field input::placeholder { color: #a2aea8; }
.pro-field input:focus { border-color: rgba(22,163,74,.58); box-shadow: 0 0 0 4px rgba(22,163,74,.08); }
.pro-password-toggle { position: absolute; right: 9px; z-index: 1; padding: 7px 8px; color: var(--pro-green-dark); background: transparent; border: 0; border-radius: 7px; font-size: 9.5px; font-weight: 750; cursor: pointer; }
.pro-signin-button { display: flex; width: 100%; height: 50px; align-items: center; justify-content: space-between; margin-top: 3px; padding: 0 17px; color: #fff; background: var(--pro-green); border: 0; border-radius: 11px; font-size: 11.5px; font-weight: 760; box-shadow: 0 10px 24px rgba(22,163,74,.16); cursor: pointer; transition: filter .16s ease, transform .16s ease; }
.pro-signin-button:hover { filter: brightness(.96); transform: translateY(-1px); }
.pro-signin-button b { display: grid; width: 27px; height: 27px; place-items: center; background: rgba(255,255,255,.14); border-radius: 8px; font-size: 13px; }
.pro-signin-button:disabled { opacity: .7; cursor: wait; transform: none; }
.pro-login-help { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 24px; color: var(--pro-text-faint); font-size: 9.5px; }
.pro-secure-dot { width: 6px; height: 6px; background: var(--pro-green); border-radius: 50%; }

.crm-toast { position: fixed; right: 22px; bottom: 22px; z-index: 999; padding: 10px 14px; color: #fff; background: #10251c; border-radius: 10px; font-size: 11px; opacity: 0; transform: translateY(8px); transition: .2s ease; box-shadow: var(--pro-shadow-md); }
.crm-toast.show { opacity: 1; transform: translateY(0); }
.mobile-shade { display: none; }

/* Responsive */
@media (max-width: 1220px) {
  .pro-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pro-dashboard-layout { grid-template-columns: minmax(0, 1.55fr) minmax(275px, .75fr); }
  .pro-menu-search { display: none; }
}

@media (max-width: 980px) {
  body.pro-wa-ui .pro-sidebar { transform: translateX(-101%); transition: transform .2s ease; }
  body.pro-wa-ui.sidebar-open .pro-sidebar { transform: translateX(0); }
  body.pro-wa-ui .pro-main { margin-left: 0 !important; }
  .pro-menu-btn { display: grid !important; }
  body.pro-wa-ui.sidebar-open .mobile-shade { position: fixed; inset: 0; z-index: 45; display: block; background: rgba(3,17,11,.46); backdrop-filter: blur(2px); }
  .pro-dashboard-layout { grid-template-columns: 1fr; }
  .pro-dashboard-side-column { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .pro-login-shell { grid-template-columns: minmax(360px, .85fr) minmax(430px, 1.15fr); }
  .pro-login-showcase { padding: 30px 38px; }
  .pro-showcase-copy h1 { font-size: 38px; }
}

@media (max-width: 760px) {
  body.pro-wa-ui .pro-topbar { min-height: 64px !important; padding: 0 15px !important; }
  body.pro-wa-ui .pro-content { padding: 20px 14px 34px !important; }
  .pro-business-switch,
  .pro-wallet { display: none; }
  .pro-dashboard-head { align-items: stretch; flex-direction: column; margin-bottom: 18px; }
  .pro-dashboard-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .pro-kpi-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .pro-kpi-card { padding: 14px; }
  .pro-kpi-icon { width: 34px; height: 34px; flex-basis: 34px; }
  .pro-kpi-copy > strong { font-size: 20px; }
  .pro-performance-grid { grid-template-columns: 1fr; }
  .pro-performance-grid article { border-right: 0; border-bottom: 1px solid var(--pro-border); }
  .pro-performance-grid article:last-child { border-bottom: 0; }
  .pro-dashboard-side-column { grid-template-columns: 1fr; }
  .pro-login-shell { display: block; }
  .pro-login-showcase { display: none; }
  .pro-login-form-side { min-height: 100vh; align-content: center; padding: 30px 22px; }
  .pro-login-mobile-brand { position: absolute; top: 24px; left: 22px; display: flex; align-items: center; gap: 9px; }
  .pro-login-mobile-brand .pro-login-logo { width: 35px; height: 35px; flex-basis: 35px; border-radius: 10px; }
  .pro-login-mobile-brand strong { color: var(--pro-text); font-size: 13px; }
  .pro-login-card { margin-top: 38px; }
}

@media (max-width: 520px) {
  .pro-page-title span { display: none; }
  .pro-dashboard-head h1 { font-size: 25px; }
  .pro-dashboard-actions { grid-template-columns: 1fr; }
  .pro-kpi-grid { grid-template-columns: 1fr; }
  .pro-kpi-copy > small { white-space: normal; }
  .pro-panel-head { padding: 14px; }
  .pro-table th,
  .pro-table td { padding-left: 12px; padding-right: 12px; }
  body.pro-wa-ui .page-head,
  body.pro-wa-ui .suite-page-head,
  body.pro-wa-ui .ee-page-head { align-items: stretch !important; flex-direction: column !important; }
}