* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: "Roboto", Arial, sans-serif; color: #002f34; background: #fff; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; }
.wrap { width: min(1280px, calc(100% - 48px)); margin: 0 auto; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 80; background: #f7f8fc; padding: 10px 0 14px; }
.header-inner { display: flex; align-items: center; gap: 28px; min-height: 56px; }
.logo { display: inline-flex; align-items: center; justify-content: center; background: #fff; border-radius: 18px; width: 72px; height: 40px; box-shadow: 0 1px 2px rgba(0,0,0,.06); font-weight: 700; font-size: 28px; letter-spacing: -1px; }
.logo-bar { display: inline-block; width: 4px; height: 22px; background: #002f34; margin: 0 3px 2px; border-radius: 1px; }
.header-link { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; }
.header-link img { width: 36px; height: 24px; object-fit: contain; }
.header-actions { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.icon-btn { color: #002f34; font-size: 18px; }
.login-link { font-weight: 700; font-size: 14px; border-bottom: 2px solid #002f34; padding-bottom: 1px; }
.sell-btn { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: 14px; letter-spacing: .4px; padding: 8px 18px 8px 14px; border-radius: 999px; border: 5px solid transparent; background-image: linear-gradient(#fff,#fff), linear-gradient(to right, #ffce32 0%, #23e5db 55%, #3a77ff 100%); background-origin: padding-box, border-box; background-clip: padding-box, border-box; }
.search-bar { display: flex; gap: 12px; margin-top: 8px; }
.location-field, .query-field { display: flex; align-items: center; background: #fff; border: 2px solid #002f34; border-radius: 4px; height: 48px; }
.location-field { min-width: 260px; padding: 0 12px; gap: 10px; }
.location-field input, .location-field select, .query-field input { flex: 1; border: 0; outline: 0; background: transparent; font-size: 16px; color: #002f34; }
.query-field { flex: 1; padding-left: 14px; overflow: hidden; }
.search-btn { height: 100%; border: 0; background: #002f34; color: #fff; padding: 0 22px; font-weight: 700; cursor: pointer; display: flex; align-items: center; gap: 8px; }
.cat-nav { border-bottom: 1px solid #e6e6e6; background: #fff; }
.cat-nav-inner { display: flex; align-items: center; gap: 22px; height: 44px; font-size: 14px; overflow-x: auto; }
.all-cats { position: relative; }
.all-cats > a, .all-cats > span { font-weight: 700; display: flex; align-items: center; gap: 6px; cursor: pointer; }
.all-cats-menu { display: none; position: absolute; top: 28px; left: 0; background: #fff; min-width: 260px; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.12); padding: 8px 0; z-index: 20; }
.all-cats-menu a { display: block; padding: 10px 16px; }
.all-cats-menu a:hover { background: #f2f4f5; }
.all-cats:hover .all-cats-menu, .all-cats:focus-within .all-cats-menu { display: block; }
.cat-nav-inner > a:hover { color: #3a77ff; }

/* Home */
.hero { margin-top: 18px; }
.hero img { width: 100%; height: 180px; object-fit: cover; border-radius: 8px; }
.categories { display: grid; grid-template-columns: repeat(9, 1fr); gap: 18px 10px; margin: 36px auto 28px; }
.cat-item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; font-size: 13px; font-weight: 600; line-height: 1.25; }
.cat-icon { width: 84px; height: 84px; border-radius: 16px; display: grid; place-items: center; font-size: 34px; }
.listings { padding: 12px 0 28px; }
.section-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.section-head h2 { font-size: 24px; font-weight: 700; }
.section-head a { color: #3a77ff; font-weight: 600; font-size: 14px; }
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.card { border: 1px solid #d8dfe0; border-radius: 4px; overflow: hidden; background: #fff; height: 100%; display: flex; flex-direction: column; }
.card:hover { box-shadow: 0 2px 8px rgba(0,47,52,.12); }
.card img { width: 100%; height: 196px; object-fit: cover; background: #f2f4f5; }
.card-body { padding: 12px 12px 14px; }
.card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.card-top h3 { font-size: 18px; font-weight: 700; }
.fav { border: 0; background: none; cursor: pointer; font-size: 18px; color: #002f34; }
.fav.saved { color: #ff4040; }
.title { font-size: 14px; margin-top: 6px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 38px; }
.meta, .loc, .time { color: #406367; font-size: 12px; margin-top: 6px; }
.badge { display: inline-block; background: #23e5db; color: #002f34; font-size: 11px; font-weight: 700; padding: 2px 6px; border-radius: 3px; margin-bottom: 6px; }

.app-banner { margin-top: 24px; background: #f2f4f5; display: grid; grid-template-columns: 1.2fr .9fr 1fr; align-items: center; gap: 24px; padding: 36px 8vw; }
.app-copy h2 { font-size: 28px; font-weight: 500; }
.app-copy p { margin-top: 8px; color: #3a77ff; font-size: 24px; font-weight: 500; }
.phones-art img { height: 150px; margin: 0 auto; }
.store-btns { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.store-btns a { background: #000; color: #fff; border-radius: 6px; padding: 10px 14px; font-size: 12px; font-weight: 600; }

.site-footer { background: #ebeeef; }
.footer-cols { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; padding: 36px 0; }
.footer-cols h4 { font-size: 14px; margin-bottom: 12px; }
.footer-cols a { display: block; font-size: 13px; margin: 8px 0; opacity: .85; }
.socials { display: flex; gap: 10px; }
.socials a { width: 32px; height: 32px; border: 1px solid #002f34; border-radius: 50%; display: grid; place-items: center; }
.footer-bottom { background: #002f34; color: #fff; text-align: right; padding: 14px 8vw; font-size: 12px; font-weight: 600; }

/* Listings */
.page { padding: 24px 0 48px; }
.crumbs { font-size: 13px; color: #406367; margin-bottom: 16px; }
.crumbs a { color: #3a77ff; }
.layout { display: grid; grid-template-columns: 260px 1fr; gap: 24px; }
.filters { border: 1px solid #e8e8e8; border-radius: 6px; padding: 16px; height: fit-content; }
.filters h3 { margin-bottom: 12px; font-size: 16px; }
.filters label { display: block; font-size: 13px; margin: 10px 0 4px; }
.filters input, .filters select { width: 100%; border: 1px solid #c8c8c8; border-radius: 4px; padding: 8px; }
.filter-btn { margin-top: 14px; width: 100%; background: #002f34; color: #fff; border: 0; padding: 10px; border-radius: 4px; cursor: pointer; font-weight: 700; }
.results-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }

/* Ad detail */
.ad-grid { display: grid; grid-template-columns: 1.5fr .9fr; gap: 24px; }
.gallery { border: 1px solid #e8e8e8; border-radius: 6px; overflow: hidden; }
.gallery .main-photo { width: 100%; height: 420px; object-fit: cover; background: #111; }
.thumbs { display: flex; gap: 8px; padding: 10px; }
.thumbs img { width: 72px; height: 56px; object-fit: cover; border-radius: 4px; cursor: pointer; border: 2px solid transparent; }
.thumbs img.active { border-color: #3a77ff; }
.ad-info { padding: 8px 0; }
.ad-info h1 { font-size: 22px; margin: 8px 0 12px; }
.price-lg { font-size: 28px; font-weight: 700; }
.seller-card, .safe-card { border: 1px solid #e8e8e8; border-radius: 6px; padding: 16px; margin-bottom: 12px; }
.seller-card h3 { margin-bottom: 8px; }
.action-row { display: flex; gap: 8px; margin-top: 12px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 14px; border-radius: 4px; font-weight: 700; cursor: pointer; border: 0; }
.btn-dark { background: #002f34; color: #fff; flex: 1; }
.btn-blue { background: #3a77ff; color: #fff; flex: 1; }
.btn-outline { background: #fff; border: 2px solid #002f34; }
.desc { margin-top: 20px; line-height: 1.6; }
.desc h2 { font-size: 18px; margin-bottom: 8px; }

/* Auth / forms */
.auth-wrap { max-width: 460px; margin: 40px auto; border: 1px solid #e8e8e8; border-radius: 8px; padding: 28px; }
.auth-wrap h1 { font-size: 22px; margin-bottom: 8px; }
.auth-wrap p.sub { color: #406367; margin-bottom: 18px; }
.field { margin: 12px 0; }
.field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.field input, .field select, .field textarea { width: 100%; border: 1px solid #c8c8c8; border-radius: 4px; padding: 10px; }
.check { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; margin: 12px 0; }
.check input { margin-top: 3px; }
.error { color: #d32f2f; font-size: 13px; display: none; }
.form-wide { max-width: 760px; margin: 24px auto; }
.steps { display: flex; gap: 8px; margin-bottom: 20px; }
.steps span { flex: 1; text-align: center; padding: 8px; border-bottom: 3px solid #e8e8e8; font-size: 13px; font-weight: 600; }
.steps span.on { border-color: #23e5db; }

/* Help / legal */
.help-hero { background: #002f34; color: #fff; padding: 48px 0; text-align: center; }
.help-hero h1 { font-size: 32px; margin-bottom: 16px; }
.help-hero input { width: min(520px, 90%); padding: 12px 16px; border: 0; border-radius: 24px; }
.help-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 32px 0; }
.help-card { border: 1px solid #e8e8e8; border-radius: 8px; padding: 18px; min-height: 120px; }
.help-card h3 { font-size: 16px; margin-bottom: 8px; }
.help-card p { color: #406367; font-size: 14px; }
.legal { max-width: 860px; margin: 0 auto; line-height: 1.7; }
.legal h1 { font-size: 28px; margin-bottom: 8px; }
.legal h2 { font-size: 18px; margin: 22px 0 8px; }
.legal p, .legal li { margin-bottom: 10px; }
.legal ul { padding-left: 20px; }
.note { background: #fff8e1; border: 1px solid #ffe082; padding: 12px 14px; border-radius: 6px; font-size: 13px; margin: 16px 0; }

/* Chat / account */
.chat-layout { display: grid; grid-template-columns: 280px 1fr; min-height: 520px; border: 1px solid #e8e8e8; border-radius: 8px; overflow: hidden; }
.chat-list { border-right: 1px solid #e8e8e8; }
.chat-list a { display: block; padding: 14px; border-bottom: 1px solid #f2f2f2; }
.chat-list a:hover, .chat-list a.active { background: #f2f4f5; }
.chat-pane { display: flex; flex-direction: column; }
.chat-log { flex: 1; padding: 16px; background: #fafafa; }
.bubble { background: #fff; border: 1px solid #e8e8e8; padding: 8px 12px; border-radius: 12px; max-width: 70%; margin-bottom: 8px; }
.bubble.me { margin-left: auto; background: #e7f0ff; }
.chat-input { display: flex; gap: 8px; padding: 10px; border-top: 1px solid #e8e8e8; }
.chat-input input { flex: 1; border: 1px solid #c8c8c8; border-radius: 20px; padding: 8px 12px; }
.profile { display: grid; grid-template-columns: 240px 1fr; gap: 24px; }
.side-nav a { display: block; padding: 10px 12px; border-radius: 6px; }
.side-nav a.active, .side-nav a:hover { background: #f2f4f5; }

.cookie { position: fixed; left: 16px; right: 16px; bottom: 16px; background: #002f34; color: #fff; padding: 14px 18px; border-radius: 8px; display: none; z-index: 100; align-items: center; justify-content: space-between; gap: 16px; }
.cookie.show { display: flex; }
.cookie a { color: #23e5db; text-decoration: underline; }
.cookie button { background: #23e5db; color: #002f34; border: 0; padding: 8px 14px; border-radius: 4px; font-weight: 700; cursor: pointer; }

.success { background: #e8f5e9; border: 1px solid #a5d6a7; padding: 12px; border-radius: 6px; margin: 12px 0; display: none; }

@media (max-width: 1100px) {
  .categories { grid-template-columns: repeat(5, 1fr); }
  .cards, .help-grid { grid-template-columns: repeat(2, 1fr); }
  .layout, .ad-grid, .chat-layout, .profile, .app-banner, .footer-cols { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .header-inner, .search-bar { flex-wrap: wrap; }
  .location-field { min-width: 100%; }
  .categories, .cards { grid-template-columns: 1fr 1fr; }
  .cookie { flex-direction: column; }
}