:root {
  color-scheme: light;
  --canvas: #f1f4f8;
  --canvas-deep: #e7ecf2;
  --paper: #ffffff;
  --paper-soft: #f8fafc;
  --ink: #172333;
  --ink-soft: #56677b;
  --muted: #7c8999;
  --line: #d9e0e8;
  --line-strong: #bdc9d8;
  --sidebar: #111a28;
  --sidebar-raised: #1b293c;
  --sidebar-text: #e8eef6;
  --sidebar-muted: #91a0b3;
  --blue: #2d73ee;
  --blue-dark: #1955c5;
  --blue-soft: #e9f0ff;
  --green: #15734b;
  --green-soft: #e7f7ef;
  --amber: #9b6410;
  --amber-soft: #fff5dd;
  --red: #a33e40;
  --red-dark: #7e2d32;
  --red-soft: #fff0f0;
  --purple: #6851a6;
  --shadow-sm: 0 4px 12px rgba(25, 42, 64, .05);
  --shadow: 0 16px 34px rgba(25, 42, 64, .07);
  --radius: 14px;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--canvas); scroll-behavior: smooth; }
body { min-width: 320px; margin: 0; background: linear-gradient(180deg, #f7f9fb 0, var(--canvas) 28rem, #edf1f5 100%); color: var(--ink); line-height: 1.5; text-rendering: optimizeLegibility; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .58; }
button, input, select { min-height: 36px; }
:focus-visible { outline: 3px solid rgba(45, 115, 238, .45); outline-offset: 2px; }

.skip-link { position: fixed; z-index: 100; top: 12px; left: 12px; padding: 9px 13px; border-radius: 8px; background: var(--sidebar); color: #fff; text-decoration: none; transform: translateY(-180%); transition: transform .15s ease; }
.skip-link:focus { transform: translateY(0); }
.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; }
[hidden] { display: none !important; }

.app-shell { display: grid; grid-template-columns: 276px minmax(0, 1fr); min-height: 100vh; }
.app-sidebar { display: flex; flex-direction: column; gap: 28px; min-height: 100vh; padding: 24px 17px 18px; color: var(--sidebar-text); background: linear-gradient(180deg, #101928 0, #152337 58%, #101a29 100%); border-right: 1px solid rgba(255,255,255,.06); }
.sidebar-brand { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; padding: 2px 4px; }
.brand-mark { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 12px; background: linear-gradient(145deg, #4b93ff, #205ed5); color: white; font-size: 12px; font-weight: 900; letter-spacing: .05em; box-shadow: 0 9px 22px rgba(31, 99, 234, .3); }
.eyebrow, .section-kicker { margin: 0; color: #5c8fff; font-size: 10px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.sidebar-brand .eyebrow { color: #8ba5c7; letter-spacing: .12em; }
.sidebar-brand h1 { margin: 5px 0 0; color: #fff; font-size: 1.35rem; font-weight: 760; letter-spacing: -.025em; line-height: 1.1; }
.sidebar-copy { grid-column: 1 / -1; margin: 0; color: var(--sidebar-muted); font-size: 12.5px; line-height: 1.6; }
.ops-nav { display: grid; gap: 4px; }
.ops-nav-item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 42px; padding: 7px 11px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: #b9c6d6; text-align: left; transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease; }
.ops-nav-item:hover { background: rgba(255,255,255,.06); color: #fff; }
.ops-nav-item.is-active { border-color: rgba(125, 174, 255, .22); background: linear-gradient(135deg, rgba(62, 123, 239, .97), rgba(34, 91, 206, .95)); color: #fff; box-shadow: 0 4px 14px rgba(22, 75, 171, .25); }
.ops-nav-item:active { transform: translateY(1px); }
.nav-icon { display: grid; width: 24px; height: 24px; flex: 0 0 24px; place-items: center; border-radius: 6px; background: rgba(255,255,255,.08); color: #b8cbed; font-size: 14px; line-height: 1; }
.ops-nav-item.is-active .nav-icon { background: rgba(255,255,255,.18); color: #fff; }
.nav-copy { display: flex; align-items: center; min-width: 0; }
.nav-copy strong { font-size: 13.5px; font-weight: 600; letter-spacing: -0.01em; }
.nav-copy small { display: none !important; }
.sidebar-footer { display: grid; gap: 10px; margin-top: auto; }
.connection-chip { display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 5px 7px 5px 10px; border: 1px solid rgba(255,255,255,.1); border-radius: 8px; background: rgba(255,255,255,.045); color: #cbd6e3; font-size: 11.5px; }
.connection-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.status-dot { display: inline-block; width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: #8190a2; box-shadow: 0 0 0 2px rgba(129,144,162,.12); }
.connection-chip[data-state="ok"] .status-dot, .topbar-health .status-dot[data-state="ok"] { background: #56ca91; box-shadow: 0 0 0 2px rgba(86,202,145,.18); }
.connection-chip[data-state="error"] .status-dot { background: #f07c7d; box-shadow: 0 0 0 2px rgba(240,124,125,.18); }
.icon-button { display: inline-grid; width: 25px; height: 25px; flex: 0 0 25px; place-items: center; margin-left: auto; padding: 0; border: 0; border-radius: 6px; background: rgba(255,255,255,.08); color: #d8e4f1; font-size: 14px; line-height: 1; }
.icon-button:hover { background: rgba(255,255,255,.16); }
.icon-button[aria-busy="true"] { animation: spin .8s linear infinite; }
.sidebar-meta { display: none !important; }

.workspace { min-width: 0; padding: 20px 24px 40px; }
.workspace-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 20px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.95); box-shadow: var(--shadow-sm); }
.workspace-title-block { min-width: 0; }
.workspace-header h2 { margin: 2px 0 4px; color: #182535; font-size: 1.35rem; font-weight: 750; letter-spacing: -.02em; line-height: 1.2; }
.workspace-copy { max-width: 780px; margin: 0; color: var(--ink-soft); font-size: 12.5px; line-height: 1.5; }
.workspace-badges { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.mode-badge, .run-state, .pill-chip, .read-only-chip, .status-chip, .capability-chip { display: inline-flex; align-items: center; justify-content: center; min-height: 24px; padding: 3px 9px; border: 1px solid transparent; border-radius: 6px; font-size: 11px; font-weight: 650; letter-spacing: .01em; line-height: 1.1; white-space: nowrap; }
.mode-badge { background: var(--blue-soft); color: #285bc1; }
.mode-badge[data-mode="apply"] { background: #ffe6e6; color: var(--red-dark); }
.pill-chip { border-color: var(--line); background: #fff; color: var(--ink-soft); font-weight: 600; letter-spacing: 0; }
.usage-guide { margin-top: 12px; border: 1px solid #cdd9e7; border-radius: 14px; background: rgba(255,255,255,.9); box-shadow: var(--shadow-sm); }
.usage-guide summary { display: flex; align-items: center; gap: 12px; min-height: 43px; padding: 10px 15px; color: #29415e; cursor: pointer; list-style: none; }
.usage-guide summary::-webkit-details-marker { display: none; }
.usage-guide summary::before { content: '＋'; display: grid; width: 22px; height: 22px; place-items: center; border-radius: 50%; background: var(--blue-soft); color: var(--blue-dark); font-weight: 800; }
.usage-guide[open] summary::before { content: '−'; }
.usage-guide-title { font-size: 14px; font-weight: 700; }
.usage-guide-summary { color: var(--muted); font-size: 12px; }
.usage-guide-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 0 12px 12px; }
.usage-guide-step { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 10px 12px; border: 1px solid #dce4ed; border-radius: 10px; background: #fbfcfe; color: #53677d; text-align: left; }
.usage-guide-step:hover, .usage-guide-step:focus-visible, .usage-guide-step.is-active { border-color: #9dbcf4; background: var(--blue-soft); color: #2457b7; }
.guide-step-index { display: grid; width: 25px; height: 25px; flex: 0 0 25px; place-items: center; border-radius: 50%; background: #e6ebf2; color: #5d7085; font-size: 12px; font-weight: 800; }
.usage-guide-step.is-active .guide-step-index { background: var(--blue); color: #fff; }
.usage-guide-step span:last-child { display: grid; gap: 2px; min-width: 0; }
.usage-guide-step strong { font-size: 12.5px; }
.usage-guide-step small { overflow: hidden; color: #7c8999; font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }
.read-only-chip { min-height: 22px; padding: 3px 7px; background: #eef3f8; color: #596b7f; font-size: 9px; letter-spacing: .08em; }

.workspace-topbar { display: flex; align-items: center; justify-content: space-between; gap: 15px; min-height: 47px; margin: 14px 0 17px; padding: 8px 12px 8px 15px; border: 1px solid var(--line); border-radius: 11px; background: rgba(255,255,255,.68); box-shadow: var(--shadow-sm); }
.topbar-context, .topbar-actions, .topbar-health, .heading-actions, .inline-actions, .table-toolbar-line, .pagination, .pagination-actions, .import-actions-row, .subsection-heading { display: flex; align-items: center; }
.topbar-context { min-width: 0; gap: 8px; }
.topbar-context { flex: 1 1 240px; }
.topbar-actions { flex-wrap: wrap; justify-content: flex-end; }
.breadcrumb-label { color: #26394d; font-size: 11px; font-weight: 800; }
.topbar-divider { color: #a2afbd; }
.topbar-note { overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.topbar-actions { gap: 8px; flex-shrink: 0; }
.topbar-health { gap: 6px; color: var(--ink-soft); font-size: 10px; font-weight: 700; }
.topbar-health .status-dot { width: 7px; height: 7px; flex-basis: 7px; box-shadow: none; }
.flow-note { color: #5f7286; font-size: 10px; font-weight: 750; white-space: nowrap; }
.template-context { display: grid; grid-template-columns: auto minmax(150px, 205px); align-items: center; gap: 2px 7px; min-width: 0; }
.template-context label { color: #4c6075; font-size: 9px; font-weight: 850; white-space: nowrap; }
.template-context select { width: 100%; min-height: 31px; padding: 5px 8px; border: 1px solid #cbd6e2; border-radius: 7px; background: #fff; color: #26394d; font-size: 11px; font-weight: 750; }
.template-context select:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(45,115,238,.13); outline: none; }
.template-context span { grid-column: 2; overflow: hidden; color: #8290a0; font-size: 9px; line-height: 1.25; text-overflow: ellipsis; white-space: normal; }
.alert { margin: 0 0 17px; padding: 11px 13px; border: 1px solid; border-radius: 10px; font-size: 12px; }
.alert-error { border-color: #ebc0c0; background: var(--red-soft); color: var(--red-dark); }
.alert-notice { border-color: #e7d4a1; background: var(--amber-soft); color: #78520f; }

.page-section { display: grid; gap: 17px; }
.operations-flow { display: grid; gap: 17px; }
.operations-flow > #view-panel { order: 1; }
.operations-flow > #export-panel { order: 2; }
.operations-flow > #import-panel { order: 3; }
.operations-flow > #product-intake-panel { order: 4; }
.section-grid { display: grid; grid-template-columns: minmax(0, 1.43fr) minmax(300px, .74fr); gap: 17px; align-items: start; }
.panel, .settings-card, .export-files { min-width: 0; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255,255,255,.94); box-shadow: var(--shadow-sm); }
.panel { padding: 21px; }
.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 8px; }
.compact-heading { align-items: center; }
.panel h2 { margin: 4px 0 0; color: #1a2838; font-size: 20px; font-weight: 760; letter-spacing: -.03em; line-height: 1.2; }
.panel h3 { color: #233447; font-size: 14px; }
.panel-intro { max-width: 760px; margin: 0 0 18px; color: var(--ink-soft); font-size: 12px; line-height: 1.55; }

.button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 37px; padding: 8px 13px; border: 1px solid transparent; border-radius: 8px; font-size: 12px; font-weight: 760; line-height: 1; text-decoration: none; transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease; }
.button:active:not(:disabled) { transform: translateY(1px); }
.button-small { min-height: 31px; padding: 6px 10px; font-size: 11px; }
.button-primary { background: linear-gradient(180deg, #397ff2, #2364db); color: white; box-shadow: 0 7px 14px rgba(38, 100, 219, .18); }
.button-primary:hover:not(:disabled) { background: linear-gradient(180deg, #3374e6, #1e57c5); }
.button-primary[data-mode="apply"] { background: linear-gradient(180deg, #bd5558, #9f383d); box-shadow: 0 7px 14px rgba(163, 62, 64, .18); }
.button-light { border-color: #ccd7e3; background: #f8fafc; color: #2b4158; }
.button-light:hover:not(:disabled), .button-quiet:hover:not(:disabled) { border-color: #aebfd4; background: #eef4fb; color: #1f56b2; }
.button-quiet { border-color: #d7e0e9; background: #fff; color: #526477; }
.button-large { min-width: 190px; min-height: 45px; font-size: 13px; }
.button-spinner { display: none; width: 14px; height: 14px; border: 2px solid rgba(255,255,255,.4); border-top-color: white; border-radius: 50%; }
.button-primary[aria-busy="true"] .button-spinner { display: inline-block; animation: spin .8s linear infinite; }

.toolbar { display: grid; align-items: end; gap: 10px; padding: 13px; border: 1px solid #e0e7ef; border-radius: 11px; background: #f8fafc; }
.view-toolbar { grid-template-columns: minmax(190px, 1fr) minmax(220px, auto) 70px auto; }
.export-toolbar { grid-template-columns: minmax(0, 1fr) auto; }
.toolbar-search, .toolbar-query, .export-query-field { min-width: 0; }
.toolbar-submit { white-space: nowrap; }
.field { min-width: 0; }
.field label, .danger-callout label { display: block; margin: 0 0 5px; color: #3d5064; font-size: 10px; font-weight: 800; letter-spacing: .02em; }
.optional { color: var(--muted); font-size: 9px; font-weight: 500; }
.field input, .field select, .danger-callout input, .compact-select { width: 100%; min-height: 37px; padding: 8px 10px; border: 1px solid #cbd6e2; border-radius: 7px; outline: none; background: #fff; color: var(--ink); font-size: 12px; }
.field input:focus, .field select:focus, .danger-callout input:focus, .compact-select:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(45,115,238,.13); }
.search-input-wrap { position: relative; }
.search-input-wrap > span { position: absolute; top: 50%; left: 10px; color: #76879a; font-size: 17px; line-height: 1; pointer-events: none; transform: translateY(-53%); }
.search-input-wrap input { padding-left: 30px; }

.advanced-filters { min-width: 0; border: 1px solid #d8e2ec; border-radius: 8px; background: #fff; }
.advanced-filters summary { display: flex; align-items: center; min-height: 37px; padding: 8px 10px; cursor: pointer; color: #52677d; font-size: 11px; font-weight: 760; list-style-position: inside; }
.advanced-filters summary::marker { color: #75879a; }
.advanced-filters[open] summary { border-bottom: 1px solid #e2e8ef; color: #2a5fae; }
.advanced-fields { display: grid; gap: 9px; padding: 10px; }
.view-advanced-fields { grid-template-columns: minmax(180px, 1.35fr) minmax(110px, .8fr) minmax(110px, .8fr); }
.export-advanced-fields { grid-template-columns: minmax(180px, 1.5fr) 105px 105px 130px; }
.view-advanced, .export-advanced { align-self: end; }

.summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 15px; }
.summary-card { display: grid; gap: 4px; min-height: 76px; padding: 12px 13px; border: 1px solid #dfe6ee; border-radius: 10px; background: linear-gradient(180deg, #fff, #f8fafc); }
.summary-card span { color: #7a899a; font-size: 9px; font-weight: 900; letter-spacing: .1em; }
.summary-card strong { overflow: hidden; color: #1b2b3e; font-size: 21px; font-weight: 780; letter-spacing: -.04em; line-height: 1.05; text-overflow: ellipsis; white-space: nowrap; }
.summary-card small { color: #8c99a8; font-size: 10px; }
.summary-updated strong { color: var(--green); }
.summary-failed strong { color: var(--red); }
.matrix-summary { margin-bottom: 15px; }

.table-toolbar-line { justify-content: space-between; gap: 12px; min-height: 24px; }
.table-caption { margin: 0; color: #728194; font-size: 10px; font-weight: 750; }
.table-state { color: #8593a3; font-size: 10px; font-weight: 700; }
.table-scroll { overflow: auto; border: 1px solid #d9e1ea; border-radius: 10px; background: #fff; }
.data-table { width: 100%; min-width: 860px; border-collapse: separate; border-spacing: 0; text-align: left; font-size: 11px; }
.data-table th { position: sticky; top: 0; z-index: 1; padding: 9px 10px; border-bottom: 1px solid #d7e0ea; background: #f3f6fa; color: #4b5e73; font-size: 9px; font-weight: 850; letter-spacing: .045em; text-transform: uppercase; white-space: nowrap; }
.data-table td { max-width: 260px; padding: 9px 10px; border-bottom: 1px solid #e8edf3; color: #304256; vertical-align: top; overflow-wrap: anywhere; }
.data-table tbody tr:nth-child(even) td { background: #fcfdff; }
.data-table tbody tr:hover td { background: #f3f7ff; }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table .status-cell { font-weight: 800; white-space: nowrap; }
.data-table .status-success { color: var(--green); }
.data-table .status-warning { color: var(--amber); }
.data-table .status-error { color: var(--red-dark); }
.data-table .status-archived, .data-table .status-draft { color: #657386; }
.data-table .status-active { color: var(--green); }
.data-table .value-public { display: inline-flex; padding: 2px 7px; border-radius: 999px; background: var(--green-soft); color: var(--green); font-weight: 800; }
.data-table .value-private { display: inline-flex; padding: 2px 7px; border-radius: 999px; background: #eef2f6; color: #657386; font-weight: 800; }
.matrix-table { min-width: 1180px; }
.matrix-table-wrap { max-height: 600px; }
.matrix-table td { height: 36px; padding-block: 7px; overflow: hidden; vertical-align: middle; white-space: nowrap; }
.matrix-table .cell-value { display: block; width: 100%; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.matrix-table td[data-column="Title"] .cell-value,
.matrix-table td[data-column="Body HTML"] .cell-value,
.matrix-table td[data-column="Value"] .cell-value,
.matrix-table td[data-column="Metafield: Value"] .cell-value { max-width: 300px; }
.cell-detail-trigger { padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: zoom-in; }
.cell-detail-trigger:hover, .cell-detail-trigger:focus-visible { color: #1f63c8; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; }
.cell-detail-trigger:focus-visible { border-radius: 3px; outline: 2px solid rgba(45,115,238,.35); outline-offset: 2px; }
.cell-detail-dialog { width: min(720px, calc(100vw - 32px)); max-height: min(76vh, 720px); padding: 0; border: 1px solid #cfd9e5; border-radius: 14px; background: #fff; box-shadow: 0 24px 70px rgba(18,36,60,.25); color: var(--ink); }
.cell-detail-dialog::backdrop { background: rgba(17,31,49,.46); backdrop-filter: blur(2px); }
.cell-detail-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 18px 20px 14px; border-bottom: 1px solid #e3e9f0; }
.cell-detail-heading h2 { margin: 3px 0 0; font-size: 19px; }
.cell-detail-kicker { color: var(--blue); font-size: 9px; font-weight: 900; letter-spacing: .1em; }
.cell-detail-close { width: 32px; height: 32px; border: 1px solid #d6e0ea; border-radius: 8px; background: #f7f9fc; color: #5d6e80; font-size: 20px; }
.cell-detail-column { margin: 16px 20px 0; color: #53677d; font-size: 11px; font-weight: 850; }
.cell-detail-value { max-height: 52vh; margin: 9px 20px 20px; padding: 14px; overflow: auto; border: 1px solid #dde5ee; border-radius: 9px; background: #f7f9fc; color: #24384d; font: 12px/1.65 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.product-preview-dialog { max-width: 760px; }
.product-preview { display: grid; grid-template-columns: minmax(190px, .8fr) minmax(0, 1.2fr); gap: 22px; padding: 20px; }
.product-preview-media { display: grid; min-height: 220px; place-items: center; border-radius: 12px; background: #f2f5f8; color: #7d8b9b; font-size: 11px; text-align: center; }
.product-preview-media img { width: 100%; height: 100%; max-height: 330px; border-radius: 12px; object-fit: cover; }
.product-preview-content { min-width: 0; }
.product-preview-kicker { margin: 0 0 4px; color: var(--blue); font-size: 11px; font-weight: 800; }
.product-preview-content h3 { margin: 0; color: #192a3d; font-size: 23px; line-height: 1.25; }
.product-preview-type { margin: 6px 0 0; color: var(--muted); font-size: 11px; }
.product-preview-price { margin: 18px 0 14px; color: #1c2f45; font-size: 20px; font-weight: 850; }
.product-preview-description { padding: 14px 0; border-top: 1px solid #e4eaf1; color: #455b72; font-size: 12px; line-height: 1.7; }
.product-preview-description h1, .product-preview-description h2, .product-preview-description h3 { margin: 12px 0 4px; color: #24384d; font-size: 14px; }
.product-preview-description p { margin: 5px 0; }
.product-preview-description ul, .product-preview-description ol { padding-left: 18px; }
.product-preview-status { display: inline-flex; padding: 4px 8px; border-radius: 999px; background: #eef2f6; color: #657386; font-size: 10px; font-weight: 800; }
.product-preview-source { margin-top: 15px; border-top: 1px solid #e4eaf1; color: #5b6e82; font-size: 11px; }
.product-preview-source summary { padding: 10px 0; cursor: pointer; font-weight: 800; }
.product-preview-source pre { margin: 0 0 8px; padding: 10px; max-height: 150px; overflow: auto; border-radius: 8px; background: #f7f9fc; white-space: pre-wrap; }
.results-table { min-width: 980px; }
.jobs-table { min-width: 920px; }
.jobs-table .job-type { color: #315fbc; font-weight: 850; letter-spacing: .04em; }
.pagination { justify-content: space-between; gap: 12px; margin-top: 10px; }
.pagination-summary { color: #718093; font-size: 11px; font-weight: 700; }
.pagination-actions { gap: 7px; }
.empty-state { margin: 13px 0 0; padding: 20px 13px; border: 1px dashed #c7d3df; border-radius: 9px; color: #7a899a; font-size: 12px; text-align: center; }

.stepper { display: flex; align-items: stretch; gap: 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 13px; background: rgba(255,255,255,.78); box-shadow: var(--shadow-sm); }
.step { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 5px 8px; border-radius: 9px; color: #8592a1; }
.step.is-active { background: var(--blue-soft); color: #265abd; }
.step.is-complete { color: var(--green); }
.step.is-complete .step-index { background: var(--green); color: white; }
.step.is-blocked { opacity: .7; }
.step-index { display: grid; width: 23px; height: 23px; flex: 0 0 23px; place-items: center; border-radius: 50%; background: #e1e7ee; color: #697a8d; font-size: 10px; font-weight: 900; }
.step.is-active .step-index { background: var(--blue); color: white; }
.step > span:last-child { display: grid; gap: 0; min-width: 0; }
.step strong { font-size: 11px; line-height: 1.2; }
.step small { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.step-connector { align-self: center; width: 22px; height: 1px; background: #d2dae4; }
.step-connector.is-complete { background: #79c6a2; }

.drop-zone { border: 1px dashed #b9c7d7; border-radius: 12px; background: linear-gradient(180deg, #fafcff, #f1f5f9); transition: border-color .15s ease, background .15s ease, box-shadow .15s ease; }
.drop-zone:hover, .drop-zone.is-dragover { border-color: var(--blue); background: linear-gradient(180deg, #f1f6ff, #e9f1ff); }
.drop-zone.is-dragover { box-shadow: 0 0 0 3px rgba(45,115,238,.13); }
.drop-zone.has-error { border-color: #dc7b7f; background: var(--red-soft); }
.drop-zone-label { display: flex; align-items: center; flex-direction: column; justify-content: center; gap: 6px; min-height: 155px; padding: 22px; cursor: pointer; text-align: center; }
.upload-mark { display: grid; width: 38px; height: 38px; place-items: center; margin-bottom: 2px; border: 1px solid #c8d7eb; border-radius: 10px; background: #fff; color: var(--blue); font-size: 19px; font-weight: 850; }
.drop-title { color: #26394d; font-size: 14px; font-weight: 800; }
.drop-hint { color: #7b8999; font-size: 11px; }
.drop-zone .button-light { margin-top: 6px; }
.drop-feedback { min-height: 18px; margin: 7px 2px 0; color: #7b8999; font-size: 10px; }
.drop-feedback.error { color: var(--red-dark); }

.file-summary { margin-top: 14px; padding: 14px; border: 1px solid #e0e7ef; border-radius: 11px; background: #fbfcfe; }
.subsection-heading { justify-content: space-between; gap: 12px; }
.subsection-heading h3 { margin: 0; color: #26394d; font-size: 13px; font-weight: 800; }
.text-button { padding: 3px 1px; border: 0; background: transparent; color: #2b65c9; font-size: 11px; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.text-button:hover { color: var(--red-dark); }
.file-meta-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) 90px 100px minmax(0, 2fr); gap: 11px; margin: 13px 0 0; }
.file-meta-grid div { min-width: 0; }
.file-meta-grid dt { color: #7a8999; font-size: 9px; font-weight: 800; text-transform: uppercase; }
.file-meta-grid dd { margin: 3px 0 0; overflow-wrap: anywhere; color: #2b3e53; font-size: 11px; font-weight: 750; }
.meta-wide { grid-column: span 1; }
.column-statuses { display: flex; flex-wrap: wrap; gap: 4px; }
.column-status { display: inline-flex; align-items: center; gap: 4px; padding: 3px 5px; border-radius: 4px; background: var(--green-soft); color: var(--green); font-size: 9px; font-weight: 750; }
.column-status::before { content: "✓"; font-weight: 900; }
.column-status.missing { background: var(--red-soft); color: var(--red-dark); }
.column-status.missing::before { content: "!"; }
.column-status.pending { background: var(--amber-soft); color: var(--amber); }
.column-status.pending::before { content: "•"; }
.preview-wrap { margin-top: 13px; }
.preview-table { min-width: 650px; }
.xlsx-note { display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; padding: 9px 10px; border: 1px solid #e2d5b4; border-radius: 7px; background: #fffbf0; color: #7c5d1e; font-size: 10px; }
.info-icon { display: inline-grid; width: 15px; height: 15px; flex: 0 0 15px; place-items: center; border-radius: 50%; background: #e8cf8f; color: #644a0e; font-size: 10px; font-weight: 900; }

.import-actions-row { gap: 10px; margin-top: 14px; }
.inline-status { color: #798799; font-size: 10px; }
.analysis-card { margin-top: 11px; padding: 13px; border: 1px solid #dce6f2; border-radius: 10px; background: #f7faff; }
.status-chip { border-color: #c9d8eb; background: #edf3fb; color: #55708e; }
.status-chip.is-ready { border-color: #b8dfcc; background: var(--green-soft); color: var(--green); }
.status-chip.is-warning { border-color: #ecd79e; background: var(--amber-soft); color: var(--amber); }
.status-chip.is-error { border-color: #e9bfc0; background: var(--red-soft); color: var(--red-dark); }
.analysis-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 11px; }
.analysis-stat { display: grid; gap: 2px; padding: 8px 9px; border: 1px solid #e0e8f1; border-radius: 7px; background: #fff; }
.analysis-stat span { color: #7a8999; font-size: 9px; font-weight: 700; }
.analysis-stat strong { overflow: hidden; color: #2b4059; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.issue-list { display: grid; gap: 4px; margin: 10px 0 0; padding: 0 0 0 17px; color: #6e7c8d; font-size: 10px; }
.issue-list .issue-ok { color: var(--green); }

.fieldset { min-width: 0; margin: 16px 0 0; padding: 14px; border: 1px solid #dfe6ee; border-radius: 11px; }
.fieldset legend { padding: 0 6px; color: #4f6277; font-size: 10px; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.input-suffix { position: relative; }
.input-suffix input { padding-right: 32px; }
.input-suffix span { position: absolute; top: 50%; right: 10px; color: #8795a3; font-size: 10px; pointer-events: none; transform: translateY(-50%); }
.field label, .field-label { display: block; margin-bottom: 5px; font-size: 13.5px; font-weight: 600; color: #202223; }
.field-help { margin: 4px 0 0; color: #6d7175; font-size: 12.5px; line-height: 1.45; }
.field input[aria-invalid="true"], .danger-callout input[aria-invalid="true"] { border-color: var(--red); background: var(--red-soft); }
.custom-location { display: grid; gap: 4px; margin-top: 8px; padding-top: 9px; border-top: 1px solid #e4e9ef; }
.custom-location label { margin-bottom: 0; font-size: 11px; }
.mode-fieldset { display: grid; gap: 7px; }
.mode-option { display: flex; align-items: flex-start; gap: 9px; padding: 10px; border: 1px solid transparent; border-radius: 8px; }
.mode-option:has(input:checked) { border-color: #bcd6fa; background: #f3f7ff; }
.mode-option.mode-apply:has(input:checked) { border-color: #e5bcbc; background: #fff7f7; }
.mode-option input { width: 16px; height: 16px; flex: 0 0 16px; margin: 2px 0 0; accent-color: var(--blue); }
.mode-apply input { accent-color: var(--red); }
.mode-symbol { display: grid; width: 17px; height: 17px; flex: 0 0 17px; place-items: center; margin-top: 1px; border-radius: 50%; font-size: 11px; font-weight: 900; }
.safe-symbol { background: var(--green); color: #fff; }
.mode-option > div, .mode-option label { display: grid; gap: 3px; min-width: 0; }
.mode-option label { cursor: pointer; }
.mode-option-title { color: #26394d; font-size: 13px; font-weight: 700; }
.mode-option-copy { color: #6d7175; font-size: 12px; line-height: 1.45; }
.safe-tag, .danger-tag { display: inline-block; margin-left: 3px; padding: 2px 4px; border-radius: 3px; font-size: 8px; letter-spacing: .05em; vertical-align: 1px; }
.safe-tag { background: var(--green-soft); color: var(--green); }
.danger-tag { background: #f8dddd; color: var(--red-dark); }
.apply-confirmation { margin: 1px 0 2px 25px; }
.danger-callout { padding: 12px; border-left: 3px solid var(--red); border-radius: 7px; background: var(--red-soft); color: var(--red-dark); }
.danger-callout strong { display: block; margin-bottom: 4px; font-size: 11px; }
.danger-callout p { margin: 0 0 9px; font-size: 10px; line-height: 1.5; }
.danger-callout label { color: #27394e; font-size: 10px; }
.danger-callout code, .settings-list code, .settings-note code { padding: 2px 4px; border-radius: 3px; background: #f8dddd; color: var(--red-dark); font: 700 9px var(--mono); }
.danger-callout input { margin-top: 3px; border-color: #d8aaa9; font: 700 11px var(--mono); }
.form-error { margin: 12px 0 0; padding: 9px 11px; border: 1px solid #e8bbbb; border-radius: 7px; background: var(--red-soft); color: var(--red-dark); font-size: 10px; }
.form-actions { display: flex; justify-content: flex-end; margin-top: 16px; }

.status-panel { background: linear-gradient(180deg, #fff, #f9fbfe); }
.run-status { display: flex; align-items: flex-start; gap: 9px; min-height: 43px; margin-top: 15px; padding: 11px; border-radius: 8px; background: #f0f3f7; color: #5d6f82; font-size: 11px; }
.run-status-dot { width: 8px; height: 8px; flex: 0 0 8px; margin-top: 4px; border-radius: 50%; background: #9aa8b5; }
.run-status[data-state="running"] { background: #eef5ff; color: #2e5da9; }
.run-status[data-state="running"] .run-status-dot { background: var(--blue); animation: pulse 1.3s ease-in-out infinite; }
.run-status[data-state="success"] { background: var(--green-soft); color: var(--green); }
.run-status[data-state="success"] .run-status-dot { background: var(--green); }
.run-status[data-state="error"] { background: var(--red-soft); color: var(--red-dark); }
.run-status[data-state="error"] .run-status-dot { background: var(--red); }
.run-state { background: #edf1f5; color: #6c7b8b; letter-spacing: 0; }
.run-state.state-running { background: var(--blue-soft); color: #2e5db1; }
.run-state.state-success { background: var(--green-soft); color: var(--green); }
.run-state.state-error { background: var(--red-soft); color: var(--red-dark); }
.run-time, .result-time { margin: 6px 0 0; color: #8794a2; font-size: 10px; }
.result-time { align-self: center; }
.technical-details { border: 1px solid #dfe6ee; border-radius: 9px; background: #fbfcfe; }
.technical-details > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 11px; cursor: pointer; color: #5d7084; font-size: 10px; font-weight: 800; list-style-position: inside; }
.technical-details > summary span { color: #8a98a7; font-size: 9px; font-weight: 600; }
.technical-details[open] > summary { border-bottom: 1px solid #e1e7ee; color: #2b5fae; }
.run-logs { margin-top: 14px; }
.run-logs .log-block { margin: 12px; }
.settings-technical { margin-top: 6px; }
.settings-technical > .settings-grid, .settings-technical > .settings-subsection { margin: 13px; }
.settings-technical > .settings-subsection { margin-top: 0; }
.safety-settings-card { margin-top: 13px; }
.log-block { margin-top: 14px; }
.log-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 5px; }
.log-heading h3 { margin: 0; color: #34485e; font-size: 10px; font-weight: 850; }
.log-heading span { color: #8b98a6; font-size: 9px; }
.log-output { min-height: 58px; max-height: 185px; margin: 0; overflow: auto; padding: 9px; border: 1px solid #29465a; border-radius: 7px; background: #102332; color: #d9e8f4; font: 10px/1.6 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.log-error { border-color: #e6cbcb; background: #fffafa; color: var(--red-dark); }
.rules-panel { background: #fbfdfc; }
.rules-list { display: grid; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.rules-list li { display: flex; align-items: flex-start; gap: 8px; color: #607185; font-size: 11px; line-height: 1.45; }
.rules-list li > span:first-child { color: var(--green); font-weight: 900; }
.compact-rules { margin-top: 0; }

.results-panel { margin-top: 0; }
.results-table-wrap { margin-top: 13px; }

.product-intake-section { margin-top: 8px; }
.intake-boundary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 14px; border: 1px solid #b8c9e3; border-radius: 10px 10px 0 0; background: #eaf1fb; color: #425d7d; font-size: 10px; }
.intake-boundary span { font-weight: 900; letter-spacing: .14em; }
.intake-boundary strong { font-size: 10px; }
.product-intake-panel { border-top: 4px solid #315f9e; border-radius: 0 0 var(--radius) var(--radius); background: linear-gradient(180deg, #fff 0, #f7faff 100%); }
.product-intake-panel .panel-intro code { padding: 2px 4px; border-radius: 3px; background: #edf1f6; color: #40536a; font: 700 9px var(--mono); }
.intake-status-chip { display: inline-flex; align-items: center; min-height: 27px; padding: 5px 9px; border: 1px solid #e0c987; border-radius: 999px; background: #fff7dd; color: #7d5a0d; font-size: 9px; font-weight: 900; letter-spacing: .06em; }
.intake-warning { display: grid; gap: 2px; margin-bottom: 15px; padding: 11px 13px; border: 1px solid #ddc374; border-left: 4px solid #aa7416; border-radius: 8px; background: #fff9e8; color: #755517; }
.intake-warning strong { font-size: 11px; }
.intake-warning span { font-size: 10px; line-height: 1.5; }
.intake-stepper { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 0 14px; padding: 0; list-style: none; }
.intake-stepper li { display: flex; align-items: center; gap: 9px; min-height: 54px; padding: 9px 11px; border: 1px solid #d7e1ec; border-radius: 9px; background: #f6f8fb; color: #728195; }
.intake-stepper li > span { display: grid; width: 25px; height: 25px; flex: 0 0 25px; place-items: center; border-radius: 50%; background: #dfe6ee; font-size: 10px; font-weight: 900; }
.intake-stepper li > div { display: grid; gap: 1px; }
.intake-stepper strong { font-size: 11px; }
.intake-stepper small { font-size: 9px; }
.intake-stepper li.is-active { border-color: #9dbce5; background: #edf4ff; color: #285da9; }
.intake-stepper li.is-active > span { background: #346ebf; color: #fff; }
.intake-stepper li.is-complete { border-color: #a9d2bd; background: #eef9f3; color: var(--green); }
.intake-stepper li.is-complete > span { background: var(--green); color: #fff; }
.intake-work-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; }
.intake-stage { display: grid; align-content: start; gap: 11px; min-width: 0; padding: 14px; border: 1px solid #dce4ed; border-radius: 10px; background: #fff; }
.intake-stage-readonly { background: #f8fbff; }
.intake-stage-apply { border-color: #e1c8c8; background: #fffafa; }
.intake-stage-heading { display: flex; align-items: center; gap: 7px; min-height: 25px; }
.intake-stage-heading > span:first-child { color: #6b88ad; font: 900 9px var(--mono); letter-spacing: .08em; }
.intake-stage-heading h3 { margin: 0; }
.intake-stage-heading .read-only-chip { margin-left: auto; }
.intake-stage input[type="file"] { width: 100%; min-height: 39px; padding: 6px; border: 1px solid #cbd6e2; border-radius: 7px; background: #f8fafc; color: #35485d; font-size: 10px; }
.intake-stage .button { justify-self: start; }
.intake-stage-apply .button { justify-self: stretch; }
.intake-summary { display: grid; gap: 5px; }
.intake-summary-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 29px; padding: 6px 8px; border: 1px solid #e2e8ef; border-radius: 6px; background: #fafcff; }
.intake-summary-item span { overflow: hidden; color: #738297; font: 8px var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.intake-summary-item strong { color: #29435f; font-size: 10px; }
.intake-outcome-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.intake-outcome-summary .intake-summary-item:first-child { grid-column: 1 / -1; border-color: #b7dcc8; background: var(--green-soft); }
.intake-status-line { margin-top: 13px; padding: 9px 11px; border: 1px solid #d4dfea; border-radius: 8px; background: #f2f6fa; color: #52677c; font-size: 10px; font-weight: 750; }
.product-intake-panel > .alert { margin: 10px 0 0; }
.intake-results { margin-top: 12px; }
.intake-results .data-table { min-width: 760px; }
.intake-outcome { font-weight: 850; }
.outcome-ready-to-create { color: var(--green); }
.outcome-already-exists, .outcome-ignored { color: var(--amber); }
.outcome-conflict, .outcome-blocked { color: var(--red-dark); }

.export-template-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.template-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 11px; align-items: center; padding: 13px; border: 1px solid #dfe6ee; border-radius: 10px; background: #fbfcfe; }
.template-icon { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 8px; background: #e6f6ec; color: var(--green); font: 800 10px var(--mono); }
.template-icon-xlsx { background: #e9f0ff; color: #2a60c5; }
.template-card h3 { margin: 0 0 3px; font-size: 12px; }
.template-card p { margin: 0; color: #7c8998; font-size: 10px; line-height: 1.4; }
.capability-note { min-height: 17px; margin: 8px 1px 0; color: #7c8998; font-size: 10px; }
.subsection-divider { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 21px 0 11px; padding-top: 17px; border-top: 1px solid #e3e9ef; color: #34495e; font-size: 11px; font-weight: 850; }
.export-files { margin-top: 15px; padding: 15px; }
.export-files h3 { margin: 0; }
.file-list { display: grid; gap: 7px; margin: 10px 0 0; padding-left: 17px; color: #64758a; font-size: 11px; }
.file-list code { color: #2c5ea9; font: 10px var(--mono); overflow-wrap: anywhere; }
.artifact-link { color: #235fca; font-weight: 750; text-decoration: none; }
.artifact-link:hover { text-decoration: underline; text-underline-offset: 2px; }
.pending-item { color: #92702b; }
.capability-chip { min-width: 68px; border-color: #d7e0ea; background: #f1f4f7; color: #768596; font-size: 9px; letter-spacing: 0; }
.capability-available { border-color: #b8dec9; background: var(--green-soft); color: var(--green); }
.capability-unavailable { border-color: #ecd79b; background: var(--amber-soft); color: var(--amber); }
.capability-error { border-color: #e8bbbb; background: var(--red-soft); color: var(--red-dark); }
.capability-loading { background: var(--blue-soft); color: #2e60bc; }

.jobs-table-wrap { margin-top: 2px; }
.jobs-table td { vertical-align: middle; }

.settings-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; }
.settings-card { padding: 16px; }
.settings-card-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 13px; }
.settings-card h3 { margin: 0; font-size: 13px; }
.settings-icon { display: grid; width: 25px; height: 25px; place-items: center; border-radius: 7px; background: var(--blue-soft); color: #3366c6; font-size: 13px; font-weight: 850; }
.settings-icon-safe { background: var(--green-soft); color: var(--green); }
.settings-list { display: grid; gap: 8px; margin: 0; }
.settings-list div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: baseline; padding-bottom: 7px; border-bottom: 1px solid #edf1f5; }
.settings-list div:last-child { padding-bottom: 0; border-bottom: 0; }
.settings-list dt { color: #788797; font-size: 10px; }
.settings-list dd { max-width: 190px; margin: 0; color: #283d52; font-size: 10px; font-weight: 760; text-align: right; overflow-wrap: anywhere; }
.settings-subsection { margin-top: 17px; padding-top: 17px; border-top: 1px solid #e3e9ef; }
.settings-subsection h3 { margin: 0; font-size: 13px; }
.capabilities-grid { display: grid; gap: 6px; margin-top: 11px; }
.capability-row { display: flex; align-items: center; justify-content: space-between; gap: 13px; padding: 10px 11px; border: 1px solid #e1e7ee; border-radius: 8px; background: #fbfcfe; }
.capability-row > span:first-child { display: grid; gap: 1px; min-width: 0; }
.capability-row strong { color: #30445a; font-size: 11px; }
.capability-row small { overflow: hidden; color: #8190a0; font: 9px var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.settings-reference-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin-top: 11px; }
.settings-note { margin: 0; color: #718195; font-size: 11px; line-height: 1.55; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 50% { opacity: .4; } }

@media (max-width: 1220px) {
  .app-shell { grid-template-columns: 236px minmax(0, 1fr); }
  .workspace { padding-inline: 22px; }
  .section-grid { grid-template-columns: 1fr; }
  .side-column { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .view-toolbar { grid-template-columns: minmax(180px, 1fr) minmax(200px, auto) 65px auto; }
}

@media (max-width: 980px) {
  .app-shell { grid-template-columns: 1fr; }
  .app-sidebar { position: sticky; top: 0; z-index: 20; min-height: 0; padding: 13px 15px 12px; }
  .sidebar-brand { grid-template-columns: auto minmax(0, 1fr); align-items: center; }
  .sidebar-copy { display: none; }
  .ops-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .ops-nav-item { justify-content: center; min-height: 42px; padding: 6px 7px; }
  .nav-copy small { display: none; }
  .nav-copy strong { font-size: 11px; }
  .nav-icon { display: none; }
  .sidebar-footer { display: flex; align-items: center; margin-top: 0; }
  .sidebar-meta { display: none; }
  .connection-chip { margin-left: auto; }
  .workspace { padding-top: 18px; }
  .view-toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .toolbar-search, .view-advanced { grid-column: span 2; }
  .toolbar-submit { grid-column: 1 / -1; justify-self: end; }
  .export-toolbar { grid-template-columns: 1fr; }
  .export-advanced { grid-column: 1 / -1; }
  .export-toolbar .toolbar-submit { grid-column: 1 / -1; }
  .view-advanced-fields, .export-advanced-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .settings-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .settings-grid > :last-child { grid-column: 1 / -1; }
  .intake-work-grid { grid-template-columns: 1fr; }
  .usage-guide-steps { grid-template-columns: 1fr; }
  .product-preview { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .workspace { padding: 13px 12px 32px; }
  .workspace-header { display: block; padding: 18px; }
  .workspace-badges { justify-content: flex-start; margin-top: 12px; }
  .workspace-topbar { align-items: flex-start; flex-direction: column; padding: 10px 12px; }
  .topbar-actions { width: 100%; justify-content: space-between; }
  .template-context { flex: 1 1 190px; }
  .template-context select { min-width: 0; }
  .usage-guide summary { align-items: flex-start; flex-wrap: wrap; }
  .usage-guide-summary { flex-basis: calc(100% - 36px); margin-left: 34px; }
  .product-preview { padding: 14px; }
  .product-preview-media { min-height: 180px; }
  .stepper { overflow-x: auto; gap: 4px; padding: 8px; }
  .step { flex: 0 0 auto; }
  .step-connector { width: 12px; }
  .step small { display: none; }
  .panel { padding: 16px; }
  .side-column { grid-template-columns: 1fr; }
  .summary-grid, .analysis-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .file-meta-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .file-meta-grid .meta-wide { grid-column: 1 / -1; }
  .import-actions-row { align-items: flex-start; flex-direction: column; }
  .form-grid { grid-template-columns: 1fr; }
  .form-actions { justify-content: stretch; }
  .button-large { width: 100%; }
  .apply-confirmation { margin-left: 0; }
  .export-template-grid, .settings-grid, .settings-reference-grid { grid-template-columns: 1fr; }
  .settings-grid > :last-child { grid-column: auto; }
  .template-card { grid-template-columns: auto minmax(0, 1fr); }
  .template-card .button { grid-column: 1 / -1; width: 100%; }
  .capability-row { align-items: flex-start; flex-direction: column; }
  .capability-row .capability-chip { align-self: flex-start; }
  .ops-nav-item { min-width: 0; }
  .ops-nav-item.is-active { box-shadow: none; }
  .flow-note { display: none; }
  .view-advanced-fields, .export-advanced-fields { grid-template-columns: 1fr; }
  .intake-stepper { grid-template-columns: 1fr; }
  .intake-boundary { align-items: flex-start; flex-direction: column; }
}

/* ==========================================================================
   Template Viewer Component
   ========================================================================== */
.template-viewer-panel {
  margin-top: 18px;
  background: #ffffff;
  border: 1px solid #dbe3ed;
  border-radius: 12px;
  padding: 16px 20px;
  box-shadow: 0 2px 8px rgba(38, 57, 77, 0.04);
}

.template-viewer-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid #edf2f7;
}

.template-select-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 220px;
}

.template-select-field label {
  font-size: 11px;
  color: #4a5d73;
}

.template-select-field select {
  height: 36px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 700;
  border: 1px solid #cbd6e2;
  border-radius: 8px;
  background-color: #f8fafc;
  color: #1e293b;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.template-select-field select:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
  outline: none;
}

.template-viewer-meta {
  flex: 1 1 280px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.template-viewer-actions {
  display: flex;
  gap: 8px;
}

.template-filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 14px 0 10px;
}

.template-filter-bar .search-input-wrap {
  flex: 1;
  max-width: 380px;
}

.template-filter-bar input[type="search"] {
  width: 100%;
  height: 32px;
  padding: 4px 10px;
  font-size: 12px;
  border: 1px solid #d1d9e2;
  border-radius: 6px;
  background: #fbfcfe;
}

.checkbox-inline {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #475569;
  cursor: pointer;
  user-select: none;
}

.template-table-scroll {
  max-height: 480px;
  overflow-y: auto;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
}

.template-table-scroll table {
  width: 100%;
  border-collapse: collapse;
}

.template-table-scroll th {
  position: sticky;
  top: 0;
  background: #f1f5f9;
  z-index: 1;
  font-weight: 700;
  color: #334155;
  border-bottom: 2px solid #cbd5e1;
}

.template-table-scroll td {
  padding: 8px 12px;
  font-size: 12px;
  border-bottom: 1px solid #edf2f7;
  vertical-align: middle;
}

.template-table-scroll tr:hover td {
  background: #f8fafc;
}

.col-required-badge {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 800;
  background: #fee2e2;
  color: #b91c1c;
}

.col-optional-badge {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  background: #f1f5f9;
  color: #64748b;
}

.col-header-code {
  font-family: var(--mono, monospace);
  font-weight: 700;
  color: #0f172a;
  background: #f1f5f9;
  padding: 2px 5px;
  border-radius: 4px;
}

.col-example-code {
  font-family: var(--mono, monospace);
  font-size: 11px;
  color: #475569;
  background: #fafafa;
  border: 1px solid #f0f0f0;
  padding: 2px 6px;
  border-radius: 4px;
  display: inline-block;
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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



/* ==========================================================================
   LINEAR PRODUCT SYSTEM THEME OVERRIDES (Applied on top of base classes)
   ========================================================================== */

:root {
  color-scheme: dark;
  --canvas: #0c0d0f;
  --canvas-deep: #050507;
  --paper: #121316;
  --paper-soft: #16171a;
  --paper-raised: #1c1d21;
  --sidebar: #08080a;
  --sidebar-raised: #121316;
  --sidebar-text: #f7f8f8;
  --sidebar-muted: #8a8f98;

  --ink: #f7f8f8;
  --ink-soft: #d0d6e0;
  --muted: #8a8f98;
  --ink-tertiary: #5e626e;

  --line: rgba(255, 255, 255, 0.07);
  --line-strong: rgba(255, 255, 255, 0.14);
  --line-tertiary: rgba(255, 255, 255, 0.04);

  --primary: #5e6ad2;
  --primary-hover: #717de3;
  --primary-focus: #505cb9;
  --blue: #5e6ad2;
  --blue-dark: #505cb9;
  --blue-soft: rgba(94, 106, 210, 0.14);

  --green: #27a644;
  --green-soft: rgba(39, 166, 68, 0.14);
  --amber: #f2994a;
  --amber-soft: rgba(242, 153, 74, 0.14);
  --red: #eb5757;
  --red-dark: #f07c7d;
  --red-soft: rgba(235, 87, 87, 0.14);
  --purple: #9065b0;

  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius: 8px;
  --radius-lg: 12px;
  --radius-pill: 9999px;

  --shadow-sm: none;
  --shadow: 0 16px 40px rgba(0, 0, 0, 0.7);

  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, "Segoe UI", Roboto, sans-serif;
  letter-spacing: -0.011em;
}

/* Page Canvas */
html, body {
  background: var(--canvas) !important;
  color: var(--ink) !important;
  -webkit-font-smoothing: antialiased;
}

/* Linear Layout Grid */
.app-shell {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr) !important;
}

/* Linear Left Sidebar */
.app-sidebar {
  background: var(--sidebar) !important;
  border-right: 1px solid var(--line) !important;
  padding: 10px 8px 14px !important;
  gap: 12px !important;
}

.sidebar-brand {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 8px !important;
  border-radius: var(--radius-sm) !important;
  cursor: pointer;
}
.sidebar-brand:hover {
  background: rgba(255, 255, 255, 0.04) !important;
}
.brand-mark {
  width: 18px !important;
  height: 18px !important;
  border-radius: 5px !important;
  background: var(--primary) !important;
  box-shadow: 0 0 10px rgba(94, 106, 210, 0.4) !important;
  font-size: 9px !important;
}
.sidebar-brand .eyebrow { display: none !important; }
.sidebar-brand h1 {
  margin: 0 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
}
.sidebar-brand h1::after {
  content: " ▾";
  font-size: 10px;
  color: var(--muted);
}
.sidebar-copy { display: none !important; }

/* Linear Slim 1-Line Nav Items */
.ops-nav {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}
.ops-nav::before {
  content: "WORKSPACE";
  display: block;
  padding: 10px 8px 4px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--ink-tertiary);
  letter-spacing: 0.05em;
}
.ops-nav-item {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  min-height: 32px !important;
  height: 32px !important;
  padding: 0 10px !important;
  border-radius: var(--radius-sm) !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  color: var(--muted) !important;
  box-shadow: none !important;
}
.ops-nav-item:hover {
  background: rgba(255, 255, 255, 0.04) !important;
  color: var(--ink) !important;
}
.ops-nav-item.is-active {
  background: rgba(255, 255, 255, 0.07) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
}
.nav-icon {
  width: 16px !important;
  height: 16px !important;
  flex: 0 0 16px !important;
  background: transparent !important;
  font-size: 13px !important;
  color: var(--muted) !important;
}
.ops-nav-item.is-active .nav-icon {
  color: var(--primary-hover) !important;
}
.nav-copy {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}
.nav-copy strong {
  font-size: 13px !important;
  font-weight: 450 !important;
}
.ops-nav-item.is-active .nav-copy strong {
  font-weight: 550 !important;
}
.nav-copy small {
  display: none !important;
}

/* Sidebar Footer */
.sidebar-footer {
  margin-top: auto !important;
  padding-top: 10px !important;
  border-top: 1px solid var(--line-tertiary) !important;
}
.connection-chip {
  height: 28px !important;
  min-height: 28px !important;
  background: var(--paper) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-sm) !important;
  padding: 0 8px !important;
  font-size: 11px !important;
  color: var(--muted) !important;
}
.sidebar-meta { display: none !important; }

/* Workspace & Topbar */
.workspace {
  background: var(--canvas) !important;
  padding: 0 !important;
}

/* Linear Slim Action Bar at very top */
.workspace-topbar {
  margin: 0 !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 28px !important;
  background: var(--sidebar) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.topbar-context {
  color: var(--muted) !important;
  font-size: 12.5px !important;
}
.topbar-context::before {
  content: "◉";
  color: var(--amber);
  font-size: 10px;
  margin-right: 4px;
}
.breadcrumb-label {
  color: var(--ink) !important;
  font-weight: 500 !important;
}
.topbar-divider { color: var(--line-strong) !important; }
.topbar-note { color: var(--muted) !important; font-size: 11.5px !important; }

/* Linear Clean Workspace Header (No bulky card box) */
.workspace-header {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 24px 28px 14px !important;
  border-bottom: 1px solid var(--line-tertiary) !important;
}
.section-kicker {
  color: var(--primary-hover) !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
}
.workspace-header h2 {
  color: var(--ink) !important;
  font-size: 24px !important;
  font-weight: 600 !important;
  letter-spacing: -0.03em !important;
  margin: 0 0 6px !important;
}
.workspace-copy {
  color: var(--muted) !important;
  font-size: 13px !important;
  max-width: 800px !important;
}

/* Linear Badges */
.mode-badge, .pill-chip, .read-only-chip, .status-chip {
  height: 24px !important;
  min-height: 24px !important;
  padding: 0 8px !important;
  border-radius: var(--radius-sm) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  border: 1px solid var(--line) !important;
  background: var(--paper) !important;
  color: var(--muted) !important;
}
.mode-badge {
  background: var(--blue-soft) !important;
  color: var(--primary-hover) !important;
  border-color: rgba(94, 106, 210, 0.3) !important;
}

/* Linear Panels & Content Cards */
.page-section {
  padding: 16px 28px 48px !important;
}
.panel, .settings-card, .export-files {
  background: var(--paper) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: none !important;
  padding: 20px !important;
}
.panel h2 {
  color: var(--ink) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
}
.panel-intro {
  color: var(--muted) !important;
  font-size: 12px !important;
}

/* Linear Buttons */
.button {
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 12px !important;
  border-radius: var(--radius-sm) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  box-shadow: none !important;
  transition: all .1s ease !important;
}
.button-primary {
  background: var(--primary) !important;
  color: #fff !important;
}
.button-primary:hover:not(:disabled) {
  background: var(--primary-hover) !important;
}
.button-primary:active:not(:disabled) {
  background: var(--primary-focus) !important;
}
.button-light, .button-quiet {
  background: var(--paper-soft) !important;
  border: 1px solid var(--line) !important;
  color: var(--ink) !important;
}
.button-light:hover:not(:disabled), .button-quiet:hover:not(:disabled) {
  background: var(--paper-raised) !important;
  border-color: var(--line-strong) !important;
  color: #fff !important;
}

/* Linear Inputs & Toolbars */
.toolbar {
  background: var(--canvas-deep) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  padding: 12px !important;
}
.field label, .danger-callout label {
  color: var(--muted) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
}
.field input, .field select, .danger-callout input, .compact-select {
  background: var(--paper-soft) !important;
  border: 1px solid var(--line) !important;
  color: var(--ink) !important;
  border-radius: var(--radius-sm) !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 10px !important;
  font-size: 12.5px !important;
}
.field input:focus, .field select:focus, .danger-callout input:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 2px rgba(94, 106, 210, 0.3) !important;
}

/* Linear Data Tables */
.table-scroll {
  background: var(--paper) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
}
.data-table th {
  background: var(--paper-soft) !important;
  border-bottom: 1px solid var(--line) !important;
  color: var(--muted) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  height: 32px !important;
}
.data-table td {
  border-bottom: 1px solid var(--line-tertiary) !important;
  color: var(--ink-soft) !important;
  height: 36px !important;
}
.data-table tbody tr:hover td {
  background: rgba(255, 255, 255, 0.04) !important;
  color: var(--ink) !important;
}
.data-table tbody tr:nth-child(even) td {
  background: transparent !important;
}
.data-table .status-success, .data-table .status-active { color: var(--green) !important; }
.data-table .status-warning { color: var(--amber) !important; }
.data-table .status-error { color: var(--red) !important; }
.data-table .status-draft, .data-table .status-archived { color: var(--muted) !important; }
.value-private {
  background: rgba(255, 255, 255, 0.06) !important;
  color: var(--muted) !important;
}
.value-public {
  background: var(--green-soft) !important;
  color: var(--green) !important;
}

/* Linear Summary Metrics */
.summary-card {
  background: var(--paper) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  padding: 12px 14px !important;
}
.summary-card span {
  color: var(--muted) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
}
.summary-card strong {
  color: var(--ink) !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
}

/* Linear Right Inspector / Agent Panel Style */
.settings-card, .status-panel {
  border: 1px solid var(--line-strong) !important;
  background: var(--paper) !important;
}
.status-panel h2::before {
  content: "Linear Ops Engine";
  display: block;
  font-size: 10px;
  font-weight: 600;
  color: var(--primary-hover);
  letter-spacing: 0.06em;
  margin-bottom: 2px;
  text-transform: uppercase;
}
.log-output {
  background: var(--canvas-deep) !important;
  border: 1px solid var(--line) !important;
  color: #a5b4fc !important;
  font-size: 11px !important;
  line-height: 1.6 !important;
  border-radius: var(--radius-sm) !important;
}

/* Usage Guide Linear Accordion */
.usage-guide {
  margin: 14px 28px 0 !important;
  background: var(--paper) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
}
.usage-guide summary {
  color: var(--ink-soft) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  height: 38px !important;
  padding: 0 14px !important;
}
.usage-guide summary::before {
  content: "▸" !important;
  background: transparent !important;
  color: var(--muted) !important;
  font-size: 11px !important;
}
.usage-guide[open] summary::before {
  transform: rotate(90deg) !important;
}
.usage-guide-step {
  background: var(--paper-soft) !important;
  border: 1px solid var(--line-tertiary) !important;
  color: var(--muted) !important;
  border-radius: var(--radius-sm) !important;
}
.usage-guide-step.is-active {
  background: var(--blue-soft) !important;
  border-color: var(--primary) !important;
  color: var(--ink) !important;
}
.usage-guide-step.is-active .guide-step-index {
  background: var(--primary) !important;
  color: #fff !important;
}
/* Modern Subnav Switcher (Dark/Light Harmonized) */
.catalog-subnav-switcher, .intake-mode-switcher {
  display: inline-flex !important;
  gap: 4px !important;
  background: var(--paper-soft) !important;
  padding: 4px !important;
  border-radius: var(--radius) !important;
  border: 1px solid var(--line) !important;
}

.catalog-subnav-btn, .intake-mode-btn {
  padding: 6px 14px !important;
  border: none !important;
  border-radius: var(--radius-sm) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  background: transparent !important;
  color: var(--muted) !important;
  transition: all 0.15s ease !important;
}

.catalog-subnav-btn:hover, .intake-mode-btn:hover {
  color: var(--ink) !important;
  background: rgba(255, 255, 255, 0.04) !important;
}

.catalog-subnav-btn.is-active, .intake-mode-btn.is-active {
  background: var(--primary) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  box-shadow: 0 0 12px rgba(94, 106, 210, 0.35) !important;
}

/* Tone-on-tone Cards & Details */
.simple-intake-card, .batch-intake-card {
  background: var(--paper) !important;
  border: 1px solid var(--line) !important;
  color: var(--ink) !important;
}

.simple-intake-card h3, .batch-intake-card h3 {
  color: var(--ink) !important;
}

.batch-guide-accordion {
  background: var(--paper-soft) !important;
  border: 1px solid var(--line) !important;
  color: var(--ink) !important;
}
.batch-guide-accordion summary {
  color: var(--ink) !important;
}
.batch-guide-accordion summary span:first-child {
  color: var(--primary-hover) !important;
}
.batch-guide-accordion > div {
  background: var(--paper) !important;
  border-top: 1px solid var(--line) !important;
  color: var(--ink-soft) !important;
}
.batch-guide-accordion div[style*="background: #fafafa"],
.batch-guide-accordion div[style*="background:#fafafa"] {
  background: var(--paper-soft) !important;
  border-color: var(--line) !important;
}
.batch-guide-accordion strong {
  color: var(--ink) !important;
}

/* Template download bar */
div[style*="background: #f8fafc"],
div[style*="background:#f8fafc"] {
  background: var(--paper-soft) !important;
  border-color: var(--line) !important;
  color: var(--ink-soft) !important;
}
div[style*="background: #f8fafc"] strong,
div[style*="background:#f8fafc"] strong {
  color: var(--ink) !important;
}

/* Payment test center cards & cheat sheets */
div[style*="background:#fff"],
div[style*="background: #fff"],
div[style*="background: #ffffff"],
div[style*="background:#ffffff"] {
  background: var(--paper) !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
}

.btn-quick-copy {
  background: var(--paper-raised) !important;
  border: 1px solid var(--line) !important;
  color: var(--ink) !important;
}
.btn-quick-copy:hover {
  background: var(--primary) !important;
  color: #fff !important;
  border-color: var(--primary-hover) !important;
}

/* Live Notice banner */
div[style*="background:#fffbeb"],
div[style*="background: #fffbeb"] {
  background: rgba(242, 153, 74, 0.12) !important;
  border: 1px solid rgba(242, 153, 74, 0.3) !important;
  color: var(--amber) !important;
}

/* Clean Tone-on-tone Data Tables */
.data-table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  background: var(--paper) !important;
}

.data-table th {
  background: var(--paper-soft) !important;
  color: var(--muted) !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
  padding: 8px 12px !important;
  border-bottom: 1px solid var(--line) !important;
}

.data-table td {
  padding: 9px 12px !important;
  font-size: 12.5px !important;
  color: var(--ink) !important;
  border-bottom: 1px solid var(--line-tertiary) !important;
}

.data-table tr:last-child td {
  border-bottom: none !important;
}

/* Light Theme Overrides (When toggled to light) */
html[data-theme="light"] {
  color-scheme: light;
  --canvas: #f6f8fa;
  --canvas-deep: #edf1f5;
  --paper: #ffffff;
  --paper-soft: #f4f6f8;
  --paper-raised: #e9ecef;
  --sidebar: #101928;
  --sidebar-raised: #152337;
  --sidebar-text: #ffffff;
  --sidebar-muted: #9bb0c9;

  --ink: #182535;
  --ink-soft: #475569;
  --muted: #64748b;
  --ink-tertiary: #94a3b8;

  --line: #e2e8f0;
  --line-strong: #cbd5e1;
  --line-tertiary: #f1f5f9;

  --primary: #2563eb;
  --primary-hover: #1d4ed8;
  --primary-focus: #1e40af;
}

html[data-theme="light"] .workspace {
  background: #f6f8fa !important;
}
html[data-theme="light"] .workspace-topbar {
  background: #ffffff !important;
  border-bottom: 1px solid #e2e8f0 !important;
}
html[data-theme="light"] .panel, 
html[data-theme="light"] .simple-intake-card, 
html[data-theme="light"] .batch-intake-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
}
html[data-theme="light"] .button-light, 
html[data-theme="light"] .button-quiet {
  background: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
  color: #1e293b !important;
}
html[data-theme="light"] .catalog-subnav-switcher,
html[data-theme="light"] .intake-mode-switcher {
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
}
html[data-theme="light"] .catalog-subnav-btn.is-active,
html[data-theme="light"] .intake-mode-btn.is-active {
  background: #ffffff !important;
  color: #2563eb !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
}