:root {
  --bg: #0b1f4a;
  --panel: #12306b;
  --panel-2: #1a3f84;
  --line: #2f5fad;
  --text: #eef4ff;
  --muted: #9db6e0;
  --accent: #1d6feb;
  --accent-2: #4ea1ff;
  --warn: #e3a008;
  --danger: #e35d6a;
  --info: #60a5fa;
  --radius: 14px;
  --shadow: 0 10px 30px rgba(5, 20, 55, .35);
  --font: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--font);
  background:
    radial-gradient(1100px 520px at 8% -8%, rgba(77, 163, 255, .35), transparent 55%),
    radial-gradient(900px 420px at 100% 0%, rgba(29, 111, 235, .28), transparent 50%),
    linear-gradient(160deg, #071535 0%, #0b1f4a 45%, #12306b 100%);
  color: var(--text);
  min-height: 100vh;
}
a { color: var(--accent-2); text-decoration: none; }
a:hover { text-decoration: underline; }
.shell { display: grid; grid-template-columns: 250px 1fr; min-height: 100vh; }
.sidebar {
  background: linear-gradient(180deg, #0a1c44, #071533);
  border-right: 1px solid var(--line);
  padding: 1.25rem 1rem;
  position: sticky; top: 0; height: 100vh; overflow: auto;
}
.brand { font-size: 1.15rem; font-weight: 700; letter-spacing: .02em; margin: 0 0 1.25rem; }
.brand span { color: var(--accent-2); }
.nav a {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .55rem .7rem;
  border-radius: 10px;
  color: var(--muted);
  margin-bottom: .2rem;
  text-decoration: none;
  font-size: .86rem;
  line-height: 1.25;
}
.nav a:hover, .nav a.active { background: var(--panel-2); color: var(--text); }
.nav-section-label {
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  padding: .75rem .7rem .2rem;
  opacity: .65;
  user-select: none;
}
.nav-flyout { margin-bottom: .2rem; }
.nav-flyout-btn {
  display: flex;
  align-items: center;
  gap: .55rem;
  width: 100%;
  padding: .55rem .7rem;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: .86rem;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
}
.nav-flyout-btn:hover,
.nav-flyout-btn.active,
.nav-flyout.is-open .nav-flyout-btn {
  background: var(--panel-2);
  color: var(--text);
}
.nav-flyout-chevron {
  margin-left: auto;
  width: .45rem;
  height: .45rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  opacity: .7;
  transition: transform .15s ease;
}
.nav-flyout.is-open .nav-flyout-chevron {
  transform: rotate(45deg);
}
.nav-flyout-sub {
  display: grid;
  gap: .15rem;
  padding: .15rem 0 .25rem .9rem;
}
.nav-flyout-sub[hidden] { display: none !important; }
.nav-sub-link {
  display: block;
  padding: .4rem .65rem;
  border-radius: 8px;
  color: var(--muted);
  font-size: .8rem;
  text-decoration: none;
}
.nav-sub-link:hover,
.nav-sub-link.active {
  background: var(--panel-2);
  color: var(--text);
  text-decoration: none;
}
.nav-ico {
  flex: 0 0 1.25rem;
  width: 1.25rem;
  text-align: center;
  font-size: .95rem;
  line-height: 1;
  opacity: .92;
}
.nav-txt { min-width: 0; }
.sidebar-user {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  margin-top: 1.25rem;
  font-size: .8rem;
  line-height: 1.35;
  padding: .35rem .7rem;
}
.sidebar-user strong {
  color: #eaf0fa;
  font-weight: 600;
}
.sidebar-user .nav-ico {
  margin-top: .15rem;
}
.main { padding: 1.25rem 1.5rem 2rem; }
.topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.25rem; gap: 1rem; }
.topbar-left {
  display: flex;
  align-items: center;
  gap: .65rem;
  min-width: 0;
  flex: 1;
}
.topbar-left h1 { margin: 0; font-size: 1.45rem; }
.topbar-back { flex-shrink: 0; }
.topbar h1 { margin: 0; font-size: 1.45rem; }
.topbar.topbar-center-title {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: .75rem;
}
.topbar.topbar-center-title .topbar-left {
  grid-column: 2;
  justify-content: center;
  flex: 0 1 auto;
}
.topbar.topbar-center-title h1 {
  text-align: center;
  font-size: 1.65rem;
  font-weight: 800;
}
.topbar.topbar-center-title .topbar-clock {
  grid-column: 3;
  justify-self: end;
  text-align: right;
}
.card {
  background: rgba(18, 48, 107, .92);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1rem 1.1rem;
  margin-bottom: 1rem;
}
.grid { display: grid; gap: 1rem; }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.stat h3 { margin: 0; font-size: .85rem; color: var(--muted); font-weight: 600; }
.stat .val { font-size: 1.6rem; font-weight: 700; margin-top: .35rem; }
.btn {
  display: inline-flex; align-items: center; gap: .35rem;
  border: 0; border-radius: 10px; padding: .55rem .9rem;
  background: var(--accent); color: #fff; font-weight: 600; cursor: pointer;
}
.btn:hover { background: var(--accent-2); text-decoration: none; color: #fff; }
.btn-secondary { background: #1e3a6e; }
.btn-danger { background: var(--danger); }
.btn-warn { background: var(--warn); color: #1a1a1a; }
.btn-sm { padding: .35rem .6rem; font-size: .85rem; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: .65rem .5rem; border-bottom: 1px solid var(--line); text-align: left; font-size: .92rem; }
th { color: var(--muted); font-weight: 600; }
label { display: block; font-size: .85rem; color: var(--muted); margin-bottom: .3rem; }
input, select, textarea {
  width: 100%; background: #0a1c44; border: 1px solid var(--line); color: var(--text);
  border-radius: 10px; padding: .6rem .7rem; margin-bottom: .85rem;
}
.form-actions { display: flex; gap: .6rem; flex-wrap: wrap; }
.flash { padding: .75rem 1rem; border-radius: 10px; margin-bottom: .8rem; }
.flash.success { background: rgba(29,111,235,.22); border: 1px solid var(--accent); }
.flash.error { background: rgba(227,93,106,.18); border: 1px solid var(--danger); }
.badge {
  display: inline-block; padding: .15rem .5rem; border-radius: 999px; font-size: .75rem; font-weight: 700;
}
.badge.active, .badge.completed, .badge.sent { background: rgba(78,161,255,.28); color: #cfe6ff; }
.badge.online { background: rgba(46,125,50,.35); color: #c8e6c9; }
.badge.expired, .badge.failed, .badge.offline { background: rgba(227,93,106,.25); color: #ffb0b8; }
.badge.pending, .badge.unknown, .badge.queued { background: rgba(227,160,8,.2); color: #ffd27a; }
.badge.disabled { background: #1e3a6e; color: #cbd5e1; }
.login-wrap {
  min-height: 100vh; display: grid; place-items: start; padding: .5rem .35rem 1.5rem;
}
@media (min-width: 480px) {
  .login-wrap { place-items: center; padding: 1rem; }
}
.login-card { width: min(420px, 100%); }
.login-card.login-card-wide { width: min(980px, 100%); }
.portal-brand {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: .02em;
  color: #0b3d66;
}
.portal-shell { width: 100%; }
.portal-title { margin: .25rem 0 .4rem; font-size: 1.2rem; }
.portal-sub { margin: 0 0 .55rem; font-size: .82rem; line-height: 1.35; }
.portal-device { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-bottom: .75rem; }
.portal-form label { display: block; margin: .45rem 0 .2rem; font-weight: 600; font-size: .9rem; }
.portal-input, .portal-form input[type="text"], .portal-form input[type="password"] {
  width: 100%;
  min-height: 46px;
  font-size: 1.05rem;
  padding: .65rem .75rem;
  margin-bottom: .35rem;
  border-radius: 8px;
}
.portal-btn {
  width: 100%;
  min-height: 52px;
  font-size: 1.08rem;
  font-weight: 700;
  margin-top: .65rem;
}
.portal-check {
  display: flex !important;
  align-items: center;
  gap: .45rem;
  font-weight: 500 !important;
  margin-top: .55rem !important;
}
.portal-check input { width: auto; min-height: auto; }
.portal-links { margin-top: .9rem; text-align: center; }
.portal-note { margin-top: .55rem; font-size: .74rem; text-align: center; line-height: 1.4; }
.portal-hr { border: 0; border-top: 1px solid #cfd8e3; margin: 1rem 0 .75rem; }
.portal-or { text-align: center; margin: 0 0 .5rem; font-size: .8rem; }
/* TV remote / overscan friendly */
.portal-shell.tv .portal-title { font-size: 1.45rem; }
.portal-shell.tv .portal-input,
.portal-shell.tv .portal-form input[type="text"],
.portal-shell.tv .portal-form input[type="password"],
.portal-shell.tv .portal-btn { min-height: 58px; font-size: 1.15rem; }
/* Tablet ? large touch targets */
.portal-shell.tablet .portal-title { font-size: 1.35rem; }
.portal-shell.tablet .portal-input,
.portal-shell.tablet .portal-form input[type="text"],
.portal-shell.tablet .portal-form input[type="password"],
.portal-shell.tablet .portal-btn { min-height: 54px; font-size: 1.1rem; }
.portal-shell.tablet { max-width: 520px; margin: 0 auto; }
/* Laptop / PC ? comfortable keyboard form */
.portal-shell.pc .portal-title { font-size: 1.25rem; }
.portal-shell.pc { max-width: 440px; margin: 0 auto; }
.portal-shell.pc .portal-input,
.portal-shell.pc .portal-form input[type="text"],
.portal-shell.pc .portal-form input[type="password"] { min-height: 44px; font-size: 1rem; }
/* Package catalog ? circle mode */
.portal-shell.portal-catalog {
  max-width: min(960px, 100%);
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
  padding: 0 .15rem;
}
.login-wrap:has(.portal-catalog) .login-card,
.login-card.login-card-wide { width: min(980px, 100%); }
.portal-pkg-circles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  justify-content: center;
  justify-items: center;
  align-items: start;
  gap: .55rem;
  margin: 1rem auto 1.25rem;
  padding: .25rem .1rem .65rem;
  max-width: 100%;
  width: 100%;
  overflow: visible;
  box-sizing: border-box;
}
.portal-pkg-circle-wrap {
  width: 100%;
  max-width: 168px;
  text-align: center;
}
.portal-pkg-circle-wrap.is-checkout-open {
  max-width: 268px;
  width: 100%;
}
.portal-pkg-buy-circle[hidden],
.portal-pkg-pay-circle[hidden] {
  display: none !important;
}
.portal-pkg-pay-circle {
  position: relative;
  width: 100%;
  max-width: 240px;
  height: auto;
  aspect-ratio: 1;
  margin: 0 auto;
  padding: .7rem .65rem .75rem;
  gap: .12rem;
  box-sizing: border-box;
  overflow: hidden;
}
.portal-pkg-pay-circle .pkg-circle-name {
  font-size: .82rem;
  line-height: 1.1;
}
.portal-pkg-pay-circle .pkg-circle-price {
  font-size: .95rem;
  font-weight: 800;
}
.portal-pkg-pay-circle .portal-pay-gateway-brand {
  margin: .15rem 0 0;
  font-size: .62rem;
  font-weight: 700;
  color: rgba(255,255,255,.95);
  line-height: 1.2;
}
.portal-buy-in-circle {
  width: 100%;
  max-width: 150px;
  margin: .2rem auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
}
.portal-buy-in-circle .portal-input {
  width: 100%;
  min-height: 32px;
  font-size: .78rem;
  padding: .25rem .4rem;
  margin: 0;
  text-align: center;
  border-radius: 999px;
  border: none;
  box-sizing: border-box;
}
.portal-buy-in-circle .portal-pay-btn,
.portal-wait-in-circle .portal-pay-btn {
  width: 100%;
  min-height: 32px;
  margin: 0;
  padding: .3rem .45rem;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #2563eb;
  color: #fff;
  border: 2px solid #93c5fd;
  box-shadow: 0 2px 8px rgba(37, 99, 235, .55);
}
.portal-buy-in-circle .portal-pay-btn:hover,
.portal-buy-in-circle .portal-pay-btn:focus,
.portal-wait-in-circle .portal-pay-btn:hover,
.portal-wait-in-circle .portal-pay-btn:focus {
  background: #1d4ed8;
  color: #fff;
  filter: brightness(1.08);
}
.pkg-circle-close {
  position: absolute;
  top: .35rem;
  right: .55rem;
  width: 1.4rem;
  height: 1.4rem;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,.35);
  color: #fff;
  font-size: 1rem;
  line-height: 1.4rem;
  cursor: pointer;
  padding: 0;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
a.pkg-circle-close:hover {
  background: rgba(255,255,255,.5);
  color: #fff;
  text-decoration: none;
}
.portal-pkg-circle {
  width: 100%;
  max-width: 168px;
  height: auto;
  aspect-ratio: 1;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .18rem;
  text-decoration: none;
  color: #fff;
  padding: .7rem .55rem .65rem;
  box-sizing: border-box;
  border: 3px solid rgba(255,255,255,.35);
  box-shadow: 0 8px 18px rgba(11, 61, 102, .18);
  transition: transform .15s ease, box-shadow .15s ease, width .2s ease, height .2s ease, border-radius .2s ease;
  text-align: center;
  line-height: 1.15;
  cursor: pointer;
  font: inherit;
  appearance: none;
  -webkit-appearance: none;
  background: none;
  overflow: hidden;
}
button.portal-pkg-circle {
  margin: 0 auto;
}
.portal-pkg-circle.is-disabled {
  opacity: .72;
  cursor: not-allowed;
}
.portal-pkg-circle.tone-a,
.portal-pkg-circle.tone-b,
.portal-pkg-circle.tone-c,
.portal-pkg-circle.tone-d {
  background: radial-gradient(circle at 35% 28%, #7CFF9A 0%, #22C55E 52%, #15803D 100%);
  border-color: rgba(255, 255, 255, .55);
  box-shadow: 0 8px 22px rgba(34, 197, 94, .5), inset 0 1px 0 rgba(255,255,255,.35);
}
a.portal-pkg-circle:hover,
button.portal-pkg-circle:hover {
  transform: scale(1.05);
  box-shadow: 0 12px 28px rgba(22, 163, 74, .6), inset 0 1px 0 rgba(255,255,255,.4);
  color: #fff;
  filter: brightness(1.08);
}
a.portal-pkg-circle.is-selected,
button.portal-pkg-circle.is-selected {
  outline: 3px solid #4ADE80;
  outline-offset: 3px;
  transform: scale(1.04);
  background: radial-gradient(circle at 35% 28%, #A7F3D0 0%, #22C55E 48%, #166534 100%);
  box-shadow: 0 0 0 4px rgba(74, 222, 128, .35), 0 12px 28px rgba(22, 163, 74, .55);
}
.pkg-circle-cta {
  margin-top: .2rem;
  font-size: .78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  background: rgba(255,255,255,.28);
  color: #fff;
  border-radius: 999px;
  padding: .18rem .6rem;
  flex-shrink: 0;
}
.portal-purchase-brand {
  text-align: center;
  margin-bottom: .15rem;
}
.portal-footer {
  margin: 1.25rem 0 .35rem;
  font-size: .78rem;
  line-height: 1.4;
}
.portal-purchase-tagline {
  margin: 0 0 .65rem;
  text-align: center;
  width: 100%;
}
.portal-section-title {
  font-size: 1.05rem;
  margin: 1.1rem 0 .55rem;
  color: #0b3d66;
}
.portal-plans .portal-section-title {
  text-align: center;
}
.portal-howto {
  max-width: 420px;
  margin: .75rem auto 1rem;
  padding: 0;
  text-align: center;
  background: none;
  border: none;
  border-radius: 0;
  box-sizing: border-box;
}
.portal-howto .portal-section-title {
  margin: 0 0 .7rem;
  text-align: center;
}
.portal-howto-steps {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  display: grid;
  gap: .55rem;
  max-width: 320px;
  text-align: left;
}
.portal-howto-steps li {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: .55rem;
  background: transparent;
  border-radius: 0;
  padding: 0;
  font-size: .92rem;
  line-height: 1.35;
}
.portal-step-text {
  flex: 1;
}
.portal-step-num {
  flex: 0 0 auto;
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 50%;
  background: #d50000;
  color: #fff;
  font-weight: 800;
  font-size: .85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.portal-mpesa-step {
  max-width: 280px;
  margin: .55rem auto .75rem;
  padding: 0;
  border: none;
  border-radius: 0;
  background: none;
  text-align: center;
  box-sizing: border-box;
}
.portal-mpesa-title {
  text-align: center;
  margin: 0 0 .35rem;
  font-size: .95rem;
}
.portal-mpesa-step > .muted {
  margin: 0 0 .55rem;
  font-size: .78rem;
  line-height: 1.35;
}
.portal-buy-inline {
  max-width: 240px;
  margin: 0 auto;
  text-align: left;
}
.portal-buy-inline label {
  display: block;
  font-size: .72rem;
  font-weight: 600;
  margin-bottom: .2rem;
  text-align: center;
}
.portal-buy-inline .portal-input {
  width: 100%;
  box-sizing: border-box;
  min-height: 32px;
  font-size: .85rem;
  padding: .3rem .45rem;
  margin-bottom: .45rem;
  text-align: center;
}
.portal-buy-inline .portal-btn {
  width: 100%;
  min-height: 34px;
  font-size: .8rem;
  padding: .4rem .55rem;
}
.portal-buy-inline .portal-pay-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 800;
  margin-left: auto;
  margin-right: auto;
}
.portal-care {
  text-align: center;
  margin: .35rem 0 1rem;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
}
.portal-pkg-circle-wrap.is-checkout-open,
.portal-pkg-circle-wrap.is-waiting {
  width: 268px;
  max-width: 100%;
}
.portal-pkg-wait-circle {
  position: relative;
  width: 100%;
  max-width: 268px;
  height: auto;
  aspect-ratio: 1;
  margin: 0 auto;
  padding: .55rem .5rem .6rem;
  gap: .06rem;
  box-sizing: border-box;
  overflow: hidden;
  justify-content: center;
}
.portal-pkg-wait-circle .pkg-circle-name {
  font-size: .78rem;
  line-height: 1.1;
  max-width: 78%;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}
.portal-pkg-wait-circle .pkg-circle-price {
  font-size: .95rem;
  font-weight: 800;
  line-height: 1.1;
}
.pkg-wait-hint {
  margin: .08rem 0 0;
  font-size: .68rem;
  font-weight: 700;
  line-height: 1.15;
  max-width: 78%;
  color: #fff;
}
.pkg-wait-status {
  margin: .05rem 0 0;
  font-size: .64rem;
  font-weight: 700;
  line-height: 1.15;
  max-width: 78%;
  color: #ecfdf5;
}
.pkg-wait-status.is-error {
  color: #fecaca;
}
.pkg-wait-cancel {
  margin-top: .15rem;
  font-size: .62rem;
  font-weight: 800;
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.portal-wait-in-circle {
  width: 100%;
  max-width: 168px;
  margin: .12rem auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .22rem;
}
.portal-wait-in-circle.portal-wait-resend {
  margin-top: .18rem;
  max-width: 168px;
}
.portal-wait-in-circle .portal-input {
  width: 100%;
  min-height: 30px;
  font-size: .78rem;
  padding: .2rem .4rem;
  margin: 0;
  text-align: center;
  border-radius: 999px;
  border: none;
  box-sizing: border-box;
}
.portal-wait-btn-row {
  width: 100%;
  display: flex;
  gap: .3rem;
  align-items: center;
}
.portal-wait-btn-row .portal-resend-btn,
.portal-wait-btn-row .portal-cancel-btn {
  flex: 1;
}
.portal-wait-in-circle .portal-btn,
.portal-wait-in-circle .portal-pay-btn,
.portal-wait-in-circle .portal-resend-btn,
.portal-wait-in-circle .portal-cancel-btn {
  width: 100%;
  min-height: 30px !important;
  height: 30px;
  margin: 0 !important;
  margin-top: 0 !important;
  padding: .2rem .4rem !important;
  font-size: .72rem !important;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  text-decoration: none;
  box-sizing: border-box;
}
.portal-wait-in-circle .portal-resend-btn {
  background: #fbbf24;
  color: #1f2937;
  border: 2px solid #fde68a;
  box-shadow: 0 2px 6px rgba(251, 191, 36, .45);
}
.portal-wait-in-circle .portal-resend-btn:hover,
.portal-wait-in-circle .portal-resend-btn:focus {
  background: #f59e0b;
  color: #111827;
  filter: none;
}
.portal-wait-in-circle .portal-cancel-btn {
  background: rgba(255,255,255,.25);
  color: #fff;
  border: 2px solid rgba(255,255,255,.55);
  box-shadow: none;
}
.portal-wait-in-circle .portal-cancel-btn:hover,
.portal-wait-in-circle .portal-cancel-btn:focus {
  background: rgba(255,255,255,.4);
  color: #fff;
  text-decoration: none;
}
.portal-pkg-circle-wrap.is-waiting .portal-pkg-buy-circle {
  outline: 3px solid #4ade80;
  outline-offset: 3px;
}
.portal-pkg-wait-circle .pkg-circle-close {
  top: .3rem;
  right: .45rem;
  width: 1.25rem;
  height: 1.25rem;
  font-size: .9rem;
  line-height: 1.25rem;
}
.portal-active-login {
  max-width: 360px;
  width: 100%;
  margin: 1.25rem auto 1rem;
  padding: 0 .75rem;
  text-align: center;
  border: none;
  border-radius: 0;
  background: none;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.portal-active-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  width: 100%;
  margin: 0;
  padding: .55rem .65rem;
  border: 1px solid #c5d4e6;
  border-radius: 12px;
  background: #f4f8fc;
  color: #0b3d66;
  font: inherit;
  font-size: 1.02rem;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
}
.portal-active-toggle:hover,
.portal-active-toggle:focus {
  background: #e8f1fa;
  outline: none;
}
.portal-active-login.is-open .portal-active-toggle {
  border-color: #93c5fd;
  background: #eff6ff;
}
.portal-active-toggle-label {
  flex: 1;
  line-height: 1.25;
}
.portal-active-chevron {
  width: .55rem;
  height: .55rem;
  border-right: 2px solid #0b3d66;
  border-bottom: 2px solid #0b3d66;
  transform: rotate(45deg);
  transition: transform .18s ease;
  flex-shrink: 0;
  margin-top: -.2rem;
}
.portal-active-login.is-open .portal-active-chevron {
  transform: rotate(225deg);
  margin-top: .15rem;
}
.portal-active-body {
  width: 100%;
  margin-top: .75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.portal-active-body[hidden] {
  display: none !important;
}
.portal-active-login .portal-section-title {
  margin: 0 0 .35rem;
  text-align: center;
  width: 100%;
}
.portal-active-sub {
  margin: 0 0 .75rem;
  font-size: .9rem;
  text-align: center;
  width: 100%;
}
.portal-active-form {
  width: 100%;
  max-width: 280px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.portal-active-form label {
  display: block;
  font-size: .82rem;
  font-weight: 600;
  margin-bottom: .25rem;
  text-align: center;
  width: 100%;
}
.portal-active-form .portal-input {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: .65rem;
  text-align: center;
}
.portal-active-form .portal-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.portal-active-login .flash {
  width: 100%;
  max-width: 280px;
  text-align: center;
}
.portal-care-label {
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .06em;
  color: #8a0014;
}
.portal-care-phone {
  display: inline-block;
  margin-top: .2rem;
  font-size: 1.55rem;
  font-weight: 800;
  color: #d50000;
  text-decoration: none;
  letter-spacing: .02em;
}
.portal-codes {
  margin: .45rem 0 .65rem;
}
.portal-codes .portal-section-title {
  text-align: center;
  margin: 0 0 .4rem;
  font-size: .92rem;
}
.portal-code-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .85rem;
  max-width: 640px;
  margin: 0 auto;
}
.portal-code-grid-mini {
  gap: .4rem;
  max-width: 380px;
}
.portal-code-form {
  border: 1px solid #e3ebf3;
  border-radius: 12px;
  padding: .85rem;
  background: #fafcfe;
}
.portal-code-form h3 {
  margin: 0 0 .55rem;
  font-size: .95rem;
  color: #0b3d66;
}
.portal-code-mini {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: .2rem;
  align-items: center;
  border: none;
  border-radius: 0;
  padding: 0;
  background: none;
}
.portal-code-mini-label {
  grid-column: 1 / -1;
  font-size: .65rem;
  font-weight: 700;
  color: #0b3d66;
  letter-spacing: .02em;
  line-height: 1.2;
}
.portal-code-mini .portal-input {
  min-height: 28px;
  font-size: .78rem;
  padding: .22rem .4rem;
  margin: 0;
}
.portal-btn-mini {
  min-height: 28px;
  padding: .22rem .55rem;
  font-size: .72rem;
  white-space: nowrap;
}
.portal-code-stack {
  grid-template-columns: 1fr;
}
.portal-code-stack .portal-btn-mini {
  width: 100%;
}
.portal-creds {
  background: #eef8f0;
  border: 1px solid #b7e0c0;
  border-radius: 10px;
  padding: .7rem .85rem;
  margin: .5rem 0 .75rem;
}
@media (max-width: 700px) {
  .portal-code-grid { grid-template-columns: 1fr; }
}
.pkg-circle-name {
  font-weight: 800;
  font-size: .88rem;
  max-width: 90%;
  line-height: 1.18;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.pkg-circle-price {
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: .01em;
  line-height: 1.15;
  max-width: 90%;
}
.pkg-circle-meta,
.pkg-circle-speed,
.pkg-circle-devices {
  font-size: .72rem;
  font-weight: 650;
  opacity: .95;
  max-width: 90%;
  line-height: 1.15;
  overflow: hidden;
  white-space: normal;
  word-break: break-word;
}
.pkg-circle-desc {
  margin: .4rem 0 0;
  font-size: .68rem;
  line-height: 1.25;
}
@media (max-width: 480px) {
  .portal-pkg-circles {
    grid-template-columns: repeat(2, 1fr);
    gap: .4rem;
    padding: .2rem 0 .5rem;
  }
  .portal-pkg-circle-wrap,
  .portal-pkg-circle-wrap.is-checkout-open {
    width: 100%;
    max-width: 100%;
  }
  .portal-pkg-circle {
    width: 100%;
    height: auto;
    min-height: 130px;
    padding: .65rem .4rem;
    border-radius: 50%;
    aspect-ratio: 1;
  }
  .portal-pkg-pay-circle,
  .portal-pkg-wait-circle {
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 200px;
    aspect-ratio: 1;
    padding: .55rem .4rem;
  }
  .pkg-circle-name { font-size: .78rem; }
  .pkg-circle-price { font-size: .92rem; }
  .pkg-circle-devices { font-size: .65rem; }
  .portal-howto { max-width: 100%; margin: .5rem 0 .75rem; }
  .portal-howto-steps { max-width: 100%; }
  .portal-code-grid.portal-code-grid-mini { grid-template-columns: 1fr; gap: .55rem; }
  .portal-care { margin: .2rem 0 .7rem; }
  .portal-care-phone { font-size: 1.25rem; }
  .portal-section-title { font-size: .95rem; margin: .75rem 0 .4rem; }
}
@media (min-width: 481px) and (max-width: 720px) {
  .portal-pkg-circles {
    grid-template-columns: repeat(3, 1fr);
    gap: .45rem;
  }
  .portal-pkg-circle-wrap { max-width: 100%; width: 100%; }
  .portal-pkg-circle { width: 100%; height: auto; aspect-ratio: 1; min-height: 130px; padding: .65rem .45rem; }
  .portal-pkg-pay-circle, .portal-pkg-wait-circle { width: 100%; max-width: 100%; height: auto; aspect-ratio: 1; }
}
@media (min-width: 721px) and (max-width: 900px) {
  .portal-pkg-circles {
    grid-template-columns: repeat(4, 1fr);
    gap: .4rem;
  }
  .portal-pkg-circle-wrap { max-width: 160px; }
  .portal-pkg-circle { width: 100%; height: auto; aspect-ratio: 1; min-height: 130px; padding: .6rem .48rem; }
  .pkg-circle-name { font-size: .82rem; }
  .portal-pkg-circle-wrap.is-checkout-open { max-width: 200px; }
  .portal-pkg-pay-circle, .portal-pkg-wait-circle { width: 100%; height: auto; aspect-ratio: 1; }
}
.muted { color: var(--muted); }
.toolbar { display: flex; gap: .6rem; flex-wrap: wrap; margin-bottom: 1rem; align-items: center; }
.toolbar form { display: flex; gap: .5rem; flex: 1; }
.inline-forms { display: flex; gap: .35rem; flex-wrap: wrap; }
.sub-dt {
  font-size: .78rem;
  line-height: 1.35;
  white-space: nowrap;
}
.sub-hero {
  margin-bottom: 1rem;
}
.sub-hero-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.sub-hero-title {
  margin: 0 0 .35rem;
  font-size: 1.15rem;
}
.sub-hero-note {
  margin: 0;
  font-size: .85rem;
}

/* Compact account layout: toggle Hotspot / PPPoE panels */
.account-stack {
  display: flex;
  flex-direction: column;
  gap: .55rem;
}
.acct-topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem .5rem;
  margin-bottom: 0;
}
.acct-auth-form { display: inline; margin: 0; }
.acct-type-toggles {
  display: inline-flex;
  gap: .35rem;
  align-items: center;
}
.acct-type-btn {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
}
.acct-type-btn.is-open {
  background: #0f766e;
  border-color: #0f766e;
  color: #fff;
}
.acct-type-btn .badge {
  font-size: .62rem;
  padding: .05rem .28rem;
}
.acct-portal-hint {
  font-size: .72rem;
  margin-left: auto;
}
.acct-panels {
  display: flex;
  flex-direction: column;
  gap: .55rem;
}
.acct-panel[hidden] {
  display: none !important;
}
.account-compact {
  padding: .5rem .6rem;
  margin-bottom: 0;
}
.acct-panel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .35rem;
  margin-bottom: .35rem;
}
.acct-panel-head h3 {
  font-size: .85rem;
  margin: 0;
  display: flex;
  align-items: center;
  gap: .35rem;
}
.acct-bulk {
  display: inline-flex;
  flex-wrap: wrap;
  gap: .2rem;
  align-items: center;
}
.acct-bulk .btn-sm { padding: .12rem .35rem; font-size: .68rem; }
.account-table-wrap {
  overflow-x: auto;
}
.account-table {
  font-size: .74rem;
}
.account-table th,
.account-table td {
  padding: .22rem .3rem;
  vertical-align: middle;
}
.acct-user { font-weight: 600; }
.acct-meta { font-size: .68rem; line-height: 1.2; }
.acct-exp { font-size: .7rem; white-space: nowrap; }
.acct-actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: .15rem;
  align-items: center;
}
.acct-actions form { display: inline; margin: 0; }
.acct-actions .btn-sm {
  padding: .1rem .32rem;
  font-size: .66rem;
}
.revenue-bar {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  padding: .85rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(90deg, rgba(29,111,235,.35), rgba(18,48,107,.95));
  color: var(--text);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--shadow);
}
.revenue-bar:hover { border-color: var(--accent); }
.revenue-panel { margin-top: -.5rem; }
.circle-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  margin: .75rem 0 1rem;
}
.dash-circle {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  border: 2px solid #c62828;
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 120, 120, .55), transparent 45%),
    linear-gradient(160deg, #e53935, #8b0000);
  color: #fff;
  box-shadow: 0 10px 28px rgba(139, 0, 0, .45);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  font: inherit;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.dash-circle:hover {
  transform: translateY(-3px) scale(1.03);
  border-color: #ff5252;
}
.dash-circle.is-active {
  border-color: #ff8a80;
  box-shadow: 0 0 0 4px rgba(229, 57, 53, .35), 0 10px 28px rgba(139, 0, 0, .45);
}
.dash-circle-title { font-weight: 700; font-size: .95rem; }
.dash-circle-sub { font-size: .8rem; font-weight: 600; color: #ffebee; }
.circle-panel { margin: 0; }

/* Dashboard layout */
.dash { display: flex; flex-direction: column; gap: .85rem; }
.dash > .card,
.dash .dash-charts > .card { margin-bottom: 0; }
.dash-section { padding: .85rem 1rem; }
.dash-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .65rem;
}
.dash-head h3 {
  margin: 0;
  font-size: .95rem;
  font-weight: 700;
}
.conn-cards { gap: .85rem; }
.conn-card { text-align: center; }
.conn-card .dash-head { justify-content: center; margin-bottom: .35rem; }
.conn-card .dash-head h3 { color: var(--muted); font-size: .82rem; }
.conn-val { font-size: 1.65rem; font-weight: 700; line-height: 1.1; }
.conn-note { font-size: .75rem; margin-top: .2rem; }

/* Colored connection cards */
.conn-red {
  border-color: #c62828;
  background: linear-gradient(160deg, #e53935, #8b0000);
}
.conn-red .conn-val { color: #ffffff; }
.conn-red .dash-head h3 { color: #ffd7d7; }
.conn-red .conn-note, .conn-red .muted { color: #ffc4c4; }
.conn-red a { color: #ffe3e3; text-decoration: underline; }
.conn-rainbow {
  border: none;
  background: linear-gradient(120deg, #e53935, #f57c00, #fbc02d, #43a047, #1e88e5, #5e35b1, #8e24aa);
}
.conn-rainbow .conn-val { color: #ffffff; text-shadow: 0 1px 3px rgba(0,0,0,.45); }
.conn-rainbow .dash-head h3 { color: #ffffff; text-shadow: 0 1px 2px rgba(0,0,0,.4); }
.conn-rainbow .conn-note, .conn-rainbow .muted { color: #fdfdfd; text-shadow: 0 1px 2px rgba(0,0,0,.4); }
.conn-rainbow a { color: #ffffff; text-decoration: underline; }
.conn-blue {
  border-color: #1d6feb;
  background: linear-gradient(160deg, rgba(29,111,235,.32), rgba(18,48,107,.92));
}
.conn-blue .conn-val { color: #7ab8ff; }
.conn-blue .dash-head h3 { color: #a8cdff; }
.conn-orange {
  border-color: #e67e22;
  background: linear-gradient(160deg, rgba(230,126,34,.35), rgba(18,48,107,.92));
}
.conn-orange .conn-val { color: #ffb366; }
.conn-orange .dash-head h3 { color: #ffc78a; }
.conn-yellow {
  border-color: #e3a008;
  background: linear-gradient(160deg, rgba(227,160,8,.28), rgba(18,48,107,.92));
}
.conn-yellow .conn-val { color: #ffd25e; }
.conn-yellow .dash-head h3 { color: #ffdf91; }
.conn-grey {
  border-color: #7d8aa3;
  background: linear-gradient(160deg, rgba(125,138,163,.3), rgba(18,48,107,.92));
}
.conn-grey .conn-val { color: #cfd6e2; }
.conn-grey .dash-head h3 { color: #b9c2d1; }
.conn-green {
  border-color: #22a35c;
  background: linear-gradient(160deg, rgba(34,163,92,.3), rgba(18,48,107,.92));
}
.conn-green .conn-val { color: #6fe3a5; }
.conn-green .dash-head h3 { color: #9fe9c2; }
.section-label {
  font-size: .75rem;
  color: var(--muted);
  margin-bottom: .3rem;
  font-weight: 600;
}
.empty-note { margin: 0; font-size: .8rem; }

.insight-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .85rem;
  align-items: stretch;
}
.insight-side {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: .65rem .75rem;
  background: rgba(255,255,255,.03);
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
.insight-side-head {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: .5rem;
  flex-wrap: wrap;
}
.dash-circle.insight-circle {
  width: 72px;
  height: 72px;
  background: transparent;
  box-shadow: none;
  gap: .1rem;
  cursor: default;
  pointer-events: none;
  flex-shrink: 0;
  color: var(--text);
}
.dash-circle.insight-circle .dash-circle-title { font-size: .72rem; color: var(--text); }
.dash-circle.insight-circle .dash-circle-sub { font-size: .62rem; color: var(--muted); }
.dash-circle.insight-circle.is-active { box-shadow: none; }
.dash-circle.insight-circle:hover { transform: none; border-color: #c62828; }
.insight-mini-stats {
  display: flex;
  gap: .4rem;
  flex-wrap: wrap;
  font-size: .78rem;
  align-items: center;
}
.insight-view-btn {
  margin-left: .1rem;
  background: #2e7d32 !important;
  border-color: #1b5e20 !important;
  color: #fff !important;
}
.insight-view-btn:hover {
  background: #1b5e20 !important;
  color: #fff !important;
}
.insight-view-btn[aria-expanded="true"] {
  background: #43a047 !important;
}
button.dash-circle.insight-circle {
  cursor: pointer;
  font: inherit;
  text-align: center;
  border: inherit;
  background: inherit;
}
button.dash-circle.insight-circle.is-active {
  outline: 2px solid rgba(255,255,255,.55);
}
.insight-mini-stats span {
  display: inline-flex;
  align-items: baseline;
  gap: .25rem;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: .2rem .45rem;
}
.insight-mini-stats em {
  font-style: normal;
  color: var(--muted);
  font-size: .7rem;
}
.insight-mini-stats strong { font-size: .88rem; }
.running-mini { margin-top: .15rem; flex: 1; }
.table-compact { font-size: .8rem; width: 100%; }

/* User insights ? flat, readable, no boxes */
.insight-flat {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: .35rem 0 .75rem !important;
  margin: 0 0 .75rem;
}
.insight-flat .dash-head {
  margin-bottom: .55rem;
}
.insight-flat .dash-head h3 {
  color: #1c2b45 !important;
  margin: 0;
  font-size: 1.05rem;
}
.insight-flat .insight-split {
  gap: 1.25rem;
}
.insight-flat .insight-side {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  min-height: 0;
}
.insight-flat .insight-side-head {
  gap: .85rem;
  margin-bottom: .35rem;
  align-items: center;
}
.insight-flat .dash-circle.insight-circle {
  width: 88px;
  height: 88px;
  border: 2px solid #b71c1c !important;
  background: linear-gradient(145deg, #ff5252, #d50000) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(213, 0, 0, .3) !important;
  pointer-events: auto;
}
.insight-flat .dash-circle.insight-circle .dash-circle-title {
  color: #fff !important;
  font-size: .78rem;
  font-weight: 800;
}
.insight-flat .dash-circle.insight-circle .dash-circle-sub {
  color: #ffebee !important;
  font-size: .68rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.insight-flat .dash-circle.insight-circle:hover {
  border-color: #ff8a80 !important;
  filter: brightness(1.05);
  transform: none;
}
.insight-flat button.dash-circle.insight-circle.is-active {
  outline: 2px solid #b71c1c;
  outline-offset: 2px;
}
.insight-flat .insight-mini-stats {
  gap: .55rem .75rem;
}
.insight-flat .insight-mini-stats span {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  gap: .3rem;
}
.insight-flat .insight-mini-stats em {
  color: #64748b !important;
  font-size: .72rem;
}
.insight-flat .insight-mini-stats strong {
  color: #1c2b45 !important;
  font-size: .95rem;
}
.insight-flat .running-mini {
  margin-top: .45rem;
}
.insight-flat .section-label,
.insight-flat .running-mini h4,
.insight-flat .running-mini .muted {
  color: #64748b !important;
}
.insight-flat th {
  color: #0b3d66 !important;
  border-bottom-color: #dde5f0 !important;
}
.insight-flat td {
  color: #1c2b45 !important;
}

/* User insights ? bright orange theme (legacy; unused when flat) */
.insight-orange {
  border-color: #ff8c00;
  background: linear-gradient(160deg, #ffb347, #ff8c00);
}
.insight-orange .dash-head h3 { color: #5a2d00; }
.insight-orange .insight-side {
  background: rgba(255,255,255,.35);
  border-color: #e67300;
}
.insight-orange .dash-circle.insight-circle {
  border-color: #7a3d08;
  color: #5a2d00;
}
.insight-orange .dash-circle.insight-circle .dash-circle-title { color: #5a2d00; }
.insight-orange .dash-circle.insight-circle .dash-circle-sub { color: #7a3d08; }
.insight-orange .dash-circle.insight-circle:hover { border-color: #5a2d00; }
.insight-orange .insight-mini-stats span {
  background: rgba(255,255,255,.45);
  border-color: #e67300;
}
.insight-orange .insight-mini-stats em { color: #7a3d08; }
.insight-orange .insight-mini-stats strong { color: #4a2500; }
.insight-orange .running-mini h4,
.insight-orange .running-mini .muted { color: #6b3506; }
.insight-orange th { color: #5a2d00; border-bottom-color: #e67300; }
.insight-orange td { color: #3d1f00; }

/* Hotspot panel ? bright pink */
.insight-side-pink {
  border-color: #e91e8c !important;
  background: linear-gradient(160deg, #ff6bb5, #e91e8c) !important;
}
.insight-side-pink .dash-circle.insight-circle {
  border-color: #ffffff;
  color: #ffffff;
}
.insight-side-pink .dash-circle.insight-circle .dash-circle-title { color: #ffffff; }
.insight-side-pink .dash-circle.insight-circle .dash-circle-sub { color: #ffe0f0; }
.insight-side-pink .dash-circle.insight-circle:hover { border-color: #ffe0f0; }
.insight-side-pink .insight-mini-stats span {
  background: rgba(255,255,255,.4);
  border-color: #c2185b;
}
.insight-side-pink .insight-mini-stats em { color: #ffe0f0; }
.insight-side-pink .insight-mini-stats strong { color: #ffffff; }
.insight-side-pink .section-label,
.insight-side-pink .running-mini h4,
.insight-side-pink .running-mini .muted { color: #ffe0f0; }
.insight-side-pink th { color: #ffffff; border-bottom-color: #f48fb1; }
.insight-side-pink td { color: #ffffff; }

/* PPPoE panel ? bright purple */
.insight-side-purple {
  border-color: #9c27b0 !important;
  background: linear-gradient(160deg, #e040fb, #9c27b0) !important;
}
.insight-side-purple .dash-circle.insight-circle {
  border-color: #ffffff;
  color: #ffffff;
}
.insight-side-purple .dash-circle.insight-circle .dash-circle-title { color: #ffffff; }
.insight-side-purple .dash-circle.insight-circle .dash-circle-sub { color: #f3e5f5; }
.insight-side-purple .dash-circle.insight-circle:hover { border-color: #f3e5f5; }
.insight-side-purple .insight-mini-stats span {
  background: rgba(255,255,255,.4);
  border-color: #7b1fa2;
}
.insight-side-purple .insight-mini-stats em { color: #f3e5f5; }
.insight-side-purple .insight-mini-stats strong { color: #ffffff; }
.insight-side-purple .section-label,
.insight-side-purple .running-mini h4,
.insight-side-purple .running-mini .muted { color: #f3e5f5; }
.insight-side-purple th { color: #ffffff; border-bottom-color: #ce93d8; }
.insight-side-purple td { color: #ffffff; }
.table-compact th, .table-compact td { padding: .3rem .4rem; }

/* Minimized strip: vouchers / cron / this month */
.mini-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: nowrap;
  padding: .55rem .9rem;
  margin: 0 0 .85rem;
  overflow-x: auto;
}
.mini-group {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  flex-wrap: wrap;
}
.mini-title {
  font-size: .78rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-right: .15rem;
}
.mini-chip {
  display: inline-flex;
  align-items: baseline;
  gap: .25rem;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: .18rem .45rem;
  font-size: .78rem;
}
.mini-chip em { font-style: normal; color: var(--muted); font-size: .7rem; }
.mini-chip strong { font-size: .85rem; }
.mini-note { font-size: .75rem; }

/* Status strip ? bright magenta theme */
.mini-strip {
  border-color: #e600ac;
  background: linear-gradient(160deg, #ff6ad5, #e600ac);
}
.mini-strip .mini-title { color: #ffffff; text-shadow: 0 1px 2px rgba(0,0,0,.25); }
.mini-strip .mini-chip {
  background: rgba(255,255,255,.4);
  border-color: #c70092;
}
.mini-strip .mini-chip em { color: #6b004f; }
.mini-strip .mini-chip strong { color: #470035; }
.mini-sales-group { flex-wrap: wrap; align-items: center; }
.mini-sales-btn { padding: .2rem .45rem; font-size: .72rem; margin: 0; }
.mini-sales-chips:not([hidden]) {
  display: inline-flex;
  gap: .35rem;
  flex-wrap: wrap;
  align-items: center;
}
#dash-sales-chips[hidden],
#dash-sales-chart[hidden],
#dash-reg-chart[hidden] {
  display: none !important;
}
.dash-reg-inline {
  display: flex;
  align-items: center;
  gap: .35rem;
  flex: 0 0 auto;
  height: 84px;
  padding: .28rem .45rem;
  margin-left: .15rem;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: .55rem;
  min-width: 0;
}
.dash-reg-inline-title {
  font-size: .68rem;
  font-weight: 700;
  color: #64748b;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.dash-reg-inline-bars {
  display: flex;
  align-items: flex-end;
  gap: .22rem;
  height: 100%;
  padding-top: .1rem;
}
.dash-reg-m {
  width: 1.55rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  text-align: center;
  line-height: 1.05;
}
.dash-reg-m-val {
  font-size: .62rem;
  font-weight: 700;
  color: #0f172a;
}
.dash-reg-m-bar {
  display: block;
  width: .55rem;
  height: 2.1rem;
  margin: .12rem 0 .08rem;
  background: #e2e8f0;
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}
.dash-reg-m-bar i {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
  background: #1565c0;
  border-radius: 2px 2px 0 0;
  min-height: 2px;
}
.dash-reg-m-lbl {
  font-size: .52rem;
  font-weight: 600;
  color: #64748b;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 900px) {
  .dash-reg-inline {
    width: 100%;
    height: auto;
    min-height: 4.2rem;
    margin-left: 0;
  }
}
.dash-reg-chart .dash-head,
.dash-sales-chart .dash-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
}
.mini-strip .mini-note, .mini-strip .muted { color: #ffe3f7; }
.mini-strip a.btn-secondary { background: rgba(255,255,255,.85); color: #a10078; }

/* Status strip ? flat (same as User insights) */
.mini-strip.mini-strip-flat,
body.bg-white .mini-strip.mini-strip-flat {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: .35rem 0 .75rem !important;
}
.mini-strip-flat .mini-title,
body.bg-white .mini-strip-flat .mini-title {
  color: #0b3d66 !important;
  text-shadow: none !important;
  font-size: .78rem;
}
.mini-strip-flat .mini-chip,
body.bg-white .mini-strip-flat .mini-chip {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 .15rem !important;
}
.mini-strip-flat .mini-chip em,
body.bg-white .mini-strip-flat .mini-chip em {
  color: #64748b !important;
}
.mini-strip-flat .mini-chip strong,
body.bg-white .mini-strip-flat .mini-chip strong {
  color: #1c2b45 !important;
}
.mini-strip-flat .mini-note,
.mini-strip-flat .muted,
body.bg-white .mini-strip-flat .mini-note,
body.bg-white .mini-strip-flat .muted {
  color: #64748b !important;
}
.mini-strip-flat a.btn-secondary,
.mini-strip-flat .btn-secondary,
.mini-strip-flat .btn-sm,
body.bg-white .mini-strip-flat a.btn-secondary,
body.bg-white .mini-strip-flat .btn-secondary,
body.bg-white .mini-strip-flat .btn-sm {
  background: #2e7d32 !important;
  border-color: #1b5e20 !important;
  color: #fff !important;
}
.mini-strip-flat a.btn-secondary:hover,
.mini-strip-flat .btn-secondary:hover,
.mini-strip-flat .btn-sm:hover,
body.bg-white .mini-strip-flat a.btn-secondary:hover,
body.bg-white .mini-strip-flat .btn-secondary:hover,
body.bg-white .mini-strip-flat .btn-sm:hover {
  background: #1b5e20 !important;
  color: #fff !important;
}
.mini-strip-flat .mini-cron-group .mini-title,
body.bg-white .mini-strip-flat .mini-cron-group .mini-title {
  color: #2e7d32 !important;
}
.mini-strip-flat .mini-cron-group .mini-note,
.mini-strip-flat .mini-cron-group .muted,
body.bg-white .mini-strip-flat .mini-cron-group .mini-note,
body.bg-white .mini-strip-flat .mini-cron-group .muted {
  color: #2e7d32 !important;
}
.mini-strip-flat .mini-cron-group .digital-clock,
.mini-strip-flat .mini-cron-group .cron-last-ago,
.mini-strip-flat .mini-cron-group .cron-next-in,
body.bg-white .mini-strip-flat .mini-cron-group .digital-clock,
body.bg-white .mini-strip-flat .mini-cron-group .cron-last-ago,
body.bg-white .mini-strip-flat .mini-cron-group .cron-next-in {
  display: inline-block !important;
  color: #5d4037 !important;
  background: #ffeb3b !important;
  border: 1px solid #fbc02d !important;
  border-radius: 999px !important;
  padding: .12rem .55rem !important;
  min-width: 4.6rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-family: "Consolas", "Courier New", ui-monospace, monospace;
  font-weight: 800;
  letter-spacing: .04em;
  line-height: 1.25;
  vertical-align: middle;
}
.mini-strip-flat .mini-cron-group .badge.online,
body.bg-white .mini-strip-flat .mini-cron-group .badge.online {
  background: #2e7d32 !important;
  color: #ffffff !important;
  border: 1px solid #1b5e20 !important;
  font-weight: 800;
}
.mini-strip-flat .mini-cron-group .badge.offline,
body.bg-white .mini-strip-flat .mini-cron-group .badge.offline {
  background: #fff3e0 !important;
  color: #e65100 !important;
  border: 1px solid #ffb74d !important;
}

.dash-charts .bar-chart { height: 140px; padding-top: 1rem; }

/* Monthly registered ? bright blue */
.chart-blue {
  border-color: #1e90ff;
  background: linear-gradient(160deg, #64b5f6, #1e88e5);
}
.chart-blue .dash-head h3 { color: #0d2748; }
.chart-blue .bar-val { color: #0d2748; }
.chart-blue .bar-label { color: #1565c0; }
.chart-blue .bar-fill {
  background: linear-gradient(180deg, #ffffff, #1565c0);
  box-shadow: 0 2px 6px rgba(13, 71, 161, .3);
}

/* Total monthly sales ? bright cyan */
.chart-cyan {
  border-color: #00bcd4;
  background: linear-gradient(160deg, #5ce1f0, #00bcd4);
}
.chart-cyan .dash-head h3 { color: #003d47; }
.chart-cyan .bar-val { color: #004852; }
.chart-cyan .bar-label { color: #005a66; }
.chart-cyan .bar-fill,
.chart-cyan .bar-fill.sales {
  background: linear-gradient(180deg, #e0f7fa, #00838f);
  box-shadow: 0 2px 6px rgba(0, 77, 90, .25);
}

/* Compact Revenue / Payments / Packages */
.rpp-mini { padding: .65rem .85rem; }
.rpp-mini .dash-head { margin-bottom: .35rem; }
.rpp-mini .dash-head h3 { font-size: .85rem; }
.rpp-circles,
.dash-all-circles {
  gap: .75rem;
  margin: .35rem 0 .6rem;
  justify-content: flex-start;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: .15rem;
}
.rpp-circles .dash-circle,
.dash-all-circles .dash-circle {
  width: 84px;
  height: 84px;
  gap: .12rem;
  flex: 0 0 auto;
  box-shadow: 0 4px 12px rgba(139, 0, 0, .3);
}
.rpp-circles .dash-circle-title,
.dash-all-circles .dash-circle-title { font-size: .74rem; }
.rpp-circles .dash-circle-sub,
.dash-all-circles .dash-circle-sub { font-size: .64rem; }
.rpp-circles .dash-circle.is-active,
.dash-all-circles .dash-circle.is-active {
  box-shadow: 0 0 0 3px rgba(229, 57, 53, .3), 0 4px 12px rgba(139, 0, 0, .3);
}
.rpp-mini .circle-panel .stat .val { font-size: 1.2rem; }
.rpp-mini .circle-panel .stat h3 { font-size: .75rem; }
.rpp-mini .toolbar { margin-bottom: .4rem; }
.rpp-mini .toolbar .btn-sm { padding: .22rem .5rem; font-size: .74rem; }
.rpp-mini .table-compact { font-size: .76rem; }
.rpp-mini .table-compact th, .rpp-mini .table-compact td { padding: .26rem .38rem; }
.rpp-mini .circle-panel {
  max-height: 170px;
  overflow: auto;
}

/* Revenue / Payments / Packages ? flat & clear */
.rpp-flat,
.dash-circles-flat,
body.bg-white .rpp-flat,
body.bg-white .dash-circles-flat {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: .35rem 0 .75rem !important;
}
.rpp-flat .dash-head h3,
body.bg-white .rpp-flat .dash-head h3 {
  color: #1c2b45 !important;
  font-size: 1.05rem;
}
.rpp-flat .rpp-circles .dash-circle,
.dash-circles-flat .dash-all-circles .dash-circle,
body.bg-white .rpp-flat .rpp-circles .dash-circle,
body.bg-white .dash-circles-flat .dash-all-circles .dash-circle {
  background: linear-gradient(145deg, #ff5252, #d50000) !important;
  border: 2px solid #b71c1c !important;
  box-shadow: 0 4px 12px rgba(213, 0, 0, .35) !important;
  color: #fff !important;
}
.rpp-flat .rpp-circles .dash-circle-title,
.dash-circles-flat .dash-all-circles .dash-circle-title,
body.bg-white .rpp-flat .rpp-circles .dash-circle-title,
body.bg-white .dash-circles-flat .dash-all-circles .dash-circle-title {
  color: #fff !important;
  text-shadow: none !important;
  font-weight: 800;
}
.rpp-flat .rpp-circles .dash-circle-sub,
.rpp-flat .rpp-circles .dash-circle-sub.muted,
.dash-circles-flat .dash-all-circles .dash-circle-sub,
.dash-circles-flat .dash-all-circles .dash-circle-sub.muted,
body.bg-white .rpp-flat .rpp-circles .dash-circle-sub,
body.bg-white .dash-circles-flat .dash-all-circles .dash-circle-sub {
  color: #ffebee !important;
  text-shadow: none !important;
  font-weight: 700;
}
.rpp-flat .rpp-circles .dash-circle:hover,
.dash-circles-flat .dash-all-circles .dash-circle:hover,
body.bg-white .rpp-flat .rpp-circles .dash-circle:hover,
body.bg-white .dash-circles-flat .dash-all-circles .dash-circle:hover {
  border-color: #ff8a80 !important;
  filter: brightness(1.06);
}
.rpp-flat .rpp-circles .dash-circle.is-active,
.dash-circles-flat .dash-all-circles .dash-circle.is-active,
body.bg-white .rpp-flat .rpp-circles .dash-circle.is-active,
body.bg-white .dash-circles-flat .dash-all-circles .dash-circle.is-active {
  outline: 2px solid #b71c1c;
  outline-offset: 2px;
  box-shadow: 0 0 0 3px rgba(213, 0, 0, .25), 0 4px 12px rgba(213, 0, 0, .4) !important;
  border-color: #ff1744 !important;
}
.rpp-flat .circle-panel,
.dash-circles-flat .circle-panel,
body.bg-white .rpp-flat .circle-panel,
body.bg-white .dash-circles-flat .circle-panel {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: .35rem 0 0 !important;
  max-height: none;
}
.rpp-flat .circle-panel .stat .val,
.dash-circles-flat .circle-panel .stat .val,
body.bg-white .rpp-flat .circle-panel .stat .val,
body.bg-white .dash-circles-flat .circle-panel .stat .val {
  color: #1c2b45 !important;
}
.rpp-flat .circle-panel .stat h3,
.rpp-flat .circle-panel .muted,
.dash-circles-flat .circle-panel .stat h3,
.dash-circles-flat .circle-panel .muted,
.rpp-flat .section-label,
body.bg-white .rpp-flat .circle-panel .stat h3,
body.bg-white .rpp-flat .circle-panel .muted,
body.bg-white .rpp-flat .section-label {
  color: #64748b !important;
}
.rpp-flat th,
body.bg-white .rpp-flat th {
  color: #0b3d66 !important;
  border-bottom-color: #dde5f0 !important;
}
.rpp-flat td,
body.bg-white .rpp-flat td {
  color: #1c2b45 !important;
}
.rpp-flat .toolbar .btn-sm,
.rpp-flat .toolbar .btn-sm.btn-secondary,
body.bg-white .rpp-flat .toolbar .btn-sm,
body.bg-white .rpp-flat .toolbar .btn-sm.btn-secondary {
  background: #2e7d32 !important;
  border-color: #1b5e20 !important;
  color: #fff !important;
}
.rpp-flat .toolbar .btn-sm:hover,
body.bg-white .rpp-flat .toolbar .btn-sm:hover {
  background: #1b5e20 !important;
  color: #fff !important;
}
.rpp-flat .toolbar a.btn-sm:not(.btn-secondary),
body.bg-white .rpp-flat .toolbar a.btn-sm:not(.btn-secondary) {
  background: #43a047 !important;
  border-color: #2e7d32 !important;
  box-shadow: 0 0 0 2px rgba(46, 125, 50, .35);
}

/* Revenue / Payments / Packages ? bright teal theme */
.rpp-teal {
  border-color: #14b8a6;
  background: linear-gradient(160deg, #5eead4, #14b8a6);
}
.rpp-teal .dash-head h3 { color: #0f3d38; }
.rpp-teal .rpp-circles .dash-circle {
  background: linear-gradient(160deg, #ff5252, #ff1744);
  border-color: #d50000;
  box-shadow: 0 4px 14px rgba(255, 23, 68, .45);
  color: #ffffff;
}
.rpp-teal .rpp-circles .dash-circle-title { color: #ffffff; text-shadow: 0 1px 2px rgba(0,0,0,.3); }
.rpp-teal .rpp-circles .dash-circle-sub { color: #ffebee; text-shadow: 0 1px 2px rgba(0,0,0,.25); }
.rpp-teal .rpp-circles .dash-circle:hover {
  border-color: #ff8a80;
  transform: translateY(-2px) scale(1.03);
}
.rpp-teal .rpp-circles .dash-circle.is-active {
  border-color: #ffffff;
  box-shadow: 0 0 0 3px rgba(255, 82, 82, .6), 0 4px 14px rgba(255, 23, 68, .5);
}
.rpp-teal .circle-panel {
  background: rgba(255,255,255,.35);
  border-radius: 8px;
  padding: .45rem .55rem;
}
.rpp-teal .circle-panel .stat .val { color: #042f2e; }
.rpp-teal .circle-panel .stat h3,
.rpp-teal .circle-panel .muted { color: #134e4a; }
.rpp-teal th { color: #0f3d38; border-bottom-color: #0f766e; }
.rpp-teal td { color: #042f2e; }
.rpp-teal .toolbar .btn-sm {
  background: rgba(255,255,255,.75);
  color: #0f766e;
  border-color: #0d9488;
}

.bar-chart {
  display: flex;
  align-items: flex-end;
  gap: .55rem;
  height: 180px;
  padding-top: 1.5rem;
}
.bar-chart-tiny {
  height: 72px;
  padding-top: .35rem;
  gap: .28rem;
  margin-top: .35rem;
}
.bar-chart-tiny .bar-val {
  font-size: .58rem;
  line-height: 1;
  margin-bottom: .12rem;
}
.bar-chart-tiny .bar-label {
  font-size: .58rem;
}
.bar-chart-tiny .bar-fill {
  min-height: 3px;
  max-width: 28px;
}
.rev-daily-mini {
  margin-top: .35rem;
  border-top: 1px solid #e5e7eb;
  padding-top: .35rem;
}
.rev-daily-mini > summary {
  list-style: none;
  cursor: pointer;
  font-size: .78rem;
  font-weight: 650;
  color: #475569;
  text-transform: none;
  letter-spacing: 0;
  user-select: none;
}
.rev-daily-mini > summary::-webkit-details-marker { display: none; }
.rev-daily-mini > summary::before {
  content: '▸ ';
  opacity: .65;
  font-size: .7rem;
}
.rev-daily-mini[open] > summary::before { content: '▾ '; }
.rev-daily-strip {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-top: .45rem;
  max-width: 34rem;
}
.rev-day {
  flex: 0 0 auto;
  width: 4.25rem;
  text-align: center;
  line-height: 1.2;
  padding: .35rem .2rem .3rem;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: .35rem;
}
.rev-day-amt {
  display: block;
  font-size: .82rem;
  font-weight: 700;
  color: #0f172a;
  white-space: nowrap;
}
.rev-day-bar {
  display: block;
  height: 6px;
  margin: .28rem .15rem .18rem;
  background: #e2e8f0;
  border-radius: 3px;
  overflow: hidden;
}
.rev-day-bar i {
  display: block;
  height: 100%;
  background: #1565c0;
  border-radius: 3px;
}
.rev-day-lbl {
  display: block;
  font-size: .7rem;
  font-weight: 600;
  color: #64748b;
  white-space: nowrap;
}
.rev-daily-note {
  margin: .35rem 0 0;
  font-size: .72rem;
}
.bar-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  justify-content: flex-end;
  min-width: 0;
}
.bar-fill {
  width: 70%;
  max-width: 42px;
  background: linear-gradient(180deg, #64b5f6, #1565c0);
  border-radius: 6px 6px 2px 2px;
  min-height: 4px;
  transition: height .3s ease;
}
.bar-fill.sales {
  background: linear-gradient(180deg, #ef5350, #c62828);
}
.bar-val {
  font-size: .72rem;
  color: var(--muted);
  margin-bottom: .3rem;
  white-space: nowrap;
}
.bar-label {
  font-size: .68rem;
  color: var(--muted);
  margin-top: .4rem;
  text-align: center;
  line-height: 1.2;
}

.activity-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 280px;
  overflow: auto;
}
.activity-list li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: .55rem;
  align-items: start;
  padding: .45rem 0;
  border-bottom: 1px solid var(--line);
  font-size: .85rem;
}
.activity-list li:last-child { border-bottom: none; }
.activity-when { font-size: .72rem; white-space: nowrap; }

.activity-mini { padding: .65rem .85rem; }
.activity-mini .dash-head { margin-bottom: .4rem; }
.activity-mini .dash-head h3 { font-size: .85rem; }
.mini-feed {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 140px;
  overflow: auto;
}
.mini-feed li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .35rem .5rem;
  padding: .28rem 0;
  border-bottom: 1px solid rgba(47,95,173,.35);
  font-size: .78rem;
  line-height: 1.25;
}
.mini-feed li:last-child { border-bottom: none; }
.mini-feed-main { flex: 1 1 auto; min-width: 0; }
.mini-feed-sub { font-size: .7rem; white-space: nowrap; }
.mini-feed .badge { font-size: .65rem; padding: .1rem .35rem; }

/* Activity ? flat & clear */
.activity-flat .activity-mini,
body.bg-white .activity-flat .activity-mini {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: .35rem 0 .5rem !important;
}
.activity-flat .dash-head h3,
body.bg-white .activity-flat .dash-head h3 {
  color: #1c2b45 !important;
  font-size: 1.05rem;
}
.activity-flat .mini-feed li,
body.bg-white .activity-flat .mini-feed li {
  border-bottom-color: #dde5f0 !important;
}
.activity-flat .mini-feed-main,
body.bg-white .activity-flat .mini-feed-main {
  color: #1c2b45 !important;
}
.activity-flat .mini-feed-sub,
.activity-flat .muted,
body.bg-white .activity-flat .mini-feed-sub,
body.bg-white .activity-flat .muted {
  color: #64748b !important;
}
.activity-flat .mini-feed,
body.bg-white .activity-flat .mini-feed {
  max-height: none;
}

/* Compact SMS / WhatsApp page */
.msg-banner { padding: .45rem .75rem; font-size: .85rem; margin-bottom: .65rem; }
.msg-status { margin: 0 0 .75rem; font-size: .85rem; }
.msg-hubs {
  display: grid;
  gap: .65rem;
  max-width: 520px;
}
.msg-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .85rem;
  align-items: start;
}
@media (max-width: 900px) {
  .msg-split { grid-template-columns: 1fr; }
}
.msg-panel-head {
  display: flex;
  align-items: center;
  gap: .45rem;
  flex-wrap: wrap;
  margin-bottom: .35rem;
}
.msg-panel-head h3 {
  margin: 0;
  font-size: 1.05rem;
  flex: 1;
}
.msg-panel-note {
  margin: 0 0 .55rem;
  font-size: .78rem;
}
.msg-hub {
  border: 1px solid #d7e0ee;
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}
.msg-hub-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .7rem .9rem;
  border: 0;
  background: #f5f8fc;
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: left;
}
.msg-hub-toggle:hover { background: #eef3fa; }
.msg-hub.is-open .msg-hub-toggle { background: #e8f0fb; }
.msg-hub-title { font-weight: 700; font-size: .95rem; }
.msg-hub-chevron {
  margin-left: auto;
  width: .55rem;
  height: .55rem;
  border-right: 2px solid #64748b;
  border-bottom: 2px solid #64748b;
  transform: rotate(45deg);
  transition: transform .15s ease;
}
.msg-hub.is-open .msg-hub-chevron { transform: rotate(-135deg); }
.msg-hub-body { padding: .75rem .9rem .9rem; border-top: 1px solid #e5ebf4; }
.msg-compact .dash-section { padding: .65rem .85rem; }
.msg-compact .dash-head { margin-bottom: .45rem; }
.msg-compact .dash-head h3 { font-size: .9rem; margin: 0; }
.msg-form { margin-bottom: .4rem; }
.msg-form label { display: none; }
.msg-row {
  display: flex;
  gap: .4rem;
  margin-bottom: .35rem;
  align-items: center;
}
.msg-row input { flex: 1; margin: 0; padding: .35rem .5rem; font-size: .85rem; }
.msg-form textarea {
  width: 100%;
  margin: 0 0 .35rem;
  padding: .35rem .5rem;
  font-size: .82rem;
  min-height: 52px;
  resize: vertical;
}
.msg-remind { margin: 0; }
.msg-actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  align-items: center;
  margin: 0 0 .5rem;
}
.msg-clear { margin: 0; }
.msg-del-form { margin: 0; flex: 0 0 auto; }
.msg-del-btn {
  padding: .15rem .4rem !important;
  font-size: .68rem !important;
  background: #fee2e2 !important;
  color: #b91c1c !important;
  border: 1px solid #fecaca !important;
}
.msg-del-btn:hover { background: #fecaca !important; }
.btn-danger {
  background: #dc2626;
  border-color: #b91c1c;
  color: #fff;
}
.btn-danger:hover { background: #b91c1c; }
.msg-log {
  max-height: 220px;
  overflow: auto;
  font-size: .78rem;
}
.msg-log li { padding: .28rem 0; gap: .35rem; align-items: center; }

/* Message Settings */
.msg-settings-wrap { max-width: 720px; }
.msg-settings-top {
  display: flex;
  justify-content: space-between;
  gap: .75rem;
  align-items: flex-start;
  margin-bottom: .85rem;
  flex-wrap: wrap;
}
.msg-settings-links { display: flex; gap: .4rem; flex-wrap: wrap; }
.msg-settings-form .card { padding: .85rem 1rem; }
.msg-settings-form label { display: block; font-size: .82rem; margin: .35rem 0 .2rem; }
.msg-settings-form input,
.msg-settings-form textarea {
  width: 100%;
  padding: .4rem .55rem;
  font: inherit;
  border: 1px solid #d0dae8;
  border-radius: 8px;
}
.msg-settings-form textarea { min-height: 70px; resize: vertical; }
.msg-settings-form .settings-check {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin: .45rem 0;
  font-size: .88rem;
}
.msg-settings-form .settings-check input { width: auto; }

/* Services bar on Logs */
.services-bar {
  flex-wrap: wrap;
  gap: .55rem .85rem;
  margin-bottom: .65rem;
  background: linear-gradient(160deg, #5ce1f0, #00acc1);
  border-color: #00838f;
}
.services-bar .mini-title { color: #00363a; }
.services-bar .mini-note { color: #004d52; }
.services-bar .service-chip {
  background: rgba(255,255,255,.35);
  border: 1px solid rgba(0, 83, 90, .25);
  border-radius: 8px;
  padding: .25rem .45rem;
}
.services-bar .svc-bad {
  background: rgba(255, 235, 238, .7);
  border-color: #e57373;
}
.logs-tabs { margin-bottom: .55rem; }
.logs-page { display: flex; flex-direction: column; gap: .55rem; }
.logs-topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem .65rem;
  margin-bottom: 0;
}
.logs-type-toggles {
  display: inline-flex;
  flex-wrap: wrap;
  gap: .3rem;
}
.logs-type-btn.is-open,
.logs-type-btn.is-current.is-open {
  background: #0f766e;
  border-color: #0f766e;
  color: #fff;
}
.logs-hint { font-size: .72rem; margin-left: auto; }
.logs-svc-mini {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  margin-bottom: .4rem;
}
.logs-svc-chip {
  font-size: .68rem;
  padding: .15rem .4rem;
  border-radius: 4px;
  background: rgba(15, 118, 110, .1);
  color: #0f766e;
}
.logs-svc-chip.bad {
  background: rgba(185, 28, 28, .1);
  color: #b91c1c;
}
.logs-svc-chip a { color: inherit; font-weight: 600; }
.logs-svc-tools .dash-section { padding: .45rem .55rem; }
.logs-svc-tools .dash-head h3 { font-size: .82rem; margin: 0; }
.logs-table { font-size: .74rem; }
.logs-table th,
.logs-table td { padding: .2rem .3rem; vertical-align: middle; }
.logs-time { white-space: nowrap; font-size: .7rem; }

/* Compact voucher page */
.voucher-page { max-width: none; }
.voucher-strip {
  margin-bottom: .4rem;
  padding: .28rem .5rem !important;
  gap: .45rem !important;
  flex-wrap: nowrap;
  overflow-x: auto;
}
.voucher-strip .mini-title { font-size: .68rem; white-space: nowrap; }
.voucher-strip .mini-chip {
  padding: .08rem .28rem;
  font-size: .68rem;
  border-radius: 4px;
  white-space: nowrap;
}
.voucher-strip .mini-chip strong { font-size: .74rem; }
.voucher-strip .mini-group { gap: .22rem; flex-wrap: nowrap; }
.voucher-tools {
  margin-bottom: .4rem;
}
.voucher-gen,
.voucher-list {
  padding: .35rem .55rem;
  margin: 0;
}
.voucher-gen-row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: .35rem;
  overflow-x: auto;
}
.voucher-gen-label {
  font-weight: 600;
  font-size: .78rem;
  white-space: nowrap;
  flex: 0 0 auto;
}
.voucher-gen-row select,
.voucher-gen-row input {
  margin: 0;
  padding: .22rem .4rem;
  font-size: .78rem;
  min-height: 1.7rem;
  box-sizing: border-box;
  flex: 0 0 auto;
}
.voucher-gen-row select { min-width: 10rem; flex: 1 1 12rem; }
.voucher-gen-row input[name="qty"] { width: 3.2rem; }
.voucher-gen-row input[name="prefix"] { width: 3.2rem; }
.voucher-gen-row input[name="custom_code"] { min-width: 8rem; flex: 1 1 9rem; }
.voucher-gen-row input[name="batch"] { width: 5.5rem; }
.voucher-gen-row .btn { padding: .2rem .55rem; font-size: .74rem; white-space: nowrap; }
.voucher-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .35rem;
  margin-bottom: .2rem;
}
.voucher-list-toggle {
  border: 0;
  background: transparent;
  color: inherit;
  font-weight: 600;
  font-size: .8rem;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
}
.voucher-list-toggle::before {
  content: '▾';
  opacity: .65;
  font-size: .7rem;
}
.voucher-list.is-min .voucher-list-toggle::before { content: '▸'; }
.voucher-list-acts {
  display: inline-flex;
  gap: .25rem;
  align-items: center;
}
.voucher-list-acts .btn-sm { padding: .15rem .4rem; font-size: .7rem; }
.voucher-table-wrap { overflow-x: auto; margin-top: .25rem; }
.voucher-table { font-size: .72rem; }
.voucher-table th,
.voucher-table td { padding: .15rem .28rem; vertical-align: middle; }
.voucher-code { font-size: .72rem; }
.voucher-plan { font-size: .72rem; }
.voucher-meta { font-size: .62rem; line-height: 1.2; }
.voucher-row-acts {
  display: inline-flex;
  gap: .15rem;
  white-space: nowrap;
}
.voucher-row-acts .btn-sm { padding: .12rem .35rem; font-size: .68rem; min-width: 0; }
.logs-panel { padding: .5rem .65rem; }
.logs-panel[hidden] { display: none !important; }
.svc-tools { gap: .65rem; margin-bottom: .5rem; }
.svc-tools .dash-section { margin-bottom: 0; }
.svc-tools select,
.svc-tools input {
  width: 100%;
  margin: 0 0 .35rem;
  padding: .35rem .5rem;
  font-size: .82rem;
}
.svc-tools .btn { margin-top: .15rem; }

/* Recently recharged / Recent activity ? bright lavender theme */
.activity-lavender > .card {
  border-color: #b794f6;
  background: linear-gradient(160deg, #e9d5ff, #c4b5fd);
}
.activity-lavender .dash-head h3 { color: #4c1d95; }
.activity-lavender .mini-feed li { border-bottom-color: #a78bfa; }
.activity-lavender .mini-feed-main { color: #3b0764; }
.activity-lavender .mini-feed-sub,
.activity-lavender .muted { color: #6b21a8; }
.activity-lavender .badge {
  background: rgba(255,255,255,.55);
  color: #5b21b6;
  border: 1px solid #a78bfa;
}

/* Compact Manage Customers */
.cust-topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem .65rem;
  margin-bottom: .55rem;
}
.cust-search { display: inline-flex; gap: .35rem; align-items: center; margin: 0; }
.cust-search input[type="search"] {
  min-width: 180px;
  max-width: 260px;
  padding: .28rem .45rem;
  font-size: .78rem;
}
.cust-counts { font-size: .72rem; margin-left: auto; }
.cust-type-toggles {
  display: inline-flex;
  gap: .35rem;
  align-items: center;
}
.cust-type-btn {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
}
.cust-type-btn.is-open {
  background: #0f766e;
  border-color: #0f766e;
  color: #fff;
}
.cust-type-btn .badge {
  font-size: .62rem;
  padding: .05rem .28rem;
}
.cust-panels {
  display: flex;
  flex-direction: column;
  gap: .55rem;
}
.cust-panels .cust-side[hidden] {
  display: none !important;
}
.cust-split { gap: .55rem; align-items: start; }
.cust-side { padding: .5rem .6rem; margin-bottom: 0; }
.cust-side-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .35rem;
  margin-bottom: .35rem !important;
}
.cust-side .dash-head h3 { font-size: .85rem; margin: 0; display: flex; align-items: center; gap: .35rem; }
.cust-bulk { display: inline-flex; flex-wrap: wrap; gap: .2rem; align-items: center; }
.cust-bulk .btn-sm { padding: .12rem .35rem; font-size: .68rem; }
.cust-table { font-size: .74rem; }
.cust-table th, .cust-table td { padding: .22rem .3rem; vertical-align: middle; }
.cust-name { font-weight: 600; }
.cust-meta { font-size: .68rem; line-height: 1.2; }
.cust-plan { display: inline; margin-right: .25rem; }
.cust-plan-dur {
  font-size: .68rem;
  line-height: 1.2;
  margin: .05rem 0 .1rem;
}
.cust-exp-abs {
  font-size: .62rem;
  line-height: 1.2;
  margin-top: .1rem;
  white-space: nowrap;
}
.cust-status { font-size: .62rem; padding: .05rem .28rem; vertical-align: middle; }
.cust-manage {
  white-space: nowrap;
  overflow: visible;
  position: relative;
  z-index: 2;
}
.cust-table { font-size: .74rem; overflow: visible; }
.cust-side { overflow: visible; }
.cust-act-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 40;
  min-width: 280px;
  max-width: min(360px, 92vw);
  padding: .4rem;
  background: #fff;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
}
.cust-actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: .15rem;
  margin: 0 0 .15rem;
}
.cust-actions .btn-sm { padding: .1rem .32rem; font-size: .66rem; }
.cust-assign {
  display: inline-flex;
  gap: .2rem;
  align-items: center;
  margin: 0;
}
.cust-assign select {
  margin: 0;
  min-width: 88px;
  max-width: 120px;
  padding: .15rem .25rem;
  font-size: .68rem;
}
.cust-assign .btn-sm {
  padding: .1rem .4rem;
  font-size: .66rem;
  font-weight: 600;
}
.cust-act {
  position: relative;
  display: inline-block;
}
.cust-act > summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
}
.cust-act > summary::-webkit-details-marker { display: none; }
.cust-act-toggle {
  display: inline-block;
  padding: .1rem .4rem !important;
  font-size: .66rem !important;
}
.cust-act-row {
  display: flex;
  flex-wrap: wrap;
  gap: .2rem;
  align-items: center;
  margin-bottom: .25rem;
}
.cust-act-row:last-child { margin-bottom: 0; }
.cust-days,
.cust-time,
.cust-time-quick {
  display: inline-flex;
  gap: .15rem;
  margin: 0;
  align-items: center;
  flex-wrap: wrap;
}
.cust-time-label {
  font-size: .68rem;
  font-weight: 700;
  color: #475569;
  margin-right: .1rem;
}
.cust-time-amount {
  width: 3.2rem;
  min-height: 1.55rem;
  padding: .1rem .25rem;
  font-size: .72rem;
  border: 1px solid #cbd5e1;
  border-radius: .25rem;
}
.cust-time-unit {
  max-width: 5.2rem;
  min-height: 1.55rem;
  padding: .1rem .2rem;
  font-size: .72rem;
  border: 1px solid #cbd5e1;
  border-radius: .25rem;
}
.cust-days .btn-sm,
.cust-time .btn-sm,
.cust-time-quick .btn-sm,
.cust-time-presets .btn-sm {
  padding: .1rem .28rem;
  font-size: .64rem;
  min-width: 1.6rem;
}
.cust-time-presets {
  gap: .25rem;
}
.cust-time-row {
  padding-bottom: .15rem;
  border-bottom: 1px dashed rgba(0,0,0,.08);
}
.cust-bulk-more {
  position: relative;
  display: inline-block;
}
.cust-bulk-more > summary {
  list-style: none;
  cursor: pointer;
}
.cust-bulk-more > summary::-webkit-details-marker { display: none; }
.cust-bulk-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 25;
  display: flex;
  flex-wrap: wrap;
  gap: .2rem;
  padding: .35rem;
  min-width: 160px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
}
.cust-form-card { padding: .65rem .8rem; }
.cust-form-quick {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .45rem;
  margin-bottom: .55rem;
  padding-bottom: .45rem;
  border-bottom: 1px solid rgba(0,0,0,.08);
}
.cust-form-quick-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem;
}
.cust-form-quick-acts {
  display: inline-flex;
  flex-wrap: wrap;
  gap: .25rem;
  align-items: center;
}
.cust-form-details > summary {
  cursor: pointer;
  font-weight: 600;
  font-size: .85rem;
  padding: .2rem 0;
  user-select: none;
}
.cust-form-body { margin-top: .5rem; }
.cust-form-mini {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 22rem;
}
.cust-form-mini label {
  margin: .28rem 0 .1rem;
  font-size: .75rem;
  line-height: 1.2;
}
.cust-form-mini label:first-of-type { margin-top: 0; }
.cust-form-mini input,
.cust-form-mini select,
.cust-form-mini textarea {
  width: 100%;
  margin: 0;
  padding: .28rem .45rem;
  font-size: .82rem;
  min-height: 1.9rem;
  line-height: 1.25;
  box-sizing: border-box;
}
.cust-form-mini textarea {
  min-height: 1.9rem;
  resize: vertical;
}
.cust-form-mini-acts {
  margin-top: .55rem;
  gap: .35rem;
}
.cust-pending {
  margin-top: .4rem;
  border-top: 1px solid rgba(0,0,0,.08);
  padding-top: .25rem;
}
.cust-pending summary {
  cursor: pointer;
  font-size: .72rem;
  font-weight: 600;
  color: #555;
  list-style: none;
  display: flex;
  align-items: center;
  gap: .35rem;
  padding: .15rem 0;
  user-select: none;
}
.cust-pending summary::-webkit-details-marker { display: none; }
.cust-pending summary::before {
  content: '▸';
  font-size: .7rem;
  color: #888;
}
.cust-pending[open] summary::before { content: '▾'; }
.cust-pending .cust-table { margin-top: .25rem; }

@media (max-width: 960px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar { position: relative; height: auto; }
  .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr 1fr; }
  .insight-split { grid-template-columns: 1fr; }
  .conn-row { grid-template-columns: 1fr; }
  .mini-strip { justify-content: flex-start; }
}
@media (max-width: 640px) {
  .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; }
}
@media print {
  .sidebar, .topbar .btn, .no-print { display: none !important; }
  .shell { display: block; }
  body { background: #fff; color: #000; }
  .card { box-shadow: none; border-color: #ccc; }
}

/* Digital clock countdown ? like a wall clock display */
.badge.countdown, .countdown, .digital-clock, [data-expires-ts].digital-clock {
  display: inline-block;
  min-width: 7.2rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-family: "Consolas", "Courier New", ui-monospace, monospace;
  letter-spacing: .04em;
  white-space: nowrap;
  font-weight: 700;
}
.dash-circle-sub.digital-clock,
.countdown-circle.digital-clock {
  min-width: 6.5rem;
  font-size: .7rem !important;
}

/* Sidebar stays dark ? keep its text light on the flower theme */
body.bg-white .sidebar { color: #eaf0fa; }
body.bg-white .sidebar .brand { color: #ffffff; }
body.bg-white .sidebar .nav a { color: #b9c6dd; }
body.bg-white .sidebar .nav a:hover,
body.bg-white .sidebar .nav a.active { background: rgba(255,255,255,.12); color: #ffffff; }
body.bg-white .sidebar .nav-flyout-btn { color: #b9c6dd; }
body.bg-white .sidebar .nav-flyout-btn:hover,
body.bg-white .sidebar .nav-flyout-btn.active,
body.bg-white .sidebar .nav-flyout.is-open .nav-flyout-btn {
  background: rgba(255,255,255,.12);
  color: #ffffff;
}
body.bg-white .sidebar .nav-sub-link { color: #b9c6dd; }
body.bg-white .sidebar .nav-sub-link:hover,
body.bg-white .sidebar .nav-sub-link.active {
  background: rgba(255,255,255,.12);
  color: #ffffff;
}
body.bg-white .sidebar .muted { color: #9fb0ca; }
body.bg-white .sidebar .sidebar-user strong { color: #ffffff; }
body.bg-white .sidebar .nav-ico { filter: none; }

/* Dashboard light background with flowers (fixed layer = no shaking on scroll) */
body.bg-white {
  background-color: #f7f3ef;
  color: #243247;
}
body.bg-white::before {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: url('dashboard-flowers.png') center center / cover no-repeat;
  z-index: -1;
  pointer-events: none;
}
body.bg-white .main {
  background: transparent;
  color: #243247;
}
body.bg-white .topbar h1 { color: #1c2b45; }
body.bg-white .muted { color: #64748b; }
body.bg-white .card {
  background: rgba(255, 252, 248, .92);
  border: 1px solid #cfd9e8;
  box-shadow: 0 3px 12px rgba(18, 48, 107, .07);
  color: #243247;
}
body.bg-white .dash-head h3,
body.bg-white .stat .val,
body.bg-white .conn-val { color: #1c2b45; }
body.bg-white .stat h3,
body.bg-white .conn-card .dash-head h3,
body.bg-white .section-label,
body.bg-white .mini-title,
body.bg-white .bar-val,
body.bg-white .bar-label,
body.bg-white th { color: #64748b; }
body.bg-white td,
body.bg-white th { border-bottom-color: #dde5f0; }
body.bg-white .btn-secondary { background: #dbe4f0; color: #1a3a6e; }
body.bg-white .insight-side {
  background: #eef1f7;
  border-color: #cfd9e8;
}
body.bg-white .insight-mini-stats span,
body.bg-white .mini-chip {
  background: #e6ebf3;
  border-color: #cfd9e8;
}
body.bg-white .mini-strip {
  border-color: #e600ac;
  background: linear-gradient(160deg, #ff6ad5, #e600ac);
}
body.bg-white .mini-strip .mini-title { color: #ffffff; text-shadow: 0 1px 2px rgba(0,0,0,.25); }
body.bg-white .mini-strip .mini-chip {
  background: rgba(255,255,255,.55);
  border-color: #c70092;
}
body.bg-white .mini-strip .mini-chip em { color: #6b004f; }
body.bg-white .mini-strip .mini-chip strong { color: #470035; }
body.bg-white .mini-strip .mini-note, body.bg-white .mini-strip .muted { color: #fff0fa; }
body.bg-white .services-bar {
  background: linear-gradient(160deg, #5ce1f0, #00acc1);
  border-color: #00838f;
}
body.bg-white .services-bar .mini-title { color: #00363a; }
body.bg-white .services-bar .mini-note, body.bg-white .services-bar .muted { color: #004d52; }
body.bg-white .services-bar .btn-secondary { background: rgba(255,255,255,.85); color: #006064; }
body.bg-white .charts-cyan > .card {
  border-color: #00bcd4;
  background: linear-gradient(160deg, #5ce1f0, #00bcd4);
}
body.bg-white .charts-cyan .dash-head h3 { color: #003d47; }
body.bg-white .charts-cyan .bar-val { color: #004852; }
body.bg-white .charts-cyan .bar-label { color: #005a66; }
body.bg-white .charts-cyan .bar-fill {
  background: linear-gradient(180deg, #ffffff, #0097a7);
}
body.bg-white .charts-cyan .bar-fill.sales {
  background: linear-gradient(180deg, #e0f7fa, #00838f);
}
body.bg-white .chart-blue {
  border-color: #1e90ff;
  background: linear-gradient(160deg, #64b5f6, #1e88e5);
}
body.bg-white .chart-blue .dash-head h3 { color: #0d2748; }
body.bg-white .chart-blue .bar-val { color: #0d2748; }
body.bg-white .chart-blue .bar-label { color: #1565c0; }
body.bg-white .chart-blue .bar-fill {
  background: linear-gradient(180deg, #ffffff, #1565c0);
}
body.bg-white .chart-cyan {
  border-color: #00bcd4;
  background: linear-gradient(160deg, #5ce1f0, #00bcd4);
}
body.bg-white .chart-cyan .dash-head h3 { color: #003d47; }
body.bg-white .chart-cyan .bar-val { color: #004852; }
body.bg-white .chart-cyan .bar-label { color: #005a66; }
body.bg-white .chart-cyan .bar-fill,
body.bg-white .chart-cyan .bar-fill.sales {
  background: linear-gradient(180deg, #e0f7fa, #00838f);
}
body.bg-white .dash-circle.insight-circle {
  border-color: #c62828;
  color: #1c2b45;
}
body.bg-white .dash-circle.insight-circle .dash-circle-title { color: #1c2b45; }
body.bg-white .dash-circle.insight-circle .dash-circle-sub { color: #64748b; }
body.bg-white .insight-orange {
  border-color: #ff8c00;
  background: linear-gradient(160deg, #ffb347, #ff8c00);
}
body.bg-white .insight-orange .dash-head h3 { color: #5a2d00; }
body.bg-white .insight-orange .insight-side {
  background: rgba(255,255,255,.35);
  border-color: #e67300;
}
body.bg-white .insight-orange .dash-circle.insight-circle {
  border-color: #7a3d08;
  color: #5a2d00;
}
body.bg-white .insight-orange .dash-circle.insight-circle .dash-circle-title { color: #5a2d00; }
body.bg-white .insight-orange .dash-circle.insight-circle .dash-circle-sub { color: #7a3d08; }
body.bg-white .insight-orange .insight-mini-stats span {
  background: rgba(255,255,255,.45);
  border-color: #e67300;
}
body.bg-white .insight-orange .insight-mini-stats em { color: #7a3d08; }
body.bg-white .insight-orange .insight-mini-stats strong { color: #4a2500; }
body.bg-white .insight-orange .running-mini h4,
body.bg-white .insight-orange .running-mini .muted { color: #6b3506; }
body.bg-white .insight-orange th { color: #5a2d00; border-bottom-color: #e67300; }
body.bg-white .insight-orange td { color: #3d1f00; }
body.bg-white .insight-side-pink {
  border-color: #e91e8c !important;
  background: linear-gradient(160deg, #ff6bb5, #e91e8c) !important;
}
body.bg-white .insight-side-pink .dash-circle.insight-circle {
  border-color: #ffffff;
  color: #ffffff;
}
body.bg-white .insight-side-pink .dash-circle.insight-circle .dash-circle-title { color: #ffffff; }
body.bg-white .insight-side-pink .dash-circle.insight-circle .dash-circle-sub { color: #ffe0f0; }
body.bg-white .insight-side-pink .insight-mini-stats span {
  background: rgba(255,255,255,.4);
  border-color: #c2185b;
}
body.bg-white .insight-side-pink .insight-mini-stats em { color: #ffe0f0; }
body.bg-white .insight-side-pink .insight-mini-stats strong { color: #ffffff; }
body.bg-white .insight-side-pink .section-label,
body.bg-white .insight-side-pink .running-mini h4,
body.bg-white .insight-side-pink .running-mini .muted { color: #ffe0f0; }
body.bg-white .insight-side-pink th { color: #ffffff; border-bottom-color: #f48fb1; }
body.bg-white .insight-side-pink td { color: #ffffff; }
body.bg-white .insight-side-purple {
  border-color: #9c27b0 !important;
  background: linear-gradient(160deg, #e040fb, #9c27b0) !important;
}
body.bg-white .insight-side-purple .dash-circle.insight-circle {
  border-color: #ffffff;
  color: #ffffff;
}
body.bg-white .insight-side-purple .dash-circle.insight-circle .dash-circle-title { color: #ffffff; }
body.bg-white .insight-side-purple .dash-circle.insight-circle .dash-circle-sub { color: #f3e5f5; }
body.bg-white .insight-side-purple .insight-mini-stats span {
  background: rgba(255,255,255,.4);
  border-color: #7b1fa2;
}
body.bg-white .insight-side-purple .insight-mini-stats em { color: #f3e5f5; }
body.bg-white .insight-side-purple .insight-mini-stats strong { color: #ffffff; }
body.bg-white .insight-side-purple .section-label,
body.bg-white .insight-side-purple .running-mini h4,
body.bg-white .insight-side-purple .running-mini .muted { color: #f3e5f5; }
body.bg-white .insight-side-purple th { color: #ffffff; border-bottom-color: #ce93d8; }
body.bg-white .insight-side-purple td { color: #ffffff; }
body.bg-white .rpp-teal {
  border-color: #14b8a6;
  background: linear-gradient(160deg, #5eead4, #14b8a6);
}
body.bg-white .rpp-teal .dash-head h3 { color: #0f3d38; }
body.bg-white .rpp-teal .rpp-circles .dash-circle {
  background: linear-gradient(160deg, #ff5252, #ff1744);
  border-color: #d50000;
  box-shadow: 0 4px 14px rgba(255, 23, 68, .45);
  color: #ffffff;
}
body.bg-white .rpp-teal .rpp-circles .dash-circle-title { color: #ffffff; text-shadow: 0 1px 2px rgba(0,0,0,.3); }
body.bg-white .rpp-teal .rpp-circles .dash-circle-sub { color: #ffebee; text-shadow: 0 1px 2px rgba(0,0,0,.25); }
body.bg-white .rpp-teal .rpp-circles .dash-circle.is-active {
  border-color: #ffffff;
  box-shadow: 0 0 0 3px rgba(255, 82, 82, .6), 0 4px 14px rgba(255, 23, 68, .5);
}
body.bg-white .rpp-teal .circle-panel {
  background: rgba(255,255,255,.4);
}
body.bg-white .rpp-teal .circle-panel .stat .val { color: #042f2e; }
body.bg-white .rpp-teal .circle-panel .stat h3,
body.bg-white .rpp-teal .circle-panel .muted { color: #134e4a; }
body.bg-white .rpp-teal th { color: #0f3d38; border-bottom-color: #0f766e; }
body.bg-white .rpp-teal td { color: #042f2e; }
body.bg-white .rpp-teal .toolbar .btn-sm {
  background: rgba(255,255,255,.8);
  color: #0f766e;
}
body.bg-white .activity-lavender > .card {
  border-color: #b794f6;
  background: linear-gradient(160deg, #e9d5ff, #c4b5fd);
}
body.bg-white .activity-lavender .dash-head h3 { color: #4c1d95; }
body.bg-white .activity-lavender .mini-feed li { border-bottom-color: #a78bfa; }
body.bg-white .activity-lavender .mini-feed-main { color: #3b0764; }
body.bg-white .activity-lavender .mini-feed-sub,
body.bg-white .activity-lavender .muted { color: #6b21a8; }
body.bg-white .activity-lavender .badge {
  background: rgba(255,255,255,.55);
  color: #5b21b6;
  border: 1px solid #a78bfa;
}
body.bg-white .conn-red {
  border-color: #c62828;
  background: linear-gradient(160deg, #e53935, #8b0000);
}
body.bg-white .conn-red .conn-val { color: #ffffff; }
body.bg-white .conn-red .dash-head h3 { color: #ffd7d7; }
body.bg-white .conn-red .conn-note, body.bg-white .conn-red .muted { color: #ffc4c4; }
body.bg-white .conn-red a { color: #ffe3e3; }
body.bg-white .conn-rainbow {
  border: none;
  background: linear-gradient(120deg, #e53935, #f57c00, #fbc02d, #43a047, #1e88e5, #5e35b1, #8e24aa);
}
body.bg-white .conn-rainbow .conn-val { color: #ffffff; text-shadow: 0 1px 3px rgba(0,0,0,.45); }
body.bg-white .conn-rainbow .dash-head h3 { color: #ffffff; text-shadow: 0 1px 2px rgba(0,0,0,.4); }
body.bg-white .conn-rainbow .conn-note, body.bg-white .conn-rainbow .muted { color: #fdfdfd; text-shadow: 0 1px 2px rgba(0,0,0,.4); }
body.bg-white .conn-rainbow a { color: #ffffff; }
body.bg-white .conn-blue {
  border-color: #1d6feb;
  background: linear-gradient(160deg, #d9e7fb, #f4f6fa);
}
body.bg-white .conn-blue .conn-val { color: #0b5cab; }
body.bg-white .conn-blue .dash-head h3 { color: #1a5fb0; }
body.bg-white .conn-orange {
  border-color: #e67e22;
  background: linear-gradient(160deg, #fde6d2, #f4f6fa);
}
body.bg-white .conn-orange .conn-val { color: #c45f0a; }
body.bg-white .conn-orange .dash-head h3 { color: #b85a0c; }
body.bg-white .conn-yellow {
  border-color: #d9a412;
  background: linear-gradient(160deg, #f6ecce, #f4f6fa);
}
body.bg-white .conn-yellow .conn-val { color: #a67908; }
body.bg-white .conn-yellow .dash-head h3 { color: #9a7108; }
body.bg-white .conn-grey {
  border-color: #9aa3b2;
  background: linear-gradient(160deg, #e4e8ee, #f4f6fa);
}
body.bg-white .conn-grey .conn-val { color: #4a5568; }
body.bg-white .conn-grey .dash-head h3 { color: #5a6578; }
body.bg-white .conn-green {
  border-color: #2a9d61;
  background: linear-gradient(160deg, #dcefe4, #f4f6fa);
}
body.bg-white .conn-green .conn-val { color: #157a42; }
body.bg-white .conn-green .dash-head h3 { color: #1a8f4e; }
body.bg-white .badge.active,
body.bg-white .badge.completed,
body.bg-white .badge.sent { background: #d3e5f8; color: #0b5cab; }
body.bg-white .badge.online {
  background: #c8e6c9 !important;
  color: #1b5e20 !important;
  border: 1px solid #66bb6a;
}
body.bg-white .badge.expired,
body.bg-white .badge.failed,
body.bg-white .badge.offline { background: #f6d8dc; color: #a32133; }
body.bg-white .badge.pending,
body.bg-white .badge.unknown,
body.bg-white .badge.queued { background: #f3e6c3; color: #8a6000; }
body.bg-white .badge.disabled { background: #dfe6f0; color: #4a5568; }
body.bg-white .flash.success { background: #ddeafc; border-color: #1d6feb; color: #1c2b45; }
body.bg-white .flash.error { background: #f8dfe2; border-color: #e35d6a; color: #1c2b45; }
body.bg-white .mini-feed li { border-bottom-color: #dde5f0; }
body.bg-white a { color: #1d6feb; }

/* Payment Gateway Settings */
.pg-wrap { max-width: 1100px; }
.pg-topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: 1rem;
}
.pg-topbar .pg-intro { margin: 0; flex: 1; }
.settings-topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .65rem;
}
.settings-lead {
  margin: 0;
  flex: 1;
  font-size: .85rem;
}
.settings-page {
  max-width: 720px;
}
.settings-form {
  display: flex;
  flex-direction: column;
  gap: .45rem;
}
.settings-block {
  border: 1px solid rgba(28, 43, 69, .14);
  border-radius: 10px;
  background: #fff;
  padding: 0 .85rem;
}
.settings-block > summary {
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  font-size: .92rem;
  padding: .65rem 0;
  user-select: none;
}
.settings-block > summary::-webkit-details-marker { display: none; }
.settings-block > summary::after {
  content: '+';
  float: right;
  font-weight: 500;
  color: #5a6a82;
}
.settings-block[open] > summary::after { content: '?'; }
.settings-block[open] > summary {
  border-bottom: 1px solid rgba(28, 43, 69, .1);
  margin-bottom: .55rem;
}
.settings-fields {
  padding: 0 0 .75rem;
}
.settings-fields label {
  display: block;
  margin: .35rem 0 .15rem;
  font-size: .8rem;
}
.settings-fields input[type="text"],
.settings-fields input[type="email"],
.settings-fields input[type="number"],
.settings-fields input:not([type]) {
  width: 100%;
  margin-bottom: .15rem;
  padding: .4rem .55rem;
  font-size: .9rem;
}
.settings-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .35rem .65rem;
}
.settings-span-2 { grid-column: 1 / -1; }
.settings-check {
  display: flex !important;
  align-items: center;
  gap: .4rem;
  font-size: .85rem !important;
  margin: .25rem 0 !important;
  font-weight: 400;
}
.settings-checks {
  margin-top: .4rem;
  display: flex;
  flex-direction: column;
  gap: .1rem;
}
.settings-hint {
  margin: .25rem 0 .35rem;
  font-size: .78rem;
}
.settings-inline-link {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .75rem;
  padding: .35rem 0 .75rem;
}
.settings-backup-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
}
.settings-backup-row input[type="file"] {
  flex: 1;
  min-width: 140px;
  font-size: .8rem;
}
.settings-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: .5rem;
}
.settings-actions-sticky {
  position: sticky;
  bottom: 0;
  padding: .65rem 0;
  background: linear-gradient(180deg, transparent, #f4f6f9 28%);
  z-index: 2;
}
@media (max-width: 640px) {
  .settings-grid-2 { grid-template-columns: 1fr; }
  .settings-page { max-width: none; }
}
.pg-intro { margin: 0 0 1rem; }
.pg-status-row {
  display: flex;
  flex-wrap: wrap;
  gap: .85rem 1.5rem;
  margin-bottom: 1rem;
}
.pg-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
}
.pg-status-label {
  font-weight: 800;
  color: #1c2b45;
  margin-right: .25rem;
}
.pg-grid { align-items: start; }
.pg-card .dash-head { margin-bottom: .65rem; }
.pg-card .dash-head h3 { margin: 0; font-size: 1.05rem; }
.pg-check {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin: .35rem 0;
  font-weight: 600;
}
.pg-hint { margin: .35rem 0; font-size: .8rem; }
.pg-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin: 1rem 0 .75rem;
}
.pg-actions-left {
  justify-content: flex-start;
  margin: 0 0 .75rem;
}
.pg-actions-right {
  justify-content: flex-end;
  margin: 0 0 .75rem;
}
.pg-actions-bottom {
  justify-content: flex-end;
  margin: 1rem 0 0;
  padding-top: .75rem;
}
.pg-actions-inline {
  margin-top: .35rem;
}
.pg-test {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .65rem;
  margin-bottom: 1rem;
}
.pg-env-note { font-size: .78rem; }
.pg-settings-link {
  margin: 1rem 0 1.25rem;
  padding: .85rem 0;
  border-top: 1px solid rgba(28,43,69,.12);
  border-bottom: 1px solid rgba(28,43,69,.12);
}
body.bg-white .pg-status-label { color: #1c2b45; }

/* Payment gateway picker list */
.pg-list-card { margin-bottom: 1rem; }
.pg-gateway-list {
  display: flex;
  flex-direction: column;
  gap: .55rem;
}
.pg-gateway-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: .75rem;
  align-items: center;
  padding: .85rem 1rem;
  border: 1px solid rgba(29, 111, 235, .18);
  border-radius: 14px;
  background: #f8fbff;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.pg-gateway-row:hover {
  border-color: rgba(29, 111, 235, .4);
  box-shadow: 0 4px 14px rgba(29, 111, 235, .08);
}
.pg-gateway-row.is-default {
  border-color: #1d6feb;
  background: linear-gradient(160deg, #e8f1ff, #f7faff);
  box-shadow: 0 0 0 2px rgba(29, 111, 235, .15);
}
.pg-gateway-check input,
.pg-gateway-default input {
  width: 1.15rem;
  height: 1.15rem;
  accent-color: #1d6feb;
}
.pg-gateway-name {
  display: block;
  font-weight: 800;
  color: #1c2b45;
  font-size: 1rem;
}
.pg-gateway-desc {
  display: block;
  font-size: .8rem;
  margin-top: .12rem;
}
.pg-gateway-default {
  display: flex;
  align-items: center;
  gap: .4rem;
  white-space: nowrap;
  font-size: .8rem;
  font-weight: 700;
  color: #1d6feb;
}
.pg-save-btn {
  background: #1d6feb !important;
  border-color: #1557c0 !important;
  color: #fff !important;
  border-radius: 999px;
  padding: .55rem 1.35rem;
  font-weight: 800;
}
.pg-save-btn:hover {
  background: #1557c0 !important;
}
.pg-creds { margin-top: .25rem; }
.pg-creds-summary {
  cursor: pointer;
  font-weight: 800;
  color: #1c2b45;
  list-style: none;
}
.pg-creds-summary::-webkit-details-marker { display: none; }
@media (max-width: 720px) {
  .pg-gateway-row {
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "check body"
      "check def";
  }
  .pg-gateway-check { grid-area: check; }
  .pg-gateway-body { grid-area: body; }
  .pg-gateway-default { grid-area: def; justify-self: start; margin-left: 0; }
}

.pg-select {
  width: 100%;
  max-width: 420px;
  padding: .55rem .7rem;
  border-radius: 10px;
  border: 1px solid rgba(29,111,235,.35);
  font: inherit;
  font-weight: 600;
}
.pg-gateway-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  justify-content: flex-end;
}

/* Bright-blue circle hubs ? one row, toggle open/close */
.pg-circles {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: flex-start;
  gap: .4rem;
  margin: .5rem auto .85rem;
  overflow-x: auto;
  padding: .2rem 0 .4rem;
  max-width: 28rem;
}
.pg-circle {
  flex: 0 0 auto;
  width: 4.6rem;
  height: 4.6rem;
  min-width: 4.6rem;
  max-width: 4.6rem;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 3px solid #1e90ff;
  background: radial-gradient(circle at 35% 30%, #6ec1ff 0%, #1e90ff 55%, #0077e6 100%);
  color: #fff !important;
  text-decoration: none !important;
  box-shadow: 0 6px 18px rgba(30, 144, 255, .45), inset 0 1px 0 rgba(255,255,255,.35);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .12rem;
  padding: .35rem;
  font: inherit;
  text-align: center;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
  box-sizing: border-box;
}
.pg-circle:hover {
  transform: translateY(-2px) scale(1.03);
  filter: brightness(1.06);
  box-shadow: 0 10px 24px rgba(30, 144, 255, .55), inset 0 1px 0 rgba(255,255,255,.4);
}
.pg-circle.is-open,
.pg-circle.is-active-hub.is-open {
  border-color: #fff;
  outline: 3px solid #00bfff;
  outline-offset: 2px;
  background: radial-gradient(circle at 35% 30%, #8fd0ff 0%, #00bfff 50%, #0088ee 100%);
  box-shadow: 0 0 0 4px rgba(0, 191, 255, .35), 0 10px 28px rgba(0, 150, 255, .55);
}
.pg-circle.is-active-hub:not(.is-open) {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .9), 0 8px 22px rgba(30, 144, 255, .5);
}
.pg-circle-label {
  font-size: .68rem;
  font-weight: 800;
  line-height: 1.1;
  text-shadow: 0 1px 2px rgba(0,40,90,.35);
  max-width: 100%;
  word-break: break-word;
}
.pg-circle-meta {
  font-size: .55rem;
  font-weight: 700;
  opacity: .92;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.pg-circle-panel {
  margin: 0 0 1rem;
}
.pg-circle-panel-inner .pg-wrap {
  max-width: none;
  margin: 0;
}
.pg-circle-panel-inner .card,
.pg-circle-panel-inner .mpesa-paybill-hero,
.pg-circle-panel-inner .mpesa-till-hero,
.pg-circle-panel-inner .pg-ptb-hero,
.pg-circle-panel-inner .bank-stk-hero {
  margin-bottom: 0;
}
.pg-embed-title {
  margin: 0 0 .65rem;
  font-size: 1.05rem;
  color: #0d47a1;
}
.pg-wrap.is-embed {
  max-width: none;
}
.pg-default-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: .75rem 1.25rem;
}
.pg-default-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .45rem .75rem;
  margin: 0 0 .75rem;
  padding: .35rem 0;
}
.pg-default-label {
  margin: 0;
  font-size: .8rem;
  font-weight: 700;
  color: #5a6a82;
}
.pg-select-sm {
  width: auto;
  max-width: 220px;
  min-width: 140px;
  padding: .28rem .5rem;
  font-size: .85rem;
  margin: 0;
}
.pg-check-inline {
  display: inline-flex !important;
  align-items: center;
  gap: .35rem;
  margin: 0 !important;
  font-size: .82rem;
  font-weight: 500;
  white-space: nowrap;
}
.pg-default-fields {
  flex: 1 1 220px;
  min-width: 180px;
}
.pg-default-fields .pg-select {
  width: 100%;
  max-width: none;
}
@media (max-width: 640px) {
  .pg-circles { gap: .3rem; max-width: 100%; }
  .pg-circle { width: 4.1rem; height: 4.1rem; min-width: 4.1rem; max-width: 4.1rem; }
  .pg-circle-label { font-size: .62rem; }
}

/* Two hub buttons: M-Pesa & Airtel | Banks (legacy hubs kept for other pages) */
.pg-hubs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .85rem;
  margin: 0 0 1rem;
}
.pg-hub {
  border: 1px solid rgba(28, 43, 69, .14);
  border-radius: 18px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(28, 43, 69, .05);
}
.pg-hub.is-active-hub {
  border-color: rgba(29, 111, 235, .45);
}
.pg-hub.is-open {
  grid-column: 1 / -1;
  box-shadow: 0 10px 28px rgba(28, 43, 69, .08);
}
.pg-hub-btn {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .28rem;
  text-align: left;
  border: 0;
  background: linear-gradient(165deg, #f4f8ff, #ffffff 55%);
  padding: 1.05rem 1.15rem 1.1rem;
  cursor: pointer;
  font: inherit;
}
.pg-hub[data-hub="banks"] .pg-hub-btn {
  background: linear-gradient(165deg, #f3faf4, #ffffff 55%);
}
.pg-hub-btn:hover {
  filter: brightness(0.99);
}
.pg-hub-title {
  font-size: 1.2rem;
  font-weight: 900;
  color: #12325c;
  letter-spacing: .01em;
}
.pg-hub[data-hub="banks"] .pg-hub-title {
  color: #1b5e20;
}
.pg-hub-link {
  text-decoration: none;
  color: inherit;
  display: block;
}
.pg-hub-link .pg-hub-btn {
  height: 100%;
  box-sizing: border-box;
  background: linear-gradient(165deg, #f3faf4, #ffffff 55%);
  border-radius: 18px;
}
.pg-hub-link .pg-hub-title {
  color: #1b5e20;
}
.pg-hub-till .pg-hub-btn {
  background: linear-gradient(165deg, #e8f5e9, #ffffff 55%);
}
.pg-hub-till .pg-hub-title {
  color: #1b5e20;
}
.pg-hubs-3 {
  grid-template-columns: 1fr 1fr 1fr;
}
.pg-hubs-4 {
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 900px) {
  .pg-hubs-3,
  .pg-hubs-4 { grid-template-columns: 1fr; }
}
.pg-hub-bankstk .pg-hub-btn {
  background: linear-gradient(165deg, #e8f5e9, #ffffff 55%);
}
.pg-hub-bankstk .pg-hub-title {
  color: #1b5e20;
}
.pg-ptb-form label {
  display: block;
  font-weight: 700;
  margin: .55rem 0 .28rem;
}
.pg-ptb-form input,
.pg-ptb-form select {
  width: 100%;
  padding: .55rem .7rem;
  border-radius: 10px;
  border: 1px solid rgba(28,43,69,.18);
  font: inherit;
}
.pg-hub-paybill .pg-hub-btn {
  background: linear-gradient(165deg, #e3f2fd, #ffffff 55%);
}
.pg-hub-paybill .pg-hub-title {
  color: #0d47a1;
}
.pg-hub-ptb .pg-hub-btn {
  background: linear-gradient(165deg, #f3e5f5, #ffffff 55%);
}
.pg-hub-ptb .pg-hub-title {
  color: #4a148c;
}
.pg-ptb-wrap { max-width: 620px; margin: 0 auto; }
.pg-ptb-hero {
  padding: 1.15rem 1.25rem 1.35rem;
  border-radius: 16px;
  border: 1px solid rgba(46, 125, 50, .22);
  background: linear-gradient(180deg, #f1f8e9, #ffffff);
}
.pg-ptb-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: .75rem;
  margin-bottom: .85rem;
}
.pg-ptb-brand {
  margin: 0;
  font-weight: 900;
  font-size: 1rem;
  color: #1b5e20;
  line-height: 1.35;
}
.pg-ptb-title {
  margin: .35rem 0 0;
  font-size: 1.35rem;
  font-weight: 900;
  color: #12325c;
}
.pg-ptb-hint { margin: .75rem 0 0; }
.pg-ptb-panel {
  margin-top: 1rem;
  padding-top: .85rem;
  border-top: 1px dashed rgba(46, 125, 50, .28);
}
.pg-ptb-wrap .pg-select { max-width: none; width: 100%; margin-top: .35rem; }
.pg-ptb-wrap label {
  display: block;
  font-weight: 800;
  margin: .35rem 0 .25rem;
  color: #1c2b45;
}
.mpesa-paybill-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: .75rem;
  margin-bottom: .35rem;
}
.pg-hubs-min {
  grid-template-columns: 1fr 1fr;
}
.pg-compact-card {
  padding: .85rem 1rem;
}
.pg-compact-card label { margin-top: 0; }
.pg-gateway-row-min {
  padding: .55rem .75rem;
}
.pg-gateway-row-min .pg-gateway-desc { display: none; }

/* Banks hub page (search + configure) */
.pg-banks-wrap { max-width: 720px; }
.pg-banks-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: .75rem;
  margin-bottom: .75rem;
}
.pg-banks-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 900;
  color: #1b5e20;
}
.pg-banks-sub { margin: .25rem 0 0; font-size: .85rem; }
.pg-banks-picker {
  margin-bottom: .75rem;
  padding: .85rem 1rem;
}
.pg-banks-picker label {
  display: block;
  font-weight: 700;
  margin: .45rem 0 .3rem;
}
.pg-banks-form-card { padding: .85rem 1rem 1rem; }
.pg-banks-form-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .5rem;
  align-items: center;
  margin-bottom: .35rem;
}
.pg-banks-status-row {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1.25rem;
  margin: .35rem 0 .65rem;
}
.pg-banks-section {
  border: 1px solid rgba(28,43,69,.12);
  border-radius: 12px;
  margin: .45rem 0;
  background: #fafcfb;
}
.pg-banks-section > summary {
  cursor: pointer;
  font-weight: 800;
  padding: .55rem .75rem;
  list-style: none;
  color: #1c2b45;
}
.pg-banks-section > summary::-webkit-details-marker { display: none; }
.pg-banks-section-body {
  padding: 0 .75rem .75rem;
}
.pg-banks-form label {
  display: block;
  font-weight: 700;
  margin: .45rem 0 .25rem;
  font-size: .9rem;
}
.pg-banks-form input,
.pg-banks-form select,
.pg-banks-form textarea {
  width: 100%;
  padding: .5rem .65rem;
  border-radius: 10px;
  border: 1px solid rgba(28,43,69,.18);
  font: inherit;
}
.pg-hub-sub {
  font-size: .84rem;
  color: #5a6b82;
  font-weight: 600;
}
.pg-hub-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin-top: .35rem;
}
.pg-hub-panel {
  padding: 0 .85rem 1rem;
  border-top: 1px dashed rgba(28, 43, 69, .12);
}
.pg-hub-panel .pg-gateway-list {
  margin-top: .75rem;
}
@media (max-width: 720px) {
  .pg-hubs { grid-template-columns: 1fr; }
  .pg-hub.is-open { grid-column: auto; }
}

.portal-pay-methods {
  display: flex;
  flex-direction: column;
  gap: .45rem;
  margin: .35rem 0 .75rem;
  text-align: left;
}
.portal-pay-method {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .55rem .7rem;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 12px;
  background: rgba(255,255,255,.75);
  font-weight: 700;
  cursor: pointer;
}
.portal-pay-method input { accent-color: #1d6feb; width: 1.1rem; height: 1.1rem; }

.pg-config-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.pg-config-form .pg-card { margin-bottom: .85rem; }
.pg-config-form label { display: block; font-weight: 700; margin: .55rem 0 .25rem; color: #1c2b45; }

/* Bank STK Push ? Pamnet form */
.bank-stk-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: .75rem;
  margin-bottom: .35rem;
}
.bank-stk-hero {
  padding: 1.25rem 1.35rem 1.5rem;
  border-radius: 16px;
  border: 1px solid rgba(29,111,235,.2);
  background: linear-gradient(180deg, #f4f8ff, #ffffff);
}
.bank-stk-title {
  margin: 0 0 .35rem;
  font-size: 1.45rem;
  font-weight: 800;
  color: #0b5cab;
  text-align: center;
}
.bank-stk-sub {
  margin: 0 0 1rem;
  text-align: center;
  color: #64748b;
  font-size: .95rem;
}
.bank-stk-form label {
  display: block;
  font-weight: 700;
  margin: .65rem 0 .3rem;
  color: #1c2b45;
}
.bank-stk-form input,
.bank-stk-form select {
  width: 100%;
  padding: .65rem .75rem;
  border-radius: 10px;
  border: 1px solid rgba(28,43,69,.2);
  font: inherit;
}
.bank-stk-warning {
  margin: 1rem 0;
  padding: .75rem .85rem;
  border-radius: 12px;
  background: #fff8e1;
  border: 1px solid #ffe082;
  color: #6d4c00;
  font-size: .9rem;
  line-height: 1.4;
}
.bank-stk-saved {
  margin: .5rem 0 0;
  padding: .65rem .75rem;
  border-radius: 12px;
  background: #e8f5e9;
  border: 1px solid #a5d6a7;
}
.bank-stk-saved p { margin: .35rem 0 0; color: #1b5e20; }
.bank-stk-api {
  margin-top: 1rem;
  padding: .65rem .75rem;
  border-radius: 12px;
  background: #f8fafc;
  border: 1px dashed rgba(28,43,69,.2);
}
.bank-stk-api summary {
  cursor: pointer;
  font-weight: 800;
  color: #1c2b45;
}

/* M-Pesa Till gateway form */
.mpesa-till-wrap { max-width: 580px; margin: 0 auto; }
.mpesa-till-hero {
  padding: 1.25rem 1.35rem 1.5rem;
  border-radius: 16px;
  border: 1px solid rgba(46,125,50,.25);
  background: linear-gradient(180deg, #e8f5e9, #ffffff);
}
.mpesa-till-title {
  margin: 0 0 .25rem;
  font-size: 1.2rem;
  font-weight: 800;
  color: #1b5e20;
  text-align: center;
  line-height: 1.3;
}
.mpesa-till-brand {
  margin: 0 0 1rem;
  text-align: center;
  font-size: 1.5rem;
  font-weight: 900;
  color: #2e7d32;
  letter-spacing: .02em;
}
.mpesa-till-form label {
  display: block;
  font-weight: 700;
  margin: .65rem 0 .3rem;
  color: #1c2b45;
}
.mpesa-till-form input,
.mpesa-till-form select {
  width: 100%;
  padding: .65rem .75rem;
  border-radius: 10px;
  border: 1px solid rgba(28,43,69,.2);
  font: inherit;
}
.mpesa-till-env-note {
  margin: .4rem 0 .75rem;
  padding: .55rem .7rem;
  border-radius: 10px;
  background: #fff8e1;
  border: 1px solid #ffe082;
  color: #6d4c00;
  font-size: .86rem;
}
.mpesa-till-wg {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px dashed rgba(46,125,50,.3);
}
.mpesa-till-wg h3 {
  margin: 0 0 .4rem;
  font-size: .95rem;
  color: #1b5e20;
}
.mpesa-till-rsc {
  margin: .5rem 0 0;
  padding: .75rem;
  border-radius: 10px;
  background: #0f172a;
  color: #e2e8f0;
  font-size: .78rem;
  overflow-x: auto;
  white-space: pre;
}

/* Kopokopo gateway form */
.kopo-wrap { max-width: 600px; margin: 0 auto; }
.kopo-hero {
  padding: 1.25rem 1.35rem 1.5rem;
  border-radius: 16px;
  border: 1px solid rgba(13,71,161,.22);
  background: linear-gradient(180deg, #e3f2fd, #ffffff);
}
.kopo-title {
  margin: 0 0 .25rem;
  font-size: 1.15rem;
  font-weight: 800;
  color: #0d47a1;
  text-align: center;
  line-height: 1.35;
}
.kopo-brand {
  margin: 0 0 1rem;
  text-align: center;
  font-size: 1.35rem;
  font-weight: 900;
  color: #1565c0;
}
.kopo-form label {
  display: block;
  font-weight: 700;
  margin: .65rem 0 .3rem;
  color: #1c2b45;
}
.kopo-form input,
.kopo-form select {
  width: 100%;
  padding: .65rem .75rem;
  border-radius: 10px;
  border: 1px solid rgba(28,43,69,.2);
  font: inherit;
}
.kopo-wg {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px dashed rgba(13,71,161,.3);
}
.kopo-wg h3 {
  margin: 0 0 .4rem;
  font-size: .95rem;
  color: #0d47a1;
}
.kopo-rsc {
  margin: .5rem 0 0;
  padding: .75rem;
  border-radius: 10px;
  background: #0f172a;
  color: #e2e8f0;
  font-size: .78rem;
  overflow-x: auto;
  white-space: pre;
}

/* M-Pesa Paybill gateway form */
.mpesa-paybill-wrap { max-width: 620px; margin: 0 auto; }
.mpesa-paybill-hero {
  padding: 1.25rem 1.35rem 1.5rem;
  border-radius: 16px;
  border: 1px solid rgba(46,125,50,.28);
  background: linear-gradient(180deg, #e8f5e9, #ffffff);
}
.mpesa-paybill-title {
  margin: 0 0 .2rem;
  font-size: 1.2rem;
  font-weight: 800;
  color: #1b5e20;
  text-align: center;
}
.mpesa-paybill-brand {
  margin: 0 0 1rem;
  text-align: center;
  font-size: 1.55rem;
  font-weight: 900;
  color: #2e7d32;
}
.mpesa-paybill-form label {
  display: block;
  font-weight: 700;
  margin: .65rem 0 .3rem;
  color: #1c2b45;
}
.mpesa-paybill-form input,
.mpesa-paybill-form select {
  width: 100%;
  padding: .65rem .75rem;
  border-radius: 10px;
  border: 1px solid rgba(28,43,69,.2);
  font: inherit;
}
.mpesa-paybill-note {
  margin: .4rem 0 .75rem;
  padding: .55rem .7rem;
  border-radius: 10px;
  background: #fff8e1;
  border: 1px solid #ffe082;
  color: #6d4c00;
  font-size: .86rem;
}
.mpesa-c2b-box {
  margin: .85rem 0;
  padding: .75rem .85rem;
  border-radius: 12px;
  background: #f1f8e9;
  border: 1px solid #c5e1a5;
}
.mpesa-paybill-wg {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px dashed rgba(46,125,50,.3);
}
.mpesa-paybill-wg h3 { margin: 0 0 .4rem; font-size: .95rem; color: #1b5e20; }
.mpesa-paybill-rsc {
  margin: .5rem 0 0;
  padding: .75rem;
  border-radius: 10px;
  background: #0f172a;
  color: #e2e8f0;
  font-size: .78rem;
  overflow-x: auto;
  white-space: pre;
}

/* Portal: Paybill / Till / Bank payment type picker */
.portal-pay-gateway {
  padding-top: .35rem;
}
.portal-pay-gateway-brand {
  margin: 0 0 .55rem;
  text-align: center;
  font-size: .92rem;
  font-weight: 800;
  letter-spacing: .01em;
  color: #1b5e20;
  line-height: 1.35;
}
.portal-pay-gateway .portal-mpesa-title,
.portal-pay-gateway .portal-title {
  margin-top: .15rem;
}
.portal-pay-gateway select.portal-input {
  appearance: auto;
  background: #fff;
}