:root { --bg:#0f1115; --panel:#181b22; --ink:#e8eaed; --muted:#9aa3b2; --accent:#5b9dff; --ok:#3fb950; --bad:#f85149; --line:#272b34; }
* { box-sizing: border-box; }
body { margin:0; font:15px/1.5 system-ui,sans-serif; background:var(--bg); color:var(--ink); }
header { padding:20px 24px; border-bottom:1px solid var(--line); }
h1 { margin:0; font-size:22px; letter-spacing:-.02em; }
.tagline { margin:2px 0 0; color:var(--muted); font-size:13px; }
main { display:grid; grid-template-columns:360px 1fr; gap:16px; padding:16px 24px; align-items:start; }
.feed-panel { grid-column:1 / -1; }
@media (min-width:1100px){ .feed-panel{ grid-column:auto; } main{ grid-template-columns:360px 320px 1fr; } }
@media (max-width:760px){ main{ grid-template-columns:1fr; } }
.panel { background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:16px; }
h2 { margin:0 0 12px; font-size:15px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); }
input { width:100%; padding:9px 11px; margin-bottom:8px; background:#0e1014; border:1px solid var(--line); border-radius:7px; color:var(--ink); }
button { padding:8px 13px; margin-right:6px; background:var(--accent); color:#06101f; border:0; border-radius:7px; font-weight:600; cursor:pointer; }
button:focus-visible, input:focus-visible, a:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
button.secondary { background:#2a2f3a; color:var(--ink); }
.tip { font-size:13px; color:var(--muted); background:#10141c; border:1px dashed var(--line); padding:9px 11px; border-radius:7px; }
.examples { margin:2px 0 4px; }
.ex-hint { display:block; font-size:12px; color:var(--muted); margin-bottom:6px; }
#examples { display:flex; gap:6px; flex-wrap:wrap; }
.ex-chip { background:#2a2f3a; color:var(--ink); font-size:12px; font-weight:500; padding:4px 10px; margin:0; border:1px solid var(--line); border-radius:999px; }
.ex-chip:hover { border-color:var(--accent); color:var(--accent); }
.tip code, code { background:#0c0f14; padding:1px 5px; border-radius:4px; font-size:12px; }
.error { color:var(--bad); font-size:13px; min-height:1em; margin:4px 0 0; }
.status { color:var(--muted); font-size:13px; }
#filter-list { list-style:none; padding:0; margin:12px 0 0; }
#filter-list li { display:flex; justify-content:space-between; gap:8px; padding:8px 0; border-top:1px solid var(--line); }
#filter-list .q { color:var(--muted); font-size:12px; word-break:break-word; }
#filter-list button { background:transparent; color:var(--bad); padding:2px 6px; font-size:12px; }
.sources { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
.badge { font-size:12px; padding:3px 9px; border-radius:999px; border:1px solid var(--line); color:var(--muted); }
.badge.streaming,.badge.polling { color:var(--ok); border-color:var(--ok); }
.badge.reconnecting,.badge.error { color:var(--bad); border-color:var(--bad); }
.badge.disabled { color:var(--muted); }
#feed { list-style:none; padding:0; margin:0; }
#feed li { padding:12px 0; border-top:1px solid var(--line); }
.m-head { display:flex; gap:8px; align-items:center; font-size:12px; color:var(--muted); }
.tag { font-weight:700; text-transform:uppercase; letter-spacing:.05em; }
.tag.bluesky { color:#5b9dff; } .tag.hackernews { color:#ff6600; }
.m-text { margin:5px 0; }
.m-filters { font-size:12px; color:var(--accent); }
.empty { color:var(--muted); font-style:italic; }
a { color:var(--accent); }
@media (prefers-reduced-motion:no-preference){ #feed li{ animation:fade .3s ease; } }
@keyframes fade { from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:none; } }