:root {
  --bg: #f3f6fb;
  --bg-grad-1: #f8fbff;
  --bg-grad-2: #eef3f8;
  --panel: #ffffff;
  --panel-2: #f7f9fc;
  --line: #dbe4ef;
  --line-2: #e8eef5;
  --text: #10243b;
  --muted: #66788d;
  --heading: #0f1f33;
  --accent: #2563eb;
  --accent-2: #1d4ed8;
  --accent-soft: #eff6ff;
  --success: #15803d;
  --warn: #b45309;
  --danger: #dc2626;
  --shadow-sm: 0 8px 24px rgba(15, 23, 42, 0.05);
  --shadow-md: 0 16px 40px rgba(15, 23, 42, 0.08);
  --radius: 18px;
  --radius-sm: 12px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, Arial, sans-serif;
  background:
    radial-gradient(circle at top left, rgba(37, 99, 235, 0.06), transparent 28%),
    linear-gradient(180deg, var(--bg-grad-1) 0%, var(--bg-grad-2) 100%);
  color: var(--text);
}
button, input, select, textarea { font: inherit; }
a { color: inherit; text-decoration: none; }

input, select, textarea {
  width: 100%;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: 14px;
  padding: 12px 14px;
  outline: none;
  transition: border-color .18s ease, box-shadow .18s ease, transform .12s ease;
}
input:focus, select:focus, textarea:focus {
  border-color: rgba(37,99,235,.45);
  box-shadow: 0 0 0 4px rgba(37,99,235,.10);
}
textarea { min-height: 100px; resize: vertical; }
label { display: grid; gap: 8px; color: var(--muted); font-size: 14px; font-weight: 600; }

.login-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
}
.login-hero {
  padding: 64px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
}
.login-hero h1 {
  margin: 10px 0 0;
  font-size: 48px;
  letter-spacing: -0.03em;
  color: var(--heading);
}
.login-hero p { color: var(--muted); max-width: 760px; line-height: 1.7; }
.feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.feature-card, .card {
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 20px;
  box-shadow: var(--shadow-sm);
}
.feature-card h3, .card h3, .card h4 { margin-top: 0; color: var(--heading); }
.feature-card p, .card p { line-height: 1.6; }
.login-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
}
.form-card {
  width: 100%;
  max-width: 480px;
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid var(--line);
  border-radius: 28px;
  padding: 32px;
  box-shadow: var(--shadow-md);
}
.form-grid { display: grid; gap: 14px; }

.btn, .btn-secondary, .btn-danger {
  border: none;
  border-radius: 14px;
  padding: 12px 16px;
  cursor: pointer;
  font-weight: 700;
  letter-spacing: .01em;
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.btn:hover, .btn-secondary:hover, .btn-danger:hover { transform: translateY(-1px); }
.btn {
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent-2) 100%);
  color: white;
  box-shadow: 0 10px 20px rgba(37,99,235,.18);
}
.btn-secondary {
  background: #f3f7fb;
  color: var(--heading);
  border: 1px solid var(--line);
}
.btn-danger {
  background: linear-gradient(180deg, #ef4444 0%, #dc2626 100%);
  color: white;
  box-shadow: 0 10px 20px rgba(220,38,38,.14);
}
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; }

.app-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 296px 1fr;
}
.sidebar {
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  border-right: 1px solid var(--line);
  padding: 18px 14px 24px;
  overflow-y: auto;
  position: sticky;
  top: 0;
  height: 100vh;
}
.brand {
  padding: 18px 16px 20px;
  border: 1px solid var(--line);
  border-radius: 24px;
  margin-bottom: 18px;
  background:
    radial-gradient(circle at top right, rgba(37,99,235,.08), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  box-shadow: var(--shadow-sm);
}
.brand h2 { margin: 0 0 8px; font-size: 24px; letter-spacing: -0.02em; color: var(--heading); }
.brand small { color: var(--muted); font-weight: 600; }
.role-badge {
  display: inline-flex;
  margin-top: 12px;
  padding: 7px 11px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-2);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .09em;
  font-weight: 800;
}
.menu-section-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: transparent;
  border: none;
  border-radius: 14px;
  padding: 12px 14px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
.menu-section-toggle:hover {
  background: #f3f7fb;
  transform: translateX(1px);
}
.menu-section-toggle.open {
  background: linear-gradient(180deg, #edf4ff 0%, #e7f0ff 100%);
  box-shadow: inset 0 0 0 1px rgba(37,99,235,.12);
}
.menu-section-title {
  color: #71859b;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 800;
  margin: 0;
}
.menu-section-toggle.open .menu-section-title {
  color: var(--accent-2);
}
.menu-chevron {
  color: #71859b;
  font-size: 14px;
  transition: transform .18s ease;
}
.menu-section-toggle.open .menu-chevron {
  transform: rotate(180deg);
  color: var(--accent-2);
}
.nav-item, .nav-subitem {
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  color: var(--text);
  padding: 12px 14px;
  border-radius: 14px;
  cursor: pointer;
  font-weight: 600;
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
.nav-item:hover, .nav-subitem:hover {
  background: #f3f7fb;
  color: var(--heading);
  transform: translateX(1px);
}
.nav-item.active, .nav-subitem.active {
  background: linear-gradient(180deg, #edf4ff 0%, #e7f0ff 100%);
  color: var(--accent-2);
  box-shadow: inset 0 0 0 1px rgba(37,99,235,.12);
}
.nav-group { margin-bottom: 6px; }
.nav-group-collapsible .nav-subitems {
  margin: 8px 0 0 10px;
  border-left: 1px solid var(--line-2);
  padding-left: 8px;
}
.nav-group-collapsible .nav-subitems[hidden],
.nav-group-collapsible .nav-subitems.is-hidden {
  display: none;
}
.main { display: grid; grid-template-rows: auto 1fr; min-width: 0; }
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 26px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.84);
  position: sticky;
  top: 0;
  backdrop-filter: blur(12px);
  z-index: 6;
}
.topbar h1 {
  margin: 0;
  font-size: 28px;
  letter-spacing: -0.03em;
  color: var(--heading);
}
.topbar p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 14px;
}
.topbar-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.content { padding: 24px; display: grid; gap: 18px; }

.grid-2, .grid-3, .stats-grid, .kpi-row {
  display: grid;
  gap: 16px;
}
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3, .stats-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kpi-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.stat-number {
  font-size: 34px;
  font-weight: 800;
  margin: 12px 0 4px;
  color: var(--heading);
  letter-spacing: -0.03em;
}
.muted { color: var(--muted); }
.notice, .success, .warning {
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid;
  line-height: 1.6;
}
.notice {
  background: #eff6ff;
  border-color: #c7ddff;
  color: #1e40af;
}
.success {
  background: #effdf4;
  border-color: #c4f0d2;
  color: var(--success);
}
.warning {
  background: #fff7ed;
  border-color: #fed7aa;
  color: var(--warn);
}

.table-wrap {
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
}
.table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.table th, .table td {
  padding: 14px 14px;
  border-bottom: 1px solid var(--line-2);
  text-align: left;
  vertical-align: top;
}
.table th {
  color: #4b6078;
  font-weight: 800;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .05em;
  background: #f9fbfd;
  position: sticky;
  top: 0;
}
.table tbody tr:hover { background: #fbfdff; }

.tag, .metric-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: #f3f7fb;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  color: #3f5b77;
}

.tree ul { list-style: none; padding-left: 22px; position: relative; }
.tree li { margin: 12px 0; position: relative; }
.tree li::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 14px;
  width: 12px;
  border-top: 1px solid #c4d4e6;
}
.tree ul::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 0;
  bottom: 0;
  border-left: 1px solid #dce7f3;
}
.tree-node {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}

.inline-metrics { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.smart-stack { display: grid; gap: 14px; }
.smart-alert-list, .smart-action-list { display: grid; gap: 12px; }
.smart-alert {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: #f8fbff;
}
.smart-alert.info { background: #eef6ff; border-color: #c8defb; }
.smart-alert.success { background: #effaf3; border-color: #b9e7c8; }
.smart-alert.warning { background: #fff7ed; border-color: #fed7aa; }
.smart-alert-title { font-weight: 800; color: #18314f; margin-bottom: 4px; }
.smart-action-card {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: #fff;
}
.smart-action-card h4 { margin: 0 0 6px 0; }
.smart-progress-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.smart-progress-card {
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: #fff;
}
.smart-progress-track {
  height: 10px;
  background: #edf2f7;
  border-radius: 999px;
  overflow: hidden;
  margin: 12px 0 10px;
}
.smart-progress-track span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #2563eb, #60a5fa);
}
.smart-progress-card.green .smart-progress-track span { background: linear-gradient(90deg, #16a34a, #4ade80); }
.smart-progress-card.amber .smart-progress-track span { background: linear-gradient(90deg, #d97706, #f59e0b); }
.insight-card {
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px dashed #cdd8e6;
  background: #fbfdff;
}
@media (max-width: 1100px) {
  .smart-progress-grid { grid-template-columns: 1fr; }
  .smart-action-card { flex-direction: column; }
}
.split {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}
.footer-note { font-size: 13px; color: var(--muted); line-height: 1.6; }
.mobile-only { display: none; }

.passport-preview {
  width: 160px;
  height: 160px;
  object-fit: cover;
  border-radius: 16px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}

hr {
  border: none;
  border-top: 1px solid var(--line);
  margin: 18px 0;
}

@media (max-width: 1100px) {
  .login-shell, .app-shell, .grid-2, .grid-3, .stats-grid, .kpi-row, .feature-grid {
    grid-template-columns: 1fr;
  }
  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: 294px;
    transform: translateX(-100%);
    transition: transform .22s ease;
    z-index: 12;
    box-shadow: 24px 0 40px rgba(15,23,42,.12);
    height: 100vh;
  }
  .sidebar.open { transform: translateX(0); }
  .mobile-only { display: inline-flex; margin-bottom: 10px; }
}

@media (max-width: 720px) {
  .login-hero, .content, .topbar, .login-panel { padding: 18px; }
  .login-hero h1 { font-size: 36px; }
  .topbar { flex-direction: column; align-items: flex-start; gap: 12px; }
  .topbar-actions { width: 100%; flex-wrap: wrap; }
  .form-card { padding: 22px; border-radius: 22px; }
}



.page-hero {
  display: grid;
  gap: 18px;
}
.page-head {
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
  padding: 6px 2px 2px;
}
.page-head h2 {
  margin:0;
  font-size: 30px;
  letter-spacing:-0.03em;
  color: var(--heading);
}
.page-head p { margin:8px 0 0; color:var(--muted); line-height:1.7; max-width:820px; }
.page-head-actions { display:flex; gap:10px; flex-wrap:wrap; }

.kpi-strip {
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:14px;
}
.kpi-card {
  background: linear-gradient(180deg, #fff 0%, #f9fbff 100%);
  border:1px solid var(--line);
  border-radius:20px;
  padding:18px 18px;
  box-shadow: var(--shadow-sm);
}
.kpi-label { font-size:13px; text-transform:uppercase; letter-spacing:.08em; color:#6d8094; font-weight:800; }
.kpi-value { font-size:32px; font-weight:800; letter-spacing:-0.03em; color:var(--heading); margin:12px 0 4px; }
.kpi-note { color:var(--muted); font-size:13px; line-height:1.6; }

.panel-header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom:14px;
}
.panel-title { margin:0; color:var(--heading); }
.filters {
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap:12px;
}
.segmented {
  display:inline-flex;
  gap:8px;
  padding:6px;
  background:#f3f7fb;
  border:1px solid var(--line);
  border-radius:999px;
  flex-wrap:wrap;
}
.segment {
  padding:8px 12px;
  border-radius:999px;
  border:1px solid transparent;
  color:#58708a;
  font-weight:700;
  background:transparent;
}
.segment.active { background:#fff; border-color:var(--line); color:var(--heading); box-shadow: var(--shadow-sm); }

.responsive-stack {
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:16px;
}
.list-compact { display:grid; gap:10px; }
.list-row {
  display:flex; justify-content:space-between; gap:12px; align-items:flex-start;
  padding:12px 0; border-bottom:1px solid var(--line-2);
}
.list-row:last-child { border-bottom:0; }
.avatar {
  width:40px; height:40px; border-radius:12px; display:grid; place-items:center;
  background:var(--accent-soft); color:var(--accent-2); font-weight:800;
  border:1px solid #d8e5ff;
}
.person { display:flex; gap:12px; align-items:flex-start; }
.badge {
  display:inline-flex; align-items:center; gap:6px; padding:6px 10px;
  border-radius:999px; font-size:12px; font-weight:800; border:1px solid var(--line);
  background:#fff;
}
.badge.success { color:var(--success); background:#effdf4; border-color:#c4f0d2; }
.badge.warn { color:var(--warn); background:#fff7ed; border-color:#fed7aa; }
.badge.danger { color:var(--danger); background:#fef2f2; border-color:#fecaca; }
.badge.info { color:var(--accent-2); background:#eff6ff; border-color:#c7ddff; }

.card.soft {
  background:linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
}
.info-grid {
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:12px;
}
.info-tile {
  padding:14px;
  border:1px solid var(--line);
  background:#fff;
  border-radius:16px;
}
.info-tile .label { color:#6d8094; font-size:12px; text-transform:uppercase; letter-spacing:.08em; font-weight:800; }
.info-tile .value { margin-top:10px; font-weight:800; color:var(--heading); }

.mini-table td, .mini-table th { padding:10px 12px; }
.card-scroll { overflow:auto; }

.layout-with-aside {
  display:grid;
  grid-template-columns: 1.4fr .9fr;
  gap:16px;
}
.sticky-side { position:sticky; top:92px; align-self:start; }
.empty-state {
  padding:28px; text-align:center; border:1px dashed var(--line); border-radius:18px; background:#fbfdff; color:var(--muted);
}
.tree-card { overflow:auto; max-height: 72vh; }

.mobile-table-cards { display:none; }

@media (max-width: 1100px) {
  .page-head, .layout-with-aside, .responsive-stack, .filters, .kpi-strip, .info-grid { grid-template-columns:1fr !important; display:grid; }
  .page-head { align-items:flex-start; }
  .sticky-side { position:static; top:auto; }
}
@media (max-width: 760px) {
  .content { padding:16px; }
  .card { padding:16px; border-radius:18px; }
  .page-head h2 { font-size:24px; }
  .table-wrap table, .table-wrap thead, .table-wrap tbody, .table-wrap th, .table-wrap td, .table-wrap tr { display:block; }
  .table-wrap thead { display:none; }
  .table-wrap tbody tr {
    border-bottom:1px solid var(--line);
    padding:12px 12px 10px;
    display:grid;
    gap:8px;
  }
  .table-wrap td {
    border:0;
    padding:0;
  }
  .table-wrap td::before {
    content: attr(data-label);
    display:block;
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.07em;
    font-weight:800;
    color:#6d8094;
    margin-bottom:3px;
  }
}

/* v16.2 interactive network + onboarding */
.wizard-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:16px}
.wizard-step{background:#f7fbff;border:1px solid rgba(37,99,235,.15);border-radius:16px;padding:12px 14px;display:grid;gap:4px}
.wizard-step span{width:28px;height:28px;border-radius:999px;background:#2563eb;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:700}
.wizard-step strong{color:#10243b}
.wizard-step small{color:#6b7b90}
.summary-grid{display:grid;gap:10px}
.summary-row{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px dashed rgba(148,163,184,.35)}
.summary-row span{color:#64748b}
.summary-row strong{color:#0f172a}
.toolbar-row{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin:12px 0 14px}
.toolbar-row input{max-width:380px}
.referral-tree .tree-node,.tree .tree-node{transition:transform .16s ease, box-shadow .16s ease}
.referral-tree .tree-node:hover,.tree .tree-node:hover{transform:translateY(-1px);box-shadow:0 10px 20px rgba(15,23,42,.08)}
@media (max-width: 900px){
  .wizard-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .toolbar-row input{max-width:none;width:100%}
}
@media (max-width: 560px){
  .wizard-steps{grid-template-columns:1fr}
}
/* v16.3 admin audit dashboard */
.audit-kpis{margin-bottom:18px}
#admin-audit-search{max-width:420px}
@media (max-width: 900px){
  #admin-audit-search{max-width:none;width:100%}
}

.recipient-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}

.check-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}

.thread-list {
  display: grid;
  gap: 10px;
}

.thread-item {
  width: 100%;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px;
  background: #fff;
  cursor: pointer;
}

.thread-item.active {
  border-color: #8db5ff;
  box-shadow: 0 0 0 3px rgba(70, 120, 255, 0.08);
}

.thread-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 4px;
}

.message-stream {
  display: grid;
  gap: 12px;
}

.message-bubble {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px 14px;
  background: #fff;
}

.message-bubble.mine {
  background: #eef4ff;
  border-color: #bfd4ff;
}

.message-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  margin-bottom: 8px;
  color: var(--muted);
}

.divider {
  height: 1px;
  background: var(--line);
  margin: 16px 0;
}

.announcement-list {
  display: grid;
  gap: 12px;
}


.breakdown-grid { display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:12px; }
.mini-trend { display:flex; align-items:flex-end; gap:10px; min-height:92px; margin-top:10px; }
.mini-trend-col { display:flex; flex-direction:column; align-items:center; gap:6px; font-size:11px; color:#6b7280; }
.mini-trend-bar { width:22px; border-radius:999px 999px 6px 6px; background: linear-gradient(180deg, #60a5fa 0%, #2563eb 100%); box-shadow: 0 6px 16px rgba(37,99,235,0.18); }
.insight-card.warning { border-color:#f59e0b; background:#fffaf0; }
@media (max-width: 720px) { .breakdown-grid { grid-template-columns: 1fr; } .mini-trend { gap:8px; overflow-x:auto; padding-bottom:4px; } }


/* v17.4 interactive network experience */
.network-experience-layout{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(320px,.8fr);gap:16px;align-items:start}
.network-experience-layout.single-column{grid-template-columns:minmax(0,1.6fr) minmax(320px,.8fr)}
.network-graph-shell{display:grid;gap:16px}
.network-graph-card{overflow:hidden}
.network-controls{display:flex;gap:8px;flex-wrap:wrap}
.network-controls .btn{min-width:52px}
.network-stage{position:relative;overflow:hidden;min-height:520px;border:1px dashed rgba(148,163,184,.38);border-radius:20px;background:radial-gradient(circle at top left,#f8fbff,#edf4fb 55%,#f8fbff);cursor:grab}
.network-stage.dragging{cursor:grabbing}
.network-canvas{min-width:max-content;padding:24px;transform-origin:top left;transition:transform .14s ease}
.network-profile-panel{position:sticky;top:92px;animation:slideInPanel .22s ease}
.profile-card-grid{display:grid;gap:14px}
.profile-identity{display:flex;align-items:center;gap:12px}
.avatar.large{width:52px;height:52px;font-size:1rem}
.smart-mini-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.mini-stat{padding:12px 14px;border-radius:16px;border:1px solid var(--line);background:#fbfdff;display:grid;gap:4px}
.mini-stat span{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:#64748b;font-weight:800}
.mini-stat strong{font-size:.98rem;color:#0f172a}
.tree-node.active{outline:2px solid rgba(37,99,235,.45);box-shadow:0 16px 28px rgba(37,99,235,.18)}
.slide-in-head,.slide-in-panel{animation:slideInPanel .22s ease}
@keyframes slideInPanel{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:translateX(0)}}
@media (max-width: 1100px){
  .network-experience-layout,.network-experience-layout.single-column{grid-template-columns:1fr}
  .network-profile-panel{position:static;top:auto}
}
@media (max-width: 700px){
  .network-stage{min-height:420px}
  .smart-mini-grid{grid-template-columns:1fr}
}


.sidebar-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
  z-index: 11;
}
.sidebar-overlay.open { opacity: 1; pointer-events: auto; }
.sidebar-close-btn { display: none; margin-bottom: 12px; }
.dashboard-grid {
  display: grid;
  gap: 16px;
}
.dashboard-grid-primary {
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, 1fr) minmax(260px, .9fr);
  align-items: start;
}
.dashboard-grid-secondary {
  grid-template-columns: 1fr;
}
.dashboard-panel-wide { min-width: 0; }
.compact-info-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
.dashboard-finance-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(260px, .8fr);
  gap: 14px;
}
.info-banner {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(59, 130, 246, .18);
  background: rgba(59, 130, 246, .08);
  color: #1e3a8a;
  font-weight: 600;
}
.warning-banner {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(217, 119, 6, .2);
  background: rgba(251, 191, 36, .12);
  color: #92400e;
  font-weight: 600;
}
@media (max-width: 1320px) {
  .dashboard-grid-primary { grid-template-columns: 1.2fr 1fr; }
  .dashboard-grid-primary .dashboard-panel:last-child { grid-column: 1 / -1; }
}
@media (max-width: 1100px) {
  .sidebar-overlay.open { opacity: 1; }
  #mobile-menu-btn { position: relative; z-index: 14; }
  .sidebar-close-btn { display: inline-flex; }
  .dashboard-grid-primary, .dashboard-finance-grid { grid-template-columns: 1fr; }
}


/* v17.5 dashboard redesign */
.dashboard-layout { display:grid; gap:16px; }
.dashboard-layout-top { grid-template-columns: minmax(0, 1.55fr) minmax(280px, .85fr); align-items:start; }
.dashboard-layout-middle, .dashboard-layout-bottom { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items:start; }
.dashboard-card { min-width: 0; }
.dashboard-alerts .smart-alert { padding: 12px 14px; }
.dashboard-action-list .smart-action-card { padding: 12px 14px; }
.dashboard-card-main .smart-action-card h4 { font-size: 1.02rem; }
.dashboard-card-side .info-grid, .compact-info-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
.smart-progress-grid.compact-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.breakdown-grid.compact { grid-template-columns: repeat(2, minmax(0,1fr)); }
.insight-card.compact { padding: 12px 14px; }
.mini-trend { display:flex; align-items:flex-end; gap:10px; min-height:92px; margin-top:10px; }
.mini-trend-col { display:flex; flex-direction:column; align-items:center; gap:6px; font-size:11px; color:#6b7280; }
.mini-trend-bar { width:22px; border-radius:999px 999px 6px 6px; background: linear-gradient(180deg, #60a5fa 0%, #2563eb 100%); box-shadow: 0 6px 16px rgba(37,99,235,0.18); }
@media (max-width: 1180px) {
  .dashboard-layout-top, .dashboard-layout-middle, .dashboard-layout-bottom { grid-template-columns: 1fr; }
  .smart-progress-grid.compact-grid { grid-template-columns: 1fr; }
}

/* v17.5.1 global layout polish + true dashboard redesign */
:root {
  --compact-text: 13px;
}
body { font-size: 14px; }
.page-head h2 { font-size: 28px; }
.page-head p, .muted, .footer-note, .kpi-note, .table td, .table th, .info-tile .value { font-size: 13px; }
.card { padding: 18px; }
.table th, .table td { padding: 10px 12px; }
label { font-size: 13px; }
input, select, textarea, button { font-size: 14px; }
.sidebar .menu button, .sidebar .submenu a, .nav-link { font-size: 13px; }
.info-tile .value { font-size: 18px; }
.kpi-card { padding: 16px; border-radius: 18px; }
.kpi-value { font-size: 28px; }
.kpi-note { line-height: 1.5; }
.panel-header-tight { margin-bottom: 10px; align-items: flex-start; }
.dashboard-layout { display: grid; gap: 16px; }
.dashboard-layout-top { display:grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, .9fr); align-items:start; gap:16px; }
.dashboard-layout-middle { display:grid; grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr); gap:16px; }
.dashboard-layout-bottom { display:grid; grid-template-columns: 1fr; gap:16px; }
.dashboard-side-stack, .quick-link-stack, .progress-list-stack, .dashboard-health-grid { display:grid; gap:12px; }
.priority-banner {
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: #f8fbff;
  margin-bottom: 14px;
}
.priority-banner strong { display:block; color: var(--heading); margin-bottom: 4px; }
.priority-banner p { margin:0; color: var(--muted); line-height: 1.5; font-size: 13px; }
.priority-banner.warning { background:#fff8ef; border-color:#f6c98b; }
.priority-banner.success { background:#effaf2; border-color:#b8e7c2; }
.priority-banner.info { background:#eef5ff; border-color:#c6dafc; }
.dashboard-action-list-compact { display:grid; gap:10px; }
.dashboard-action-list-compact .smart-action-card {
  display:grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap:12px;
  align-items:center;
  padding:14px;
  border:1px solid var(--line);
  border-radius:16px;
  background:#fff;
}
.dashboard-action-list-compact .smart-action-card h4 { margin:0 0 4px; font-size: 15px; }
.dashboard-action-list-compact .smart-action-card p { margin:0; font-size: 13px; line-height: 1.5; }
.profile-compact-grid, .compact-finance-grid {
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:10px;
}
.mini-info-tile {
  padding:12px 13px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
}
.mini-info-tile .label {
  color:#6d8094;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:800;
}
.mini-info-tile .value {
  margin-top:8px;
  font-size:16px;
  font-weight:800;
  color:var(--heading);
  line-height:1.3;
  word-break:break-word;
}
.progress-list-item {
  padding:14px;
  border:1px solid var(--line);
  border-radius:16px;
  background:#fff;
}
.progress-list-item strong { font-size: 14px; color: var(--heading); }
.finance-tight-grid { grid-template-columns: minmax(0, 1.15fr) minmax(260px, .85fr); gap:12px; }
.compact-table th, .compact-table td { font-size: 12px; }
.btn-block { display:flex; justify-content:center; width:100%; }
.dashboard-health-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.info-tone { background:#f8fbff; }
.success-tone { background:#f3fcf5; }
.admin-action-zone { min-height: 100%; }
.table-wrap { overflow:auto; }
.table { min-width: 640px; }
.card .table { min-width: 100%; }
.page-hero { gap: 14px; }
.page-head-actions .btn, .page-head-actions .btn-secondary { padding: 10px 14px; }
.split { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.insight-card.compact { padding: 14px; border-radius: 16px; }
.insight-card.compact strong { display:block; margin-bottom:4px; }
@media (max-width: 1280px) {
  .dashboard-layout-top, .dashboard-layout-middle { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .profile-compact-grid, .compact-finance-grid, .dashboard-health-grid { grid-template-columns: 1fr; }
  .dashboard-action-list-compact .smart-action-card { grid-template-columns: 1fr; }
  .finance-tight-grid { grid-template-columns: 1fr; }
}


/* v17.5.1 dashboard and global compact polish */
.dashboard-kpi-tight { gap: 12px; }
.dashboard-kpi-tight .kpi-card { min-height: 122px; }
.dashboard-v2-grid { display:grid; grid-template-columns: minmax(0, 1.65fr) minmax(290px, .85fr); gap:16px; align-items:start; }
.dashboard-v2-primary { min-height: 100%; }
.dashboard-v2-side { display:grid; gap:12px; align-content:start; }
.dashboard-section-grid { display:grid; grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr); gap:16px; align-items:start; }
.dashboard-pair-grid { display:grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .92fr); gap:14px; }
.dashboard-action-list-featured .smart-action-card { padding:16px; border-radius:18px; }
.dashboard-action-list-featured .smart-action-card h4 { font-size:16px; }
.dashboard-action-list-featured .btn-secondary { min-width: 138px; justify-content:center; }
.dashboard-health-grid-single { grid-template-columns: 1fr; }
.compact-banner { margin-bottom: 10px; }
.financial-band .info-tile { min-height: 76px; }
.compact-ledger-table th, .compact-ledger-table td { padding-top: 9px; padding-bottom: 9px; }
.profile-compact-grid .smart-progress-card { padding:12px; border-radius:14px; }
.profile-compact-grid .smart-progress-card strong { font-size:13px; }
.page-shell .card, .card.soft { border-radius: 20px; }
.page-hero .page-subtitle, .muted { font-size: 13px; }
.table th, .table td { font-size: 12.5px; }
.info-tile .label, .mini-info-tile .label { font-size: 10.5px; }
.info-tile .value, .mini-info-tile .value { font-size: 15px; }
.panel-title { font-size: 22px; }
.smart-action-card p, .footer-note, .priority-banner p { font-size: 12.5px; }
.sidebar .menu button, .sidebar .submenu a, .nav-link { font-size: 12.5px; }
.card { padding: 16px; }
@media (max-width: 1280px) {
  .dashboard-v2-grid, .dashboard-section-grid, .dashboard-pair-grid { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .dashboard-kpi-tight, .profile-compact-grid, .compact-finance-grid { grid-template-columns: 1fr !important; }
  .dashboard-action-list-featured .smart-action-card { grid-template-columns: 1fr; }
}


/* v17.6 page cleanup pack */
.content { padding: 22px 24px 28px; }
.content > * + * { margin-top: 14px !important; }
.content .card, .content .feature-card { padding: 16px 16px 14px; border-radius: 18px; }
.content .card h3, .content .card h4 { margin-bottom: 8px; }
.content .muted, .content .footer-note, .content p, .content li { font-size: 13px; line-height: 1.5; }
.content label { font-size: 12px; gap: 6px; }
.content input, .content select, .content textarea { padding: 10px 12px; border-radius: 12px; font-size: 13px; }
.content .btn, .content .btn-secondary, .content .btn-danger { padding: 10px 14px; border-radius: 12px; font-size: 13px; }
.content .btn-row { gap: 8px; }
.content .table-wrap { border-radius: 16px; overflow: auto; }
.content .table { font-size: 12px; }
.content .table th { font-size: 11px; letter-spacing: .08em; padding: 10px 12px; }
.content .table td { padding: 9px 12px; vertical-align: top; }
.content .stat-number { font-size: 30px; }
.content .info-grid, .content .kpi-strip, .content .dashboard-section-grid, .content .dashboard-pair-grid { gap: 12px; }
.content .mini-info-tile { padding: 10px 11px; border-radius: 14px; }
.content .mini-info-tile .label { font-size: 10px; }
.content .mini-info-tile .value { font-size: 18px; }
.content .panel-header { margin-bottom: 10px; }
.content .panel-title { font-size: 18px; }
.content .quick-link-stack { gap: 8px; }
.content .insight-card { padding: 14px; border-radius: 16px; }
.content .progress-list-item { padding: 12px 13px; }
.content .page-hero, .content .hero-card, .content .section-hero { padding: 16px 18px !important; border-radius: 18px !important; }
.content .page-hero h2, .content .hero-card h2, .content .section-hero h2 { font-size: 24px !important; margin-bottom: 6px; }
.content .page-hero p, .content .hero-card p, .content .section-hero p { font-size: 13px !important; }
.content .form-grid { gap: 10px; }
.content .split > strong { font-size: 14px; }
.content .badge, .content .metric-pill { font-size: 10px; padding: 5px 8px; }
.content.section-registration .card,
.content.section-wallet .card,
.content.section-products .card,
.content.section-reports .card,
.content.section-communication .card,
.content.section-business-centres .card,
.content.section-network .card,
.content.section-commissions .card { box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04); }
.content.section-registration .kpi-strip,
.content.section-wallet .kpi-strip,
.content.section-products .kpi-strip,
.content.section-reports .kpi-strip,
.content.section-communication .kpi-strip { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.content.section-registration .info-grid,
.content.section-wallet .info-grid,
.content.section-products .info-grid,
.content.section-reports .info-grid,
.content.section-communication .info-grid { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.content.section-wallet .table th:nth-child(1), .content.section-wallet .table td:nth-child(1),
.content.section-products .table th:nth-child(1), .content.section-products .table td:nth-child(1),
.content.section-reports .table th:nth-child(1), .content.section-reports .table td:nth-child(1) { width: 22%; }
.content.item-messaging-centre .table, .content.item-transactions .table, .content.item-product-store .table { font-size: 11.5px; }
.content.item-messaging-centre .card p, .content.item-product-store .card p, .content.item-fund-wallet .card p { font-size: 12.5px; }
.content.item-messaging-centre .btn, .content.item-messaging-centre .btn-secondary,
.content.item-product-store .btn, .content.item-product-store .btn-secondary { padding: 9px 12px; }
@media (min-width: 1180px) {
  .content.section-registration .form-grid,
  .content.section-wallet .form-grid,
  .content.section-products .form-grid,
  .content.section-reports .form-grid,
  .content.section-communication .form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .content.section-registration .form-grid .btn-row,
  .content.section-wallet .form-grid .btn-row,
  .content.section-products .form-grid .btn-row,
  .content.section-reports .form-grid .btn-row,
  .content.section-communication .form-grid .btn-row {
    grid-column: 1 / -1;
  }
}
@media (max-width: 1100px) {
  .content { padding: 18px 16px 24px; }
  .content .card, .content .feature-card { padding: 14px 14px 13px; }
}


/* v17.6.1 stability and organization pass */
.compact-page-stack { align-items:start; }
.compact-card { border-radius: 22px; box-shadow: 0 10px 28px rgba(15,23,42,.05); }
.content .card, .content .card.soft { border-radius: 22px; }
.page-hero p:empty { display:none; }
.dashboard-card-profile .mini-info-tile .value { font-size: 15px; }
.dashboard-side-stack { align-items:start; }
@media (max-width: 1100px){
  .sidebar { z-index: 12; }
}

/* v17.6.2 referral + wallet fit improvements */
.summary-band.compact-summary-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(170px,1fr));
  gap:12px;
}
.summary-chip {
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(248,250,252,.95));
  border:1px solid rgba(148,163,184,.18);
  border-radius:18px;
  padding:14px 15px 12px;
  box-shadow:0 8px 24px rgba(15,23,42,.04);
  display:grid;
  gap:4px;
}
.summary-chip.emphasis {
  background: linear-gradient(135deg, rgba(37,99,235,.10), rgba(16,185,129,.08));
}
.summary-label {
  font-size:10px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#64748b;
  font-weight:700;
}
.summary-value {
  font-size:22px;
  line-height:1.1;
  color:#0f172a;
}
.summary-chip small {
  color:#64748b;
  font-size:12px;
  line-height:1.35;
}
.compact-kpi-strip { grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); }
.referral-directory-card .panel-header,
.ledger-main-card .panel-header { align-items:flex-start; gap:10px; }
.compact-panel-header .panel-title { font-size:17px; }
.compact-table-wrap { border-radius:16px; }
.compact-table th { font-size:10.5px; }
.compact-table td { font-size:11.75px; }
.compact-ledger-layout { grid-template-columns: minmax(0, 1.7fr) minmax(250px, .9fr); align-items:start; }
.ledger-side-stack { display:grid; gap:12px; }
.compact-list-grid .list-row { padding:7px 0; }
.transaction-kpi-grid .stat-number,
.compact-kpi-strip .stat-number { font-size:28px; }
.transaction-table td:nth-child(1) { white-space:nowrap; }
.referral-table td:nth-child(2),
.transaction-table td:nth-child(4) { min-width:140px; }
.wallet-summary-band .summary-value { font-size:20px; }
.referral-summary-band .summary-value { font-size:22px; }
@media (max-width: 1100px) {
  .compact-ledger-layout { grid-template-columns:1fr; }
}
@media (max-width: 768px) {
  .summary-band.compact-summary-grid { grid-template-columns:1fr; }
  .summary-chip { padding:12px 13px; }
}

/* v17.6.4 business-centre journey redesign */
.centre-kpi-strip { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.centre-dashboard-hero,
.centre-focus-panel,
.starter-dashboard-card { overflow: hidden; }
.centre-dashboard-head { align-items: flex-start; gap: 12px; }
.rule-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px 0 18px;
}
.rule-pill {
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.08);
  border: 1px solid rgba(37, 99, 235, 0.12);
  color: #1e3a8a;
  font-size: 12px;
  font-weight: 700;
}
.journey-lane-wrap {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}
.journey-lane-wrap.parallel {
  padding-top: 14px;
  border-top: 1px solid rgba(148,163,184,.18);
}
.journey-lane-caption {
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #64748b;
  font-weight: 800;
}
.parallel-copy { font-size: 13px; }
.journey-lane {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.journey-node {
  min-width: 140px;
  text-align: left;
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid rgba(148,163,184,.2);
  background: #fff;
  box-shadow: 0 8px 20px rgba(15,23,42,.04);
  cursor: pointer;
}
.journey-node.focused { outline: 2px solid rgba(37,99,235,.24); }
.journey-node.complete { background: rgba(16,185,129,.08); border-color: rgba(16,185,129,.16); }
.journey-node.progress { background: rgba(245,158,11,.10); border-color: rgba(245,158,11,.20); }
.journey-node.locked { background: rgba(148,163,184,.10); border-color: rgba(148,163,184,.20); }
.journey-node-label { font-size: 13px; font-weight: 800; color: #0f172a; }
.journey-node-status { font-size: 11.5px; color: #475569; }
.journey-arrow { color: #94a3b8; font-size: 18px; font-weight: 700; }
.centre-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  margin-top: 16px;
}
.centre-card-grid.secondary { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.centre-card-grid.starter-grid { margin-top: 0; }
.centre-stage-card {
  display: grid;
  gap: 12px;
  padding: 16px 16px 15px;
  border: 1px solid rgba(148,163,184,.16);
}
.centre-stage-card.focused { outline: 2px solid rgba(37,99,235,.2); }
.centre-stage-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}
.centre-stage-head h3 { margin: 0 0 4px; font-size: 18px; }
.centre-status-badge {
  padding: 7px 11px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}
.centre-status-badge.complete { background: rgba(16,185,129,.12); color: #047857; }
.centre-status-badge.progress { background: rgba(245,158,11,.12); color: #92400e; }
.centre-status-badge.locked { background: rgba(148,163,184,.16); color: #475569; }
.stage-progress-copy {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  font-size: 13px;
}
.centre-meter {
  height: 10px;
  border-radius: 999px;
  background: rgba(226,232,240,.9);
  overflow: hidden;
}
.centre-meter-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #2563eb, #10b981);
}
.journey-meta-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.journey-meta-grid > div {
  background: rgba(248,250,252,.92);
  border: 1px solid rgba(226,232,240,.9);
  border-radius: 14px;
  padding: 10px 11px;
  display: grid;
  gap: 4px;
}
.meta-label {
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #64748b;
  font-weight: 800;
}
.block-reason {
  border-radius: 14px;
  padding: 11px 12px;
  background: rgba(248,250,252,.96);
  border: 1px solid rgba(226,232,240,.9);
  color: #334155;
  font-size: 12.5px;
}
.block-reason.warning {
  background: rgba(245,158,11,.08);
  border-color: rgba(245,158,11,.18);
  color: #92400e;
}
.block-reason.success {
  background: rgba(16,185,129,.08);
  border-color: rgba(16,185,129,.16);
  color: #047857;
}
.card-nav-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.personal-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.starter-commission-copy { margin: 0; font-size: 12px; }
@media (max-width: 900px) {
  .journey-meta-grid,
  .personal-grid { grid-template-columns: 1fr; }
  .stage-progress-copy,
  .centre-stage-head { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 640px) {
  .journey-lane { gap: 8px; }
  .journey-node { width: 100%; min-width: 0; }
  .journey-arrow { display: none; }
  .card-nav-row { flex-direction: column; }
}

.registration-shell{padding:20px;background:linear-gradient(180deg,#f8fbff 0%,#f2f6fb 100%)}
.registration-layout{align-items:start}
.registration-sheet{display:grid;gap:18px}
.registration-fieldset{border:0;padding:0;margin:0;display:grid;gap:18px}
.registration-panel{background:#f8fafc;border:1px solid #d9e2ef;border-radius:26px;padding:20px 18px;display:grid;gap:16px;box-shadow:inset 0 1px 0 rgba(255,255,255,.75)}
.registration-panel-accent{background:#eef4ff;border-color:#cfe0ff}
.registration-panel-head h4{margin:0;font-size:1.05rem;color:#0f2340}
.registration-panel-head p{margin:6px 0 0;color:#65758b}
.registration-sheet label{display:grid;gap:8px;font-weight:600;color:#37506b}
.registration-sheet input,
.registration-sheet select{width:100%;min-height:52px;border-radius:16px;border:1px solid #cfdae8;background:#fff;padding:0 16px;font:inherit;color:#10243b;box-shadow:inset 0 1px 0 rgba(255,255,255,.85)}
.registration-sheet input[type="file"]{padding:12px 14px;min-height:auto}
.registration-sheet input:focus,
.registration-sheet select:focus{outline:none;border-color:#4f83ff;box-shadow:0 0 0 3px rgba(79,131,255,.14)}
.registration-sheet small.field-hint{font-weight:500;color:#68798e;margin-top:-2px}
.registration-top-grid{align-items:start}
.grid-1{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.passport-preview-wrap{border:1px dashed #c8d5e6;border-radius:18px;padding:10px;background:#fff;min-height:88px;display:grid;place-items:start}
.registration-submit-row{padding-top:6px}
.registration-submit-row .btn{min-height:52px;padding:0 24px;border-radius:16px}
@media (max-width: 860px){
  .registration-shell{padding:14px}
  .registration-panel{padding:16px 14px;border-radius:20px}
}


.table-tools {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:12px;
  flex-wrap:wrap;
  margin:14px 0 12px;
}
.table-tools-search {
  min-width:min(100%, 340px);
  flex:1 1 320px;
  display:grid;
  gap:6px;
}
.table-tools-label,
.table-limit-label {
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:#64748b;
  font-weight:700;
}
.table-search-input,
.table-limit-select {
  width:100%;
  border:1px solid #cbd5e1;
  border-radius:12px;
  background:#fff;
  color:#0f172a;
  min-height:42px;
  padding:0 14px;
}
.table-tools-actions {
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.table-limit-label {
  display:flex;
  align-items:center;
  gap:8px;
}
.table-limit-select {
  width:auto;
  min-width:92px;
  padding-right:34px;
}
.searchable-table tbody tr[data-filter-row="true"] {
  transition: background .15s ease;
}
.searchable-table tbody tr[data-filter-row="true"]:hover {
  background:rgba(37,99,235,.04);
}
@media (max-width: 768px) {
  .table-tools { align-items:stretch; }
  .table-tools-actions { width:100%; justify-content:space-between; }
  .table-limit-label { width:100%; justify-content:space-between; }
}

/* v5 navigation and dashboard fixes */
body.sidebar-open { overflow: hidden; }
.nav-group-collapsible.open .nav-subitems { display: block; }
.nav-subitems { overflow: hidden; }
.nav-subitem { display: block; text-decoration: none; }
.nav-item { display: block; text-decoration: none; }
.sidebar-user { word-break: break-word; }
@media (max-width: 1100px) {
  .topbar-actions { align-items: center; }
}
.public-page-shell{max-width:1280px;margin:0 auto;padding:32px 18px 44px}
.public-registration-shell{padding:26px 22px;background:linear-gradient(180deg,#fbfdff 0%,#f4f8fd 100%)}
.registration-summary-bar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:0 0 16px}
.summary-pill{display:grid;gap:6px;padding:14px 16px;border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:var(--shadow-sm)}
.feature-stack{display:grid;gap:14px}
.list-compact{display:grid;gap:12px}.list-row{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line-2)}.list-row:last-child{border-bottom:none}
@media (max-width:900px){.registration-summary-bar{grid-template-columns:1fr}.public-page-shell{padding:18px 12px 30px}}

.topbar{background:rgba(255,255,255,.72);backdrop-filter:blur(4px)}
.compact-card{padding:18px !important}
.content .card{padding:18px}


/* commercial cleanup */
.page-hero{display:none !important}
.content .page-hero,.content .hero-card,.content .section-hero{display:none !important}
.compact-kpi-strip,.member-kpis,.admin-kpis,.kpi-strip{grid-template-columns:repeat(auto-fit,minmax(150px,200px)) !important}
.kpi-card,.admin-kpi,.member-kpi{padding:14px 16px !important}
.kpi-value,.admin-kpi .num,.member-kpi .num{font-size:24px !important}
.topbar p{max-width:none !important}


/* v35c dashboard cleanup */
.dashboard-main-stack { display:grid; gap:16px; align-content:start; }
@media (max-width: 900px) {
  .dashboard-kpi-tight, .compact-finance-grid, .profile-compact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 480px) {
  .dashboard-kpi-tight, .compact-finance-grid, .profile-compact-grid { grid-template-columns: 1fr !important; }
}

.pagination-bar{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-top:12px;flex-wrap:wrap}.pagination-links{display:flex;gap:8px;flex-wrap:wrap}.passport-preview{width:110px;height:110px;object-fit:cover;border-radius:14px;border:1px solid #dbe8f5}.table-wrap table.table td .btn-secondary,.table-wrap table.table td .btn-danger,.table-wrap table.table td .btn{white-space:nowrap}

/* Stage 1 and Stage 2 professional admin UI */
.stage-shell {
  display: grid;
  gap: 22px;
}
.stage-hero-card {
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  padding: 28px;
  border: 1px solid rgba(37,99,235,.14);
  border-radius: 28px;
  background:
    radial-gradient(circle at 8% 0%, rgba(37,99,235,.18), transparent 34%),
    radial-gradient(circle at 92% 20%, rgba(20,184,166,.13), transparent 30%),
    linear-gradient(135deg, #ffffff 0%, #f7fbff 100%);
  box-shadow: 0 22px 55px rgba(15, 23, 42, .08);
}
.stage-hero-card.commission {
  background:
    radial-gradient(circle at 8% 0%, rgba(34,197,94,.15), transparent 34%),
    radial-gradient(circle at 92% 20%, rgba(37,99,235,.16), transparent 30%),
    linear-gradient(135deg, #ffffff 0%, #f7fbff 100%);
}
.stage-hero-card h1 {
  margin: 4px 0 8px;
  font-size: clamp(28px, 3vw, 42px);
  letter-spacing: -.04em;
  color: var(--heading);
}
.stage-hero-card p {
  margin: 0;
  max-width: 800px;
  color: #53677d;
  line-height: 1.7;
}
.stage-eyebrow,
.stage-label {
  margin: 0 0 6px !important;
  color: #2563eb !important;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.stage-label { color: #64748b !important; }
.stage-hero-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.status-pill,
.mini-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 28px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid #dbe7f4;
  background: #f8fafc;
  color: #475569;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}
.status-pill.success { color: #166534; background: #ecfdf3; border-color: #bbf7d0; }
.status-pill.warning { color: #92400e; background: #fffbeb; border-color: #fde68a; }
.status-pill.neutral { color: #1d4ed8; background: #eff6ff; border-color: #bfdbfe; }
.status-pill.muted-pill { color: #64748b; background: #f1f5f9; border-color: #e2e8f0; }
.mini-badge {
  min-height: 24px;
  padding: 3px 8px;
  border-radius: 8px;
  color: #1e40af;
  background: #eff6ff;
  border-color: #dbeafe;
}
.stage-kpi-grid,
.stage-grid,
.stage-feature-grid {
  display: grid;
  gap: 18px;
}
.stage-kpi-grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stage-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stage-feature-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stage-kpi-card,
.stage-panel,
.stage-feature-card {
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(219,228,239,.95);
  border-radius: 24px;
  box-shadow: 0 14px 36px rgba(15, 23, 42, .06);
}
.stage-kpi-card {
  position: relative;
  overflow: hidden;
  padding: 20px;
}
.stage-kpi-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, #2563eb, #06b6d4);
  opacity: .75;
}
.stage-kpi-card.accent::before { background: linear-gradient(90deg, #7c3aed, #2563eb); }
.stage-kpi-card.warning-card::before { background: linear-gradient(90deg, #f59e0b, #f97316); }
.stage-kpi-card.success-card::before { background: linear-gradient(90deg, #16a34a, #22c55e); }
.stage-kpi-card span,
.stage-kpi-card small {
  display: block;
  color: #64748b;
  font-size: 13px;
  font-weight: 700;
}
.stage-kpi-card strong {
  display: block;
  margin: 8px 0 4px;
  color: #0f172a;
  font-size: clamp(25px, 2vw, 34px);
  letter-spacing: -.03em;
}
.stage-panel {
  padding: 22px;
}
.stage-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.stage-panel h2 {
  margin: 0;
  color: #0f172a;
  font-size: 22px;
  letter-spacing: -.025em;
}
.stage-panel p { line-height: 1.65; }
.cycle-date,
.cycle-code {
  display: inline-flex;
  margin: 6px 0 10px;
  padding: 12px 14px;
  border-radius: 16px;
  color: #0f172a;
  background: linear-gradient(180deg, #f8fbff, #eef6ff);
  border: 1px solid #dbeafe;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: -.02em;
}
.cycle-code { color: #1d4ed8; }
.code-pill {
  display: inline-flex;
  max-width: 100%;
  overflow-x: auto;
  padding: 10px 12px;
  border-radius: 12px;
  background: #0f172a;
  color: #e2e8f0;
  font-size: 13px;
  font-weight: 700;
}
.stage-table-wrap {
  width: 100%;
  overflow: auto;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  background: #fff;
}
.stage-table-wrap.compact { max-height: 460px; }
.stage-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 860px;
}
.stage-table th,
.stage-table td {
  padding: 13px 14px;
  border-bottom: 1px solid #eef2f7;
  text-align: left;
  vertical-align: top;
  font-size: 13px;
}
.stage-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  color: #475569;
  background: #f8fafc;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.stage-table tr:last-child td { border-bottom: none; }
.stage-table tbody tr:hover { background: #f8fbff; }
.stage-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.stage-form-grid .wide { grid-column: 1 / -1; }
.stage-form-grid label {
  padding: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  background: #fbfdff;
}
.stage-form-grid input,
.stage-form-grid select {
  min-height: 44px;
  border-radius: 12px;
  background: #fff;
}
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  border: 0;
  border-radius: 14px;
  padding: 12px 18px;
  color: #fff;
  background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%);
  box-shadow: 0 12px 24px rgba(37,99,235,.22);
  font-weight: 900;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 16px 30px rgba(37,99,235,.28); }
.btn-primary:active { transform: translateY(0); opacity: .9; }
.stage-feature-card {
  padding: 18px;
  background: linear-gradient(180deg, #ffffff, #f9fbff);
}
.stage-feature-card span {
  display: inline-flex;
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  color: #1d4ed8;
  background: #eff6ff;
  font-weight: 900;
}
.stage-feature-card h3 { margin: 14px 0 6px; color: #0f172a; }
.stage-feature-card p { margin: 0; color: #64748b; }
.flash.success,
.flash.error {
  border-radius: 16px;
  padding: 14px 16px;
  font-weight: 800;
  border: 1px solid;
}
.flash.success { background: #ecfdf3; color: #166534; border-color: #bbf7d0; }
.flash.error { background: #fef2f2; color: #991b1b; border-color: #fecaca; }
@media (max-width: 1180px) {
  .stage-kpi-grid.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stage-grid.two,
  .stage-feature-grid.three { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .stage-hero-card { flex-direction: column; padding: 22px; }
  .stage-hero-actions { justify-content: flex-start; }
  .stage-kpi-grid.four,
  .stage-form-grid { grid-template-columns: 1fr; }
  .stage-panel { padding: 18px; }
  .stage-panel-head { flex-direction: column; }
}


/* Stage 6.5.1 overlay safety */
@media (min-width:1101px){
  body.sidebar-open{overflow:auto!important}
  .sidebar-overlay,
  .sidebar-overlay.open{
    opacity:0!important;
    pointer-events:none!important;
    display:none!important;
  }
  .sidebar{transform:none!important}
}


/* Stage 6.5.2 HARD FIX: no invisible overlay may block the app */
.sidebar-overlay,
#sidebar-overlay,
.modal-backdrop,
.backdrop,
.overlay:not(.required-overlay){
  display:none!important;
  visibility:hidden!important;
  opacity:0!important;
  pointer-events:none!important;
  z-index:-1!important;
}
body.sidebar-open{overflow:auto!important}
.app-shell,.main,.content,.sidebar,.topbar{pointer-events:auto!important}


/* Sidebar text overflow fix */
.sidebar a, .sidebar .section-title{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}


/* Stage 15.2 Enterprise consolidation UI: global no-scroll and responsive data patterns */
html, body { max-width: 100%; overflow-x: hidden; }
.app-shell, .main-content, .page-content, main, .content { min-width: 0; max-width: 100%; }
.table-wrap { width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 18px; }
.table { width: 100%; min-width: 0; }
.enterprise-page-hero, .wizard-hero {
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 28px;
  padding: clamp(18px, 3vw, 34px);
  background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(238,246,255,.92));
  box-shadow: 0 22px 60px rgba(15,23,42,.08);
  margin-bottom: 18px;
}
.enterprise-eyebrow { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #2563eb; margin-bottom: 8px; }
.enterprise-title { margin: 0; font-size: clamp(26px, 4vw, 44px); line-height: 1.05; letter-spacing: -.04em; color: #0f172a; }
.enterprise-subtitle { color: #64748b; max-width: 860px; margin: 12px 0 0; font-size: 15px; line-height: 1.65; }
.enterprise-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.enterprise-card { border: 1px solid rgba(15,23,42,.08); border-radius: 24px; background: rgba(255,255,255,.92); box-shadow: 0 12px 34px rgba(15,23,42,.06); padding: 18px; min-width: 0; }
.enterprise-card h3 { margin-top: 0; }
.wizard-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-top: 16px; }
.wizard-step { border: 1px solid rgba(15,23,42,.08); border-radius: 18px; padding: 12px; background: #fff; }
.wizard-step strong { display:block; color:#0f172a; font-size: 13px; }
.wizard-step span { display:block; color:#64748b; font-size: 12px; margin-top: 3px; }
@media (max-width: 760px) {
  .table thead { display: none; }
  .table, .table tbody, .table tr, .table td { display: block; width: 100%; }
  .table tr { border: 1px solid rgba(15,23,42,.08); border-radius: 16px; margin-bottom: 12px; background: #fff; padding: 10px; }
  .table td { border: 0 !important; padding: 8px 6px !important; display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
  .table td::before { content: attr(data-label); font-weight: 800; color: #475569; min-width: 42%; }
  .kpi-strip, .grid-2, .grid-3, .enterprise-grid { grid-template-columns: 1fr !important; }
}

/* Stage 15.2B acceptance dashboard */
.stage-link-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:10px;
  margin-top:14px;
}
.stage-test-link,.mini-action{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(15,23,42,.10);
  background:#fff;
  color:#0f172a;
  font-weight:800;
  text-decoration:none;
  box-shadow:0 8px 24px rgba(15,23,42,.06);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.stage-test-link:hover,.mini-action:hover{
  transform:translateY(-1px);
  border-color:rgba(37,99,235,.35);
  box-shadow:0 12px 30px rgba(37,99,235,.12);
}
.mini-action{
  min-height:30px;
  padding:7px 10px;
  border-radius:999px;
  font-size:.82rem;
}
@media(max-width:700px){
  .stage-link-grid{grid-template-columns:1fr;}
  .stage-test-link{justify-content:flex-start;}
}


/* =========================================================
   STAGE 18 - Unified UI system rebuild foundation
   Purpose: force all new/admin control pages into the adopted
   premium dashboard visual language: page hero, KPI cards,
   card grids, readable guardrails, mobile-first tables.
   ========================================================= */
:root {
  --ui-card-bg: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  --ui-card-border: #dbe6f2;
  --ui-soft-blue: #eef5ff;
  --ui-soft-green: #effaf3;
  --ui-soft-amber: #fff8ed;
  --ui-soft-red: #fff1f2;
}
.content { max-width: 100%; overflow-x: hidden; }
.compact-page-stack, .stage18-stack { margin-bottom: 18px; }
.enterprise-eyebrow,
.stage18-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: max-content;
  max-width: 100%;
  padding: 7px 11px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-2);
  border: 1px solid rgba(37,99,235,.12);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .11em;
}
.enterprise-title,
.stage18-title {
  margin: 12px 0 8px;
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.08;
  letter-spacing: -0.04em;
  color: var(--heading);
}
.enterprise-subtitle,
.stage18-subtitle {
  margin: 0;
  max-width: 900px;
  color: var(--muted);
  line-height: 1.7;
  font-size: 14px;
}
.wizard-hero,
.stage18-hero {
  position: relative;
  overflow: hidden;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 28px;
  background:
    radial-gradient(circle at top right, rgba(37,99,235,.11), transparent 32%),
    linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  box-shadow: var(--shadow-sm);
}
.wizard-hero::after,
.stage18-hero::after {
  content: "";
  position: absolute;
  width: 180px;
  height: 180px;
  right: -70px;
  top: -70px;
  border-radius: 999px;
  background: rgba(37,99,235,.08);
  pointer-events: none;
}
.kpi-grid,
.stage18-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.kpi-grid .kpi-card,
.stage18-kpi-grid .kpi-card,
.stage18-kpi-card {
  min-width: 0;
  background: var(--ui-card-bg);
  border: 1px solid var(--ui-card-border);
  border-radius: 22px;
  padding: 18px;
  box-shadow: var(--shadow-sm);
  display: grid;
  gap: 8px;
  align-content: start;
}
.kpi-grid .kpi-card span,
.stage18-kpi-card .label,
.stage18-kpi-label {
  display: block;
  color: #66788d;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .09em;
  line-height: 1.35;
}
.kpi-grid .kpi-card strong,
.stage18-kpi-card .value,
.stage18-kpi-value {
  display: block;
  color: var(--heading);
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1;
}
.kpi-grid .kpi-card small,
.stage18-kpi-card .note,
.stage18-kpi-note {
  display: block;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}
.compact-card,
.stage18-card {
  background: var(--ui-card-bg);
  border: 1px solid var(--ui-card-border);
  border-radius: 24px;
  box-shadow: var(--shadow-sm);
  padding: 20px;
  min-width: 0;
}
.compact-panel-header,
.stage18-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 16px;
}
.compact-panel-header h3,
.stage18-panel-header h3 { margin: 0 0 5px; }
.purchase-rule-list,
.stage18-rule-list { display: grid; gap: 10px; }
.purchase-rule,
.stage18-rule-item {
  display: grid;
  grid-template-columns: minmax(190px, .7fr) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 13px 14px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: #ffffff;
}
.purchase-rule::before,
.stage18-rule-item::before {
  content: "✓";
  display: inline-grid;
  place-items: center;
  grid-row: 1 / span 2;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: #dcfce7;
  color: #15803d;
  font-weight: 900;
}
.purchase-rule,
.stage18-rule-item { grid-template-columns: 28px minmax(180px, .55fr) minmax(0, 1fr); }
.purchase-rule strong,
.stage18-rule-item strong { color: var(--heading); line-height: 1.35; }
.purchase-rule span,
.stage18-rule-item span { color: var(--muted); line-height: 1.55; }
.table-wrap { max-width: 100%; }
.table-wrap .muted[colspan],
.table td[colspan] {
  padding: 22px !important;
  text-align: center;
  color: var(--muted);
  background: #fbfdff;
}
.stage18-empty {
  padding: 24px;
  text-align: center;
  border: 1px dashed var(--line);
  background: #fbfdff;
  border-radius: 18px;
  color: var(--muted);
}
/* Stage 18 adapts old custom risk-page widgets into the same design language. */
.stage16d { padding: 0 !important; display: grid; gap: 18px; }
.stage16d .s16d-hero {
  border-radius: 28px !important;
  padding: 24px !important;
  background:
    radial-gradient(circle at top right, rgba(220,38,38,.12), transparent 34%),
    linear-gradient(180deg, #ffffff 0%, #fff7f7 100%) !important;
  color: var(--heading) !important;
  border: 1px solid #f0d8d8 !important;
  box-shadow: var(--shadow-sm) !important;
}
.stage16d .s16d-hero h1 { color: var(--heading) !important; font-size: clamp(26px,3vw,38px) !important; letter-spacing: -.04em; }
.stage16d .s16d-hero p { color: var(--muted) !important; }
.stage16d .s16d-grid { margin: 0 !important; gap: 14px !important; }
.stage16d .s16d-card,
.stage16d .s16d-panel {
  border-radius: 24px !important;
  border: 1px solid var(--ui-card-border) !important;
  box-shadow: var(--shadow-sm) !important;
  background: var(--ui-card-bg) !important;
}
.stage16d .s16d-card strong { font-size: 30px !important; letter-spacing: -.04em; }
.stage16d .s16d-panel { margin-top: 0 !important; padding: 20px !important; }
.stage16d .s16d-table-wrap { border-color: var(--line) !important; border-radius: 18px !important; }
.stage16d .s16d-table { min-width: 0 !important; }
@media (max-width: 1180px) {
  .kpi-grid, .stage18-kpi-grid, .stage16d .s16d-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .grid-2 { grid-template-columns: 1fr !important; }
}
@media (max-width: 760px) {
  .wizard-hero, .stage18-hero, .compact-card, .stage18-card { border-radius: 20px; padding: 16px; }
  .kpi-grid, .stage18-kpi-grid, .stage16d .s16d-grid { grid-template-columns: 1fr !important; }
  .compact-panel-header, .stage18-panel-header { display: grid; }
  .purchase-rule, .stage18-rule-item { grid-template-columns: 28px minmax(0, 1fr); }
  .purchase-rule span, .stage18-rule-item span { grid-column: 2; }
  .stage16d .s16d-table-wrap { overflow-x: auto; }
  .stage16d .s16d-table { min-width: 760px !important; }
}

/* =========================================================
   STAGE 18A - Broader UI consistency pass
   Adapts older Stage 16 commission/reconciliation pages into
   the same adopted dashboard language used by Stage 18 pages.
   ========================================================= */
.stage16, .stage16b {
  padding: 0 !important;
  display: grid !important;
  gap: 18px !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
  color: var(--heading) !important;
}
.stage16 *, .stage16b * { box-sizing: border-box; max-width: 100%; }
.stage16-hero, .stage16b-hero {
  border-radius: 28px !important;
  padding: 24px !important;
  color: var(--heading) !important;
  background:
    radial-gradient(circle at top right, rgba(37,99,235,.12), transparent 34%),
    linear-gradient(180deg, #ffffff 0%, #f8fbff 100%) !important;
  border: 1px solid var(--ui-card-border) !important;
  box-shadow: var(--shadow-sm) !important;
}
.stage16b-hero {
  background:
    radial-gradient(circle at top right, rgba(245,158,11,.14), transparent 34%),
    linear-gradient(180deg, #ffffff 0%, #fffaf0 100%) !important;
}
.stage16-hero h1, .stage16b-hero h1 {
  color: var(--heading) !important;
  font-size: clamp(26px,3vw,38px) !important;
  letter-spacing: -.04em !important;
  line-height: 1.08 !important;
}
.stage16-hero p, .stage16b-hero p { color: var(--muted) !important; }
.stage16-grid, .stage16b-grid {
  margin: 0 !important;
  gap: 14px !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
.stage16b-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.stage16-card, .stage16b-card, .stage16-panel, .stage16b-panel {
  border-radius: 24px !important;
  border: 1px solid var(--ui-card-border) !important;
  box-shadow: var(--shadow-sm) !important;
  background: var(--ui-card-bg) !important;
}
.stage16-card, .stage16b-card {
  padding: 18px !important;
  display: grid !important;
  gap: 8px !important;
}
.stage16-card span, .stage16b-card span {
  color: #66788d !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: .09em !important;
  line-height: 1.35 !important;
}
.stage16-card strong, .stage16b-card strong {
  color: var(--heading) !important;
  font-size: clamp(28px,3vw,36px) !important;
  font-weight: 900 !important;
  letter-spacing: -.04em !important;
  line-height: 1 !important;
}
.stage16-card small, .stage16b-card small { color: var(--muted) !important; line-height: 1.55 !important; }
.stage16-panel, .stage16b-panel { padding: 20px !important; margin-top: 0 !important; }
.stage16-panel h2, .stage16b-panel h2 { font-size: 22px !important; letter-spacing: -.03em !important; color: var(--heading) !important; }
.stage16-panel-head, .stage16b-panel-head {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: 14px !important;
  margin-bottom: 16px !important;
}
.stage16-table-wrap, .stage16b-table-wrap {
  border-color: var(--line) !important;
  border-radius: 18px !important;
  overflow-x: auto !important;
}
.stage16-table, .stage16b-table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
}
.stage16-table th, .stage16b-table th {
  background: #f8fafc !important;
  color: #52657a !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: .08em !important;
}
.stage16-table td, .stage16b-table td {
  border-top: 1px solid #eef2f7 !important;
  color: var(--heading) !important;
}
.stage16-table td[colspan], .stage16b-table td[colspan] {
  text-align: center !important;
  color: var(--muted) !important;
  padding: 24px !important;
  background: #fbfdff !important;
}
.stage16-btn {
  border-radius: 14px !important;
  box-shadow: 0 10px 24px rgba(37,99,235,.12) !important;
}
.stage16-btn.secondary { background: #eef5ff !important; color: #1d4ed8 !important; border: 1px solid rgba(37,99,235,.18) !important; }
.runbook { gap: 14px !important; }
.runbook-card {
  border-radius: 18px !important;
  border: 1px solid var(--line) !important;
  background: #fbfdff !important;
  box-shadow: none !important;
}
.warning {
  border-radius: 18px !important;
  box-shadow: var(--shadow-sm) !important;
}
/* Make older generic admin grids look like the adopted UI without editing every file. */
.card.soft, .panel, .admin-panel, .metric-card, .stat-card {
  border-radius: 22px;
  border-color: var(--ui-card-border);
  box-shadow: var(--shadow-sm);
}
.table, table.data-table, .enterprise-table {
  max-width: 100%;
}
@media (max-width: 1180px) {
  .stage16-grid, .stage16b-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 760px) {
  .stage16-hero, .stage16b-hero, .stage16-panel, .stage16b-panel { border-radius: 20px !important; padding: 16px !important; }
  .stage16-grid, .stage16b-grid { grid-template-columns: 1fr !important; }
  .stage16-panel-head, .stage16b-panel-head { display: grid !important; }
  .stage16-table, .stage16b-table { min-width: 760px !important; }
}

/* =========================================================
   STAGE 18C - Purchase Centre UI repair
   Fixes old wizard bubbles, cramped rule cards, uneven layout,
   and forces the affiliate purchase wizard to use the adopted UI.
   ========================================================= */
body { background: #eef3f9; }
.wizard-hero .wizard-steps {
  position: relative;
  z-index: 1;
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)) !important;
  gap: 12px !important;
  margin-top: 18px !important;
  margin-bottom: 0 !important;
}
.wizard-hero .wizard-step {
  display: grid !important;
  gap: 8px !important;
  min-height: 104px !important;
  padding: 16px !important;
  border-radius: 20px !important;
  border: 1px solid var(--ui-card-border) !important;
  background: rgba(255,255,255,.92) !important;
  box-shadow: 0 10px 28px rgba(15,23,42,.055) !important;
  overflow: visible !important;
}
.wizard-hero .wizard-step strong {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  min-width: 0 !important;
  color: var(--heading) !important;
  font-size: 13px !important;
  line-height: 1.25 !important;
}
.wizard-hero .wizard-step strong::before {
  content: "";
  flex: 0 0 10px;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #2563eb;
  box-shadow: 0 0 0 5px rgba(37,99,235,.10);
}
.wizard-hero .wizard-step span {
  display: block !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--muted) !important;
  font-size: 12px !important;
  line-height: 1.55 !important;
  font-weight: 500 !important;
  text-align: left !important;
  overflow: visible !important;
}
.centre-kpi-strip,
.compact-kpi-strip {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 14px !important;
  margin: 18px 0 !important;
}
.centre-kpi-strip .kpi-card,
.compact-kpi-strip .kpi-card {
  min-height: 148px;
  padding: 18px !important;
  border-radius: 22px !important;
  border: 1px solid var(--ui-card-border) !important;
  background: var(--ui-card-bg) !important;
  box-shadow: var(--shadow-sm) !important;
  display: grid !important;
  gap: 8px !important;
  align-content: start !important;
}
.centre-kpi-strip .kpi-label,
.compact-kpi-strip .kpi-label {
  color: #66788d !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: .09em !important;
  text-transform: uppercase !important;
}
.centre-kpi-strip .kpi-value,
.compact-kpi-strip .kpi-value {
  color: var(--heading) !important;
  font-size: clamp(24px, 2.4vw, 34px) !important;
  font-weight: 900 !important;
  line-height: 1.04 !important;
  letter-spacing: -.04em !important;
  overflow-wrap: anywhere;
}
.centre-kpi-strip .kpi-note,
.compact-kpi-strip .kpi-note {
  color: var(--muted) !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
}
.purchase-engine-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1.12fr) minmax(340px, .88fr) !important;
  gap: 18px !important;
  align-items: start !important;
}
.purchase-engine-grid > .card,
.purchase-engine-grid > .compact-card {
  border-radius: 26px !important;
  border: 1px solid var(--ui-card-border) !important;
  background: var(--ui-card-bg) !important;
  box-shadow: var(--shadow-sm) !important;
  padding: 22px !important;
  overflow: hidden !important;
}
.purchase-steps {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin: 16px 0 !important;
}
.purchase-step {
  min-height: 84px !important;
  border-radius: 18px !important;
  padding: 14px !important;
  background: #fff !important;
  border: 1px solid var(--ui-card-border) !important;
  box-shadow: 0 8px 24px rgba(15,23,42,.045) !important;
}
.purchase-step.active {
  border-color: rgba(37,99,235,.55) !important;
  box-shadow: 0 0 0 4px rgba(37,99,235,.08), 0 10px 24px rgba(37,99,235,.08) !important;
}
.purchase-step-number {
  color: #64748b !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .04em !important;
}
.purchase-step-title { color: var(--heading) !important; line-height: 1.2 !important; }
.priority-banner,
.info-banner,
.purchase-rule-item {
  border-radius: 16px !important;
  line-height: 1.55 !important;
}
.purchase-choice-grid {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important;
  gap: 12px !important;
  margin: 14px 0 !important;
}
.purchase-choice {
  min-height: 92px;
  border-radius: 18px !important;
  padding: 14px !important;
  background: #fff !important;
  border: 1px solid var(--ui-card-border) !important;
  box-shadow: 0 8px 22px rgba(15,23,42,.04) !important;
}
.purchase-choice:has(input:checked) {
  border-color: rgba(37,99,235,.58) !important;
  box-shadow: 0 0 0 4px rgba(37,99,235,.08), 0 10px 24px rgba(37,99,235,.08) !important;
}
.purchase-summary-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
}
.purchase-summary-box {
  min-height: 88px;
  border-radius: 18px !important;
  border: 1px solid var(--ui-card-border) !important;
  background: #fff !important;
  box-shadow: 0 8px 22px rgba(15,23,42,.035) !important;
  padding: 14px !important;
}
.purchase-summary-box strong {
  color: var(--heading) !important;
  font-size: 23px !important;
  line-height: 1.08 !important;
  letter-spacing: -.03em !important;
  overflow-wrap: anywhere;
}
.inline-note {
  display: block;
  color: #66788d !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  margin-bottom: 6px;
}
.bundle-grid {
  grid-template-columns: minmax(0, 1.15fr) minmax(240px, .85fr) !important;
  gap: 14px !important;
}
.bundle-list,
.floating-cart {
  border-radius: 20px !important;
  border: 1px solid var(--ui-card-border) !important;
  box-shadow: 0 10px 28px rgba(15,23,42,.045) !important;
}
.bundle-row {
  grid-template-columns: minmax(0,1fr) 76px 86px !important;
  padding: 14px !important;
}
.bundle-name { color: var(--heading) !important; }
.bundle-meta { line-height: 1.4 !important; }
.floating-cart {
  top: 18px !important;
  background: linear-gradient(180deg,#fff,#f9fbff) !important;
}
.cart-line { border-radius: 14px !important; background: #f8fbff !important; }
.tree-controls {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
}
.tree-controls label {
  display: grid !important;
  gap: 6px !important;
  color: #64748b !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}
.tree-controls input,
.tree-controls select,
.bundle-row input,
.purchase-engine-grid select {
  min-height: 42px !important;
  border-radius: 14px !important;
  border: 1px solid var(--ui-card-border) !important;
  background: #fff !important;
  padding: 10px 12px !important;
}
.purchase-engine-grid .table-wrap {
  border: 1px solid var(--ui-card-border) !important;
  border-radius: 18px !important;
  background: #fff !important;
  overflow-x: auto !important;
}
.purchase-engine-grid .table { min-width: 640px; }
.purchase-engine-grid .table th {
  color: #64748b !important;
  font-size: 11px !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  background: #f8fbff !important;
}
.purchase-engine-grid .btn,
.purchase-engine-grid .btn-secondary,
.use-product-btn {
  border-radius: 14px !important;
  font-weight: 800 !important;
}
#activateSubmit {
  width: 100%;
  min-height: 46px;
  box-shadow: 0 14px 30px rgba(37,99,235,.18) !important;
}
.footer-note { color: var(--muted) !important; line-height: 1.55 !important; }
@media (max-width: 1180px) {
  .centre-kpi-strip, .compact-kpi-strip { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  .purchase-engine-grid { grid-template-columns: 1fr !important; }
  .purchase-summary-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}
@media (max-width: 760px) {
  .wizard-hero .wizard-steps,
  .centre-kpi-strip,
  .compact-kpi-strip,
  .purchase-steps,
  .purchase-summary-grid,
  .bundle-grid { grid-template-columns: 1fr !important; }
  .wizard-hero .wizard-step { min-height: auto !important; }
  .purchase-engine-grid > .card,
  .purchase-engine-grid > .compact-card { padding: 16px !important; border-radius: 22px !important; }
  .bundle-row { grid-template-columns: 1fr !important; }
  .purchase-engine-grid .table { min-width: 720px; }
}


/* Stage 18D - global adopted UI pass
   Purpose: force remaining legacy admin/affiliate pages to follow the same premium card, KPI,
   table, button, empty-state and mobile layout language used by admin-wallet-integrity and
   admin-business-rules without requiring every old page to be hand-redesigned first. */
:root {
  --ui-page-max: 1320px;
  --ui-card-bg: rgba(255,255,255,.96);
  --ui-card-border: #dbe7f4;
  --ui-soft: #f8fbff;
  --ui-soft-2: #eef6ff;
  --ui-title: #0f172a;
  --ui-muted: #64748b;
  --ui-blue: #2563eb;
  --ui-green: #16a34a;
  --ui-amber: #d97706;
  --ui-red: #dc2626;
  --ui-shadow: 0 16px 42px rgba(15,23,42,.065);
  --ui-shadow-lg: 0 24px 70px rgba(15,23,42,.10);
}
.content,
.main-content,
.app-main {
  overflow-x: hidden !important;
}
.content > * {
  max-width: var(--ui-page-max);
  margin-left: auto;
  margin-right: auto;
}
.content * {
  box-sizing: border-box;
}
.content .page-hero,
.content .hero-card,
.content .section-hero,
.content .stage-hero-card,
.content .enterprise-page-hero,
.content .wizard-hero,
.content .auto-hero,
.content .ops-hero,
.content .liability-hero,
.content .awards-hero,
.content .award-hero,
.content .global-hero,
.content .intelligence-hero,
.content .profile-hero,
.content .coach-hero {
  display: grid !important;
  gap: 12px !important;
  padding: clamp(22px, 3vw, 34px) !important;
  margin: 0 auto 18px !important;
  border: 1px solid rgba(37,99,235,.13) !important;
  border-radius: 30px !important;
  background:
    radial-gradient(circle at 4% 0%, rgba(37,99,235,.16), transparent 30%),
    radial-gradient(circle at 96% 14%, rgba(20,184,166,.13), transparent 30%),
    linear-gradient(135deg, #ffffff 0%, #f8fbff 100%) !important;
  color: var(--ui-title) !important;
  box-shadow: var(--ui-shadow-lg) !important;
  overflow: hidden !important;
}
.content .page-hero::after,
.content .hero-card::after,
.content .section-hero::after,
.content .stage-hero-card::after,
.content .enterprise-page-hero::after,
.content .wizard-hero::after {
  content: "";
  position: absolute;
  width: 240px;
  height: 240px;
  right: -110px;
  bottom: -130px;
  border-radius: 999px;
  background: rgba(37,99,235,.07);
  pointer-events: none;
}
.content .page-hero h1,
.content .page-hero h2,
.content .hero-card h1,
.content .hero-card h2,
.content .section-hero h1,
.content .section-hero h2,
.content .stage-hero-card h1,
.content .enterprise-page-hero h1,
.content .wizard-hero h1,
.content .auto-hero h1,
.content .ops-hero h1,
.content .liability-hero h1,
.content .awards-hero h1,
.content .award-hero h1,
.content .global-hero h1,
.content .intelligence-hero h1,
.content .profile-hero h1,
.content .coach-hero h1 {
  margin: 0 !important;
  color: var(--ui-title) !important;
  font-size: clamp(28px, 4vw, 46px) !important;
  line-height: 1.05 !important;
  letter-spacing: -.045em !important;
}
.content .page-hero p,
.content .hero-card p,
.content .section-hero p,
.content .stage-hero-card p,
.content .enterprise-page-hero p,
.content .wizard-hero p,
.content .auto-hero p,
.content .ops-hero p,
.content .liability-hero p,
.content .awards-hero p,
.content .award-hero p,
.content .global-hero p,
.content .intelligence-hero p,
.content .profile-hero p,
.content .coach-hero p {
  color: var(--ui-muted) !important;
  max-width: 920px !important;
  font-size: 15px !important;
  line-height: 1.75 !important;
  opacity: 1 !important;
}
.page-head,
.stage-panel-head,
.panel-header,
.auto-section > h2:first-child,
.ops-panel > h2:first-child,
.liability-panel > h2:first-child {
  border-radius: 24px;
}
.content .card,
.content .soft,
.content .dashboard-card,
.content .stage-panel,
.content .stage-feature-card,
.content .auto-section,
.content .ops-panel,
.content .liability-panel,
.content .award-panel,
.content .awards-panel,
.content .risk-panel,
.content .integrity-panel,
.content .wizard-panel,
.content .profile-panel,
.content .coach-panel,
.content .intelligence-panel,
.content .global-panel,
.content .section-card,
.content .panel,
.content .box {
  border: 1px solid var(--ui-card-border) !important;
  border-radius: 26px !important;
  background: var(--ui-card-bg) !important;
  box-shadow: var(--ui-shadow) !important;
  color: #10243b !important;
}
.content .card,
.content .stage-panel,
.content .auto-section,
.content .ops-panel,
.content .liability-panel,
.content .award-panel,
.content .awards-panel,
.content .risk-panel,
.content .integrity-panel,
.content .wizard-panel,
.content .section-card,
.content .panel,
.content .box {
  padding: clamp(18px, 2.4vw, 26px) !important;
}
.content .kpi-strip,
.content .kpi-grid,
.content .stage-kpi-grid,
.content .dashboard-kpi-tight,
.content .compact-kpi-strip,
.content .admin-kpis,
.content .member-kpis,
.content .auto-grid,
.content .ops-grid,
.content .liability-grid,
.content .award-kpi-grid,
.content .awards-kpi-grid,
.content .risk-kpi-grid,
.content .integrity-kpi-grid,
.content .centre-kpi-strip,
.content .summary-grid,
.content .stats-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)) !important;
  gap: 16px !important;
  align-items: stretch !important;
  margin: 18px auto !important;
}
.content .kpi-card,
.content .stage-kpi-card,
.content .admin-kpi,
.content .member-kpi,
.content .auto-card,
.content .ops-card,
.content .liability-card,
.content .award-card,
.content .awards-card,
.content .risk-kpi,
.content .integrity-kpi,
.content .stat-card,
.content .metric-card,
.content .summary-pill,
.content .feature-card {
  position: relative !important;
  overflow: hidden !important;
  min-height: 132px !important;
  padding: 20px !important;
  border: 1px solid var(--ui-card-border) !important;
  border-radius: 24px !important;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%) !important;
  box-shadow: var(--ui-shadow) !important;
  display: grid !important;
  gap: 7px !important;
  align-content: start !important;
}
.content .kpi-card::before,
.content .stage-kpi-card::before,
.content .admin-kpi::before,
.content .member-kpi::before,
.content .auto-card::before,
.content .ops-card::before,
.content .liability-card::before,
.content .award-card::before,
.content .awards-card::before,
.content .risk-kpi::before,
.content .integrity-kpi::before,
.content .stat-card::before,
.content .metric-card::before,
.content .summary-pill::before,
.content .feature-card::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  height: 5px !important;
  background: linear-gradient(90deg, #2563eb, #06b6d4) !important;
}
.content .kpi-label,
.content .mini,
.content .label,
.content .stage-kpi-card span,
.content .admin-kpi span,
.content .member-kpi span,
.content .liability-card span,
.content .auto-card .label,
.content .ops-card span,
.content .metric-label {
  color: var(--ui-muted) !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  letter-spacing: .10em !important;
  text-transform: uppercase !important;
}
.content .kpi-value,
.content .stat-number,
.content .value,
.content .stage-kpi-card strong,
.content .admin-kpi .num,
.content .member-kpi .num,
.content .liability-card strong,
.content .auto-card .value,
.content .ops-card strong,
.content .metric-value {
  color: var(--ui-title) !important;
  font-size: clamp(26px, 2.7vw, 38px) !important;
  font-weight: 950 !important;
  line-height: 1.02 !important;
  letter-spacing: -.045em !important;
  margin: 6px 0 2px !important;
  overflow-wrap: anywhere !important;
}
.content .kpi-note,
.content .footer-note,
.content .stage-kpi-card small,
.content .liability-card small,
.content .metric-note,
.content .muted {
  color: var(--ui-muted) !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
}
.content .table-wrap,
.content .stage-table-wrap,
.content .auto-table-wrap,
.content .ops-table-wrap,
.content .liability-table-wrap,
.content .award-table-wrap,
.content .awards-table-wrap,
.content .risk-table-wrap,
.content .integrity-table-wrap,
.content .responsive-table {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 20px !important;
  background: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.86) !important;
}
.content table,
.content .table,
.content .stage-table,
.content .auto-table,
.content .ops-table,
.content .liability-table,
.content .award-table,
.content .awards-table,
.content .risk-table,
.content .integrity-table {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  min-width: 760px !important;
  background: #fff !important;
}
.content table th,
.content .table th,
.content .stage-table th,
.content .auto-table th,
.content .ops-table th,
.content .liability-table th,
.content .award-table th,
.content .awards-table th,
.content .risk-table th,
.content .integrity-table th {
  position: sticky !important;
  top: 0 !important;
  z-index: 2 !important;
  padding: 13px 14px !important;
  background: #f8fafc !important;
  color: #475569 !important;
  border-bottom: 1px solid #e2e8f0 !important;
  font-size: 11px !important;
  line-height: 1.25 !important;
  font-weight: 950 !important;
  letter-spacing: .07em !important;
  text-transform: uppercase !important;
  text-align: left !important;
}
.content table td,
.content .table td,
.content .stage-table td,
.content .auto-table td,
.content .ops-table td,
.content .liability-table td,
.content .award-table td,
.content .awards-table td,
.content .risk-table td,
.content .integrity-table td {
  padding: 14px !important;
  border-bottom: 1px solid #eef2f7 !important;
  color: #10243b !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  vertical-align: top !important;
  overflow-wrap: anywhere !important;
}
.content table tbody tr:nth-child(even),
.content .table tbody tr:nth-child(even) { background: #fbfdff !important; }
.content table tbody tr:hover,
.content .table tbody tr:hover { background: #eff6ff !important; }
.content .btn,
.content .auto-btn,
.content .auto-link-btn,
.content button.btn,
.content a.btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-height: 44px !important;
  padding: 11px 16px !important;
  border-radius: 15px !important;
  border: 1px solid rgba(37,99,235,.2) !important;
  background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%) !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  text-decoration: none !important;
  box-shadow: 0 12px 28px rgba(37,99,235,.22) !important;
  cursor: pointer !important;
}
.content .btn-secondary,
.content a.btn-secondary,
.content button.btn-secondary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-height: 44px !important;
  padding: 11px 16px !important;
  border-radius: 15px !important;
  border: 1px solid #dbe7f4 !important;
  background: #ffffff !important;
  color: #0f172a !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  text-decoration: none !important;
  box-shadow: 0 10px 24px rgba(15,23,42,.06) !important;
  cursor: pointer !important;
}
.content .btn-danger,
.content button.btn-danger,
.content a.btn-danger {
  background: linear-gradient(180deg, #ef4444 0%, #dc2626 100%) !important;
  color: #fff !important;
  border-color: rgba(220,38,38,.24) !important;
}
.content .badge,
.content .pill,
.content .status-pill,
.content .mini-badge,
.content .metric-pill,
.content .risk-pill,
.content .label-pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  min-height: 26px !important;
  padding: 6px 10px !important;
  border-radius: 999px !important;
  border: 1px solid #dbe7f4 !important;
  background: #f8fafc !important;
  color: #475569 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
}
.content .badge-green,
.content .success,
.content .pill.success,
.content .status-pill.success { color: #166534 !important; background: #ecfdf3 !important; border-color: #bbf7d0 !important; }
.content .badge-amber,
.content .warning,
.content .pill.warning,
.content .status-pill.warning { color: #92400e !important; background: #fffbeb !important; border-color: #fde68a !important; }
.content .badge-red,
.content .danger,
.content .pill.danger,
.content .status-pill.danger { color: #991b1b !important; background: #fee2e2 !important; border-color: #fecaca !important; }
.content .empty-state,
.content .empty,
.content td.muted[colspan],
.content .table td[colspan] {
  text-align: center !important;
  padding: 26px 18px !important;
  color: var(--ui-muted) !important;
  background: linear-gradient(180deg,#ffffff,#f8fbff) !important;
  font-weight: 700 !important;
}
.content .grid-2,
.content .stage-grid.two,
.content .auto-layout,
.content .ops-layout,
.content .purchase-engine-grid,
.content .dashboard-grid,
.content .profile-grid,
.content .two-column-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 18px !important;
  align-items: start !important;
}
.content .smart-action-card,
.content .check-item,
.content .list-row,
.content .action-card,
.content .rule-row,
.content .timeline-item {
  border: 1px solid #e2e8f0 !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg,#ffffff,#f8fbff) !important;
  padding: 15px !important;
  box-shadow: 0 10px 24px rgba(15,23,42,.04) !important;
}
@media (max-width: 1100px) {
  .content .grid-2,
  .content .stage-grid.two,
  .content .auto-layout,
  .content .ops-layout,
  .content .purchase-engine-grid,
  .content .dashboard-grid,
  .content .profile-grid,
  .content .two-column-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 720px) {
  .content { padding-left: 12px !important; padding-right: 12px !important; }
  .content .kpi-strip,
  .content .kpi-grid,
  .content .stage-kpi-grid,
  .content .dashboard-kpi-tight,
  .content .compact-kpi-strip,
  .content .admin-kpis,
  .content .member-kpis,
  .content .auto-grid,
  .content .ops-grid,
  .content .liability-grid,
  .content .award-kpi-grid,
  .content .awards-kpi-grid,
  .content .risk-kpi-grid,
  .content .integrity-kpi-grid,
  .content .centre-kpi-strip,
  .content .summary-grid,
  .content .stats-grid { grid-template-columns: 1fr !important; }
  .content table,
  .content .table,
  .content .stage-table,
  .content .auto-table,
  .content .ops-table,
  .content .liability-table,
  .content .award-table,
  .content .awards-table,
  .content .risk-table,
  .content .integrity-table { min-width: 640px !important; }
  .content .btn-row,
  .content .stage-hero-actions,
  .content .auto-actions { width: 100% !important; justify-content: stretch !important; }
  .content .btn-row > *,
  .content .stage-hero-actions > *,
  .content .auto-actions > * { flex: 1 1 100% !important; }
}

/* =========================================================
   OVIA FORCE VISIBLE UX PATCH - dashboard + purchase centre
   This file is the CSS actually loaded by includes/header.php.
   ========================================================= */
html, body { max-width:100%; overflow-x:hidden; }
*, *::before, *::after { box-sizing:border-box; }
.app-shell, .main, .content { min-width:0; max-width:100%; }
.content { width:100%; overflow-x:hidden; }
.content > * { max-width:1120px; margin-left:auto; margin-right:auto; }
.table-wrap { max-width:100%; overflow-x:auto; }

/* Dashboard: reduce oversized right-side values and KPI cards */
.profile-compact-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;min-width:0!important;}
.profile-compact-grid .mini-info-tile{padding:10px 11px!important;border-radius:14px!important;min-height:72px!important;overflow:hidden!important;min-width:0!important;}
.profile-compact-grid .mini-info-tile .label{font-size:10px!important;line-height:1.1!important;letter-spacing:.075em!important;margin-bottom:5px!important;color:#64748b!important;}
.profile-compact-grid .mini-info-tile .value{font-size:15px!important;line-height:1.15!important;font-weight:800!important;letter-spacing:-.01em!important;overflow-wrap:anywhere!important;word-break:normal!important;}
.profile-compact-grid .mini-info-tile:first-child .value{font-size:14px!important;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace!important;word-break:break-all!important;}
.profile-compact-grid .mini-info-tile:nth-child(2) .value{font-size:13px!important;color:#92400e!important;}
.dashboard-side-stack .card .mini-info-tile .value{font-size:15px!important;line-height:1.18!important;}
.compact-kpi-strip .stat-number,.dashboard-kpi-tight .stat-number,.card .stat-number,.kpi,.kpi-value,.finance-kpi .kpi-value{font-size:18px!important;line-height:1.1!important;letter-spacing:-.035em!important;}
.dashboard-main-stack .stat-number,.dashboard-side-stack .stat-number{font-size:18px!important;}
.card.soft.compact-card h3,.panel-title{font-size:15px!important;line-height:1.25!important;}
.metric-pill,.badge,.fin-badge{font-size:10.5px!important;min-height:22px!important;padding:4px 8px!important;}
.smart-action-card h4{font-size:14px!important;line-height:1.25!important;}
.smart-action-card p,.muted,.footer-note{font-size:12px!important;line-height:1.5!important;}
.dashboard-layout-top{grid-template-columns:minmax(0,1fr) minmax(280px,330px)!important;gap:16px!important;}
.dashboard-side-stack > .card{position:static!important;}
@media(max-width:1180px){.dashboard-layout-top{grid-template-columns:1fr!important;}.profile-compact-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}}
@media(max-width:560px){.profile-compact-grid{grid-template-columns:1fr!important;}.card .stat-number,.kpi{font-size:17px!important;}}

/* Purchase centre: make beginner path visible and stop wide layout */
.purchase-page-shell,.guided-purchase-shell,.purchase-wizard-shell{max-width:1120px!important;width:100%!important;margin:0 auto!important;overflow-x:hidden!important;}
.purchase-page-shell .wizard-hero,.purchase-page-shell .purchase-hero{display:none!important;}
.purchase-page-shell .purchase-intro-card{background:linear-gradient(135deg,#0f4be8,#2563eb)!important;color:white!important;border:0!important;box-shadow:0 18px 45px rgba(37,99,235,.22)!important;}
.purchase-page-shell .purchase-intro-card h1,.purchase-page-shell .purchase-intro-card h2,.purchase-page-shell .purchase-intro-card p{color:white!important;}
.purchase-page-shell .step-grid,.purchase-page-shell .action-grid,.purchase-page-shell .centre-grid,.purchase-page-shell .purchase-engine-grid{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))!important;gap:12px!important;min-width:0!important;max-width:100%!important;}
.purchase-page-shell .centre-card,.purchase-page-shell .action-card,.purchase-page-shell .wizard-step-card{min-width:0!important;overflow:hidden!important;}
.purchase-page-shell .centre-chip-row,.purchase-page-shell .chip-row,.purchase-page-shell .scroll-row{display:flex!important;gap:6px!important;overflow-x:auto!important;max-width:100%!important;padding-bottom:4px!important;}
.purchase-page-shell table{min-width:0!important;width:100%!important;table-layout:auto!important;}
.purchase-page-shell th,.purchase-page-shell td{white-space:normal!important;overflow-wrap:anywhere!important;}
.purchase-page-shell .catalogue-panel{display:none!important;}
.purchase-page-shell .product-row{display:grid!important;grid-template-columns:minmax(0,1fr) 90px 96px!important;gap:10px!important;align-items:center!important;min-width:0!important;}
.purchase-page-shell .floating-cart{min-width:0!important;max-width:100%!important;}
@media(max-width:900px){.purchase-page-shell .product-row{grid-template-columns:1fr!important;}.purchase-page-shell .step-grid,.purchase-page-shell .action-grid,.purchase-page-shell .centre-grid{grid-template-columns:1fr!important;}}

/* OVIA next-action/dashboard clean-up hotfix */
.ovia-na-card{max-width:100%;}
.dashboard-main-stack > .next-action-engine{display:none!important;}
.profile-compact-grid .mini-info-tile .value{font-size:15px!important;line-height:1.15!important;overflow-wrap:anywhere!important;}
.profile-compact-grid .mini-info-tile:first-child .value{font-size:14px!important;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace!important;word-break:break-all!important;}
.profile-compact-grid .mini-info-tile:nth-child(2) .value{font-size:13px!important;}
.compact-finance-grid .mini-info-tile .value,.dashboard-kpi-tight .stat-number,.compact-kpi-strip .stat-number{font-size:18px!important;line-height:1.1!important;}

/* AI Coaching Layer */
.ai-coach-layer {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr);
    gap: 16px;
    padding: 18px;
    border: 1px solid #dbe7ff;
    border-radius: 22px;
    background: linear-gradient(135deg, #ffffff 0%, #f6f9ff 100%);
    box-shadow: 0 18px 45px rgba(15, 23, 42, .06);
    margin-bottom: 14px;
    overflow: hidden;
}
.ai-coach-layer * { box-sizing: border-box; min-width: 0; }
.ai-coach-layer.ai-coach-critical { border-color: #fed7aa; background: linear-gradient(135deg,#fff7ed,#ffffff); }
.ai-coach-layer.ai-coach-blocker { border-color: #fde68a; background: linear-gradient(135deg,#fffbeb,#ffffff); }
.ai-coach-layer.ai-coach-growth { border-color: #bfdbfe; background: linear-gradient(135deg,#eff6ff,#ffffff); }
.ai-coach-layer.ai-coach-network { border-color: #bbf7d0; background: linear-gradient(135deg,#f0fdf4,#ffffff); }
.ai-coach-layer.ai-coach-optimize { border-color: #ddd6fe; background: linear-gradient(135deg,#f5f3ff,#ffffff); }
.ai-coach-eyebrow {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 6px 10px;
    border-radius: 999px;
    color: #1d4ed8;
    background: #dbeafe;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: 10px;
}
.ai-coach-main h3 {
    font-size: clamp(20px, 2vw, 26px);
    line-height: 1.12;
    margin: 0 0 8px;
    color: #0f172a;
}
.ai-coach-main p {
    margin: 0 0 12px;
    color: #334155;
    font-size: 14px;
    line-height: 1.55;
}
.ai-coach-why {
    border: 1px solid #dbe7ff;
    background: rgba(255,255,255,.74);
    border-radius: 14px;
    padding: 12px;
    color: #334155;
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 12px;
}
.ai-coach-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.ai-coach-side { display: grid; gap: 12px; }
.ai-health-card,
.ai-mini-grid > div,
.ai-forecast-card {
    background: rgba(255,255,255,.82);
    border: 1px solid #d9e4f2;
    border-radius: 16px;
    padding: 13px;
}
.ai-health-value {
    font-size: 28px;
    font-weight: 800;
    color: #0f172a;
    margin: 4px 0 8px;
}
.ai-mini-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.ai-mini-grid span,
.ai-forecast-card .mini {
    display: block;
    color: #64748b;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: 4px;
}
.ai-mini-grid strong { display:block; color:#0f172a; font-size: 15px; line-height: 1.15; }
.ai-coach-footer {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}
.ai-forecast-card strong { display:block; color:#0f172a; margin-bottom: 5px; }
.ai-forecast-card p { margin: 0; color:#475569; font-size: 13px; line-height: 1.45; }
.ai-nudges { display: flex; flex-direction: column; gap: 6px; }
.ai-nudges a {
    display: block;
    color: #1d4ed8;
    font-weight: 700;
    font-size: 13px;
    text-decoration: none;
    padding: 7px 9px;
    border-radius: 10px;
    background: #eff6ff;
}
@media (max-width: 900px) {
    .ai-coach-layer { grid-template-columns: 1fr; padding: 14px; border-radius: 18px; }
    .ai-coach-footer { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .ai-mini-grid { grid-template-columns: 1fr 1fr; }
    .ai-coach-actions .btn,
    .ai-coach-actions .btn-secondary { width: 100%; justify-content: center; text-align: center; }
}

/* Production purchase page cleanup: remove wizard training cards and keep hero readable. */
.purchase-hero.production-purchase-hero{
  background:linear-gradient(135deg,#0b3b75 0%,#0f766e 100%)!important;
  border:1px solid rgba(255,255,255,.18)!important;
  color:#fff!important;
  box-shadow:0 24px 60px rgba(15,23,42,.18)!important;
}
.purchase-hero.production-purchase-hero .enterprise-eyebrow,
.purchase-hero.production-purchase-hero .enterprise-title,
.purchase-hero.production-purchase-hero .enterprise-subtitle{color:#fff!important;}
.purchase-hero.production-purchase-hero .enterprise-subtitle{max-width:980px!important;opacity:.96!important;}