/* Generated by tools/make_theme_css.py from style.css. Do not edit. */
:root[data-theme] { color-scheme: dark; }
:root[data-theme="light-desktop"] { color-scheme: light; }
:root[data-theme="dark"] { --t-bg: #161b20; --t-fg: #e2e8ec; --t-accent: #f08a4b; --t-nav: #0e1317; }
/* style.css */
:root[data-theme] { --nav: var(--t-nav); --ink: var(--t-fg); --muted: color-mix(in srgb, var(--t-fg) 62%, var(--t-bg)); --line: color-mix(in srgb, var(--t-fg) 16%, var(--t-bg)); --canvas: color-mix(in srgb, var(--t-bg) 86%, #000); --orange: var(--t-accent); --green: color-mix(in srgb, #228268 72%, var(--t-fg)); --amber: color-mix(in srgb, #8d6208 72%, var(--t-fg)); }
:where(:root[data-theme]) button:focus-visible, :where(:root[data-theme]) a:focus-visible, :where(:root[data-theme]) input:focus-visible, :where(:root[data-theme]) select:focus-visible, :where(:root[data-theme]) textarea:focus-visible { outline: 3px solid color-mix(in srgb, #83b9d5 72%, var(--t-fg)); }
:where(:root[data-theme]) .skip { background: var(--t-bg); }
:where(:root[data-theme]) .topbar { background: var(--t-bg); }
:where(:root[data-theme]) .topbar form { border: 1px solid color-mix(in srgb, var(--t-fg) 14.3%, var(--t-bg)); background: color-mix(in srgb, var(--t-fg) 3.1%, var(--t-bg)); }
:where(:root[data-theme]) .topbar form > span { color: color-mix(in srgb, #76909b 72%, var(--t-fg)); }
:where(:root[data-theme]) .topbar kbd { color: color-mix(in srgb, var(--t-fg) 49.6%, var(--t-bg)); border: 1px solid color-mix(in srgb, var(--t-fg) 14.3%, var(--t-bg)); }
:where(:root[data-theme]) .topbar button[aria-label='Clear search'] { color: color-mix(in srgb, #79909b 72%, var(--t-fg)); }
:where(:root[data-theme]) .button { border: 1px solid color-mix(in srgb, var(--t-fg) 15.7%, var(--t-bg)); background: var(--t-bg); }
:where(:root[data-theme]) .button:hover { background: color-mix(in srgb, var(--t-fg) 6.8%, var(--t-bg)); }
:where(:root[data-theme]) .icon-button { color: color-mix(in srgb, var(--t-fg) 64.4%, var(--t-bg)); }
:where(:root[data-theme]) .icon-button:hover { background: color-mix(in srgb, var(--t-fg) 6.8%, var(--t-bg)); }
:where(:root[data-theme]) .text-button { color: color-mix(in srgb, #478098 72%, var(--t-fg)); }
:where(:root[data-theme]) .product-card { border: 1px solid color-mix(in srgb, var(--t-fg) 12.8%, var(--t-bg)); background: var(--t-bg); }
:where(:root[data-theme]) .product-open .visual { color: color-mix(in srgb, #507787 72%, var(--t-fg)); }
:where(:root[data-theme]) .star { background: var(--t-bg); color: color-mix(in srgb, var(--t-fg) 43.3%, var(--t-bg)); }
:where(:root[data-theme]) .star.saved { color: color-mix(in srgb, #d48b28 72%, var(--t-fg)); }
:where(:root[data-theme]) .badge { background: color-mix(in srgb, var(--t-fg) 6.8%, var(--t-bg)); color: color-mix(in srgb, #507383 72%, var(--t-fg)); }
:where(:root[data-theme]) .badge.amber { background: color-mix(in srgb, #ffae00 16.4%, var(--t-bg)); color: color-mix(in srgb, #8d6208 72%, var(--t-fg)); }
:where(:root[data-theme]) .badge.green { background: color-mix(in srgb, var(--t-fg) 8.0%, var(--t-bg)); color: color-mix(in srgb, #26775b 72%, var(--t-fg)); }
:where(:root[data-theme]) .badge.gray { background: color-mix(in srgb, var(--t-fg) 6.5%, var(--t-bg)); color: color-mix(in srgb, var(--t-fg) 64.1%, var(--t-bg)); }
:where(:root[data-theme]) .category-card { background: var(--t-bg); }
:where(:root[data-theme]) .category-card:hover { border-color: color-mix(in srgb, #a4c2ce 72%, var(--t-fg)); background: color-mix(in srgb, var(--t-fg) 1.0%, var(--t-bg)); }
:where(:root[data-theme]) .category-card .illustration { color: color-mix(in srgb, #66818d 72%, var(--t-fg)); }
:where(:root[data-theme]) .category-card > span:last-child { color: color-mix(in srgb, var(--t-fg) 49.6%, var(--t-bg)); }
:where(:root[data-theme]) select, :where(:root[data-theme]) input, :where(:root[data-theme]) textarea { border: 1px solid color-mix(in srgb, var(--t-fg) 16.2%, var(--t-bg)); background: var(--t-bg); }
:where(:root[data-theme]) .chip { border: 1px solid color-mix(in srgb, var(--t-fg) 14.8%, var(--t-bg)); background: var(--t-bg); color: color-mix(in srgb, #527280 72%, var(--t-fg)); }
:where(:root[data-theme]) .chip.selected { background: color-mix(in srgb, var(--t-fg) 9.2%, var(--t-bg)); border-color: color-mix(in srgb, #a3c4d1 72%, var(--t-fg)); color: color-mix(in srgb, #24556a 72%, var(--t-fg)); }
:where(:root[data-theme]) .empty { border: 1px dashed color-mix(in srgb, var(--t-fg) 20.6%, var(--t-bg)); background: color-mix(in srgb, var(--t-fg) 1.9%, var(--t-bg)); }
:where(:root[data-theme]) .footer { background: var(--t-bg); color: color-mix(in srgb, var(--t-fg) 56.9%, var(--t-bg)); }
:where(:root[data-theme]) .panel { background: var(--t-bg); }
:where(:root[data-theme]) .stats { color: color-mix(in srgb, #77919e 72%, var(--t-fg)); }
:where(:root[data-theme]) .stats b { color: color-mix(in srgb, #3c5866 72%, var(--t-fg)); }
:where(:root[data-theme]) .file-input { border: 1px dashed color-mix(in srgb, var(--t-fg) 29.3%, var(--t-bg)); background: color-mix(in srgb, var(--t-fg) 2.4%, var(--t-bg)); }
:where(:root[data-theme]) .notice { background: color-mix(in srgb, var(--t-fg) 6.8%, var(--t-bg)); color: color-mix(in srgb, #886214 72%, var(--t-fg)); }
:where(:root[data-theme]) .notice.neutral { background: color-mix(in srgb, var(--t-fg) 6.1%, var(--t-bg)); color: color-mix(in srgb, #4e7483 72%, var(--t-fg)); }
:where(:root[data-theme]) .progress { background: color-mix(in srgb, var(--t-fg) 9.9%, var(--t-bg)); }
:where(:root[data-theme]) .detail { background: var(--t-bg); }
:where(:root[data-theme]) .detail-head { background: var(--t-bg); }
:where(:root[data-theme]) .detail-title .visual { background: color-mix(in srgb, var(--t-fg) 5.6%, var(--t-bg)); color: color-mix(in srgb, #587c8a 72%, var(--t-fg)); }
:where(:root[data-theme]) .price-strip { background: color-mix(in srgb, var(--t-fg) 3.6%, var(--t-bg)); border: 1px solid color-mix(in srgb, var(--t-fg) 12.6%, var(--t-bg)); }
:where(:root[data-theme]) .price-strip strong { color: color-mix(in srgb, #29634d 72%, var(--t-fg)); }
:where(:root[data-theme]) .price-strip .minor { color: color-mix(in srgb, #496573 72%, var(--t-fg)); }
:where(:root[data-theme]) th, :where(:root[data-theme]) td { border-bottom: 1px solid color-mix(in srgb, var(--t-fg) 9.7%, var(--t-bg)); }
:where(:root[data-theme]) th { background: color-mix(in srgb, var(--t-fg) 4.1%, var(--t-bg)); color: color-mix(in srgb, #5d7581 72%, var(--t-fg)); }
:where(:root[data-theme]) td small { color: color-mix(in srgb, var(--t-fg) 57.6%, var(--t-bg)); }
:where(:root[data-theme]) tr.chosen td { background: color-mix(in srgb, var(--t-fg) 5.6%, var(--t-bg)); }
:where(:root[data-theme]) .mono { color: color-mix(in srgb, var(--t-fg) 56.6%, var(--t-bg)); }
:where(:root[data-theme]) .review-item { border-bottom: 1px solid var(--line, color-mix(in srgb, var(--t-fg) 14.0%, var(--t-bg))); }
:where(:root[data-theme]) .grouped-review .group-lines { border: 1px solid color-mix(in srgb, var(--t-fg) 12.6%, var(--t-bg)); }
:where(:root[data-theme]) .grouped-review th { background: color-mix(in srgb, var(--t-fg) 3.9%, var(--t-bg)); }
:where(:root[data-theme]) .grouped-review tr:has([data-include-choice]:checked) { background: color-mix(in srgb, var(--t-fg) 4.4%, var(--t-bg)); }
:where(:root[data-theme]) .grouped-review input[type='checkbox'], :where(:root[data-theme]) .grouped-review input[type='radio'] { accent-color: color-mix(in srgb, #df792d 72%, var(--t-fg)); }
:where(:root[data-theme]) .archive-select input { accent-color: color-mix(in srgb, #e98a3a 72%, var(--t-fg)); }
:where(:root[data-theme]) .module-card:hover { border-color: color-mix(in srgb, #e98a3a 72%, var(--t-fg)); }
:where(:root[data-theme]) .quote-list-row { border-bottom: 1px solid color-mix(in srgb, var(--t-fg) 12.8%, var(--t-bg)); }
:where(:root[data-theme]) .quote-list-row small { color: color-mix(in srgb, var(--t-fg) 67.5%, var(--t-bg)); }
:where(:root[data-theme]) .quote-summary small { color: color-mix(in srgb, var(--t-fg) 67.8%, var(--t-bg)); }
:where(:root[data-theme]) .quote-pick { border: 1px solid color-mix(in srgb, var(--t-fg) 12.8%, var(--t-bg)); }
:where(:root[data-theme]) .quote-pick small { color: color-mix(in srgb, var(--t-fg) 67.8%, var(--t-bg)); }
:where(:root[data-theme]) .takeoff-entry-scroll thead, :where(:root[data-theme]) .takeoff-preview-scroll thead { background: color-mix(in srgb, var(--t-fg) 4.1%, var(--t-bg)); }
:where(:root[data-theme]) .prebuild-product { background: var(--t-bg); }
:where(:root[data-theme]) .quote-section-row th { background: var(--surface-alt, color-mix(in srgb, var(--t-fg) 6.1%, var(--t-bg))); color: var(--text, color-mix(in srgb, #19364a 72%, var(--t-fg))); }
:where(:root[data-theme]) .quote-section-summary { color: var(--text, color-mix(in srgb, #19364a 72%, var(--t-fg))); }
:where(:root[data-theme]) .catalogue-selection-bar { background: var(--t-bg); }
:where(:root[data-theme]) .main-suggestion.recommended { background: color-mix(in srgb, var(--t-fg) 4.1%, var(--t-bg)); }
:where(:root[data-theme]) .design-scroll { background: color-mix(in srgb, var(--t-fg) 16.0%, var(--t-bg)); }
:where(:root[data-theme]) .design-project-tabs span:not(.muted) { background: color-mix(in srgb, var(--t-fg) 9.0%, var(--t-bg)); }
:where(:root[data-theme]) .design-search { background: var(--t-bg); }
:where(:root[data-theme]) .design-project-card { background: var(--t-bg); }
:where(:root[data-theme]) .design-project-cover, :where(:root[data-theme]) .design-plan-cover { color: color-mix(in srgb, #53717d 72%, var(--t-fg)); background: linear-gradient(135deg, color-mix(in srgb, var(--t-fg) 5.3%, var(--t-bg)), color-mix(in srgb, var(--t-fg) 10.9%, var(--t-bg))); }
:where(:root[data-theme]) .design-project-cover:hover, :where(:root[data-theme]) .design-plan-cover:hover { background: color-mix(in srgb, var(--t-fg) 12.8%, var(--t-bg)); }
:where(:root[data-theme]) .design-cover-icon, :where(:root[data-theme]) .design-plan-cover > span { color: color-mix(in srgb, #6a929d 72%, var(--t-fg)); }
:where(:root[data-theme]) .design-project-cover > .design-scope { background: color-mix(in srgb, var(--t-bg) 60%, transparent); }
:where(:root[data-theme]) .design-empty { border: 1px dashed color-mix(in srgb, var(--t-fg) 27.8%, var(--t-bg)); background: var(--t-bg); }
:where(:root[data-theme]) .design-empty > span { color: color-mix(in srgb, var(--t-fg) 48.9%, var(--t-bg)); }
:where(:root[data-theme]) .design-toolstrip button.active { background: var(--t-bg); color: color-mix(in srgb, #243c48 72%, var(--t-fg)); }
:where(:root[data-theme]) .design-toolstrip + .toolbar { background: var(--t-bg); }
:where(:root[data-theme]) .design-scroll { background: color-mix(in srgb, var(--t-fg) 14.3%, var(--t-bg)); }
:where(:root[data-theme]) .design-plan-list button.active { background: color-mix(in srgb, var(--t-fg) 8.2%, var(--t-bg)); }
:where(:root[data-theme]) .design-plan-list span { color: color-mix(in srgb, #648c99 72%, var(--t-fg)); }
:where(:root[data-theme]) .design-layer-list button.active { background: color-mix(in srgb, var(--t-fg) 8.2%, var(--t-bg)); }
:where(:root[data-theme]) .design-warnings { background: color-mix(in srgb, var(--t-fg) 5.6%, var(--t-bg)); border: 1px solid color-mix(in srgb, #e9d6b4 72%, var(--t-fg)); }
:where(:root[data-theme]) .design-upload-error { color: color-mix(in srgb, #a4313d 72%, var(--t-fg)); background: color-mix(in srgb, var(--t-fg) 3.6%, var(--t-bg)); }
:where(:root[data-theme]) .design-count-review { border: 1px solid color-mix(in srgb, #acd0c4 72%, var(--t-fg)); background: color-mix(in srgb, var(--t-fg) 4.4%, var(--t-bg)); }
:where(:root[data-theme]) .design-review-rail { border-left: 3px solid color-mix(in srgb, #228268 72%, var(--t-fg)); }
:where(:root[data-theme]) .design-symbol-choice { background: var(--t-bg); border: 1px solid color-mix(in srgb, var(--t-fg) 20.8%, var(--t-bg)); }
:where(:root[data-theme]) .design-symbol-choice:hover, :where(:root[data-theme]) .design-symbol-choice.active { border-color: color-mix(in srgb, #2165a1 72%, var(--t-fg)); background: color-mix(in srgb, var(--t-fg) 6.3%, var(--t-bg)); }
:where(:root[data-theme]) #design-mask-canvas { background: var(--t-bg); border: 1px solid color-mix(in srgb, var(--t-fg) 27.8%, var(--t-bg)); }
:where(:root[data-theme]) .client-doc-preview iframe { border: 1px solid color-mix(in srgb, var(--t-fg) 20.6%, var(--t-bg)); background: color-mix(in srgb, var(--t-fg) 9.9%, var(--t-bg)); }
:where(:root[data-theme]) .design-current-symbol svg { background: var(--t-bg); }
:where(:root[data-theme]) .design-prebuild-results button { background: var(--t-bg); }
:where(:root[data-theme]) .design-prebuild-results button.active { background: color-mix(in srgb, var(--t-fg) 9.9%, var(--t-bg)); }
:where(:root[data-theme]) .heat-result { background: color-mix(in srgb, var(--t-fg) 9.9%, var(--t-bg)); }
:where(:root[data-theme]) .design-heat-area-row { background: color-mix(in srgb, var(--t-fg) 7.3%, var(--t-bg)); }
:where(:root[data-theme]) .heat-derived-zone h4 { color: color-mix(in srgb, #087f8c 72%, var(--t-fg)); }
:where(:root[data-theme]) .heat-wall-key { color: color-mix(in srgb, var(--t-fg) 67.8%, var(--t-bg)); }
:where(:root[data-theme]) .heat-wall-exterior { color: color-mix(in srgb, #b85b13 72%, var(--t-fg)); }
:where(:root[data-theme]) .heat-wall-internal { color: color-mix(in srgb, #275dad 72%, var(--t-fg)); }
:where(:root[data-theme]) .design-plan-group.is-plan-drop-target { border-color: color-mix(in srgb, #2165a1 72%, var(--t-fg)); background: color-mix(in srgb, var(--t-fg) 5.1%, var(--t-bg)); }
:where(:root[data-theme]) .heat-area-result { background: color-mix(in srgb, var(--t-fg) 13.3%, var(--t-bg)); color: color-mix(in srgb, #176744 72%, var(--t-fg)); }
:where(:root[data-theme]) .heat-area-result.stale { background: color-mix(in srgb, #ff9a00 16.4%, var(--t-bg)); color: color-mix(in srgb, #8c520c 72%, var(--t-fg)); }
:where(:root[data-theme]) .heat-area-result.incomplete, :where(:root[data-theme]) .heat-area-result.uncalculated { background: color-mix(in srgb, var(--t-fg) 7.5%, var(--t-bg)); color: color-mix(in srgb, var(--t-fg) 76.7%, var(--t-bg)); }
:where(:root[data-theme]) .design-draw-selector select { background: var(--t-bg); color: color-mix(in srgb, #243c48 72%, var(--t-fg)); }
:where(:root[data-theme]) .design-layer-list .design-layer-controls .button { background: var(--t-bg); }
:where(:root[data-theme]) .design-layer-list .design-layer-controls [data-design-add-measurement] { background: color-mix(in srgb, var(--t-fg) 6.5%, var(--t-bg)); border-color: color-mix(in srgb, var(--t-fg) 19.6%, var(--t-bg)); }
:where(:root[data-theme]) .design-side-actions .button.active { background: color-mix(in srgb, var(--t-fg) 8.2%, var(--t-bg)); border-color: color-mix(in srgb, #91b6c3 72%, var(--t-fg)); }
:where(:root[data-theme]) .design-counting-active { background: color-mix(in srgb, var(--t-fg) 6.5%, var(--t-bg)); }
:where(:root[data-theme]) .design-export-menu > div { background: var(--t-bg); }
:where(:root[data-theme]) .design-export-menu button:hover, :where(:root[data-theme]) .design-export-menu button:focus-visible { background: color-mix(in srgb, var(--t-fg) 6.5%, var(--t-bg)); }
:where(:root[data-theme]) .design-export-preview { background: color-mix(in srgb, var(--t-fg) 14.3%, var(--t-bg)); }
:where(:root[data-theme]) .design-export-preview > svg { background: var(--t-bg); }
@media print {
  :where(:root[data-theme]) html, :where(:root[data-theme]) body { background: var(--t-bg) !important; }
}