/* Pay100 operations UI: one restrained visual language across portal screens.
   This layer follows the legacy page styles so their layouts remain intact. */
:root {
  --ink: #19313d;
  --muted: #60727e;
  --line: #dce5e9;
  --paper: #fff;
  --bg: #f3f6f7;
  --navy: #173344;
  --blue: #1769a6;
  --mint: #087d68;
  --amber: #aa6d16;
  --red: #bd4150;
  --violet: #1769a6;
  --violet-dark: #105783;
  --violet-soft: #e9f2f7;
  --orange: #087d68;
  --shadow-sm: 0 1px 2px rgba(23, 51, 68, .04);
  --shadow-md: 0 7px 22px rgba(23, 51, 68, .06);
  --shadow-lg: 0 20px 55px rgba(19, 43, 57, .18);
}

html { scroll-behavior: auto; }
body {
  background: var(--bg);
  color: var(--ink);
  font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", sans-serif;
  text-rendering: auto;
}
body::before { display: none; }
/* Legacy modules name fonts that are not bundled. Keep one reliable typeface. */
body.portal-admin *, body.portal-user * {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", sans-serif !important;
}
body.portal-admin :is(code, pre, kbd, samp, .transaction-mid strong, .transaction-utr strong, .transaction-txn strong),
body.portal-user :is(code, pre, kbd, samp, .transaction-mid strong, .transaction-utr strong, .transaction-txn strong) {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important;
}
::selection { background: #cce7ec; color: var(--ink); }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
a { color: var(--blue); }
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid #137da8;
  outline-offset: 3px;
  box-shadow: 0 0 0 4px rgba(19, 125, 168, .14);
}
.skip-link {
  position: fixed;
  z-index: 500;
  top: 10px;
  left: 10px;
  padding: 10px 14px;
  border-radius: 7px;
  background: #fff;
  color: var(--navy);
  font-weight: 700;
  transform: translateY(-150%);
}
.skip-link:focus { transform: translateY(0); }

/* Shell and navigation */
.sidebar {
  width: 252px;
  padding: 24px 16px 17px;
  background: var(--navy);
  border-right: 1px solid #102b3b;
  box-shadow: none;
  isolation: auto;
}
.sidebar::before, .sidebar::after { display: none; }
.sidebar .brand-logo {
  width: 188px;
  height: 64px;
  min-height: 64px;
  margin: 0 8px 28px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: #fff;
  box-shadow: none;
}
.sidebar .brand-logo img {
  position: absolute;
  width: 190px;
  max-width: none;
  height: auto;
  left: -1px;
  top: -16px;
  filter: none;
}
.sidebar-content { display: flex; flex: 1; min-height: 0; flex-direction: column; overflow-y: auto; }
.sidebar nav { display: grid; gap: 3px; }
.sidebar nav a, .sidebar nav .nav-parent {
  min-height: 42px;
  padding: 10px 12px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #b9c9d2;
  font-size: 13px;
  letter-spacing: 0;
  transform: none;
}
.sidebar nav b { font-weight: 600; }
.sidebar nav a, .sidebar nav .nav-parent { font-size: 0; }
.sidebar nav a b, .sidebar nav .nav-parent b { font-size: 13px; }
.sidebar nav .sub-link b { font-size: 12px; }
.sidebar nav a > span:first-child,
.sidebar nav .nav-parent > span:first-child { display: none; }
.sidebar nav a:hover, .sidebar nav .nav-parent:hover {
  border: 0;
  background: #254558;
  color: #fff;
  transform: none;
}
.sidebar nav > a.active, .sidebar nav .nav-group.open > .nav-parent {
  border: 0;
  box-shadow: inset 3px 0 0 #69b9a3;
  background: #264759;
  color: #fff;
}
.sidebar nav .nav-chevron { color: #9fb5c0; }
.sidebar nav .sub-link {
  min-height: 35px;
  margin-left: 23px;
  padding: 8px 12px 8px 17px;
  border: 0;
  border-left: 1px solid #436071;
  border-radius: 0 6px 6px 0;
  color: #a8bdc7;
  font-size: 12px;
}
.sidebar nav .sub-link.active {
  border-left: 2px solid #73c4ad;
  background: #214355;
  color: #fff;
}
.sidebar .profile {
  margin-top: auto;
  padding: 18px 10px 8px;
  border-top: 1px solid #355164;
  color: #fff;
  transform: none;
}
.sidebar .profile:hover { transform: none; }
.sidebar .profile small, .sidebar .logout { color: #a9bdc7; }
.sidebar .avatar {
  background: #37647b;
  box-shadow: none;
  border-radius: 8px;
}
.sidebar .logout { padding: 11px 10px; text-align: left; }
.sidebar .logout:hover { color: #fff; transform: none; }
.sidebar .support-card {
  border: 1px solid #3b5b6d;
  border-radius: 8px;
  background: #254354;
  box-shadow: none;
  transform: none;
}
.sidebar .support-card:hover { border-color: #6bb79c; transform: none; }
.sidebar .support-card + .profile { margin-top: 12px; }
.mobile-menu-toggle, .sidebar-backdrop { display: none; }

.main {
  margin-left: 252px;
  min-height: 100vh;
  padding: 28px clamp(24px, 2.8vw, 44px) 64px;
}
.main > header {
  margin: -28px calc(clamp(24px, 2.8vw, 44px) * -1) 28px;
  padding: 19px clamp(24px, 2.8vw, 44px);
  border-bottom: 1px solid var(--line);
  background: #fff;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.main > header + * { animation: none; }
.header-greeting {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
}
.main h1 {
  margin: 2px 0 0;
  color: var(--ink);
  font: 700 clamp(24px, 2.1vw, 31px)/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: -.035em;
}
.header-profile {
  width: 42px;
  height: 42px;
  flex-basis: 42px;
  border: 1px solid #d2e2e6;
  border-radius: 9px;
  background: #e5f2ef;
  color: #0a6958;
  box-shadow: none;
}
.header-profile:hover { transform: none; box-shadow: none; background: #d8ebe6; }
.header-profile i { display: none; }
.wallet-strip {
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  box-shadow: none;
}
.wallet-strip > div { min-width: 140px; padding: 9px 15px; border-color: var(--line); }
.wallet-strip small {
  color: var(--muted);
  font: 600 10px/1.3 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: .045em;
}
.wallet-strip strong {
  margin-top: 3px;
  color: var(--ink) !important;
  font: 700 15px/1.35 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-variant-numeric: tabular-nums;
}

/* Surfaces, type, and controls */
.card, .panel, .kpi, .metric, .table-card, .secret-box,
.pricing-form-card, .pricing-list-card, .scheme-form-card, .scheme-list-card,
.limit-form-card, .limit-list-card, .assignment-form-card, .assignment-list-card,
.users-list-card, .ip-list-card, .gateway-list-card, .callback-list-card,
.accounting-form-card, .accounting-list-card, .ledger-list-card, .chargeback-list-card,
.profile-card, .beneficiary-card, .payout-card {
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.card:hover, .panel:hover, .kpi:hover, .metric:hover {
  border-color: var(--line);
  box-shadow: var(--shadow-sm);
}
.card { padding: 24px; margin-bottom: 20px; }
.panel { padding: 22px; }
.card h2, .card h3, .panel h3, .section-title h2, .section-title h3,
.transaction-toolbar h2, .transaction-flow-head h2 {
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: -.025em;
}
.eyebrow, .kpi small, .panel-head small, .metric small, .selected-user-mid {
  color: var(--muted);
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .075em;
}
.section-title { padding-bottom: 17px; border-color: var(--line); }
.section-title p, .card p, .panel p { color: var(--muted); }
.icon, .kpi-icon, .merchant-mark, .integration-icon {
  border: 1px solid #dce9ed;
  border-radius: 8px;
  background: #edf4f6;
  color: var(--blue);
  box-shadow: none;
}
.metric .icon, .kpi-icon, .integration-icon { display: none; }
.icon.mint, .kpi-icon.green { background: #e8f4ef; color: var(--mint); }
.icon.amber, .kpi-icon.amber { background: #fbf3e6; color: var(--amber); }
.kpi-icon.violet { background: #edf4f6; color: var(--blue); }
.primary {
  min-height: 43px;
  border: 1px solid #135a8d;
  border-radius: 8px;
  background: var(--blue);
  color: #fff;
  box-shadow: none;
  font-weight: 700;
  transform: none;
}
.primary:hover:not(:disabled), .primary:active:not(:disabled) {
  border-color: #0e4e79;
  background: #115987;
  box-shadow: none;
  transform: none;
}
.secondary {
  min-height: 42px;
  border: 1px solid #cadbe2;
  border-radius: 8px;
  background: #fff;
  color: #175d88;
  box-shadow: none;
  font-weight: 650;
}
.secondary:hover { background: #eff5f7; box-shadow: none; transform: none; }
.text-btn, .panel-head a, .integration-list a { color: var(--blue); }
.text-btn:hover { color: #0e4e79; }
.close { border-radius: 7px; background: #edf2f4; color: var(--ink); }
.close:hover { background: #e1e9ed; transform: none; }
.switch.on { background: var(--mint); box-shadow: none; }
.pill, .cycle-badge, .test-badge, .health-pill {
  border: 1px solid #dfe8eb;
  border-radius: 5px;
  background: #f1f5f6;
  color: #536875;
  font-family: inherit;
  font-weight: 700;
  letter-spacing: .025em;
}
.pill.green, .test-badge, .health-pill { border-color: #cfe8df; background: #eaf6f0; color: #086b58; }
.pill.amber { border-color: #efdcb6; background: #fff6e6; color: #94610f; }
.pill.red { border-color: #edccd1; background: #fff0f1; color: #a93848; }
.toast, .toast.error {
  border-radius: 8px;
  box-shadow: none;
  font-size: 13px;
}
.toast { border-left: 3px solid var(--mint); }
.toast.error { border-left: 3px solid var(--red); }
.secret-box { background: #f8fbfa; border-color: #cfdfe0; }
label { color: #3f5360; font-weight: 600; }
input:not([type=checkbox]):not([type=radio]), select, textarea {
  min-height: 43px;
  border: 1px solid #cbd9de;
  border-radius: 7px;
  background: #fff;
  color: var(--ink);
}
input:not([type=checkbox]):not([type=radio]):hover, select:hover, textarea:hover { border-color: #9db8c5; }
input:not([type=checkbox]):not([type=radio]):focus, select:focus, textarea:focus,
.login-form input:not([type=checkbox]):focus, dialog input:not([type=checkbox]):focus {
  border-color: #2783a7;
  box-shadow: 0 0 0 3px rgba(39, 131, 167, .14);
}
input::placeholder, textarea::placeholder { color: #8998a1; }
input[type=checkbox], input[type=radio] { accent-color: var(--blue); }
.amount, .premium-amount { border-color: #cbd9de; border-radius: 7px; }
.amount:focus-within, .premium-amount:focus-within { border-color: #2783a7; box-shadow: 0 0 0 3px rgba(39, 131, 167, .14); }
dialog { border: 1px solid #d5e1e6; border-radius: 12px; box-shadow: var(--shadow-lg); }
dialog::backdrop { background: rgba(16, 35, 46, .53); backdrop-filter: none; -webkit-backdrop-filter: none; }
dialog form { padding: 25px; }
.dialog-head h3 { color: var(--ink); }

/* Operational summaries and financial data */
.premium-hero, .hero, .profile-banner, .bank-intro-card, .callback-hero {
  border: 1px solid #d2e1e7;
  border-radius: 11px;
  background: #f8fbfc;
  color: var(--ink);
  box-shadow: none;
}
.premium-hero, .hero { padding: 25px 28px; }
.premium-hero::before, .premium-hero::after, .hero::before, .hero::after { display: none; }
.premium-hero h2, .hero h2 { color: var(--ink); font-size: clamp(22px, 2.2vw, 29px); letter-spacing: -.03em; }
.premium-hero p, .hero p { color: var(--muted); }
.live-label { color: #376276; text-transform: none; letter-spacing: .02em; }
.live-label i, .status-dot { background: var(--mint); box-shadow: 0 0 0 3px #d9eee7; }
.hero-meta span { border-color: #d5e2e6; border-radius: 5px; background: #fff; color: #456273; }
.route-health, .mini-card {
  border: 1px solid #d3e3e8;
  border-radius: 9px;
  background: #fff;
  box-shadow: none;
}
.health-ring { background: conic-gradient(var(--mint) calc(var(--rate, 100) * 1%), #e6eef1 0); }
.health-ring::before { background: #fff; }
.health-ring span, .mini-card strong { color: var(--ink); }
.route-health > div > small, .mini-card small { color: var(--muted); }
.route-health p, .mini-card span { color: var(--mint); }
.kpi-grid { gap: 12px; margin-bottom: 18px; }
.kpi { padding: 18px; border-radius: 10px; }
.kpi strong, .metric strong, .stats strong, .chart-total strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.kpi strong { font-size: 22px; }
.kpi p { font-size: 12px; }
.dashboard-grid { gap: 16px; margin-bottom: 17px; }
.bar-track i { background: var(--blue); box-shadow: none; }
.fund-row, .integration-list > div, .merchant { border-color: #e5ecef; }
.settlement-note { border: 1px solid #dce9ec; border-radius: 8px; background: #f4f8f8; }
.cycle-badge { background: #eaf2f5; color: #2c617c; }
.metric-row { gap: 13px; }
.metric { padding: 17px; border-radius: 10px; }
.merchant.selected { border-left-color: var(--mint); background: #f4faf8; }
.merchant-mark { color: #2e657e; }
.integration-icon { background: #edf4f6; }

.table-card { overflow: hidden; padding: 0; }
.table-card .card-head { padding: 21px 23px 16px; }
.table-wrap { overflow-x: auto; scrollbar-color: #b9ccd3 #eff3f5; }
th, .transaction-table th {
  padding: 12px 15px;
  border-color: var(--line);
  background: #f2f6f7;
  color: #526a78;
  font: 700 11px/1.35 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: .055em;
}
td, .transaction-table td {
  padding: 14px 15px;
  border-color: #e6edef;
  color: #536875;
  font-size: 12px;
  line-height: 1.45;
}
td strong, .transaction-table td strong { color: var(--ink); }
tbody tr:nth-child(even), .transaction-table tbody tr:nth-child(even) { background: #fbfcfc; }
tbody tr:hover, .transaction-table tbody tr:hover { background: #f1f7f8; box-shadow: none; }
.empty, .transaction-flow-empty, .transaction-flow-loading { color: var(--muted); }
.table-empty { padding: 32px 24px; border-top: 1px solid var(--line); text-align: left; white-space: normal; line-height: 1.6; }
.table-empty strong { color: var(--ink); }
.transaction-toolbar, .transaction-flow-head,
.pricing-card-head, .pricing-list-head, .scheme-card-head, .scheme-list-head,
.limit-card-head, .assignment-card-head, .users-card-head, .gateway-card-head,
.accounting-card-head, .ledger-card-head {
  border-color: var(--line);
  background: #fff;
}
.transaction-toolbar h2, .transaction-flow-head h2 { font-size: 20px; }
.filters input, .filters select { border-color: #cbd9de; border-radius: 7px; box-shadow: none; }
.filters input:focus, .filters select:focus { border-color: #2783a7; box-shadow: 0 0 0 3px rgba(39,131,167,.14); }
.filters .secondary { border: 1px solid #135a8d; border-radius: 7px; background: var(--blue); color: #fff; box-shadow: none; }
.filters .secondary:hover { background: #115987; box-shadow: none; transform: none; }
.transaction-table { min-width: 1180px; }
.transaction-table-admin { min-width: 1560px; }
.transaction-table .column-date { width: 140px; }
.transaction-table .column-user { width: 150px; }
.transaction-table .column-mid { width: 135px; }
.transaction-table .column-route { width: 155px; }
.transaction-table .column-order { width: 235px; }
.transaction-table .column-amount { width: 105px; }
.transaction-date time, .transaction-user strong, .transaction-reference strong,
.payer-details strong, .transaction-route strong { color: var(--ink); font: 650 12px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.transaction-date small, .transaction-route small, .transaction-reference small,
.payer-details small { color: var(--muted); font-size: 10px; }
.transaction-mid strong, .transaction-utr strong, .transaction-txn strong {
  color: #345668;
  font: 600 11px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.transaction-reference strong { color: #175d88; }
.transaction-amount strong { color: var(--ink); font-size: 14px; }
.transaction-status .pill { min-width: 74px; font-size: 10px; box-shadow: none; }
.transaction-flow-card { border-color: var(--line); box-shadow: var(--shadow-sm); }
.transaction-flow-head { padding: 22px 24px 18px; }
.transaction-flow-head p { color: var(--muted); font-size: 12px; }
.transaction-flow-filter { color: var(--muted); font-size: 10px; }
.transaction-flow-filter select { border-color: #cbd9de; border-radius: 7px; color: var(--ink); font-size: 12px; box-shadow: none; }
.transaction-flow-live > i { animation: none; box-shadow: 0 0 0 3px #d9eee7; }
.transaction-flow-live > small { font-size: 10px; }
.transaction-flow-summary { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px 0; padding: 0 24px 19px; }
.transaction-flow-summary > div:not(.transaction-flow-legend) { min-width: 0; padding: 2px 15px; border-color: var(--line); }
.transaction-flow-summary small { color: var(--muted); font-size: 10px; letter-spacing: .04em; }
.transaction-flow-summary strong { color: var(--ink); font-size: 17px; }
.transaction-flow-legend { grid-column: 1 / -1; justify-content: flex-start; font-size: 11px; }
.transaction-flow-columns { border-color: var(--line); background: #f2f6f7; color: #526a78; font-size: 10px; }
.transaction-flow-row { border-color: #e6edef; }
.transaction-flow-row:hover { background: #f2f8f8; }
.transaction-flow-avatar { border-radius: 7px; background: #e5f1f4; color: #1a678d; }
.transaction-flow-user strong { color: var(--ink); font-size: 12px; }
.transaction-flow-user small, .transaction-flow-total, .transaction-flow-latest small { color: var(--muted); font-size: 10px; }
.transaction-flow-track .success { background: #19a17f; }
.transaction-flow-track .pending { background: #d39a35; }
.transaction-flow-track .reversal { background: #d56d76; }
.transaction-flow-breakdown span { border-radius: 5px; background: #f2f6f7; font-size: 10px; }
.transaction-flow-latest strong { color: var(--ink); font-size: 11px; }
.service-status, .ledger-summary, .wallet-balance-card, .beneficiary-account-row {
  border-color: var(--line) !important;
  background: #fff !important;
  box-shadow: var(--shadow-sm);
}

@media (max-width: 1100px) and (min-width: 701px) {
  .wallet-strip > div { min-width: 100px; padding: 8px 11px; }
  .wallet-strip strong { font-size: 13px; }
  .header-actions { max-width: 100%; }
  .transaction-flow-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 980px) and (min-width: 701px) {
  .sidebar { width: 224px; padding: 20px 12px; }
  .sidebar .brand-logo { width: 174px; height: 59px; min-height: 59px; margin: 0 6px 23px; }
  .sidebar .brand-logo img { width: 176px; top: -15px; }
  .sidebar nav b, .sidebar .profile div:not(.avatar), .sidebar .logout { font-size: inherit; }
  .sidebar nav a, .sidebar nav .nav-parent { justify-content: flex-start; padding: 9px 10px; }
  .sidebar nav .nav-chevron { display: block; }
  .sidebar nav .sub-link { width: auto; min-height: 34px; margin-left: 21px; padding: 8px 10px 8px 15px; font-size: 12px; }
  .sidebar nav .sub-link::after { display: none; }
  .sidebar .profile { justify-content: flex-start; }
  .main { margin-left: 224px; padding: 24px; }
  .main > header { margin: -24px -24px 25px; padding: 18px 24px; }
}

@media (max-width: 700px) {
  body { background: var(--bg); }
  .sidebar {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 120;
    width: 100%;
    height: 64px;
    padding: 7px 16px;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    overflow: visible;
    border: 0;
    border-bottom: 1px solid #102b3b;
  }
  .sidebar .brand-logo { width: 144px; height: 49px; min-height: 49px; margin: 0; border-radius: 6px; }
  .sidebar .brand-logo img { width: 147px; top: -13px; left: -1px; }
  .mobile-menu-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 7px 11px;
    border: 1px solid #547184;
    border-radius: 7px;
    background: #27485b;
    color: #fff;
    font-size: 13px;
    font-weight: 650;
  }
  .mobile-menu-toggle:hover { background: #345b6f; }
  .mobile-menu-toggle .menu-mark { width: 15px; display: grid; gap: 3px; }
  .mobile-menu-toggle .menu-mark i { display: block; width: 15px; height: 2px; border-radius: 1px; background: currentColor; }
  .sidebar .sidebar-content {
    position: fixed;
    top: 64px;
    bottom: 0;
    left: 0;
    z-index: 121;
    display: flex;
    width: min(320px, 88vw);
    padding: 15px 15px 22px;
    overflow-y: auto;
    background: var(--navy);
    box-shadow: 15px 0 30px rgba(0, 0, 0, .13);
    visibility: hidden;
    transform: translateX(-105%);
    transition: transform .2s ease, visibility .2s ease;
  }
  body.mobile-nav-open .sidebar .sidebar-content { visibility: visible; transform: translateX(0); }
  .sidebar .sidebar-content nav { display: grid; }
  .sidebar .sidebar-content .profile { display: flex; }
  .sidebar .sidebar-content .profile div:not(.avatar) { font-size: 13px; }
  .sidebar .sidebar-content .profile strong { display: block; font-size: 13px; }
  .sidebar .sidebar-content .profile small { display: block; font-size: 11px; }
  .sidebar .sidebar-content form { display: block; }
  .sidebar .sidebar-content .support-card { display: flex; }
  .sidebar .sidebar-content .support-card + .profile { margin-top: 12px; }
  .sidebar .sidebar-content .logout { display: inline-block; font-size: 13px; }
  .sidebar .sidebar-content nav b { font-size: 13px; }
  .sidebar .sidebar-content nav a, .sidebar .sidebar-content nav .nav-parent { justify-content: flex-start; }
  .sidebar .sidebar-content nav .nav-chevron { display: block; }
  .sidebar .sidebar-content nav .sub-link { width: auto; min-height: 35px; margin-left: 23px; padding: 8px 12px 8px 17px; font-size: 12px; }
  .sidebar .sidebar-content nav .sub-link::after { display: none; }
  .sidebar-backdrop {
    position: fixed;
    inset: 64px 0 0;
    z-index: 115;
    width: 100%;
    border: 0;
    background: rgba(15, 31, 42, .55);
  }
  body.mobile-nav-open .sidebar-backdrop { display: block; }
  body.mobile-nav-open { overflow: hidden; }
  .main { margin: 0; padding: 82px 16px 42px; }
  .main > header { display: block; margin: -18px -16px 23px; padding: 17px 16px; }
  .main h1 { margin-bottom: 0; font-size: 26px; }
  .header-actions { display: flex; width: 100%; margin-top: 13px; gap: 8px; }
  .wallet-strip { display: grid; width: 100%; max-width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: hidden; }
  body.portal-admin .wallet-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .wallet-strip > div { min-width: 0; padding: 9px 11px; }
  body.portal-user .wallet-strip > div:nth-child(n+3) { border-top: 1px solid var(--line); }
  body.portal-user .wallet-strip > div:nth-child(2n) { border-right: 0; }
  .wallet-strip strong { font-size: 13px; }
  .header-profile { display: none; }
  .premium-hero, .hero { padding: 22px; border-radius: 10px; }
  .card, .panel { padding: 18px; border-radius: 10px; }
  .table-card { padding: 0; }
  .table-card .card-head { padding: 18px; }
  .table-wrap td[colspan] .empty { width: calc(100vw - 70px); margin: 0; padding: 22px 0; text-align: left; white-space: normal; }
  .transaction-flow-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0 18px 18px; }
  .transaction-flow-summary .transaction-flow-legend { grid-column: 1 / -1; }
  .primary, .secondary { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar .sidebar-content { transition: none; }
}