:root {
  --purple-600: #6b3bd9;
  --purple-700: #5a2bbf;
  --purple-200: #e9e2ff;
  --muted: #6b6b7a;
  --radius: 10px;
  --shadow: 0 6px 18px rgba(45,30,90,0.06);
}

body {
  font-family: Inter, Arial, sans-serif;
  margin: 0;
  background: #fff;
  color: #222;
}

.container { max-width: 1000px; margin: 0 auto; padding: 16px; }

.site-header { background: var(--purple-200); }
.header-row { display: flex; justify-content: space-between; align-items: center; }

.brand { display: flex; align-items: center; font-weight: bold; color: var(--purple-700); text-decoration: none; gap: 8px; }

.nav { display: flex; gap: 12px; }
.nav-link { text-decoration: none; color: var(--purple-700); }
.btn { padding: 8px 12px; border-radius: var(--radius); border: 1px solid #ccc; cursor: pointer; }
.btn-primary { background: var(--purple-600); color: #fff; border: none; }

.hero { margin: 20px 0; }
.search-form { display: flex; gap: 10px; flex-wrap: wrap; }

.listings { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }

.card { border: 1px solid #eee; border-radius: var(--radius); padding: 12px; box-shadow: var(--shadow); }
.card-title { font-size: 16px; font-weight: bold; margin: 0 0 6px; }
.price { font-weight: bold; color: var(--purple-700); }

.site-footer { margin-top: 40px; padding: 16px; border-top: 1px solid #eee; color: var(--muted); }

/* Modal */
.modal.hidden { display: none; }
.modal { position: fixed; top:0; left:0; width:100%; height:100%; background: rgba(0,0,0,0.5); display:flex; align-items:center; justify-content:center; }
.modal-content { background: #fff; padding: 20px; border-radius: var(--radius); max-width: 400px; width: 100%; }