/* base.css ──────────────────────────────────────────────── */
/* Shared foundation: reset, colors, typography, grain */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  background: #0a0a0a;
  color: #e0e0e0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  line-height: 1.58;
  font-size: 15px;
  overflow-x: hidden;
}

body {
  background: #050505;
  position: relative;
}

/* subtle grain/noise */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMDAiIGhlaWdodD0iMzAwIj48ZmlsdGVyIGlkPSJmIj48ZmVUcmJ1bGVuY2UgdHlwZT0iZnJhY3RhbE5vaXNlIiBiYXNlRnJlcXVlbmN5PSIuNzUiIG51bU9jdGF2ZXM9IjMiLz48L2ZpbHRlcj48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWx0ZXI9InVybCgjZikiIG9wYWNpdHk9IjAuMDIyIi8+PC9zdmc+');
  pointer-events: none;
  z-index: 1;
  opacity: 0.13;
}

#particle-canvas {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.hidden { display: none !important; }

.container,
.article-container,
#adminPanel {
  max-width: 980px;
  margin: 0 auto;
  padding: 24px 20px;
    position: relative;
  z-index: 2;
}

/* ── Typography ─────────────────────────────────────────── */
h1, h2, h3 {
  font-weight: 700;
  letter-spacing: -0.02em;
}

h1 { font-size: 2.4rem; margin-bottom: 0.7em; color: #ffffff; }
h2 { font-size: 1.65rem; margin: 1.4em 0 0.6em; color: #e0e0ff; }
h3 { font-size: 1.32rem; margin: 1.3em 0 0.5em; }

/* Responsive base */
@media (max-width: 768px) {
  .container, .article-container, #adminPanel { padding: 16px 14px; }
  h1 { font-size: 2rem; }
}