:root {
  --bg:    #0d0d12;
  --bg2:   #14141c;
  --card:  #1a1a25;
  --border:#2a2a38;
  --text:  #e8e8f0;
  --muted: #7a7a9a;
  --accent:#6c63ff;
  --green: #3dd68c;
  --amber: #f5a623;
  --red:   #e05c5c;
  --pill:  #252535;
}
* { box-sizing:border-box; margin:0; padding:0; }
body { background:var(--bg); color:var(--text); font-family:system-ui,sans-serif; min-height:100vh; }

/* Hero */
.hero { text-align:center; padding:60px 20px 32px; }
.hero h1 { font-size:clamp(2rem,6vw,3.6rem); font-weight:800; letter-spacing:-1px; }
.hero h1 span { color:var(--accent); }
.hero p { color:var(--muted); margin-top:10px; font-size:1.1rem; }

/* Search bar */
.search-box {
  max-width:720px; margin:32px auto 0; padding:0 16px;
  display:grid; grid-template-columns:1fr 1fr 1fr auto; gap:10px; align-items:end;
}
.field label { display:block; font-size:0.75rem; color:var(--muted); margin-bottom:6px; text-transform:uppercase; letter-spacing:.06em; }
.field input, .field select {
  width:100%; padding:12px 14px; border-radius:10px;
  border:1.5px solid var(--border); background:var(--bg2); color:var(--text);
  font-size:0.95rem; outline:none; transition:border .15s;
}
.field input:focus, .field select:focus { border-color:var(--accent); }
.btn-search {
  padding:12px 28px; border-radius:10px; border:none; cursor:pointer;
  background:var(--accent); color:#fff; font-size:1rem; font-weight:600;
  transition:opacity .15s; white-space:nowrap;
}
.btn-search:hover { opacity:.85; }
.btn-search:disabled { opacity:.5; cursor:not-allowed; }

/* Interests row */
.interests { max-width:720px; margin:12px auto 0; padding:0 16px; display:flex; flex-wrap:wrap; gap:8px; }
.interest-pill {
  padding:5px 14px; border-radius:20px; font-size:0.82rem; cursor:pointer;
  border:1.5px solid var(--border); background:var(--pill); color:var(--muted);
  transition:all .15s; user-select:none;
}
.interest-pill.active { background:var(--accent); border-color:var(--accent); color:#fff; }

/* Results */
.results { max-width:1100px; margin:40px auto 80px; padding:0 16px; }
.results-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; }
.results-header h2 { font-size:1.2rem; font-weight:600; }
.results-meta { font-size:0.82rem; color:var(--muted); }

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

/* Destination card */
.card {
  background:var(--card); border:1px solid var(--border); border-radius:14px;
  padding:20px; cursor:pointer; transition:transform .15s, border-color .15s;
  position:relative; overflow:hidden;
}
.card:hover { transform:translateY(-2px); border-color:var(--accent); }
.card-rank { position:absolute; top:14px; right:14px; font-size:0.75rem; color:var(--muted); }
.card-score {
  display:inline-flex; align-items:center; gap:6px;
  background:var(--pill); border-radius:8px; padding:4px 10px; margin-bottom:12px;
}
.score-bar { width:60px; height:6px; border-radius:3px; background:var(--border); overflow:hidden; }
.score-fill { height:100%; border-radius:3px; background:var(--green); transition:width .4s; }
.score-num { font-size:0.82rem; font-weight:600; color:var(--green); }

.card-city { font-size:1.4rem; font-weight:700; line-height:1.2; }
.card-country { color:var(--muted); font-size:0.88rem; margin-top:2px; }
.card-price { margin-top:12px; font-size:1.1rem; font-weight:600; }
.card-price span { color:var(--green); }
.card-meta { display:flex; gap:12px; margin-top:8px; font-size:0.8rem; color:var(--muted); }

.highlights { display:flex; flex-direction:column; gap:4px; margin-top:12px; }
.highlight { display:flex; align-items:center; gap:6px; font-size:0.8rem; color:var(--muted); }
.highlight::before { content:'✓'; color:var(--green); font-size:0.7rem; }

.score-breakdown {
  margin-top:14px; padding-top:14px; border-top:1px solid var(--border);
  display:grid; grid-template-columns:1fr 1fr; gap:6px;
}
.score-row { display:flex; flex-direction:column; gap:2px; }
.score-label { font-size:0.7rem; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; }
.mini-bar { width:100%; height:4px; border-radius:2px; background:var(--border); }
.mini-fill { height:100%; border-radius:2px; }

.book-btn {
  display:block; margin-top:14px; padding:9px; text-align:center;
  border-radius:8px; background:var(--accent); color:#fff; font-size:0.85rem;
  font-weight:600; text-decoration:none; transition:opacity .15s;
}
.book-btn:hover { opacity:.85; }

/* Today warning banner */
.today-banner {
  max-width:1100px; margin:0 auto 16px; padding:10px 16px;
  background:#1a1a0a; border:1px solid #4a4a1a; border-radius:10px;
  font-size:0.82rem; color:var(--amber);
}

/* States */
.loading { text-align:center; padding:60px; color:var(--muted); }
.loading-spinner { width:32px; height:32px; border:3px solid var(--border); border-top-color:var(--accent); border-radius:50%; animation:spin .7s linear infinite; margin:0 auto 16px; }
@keyframes spin { to { transform:rotate(360deg); } }
.empty { text-align:center; padding:60px; color:var(--muted); font-size:1.1rem; }

/* Tier banner */
.pro-banner {
  max-width:720px; margin:16px auto 0; padding:12px 18px;
  background:linear-gradient(135deg,#1e1340,#2a1a5c);
  border:1px solid #4a3a8c; border-radius:10px;
  display:flex; justify-content:space-between; align-items:center; gap:12px;
}
.pro-banner p { font-size:0.88rem; color:#c8beff; }
.pro-link { font-size:0.82rem; color:var(--accent); text-decoration:none; white-space:nowrap; font-weight:600; }

@media(max-width:600px) {
  .search-box { grid-template-columns:1fr 1fr; }
  .btn-search { grid-column:1/-1; }
}

/* Sparse results notice */
.sparse-banner {
  max-width:1100px; margin:0 auto 16px; padding:10px 16px;
  background:#1a1510; border:1px solid #4a3a1a; border-radius:10px;
  font-size:0.82rem; color:var(--amber);
}