/* Главная, загрузка и «Проверь размеры» — по макету дизайнера (артефакт «obstavь — главная страница»:
   Main.dc.html, Upload.dc.html, Confirm.dc.html) и ТЗ obstav-style-spec.md (2026-10-21): тёплая палитра,
   navy — только логотип и главные кнопки, терракота — мелкие акценты. Классы с префиксом h- / hd- / c-. */

:root {
  --o-bg: #F7F5F1;      /* фон страницы */
  --o-card: #EBE7E0;    /* карточки, плашки, превью */
  --o-surface: #FBF9F6; /* поле ввода, всплывающее */
  --o-ink: #2B2420;     /* текст (графит, тёплый) */
  --o-navy: #14305A;    /* логотип, главные кнопки */
  --o-warm: #B4573C;    /* терракота: номера шагов, стрелки, активный сегмент */
  --o-line: #DCD6CC;    /* рамки, разделители */
  --o-muted: #6B6358;   /* второстепенный текст */
  --o-danger: #A8352A;
  --o-on-dark: #F7F5F1;
}

.home {
  --accent: var(--o-navy);
  --h-bg: var(--o-bg);
  --h-card: var(--o-card);
  display: none;
  background: var(--h-bg);
  color: var(--o-ink);
  font-family: "Inter Tight", Arial, Helvetica, sans-serif;
}
.home.active { display: block; }
html { scroll-behavior: smooth; }
body { background: var(--o-bg); }
.home a:focus-visible, .home button:focus-visible, .home [tabindex]:focus-visible { outline: 3px solid var(--o-ink); outline-offset: 3px; }

.h-wrap { width: 100%; max-width: 1440px; margin: 0 auto; box-sizing: border-box; padding: 56px 48px 96px; }

/* --- шапка: логотип ≈ половина ширины, подпись справа --- */
.h-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 28px; }
.h-logo { display: block; width: 52%; height: auto; }
.h-sub { display: flex; gap: 14px; font-size: 15px; color: var(--o-navy); padding-bottom: 10px; }

/* --- фото-герой: две фотографии внахлёст, правая лежит поверх нижним правым углом --- */
.h-hero { position: relative; width: 100%; aspect-ratio: 100 / 58; background: var(--o-bg); }
.h-ph { position: absolute; display: block; object-fit: cover; box-sizing: border-box; }
.h-ph1 { left: 0; top: 0; width: 66%; height: 84%; object-position: 50% 38%; border: 1.6px solid var(--o-line); box-shadow: 0 12px 28px rgba(43, 36, 32, .16); }
.h-ph2 { right: 0; bottom: 0; width: 48%; height: 68%; object-position: 50% 50%;
  box-shadow: -22px 0 34px -10px rgba(30, 24, 20, .42), 0 -18px 30px -14px rgba(30, 24, 20, .28), 0 14px 30px rgba(43, 36, 32, .18); }
.h-title-on { position: absolute; left: 0; bottom: 0; width: 48%; max-width: 520px; color: var(--o-ink); font-size: clamp(16px, 2.1vw, 30px);
  font-weight: 600; line-height: 1.06; letter-spacing: -0.02em; text-transform: uppercase; word-break: keep-all; hyphens: none; }
.h-warm { color: var(--o-warm); }
.h-under { margin: 28px 0 104px; }
.h-lead { margin: 0; font-size: clamp(15px, 1.3vw, 19px); font-weight: 300; line-height: 1.4; max-width: 520px; }
.h-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-top: 28px; }
/* главная кнопка: navy, фаска 14 px */
.h-go { display: inline-block; font: inherit; font-size: 18px; font-weight: 600; padding: 16px 28px; border: 1.6px solid var(--o-navy); background: var(--o-navy);
  color: #FCFBF9; text-decoration: none; cursor: pointer; border-radius: 14px; }
.h-go:disabled { opacity: .35; cursor: not-allowed; }
.h-link { background: none; border: 0; padding: 0; font: inherit; font-size: 16px; color: var(--o-ink); text-decoration: underline; cursor: pointer; }
/* «Продолжить мой проект» и «Шаблон проекта» рядом с главной кнопкой — бледные полупрозрачные белые плашки,
   чтобы не спорить с navy «Загрузить свою комнату» (просьба владельца 2026-10-22) */
.h-cta .h-link { padding: 14px 20px; border: 1.6px solid rgba(43, 36, 32, .14); border-radius: 14px; background: rgba(255, 255, 255, .55);
  color: var(--o-muted); text-decoration: none; font-weight: 500; transition: background .15s, color .15s, border-color .15s; }
.h-cta .h-link:hover, .h-cta .h-link:focus-visible { background: rgba(255, 255, 255, .9); color: var(--o-ink); border-color: rgba(43, 36, 32, .3); }

/* --- как это работает --- */
.h-how { margin: 0 0 44px 14%; font-size: clamp(34px, 5vw, 72px); font-weight: 800; line-height: .95; letter-spacing: -0.04em; text-transform: uppercase; color: var(--o-ink); }
.h-how span { display: block; margin-left: 14%; color: var(--o-warm); }
.h-steps { overflow-x: auto; padding: 4px 4px 8px; }
.h-row { --g: clamp(28px, 4.5vw, 64px); display: flex; align-items: center; gap: var(--g); min-width: 860px; }
.h-cell { position: relative; flex: 1 1 0; min-width: 0; }
/* стрелки между карточками — терракота */
.h-cell:not(:last-child)::after { content: ""; position: absolute; top: 50%; left: calc(100% + 6px); width: calc(var(--g) - 18px); height: 2px; background: var(--o-warm); }
.h-cell:not(:last-child)::before { content: ""; position: absolute; top: calc(50% - 6px); left: calc(100% + var(--g) - 18px); border-left: 11px solid var(--o-warm); border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.h-card { position: relative; display: flex; flex-direction: column; width: 100%; overflow: hidden; box-sizing: border-box; background: var(--o-card); color: var(--o-ink); border-radius: 20px; cursor: pointer; }
.h-txt { position: absolute; inset: 0; padding: clamp(12px, 1.8vw, 24px); display: flex; flex-direction: column; justify-content: space-between; }
.h-n { font-size: clamp(10px, 1.1vw, 15px); font-weight: 600; color: var(--o-warm); }
.h-t { font-size: clamp(14px, 1.75vw, 26px); font-weight: 800; line-height: 1.15; letter-spacing: -0.01em; }
.h-c { font-size: clamp(11px, 1.2vw, 17px); line-height: 1.3; }
/* полоса под иллюстрацией — терракота, с номером и коротким названием */
.h-bar { flex: none; padding: 10px 14px; font-size: clamp(12px, 1.2vw, 16px); font-weight: 600; color: var(--o-on-dark); background: var(--o-warm); display: none; gap: 10px; }
.h-ill { position: relative; flex: 1 1 auto; min-height: 0; }
.h-card.on { cursor: default; }
.h-card.on .h-txt { display: none; }
.h-card.on .h-bar { display: flex; }
.h-reset { margin-top: 20px; background: none; border: 0; padding: 0; font: inherit; font-size: 15px; color: var(--o-warm); text-decoration: underline; cursor: pointer; }

/* анимации иллюстраций (имена из макета с префиксом) */
.hd-draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: hd-draw 1.1s ease forwards; }
@keyframes hd-draw { to { stroke-dashoffset: 0; } }
.hd-fade { opacity: 0; animation: hd-fade .5s ease forwards; }
@keyframes hd-fade { to { opacity: 1; } }
.hd-rise { opacity: 0; transform-box: fill-box; transform-origin: 50% 100%; animation: hd-rise .7s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes hd-rise { from { opacity: 0; transform: scaleY(.1); } to { opacity: 1; transform: scaleY(1); } }
.hd-fall { opacity: 0; animation: hd-fall .6s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes hd-fall { from { opacity: 0; transform: translateY(-46px); } to { opacity: 1; transform: translateY(0); } }
.hd-chip { position: absolute; display: flex; align-items: center; gap: 6px; background: var(--o-card); color: var(--o-ink); font-size: clamp(9px, 1vw, 13px); font-weight: 600;
  padding: 5px 9px; border: 1.6px solid var(--o-ink); border-radius: 10px; white-space: nowrap; opacity: 0; animation: hd-pop .45s ease forwards; }
.hd-chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--o-warm); display: block; }
@keyframes hd-pop { from { opacity: 0; transform: translateY(8px) scale(.94); } to { opacity: 1; transform: none; } }
.hd-shot { opacity: 0; animation: hd-fade .8s ease forwards; }
.hd-scan { position: absolute; top: 0; bottom: 0; left: 0; width: 3px; background: var(--o-navy); box-shadow: 0 0 16px 2px var(--o-navy); opacity: 0; animation: hd-scan 1.3s ease-in-out .5s forwards; }
@keyframes hd-scan { 0% { left: 0; opacity: 1; } 90% { left: calc(100% - 3px); opacity: 1; } 100% { left: calc(100% - 3px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .hd-draw, .hd-fade, .hd-rise, .hd-fall, .hd-chip, .hd-shot { animation-duration: .01s !important; animation-delay: 0s !important; } }

/* --- полоса шагов: активный сегмент navy и непрозрачный, остальные — графит .45 --- */
.h-progress { display: flex; gap: 16px; }
.h-seg { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 10px; font-size: 14px; opacity: .45; color: var(--o-ink); }
.h-seg i { display: block; height: 4px; background: var(--o-ink); }
.h-seg.on { opacity: 1; font-weight: 600; }
.h-seg.on i { background: var(--o-warm); } /* ТЗ §8: активный сегмент — терракота */

/* --- загрузка --- */
.h-upload { min-height: 100vh; padding-top: 120px; box-sizing: border-box; }
.h-h2 { margin: 56px 0 0; font-size: clamp(34px, 4.6vw, 68px); line-height: .98; font-weight: 800; letter-spacing: -0.04em; text-transform: uppercase; color: var(--o-ink); }
.h-up-lead { margin: 20px 0 48px; font-size: clamp(17px, 1.5vw, 21px); font-weight: 300; line-height: 1.4; max-width: 900px; }
.h-drops { display: flex; flex-wrap: wrap; gap: 24px; align-items: stretch; }
/* карточка-загрузка: фон card, фаска 24, тень и блик сверху; при наведении приподнимается; выбранная — navy */
.h-drop {
  flex: 1 1 380px; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: 28px;
  min-height: 360px; box-sizing: border-box; padding: 32px; cursor: pointer; border: 0; border-radius: 24px; color: var(--o-navy);
  background: var(--o-card); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 14px 34px rgba(60, 40, 20, .14);
  transition: box-shadow .3s, transform .3s, color .3s, background .3s;
}
.h-drop:hover { transform: translateY(-3px); box-shadow: 0 22px 44px rgba(43, 36, 32, .22), inset 0 1px 0 rgba(255, 255, 255, .9); }
.h-drop:focus-within { outline: 3px solid var(--o-navy); outline-offset: 3px; }
.h-drop.sel { color: var(--o-on-dark); background: var(--o-navy); }
/* иконка-плитка 72×72, фаска 18: navy с белой иконкой; у выбранной карточки — светлая с navy иконкой */
.h-tile { display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 72px; border-radius: 18px; background: var(--o-navy); color: var(--o-on-dark);
  box-shadow: 0 6px 16px rgba(43, 36, 32, .2), inset 0 1px 0 rgba(255, 255, 255, .35); }
.h-drop.sel .h-tile { background: var(--o-bg); color: var(--o-navy); }
.h-file { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.h-drop-top, .h-drop-mid, .h-drop-bot { position: relative; display: flex; }
.h-drop-top { justify-content: space-between; align-items: flex-start; }
.h-drop-mid { flex-direction: column; gap: 10px; }
.h-drop-bot { justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.h-small { font-size: 15px; }
.h-drop-title { font-size: clamp(28px, 3vw, 44px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; }
.h-drop-hint { font-size: 18px; font-weight: 300; line-height: 1.4; }
.h-pick { display: inline-block; padding: 12px 20px; border: 1.6px solid currentColor; border-radius: 12px; font-size: 16px; font-weight: 600; }
.h-phone-btn { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; padding: 12px 20px; font: inherit; font-size: 15px; font-weight: 600; color: var(--o-ink); background: var(--o-surface); border: 1.6px solid var(--o-line); border-radius: 14px; cursor: pointer; transition: background .15s; }
.h-phone-btn:hover:not(:disabled) { background: var(--o-card); }
.h-phone-btn svg { flex-shrink: 0; }
.h-phone-btn:disabled { opacity: .5; cursor: not-allowed; }
.h-soon { font-size: 12px; font-weight: 700; color: var(--o-warm); text-transform: uppercase; letter-spacing: .04em; margin-left: 2px; }
.h-note { margin-top: 20px; font-size: 15px; font-weight: 300; }

/* QR-модалка для загрузки фото с телефона */
.qr-card { position: relative; background: var(--o-surface, #FBF9F6); border-radius: 20px; padding: 28px 24px; width: min(420px, 100%); box-shadow: 0 20px 48px rgba(43,36,32,.28); display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.qr-card h3 { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.qr-card .close { position: absolute; top: 10px; right: 10px; }
.qr-hint { margin: 0; font-size: 15px; font-weight: 300; line-height: 1.5; color: var(--o-muted, #6B6358); }
.qr-hint .nowrap { white-space: nowrap; }
#qr-code svg { max-width: 220px; width: 100%; height: auto; }
.qr-status { margin: 0; font-size: 14px; color: var(--o-muted, #6B6358); }
.qr-status.has { color: var(--o-warm, #B4573C); font-weight: 600; }
.qr-photos { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.qr-photos img { width: 72px; height: 72px; object-fit: cover; border-radius: 10px; border: 1.6px solid var(--o-line, #DCD6CC); }
.qr-actions { width: 100%; }
.qr-actions .btn { width: 100%; font-size: 16px; padding: 14px 20px; }
.qr-no-lan { padding: 16px; border-radius: 14px; background: #fbe9e7; color: #8a2e1f; font-size: 14px; line-height: 1.5; }
.h-build { margin-top: 48px; display: flex; flex-wrap: wrap; gap: 24px; align-items: center; }
.h-build .h-go { font-size: 19px; padding: 18px 32px; }
.h-file-name { font-size: 16px; }

/* --- шаг 02 «Проверь размеры» (Confirm.dc.html) --- */
.c-wrap { padding-top: 14px; padding-bottom: 14px; }
.c-top { display: flex; align-items: center; gap: 24px; }
.c-logo { display: flex; flex-direction: column; flex: none; line-height: 1; }
.c-brand { font-size: 28px; font-weight: 800; letter-spacing: -0.04em; color: var(--o-navy); text-decoration: none; }
/* мягкий знак в логотипе — терракотовый (знак бренда, решение владельца 2026-10-22); в SVG на главной — tspan */
.c-brand .soft, .e-brand .soft { color: var(--o-warm, #B4573C); }
.c-tag { display: flex; gap: 8px; font-size: 10px; color: var(--o-navy); margin-top: 3px; }
.c-progress { flex: 1; max-width: 980px; }
.c-progress .h-seg { font-size: 13px; gap: 8px; }
.c-back { margin-left: auto; flex: none; color: var(--o-ink); font-size: 14px; white-space: nowrap; }
.c-titlebar { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 14px; }
.c-h1 { margin: 0; font-size: clamp(24px, 2.6vw, 38px); color: var(--o-navy); }
.c-titlebar .h-go { font-size: 17px; padding: 13px 24px; white-space: nowrap; }
/* модель без рамки и без скругления (ТЗ: у 3D-сцены прямые углы); экран — ровно в высоту окна, без прокрутки */
.c-stage-wrap { position: relative; margin-top: 12px; }
.c-stage { height: clamp(360px, calc(100dvh - 160px), 1100px); background: var(--o-bg); }
.c-stage .vp-hint { display: none; }
.home#screen-confirm.active { display: block; overflow: hidden; }
.c-stage-wrap > * { z-index: 3; }
/* панели поверх модели: слева — «Добавить», справа — «Отменить / Вернуть», внизу — подсказка; все в рамках */
.c-tools { position: absolute; top: 12px; left: 12px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.c-add { display: flex; gap: 14px; align-items: baseline; font-size: 15px; font-weight: 400; background: var(--o-surface); border: 1.6px solid var(--o-line); border-radius: 12px; padding: 9px 14px; }
.c-add span { font-weight: 600; }
.c-add .h-link.on { font-weight: 600; }
.c-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; font-size: 15px; background: var(--o-surface); border: 1.6px solid var(--o-line); border-radius: 12px; padding: 10px 14px; max-width: min(520px, 70vw); }
.c-pick > span { font-weight: 600; }
.c-pick-walls { display: flex; flex-wrap: wrap; gap: 8px; }
.c-pick-walls button { font: inherit; font-size: 15px; font-weight: 600; color: var(--o-ink); background: var(--o-card); border: 0; border-radius: 12px; padding: 9px 14px; cursor: pointer; }
.c-pick-walls button:hover, .c-pick-walls button.on { background: var(--o-navy); color: var(--o-on-dark); }
/* отменить / вернуть — поверх модели, справа сверху */
.c-undo { position: absolute; top: 12px; right: 12px; display: flex; gap: 2px; background: var(--o-surface); border: 1.6px solid var(--o-line); border-radius: 12px; padding: 3px; }
.c-undo button { border: 0; background: none; padding: 7px 12px; font: inherit; font-size: 14px; font-weight: 600; color: var(--o-ink); display: flex; gap: 6px; align-items: center; cursor: pointer; border-radius: 9px; }
.c-undo button:hover:not(:disabled) { background: var(--o-card); }
.c-undo button:disabled { opacity: .3; cursor: default; }
.c-lead { position: absolute; left: 12px; bottom: 12px; margin: 0; max-width: min(440px, 60vw); font-size: 13px; line-height: 1.4; color: var(--o-ink-2, #6B6358); background: var(--o-surface); border: 1.6px solid var(--o-line); border-radius: 12px; padding: 8px 12px; pointer-events: none; }
.c-stage canvas { cursor: grab; }
.c-stage canvas:active { cursor: grabbing; }/* подписи размеров на 3D-модели — navy, как на чертеже: просто число у размерной линии; нажал — вписал своё */
.c-stage .lbl { font-family: "Inter Tight", Arial, sans-serif; border-radius: 0; color: var(--o-navy); border-color: var(--o-navy); }
.c-stage .lbl.rdim, .c-stage .lbl.dim {
  background: none; border: 0; box-shadow: none; padding: 0 2px; color: var(--o-navy); font-weight: 600;
  text-shadow: 0 0 3px var(--o-bg), 0 0 3px var(--o-bg), 0 0 6px var(--o-bg); pointer-events: auto; cursor: text;
}
.c-stage .lbl.rdim { font-size: 16px; }
.c-stage .lbl .t { display: inline-block; transform-origin: 50% 50%; white-space: nowrap; }
.c-stage .lbl.dim { font-size: 14px; }
.c-stage .lbl.rdim:hover, .c-stage .lbl.dim:hover { text-decoration: underline; text-underline-offset: 3px; background: none; }
.c-stage .lbl .dim-input { width: 70px; border-bottom: 1.6px solid var(--o-navy); background: var(--o-surface); text-shadow: none; }
.c-stage .lbl.dim-del { font-size: 13px; border-radius: 10px; }

/* --- телефон: отступы 16 px, логотип и заголовок под фото целиком, карточки шагов в колонку --- */
@media (max-width: 720px) {
  .h-wrap { padding: 16px 16px 64px; }
  .h-head { flex-direction: column; align-items: flex-start; gap: 6px; margin-bottom: 16px; }
  .h-logo { width: 100%; }
  .h-sub { font-size: 12px; padding-bottom: 0; }
  .h-hero { aspect-ratio: 100 / 100; }
  .h-ph1 { width: 78%; height: 58%; }
  .h-ph2 { right: 0; bottom: auto; top: 32%; width: 56%; height: 46%; }
  .h-title-on { width: 100%; max-width: none; font-size: 24px; }
  .h-hero + .h-under { margin-top: 12px; }
  .h-under { margin-bottom: 64px; }
  .h-how { margin: 0 0 28px; }
  .h-row { flex-direction: column; min-width: 0; align-items: stretch; }
  .h-cell::after, .h-cell::before { display: none; }
  .h-upload { padding-top: 72px; }
  .h-progress { gap: 8px; }
  .h-seg { font-size: 11px; }
  .h-drop { padding: 22px; min-height: 300px; }
  .c-top { flex-wrap: wrap; gap: 8px 12px; }
  .c-progress { order: 3; flex: 1 1 100%; }
  .c-titlebar { flex-direction: column; align-items: stretch; gap: 10px; }
  .c-stage { height: calc(100dvh - 230px); min-height: 320px; }
  .c-lead { display: none; }
  .c-tools { top: 56px; }
  .home#screen-confirm.active { overflow: auto; }
}