* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: #0f1115;
  color: #e7e9ee;
}
header {
  padding: 32px 24px;
  text-align: center;
  border-bottom: 1px solid #272c3a;
}
header h1 { margin: 0 0 6px; }
header p { color: #9aa2b1; margin: 0; }

main {
  max-width: 900px;
  margin: 0 auto;
  padding: 24px;
}

.add-form {
  background: #161922;
  border: 1px solid #272c3a;
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 32px;
}
.add-form h2 { margin-top: 0; font-size: 17px; }
#listingForm {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
#listingForm input {
  flex: 1;
  min-width: 140px;
  padding: 10px 12px;
  border-radius: 6px;
  border: 1px solid #272c3a;
  background: #0f1115;
  color: #e7e9ee;
}
#listingForm button {
  padding: 10px 20px;
  border-radius: 6px;
  border: none;
  background: #5eb0ff;
  color: #0f1115;
  font-weight: 600;
  cursor: pointer;
}
#listingForm button:hover { opacity: .9; }

.listings h2 { font-size: 17px; }
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}
.card {
  background: #161922;
  border: 1px solid #272c3a;
  border-radius: 10px;
  padding: 16px;
}
.card h3 { margin: 0 0 6px; font-size: 16px; }
.card p { margin: 4px 0; color: #9aa2b1; font-size: 14px; }
.card .price { color: #7ee1a8; font-weight: 600; }
.card button {
  margin-top: 10px;
  background: none;
  border: 1px solid #ff7b7b;
  color: #ff7b7b;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
}

footer {
  text-align: center;
  padding: 20px;
  color: #9aa2b1;
  font-size: 13px;
  border-top: 1px solid #272c3a;
}