:root{--bg:#0d0e12;--card:#16181f;--txt:#f4f5f7;--muted:#9aa0ab;--accent:#FF6B00;--line:#252833}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--txt);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit}
.wrap{max-width:720px;margin:0 auto;padding:0 16px}
.feed-wrap{max-width:1180px}

/* feed-grid: naast elkaar op desktop, onder elkaar op mobiel */
#feed{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;margin-top:4px}
#feed .card{margin:0}
#feed .sk{margin:0}

/* hero-banner (branding) — volle breedte, boven de filterbalk */
.hero{display:block;width:100%;line-height:0;background:#0d0e12}
.hero img{width:100%;height:auto;display:block}
/* mobiel: banner nooit meer dan ~kwart scherm; logo+naam altijd in beeld (vangnet) */
@media(max-width:640px){
  .hero img{max-height:26vh;object-fit:cover;object-position:center}
}

/* categorie-filterbalk (pills), mobiel horizontaal scrollbaar; sticky nav (header weg) */
.filter-bar{display:flex;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding:12px 0 8px;scrollbar-width:none;position:sticky;top:0;background:var(--bg);z-index:4;border-bottom:1px solid var(--line)}
.filter-bar::-webkit-scrollbar{display:none}
.fbtn{flex:0 0 auto;white-space:nowrap;background:transparent;border:1px solid var(--line);color:var(--muted);border-radius:999px;padding:7px 15px;font-size:13px;font-weight:700;cursor:pointer;transition:all .15s;font-family:inherit}
.fbtn:hover{border-color:var(--accent);color:var(--txt)}
/* pills in de badge-kleuren (inactief) */
.fbtn.cat-crypto{color:#f7931a;border-color:rgba(247,147,26,.35)}
.fbtn.cat-tech{color:#5aa0ff;border-color:rgba(90,160,255,.35)}
.fbtn.cat-gaming{color:#b266ff;border-color:rgba(178,102,255,.35)}
.fbtn.cat-crime{color:#ff4a4a;border-color:rgba(255,74,74,.35)}
.fbtn.cat-conflict{color:#ff9f0a;border-color:rgba(255,159,10,.35)}
.fbtn.cat-breaking_nl{color:#ff5a5a;border-color:rgba(255,74,74,.4)}
/* actieve sectie = oranje accent (wint altijd) */
.fbtn.active{background:var(--accent);border-color:var(--accent);color:#111}

/* header */
header.top{position:sticky;top:0;z-index:5;background:rgba(13,14,18,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
header.top .wrap{display:flex;align-items:center;gap:10px;height:56px}
.logo{font-weight:900;font-size:20px;letter-spacing:-.5px}
.logo b{color:var(--accent)}
.tag{color:var(--muted);font-size:12px;font-weight:600;margin-left:auto}

/* badges + labels */
.badge{display:inline-block;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;padding:3px 8px;border-radius:999px;background:rgba(255,107,0,.14);color:var(--accent);border:1px solid rgba(255,107,0,.3)}
.badge.cat-crypto{background:rgba(247,147,26,.14);color:#f7931a;border-color:rgba(247,147,26,.3)}
.badge.cat-tech{background:rgba(90,160,255,.14);color:#5aa0ff;border-color:rgba(90,160,255,.3)}
.badge.cat-gaming{background:rgba(178,102,255,.14);color:#b266ff;border-color:rgba(178,102,255,.3)}
.badge.cat-crime{background:rgba(255,74,74,.14);color:#ff4a4a;border-color:rgba(255,74,74,.3)}
.badge.cat-conflict{background:rgba(255,159,10,.14);color:#ff9f0a;border-color:rgba(255,159,10,.3)}
.badge.cat-breaking_nl{background:rgba(255,74,74,.16);color:#ff5a5a;border-color:rgba(255,74,74,.35)}
.lbl{display:inline-block;font-size:11px;font-weight:900;letter-spacing:.5px;padding:3px 8px;border-radius:5px;background:var(--accent);color:#111}

/* kaarten */
.card{display:block;background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;margin:14px 0;text-decoration:none;color:inherit;transition:transform .12s ease,border-color .12s ease}
.card.click{cursor:pointer}
.card.click:hover{border-color:rgba(255,107,0,.5)}
.card.click:active{transform:scale(.99)}
.thumb{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;background:#0a0b0e}
.card .body{padding:13px 15px 15px}
.meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.head{font-size:17px;font-weight:800;letter-spacing:-.2px;margin:0}
.emoji{font-size:16px;margin-right:2px}
.date{color:var(--muted);font-size:12px;margin-left:auto;white-space:nowrap}

/* meer laden / leeg / footer */
.more{display:block;width:100%;padding:14px;margin:10px 0 40px;background:var(--card);border:1px solid var(--line);color:var(--txt);border-radius:12px;font-weight:700;font-size:15px;cursor:pointer}
.more:hover{border-color:var(--accent)}
.notice{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:20px;text-align:center;color:var(--muted);margin:14px 0}
.foot{color:var(--muted);font-size:12px;text-align:center;padding:24px 0 40px;border-top:1px solid var(--line);margin-top:20px}
.foot-ai{font-size:11px;color:#5c626d;margin-top:8px;opacity:.85}
.foot a{color:var(--accent)}

/* skeleton tijdens laden feed */
.sk{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;margin:14px 0}
.sk .shimmer{background:linear-gradient(100deg,#16181f 30%,#1e2129 50%,#16181f 70%);background-size:200% 100%;animation:sh 1.2s infinite}
.sk .t{aspect-ratio:16/9}
.sk .l{height:14px;margin:12px 15px;border-radius:6px}
.sk .l2{width:60%}
@keyframes sh{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* laad-overlay (lazy-moment) */
.overlay{display:none;position:fixed;inset:0;z-index:50;background:rgba(9,10,13,.86);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);align-items:center;justify-content:center}
.ovl-box{text-align:center;padding:28px}
.spinner{width:44px;height:44px;border:4px solid rgba(255,107,0,.2);border-top-color:var(--accent);border-radius:50%;margin:0 auto 16px;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.ovl-txt{font-weight:800;font-size:17px}
.ovl-sub{color:var(--muted);font-size:13px;margin-top:5px}

/* artikelpagina (ook door de SSR-pagina gebruikt, daar inline) */
article .hero{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:14px;margin:8px 0 16px;background:#0a0b0e}
article h1{font-size:26px;line-height:1.2;letter-spacing:-.5px;margin:6px 0 10px}
article .content{font-size:17px}
article .content h2{font-size:19px;margin:22px 0 6px;color:#fff}
article .content p{margin:11px 0;color:#e6e8ec}
.back{display:inline-flex;align-items:center;gap:6px;color:var(--muted);text-decoration:none;font-size:14px;font-weight:600;margin:14px 0}

@media(min-width:640px){.head{font-size:19px}}