@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Manrope:wght@500;600;700;800&display=swap');

:root {
  --bg: #070b14;
  --bg-2: #0e1526;
  --bg-3: #151d33;
  --card: #11192d;
  --text: #eaf0ff;
  --muted: #9ca7c8;
  --line: rgba(126, 147, 223, 0.25);
  --accent: #4f8cff;
  --accent-soft: rgba(79, 140, 255, 0.18);
  --danger: #ff6d6d;
  --success: #3ed598;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: 'Inter', sans-serif;
  background: radial-gradient(circle at 20% 0%, #172447, #070b14 55%);
  color: var(--text);
  line-height: 1.6;
}

a { color: inherit; }

.container { width: min(1160px, calc(100% - 2rem)); margin-inline: auto; }

.site-header {
  position: sticky; top: 0; z-index: 100;
  border-bottom: 1px solid var(--line);
  background: rgba(7, 11, 20, 0.82); backdrop-filter: blur(12px);
}
.header-row { display:flex; align-items:center; justify-content:space-between; padding: 14px 0; gap: 1rem; }
.brand { text-decoration:none; display:flex; align-items:center; gap:.65rem; }
.brand-dot { width: 12px; height:12px; border-radius:99px; background:linear-gradient(135deg,#75b4ff,#4f8cff); box-shadow:0 0 18px #4f8cff; }
.brand-name { font-family:'Manrope',sans-serif; font-weight:800; letter-spacing:.02em; }
.nav-links { display:flex; flex-wrap:wrap; gap:.4rem; }
.nav-links a, .nav-links button {
  text-decoration:none; border:1px solid var(--line); background: transparent; color: var(--muted);
  padding:.45rem .8rem; border-radius:999px; font-size:.87rem; cursor:pointer;
}
.nav-links a:hover, .nav-links button:hover { color:var(--text); border-color: rgba(79,140,255,.6); background: var(--accent-soft); }

.hero { padding: 4rem 0 2rem; display:grid; grid-template-columns:1.25fr .9fr; gap:1.25rem; }
.hero h1 { font-size: clamp(2rem, 3.4vw, 3.3rem); line-height:1.12; margin:.2rem 0 .8rem; font-family:'Manrope',sans-serif; }
.hero p { color:var(--muted); max-width: 60ch; }
.btn { display:inline-flex; align-items:center; gap:.5rem; text-decoration:none; border-radius:12px; border:1px solid var(--line); padding:.65rem 1rem; font-weight:600; }
.btn.primary { background: linear-gradient(135deg,#4f8cff,#6a68ff); color:white; border:none; }
.btn.ghost { color:var(--text); background:rgba(255,255,255,0.03); }
.hero-actions { display:flex; gap:.7rem; flex-wrap:wrap; margin-top:1.2rem; }

.panel { background: linear-gradient(180deg, rgba(18,28,49,.94), rgba(11,18,33,.94)); border:1px solid var(--line); border-radius:16px; padding:1rem; }
.kicker { font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; color:#b8c2e0; margin-bottom:.45rem; }

.section { margin: 2rem 0; }
.section h2 { font-family:'Manrope',sans-serif; font-size:1.55rem; margin-bottom:.8rem; }
.section p.lead { color:var(--muted); margin-top:0; }
.grid-3 { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
.grid-2 { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }

.card { background: var(--card); border:1px solid var(--line); border-radius:16px; padding:1rem; }
.card a { text-decoration:none; }
.badge { display:inline-flex; background: var(--accent-soft); color:#d4e3ff; border:1px solid rgba(79,140,255,.5); border-radius:999px; font-size:.75rem; padding:.15rem .55rem; }
.muted { color:var(--muted); }
.meta { color:var(--muted); font-size:.88rem; display:flex; flex-wrap:wrap; gap:.7rem; }

.article-card h3 { margin:.45rem 0 .3rem; font-size:1.08rem; }
.article-card p { color:var(--muted); margin:.4rem 0 .6rem; }

.category-chip { text-decoration:none; display:inline-flex; padding:.45rem .75rem; border-radius:999px; border:1px solid var(--line); color:var(--muted); }
.category-chip.active, .category-chip:hover { color:var(--text); border-color: rgba(79,140,255,.55); background: var(--accent-soft); }

.searchbar { display:flex; gap:.65rem; flex-wrap:wrap; margin:1rem 0; }
input, select, textarea {
  width:100%; padding:.65rem .75rem; border-radius:10px; border:1px solid var(--line);
  background: #0a1121; color:var(--text); font: inherit;
}
textarea { min-height:130px; }

.article-layout { display:grid; grid-template-columns: 1fr 280px; gap:1rem; margin-top:1.5rem; }
.article-body { background: var(--card); border:1px solid var(--line); border-radius:16px; padding:1.3rem; }
.article-body h1 { line-height:1.2; margin:.4rem 0 .8rem; }
.article-content { color:#d8e2ff; }
.article-content h2, .article-content h3 { font-family:'Manrope',sans-serif; margin-top:1.4rem; }
.article-content p { margin:.8rem 0; }
.article-content pre { background:#0a1121; padding:.85rem; border-radius:10px; overflow:auto; }
.cover { border-radius:12px; width:100%; max-height:350px; object-fit:cover; border:1px solid var(--line); margin:.8rem 0 1rem; }
.sidebar { position:sticky; top:80px; align-self:start; }

.comments { margin-top:1.6rem; }
.comment { border-top:1px solid var(--line); padding:.8rem 0; }
.comment .head { display:flex; justify-content:space-between; gap:.5rem; font-size:.86rem; color:var(--muted); }
.comment p { margin:.4rem 0 0; }
.comment.child { margin-left:1rem; border-left:2px solid rgba(79,140,255,.4); padding-left:.8rem; }

.site-footer { margin-top:3rem; border-top:1px solid var(--line); padding:1.4rem 0 2rem; color:var(--muted); }
.footer-grid { display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:1rem; }
.footer-grid a { color:#c9d8ff; text-decoration:none; display:block; margin:.2rem 0; }

.notice { padding:.7rem .8rem; border-radius:10px; border:1px solid var(--line); font-size:.9rem; }
.notice.error { border-color: rgba(255,109,109,.55); color:#ffd8d8; background: rgba(50,16,20,.45); }
.notice.ok { border-color: rgba(62,213,152,.5); color:#d2ffe8; background: rgba(16,48,35,.45); }
.hidden { display:none !important; }

.progress { position: fixed; left:0; top:0; height:3px; background: linear-gradient(90deg,#4f8cff,#8b67ff); width:0; z-index:101; }

@media (max-width: 960px) {
  .hero, .article-layout, .footer-grid, .grid-3, .grid-2 { grid-template-columns:1fr; }
  .sidebar { position:static; }
}

.admin-log {
  margin-top: .8rem;
  background: #0a1121;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: .75rem;
  min-height: 140px;
  max-height: 260px;
  overflow: auto;
  color: #c6d5ff;
  font-size: .85rem;
  white-space: pre-wrap;
}