:root{--bg:#f4f5f7;--card:#fff;--line:#e3e6ea;--txt:#1f2933;--muted:#6b7680;--accent:#2563eb;}
*{box-sizing:border-box}
/* Фон сайта: картинка на 10% прозрачности.

   Цвет фона стоит на html, а не на body, и это принципиально: body::before с
   z-index:-1 рисуется НАД фоном корневого элемента, но ПОД фоном самого body.
   Если оставить background на body, картинка окажется под ним и не будет видна
   вообще.

   Отдельный fixed-элемент, а не background-attachment:fixed у body: на iOS
   Safari fixed-подложка масштабируется по документу, а не по окну, и картинка
   выглядит увеличенной и дёргается при прокрутке. Пользователь часто заходит
   с телефона, поэтому так.

   Карточки и панели остаются непрозрачными — читаемость важнее, картинка видна
   в отступах и между блоками. */
html{background:var(--bg)}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:transparent;color:var(--txt)}
body::before{
  content:"";
  position:fixed;
  inset:0;
  background:url("/static/bg.jpg") center center / cover no-repeat;
  opacity:.10;
  z-index:-1;
  pointer-events:none;
}
.topbar{display:flex;align-items:center;gap:24px;background:#fff;padding:12px 20px;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
.brand{font-weight:700;font-size:18px;text-decoration:none;color:var(--txt)}
.topbar nav a{margin-right:16px;text-decoration:none;color:var(--muted)}
.topbar nav a:hover{color:var(--accent)}
main{max-width:1100px;margin:0 auto;padding:20px}
.stats{color:var(--muted);margin-bottom:12px;font-size:14px}
.filters{background:#fff;padding:14px;border:1px solid var(--line);border-radius:10px;margin-bottom:18px}
.frow{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:8px}
.frow:last-child{margin-bottom:0}
.lbl{font-size:13px;color:var(--muted);margin-left:4px}
.filters input,.filters select{padding:8px 10px;border:1px solid var(--line);border-radius:8px;font-size:14px}
.filters input[type=number]{width:86px}
.descr{background:#fff;border:1px solid var(--line);border-radius:10px;padding:14px;margin-top:16px;white-space:pre-wrap;font-size:14px;line-height:1.5}
.filters button{background:var(--accent);color:#fff;border:0;border-radius:8px;padding:8px 16px;cursor:pointer}
.filters .reset{align-self:center;color:var(--muted);font-size:13px}
.chk{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden;text-decoration:none;color:inherit;transition:.15s;display:block}
.card:hover{box-shadow:0 6px 20px rgba(0,0,0,.08);transform:translateY(-2px)}
.thumb{height:150px;background:#dde1e6 center/cover no-repeat;position:relative}
.src{position:absolute;top:8px;left:8px;background:rgba(0,0,0,.6);color:#fff;font-size:11px;padding:2px 7px;border-radius:6px;text-transform:lowercase}
.src.city24{background:#0a7d3c}.src.sslv{background:#b8341f}
.inactive{position:absolute;top:8px;right:8px;background:#6b7680;color:#fff;font-size:11px;padding:2px 7px;border-radius:6px}
.body{padding:12px}
.price{font-weight:700;font-size:17px}
.price small{font-weight:400;font-size:12px;color:var(--muted);margin-left:6px}
.title{font-size:14px;margin:4px 0;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.meta{font-size:12px;color:var(--muted)}
.badges{margin-top:7px;display:flex;flex-wrap:wrap;gap:5px}
.badge-series{background:#eef2ff;color:#3244a8;border:1px solid #d5dcfb;font-size:11px;font-weight:600;padding:2px 8px;border-radius:999px}
.badge-arch{background:#f3e8d6;color:#8a5a12;border:1px solid #e6d3b3;font-size:11px;font-weight:600;padding:2px 8px;border-radius:999px}
.related{margin-top:26px}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;vertical-align:middle;margin-right:3px}
.dot.own{background:#2563eb}.dot.other{background:#e08a20}
.empty{grid-column:1/-1;color:var(--muted)}
.pager{display:flex;gap:16px;justify-content:center;align-items:center;margin:24px 0;color:var(--muted)}
.pager a{color:var(--accent);text-decoration:none}
/* detail */
.back{color:var(--muted);text-decoration:none;display:inline-block;margin-bottom:12px}
.detail{display:grid;grid-template-columns:1fr 1fr;gap:24px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px}
.detail-media img{width:100%;border-radius:10px}
.noimg{height:260px;background:#dde1e6;border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--muted)}
.thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:6px;margin-top:8px}
.thumbs img{width:100%;height:56px;object-fit:cover;border-radius:6px;cursor:pointer;border:2px solid transparent;transition:.12s}
.thumbs img:hover{border-color:var(--accent)}
.detail-info h1{font-size:20px;margin:10px 0}
.big-price{font-size:26px;font-weight:700;margin-bottom:14px}
.big-price small{font-size:14px;color:var(--muted);font-weight:400;margin-left:8px}
.props{width:100%;border-collapse:collapse;font-size:14px}
.props td{padding:6px 4px;border-bottom:1px solid var(--line)}
.props td:first-child{color:var(--muted);width:120px}
.ext{display:inline-block;margin-top:14px;color:var(--accent);text-decoration:none;font-weight:600}
h2{margin-top:28px}
#chart{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px;margin:12px 0}
.history{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:8px;font-size:14px}
.history th,.history td{padding:8px 12px;border-bottom:1px solid var(--line);text-align:left}
.muted{color:var(--muted)}
/* subscriptions */
.sub-form{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px;margin:16px 0}
.sub-form .row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.sub-form input,.sub-form select{padding:8px 10px;border:1px solid var(--line);border-radius:8px;font-size:14px;flex:1;min-width:130px}
.sub-form button{background:var(--accent);color:#fff;border:0;border-radius:8px;padding:8px 18px;cursor:pointer}
.subs{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:8px;font-size:14px}
.subs th,.subs td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.filter-cell{font-size:13px;color:#444}
.del{background:#fff;border:1px solid #d66;color:#c33;border-radius:6px;padding:5px 10px;cursor:pointer}
.foot{text-align:center;color:var(--muted);font-size:13px;padding:24px}
/* переключатель языка */
.langs{margin-left:auto;display:flex;gap:4px}
.lang{font-size:12px;font-weight:600;color:var(--muted);text-decoration:none;padding:4px 9px;border:1px solid var(--line);border-radius:7px}
.lang:hover{color:var(--accent);border-color:var(--accent)}
.lang.on{background:var(--accent);color:#fff;border-color:var(--accent)}
/* бейджи продавца */
.badge-owner{background:#e4f6e8;color:#1d6b33;border:1px solid #c6e8d0;font-size:11px;font-weight:600;padding:2px 8px;border-radius:999px}
.badge-agency{background:#eceff3;color:#4a5666;border:1px solid #dbe1e8;font-size:11px;font-weight:600;padding:2px 8px;border-radius:999px}
.small{font-size:12px}
/* карта */
.map{width:100%;height:320px;border:1px solid var(--line);border-radius:12px;background:#eef1f4}
/* лайтбокс */
#mainphoto{cursor:zoom-in}
.thumbs img{cursor:zoom-in}
.lb{display:none;position:fixed;inset:0;background:rgba(12,14,18,.94);z-index:50;align-items:center;justify-content:center}
.lb.open{display:flex}
.lb img{max-width:92vw;max-height:88vh;border-radius:8px;box-shadow:0 10px 40px rgba(0,0,0,.5)}
.lb-btn{position:absolute;color:#fff;cursor:pointer;user-select:none;opacity:.75;transition:.15s}
.lb-btn:hover{opacity:1}
.lb-close{top:14px;right:22px;font-size:30px;line-height:1}
.lb-prev,.lb-next{top:50%;transform:translateY(-50%);font-size:64px;line-height:1;padding:0 18px}
.lb-prev{left:6px}.lb-next{right:6px}
.lb-count{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);color:#fff;opacity:.8;font-size:13px}
@media(max-width:700px){.lb-prev,.lb-next{font-size:44px;padding:0 8px}}
@media(max-width:700px){.detail{grid-template-columns:1fr}}

/* Кадастровая сделка с площадью, близкой к площади этой квартиры. */
.history tr.hl{background:#fff8e1}
.history tr.hl td{font-weight:600}

/* Мобильная шапка. Заголовок «хаты для тебя бич» без переносов ломался в четыре
   строки: у .topbar flex со gap:24px, а сам заголовок сжимался до ширины слова.
   Разрешаем перенос по строкам и не даём заголовку сжиматься. */
@media(max-width:560px){
  .topbar{flex-wrap:wrap;gap:8px 14px;padding:10px 14px}
  .brand{font-size:16px;flex:1 0 100%;white-space:nowrap}
  .topbar nav{flex:1 1 auto}
  .topbar nav a{margin-right:14px;font-size:14px}
  .langs{margin-left:auto}
  main{padding:14px}
  .filters{padding:10px}
  .filters input[type=number]{width:72px}
}

/* Форма подписки. Правило `.sub-form input{flex:1;min-width:130px}` относилось и
   к чекбоксам: каждый растягивался на 130+ пикселей и отрывался от своей подписи.
   Поэтому чекбоксы, подписи и служебные скрытые поля из растягивания исключены. */
.sub-form input[type=checkbox]{flex:0 0 auto;min-width:0;width:16px;height:16px;margin:0}
.sub-form input[type=hidden]{display:none}
.sub-form .chk{flex:0 0 auto;display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted);white-space:nowrap}
.sub-form .lbl{flex:0 0 auto;align-self:center;margin:0}
.sub-form input[type=number]{flex:0 1 110px;min-width:80px}
.sub-form button{flex:0 0 auto}

/* Ссылка «подписаться на этот фильтр» рядом с кнопкой поиска. */
.sub-link{align-self:center;color:var(--accent);text-decoration:none;font-size:13px;font-weight:600}
.sub-link:hover{text-decoration:underline}

/* Подсказки и результат проверки доставки. */
.warn{background:#fff7e6;border:1px solid #f0d9a8;color:#7a5a12;border-radius:10px;padding:12px 14px;margin:14px 0;font-size:14px}
.warn p{margin:8px 0}
.warn pre{background:#fffdf7;border:1px solid #eadfc4;border-radius:6px;padding:8px 10px;overflow-x:auto;font-size:12px;margin:6px 0}
.ok{background:#e9f7ec;border:1px solid #bfe3c8;color:#1d6b33;border-radius:10px;padding:10px 14px;margin:14px 0;font-size:14px}
.sub-actions{display:flex;flex-direction:column;gap:6px}
.test{background:#fff;border:1px solid var(--line);color:var(--txt);border-radius:6px;padding:5px 10px;cursor:pointer}
.test:hover{border-color:var(--accent);color:var(--accent)}
.small{font-size:12px}

/* Таблица подписок на телефоне не влезает — даём ей прокрутку вместо распирания. */
@media(max-width:700px){
  .subs{display:block;overflow-x:auto;white-space:nowrap}
  .sub-form .row{gap:6px}
}