:root{
--bg:#0d0f12;
--panel:#12151b;
--muted:#8b93a1;
--text:#e8ecf2;
--accent:#ffd34d;
--accent-dark:#ffbf00;
--card:#171b23;
--border:#232a35;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
margin:0; font:16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
color:var(--text); background:radial-gradient(60% 50% at 50% 20%, #0f1217, #0b0d10 60%, #090b0e 100%);
}
.wrap{max-width:980px; margin:64px auto; padding:0 16px}

.brand{
display:flex; align-items:center; gap:14px;
font-weight:800; font-size:40px; margin:0 0 22px;
}
.brand em{
font-style:normal; font-weight:700; color:#b8c1d1;
background:#1a1f28; border:1px solid var(--border); padding:6px 10px; border-radius:12px;
font-size:16px; align-self:center;
}
.dot{
width:18px; height:18px; border-radius:50%;
background: radial-gradient(circle at 35% 35%, #ffd34d, #ffb300 60%, #cc8a00 100%);
box-shadow:0 0 14px #ffcf44aa, 0 0 28px #ffcf4480;
display:inline-block;
}

.bar{display:flex; gap:12px; align-items:center; margin:8px 0 10px}
.bar input{
flex:1; background:#141821; border:1px solid var(--border);
color:var(--text); border-radius:12px; padding:16px 16px; font-size:16px;
outline:none; transition:border .15s, box-shadow .15s;
}
.bar input:focus{border-color:#334155; box-shadow:0 0 0 3px #1f293733}
.bar button{
background:var(--accent); color:#202020; border:0; border-radius:12px;
font-weight:800; padding:14px 18px; cursor:pointer;
box-shadow:0 6px 24px #ffcf4460, 0 1px 0 #000 inset;
}
.bar button:hover{background:var(--accent-dark)}

.subbar{display:flex; gap:10px; align-items:center; margin:6px 0 14px; flex-wrap:wrap}
.chip{
background:#151a21; border:1px solid var(--border); color:var(--text);
padding:8px 12px; border-radius:999px; font-size:13px;
}
.chip-action{
background:var(--accent); color:#202020; border:0; cursor:pointer; font-weight:700;
box-shadow:0 4px 18px #ffcf4433;
}
.muted{color:var(--muted)}

.provider{margin-left:auto; display:flex; gap:8px; align-items:center; font-size:13px}
.provider select{
background:#141821; color:var(--text); border:1px solid var(--border);
padding:8px 10px; border-radius:8px;
}

.spinner{
width:16px; height:16px; display:inline-block; border:2px solid #ffffff33; border-top-color:#fff;
border-radius:50%; animation:spin 1s linear infinite; vertical-align:-3px; margin-right:6px;
}
@keyframes spin{to{transform:rotate(360deg)}}

.cards{display:grid; grid-template-columns:1fr; gap:12px; margin-top:8px}
@media(min-width:720px){.cards{grid-template-columns:1fr}}
.card{
background:var(--card); border:1px solid var(--border); border-radius:14px; padding:14px 16px;
}
.card .row{display:flex; gap:12px; align-items:flex-start}
.favicon{width:20px; height:20px; border-radius:4px; margin-top:4px}
.meta .url{color:#aab4c4; font-size:12px; margin-bottom:2px}
.card h3{margin:0 0 6px; font-size:18px}
.card h3 a{color:#dbe6f7; text-decoration:none}
.card h3 a:hover{text-decoration:underline}
.card p{margin:0; color:#c9d2e2}

.empty{padding:18px; border:1px dashed var(--border); border-radius:12px; color:var(--muted)}
.err{white-space:pre-wrap; background:#121620; border:1px solid #2a3240; border-radius:10px; padding:12px; color:#ffb4b4}
.foot{margin-top:26px; font-size:12px}