:root {
  --bg: #f5f4f1;
  --card: #ffffff;
  --ink: #1d1d1f;
  --muted: #6e6e73;
  --suggest: #8e8e93;          /* серое — предложение системы (админ 20.10: «тусклым серым») */
  --line: #e4e2dd;
  --accent: #3a5ccc;
  --accent-soft: #e8edfb;
  --ok: #2f9e5b;
  --bad: #c2372f;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(0,0,0,.04), 0 4px 16px rgba(0,0,0,.05);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; background: var(--bg); }
/* Студия — приложение, а не страница (shell.js): текст интерфейса не выделяется, кроме полей ввода
   (и названий файлов — finder.css); картинки и видео не тянутся «призраком». */
body { -webkit-user-select: none; user-select: none; }
input, textarea, [contenteditable]:not([contenteditable=false]) { -webkit-user-select: text; user-select: text; }
img, video, a { -webkit-user-drag: none; }
.keys-btn { font-size: 15px; line-height: 1; padding: 6px 9px; }
@media (pointer: coarse) { .keys-btn { display: none; } }
.keys-veil { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; background: rgba(29,29,31,.28);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.keys-box { width: min(440px, calc(100vw - 32px)); background: var(--card); border-radius: var(--radius); padding: 20px 22px 18px;
  box-shadow: 0 10px 40px rgba(0,0,0,.18); }
.keys-title { margin: 0 0 14px; font-size: 15px; font-weight: 600; line-height: 1.4; }
.keys-check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); margin-bottom: 18px; }
.keys-row { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
button, select, textarea, input { font: inherit; color: inherit; }
button {
  border: 0; border-radius: 10px; padding: 8px 14px; cursor: pointer;
  background: var(--accent); color: #fff; font-weight: 500;
}
button:disabled { opacity: .45; cursor: default; }
button.ghost { background: var(--card); color: var(--ink); border: 1px solid var(--line); }
button.small { padding: 6px 10px; font-size: 13px; }
select { border: 1px solid var(--line); border-radius: 10px; padding: 7px 10px; background: var(--card); max-width: 320px; }
.mono { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 13px; min-width: 56px; text-align: right; }

.top {
  display: flex; align-items: center; gap: 16px; padding: 12px 20px;
  background: var(--card); border-bottom: 1px solid var(--line);
}
.top form { margin: 0; }
.brand { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 17px; }
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
.tabs { display: flex; gap: 4px; flex: 1; }
.tabs button { background: transparent; color: var(--muted); font-weight: 500; padding: 7px 12px; }
.tabs button.active { background: var(--accent-soft); color: var(--accent); }

.panel { padding: 16px 20px; }
.card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px; }

.hint { color: var(--muted); font-size: 13px; margin: 0; }

/* ── чат внизу экрана на всех вкладках (админ 20.10) ─────────────────── */
:root { --dock: 104px; }                           /* сколько места внизу занимает чат */
.panel { padding-bottom: calc(var(--dock) + 8px) !important; }
.dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  padding: 18px 20px 10px; display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: linear-gradient(to bottom, rgba(245,244,241,0), var(--bg) 22px);
  pointer-events: none;
}
.dock > * { pointer-events: auto; width: 100%; max-width: 760px; }
.msgs { max-height: 40vh; overflow-y: auto; display: flex; flex-direction: column; gap: 8px;
        background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px; }
.chat-form {
  display: flex; align-items: flex-end; gap: 8px; margin: 0; padding: 8px 8px 8px 16px;
  background: var(--card); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow);
}
.chat-form textarea { flex: 1; min-width: 0; resize: none; border: 0; outline: none; background: transparent; padding: 8px 0; max-height: 30vh; line-height: 1.4; }
.chat-form .send { width: 36px; height: 36px; padding: 0; border-radius: 50%; flex: none; font-size: 18px; line-height: 1; }
.dock-note { margin: 0; font-size: 12px; color: var(--muted); text-align: center; }

/* ── вкладка «Генерация» ─────────────────────────────────────────── */
.gen-form { display: flex; flex-direction: column; gap: 12px; }
.seg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; background: var(--bg); padding: 4px; border-radius: 12px; }
.seg button { background: transparent; color: var(--muted); padding: 8px 6px; font-weight: 500; }
.seg button.active { background: var(--card); color: var(--ink); box-shadow: var(--shadow); }
.seg button.locked { opacity: .5; }
.locked-note { margin: 0; font-size: 13px; color: var(--bad); background: #fbe6e4; padding: 8px 10px; border-radius: 10px; }
#gen-form { display: flex; flex-direction: column; gap: 12px; }
#gen-form textarea { resize: vertical; border: 1px solid var(--line); border-radius: 10px; padding: 10px; background: var(--bg); min-height: 96px; }
.fields { display: flex; flex-direction: column; gap: 10px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field-label { font-size: 12px; color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips button { background: var(--bg); color: var(--ink); border: 1px solid transparent; padding: 6px 12px; font-weight: 400; font-size: 13px; }
.chips button.active { background: var(--accent-soft); color: var(--accent); border-color: #c9d4f5; font-weight: 500; }
#gen-submit { padding: 11px; }
.jobs { display: flex; flex-direction: column; gap: 6px; }
.job { display: flex; gap: 8px; align-items: baseline; font-size: 13px; padding: 8px 10px; border-radius: 10px; background: var(--bg); }
.job-title { font-weight: 600; white-space: nowrap; }
.job-text { color: var(--muted); }
.job[data-state="running"] .job-text::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--accent); animation: pulse 1s ease-in-out infinite; }
.job[data-state="failed"] { background: #fbe6e4; }
.job[data-state="failed"] .job-text { color: var(--bad); }
.job[data-state="done"] .job-text { color: var(--ok); }
@keyframes pulse { 50% { opacity: .3; } }
.feed { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.draft { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; display: flex; flex-direction: column; }
/* Рамка строго квадратная: высокая картинка не растягивает карточку и не ломает ряд. */
.draft .media { background: #ecebe7; position: relative; aspect-ratio: 1 / 1; overflow: hidden; }
.draft .media img, .draft .media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
.draft .media.audio { aspect-ratio: auto; padding: 18px 10px; }
.draft .media audio { width: 100%; }
.draft-meta { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 4px; }
.draft-head { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; }
.draft-head span { color: var(--muted); font-size: 12px; white-space: nowrap; }
.draft-meta p { margin: 0; font-size: 13px; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.draft-meta small { color: var(--ok); font-size: 12px; }
.draft-meta small:empty { display: none; }
#feed-more { margin: 14px auto 0; display: block; }

body.login { display: flex; align-items: center; justify-content: center; }
.login .card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 28px 32px; max-width: 380px; margin: 16px; }
.login p { color: var(--muted); line-height: 1.5; }
.login .brand { margin-bottom: 20px; }
#login-status { margin: 16px 0 0; }
.login-match { margin: 16px 0 0; }
.login-match b { color: var(--ink); font-size: 22px; letter-spacing: 1px; margin-left: 4px; }
a.button {
  display: inline-block; text-decoration: none; border-radius: 10px; padding: 10px 16px;
  background: var(--accent); color: #fff; font-weight: 500;
}

@media (max-width: 860px) {
  .top { flex-wrap: wrap; gap: 10px; padding: 10px 16px; }
  .brand { flex: 1; }
  .tabs { order: 3; flex-basis: 100%; overflow-x: auto; }
  .tabs button { white-space: nowrap; }
  .studio-bar { flex-wrap: wrap; }
  .studio-bar select { flex-basis: calc(100% - 70px); max-width: none; }
  .panel { padding: 12px 16px; }
  .scrub { flex-wrap: wrap; }
  .scrub input[type=range] { flex-basis: calc(100% - 66px); }
  .scrub button { flex: 1; }
  .studio { height: auto; }
  .stage { height: auto; }
  .player { height: 62vh; flex: none; }
  .studio.panel { padding-bottom: calc(var(--dock) + 8px) !important; }
  .dock { padding: 14px 10px 8px; }
  .feed { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
}

/* ── тумблер клиента в шапке + вкладка «Клиенты» (бриф) ───────────────── */
.client-switch { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); min-width: 0; }
.client-switch select { max-width: 220px; min-width: 0; }
.principal-switch select { max-width: 180px; min-width: 0; }
/* «вид: tier1» — владелец смотрит не своим тиром (Вид как тир в /admin бота) */
.view-tier { font-size: 12px; color: var(--accent); background: var(--accent-soft); border-radius: 999px;
  padding: 2px 9px; white-space: nowrap; }
.clients { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 16px; align-items: start; max-width: 1180px; margin: 0 auto; }
.clients:has(.brief-nav[hidden]) { grid-template-columns: minmax(0, 1fr); max-width: 640px; }
.brief-nav { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 2px; }
.brief-nav button { background: transparent; color: var(--muted); text-align: left; font-weight: 500; padding: 8px 12px; }
.brief-nav button:hover { background: var(--accent-soft); color: var(--accent); }
.clients-body { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.brief-head { position: relative; }
.brief-head h1 { font-size: 22px; margin: 0 0 6px; }
.brief-status { position: absolute; top: 20px; right: 20px; font-size: 12px; color: var(--ok); }
.brief-sec { display: flex; flex-direction: column; gap: 18px; scroll-margin-top: 16px; }
.brief-sec h2 { font-size: 17px; margin: 0; }
.bf { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.bf-label { font-weight: 600; font-size: 14px; }
.bf-label .req { color: var(--accent); }
.bf-hint { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.4; }
.bf-err { margin: 0; font-size: 13px; color: var(--bad); }
.bf input:not([type]), .bf input[type=text], .bf textarea, .brief-new input {
  width: 100%; min-width: 0; border: 1px solid var(--line); border-radius: 10px; padding: 9px 10px; background: var(--bg);
}
.bf textarea { resize: vertical; min-height: 64px; }
.bf textarea.grow { resize: none; overflow: hidden; line-height: 1.4; }
.bf textarea.one { min-height: 0; }
.bf-rows { display: flex; flex-direction: column; gap: 8px; }
.bf-row { display: flex; gap: 8px; align-items: flex-start; }
.bf-row > :first-child { flex: 1; min-width: 0; }
.bf-add { align-self: flex-start; }
.bf-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bf-color { display: grid; grid-template-columns: 40px 110px minmax(0, 1fr); gap: 8px; align-items: center; }
.bf-color input[type=color] { width: 40px; height: 38px; padding: 2px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); }
.bf-font { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.bf-check { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); white-space: nowrap; }
.bf-ref { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 12px; background: var(--bg); }
.bf-ref input, .bf-ref textarea { background: var(--card) !important; }
.bf-ref .chips button:not(.active) { background: var(--card); border-color: var(--line); }
.brief-new p { margin: 0 0 12px; }
.brief-new-form { display: flex; gap: 8px; }

@media (max-width: 860px) {
  .client-switch { order: 2; }
  .principal-switch { order: 2; }
  .top form { order: 2; }      /* «Выйти» — последним, как на широком экране */
  .client-switch select { max-width: 160px; }
  .clients { grid-template-columns: minmax(0, 1fr); }
  .brief-nav { display: none; }
  .brief-status { position: static; display: block; }
  .bf-grid2, .bf-font { grid-template-columns: minmax(0, 1fr); }
  .bf-color { grid-template-columns: 40px minmax(0, 1fr); }
  .bf-color > :last-child { grid-column: 1 / -1; }
  .brief-new-form { flex-direction: column; }
}

/* файлы брифа */
.bf-files { display: flex; flex-direction: column; gap: 8px; }
.bf-file-list { display: flex; flex-direction: column; gap: 8px; }
.bf-file-list:empty { display: none; }
.bf-file { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; padding: 8px; border-radius: 12px; background: var(--bg); }
.bf-file img, .bf-file-icon { width: 64px; height: 64px; flex: none; border-radius: 8px; object-fit: contain; background: #ecebe7; }
.bf-file-icon { display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; color: var(--muted); }
.bf-file-meta { flex: 1 1 180px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.bf-file-meta a { font-size: 13px; color: var(--accent); overflow-wrap: anywhere; }
.bf-file .bf-file-meta :is(input, textarea) { background: var(--card); }
.bf-move { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.bf-drop { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border: 1px dashed var(--line); border-radius: 10px; }
.bf-drop.over { border-color: var(--accent); background: var(--accent-soft); }
.bf-drop .bf-hint { font-size: 13px; }
.bf-jobs { display: flex; flex-direction: column; gap: 6px; }
.bf-jobs:empty { display: none; }
.bf-jobs .job { flex-wrap: wrap; }
.bf-jobs .job-title { overflow-wrap: anywhere; white-space: normal; }
.job-actions { display: flex; gap: 6px; flex-basis: 100%; }

/* разбор материалов в поля */
.bf-tag { margin-left: 8px; font-size: 11px; font-weight: 500; padding: 2px 8px; border-radius: 99px; background: #fff4d6; color: #8a6200; vertical-align: 1px; }
.brief-head > button { margin-top: 10px; }
.bf-link { display: flex; gap: 8px; }
.bf-link :is(input, textarea) { flex: 1; min-width: 0; }

/* БК: откуда значение, спор, «в файлах другое» */
.bf-tag a, .bf-src a, .bf-alt a { color: inherit; text-decoration: underline; text-decoration-color: rgba(0,0,0,.25); overflow-wrap: anywhere; }
.bf-src { margin-top: -4px; font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.bf-alt { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 10px; background: #fff4d6; }
.bf-alt-head { margin: 0; font-size: 13px; font-weight: 600; color: #8a6200; }
.bf-other { background: var(--bg); }
.bf-other summary { cursor: pointer; font-size: 13px; color: var(--muted); }
.bf-alt-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 13px; }
.bf-alt-val { min-width: 0; overflow-wrap: anywhere; }
.bf-alt-src { color: var(--muted); min-width: 0; overflow-wrap: anywhere; }
.bf-alt-row button { margin-left: auto; }
.bf-swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; border: 1px solid var(--line); margin-right: 6px; vertical-align: -1px; }

/* мозг на приёме: подпись к загрузке, «Понял так», расхождение подписи с файлом */
.bf-understood { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.4; overflow-wrap: anywhere; }
.bf-mismatch { margin: 0; font-size: 13px; line-height: 1.4; padding: 6px 8px; border-radius: 8px; background: #fff4d6; color: #8a6200; }

/* вкладка «Клиенты»: список клиентов-папок → папка клиента → анкета (админ 20.10) */
.cl-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cl-head h1 { font-size: 22px; margin: 0; }
.crumbs { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; min-width: 0; font-size: 20px; }
.crumbs b { font-weight: 700; overflow-wrap: anywhere; }
.crumbs .link { background: transparent; color: var(--accent); padding: 0; font: inherit; font-weight: 500; }
.crumb-sep { color: var(--muted); }
.brief-head .crumbs { margin-bottom: 6px; }
.cl-list { display: flex; flex-direction: column; gap: 2px; padding: 8px; }
.cl-row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: transparent; color: var(--ink); padding: 12px; border-radius: 10px; font-weight: 400; }
.cl-row:hover { background: var(--accent-soft); }
.cl-row b { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.cl-meta { color: var(--muted); font-size: 13px; text-align: right; }
.cl-icon { flex: none; }
.fold > summary { cursor: pointer; list-style: none; display: flex; align-items: baseline; gap: 8px; font-weight: 600; padding: 4px 0; }
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary .n { color: var(--muted); font-weight: 400; font-size: 13px; }
.fold-body { display: flex; flex-direction: column; gap: 8px; padding: 6px 0 4px 22px; min-width: 0; }
.fold-body:empty { display: none; }
.cl-sec .feed { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
@media (max-width: 860px) {
  .crumbs { font-size: 18px; }
  .cl-row { flex-wrap: wrap; }
  .cl-meta { flex-basis: 100%; text-align: left; padding-left: 28px; }
  .fold-body { padding-left: 12px; }
}

/* ── Команда клиента (team.js); меню «⋯» — pd-menu из «Производства» ── */
.tm-card { display: flex; flex-direction: column; gap: 12px; max-width: 720px; }
.tm-list { display: flex; flex-direction: column; }
.tm-row { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.tm-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm-role { color: var(--muted); font-size: 14px; }
.tm-pending { color: var(--muted); font-size: 14px; }
.tm-h2 { font-size: 15px; margin: 6px 0 0; }
.tm-invite { align-self: flex-start; }
.tm-pick { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.tm-pick-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.tm-pick-label { color: var(--muted); font-size: 14px; }
.tm-link { display: flex; flex-direction: column; gap: 6px; }
.tm-link-row { display: flex; gap: 8px; }
.tm-link-row input { flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 10px; padding: 7px 10px; background: var(--bg); }

/* ── Производство: контент-план (prod.js) ──────────────────────────── */
.prod-body { display: flex; flex-direction: column; gap: 14px; }
.pd-head { position: relative; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.pd-h1 { font-size: 22px; margin: 0; }
.pd-want, .pd-row { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; }
.pd-want label { display: flex; align-items: center; gap: 6px; }
.pd-want input { width: 64px; }
.pd-head input[type=number], .pd-head input[type=date], .pd-unit input[type=number], .pd-unit input[type=date] {
  border: 1px solid var(--line); border-radius: 10px; padding: 7px 8px; background: var(--bg); min-width: 0;
}
.pd-unit input[type=number] { width: 72px; }
.pd-sec { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 13px; }
.pd-wishes { width: 100%; }
.pd-go { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pd-plan { display: flex; flex-direction: column; }
.pd-plan-h { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.pd-plan-h h2 { font-size: 17px; margin: 0; }
.pd-unit { border-top: 1px solid var(--line); padding: 14px 0; display: flex; flex-direction: column; gap: 10px; }
.pd-unit:first-of-type { margin-top: 10px; }
.pd-top { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; }
.pd-n { font-weight: 600; min-width: 26px; }
.pd-price { margin-left: auto; color: var(--muted); font-size: 13px; white-space: nowrap; }
.pd-approved { color: var(--ok); font-size: 13px; font-weight: 500; white-space: nowrap; }
.pd-approved.pd-in_work { color: var(--accent); }
.pd-results { margin: 2px 0 4px; }
.pd-grid { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 8px 12px; align-items: start; }
.pd-grid > label { color: var(--muted); font-size: 13px; padding-top: 9px; }
/* серое — предложение системы, чёрное — слово человека (админ 20.10) */
.pd-unit .sys { color: var(--suggest); }
.pd-unit :is(select, input, textarea):not(.sys) { color: var(--ink); }
.pd-unit input[type=date].sys::-webkit-datetime-edit { color: var(--suggest); }
/* выбор системы — серой заливкой, выбор человека — акцентом; невыбранное в обоих случаях — бледное */
.pd-unit .chips button:not(.active) { color: var(--suggest); }
.pd-unit .chips.sys button.active { background: var(--line); color: var(--muted); border-color: #d4d1ca; }
.pd-menu { position: relative; }
.pd-menu summary { list-style: none; cursor: pointer; padding: 5px 11px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); line-height: 1; }
.pd-menu summary::-webkit-details-marker { display: none; }
.pd-menu-list { position: absolute; right: 0; top: calc(100% + 4px); z-index: 5; min-width: 160px; padding: 4px;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); }
.pd-menu-list button { display: block; width: 100%; text-align: left; background: transparent; color: var(--ink); font-weight: 400; padding: 8px 10px; }
.pd-menu-list button:hover { background: var(--bg); }
.pd-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 14px; }
.pd-total { font-weight: 500; }
@media (max-width: 860px) {
  .pd-grid { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .pd-grid > label { padding-top: 6px; }
  .pd-price { margin-left: 0; flex-basis: 100%; order: 10; }
}

/* ── Экран ожидания (progress.js, канон CLAUDE.md §1.6 «Ожидание на сайте») ── */
.pg-veil { position: fixed; inset: 0; z-index: 1100; display: grid; place-items: center; background: rgba(29,29,31,.28);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.pg-box { width: min(460px, calc(100vw - 32px)); background: var(--card); border-radius: var(--radius); padding: 20px 22px 18px;
  box-shadow: 0 10px 40px rgba(0,0,0,.18); outline: none; }
.pg-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.pg-title { margin: 0; font-size: 15px; font-weight: 600; }
.pg-count { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 13px; }
.pg-bar { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; margin: 12px 0 10px; }
.pg-bar i { display: block; height: 100%; background: var(--accent); transition: width .4s ease; }
.pg-bar.pg-indet i { width: 30% !important; animation: pg-slide 1.2s ease-in-out infinite; }
@keyframes pg-slide { from { transform: translateX(-100%); } to { transform: translateX(340%); } }
.pg-text { margin: 0 0 10px; font-size: 13px; color: var(--muted); min-height: 18px; }
.pg-text.pg-done { color: var(--ok); }
.pg-text.pg-fail { color: var(--bad); }
.pg-steps { list-style: none; margin: 0 0 16px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 4px 12px; font-size: 13px; }
.pg-steps li::before { content: "…"; display: inline-block; width: 18px; color: var(--muted); }
.pg-steps li[data-state="run"]::before { content: "●"; color: var(--accent); animation: pulse 1s ease-in-out infinite; }
.pg-steps li[data-state="ok"]::before { content: "✓"; color: var(--ok); }
.pg-steps li[data-state="fail"]::before { content: "✕"; color: var(--bad); }
.pg-row { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.pg-tray { position: fixed; right: 20px; bottom: calc(var(--dock, 64px) + 12px); width: 320px; z-index: 1050;
  display: flex; flex-direction: column; gap: 8px; }
.pg-tray:empty { display: none; }
.pg-card { background: var(--card); border-radius: 12px; padding: 12px 14px; box-shadow: 0 4px 18px rgba(0,0,0,.14); }
.pg-card .pg-bar { margin: 8px 0 6px; }
.pg-card .pg-text { margin-bottom: 8px; }
.pg-card .pg-row button { padding: 5px 10px; font-size: 13px; }
@media (max-width: 600px) { .pg-tray { left: 12px; right: 12px; width: auto; } }

/* ── Стартовый экран студии (studio_home.js) — как Home у Adobe ── */
.sh-box { width: min(920px, calc(100vw - 32px)); height: min(600px, calc(100vh - 64px)); background: var(--card);
  border-radius: var(--radius); box-shadow: 0 10px 40px rgba(0,0,0,.18); display: flex; overflow: hidden; }
.sh-side { width: 200px; flex: none; padding: 20px 16px; border-right: 1px solid var(--line); display: flex;
  flex-direction: column; gap: 8px; }
.sh-side > button { text-align: left; }
.sh-menu { display: flex; flex-direction: column; gap: 4px; padding-left: 10px; }
.sh-menu button { text-align: left; padding: 6px 10px; font-size: 13px; }
.sh-close { margin-top: auto; }
.sh-body { flex: 1; overflow: auto; padding: 20px 24px; }
.sh-body h3 { margin: 0 0 12px; font-size: 15px; }
.sh-body h4 { margin: 14px 0 6px; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.sh-row { width: 100%; display: grid; grid-template-columns: 1fr 160px 110px 120px; gap: 10px; align-items: center;
  text-align: left; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 10px 6px; }
.sh-row:hover { background: var(--accent-soft); }
.sh-name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-client, .sh-app, .sh-when { color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-empty { color: var(--muted); font-size: 13px; }
.sh-form { display: flex; flex-direction: column; gap: 12px; max-width: 420px; }
.sh-field { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
.sh-field input, .sh-form > input { border: 1px solid var(--line); border-radius: 10px; padding: 7px 10px; background: var(--card); color: var(--ink); }
@media (max-width: 700px) {
  .sh-box { flex-direction: column; height: calc(100vh - 32px); }
  .sh-side { width: auto; border-right: 0; border-bottom: 1px solid var(--line); flex-direction: row; flex-wrap: wrap; }
  .sh-close { margin-top: 0; }
  .sh-row { grid-template-columns: 1fr auto; }
  .sh-app, .sh-client { display: none; }
}

/* ── Огонёк студии и его панель (studio_panel.js) ── */
.st-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #d8d6d1; flex: none; }
.st-dot[data-state="starting"], .st-dot[data-state="stopping"] { background: #e3a92b; animation: pulse 1.2s ease-in-out infinite; }
.st-dot[data-state="on"] { background: var(--ok); }
.st-dot[data-state="error"] { background: var(--bad); }
.st-tab-dot { margin-left: 8px; vertical-align: middle; cursor: pointer; box-shadow: 0 0 0 4px transparent; }
.st-tab-dot:hover { box-shadow: 0 0 0 4px var(--accent-soft); }
.stp { position: fixed; z-index: 1150; width: 380px; max-width: calc(100vw - 24px); background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 10px 40px rgba(0,0,0,.16); padding: 14px 16px; }
.stp-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 10px;
  border-bottom: 1px solid var(--line); }
.stp-title { font-size: 14px; font-weight: 600; }
.stp-list { display: flex; flex-direction: column; padding: 6px 0; border-bottom: 1px solid var(--line); }
.stp-row { display: grid; grid-template-columns: 14px 1fr auto auto; gap: 8px; align-items: center; padding: 6px 0; font-size: 13px; }
.stp-name { font-weight: 500; white-space: nowrap; }
.stp-what { color: var(--muted); font-size: 12px; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stp-row button { padding: 4px 10px; font-size: 12px; }
.stp-foot { display: flex; gap: 8px; justify-content: flex-end; padding-top: 10px; flex-wrap: wrap; }
.stp-foot button { padding: 6px 12px; font-size: 13px; }