/* web/style.css */


:root {
  --bg: #0b0c10;
  --panel: #111217;
  --text: #e6e7ea;
  --muted: #9aa0a6;
  --accent: #4f8cff;
  --chip: #1b1e27;
  --green: #2dd4bf;
}
* { box-sizing: border-box; }
body {
  margin:0; padding:0;
  background: radial-gradient(1100px circle at 10% 10%, rgba(79,140,255,0.12), rgba(0,0,0,0) 40%),
              radial-gradient(1100px circle at 90% 0%, rgba(45,212,191,0.12), rgba(0,0,0,0) 40%),
              var(--bg);
  color: var(--text);
  font: 15px/1.4 system-ui, -apple-system, Segoe UI, Roboto, Inter, sans-serif;
}
header {
  padding: 18px 22px;
  display:flex; gap:16px; align-items:center; flex-wrap:wrap;
  border-bottom: 1px solid #1c1e24;
}
h1 { margin:0; font-size: 18px; letter-spacing: .3px; color:#e9ecf5; }
#search-form { display:flex; gap:10px; align-items:center; flex:1; }
#q {
  flex:1; padding:10px 12px; border-radius:10px; border:1px solid #263146;
  background:#0e1118; color:var(--text);
}
button {
  padding:10px 14px; border-radius:10px; border:1px solid #2a3b63;
  background: linear-gradient(180deg, #1a2440, #141b2d);
  color:#dfe7ff; cursor:pointer;
}
#status { color:var(--muted); font-size:12px; }

.grid {
  display:grid;
  grid-template-columns: 1fr 420px;
  gap: 16px;
  padding: 16px 20px;
}
.results, .metrics {
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.00));
  border:1px solid #20242e;
  border-radius:14px; padding:14px;
}
.results h2, .metrics h2 { margin:0 0 10px 0; font-size:15px; color:#e9ecf5; }

#results-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.result {
  display:flex; gap:10px; align-items:flex-start;
  padding:10px; border-radius:12px; background: var(--panel); border:1px solid #1c1f29;
}
.title {
  font-weight:600; color:#f0f3ff; margin-bottom:4px;
}
.meta { font-size:12px; color: var(--muted); display:flex; gap:8px; flex-wrap:wrap; }
.chip {
  display:inline-block; padding:2px 8px; border-radius:999px; font-size:12px;
  background: var(--chip); border:1px solid #23304a; color:#bcd0ff;
}
.right {
  margin-left:auto; display:flex; align-items:center; gap:12px;
}
.toggle {
  display:flex; align-items:center; gap:8px; font-size:13px; color:#c7d2fe;
}
.toggle input { transform: scale(1.1); }
footer { padding: 12px 18px; color: var(--muted); border-top:1px solid #1c1e24; }

@media (max-width: 1100px) {
  .grid { grid-template-columns: 1fr; }
}

/* --- Popular & Recent --- */
.split {
  margin-top: 16px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.card {
  background: var(--panel);
  border: 1px solid #1c1f29;
  border-radius: 12px;
  padding: 12px;
}
.card h3 {
  margin: 0 0 8px 0;
  font-size: 14px;
  color: #e9ecf5;
  letter-spacing: .2px;
}
.pill-list {
  margin: 0;
  padding-left: 20px; /* keep numbers since they aren't clickable */
}
.pill-list li {
  margin: 4px 0;
  color: var(--text);
}
.pill-list li .count {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  background: var(--chip);
  border: 1px solid #23304a;
  color: #bcd0ff;
}

@media (max-width: 1100px) {
  .grid { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; }
}