:root{
  /* Цвета берём из темы Telegram; если открыто в обычном браузере —
     используются запасные цвета Reflower (белый фон, как в референсе) */
  --bg: var(--tg-theme-bg-color, #ffffff);
  --card: var(--tg-theme-bg-color, #ffffff);
  --text: var(--tg-theme-text-color, #24301f);
  --hint: var(--tg-theme-hint-color, #88907e);
  --accent: #3d6b47;          /* глубокий зелёный Reflower */
  --accent-text: #ffffff;
  --danger: #b4593c;          /* терракота — отмена брони / удаление */
  /* Подложка карточек/кнопок и цвет тонких границ. НЕ берём из системной
     переменной Telegram (--tg-theme-secondary-bg-color): в тёмной теме она
     ТЕМНЕЕ фона, и карточки тонут в чёрном. Задаём fallback'ом на обе темы,
     а ниже — точнее через color-mix относительно фактического фона. */
  --surface-muted: #eceae2;   /* светлая тема: чуть темнее белого */
  --line: #dcdad0;            /* граница: заметнее подложки */
  --chip: var(--surface-muted);
  --tabbar-h: 62px;
}
@media (prefers-color-scheme: dark){
  :root{
    --surface-muted: #23242a; /* тёмная тема: заметно СВЕТЛЕЕ чёрного фона */
    --line: #33343c;
  }
}
/* color-mix точнее подгоняет подложку под реальный фон Telegram (он не всегда
   чисто белый/чёрный) и работает в обе стороны автоматически. Где не
   поддерживается (очень старые WebView) — остаются значения выше. */
@supports (background: color-mix(in srgb, white, black)){
  :root{
    --surface-muted: color-mix(in srgb, var(--bg) 90%, var(--text) 10%);
    --line: color-mix(in srgb, var(--bg) 82%, var(--text) 18%);
  }
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
/* Страница целиком НЕ прокручивается — прокручивается только список внутри
   (<main>). Так шапка и таб-бар просто стоят на своих местах и физически не
   могут уехать: на iOS «резиновый» скролл утаскивал за собой position:fixed,
   и таб-бар пропадал при оттягивании списка. */
html,body{margin:0; padding:0; height:100%; overflow:hidden}
body{
  background:var(--bg); color:var(--text);
  font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  display:flex; flex-direction:column;
}

/* ---------- шапка ---------- */
header{
  flex:0 0 auto; z-index:12; /* выше сетки и панелей, но ниже шторки/оверлея */
  background:var(--bg);
  padding:14px 16px 10px;
}

/* Прокручивается только эта область. overscroll-behavior:contain — чтобы
   «дотягивание» списка не уходило наружу и Telegram не сворачивал окно. */
main{
  flex:1 1 auto; overflow-y:auto; -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
}
.header-row{display:flex; align-items:center; justify-content:space-between; gap:10px}
.brand h1{margin:0; font-size:22px; letter-spacing:.2px}

/* ---------- локация (кнопка + выпадающий список в шапке) ---------- */
.location-wrap{position:relative; flex:0 0 auto}
.location-btn{
  display:flex; align-items:center; gap:4px;
  border:1.5px solid transparent; background:var(--chip); color:var(--text);
  border-radius:999px; padding:8px 12px 8px 14px; font-size:13.5px; font-weight:600;
  cursor:pointer; box-shadow:0 1px 2px rgba(0,0,0,.06); white-space:nowrap; max-width:44vw;
  overflow:hidden; text-overflow:ellipsis;
}
.location-btn .chev{font-size:9px; opacity:.55; margin-left:1px; flex:0 0 auto}
.location-btn.open{border-color:var(--accent); color:var(--accent)}
.location-dropdown{
  position:absolute; right:0; top:calc(100% + 8px); z-index:13;
  background:var(--card); border:0.5px solid var(--line);
  border-radius:14px; box-shadow:0 8px 28px rgba(0,0,0,.18);
  min-width:200px; max-height:55vh; overflow-y:auto; padding:6px;
}
.location-dropdown .opt{
  display:block; width:100%; text-align:left; border:0; background:none;
  padding:11px 13px; border-radius:10px; font-size:14.5px; color:var(--text);
  cursor:pointer; white-space:nowrap;
}
.location-dropdown .opt.active{color:var(--accent); font-weight:700; background:var(--surface-muted)}

/* ---------- вкладки (панели) ---------- */
.panel.hidden{display:none}
.hidden{display:none}
.section-title{font-size:16px; margin:16px 16px 8px; font-weight:700}

/* ---------- профиль: карточка пользователя + меню ---------- */
.profile-head{display:flex; flex-direction:column; align-items:center; padding:22px 16px 18px}
.avatar{
  width:84px; height:84px; border-radius:50%; overflow:hidden;
  background:var(--accent); color:var(--accent-text);
  display:flex; align-items:center; justify-content:center;
  font-size:34px; font-weight:600;
}
.avatar img{width:100%; height:100%; object-fit:cover}
.profile-name{font-size:20px; font-weight:700; margin-top:12px; text-align:center}
.profile-city{font-size:13.5px; color:var(--hint); margin-top:2px}

.menu-list{display:flex; flex-direction:column; gap:8px; padding:6px 16px}
.menu-item{
  display:flex; align-items:center; gap:12px; width:100%;
  background:var(--surface-muted); border:0; border-radius:14px;
  padding:15px 16px; font-size:15.5px; color:var(--text); cursor:pointer;
  font-family:inherit; text-align:left;
}
.menu-item .mi-icon{font-size:19px; flex:0 0 auto}
.menu-item .mi-label{flex:1; min-width:0}
.menu-item .mi-count{color:var(--hint); font-size:14px}
.menu-item .mi-chev{color:var(--hint); font-size:22px; line-height:1; flex:0 0 auto}

/* Кнопка «назад» внутри под-видов профиля */
.back-row{
  display:flex; align-items:center; gap:4px; background:none; border:0;
  color:var(--accent); font-size:15px; font-family:inherit; cursor:pointer;
  padding:14px 16px 4px;
}
.back-row span{font-size:22px; line-height:1}

/* ---------- профиль: форма редактирования ---------- */
.edit-form{padding:6px 16px 16px; display:flex; flex-direction:column; gap:20px}
.edit-block{display:flex; flex-direction:column; gap:8px}
.edit-block .lbl{font-size:13.5px; color:var(--hint); font-weight:600}
.edit-input{
  width:100%; border:1.5px solid var(--line); border-radius:13px; padding:13px 15px;
  font-size:16px; background:var(--surface-muted); color:var(--text); font-family:inherit;
}
.edit-input:focus{outline:none; border-color:var(--accent)}
.edit-row{display:flex; gap:8px}
.edit-row .edit-input{flex:1}
.edit-btn{
  border:0; border-radius:13px; padding:0 18px; font-size:14.5px; font-weight:600;
  background:var(--accent); color:var(--accent-text); cursor:pointer; font-family:inherit;
  white-space:nowrap;
}
.edit-btn:disabled{opacity:.55}
.edit-geo{
  border:1.5px solid var(--accent); background:transparent; color:var(--accent);
  border-radius:13px; padding:12px; font-size:14px; font-weight:600; cursor:pointer;
  font-family:inherit;
}
.edit-current{font-size:13px; color:var(--hint)}
.edit-suggest{display:flex; flex-direction:column; gap:6px}
.edit-suggest button{
  text-align:left; border:1.3px dashed var(--accent); background:transparent;
  color:var(--accent); border-radius:11px; padding:9px 13px; font-size:14px; cursor:pointer;
}
.edit-note{font-size:12.5px; margin-top:-2px}
.edit-note.err{color:var(--danger)}
.edit-note.ok{color:var(--accent)}

/* ---------- фильтры (вкладка «Объявления») ---------- */
.filterbar{padding:2px 16px 4px; display:flex; flex-direction:column; gap:8px}

/* Тип объявления — карточки «иконка сверху, подпись снизу», активная закрашена */
.typegroup{display:flex; gap:14px; overflow-x:auto; padding-bottom:2px; scrollbar-width:none}
.typegroup::-webkit-scrollbar{display:none}
.typecard{
  flex:0 0 auto; width:60px; border:0; background:none; padding:0; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:6px;
}
.typecard .box{
  width:56px; height:56px; border-radius:16px; background:var(--surface-muted);
  display:flex; align-items:center; justify-content:center; font-size:24px;
  transition:background .15s ease;
}
.typecard .label{font-size:12px; color:var(--hint); white-space:nowrap}
.typecard.active .box{background:var(--accent)}
.typecard.active .label{color:var(--text); font-weight:700}

.count{margin:8px 16px 0; font-size:13px; color:var(--hint)}
.count b{color:var(--text); font-weight:600}

/* ---------- сетка карточек ---------- */
.grid{
  display:grid; grid-template-columns:repeat(2, 1fr);
  gap:12px; padding:8px 16px 16px;
}
@media (min-width:560px){ .grid{grid-template-columns:repeat(3,1fr)} }
.card{
  /* Фото сверху (у него своя картинка/плейсхолдер) не задевает — а вот подпись
     снизу на белой странице без --surface-muted была бы не отличима от фона */
  background:var(--surface-muted); border-radius:16px; overflow:hidden; cursor:pointer;
  box-shadow:0 1px 3px rgba(0,0,0,.07);
  display:flex; flex-direction:column;
}
.ph{
  position:relative; aspect-ratio:1/1.05; background:#e6e2d6;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.ph img{width:100%; height:100%; object-fit:cover; display:block}
.ph .fallback{font-size:44px; opacity:.55}
.price{
  position:absolute; left:8px; bottom:8px;
  background:rgba(255,255,255,.93); color:#24301f;
  border-radius:10px; padding:4px 9px; font-weight:700; font-size:14px;
}
.tag{
  position:absolute; right:8px; top:8px; border-radius:9px;
  padding:3px 8px; font-size:11.5px; font-weight:600;
  background:rgba(255,255,255,.93); color:var(--accent);
}
.tag.archived{color:var(--hint)}
.card .body{padding:9px 11px 11px}
.card .type{font-size:14.5px; font-weight:600; line-height:1.25}
.card .meta{font-size:12.5px; color:var(--hint); margin-top:3px; line-height:1.35}

/* ---------- строчные списки (Отклики, Профиль) ---------- */
.rowlist{display:flex; flex-direction:column; gap:8px; padding:0 16px 8px}
.mgmt-row{
  background:var(--surface-muted); border-radius:14px; padding:10px; display:flex; gap:10px;
  align-items:center; box-shadow:0 1px 3px rgba(0,0,0,.06); cursor:pointer;
}
.mgmt-row .thumb{
  width:56px; height:56px; border-radius:10px; background:#e6e2d6; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.mgmt-row .thumb img{width:100%; height:100%; object-fit:cover}
.mgmt-row .thumb .fallback{font-size:22px; opacity:.55}
.mgmt-row .info{flex:1; min-width:0}
.mgmt-row .title{font-size:14.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.mgmt-row .sub{font-size:12.5px; color:var(--hint); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.mgmt-row .side{flex:0 0 auto; display:flex; flex-direction:column; align-items:flex-end; gap:4px}
.mgmt-row .side .amount{font-weight:700; font-size:14.5px; color:var(--accent)}
/* Тег статуса объявления в списке «Мои объявления» */
.status-tag{font-size:11px; font-weight:600; padding:2px 8px; border-radius:999px; white-space:nowrap}
.status-tag.active{background:var(--accent); color:var(--accent-text)}
.status-tag.archived{background:var(--line); color:var(--hint)}
.rowbtn{
  border:0; border-radius:10px; padding:7px 11px; font-size:12.5px; font-weight:600;
  background:var(--accent); color:var(--accent-text); cursor:pointer; white-space:nowrap;
}
.rowbtn.ghost{background:transparent; color:var(--accent); border:1.3px solid var(--accent)}
.rowbtn.ghost.danger{color:var(--danger); border-color:var(--danger)}
.rowbtn:disabled{opacity:.55}

/* ---------- пустые состояния ---------- */
.note{padding:32px 28px; text-align:center; color:var(--hint); font-size:15px; line-height:1.5}
.note .big{font-size:40px; margin-bottom:10px}

/* скелет загрузки */
.sk{background:var(--card); border-radius:16px; overflow:hidden}
.sk .a{aspect-ratio:1/1.05; background:linear-gradient(100deg,#e8e4d8 40%,#f2efe7 50%,#e8e4d8 60%); background-size:200% 100%; animation:sh 1.2s infinite}
.sk .b{height:52px}
@keyframes sh{to{background-position:-200% 0}}

/* ---------- карточка подробностей (нижняя шторка) ---------- */
.overlay{
  position:fixed; inset:0; background:rgba(20,25,15,.45); z-index:20;
  opacity:0; pointer-events:none; transition:opacity .2s;
}
.overlay.open{opacity:1; pointer-events:auto}
.sheet{
  position:fixed; left:0; right:0; bottom:0; z-index:21;
  background:var(--card); border-top:0.5px solid var(--line);
  border-radius:20px 20px 0 0;
  transform:translateY(105%); transition:transform .25s ease;
  max-height:92vh; overflow-y:auto;
}
.sheet.open{transform:translateY(0)}
.sheet .grip{width:38px; height:4px; border-radius:2px; background:var(--hint); opacity:.4; margin:10px auto 2px}
.sheet .photo{position:relative; margin:10px 16px 0; border-radius:16px; overflow:hidden; aspect-ratio:4/3.4; background:#e6e2d6; display:flex; align-items:center; justify-content:center}
.sheet .photo img{width:100%; height:100%; object-fit:cover}
.sheet .photo .fallback{font-size:64px; opacity:.55}
.sheet .inner{padding:14px 20px 20px}
.sheet h2{margin:0 0 2px; font-size:21px}
.bigprice{font-size:20px; font-weight:800; color:var(--accent); margin:2px 0 10px}
.rows{display:flex; flex-direction:column; gap:8px; font-size:15px}
.rows div{display:flex; gap:8px}
.rows .k{opacity:.85}
.left{margin-top:10px; font-size:13px; color:var(--hint)}
.actions{margin-top:16px; display:flex; flex-direction:column; gap:8px}
.btn{
  width:100%; border:0; border-radius:14px; padding:15px; font-size:16.5px;
  font-weight:700; cursor:pointer; background:var(--accent); color:var(--accent-text);
}
.btn.cancel{background:transparent; color:var(--danger); border:1.5px solid var(--danger)}
.btn.secondary{background:transparent; color:var(--accent); border:1.5px solid var(--accent)}
.btn:disabled{opacity:.6}
.hintline{margin-top:10px; font-size:12.5px; color:var(--hint); text-align:center; line-height:1.45}
.hintline a{color:var(--accent)}

/* ---------- таб-бар ---------- */
.tabbar{
  /* Не fixed, а обычная нижняя часть страницы (см. body/main выше) —
     тогда он не уезжает при прокрутке. padding-bottom — отступ под
     полоску-«домой» на айфоне; работает благодаря viewport-fit=cover
     в index.html, без него env(...) равен нулю и таб-бар лип к краю. */
  flex:0 0 auto; z-index:9;
  height:calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom:env(safe-area-inset-bottom, 0px);
  background:var(--card); display:flex;
  /* Граница сверху вместо одной тени: в тёмной теме чёрная тень на чёрном фоне
     не видна, и таб-бар сливался — border от --line виден в обеих темах. */
  border-top:0.5px solid var(--line);
  box-shadow:0 -1px 8px rgba(0,0,0,.08);
}
.tab{
  flex:1; border:0; background:transparent; color:var(--hint); cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  font-size:11px; font-family:inherit;
}
.tab .ic{font-size:21px; line-height:1}
.tab.active{color:var(--accent); font-weight:600}

/* ---------- визард создания/редактирования ---------- */
.wizard{padding:14px 16px 16px}
.wiz-progress{font-size:12.5px; color:var(--hint); margin-bottom:6px}
.wiz-title{font-size:19px; font-weight:700; margin:0 0 4px}
.wiz-hint{font-size:13.5px; color:var(--hint); margin:0 0 16px; line-height:1.4}
.wiz-options{display:flex; flex-direction:column; gap:9px; margin-bottom:16px}
.wiz-opt{
  text-align:left; border:1.5px solid transparent; background:var(--surface-muted);
  border-radius:13px; padding:14px 16px; font-size:15.5px; cursor:pointer;
  box-shadow:0 1px 2px rgba(0,0,0,.05); color:var(--text);
}
.wiz-opt.selected{border-color:var(--accent); color:var(--accent); font-weight:700; background:var(--card)}
.wiz-input{
  width:100%; border:1.5px solid #d8d3c4; border-radius:13px; padding:14px 16px;
  font-size:16px; margin-bottom:10px; background:var(--card); color:var(--text);
  font-family:inherit;
}
.wiz-input:focus{outline:none; border-color:var(--accent)}
.wiz-suggest{display:flex; flex-direction:column; gap:8px; margin-bottom:14px}
.wiz-suggest button{
  text-align:left; border:1.3px dashed var(--accent); background:transparent; color:var(--accent);
  border-radius:11px; padding:10px 14px; font-size:14.5px; cursor:pointer;
}
.wiz-geo{
  width:100%; border:1.5px solid var(--accent); background:transparent; color:var(--accent);
  border-radius:13px; padding:13px; font-size:14.5px; font-weight:600; cursor:pointer; margin-bottom:6px;
}
.wiz-error{color:var(--danger); font-size:13.5px; margin:-4px 0 12px}
.wiz-photo-drop{
  border:1.6px dashed #c9c2ac; border-radius:16px; padding:26px 16px; text-align:center;
  color:var(--hint); font-size:14.5px; cursor:pointer; margin-bottom:12px; position:relative; overflow:hidden;
}
.wiz-photo-drop img{width:100%; border-radius:12px; display:block}
.wiz-photo-drop input{position:absolute; inset:0; opacity:0; cursor:pointer}
.wiz-preview-card{background:var(--surface-muted); border-radius:16px; overflow:hidden; box-shadow:0 1px 3px rgba(0,0,0,.06); margin-bottom:16px}
.wiz-preview-card .ph{aspect-ratio:4/3}
.wiz-preview-card .body{padding:12px 14px}
.wiz-nav{display:flex; gap:10px}
.wiz-nav .btn{flex:1}
.wiz-cancel{
  display:block; margin:14px auto 0; background:none; border:0; color:var(--hint);
  font-size:13.5px; text-decoration:underline; cursor:pointer;
}

/* ---------- всплывающее сообщение ---------- */
.toast{
  position:fixed; left:50%; bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px) + 14px);
  transform:translateX(-50%) translateY(20px);
  background:#2b3527; color:#fff; border-radius:12px; padding:11px 18px;
  font-size:14.5px; opacity:0; transition:.25s; z-index:30; pointer-events:none;
  max-width:86vw; text-align:center;
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0)}