/* Design Agent · панель креативов.
   База разметки — Fluent 2 (MIT); облик с 27.10.2026 — единый стиль экосистемы: стекло, монохром, тонкая типографика
   (как «Принципы» и «Агентства», слой в конце файла). */
:root {
  /* нейтральные */
  --bg1: #ffffff; --bg2: #fafafa; --bg3: #f5f5f5; --bg5: #ebebeb; --bg6: #e6e6e6;
  --bg-hover: #f5f5f5; --bg-pressed: #e0e0e0;
  --fg1: #242424; --fg2: #424242; --fg3: #616161; --fg4: #707070;
  --stroke1: #d1d1d1; --stroke2: #e0e0e0; --stroke-acc: #616161;
  /* бренд (Fluent communication blue) */
  --brand: #0f6cbd; --brand-hover: #115ea3; --brand-pressed: #0c3b5e; --on-brand: #ffffff;
  --brand-bg2: #ebf3fc; --brand-fg2: #115ea3; --link: #115ea3; --brand-stroke: #0f6cbd;
  /* статусы */
  --ok-bg: #f1faf1; --ok: #0e700e; --ok-line: #9fd89f;
  --warn-bg: #fff9f5; --warn: #bc4b09; --warn-line: #fdcfb4;
  --err-bg: #fdf3f4; --err: #b10e1c; --err-line: #eeacb2;
  --info-line: #b4d6fa;
  /* блок 2 — палитра Berry */
  --b2-bg: #fdf5fc; --b2: #af33a1;
  /* форма */
  --r4: 4px; --r8: 8px; --r12: 12px;
  --shadow4: 0 0 2px rgba(0,0,0,.12), 0 2px 4px rgba(0,0,0,.14);
  --shadow8: 0 0 2px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.14);
  --font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, 'Segoe UI', Roboto, sans-serif;
  --fw-strong: 500; --fw-title: 600;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg1: #292929; --bg2: #1f1f1f; --bg3: #141414; --bg5: #000000; --bg6: #333333;
    --bg-hover: #3d3d3d; --bg-pressed: #1f1f1f;
    --fg1: #ffffff; --fg2: #d6d6d6; --fg3: #adadad; --fg4: #999999;
    --stroke1: #666666; --stroke2: #525252; --stroke-acc: #adadad;
    --brand: #115ea3; --brand-hover: #0f6cbd; --brand-pressed: #0c3b5e;
    --brand-bg2: #082338; --brand-fg2: #62abf5; --link: #479ef5; --brand-stroke: #479ef5;
    --ok-bg: #052505; --ok: #54b054; --ok-line: #107c10;
    --warn-bg: #4a1e04; --warn: #faa06b; --warn-line: #da3b01;
    --err-bg: #3b0509; --err: #dc626d; --err-line: #c50f1f;
    --info-line: #0f548c;
    --b2-bg: #3a1136; --b2: #da7ed0;
    --shadow4: 0 0 2px rgba(0,0,0,.24), 0 2px 4px rgba(0,0,0,.28);
    --shadow8: 0 0 2px rgba(0,0,0,.24), 0 4px 8px rgba(0,0,0,.28);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg3); color: var(--fg1); font: 400 16px/22px var(--font);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-feature-settings: 'kern'; }
h1, h2, .title3 { font-family: var(--font-display); letter-spacing: -0.01em; }
a { color: var(--link); text-decoration: none; }
a:hover { color: var(--brand-pressed); }
@media (prefers-color-scheme: dark) { a:hover { color: var(--brand-fg2); } }
h1 { font-size: 28px; line-height: 36px; font-weight: var(--fw-title); margin: 0; }          /* Title 2 */
h2 { font-size: 20px; line-height: 28px; font-weight: var(--fw-title); margin: 0; }          /* Subtitle 1 */
h3 { font-size: 16px; line-height: 22px; font-weight: var(--fw-strong); margin: 0; }          /* Subtitle 2 */
.title3 { font-size: 24px; line-height: 32px; font-weight: var(--fw-title); margin: 0; }     /* Title 3 */
.muted { color: var(--fg3); }
.small { font-size: 14px; line-height: 20px; }                                   /* Body 1 */
.caption { font-size: 12px; line-height: 16px; color: var(--fg3); }              /* Caption 1 */
.i { flex: none; vertical-align: middle; }
.spacer { flex: 1; }

/* ── шапка ── */
.top { position: sticky; top: 0; z-index: 10; background: var(--bg1); border-bottom: 1px solid var(--stroke2); }
.top .in { max-width: 1200px; margin: 0 auto; padding: 0 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; }
.brand { display: flex; align-items: center; gap: 10px; min-height: 56px; font-weight: var(--fw-strong); color: var(--fg1); }
.brand:hover { color: var(--fg1); }
.brand .mark { width: 28px; height: 28px; border-radius: var(--r4); background: var(--brand); color: var(--on-brand);
  display: grid; place-items: center; font-size: 12px; }
.switch { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; border: 1px solid var(--stroke1);
  border-radius: var(--r4); color: var(--fg1); font-size: 14px; max-width: 260px; }
.switch span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.switch:hover { background: var(--bg-hover); color: var(--fg1); }
.blocks { display: flex; gap: 8px; margin: 0 auto; }
.blocks a { display: flex; align-items: center; gap: 8px; min-height: 56px; padding: 0 12px; color: var(--fg2);
  border-bottom: 3px solid transparent; }
.blocks a:hover { color: var(--fg1); background: var(--bg-hover); }
.blocks a.on { color: var(--fg1); font-weight: var(--fw-strong); border-bottom-color: var(--brand); }
.num { width: 22px; height: 22px; border-radius: 999px; display: inline-grid; place-items: center; font-size: 12px; font-weight: var(--fw-strong); flex: none; }
.num.b1 { background: var(--brand-bg2); color: var(--brand-fg2); }
.num.b2 { background: var(--b2-bg); color: var(--b2); }
.blocks a.on .num.b1 { background: var(--brand); color: var(--on-brand); }
.blocks a.on .num.b2 { background: var(--b2); color: #fff; }
.num.lg { width: 44px; height: 44px; font-size: 20px; }
.num.md { width: 32px; height: 32px; font-size: 16px; }

.wrap { max-width: 1120px; margin: 0 auto; padding: 32px 24px 64px; }
.wrap.narrow { max-width: 900px; }
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px; margin-bottom: 24px; }
.page-head > div:first-child { flex: 1 1 320px; display: flex; flex-direction: column; gap: 4px; }
.page-head p { margin: 0; color: var(--fg2); }
.back { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin: -12px 0 4px; font-weight: var(--fw-strong); }

/* ── поверхности ── */
.card { background: var(--bg1); border-radius: var(--r8); padding: 24px; }
.card.raised, a.card { box-shadow: var(--shadow4); }
a.card { color: var(--fg1); }
a.card:not(.tile):not(.task-row) { display: block; }
a.card:hover { background: var(--bg2); color: var(--fg1); box-shadow: var(--shadow8); }
.grid { display: grid; gap: 16px; }
.g2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 24px; }
.g3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.row { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.stack > * + * { margin-top: 16px; }
.stack-s > * + * { margin-top: 8px; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
@media (max-width: 620px) { .pair { grid-template-columns: 1fr; } .wrap { padding: 24px 16px 48px; } h1 { font-size: 24px; line-height: 32px; } }

/* ── кнопки (Fluent Button, размер Large + зона 44 px) ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 20px;
  border-radius: var(--r4); border: 1px solid var(--stroke1); background: var(--bg1); color: var(--fg1);
  font: 500 16px/22px var(--font); cursor: pointer; text-align: center; }
.btn:hover { background: var(--bg-hover); border-color: var(--stroke1); color: var(--fg1); }
.btn:active { background: var(--bg-pressed); }
.btn.primary { background: var(--brand); border-color: transparent; color: var(--on-brand); }
.btn.primary:hover { background: var(--brand-hover); color: var(--on-brand); }
.btn.primary:active { background: var(--brand-pressed); }
.btn.subtle { background: transparent; border-color: transparent; color: var(--fg2); font-weight: 400; }
.btn.subtle:hover { background: var(--bg-hover); color: var(--fg1); }
.btn.link { background: transparent; border-color: transparent; color: var(--link); padding: 0 8px; }
.btn.danger { color: var(--err); }
.btn.big { min-height: 56px; font-size: 20px; line-height: 28px; padding: 0 32px; }
.btn.wide { width: 100%; }
:focus-visible { outline: 2px solid var(--fg1); outline-offset: 2px; }
form.inline { display: inline; }

/* ── поля (Fluent Input: подчёркнутая нижняя граница) ── */
label, .label { display: block; font-size: 14px; line-height: 20px; font-weight: var(--fw-strong); color: var(--fg2); margin-bottom: 4px; }
input[type=text], input[type=password], input[type=url], input[type=number], input[type=date], select, textarea {
  width: 100%; font: 400 16px/22px var(--font); color: var(--fg1); background: var(--bg1);
  border: 1px solid var(--stroke1); border-bottom-color: var(--stroke-acc); border-radius: var(--r4);
  padding: 10px 12px; min-height: 44px; }
textarea { min-height: 96px; resize: vertical; }
input:hover, select:hover, textarea:hover { border-color: var(--stroke-acc); }
input:focus, select:focus, textarea:focus { outline: none; border-bottom: 2px solid var(--brand); padding-bottom: 9px; }
input[type=color] { width: 56px; height: 44px; border: 1px solid var(--stroke1); border-radius: var(--r4); background: var(--bg1); padding: 4px; }
input[type=file] { width: 100%; font: inherit; font-size: 14px; padding: 10px; background: var(--bg2); border: 1px dashed var(--stroke-acc); border-radius: var(--r8); }
.hint { font-size: 14px; line-height: 20px; color: var(--fg3); margin-top: 4px; }
.check { display: flex; gap: 10px; align-items: flex-start; min-height: 44px; padding-top: 10px; font-weight: 400; font-size: 16px; color: var(--fg1); cursor: pointer; margin: 0; }
.check input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--brand); flex: none; }

/* чипы-переключатели (ToggleButton) */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; margin: 0;
  border: 1px solid var(--stroke1); border-radius: var(--r4); background: var(--bg1); color: var(--fg1);
  font-size: 16px; font-weight: 400; cursor: pointer; }
.chip:hover { background: var(--bg-hover); }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip .i { display: none; }
.chip:has(input:checked) { border-color: var(--brand-stroke); background: var(--brand-bg2); color: var(--brand-fg2); font-weight: var(--fw-strong); }
.chip:has(input:checked) .i { display: inline; }
.chip:has(input:focus-visible) { outline: 2px solid var(--fg1); outline-offset: 2px; }
.chip .sub { font-weight: 400; color: var(--fg3); font-size: 14px; }

/* карточки-выбор (площадки, подходы) */
.pick { display: flex; flex-direction: column; gap: 6px; padding: 16px; margin: 0; border: 2px solid var(--stroke2); border-radius: var(--r8);
  background: var(--bg1); cursor: pointer; font-weight: 400; color: var(--fg1); }
.pick:hover { border-color: var(--stroke1); }
.pick .t { display: flex; align-items: center; gap: 10px; font-size: 20px; line-height: 28px; font-weight: var(--fw-strong); }
.pick .t input { width: 22px; height: 22px; margin: 0; accent-color: var(--brand); }
.pick .d { font-size: 14px; line-height: 20px; color: var(--fg3); }
.pick:has(input:checked) { border-color: var(--brand-stroke); background: var(--brand-bg2); }
.pick:has(input:checked) .t { color: var(--brand-fg2); }
.pick:has(input:checked) .d { color: var(--fg1); }

/* ── бейджи (Fluent Badge, tint) ── */
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 14px; line-height: 20px;
  background: var(--bg5); color: var(--fg2); white-space: nowrap; vertical-align: middle; }
.badge.ok { background: var(--ok-bg); color: var(--ok); }
.badge.warn { background: var(--warn-bg); color: var(--warn); }
.badge.err { background: var(--err-bg); color: var(--err); }
.badge.brand { background: var(--brand-bg2); color: var(--brand-fg2); }
.badge.b2 { background: var(--b2-bg); color: var(--b2); }
.badge .i { width: 16px; height: 16px; }

/* ── сообщения (Fluent MessageBar) ── */
.bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 16px; border-radius: var(--r4);
  border: 1px solid var(--info-line); background: var(--brand-bg2); margin-bottom: 16px; }
.bar > .i { color: var(--brand-fg2); }
.bar p { margin: 0; flex: 1 1 280px; }
.bar.ok { border-color: var(--ok-line); background: var(--ok-bg); } .bar.ok > .i { color: var(--ok); }
.bar.warn { border-color: var(--warn-line); background: var(--warn-bg); } .bar.warn > .i { color: var(--warn); }
.bar.err { border-color: var(--err-line); background: var(--err-bg); } .bar.err > .i { color: var(--err); }

/* ── прогресс ── */
.progress { height: 4px; border-radius: 999px; background: var(--stroke2); overflow: hidden; }
.progress > div { height: 100%; background: var(--brand); border-radius: 999px; }

/* ── главная клиники ── */
.block-card { display: flex; flex-direction: column; gap: 20px; }
.block-head { display: flex; align-items: center; gap: 12px; }
.checklist { list-style: none; margin: 0; padding: 0; }
.checklist li { display: flex; align-items: center; gap: 12px; min-height: 48px; border-bottom: 1px solid var(--stroke2); }
.checklist li:last-child { border-bottom: 0; }
.checklist a { flex: 1; color: var(--fg1); min-height: 48px; display: flex; align-items: center; }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.stats > div { padding: 12px; border-radius: var(--r8); background: var(--bg3); }
.stats b { display: block; font-size: 24px; line-height: 32px; font-weight: var(--fw-strong); }
.stats .hot { background: var(--b2-bg); } .stats .hot b { color: var(--b2); }

/* ── плитки разделов (блок 1) ── */
.tile { display: flex; flex-direction: column; gap: 16px; padding: 20px; }
.tile-head { display: flex; align-items: flex-start; gap: 12px; }
.tile-head > div { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.ic { width: 40px; height: 40px; border-radius: var(--r8); background: var(--brand-bg2); color: var(--brand-fg2); display: grid; place-items: center; flex: none; }
.ic .i { width: 24px; height: 24px; }
.swatches { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.swatches span { display: block; height: 48px; border-radius: var(--r4); border: 1px solid var(--stroke2); }
.avatars { display: flex; }
.avatar { width: 48px; height: 48px; border-radius: 999px; background: var(--bg5); border: 2px solid var(--bg1); display: grid; place-items: center;
  font-size: 14px; font-weight: var(--fw-strong); color: var(--fg2); object-fit: cover; flex: none; }
.avatars .avatar + .avatar { margin-left: -10px; }
.minirow { display: flex; justify-content: space-between; gap: 12px; }
.minirow span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drop { min-height: 96px; border: 1px dashed var(--stroke-acc); border-radius: var(--r8); display: grid; place-items: center; text-align: center; padding: 8px; color: var(--fg3); }
.thumbs { display: flex; gap: 6px; }
.thumbs img, .thumbs span { width: 64px; height: 64px; border-radius: var(--r4); object-fit: cover; background: var(--bg6); flex: none; }

/* ── разделы (подвкладки блока 1) ── */
.subnav { display: flex; gap: 4px; overflow-x: auto; margin: 0 0 24px; border-bottom: 1px solid var(--stroke2); scrollbar-width: none; }
.subnav a { flex: none; display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; color: var(--fg2); border-bottom: 3px solid transparent; margin-bottom: -1px; }
.subnav a:hover { color: var(--fg1); background: var(--bg-hover); }
.subnav a.on { color: var(--fg1); font-weight: var(--fw-strong); border-bottom-color: var(--brand); }
.subnav .n { font-size: 12px; color: var(--fg3); }
.list { border-top: 1px solid var(--stroke2); }
.item { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--stroke2); }
.item .grow { flex: 1 1 240px; min-width: 0; }
.item .name { font-size: 16px; font-weight: var(--fw-strong); }
.thumb { width: 72px; height: 72px; border-radius: var(--r8); object-fit: cover; background: var(--bg5); flex: none; display: grid; place-items: center; color: var(--fg3); font-size: 14px; }
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.media { background: var(--bg2); border: 1px solid var(--stroke2); border-radius: var(--r8); overflow: hidden; }
.media img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.media .meta { padding: 8px; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.swatch { width: 24px; height: 24px; border-radius: var(--r4); border: 1px solid var(--stroke2); display: inline-block; vertical-align: middle; }
.empty { text-align: center; padding: 32px 16px; color: var(--fg3); }

/* ── блок 2: задачи и результаты ── */
.task-row { display: flex; align-items: center; gap: 12px 16px; padding: 12px; }
.task-row .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.task-row .thumbs img, .task-row .thumbs span { width: 48px; height: 48px; }
@media (max-width: 520px) { .task-row .thumbs > :nth-child(n+2) { display: none; } }
.task-row .name { font-weight: var(--fw-strong); }
.steps > section + section { margin-top: 16px; }
.step-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 12px; }
.summary { position: sticky; bottom: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 20px 24px; margin-top: 16px;
  border-radius: var(--r8); background: var(--bg1); box-shadow: var(--shadow8); }
.summary .grow { flex: 1 1 280px; }
details > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: 6px; color: var(--link); font-weight: var(--fw-strong); list-style: none; }
details > summary::-webkit-details-marker { display: none; }
.concept + .concept { margin-top: 16px; }
.concept-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 16px; }
.concept-head .title3 { flex: 1 1 240px; }
.gallery { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.gallery figure { margin: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.gallery a { display: block; width: fit-content; border-radius: var(--r4); overflow: hidden; background: var(--bg6); border: 1px solid var(--stroke2); }
.gallery img { display: block; height: 160px; width: auto; max-width: 100%; }
.gallery figcaption { font-size: 12px; line-height: 16px; color: var(--fg3); max-width: 320px; }
.gallery figcaption b { color: var(--fg1); font-weight: var(--fw-strong); }
.small-gal img { height: 96px; }
@media (max-width: 620px) { .gallery img { height: 140px; } .small-gal img { height: 80px; } }
.notes { white-space: pre-wrap; font-size: 14px; line-height: 20px; }
.copy { white-space: pre-wrap; background: var(--bg2); border: 1px solid var(--stroke2); border-radius: var(--r8); padding: 16px; font-size: 14px; line-height: 20px; }
.decide { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: var(--r8); background: var(--bg2); border: 1px solid var(--stroke2); }

/* вход */
.login { max-width: 400px; margin: 10vh auto 0; }

/* телефон: шапка в одну-две строки */
@media (max-width: 620px) {
  .top .in { padding: 0 12px; gap: 0 8px; }
  .brand .txt, .top .btn.subtle span { display: none; }
  .switch { max-width: 150px; min-height: 36px; }
  .blocks { order: 9; width: 100%; margin: 0; justify-content: space-around; }
  .blocks a { min-height: 48px; padding: 0 8px; font-size: 15px; }
  .top .btn.subtle { margin-left: auto; padding: 0 10px; }
}

/* прайс: на телефоне — название и карандаш сверху, цена · кнопка снизу */
@media (max-width: 600px){
  .item.svc{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px 12px}
  .item.svc > .grow{grid-column:1 / 3;grid-row:1}
  .item.svc > details{grid-column:3;grid-row:1;align-self:start}
  .item.svc > details[open]{grid-column:1 / -1;grid-row:3}
  .item.svc > div:nth-child(2){grid-row:2;grid-column:1}
  .item.svc > .btn{grid-row:2;grid-column:2;justify-self:start;width:auto;white-space:nowrap}
}

/* анкета проекта */
.pf-wrap { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.pf-nav { flex: 1 1 220px; max-width: 300px; padding: 8px; display: flex; flex-direction: column; gap: 2px; }
.pf-nav a { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 12px; border-radius: var(--r4, 4px); color: var(--fg1); }
.pf-nav a:hover { background: var(--bg-hover); }
.pf-nav a.on { background: var(--brand-bg2); color: var(--brand-fg2); font-weight: var(--fw-strong); }
.pf-nav .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 18px; }
.pf-nav .n { font-size: 12px; color: var(--fg3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pf-nav .n.warn { color: var(--warn); font-weight: var(--fw-strong); }
.q { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--fg3); font-weight: var(--fw-strong); }
.pf-main { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.pf-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; }
.pf-field { min-width: 0; }
.pf-wide { grid-column: 1 / -1; }
.pf-lr { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 6px; }
.pf-lr label, .pf-lr .label { margin: 0; }
.pf-lr .badge { font-size: 12px; line-height: 16px; padding: 1px 6px; }
.pf-tri { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.pf-tri .chips { flex: none; }
.pf-tri input[type=text] { flex: 1 1 240px; }
.chip.sm { min-height: 36px; padding: 0 12px; font-size: 14px; }
.pf-box { border: 1px solid var(--stroke2); border-radius: var(--r8); padding: 16px; margin: 0; min-width: 0; }
.pf-box legend { padding: 0 6px; font-weight: var(--fw-strong); display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pf-actions { padding-top: 16px; border-top: 1px solid var(--stroke2); }
.badge.pf-hot { background: var(--brand-bg2); color: var(--brand-fg2); }
.hint { font-size: 13px; line-height: 18px; color: var(--fg3); margin-top: 4px; }
@media (max-width: 760px) { .pf-grid { grid-template-columns: minmax(0, 1fr); } .pf-nav { max-width: none; flex-direction: row; overflow-x: auto; } .pf-nav a { flex: none; } }
b, strong { font-weight: var(--fw-title); }

.engine-st { white-space: nowrap; }
@media (max-width: 760px) { .engine-st .txt { display: none; } }

.pf-bi { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin: 0 0 16px; }

/* библиотека референсов */
.ref-filters { display: flex; flex-wrap: wrap; gap: 12px 16px; margin-bottom: 12px; }
.ref-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; margin-top: 12px; }
a.card.ref-card { display: flex; flex-direction: column; padding: 0; overflow: hidden; color: var(--fg1); }
.ref-card img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--bg2); display: block; }
.ref-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.ref-body .name { font-weight: var(--fw-strong); line-height: 20px; }
.badge.brand-soft { background: var(--brand-bg2); color: var(--brand-fg2); }
.ref-one { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.ref-big { flex: 1 1 360px; max-width: 560px; padding: 12px; margin: 0; }
.ref-big img { width: 100%; height: auto; display: block; border-radius: var(--r4); }
.ref-one > .card.stack { flex: 999 1 380px; min-width: 0; }
.ref-dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; }
.ref-dl dt { color: var(--fg3); } .ref-dl dd { margin: 0; }
@media (max-width: 760px) { .top-refs .txt { display: none; } .ref-dl { grid-template-columns: 1fr; } }

/* ── оценка концепции (память о решениях) ── */
.fb { margin-top: 16px; border-top: 1px solid var(--stroke2); padding-top: 12px; }
.fb > summary { cursor: pointer; display: flex; align-items: center; gap: 8px; min-height: 44px; color: var(--fg2); }
.fb-form { margin-top: 12px; }
.seg { display: inline-flex; border: 1px solid var(--stroke1); border-radius: var(--r8); overflow: hidden; }
.seg label { margin: 0; cursor: pointer; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg span { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 20px; font-size: 16px; }
.seg label + label span { border-left: 1px solid var(--stroke1); }
.seg label:has(input[value=yes]:checked) span { background: var(--brand-bg2); color: var(--brand-fg2); font-weight: var(--fw-strong); }
.seg label:has(input[value=no]:checked) span { background: var(--err-bg); color: var(--err); font-weight: var(--fw-strong); }
.fb-scores { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px 16px; }
.fb-score { display: flex; flex-direction: column; gap: 4px; }
.dots { display: inline-flex; gap: 6px; }
.dots label { margin: 0; cursor: pointer; }
.dots input { position: absolute; opacity: 0; pointer-events: none; }
.dots span { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--stroke1); font-size: 15px; }
.dots label:has(input:checked) span { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: var(--fw-strong); }
.dots label:has(input:focus-visible) span, .seg label:has(input:focus-visible) span { outline: 2px solid var(--fg1); outline-offset: 2px; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.card.stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 520px) { .card.stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ── Принципы: стекло, монохром, тонкая типографика (26.10.2026) ── */
.pz-page { position: relative; isolation: isolate; }
.pz-page::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(40vw 40vw at 12% 18%, rgba(0,0,0,.07), transparent 70%),
    radial-gradient(36vw 36vw at 88% 30%, rgba(0,0,0,.05), transparent 70%),
    radial-gradient(50vw 40vw at 50% 100%, rgba(0,0,0,.06), transparent 70%),
    linear-gradient(180deg, #f6f6f4, #ecebe8); }
@media (prefers-color-scheme: dark) { .pz-page::before { background:
    radial-gradient(40vw 40vw at 12% 18%, rgba(255,255,255,.07), transparent 70%),
    radial-gradient(36vw 36vw at 88% 30%, rgba(255,255,255,.05), transparent 70%),
    linear-gradient(180deg, #161617, #0d0d0e); } }
.pz { --glass: rgba(255,255,255,.52); --glass-line: rgba(255,255,255,.75); --glass-shadow: 0 1px 1px rgba(0,0,0,.04), 0 12px 32px -14px rgba(0,0,0,.18);
  --ink: #1d1d1f; --ink2: #6e6e73; --ink3: #8e8e93; max-width: 880px; margin: 0 auto; padding: 8px 0 24px; color: var(--ink); }
@media (prefers-color-scheme: dark) { .pz { --glass: rgba(40,40,44,.48); --glass-line: rgba(255,255,255,.14);
  --glass-shadow: 0 12px 32px -14px rgba(0,0,0,.6); --ink: #f5f5f7; --ink2: #a1a1a6; --ink3: #86868b; } }
.pz-glass { background: var(--glass); border: .5px solid var(--glass-line); box-shadow: var(--glass-shadow), inset 0 1px 0 rgba(255,255,255,.55);
  -webkit-backdrop-filter: blur(28px) saturate(170%); backdrop-filter: blur(28px) saturate(170%); }
.pz-kicker { font: 500 11px/14px var(--font); letter-spacing: .22em; text-transform: uppercase; color: var(--ink3); }
.pz-head { text-align: center; margin: 28px auto 44px; max-width: 520px; }
.pz-head h1 { font: 300 40px/44px var(--font-display); letter-spacing: -.025em; margin: 10px 0 12px; }
.pz-head p { font: 400 15px/22px var(--font); color: var(--ink2); margin: 0; }
.pz-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 36px 28px; max-width: 640px; margin: 0 auto; }
.pz-app { display: flex; flex-direction: column; align-items: center; width: 128px; text-align: center; color: var(--ink);
  text-decoration: none; -webkit-tap-highlight-color: transparent; }
.pz-icon { position: relative; display: grid; place-items: center; width: 76px; height: 76px; border-radius: 22px; color: var(--ink);
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s; }
.pz-icon.small { width: 44px; height: 44px; border-radius: 13px; flex: none; }
.pz-icon.big { width: 96px; height: 96px; border-radius: 28px; flex: none; }
.pz-app:hover .pz-icon, .pz-app:focus-visible .pz-icon { transform: translateY(-3px); box-shadow: 0 2px 2px rgba(0,0,0,.04), 0 20px 40px -18px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.6); }
.pz-app:active .pz-icon { transform: scale(.96); }
@media (prefers-reduced-motion: reduce) { .pz-icon { transition: none; } }
.pz-idx { margin-top: 14px; font: 400 11px/14px var(--font); letter-spacing: .18em; color: var(--ink3); }
.pz-name { margin-top: 4px; font: 500 14px/18px var(--font); letter-spacing: -.005em; }
.pz-tag { margin-top: 3px; font: 400 12px/16px var(--font); color: var(--ink2); }
.pz-dock { display: flex; align-items: center; gap: 14px; margin: 56px auto 0; padding: 12px 16px 12px 12px; max-width: 460px;
  border-radius: 20px; color: var(--ink); text-decoration: none; }
.pz-dock-txt { display: flex; flex-direction: column; gap: 1px; flex: 1; } .pz-dock-txt b { font: 500 14px/18px var(--font); }
.pz-dock-txt span { font: 400 12px/16px var(--font); color: var(--ink2); }
.pz-chev { font: 300 22px/1 var(--font); color: var(--ink3); }
.pz-foot { text-align: center; font: 400 11px/16px var(--font); letter-spacing: .02em; color: var(--ink3); margin: 36px auto 0; max-width: 460px; }
/* страница принципа */
.pz-back { display: inline-flex; align-items: center; min-height: 44px; font: 400 14px/20px var(--font); color: var(--ink2); text-decoration: none; }
.pz-back:hover { color: var(--ink); }
.pz-hero { display: flex; gap: 24px; align-items: center; padding: 22px 24px; border-radius: 24px; margin: 4px 0 24px; }
.pz-hero h1 { font: 300 32px/36px var(--font-display); letter-spacing: -.02em; margin: 6px 0 8px; }
.pz-hero p { margin: 0; font: 400 15px/22px var(--font); color: var(--ink2); max-width: 560px; }
.pz-rules { border-radius: 20px; overflow: hidden; }
.pz-rule { border-top: .5px solid rgba(0,0,0,.08); } .pz-rule:first-child { border-top: 0; }
@media (prefers-color-scheme: dark) { .pz-rule { border-top-color: rgba(255,255,255,.08); } }
.pz-rule summary { display: flex; align-items: baseline; gap: 16px; padding: 15px 20px; cursor: pointer; list-style: none; min-height: 52px; color: var(--ink); }
.pz-rule summary::-webkit-details-marker { display: none; }
.pz-num { flex: none; width: 22px; font: 400 12px/22px var(--font); letter-spacing: .08em; color: var(--ink3); font-variant-numeric: tabular-nums; }
.pz-rule-txt { flex: 1; font: 400 15px/22px var(--font); }
.pz-kind { flex: none; font: 500 10px/18px var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--ink3); }
.pz-kind.k-auto { color: var(--ink); }
.pz-rule[open] summary .pz-rule-txt { font-weight: 500; }
.pz-body { padding: 0 20px 18px 58px; display: flex; flex-direction: column; gap: 12px; font: 400 14px/20px var(--font); color: var(--ink); }
.pz-body span { display: block; font: 500 10px/14px var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--ink3); margin-bottom: 3px; }
.pz-body a { color: var(--ink); text-decoration: underline; text-decoration-color: rgba(127,127,127,.4); text-underline-offset: 3px; }
.pz-nav { display: flex; justify-content: space-between; margin: 28px 0 0; }
.pz-nav a { font: 400 14px/20px var(--font); color: var(--ink2); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.pz-nav a:hover { color: var(--ink); }
.pz-svg { display: block; }
@media (max-width: 560px) {
  .pz-head h1 { font-size: 32px; line-height: 36px; } .pz-grid { gap: 28px 8px; }
  .pz-app { width: calc(33.333% - 8px); } .pz-icon { width: 64px; height: 64px; border-radius: 19px; }
  .pz-tag { display: none; } .pz-hero { flex-direction: column; text-align: center; } .pz-body { padding-left: 20px; }
}
/* агентства */
.ag-list { display: flex; flex-direction: column; gap: 16px; }
.ag { border-radius: 22px; padding: 20px 22px; display: flex; flex-direction: column; gap: 14px; }
.ag-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.ag h2 { font: 300 26px/30px var(--font-display); letter-spacing: -.02em; margin: 4px 0 6px; color: var(--ink); }
.ag-sum { margin: 0; font: 400 14px/21px var(--font); color: var(--ink2); max-width: 640px; }
.ag-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.ag-tags span { font: 400 12px/16px var(--font); padding: 5px 10px; border-radius: 999px; border: .5px solid rgba(127,127,127,.35); color: var(--ink); }
.ag-tags span.soft { color: var(--ink2); border-style: dashed; }
.ag-tags b { font-weight: 600; margin-left: 2px; }
.ag-lessons { margin: 0; padding-left: 18px; font: 400 14px/21px var(--font); color: var(--ink); }
.ag-best { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.ag-best a { display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: var(--ink2); font: 400 11px/14px var(--font); }
.ag-best img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; background: rgba(127,127,127,.12); }
@media (max-width: 560px) { .ag-best { grid-template-columns: repeat(2, 1fr); } .ag-head { flex-direction: column; } }
.ag-phil p { margin: 4px 0 0; font: 400 14px/21px var(--font); color: var(--ink); max-width: 760px; }
.ag-src { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.ag-src a { font: 400 11px/14px var(--font); color: var(--ink3); text-decoration: underline; text-underline-offset: 3px; }
.ag-lessons { margin-top: 4px; }
/* шапка: 4 раздела — на средних экранах только значки, чтобы не переносилось */
@media (max-width: 1180px) { .top-refs .txt { display: none; } }

/* дизайн-пак с сайта */
.sp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; }
.sp-bar { position: sticky; bottom: 12px; z-index: 2; background: var(--bg1); padding: 12px 16px; border-radius: var(--r8); border: 1px solid var(--stroke2); box-shadow: 0 4px 16px rgba(0,0,0,.12); }
.sp-item { display: flex; flex-direction: column; gap: 8px; margin: 0; font-weight: 400; }
.sp-item img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r8); background: var(--bg2); border: 1px solid var(--stroke2); display: block; }
.sp-logos .sp-item img { object-fit: contain; padding: 12px; }
.sp-doc img { aspect-ratio: 4 / 5; object-position: top; }
.sp-item small { color: var(--fg3); font-size: 13px; }
.sp-item select, .sp-item input[type=text] { min-height: 36px; font-size: 14px; }
.sp-logos input[type=radio] { position: absolute; opacity: 0; }
.sp-logos label > span { display: flex; flex-direction: column; gap: 6px; border-radius: var(--r8); outline-offset: 2px; cursor: pointer; }
.sp-logos input:checked + span { outline: 2px solid var(--brand); }
.sp-logos input:focus-visible + span { outline: 2px solid var(--fg1); }
.sp-none { justify-content: center; align-items: center; min-height: 100%; aspect-ratio: 1; border: 1px dashed var(--stroke1); color: var(--fg2); font-size: 14px; text-align: center; padding: 8px; }
.sp-none img { max-height: 60%; border: 0; aspect-ratio: auto; padding: 0 !important; }
.sp-pick { position: relative; margin: 0; cursor: pointer; }
.sp-pick input { position: absolute; top: 8px; left: 8px; width: 22px; height: 22px; accent-color: var(--brand); z-index: 1; }
.sp-pick:has(input:checked) img { outline: 3px solid var(--brand); outline-offset: -3px; }
.sp-sw { display: inline-block; width: 18px; height: 18px; border-radius: 4px; border: 1px solid var(--stroke2); vertical-align: -4px; }

/* ══════════ Единый стиль панели — стекло и монохром, как «Принципы» и «Агентства» (27.10.2026) ══════════
   Слой поверх базовой разметки: меняет токены и облик компонентов, структура страниц прежняя. */
:root {
  --ink: #1d1d1f; --ink2: #6e6e73; --ink3: #8e8e93;
  --glass: rgba(255,255,255,.56); --glass-strong: rgba(255,255,255,.78); --glass-line: rgba(255,255,255,.8);
  --glass-shadow: 0 1px 1px rgba(0,0,0,.04), 0 12px 32px -14px rgba(0,0,0,.18);
  --hair: rgba(0,0,0,.09);
  --bg1: rgba(255,255,255,.62); --bg2: rgba(255,255,255,.42); --bg3: transparent; --bg5: rgba(0,0,0,.06); --bg6: rgba(0,0,0,.05);
  --bg-hover: rgba(0,0,0,.045); --bg-pressed: rgba(0,0,0,.08);
  --fg1: var(--ink); --fg2: #3a3a3c; --fg3: var(--ink2); --fg4: var(--ink3);
  --stroke1: rgba(0,0,0,.14); --stroke2: rgba(0,0,0,.08); --stroke-acc: rgba(0,0,0,.28);
  --brand: #1d1d1f; --brand-hover: #3a3a3c; --brand-pressed: #000; --on-brand: #fff;
  --brand-bg2: rgba(0,0,0,.06); --brand-fg2: #1d1d1f; --link: #1d1d1f; --brand-stroke: #1d1d1f;
  --b2-bg: rgba(0,0,0,.06); --b2: #1d1d1f; --info-line: rgba(0,0,0,.08);
  --ok-bg: rgba(52,199,89,.12); --ok: #1f7a3a; --ok-line: rgba(52,199,89,.35);
  --warn-bg: rgba(255,149,0,.12); --warn: #a35200; --warn-line: rgba(255,149,0,.35);
  --err-bg: rgba(255,59,48,.10); --err: #c4271d; --err-line: rgba(255,59,48,.35);
  --r4: 10px; --r8: 16px; --r12: 22px;
  --shadow4: var(--glass-shadow); --shadow8: 0 2px 2px rgba(0,0,0,.04), 0 20px 40px -18px rgba(0,0,0,.28);
  --fw-strong: 500; --fw-title: 400;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ink: #f5f5f7; --ink2: #a1a1a6; --ink3: #86868b;
    --glass: rgba(40,40,44,.5); --glass-strong: rgba(48,48,52,.82); --glass-line: rgba(255,255,255,.14);
    --glass-shadow: 0 12px 32px -14px rgba(0,0,0,.6); --hair: rgba(255,255,255,.09);
    --bg1: rgba(44,44,48,.6); --bg2: rgba(255,255,255,.04); --bg3: transparent; --bg5: rgba(255,255,255,.08); --bg6: rgba(255,255,255,.06);
    --bg-hover: rgba(255,255,255,.07); --bg-pressed: rgba(255,255,255,.12);
    --fg2: #d1d1d6; --stroke1: rgba(255,255,255,.18); --stroke2: rgba(255,255,255,.1); --stroke-acc: rgba(255,255,255,.35);
    --brand: #f5f5f7; --brand-hover: #d1d1d6; --brand-pressed: #fff; --on-brand: #1d1d1f;
    --brand-bg2: rgba(255,255,255,.1); --brand-fg2: #f5f5f7; --link: #f5f5f7; --brand-stroke: #f5f5f7;
    --b2-bg: rgba(255,255,255,.1); --b2: #f5f5f7; --info-line: rgba(255,255,255,.1);
    --ok: #63d77f; --warn: #ffb340; --err: #ff6961;
  }
}
body { background: #f2f1ee; color: var(--ink); font-feature-settings: 'kern', 'ss01'; }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(40vw 40vw at 12% 18%, rgba(0,0,0,.07), transparent 70%),
    radial-gradient(36vw 36vw at 88% 30%, rgba(0,0,0,.05), transparent 70%),
    radial-gradient(50vw 40vw at 50% 100%, rgba(0,0,0,.06), transparent 70%),
    linear-gradient(180deg, #f6f6f4, #ecebe8); }
@media (prefers-color-scheme: dark) { body { background: #111112; } body::before { background:
    radial-gradient(40vw 40vw at 12% 18%, rgba(255,255,255,.07), transparent 70%),
    radial-gradient(36vw 36vw at 88% 30%, rgba(255,255,255,.05), transparent 70%),
    linear-gradient(180deg, #161617, #0d0d0e); } }
.pz-page::before { display: none; }                       /* фон теперь общий у всей панели */
a:hover { color: var(--ink2); }

/* типографика: тонкие крупные заголовки, мелкие подписи капителью */
h1 { font: 300 34px/40px var(--font-display); letter-spacing: -.025em; }
h2 { font: 400 20px/26px var(--font-display); letter-spacing: -.015em; }
h3 { font-weight: 500; letter-spacing: -.005em; }
.title3 { font-weight: 300; letter-spacing: -.02em; }
.page-head { margin-bottom: 28px; } .page-head p { color: var(--ink2); font-size: 15px; line-height: 22px; }
label, .label { color: var(--ink2); }
label[for]:not(.btn):not(.check):not(.chip):not(.pick):not(.thumb), .label { font: 500 11px/14px var(--font); letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink3); margin-bottom: 6px; }
label.check { font-size: 15px; color: var(--ink); }
.hint { color: var(--ink3); font-size: 13px; line-height: 18px; }
.q { font: 500 11px/14px var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--ink3); }
@media (max-width: 620px) { h1 { font-size: 28px; line-height: 34px; } }

/* шапка — стеклянная полоса */
.top { background: rgba(246,246,244,.72); border-bottom: .5px solid var(--hair);
  -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%); }
@media (prefers-color-scheme: dark) { .top { background: rgba(22,22,24,.72); } }
.brand { font-weight: 500; letter-spacing: -.01em; }
.brand .mark { border-radius: 9px; background: var(--ink); color: var(--on-brand); font: 600 11px/1 var(--font); letter-spacing: .04em; }
.switch { border: .5px solid var(--stroke1); border-radius: 999px; background: var(--glass); }
.blocks a { border-bottom: 2px solid transparent; color: var(--ink2); font-size: 15px; }
.blocks a.on { color: var(--ink); font-weight: 500; border-bottom-color: var(--ink); }
.blocks a:hover { background: transparent; color: var(--ink); }
.num { font-weight: 500; }
.num.b1, .num.b2 { background: transparent; color: var(--ink2); border: .5px solid var(--stroke1); }
.blocks a.on .num.b1, .blocks a.on .num.b2 { background: var(--ink); color: var(--on-brand); border-color: var(--ink); }

/* карточки — стекло */
.card { background: var(--glass); border: .5px solid var(--glass-line); border-radius: 22px; box-shadow: var(--glass-shadow), inset 0 1px 0 rgba(255,255,255,.55);
  -webkit-backdrop-filter: blur(28px) saturate(170%); backdrop-filter: blur(28px) saturate(170%); }
@media (prefers-color-scheme: dark) { .card { box-shadow: var(--glass-shadow); } }
.card.raised, a.card { box-shadow: var(--glass-shadow), inset 0 1px 0 rgba(255,255,255,.55); }
a.card { transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s; }
a.card:hover { background: var(--glass-strong); transform: translateY(-2px); box-shadow: var(--shadow8); }
@media (prefers-reduced-motion: reduce) { a.card { transition: none; } a.card:hover { transform: none; } }
.ic { border-radius: 13px; background: var(--glass-strong); color: var(--ink); border: .5px solid var(--glass-line); box-shadow: 0 6px 16px -10px rgba(0,0,0,.3); }
.media, .stats > div { background: var(--bg2); border-color: var(--hair); border-radius: 16px; }
.stats b { font-weight: 300; font-size: 28px; letter-spacing: -.02em; }
.stats .hot { background: rgba(0,0,0,.06); } .stats .hot b { color: var(--ink); }

/* кнопки — капсулы */
.btn { border-radius: 999px; border: .5px solid var(--stroke1); background: var(--glass-strong); color: var(--ink); font: 500 15px/20px var(--font);
  letter-spacing: -.005em; transition: background .2s, transform .1s; }
.btn:hover { background: #fff; color: var(--ink); border-color: var(--stroke1); }
@media (prefers-color-scheme: dark) { .btn:hover { background: rgba(255,255,255,.14); } }
.btn:active { transform: scale(.98); }
.btn.primary { background: var(--ink); color: var(--on-brand); border-color: transparent; box-shadow: 0 8px 20px -12px rgba(0,0,0,.55); }
.btn.primary:hover { background: var(--brand-hover); color: var(--on-brand); }
.btn.subtle, .btn.link { background: transparent; border-color: transparent; box-shadow: none; color: var(--ink2); }
.btn.subtle:hover, .btn.link:hover { background: var(--bg-hover); color: var(--ink); }
.btn.danger { color: var(--err); }

/* поля ввода */
input[type=text], input[type=password], input[type=url], input[type=number], input[type=date], select, textarea {
  background: rgba(255,255,255,.7); border: .5px solid var(--stroke1); border-radius: 12px; color: var(--ink); }
@media (prefers-color-scheme: dark) { input[type=text], input[type=password], input[type=url], input[type=number], input[type=date], select, textarea { background: rgba(0,0,0,.25); } }
input:focus, select:focus, textarea:focus { border: .5px solid var(--ink); box-shadow: 0 0 0 3px rgba(0,0,0,.08); padding-bottom: 10px; }
input[type=color] { border-radius: 12px; border: .5px solid var(--stroke1); background: transparent; }
input[type=file] { border-radius: 14px; background: var(--bg2); border: .5px dashed var(--stroke-acc); }
.check input, .pick .t input, .sp-pick input { accent-color: var(--ink); }

/* чипы, выбор, сегменты, точки */
.chip { border-radius: 999px; border: .5px solid var(--stroke1); background: var(--glass); font-size: 15px; }
.chip:has(input:checked) { background: var(--ink); color: var(--on-brand); border-color: var(--ink); }
.chip:has(input:checked) .sub { color: inherit; opacity: .7; }
.pick { border: .5px solid var(--stroke1); border-radius: 18px; background: var(--glass); }
.pick:has(input:checked) { border-color: var(--ink); background: var(--glass-strong); box-shadow: 0 0 0 1px var(--ink); }
.pick:has(input:checked) .t { color: var(--ink); }
.pick .t { font-weight: 400; letter-spacing: -.01em; }
.seg { border: .5px solid var(--stroke1); border-radius: 999px; background: var(--glass); }
.seg label + label span { border-left: .5px solid var(--stroke1); }
.seg label:has(input[value=yes]:checked) span { background: var(--ink); color: var(--on-brand); }
.dots span { border: .5px solid var(--stroke1); }

/* значки и плашки */
.badge { background: transparent; border: .5px solid var(--stroke1); color: var(--ink2); font-size: 12px; line-height: 18px; padding: 1px 9px; letter-spacing: .01em; }
.badge.brand, .badge.b2, .badge.brand-soft { background: transparent; color: var(--ink); border-color: var(--stroke-acc); }
.badge.ok { background: var(--ok-bg); border-color: transparent; } .badge.warn { background: var(--warn-bg); border-color: transparent; }
.badge.err { background: var(--err-bg); border-color: transparent; }
.bar { border-radius: 16px; border: .5px solid var(--glass-line); background: var(--glass); box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); }
.bar > .i { color: var(--ink); }
.bar.ok, .bar.warn, .bar.err { background: var(--glass); border-color: var(--glass-line); }
.bar.ok { box-shadow: inset 3px 0 0 #34c759, var(--glass-shadow); } .bar.warn { box-shadow: inset 3px 0 0 #ff9500, var(--glass-shadow); }
.bar.err { box-shadow: inset 3px 0 0 #ff3b30, var(--glass-shadow); }
.progress { background: rgba(0,0,0,.08); } .progress > div { background: var(--ink); }

/* вкладки раздела — капсулы */
.subnav { border-bottom: 0; gap: 6px; padding: 4px; margin-bottom: 28px; background: var(--glass); border: .5px solid var(--glass-line);
  border-radius: 999px; box-shadow: var(--glass-shadow); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); width: fit-content; max-width: 100%; }
.subnav a { border-bottom: 0; margin: 0; border-radius: 999px; min-height: 38px; padding: 0 14px; font-size: 14px; color: var(--ink2); }
.subnav a:hover { background: var(--bg-hover); color: var(--ink); }
.subnav a.on { background: var(--ink); color: var(--on-brand); font-weight: 500; }
.subnav a.on .n { color: inherit; opacity: .65; }

/* списки, миниатюры */
.list, .item, .checklist li { border-color: var(--hair); }
.thumb, .thumbs img, .thumbs span { border-radius: 12px; }
.avatar { border-color: rgba(255,255,255,.9); }
.drop { border: .5px dashed var(--stroke-acc); border-radius: 16px; }
.swatches span { border-radius: 12px; border: .5px solid var(--hair); }
.ref-card img { border-radius: 0; }
.sp-item img { border-radius: 14px; border: .5px solid var(--hair); }
.sp-bar { background: var(--glass-strong); border: .5px solid var(--glass-line); border-radius: 999px; padding: 8px 8px 8px 8px;
  -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); box-shadow: var(--shadow8); width: fit-content; max-width: 100%; }
.summary { background: var(--glass-strong); border: .5px solid var(--glass-line); border-radius: 22px; box-shadow: var(--shadow8);
  -webkit-backdrop-filter: blur(28px) saturate(170%); backdrop-filter: blur(28px) saturate(170%); }
.badge.brand { min-height: 0; display: inline-flex; font-weight: 400; }

/* ── Клиенты и «Создать креатив» (27.10.2026) ── */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.caption { font-size: 12px; line-height: 16px; color: var(--ink2); }
.top-create { min-height: 36px; padding: 0 14px; font-size: 14px; }
.top-refs.on { color: var(--ink); background: var(--bg-hover); }
.cl-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 6px; margin-bottom: 20px; }
.cl-stats > div { padding: 12px 18px; } .cl-stats > div + div { border-left: .5px solid var(--hair); }
.cl-stats b { display: block; font: 300 32px/38px var(--font-display); letter-spacing: -.02em; }
.cl-filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-bottom: 18px; }
.seg-tabs { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 23px; background: var(--glass); border: .5px solid var(--glass-line);
  box-shadow: var(--glass-shadow); }
.seg-tabs a, .seg-tabs label { display: inline-flex; align-items: center; min-height: 38px; padding: 0 14px; border-radius: 999px; color: var(--ink2);
  font: 400 14px/18px var(--font); letter-spacing: 0; text-transform: none; margin: 0; cursor: pointer; position: relative; }
.seg-tabs input { position: absolute; opacity: 0; pointer-events: none; }
.seg-tabs a:hover, .seg-tabs label:hover { background: var(--bg-hover); color: var(--ink); }
.seg-tabs .on { background: var(--ink); color: var(--on-brand); font-weight: 500; }
.seg-tabs .on:hover { background: var(--ink); color: var(--on-brand); }
.seg-tabs label:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
.cl-list { display: flex; flex-direction: column; gap: 14px; }
.cl-row { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.3fr) minmax(0, 1.3fr) minmax(0, 1.3fr) auto; gap: 20px; align-items: center; padding: 18px 22px; }
.cl-who { display: flex; gap: 14px; align-items: center; min-width: 0; color: var(--ink); }
.cl-logo { width: 56px; height: 56px; border-radius: 16px; background: #fff; border: .5px solid var(--hair); display: grid; place-items: center; object-fit: contain;
  padding: 6px; box-sizing: border-box; flex: none; color: var(--ink2); }
.cl-name { display: block; font: 400 21px/26px var(--font-display); letter-spacing: -.015em; }
.cl-act { display: flex; flex-direction: column; gap: 6px; min-width: 150px; }
.cl-act .btn { min-height: 38px; font-size: 14px; }
.cl-add { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 88px; border-radius: 22px; border: .5px dashed var(--stroke-acc);
  color: var(--ink2); font-size: 15px; text-align: center; padding: 0 16px; }
.cl-add:hover { background: var(--glass); color: var(--ink); }
@media (max-width: 960px) {
  .cl-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .cl-who { grid-column: 1 / -1; } .cl-act { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; } .cl-act form { flex: 1; }
  .cl-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cl-stats > div:nth-child(3) { border-left: 0; }
}
@media (max-width: 520px) { .cl-row { grid-template-columns: minmax(0, 1fr); } }
fieldset.bare { border: 0; padding: 0; margin: 0; min-width: 0; } fieldset.bare legend { padding: 0; }
.sheet { padding: 0; overflow: hidden; border-radius: 26px; }
.sheet-head { padding: 24px 26px 8px; } .sheet-head h1 { margin: 4px 0; } .sheet-head p { margin: 0; color: var(--ink2); font-size: 14px; line-height: 20px; }
.sheet-sec { display: flex; flex-direction: column; gap: 14px; padding: 18px 26px; border-top: .5px solid var(--hair); }
.sheet-head + .sheet-sec { border-top: 0; }
.sheet-foot { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 14px 18px; border-top: .5px solid var(--hair); background: rgba(255,255,255,.45); }
.cr-layout { display: flex; flex-wrap: wrap; gap: 22px; align-items: flex-start; }
.cr-main { flex: 999 1 600px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.cr-side { flex: 1 1 280px; min-width: 0; position: sticky; top: 76px; display: flex; flex-direction: column; gap: 12px; }
.cr-side-title { font: 300 24px/28px var(--font-display); letter-spacing: -.015em; }
.cr-dl { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 14px; font-size: 14px; line-height: 20px; }
.cr-dl dt { color: var(--ink2); } .cr-dl dd { margin: 0; }
.cr-dl [hidden] { display: none; }
.cr-checks { border-top: .5px solid var(--hair); padding-top: 12px; font-size: 13px; line-height: 20px; color: var(--fg2); }
.cr-step { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.cr-step .num { border: .5px solid var(--stroke1); color: var(--ink2); background: transparent; }
.cr-client { display: flex; gap: 12px; align-items: center; padding: 8px 10px; border-radius: 16px; border: .5px solid var(--stroke1); background: rgba(255,255,255,.7); }
.cr-client .cl-logo { width: 44px; height: 44px; border-radius: 12px; }
.cr-client select { border: 0; background: transparent; font-size: 17px; font-weight: 500; padding-left: 4px; }
.cr-media { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.cr-media .sp-pick { display: flex; flex-direction: column; gap: 4px; }
.cr-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; border: .5px solid var(--hair); display: block; }
.cr-refs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.cr-refs a { display: flex; flex-direction: column; gap: 4px; color: var(--ink); }
.cr-refs img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 12px; border: .5px solid var(--hair); }
input.strike { text-decoration: line-through; }
[hidden] { display: none !important; }
@media (max-width: 760px) { .top-create .txt { display: none; } .cr-side { position: static; } .cr-refs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ── Главная — разводящая страница (27.10.2026) ── */
.hub-grid { max-width: 720px; }
.hub-grid .pz-app { width: 140px; }
.hub-solid { background: #1d1d1f !important; color: #fff !important; border-color: transparent !important; }
@media (prefers-color-scheme: dark) { .hub-solid { background: #f5f5f7 !important; color: #1d1d1f !important; } }
.hub-count { position: absolute; top: -6px; right: -6px; min-width: 22px; height: 22px; padding: 0 6px; box-sizing: border-box; border-radius: 999px;
  background: #1d1d1f; color: #fff; font: 600 12px/22px var(--font); text-align: center; box-shadow: 0 0 0 2px #f6f6f4; }
@media (prefers-color-scheme: dark) { .hub-count { background: #f5f5f7; color: #1d1d1f; box-shadow: 0 0 0 2px #161617; } }
.hub-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 7px; vertical-align: 1px; background: #ff9500; }
.hub-dot.ok { background: #34c759; }
@media (max-width: 560px) { .hub-grid .pz-app { width: calc(33.333% - 8px); } }

/* ── Настройки: сотрудники и доступы ── */
.st-table { padding: 0; overflow-x: auto; }
.st-row { display: grid; grid-template-columns: minmax(180px, 1.4fr) 1fr 1.6fr 1fr auto; gap: 12px; align-items: center;
  padding: 12px 18px; border-top: 1px solid var(--hair); }
.st-row.st-head { border-top: 0; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.st-row.off { opacity: .55; }
.st-access .st-row { grid-template-columns: minmax(150px, 1.3fr) repeat(7, minmax(78px, .7fr)) minmax(110px, 1fr) auto; }
.st-check { text-align: center; }
.st-check input { width: 18px; height: 18px; accent-color: var(--ink); }
.st-table .empty { padding: 18px; }
.pw { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .04em; }
.me-name { margin-right: 4px; }
@media (max-width: 720px) { .st-row { grid-template-columns: 1fr auto; } .st-row > span:nth-child(n+2):not(:last-child) { display: none; }
  .st-access .st-row { grid-template-columns: 1fr; } .st-access .st-row > span { display: block !important; } }

/* ── Шапка в одну строку: бренд · Клиенты · Дизайн · Настройки ── */
.top .in { flex-wrap: nowrap; gap: 0 28px; min-height: 60px; }
.top .brand { min-height: 60px; flex: none; }
.menu { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.menu::-webkit-scrollbar { display: none; }
.menu a { display: inline-flex; align-items: center; min-height: 60px; padding: 0 14px; color: var(--ink2); font-size: 15px;
  border-bottom: 2px solid transparent; white-space: nowrap; }
.menu a:hover { color: var(--ink); }
.menu a.on { color: var(--ink); font-weight: 500; border-bottom-color: var(--ink); }
.top .spacer { flex: 1 1 auto; }
.eng-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: #34c759; box-shadow: 0 0 0 3px rgba(52,199,89,.18); }
.eng-dot.off { background: #c9a227; box-shadow: 0 0 0 3px rgba(201,162,39,.18); }
.top .me-name { color: var(--ink2); font-size: 14px; white-space: nowrap; margin: 0; }
.menu-out { display: inline-flex; align-items: center; color: var(--ink2); min-height: 40px; }
.menu-out:hover { color: var(--ink); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Полоса клиента внутри страницы: имя · Данные / Креативы · Создать креатив ── */
.client-bar { display: flex; align-items: center; gap: 8px 20px; flex-wrap: wrap; margin: 0 0 20px; padding: 6px 6px 6px 16px;
  border-radius: 999px; background: var(--glass); border: .5px solid var(--glass-line);
  -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4); }
.cb-name { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 500; min-height: 40px; max-width: 320px; }
.cb-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cb-tabs { display: flex; gap: 4px; }
.cb-tabs a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 999px; color: var(--ink2); font-size: 14px; }
.cb-tabs a.on { background: var(--ink); color: var(--on-brand); }
.cb-tabs a:not(.on):hover { color: var(--ink); background: var(--bg-hover); }
.cb-create { margin-left: auto; min-height: 40px; }
@media (max-width: 760px) {
  .top .in { gap: 0 10px; padding: 0 12px; }
  .top .brand .txt, .top .me-name { display: none; }
  .menu a { padding: 0 10px; font-size: 14px; }
  .client-bar { border-radius: 20px; }
  .cb-create { margin-left: 0; width: 100%; justify-content: center; }
}

/* ── Фото / Видео ── */
.gallery video { display: block; height: 260px; width: auto; max-width: 100%; border-radius: 12px; background: #000; }
.small-gal video { height: 120px; }
.seg-tabs label { cursor: pointer; }
.seg-tabs label input { position: absolute; opacity: 0; pointer-events: none; }
.cr-type { margin: 0 0 16px; }

/* ── Голосовая задача ── */
.vc { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 16px; }
.vc-btn { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 18px; border-radius: 999px; border: 0;
  background: var(--ink); color: var(--on-brand); font: 500 15px/1 var(--font); cursor: pointer; }
.vc-btn.rec { background: #c0392b; animation: vcpulse 1.2s ease-in-out infinite; }
.vc-btn:disabled { opacity: .6; cursor: progress; }
@keyframes vcpulse { 50% { box-shadow: 0 0 0 8px rgba(192,57,43,.18); } }
.vc-txt { color: var(--ink2); font-size: 14px; line-height: 1.45; }
.vc-txt b { color: var(--ink); font-weight: 500; }
.vc-out { margin-top: 8px; padding: 10px 12px; border-radius: 12px; background: var(--bg-hover); color: var(--ink); }
@media (max-width: 760px) { .vc { flex-direction: column; } .vc-btn { width: 100%; justify-content: center; } }