/* Фирменный стиль «Яркоди» из папки YARKOD-cut: тёмная мастерская, светлые карточки, золотой акцент, заголовки с засечками.
   --ink, --line, --muted и другие переменные описывают карточки: на них же строятся схемы раскроя. Цвета тёмной страницы начинаются с --page. */
:root {
  color-scheme: dark;
  --page: #171410; --rail: #11100e; --page-line: #3b3128; --page-ink: #efe6da; --page-muted: #c2b2a2; --gold: #e0b07f;
  --bg: #e8e0d5; --panel: #f1ece4; --field: #faf6ef; --ink: #292119; --muted: #6d5c4b; --line: #d9cabb; --line-soft: #e4d9cd;
  --accent: #815831; --accent-dark: #38271d; --accent-soft: #eadbc8; --warn: #734a24; --warn-soft: #f4e3c8; --bad: #9a3329;
  --part: #dfc3a4; --part-line: #815831; --edge-thin: #1f5fb8; --edge-thick: #c0271a;
  --serif: Georgia, "Times New Roman", serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--page); color: var(--page-ink); font: 14px/1.45 "Segoe UI", system-ui, sans-serif; }
:focus-visible { outline: 2px solid #af7443; outline-offset: 2px; }
.login-page { display: grid; place-items: center; min-height: 100dvh; padding: 20px; }
.login-page .login-panel { width: min(100%, 390px); margin: 0; padding: 24px; border: 1px solid var(--page-line); border-radius: 10px; background: var(--rail); }
.login-panel h1 { font: 26px var(--serif); }
.login-panel form { display: grid; gap: 12px; }
.login-panel .field { color: var(--page-ink); }
.login-error { margin: 0; color: #ffab9e; }
.symbols { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round; fill: none; flex: none; pointer-events: none; }

/* Боковая панель */
.rail { position: fixed; inset: 0 auto 0 0; width: 220px; display: flex; flex-direction: column; padding: 22px 16px 16px; background: var(--rail); border-right: 1px solid #332a23; overflow-y: auto; z-index: 6; }
.brand { padding: 9px 6px; border: 1px solid #5d4635; border-radius: 7px; background: radial-gradient(ellipse at 48% 0%, #30251e, #1a1512 72%); box-shadow: inset 0 1px #e0b07f12, 0 4px 14px #0004; flex: none; }
.brand img { display: block; width: 100%; height: auto; }
nav { margin-top: 14px; display: flex; flex-direction: column; gap: 2px; }
.rail-caption { color: #a99a8b; padding: 12px 9px 5px; font-size: 10px; font-weight: 650; letter-spacing: .15em; }
nav button { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; padding: 7px 9px; color: #a99a8b; background: none; border: 1px solid transparent; border-radius: 7px; font: inherit; font-size: 12.5px; cursor: pointer; }
nav button:hover, nav button.active { color: #f1d3b3; background: #282019; border-color: #473326; }
.rail-footer { margin-top: auto; border-top: 1px solid var(--page-line); padding: 12px 5px 0; display: flex; align-items: center; gap: 8px; color: #a99a8b; font-size: 11px; }
.dot, .tool-badge i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }

/* Основная область */
main { margin-left: 220px; padding: 0 clamp(16px, 3vw, 44px) 24px; max-width: 1720px; }
.topline { position: sticky; top: 0; z-index: 5; min-height: 60px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 12px; padding: 8px 0; background: var(--page); border-bottom: 1px solid var(--page-line); color: #a99a8b; font-size: 12px; }
.crumb b { margin: 0 6px; font-weight: 400; color: var(--gold); }
.top-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto; }
.tool-badge { color: #d9bfa7; border: 1px solid #49382c; border-radius: 30px; padding: 6px 11px; font-size: 9px; font-weight: 650; letter-spacing: .15em; white-space: nowrap; }
.tool-badge i { margin-right: 5px; }
.orderbar { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: end; padding: 12px 0; border-bottom: 1px solid var(--page-line); margin-bottom: 18px; }
.orderbar[hidden] { display: none; }
.orderbar .field { color: var(--page-muted); }
.orderbar .field.wide { flex: 0 1 300px; }
.save-status { color: var(--page-muted); padding-bottom: 7px; font-size: 13px; }
.order-files-dialog { width: min(620px, calc(100% - 24px)); margin: auto; max-height: 90dvh; }
.order-files-dialog::backdrop { background: #0009; }
.order-files-dialog h2 { margin: 0; }
.order-files-inputs { display: flex; flex-wrap: wrap; gap: 12px; }
.order-files-inputs .field { flex: 1 1 220px; min-width: 0; }
.order-files-inputs input { width: 100%; }
.order-files-list { padding: 0; list-style: none; }
.order-files-list li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); overflow-wrap: anywhere; }
.order-files-list a { color: var(--accent-dark); }
#sketch-evidence pre { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 19rem; overflow: auto; }
#sketch-evidence img { display: block; max-width: 100%; max-height: 70vh; margin-top: 10px; }
#sketch-parts input[data-field="name"] { min-width: 10rem; }
#sketch-parts .num { width: 5.4rem; }
#sketch-read-status:empty, #sketch-status:empty { display: none; }
#order-files-status:empty, #orders-status:empty { display: none; }
.kp-visuals { margin-top: 18px; }
.kp-visuals figure { margin: 10px 0; break-inside: avoid; }
.kp-visuals img { display: block; max-width: 100%; max-height: 680px; width: auto; height: auto; object-fit: contain; }
.tab { padding-top: 18px; }
.orderbar:not([hidden]) ~ .tab { padding-top: 0; }
.app-footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 15px; padding: 16px 0 4px; border-top: 1px solid var(--page-line); margin-top: 28px; color: #a99a8b; font-size: 10px; font-weight: 650; letter-spacing: .15em; }
.app-footer i { display: inline-block; height: 1px; width: 11px; margin: 0 3px; background: #ac805a; vertical-align: middle; }
.app-footer span:last-child { letter-spacing: .03em; font-weight: 400; }

/* Заголовки */
h2 { margin: 0 0 6px; font: 400 clamp(26px, 2.4vw, 36px)/1.08 var(--serif); letter-spacing: -.03em; }
h3 { margin: 18px 0 8px; font: 400 21px/1.2 var(--serif); letter-spacing: -.02em; }
.hint { color: var(--page-muted); margin: 4px 0 14px; }

/* Карточки: всё на них тёмным по светлому */
.card, .kpi, .extras, .tab > .scroll, .pick-list, .kp-doc { color-scheme: light; color: var(--ink); }
.card { background: var(--panel); border: 1px solid #dfd1c2; border-radius: 12px; padding: clamp(14px, 1.6vw, 22px); margin-bottom: 14px; }
.card .hint { color: #695a4b; }
.tab > .scroll { background: var(--panel); border: 1px solid #dfd1c2; border-radius: 12px; padding: 12px 14px; }
.card-head { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: end; margin-bottom: 10px; }
.field { display: flex; flex-direction: column; gap: 2px; font-size: 11px; font-weight: 650; color: #584a3d; }
.field input, .field select { color: var(--ink); font-size: 14px; font-weight: 400; }
.field.wide { flex: 1 1 240px; }
.check { display: inline-flex; gap: 6px; align-items: center; padding-bottom: 7px; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); }

/* Поля и кнопки */
input, select, textarea { color-scheme: light; font: inherit; padding: 6px 8px; border: 1px solid #d8cbbb; border-radius: 5px; background: var(--field); color: var(--ink); }
input:focus, select:focus, textarea:focus { outline: 2px solid #af7443; outline-offset: -1px; }
.num { width: 76px; text-align: right; }
.grow { flex: 1 1 260px; }
button.ghost, button.primary, .mini { font: inherit; padding: 7px 12px; border-radius: 6px; cursor: pointer; border: 1px solid #634b37; background: transparent; color: #e7c8a8; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
button.ghost:hover { background: #382a20; }
.card button.ghost, .mini { border-color: #cfc0b0; color: #513c2b; }
.card button.ghost:hover, .mini:hover { background: #e6d7c8; }
.mini { padding: 3px 8px; font-size: 12.5px; font-weight: 600; }
.mini:disabled { opacity: .5; cursor: default; }
.danger:hover { border-color: var(--bad); color: var(--bad); }
button.primary { background: var(--gold); border-color: var(--gold); color: #2a1d13; }
button.primary:hover { background: #ecc196; }
.card button.primary { background: var(--accent-dark); border-color: #432c20; color: #f5e5d1; }
.card button.primary:hover { background: #553a2a; }
a { color: #754a2d; }

.toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.toolbar label { display: inline-flex; gap: 6px; align-items: center; color: var(--page-muted); }
.card .toolbar label { color: #584a3d; }
.check-inline { display: inline-flex; gap: 6px; align-items: center; color: var(--page-muted); }
.row-actions { display: flex; gap: 8px; margin: 8px 0; flex-wrap: wrap; }

/* Подбор материала */
.picker { position: relative; flex: 1 1 340px; }
.picker input { width: 100%; }
.pick-list { position: absolute; left: 0; right: 0; top: 100%; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 6px 18px rgb(0 0 0 / .3); max-height: 340px; overflow: auto; z-index: 10; }
.pick-list button { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 7px 10px; cursor: pointer; font: inherit; color: var(--ink); border-bottom: 1px solid var(--line-soft); }
.pick-list button:hover, .pick-list button:focus { background: var(--accent-soft); }
.pick-list small { display: block; color: var(--muted); }
.field .picker { display: block; flex: none; }
.field .pick-list { display: block; width: min(520px, 90vw); right: auto; }
.field .pick-list[hidden] { display: none; }

/* Показатели */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.kpi { background: var(--panel); border: 1px solid #dfd1c2; border-radius: 10px; padding: 10px 14px; }
.kpi b { display: block; font: 400 25px/1.1 var(--serif); font-variant-numeric: tabular-nums; }
.kpi span { color: var(--muted); font-size: 11px; }
.kpi.accent { background: var(--accent-soft); }
.card .kpi { background: #f8f2ea; }
.card .kpi.accent { background: var(--accent-soft); }

/* Таблицы */
.scroll { overflow-x: auto; }
table.grid { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
.grid th { text-align: left; color: #6d5743; font-weight: 650; font-size: 11px; padding: 5px 6px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.grid td { padding: 4px 6px; border-bottom: 1px solid var(--line-soft); }
.grid .r { text-align: right; }
.grid input.num { width: 72px; }
.grid input.name { width: 100%; min-width: 130px; }
.grid input.hw-name { width: 100%; min-width: 200px; }
.grid input.r-finish { width: 100%; min-width: 150px; }
.grid select { padding: 4px; }
.grid select.f-wide { max-width: 210px; }
.grid select.move { max-width: 130px; }
.grid select.hw-offer-select { max-width: 320px; }
.narrow { max-width: 760px; }
.bad { color: var(--bad); font-weight: 600; }
.warns { background: var(--warn-soft); color: var(--warn); border-radius: 6px; padding: 8px 12px; margin: 8px 0; }
.warns div + div { margin-top: 3px; }
.empty { text-align: center; color: var(--page-muted); padding: 50px 10px; border: 1px dashed #5d4635; border-radius: 12px; }
.card .empty { color: var(--muted); border-color: var(--line); }

/* Раскрой */
.stats { display: flex; gap: 16px; flex-wrap: wrap; margin: 12px 0 8px; font-variant-numeric: tabular-nums; }
.stats b { font-weight: 600; }
.paste { width: 100%; height: 86px; margin-top: 6px; }
.sheets { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 12px; }
.sheet figcaption { font-size: 12px; color: var(--muted); margin-bottom: 3px; }
figure { margin: 0; }
svg.scheme { width: 100%; height: auto; display: block; }
.edge-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; color: var(--muted); margin: 0 0 8px; }
#v1-edges > .edge-legend { color: var(--page-muted); }
.edge-legend span { display: inline-flex; align-items: center; gap: 5px; }
.edge-legend i { display: inline-block; width: 18px; height: 4px; }
.edge-icon { display: block; }
.material-origin { margin: 0 0 8px; }
.edge-choice { display: grid; grid-template-columns: 110px 1fr auto; gap: 4px 10px; align-items: start; padding: 6px 0; border-top: 1px solid var(--line-soft); }
.edge-choice:last-of-type { margin-bottom: 8px; }
.edge-choice-title { color: var(--muted); font-size: 12px; padding-top: 2px; }
.edge-choice small { color: var(--muted); }
.edge-panel { grid-column: 1 / -1; background: var(--bg); border-radius: 6px; padding: 8px; }
.edge-search input { width: 100%; margin-bottom: 6px; }
.edge-rank { font-size: 12px; padding: 1px 6px; border-radius: 4px; background: var(--warn-soft); color: var(--warn); white-space: nowrap; }
.edge-rank-code { background: #e4e8d9; color: #405139; }

/* Расчёты */
.columns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 520px); gap: 18px; align-items: start; }
.result { position: sticky; top: 76px; }
.total { display: flex; justify-content: space-between; align-items: baseline; font-size: 15px; padding-top: 10px; }
.total b { font: 400 30px/1 var(--serif); font-variant-numeric: tabular-nums; }
.sub { display: flex; justify-content: space-between; color: var(--muted); padding-top: 2px; font-variant-numeric: tabular-nums; }
.extras { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 6px 14px; background: var(--panel); border: 1px solid #dfd1c2; border-radius: 12px; padding: 14px; }
.extras label { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.extras small { color: var(--muted); }
.internal { border-left: 4px solid var(--gold); }
input.big { width: 110px; font-size: 18px; font-weight: 600; }

/* Фурнитура и совпадения */
.hw-total { display: flex; justify-content: flex-end; gap: 14px; align-items: baseline; padding-top: 8px; }
.hw-total b { font: 400 24px/1 var(--serif); font-variant-numeric: tabular-nums; }
.grid tr.hw-offer td { color: var(--muted); border-bottom-style: dotted; }
.grid tr.hw-offer td:nth-child(2) { padding-left: 18px; }
.hw-best { color: var(--muted); font-size: 12px; }
.review-pair td { vertical-align: top; }
.an-side b { font-weight: 600; }
.an-side small, .hw-analogs small { display: block; color: var(--muted); }
.grid tr.hw-sub > td { padding: 0 6px 6px; border-bottom: 1px solid var(--line); }
.hw-analogs summary { cursor: pointer; color: #754a2d; font-weight: 600; font-size: 12.5px; }
.hw-analogs table { margin: 4px 0 2px; background: #f8f2ea; }
.hw-analog-of { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--warn); font-size: 12.5px; margin-bottom: 3px; }
.spec-analog { font-size: 12px; }
.spec-analog + .spec-analog { margin-top: 5px; }
.spec-analog div { color: #6c6f63; }

/* Рамочные фасады, радиусы, шпон */
.f-rules { margin: 0; padding-left: 18px; }
.f-rules li + li { margin-top: 4px; }
.f-docs { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px 14px; }
.f-lead { display: flex; justify-content: flex-end; gap: 14px; color: var(--muted); padding-top: 2px; }
.r-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.r-card { border: 1px solid var(--line); border-radius: 8px; padding: 10px; display: flex; flex-direction: column; gap: 4px; background: #f8f2ea; }
.r-card svg { width: 100%; height: 76px; }
.r-card svg path { fill: none; stroke: var(--accent); stroke-linecap: round; stroke-linejoin: round; }
.r-card b { font-size: 13px; }
.r-card small { color: var(--muted); }
.r-card-actions { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: auto; padding-top: 6px; }
.rmk-text { width: 100%; height: 190px; }
.v-sub td { border-top: 0; padding-top: 0; }
.v-sub label { margin-right: 10px; white-space: nowrap; }
.v-sub input[type="text"] { width: 120px; }
.v-sub select { max-width: 170px; }
#v-category { max-width: 100%; min-width: 0; }

/* Документы: это лист бумаги, оформление остаётся нейтральным */
.kp-doc { background: #fff; border: 1px solid #dfd1c2; border-radius: 8px; padding: 28px 32px; max-width: 860px; color: #24261f; }
.kp-doc h1 { font-size: 22px; margin: 18px 0 2px; }
.kp-doc h2 { font: 600 16px/1.3 "Segoe UI", system-ui, sans-serif; letter-spacing: 0; }
.kp-doc .grid th { color: #6c6f63; }
.kp-head { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; color: #6c6f63; }
.kp-head b { color: #24261f; font-size: 16px; }
.kp-total { display: flex; justify-content: flex-end; gap: 18px; align-items: baseline; margin-top: 14px; font-size: 16px; }
.kp-total b { font-size: 24px; font-variant-numeric: tabular-nums; }
.kp-note { margin-top: 16px; white-space: pre-wrap; }
.kp-section td { font-weight: 600; padding-top: 12px; }
.kp-line-note { color: #6c6f63; font-size: 12px; }
.spec-doc { max-width: 1200px; overflow-x: auto; }
.spec-doc h2 { margin-top: 18px; }
.spec-article { font-weight: 400; color: #6c6f63; margin-left: 8px; }
.spec-code { word-break: break-all; font-size: 12px; }

/* Узкие экраны */
@media (max-width: 1150px) {
  .rail { width: 180px; padding-inline: 12px; }
  main { margin-left: 180px; }
}
@media (max-width: 900px) {
  .rail { position: static; width: auto; padding: 12px 14px; border-right: 0; border-bottom: 1px solid var(--page-line); overflow: visible; }
  .brand { width: 170px; }
  nav { flex-direction: row; flex-wrap: wrap; margin-top: 10px; gap: 4px; }
  nav button { width: auto; }
  .rail-caption, .rail-footer, .tool-badge { display: none; }
  main { margin-left: 0; }
  .columns { grid-template-columns: 1fr; }
  .result { position: static; }
  .sheets { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .r-gallery { grid-template-columns: 1fr; }
  .kp-doc { padding: 16px; }
}

/* Печать: на бумаге только белый фон и содержимое */
@media print {
  :root { color-scheme: light; }
  body { background: #fff; color: #111; }
  .rail, .topline, .app-footer, .orderbar, #tab-orders { display: none !important; }
  main { margin: 0; padding: 0; max-width: none; }
  h2, h3 { color: #111; }
  .edge-choice, #materials-summary { display: none; }
  .tab > .scroll, .extras { border: 0; padding: 0; background: #fff; }
  /* Обычная печать браузера (Ctrl+P) со вкладки КП тоже даёт только документ для клиента. */
  .internal { display: none !important; }
  body[data-tab="kp"] .tab > * { display: none !important; }
  body[data-tab="kp"] main, body[data-tab="kp"] #tab-kp { display: block !important; padding: 0; }
  body[data-tab="kp"] #kp-doc { display: block !important; border: 0; padding: 0; max-width: none; }
  body:not([data-tab="kp"]) #tab-kp { display: none; }
  .toolbar, .hint, .row-actions, .paste, .card-head, .card > .scroll, #tab-v1, #tab-v2, #tab-base, #tab-rates { display: none !important; }
  .card { border: 0; padding: 0; background: #fff; }
  figure { break-inside: avoid; }
}