:root{--bg:#f7f7fa;--accent:#0f62fe;--muted:#666}
*{box-sizing:border-box}
body{font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;margin:0;background:var(--bg);color:#111}
.container{max-width:1100px;margin:0 auto;padding:24px}
.site-header{background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.06);position:sticky;top:0;z-index:20}
.site-header .container{display:flex;align-items:center;justify-content:space-between}
.logo{font-weight:700;color:var(--accent);text-decoration:none}
.nav a{margin-left:18px;text-decoration:none;color:var(--muted)}
.nav .btn{background:var(--accent);color:#fff;padding:8px 12px;border-radius:8px;text-decoration:none}
.hero{padding:48px 0;background:linear-gradient(180deg, #ffffff 0%, #f1f6ff 100%)}
.hero h1{margin:0 0 12px;font-size:28px}
.search{display:flex;gap:8px;margin-top:18px}
.search input{flex:1;padding:12px;border-radius:8px;border:1px solid #ddd}
.search button{padding:12px 18px;border-radius:8px;border:none;background:var(--accent);color:#fff}
.section{background:#fff;margin:18px 0;padding:24px;border-radius:10px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}
.card{padding:18px;border-radius:8px;background:#fafafa;text-align:center}
.listing-card{padding:16px;border-radius:8px;background:#fff;border:1px solid #eee}
.small-btn{display:inline-block;margin-top:12px;padding:8px 10px;border-radius:6px;border:1px solid #eee;text-decoration:none}
.form-section form{display:grid;gap:12px}
.form-section label input,.form-section textarea,.form-section select{width:100%;padding:10px;border-radius:8px;border:1px solid #ddd}
.btn{background:var(--accent);color:#fff;padding:10px 14px;border-radius:8px;border:none}
.site-footer{padding:18px 0;text-align:center;color:var(--muted)}
.note{font-size:13px;color:var(--muted)}
@media (max-width:700px){.nav{display:none}}