/* Кабинет студии и отчет клиенту (29.09.2026).
   Цвета от общих переменных style.css. Отчет клиенту открывается и отдельной
   страницей без style.css, поэтому у каждой переменной есть запасное
   значение, а тема берется из настроек системы читателя. */
html:has(body.ot-list) { color-scheme: light dark; }
.ot, .stud, .sl, .sl-sec {
  --o-bg: var(--bg, light-dark(#ffffff, #161d2a));
  --o-paper: var(--paper, light-dark(#f1f5f9, #0f1520));
  --o-ink: var(--ink, light-dark(#0b1733, #e9edf4));
  --o-ink2: var(--ink-2, light-dark(#3e4b69, #b0b9c8));
  --o-ink3: var(--ink-3, light-dark(#5f6b82, #97a1b3));
  --o-line: var(--line, light-dark(#e3e8ef, #2a3344));
  --o-acc: var(--acc, light-dark(#1f63e0, #7aa7ff));
  --o-accs: var(--acc-soft, light-dark(#eaf2fe, #17233a));
  --o-go: var(--go, light-dark(#1f8541, #4fc27a));
  --o-bad: light-dark(#b3321f, #ff8a73);
  --o-bar: light-dark(#c9d3e3, #34425a);
  --o-prev: light-dark(#7a96c8, #5f7aa8);
}
body.ot-list { margin: 0; background: light-dark(#eef1f5, #0b0f16); font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif;
  padding: 24px 16px 48px; color: light-dark(#0b1733, #e9edf4); }
.ot-primer { max-width: 860px; margin: 0 auto 12px; font-size: 14px; color: light-dark(#3e4b69, #b0b9c8); }
.ot-primer a { color: light-dark(#1f63e0, #7aa7ff); }
.ot-pechat { max-width: 860px; margin: 0 auto 12px; display: flex; justify-content: flex-end; }
.ot-pechat button { font: inherit; font-size: 14px; border: 1px solid light-dark(#c9d3e3, #34425a); background: light-dark(#fff, #161d2a);
  color: inherit; border-radius: 6px; padding: 6px 14px; cursor: pointer; }
/* Печать и сохранение в PDF: белый лист A4, без фона страницы и кнопок. */
@page { size: A4; margin: 14mm 12mm; }
@media print {
  html:has(body.ot-list) { color-scheme: light; }
  body.ot-list { background: #fff; padding: 0; }
  .ot-pechat, .ot-primer { display: none; }
  .ot { border: 0; padding: 0; max-width: none; }
  .ot section, .ot figure, .ot table, .ot tr { break-inside: avoid; }
}

/* ------------------------------------------------ отчет */
.ot { background: var(--o-bg); color: var(--o-ink); border: 1px solid var(--o-line); border-radius: 6px;
  max-width: 860px; margin: 0 auto; padding: 32px 40px 28px; font-variant-numeric: tabular-nums; line-height: 1.55; }
@media (max-width: 640px) { .ot { padding: 20px 16px; } }
.ot-blank { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px;
  padding-bottom: 14px; border-bottom: 1px solid var(--o-line); margin-bottom: 22px; }
.ot-studiya img { max-height: 40px; max-width: 200px; display: block; }
.ot-studiya b { font-size: 16px; }
.ot-mesto { display: inline-block; border: 1.5px dashed var(--o-ink3); color: var(--o-ink3); border-radius: 6px; padding: 6px 12px; font-size: 13px; }
.ot-kolon { color: var(--o-ink3); font-size: 13px; }
.ot-h { font-size: 30px; line-height: 1.15; margin: 0 0 4px; font-weight: 700; text-wrap: balance; }
.ot-sub { color: var(--o-ink3); margin: 0 0 20px; }
.ot-kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 0;
  border-top: 2px solid var(--o-ink); border-bottom: 1px solid var(--o-line); margin-bottom: 18px; }
.ot-kpi-i { padding: 12px 14px 12px 0; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ot-kpi-i b { font-size: 28px; line-height: 1.1; }
.ot-kpi-i span { font-size: 13px; }
.ot-kpi-i small { color: var(--o-ink3); font-size: 12px; }
.ot-izm { font-style: normal; font-weight: 600; font-size: 12px; padding: 0 5px; border-radius: 4px; white-space: nowrap; }
.ot-izm.up { color: var(--o-go); background: light-dark(#e5f4ea, #173524); }
.ot-izm.down { color: var(--o-bad); background: light-dark(#fbe8e4, #3a211c); }
.ot-itog { font-size: 17px; margin: 0 0 8px; max-width: 70ch; }
.ot-h2 { font-size: 19px; margin: 30px 0 8px; font-weight: 700; }
.ot-h3 { font-size: 15px; margin: 18px 0 2px; }
.ot-mel { color: var(--o-ink3); font-size: 13px; margin: 0 0 10px; }
.ot-kom { margin: 12px 0 0; max-width: 70ch; }
.ot-graf { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 22px; }
@media (max-width: 640px) { .ot-graf { grid-template-columns: minmax(0, 1fr); } }
.ot-g { margin: 0; min-width: 0; }
.ot-g figcaption { font-size: 13px; margin-bottom: 2px; }
.ot-g figcaption span { color: var(--o-ink3); font-size: 12px; margin-left: 4px; }
.sb { width: 100%; height: auto; display: block; }
.sb-bar { fill: var(--o-bar); }
.sb-prev { fill: var(--o-prev); }
.sb-now { fill: var(--o-acc); }
.sb-fon { fill: var(--o-bg); }
.sb-setka { stroke: var(--o-line); stroke-width: 1; }
.sb-lin { stroke: var(--o-acc); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.sb-os, .sb-mes { fill: var(--o-ink3); font-size: 9.5px; }
.sb-zn { fill: var(--o-ink2); font-size: 10px; }
.sb-zn-now, .sb-mes-now { fill: var(--o-ink); font-weight: 700; }
.ot-tw { overflow-x: auto; }
.ot-t { width: 100%; border-collapse: collapse; font-size: 14px; }
.ot-t th { text-align: left; font-weight: 500; font-size: 12px; color: var(--o-ink3); border-bottom: 1.5px solid var(--o-ink); padding: 6px 10px 6px 0; white-space: nowrap; }
.ot-t td { border-bottom: 1px solid var(--o-line); padding: 6px 10px 6px 0; vertical-align: top; }
.ot-t .n { text-align: right; white-space: nowrap; }
.ot-t .b { font-weight: 700; }
.ot-t .u { word-break: break-all; }
.ot-raboty, .ot-dalshe { margin: 0; padding-left: 22px; }
.ot-raboty, .sl-shagi { list-style: decimal; }
.ot-dalshe, .sl-spisok { list-style: disc; }
.ot-raboty li, .ot-dalshe li { margin-bottom: 6px; max-width: 70ch; }
.ot-niz { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin-top: 28px; padding-top: 12px;
  border-top: 1px solid var(--o-line); color: var(--o-ink3); font-size: 12px; }
.ot-niz a { color: inherit; }

/* ------------------------------------------------ кабинет студии */
.sk-tw { overflow-x: auto; }
.sk-t { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.sk-t th { text-align: left; font-weight: 500; font-size: 12px; color: var(--o-ink3); padding: 8px 12px 8px 0; border-bottom: 1px solid var(--o-line); white-space: nowrap; }
.sk-t td { padding: 12px 12px 12px 0; border-bottom: 1px solid var(--o-line); vertical-align: top; }
.sk-t tr:last-child td { border-bottom: 0; }
.sk-t .n { text-align: right; }
.sk-t-s td { padding: 7px 10px 7px 0; }
/* На телефоне строка клиента становится карточкой: таблица в пять колонок
   на 400 пикселях уводила кнопку отчета за край. */
@media (max-width: 640px) {
  .sk-t-kl thead { display: none; }
  .sk-t-kl tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 12px; padding: 14px 0; border-bottom: 1px solid var(--o-line); }
  .sk-t-kl tr:last-child { border-bottom: 0; }
  .sk-t-kl td { border: 0; padding: 0; }
  .sk-t-kl td:first-child, .sk-t-kl td:last-child { grid-column: 1 / -1; text-align: left; }
  .sk-t-kl td.n { text-align: left; }
}
.sk-nw { white-space: nowrap; }
.sk-dom { font-weight: 600; color: var(--o-ink); text-decoration: none; }
.sk-dom:hover { color: var(--o-acc); }
.sk-mel { color: var(--o-ink3); font-size: 12.5px; margin: 4px 0 0; }
.sk-trev-t { color: var(--o-bad); font-size: 12.5px; margin-top: 3px; }
.sk-status { display: inline-block; font-size: 12.5px; font-weight: 600; border-radius: 5px; padding: 2px 8px; white-space: nowrap; }
.sk-otpravlen { color: var(--o-go); background: light-dark(#e5f4ea, #173524); }
.sk-gotov { color: var(--o-acc); background: var(--o-accs); }
.sk-chernovik { color: light-dark(#8a5a00, #f0c060); background: light-dark(#fdf1d8, #3a2e12); }
.sk-sobiraem, .sk-net { color: var(--o-ink3); background: var(--o-paper); }
.sk-dva { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
@media (max-width: 860px) { .sk-dva { grid-template-columns: minmax(0, 1fr); } }
.stud .kb-card { margin-top: 16px; }
.sk-dva .kb-card { margin-top: 0; }
.sk-form { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.sk-form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--o-ink2); min-width: 0; flex: 1 1 200px; }
.sk-form .sk-chk { flex-direction: row; align-items: center; gap: 8px; flex-basis: 100%; }
.sk-den { max-width: 110px; }
.sk-form-r label { flex: 0 0 auto; }
.sk-form-col { flex-direction: column; align-items: stretch; }
.sk-form-col label { flex: 1 1 auto; }
.sk-form textarea.field-in { min-height: 120px; resize: vertical; font: inherit; }
.sk-inline { display: inline; margin: 0; }
.sk-spisok { margin: 0; padding-left: 18px; font-size: 13px; }
.sk-spisok li { margin: 2px 0; }
.sk-tarify { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin: 12px 0; }
.sk-tarif { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; border: 1px solid var(--o-line);
  border-radius: 8px; padding: 14px; min-width: 0; }
.sk-tarif-on { border-color: var(--o-acc); }
.sk-tarif-p { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.sk-tarif .btn { margin-top: auto; }
.sk-komanda { list-style: none; margin: 0 0 12px; padding: 0; }
.sk-komanda li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--o-line); }
.sk-komanda li:last-child { border-bottom: 0; }
.sk-logo { max-height: 40px; max-width: 180px; }
.sk-pusto p { max-width: 64ch; }
.sk-mesyacy { display: flex; flex-direction: column; }
.sk-mes { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--o-line); }
.sk-mes:last-child { border-bottom: 0; }
.sk-galka { font: inherit; font-size: 12px; font-weight: 600; border: 1px solid var(--o-line); background: var(--o-bg); color: var(--o-ink3);
  border-radius: 5px; padding: 2px 8px; cursor: pointer; min-width: 44px; }
.sk-galka.on { color: var(--o-go); border-color: var(--o-go); background: light-dark(#e5f4ea, #173524); }
.sk-knopki-s { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 12px 0 0; }
.sk-trevogi { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.sk-ssylka { background: none; border: 0; padding: 0; color: var(--o-bad); cursor: pointer; font: inherit; font-size: 13px; }
.sk-red { display: grid; grid-template-columns: minmax(300px, 400px) minmax(0, 1fr); gap: 18px; align-items: start; margin-top: 16px; }
@media (max-width: 1100px) { .sk-red { grid-template-columns: minmax(0, 1fr); } }
.sk-red-f { margin-top: 0 !important; display: flex; flex-direction: column; gap: 12px; }
.sk-red-f label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--o-ink2); }
.sk-red-f textarea { font: inherit; font-size: 14px; color: var(--o-ink); background: var(--o-bg); border: 1px solid var(--o-line);
  border-radius: 6px; padding: 8px 10px; resize: vertical; width: 100%; box-sizing: border-box; }
.sk-knopki { display: flex; flex-wrap: wrap; gap: 8px; }
.sk-otpr { border-top: 1px solid var(--o-line); padding-top: 12px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.sk-otpr h3 { margin: 0; font-size: 15px; }
.sk-otpr p { margin: 0; font-size: 13px; }
.sk-ssyl { width: 100%; box-sizing: border-box; font-size: 13px; }
.sk-red-v { min-width: 0; }
.sk-red-v .ot { max-width: none; }

/* ------------------------------------------------ первый экран для студий */
.sl { background: var(--o-paper); padding-block: 48px 56px; }
.sl-in { max-width: 1180px; margin: 0 auto; padding-inline: 16px; }
.sl > .sl-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 40px; align-items: start; }
@media (max-width: 960px) { .sl > .sl-in { grid-template-columns: minmax(0, 1fr); } }
.sl-kto { color: var(--o-acc); font-weight: 600; font-size: 14px; margin: 0 0 10px; }
.sl-h { font-size: clamp(32px, 4.4vw, 52px); line-height: 1.06; margin: 0 0 16px; letter-spacing: -0.01em; text-wrap: balance; color: var(--o-ink); }
.sl-lead { font-size: 18px; color: var(--o-ink2); max-width: 46ch; margin: 0 0 22px; }
.sl-kn { display: flex; flex-wrap: wrap; gap: 10px; }
.sl-mel { color: var(--o-ink3); font-size: 13px; margin: 12px 0 0; }
.sl-r { min-width: 0; }
.sl-list { max-height: 980px; overflow: hidden; position: relative; border-radius: 6px;
  box-shadow: 0 18px 40px -24px light-dark(rgba(11, 23, 51, 0.35), rgba(0, 0, 0, 0.7)); }
.sl-list::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 120px;
  background: linear-gradient(to bottom, transparent, var(--o-paper)); }
.sl-list .ot { max-width: none; }
.sl-dalee { display: inline-block; margin-top: 10px; color: var(--o-acc); font-weight: 600; }
.sl-sec { padding-block: 44px; border-top: 1px solid var(--o-line); background: var(--o-bg); color: var(--o-ink); }
.sl-in-t { max-width: 980px; }
.sl-h2 { font-size: 26px; margin: 0 0 14px; }
.sl-shagi { margin: 0; padding-left: 24px; display: flex; flex-direction: column; gap: 12px; max-width: 72ch; font-size: 16px; }
.sl-spisok { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.sl-dve { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
@media (max-width: 820px) { .sl-dve { grid-template-columns: minmax(0, 1fr); } }
.sl-dve p { margin: 0 0 12px; max-width: 60ch; }
.sl-vl { background: var(--o-paper); }
.sl-vl p { max-width: 64ch; }
.sl-forma { display: flex; flex-wrap: wrap; gap: 10px; max-width: 620px; margin-top: 8px; }
.sl-forma .field-in { flex: 1 1 260px; min-width: 0; }