:root { color-scheme: light; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #172033; background: #f5f7fb; }
* { box-sizing: border-box; }
body { margin: 0; }
.topbar { background: #101827; padding: 18px 32px; }
.topbar-inner { align-items: center; display: flex; justify-content: space-between; margin: 0 auto; max-width: 1440px; }
.topbar-actions { align-items: center; display: flex; gap: 18px; }
.topbar-actions a { color: #cbd5e7; font-size: 13px; }
.topbar-actions form { margin: 0; }
.link-button { background: transparent; border: 0; color: #cbd5e7; cursor: pointer; font: inherit; font-size: 13px; padding: 0; }
.link-button:hover, .topbar-actions a:hover { color: white; }
.brand, a { color: #2458c6; text-decoration: none; }
.brand { color: white; font-weight: 700; letter-spacing: .02em; }
.container { max-width: 1440px; margin: 0 auto; padding: 32px; }
.page-heading, .panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.page-heading { margin-bottom: 24px; }
.eyebrow { color: #63708a; font-size: 12px; font-weight: 700; letter-spacing: .12em; margin: 0 0 6px; text-transform: uppercase; }
h1, h2, h3 { margin-top: 0; }
h1 { font-size: 30px; margin-bottom: 6px; }
h2 { font-size: 18px; margin-bottom: 4px; }
h3 { font-size: 14px; margin-bottom: 8px; }
.muted, small { color: #68748b; }
small { display: block; font-size: 12px; margin-top: 3px; }
.metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin-bottom: 20px; }
.compact-metrics { margin-bottom: 0; }
.summary-tabs { margin-bottom: 0; }
.mapping-sample-table { min-width: 1350px; }
.mapping-sample-table code { overflow-wrap: anywhere; white-space: normal; }
.summary-chart-grid { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 18px; }
.summary-chart { background: #f8fafc; border: 1px solid #e5eaf2; border-radius: 8px; padding: 16px; }
.summary-chart-heading { align-items: baseline; display: flex; justify-content: space-between; gap: 12px; }
.summary-chart-heading h3 { margin: 0; }
.summary-chart-heading span { color: #68748b; font-size: 12px; }
.summary-bar { background: #e5eaf2; display: flex; height: 13px; margin-top: 16px; overflow: hidden; }
.summary-segment { display: block; min-width: 1px; }
.summary-segment.state-both_closed, .summary-dot.state-both_closed { background: #172033; }
.summary-segment.state-settling, .summary-dot.state-settling { background: #f1a85b; }
.summary-segment.state-both_open, .summary-dot.state-both_open { background: #6d8cf0; }
.summary-segment.state-unknown, .summary-dot.state-unknown { background: #a6afbd; }
.summary-segment.settlement-equal, .summary-dot.settlement-equal { background: #3d9b63; }
.summary-segment.settlement-different, .summary-dot.settlement-different { background: #d97979; }
.summary-legend { display: flex; flex-wrap: wrap; gap: 9px 15px; margin-top: 12px; }
.summary-legend span { align-items: center; color: #55627a; display: inline-flex; font-size: 12px; gap: 5px; }
.summary-legend strong { color: #26344b; }
.summary-legend small { display: inline; font-size: 11px; margin: 0; }
.summary-dot { border-radius: 50%; display: inline-block; flex: 0 0 auto; height: 8px; width: 8px; }
.status-indicator { align-items: center; border: 1px solid; border-radius: 50%; display: inline-flex; font-size: 12px; font-weight: 700; height: 20px; justify-content: center; line-height: 1; width: 20px; }
.status-inverse { background: #e9efff; border-color: #cdd9ff; color: #2458c6; }
.status-match { background: #e8f7ed; border-color: #b8e0c5; color: #18733a; }
.status-mismatch { background: #fff0f0; border-color: #f0bcbc; color: #a52929; }
.status-none { background: #f8fafc; border-color: #d8dfeb; color: #9aa6ba; }
.metric, .panel { background: white; border: 1px solid #e1e6f0; border-radius: 10px; box-shadow: 0 2px 8px #1b2c4a08; }
.metric { padding: 18px; }
.metric span { color: #68748b; display: block; font-size: 13px; }
.metric strong { display: block; font-size: 25px; margin-top: 8px; }
.panel { margin-bottom: 20px; overflow: hidden; padding: 22px; }
.panel-heading { margin-bottom: 18px; }
.tabs { margin-bottom: 20px; }
.tab-list { border-bottom: 1px solid #dce3ee; display: flex; gap: 4px; margin-bottom: 20px; overflow-x: auto; }
.tab-button { background: transparent; border: 0; border-bottom: 2px solid transparent; color: #68748b; cursor: pointer; font: inherit; font-size: 13px; font-weight: 600; padding: 11px 14px; white-space: nowrap; }
.tab-button:hover { color: #2458c6; }
.tab-button.active { border-bottom-color: #2458c6; color: #2458c6; }
.tab-panel[hidden] { display: none; }
.narrow { max-width: 720px; }
.table-wrap { margin: 0 0 -22px; overflow-x: auto; }
table { border-collapse: collapse; min-width: 1050px; width: 100%; }
.compact-table { min-width: 0; }
th, td { border-top: 1px solid #edf0f5; padding: 13px 16px; text-align: left; vertical-align: top; }
th { color: #68748b; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
td { font-size: 13px; }
.nowrap { white-space: nowrap; }
.actions { white-space: nowrap; }
.button { background: #eef2f8; border: 1px solid #d8dfeb; border-radius: 6px; color: #26344b; cursor: pointer; display: inline-block; font: inherit; font-size: 13px; padding: 8px 12px; }
.button:hover { background: #e4eaf4; }
.button.primary { background: #2458c6; border-color: #2458c6; color: white; }
.button.danger { background: #fff0f0; border-color: #f0bcbc; color: #a52929; }
.button.small { font-size: 12px; padding: 5px 9px; }
.badge { background: #eef2f8; border-radius: 999px; color: #55627a; display: inline-block; font-size: 11px; padding: 3px 8px; }
.badge.good { background: #e8f7ed; color: #18733a; }
.badge.prod { background: #e9efff; color: #2458c6; }
.form-grid { align-items: end; display: grid; gap: 14px; grid-template-columns: 1fr 1fr auto; }
.search-form { display: flex; gap: 8px; margin-bottom: 14px; }
.search-form input { flex: 1; min-width: 0; }
label { color: #4d5b73; display: grid; font-size: 12px; font-weight: 600; gap: 6px; }
input { border: 1px solid #ccd5e4; border-radius: 6px; font: inherit; padding: 9px 10px; }
.flash { border-radius: 7px; margin-bottom: 20px; padding: 12px 14px; }
.flash.error, .danger-panel { background: #fff0f0; border: 1px solid #f0bcbc; color: #8b2525; }
.flash.success { background: #e8f7ed; border: 1px solid #b8e0c5; color: #18733a; }
.auth-card { margin: 12vh auto 0; max-width: 440px; }
.auth-form { display: grid; gap: 16px; margin-top: 22px; }
.auth-form .button { justify-self: start; }
.key-created-notice { display: inline-block; max-width: 100%; }
.one-time-key { align-items: center; background: white; border: 1px solid #b8e0c5; border-radius: 6px; display: flex; gap: 12px; margin-top: 10px; max-width: 100%; padding: 10px; width: fit-content; }
.one-time-key code { overflow-wrap: anywhere; }
.copy-icon-button { align-items: center; background: transparent; border: 0; border-radius: 5px; color: #18733a; cursor: pointer; display: inline-flex; flex: 0 0 auto; justify-content: center; padding: 5px; }
.copy-icon-button:hover, .copy-icon-button.copied { background: #e8f7ed; color: #125b2e; }
.copy-icon-button svg { fill: currentColor; height: 17px; width: 17px; }
.account-panel { max-width: 760px; }
.api-key-row { align-items: center; display: flex; gap: 18px; justify-content: space-between; }
.api-key-row p { margin: 6px 0 0; }
.two-col { display: grid; gap: 20px; grid-template-columns: 1fr 1fr; }
.compact-cols { gap: 14px; }
.logic-compare { align-items: stretch; display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr) 110px minmax(0, 1fr); }
.logic-endpoint { min-width: 0; }
.logic-operator { align-items: center; color: #2458c6; display: flex; flex-direction: column; gap: 5px; justify-content: center; text-align: center; }
.logic-operator strong { background: #e9efff; border: 1px solid #cdd9ff; border-radius: 999px; font-size: 18px; min-width: 48px; padding: 9px 12px; }
.logic-operator span { color: #68748b; font-size: 11px; line-height: 1.2; }
.field-card { border-top: 1px solid #edf0f5; padding: 18px 0; }
.field-card:first-of-type { border-top: 0; padding-top: 0; }
.field-heading, .trace-run-heading, .trace-event-heading, .trace-tool { align-items: center; display: flex; gap: 12px; justify-content: space-between; }
.field-heading h3 { margin-bottom: 3px; }
.extraction-card, .filter-summary { background: #f8fafc; border: 1px solid #e5eaf2; border-radius: 8px; padding: 14px; }
.extraction-card h4, .filter-summary h4 { color: #4d5b73; font-size: 11px; letter-spacing: .06em; margin: 0 0 11px; text-transform: uppercase; }
.spec-row { align-items: baseline; border-top: 1px solid #e8edf4; display: flex; gap: 12px; justify-content: space-between; padding: 8px 0; }
.spec-row:first-of-type { border-top: 0; padding-top: 0; }
.spec-row > span:first-child { color: #68748b; font-size: 12px; }
.spec-row > span:last-child, .spec-row > code { text-align: right; }
.code-wrap { max-width: 70%; overflow-wrap: anywhere; white-space: normal; }
.chip-list { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.chip { border-radius: 999px; display: inline-block; font-size: 12px; padding: 5px 9px; }
.chip.include { background: #e8f7ed; color: #18733a; }
.chip.exclude { background: #fff0f0; color: #a52929; }
.clean-list { line-height: 1.55; margin: 0; padding-left: 20px; }
.map-card .table-wrap { margin-bottom: -22px; }
.map-table { table-layout: fixed; width: min(100%, 760px); }
.map-table th, .map-table td { white-space: normal; word-break: break-word; }
.map-table code { overflow-wrap: anywhere; white-space: normal; }
.sort-button { background: transparent; border: 0; color: inherit; cursor: pointer; font: inherit; font-size: inherit; letter-spacing: inherit; padding: 0; text-align: left; text-transform: inherit; }
.sort-button:hover { color: #2458c6; }
.sort-button span { color: #9aa6ba; margin-left: 5px; }
.map-resolution-table th:nth-child(3), .map-resolution-table td:nth-child(3) { width: 110px; }
.map-resolution-table th:nth-child(4), .map-resolution-table td:nth-child(4) { width: 80px; }
.map-method.hardcoded { background: #fff3df; color: #8a5b00; }
.map-method.exact { background: #eef2f8; color: #55627a; }
.map-method.fuzzy { background: #e8f7ed; color: #18733a; }
.fuzzy-resolution-stats { display: grid; gap: 8px; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: -2px 0 16px; }
.fuzzy-resolution-stat { background: #f8fafc; border: 1px solid #e5eaf2; border-radius: 7px; padding: 10px 12px; }
.fuzzy-resolution-stat span { color: #68748b; display: block; font-size: 11px; }
.fuzzy-resolution-stat strong { display: block; font-size: 18px; margin-top: 4px; }
.map-pagination { align-items: center; display: flex; justify-content: space-between; margin-top: 14px; }
.map-filter-form { align-items: end; display: flex; flex-wrap: wrap; gap: 12px; margin: -2px 0 16px; }
.map-filter-form label { font-size: 11px; gap: 5px; }
.map-filter-form select { min-width: 130px; }
.map-index-table { table-layout: fixed; width: 100%; }
.map-index-table th:nth-child(1), .map-index-table td:nth-child(1) { width: 18%; }
.map-index-table th:nth-child(2), .map-index-table td:nth-child(2) { width: 25%; }
.map-index-link { display: block; }
.map-mode { display: block; margin-top: 4px; }
.map-field-pair { overflow-wrap: anywhere; }
.status-bad { color: #a52929; font-weight: 600; }
.map-detail-layout { align-items: stretch; display: grid; gap: 20px; grid-template-columns: minmax(250px, 1fr) minmax(0, 2fr); height: calc(100vh - 190px); }
.map-detail-layout > .panel { margin-bottom: 0; min-height: 0; min-width: 0; }
.map-detail-header-panel { min-width: 0; }
.map-detail-heading { display: block; margin-bottom: 24px; }
.map-detail-header-metrics { gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }
.map-detail-header-metrics .metric { min-width: 0; padding: 13px 14px; }
.map-detail-header-metrics .metric span { font-size: 10px; line-height: 1.2; }
.map-detail-header-metrics .metric strong { font-size: 20px; margin-top: 6px; }
.map-detail-values-panel { display: flex; flex-direction: column; overflow: hidden; padding-bottom: 8px; }
.map-detail-values-panel .panel-heading, .map-detail-values-panel .map-filter-form { flex: 0 0 auto; }
.map-detail-values-panel .map-detail-table { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; }
.map-detail-values-panel .table-wrap { flex: 1 1 auto; margin-bottom: 0; min-height: 0; overflow: auto; }
.map-detail-values-panel .map-pagination { flex: 0 0 auto; }
.map-candidate-modal { align-items: center; background: #17203366; display: flex; inset: 0; justify-content: center; padding: 24px; position: fixed; z-index: 20; }
.map-candidate-modal[hidden] { display: none; }
.map-candidate-dialog { background: white; border: 1px solid #dce3ee; border-radius: 6px; box-shadow: 0 18px 50px #1720332e; max-width: 560px; padding: 22px; width: 100%; }
.map-candidate-dialog-heading { align-items: flex-start; display: flex; justify-content: space-between; gap: 16px; }
.map-candidate-dialog-heading h3 { margin-bottom: 4px; }
.map-candidate-dialog .table-wrap { margin: 14px 0 0; }
.map-candidate-table { width: 100%; }
.map-candidates-button { white-space: nowrap; }
.map-split-table { min-width: 680px; }
.map-status.accepted { background: #e8f7ed; color: #18733a; }
.map-status.ambiguous, .map-status.unmatched, .map-status.collision { background: #fff0f0; color: #a52929; }
.map-status.target_missing { background: #fff3df; color: #8a5b00; }
.trace-run { border-top: 1px solid #edf0f5; padding: 18px 0; }
.trace-run:first-of-type { border-top: 0; padding-top: 0; }
.trace-toggle { align-items: center; background: transparent; border: 0; color: inherit; cursor: pointer; display: flex; font: inherit; gap: 12px; justify-content: space-between; padding: 0; text-align: left; width: 100%; }
.trace-toggle:hover .trace-run-heading strong { color: #2458c6; }
.trace-chevron { color: #68748b; font-size: 20px; line-height: 1; }
.trace-toggle.expanded .trace-chevron { transform: rotate(45deg); }
.trace-body { padding-top: 14px; }
.trace-timeline { border-left: 2px solid #e1e7f0; margin: 15px 0 0 5px; padding-left: 17px; }
.trace-event { border-bottom: 1px solid #edf0f5; padding: 0 0 14px; margin-bottom: 14px; }
.trace-event:last-child { border-bottom: 0; margin-bottom: 0; }
.trace-event-heading { font-size: 13px; justify-content: flex-start; }
.trace-event-heading .muted { margin-left: auto; }
.trace-tool { justify-content: flex-start; margin-top: 8px; }
.trace-tool span, .trace-items span, .trace-metric > span { color: #68748b; font-size: 11px; text-transform: capitalize; }
.trace-message, .trace-error { font-size: 13px; margin: 8px 0; }
.trace-error { color: #a52929; }
.trace-items, .trace-metric { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 9px; }
.trace-items > div, .trace-metric > div { display: flex; gap: 6px; }
.trace-items strong, .trace-metric strong { font-size: 12px; font-weight: 600; }
.trace-metric { background: #f8fafc; border-radius: 6px; padding: 8px 10px; }
.trace-metric > span { flex-basis: 100%; }
.danger-badge { background: #fff0f0; color: #a52929; }
.empty { color: #68748b; padding: 28px 16px; text-align: center; }
.public-shell { background: hsl(0 0% 100%); color: hsl(0 0% 3.9%); font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace; font-variant-numeric: tabular-nums; min-height: 100vh; }
html:has(body.public-shell) { background: hsl(0 0% 100%); min-height: 100%; }
.public-shell .topbar { background: transparent; padding: 12px 16px 0; }
.public-shell .topbar-inner { border-bottom: 1px solid hsl(0 0% 89.8%); max-width: 896px; padding-bottom: 12px; }
.public-shell .topbar-left { align-items: center; display: flex; gap: 28px; }
.public-shell .brand { align-items: center; color: hsl(0 0% 3.9%); display: inline-flex; font-size: 20px; gap: 9px; letter-spacing: -.04em; }
.public-shell .brand img { color: hsl(0 0% 3.9%); height: 20px; width: 25px; }
.public-shell .topbar-nav { align-items: center; display: flex; gap: 4px; }
.public-shell .topbar-nav a, .public-shell .topbar-actions a, .public-shell .link-button { border-radius: 2px; color: hsl(0 0% 45.1%); font-size: 14px; padding: 8px 12px; }
.public-shell .topbar-nav a:hover, .public-shell .topbar-actions a:hover, .public-shell .link-button:hover { background: hsl(0 0% 96.1%); color: hsl(0 0% 3.9%); }
.public-shell .container { max-width: none; padding: 0 24px; }
.public-shell .landing { max-width: 896px; }
.public-shell .eyebrow { color: hsl(0 0% 45.1%); font-size: 10px; letter-spacing: .1em; }
.public-shell .landing-hero { padding: 80px 0 56px; }
.public-shell .landing-hero h1 { font-size: clamp(30px, 5vw, 56px); font-weight: 700; letter-spacing: -.028em; line-height: 1.06; margin: 0 0 14px; }
.public-shell .landing-hero h1 span { color: hsl(0 0% 45.1%); }
.public-shell .landing-lede { color: hsl(0 0% 45.1%); font-size: 12px; line-height: 1.75; margin: 0 auto 32px; max-width: 440px; }
.public-shell .landing-exchanges { color: hsl(0 0% 45.1%); font-size: 12px; gap: 9px; }
.public-shell .landing-exchanges .exchange-logo { border-radius: 4px; display: block; height: 20px; object-fit: cover; width: 20px; }
.public-shell .landing-exchanges b { color: hsl(0 0% 89.8%); font-weight: 400; }
.public-shell .landing-actions { margin-top: 32px; }
.public-shell .button { border-radius: 2px; font-size: 14px; font-weight: 500; padding: 8px 12px; }
.public-shell .button.primary { background: hsl(0 0% 9%); border-color: hsl(0 0% 9%); color: hsl(0 0% 98%); }
.public-shell .button.primary:hover { background: hsl(0 0% 9% / .9); }
.public-shell .button:not(.primary) { background: hsl(0 0% 100%); border-color: hsl(0 0% 89.8%); color: hsl(0 0% 9%); }
.public-shell .button:not(.primary):hover { background: hsl(0 0% 96.1%); }
.public-shell .landing-code { border-color: hsl(0 0% 89.8%); border-radius: 6px; box-shadow: none; margin: 32px 0 18px; padding: 0; }
.public-shell .landing-code-heading { background: hsl(0 0% 96.1%); border-color: hsl(0 0% 89.8%); font-size: 11px; padding: 10px 16px; }
.public-shell .landing-code-heading a { color: hsl(0 0% 45.1%); font-size: 11px; }
.public-shell .landing-code pre { background: #1a1b26; color: #c0caf5; padding: 20px 24px; }
.public-shell .landing-code code { color: #c0caf5; font-size: 11.5px; line-height: 1.75; }
.public-shell .landing-code .code-comment { color: #565f89; }
.public-shell .landing-code .code-key { color: #7aa2f7; }
.public-shell .landing-code .code-string { color: #9ece6a; }
.public-shell .landing-code .code-bool { color: #ff9e64; }
.public-shell .landing-section { border-color: hsl(0 0% 89.8%); padding: 20px 0 0; }
.public-shell .landing-section.built-for-section { padding-top: 16px; }
.public-shell .landing-grid { border-color: hsl(0 0% 89.8%); margin-top: 16px; }
.public-shell .landing-grid article { min-height: 0; padding: 32px 20px 32px 0; }
.public-shell .landing-grid article + article { border-color: hsl(0 0% 89.8%); padding-left: 20px; }
.public-shell .landing-grid h2 { font-size: 12px; margin-bottom: 16px; }
.public-shell .landing-grid p { color: hsl(0 0% 45.1%); font-size: 12px; line-height: 1.65; }
.public-shell .landing-card-icon { display: inline-flex; height: 18px; margin-right: 5px; vertical-align: -4px; width: 18px; }
.public-shell .landing-card-icon svg { fill: none; height: 18px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; width: 18px; }
.public-shell .landing-footer { color: hsl(0 0% 45.1%); font-size: 11px; padding: 18px 0; }
.public-shell .landing-footer span:first-child { color: hsl(0 0% 3.9%); }
.public-shell .landing-footer a { color: hsl(0 0% 45.1%); }
.public-shell .landing-footer a:hover { color: hsl(0 0% 3.9%); }
.public-shell .landing-network { border-bottom: 1px solid hsl(0 0% 89.8%); padding: 28px 0 34px; }
.public-shell .landing-network-layout { align-items: start; display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.public-shell .landing-network-layout > * { min-width: 0; max-width: 100%; }
.public-shell .landing-network-table-wrap { border: 1px solid hsl(0 0% 89.8%); min-width: 0; overflow: hidden; }
.public-shell .landing-network-table { border-collapse: collapse; font-size: 12px; min-width: 0; table-layout: fixed; width: 100%; }
.public-shell .landing-network-table th, .public-shell .landing-network-table td { border-bottom: 1px solid hsl(0 0% 89.8%); padding: 13px 14px; text-align: left; white-space: nowrap; }
.public-shell .landing-network-table tr:last-child td { border-bottom: 0; }
.public-shell .landing-network-table th { color: hsl(0 0% 45.1%); font-size: 10px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; white-space: normal; }
.public-shell .landing-network-table th:first-child { width: 50%; }
.public-shell .landing-network-table td:first-child, .public-shell .landing-network-table td small { white-space: normal; }
.public-shell .landing-network-table td:first-child strong, .public-shell .landing-network-table td small { display: block; }
.public-shell .landing-network-table td small { color: hsl(0 0% 45.1%); font-size: 11px; line-height: 1.45; margin-top: 4px; }
.public-shell .landing-network-status { border: 1px solid hsl(0 0% 89.8%); margin-bottom: 18px; padding: 18px; }
.public-shell .landing-network-status-heading strong { font-size: 12px; font-weight: 500; }
.public-shell .landing-network-bar { background: hsl(0 0% 96.1%); display: flex; height: 11px; margin-top: 15px; overflow: hidden; }
.public-shell .landing-network-bar span { display: block; min-width: 1px; }
.public-shell .landing-network-legend { color: hsl(0 0% 45.1%); display: flex; flex-wrap: wrap; font-size: 10px; gap: 14px; margin-top: 10px; }
.public-shell .landing-network-legend span { align-items: center; display: inline-flex; gap: 5px; }
.public-shell .landing-network-dot { border-radius: 50%; display: inline-block; height: 7px; width: 7px; }
.public-shell .landing-network-bar-series.series-1, .public-shell .landing-network-dot.series-1 { background: #172033; }
.public-shell .landing-network-bar-series.series-2, .public-shell .landing-network-dot.series-2 { background: #6d8cf0; }
.public-shell .landing-network-bar-series.series-3, .public-shell .landing-network-dot.series-3 { background: #f1a85b; }
.public-shell .landing-network-bar-series.series-4, .public-shell .landing-network-dot.series-4 { background: #72b68a; }
.public-shell .landing-network-bar-series.series-5, .public-shell .landing-network-dot.series-5 { background: #a888d8; }
.public-shell .landing-network-bar-series.series-6, .public-shell .landing-network-dot.series-6 { background: #d97979; }
.public-shell .landing-network-bar-series.series-7, .public-shell .landing-network-dot.series-7 { background: #5fb4b4; }
.public-shell .landing-network-bar-series.series-8, .public-shell .landing-network-dot.series-8 { background: #c1a154; }
.public-shell .landing-network-bar-series.series-9, .public-shell .landing-network-dot.series-9 { background: #a6afbd; }
.public-shell .landing-network-metrics { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.public-shell .landing-network-metrics div { border: 1px solid hsl(0 0% 89.8%); padding: 18px; }
.public-shell .landing-network-metrics span { color: hsl(0 0% 45.1%); display: block; font-size: 11px; }
.public-shell .landing-network-metrics strong { display: block; font-size: 25px; font-weight: 500; letter-spacing: -.05em; margin-top: 9px; }
.public-shell .landing-network-empty { color: hsl(0 0% 45.1%); font-size: 12px; }
.public-shell .auth-card { background: hsl(0 0% 100%); border: 0; box-shadow: none; margin: 80px auto 0; }
.public-shell .portal-page { margin: 48px auto 80px; max-width: 896px; }
.public-shell .portal-heading { align-items: baseline; border-bottom: 1px solid hsl(0 0% 89.8%); display: flex; justify-content: space-between; margin-bottom: 30px; padding-bottom: 28px; }
.public-shell .portal-heading h1 { font-size: 32px; letter-spacing: -.03em; margin: 0; }
.public-shell .portal-heading > span { color: hsl(0 0% 45.1%); font-size: 14px; }
.public-shell .portal-summary { display: grid; gap: 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 30px; }
.public-shell .portal-card { background: hsl(0 0% 100%); border: 1px solid hsl(0 0% 89.8%); border-radius: 6px; padding: 28px 30px; }
.public-shell .portal-card h2 { align-items: center; display: flex; font-size: 16px; gap: 9px; letter-spacing: -.01em; margin: 0 0 16px; }
.public-shell .portal-card-icon { font-size: 20px; line-height: 1; }
.public-shell .portal-stat-row { color: hsl(0 0% 45.1%); display: flex; font-size: 14px; justify-content: space-between; line-height: 1.85; }
.public-shell .portal-stat-row strong { color: hsl(0 0% 3.9%); font-weight: 400; }
.public-shell .portal-keys { padding: 28px 30px 30px; }
.public-shell .portal-panel-heading { align-items: center; display: flex; justify-content: space-between; margin-bottom: 16px; }
.public-shell .portal-panel-heading h2 { margin: 0; }
.public-shell .portal-panel-heading .button { font-size: 14px; padding: 8px 12px; }
.public-shell .button-icon { font-size: 18px; line-height: 0; vertical-align: -2px; }
.public-shell .portal-table-wrap { border: 1px solid hsl(0 0% 89.8%); border-radius: 4px; overflow-x: auto; }
.public-shell .portal-table { border-collapse: collapse; font-size: 13px; min-width: 700px; width: 100%; }
.public-shell .portal-table th, .public-shell .portal-table td { border-top: 1px solid hsl(0 0% 89.8%); padding: 12px 11px; text-align: left; white-space: nowrap; }
.public-shell .portal-table thead th { border-top: 0; color: hsl(0 0% 45.1%); font-weight: 400; }
.public-shell .portal-table td { color: hsl(0 0% 45.1%); }
.public-shell .portal-table td:first-child { color: hsl(0 0% 3.9%); }
.public-shell .portal-table code { font-size: 13px; }
.public-shell .portal-table form { margin: 0; }
.public-shell .icon-button { align-items: center; background: transparent; border: 0; border-radius: 3px; cursor: pointer; display: inline-flex; height: 28px; justify-content: center; padding: 5px; width: 28px; }
.public-shell .icon-button svg { fill: currentColor; height: 17px; width: 17px; }
.public-shell .danger-icon { color: hsl(0 0% 45.1%); }
.public-shell .danger-icon:hover { background: hsl(0 84.2% 60.2% / .1); color: hsl(0 84.2% 45%); }
.public-shell .portal-empty { margin: 0; }
.public-shell .key-created-notice { border-radius: 6px; font-size: 13px; margin-bottom: 30px; }
.public-shell .one-time-key { border-color: #b8e0c5; border-radius: 4px; font-size: 13px; }
.public-shell .flash { font-size: 13px; }
.landing { margin: 0 auto; max-width: 960px; }
.landing-hero { border-bottom: 1px solid #dce3ee; padding: 58px 20px 54px; text-align: center; }
.landing-hero h1 { font-size: clamp(34px, 6vw, 64px); letter-spacing: -.045em; line-height: 1.02; margin: 10px 0 18px; }
.landing-hero h1 span { color: #68748b; }
.landing-lede { color: #68748b; line-height: 1.7; margin: 0 auto; max-width: 470px; }
.landing-exchanges { align-items: center; color: #68748b; display: flex; gap: 10px; justify-content: center; margin-top: 24px; }
.landing-exchanges .exchange-logo { border-radius: 50%; display: block; height: 23px; object-fit: cover; width: 23px; }
.landing-exchanges b { color: #bcc6d6; font-weight: 400; }
.landing-actions { display: flex; gap: 10px; justify-content: center; margin-top: 28px; }
.landing-code { margin-top: 42px; padding: 0; }
.landing-code-heading { align-items: center; border-bottom: 1px solid #e1e6f0; color: #68748b; display: flex; font-size: 12px; justify-content: space-between; padding: 13px 16px; }
.landing-code-heading a { font-size: 12px; }
.landing-code pre { background: #172033; color: #e8edf6; margin: 0; overflow-x: auto; padding: 25px; }
.landing-code code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; line-height: 1.75; }
.code-comment { color: #8693aa; }
.code-key { color: #9bbcff; }
.code-string { color: #a8e6b3; }
.code-bool { color: #ffbd79; }
.landing-section { border-bottom: 1px solid #dce3ee; padding: 28px 20px 0; }
.landing-grid { border-top: 1px solid #dce3ee; display: grid; margin-top: 14px; }
.landing-grid article { min-height: 130px; padding: 22px 18px 22px 0; }
.landing-grid article + article { border-left: 1px solid #dce3ee; padding-left: 18px; }
.landing-grid h2 { font-size: 14px; margin-bottom: 10px; }
.landing-grid p { color: #68748b; font-size: 13px; line-height: 1.65; margin: 0; }
.landing-grid-three { grid-template-columns: repeat(3, 1fr); }
.landing-grid-four { grid-template-columns: repeat(4, 1fr); }
.landing-footer { align-items: center; color: #68748b; display: flex; font-size: 12px; justify-content: space-between; padding: 22px 20px; }
.landing-footer span:first-child { color: #172033; font-weight: 700; }
@media (max-width: 700px) { .landing-hero { padding: 38px 6px 40px; } .landing-grid-three, .landing-grid-four { grid-template-columns: 1fr 1fr; } .landing-grid article:nth-child(odd) { border-left: 0; padding-left: 0; } .landing-grid article:nth-child(even) { padding-left: 14px; } }
@media (max-width: 480px) { .landing-grid-three, .landing-grid-four { grid-template-columns: 1fr; } .landing-grid article + article { border-left: 0; border-top: 1px solid #dce3ee; padding-left: 0; } .landing-footer { gap: 12px; } }
@media (max-width: 800px) { .container { padding: 20px 14px; } .map-detail-shell { height: auto; overflow: visible; } .metrics, .two-col, .form-grid, .fuzzy-resolution-stats { grid-template-columns: 1fr; } .map-detail-layout { grid-template-columns: 1fr; height: auto; } .map-detail-layout > .panel { margin-bottom: 24px; } .map-detail-values-panel { overflow: visible; } .map-detail-values-panel .map-detail-table { display: block; } .map-detail-values-panel .table-wrap { overflow-x: auto; overflow-y: visible; } .map-detail-header-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; } .logic-compare { grid-template-columns: 1fr; } .logic-operator { flex-direction: row; justify-content: flex-start; } .page-heading { align-items: flex-start; flex-direction: column; } }
@media (max-width: 700px) { .public-shell .topbar-left { gap: 10px; } .public-shell .topbar-nav a, .public-shell .topbar-actions a, .public-shell .link-button { padding-left: 7px; padding-right: 7px; } .public-shell .portal-page { margin-top: 32px; } .public-shell .portal-heading { align-items: flex-start; flex-direction: column; gap: 10px; } .public-shell .portal-summary { grid-template-columns: 1fr; } .public-shell .portal-card, .public-shell .portal-keys { padding: 22px 18px; } }
@media (max-width: 700px) { .public-shell .landing-network-layout { grid-template-columns: 1fr; } .public-shell .landing-network { padding-left: 0; padding-right: 0; } }
@media (max-width: 440px) { .public-shell .landing-network-metrics { grid-template-columns: 1fr; } .public-shell .landing-network-table th, .public-shell .landing-network-table td { padding-left: 10px; padding-right: 10px; } }

/* Keep the admin layout, but use the same visual language as the public pages. */
.admin-shell {
  background: hsl(0 0% 100%);
  color: hsl(0 0% 3.9%);
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace;
  font-variant-numeric: tabular-nums;
  min-height: 100vh;
}
html:has(body.admin-shell) { background: hsl(0 0% 100%); min-height: 100%; }
.admin-shell .topbar { background: transparent; padding: 12px 32px 0; }
.admin-shell .topbar-inner { border-bottom: 1px solid hsl(0 0% 89.8%); max-width: 1440px; padding-bottom: 12px; }
.admin-shell .topbar-left { align-items: center; display: flex; gap: 28px; }
.admin-shell .brand { align-items: center; color: hsl(0 0% 3.9%); display: inline-flex; font-size: 20px; gap: 9px; letter-spacing: -.04em; }
.admin-shell .brand img { height: 20px; width: 25px; }
.admin-shell .topbar-nav { align-items: center; display: flex; gap: 4px; }
.admin-shell .topbar-nav a, .admin-shell .topbar-actions a, .admin-shell .link-button { border-radius: 2px; color: hsl(0 0% 45.1%); font-size: 14px; padding: 8px 12px; }
.admin-shell .topbar-nav a:hover, .admin-shell .topbar-actions a:hover, .admin-shell .link-button:hover { background: hsl(0 0% 96.1%); color: hsl(0 0% 3.9%); }
.admin-shell .container { max-width: 1440px; padding: 40px 32px; }
.map-detail-shell .container { padding-top: 24px; }
.map-detail-shell .map-back-link { margin: 0 0 16px; }
.map-detail-shell { height: 100vh; overflow: hidden; }
.admin-shell a { color: hsl(0 0% 45.1%); }
.admin-shell a:hover { color: hsl(0 0% 3.9%); }
.admin-shell .page-heading { margin-bottom: 28px; }
.admin-shell h1 { font-size: 32px; letter-spacing: -.03em; line-height: 1.1; }
.admin-shell h2 { font-size: 16px; letter-spacing: -.01em; }
.admin-shell h3 { font-size: 13px; }
.admin-shell .eyebrow, .admin-shell th, .admin-shell .extraction-card h4, .admin-shell .filter-summary h4 { color: hsl(0 0% 45.1%); }
.admin-shell .muted, .admin-shell small { color: hsl(0 0% 45.1%); }
.admin-shell .metrics { gap: 16px; margin-bottom: 24px; }
.admin-shell .map-detail-header-metrics { gap: 8px; margin-bottom: 0; }
.admin-shell .metric, .admin-shell .panel { background: hsl(0 0% 100%); border: 1px solid hsl(0 0% 89.8%); border-radius: 6px; box-shadow: none; }
.admin-shell .metric { padding: 18px 20px; }
.admin-shell .metric span { color: hsl(0 0% 45.1%); font-size: 12px; }
.admin-shell .metric strong { font-size: 24px; font-weight: 500; }
.admin-shell .panel { margin-bottom: 24px; padding: 24px; }
.admin-shell .panel-heading { margin-bottom: 18px; }
.admin-shell .tab-list { border-bottom-color: hsl(0 0% 89.8%); gap: 12px; margin-bottom: 24px; }
.admin-shell .tab-button { border-bottom-width: 2px; color: hsl(0 0% 45.1%); font-size: 14px; padding: 11px 4px; }
.admin-shell .tab-button:hover, .admin-shell .tab-button.active { color: hsl(0 0% 3.9%); }
.admin-shell .tab-button.active { border-bottom-color: hsl(0 0% 3.9%); }
.admin-shell th, .admin-shell td { border-top-color: hsl(0 0% 89.8%); padding: 13px 12px; }
.admin-shell th { font-size: 10px; font-weight: 500; }
.admin-shell td { font-size: 12px; }
.admin-shell .button { background: hsl(0 0% 100%); border: 1px solid hsl(0 0% 89.8%); border-radius: 2px; color: hsl(0 0% 9%); font-size: 12px; }
.admin-shell .button:hover { background: hsl(0 0% 96.1%); }
.admin-shell .button.primary { background: hsl(0 0% 9%); border-color: hsl(0 0% 9%); color: hsl(0 0% 98%); }
.admin-shell .button.primary:hover { background: hsl(0 0% 9% / .9); }
.admin-shell .button.danger { background: hsl(0 0% 100%); border-color: hsl(0 84.2% 60.2% / .45); color: hsl(0 84.2% 45%); }
.admin-shell .button.danger:hover { background: hsl(0 84.2% 60.2% / .08); }
.admin-shell .badge { background: hsl(0 0% 96.1%); color: hsl(0 0% 45.1%); font-size: 10px; }
.admin-shell .badge.good { background: hsl(141 45% 93%); color: hsl(145 63% 31%); }
.admin-shell .badge.prod { background: hsl(216 100% 96%); color: hsl(216 75% 40%); }
.admin-shell input, .admin-shell select { background: hsl(0 0% 100%); border: 1px solid hsl(0 0% 80%); border-radius: 2px; color: hsl(0 0% 9%); font-size: 12px; }
.admin-shell select { padding: 7px 9px; }
.admin-shell input:focus { border-color: hsl(0 0% 3.9%); outline: 2px solid hsl(0 0% 3.9% / .12); outline-offset: 1px; }
.admin-shell label { color: hsl(0 0% 45.1%); font-size: 11px; }
.admin-shell .flash.success { background: hsl(141 45% 96%); border-color: hsl(141 45% 78%); color: hsl(145 63% 31%); }
.admin-shell .flash.error, .admin-shell .danger-panel { background: hsl(0 84.2% 97%); border-color: hsl(0 84.2% 80%); color: hsl(0 84.2% 35%); }
.admin-shell .extraction-card, .admin-shell .filter-summary, .admin-shell .fuzzy-resolution-stat, .admin-shell .trace-metric { background: hsl(0 0% 98%); border-color: hsl(0 0% 89.8%); border-radius: 4px; }
.admin-shell .extraction-card h4, .admin-shell .filter-summary h4 { font-size: 10px; }
.admin-shell .spec-row, .admin-shell .trace-event, .admin-shell .field-card { border-top-color: hsl(0 0% 89.8%); }
.admin-shell .spec-row > span:first-child, .admin-shell .trace-tool span, .admin-shell .trace-items span, .admin-shell .trace-metric > span { color: hsl(0 0% 45.1%); }
.admin-shell .logic-operator { color: hsl(0 0% 9%); }
.admin-shell .logic-operator strong { background: hsl(0 0% 96.1%); border-color: hsl(0 0% 89.8%); }
.admin-shell .logic-operator span { color: hsl(0 0% 45.1%); }
.admin-shell .chip.include { background: hsl(141 45% 93%); color: hsl(145 63% 31%); }
.admin-shell .chip.exclude, .admin-shell .danger-badge { background: hsl(0 84.2% 97%); color: hsl(0 84.2% 45%); }
.admin-shell .trace-timeline { border-left-color: hsl(0 0% 89.8%); }
.admin-shell .trace-chevron { color: hsl(0 0% 45.1%); }
.admin-shell .trace-toggle:hover .trace-run-heading strong, .admin-shell .sort-button:hover { color: hsl(0 0% 3.9%); }
.admin-shell .map-method.hardcoded { background: hsl(39 100% 94%); color: hsl(35 100% 27%); }
.admin-shell .map-method.exact { background: hsl(0 0% 96.1%); color: hsl(0 0% 45.1%); }
.admin-shell .map-method.fuzzy { background: hsl(141 45% 93%); color: hsl(145 63% 31%); }
.admin-shell .map-status.accepted { background: hsl(141 45% 93%); color: hsl(145 63% 31%); }
.admin-shell .map-status.ambiguous, .admin-shell .map-status.unmatched, .admin-shell .map-status.collision { background: hsl(0 84.2% 97%); color: hsl(0 84.2% 45%); }
.admin-shell .map-status.target_missing { background: hsl(39 100% 94%); color: hsl(35 100% 27%); }
.admin-shell .inline-plan-form select { max-width: 180px; min-width: 130px; }
.admin-shell .admin-key-actions { white-space: nowrap; }
.admin-shell .admin-key-actions form { display: inline-block; margin-right: 5px; }
.admin-shell .admin-plans-table input { min-width: 92px; width: 100%; }
.admin-shell .admin-plans-table input[name="name"] { min-width: 140px; }
.admin-shell .access-plan-create-form { grid-template-columns: 1fr 1fr 1fr auto; }
.admin-shell .key-created-notice { margin: 0 0 20px; max-width: 760px; }
.admin-shell .container:has(> .tabs[data-tab-group="admin"]) { padding-top: 16px; }
@media (max-width: 800px) {
  .admin-shell .access-plan-create-form { grid-template-columns: 1fr; }
  .admin-shell .container:has(> .tabs[data-tab-group="admin"]) { padding-top: 12px; }
}

@media (max-width: 700px) {
  .admin-shell .topbar { padding-left: 16px; padding-right: 16px; }
  .admin-shell .topbar-left { gap: 10px; }
  .admin-shell .topbar-nav a, .admin-shell .topbar-actions a, .admin-shell .link-button { padding-left: 7px; padding-right: 7px; }
  .admin-shell .container { padding-left: 14px; padding-right: 14px; }
}