/* Главная (основной сайт, с 2026-10-18): стили поверх встроенных в index.html. Перенесено с тестовой страницы /proposal/ (proposal.css). */

/* 1. Один зелёный: заголовки — цвет текста, мятный остаётся только у действий (кнопки, активные вкладки) */
html[data-theme="fpv"],html[data-theme="fpv"] body{--heading:var(--text);--moss:var(--text)}
.herotitle{color:var(--text)}

/* 2. Акцент: выбранная плитка — обводка и подсветка цветом кнопки, а не белая заливка; главная кнопка в шапке одна */
.tile[aria-pressed="true"]{background:color-mix(in srgb,var(--btn) 14%,var(--surface));border-color:var(--btn);color:var(--text);box-shadow:0 0 0 1px var(--btn) inset}
.tile[aria-pressed="true"] .ic{background:var(--btn);color:var(--on-btn)}
.tile[aria-pressed="true"] .fan i,.tile[aria-pressed="true"] .who i{border-color:var(--surface)}
#showWork{display:none}
.bar .btn:not(#showWork):not(.ghost){box-shadow:0 0 0 3px color-mix(in srgb,var(--btn) 22%,transparent)}

/* 3. Текстуры-заглушки приглушены и сдвинуты к холодной гамме темы */
.ph,.tile .fan i,.process .steps,.item .ph{filter:saturate(.78) brightness(.82) hue-rotate(-8deg)}
.ph .tag,.ph .price{filter:brightness(1.28)} /* подписи поверх текстур остаются читаемыми */

/* 4. Без рукописного шрифта и светлых плашек от светлой темы */
.hand{font-family:Inter,sans-serif;font-weight:600;font-size:14px!important;color:var(--muted);transform:none!important}
.process .step span{font-family:Inter;font-weight:600;font-size:12px;color:var(--text);background:var(--surface2);border:1px solid var(--line);transform:none}
.scribble{display:none}

/* 5. Статусы: контраст не ниже 4,5:1 (светлее текст на «хвойном», темнее фон «янтарного») */
html[data-theme="fpv"],html[data-theme="fpv"] body{--ok-text:#A9C7BD;--amber:#5E3F06;--amber-text:#E0CBA6}

/* 6. Подписи — обычным шрифтом и строчными, моноширинный только для чисел */
.mono,.tile .cnt,.tile .who .more,.cmenu .cc,.stats .mono{font-family:Inter,sans-serif;text-transform:none;letter-spacing:0;font-size:12.5px}
.tile .cnt{font-size:12px}
.hero .stats .mono{font-size:13px;color:var(--muted)}
.stats b{font-family:'JetBrains Mono',monospace;font-weight:600;font-size:24px}

/* 7. Иерархия: мастера — строки без рамок, боковые блоки — без карточек; карточки только у работ и категорий */
.mc{background:transparent;border-color:transparent;border-bottom:1px solid var(--line);border-radius:0;padding:8px 4px}
.mc:hover{transform:none;border-bottom-color:var(--btn);background:var(--surface)}
.box{background:transparent;border:0;border-top:1px solid var(--line);border-radius:0;padding:14px 0 6px}
.layout aside .box h3{font-size:15px}

/* Баннер теста */
.proposal-note{background:var(--surface2);border-bottom:1px solid var(--line-strong);color:var(--text);font:13px/1.45 Inter,sans-serif}
.proposal-note .wrap{padding-top:9px;padding-bottom:9px}
.proposal-note b{color:var(--btn)}
.proposal-note a{color:var(--btn)}

/* узкая панель: шапка не вылезает за край */
@media (max-width:1100px){.tsw .lbl{display:none}.search{max-width:260px}}
.hero>div:first-child{margin-bottom:0}

/* правый блок начинается на уровне нижней линии вкладок */
.layout aside{margin-top:var(--tabs-h,0px)}
@media (max-width:980px){.layout aside{margin-top:0}}

/* плитки мастеров растягиваются на всю ширину строки, справа нет пустого места */
.mgrid{grid-template-columns:repeat(auto-fit,minmax(176px,1fr))}

/* счётчики первого экрана — ссылки на соответствующие разделы */
.stats a.st{display:block;color:inherit;text-decoration:none;border-radius:10px;padding:4px 8px;margin:-4px -8px;transition:background .15s}
.stats a.st:hover{background:var(--surface)}
.stats a.st:hover .mono{color:var(--btn)}
.stats a.st:focus-visible{outline:3px solid var(--btn);outline-offset:2px}
html{scroll-behavior:smooth;scroll-padding-top:80px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ---------- сворачивание полос (состояние: html[data-fold~="id"]) ---------- */
.fold{position:relative}
.fold-strip{display:none}
html[data-fold~="cats"] [data-fold-id="cats"]>:not(.fold-strip),
html[data-fold~="masters"] [data-fold-id="masters"]>:not(.fold-strip),
html[data-fold~="feed"] [data-fold-id="feed"]>:not(.fold-strip),
html[data-fold~="subs"] [data-fold-id="subs"]>:not(.fold-strip),
html[data-fold~="events"] [data-fold-id="events"]>:not(.fold-strip),
html[data-fold~="challenge"] [data-fold-id="challenge"]>:not(.fold-strip){display:none!important}
html[data-fold~="cats"] [data-fold-id="cats"]>.fold-strip,
html[data-fold~="masters"] [data-fold-id="masters"]>.fold-strip,
html[data-fold~="feed"] [data-fold-id="feed"]>.fold-strip,
html[data-fold~="subs"] [data-fold-id="subs"]>.fold-strip,
html[data-fold~="events"] [data-fold-id="events"]>.fold-strip,
html[data-fold~="challenge"] [data-fold-id="challenge"]>.fold-strip{display:flex}
html[data-fold~="masters"] #masters{padding-bottom:10px!important}
html[data-fold~="cats"] [data-fold-id="cats"]{padding:8px 0 4px}
html[data-fold~="feed"] .layout aside{margin-top:0}

/* тонкая строка свёрнутого блока: кликается целиком */
.fold-strip{width:100%;align-items:center;gap:10px;min-height:38px;padding:6px 14px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--text);font:14px/1.3 Inter,sans-serif;text-align:left;cursor:pointer}
.fold-strip b{font-weight:600}
.fold-strip .fs-sum{color:var(--muted);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.fold-strip .fs-open{margin-left:auto;color:var(--muted);font-size:12.5px;white-space:nowrap}
.fold-strip:hover{border-color:var(--btn)}
.fold-strip:hover .fs-open{color:var(--btn)}
.fold-strip:focus-visible,.fold-btn:focus-visible,.fold-all:focus-visible{outline:3px solid var(--btn);outline-offset:2px}

/* кнопка «свернуть» в правом верхнем углу полосы */
.fold-btn{position:absolute;right:0;top:0;z-index:4;border:0;background:none;padding:4px 6px;border-radius:8px;color:var(--muted);font:12.5px Inter,sans-serif;cursor:pointer}
.fold-btn:hover{color:var(--btn);background:var(--surface)}
.fold-btn::after{content:" ▴"}
[data-fold-id="cats"]>.fold-btn{top:-14px}
[data-fold-id="masters"]>.fold-btn{top:10px}
[data-fold-id="feed"]>.fold-btn{top:10px}
.layout aside .box.fold>.fold-btn{top:12px}
.layout aside .box.fold h3{padding-right:84px}

/* «Показать все свёрнутые блоки» в футере */
.fold-all{display:block;margin:0 auto 18px;border:1px solid var(--line);background:var(--surface2);color:var(--text);border-radius:999px;padding:7px 14px;font:13px Inter,sans-serif;cursor:pointer}
.fold-all:hover{border-color:var(--btn)}
.layout{align-items:start}
html[data-fold~="subs"] [data-fold-id="subs"],html[data-fold~="events"] [data-fold-id="events"],html[data-fold~="challenge"] [data-fold-id="challenge"]{padding:6px 0}

/* ---------- уровни ленты: каждый ряд карточек сворачивается отдельно, нижние поднимаются ---------- */
.bento{display:flex;flex-direction:column;gap:14px}
.bento .lvl-grid{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:120px;gap:14px;grid-auto-flow:dense}
.lvl>.fold-btn{position:static;display:block;margin:0 0 4px;padding:2px 4px}
html[data-fold~="l1"] [data-fold-id="l1"]>:not(.fold-strip),
html[data-fold~="l2"] [data-fold-id="l2"]>:not(.fold-strip),
html[data-fold~="l3"] [data-fold-id="l3"]>:not(.fold-strip),
html[data-fold~="l4"] [data-fold-id="l4"]>:not(.fold-strip){display:none!important}
html[data-fold~="l1"] [data-fold-id="l1"]>.fold-strip,
html[data-fold~="l2"] [data-fold-id="l2"]>.fold-strip,
html[data-fold~="l3"] [data-fold-id="l3"]>.fold-strip,
html[data-fold~="l4"] [data-fold-id="l4"]>.fold-strip{display:flex}
@media (max-width:640px){.bento .lvl-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:110px}}

/* ---------- страница шире на больших экранах: 1240 → до 1612 px (+30%) ---------- */
.wrap{max-width:1612px}

/* ---------- лента: сетка 4×4 плиток мастеров, мозаика 2×2 ---------- */
#feed{container-type:inline-size}
.mtiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
@container (max-width:720px){.mtiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
@container (max-width:520px){.mtiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}}
.mt{display:flex;flex-direction:column;min-width:0;background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden;text-decoration:none;color:inherit;transition:border-color .15s}
.mt:hover{border-color:var(--btn)}
.mt:focus-visible{outline:3px solid var(--btn);outline-offset:2px}
.mt .mos{display:grid;grid-template-columns:1fr 1fr;gap:3px;aspect-ratio:1;background:var(--surface)}
.mt .mos i{display:block;min-height:0}
.mt .mi{display:flex;align-items:center;gap:9px;padding:9px 10px;min-width:0}
.mt .mava{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--surface2);border:1px solid var(--line);font:700 11px Inter,sans-serif;color:var(--text)}
.mt .mtx{display:flex;flex-direction:column;min-width:0}
.mt .mtx b{font-size:13.5px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mt .mtx small{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (prefers-reduced-motion:reduce){.mt{transition:none}}

/* сворачивание всего блока */
[data-fold-id="mt16"]>.fold-btn{position:static;display:block;margin:0 0 4px;padding:2px 4px}
html[data-fold~="mt16"] [data-fold-id="mt16"]>:not(.fold-strip){display:none!important}
html[data-fold~="mt16"] [data-fold-id="mt16"]>.fold-strip{display:flex}

/* ---------- лента: 5 плиток в ряд, общий блок + три блока популярных категорий ---------- */
.mtiles{grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
@container (max-width:760px){.mtiles{grid-template-columns:repeat(4,minmax(0,1fr))}}
@container (max-width:600px){.mtiles{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}}
@container (max-width:420px){.mtiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
.mt{border-radius:12px}
.mt .mos{gap:2px}
.mt .mi{gap:7px;padding:7px 8px}
.mt .mava{width:26px;height:26px;font-size:10px}
.mt .mtx b{font-size:12.5px}
.mt .mtx small{font-size:11.5px}
.mtb{margin-bottom:26px}
.mtb>.fold-btn{position:static;display:block;margin:0 0 4px;padding:2px 4px}
.mth{margin:0 0 10px;font:700 18px/1.2 Unbounded,Inter,sans-serif;letter-spacing:-.01em;color:var(--text)}
.mth small{display:block;margin-top:4px;font:400 12.5px Inter,sans-serif;letter-spacing:0;color:var(--muted)}
html[data-fold~="mtall"] [data-fold-id="mtall"]>:not(.fold-strip),
html[data-fold~="mtc1"] [data-fold-id="mtc1"]>:not(.fold-strip),
html[data-fold~="mtc2"] [data-fold-id="mtc2"]>:not(.fold-strip),
html[data-fold~="mtc3"] [data-fold-id="mtc3"]>:not(.fold-strip){display:none!important}
html[data-fold~="mtall"] [data-fold-id="mtall"]>.fold-strip,
html[data-fold~="mtc1"] [data-fold-id="mtc1"]>.fold-strip,
html[data-fold~="mtc2"] [data-fold-id="mtc2"]>.fold-strip,
html[data-fold~="mtc3"] [data-fold-id="mtc3"]>.fold-strip{display:flex}
html[data-fold~="mtall"] [data-fold-id="mtall"],html[data-fold~="mtc1"] [data-fold-id="mtc1"],html[data-fold~="mtc2"] [data-fold-id="mtc2"],html[data-fold~="mtc3"] [data-fold-id="mtc3"]{margin-bottom:10px}
/* узкая лента: 3 колонки (15 = 3×5, без неполного ряда); имя переносится на 2 строки вместо обрезки */
@container (max-width:760px){.mtiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
@container (max-width:420px){.mtiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
.mt .mtx b{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mt .mi{align-items:flex-start}
.mt .mava{margin-top:1px}

/* ---------- правая колонка временно убрана; лента на всю ширину ---------- */
.layout{grid-template-columns:minmax(0,1fr)}
.layout>aside{display:none}
/* больше плиток в ряд; всегда 3 полных ряда — лишние плитки скрываются */
.mtiles{grid-template-columns:repeat(var(--mc,7),minmax(0,1fr))}
.mtiles>.mt:nth-child(n+22){display:none}
@container (max-width:1300px){.mtiles{--mc:6}.mtiles>.mt:nth-child(n+19){display:none}}
@container (max-width:1100px){.mtiles{--mc:5}.mtiles>.mt:nth-child(n+16){display:none}}
@container (max-width:900px){.mtiles{--mc:4}.mtiles>.mt:nth-child(n+13){display:none}}
@container (max-width:700px){.mtiles{--mc:3}.mtiles>.mt:nth-child(n+10){display:none}}
@container (max-width:460px){.mtiles{--mc:2}.mtiles>.mt:nth-child(n+7){display:none}}

/* наведение: плитка под мышью подсвечивается, остальные в её блоке слегка затемняются (только устройства с мышью) */
@media (hover:hover){
  .mt{transition:filter .18s,border-color .18s,box-shadow .18s,transform .18s}
  .mtiles:has(.mt:hover) .mt:not(:hover){filter:brightness(.8)}
  .mt:hover{border-color:var(--btn);box-shadow:0 0 0 1px var(--btn),0 10px 26px -12px color-mix(in srgb,var(--btn) 55%,transparent);transform:translateY(-2px);position:relative;z-index:1}
  .mt:hover .mtx b{color:var(--btn)}
}
.mtiles:has(.mt:focus-visible) .mt:not(:focus-visible){filter:brightness(.8)}
@media (prefers-reduced-motion:reduce){.mt{transition:none}.mt:hover{transform:none}}

/* плитки «Продаю» / «Куплю» — ссылки на разделы объявлений */
a.tile-ad{text-decoration:none;color:inherit;border-color:var(--line-strong)}
a.tile-ad .ic{background:var(--btn);color:var(--on-btn)}
a.tile-ad .who .more{margin-left:0;color:var(--btn)}
a.tile-ad:hover{border-color:var(--btn)}

/* «Продаю» / «Куплю» — темнее остальных, «Всё» — светлее */
a.tile-ad{background:color-mix(in srgb,var(--bg) 62%,#000)}
button.tile[data-cat=""]{background:color-mix(in srgb,var(--surface2) 70%,var(--text) 14%)}
button.tile[data-cat=""] .mono,button.tile[data-cat=""] .cnt,button.tile[data-cat=""] .who .more{color:color-mix(in srgb,var(--text) 78%,transparent)}
button.tile[data-cat=""] .ic{background:color-mix(in srgb,var(--text) 14%,transparent)}
button.tile[data-cat=""][aria-pressed="true"] .ic{background:var(--btn);color:var(--on-btn)}

/* «Мастера на paravita»: рамки как у плиток категорий (вместо строк без рамок) */
.mc{background:var(--surface);border:1.5px solid var(--line);border-radius:16px;padding:8px 10px}
.mc:hover{background:var(--surface);border-color:var(--btn);transform:translateY(-2px)}
@media (prefers-reduced-motion:reduce){.mc:hover{transform:none}}

/* ---------- 2026-10-17: шапка в одну строку — логотип и тема слева, остальное справа, у всех тонкая рамка ---------- */
.bar{gap:8px}
.bar .logo{margin-right:6px}
.bar .tsw .tsw-menu{right:auto;left:0}
.hnav{display:flex;align-items:center;gap:8px}
.hb{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 14px;border:1px solid var(--ink);border-radius:999px;background:transparent;color:var(--ink);font:600 14px/1 Inter,sans-serif;text-decoration:none;white-space:nowrap;cursor:pointer;transition:border-color .15s,color .15s,background .15s,width .22s ease,padding .22s ease}
.hb:hover{border-color:var(--btn);color:var(--btn)}
.hb:focus-visible{outline:3px solid var(--btn);outline-offset:2px}
.hb .hi{display:grid;place-items:center}
.hb[aria-pressed="true"]{border-color:var(--btn);color:var(--btn);background:color-mix(in srgb,var(--btn) 10%,transparent)}
.bar .iconbtn.hb{width:38px;height:38px;padding:0;justify-content:center;border-radius:50%;background:transparent}
.bar .iconbtn.hb .dot{top:5px;right:5px}
.auth{display:inline-flex;gap:8px;align-items:center}
/* меню категорий в шапке */
.bar .catmenu{margin:0;align-self:auto}
.bar .catmenu>button{height:38px;padding:0 14px;border:1px solid var(--ink);background:transparent;font:600 14px/1 Inter,sans-serif}
.bar .catmenu>button:hover{background:transparent;border-color:var(--btn);color:var(--btn)}
.bar .catmenu>button .cl{max-width:140px}
.cm-ads{display:none}
@media (prefers-reduced-motion:reduce){.hb{transition:none}}
/* уже: подписи «Продаю / Куплю / Всё» → иконки */
@media (max-width:1280px){.hb-ad{width:38px;padding:0;justify-content:center}.hb-ad .hl{display:none}}
/* телефон: две строки — вверху логотип, тема, почта, вход; внизу категории и поиск во всю ширину */
@media (max-width:860px){
  .bar{flex-wrap:wrap;height:auto;padding-top:8px;padding-bottom:8px;row-gap:8px}
  .hb-ad{display:none}
  .cm-ads{display:flex;gap:6px;padding:4px 4px 8px;margin-bottom:4px;border-bottom:1px solid var(--line)}
  .cm-ads a{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;height:36px;border:1px solid var(--line);border-radius:999px;color:var(--ink);text-decoration:none;font:600 14px Inter,sans-serif}
  .bar .catmenu .cmenu{right:auto;left:0}
}
@media (max-width:420px){.logo .lt small{display:none}.auth .hb{padding:0 11px}.tsw>button{padding:7px 9px}}

/* ---------- лента: 5 плиток в ряд × 3 ряда (15), мозаика 3×3 ---------- */
.mtiles{--mc:5}
.mtiles>.mt:nth-child(n+16){display:none}
@container (max-width:1300px){.mtiles{--mc:5}}
@container (max-width:900px){.mtiles{--mc:4}.mtiles>.mt:nth-child(n+13){display:none}}
@container (max-width:700px){.mtiles{--mc:3}.mtiles>.mt:nth-child(n+10){display:none}}
@container (max-width:460px){.mtiles{--mc:2}.mtiles>.mt:nth-child(n+7){display:none}}
.mt-mine{border-color:var(--btn)}
.mt-mine .mtx small{color:var(--btn)}
.bar .tsw>button{height:38px;padding:0 14px;border:1px solid var(--ink);background:transparent;color:var(--ink);font:600 14px/1 Inter,sans-serif}
.bar .tsw>button:hover{border-color:var(--btn);color:var(--btn)}
@media (max-width:420px){.bar .tsw>button{padding:0 11px}}
.bar>*{flex-shrink:0}
/* до 1000 px «Продаю / Куплю / Всё» уходят в меню категорий */
@media (max-width:1000px){
  .hb-ad{display:none}
  .cm-ads{display:flex;gap:6px;padding:4px 4px 8px;margin-bottom:4px;border-bottom:1px solid var(--line)}
  .cm-ads a{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;height:36px;border:1px solid var(--line);border-radius:999px;color:var(--ink);text-decoration:none;font:600 14px Inter,sans-serif}
  .cm-ads a:hover{border-color:var(--btn);color:var(--btn)}
}
/* узкий телефон: 1-я строка — логотип, тема, почта; 2-я — категории (иконка), поиск, вход */
@media (max-width:520px){
  .auth{order:6}
  .auth .hb{padding:0 11px}
  .bar .catmenu>button{padding:0 11px}
  .bar .catmenu>button .cl{display:none}
}

/* ---------- 2026-10-18: поиск и почта — в первом экране, справа от счётчиков; поиск занимает всё оставшееся место ---------- */
.hero .stats{align-items:center}
.hfind{flex:1 1 300px;display:flex;align-items:center;gap:8px;min-width:0;margin-left:10px}
.hsearch{flex:1;display:flex;align-items:center;gap:6px;height:38px;min-width:0;padding:0 14px 0 4px;border:1px solid var(--ink);border-radius:999px;background:transparent;color:var(--ink);cursor:text;transition:border-color .15s}
.hsearch .si{flex:none;width:30px;text-align:center;font-size:16px;line-height:1}
.hsearch input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:var(--ink);font:500 14px Inter,sans-serif;padding:0}
.hsearch input::placeholder{color:var(--muted)}
.hsearch input::-webkit-search-cancel-button{filter:invert(.7)}
.hsearch:hover{border-color:var(--btn)}
.hsearch:focus-within{border-color:var(--btn);box-shadow:0 0 0 3px color-mix(in srgb,var(--btn) 25%,transparent)}
.hfind .iconbtn.hb{flex:none;width:38px;height:38px;padding:0;justify-content:center;border-radius:50%;background:transparent;display:grid}
.hfind .iconbtn.hb .dot{top:5px;right:5px}
@media (max-width:640px){.hfind{flex-basis:100%;margin-left:0}.hfind #chatBtn{display:grid}}

/* текстуры-заглушки в мозаике приглушены под тёмную тему (как остальные заглушки) */
.mt .mos i[class]{filter:saturate(.78) brightness(.82) hue-rotate(-8deg)}