/* FLATCAT V2 — «Моя квартира». Гибрид по решению владельца 30.10.2026: структура и мягкость экранов — из
   набросков, цвета, кот, шрифты и иконки — из брендбука FLATCAT 2.0 (docs/09_BRAND/FLATCAT_v2). Оранжевый —
   только прогресс и выделение. Mobile first: базовые стили — телефон, шире — расширения. */
@font-face { font-family: 'Unbounded'; src: url('../fonts/Unbounded.ttf') format('truetype'); font-weight: 200 900; font-display: swap; }
@font-face { font-family: 'Golos Text'; src: url('../fonts/GolosText.ttf') format('truetype'); font-weight: 400 900; font-display: swap; }

:root {
  --surface: #F6F4ED; --raised: #FFFFFF; --text: #1F2328; --muted: #5A625E; --line: #E3DFD4; --border: #6E7973;
  --action: #B8FF3C; --on-action: #1F2328; --pressed: #A4E52F; --focus: #527000; --link: #527000;
  --progress: #FF8A3D; --progress-soft: #FFE8D8; --progress-text: #A3470B;
  --ok: #176B45; --ok-soft: #E4F3E9; --danger: #B3261E; --danger-soft: #FCE8E6; --warn: #795000; --warn-soft: #FFF1CC;
  --sand: #F3EAD9; --cyan: #E3F5FA; --violet: #EEEAFE; --graphite: #1F2328;
  --radius: 16px; --radius-lg: 24px; --touch: 48px; --page: 16px;
  --shadow: 0 1px 2px rgba(31,35,40,.06), 0 6px 20px rgba(31,35,40,.06);
  --head: 'Unbounded', system-ui, sans-serif; --body: 'Golos Text', system-ui, sans-serif;
  --fast: 120ms; --std: 200ms;
}
@media (prefers-reduced-motion: reduce) { :root { --fast: 0ms; --std: 0ms; } }

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--surface); color: var(--text); font: 16px/1.45 var(--body); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 8px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }

/* ---------- каркас ---------- */
.app { min-height: 100%; display: flex; flex-direction: column; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px var(--page); }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); }
.logo img { width: 34px; height: 34px; }
.logo b { font: 800 20px/1 var(--head); letter-spacing: .02em; }
.logo b span { color: #6FA80F; }
.logo small { white-space: nowrap; display: block; font-size: 10px; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; margin-top: 3px; }
.icon-btn { width: var(--touch); height: var(--touch); border-radius: 50%; border: 1px solid var(--line); background: var(--raised); display: grid; place-items: center; cursor: pointer; }
/* A-3: правая часть шапки — статус сохранения и ссылка на учётную запись (только у вошедшего); логотип сжимается, шапка не шире экрана */
.topbar .logo { min-width: 0; }
.topbar .logo > span { min-width: 0; overflow: hidden; }
.topbar-end { display: flex; align-items: center; gap: 10px; flex: none; min-width: 0; }
.topbar-end .icon-btn { flex: none; color: var(--text); text-decoration: none; }
.auth-admin { margin-top: 12px; }
.icon-btn svg { width: 22px; height: 22px; }
main { flex: 1; width: 100%; max-width: 560px; margin: 0 auto; padding: 0 var(--page) 96px; }
main.wide { max-width: none; padding: 0; }

h1 { font: 800 28px/1.15 var(--head); margin: 8px 0 8px; letter-spacing: -.01em; }
h2 { font: 700 20px/1.2 var(--head); margin: 0 0 8px; }
.lead { color: var(--muted); margin: 0 0 16px; font-size: 17px; }
.muted { color: var(--muted); }
.small { font-size: 14px; }

/* шаги «1 — 2 — 3» */
.steps { display: flex; align-items: flex-start; gap: 6px; margin: 12px 0 20px; list-style: none; padding: 0; }
.steps li { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; font-size: 13px; color: var(--muted); position: relative; }
.steps li::after { content: ''; position: absolute; top: 18px; left: calc(50% + 24px); right: calc(-50% + 24px); border-top: 2px dotted #C9C4B8; }
.steps li:last-child::after { display: none; }
.steps i { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font: 700 15px var(--head); font-style: normal; background: #ECE8DE; color: var(--muted); margin-bottom: 6px; }
.steps li[aria-current='step'] { color: var(--text); font-weight: 600; }
.steps li[aria-current='step'] i { background: var(--progress); color: #fff; }
.steps li.done i { background: var(--ok-soft); color: var(--ok); }

/* ---------- главный экран ---------- */
.hero { position: relative; padding: 4px 0 8px; }
.hero-art { position: absolute; right: -8px; top: -6px; width: 132px; pointer-events: none; }
.hero h1, .hero .lead { max-width: 64%; }
.choices { display: grid; gap: 12px; }
.choice { color: var(--text); text-decoration: none; display: grid; grid-template-columns: 76px 1fr 40px; align-items: center; gap: 14px; min-height: 104px; padding: 14px 14px 14px 12px; border-radius: var(--radius-lg); border: 1px solid transparent; text-align: left; cursor: pointer; box-shadow: var(--shadow); transition: transform var(--fast), border-color var(--fast); width: 100%; }
.choice:hover { border-color: rgba(31,35,40,.18); }
.choice:active { transform: scale(.985); }
.choice.sand { background: var(--sand); } .choice.cyan { background: var(--cyan); } .choice.violet { background: var(--violet); }
.choice b { display: block; font: 700 18px/1.2 var(--head); }
.choice span { color: var(--muted); font-size: 15px; }
.choice .go { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.75); display: grid; place-items: center; }
.choice img { width: 76px; height: 76px; }
.home-recent { margin-top: 24px; }

/* ---------- кнопки, поля ---------- */
.btn { min-height: var(--touch); padding: 0 20px; border-radius: 999px; border: 1px solid var(--line); background: var(--raised); font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; color: var(--text); }
.btn svg { width: 20px; height: 20px; flex: none; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary { background: var(--action); border-color: var(--action); color: var(--on-action); font: 700 17px var(--head); min-height: 56px; }
.btn-primary:hover:not(:disabled) { background: var(--pressed); }
.btn-dark { background: var(--graphite); border-color: var(--graphite); color: #fff; }
.btn-ghost { background: transparent; border-color: transparent; }
.btn-block { width: 100%; }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; }
.btn-row > .btn { flex: 1; }
.field { display: block; margin: 0 0 14px; }
.field > span { display: block; font-weight: 600; margin-bottom: 6px; }
.input { width: 100%; min-height: 56px; border-radius: var(--radius); border: 1.5px solid var(--line); background: var(--raised); padding: 0 16px; font-size: 18px; }
.input:focus { border-color: var(--focus); outline: none; box-shadow: 0 0 0 3px rgba(82,112,0,.18); }
.search { position: relative; }
.search svg { position: absolute; left: 16px; top: 17px; width: 22px; height: 22px; color: var(--muted); }
.search .input { padding-left: 48px; }
.suggest { list-style: none; margin: 8px 0 0; padding: 0; border-radius: var(--radius); background: var(--raised); box-shadow: var(--shadow); overflow: hidden; }
.suggest button { width: 100%; text-align: left; padding: 14px 16px; background: none; border: 0; border-bottom: 1px solid var(--line); cursor: pointer; min-height: var(--touch); }
.suggest li:last-child button { border-bottom: 0; }
.suggest b { display: block; }
.chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; margin: 0 0 14px; scrollbar-width: none; }
.chip { flex: none; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--raised); cursor: pointer; font-weight: 600; }
.chip[aria-pressed='true'] { background: var(--graphite); color: #fff; border-color: var(--graphite); }
.back { display: inline-flex; align-items: center; gap: 6px; min-height: var(--touch); background: none; border: 0; padding: 0; cursor: pointer; color: var(--muted); font-weight: 600; }

/* карточки */
.card { background: var(--raised); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 16px; }
.card + .card { margin-top: 12px; }
.place { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--radius); background: var(--raised); box-shadow: var(--shadow); margin-bottom: 12px; }
.place b { flex: 1; }
.layout-card { display: grid; grid-template-columns: 132px 1fr; gap: 14px; align-items: start; border: 2px solid transparent; cursor: pointer; }
.layout-card[aria-selected='true'] { border-color: var(--progress); }
.layout-card .thumb { width: 132px; height: 112px; border-radius: 12px; background: var(--surface); overflow: hidden; }
.layout-card h3 { margin: 0; font: 700 17px var(--head); }
.layout-card .area { font: 800 22px var(--head); margin: 2px 0 6px; }
.layout-card ul { margin: 0; padding: 0; list-style: none; color: var(--muted); font-size: 14px; }
.layout-card .actions { grid-column: 1 / -1; }
.badge { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 999px; background: var(--sand); }
.badge.demo { background: var(--warn-soft); color: var(--warn); }
.badge.ok { background: var(--ok-soft); color: var(--ok); }
.badge.pending { background: var(--progress-soft); color: var(--progress-text); }
.note { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--radius); background: var(--warn-soft); color: #4A3500; font-size: 14px; margin: 0 0 14px; }
.note.info { background: #FFF8EC; color: var(--text); border: 1px solid #F3E2C2; }
.note.error { background: var(--danger-soft); color: #5C1410; }
.empty { text-align: center; padding: 24px 8px; }
.empty img { width: 96px; }

/* ---------- план ---------- */
.plan-wrap { position: relative; background: var(--raised); border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow: hidden; touch-action: none; }
.plan-wrap svg { display: block; width: 100%; height: 100%; user-select: none; -webkit-user-select: none; }
.plan-room { stroke: none; }
.plan-wall { fill: #3A3F45; }
.plan-wall-conflict { fill: #EA580C; } /* S8-D: участок с конфликтом правила геометрии /2 */
.plan-hit { stroke: transparent; fill: none; cursor: pointer; }
.plan-wall-sel { stroke: var(--progress); fill: none; stroke-linecap: round; }
.plan-name { font-family: var(--body); font-weight: 600; fill: var(--text); text-anchor: middle; pointer-events: none; }
.plan-area { fill: var(--muted); }
.plan-name-narrow { dominant-baseline: central; }
.plan-door { fill: none; stroke: #8A7F70; }
.plan-window { stroke: #5AA9C9; fill: #E8F7FC; }
.dim-chip { cursor: pointer; }
.dim-chip rect { fill: #fff; stroke: #C9C4B8; }
.dim-chip text { font-family: var(--body); font-weight: 700; fill: var(--text); text-anchor: middle; dominant-baseline: central; }
.dim-chip.pending rect { fill: var(--progress-soft); stroke: var(--progress); }
.dim-chip.pending text { fill: var(--progress-text); }
.dim-chip.sel rect { fill: var(--progress); stroke: var(--progress); }
.dim-chip.sel text { fill: #fff; }
.dim-chip.confirmed rect { fill: var(--ok-soft); stroke: #9BCFB0; }
.dim-chip.implied rect { fill: #F1F5EC; stroke: #C8D8B8; stroke-dasharray: 2 1; }
.plan-tools { position: absolute; right: 10px; top: 10px; display: flex; flex-direction: column; gap: 8px; }
.plan-tools .icon-btn { width: 40px; height: 40px; box-shadow: var(--shadow); }

/* ---------- нижний лист ---------- */
.sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--raised); border-radius: 24px 24px 0 0; box-shadow: 0 -8px 30px rgba(31,35,40,.14); padding: 10px var(--page) calc(16px + env(safe-area-inset-bottom)); max-height: 78vh; overflow: auto; transform: translateY(0); transition: transform var(--std); }
.sheet::before { content: ''; display: block; width: 44px; height: 5px; border-radius: 3px; background: #D9D4C8; margin: 0 auto 10px; }
.sheet h2 { margin-bottom: 2px; }
.sheet-backdrop { position: fixed; inset: 0; background: rgba(31,35,40,.25); z-index: 29; }
.stepper { display: grid; grid-template-columns: 56px 1fr 56px; align-items: center; gap: 8px; background: var(--surface); border-radius: var(--radius); padding: 8px; margin: 12px 0; }
.stepper button { width: 56px; height: 56px; border-radius: 50%; border: 0; background: #fff; font-size: 26px; cursor: pointer; box-shadow: var(--shadow); }
.stepper label { display: flex; align-items: baseline; justify-content: center; gap: 6px; }
.stepper input { width: 100%; max-width: 170px; border: 0; background: transparent; text-align: center; font: 800 34px var(--head); padding: 0; }
.stepper input:focus { outline: none; }
.stepper em { font-style: normal; color: var(--muted); font-weight: 600; }
.src-line { font-size: 14px; color: var(--muted); margin: 0; }
.crop { width: 100%; border-radius: 12px; border: 1px solid var(--line); display: block; margin: 8px 0; background: #fff; }

/* ---------- редактор и результат ---------- */
.editor { display: flex; flex-direction: column; height: calc(100dvh - 72px); }
.editor-stage { position: relative; flex: 1; min-height: 0; padding: 0 var(--page); }
.editor-stage > .plan-wrap, .editor-stage > .view3d { height: 100%; }
.toolbar { display: flex; gap: 6px; padding: 10px var(--page) calc(10px + env(safe-area-inset-bottom)); overflow-x: auto; background: var(--surface); scrollbar-width: none; }
.tool { flex: 1 0 72px; min-height: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border-radius: 16px; border: 1px solid var(--line); background: var(--raised); font-size: 13px; font-weight: 600; cursor: pointer; }
.tool svg { width: 22px; height: 22px; }
.tool[aria-pressed='true'] { background: var(--graphite); color: #fff; border-color: var(--graphite); }
.tool.primary { background: var(--action); border-color: var(--action); }
/* Телефон (S4-D-01): семь кнопок в две строки по четыре, «Готово» — на две клетки; панель не уходит за край экрана. */
@media (max-width: 480px) {
  .toolbar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: visible; }
  .tool { min-width: 0; min-height: 52px; padding: 4px 2px; font-size: 12px; }
  .tool svg { width: 20px; height: 20px; }
  .tool.primary { grid-column: span 2; }
}
.status { font-size: 13px; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.status.err { color: var(--danger); }
.status::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
.status.busy::before { background: var(--progress); }
.status.err::before { background: var(--danger); }
.hint { position: absolute; left: calc(var(--page) + 10px); right: 60px; top: 10px; z-index: 2; display: flex; gap: 8px; align-items: center; padding: 10px 12px; border-radius: 14px; background: #FFF8EC; border: 1px solid #F3E2C2; font-size: 14px; box-shadow: var(--shadow); }
.hint button { margin-left: auto; background: none; border: 0; cursor: pointer; font-size: 18px; color: var(--muted); }
.view3d { position: relative; border-radius: var(--radius-lg); overflow: hidden; background: linear-gradient(#FBFAF6, #EFEBE1); box-shadow: var(--shadow); touch-action: none; }
.view3d canvas { display: block; width: 100%; height: 100%; }
/* вкладки комнат — сверху: внизу переключатель размеров и кнопка Флэткота (S3-D-07) */
.view3d .room-chips { position: absolute; left: 10px; right: 10px; top: 10px; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.view3d .room-chips .chip { background: rgba(255,255,255,.92); }
.view3d .room-chips .chip[aria-pressed='true'] { background: var(--graphite); color: #fff; }
.view3d .fail { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 20px; }
.toggle { display: inline-flex; background: #ECE8DE; border-radius: 999px; padding: 4px; gap: 4px; }
.toggle button { min-height: 44px; padding: 0 20px; border-radius: 999px; border: 0; background: transparent; font-weight: 700; cursor: pointer; }
.toggle button[aria-pressed='true'] { background: var(--action); }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0; }
.stat { background: var(--raised); border-radius: var(--radius); padding: 12px; box-shadow: var(--shadow); }
.stat b { display: block; font: 800 18px var(--head); }
.stat span { font-size: 13px; color: var(--muted); }
.done-view { height: 360px; margin: 0 0 4px; }
.done-head { display: flex; align-items: center; gap: 12px; }
.done-head img { width: 84px; }

/* нижняя навигация */
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; display: flex; justify-content: center; gap: 4px; background: rgba(255,255,255,.96); border-top: 1px solid var(--line); padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); }
.tabbar a { flex: 0 1 140px; display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 52px; justify-content: center; color: var(--muted); text-decoration: none; font-size: 12px; font-weight: 600; border-radius: 12px; }
.tabbar a[aria-current='page'] { color: var(--text); }
.tabbar a[aria-current='page'] svg { color: #6FA80F; }
.tabbar svg { width: 24px; height: 24px; }

.toast { pointer-events: none; position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%); z-index: 50; max-width: calc(100% - 32px); background: var(--graphite); color: #fff; padding: 12px 18px; border-radius: 14px; box-shadow: var(--shadow); font-size: 15px; }
.toast.error { background: var(--danger); }
.dialog { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; background: rgba(31,35,40,.35); padding: 16px; }
.dialog > div { background: var(--raised); border-radius: var(--radius-lg); padding: 20px; max-width: 420px; width: 100%; }
.spinner { width: 44px; height: 44px; border-radius: 50%; border: 4px solid #E3DFD4; border-top-color: var(--progress); animation: spin 0.9s linear infinite; margin: 24px auto; }
@keyframes spin { to { transform: rotate(360deg); } }
.progress-list { list-style: none; padding: 0; margin: 12px 0; }
.progress-list li { padding: 8px 0 8px 28px; position: relative; color: var(--muted); }
.progress-list li.done { color: var(--text); }
.progress-list li.done::before { content: '✓'; position: absolute; left: 0; color: var(--ok); font-weight: 800; }
.progress-list li.now::before { content: '•'; position: absolute; left: 6px; color: var(--progress); font-weight: 800; }
.upload-drop { display: grid; place-items: center; gap: 8px; text-align: center; min-height: 220px; border: 2px dashed #C9C4B8; border-radius: var(--radius-lg); background: var(--raised); padding: 24px; cursor: pointer; }
.upload-drop img { width: 88px; }
.preview { width: 100%; border-radius: var(--radius); background: #fff; box-shadow: var(--shadow); display: block; }
.shape-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 14px; }
.shape { min-height: 120px; border-radius: var(--radius); border: 2px solid transparent; background: var(--raised); box-shadow: var(--shadow); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; cursor: pointer; font-weight: 600; }
.shape[aria-pressed='true'] { border-color: var(--progress); }
.shape svg { width: 64px; height: 52px; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.list-project { display: grid; grid-template-columns: 88px 1fr; gap: 12px; align-items: center; text-decoration: none; color: inherit; }
.list-project .thumb { width: 88px; height: 72px; border-radius: 10px; background: var(--surface); }

/* ---------- планшет и десктоп ---------- */
@media (min-width: 768px) {
  :root { --page: 24px; }
  h1 { font-size: 36px; }
  main { max-width: 760px; }
  .hero-art { width: 190px; right: 0; }
  .choices { grid-template-columns: 1fr; }
  .editor { flex-direction: row; height: calc(100dvh - 72px); }
  .editor-stage { padding-bottom: 16px; }
  .toolbar { flex-direction: column; width: 108px; padding: 0 16px 16px 0; overflow: visible; }
  .tool { flex: none; }
  .tabbar { display: none; }
  main { padding-bottom: 32px; }
  .sheet { left: auto; right: 24px; bottom: 24px; width: 400px; border-radius: 24px; }
  .done-view { height: 460px; }
}
@media (min-width: 1280px) {
  main { max-width: 1040px; }
  .home-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; min-height: 70vh; }
  .hero h1 { font-size: 44px; max-width: none; }
  .hero .lead { max-width: none; }
  .hero-art { position: static; width: 190px; display: block; margin: 0 0 8px; }
  .layouts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .layouts .card + .card { margin-top: 0; }
  .done-wrap { display: grid; grid-template-columns: 1.5fr 1fr; gap: 24px; }
  .done-view { height: 560px; }
}
.mt { margin-top: 16px; }
.block-link { display: block; text-decoration: none; color: inherit; }
.upload-stage { position: relative; padding: 8px; }
.upload-stage .preview { width: 100%; height: auto; box-shadow: none; }
.upload-overlay { position: absolute; inset: 8px; width: calc(100% - 16px); height: calc(100% - 16px); touch-action: none; }
.upload-overlay .handle { cursor: grab; }
.ok-note { background: var(--ok-soft); border-color: #B9DFC8; color: var(--ok); }
.check-plan { margin-bottom: 4px; }
.check-plan .plan-wrap { height: 100%; }
.done-view > .plan-wrap, .done-view > .view3d { height: 100%; }
details summary { cursor: pointer; font-weight: 600; min-height: 40px; display: flex; align-items: center; }
button.card { border: 0; font: inherit; text-align: left; cursor: pointer; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: space-between; }
@media (max-width: 400px) { .status { font-size: 12px; } .logo small { letter-spacing: .04em; } }

.plan-wall-cand { stroke: var(--progress); stroke-opacity: .6; fill: none; pointer-events: none; }
.dim-chip.op rect { fill: #EEF7FB; stroke: #9CC9DA; }
.dim-chip.op.pending rect { fill: var(--progress-soft); stroke: var(--progress); }

.room-check h2 { margin-bottom: 2px; }
.dim-list { list-style: none; margin: 10px 0; padding: 0; display: grid; gap: 6px; }
.dim-row { width: 100%; min-height: 48px; display: grid; grid-template-columns: 1fr auto 24px; align-items: center; gap: 10px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--progress); background: var(--progress-soft); cursor: pointer; text-align: left; font: inherit; }
.dim-row b { font: 700 17px var(--head); }
.dim-row svg { width: 18px; height: 18px; color: var(--progress-text); }

.upload-stage { display: flex; justify-content: center; }
.upload-frame { position: relative; display: inline-block; max-width: 100%; }
.upload-frame .preview { display: block; max-width: 100%; max-height: min(62vh, 640px); width: auto; height: auto; }
.upload-frame .upload-overlay { inset: 0; width: 100%; height: 100%; }
.sticky-action { position: sticky; bottom: 76px; z-index: 5; box-shadow: var(--shadow); }
@media (min-width: 768px) { .sticky-action { bottom: 16px; } }

main:focus, main:focus-visible { outline: none; }
.sheet .chips { flex-wrap: wrap; overflow: visible; }
.hint { right: 72px; }
.confirm-plan { height: min(52vh, 460px); margin-bottom: 12px; }
.confirm-plan > .plan-wrap { height: 100%; }
.sticky-action-row { position: sticky; bottom: 76px; z-index: 5; background: var(--surface); padding: 8px 0; }
@media (min-width: 768px) { .sticky-action-row { bottom: 0; } }
.room-preview-box { background: var(--surface); border-radius: var(--radius); margin: 0 0 14px; }
.room-preview { display: block; width: 100%; height: 150px; }
.pv-dim { font: 600 11px var(--body); fill: var(--muted); text-anchor: middle; }

/* ---------- помощник «Спросите Флэткота» (этап 1.6) ---------- */
.assistant { position: fixed; left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); z-index: 20; max-height: min(72dvh, 620px); display: flex; flex-direction: column; background: var(--raised); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: 0 8px 40px rgba(31,35,40,.18); }
.assistant[hidden] { display: none; }
.assistant-head { display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 14px; border-bottom: 1px solid var(--line); }
.assistant-head > div { flex: 1; min-width: 0; }
.assistant-head b { display: block; font: 700 16px/1.2 var(--head); }
.assistant-head small { color: var(--muted); font-size: 12px; }
.assistant-mark { width: 32px; height: 32px; }
.assistant-log { flex: 1; min-height: 120px; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; overscroll-behavior: contain; }
.assistant-chips { flex-wrap: wrap; overflow: visible; }
.msg { max-width: 88%; padding: 10px 12px; border-radius: 16px; font-size: 15px; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg.bot { background: var(--surface); align-self: flex-start; border-bottom-left-radius: 6px; }
.msg.me { background: var(--graphite); color: #fff; align-self: flex-end; border-bottom-right-radius: 6px; }
.msg.err { background: var(--danger-soft); color: #5C1410; }
.msg.wait { color: var(--muted); }
.proposal { border: 1.5px solid var(--progress); background: #FFFBF6; border-radius: var(--radius); padding: 12px; display: flex; flex-direction: column; gap: 6px; }
.proposal > b { font: 700 15px/1.3 var(--head); }
.proposal-diff { font-size: 15px; } .proposal-diff s { color: var(--muted); }
.proposal-warn { margin: 0; font-size: 13px; color: var(--warn); }
.proposal .btn-row { display: flex; flex-wrap: wrap; gap: 6px; }
.proposal .btn { min-height: 44px; padding: 0 14px; font-size: 15px; }
.proposal .btn-primary { font-size: 15px; min-height: 44px; }
.proposal-state { margin: 0; font-size: 14px; color: var(--muted); } .proposal-state.ok { color: var(--ok); } .proposal-state.err { color: var(--danger); }
.assistant-form { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--line); }
.assistant-form .input { min-height: 48px; font-size: 16px; }
.assistant-form .btn-primary { min-height: 48px; width: 56px; padding: 0; flex: none; }
.ai-fab { position: absolute; right: calc(var(--page) + 10px); bottom: 12px; z-index: 3; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 18px 0 14px; border-radius: 999px; border: 0; background: var(--graphite); color: #fff; font: 700 15px var(--head); box-shadow: 0 6px 20px rgba(31,35,40,.25); cursor: pointer; }
.ai-fab svg { width: 22px; height: 22px; color: var(--action); }
.ai-fab[hidden], .ai-fab[aria-pressed='true'] { display: none; }
@media (min-width: 1024px) {
  .assistant { position: relative; z-index: 31; width: 360px; flex: none; max-height: none; margin: 0 16px 16px 0; box-shadow: var(--shadow); }
}
/* S3-D-05: карточка стены или комнаты и Флэткот не перекрываются. Планшет и десктоп: карточка редактора — слева
   снизу, Флэткот, его кнопка и инструменты — справа; кнопка и колонка Флэткота — над затемнением карточки, поэтому
   нажатие попадает в них, а выбор стены сохраняется. Узкий экран (< 1024): панель Флэткота и карточка — по очереди. */
@media (min-width: 768px) {
  body:has(.editor) .sheet { left: 24px; right: auto; width: min(400px, calc(100vw - 460px)); } /* правее — кнопка Флэткота */
  .ai-fab { z-index: 31; }
}
@media (max-width: 1023px) { body:has(.sheet) .assistant { display: none; } }
/* S8-D: открытый Флэткот не закрывает «Готово» и панель инструментов. Планшет (768–1023): инструменты — колонка
   справа, панель Флэткота встаёт левее неё.
   S9-C: телефон (≤ 767): план и Флэткот — по очереди на всю высоту редактора (переключатель «План / Флэткот»), а не
   план полосой ≈90 px над панелью. Обе панели лежат в одной клетке сетки: скрытая панель не удаляется и не меняет
   размеры другой — масштаб и положение плана, выбор, введённый текст и история Флэткота сохраняются. Инструменты с
   «Готово» — всегда под ними. */
.pane-switch { display: none; }
@media (max-width: 767px) {
  .editor { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; }
  .editor > .pane-switch { grid-row: 1; }
  .editor > .editor-stage, .editor > .assistant { grid-row: 2; grid-column: 1; }
  .editor > .toolbar { grid-row: 3; }
  .editor.with-assistant > .pane-switch { display: flex; gap: 6px; padding: 4px var(--page) 6px; }
  .pane-switch .chip { flex: 1; min-height: 40px; justify-content: center; }
  .editor > .assistant { position: relative; left: auto; right: auto; bottom: auto; min-height: 0; max-height: none; margin: 0 var(--page); box-shadow: var(--shadow); }
  .editor.with-assistant[data-pane='plan'] > .assistant { display: none; }
  .editor.with-assistant[data-pane='assistant'] > .editor-stage { visibility: hidden; }
  /* лист (карточка, отчёт) открыт поверх: Флэткот уступает место (правило выше), план под листом виден */
  body:has(.sheet) .editor.with-assistant[data-pane='assistant'] > .editor-stage { visibility: visible; }
}
@media (min-width: 768px) and (max-width: 1023px) { .editor > .assistant { right: calc(108px + 16px); } }
.editor.is-3d .dim-modes { display: none; } /* в 3D размеры плана не переключаются (S3-D-07) */
/* ---------- панель аналитики AI ---------- */
.admin-table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 8px 0 16px; }
.admin-table th, .admin-table td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--line); vertical-align: top; }
.admin-table td.num, .admin-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.admin-scroll { overflow-x: auto; }

/* ---------- библиотека типовых квартир (docs/25) ---------- */
.room-picker { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 8px 0 16px; }
.room-card { min-height: 104px; border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--raised); box-shadow: var(--shadow); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; cursor: pointer; transition: transform var(--fast); }
.room-card b { font: 800 40px/1 var(--head); }
.room-card span { color: var(--muted); font-size: 14px; }
.room-card:active { transform: scale(.97); }
.area-picker { display: flex; flex-direction: column; gap: 8px; }
.area-value { font: 800 40px/1.1 var(--head); text-align: center; }
.area-picker input[type=range] { width: 100%; height: 44px; accent-color: #6FA80F; }
.tpl-list { display: grid; gap: 12px; }
.tpl-card { display: grid; grid-template-columns: 1fr; gap: 10px; }
.tpl-thumb { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; background: #fff; border-radius: 12px; border: 1px solid var(--line); }
.tpl-card h3 { margin: 0; font: 700 17px var(--head); }
.tpl-card .area { font: 800 22px var(--head); }
.tpl-features { margin: 6px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.tpl-features li { font-size: 13px; padding: 3px 9px; border-radius: 999px; background: var(--sand); }
.tpl-big { width: 100%; height: auto; max-height: 56vh; object-fit: contain; background: #fff; border-radius: var(--radius); border: 1px solid var(--line); }
.ai-match-log { display: flex; flex-direction: column; gap: 8px; margin: 8px 0; }
.ai-match .assistant-form { padding: 0; border: 0; }
.home-alt { margin-top: 4px; flex-wrap: wrap; }
@media (min-width: 768px) {
  .tpl-card { grid-template-columns: 280px 1fr; align-items: start; }
  .tpl-card .btn { grid-column: 2; }
}

/* ---------- размерные цепочки (docs/26_QUALITY_LAB/DIMENSION_SYSTEM) ---------- */
.dim-line, .dim-ext { stroke: #5A625E; fill: none; }
.dim-tick { stroke: #1F2328; }
.dim-dot { fill: #5A625E; }
.dim-label text { fill: #1F2328; font-family: var(--body); font-weight: 600; paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linejoin: round; }
.dim-label.pending text { fill: var(--progress-text); }
.dim-label.derived text { fill: #5A625E; font-weight: 500; }
.dim-label.sel text { fill: #527000; }
.dim-label.k-total text { font-weight: 700; }
.dim-label[data-dim] { cursor: pointer; }
.dim-hit { fill: transparent; }
.lvl-D .dim-line { stroke: #527000; }
.dim-total { fill: #527000; font-weight: 700; }
.dim-modes { position: absolute; left: calc(var(--page) + 10px); bottom: 12px; z-index: 3; display: flex; gap: 6px; flex-wrap: wrap; max-width: calc(100% - 260px); }
.dim-modes .chip { min-height: 36px; padding: 0 12px; font-size: 13px; box-shadow: var(--shadow); }
@media (max-width: 767px) { .dim-modes { bottom: 70px; max-width: calc(100% - 40px); } }

/* ---------- печатный план ---------- */
.print-view { max-width: 1180px; margin: 0 auto; padding: 0 var(--page) 32px; }
.print-view .chips { flex-wrap: wrap; margin: 8px 0; }
.print-sheet { background: #fff; border-radius: var(--radius); padding: 16px; margin-top: 12px; box-shadow: var(--shadow); }
.print-head h1 { font-size: 22px; margin: 0; }
.print-plan { height: min(70vh, 720px); }
.print-plan > .plan-wrap { height: 100%; }
@media print {
  @page { size: A4 landscape; margin: 10mm; }
  .topbar, .tabbar, .print-hide, .plan-tools { display: none !important; }
  body, .print-sheet { background: #fff; box-shadow: none; }
  .print-plan { height: 170mm; }
}

/* Телефон: нижняя панель вкладок фиксирована — редактор не должен уходить под неё (Quality Lab, UX). */
@media (max-width: 767px) { .editor { height: calc(100dvh - 72px - 66px - env(safe-area-inset-bottom)); } }
.conflict-host:not([hidden]) { margin: 0 0 12px; }
.conflict-box .btn-row { flex-wrap: wrap; margin-top: 8px; }

/* ---------- масштаб по отрезку (PDD3-SCALE, screens/upload.js → stageScale) ---------- */
.scale-overlay { cursor: crosshair; }
.scale-overlay .handle.sel .dot { stroke: var(--text); }
.scale-lbl { paint-order: stroke; stroke: #fff; stroke-linejoin: round; font-weight: 600; font-family: var(--body); }
.scale-loupe { position: fixed; z-index: 30; width: 132px; height: 132px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 2px 10px rgba(0,0,0,.35); pointer-events: none; background: #fff; }
.scale-panel { margin-top: 12px; min-width: 0; }
.scale-panel > .card + .card, .scale-panel > .scale-card { margin-top: 10px; }
.scale-card { padding: 12px 14px; overflow-wrap: anywhere; }
.scale-card .field-label { display: block; font-weight: 600; margin-bottom: 6px; }
.scale-row { display: flex; gap: 8px; align-items: stretch; }
.scale-row .input { flex: 1; min-width: 0; }
.scale-row .btn { flex: none; min-height: 56px; }
.scale-err { color: var(--danger); font-size: 14px; margin: 6px 0 0; }
.scale-err:empty { display: none; }
.scale-verdict { border-radius: var(--radius); padding: 12px 14px; margin-top: 10px; overflow-wrap: anywhere; }
.scale-verdict.ok { background: var(--ok-soft); color: var(--ok); }
.scale-verdict.bad { background: var(--danger-soft); color: var(--danger); }
.scale-verdict b { font-size: 17px; }
.scale-verdict p { margin: 4px 0 0; color: var(--text); }
.scale-panel .btn-ghost { margin-top: 6px; text-decoration: underline; color: var(--link); white-space: normal; }

/* ---------- отчёт обработчика VISION (S5, screens/import_report.js) ---------- */
.import-report.incomplete { border-left: 4px solid var(--progress); }
.import-report .import-head { font-weight: 600; margin-top: 10px; }
.import-list { margin: 4px 0 0; padding-left: 20px; }
.import-list li + li { margin-top: 2px; }
details.import-report > summary { cursor: pointer; }
details.import-report[open] > summary { margin-bottom: 6px; }
.import-pill { position: absolute; left: calc(var(--page) + 10px); top: 10px; z-index: 1; max-width: calc(100% - 2 * var(--page) - 72px); min-height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--raised); color: var(--text); font: 600 13px var(--body); box-shadow: var(--shadow); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.import-pill.incomplete { background: var(--warn-soft); border-color: #F3E2C2; color: var(--warn); }
.editor.is-3d .import-pill { display: none; }
/* S8-D: конфликт правила геометрии /2 — кнопка над планом; под кнопкой отчёта импорта, если она есть */
.conflict-pill { position: absolute; left: calc(var(--page) + 10px); top: 10px; z-index: 1; max-width: calc(100% - 2 * var(--page) - 72px); min-height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid #F5C7A9; background: #FFF1E8; color: #9A3412; font: 600 13px var(--body); box-shadow: var(--shadow); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conflict-pill[hidden] { display: none; }
.import-pill ~ .conflict-pill { top: 54px; }
.editor.is-3d .conflict-pill { display: none; }
/* S6-F: проблемы полноты квартиры — кнопка «Показать на плане» и подсветка области на плане (plan.js, state.issueRegion) */
.import-src { margin: 6px 0 2px; }
.import-src-svg { display: block; width: 100%; max-width: 360px; max-height: 220px; border: 1px solid var(--line); border-radius: 8px; background: var(--raised); }
.import-list .import-show { min-height: 36px; padding: 0; text-decoration: underline; color: var(--link); }
.plan-issue { fill: #E07B14; fill-opacity: .28; stroke: #E07B14; stroke-linejoin: round; pointer-events: none; }
/* S7-C: исправление находок полноты — кнопки в отчёте и варианты в листе исправления (fix/ui.js) */
.import-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 4px; }
.import-list .import-fix { min-height: var(--touch); padding: 0 18px; }
.fix-option { margin-top: 12px; }
.fix-option .muted.small { margin-top: 4px; }
.sheet .fix-head { font-size: 16px; margin: 16px 0 6px; }
/* S9-D/S9-C: правило геометрии над редактором — две раздельные плашки и кнопка копии по /2 (fix/rule_upgrade.js) в одну
   строку постоянной высоты; длинный текст прокручивается вбок внутри строки. Высота строки вычтена из высоты редактора,
   поэтому на 390 px «Готово» и переключатель «План / Флэткот» остаются на экране. */
.editor-meta { display: flex; align-items: center; gap: 6px; height: 44px; padding: 0 var(--page); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; white-space: nowrap; }
.editor-meta:empty { display: none; }
.editor-meta .rule-badges { display: flex; gap: 6px; flex: none; }
.editor-meta .note { margin: 0; padding: 0 10px; min-height: 32px; align-items: center; border-radius: 999px; font-size: 12px; white-space: nowrap; }
.editor-meta .rule-copy { flex: none; min-height: 32px; padding: 0 12px; font-size: 12px; }
.editor-meta:not(:empty) + .editor { height: calc(100dvh - 72px - 44px); }
@media (max-width: 767px) { .editor-meta:not(:empty) + .editor { height: calc(100dvh - 72px - 66px - env(safe-area-inset-bottom) - 44px); } }
.editor-meta .note.ok { background: var(--ok-soft); border: 1px solid #B9DFC8; color: var(--ok); }
.editor-meta .note.muted { background: var(--raised); border: 1px solid var(--line); color: var(--muted); }