:root { --max: 900px; --pad: 16px; }
* { box-sizing: border-box; }
body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji"; line-height:1.45; margin:0; color:#0f172a; background:#f8fafc; }
.container { max-width: var(--max); margin: 0 auto; padding: 24px var(--pad); }
header { background: white; border-bottom: 1px solid #e2e8f0; position: sticky; top: 0; z-index: 10; }
h1 { margin: 0 0 8px; font-size: 28px; }
.sub { margin: 0 0 12px; color:#475569; }
.search-row { display:flex; gap:12px; align-items:center; }
#q { flex:1; padding:12px 14px; font-size:16px; border:1px solid #cbd5e1; border-radius:12px; outline:none; }
#q:focus { border-color:#0ea5e9; box-shadow: 0 0 0 3px rgba(14,165,233,.15); }
select { padding:12px 14px; font-size:15px; border:1px solid #cbd5e1; border-radius:12px; background:white; }
.stats { color:#475569; margin:14px 0; }
.results { list-style:none; padding:0; margin:0; display:grid; gap:12px; }
.card { background:white; border:1px solid #e2e8f0; border-radius:16px; padding:16px; box-shadow: 0 1px 2px rgba(0,0,0,.03); }
.card h3 { margin:0 0 6px; font-size:18px; }
.meta { color:#475569; font-size:14px; margin: 0 0 8px; }
.snippet { margin:0; color:#0f172a; }
.badge { display:inline-block; padding:2px 8px; font-size:12px; background:#e2e8f0; border-radius:999px; margin-left:8px; color:#334155; }
footer { color:#64748b; font-size:14px; }
.muted { color:#94a3b8; }
mark { background:#fff3b0; padding:0 2px; border-radius:4px; }