:root { --bg:#0f1419; --card:#1a2332; --text:#e7ecf3; --muted:#9aa7b8; --accent:#5b9fd4; --border:#2a3544; }
* { box-sizing:border-box; }
body { margin:0; font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif; background:var(--bg); color:var(--text); line-height:1.45; padding:1.25rem; max-width:1100px; margin-inline:auto; }
header { display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; align-items:flex-start; margin-bottom:.75rem; }
h1 { margin:0 0 .35rem; font-size:1.6rem; }
.sub { margin:0; color:var(--muted); max-width:40rem; }
.sheet { background:var(--accent); color:#061018; text-decoration:none; font-weight:600; padding:.55rem .9rem; border-radius:8px; white-space:nowrap; }
.note { color:var(--muted); font-size:.9rem; margin:0 0 1rem; }
.controls { display:grid; gap:.75rem; margin-bottom:1rem; }
#q { width:100%; padding:.7rem .85rem; border-radius:8px; border:1px solid var(--border); background:#121a24; color:var(--text); font-size:1rem; }
.chips { display:flex; flex-wrap:wrap; gap:.4rem; }
.chip { border:1px solid var(--border); background:transparent; color:var(--muted); border-radius:999px; padding:.3rem .7rem; cursor:pointer; font-size:.85rem; }
.chip.on { background:#243247; color:var(--text); border-color:var(--accent); }
.count { color:var(--muted); font-size:.9rem; }
.card { background:var(--card); border:1px solid var(--border); border-radius:12px; padding:1rem 1.1rem; margin-bottom:.75rem; }
.top { display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; margin-bottom:.4rem; }
.name { font-weight:650; font-size:1.05rem; }
.badge { font-size:.72rem; text-transform:uppercase; letter-spacing:.03em; padding:.15rem .45rem; border-radius:6px; background:#243247; color:var(--muted); }
.badge.status-live { background:#143524; color:#7dcea0; }
.badge.status-draft { background:#3a2e14; color:#e0c36a; }
.badge.status-archived { background:#2a2a2a; color:#aaa; }
.purpose { margin:.25rem 0 .55rem; }
.meta { display:flex; flex-wrap:wrap; gap:.75rem 1.25rem; color:var(--muted); font-size:.88rem; }
.meta a { color:var(--accent); }
.tags { color:var(--muted); font-size:.82rem; margin-top:.45rem; }
.empty { color:var(--muted); padding:2rem 0; }