:root{
  --bg:#f4f6fb; --card:#fff; --ink:#1e293b; --muted:#64748b;
  --line:#e2e8f0; --accent:#1d4ed8;
}
*{box-sizing:border-box}
body{margin:0;font-family:"Segoe UI",system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--ink)}
.wrap{max-width:1000px;margin:0 auto;padding:0 18px}

/* ---------- hero ---------- */
.hero{
  background:linear-gradient(135deg,#0b1e4b 0%,#1d4ed8 55%,#0ea5e9 100%);
  color:#fff;padding:42px 0 30px;
}
.brand{display:flex;gap:14px;align-items:center;margin-bottom:22px}
.logo{
  width:52px;height:52px;border-radius:14px;background:#fff;color:#1d4ed8;
  display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:800;
  box-shadow:0 6px 18px rgba(0,0,0,.25);
}
.brand h1{margin:0;font-size:26px;letter-spacing:1px}
.brand p{margin:2px 0 0;font-size:13px;opacity:.85}

.searchbox{
  display:flex;align-items:center;gap:8px;background:#fff;border-radius:14px;
  padding:6px 8px 6px 18px;box-shadow:0 10px 30px rgba(2,20,60,.35);
}
.searchbox .ic{color:#94a3b8;flex:0 0 auto}
.searchbox input{
  flex:1;border:0;outline:0;font-size:16px;padding:10px 4px;background:transparent;color:var(--ink);
}
.searchbox button{
  border:0;background:var(--accent);color:#fff;font-size:15px;font-weight:600;
  padding:11px 26px;border-radius:10px;cursor:pointer;transition:.15s;
}
.searchbox button:hover{background:#1e40af}
.searchbox button:disabled{opacity:.6;cursor:wait}

.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.chip{
  display:flex;align-items:center;gap:7px;border:1px solid rgba(255,255,255,.4);
  border-radius:999px;padding:7px 14px;font-size:13px;cursor:pointer;user-select:none;
  background:rgba(255,255,255,.08);transition:.15s;color:#fff;
}
.chip .dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.chip.on{background:rgba(255,255,255,.92);color:#0f172a;font-weight:600}
.chip.on .dot{outline:3px solid rgba(255,255,255,.45)}
.chip .cnt{font-size:11px;background:rgba(0,0,0,.14);border-radius:999px;padding:1px 7px}

/* ---------- status ---------- */
.status-bar{margin:22px 0 8px;color:var(--muted);font-size:14px}
.status-bar b{color:var(--ink)}
.source-stats{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 4px}
.sstat{
  display:flex;gap:8px;align-items:center;background:var(--card);border:1px solid var(--line);
  border-radius:10px;padding:7px 12px;font-size:12.5px;
}
.sstat .dot{width:9px;height:9px;border-radius:50%}
.sstat .lbl{font-weight:600}
.sstat .t{color:var(--muted)}
.sstat.err .lbl{color:#dc2626}
.sstat a{color:var(--accent);text-decoration:none;margin-left:2px}

/* ---------- results ---------- */
.card{
  display:flex;gap:16px;background:var(--card);border:1px solid var(--line);
  border-radius:14px;padding:16px 18px;margin:12px 0;transition:.15s;
}
.card:hover{border-color:#c7d2fe;box-shadow:0 6px 20px rgba(30,64,175,.09)}
.cover{
  flex:0 0 78px;height:104px;border-radius:8px;object-fit:cover;background:#e2e8f0;
  border:1px solid var(--line);
}
.cover.ph{display:flex;align-items:center;justify-content:center;color:#94a3b8;font-size:26px}
.card .body{flex:1;min-width:0}
.titlerow{display:flex;gap:10px;align-items:flex-start;flex-wrap:wrap}
.title{font-size:16px;font-weight:700;margin:0;line-height:1.45;overflow-wrap:anywhere}
.title a{color:var(--ink);text-decoration:none}
.title a:hover{color:var(--accent);text-decoration:underline}
.badge{
  flex:0 0 auto;font-size:11px;font-weight:600;color:#fff;border-radius:999px;
  padding:4px 11px;white-space:nowrap;
}
.authors{font-size:13px;color:var(--muted);margin:6px 0 2px}
.desc{font-size:13.5px;color:#475569;margin:6px 0 0;line-height:1.55;overflow-wrap:anywhere}
.metas{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:9px;font-size:12px;color:var(--muted)}
.metas b{color:#334155;font-weight:600}
.links{margin-top:10px;display:flex;gap:8px;flex-wrap:wrap}
.links a{
  font-size:12px;text-decoration:none;border:1px solid var(--line);border-radius:8px;
  padding:5px 10px;color:var(--accent);background:#f8fafc;transition:.15s;
}
.links a:hover{border-color:var(--accent);background:#eff6ff}
mark{background:#fde68a;border-radius:3px;padding:0 2px}

.empty{text-align:center;color:var(--muted);padding:60px 0;font-size:15px}
.errbox{
  background:#fef2f2;border:1px solid #fecaca;color:#b91c1c;border-radius:12px;
  padding:14px 18px;margin:14px 0;font-size:14px;
}
.errbox a{color:#b91c1c;font-weight:600}

.foot{
  margin:40px 0 30px;padding-top:18px;border-top:1px solid var(--line);
  font-size:12.5px;color:var(--muted);line-height:1.8;text-align:center;
}
.foot a{color:var(--accent);text-decoration:none}
.foot a:hover{text-decoration:underline}

@media (max-width:640px){
  .cover{display:none}
  .searchbox button{padding:10px 18px}
}