:root {
  color-scheme: dark;
  --bg: #0d0d0d;
  --paper: rgba(61, 63, 70, .35);
  --ink: #fff;
  --muted: #979797;
  --line: #959595;
  --teal: #4360e8;
  --dark: #4360e8;
  --danger: #fff;
  --accent: #4360e8;
  --accent-soft: rgba(27, 33, 169, .35);
  --surface: #25262b;
  --surface-raised: #25262b;
  --surface-subtle: rgba(18, 19, 23, .35);
  --surface-active: #121317;
  --sidebar: #15161b;
  --shadow: rgba(0, 0, 0, .25);
  --panel-shadow: 0 4px 20px 8px var(--shadow);
  font-family: "Avenlark Helvetica", Helvetica, Arial, sans-serif;
  font-size: 13px;
  font-weight: 400;
  background: var(--bg);
  color: var(--ink);
}

/* AvenLark: one dark workspace for reports, supply planning and product economics.
   Section-specific layouts are deliberately left to their own stylesheets. */

body {
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--accent-soft); color: var(--ink); }
body.workspace-view {
  background: var(--bg);
  color: var(--ink);
}
body.workspace-view .workspace { margin-left: 232px; width: calc(100% - 232px); min-height: 100vh; position: relative; isolation: isolate; background: var(--bg); }
body.workspace-view .sidebar { width: 232px; flex-basis: 232px; padding: 30px 16px 62px 20px; background: var(--sidebar); border: 0; box-shadow: 0 4px 20px 5px var(--shadow); }
body.workspace-view .sidebar > .brand { margin: 0 7px 30px; min-height: 20px; gap: 0; font-size: 18px; line-height: 1; letter-spacing: 0; color: var(--ink); }
.brand img, .brand-logo { display: block; width: 24px; height: 24px; max-height: 36px; object-fit: contain; }
.brand-mark { background: transparent; width: 25px; height: 25px; border-radius: 0; color: var(--accent); }
.brand-mark svg, .brand-mark img { width: 100%; height: 100%; display: block; }
.brand-wordmark { font-family: inherit; font-size: 18px; font-weight: 400; letter-spacing: -.8px; }
body.workspace-view .sidebar > .profile { margin: 0 0 16px; padding: 0 4px; gap: 10px; }
body.workspace-view .avatar { width: 50px; height: 50px; display: grid; place-items: center; border: 0; background: url("/static/assets/figma/avatar.svg") center / 100% 100% no-repeat; color: var(--ink); font-size: 24px; font-weight: 400; }
body.workspace-view .profile strong { max-width: 137px; margin-bottom: 5px; font-size: 13px; font-weight: 400; }
body.workspace-view .profile .text-button { color: var(--muted); font-size: 13px; text-decoration: underline;  font-weight: 400; }
body.workspace-view .sidebar-label {
  color: var(--muted);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  margin: 0 10px 25px;
  text-transform: none;
}
body.workspace-view .navigation { gap: 2px; padding-left: 5px; }
body.workspace-view .nav-button { min-height: 30px; padding: 0 8px; gap: 5px; font-size: 13px; font-weight: 400; color: var(--ink); border-radius: 8px; }
body.workspace-view .nav-button > span { display: inline-grid; place-items: center; width: 20px; height: 20px; font-size: 18px; }
body.workspace-view .nav-button svg { width: 20px; height: 20px; flex-shrink: 0; }
body.workspace-view .nav-button:hover { background: var(--paper); }
body.workspace-view .nav-button.active { background: var(--surface-active); color: var(--ink); font-weight: 400; }
body.workspace-view .sidebar-bottom { margin-top: auto; padding-top: 30px; position: static; }
body.workspace-view .sidebar-tip { padding: 20px; border-radius: 12px; background: var(--surface); box-shadow: 0 4px 20px var(--shadow), inset 0 4px 10px var(--shadow); }
body.workspace-view .sidebar-tip strong { font-size: 13px; font-weight: 400; margin-left: 7px; }
body.workspace-view .sidebar-tip p { color: var(--muted); font-size: 13px; line-height: 1.5; margin-top: 10px; padding-left: 5px; }
.tiny-dot, :where(body) .status-dot.connected { background: var(--accent); box-shadow: 0 0 4px 2px var(--accent-soft); }
body.workspace-view .topbar { height: 80px; padding: 0 25px; background: var(--surface-subtle); border: .5px solid var(--paper); }
body.workspace-view .breadcrumbs, body.workspace-view .breadcrumbs strong { font-size: 13px; color: var(--muted); font-weight: 400; }
body.workspace-view .breadcrumbs > span { padding: 0 3px; color: var(--muted); }
body.workspace-view .account-control { gap: 18px; }
body.workspace-view .account-control select { max-width: 170px; padding: 7px 4px; color: var(--ink); font-size: 13px; font-weight: 400; }
body.workspace-view .ozon-label { background: var(--accent-soft); color: var(--accent); padding: 8px 12px; border-radius: 6px; font-size: 13px; font-weight: 400; letter-spacing: 0; }
body.workspace-view .account-control .icon-button { width: 31px; height: 31px; border-radius: 6px; border: 0; background: transparent;  box-shadow: inset 0 0 0 .5px var(--ink); }
body.workspace-view .main-content { max-width: 1900px; padding: 37px 25px 0; }
body.workspace-view .page-heading { margin-bottom: 25px; gap: 16px; min-height: 43px; }
body.workspace-view .page-heading .eyebrow, body.workspace-view .page-heading .muted { display: none; }
body.workspace-view .page-heading h1 { font-size: 32px; letter-spacing: 0; line-height: 1.2; margin-bottom: 0; font-weight: 700; }
body.workspace-view .page-actions { gap: 15px; flex-wrap: nowrap; }
body.workspace-view .page-actions > .button { min-height: 43px; padding: 10px 13px; font-size: 13px; font-weight: 400; border-radius: 12px; border: 0; background: var(--surface); box-shadow: 0 4px 20px var(--shadow), inset 0 4px 10px var(--shadow); }
body.workspace-view .page-actions > .button:hover:not(:disabled) { background: var(--surface); }
.connection-light { width: 18px; height: 18px; flex: 0 0 18px; background: url("/static/assets/figma/white-dot.svg") center / contain no-repeat; display: inline-block; box-shadow: none; }
body.workspace-view .page-actions .sync-strip { padding: 11px 15px; border: 0; margin: 0; min-height: 43px; border-radius: 12px; background: var(--surface); box-shadow: 0 4px 20px var(--shadow), inset 0 4px 10px var(--shadow); flex-wrap: wrap; gap: 8px; max-width: 100%; }
body.workspace-view .page-actions .sync-info { gap: 9px; }
body.workspace-view .page-actions .sync-info > div { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 4px; }
body.workspace-view .page-actions .sync-info strong { display: inline; font-size: 13px; font-weight: 400; margin: 0; }
body.workspace-view .page-actions .sync-info .small { display: inline; font-size: 13px; color: var(--ink); }
body.workspace-view .page-actions .sync-actions { display: flex; gap: 8px; flex-direction: row; }
body.workspace-view .page-actions .sync-actions:has(#sync-button[hidden]):has(#sync-progress:empty) { display: none; }
body.workspace-view .page-actions .sync-actions .small:empty { display: none; }
body.workspace-view .page-actions .sync-actions .button { min-height: 27px; padding: 4px 10px; font-size: 11px; }
body.workspace-view .demo-banner { margin-bottom: 25px; border-radius: 10px; background: var(--accent-soft); color: var(--ink); border-color: var(--accent-soft);  border-width: .5px; }
body.workspace-view .demo-banner .text-button { color: var(--ink);  font-size: 13px; }
body.workspace-view .workspace-footer { color: var(--muted); padding: 25px 0 20px; font-size: 11px; }

/* Low-specificity shared surfaces preserve individual report layouts. */
:where(body) .panel { border: .5px solid var(--line); border-radius: 12px; min-width: 0; background: var(--paper); box-shadow: var(--panel-shadow); }
:where(body) .button, :where(body) .button.compact { min-height: 37px; padding: 9px 14px; gap: 10px; border-radius: 8px; font-size: 13px; font-weight: 400;  border-width: .5px; }
:where(body) .button:hover:not(:disabled) { transform: none; }
:where(body) .button.secondary { background: transparent; border-color: var(--ink); color: var(--ink);  border-width: .5px;  font-weight: 300; }
:where(body) .button.secondary:hover:not(:disabled) { background: var(--paper); border-color: var(--ink); }
:where(body) .button.primary, :where(body) .button.dark { background: var(--accent); color: var(--ink); border-color: var(--accent); }
:where(body) .button.primary:hover:not(:disabled), :where(body) .button.dark:hover:not(:disabled) { background: var(--accent); border-color: var(--accent); }
:where(body) .button:disabled { cursor: default; opacity: .52; }
#sync-button:disabled { opacity: 1; }
:where(body) .icon-button { background: transparent; border-color: var(--muted); color: var(--ink);  border-width: .5px;  font-size: 18px; }
:where(body) .text-button { color: var(--accent); font-size: 13px; font-weight: 400; }
:where(body) input, :where(body) select { border: .5px solid var(--ink); border-radius: 8px; min-height: 37px; padding: 8px 10px; font-size: 13px; font-weight: 300; color: var(--ink); background: var(--surface); }
:where(body) select option { color: var(--ink); background: var(--surface); }
:where(body) input::placeholder { color: var(--muted); }
:where(body) input:focus, :where(body) select:focus { border-color: var(--accent); }
:where(body) input[type=checkbox] { min-height: 0; accent-color: var(--accent); }
:where(body) input[type=date]::-webkit-calendar-picker-indicator { opacity: .7; cursor: pointer; }
:where(body) :is(button, a, input, select, [tabindex]):focus-visible, :where(body) summary:focus-visible { outline: .5px solid var(--accent); outline-offset: 3px; }
:where(body) .field label { margin-bottom: 10px; font-size: 13px; color: var(--ink); font-weight: 400; }
:where(body) .field input, :where(body) .field select { min-height: 37px; padding: 8px 10px; font-size: 13px; font-weight: 300; }
:where(body) .help-hint { border-color: var(--accent-soft); color: var(--muted);  border-width: .5px;  font-size: 11px; }
:where(body) .panel-heading { padding: 20px; }
:where(body) .panel-heading h2 { font-size: 16px; font-weight: 700; }
:where(body) .panel-heading .small { font-size: 11px; color: var(--muted); }
:where(body) .panel-heading p { margin-top: 5px; }
:where(body) .summary-scope { font-size: 13px; color: var(--muted); line-height: 1.7; margin: 0 0 17px; }
:where(body) .metrics { gap: 25px; margin-bottom: 25px; }
:where(body) .metric { min-height: 141px; padding: 20px; border: .5px solid var(--line); border-radius: 12px; background: var(--paper); box-shadow: var(--panel-shadow); min-width: 0; }
:where(body) .metric.featured { background: var(--paper); color: var(--ink); border-color: var(--accent); box-shadow: 0 4px 4px rgba(67, 96, 232, .51); }
:where(body) .metric-label, :where(body) .featured .metric-label { color: var(--ink); font-size: 18px; font-weight: 700; line-height: 1.2; margin-bottom: 11px; min-height: 21px; }
:where(body) .metric-label > span { color: var(--accent); }
:where(body) .metric > strong { font-size: 24px; line-height: 1.15; letter-spacing: 0; font-weight: 700; margin-bottom: 10px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
:where(body) .metric.featured > strong { color: var(--accent); }
:where(body) .metric > strong.negative { color: var(--ink); }
:where(body) .metric > span, :where(body) .featured > span { display: block; color: var(--ink); font-size: 11px; line-height: 1.45;  font-weight: 300; }

/* Supply planning. */
:where(body) .sync-strip { padding: 12px 16px; border-radius: 11px; background: var(--paper); margin-bottom: 20px;  border-width: .5px; }
:where(body) .status-dot { width: 7px; height: 7px; background: var(--muted); }
:where(body) .status-dot.connected { background: var(--accent); }
:where(body) .status-dot.running { background: var(--accent); box-shadow: 0 0 5px 2px var(--accent-soft); }
:where(body) .parameters { padding: 20px; margin-bottom: 25px; }
:where(body) .parameter-heading { margin-bottom: 25px; }
:where(body) .parameter-heading h2 { font-size: 18px; font-weight: 700; }
:where(body) .parameter-heading .small { font-size: 11px; }
:where(body) .parameter-fields { gap: 10px; }
:where(body) .parameter-fields .button { min-height: 38px; padding-left: 24px; padding-right: 24px; }
:where(body) .parameter-note { font-size: 13px; color: var(--muted); margin-top: 17px; line-height: 1.6; }
:where(body) .insight-grid { gap: 25px; margin-bottom: 25px; }
:where(body) .distribution-panel { padding-bottom: 20px; }
:where(body) .cluster-bars { padding: 0 20px; gap: 17px; }
:where(body) .cluster-bar-row { font-size: 13px; grid-template-columns: minmax(95px, 1fr) 1.8fr 45px; }
:where(body) .cluster-name { color: var(--ink); }
:where(body) .cluster-bar-row progress { height: 7px; background: var(--paper); }
:where(body) .cluster-bar-row progress::-webkit-progress-bar { background: var(--paper); }
:where(body) .cluster-bar-row progress::-webkit-progress-value { background: var(--accent); }
:where(body) .cluster-bar-row progress::-moz-progress-bar { background: var(--accent); }
:where(body) .cluster-bar-row:first-child progress::-webkit-progress-value { background: var(--accent); }
:where(body) .cluster-bar-row:first-child progress::-moz-progress-bar { background: var(--accent); }
:where(body) .formula-panel { padding: 20px; border: .5px solid var(--accent); border-radius: 12px; background: var(--accent-soft); min-width: 0; box-shadow: var(--panel-shadow); }
:where(body) .formula-panel .section-kicker { color: var(--muted); font-size: 11px; font-weight: 400; letter-spacing: 0; }
:where(body) .formula-panel h2 { margin-top: 13px; margin-bottom: 10px; font-size: 18px; color: var(--ink); }
:where(body) .formula-panel > p { color: var(--ink); font-size: 13px; max-width: 430px; }
:where(body) .formula-tags { margin: 20px 0; gap: 10px; }
:where(body) .formula-tags span { color: var(--ink); background: var(--surface-subtle); border: .5px solid var(--accent-soft); padding: 6px 8px; border-radius: 5px; font-size: 11px;  border-color: var(--line); }
:where(body) .formula-panel .text-button { color: var(--ink); font-size: 13px; }

/* All tables stay horizontally scrollable within their panels. */
:where(body) .table-filters { padding: 20px; gap: 10px; }
:where(body) .search-field > span { color: var(--ink); }
:where(body) .search-field input { min-height: 38px; padding-top: 8px; padding-bottom: 8px; font-size: 13px; border-color: var(--ink); background: transparent;  font-weight: 300; }
:where(body) .table-filters select { min-height: 38px; padding: 8px 10px; font-size: 13px; background: transparent;  font-weight: 300; }
:where(body) .checkbox-label { color: var(--ink); font-size: 11px; }
:where(body) .table-scroll { scrollbar-color: var(--muted) var(--surface-active); scrollbar-width: thin; }
:where(body) thead { background: var(--surface); }
:where(body) th { background: var(--surface); color: var(--ink); font-size: 11px; padding: 14px 13px; border-color: var(--line); line-height: 1.5;  border-width: .5px;  font-weight: 400; }
:where(body) td { padding: 15px 13px; border-bottom-color: var(--paper); color: var(--ink); font-size: 13px;  border-width: .5px;  font-weight: 300; }
:where(body) th:first-child, :where(body) td:first-child { padding-left: 20px; }
:where(body) td.numeric { font-size: 13px; }
:where(body) tbody tr:hover { background: var(--paper); }
:where(body) .product-link { color: var(--ink); font-size: 13px; font-weight: 400; }
:where(body) .product-link:hover { color: var(--accent); }
:where(body) .product-meta { color: var(--muted); font-size: 11px; }
:where(body) .cluster-tag { background: var(--accent-soft); color: var(--accent); font-size: 11px; }
:where(body) .highlight-column { background: var(--accent-soft); color: var(--accent); }
:where(body) .recommend-number { color: var(--accent); }
:where(body) .status-chip { background: var(--accent-soft); color: var(--ink); font-size: 11px;  font-weight: 400; }
:where(body) .status-chip.neutral { background: var(--surface); color: var(--muted); }
:where(body) .status-chip.warning { background: var(--surface); color: var(--ink); }
:where(body) .status-chip.error { background: var(--surface); color: var(--ink); }
:where(body) .table-footer { padding: 20px; color: var(--muted); font-size: 11px; border-color: var(--paper);  border-width: .5px; }
:where(body) .pagination { padding: 20px; color: var(--muted); font-size: 11px; border-color: var(--paper);  border-width: .5px; }
:where(body) .pagination .button { min-height: 32px; padding: 6px 11px; font-size: 11px; }
:where(body) .method-note { color: var(--muted); padding-top: 17px; }
:where(body) .method-note p { font-size: 11px; }
:where(body) .count-pill { color: var(--ink); background: var(--accent-soft); font-size: 11px; }

/* Product economics, cost entry and the Excel importer. */
:where(body) .economics-settings { padding: 20px; margin-bottom: 25px; gap: 20px; }
:where(body) .economics-settings .eyebrow { color: var(--muted); margin-bottom: 8px; font-size: 11px; letter-spacing: 1px; }
:where(body) .economics-settings h2 { font-size: 18px; margin-bottom: 7px; }
:where(body) .economics-settings .small { font-size: 13px; }
:where(body) .cost-edit-button { background: var(--accent-soft); border-color: var(--accent); color: var(--ink); border-radius: 6px; min-height: 33px; padding: 7px 10px; font-size: 13px;  border-width: .5px;  font-weight: 400; }
:where(body) .cost-edit-button:hover { background: var(--accent-soft); border-color: var(--accent); }
:where(body) .cost-edit-button.cost-missing { background: var(--surface); border-color: var(--muted); color: var(--ink); }
:where(body) .products-import-actions .button { font-size: 11px; }
:where(body) .cost-import-instructions { padding: 20px; background: var(--paper); border: .5px solid var(--paper); border-radius: 9px; gap: 22px;  border-color: var(--line); }
:where(body) .cost-import-instructions strong { font-size: 13px; }
:where(body) .cost-import-instructions p { font-size: 11px; color: var(--muted); }
:where(body) .cost-import-upload { padding: 25px 0; gap: 20px; }
:where(body) .cost-import-upload input[type=file] { min-height: 40px; border-radius: 7px; background: var(--surface); color: var(--ink); }
:where(body) .cost-import-upload input::file-selector-button { background: var(--accent-soft); padding: 7px 10px; color: var(--ink); }
:where(body) .cost-import-counts > div { border-radius: 9px; padding: 20px; background: var(--paper);  border-width: .5px; }
:where(body) .cost-import-counts > div:first-child { background: var(--accent-soft); border-color: var(--accent); }
:where(body) .cost-import-counts > div:last-child { background: var(--surface-subtle); border-color: var(--line); }
:where(body) .cost-import-counts strong { font-size: 24px; }
:where(body) .cost-import-counts span { color: var(--muted); }
:where(body) .cost-import-scroll { border-radius: 7px 7px 0 0;  border-width: .5px; }
:where(body) .cost-import-scroll th { color: var(--ink); }
:where(body) .cost-import-scroll th, :where(body) .cost-import-scroll td { padding: 12px; }
:where(body) .cost-import-product .product-meta { color: var(--muted); }
:where(body) .cost-import-row-error td { background: var(--surface); }
#cost-import-save-note.has-errors { background: var(--surface); border-color: var(--muted); color: var(--ink); }

/* Modal surfaces and authentication share the same palette. */
:where(body) dialog { background: var(--surface); color: var(--ink); border-color: var(--line); border-radius: 12px; box-shadow: var(--panel-shadow);  border-width: .5px; }
:where(body) dialog::backdrop { background: var(--shadow); backdrop-filter: blur(7px); }
:where(body) .dialog-content { padding: 20px; }
:where(body) .dialog-heading .eyebrow { color: var(--muted); letter-spacing: 1px; }
:where(body) .dialog-heading h2 { font-size: 18px;  font-weight: 700; }
:where(body) .close-dialog { background: var(--paper); border: .5px solid var(--paper);  font-size: 18px; }
:where(body) .dialog-content > input { min-height: 42px; }
:where(body) .dialog-content > label { color: var(--ink); font-size: 13px;  font-weight: 400; }
:where(body) .form-grid { gap: 20px 10px; margin: 25px 0; }
:where(body) .form-grid input, :where(body) .form-grid select { min-height: 42px; font-size: 13px; background: var(--surface); }
:where(body) .form-grid label { font-size: 13px; }
:where(body) .notice, :where(body) .alert { background: var(--accent-soft); color: var(--ink); border-color: var(--accent); border-radius: 12px;  border-width: .5px;  font-size: 13px;  padding: 20px; }
:where(body) .alert.error { background: var(--surface); color: var(--ink); border-color: var(--line); }
:where(body) .empty-state .empty-symbol { background: var(--accent-soft); color: var(--accent);  font-size: 18px; }
:where(body) .empty-state p { color: var(--muted);  font-size: 13px; }
:where(body) .spinner { border-color: var(--accent-soft); border-top-color: var(--accent); }
:where(body) .toast { background: var(--accent-soft); border: .5px solid var(--accent); box-shadow: 0 16px 50px var(--shadow); }
:where(body) .dim { color: var(--muted) !important; }
:where(body) .negative { color: var(--ink) !important; }
:where(body) .skip-link { background: var(--accent); color: var(--ink); }
:where(body) .auth-story { background: var(--surface-active); color: var(--ink); border-right: .5px solid var(--line); }
:where(body) .auth-story .brand { gap: 8px; }
:where(body) .auth-story .brand-mark { background: transparent; color: var(--accent); }
:where(body) .auth-copy .eyebrow { color: var(--muted);  font-size: 11px; }
:where(body) .auth-copy > p:last-child { color: var(--ink);  font-size: 16px;  font-weight: 300; }
:where(body) .story-plan { background: var(--paper); border-color: var(--line);  border-width: .5px;  padding: 20px; }
:where(body) .story-plan-top, :where(body) .story-plan small { color: var(--muted); }
:where(body) .story-route { color: var(--ink);  font-size: 13px; }
:where(body) .story-bars i { background: var(--accent); }
:where(body) .story-bars i:nth-child(3n) { background: var(--accent); }
:where(body) .auth-footnote { color: var(--muted);  font-size: 13px; }
:where(body) .auth-panel { background: var(--bg); }
:where(body) .auth-card input { background: var(--surface); }
:where(body) .auth-card .section-kicker { color: var(--muted);  font-size: 11px; }
:where(body) .divider, :where(body) .auth-copyright { color: var(--muted);  font-size: 11px; }

@media (max-width: 1250px) {
  body.workspace-view .page-heading { align-items: flex-start; flex-wrap: wrap; gap: 17px; }
  body.workspace-view .page-actions { flex-wrap: wrap; justify-content: flex-start; gap: 10px; }
  :where(body) .parameter-fields { grid-template-columns: repeat(3, minmax(0, 1fr));  gap: 10px; }
  :where(body) .metrics { gap: 25px;  margin-bottom: 25px; }
  :where(body) .metric { padding: 20px; }
  :where(body) .metric-label { font-size: 16px; }
  :where(body) .metric > strong { font-size: 24px; }
}
@media (max-width: 1000px) {
  body.workspace-view .sidebar { width: 200px; flex-basis: 200px; padding-left: 15px; padding-right: 13px; }
  body.workspace-view .workspace { margin-left: 200px; width: calc(100% - 200px); }
  body.workspace-view .profile strong { max-width: 111px; font-size: 11px; }
  body.workspace-view .avatar { width: 41px; height: 41px; font-size: 18px; }
  body.workspace-view .sidebar-label { font-size: 13px; margin-left: 7px; }
  body.workspace-view .nav-button { gap: 9px; padding-left: 7px; font-size: 13px; }
  body.workspace-view .sidebar-tip strong { font-size: 11px; }
  body.workspace-view .sidebar-tip p { font-size: 11px; }
  body.workspace-view .main-content { padding: 28px 20px 0; }
  body.workspace-view .topbar { padding: 0 20px; }
  body.workspace-view .page-heading h1 { font-size: 32px; }
}
@media (max-width: 900px) {
  body.workspace-view .sidebar { width: 184px; flex-basis: 184px; padding-left: 12px; padding-right: 12px; }
  body.workspace-view .workspace { margin-left: 184px; width: calc(100% - 184px); }
  body.workspace-view .sidebar > .brand { margin-left: 4px; margin-bottom: 28px; }
  body.workspace-view .sidebar > .profile { padding: 0; gap: 8px; }
  body.workspace-view .profile strong { max-width: 110px; }
  body.workspace-view .avatar { width: 38px; height: 38px; font-size: 18px; }
  body.workspace-view .navigation { padding-left: 0; }
  body.workspace-view .nav-button { font-size: 11px; gap: 8px; }
  body.workspace-view .sidebar-label { font-size: 11px; margin-left: 4px; }
  body.workspace-view .sidebar-tip strong { margin-left: 5px; font-size: 11px; }
  body.workspace-view .breadcrumbs { display: none; }
  body.workspace-view .main-content { padding: 25px 18px 0; }
  body.workspace-view .topbar { height: 68px; padding: 0 18px; }
  .connection-light { width: 8px; height: 8px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 4px 2px var(--paper); display: inline-block; }
body.workspace-view .page-actions .sync-strip { width: 100%; }
  body.workspace-view .page-actions { width: 100%; }
  body.workspace-view .page-actions > .button { min-height: 38px; font-size: 13px; }
  :where(body) .metrics { grid-template-columns: repeat(2, minmax(0, 1fr));  gap: 25px;  margin-bottom: 25px; }
  :where(body) .metric { min-height: 140px; padding: 20px; }
  :where(body) .metric > strong { font-size: 24px; }
  :where(body) .insight-grid { grid-template-columns: 1fr;  gap: 25px;  margin-bottom: 25px; }
  :where(body) .formula-panel h2 { margin-top: 0; }
  :where(body) .economics-settings { padding: 20px; flex-wrap: wrap; gap: 16px; }
  :where(body) .economics-settings h2 { font-size: 18px; }
}
@media (max-width: 640px) {
  body.workspace-view .sidebar { width: 100%; height: auto; position: sticky; inset: 0 auto auto; padding: 19px 15px 0; border-right: 0; border-bottom: .5px solid var(--surface); background: var(--surface); backdrop-filter: blur(14px); }
  body.workspace-view .sidebar > .brand { margin: 2px 0 22px; min-height: 24px; }
  body.workspace-view .sidebar > .profile { position: absolute; top: 15px; right: 17px; max-width: 155px; margin: 0; padding: 0; }
  body.workspace-view .profile strong { max-width: 155px; font-size: 11px; }
  body.workspace-view .profile .text-button { font-size: 11px;  font-weight: 400; }
  body.workspace-view .avatar, body.workspace-view .sidebar-label, body.workspace-view .sidebar-tip, body.workspace-view .sidebar-bottom { display: none; }
  body.workspace-view .navigation { display: flex; gap: 3px; overflow-x: auto; justify-content: space-between; scrollbar-width: none; }
  body.workspace-view .nav-button { flex: 1 0 auto; min-height: 39px; padding: 9px 8px; gap: 6px; font-size: 11px; border-radius: 8px 8px 0 0; }
  body.workspace-view .nav-button > span, body.workspace-view .nav-button svg { width: 16px; height: 16px; font-size: 16px; }
  body.workspace-view .workspace { margin: 0; width: 100%; background: var(--bg); }
  body.workspace-view .topbar { padding: 0 16px; height: 57px; }
  body.workspace-view .account-control { gap: 12px; }
  body.workspace-view .account-control select { flex: 1; max-width: none; font-size: 13px; }
  body.workspace-view .ozon-label { font-size: 11px; padding: 7px 10px; }
  body.workspace-view .main-content { padding: 24px 15px 0; }
  body.workspace-view .page-heading { margin-bottom: 25px; gap: 16px; }
  body.workspace-view .page-heading h1 { font-size: 32px; letter-spacing: -.5px; }
  body.workspace-view .page-actions { width: 100%; margin-top: 0; gap: 9px; }
  body.workspace-view .page-actions > .button { min-height: 38px; font-size: 13px; padding: 9px 13px; border-radius: 10px; }
  .connection-light { width: 8px; height: 8px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 4px 2px var(--paper); display: inline-block; }
body.workspace-view .page-actions .sync-strip { border-radius: 10px; padding: 11px 12px; }
  body.workspace-view .page-actions .sync-info > div { flex-wrap: wrap; }
  body.workspace-view .page-actions .sync-info strong, body.workspace-view .page-actions .sync-info .small { font-size: 11px; }
  body.workspace-view .page-actions .sync-actions { width: auto; margin-left: auto; }
  body.workspace-view .demo-banner { font-size: 11px; padding: 12px; margin-bottom: 25px;  border-width: .5px;  color: var(--ink); }
  body.workspace-view .workspace-footer { font-size: 11px; padding-top: 22px; }
  :where(body) .parameters { padding: 20px; }
  :where(body) .parameter-heading { gap: 12px; margin-bottom: 25px; }
  :where(body) .parameter-heading h2 { font-size: 16px; }
  :where(body) .parameter-heading .small { font-size: 11px; max-width: 120px; }
  :where(body) .parameter-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  :where(body) .field label { font-size: 11px; white-space: normal; }
  :where(body) .field input, :where(body) .field select { min-height: 40px; font-size: 13px; }
  :where(body) .parameter-fields .button { min-height: 40px; font-size: 13px; padding: 8px 13px; }
  :where(body) .parameter-note { font-size: 11px; margin-top: 16px; }
  :where(body) .summary-scope { font-size: 11px; }
  :where(body) .metrics { gap: 25px; margin-bottom: 25px; }
  :where(body) .metric { padding: 20px; min-height: 137px; }
  :where(body) .metric-label, :where(body) .featured .metric-label { font-size: 18px; min-height: 34px; margin-bottom: 10px; }
  :where(body) .metric > strong { font-size: 24px; }
  :where(body) .metric > span { font-size: 11px; }
  :where(body) .panel-heading { padding: 20px; gap: 12px; }
  :where(body) .panel-heading h2 { font-size: 16px; }
  :where(body) .panel-heading .small { font-size: 11px; }
  :where(body) .cluster-bars { padding: 0 15px; gap: 15px; }
  :where(body) .cluster-bar-row { font-size: 11px; grid-template-columns: minmax(80px, 1fr) 1.4fr 36px; gap: 10px; }
  :where(body) .formula-panel { padding: 20px; }
  :where(body) .formula-panel h2 { font-size: 18px; }
  :where(body) .table-filters { padding: 20px;  gap: 10px; }
  :where(body) .table-filters select { max-width: 100%; font-size: 11px;  background: transparent;  font-weight: 300; }
  :where(body) .table-footer { padding: 20px; font-size: 11px;  border-width: .5px; }
  :where(body) .pagination { padding: 20px; gap: 10px; flex-wrap: wrap; font-size: 11px;  border-width: .5px;  color: var(--muted); }
  :where(body) .pagination .button { padding: 6px 9px; font-size: 11px; }
  :where(body) .economics-settings { padding: 20px; gap: 15px; }
  :where(body) .economics-settings h2 { font-size: 18px; }
  :where(body) .economics-settings .small { font-size: 11px; }
  :where(body) .products-import-actions { gap: 8px; }
  :where(body) .products-import-actions .button { min-height: 35px; font-size: 11px; padding: 8px 10px; }
  :where(body) .dialog-content { padding: 20px; }
  :where(body) .dialog-heading h2 { font-size: 18px;  font-weight: 700; }
  :where(body) .form-grid { gap: 20px 10px;  margin: 25px 0; }
  :where(body) .cost-import-instructions { grid-template-columns: 1fr; padding: 20px; gap: 16px;  border-color: var(--line); }
  :where(body) .cost-import-upload { padding: 25px 0; gap: 17px; }
  :where(body) .cost-import-counts > div { padding: 20px;  border-width: .5px; }
  :where(body) .cost-import-counts span { font-size: 11px;  color: var(--muted); }
  :where(body) .cost-import-content > .button { font-size: 13px; white-space: normal; }
  :where(body) .auth-story { padding: 28px 25px 35px; }
  :where(body) .auth-panel { padding-top: 35px; }
}

/* Exact Figma image assets and shared type scale. */
h1, h2, h3, strong, b { font-weight: 700; }
h1 { font-size: 32px; letter-spacing: 0; }
h2 { font-size: 18px; letter-spacing: 0; }
h3 { font-size: 16px; }
small, .small { font-size: 11px; }
.brand .brand-design-logo { display: block; width: 99.6px; height: 20px; max-width: 100%; object-fit: cover; }
body.workspace-view .nav-button > .nav-design-icon { display: block; width: 30px; height: 30px; flex: 0 0 30px; object-fit: contain; }
body.workspace-view .workspace::before { content: ""; pointer-events: none; position: fixed; z-index: -1; left: calc(53.333vw - 2px); top: -156px; width: 1446px; height: 1388px; background: url("/static/assets/figma/workspace-glow.svg") center / 100% 100% no-repeat; }
body.workspace-view .avatar { width: 50px; height: 50px; }
:where(body) .search-field > .search-design-icon { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; pointer-events: none; display: grid; place-items: center; }
.search-design-icon img { display: block; width: 38px; height: 38px; }
.download-design-icon { display: inline-grid; place-items: center; width: 8px; height: 17px; flex: 0 0 8px; }
.download-design-icon img { display: block; width: 16.3px; height: 4.41838px; max-width: none; transform: rotate(90deg); }
:where(body) .table-heading { border-bottom-width: .5px; }
:where(body) .panel-heading .small { font-weight: 300; color: var(--ink); }
:where(body) .auth-copy h1 { font-size: 32px; font-weight: 700; letter-spacing: 0; }
:where(body) .auth-card h2 { font-size: 18px; font-weight: 700; letter-spacing: 0; }
:where(body) .auth-card form label { font-size: 13px; font-weight: 400; }
:where(body) .auth-switch { font-size: 13px; }
:where(body) .story-plan > strong { font-size: 16px; font-weight: 700; }
:where(body) .story-route > span { border-width: .5px; border-color: var(--line); }
:where(body) .divider::before, :where(body) .divider::after { height: .5px; }
:where(body) .dialog-content > .muted, :where(body) .dialog-content > .notice, :where(body) .dialog-content > .small { font-size: 13px; }
:where(body) .explanation-steps li, :where(body) .explanation-steps p { font-size: 13px; color: var(--muted); }
:where(body) .explanation-steps strong { font-size: 13px; }
:where(body) .form-error { font-size: 13px; color: var(--ink); font-weight: 700; }
:where(body) .field-hint, :where(body) .field-action { font-size: 11px; }
:where(body) .cost-import-preview-heading h3 { font-size: 16px; font-weight: 700; }
:where(body) .cost-import-preview-heading label, :where(body) .cost-import-row-result p, :where(body) .cost-import-expiry { font-size: 11px; }
:where(body) .cost-import-preview-heading select, :where(body) .cost-import-result { font-size: 13px; }
:where(body) .cost-import-product strong { font-size: 13px; font-weight: 700; }
#cost-import-preview .pagination { padding: 20px; border-width: .5px; }
@media (max-width: 640px) {
  body.workspace-view .workspace::before { left: 10vw; }
  body.workspace-view .nav-button { padding: 5px 2px; gap: 0; }
  body.workspace-view .navigation { gap: 0; }
  body.workspace-view .page-heading h1 { letter-spacing: 0; }
  :where(body) .field label, :where(body) .field input, :where(body) .field select { font-size: 13px; }
}

/* The exported dot assets include a four-pixel blur outside the 10px mark. */
.tiny-dot, :where(body) .status-dot.connected, :where(body) .status-dot.running, .connection-light { position: relative; width: 10px; height: 10px; flex: 0 0 10px; background: transparent; box-shadow: none; vertical-align: middle; }
.tiny-dot::before, :where(body) .status-dot.connected::before, :where(body) .status-dot.running::before, .connection-light::before { content: ""; position: absolute; inset: -4px; background: url("/static/assets/figma/blue-dot.svg") center / contain no-repeat; pointer-events: none; }
.connection-light::before { background-image: url("/static/assets/figma/white-dot.svg"); }
:where(body) .eyebrow, :where(body) .section-kicker { font-size: 11px; font-weight: 400; letter-spacing: 0; }
:where(body) .loading-state, :where(body) .table-empty { font-size: 13px; }
:where(body) .cost-import-content .dialog-heading h2 { font-size: 18px; }
:where(body) .cost-import-upload .field label, :where(body) .cost-import-upload input[type=file] { font-size: 13px; }
:where(body) .cost-import-upload .field > span, :where(body) .cost-import-counts span, :where(body) .cost-import-scroll th, :where(body) .dialog-heading .eyebrow { font-size: 11px; }

/* Complete legacy-selector overrides for the shared type scale. */
label { font-size: 13px; font-weight: 400; }
body.workspace-view .page-heading .eyebrow { font-size: 11px; }
body.workspace-view .workspace-footer span:first-child { font-weight: 700; }
:where(body) .first-account h1 { font-size: 32px; }
:where(body) .economics-settings .button { font-size: 13px; }
:where(body) .cluster-bar-row strong { font-weight: 700; }
:where(body) .method-note > span { font-size: 16px; }
:where(body) .cost-import-preview-heading label { font-weight: 400; }
:where(body) .dialog-heading .eyebrow { font-size: 11px; font-weight: 400; }
/* Figma's dropdown chevron keeps the original half-pixel SVG stroke. */
:where(body) .field:has(> select) { position: relative; }
:where(body) .field > select { appearance: none; -webkit-appearance: none; padding-right: 28px; }
:where(body) .field:has(> select)::after { content: ""; position: absolute; width: 4.18198px; height: 7.36396px; right: 14px; bottom: 15px; transform: rotate(90deg); background: url("/static/assets/figma/chevron.svg") center / contain no-repeat; pointer-events: none; }

/* Each section keeps one help entry; long explanations live in its document. */
.section-docs-link { color: var(--muted); font-size: 13px; font-weight: 400; line-height: 1.5; text-underline-offset: 3px; white-space: nowrap; }
.section-docs-link:is(:hover, :focus-visible) { color: var(--accent); }
.section-docs-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.section-heading-actions, .section-docs-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 20px; }
.personal-heading.section-docs-heading h1 { margin-bottom: 0; }
#view-plan .insight-grid { grid-template-columns: minmax(0, 1fr); }
.section-data-alerts { margin: 20px 0; padding: 20px; border: .5px solid var(--line); border-radius: 10px; color: var(--ink); font-size: 13px; line-height: 1.6; }
.section-data-alerts[hidden] { display: none; }
.section-data-alerts p { margin: 0; }
.section-data-alerts p + p { margin-top: 8px; }