:root{
  --bg:#f7f9fb;--card:#ffffff;--muted:#6b7280;
  --accent:#0f6cff;--radius:12px
}
*{box-sizing:border-box;font-family:Inter,Arial,sans-serif}
body{margin:0;background:var(--bg);color:#0f172a}
.container{display:grid;grid-template-rows:auto auto 1fr auto;min-height:100vh}
header,footer{background:#fff;padding:16px 24px;box-shadow:0 2px 8px rgba(0,0,0,0.05)}
header{display:grid;grid-template-columns:1fr auto;align-items:center}
.brand{display:flex;align-items:center;gap:10px}
.logo{width:40px;height:40px;background:linear-gradient(135deg,var(--accent),#7c5cff);border-radius:8px;color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center}
.brand-title{font-weight:700}
.brand-sub{font-size:12px;color:var(--muted)}
.header-actions .btn{margin-left:8px}

.searchBar{display:grid;grid-template-columns:2fr 1fr 1fr auto;gap:12px;padding:16px;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,0.05)}
.searchBar input,.searchBar select{padding:10px;border:1px solid #e5e7eb;border-radius:8px}
.searchBtn{background:var(--accent);color:#fff;border:none;border-radius:8px;font-weight:600;cursor:pointer}

main{display:grid;grid-template-columns:280px 1fr 300px;gap:20px;padding:20px}
.filters,.map,.featured,.card{background:var(--card);border-radius:12px;box-shadow:0 4px 10px rgba(0,0,0,0.04)}
.filters{padding:16px;display:grid;gap:12px;height:max-content}
.map{height:250px;display:flex;align-items:center;justify-content:center;color:var(--muted)}
.featured{padding:16px;margin-top:16px}

.resultsTop{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.card{padding:12px;display:grid;grid-template-rows:auto 1fr auto;gap:8px}
.thumb{width:100%;height:140px;border-radius:8px;background:#eef3ff;display:flex;align-items:center;justify-content:center;font-weight:600;color:#334155}
.cname{font-weight:700}
.ctext{font-size:13px;color:var(--muted)}
.ctags{display:flex;gap:6px;flex-wrap:wrap}
.badge{font-size:12px;padding:4px 8px;border-radius:6px;background:#f1f6ff;color:#0f4bff}
.actions{display:flex;gap:6px}
.btn{padding:6px 10px;border:none;border-radius:6px;background:#eef2ff;font-weight:600;cursor:pointer}
.btn-primary{background:var(--accent);color:#fff}

footer{text-align:center;color:var(--muted);font-size:13px}

@media(max-width:1000px){main{grid-template-columns:1fr}}