/*
 * Рабочее место врамке: один шрифт (Onest), цвета из brand-vramke/colors.css, простые компоненты
 * (карточки, кнопки, формы, таблицы). Просмотрщик и клиентский кабинет свои стили несут сами.

 */
@font-face { font-family: "Onest"; src: url(/fonts/Onest.ttf) format("truetype"); font-weight: 100 900; font-style: normal; font-display: swap; }
:root {
  --vr-ink: #1F2A37; --vr-ink-light: #4A5B72; --vr-ink-dark: #0F1722;
  --vr-amber: #F5A524; --vr-amber-dark: #D98C10;
  --vr-primary: #1E3F8F; --vr-primary-dark: #173373;
  --vr-paper: #FAF7F2; --vr-night: #0F172A;
  /* нейтрали «steel» дизайн-системы (28.09.2026): фон кабинета, линии и приглушённый текст холодные, по оттенку графита;
     бумага (--vr-paper) осталась для листов чертежей */
  --vr-steel-50: #F7F8FA; --vr-steel-100: #F1F3F6; --vr-steel-200: #E3E7EC; --vr-steel-300: #CBD2DA; --vr-steel-400: #98A3B1; --vr-steel-500: #5E6B7B;
  --vr-line: var(--vr-steel-200); --vr-line-strong: var(--vr-steel-300); --vr-muted: var(--vr-steel-500); --vr-subtle: var(--vr-steel-400);
  --vr-warn-bg: #FFF3DA; --vr-warn-text: #8A5A00; --vr-ok-bg: #E3F4E8; --vr-ok-text: #1F7A3A; --vr-err-bg: #FDE8E8; --vr-err-text: #A12626;
  --vr-bg: #F3F4F6; --vr-fg: var(--vr-ink); --vr-surface: #FFFFFF; --vr-surface-2: var(--vr-steel-50);
  --vr-ring: 0 0 0 3px rgba(245, 165, 36, 0.38); --vr-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --vr-font: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
/* подвал всегда прижат к низу окна: страница — колонка на всю высоту, содержимое растягивается */
body { font-family: var(--vr-font); font-size: 15px; line-height: 1.5; color: var(--vr-fg); background: var(--vr-bg); min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
body > main { flex: 1 0 auto; width: 100%; }
body > .foot { flex: none; }
a { color: var(--vr-ink); }
a:hover { color: var(--vr-amber-dark); }
h1 { font-weight: 800; font-size: 28px; line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 16px; }
h2 { font-weight: 700; font-size: 20px; line-height: 1.25; letter-spacing: -0.01em; margin: 0 0 10px; }
h3 { font-weight: 700; font-size: 16px; margin: 0 0 8px; }
.muted { color: var(--vr-muted); }
.small { font-size: 13px; }
.caption { font-weight: 700; font-size: 11px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--vr-muted); }
.num { font-weight: 500; font-variant-numeric: tabular-nums; }
code { font-family: ui-monospace, Menlo, monospace; font-size: 13px; background: #f1ede6; padding: 1px 5px; border-radius: 5px; }

/* шапка рабочего места по макету дизайн-системы (Claude Design, templates/cabinet): липкая, логотип-куб,
   разделы плашками (активный — графитовый), справа плашка компании, аватар с инициалом и кнопка выхода */
.top { background: var(--vr-surface); border-bottom: 1px solid var(--vr-line); position: sticky; top: 0; z-index: 10; }
/* просмотр компании оператором (OperatorInspection): янтарная плашка над шапкой с выходом из просмотра */
.inspect-bar { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 16px; padding: 8px 16px; background: var(--vr-warn-bg); color: var(--vr-warn-text); border-bottom: 1px solid var(--vr-amber); font-size: 13.5px; }
.inspect-bar a { color: inherit; font-weight: 600; }
.top-in { max-width: 1440px; margin: 0 auto; padding: 0 32px; min-height: 64px; display: flex; align-items: center; gap: 28px; }
/* приписка «beta» у логотипа на время открытой беты (та же в shared/_brand_cube на публичных страницах) */
.brand-beta { align-self: flex-start; margin: 2px 0 0 -4px; font-weight: 700; font-size: 10px; line-height: 1; letter-spacing: .12em; text-transform: uppercase; color: var(--vr-warn-text); background: var(--vr-warn-bg); border: 1px solid var(--vr-amber); border-radius: 999px; padding: 3px 6px 2px; }
.nav { display: flex; gap: 2px; align-items: center; flex-wrap: nowrap; overflow-x: auto; min-width: 0; flex: 1 1 auto; scrollbar-width: none; }
.nav a { padding: 9px 14px; border-radius: 10px; text-decoration: none; font-weight: 700; font-size: 13px; line-height: 1; color: var(--vr-ink); white-space: nowrap; border: 2px solid transparent; transition: background 120ms var(--vr-ease); }
.nav a:hover { background: var(--vr-surface-2); color: var(--vr-ink); }
.nav a.active { background: var(--vr-ink); border-color: var(--vr-ink); color: #fff; }
.who { margin-left: auto; display: flex; align-items: center; gap: 14px; flex: none; font-size: 14px; }
.who-acc { display: flex; align-items: center; gap: 8px; padding: 5px 10px; border: 1.5px solid var(--vr-line); border-radius: 10px; font-size: 13px; font-weight: 600; color: var(--vr-muted); white-space: nowrap; }
.who-name { display: flex; align-items: center; gap: 8px; font-weight: 600; white-space: nowrap; }
.who-ava { width: 32px; height: 32px; border-radius: 10px; background: var(--vr-ink); color: #fff; font-weight: 700; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; }
.btn-link { background: none; border: 0; padding: 0; color: var(--vr-muted); cursor: pointer; font: inherit; font-size: 13px; text-decoration: underline; }
.btn-link:hover { color: var(--vr-amber-dark); }
/* кнопка-иконка (выход, копирование ссылки) */
.ibtn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 9px; border: 0; background: transparent; color: var(--vr-muted); cursor: pointer; padding: 0; font: inherit; transition: background 120ms var(--vr-ease), color 120ms var(--vr-ease); }
.ibtn:hover { background: var(--vr-surface-2); color: var(--vr-ink); }
.ibtn:focus-visible { outline: none; box-shadow: var(--vr-ring); }
/* меню-бургер (layouts/application, скрипт [data-menu]): на широком экране обёртка .top-menu прозрачна, кнопки нет */
.top-menu { display: contents; }
.burger, .burger .i-close, .who-out span { display: none; }
/* на узком — шапка в одну строку: логотип и бургер; разделы, компания, имя и выход — выпадающим списком под шапкой */
@media (max-width: 800px) {
  .top-in { padding: 0 16px; min-height: 56px; gap: 12px; }
  .burger { display: inline-flex; margin-left: auto; width: 40px; height: 40px; color: var(--vr-ink); }
  .top.open .burger .i-open { display: none; }
  .top.open .burger .i-close { display: block; }
  .top-menu { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; gap: 12px; padding: 8px 16px 16px; background: var(--vr-surface); border-bottom: 1px solid var(--vr-line); box-shadow: 0 12px 24px rgba(15, 23, 42, .08); max-height: calc(100dvh - 56px); overflow-y: auto; }
  .top.open .top-menu { display: flex; }
  .nav { flex-direction: column; align-items: stretch; gap: 2px; overflow: visible; }
  .nav a { padding: 12px 14px; font-size: 15px; }
  .who { margin-left: 0; flex-direction: column; align-items: stretch; gap: 10px; padding-top: 12px; border-top: 1px solid var(--vr-line); }
  .who-acc { align-self: flex-start; }
  .who form.inline { display: block; }
  .who .who-out { width: 100%; height: auto; justify-content: flex-start; gap: 10px; padding: 11px 14px; border: 1px solid var(--vr-line); border-radius: 10px; color: var(--vr-ink); font-weight: 600; font-size: 15px; }
  .who-out span { display: inline; }
}

/* страница */
.page { max-width: 1440px; margin: 0 auto; padding: 32px 32px 60px; }
@media (max-width: 800px) { .page { padding: 20px 16px 48px; } }
.page-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.page-head h1 { margin: 0; }
.page-head .actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.flash { padding: 10px 14px; border-radius: 10px; margin-bottom: 16px; font-size: 14px; }
.flash.notice { background: var(--vr-ok-bg); color: var(--vr-ok-text); }
.flash.alert { background: var(--vr-err-bg); color: var(--vr-err-text); }
.card { background: var(--vr-surface); border: 1px solid var(--vr-line); border-radius: 14px; padding: 18px 20px; margin-bottom: 16px; }
/* хранилище компании (shared/_storage_meter): полоска занято/лимит, compact — одной строкой в списках */
.storage { display: grid; gap: 6px; }
.storage-cap { font-weight: 700; }
.storage-bar { height: 8px; border-radius: 4px; background: var(--vr-line); overflow: hidden; max-width: 420px; }
.storage-bar i { display: block; height: 100%; background: var(--vr-primary); border-radius: 4px; min-width: 2px; }
.storage.warn .storage-bar i { background: var(--vr-amber-dark); }
.storage.full .storage-bar i { background: var(--vr-err-text); }
.storage-txt { font-size: 13px; color: var(--vr-muted); }
.storage.compact { grid-template-columns: 160px auto; align-items: center; gap: 10px; margin: 12px 4px 0; }
.storage.compact .storage-bar { max-width: none; }
.card-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.card-head h2 { margin: 0; }
.card-head .actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cols.tex-cols { grid-template-columns: 260px minmax(0, 1fr); } /* текстуры: дерево папок и сетка */
@media (max-width: 800px) { .cols, .cols.tex-cols { grid-template-columns: minmax(0, 1fr); } }

/* кнопки */
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 10px; border: 1px solid var(--vr-line); background: var(--vr-surface); color: var(--vr-ink); font: inherit; font-weight: 600; font-size: 14px; text-decoration: none; cursor: pointer; line-height: 1.2; }
.btn:hover { border-color: var(--vr-ink-light); color: var(--vr-ink); }
.btn.primary { background: var(--vr-primary); border-color: var(--vr-primary); color: #fff; } /* главные кнопки — тёмно-синие; янтарь остаётся акцентом */
.btn.primary:hover { background: var(--vr-primary-dark); border-color: var(--vr-primary-dark); color: #fff; }
.btn.dark { background: var(--vr-ink); border-color: var(--vr-ink); color: #fff; }
.btn.dark:hover { background: var(--vr-ink-dark); }
.btn.danger { color: var(--vr-err-text); border-color: #ecc; }
/* модалка подтверждения (layouts/application: #vrConfirm) — вместо window.confirm */
.vr-confirm { width: min(440px, calc(100vw - 32px)); padding: 22px 24px 20px; border: 1px solid var(--vr-line); border-radius: 14px; background: var(--vr-surface); color: var(--vr-ink); box-shadow: 0 16px 48px rgba(15, 23, 42, 0.22); }
.vr-confirm::backdrop { background: rgba(15, 23, 42, 0.45); }
.vr-confirm p { margin: 0 0 18px; font-size: 15px; line-height: 1.5; }
.vr-confirm .acts { display: flex; justify-content: flex-end; gap: 8px; }
.btn.danger:hover { background: var(--vr-err-bg); }
.btn.sm { padding: 5px 10px; font-size: 13px; border-radius: 8px; }
.btn.xs { padding: 3px 8px; font-size: 12px; border-radius: 7px; }
/* «кнопка-заглушка»: действие пока недоступно (нет модели, нет чертежей) */
.btn.off { color: var(--vr-muted); background: var(--vr-bg); border-color: var(--vr-line); cursor: default; pointer-events: none; opacity: .7; }
form.inline { display: inline; }

/* плашки */
.pill { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1.6; vertical-align: middle; }
.pill.id { background: var(--vr-ink); color: #fff; font-variant-numeric: tabular-nums; }
.pill.light { background: #f1ede6; color: var(--vr-ink); border: 1px solid var(--vr-line); }
.pill.warn { background: var(--vr-warn-bg); color: var(--vr-warn-text); }
.pill.ok { background: var(--vr-ok-bg); color: var(--vr-ok-text); }
.pill.err { background: var(--vr-err-bg); color: var(--vr-err-text); }
.pill.amber { background: var(--vr-amber); color: var(--vr-ink-dark); }

/* формы */
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 13px; font-weight: 600; color: var(--vr-ink-light); margin-bottom: 5px; }
.field .hint { display: block; font-size: 12px; color: var(--vr-muted); margin-top: 4px; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=url], input[type=tel], select, textarea {
  width: 100%; padding: 9px 12px; border: 1px solid var(--vr-line); border-radius: 10px; font: inherit; background: #fff; color: var(--vr-ink); }
input:focus, select:focus, textarea:focus { outline: 0; border-color: var(--vr-amber); box-shadow: 0 0 0 3px #f5a52433; }
input[type=file] { font: inherit; font-size: 14px; }
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.form-actions { display: flex; gap: 10px; align-items: center; margin-top: 18px; }
/* строчный поиск в шапке страницы: поле и кнопка в одну линию */
form.search { display: flex; gap: 6px; align-items: center; flex-wrap: nowrap; }
form.search input[type=text] { width: 260px; max-width: 60vw; padding: 7px 12px; }
form.search input[type=submit] { flex: 0 0 auto; }
/* .fill — поле растягивается на всю ширину контейнера (форма новой папки в колонке текстур) */
form.search.fill input[type=text] { flex: 1 1 auto; width: auto; max-width: none; min-width: 0; }
.errors { background: var(--vr-err-bg); color: var(--vr-err-text); padding: 10px 14px; border-radius: 10px; margin-bottom: 14px; font-size: 14px; }
.errors ul { margin: 0; padding-left: 18px; }

/* таблицы */
table.list { width: 100%; border-collapse: collapse; font-size: 14px; }
table.list th { text-align: left; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--vr-muted); padding: 8px 10px; border-bottom: 1px solid var(--vr-line); }
table.list td { padding: 10px; border-bottom: 1px solid #efe9df; vertical-align: middle; }
table.list tr:last-child td { border-bottom: 0; }
table.list td.r { text-align: right; white-space: nowrap; }

/* карточки проектов и изделий */
.item-card { display: flex; flex-direction: column; gap: 6px; background: var(--vr-surface); border: 1px solid var(--vr-line); border-radius: 14px; padding: 14px 16px; text-decoration: none; color: inherit; transition: box-shadow .15s, transform .15s; }
.item-card:hover { box-shadow: 0 8px 24px #0001; transform: translateY(-1px); color: inherit; }
.item-card b { font-size: 15px; }
.item-card .meta { font-size: 12.5px; color: var(--vr-muted); }
.item-card .badges { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.empty { padding: 40px 20px; text-align: center; color: var(--vr-muted); }
.empty p { margin: 0 0 12px; }

/* хлебные крошки над заголовком страницы */
.crumbs { font-size: 13px; color: var(--vr-muted); margin-bottom: 6px; }
.crumbs a { color: var(--vr-muted); text-decoration: none; }
.crumbs a:hover { color: var(--vr-amber-dark); }

/* таблица проектов: строка целиком — ссылка (data-href, скрипт в projects/index), числа справа */
table.list th.num, table.list td.num { text-align: right; }
table.list.rows-link tr[data-href] { cursor: pointer; }
table.list.rows-link tr[data-href]:hover td { background: #fbf9f5; }
table.list td.name a { font-weight: 600; text-decoration: none; }
table.list td.name a:hover { color: var(--vr-amber-dark); }
table.list td .sub { display: block; font-size: 12.5px; color: var(--vr-muted); font-weight: 400; }

/* адрес ссылки клиента одной строкой с кнопками «Скопировать» и «Открыть» */
.copy-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.copy-row code { flex: 1 1 240px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 6px 10px; }

/* карточки изделий в проекте — как в клиентском кабинете: превью, выпуск, счётчики, кнопки */
.pcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.pcard { display: flex; flex-direction: column; background: var(--vr-surface); border: 1px solid var(--vr-line); border-radius: 14px; overflow: hidden; }
.pcard .pic { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 3 / 2; overflow: hidden; background: radial-gradient(circle at 50% 40%, #fffdf9 0, #efe9df 70%, #e6dfd3 100%); }
.pcard a.pic:hover img { transform: scale(1.02); }
.pcard .pic img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .2s; }
.pcard .pic svg { width: 56px; height: 56px; color: #b7b0a4; }
.pcard .pic .note { position: absolute; left: 10px; right: 10px; bottom: 10px; text-align: center; font-size: 12px; color: var(--vr-muted); }
.pcard .body { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 12px 14px 14px; }
.pcard .name { font-weight: 600; font-size: 15px; text-decoration: none; }
.pcard .name:hover { color: var(--vr-amber-dark); }
.pcard .chips { display: flex; gap: 6px; flex-wrap: wrap; }
.pcard .pstats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 8px 0; border-top: 1px solid #efe9df; border-bottom: 1px solid #efe9df; }
.pcard .pstats div { display: flex; flex-direction: column; min-width: 0; }
.pcard .pstats b { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pcard .pstats span { font-size: 11px; color: var(--vr-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pcard .acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: auto; }
.pcard .acts .btn { justify-content: center; }
.pcard .more { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 13px; }
.pcard .more .btn-link { text-decoration: none; font-weight: 600; color: var(--vr-ink-light); }
.pcard .more .btn-link:hover { color: var(--vr-amber-dark); }

/* дроп-зона файлов модели */
.drop { border: 2px dashed var(--vr-line); border-radius: 12px; padding: 22px; text-align: center; cursor: pointer; background: #fffdf9; }
.drop.over { border-color: var(--vr-amber); background: #fff8e8; }
.drop strong { display: block; }
.drop span { font-size: 13px; color: var(--vr-muted); }
.drop input { display: none; }
.picked { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-size: 13px; }
.picked.bad { color: var(--vr-err-text); }

/* текстуры */
.tree a { display: block; padding: 5px 8px; border-radius: 8px; text-decoration: none; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tree a:hover { background: var(--vr-surface-2); }
.tree a.active { background: var(--vr-ink); color: #fff; }
.tree a.shared:not(.active) { color: var(--vr-muted); } /* папки общей библиотеки — приглушённо */
.tree .row { display: flex; align-items: center; gap: 2px; }
.tree .tree-new { margin: 8px 0 2px; }
.tree .tree-cap { margin: 10px 0 4px; padding: 8px 8px 0; border-top: 1px solid var(--vr-line); font-weight: 700; font-size: 11px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--vr-muted); }
.tree .row[hidden] { display: none; }
.tree .row a.name { flex: 1; min-width: 0; }
/* стрелка сворачивания ветки; у папки без подпапок — пустое место той же ширины */
.tree .tg, .tree .tg-space { flex: none; width: 20px; height: 24px; display: inline-flex; align-items: center; justify-content: center; }
.tree .tg { border: 0; background: transparent; padding: 0; color: var(--vr-subtle); cursor: pointer; border-radius: 6px; }
.tree .tg:hover { color: var(--vr-ink); background: var(--vr-surface-2); }
.tree .tg svg { transition: transform 120ms var(--vr-ease); }
.tree .tg[aria-expanded="true"] svg { transform: rotate(90deg); }
.tex-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.tex { background: var(--vr-surface); border: 1px solid var(--vr-line); border-radius: 12px; overflow: hidden; }
.tex .sw { height: 110px; background-size: cover; background-position: center; }
.tex .sw img { width: 100%; height: 110px; object-fit: cover; display: block; }
.tex .body { padding: 8px 10px 10px; }
.tex b { display: block; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tex .meta { font-size: 11.5px; color: var(--vr-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tex .acts { display: flex; gap: 6px; margin-top: 6px; }
.swatch { display: inline-block; width: 28px; height: 28px; border-radius: 6px; border: 1px solid #0002; vertical-align: middle; background-size: cover; background-position: center; margin-right: 8px; }

/* постраничная навигация (pagy series_nav: <nav class="pagy"><a>…</a></nav>) в стиле кнопок проекта */
.pager { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
.pager .small { margin-left: auto; }
nav.pagy { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
nav.pagy a { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; padding: 0 9px; border: 1px solid var(--vr-line); border-radius: 8px; background: var(--vr-surface); color: var(--vr-ink); font-size: 13px; font-weight: 600; text-decoration: none; }
nav.pagy a:hover { border-color: var(--vr-ink-light); }
nav.pagy a[aria-current="page"] { background: var(--vr-ink); border-color: var(--vr-ink); color: #fff; }
nav.pagy a[aria-disabled="true"]:not([aria-current]) { color: var(--vr-muted); border-color: transparent; background: transparent; pointer-events: none; }
nav.pagy a[role="separator"] { border-color: transparent; background: transparent; color: var(--vr-muted); min-width: 20px; padding: 0; }

/* шаги инструкции */
ol.steps { padding-left: 0; list-style: none; counter-reset: st; margin: 0; }
ol.steps li { position: relative; padding-left: 40px; margin: 0 0 14px; }
ol.steps li::before { counter-increment: st; content: counter(st); position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--vr-amber); color: var(--vr-ink-dark); font-weight: 700; display: flex; align-items: center; justify-content: center; }
.note { border-left: 3px solid var(--vr-amber); background: var(--vr-warn-bg); color: var(--vr-warn-text); padding: 8px 12px; border-radius: 0 8px 8px 0; font-size: 13.5px; }

/* подвал */
.foot { border-top: 1px solid var(--vr-line); background: var(--vr-surface); margin-top: 40px; }
.foot-in { max-width: 1440px; margin: 0 auto; padding: 20px 32px; display: flex; gap: 8px 20px; flex-wrap: wrap; align-items: center; font-size: 13px; color: var(--vr-muted); }
.foot nav { display: flex; gap: 20px; flex-wrap: wrap; margin-left: auto; }
.foot a { color: var(--vr-muted); text-decoration: none; }
.foot a:hover { color: var(--vr-ink); }
/* ссылка с иконкой перед текстом (контакты в подвалах, канал в Telegram) */
.ico-link { display: inline-flex; align-items: center; gap: 6px; }
.ico-link svg { flex: none; }

/* правовые страницы (макет дизайн-системы, каркас legal/_frame): белый фон, серая шапка документа с вкладками
   трёх политик, оглавление слева с номерами, разделы с янтарными номерами 01, 02…, маркеры списков — янтарные
   квадратики. Нейтрали «steel» заданы здесь локально (в общих токенах их пока нет) */
.legal { --steel-50: #F7F8FA; --steel-100: #F1F3F6; --steel-200: #E3E7EC; --steel-400: #98A3B1; --steel-500: #5E6B7B;
         min-height: 100vh; display: flex; flex-direction: column; background: #fff; color: var(--vr-ink); font-size: 16px; line-height: 26px; }
html:has(.legal) { scroll-behavior: smooth; }
body:has(> .legal, main > .legal) { background: #fff; }
.legal a { color: var(--vr-ink); text-decoration-color: var(--vr-amber); text-underline-offset: 2px; }
.legal a:hover { color: var(--vr-amber-dark); }
.legal-in { max-width: 1160px; width: 100%; margin: 0 auto; padding: 0 40px; box-sizing: border-box; }
.legal-top { border-bottom: 1px solid var(--steel-200); }
.legal-top .legal-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 18px; padding-bottom: 18px; }
.legal-nav { display: flex; gap: 20px; align-items: center; font-size: 14px; font-weight: 600; }
.legal-hero { background: #F3F4F6; border-bottom: 1px solid var(--steel-200); }
.legal-hero .legal-in { display: grid; gap: 14px; padding-top: 48px; padding-bottom: 28px; }
.legal-eyebrow { font-weight: 700; font-size: 11px; line-height: 1.3; letter-spacing: 0.09em; text-transform: uppercase; color: var(--steel-500); }
.legal-hero h1 { font-weight: 800; font-size: 40px; line-height: 44px; letter-spacing: -0.025em; margin: 0; max-width: 820px; text-wrap: balance; overflow-wrap: anywhere; }
.legal-meta { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 14px; line-height: 21px; color: var(--steel-500); }
.legal-meta .num { font-variant-numeric: tabular-nums; }
.legal-meta b { color: var(--vr-ink); }
.legal-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 14px; }
.legal-tabs a, .legal-tabs span { font-size: 14px; font-weight: 600; padding: 8px 14px; border-radius: 9px; text-decoration: none; white-space: nowrap; }
.legal-tabs a:hover { background: var(--steel-200); color: var(--vr-ink); }
.legal-tabs span { font-weight: 700; background: var(--vr-ink); color: #fff; }
.legal-body { flex: 1; padding-top: 40px; padding-bottom: 40px; }
.legal-doc { display: flex; flex-wrap: wrap; gap: 48px; align-items: flex-start; }
.legal-toc { flex: 0 1 240px; position: sticky; top: 24px; display: grid; gap: 10px; }
.legal-toc .caption { padding: 0 10px; color: var(--steel-500); }
.legal-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; counter-reset: toc; }
.legal-toc li { margin: 0; counter-increment: toc; }
.legal-toc a { display: flex; gap: 10px; padding: 6px 10px; border-radius: 8px; font-size: 14px; line-height: 20px; color: var(--vr-ink); text-decoration: none; }
.legal-toc a::before { content: counter(toc); color: var(--steel-400); font-variant-numeric: tabular-nums; min-width: 18px; }
.legal-toc a:hover { background: var(--steel-100); color: var(--vr-ink); }
.legal-prose { flex: 1 1 420px; min-width: 0; max-width: 720px; counter-reset: sec; }
.legal-prose section { counter-increment: sec; }
.legal-prose section + section { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--steel-200); }
.legal-prose h2 { display: flex; gap: 14px; font-weight: 800; font-size: 24px; line-height: 30px; letter-spacing: -0.015em; margin: 0 0 16px; scroll-margin-top: 24px; }
.legal-prose h2::before { content: counter(sec, decimal-leading-zero); color: var(--vr-amber-dark); font-weight: 600; font-variant-numeric: tabular-nums; min-width: 28px; }
.legal-prose h2 .n { display: none; } /* номер рисует счётчик выше */
.legal-prose p { margin: 0 0 14px; text-wrap: pretty; }
.legal-prose ul { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 10px; }
.legal-prose li { margin: 0; position: relative; padding-left: 20px; text-wrap: pretty; }
.legal-prose li::before { content: ""; position: absolute; left: 0; top: 10px; width: 6px; height: 6px; border-radius: 1px; background: var(--vr-amber); }
.legal-prose .callout { border-left: 3px solid var(--vr-amber); background: var(--vr-warn-bg); padding: 12px 16px; border-radius: 0 10px 10px 0; margin: 0 0 16px; }
.legal-prose .callout p:last-child, .legal-prose .callout ul:last-child { margin-bottom: 0; }
.legal-btn { display: inline-flex; align-items: center; font: inherit; font-weight: 700; font-size: 15px; line-height: 1; padding: 12px 20px; margin: 4px 0; border-radius: 10px; border: 2px solid currentColor; background: transparent; color: var(--vr-ink); cursor: pointer; }
.legal-btn:hover { background: var(--steel-50); }
.legal-table { border: 1px solid var(--steel-200); border-radius: 14px; overflow: hidden; margin: 0 0 16px; font-size: 14px; line-height: 21px; }
.legal-table .tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, .9fr); gap: 16px; padding: 16px 18px; border-bottom: 1px solid var(--steel-200); }
.legal-table .tr > div:first-child { font-weight: 700; }
.legal-table .tr > div:last-child { color: var(--steel-500); }
.legal-table .tr:last-child { border-bottom: 0; }
.legal-table .tr.head { padding: 12px 18px; background: var(--steel-50); font-weight: 700; font-size: 11px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--steel-500); }
.legal-table .tr.head > div { font-weight: 700; color: var(--steel-500); }
.contacts-final { display: grid; grid-template-columns: minmax(0, 140px) minmax(0, 1fr); gap: 12px 20px; margin: 8px 0 0; padding: 20px 24px; background: var(--steel-50); border: 1px solid var(--steel-200); border-radius: 14px; }
.contacts-final .ci { display: contents; }
.contacts-final .k { font-weight: 700; font-size: 11px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--steel-500); padding-top: 4px; }
.contacts-final .v { font-size: 15px; line-height: 23px; }
.legal-foot { border-top: 1px solid var(--steel-200); }
.legal-foot .legal-in { display: flex; flex-wrap: wrap; gap: 8px 20px; padding-top: 24px; padding-bottom: 24px; font-size: 13px; color: var(--steel-500); }
.legal-foot span { margin-right: auto; }
.legal-foot a { color: var(--steel-500); }
@media (max-width: 999px) { .legal-toc { position: static; } }
@media (max-width: 640px) {
  .legal-in { padding: 0 20px; }
  .legal-hero .legal-in { padding-top: 32px; padding-bottom: 20px; }
  .legal-hero h1 { font-size: 30px; line-height: 34px; }
  .legal-body { padding-top: 28px; }
  .legal-prose h2 { font-size: 21px; line-height: 27px; }
  .legal-table .tr { grid-template-columns: 1fr; gap: 6px; }
  .legal-table .tr.head { display: none; }
  .contacts-final { grid-template-columns: 1fr; gap: 4px 0; }
  .contacts-final .v { margin-bottom: 8px; }
}

/* ---------- проекты и страница проекта по макету дизайн-системы (templates/cabinet) ---------- */
.cab-head { display: flex; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 20px; }
.cab-head h1 { font-weight: 800; font-size: 40px; line-height: 44px; letter-spacing: -0.025em; margin: 0; }
.cab-head .sum { font-size: 14px; color: var(--vr-muted); margin-top: 4px; }
.cab-head .right { margin-left: auto; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
/* переключатель текущие / архив: плашки в белой рамке */
.seg-tabs { display: flex; gap: 4px; padding: 4px; background: var(--vr-surface); border: 1px solid var(--vr-line); border-radius: 12px; }
.seg-tabs a, .seg-tabs button { padding: 9px 14px; border-radius: 9px; border: 0; background: transparent; font: inherit; font-size: 13px; font-weight: 600; line-height: 1; text-decoration: none; color: var(--vr-muted); white-space: nowrap; cursor: pointer; } /* неактивная вкладка — приглушённая */
.seg-tabs a:hover, .seg-tabs button:hover { background: var(--vr-surface-2); color: var(--vr-ink); }
.seg-tabs a.active, .seg-tabs button.active { background: var(--vr-ink); color: #fff; font-weight: 700; }
.seg-tabs button:focus-visible { outline: none; box-shadow: var(--vr-ring); }
/* вкладки блока чертежей крупнее — они же заголовок раздела */
.pane-tabs a, .pane-tabs button { font-size: 15px; padding: 10px 16px; }
/* список выпусков */
.rel-list { display: grid; gap: 10px; }
.rel { display: flex; align-items: center; gap: 14px; padding: 12px 16px; background: var(--vr-surface); border: 1px solid var(--vr-line); border-radius: 14px; }
.rel-n { width: 36px; height: 36px; border-radius: 10px; background: var(--vr-steel-100); display: flex; align-items: center; justify-content: center; font-weight: 700; font-variant-numeric: tabular-nums; flex: none; }
.rel-t { min-width: 0; flex: 1; display: grid; gap: 2px; }
.rel-t b { font-size: 15px; font-weight: 700; }
.rel-t span { font-size: 13px; color: var(--vr-muted); }
.rel-a { display: flex; gap: 6px; flex: none; }
@media (max-width: 640px) { .rel { flex-wrap: wrap; } .rel-a { width: 100%; } }
/* поиск с иконкой; кнопка «Найти» скрыта — поиск по Enter */
form.search.cab { position: relative; }
form.search.cab .ic { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--vr-subtle); display: flex; pointer-events: none; }
form.search.cab input[type=text] { width: 340px; max-width: 60vw; padding: 11px 12px 11px 40px; border: 1.5px solid var(--vr-line-strong); border-radius: 10px; font-size: 15px; }
form.search.cab input[type=text]:focus { border-color: var(--vr-amber-dark); box-shadow: var(--vr-ring); }
form.search.cab input[type=submit] { position: absolute; left: -9999px; }
/* кнопки макета: главная янтарная с рамкой 2px, тёмная, контурная; с иконкой */
.btn.lg { padding: 12px 20px; font-size: 15px; font-weight: 700; border-width: 2px; gap: 8px; }
.btn.primary.lg { color: #fff; }
.btn.dark { border-width: 2px; }
.btn.outline { background: transparent; border: 2px solid currentColor; color: var(--vr-ink); font-weight: 700; }
.btn.outline:hover { background: var(--vr-surface-2); border-color: currentColor; }
.btn svg { flex: none; }
/* плашки (Chip дизайн-системы) */
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 20px; white-space: nowrap; border: 1px solid var(--vr-line); background: var(--vr-surface); color: var(--vr-ink); }
.chip.ok { background: var(--vr-ok-bg); color: var(--vr-ok-text); border-color: transparent; }
.chip.warn { background: var(--vr-warn-bg); color: var(--vr-warn-text); border-color: transparent; }
.chip.muted { background: var(--vr-steel-100); color: var(--vr-muted); border-color: transparent; }
.chip.amber { background: var(--vr-amber); color: var(--vr-ink-dark); border-color: transparent; }
/* непрочитанные замечания (новые с последнего открытия изделия): янтарная точка перед текстом; плашка — в кабинете клиента,
   .rmk-unread — в таблице заказа и на карточке изделия */
.chip.unread, .rmk-unread { position: relative; }
.chip.unread::before, .rmk-unread::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--vr-amber); box-shadow: 0 0 0 3px var(--vr-warn-bg); margin-right: 8px; vertical-align: 1px; }
.chip.unread { border-color: var(--vr-amber); background: var(--vr-warn-bg); color: var(--vr-warn-text); }
.rmk-unread b, .rmk-new { color: var(--vr-warn-text); font-weight: 700; }
.chip svg { width: 14px; height: 14px; }
/* таблица проектов: сеткой, строка — ссылка */
.ptable { background: var(--vr-surface); border: 1px solid var(--vr-line); border-radius: 14px; overflow-x: auto; }
.ptable .pr { min-width: 1120px; display: grid; grid-template-columns: 56px minmax(240px, 2.4fr) 90px 170px 170px minmax(190px, 1.2fr) 110px 32px; gap: 16px; align-items: center; padding: 14px 20px; border-bottom: 1px solid #EEF1F4; font-size: 14px; color: inherit; text-decoration: none; transition: background 120ms var(--vr-ease); }
.ptable .pr:last-child { border-bottom: 0; }
.ptable .pr.head { padding: 12px 20px; background: var(--vr-surface-2); border-bottom: 1px solid var(--vr-line); font-weight: 700; font-size: 11px; line-height: 1.3; letter-spacing: 0.09em; text-transform: uppercase; color: var(--vr-muted); }
.ptable .pr[data-href] { cursor: pointer; }
.ptable .pr[data-href]:hover { background: var(--vr-surface-2); }
.ptable .pr[data-href]:focus-visible { outline: none; box-shadow: inset var(--vr-ring); }
.ptable .num { font-weight: 500; font-variant-numeric: tabular-nums; }
.ptable .r { text-align: right; }
.ptable .pname { font-size: 15px; font-weight: 700; line-height: 21px; }
.ptable .psub, .ptable .small { font-size: 13px; color: var(--vr-muted); }
.ptable .dim { color: var(--vr-subtle); }
.ptable .chev { color: var(--vr-subtle); display: flex; }
.ptable .cab-link { display: flex; align-items: center; gap: 6px; }
.ptable .cab-link .ibtn { width: 28px; height: 28px; }
.ptable .empty-row { padding: 48px 20px; text-align: center; color: var(--vr-muted); font-size: 15px; }
.bar { display: block; width: 100%; height: 4px; border-radius: 2px; background: var(--vr-line); overflow: hidden; margin-top: 6px; }
.bar i { display: block; height: 100%; background: var(--vr-amber); border-radius: 2px; }
/* страница проекта: изделия слева, выбранное изделие и его чертежи справа */
.pj-crumbs { display: flex; align-items: center; gap: 8px; font-size: 14px; margin-bottom: 20px; }
.pj-crumbs a { color: var(--vr-muted); text-decoration: none; }
.pj-crumbs a:hover { color: var(--vr-amber-dark); }
.pj-crumbs .sep { color: var(--vr-subtle); }
.pj-crumbs b { font-weight: 600; }
.pj-head { display: flex; align-items: flex-start; gap: 20px; flex-wrap: wrap; margin-bottom: 20px; }
.pj-head .eyebrow { font-weight: 700; font-size: 11px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--vr-muted); margin-bottom: 6px; }
.pj-head h1 { font-weight: 800; font-size: 36px; line-height: 40px; letter-spacing: -0.025em; margin: 0 0 6px; }
.pj-head .sub { font-size: 14px; color: var(--vr-muted); }
.views { white-space: nowrap; }
.views svg { vertical-align: -3px; margin-right: 4px; }
.views small { font-size: 12px; font-weight: 500; margin-left: 6px; }
.pj-head .right { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
/* таблица всех изделий в сводке: строка — кнопка, открывает экран изделия */
.items-table .pt-head { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--vr-line); }
.items-table .pt-head h2 { font-weight: 700; font-size: 20px; line-height: 26px; letter-spacing: -0.01em; margin: 0; }
.items-table .pt-head span { font-size: 14px; color: var(--vr-muted); }
.items-table .pt-head .right { margin-left: auto; }
/* артикул заказа или изделия в Базисе под названием — плашкой */
.art { font-family: inherit; font-weight: 700; font-size: 13px; color: var(--vr-ink); background: var(--vr-steel-100); border: 1px solid var(--vr-line); border-radius: 8px; padding: 2px 8px; white-space: nowrap; }
.pj-head .sub .art { font-size: 14px; }
.items-table .pr { min-width: 960px; grid-template-columns: 64px minmax(180px, 1fr) 64px 130px 150px 150px 140px 18px; width: 100%; text-align: left; font: inherit; background: none; border-width: 0 0 1px; border-style: solid; border-color: #EEF1F4; }
.items-table .pr.head { background: var(--vr-surface-2); border-bottom: 1px solid var(--vr-line); }
.items-table .thumb { width: 64px; height: 48px; border-radius: 8px; background: var(--vr-steel-100); border: 1px solid var(--vr-line); overflow: hidden; display: flex; align-items: center; justify-content: center; color: var(--vr-steel-300); }
.items-table .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.items-table .thumb svg { width: 22px; height: 26px; }
.items-table .psub { display: block; font-weight: 400; }
/* minmax(0, …) у колонок блока изделия — иначе колонка не ужимается уже своего содержимого и на телефоне страница
   прокручивается вбок */
.pj-item { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.item-hero { background: var(--vr-surface); border: 1px solid var(--vr-line); border-radius: 14px; overflow: hidden; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
/* превью модели на светло-сером поле (макет 28.09: без тёмной панели) */
.item-hero .scene { position: relative; min-height: 300px; background-color: #EDF0F3; display: flex; align-items: center; justify-content: center; color: var(--vr-steel-300); order: 2; } /* превью справа, характеристики слева */
.item-hero .scene img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 24px; box-sizing: border-box; }
.item-hero .scene > svg { width: 92px; height: 105px; }
.item-hero .scene .eyebrow { position: absolute; left: 14px; top: 12px; font-weight: 700; font-size: 11px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--vr-muted); }
.item-hero .scene .scene-link { position: absolute; inset: 0; z-index: 1; border-radius: inherit; } /* клик по превью целиком открывает 3D */
.item-hero .scene:has(.scene-link:hover) img { transform: scale(1.02); }
.item-hero .scene img { transition: transform 200ms var(--vr-ease); }
.item-hero .scene .open { position: absolute; right: 12px; bottom: 12px; z-index: 2; }
.item-hero .scene .note { position: absolute; left: 14px; right: 14px; bottom: 14px; text-align: center; font-size: 12px; color: var(--vr-muted); }
.item-hero .info { padding: 20px; display: grid; gap: 14px; align-content: start; }
.item-hero .info .name-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.item-hero .info .name { font-size: 24px; font-weight: 800; line-height: 30px; letter-spacing: -0.015em; }
.item-hero .info .meta { font-size: 13px; color: var(--vr-muted); margin-top: 2px; }
.specs { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; border-top: 1px solid var(--vr-line); }
.specs div { display: grid; gap: 2px; padding: 10px 0; border-bottom: 1px solid var(--vr-line); }
.specs span { font-weight: 700; font-size: 11px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--vr-muted); }
.specs b { font-weight: 500; font-size: 15px; font-variant-numeric: tabular-nums; }
.item-hero .acts { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; font-size: 13px; }
/* страница изделия, ниже шапки: слева чертежи (вкладки), справа панель замечаний (products/_item) */
.item-lower { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 20px; align-items: start; }
.sheets-col { display: grid; gap: 20px; min-width: 0; }
@media (max-width: 1100px) { .item-lower { grid-template-columns: minmax(0, 1fr); } }
.remarks-col { padding: 0; display: flex; flex-direction: column; max-height: 720px; }
.remarks-col .rmk-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--vr-line); }
.remarks-col .rmk-head h2 { margin: 0; font-size: 17px; font-weight: 700; }
.remarks-col .rmk-empty { padding: 28px 16px; color: var(--vr-muted); font-size: 13.5px; text-align: center; }
.remarks-col .rmk-list { overflow: auto; padding: 4px 16px 10px; }
.remarks-col .rmk-item { display: grid; grid-template-columns: 30px 1fr; column-gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--vr-line); color: inherit; text-decoration: none; }
.remarks-col .rmk-item:last-child { border-bottom: 0; }
.remarks-col .rmk-item:hover .rmk-txt { color: var(--vr-primary); }
.remarks-col .rmk-n { width: 30px; height: 30px; border: 1.5px solid var(--vr-line-strong); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; color: var(--vr-muted); background: #fff; }
.remarks-col .rmk-item.fresh .rmk-n { border-color: var(--vr-amber); background: var(--vr-amber); color: var(--vr-ink); }
.remarks-col .rmk-item.done .rmk-n { border-style: dashed; }
.remarks-col .rmk-body { min-width: 0; display: block; }
.remarks-col .rmk-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--vr-muted); line-height: 30px; }
.remarks-col .rmk-meta b { color: var(--vr-ink); font-weight: 700; }
.remarks-col .rmk-meta .rmk-where { margin-left: auto; white-space: nowrap; }
.remarks-col .rmk-txt { display: block; font-size: 14.5px; line-height: 1.4; margin-top: 4px; white-space: pre-wrap; overflow-wrap: anywhere; }
.remarks-col .rmk-item.done .rmk-txt { color: var(--vr-muted); }
.remarks-col .rmk-reply { display: block; margin-top: 10px; padding: 2px 0 2px 12px; border-left: 2px solid var(--vr-line-strong); }
.remarks-col .rmk-reply .rmk-meta { line-height: 1.4; }
.remarks-col .rmk-reply .rmk-txt { font-size: 14px; }
.remarks-col .rmk-fixed { display: inline-block; margin-top: 10px; padding: 5px 11px; border: 1px solid var(--vr-line-strong); border-radius: 99px; font-size: 12.5px; font-weight: 600; color: var(--vr-muted); background: #fff; }
.sheets-head { display: flex; align-items: center; gap: 12px; }
.sheets-head h2 { font-weight: 700; font-size: 22px; line-height: 28px; letter-spacing: -0.01em; margin: 0; }
.sheets-head .cnt { font-size: 14px; color: var(--vr-muted); font-variant-numeric: tabular-nums; }
.sheets-head .right { margin-left: auto; display: flex; gap: 8px; }
.pane-hint { margin: 0 0 12px; font-size: 13px; line-height: 1.4; color: var(--vr-muted); } /* подсказка под вкладками «Редактор чертежей» / «Выпуски»: кто что видит */
.sheets { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.sheet { display: block; padding: 10px; background: var(--vr-surface); border: 1px solid var(--vr-line); border-radius: 14px; color: inherit; text-decoration: none; transition: border-color 120ms var(--vr-ease), box-shadow 120ms var(--vr-ease); }
.sheet:hover { border-color: var(--vr-line-strong); box-shadow: 0 1px 2px rgba(15,23,42,.05); color: inherit; }
.sheet .paper { aspect-ratio: 1.414; background: var(--vr-paper); border-radius: 6px; position: relative; border: 1px solid var(--vr-line); overflow: hidden; }
.sheet .paper img { width: 100%; height: 100%; object-fit: contain; display: block; }
.sheet .paper .frame { position: absolute; inset: 7% 4% 7% 9%; border: 1.5px solid var(--vr-ink); }
.sheet .paper .stamp { position: absolute; right: 4%; bottom: 7%; width: 36%; }
.sheet .body { display: grid; gap: 6px; padding: 10px 2px 2px; }
.sheet .title { display: flex; gap: 8px; align-items: baseline; }
.sheet .title .n { font-weight: 500; font-variant-numeric: tabular-nums; color: var(--vr-amber-dark); flex: none; }
.sheet .title b { font-size: 14px; font-weight: 600; line-height: 19px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; } /* не выше двух строк, полное — в подсказке карточки */
.sheet .st { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 12px; color: var(--vr-muted); }
.empty-dash { border: 2px dashed var(--vr-line-strong); border-radius: 14px; background: var(--vr-surface); padding: 40px 24px; display: grid; justify-items: center; gap: 10px; text-align: center; }
.empty-dash .ico { width: 52px; height: 52px; border-radius: 14px; background: var(--vr-warn-bg); color: var(--vr-warn-text); display: inline-flex; align-items: center; justify-content: center; }
.empty-dash b { font-size: 18px; font-weight: 700; }
.empty-dash p { margin: 0; font-size: 14px; color: var(--vr-muted); max-width: 380px; }
.cab-card { background: var(--vr-surface); border: 1px solid var(--vr-line); border-radius: 14px; padding: 16px 18px; }
@media (max-width: 640px) { .cab-head h1 { font-size: 32px; line-height: 36px; } .pj-head h1 { font-size: 28px; line-height: 32px; } form.search.cab input[type=text] { width: 100%; max-width: none; } .cab-head .right, form.search.cab { flex: 1 1 100%; } }
/* страница изделия на телефоне: вкладки чертежей на всю ширину, «Выпустить» под ними, листы в одну колонку */
@media (max-width: 640px) {
  .sheets-head { flex-wrap: wrap; }
  .sheets-head .pane-tabs { flex: 1 1 100%; min-width: 0; }
  .sheets-head .pane-tabs button { flex: 1 1 auto; padding: 10px 8px; font-size: 14px; }
  .sheets-head .right { margin-left: 0; flex: 1 1 100%; }
  .sheets-head .right .btn { width: 100%; justify-content: center; }
  .sheets { grid-template-columns: minmax(0, 1fr); }
}

/* списки заказов и изделий на телефоне — карточками вместо таблицы. Ячейки строк .ptable помечены классами c-*,
   подпись над значением — из data-l; .m-only — то, что показывается только в карточке (ссылка клиента, замечания заказа) */
.m-only { display: none; }
@media (max-width: 640px) {
  .m-only { display: revert; }
  .ptable { display: grid; gap: 10px; background: none; border: 0; border-radius: 0; overflow: visible; }
  .ptable .pr.head, .ptable .c-num, .ptable .c-cnt, .ptable .c-chev, .ptable .c-pub .small { display: none; }
  .ptable .pr, .ptable .pr:last-child { min-width: 0; gap: 10px 12px; align-items: start; padding: 14px 16px; background: var(--vr-surface); border: 1px solid var(--vr-line); border-radius: 14px; }
  .ptable .pr > [data-l]::before { content: attr(data-l); display: block; margin-bottom: 2px; font-weight: 700; font-size: 10.5px; line-height: 1.3; letter-spacing: 0.09em; text-transform: uppercase; color: var(--vr-muted); }
  .ptable .empty-row { background: var(--vr-surface); border: 1px solid var(--vr-line); border-radius: 14px; }
  .ptable .c-name { grid-area: name; }
  /* заказ: название; выпущено, замечания, просмотры; кабинет клиента и дата */
  .ptable .pr { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: "name name name" "pub rmk views" "cab cab date"; }
  .ptable .c-pub { grid-area: pub; }
  .ptable .c-rmk { grid-area: rmk; }
  .ptable .c-views { grid-area: views; }
  .ptable .c-cab { grid-area: cab; align-self: center; }
  .ptable .c-date { grid-area: date; align-self: center; text-align: right; font-size: 13px; }
  /* изделие заказа: превью, название и статус; выпуск и замечания; версия и дата модели; кнопка ссылки клиента */
  .items-table .pt-head { flex-wrap: wrap; gap: 4px 12px; padding: 0 4px; border: 0; }
  .items-table .pr { grid-template-columns: 64px repeat(3, minmax(0, 1fr)); grid-template-areas: "thumb name name name" "thumb status status status" "rel rel rmk rmk" "ver ver date date"; }
  .items-table .c-thumb { grid-area: thumb; }
  .items-table .c-status { grid-area: status; }
  .items-table .c-rel { grid-area: rel; }
  .items-table .c-ver { grid-area: ver; }
  .items-table .c-date { grid-area: date; align-self: start; text-align: left; font-size: inherit; }
  .items-table .c-link { grid-column: 1 / -1; }
  .ptable .c-link .btn, table.list.m-cards td.m-only .btn { width: 100%; justify-content: center; }
  /* изделия без заказа (таблица table.list.m-cards): строка — карточка, подпись у ячейки с data-l — перед значением */
  table.list.m-cards, table.list.m-cards tbody { display: block; }
  table.list.m-cards thead { display: none; }
  table.list.m-cards tr { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 12px 8px; border-bottom: 1px solid #efe9df; }
  table.list.m-cards tr:last-child { border-bottom: 0; }
  table.list.m-cards td { display: block; padding: 0; border: 0; }
  table.list.m-cards td.name, table.list.m-cards td.m-only, table.list.m-cards td.r { flex: 1 1 100%; }
  table.list.m-cards td.r { text-align: left; white-space: normal; }
  table.list.m-cards td.m-only:empty { display: none; }
  table.list.m-cards td[data-l]::before { content: attr(data-l) ": "; font-size: 13px; color: var(--vr-muted); }
}

/* панель оператора: тёмная шапка и плитки цифр */
.op-top { background: var(--vr-ink); border-bottom-color: var(--vr-ink-dark); }
.op-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--vr-paper); font-weight: 700; font-size: 14px; letter-spacing: 0.02em; }
.op-brand img { height: 30px; display: block; }
.op-top .nav a { color: #C9CDD6; }
.op-top .nav a:hover { background: var(--vr-ink-light); color: #fff; }
.op-top .nav a.active { background: var(--vr-amber); color: var(--vr-ink-dark); }
.op-top .btn-link { color: #C9CDD6; }
.op-top .btn-link:hover { color: var(--vr-amber); }
.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin-bottom: 18px; }
.stat { background: var(--vr-surface); border: 1px solid var(--vr-line); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.stat b { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
.stat span { font-size: 12.5px; color: var(--vr-muted); }
.stat.warn { border-color: var(--vr-amber); background: var(--vr-warn-bg); }

/* вход */
.auth { max-width: 400px; margin: 40px auto; }
.auth .card { padding: 28px 26px; }
.auth h1 { font-size: 22px; margin-bottom: 18px; }
.auth .links { margin-top: 14px; font-size: 13px; }
.auth-legal { margin-top: 18px; text-align: center; font-size: 12px; color: var(--vr-muted); }
.auth-legal a { color: var(--vr-muted); }
/* переключатель из двух вариантов (заявка на доступ: фрилансер / компания): радио спрятаны, подписи — сегменты */
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border: 1px solid var(--vr-line); border-radius: 10px; overflow: hidden; background: #fff; }
.seg label { margin: 0; cursor: pointer; }
.seg label + label { border-left: 1px solid var(--vr-line); }
.seg input { position: absolute; opacity: 0; width: 0; height: 0; }
.seg span { display: block; padding: 9px 6px; text-align: center; font-size: 13px; font-weight: 600; color: var(--vr-ink-light); white-space: nowrap; }
.seg input:checked + span { background: var(--vr-ink); color: #fff; }
.seg input:focus-visible + span { box-shadow: inset 0 0 0 3px #f5a52466; }