:root{
  --bg:#f5f7fb;
  --card:#fff;
  --text:#121826;
  --muted:#6b7280;
  --line:#e5e7eb;
  --accent:#1f77ff;
  --danger:#b42318;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:var(--bg);
  color:var(--text);
  padding-bottom:84px;
}
a{color:inherit;text-decoration:none}
.top{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:20px;max-width:980px;margin:0 auto;
}
h1{margin:0;font-size:28px}
h2{font-size:20px;margin:26px 0 14px}
.eyebrow{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.primary,.big,.filters button{
  border:0;background:var(--accent);color:white;font-weight:700;
  border-radius:14px;padding:12px 16px;cursor:pointer;
}
.wrap{max-width:980px;margin:0 auto;padding:0 20px}
.narrow{max-width:640px}
.filters{
  display:grid;grid-template-columns:2fr 1fr 1fr auto;
  gap:10px;background:var(--card);padding:12px;border-radius:18px;
  box-shadow:0 8px 30px rgba(17,24,39,.05);
}
input,select,textarea{
  width:100%;border:1px solid var(--line);background:white;border-radius:12px;
  padding:12px;font:inherit;outline:none;
}
textarea{resize:vertical}
.chips{display:flex;gap:8px;overflow:auto;padding:14px 0 2px}
.chips a{
  white-space:nowrap;background:white;border:1px solid var(--line);
  border-radius:999px;padding:9px 12px;font-size:14px;
}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.card{
  background:var(--card);
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 8px 30px rgba(17,24,39,.05);
  display:flex;
  flex-direction:column;
}

.thumb{
  width:100%;
  aspect-ratio:4 / 3;
  overflow:hidden;
  background:#eef2f7;
}

.photo{
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
  background:linear-gradient(145deg,#eef4ff,#dceaff);
  font-size:56px;
}

.photo-img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  background:#eef2f7;
}

.detail-photo-wrap{
  width:100%;
  aspect-ratio:4 / 3;
  max-height:520px;
  overflow:hidden;
  border-radius:20px;
  background:#eef2f7;
  display:flex;
  align-items:center;
  justify-content:center;
}

.detail-photo{
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
  background:linear-gradient(145deg,#eef4ff,#dceaff);
  font-size:90px;
}

.detail-photo-img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  background:#eef2f7;
}
.card-body{padding:14px}
.price,.detail-price{font-weight:800;font-size:20px}
.title{font-weight:650;margin-top:5px}
.meta,.detail-meta{font-size:13px;color:var(--muted);margin-top:8px}
.detail-price{font-size:30px;margin:18px 0 8px}
.description{font-size:16px;line-height:1.55;background:white;border-radius:16px;padding:16px}
.form{display:grid;gap:16px;background:white;padding:20px;border-radius:20px}
.form label{display:grid;gap:7px;font-weight:650}
.big{width:100%;font-size:16px;padding:14px}
.back{color:var(--accent);font-weight:650}
.empty{color:var(--muted);padding:30px 0}
.error{
  margin-bottom:14px;
  padding:12px 14px;
  border-radius:12px;
  color:var(--danger);
  background:#fef3f2;
  border:1px solid #fecdca;
}
.preview-box{
  overflow:hidden;
  border-radius:16px;
  background:#eef2f7;
}
.preview-box img{
  display:block;
  width:100%;
  max-height:320px;
  object-fit:cover;
}
.hidden{display:none}
.bottom{
  position:fixed;left:50%;bottom:0;transform:translateX(-50%);
  width:min(100%,720px);display:grid;grid-template-columns:repeat(5,1fr);
  background:rgba(255,255,255,.96);backdrop-filter:blur(12px);
  border-top:1px solid var(--line);padding:8px 8px calc(8px + env(safe-area-inset-bottom));
}
.bottom a{display:grid;place-items:center;gap:3px;font-size:20px}
.bottom span{font-size:10px;color:var(--muted)}
.bottom .sell{color:var(--accent);font-weight:800}

@media(max-width:700px){
  .filters{grid-template-columns:1fr 1fr}
  .filters .search-field{grid-column:1/-1}
  .filters button{grid-column:1/-1}
  .grid{grid-template-columns:1fr 1fr}
  .top{padding:16px}
  .wrap{padding:0 14px}
}


.search-field{
  position:relative;
}

.search-field input{
  padding-right:42px;
}

.clear-search{
  position:absolute;
  top:50%;
  right:8px;
  transform:translateY(-50%);
  width:30px;
  height:30px;
  padding:0;
  border:0;
  border-radius:50%;
  background:#eef2f7;
  color:var(--muted);
  font-size:22px;
  line-height:1;
  cursor:pointer;
}

.clear-search:hover{
  background:#e5eaf1;
}

.clear-search[hidden]{
  display:none;
}

.field-hint{
  color:var(--muted);
  font-size:12px;
  font-weight:400;
  line-height:1.35;
}

.card[hidden]{
  display:none;
}


.top-actions{
  display:flex;
  align-items:center;
  gap:8px;
}

.user-chip{
  display:flex;
  align-items:center;
  gap:6px;
  max-width:220px;
  padding:10px 12px;
  border-radius:14px;
  background:white;
  border:1px solid var(--line);
  font-size:13px;
  font-weight:650;
}

.user-chip span{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.max-user-ready{
  color:var(--text);
}

.profile-card{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:16px;
  align-items:start;
  background:white;
  border-radius:20px;
  padding:20px;
  box-shadow:0 8px 30px rgba(17,24,39,.05);
}

.profile-avatar{
  width:64px;
  height:64px;
  border-radius:18px;
  display:grid;
  place-items:center;
  background:#eef4ff;
  font-size:30px;
}

.profile-row{
  display:flex;
  justify-content:space-between;
  gap:16px;
  padding:12px 0;
  margin:0;
  border-bottom:1px solid var(--line);
}

.profile-row span{
  color:var(--muted);
}

.success-note{
  margin-top:16px;
  padding:12px 14px;
  background:#ecfdf3;
  border:1px solid #abefc6;
  border-radius:12px;
  font-size:14px;
}

.profile-next{
  margin-top:14px;
  padding:16px;
  background:white;
  border-radius:16px;
  color:var(--muted);
  line-height:1.5;
}

@media(max-width:700px){
  .top-actions{
    gap:6px;
  }

  .user-chip{
    max-width:130px;
    padding:9px 10px;
  }

  .profile-card{
    grid-template-columns:1fr;
  }
}


/* v5.1 — адаптация верхней панели под узкое окно MAX Mini App */
.top{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:start;
}

.top > div:first-child{
  min-width:0;
}

.top-actions{
  min-width:0;
  flex-shrink:0;
}

.user-chip,
.primary{
  box-sizing:border-box;
}

@media(max-width:900px){
  .top{
    gap:12px;
  }

  .top-actions{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    width:150px;
    gap:8px;
  }

  .user-chip{
    width:100%;
    max-width:100%;
    min-width:0;
    justify-content:flex-start;
  }

  .primary{
    width:100%;
    text-align:center;
    white-space:nowrap;
  }
}

@media(max-width:520px){
  .top{
    grid-template-columns:minmax(0,1fr) 126px;
    padding:14px;
  }

  .top-actions{
    width:126px;
  }

  .user-chip{
    padding:8px 9px;
    font-size:12px;
  }

  .primary{
    padding:10px 11px;
  }

  h1{
    font-size:26px;
    line-height:1.08;
  }

  .eyebrow{
    font-size:11px;
  }
}


/* v5.2 — mobile-first header for MAX Mini App */
.top{
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
}

.top h1{
  font-size:28px;
  line-height:1.08;
}

@media(max-width:900px){
  .top{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    gap:12px;
    padding:16px 14px;
  }

  /* На мобильном профиль уже есть в нижнем меню,
     поэтому не дублируем имя в тесной шапке. */
  .top .user-chip{
    display:none;
  }

  .top-actions{
    width:auto;
    display:flex;
    flex-direction:row;
    align-items:center;
    gap:0;
  }

  .top-actions .primary{
    width:auto;
    min-width:0;
    padding:10px 14px;
    border-radius:12px;
    font-size:14px;
    line-height:1.2;
    white-space:nowrap;
  }

  .top h1{
    font-size:30px;
    line-height:1.05;
  }

  .top .eyebrow{
    font-size:11px;
    line-height:1.2;
  }

  .chips{
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }

  .chips::-webkit-scrollbar{
    display:none;
  }
}

@media(max-width:420px){
  .top h1{
    font-size:27px;
  }

  .top-actions .primary{
    padding:9px 12px;
    font-size:13px;
  }

  .filters{
    gap:8px;
    padding:10px;
  }

  .grid{
    gap:10px;
  }

  .card-body{
    padding:11px;
  }

  .price{
    font-size:18px;
  }

  .title{
    font-size:14px;
  }

  .meta{
    font-size:12px;
  }
}


/* v6 — профиль владельца и "Мои объявления" */
.profile-action{
  margin-top:12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:16px;
  background:white;
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:0 8px 30px rgba(17,24,39,.04);
}

.profile-action div{
  display:grid;
  gap:4px;
}

.profile-action span{
  color:var(--muted);
  font-size:13px;
  line-height:1.4;
}

.profile-action b{
  color:var(--accent);
  font-size:22px;
}

.my-ads-intro{
  margin:0 0 16px;
  padding:12px 14px;
  background:white;
  border:1px solid var(--line);
  border-radius:14px;
  color:var(--muted);
  font-size:14px;
}

.owner-badge{
  display:inline-block;
  width:max-content;
  margin-top:10px;
  padding:5px 8px;
  border-radius:999px;
  background:#ecfdf3;
  color:#067647;
  font-size:11px;
  font-weight:700;
}

.empty-state{
  padding:44px 20px;
  text-align:center;
  background:white;
  border-radius:20px;
  border:1px solid var(--line);
}

.empty-state .empty-icon{
  font-size:48px;
}

.empty-state h2{
  margin:12px 0 8px;
}

.empty-state p{
  max-width:440px;
  margin:0 auto 22px;
  color:var(--muted);
  line-height:1.5;
}

.seller-card{
  display:flex;
  align-items:center;
  gap:12px;
  margin:14px 0;
  padding:14px;
  background:white;
  border:1px solid var(--line);
  border-radius:16px;
}

.seller-avatar{
  width:44px;
  height:44px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background:#eef4ff;
  font-size:22px;
}

.seller-card > div:last-child{
  display:grid;
  gap:2px;
}

.seller-card span,
.seller-card small{
  color:var(--muted);
  font-size:12px;
}

.seller-card strong{
  font-size:15px;
}

.legacy-note{
  margin:14px 0;
  padding:12px 14px;
  border-radius:14px;
  background:#fff8e8;
  border:1px solid #f5d98b;
  color:#7a5b00;
  font-size:13px;
  line-height:1.45;
}

.secondary-big{
  display:block;
  margin-top:12px;
  background:#eef4ff;
  color:var(--accent);
  text-align:center;
}

.danger-big{
  margin-top:10px;
  background:#d92d20;
}

.big:disabled{
  opacity:.55;
  cursor:not-allowed;
}

@media(max-width:420px){
  .profile-action{
    padding:14px;
  }

  .my-ads-intro{
    font-size:13px;
  }
}


/* v7 — связь покупателя с продавцом через MAX-бота */
.contact-box{
  margin-top:16px;
  padding:16px;
  border:1px solid var(--line);
  border-radius:18px;
  background:white;
}

.contact-box label{
  display:block;
  margin-bottom:8px;
  font-weight:700;
}

.contact-box textarea{
  width:100%;
  box-sizing:border-box;
  resize:vertical;
  min-height:110px;
}

.contact-box-footer{
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:center;
  gap:12px;
  margin-top:8px;
}

.contact-box-footer span{
  color:var(--muted);
  font-size:12px;
  white-space:nowrap;
}

.contact-box-footer .big{
  margin:0;
}

.contact-status{
  margin-top:10px;
  padding:10px 12px;
  border-radius:12px;
  font-size:13px;
  line-height:1.4;
}

.contact-status.success{
  color:#067647;
  background:#ecfdf3;
  border:1px solid #abefc6;
}

.contact-status.error{
  color:#b42318;
  background:#fef3f2;
  border:1px solid #fecdca;
}

@media(max-width:420px){
  .contact-box-footer{
    grid-template-columns:1fr;
  }

  .contact-box-footer span{
    order:2;
    text-align:right;
  }
}


/* v8 — несколько фотографий и галерея */
.photos-preview{
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  gap:8px;
}

.photo-preview-item{
  position:relative;
  aspect-ratio:1/1;
  overflow:hidden;
  border-radius:12px;
  background:#eef2f7;
  border:1px solid var(--line);
}

.photo-preview-item img{
  width:100%;
  height:100%;
  object-fit:cover;
}


.ad-gallery{
  margin-bottom:16px;
}

.gallery-stage{
  position:relative;
  width:100%;
  aspect-ratio:4/3;
  overflow:hidden;
  border-radius:18px;
  background:#eef2f7;
  touch-action:pan-y;
}

.gallery-stage > img{
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
}

.gallery-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:42px;
  height:42px;
  border:0;
  border-radius:50%;
  background:rgba(17,24,39,.62);
  color:white;
  font-size:30px;
  line-height:1;
  display:grid;
  place-items:center;
  cursor:pointer;
  z-index:2;
}

.gallery-prev{
  left:10px;
}

.gallery-next{
  right:10px;
}

.gallery-counter{
  position:absolute;
  right:10px;
  bottom:10px;
  padding:5px 9px;
  border-radius:999px;
  background:rgba(17,24,39,.68);
  color:white;
  font-size:12px;
  font-weight:700;
}

.gallery-thumbs{
  display:flex;
  gap:8px;
  overflow-x:auto;
  padding:8px 1px 2px;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}

.gallery-thumbs::-webkit-scrollbar{
  display:none;
}

.gallery-thumb{
  flex:0 0 72px;
  width:72px;
  height:58px;
  padding:0;
  overflow:hidden;
  border:2px solid transparent;
  border-radius:10px;
  background:#eef2f7;
  cursor:pointer;
}

.gallery-thumb.active{
  border-color:var(--accent);
}

.gallery-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
}

@media(max-width:600px){
  .photos-preview{
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }

  .gallery-stage{
    border-radius:14px;
  }

  .gallery-nav{
    width:36px;
    height:36px;
    font-size:26px;
  }

  .gallery-thumb{
    flex-basis:64px;
    width:64px;
    height:52px;
  }
}


/* v8.1 — накопительный выбор фотографий */
.photo-preview-badge{
  position:absolute;
  left:6px;
  bottom:6px;
  padding:4px 7px;
  border-radius:999px;
  background:rgba(17,24,39,.78);
  color:white;
  font-size:10px;
  font-weight:700;
}

.photo-preview-remove{
  position:absolute;
  top:6px;
  right:6px;
  width:26px;
  height:26px;
  padding:0;
  border:0;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:rgba(17,24,39,.78);
  color:white;
  font-size:20px;
  line-height:1;
  cursor:pointer;
}

.photo-preview-remove:active{
  transform:scale(.94);
}


/* v8.3 — защита от двойной публикации */
.form.is-submitting{
  pointer-events:none;
}

#publishButton:disabled{
  opacity:.7;
  cursor:wait;
}