:root{
  --bg:#f5f7fb; --card:#fff; --ink:#1b2433; --muted:#6b7686; --brand:#1d6ef2; --brand-d:#1557c4;
  --line:#e3e8f0; --radius:14px;
}
@media (prefers-color-scheme: dark){
  :root{ --bg:#0f141c; --card:#171e29; --ink:#e8edf5; --muted:#93a0b4; --line:#273142; }
}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--ink);line-height:1.5}
a{color:var(--brand);text-decoration:none}
.wrap{max-width:1180px;margin:0 auto;padding:0 16px}
.muted{color:var(--muted)} .small{font-size:.85rem} .center{text-align:center;margin:20px 0}

.site-header{background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:60px}
.logo{font-weight:800;font-size:1.3rem;color:var(--ink)} .logo span{color:var(--brand)}
nav a{margin-left:18px;color:var(--ink);font-weight:500}

.hero{background:linear-gradient(135deg,#1d6ef2,#6a3df0);color:#fff;padding:48px 0;text-align:center}
.hero h1{margin:0 0 8px;font-size:clamp(1.6rem,4vw,2.6rem)}
.hero p{margin:0 0 22px;opacity:.9}
.search-row{display:flex;gap:8px;max-width:640px;margin:0 auto}
.search-row input{flex:1;padding:14px;border:0;border-radius:10px;font-size:1rem}

.btn{background:var(--brand);color:#fff;border:0;padding:12px 20px;border-radius:10px;font-size:1rem;font-weight:600;cursor:pointer}
.btn:hover{background:var(--brand-d)}
.btn-ghost{background:transparent;color:var(--brand);border:1px solid var(--brand)}
.btn-ghost:hover{background:var(--brand);color:#fff}

.layout{display:grid;grid-template-columns:260px 1fr;gap:24px;margin-top:24px}
.filters{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px;height:fit-content;position:sticky;top:76px}
.filters h3{margin-top:0}
label{display:block;font-weight:600;font-size:.9rem;margin-bottom:12px}
select,input,textarea{width:100%;margin-top:4px;padding:10px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--ink);font:inherit}
.results-head{display:flex;justify-content:space-between;align-items:baseline}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;cursor:pointer;transition:transform .12s,box-shadow .12s}
.card:hover{transform:translateY(-3px);box-shadow:0 8px 22px rgba(0,0,0,.12)}
.thumb{height:120px;display:flex;align-items:center;justify-content:center;font-size:3rem}
.card-body{padding:12px 14px}
.card-body h4{margin:0 0 4px;font-size:1rem}
.price{font-weight:800;color:var(--brand)}
.meta{color:var(--muted);font-size:.85rem}
.tag{display:inline-block;background:var(--bg);border:1px solid var(--line);border-radius:20px;padding:2px 10px;font-size:.75rem;margin-top:6px}

.ad-slot{margin:20px 0;min-height:90px;display:flex;align-items:center;justify-content:center;border-radius:10px}
.ad-slot.placeholder{border:2px dashed var(--line);color:var(--muted);font-size:.85rem;background:var(--card)}
.ad-side{min-height:250px}
.ad-native{grid-column:1/-1;min-height:90px;margin:0}

.post,.about{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px;margin-top:24px;margin-bottom:24px}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:0 16px}

.modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;padding:16px;z-index:50}
.modal[hidden]{display:none}
.modal-card{background:var(--card);border-radius:var(--radius);max-width:520px;width:100%;padding:24px;position:relative;max-height:90vh;overflow:auto}
.close{position:absolute;right:12px;top:8px;background:none;border:0;font-size:1.8rem;color:var(--ink);cursor:pointer}
.site-footer{border-top:1px solid var(--line);padding:20px 0;text-align:center;color:var(--muted)}

@media (max-width:820px){
  .layout{grid-template-columns:1fr}
  .filters{position:static}
  nav a{margin-left:12px}
}