:root{
  --bg:#0b0b0f;
  --panel:#14141a;
  --soft:#1b1b24;
  --text:#f5f5f7;
  --muted:#b3b3bf;
  --border:#282836;
  --accent:#d92d2d;
  --accent-2:#f0a43a;
  --success:#1d9b5f;
  --error:#c0392b;
}
html[data-theme="light"]{
  --bg:#fff7f7;
  --panel:#ffffff;
  --soft:#fff1f1;
  --text:#17171d;
  --muted:#65657a;
  --border:#f0d7d7;
  --accent:#cf2727;
  --accent-2:#d89730;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:Inter,Arial,sans-serif;
  background:
    radial-gradient(circle at top, rgba(217,45,45,.18), transparent 30%),
    linear-gradient(180deg,var(--bg),color-mix(in srgb, var(--bg) 80%, #000 20%));
  color:var(--text);
}
a{color:inherit;text-decoration:none}
.container{width:min(1180px, calc(100% - 2rem)); margin:0 auto}
.site-header{border-bottom:1px solid var(--border); backdrop-filter: blur(10px); position:sticky; top:0; background:color-mix(in srgb, var(--bg) 82%, transparent)}
.nav-wrap{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem 0}
.brand{display:flex; align-items:center; gap:.8rem; font-weight:700}
.brand-logo,.brand-logo-img{display:grid;place-items:center;width:40px;height:40px;border-radius:14px;background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;overflow:hidden}
.brand-logo-img{object-fit:cover}
.nav-links{display:flex; align-items:center; gap:1rem; flex-wrap:wrap}
.theme-toggle,.btn{
  border:0;
  border-radius:14px;
  padding:.8rem 1rem;
  cursor:pointer;
}
.theme-toggle{background:var(--soft); color:var(--text)}
.btn-primary{background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#fff}
.main-shell{padding:2rem 0 4rem}
.card{
  background:color-mix(in srgb, var(--panel) 92%, transparent);
  border:1px solid var(--border);
  border-radius:28px;
  padding:1.25rem;
  box-shadow:0 10px 30px rgba(0,0,0,.08);
}
.card + .card, .card-grid, .grid, .mini-list, .table-wrap{margin-top:1rem}
.card.wide{max-width:980px;margin:2rem auto}
.card.small{max-width:460px;margin:3rem auto}
.hero{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:1rem;
  align-items:start;
  margin-bottom:1rem;
}
.public-hero{align-items:center}
.stats{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem}
.stat-card,.feature-card,.mini-item{
  background:var(--soft);
  border:1px solid var(--border);
  border-radius:22px;
  padding:1rem;
}
.stat-card strong{display:block; font-size:2rem}
.pill,.mini-meta{
  display:inline-flex;
  border-radius:999px;
  padding:.4rem .75rem;
  background:rgba(217,45,45,.15);
  color:var(--text);
  font-size:.85rem;
}
h1,h2{margin:.2rem 0 1rem}
p{color:var(--muted); line-height:1.6}
.grid{display:grid; gap:1rem}
.two-col{grid-template-columns:repeat(2, minmax(0,1fr))}
.full{grid-column:1 / -1}
.field{display:flex;flex-direction:column;gap:.4rem}
label{font-weight:600}
input,textarea,select{
  width:100%;
  padding:.85rem 1rem;
  border-radius:14px;
  border:1px solid var(--border);
  background:var(--soft);
  color:var(--text);
  font:inherit;
}
textarea{min-height:120px; resize:vertical}
.flash{
  padding:1rem 1.2rem;
  border-radius:18px;
  margin:0 0 1rem;
  border:1px solid var(--border);
}
.flash-success{background:rgba(29,155,95,.14)}
.flash-error{background:rgba(192,57,43,.14)}
.admin-grid{grid-template-columns:repeat(2, minmax(0,1fr)); align-items:start}
.checkbox-list{display:grid; gap:.6rem; margin-bottom:1rem}
.checkbox-item{display:flex; gap:.7rem; align-items:center; background:var(--soft); border:1px solid var(--border); border-radius:14px; padding:.8rem}
.inline-checks{display:flex; gap:1rem; flex-wrap:wrap}
.table-wrap{overflow:auto}
table{width:100%; border-collapse:collapse}
th,td{padding:.85rem; text-align:left; border-bottom:1px solid var(--border)}
.card-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem}
.feature-card strong{display:block; margin:.4rem 0}
.article-view{max-width:920px; margin:0 auto}
.article-meta{display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; color:var(--muted)}
.article-excerpt{font-size:1.05rem}
.article-cover{width:100%; border-radius:18px; margin:1rem 0}
.article-content{line-height:1.75}
.article-content img{max-width:100%; border-radius:18px}
.hero-banner img{width:100%; border-radius:24px; border:1px solid var(--border)}
ol{color:var(--muted)}
@media (max-width: 900px){
  .hero,.admin-grid,.two-col,.card-grid,.stats{grid-template-columns:1fr}
}