:root {
  color-scheme: dark;
  --background: #09090b;
  --surface: #0b0b0d;
  --surface-2: #0d0d10;
  --surface-3: #111114;
  --raised: #17171b;
  --border: rgba(255,255,255,.075);
  --border-row: rgba(255,255,255,.052);
  --border-strong: rgba(255,255,255,.13);
  --border-hover: rgba(255,255,255,.22);
  --text: #fafafa;
  --text-2: #e4e4e7;
  --text-3: #a1a1aa;
  --text-4: #8a8a93;
  --text-5: #94949d;
  --text-6: #85858e;
  --green: #34d399;
  --amber: #fbbf24;
  --red: #f87171;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-family: var(--sans);
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--background); }
body { margin: 0; min-width: 320px; min-height: 100vh; background: var(--background); color: var(--text); }
button, input, select { font: inherit; }
button:focus-visible, input:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
button:disabled { cursor: default; opacity: .42; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 132px minmax(0, 1fr); }
.rail { position: sticky; top: 0; z-index: 5; width: 132px; height: 100vh; display: flex; flex-direction: column; border-right: 1px solid var(--border); padding: 24px 10px 14px; background: var(--surface); }
.wordmark { margin: 0 10px 6px; color: var(--text); font: 650 14px/1 var(--mono); letter-spacing: .1em; }
.surface-label { margin: 2px 10px 22px; color: var(--text-6); font: 500 7.5px/1.3 var(--mono); letter-spacing: .1em; }
.app-shell[data-surface="operator"] .surface-label { color: rgba(251,191,36,.65); }
.rail nav { display: grid; gap: 3px; }
.nav-link { position: relative; width: 100%; min-height: 35px; display: flex; align-items: center; gap: 8px; border: 0; border-radius: 6px; padding: 0 9px; background: transparent; color: var(--text-5); font-size: 10.5px; text-align: left; cursor: pointer; }
.nav-link:hover { color: var(--text-2); background: rgba(255,255,255,.025); }
.nav-link.active { color: var(--text); background: var(--raised); }
.nav-link em { margin-left: auto; min-width: 17px; height: 17px; display: grid; place-items: center; border-radius: 8px; background: rgba(251,191,36,.12); color: var(--amber); font: normal 500 8px var(--mono); }

.page { min-width: 0; }
.page-bar { height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 28px; border-bottom: 1px solid var(--border); }
.page-bar > div:first-child { display: flex; align-items: center; gap: 9px; }
.page-bar strong { font-size: 11.5px; font-weight: 500; }
.quiet, .eyebrow, .card-heading { color: var(--text-6); font: 500 9px/1.2 var(--mono); letter-spacing: .08em; }
.environment { display: flex; align-items: center; gap: 7px; color: var(--text-4); font: 500 9.5px var(--mono); }
.environment > span { width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.app-shell[data-surface="operator"] .environment > span, .warn-environment > span { background: var(--amber); }

.page-content { width: min(1120px, calc(100% - 48px)); margin: 0 auto; padding: 46px 0 72px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.page-actions { display: flex; justify-content: flex-end; }

.card { border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); overflow: hidden; }
.card-heading { min-height: 36px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 14px; border-bottom: 1px solid var(--border); }
.detail-copy { padding: 17px; }
.detail-copy h2 { margin: 0 0 7px; font-size: 14px; font-weight: 600; text-transform: capitalize; }
.detail-copy p { margin: 0; color: var(--text-3); font-size: 10.8px; line-height: 1.58; }

.primary-button, .secondary-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; border-radius: 6px; padding: 7px 10px; font-size: 10.5px; cursor: pointer; }
.primary-button { border: 1px solid var(--text); background: var(--text); color: var(--background); }
.primary-button:hover:not(:disabled) { background: var(--text-2); }
.secondary-button { border: 1px solid var(--border-strong); background: transparent; color: var(--text-3); }
.secondary-button:hover:not(:disabled) { border-color: var(--border-hover); color: var(--text); }
.inline-action { margin: 0 17px 17px; }

.create-connection { margin-top: 20px; display: flex; align-items: end; gap: 8px; padding: 13px; }
.create-connection > div { min-width: 260px; display: grid; gap: 6px; }
.create-connection label, .form-field label { color: var(--text-5); font-size: 9.5px; }
.create-connection input, .create-connection select, .form-field input, .form-field select, .next-action input { border: 1px solid var(--border-strong); border-radius: 6px; outline: 0; padding: 8px 9px; background: var(--surface); color: var(--text-2); font: 10.5px var(--mono); }
.create-connection small { color: var(--text-6); font-size: 8.5px; }
.form-field select { min-height: 34px; }
.create-connection input:focus, .form-field input:focus { border-color: var(--border-hover); }

.target-choice { min-height: 48px; display: flex; align-items: center; gap: 10px; border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; background: transparent; color: var(--text-5); text-align: left; cursor: pointer; }
.target-choice:hover, .target-choice.active { border-color: var(--border-hover); color: var(--text-2); background: var(--surface-3); }
.target-choice > span { display: grid; gap: 3px; }
.target-choice strong { color: inherit; font-size: 10px; font-weight: 500; }
.target-choice small { color: var(--text-6); font: 8.5px var(--mono); }

.master-detail-layout { margin-top: 22px; display: grid; grid-template-columns: minmax(480px, 1.35fr) minmax(310px, .8fr); gap: 16px; align-items: start; }
.data-table { min-width: 0; }
.table-head { min-height: 34px; display: grid; gap: 10px; align-items: center; padding: 0 14px; border-bottom: 1px solid var(--border); color: var(--text-6); font: 500 8px var(--mono); letter-spacing: .08em; }
.connections-head { grid-template-columns: minmax(220px, 1fr) 150px 14px; }
.completion-head, .vendor-head { grid-template-columns: minmax(220px, 1fr) 132px 65px 14px; }
.receipt-head { grid-template-columns: minmax(220px, 1fr) 100px 65px 14px; }
.billing-head { grid-template-columns: minmax(220px, 1fr) 96px 120px 14px; }
.support-head { grid-template-columns: minmax(220px, 1fr) 80px 105px 14px; }

.connection-row, .completion-row, .receipt-row, .vendor-row, .billing-row, .support-row { width: 100%; min-height: 61px; display: grid; gap: 10px; align-items: center; border: 0; border-bottom: 1px solid var(--border-row); padding: 0 14px; background: transparent; color: var(--text-4); text-align: left; cursor: pointer; }
.connection-row { grid-template-columns: minmax(220px, 1fr) 150px 14px; }
.completion-row, .vendor-row { grid-template-columns: minmax(220px, 1fr) 132px 65px 14px; }
.receipt-row { grid-template-columns: minmax(220px, 1fr) 100px 65px 14px; }
.billing-row { grid-template-columns: minmax(220px, 1fr) 96px 120px 14px; }
.support-row { grid-template-columns: minmax(220px, 1fr) 80px 105px 14px; }
.connection-row:last-child, .completion-row:last-child, .receipt-row:last-child, .vendor-row:last-child, .billing-row:last-child, .support-row:last-child { border-bottom: 0; }
.connection-row:hover, .completion-row:hover, .receipt-row:hover, .vendor-row:hover, .billing-row:hover, .support-row:hover, .connection-row.selected, .completion-row.selected, .receipt-row.selected, .vendor-row.selected, .billing-row.selected, .support-row.selected { background: var(--surface-3); }
.connection-row.selected, .completion-row.selected, .receipt-row.selected, .vendor-row.selected, .billing-row.selected, .support-row.selected { box-shadow: inset 2px 0 var(--text-2); }
.row-name { min-width: 0; display: flex; align-items: center; gap: 10px; }
.row-name > span, .receipt-row > span:first-child, .billing-row > span:first-child, .support-row > span:first-child { min-width: 0; display: grid; gap: 4px; }
.row-name strong, .receipt-row strong, .billing-row strong, .support-row strong { overflow: hidden; color: var(--text-2); font: 500 10.5px var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.row-name small, .receipt-row small, .billing-row small, .support-row small { overflow: hidden; color: var(--text-6); font: 8.7px var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.connection-row time, .completion-row time, .receipt-row time, .vendor-row time { color: var(--text-6); font: 9px var(--mono); }
.billing-row code { color: var(--text-4); font: 9px var(--mono); }
.support-row code { color: var(--text-5); font: 8.5px var(--mono); }

.detail-panel { min-width: 0; }
.fact-list { margin: 0; border-top: 1px solid var(--border-row); }
.fact-list > div { min-height: 38px; display: grid; grid-template-columns: 86px 1fr; gap: 10px; align-items: center; padding: 7px 17px; border-bottom: 1px solid var(--border-row); }
.fact-list dt { color: var(--text-6); font-size: 9.3px; }
.fact-list dd { margin: 0; color: var(--text-3); font: 9.3px/1.45 var(--mono); overflow-wrap: anywhere; user-select: text; }
.next-action { margin: 16px 17px; border-left: 2px solid var(--amber); padding-left: 11px; }
.next-action.ok { border-color: var(--green); }
.next-action > span { color: var(--text-6); font: 500 8px var(--mono); letter-spacing: .08em; }
.next-action p { margin: 5px 0 10px; color: var(--text-3); font-size: 10.2px; line-height: 1.5; }
.next-action button { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border-strong); border-radius: 6px; padding: 6px 8px; background: transparent; color: var(--text-3); font-size: 10px; cursor: pointer; }
.next-action button:hover { border-color: var(--border-hover); color: var(--text); }
.next-action label { display: block; margin-bottom: 6px; color: var(--text-5); font-size: 9px; }
.next-action input { width: 100%; margin-bottom: 8px; }
.next-action .button-row { display: flex; flex-wrap: wrap; gap: 7px; }
.next-action .danger-confirm { border-color: var(--red); color: var(--red); }

.status-dot { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: var(--text-5); }
.status-dot.ok { background: var(--green); }
.status-dot.warn { background: var(--amber); }
.status-dot.bad { background: var(--red); }
.status-dot.neutral { background: var(--text-5); }
.badge { width: fit-content; max-width: 100%; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border-strong); border-radius: 4px; padding: 3px 6px; color: var(--text-4); font: 500 8px var(--mono); text-transform: uppercase; white-space: nowrap; }
.badge.ok { border-color: rgba(52,211,153,.25); color: var(--green); background: rgba(52,211,153,.04); }
.badge.warn { border-color: rgba(251,191,36,.28); color: var(--amber); background: rgba(251,191,36,.04); }
.badge.bad { border-color: rgba(248,113,113,.28); color: var(--red); background: rgba(248,113,113,.04); }

.filter-bar { margin-top: 20px; display: flex; align-items: center; gap: 4px; color: var(--text-6); }
.filter-bar > svg { margin-right: 4px; }
.filter-bar button { border: 0; border-radius: 6px; padding: 5px 9px; background: transparent; color: var(--text-5); font-size: 10px; text-transform: capitalize; cursor: pointer; }
.filter-bar button:hover { color: var(--text-2); }
.filter-bar button.active { background: var(--raised); color: var(--text); }
.search-box { display: flex; align-items: center; gap: 8px; border: 1px solid var(--border-strong); border-radius: 6px; padding: 6px 9px; color: var(--text-5); background: var(--surface); }
.search-box input { min-width: 0; width: 100%; min-height: 24px; border: 0; outline: 0; background: transparent; color: var(--text-2); font: 10px var(--mono); }
.search-box input::placeholder { color: var(--text-6); }
.page-search { width: min(360px, 100%); margin-top: 20px; }
.empty-state { margin-top: 20px; min-height: 220px; display: grid; place-items: center; align-content: center; gap: 8px; border: 1px solid var(--border); border-radius: 8px; color: var(--text-5); }
.empty-state strong { color: var(--text-3); font-size: 11.5px; }
.empty-state span { font-size: 10px; }

.integration-steps { margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); list-style: none; }
.integration-steps button { width: 100%; display: flex; align-items: center; gap: 8px; border: 0; border-bottom: 1px solid var(--border-strong); padding: 10px 8px; background: transparent; color: var(--text-6); font-size: 9px; cursor: pointer; }
.integration-steps button > span { width: 22px; height: 22px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid var(--border-strong); border-radius: 50%; font: 8px var(--mono); }
.integration-steps button.active { border-bottom-color: var(--text-2); color: var(--text-2); }
.integration-steps button.done { color: var(--green); }
.developer-grid { margin-top: 14px; display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; }
.setup-card { min-width: 0; }
.connector-card { grid-column: 1 / -1; }
.connector-form { display: grid; grid-template-columns: minmax(240px, 1fr) 180px auto; gap: 10px; align-items: end; padding: 0 17px 17px; }
.connector-form .form-field { padding: 0; }
.connector-scope { display: flex; gap: 7px; align-items: center; min-height: 31px; color: var(--text-4); font-size: 9.5px; white-space: nowrap; }
.connector-list { display: grid; border-top: 1px solid var(--border); }
.connector-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 14px; align-items: center; padding: 13px 17px; border-bottom: 1px solid var(--border); }
.connector-row > div:first-child { min-width: 0; display: grid; gap: 3px; }
.connector-row strong, .connector-row small { overflow-wrap: anywhere; }
.connector-row strong { color: var(--text-2); font: 10px var(--mono); }
.connector-row small { color: var(--text-5); font: 8.5px/1.4 var(--mono); }
.connector-ack { margin-top: 8px; padding: 9px 10px; border: 1px solid var(--border); border-radius: 6px; display: grid; gap: 3px; background: color-mix(in srgb, var(--surface) 86%, transparent); }
.connector-ack span { color: var(--text-5); font: 8px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.connector-ack.empty strong { color: var(--text-4); }
.connector-key-actions { display: flex; gap: 6px; }
.connector-key-actions button { border: 1px solid var(--border-strong); border-radius: 5px; padding: 6px 8px; background: transparent; color: var(--text-4); font-size: 9px; cursor: pointer; }
.connector-key-actions button:disabled { cursor: not-allowed; opacity: .45; }
.connector-key-actions .danger-confirm { border-color: var(--red); color: var(--red); }
.advanced-details { grid-column: 1 / -1; border: 1px solid var(--border); border-radius: 6px; padding: 10px; color: var(--text-4); }
.advanced-details summary { color: var(--text-3); font-size: 10px; cursor: pointer; }
.advanced-details > p { color: var(--text-5); font-size: 9px; line-height: 1.5; }
.advanced-details .copy-block { margin-inline: 0; }
.advanced-details .form-field { margin-top: 10px; }
.copy-block { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 17px 12px; border: 1px solid var(--border-strong); border-radius: 6px; padding: 9px 10px; background: var(--surface); }
.copy-block > div { min-width: 0; display: grid; gap: 4px; }
.copy-block span { color: var(--text-6); font: 500 8px var(--mono); letter-spacing: .08em; }
.copy-block code { color: var(--text-2); font: 9.5px/1.45 var(--mono); overflow-wrap: anywhere; user-select: text; }
.copy-block button { min-height: 24px; display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto; border: 0; background: transparent; color: var(--text-4); font-size: 9.5px; cursor: pointer; }
.copy-block button:hover { color: var(--text); }
.form-field { display: grid; gap: 6px; padding: 0 17px 10px; }
.field-error { margin: -3px 17px 12px; color: var(--red); font-size: 9px; }

.metric-grid { margin-top: 22px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.metric-card { min-height: 112px; display: grid; align-content: center; gap: 7px; padding: 15px; }
.metric-card > span { color: var(--text-5); font-size: 9.5px; }
.metric-card > strong { color: var(--text-2); font: 600 20px var(--mono); letter-spacing: -.04em; }
.metric-card > small { color: var(--text-6); font-size: 8.8px; line-height: 1.45; }
.plan-panel { margin-top: 16px; }
.plan-summary { display: grid; grid-template-columns: repeat(4, 1fr); }
.plan-summary > div { min-height: 82px; display: grid; align-content: center; gap: 6px; padding: 14px; border-right: 1px solid var(--border-row); }
.plan-summary > div:last-child { border-right: 0; }
.plan-summary span { color: var(--text-6); font-size: 9px; }
.plan-summary strong { color: var(--text-2); font-size: 10.5px; font-weight: 500; }

.settings-layout { width: min(900px, 100%); margin-top: 28px; display: grid; grid-template-columns: 165px minmax(0, 1fr); gap: 30px; align-items: start; }
.settings-menu { position: sticky; top: 72px; display: grid; gap: 2px; }
.settings-menu button { min-height: 34px; border: 0; border-radius: 5px; padding: 0 10px; background: transparent; color: var(--text-5); font-size: 10px; text-align: left; cursor: pointer; }
.settings-menu button:hover { color: var(--text-2); background: rgba(255,255,255,.025); }
.settings-menu button.active { color: var(--text); background: var(--raised); }
.settings-content { min-width: 0; }
.settings-panel { min-width: 0; }
.settings-panel > header { padding: 0 0 18px; border-bottom: 1px solid var(--border-strong); }
.settings-panel > header h2 { margin: 0 0 7px; color: var(--text-2); font-size: 17px; font-weight: 600; }
.settings-panel > header p { margin: 0; color: var(--text-5); font-size: 10.5px; line-height: 1.5; }
.settings-form { display: grid; }
.settings-field { min-height: 78px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(210px, 260px); align-items: center; gap: 22px; padding: 14px 0; border-bottom: 1px solid var(--border-row); }
.settings-field > span, .settings-action > span, .setting-toggle > span { display: grid; gap: 4px; }
.settings-field strong, .settings-action strong, .setting-toggle strong { color: var(--text-2); font-size: 10.5px; font-weight: 500; }
.settings-field small, .settings-action small, .setting-toggle small { color: var(--text-6); font-size: 9px; line-height: 1.45; }
.settings-field input, .settings-field select, .settings-inline-form input, .settings-inline-form select { width: 100%; border: 1px solid var(--border-strong); border-radius: 6px; outline: 0; padding: 8px 9px; background: var(--surface); color: var(--text-2); font: 10px var(--mono); }
.settings-field input:focus, .settings-field select:focus, .settings-inline-form input:focus, .settings-inline-form select:focus { border-color: var(--border-hover); }
.settings-field select { appearance: auto; }
.setting-fact { min-height: 48px; display: grid; grid-template-columns: minmax(110px, .7fr) minmax(0, 1.3fr); align-items: center; gap: 14px; padding: 9px 14px; border-bottom: 1px solid var(--border-row); }
.setting-fact:last-child { border-bottom: 0; }
.setting-fact > span { color: var(--text-6); font-size: 9.3px; }
.setting-fact > strong { color: var(--text-3); font: 500 9.3px/1.45 var(--mono); overflow-wrap: anywhere; }
.setting-toggle { min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--border-row); cursor: pointer; }
.setting-toggle:last-child { border-bottom: 0; }
.setting-toggle input { width: 28px; height: 16px; flex: 0 0 auto; accent-color: var(--green); }
.settings-action { min-height: 76px; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--border-row); }
.settings-action em { color: var(--text-5); font: normal 9px var(--mono); white-space: nowrap; }
.settings-action button, .member-row button { border: 1px solid var(--border-strong); border-radius: 6px; padding: 6px 8px; background: transparent; color: var(--text-4); font-size: 9.5px; cursor: pointer; }
.settings-action button:hover, .member-row button:hover { border-color: var(--border-hover); color: var(--text); }
.settings-footer { min-height: 62px; display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding-top: 16px; }
.settings-footer > span { min-width: 60px; display: inline-flex; align-items: center; justify-content: flex-end; gap: 5px; color: var(--green); font-size: 9.5px; }
.settings-notice { display: flex; align-items: center; gap: 7px; margin-top: 14px; border-left: 2px solid var(--green); padding: 8px 10px; background: rgba(52,211,153,.025); color: var(--text-4); font-size: 9.5px; line-height: 1.45; }
.member-list { display: grid; }
.member-row { min-height: 62px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--border-row); }
.member-row > span:first-child { display: grid; gap: 4px; }
.member-row strong { color: var(--text-2); font: 500 10px var(--mono); }
.member-row small, .member-owner { color: var(--text-6); font-size: 9px; }
.member-owner { padding-right: 8px; }
.member-actions { display: flex; align-items: center; gap: 6px; }
.settings-inline-form { display: grid; grid-template-columns: minmax(0, 1fr) 150px auto; align-items: end; gap: 9px; padding: 18px 0 2px; }
.settings-inline-form > div { display: grid; gap: 6px; }
.settings-inline-form label { color: var(--text-5); font-size: 9.5px; }
.settings-inline-form small { color: var(--text-6); font-size: 8.5px; line-height: 1.45; }

.authority-shell { min-height: 100vh; background: var(--background); }
.authority-header { height: 54px; display: grid; grid-template-columns: 150px 1fr auto; align-items: center; gap: 20px; padding: 0 28px; border-bottom: 1px solid var(--border); background: var(--surface); }
.authority-header .wordmark { margin: 0; }
.authority-header > div:nth-child(2) { display: grid; gap: 3px; }
.authority-header strong { font-size: 10.5px; font-weight: 500; }
.authority-brand { display: grid; gap: 3px; }
.authority-brand > strong { overflow: hidden; color: var(--text-2); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.authority-brand > a { display: inline-flex; min-block-size: 24px; align-items: center; color: var(--text-6); font: 7.5px var(--mono); letter-spacing: .06em; text-decoration: none; }
.authority-brand > a:hover { color: var(--text-2); }
.authority-main { width: min(760px, calc(100% - 40px)); margin: 0 auto; padding: 48px 0 72px; }
.authority-title { max-width: 650px; }
.authority-title h1 { margin: 10px 0 9px; font-size: 27px; font-weight: 600; letter-spacing: -.03em; }
.authority-title p { margin: 0; color: var(--text-3); font-size: 12px; line-height: 1.62; }
.authority-steps { margin: 30px 0 14px; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); list-style: none; }
.authority-steps li { position: relative; }
.authority-steps li:not(:last-child)::after { content: ""; position: absolute; top: 12px; left: 50%; right: -50%; height: 1px; background: var(--border-strong); }
.authority-steps button { position: relative; z-index: 1; width: 100%; display: grid; justify-items: center; gap: 6px; border: 0; background: transparent; color: var(--text-6); font-size: 9px; cursor: pointer; }
.authority-steps button > span { width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid var(--border-strong); border-radius: 50%; background: var(--background); font: 500 8px var(--mono); }
.authority-steps button.active { color: var(--text-2); }
.authority-steps button.active > span { border-color: var(--text-3); color: var(--text); }
.authority-steps button.done > span { border-color: rgba(52,211,153,.4); color: var(--green); }
.authority-card { min-height: 460px; display: flex; flex-direction: column; }
.authority-section { flex: 1; padding: 27px 28px 20px; }
.authority-section h2 { margin: 9px 0 8px; font-size: 18px; font-weight: 600; }
.authority-section > p { margin: 0 0 20px; color: var(--text-3); font-size: 11px; line-height: 1.6; }
.authority-actions { display: flex; justify-content: space-between; gap: 10px; padding: 13px 18px; border-top: 1px solid var(--border); }
.review-list { margin: 0; border: 1px solid var(--border); border-radius: 7px; overflow: hidden; }
.review-list > div { min-height: 42px; display: grid; grid-template-columns: 130px 1fr; align-items: center; gap: 12px; padding: 7px 12px; border-bottom: 1px solid var(--border-row); }
.review-list > div:last-child { border-bottom: 0; }
.review-list dt { color: var(--text-6); font-size: 9.5px; }
.review-list dd { margin: 0; color: var(--text-2); font: 9.5px var(--mono); }
.boundary-callout { display: flex; gap: 10px; margin-top: 16px; padding: 12px; border-left: 2px solid var(--green); background: rgba(52,211,153,.035); color: var(--text-3); }
.boundary-callout svg { flex: 0 0 auto; }
.boundary-callout > div { display: grid; gap: 4px; }
.boundary-callout strong { color: var(--text-2); font-size: 10.5px; }
.boundary-callout span { color: var(--text-5); font-size: 9.5px; line-height: 1.5; }
.permission-list { display: grid; gap: 1px; margin-bottom: 16px; border: 1px solid var(--border); border-radius: 7px; overflow: hidden; background: var(--border-row); }
.permission-list > div { display: grid; grid-template-columns: 86px 1fr; gap: 12px; padding: 11px 12px; background: var(--surface-2); }
.permission-list span { color: var(--text-5); font-size: 9.5px; }
.permission-list p { margin: 0; color: var(--text-2); font-size: 10px; line-height: 1.45; }
.authority-section .copy-block { margin-inline: 0; }
.install-facts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.install-facts span { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border); border-radius: 5px; padding: 7px 8px; color: var(--text-4); font-size: 9px; }
.authority-list { margin: 0 0 20px; padding: 0; display: grid; gap: 9px; list-style: none; }
.authority-list li { display: flex; align-items: flex-start; gap: 8px; color: var(--text-3); font-size: 10px; line-height: 1.45; }
.authority-list svg { flex: 0 0 auto; margin-top: 1px; color: var(--green); }
.confirmation { display: flex; align-items: flex-start; gap: 9px; color: var(--text-3); font-size: 10px; line-height: 1.5; cursor: pointer; }
.confirmation input { margin-top: 2px; accent-color: var(--text); }
.authority-section .confirmation + .inline-action { margin: 14px 0 0; }
.authority-section .copy-block + .inline-action, .authority-section .manage-health + .inline-action { margin: 0 0 16px; }
.authority-section .button-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.submission-result { display: flex; gap: 10px; padding: 12px; border: 1px solid rgba(52,211,153,.22); border-radius: 7px; color: var(--green); background: rgba(52,211,153,.035); }
.submission-result > div { display: grid; gap: 4px; }
.submission-result strong { font-size: 10.5px; }
.submission-result span { color: var(--text-4); font-size: 9.5px; line-height: 1.45; }
.manage-health { margin-bottom: 16px; border: 1px solid var(--border); border-radius: 7px; overflow: hidden; }
.manage-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 16px; }
.manage-actions button { min-height: 58px; display: flex; align-items: center; gap: 9px; border: 1px solid var(--border-strong); border-radius: 6px; padding: 10px; background: transparent; color: var(--text-5); text-align: left; cursor: pointer; }
.manage-actions button:hover { border-color: var(--border-hover); color: var(--text-2); }
.manage-actions button > span { display: grid; gap: 3px; }
.manage-actions strong { color: var(--text-2); font-size: 9.8px; font-weight: 500; }
.manage-actions small { color: var(--text-6); font-size: 8.4px; line-height: 1.35; }
.portal-footnote { display: flex; justify-content: center; align-items: center; gap: 7px; margin: 15px 0 0; color: var(--text-6); font-size: 8.8px; }

.system-list, .usage-table, .audit-table { margin-top: 16px; }
.system-head { grid-template-columns: minmax(220px, 1fr) 110px 90px; }
.system-component { min-height: 58px; display: grid; grid-template-columns: minmax(220px, 1fr) 110px 90px; gap: 10px; align-items: center; padding: 0 14px; border-bottom: 1px solid var(--border-row); }
.system-component:last-child { border-bottom: 0; }
.system-component > span:first-child { display: grid; gap: 4px; }
.system-component strong { color: var(--text-2); font-size: 10.5px; font-weight: 500; }
.system-component small { color: var(--text-6); font-size: 8.8px; }
.system-component code { color: var(--text-4); font: 9px var(--mono); }
.usage-head, .usage-row { grid-template-columns: minmax(200px, 1fr) 110px 100px 180px; }
.usage-row { min-height: 56px; display: grid; gap: 10px; align-items: center; padding: 0 14px; border-bottom: 1px solid var(--border-row); color: var(--text-4); font-size: 9.5px; }
.usage-row:last-child { border-bottom: 0; }
.usage-row strong { color: var(--text-2); font-size: 10px; font-weight: 500; }
.usage-row code { color: var(--text-3); font: 9px var(--mono); }
.usage-meter { position: relative; height: 6px; border-radius: 3px; background: var(--raised); }
.usage-meter i { display: block; height: 100%; border-radius: inherit; background: var(--text-4); }
.usage-meter em { position: absolute; right: 0; top: -16px; color: var(--text-6); font: normal 8px var(--mono); }
.integration-banner { margin-top: 22px; min-height: 58px; display: grid; grid-template-columns: 20px 1fr auto; align-items: center; gap: 10px; border: 1px solid rgba(251,191,36,.2); border-radius: 7px; padding: 10px 13px; background: rgba(251,191,36,.03); color: var(--amber); }
.integration-banner > div { display: grid; gap: 3px; }
.integration-banner strong { color: var(--text-2); font-size: 10.5px; }
.integration-banner span { color: var(--text-5); font-size: 9px; line-height: 1.45; }
.audit-head, .audit-row { grid-template-columns: minmax(260px, 1.4fr) minmax(150px, .8fr) minmax(130px, .7fr) 70px; }
.audit-row { min-height: 58px; display: grid; gap: 10px; align-items: center; padding: 0 14px; border-bottom: 1px solid var(--border-row); color: var(--text-4); }
.audit-row:last-child { border-bottom: 0; }
.audit-row > span:first-child { min-width: 0; display: flex; align-items: center; gap: 9px; }
.audit-row > span:first-child > span { min-width: 0; display: grid; gap: 4px; }
.audit-row strong { overflow: hidden; color: var(--text-2); font-size: 9.5px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.audit-row small { color: var(--text-6); font: 8px var(--mono); }
.audit-row code { overflow: hidden; color: var(--text-4); font: 8.5px var(--mono); text-overflow: ellipsis; }
.audit-row > span:nth-child(3), .audit-row time { color: var(--text-5); font-size: 8.5px; }

@media (max-width: 900px) {
  .master-detail-layout, .developer-grid { grid-template-columns: 1fr; }
  .metric-grid { grid-template-columns: repeat(2, 1fr); }
  .plan-summary { grid-template-columns: repeat(2, 1fr); }
  .plan-summary > div:nth-child(2) { border-right: 0; }
  .plan-summary > div:nth-child(-n+2) { border-bottom: 1px solid var(--border-row); }
  .connector-form { grid-template-columns: 1fr 1.5fr; }
  .connector-row { grid-template-columns: minmax(0, 1fr) auto; }
  .connector-key-actions { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  .app-shell { display: block; padding-bottom: 60px; }
  .rail { position: fixed; inset: auto 0 0; z-index: 10; width: auto; height: 60px; flex-direction: row; align-items: center; border-top: 1px solid var(--border); border-right: 0; padding: 7px 10px; }
  .wordmark, .surface-label { display: none; }
  .rail nav { width: 100%; display: flex; overflow-x: auto; }
  .nav-link { min-width: 68px; height: 46px; flex-direction: column; justify-content: center; gap: 3px; padding: 3px; font-size: 8.5px; }
  .nav-link em { position: absolute; margin: -24px 0 0 24px; width: 6px; min-width: 6px; height: 6px; padding: 0; color: transparent; background: var(--amber); border-radius: 50%; overflow: hidden; }
  .page-bar { padding-inline: 17px; }
  .page-content { width: min(100% - 34px, 1120px); padding-top: 34px; }
  .master-detail-layout, .developer-grid { grid-template-columns: 1fr; }
  .settings-layout { display: block; }
  .settings-menu { position: static; display: flex; gap: 3px; margin-bottom: 26px; overflow-x: auto; }
  .settings-menu button { flex: 0 0 auto; white-space: nowrap; }
  .authority-header { grid-template-columns: 1fr auto; padding-inline: 18px; }
  .authority-header > .wordmark,
  .authority-header > .authority-brand { display: block; }
  .authority-header > div:nth-child(2) { display: none; }
  .audit-table { overflow-x: auto; }
  .audit-head, .audit-row { min-width: 680px; }
}

@media (max-width: 560px) {
  .page-bar { height: 46px; }
  .quiet { display: none; }
  .page-content { width: min(100% - 26px, 1120px); padding-top: 28px; }
  .table-head { display: none; }
  .connection-row, .completion-row, .receipt-row, .vendor-row, .billing-row, .support-row { grid-template-columns: minmax(0, 1fr) auto 14px; padding-block: 10px; }
  .connection-row time, .completion-row time, .receipt-row time, .vendor-row time, .billing-row code, .support-row code { display: none; }
  .create-connection { align-items: stretch; flex-direction: column; }
  .create-connection > div { min-width: 0; }
  .metric-grid { grid-template-columns: 1fr; }
  .plan-summary { grid-template-columns: 1fr; }
  .plan-summary > div { border-right: 0; border-bottom: 1px solid var(--border-row); }
  .plan-summary > div:last-child { border-bottom: 0; }
  .authority-main { width: min(100% - 24px, 760px); padding-top: 32px; }
  .authority-title h1 { font-size: 23px; }
  .authority-steps button { font-size: 7.5px; }
  .authority-section { padding: 22px 18px 17px; }
  .manage-actions { grid-template-columns: 1fr; }
  .review-list > div, .permission-list > div { grid-template-columns: 1fr; gap: 5px; }
  .copy-block { align-items: flex-start; flex-direction: column; }
  .system-list, .usage-table { overflow-x: auto; }
  .system-head, .system-component { min-width: 570px; }
  .usage-head, .usage-row { min-width: 600px; }
  .integration-banner { grid-template-columns: 20px 1fr; }
  .integration-banner > .badge { grid-column: 2; }
  .settings-field { grid-template-columns: 1fr; gap: 10px; }
  .settings-action { grid-template-columns: 1fr auto; }
  .settings-action > span { grid-column: 1 / -1; }
  .settings-inline-form { grid-template-columns: 1fr; }
  .connector-form, .connector-row { grid-template-columns: 1fr; }
  .connector-key-actions { flex-wrap: wrap; }
}
/* Authentication is intentionally sparse: one task, one form, no marketing. */
.auth-shell { min-height: 100vh; display: grid; place-content: center; gap: 28px; padding: 32px; background: var(--bg, #080b0f); }
.auth-shell > .wordmark { text-align: center; }
.auth-home-link { justify-self: center; text-decoration: none; }
.auth-card { width: min(390px, calc(100vw - 40px)); display: grid; gap: 16px; padding: 24px; border: 1px solid var(--border, #252b33); background: var(--panel, #10141a); }
.auth-copy { margin: 0; color: #9ca5b2; font-size: 12px; line-height: 1.55; }
.auth-card label { display: grid; gap: 7px; color: #9ca5b2; font-size: 12px; }
.auth-card input { width: 100%; min-height: 40px; border: 1px solid #303743; background: #090d12; color: #f2f5f7; padding: 0 11px; }
.auth-mark { display: flex; align-items: center; gap: 9px; color: #e8edf2; font-size: 12px; letter-spacing: .08em; }
.auth-error { border-left: 2px solid #dd6b6b; padding: 10px 12px; background: rgba(221, 107, 107, .08); color: #e7b0b0; font-size: 12px; }
.auth-status { color: #9ca5b2; font-size: 13px; }
.password-rules { margin: -4px 0 0; padding: 0; display: grid; gap: 6px; list-style: none; }
.password-rules li { display: flex; align-items: center; gap: 7px; color: #7f8996; font-size: 11px; }
.password-rules li.met { color: var(--green); }
.mfa-qr { width: 190px; height: 190px; justify-self: center; background: white; padding: 8px; }

button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a[href]:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 2px;
}
.primary-button:focus-visible { outline-color: var(--background); box-shadow: 0 0 0 4px var(--text); }