:root {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #e9edf5;
  background: #0b0e13;
  font-synthesis: none;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background:
  radial-gradient(circle at 15% 0%, #182235 0, transparent 32rem),
  #0b0e13; }
.topbar {
  display:flex; justify-content:space-between; align-items:flex-start;
  max-width:1180px; margin:auto; padding:32px 28px 20px;
}
.eyebrow { font-size:11px; letter-spacing:.16em; color:#8995a9; font-weight:700; }
h1 { margin:5px 0; font-size:22px; }
h2 { margin:6px 0 0; font-size:26px; letter-spacing:-.03em; }
p { color:#98a3b5; line-height:1.6; }
.status { color:#aeb8c8; font-size:13px; display:flex; gap:8px; align-items:center; }
.status span { width:8px; height:8px; background:#69d391; border-radius:50%; }
main { max-width:1180px; margin:auto; padding:20px 28px 80px; }
.hero {
  display:grid; grid-template-columns:1fr 1fr; gap:30px; align-items:center;
  padding:50px 0 70px;
}
.hero h2 { font-size:48px; max-width:620px; }
.hero-copy p { max-width:580px; font-size:16px; }
.pill { border:1px solid #2c3545; color:#b5c2d8; border-radius:999px; padding:7px 11px; font-size:12px; }
.recommend-card {
  border:1px solid #27303e; background:#11161f; border-radius:18px; padding:24px;
  box-shadow:0 20px 60px #0005;
}
label { display:block; color:#b4bfce; font-size:13px; margin-bottom:9px; }
.input-row, .search-bar { display:flex; gap:10px; }
input {
  width:100%; background:#0a0d12; border:1px solid #303949; color:#f4f6fa;
  padding:14px 15px; border-radius:10px; outline:none; font-size:14px;
}
input:focus { border-color:#687892; }
button {
  border:0; background:#e8edf5; color:#11151d; border-radius:10px;
  padding:0 18px; font-weight:750; cursor:pointer;
}
button:hover { background:#fff; }
.hint { margin-top:10px; color:#6f7c91; font-size:12px; }
code { color:#aebbd0; }
.hidden { display:none; }
.section-heading { display:flex; justify-content:space-between; align-items:end; margin-bottom:18px; }
.query-label { color:#8995a9; font-family:ui-monospace,monospace; font-size:12px; }

.recommendation {
  display:grid; grid-template-columns:42px 1fr auto; gap:16px;
  border:1px solid #252e3b; background:#10151d; border-radius:14px;
  padding:18px; margin:10px 0; cursor: pointer;
  transition: border-color 0.2s ease;
}
.recommendation:hover {
  border-color: #384559;
}

.rank { color:#737f92; font-size:13px; padding-top:2px; }
.rec-path { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:14px; color:#e9edf5; }
.rec-meta { color:#78859a; font-size:12px; margin-top:7px; }
.evidence { display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
.evidence span {
  border:1px solid #2a3341; border-radius:999px; padding:5px 8px;
  color:#8e9bad; font-size:11px;
}
.score { font-size:20px; font-weight:800; color:#dce4f1; }
.search-section { margin-top:70px; }
.search-bar { max-width:760px; }
.search-results { margin-top:15px; }
.search-item {
  display:grid; grid-template-columns:1fr auto; gap:10px;
  padding:14px 0; border-bottom:1px solid #202733;
}
.search-item .filename { color:#e7ebf3; font-size:14px; }
.search-item .path { color:#6f7c91; font-family:ui-monospace,monospace; font-size:11px; margin-top:5px; }
.search-item .type { color:#8591a4; font-size:12px; }
.error { color:#e48c8c; padding:14px; border:1px solid #553033; border-radius:10px; }
.empty { color:#6f7c91; padding:25px 0; }

/* Modal popup overlay styles */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}
.modal.hidden {
  display: none;
}
.modal-content {
  background: #11161f;
  border: 1px solid #27303e;
  border-radius: 18px;
  padding: 28px;
  width: 600px;
  max-width: 90vw;
  max-height: 80vh;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 20px 60px #0009;
}
.modal-content h3 {
  margin-top: 0;
  font-size: 16px;
  color: #e9edf5;
  font-family: ui-monospace, monospace;
}
.close-btn {
  position: absolute;
  top: 18px;
  right: 20px;
  background: none;
  border: none;
  font-size: 24px;
  color: #8995a9;
  cursor: pointer;
  padding: 0;
}
.close-btn:hover {
  color: #e9edf5;
}

@media (max-width: 800px) {
  .hero { grid-template-columns:1fr; padding-top:25px; }
  .hero h2 { font-size:36px; }
  .topbar { padding:24px 18px 10px; }
  main { padding:10px 18px 60px; }
  .recommendation { grid-template-columns:30px 1fr; }
  .score { grid-column:2; }
}