:root {
  --bg:       #0f1117;
  --surface:  #1a1d27;
  --surface2: #22263a;
  --border:   #2e3348;
  --green:    #2d6a4f;
  --green-lt: #40916c;
  --text:     #e8eaf0;
  --muted:    #8b92a8;
}
* { box-sizing: border-box; }
body { background: var(--bg); color: var(--text); font-family: 'Segoe UI', system-ui, sans-serif; min-height: 100vh; }

/* NAV */
.navbar { background: var(--surface) !important; border-bottom: 1px solid var(--border); }
.active-nav { color: #fff !important; font-weight: 600; }

/* FURNITURE TYPE DROPDOWN */
.type-dropdown {
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 20px;
  padding: 4px 28px 4px 13px;
  font-size: .82rem;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%238b92a8'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  transition: border-color .15s;
}
.type-dropdown:hover { border-color: var(--green-lt); }
.type-dropdown:focus { outline: none; border-color: var(--green-lt); box-shadow: 0 0 0 2px rgba(64,145,108,.25); }
.type-dropdown option { background: #1a1d27; color: var(--text); }

/* SOURCE TOGGLE BUTTONS */
.source-toggle-btn {
  font-size: .75rem; font-weight: 600;
  padding: 4px 10px; border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface2); color: var(--muted);
  cursor: pointer; transition: all .15s;
  display: inline-flex; align-items: center;
}
.source-toggle-btn.active { color: #fff; }
.cl-btn.active  { background: #2d6a4f; border-color: #40916c; }
.fb-btn.active  { background: #1877f2; border-color: #5b9cf6; }
.source-toggle-btn:not(.active) { opacity: .45; }

/* PHONE BANNER */
.phone-banner {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 14px;
  font-size: .82rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}
.phone-ip { color: var(--green-lt); font-weight: 600; font-family: monospace; text-decoration: none; }
.phone-ip:hover { color: #fff; }

/* STAT CARDS */
.stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 14px 10px; text-align: center; }
.stat-number { font-size: 1.75rem; font-weight: 700; line-height: 1; }
.stat-label  { font-size: .68rem; color: var(--muted); margin-top: 4px; text-transform: uppercase; letter-spacing: .4px; white-space: nowrap; }

/* FILTER BUTTONS */
.filter-btn, .sort-btn {
  display: inline-flex; align-items: center;
  padding: 5px 13px; border-radius: 20px;
  border: 1px solid var(--border); background: var(--surface);
  color: var(--muted); font-size: .82rem; text-decoration: none;
  transition: all .15s;
}
.filter-btn:hover, .sort-btn:hover { border-color: var(--green-lt); color: #fff; }
.filter-btn.active, .sort-btn.active { background: var(--green); border-color: var(--green-lt); color: #fff; }
.free-btn  { border-color: #e76f51; color: #e76f51; }
.free-btn.active { background: #e76f51; border-color: #e76f51; color: #fff; }
.hot-btn   { border-color: #f4a261; color: #f4a261; }
.hot-btn.active { background: #e76f51; border-color: #e76f51; color: #fff; }
.gray-btn  { border-color: #888; color: #aaa; }
.gray-btn.active { background: #555; border-color: #999; color: #fff; }

/* SELLER MESSAGE BAR */
.seller-msg-bar {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--green-lt);
  border-radius: 8px;
  padding: 10px 14px;
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  font-size: .82rem;
}
.seller-preview { color: var(--text); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.copy-msg-btn {
  background: var(--green); color: #fff;
  border: none; border-radius: 6px;
  padding: 5px 14px; font-size: .82rem; cursor: pointer;
  white-space: nowrap; transition: background .15s;
}
.copy-msg-btn:hover { background: var(--green-lt); }
.copy-msg-btn.copied { background: #555; }

/* LISTING CARDS */
.listing-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .15s, box-shadow .15s; height: 100%;
}
.listing-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.4); }
.listing-card.status-skipped { opacity: .3; pointer-events: none; }
.listing-card.status-purchased { border-color: #9b5de5; }
.listing-card.status-interested { border-color: var(--green-lt); }

/* Image */
.listing-img-wrap { position: relative; height: 175px; background: var(--surface2); overflow: hidden; flex-shrink: 0; }
.listing-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.no-img { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--border); font-size: 2.5rem; }

/* Price badge */
.price-badge {
  position: absolute; top: 8px; left: 8px;
  background: rgba(0,0,0,.75); color: #fff;
  font-size: .82rem; font-weight: 700;
  padding: 3px 9px; border-radius: 20px;
  backdrop-filter: blur(4px);
}
.price-badge.free  { background: #e76f51; }
.price-badge.cheap { background: var(--green); }

/* Deal score badge */
.deal-score-badge {
  position: absolute; top: 8px; right: 8px;
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .8rem; font-weight: 800;
  backdrop-filter: blur(4px);
  border: 2px solid rgba(255,255,255,.2);
}
.score-hot  { background: #40916c; color: #fff; border-color: #74c69d; box-shadow: 0 0 10px rgba(64,145,108,.5); }
.score-warm { background: rgba(244,162,97,.85); color: #fff; }
.score-cold { background: rgba(230,57,70,.75); color: #fff; }

/* Truck warning */
.truck-warn-badge {
  position: absolute; bottom: 8px; right: 8px;
  background: rgba(244,162,97,.9); color: #fff;
  font-size: .68rem; font-weight: 600;
  padding: 2px 7px; border-radius: 4px;
}

/* Body */
.listing-body { padding: 10px 13px; flex: 1; }
.listing-title { font-size: .86rem; font-weight: 600; color: var(--text); line-height: 1.3; margin-bottom: 6px; word-break: break-word; }

/* Resale estimate */
.resale-estimate {
  font-size: .75rem; color: #74c69d;
  margin-bottom: 6px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
}
.profit-tag {
  background: rgba(64,145,108,.2); color: #74c69d;
  border: 1px solid rgba(64,145,108,.3);
  border-radius: 10px; padding: 1px 7px;
  font-size: .7rem; font-weight: 600;
}

.listing-meta { display: flex; flex-wrap: wrap; gap: 5px; font-size: .73rem; color: var(--muted); margin-bottom: 4px; }
.listing-meta i { font-size: .68rem; }

.dist-tag {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: .68rem;
  color: var(--muted);
}
.dist-close { color: #74c69d; border-color: rgba(64,145,108,.4); background: rgba(64,145,108,.1); }
.dist-mid   { color: #f4a261; border-color: rgba(244,162,97,.4);  background: rgba(244,162,97,.08); }

.region-tag, .source-tag {
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 4px; padding: 1px 6px; font-size: .68rem; color: var(--muted);
}
.fb-tag { background: rgba(24,119,242,.15); border-color: rgba(24,119,242,.4); color: #5b9cf6; }

/* Actions */
.listing-actions {
  display: flex; align-items: center; gap: 3px;
  padding: 7px 10px; border-top: 1px solid var(--border);
  background: var(--surface2);
}
.action-btn {
  background: none; border: 1px solid var(--border); color: var(--muted);
  border-radius: 7px; padding: 5px 9px;
  cursor: pointer; font-size: .85rem;
  transition: all .15s; text-decoration: none; display: inline-flex; align-items: center;
}
.action-btn:hover { border-color: #aaa; color: #fff; }
.active-heart { color: #e63946 !important; border-color: #e63946 !important; }
.active-bag   { color: #9b5de5 !important; border-color: #9b5de5 !important; }
.view-btn     { margin-left: auto; }
.view-btn:hover { background: var(--green); border-color: var(--green-lt); color: #fff; }

/* Source footer */
.source-footer {
  padding: 5px 13px;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .3px;
  color: var(--muted);
  background: var(--surface2);
  border-top: 1px solid var(--border);
  border-radius: 0 0 12px 12px;
  display: flex;
  align-items: center;
  text-transform: uppercase;
}
.source-footer-fb {
  color: #5b9cf6;
  background: rgba(24,119,242,.08);
  border-top-color: rgba(24,119,242,.2);
}

/* Empty state */
.empty-state { text-align: center; padding: 80px 20px; }

/* SETTINGS */
.settings-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 20px 24px; }
.settings-section-title { color: var(--text); font-size: .88rem; font-weight: 600; margin-bottom: 16px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.dark-input { background: var(--surface2) !important; border: 1px solid var(--border) !important; color: var(--text) !important; border-radius: 8px; }
.dark-input:focus { border-color: var(--green-lt) !important; box-shadow: 0 0 0 2px rgba(64,145,108,.25) !important; outline: none; }
.region-pill { background: var(--surface2); border: 1px solid var(--border); border-radius: 6px; padding: 4px 12px; font-size: .8rem; color: var(--text); }

/* RESPONSIVE */
@media (max-width: 576px) {
  .listing-img-wrap { height: 150px; }
  .deal-score-badge { width: 30px; height: 30px; font-size: .72rem; }
  .stat-number { font-size: 1.5rem; }
}