:root{--bg:#0f1216;--fg:#e8ecf1;--dim:#93a0ae;--line:#232a33;--accent:#3ba776}
*{box-sizing:border-box}
/* display:flex у .lightbox сильнее браузерного правила для [hidden] —
   без этой строки закрытый полноэкранный просмотр остаётся на экране. */
[hidden]{display:none!important}
body{margin:0;background:var(--bg);color:var(--fg);
     font:16px/1.45 -apple-system,system-ui,"Segoe UI",Roboto,sans-serif}
header{padding:14px 16px 10px}
.brand{font-size:20px;font-weight:700;letter-spacing:.02em}
.sub{color:var(--dim);font-size:13px}
#promo{margin:0 16px 10px;padding:10px 12px;border-radius:10px;
       background:#1d2a22;border:1px solid #2c4a39;font-size:14px}
.tabs{display:flex;gap:8px;padding:0 16px 10px}
.tab{flex:1;padding:10px;border:1px solid var(--line);border-radius:10px;
     background:#161b21;color:var(--dim);font:inherit;font-size:14px;cursor:pointer}
.tab.is-on{background:#1e2630;color:var(--fg);border-color:#33404e}
.floors{display:flex;gap:6px;padding:0 16px 10px;overflow-x:auto}
.floors button{min-width:44px;height:44px;border-radius:10px;border:1px solid var(--line);
               background:#161b21;color:var(--fg);font:inherit;cursor:pointer}
.floors button.is-on{background:var(--accent);border-color:var(--accent);color:#07120c;font-weight:700}
.tip{margin:0 16px 10px;color:var(--dim);font-size:12px;line-height:1.35}
.stage{position:relative;margin:0 8px;overflow:auto;-webkit-overflow-scrolling:touch}
.sheet{position:relative;display:block;width:100%;min-width:700px}
.sheet img{display:block;width:100%}
/* Номера квартир текущего этажа поверх схемы: на листе напечатаны номера
   второго этажа, а смотреть могут пятый. Бейдж намеренно мелкий и полупрозрачный,
   чтобы не забивать чертёж. */
.marks{position:absolute;inset:0;pointer-events:none}
.mk{position:absolute;transform:translate(-50%,-50%);white-space:nowrap;
    background:rgba(255,255,255,.82);color:#10151b;border-radius:4px;
    padding:0 3px;font:700 9px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace}
/* Цоколь: 56 мест плотно упакованы, а на бумажном чертеже номера машиномест
   НЕ напечатаны — бейдж там единственный источник номера. Чуть мельче бейдж +
   расстановка без коллизий (app.js: declutter) — иначе половина номеров не
   читается. См. константы DENSE_FONT_PX/DENSE_PAD_PX в app.js — их нужно
   держать в синхроне со значениями здесь. */
.marks.dense .mk{font-size:8px;padding:0 2px}
.hint{position:absolute;transform:translate(-50%,-130%);background:#000d;color:#fff;
      padding:5px 8px;border-radius:8px;font-size:12px;pointer-events:none;white-space:nowrap}
.veil{position:fixed;inset:0;background:#000a;z-index:5}
.card{position:fixed;left:0;right:0;bottom:0;z-index:6;background:#141a21;
      border-top-left-radius:16px;border-top-right-radius:16px;padding:16px;
      max-height:88vh;overflow:auto}
.card h3{margin:0 0 6px;font-size:19px}
/* Вид — отдельной строкой-чипом между заголовком и .meta: .meta и так длинная
   («Квартира с отдельной спальней · 41,8 м² · с балконом · 5 этаж») и на
   375px переносится, добавлять туда ещё вид означало бы удлинять именно ту
   строку, что и так на грани. */
.view-chip{display:inline-flex;align-items:center;gap:5px;margin-bottom:10px;
    padding:4px 10px;border-radius:20px;background:#1d2a22;border:1px solid #2c4a39;
    color:var(--fg);font-size:13px}
.card .meta{color:var(--dim);font-size:14px;margin-bottom:12px}
.card img{width:100%;border-radius:10px;background:#fff}
.prices{margin:14px 0;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.prices div{display:flex;justify-content:space-between;padding:10px 12px;border-top:1px solid var(--line)}
.prices div:first-child{border-top:0}
.prices b{font-variant-numeric:tabular-nums}
.wa{display:block;text-align:center;padding:14px;border-radius:12px;background:var(--accent);
    color:#07120c;font-weight:700;text-decoration:none}
/* Второстепенная кнопка — заметно скромнее WhatsApp, тот остаётся главным
   действием в карточке. Взамен адресной строки, которую больше не обновляем
   (см. app.js: showFloor/wireCopyLink). */
.copy-link{display:block;width:100%;text-align:center;margin-top:8px;padding:10px;
    border-radius:10px;border:1px solid var(--line);background:transparent;
    color:var(--dim);font:inherit;font-size:13px;cursor:pointer}
.link-fallback{margin-top:8px;padding:8px 10px;border-radius:8px;background:#161b21;
    border:1px solid var(--line);color:var(--fg);font-size:12px;word-break:break-all;
    user-select:all}
.close{position:absolute;right:12px;top:12px;width:34px;height:34px;border-radius:50%;
       border:1px solid var(--line);background:#0f1216;color:var(--fg);font-size:18px;cursor:pointer}
.card .plan{cursor:zoom-in}
.zoomhint{color:var(--dim);font-size:12px;margin-top:6px;text-align:center}
/* Полноэкранный просмотр чертежа: тап приближает, пинч работает поверх сам
   (maximum-scale=5 во viewport), крестик закрывает. */
.lightbox{position:fixed;inset:0;z-index:9;background:#0b0e12;display:flex}
.lb-scroll{flex:1;overflow:auto;-webkit-overflow-scrolling:touch;
           display:flex;align-items:center;justify-content:center}
.lb-scroll img{display:block;width:100%;max-width:none;background:#fff;cursor:zoom-in}
.lb-scroll.zoom{align-items:flex-start;justify-content:flex-start}
.lb-scroll.zoom img{width:280%;cursor:zoom-out}
.lightbox .close{z-index:1}
.fail{margin:24px 16px;padding:16px;border:1px solid var(--line);border-radius:12px;
      background:#161b21;color:var(--fg);font-size:15px;text-align:center}
@media(min-width:760px){
  .card{left:50%;right:auto;bottom:auto;top:50%;transform:translate(-50%,-50%);
        width:560px;border-radius:16px}
  .sheet{min-width:0}
  .lb-scroll.zoom img{width:180%}
}
.filters{display:flex;flex-wrap:wrap;gap:8px;padding:0 16px 10px}
.filters select,.filters input[type=number]{padding:9px;border-radius:9px;border:1px solid var(--line);
  background:#161b21;color:var(--fg);font:inherit;font-size:14px;min-width:96px}
.filters label{display:flex;align-items:center;gap:6px;color:var(--dim);font-size:14px}
.cnt{color:var(--dim);font-size:13px;padding:0 16px 8px}
/* Две строки: «номер · балкон · цена» и «тип · площадь». Одной строкой на
   телефоне не выходит — на колонку типа остаётся полтора сантиметра, и
   «Квартира с отдельной спальней» рассыпается на четыре строки. */
.row{display:grid;grid-template-columns:auto 1fr auto;gap:3px 10px;align-items:baseline;
  grid-template-areas:"n b p" "t t a";
  width:calc(100% - 32px);margin:0 16px 6px;padding:11px 12px;border:1px solid var(--line);
  border-radius:10px;background:#161b21;color:var(--fg);font:inherit;font-size:14px;
  text-align:left;cursor:pointer}
.row .n{grid-area:n;font-weight:700}
.row .b{grid-area:b;color:var(--dim);font-size:12px}
.row .t{grid-area:t;color:var(--dim);font-size:13px}
.row .a{grid-area:a;text-align:right;font-size:13px;font-variant-numeric:tabular-nums;
  white-space:nowrap}
.row .p{grid-area:p;text-align:right;font-weight:600;font-variant-numeric:tabular-nums;
  white-space:nowrap}
@media(min-width:600px){
  .row{grid-template-columns:64px minmax(0,1fr) 74px 62px 96px;gap:8px;align-items:center;
       grid-template-areas:"n t a b p"}
  .row .a{text-align:left}
}
footer{color:var(--dim);font-size:12px;line-height:1.4;padding:22px 16px 28px;text-align:center}