/* Шрифт лежит у нас. Раньше он приходил от Google, и адрес каждого
   посетителя уезжал в США до всякого согласия: это трансграничная
   передача персональных данных, о которой надо отдельно уведомлять. */
@import url("/static/fonts.css?v=1");

:root{
  --paper:#EDF1F5; --surface:#FFFFFF; --surface-2:#F6F9FB;
  --ink:#0F2233; --ink-2:#46586C; --ink-3:#7A8B9C;
  --rule:#DAE2EA; --rule-soft:#E8EDF2; --field:#C9D5E0;
  --brand:#14304F; --accent:#1F6FB8; --accent-soft:#E8F1F9;
  --ok:#1B7A5E; --ok-soft:#E2F0EB;
  --ad-line:#A9C2D6; --ad-bg:#F2F7FB; --ad-ink:#6C8299;
  --bar:#0F2233; --bar-ink:#A9BACA;
  --logo-solid:#0B2635; --logo-tree:#FFFFFF;
  --tint-a:#D6E1EA; --tint-b:#DEE6EC; --tint-c:#D9E3EB; --tint-d:#E1E7EC;
  --chat-bg:#E4EBF1; --chat-in:#FFFFFF; --chat-out:#D7E8F7;
  --shadow:0 6px 20px rgba(6,16,26,.14);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0A131C; --surface:#111E2A; --surface-2:#16242F;
    --ink:#E9EFF5; --ink-2:#A2B2C2; --ink-3:#78899A;
    --rule:#22323F; --rule-soft:#1A2733; --field:#2A3B4A;
    --brand:#1F6FB8; --accent:#5FA5DD; --accent-soft:#16283A;
    --ok:#4CAE8C; --ok-soft:#122A24;
    --ad-line:#2A3E4F; --ad-bg:#14222E; --ad-ink:#7E93A6;
    --bar:#06101A; --bar-ink:#8FA0B0;
    --logo-solid:#FFFFFF; --logo-tree:#111E2A;
    --tint-a:#1C2C3A; --tint-b:#20303E; --tint-c:#1A2937; --tint-d:#22323F;
    --chat-bg:#0D1822; --chat-in:#182633; --chat-out:#1E3A55;
    --shadow:0 6px 20px rgba(0,0,0,.4);
  }
}
:root[data-theme="dark"]{
  --paper:#0A131C; --surface:#111E2A; --surface-2:#16242F;
  --ink:#E9EFF5; --ink-2:#A2B2C2; --ink-3:#78899A;
  --rule:#22323F; --rule-soft:#1A2733; --field:#2A3B4A;
  --brand:#1F6FB8; --accent:#5FA5DD; --accent-soft:#16283A;
  --ok:#4CAE8C; --ok-soft:#122A24;
  --ad-line:#2A3E4F; --ad-bg:#14222E; --ad-ink:#7E93A6;
  --bar:#06101A; --bar-ink:#8FA0B0;
  --logo-solid:#FFFFFF; --logo-tree:#111E2A;
  --tint-a:#1C2C3A; --tint-b:#20303E; --tint-c:#1A2937; --tint-d:#22323F;
  --chat-bg:#0D1822; --chat-in:#182633; --chat-out:#1E3A55;
  --shadow:0 6px 20px rgba(0,0,0,.4);
}

*{box-sizing:border-box}
/* Свои display:flex у плавающих блоков сильнее атрибута hidden, и скрытый блок оставался на экране. */
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"Onest","Helvetica Neue",Arial,sans-serif;
  font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased;
}
a{color:inherit; text-decoration:none}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.wrap{max-width:1280px; margin:0 auto; padding:0 16px}
.spacer{flex:1 0 auto}

.bar{background:var(--bar); color:var(--bar-ink); font-size:12.5px}
.bar .wrap{height:42px; display:flex; align-items:center; gap:14px; overflow:hidden}
.bar .clock{flex:0 0 auto; white-space:nowrap; color:#fff; font-weight:600; font-size:13.5px;
  font-variant-numeric:tabular-nums}
.bar .temp{flex:0 0 auto; display:flex; align-items:center; gap:5px; white-space:nowrap;
  color:#fff; font-weight:600; font-size:13.5px; font-variant-numeric:tabular-nums}

/* Бегущая строка: содержимое продублировано, поэтому сдвиг на половину даёт бесшовный цикл */
.ticker{flex:1 1 auto; min-width:0; overflow:hidden; position:relative;
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
          mask-image:linear-gradient(to right, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%)}
.ticker .track{display:flex; align-items:center; gap:22px; width:max-content}
.bar b{color:#fff; font-weight:600; display:flex; align-items:center; gap:6px; white-space:nowrap}
.cityswitch{display:flex; align-items:center; gap:6px; height:42px; padding-right:4px;
  color:#fff; font-weight:600; font-size:13.5px; white-space:nowrap}
.bar span{white-space:nowrap; font-variant-numeric:tabular-nums}

header{background:var(--surface); border-bottom:1px solid var(--rule); z-index:5}
/* На узком экране шапка с поиском и кнопкой занимает треть экрана: приклеенной
   она наезжала на карточки. Липкой её делаем только там, где она невысокая. */
@media (min-width:760px){ header{position:sticky; top:0} }
header .wrap{padding:9px 16px 11px; display:flex; flex-direction:column; gap:9px}
.top{display:flex; align-items:center; gap:10px}
.mark{display:flex; align-items:center; gap:12px; min-width:0}
h1.wordmark{margin:0; font-size:inherit; font-weight:inherit; letter-spacing:normal}
.wordmark{display:flex; flex-direction:column; align-items:center; gap:4px; min-width:0}
.wordmark b{font-size:20px; font-weight:800; letter-spacing:.045em; line-height:1; white-space:nowrap}
.wordmark .tag{align-self:stretch; display:flex; align-items:center; gap:5px; font-style:normal;
  font-size:6.2px; font-weight:600; letter-spacing:.196em; line-height:1; color:var(--ink-3); white-space:nowrap}
.wordmark .tag s{flex:1 1 auto; min-width:7px; height:1px; background:currentColor; opacity:.55; text-decoration:none}
.wordmark .tag2{font-style:normal; font-size:6.2px; font-weight:600; letter-spacing:.12em; line-height:1;
  color:var(--ink-3); white-space:nowrap}
.chip{
  min-height:44px; padding:0 12px; border:1px solid var(--rule); border-radius:10px;
  display:flex; align-items:center; gap:6px; font-size:14px; font-weight:600;
  background:var(--surface); color:var(--ink); cursor:pointer; font-family:inherit;
}
.back{min-width:44px; min-height:44px; display:grid; place-items:center; border-radius:10px; border:1px solid var(--rule); background:var(--surface)}
.search{display:flex; height:46px; border:1.5px solid var(--field); border-radius:11px; overflow:hidden; background:var(--surface)}
.search input{flex:1; border:0; outline:0; padding:0 14px; font:500 16px "Onest",sans-serif; background:transparent; color:var(--ink)}
.search input::placeholder{color:var(--ink-3)}
.search button{width:54px; border:0; background:var(--accent); display:grid; place-items:center; cursor:pointer}
.cta{
  min-height:48px; border-radius:11px; background:var(--brand); color:#fff;
  font-weight:600; font-size:16px; display:flex; align-items:center; justify-content:center; gap:8px;
}
.cta.ghost{background:var(--surface); color:var(--ink); border:1.5px solid var(--field)}
.cta.blue{background:var(--accent)}

section{padding:12px 0 0}
.h{display:flex; align-items:center; gap:9px; min-height:28px; margin-bottom:8px}
.h h2{margin:0; font-size:19px; font-weight:700; letter-spacing:-.01em}
.h a{margin-left:auto; min-height:28px; display:flex; align-items:center; font-size:14px; font-weight:600; color:var(--accent)}
.h em{font-style:normal; font-size:13px; color:var(--ink-3)}
h1{margin:0; font-size:24px; font-weight:700; line-height:1.22; letter-spacing:-.015em; text-wrap:pretty}

.rubrics{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px}
.rubric{display:flex; align-items:center; gap:10px; min-height:52px; padding:0 12px;
  background:var(--surface); border:1px solid var(--rule); border-radius:12px}
.rubric span{display:flex; flex-direction:column}
.rubric b{font-size:14px; font-weight:600}
.rubric i{font-style:normal; font-size:12px; color:var(--ink-3)}
.more{grid-column:1/-1; min-height:44px; display:flex; align-items:center; justify-content:center;
  background:var(--surface); border:1px solid var(--rule); border-radius:12px; font-size:14px; font-weight:600; color:var(--accent)}

.ads{display:flex; flex-direction:column; gap:9px}
.ad{display:flex; gap:11px; background:var(--surface); border:1px solid var(--rule); border-radius:12px; padding:9px}
.ad .ph{width:88px; height:88px; flex-shrink:0; border-radius:9px; background:var(--tint-a)}
.ad .ph.b{background:var(--tint-b)} .ad .ph.c{background:var(--tint-c)} .ad .ph.d{background:var(--tint-d)}
.ad .txt{display:flex; flex-direction:column; gap:4px; min-width:0}
.ad .rb{font-size:11px; font-weight:600; letter-spacing:.05em; color:var(--accent)}
.ad .tt{font-size:14.5px; font-weight:600; line-height:1.3; text-wrap:pretty}
.ad .pr{font-size:17px; font-weight:700; font-variant-numeric:tabular-nums}
.ad .mt{font-size:12px; color:var(--ink-3)}
.badge{align-self:flex-start; background:var(--ok); color:#fff; font-size:10.5px; font-weight:600; letter-spacing:.03em; padding:2px 7px; border-radius:5px}

.svc{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px}
.svc a{min-height:74px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  background:var(--surface); border:1px solid var(--rule); border-radius:12px; padding:8px 6px; text-align:center;
  font-size:12.5px; font-weight:500}

.news{background:var(--surface); border:1px solid var(--rule); border-radius:12px; overflow:hidden}
.news a{display:flex; flex-direction:column; gap:4px; padding:11px 14px; border-bottom:1px solid var(--rule-soft); min-height:44px}
.news a:last-child{border-bottom:0}
.news .tt{font-size:15px; font-weight:600; line-height:1.38; text-wrap:pretty}
.news .tt.plain{font-weight:600}
.news .src{font-size:12px; color:var(--ink-3)}
.news .src b{color:var(--accent); font-weight:600}

.promo{border:1px dashed var(--ad-line); background:var(--ad-bg); border-radius:12px; padding:12px 14px; display:flex; flex-direction:column; gap:5px}
.promo .lbl{font-size:10.5px; font-weight:600; letter-spacing:.08em; color:var(--ad-ink)}
.promo .tt{font-size:15px; font-weight:600}
.promo .sub{font-size:13.5px; color:var(--ink-2); line-height:1.5}

.banner{border:1px dashed var(--ad-line); background:var(--ad-bg); border-radius:12px; overflow:hidden; display:flex; flex-direction:column}
.banner .lbl{display:flex; align-items:center; gap:8px; padding:6px 12px; font-size:10.5px; font-weight:600; letter-spacing:.08em; color:var(--ad-ink)}
.banner .lbl s{flex:1; height:1px; background:var(--ad-line); text-decoration:none}
.banner .slides{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; -webkit-overflow-scrolling:touch}
.banner .slides::-webkit-scrollbar{display:none}
.banner .slide{flex:0 0 100%; scroll-snap-align:start; aspect-ratio:4/3; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:7px; text-align:center; padding:18px; background:var(--surface-2)}
.banner .slide.s2{background:var(--accent-soft)}
.banner .slide.s3{background:var(--ok-soft)}
.banner .slide b{font-size:19px; font-weight:700; line-height:1.25; text-wrap:balance}
.banner .slide i{font-style:normal; font-size:14px; color:var(--ink-2); line-height:1.45; max-width:30ch}
.banner .slide em{font-style:normal; font-size:15px; font-weight:700; color:var(--accent); font-variant-numeric:tabular-nums}
.banner .dots{display:flex; gap:6px; justify-content:center; padding:9px 0 10px}
.banner .dots span{width:7px; height:7px; border-radius:50%; background:var(--ad-line)}
.banner .dots span.on{background:var(--accent); width:20px; border-radius:4px}

.themeicon{width:44px; height:44px; flex:0 0 auto; display:grid; place-items:center; border-radius:10px;
  border:1px solid var(--rule); background:var(--surface); color:var(--ink); cursor:pointer; padding:0}

.gal{display:flex; flex-direction:column; gap:8px}
.gal .big{aspect-ratio:4/3; border-radius:12px; background:var(--tint-a); position:relative; display:flex; align-items:flex-end; padding:10px}
.gal .cnt{background:rgba(6,16,26,.72); color:#fff; font-size:12px; padding:4px 9px; border-radius:6px}
.gal .strip{display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; padding-bottom:2px}
.gal .strip::-webkit-scrollbar{display:none}
.gal .strip span{width:64px; height:64px; flex:0 0 auto; border-radius:8px; background:var(--tint-b)}
.gal .strip span:first-child{outline:2px solid var(--accent); outline-offset:-2px; background:var(--tint-a)}

.card{background:var(--surface); border:1px solid var(--rule); border-radius:12px; padding:14px}
.price{font-size:30px; font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.meta{font-size:12.5px; color:var(--ink-3)}
.specs{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; padding:14px 0; border-top:1px solid var(--rule-soft); border-bottom:1px solid var(--rule-soft)}
.specs div{display:flex; flex-direction:column; gap:2px}
.specs dt{font-size:12.5px; color:var(--ink-3)}
.specs dd{margin:0; font-size:15.5px; font-weight:600}
.desc p{margin:0 0 10px; font-size:15.5px; line-height:1.62; color:var(--ink-2)}
.desc p:last-child{margin:0}
.seller{display:flex; align-items:center; gap:12px}
.seller .av{width:44px; height:44px; border-radius:50%; background:var(--surface-2); border:1px solid var(--rule); display:grid; place-items:center; font-size:17px; font-weight:700; color:var(--ink-2)}
.safe{display:flex; flex-direction:column; gap:8px}
.safe b{display:flex; align-items:center; gap:8px; font-size:15px; font-weight:700}
.safe span{font-size:13.5px; color:var(--ink-2); line-height:1.55}

.sticky{position:sticky; bottom:0; z-index:6; background:var(--surface); border-top:1px solid var(--rule);
  padding:10px 16px calc(10px + env(safe-area-inset-bottom)); display:flex; gap:10px}
.sticky .cta{flex:1}

.ways{display:flex; flex-direction:column; gap:10px}
.way{display:flex; align-items:center; gap:13px; min-height:68px; padding:12px 14px; background:var(--surface);
  border:1px solid var(--rule); border-radius:12px}
.way.lead{border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent)}
.way .ic{width:40px; height:40px; flex:0 0 auto; border-radius:10px; background:var(--accent-soft); display:grid; place-items:center}
.way .t{display:flex; flex-direction:column; gap:2px; min-width:0}
.way .t b{font-size:15.5px; font-weight:600}
.way .t i{font-style:normal; font-size:13px; color:var(--ink-3); line-height:1.4}
.way .tag{margin-left:auto; flex:0 0 auto; font-size:11px; font-weight:600; letter-spacing:.03em; color:#fff; background:var(--ok); padding:3px 8px; border-radius:5px}

.chat{background:var(--chat-bg); border:1px solid var(--rule); border-radius:14px; padding:14px; display:flex; flex-direction:column; gap:10px}
.msg{max-width:84%; padding:10px 13px; border-radius:14px; font-size:14.5px; line-height:1.45}
.msg.in{align-self:flex-start; background:var(--chat-in); border-bottom-left-radius:5px; border:1px solid var(--rule)}
.msg.out{align-self:flex-end; background:var(--chat-out); border-bottom-right-radius:5px}
.msg b{font-weight:700}
.msg .kb{display:flex; flex-wrap:wrap; gap:6px; margin-top:9px}
.msg .kb span{border:1px solid var(--field); background:var(--surface); border-radius:8px; padding:6px 10px; font-size:13px; font-weight:500}
.msg .pic{width:120px; height:90px; border-radius:8px; background:var(--tint-c); margin-bottom:2px}
.msg .ok{display:inline-flex; align-items:center; gap:6px; color:var(--ok); font-weight:600}
.steps{display:flex; flex-direction:column; gap:10px; counter-reset:s}
.step{display:flex; gap:12px; align-items:flex-start}
.step::before{counter-increment:s; content:counter(s); flex:0 0 auto; width:26px; height:26px; border-radius:50%;
  background:var(--accent); color:#fff; font-size:13px; font-weight:700; display:grid; place-items:center}
.step div{display:flex; flex-direction:column; gap:2px}
.step b{font-size:15px; font-weight:600}
.step i{font-style:normal; font-size:13.5px; color:var(--ink-2); line-height:1.5}

footer{margin-top:20px; border-top:1px solid var(--rule); background:var(--surface)}
footer .wrap{padding:16px 16px 28px; display:flex; flex-direction:column; gap:12px}
footer .cols{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px}
footer h3{margin:0 0 6px; font-size:13.5px; font-weight:600}
footer a{display:block; padding:5px 0; font-size:13.5px; color:var(--ink-2)}
footer .em{font-size:12.5px; color:var(--ink-3); line-height:1.6}

.themebtn{position:fixed; right:14px; bottom:calc(14px + env(safe-area-inset-bottom));
  min-height:46px; padding:0 16px; border-radius:23px; border:1px solid var(--rule);
  background:var(--surface); color:var(--ink); font:600 14px "Onest",sans-serif;
  display:flex; align-items:center; gap:8px; box-shadow:var(--shadow); cursor:pointer; z-index:20}
.themebtn.lifted{bottom:calc(84px + env(safe-area-inset-bottom))}

@media (min-width:760px){
  .wrap{padding:0 24px}
  .wordmark b{font-size:26px}
  .wordmark .tag,.wordmark .tag2{font-size:8px; letter-spacing:.196em}
  .mrn{width:84px}
  header .wrap{flex-direction:row; align-items:center; gap:20px; padding:16px 24px}
  .top{flex:0 0 auto}
  .search{flex:1}
  .cta{flex:0 0 auto; padding:0 20px}
  .rubrics{grid-template-columns:repeat(4,minmax(0,1fr))}
  .svc{grid-template-columns:repeat(6,minmax(0,1fr))}
  .grid2{display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:24px; align-items:start}
  .ads{display:grid; grid-template-columns:repeat(2,minmax(0,1fr))}
  .specs{grid-template-columns:repeat(4,minmax(0,1fr))}
  footer .cols{grid-template-columns:repeat(4,minmax(0,1fr))}
  .sticky{position:static; border:0; padding:0; background:transparent}
  .banner .slide{aspect-ratio:2.5/1}
  .ticker .track{gap:20px}
}
@media (prefers-reduced-motion:reduce){
  /* Бегущей строки это правило больше не касается: её двигает скрипт,
     а не CSS-анимация. Раньше на телефоне с «уменьшением движения»
     строка просто стояла, и выглядело это как поломка. */
  *{transition:none!important; animation:none!important}
}

.ad img.ph{object-fit:cover; display:block}
.gal .big{overflow:hidden}
.gal .big img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.gal .big .cnt{position:relative; z-index:1}
.gal .strip img{width:64px; height:64px; flex:0 0 auto; border-radius:8px; object-fit:cover; display:block}
.gal .strip img{cursor:pointer}
.gal .strip img:first-child{outline:2px solid var(--accent); outline-offset:-2px}
.gal .strip img.on{outline:2px solid var(--accent); outline-offset:-2px}
.gal .strip:has(img.on) img:first-child:not(.on){outline:0}

.mrn{flex:0 0 auto; display:block; width:56px; height:auto}
.mrn.dark{display:none}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .mrn.light{display:none}
  :root:not([data-theme="light"]) .mrn.dark{display:block}
}
:root[data-theme="dark"] .mrn.light{display:none}
:root[data-theme="dark"] .mrn.dark{display:block}
:root[data-theme="light"] .mrn.light{display:block}
:root[data-theme="light"] .mrn.dark{display:none}
.dev{display:inline-block; margin-top:6px; color:var(--ink-3)}
.dev a{color:var(--ink-2); font-weight:600}

.icobtn{position:relative; width:44px; height:44px; flex:0 0 auto; display:grid; place-items:center; border-radius:10px;
  border:1px solid var(--rule); background:var(--surface); color:var(--ink); cursor:pointer; padding:0; position:relative}
.icobtn .dot{position:absolute; top:8px; right:9px; width:7px; height:7px; border-radius:50%; background:var(--ok); border:1.5px solid var(--surface)}
.hrow{display:flex; gap:8px; align-items:center}

.field{display:flex; flex-direction:column; gap:6px}
.field label{font-size:13px; font-weight:600; color:var(--ink-2)}
.field input{height:50px; border:1.5px solid var(--field); border-radius:11px; background:var(--surface);
  padding:0 14px; font:500 17px "Onest",sans-serif; color:var(--ink); outline:0; font-variant-numeric:tabular-nums}
.field .hint{font-size:12.5px; color:var(--ink-3); line-height:1.45}
.otp{display:flex; gap:9px}
.otp span{flex:1; height:56px; border:1.5px solid var(--field); border-radius:11px; background:var(--surface);
  display:grid; place-items:center; font-size:24px; font-weight:700; font-variant-numeric:tabular-nums}
.otp span.on{border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent)}
.otp span.empty{color:var(--ink-3)}
.or{display:flex; align-items:center; gap:10px; color:var(--ink-3); font-size:12.5px}
.or s{flex:1; height:1px; background:var(--rule); text-decoration:none}
.legal{font-size:12px; color:var(--ink-3); line-height:1.5}
.legal a{color:var(--accent); font-weight:500}

.stats{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px}
.stat{background:var(--surface); border:1px solid var(--rule); border-radius:12px; padding:11px 12px; display:flex; flex-direction:column; gap:2px}
.stat b{font-size:21px; font-weight:700; font-variant-numeric:tabular-nums; line-height:1.1}
.stat i{font-style:normal; font-size:12px; color:var(--ink-3); line-height:1.3}
.tabs{display:flex; gap:7px; overflow-x:auto; scrollbar-width:none; padding-bottom:2px}
.tabs::-webkit-scrollbar{display:none}
.tabs a{flex:0 0 auto; min-height:38px; padding:0 14px; border-radius:10px; border:1px solid var(--rule);
  background:var(--surface); display:flex; align-items:center; gap:6px; font-size:13.5px; font-weight:600; color:var(--ink-2)}
.tabs a.on{background:var(--accent); border-color:var(--accent); color:#fff}
.tabs a em{font-style:normal; opacity:.75; font-weight:500}
.myad{background:var(--surface); border:1px solid var(--rule); border-radius:12px; overflow:hidden}
.myad .body{display:flex; gap:11px; padding:9px}
.myad img{width:80px; height:80px; flex-shrink:0; border-radius:9px; object-fit:cover; display:block}
.myad .t{display:flex; flex-direction:column; gap:4px; min-width:0}
.myad .t b{font-size:14.5px; font-weight:600; line-height:1.3}
.myad .t .pr{font-size:16px; font-weight:700; font-variant-numeric:tabular-nums}
.myad .t .mt{font-size:12px; color:var(--ink-3)}
.myad .acts{display:flex; border-top:1px solid var(--rule-soft)}
.myad .acts a{flex:1; min-height:42px; display:flex; align-items:center; justify-content:center; gap:6px;
  font-size:13.5px; font-weight:600; color:var(--accent); border-right:1px solid var(--rule-soft)}
.myad .acts a:last-child{border-right:0; color:var(--ink-3)}
.pill{align-self:flex-start; font-size:10.5px; font-weight:600; letter-spacing:.03em; padding:2px 7px; border-radius:5px}
.pill.live{background:var(--ok-soft); color:var(--ok)}
.pill.wait{background:var(--accent-soft); color:var(--accent)}
.pill.old{background:var(--rule-soft); color:var(--ink-3)}
.pill.sold{background:var(--ok); color:#fff}
.rows{background:var(--surface); border:1px solid var(--rule); border-radius:12px; overflow:hidden}
.rows a{display:flex; align-items:center; gap:12px; min-height:52px; padding:0 14px; border-bottom:1px solid var(--rule-soft); font-size:15px}
.rows a:last-child{border-bottom:0}
.rows a .cnt{margin-left:auto; font-size:13.5px; color:var(--ink-3); font-variant-numeric:tabular-nums}
.rows a.danger{color:#C0453C}
.me{display:flex; align-items:center; gap:13px; background:var(--surface); border:1px solid var(--rule); border-radius:12px; padding:13px 14px}
img.av{object-fit:cover; display:block}
.pricelist{display:flex; flex-direction:column; gap:0}
.pricelist .pl{display:flex; align-items:baseline; gap:10px; padding:9px 0;
  border-bottom:1px solid var(--rule-soft)}
.pricelist .pl .n{font-size:14.5px; color:var(--ink-2)}
.pricelist .pl .p{margin-left:auto; font-size:16px; font-weight:700; white-space:nowrap;
  font-variant-numeric:tabular-nums}
.pricelist .sub{padding-top:10px}
.me .av{width:48px; height:48px; border-radius:50%; background:var(--accent-soft); color:var(--accent);
  display:grid; place-items:center; font-size:19px; font-weight:700}
.me .t{display:flex; flex-direction:column; gap:2px; min-width:0}
.me .t b{font-size:16.5px; font-weight:700}
.me .t i{font-style:normal; font-size:13px; color:var(--ink-3)}

.snav{display:flex; gap:7px; overflow-x:auto; scrollbar-width:none; padding:10px 0 2px}
.snav::-webkit-scrollbar{display:none}
.snav a{flex:0 0 auto; min-height:38px; padding:0 13px; border-radius:9px; display:flex; align-items:center;
  font-size:12.5px; font-weight:700; letter-spacing:.06em; color:var(--ink-2); border:1px solid var(--rule); background:var(--surface)}
.snav a.on{background:var(--brand); border-color:var(--brand); color:#fff}

.hero{position:relative; border-radius:14px; overflow:hidden; background:#0B2635; min-height:340px; display:flex; align-items:flex-end}
.hero img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.75}
.hero .in{position:relative; z-index:1; padding:18px; display:flex; flex-direction:column; gap:9px; width:100%;
  background:linear-gradient(to top, rgba(6,18,26,.94) 42%, rgba(6,18,26,.55) 70%, rgba(6,18,26,0))}
.hero .tag{align-self:flex-start; background:#fff; color:#0B2635; font-size:10.5px; font-weight:700; letter-spacing:.09em; padding:4px 9px; border-radius:5px}
.hero h2{margin:0; font-size:27px; font-weight:800; line-height:1.14; letter-spacing:-.02em; color:#fff; text-wrap:balance}
.hero p{margin:0; font-size:14px; color:#C6D6E2; line-height:1.45}
.hero .go{display:flex; align-items:center; gap:9px; margin-top:3px; font-size:13px; color:#9FBBD0}
.hero .go b{color:#8FC5EE; font-weight:600}
.hero .go .circ{margin-left:auto; width:44px; height:44px; border-radius:50%; border:1.5px solid rgba(255,255,255,.5); display:grid; place-items:center}

.rail{background:var(--surface); border:1px solid var(--rule); border-radius:12px; overflow:hidden}
.rail .rh{display:flex; align-items:center; padding:12px 14px 10px}
.rail .rh b{font-size:12.5px; font-weight:700; letter-spacing:.09em; color:var(--ink)}
.rail .rh a{margin-left:auto; font-size:13px; font-weight:600; color:var(--accent); min-height:32px; display:flex; align-items:center; gap:5px}
.rail a.it{display:flex; gap:11px; padding:10px 14px; border-top:1px solid var(--rule-soft); min-height:44px}
.rail a.it img{width:74px; height:56px; flex:0 0 auto; border-radius:8px; object-fit:cover; display:block}
.rail a.it .t{display:flex; flex-direction:column; gap:4px; min-width:0}
.rail a.it .t b{font-size:14px; font-weight:600; line-height:1.32; text-wrap:pretty}
.rail a.it .t i{font-style:normal; font-size:11.5px; color:var(--ink-3)}
.rail a.it .t i s{text-decoration:none; color:var(--accent); font-weight:600}

.strip{position:relative; border-radius:12px; overflow:hidden; background:#0B2635; min-height:104px; display:flex; align-items:center}
.strip::after{content:""; position:absolute; inset:0; background:linear-gradient(to right, rgba(6,18,26,.9), rgba(6,18,26,.25))}
.strip span{position:relative}
.strip img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.8}
.strip span{position:relative; z-index:1; padding:16px 18px; text-shadow:0 2px 14px rgba(6,18,26,.9); font-size:19px; font-weight:800; letter-spacing:.01em;
  line-height:1.2; color:#fff; text-wrap:balance}

.ngrid{display:grid; grid-template-columns:repeat(1,minmax(0,1fr)); gap:10px}
.ncard{background:var(--surface); border:1px solid var(--rule); border-radius:12px; overflow:hidden; display:flex; flex-direction:column}
.ncard img{width:100%; aspect-ratio:16/10; object-fit:cover; display:block}
.ncard .b{padding:11px 13px 13px; display:flex; flex-direction:column; gap:5px}
.ncard .b b{font-size:15px; font-weight:600; line-height:1.32; text-wrap:pretty}
.ncard .b i{font-style:normal; font-size:12px; color:var(--ink-3)}
.ncard .b i s{text-decoration:none; color:var(--accent); font-weight:600}

@media (min-width:760px){
  .hero{min-height:420px}
  .hero h2{font-size:40px}
  .hero .in{padding:26px}
  .newsgrid2{display:grid; grid-template-columns:minmax(0,1fr) 380px; gap:20px; align-items:start}
  .ngrid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .strip{min-height:150px}
  .strip span{font-size:28px; padding:22px 26px}
}

.doc{max-width:760px; margin:0 auto; padding:0 16px}
.doc .card{padding:18px 18px 22px}
.doc h1{font-size:26px; margin:0 0 6px}
.doc .upd{font-size:13px; color:var(--ink-3); margin:0 0 4px}
.doc h2{font-size:19px; font-weight:700; margin:26px 0 8px; letter-spacing:-.01em; text-wrap:balance}
.doc h3{font-size:16px; font-weight:700; margin:18px 0 6px}
.doc p{margin:0 0 12px; font-size:15.5px; line-height:1.62; color:var(--ink-2)}
.doc li{font-size:15.5px; line-height:1.6; color:var(--ink-2); margin-bottom:7px}
.doc ul{margin:0 0 12px; padding-left:20px}
.doc b{color:var(--ink)}
.doc .fill{background:var(--accent-soft); color:var(--accent); font-weight:600; padding:1px 6px; border-radius:4px; font-size:14px}
.doc .toc{background:var(--surface-2); border:1px solid var(--rule); border-radius:12px; padding:14px 16px; margin:0 0 20px}
.doc .toc a{display:block; padding:6px 0; font-size:14.5px; color:var(--accent); font-weight:500; min-height:32px}

.check{display:flex; gap:11px; align-items:flex-start; cursor:pointer; padding:2px 0}
.check input{width:22px; height:22px; flex:0 0 auto; margin:1px 0 0; accent-color:var(--accent)}
.check span{font-size:13.5px; line-height:1.5; color:var(--ink-2)}
.check a{color:var(--accent); font-weight:600}
.check.req span b{color:var(--ink)}

.tick{display:flex; align-items:center; gap:5px; height:42px; color:var(--bar-ink); white-space:nowrap; font-variant-numeric:tabular-nums}
.tick b{color:#fff; font-weight:600}
.tick s{text-decoration:none; font-weight:600}
.tick s.up{color:#5BC59A}
.tick s.down{color:#E48B7F}

/* ───────── страницы приложения ───────── */
.crumbs{display:flex; gap:7px; align-items:center; flex-wrap:wrap; font-size:13px; color:var(--ink-3); padding:12px 0 0}
.crumbs a{color:var(--ink-3)}
.pagehead{display:flex; flex-wrap:wrap; align-items:baseline; gap:10px; padding:12px 0 10px}
.pagehead h1{font-size:24px; font-weight:700; letter-spacing:-.015em; margin:0}
.pagehead .cnt{font-size:14px; color:var(--ink-3)}
.lead{margin:8px 0 0; font-size:15px; color:var(--ink-2); line-height:1.55}
.note{font-size:12.5px; color:var(--ink-3); line-height:1.5; margin:2px 0 0}
.sub{font-size:13.5px; color:var(--ink-2); line-height:1.55}
.warn{border-color:var(--brand); color:var(--ink)}
.card.empty{display:flex; flex-direction:column; gap:8px; align-items:flex-start; padding:20px}
.card.empty b{font-size:17px}
.card.dark{background:var(--bar); color:#fff; display:flex; flex-direction:column; gap:9px}
.card.dark span{color:#A9BACA; font-size:13.5px; line-height:1.55}
.lnk{font-size:13.5px; font-weight:600; color:var(--accent); min-height:36px; display:flex; align-items:center}
.reset{font-size:13px; color:var(--ink-3); text-align:center; min-height:36px; display:flex; align-items:center; justify-content:center}

.feedgrid{display:flex; flex-direction:column; gap:12px; padding-bottom:8px}
.feedmain{display:flex; flex-direction:column; gap:12px}
.side{display:flex; flex-direction:column; gap:12px}
.filters{display:flex; flex-direction:column; gap:12px}
.filters select, .filters input[type=text], .filters input:not([type]){height:44px; border:1.5px solid var(--field);
  border-radius:9px; background:var(--surface); color:var(--ink); padding:0 11px; font:500 15px "Onest",sans-serif; width:100%}
.field span{font-size:13px; font-weight:600; color:var(--ink-2)}
.field{display:flex; flex-direction:column; gap:6px}
.two{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.ads.wide{gap:10px}
.adrow{display:flex; gap:12px; background:var(--surface); border:1px solid var(--rule); border-radius:12px; padding:10px}
.adrow img,.adrow .noph{width:120px; height:100px; flex:0 0 auto; border-radius:9px; object-fit:cover; background:var(--tint-a); display:block}
.adrow .body{display:flex; flex-direction:column; gap:5px; min-width:0}
.adrow .tt{font-size:16px; font-weight:600; line-height:1.28; text-wrap:pretty}
.adrow .pr{font-size:18px; font-weight:700; font-variant-numeric:tabular-nums}
.adrow .dsc{font-size:13.5px; color:var(--ink-2); line-height:1.45}
.adrow .mt{font-size:12.5px; color:var(--ink-3)}
.pager{display:flex; gap:7px; flex-wrap:wrap; padding-top:4px}
.pager a,.pager .gap{min-width:44px; min-height:44px; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--rule); border-radius:9px; background:var(--surface); font-size:14.5px; font-weight:600; padding:0 12px}
.pager a.on{background:var(--accent); border-color:var(--accent); color:#fff}
.pager .gap{border:0; background:transparent; min-width:24px}

.adgrid{display:flex; flex-direction:column; gap:12px}
.adhead{display:flex; flex-direction:column; gap:10px}
.adhead h1{font-size:22px; font-weight:700; line-height:1.24; margin:0; text-wrap:pretty}
.price.big{font-size:30px}
.buy{display:flex; flex-direction:column; gap:11px}
.buy form{display:contents}

.rublist{display:flex; flex-direction:column; padding:6px 0}
.rublist a{display:flex; align-items:center; gap:10px; min-height:44px; padding:0 16px; font-size:14.5px}
.rublist a.on{color:var(--accent); font-weight:600}
.rublist .cnt{margin-left:auto; font-size:13px; color:var(--ink-3)}
.firmgrid{display:grid; grid-template-columns:1fr; gap:10px}
.firm{display:flex; flex-direction:column; gap:8px}
.firm .ftop{display:flex; align-items:center; gap:8px}
.firm .rb{font-size:11.5px; font-weight:600; letter-spacing:.05em; color:var(--ink-3)}
.firm .ftop .pill{margin-left:auto}
.firm b{font-size:17px; font-weight:600; line-height:1.3}
.firm .about{font-size:14px; color:var(--ink-2); line-height:1.5}
.firm .frow{display:flex; flex-direction:column; gap:6px; padding-top:8px; border-top:1px solid var(--rule-soft)}
.firm .frow span,.firm .frow a{display:flex; align-items:center; gap:9px; font-size:13.5px;
  color:var(--ink-2); min-height:32px; min-width:0; overflow-wrap:anywhere}
.firm b,.firm .about{overflow-wrap:anywhere}
.firm .frow svg{flex:0 0 auto}
.firm .tel{font-size:15px; font-weight:600; color:var(--accent); font-variant-numeric:tabular-nums}

.fmts{display:grid; grid-template-columns:1fr; gap:12px}
.fmt{display:flex; flex-direction:column; gap:10px}
.fmt .ftop{display:flex; align-items:center; gap:10px}
.fmt .ftop b{font-size:17px; font-weight:700}
.fmt .ftop .pill{margin-left:auto}
.fmt .where{font-size:13.5px; color:var(--ink-2); line-height:1.5}
.fmtprev{display:flex; gap:12px; align-items:flex-start}
.scr{width:104px; flex:0 0 auto; border:1.5px solid var(--rule); border-radius:10px; padding:6px; background:var(--surface-2);
  display:flex; flex-direction:column; gap:5px}
.scrbar{height:9px; border-radius:3px; background:var(--rule)}
.scrhole{border:1.5px dashed var(--accent); border-radius:6px; background:var(--accent-soft); color:var(--accent);
  display:flex; align-items:center; justify-content:center; font-size:8px; font-weight:700; letter-spacing:.08em}
.scrline{height:7px; border-radius:3px; background:var(--rule-soft)}
.scrline.s{width:60%}
.reqs{display:grid; grid-template-columns:1fr 1fr; gap:8px 12px; flex:1}
.rq{display:flex; flex-direction:column; gap:1px}
.rq i{font-style:normal; font-size:11.5px; color:var(--ink-3)}
.rq b{font-size:13.5px; font-weight:600}
.fmtfoot{display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding-top:10px; border-top:1px solid var(--rule-soft)}
.fmtfoot .price{font-size:20px; font-weight:700; font-variant-numeric:tabular-nums; display:flex; align-items:baseline; gap:6px}
.fmtfoot .price i{font-style:normal; font-size:12.5px; font-weight:500; color:var(--ink-3)}
.fmtfoot form{display:flex; gap:8px; align-items:center; margin-left:auto}
.fmtfoot select{height:44px; border:1.5px solid var(--field); border-radius:9px; background:var(--surface);
  color:var(--ink); padding:0 10px; font:500 14px "Onest",sans-serif}
.fmtfoot .cta{min-height:44px; padding:0 16px; font-size:14.5px; flex:0 0 auto}
.reqlist{margin:8px 0 0; padding-left:20px}
.reqlist li{font-size:14px; color:var(--ink-2); line-height:1.55; margin-bottom:7px}

.paybox{display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center}
.amount{font-size:34px; font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.qr{width:212px; height:212px; background:#fff; border-radius:12px; padding:10px; display:flex; align-items:center; justify-content:center}
.qr svg,.qr img{width:100%; height:100%}
.paystate{font-size:14px; color:var(--ink-2)}
.upl{display:flex; flex-direction:column; gap:12px; margin-top:10px}
.drop{border:1.5px dashed var(--field); border-radius:11px; min-height:96px; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:7px; font-size:14px; font-weight:600; color:var(--ink-2); cursor:pointer}
.drop input{position:absolute; width:1px; height:1px; opacity:0}
.postform{display:flex; flex-direction:column; gap:14px}
.postform input,.postform select,.postform textarea{border:1.5px solid var(--field); border-radius:9px;
  background:var(--surface); color:var(--ink); padding:11px; font:500 15px "Onest",sans-serif; width:100%}
.postform textarea{min-height:110px; resize:vertical}
/* Галочка не поле ввода: без исключения она растягивалась на всю ширину
   формы, а подпись рядом выдавливало за край карточки. */
.postform input[type="checkbox"],.postform input[type="radio"]{width:22px; height:22px;
  padding:0; border:0; border-radius:0; flex:0 0 auto}
.postform .check{gap:10px; align-items:flex-start}
.postform .check span{flex:1 1 auto; min-width:0}
.hint{font-size:12.5px; color:var(--ink-3)}
/* Стрелки у каруселей: сама полоса листается пальцем, а мышью нужна кнопка */
.arrows{display:none; gap:6px; margin-left:auto; margin-right:12px}
.arrows .arr{width:30px; height:30px; border-radius:8px; border:1px solid var(--rule);
  background:var(--surface); color:var(--ink-2); display:grid; place-items:center; cursor:pointer}
.arrows .arr:hover{color:var(--accent); border-color:var(--accent)}
.arrows .arr[disabled]{opacity:.35; cursor:default}
@media (min-width:760px){ .arrows{display:flex} }

.bugrow{display:flex; gap:11px; align-items:flex-start; padding:12px 14px; border-bottom:1px solid var(--rule-soft)}
.bugrow .t{flex:1; display:flex; flex-direction:column; gap:3px; min-width:0}
.bugrow .t b{font-size:14.5px; font-weight:600; line-height:1.35}
.bugrow .t i{font-style:normal; font-size:12px; color:var(--ink-3)}
.bugrow .cta{min-height:38px; padding:0 12px; font-size:13px}
.modrow{display:flex; flex-direction:column; gap:8px}
.modacts{display:flex; gap:8px}
.modacts .cta{min-height:40px; padding:0 14px; font-size:14px; flex:1}

.bugbtn{position:fixed; right:14px; bottom:calc(14px + env(safe-area-inset-bottom)); z-index:30;
  min-height:44px; padding:0 14px; border-radius:22px; border:1px solid var(--rule); background:var(--surface);
  color:var(--ink-2); font:600 13px "Onest",sans-serif; display:flex; align-items:center; gap:7px;
  box-shadow:var(--shadow); cursor:pointer; opacity:.92}
.bugbtn:hover{opacity:1; color:var(--ink)}
.dlg{border:0; border-radius:16px; padding:0; background:var(--surface); color:var(--ink);
  max-width:460px; width:calc(100% - 32px); box-shadow:0 20px 60px rgba(6,16,26,.35)}
.dlg::backdrop{background:rgba(6,16,26,.55)}
.dlg form{padding:20px; display:flex; flex-direction:column; gap:12px}
.dlg h3{margin:0; font-size:19px; font-weight:700}
.dlg textarea,.dlg input{border:1.5px solid var(--field); border-radius:9px; background:var(--surface);
  color:var(--ink); padding:10px 12px; font:500 15px "Onest",sans-serif; width:100%; resize:vertical}
.dlgrow{display:flex; gap:9px}
.dlgrow .cta{flex:1; min-height:46px}
.dlg .ok{color:var(--ok); font-weight:600; font-size:14px; margin:0}
.svcbody iframe{width:100%; min-height:420px; border:0; border-radius:10px; background:#fff}
.svc a.on{border-color:var(--accent); color:var(--accent)}
.cta.disabled{opacity:.5; pointer-events:none}
.citypick{position:relative}
.citypick summary{list-style:none; cursor:pointer}
.citypick summary::-webkit-details-marker{display:none}
.citymenu{position:absolute; top:38px; left:0; z-index:40; background:var(--surface); border:1px solid var(--rule);
  border-radius:11px; padding:6px; min-width:170px; box-shadow:var(--shadow); display:flex; flex-direction:column}
.citymenu a{min-height:42px; display:flex; align-items:center; padding:0 12px; border-radius:8px;
  font-size:14.5px; color:var(--ink)}
.citymenu a.on{background:var(--accent-soft); color:var(--accent); font-weight:600}

@media (min-width:760px){
  .feedgrid{display:grid; grid-template-columns:250px minmax(0,1fr) 300px; gap:20px; align-items:start}
  .adgrid{display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:24px; align-items:start}
  .firmgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fmts{grid-template-columns:1fr 1fr}
  .pagehead h1{font-size:31px}
  .adhead h1{font-size:28px}
}

/* Заголовки и карточки, добавленные вместе с поисковой разметкой */
.pageh1{margin:0; padding:12px 0 2px; font-size:15px; font-weight:600; line-height:1.3;
        letter-spacing:-.005em; color:var(--ink-2)}
.intro{margin:0 0 12px; font-size:14px; line-height:1.5; color:var(--ink-3); max-width:70ch}
.snavh{margin:0; padding:12px 0 0; font-size:15px; font-weight:600; color:var(--ink-2)}
.snav span{font-size:12px; font-weight:700; letter-spacing:.06em; color:var(--ink-4, var(--ink-3)); opacity:.55}
a.card.firm{text-decoration:none; color:inherit; transition:border-color .15s ease}
a.card.firm:hover{border-color:var(--accent)}
.firm.one .about{margin:0; font-size:15px; line-height:1.55; color:var(--ink-2)}
.frow.col{flex-direction:column; align-items:flex-start; gap:7px}
.firm .rb{text-decoration:none}
@media (min-width:860px){ .pageh1{font-size:17px; padding:14px 0 0} }
.svc.big a{flex-direction:column; align-items:flex-start; gap:6px; min-height:78px; padding:12px 13px}
.svc.big a i{font-style:normal; font-size:12px; color:var(--ink-3); line-height:1.3}

/* Заглушка вместо фотографии: наш знак и подпись, чтобы пустое место
   читалось как «фото нет», а не как недогрузившаяся картинка. */
.noimg{position:relative; overflow:hidden; background:var(--tint-a)}
.noimg::before{content:''; position:absolute; inset:0;
  background:url(/static/img/mark-128.png) no-repeat center 34% / 42% auto; opacity:.42}
.noimg i{position:absolute; left:0; right:0; bottom:7px; text-align:center; font-style:normal;
  font-size:10px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3)}
.adrow .noimg::before{background-size:46px auto}
.gal .big.noimg.tall{aspect-ratio:4/3; border-radius:12px; display:block}
.gal .big.noimg::before{background-size:96px auto; background-position:center 38%}
.gal .big.noimg i{bottom:16px; font-size:12px}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .noimg::before{background-image:url(/static/img/mark-dark-128.png); opacity:.34}
}
:root[data-theme="dark"] .noimg::before{background-image:url(/static/img/mark-dark-128.png); opacity:.34}

/* Лента уведомлений ПТВС: дата слева, суть справа. Читается списком,
   потому что смотрят её ради «когда отключат», а не ради картинок. */
.ptvs{display:flex; flex-direction:column; gap:8px}
.ptvs .pt{display:flex; gap:12px; background:var(--surface); border:1px solid var(--rule);
  border-radius:12px; padding:12px 13px; text-decoration:none; color:inherit}
.ptvs .pt:hover{border-color:var(--accent)}
.ptvs .d{flex:0 0 auto; width:78px; font-size:12.5px; font-weight:600; color:var(--accent);
  font-variant-numeric:tabular-nums; padding-top:2px}
.ptvs .t{display:flex; flex-direction:column; gap:5px; min-width:0}
.ptvs .t b{font-size:15px; font-weight:600; line-height:1.32; text-wrap:pretty}
.ptvs .t i{font-style:normal; font-size:13.5px; line-height:1.5; color:var(--ink-2)}
@media (max-width:520px){
  .ptvs .pt{flex-direction:column; gap:5px}
  .ptvs .d{width:auto}
}

/* Рекламный баннер на главной: картинка кроется по слоту, а слот
   держит ровное соотношение, чтобы макет не прыгал до загрузки.
   Мобильный слот 4:3, десктопный 6:1 — это и есть требования к макету. */
.banner .slide picture{display:block; width:100%; height:100%}
.banner .slide img{width:100%; height:100%; object-fit:cover; display:block; border-radius:0}
.banner .slide .erid{position:absolute; right:8px; top:8px; background:rgba(6,16,26,.6); color:#fff;
  font-size:9.5px; letter-spacing:.04em; padding:2px 6px; border-radius:5px; z-index:1}
.banner .slide:has(picture){position:relative}
.banner .slide:has(img){padding:0; gap:0}

/* Админка: источники новостей */
.srcrow{display:flex; gap:12px; align-items:flex-start; justify-content:space-between;
  background:var(--surface); border:1px solid var(--rule); border-radius:12px; padding:11px 13px; flex-wrap:wrap}
.srcrow.off{opacity:.5}
.srcrow .t{display:flex; flex-direction:column; gap:3px; min-width:0; flex:1 1 320px}
.srcrow .t b{font-size:15px; font-weight:600}
.srcrow .t i{font-style:normal; font-size:12.5px; color:var(--ink-3); word-break:break-word}
.srcrow .t i.err{color:var(--warn, #C2410C)}
.srcrow .acts{display:flex; gap:7px; flex-wrap:wrap}
.srcrow .acts .cta{height:32px; padding:0 11px; font-size:13px}
.addsrc{display:flex; flex-direction:column; gap:10px; margin-top:12px}
.addsrc .two{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:10px}

/* Второе рекламное место на главной: баннеры идут друг за другом,
   без карусели. Так их видно все сразу и ничего не надо листать. */
.banner.col{display:flex; flex-direction:column; gap:0}
.banner.col .place{display:block; position:relative; aspect-ratio:6/5; overflow:hidden;
  border-top:1px solid var(--ad-line)}
.banner.col .place:first-of-type{border-top:0}
.banner.col .place img{width:100%; height:100%; object-fit:cover; display:block}
.banner.col .erid{position:absolute; right:6px; top:6px; background:rgba(6,16,26,.62); color:#fff;
  font-size:9.5px; letter-spacing:.04em; padding:2px 6px; border-radius:5px}
.banner.col .place.empty2{display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:7px; text-align:center; padding:20px; background:var(--surface-2); aspect-ratio:6/5}
.banner.col .place.empty2 b{font-size:17px; font-weight:700}
.banner.col .place.empty2 i{font-style:normal; font-size:13.5px; color:var(--ink-2); max-width:28ch; line-height:1.45}
.banner.col .place.empty2 em{font-style:normal; font-size:15px; font-weight:700; color:var(--accent)}

/* Заголовок главной: одна строка обещания и одна строка расшифровки.
   Держим компактным, чтобы городские сервисы остались на первом экране. */
.pagelead{padding:12px 0 2px}
.pagelead h1{margin:0; font-size:16px; font-weight:700; line-height:1.28; letter-spacing:-.01em}
.pagelead p{margin:3px 0 0; font-size:13px; line-height:1.4; color:var(--ink-3)}
@media (min-width:860px){
  .pagelead{padding:16px 0 2px}
  .pagelead h1{font-size:20px}
  .pagelead p{font-size:14px}
}

/* Служебный вход: нужен редко, поэтому спрятан за раскрывашкой */
.keyin{margin-top:18px; font-size:13px; color:var(--ink-3)}
.keyin summary{cursor:pointer; padding:6px 0}
.keyin form{display:flex; flex-direction:column; gap:9px; max-width:360px; padding-top:6px}
.ptvs .pt.past{opacity:.55}
.ptvs .t u{text-decoration:none; font-size:12.5px; color:var(--accent); font-weight:600}
.ptvs .d i{display:block; font-style:normal; font-size:11px; font-weight:500; color:var(--ink-3)}
.svcform{display:flex; flex-direction:column; gap:11px}
.svcform textarea{min-height:150px; font:13px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;
  border:1.5px solid var(--field); border-radius:9px; background:var(--surface); color:var(--ink); padding:10px 11px; width:100%}
.svcform .dlgrow{display:flex; gap:9px; justify-content:flex-end}
.svcbody table{width:100%; border-collapse:collapse; margin:8px 0 14px}
.svcbody td{padding:9px 10px; border-bottom:1px solid var(--rule); font-size:14.5px; vertical-align:top}
.svcbody td:first-child{width:110px; white-space:nowrap; font-variant-numeric:tabular-nums}
.svcbody h3{font-size:16px; margin:0 0 6px}
.svcbody p{font-size:14.5px; line-height:1.55; margin:0 0 10px}
.payform{display:flex; flex-direction:column; gap:11px; width:100%; margin:4px 0 2px}
.payform input{height:44px; border:1.5px solid var(--field); border-radius:9px; background:var(--surface);
  color:var(--ink); padding:0 11px; font:500 15px "Onest",sans-serif; width:100%; box-sizing:border-box}
.note.warn{color:var(--warn,#C2410C); font-weight:500}
.note.ok2{color:var(--ok,#1F8A5B); font-weight:600; font-size:14.5px}
/* «Это моё объявление»: кнопка нужна, но выпячивать её незачем */
.minebtn{display:block; width:100%; margin-top:4px; background:none; border:0; padding:8px 0;
  font:500 12.5px "Onest",sans-serif; color:var(--ink-3); text-decoration:underline;
  text-underline-offset:3px; cursor:pointer}
.minebtn:hover{color:var(--ink-2)}
.banner.col .place.wide{aspect-ratio:2/1}
.banner.col .place.wide.empty2{aspect-ratio:auto; min-height:118px; padding:18px}
@media (min-width:760px){ .banner.col .place.wide{aspect-ratio:6/1} }
/* Номер объявления и «поделиться» стоят в одной строке с просмотрами */
.adhead .meta{display:flex; flex-wrap:wrap; align-items:center; gap:5px}
.adhead .meta svg{vertical-align:-2px}
.adhead .num{font-variant-numeric:tabular-nums; font-weight:600; color:var(--ink-2)}
.share{display:inline-flex; align-items:center; gap:4px; background:none; border:0; padding:2px 0 2px 6px;
  font:600 12.5px "Onest",sans-serif; color:var(--accent); cursor:pointer}
.share:hover{text-decoration:underline; text-underline-offset:3px}
.blk{display:inline-block; font-size:10.5px; font-weight:700; letter-spacing:.03em; padding:1px 7px;
  border-radius:20px; margin-right:5px; text-transform:uppercase}
.blk.city{background:var(--accent-soft); color:var(--accent)}
.blk.media{background:var(--surface-2); color:var(--ink-3)}

/* Дерево рубрик в ленте: как в больших досках, рубрика раскрывается
   подрубриками только когда в ней стоишь. */
.cattree{display:flex; flex-direction:column; padding:6px 4px}
.cattree a{display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:8px;
  font-size:14px; color:var(--ink-2); min-height:38px}
.cattree a.top{font-weight:600; color:var(--ink)}
.cattree a:hover{background:var(--surface-2)}
.cattree a.on{background:var(--accent-soft); color:var(--accent)}
.cattree .cnt{margin-left:auto; font-size:12px; font-weight:500; color:var(--ink-3); font-variant-numeric:tabular-nums}
.cattree a.on .cnt{color:var(--accent)}
.cattree .subs{display:flex; flex-direction:column; margin:0 0 4px 26px; border-left:1px solid var(--rule); padding-left:6px}
.cattree .subs a{font-size:13.5px; min-height:34px; padding:6px 9px}
.pricefilter{display:flex; flex-direction:column; gap:12px}
.pricefilter input{height:44px; border:1.5px solid var(--field); border-radius:9px; background:var(--surface);
  color:var(--ink); padding:0 11px; font:500 15px "Onest",sans-serif; width:100%; box-sizing:border-box}

/* Радио: список станций с кнопкой воспроизведения */
.radio{display:flex; flex-direction:column; gap:10px; padding:14px}
.radio .st{display:flex; align-items:center; gap:13px; padding:10px; border-radius:12px;
  border:1px solid var(--rule); background:var(--surface-2)}
.radio .st.on{border-color:var(--accent); background:var(--accent-soft)}
.radio .play{flex:0 0 auto; width:48px; height:48px; border-radius:50%; border:0; cursor:pointer;
  background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center}
.radio .play:hover{filter:brightness(1.08)}
.radio .t{display:flex; flex-direction:column; gap:2px; min-width:0}
.radio .t b{font-size:15.5px; font-weight:700}
.radio .t i{font-style:normal; font-size:12.5px; color:var(--ink-3); line-height:1.4}
.radio .t .state{text-decoration:none; font-size:11.5px; font-weight:600; color:var(--accent);
  text-transform:uppercase; letter-spacing:.04em}
.radio .src{margin-left:auto; font-size:12.5px; color:var(--ink-3); white-space:nowrap}
.radio .vol{display:flex; align-items:center; gap:10px; font-size:13px; color:var(--ink-3); padding:2px}
.radio .vol input{flex:1; accent-color:var(--accent)}
.svcbody iframe, .radio iframe{width:100%; aspect-ratio:16/9; border:0; border-radius:12px; display:block}
.myad .acts form{display:contents}
.myad .acts button{display:inline-flex; align-items:center; gap:5px; background:none; border:0;
  font:600 13px "Onest",sans-serif; color:var(--ink-2); cursor:pointer; padding:8px 6px}
.myad .acts button:hover{color:var(--accent)}
/* «Продал» это хорошая новость, а не служебное действие: цвет как у метки */
.myad .acts button.good{color:var(--ok)}
.myad .acts button.good:hover{color:var(--ok)}
.myad a.body{text-decoration:none; color:inherit}
/* Код входа: крупно, чтобы прочитать с телефона в руке */
.codebox{display:flex; flex-direction:column; gap:10px; align-items:center; text-align:center; padding:22px 18px}
.codebox .code{font:800 40px/1 "Onest",sans-serif; letter-spacing:.16em; color:var(--accent);
  background:var(--accent-soft); border-radius:12px; padding:14px 20px; font-variant-numeric:tabular-nums}
.codebox .ways{display:flex; flex-direction:column; gap:9px; width:100%}
.codebox .ways .cta{flex:0 0 auto; width:100%}
.codebox .sub, .codebox .note{max-width:38ch}
/* Код спрятан: в обычном случае его никто не набирает, ссылка подставляет
   его сама. Он нужен только когда приложение не открылось. */
.codebox .codehelp{width:100%; border-top:1px solid var(--rule); margin-top:4px; padding-top:12px}
.codebox .codehelp summary{cursor:pointer; list-style:none; font-size:13px; color:var(--ink-3); padding:4px 0}
.codebox .codehelp summary::-webkit-details-marker{display:none}
.codebox .codehelp summary::after{content:' ⌄'; font-size:15px}
.codebox .codehelp .code{margin:12px auto 8px; display:inline-block}
.codebox .codehelp .note{margin:0 auto 8px}
.codebox .vkway{width:100%}
.codebox .vkway summary{cursor:pointer; list-style:none; display:flex; align-items:center; gap:8px;
  justify-content:center; min-height:48px; border-radius:11px; background:var(--surface);
  border:1.5px solid var(--field); color:var(--ink); font-size:16px; font-weight:600}
.codebox .vkway[open] summary{margin-bottom:10px}
.codebox .vkway summary::-webkit-details-marker{display:none}
.codebox .vkway .code{margin:8px auto; display:inline-block; font-size:32px}
.codebox .vkway .note{margin:0 auto 6px}
/* Афиша: обложка мероприятия слева, дата первой строкой в тексте */
.ptvs .pt.ev{align-items:flex-start; flex-direction:row; gap:12px}
.ptvs .cover{width:96px; height:96px; flex:0 0 auto; border-radius:10px; object-fit:cover;
  background:var(--tint-a); display:block}
.ptvs .pt.ev .when{font-size:12.5px; font-weight:700; color:var(--accent); font-variant-numeric:tabular-nums}
.ptvs .pt.ev.past .when{color:var(--ink-3)}
@media (max-width:520px){ .ptvs .cover{width:76px; height:76px} }

/* Подсказка про VPN: снизу, над кнопкой «Ошибка?», убирается навсегда */
.vpntip{display:flex; gap:10px; align-items:flex-start; background:var(--surface);
  border:1px solid var(--rule); border-radius:14px; box-shadow:var(--shadow);
  padding:12px 12px 12px 13px; font-size:13px; line-height:1.45; color:var(--ink-2);
  transform:translateY(10px); opacity:0; transition:opacity .25s ease, transform .25s ease;
  max-width:420px}
.vpntip.on{transform:none; opacity:1}
.vpntip span{display:flex; gap:8px; align-items:flex-start}
.vpntip svg{flex:0 0 auto; margin-top:1px}
.vpntip button{flex:0 0 auto; background:none; border:0; color:var(--ink-3); cursor:pointer;
  padding:2px; line-height:0}
.vpntip button:hover{color:var(--ink)}

/* Телефон прямо в карточке автора: чаще всего человек ищет именно его */
.seller{flex-wrap:wrap}
.seller .tel{display:flex; align-items:center; gap:8px; margin-left:auto; padding:9px 14px;
  border-radius:10px; background:var(--accent-soft); color:var(--accent); text-decoration:none;
  font-variant-numeric:tabular-nums; white-space:nowrap}
.seller .tel b{font-size:16px; font-weight:700}
.seller .tel:hover{filter:brightness(.97)}
@media (max-width:520px){
  .seller .tel{margin-left:0; width:100%; justify-content:center; margin-top:2px}
}

/* Карточка объявления. На телефоне цена и телефон не должны повторяться:
   цена уже стоит в заголовке, телефон в карточке автора. Поэтому в нижнем
   блоке остаются только действия, а «Похожие» уходят под него. */
@media (max-width:759px){
  .adgrid .buy .price.big{display:none}
  .adgrid .buy{padding-top:14px}
}
@media (min-width:760px){
  /* Колонки задаём явно: с автоматической расстановкой блоки менялись местами */
  .adgrid > div:first-child{grid-column:1; grid-row:1}
  .adgrid > aside.side{grid-column:2; grid-row:1}
  .adgrid > .similar{grid-column:1; grid-row:2}
}

/* Каталог на главной: карусель, потому что четыре карточки это витрина,
   а не список, и листать её привычнее, чем скроллить страницу. */
.hscroll{display:flex; gap:10px; overflow-x:auto; scroll-snap-type:x proximity;
  scrollbar-width:none; padding:2px 0 4px; margin:0 -16px; padding-left:16px; padding-right:16px}
.hscroll::-webkit-scrollbar{display:none}
.fcard{flex:0 0 74%; max-width:280px; scroll-snap-align:start; display:flex; flex-direction:column;
  gap:4px; background:var(--surface); border:1px solid var(--rule); border-radius:12px; padding:13px}
.fcard b{font-size:15px; font-weight:600; line-height:1.3}
.fcard s{text-decoration:none; font-size:11px; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; color:var(--accent)}
.fcard i{font-style:normal; font-size:13px; color:var(--ink-3); line-height:1.4}
.fcard em{font-style:normal; font-size:14px; font-weight:600; color:var(--ink-2); margin-top:auto;
  font-variant-numeric:tabular-nums}
.ptvs .t i.full{white-space:pre-line}
@media (min-width:760px){
  .hscroll{margin:0; padding-left:0; padding-right:0}
  .fcard{flex:0 0 260px}
}

/* Блок про рекламу: отдельная карточка, без ценника на самих местах */
.adpitch{display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  background:var(--surface); border:1px dashed var(--ad-line); border-radius:14px; padding:16px;
  text-decoration:none; color:inherit}
.adpitch:hover{border-color:var(--accent)}
.adpitch .t{display:flex; flex-direction:column; gap:5px; min-width:220px; flex:1}
.adpitch .t b{font-size:16px; font-weight:700}
.adpitch .t i{font-style:normal; font-size:13.5px; line-height:1.5; color:var(--ink-2); max-width:60ch}
.adpitch .go{display:flex; align-items:center; gap:6px; font-size:14px; font-weight:600; color:var(--accent);
  white-space:nowrap}
.reset.card{display:flex; align-items:center; justify-content:center; min-height:44px;
  font-size:14px; font-weight:600; color:var(--ink-2)}

/* Городские сообщества */
.vkgroups{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:10px}
.vkg{display:flex; gap:12px; align-items:center; background:var(--surface); border:1px solid var(--rule);
  border-radius:12px; padding:12px; text-decoration:none; color:inherit}
.vkg:hover{border-color:var(--accent)}
.vkg img, .vkg .ava{width:46px; height:46px; flex:0 0 auto; border-radius:50%; object-fit:cover;
  background:var(--accent-soft); display:grid; place-items:center}
.vkg .t{display:flex; flex-direction:column; gap:2px; min-width:0}
.vkg .t b{font-size:15px; font-weight:600}
.vkg .t i{font-style:normal; font-size:12.5px; color:var(--ink-3); line-height:1.35}
.vkg .t s{text-decoration:none; font-size:11.5px; color:var(--accent); font-weight:600}

/* Мини-плеер радио: живёт на всех страницах, пока эфир включён */
.miniplayer{display:flex; gap:11px; align-items:center; background:var(--bar); color:#fff;
  border-radius:14px; padding:9px 10px 9px 9px; box-shadow:var(--shadow); width:100%; max-width:420px}
.miniplayer .mp-play{flex:0 0 auto; width:40px; height:40px; border-radius:50%; border:0; cursor:pointer;
  background:var(--accent); color:#fff; display:grid; place-items:center}
.miniplayer .mp-t{display:flex; flex-direction:column; gap:1px; min-width:0; flex:1}
.miniplayer .mp-t b{font-size:14px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.miniplayer .mp-t i{font-style:normal; font-size:11.5px; color:var(--bar-ink); letter-spacing:.02em}
.miniplayer.live .mp-t i{color:#5BC59A; font-weight:600}
.miniplayer .mp-go, .miniplayer .mp-x{flex:0 0 auto; background:none; border:0; color:var(--bar-ink);
  cursor:pointer; line-height:0; width:40px; height:40px; border-radius:10px;
  display:grid; place-items:center}
.miniplayer .mp-x:hover, .miniplayer .mp-go:hover{background:rgba(255,255,255,.1)}
.miniplayer .mp-go:hover, .miniplayer .mp-x:hover{color:#fff}
/* Подсказка про VPN уступает место плееру, если он на экране */
@media (min-width:760px){ .miniplayer{width:340px} }

/* Расписание автобусов: направление сворачивается, времена идут плитками */
.svcbody .rt{border:1px solid var(--rule); border-radius:12px; margin:0 0 10px; background:var(--surface)}
.svcbody .rt-h{display:flex; align-items:center; gap:10px; flex-wrap:wrap; cursor:pointer;
  padding:13px 14px; font-size:15px; font-weight:700; list-style:none}
.svcbody .rt-h::-webkit-details-marker{display:none}
.svcbody .rt-h::after{content:'⌄'; margin-left:auto; color:var(--ink-3); font-size:18px; line-height:1}
.svcbody .rt[open] .rt-h::after{content:'⌃'}
.svcbody .rt-h s{text-decoration:none; font-size:11px; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; color:var(--accent); background:var(--accent-soft);
  padding:2px 8px; border-radius:20px}
.svcbody .rt-n{margin:0; padding:0 14px 10px; font-size:12.5px; color:var(--ink-3); line-height:1.5}
.svcbody .rt-stops{display:flex; flex-direction:column; border-top:1px solid var(--rule-soft)}
.svcbody .rt-s{display:flex; gap:12px; padding:9px 14px; border-bottom:1px solid var(--rule-soft);
  align-items:baseline; flex-wrap:wrap}
.svcbody .rt-s:last-child{border-bottom:0}
.svcbody .rt-s .nm{flex:0 0 170px; font-size:13.5px; font-weight:600; color:var(--ink)}
.svcbody .rt-s .tt{display:flex; flex-wrap:wrap; gap:4px; min-width:0; flex:1;
  font-size:13px; color:var(--ink-2)}
.svcbody .rt-s .tt i{font-style:normal; font-variant-numeric:tabular-nums;
  background:var(--surface-2); border-radius:6px; padding:2px 6px}
.svcbody .rt.open{padding-bottom:2px}
@media (max-width:600px){ .svcbody .rt-s .nm{flex:0 0 100%} }


/* Все плавающие элементы в одной колонке справа снизу: подсказка, плеер
   и кнопка «Ошибка?». Порознь они наезжали друг на друга. */
.floaters{position:fixed; right:12px; bottom:12px; left:12px; z-index:9;
  display:flex; flex-direction:column; align-items:flex-end; gap:8px; pointer-events:none}
.floaters > *{pointer-events:auto}
.floaters .bugbtn{position:static; margin:0}
@media (min-width:760px){ .floaters{left:auto; right:16px; bottom:16px; width:420px} }

/* Фильтр расписания: маршрут и день недели */
.busfilter{display:flex; flex-direction:column; gap:8px; margin:0 0 14px}
.busfilter .row{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.busfilter .lbl{font-size:12px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--ink-3); flex:0 0 74px}
.busfilter .chips{display:flex; gap:6px; flex-wrap:wrap}
.busfilter button{height:34px; padding:0 13px; border-radius:20px; border:1px solid var(--rule);
  background:var(--surface); color:var(--ink-2); font:600 13.5px "Onest",sans-serif; cursor:pointer}
.busfilter button:hover{border-color:var(--accent)}
.busfilter button.on{background:var(--accent); border-color:var(--accent); color:#fff}
/* Порядок в колонке: подсказка сверху, плеер под ней, кнопка ошибки внизу */
.floaters .vpntip{order:1}
.floaters .miniplayer{order:2}
.floaters .bugbtn{order:3}
.ok2note{display:flex; gap:10px; align-items:flex-start; font-size:14px; line-height:1.5; color:var(--ink-2)}
.ok2note b{color:var(--ink)}
.tipnote{display:flex; gap:11px; align-items:center; flex-wrap:wrap; font-size:14px;
  line-height:1.5; color:var(--ink-2)}
.tipnote b{color:var(--ink)}
.tipnote > span{flex:1 1 240px; min-width:0}
.tipnote .cta{flex:0 0 auto; padding:0 18px; min-height:40px; font-size:15px}
/* Всё привязано: зелёная точка читается быстрее любой подписи */
.rows .cnt.ok{display:inline-flex; align-items:center; gap:7px; color:var(--ok)}
.rows .cnt.ok s{width:8px; height:8px; border-radius:50%; background:var(--ok); display:block}
/* ── Личные сообщения ──────────────────────────────────────────────────── */
/* Счётчик на иконке кабинета: письмо приходит, пока человек ходит по сайту */
.cnum{position:absolute; top:-5px; right:-5px; min-width:18px; height:18px; padding:0 5px;
  border-radius:9px; background:#D64545; color:#fff; font-size:11px; font-weight:700;
  line-height:18px; text-align:center; border:2px solid var(--surface); box-sizing:content-box}
.unr{margin-left:auto; min-width:22px; height:22px; padding:0 7px; border-radius:11px;
  background:var(--accent); color:#fff; font-size:12px; font-weight:700;
  display:inline-flex; align-items:center; justify-content:center}
.av.sm{width:38px; height:38px; flex:0 0 auto; border-radius:50%; background:var(--accent-soft);
  color:var(--accent); display:grid; place-items:center; font-size:15px; font-weight:700}
img.av.sm{object-fit:cover; display:block}
.thr{display:flex; align-items:center; gap:11px; padding:11px 14px; min-height:58px}
.thr .t{display:flex; flex-direction:column; gap:2px; min-width:0; flex:1 1 auto}
.thr .t b{font-size:15px; font-weight:600}
.thr .t u{text-decoration:none; font-size:12px; color:var(--accent)}
.thr .t i{font-style:normal; font-size:13px; color:var(--ink-3); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis}
.frq{display:flex; align-items:center; gap:10px; padding:10px 14px; flex-wrap:wrap}
.frq b{font-size:15px; font-weight:600; flex:1 1 auto; min-width:0}
.cta.sm{min-height:36px; padding:0 14px; font-size:14px; border-radius:9px}
.talk{display:flex; flex-direction:column; gap:8px}
.tmsg{max-width:78%; padding:9px 12px; border-radius:14px; font-size:14.5px; line-height:1.45}
.tmsg .b{white-space:pre-wrap; overflow-wrap:anywhere; display:block}
.tmsg i{display:block; font-style:normal; font-size:11px; opacity:.65; padding-top:3px}
.tmsg.me{align-self:flex-end; background:var(--accent); color:#fff; border-bottom-right-radius:5px}
.tmsg.them{align-self:flex-start; background:var(--surface); border:1px solid var(--rule);
  border-bottom-left-radius:5px}
.sendform{display:flex; flex-direction:column; gap:10px}
.sendform textarea{border:1.5px solid var(--field); border-radius:9px; background:var(--surface);
  color:var(--ink); padding:11px; font:500 15px "Onest",sans-serif; resize:vertical; min-height:80px}
.adref{display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit}
.adref .t{display:flex; flex-direction:column; gap:2px; min-width:0}
.adref u{text-decoration:none; font-size:12px; color:var(--ink-3)}
.adref b{font-size:15px; font-weight:600}
.adref .pr{margin-left:auto; font-weight:700; white-space:nowrap}
/* ── Сделки и отзывы ───────────────────────────────────────────────────── */
.stars{color:#E0A32E; font-size:16px; letter-spacing:1px; white-space:nowrap; line-height:1}
.stars.sm{font-size:13px; margin-left:auto}
.rev{display:flex; flex-direction:column; gap:9px}
.rev p{margin:0; font-size:15px; line-height:1.55; color:var(--ink-2); overflow-wrap:anywhere}
.rhead{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.rhead .who{font-size:14.5px; font-weight:600; color:var(--ink); text-decoration:none}
.rhead .cnt{margin-left:auto; font-size:12.5px; color:var(--ink-3)}
.rev .what{font-size:13px; color:var(--accent); text-decoration:none}
.rev .rreply{padding-left:12px; border-left:2px solid var(--rule); font-size:14.5px}
.rev .rreply b{color:var(--ink)}
.rev .rflag{font-size:13px; color:var(--warn, #B0761C)}
.revlist{display:flex; flex-direction:column; gap:10px}
.rform{display:flex; gap:9px; align-items:flex-end; flex-wrap:wrap}
.rform textarea{flex:1 1 220px; min-height:56px; border:1.5px solid var(--field); border-radius:9px;
  background:var(--surface); color:var(--ink); padding:9px 11px; font:500 14.5px "Onest",sans-serif;
  resize:vertical}
.linkbtn{background:none; border:0; padding:4px 0; cursor:pointer; align-self:flex-start;
  font:500 13px "Onest",sans-serif; color:var(--ink-3); text-decoration:underline}
.linkbtn:hover{color:var(--accent)}

.starpick{border:0; margin:0; padding:0; display:flex; flex-direction:column; gap:2px}
.starpick legend{padding:0 0 6px; font-size:13px; font-weight:600; color:var(--ink-2)}
.starpick label{display:flex; align-items:center; gap:10px; min-height:40px; cursor:pointer}
.starpick input{width:20px; height:20px; flex:0 0 auto; accent-color:var(--accent)}
.starpick span{color:#E0A32E; font-size:19px; letter-spacing:2px}

.pickrow{display:flex; align-items:center; gap:11px; padding:10px 14px; min-height:56px; cursor:pointer}
.pickrow input{width:20px; height:20px; flex:0 0 auto; accent-color:var(--accent)}
.pickrow b{font-size:15px; font-weight:600}
a.card.seller{text-decoration:none; color:inherit}
a.card.seller:hover{border-color:var(--accent)}
.avarow{display:flex; align-items:center; gap:14px}
.avarow .av{width:64px; height:64px; flex:0 0 auto; border-radius:50%; background:var(--accent-soft);
  color:var(--accent); display:grid; place-items:center; font-size:24px; font-weight:700}
.avarow img.av{object-fit:cover; display:block}
.avarow .grow{flex:1 1 auto; min-width:0}
.postform input[type="file"]{padding:9px}
/* Кадрирование портрета: круг показывает ровно то, что увидят другие */
.cropper{display:flex; flex-direction:column; gap:10px; align-items:center;
  padding:14px; border:1px dashed var(--field); border-radius:12px}
.cropview{width:240px; height:240px; border-radius:50%; overflow:hidden; position:relative;
  background:var(--surface-2); cursor:grab; touch-action:none; user-select:none}
.cropview.drag{cursor:grabbing}
.cropview img{position:absolute; left:0; top:0; transform-origin:0 0; max-width:none;
  pointer-events:none}
.croprow{display:flex; align-items:center; gap:12px; width:100%; max-width:280px}
.croprow span{font-size:13px; color:var(--ink-3); white-space:nowrap}
.croprow input[type="range"]{flex:1 1 auto; width:auto; padding:0; border:0; accent-color:var(--accent)}
/* Наши сообщества в подвале */
.soc{display:flex; gap:10px; flex-wrap:wrap; padding:16px 0 4px}
.soc a{display:inline-flex; align-items:center; gap:8px; min-height:40px; padding:0 14px;
  border:1px solid var(--rule); border-radius:10px; color:var(--ink-2); font-size:14px;
  font-weight:600; text-decoration:none}
.soc a:hover{color:var(--accent); border-color:var(--accent)}
/* Полоса про cookie: показывается один раз, ответ живёт в браузере */
.cookiebar{position:fixed; left:0; right:0; bottom:0; z-index:12; display:flex; gap:14px;
  align-items:center; flex-wrap:wrap; justify-content:center; padding:14px 16px;
  background:var(--bar); color:var(--bar-ink); font-size:13.5px; line-height:1.5;
  box-shadow:0 -6px 24px rgba(0,0,0,.18)}
.cookiebar > span:first-child{max-width:720px}
.cookiebar a{color:#fff; text-decoration:underline}
.cookiebar .cbtn{display:flex; gap:9px; align-items:center; flex:0 0 auto}
.cookiebar button{min-height:38px; padding:0 16px; border-radius:9px; cursor:pointer;
  font:600 14px "Onest",sans-serif}
.cookiebar #cookieno{background:none; border:1px solid rgba(255,255,255,.35); color:#fff}
.cookiebar .cta{border:0; min-height:38px}
body.has-cookiebar .floaters{bottom:88px}
.rows .delrow{display:contents}
.rows .delrow button{display:flex; align-items:center; gap:10px; width:100%; min-height:44px;
  padding:0 16px; background:none; border:0; cursor:pointer;
  font:500 14.5px "Onest",sans-serif; color:#C0453C}
.advbox{display:flex; flex-direction:column; gap:10px; padding:13px; border:1px solid var(--rule);
  border-radius:12px; background:var(--surface-2)}
.advbox b{font-size:14.5px}
.advbox .sub{font-size:12.5px; line-height:1.5}
/* Правила размещения: длинный список, поэтому свёрнут */
.rules summary{cursor:pointer; display:flex; flex-direction:column; gap:2px; list-style:none}
.rules summary::-webkit-details-marker{display:none}
.rules summary b{font-size:16px}
.rules summary::after{content:'Развернуть'; font-size:12.5px; font-weight:600; color:var(--accent); margin-top:4px}
.rules[open] summary::after{content:'Свернуть'}
.rulelist{margin:4px 0 10px; padding-left:20px; display:flex; flex-direction:column; gap:5px}
.rulelist li{font-size:13.5px; line-height:1.5; color:var(--ink-2)}
.svc .svcimg{height:22px; width:auto; max-width:74px; object-fit:contain; display:block}