:root {
  --accent: #2f6b4f;
  --accent-dark: #24523d;
  --accent-soft: #e7efe9;
  --ink: #3b2f2f;
  --body: #554646;
  --muted: #2f6b4f;
  --line: #d8cec8;
  --canvas: #f5f1ed;
  --surface: #fbf9f7;
  --surface-muted: #f0ebe6;
  --success: #07966f;
  --success-soft: #d8f8ec;
  --danger: #de3347;
  --danger-soft: #ffe7ea;
  --warning: #b76a08;
  --warning-soft: #fff1d9;
  --sidebar-width: 244px;
  --radius: 22px;
  --radius-sm: 10px;
  --focus: 0 0 0 3px rgba(47, 107, 79, .22);
  --shadow: 0 18px 50px rgba(59, 47, 47, .09);
  --font: "Work Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-family: var(--font);
  color: var(--ink);
  background: var(--canvas);
  font-synthesis: none;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { min-width: 320px; background: var(--canvas); }
body { margin: 0; min-height: 100vh; background: var(--canvas); color: var(--body); font-size: 15px; line-height: 1.45; }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
button:disabled { opacity: .5; cursor: not-allowed; }
svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 0; box-shadow: var(--focus); }
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.skip-link { position: fixed; z-index: 100; left: 16px; top: -50px; padding: 10px 14px; border-radius: 8px; color: var(--surface); background: var(--accent); text-decoration: none; }
.skip-link:focus { top: 12px; }

.app-shell { min-height: 100vh; }
.sidebar { position: fixed; z-index: 20; inset: 0 auto 0 0; display: flex; width: var(--sidebar-width); flex-direction: column; padding: 32px 22px 24px; border-right: 1px solid var(--line); background: var(--surface); }
.brand { display: inline-grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.brand-logo { display: block; width: 46px; height: 46px; }
.side-nav { display: grid; gap: 10px; margin-top: 51px; }
.nav-item { display: flex; align-items: center; gap: 13px; width: 100%; min-height: 48px; padding: 0 14px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); font-size: 14px; font-weight: 500; text-align: left; cursor: pointer; transition: 140ms ease; }
.nav-item svg { width: 20px; height: 20px; }
.nav-item:hover { color: var(--ink); background: var(--surface-muted); }
.nav-item.is-active { color: var(--surface); background: var(--accent); box-shadow: 0 9px 22px rgba(47, 107, 79, .2); }
.account-summary { display: grid; grid-template-columns: 38px minmax(0, 1fr) 34px; gap: 10px; align-items: center; margin-top: auto; padding: 18px 3px 0; border-top: 1px solid var(--line); }
.account-avatar { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; color: var(--accent); background: var(--accent-soft); font-weight: 700; }
.account-summary-copy { min-width: 0; display: grid; }
.account-summary-copy strong { overflow: hidden; color: var(--ink); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.account-summary-copy span { overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.icon-button { display: inline-grid; place-items: center; min-width: 36px; height: 36px; padding: 0; border: 0; border-radius: 8px; background: transparent; cursor: pointer; }
.icon-button:hover { background: var(--surface-muted); }

main { min-height: 100vh; margin-left: var(--sidebar-width); padding: 38px clamp(28px, 5vw, 72px) 72px; transition: margin-right 180ms ease; }
body.has-request-drawer main { margin-right: 380px; }
.app-footer { display: flex; justify-content: center; gap: 20px; max-width: 1120px; margin: 34px auto 0; color: var(--muted); font-size: 12px; }
.app-footer a { color: inherit; }
.legal-page { max-width: 760px; margin: 0 auto; padding: 56px 24px 80px; }
.legal-page header { margin-bottom: 32px; }
.legal-page .brand { display: inline-block; margin-bottom: 34px; text-decoration: none; }
.legal-page h1 { margin-bottom: 8px; }
.legal-page h2 { margin: 30px 0 8px; font-size: 19px; }
.legal-page p, .legal-page li { color: var(--body); }
.legal-page .updated { color: var(--muted); font-size: 12px; }
.legal-page .back-link { display: inline-block; margin-top: 34px; color: var(--accent); }
.page-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 24px; max-width: 1120px; margin: 0 auto 34px; }
h1, h2, h3 { margin: 0; color: var(--ink); letter-spacing: -.025em; }
h1 { font-size: 27px; line-height: 1.15; font-weight: 600; }
h2 { font-size: 21px; line-height: 1.25; font-weight: 650; }
.subheading { margin: 6px 0 0; color: var(--muted); font-size: 12px; }
.page-context { display: flex; align-items: center; gap: 10px; min-height: 23px; }
.staging-badge { display: inline-flex; align-items: center; min-height: 23px; padding: 0 10px; border: 1px solid var(--accent); border-radius: 999px; color: var(--accent); background: var(--accent-soft); font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.toolbar-actions { display: flex; gap: 10px; }
.primary-button, .secondary-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 0 16px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; transition: 140ms ease; }
.primary-button { border: 1px solid var(--accent); color: var(--surface); background: var(--accent); }
.primary-button:hover { border-color: var(--accent-dark); background: var(--accent-dark); }
.primary-button:disabled:hover { border-color: var(--accent); background: var(--accent); }
.secondary-button { border: 1px solid var(--line); color: var(--body); background: var(--surface); }
.secondary-button:hover { border-color: var(--ink); background: var(--surface-muted); }
.primary-button svg, .secondary-button svg { width: 17px; height: 17px; }
.text-button { padding: 5px 7px; border: 0; background: transparent; color: var(--accent); font-size: 13px; font-weight: 600; cursor: pointer; }
.full-width { width: 100%; }

#view-root { max-width: 1120px; margin: 0 auto; }
.global-message { max-width: 1120px; margin: -14px auto 22px; padding: 12px 14px; border: 1px solid #f0d391; border-radius: 9px; background: #fff9e9; color: #794900; font-size: 13px; }
.summary-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 25px 22px; border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.summary-metric { display: flex; align-items: center; gap: 17px; min-width: 0; min-height: 76px; padding: 0 24px; border-left: 1px solid var(--line); }
.summary-metric:first-child { border-left: 0; }
.summary-icon { display: grid; flex: 0 0 auto; place-items: center; width: 58px; height: 58px; border-radius: 50%; color: var(--success); background: var(--success-soft); }
.summary-icon svg { width: 28px; height: 28px; }
.summary-metric small { display: block; color: var(--muted); font-size: 12px; }
.summary-metric strong { display: block; overflow: hidden; margin-top: 2px; color: var(--ink); font-size: 27px; line-height: 1.15; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }

.browser-upload { display: grid; gap: 16px; }
.session-drop-zone { display: grid; place-items: center; width: 100%; min-height: 205px; padding: 30px; border: 1.5px dashed #9c8f87; border-radius: 14px; color: var(--body); background: rgba(251, 249, 247, .58); cursor: pointer; transition: border-color 140ms ease, background 140ms ease, transform 140ms ease; }
.session-drop-zone:hover, .session-drop-zone.is-dragging { border-color: var(--accent); background: var(--accent-soft); transform: translateY(-1px); }
.session-drop-zone > svg { width: 38px; height: 38px; margin-bottom: 13px; color: var(--accent); stroke-width: 1.5; }
.session-drop-zone > strong { color: var(--ink); font-size: 16px; font-weight: 600; }
.session-drop-zone > span:not(.choose-folder-button) { margin: 7px 0; color: var(--muted); font-size: 11px; }
.session-drop-zone .choose-folder-button { display: inline-flex; align-items: center; justify-content: center; min-width: 142px; min-height: 40px; padding: 0 16px; border: 1px solid var(--accent); border-radius: 8px; color: var(--accent); background: var(--surface); font-size: 12px; font-weight: 650; }
.session-drop-zone small { margin-top: 10px; color: var(--muted); font-size: 10px; }
.browser-support-note { margin: -7px 0 0; color: var(--warning); font-size: 11px; }
.upload-progress-card { padding: 20px 22px 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.upload-progress-card.is-failed { border-color: #e7a9af; }
.upload-progress-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.upload-progress-heading h2 { font-size: 16px; }
.upload-progress-heading p { margin: 4px 0 0; color: var(--muted); font-size: 11px; }
.compact-button { min-height: 36px; padding: 0 12px; font-size: 11px; }
.upload-progress-summary { display: flex; justify-content: space-between; margin-top: 15px; color: var(--muted); font-size: 11px; }
.upload-progress-summary strong { color: var(--accent); }
.progress-track { height: 7px; margin-top: 7px; overflow: hidden; border-radius: 999px; background: var(--surface-muted); }
.progress-track > span { display: block; height: 100%; border-radius: inherit; background: var(--accent); transition: width 160ms ease; }
.phase-track { display: grid; grid-template-columns: repeat(3, 1fr); margin: 17px 0 0; padding: 0; list-style: none; }
.phase-track li { position: relative; display: grid; justify-items: center; gap: 6px; color: #9c8f87; font-size: 10px; }
.phase-track li::before { position: absolute; z-index: 0; top: 8px; right: 50%; width: 100%; height: 1px; content: ""; background: var(--line); }
.phase-track li:first-child::before { display: none; }
.phase-track li > span { position: relative; z-index: 1; display: grid; place-items: center; width: 17px; height: 17px; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); font-size: 9px; }
.phase-track li.is-active, .phase-track li.is-complete { color: var(--accent); }
.phase-track li.is-active > span { border: 5px solid var(--accent-soft); background: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.phase-track li.is-complete > span { border-color: var(--accent); color: var(--surface); background: var(--accent); }

.segments-panel { margin-top: 22px; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.segments-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 28px 32px 25px; }
.segment-controls { display: flex; align-items: center; gap: 12px; }
#segment-search-form { position: relative; width: 220px; }
#segment-search-form svg { position: absolute; top: 50%; left: 13px; width: 18px; height: 18px; transform: translateY(-50%); color: var(--muted); }
#segment-search, #segment-sort { height: 40px; border: 1px solid transparent; border-radius: 8px; color: var(--body); background: var(--surface-muted); font-size: 12px; }
#segment-search { width: 100%; padding: 0 12px 0 40px; }
#segment-sort { min-width: 142px; padding: 0 34px 0 12px; cursor: pointer; }
#segment-search:hover, #segment-sort:hover { border-color: var(--line); }
.segments-table-wrap { overflow-x: auto; }
.segments-table, .account-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.segments-table { min-width: 1040px; table-layout: auto; }
.segments-table th, .segments-table td, .account-table th, .account-table td { padding: 15px 14px; border-bottom: 1px solid var(--line); text-align: left; }
.segments-table th, .account-table th { color: var(--muted); font-size: 11px; font-weight: 500; }
.segments-table td, .account-table td { color: var(--body); font-size: 12px; }
.segments-table th:first-child, .segments-table td:first-child { padding-left: 18px; }
.segments-table th:last-child, .segments-table td:last-child { padding-right: 32px; }
.segments-table tbody tr:hover { background: var(--surface-muted); }
.segments-table tbody tr.is-selected { background: var(--accent-soft); }
.selection-cell { width: 44px; text-align: center !important; }
.selection-cell input, .segment-card input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.selection-cell input:disabled, .segment-card input:disabled { cursor: not-allowed; }
.device-cell { color: var(--ink) !important; font-weight: 600; }
.service-cell { text-align: center !important; }
.features-cell { min-width: 118px; text-align: right !important; }
.service-state { display: inline-grid; place-items: center; width: 25px; height: 25px; padding: 0; border: 1px solid transparent; border-radius: 5px; font-size: 14px; font-weight: 600; }
button.service-state { cursor: pointer; }
.service-state svg { width: 15px; height: 15px; }
.service-state.is-complete { border-color: #11ae86; color: var(--success); background: var(--success-soft); }
button.service-state.is-complete:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(7, 150, 111, .2); }
.service-state.is-active { border-color: #e7ad52; color: var(--warning); background: var(--warning-soft); }
.service-state.is-failed { border-color: #f05b69; color: var(--danger); background: var(--danger-soft); }
.service-state.is-empty { color: #a89d97; background: transparent; }
.service-readiness { display: inline-flex; min-height: 24px; align-items: center; justify-content: center; padding: 0 7px; border-radius: 5px; font-size: 9px; font-weight: 650; white-space: nowrap; }
.service-readiness.is-ready { color: var(--success); background: var(--success-soft); }
.service-readiness.is-missing { color: var(--warning); background: var(--warning-soft); }
.view-features-button { min-height: 34px; padding: 0 11px; white-space: nowrap; }
.features-unavailable { color: var(--muted); font-size: 10px; }
.segment-features { display: flex; justify-content: flex-end; margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--line); }
.segment-features .view-features-button { width: 100%; }
.segment-actions { display: grid; grid-template-columns: auto auto minmax(130px, 190px) auto 1fr; gap: 12px; align-items: center; min-height: 58px; padding: 9px 18px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--surface-muted); }
.segment-actions > span { color: var(--ink); font-size: 12px; }
.segment-actions > label { color: var(--muted); font-size: 10px; font-weight: 600; }
.segment-actions select { height: 38px; padding: 0 34px 0 11px; border: 1px solid var(--line); border-radius: 7px; color: var(--ink); background: var(--surface); font-size: 11px; }
.segment-actions .primary-button { min-height: 38px; }
.segment-actions small { color: var(--warning); font-size: 10px; }
.segments-footer { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 18px 32px 23px; color: var(--muted); font-size: 11px; }
.segments-footer > div { display: flex; align-items: center; gap: 10px; }
.page-button { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-muted); cursor: pointer; }
.page-button svg { width: 14px; height: 14px; }
.page-button.previous svg { transform: rotate(180deg); }
.page-button:disabled { opacity: .4; cursor: default; }
.segment-cards { display: none; }

.request-drawer { position: fixed; z-index: 24; inset: 0 0 0 auto; width: 380px; padding: 30px 28px; overflow-y: auto; border: 0; border-left: 1px solid var(--line); color: var(--body); background: var(--surface); box-shadow: -16px 0 36px rgba(59, 47, 47, .07); }
.request-drawer-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding-bottom: 23px; border-bottom: 1px solid var(--line); }
.request-drawer-heading h2 { margin-top: 9px; font-size: 20px; }
.request-status { display: inline-flex; align-items: center; min-height: 24px; padding: 0 8px; border-radius: 6px; color: var(--muted); background: var(--surface-muted); font-size: 10px; font-weight: 700; text-transform: capitalize; }
.request-status.is-active { color: var(--warning); background: var(--warning-soft); }
.request-status.status-succeeded { color: var(--success); background: var(--success-soft); }
.request-status.status-failed, .request-status.status-partial, .request-status.status-canceled { color: var(--danger); background: var(--danger-soft); }
.request-facts { margin: 0; padding: 12px 0; }
.request-facts > div { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 12px; align-items: start; padding: 13px 0; border-bottom: 1px solid var(--line); }
.request-facts dt { color: var(--muted); font-size: 10px; }
.request-facts dd { min-width: 0; margin: 0; color: var(--ink); font-size: 11px; text-align: right; }
.request-facts code { display: inline-block; max-width: calc(100% - 34px); overflow: hidden; text-overflow: ellipsis; vertical-align: middle; white-space: nowrap; }
.inline-copy { display: inline-grid; width: 30px; min-width: 30px; height: 30px; vertical-align: middle; }
.inline-copy svg { width: 14px; height: 14px; }
.request-error { margin-top: 8px; padding: 12px; border-radius: 8px; color: var(--danger); background: var(--danger-soft); font-size: 11px; }
.request-downloads { display: grid; gap: 9px; margin-top: 24px; }
.request-downloads p { margin: 2px 0 0; color: var(--muted); font-size: 10px; text-align: center; }

.rrd-viewer-dialog { width: min(1480px, calc(100vw - 30px)); height: min(930px, calc(100vh - 30px)); max-width: none; max-height: none; padding: 0; overflow: hidden; border: 1px solid rgba(251, 249, 247, .15); border-radius: 16px; color: #fbf9f7; background: #161312; box-shadow: 0 28px 80px rgba(30, 23, 23, .42); }
.rrd-viewer-dialog::backdrop { background: rgba(30, 23, 23, .62); backdrop-filter: blur(4px); }
.rrd-viewer-shell { display: grid; grid-template-rows: auto 3px minmax(0, 1fr); height: 100%; }
.rrd-viewer-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 79px; padding: 14px 18px 13px 20px; border-bottom: 1px solid rgba(251, 249, 247, .12); background: #211c1a; }
.rrd-viewer-heading h2 { margin-top: 2px; color: #fbf9f7; font-size: 19px; }
.rrd-viewer-heading p { margin: 3px 0 0; color: #c7bbb5; font-size: 11px; }
.rrd-viewer-heading p.is-error { color: #ff9da8; }
.result-format { color: #8fc3a4; font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.rrd-viewer-actions { display: flex; align-items: center; gap: 7px; }
.rrd-download-actions { display: flex; align-items: center; gap: 7px; }
.rrd-download-actions[hidden] { display: none; }
.rrd-viewer-actions .secondary-button { border-color: rgba(251, 249, 247, .25); color: #fbf9f7; background: transparent; text-decoration: none; }
.rrd-viewer-actions .secondary-button:hover, .rrd-viewer-actions .icon-button:hover { border-color: #8fc3a4; color: #fbf9f7; background: rgba(47, 107, 79, .28); }
.rrd-viewer-actions .icon-button { color: #fbf9f7; }
.rrd-viewer-progress { overflow: hidden; background: #332c29; }
.rrd-viewer-progress > span { display: block; width: 0; height: 100%; background: #63a57e; transition: width 150ms ease; }
.rrd-viewer-canvas { min-width: 0; min-height: 0; background: #161312; }
.rrd-viewer-canvas:empty::before { display: grid; place-items: center; height: 100%; color: #c7bbb5; content: "Loading interactive recording…"; font-size: 12px; }

.account-layout { display: grid; grid-template-columns: minmax(250px, .72fr) minmax(0, 1.7fr); gap: 28px; min-width: 0; align-items: start; }
.account-card, .account-keys { min-width: 0; padding: 28px; border-radius: 18px; background: var(--surface); box-shadow: var(--shadow); }
.account-card > p, .account-keys > header p { margin: 6px 0 22px; color: var(--muted); font-size: 13px; }
.account-card .verified-email { margin-bottom: 24px; color: var(--body); overflow-wrap: anywhere; }
.inline-key-form { display: flex; gap: 10px; margin-bottom: 15px; }
.inline-key-form input { min-width: 0; height: 42px; flex: 1; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); }
.account-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; }
.account-table { min-width: 680px; }
.account-table tr:last-child td { border-bottom: 0; }

.feedback-layout { max-width: 820px; }
.feedback-intro { margin-bottom: 22px; }
.feedback-intro .eyebrow { display: block; margin-bottom: 7px; color: var(--accent); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.feedback-intro h2 { margin: 0; color: var(--ink); font-size: clamp(24px, 3vw, 34px); line-height: 1.15; }
.feedback-intro p { max-width: 650px; margin: 9px 0 0; color: var(--muted); font-size: 13px; }
.feedback-form { padding: 28px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow); }
.feedback-form label { display: block; margin: 0 0 7px; color: var(--body); font-size: 12px; font-weight: 650; }
.feedback-form label span { color: var(--muted); font-weight: 400; }
.feedback-form input, .feedback-form select, .feedback-form textarea { width: 100%; margin: 0 0 18px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: var(--canvas); }
.feedback-form input, .feedback-form select { height: 43px; padding: 0 12px; }
.feedback-form textarea { min-height: 190px; padding: 12px; line-height: 1.5; resize: vertical; }
.feedback-field-row { display: grid; grid-template-columns: minmax(150px, .55fr) minmax(0, 1.45fr); gap: 14px; }
.feedback-note { margin: -4px 0 18px; color: var(--muted); font-size: 10px; }
.feedback-actions { display: flex; justify-content: flex-end; }
.feedback-success { display: flex; gap: 12px; align-items: flex-start; margin-top: 16px; padding: 17px 19px; border: 1px solid #b8d4c5; border-radius: 12px; color: var(--accent); background: var(--accent-soft); }
.feedback-success > svg { flex: 0 0 auto; margin-top: 1px; }
.feedback-success strong { color: var(--ink); }
.feedback-success p { margin: 3px 0 0; color: var(--body); font-size: 11px; }
.status { display: inline-flex; padding: 4px 8px; border-radius: 5px; font-size: 10px; font-weight: 650; }
.status-success { color: var(--success); background: var(--success-soft); }
.status-failed { color: var(--danger); background: var(--danger-soft); }
.status-default { color: var(--muted); background: var(--surface-muted); }
.one-time-secret { margin-bottom: 15px; padding: 15px; border: 1px solid var(--accent); border-radius: 9px; background: var(--accent-soft); }
.one-time-secret p { margin: 3px 0 10px; color: var(--muted); font-size: 12px; }
.one-time-secret code { display: block; overflow: auto; margin-bottom: 10px; padding: 10px; border-radius: 6px; background: var(--surface); white-space: nowrap; }
.danger-text { color: var(--danger); }
.account-login-button { display: flex; margin: 14px auto 0; }

.docs-layout { overflow: hidden; border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.docs-intro { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 32px; border-bottom: 1px solid var(--line); }
.docs-intro p { max-width: 630px; margin: 7px 0 0; color: var(--muted); font-size: 13px; }
.docs-intro .primary-button { flex: 0 0 auto; }
.browser-quickstart { margin: 24px 32px 0; padding: 22px 24px; border: 1px solid #b9d0c2; border-radius: 12px; background: var(--accent-soft); }
.browser-quickstart h3 { margin-bottom: 12px; font-size: 16px; }
.browser-quickstart ol { display: grid; gap: 8px; margin: 0; padding-left: 20px; color: var(--ink); font-size: 12px; }
.browser-quickstart p { margin: 13px 0 0; color: var(--muted); font-size: 11px; }
.docs-section-title { padding: 28px 32px 0; }
.docs-section-title h3 { font-size: 17px; }
.docs-section-title span { margin-left: 7px; color: var(--muted); font-size: 10px; font-weight: 550; text-transform: uppercase; letter-spacing: .08em; }
.service-availability-row { display: flex; flex-wrap: wrap; gap: 20px; padding: 17px 32px; border-bottom: 1px solid var(--line); background: var(--surface-muted); }
.service-availability { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 11px; font-weight: 600; }
.service-availability > span { width: 7px; height: 7px; border-radius: 50%; background: #c2c8d3; }
.service-availability.is-ready { color: var(--success); }
.service-availability.is-ready > span { background: var(--success); box-shadow: 0 0 0 3px var(--success-soft); }
.docs-steps { margin: 0; padding: 10px 32px 0; list-style: none; counter-reset: none; }
.docs-steps > li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 16px; padding: 25px 0; border-bottom: 1px solid var(--line); }
.docs-steps > li:last-child { border-bottom: 0; }
.step-number { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: var(--accent); background: var(--accent-soft); font-size: 12px; font-weight: 700; }
.docs-steps h3 { font-size: 16px; }
.docs-steps p { margin: 5px 0 13px; color: var(--muted); font-size: 12px; }
.lane-requirements { display: grid; max-width: 760px; margin: 12px 0 14px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-muted); }
.lane-requirements > div { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 14px; padding: 11px 13px; border-bottom: 1px solid var(--line); }
.lane-requirements > div:last-child { border-bottom: 0; }
.lane-requirements strong { color: var(--ink); font-size: 11px; }
.lane-requirements span { color: var(--muted); font-size: 11px; line-height: 1.55; }
.lane-requirements code { white-space: nowrap; }
.inline-link { padding: 0; border: 0; color: var(--accent); background: transparent; font-weight: 600; cursor: pointer; }
.command-block { overflow: hidden; max-width: 760px; margin: 12px 0; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-muted); }
.command-block > div { display: flex; align-items: center; justify-content: space-between; min-height: 36px; padding: 0 8px 0 13px; border-bottom: 1px solid var(--line); color: var(--muted); background: var(--surface); font-size: 10px; font-weight: 600; }
.command-block pre { overflow: auto; margin: 0; padding: 14px; color: var(--ink); font-size: 11px; line-height: 1.65; }
.docs-steps details { max-width: 760px; margin-top: 10px; }
.docs-steps summary { width: max-content; color: var(--accent); font-size: 11px; font-weight: 600; cursor: pointer; }
.command-reference { padding: 26px 32px 30px; border-top: 1px solid var(--line); background: var(--surface-muted); }
.command-reference header { margin-bottom: 15px; }
.command-reference h3 { font-size: 16px; }
.command-reference header p { margin: 5px 0 0; color: var(--muted); font-size: 12px; }
.command-reference dl { max-width: 860px; margin: 0; }
.command-reference dl > div { display: grid; grid-template-columns: minmax(290px, .9fr) minmax(250px, 1fr); gap: 22px; padding: 12px 0; border-top: 1px solid var(--line); }
.command-reference dt, .command-reference dd { margin: 0; }
.command-reference dt code { color: var(--ink); font-size: 11px; }
.command-reference dd { color: var(--muted); font-size: 11px; }
.docs-footnote { margin: 0; padding: 20px 32px 26px; color: var(--muted); background: var(--surface-muted); font-size: 11px; }

.empty-state, .error-state { display: grid; justify-items: center; padding: 54px 24px; text-align: center; }
.empty-state svg, .error-state svg { width: 32px; height: 32px; margin-bottom: 13px; color: var(--accent); }
.error-state svg { color: var(--danger); }
.empty-state h2, .error-state h2 { font-size: 16px; }
.empty-state p, .error-state p { max-width: 420px; margin: 6px 0 0; color: var(--muted); font-size: 12px; }
.error-state button { margin-top: 17px; }
.loading-state { display: grid; gap: 34px; }
.metric-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; overflow: hidden; border-radius: var(--radius); background: var(--line); }
.skeleton { position: relative; overflow: hidden; background: var(--surface-muted); }
.skeleton::after { position: absolute; inset: 0; content: ""; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(251, 249, 247, .72), transparent); animation: shimmer 1.4s infinite; }
.skeleton-card { height: 126px; }
.skeleton-heading { width: 170px; height: 22px; border-radius: 6px; }
.skeleton-table { height: 480px; border-radius: var(--radius); }
@keyframes shimmer { to { transform: translateX(100%); } }

.mobile-header, .mobile-nav, .bottom-nav { display: none; }
.modal { width: min(440px, calc(100vw - 32px)); max-height: calc(100vh - 36px); padding: 0; border: 0; border-radius: 15px; background: var(--surface); box-shadow: 0 24px 60px rgba(59, 47, 47, .22); }
.modal::backdrop { background: rgba(59, 47, 47, .46); backdrop-filter: blur(2px); }
.modal form, .auth-panel { padding: 26px; }
.auth-panel form { padding: 0; }
.modal-heading { display: flex; align-items: flex-start; justify-content: space-between; }
.modal-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 10px; color: var(--accent); background: var(--accent-soft); }
.modal h2 { margin-top: 19px; font-size: 23px; }
.modal p { margin: 7px 0 20px; color: var(--muted); font-size: 12px; }
.modal label { display: block; margin-bottom: 6px; color: var(--body); font-size: 12px; font-weight: 600; }
.modal input { width: 100%; height: 43px; margin-bottom: 15px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: var(--surface); }
.modal pre { overflow: auto; margin: 0 0 18px; padding: 13px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface-muted); color: var(--ink); font-size: 12px; }
.field-error { margin: -6px 0 12px !important; color: var(--danger) !important; }
.field-help { display: block; margin: -9px 0 14px; color: var(--muted); font-size: 10px; }
.auth-modal { width: min(490px, calc(100vw - 32px)); }
.auth-links { display: flex; justify-content: space-between; gap: 12px; margin-top: 12px; }
.auth-back-button { display: flex; margin: 12px auto 0; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
/* A carrier reviewing the opt-in screenshot must be able to read the consent language beside
   the control that grants it, so the text wraps in its own column rather than under the box. */
.consent-check { display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: start; margin: 0 0 14px; font-size: 11px; line-height: 1.5; color: var(--muted); cursor: pointer; }
.consent-check input[type="checkbox"] { width: 13px; height: 13px; margin: 2px 0 0; cursor: pointer; }

@media (max-width: 1000px) {
  :root { --sidebar-width: 210px; }
  main { padding-right: 28px; padding-left: 28px; }
  .summary-metric { padding: 0 16px; }
  .summary-icon { width: 50px; height: 50px; }
  .summary-metric strong { font-size: 23px; }
  body.has-request-drawer main { margin-right: 330px; }
  .request-drawer { width: 330px; padding: 26px 22px; }
}

@media (max-width: 760px) {
  body { padding-bottom: 68px; }
  .sidebar { display: none; }
  .mobile-header { position: sticky; z-index: 30; top: 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 68px; padding: 0 18px; border-bottom: 1px solid var(--line); background: rgba(251, 249, 247, .96); backdrop-filter: blur(10px); }
  .brand-mobile { justify-self: start; width: 38px; height: 38px; }
  .brand-mobile .brand-logo { width: 38px; height: 38px; }
  .environment-label { justify-self: center; color: var(--muted); font-size: 11px; }
  .mobile-header .icon-button { justify-self: end; }
  .mobile-nav { position: fixed; z-index: 40; top: 61px; right: 14px; display: grid; width: min(220px, calc(100vw - 28px)); padding: 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); box-shadow: var(--shadow); }
  .mobile-nav button { padding: 11px 12px; border: 0; border-radius: 7px; background: transparent; text-align: left; }
  main { min-height: 0; margin-left: 0; padding: 29px 16px 38px; }
  body.has-request-drawer main { margin-right: 0; }
  .page-toolbar { align-items: flex-start; margin-bottom: 24px; }
  h1 { font-size: 24px; }
  .toolbar-actions { gap: 7px; }
  #refresh-button { width: 42px; padding: 0; }
  #refresh-button span { display: none; }
  #upload-session-button { padding: 0 12px; }
  .summary-strip { grid-template-columns: 1fr; padding: 8px 18px; border-radius: 16px; }
  .summary-metric { min-height: 82px; padding: 0; border-top: 1px solid var(--line); border-left: 0; }
  .summary-metric:first-child { border-top: 0; }
  .summary-icon { width: 46px; height: 46px; }
  .summary-icon svg { width: 23px; height: 23px; }
  .summary-metric strong { font-size: 22px; }
  .segments-panel { margin-top: 22px; border-radius: 16px; }
  .session-drop-zone { min-height: 180px; padding: 24px 18px; }
  .upload-progress-heading { align-items: stretch; flex-direction: column; }
  .upload-progress-heading .compact-button { align-self: flex-start; }
  .segment-actions { grid-template-columns: auto minmax(0, 1fr); gap: 8px 10px; padding: 12px 18px; }
  .segment-actions > label { text-align: right; }
  .segment-actions select, .segment-actions .primary-button, .segment-actions small { grid-column: 1 / -1; width: 100%; }
  .segments-heading { align-items: stretch; flex-direction: column; padding: 22px 18px 16px; }
  .segment-controls { align-items: stretch; flex-direction: column; gap: 8px; }
  #segment-search-form { width: 100%; }
  #segment-sort { width: 100%; }
  .segments-table-wrap { display: none; }
  .segment-cards { display: block; }
  .segment-card { padding: 17px 18px; border-top: 1px solid var(--line); }
  .segment-card-heading { display: flex; justify-content: space-between; gap: 12px; color: var(--ink); font-size: 13px; }
  .segment-card-heading label { display: inline-flex; align-items: center; gap: 9px; }
  .segment-card-heading > span { color: var(--muted); font-weight: 500; }
  .segment-identity { display: flex; flex-wrap: wrap; gap: 5px 15px; margin-top: 5px; color: var(--muted); font-size: 11px; }
  .segment-services { display: grid; grid-template-columns: repeat(3, 1fr); margin: 14px 0 0; padding-top: 13px; border-top: 1px solid var(--line); }
  .segment-services div { display: flex; align-items: center; justify-content: center; gap: 8px; }
  .segment-services dt { color: var(--muted); font-size: 10px; font-weight: 600; text-transform: uppercase; }
  .segment-services dd { margin: 0; }
  .segment-features { justify-content: stretch; }
  .segments-footer { align-items: flex-start; flex-direction: column; padding: 16px 18px 20px; }
  .bottom-nav { position: fixed; z-index: 35; inset: auto 0 0; display: grid; grid-template-columns: repeat(4, 1fr); min-height: 66px; border-top: 1px solid var(--line); background: rgba(251, 249, 247, .97); backdrop-filter: blur(10px); }
  .bottom-nav button { display: grid; place-items: center; align-content: center; gap: 3px; border: 0; background: transparent; color: var(--muted); font-size: 10px; }
  .bottom-nav button svg { width: 20px; height: 20px; }
  .bottom-nav button.is-active { color: var(--accent); }
  .request-drawer { z-index: 50; inset: auto 0 0; width: 100%; max-height: 82vh; padding: 22px 18px 82px; border-top: 1px solid var(--line); border-left: 0; border-radius: 18px 18px 0 0; box-shadow: 0 -18px 50px rgba(59, 47, 47, .15); }
  .rrd-viewer-dialog { width: 100vw; height: 100vh; border: 0; border-radius: 0; }
  .rrd-viewer-heading { min-height: 72px; padding: 11px 12px 10px 15px; }
  .rrd-viewer-heading h2 { font-size: 17px; }
  .rrd-viewer-actions .secondary-button { display: none; }
  .account-layout { grid-template-columns: 1fr; }
  .feedback-field-row { grid-template-columns: 1fr; gap: 0; }
  .feedback-form { padding: 22px 18px; border-radius: 15px; }
  .account-card, .account-keys { padding: 22px 18px; border-radius: 15px; }
  .inline-key-form { align-items: stretch; flex-direction: column; }
  .account-table { min-width: 0; table-layout: auto; }
  .account-table thead { display: none; }
  .account-table tbody { display: block; }
  .account-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 12px; padding: 14px; border-bottom: 1px solid var(--line); }
  .account-table tr:last-child { border-bottom: 0; }
  .account-table td { display: block; padding: 0; border: 0; }
  .account-table td:nth-child(1) { grid-column: 1; grid-row: 1; }
  .account-table td:nth-child(2) { grid-column: 1; grid-row: 2; color: var(--muted); }
  .account-table td:nth-child(3) { grid-column: 2; grid-row: 1; }
  .account-table td:nth-child(4) { grid-column: 1; grid-row: 3; color: var(--muted); }
  .account-table td:nth-child(4)::before { content: "Last used "; }
  .account-table td:nth-child(5) { grid-column: 2; grid-row: 2 / span 2; align-self: end; }
  .account-table td[colspan] { grid-column: 1 / -1; grid-row: auto; }
  .global-message { margin-top: 0; }
  .docs-layout { border-radius: 16px; }
  .docs-intro { align-items: stretch; flex-direction: column; padding: 24px 18px; }
  .docs-intro .primary-button { width: 100%; }
  .browser-quickstart { margin: 18px 18px 0; padding: 18px; }
  .docs-section-title { padding: 24px 18px 0; }
  .service-availability-row { gap: 12px 18px; padding: 15px 18px; }
  .docs-steps { padding: 6px 18px 0; }
  .docs-steps > li { grid-template-columns: 30px minmax(0, 1fr); gap: 12px; padding: 21px 0; }
  .lane-requirements > div { grid-template-columns: 1fr; gap: 4px; }
  .command-reference { padding: 22px 18px 26px; }
  .command-reference dl > div { grid-template-columns: 1fr; gap: 5px; }
  .step-number { width: 27px; height: 27px; }
  .command-block pre { font-size: 10px; }
  .docs-footnote { padding: 18px; }
}

@media (max-width: 430px) {
  .form-grid { grid-template-columns: 1fr; gap: 0; }
  .auth-links { align-items: flex-start; flex-direction: column; }
  #upload-session-button span { display: none; }
  #upload-session-button { width: 42px; padding: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}