:root {
  --bg: #f3f6f8;
  --surface: #ffffff;
  --surface-2: #eef4f6;
  --text: #17323d;
  --muted: #637780;
  --border: #d6e0e4;
  --primary: #008f95;
  --primary-dark: #006f75;
  --accent: #43a8d1;
  --danger: #a63d40;
  --warning-bg: #fff7df;
  --warning-border: #f0d37a;
  --success: #287d55;
  --shadow: 0 14px 35px rgba(23, 50, 61, .09);
  --radius: 16px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.5;
}
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .48; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 0; font-size: clamp(1.55rem, 3vw, 2.3rem); }
h2 { margin-bottom: 8px; font-size: 1.42rem; }
h3 { margin-bottom: 6px; font-size: 1rem; }

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 32px;
  color: #fff;
  background: linear-gradient(135deg, #45add7, #0e4c64);
  box-shadow: var(--shadow);
}
.eyebrow {
  display: block;
  margin-bottom: 5px;
  color: var(--primary);
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.topbar .eyebrow { color: rgba(255,255,255,.78); }
.muted { color: var(--muted); }
.small { font-size: .86rem; }

.app-shell {
  display: grid;
  grid-template-columns: 245px minmax(0, 1fr) 650px;
  gap: 20px;
  max-width: 1880px;
  margin: 0 auto;
  padding: 24px;
}
.sidebar,
.workspace,
.summary-panel > * {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.sidebar {
  align-self: start;
  position: sticky;
  top: 20px;
  overflow: hidden;
}
.progress-wrap {
  padding: 20px;
  border-bottom: 1px solid var(--border);
  font-size: .86rem;
  font-weight: 700;
}
.progress-track {
  height: 7px;
  margin-top: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-2);
}
.progress-bar {
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--primary);
  transition: width .25s ease;
}
.step-navigation { display: grid; padding: 10px; }
.step-link {
  display: grid;
  grid-template-columns: 34px 1fr;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px;
  border: 0;
  border-radius: 12px;
  color: var(--text);
  background: transparent;
  text-align: left;
}
.step-link:hover:not(:disabled) { background: var(--surface-2); }
.step-link.is-active { color: #fff; background: var(--primary); }
.step-link.is-complete .step-link__number { color: #fff; background: var(--success); }
.step-link.is-locked { opacity: .45; }
.step-link__number {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--surface-2);
  font-size: .82rem;
  font-weight: 800;
}
.step-link.is-active .step-link__number { color: var(--primary); background: #fff; }
.step-link__title { font-weight: 750; }

.workspace { min-height: 740px; padding: 26px; }
.workspace__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}
.workspace__actions { display: flex; gap: 10px; white-space: nowrap; }
.button {
  min-height: 42px;
  padding: 10px 16px;
  border: 1px solid transparent;
  border-radius: 10px;
  font-weight: 800;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.button:active { transform: translateY(1px); }
.button--primary { color: #fff; background: var(--primary); }
.button--primary:hover:not(:disabled) { background: var(--primary-dark); }
.button--secondary { color: #fff; background: #205d78; }
.button--secondary:hover { background: #16485e; }
.button--ghost { color: var(--text); border-color: var(--border); background: #fff; }
.button--ghost:hover:not(:disabled) { border-color: var(--primary); color: var(--primary-dark); }
.topbar .button--ghost { border-color: rgba(255,255,255,.55); color: #fff; background: rgba(255,255,255,.12); }

.config-form { display: grid; gap: 24px; padding-top: 24px; }
.section-block { display: grid; gap: 14px; }
.section-block__head { display: flex; justify-content: space-between; gap: 20px; align-items: end; }
.section-block__description { margin-bottom: 0; font-size: .9rem; color: var(--muted); }
.option-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.option-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.option-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.option-group { display: grid; gap: 9px; }
.option-group h4 { margin: 0; color: var(--ink); font-size: .92rem; }
.option-card {
  position: relative;
  display: block;
  min-height: 112px;
  padding: 18px;
  border: 2px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  transition: border-color .14s ease, transform .14s ease, box-shadow .14s ease;
}
.option-card:hover:not(.is-disabled) { transform: translateY(-1px); border-color: #9ccdd0; }
.option-card.is-selected { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(0,143,149,.10); }
.option-card.is-disabled { opacity: .48; background: #f5f7f8; }
.option-card input { position: absolute; opacity: 0; pointer-events: none; }
.option-card__check {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 22px;
  height: 22px;
  border: 2px solid var(--border);
  border-radius: 50%;
}
.option-card.is-selected .option-card__check {
  border-color: var(--primary);
  background: radial-gradient(circle, var(--primary) 0 45%, #fff 48% 100%);
}
.option-card__title { display: block; padding-right: 32px; font-weight: 850; }
.option-card__description { display: block; margin-top: 8px; color: var(--muted); font-size: .88rem; }
.option-card__note { display: block; margin-top: 8px; color: var(--primary-dark); font-size: .8rem; font-weight: 750; }
.option-card__code { display: inline-flex; margin-top: 10px; padding: 3px 7px; border-radius: 999px; background: var(--surface-2); font-size: .75rem; font-weight: 800; }

.product-grid { align-items: stretch; }
.product-card { min-height: 265px; }
.product-card__visual {
  position: relative;
  display: grid;
  place-items: center;
  width: 150px;
  height: 120px;
  margin-bottom: 18px;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(#e9f5f8 0 68%, #dce4e7 68% 100%);
  box-shadow: inset 0 0 0 1px rgba(22,80,103,.12);
}
.mini-vitrin { position: relative; display: block; border: 6px solid #84949b; background: rgba(255,255,255,.62); box-shadow: 0 7px 11px rgba(23,50,61,.18); }
.mini-vitrin::before { content: ""; position: absolute; inset: 7px; border: 1px solid rgba(22,80,103,.3); background: linear-gradient(135deg, rgba(255,255,255,.86), rgba(118,185,215,.35)); }
.mini-vitrin::after { content: attr(data-label); position: absolute; inset: 0; display: grid; place-items: center; color: rgba(22,80,103,.58); font-size: .65rem; font-weight: 900; letter-spacing: .12em; }
.mini-vitrin--city { width: 72px; height: 96px; }
.mini-vitrin--city span { position: absolute; left: 50%; bottom: -20px; width: 58px; height: 18px; transform: translateX(-50%); background: #8d9ba1; clip-path: polygon(18% 0,82% 0,100% 100%,0 100%); }
.mini-vitrin--info { width: 105px; height: 72px; border-width: 4px; }
.mini-vitrin--info span { position: absolute; top: -11px; left: -10px; right: -10px; height: 7px; background: #84949b; }

.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.field { display: grid; gap: 7px; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: .9rem; font-weight: 800; }
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  color: var(--text);
  outline: none;
}
.field input:disabled,
.field select:disabled,
.field textarea:disabled { color: #87969c; background: #edf1f3; cursor: not-allowed; }
.field input:focus,
.field select:focus,
.field textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(0,143,149,.1); }
.field textarea { min-height: 100px; resize: vertical; }
.field__hint { color: var(--muted); font-size: .8rem; }
.field__error { color: var(--danger); font-size: .8rem; font-weight: 750; }
.inline-fields { display: flex; align-items: center; gap: 8px; }
.inline-fields input { flex: 1; }
.inline-fields span { color: var(--muted); font-weight: 800; }

.switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
}
.switch-row.is-disabled { opacity: .5; background: #f5f7f8; }
.switch-row__text strong { display: block; }
.switch-row__text span { color: var(--muted); font-size: .85rem; }
.switch { position: relative; flex: 0 0 auto; width: 50px; height: 28px; }
.switch input { position: absolute; opacity: 0; }
.switch__track { position: absolute; inset: 0; border-radius: 999px; background: #bbc8ce; transition: background .15s ease; }
.switch__track::after { content: ""; position: absolute; top: 4px; left: 4px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,.2); transition: transform .15s ease; }
.switch input:checked + .switch__track { background: var(--primary); }
.switch input:checked + .switch__track::after { transform: translateX(22px); }

.rule-messages { display: grid; gap: 8px; margin-top: 18px; }
.rule-message { padding: 11px 13px; border: 1px solid var(--warning-border); border-radius: 10px; background: var(--warning-bg); color: #6f5718; font-size: .88rem; font-weight: 700; }
.rule-message--error { border-color: #e7a3a3; color: #7e292c; background: #fff0f0; }
.callout { padding: 16px; border-left: 5px solid var(--primary); border-radius: 10px; background: #edf8f8; }
.callout p:last-child { margin-bottom: 0; }
.callout--warning { border-left-color: #d5a323; background: #fff8e6; }

.summary-panel { display: grid; align-self: start; gap: 16px; position: sticky; top: 20px; }
.preview-card, .result-card { padding: 20px; }
.preview-card__header { display: flex; align-items: start; justify-content: space-between; gap: 15px; }
.badge { padding: 5px 9px; border-radius: 999px; color: var(--primary-dark); background: #dff2f3; font-size: .78rem; font-weight: 850; }

.preview {
  --frame-color: #59656b;
  --preview-w: 142px;
  --preview-h: 202px;
  --profile-depth: 26px;
  position: relative;
  height: 390px;
  margin: 16px 0 10px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: linear-gradient(#e8f3f7 0 66%, #dce3e6 66% 100%);
}
.preview__empty { position: absolute; inset: 0; display: grid; place-items: center; padding: 30px; color: var(--muted); text-align: center; }
.preview__scene { display: block; position: absolute; inset: 0; }
.preview.is-empty .preview__scene { display: none; }
.preview:not(.is-empty) .preview__empty { display: none; }
.preview__views { position: absolute; inset: 36px 20px 28px; display: grid; grid-template-columns: minmax(0,1fr) 88px; align-items: end; gap: 20px; }
.front-view { position: relative; display: grid; place-items: end center; min-height: 300px; }
.preview__frame {
  position: relative;
  z-index: 4;
  width: var(--preview-w);
  height: var(--preview-h);
  padding: 8px;
  border: var(--frame-border, 8px) solid var(--frame-color);
  border-radius: 3px;
  background: #d9e1e5;
  box-shadow: 0 12px 18px rgba(19,52,65,.18);
  transition: width .2s ease, height .2s ease, border-color .2s ease, border-width .2s ease;
}
.preview.is-cut .preview__frame { clip-path: polygon(5% 0,100% 0,100% 95%,95% 100%,0 100%,0 5%); }
.preview__glass { position: relative; display: grid; place-items: center; width: 100%; height: 100%; overflow: hidden; border: 1px solid rgba(55,96,114,.42); background: linear-gradient(135deg, rgba(255,255,255,.82), rgba(145,194,217,.40)); }
.preview__poster { display: grid; place-items: center; width: 73%; height: 76%; border: 1px solid rgba(22,80,103,.28); color: rgba(22,80,103,.48); background: rgba(255,255,255,.69); font-size: 1rem; font-weight: 900; letter-spacing: .13em; text-align: center; }
.preview.is-info .preview__poster { height: 65%; }
.glass-mask { display: none; position: absolute; inset: 0; z-index: 2; border: 12px solid rgba(38,48,53,.72); pointer-events: none; }
.preview.is-glas .glass-mask { display: block; }
.preview.is-glas { --frame-border: 4px; }
.opening-arrow { position: absolute; z-index: 8; display: none; width: 34px; height: 34px; border: 3px solid var(--primary); border-left-color: transparent; border-bottom-color: transparent; border-radius: 50%; }
.opening-arrow::after { content: ""; position: absolute; right: -6px; top: -3px; width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 10px solid var(--primary); transform: rotate(-28deg); }
.preview.open-up .opening-arrow { display: block; left: calc(50% - 17px); top: 27px; transform: rotate(-42deg); }
.preview.open-side .opening-arrow { display: block; right: 11px; top: 48%; transform: rotate(48deg); }
.roll-cylinder { display: none; position: absolute; z-index: 4; left: 7%; right: 7%; height: 9px; border-radius: 999px; background: linear-gradient(#53656d,#aab7bc,#53656d); box-shadow: 0 1px 3px rgba(0,0,0,.35); }
.roll-cylinder--top { top: 5px; }
.roll-cylinder--bottom { bottom: 5px; }
.preview.side-a-roll .roll-cylinder { display: block; }
.preview.side-a-roll .preview__poster::after { content: "ROLL"; display: inline-flex; padding: 3px 6px; color: #fff; background: #1d5c77; font-size: .55rem; letter-spacing: .12em; }
.preview__leds { display: none; position: absolute; z-index: 3; inset: 9px; justify-content: space-evenly; gap: 5px; }
.preview.has-led .preview__leds { display: flex; }
.preview__leds i { width: 5px; height: 100%; border-radius: 999px; background: #fff6bd; box-shadow: 0 0 8px rgba(255,232,122,.95); }
.preview__backwall { display: none; position: absolute; z-index: 1; inset: 3px; border: 2px dashed rgba(22,80,103,.38); background: rgba(210,218,221,.50); }
.preview.has-backwall .preview__backwall { display: block; }
.preview.has-tray-backwall .preview__backwall { display: block; box-shadow: inset 0 0 0 7px rgba(73,90,98,.26); }
.preview.has-rain-backwall .preview__frame::before { content: ""; position: absolute; z-index: 7; left: -14px; right: -14px; top: -16px; height: 10px; border-radius: 2px; background: var(--frame-color); box-shadow: 0 3px 6px rgba(19,52,65,.25); }
.preview.has-removable-backwall .preview__glass { outline: 2px dashed rgba(22,80,103,.42); outline-offset: -7px; }

.dimension { position: absolute; z-index: 9; color: #315d6e; font-size: .64rem; font-weight: 850; }
.dimension span { display: block; color: var(--primary-dark); }
.dimension b { display: block; white-space: nowrap; font-size: .61rem; }
.dimension--width { left: 50%; bottom: -24px; width: var(--preview-w); transform: translateX(-50%); border-top: 1px solid #507282; text-align: center; }
.dimension--width::before,.dimension--width::after { content: ""; position: absolute; top: -4px; width: 1px; height: 8px; background: #507282; }
.dimension--width::before { left: 0; }.dimension--width::after { right: 0; }
.dimension--height { left: calc(50% - (var(--preview-w) / 2) - 36px); bottom: 0; height: var(--preview-h); border-right: 1px solid #507282; writing-mode: vertical-rl; text-align: center; }
.dimension--height::before,.dimension--height::after { content: ""; position: absolute; right: -4px; width: 8px; height: 1px; background: #507282; }
.dimension--height::before { top: 0; }.dimension--height::after { bottom: 0; }
.dimension--depth { top: -35px; left: 50%; width: var(--profile-depth); transform: translateX(-50%); border-top: 1px solid #507282; text-align: center; }
.dimension--depth::before,.dimension--depth::after { content: ""; position: absolute; top: -4px; width: 1px; height: 8px; background: #507282; }
.dimension--depth::before { left: 0; }.dimension--depth::after { right: 0; }

.side-view { position: relative; display: grid; place-items: center; align-self: center; min-height: 220px; }
.side-profile { position: relative; display: flex; align-items: stretch; width: var(--profile-depth); height: 178px; filter: drop-shadow(0 8px 7px rgba(19,52,65,.18)); transition: width .2s ease; }
.side-profile__front,.side-profile__back { flex: 0 0 5px; background: var(--frame-color); }
.side-profile__body { flex: 1; border-top: 5px solid var(--frame-color); border-bottom: 5px solid var(--frame-color); background: rgba(184,201,207,.8); }
.preview.is-single .side-profile__back { background: #8e9ba0; }
.preview.is-double .side-profile__back { background: var(--frame-color); }
.side-view__label { position: absolute; bottom: 2px; color: var(--muted); font-size: .62rem; font-weight: 800; }

.installation { display: none; position: absolute; z-index: 0; }
.installation--wall { inset: 24px 8px 26px; border-radius: 6px; background: repeating-linear-gradient(0deg,#d8dde0 0 18px,#cdd3d6 19px 20px); }
.preview.install-wall .installation--wall { display: block; }
.installation__anchor { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: #66757b; }
.installation__anchor--1 { left: 16px; top: 18px; }.installation__anchor--2 { right: 16px; top: 18px; }.installation__anchor--3 { left: 16px; bottom: 18px; }.installation__anchor--4 { right: 16px; bottom: 18px; }
.installation--shelter { inset: 8px 5px 22px; }
.preview.install-shelter .installation--shelter { display: block; }
.shelter__roof { position: absolute; top: 0; left: 5px; right: 5px; height: 16px; border-radius: 3px; background: #62747c; }
.shelter__post { position: absolute; top: 12px; bottom: 0; width: 12px; background: #778990; }
.shelter__post--left { left: 12px; }.shelter__post--right { right: 12px; }
.preview__totem { display: none; position: absolute; z-index: 3; left: 50%; bottom: -66px; width: 90px; height: 72px; transform: translateX(-50%); }
.preview.install-totem .preview__totem { display: block; }
.preview.install-totem .front-view { transform: translateY(-42px); }
.totem__panel { position: absolute; inset: 0 12px 18px; background: linear-gradient(90deg,#75858b,#a6b1b5,#75858b); }
.totem__base { display: none; position: absolute; left: 0; right: 0; bottom: 12px; height: 9px; border-radius: 2px; background: #59696f; }
.totem__extension { display: none; position: absolute; left: 35px; bottom: -24px; width: 20px; height: 44px; background: #77878d; }
.preview.totem-foot .totem__base { display: block; }
.preview.totem-concrete .totem__extension { display: block; }

.preview-note { margin: 0 0 12px; color: var(--muted); font-size: .74rem; }
.summary-list { display: grid; gap: 0; margin: 0; }
.summary-list > div { display: grid; grid-template-columns: 1fr auto; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.summary-list dt { color: var(--muted); font-size: .82rem; }
.summary-list dd { margin: 0; max-width: 210px; font-size: .82rem; font-weight: 800; text-align: right; }
.configuration-code { display: block; margin: 6px 0 10px; color: var(--primary-dark); font-size: 1.02rem; word-break: break-all; }
.price-placeholder { display: grid; gap: 2px; margin: 14px 0; padding: 12px; border: 1px dashed var(--border); border-radius: 10px; background: var(--surface-2); }
.price-placeholder span { color: var(--muted); font-size: .8rem; }
.price-placeholder strong { font-size: .9rem; }
.result-card__buttons { display: grid; gap: 9px; margin-top: 16px; }
.status-text { min-height: 22px; margin: 10px 0 0; color: var(--success); font-size: .84rem; font-weight: 750; }

.review { display: grid; gap: 16px; }
.review__group { padding: 18px; border: 1px solid var(--border); border-radius: 14px; }
.review__rows { display: grid; gap: 9px; margin-top: 12px; }
.review__row { display: flex; justify-content: space-between; gap: 20px; padding-bottom: 8px; border-bottom: 1px dashed var(--border); }
.review__row span:first-child { color: var(--muted); }
.review__row strong { text-align: right; }

.footer { display: flex; justify-content: space-between; gap: 20px; max-width: 1880px; margin: 0 auto; padding: 0 24px 24px; color: var(--muted); font-size: .82rem; }
.print-sheet { display: none; }

@media (max-width: 1300px) {
  .app-shell { grid-template-columns: 220px minmax(0, 1fr); }
  .summary-panel { position: static; grid-column: 1 / -1; grid-template-columns: minmax(0,1.2fr) minmax(280px,.8fr); }
}
@media (max-width: 850px) {
  .topbar { padding: 20px; }
  .app-shell { grid-template-columns: 1fr; padding: 14px; }
  .sidebar { position: static; }
  .step-navigation { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(145px,1fr); overflow-x: auto; }
  .step-link { grid-template-columns: 28px 1fr; padding: 9px; }
  .workspace { min-height: auto; padding: 18px; }
  .workspace__header { flex-direction: column; }
  .workspace__actions { width: 100%; }
  .workspace__actions .button { flex: 1; }
  .option-grid,.option-grid--3,.option-grid--4,.field-grid { grid-template-columns: 1fr; }
  .summary-panel { grid-template-columns: 1fr; }
  .preview { height: 410px; }
  .preview__views { inset: 14px 10px 24px; gap: 12px; }
  .footer { flex-direction: column; padding: 0 14px 20px; }
}

@page { size: A4 portrait; margin: 12mm; }
@media print {
  body { background: #fff; color: #111; }
  .topbar,.app-shell,.footer { display: none !important; }
  .print-sheet { display: block !important; width: 100%; font-family: Arial,sans-serif; }
  .print-header { display: flex; justify-content: space-between; gap: 20px; padding-bottom: 8mm; border-bottom: 2px solid #333; }
  .print-header h1 { margin: 0 0 2mm; font-size: 18pt; }
  .print-header p { margin: 0; font-size: 9pt; }
  .print-code { max-width: 85mm; font-size: 9pt; font-weight: 700; text-align: right; word-break: break-word; }
  .print-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5mm; margin-top: 6mm; }
  .print-group { break-inside: avoid; border: 1px solid #aaa; border-radius: 2mm; padding: 4mm; }
  .print-group h2 { margin: 0 0 3mm; font-size: 11pt; }
  .print-row { display: grid; grid-template-columns: 42% 58%; gap: 3mm; padding: 1.5mm 0; border-bottom: 1px dotted #bbb; font-size: 8.5pt; }
  .print-row:last-child { border-bottom: 0; }
  .print-row span { color: #555; }
  .print-note { grid-column: 1 / -1; min-height: 20mm; }
  .print-footer { margin-top: 7mm; padding-top: 4mm; border-top: 1px solid #aaa; font-size: 8pt; color: #555; }
}
.preview__support { display:none; position:absolute; z-index:7; right:calc(50% - (var(--preview-w) / 2) + 10px); bottom:22px; width:5px; height:68px; transform:rotate(-28deg); transform-origin:bottom; border-radius:999px; background:#697980; box-shadow:0 0 0 1px rgba(255,255,255,.6); }
.preview.info-support-manual .preview__support,.preview.info-support-gas .preview__support { display:block; }
.preview.info-support-gas .preview__support { width:8px; background:linear-gradient(#4c5960 0 55%,#a9b3b7 55% 100%); }
.side-view__side-b { position:absolute; top:8px; left:50%; transform:translateX(-50%); display:none; padding:3px 6px; border-radius:999px; color:#fff; background:#315d6e; font-size:.55rem; font-weight:900; white-space:nowrap; }
.preview.is-double .side-view__side-b { display:block; }


/* v4 preview finomítások */
.preview {
  height: 520px;
  background: linear-gradient(#f0f2f3 0 100%);
}
.preview__views {
  inset: 18px 18px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.views-row {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 32px;
}
.top-view {
  position: relative;
  width: min(100%, calc(var(--preview-w) + 110px));
  min-height: 72px;
  display: grid;
  place-items: center;
}
.top-profile {
  position: relative;
  width: var(--preview-w);
  height: var(--profile-depth);
  border: 4px solid var(--frame-color);
  background: #d7dde0;
  box-shadow: 0 8px 10px rgba(19,52,65,.12);
}
.top-profile::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 2px solid rgba(22,80,103,.35);
  background: rgba(255,255,255,.72);
}
.top-view__label {
  position: absolute;
  right: 0;
  bottom: 0;
  color: var(--muted);
  font-size: .62rem;
  font-weight: 800;
}
.dimension--top-depth {
  left: calc(50% - (var(--preview-w) / 2) - 46px);
  top: 50%;
  height: var(--profile-depth);
  transform: translateY(-50%);
  border-right: 1px solid #507282;
  writing-mode: vertical-rl;
  text-align: center;
}
.dimension--top-depth::before,.dimension--top-depth::after {
  content: "";
  position: absolute;
  right: -4px;
  width: 8px;
  height: 1px;
  background: #507282;
}
.dimension--top-depth::before { top: 0; }
.dimension--top-depth::after { bottom: 0; }
.front-view {
  min-height: 350px;
  display: grid;
  place-items: end center;
}
.preview__frame {
  padding: 9px;
  border-width: 7px;
  box-shadow: 0 10px 16px rgba(19,52,65,.14);
}
.preview__frame::after {
  content: "";
  position: absolute;
  inset: 7px;
  border: 2px solid rgba(38,68,81,.35);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.7);
  pointer-events: none;
}
.preview.is-cut .preview__frame { clip-path: none; }
.preview__glass {
  border: 1px solid rgba(55,96,114,.52);
  background: linear-gradient(135deg, rgba(255,255,255,.88), rgba(145,194,217,.36));
}
.preview__poster {
  width: 76%;
  height: 79%;
}
.preview.is-info .preview__poster { height: 68%; }
.glass-mask {
  inset: 6px;
  border-width: 8px;
}
.opening-arrow {
  display: none;
  border: 0;
  border-radius: 0;
  background: none;
}
.opening-arrow::after { display: none; }
.preview.open-up .opening-arrow {
  display: block;
  left: 50%;
  top: 48px;
  width: calc(var(--preview-w) * 0.58);
  height: calc(var(--preview-h) * 0.30);
  transform: translateX(-50%);
  background:
    linear-gradient(66deg, transparent 49%, rgba(0,143,149,.95) 50% 52%, transparent 53%),
    linear-gradient(-66deg, transparent 49%, rgba(0,143,149,.95) 50% 52%, transparent 53%);
}
.preview.open-side .opening-arrow {
  display: block;
  left: 50%;
  top: 50%;
  width: calc(var(--preview-w) * 0.52);
  height: calc(var(--preview-h) * 0.64);
  transform: translate(-50%, -50%);
  background: linear-gradient(135deg, transparent 49%, rgba(0,143,149,.95) 50% 52%, transparent 53%);
}
.side-view {
  min-width: 100px;
  min-height: 250px;
}
.side-profile {
  width: var(--profile-depth);
  height: var(--preview-h);
}
.side-profile__front,.side-profile__back { flex-basis: 6px; }
.side-profile__body {
  position: relative;
  border-top-width: 6px;
  border-bottom-width: 6px;
}
.side-profile__body::after {
  content: "";
  position: absolute;
  inset: 7px 3px;
  border: 1px solid rgba(22,80,103,.28);
  background: rgba(255,255,255,.34);
}
.preview.is-single .side-profile__back { background: #c5cfd3; }
.preview.has-backwall .preview__backwall {
  display: block;
  background: repeating-linear-gradient(135deg, rgba(190,198,202,.76) 0 8px, rgba(214,220,223,.82) 8px 16px);
  border: 1px solid rgba(60,83,92,.38);
}
.preview.has-removable-backwall .preview__backwall,
.preview.has-tray-backwall .preview__backwall {
  display: block;
}
.preview.has-removable-backwall .preview__backwall {
  background: repeating-linear-gradient(135deg, rgba(190,198,202,.76) 0 8px, rgba(214,220,223,.82) 8px 16px);
  outline: 2px dashed rgba(22,80,103,.42);
  outline-offset: -5px;
}
.preview.has-tray-backwall .preview__backwall {
  box-shadow: inset 0 0 0 9px rgba(73,90,98,.22);
}
.preview.info-support-manual .preview__support,
.preview.info-support-gas .preview__support {
  display: block;
}
.installation--shelter {
  inset: 0 0 18px;
}
.shelter__roof {
  top: 4px;
  left: 0;
  right: 0;
  height: 18px;
}
.shelter__post--left { left: 26px; }
.shelter__post--right { right: 26px; }
.preview.install-shelter .front-view {
  transform: translateY(10px);
}
.preview.surface-anodized .preview__frame,
.preview.surface-anodized .top-profile,
.preview.surface-anodized .side-profile__front,
.preview.surface-anodized .side-profile__back,
.preview.surface-anodized .side-profile__body {
  filter: saturate(.8) brightness(1.03);
}
@media (max-width: 850px) {
  .preview { height: 460px; }
  .views-row { gap: 14px; }
  .top-view { width: 100%; }
  .side-view { min-width: 70px; }
}


/* v5 finomítások */
.preview {
  height: 640px;
  overflow: visible;
}
.preview__views {
  inset: 20px 14px 20px;
  gap: 20px;
}
.top-view {
  width: min(100%, calc(var(--preview-w) + 150px));
}
.views-row {
  align-items: center;
  justify-content: center;
  gap: 42px;
}
.front-view {
  min-height: 420px;
}
.preview__frame {
  border-width: 8px;
  padding: 10px;
}
.preview__poster {
  width: 80%;
  height: 82%;
  font-size: 0;
  color: transparent;
  background: linear-gradient(180deg, rgba(255,255,255,.8), rgba(255,255,255,.58));
}
.preview.is-info .preview__poster {
  height: 72%;
}
.opening-arrow { display:none !important; }
.preview__lock {
  display:none;
  position:absolute;
  z-index:8;
  left:50%;
  bottom:10px;
  transform:translateX(-50%);
  background:#1b1f22;
  box-shadow:0 0 0 2px rgba(255,255,255,.85);
}
.preview.lock-csappantyus .preview__lock,
.preview.lock-evva .preview__lock,
.preview.lock-cilinderes .preview__lock,
.preview.lock-info .preview__lock {
  display:block;
}
.preview.lock-csappantyus .preview__lock {
  width:18px;height:6px;border-radius:999px;
}
.preview.lock-evva .preview__lock {
  width:12px;height:12px;border-radius:50%;
}
.preview.lock-cilinderes .preview__lock {
  width:10px;height:16px;border-radius:4px;
}
.preview.lock-info .preview__lock {
  width:8px;height:8px;border-radius:50%;
  box-shadow: -56px 0 0 #1b1f22, 56px 0 0 #1b1f22, -56px 0 0 2px rgba(255,255,255,.85), 56px 0 0 2px rgba(255,255,255,.85);
}
.side-view {
  min-width: 120px;
  min-height: 290px;
}
.side-profile {
  height: var(--preview-h);
}
.side-view__side-b {
  position: static;
  transform: none;
  display: block;
  margin-top: 10px;
  padding: 8px 10px;
  width: 110px;
  border-radius: 12px;
  color: #214957;
  background: #e8f3f7;
  font-size: .7rem;
  font-weight: 800;
  white-space: normal;
  text-align: center;
  line-height: 1.35;
}
.preview.is-double .side-profile__body::before {
  content:"";
  position:absolute;
  top:6px;
  bottom:6px;
  left:50%;
  width:2px;
  background: rgba(39,71,84,.28);
  transform: translateX(-50%);
}
.preview.is-cut152 .preview__frame,
.preview.is-cut152 .top-profile {
  border-width: 4px;
}
.preview.is-cut152 .side-profile__front,
.preview.is-cut152 .side-profile__back,
.preview.is-cut152 .side-profile__body {
  opacity: .96;
}
.preview.install-totem .preview__totem {
  width: var(--totem-width, calc(var(--preview-w) + 16px));
  bottom: -58px;
}
.preview.install-totem .totem__panel {
  inset: 0 0 18px;
}
.preview.install-totem .totem__base {
  left: 0;
  right: 0;
}
.preview.has-no-backwall .preview__backwall {
  display:none;
}
.preview.has-no-backwall .side-profile__back {
  background: #cfd8dc;
}
.top-profile::after {
  content:"";
  position:absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0 20%, rgba(0,0,0,.04) 20% 21%, transparent 21% 79%, rgba(0,0,0,.04) 79% 80%, transparent 80%);
  pointer-events:none;
}
.preview-chips {
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 12px 0 8px;
}
.preview-chip {
  display:block;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #f7fafb;
  color: #22414d;
  font-size: .75rem;
  font-weight: 700;
  line-height: 1.35;
}
.preview-note {
  margin-top: 14px;
}
@media (max-width: 850px) {
  .preview { height: 600px; }
  .views-row { gap: 18px; }
  .preview-chips { grid-template-columns: 1fr; }
  .side-view__side-b { width: 88px; font-size: .66rem; }
}


/* v6 preview egyszerűsítés */
.preview {
  height: 520px;
  overflow: hidden;
}
.preview__scene {
  overflow: hidden;
}
.top-view {
  display: none !important;
}
.preview__views {
  inset: 18px 18px 18px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 22px;
}
.views-row {
  width: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
}
.front-view {
  min-height: 370px;
  min-width: calc(var(--preview-w) + 36px);
}
.side-view {
  min-width: 92px;
  min-height: 250px;
}
.side-view__side-b {
  width: 86px;
  font-size: .62rem;
  line-height: 1.25;
  padding: 6px 7px;
}
.preview__frame {
  border-width: 7px;
  padding: 8px;
  box-shadow: 0 8px 12px rgba(19,52,65,.12);
}
.preview__frame::after {
  inset: 6px;
}
.preview__glass {
  border: 1px solid rgba(55,96,114,.38);
}
.preview__poster {
  background: rgba(255,255,255,.55);
}
.preview-chips {
  display: none !important;
}
.preview-note {
  margin-top: 10px;
}
.preview.is-cut152 .preview__frame {
  border-width: 3px !important;
  padding: 4px !important;
}
.preview.is-cut152 .preview__frame::after {
  inset: 3px;
}
.preview.is-cut152 .glass-mask {
  inset: 3px;
  border-width: 5px;
}
.preview.is-cut152 .front-view::after {
  content: "Látható felület: kb. 37 mm";
  position: absolute;
  left: 50%;
  bottom: -4px;
  transform: translateX(-50%);
  padding: 4px 8px;
  border-radius: 999px;
  background: #eef6f8;
  color: #1f4d5f;
  font-size: .64rem;
  font-weight: 800;
  white-space: nowrap;
}
.preview.install-totem .preview__totem {
  bottom: -26px;
}
.preview__lock {
  bottom: 12px;
  background: #101518;
  box-shadow: 0 0 0 2px rgba(255,255,255,.9);
}
.preview.lock-csappantyus .preview__lock {
  width: 24px; height: 8px; border-radius: 999px;
}
.preview.lock-evva .preview__lock {
  width: 16px; height: 16px; border-radius: 50%;
}
.preview.lock-evva .preview__lock::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 4px; height: 4px; border-radius: 50%;
  background: rgba(255,255,255,.85);
  transform: translate(-50%, -50%);
}
.preview.lock-cilinderes .preview__lock {
  width: 12px; height: 20px; border-radius: 4px;
}
.preview.lock-cilinderes .preview__lock::after {
  content: "";
  position: absolute;
  left: 50%; top: 6px;
  width: 4px; height: 4px; border-radius: 50%;
  background: rgba(255,255,255,.85);
  transform: translateX(-50%);
}
.preview.lock-info .preview__lock {
  width: 8px; height: 8px; border-radius: 50%;
  box-shadow: -62px 0 0 #101518, 62px 0 0 #101518, -62px 0 0 2px rgba(255,255,255,.9), 62px 0 0 2px rgba(255,255,255,.9);
}
.summary-list {
  margin-top: 10px;
}
@media (max-width: 850px) {
  .preview {
    height: 470px;
  }
  .preview__views {
    gap: 12px;
  }
  .views-row {
    gap: 12px;
  }
  .side-view {
    min-width: 74px;
  }
  .side-view__side-b {
    width: 72px;
    font-size: .58rem;
  }
}


/* v7 műszaki élőkép */
.preview-card {
  padding: 18px;
}
.preview {
  position: relative;
  min-height: 620px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: linear-gradient(180deg, #fbfcfd 0%, #f4f7f8 100%);
  overflow: hidden;
}
.preview__empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--muted);
  font-weight: 700;
  z-index: 2;
}
.preview__scene {
  position: relative;
  inset: 0;
  height: 100%;
  padding: 16px;
}
.preview.is-empty .preview__scene { opacity: .22; }
.preview:not(.is-empty) .preview__empty { display: none; }
.technical-preview {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 170px;
  gap: 18px;
  align-items: stretch;
  height: 100%;
}
.technical-preview__view {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 10px;
  min-height: 0;
}
.technical-preview__title {
  color: var(--primary-dark);
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: .82rem;
}
.technical-svg {
  width: 100%;
  height: 100%;
  min-height: 500px;
  border: 1px solid #dfe6ea;
  border-radius: 12px;
  background: #fff;
}
.technical-svg--side {
  min-height: 500px;
}
.technical-preview__meta {
  display: grid;
  gap: 6px;
  padding: 8px 2px 0;
  color: #294753;
  font-size: .82rem;
  font-weight: 700;
}
.preview-note {
  margin: 12px 2px 0;
  color: var(--muted);
  font-size: .84rem;
}
.preview-chips,
.top-view,
.views-row,
.preview__support,
.opening-arrow,
.preview__poster,
.preview__backwall,
.preview__frame,
.preview__totem,
.installation,
.dimension--width,
.dimension--height,
.dimension--top-depth,
.side-view__side-b,
.side-view__label,
.top-view__label,
.preview__leds,
.roll-cylinder,
.glass-mask,
.preview__lock,
.side-profile,
.front-view,
.side-view {
  display: none !important;
}
.summary-list {
  margin-top: 12px;
}
@media (max-width: 1450px) {
  .app-shell {
    grid-template-columns: 220px minmax(0, 1fr) 580px;
  }
}
@media (max-width: 1180px) {
  .technical-preview {
    grid-template-columns: 1fr;
  }
  .technical-svg, .technical-svg--side {
    min-height: 300px;
  }
  .preview {
    min-height: 760px;
  }
}


/* v8 preview finomítás */
.preview {
  min-height: 680px;
}
.technical-preview {
  grid-template-columns: minmax(0, 1fr) 210px;
  gap: 20px;
}
.technical-svg {
  min-height: 540px;
}
.technical-svg--side {
  min-height: 540px;
}
.technical-preview__meta {
  min-height: 54px;
  align-content: start;
}
.technical-preview__meta span {
  line-height: 1.35;
}
.preview-note {
  font-size: .8rem;
  line-height: 1.45;
}
.summary-list {
  margin-top: 16px;
}
@media (max-width: 1180px) {
  .preview {
    min-height: 820px;
  }
}


/* v9 élőkép tisztítás */
.technical-preview__meta { display: none; }
.preview { min-height: 640px; }


/* v10 preview overflow fix */
.technical-svg, .technical-svg--side { overflow: hidden; }
.technical-preview__body { overflow: hidden; }


/* v11 nagyobb, teljes műszaki élőkép */
.app-shell {
  grid-template-columns: 245px minmax(0, 1fr) 720px;
  max-width: 1980px;
}
.preview {
  min-height: 760px;
}
.technical-preview {
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 22px;
}
.technical-svg,
.technical-svg--side {
  min-height: 650px;
}
@media (max-width: 1450px) {
  .app-shell {
    grid-template-columns: 220px minmax(0, 1fr) 640px;
  }
}
@media (max-width: 1180px) {
  .technical-svg,
  .technical-svg--side {
    min-height: 420px;
  }
  .preview {
    min-height: 1020px;
  }
}