:root {
  color-scheme: light;
  --ink: #17243a;
  --muted: #68758a;
  --line: #e3e9f1;
  --surface: #ffffff;
  --wash: #f4f7fb;
  --blue: #3159c9;
  --teal: #148776;
  --shadow: 0 12px 32px rgba(24, 47, 82, .06);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--wash);
  color: var(--ink);
  min-width: 320px;
}

button, input, select { font: inherit; }
button, select { cursor: pointer; }
[hidden] { display: none !important; }

.app-shell { width: calc(100% - 48px); max-width: none; margin: 0 auto; padding: 30px 0 52px; }
.login-shell { display: grid; place-items: center; min-height: 100vh; padding: 24px; background: radial-gradient(circle at 15% 10%, #e8efff 0, transparent 34%), radial-gradient(circle at 90% 90%, #e5f5f0 0, transparent 32%), var(--wash); }
.login-card { width: min(100%, 420px); padding: 34px; }
.login-card > .brand-mark { margin-bottom: 20px; }
.login-card h1 { margin: 8px 0; font-size: 25px; letter-spacing: -.035em; }
.login-description { margin: 0 0 25px; color: var(--muted); font-size: 13px; line-height: 1.55; }
.login-form { display: grid; gap: 9px; }
.login-form > label:not(.remember-option) { margin-top: 5px; color: #59677b; font-size: 12px; font-weight: 750; }
.login-form > input { width: 100%; height: 44px; padding: 0 12px; border: 1px solid #dbe2ec; border-radius: 9px; outline: none; background: #fbfcfe; color: var(--ink); }
.login-form > input:focus { border-color: #7991e0; box-shadow: 0 0 0 3px rgba(71, 104, 205, .12); }
.remember-option { display: flex; align-items: center; gap: 8px; margin: 8px 0; color: #6f7d91; font-size: 12px; cursor: pointer; }
.remember-option input { width: 15px; height: 15px; margin: 0; accent-color: var(--blue); }
.login-submit { justify-content: center; min-height: 44px; margin-top: 2px; font-size: 13px; }
.login-submit:disabled { opacity: .65; cursor: wait; }
.login-feedback { min-height: 18px; margin: 3px 0 0; color: #a74742; font-size: 12px; }
.topbar { display: flex; align-items: center; gap: 13px; margin-bottom: 25px; }
.brand-mark { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; color: #fff; font-size: 22px; font-weight: 800; background: linear-gradient(145deg, #3159c9, #24a89a); box-shadow: 0 7px 15px rgba(49, 89, 201, .2); }
.topbar h1 { margin: 1px 0 0; font-size: 20px; letter-spacing: -.025em; }
.eyebrow { margin: 0; color: #8290a4; font-size: 10px; font-weight: 800; letter-spacing: .13em; }
.topbar-actions { display: flex; align-items: center; gap: 16px; margin-left: auto; }
.logout-button { margin: 0; }

.settings-backdrop { position: fixed; z-index: 20; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(17, 29, 49, .48); }
.settings-dialog { width: min(100%, 760px); max-height: min(90vh, 900px); overflow: auto; padding: 24px; border: 1px solid #dfe6f0; border-radius: 17px; background: #fff; box-shadow: 0 24px 70px rgba(16, 31, 57, .24); }
.settings-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.settings-heading h2 { margin: 5px 0 0; font-size: 20px; letter-spacing: -.03em; }
.settings-close { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid #e2e7ef; border-radius: 9px; color: #68758a; background: #f8fafc; font-size: 23px; line-height: 1; }
.settings-close:hover { color: #263b5a; background: #eef2f8; }
.settings-description { margin: 12px 0 17px; color: var(--muted); font-size: 12px; line-height: 1.55; }
.settings-groups { display: grid; gap: 12px; }
.settings-group { display: grid; grid-template-columns: minmax(140px, .7fr) minmax(0, 1.3fr); align-items: center; gap: 9px 14px; padding: 14px; border: 1px solid #e7ebf1; border-radius: 12px; background: #fbfcfe; }
.settings-group h3 { grid-column: 1 / -1; margin: 0 0 1px; font-size: 13px; }
.settings-group > label, .settings-add-form label { color: #5f6d82; font-size: 11px; font-weight: 700; }
.settings-group > select, .settings-add-form input { width: 100%; min-width: 0; height: 38px; padding: 0 10px; border: 1px solid #dbe2ec; border-radius: 8px; outline: none; color: var(--ink); background: #fff; font-size: 11px; }
.settings-group > select:focus, .settings-add-form input:focus { border-color: #7991e0; box-shadow: 0 0 0 3px rgba(71, 104, 205, .12); }
.settings-add-form { grid-column: 1 / -1; display: grid; grid-template-columns: 140px minmax(0, 1fr) auto; align-items: center; gap: 8px 10px; padding-top: 10px; border-top: 1px solid #e9edf3; }
.settings-add-form label span { color: #929dad; font-weight: 500; }
.settings-add-form .run-button { grid-column: 3; grid-row: 1 / span 4; min-height: 38px; padding: 0 12px; white-space: nowrap; }
.settings-feedback { min-height: 18px; margin: 10px 1px 0; color: #56705f; font-size: 11px; }
.settings-feedback.is-error { color: #a74742; }

.panel { border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow); }
.search-panel { display: grid; grid-template-columns: minmax(220px, .9fr) minmax(300px, 1.3fr); column-gap: 28px; align-items: center; padding: 24px 26px 17px; }
.search-copy h2, .section-heading h2 { margin: 5px 0 5px; font-size: 18px; letter-spacing: -.025em; }
.search-copy p, .section-heading .muted { max-width: 610px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.lookup-form { position: relative; display: flex; align-items: center; min-width: 0; }
.lookup-form input { width: 100%; height: 48px; padding: 0 120px 0 44px; border: 1px solid #dbe2ec; border-radius: 12px; outline: none; background: #fbfcfe; color: var(--ink); transition: border .15s, box-shadow .15s; }
.lookup-form input:focus, .section-search input:focus, select:focus { border-color: #7991e0; box-shadow: 0 0 0 3px rgba(71, 104, 205, .12); }
.lookup-form input::placeholder, .section-search input::placeholder { color: #9ca8b8; }
.search-icon { position: absolute; z-index: 1; left: 15px; top: 8px; color: #8190a4; font-size: 28px; line-height: 1; transform: rotate(-20deg); }
.lookup-form button { position: absolute; right: 5px; top: 5px; bottom: 5px; display: inline-flex; align-items: center; gap: 15px; padding: 0 15px; border: 0; border-radius: 9px; background: var(--blue); color: #fff; font-size: 13px; font-weight: 750; box-shadow: 0 4px 10px rgba(49, 89, 201, .18); }
.lookup-form button:hover { background: #274bb5; }
.lookup-form button:disabled { opacity: .65; cursor: wait; }
.lookup-assist { grid-column: 2; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 12px; }
.privacy-note { margin: 8px 0 0 2px; color: #8793a4; font-size: 11px; }
.link-button { padding: 4px 0; border: 0; color: #4261bd; background: transparent; font-size: 11px; font-weight: 750; }
.link-button:hover { color: #243f9b; text-decoration: underline; }
.link-button:disabled { color: #9da8b8; cursor: wait; }

.feedback { margin: 14px 0; padding: 12px 15px; border: 1px solid #dce6f7; border-radius: 11px; color: #36538c; background: #f4f7ff; font-size: 13px; }
.feedback-error { border-color: #f2cfcb; color: #9c3f39; background: #fff7f5; }
.identity-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin: 26px 2px 18px; }
.identity-title h2 { margin: 5px 0 3px; font-size: clamp(22px, 3vw, 29px); letter-spacing: -.04em; overflow-wrap: anywhere; }
.identity-title .muted { margin: 0; color: var(--muted); font-size: 13px; }
.identity-meta { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 7px; max-width: 65%; }
.pill { display: inline-flex; align-items: center; max-width: 100%; padding: 6px 9px; border: 1px solid transparent; border-radius: 999px; color: #586579; background: #f0f3f7; font-size: 10px; font-weight: 750; overflow-wrap: anywhere; }
.pill-blue { color: #3756ac; border-color: #dbe4ff; background: #f1f5ff; }
.pill-green { color: #26735d; border-color: #d2ecdf; background: #eff9f3; }
.pill-amber { color: #9b6a18; border-color: #f0dfba; background: #fff9eb; }
.pill-red { color: #a74742; border-color: #f1d2cf; background: #fff5f4; }
.pill-purple { color: #7853a9; border-color: #e8def5; background: #f8f3ff; }

.summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; margin-bottom: 17px; }
.metric-card { position: relative; display: grid; grid-template-columns: 38px 1fr; grid-template-rows: auto auto auto; column-gap: 10px; min-height: 136px; padding: 16px; overflow: hidden; border: 1px solid var(--line); border-radius: 15px; background: #fff; box-shadow: 0 7px 22px rgba(24, 47, 82, .035); }
.metric-icon { grid-row: span 3; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; color: #4564be; background: #eff3ff; font-size: 19px; font-weight: 800; }
.metric-card:nth-child(2) .metric-icon { color: #138372; background: #eaf7f4; }
.metric-card:nth-child(3) .metric-icon { color: #8055b1; background: #f4effb; }
.metric-card:nth-child(4) .metric-icon { color: #ad7b28; background: #fff7e7; }
.metric-label { align-self: center; color: #6f7d91; font-size: 11px; font-weight: 700; }
.metric-value { display: block; margin: 4px 0 1px; font-size: 25px; letter-spacing: -.045em; line-height: 1.2; }
.metric-detail { min-height: 30px; color: #8a96a7; font-size: 10px; line-height: 1.45; }
.metric-meter { position: absolute; right: 16px; bottom: 12px; left: 16px; width: calc(100% - 32px); height: 3px; border: 0; appearance: none; border-radius: 8px; background: #eef1f5; }
.metric-meter::-webkit-progress-bar { border-radius: 8px; background: #eef1f5; }
.metric-meter::-webkit-progress-value { border-radius: 8px; background: linear-gradient(90deg, #5272d2, #35a58c); transition: width .25s ease; }
.metric-meter::-moz-progress-bar { border-radius: 8px; background: linear-gradient(90deg, #5272d2, #35a58c); }

.notice { margin: 0 0 12px; padding: 11px 14px; border: 1px solid #dce6f7; border-radius: 11px; color: #48618c; background: #f6f8ff; font-size: 12px; }
.notice-warning { border-color: #f0dfba; color: #89601e; background: #fffbef; }
.business-panel, .content-panel { margin-top: 16px; padding: 22px; }
.section-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 17px; }
.section-heading h2 { margin-bottom: 4px; }
.count-pill { flex: 0 0 auto; padding: 7px 10px; border: 1px solid #e1e7ef; border-radius: 999px; color: #68758a; background: #f8fafc; font-size: 11px; font-weight: 700; }
.business-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; }
.business-field { min-width: 0; padding: 13px; border: 1px solid #edf0f4; border-radius: 12px; background: #fbfcfe; }
.field-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.field-name { font-size: 13px; overflow-wrap: anywhere; }
.field-description { display: block; margin-top: 5px; color: #8c98a8; font-size: 11px; line-height: 1.4; }
.value-block { margin: 11px 0 0; padding: 9px 10px; border-radius: 8px; background: #f1f3f6; color: #778397; font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.value-block.has-value { color: #26415e; background: #f1f7f5; }

.collection-panel, .batch-panel { margin-top: 16px; padding: 22px; }
.collection-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 12px; }
.collection-search-actions { display: flex; align-items: center; flex: 0 1 600px; flex-wrap: wrap; min-width: 0; gap: 8px; }
.collection-search { display: block; flex: 1 1 280px; min-width: 180px; max-width: 440px; }
.collection-search input { width: 100%; height: 38px; padding: 0 11px; border: 1px solid #dfe5ed; border-radius: 9px; outline: none; color: #273951; background: #fbfcfe; font-size: 11px; }
.collection-search input:focus { border-color: #7991e0; box-shadow: 0 0 0 3px rgba(71, 104, 205, .12); }
.collection-search-actions .run-button { flex: 0 0 auto; white-space: nowrap; }
.collection-view { min-width: 0; }
.collection-automation-panel { min-width: 0; }
.collection-automation-panel > .batch-panel {
  margin: 0 -22px -22px;
  padding: 24px 22px 26px;
  border: 0;
  border-top: 1px solid #e7ebf1;
  border-radius: 0 0 18px 18px;
  box-shadow: none;
}
.collection-tabs { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 11px; border-bottom: 1px solid #e7ebf1; }
.collection-tab { position: relative; padding: 10px 13px; border: 1px solid #e1e7ef; border-bottom: 0; border-radius: 9px 9px 0 0; color: #63728a; background: #f7f9fc; font-size: 11px; font-weight: 750; }
.collection-tab:hover { color: #3453ad; background: #f0f4ff; }
.collection-tab.is-active { border-color: #cbd7f7; color: #3159c9; background: #f1f5ff; box-shadow: inset 0 -2px #3159c9; }
.collection-tab:focus-visible { outline: 3px solid rgba(71, 104, 205, .2); outline-offset: 2px; }
.collection-table-panel { min-width: 0; }
.collection-table-heading { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin-bottom: 10px; color: #6c7a90; font-size: 11px; line-height: 1.5; }
.collection-table-scroll { max-width: 100%; overflow: auto; border: 1px solid #e5eaf1; border-radius: 10px; background: #fff; }
.collection-table { width: max-content; min-width: 100%; border-collapse: separate; border-spacing: 0; font-size: 11px; }
.collection-table th, .collection-table td { max-width: 360px; padding: 10px 12px; border-right: 1px solid #edf0f4; border-bottom: 1px solid #edf0f4; text-align: left; vertical-align: top; }
.collection-table thead th { position: sticky; top: 0; z-index: 1; color: #52627a; background: #f5f7fb; font-size: 10px; font-weight: 800; white-space: normal; }
.collection-table tbody tr:last-child th, .collection-table tbody tr:last-child td { border-bottom: 0; }
.collection-table tr > :last-child { border-right: 0; }
.collection-table .table-index-heading, .collection-table .table-index { position: sticky; left: 0; z-index: 2; width: 42px; min-width: 42px; max-width: 42px; text-align: center; color: #8995a5; background: #f8fafc; }
.collection-table .table-index-heading { z-index: 3; background: #eef2f8; }
.collection-table td { min-width: 120px; color: #34465f; overflow-wrap: anywhere; }
.collection-table th.collection-actions-heading, .collection-table td.collection-actions-cell { min-width: 82px; width: 82px; text-align: center; }
.row-delete-button { min-height: 30px; padding: 0 10px; border: 1px solid #edc8c5; border-radius: 7px; color: #a33b35; background: #fff8f7; font-size: 10px; font-weight: 750; cursor: pointer; }
.row-delete-button:hover { border-color: #d99a95; color: #842d28; background: #fff0ee; }
.row-delete-button:focus-visible { outline: 3px solid rgba(180, 67, 58, .18); outline-offset: 2px; }
.row-delete-button:disabled { opacity: .55; cursor: wait; }
.collection-read-time.is-error { color: #a33b35; }
.collection-table th.collection-version-heading, .collection-table td.collection-version-cell { width: 80px; min-width: 80px; max-width: 80px; padding-right: 8px; padding-left: 8px; text-align: center; }
.collection-table td.collection-version-cell { white-space: nowrap; }
.collection-table th.collection-pages-heading, .collection-table td.collection-pages-cell { width: 840px; min-width: 840px; max-width: 840px; }
.collection-table td.collection-pages-cell .table-json-details { width: 100%; min-width: 0; max-width: none; }
.collection-table td.collection-pages-cell .table-json-value { max-height: 420px; max-width: 100%; }
.table-cell-value { display: block; max-height: 110px; overflow: auto; white-space: pre-wrap; line-height: 1.5; }
.table-domain-link { color: #3159c9; font-weight: 700; text-decoration: none; }
.table-domain-link:hover { text-decoration: underline; }
.table-empty-value { color: #a1aab7; }
.table-json-details { min-width: 160px; max-width: 340px; }
.table-json-details > summary { color: #4261bd; cursor: pointer; font-size: 10px; font-weight: 750; }
.table-json-value { max-height: 240px; max-width: 320px; margin: 8px 0 0; overflow: auto; padding: 9px; border-radius: 7px; color: #40536c; background: #f5f7fa; font: 10px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.collection-read-time { flex: 1 1 200px; margin: 0; color: #8c98a8; font-size: 10px; text-align: right; }
.collection-empty { margin: 14px 0 0; color: #8995a5; font-size: 11px; }
.automation-workspace { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(290px, .8fr); gap: 14px; }
.automation-step { min-width: 0; padding: 16px; border: 1px solid #e5eaf1; border-radius: 13px; background: #f9fbfe; }
.automation-step-heading { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 14px; }
.automation-step-number { display: grid; place-items: center; flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%; color: #3159c9; background: #eaf0ff; font-size: 11px; font-weight: 800; }
.automation-step-heading h3 { margin: 1px 0 4px; color: #344761; font-size: 12px; }
.automation-step-heading p { margin: 0; color: #8390a2; font-size: 10px; line-height: 1.45; }
.batch-controls { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 9px; }
.batch-count { display: grid; gap: 5px; color: #758398; font-size: 10px; font-weight: 750; }
.batch-count input { width: 116px; height: 39px; padding: 0 10px; border: 1px solid #dfe5ed; border-radius: 9px; outline: none; color: #273951; background: #fff; }
.batch-count input:focus { border-color: #7991e0; box-shadow: 0 0 0 3px rgba(71, 104, 205, .12); }
.batch-count input:disabled { color: #8b96a6; background: #f1f3f6; cursor: not-allowed; }
.range-separator { padding-bottom: 12px; color: #97a2b1; font-size: 10px; }
.range-selection-hint { flex: 1 1 100%; margin-top: 2px; color: #718097; font-size: 10px; }
.range-selection-hint.is-invalid { color: #a74742; }
.run-button { display: inline-flex; align-items: center; gap: 13px; min-height: 39px; padding: 0 13px; border: 1px solid #3159c9; border-radius: 9px; color: #fff; background: #3159c9; font-size: 11px; font-weight: 750; }
.run-button:hover { background: #274bb5; }
.run-button-secondary { border-color: #d6dfef; color: #435b9c; background: #f6f8fd; }
.run-button-secondary:hover { background: #eef2fc; }
.run-button:disabled { opacity: .55; cursor: wait; }
.batch-eligible { align-self: center; margin: 0 0 10px auto; color: #7d899a; font-size: 10px; }
.batch-eligible-result { margin: 11px 0 0; padding-top: 10px; border-top: 1px solid #e8edf4; line-height: 1.45; }
.batch-options { display: grid; gap: 13px; margin: 0; padding: 0; border: 0; background: transparent; }
.checkbox-option { display: inline-flex; align-items: flex-start; gap: 8px; max-width: 440px; color: #40526e; font-size: 11px; font-weight: 600; cursor: pointer; user-select: none; }
.checkbox-option input[type="checkbox"] { flex: 0 0 16px; width: 16px; height: 16px; margin: 1px 0 0; accent-color: #3159c9; cursor: pointer; }
.checkbox-option-copy { display: grid; gap: 3px; }
.checkbox-option-copy strong { font-size: 11px; }
.checkbox-option-copy small { color: #718097; font-size: 10px; font-weight: 400; line-height: 1.45; }
.batch-preview { margin-top: 18px; padding-top: 17px; border-top: 1px solid #edf0f5; }
.preview-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 13px; }
.preview-heading strong { color: #40536f; font-size: 12px; }
.preview-heading .muted { margin: 5px 0 0; color: #8591a1; font-size: 10px; line-height: 1.5; }
.preview-records { display: grid; gap: 9px; }
.preview-record { min-width: 0; padding: 13px; border: 1px solid #e6ebf2; border-radius: 11px; background: #fbfcfe; }
.preview-record-heading { display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.preview-record-identity { display: grid; gap: 4px; min-width: 0; }
.preview-record-identity strong { color: #34475f; font-size: 12px; overflow-wrap: anywhere; }
.preview-domain, .preview-template { color: #7f8c9e; font-size: 10px; overflow-wrap: anywhere; }
.preview-generate { flex: 0 0 auto; min-height: 33px; padding: 0 10px; font-size: 10px; }
.preview-data-details { margin-top: 10px; border-top: 1px solid #e9edf2; }
.preview-data-details > summary { padding: 9px 0 0; color: #5269a7; cursor: pointer; font-size: 10px; font-weight: 750; }
.preview-json { max-height: 300px; margin: 8px 0 2px; overflow: auto; padding: 11px; border-radius: 8px; background: #f2f5f9; color: #45566d; font: 10px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.preview-input-error { color: #9c514b; font-size: 10px; }
.preview-pagination { display: flex; justify-content: center; align-items: center; gap: 18px; margin-top: 12px; color: #8793a3; font-size: 10px; }
.preview-pagination button:disabled { color: #a9b2bf; cursor: default; text-decoration: none; }
.run-panel { margin-top: 18px; padding: 15px; border: 1px solid #e2e8f2; border-radius: 11px; background: #f8faff; }
.run-status-line { display: flex; justify-content: space-between; align-items: center; gap: 12px; color: #415477; font-size: 12px; }
.run-status-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-width: 0; }
.run-state-badge { padding: 4px 8px; border: 1px solid #dce4f0; border-radius: 999px; color: #66758c; background: #fff; font-size: 9px; font-weight: 800; letter-spacing: .02em; white-space: nowrap; }
.run-state-badge.is-running { border-color: #c8d8fb; color: #3159c9; background: #eff5ff; }
.run-state-badge.is-completed { border-color: #c8ead7; color: #21734a; background: #effaf4; }
.run-state-badge.is-failed { border-color: #f1d2cf; color: #a34842; background: #fff5f4; }
.run-status-line span { color: #3159c9; font-size: 12px; font-weight: 800; }
.run-status-heading .run-state-badge { color: #66758c; font-size: 9px; }
.run-status-line .run-status-heading strong { min-width: 0; overflow-wrap: anywhere; }
.run-progress { display: block; width: 100%; height: 7px; margin: 10px 0 12px; border: 0; appearance: none; border-radius: 999px; background: #e7ecf5; }
.run-progress::-webkit-progress-bar { border-radius: 999px; background: #e7ecf5; }
.run-progress::-webkit-progress-value { border-radius: 999px; background: linear-gradient(90deg, #4568cb, #25a18e); transition: width .25s ease; }
.run-progress::-moz-progress-bar { border-radius: 999px; background: linear-gradient(90deg, #4568cb, #25a18e); }
.run-stats { display: flex; flex-wrap: wrap; gap: 7px; }
.run-stats span { padding: 6px 8px; border: 1px solid #e4e9f1; border-radius: 7px; color: #718097; background: #fff; font-size: 9px; }
.run-stats .run-error { color: #aa4943; border-color: #f2d7d4; background: #fff5f4; }
.run-stats .stat-highlight { color: #1e3a8a; border-color: #bfdbfe; background: #eff6ff; font-weight: 700; }
.run-details { display: grid; gap: 5px; margin-top: 10px; }
.run-detail-row { display: flex; flex-wrap: wrap; gap: 5px 12px; color: #8390a2; font-size: 10px; }
.run-detail-row strong { color: #65748a; }
.run-resume-hint { margin: 8px 0 0; color: #8290a2; font-size: 10px; line-height: 1.5; }
.run-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 13px; padding-top: 12px; border-top: 1px solid #e8edf5; }
.run-actions-note { flex: 1 1 100%; margin: 0; color: #718097; font-size: 10px; line-height: 1.5; }
.run-actions .run-button { min-height: 35px; font-size: 10px; }
.run-actions .run-button:disabled { cursor: not-allowed; }

.run-active-container { margin-top: 14px; padding: 12px; border: 1px solid #dbe6fa; border-radius: 9px; background: #ffffff; box-shadow: 0 2px 8px rgba(49, 89, 201, .06); }
.run-subheading { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; color: #2e4a8c; font-size: 11px; }
.run-active-grid { display: grid; gap: 8px; }
.run-active-card { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid #e1e9f7; border-radius: 8px; background: #f8fbff; }
.run-pulse-dot { color: #3159c9; font-size: 13px; animation: pulse 1.2s infinite ease-in-out; }
@keyframes pulse { 0% { opacity: 1; transform: scale(1); } 50% { opacity: .3; transform: scale(1.2); } 100% { opacity: 1; transform: scale(1); } }
.run-active-info { display: grid; gap: 3px; min-width: 0; }
.run-active-domain-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.run-active-domain { color: #253858; font-size: 12px; }
.run-active-org { font-size: 11px; }
.run-active-stage { color: #2e60c8; font-size: 10px; font-weight: 600; }

.run-items-container { margin-top: 14px; padding: 12px; border: 1px solid #e5ebf3; border-radius: 9px; background: #ffffff; }
.run-items-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.run-items-header strong { color: #354968; font-size: 11px; }
.run-filter-tabs { display: flex; flex-wrap: wrap; gap: 5px; }
.run-tab-btn { padding: 4px 8px; border: 1px solid #dfe5ee; border-radius: 6px; background: #f6f8fb; color: #5f7089; font-size: 10px; font-weight: 600; cursor: pointer; transition: all .15s ease; }
.run-tab-btn:hover { background: #edf2f9; color: #33445c; }
.run-tab-btn.is-active { border-color: #3159c9; background: #3159c9; color: #ffffff; }

.run-records-list { display: grid; gap: 6px; max-height: 380px; overflow-y: auto; padding-right: 4px; }
.run-record-row { display: grid; grid-template-columns: 36px 1fr auto auto; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid #ecf0f5; border-radius: 7px; background: #fafbfd; font-size: 11px; transition: background .15s ease; }
.run-record-row:hover { background: #f3f6fa; }
.run-record-row.status-running { border-color: #b9d2f8; background: #f2f7ff; }
.run-record-row.status-succeeded { border-color: #d1ecde; }
.run-record-row.status-failed { border-color: #f7d2cf; }
.run-record-index { color: #8896a8; font-size: 10px; font-weight: 700; text-align: center; }
.run-record-info { display: grid; gap: 2px; min-width: 0; }
.run-record-domain-row { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.run-record-domain { color: #27384f; font-size: 11px; word-break: break-all; }
.run-record-org { font-size: 10px; }
.run-record-status { display: flex; align-items: center; }
.pill-running { animation: pulse 1.4s infinite ease-in-out; }
.run-record-action { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.run-website-link, .run-detail-link { font-size: 10px; color: #3159c9; padding: 2px 4px; text-decoration: none; cursor: pointer; }
.run-website-link:hover, .run-detail-link:hover { text-decoration: underline; }
.run-retry-link { color: #3159c9; font-size: 10px; padding: 2px 4px; text-decoration: none; cursor: pointer; }
.run-retry-link:hover { text-decoration: underline; }

.section-heading-wrap { align-items: flex-end; flex-wrap: wrap; margin-bottom: 19px; }
.toolbar { display: flex; align-items: flex-end; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
.select-wrap { display: grid; gap: 5px; color: #8290a2; font-size: 10px; font-weight: 750; }
.select-wrap select, .section-search input { min-width: 142px; max-width: 290px; height: 37px; padding: 0 10px; border: 1px solid #dfe5ed; border-radius: 9px; outline: none; color: #34445a; background: #fff; font-size: 11px; }
.select-wrap:first-child select { min-width: 250px; max-width: 350px; }
.section-search { display: block; }
.section-search input { width: 185px; margin-top: 15px; }
.section-list { display: grid; gap: 10px; }
.section-card { overflow: hidden; border: 1px solid #e5eaf1; border-radius: 13px; background: #fff; transition: border-color .15s, box-shadow .15s; }
.section-card[open] { border-color: #d3ddef; box-shadow: 0 7px 20px rgba(24, 47, 82, .035); }
.section-summary { display: flex; justify-content: space-between; align-items: center; gap: 15px; min-height: 68px; padding: 12px 15px; cursor: pointer; list-style: none; }
.section-summary::-webkit-details-marker { display: none; }
.section-summary::after { content: "⌄"; margin-left: 1px; color: #9aa6b7; font-size: 18px; transition: transform .18s; }
.section-card[open] > .section-summary::after { transform: rotate(180deg); }
.section-title-area { display: flex; align-items: center; gap: 11px; min-width: 150px; }
.section-type-icon { display: grid; place-items: center; flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; color: #526db8; background: #f0f4ff; font-size: 13px; font-weight: 800; }
.section-title-text { display: grid; gap: 4px; }
.section-title-text strong { font-size: 13px; }
.section-id { color: #8996a8; font-size: 10px; }
.section-badges { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 5px; }
.section-badges .pill { font-size: 9px; }
.section-body { padding: 0 15px 15px; border-top: 1px solid #f0f2f6; }
.section-hint { margin: 12px 0 6px; color: #6d7a8e; font-size: 12px; }
.section-meta { display: flex; flex-wrap: wrap; gap: 6px 15px; margin-bottom: 12px; color: #929dae; font-size: 10px; }
.field-grid-header, .field-row { display: grid; grid-template-columns: minmax(150px, .75fr) minmax(180px, 1fr) minmax(180px, 1fr); gap: 9px; }
.field-grid-header { padding: 8px 10px; border: 1px solid #e8edf3; border-radius: 8px 8px 0 0; color: #738197; background: #f7f9fc; font-size: 10px; font-weight: 800; }
.field-row { padding: 10px; border: 1px solid #e8edf3; border-top: 0; background: #fff; }
.field-row:last-child { border-radius: 0 0 8px 8px; }
.field-meta { min-width: 0; padding-top: 3px; }
.field-path { display: inline-block; color: #354d79; font-size: 11px; overflow-wrap: anywhere; }
.field-cell { min-width: 0; padding: 8px; border-radius: 8px; background: #f8f9fb; }
.field-cell.has-value { background: #f3f8f6; }
.field-cell .cell-label { display: none; }
.field-cell pre { max-height: 210px; margin: 0; color: #5a687b; font: 11px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; overflow-wrap: anywhere; overflow: auto; }
.field-cell.has-value pre { color: #25455d; }
.empty-inline { margin: 0; padding: 18px; border: 1px dashed #dfe5ed; border-radius: 9px; color: #8692a3; text-align: center; font-size: 12px; }

.raw-panel { margin-top: 16px; padding: 16px 20px; }
.raw-panel > summary { color: #50617a; cursor: pointer; font-size: 12px; font-weight: 750; }
.raw-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; margin-top: 14px; }
.raw-columns h3 { color: #758297; font-size: 11px; }
.raw-columns pre { max-height: 470px; overflow: auto; padding: 13px; border-radius: 9px; background: #f6f8fb; color: #49586d; font: 10px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.page-footer { padding: 20px 4px 0; color: #93a0af; font-size: 10px; }
.page-footer code { color: #67768c; }
.empty-state { margin-top: 22px; padding: 54px 20px; border: 1px dashed #d7e0eb; border-radius: 18px; background: rgba(255,255,255,.62); text-align: center; }
.empty-state h2 { margin: 12px 0 6px; font-size: 17px; }
.empty-state p { max-width: 490px; margin: 0 auto; color: var(--muted); font-size: 12px; line-height: 1.6; }
.empty-illustration { position: relative; width: 70px; height: 48px; margin: 0 auto; }
.empty-illustration span { position: absolute; width: 43px; height: 30px; border: 1px solid #b9c8e8; border-radius: 7px; background: #f3f6ff; transform: rotate(-8deg); }
.empty-illustration span:nth-child(2) { left: 15px; top: 8px; border-color: #bce1d6; background: #eff9f5; transform: rotate(7deg); }
.empty-illustration span:nth-child(3) { left: 24px; top: 14px; border-color: #c7d3f0; background: #fff; transform: rotate(-1deg); }
.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; }

@media (max-width: 980px) {
  .automation-workspace { grid-template-columns: 1fr; }
  .summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .business-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .search-panel { grid-template-columns: 1fr; gap: 16px; }
  .lookup-assist { grid-column: 1; }
  .privacy-note { grid-column: 1; }
}

@media (max-width: 720px) {
  .app-shell { width: calc(100% - 28px); padding-top: 18px; }
  .login-card { padding: 25px; }
  .topbar { margin-bottom: 17px; }
  .search-panel, .business-panel, .content-panel, .collection-panel { padding: 17px; }
  .collection-automation-panel > .batch-panel { margin: 0 -17px -17px; padding: 20px 17px 22px; }
  .identity-row { display: block; margin-top: 21px; }
  .identity-meta { justify-content: flex-start; max-width: none; margin-top: 12px; }
  .summary-grid { gap: 9px; }
  .metric-card { min-height: 128px; padding: 12px; grid-template-columns: 31px 1fr; column-gap: 8px; }
  .metric-icon { width: 30px; height: 30px; }
  .metric-value { font-size: 22px; }
  .business-grid { grid-template-columns: 1fr; }
  .collection-search-actions { flex: 1 1 100%; }
  .collection-search { max-width: none; }
  .collection-read-time { flex: 1 1 100%; text-align: left; }
  .collection-table th, .collection-table td { max-width: 260px; padding: 8px 10px; }
  .collection-table th.collection-version-heading, .collection-table td.collection-version-cell { width: 68px; min-width: 68px; max-width: 68px; }
  .collection-table th.collection-pages-heading, .collection-table td.collection-pages-cell { width: 676px; min-width: 676px; max-width: 676px; }
  .collection-table td.collection-pages-cell .table-json-details { max-width: 100%; }
  .collection-table td.collection-pages-cell .table-json-value { max-height: 420px; max-width: 100%; }
  .table-json-details { max-width: 250px; }
  .table-json-value { max-width: 230px; }
  .batch-eligible { flex: 1 1 100%; margin: 2px 0 0; }
  .batch-eligible-result { margin-top: 10px; }
  .batch-count { flex: 1 1 0; min-width: 100px; }
  .batch-count input { width: 100%; }
  .range-separator { display: none; }
  .batch-controls > .run-button { flex: 1 1 100%; justify-content: center; }
  .automation-step { padding: 13px; }
  .section-heading-wrap { align-items: stretch; }
  .toolbar { justify-content: flex-start; width: 100%; }
  .preview-heading { display: grid; }
  .preview-heading .run-button { justify-content: center; }
  .preview-record-heading { align-items: flex-start; flex-direction: column; }
  .preview-generate { align-self: flex-start; }
  .run-record-row { grid-template-columns: 30px minmax(0, 1fr); align-items: start; }
  .run-record-status, .run-record-action { grid-column: 2; }
  .run-record-action { justify-content: flex-start; }
  .select-wrap:first-child { flex: 1 1 100%; }
  .select-wrap:first-child select { width: 100%; max-width: none; }
  .section-search { flex: 1; }
  .section-search input { width: 100%; }
  .section-summary { align-items: flex-start; flex-wrap: wrap; }
  .section-badges { justify-content: flex-start; padding-left: 45px; }
  .field-grid-header { display: none; }
  .field-row { grid-template-columns: 1fr; gap: 6px; padding: 9px; }
  .field-meta { padding: 2px 0 4px; }
  .field-cell { display: grid; grid-template-columns: 92px 1fr; align-items: start; gap: 7px; }
  .field-cell .cell-label { display: block; color: #8a96a5; font-size: 9px; font-weight: 700; }
  .field-cell pre { min-width: 0; }
  .raw-columns { grid-template-columns: 1fr; }
}

@media (max-width: 420px) {
  .app-shell { width: calc(100% - 20px); }
  .collection-search-actions .run-button { flex: 1 1 100%; justify-content: center; }
  .login-shell { padding: 14px; }
  .login-card { padding: 21px; }
  .topbar h1 { font-size: 17px; }
  .topbar-actions { gap: 10px; }
  .topbar-actions .run-button { min-height: 36px; padding: 0 10px; }
  .logout-button { padding: 4px 0; }
  .settings-dialog { padding: 18px; }
  .settings-group { grid-template-columns: 1fr; }
  .settings-add-form { grid-template-columns: 1fr; }
  .settings-add-form .run-button { grid-column: 1; grid-row: auto; justify-self: start; }
  .summary-grid { grid-template-columns: 1fr 1fr; }
  .metric-card { grid-template-columns: 1fr; grid-template-rows: auto auto auto; }
  .metric-icon { display: none; }
  .metric-label { font-size: 10px; }
  .metric-value { font-size: 20px; }
  .metric-detail { font-size: 9px; }
}