/* WarmFloor Studio: a quiet drafting surface with a single action colour. */
:root {
  --bg: #f5f6f3; --bg-elev: #fff; --bg-elev2: #f5f7f4; --bg-elev3: #edf1eb;
  --panel: #fff; --border: #d9e0d7; --border-soft: #e7ebe4;
  --text: #29362e; --muted: #778078; --muted-2: #8c958c;
  --accent: #347456; --accent-2: #438665; --accent-soft: #edf5ee;
  --teal: #387c61; --danger: #bd554e; --warning: #b67f33;
  --grad: linear-gradient(115deg, #347456, #3f805f);
  --radius: 12px; --radius-sm: 7px; --shadow: 0 12px 35px #263f2c12;
  --topbar-h: 76px;
  font-family: 'Segoe UI', Arial, sans-serif;
}
html, body, #app { height: 100%; }
body { color-scheme: light; }
button, input, select { font-size: 13px; }
button { transition: background .15s, border-color .15s; }
button:focus-visible, input:focus-visible, summary:focus-visible { outline: 2px solid #57956c; outline-offset: 3px; }
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-thumb { background: #ced7cb; }
.topbar { padding: 0 26px; gap: 25px; background: #fff; backdrop-filter: none; border-color: var(--border); }
.brand { gap: 10px; min-width: 220px; }
.brand__text b { font-size: 23px; letter-spacing: -.9px; font-weight: 750; }
.brand-accent { color: var(--accent); }
.brand__text small { font-size: 8px; letter-spacing: 1.65px; margin-top: 5px; }
.project-name { border-left: 1px solid var(--border); border-radius: 0; height: 32px; max-width: 260px; }
.project-name > span { display: none; }
.project-name input { font-size: 13px; font-weight: 500; }
.topbar__actions { gap: 8px; }
.topbar-btn { height: 35px; border-radius: 6px; font-weight: 500; background: #fff; }
.topbar-btn:hover, .btn:hover { border-color: #a8baa8; background: #f4f7f1; transform: none; }
.topbar-new { background: #edf4eb; border: 1px solid #d7e4d4; color: #386447; font-weight: 600; border-radius: 6px; }
.topbar-new:hover { background: #e1eddf; }
.icon-btn { background: #fff; color: #788479; border-color: transparent; }
.icon-btn:hover:not(:disabled) { background: #f0f4ee; border-color: var(--border); color: var(--text); }
.icon-btn--danger { color: #9aa69a; }
.icon-btn--danger:hover:not(:disabled) { color: #b64941; background: #fff0ed; }
.project-bar { min-height: 104px; padding: 20px 28px; display: flex; align-items: center; gap: 25px; background: #f8f9f5; border-bottom: 1px solid var(--border); flex: none; }
.project-bar__intro .eyebrow { font-size: 9px; letter-spacing: 1.8px; color: #818c7d; }
.project-bar h1 { font-size: 23px; letter-spacing: -.7px; font-weight: 600; margin-top: 5px; }
.project-bar h1 > span { color: #5a8d54; }
.project-steps { margin-left: auto; display: flex; align-items: center; gap: 16px; color: #7c877b; font-size: 11px; }
.project-steps > span { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.project-steps i { font-style: normal; width: 23px; height: 23px; display: grid; place-items: center; border: 1px solid #d6dfd0; border-radius: 50%; color: #60785c; font-size: 10px; }
.project-steps .is-done { color: #496c48; }
.project-steps .is-done i { background: #e6edde; border-color: #cadabb; }
.project-steps > b { font-weight: 400; color: #b7c1b2; }
.local-label { font-size: 10px; color: #7a8876; display: flex; gap: 6px; align-items: center; white-space: nowrap; border-left: 1px solid #dce3d7; padding-left: 22px; }
.local-label > span { width: 6px; height: 6px; background: #8ca477; border-radius: 50%; }
.workspace { grid-template-columns: 316px minmax(300px, 1fr) 310px; }
.sidebar__scroll { padding: 0 19px; gap: 0; }
.card { padding: 21px 0; border: 0; border-bottom: 1px solid var(--border-soft); border-radius: 0; gap: 14px; background: transparent; }
.card__head { grid-template-columns: 23px minmax(0, 1fr) auto; gap: 9px; }
.card__head h2 { font-size: 14px; font-weight: 650; }
.card__head p { font-size: 10px; line-height: 1.55; margin-top: 4px; }
.step { width: 22px; height: 22px; font-size: 10px; border-radius: 50%; background: #f0f4e9; border: 1px solid #e1e8d9; color: #668253; }
.badge { background: #f0f3ec; color: #6d7c62; font-size: 10px; }
.tool-chips { gap: 6px; }
.tool-chip { color: #667760; background: #f8f9f6; border-color: #e3e8de; font-size: 10px; border-radius: 5px; }
.room-list { gap: 2px; max-height: 232px; }
.room-row { padding: 8px 7px; border-radius: 6px; }
.room-row:hover { background: #f7f9f3; }
.room-row.is-selected { background: #eef5ea; border-color: #d5e4cd; }
.room-row__title b { font-weight: 600; font-size: 12px; }
.room-row__area { color: #7b8a73; font-size: 11px; }
.room-row__meta { font-size: 9px; color: #8b9685; }
.room-row__meta { display: none; }
.room-row__status { color: #6f8f63; }
.room-check { border-color: #d0dace; background: #fff; border-radius: 4px; }
.room-check.is-on { background: var(--accent); border-color: var(--accent); color: #fff; }
.room-check.is-on svg { color: #fff; }
.room-heating-check { width: 17px; height: 17px; margin: 0 1px; flex: none; accent-color: #347456; cursor: pointer; }
.bend-note { font-size: 10px; color: #78906d; line-height: 1.6; }
.build-split__main.build-single { border-radius: 7px; width: 100%; }
.plan__svg.is-tool-door { cursor: crosshair; }
.routing-incomplete { border: 1px solid #e0ba8d; border-radius: 7px; padding: 11px; background: #fff6e9; color: #8b622f; font-size: 11px; line-height: 1.5; }
.loop-row.is-unrouted { background: #fff4e4; }
.quick-room summary, .advanced-settings summary { display: flex; align-items: center; gap: 5px; color: #60845b; cursor: pointer; font-size: 11px; list-style: none; }
.quick-room summary::after, .advanced-settings summary::after { content: '+'; margin-left: auto; }
.quick-room[open] summary::after, .advanced-settings[open] summary::after { content: '−'; }
.quick-room .fields, .advanced-settings .fields { margin: 13px 0; }
.quick-room .btn { width: 100%; font-size: 11px; }
.segmented { gap: 8px; }
.segmented__item { background: #fafbf8; border-color: #e0e6d9; color: #7e8a76; border-radius: 7px; padding: 11px; }
.segmented__item.is-active { background: #edf4e7; border-color: #99b48a; color: #426e3e; box-shadow: none; }
.segmented__item:hover { border-color: #99b48a; }
.segmented__item b { font-size: 12px; }
.segmented__item small { font-size: 9px; line-height: 1.5; color: #85917e; }
.pattern-preview { width: 28px; height: 28px; }
.pattern-preview { color: #749467; }
.segmented__item { grid-template-columns: 1fr; grid-template-rows: auto auto auto; gap: 5px; }
.pattern-preview { grid-row: auto; }
.fields { gap: 12px 10px; }
.field__label { color: #737e6c; font-size: 10px; }
.field__control { background: #fafbf8; border: 1px solid #dde4d8; border-radius: 5px; min-height: 36px; }
.field__control:focus-within { border-color: #78a26c; box-shadow: 0 0 0 2px #6b985314; }
.field__control input, .field__control select { color: #364331; font-size: 12px; font-weight: 500; }
.field__unit { color: #8c9984; font-size: 10px; }
.field__hint { color: #939b8e; font-size: 9px; }
.toggle-field { border-color: #e1e7dc; background: #fafbf7; }
.toggle-field__label { color: #52634b; }
.toggle { background: #cbd5c4; }
.toggle.is-on, .toggle-field input:checked + .toggle { background: #52854a; }
.toggle__knob { background: #fff; }
.toggle-field__track { background: #dce4d5; border-color: #d2ddc8; }
.toggle-field__input:checked + .toggle-field__track { background: #58844a; border-color: #58844a; }
.toggle-field__thumb { background: #fff; }
.link-btn { font-size: 10px; color: #788e69; }
.link-btn:hover { color: #3b6c35; }
.calc-preview { background: #f2f6ed; border-color: #dfe8d5; }
.calc-preview b { color: #4c7140; }
.inspector { background: #f7f9f3; border-color: #dfe7d8; }
.inspector__head { color: #6a7e5d; }
.window-list__state.is-on { color: #5b8150; }
.build-dock { padding: 16px 19px 12px; background: #fff; }
.build-split { border-radius: 7px; box-shadow: 0 4px 10px #3c68451a; }
.build-split__main, .build-split__toggle { color: #fff; min-height: 49px; }
.build-split__main { border-radius: 7px 0 0 7px; padding: 8px 11px; }
.build-split__main b { font-size: 12px; font-weight: 600; }
.build-split__main small { color: #d0e4cf; font-size: 9px; }
.build-split__icon { background: #ffffff17; color: #fff; }
.build-split__toggle { border-radius: 0 7px 7px 0; border-left-color: #ffffff30; width: 35px; }
.build-note { font-size: 9px; color: #8b9783; }
.build-menu { background: #fff; border-color: #dbe3d5; box-shadow: var(--shadow); }
.build-menu__item:hover { background: #eff5e8; }
.build-menu__item { color: #456239; }
.canvas-area { display: flex; flex-direction: column; background: #f7f8f4; }
.plan-heading { flex: none; height: 47px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 19px; border-bottom: 1px solid var(--border); background: #fdfefb; font-size: 11px; }
.plan-heading > span:first-child { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.plan-heading small { color: #929b8b; font-size: 10px; font-weight: 400; }
.plan-heading__hint { color: #97a08f; font-size: 9px; }
.plan { height: auto; flex: 1; min-height: 0; background: #f7f8f4; }
.canvas-tools { top: 15px; left: 16px; padding: 4px; border-radius: 8px; background: #fff; border-color: #dde4d6; box-shadow: 0 3px 12px #3b513512; backdrop-filter: none; }
.canvas-tool { width: 32px; height: 33px; color: #87957c; border-radius: 5px; }
.canvas-tool.is-active { color: #4a7342; background: #edf3e6; box-shadow: inset 0 0 0 1px #d6e3c8; }
.canvas-zoom { background: #fff; border-color: #dfe5d8; box-shadow: 0 3px 12px #3b513512; bottom: 18px; }
.canvas-zoom button { color: #87957c; }
.canvas-status { background: #fdfefb; border-color: #e1e7da; color: #8a9780; box-shadow: none; bottom: 18px; }
.canvas-status span:last-child { color: #87977c; }
.canvas-hint { color: #829074; background: #fffffff0; border-color: #e3e8dd; font-size: 10px; bottom: 67px; max-width: 85%; }
.canvas-stale { top: 65px; background: #fff8e8; color: #97703c; border-color: #e8d7b0; box-shadow: none; }
.onboarding { background: #fffffff5; border-color: #dce6d4; box-shadow: var(--shadow); }
.onboarding__icon, .results-empty__icon { background: #edf5e6; color: #668f52; border-color: #dce8d2; }
.btn--primary { color: #fff; box-shadow: none; }
.btn--primary:hover { background: #3f805f; box-shadow: none; }
.results { background: #fff; border-color: var(--border); }
.results__head { padding: 20px 18px 16px; min-height: 79px; align-items: start; }
.results__head h2 { font-size: 16px; font-weight: 600; margin-top: 6px; letter-spacing: -.3px; }
.results__head .eyebrow { font-size: 8px; letter-spacing: 1.3px; color: #8b9982; }
.results__head-actions { padding-top: 3px; }
.live-dot { color: #6e8c5e; font-size: 8px; white-space: nowrap; }
.live-dot::before { background: #80a46b; box-shadow: none; }
.live-dot.is-off { color: #a18e68; }
.results__scroll { padding: 16px 18px; gap: 16px; }
.results__scroll > * { flex-shrink: 0; }
.hero-metric { border-radius: 8px; background: #edf4e5; border-color: #e0e8d7; padding: 18px; gap: 5px; }
.hero-metric__top { color: #648151; font-size: 10px; }
.hero-metric > b { color: #3d6334; font-size: 34px; font-weight: 600; }
.hero-metric__sub { color: #809370; font-size: 9px; }
.metrics { gap: 9px; }
.metric { background: #fff; border-color: #e0e6da; border-radius: 7px; padding: 12px 10px; gap: 4px; }
.metric::after { display: none; }
.metric__icon { color: #839971; }
.metric__label { color: #87957d; font-size: 9px; }
.metric__value { color: #40523a; font-size: 21px; font-weight: 600; letter-spacing: -.6px; }
.metric__sub { color: #98a28f; font-size: 8px; }
.detail-grid { padding: 11px; background: #f8faf5; border-color: #e6ebdf; border-radius: 6px; }
.detail-grid span { font-size: 8px; }
.detail-grid b { font-size: 10px; color: #5a6f50; }
.heat-balance { font-size: 10px; }
.heat-balance > span { display: flex; justify-content: space-between; color: #869379; }
.heat-balance b { color: #517243; }
.heat-balance__track { height: 5px; background: #edf0e8; border-radius: 3px; margin: 8px 0; overflow: hidden; }
.heat-balance__track i { display: block; height: 100%; background: #82a76c; border-radius: 3px; }
.heat-balance small { color: #98a18e; font-size: 9px; }
.heat-balance p { color: #a28a5c; line-height: 1.5; margin-top: 7px; font-size: 9px; }
.heat-balance.is-deficit .heat-balance__track i { background: #c2a16e; }
.warnings summary { font-size: 10px; color: #987b45; cursor: pointer; padding: 6px 0; }
.warning-row { background: #fbf8ef; border-color: #ede5d1; color: #9d885e; font-size: 9px; }
.warning-row svg { color: #b19458; }
.ok-row { color: #6b8d57; background: #f3f7ec; border-color: #e2ead7; font-size: 10px; }
.section-title { color: #5d6f52; font-size: 11px; }
.result-room { background: #fff; border-color: #e1e7d9; border-radius: 7px; }
.result-room__head { padding: 12px; }
.result-room__head:hover { background: #f6f9f1; }
.result-room__head b { font-size: 12px; }
.result-room__head small { font-size: 9px; color: #96a18c; }
.result-room__power { color: #72925e; font-size: 12px; }
.result-room__stats { padding: 0 12px 9px; font-size: 9px; color: #8a987f; }
.loop-list { background: #f9fbf5; border-color: #e9ede2; }
.loop-row { font-size: 9px; }
.loop-row__num { color: #fff; }
.loop-row__power { color: #8b9b80; }
.legend { color: #86977a; border-color: #e4eadc; }
.disclaimer { font-size: 9px; line-height: 1.65; color: #9ca593; }
.stale-banner { background: #fff9ec; color: #9b814d; border-color: #eadfbe; }
.partial-note { background: #f1f5eb; color: #82956d; border-color: #e0e7d7; }
.toast { background: #fff; border-color: #dce6d2; color: #5a704b; box-shadow: var(--shadow); }
.modal { background: #fff; border-color: #dce4d6; box-shadow: 0 20px 80px #22382026; }
.modal-backdrop { background: #2331214d; }
.help-step, .help-card, .help__shortcuts { background: #f8faf4; border-color: #e1e9d7; }
.help-step__num { background: #edf4e3; color: #648449; border-color: #d9e5cc; }
.help__note { background: #f2f7eb; color: #829671; border-color: #e0e9d6; }
.help-card h3 svg { color: #709659; }
.settings-toggle, .results-toggle { background: #fff; color: #4c7541; border-color: #cdddc1; box-shadow: var(--shadow); }
.boot-screen { background: #f7f9f3; color: #446639; }
.boot-screen > span { max-width: 520px; padding: 0 20px; text-align: center; }
.boot-error { max-width: min(90vw, 680px); max-height: 180px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; padding: 12px; background: #fff; border: 1px solid #d8dfd2; border-radius: 8px; color: #8d403a; font-size: 12px; }
.boot-screen > button { padding: 10px 16px; border: 1px solid #b7c9ab; border-radius: 8px; background: #fff; color: #446639; cursor: pointer; }
.boot-progress { background: #e1e8da; }
.drop-overlay__card { background: #fff; border-color: #9db68b; color: #587947; }
@media (min-width: 1600px) { .workspace { grid-template-columns: 336px minmax(300px, 1fr) 330px; } .sidebar__scroll { padding: 0 24px; } }
@media (max-width: 1240px) { .workspace { grid-template-columns: 295px minmax(260px, 1fr) 280px; } .local-label { display: none; } .project-steps { gap: 10px; } .brand { min-width: 180px; } .topbar { padding: 0 18px; gap: 12px; } .project-name { max-width: 200px; } }
@media (max-width: 1090px) { .workspace { grid-template-columns: 295px minmax(0, 1fr); } .project-steps { display: none; } .results { background: #fff; } .project-name { max-width: 220px; } }
@media (max-width: 860px) { .topbar { gap: 10px; padding: 0 14px; } .brand { min-width: 160px; } .brand__text b { font-size: 20px; } .brand__text small { font-size: 7px; } .project-name, .example-btn, .topbar__actions > .icon-btn:first-of-type, .topbar__actions > .icon-btn:nth-of-type(2) { display: none; } .project-bar { min-height: 80px; padding: 16px 20px; } .project-bar h1 { font-size: 21px; } .workspace { grid-template-columns: 280px minmax(0, 1fr); } }
@media (max-width: 700px) { :root { --topbar-h: 61px; } .topbar { padding: 0 10px; } .brand { min-width: auto; gap: 6px; } .brand > svg { width: 29px; } .brand__text b { font-size: 18px; } .brand__text small { display: none; } .topbar__actions { gap: 3px; } .topbar-btn { padding: 0 8px; } .project-bar { min-height: 69px; padding: 13px 17px; } .project-bar__intro .eyebrow { font-size: 7px; } .project-bar h1 { font-size: 18px; } .workspace { grid-template-columns: 1fr; } .plan-heading { padding: 0 12px; height: 39px; } .plan-heading__hint { display: none; } .sidebar { background: #fff; } .sidebar__mobile-head { color: #4b6e40; background: #f7faf2; } .canvas-tools { left: 10px; top: 10px; gap: 1px; } .canvas-tool { width: 30px; } .canvas-status { max-width: calc(100% - 170px); font-size: 8px; gap: 6px; } .canvas-zoom { right: 10px; } }
@media print { .project-bar, .plan-heading, .heat-balance { display: none; } .canvas-area { display: block; } .plan { height: 650px; } .results { background: #fff; } }