:root { color-scheme: light; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: #f5f7fb; color: #172033; }
* { box-sizing: border-box; }
body { margin: 0; background: #f5f7fb; }
a { color: #1d4ed8; }
.topbar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 1.5rem; background: #111827; color: #fff; }
.topbar a, .topbar .link-button { color: #fff; text-decoration: none; margin-left: .8rem; }
.muted { color: #6b7280; }
.topbar .muted { color: #d1d5db; margin-left: .5rem; }
.container { width: min(1180px, calc(100% - 2rem)); margin: 1.5rem auto 3rem; }
.panel, .auth-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 14px; padding: 1.25rem; box-shadow: 0 10px 30px rgba(15, 23, 42, .05); margin-bottom: 1rem; }
.narrow { max-width: 720px; margin-left: auto; margin-right: auto; }
.auth-page { min-height: 100vh; display: grid; place-items: center; padding: 1rem; }
.auth-card { width: min(440px, 100%); }
h1, h2, h3 { line-height: 1.2; margin-top: 0; }
.stack { display: grid; gap: 1rem; }
.grid { display: grid; gap: 1rem; }
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 820px) { .grid.two, .grid.three { grid-template-columns: 1fr; } .topbar { align-items: flex-start; flex-direction: column; } }
label { display: grid; gap: .35rem; font-weight: 600; }
input, select, textarea { width: 100%; border: 1px solid #cbd5e1; border-radius: 9px; padding: .65rem .75rem; font: inherit; }
button, .button { border: 0; background: #1d4ed8; color: #fff; padding: .7rem 1rem; border-radius: 9px; font-weight: 700; cursor: pointer; text-decoration: none; display: inline-block; }
button.primary { background: #047857; }
.link-button { background: transparent; padding: 0; border: 0; font: inherit; }
.inline-form { display: inline; }
.notice { border-radius: 10px; padding: .85rem 1rem; margin: 1rem 0; }
.notice.error { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }
.notice.warning { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; }
.checks { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: .75rem; }
.check { border: 1px solid #e5e7eb; border-radius: 10px; padding: .75rem; display: grid; gap: .2rem; }
.check.ok { border-color: #bbf7d0; background: #f0fdf4; }
.check.fail { border-color: #fecaca; background: #fef2f2; }
.check small { color: #64748b; overflow-wrap: anywhere; }
.checkbox { display: flex; gap: .5rem; align-items: center; font-weight: 500; }
.checkbox input { width: auto; }
pre { background: #0f172a; color: #e5e7eb; padding: 1rem; border-radius: 10px; overflow: auto; white-space: pre-wrap; }
code { background: #eef2ff; color: #1e3a8a; padding: .1rem .25rem; border-radius: 4px; }
table { width: 100%; border-collapse: collapse; font-size: .94rem; }
th, td { border-bottom: 1px solid #e5e7eb; text-align: left; padding: .65rem .5rem; vertical-align: top; }
th { color: #475569; background: #f8fafc; }
dl { display: grid; grid-template-columns: minmax(120px, 220px) 1fr; gap: .5rem 1rem; }
dt { color: #64748b; font-weight: 700; }
dd { margin: 0; overflow-wrap: anywhere; }
.stats > div { border: 1px solid #e5e7eb; border-radius: 10px; padding: 1rem; }
.stats strong { display: block; font-size: 1.3rem; }
.stats span { color: #64748b; }
.good { color: #047857; font-weight: 700; }
.bad { color: #b91c1c; font-weight: 700; }
.success-panel { border-color: #bbf7d0; }
.notice.success { background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534; }
.button.secondary, button.secondary { background: #334155; }
button:disabled, .button:disabled, input:disabled { opacity: .65; cursor: not-allowed; }
.brand { display: flex; gap: .5rem; align-items: baseline; }
.topnav { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; }
.topnav a, .topnav .link-button { margin-left: 0; padding: .35rem .55rem; border-radius: 8px; }
.topnav a.is-active { background: rgba(255,255,255,.15); }
.hero-split, .shell-head { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; }
.hero-actions { display: flex; gap: .6rem; flex-wrap: wrap; justify-content: flex-end; }
.eyebrow { margin: 0 0 .4rem; color: #1d4ed8; text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; font-weight: 800; }
.admin-map-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.admin-map-group { border: 1px solid #e5e7eb; border-radius: 12px; padding: 1rem; background: #f8fafc; }
.admin-map-group a { display: grid; gap: .15rem; padding: .7rem; border-radius: 9px; background: #fff; border: 1px solid #e5e7eb; margin-top: .6rem; text-decoration: none; color: #172033; }
.admin-map-group small { color: #64748b; }
.tabs { display: flex; flex-wrap: wrap; gap: .6rem; }
.tab { flex: 1 1 220px; display: grid; gap: .25rem; text-decoration: none; color: #172033; border: 1px solid #e5e7eb; border-radius: 12px; padding: .85rem; background: #f8fafc; }
.tab.is-active { border-color: #1d4ed8; box-shadow: inset 0 0 0 1px #1d4ed8; background: #eef2ff; }
.tab small { color: #64748b; }
.settings-form { display: grid; gap: .85rem; }
.setting-row { display: grid; grid-template-columns: minmax(220px, 360px) 1fr; gap: 1rem; align-items: start; border-bottom: 1px solid #e5e7eb; padding-bottom: .85rem; }
.setting-row:last-child { border-bottom: 0; }
.setting-row label:first-child { font-weight: 800; }
.secret-clear { margin-top: .45rem; }
.form-actions { display: flex; justify-content: flex-end; }
.status-pill { display: inline-flex; align-items: center; border-radius: 999px; padding: .35rem .7rem; font-size: .82rem; font-weight: 800; }
.status-pill.warning { background: #fffbeb; color: #92400e; border: 1px solid #fde68a; }
.feature-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem 1.3rem; }
.portal-page { background: linear-gradient(180deg, #eef2ff 0, #f8fafc 320px, #f8fafc 100%); }
.portal-wrap { width: min(760px, calc(100% - 2rem)); margin: 2rem auto 4rem; }
.portal-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 18px; padding: 1.25rem; box-shadow: 0 14px 40px rgba(15,23,42,.07); margin-bottom: 1rem; }
.portal-hero { text-align: center; }
.portal-tabs { display: flex; gap: .5rem; margin-bottom: 1rem; justify-content: center; flex-wrap: wrap; }
.portal-tabs a { text-decoration: none; padding: .65rem 1rem; border-radius: 999px; border: 1px solid #cbd5e1; background: #fff; }
.portal-tabs a.is-active { border-color: #1d4ed8; background: #eef2ff; font-weight: 800; }
.portal-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 900px) {
  .admin-map-groups, .setting-row, .feature-list, .portal-grid { grid-template-columns: 1fr; }
  .hero-split, .shell-head { flex-direction: column; }
  .hero-actions { justify-content: flex-start; }
}

/* Client portal mirror styles. */
.umh-container { max-width: 1040px; margin: 0 auto; padding: 18px; }
.umh-header h2 { margin: 0 0 6px; font-size: 28px; }
.umh-description { color: #5b6475; margin: 0; }
.umh-card { background: #fff; border: 1px solid #e3e8f0; border-radius: 16px; padding: 20px; box-shadow: 0 16px 40px rgba(15, 23, 42, .07); margin-bottom: 16px; }
.umh-form-group { margin: 0 0 14px; }
.umh-form-group label, .umh-form-stack label { display: grid; gap: 6px; font-weight: 700; color: #263245; }
.umh-input { width: 100%; border: 1px solid #cbd5e1; border-radius: 10px; padding: 11px 12px; font: inherit; background: #fff; }
.umh-button-primary, .umh-button-secondary { appearance: none; border: 0; border-radius: 10px; padding: 11px 15px; font-weight: 800; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.umh-button-primary { background: #1d4ed8; color: #fff; }
.umh-button-secondary { background: #334155; color: #fff; }
.umh-button-primary:disabled, .umh-button-secondary:disabled { opacity: .58; cursor: not-allowed; }
.umh-alert-error, .umh-alert-success, .umh-alert-warning { border-radius: 12px; padding: 12px 14px; margin: 14px 0; }
.umh-alert-error { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }
.umh-alert-success { background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534; }
.umh-alert-warning { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; }
.umh-checkline { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 14px; font-weight: 500; color: #334155; }
.umh-checkline input { width: auto; margin-top: 3px; }
.umh-portal-tabs { display: flex; gap: 8px; justify-content: center; margin: 0 0 16px; flex-wrap: wrap; }
.umh-portal-tabs a { background: #fff; border: 1px solid #cbd5e1; border-radius: 999px; color: #172033; padding: 9px 16px; text-decoration: none; font-weight: 700; }
.umh-portal-tabs a.is-active { border-color: #1d4ed8; background: #eef2ff; color: #1d4ed8; }
.umh-dashboard-app { max-width: 1180px; }
.umh-dashboard-hero { display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; background: #111827; color: #fff; border-radius: 22px; padding: 24px; box-shadow: 0 20px 50px rgba(15, 23, 42, .18); margin-bottom: 18px; }
.umh-dashboard-hero .umh-description { color: #dbeafe; }
.umh-eyebrow { display: inline-flex; text-transform: uppercase; letter-spacing: .08em; font-weight: 900; color: #93c5fd; font-size: 12px; margin-bottom: 6px; }
.umh-hero-copy h2 { margin: 0 0 8px; font-size: clamp(26px, 4vw, 42px); }
.umh-hero-details { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.umh-hero-detail-item { background: rgba(255, 255, 255, .09); border: 1px solid rgba(255, 255, 255, .16); border-radius: 14px; padding: 10px 12px; min-width: 220px; display: grid; gap: 3px; }
.umh-hero-detail-label { color: #bfdbfe; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.umh-inline-edit-button { width: fit-content; border: 0; background: transparent; color: #93c5fd; padding: 0; font-weight: 800; cursor: pointer; }
.umh-hero-actions { display: flex; gap: 10px; align-items: center; }
.umh-dashboard-status-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 16px 0; }
.umh-status-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 16px; padding: 16px; display: grid; gap: 5px; box-shadow: 0 10px 30px rgba(15, 23, 42, .05); }
.umh-status-card span { color: #64748b; font-weight: 800; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }
.umh-status-card strong { font-size: 24px; color: #172033; }
.umh-status-card small { color: #64748b; overflow-wrap: anywhere; }
.umh-dashboard-note, .umh-small-note { color: #64748b; font-size: 13px; margin: 8px 0 18px; }
.umh-service-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.umh-service-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 18px; padding: 18px; box-shadow: 0 14px 40px rgba(15, 23, 42, .06); }
.umh-card-heading { display: flex; justify-content: space-between; gap: 10px; align-items: center; margin-bottom: 12px; }
.umh-card-title { margin: 0; }
.umh-stage-pill { border-radius: 999px; border: 1px solid #fde68a; background: #fffbeb; color: #92400e; font-size: 12px; font-weight: 900; padding: 4px 8px; white-space: nowrap; }
.umh-stage-pill.active { border-color: #bbf7d0; background: #f0fdf4; color: #166534; }
.umh-quick-action { width: 100%; border: 1px solid #e5e7eb; background: #f8fafc; color: #172033; border-radius: 14px; padding: 13px; margin: 0 0 9px; text-align: left; display: grid; gap: 4px; cursor: pointer; }
.umh-quick-action span { font-weight: 900; }
.umh-quick-action small { color: #64748b; }
.umh-quick-action:disabled { opacity: .72; cursor: not-allowed; }
.umh-form-stack { display: grid; gap: 12px; }
.umh-soft-rule { border: 0; border-top: 1px solid #e5e7eb; margin: 20px 0; }
.umh-modal { position: fixed; inset: 0; display: none; z-index: 1000; }
.umh-modal.is-visible { display: block; }
.umh-modal-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, .58); }
.umh-modal-dialog { position: relative; width: min(680px, calc(100% - 26px)); max-height: calc(100vh - 40px); overflow: auto; margin: 20px auto; background: #fff; border-radius: 18px; box-shadow: 0 28px 80px rgba(15, 23, 42, .32); }
.umh-modal-header { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 18px 20px; border-bottom: 1px solid #e5e7eb; }
.umh-modal-header h3 { margin: 0; }
.umh-modal-close { border: 0; background: transparent; color: #64748b; cursor: pointer; font-size: 28px; line-height: 1; padding: 0 4px; }
.umh-modal-body { padding: 20px; }
.umh-meter-list { display: grid; gap: 10px; }
.umh-meter-row { display: flex; justify-content: space-between; gap: 12px; align-items: center; border: 1px solid #e5e7eb; border-radius: 14px; padding: 12px; background: #f8fafc; }
.umh-meter-row small { display: block; color: #64748b; margin-top: 3px; }
.umh-meter-tags { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.umh-meter-tag { border-radius: 999px; background: #eef2ff; color: #1d4ed8; border: 1px solid #c7d2fe; padding: 4px 8px; font-size: 12px; font-weight: 800; }
.umh-empty-state { background: #f8fafc; border: 1px dashed #cbd5e1; border-radius: 14px; padding: 16px; color: #64748b; }
@media (max-width: 960px) {
  .umh-dashboard-hero { flex-direction: column; }
  .umh-dashboard-status-grid, .umh-service-grid { grid-template-columns: 1fr; }
  .umh-hero-detail-item { min-width: min(100%, 260px); }
}
.portal-wrap { width: min(1180px, calc(100% - 2rem)); }

/* Portal meter/electricity/airtime workflow styles. */
.umh-modal-wide { width: min(920px, calc(100% - 26px)); }
.umh-form-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: end; }
.umh-meter-main { min-width: 0; }
.umh-meter-row-editable { align-items: flex-start; }
.umh-meter-row.archived { opacity: .72; background: #f1f5f9; }
.umh-meter-row.archived .umh-meter-tag { background: #f8fafc; color: #475569; border-color: #cbd5e1; }
.umh-meter-actions { display: flex; gap: 7px; flex-wrap: wrap; justify-content: flex-end; }
.umh-meter-actions .umh-button-secondary,
.umh-meter-actions .umh-button-primary { padding: 8px 10px; font-size: 13px; }
.umh-meter-edit { display: flex; gap: 7px; margin-top: 8px; align-items: center; }
.umh-meter-edit .umh-input { min-width: 180px; padding: 8px 9px; }
.umh-inline-result { min-height: 24px; margin-top: 10px; color: #334155; font-size: 14px; }
.umh-inline-result.success { color: #166534; }
.umh-inline-result.error { color: #991b1b; }
.umh-workflow-modal { display: grid; gap: 16px; }
.umh-workflow-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.umh-workflow-actions .umh-button-primary,
.umh-workflow-actions .umh-button-secondary { padding: 10px 12px; }
.umh-option-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.umh-option-button { border: 1px solid #cbd5e1; background: #fff; border-radius: 14px; padding: 12px; display: grid; gap: 4px; cursor: pointer; text-align: left; }
.umh-option-button strong { color: #172033; font-size: 18px; }
.umh-option-button small { color: #64748b; }
.umh-option-button:disabled { opacity: .58; cursor: not-allowed; }
.umh-option-button:hover:not(:disabled) { border-color: #1d4ed8; background: #eef2ff; }
.umh-mini-ledger { border: 1px solid #e5e7eb; border-radius: 14px; overflow: hidden; margin-top: 10px; }
.umh-mini-ledger table { width: 100%; border-collapse: collapse; }
.umh-mini-ledger th,
.umh-mini-ledger td { padding: 10px 12px; border-bottom: 1px solid #e5e7eb; text-align: left; vertical-align: top; }
.umh-mini-ledger tr:last-child td { border-bottom: 0; }
.umh-mini-ledger th { background: #f8fafc; color: #475569; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }
.umh-list-block { display: grid; gap: 8px; margin-top: 10px; }
.umh-list-block > div { border: 1px solid #e5e7eb; border-radius: 12px; padding: 10px 12px; background: #f8fafc; }
.umh-balance-card { border: 1px solid #e5e7eb; border-radius: 14px; background: #f8fafc; padding: 14px; margin-top: 10px; display: grid; gap: 4px; }
.umh-balance-card strong { font-size: 22px; color: #172033; }
.umh-balance-card small { color: #64748b; }
@media (max-width: 960px) {
  .umh-form-grid, .umh-option-grid { grid-template-columns: 1fr; }
  .umh-meter-row { flex-direction: column; align-items: stretch; }
  .umh-meter-tags, .umh-meter-actions { justify-content: flex-start; }
}

/* Full admin screen mirror styles. */
.grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.compact-stats { margin-bottom: 1rem; }
.admin-chip-row { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-top: .75rem; }
.filter-panel { padding-bottom: .95rem; }
.filter-grid { display: grid; grid-template-columns: 1.6fr repeat(5, minmax(120px, 1fr)) auto; gap: .75rem; align-items: end; }
.filter-actions { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.guidance-card { display: grid; gap: .75rem; }
.feature-list.inline { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; margin: .75rem 0 0; }
.feature-list.inline li { border: 1px solid #dbeafe; background: #eff6ff; border-radius: 999px; padding: .35rem .65rem; color: #1e3a8a; font-size: .9rem; }
.table-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 14px; margin-bottom: 1rem; overflow: hidden; box-shadow: 0 10px 30px rgba(15, 23, 42, .04); }
.table-card-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 1rem .75rem; border-bottom: 1px solid #e5e7eb; }
.table-card-head h3 { margin: 0; }
.table-scroll { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; min-width: 860px; }
.data-table th, .data-table td { padding: .65rem .75rem; text-align: left; border-bottom: 1px solid #eef2f7; vertical-align: top; font-size: .93rem; }
.data-table th { background: #f8fafc; color: #475569; text-transform: uppercase; letter-spacing: .04em; font-size: .75rem; }
.data-table tr:hover td { background: #f8fafc; }
.empty-state { padding: 1rem; color: #64748b; background: #f8fafc; border: 1px dashed #cbd5e1; border-radius: 12px; margin: 1rem; }
.mini-summary { min-height: 100%; }
.mini-summary .button { margin: .25rem .25rem .25rem 0; }
.status-pill.danger { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.small-button { border: 0; background: #1d4ed8; color: #fff; padding: .42rem .6rem; border-radius: 8px; font-weight: 800; font-size: .82rem; cursor: pointer; }
.small-button.secondary { background: #475569; }
.small-button.danger { background: #b91c1c; }
.inline-grid-form { display: grid; grid-template-columns: minmax(110px, 1fr) auto; gap: .4rem; align-items: center; min-width: 220px; }
.inline-grid-form input { padding: .45rem .55rem; border-radius: 8px; }
.actions-cell { min-width: 190px; }
.actions-cell .inline-form { display: inline-block; margin: .15rem .15rem .15rem 0; }
@media (max-width: 1100px) {
  .grid.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .grid.four { grid-template-columns: 1fr; }
  .filter-grid { grid-template-columns: 1fr; }
  .inline-grid-form { grid-template-columns: 1fr; }
}

/* Focused screen styles for grouped admin mirror. */
.grid.five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid.six { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.hero-lite { background: linear-gradient(135deg, #ffffff 0%, #eef2ff 100%); border-color: #c7d2fe; }
.guidance-panel { border-left: 4px solid #1d4ed8; }
.section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.compact-panel, .mini-panel { padding: 1rem; }
.filters { display: flex; flex-wrap: wrap; gap: .65rem; align-items: end; }
.compact-filters input, .compact-filters select { min-width: 180px; max-width: 260px; }
.report-filters input, .report-filters select { min-width: 145px; max-width: 240px; }
.table-wrap { width: 100%; overflow-x: auto; }
td small { display: block; color: #64748b; margin-top: .2rem; overflow-wrap: anywhere; }
.inline-actions { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: .2rem 0; }
.inline-actions input, .inline-actions select { min-width: 150px; max-width: 230px; padding: .45rem .55rem; }
.inline-actions button { padding: .48rem .7rem; }
.status-pill.neutral { background: #eef2ff; color: #1e3a8a; border: 1px solid #c7d2fe; }
.status-pill.active { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }
@media (max-width: 1100px) {
  .grid.five, .grid.six { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .grid.four, .grid.five, .grid.six { grid-template-columns: 1fr; }
  .section-head { flex-direction: column; }
  .compact-filters input, .compact-filters select, .report-filters input, .report-filters select { max-width: none; width: 100%; }
}

/* Admin and portal polish baseline. */
.alert { border-radius: 12px; padding: .85rem 1rem; margin: 1rem 0; border: 1px solid transparent; }
.alert.success { background: #f0fdf4; border-color: #bbf7d0; color: #166534; }
.alert.warning { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.alert.error { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.admin-hero.compact, .hero-lite { padding: 1rem 1.15rem; }
.compact-panel { padding: .85rem; }
.settings-tabs { display: flex; flex-wrap: wrap; gap: .45rem; margin: .85rem 0 1rem; }
.settings-tab { border: 1px solid #dbe3ee; background: #fff; color: #172033; border-radius: 999px; padding: .5rem .75rem; text-decoration: none; font-weight: 800; font-size: .9rem; }
.settings-tab.is-active { background: #1d4ed8; color: #fff; border-color: #1d4ed8; }
.setting-section-title { margin: 1.2rem 0 .55rem; padding-bottom: .35rem; border-bottom: 1px solid #e5e7eb; color: #1e3a8a; }
.clean-setting-row { display: grid; grid-template-columns: minmax(260px, 380px) 1fr; gap: 1rem; align-items: start; padding: .75rem 0; border-bottom: 1px solid #eef2f7; }
.clean-setting-row label { margin: 0; }
.setting-label { display: block; font-weight: 850; color: #172033; }
.setting-help { display: block; margin-top: .28rem; color: #64748b; font-size: .9rem; line-height: 1.35; font-weight: 500; }
.setting-meta { display: block; margin-top: .28rem; color: #94a3b8; font-size: .78rem; }
.switch-row { display: flex; align-items: center; gap: .75rem; }
.switch-row input[type="checkbox"] { width: auto; transform: scale(1.15); }
.switch-ui { display: inline-flex; align-items: center; min-width: 46px; height: 25px; border-radius: 999px; background: #cbd5e1; padding: 3px; transition: .18s; }
.switch-ui::after { content: ''; width: 19px; height: 19px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(15,23,42,.25); transition: .18s; }
.switch-row input:checked + .switch-ui { background: #16a34a; }
.switch-row input:checked + .switch-ui::after { transform: translateX(21px); }
.secret-note { color: #64748b; font-size: .85rem; margin-top: .35rem; }
.badge { display: inline-flex; border-radius: 999px; padding: .25rem .55rem; font-weight: 850; font-size: .78rem; border: 1px solid transparent; }
.badge.good { background: #f0fdf4; color: #166534; border-color: #bbf7d0; }
.badge.bad { background: #fef2f2; color: #991b1b; border-color: #fecaca; }
.badge.warning { background: #fffbeb; color: #92400e; border-color: #fde68a; }
.badge.neutral { background: #eef2ff; color: #1e3a8a; border-color: #c7d2fe; }
.compact-table th, .compact-table td { padding: .5rem .55rem; font-size: .9rem; }
.inline-stack { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; margin: 0; }
.mt-xs { margin-top: .35rem; }
.mini-select, .mini-input { width: auto; min-width: 120px; padding: .38rem .5rem; border-radius: 8px; font-size: .85rem; }
.button.tiny, button.tiny { padding: .42rem .65rem; font-size: .83rem; border-radius: 8px; }
.stacked-form { display: grid; gap: .8rem; }
.role-guide { grid-template-columns: minmax(115px, 155px) 1fr; font-size: .94rem; }
.status-card { border: 1px solid #e5e7eb; border-radius: 14px; padding: .9rem; background: #fff; display: grid; gap: .25rem; box-shadow: 0 8px 22px rgba(15,23,42,.04); }
.status-card small { color: #64748b; }
.status-card.ok { border-color: #bbf7d0; background: #f0fdf4; }
.status-card.error { border-color: #fecaca; background: #fef2f2; }
.status-card.warning { border-color: #fde68a; background: #fffbeb; }
.status-card.muted { background: #f8fafc; }
.status-dot { width: .75rem; height: .75rem; border-radius: 50%; display: inline-block; margin-right: .35rem; }
.status-dot.ok { background: #16a34a; }
.status-dot.error { background: #dc2626; }
.status-dot.warning { background: #f59e0b; }
.status-dot.muted { background: #94a3b8; }
.endpoint-list { display: grid; gap: .45rem; }
.endpoint-list code { display: block; white-space: normal; overflow-wrap: anywhere; padding: .45rem .55rem; }
.endpoint-list small { color: #64748b; margin-bottom: .45rem; display: block; }
.api-dl { grid-template-columns: minmax(120px, 180px) 1fr; }
.api-route-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: .45rem; max-height: 480px; overflow: auto; }
.api-route-grid div { display: flex; gap: .45rem; align-items: center; border: 1px solid #eef2f7; border-radius: 10px; padding: .45rem; background: #f8fafc; }
.api-route-grid span { min-width: 48px; color: #1d4ed8; font-weight: 900; font-size: .78rem; }
.api-route-grid code { background: transparent; color: #172033; overflow-wrap: anywhere; }
.portal-page { background: linear-gradient(180deg, #f0f6ff 0, #f7f9fc 100%); }
.umh-auth-screen { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.umh-auth-card { width: min(980px, 100%); background: #fff; border: 1px solid #dfe7f3; border-radius: 24px; box-shadow: 0 22px 70px rgba(15,23,42,.10); padding: 26px; }
.umh-auth-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 24px; align-items: start; }
.umh-auth-intro { background: linear-gradient(135deg, #eff6ff 0%, #fff 100%); border: 1px solid #dbeafe; border-radius: 20px; padding: 22px; }
.umh-auth-intro h1 { font-size: clamp(30px, 4vw, 46px); }
.umh-auth-actions { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1rem; }
.umh-muted-inline { color: #64748b; font-size: .92rem; }
.umh-dashboard-app { width: min(1220px, calc(100% - 2rem)); margin: 14px auto; background: #f3f7fb; border: 1px solid #dbe5f2; border-radius: 16px; padding: 18px; box-shadow: 0 18px 50px rgba(15,23,42,.08); }
.umh-dashboard-hero.clean { background: #fff; color: #071124; border: 1px solid #dfe7f3; box-shadow: none; }
.umh-dashboard-hero.clean .umh-description { color: #5b6475; }
.umh-dashboard-hero.clean .umh-eyebrow { color: #315aa6; }
.umh-dashboard-hero.clean .umh-hero-detail-item { background: #fff; border: 1px solid #dce5f2; color: #172033; }
.umh-dashboard-hero.clean .umh-hero-detail-label { color: #64748b; }
.umh-service-section { background: #fff; border: 1px solid #dfe7f3; border-radius: 18px; padding: 18px; margin: 18px 0; box-shadow: 0 8px 28px rgba(15,23,42,.04); }
.umh-service-section h3 { margin: 0 0 .45rem; font-size: 1.25rem; }
.umh-tile-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.umh-action-tile { border: 1px solid #dfe5ec; background: #fff; color: #111827; border-radius: 12px; padding: 14px; min-height: 82px; text-align: left; display: grid; gap: 4px; box-shadow: none; }
.umh-action-tile strong { font-size: 1rem; color: #0f172a; }
.umh-action-tile span { color: #5b6475; font-weight: 500; }
.umh-action-tile:hover:not(:disabled) { border-color: #93c5fd; background: #f8fbff; transform: translateY(-1px); }
.umh-split-meter { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: end; }
.umh-small-note { color: #64748b; font-size: .92rem; margin: 0 0 12px; }
@media (max-width: 900px) {
  .clean-setting-row, .umh-auth-grid, .umh-tile-grid, .umh-split-meter { grid-template-columns: 1fr; }
  .admin-user-layout { grid-template-columns: 1fr; }
}
.umh-dashboard-hero.clean .umh-inline-edit-button { color: #1d4ed8; }
.umh-dashboard-hero.clean .logout-button { background: #f1f5f9; color: #111827; min-width: 170px; }
.umh-form-grid.two, .umh-tile-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.umh-tile-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .umh-form-grid.two, .umh-tile-grid.two, .umh-tile-grid.three { grid-template-columns: 1fr; } }

/* Compact portal UX parity and shared admin treatment. */
:root {
  --umh-blue: #315aa6;
  --umh-blue-dark: #23457f;
  --umh-blue-soft: #eef5ff;
  --umh-ink: #172033;
  --umh-muted: #667085;
  --umh-border: #dfe6ef;
  --umh-surface: #ffffff;
  --umh-page: #f2f6fa;
  --umh-success: #16834f;
  --umh-warning: #b06b00;
  --umh-danger: #b42318;
  --umh-shadow: 0 7px 22px rgba(22, 34, 51, .055);
}

/* Shared visual language. */
h1, h2, h3, h4 { color: var(--umh-ink); font-weight: 650; letter-spacing: -.015em; }
button, .button { font-weight: 650; }
input, select, textarea { border-color: #cfd8e5; background: #fff; }
input:focus, select:focus, textarea:focus {
  border-color: #7aa2df;
  outline: 3px solid rgba(49, 90, 166, .12);
  outline-offset: 0;
}

/* Admin pages use the same light cards and subtle blue accents as the portal. */
body.admin-page { background: var(--umh-page); color: var(--umh-ink); }
body.admin-page .topbar {
  position: sticky;
  top: 0;
  z-index: 900;
  padding: 10px 18px;
  background: rgba(255, 255, 255, .97);
  color: var(--umh-ink);
  border-bottom: 1px solid var(--umh-border);
  box-shadow: 0 3px 14px rgba(15, 23, 42, .045);
  backdrop-filter: blur(12px);
}
body.admin-page .brand { align-items: center; white-space: nowrap; }
body.admin-page .brand strong { color: var(--umh-blue); font-size: 1.04rem; letter-spacing: .025em; }
body.admin-page .topbar .muted { color: #7b8797; font-size: .78rem; }
body.admin-page .topnav { gap: 3px; }
body.admin-page .topnav a,
body.admin-page .topnav .link-button {
  color: #465568;
  padding: 6px 9px;
  border-radius: 8px;
  font-size: .84rem;
  font-weight: 600;
  transition: background .15s ease, color .15s ease;
}
body.admin-page .topnav a:hover,
body.admin-page .topnav .link-button:hover { background: #f0f4fa; color: var(--umh-blue); }
body.admin-page .topnav a.is-active { background: var(--umh-blue-soft); color: var(--umh-blue); }
body.admin-page .container { width: min(1320px, calc(100% - 24px)); margin: 14px auto 34px; }
body.admin-page .panel,
body.admin-page .table-card,
body.admin-page .status-card,
body.admin-page .admin-map-group {
  border-color: var(--umh-border);
  border-radius: 13px;
  box-shadow: var(--umh-shadow);
}
body.admin-page .panel { padding: 14px 16px; margin-bottom: 10px; }
body.admin-page .table-card { margin-bottom: 10px; }
body.admin-page .table-card-head { padding: 11px 13px 9px; }
body.admin-page .admin-hero.compact,
body.admin-page .hero-lite { padding: 13px 15px; }
body.admin-page .hero-lite { background: linear-gradient(135deg, #fff 0%, #f3f7fd 100%); border-color: #d6e1f0; }
body.admin-page .eyebrow { color: var(--umh-blue); font-weight: 700; }
body.admin-page h1 { font-size: clamp(1.55rem, 2.5vw, 2rem); margin-bottom: .35rem; }
body.admin-page h2 { font-size: 1.28rem; margin-bottom: .35rem; }
body.admin-page h3 { font-size: 1.02rem; margin-bottom: .3rem; }
body.admin-page p { line-height: 1.45; }
body.admin-page .muted { color: var(--umh-muted); }
body.admin-page .grid { gap: 10px; }
body.admin-page .stats > div { padding: 11px 13px; border-color: var(--umh-border); border-radius: 11px; background: #fff; }
body.admin-page .stats strong { font-size: 1.14rem; font-weight: 650; }
body.admin-page .stats span { font-size: .82rem; }
body.admin-page .tabs,
body.admin-page .settings-tabs { gap: 5px; margin-bottom: 10px; }
body.admin-page .tab,
body.admin-page .settings-tab {
  padding: 7px 10px;
  border-color: var(--umh-border);
  border-radius: 9px;
  background: #fff;
  font-weight: 600;
  font-size: .85rem;
}
body.admin-page .tab.is-active,
body.admin-page .settings-tab.is-active { border-color: #a9c0e3; background: var(--umh-blue-soft); color: var(--umh-blue); box-shadow: none; }
body.admin-page .clean-setting-row { grid-template-columns: minmax(230px, 330px) 1fr; gap: 13px; padding: 9px 0; }
body.admin-page .setting-section-title { margin: 15px 0 4px; color: var(--umh-blue); font-size: 1rem; font-weight: 650; }
body.admin-page .setting-label { font-weight: 650; }
body.admin-page .setting-help { margin-top: 2px; font-size: .83rem; line-height: 1.36; }
body.admin-page .setting-meta { font-size: .73rem; }
body.admin-page input,
body.admin-page select,
body.admin-page textarea { padding: 8px 10px; border-radius: 8px; font-size: .9rem; }
body.admin-page button,
body.admin-page .button { padding: 8px 11px; border-radius: 8px; }
body.admin-page .data-table th,
body.admin-page .data-table td,
body.admin-page th,
body.admin-page td { padding: 7px 8px; }
body.admin-page .data-table th,
body.admin-page th { font-weight: 650; }
body.admin-page .badge,
body.admin-page .status-pill { font-weight: 650; }
body.admin-page .filter-grid,
body.admin-page .filters { gap: 7px; }

/* Client portal shell. */
.portal-page {
  min-height: 100vh;
  background: linear-gradient(180deg, #eaf2fb 0%, #f5f7fa 42%, #eef2f6 100%);
  color: var(--umh-ink);
}
.portal-wrap { width: 100%; margin: 0; }
.umh-dashboard-app {
  width: min(1220px, calc(100% - 20px));
  max-width: none;
  margin: 10px auto;
  padding: 10px;
  border: 1px solid #d9e2ec;
  border-radius: 15px;
  background: rgba(247, 249, 252, .96);
  box-shadow: 0 12px 38px rgba(20, 34, 52, .07);
}
.umh-dashboard-hero {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin: 0 0 10px;
  padding: 16px 19px;
  border: 1px solid #d8e3ef;
  border-radius: 15px;
  background: #fff;
  color: var(--umh-ink);
  box-shadow: none;
}
.umh-dashboard-hero .umh-description { color: #5f6b7b; margin: 0; line-height: 1.4; }
.umh-dashboard-hero .umh-eyebrow { color: var(--umh-blue); }
.umh-eyebrow {
  display: inline-block;
  margin: 0 0 5px;
  color: var(--umh-blue);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .075em;
  text-transform: uppercase;
}
.umh-hero-copy h1 { margin: 0 0 4px; font-size: clamp(1.65rem, 3vw, 2.2rem); font-weight: 650; }
.umh-hero-details { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.umh-hero-detail-item {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border: 1px solid #dce5ef;
  border-radius: 999px;
  background: #fff;
  color: var(--umh-ink);
  font-size: .82rem;
}
.umh-hero-detail-label { color: #667085; font-size: .78rem; font-weight: 650; text-transform: none; letter-spacing: 0; }
.umh-hero-detail-item strong { font-weight: 600; overflow-wrap: anywhere; }
.umh-inline-edit-button {
  padding: 0 2px;
  border: 0;
  background: transparent;
  color: var(--umh-blue);
  font-size: .78rem;
  font-weight: 650;
}
.umh-logout-form { flex: 0 0 auto; }
.umh-logout-button { min-width: 136px; padding: 9px 14px; border-radius: 9px; background: #eef1f5; color: #1f2937; }

.umh-action-section {
  margin: 0 0 10px;
  padding: 13px 15px 15px;
  border: 1px solid var(--umh-border);
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 4px 15px rgba(15, 23, 42, .025);
}
.umh-section-heading { display: flex; justify-content: space-between; align-items: end; gap: 10px; margin-bottom: 9px; }
.umh-section-heading h2 { margin: 0 0 2px; font-size: 1.06rem; font-weight: 650; }
.umh-section-heading p { margin: 0; color: #697586; font-size: .86rem; line-height: 1.35; }
.umh-action-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.umh-action-grid-compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.umh-quick-action {
  width: 100%;
  min-height: 66px;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid #dfe4ea;
  border-radius: 11px;
  background: #fff;
  color: var(--umh-ink);
  text-align: left;
  display: grid;
  align-content: center;
  gap: 2px;
  box-shadow: none;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.umh-quick-action span { font-size: .94rem; font-weight: 650; line-height: 1.28; }
.umh-quick-action small { color: #697586; font-size: .79rem; line-height: 1.28; font-weight: 400; }
.umh-quick-action:hover:not(:disabled),
.umh-quick-action:focus-visible:not(:disabled) { border-color: #9ab7df; background: #f7faff; transform: translateY(-1px); }
.umh-quick-action:disabled { opacity: .52; }

/* Portal form/auth cards. */
.umh-auth-screen { min-height: 100vh; width: min(920px, calc(100% - 20px)); margin: 0 auto; padding: 18px 0; place-items: initial; align-content: start; }
.umh-auth-header { text-align: center; margin-bottom: 10px; }
.umh-auth-header h2 { margin: 0 0 4px; font-size: clamp(1.65rem, 4vw, 2.25rem); }
.umh-auth-card { width: min(640px, 100%); margin: 0 auto 10px; padding: 17px; border-radius: 15px; box-shadow: var(--umh-shadow); }
.umh-auth-card.compact { padding: 14px 17px; }
.umh-auth-card h3 { margin-bottom: 4px; font-size: 1.04rem; }
.umh-form-stack { gap: 10px; }
.umh-form-group { margin-bottom: 10px; }
.umh-form-group label,
.umh-form-stack label,
.umh-modal-body label { gap: 4px; color: #344054; font-size: .86rem; font-weight: 600; }
.umh-input { padding: 9px 10px; border-radius: 8px; }
.umh-button-primary,
.umh-button-secondary,
.umh-button-ghost,
.umh-button-danger-ghost,
.umh-button-small {
  min-height: 38px;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: .88rem;
  font-weight: 650;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
}
.umh-button-primary { background: var(--umh-blue); color: #fff; }
.umh-button-primary:hover:not(:disabled) { background: var(--umh-blue-dark); }
.umh-button-secondary { background: #475467; color: #fff; }
.umh-button-ghost { border: 1px solid #cfd8e5; background: #fff; color: #344054; }
.umh-button-danger-ghost { border: 1px solid #f3c7c3; background: #fff; color: var(--umh-danger); }
.umh-button-small { min-height: 32px; padding: 6px 9px; border: 1px solid #cfd8e5; background: #fff; color: #344054; }
.umh-checkbox-row { display: flex !important; align-items: flex-start; gap: 8px !important; font-weight: 500 !important; }
.umh-checkbox-row input { width: auto; margin-top: 3px; }
.umh-small-note, .umh-muted-inline, .umh-modal-intro { color: #697586; }
.umh-small-note { margin: 3px 0 9px; font-size: .82rem; }
.umh-alert-error, .umh-alert-success, .umh-alert-warning { margin: 8px 0; padding: 9px 11px; border-radius: 9px; font-size: .88rem; }
.umh-profile-pin-panel { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--umh-border); }
.umh-profile-pin-panel h3 { margin: 0 0 2px; font-size: 1rem; }
.umh-profile-pin-panel > p { margin: 0 0 9px; color: #697586; font-size: .82rem; }

/* Modals: dedicated actions with mobile-first bottom-sheet behaviour. */
body.umh-modal-open { overflow: hidden; }
.umh-modal { position: fixed; inset: 0; z-index: 1100; display: none; align-items: flex-start; justify-content: center; padding: 18px 10px; }
.umh-modal.is-open { display: flex; }
.umh-modal-backdrop { position: absolute; inset: 0; background: rgba(16, 24, 40, .58); backdrop-filter: blur(2px); }
.umh-modal-dialog {
  position: relative;
  z-index: 1;
  width: min(610px, 100%);
  max-height: calc(100dvh - 36px);
  margin: 0;
  overflow: auto;
  border: 1px solid #d9e2ec;
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 28px 80px rgba(15, 23, 42, .3);
  overscroll-behavior: contain;
}
.umh-modal-wide { width: min(850px, 100%); }
.umh-modal-header {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--umh-border);
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(10px);
}
.umh-modal-header h2 { margin: 0; font-size: 1.08rem; font-weight: 650; }
.umh-modal-close { width: 34px; height: 34px; padding: 0; border-radius: 8px; background: #f2f4f7; color: #475467; font-size: 1.45rem; }
.umh-modal-body { padding: 14px; }
.umh-modal-body > label + label,
.umh-modal-body > .umh-or-divider + label,
.umh-modal-body > label + button,
.umh-modal-body > .umh-account-number + label { margin-top: 10px; }
.umh-modal-intro { margin: 0 0 10px; font-size: .86rem; line-height: 1.42; }
.umh-or-divider { display: flex; align-items: center; gap: 8px; margin: 8px 0; color: #98a2b3; font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; }
.umh-or-divider::before, .umh-or-divider::after { content: ''; height: 1px; flex: 1; background: #eaecf0; }

/* Five-step advance flows. */
.umh-step { display: none; min-height: 0; }
.umh-step.is-active { display: block; }
.umh-step-header { margin-bottom: 10px; }
.umh-step-header h3 { margin: 4px 0 0; font-size: 1.08rem; font-weight: 650; }
.umh-step-indicator {
  display: inline-flex;
  padding: 3px 7px;
  border-radius: 999px;
  background: var(--umh-blue-soft);
  color: var(--umh-blue);
  font-size: .72rem;
  font-weight: 650;
}
.umh-step > p { margin: 0 0 11px; color: #5f6b7b; font-size: .88rem; line-height: 1.45; }
.umh-step-actions { display: flex; justify-content: space-between; gap: 8px; margin-top: 13px; }
.umh-step-actions > * { flex: 1; }
.umh-step-message { display: none; margin-top: 10px; padding: 8px 10px; border-radius: 8px; font-size: .84rem; }
.umh-step-message.is-visible { display: block; }
.umh-step-message.is-info { background: #eff6ff; border: 1px solid #bfdbfe; color: #1e4d8f; }
.umh-step-message.is-success { background: #ecfdf3; border: 1px solid #abefc6; color: #067647; }
.umh-step-message.is-warning { background: #fffaeb; border: 1px solid #fedf89; color: #93370d; }
.umh-step-message.is-error { background: #fef3f2; border: 1px solid #fecdca; color: #b42318; }
.umh-meter-choice-list { display: grid; gap: 7px; margin-bottom: 9px; }
.umh-meter-choice {
  width: 100%;
  min-height: 48px;
  padding: 8px 10px;
  border: 1px solid #d7e0eb;
  border-radius: 9px;
  background: #fff;
  color: var(--umh-ink);
  text-align: left;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.umh-meter-choice strong { font-weight: 600; }
.umh-meter-choice small { color: #697586; }
.umh-meter-choice.is-selected { border-color: #7da1d7; background: var(--umh-blue-soft); box-shadow: inset 0 0 0 1px #7da1d7; }
.umh-amount-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.umh-option-btn {
  min-height: 62px;
  padding: 9px 10px;
  border: 1px solid #d7e0eb;
  border-radius: 10px;
  background: #fff;
  color: var(--umh-ink);
  display: grid;
  gap: 2px;
  text-align: left;
}
.umh-option-btn strong { font-size: 1.02rem; font-weight: 650; }
.umh-option-btn small { color: #697586; font-weight: 400; }
.umh-option-btn.is-selected { border-color: #6f96d1; background: var(--umh-blue-soft); box-shadow: inset 0 0 0 1px #6f96d1; }
.umh-confirm-card,
.umh-account-number,
.umh-mini-summary-grid,
.umh-balance-hero {
  border: 1px solid #dde5ee;
  border-radius: 11px;
  background: #f8fafc;
}
.umh-confirm-card { padding: 11px; }
.umh-confirm-card dl,
.umh-result-dl { grid-template-columns: minmax(110px, 160px) 1fr; gap: 6px 10px; margin: 0; }
.umh-confirm-card dt,
.umh-result-dl dt { font-size: .8rem; font-weight: 600; }
.umh-confirm-card dd,
.umh-result-dl dd { font-size: .86rem; }
.umh-account-number { display: grid; gap: 2px; margin-bottom: 11px; padding: 10px 11px; }
.umh-account-number span { color: #697586; font-size: .76rem; }
.umh-account-number strong { font-size: 1rem; font-weight: 650; }
.umh-success-copy { text-align: center; padding: 8px 0 12px; }
.umh-success-mark { width: 48px; height: 48px; margin: 0 auto 9px; border-radius: 50%; display: grid; place-items: center; background: #ecfdf3; color: var(--umh-success); font-size: 1.5rem; font-weight: 700; }
.umh-success-copy p { color: #5f6b7b; }

/* Dedicated data/result modals. */
.umh-inline-result { min-height: 0; margin-top: 9px; font-size: .86rem; }
.umh-inline-result:empty { display: none; }
.umh-inline-result.is-success,
.umh-inline-result.is-warning,
.umh-inline-result.is-error,
.umh-inline-result.is-loading { padding: 9px 10px; border-radius: 9px; }
.umh-inline-result.is-success { background: #ecfdf3; border: 1px solid #abefc6; color: #067647; }
.umh-inline-result.is-warning { background: #fffaeb; border: 1px solid #fedf89; color: #93370d; }
.umh-inline-result.is-error { background: #fef3f2; border: 1px solid #fecdca; color: #b42318; }
.umh-inline-result.is-loading { background: #f8fafc; border: 1px solid #dbe4f0; color: #475569; }
.umh-inline-result p { margin: 0; }
.umh-loading { color: #697586; font-style: normal; }
.umh-empty-state { margin: 0; padding: 10px 11px; border-radius: 9px; font-size: .84rem; }
.umh-balance-hero { display: grid; gap: 3px; padding: 13px; margin-bottom: 9px; }
.umh-balance-hero span { color: #697586; font-size: .78rem; }
.umh-balance-hero strong { font-size: 1.45rem; font-weight: 650; }
.umh-mini-summary-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; overflow: hidden; background: #e4e9ef; }
.umh-mini-summary-grid > div { padding: 9px 10px; background: #fff; }
.umh-mini-summary-grid span { display: block; color: #697586; font-size: .74rem; }
.umh-mini-summary-grid strong { font-weight: 650; }
.umh-record-list,
.umh-token-list,
.umh-payment-method-list { display: grid; gap: 7px; }
.umh-record-list > article,
.umh-token-list > article,
.umh-payment-method-list > article {
  padding: 9px 10px;
  border: 1px solid #e1e7ee;
  border-radius: 9px;
  background: #fff;
}
.umh-record-list header,
.umh-payment-method-list header { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
.umh-record-list p,
.umh-payment-method-list p { margin: 3px 0 0; color: #697586; font-size: .8rem; }
.umh-token-box { display: grid; gap: 4px; }
.umh-token-box code { padding: 7px 8px; border-radius: 7px; font-size: .92rem; letter-spacing: .04em; overflow-wrap: anywhere; }
.umh-status-badge { display: inline-flex; padding: 3px 7px; border-radius: 999px; background: #f2f4f7; color: #475467; font-size: .72rem; font-weight: 600; }
.umh-payment-link { display: inline-flex; margin-top: 8px; }

/* My Meters is management-only; meters are added in transaction flows. */
.umh-meter-list { display: grid; gap: 7px; }
.umh-meter-management-row { padding: 10px; border: 1px solid #dfe5ec; border-radius: 10px; background: #fff; }
.umh-meter-management-row.is-archived { opacity: .68; background: #f8fafc; }
.umh-meter-management-head { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; margin-bottom: 8px; }
.umh-meter-management-head strong { font-weight: 650; }
.umh-meter-management-head small { color: #697586; }
.umh-meter-actions,
.umh-inline-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.umh-meter-label-input { flex: 1 1 180px; padding: 7px 8px; }

@media (max-width: 980px) {
  body.admin-page .topbar { position: static; align-items: flex-start; }
  body.admin-page .clean-setting-row { grid-template-columns: 1fr; }
  .umh-action-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .umh-dashboard-hero { align-items: flex-start; }
}

@media (max-width: 680px) {
  .portal-page { background: #eef3f8; }
  .umh-dashboard-app { width: 100%; margin: 0; padding: 7px; border: 0; border-radius: 0; box-shadow: none; }
  .umh-dashboard-hero { align-items: stretch; flex-direction: column; padding: 13px; margin-bottom: 7px; border-radius: 12px; }
  .umh-hero-copy h1 { font-size: 1.55rem; }
  .umh-hero-details { gap: 5px; }
  .umh-hero-detail-item { width: 100%; border-radius: 9px; }
  .umh-logout-button { width: 100%; min-width: 0; }
  .umh-action-section { margin-bottom: 7px; padding: 11px; border-radius: 12px; }
  .umh-section-heading { margin-bottom: 7px; }
  .umh-section-heading p { font-size: .8rem; }
  .umh-action-grid,
  .umh-action-grid-compact { grid-template-columns: 1fr; gap: 6px; }
  .umh-quick-action { min-height: 59px; padding: 9px 10px; border-radius: 9px; }
  .umh-quick-action span { font-size: .9rem; }
  .umh-quick-action small { font-size: .76rem; }
  .umh-auth-screen { width: calc(100% - 14px); padding: 12px 0; }
  .umh-auth-card { padding: 13px; }
  .umh-form-grid.two { grid-template-columns: 1fr; }
  .umh-modal { align-items: flex-end; padding: 0; }
  .umh-modal-dialog,
  .umh-modal-wide { width: 100%; max-height: min(92dvh, 860px); border-radius: 16px 16px 0 0; border-bottom: 0; }
  .umh-modal-header { padding: 10px 12px; }
  .umh-modal-body { padding: 12px; }
  .umh-step { min-height: 0; padding-bottom: max(6px, env(safe-area-inset-bottom)); }
  .umh-step-actions { position: sticky; bottom: 0; padding-top: 10px; background: linear-gradient(to top, #fff 78%, rgba(255,255,255,0)); }
  .umh-amount-options { grid-template-columns: 1fr 1fr; }
  .umh-confirm-card dl,
  .umh-result-dl { grid-template-columns: 1fr; gap: 2px; }
  .umh-confirm-card dd,
  .umh-result-dl dd { margin-bottom: 7px; }
  .umh-mini-summary-grid { grid-template-columns: 1fr; }
  .umh-meter-management-head { flex-direction: column; }
}

@media (max-width: 420px) {
  .umh-amount-options { grid-template-columns: 1fr; }
  .umh-step-actions { flex-direction: column-reverse; }
  .umh-step-actions > * { width: 100%; }
}

/* Token/result detail polish aligned with the 0.7.7 portal behaviour. */
.umh-token-box {
  margin-top: 10px;
  padding: 10px 11px;
  border: 1px solid #b8d2f0;
  border-radius: 10px;
  background: #eff6ff;
  color: #163b69;
}
.umh-token-box span { font-size: .74rem; font-weight: 650; text-transform: uppercase; letter-spacing: .04em; }
.umh-token-box strong,
.umh-token-box code { font-size: 1rem; font-weight: 700; letter-spacing: .08em; overflow-wrap: anywhere; }
.umh-token-list > article { display: grid; gap: 3px; color: var(--umh-ink); }
.umh-token-list > article.is-latest { border-color: #8fb2df; background: #f4f8fe; box-shadow: inset 3px 0 0 var(--umh-blue); }
.umh-token-list > article > span { color: var(--umh-blue); font-size: .72rem; font-weight: 650; text-transform: uppercase; letter-spacing: .04em; }
.umh-token-list > article > strong { font-size: .96rem; font-weight: 650; letter-spacing: .045em; overflow-wrap: anywhere; }
.umh-token-list > article > small { color: #697586; font-size: .76rem; }

/* 0.9.4 task-based admin information architecture and integration diagnostics. */
:root {
  --admin-navy: #0f1f3d;
  --admin-navy-soft: #182b50;
  --admin-blue: #2456a6;
  --admin-blue-soft: #eef4ff;
  --admin-border: #dfe6ef;
  --admin-surface: #ffffff;
  --admin-canvas: #f4f7fb;
  --admin-text: #1c2b42;
  --admin-muted: #68778b;
  --admin-good: #117a50;
  --admin-good-bg: #ecf9f2;
  --admin-warning: #9a5b09;
  --admin-warning-bg: #fff7df;
  --admin-bad: #b42318;
  --admin-bad-bg: #fff0ef;
}

body.admin-page {
  background: var(--admin-canvas);
  color: var(--admin-text);
  min-height: 100vh;
}
body.admin-page a { color: var(--admin-blue); }
body.admin-page h1,
body.admin-page h2,
body.admin-page h3 {
  color: var(--admin-text);
  letter-spacing: -.015em;
}
body.admin-page h1 { font-size: clamp(1.55rem, 2.4vw, 2.15rem); font-weight: 650; margin-bottom: .35rem; }
body.admin-page h2 { font-size: 1.16rem; font-weight: 650; margin-bottom: .28rem; }
body.admin-page h3 { font-size: .98rem; font-weight: 650; }
body.admin-page p { line-height: 1.48; }
body.admin-page .panel,
body.admin-page .table-card {
  border-color: var(--admin-border);
  border-radius: 12px;
  box-shadow: 0 5px 18px rgba(28, 43, 66, .045);
  padding: 1rem;
  margin-bottom: .8rem;
}
body.admin-page .table-card { padding: 0; }
body.admin-page button,
body.admin-page .button {
  border-radius: 8px;
  padding: .6rem .82rem;
  font-size: .86rem;
  font-weight: 650;
  background: var(--admin-blue);
}
body.admin-page button.secondary,
body.admin-page .button.secondary { background: #40516a; }
body.admin-page button.ghost,
body.admin-page .button.ghost {
  color: var(--admin-blue);
  background: #fff;
  border: 1px solid #bdcbe0;
}
body.admin-page button.ghost:hover,
body.admin-page .button.ghost:hover { background: var(--admin-blue-soft); border-color: #8ca9d1; }
body.admin-page input,
body.admin-page select,
body.admin-page textarea {
  border-color: #bac7d8;
  border-radius: 8px;
  padding: .58rem .68rem;
  background: #fff;
}
body.admin-page input:focus,
body.admin-page select:focus,
body.admin-page textarea:focus {
  outline: 3px solid rgba(36, 86, 166, .13);
  border-color: var(--admin-blue);
}
body.admin-page table { font-size: .86rem; }
body.admin-page th,
body.admin-page td { padding: .56rem .58rem; }
body.admin-page th { color: #53647a; font-size: .73rem; text-transform: uppercase; letter-spacing: .035em; }
body.admin-page code { overflow-wrap: anywhere; }

.admin-shell {
  display: grid;
  grid-template-columns: 246px minmax(0, 1fr);
  min-height: 100vh;
}
.admin-sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  background: var(--admin-navy);
  color: #fff;
  border-right: 1px solid rgba(255,255,255,.06);
}
.admin-brand { padding: 17px 16px 12px; }
.admin-brand a {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff !important;
  text-decoration: none;
}
.admin-brand a > span:last-child { display: grid; gap: 1px; }
.admin-brand strong { font-size: 1rem; font-weight: 700; }
.admin-brand small { color: #afbdd3; font-size: .72rem; }
.admin-brand-mark {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: linear-gradient(135deg, #79a8ee, #2c63b4);
  color: #fff;
  font-weight: 800;
  box-shadow: 0 5px 14px rgba(0,0,0,.18);
}
.admin-nav { flex: 1; padding: 2px 9px 14px; }
.admin-nav-group { margin-top: 12px; }
.admin-nav-title {
  margin: 0 8px 5px;
  color: #7f91ad;
  font-size: .65rem;
  font-weight: 750;
  letter-spacing: .095em;
  text-transform: uppercase;
}
.admin-nav-item {
  display: grid;
  grid-template-columns: 27px minmax(0, 1fr);
  gap: 7px;
  align-items: center;
  padding: 8px 9px;
  margin: 2px 0;
  border-radius: 9px;
  color: #d9e3f2 !important;
  text-decoration: none;
  transition: background .14s ease, color .14s ease;
}
.admin-nav-item:hover { background: rgba(255,255,255,.07); color: #fff !important; }
.admin-nav-item.is-active { background: #284c82; color: #fff !important; box-shadow: inset 3px 0 0 #88b7ff; }
.admin-nav-icon { display: grid; place-items: center; color: #9fb6d7; font-size: .95rem; }
.admin-nav-item > span:last-child { display: grid; min-width: 0; }
.admin-nav-item strong { font-size: .83rem; font-weight: 650; }
.admin-nav-item small { color: #93a6c1; font-size: .67rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-nav-item.is-active small { color: #c9d9ef; }
.admin-sidebar-footer { padding: 11px 12px 13px; border-top: 1px solid rgba(255,255,255,.09); }
.admin-user-summary { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.admin-user-summary > span:last-child { display: grid; min-width: 0; }
.admin-user-summary strong { font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-user-summary small { color: #95a7c1; font-size: .68rem; }
.admin-avatar {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #31598f;
  font-size: .75rem;
  font-weight: 750;
}
.admin-logout { width: 100%; background: rgba(255,255,255,.08) !important; border: 1px solid rgba(255,255,255,.12) !important; color: #fff; padding: .48rem !important; }

.admin-workspace { min-width: 0; }
.admin-toolbar {
  min-height: 58px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 9px 20px;
  background: rgba(255,255,255,.96);
  border-bottom: 1px solid var(--admin-border);
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(8px);
}
.admin-toolbar > div:first-child { display: grid; gap: 1px; }
.admin-toolbar strong { font-size: .88rem; font-weight: 650; }
.admin-toolbar small { color: var(--admin-muted); font-size: .68rem; }
.admin-toolbar-actions a { font-size: .78rem; text-decoration: none; font-weight: 650; }
.admin-content { width: min(1480px, 100%); padding: 18px 20px 40px; }

.admin-page-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  margin: 0 0 13px;
}
.admin-page-head > div:first-child { max-width: 840px; }
.admin-page-head p:not(.eyebrow) { margin: 0; color: var(--admin-muted); font-size: .9rem; }
.admin-page-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
body.admin-page .eyebrow { margin: 0 0 3px; color: var(--admin-blue); font-size: .66rem; font-weight: 750; letter-spacing: .08em; }
.section-head { margin-bottom: .65rem; }
.section-head p { margin: .18rem 0 0; color: var(--admin-muted); font-size: .84rem; }

.status-dot { width: 9px; height: 9px; display: inline-block; flex: 0 0 auto; border-radius: 50%; background: #9aa7b8; box-shadow: 0 0 0 3px rgba(154,167,184,.13); }
.status-dot.good { background: var(--admin-good); box-shadow: 0 0 0 3px rgba(17,122,80,.12); }
.status-dot.warning { background: #d99318; box-shadow: 0 0 0 3px rgba(217,147,24,.14); }
.status-dot.bad { background: var(--admin-bad); box-shadow: 0 0 0 3px rgba(180,35,24,.12); }
.status-dot.muted, .status-dot.neutral { background: #8795a8; }
.status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: .25rem .52rem;
  font-size: .7rem;
  font-weight: 700;
  white-space: nowrap;
  border: 1px solid transparent;
}
.status-badge.good { color: var(--admin-good); background: var(--admin-good-bg); border-color: #b8e5cf; }
.status-badge.warning { color: var(--admin-warning); background: var(--admin-warning-bg); border-color: #f3d69c; }
.status-badge.bad { color: var(--admin-bad); background: var(--admin-bad-bg); border-color: #f3c2bd; }
.status-badge.muted, .status-badge.neutral { color: #53647a; background: #f0f3f7; border-color: #d5dde7; }
.notice { border-radius: 9px; padding: .7rem .8rem; margin: .7rem 0; font-size: .86rem; }

.overview-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
  margin-bottom: 10px;
}
.overview-kpi {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 12px 13px;
  border: 1px solid var(--admin-border);
  border-radius: 11px;
  background: #fff;
  color: var(--admin-text) !important;
  text-decoration: none;
  box-shadow: 0 4px 13px rgba(28,43,66,.035);
}
.overview-kpi:hover { border-color: #a8bbd6; transform: translateY(-1px); }
.overview-kpi span { color: var(--admin-muted); font-size: .72rem; font-weight: 650; }
.overview-kpi strong { font-size: 1.55rem; font-weight: 650; }
.overview-kpi small { color: #8290a2; font-size: .69rem; }
.admin-overview-grid { gap: 10px; }
.overview-integration-list,
.compact-activity-list,
.overview-quick-tasks { display: grid; gap: 3px; }
.overview-integration-list a,
.compact-activity-list a,
.overview-quick-tasks a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 8px;
  border-radius: 8px;
  color: var(--admin-text) !important;
  text-decoration: none;
}
.overview-integration-list a:hover,
.compact-activity-list a:hover,
.overview-quick-tasks a:hover { background: #f5f8fc; }
.overview-integration-list span:nth-child(2),
.compact-activity-list span:nth-child(2),
.overview-quick-tasks span:nth-child(2) { display: grid; }
.overview-integration-list strong,
.compact-activity-list strong,
.overview-quick-tasks strong { font-size: .82rem; font-weight: 650; }
.overview-integration-list small,
.compact-activity-list small,
.overview-quick-tasks small { color: var(--admin-muted); font-size: .7rem; }
.compact-activity-list time { color: #8b98a9; font-size: .66rem; }
.overview-status-dl { display: grid; gap: 0; margin: 0; }
.overview-status-dl > div { display: flex; justify-content: space-between; gap: 12px; padding: .55rem 0; border-bottom: 1px solid #edf1f6; }
.overview-status-dl > div:last-child { border-bottom: 0; }
.overview-status-dl dt { font-size: .76rem; font-weight: 600; }
.overview-status-dl dd { font-size: .78rem; text-align: right; }

.integration-overview-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 10px;
}
.integration-card {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 9px;
  padding: 13px;
  background: #fff;
  border: 1px solid var(--admin-border);
  border-top: 3px solid #9aa7b8;
  border-radius: 11px;
  box-shadow: 0 5px 16px rgba(28,43,66,.04);
}
.integration-card.status-good { border-top-color: var(--admin-good); }
.integration-card.status-warning { border-top-color: #d99318; }
.integration-card.status-bad { border-top-color: var(--admin-bad); }
.integration-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.integration-card-head h2 { margin: 0 0 3px; }
.integration-card-head p { margin: 0; color: var(--admin-muted); font-size: .79rem; }
.integration-mini-dl { display: grid; gap: 0; margin: 0; }
.integration-mini-dl > div { display: flex; justify-content: space-between; gap: 10px; padding: .38rem 0; border-bottom: 1px solid #eff2f6; }
.integration-mini-dl > div:last-child { border-bottom: 0; }
.integration-mini-dl dt { color: var(--admin-muted); font-size: .7rem; font-weight: 600; }
.integration-mini-dl dd { font-size: .72rem; text-align: right; }
.integration-card-actions { display: flex; flex-wrap: wrap; gap: 5px; }
.integration-card-actions .button,
.integration-card-actions button { padding: .45rem .58rem; font-size: .73rem; }
.readiness-strip { display: flex; flex-wrap: wrap; gap: 6px; margin: .35rem 0 .7rem; }
.guidance-inline { display: flex; gap: 8px; align-items: flex-start; padding: .65rem .72rem; margin-top: .7rem; border-radius: 8px; background: #f3f7fc; color: #526177; font-size: .78rem; }
.guidance-inline strong { color: var(--admin-text); white-space: nowrap; }

.configuration-layout {
  display: grid;
  grid-template-columns: 235px minmax(0, 1fr);
  gap: 11px;
  align-items: start;
}
.configuration-nav {
  position: sticky;
  top: 73px;
  padding: 8px;
  border: 1px solid var(--admin-border);
  border-radius: 11px;
  background: #fff;
}
.configuration-nav a {
  display: grid;
  gap: 1px;
  padding: 8px 9px;
  border-radius: 8px;
  color: var(--admin-text) !important;
  text-decoration: none;
}
.configuration-nav a:hover { background: #f5f8fc; }
.configuration-nav a.is-active { background: var(--admin-blue-soft); color: var(--admin-blue) !important; box-shadow: inset 3px 0 0 var(--admin-blue); }
.configuration-nav strong { font-size: .78rem; font-weight: 650; }
.configuration-nav small { color: var(--admin-muted); font-size: .65rem; }
.configuration-main { min-width: 0; }
.configuration-group-intro { padding: 11px 13px; margin-bottom: 9px; border: 1px solid #cddbec; border-radius: 10px; background: #f5f9ff; }
.configuration-group-intro h2 { margin: 0 0 3px; }
.configuration-group-intro p { margin: 0; color: var(--admin-muted); font-size: .82rem; }
.configuration-steps { margin: 7px 0 0; padding-left: 18px; color: #53647a; font-size: .77rem; }
.configuration-section { padding: 0 !important; overflow: hidden; }
.configuration-section > header { padding: 10px 13px; border-bottom: 1px solid var(--admin-border); background: #f8fafc; }
.configuration-section > header h2 { margin: 0; font-size: .95rem; }
.setting-field-list { display: grid; }
.clean-setting-row {
  display: grid;
  grid-template-columns: minmax(230px, .8fr) minmax(280px, 1.2fr);
  gap: 16px;
  align-items: start;
  padding: 11px 13px;
  border-bottom: 1px solid #edf1f5;
}
.clean-setting-row:last-child { border-bottom: 0; }
.clean-setting-label { display: grid; gap: 3px; }
.clean-setting-label > strong { font-size: .8rem; font-weight: 650; }
.setting-help { margin: 0; color: var(--admin-muted); font-size: .72rem; line-height: 1.4; }
.setting-recommendation { color: var(--admin-good); font-size: .69rem; font-weight: 600; }
.setting-risk { display: inline-flex; width: fit-content; border-radius: 999px; padding: 2px 6px; font-size: .61rem; font-weight: 750; text-transform: uppercase; letter-spacing: .04em; }
.setting-risk.high { color: #97500a; background: #fff2ce; }
.setting-risk.critical { color: var(--admin-bad); background: var(--admin-bad-bg); }
.setting-control { min-width: 0; }
.setting-control label { font-weight: 500; }
.setting-control .checkbox,
.setting-switch { display: flex; align-items: flex-start; gap: 8px; font-size: .78rem; }
.setting-switch input { width: 38px; height: 20px; flex: 0 0 auto; accent-color: var(--admin-blue); }
.setting-secret-note { margin-top: 4px; color: #7a8798; font-size: .65rem; }
.configuration-save-bar {
  position: sticky;
  bottom: 8px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border: 1px solid #c5d3e4;
  border-radius: 10px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 8px 28px rgba(28,43,66,.12);
  backdrop-filter: blur(8px);
  z-index: 10;
}
.configuration-save-bar small { color: var(--admin-muted); }

.api-guide-nav {
  position: sticky;
  top: 58px;
  z-index: 15;
  display: flex;
  gap: 4px;
  overflow-x: auto;
  padding: 7px 8px;
  margin: 0 0 10px;
  border: 1px solid var(--admin-border);
  border-radius: 10px;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(8px);
}
.api-guide-nav a { white-space: nowrap; padding: 5px 8px; border-radius: 7px; text-decoration: none; font-size: .72rem; font-weight: 650; }
.api-guide-nav a:hover { background: var(--admin-blue-soft); }
.route-count { min-width: 120px; display: grid; text-align: right; }
.route-count strong { font-size: 1.35rem; font-weight: 650; }
.route-count span, .route-count small { color: var(--admin-muted); font-size: .68rem; }
.configuration-readiness-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin: .7rem 0;
}
.configuration-readiness-grid > div { display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; align-items: center; padding: 8px 9px; border: 1px solid #e1e7ef; border-radius: 8px; }
.configuration-readiness-grid strong { font-size: .76rem; }
.configuration-readiness-grid small { grid-column: 2; color: var(--admin-muted); font-size: .65rem; }
.api-quick-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.api-quick-grid article { padding: 9px; border: 1px solid #e1e7ef; border-radius: 8px; background: #f9fbfd; }
.api-quick-grid h3 { margin-bottom: 5px; }
.api-quick-grid code { display: block; margin: 3px 0; font-size: .69rem; }
.api-quick-grid p { margin: 6px 0 0; color: var(--admin-muted); font-size: .68rem; }
.api-guide-section { margin-bottom: 12px; }
.api-reference-card { border: 1px solid var(--admin-border); border-radius: 10px; background: #fff; margin-bottom: 6px; overflow: clip; }
.api-reference-card > summary { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 10px 12px; cursor: pointer; list-style: none; }
.api-reference-card > summary::-webkit-details-marker { display: none; }
.api-reference-card > summary > span:first-child { display: grid; }
.api-reference-card > summary strong { font-size: .86rem; }
.api-reference-card > summary small { color: var(--admin-muted); font-size: .69rem; }
.summary-toggle { color: var(--admin-blue); font-size: .69rem; font-weight: 650; }
.api-reference-body { padding: 0 12px 11px; border-top: 1px solid #edf1f5; }
.api-auth-note { margin: 8px 0; padding: 7px 8px; border-radius: 7px; background: #f4f7fb; font-size: .72rem; }
.compact-guidance-list { margin: 6px 0 8px; padding-left: 18px; color: var(--admin-muted); font-size: .71rem; }
.api-endpoint-table { min-width: 920px; }
.api-endpoint-table td { font-size: .72rem; }
.http-method { display: inline-flex; padding: 2px 5px; border-radius: 5px; background: #eaf1fb; color: #244c83; font-size: .64rem; font-weight: 750; white-space: nowrap; }
.api-sample-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.api-sample-grid .panel { margin: 0; }
.api-sample-grid pre { max-height: 330px; margin: 6px 0 0; font-size: .72rem; }

.log-filter-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(140px, 1fr));
  gap: 7px;
  align-items: end;
}
.log-filter-grid label { gap: 3px; font-size: .69rem; }
.log-filter-grid .filter-actions { grid-column: span 4; }
.provider-summary-strip { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; margin-bottom: 9px; }
.provider-summary-card { display: grid; gap: 1px; padding: 8px 9px; border: 1px solid var(--admin-border); border-radius: 8px; background: #fff; color: var(--admin-text) !important; text-decoration: none; }
.provider-summary-card strong { font-size: .74rem; }
.provider-summary-card span, .provider-summary-card small { font-size: .65rem; }
.integration-log-list { display: grid; gap: 7px; }
.integration-log-entry { border: 1px solid var(--admin-border); border-left: 4px solid #95a3b4; border-radius: 10px; background: #fff; overflow: hidden; box-shadow: 0 4px 14px rgba(28,43,66,.035); }
.integration-log-entry.status-good { border-left-color: var(--admin-good); }
.integration-log-entry.status-warning { border-left-color: #d99318; }
.integration-log-entry.status-bad { border-left-color: var(--admin-bad); }
.integration-log-summary { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 9px; padding: 9px 10px; }
.integration-log-id { color: var(--admin-muted); font-size: .68rem; font-weight: 700; }
.integration-log-title { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.integration-log-title strong { font-size: .78rem; }
.integration-log-title code { font-size: .69rem; }
.integration-log-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 3px; color: var(--admin-muted); font-size: .63rem; }
.integration-log-error { padding: 6px 10px; color: var(--admin-bad); background: var(--admin-bad-bg); border-top: 1px solid #f4cbc7; font-size: .73rem; }
.integration-log-entry > details { border-top: 1px solid #edf1f5; }
.integration-log-entry > details > summary { padding: 7px 10px; cursor: pointer; color: var(--admin-blue); font-size: .7rem; font-weight: 650; }
.integration-log-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 7px; padding: 0 10px 8px; }
.integration-log-detail-grid > div { min-width: 0; }
.integration-log-detail-grid > .integration-log-wide-note { grid-column: 1 / -1; }
.integration-log-detail-grid h3 { margin: 0 0 4px; }
.integration-log-detail-grid p { margin: 0 0 4px; font-size: .69rem; }
.integration-log-detail-grid pre { max-height: 390px; margin: 0; padding: 8px; font-size: .67rem; border-radius: 7px; }
.integration-log-reference-dl { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 1px; margin: 0 10px 10px; overflow: hidden; border: 1px solid #e1e7ef; border-radius: 7px; background: #e1e7ef; }
.integration-log-reference-dl > div { padding: 6px 7px; background: #fff; }
.integration-log-reference-dl dt { font-size: .61rem; }
.integration-log-reference-dl dd { font-size: .67rem; }

.customer-search-row,
.compact-form-row {
  display: grid;
  grid-template-columns: minmax(260px, 2fr) repeat(3, minmax(150px, 1fr)) auto;
  gap: 7px;
  align-items: end;
}
.customer-search-row label,
.compact-form-row label { gap: 3px; font-size: .7rem; }
.compact-table { width: 100%; border-collapse: collapse; }
.compact-table td small { font-size: .67rem; }
.meter-action-cell { min-width: 260px; }

body.admin-page .tabs { gap: 5px; margin-bottom: 8px; }
body.admin-page .tab { flex: 1 1 170px; gap: 2px; padding: 8px 9px; border-radius: 9px; }
body.admin-page .tab strong { font-size: .78rem; font-weight: 650; }
body.admin-page .tab small { font-size: .65rem; }
body.admin-page .tab.is-active { border-color: #8aa7ce; box-shadow: inset 3px 0 0 var(--admin-blue); background: var(--admin-blue-soft); }

@media (max-width: 1180px) {
  .integration-overview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .api-quick-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .provider-summary-strip { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .customer-search-row, .compact-form-row { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .customer-search-row button, .compact-form-row button { width: fit-content; }
}

@media (max-width: 900px) {
  .admin-shell { display: block; }
  .admin-sidebar { position: static; height: auto; overflow: visible; }
  .admin-brand { padding: 10px 12px 5px; }
  .admin-nav { display: flex; gap: 7px; overflow-x: auto; padding: 5px 9px 9px; scrollbar-width: thin; }
  .admin-nav-group { display: flex; gap: 3px; margin: 0; }
  .admin-nav-title { display: none; }
  .admin-nav-item { grid-template-columns: auto auto; min-width: max-content; padding: 7px 8px; }
  .admin-nav-item small { display: none; }
  .admin-sidebar-footer { display: none; }
  .admin-toolbar { position: static; padding: 8px 12px; }
  .admin-content { padding: 13px 12px 32px; }
  .admin-page-head { flex-direction: column; gap: 9px; }
  .admin-page-actions { justify-content: flex-start; }
  .overview-kpi-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .configuration-layout { grid-template-columns: 1fr; }
  .configuration-nav { position: static; display: flex; overflow-x: auto; gap: 3px; }
  .configuration-nav a { min-width: max-content; }
  .clean-setting-row { grid-template-columns: 1fr; gap: 7px; }
  .configuration-readiness-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .log-filter-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .log-filter-grid .filter-actions { grid-column: span 2; }
  .integration-log-reference-dl { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 650px) {
  .admin-toolbar-actions { display: none; }
  .overview-kpi-grid,
  .integration-overview-grid,
  .configuration-readiness-grid,
  .api-quick-grid,
  .api-sample-grid,
  .provider-summary-strip,
  .log-filter-grid,
  .integration-log-detail-grid,
  .customer-search-row,
  .compact-form-row { grid-template-columns: 1fr; }
  .log-filter-grid .filter-actions { grid-column: auto; }
  .integration-log-summary { grid-template-columns: auto minmax(0,1fr); }
  .integration-log-summary > .status-badge { grid-column: 2; justify-self: start; }
  .integration-log-reference-dl { grid-template-columns: 1fr; }
  .route-count { text-align: left; }
  .api-guide-nav { top: 0; }
  .admin-page-actions .button { flex: 1 1 auto; text-align: center; }
}

/* Configuration view class bindings. */
body.admin-page .configuration-nav { padding: 7px; margin: 0; }
.configuration-nav-head { display: grid; gap: 1px; padding: 5px 7px 8px; border-bottom: 1px solid #edf1f5; margin-bottom: 4px; }
.configuration-nav-head strong { font-size: .76rem; }
.configuration-nav-head small { color: var(--admin-muted); font-size: .65rem; }
.configuration-nav-item { display: grid; gap: 1px; }
body.admin-page .configuration-intro { padding: 11px 13px; margin-bottom: 8px; border-color: #cad8e9; background: #f6f9fe; }
.configuration-intro h2 { margin: 0 0 3px; }
.configuration-intro p:not(.eyebrow) { margin: 0; color: var(--admin-muted); font-size: .8rem; }
.setup-steps { margin: 7px 0 0; padding-left: 19px; color: #53647a; font-size: .73rem; }
.setup-steps li + li { margin-top: 2px; }
body.admin-page .settings-section-card { padding: 0; overflow: hidden; }
.settings-section-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 12px; border-bottom: 1px solid var(--admin-border); background: #f8fafc; }
.settings-section-head h2 { margin: 0; font-size: .94rem; }
.settings-section-head span { color: var(--admin-muted); font-size: .65rem; }
.settings-list { display: grid; }
body.admin-page .setting-row {
  display: grid;
  grid-template-columns: minmax(250px, .9fr) minmax(270px, 1.1fr);
  gap: 16px;
  align-items: start;
  padding: 10px 12px;
  border: 0;
  border-bottom: 1px solid #edf1f5;
}
body.admin-page .setting-row:last-child { border-bottom: 0; }
.setting-label-block { display: grid; gap: 4px; }
.setting-title-line { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.setting-title-line > label { display: inline; font-size: .78rem; font-weight: 650; }
body.admin-page .setting-help { margin: 0; color: var(--admin-muted); font-size: .7rem; line-height: 1.38; }
.setting-guidance-line { display: flex; flex-wrap: wrap; gap: 4px 10px; color: #778598; font-size: .63rem; }
.setting-guidance-line strong { color: #5c6a7e; font-weight: 650; }
.risk-badge { display: inline-flex; border-radius: 999px; padding: 2px 6px; font-size: .58rem; font-weight: 750; text-transform: uppercase; letter-spacing: .04em; }
.risk-badge.medium { color: #7d5a0a; background: #fff4cf; }
.risk-badge.high { color: #9a4a0b; background: #ffebcf; }
.risk-badge.critical { color: var(--admin-bad); background: var(--admin-bad-bg); }
.setting-control-block { min-width: 0; }
.setting-control-block input,
.setting-control-block select,
.setting-control-block textarea { font-size: .78rem; }
.setting-control-block textarea { resize: vertical; min-height: 74px; }
.switch-row { display: inline-flex !important; align-items: center; gap: 7px; width: fit-content; cursor: pointer; font-size: .72rem; font-weight: 600 !important; }
.switch-row input { position: absolute; opacity: 0; pointer-events: none; }
.switch-ui { position: relative; width: 36px; height: 20px; flex: 0 0 auto; border-radius: 999px; background: #c9d2dd; transition: background .16s ease; }
.switch-ui::after { content: ''; position: absolute; width: 16px; height: 16px; left: 2px; top: 2px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.2); transition: transform .16s ease; }
.switch-row input:checked + .switch-ui { background: var(--admin-good); }
.switch-row input:checked + .switch-ui::after { transform: translateX(16px); }
.switch-row input:focus-visible + .switch-ui { outline: 3px solid rgba(36,86,166,.17); }
.switch-label { color: #58687c; }
.switch-row input:checked ~ .switch-label { color: var(--admin-good); }
body.admin-page .secret-clear { display: flex; margin-top: 5px; font-size: .66rem; color: var(--admin-bad); }
.sticky-save-bar {
  position: sticky;
  bottom: 8px;
  z-index: 12;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border: 1px solid #c5d3e4;
  border-radius: 9px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 8px 26px rgba(28,43,66,.13);
  backdrop-filter: blur(8px);
}
.sticky-save-bar span { color: var(--admin-muted); font-size: .7rem; }

@media (max-width: 900px) {
  body.admin-page .setting-row { grid-template-columns: 1fr; gap: 7px; }
  .configuration-nav-head { display: none; }
}
@media (max-width: 650px) {
  .sticky-save-bar { align-items: stretch; flex-direction: column; }
  .sticky-save-bar button { width: 100%; }
}

/* Collapsible technical inventories keep System Health compact. */
.technical-details {
  margin-top: 8px;
  border: 1px solid var(--admin-border);
  border-radius: 9px;
  background: #fff;
  overflow: hidden;
}
.technical-details > summary {
  cursor: pointer;
  padding: 9px 11px;
  color: var(--admin-blue);
  font-size: .74rem;
  font-weight: 650;
  background: #f8fafc;
}
.technical-details[open] > summary { border-bottom: 1px solid var(--admin-border); }
.technical-details .table-scroll,
.technical-details > table { margin: 0; }
.technical-details .data-table { margin: 0; }

/* Guided configuration: advanced sections remain available without overwhelming first-time setup. */
details.settings-section-card > summary {
  cursor: pointer;
  list-style: none;
  user-select: none;
}
details.settings-section-card > summary::-webkit-details-marker { display: none; }
details.settings-section-card > summary::after {
  content: "▾";
  color: var(--muted, #667085);
  font-size: .9rem;
  margin-left: .5rem;
  transition: transform .16s ease;
}
details.settings-section-card:not([open]) > summary::after { transform: rotate(-90deg); }
details.settings-section-card.is-advanced:not([open]) { background: #fbfcfe; }
details.settings-section-card .settings-section-head > span:first-child { display: grid; gap: .12rem; }
details.settings-section-card .settings-section-head small { color: var(--muted, #667085); font-weight: 500; }
details.settings-section-card:not([open]) .settings-section-head { border-bottom: 0; }

/* Searchable API guide */
.api-guide-filter {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) auto;
  gap: 8px 10px;
  align-items: end;
  margin-bottom: 10px;
  padding: 10px 12px;
}
.api-guide-filter label { display: grid; gap: 4px; margin: 0; }
.api-guide-filter label > span { color: var(--admin-ink); font-size: .75rem; font-weight: 650; }
.api-guide-filter input { min-height: 38px; }
.api-guide-filter small { grid-column: 1 / -1; color: var(--admin-muted); font-size: .69rem; }
.api-reference-card[hidden], .api-endpoint-table tr[hidden] { display: none !important; }
@media (max-width: 680px) {
  .api-guide-filter { grid-template-columns: 1fr; }
  .api-guide-filter .button { width: 100%; }
  .api-guide-filter small { grid-column: auto; }
}

/* 0.9.4 HighLevel setup, tenant branding and legal links. */

/* Keep link text readable when anchors are presented as dark/primary buttons. */
body.admin-page a.button:not(.ghost),
body.admin-page a.button.primary,
body.admin-page a.button.secondary,
body.admin-page .button.primary,
body.admin-page .button.secondary,
body.admin-page button.primary,
body.admin-page button.secondary,
body.admin-page button.danger,
body.admin-page .button.danger {
  color: #fff !important;
}
body.admin-page a.button:not(.ghost):hover,
body.admin-page a.button.primary:hover,
body.admin-page a.button.secondary:hover { color: #fff !important; }
body.admin-page a.button.ghost,
body.admin-page button.ghost,
body.admin-page .button.ghost { color: var(--admin-blue) !important; }
body.admin-page .admin-logout { color: #fff !important; }

/* Brand presentation. Logos remain proportional and are served by /brand/{kind}. */
.admin-brand-logo-wrap {
  width: 42px;
  height: 38px;
  flex: 0 0 42px;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.admin-brand-logo { display: block; max-width: 42px; max-height: 38px; width: auto; height: auto; object-fit: contain; }
.admin-brand-copy { min-width: 0; }
.admin-legal-links { display: flex; flex-wrap: wrap; gap: 4px 9px; margin-top: 9px; }
.admin-legal-links a { color: #aebed4 !important; font-size: .62rem; text-decoration: none; }
.admin-legal-links a:hover { color: #fff !important; text-decoration: underline; }

.portal-brandbar {
  min-height: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px 4px;
}
.portal-brand-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #172033;
  text-decoration: none;
}
.portal-brand-logo { display: block; width: auto; height: auto; max-width: min(270px, 72vw); max-height: 52px; object-fit: contain; }
.portal-brand-fallback {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: #fff;
  background: linear-gradient(135deg, #5d91dc, #1d4ed8);
  font-weight: 800;
}
.public-brand-link { display: inline-flex; align-items: center; gap: 8px; margin-left: 0 !important; }
.public-brand-link img { display: block; max-height: 38px; max-width: 230px; object-fit: contain; }
.public-legal-footer { padding: 14px 18px 24px; text-align: center; }
.public-legal-footer nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; }
.public-legal-footer a { color: #526174; font-size: .75rem; text-decoration: none; }
.public-legal-footer a:hover { color: #1d4ed8; text-decoration: underline; }
.umh-legal-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 9px; margin: -5px 0 3px; padding-left: 30px; color: #667085; font-size: .78rem; }
.umh-legal-inline a { font-weight: 650; }

.admin-auth-page { background: #101a2d; }
.auth-shell { width: min(460px, 100%); display: grid; gap: 10px; }
.auth-shell .auth-card { width: 100%; margin: 0; }
.auth-brand-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 66px;
  padding: 10px 16px;
  color: #fff;
}
.auth-brand-panel img { display: block; max-width: min(260px, 70vw); max-height: 52px; object-fit: contain; }
.auth-brand-panel strong { font-size: 1.1rem; }
.auth-brand-panel small { color: #acbbd0; }
.auth-legal-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px 13px; }
.auth-legal-links a { color: #b4c2d6; font-size: .7rem; text-decoration: none; }
.auth-legal-links a:hover { color: #fff; text-decoration: underline; }

/* HighLevel configuration data loader. */
.highlevel-setup-panel { border-color: #bfd0e5 !important; background: linear-gradient(180deg, #f8fbff, #fff); }
.highlevel-setup-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.highlevel-setup-head p { max-width: 820px; }
.highlevel-status-strip { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 10px; }
.highlevel-resource-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.highlevel-resource-card {
  min-width: 0;
  display: grid;
  gap: 5px;
  align-content: start;
  padding: 9px 10px;
  border: 1px solid #d7e0eb;
  border-left: 4px solid #c18b1c;
  border-radius: 9px;
  background: #fff;
}
.highlevel-resource-card.good { border-left-color: var(--admin-good); }
.highlevel-resource-card.warning { border-left-color: #d99318; }
.highlevel-resource-card.bad { border-left-color: var(--admin-bad); }
.highlevel-resource-card > div { display: grid; gap: 1px; }
.highlevel-resource-card strong { color: var(--admin-text); font-size: .75rem; }
.highlevel-resource-card small { min-width: 0; color: var(--admin-muted); font-size: .63rem; overflow-wrap: anywhere; }
.compact-notice { margin: 7px 0; padding: 7px 9px; font-size: .72rem; }
.remote-select-hint { display: block; margin-top: 4px; color: #66788f; font-size: .64rem; }

/* HighLevel contact-field creation. */
.crm-field-creation-panel { border-top: 1px solid #edf1f5; padding: 11px 12px 13px; background: #fbfcfe; }
.crm-field-creation-panel h3 { margin: 0 0 4px; }
.crm-field-creation-panel > p { margin: 0 0 9px; color: var(--admin-muted); font-size: .72rem; }
.recommended-field-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.recommended-field-card {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
  gap: 7px;
  padding: 8px 9px;
  border: 1px solid #dce4ee;
  border-radius: 8px;
  background: #fff;
}
.recommended-field-card > div { min-width: 0; display: grid; gap: 1px; }
.recommended-field-card strong { font-size: .72rem; }
.recommended-field-card code { width: fit-content; max-width: 100%; overflow-wrap: anywhere; font-size: .62rem; }
.recommended-field-card form { margin: 0; }
.custom-field-builder { margin-top: 9px; padding-top: 9px; border-top: 1px dashed #ccd7e4; }
.custom-field-builder h3 { margin: 0 0 5px; }
.inline-form-grid { display: grid; grid-template-columns: 1fr .75fr 1.2fr auto; gap: 7px; align-items: end; }
.inline-form-grid label { gap: 3px; color: #53647a; font-size: .67rem; }
.inline-form-grid button { min-height: 36px; }

/* Branding previews. */
.branding-upload-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.branding-upload-card { display: grid; gap: 7px; padding: 11px; border: 1px solid #d9e2ed; border-radius: 10px; background: #fff; }
.branding-upload-card.is-dark-preview { background: #17243a; border-color: #273955; color: #fff; }
.branding-upload-card h3 { margin: 0; }
.branding-upload-card.is-dark-preview h3,
.branding-upload-card.is-dark-preview p { color: #fff; }
.branding-upload-card p { margin: 0; color: var(--admin-muted); font-size: .72rem; }
.branding-preview {
  min-height: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 12px;
  border: 1px dashed #c7d2df;
  border-radius: 9px;
  background: #f8fafc;
}
.is-dark-preview .branding-preview { border-color: #536984; background: #101a2b; }
.branding-preview img { display: block; max-height: 70px; max-width: min(330px, 100%); object-fit: contain; }
.branding-fallback-mark { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; background: #2b64b6; color: #fff; font-weight: 800; }
.branding-upload-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; align-items: end; }
.branding-upload-form input[type="file"] { min-width: 0; padding: .43rem; font-size: .7rem; background: #fff; color: #172033; }
.branding-upload-card form { margin: 0; }

@media (max-width: 1180px) {
  .highlevel-resource-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .recommended-field-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inline-form-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 760px) {
  .highlevel-setup-head { flex-direction: column; }
  .highlevel-setup-head form,
  .highlevel-setup-head button { width: 100%; }
  .highlevel-resource-grid,
  .recommended-field-grid,
  .branding-upload-grid,
  .inline-form-grid { grid-template-columns: 1fr; }
  .recommended-field-card { grid-template-columns: 1fr; }
  .recommended-field-card button { width: 100%; }
  .branding-upload-form { grid-template-columns: 1fr; }
  .branding-upload-form button { width: 100%; }
  .portal-brandbar { min-height: 54px; }
  .portal-brand-logo { max-height: 44px; }
  .umh-legal-inline { padding-left: 0; }
}

/* 0.9.6 integration credential hardening and authenticated health checks. */
.integration-auth-state {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  margin: 9px 0;
  padding: 9px 10px;
  border: 1px solid #d8e1ec;
  border-left-width: 4px;
  border-radius: 9px;
  background: #f8fafc;
}
.integration-auth-state.auth-good { border-left-color: var(--admin-good); background: #f4fbf7; }
.integration-auth-state.auth-warning { border-left-color: #d99318; background: #fffaf0; }
.integration-auth-state.auth-bad { border-left-color: var(--admin-bad); background: #fff6f5; }
.integration-auth-state.auth-neutral { border-left-color: #8b9aaf; }
.integration-auth-state strong { color: var(--admin-text); font-size: .75rem; }
.integration-auth-state p { margin: 2px 0 0; color: var(--admin-muted); font-size: .68rem; line-height: 1.42; }
.integration-auth-state small { display: block; margin-top: 4px; color: #5c6879; font-size: .63rem; line-height: 1.4; }
.integration-auth-meta {
  min-width: 150px;
  display: grid;
  gap: 3px;
  justify-items: end;
  color: #66768a;
  font-size: .61rem;
  text-align: right;
}
.integration-auth-meta a { font-weight: 700; }
.environment-health-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin: 7px 0 9px;
}
.environment-health-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  padding: 7px 8px;
  border: 1px solid #dce4ed;
  border-radius: 8px;
  background: #fbfcfe;
}
.environment-health-item small { color: #68778a; font-size: .6rem; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.credential-input-hint {
  display: block;
  margin-top: 5px;
  color: #5e6f84;
  font-size: .64rem;
  line-height: 1.42;
}
.credential-input-hint code { font-size: .61rem; }
.credential-health-inline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px 10px;
  margin-top: 7px;
  padding: 7px 8px;
  border: 1px solid #d8e1ec;
  border-left-width: 4px;
  border-radius: 8px;
  background: #f8fafc;
  font-size: .63rem;
}
.credential-health-inline.status-good { border-left-color: var(--admin-good); background: #f4fbf7; }
.credential-health-inline.status-warning { border-left-color: #d99318; background: #fffaf0; }
.credential-health-inline.status-bad { border-left-color: var(--admin-bad); background: #fff6f5; }
.credential-health-inline > div { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 7px; }
.credential-health-inline > div:nth-child(2) { justify-content: flex-end; text-align: right; }
.credential-health-inline strong { color: var(--admin-text); }
.credential-health-inline code { font-size: .6rem; }
.credential-health-inline p { grid-column: 1 / -1; margin: 0; color: var(--admin-muted); line-height: 1.4; }
.credential-health-inline > a { grid-column: 1 / -1; width: fit-content; font-weight: 700; }
.integration-log-classification {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 0 10px 7px;
}
.guidance-inline {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 7px;
  margin: 0 10px 8px;
  padding: 7px 9px;
  border-left: 3px solid #d99318;
  border-radius: 6px;
  background: #fff9eb;
  color: #5d6674;
  font-size: .67rem;
  line-height: 1.42;
}
.guidance-inline strong { color: #8a5b09; }
.integration-credential-guide-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.integration-credential-guide-card {
  display: grid;
  gap: 5px;
  padding: 10px;
  border: 1px solid #d9e2ed;
  border-radius: 9px;
  background: #fff;
}
.integration-credential-guide-card h3 { margin: 0; font-size: .82rem; }
.integration-credential-guide-card p,
.integration-credential-guide-card li { color: var(--admin-muted); font-size: .68rem; line-height: 1.42; }
.integration-credential-guide-card ul { margin: 0; padding-left: 17px; }
.integration-credential-guide-card code { overflow-wrap: anywhere; }
.integration-test-table td:first-child { font-weight: 700; }
.integration-test-table code { font-size: .64rem; }

@media (max-width: 960px) {
  .integration-credential-guide-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .integration-auth-state { grid-template-columns: 1fr; }
  .integration-auth-meta { min-width: 0; justify-items: start; text-align: left; }
  .environment-health-grid,
  .integration-credential-guide-grid { grid-template-columns: 1fr; }
  .credential-health-inline { grid-template-columns: 1fr; }
  .credential-health-inline > div:nth-child(2) { justify-content: flex-start; text-align: left; }
  .guidance-inline { grid-template-columns: 1fr; }
}

/* Moya account-specific diagnostic controls. */
.environment-tools {
  display: grid;
  gap: 8px;
}
.environment-tools .compact-select-form {
  display: grid;
  grid-template-columns: minmax(150px, .8fr) minmax(190px, 1fr);
  gap: 8px;
  align-items: end;
  padding: 8px;
  border: 1px solid #d9e2ed;
  border-radius: 9px;
  background: #f8fafc;
}
.environment-tools .compact-select-form label {
  display: grid;
  gap: 3px;
  margin: 0;
  color: var(--admin-muted, #53647a);
  font-size: .68rem;
}
.environment-tools .compact-select-form select,
.environment-tools .compact-select-form button {
  min-height: 38px;
}
@media (max-width: 760px) {
  .environment-tools .compact-select-form { grid-template-columns: 1fr; }
}

/* 0.9.14 provider-backed portal states and compact parity details. */
.umh-option-btn.is-disabled,
.umh-option-btn:disabled {
  border-style: dashed;
  background: #f7f8fa;
  color: #98a2b3;
  cursor: not-allowed;
  opacity: .78;
}
.umh-option-btn.is-disabled small,
.umh-option-btn:disabled small { color: #98a2b3; }
.umh-confirm-copy { margin: 0 0 10px; color: #475467; font-size: .86rem; line-height: 1.45; }
.umh-provider-note {
  margin: 8px 0;
  padding: 8px 10px;
  border: 1px solid #c9d8ec;
  border-radius: 8px;
  background: #f3f7fc;
  color: #31547f;
  font-size: .8rem;
  line-height: 1.4;
}
.umh-provider-note.is-provider { border-color: #b8d2f0; background: #eff6ff; color: #1e4d8f; }
.umh-provider-note.is-warning { border-color: #fedf89; background: #fffaeb; color: #93370d; }
.umh-meter-balance-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin: 0 0 9px;
}
.umh-meter-balance-grid > div {
  padding: 9px 10px;
  border: 1px solid #e1e7ee;
  border-radius: 9px;
  background: #fff;
}
.umh-meter-balance-grid span { display: block; color: #697586; font-size: .74rem; }
.umh-meter-balance-grid strong { display: block; margin-top: 2px; color: var(--umh-ink); font-size: .96rem; font-weight: 650; }
.umh-history-filter { display: grid !important; grid-template-columns: minmax(95px, auto) minmax(0, 1fr); align-items: center; gap: 8px !important; margin: 0 0 9px; }
.umh-history-filter .umh-input { margin: 0; }
.umh-result-state {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 9px;
  align-items: start;
  margin: 0 0 10px;
  padding: 9px 10px;
  border: 1px solid #abefc6;
  border-radius: 9px;
  background: #ecfdf3;
  color: #067647;
}
.umh-result-state.is-staged { border-color: #b8d2f0; background: #eff6ff; color: #1e4d8f; }
.umh-result-state.is-warning { border-color: #fedf89; background: #fffaeb; color: #93370d; }
.umh-result-state .umh-success-mark {
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  border-radius: 999px;
  background: currentColor;
  color: #fff;
  font-size: .9rem;
  font-weight: 750;
}
.umh-result-state p { margin: 2px 0 0; color: inherit; }
.umh-break-word { overflow-wrap: anywhere; word-break: break-word; }

@media (max-width: 680px) {
  .umh-meter-balance-grid { grid-template-columns: 1fr; }
  .umh-history-filter { grid-template-columns: 1fr; gap: 4px !important; }
}

/* 0.9.15: portal result states preserve JavaScript hook classes so async and
   repeated modal actions can always render into the original result element. */

/* Account-recovery OTP step: centre guidance and code entry without affecting other forms. */
.umh-recovery-otp-card { text-align: center; }
.umh-recovery-otp-card .umh-form-stack { align-items: center; }
.umh-recovery-otp-card .umh-form-stack label { width: min(320px, 100%); text-align: center; }
.umh-recovery-otp-card #umh_recovery_otp { text-align: center; letter-spacing: .34em; font-variant-numeric: tabular-nums; }

/* 0.9.30 account-recovery alignment */
.umh-recovery-shell { text-align: center; }
.umh-recovery-shell .umh-alert { text-align: center; }
.umh-recovery-card { text-align: center; }
.umh-recovery-card .umh-form-stack { align-items: center; }
.umh-recovery-card .umh-form-stack > label { width: min(420px, 100%); text-align: center; }
.umh-recovery-routes { width: min(420px, 100%); margin: .25rem auto 1rem; padding: 1rem; border: 1px solid var(--umh-border, #d8dee8); border-radius: 12px; text-align: left; }
.umh-recovery-routes legend { padding: 0 .5rem; font-weight: 700; text-align: center; }
.umh-recovery-route { display: flex; align-items: center; gap: .65rem; padding: .55rem .4rem; }
.umh-recovery-route input { margin: 0; }

/* 0.9.32 customer-facing authentication and verification polish. */
.umh-required { color: #b42318; font-weight: 800; }
.umh-verify-field { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .65rem; align-items: stretch; }
.umh-verify-field .umh-input { margin: 0; }
.umh-verify-field button { min-width: 92px; white-space: nowrap; }
.umh-field-status { margin: -.1rem 0 .75rem; color: #667085; font-size: .82rem; line-height: 1.4; }
.umh-field-status.is-verified { color: #067647; font-weight: 650; }
.umh-field-status.is-error { color: #b42318; }
.umh-terms-checkline { text-align: left; align-items: flex-start; }
.umh-terms-checkline input { flex: 0 0 auto; margin-top: .25rem; }
.umh-terms-checkline span { flex: 1 1 auto; }
.umh-verification-dialog { width: min(470px, calc(100% - 24px)); }
.umh-verification-body, .umh-recovery-modal-body { text-align: center; }
.umh-verification-body > p, .umh-recovery-modal-body > p { margin-top: 0; }
.umh-verification-body .umh-input,
.umh-recovery-modal-body #umh_recovery_otp { max-width: 260px; margin-inline: auto; text-align: center; letter-spacing: .28em; font-variant-numeric: tabular-nums; font-size: 1.15rem; }
.umh-verification-actions { display: flex; gap: .65rem; justify-content: center; margin-top: 1rem; flex-wrap: wrap; }
.umh-recovery-card .umh-form-stack > label { text-align: left; }
.umh-recovery-card select.umh-input { text-align: left; }
@media (max-width: 560px) {
  .umh-verify-field { grid-template-columns: 1fr; }
  .umh-verify-field button { width: 100%; }
}

/* 0.9.32 customer portal refinements */
.umh-partner-access-notice{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:1rem 0;padding:1rem 1.15rem;border:1px solid rgba(25,118,210,.2);border-radius:16px;background:rgba(232,244,253,.7)}
.umh-partner-access-notice div{display:grid;gap:.25rem}.umh-partner-access-notice span{color:var(--umh-muted,#5f6b7a)}
.umh-balance-hero{display:grid;gap:.25rem;padding:1.25rem;border-radius:18px;background:linear-gradient(135deg,rgba(25,118,210,.1),rgba(0,150,136,.08));border:1px solid rgba(25,118,210,.16)}
.umh-balance-hero span{font-size:.82rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--umh-muted,#5f6b7a)}
.umh-balance-hero strong{font-size:clamp(2rem,6vw,3rem);line-height:1}.umh-balance-hero small{color:var(--umh-muted,#5f6b7a)}
.umh-balance-section{margin-top:1.2rem}.umh-balance-section h3{margin:0 0 .75rem}
.umh-balance-records{display:grid;gap:.8rem}.umh-balance-record{padding:1rem;border:1px solid var(--umh-border,#dfe4ea);border-radius:14px;background:#fff}
.umh-balance-record-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:.75rem}.umh-balance-record-heading div{display:grid;gap:.2rem}
.umh-result-dl-compact{grid-template-columns:minmax(130px,1fr) auto;margin:0}.umh-payment-panel{margin-top:1.25rem;padding:1.1rem;border-radius:16px;border:1px solid rgba(0,150,136,.25);background:rgba(232,250,247,.55)}
.umh-payment-panel[hidden]{display:none}.umh-history-filters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem;margin:0 0 1rem}
.umh-transaction-list{display:grid;gap:.7rem}.umh-transaction-row{padding:.9rem 1rem;border:1px solid var(--umh-border,#dfe4ea);border-left:4px solid #7c8b9a;border-radius:12px;background:#fff}
.umh-transaction-row.is-advance{border-left-color:#1976d2}.umh-transaction-row.is-repayment{border-left-color:#00897b}.umh-transaction-row>div{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:.2rem .8rem}
.umh-transaction-row strong{justify-self:end;font-size:1.05rem}.umh-transaction-row small{grid-column:1/-1;color:var(--umh-muted,#5f6b7a)}.umh-transaction-type{font-weight:700}
.umh-meter-management-row.is-primary-meter{border-color:rgba(25,118,210,.48);box-shadow:0 0 0 3px rgba(25,118,210,.08);background:rgba(239,247,255,.7)}
.umh-quick-action[disabled]{opacity:.58;cursor:not-allowed;filter:saturate(.5)}
@media(max-width:720px){.umh-partner-access-notice{align-items:stretch;flex-direction:column}.umh-history-filters{grid-template-columns:1fr}.umh-balance-record-heading{flex-direction:column}.umh-transaction-row>div{grid-template-columns:1fr}.umh-transaction-row strong{justify-self:start}.umh-transaction-row small{grid-column:auto}}
.channel-master-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:.75rem}.channel-master-card{display:flex;flex-direction:column;gap:.25rem;padding:1rem;border:1px solid #d9e2ec;border-radius:12px;background:#fff;text-decoration:none;color:inherit}.channel-master-card:hover,.channel-master-card.is-active{border-color:#1d4ed8;box-shadow:0 4px 14px rgba(15,23,42,.08)}.channel-master-card span{font-size:.84rem;color:#64748b}.admin-user-layout .inline-stack{align-items:center;flex-wrap:wrap}

/* Marketplace OAuth installation clarity (POC.5). */
.umh-form-grid > .marketplace-config-wide { grid-column: 1 / -1; }
.marketplace-config-wide small { display: block; margin-top: .35rem; color: var(--admin-muted, #64748b); line-height: 1.45; }

/* RC2 customer-channel promotion */
.umh-channel-promotion{margin:1rem 0 1.25rem;padding:1rem;border:1px solid var(--umh-border,#dbe3ec);border-radius:16px;background:#f8fafc}.umh-channel-promotion h3{margin:0 0 .75rem}.umh-channel-promotion-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem}.umh-channel-promotion-card{display:flex;flex-direction:column;gap:.35rem;padding:.85rem;border:1px solid var(--umh-border,#dbe3ec);border-radius:12px;background:#fff}.umh-channel-promotion-card span{font-size:.9rem;color:#536273}.umh-channel-promotion-card a{font-weight:700}.umh-channel-promotion-card code{font-size:1rem;font-weight:700}@media(max-width:760px){.umh-channel-promotion-grid{grid-template-columns:1fr}}


/* RC3 FAQ editor, meter history and portal presentation */
.faq-table-editor{display:grid;gap:.85rem}.faq-table-storage{display:none}
.faq-table-head,.faq-table-row{display:grid;grid-template-columns:minmax(180px,.8fr) minmax(260px,1.5fr) minmax(180px,.9fr) auto;gap:.65rem;align-items:start}
.faq-table-head{padding:0 .25rem;color:#475569;font-size:.82rem}.faq-table-row{padding:.75rem;border:1px solid #dbe3ec;border-radius:12px;background:#f8fafc}.faq-table-row textarea{width:100%;min-height:74px;resize:vertical}
.umh-channel-icon{display:grid;place-items:center;width:2.2rem;height:2.2rem;border-radius:12px;background:#132238;color:#fff;font-weight:900}
.umh-meter-management-row.is-archived{opacity:.64;background:#f1f3f5;border-style:dashed;filter:saturate(.55)}.umh-meter-management-row.is-archived .umh-meter-label-input{background:#e9ecef}.umh-status-badge.is-muted{background:#e5e7eb;color:#475569}.umh-meter-actions .is-warning{border-color:#d97706;color:#9a3412}
.umh-transaction-row.is-advance{background:linear-gradient(90deg,rgba(25,118,210,.08),#fff 28%)}.umh-transaction-row.is-repayment{background:linear-gradient(90deg,rgba(0,137,123,.09),#fff 28%)}.umh-transaction-row.is-advance .umh-transaction-type{color:#1565c0}.umh-transaction-row.is-repayment .umh-transaction-type{color:#00796b}
.umh-portal-version{text-align:center;color:#7b8794;font-size:.72rem;padding:.75rem 1rem 1.25rem}
@media(max-width:900px){.faq-table-head{display:none}.faq-table-row{grid-template-columns:1fr}.faq-table-row textarea{min-height:68px}}


/* RC5 field validation and FAQ length guidance */
.setting-row.is-invalid-setting{border:2px solid #c62828;background:#fff5f5;box-shadow:0 0 0 3px rgba(198,40,40,.08)}
.setting-row.is-invalid-setting .setting-title-line label{color:#a61b1b}
.setting-inline-error{display:block;margin-top:.55rem;color:#a61b1b;font-weight:700}
.setting-row [aria-invalid="true"]{border-color:#c62828!important;box-shadow:0 0 0 2px rgba(198,40,40,.12)}
.faq-ussd-control{display:grid;gap:.35rem}.faq-ussd-control small{color:#607080;text-align:right}
.faq-ussd-control small.is-near-limit{color:#a15c00;font-weight:700}.faq-ussd-control small.is-at-limit{color:#b71c1c}