:root{
  --bg: #0b1226;
  --card: #0f1833;
  --text: #e6f0ff;
  --muted: #a9b4c7;
  --brand: #7aa2ff;
  --brand-2: #9f7aff;
  --border: #233057;
  --chip: #172248;
  --shadow: 0 8px 30px rgba(0,0,0,.35);
}

@media (prefers-color-scheme: light){
  :root{
    --bg:#f7f9ff; --card:#fff; --text:#0b1226; --muted:#4b5874; --border:#e4e8f5; --chip:#eef2ff;
  }
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; font-family: ui-sans-serif, system-ui, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; background:var(--bg); color:var(--text);}

.container{width:min(1100px, 92%); margin-inline:auto}
.blog-hero{padding:42px 0; background:linear-gradient(120deg, rgba(122,162,255,.15), rgba(159,122,255,.12) 60%, transparent), radial-gradient(800px 300px at 10% -10%, rgba(255,255,255,.08), transparent 60%);}
.blog-title{font-size: clamp(28px, 4vw, 42px); margin:0 0 6px}
.blog-subtitle{margin:0; color:var(--muted)}

.controls{display:flex; gap:12px; flex-wrap:wrap; margin-top:18px}
.control{display:flex; flex-direction:column; gap:6px; min-width:220px}
label{font-size:12px; color:var(--muted)}
input[type="search"], select{
  background:var(--card); color:var(--text); border:1px solid var(--border);
  border-radius:12px; padding:12px 14px; outline:none; box-shadow:none;
}
input[type="search"]::placeholder{color:color-mix(in oklab, var(--muted) 70%, transparent)}
select{appearance:none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 18px) 55%, calc(100% - 12px) 55%; background-size:6px 6px,6px 6px; background-repeat:no-repeat; padding-right:32px}

.btn{
  background:linear-gradient(135deg, var(--brand), var(--brand-2));
  color:white; border:0; padding:12px 16px; border-radius:12px; cursor:pointer; box-shadow:var(--shadow); transition:transform .1s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn:disabled{opacity:.6; cursor:not-allowed; transform:none}
.btn.outline{background:transparent; color:var(--text); border:1px solid var(--border); box-shadow:none}
.btn.ghost{background:transparent; color:var(--muted); border:0; text-decoration:underline}

.filters{border-block:1px solid var(--border); background:linear-gradient(180deg, rgba(255,255,255,.02), transparent)}
.filters-inner{display:flex; justify-content:space-between; align-items:center; gap:16px; padding:16px 0}
.chip-group{display:flex; gap:10px; flex-wrap:wrap}
.chip{
  background:var(--chip); border:1px solid var(--border); color:var(--text);
  padding:8px 12px; border-radius:999px; cursor:pointer; user-select:none; transition:opacity .15s ease, transform .1s ease;
}
.chip[aria-pressed="true"]{outline:2px solid color-mix(in oklab, var(--brand) 60%, transparent); background:color-mix(in oklab, var(--chip) 70%, var(--brand) 30%)}
.chip:hover{transform:translateY(-1px)}

.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin:26px 0}
@media (max-width: 980px){ .grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width: 640px){ .grid{grid-template-columns:1fr} }

.card{
  background:var(--card); border:1px solid var(--border); border-radius:18px; overflow:hidden; box-shadow:var(--shadow);
  display:flex; flex-direction:column; min-height:100%;
}
.card-media{aspect-ratio: 16 / 9; background:#111829; display:block; overflow:hidden}
.card-media img{width:100%; height:100%; object-fit:cover; display:block}
.card-body{padding:16px; display:flex; flex-direction:column; gap:10px}
.card-title{font-size: clamp(18px, 2.4vw, 22px); margin:0}
.meta{font-size:12px; color:var(--muted); display:flex; gap:10px; flex-wrap:wrap}
.excerpt{color:var(--text); opacity:.9; line-height:1.6}
.card-tags{display:flex; flex-wrap:wrap; gap:8px; margin-top:auto}
.tag{font-size:12px; color:var(--muted); background:transparent; border:1px dashed var(--border); padding:4px 8px; border-radius:999px}

.card-actions{display:flex; gap:10px; margin-top:6px}
.card-actions .btn{padding:10px 12px; font-size:14px}

.pagination{display:flex; align-items:center; justify-content:center; gap:10px; margin:22px 0}
.page-info{color:var(--muted)}

.footer-note{padding:32px 0 46px; color:var(--muted); text-align:center}
.hidden{display:none !important}