:root{
  --bg: #0b1020;
  --fg: #e7ecf7;
  --muted:#a6b0c3;
  --card:#121935;
  --cardBorder:#1e2a5a;
  --accent:#4ea8ff;
  --accentSoft:#173259;
  --chip:#223368;
}
@media (prefers-color-scheme: light){
  :root{
    --bg:#f7f9ff; --fg:#0a0f1f; --muted:#58627a;
    --card:#ffffff; --cardBorder:#dde3f7; --accent:#1258ff; --accentSoft:#e7efff; --chip:#eef3ff;
  }
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial}
.container{max-width:1080px;margin:0 auto;padding:1.2rem}
.site-header{padding:2.2rem 0;border-bottom:1px solid var(--cardBorder);background:linear-gradient(180deg,rgba(78,168,255,.10),transparent)}
.site-title{margin:0;font-size:clamp(1.4rem,2.8vw,2rem)}
.site-tagline{margin:.3rem 0 0;color:var(--muted)}
.site-footer{border-top:1px solid var(--cardBorder);margin-top:3rem;padding:1.5rem 0;color:var(--muted)}

.controls{display:flex;gap:.6rem;flex-wrap:wrap;margin:1rem 0 1.2rem}
.controls input[type="search"], .controls select{
  background:var(--card); color:var(--fg); border:1px solid var(--cardBorder);
  padding:.55rem .7rem; border-radius:.6rem; outline:none; width:260px;
}
.controls select{width:auto}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem}
.card{
  background:var(--card); border:1px solid var(--cardBorder); border-radius:14px;
  padding:1rem; transition:transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.card:hover{transform:translateY(-2px); border-color:var(--accent); box-shadow:0 6px 18px rgba(0,0,0,.15)}
.card h3{margin:.2rem 0 .4rem;font-size:1.05rem}
.card a.title{color:var(--fg);text-decoration:none}
.card a.title:hover{color:var(--accent)}
.card p.desc{margin:.4rem 0 .7rem; color:var(--muted); min-height:2.6em}
.meta{
  display:flex;
  gap:.6rem;
  align-items:center;
  color:var(--muted);
  font-size:.9rem;
  flex-wrap: nowrap;           /* var: wrap */
}
.badge{
  background:var(--chip);
  padding:.18rem .5rem;
  border-radius:.5rem;
  max-width: 120px;            /* ny */
  white-space: nowrap;         /* ny */
  overflow: hidden;            /* ny */
  text-overflow: ellipsis;     /* ny */
}
.star{padding:.18rem .5rem; border-radius:.5rem; background:var(--accentSoft)}
.updated{
  margin-left:auto;
  white-space: nowrap;         /* ny – hindrar radbrytning */
}
.topic{display:inline-block;background:var(--chip);padding:.15rem .45rem;border-radius:.45rem;font-size:.8rem;margin:.15rem .25rem 0 0}