/* self3d (стиль 67invest) — в духе alltokens.ru: Geist, светло-зелёный акцент и подсветка, тонкие рамки. Две темы: тёмная (по умолчанию) и светлая.
   Все цвета — только через переменные ниже. Тема задаётся атрибутом <html data-theme>. */
:root {
  --bg: #000;
  --bg-1: #0a0a0a;
  --bg-2: #111;
  --bg-3: #1a1a1a;
  --line: rgba(255, 255, 255, .1);
  --line-2: rgba(255, 255, 255, .16);
  --text: #ededed;
  --text-2: #a1a1a1;
  --text-3: #6f6f6f;
  --text-strong: #fff;
  --prose: #cfcfcf;
  --fill-1: rgba(255, 255, 255, .03);
  --fill-2: rgba(255, 255, 255, .06);
  --fill-3: rgba(255, 255, 255, .08);
  --header-bg: rgba(0, 0, 0, .72);
  --search-bg: rgba(10, 10, 10, .8);
  --inverse: #fff;
  --on-inverse: #000;
  --inverse-hover: #d9d9d9;
  --heading-grad: linear-gradient(180deg, #fff 30%, #8f8f8f 100%);
  --code-grad: linear-gradient(180deg, #fff, #333);
  --logo-bg: linear-gradient(135deg, #fff 0%, #a7f3c0 100%);
  --logo-fg: #000;
  --pill-bg: rgba(0, 0, 0, .6);
  --shadow: 0 0.5rem 1.875rem rgba(0, 0, 0, .5);
  /* подсветка (за курсором, фоновые пятна) — светло-зелёная */
  --glow-1: rgba(134, 239, 172, .26);
  --glow-2: rgba(52, 211, 153, .12);
  --spot: rgba(134, 239, 172, .24);
  --glow-cta: rgba(134, 239, 172, .22);
  --glow-card-1: rgba(134, 239, 172, .14);
  --glow-card-2: rgba(52, 211, 153, .10);
  /* акцент — светло-зелёный; текст на нём тёмный (--on-accent), белый на светло-зелёном не читается */
  --accent: #4ade80;
  --accent-hover: #86efac;
  --accent-2: #86efac;
  --accent-soft: rgba(74, 222, 128, .14);
  --accent-line: rgba(74, 222, 128, .45);
  --on-accent: #052e16;
  --link: #86efac;
  --business: #86efac;
  --green: #3ecf8e;
  --green-soft: rgba(62, 207, 142, .12);
  --on-green: #000;
  --amber: #f5a524;
  --amber-soft: rgba(245, 165, 36, .12);
  --red: #f0526b;
  --red-soft: rgba(240, 82, 107, .12);
  --red-line: rgba(240, 82, 107, .35);
  --red-hover: #ff8a9b;
  --violet: #a78bfa;
  --violet-soft: rgba(167, 139, 250, .12);
  --notice-warn: #ffcf7a;
  --notice-error: #ff9aaa;
  --notice-info: #bbf7d0;
  --radius: 0.375rem;
  --radius-lg: 0.75rem;
  --wrap: 75rem;
  --font: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  color-scheme: dark;
}

:root[data-theme="light"] {
  --bg: #fff;
  --bg-1: #fafafa;
  --bg-2: #f2f2f2;
  --bg-3: #e8e8e8;
  --line: rgba(0, 0, 0, .09);
  --line-2: rgba(0, 0, 0, .17);
  --text: #171717;
  --text-2: #5f5f5f;
  --text-3: #8f8f8f;
  --text-strong: #000;
  --prose: #2e2e2e;
  --fill-1: rgba(0, 0, 0, .025);
  --fill-2: rgba(0, 0, 0, .05);
  --fill-3: rgba(0, 0, 0, .07);
  --header-bg: rgba(255, 255, 255, .8);
  --search-bg: rgba(255, 255, 255, .9);
  --inverse: #0a0a0a;
  --on-inverse: #fff;
  --inverse-hover: #333;
  --heading-grad: linear-gradient(180deg, #000 30%, #6b6b6b 100%);
  --code-grad: linear-gradient(180deg, #000, #bbb);
  --logo-bg: linear-gradient(135deg, #0a0a0a 0%, #15803d 100%);
  --logo-fg: #fff;
  --pill-bg: rgba(255, 255, 255, .88);
  --shadow: 0 0.5rem 1.875rem rgba(0, 0, 0, .1);
  --glow-1: rgba(34, 197, 94, .16);
  --spot: rgba(34, 197, 94, .13);
  --glow-2: rgba(16, 185, 129, .12);
  --glow-cta: rgba(34, 197, 94, .16);
  --glow-card-1: rgba(34, 197, 94, .12);
  --glow-card-2: rgba(16, 185, 129, .09);
  --accent-hover: #22c55e;
  --accent-2: #15803d;
  --accent-soft: rgba(34, 197, 94, .12);
  --accent-line: rgba(22, 163, 74, .4);
  --link: #15803d;
  --business: #15803d;
  --green: #0e9f61;
  --green-soft: rgba(14, 159, 97, .1);
  --on-green: #fff;
  --amber: #a35c00;
  --amber-soft: rgba(245, 165, 36, .16);
  --red: #d42a48;
  --red-soft: rgba(212, 42, 72, .08);
  --red-line: rgba(212, 42, 72, .3);
  --red-hover: #b0203b;
  --violet: #6d47d9;
  --violet-soft: rgba(109, 71, 217, .1);
  --notice-warn: #7a4700;
  --notice-error: #a51d36;
  --notice-info: #14532d;
  color-scheme: light;
}

/* Шрифты — с нашего сервера: без передачи IP посетителей Google (OFL, см. fonts/OFL.txt) */
@font-face { font-family: "Geist"; src: url("fonts/Geist-Variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("fonts/GeistMono-Variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

*, *::before, *::after { box-sizing: border-box; }
/* Все размеры — в rem. До 1600px база 16px (как у браузера), дальше плавно растёт
   до 24px к ~3400px: на больших мониторах страница пропорционально крупнее, а не
   узкая колонка посередине. clamp в rem учитывает размер шрифта из настроек браузера. */
html { -webkit-text-size-adjust: 100%; font-size: clamp(1rem, 0.4444vw + 0.5556rem, 1.5rem); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 0.9375rem/1.55 var(--font);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--text-strong); }
img { max-width: 100%; display: block; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -.02em; line-height: 1.15; }
p { margin: 0; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 1.5rem; }
.muted { color: var(--text-2); }
.dim { color: var(--text-3); }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- Header ---------- */
.header {
  position: sticky; top: 0; z-index: 50;
  background: var(--header-bg);
  backdrop-filter: saturate(180%) blur(0.75rem);
  -webkit-backdrop-filter: saturate(180%) blur(0.75rem);
  border-bottom: 1px solid var(--line);
}
.header .wrap { display: flex; align-items: center; gap: 1.75rem; height: 4rem; }
.logo { display: flex; align-items: center; gap: 0.25rem; font-weight: 600; font-size: 1.0625rem; letter-spacing: -.02em; }
.logo-mark {
  width: 1.875rem; height: 1.875rem; border-radius: 0.4375rem;
  display: grid; place-items: center;
  background: var(--logo-bg);
  color: var(--logo-fg); font: 700 0.8125rem/1 var(--font); letter-spacing: -.04em;
}
.logo b { font-weight: 600; }
.nav { display: flex; gap: 0.25rem; }
.nav a { padding: 0.375rem 0.625rem; border-radius: var(--radius); color: var(--text-2); font-size: 0.875rem; font-weight: 500; }
.nav a:hover, .nav a.active { color: var(--text-strong); background: var(--fill-2); }
.header-right { margin-left: auto; display: flex; align-items: center; gap: 0.5rem; }
.icon-link { position: relative; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: var(--radius); color: var(--text-2); }
.icon-link:hover { color: var(--text-strong); background: var(--fill-2); }
.badge-dot { position: absolute; top: 0.25rem; right: 0.25rem; min-width: 1rem; height: 1rem; padding: 0 0.25rem; border-radius: 0.5rem; background: var(--accent); color: var(--on-accent); font-size: 0.625rem; font-weight: 600; display: grid; place-items: center; }
.burger { display: none; }

/* Звук: без JS кнопка не нужна; иконка — по data-sound на <html> */
.sound-toggle { display: none; border: 0; background: none; cursor: pointer; }
.js .sound-toggle { display: grid; }
.sound-toggle > span { display: grid; place-items: center; }
[data-sound="on"] .sound-off, [data-sound="off"] .sound-on { display: none; }

/* Меню темы: <details> работает и без JS */
.theme-menu { position: relative; }
.theme-menu summary { list-style: none; cursor: pointer; }
.theme-current { display: grid; place-items: center; }
.header-right svg { display: block; }
/* Font Awesome: у переключателей две иконки — контурная (выкл) и залитая (вкл) */
.ico-on { display: none; }
.on > .ico-on { display: inline-block; }
.on > .ico-off { display: none; }
.theme-menu summary::-webkit-details-marker { display: none; }
.theme-options { position: absolute; right: 0; top: calc(100% + 0.5rem); z-index: 70; min-width: 12.25rem; padding: 0.25rem; border: 1px solid var(--line-2); border-radius: 0.625rem; background: var(--bg-1); box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 0.125rem; }
.theme-options button { display: flex; align-items: center; gap: 0.625rem; width: 100%; padding: 0.5rem 0.625rem; border: 0; border-radius: var(--radius); background: none; color: var(--text-2); font: 500 0.875rem var(--font); cursor: pointer; text-align: left; }
.theme-options button:hover { background: var(--fill-2); color: var(--text-strong); }
.theme-options button[aria-checked="true"] { color: var(--text-strong); }
.theme-options .tick { margin-left: auto; opacity: 0; color: var(--accent); }
.theme-options button[aria-checked="true"] .tick { opacity: 1; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  height: 2.25rem; padding: 0 0.875rem; border-radius: var(--radius);
  font: 500 0.875rem/1 var(--font); white-space: nowrap; cursor: pointer;
  border: 1px solid transparent; background: none; color: var(--text);
  transition: background .15s, border-color .15s, color .15s;
}
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-hover); color: var(--on-accent); }
.btn-white { background: var(--inverse); color: var(--on-inverse); }
.btn-white:hover { background: var(--inverse-hover); color: var(--on-inverse); }
.btn-ghost { border-color: var(--line); background: var(--fill-1); }
.btn-ghost:hover { border-color: var(--line-2); background: var(--fill-3); }
.btn-danger { border-color: var(--red-line); color: var(--red); background: var(--red-soft); }
.btn-danger:hover { background: var(--red-soft); border-color: var(--red); color: var(--red-hover); }
.btn-success { background: var(--green); color: var(--on-green); }
.btn-success:hover { filter: brightness(1.08); color: var(--on-green); }
.btn-lg { height: 2.75rem; padding: 0 1.25rem; font-size: 0.9375rem; }
.btn-sm { height: 1.875rem; padding: 0 0.625rem; font-size: 0.8125rem; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.inline-form { display: inline; margin: 0; }

/* ---------- Hero ---------- */
.hero { position: relative; padding: 6rem 0 4.5rem; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: -40% -10% auto -10%; height: 40rem; pointer-events: none;
  background:
    radial-gradient(37.5rem 18.75rem at calc(50% - 28rem) 30%, var(--glow-1), transparent 70%),
    radial-gradient(31.25rem 17.5rem at calc(50% + 30rem) 10%, var(--glow-2), transparent 70%);
}
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 4rem 4rem;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 30%, transparent 75%);
}
.hero .wrap { position: relative; z-index: 1; }
/* Подсветка за курсором у блоков с data-spot: координаты --mx/--my ставит app.js (только мышь, без reduced-motion) */
.spot {
  position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .6s ease;
  background: radial-gradient(30rem circle at var(--mx, 50%) var(--my, 30%), var(--spot), transparent 65%);
}
.spot-on > .spot { opacity: 1; }
.eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0.75rem 0.25rem 0.25rem; border: 1px solid var(--line); border-radius: 62.4375rem; font-size: 0.8125rem; color: var(--text-2); background: var(--fill-1); }
.eyebrow b { background: var(--accent-soft); color: var(--accent-2); padding: 0.125rem 0.5rem; border-radius: 62.4375rem; font-weight: 500; }
.hero h1 {
  margin: 1.5rem 0 1.25rem; font-size: clamp(2.5rem, 6.4vw, 4.5rem); font-weight: 700; letter-spacing: -.045em; line-height: 1.02;
  background: var(--heading-grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  max-width: 64rem;
}
.hero-lead { font-size: 1.125rem; color: var(--text-2); max-width: 37.5rem; line-height: 1.6; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }

.hero-search {
  margin-top: 2.5rem; display: grid; grid-template-columns: 1fr 12.5rem 12.5rem auto; gap: 0.5rem;
  padding: 0.5rem; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--search-bg); max-width: 56.25rem;
}
.hero-search .input, .hero-search .select { border-color: transparent; background: var(--bg-2); height: 2.75rem; }

.stats { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stat { padding: 1.75rem 1.5rem; border-right: 1px solid var(--line); display: block; transition: background .15s; }
.stat:last-child { border-right: 0; }
.stat:hover { background: var(--fill-1); }
.stat-value { font-size: 2rem; font-weight: 600; letter-spacing: -.03em; }
.stats .stat-value { color: var(--link); }
.stat-label { margin-top: 0.25rem; color: var(--text-2); font-size: 0.875rem; display: flex; align-items: center; justify-content: space-between; }
.stat-label i { font-style: normal; color: var(--text-3); transition: transform .15s, color .15s; }
.stat:hover .stat-label i { transform: translateX(0.1875rem); color: var(--text-strong); }

/* ---------- Sections ---------- */
.section { padding: 5rem 0; }
.section + .section { padding-top: 0; }
.section-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 0.75rem 1.5rem; margin-bottom: 1.75rem; }
.section-head h2 { font-size: 1.875rem; }
.section-head p { color: var(--text-2); margin-top: 0.5rem; }
.link-arrow { color: var(--link); font-weight: 500; font-size: 0.875rem; white-space: nowrap; }
.link-arrow:hover { color: var(--text-strong); }

/* Типы предложений */
.types { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.type-tile { background: var(--bg); padding: 1.75rem 1.5rem 1.5rem; display: flex; flex-direction: column; gap: 0.75rem; min-height: 13.75rem; transition: background .2s; }
.type-tile:hover { background: var(--bg-1); }
.type-icon { width: 2.5rem; height: 2.5rem; border-radius: 0.5rem; display: grid; place-items: center; border: 1px solid var(--line); background: var(--bg-2); color: var(--accent-2); }
.type-tile h3 { font-size: 1.125rem; margin-top: 0.5rem; }
.type-tile p { color: var(--text-2); font-size: 0.875rem; flex: 1; }
.type-tile .count { font-family: var(--mono); font-size: 0.8125rem; color: var(--text-3); }

/* Категории */
.cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(13.75rem, 1fr)); gap: 0.5rem; }
.cat { display: flex; justify-content: space-between; align-items: center; padding: 0.875rem 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-1); font-size: 0.875rem; transition: border-color .15s, background .15s; }
.cat:hover { border-color: var(--line-2); background: var(--bg-2); }
.cat span { color: var(--text-3); font-family: var(--mono); font-size: 0.75rem; }

/* Шаги */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.step { padding: 1.75rem; border: 1px solid var(--line); border-radius: var(--radius-lg); background: linear-gradient(180deg, var(--bg-1), var(--bg)); }
.step-num { font-family: var(--mono); color: var(--accent-2); font-size: 0.8125rem; }
.step h3 { font-size: 1.125rem; margin: 1rem 0 0.5rem; }
.step p { color: var(--text-2); font-size: 0.875rem; }

.cta { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 1rem; padding: 3.5rem; text-align: center; background: radial-gradient(31.25rem 12.5rem at 50% 0%, var(--glow-cta), transparent 70%), var(--bg-1); }
.cta > :not(.spot) { position: relative; z-index: 1; }
.cta .spot { background: radial-gradient(26rem circle at var(--mx, 50%) var(--my, 0%), var(--spot), transparent 65%); }
.cta h2 { font-size: 2.25rem; letter-spacing: -.035em; }
.cta p { color: var(--text-2); margin: 0.75rem auto 1.75rem; max-width: 32.5rem; }

/* ---------- Cards ---------- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(16.875rem, 1fr)); gap: 1rem; }
.card { position: relative; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg-1); overflow: hidden; transition: border-color .2s, transform .2s; }
.card:hover { border-color: var(--line-2); transform: translateY(-2px); }
.card-media { position: relative; aspect-ratio: 16 / 10; background: var(--bg-2); overflow: hidden; }
.card-media img { width: 100%; height: 100%; object-fit: cover; }
.card-placeholder { position: absolute; inset: 0; display: grid; place-items: center; color: var(--text-3); background:
  radial-gradient(15rem 7.5rem at 30% 20%, var(--glow-card-1), transparent 70%),
  radial-gradient(12.5rem 7.5rem at 80% 90%, var(--glow-card-2), transparent 70%), var(--bg-2); }
.card-placeholder span { font: 600 0.8125rem var(--mono); letter-spacing: .04em; text-transform: uppercase; }
.card-type { position: absolute; top: 0.75rem; left: 0.75rem; }
.card-fav { position: absolute; top: 0.5rem; right: 0.5rem; z-index: 2; }
.card-body { padding: 1rem; display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }
.card-title { font-size: 0.9375rem; font-weight: 500; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.5rem; }
.card-title a::after { content: ""; position: absolute; inset: 0; }
.card-meta { color: var(--text-3); font-size: 0.8125rem; display: flex; justify-content: space-between; gap: 0.5rem; }
.card-price { font-size: 1.25rem; font-weight: 600; letter-spacing: -.02em; margin-top: auto; }
.card-price small { font-size: 0.75rem; color: var(--text-3); font-weight: 400; display: block; letter-spacing: 0; }
.card-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border-top: 1px solid var(--line); }
.card-kpis div { background: var(--bg-1); padding: 0.625rem 1rem; }
.card-kpis dt { color: var(--text-3); font-size: 0.75rem; }
.card-kpis dd { margin: 0.125rem 0 0; font-size: 0.875rem; font-weight: 500; font-family: var(--mono); }

.fav-btn { width: 2.125rem; height: 2.125rem; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.55); backdrop-filter: blur(0.375rem); color: #fff; cursor: pointer; transition: color .15s, background .15s; }
.fav-btn:hover { background: rgba(0,0,0,.8); }
.fav-btn.on { color: var(--red); }
.fav-btn.plain { position: static; background: var(--bg-2); border-color: var(--line); color: var(--text); }

/* ---------- Pills / badges ---------- */
.pill { display: inline-flex; align-items: center; gap: 0.375rem; height: 1.375rem; padding: 0 0.5rem; border-radius: 62.4375rem; font-size: 0.75rem; font-weight: 500; background: var(--pill-bg); border: 1px solid var(--line); color: var(--text); backdrop-filter: blur(0.375rem); white-space: nowrap; }
.pill::before { content: ""; width: 0.375rem; height: 0.375rem; border-radius: 50%; background: currentColor; opacity: .9; }
.pill-order { color: var(--business); }
.pill-offer { color: var(--violet); }
.pill-top { color: var(--amber); }
.pill-taken { color: var(--text-2); }
.status { display: inline-flex; align-items: center; height: 1.375rem; padding: 0 0.5rem; border-radius: var(--radius); font-size: 0.75rem; font-weight: 500; }
.status-published { background: var(--green-soft); color: var(--green); }
.status-moderation { background: var(--amber-soft); color: var(--amber); }
.status-rejected { background: var(--red-soft); color: var(--red); }
.status-archived, .status-draft { background: var(--fill-2); color: var(--text-2); }

/* ---------- Catalog ---------- */
.page-head { padding: 2.5rem 0 1.5rem; border-bottom: 1px solid var(--line); }
.page-head h1 { font-size: 2.125rem; letter-spacing: -.035em; }
.page-head p { color: var(--text-2); margin-top: 0.5rem; }
.crumbs { font-size: 0.8125rem; color: var(--text-3); margin-bottom: 0.75rem; display: flex; gap: 0.375rem; flex-wrap: wrap; }
.crumbs a:hover { color: var(--text); }
.tabs { display: flex; gap: 0.25rem; margin-top: 1.5rem; overflow-x: auto; scrollbar-width: none; }
.tabs a { padding: 0.5rem 0.75rem; border-radius: var(--radius); font-size: 0.875rem; color: var(--text-2); white-space: nowrap; display: inline-flex; gap: 0.5rem; align-items: center; }
.tabs a span { font-family: var(--mono); font-size: 0.75rem; color: var(--text-3); }
.tabs a:hover { color: var(--text-strong); background: var(--fill-1); }
.tabs a.active { color: var(--text-strong); background: var(--fill-3); }

.catalog { display: grid; grid-template-columns: 16.25rem 1fr; gap: 2rem; padding: 2rem 0 5rem; }
.filters { position: sticky; top: 5.5rem; align-self: start; display: flex; flex-direction: column; gap: 1rem; }
.filters h3 { font-size: 0.8125rem; color: var(--text-2); font-weight: 500; text-transform: uppercase; letter-spacing: .06em; }
.filters-actions { display: flex; gap: 0.5rem; }
.toolbar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1.25rem; }
.toolbar .select { width: auto; }
.empty { padding: 4rem 1.5rem; text-align: center; border: 1px dashed var(--line-2); border-radius: var(--radius-lg); color: var(--text-2); }
.empty h3 { color: var(--text); margin-bottom: 0.5rem; font-size: 1.125rem; }
.empty .btn { margin-top: 1.25rem; }

.pager { display: flex; gap: 0.25rem; justify-content: center; margin-top: 2.5rem; flex-wrap: wrap; }
.pager a, .pager span { min-width: 2.25rem; height: 2.25rem; padding: 0 0.625rem; display: grid; place-items: center; border-radius: var(--radius); border: 1px solid var(--line); font-size: 0.875rem; font-family: var(--mono); }
.pager a:hover { border-color: var(--line-2); background: var(--fill-1); }
.pager .current { background: var(--inverse); color: var(--on-inverse); border-color: var(--inverse); }
.pager .gap { border: 0; color: var(--text-3); }

/* ---------- Forms ---------- */
.field { display: flex; flex-direction: column; gap: 0.375rem; }
.field > label, .label { font-size: 0.8125rem; color: var(--text-2); font-weight: 500; }
.field .hint { font-size: 0.75rem; color: var(--text-3); }
.input, .select, .textarea {
  width: 100%; height: 2.5rem; padding: 0 0.75rem; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--bg-1); color: var(--text);
  font: 400 0.875rem var(--font); outline: none; transition: border-color .15s, box-shadow .15s;
}
.textarea { height: auto; min-height: 10rem; padding: 0.625rem 0.75rem; line-height: 1.6; resize: vertical; }
.select { appearance: none; -webkit-appearance: none; padding-right: 2rem; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' width='10' height='10'%3E%3Cpath fill='%23888' d='M201.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 338.7 54.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.75rem center; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--line-2); }
.input:focus, .select:focus, .textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 0.1875rem var(--accent-soft); }
.input::placeholder, .textarea::placeholder { color: var(--text-3); }
.is-invalid { border-color: var(--red) !important; }
.field-error { color: var(--red); font-size: 0.75rem; }
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.row-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }
.check { display: flex; gap: 0.625rem; align-items: flex-start; font-size: 0.875rem; color: var(--text-2); cursor: pointer; }
.check input { margin-top: 0.1875rem; accent-color: var(--accent); }
.input-suffix { position: relative; }
.input-suffix .input { padding-right: 2.25rem; }
.input-suffix span { position: absolute; right: 0.75rem; top: 50%; transform: translateY(-50%); color: var(--text-3); font-size: 0.875rem; pointer-events: none; }

.form-page { max-width: 51.25rem; margin: 0 auto; padding: 2.5rem 1.5rem 5rem; }
.form-card { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg-1); }
.form-section { padding: 1.5rem; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 1rem; }
.form-section:last-child { border-bottom: 0; }
.form-section h2 { font-size: 1rem; }
.form-section > p { color: var(--text-2); font-size: 0.875rem; margin-top: -0.5rem; }
.form-foot { padding: 1.25rem 1.5rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; background: var(--bg-2); border-top: 1px solid var(--line); border-radius: 0 0 var(--radius-lg) var(--radius-lg); }

.type-picker { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
.type-picker label { position: relative; padding: 0.875rem; border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; font-size: 0.875rem; display: flex; flex-direction: column; gap: 0.25rem; transition: border-color .15s, background .15s; }
.type-picker label small { color: var(--text-3); font-size: 0.75rem; }
.type-picker input { position: absolute; opacity: 0; }
.type-picker label:hover { border-color: var(--line-2); }
.type-picker input:checked + span { color: var(--text-strong); }
.type-picker label:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.js [data-for]:not(.shown) { display: none; }

.photo-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); gap: 0.5rem; }
.photo-list figure { margin: 0; position: relative; aspect-ratio: 4/3; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.photo-list img { width: 100%; height: 100%; object-fit: cover; }
.photo-list form { position: absolute; top: 0.25rem; right: 0.25rem; }
.dropzone { border: 1px dashed var(--line-2); border-radius: var(--radius); padding: 1.25rem; text-align: center; color: var(--text-2); font-size: 0.875rem; cursor: pointer; display: block; }
.dropzone:hover { border-color: var(--accent); color: var(--text-strong); }
.dropzone input { display: none; }

.auth-page { min-height: calc(100vh - 4rem - 7.5rem); display: grid; place-items: center; padding: 3rem 1.5rem; }
.auth-card { width: 100%; max-width: 25rem; display: flex; flex-direction: column; gap: 1rem; }
.auth-card h1 { font-size: 1.75rem; letter-spacing: -.03em; text-align: center; }
.auth-card > p { text-align: center; color: var(--text-2); margin-top: -0.5rem; }
.auth-card .alt { text-align: center; font-size: 0.875rem; color: var(--text-2); }
.auth-card .alt a { color: var(--accent-2); }
.demo-note { font-size: 0.8125rem; color: var(--text-3); border: 1px dashed var(--line-2); border-radius: var(--radius); padding: 0.625rem 0.75rem; }

/* ---------- Listing page ---------- */
.listing { display: grid; grid-template-columns: minmax(0, 1fr) 22.5rem; gap: 2.5rem; padding: 1.5rem 0 5rem; }
.listing-title { font-size: 2rem; letter-spacing: -.03em; margin: 0.75rem 0 0.5rem; }
.listing-sub { display: flex; flex-wrap: wrap; gap: 0.375rem 1rem; color: var(--text-2); font-size: 0.875rem; align-items: center; }
.gallery { margin-top: 1.5rem; }
.gallery-main { aspect-ratio: 16/9; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); background: var(--bg-2); position: relative; }
.gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.gallery-thumbs { display: flex; gap: 0.5rem; margin-top: 0.5rem; overflow-x: auto; }
.gallery-thumbs button { flex: 0 0 6rem; aspect-ratio: 4/3; padding: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; cursor: pointer; background: none; opacity: .6; }
.gallery-thumbs button.active, .gallery-thumbs button:hover { opacity: 1; border-color: var(--line-2); }
.gallery-thumbs img { width: 100%; height: 100%; object-fit: cover; }
.kpis { display: flex; flex-wrap: wrap; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; margin-top: 1.5rem; }
.kpis div { flex: 1 1 9.375rem; background: var(--bg-1); padding: 1rem 1.125rem; }
.kpis dt { color: var(--text-3); font-size: 0.75rem; }
.kpis dd { margin: 0.25rem 0 0; font-size: 1.125rem; font-weight: 600; letter-spacing: -.02em; }
.prose { margin-top: 2rem; }
.prose h2 { font-size: 1.25rem; margin-bottom: 0.75rem; }
.prose-text { color: var(--prose); white-space: pre-line; line-height: 1.7; }
.aside { display: flex; flex-direction: column; gap: 1rem; position: sticky; top: 5.5rem; align-self: start; }
.panel { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg-1); padding: 1.25rem; display: flex; flex-direction: column; gap: 0.875rem; }
.panel h3 { font-size: 0.9375rem; }
.price-big { font-size: 1.875rem; font-weight: 700; letter-spacing: -.03em; }
.price-label { color: var(--text-3); font-size: 0.8125rem; }
.seller { display: flex; gap: 0.75rem; align-items: center; }
.avatar { width: 2.75rem; height: 2.75rem; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, var(--accent), #10b981); font-weight: 600; color: var(--on-accent); flex: 0 0 auto; }
.seller small { display: block; color: var(--text-3); font-size: 0.75rem; }
.notice { padding: 0.75rem 0.875rem; border-radius: var(--radius); font-size: 0.875rem; border: 1px solid; }
.notice-warn { border-color: rgba(245,165,36,.35); background: var(--amber-soft); color: var(--notice-warn); }
.notice-error { border-color: var(--red-line); background: var(--red-soft); color: var(--notice-error); }
.notice-info { border-color: var(--accent-line); background: var(--accent-soft); color: var(--notice-info); }
.meta-list { display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.875rem; }
.meta-list div { display: flex; justify-content: space-between; gap: 0.75rem; }
.meta-list span:first-child { color: var(--text-3); }

/* ---------- Flash ---------- */
.flashes { position: fixed; top: 4.75rem; right: 1.5rem; z-index: 60; display: flex; flex-direction: column; gap: 0.5rem; max-width: 23.75rem; }
.flash { padding: 0.75rem 1rem; border-radius: var(--radius); border: 1px solid var(--line-2); background: var(--bg-2); box-shadow: var(--shadow); font-size: 0.875rem; display: flex; gap: 0.625rem; align-items: flex-start; animation: flash-in .25s ease-out; }
.flash::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; margin-top: 0.375rem; flex: 0 0 auto; background: var(--green); }
.flash-error::before { background: var(--red); }
@keyframes flash-in { from { opacity: 0; transform: translateY(-6px); } }

/* ---------- Cabinet / Admin ---------- */
.dash { display: grid; grid-template-columns: 13.75rem 1fr; gap: 2rem; padding: 2rem 0 5rem; }
.side-nav { display: flex; flex-direction: column; gap: 0.125rem; position: sticky; top: 5.5rem; align-self: start; }
.side-nav a { padding: 0.5rem 0.75rem; border-radius: var(--radius); color: var(--text-2); font-size: 0.875rem; display: flex; justify-content: space-between; align-items: center; }
.side-nav a:hover { color: var(--text-strong); background: var(--fill-1); }
.side-nav a.active { color: var(--text-strong); background: var(--fill-3); }
.side-nav .count { font-family: var(--mono); font-size: 0.75rem; color: var(--text-3); }
.side-nav .count.hot { color: var(--on-accent); background: var(--accent); padding: 0 0.375rem; border-radius: 0.5rem; }
.side-nav hr { border: 0; border-top: 1px solid var(--line); margin: 0.5rem 0; }
.dash-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
.dash-head h1 { font-size: 1.625rem; letter-spacing: -.03em; }

.table-wrap { border: 1px solid var(--line); border-radius: var(--radius-lg); overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.table th { text-align: left; font-weight: 500; color: var(--text-3); font-size: 0.75rem; padding: 0.625rem 1rem; border-bottom: 1px solid var(--line); background: var(--bg-1); white-space: nowrap; }
.table td { padding: 0.875rem 1rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.table tr:last-child td { border-bottom: 0; }
.table tr:hover td { background: var(--fill-1); }
.table .actions { display: flex; gap: 0.375rem; flex-wrap: wrap; justify-content: flex-end; }
.table .title-cell a { font-weight: 500; }
.table .title-cell small { display: block; color: var(--text-3); margin-top: 0.125rem; }
.reject-reason { margin-top: 0.375rem; font-size: 0.8125rem; color: var(--red); }

.mod-card { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg-1); padding: 1.25rem; display: grid; grid-template-columns: 1fr auto; gap: 1rem 1.5rem; }
.mod-card + .mod-card { margin-top: 0.75rem; }
.mod-card h3 { font-size: 1rem; }
.mod-card .desc { color: var(--text-2); font-size: 0.875rem; margin-top: 0.5rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.mod-actions { display: flex; flex-direction: column; gap: 0.5rem; min-width: 15rem; }
.mod-actions .input { height: 2.125rem; font-size: 0.8125rem; }
.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; margin-bottom: 1.5rem; }
.kpi { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.125rem; background: var(--bg-1); }
.kpi .stat-value { font-size: 1.75rem; }
.inquiry { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.125rem 1.25rem; background: var(--bg-1); }
.inquiry + .inquiry { margin-top: 0.625rem; }
.inquiry.unread { border-color: var(--accent-line); }
.inquiry-head { display: flex; justify-content: space-between; gap: 0.75rem; font-size: 0.8125rem; color: var(--text-3); }
.inquiry p { margin-top: 0.625rem; white-space: pre-line; }
.inquiry .who { margin-top: 0.625rem; font-size: 0.875rem; }

/* ---------- Документы ---------- */
.legal { max-width: 53.75rem; padding-top: 2.5rem; padding-bottom: 5rem; }
.legal h1 { font-size: 2.125rem; letter-spacing: -.035em; }
.legal-meta { color: var(--text-3); font-size: 0.875rem; margin-top: 0.5rem; }
.legal-tabs { margin: 1.25rem 0 1.75rem; }
.legal h2 { font-size: 1.1875rem; margin: 2rem 0 0.75rem; }
.legal p, .legal li { color: var(--prose); line-height: 1.7; }
.legal p + p { margin-top: 0.625rem; }
.legal ul { padding-left: 1.25rem; margin: 0.625rem 0; }
.legal li + li { margin-top: 0.375rem; }
.legal a, .check a { color: var(--link); }
.legal a:hover, .check a:hover { text-decoration: underline; }
.legal .table-wrap { margin: 0.75rem 0; }
.legal .table td { color: var(--prose); font-size: 0.875rem; }
.legal code, .notice code { font-family: var(--mono); font-size: .9em; }

/* ---------- Footer ---------- */
.footer { border-top: 1px solid var(--line); padding: 3rem 0 2rem; margin-top: 2.5rem; color: var(--text-2); font-size: 0.875rem; }
.footer-grid { display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: 2rem; }
.footer h4 { color: var(--text); font-size: 0.8125rem; font-weight: 500; margin-bottom: 0.75rem; }
.footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.footer-legal { display: flex; gap: 1rem; flex-wrap: wrap; }
.footer-legal a:hover { color: var(--text); }
.footer-bottom { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line); display: flex; justify-content: space-between; color: var(--text-3); font-size: 0.8125rem; gap: 1rem; flex-wrap: wrap; }

.error-page { text-align: center; padding: 7.5rem 1.5rem; }
.error-page .code { font: 700 7.5rem/1 var(--font); letter-spacing: -.06em; background: var(--code-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.error-page p { color: var(--text-2); margin: 1rem 0 2rem; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .types { grid-template-columns: 1fr; }
  .listing { grid-template-columns: 1fr; }
  .aside { position: static; }
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .nav { display: none; position: absolute; top: 4rem; left: 0; right: 0; flex-direction: column; padding: 0.75rem 1rem; background: var(--bg); border-bottom: 1px solid var(--line); }
  .nav.open { display: flex; }
  .nav a { padding: 0.75rem; font-size: 0.9375rem; }
  .burger { display: grid; }
  .header-right .btn-primary span { display: none; }
  .catalog, .dash { grid-template-columns: 1fr; }
  .filters, .side-nav { position: static; }
  .side-nav { flex-direction: row; overflow-x: auto; }
  .side-nav hr { display: none; }
  .hero-search { grid-template-columns: 1fr 1fr; }
  .hero-search .input { grid-column: 1 / -1; }
  .hero-search .btn { grid-column: 1 / -1; }
  .stats { grid-template-columns: 1fr; }
  .stat:nth-child(2) { border-right: 0; }
  .stat:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .steps { grid-template-columns: 1fr; }
  .type-picker { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .mod-card { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .wrap { padding: 0 1rem; }
  .header .wrap { gap: 0.75rem; }
  .hero { padding: 4rem 0 3rem; }
  .types { grid-template-columns: 1fr; }
  .row-2, .row-3 { grid-template-columns: 1fr; }
  .cta { padding: 2.25rem 1.25rem; }
  .cta h2 { font-size: 1.75rem; }
  .section { padding: 3.5rem 0; }
  .listing-title { font-size: 1.625rem; }
  .flashes { left: 1rem; right: 1rem; }
  .kpi-grid { grid-template-columns: 1fr 1fr; }
  .form-foot { flex-direction: column-reverse; align-items: stretch; }
}
@media (max-width: 400px) {
  /* самые узкие телефоны: иконки плотнее — шапка влезает в 320px */
  .logo { gap: 0.25rem; }
  .header-right { gap: 0.125rem; }
  .icon-link { width: 2rem; }
}

/* ===== Видеопрезентация-«кружок» ===== */
[hidden] { display: none !important; }
.vnote { --d: 9rem; position: relative; width: var(--d); height: var(--d); border-radius: 50%; flex: none;
  box-shadow: 0 0.5rem 1.75rem rgba(0, 0, 0, .45); transition: width .35s cubic-bezier(.2, .8, .2, 1), height .35s cubic-bezier(.2, .8, .2, 1); }
.vnote-video { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; background: var(--bg-2); }
.vnote-ring { position: absolute; inset: -0.3125rem; width: calc(100% + 0.625rem); height: calc(100% + 0.625rem); transform: rotate(-90deg); pointer-events: none; }
.vnote-ring circle { fill: none; stroke-width: 2; }
.vnote-ring-track { stroke: var(--accent-line); }
.vnote-ring-bar { stroke: var(--accent); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; }
.vnote-hit { position: absolute; inset: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.vnote-hit:focus-visible { outline: 2px solid var(--accent); outline-offset: 0.375rem; }
.vnote-chip { position: absolute; left: 50%; bottom: 0.5rem; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 0.25rem;
  height: 1.25rem; padding: 0 0.4375rem; border-radius: 62.4375rem; background: rgba(0, 0, 0, .6); color: #fff; font: 500 0.6875rem var(--mono, var(--font)); pointer-events: none; }
.vnote-ico-on { display: none; }
.vnote.is-playing .vnote-ico-off { display: none; }
.vnote.is-playing .vnote-ico-on { display: inline-flex; }
.vnote-sm { --d: 4.5rem; box-shadow: none; }

/* на странице объявления — поверх галереи, как кружок в чате; по нажатию растёт */
.gallery-main .vnote { position: absolute; right: 1rem; bottom: 1rem; z-index: 2; }
.gallery-main .vnote.is-open { --d: min(22rem, calc(100% - 2rem)); width: min(22rem, calc(100% - 2rem)); height: auto; aspect-ratio: 1; max-height: calc(100% - 2rem); }
@media (max-width: 40rem) { .gallery-main .vnote { --d: 6.5rem; right: 0.625rem; bottom: 0.625rem; } }

/* метка в карточке каталога */
.card-media .card-vnote { position: absolute; right: 0.625rem; bottom: 0.625rem; width: 2.75rem; height: 2.75rem; border-radius: 50%;
  border: 2px solid var(--accent); box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, .4); overflow: hidden; background: var(--bg-2); }
.card-media .card-vnote img { width: 100%; height: 100%; object-fit: cover; }
.card-vnote svg { position: absolute; right: 0.125rem; bottom: 0.125rem; padding: 0.125rem; width: 1rem; height: 1rem; border-radius: 50%; background: var(--accent); color: var(--on-accent); }

/* форма */
.pill-new { color: var(--accent-2); margin-left: 0.375rem; vertical-align: middle; }
.form-hint { margin-top: -0.5rem; font-size: 0.875rem; }
.vnote-current { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.vnote-current .vnote { --d: 6rem; box-shadow: none; }
.vnote-pick { display: flex; flex-direction: column; gap: 0.75rem; }
.vnote-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.vnote-actions label { cursor: pointer; }
.vnote-preview { display: flex; align-items: center; gap: 1rem; }
.vnote-preview[hidden] { display: none; }
.vnote-preview-info { display: flex; flex-direction: column; gap: 0.25rem; align-items: flex-start; font-size: 0.875rem; }
.link-btn { border: 0; padding: 0; background: none; color: var(--accent-2); font: inherit; cursor: pointer; }
.link-btn:hover { text-decoration: underline; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.vnote-delete { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.5rem; }

/* окно записи */
.vrec { width: min(26rem, calc(100vw - 2rem)); padding: 1.5rem 1.25rem 1.25rem; border: 1px solid var(--line); border-radius: 1.25rem; background: var(--bg); color: var(--text); }
.vrec::backdrop { background: rgba(0, 0, 0, .72); backdrop-filter: blur(0.25rem); }
.vrec-stage { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; text-align: center; }
.vrec-circle { position: relative; width: min(18rem, 70vw); aspect-ratio: 1; }
.vrec-circle video { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; background: var(--bg-2); display: block; }
.vrec-circle video[hidden] { display: none; }
.vrec-circle [data-vrec-live].is-mirrored { transform: scaleX(-1); }
.vrec-circle .vnote-ring { inset: -0.4375rem; width: calc(100% + 0.875rem); height: calc(100% + 0.875rem); }
.vrec-circle .vnote-ring circle { stroke-width: 1.5; }
.vrec-time { font: 500 0.875rem var(--mono, var(--font)); color: var(--text-2); }
.vrec.is-recording .vrec-time { color: var(--text-strong); }
.vrec-msg { margin: 0; min-height: 2.5em; font-size: 0.8125rem; color: var(--text-2); }
.vrec-msg.is-error { color: var(--notice-error); }
.vrec-controls { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-top: 1rem; }
.vrec-controls[hidden] { display: none; }
.vrec-controls .btn { flex: 1; justify-content: center; }
.vrec-icon { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 1px solid var(--line); border-radius: 50%; background: var(--fill-1); color: var(--text); cursor: pointer; }
.vrec-icon.is-off { visibility: hidden; }
.vrec-icon:hover { background: var(--fill-3); }
.vrec-shutter { display: grid; place-items: center; width: 4.25rem; height: 4.25rem; border: 0.1875rem solid var(--text-strong); border-radius: 50%; background: none; cursor: pointer; }
.vrec-shutter span { width: 3.125rem; height: 3.125rem; border-radius: 50%; background: #ff3b4e; transition: all .2s ease; }
.vrec.is-recording .vrec-shutter span { width: 1.5rem; height: 1.5rem; border-radius: 0.375rem; }
.vrec-shutter:disabled { opacity: .4; cursor: default; }
@media (prefers-reduced-motion: reduce) { .vnote { transition: none; } }

/* ===== Лайки ===== */

/* ===== QR-код объявления ===== */
.qr-share summary { list-style: none; cursor: pointer; }
.qr-share summary::-webkit-details-marker { display: none; }
.qr-share[open] summary { border-color: var(--line-2); }
.qr-body { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; padding-top: 0.875rem; text-align: center; }
/* белый фон и в тёмной теме: камеры уверенно читают только тёмное на светлом */
.qr-img { width: 12.5rem; height: 12.5rem; padding: 0.375rem; border-radius: var(--radius-lg); background: #fff; image-rendering: pixelated; }
.qr-body p { margin: 0; font-size: 0.8125rem; }
.qr-actions { display: flex; gap: 0.5rem; }

/* ===== Примеры объявлений ===== */
.demo-badge { display: inline-flex; align-items: center; height: 1.375rem; margin: 1rem 0 0 0.375rem; padding: 0 0.5rem; border-radius: 62.4375rem;
  border: 1px dashed var(--line-2); color: var(--text-2); font-size: 0.75rem; font-weight: 500; vertical-align: top; }
.card-demo { position: absolute; left: 0.75rem; bottom: 0.75rem; z-index: 1; height: 1.25rem; padding: 0 0.4375rem; display: inline-flex; align-items: center;
  border-radius: 62.4375rem; background: var(--pill-bg); border: 1px dashed var(--line-2); color: var(--text-2); font-size: 0.6875rem; font-weight: 500; backdrop-filter: blur(0.375rem); }


/* ===== self3d: новые компоненты ===== */
.stats-2 { grid-template-columns: repeat(2, 1fr); }
.types-2 { grid-template-columns: repeat(2, 1fr); }
.steps-4 { grid-template-columns: repeat(4, 1fr); }
.grid-3 { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.cats-icons .cat { justify-content: flex-start; gap: 0.625rem; }
.cats-icons .cat svg { color: var(--link); flex: none; }
.cats-icons .cat span { margin-left: auto; }
.ico-text { display: inline-flex; gap: 0.375rem; align-items: center; }
.listing-badges { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-top: 1rem; }
.kpis .kpi-wide { flex-basis: 100%; }
.status-active { background: var(--accent-soft); color: var(--accent-2); }

/* Карточка: выделение и топ (платное продвижение) */
.card-hl { border-color: var(--amber); box-shadow: 0 0 0 1px var(--amber) inset, 0 0.5rem 1.5rem var(--amber-soft); }
.card-top .card-title a::before { content: ""; }
.card-flag { position: absolute; left: 0.625rem; bottom: 0.625rem; display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--amber); color: #000; }

/* Рейтинг и звёзды */
.rating { display: inline-flex; align-items: center; gap: 0.3125rem; font-size: 0.8125rem; color: var(--text-2); margin-top: 0.125rem; }
.rating svg { color: var(--amber); }
.rating b { color: var(--text-strong); font-family: var(--mono); }
.rating-none { color: var(--text-3); }
.stars { display: inline-flex; gap: 0.125rem; color: var(--line-2); vertical-align: middle; }
.stars .on { color: var(--amber); }
a.seller { color: inherit; }
a.seller:hover b { color: var(--link); }

/* Файлы: модели и чертежи */
.files { list-style: none; padding: 0; margin: 0.75rem 0 0; display: flex; flex-direction: column; gap: 0.5rem; }
.files li { display: flex; align-items: center; gap: 0.75rem; padding: 0.625rem 0.75rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-1); font-size: 0.875rem; }
.file-ext { flex: none; min-width: 2.75rem; text-align: center; padding: 0.125rem 0.375rem; border-radius: 0.25rem; background: var(--accent-soft); color: var(--accent-2); font: 600 0.6875rem var(--mono); }
.file-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.files form { margin-left: auto; }

/* Отклик / вложение */
.respond-form { display: flex; flex-direction: column; gap: 0.625rem; }
.respond-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.attach { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.8125rem; color: var(--text-2); cursor: pointer; max-width: 100%; }
.attach span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attach:hover { color: var(--text-strong); }

/* Продвижение */
.promo h3 { display: flex; align-items: center; gap: 0.5rem; }
.promo h3 svg { color: var(--amber); }
.promo-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.625rem 0; border-top: 1px solid var(--line); }
.promo-ico { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--amber-soft); color: var(--amber); flex: none; }
.promo-text { flex: 1; min-width: 0; font-size: 0.875rem; }
.promo-text small { display: block; color: var(--text-3); font-size: 0.75rem; line-height: 1.4; }
.promo-item .btn { flex: none; font-family: var(--mono); }

/* Список переписок */
.conv-list { list-style: none; padding: 0; margin: 0; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.conv-list li + li { border-top: 1px solid var(--line); }
.conv-list a { display: flex; gap: 0.875rem; align-items: center; padding: 0.875rem 1rem; color: inherit; background: var(--bg-1); }
.conv-list a:hover { background: var(--fill-2); }
.conv-list li.unread a { background: var(--accent-soft); }
.conv-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.125rem; }
.conv-top { display: flex; justify-content: space-between; gap: 0.5rem; font-size: 0.9375rem; }
.conv-top .dim { font-size: 0.75rem; flex: none; }
.conv-listing { font-size: 0.75rem; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv-last { font-size: 0.875rem; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.count.hot { font: 600 0.75rem var(--mono); color: var(--on-accent); background: var(--accent); padding: 0.0625rem 0.4375rem; border-radius: 0.625rem; flex: none; }

/* Переписка */
.chat { display: grid; grid-template-columns: minmax(0, 1fr) 18.75rem; gap: 1.5rem; align-items: start; }
.chat-main { min-width: 0; }
.chat-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin: 0.5rem 0 1rem; flex-wrap: wrap; }
.chat-title { font-size: 1.375rem; letter-spacing: -.02em; }
.chat-title a { color: inherit; }
.chat-side { display: flex; flex-direction: column; gap: 1rem; position: sticky; top: 5.5rem; }
.offer-chip { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.375rem 0.75rem; border: 1px solid var(--accent-line); background: var(--accent-soft); color: var(--notice-info); border-radius: 62.4375rem; font-size: 0.8125rem; font-weight: 500; white-space: nowrap; }
.thread { display: flex; flex-direction: column; gap: 0.625rem; padding: 1rem; height: min(60vh, 37.5rem); overflow-y: auto; border: 1px solid var(--line); border-radius: var(--radius-lg) var(--radius-lg) 0 0; background: var(--bg-1); }
.thread-empty { margin: auto; }
.msg { max-width: min(80%, 36rem); align-self: flex-start; padding: 0.625rem 0.875rem; border-radius: 1rem 1rem 1rem 0.25rem; background: var(--fill-3); }
.msg-mine { align-self: flex-end; border-radius: 1rem 1rem 0.25rem 1rem; background: var(--accent); color: var(--on-accent); }
.msg-system { align-self: center; max-width: 90%; background: transparent; border: 1px dashed var(--line-2); border-radius: 62.4375rem; color: var(--text-2); font-size: 0.8125rem; text-align: center; padding: 0.375rem 0.875rem; }
.msg-author { font-size: 0.75rem; font-weight: 600; color: var(--link); margin-bottom: 0.125rem; }
.msg-body { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.9375rem; line-height: 1.45; }
.msg-file { display: inline-flex; align-items: center; gap: 0.375rem; margin-top: 0.375rem; padding: 0.375rem 0.625rem; border-radius: var(--radius); background: rgba(0, 0, 0, .18); color: inherit; font-size: 0.8125rem; max-width: 100%; }
.msg-file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-file small { opacity: .7; flex: none; }
.msg-time { font-size: 0.6875rem; opacity: .6; margin-top: 0.25rem; text-align: right; }
.msg-system .msg-time { display: none; }
.reply { border: 1px solid var(--line); border-top: 0; border-radius: 0 0 var(--radius-lg) var(--radius-lg); padding: 0.75rem; background: var(--bg-2); display: flex; flex-direction: column; gap: 0.5rem; }
.reply .textarea { min-height: 4.5rem; resize: vertical; }
.reply-foot { display: flex; align-items: center; gap: 0.75rem; }
.reply-foot .field-error { flex: 1; margin: 0; }
.reply-foot .btn { margin-left: auto; }
.review-mini { font-size: 0.8125rem; border-top: 1px solid var(--line); padding-top: 0.625rem; }
.review-mini p { margin: 0.25rem 0 0; color: var(--text-2); }
.review-form { display: flex; flex-direction: column; gap: 0.5rem; }
.star-input { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 0.125rem; }
.star-input input { position: absolute; opacity: 0; pointer-events: none; }
.star-input label { color: var(--line-2); cursor: pointer; transition: color .1s, transform .1s; }
.star-input label:hover, .star-input label:hover ~ label, .star-input input:checked ~ label { color: var(--amber); }
.star-input input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 0.25rem; }

/* Отклики по объявлению */
.responses { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.responses li { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg-1); padding: 1rem 1.125rem; }
.responses li.unread { border-color: var(--accent-line); }
.resp-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.resp-body { margin: 0.75rem 0; color: var(--text-2); white-space: pre-line; font-size: 0.9375rem; }
.resp-foot { display: flex; justify-content: space-between; align-items: center; font-size: 0.8125rem; }

/* Публичная страница пользователя */
.profile { display: grid; grid-template-columns: 18.75rem minmax(0, 1fr); gap: 2rem; padding: 2rem 0 5rem; align-items: start; }
.profile-card { align-items: center; text-align: center; position: sticky; top: 5.5rem; }
.profile-card h1 { font-size: 1.375rem; letter-spacing: -.02em; }
.profile-card .meta-list { width: 100%; text-align: left; }
.avatar-lg { width: 5rem; height: 5rem; font-size: 2rem; }
.reviews { list-style: none; padding: 0; margin: 0.75rem 0 0; display: flex; flex-direction: column; gap: 0.75rem; }
.reviews li { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg-1); padding: 1rem 1.125rem; }
.review-head { display: flex; align-items: center; gap: 0.625rem; flex-wrap: wrap; font-size: 0.875rem; }
.review-head .dim { margin-left: auto; font-size: 0.75rem; }
.reviews p { margin: 0.5rem 0; white-space: pre-line; }

/* Оплата */
.pay-card { text-align: center; padding: 2.5rem 2rem; display: flex; flex-direction: column; gap: 0.75rem; align-items: center; }
.pay-card h1 { font-size: 1.5rem; letter-spacing: -.02em; }
.pay-card .meta-list { width: 100%; text-align: left; }
.pay-ico { display: grid; place-items: center; width: 4rem; height: 4rem; border-radius: 50%; }
.pay-ico.ok { background: var(--green-soft); color: var(--green); }
.pay-ico.err { background: var(--red-soft); color: var(--red); }
.pay-ico.wait { background: var(--amber-soft); color: var(--amber); }

@media (max-width: 1024px) {
  .steps-4 { grid-template-columns: 1fr 1fr; }
  .chat { grid-template-columns: 1fr; }
  .chat-side { position: static; }
  .profile { grid-template-columns: 1fr; }
  .profile-card { position: static; }
}
@media (max-width: 860px) {
  .stats-2, .types-2 { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .steps-4 { grid-template-columns: 1fr; }
  .respond-form .row { grid-template-columns: 1fr; }
  .msg { max-width: 92%; }
  .thread { height: 60vh; }
}