:root {
  --bg: #020617;
  --bg-soft: #02091b;
  --card: #020617;
  --accent: #2563eb;
  --accent-soft: rgba(37, 99, 235, 0.16);
  --border: #1f2937;
  --text-main: #e5e7eb;
  --text-soft: #9ca3af;
}
*,
*::before,
*::after { box-sizing: border-box; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: radial-gradient(circle at top, #020617 0, #000 65%);
  color: var(--text-main);
}
a { color: inherit; text-decoration: none; }
.app-shell { max-width: 1120px; margin: 0 auto; padding: 16px 16px 32px; }
/* NAVBAR */
.navbar {
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 16px; border-radius:999px; border:1px solid var(--border);
  background:rgba(15,23,42,0.95); margin-bottom:18px; backdrop-filter:blur(18px);
}
.nav-left{display:flex;align-items:center;gap:10px;}
.nav-logo-circle{
  width:32px;height:32px;border-radius:999px;
  background:linear-gradient(135deg,#2563eb,#4f46e5);
  display:flex;align-items:center;justify-content:center;font-weight:700;
}
.nav-title-block{display:flex;flex-direction:column;gap:2px;}
.nav-title{font-size:15px;font-weight:700;letter-spacing:0.12em;}
.nav-sub{font-size:11px;color:var(--text-soft);}
.nav-links{display:flex;gap:12px;font-size:13px;}
.nav-links a{padding:6px 10px;border-radius:999px;}
.nav-links a:hover{background:rgba(15,23,42,0.9);}
.nav-right{display:flex;gap:8px;align-items:center;}
.badge-soft{
  padding:4px 10px;border-radius:999px;border:1px solid var(--border);
  font-size:11px;color:var(--text-soft);
}
.btn-primary{
  padding:6px 14px;border-radius:999px;border:none;font-size:13px;
  cursor:pointer;background:linear-gradient(135deg,#2563eb,#4f46e5);color:white;
}
.btn-primary:disabled{opacity:0.6;cursor:default;}
/* LAYOUT */
.layout-main{
  display:grid;grid-template-columns:minmax(0,2.1fr) minmax(0,1.1fr);gap:16px;
}
@media (max-width:880px){
  .layout-main{grid-template-columns:minmax(0,1fr);}
  .nav-links{display:none;}
}
/* CARDS */
.card{
  background:radial-gradient(circle at top,#020617 0,#020617 60%);
  border-radius:22px;border:1px solid var(--border);padding:16px;
}
.card-hero{
  background:radial-gradient(circle at top,#020617 0,#020617 60%);
  border-radius:24px;border:1px solid var(--border);padding:18px;
}
/* HERO */
.hero-label{font-size:11px;color:var(--text-soft);margin-bottom:6px;}
.hero-title{font-size:22px;margin:0 0 8px;}
.hero-meta{font-size:12px;color:var(--text-soft);margin-bottom:10px;}
.hero-excerpt{font-size:13px;color:var(--text-main);margin-bottom:10px;}
/* POSTS GRID */
.section-title{font-size:15px;margin-bottom:4px;}
.section-sub{font-size:12px;color:var(--text-soft);margin-bottom:8px;}
.grid-posts{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;
}
.post-card{
  border-radius:18px;border:1px solid var(--border);
  padding:12px;background-color:var(--card);font-size:13px;
}
.post-category{font-size:11px;color:var(--text-soft);margin-bottom:4px;}
.post-title{font-size:14px;font-weight:600;margin-bottom:6px;}
.post-meta{font-size:11px;color:var(--text-soft);}
.trending-list{list-style:none;padding:0;margin:0;font-size:13px;}
.trending-item{padding:6px 0;border-bottom:1px dashed #111827;}
.trending-rank{font-size:11px;color:var(--accent);margin-right:6px;}
.article-content{font-size:14px;line-height:1.7;}
.back-link{font-size:12px;color:var(--text-soft);margin-bottom:4px;}
.back-link a{text-decoration:underline;}
.form{max-width:700px;}
.form-field{display:flex;flex-direction:column;gap:4px;margin-bottom:10px;}
.form-field label{font-size:13px;}
.form-field input,.form-field textarea,.form-field select{
  padding:8px 10px;border-radius:8px;border:1px solid #1f2937;
  background-color:#020617;color:var(--text-main);font-size:13px;
}
.form-field textarea{min-height:120px;resize:vertical;}
.form-note{font-size:11px;color:var(--text-soft);}
.text-error{font-size:12px;color:#f97373;}
.text-success{font-size:12px;color:#4ade80;}
.footer{
  margin-top:24px;padding-top:12px;border-top:1px solid var(--border);
  font-size:11px;color:var(--text-soft);display:flex;justify-content:space-between;
  gap:8px;flex-wrap:wrap;
}