/* ============================================================
   Apartment Admin — iOS dark
   Токены следуют системной палитре iOS (Dark Appearance):
   уровни поверхностей, разделители, семантические цвета.
   ============================================================ */

:root{
  /* ---- поверхности (iOS system background levels) ---- */
  --bg:            #000000;
  --surface-1:     #1c1c1e;
  --surface-2:     #2c2c2e;
  --surface-3:     #3a3a3c;
  --surface-4:     #48484a;

  /* стекло: полупрозрачный слой + backdrop-filter */
  --glass:         rgba(28,28,30,.72);
  --glass-strong:  rgba(28,28,30,.94);
  --glass-line:    rgba(255,255,255,.08);
  --glass-line-2:  rgba(255,255,255,.14);

  /* ---- текст (iOS label hierarchy) ---- */
  --label:         #ffffff;
  --label-2:       rgba(235,235,245,.62);
  --label-3:       rgba(235,235,245,.34);
  --label-4:       rgba(235,235,245,.20);

  --separator:     rgba(84,84,88,.58);

  /* ---- семантика (iOS system colors, dark) ---- */
  --blue:          #0a84ff;
  --blue-press:    #409cff;
  --green:         #30d158;
  --red:           #ff453a;
  --orange:        #ff9f0a;
  --yellow:        #ffd60a;
  --purple:        #bf5af2;
  --teal:          #64d2ff;
  --pink:          #ff375f;
  --indigo:        #5e5ce6;

  --tint:          var(--blue);
  --tint-bg:       rgba(10,132,255,.16);
  --tint-line:     rgba(10,132,255,.42);

  /* ---- радиусы ---- */
  --r-xs: 8px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-pill: 999px;

  /* ---- плотный шаг (dashboard density) ---- */
  --s1: 4px;  --s2: 8px;  --s3: 12px;
  --s4: 16px; --s5: 24px; --s6: 32px;

  --shadow-1: 0 1px 2px rgba(0,0,0,.5);
  --shadow-2: 0 8px 24px rgba(0,0,0,.55);

  /* ---- движение ---- */
  --ease:    cubic-bezier(.4,0,.2,1);
  --spring:  cubic-bezier(.34,1.56,.64,1);
  --fast:    .16s;
  --base:    .24s;

  --nav-h: 52px;

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
          "Inter", "Segoe UI", Roboto, system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Fira Code", Menlo, monospace;
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--bg);
  color:var(--label);
  font-family:var(--font);
  font-size:15px;
  line-height:1.47;
  letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  /* мягкое свечение по краям — источник света под стеклом */
  background-image:
    radial-gradient(1100px 520px at 12% -8%, rgba(10,132,255,.13), transparent 62%),
    radial-gradient(900px 460px at 92% -14%, rgba(191,90,242,.10), transparent 60%);
  background-attachment:fixed;
  padding-bottom:var(--s6);
}

a{color:var(--blue);text-decoration:none;transition:color var(--fast) var(--ease)}
a:hover{color:var(--blue-press)}

/* фокус: 2px контур с отступом (WCAG 2.2 Focus Appearance) */
:focus-visible{
  outline:2px solid var(--blue);
  outline-offset:2px;
  border-radius:var(--r-xs);
}

::selection{background:rgba(10,132,255,.4);color:#fff}

/* ============================ NAVBAR ============================ */
.topbar{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;gap:var(--s1);
  height:var(--nav-h);
  padding:0 var(--s4);
  padding-left:max(var(--s4), env(safe-area-inset-left));
  padding-right:max(var(--s4), env(safe-area-inset-right));
  background:var(--glass);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border-bottom:.5px solid var(--separator);
}

.topbar .brand{
  display:flex;align-items:center;gap:var(--s2);
  margin-right:var(--s4);
  font-size:15px;font-weight:600;letter-spacing:-.02em;
  white-space:nowrap;
}
.topbar .brand svg{width:19px;height:19px;color:var(--blue);flex:none}

.topbar a{
  display:inline-flex;align-items:center;
  height:34px;padding:0 12px;
  border-radius:var(--r-xs);
  color:var(--label-2);
  font-size:13.5px;font-weight:500;letter-spacing:-.01em;
  cursor:pointer;
  transition:color var(--fast) var(--ease), background var(--fast) var(--ease),
             transform var(--fast) var(--spring);
}
.topbar a:hover{color:var(--label);background:rgba(255,255,255,.06)}
.topbar a:active{transform:scale(.97)}
.topbar a.active{color:var(--label);background:rgba(255,255,255,.10)}

/* ============================ LAYOUT ============================ */
.container{
  max-width:1440px;
  margin:0 auto;
  padding:var(--s5) var(--s4) 0;
  padding-left:max(var(--s4), env(safe-area-inset-left));
  padding-right:max(var(--s4), env(safe-area-inset-right));
}

/* iOS large title */
h1{
  margin:0 0 var(--s4);
  font-size:30px;line-height:1.14;font-weight:700;letter-spacing:-.03em;
}
h1 .muted{font-size:19px;font-weight:500;letter-spacing:-.01em}

h3{
  margin:0 0 var(--s3);
  font-size:14px;font-weight:600;letter-spacing:-.01em;
  color:var(--label);
}

.muted{color:var(--label-2)}
.small{font-size:12px}
.right{text-align:right}
.nowrap{white-space:nowrap}

/* ====================== SEGMENTED CONTROL ======================= */
/* Переключатель диапазона — как UISegmentedControl в iOS */
.range-switch{
  display:flex;align-items:center;flex-wrap:wrap;gap:var(--s1);
  margin-bottom:var(--s5);
  padding:3px;
  background:var(--surface-1);
  border:.5px solid var(--glass-line);
  border-radius:var(--r-md);
  width:fit-content;
  max-width:100%;
}

.range-btn{
  display:inline-flex;align-items:center;justify-content:center;
  height:30px;padding:0 14px;
  border:none;border-radius:var(--r-sm);
  background:transparent;color:var(--label-2);
  font-family:inherit;font-size:13px;font-weight:500;letter-spacing:-.01em;
  cursor:pointer;
  transition:color var(--fast) var(--ease), background var(--fast) var(--ease),
             transform var(--fast) var(--spring);
}
.range-btn:hover{color:var(--label);background:rgba(255,255,255,.05)}
.range-btn:active{transform:scale(.95)}
.range-btn.active{
  color:var(--label);
  background:var(--surface-3);
  box-shadow:var(--shadow-1);
}

.range-custom{
  display:flex;align-items:center;gap:var(--s2);
  margin-left:var(--s2);padding-left:var(--s2);
  border-left:.5px solid var(--separator);
}
.range-custom input[type=date]{width:142px;min-width:0;height:30px}
.range-custom .range-btn{background:var(--surface-3);color:var(--label)}
.range-custom .range-btn:hover{background:var(--surface-4)}

/* ============================ CARDS ============================= */
.cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:var(--s3);
  margin-bottom:var(--s5);
}

.card{
  position:relative;
  padding:var(--s4);
  border-radius:var(--r-lg);
  background:var(--glass);
  backdrop-filter:blur(20px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  border:.5px solid var(--glass-line);
  box-shadow:var(--shadow-2);
  overflow:hidden;
  transition:transform var(--base) var(--spring), border-color var(--base) var(--ease);
}
/* блик по верхней грани — характерная деталь glassmorphism */
.card::before{
  content:"";position:absolute;inset:0 0 auto 0;height:1px;
  background:linear-gradient(90deg,transparent,var(--glass-line-2) 22%,var(--glass-line-2) 78%,transparent);
}
.card:hover{transform:translateY(-2px);border-color:var(--glass-line-2)}

.card-label{
  margin-bottom:var(--s2);
  font-size:12px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;
  color:var(--label-3);
}
.card-value{
  font-family:var(--mono);
  font-size:30px;line-height:1.05;font-weight:600;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
}
.card-sub{margin-top:6px;font-size:12.5px;color:var(--label-2)}

/* ============================ CHARTS ============================ */
.charts-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
  gap:var(--s3);
  margin-bottom:var(--s5);
}
.chart-box{
  padding:var(--s4);
  border-radius:var(--r-lg);
  background:var(--glass);
  backdrop-filter:blur(20px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  border:.5px solid var(--glass-line);
  box-shadow:var(--shadow-2);
  min-width:0;
}
.chart-box.wide{grid-column:1 / -1}
.chart-box canvas{max-width:100%}

/* ============================ FILTERS =========================== */
.filters{
  padding:var(--s4);
  margin-bottom:var(--s4);
  border-radius:var(--r-lg);
  background:var(--glass);
  backdrop-filter:blur(20px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  border:.5px solid var(--glass-line);
  box-shadow:var(--shadow-2);
}
.filter-row{
  display:flex;flex-wrap:wrap;gap:var(--s3);
  align-items:flex-end;
  margin-bottom:var(--s3);
}
.filter-row:last-child{margin-bottom:0}
.filter-row.actions{justify-content:flex-end;gap:var(--s2)}
.filter-row.answers{
  border-top:.5px solid var(--separator);
  padding-top:var(--s3);
}
.answers-label{
  align-self:center;margin-right:var(--s1);
  font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:var(--label-3);
}

label{display:flex;flex-direction:column;gap:6px}
.filters label > span,
.settings-row label > span{
  font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:var(--label-3);
}

/* ---- поля ввода ---- */
input[type=text],input[type=date],input[type=number],select{
  height:36px;min-width:150px;padding:0 11px;
  background:var(--surface-2);
  color:var(--label);
  border:.5px solid transparent;
  border-radius:var(--r-sm);
  font-family:inherit;font-size:14px;
  transition:background var(--fast) var(--ease), border-color var(--fast) var(--ease),
             box-shadow var(--fast) var(--ease);
  -webkit-appearance:none;appearance:none;
}
input::placeholder{color:var(--label-4)}
input:hover,select:hover{background:var(--surface-3)}
input:focus,select:focus{
  outline:none;
  background:var(--surface-2);
  border-color:var(--tint-line);
  box-shadow:0 0 0 3.5px var(--tint-bg);
}
select{
  padding-right:30px;cursor:pointer;
  background-repeat:no-repeat;background-position:right 9px center;background-size:14px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23888' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M4 6.5 8 10.5 12 6.5'/></svg>");
}
input[type=date]::-webkit-calendar-picker-indicator{filter:invert(.7);cursor:pointer}

/* ---- чипы-чекбоксы ---- */
.chip{
  flex-direction:row;align-items:center;gap:7px;
  height:32px;padding:0 12px;
  background:var(--surface-2);
  border:.5px solid transparent;
  border-radius:var(--r-pill);
  font-size:13px;color:var(--label-2);
  cursor:pointer;user-select:none;
  transition:background var(--fast) var(--ease), color var(--fast) var(--ease),
             border-color var(--fast) var(--ease), transform var(--fast) var(--spring);
}
.chip:hover{background:var(--surface-3);color:var(--label)}
.chip:active{transform:scale(.96)}
.chip input{width:15px;height:15px;margin:0;flex:none;accent-color:var(--blue);cursor:pointer}
.chip:has(input:checked){
  background:var(--tint-bg);
  border-color:var(--tint-line);
  color:var(--label);
}

/* ============================ BUTTONS =========================== */
button,.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  height:36px;padding:0 16px;
  border:none;border-radius:var(--r-sm);
  background:var(--blue);color:#fff;
  font-family:inherit;font-size:14px;font-weight:590;letter-spacing:-.01em;
  cursor:pointer;white-space:nowrap;
  transition:background var(--fast) var(--ease), transform var(--fast) var(--spring),
             opacity var(--fast) var(--ease);
}
button:hover,.btn:hover{background:var(--blue-press);color:#fff}
button:active,.btn:active{transform:scale(.96)}

.btn-secondary,button.btn-secondary{background:var(--surface-2);color:var(--label)}
.btn-secondary:hover,button.btn-secondary:hover{background:var(--surface-3);color:var(--label)}

.btn.disabled,button:disabled{opacity:.32;pointer-events:none}

/* ============================= TABLE ============================ */
.table-meta{margin-bottom:var(--s2);font-size:12.5px;color:var(--label-2)}
.table-meta b{color:var(--label);font-weight:600}

.table-wrap{
  border-radius:var(--r-lg);
  background:var(--glass);
  backdrop-filter:blur(20px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  border:.5px solid var(--glass-line);
  box-shadow:var(--shadow-2);
  overflow-x:auto;              /* таблица скроллится внутри, а не ломает страницу */
  -webkit-overflow-scrolling:touch;
}

.apps-table{
  width:100%;
  border-collapse:separate;border-spacing:0;
  font-size:13.5px;
}
.apps-table thead th{
  position:sticky;top:0;z-index:2;
  padding:11px var(--s3);
  background:var(--glass-strong);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-bottom:.5px solid var(--separator);
  text-align:left;white-space:nowrap;
  font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:var(--label-3);
}
.apps-table th.sort{cursor:pointer;user-select:none;transition:color var(--fast) var(--ease)}
.apps-table th.sort:hover{color:var(--label)}
.apps-table th.right{text-align:right}

.apps-table td{
  padding:11px var(--s3);
  border-bottom:.5px solid rgba(84,84,88,.28);
  vertical-align:top;
}
.apps-table tbody tr{transition:background var(--fast) var(--ease)}
.apps-table tbody tr:hover{background:rgba(255,255,255,.04)}
.apps-table tbody tr:last-child td{border-bottom:none}

.apps-table td.right{
  text-align:right;
  font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:13px;
}
.name-cell{max-width:520px;min-width:260px}
.name-cell a{font-weight:500;color:var(--label)}
.name-cell a:hover{color:var(--blue)}
.name-cell .small{margin-top:3px;color:var(--label-3);font-size:12px}

.empty{padding:var(--s6) var(--s4)!important;text-align:center;color:var(--label-3)}

/* теги категорий ответа */
.chip-tag{
  display:inline-block;padding:3px 9px;
  border-radius:var(--r-pill);
  font-size:12px;font-weight:500;white-space:nowrap;
  background:var(--surface-3);color:var(--label-2);
}
.chip-tag.a-0{background:rgba(48,209,88,.16);  color:#4ade80}
.chip-tag.a-1{background:rgba(255,159,10,.16); color:#fbbf24}
.chip-tag.a-2{background:rgba(100,210,255,.16);color:#7dd3fc}
.chip-tag.a-3{background:rgba(255,69,58,.16);  color:#fca5a5}
.chip-tag.a-4{background:rgba(191,90,242,.16); color:#d8b4fe}
.chip-tag.a-5{background:rgba(255,55,95,.16);  color:#fda4af}
.chip-tag.a-6{background:rgba(94,92,230,.18);  color:#a5b4fc}
.chip-tag.a-7{background:rgba(255,214,10,.14); color:#fde047}

/* ============================ PAGER ============================= */
.pager{
  display:flex;align-items:center;justify-content:center;gap:var(--s2);
  margin:var(--s4) 0;
}
.pager button,.pager .btn{background:var(--surface-2);color:var(--label);min-width:40px}
.pager button:hover,.pager .btn:hover{background:var(--surface-3)}
.pager-info{
  padding:0 var(--s3);
  font-size:13px;color:var(--label-2);
  font-variant-numeric:tabular-nums;
}

/* =========================== NOTICE ============================= */
.notice{
  padding:12px var(--s4);
  margin-bottom:var(--s4);
  border-radius:var(--r-md);
  border:.5px solid var(--glass-line);
  background:var(--surface-1);
  font-size:13.5px;
}
.notice.ok{
  border-color:rgba(48,209,88,.38);
  background:rgba(48,209,88,.12);
  color:#4ade80;
}

/* ========================== SETTINGS ============================ */
/* Сгруппированные врезки — как «Настройки» в iOS */
.settings-form{max-width:720px}

.settings-block{
  padding:var(--s4);
  margin-bottom:var(--s3);
  border-radius:var(--r-lg);
  background:var(--glass);
  backdrop-filter:blur(20px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  border:.5px solid var(--glass-line);
  box-shadow:var(--shadow-2);
}
.settings-block h3{
  margin-bottom:6px;
  color:var(--label);
  font-size:15px;font-weight:600;letter-spacing:-.015em;
}
.settings-block p.hint{
  margin:0 0 var(--s4);
  max-width:64ch;
  font-size:13px;line-height:1.55;color:var(--label-2);
}
.settings-row{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:flex-end}
.settings-row label{gap:6px}

.settings-hint{
  margin-top:var(--s3);padding-top:var(--s3);
  border-top:.5px solid var(--separator);
  font-size:13px;color:var(--label-2);
}
.settings-hint b{color:var(--label);font-weight:600;font-variant-numeric:tabular-nums}

/* ========================= ПОЯВЛЕНИЕ ============================ */
/* Каскад: карточки «подъезжают» пружиной, как в iOS */
@keyframes rise{
  from{opacity:0;transform:translateY(12px) scale(.97)}
  to  {opacity:1;transform:none}
}
.cards > .card,
.charts-grid > .chart-box,
.settings-form > .settings-block{
  animation:rise .42s var(--spring) both;
}
.cards > .card:nth-child(1),.charts-grid > .chart-box:nth-child(1),.settings-form > .settings-block:nth-child(1){animation-delay:.02s}
.cards > .card:nth-child(2),.charts-grid > .chart-box:nth-child(2),.settings-form > .settings-block:nth-child(2){animation-delay:.07s}
.cards > .card:nth-child(3),.charts-grid > .chart-box:nth-child(3),.settings-form > .settings-block:nth-child(3){animation-delay:.12s}
.cards > .card:nth-child(4),.charts-grid > .chart-box:nth-child(4){animation-delay:.17s}
.cards > .card:nth-child(5),.charts-grid > .chart-box:nth-child(5){animation-delay:.22s}

/* ======================== RESPONSIVE ============================ */
@media (max-width:900px){
  .container{padding-top:var(--s4)}
  h1{font-size:25px}
  .charts-grid{grid-template-columns:1fr}
  .range-switch{width:100%}
  .range-custom{
    width:100%;margin-left:0;padding-left:0;
    border-left:none;border-top:.5px solid var(--separator);
    margin-top:var(--s1);padding-top:var(--s1);
  }
  .range-custom input[type=date]{flex:1;width:auto}
}

@media (max-width:640px){
  body{font-size:14px}
  h1{font-size:22px}
  .topbar{gap:0;padding:0 var(--s2);overflow-x:auto;scrollbar-width:none}
  .topbar::-webkit-scrollbar{display:none}
  .topbar .brand{margin-right:var(--s2)}
  .topbar .brand span{display:none}
  .cards{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:var(--s2)}
  .card{padding:var(--s3)}
  .card-value{font-size:24px}
  .filters{padding:var(--s3)}
  .filter-row{gap:var(--s2)}
  .filters label,.settings-row label{flex:1 1 100%}
  input[type=text],input[type=date],input[type=number],select{width:100%;min-width:0}
  /* тач-цели не мельче 44px */
  button,.btn,.topbar a{height:44px}
  .chip{height:38px}
}

/* ===================== REDUCED MOTION =========================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important;
  }
  .card:hover{transform:none}
}

/* ===================== SCROLLBAR (webkit) ======================= */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{
  background:var(--surface-3);
  border:2px solid transparent;background-clip:content-box;
  border-radius:var(--r-pill);
}
::-webkit-scrollbar-thumb:hover{background:var(--surface-4);background-clip:content-box}

/* ========================= ПОДБОРКА ============================= */
.aprt-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(272px,1fr));
  gap:var(--s3);
  margin-bottom:var(--s4);
}

.aprt-card{
  display:flex;flex-direction:column;
  border-radius:var(--r-lg);
  background:var(--glass);
  backdrop-filter:blur(20px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  border:.5px solid var(--glass-line);
  box-shadow:var(--shadow-2);
  overflow:hidden;
  animation:rise .38s var(--spring) both;
  transition:transform var(--base) var(--spring), border-color var(--base) var(--ease);
}
.aprt-card:hover{transform:translateY(-3px);border-color:var(--glass-line-2)}

/* ---- фото ---- */
.aprt-photo{
  position:relative;
  aspect-ratio:4/3;              /* место резервируется заранее — без скачков (CLS) */
  background:var(--surface-2);
  overflow:hidden;
}
.aprt-photo img{
  width:100%;height:100%;
  object-fit:cover;display:block;
  transition:transform .5s var(--ease);
}
.aprt-card:hover .aprt-photo img{transform:scale(1.045)}

.aprt-nophoto{
  width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
  color:var(--label-4);
}
.aprt-nophoto svg{width:38px;height:38px}

.aprt-count,
.aprt-liq{
  position:absolute;
  display:inline-flex;align-items:center;gap:5px;
  padding:4px 9px;
  border-radius:var(--r-pill);
  font-size:11.5px;font-weight:600;letter-spacing:-.01em;
  background:rgba(0,0,0,.58);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  color:#fff;
}
.aprt-count{top:9px;right:9px}
.aprt-count svg{width:13px;height:13px}

.aprt-liq{top:9px;left:9px}
.aprt-liq.liq-4,
.aprt-liq.liq-3{background:rgba(48,209,88,.9);  color:#06240f}
.aprt-liq.liq-2{background:rgba(255,214,10,.9); color:#2b2200}
.aprt-liq.liq-1,
.aprt-liq.liq-0{background:rgba(255,159,10,.9); color:#2b1700}

/* ---- тело ---- */
.aprt-body{
  display:flex;flex-direction:column;gap:7px;
  padding:var(--s3) var(--s4) var(--s4);
}

.aprt-price-row{display:flex;align-items:baseline;gap:var(--s2);flex-wrap:wrap}
.aprt-price{
  font-family:var(--mono);
  font-size:21px;font-weight:600;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
}
.aprt-cur{font-size:13px;font-weight:500;color:var(--label-2);margin-left:2px}

.aprt-delta{
  padding:2px 8px;border-radius:var(--r-pill);
  font-size:12px;font-weight:600;
  font-variant-numeric:tabular-nums;
}
.aprt-delta.is-down{background:rgba(48,209,88,.16);color:#4ade80}
.aprt-delta.is-up{background:rgba(255,69,58,.16);color:#fca5a5}

.aprt-sub{font-size:12.5px;color:var(--label-2);font-variant-numeric:tabular-nums}
.aprt-dot{margin:0 6px;color:var(--label-4)}

.aprt-title{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;
  color:var(--label);font-size:14px;font-weight:500;line-height:1.36;
  margin-top:1px;
}
.aprt-title:hover{color:var(--blue)}

.aprt-specs{display:flex;flex-wrap:wrap;gap:6px;margin-top:1px}
.aprt-specs span{
  padding:3px 8px;border-radius:var(--r-xs);
  background:var(--surface-2);
  font-size:12px;color:var(--label-2);white-space:nowrap;
}

.aprt-geo{
  display:flex;align-items:center;gap:5px;
  font-size:12.5px;color:var(--label-2);
}
.aprt-geo svg{width:14px;height:14px;flex:none;color:var(--label-3)}

.aprt-flags{display:flex;flex-wrap:wrap;gap:5px}
.aprt-flag{
  padding:2px 8px;border-radius:var(--r-pill);
  font-size:11.5px;font-weight:500;white-space:nowrap;
  background:var(--surface-3);color:var(--label-2);
}
.aprt-flag.f-ok{background:rgba(48,209,88,.15);color:#4ade80}
.aprt-flag.f-warn{background:rgba(255,159,10,.15);color:#fbbf24}

.aprt-foot{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s2);
  margin-top:3px;padding-top:var(--s3);
  border-top:.5px solid var(--separator);
  font-size:12px;
}
.aprt-foot .muted{
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.btn-sm{height:30px;padding:0 12px;font-size:12.5px;border-radius:var(--r-xs);flex:none}
.btn-sm svg{width:13px;height:13px}

.aprt-answer{
  margin-top:2px;padding:7px 10px;
  border-radius:var(--r-xs);
  background:var(--tint-bg);
  border-left:2px solid var(--tint-line);
  font-size:12px;color:var(--label-2);
}

/* ---- пусто ---- */
.aprt-empty{
  display:flex;flex-direction:column;align-items:center;
  padding:var(--s6) var(--s4);
  border-radius:var(--r-lg);
  background:var(--glass);
  border:.5px solid var(--glass-line);
  text-align:center;
}
.aprt-empty svg{width:40px;height:40px;color:var(--label-4);margin-bottom:var(--s3)}
.aprt-empty h3{margin:0 0 5px}
.aprt-empty p{margin:0;max-width:44ch;font-size:13px;color:var(--label-2)}

/* ---- индикатор загрузки HTMX ---- */
.spinner{
  width:17px;height:17px;margin-right:auto;
  border:2px solid var(--surface-3);
  border-top-color:var(--blue);
  border-radius:50%;
  opacity:0;
  transition:opacity var(--fast) var(--ease);
}
.htmx-request .spinner,
.spinner.htmx-request{opacity:1;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* мягкое затухание сетки, пока летит запрос */
#select-results{transition:opacity var(--fast) var(--ease)}
.htmx-request #select-results{opacity:.5}

@media (max-width:640px){
  .aprt-grid{grid-template-columns:1fr;gap:var(--s2)}
  .aprt-price{font-size:19px}
}

@media (prefers-reduced-motion:reduce){
  .aprt-card:hover{transform:none}
  .aprt-card:hover .aprt-photo img{transform:none}
  .spinner{animation:none!important}
}

/* =========================== ВХОД ============================== */
.pin-body{min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:var(--s4)}
.pin-wrap{width:100%;max-width:360px}
.pin-card{
  display:flex;flex-direction:column;align-items:center;gap:var(--s3);
  padding:var(--s6) var(--s5) var(--s5);
  border-radius:var(--r-lg);
  background:var(--glass);
  backdrop-filter:blur(20px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  border:.5px solid var(--glass-line);
  box-shadow:var(--shadow-2);
  animation:rise .42s var(--spring) both;
}
.pin-logo{width:34px;height:34px;color:var(--blue)}
.pin-card h1{margin:0;font-size:20px;letter-spacing:-.02em}
.pin-hint{margin:-6px 0 4px;font-size:13.5px;color:var(--label-2)}

.pin-input{
  width:100%;height:56px;
  text-align:center;
  font-family:var(--mono);font-size:28px;letter-spacing:.42em;text-indent:.42em;
  font-variant-numeric:tabular-nums;
  background:var(--surface-2);color:var(--label);
  border:.5px solid transparent;border-radius:var(--r-md);
  transition:border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
  -webkit-appearance:none;appearance:none;
}
.pin-input::placeholder{color:var(--label-4);letter-spacing:.42em}
.pin-input:focus{outline:none;border-color:var(--tint-line);box-shadow:0 0 0 3.5px var(--tint-bg)}
.pin-input:disabled{opacity:.4}
.pin-input.is-wrong{animation:shake .4s var(--ease)}

.pin-error{
  width:100%;padding:9px 12px;
  border-radius:var(--r-sm);
  background:rgba(255,69,58,.14);border:.5px solid rgba(255,69,58,.35);
  color:#fca5a5;font-size:13px;text-align:center;
}
.pin-error b{color:#fff;font-variant-numeric:tabular-nums}
.pin-submit{width:100%;height:44px;margin-top:var(--s1)}

@keyframes shake{
  10%,90%{transform:translateX(-2px)}
  20%,80%{transform:translateX(4px)}
  30%,50%,70%{transform:translateX(-6px)}
  40%,60%{transform:translateX(6px)}
}
@media (prefers-reduced-motion:reduce){.pin-input.is-wrong{animation:none}}
.topbar .topbar-out{margin-left:auto;color:var(--label-3);font-size:12.5px}
.topbar .topbar-out:hover{color:var(--red);background:rgba(255,69,58,.10)}

/* ==================== ОТВЕТ В ТАБЛИЦЕ ОБЪЯВЛЕНИЙ ================= */
.ans-select{
  height:28px;min-width:0;width:auto;max-width:220px;
  padding:0 26px 0 10px;
  border-radius:var(--r-pill);
  background-color:var(--surface-2);
  background-position:right 7px center;background-size:12px;
  color:var(--label-3);
  font-size:12px;font-weight:500;
}
.ans-select.is-set{background-color:rgba(255,159,10,.14);color:#fbbf24}
.ans-select.is-yes{background-color:rgba(48,209,88,.16);color:#4ade80}
.ans-select.is-saved{box-shadow:0 0 0 2px rgba(48,209,88,.55)}
.ans-select.is-failed{box-shadow:0 0 0 2px rgba(255,69,58,.7)}
.ans-select:disabled{opacity:.55}
.ans-select option{background:var(--surface-2);color:var(--label)}

.name-cell a.feed-link{font-weight:400;color:var(--blue)}
.name-cell a.feed-link:hover{color:var(--blue-press)}

/* ============================ ЛЕНТА ============================= */
/* Один экран — одно объявление. Вертикальный свайп листает квартиры,
   горизонтальный — фотографии. Раскладка считается от высоты экрана,
   поэтому страница сама не скроллится: скроллится только лента. */
html:has(body.feed-page){overflow:hidden;overscroll-behavior:none}

body.feed-page{
  display:flex;flex-direction:column;
  height:100vh;height:100dvh;
  padding-bottom:0;
  overflow:hidden;
  overscroll-behavior:none;
  background-image:none;
}
body.feed-page .topbar{flex:none}

.feed-main{position:relative;flex:1;min-height:0}

.feed{
  position:relative;
  height:100%;
  overflow-x:hidden;overflow-y:auto;
  scroll-snap-type:y mandatory;
  overscroll-behavior-y:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  outline:none;
}
.feed::-webkit-scrollbar{display:none}

.feed-slide{
  position:relative;
  display:flex;flex-direction:column;
  height:100%;
  overflow:hidden;
  scroll-snap-align:start;
  scroll-snap-stop:always;         /* один свайп — одна квартира, без проскакивания */
  background:var(--bg);
}

/* ---------------------------- фото ---------------------------- */
.fs-photos{
  position:relative;
  flex:1 1 0;min-height:120px;
  background:var(--surface-1);
  overflow:hidden;
}
.fs-track{
  display:flex;height:100%;
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  cursor:zoom-in;
}
.fs-track::-webkit-scrollbar{display:none}

.fs-ph{
  position:relative;
  flex:0 0 100%;height:100%;
  overflow:hidden;
  scroll-snap-align:center;
  scroll-snap-stop:always;
}
/* Фото показываем целиком (contain), а поля заливаем им же, размытым:
   вертикальные снимки не обрезаются и не висят в чёрных полосах. */
.fs-ph::before{
  content:"";
  position:absolute;inset:-32px;
  background:var(--img, none) center/cover no-repeat;
  filter:blur(24px) brightness(.5) saturate(1.25);
}
.fs-ph img{
  position:relative;display:block;
  width:100%;height:100%;
  object-fit:contain;
  opacity:0;
  transition:opacity .28s var(--ease);
  user-select:none;-webkit-user-drag:none;-webkit-touch-callout:none;
}
.fs-ph.ready img{opacity:1}
.fs-ph.broken img{opacity:0}

/* скелетон, пока картинка едет */
.fs-ph:not(.ready)::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(100deg,transparent 35%,rgba(255,255,255,.06) 50%,transparent 65%);
  background-size:220% 100%;
  animation:shimmer 1.3s linear infinite;
}
@keyframes shimmer{from{background-position:120% 0}to{background-position:-120% 0}}

.fs-nophoto{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s2);
  height:100%;padding:var(--s4);
  color:var(--label-3);font-size:13px;text-align:center;
}
.fs-nophoto svg{width:42px;height:42px;color:var(--label-4)}

/* полоски-индикаторы, как в сторис */
.fs-bars{
  position:absolute;left:10px;right:10px;bottom:8px;
  display:flex;gap:3px;
  pointer-events:none;
}
.fs-bars i{
  flex:1;height:2.5px;border-radius:2px;
  background:rgba(255,255,255,.3);
  box-shadow:0 0 2px rgba(0,0,0,.4);
  transition:background var(--fast) var(--ease);
}
.fs-bars i.on{background:#fff}

.fs-count,
.fs-liq{position:absolute;bottom:19px;top:auto}
.fs-count{
  right:10px;
  display:inline-flex;align-items:center;
  padding:4px 9px;border-radius:var(--r-pill);
  background:rgba(0,0,0,.58);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  color:rgba(255,255,255,.75);
  font-size:11.5px;font-weight:600;font-variant-numeric:tabular-nums;
  pointer-events:none;
}
.fs-count b{color:#fff;font-weight:600;margin-right:3px}
.fs-liq{left:10px;right:auto;pointer-events:none}

/* стрелки — только там, где есть мышь; на телефоне листают пальцем */
.fs-nav{display:none}
@media (hover:hover) and (pointer:fine){
  .fs-nav{
    position:absolute;top:50%;
    display:inline-flex;
    width:42px;height:42px;padding:0;margin-top:-21px;
    border-radius:50%;
    background:rgba(0,0,0,.5);
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    border:.5px solid var(--glass-line-2);
    color:#fff;
    opacity:0;
    transition:opacity var(--fast) var(--ease), background var(--fast) var(--ease),
               transform var(--fast) var(--spring);
  }
  .fs-nav:hover{background:rgba(0,0,0,.72)}
  .fs-nav svg{width:18px;height:18px}
  .fs-prev{left:14px}
  .fs-next{right:14px}
  .fs-photos:hover .fs-nav,.fs-nav:focus-visible{opacity:1}
}

/* отметка о данном ответе */
.fs-stamp{
  position:absolute;top:56px;left:10px;
  display:none;align-items:center;
  max-width:calc(100% - 20px);
  padding:6px 12px;border-radius:var(--r-pill);
  background:rgba(255,69,58,.9);
  color:#fff;
  font-size:12.5px;font-weight:600;letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  box-shadow:0 4px 14px rgba(0,0,0,.45);
  pointer-events:none;
}
.is-answered .fs-stamp{display:inline-flex}
.is-yes .fs-stamp{background:rgba(48,209,88,.94);color:#04210d}
.fs-stamp.pop{animation:stamp .34s var(--spring) both}
@keyframes stamp{from{opacity:0;transform:scale(1.35)}to{opacity:1;transform:none}}

/* ------------------------- инфо-панель ------------------------ */
.fs-side{
  flex:none;
  display:flex;flex-direction:column;
  min-width:0;
  background:var(--surface-1);
  border-top:.5px solid var(--glass-line);
}

.fs-info{
  position:relative;
  display:flex;flex-direction:column;gap:6px;
  min-width:0;
  padding:15px 14px 8px;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.fs-info:focus-visible{outline-offset:-3px}
.fs-grab{
  position:absolute;top:6px;left:50%;
  width:36px;height:4px;margin-left:-18px;
  border-radius:2px;background:var(--surface-4);
}

.fs-price-row{display:flex;align-items:baseline;gap:var(--s2);min-width:0}
.fs-price{
  font-family:var(--mono);
  font-size:22px;line-height:1.15;font-weight:600;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.fs-ppm{
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:12.5px;color:var(--label-2);font-variant-numeric:tabular-nums;
}
.fs-ago{margin-left:auto;font-size:12px;color:var(--label-3);white-space:nowrap}
.fs-more{flex:none;align-self:center;width:16px;height:16px;color:var(--label-3)}

.fs-title{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;
  margin:0;
  font-size:14.5px;line-height:1.3;font-weight:600;letter-spacing:-.015em;
}

/* чипы в одну строку с прокруткой вбок — высота панели не скачет от квартиры к квартире */
.fs-chips{
  display:flex;gap:5px;
  margin:0 -14px;padding:0 14px;
  overflow-x:auto;
  scrollbar-width:none;
}
.fs-chips::-webkit-scrollbar{display:none}
.fs-chip{
  flex:none;
  display:inline-flex;align-items:center;gap:4px;
  height:24px;padding:0 8px;
  border-radius:var(--r-xs);
  background:var(--surface-2);
  font-size:12px;color:var(--label-2);white-space:nowrap;
}
.fs-chip svg{width:12px;height:12px;flex:none}
.fs-chip.is-geo{background:var(--tint-bg);color:#7cc0ff}
.fs-chip.f-ok{background:rgba(48,209,88,.15);color:#4ade80}
.fs-chip.f-warn{background:rgba(255,159,10,.15);color:#fbbf24}
.fs-chip.f-bad{background:rgba(255,69,58,.17);color:#ff8a82}

.fs-desc{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;
  margin:0;
  font-size:13px;line-height:1.4;color:var(--label-2);
  overflow-wrap:anywhere;
}
@media (min-height:760px){.fs-desc{-webkit-line-clamp:3}}
@media (min-height:860px){.fs-desc{-webkit-line-clamp:4}}

/* --------------------------- ответы --------------------------- */
.fs-actions{
  display:flex;flex-direction:column;gap:6px;
  padding:4px 10px 10px;
  padding-bottom:max(10px, env(safe-area-inset-bottom));
  padding-left:max(10px, env(safe-area-inset-left));
  padding-right:max(10px, env(safe-area-inset-right));
}
.fs-reasons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.fs-main{display:flex;gap:6px}

.fs-ans{
  height:42px;min-width:0;padding:0 6px;
  border-radius:var(--r-sm);
  background:var(--surface-2);color:var(--label);
  font-size:13px;font-weight:560;letter-spacing:-.01em;
  overflow:hidden;text-overflow:ellipsis;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;       /* без задержки и зума по двойному тапу */
}
.fs-ans:hover{background:var(--surface-3);color:var(--label)}
.fs-ans.on{
  background:rgba(255,69,58,.2);color:#ff8a82;
  box-shadow:inset 0 0 0 1.5px rgba(255,69,58,.6);
}

.fs-yes{
  flex:1;height:46px;gap:7px;
  background:var(--green);color:#04210d;
  font-size:15px;font-weight:650;
}
.fs-yes:hover{background:#4ade80;color:#04210d}
.fs-yes svg{width:18px;height:18px;flex:none}
.fs-yes.on{
  background:var(--green);color:#04210d;
  box-shadow:0 0 0 2px var(--surface-1), 0 0 0 4px var(--green);
}
/* когда выбран отказ, «Добавлена» уходит на второй план, и наоборот */
.is-answered:not(.is-yes) .fs-yes{background:rgba(48,209,88,.16);color:#4ade80}
.is-yes .fs-ans:not(.fs-yes){opacity:.5}

.fs-olx{
  flex:none;
  display:inline-flex;align-items:center;justify-content:center;gap:5px;
  height:46px;padding:0 14px;
  border-radius:var(--r-sm);
  background:var(--surface-2);color:var(--label);
  font-size:14px;font-weight:590;
  transition:background var(--fast) var(--ease), transform var(--fast) var(--spring);
}
.fs-olx:hover{background:var(--surface-3);color:var(--label)}
.fs-olx:active{transform:scale(.96)}
.fs-olx svg{width:14px;height:14px}

/* подсказки клавиш — только для клавиатуры с мышью */
.fs-ans kbd{display:none}
@media (hover:hover) and (pointer:fine){
  .fs-ans kbd{
    display:inline-flex;align-items:center;justify-content:center;
    min-width:17px;height:17px;padding:0 4px;
    border-radius:5px;
    background:rgba(255,255,255,.1);color:var(--label-3);
    font-family:var(--mono);font-size:10.5px;font-weight:500;
  }
  .fs-yes kbd{background:rgba(0,0,0,.16);color:rgba(4,33,13,.7)}
  .is-answered:not(.is-yes) .fs-yes kbd{background:rgba(255,255,255,.1);color:var(--label-3)}
}

/* ---------------- полноэкранный просмотр фото ----------------- */
.feed-slide.is-zoom .fs-side{display:none}
.feed-slide.is-zoom .fs-track{cursor:zoom-out}
.feed-slide.is-zoom .fs-stamp{display:none}
body.feed-zoomed .feed-bar,
body.feed-zoomed .feed-fresh{display:none}

/* ------------------- верхняя панель ленты --------------------- */
.feed-bar{
  position:absolute;z-index:5;top:0;left:0;right:0;
  display:flex;align-items:center;gap:var(--s2);
  padding:8px 10px 18px;
  padding-top:max(8px, env(safe-area-inset-top));
  background:linear-gradient(rgba(0,0,0,.6),transparent);
  pointer-events:none;             /* сквозь пустые места панели можно листать фото */
}
.feed-bar > *{pointer-events:auto}

.feed-menu{
  display:none;
  flex:none;width:36px;height:36px;padding:0;
  border-radius:50%;
  background:rgba(0,0,0,.5);
  backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%);
  border:.5px solid var(--glass-line-2);
  color:#fff;
}
.feed-menu:hover{background:rgba(0,0,0,.7)}
.feed-menu svg{width:17px;height:17px}

.feed-seg{
  display:flex;padding:3px;
  border-radius:var(--r-pill);
  background:rgba(0,0,0,.5);
  backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%);
  border:.5px solid var(--glass-line-2);
}
.feed-seg a{
  display:inline-flex;align-items:center;gap:6px;
  height:30px;padding:0 12px;
  border-radius:var(--r-pill);
  color:rgba(255,255,255,.7);
  font-size:13px;font-weight:560;letter-spacing:-.01em;white-space:nowrap;
}
.feed-seg a:hover{color:#fff}
.feed-seg a.active{background:rgba(255,255,255,.18);color:#fff}
.feed-seg b{
  min-width:18px;padding:1px 6px;
  border-radius:var(--r-pill);
  background:var(--blue);color:#fff;
  font-size:11.5px;font-weight:600;text-align:center;font-variant-numeric:tabular-nums;
}

.feed-bar .feed-days,
.feed-pin{
  margin-left:auto;
  height:36px;width:auto;min-width:0;
  border-radius:var(--r-pill);
  background-color:rgba(0,0,0,.5);
  backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%);
  border:.5px solid var(--glass-line-2);
  color:#fff;font-size:13px;font-weight:560;
}
.feed-bar .feed-days{padding:0 28px 0 13px}
.feed-bar .feed-days:hover,.feed-bar .feed-days:focus{background-color:rgba(0,0,0,.7)}
.feed-pin{display:inline-flex;align-items:center;gap:7px;padding:0 12px;white-space:nowrap}
.feed-pin:hover{color:#fff;background-color:rgba(0,0,0,.7)}
.feed-pin svg{width:12px;height:12px}

/* плашка «пришли новые» */
.feed-fresh{
  position:absolute;z-index:6;top:54px;left:50%;
  height:34px;padding:0 14px;gap:6px;
  border-radius:var(--r-pill);
  transform:translateX(-50%);
  box-shadow:0 6px 20px rgba(10,132,255,.45);
  font-size:13px;
  animation:rise .4s var(--spring) both;
}
.feed-fresh[hidden]{display:none}
.feed-fresh:active{transform:translateX(-50%) scale(.96)}
.feed-fresh svg{width:14px;height:14px}

/* всплывающее подтверждение с отменой */
.feed-toast{
  position:absolute;z-index:6;top:98px;left:50%;
  display:flex;align-items:center;gap:10px;
  max-width:calc(100% - 24px);
  padding:5px 5px 5px 14px;min-height:40px;
  border-radius:var(--r-pill);
  background:var(--glass-strong);
  backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);
  border:.5px solid var(--glass-line-2);
  box-shadow:var(--shadow-2);
  font-size:13.5px;font-weight:560;white-space:nowrap;
  opacity:0;pointer-events:none;
  transform:translate(-50%,-10px) scale(.96);
  transition:opacity var(--base) var(--ease), transform var(--base) var(--spring);
}
.feed-toast.show{opacity:1;pointer-events:auto;transform:translate(-50%,0)}
.feed-toast-text{overflow:hidden;text-overflow:ellipsis;padding-right:6px}
.feed-toast-text::before{
  content:"";display:inline-block;
  width:8px;height:8px;margin-right:8px;
  border-radius:50%;background:var(--label-3);
}
.feed-toast[data-kind=yes] .feed-toast-text::before{background:var(--green)}
.feed-toast[data-kind=no]  .feed-toast-text::before{background:var(--red)}
.feed-toast[data-kind=bad] .feed-toast-text::before{background:var(--orange)}
.feed-toast-act{
  flex:none;height:30px;padding:0 13px;
  border-radius:var(--r-pill);
  background:rgba(255,255,255,.14);color:#fff;
  font-size:13px;
}
.feed-toast-act:hover{background:rgba(255,255,255,.22)}
.feed-toast-act[hidden]{display:none}

/* ------------------------ конец ленты ------------------------- */
.feed-end{align-items:center;justify-content:center;padding:var(--s5);text-align:center}
.feed-end > div{display:none;flex-direction:column;align-items:center;gap:var(--s2)}
.feed-end .feed-end-load{display:flex}
.feed-end.is-error .feed-end-load,
.feed-end.is-final .feed-end-load{display:none}
.feed-end.is-error:not(.is-final) .feed-end-error{display:flex}
.feed-end.is-final .feed-end-done{display:flex}
.feed-end p{margin:0;max-width:34ch;font-size:13.5px;color:var(--label-2)}
.feed-end h3{margin:var(--s2) 0 0;font-size:19px;font-weight:650;letter-spacing:-.02em}
.feed-end-done > svg{width:52px;height:52px;color:var(--green)}
.feed-end-links{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s2);margin-top:var(--s3)}
.feed-end .spinner{margin:0}
.spinner.is-on{opacity:1;animation:spin .7s linear infinite}

/* ---------------------- шторка с деталями --------------------- */
.sheet-backdrop{
  position:fixed;inset:0;z-index:80;
  background:rgba(0,0,0,.55);
  opacity:0;
  transition:opacity var(--base) var(--ease);
}
.sheet-backdrop.open{opacity:1}
.sheet-backdrop[hidden],.sheet[hidden]{display:none}

.sheet{
  position:fixed;z-index:81;left:0;right:0;bottom:0;
  display:flex;flex-direction:column;
  max-height:90vh;max-height:90dvh;
  border-radius:var(--r-lg) var(--r-lg) 0 0;
  background:var(--surface-1);
  border-top:.5px solid var(--glass-line-2);
  box-shadow:0 -14px 44px rgba(0,0,0,.6);
  transform:translateY(100%);
  transition:transform .34s cubic-bezier(.32,.72,0,1);   /* кривая iOS-шторок */
}
.sheet.open{transform:none}

.sheet-head{
  position:relative;flex:none;
  display:flex;align-items:center;justify-content:space-between;
  padding:20px 12px 8px 16px;
  touch-action:none;               /* шапку тянут вниз, чтобы закрыть */
}
.sheet-head::before{
  content:"";position:absolute;top:7px;left:50%;
  width:36px;height:4px;margin-left:-18px;
  border-radius:2px;background:var(--surface-4);
}
.sheet-title{font-size:17px;font-weight:650;letter-spacing:-.02em}
.sheet-close{
  width:32px;height:32px;padding:0;
  border-radius:50%;
  background:var(--surface-2);color:var(--label-2);
}
.sheet-close:hover{background:var(--surface-3);color:var(--label)}
.sheet-close svg{width:14px;height:14px}

.sheet-body{
  flex:1;min-height:0;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  padding:4px 16px 24px;
  padding-bottom:max(24px, env(safe-area-inset-bottom));
}

.d-price{
  display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;
  font-family:var(--mono);font-size:26px;font-weight:600;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
}
.d-price span{font-family:var(--font);font-size:13.5px;font-weight:500;letter-spacing:0;color:var(--label-2)}
.d-title{margin-top:6px;font-size:15.5px;line-height:1.34;font-weight:600;letter-spacing:-.015em}
.d-median{
  display:flex;flex-direction:column;gap:2px;
  margin-top:var(--s3);padding:9px 12px;
  border-radius:var(--r-sm);
  background:var(--surface-2);
  font-size:13.5px;
}
.d-median b{font-weight:600}
.d-median span{font-size:12px;color:var(--label-2)}
.d-median.is-down{background:rgba(48,209,88,.12)}
.d-median.is-down b{color:#4ade80}
.d-median.is-up{background:rgba(255,69,58,.12)}
.d-median.is-up b{color:#ff8a82}

.d-links{display:flex;gap:var(--s2);margin-top:var(--s3)}
.d-links .btn{flex:1;height:44px}
.d-flags{display:flex;flex-wrap:wrap;gap:5px;margin-top:var(--s3)}

.d-sec{margin-top:var(--s5)}
.d-sec h4{
  margin:0 0 var(--s2);
  font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:var(--label-3);
}
.d-sec h4 span{margin-left:6px;font-weight:500;letter-spacing:0;text-transform:none}
.d-desc{
  margin:0;
  font-size:14.5px;line-height:1.55;color:var(--label);
  white-space:pre-line;overflow-wrap:anywhere;
}
.d-list{
  display:grid;grid-template-columns:minmax(104px,36%) 1fr;
  margin:0;
  border-radius:var(--r-md);
  background:var(--surface-2);
  font-size:13.5px;
  overflow:hidden;
}
.d-list dt,.d-list dd{margin:0;padding:10px 12px;border-bottom:.5px solid rgba(84,84,88,.4)}
.d-list dt{color:var(--label-2)}
.d-list dd{padding-left:0;overflow-wrap:anywhere}
.d-list dt:nth-last-of-type(1),.d-list dd:last-child{border-bottom:none}
.d-map{
  display:block;width:100%;height:240px;
  border:0;border-radius:var(--r-md);
  background:var(--surface-2);
}

/* ------------- телефон и планшет: шапка сайта прячется -------- */
@media (max-width:899px){
  body.feed-page .topbar{display:none}
  body.feed-page.nav-open .topbar{
    display:flex;
    position:fixed;top:0;left:0;right:0;z-index:70;
    padding-top:env(safe-area-inset-top);
    height:calc(var(--nav-h) + env(safe-area-inset-top));
    background:var(--glass-strong);
  }
  body.feed-page.nav-open .feed-bar{top:var(--nav-h)}
  .feed-menu{display:inline-flex}
  .fs-ans{height:42px}
  .fs-yes,.fs-olx{height:46px}
}

/* --------- широкий экран: фото слева, всё остальное справа ---- */
@media (min-width:900px){
  .feed-slide{flex-direction:row}
  .fs-photos{min-width:0;min-height:0}
  .fs-side{
    width:420px;
    border-top:none;border-left:.5px solid var(--glass-line);
  }
  .fs-info{flex:1;min-height:0;gap:10px;padding:22px 22px 12px;overflow:hidden}
  .fs-grab{display:none}
  .fs-price{font-size:30px}
  .fs-title{font-size:17.5px;-webkit-line-clamp:3}
  .fs-chips{flex-wrap:wrap;margin:0;padding:0;overflow:visible}
  /* описание занимает всё оставшееся место и тает к низу */
  .fs-desc{
    display:block;flex:1 1 0;min-height:0;
    font-size:14px;line-height:1.5;
    white-space:pre-line;
    -webkit-mask-image:linear-gradient(#000 calc(100% - 46px),transparent);
            mask-image:linear-gradient(#000 calc(100% - 46px),transparent);
  }
  .fs-actions{padding:10px 18px 18px}
  .fs-stamp{top:60px;left:16px;font-size:13.5px;padding:7px 14px}
  .fs-count{right:16px}
  .fs-liq{left:16px}
  .fs-bars{left:16px;right:16px;bottom:10px}
  .feed-bar{right:420px;padding:12px 16px 20px}

  .sheet{
    left:auto;top:var(--nav-h);bottom:0;right:0;
    width:420px;max-height:none;
    border-radius:0;border-top:none;border-left:.5px solid var(--glass-line-2);
    box-shadow:-18px 0 44px rgba(0,0,0,.5);
    transform:translateX(100%);
  }
  .sheet-head{padding-top:16px}
  .sheet-head::before{display:none}
  .sheet-backdrop{background:transparent}
}

/* низкий экран (телефон боком): описание и флаги уступают место фото */
@media (max-height:520px) and (max-width:899px){
  .feed-slide{flex-direction:row}
  .fs-photos{min-width:0;min-height:0}
  .fs-side{width:46%;max-width:380px;border-top:none;border-left:.5px solid var(--glass-line);justify-content:flex-end}
  .fs-desc,.fs-grab{display:none}
  .fs-info{padding-top:10px}
  .fs-title{-webkit-line-clamp:1}
  .feed-bar{right:46%}
}

@media (prefers-reduced-motion:reduce){
  .fs-ph:not(.ready)::after{animation:none}
  .spinner.is-on{animation:none!important}
}

/* ============================ ЖУРНАЛ ============================ */
/* Цвета колонок = цвета серий на графиках: одна и та же величина
   выглядит одинаково и в сетке, и на диаграмме. */
:root{
  --j-earned:#1aa686; --j-spent:#e8590c; --j-profit:#5e8bff;
  --j-added:#0a84ff;  --j-views:#c27800; --j-rentals:#bf5af2;
  --j-pos:#3fd0a8;    --j-neg:#ff8a4c;
}

.jr-head{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s3);margin-bottom:var(--s4)}
.jr-head h1{margin:0}
.jr-month{
  display:flex;align-items:center;gap:2px;
  padding:3px;
  border-radius:var(--r-pill);
  background:var(--surface-1);
  border:.5px solid var(--glass-line);
}
.jr-month b{min-width:128px;padding:0 6px;text-align:center;font-size:14.5px;font-weight:600;letter-spacing:-.01em}
.jr-arrow,.jr-today{
  display:inline-flex;align-items:center;justify-content:center;
  height:32px;border-radius:var(--r-pill);
  color:var(--label-2);
  transition:background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.jr-arrow{width:32px}
.jr-arrow svg{width:16px;height:16px}
.jr-today{padding:0 12px;margin-left:2px;background:var(--surface-3);color:var(--label);font-size:13px;font-weight:560}
.jr-arrow:hover,.jr-today:hover{background:var(--surface-4);color:var(--label)}

.jr-status{margin-left:auto;font-size:12.5px;color:var(--label-3);transition:color var(--fast) var(--ease)}
.jr-status[data-kind=ok]{color:var(--j-pos)}
.jr-status[data-kind=bad]{color:var(--j-neg)}

[data-sign="1"]{color:var(--j-pos)}
[data-sign="-1"]{color:var(--j-neg)}

/* --------------------------- быстрый ввод --------------------------- */
.jr-quick{
  display:flex;flex-direction:column;gap:var(--s3);
  padding:var(--s4);
  margin-bottom:var(--s4);
  border-radius:var(--r-lg);
  background:var(--glass);
  backdrop-filter:blur(20px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  border:.5px solid var(--glass-line);
  box-shadow:var(--shadow-2);
  scroll-margin-top:calc(var(--nav-h) + 12px);
}

.jrq-day{display:flex;align-items:center;gap:var(--s2)}
.jrq-date{flex:1;display:flex;flex-direction:column;align-items:center;min-width:0}
.jrq-date b{font-size:17px;font-weight:650;letter-spacing:-.02em}
.jrq-date span{font-size:12.5px;color:var(--label-2)}
.jrq-nav{width:40px;height:40px;padding:0;border-radius:50%;background:var(--surface-2);color:var(--label)}
.jrq-nav:hover{background:var(--surface-3)}
.jrq-nav svg{width:17px;height:17px}

.jrq-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s2)}

.jrq-step,.jrq-field{
  position:relative;
  display:flex;flex-direction:column;gap:6px;
  padding:10px 10px 10px 13px;
  border-radius:var(--r-md);
  background:var(--surface-2);
}
/* тонкая полоска цвета серии слева — связывает поле с графиком */
.jrq-step::before,.jrq-field::before{
  content:"";position:absolute;left:0;top:12px;bottom:12px;width:3px;
  border-radius:0 3px 3px 0;background:var(--c, transparent);
}
.k-added{--c:var(--j-added)}
.k-views{--c:var(--j-views)}
.k-rentals{--c:var(--j-rentals)}
.k-taxi,.k-ads{--c:var(--j-spent)}
.k-earned{--c:var(--j-earned)}
.k-apartments{--c:var(--label-3)}

.jrq-label{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--label-3)}

.jrq-ctl{display:flex;align-items:center;gap:6px}
.jrq-btn{
  flex:none;width:40px;height:40px;padding:0;
  border-radius:var(--r-sm);
  background:var(--surface-3);color:var(--label);
  touch-action:manipulation;
}
.jrq-btn:hover{background:var(--surface-4)}
.jrq-btn svg{width:17px;height:17px}

.jrq-in{
  width:100%;min-width:0;height:40px;padding:0 6px;
  border:.5px solid transparent;border-radius:var(--r-sm);
  background:var(--bg);color:var(--label);
  font-family:var(--mono);font-size:19px;font-weight:600;text-align:center;
  font-variant-numeric:tabular-nums;
  -webkit-appearance:none;appearance:none;
}
.jrq-in::placeholder{color:var(--label-4)}
.jrq-in:focus,.jrq-note:focus{outline:none;border-color:var(--tint-line);box-shadow:0 0 0 3.5px var(--tint-bg)}
.jrq-in.is-bad{border-color:var(--j-neg)}

.jrq-cash{position:relative;display:block}
.jrq-cash .jrq-in{text-align:left;padding:0 40px 0 12px}
.jrq-cash i{
  position:absolute;right:11px;top:50%;transform:translateY(-50%);
  font-style:normal;font-size:12.5px;color:var(--label-3);pointer-events:none;
}

.jrq-result{justify-content:space-between;background:transparent;border:.5px dashed var(--separator)}
.jrq-result b{
  font-family:var(--mono);font-size:22px;font-weight:600;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;line-height:40px;
}

.jrq-hint{
  align-self:flex-start;
  height:26px;padding:0 9px;
  border-radius:var(--r-pill);
  background:var(--tint-bg);color:#7cc0ff;
  font-size:11.5px;font-weight:560;
}
.jrq-hint[hidden]{display:none}
.jrq-hint:hover{background:rgba(10,132,255,.26);color:#fff}
.jrq-hint:disabled{opacity:1;background:transparent;color:var(--label-3);padding:0;pointer-events:none}

.jrq-note{
  width:100%;height:42px;padding:0 13px;
  border:.5px solid transparent;border-radius:var(--r-sm);
  background:var(--surface-2);color:var(--label);
  font-family:inherit;font-size:14px;
}
.jrq-note::placeholder{color:var(--label-4)}

/* ----------------------------- карточки ------------------------------ */
.jr-kpis .card-value[data-sign="-1"]{color:var(--j-neg)}
.jr-kpis .card-value[data-sign="1"]{color:var(--label)}
.jr-kpis .card-sub[data-kind=up]{color:var(--j-pos)}
.jr-kpis .card-sub[data-kind=down]{color:var(--j-neg)}

/* ------------------------------ графики ------------------------------ */
.jr-chart-head{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;margin-bottom:var(--s3)}
.jr-chart-head h3{margin:0}
.jr-canvas{position:relative;height:270px}
.jr-canvas.is-low{height:230px}

.jr-funnel{display:flex;flex-direction:column;gap:10px;margin-bottom:var(--s4)}
.jf-row{display:grid;grid-template-columns:86px 1fr 52px 40px;align-items:center;gap:10px;font-size:13px}
.jf-label{color:var(--label-2)}
.jf-bar{height:22px;border-radius:5px;background:var(--surface-2);overflow:hidden}
.jf-bar i{display:block;height:100%;border-radius:5px;background:var(--j-added);transition:width .5s var(--ease)}
.jf-row:nth-child(1) .jf-bar i{background:#4f6f9a}
.jf-row:nth-child(3) .jf-bar i{background:var(--j-views)}
.jf-row:nth-child(4) .jf-bar i{background:var(--j-rentals)}
.jf-v{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums}
.jf-conv{text-align:right;font-size:12px;color:var(--label-3);font-variant-numeric:tabular-nums}

.jr-unit{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2)}
.jr-unit div{display:flex;flex-direction:column;gap:2px;padding:9px 11px;border-radius:var(--r-sm);background:var(--surface-2)}
.jr-unit span{font-size:11.5px;color:var(--label-3)}
.jr-unit b{font-family:var(--mono);font-size:16px;font-weight:600;font-variant-numeric:tabular-nums}

/* ------------------------------- сетка ------------------------------- */
.jr-grid-head{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;margin:var(--s2) 0}
.jr-grid-head h3{margin:0;font-size:16px}

.jr-table{min-width:1020px;font-size:13.5px}
.jr-table thead th.k-earned,.jr-table thead th.k-taxi,.jr-table thead th.k-ads,
.jr-table thead th.k-added,.jr-table thead th.k-views,.jr-table thead th.k-rentals{
  box-shadow:inset 0 -2px 0 var(--c);
}

.jr-table td{padding:0;vertical-align:middle;border-bottom:.5px solid rgba(84,84,88,.22)}
.jr-table td.right{padding:0 12px;font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:13px;white-space:nowrap}
.jr-table tbody tr:hover{background:transparent}

/* закреплённая колонка с датой — на телефоне сетка едет вбок, дата остаётся */
.jr-table .jr-c-day{
  position:sticky;left:0;z-index:1;
  width:84px;min-width:84px;
  background:var(--surface-1);
  border-right:.5px solid var(--separator);
}
.jr-table thead .jr-c-day{z-index:3;background:var(--glass-strong)}
.jr-daybtn{
  display:flex;align-items:baseline;justify-content:flex-start;gap:7px;
  width:100%;height:38px;padding:0 12px;
  border-radius:0;background:transparent;color:var(--label);
  font-weight:500;
}
.jr-daybtn:hover{background:rgba(255,255,255,.05);color:var(--label)}
.jr-daybtn:active{transform:none}
.jr-daybtn b{font-family:var(--mono);font-size:13.5px;font-weight:600;font-variant-numeric:tabular-nums}
.jr-daybtn span{font-size:11.5px;color:var(--label-3)}
.is-weekend .jr-daybtn span{color:var(--j-neg)}

.jr-cell{
  display:block;width:100%;min-width:64px;height:38px;padding:0 12px;
  border:0;border-radius:0;
  background:transparent;color:var(--label);
  font-family:var(--mono);font-size:13.5px;text-align:right;font-variant-numeric:tabular-nums;
  -webkit-appearance:none;appearance:none;
}
.jr-cell.is-text{font-family:var(--font);text-align:left;min-width:220px}
.jr-cell:hover{background:rgba(255,255,255,.04)}
.jr-cell:focus{outline:none;background:var(--surface-2);box-shadow:inset 0 0 0 1.5px var(--blue)}
.jr-cell.is-bad{box-shadow:inset 0 0 0 1.5px var(--j-neg)}

/* заполненная ячейка подкрашивается цветом своей колонки */
.jr-c.has-v{background:color-mix(in srgb, var(--c) 16%, transparent)}
.jr-c.k-apartments.has-v,.jr-c-note.has-v{background:rgba(255,255,255,.035)}

.jr-row.is-future{opacity:.5}
.jr-row.is-future:focus-within{opacity:1}
.jr-row.is-today .jr-c-day{box-shadow:inset 3px 0 0 var(--blue)}
.jr-row.is-today .jr-daybtn b{color:var(--blue)}
.jr-row.is-picked .jr-c-day{background:var(--surface-3)}

.jr-week td{height:36px;background:var(--surface-2);font-weight:600;border-bottom:.5px solid var(--separator)}
.jr-table .jr-week td.jr-c-day{padding:0 12px;background:var(--surface-2);white-space:nowrap}
.jr-week td.jr-c-day b{font-size:12.5px;margin-right:6px}
.jr-week td.jr-c-day span{font-size:11px;color:var(--label-3);font-weight:500}

.jr-total td{
  height:44px;
  background:var(--surface-3);
  border-top:.5px solid var(--separator);
  border-bottom:0;
  font-weight:650;
}
.jr-table .jr-total td.jr-c-day{padding:0 12px;background:var(--surface-3)}

@media (max-width:900px){
  .jrq-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .jr-status{width:100%;margin-left:0}
}
@media (max-width:640px){
  .jr-month{flex:1}
  .jr-month b{flex:1;min-width:0}
  .jr-arrow,.jr-today{height:38px}
  .jr-arrow{width:38px}
  .jr-quick{padding:var(--s3)}
  .jrq-btn,.jrq-in,.jrq-nav{height:44px}
  .jrq-btn{width:44px}
  .jrq-result b{line-height:44px}
  .jr-canvas{height:240px}
  .jf-row{grid-template-columns:74px 1fr 44px 36px;gap:8px}
  .jr-table .jr-c-day{width:72px;min-width:72px}
}

/* ============================ RIELTOR ============================
   Форма черновика для кабинета rieltor.ua (/rieltor/<№>).
   Одна колонка, крупные поля под палец, кнопка сохранения прибита к низу. */

.rl{max-width:760px;margin:0 auto;padding-bottom:110px}
.rl [hidden]{display:none !important}  /* button{display:inline-flex} иначе перебивает hidden */
.rl-back{
  display:inline-flex;align-items:center;gap:4px;
  margin-bottom:var(--s3);
  font-size:14px;color:var(--label-2);
}
.rl-back:hover{color:var(--label)}
.rl-back svg{width:16px;height:16px}

.rl-head{margin-bottom:var(--s4)}
.rl-head h1{margin:0 0 6px;font-size:26px;font-weight:700;letter-spacing:-.02em}
.rl-sub{
  display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;
  margin:0;font-size:14px;color:var(--label-2);
}
.rl-sub span{min-width:0;overflow-wrap:anywhere}
.rl-sub a{flex:none;color:var(--blue);font-weight:560}

.rl-alert{
  margin-bottom:var(--s3);padding:12px 14px;
  border-radius:var(--r-md);
  background:var(--tint-bg);border:.5px solid var(--tint-line);
  font-size:14px;line-height:1.45;color:var(--label);
}
.rl-alert a{color:var(--blue);font-weight:600}
.rl-alert.is-bad{background:rgba(255,69,58,.14);border-color:rgba(255,69,58,.45)}

.rl-card{
  margin-bottom:var(--s3);padding:18px 18px 8px;
  border-radius:var(--r-lg);
  background:var(--surface-1);
  border:.5px solid var(--glass-line);
}
.rl-card h2{
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  margin:0 0 12px;font-size:17px;font-weight:650;letter-spacing:-.01em;
}
.rl-h-note{font-size:12.5px;font-weight:450;color:var(--label-3)}
.rl-note{margin:-4px 0 12px;font-size:13px;line-height:1.45;color:var(--label-2)}
.rl-note b{color:var(--label);font-weight:600}

.rl-field{display:flex;flex-direction:column;gap:6px;margin-bottom:12px;min-width:0;position:relative}
.rl-label{
  display:flex;align-items:center;gap:6px;
  font-size:12px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;
  color:var(--label-3);
}
.rl-label i{font-style:normal;color:var(--orange)}
.rl-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:0 10px}
.rl-row .rl-grow{grid-column:span 2}

.rl input[type=text],.rl select{width:100%;min-width:0;height:44px;font-size:16px}
.rl textarea{
  width:100%;min-height:260px;margin-bottom:12px;padding:12px;
  background:var(--surface-2);color:var(--label);
  border:.5px solid transparent;border-radius:var(--r-sm);
  font-family:inherit;font-size:15px;line-height:1.5;resize:vertical;
}
.rl textarea:focus{outline:none;border-color:var(--tint-line);box-shadow:0 0 0 3.5px var(--tint-bg)}
.rl input:disabled{opacity:.45}

/* бейдж «из справочника / вручную / авто» */
.rl-badge{
  padding:1px 7px;border-radius:var(--r-pill);
  font-size:10.5px;font-style:normal;font-weight:650;letter-spacing:.02em;text-transform:none;
}
.rl-badge.is-ok{background:rgba(48,209,88,.16);color:var(--green)}
.rl-badge.is-warn{background:rgba(255,159,10,.16);color:var(--orange)}
.rl-badge.is-auto{background:var(--surface-3);color:var(--label-2)}

/* сегменты: комнаты, состояние, животные */
.rl-seg{display:flex;flex-wrap:wrap;gap:6px}
.rl-seg button{
  flex:1 1 auto;min-width:46px;height:44px;padding:0 12px;
  background:var(--surface-2);color:var(--label-2);
  font-size:14.5px;font-weight:560;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
}
.rl-seg button:hover{background:var(--surface-3);color:var(--label)}
.rl-seg button[aria-checked="true"]{background:var(--blue);color:#fff}

/* автодополнение улиц */
.rl-list{
  position:absolute;z-index:30;top:100%;left:0;right:0;
  max-height:320px;overflow:auto;
  margin:4px 0 0;padding:4px;list-style:none;
  border-radius:var(--r-md);
  background:var(--glass-strong);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:.5px solid var(--glass-line-2);box-shadow:var(--shadow-2);
}
.rl-list li{
  display:flex;justify-content:space-between;gap:10px;align-items:baseline;
  padding:11px 12px;border-radius:var(--r-xs);
  font-size:15px;cursor:pointer;
}
.rl-list li span{flex:none;font-size:12.5px;color:var(--label-3)}
.rl-list li:hover,.rl-list li[aria-selected="true"]{background:var(--surface-3)}
.rl-list li.is-typed{color:var(--orange)}
.rl-list li.is-exact::before{content:"✓";margin-right:6px;color:var(--green);font-weight:700}
.rl-list li.is-exact{justify-content:flex-start}
.rl-list li.is-exact span{margin-left:auto}

.rl-quick,.rl-houses{display:flex;flex-wrap:wrap;gap:6px;margin:-4px 0 12px}
.rl-houses{margin:2px 0 0}
.rl-pill{
  height:36px;padding:0 13px;
  background:var(--surface-2);color:var(--label);
  font-size:14px;font-weight:540;
}
.rl-pill span{margin-left:4px;font-size:12px;color:var(--label-3)}
.rl-pill:hover{background:var(--surface-3);color:var(--label)}
.rl-pill.is-exact{box-shadow:inset 0 0 0 1px var(--tint-line)}
.rl-pill.on{background:var(--blue);color:#fff}
.rl-pill.is-typed{color:var(--orange)}

.rl-geo{display:flex;flex-wrap:wrap;gap:6px 18px;margin:2px 0 12px;font-size:14px;color:var(--label)}
.rl-geo b{margin-right:4px;font-size:12px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--label-3)}

.rl-link{height:auto;padding:0;background:none;color:var(--blue);font-size:13.5px;font-weight:560}
.rl-link:hover{background:none;color:var(--blue-press)}

/* фото */
.rl-photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:6px;margin-bottom:12px}
.rl-ph{
  position:relative;height:auto;aspect-ratio:4/3;padding:0;overflow:hidden;
  border-radius:var(--r-sm);background:var(--surface-2);
}
.rl-ph:hover{background:var(--surface-2)}
.rl-ph img{width:100%;height:100%;object-fit:cover;transition:opacity var(--fast) var(--ease),filter var(--fast) var(--ease)}
.rl-ph-n{
  position:absolute;left:5px;top:5px;
  min-width:20px;height:20px;padding:0 5px;border-radius:var(--r-pill);
  display:flex;align-items:center;justify-content:center;
  background:var(--blue);color:#fff;font-size:11.5px;font-weight:650;
}
.rl-ph[aria-pressed="false"] img{opacity:.28;filter:grayscale(1)}
.rl-ph[aria-pressed="false"] .rl-ph-n{background:var(--surface-4);color:var(--label-2)}

/* нижняя панель */
.rl-bar{
  position:fixed;z-index:40;left:0;right:0;bottom:0;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  background:var(--glass-strong);
  backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%);
  border-top:.5px solid var(--glass-line);
}
.rl-bar-in{max-width:760px;margin:0 auto;display:flex;align-items:center;gap:12px}
.rl-status{flex:1;min-width:0;font-size:13.5px;color:var(--label-2);line-height:1.3}
.rl-status[data-kind="ok"]{color:var(--green)}
.rl-status[data-kind="warn"]{color:var(--orange)}
.rl-status[data-kind="bad"]{color:var(--red)}
.rl-bar button{flex:none;height:48px;padding:0 22px;font-size:16px;border-radius:var(--r-md)}

/* успех */
.rl-done{
  padding:36px 20px;text-align:center;
  border-radius:var(--r-lg);background:var(--surface-1);border:.5px solid var(--glass-line);
}
.rl-done-ic{
  width:64px;height:64px;margin:0 auto 14px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(48,209,88,.16);color:var(--green);
}
.rl-done-ic svg{width:32px;height:32px}
.rl-done h2{margin:0 0 8px;font-size:21px}
.rl-done p{margin:0 0 18px;color:var(--label-2);font-size:14.5px;line-height:1.45}
.rl-done-btns{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.rl-done-btns .btn{height:44px;padding:0 18px}

/* вход в форму из ленты */
.fs-rlt{
  flex:none;
  display:inline-flex;align-items:center;justify-content:center;gap:5px;
  height:46px;padding:0 12px;
  border-radius:var(--r-sm);
  background:var(--surface-2);color:var(--label);
  font-size:14px;font-weight:590;
  transition:background var(--fast) var(--ease), transform var(--fast) var(--spring);
}
.fs-rlt:hover{background:var(--surface-3);color:var(--label)}
.fs-rlt:active{transform:scale(.96)}
.fs-rlt svg{width:15px;height:15px}
.fs-rlt.is-done{color:var(--green)}

@media (max-width:640px){
  .rl-card{padding:16px 14px 6px;border-radius:var(--r-md)}
  .rl-head h1{font-size:23px}
  .rl-row{grid-template-columns:1fr 1fr}
  .rl-row .rl-grow{grid-column:1 / -1}
  .rl-bar button{padding:0 16px}
}