:root {
  color-scheme: light;
  --brand: #1d6b49;
  --brand-dark: #104d35;
  --brand-soft: #e6f0ea;
  --brand-pale: #f2f7f4;
  --ink: #17201c;
  --ink-soft: #53615a;
  --line: #dce4df;
  --line-strong: #c7d2cb;
  --surface: #ffffff;
  --canvas: #f3f5f2;
  --warning: #a96912;
  --warning-soft: #fff4d9;
  --danger: #a33a3a;
  --danger-soft: #fff0ef;
  --shadow: 0 14px 38px rgba(23, 48, 36, 0.08);
  --radius: 18px;
  --radius-small: 12px;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--canvas); }
body { margin: 0; min-height: 100vh; color: var(--ink); background: var(--canvas); }
button, input, select, textarea { font: inherit; }
button, select { cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid rgba(29, 107, 73, .2); outline-offset: 2px; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 10px; font-size: clamp(28px, 3vw, 42px); letter-spacing: -.04em; line-height: 1.08; }
h2 { margin-bottom: 8px; font-size: 24px; letter-spacing: -.025em; }
h3 { margin-bottom: 8px; font-size: 16px; }
.muted { color: var(--ink-soft); }
.eyebrow { display: block; margin-bottom: 8px; color: var(--brand); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 250px minmax(0, 1fr); }
.sidebar { position: sticky; top: 0; height: 100vh; padding: 28px 18px; display: flex; flex-direction: column; background: #14231d; color: #fff; }
.brand { display: flex; align-items: center; gap: 12px; padding: 0 10px 28px; }
.brand__mark { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.24); border-radius: 13px; background: linear-gradient(145deg, #25835b, #14583d); font-weight: 900; letter-spacing: -.05em; }
.brand__name { font-size: 18px; font-weight: 900; letter-spacing: .08em; }
.brand__caption { display: block; margin-top: 2px; color: #9db5a8; font-size: 11px; letter-spacing: 0; font-weight: 500; }
.nav { display: grid; gap: 6px; }
.nav__item { width: 100%; padding: 12px 14px; display: flex; align-items: center; gap: 11px; border: 0; border-radius: 11px; color: #bdcec5; background: transparent; text-align: left; }
.nav__item:hover { color: #fff; background: rgba(255,255,255,.06); }
.nav__item.is-active { color: #fff; background: #246d4e; }
.nav__icon { width: 22px; height: 22px; display: grid; place-items: center; color: currentColor; font-size: 16px; }
.sidebar__footer { margin-top: auto; padding: 16px 10px 0; border-top: 1px solid rgba(255,255,255,.1); }
.sidebar__footer strong { display: block; margin-bottom: 4px; font-size: 13px; }
.sidebar__footer span { color: #9db5a8; font-size: 11px; line-height: 1.45; }

.workspace { min-width: 0; }
.topbar { height: 76px; padding: 0 34px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.86); backdrop-filter: blur(16px); }
.breadcrumbs { display: flex; align-items: center; gap: 9px; color: var(--ink-soft); font-size: 13px; }
.breadcrumbs strong { color: var(--ink); }
.topbar__actions { display: flex; align-items: center; gap: 12px; }
.demo-role { display: flex; align-items: center; gap: 10px; padding: 7px 8px 7px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); }
.demo-role span { font-size: 11px; color: var(--ink-soft); text-transform: uppercase; font-weight: 800; letter-spacing: .08em; }
.demo-role select { border: 0; background: transparent; color: var(--ink); font-weight: 700; }
.account-pill { min-width: 220px; padding: 6px 7px 6px 13px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); }
.account-pill strong, .account-pill span { display: block; }
.account-pill strong { max-width: 210px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.account-pill span { margin-top: 2px; color: var(--ink-soft); font-size: 10px; }
.account-pill .icon-button { width: 32px; height: 32px; border: 0; background: var(--canvas); font-size: 16px; }
.demo-badge { display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: 999px; color: #78500f; background: var(--warning-soft); font-size: 11px; font-weight: 900; letter-spacing: .06em; }
.main { padding: 34px; }
.main--configurator { padding: 18px 20px 24px; }

.page-header { margin-bottom: 26px; display: flex; justify-content: space-between; gap: 24px; align-items: flex-start; }
.page-header p { max-width: 680px; margin-bottom: 0; line-height: 1.55; }
.button { min-height: 43px; padding: 0 17px; border: 1px solid transparent; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; color: var(--ink); background: var(--surface); font-weight: 750; text-decoration: none; white-space: nowrap; }
.button:hover { transform: translateY(-1px); }
.button--primary { color: #fff; background: var(--brand); box-shadow: 0 8px 22px rgba(29,107,73,.2); }
.button--primary:hover { background: var(--brand-dark); }
.button--ghost { border-color: var(--line); background: transparent; }
.button--soft { color: var(--brand-dark); background: var(--brand-soft); }
.button--small { min-height: 34px; padding: 0 11px; border-radius: 9px; font-size: 12px; }
.icon-button { width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink-soft); font-size: 22px; }

.metric-grid { margin-bottom: 28px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.metric { padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: 0 5px 18px rgba(28,50,40,.035); }
.metric__label { color: var(--ink-soft); font-size: 12px; font-weight: 700; }
.metric__value { margin: 10px 0 3px; font-size: 28px; font-weight: 850; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.metric__value--text { font-size: 21px; }
.metric__note { color: var(--brand); font-size: 11px; }

.panel { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: 0 6px 20px rgba(28,50,40,.035); }
.panel__header { padding: 20px 22px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border-bottom: 1px solid var(--line); }
.panel__header h2, .panel__header h3 { margin: 0; }
.search { width: min(420px, 100%); position: relative; }
.search input { width: 100%; height: 42px; padding: 0 14px 0 40px; border: 1px solid var(--line); border-radius: 11px; background: var(--canvas); color: var(--ink); }
.search::before { content: "⌕"; position: absolute; left: 14px; top: 8px; color: var(--ink-soft); font-size: 20px; }
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.table th { padding: 12px 18px; color: var(--ink-soft); background: #f8faf8; font-size: 11px; text-align: left; text-transform: uppercase; letter-spacing: .07em; }
.table--quotes th:nth-child(1), .table--quotes th:nth-child(5), .table--quotes th:nth-child(6) { width: 14%; }
.table--quotes th:nth-child(2) { width: 26%; }
.table--quotes th:nth-child(3) { width: 15%; }
.table--quotes th:nth-child(4) { width: 17%; }
.table td { padding: 16px 18px; border-top: 1px solid var(--line); font-size: 13px; vertical-align: middle; }
.table td strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.table td span { display: block; margin-top: 4px; color: var(--ink-soft); font-size: 11px; }
.table__actions { display: flex; gap: 7px; justify-content: flex-end; }
.status { display: inline-flex !important; width: fit-content; padding: 5px 8px; border-radius: 999px; color: var(--brand-dark) !important; background: var(--brand-soft); font-size: 10px !important; font-weight: 800; }
.empty { padding: 46px 24px; text-align: center; }
.empty__icon { width: 52px; height: 52px; margin: 0 auto 14px; display: grid; place-items: center; border-radius: 16px; color: var(--brand); background: var(--brand-soft); font-size: 25px; }

.calc-workbar { margin-bottom: 12px; min-height: 72px; padding: 10px 12px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border: 1px solid var(--line); border-radius: 15px; background: rgba(255,255,255,.94); box-shadow: 0 8px 26px rgba(28,50,40,.045); }
.calc-workbar__identity, .calc-workbar__status { min-width: 0; display: flex; align-items: center; gap: 12px; }
.calc-workbar__identity > div { min-width: 0; }
.calc-workbar__identity .eyebrow { margin-bottom: 2px; font-size: 9px; }
.calc-workbar__identity h1 { margin: 0; overflow: hidden; font-size: 19px; text-overflow: ellipsis; white-space: nowrap; }
.calc-workbar__identity p { margin: 3px 0 0; overflow: hidden; color: var(--ink-soft); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.calc-workbar__back { flex: none; font-size: 17px; }
.customer-chip { max-width: 250px; min-height: 46px; padding: 6px 11px 6px 7px; display: flex; align-items: center; gap: 9px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); background: var(--surface); text-align: left; }
.customer-chip:hover, .summary-customer:hover { border-color: #a9c7b6; background: var(--brand-pale); }
.customer-chip__icon, .summary-customer__icon { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 9px; color: var(--brand); background: var(--brand-soft); font-weight: 900; }
.customer-chip small, .customer-chip strong, .save-state small, .save-state strong { display: block; }
.customer-chip small, .save-state small { color: var(--ink-soft); font-size: 8px; font-weight: 750; text-transform: uppercase; letter-spacing: .05em; }
.customer-chip strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.customer-chip.is-filled { border-color: #b8d4c4; }
.save-state { min-width: 92px; display: flex; align-items: center; gap: 8px; }
.save-state__dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--warning); box-shadow: 0 0 0 4px var(--warning-soft); }
.save-state__dot.is-saved { background: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); }
.save-state strong { margin-top: 2px; font-size: 10px; }
.configurator { display: grid; grid-template-columns: minmax(260px, 330px) minmax(380px, 1fr) minmax(260px, 320px); gap: 16px; align-items: start; }
/* Owner 2026-10-12: two columns — parameters and the door; price and actions in the work bar,
   the totals fold under the picture. */
.configurator--workstation { grid-template-columns: minmax(300px, 360px) minmax(0, 1fr); gap: 12px; }
.config-panel { overflow: hidden; }
.config-panel__title { padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border-bottom: 1px solid var(--line); }
.config-panel__title .eyebrow { margin-bottom: 3px; font-size: 9px; }
.config-panel__title h2 { margin: 0; font-size: 18px; }
.config-progress { min-width: 42px; padding: 7px 9px; border-radius: 999px; color: var(--brand-dark); background: var(--brand-soft); font-size: 10px; font-weight: 900; text-align: center; }
.config-scroll { max-height: calc(100vh - 196px); overflow-y: auto; scrollbar-color: #afc2b7 transparent; scrollbar-width: thin; }
.config-group { border-bottom: 1px solid var(--line); }
.config-group:last-child { border-bottom: 0; }
.config-group summary { position: relative; padding: 13px 36px 13px 14px; display: flex; align-items: center; gap: 10px; list-style: none; font-weight: 800; cursor: pointer; }
.config-group summary::-webkit-details-marker { display: none; }
.config-group summary::after { content: "+"; position: absolute; right: 15px; top: 50%; color: var(--brand); font-size: 20px; font-weight: 500; transform: translateY(-50%); }
.config-group[open] summary::after { content: "−"; }
.config-group[open] summary { background: #fbfdfb; }
.config-group__number { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 8px; color: var(--brand); background: var(--brand-soft); font-size: 9px; letter-spacing: .04em; }
.config-group__summary { min-width: 0; display: grid; gap: 3px; }
.config-group__summary strong { font-size: 11px; }
.config-group__summary small { overflow: hidden; color: var(--ink-soft); font-size: 8px; font-weight: 550; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.config-group__body { padding: 2px 16px 18px; display: grid; gap: 13px; }
.side-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.side-compare > span { min-width: 0; padding: 8px 9px; border: 1px solid var(--line); border-radius: 9px; background: var(--canvas); }
.side-compare small, .side-compare strong { display: block; }
.side-compare small { margin-bottom: 3px; color: var(--ink-soft); font-size: 8px; text-transform: uppercase; }
.side-compare strong { overflow: hidden; font-size: 8px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice label { min-height: 70px; padding: 12px; display: flex; flex-direction: column; justify-content: space-between; border: 1px solid var(--line); border-radius: 11px; background: #fafcfa; cursor: pointer; }
.choice label strong { font-size: 12px; }
.choice label small { color: var(--ink-soft); font-size: 10px; }
.choice input:checked + label { border-color: var(--brand); background: var(--brand-pale); box-shadow: inset 0 0 0 1px var(--brand); }
.choice--model label { position: relative; min-height: 92px; display: grid; grid-template-columns: 54px minmax(0, 1fr); align-items: center; justify-content: initial; gap: 10px; }
.choice--model label > span:last-child { min-width: 0; display: grid; gap: 4px; }
.choice__model-image, .choice__model-placeholder { width: 54px; height: 64px; border-radius: 7px; background: #eef2ef; object-fit: contain; }
.choice__model-placeholder { display: grid; place-items: center; color: var(--brand); font-size: 24px; }
.new-badge { position: absolute; z-index: 2; top: 6px; right: 6px; padding: 3px 6px; border-radius: 999px; color: #fff; background: #e8582b; box-shadow: 0 2px 8px rgba(118,44,20,.22); font-size: 7px; line-height: 1; letter-spacing: .08em; }
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.switch-row span { font-size: 12px; font-weight: 700; }
.switch-row--disabled > span { color: var(--muted, #7a7f80); font-weight: 600; }
.switch-row--disabled .switch { opacity: .45; pointer-events: none; }
.switch { position: relative; width: 42px; height: 24px; flex: none; }
.switch input { position: absolute; opacity: 0; }
.switch__track { position: absolute; inset: 0; border-radius: 999px; background: #cbd4ce; transition: .18s; }
.switch__track::after { content: ""; position: absolute; width: 18px; height: 18px; top: 3px; left: 3px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,.2); transition: .18s; }
.switch input:checked + .switch__track { background: var(--brand); }
.switch input:checked + .switch__track::after { transform: translateX(18px); }
.field { display: grid; gap: 6px; }
.field > span { display: flex; justify-content: space-between; color: var(--ink-soft); font-size: 11px; font-weight: 800; }
.field em { font-style: normal; font-weight: 500; }
.field input, .field select, .field textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); background: #fff; }
.field input, .field select { height: 42px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.field-hint { margin: -2px 0 0; color: var(--ink-soft); font-size: 10px; line-height: 1.45; }
.model-description { padding: 11px 12px; display: grid; gap: 4px; border-radius: 10px; background: var(--brand-pale); }
.model-description strong { color: var(--brand-dark); font-size: 11px; line-height: 1.45; }
.model-description span { color: var(--ink-soft); font-size: 10px; line-height: 1.4; }
.calculated-field { min-height: 69px; padding: 10px 12px; display: flex; flex-direction: column; justify-content: center; border: 1px dashed var(--line-strong); border-radius: 10px; background: var(--canvas); }
.calculated-field span { color: var(--ink-soft); font-size: 10px; }
.calculated-field strong { margin-top: 5px; font-size: 13px; }
.price-policy { padding: 11px 12px; display: flex; justify-content: space-between; gap: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--brand-pale); }
.price-policy span { color: var(--ink-soft); font-size: 10px; }
.price-policy strong { color: var(--brand-dark); font-size: 11px; }
.material-note { padding: 10px 11px; display: grid; gap: 3px; border: 1px solid var(--line); border-radius: 10px; background: #fafcfa; }
.material-note span { color: var(--ink-soft); font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.material-note strong { color: var(--ink); font-size: 11px; }
.material-note small { color: var(--ink-soft); font-size: 9px; line-height: 1.4; }
.glazing-module { overflow: hidden; border: 1px solid var(--line); border-radius: 11px; background: #fafcfa; }
.glazing-module__head { padding: 11px 12px; }
.glazing-module__body { padding: 12px; display: grid; gap: 11px; border-top: 1px solid var(--line); background: #fff; }
.milling-section { display: grid; gap: 8px; }
.milling-section__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--ink-soft); font-size: 11px; font-weight: 800; }
.milling-section__head small { color: var(--brand); font-size: 9px; letter-spacing: .04em; }
.milling-search { display: grid; gap: 4px; }
.milling-search span { color: var(--ink-soft); font-size: 9px; font-weight: 800; }
.milling-search input { min-width: 0; width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; background: #fff; color: var(--ink); font: inherit; font-size: 11px; outline: none; }
.milling-search input:focus { border-color: var(--brand); box-shadow: 0 0 0 2px rgba(38, 164, 106, .12); }
.milling-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.milling-card { position: relative; }
.milling-card input { position: absolute; opacity: 0; pointer-events: none; }
.milling-card label { position: relative; min-height: 132px; padding: 8px; display: grid; grid-template-rows: 76px auto auto auto; gap: 3px; border: 1px solid var(--line); border-radius: 10px; background: #fafcfa; cursor: pointer; }
.milling-card label strong { font-size: 10px; }
.milling-card label span:not(.milling-preview), .milling-card label small { overflow: hidden; color: var(--ink-soft); font-size: 8px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.milling-card input:checked + label { border-color: var(--brand); background: var(--brand-pale); box-shadow: inset 0 0 0 1px var(--brand); }
.milling-preview { position: relative; display: block; overflow: hidden; border: 3px solid #53645c; border-radius: 3px; background: linear-gradient(145deg, #dfe5e1, #bdc9c2); }
.milling-preview--none { display: grid; place-items: center; color: #718078; font-size: 22px; }
.milling-preview--lines::before { content: ""; position: absolute; inset: 8px 35%; border-left: 2px solid rgba(255,255,255,.75); border-right: 2px solid rgba(255,255,255,.75); }
.milling-preview--soft::before { content: ""; position: absolute; inset: 10px 8px; border: 2px solid rgba(255,255,255,.72); border-radius: 10px; }
.milling-preview--geo::before { content: ""; position: absolute; width: 34px; height: 34px; left: 50%; top: 50%; border: 2px solid rgba(255,255,255,.72); transform: translate(-50%, -50%) rotate(45deg); }
.milling-preview--arch::before { content: ""; position: absolute; inset: 9px 11px 29px; border: 2px solid rgba(255,255,255,.72); border-radius: 50% 50% 3px 3px; }
.milling-preview--arch::after { content: ""; position: absolute; inset: 38px 11px 8px; border: 2px solid rgba(255,255,255,.72); }
.milling-preview--cascade::before { content: ""; position: absolute; inset: 8px; background: linear-gradient(90deg, transparent 0 16%, rgba(255,255,255,.72) 16% 19%, transparent 19% 48%, rgba(255,255,255,.72) 48% 51%, transparent 51% 78%, rgba(255,255,255,.72) 78% 81%, transparent 81%), linear-gradient(0deg, transparent 0 22%, rgba(255,255,255,.72) 22% 25%, transparent 25% 56%, rgba(255,255,255,.72) 56% 59%, transparent 59%); }
.milling-preview--diagonal::before, .milling-preview--diagonal::after { content: ""; position: absolute; width: 74px; height: 2px; left: 50%; top: 50%; background: rgba(255,255,255,.72); transform-origin: center; }
.milling-preview--diagonal::before { transform: translate(-50%, -50%) rotate(38deg); }
.milling-preview--diagonal::after { transform: translate(-50%, -50%) rotate(-38deg); }
.milling-preview--panel { background-color: var(--panel-color); background-image: linear-gradient(110deg, rgba(255,255,255,.15), transparent 38%, rgba(0,0,0,.14)), var(--texture-image); background-position: center, var(--texture-x) var(--texture-y); background-size: 100% 100%, 200% 200%; }
.milling-preview--panel svg { width: 100%; height: 100%; display: block; }
.milling-preview--panel svg { filter: none; }
.milling-preview--panel svg g { fill: rgba(0,0,0,.025); stroke: rgba(20,14,10,.82); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(1.4px 1.7px .35px rgba(8,5,3,.75)) drop-shadow(-1px -1px .3px rgba(255,255,255,.22)); }
.milling-preview--panel svg g > * { vector-effect: non-scaling-stroke; }
.milling-preview--uploaded img { width: 100%; height: 100%; display: block; object-fit: fill; mix-blend-mode: multiply; }
.milling-preview--catalog { display: grid; place-items: center; border-width: 1px; border-color: #d6ddd9; border-radius: 6px; background: #f1f4f2; }
.milling-preview__door { position: relative; width: 25px; height: 72px; overflow: hidden; border: 2px solid #4c5953; border-radius: 2px; background-color: var(--panel-color); background-image: linear-gradient(105deg, rgba(255,255,255,.13), transparent 38%, rgba(0,0,0,.12)), var(--texture-image); background-position: center, var(--texture-x) var(--texture-y); background-size: 100% 100%, 200% 200%; box-shadow: 0 2px 5px rgba(24,35,30,.2), inset 0 0 0 1px rgba(255,255,255,.18); }
.milling-preview__door img { width: 100%; height: 100%; display: block; object-fit: contain; mix-blend-mode: multiply; }
.side-editor__tabs { display: grid; grid-template-columns: 1fr 1fr; width: 100%; margin-bottom: 3px; }
.side-editor__tabs button { min-height: 38px; }
.side-editor__label { display: flex; align-items: end; justify-content: space-between; gap: 10px; padding: 8px 0 2px; border-bottom: 1px solid var(--line); }
.side-editor__label span { color: var(--ink); font-size: 13px; font-weight: 900; }
.side-editor__label small { color: var(--ink-soft); font-size: 9px; text-align: right; }
.color-section, .hardware-section { display: grid; gap: 8px; }
.ral-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.ral-card, .handle-card { position: relative; }
.ral-card input, .handle-card input { position: absolute; opacity: 0; pointer-events: none; }
.ral-card label { min-height: 70px; padding: 7px 5px; display: grid; justify-items: center; align-content: center; gap: 4px; border: 1px solid var(--line); border-radius: 10px; background: #fafcfa; cursor: pointer; text-align: center; }
.ral-card i { width: 25px; height: 25px; border: 2px solid #fff; border-radius: 50%; background: var(--ral-color); box-shadow: 0 0 0 1px #b7c2bc; }
.ral-card span { font-size: 9px; font-weight: 850; }
.ral-card small { color: var(--ink-soft); font-size: 7px; }
.ral-card input:checked + label, .handle-card input:checked + label { border-color: var(--brand); background: var(--brand-pale); box-shadow: inset 0 0 0 1px var(--brand); }
.panel-decor-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.panel-decor-card { position: relative; }
.panel-decor-card input { position: absolute; opacity: 0; pointer-events: none; }
.panel-decor-card label { min-height: 96px; padding: 7px; display: grid; grid-template-rows: 48px auto auto; gap: 4px; border: 1px solid var(--line); border-radius: 10px; background: #fafcfa; cursor: pointer; }
.panel-decor-card i { position: relative; overflow: hidden; border-radius: 6px; background-color: var(--panel-color); background-image: var(--texture-image); background-position: var(--texture-x) var(--texture-y); background-size: 200% 200%; box-shadow: inset 0 0 0 1px rgba(34,23,16,.18); }
.panel-decor-card i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(255,255,255,.08), transparent 36%, rgba(0,0,0,.07)); }
.panel-decor-card strong { overflow: hidden; font-size: 9px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.panel-decor-card small { color: var(--ink-soft); font-size: 8px; }
.panel-decor-card input:checked + label { border-color: var(--brand); background: var(--brand-pale); box-shadow: inset 0 0 0 1px var(--brand); }
.style-section { display: grid; gap: 8px; }
.style-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.style-card { position: relative; }
.style-card input { position: absolute; opacity: 0; pointer-events: none; }
.style-card label { min-height: 116px; padding: 7px 5px; display: grid; grid-template-rows: 72px auto auto; justify-items: center; gap: 4px; border: 1px solid var(--line); border-radius: 10px; background: #fafcfa; cursor: pointer; text-align: center; }
.style-card strong { font-size: 8px; line-height: 1.15; }
.style-card small { color: var(--ink-soft); font-size: 7px; }
.style-card input:checked + label { border-color: var(--brand); background: var(--brand-pale); box-shadow: inset 0 0 0 1px var(--brand); }
.style-preview { width: 51px; height: 72px; display: grid; place-items: center; border-radius: 4px; background-color: var(--panel-color, #9b6c46); background-image: linear-gradient(145deg, rgba(255,255,255,.18), rgba(0,0,0,.2)), var(--texture-image); background-position: center, var(--texture-x) var(--texture-y); background-size: 100% 100%, 200% 200%; box-shadow: inset 0 0 0 2px rgba(39,24,15,.24); }
.style-preview svg { width: 100%; height: 100%; overflow: visible; fill: rgba(255,255,255,.04); stroke: #3f291b; stroke-width: 2.4; filter: drop-shadow(1px 1px .5px rgba(20,10,5,.55)) drop-shadow(-.7px -.7px .4px rgba(255,255,255,.45)); }
.style-preview--metal { background: linear-gradient(145deg, #79837e, #3f4945); }
.style-preview--molding svg { stroke: #e2c17b; stroke-width: 4; }
.style-preview--fusing svg rect { fill: rgba(191,224,216,.64); }
.style-preview--fusing svg path { stroke: #bd7a49; }
.style-preview--inset svg .glass { fill: rgba(222,245,239,.32); stroke: #f4fffb; }
.style-preview--mirror svg rect { fill: rgba(218,237,237,.7); stroke: #fff; }
.variant-section { display: grid; gap: 8px; padding: 10px; border: 1px solid #d9e4dd; border-radius: 12px; background: #f6faf7; }
.variant-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.insert-glass-control { display: grid; gap: 7px; padding-top: 9px; border-top: 1px solid #d9e4dd; }
.handle-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; max-height: 330px; overflow: auto; padding-right: 2px; }
.handle-card label { min-height: 115px; padding: 7px; display: grid; grid-template-rows: 65px auto auto; gap: 4px; border: 1px solid var(--line); border-radius: 10px; background: #fafcfa; cursor: pointer; }
.handle-card img { width: 100%; height: 65px; object-fit: contain; object-position: center; border-radius: 6px; background: #fff; }
.handle-card strong { overflow: hidden; font-size: 9px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.handle-card small { color: var(--ink-soft); font-size: 8px; }
.handle-swatch { display: grid; place-items: center; min-height: 65px; border-radius: 6px; background: #edf1ee; font-size: 42px; }
.handle-swatch--gold { color: #b48132; }
.handle-swatch--graphite { color: #303734; }
.option-row { padding: 10px 11px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid var(--line); border-radius: 10px; background: #fafcfa; }
.option-row > div { min-width: 0; display: grid; gap: 2px; }
.option-row strong { font-size: 11px; line-height: 1.35; }
.option-row small { color: var(--brand-dark); font-size: 9px; font-weight: 800; }

.visual-panel { position: sticky; top: 92px; overflow: hidden; }
.visual-toolbar { padding: 15px 18px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border-bottom: 1px solid var(--line); }
.segmented { padding: 3px; display: flex; border-radius: 10px; background: var(--canvas); }
.segmented button { min-height: 34px; padding: 0 12px; border: 0; border-radius: 8px; color: var(--ink-soft); background: transparent; font-size: 12px; font-weight: 750; }
.segmented button.is-active { color: var(--brand-dark); background: #fff; box-shadow: 0 2px 8px rgba(30,50,41,.08); }
.side-editor__tabs.segmented { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.scene-picker { padding: 11px 18px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--line); background: #fafcfa; }
.scene-picker label { min-width: 210px; display: grid; gap: 5px; color: var(--ink-soft); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.scene-picker select { min-height: 36px; padding: 0 34px 0 11px; border: 1px solid var(--line); border-radius: 9px; color: var(--ink); background: #fff; font-size: 12px; font-weight: 700; text-transform: none; letter-spacing: 0; }
.scene-picker > div { display: grid; gap: 2px; text-align: right; }
.scene-picker strong { color: var(--brand-dark); font-size: 11px; }
.scene-picker small { color: var(--ink-soft); font-size: 10px; }
.visual-specs { padding: 8px 12px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; border-bottom: 1px solid var(--line); background: #fff; }
.visual-specs > span { min-width: 0; padding: 7px 9px; border-radius: 9px; background: var(--canvas); }
.visual-specs small, .visual-specs strong { display: block; }
.visual-specs small { color: var(--ink-soft); font-size: 8px; text-transform: uppercase; letter-spacing: .05em; }
.visual-specs strong { margin-top: 3px; overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.visual-stage { min-height: 320px; padding: 14px; display: grid; place-items: center; background: linear-gradient(180deg, #f9fbf9, #eff3ef); }
.visual-stage svg { width: 100%; height: auto; max-height: 74vh; display: block; }
.visual-caption { padding: 10px 14px; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: 9px; line-height: 1.45; }

.summary-panel { position: sticky; top: 92px; overflow: hidden; }
.summary-price { padding: 18px; color: #fff; background: linear-gradient(145deg, #1c6245, #0f4a34); }
.summary-price span { display: block; margin-bottom: 7px; color: #bcd4c8; font-size: 11px; font-weight: 750; text-transform: uppercase; letter-spacing: .08em; }
.summary-price strong { display: block; font-size: 29px; line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.summary-price small { display: block; margin-top: 9px; color: #d9e6df; }
.summary-body { padding: 14px; display: grid; gap: 11px; }
.summary-customer { width: 100%; padding: 9px; display: flex; align-items: center; gap: 9px; border: 1px solid var(--line); border-radius: 11px; color: var(--ink); background: #fff; text-align: left; }
.summary-customer > span:nth-child(2) { min-width: 0; flex: 1; }
.summary-customer small, .summary-customer strong, .summary-customer em { display: block; }
.summary-customer small { color: var(--ink-soft); font-size: 8px; text-transform: uppercase; letter-spacing: .05em; }
.summary-customer strong { margin-top: 2px; overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.summary-customer em { margin-top: 2px; overflow: hidden; color: var(--ink-soft); font-size: 8px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.summary-customer b { color: var(--ink-soft); font-size: 17px; }
.summary-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.summary-fact { padding: 10px; border-radius: 10px; background: var(--canvas); }
.summary-fact span { display: block; color: var(--ink-soft); font-size: 10px; }
.summary-fact strong { display: block; margin-top: 4px; font-size: 12px; }
.alert { padding: 11px 12px; border-radius: 10px; font-size: 11px; line-height: 1.45; }
.alert--warning { color: #68460c; background: var(--warning-soft); }
.alert--error { color: var(--danger); background: var(--danger-soft); }
.readiness { padding: 11px; display: grid; gap: 7px; border: 1px solid var(--line); border-radius: 11px; background: #fafcfa; }
.readiness__head { margin-bottom: 2px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.readiness__head strong { font-size: 10px; }
.readiness__head span { padding: 3px 6px; border-radius: 999px; color: var(--brand-dark); background: var(--brand-soft); font-size: 8px; font-weight: 900; }
.readiness__item { display: flex; align-items: center; gap: 7px; color: var(--ink-soft); font-size: 8px; }
.readiness__item i { width: 15px; height: 15px; flex: none; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: 50%; font-style: normal; }
.readiness__item.is-done { color: var(--ink); }
.readiness__item.is-done i { color: #fff; border-color: var(--brand); background: var(--brand); }
.summary-actions { display: grid; gap: 8px; }
.price-details { border-top: 1px solid var(--line); }
.price-details summary { padding: 14px 18px; font-size: 12px; font-weight: 800; cursor: pointer; }
.price-lines { max-height: 230px; padding: 0 18px 15px; overflow-y: auto; }
.price-line { padding: 8px 0; display: flex; justify-content: space-between; gap: 14px; border-top: 1px dashed var(--line); font-size: 11px; }
.price-line span { color: var(--ink-soft); }
.price-line strong { text-align: right; font-variant-numeric: tabular-nums; }

.admin-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.admin-card { min-height: 150px; padding: 20px; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.admin-card__icon { width: 38px; height: 38px; margin-bottom: 24px; display: grid; place-items: center; border-radius: 11px; color: var(--brand); background: var(--brand-soft); }
.admin-card strong { font-size: 15px; }
.admin-card span { margin-top: 5px; color: var(--ink-soft); font-size: 11px; }
.admin-card small { margin-top: auto; color: var(--warning); font-weight: 800; }
.admin-workspace { display: grid; gap: 18px; }
.admin-section { overflow: hidden; }
.admin-section .panel__header p { max-width: 720px; margin: 5px 0 0; font-size: 12px; line-height: 1.5; }
.admin-section__body { padding: 22px; display: grid; gap: 20px; }
.catalog-family-tabs { padding: 0 22px 16px; display: flex; gap: 7px; overflow-x: auto; border-bottom: 1px solid var(--line); }
.catalog-family-tabs button { min-width: max-content; padding: 9px 12px; display: flex; align-items: center; gap: 7px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink-soft); background: #fff; font-size: 11px; font-weight: 800; }
.catalog-family-tabs button small { min-width: 20px; padding: 2px 5px; border-radius: 999px; color: var(--ink-soft); background: var(--canvas); font-size: 8px; text-align: center; }
.catalog-family-tabs button.is-active { color: var(--brand-dark); border-color: var(--brand); background: var(--brand-pale); box-shadow: inset 0 0 0 1px var(--brand); }
.catalog-family-tabs button.is-active small { color: #fff; background: var(--brand); }
.admin-split { grid-template-columns: minmax(280px, .72fr) minmax(360px, 1.28fr); align-items: start; }
.admin-form { padding: 18px; display: grid; gap: 13px; border: 1px solid var(--line); border-radius: 14px; background: #fafcfa; }
.admin-form h3 { margin: 0; }
.admin-form--inline { border-style: dashed; }
.admin-form-grid { display: grid; grid-template-columns: repeat(5, minmax(120px, 1fr)) auto; align-items: end; gap: 10px; }
.admin-template-list, .admin-model-list, .account-list { display: grid; gap: 9px; }
.admin-template-card, .admin-model-card { position: relative; min-height: 92px; padding: 10px; display: grid; grid-template-columns: 66px minmax(0, 1fr) auto; align-items: center; gap: 13px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.admin-template-preview, .admin-model-card > img, .admin-model-placeholder { width: 66px; height: 76px; display: grid; place-items: center; overflow: hidden; border-radius: 7px; background: var(--canvas); }
.admin-template-preview > img, .admin-model-card > img { width: 100%; height: 100%; object-fit: contain; }
.admin-model-placeholder { color: var(--brand); font-size: 28px; }
.admin-template-card strong, .admin-template-card span, .admin-template-card small { display: block; }
.admin-template-card strong, .admin-model-card strong { margin: 5px 0 3px; font-size: 12px; }
.admin-template-card small, .admin-model-card small { display: block; color: var(--ink-soft); font-size: 9px; line-height: 1.35; }
.admin-template-card.is-archived, .admin-model-card.is-archived, .account-row.is-archived { opacity: .58; background: #f5f5f4; }
.admin-empty { padding: 24px; border: 1px dashed var(--line-strong); border-radius: 14px; }
/* «Пользователи»: one row per account with the period's statistics; a row opens into its editor. */
.account-row { border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.account-row__summary { padding: 12px 14px; display: grid; grid-template-columns: minmax(220px, 2.2fr) repeat(5, minmax(64px, .8fr)) minmax(110px, 1.1fr) 18px; align-items: center; gap: 10px; font-size: 13px; font-variant-numeric: tabular-nums; list-style: none; }
details.account-row > summary { cursor: pointer; }
.account-row__summary::-webkit-details-marker { display: none; }
.account-row__summary i { color: var(--ink-soft); font-style: normal; font-size: 18px; transition: transform .15s; }
details.account-row[open] > summary i { transform: rotate(90deg); }
.account-row__head { padding: 0 14px; color: var(--ink-soft); font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.account-row__who strong, .account-row__who small { display: block; }
.account-row__who small { margin-top: 3px; color: var(--ink-soft); font-size: 11px; }
.account-status { display: inline-block; margin-top: 5px; padding: 2px 7px; border-radius: 999px; font-size: 10px; font-style: normal; font-weight: 800; }
.account-status--wait { color: #7a5a12; background: #fbf1d6; }
.account-status--off { color: #7d2f2a; background: #f8e3e1; }
.account-editor { padding: 4px 14px 14px; display: grid; grid-template-columns: repeat(4, minmax(120px, 1fr)); align-items: end; gap: 10px; border-top: 1px dashed var(--line); }
.account-editor__actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
.account-editor__switch { grid-column: 1 / -1; justify-content: flex-start; }
.account-editor__switch small { display: block; font-weight: 500; margin-top: 2px; }
.account-password-form { max-width: 420px; }
.admin-form-grid:has(select[name="role"]) { grid-template-columns: repeat(3, minmax(150px, 1fr)); }
.stats-period { align-self: end; }
.issued-password { margin-bottom: 18px; padding: 18px; display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 16px; border-color: #e8cf86; background: #fffaf0; }
.issued-password h3 { margin: 6px 0; }
.issued-password p { margin: 0; }
.issued-password__value { padding: 10px 14px; border-radius: 10px; background: #fff; border: 1px solid #e8cf86; font-size: 20px; font-weight: 800; letter-spacing: .04em; user-select: all; }
.issued-password__actions { display: grid; gap: 8px; }
.account-pill__who { padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.account-pill__who:hover strong { text-decoration: underline; }
.dealer-row strong { font-size: 13px; }
.dealer-row span { margin-top: 3px; color: var(--ink-soft); font-size: 10px; }
.dealer-row small { margin-top: 4px; color: var(--brand); font-size: 9px; font-weight: 800; }
.admin-price-list { max-height: 690px; overflow: auto; }
.admin-price-row { padding: 11px 18px; display: grid; grid-template-columns: minmax(260px, 1fr) 190px auto; align-items: end; gap: 12px; border-top: 1px solid var(--line); background: #fff; }
.admin-price-row:first-child { border-top: 0; }
.admin-price-row > div { min-width: 0; }
.admin-price-row > div span, .admin-price-row > div strong { display: block; }
.admin-price-row > div span { margin-bottom: 3px; color: var(--brand); font-size: 8px; font-weight: 850; text-transform: uppercase; letter-spacing: .06em; }
.admin-price-row > div strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.admin-price-row.is-archived { opacity: .55; background: #f5f5f4; }
.price-import-controls { display: grid; grid-template-columns: minmax(260px, 1fr) 210px auto; align-items: end; gap: 12px; }
.price-import-review { overflow: hidden; border: 1px solid var(--line); border-radius: 14px; }
.price-import-summary { padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; gap: 16px; background: var(--brand-pale); }
.price-import-summary strong, .price-import-summary span { display: block; }
.price-import-summary span { margin-top: 3px; color: var(--ink-soft); font-size: 10px; }
.price-import-summary__actions { display: flex; gap: 8px; }
.price-import-head, .price-import-row { display: grid; grid-template-columns: minmax(240px, 1fr) 140px 140px 130px; align-items: center; gap: 12px; }
.price-import-head { padding: 8px 14px; color: var(--ink-soft); background: var(--canvas); font-size: 9px; font-weight: 850; text-transform: uppercase; }
.price-import-row { padding: 11px 14px; border-top: 1px solid var(--line); font-size: 10px; }
.price-import-row strong, .price-import-row span { display: block; }
.price-import-row > div span { margin-top: 2px; color: var(--ink-soft); font-size: 9px; }
.price-import-row > b { color: var(--brand); font-size: 9px; }
.price-import-row--unknown { background: var(--warning-soft); }
.price-import-row--unknown > b { color: var(--warning); }
.price-import-row--outside { opacity: .72; background: var(--canvas); }
.price-import-row--outside > b { color: var(--ink-soft); }
.price-import-row--same { opacity: .66; }
.quality-metrics { margin-bottom: 18px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.quality-metric { padding: 18px; border: 1px solid var(--line); border-radius: 15px; background: #fff; }
.quality-metric > span, .quality-metric > strong, .quality-metric > small { display: block; }
.quality-metric > span { color: var(--ink-soft); font-size: 10px; font-weight: 800; }
.quality-metric > strong { margin: 8px 0 3px; font-size: 28px; }
.quality-metric > small { color: var(--ink-soft); font-size: 9px; line-height: 1.4; }
.quality-metric--attention { border-color: #ecd39b; background: var(--warning-soft); }
.quality-metric--attention > strong { color: var(--warning); }
.quality-tags { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.quality-tag { padding: 5px 8px; border-radius: 999px; color: var(--ink-soft); background: var(--canvas); font-size: 9px; }
.quality-tag b { color: var(--ink); }
.quality-list { display: grid; }
.quality-row { padding: 12px 18px; display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; align-items: center; gap: 12px; border-top: 1px solid var(--line); }
.quality-row:first-child { border-top: 0; }
.quality-row__type { width: fit-content; padding: 5px 7px; border-radius: 999px; color: #78500f; background: var(--warning-soft); font-size: 8px; font-weight: 850; }
.quality-row strong, .quality-row small { display: block; }
.quality-row strong { font-size: 11px; }
.quality-row small { margin-top: 3px; color: var(--ink-soft); font-size: 9px; }
.quality-note { margin-top: 18px; padding: 20px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.quality-note h3, .quality-note p { margin-bottom: 0; }
.quality-note p { margin-top: 6px; font-size: 11px; }
.access-denied { max-width: 580px; margin: 90px auto; padding: 42px; text-align: center; }

.modal { width: min(520px, calc(100vw - 32px)); padding: 0; border: 0; border-radius: 20px; box-shadow: 0 28px 80px rgba(17,30,24,.28); }
.modal::backdrop { background: rgba(12,24,18,.55); backdrop-filter: blur(5px); }
.modal--wide { width: min(1000px, calc(100vw - 32px)); }
.modal__body { padding: 26px; display: grid; gap: 16px; }
.modal__header { display: flex; justify-content: space-between; gap: 20px; }
.modal__header h2 { margin: 0; }
.modal__actions { display: flex; justify-content: flex-end; gap: 9px; }
.form-error { margin: -5px 0 0; color: var(--danger); font-size: 12px; }
.proposal { background: #fff; }
.proposal__pages { padding: 24px; display: grid; gap: 24px; justify-items: center; background: #eceae5; }
.proposal__pages > em { padding: 80px 0; color: var(--ink-soft); }
.proposal__page { width: 100%; max-width: 820px; height: auto; display: block; background: #fff; box-shadow: 0 2px 14px rgba(20, 30, 25, .14); }
.proposal__bar { padding: 14px 18px; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; border-bottom: 1px solid var(--line); }
.proposal__style { display: inline-flex; align-items: center; gap: 8px; margin-right: auto; font-size: 14px; color: var(--muted, #6e6e73); }
.proposal__style select { padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: transparent; font: inherit; color: inherit; }
.watermark { color: var(--warning); font-weight: 900; }
.toast { position: fixed; z-index: 20; right: 24px; bottom: 24px; max-width: 360px; padding: 13px 16px; border-radius: 11px; color: #fff; background: #17251e; box-shadow: var(--shadow); opacity: 0; transform: translateY(12px); pointer-events: none; transition: .2s; }
.toast.is-visible { opacity: 1; transform: translateY(0); }

.login-screen { min-height: 100vh; display: grid; grid-template-columns: minmax(360px, .9fr) minmax(480px, 1.1fr); background: #f2f5f2; }
.login-brand { padding: clamp(48px, 7vw, 110px); display: flex; flex-direction: column; justify-content: center; color: #fff; background: radial-gradient(circle at 78% 18%, rgba(68,150,107,.35), transparent 33%), linear-gradient(145deg, #173d2e, #0d241b); }
.login-brand__mark { width: 68px; height: 68px; margin-bottom: 54px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.28); border-radius: 20px; background: linear-gradient(145deg, #2b8b61, #16583e); font-size: 28px; font-weight: 950; }
.login-brand .eyebrow { color: #91c9ad; }
.login-brand h1 { max-width: 580px; margin-bottom: 24px; font-size: clamp(40px, 5vw, 72px); }
.login-brand p { max-width: 560px; color: #bbd0c5; font-size: 16px; line-height: 1.65; }
.login-brand__note { margin-top: 48px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.15); color: #8faf9e; font-size: 11px; }
.login-panel { padding: 38px; display: grid; place-items: center; }
.login-card { width: min(430px, 100%); padding: 34px; display: grid; gap: 18px; border: 1px solid var(--line); border-radius: 24px; background: #fff; box-shadow: var(--shadow); }
.login-card h2 { font-size: 30px; }
.login-card .button { width: 100%; }
.demo-credentials { margin-top: 4px; padding-top: 17px; display: grid; gap: 7px; border-top: 1px solid var(--line); }
.demo-credentials > strong { margin-bottom: 3px; color: var(--ink-soft); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.demo-credentials button { padding: 9px 11px; display: flex; justify-content: space-between; border: 1px solid var(--line); border-radius: 9px; background: var(--canvas); color: var(--ink); font-size: 11px; font-weight: 750; }
.demo-credentials button span { color: var(--ink-soft); font-weight: 500; }

/* Calculator: the section column folds into an icon rail (as below 850 px), the door gets the room. */
.app-shell--compact { grid-template-columns: 76px minmax(0,1fr); }
.app-shell--compact .sidebar { padding: 22px 10px; }
.app-shell--compact .brand { justify-content: center; padding: 0 0 24px; }
.app-shell--compact .brand__text, .app-shell--compact .nav__label, .app-shell--compact .sidebar__footer { display: none; }
.app-shell--compact .nav__item { justify-content: center; padding: 12px; }
.sidebar__toggle { margin-top: 14px; align-self: flex-end; width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.16); border-radius: 10px; color: #bdcec5; background: transparent; font-size: 18px; cursor: pointer; }
.sidebar__toggle:hover { color: #fff; background: rgba(255,255,255,.06); }
.app-shell--compact .sidebar__toggle { align-self: center; }

@media (max-width: 1320px) {
  .configurator { grid-template-columns: 300px minmax(360px, 1fr); }
  .summary-panel { position: static; grid-column: 1 / -1; }
  .summary-body { grid-template-columns: 1fr 1fr; }
  .price-details { grid-column: 1 / -1; }
  .admin-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-split { grid-template-columns: 1fr; }
  .admin-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quality-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 850px) {
  .app-shell { grid-template-columns: 76px minmax(0,1fr); }
  .sidebar { padding: 22px 10px; }
  .brand { justify-content: center; padding: 0 0 24px; }
  .brand__text, .nav__label, .sidebar__footer { display: none; }
  .nav__item { justify-content: center; padding: 12px; }
  .topbar { padding: 0 20px; }
  .main { padding: 24px 20px; }
  .main--configurator { padding: 14px; }
  .calc-workbar { align-items: stretch; flex-direction: column; }
  .calc-workbar__status { justify-content: space-between; }
  .metric-grid { grid-template-columns: 1fr 1fr; }
  .configurator { grid-template-columns: 1fr; }
  .visual-panel, .summary-panel { position: static; }
  .config-scroll { max-height: none; }
  .admin-grid { grid-template-columns: 1fr 1fr; }
  .account-row__summary { grid-template-columns: 1fr repeat(3, minmax(56px, auto)) 18px; }
  .account-row__summary > span:nth-of-type(n+4), .account-row__head > span:nth-of-type(n+5) { display: none; }
  .account-editor { grid-template-columns: 1fr 1fr; }
  .issued-password { grid-template-columns: 1fr; }
  .admin-price-row { grid-template-columns: 1fr 150px auto; }
  .quality-row { grid-template-columns: 72px minmax(0, 1fr) auto; }
  .price-import-controls { grid-template-columns: 1fr 180px; }
  .price-import-controls .button { grid-column: 1 / -1; }
  .login-screen { grid-template-columns: 1fr; }
  .login-brand { min-height: 360px; padding: 50px; }
  .login-brand__mark { margin-bottom: 28px; }
  .login-brand h1 { font-size: 44px; }
}

@media (max-width: 580px) {
  .scene-picker { align-items: stretch; flex-direction: column; }
  .scene-picker > div { text-align: left; }
  .app-shell { display: block; }
  .sidebar { position: static; width: 100%; height: auto; padding: 12px; flex-direction: row; align-items: center; }
  .brand { padding: 0 12px 0 0; }
  .brand__mark { width: 38px; height: 38px; }
  .nav { display: flex; overflow-x: auto; }
  .nav__item { min-width: 44px; }
  .topbar { height: auto; min-height: 66px; padding: 12px 16px; align-items: flex-start; }
  .breadcrumbs, .demo-role span, .demo-badge, .account-pill span { display: none; }
  .account-pill { min-width: 0; padding-left: 10px; }
  .account-pill strong { max-width: 120px; }
  .main { padding: 20px 14px; }
  .main--configurator { padding: 12px 10px 20px; }
  .calc-workbar__identity { align-items: flex-start; }
  .calc-workbar__status { display: grid; grid-template-columns: 1fr auto; }
  .calc-workbar__status .demo-badge { display: none; }
  .customer-chip { max-width: none; }
  .page-header { display: grid; }
  .page-header .button { width: 100%; }
  .metric-grid, .admin-grid, .summary-body, .quality-metrics { grid-template-columns: 1fr; }
  .admin-section__body { padding: 14px; }
  .admin-form-grid, .admin-form-grid:has(select[name="role"]), .account-editor { grid-template-columns: 1fr; }
  .admin-price-row, .price-import-controls { grid-template-columns: 1fr; }
  .price-import-head { display: none; }
  .price-import-row { grid-template-columns: 1fr 1fr; }
  .price-import-summary { align-items: stretch; flex-direction: column; }
  .price-import-summary__actions { display: grid; }
  .quality-row { grid-template-columns: 1fr; }
  .quality-note { align-items: flex-start; flex-direction: column; }
  .admin-template-card, .admin-model-card { grid-template-columns: 54px minmax(0, 1fr); }
  .admin-template-preview, .admin-model-card > img, .admin-model-placeholder { width: 54px; height: 64px; }
  .admin-template-card .button, .admin-model-card .button { grid-column: 1 / -1; }
  .panel__header { align-items: stretch; flex-direction: column; }
  .table { min-width: 760px; }
  .login-brand { min-height: 310px; padding: 34px 24px; }
  .login-brand h1 { font-size: 36px; }
  .login-brand__note { margin-top: 24px; }
  .login-panel { padding: 22px 14px; }
  .login-card { padding: 24px; }
}

@media print {
  body > *:not(.modal[open]) { display: none !important; }
  .modal[open] { position: static; width: 100%; max-width: none; margin: 0; box-shadow: none; }
  .proposal__bar { display: none; }
  .proposal__pages { padding: 0; gap: 0; background: none; }
  .proposal__page { max-width: none; box-shadow: none; break-after: page; }
  @page { size: A4; margin: 0; }
}

/* Work bar: price and actions (moved from the right column). */
.calc-workbar__status { flex-wrap: wrap; justify-content: flex-end; }
.workbar-price { padding: 7px 12px; display: grid; gap: 1px; border-radius: 12px; color: #fff; background: linear-gradient(145deg, #1c6245, #0f4a34); }
.workbar-price small { color: #bcd4c8; font-size: 8px; font-weight: 750; text-transform: uppercase; letter-spacing: .06em; }
.workbar-price strong { font-size: 18px; line-height: 1.1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.workbar-price span { color: #d9e6df; font-size: 9px; }
/* The server has not answered yet: the previous amount, dimmed. */
.workbar-price.is-pending strong { opacity: .55; }
/* Holder of the price alerts, replaced when the server's price comes; no box of its own. */
.price-alerts { display: contents; }
.workbar-actions { display: flex; gap: 8px; }
.workbar-actions .button { min-height: 42px; padding: 0 16px; white-space: nowrap; }
.visual-alerts { padding: 10px 14px; display: grid; gap: 8px; border-bottom: 1px solid var(--line); }
.summary-drawer { border-top: 1px solid var(--line); }
.summary-drawer > summary { padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; list-style: none; cursor: pointer; }
.summary-drawer > summary::-webkit-details-marker { display: none; }
.summary-drawer > summary::after { content: "+"; color: var(--brand); font-size: 20px; }
.summary-drawer[open] > summary::after { content: "−"; }
.summary-drawer > summary span { display: grid; gap: 2px; }
.summary-drawer > summary strong { font-size: 12px; }
.summary-drawer > summary small { color: var(--ink-soft); font-size: 10px; }
.summary-drawer__body { padding: 0 16px 16px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.summary-drawer__column { min-width: 0; display: grid; gap: 10px; align-content: start; }
.summary-drawer__title { font-size: 11px; }
.summary-drawer .price-lines { max-height: 260px; padding: 0; }
@media (max-width: 1100px) { .summary-drawer__body { grid-template-columns: 1fr; } }
@media (max-width: 850px) {
  .calc-workbar__status { justify-content: flex-start; }
  .workbar-actions { flex: 1 1 100%; }
  .workbar-actions .button { flex: 1; }
}
@media (max-width: 580px) {
  .sidebar__toggle { display: none; }
  .calc-workbar__status { display: flex; }
  .customer-chip { max-width: none; flex: 1 1 100%; }
}

/* Group 04 «Стороны двери»: catalogue 2026 executions and LAB materials (transfer step 3). */
.lab-step { display: flex; align-items: baseline; gap: 8px; margin: 14px 0 8px; }
.lab-step span { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--brand); color: #fff; font-size: 11px; font-weight: 700; flex: none; }
.lab-step strong { font-size: 13px; }
.lab-step small, .lab-subhead small { color: var(--ink-soft); font-size: 11px; }
.lab-subhead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 12px 0 6px; font-size: 12px; }
.lab-subhead > span { font-weight: 600; }
.lab-subhead > strong { font-weight: 500; }
.lab-card { position: relative; }
.lab-card input, .lab-swatch input { position: absolute; opacity: 0; pointer-events: none; }
.lab-card label { display: grid; justify-items: center; gap: 2px; height: 100%; padding: 6px 4px; border: 1px solid var(--line); border-radius: 10px; background: #fafcfa; cursor: pointer; text-align: center; }
.lab-card label strong { font-size: 11px; line-height: 1.2; }
.lab-card label small { color: var(--ink-soft); font-size: 9px; line-height: 1.2; }
.lab-card input:checked + label, .lab-swatch input:checked + label { border-color: var(--brand); background: var(--brand-pale); box-shadow: inset 0 0 0 1px var(--brand); }
.lab-card input:focus-visible + label, .lab-swatch input:focus-visible + label { outline: 2px solid var(--brand); outline-offset: 2px; }
.lab-family-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); gap: 6px; }
.lab-design-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 6px; }
.lab-profile-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-bottom: 6px; }
.lab-thumb { display: block; width: 36px; aspect-ratio: 116 / 270; overflow: hidden; border: 2px solid #4c5953; border-radius: 2px; background: #e8ece9; box-shadow: 0 2px 4px rgba(24, 35, 30, .18); }
.lab-card--design .lab-thumb { width: 40px; }
.lab-thumb img, .lab-thumb__fill { display: block; width: 100%; height: 100%; object-fit: cover; }
.lab-thumb--metal, .lab-chip--metal { background: linear-gradient(115deg, rgba(255, 255, 255, .28), transparent 45%, rgba(0, 0, 0, .22)), var(--coat); }
.lab-chip { display: block; width: 100%; aspect-ratio: 1; border-radius: 6px; object-fit: cover; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }
.lab-chip--sample, .lab-thumb__fill.lab-thumb__fill--sample { background: repeating-linear-gradient(92deg, #6b4a35 0 3px, #5a3d2b 3px 5px, #75523b 5px 9px); }
.lab-series-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px; }
.lab-series { display: grid; gap: 3px; padding: 6px; border: 1px solid var(--line); border-radius: 10px; background: #fafcfa; text-align: left; cursor: pointer; font: inherit; }
.lab-series[aria-pressed="true"] { border-color: var(--brand); background: var(--brand-pale); box-shadow: inset 0 0 0 1px var(--brand); }
.lab-series strong { font-size: 11px; line-height: 1.2; }
.lab-series small { color: var(--ink-soft); font-size: 9px; }
.lab-series__mosaic { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; }
.lab-series__mosaic .lab-chip { border-radius: 3px; }
.lab-series-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-bottom: 6px; }
.lab-series-bar strong { font-size: 12px; }
.lab-finish-filter { flex: 1 1 120px; min-width: 0; padding: 5px 8px; border: 1px solid var(--line); border-radius: 8px; font: inherit; font-size: 12px; }
.lab-swatch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 4px; max-height: 300px; overflow-y: auto; padding: 2px; }
.lab-swatch { position: relative; }
.lab-swatch[hidden] { display: none; }
.lab-swatch label { display: grid; gap: 2px; padding: 3px; border: 1px solid transparent; border-radius: 8px; cursor: pointer; }
.lab-swatch label small { overflow: hidden; color: var(--ink-soft); font-size: 8px; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.lab-color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(82px, 1fr)); gap: 6px; }
.lab-card--color .lab-chip { width: 34px; }
/* Hardware collection chip in the rose shape: square, round, half-square, oval. */
.lab-card--color .lab-chip--round, .lab-card--color .lab-chip--oval { border-radius: 50%; }
.lab-card--color .lab-chip--halfsquare { border-radius: 30%; }
.lab-card--plain label { justify-items: start; text-align: left; padding: 8px; }

/* Group 07: kickplate layouts ОТ-1…ОТ-8. */
.lab-card--kickplate label { padding: 5px 2px; }
.menu-icon__leaf { fill: #e4ebe6; stroke: #5f6d66; stroke-width: 1; }
.menu-icon__plate { fill: #9aa3a8; }
.menu-icon__handle { fill: var(--brand); }
.lab-card--kickplate input:checked + label .menu-icon__plate { fill: var(--brand); }

/* LAB picture in the calculator: both sides at once (transfer step 4). */
.lab-stage { grid-template-columns: repeat(2, minmax(0, 1fr)); place-items: end stretch; gap: 14px; }
.lab-view { min-width: 0; margin: 0; display: grid; gap: 8px; }
.lab-view figcaption { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.lab-view figcaption strong { font-size: 12px; color: var(--ink-soft); }
.lab-view.is-active figcaption strong { color: var(--brand-dark); }
.lab-view figcaption label { min-width: 0; display: flex; align-items: center; gap: 6px; color: var(--ink-soft); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.lab-view figcaption select { width: 100%; min-width: 0; max-width: 190px; min-height: 30px; padding: 0 26px 0 9px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: #fff; font-size: 12px; font-weight: 700; text-transform: none; letter-spacing: 0; }
.lab-view__canvas { min-height: 240px; display: grid; place-items: end center; padding: 6px; border: 2px solid transparent; border-radius: 12px; cursor: pointer; transition: border-color .15s, opacity .2s; }
.lab-view.is-active .lab-view__canvas { border-color: var(--brand); }
.lab-view__canvas.is-rendering { opacity: .72; }
.lab-view__canvas canvas { width: 100%; height: auto; max-height: max(360px, calc(100vh - 400px)); object-fit: contain; display: block; }
.visual-alerts[hidden] { display: none; }
.alert--info { color: var(--brand-dark); background: var(--brand-pale); }
@media (max-width: 580px) { .lab-stage { gap: 8px; padding: 8px; } .lab-view figcaption { flex-direction: column; align-items: stretch; } .lab-view__canvas { min-height: 160px; padding: 2px; } }

/* Variants of one quote: strip in the work bar, comparison dialog (owner 2026-10-13). */
.variant-strip { min-width: 0; display: flex; align-items: center; gap: 8px; }
.calc-workbar:has(.variant-strip--tabs) { flex-wrap: wrap; row-gap: 10px; }
.variant-strip--tabs { order: 3; flex: 1 1 100%; padding-top: 10px; border-top: 1px solid var(--line); }
.variant-strip__label { color: var(--ink-soft); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.variant-strip__tabs { min-width: 0; flex-wrap: wrap; }
.variant-strip__tabs button { display: inline-flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.variant-strip__tabs button small { color: var(--ink-soft); font-size: 11px; font-weight: 650; font-variant-numeric: tabular-nums; }
.variant-strip__tabs button.is-active small { color: var(--brand); }
.variant-strip__tabs .variant-strip__add { min-width: 34px; padding: 0 10px; color: var(--brand); font-size: 17px; justify-content: center; }
.modal--variants { width: min(1180px, calc(100vw - 32px)); }
.variants { background: var(--canvas); }
.variants__bar { align-items: center; background: #fff; }
.variants__title { margin-right: auto; display: grid; gap: 2px; }
.variants__title small { color: var(--ink-soft); font-size: 11px; }
.variants__grid { padding: 18px; display: grid; grid-template-columns: repeat(var(--variant-count, 2), minmax(0, 1fr)); gap: 14px; }
.variant-card { min-width: 0; padding: 14px; display: grid; grid-template-rows: auto auto auto auto 1fr auto; gap: 12px; border: 2px solid transparent; border-radius: 16px; background: #fff; box-shadow: 0 4px 16px rgba(23,48,36,.06); }
.variant-card.is-active { border-color: var(--brand); }
.variant-card > header { min-height: 26px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.variant-card > header strong { font-size: 16px; }
.variant-card__picture { height: clamp(340px, 58vh, 620px); padding: 10px; display: grid; place-items: center; overflow: hidden; border-radius: 12px; background: linear-gradient(#fff, #eceee9); transition: opacity .2s; }
.variant-card__picture.is-rendering { opacity: .65; }
.variant-card__picture > em { color: var(--ink-soft); font-size: 12px; }
/* The whole door, floor to capital: the canvas fills the frame and the picture is fitted inside. */
.variant-card__picture canvas { width: 100%; height: 100%; min-height: 0; display: block; object-fit: contain; }
.variant-card__price { display: grid; gap: 2px; }
.variant-card__price strong { color: var(--brand-dark); font-size: 22px; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.variant-card__price small { color: var(--ink-soft); font-size: 11px; }
.variant-card__rows, .variants__same dl { margin: 0; display: grid; align-content: start; gap: 0; }
.variant-card__rows > div, .variants__same dl > div { padding: 7px 0; display: grid; gap: 2px; border-top: 1px solid var(--line); }
.variant-card__rows dt, .variants__same dt { color: var(--ink-soft); font-size: 10px; font-weight: 750; text-transform: uppercase; letter-spacing: .05em; }
.variant-card__rows dd, .variants__same dd { margin: 0; font-size: 13px; font-weight: 650; overflow-wrap: anywhere; }
.variant-card > footer { display: flex; gap: 8px; }
.variant-card > footer .button--primary { flex: 1; }
.variants__same { margin: 0 18px 18px; padding: 14px; border-radius: 16px; background: #fff; }
.variants__same > strong { font-size: 13px; }
.variants__same dl { margin-top: 8px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); column-gap: 18px; }
.variants__same dd { font-weight: 550; }
@media (max-width: 1100px) { .calc-workbar { flex-wrap: wrap; } }
@media (max-width: 760px) {
  .variants__grid { grid-template-columns: 1fr; }
  .variant-card__picture { height: 460px; }
  .variant-strip--tabs { flex-wrap: wrap; }
  .variant-strip__tabs { flex: 1 1 100%; }
}

/* Design that the glass would cut (moulding / lacobel / mirror, owner 2026-10-14). */
.lab-card.is-disabled label { opacity: .45; cursor: not-allowed; }
.lab-card.is-disabled small { color: var(--danger); }