/* app.css — вид окна Price в стиле «Мастерская» Kubitt (одобрен владельцем): графит, латунь, Cormorant Garamond в заголовках,
   Golos Text в тексте. Токены --ks-* — те же цифры, что в C:/Dev/cabinetbuilder_web/app/js/simple/simple.css.
   Раскладка: слева колонка clamp(380px, 34vw, 560px) — шапка, вкладки, содержимое, итоги; справа — светлое окно сцены.
   Всё помещается в экран от 1280×720 до 4K; прокручиваются только ленты (чат, таблица, прайс, полоска файлов).
   Шрифты — свои, с нашего сервера (GDPR: чужой сервер шрифтов не подключаем), лицензия SIL OFL — web/fonts/OFL.txt. */

@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:500 600;font-display:swap;src:url('../fonts/cormorant-garamond-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:500 600;font-display:swap;src:url('../fonts/cormorant-garamond-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:500 600;font-display:swap;src:url('../fonts/cormorant-garamond-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:400 700;font-display:swap;src:url('../fonts/golos-text-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:400 700;font-display:swap;src:url('../fonts/golos-text-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:400 700;font-display:swap;src:url('../fonts/golos-text-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* ── ТОКЕНЫ «Мастерской» (цифры Kubitt) + свои для инструмента ── */
:root {
  --ks-bg: #141518; --ks-s1: #1D1F23; --ks-s2: #25282D; --ks-s3: #2E3137;
  --ks-ink: #EEEAE3; --ks-ink2: #9A968F; --ks-ink-soft: #CFCAC2; --ks-line: rgba(255,255,255,.08); --ks-line2: rgba(255,255,255,.14);
  --ks-acc: #C9A26A; --ks-acc-hi: #D3AE78; --ks-on-acc: #1A1B1E; --ks-ok: #7FB08A; --ks-win: #F1EDE7; --ks-win-hint: #6C665E;
  --ks-acc-soft: rgba(201,162,106,.14); --ks-acc-line: rgba(201,162,106,.45); --ks-acc-tile: rgba(201,162,106,.16);
  --ks-bar: rgba(24,25,28,.92); --ks-bar-shadow: 0 10px 30px rgba(0,0,0,.35);
  --ks-win-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 24px 60px rgba(0,0,0,.45);
  --ks-serif: 'Cormorant Garamond', Georgia, serif;
  --ks-sans: 'Golos Text', 'Segoe UI', system-ui, sans-serif;
  --warn: #E4A574; --warn-soft: rgba(228,165,116,.13); --err: #E07A6A; --err-soft: rgba(224,122,106,.14); --rec: #E0675A;
  --col: clamp(380px, 34vw, 560px);
  --pad: 18px;
  color-scheme: dark;
}

* , *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--ks-bg); color: var(--ks-ink);
  font: 400 13.5px/1.45 var(--ks-sans);
  -webkit-font-smoothing: antialiased; overflow: hidden;
}
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; margin: 0; }
button:disabled { cursor: default; }
:focus-visible { outline: 2px solid var(--ks-acc); outline-offset: 2px; }
[hidden] { display: none !important; }
svg { display: block; flex: none; }
.serif { font-family: var(--ks-serif); font-weight: 600; letter-spacing: .01em; }
.grow { flex: 1 1 auto; min-width: 0; }
.muted { color: var(--ks-ink2); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.scroll { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.14) transparent; }
.scroll-x { overflow-x: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.12) transparent; }
.scroll::-webkit-scrollbar, .scroll-x::-webkit-scrollbar { width: 8px; height: 6px; }
.scroll::-webkit-scrollbar-thumb, .scroll-x::-webkit-scrollbar-thumb { background: rgba(255,255,255,.13); border-radius: 4px; }
@keyframes ks-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes ks-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes ring { 0% { box-shadow: 0 0 0 0 rgba(224,103,90,.45); } 100% { box-shadow: 0 0 0 12px rgba(224,103,90,0); } }
@keyframes flash { 0% { background: rgba(201,162,106,.34); } 100% { background: var(--ks-acc-soft); } }

/* ── КНОПКИ И ПОЛЯ ── */
.btn { height: 36px; padding: 0 14px; border-radius: 11px; border: 1px solid var(--ks-line); background: var(--ks-s1); color: var(--ks-ink);
  font-weight: 600; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; white-space: nowrap; transition: background .15s, border-color .15s; }
.btn:not(:disabled):hover { background: var(--ks-s2); }
.btn:disabled { opacity: .45; }
.btn[aria-busy="true"] { cursor: progress; opacity: .7; }
.btn-primary { background: var(--ks-acc); color: var(--ks-on-acc); border-color: transparent; font-weight: 700; }
.btn-primary:not(:disabled):hover { background: var(--ks-acc-hi); }
.btn-outline { border-color: rgba(201,162,106,.5); color: var(--ks-acc); background: transparent; }
.btn-outline:not(:disabled):hover { background: rgba(201,162,106,.08); }
.btn-ghost { background: transparent; }
.btn-ghost:not(:disabled):hover { background: rgba(255,255,255,.05); }
.btn-danger { background: #B9584B; border-color: transparent; color: #fff; }
.btn-danger:not(:disabled):hover { background: #C8665A; }
.btn-sm { height: 30px; padding: 0 10px; border-radius: 9px; font-size: 12.5px; gap: 5px; }
.btn-lg { height: 46px; font-size: 14.5px; border-radius: 13px; }
.icon-btn { width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; color: var(--ks-ink2); flex: none; }
.icon-btn:hover { background: rgba(255,255,255,.06); color: var(--ks-ink); }
.icon-btn.sm { width: 28px; height: 28px; border-radius: 8px; }
.icon-btn.danger:hover { color: var(--err); background: var(--err-soft); }
.linkish { color: var(--ks-acc); text-decoration: underline; text-underline-offset: 2px; font-weight: 600; }
.chip { height: 26px; padding: 0 9px; border-radius: 13px; background: var(--ks-s2); color: var(--ks-ink-soft); font-size: 12px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; border: 1px solid transparent; }
.chip:hover { border-color: var(--ks-line2); }
.chip svg { color: var(--ks-ink2); }
.chip.on { background: var(--ks-acc-soft); border-color: var(--ks-acc-line); color: var(--ks-ink); }
.chip-warn { background: var(--warn-soft); color: #EDC39E; }
.chip-warn svg { color: var(--warn); }
.chip-err { background: var(--err-soft); color: #F0B0A5; }
.chip-err svg { color: var(--err); }
.inp { width: 100%; background: var(--ks-s1); border: 1px solid var(--ks-line); border-radius: 12px; padding: 0 12px; height: 42px; color: var(--ks-ink); outline: none; font-size: 14px; }
.inp::placeholder { color: var(--ks-ink2); opacity: 1; }
.inp:focus { border-color: var(--ks-acc-line); }
.inp:focus-visible { outline: 2px solid var(--ks-acc); outline-offset: 1px; }
textarea.inp { height: auto; padding: 10px 12px; resize: vertical; line-height: 1.45; }
textarea.inp.msg-in { resize: none; }
select.inp { padding: 0 8px; }
.inp.sm { height: 32px; border-radius: 9px; padding: 0 9px; font-size: 13px; }
.inp.num { text-align: right; font-variant-numeric: tabular-nums; }
.inp.missing::placeholder { color: var(--warn); }
.inp.bad, .cell-in.bad { border-color: var(--err) !important; }
.spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255,255,255,.18); border-top-color: var(--ks-acc); animation: spin .8s linear infinite; display: inline-block; flex: none; }
.spin.sm { width: 13px; height: 13px; border-width: 1.8px; }
.spin.xs { width: 11px; height: 11px; border-width: 1.6px; }

/* переключатель («Отвечать голосом», «свои коэффициенты») */
.switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 12.5px; color: var(--ks-ink-soft); user-select: none; position: relative; white-space: nowrap; }
.sw-in { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sw { width: 32px; height: 18px; border-radius: 9px; background: var(--ks-s3); border: 1px solid var(--ks-line2); position: relative; transition: background .18s; flex: none; }
.sw::after { content: ''; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--ks-ink2); transition: transform .18s, background .18s; }
.sw-in:checked + .sw { background: var(--ks-acc); border-color: transparent; }
.sw-in:checked + .sw::after { transform: translateX(14px); background: var(--ks-on-acc); }
.sw-in:focus-visible + .sw { outline: 2px solid var(--ks-acc); outline-offset: 2px; }

/* ── РАСКЛАДКА ── */
.app { position: fixed; inset: 0; display: grid; grid-template-columns: var(--col) minmax(0, 1fr); }
.side { display: flex; flex-direction: column; min-height: 0; min-width: 0; border-right: 1px solid var(--ks-line); background: var(--ks-bg); container: side / inline-size; }
.stage { min-width: 0; min-height: 0; padding: 14px 14px 14px 14px; display: flex; }

/* шапка */
.head { display: flex; align-items: center; gap: 10px; padding: 14px var(--pad) 10px; min-width: 0; flex: none; }
.logo { font-size: 27px; line-height: 1; padding: 2px 0 4px; flex: none; color: var(--ks-ink); }
.logo::after { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--ks-acc); margin-left: 3px; vertical-align: 2px; }
.sep { width: 1px; height: 26px; background: var(--ks-line); flex: none; }
.proj { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.proj-title { background: transparent; border: 1px solid transparent; border-radius: 8px; padding: 2px 6px; margin: -2px -6px; font-weight: 600; font-size: 14px; color: var(--ks-ink);
  text-overflow: ellipsis; outline: none; min-width: 0; }
.proj-title:hover { border-color: var(--ks-line); }
.proj-title:focus { border-color: var(--ks-acc-line); background: var(--ks-s1); }
.save-st { font-size: 11.5px; color: var(--ks-ink2); display: flex; align-items: center; gap: 5px; min-height: 17px; white-space: nowrap; overflow: hidden; }
.save-st[data-tone="ok"] svg { color: var(--ks-ok); }
.save-st[data-tone="err"] { color: #F0B0A5; }
.save-st[data-tone="err"] svg { color: var(--err); }
.mock-badge { display: none; height: 22px; padding: 0 9px; border-radius: 11px; background: #2A2620; border: 1px solid var(--ks-acc-line); color: var(--ks-acc); font-size: 11.5px; font-weight: 700; align-items: center; flex: none; }
.is-mock .mock-badge { display: inline-flex; }

/* вкладки — сегменты, как шаги «Мастерской» */
.tabs { display: flex; gap: 4px; padding: 4px; margin: 0 var(--pad) 10px; border-radius: 14px; background: var(--ks-s1); border: 1px solid var(--ks-line); flex: none; }
.tab { flex: 1 1 auto; min-width: 0; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 13px; font-weight: 500;
  color: var(--ks-ink2); border: 1px solid transparent; white-space: nowrap; padding: 0 8px; }
.tab > span:not(.tab-badge) { overflow: hidden; text-overflow: ellipsis; }
.tab:hover { color: var(--ks-ink); }
.tab[aria-selected="true"] { background: var(--ks-acc-soft); border-color: var(--ks-acc-line); color: var(--ks-ink); font-weight: 700; }
.tab[aria-selected="true"] svg { color: var(--ks-acc); }
.tab-badge { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--warn); color: var(--ks-on-acc); font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.panels { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.panel { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.panel > section { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }

/* итоги и скачивание — всегда внизу колонки */
.foot { flex: none; border-top: 1px solid var(--ks-line); padding: 10px var(--pad) 14px; display: flex; flex-direction: column; gap: 10px; background: linear-gradient(180deg, rgba(29,31,35,.5), rgba(20,21,24,0)); }
.totals { display: flex; align-items: flex-end; gap: 12px; }
.tot { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 0; }
.tot.client { align-items: flex-end; text-align: right; }
.tl { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ks-ink2); font-weight: 600; }
.tv { font-family: var(--ks-serif); font-size: 25px; font-weight: 600; line-height: 1.05; font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.tot.client .tv { color: var(--ks-acc); }
.dl { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dl .btn { min-width: 0; padding: 0 10px; }
.dl .btn span { overflow: hidden; text-overflow: ellipsis; }

/* ── РАЗГОВОР ── */
.chat { min-height: 0; }
.files { display: flex; align-items: center; gap: 8px; padding: 0 var(--pad) 8px; flex: none; min-width: 0; }
.file-add { height: 48px; padding: 0 12px; border-radius: 12px; border: 1.5px dashed var(--ks-acc-line); color: var(--ks-acc); display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 12.5px; flex: none; }
.file-add:hover { background: rgba(201,162,106,.07); }
.files-row { display: flex; gap: 6px; min-width: 0; flex: 1 1 auto; padding: 2px 0 4px; }
.files-empty { font-size: 12px; color: var(--ks-ink2); line-height: 1.35; align-self: center; }
.fchip { position: relative; display: flex; align-items: center; gap: 8px; height: 48px; width: 172px; flex: none; padding: 4px 8px 4px 4px; border-radius: 12px; background: var(--ks-s1); border: 1px solid var(--ks-line); }
.fchip.pend { border-color: var(--ks-acc-line); box-shadow: inset 0 0 0 1px rgba(201,162,106,.18); }
.fchip.up { opacity: .7; }
.fthumb { width: 38px; height: 38px; border-radius: 8px; overflow: hidden; background: var(--ks-s2); flex: none; display: flex; align-items: center; justify-content: center; }
.fthumb img { width: 100%; height: 100%; object-fit: cover; display: block; background: var(--ks-win); }
.ficon { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: var(--ks-acc); }
.ficon b { position: absolute; bottom: 2px; left: 0; right: 0; text-align: center; font-size: 8px; letter-spacing: .04em; color: var(--ks-ink2); }
.ficon.k-pdf { color: #E08A78; }
.fmeta { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.fname { font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fsize { font-size: 11px; color: var(--ks-ink2); }
.facts { position: absolute; right: 4px; top: 4px; display: flex; gap: 2px; opacity: 0; transition: opacity .15s; background: var(--ks-s1); border-radius: 8px; padding: 1px; }
.fchip:hover .facts, .fchip:focus-within .facts { opacity: 1; }
.fact { width: 24px; height: 24px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; color: var(--ks-ink2); }
.fact:hover { background: var(--ks-s2); color: var(--ks-ink); }
.fact.on { color: var(--ks-acc); }
.fact.danger:hover { color: var(--err); }
.fchip.pend .facts { opacity: 1; background: transparent; }
.fchip.pend .fact.danger { display: none; }
.fchip.pend:hover .fact.danger { display: inline-flex; }

.feed { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 14px; padding: 8px var(--pad) 14px; }
.feed > :first-child { margin-top: auto; }
.msg { display: flex; gap: 10px; align-items: flex-start; animation: ks-in .28s ease-out both; min-width: 0; }
.msg time { display: block; font-size: 10.5px; color: var(--ks-ink2); opacity: .75; margin-top: 4px; }
.msg.user { flex-direction: column; align-items: flex-end; }
.msg.user .bubble { max-width: 88%; background: var(--ks-s2); border: 1px solid var(--ks-line); border-radius: 16px 16px 5px 16px; padding: 9px 13px; }
.msg.user .txt { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13.5px; line-height: 1.5; user-select: text; }
.mfiles { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.msg.user .txt + .mfiles { margin-top: 8px; }
.mfiles:first-child { margin-top: 0; }
.mfile { display: flex; align-items: center; gap: 6px; max-width: 200px; height: 40px; padding: 3px 9px 3px 3px; border-radius: 10px; background: rgba(0,0,0,.18); border: 1px solid var(--ks-line); font-size: 11.5px; color: var(--ks-ink-soft); }
.mfile > img, .mfile > .ficon { width: 32px; height: 32px; border-radius: 7px; object-fit: cover; flex: none; background: var(--ks-s1); }
.mfile span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mfile.gone { opacity: .5; text-decoration: line-through; }
.tile { width: 32px; height: 32px; border-radius: 11px; background: var(--ks-acc-tile); color: var(--ks-acc); display: flex; align-items: center; justify-content: center; flex: none; }
.mbody { min-width: 0; flex: 1 1 auto; padding-top: 4px; }
.rich { font-size: 13.5px; line-height: 1.55; color: var(--ks-ink); user-select: text; overflow-wrap: anywhere; }
.rich p { margin: 0 0 7px; }
.rich p:last-child, .rich ul:last-child, .rich ol:last-child { margin-bottom: 0; }
.rich .rh { font-family: var(--ks-serif); font-size: 18px; font-weight: 600; margin: 4px 0 4px; }
.rich ul, .rich ol { margin: 0 0 8px; padding-left: 20px; }
.rich li { margin: 2px 0; }
.rich li::marker { color: var(--ks-acc); }
.rich strong { font-weight: 700; color: #fff; }
.rich code { font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: 12px; background: var(--ks-s2); border-radius: 5px; padding: 1px 5px; }
.rich pre { background: var(--ks-s1); border: 1px solid var(--ks-line); border-radius: 10px; padding: 8px 10px; overflow-x: auto; margin: 0 0 8px; }
.rich pre code { background: none; padding: 0; }
.rich hr { border: 0; border-top: 1px solid var(--ks-line); margin: 10px 0; }
.views { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.verr { margin-top: 6px; font-size: 11.5px; color: #EDC39E; }
.chat.off .composer, .chat.off .files { opacity: .45; pointer-events: none; }
.view { width: 78px; height: 58px; border-radius: 10px; overflow: hidden; background: var(--ks-win); border: 1px solid var(--ks-line); }
.view img { width: 100%; height: 100%; object-fit: contain; display: block; }
.mact { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.tts, .steps-t { height: 28px; padding: 0 10px; border-radius: 14px; border: 1px solid var(--ks-line); color: var(--ks-ink-soft); font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.tts svg { color: var(--ks-acc); }
.tts:hover, .steps-t:hover { background: rgba(255,255,255,.05); border-color: var(--ks-line2); }
.steps-t { border-color: transparent; color: var(--ks-ink2); padding: 0 6px; }
.player { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 10px 0 3px; border-radius: 15px; background: var(--ks-s1); border: 1px solid var(--ks-line); min-width: 190px; }
.player.on { border-color: var(--ks-acc-line); }
.pl-btn { width: 24px; height: 24px; border-radius: 50%; background: var(--ks-acc); color: var(--ks-on-acc); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.pl-bar { position: relative; flex: 1 1 auto; height: 16px; cursor: pointer; min-width: 80px; }
.pl-bar::before { content: ''; position: absolute; left: 0; right: 0; top: 7px; height: 3px; border-radius: 2px; background: rgba(255,255,255,.12); }
.pl-fill { position: absolute; left: 0; top: 7px; height: 3px; border-radius: 2px; background: var(--ks-acc); width: 0; }
.pl-time { font-size: 11px; color: var(--ks-ink2); font-variant-numeric: tabular-nums; min-width: 30px; text-align: right; }
.steps { margin: 6px 0 0; padding-left: 18px; font-size: 12.5px; color: var(--ks-ink-soft); }
.steps li { margin: 2px 0; }
.steps li::marker { color: var(--ks-ink2); font-size: 11px; }
.steps.live li.cur { color: var(--ks-ink); font-weight: 600; }
.steps.live li.cur::marker { color: var(--ks-acc); }
.work .tile { background: transparent; border: 1px solid var(--ks-acc-line); }
.work-h { display: flex; align-items: baseline; gap: 8px; font-size: 13.5px; }
.work-h b { font-weight: 700; }
.work-t { font-size: 12px; color: var(--ks-ink2); font-variant-numeric: tabular-nums; }
.work .more { font-size: 11.5px; color: var(--ks-ink2); margin-top: 4px; }
.msg.sys { justify-content: center; align-items: center; gap: 8px; font-size: 11.5px; color: var(--ks-ink2); }
.msg.sys span { padding: 3px 10px; border-radius: 10px; background: rgba(255,255,255,.04); border: 1px solid var(--ks-line); }
.msg.sys time { margin: 0; }
.welcome { border: 1px dashed var(--ks-line2); border-radius: 18px; padding: 16px 18px; color: var(--ks-ink-soft); animation: ks-fade .3s ease-out both; }
.welcome h3 { margin: 0 0 8px; font-size: 22px; color: var(--ks-ink); }
.welcome ul { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.5; }
.welcome li { margin: 4px 0; }
.welcome li::marker { color: var(--ks-acc); }

.composer { flex: none; border-top: 1px solid var(--ks-line); padding: 10px var(--pad) 10px; display: flex; flex-direction: column; gap: 8px; }
.attach { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.attach-l { font-size: 11.5px; color: var(--ks-ink2); }
.achip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 4px 0 3px; border-radius: 9px; background: var(--ks-acc-soft); border: 1px solid var(--ks-acc-line); max-width: 190px; font-size: 12px; }
.achip > img, .achip > .ficon { width: 22px; height: 22px; border-radius: 6px; object-fit: cover; flex: none; }
.achip .ficon b { display: none; }
.aname { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ax { width: 20px; height: 20px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; color: var(--ks-ink2); flex: none; }
.ax:hover { color: var(--ks-ink); background: rgba(255,255,255,.08); }
.recbar, .autosend { display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 0 6px 0 12px; border-radius: 12px; background: var(--ks-s1); border: 1px solid rgba(224,103,90,.35); font-size: 12.5px; animation: ks-in .2s ease-out both; }
.recbar.recog { border-color: var(--ks-acc-line); }
.rec-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--rec); animation: pulse 1.1s ease-in-out infinite; flex: none; }
.recbar.recog .rec-dot { background: var(--ks-acc); }
.rec-time { font-variant-numeric: tabular-nums; font-weight: 700; min-width: 34px; }
.rec-lvl { display: inline-flex; align-items: center; gap: 2px; height: 18px; }
.rec-lvl i { width: 3px; height: 18px; border-radius: 2px; background: var(--ks-acc); transform: scaleY(.15); transition: transform .08s; }
.recbar.recog .rec-lvl { display: none; }
.rec-hint { color: var(--ks-ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.autosend { border-color: var(--ks-acc-line); background: var(--ks-acc-soft); color: var(--ks-ink-soft); }
.autosend > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.autosend svg { color: var(--ks-acc); }
.compose-row { display: flex; align-items: flex-end; gap: 8px; }
.msg-wrap { position: relative; flex: 1 1 auto; min-width: 0; }
.msg-in { display: block; min-height: 46px; max-height: 150px; resize: none; padding: 12px 42px 12px 14px; border-radius: 14px; font-size: 13.5px; line-height: 1.45; overflow-y: auto; scrollbar-width: thin; }
.msg-wrap .icon-btn { position: absolute; right: 6px; bottom: 6px; }
.mic { width: 46px; height: 46px; border-radius: 15px; background: var(--ks-acc); color: var(--ks-on-acc); display: inline-flex; align-items: center; justify-content: center; flex: none; box-shadow: 0 8px 20px rgba(201,162,106,.24); touch-action: none; user-select: none; transition: background .15s; }
.mic:hover { background: var(--ks-acc-hi); }
.mic.rec { background: var(--rec); color: #fff; animation: ring 1.2s ease-out infinite; box-shadow: none; }
.mic.busy { background: var(--ks-s2); box-shadow: none; }
.send { height: 46px; padding: 0 14px; border-radius: 14px; border: 1px solid rgba(201,162,106,.5); color: var(--ks-acc); display: inline-flex; align-items: center; gap: 7px; font-weight: 700; font-size: 13px; flex: none; }
.send:not(:disabled):hover { background: rgba(201,162,106,.1); }
.send:disabled { opacity: .4; }
.compose-opts { display: flex; align-items: center; gap: 10px; min-height: 20px; }
.kbd-hint { font-size: 11px; color: var(--ks-ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── РАСЧЁТ ── */
.calc { min-height: 0; }
.calc-bar { flex: none; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 0 var(--pad) 8px; }
.calc-stats { display: flex; gap: 10px; font-size: 12px; color: var(--ks-ink2); font-variant-numeric: tabular-nums; }
.warn-list { list-style: none; margin: 2px 0 0; padding: 0; width: 100%; display: flex; flex-direction: column; gap: 4px; max-height: 128px; overflow-y: auto; scrollbar-width: thin; }
.warn-list li { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; line-height: 1.4; padding: 6px 9px; border-radius: 9px; background: var(--warn-soft); color: #EAD2BC; }
.warn-list li svg { color: var(--warn); margin-top: 1px; }
.warn-list li.warn-error { background: var(--err-soft); color: #F2C4BA; }
.warn-list li.warn-error svg { color: var(--err); }
.warn-list li.warn-info { background: rgba(255,255,255,.04); color: var(--ks-ink-soft); }
.warn-list li.warn-info svg { color: var(--ks-ink2); }
.warn-list li.has-refs { cursor: pointer; }
.warn-list li.has-refs:hover { outline: 1px solid var(--ks-line2); }
.calc-body { flex: 1 1 auto; min-height: 0; padding: 0 10px 18px var(--pad); }
/* строка расчёта в две линии: 1) название во всю ширину + «в прайс» + меню; 2) из чего она | кол-во | цена | коэф. | сумма;
   3) пометка (если есть). Колонки второй линии совпадают с шапкой таблицы */
.chead, .crow { display: grid; grid-template-columns: minmax(0, 1fr) 66px 70px 48px 78px 24px; column-gap: 4px; }
.chead { position: sticky; top: 0; z-index: 2; background: var(--ks-bg); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ks-ink2); font-weight: 600; padding: 4px 4px 6px 6px; border-bottom: 1px solid var(--ks-line); }
.chead .num { text-align: right; padding-right: 7px; }
.crow { row-gap: 1px; align-items: center; padding: 4px 4px 5px 6px; border-radius: 10px; position: relative; }
.crow:hover { background: rgba(255,255,255,.035); }
.crow.missing { background: rgba(228,165,116,.06); box-shadow: inset 2px 0 0 var(--warn); }
.crow.sel { background: var(--ks-acc-soft); box-shadow: inset 2px 0 0 var(--ks-acc); }
.crow.flash { animation: flash 1.1s ease-out both; }
.crow.hidden-row { opacity: .45; }
.crow.hidden-row .cell-in.name { text-decoration: line-through; }
.crow.added::before { content: ''; position: absolute; left: 1px; top: 15px; width: 4px; height: 4px; border-radius: 50%; background: var(--ks-acc); }
.c-name { grid-row: 1; grid-column: 1 / 6; display: flex; align-items: center; gap: 6px; min-width: 0; }
.crow .row-menu { grid-row: 1; grid-column: 6; }
.c-sub { flex: 1 1 auto; font-size: 11.5px; color: var(--ks-ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.c-q { grid-row: 2; grid-column: 2; }
.c-p { grid-row: 2; grid-column: 3; }
.c-p.span2 { grid-column: 3 / span 2; }
.c-k { grid-row: 2; grid-column: 4; }
.c-s { grid-row: 2; grid-column: 5; font-size: 13px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; padding-right: 4px; white-space: nowrap; }
.c-note { grid-row: 2; grid-column: 1; font-size: 11px; color: var(--ks-ink-soft); font-style: italic; padding: 0 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; opacity: .85; }
.c-q, .c-p, .c-k { position: relative; min-width: 0; }
.has-sfx .cell-in { padding-right: 24px; }
.sfx { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font-size: 10.5px; color: var(--ks-ink2); pointer-events: none; }
.cell-in { width: 100%; min-width: 0; height: 26px; background: transparent; border: 1px solid transparent; border-radius: 7px; padding: 0 6px; color: var(--ks-ink); font-size: 13px; outline: none; transition: border-color .12s, background .12s; }
.cell-in:hover { border-color: var(--ks-line2); }
.cell-in:focus { border-color: var(--ks-acc-line); background: var(--ks-s1); }
.cell-in.num { text-align: right; font-variant-numeric: tabular-nums; }
.cell-in.name { flex: 0 1 auto; width: auto; field-sizing: content; min-width: 48px; max-width: 72%; font-weight: 600; font-size: 13.5px; padding-left: 5px; margin-left: -1px; text-overflow: ellipsis; height: 26px; }
.cell-in.name:focus { flex: 1 1 auto; max-width: none; }
.cell-in.name:focus + .c-sub { display: none; }
.cell-in.edited { color: #EBCB98; box-shadow: inset 0 -1.5px 0 rgba(201,162,106,.55); }
.cell-in.missing::placeholder { color: var(--warn); font-weight: 600; font-size: 11.5px; opacity: 1; }
.to-pl { flex: none; height: 20px; padding: 0 7px; border-radius: 10px; background: var(--ks-acc-soft); border: 1px solid var(--ks-acc-line); color: var(--ks-acc); font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; gap: 4px; }
.to-pl:hover { background: rgba(201,162,106,.25); }
.row-menu { width: 24px; height: 26px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; color: var(--ks-ink2); opacity: .55; }
.crow:hover .row-menu, .row-menu:focus-visible { opacity: 1; }
.row-menu:hover { background: rgba(255,255,255,.07); color: var(--ks-ink); }
.prod { margin-top: 12px; }
.prod-h { display: flex; align-items: flex-end; gap: 10px; padding: 4px 4px 6px 0; border-bottom: 1px solid var(--ks-line); margin-bottom: 4px; }
.prod-t { display: flex; align-items: center; gap: 6px; min-width: 0; flex: 1 1 auto; text-align: left; color: var(--ks-ink); }
.prod-t svg { color: var(--ks-acc); }
.prod-t .serif { font-size: 19px; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prod-sum { display: flex; flex-direction: column; align-items: flex-end; flex: none; }
.prod-sum .v { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.prod-sum .c { font-size: 11.5px; color: var(--ks-acc); font-variant-numeric: tabular-nums; }
.prod.closed .prod-h { margin-bottom: 0; }
.prod-foot { padding: 4px 0 2px; }
.empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; color: var(--ks-ink2); padding: 40px 24px; font-size: 13px; }
.empty svg { color: var(--ks-acc); opacity: .8; }
.empty.err svg { color: var(--err); }
.empty p { margin: 0; max-width: 320px; line-height: 1.5; }

/* ── ПРАЙС И НАСТРОЙКИ ── */
.prefs { min-height: 0; }
.prefs-body { flex: 1 1 auto; min-height: 0; padding: 0 12px 20px var(--pad); }
.psec { border-bottom: 1px solid var(--ks-line); }
.psec-h { width: 100%; display: flex; align-items: center; gap: 8px; padding: 11px 2px 9px; text-align: left; color: var(--ks-ink); }
.psec-h svg { color: var(--ks-acc); }
.psec-h .serif { font-size: 19px; line-height: 1.1; }
.psec-h .cnt { margin-left: auto; font-size: 11.5px; color: var(--ks-ink2); background: var(--ks-s2); border-radius: 9px; padding: 1px 8px; font-variant-numeric: tabular-nums; }
.psec-b { padding: 0 0 14px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.psec-b > * { max-width: 100%; }
.psec-b > .ptable, .psec-b > .hwlist, .psec-b > .kvs, .psec-b > .hw-tools, .psec-b > .suggest { width: 100%; }
.hint { margin: 0; font-size: 12px; color: var(--ks-ink2); line-height: 1.45; }
.ptable { display: flex; flex-direction: column; gap: 3px; }
.prow { display: grid; gap: 5px; align-items: center; }
.prow.phead { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ks-ink2); font-weight: 600; padding-bottom: 2px; }
.prow.phead .num { text-align: right; padding-right: 9px; }
.prow.dup .inp { border-color: var(--warn); }
.mats .prow { grid-template-columns: minmax(0, 1.4fr) 54px 76px minmax(0, 1fr) 28px; }
.edges .prow, .defs .prow { grid-template-columns: minmax(0, 1fr) 96px 28px; }
.work .prow { grid-template-columns: minmax(0, 1fr) 128px 80px 28px; }
.suggest { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.suggest-l { font-size: 11.5px; color: var(--ks-ink2); margin-right: 2px; }
.hw-tools { position: relative; }
.hw-tools .sicon { position: absolute; left: 9px; top: 9px; color: var(--ks-ink2); }
.hw-tools .search { padding-left: 30px; }
.hwlist { display: flex; flex-direction: column; gap: 6px; }
.hwcard { background: var(--ks-s1); border: 1px solid var(--ks-line); border-radius: 12px; padding: 6px; display: flex; flex-direction: column; gap: 5px; }
.hw-l1 { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 5px; }
.hw-l1 .code { font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: 12px; }
.hw-l2 { display: grid; grid-template-columns: 86px 90px 70px minmax(0, 1fr) 28px; gap: 5px; align-items: center; }
.hwcard .inp.sm { background: var(--ks-bg); }
.lab { display: flex; align-items: center; gap: 4px; min-width: 0; }
.lab > span { font-size: 11.5px; color: var(--ks-ink2); flex: none; }
.kvs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; }
.kv { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.kv.wide { grid-column: 1 / -1; }
.kv-l { font-size: 12px; color: var(--ks-ink-soft); font-weight: 600; }
.kv-v { display: flex; align-items: center; gap: 6px; min-width: 0; }
.kv-v .inp { flex: 1 1 auto; min-width: 0; width: auto; }
.kv-v .unit { padding: 0; font-size: 12px; }
.kv-h { font-size: 11px; color: var(--ks-ink2); line-height: 1.35; }
.switch.own { margin-bottom: 2px; }

/* ── СЦЕНА ── */
.win { position: relative; flex: 1 1 auto; min-width: 0; min-height: 0; border-radius: 20px; overflow: hidden; background: var(--ks-win); box-shadow: var(--ks-win-shadow); isolation: isolate; container-type: size; }
.scene { position: absolute; inset: 0; }
.scene-canvas { display: block; touch-action: none; user-select: none; outline: none; }
.scene.orbiting, .scene-canvas.orbiting { cursor: grabbing; }
.scene-canvas.panning { cursor: move; }
.bar { position: absolute; z-index: 5; display: flex; align-items: center; gap: 3px; background: var(--ks-bar); border-radius: 17px; padding: 4px; box-shadow: var(--ks-bar-shadow); max-width: calc(100% - 24px); }
.scene-bar { left: 50%; bottom: 14px; transform: translateX(-50%); }
.scene-top { right: 14px; top: 14px; }
.bar-l { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ks-ink2); font-weight: 600; padding: 0 6px 0 8px; }
.bar-sep { width: 1px; height: 22px; background: rgba(255,255,255,.14); margin: 0 3px; flex: none; }
.vbtn { height: 36px; padding: 0 12px; border-radius: 13px; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 13px; color: var(--ks-ink); white-space: nowrap; }
.vbtn svg { color: var(--ks-ink2); }
.vbtn:hover:not([aria-pressed="true"]) { background: rgba(255,255,255,.07); }
.vbtn[aria-pressed="true"] { background: var(--ks-acc); color: var(--ks-on-acc); }
.vbtn[aria-pressed="true"] svg { color: var(--ks-on-acc); }
.scene-top .vbtn { height: 32px; padding: 0 10px; font-size: 12.5px; border-radius: 12px; }
.scene-info { position: absolute; left: 16px; top: 16px; z-index: 4; display: flex; flex-direction: column; gap: 1px; max-width: calc(100% - 520px); min-width: 0; background: rgba(255,255,255,.72); border-radius: 12px; padding: 7px 12px; color: #4A453E; font-size: 12px; pointer-events: none; box-shadow: 0 4px 14px rgba(60,50,40,.08); backdrop-filter: blur(6px); }
.scene-info b { font-family: var(--ks-serif); font-size: 17px; font-weight: 600; color: #2B2722; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scene-info span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scene-hint { position: absolute; left: 16px; bottom: 20px; z-index: 3; font-size: 11.5px; color: var(--ks-win-hint); max-width: 300px; line-height: 1.35; pointer-events: none; }
.win.is-empty .scene-hint, .win.is-empty .scene-bar, .win.is-empty .scene-top { display: none; }
.scene-empty { position: absolute; inset: 0; z-index: 6; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; padding: 40px; color: var(--ks-win-hint); pointer-events: none; }
.scene-empty svg { color: var(--ks-acc); }
.scene-empty h3 { margin: 4px 0 0; font-size: 30px; color: #2B2722; }
.scene-empty p { margin: 0; max-width: 420px; font-size: 14px; line-height: 1.5; }
.scene-empty .errs { margin: 6px 0 0; padding: 0; list-style: none; font-size: 12px; font-family: ui-monospace, Consolas, monospace; color: #8A4A3E; max-width: 560px; text-align: left; }
.scene-tip { position: absolute; left: 0; top: 0; z-index: 8; max-width: 320px; pointer-events: none; background: rgba(24,25,28,.95); color: var(--ks-ink); border-radius: 11px; padding: 8px 11px; font-size: 12.5px; line-height: 1.4; box-shadow: 0 12px 30px rgba(0,0,0,.35); opacity: 0; transition: opacity .12s; }
.scene-tip.on { opacity: 1; }
.scene-tip .st-b { font-weight: 700; }
.scene-tip .st-m { color: var(--ks-ink2); font-size: 11.5px; }
/* узкое окно сцены: подписи у кнопок прячутся, остаются значки (подсказка — у курсора) */
@container (max-width: 920px) { .scene-hint { display: none; } .scene-info { max-width: calc(100% - 440px); } }
@container (max-width: 800px) { .scene-top .vbtn .lbl, .scene-top .vbtn > span:not([data-icon]) { display: none; } .scene-top .bar-l { display: none; } .scene-info { max-width: calc(100% - 260px); } }
@container (max-width: 560px) { .scene-bar .vbtn > span { display: none; } .scene-info { display: none; } }

/* ── ВХОД ── */
.login { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background:
  radial-gradient(1200px 600px at 70% 20%, rgba(201,162,106,.08), transparent 60%), var(--ks-bg); z-index: 50; }
.login-card { width: min(400px, calc(100vw - 32px)); background: var(--ks-s1); border: 1px solid var(--ks-line); border-radius: 24px; padding: 30px 28px 24px; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 30px 70px rgba(0,0,0,.45); animation: ks-in .3s ease-out both; }
.login-logo { font-size: 48px; line-height: 1; }
.login-logo::after { content: ''; display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--ks-acc); margin-left: 4px; vertical-align: 4px; }
.login-sub { margin: -6px 0 6px; color: var(--ks-ink-soft); font-size: 14px; line-height: 1.45; }
.login-field { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--ks-ink2); font-weight: 600; }
.login-err { min-height: 18px; font-size: 12.5px; color: #F0B0A5; }
.login-hint { margin: 0; font-size: 12px; color: var(--ks-acc); text-align: center; }

/* ── СЛОИ ПОВЕРХ: окна, меню, подсказки, тосты, перетаскивание, просмотр ── */
.dlg-wrap { position: fixed; inset: 0; z-index: 100; background: rgba(8,8,10,.55); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; padding: 20px; animation: ks-fade .15s ease-out both; }
.dlg-wrap.out { opacity: 0; transition: opacity .15s; }
.dlg { width: min(440px, 100%); max-height: calc(100vh - 40px); display: flex; flex-direction: column; gap: 12px; background: var(--ks-s1); border: 1px solid var(--ks-line); border-radius: 20px; padding: 20px 20px 16px; box-shadow: var(--ks-win-shadow); animation: ks-in .22s ease-out both; }
.dlg-wide { width: min(620px, 100%); }
.dlg-h { margin: 0; font-family: var(--ks-serif); font-size: 26px; font-weight: 600; line-height: 1.1; }
.dlg-t { margin: 0; color: var(--ks-ink-soft); font-size: 13.5px; line-height: 1.5; overflow-wrap: anywhere; }
.dlg-field { display: flex; flex-direction: column; gap: 6px; }
.dlg-lbl { font-size: 12px; color: var(--ks-ink2); font-weight: 600; }
.dlg-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.dlg-actions:empty { display: none; }
.plist-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; font-size: 12.5px; }
.plist { max-height: min(56vh, 520px); display: flex; flex-direction: column; gap: 4px; margin: 0 -6px; padding: 0 6px; }
.prj { display: flex; align-items: center; gap: 12px; padding: 9px 8px 9px 10px; border-radius: 12px; border: 1px solid transparent; cursor: pointer; }
.prj:hover { background: rgba(255,255,255,.04); border-color: var(--ks-line); }
.prj.cur { background: var(--ks-acc-soft); border-color: var(--ks-acc-line); }
.prj-ic { width: 36px; height: 36px; border-radius: 11px; background: var(--ks-s2); color: var(--ks-ink2); display: flex; align-items: center; justify-content: center; flex: none; }
.prj-ic.has { background: var(--ks-acc-tile); color: var(--ks-acc); }
.prj-m { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.prj-t { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prj-d { font-size: 12px; color: var(--ks-ink2); }
.prj-cur { font-size: 11px; font-weight: 700; color: var(--ks-acc); text-transform: uppercase; letter-spacing: .06em; }
.menu { position: fixed; z-index: 120; min-width: 210px; background: var(--ks-s2); border: 1px solid var(--ks-line); border-radius: 14px; padding: 5px; box-shadow: 0 16px 40px rgba(0,0,0,.5); display: flex; flex-direction: column; animation: ks-in .18s ease-out both; }
.menu-i { height: 36px; border-radius: 9px; display: flex; align-items: center; gap: 9px; padding: 0 10px; font-size: 13px; color: var(--ks-ink); text-align: left; white-space: nowrap; }
.menu-i svg { color: var(--ks-ink2); }
.menu-i:hover:not(:disabled), .menu-i:focus-visible { background: rgba(255,255,255,.07); outline: none; }
.menu-i:disabled { opacity: .4; }
.menu-i.danger { color: #F0B0A5; }
.menu-i.danger svg { color: var(--err); }
.menu-noicon { width: 16px; }
.menu-sep { height: 1px; background: var(--ks-line); margin: 4px 6px; }
.tip { position: fixed; z-index: 200; max-width: 300px; background: #2A2C31; color: var(--ks-ink-soft); border: 1px solid var(--ks-line); font-size: 12px; line-height: 1.35; padding: 6px 9px; border-radius: 8px; pointer-events: none; opacity: 0; transition: opacity .12s; box-shadow: 0 8px 20px rgba(0,0,0,.35); }
.tip.on { opacity: 1; }
.toasts { position: fixed; z-index: 150; left: calc(var(--col) + (100vw - var(--col)) / 2); top: 74px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; width: min(520px, calc(100vw - 32px)); }
.toast { pointer-events: auto; display: flex; align-items: center; gap: 12px; background: rgba(33,35,40,.97); border: 1px solid var(--ks-line); border-left: 3px solid var(--ks-ink2); border-radius: 12px; padding: 10px 14px; font-size: 13px; box-shadow: 0 14px 34px rgba(0,0,0,.45); animation: ks-in .22s ease-out both; max-width: 100%; }
.toast.out { opacity: 0; transform: translateY(-6px); transition: opacity .2s, transform .2s; }
.toast-ok { border-left-color: var(--ks-ok); }
.toast-warn { border-left-color: var(--warn); }
.toast-err { border-left-color: var(--err); }
.toast-t { overflow-wrap: anywhere; }
.toast-a { color: var(--ks-acc); font-weight: 700; white-space: nowrap; }
.drop { position: fixed; inset: 0; z-index: 90; background: rgba(14,15,17,.72); display: flex; align-items: center; justify-content: center; padding: 18px; pointer-events: none; animation: ks-fade .12s ease-out both; }
.drop-in { width: 100%; height: 100%; border: 2px dashed var(--ks-acc); border-radius: 26px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--ks-ink-soft); font-size: 14px; background: rgba(201,162,106,.05); }
.drop-in svg { color: var(--ks-acc); }
.drop-in .serif { font-size: 34px; color: var(--ks-ink); }
.lightbox { position: fixed; inset: 0; z-index: 140; background: rgba(8,8,10,.9); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px; cursor: zoom-out; animation: ks-fade .15s ease-out both; }
.lightbox img { max-width: 100%; max-height: calc(100vh - 90px); object-fit: contain; border-radius: 10px; background: var(--ks-win); box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.lightbox-cap { color: var(--ks-ink-soft); font-size: 13px; }

/* ── УЗКАЯ КОЛОНКА (1280 и уже: ~435 px) — короткие подписи, значки вкладок убираем, чтобы влезли слова ── */
.l-short { display: none; }
@container side (max-width: 520px) {
  .tab { flex: 1 1 auto; padding: 0 6px; font-size: 12.5px; }
  .tab svg { display: none; }
  .l-long { display: none; }
  .l-short { display: inline; }
  #btnProjects { width: 34px; padding: 0; }
  .kbd-hint { display: none; }
  .tv { font-size: 22px; }
}
@container side (max-width: 440px) {
  .mock-badge { padding: 0 6px; font-size: 10.5px; }
}

/* ── ПЛОТНОСТЬ ПО ВЫСОТЕ: на 720 px экономим каждую строку ── */
@media (max-height: 780px) {
  .head { padding-top: 10px; padding-bottom: 8px; }
  .tabs { margin-bottom: 8px; }
  .tab { height: 32px; }
  .foot { padding-top: 8px; padding-bottom: 10px; gap: 8px; }
  .tv { font-size: 22px; }
  .dl .btn { height: 34px; }
  .files { padding-bottom: 6px; }
  .composer { padding-top: 8px; padding-bottom: 8px; gap: 6px; }
}
/* крупный экран: чуть просторнее */
@media (min-width: 2200px) and (min-height: 1200px) {
  body { font-size: 14.5px; }
  :root { --pad: 22px; }
  .tab { height: 38px; font-size: 14px; }
  .tv { font-size: 28px; }
}

/* переключатель языка RU | LT в шапке (30.09) */
.lang-sw { display: inline-flex; padding: 3px; gap: 2px; border-radius: 11px; background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px var(--ks-line); }
.lang-b { height: 26px; min-width: 32px; padding: 0 8px; border-radius: 8px; font: 600 12px/1 var(--ks-sans); letter-spacing: .04em; color: var(--ks-ink2); }
.lang-b:hover:not([aria-pressed="true"]) { color: var(--ks-ink); background: rgba(255,255,255,.07); }
.lang-b[aria-pressed="true"] { background: var(--ks-acc); color: var(--ks-on-acc); }
.switch.is-off { opacity: .45; cursor: not-allowed; }

/* подпись цветов кромки («Показать кромку», 30.09) */
.edge-leg { position: absolute; left: 16px; top: 92px; z-index: 3; display: none; flex-direction: column; gap: 5px; padding: 9px 11px; border-radius: 12px;
  background: rgba(255,255,255,.92); box-shadow: 0 6px 18px rgba(0,0,0,.14), 0 0 0 1px rgba(0,0,0,.06); color: #2a2723; font: 500 12px/1.2 var(--ks-sans); pointer-events: none; }
.edge-leg.on { display: flex; }
.edge-leg-row { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.edge-leg-sw { width: 18px; height: 6px; border-radius: 3px; flex: none; }

/* верхняя панель сцены выросла (параллельная, кромка, вся мебель — 30.09): табличка проекта и подпись кромки — ПОД панелью,
   на средних экранах у этих кнопок только значки (подсказка остаётся) — ничего не наезжает и не вылезает за край */
.scene-info { top: 68px; max-width: calc(100% - 32px); }
.edge-leg { top: 130px; }
/* «собрано по прежней библиотеке» — строка с кнопкой в табличке проекта; подпись кромки опускается под неё */
.scene-stale { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-top: 6px; padding-top: 7px; border-top: 1px solid rgba(60,50,40,.12); pointer-events: auto; color: #8A5A1E; font-weight: 600; }
.scene-stale .btn { height: 26px; }
.win.is-stale .edge-leg { top: 172px; }
/* сила прозрачности (колесо мыши над кнопкой) — проценты на включённой кнопке */
.vbtn .op-val { font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; opacity: .85; }
@container (max-width: 1180px) {
  #edgeToggle > span:not([data-icon]), #xrayToggle > span:not([data-icon]):not(.op-val), #roomToggle > span:not([data-icon]) { display: none; }
}
@container (max-width: 920px) { .scene-info { max-width: calc(100% - 32px); } }
@container (max-width: 800px) { .scene-info { max-width: calc(100% - 32px); } }