/* 2RD.Market — брендбук «галерея и афиша», версия 5 (15.10.2026).
   Светлый тихий фон, цвет дают работы подрядчиков; журнальная структура разделов.
   Шрифты свои (static/fonts, OFL), без внешних запросов. Сайт пока только в теме «День». */

/* ---------- шрифты: латиница и кириллица отдельными файлами, браузер грузит только нужные ---------- */
@font-face { font-family: "Geologica"; font-weight: 700; font-display: swap; src: url("fonts/geologica-cyrillic-700-normal.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Geologica"; font-weight: 700; font-display: swap; src: url("fonts/geologica-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Geologica"; font-weight: 700; font-display: swap; src: url("fonts/geologica-latin-ext-700-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113; }
@font-face { font-family: "Geologica"; font-weight: 800; font-display: swap; src: url("fonts/geologica-cyrillic-800-normal.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Geologica"; font-weight: 800; font-display: swap; src: url("fonts/geologica-latin-800-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Geologica"; font-weight: 800; font-display: swap; src: url("fonts/geologica-latin-ext-800-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113; }
@font-face { font-family: "Golos Text"; font-weight: 400; font-display: swap; src: url("fonts/golos-text-cyrillic-400-normal.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Golos Text"; font-weight: 400; font-display: swap; src: url("fonts/golos-text-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Golos Text"; font-weight: 400; font-display: swap; src: url("fonts/golos-text-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113; }
@font-face { font-family: "Golos Text"; font-weight: 600; font-display: swap; src: url("fonts/golos-text-cyrillic-600-normal.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Golos Text"; font-weight: 600; font-display: swap; src: url("fonts/golos-text-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Golos Text"; font-weight: 600; font-display: swap; src: url("fonts/golos-text-latin-ext-600-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113; }
@font-face { font-family: "JetBrains Mono"; font-weight: 500; font-display: swap; src: url("fonts/jetbrains-mono-cyrillic-500-normal.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "JetBrains Mono"; font-weight: 500; font-display: swap; src: url("fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "JetBrains Mono"; font-weight: 500; font-display: swap; src: url("fonts/jetbrains-mono-latin-ext-500-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113; }
@font-face { font-family: "Unbounded"; font-weight: 500; font-display: swap; src: url("fonts/unbounded-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Unbounded"; font-weight: 900; font-display: swap; src: url("fonts/unbounded-latin-900-normal.woff2") format("woff2"); }

/* ---------- токены ---------- */
:root {
  --canvas: #F6F5F2; --surface: #FFFFFF; --sunken: #ECEAE5; --sunken-hover: #E2DFD8;
  --ink: #111111; --ink-hover: #2A2927; --ink-soft: #5C5A55; --on-ink: #FFFFFF;
  --line: #E3E0DA; --rule: #111111; --field: #8E8A84; --placeholder: #6F6B65;
  --red: #BD0000; --on-red: #FFFFFF; --red-tint: #F8E3E0; --red-on-ink: #FF8A80;
  --ok: #1E7A3C; /* «Сохранено»: 5,3:1 на canvas, только галочка и короткая подпись */
  --display: "Geologica", "Helvetica Neue", Arial, sans-serif;
  --sans: "Golos Text", "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", "Courier New", monospace;
  --brand: "Unbounded", "Arial Black", sans-serif;
  --r-sm: 6px; --r-md: 12px; --r-lg: 20px;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --shadow-pop: 0 18px 40px -18px rgba(38, 30, 18, 0.35), 0 2px 6px -2px rgba(38, 30, 18, 0.12);
  --header-h: 64px; --safe-top: env(safe-area-inset-top, 0px);
  --z-sticky: 10; --z-header: 20; --z-toast: 40;
  color-scheme: light;
}

/* ---------- основа ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + var(--safe-top) + 16px); scrollbar-color: #C9C4BB var(--canvas); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--canvas); color: var(--ink); font: 400 1rem/1.6 var(--sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
b, strong { font-weight: 600; }
img, svg { max-width: 100%; }
img { display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
p { text-wrap: pretty; }
::selection { background: var(--ink); color: var(--on-ink); }
input, textarea { caret-color: var(--red); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 4px; }
[hidden] { display: none !important; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ic { width: 1.15em; height: 1.15em; flex: none; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.2em; }

.wrap { max-width: 1240px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
@media (min-width: 900px) { .wrap { padding-left: max(32px, env(safe-area-inset-left)); padding-right: max(32px, env(safe-area-inset-right)); } }
.narrow { max-width: 760px; }
.stack { display: grid; gap: 18px; align-content: start; }
.stack > * { margin: 0; }
.stack.tight { gap: 6px; }
.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

.skip { position: absolute; left: 16px; top: -200px; z-index: var(--z-toast); background: var(--ink); color: var(--on-ink); padding: 10px 16px; border-radius: var(--r-sm); text-decoration: none; font-weight: 600; }
.skip:focus { top: 12px; }

/* ---------- шапка ---------- */
.top { position: sticky; top: 0; padding-top: var(--safe-top); z-index: var(--z-header); background: rgba(246, 245, 242, 0.86); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid var(--line); view-transition-name: header; }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: var(--header-h); }
.logo { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--ink); font-family: var(--brand); font-size: 1.125rem; white-space: nowrap; min-height: 44px; }
.logo .mark { width: 32px; height: 32px; flex: none; margin-top: -3px; color: var(--ink); }
.logo b { font-weight: 900; letter-spacing: -0.02em; }
.logo i { display: inline-block; width: 0.26em; height: 0.26em; background: var(--red); margin: 0 0.05em; }
.logo span { font-weight: 500; }
.nav { display: flex; align-items: center; gap: 4px; }
.nav form { margin: 0; }
.nav a:not(.btn), .nav button { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; font: 600 0.875rem var(--sans); text-decoration: none; color: var(--ink-soft); background: none; border: 0; cursor: pointer; border-radius: var(--r-sm); transition: color 150ms var(--ease); }
.nav [aria-current="page"] { color: var(--ink); text-decoration: underline 2px var(--red); text-underline-offset: 8px; }
.nav .btn { margin-left: 6px; }
.nav .s { display: none; }
@media (hover: hover) { .nav a:not(.btn):hover, .nav button:hover { color: var(--ink); } }
@media (max-width: 560px) {
  .nav a:not(.btn), .nav button { padding: 0 7px; }
  .nav .l { display: none; } .nav .s { display: inline; }
  .logo { font-size: 1rem; }
}
@media (max-width: 360px) { .logo .word span { display: none; } }

/* ---------- подвал ---------- */
.foot { border-top: 1px solid var(--line); padding-block: 40px 48px; color: var(--ink-soft); font-size: 0.8125rem; line-height: 1.6; margin-top: clamp(80px, 10vw, 128px); }
.foot .wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 40px; align-items: start; }
.foot p { margin: 0 0 6px; }
.foot nav { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.foot a { color: var(--ink-soft); }
@media (hover: hover) { .foot a:hover { color: var(--ink); } }
@media (max-width: 720px) { .foot .wrap { grid-template-columns: minmax(0, 1fr); } }

/* ---------- типографика ---------- */
h1, h2, h3 { font-family: var(--display); margin: 0; text-wrap: balance; }
h1 { font-weight: 800; font-size: clamp(2.25rem, 3.6vw + 1rem, 3.5rem); line-height: 1; letter-spacing: -0.035em; }
h2 { font-weight: 700; font-size: clamp(1.625rem, 1.6vw + 1rem, 2.125rem); line-height: 1.1; letter-spacing: -0.02em; }
h3 { font-weight: 700; font-size: 1.25rem; line-height: 1.2; letter-spacing: -0.01em; }
.h3 { font: 700 1.25rem/1.2 var(--display); letter-spacing: -0.01em; }
.d-xl { font-weight: 800; font-size: clamp(2.75rem, 6.2vw + 0.5rem, 5.75rem); line-height: 0.95; letter-spacing: -0.04em; }
.tt { font: 700 1.25rem/1.2 var(--display); letter-spacing: -0.01em; }
.lead { font-size: clamp(1.0625rem, 0.5vw + 0.95rem, 1.25rem); line-height: 1.5; color: var(--ink-soft); max-width: 36em; }
.meta, .code { font: 500 0.75rem/1.35 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); margin: 0; }
.soft, .hint { color: var(--ink-soft); }
.ink { color: var(--ink); }
.center { text-align: center; }
.small { font-size: 0.875rem; line-height: 1.45; color: var(--ink-soft); margin: 0; }
.red, .accent { color: var(--red); }
.num, .price, .count, .meta { font-variant-numeric: tabular-nums; }
.prose { max-width: 65ch; }
.prose ol, .prose ul { padding-left: 1.2em; display: grid; gap: 10px; }
ol.rules { counter-reset: rule; list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
ol.rules li { counter-increment: rule; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--line); }
ol.rules li::before { content: counter(rule); font: 500 0.8125rem/1.9 var(--mono); color: var(--ink-soft); }
.doc h2 { font-size: 1.375rem; margin: 36px 0 12px; }
.doc p { margin: 0; color: var(--ink); }

/* ---------- разделы ---------- */
.sec { padding-top: clamp(72px, 9vw, 128px); }
.shead { border-top: 1px solid var(--rule); padding-top: 18px; display: flex; justify-content: space-between; align-items: end; gap: 12px 24px; flex-wrap: wrap; margin-bottom: clamp(24px, 3vw, 36px); }
.shead.tight { margin-bottom: 0; padding-top: 14px; }
.shead > .meta { padding-bottom: 6px; }
.shead > a { font: 600 0.875rem var(--sans); display: inline-flex; gap: 6px; align-items: center; min-height: 44px; text-decoration: none; }
.shead > a .go { transition: transform 250ms var(--ease); }
@media (hover: hover) { .shead > a:hover { text-decoration: underline; } .shead > a:hover .go { transform: translateX(3px); } }
.row-head { display: flex; justify-content: space-between; align-items: end; gap: 12px 24px; flex-wrap: wrap; }
.page { padding-top: clamp(28px, 4vw, 48px); }
.pagehead { padding-block: clamp(32px, 5vw, 64px) 12px; display: grid; gap: 14px; }
.pagehead > * { margin: 0; }
.crumbs { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; font-size: 0.875rem; color: var(--ink-soft); margin: 24px 0 0; padding: 0; list-style: none; }
.crumbs a { color: var(--ink-soft); text-decoration: none; min-height: 32px; display: inline-flex; align-items: center; }
.crumbs li + li::before { content: "/"; margin-right: 8px; color: var(--field); }
.crumbs [aria-current] { color: var(--ink); font-weight: 600; }
.pagehead .crumbs { margin: 0; }
/* текст о направлении под карточками: для людей и поисковиков, спокойно и узко */
.seo-text p { max-width: 68ch; margin: 0 0 14px; }
.seo-text p.small { color: var(--ink-soft); }
@media (hover: hover) { .crumbs a:hover { color: var(--ink); text-decoration: underline; } }

/* ---------- кнопки ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border: 0; border-radius: var(--r-md); background: var(--ink); color: var(--on-ink); font: 600 0.9375rem var(--sans); text-decoration: none; cursor: pointer; transition-property: background-color, color, transform, box-shadow; transition-duration: 150ms; transition-timing-function: ease-out; -webkit-tap-highlight-color: transparent; }
.btn:not(:disabled):active { transform: scale(0.96); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn[aria-busy="true"] { opacity: 0.72; cursor: progress; }
.btn.alt, .btn.ghost, .btn.quiet { background: var(--sunken); color: var(--ink); }
.btn.danger { background: transparent; color: var(--red); box-shadow: inset 0 0 0 1px var(--red); }
.btn.danger.solid { background: var(--red); color: var(--on-red); box-shadow: none; }
.btn.small, .btn.sm { min-height: 40px; padding: 0 14px; font-size: 0.875rem; border-radius: 10px; }
.btn.icon { padding: 0; width: 40px; min-height: 40px; border-radius: 10px; }
.btn .ic { width: 1.1em; height: 1.1em; }
.btn .arr { transition: transform 250ms var(--ease); }
.btn.block { width: 100%; }
@media (hover: hover) {
  .btn:hover { background: var(--ink-hover); color: var(--on-ink); }
  .btn.alt:hover, .btn.ghost:hover, .btn.quiet:hover { background: var(--sunken-hover); color: var(--ink); }
  .btn.danger:hover { background: var(--red); color: var(--on-red); }
  .btn:hover .arr { transform: translateX(3px); }
}
.link { background: none; border: 0; padding: 0; color: var(--ink); text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer; font-weight: 600; font-size: 0.9375rem; min-height: 44px; display: inline-flex; align-items: center; gap: 6px; }
.link .ic { width: 1em; height: 1em; }

/* ---------- первый экран ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; padding-top: clamp(32px, 6vw, 80px); }
.hero .stack { gap: 26px; }
.hero .facts-line { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.hero .facts-line span { display: inline-flex; align-items: center; gap: 8px; }
.hero .facts-line span + span::before { content: ""; width: 4px; height: 4px; background: var(--field); border-radius: 50%; margin-right: 6px; }
.search { position: relative; max-width: 560px; }
.search .ic { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--ink-soft); pointer-events: none; }
.search input[type="search"] { padding-left: 46px; padding-right: 110px; min-height: 56px; border-radius: var(--r-md); font-size: 1.0625rem; }
.search .btn { position: absolute; right: 6px; top: 6px; min-height: 44px; }
.quick { display: flex; flex-wrap: wrap; gap: 8px; }

/* стена работ: колонки медленно плывут, как лента в галерее */
.wall-wrap { position: relative; }
.wall { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; height: clamp(380px, 46vw, 600px); overflow: hidden; -webkit-mask-image: linear-gradient(transparent, #000 10%, #000 88%, transparent); mask-image: linear-gradient(transparent, #000 10%, #000 88%, transparent); }
.wall .col { display: grid; gap: 12px; align-content: start; }
.wall .col:nth-child(2) { margin-top: -90px; }
@media (prefers-reduced-motion: no-preference) {
  .wall .col { animation: drift 46s linear infinite; }
  .wall .col:nth-child(2) { animation-duration: 54s; animation-direction: reverse; }
  .wall .col:nth-child(3) { animation-duration: 50s; }
  .wall-wrap.paused .col, .wall-wrap.offscreen .col { animation-play-state: paused; }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) { .wall-wrap:hover .col { animation-play-state: paused; } }
@keyframes drift { from { transform: translateY(0); } to { transform: translateY(calc(-50% - 6px)); } }
.wall-toggle { position: absolute; right: 8px; bottom: 8px; z-index: 2; background: rgba(246, 245, 242, 0.92); color: var(--ink); box-shadow: 0 1px 2px rgba(38, 30, 18, 0.15); }
.wall-toggle .on-pause, .wall-toggle[aria-pressed="true"] .on-play { display: none; }
.wall-toggle[aria-pressed="true"] .on-pause { display: block; }
@media (hover: hover) { .wall-toggle:hover { background: var(--surface); color: var(--ink); } }
@media (prefers-reduced-motion: reduce) { .wall-toggle { display: none; } }

/* ---------- обложки и фото ---------- */
.art { aspect-ratio: 4 / 5; border-radius: var(--r-md); overflow: hidden; background: var(--sunken); position: relative; max-width: 100%; isolation: isolate; }
.art::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08); pointer-events: none; }
.art svg, .art img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: 50% 40%; transition: transform 700ms var(--ease-out), opacity 300ms ease-out; }
.art img.loading { opacity: 0; }
.art .cap { position: absolute; left: 10px; bottom: 10px; z-index: 1; font: 500 0.625rem/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; background: rgba(246, 245, 242, 0.92); color: var(--ink); padding: 5px 7px; border-radius: 4px; }

/* ---------- каталог ---------- */
.filterbar { position: sticky; top: calc(var(--header-h) + var(--safe-top)); z-index: var(--z-sticky); background: rgba(246, 245, 242, 0.92); box-shadow: 0 0 0 100vmax rgba(246, 245, 242, 0.92); clip-path: inset(0 -100vmax); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); padding-block: 10px; }
.chips { display: flex; gap: 8px; overflow-x: auto; padding: 4px 40px 4px 4px; margin-inline: -4px; scrollbar-width: none; overscroll-behavior-x: contain; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; display: inline-flex; align-items: center; min-height: 40px; font: 600 0.875rem/1 var(--sans); padding: 0 16px; border-radius: 999px; background: var(--sunken); color: var(--ink); text-decoration: none; border: 0; cursor: pointer; transition: background-color 150ms ease-out, color 150ms ease-out; -webkit-tap-highlight-color: transparent; }
.chip[aria-current="true"], .chip[aria-pressed="true"], .chip.on { background: var(--ink); color: var(--on-ink); }
.chip .n { margin-left: 6px; font: 500 0.75rem/1 var(--mono); color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.chip[aria-current="true"] .n { color: inherit; opacity: 0.75; }
/* ссылки на страницы по инструментам и поводам: переносятся по строкам, без прокрутки */
.chips.wrap-chips { flex-wrap: wrap; overflow: visible; padding: 0; margin: 0; -webkit-mask-image: none; mask-image: none; }
@media (hover: hover) { .chip:not([aria-current="true"]):not(.on):hover { background: var(--sunken-hover); } }
.filters { display: grid; grid-template-columns: minmax(0, 2.2fr) repeat(4, minmax(0, 1fr)); gap: 12px; align-items: end; border-top: 1px solid var(--rule); padding-top: 16px; margin-top: 12px; }
.js .filters .apply { display: none; }
.filters .search input[type="search"] { min-height: 48px; padding-left: 42px; padding-right: 44px; font-size: 1rem; }
.more { display: contents; }
.more-toggle { display: none; }
.more-toggle .n:not(:empty) { margin-left: 2px; font: 500 0.75rem var(--mono); background: var(--ink); color: var(--on-ink); border-radius: 999px; padding: 3px 7px; }
.more-toggle .ic { transition: transform 200ms var(--ease); }
.more-toggle[aria-expanded="true"] .ic { transform: rotate(90deg); }
.filters .search .ic { left: 14px; }
.found { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.resultbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 20px; min-height: 32px; }
.kbd { font: 500 0.75rem/1 var(--mono); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px; padding: 3px 6px; color: var(--ink-soft); background: var(--surface); }
.search .kbd { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); }
@media (pointer: coarse) { .kbd { display: none; } .filters .search input[type="search"] { padding-right: 14px; } }

.cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 48px 24px; padding-top: 28px; }
.card { position: relative; display: grid; gap: 10px; align-content: start; min-width: 0; color: var(--ink); view-transition-class: card; }
.card .meta { margin-top: -4px; }
.card .art { margin-bottom: 2px; }
.card h3 { font-size: 1.25rem; }
.card h3 a { text-decoration: none; }
.card h3 a::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: var(--r-md); }
.card h3 a:focus-visible { outline: none; }
.card:has(h3 a:focus-visible) .art { outline: 2px solid var(--ink); outline-offset: 3px; }
@media (hover: hover) { .card:hover .art img, .card:hover .art svg { transform: scale(1.03); } .card:hover h3 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; } }
.nm { display: flex; align-items: center; gap: 8px; }
.ok { flex: none; width: 18px; height: 18px; border-radius: var(--r-sm); background: var(--red); color: var(--on-red); display: inline-grid; place-items: center; }
.ok .ic { width: 12px; height: 12px; stroke-width: 3; vertical-align: 0; }
.price { font: 600 0.875rem/1.3 var(--sans); margin: 0; }
.price > span { font-weight: 400; color: var(--ink-soft); }
.tags { display: flex; gap: 6px; flex-wrap: wrap; list-style: none; padding: 0; margin: 0; }
.cards.flush { padding-top: 0; }
.tag { font: 600 0.75rem/1 var(--sans); padding: 7px 11px; border-radius: 999px; background: var(--sunken); color: var(--ink); }
.tag.new { background: var(--red-tint); color: var(--red); }
.mark { display: inline-flex; align-items: center; gap: 8px; font-size: 0.875rem; color: var(--ink-soft); }
.empty { grid-column: 1 / -1; display: grid; justify-items: center; gap: 10px; text-align: center; padding: 56px 16px; color: var(--ink-soft); background: var(--surface); border-radius: var(--r-lg); }
.empty h3 { color: var(--ink); }
.empty p { margin: 0; max-width: 40ch; }
.preview-bar { background: var(--ink); color: var(--on-ink); padding: 10px 0; font: 500 0.75rem/1.4 var(--mono); letter-spacing: 0.04em; }

/* ---------- страница подрядчика ---------- */
.person { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 5vw, 72px); align-items: start; padding-top: clamp(20px, 3vw, 36px); }
.person > .art { border-radius: var(--r-lg); position: sticky; top: calc(var(--header-h) + var(--safe-top) + 20px); view-transition-name: photo; }
.person .stack { gap: 24px; }
.person .head { display: grid; gap: 12px; }
.person .head > * { margin: 0; }
.person .nm { gap: 12px; }
.person .nm .ok { width: 28px; height: 28px; border-radius: 8px; }
.person .nm .ok .ic { width: 16px; height: 16px; }
.person .about { margin: 0; max-width: 60ch; }
.actions .handle { color: var(--ink-soft); }
.meta.id { color: var(--ink-soft); }
.actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--rule); }
.facts { margin: 0; }
.facts > div { padding: 14px 0; min-width: 0; }
.facts dd { margin: 0; }
.facts dd .small { display: block; }
.facts > div + div { padding-left: 16px; border-left: 1px solid var(--line); }
.facts b { font: 700 1.125rem/1.25 var(--display); display: block; margin-top: 6px; font-variant-numeric: tabular-nums; }
.facts .small { margin-top: 4px; }
.works { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.works a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 2px; min-height: 56px; border-bottom: 1px solid var(--line); text-decoration: none; }
.works .txt { display: grid; gap: 2px; min-width: 0; }
.works .src { font-weight: 600; }
.works .url { color: var(--ink-soft); font-size: 0.8125rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.works .badge { width: 36px; height: 36px; border-radius: 10px; background: var(--sunken); display: grid; place-items: center; color: var(--ink); }
.works .go { color: var(--ink-soft); transition: transform 250ms var(--ease), color 150ms ease-out; }
@media (hover: hover) { .works a:hover .go { transform: translate(2px, -2px); color: var(--red); } .works a:hover .src { text-decoration: underline; } }
.disclaimer { display: flex; gap: 10px; align-items: flex-start; font-size: 0.8125rem; line-height: 1.5; color: var(--ink-soft); border-top: 1px solid var(--line); padding-top: 14px; margin: 0; }
.disclaimer .ok { margin-top: 1px; }

/* ---------- формы ---------- */
.form { display: grid; gap: 20px; }
fieldset { border: 0; background: var(--surface); border-radius: var(--r-lg); padding: clamp(20px, 3vw, 32px); margin: 0; display: grid; gap: 22px; min-width: 0; }
legend { font: 700 1.25rem/1.2 var(--display); letter-spacing: -0.01em; padding: 0; float: left; width: 100%; display: flex; align-items: center; gap: 12px; }
/* заголовок раздела анкеты — обычный блок: Safari неверно ставит legend внутри fieldset с display:grid,
   поэтому legend остаётся только для экранных чтецов (sr-only), а видимый заголовок — .fs-head */
.fs-head { font: 700 1.25rem/1.2 var(--display); letter-spacing: -0.01em; display: flex; align-items: center; gap: 12px; margin: 0; }
legend .n, .fs-head .n { font: 500 0.75rem/1 var(--mono); color: var(--ink-soft); border: 1px solid var(--line); border-radius: 999px; padding: 6px 9px; }
legend + * { clear: both; }
.f { display: grid; gap: 8px; font-weight: 600; font-size: 0.9375rem; min-width: 0; }
.f > .top-line { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.f > p, .f > label, .f > .label { margin: 0; }
.musician, .occasions { display: grid; gap: 22px; padding: 18px; border-radius: var(--r-md); background: var(--canvas); }
.musician input[type=text] { background: var(--surface); }
.f-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 16px; align-items: start; }
fieldset.sub { background: none; padding: 0; border-radius: 0; gap: 8px; }
fieldset.sub > legend { font: 600 0.9375rem/1.4 var(--sans); letter-spacing: 0; float: none; display: block; margin-bottom: 8px; }
fieldset.sub > legend + * { clear: none; }
.affix { position: relative; }
.affix input { padding-right: 40px; font-variant-numeric: tabular-nums; }
.affix > span { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--ink-soft); pointer-events: none; }
.opt { font-weight: 400; color: var(--ink-soft); font-size: 0.8125rem; }
.hint { font-weight: 400; font-size: 0.8125rem; line-height: 1.4; }
.count { font: 500 0.75rem var(--mono); color: var(--ink-soft); }
.count.over { color: var(--red); }
.count.full { color: var(--ink); }
.btn .n { font-family: var(--mono); font-size: 0.75rem; margin-left: 6px; opacity: 0.7; }
input[type=text], input[type=email], input[type=password], input[type=search], input[type=number], input[type=url], input[type=date], select, textarea {
  width: 100%; font: 400 1rem var(--sans); color: var(--ink); background: var(--surface);
  border: 1px solid var(--field); border-radius: var(--r-sm); padding: 12px 14px; min-height: 48px;
  transition: border-color 150ms ease-out, box-shadow 150ms ease-out; -webkit-appearance: none; appearance: none; }
fieldset input[type=text], fieldset input[type=email], fieldset input[type=password], fieldset select, fieldset textarea { background: var(--canvas); }
input::placeholder, textarea::placeholder { color: var(--placeholder); opacity: 1; }
select { background-image: linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%), linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%); background-position: calc(100% - 20px) 21px, calc(100% - 15px) 21px; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 36px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.16); }
[aria-invalid="true"] { border-color: var(--red) !important; }
.ferr { display: flex; gap: 6px; align-items: flex-start; color: var(--red); font-weight: 400; font-size: 0.8125rem; line-height: 1.4; }
.ferr .ic { margin-top: 1px; }
textarea { min-height: 120px; resize: vertical; line-height: 1.5; }
.checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px 16px; }
.check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; font-size: 0.9375rem; cursor: pointer; padding: 8px 0; min-height: 40px; }
.check input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--ink); flex: none; }
.check:has(input:disabled) { color: var(--ink-soft); cursor: not-allowed; }
.group-title { font: 600 0.8125rem var(--sans); color: var(--ink-soft); grid-column: 1 / -1; margin-top: 10px; }
.consent { background: var(--canvas); padding: 14px 16px; border-radius: var(--r-md); border: 1px solid var(--line); }
.errors { background: var(--red-tint); border-radius: var(--r-md); padding: 16px 20px; color: var(--ink); }
/* спокойное сообщение: «пароль изменён», «проверьте почту» */
.notice { background: var(--sunken); border-radius: var(--r-md); padding: 16px 20px; color: var(--ink); }
.notice p { margin: 0; }
.notice p + p { margin-top: 8px; color: var(--ink-soft); }
.errors:focus { outline: 2px solid var(--red); outline-offset: 2px; }
.errors b { color: var(--red); }
.errors p { margin: 0; }
.errors ul { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 4px; }
.errors a { color: var(--ink); }
.pw { position: relative; }
.pw input { padding-right: 56px; }
.pw .btn.icon { position: absolute; right: 4px; top: 4px; background: transparent; color: var(--ink-soft); }
@media (hover: hover) { .pw .btn.icon:hover { background: var(--sunken); color: var(--ink); } }
.auth { max-width: 480px; margin: 0 auto; padding-top: clamp(32px, 6vw, 72px); display: grid; gap: 18px; }
.auth > * { margin: 0; }
.auth .form { margin-top: 8px; }
.auth .note-line { border-top: 1px solid var(--line); padding-top: 16px; }
.mini-steps { list-style: none; padding: 0; display: flex; gap: 20px; font: 600 0.875rem var(--sans); color: var(--ink-soft); }
.mini-steps li { display: inline-flex; align-items: center; gap: 8px; }
.mini-steps .dot { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--sunken); font: 500 0.75rem var(--mono); }
.mini-steps [aria-current="step"] { color: var(--ink); }
.mini-steps [aria-current="step"] .dot { background: var(--ink); color: var(--on-ink); }
.pw .on-show, .pw [aria-pressed="true"] .on-hide { display: none; }
.pw [aria-pressed="true"] .on-show { display: block; }
.narrow-form { max-width: 480px; }

/* загрузка фото: перетащите или выберите, сразу видно кадр 4:5 */
.drop { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 16px; align-items: center; padding: 12px; border: 1px dashed var(--field); border-radius: var(--r-md); background: var(--canvas); cursor: pointer; transition: border-color 150ms ease-out, background-color 150ms ease-out; }
.drop:focus-within { outline: 2px solid var(--ink); outline-offset: 2px; }
.drop.over { border-color: var(--ink); background: var(--sunken); }
.drop .art { width: 120px; border-radius: 10px; display: block; }
.drop .pv-photo { display: block; }
.drop-txt { display: grid; gap: 4px; }
.drop .art img { object-position: 50% 40%; }
.drop .art .ph { width: 100%; height: 100%; display: grid; place-items: center; color: var(--ink-soft); }
.drop .art .ph .ic { width: 32px; height: 32px; stroke-width: 1.5; }
.drop b { display: block; }
.drop { position: relative; }
.drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
@media (hover: hover) { .drop:hover { border-color: var(--ink); } }
.f .label { font-weight: 600; }

/* ---------- кабинет ---------- */
.cab-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 32px; align-items: end; }
.idcard { display: grid; gap: 4px; background: var(--surface); border-radius: var(--r-lg); padding: 16px 20px; min-width: 220px; }
.idcard .rd { font: 800 clamp(1.5rem, 2vw + 0.8rem, 2rem)/1.1 var(--display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.idcard p { margin: 0; color: var(--ink-soft); font-size: 0.8125rem; max-width: 30ch; }
.idcard .rd-line { display: flex; align-items: center; gap: 6px; }
.idcard .btn.icon { width: 36px; min-height: 36px; background: transparent; color: var(--ink-soft); }
@media (hover: hover) { .idcard .btn.icon:hover { background: var(--sunken); color: var(--ink); } }
.cab-head h1 { font-size: clamp(2rem, 3vw + 1rem, 3.25rem); overflow-wrap: anywhere; }
.status { margin-top: 24px; }
.status { background: var(--surface); border-radius: var(--r-lg); padding: clamp(20px, 3vw, 28px); display: grid; gap: 16px; }
.status p { margin: 0; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; counter-reset: st; }
.steps li { position: relative; display: grid; gap: 8px; align-content: start; font-size: 0.875rem; color: var(--ink-soft); padding-top: 14px; }
.steps li::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; border-radius: 999px; background: var(--line); }
.steps li.done { color: var(--ink); }
.steps li.done::before, .steps li.now::before { background: var(--ink); }
.steps li.warn::before { background: var(--red); }
.steps li.now { color: var(--ink); font-weight: 600; }
.steps li.warn { color: var(--red); font-weight: 600; }
.steps .dot { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--sunken); color: var(--ink-soft); font: 500 0.6875rem var(--mono); }
.steps li.done .dot { background: var(--ink); color: var(--on-ink); }
.steps li.now .dot { background: var(--ink); color: var(--on-ink); box-shadow: 0 0 0 4px rgba(17, 17, 17, 0.12); }
.steps li.warn .dot { background: var(--red); color: var(--on-red); }
.steps li > span:last-child { overflow-wrap: anywhere; }
.steps .dot .ic { width: 12px; height: 12px; stroke-width: 3; vertical-align: 0; }
.note { background: var(--canvas); padding: 12px 16px; border-radius: var(--r-sm); }
.note.warn { background: var(--red-tint); }
.cabinet-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(20px, 3vw, 36px); align-items: start; margin-top: 24px; }
.cabinet-grid > .form { gap: 16px; }
.errors + .cabinet-grid { margin-top: 16px; }
.page > .errors { margin-top: 24px; }
.aside { position: sticky; top: calc(var(--header-h) + var(--safe-top) + 16px); display: grid; gap: 16px; }
.aside .panel { position: static; }
.progress-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.progress-list a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; text-decoration: none; font-weight: 600; font-size: 0.9375rem; min-height: 44px; }
.progress-list .state { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--field); display: grid; place-items: center; flex: none; }
.progress-list .done .state { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.progress-list .state .ic { width: 12px; height: 12px; stroke-width: 3; vertical-align: 0; opacity: 0; }
.progress-list .done .state .ic { opacity: 1; }
.progress-list .left { margin-left: auto; font: 500 0.75rem var(--mono); color: var(--ink-soft); }
@media (hover: hover) { .progress-list a:hover { background: var(--canvas); } }
.preview-card { margin: 0; display: grid; gap: 10px; background: var(--surface); border-radius: var(--r-lg); padding: 16px; }
.preview-card .card { gap: 8px; pointer-events: none; }
.preview-card .art { max-width: none; }
.preview-card figcaption { text-align: center; }
.submit-box { display: grid; gap: 10px; }
.submit-box .btn { width: 100%; }
.submit-box .small { text-align: center; }
.locked { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(20px, 3vw, 36px); align-items: start; margin-top: 24px; }
.locked .note { margin: 0; background: var(--surface); padding: 20px 22px; border-radius: var(--r-lg); }
.danger-zone { border-top: 1px solid var(--line); margin-top: 48px; padding-top: 20px; display: grid; gap: 12px; }
.danger-zone details { border-radius: var(--r-md); }
.danger-zone summary { cursor: pointer; color: var(--ink-soft); font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; gap: 8px; list-style: none; }
.danger-zone summary::-webkit-details-marker { display: none; }
.danger-zone summary .ic { transition: transform 200ms var(--ease); }
.danger-zone details[open] summary .ic { transform: rotate(90deg); }
.danger-zone .confirm { background: var(--surface); border-radius: var(--r-md); padding: 16px 18px; display: grid; gap: 12px; margin-top: 4px; }
.danger-zone a { color: var(--ink-soft); }
.danger-zone p { margin: 0; }
.danger-zone .confirm p { color: var(--ink-soft); font-size: 0.9375rem; max-width: 60ch; }
@media (hover: hover) { .danger-zone summary:hover, .danger-zone a:hover { color: var(--ink); } }

/* ---------- модерация ---------- */
.tabs { display: flex; gap: 4px; overflow-x: auto; margin-top: 24px; background: var(--sunken); padding: 4px; border-radius: var(--r-md); scrollbar-width: none; }
.tabs a { flex: none; display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; color: var(--ink-soft); text-decoration: none; font-weight: 600; font-size: 0.875rem; border-radius: 8px; }
.tabs a[aria-current="page"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(38, 30, 18, 0.1); }
@media (hover: hover) { .tabs a:hover { color: var(--ink); } }
.tabs .n { font-family: var(--mono); font-size: 0.75rem; margin-left: 6px; opacity: 0.7; }
.table-wrap { overflow-x: auto; margin-top: 16px; background: var(--surface); border-radius: var(--r-lg); }
td a.strong { font-weight: 600; }
td .sub { display: block; color: var(--ink-soft); font-size: 0.8125rem; }
table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
th, td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font: 500 0.75rem var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); }
tbody tr:last-child td { border-bottom: 0; }
@media (hover: hover) { tbody tr:hover { background: var(--canvas); } }
td.num { white-space: nowrap; font-family: var(--mono); font-size: 0.8125rem; }
.admin { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px; padding-top: 24px; }
.kv { display: grid; grid-template-columns: 180px minmax(0, 1fr); border-top: 1px solid var(--rule); }
.kv > div { padding: 10px 0; border-bottom: 1px solid var(--line); min-width: 0; overflow-wrap: anywhere; }
.kv > div:nth-child(odd) { color: var(--ink-soft); font-size: 0.875rem; padding-right: 12px; }
.panel { background: var(--surface); border-radius: var(--r-lg); padding: 24px; display: grid; gap: 16px; align-content: start; position: sticky; top: calc(var(--header-h) + var(--safe-top) + 16px); }
.panel.static { position: static; }
.panel fieldset.sub > legend.h3 { font: 700 1.25rem/1.2 var(--display); display: flex; justify-content: space-between; align-items: baseline; width: 100%; }
.msg-box { display: grid; gap: 12px; border-top: 1px solid var(--line); padding-top: 16px; }
.kv ins { display: block; text-decoration: none; }
ul.plain { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.msg { background: var(--canvas); padding: 14px; font-size: 0.875rem; white-space: pre-wrap; border-radius: var(--r-sm); }
.diff-old { display: block; text-decoration: line-through; color: var(--ink-soft); }
.log { font-size: 0.8125rem; color: var(--ink-soft); padding-left: 1.2em; }
.log li { padding: 4px 0; }
img.thumb { border-radius: var(--r-md); }

/* ---------- уведомления ---------- */
.toasts { position: fixed; left: 0; right: 0; bottom: max(16px, env(safe-area-inset-bottom)); z-index: var(--z-toast); display: grid; justify-items: center; gap: 8px; padding-inline: 16px; pointer-events: none; }
.toast { pointer-events: auto; display: flex; align-items: center; gap: 12px; max-width: 560px; width: fit-content; background: var(--ink); color: var(--on-ink); border-radius: var(--r-md); padding: 10px 8px 10px 16px; box-shadow: var(--shadow-pop); font-size: 0.9375rem; }
.toast .btn.icon { background: transparent; color: var(--on-ink); width: 36px; min-height: 36px; }
.toast > .ic { color: var(--red-on-ink); }
.toast.out { opacity: 0; transform: translateY(8px); transition: opacity 150ms ease-out, transform 150ms ease-out; }
@media (hover: hover) { .toast .btn.icon:hover { background: var(--ink-hover); } }
@media (prefers-reduced-motion: no-preference) { .toast { animation: toast-in 300ms var(--ease-out) both; } }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); filter: blur(4px); } }

/* ---------- раздел «вопросы» (определения, без аккордеона) ---------- */
.qa { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); border-top: 1px solid var(--line); margin: 0; }
.qa dt, .qa dd { margin: 0; padding: 18px 0; border-bottom: 1px solid var(--line); }
.qa dt { font: 700 1.0625rem/1.35 var(--display); letter-spacing: -0.005em; padding-right: 24px; }
.qa dd { color: var(--ink-soft); }
.flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
.flow li { padding: 0 24px 0 0; display: grid; gap: 10px; align-content: start; }
.flow li + li { padding-left: 24px; border-left: 1px solid var(--line); }
.flow .when { font: 500 0.75rem/1.35 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); }
.flow .n { font: 800 2.75rem/1 var(--display); letter-spacing: -0.04em; }
.flow h3 { margin-top: 6px; }
.flow p { margin: 0; color: var(--ink-soft); }
.flow .when { color: var(--ink-soft); }
.lineup { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.lineup li { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 8px 32px; align-items: baseline; padding: clamp(18px, 2.4vw, 28px) 0; border-bottom: 1px solid var(--line); }
.lineup b { font: 800 clamp(1.75rem, 3.4vw + 0.5rem, 3.5rem)/1 var(--display); letter-spacing: -0.035em; text-wrap: balance; }
.lineup li:nth-child(2) b { color: var(--red); }
.lineup p { margin: 0; color: var(--ink-soft); max-width: 42ch; }
.groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 32px; }
.groups h3 { font-size: 1rem; color: var(--ink-soft); font-family: var(--sans); font-weight: 600; letter-spacing: 0; }
.groups ul { list-style: none; padding: 0; margin: 10px 0 0; }
.rowi { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 12px 0; min-height: 52px; border-bottom: 1px solid var(--line); text-decoration: none; }
.rowi .tt { font-size: 1.125rem; transition: color 150ms ease-out; }
.rowi .go { color: var(--ink-soft); transition: transform 250ms var(--ease); }
.rowi .end { display: inline-flex; align-items: center; gap: 12px; }
.rowi .num { font: 500 0.8125rem var(--mono); color: var(--ink-soft); }
@media (hover: hover) { a.rowi:hover .tt { color: var(--red); } a.rowi:hover .go { transform: translateX(3px); color: var(--ink); } }
.cta { background: var(--surface); border-radius: var(--r-lg); padding: clamp(28px, 5vw, 56px); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: end; }
.cta h2 { font-weight: 800; font-size: clamp(2rem, 3vw + 1rem, 3.5rem); line-height: 1; letter-spacing: -0.035em; }
.wave { display: grid; gap: 8px; max-width: 420px; }
.wave .bar { height: 6px; border-radius: 999px; background: var(--sunken); overflow: hidden; }
.wave .bar i { display: block; height: 100%; background: var(--red); border-radius: inherit; }
.wave p { margin: 0; }
.cta .stack { justify-items: start; gap: 16px; }
.cta .small { max-width: 34ch; }

/* ---------- переходы между страницами: фото «перелетает» из каталога в карточку ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 180ms; }
::view-transition-group(photo) { animation-duration: 420ms; animation-timing-function: var(--ease-out); }
::view-transition-group(*.card) { animation-duration: 320ms; animation-timing-function: var(--ease-out); }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

/* ---------- появление первого экрана: один авторский момент ---------- */
@media (prefers-reduced-motion: no-preference) {
  .rise { animation: rise 700ms var(--ease-out) both; }
  .rise.d1 { animation-delay: 80ms; } .rise.d2 { animation-delay: 160ms; } .rise.d3 { animation-delay: 240ms; }
  @keyframes rise { from { opacity: 0.001; transform: translateY(14px); filter: blur(4px); } }
}

/* ---------- адаптив ---------- */
@media (max-width: 1100px) { .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } .filters { grid-template-columns: repeat(4, minmax(0, 1fr)); } .filters .wide { grid-column: 1 / -1; } }
@media (max-width: 900px) {
  .hero, .person, .cta, .admin, .cabinet-grid, .locked, .qa, .lineup li { grid-template-columns: minmax(0, 1fr); }
  .person > .art { max-width: 520px; }
  .qa dt { padding-bottom: 4px; border-bottom: 0; } .qa dd { padding-top: 0; }
  .flow { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .flow li, .flow li + li { padding: 0; border-left: 0; }
  .groups { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 14px; }
  .panel, .aside { position: static; }
  .person > .art { position: relative; top: auto; }
  .filters { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .kv { grid-template-columns: minmax(0, 1fr); }
  .kv > div:nth-child(odd) { border-bottom: 0; padding-bottom: 0; }
  .cab-head { grid-template-columns: minmax(0, 1fr); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 16px; }
  .wall { height: 360px; }
}
@media (max-width: 640px) {
  .filters { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .filters .wide { grid-column: auto; }
  .js .more-toggle { display: inline-flex; padding: 0 16px; }
  .more { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .no-js .filters .wide { grid-column: 1 / -1; }
  .filters .kbd { display: none; }
  .filters .search input[type="search"] { padding-right: 14px; }
}
@media (max-width: 560px) { .f-row { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 430px) {
  .nav { gap: 0; }
  .nav a:not(.btn), .nav button { padding: 0 6px; }
  .nav .btn { margin-left: 4px; padding: 0 12px; }
  .logo { gap: 6px; }
  .logo .mark { width: 28px; height: 28px; margin-top: -2px; }
}
@media (max-width: 389px) {
  .nav a:not(.btn), .nav button { padding: 0 4px; }
  .nav .btn { margin-left: 2px; padding: 0 10px; }
  .logo { font-size: 0.9375rem; gap: 5px; }
  .logo .mark { width: 26px; height: 26px; }
}
@media (max-width: 480px) {
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts > div:first-child { grid-column: 1 / -1; border-bottom: 1px solid var(--line); }
  .facts > div:nth-child(2) { padding-left: 0; border-left: 0; }
  .card h3 { font-size: 1.0625rem; }
  .cards .tags { display: none; }
  .search input[type="search"] { padding-right: 16px; }
  .search .btn { display: none; }
  .drop { grid-template-columns: 88px minmax(0, 1fr); }
  .drop .art { width: 88px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; } }
@media (forced-colors: active) { .btn, .chip, .tag, .ok { border: 1px solid CanvasText; } }

/* ---------- приглашения и воронка (v5.14) ---------- */
.invited { color: var(--red); }
.invite { margin-top: 32px; background: var(--surface); border-radius: var(--r-lg); padding: clamp(20px, 3vw, 28px); display: grid; gap: 16px; }
.invite p { margin: 0; max-width: 62ch; }
.inv-link { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.inv-link input { flex: 1 1 260px; min-width: 0; font: 500 0.875rem var(--mono); background: var(--canvas); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 12px; color: var(--ink); }
.goal { margin-top: 24px; background: var(--surface); border-radius: var(--r-lg); padding: clamp(20px, 3vw, 28px); display: grid; gap: 12px; }
.goal-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.goal-top h2, .goal-n { margin: 0; }
.goal-n { font: 500 1rem var(--mono); color: var(--ink-soft); }
.goal-n b { font: 800 2rem/1 var(--display); color: var(--ink); letter-spacing: -0.03em; }
.meter, .funnel .bar { height: 10px; background: var(--sunken); border-radius: 999px; overflow: hidden; }
.meter span { display: block; height: 100%; background: var(--red); border-radius: inherit; }
.funnel .bar { height: 8px; }
.funnel .bar span { display: block; height: 100%; background: var(--ink); border-radius: inherit; min-width: 2px; }
.sec-a { margin-top: 40px; display: grid; gap: 12px; }
.sec-a > .table-wrap { margin-top: 0; }
.funnel { list-style: none; margin: 0; padding: clamp(20px, 3vw, 28px); background: var(--surface); border-radius: var(--r-lg); display: grid; gap: 18px; }
.funnel li { display: grid; gap: 6px; }
.funnel .f-row { display: flex; justify-content: space-between; gap: 12px; font-weight: 600; }
.funnel .f-row .num { font: 700 1.125rem var(--display); }
.funnel .meta { margin: 0; font-size: 0.8125rem; color: var(--ink-soft); }
.funnel li:last-child .bar span { background: var(--red); }

/* ---------- разделы каталога (v5.17) ---------- */
.groupbar { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; background: var(--sunken); padding: 4px; border-radius: var(--r-md); }
.groupbar::-webkit-scrollbar { display: none; }
.groupbar a { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border-radius: 8px; color: var(--ink-soft); text-decoration: none; font: 600 0.9375rem var(--display); }
.groupbar a:hover { color: var(--ink); }
.groupbar a[aria-current="page"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(38, 30, 18, 0.1); }
.groupbar .n { font: 500 0.75rem var(--mono); opacity: 0.7; }
.filterbar .groupbar + .chips { margin-top: 8px; }
/* на телефоне полоса не меняет высоту при прокрутке (иначе страница прыгает) и без размытия фона:
   на iPhone размытие под липким блоком перерисовывается на каждом кадре и дёргается */
@media (max-width: 640px) {
  .filterbar { padding-block: 8px; background: var(--canvas); box-shadow: 0 0 0 100vmax var(--canvas);
    -webkit-backdrop-filter: none; backdrop-filter: none; }
  .filterbar .groupbar a { min-height: 40px; padding: 0 12px; font-size: 0.875rem; }
}
.chip .n { font: 500 0.75rem var(--mono); opacity: 0.7; }
.catnav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.catnav details { background: var(--surface); border-radius: var(--r-lg); padding: 16px 18px; }
.catnav summary { list-style: none; display: flex; align-items: baseline; gap: 8px; cursor: pointer; min-height: 32px; }
.catnav summary::-webkit-details-marker { display: none; }
.catnav .gname { font: 700 1.125rem/1.2 var(--display); letter-spacing: -0.01em; }
.catnav summary .n { font: 500 0.75rem var(--mono); color: var(--ink-soft); }
.catnav summary .ic { margin-left: auto; transition: transform 200ms var(--ease); }
.catnav details[open] summary .ic { transform: rotate(90deg); }
.catnav ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 2px; }
.catnav li a { display: flex; justify-content: space-between; gap: 8px; padding: 6px 0; color: var(--ink); text-decoration: none; font-size: 0.875rem; line-height: 1.35; border-bottom: 1px solid var(--line); }
.catnav li:last-child a { border-bottom: 0; }
.catnav li a:hover span:first-child { text-decoration: underline; }
.catnav li a .n { font: 500 0.75rem var(--mono); color: var(--ink-soft); }
.catnav li a.all { font-weight: 600; }
@media (min-width: 641px) { .catnav summary { cursor: default; pointer-events: none; } .catnav summary .ic { display: none; } }
@media (max-width: 1000px) { .catnav { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .catnav { grid-template-columns: 1fr; gap: 8px; } .catnav details { padding: 12px 16px; } }

/* ---------- доска запросов и кабинет заказчика (v5.17) ---------- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.kpis > div { background: var(--surface); border-radius: var(--r-md); padding: 14px 16px; display: grid; gap: 2px; }
.kpis b { font: 800 1.75rem/1.1 var(--display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.kpis span { color: var(--ink-soft); font-size: 0.8125rem; line-height: 1.35; }
.board-filters { display: flex; flex-wrap: wrap; align-items: end; gap: 12px 16px; margin: 16px 0 8px; }
.board-filters .f { margin: 0; min-width: 220px; }
.board-filters .check { min-height: 44px; display: inline-flex; align-items: center; }
.reqs { display: grid; gap: 12px; margin-top: 16px; }
.reqs.compact { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.req { position: relative; background: var(--surface); border-radius: var(--r-lg); padding: 18px 20px; display: grid; gap: 8px; transition: box-shadow 200ms var(--ease); }
@media (hover: hover) { .req:hover { box-shadow: var(--shadow-pop); } }
.req.unpaid { background: color-mix(in srgb, var(--surface) 70%, var(--canvas)); }
.req-meta { margin: 0; display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; font-size: 0.8125rem; color: var(--ink-soft); }
.req-meta .tag, .tag { display: inline-flex; align-items: center; min-height: 24px; padding: 0 10px; border-radius: 999px; background: var(--sunken); color: var(--ink); font: 600 0.75rem var(--sans); }
.tag.red { background: var(--red-tint); color: var(--red); }
.req-title { margin: 0; font: 700 1.1875rem/1.25 var(--display); letter-spacing: -0.01em; }
.req-title a { color: inherit; text-decoration: none; }
.req-title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.req-title a:focus-visible { outline: none; }
.req:has(.req-title a:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
.req-text { margin: 0; color: var(--ink-soft); font-size: 0.9375rem; }
.req-foot { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; font-size: 0.875rem; }
.req-foot .who { margin-left: auto; color: var(--ink-soft); }
.budget { font-weight: 700; font-variant-numeric: tabular-nums; }
.budget.free { color: var(--ink-soft); font-weight: 600; padding: 1px 8px; border: 1px dashed var(--field); border-radius: 999px; }
.reqs.compact .req-foot .who { margin-left: 0; width: 100%; }
.req-page { background: var(--surface); border-radius: var(--r-lg); padding: clamp(20px, 4vw, 36px); display: grid; gap: 16px; margin-top: 12px; }
.req-page h1 { margin: 0; font-size: clamp(1.75rem, 3vw + 0.5rem, 2.5rem); line-height: 1.1; }
.req-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px 24px; margin: 0; padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.req-facts dt { font: 500 0.75rem var(--mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); }
.req-facts dd { margin: 4px 0 0; font-weight: 600; }
.req-facts .sub { display: block; font-weight: 400; color: var(--ink-soft); font-size: 0.8125rem; }
.req-details p { margin: 0 0 10px; }
.contact-box { background: var(--canvas); border-radius: var(--r-md); padding: 18px 20px; display: grid; gap: 10px; }
.contact-box h2, .contact-box p { margin: 0; }
.gate { display: grid; gap: 10px; margin: 20px 0; }
.gate-opt { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; align-items: center; background: var(--surface); border-radius: var(--r-lg); padding: 18px 20px; color: var(--ink); text-decoration: none; border: 1px solid var(--line); }
.gate-opt b { font: 700 1.0625rem var(--display); }
.gate-opt span { grid-column: 1; color: var(--ink-soft); font-size: 0.9375rem; }
.gate-opt .ic { grid-row: 1 / span 2; grid-column: 2; }
@media (hover: hover) { .gate-opt:hover { border-color: var(--ink); } }
.f.two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.f.two > div { display: grid; gap: 6px; align-content: start; }
@media (max-width: 560px) { .f.two { grid-template-columns: 1fr; } }
.help-opt { background: var(--canvas); border-radius: var(--r-md); padding: 14px 16px; border: 1px solid var(--line); }
.myreqs { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.myreq { border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px 16px; display: grid; gap: 6px; }
.myreq p { margin: 0; }
.mr-head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: baseline; }
.myreq .state { font: 600 0.75rem var(--mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); }
.myreq.state-published .state { color: var(--ink); }
.myreq.state-published .state::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--red); margin-right: 6px; vertical-align: 1px; }
.myreq.state-rejected .state { color: var(--red); }
.mr-title { font-weight: 700; }
.close-req summary { cursor: pointer; color: var(--ink-soft); font-size: 0.875rem; font-weight: 600; min-height: 36px; display: inline-flex; align-items: center; gap: 6px; list-style: none; }
.close-req summary::-webkit-details-marker { display: none; }
.close-req[open] summary .ic { transform: rotate(90deg); }
.close-req .row { margin-top: 6px; }
.client-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 16px; margin-top: 16px; }
.client-grid > .status { margin-top: 0; }
.help-box { align-content: start; }
@media (max-width: 860px) { .client-grid { grid-template-columns: 1fr; } }
.board-teaser { margin-top: 32px; }
.status + .status { margin-top: 16px; }
.board-promo { background: var(--ink); color: var(--on-ink); border-radius: var(--r-lg); padding: clamp(20px, 4vw, 36px); display: flex; flex-wrap: wrap; gap: 20px 32px; align-items: end; justify-content: space-between; }
.board-promo h2 { margin: 0; color: var(--on-ink); }
.board-promo p { margin: 0; max-width: 60ch; color: color-mix(in srgb, var(--on-ink) 80%, transparent); }
.board-promo .meta { color: var(--red-on-ink); }
.board-promo .btn { background: var(--on-ink); color: var(--ink); }
.board-promo .btn.alt { background: transparent; color: var(--on-ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--on-ink) 40%, transparent); }
.board-promo .btn .n { font: 500 0.75rem var(--mono); margin-left: 6px; opacity: 0.7; }
.board-promo + .reqs { margin-top: 12px; }
.board-head .row { margin-top: 4px; }
.board-how .flow + .small { margin-top: 28px; }
.groupbar + .board-filters { margin-top: 16px; }

/* ---------- роли: подрядчик и заказчик (v5.17) ---------- */
@media (max-width: 760px) { .nav .wide-only { display: none !important; } }
.roleswitch { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; background: var(--sunken); padding: 4px; border-radius: var(--r-md); margin-bottom: 20px; }
.roleswitch a { display: grid; gap: 2px; padding: 10px 14px; border-radius: 8px; color: var(--ink-soft); text-decoration: none; }
.roleswitch a b { font: 700 0.9375rem var(--display); color: inherit; }
.roleswitch a span { font-size: 0.75rem; line-height: 1.3; }
.roleswitch a[aria-current="page"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(38, 30, 18, 0.1); }
.roleswitch a[aria-current="page"] span { color: var(--ink-soft); }
.role-tag { display: inline-flex; align-items: center; gap: 6px; font: 600 0.75rem var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); margin: 0; }
.role-tag::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ink); }
.role-tag.client::before { background: var(--red); }

.roles2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 4px 0 20px; }
.role-card { position: relative; display: grid; gap: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px 48px 18px 20px; color: var(--ink); text-decoration: none; transition: border-color 150ms var(--ease); }
.role-card b { font: 700 1.125rem/1.2 var(--display); letter-spacing: -0.01em; }
.role-card > span { color: var(--ink-soft); font-size: 0.9375rem; }
.role-card .ic { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); }
@media (hover: hover) { .role-card:hover { border-color: var(--ink); } }
@media (max-width: 640px) { .roles2 { grid-template-columns: 1fr; } }
/* блок доски на странице набора: светлый, с живой лентой запросов */
.board-live { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(20px, 4vw, 48px); align-items: center; background: var(--surface); border-radius: var(--r-lg); padding: clamp(20px, 4vw, 40px); border: 1px solid var(--line); }
.bl-text { display: grid; gap: 14px; }
.bl-text h2 { margin: 0; }
.bl-text > p { margin: 0; color: var(--ink-soft); max-width: 52ch; }
.live-dot { margin: 0; display: inline-flex; align-items: center; gap: 8px; font: 600 0.75rem var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--red); }
.live-dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 0 rgba(189, 0, 0, 0.45); animation: livepulse 2s var(--ease) infinite; }
@keyframes livepulse { 0% { box-shadow: 0 0 0 0 rgba(189, 0, 0, 0.45); } 70% { box-shadow: 0 0 0 8px rgba(189, 0, 0, 0); } 100% { box-shadow: 0 0 0 0 rgba(189, 0, 0, 0); } }
@media (prefers-reduced-motion: reduce) { .live-dot::before { animation: none; } }
.bl-roles { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.bl-roles li { display: grid; grid-template-columns: 132px 1fr; gap: 12px; align-items: baseline; font-size: 0.9375rem; }
@media (max-width: 480px) { .bl-roles li { grid-template-columns: 1fr; gap: 2px; } }
.bl-feed { display: grid; gap: 8px; }
.bl-item { display: grid; gap: 4px; background: var(--canvas); border-radius: var(--r-md); padding: 14px 16px; color: var(--ink); text-decoration: none; border: 1px solid transparent; transition: border-color 150ms var(--ease), transform 200ms var(--ease); }
.bl-item:nth-child(2) { margin-left: 16px; }
.bl-item:nth-child(3) { margin-left: 32px; }
.bl-item b { font: 700 1rem/1.25 var(--display); }
.bl-cat { font: 500 0.75rem var(--mono); color: var(--ink-soft); }
.bl-item .budget { font-size: 0.875rem; justify-self: start; }
.bl-item.sample { opacity: 0.55; }
@media (hover: hover) { a.bl-item:hover { border-color: var(--ink); transform: translateX(-2px); } }
@media (max-width: 860px) { .board-live { grid-template-columns: 1fr; } .bl-item:nth-child(n) { margin-left: 0; } }
/* узкий экран без JS: меню не шире экрана, лишнее прокручивается внутри шапки, а не двигает страницу */
@media (max-width: 560px) {
  html:not(.js) .top .nav { min-width: 0; overflow-x: auto; scrollbar-width: none; }
  html:not(.js) .top .nav::-webkit-scrollbar { display: none; }
  html:not(.js) .top .nav > * { flex: none; }
}
/* телефон: пункты меню — под бургером справа от логотипа; раскрываются панелью под шапкой. На десктопе — как было */
.menu-btn { display: none; }
@media (max-width: 640px) {
  .js .menu-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-right: -10px;
    background: none; border: 0; color: var(--ink); border-radius: var(--r-sm); cursor: pointer; }
  .js .menu-btn .ic { width: 24px; height: 24px; }
  .js .menu-btn .on-open, .js .top.open .menu-btn .on-closed { display: none; }
  .js .top.open .menu-btn .on-open { display: block; }
  .js .top .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0;
    padding: 4px 16px 16px; background: var(--canvas); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-pop);
    max-height: calc(100dvh - var(--header-h) - var(--safe-top)); overflow-y: auto; }
  .js .top.open .nav { display: flex; }
  .js .top .nav > a:not(.btn), .js .top .nav form button { width: 100%; justify-content: flex-start; min-height: 52px; padding: 0 4px;
    font-size: 1rem; color: var(--ink); border-bottom: 1px solid var(--line); border-radius: 0; }
  .js .top .nav form { display: block; }
  .js .top .nav > a[aria-current="page"]:not(.btn) { text-decoration: none; box-shadow: inset 3px 0 0 var(--red); padding-left: 14px; }
  .js .top .nav .btn { margin: 14px 0 0; justify-content: center; min-height: 48px; }
  .js .top .nav .l { display: inline; } .js .top .nav .s { display: none; }
  .js .top .nav .wide-only { display: flex !important; }
}

/* ---------- анкета по шагам (v5.18) ---------- */
.wizard { margin-top: 24px; max-width: 760px; display: grid; gap: 20px; }
.wz-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px; }
.wz-label { margin: 0; font: 700 1.25rem/1.2 var(--display); letter-spacing: -0.01em; }
.wz-saved { margin: 0; color: var(--ink-soft); }
.wz-seg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.wz-seg .seg { display: grid; gap: 8px; padding: 0 0 4px; background: none; border: 0; text-align: left; cursor: pointer; color: var(--ink-soft); font: 600 0.8125rem/1.25 var(--sans); min-height: 44px; align-content: start; }
.wz-seg .bar { display: block; height: 6px; border-radius: 999px; background: var(--sunken); transition: background-color 200ms var(--ease); }
.wz-seg .seg.done .bar { background: var(--ink); }
.wz-seg .seg.now .bar { background: var(--red); }
.wz-seg .seg.now { color: var(--ink); }
.wz-seg .seg:hover .seg-t { color: var(--ink); }
.wz-seg .seg:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
@media (max-width: 560px) { .wz-seg .seg-t { font-size: 0.6875rem; } }
.wz-body { background: var(--surface); border-radius: var(--r-lg); padding: clamp(18px, 4vw, 32px); display: grid; gap: 18px; }
.wz-body > .f, .wz-body .f { margin: 0; }
.wz-intro { margin: 0; color: var(--ink-soft); font-size: 0.9375rem; }
.wz-intro b { color: var(--ink); }
.wz-nav { display: flex; justify-content: space-between; gap: 12px; position: sticky; bottom: 0; padding: 12px 0 calc(12px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(to top, var(--canvas) 70%, transparent); z-index: 5; }
.wz-nav .btn:last-child { flex: 1 1 auto; max-width: 360px; justify-content: center; margin-left: auto; }
@media (max-width: 560px) { .wz-nav .btn:last-child { max-width: none; } }
.linklike { background: none; border: 0; padding: 0; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; text-align: left; }
.more-dirs summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; font-weight: 600; font-size: 0.9375rem; }
.more-dirs summary::-webkit-details-marker { display: none; }
.more-dirs[open] summary .ic { transform: rotate(90deg); }
.more-dirs .f { margin-top: 8px; }
.checks.row3 { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.photo-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.photo-row .drop { flex: 1 1 280px; }
.wz-final { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 24px; align-items: start; }
.wz-fields { display: grid; gap: 18px; }
@media (max-width: 720px) { .wz-final { grid-template-columns: 1fr; } .wz-preview { max-width: 280px; } }
.todo { background: var(--canvas); border-radius: var(--r-md); padding: 12px 14px; }
.todo ul { margin: 6px 0 0; padding-left: 18px; font-size: 0.875rem; }
.todo li + li { margin-top: 4px; }

/* заглушка без фото: инициалы */
.art.ini { display: grid; place-items: center; background: var(--sunken); }
.art.ini .ini-l { font: 800 clamp(2rem, 9vw, 3.25rem)/1 var(--display); letter-spacing: -0.04em; color: var(--ink); }
.art.ini .ini-id { position: absolute; left: 10px; bottom: 10px; font: 500 0.625rem/1 var(--mono); letter-spacing: 0.06em; color: var(--ink-soft); }
.art.ini::before { content: ""; position: absolute; top: 12px; right: 12px; width: 8px; height: 8px; border-radius: 50%; background: var(--red); }
.art.ini.tone-1 { background: var(--ink); }
.art.ini.tone-1 .ini-l { color: var(--on-ink); }
.art.ini.tone-1 .ini-id { color: rgba(255, 255, 255, 0.6); }
.art.ini.tone-2 { background: var(--red-tint); }
.art.ini.tone-2 .ini-l { color: var(--red); }
.art.ini.tone-3 { background: var(--surface); }
.drop .art.ini .ini-l { font-size: 2rem; }
.drop .art.ini .ini-id { display: none; }

/* работы-файлы */
.wfiles { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.wfile { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: start; background: var(--canvas); border-radius: var(--r-md); padding: 12px; }
.wfiles.public .wfile { grid-template-columns: 40px minmax(0, 1fr); background: var(--surface); border: 1px solid var(--line); }
/* у модератора в строке только текст и плеер — одна колонка, иначе текст попадает в узкую колонку значка */
.wfiles.plain-files .wfile { grid-template-columns: minmax(0, 1fr); }
.wfile .badge, .wupload .badge { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--surface); }
.wf-body { display: grid; gap: 6px; min-width: 0; }
.wf-title { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.wf-body audio { width: 100%; height: 40px; }
.wf-body video, .wf-body img { width: 100%; max-height: 320px; border-radius: 8px; background: #000; object-fit: contain; }
.wf-body img { background: var(--sunken); }
.wf-body .small { margin: 0; }
.wupload { display: grid; gap: 10px; }
.drop.slim { grid-template-columns: 40px minmax(0, 1fr); }
/* работы: каждая — строка «ссылка или файл + название + удалить» */
.wrows { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
/* колонки выровнены по верху: подписи «Ссылка» и «Название» на одной линии, поля — тоже;
   «или загрузить файл» под ссылкой не сдвигает название вниз */
.wrow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px; gap: 12px; align-items: start;
  background: var(--canvas); border-radius: var(--r-md); padding: 12px; }
.wrow .f { margin: 0; min-width: 0; }
.wrow .wr-del { align-self: start; margin-top: 30px; }  /* вровень с полями: под высотой подписи */
.wr-media { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; min-width: 0; }
.wr-media .badge { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--surface); }
.wrow input[type=url], .wrow input[type=text] { background: var(--surface); }
.wr-file { display: inline-flex; position: relative; margin-top: 6px; }
.wr-file .link { min-height: 32px; font-weight: 500; font-size: 0.875rem; }
.wr-file input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.wr-file:focus-within .link { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 4px; }
.wrow.has-file input[data-wrow-url] { display: none; }
.wrow [data-work-status]:empty { display: none; }
.wrow [data-work-status] { margin: 6px 0 0; }
.wr-add { justify-self: start; }
.wr-save { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; }
.saved-ok { display: inline-flex; gap: 6px; align-items: center; margin: 0; color: var(--ok); font-weight: 600; font-size: 0.9375rem; }
.saved-ok .ic { width: 1.15em; height: 1.15em; }
@media (max-width: 640px) {
  .wrow, .wrow.is-file { grid-template-columns: minmax(0, 1fr) 44px; align-items: start; }
  .wrow > .f, .wr-media { grid-column: 1; }
  .wrow .wr-del { grid-column: 2; grid-row: 1; align-self: start; margin-top: 0; }
}
.tag.soon { background: transparent; border: 1px dashed var(--field); color: var(--ink-soft); }
.soon-note { margin: 0; color: var(--ink-soft); font-size: 0.9375rem; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* кабинет после отправки */
.reminder { display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; }
.reminder .ic { flex: none; margin-top: 3px; color: var(--red); }
.reminder span { display: block; }
.overview { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 16px; margin-top: 16px; align-items: start; }
.ov-main { display: grid; gap: 16px; }
.ov-main > .status { margin-top: 0; }
.ov-side { display: grid; gap: 12px; position: sticky; top: calc(var(--header-h) + 16px); }
.strong-box { border: 1px solid var(--line); }
@media (max-width: 860px) { .overview { grid-template-columns: 1fr; } .ov-side { position: static; max-width: 320px; } }

/* в анкете на телефоне шапка кабинета компактнее: шаг виден сразу */
@media (max-width: 640px) {
  .is-wizard .cab-head .idcard { display: none; }
  .is-wizard .cab-head { margin-bottom: 0; }
  .wizard { margin-top: 12px; gap: 14px; }
}

/* готовые замечания модератора: подходящие к анкете — с красной точкой, добавленные — залиты */
.snippets { margin: 0; }
.snippets .chips { gap: 6px; }
.snippets .chip { min-height: 36px; padding: 0 12px; font-size: 0.8125rem; gap: 6px; }
.snippets .chip.fits { background: var(--surface); box-shadow: inset 0 0 0 1px var(--field); }
.snippets .chip .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--red); flex: none; }
.snippets .chip[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); box-shadow: none; }

/* кабинет: картинка для сторис и счётчики карточки */
.share-card { margin-top: 32px; background: var(--surface); border-radius: var(--r-lg); padding: clamp(20px, 3vw, 28px);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; }
.share-card .stats { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; font-size: 0.9375rem; }
.share-card .stats .num { font: 700 1.25rem/1 var(--display); font-variant-numeric: tabular-nums; }
.story-thumb { width: 216px; height: auto; border-radius: var(--r-md); box-shadow: 0 0 0 1px var(--line); background: var(--canvas); }
@media (max-width: 640px) {
  .share-card { grid-template-columns: minmax(0, 1fr); }
  .story-thumb { width: 160px; }
}

/* модерация: правка почты прямо в анкете */
.inline-edit { margin-top: 6px; }
.inline-edit summary { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; cursor: pointer; font-size: 0.875rem; font-weight: 600; color: var(--ink); list-style: none; }
.inline-edit summary::-webkit-details-marker { display: none; }
.inline-edit summary .ic { transition: transform 150ms var(--ease); }
.inline-edit[open] summary .ic { transform: rotate(90deg); }
.inline-edit form { gap: 8px; margin: 6px 0; flex-wrap: wrap; }
.inline-edit input[type=email] { flex: 1 1 220px; min-width: 0; }
.inline-edit .small { margin: 0; }

/* плашка «набор идёт» (главная и /join): светлая, под шапкой, над первым экраном */
.recruit { margin-top: 16px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 24px;
  padding: 12px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); font-size: 0.9375rem; line-height: 1.4; }
.recruit p { margin: 0; }
.rc-main { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; color: var(--ink); }
.rc-item { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.rc-sep { color: var(--ink-soft); }
.rc-open { color: var(--red); font-weight: 600; }
.rc-dot { position: relative; flex: none; width: 10px; height: 10px; margin: 0 2px; border-radius: 50%; background: var(--red); }
/* мягкая пульсация, как индикатор записи: от точки расходится и тает кольцо */
.rc-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--red); animation: rc-pulse 2.2s ease-out infinite; }
@keyframes rc-pulse { 0% { transform: scale(1); opacity: 0.45; } 70%, 100% { transform: scale(2.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .rc-dot::after { animation: none; opacity: 0; } }
.recruit-wrap + .hero { padding-top: clamp(20px, 4vw, 52px); }
/* телефон: «Набор идёт с …» — первой строкой, «N-й день · M анкет» — второй (без точки в начале строки), отсчёт — третьей */
@media (max-width: 640px) {
  .recruit { padding: 12px 14px; font-size: 0.875rem; }
  .rc-main > .rc-item:first-child { flex-basis: 100%; }
  .rc-main > .rc-item:nth-child(2) { margin-left: 22px; }
  .rc-main > .rc-item:nth-child(2) .rc-sep { display: none; }
  .rc-open { flex-basis: 100%; padding-left: 22px; }
}

/* быстрая смена фото в кабинете и у модератора (v5.28) */
.photo-quick { display: grid; gap: 8px; margin-top: 12px; }
.drop.slim { grid-template-columns: 40px minmax(0, 1fr); }
.drop-ic { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--sunken); }
.drop-ic .ic { width: 20px; height: 20px; }
.photo-quick .row { display: flex; flex-wrap: wrap; gap: 8px; }
.js .photo-quick [data-photo-send] { display: none; }
.photo-quick.busy { opacity: 0.6; pointer-events: none; }
.admin-photo { display: grid; gap: 4px; max-width: 360px; }