:root {
  --background: 42 15% 93%;
  --foreground: 220 18% 9%;
  --primary: 358 74% 42%;
  --secondary: 210 14% 24%;
  --muted: 215 12% 40%;
  --destructive: 2 78% 43%;
  --border: 220 13% 72%;
  --card: 42 22% 98%;
  --success: 142 43% 34%;
  --radius-sm: 2px;
  --radius-md: 6px;
  --radius-lg: 12px;
  --shadow-sm: 0 6px 18px hsl(220 18% 9% / 0.10);
  --shadow-md: 0 14px 36px hsl(220 18% 9% / 0.14);
  --shadow-lg: 0 24px 80px hsl(220 18% 9% / 0.18);
  --transition-fast: 140ms ease;
  --transition-smooth: 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

.dark {
  --background: 220 19% 7%;
  --foreground: 42 22% 92%;
  --primary: 358 82% 56%;
  --secondary: 218 14% 20%;
  --muted: 220 10% 62%;
  --destructive: 2 84% 59%;
  --border: 220 14% 22%;
  --card: 220 18% 10%;
  --success: 142 55% 48%;
  --shadow-sm: 0 8px 24px hsl(0 0% 0% / 0.28);
  --shadow-md: 0 18px 48px hsl(0 0% 0% / 0.36);
  --shadow-lg: 0 28px 90px hsl(0 0% 0% / 0.48);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    linear-gradient(hsl(var(--primary) / 0.045) 1px, transparent 1px),
    linear-gradient(90deg, hsl(var(--primary) / 0.035) 1px, transparent 1px),
    hsl(var(--background));
  background-size: 44px 44px;
  color: hsl(var(--foreground));
  overflow-x: hidden;
}

body.mobile-nav-open { overflow: hidden; }

button, input { font: inherit; }
button { cursor: pointer; }

::selection {
  background: hsl(var(--primary));
  color: white;
}

.scp-logo {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 2px solid hsl(var(--primary));
  border-radius: 50%;
  color: hsl(var(--primary));
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: -0.04em;
  box-shadow: inset 0 0 0 4px hsl(var(--background)), 0 0 22px hsl(var(--primary) / 0.18);
}

.top-secret-stamp {
  border: 2px solid hsl(var(--destructive));
  color: hsl(var(--destructive));
  padding: 0.35rem 0.55rem;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: repeating-linear-gradient(-45deg, hsl(var(--destructive) / 0.08), hsl(var(--destructive) / 0.08) 4px, transparent 4px, transparent 8px);
}

.classification {
  background: hsl(var(--primary));
  color: white;
  padding: 0.42rem 0.7rem;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.18em;
}

.threat-badge {
  border: 1px solid hsl(var(--primary));
  background: hsl(var(--primary) / 0.12);
  color: hsl(var(--primary));
  padding: 0.42rem 0.7rem;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.doc-section {
  border-top: 1px solid hsl(var(--border));
  padding-top: 1.25rem;
  margin-top: 1.25rem;
}

.doc-section h3 {
  margin: 0 0 0.8rem;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.82rem;
  line-height: 1.4;
  color: hsl(var(--primary));
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.doc-section p {
  margin: 0;
  color: hsl(var(--foreground) / 0.88);
  line-height: 1.85;
  font-size: 0.98rem;
}

.redacted {
  display: inline-block;
  color: transparent;
  background: hsl(var(--foreground));
  border-radius: 1px;
  padding: 0 0.35em;
  user-select: none;
}

.tag-pill {
  border: 1px solid hsl(var(--primary) / 0.38);
  background: hsl(var(--primary) / 0.12);
  color: hsl(var(--primary));
  padding: 0.35rem 0.55rem;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.72rem;
}

.empty-state {
  border: 1px dashed hsl(var(--border));
  background: hsl(var(--card));
  padding: 1.25rem;
  color: hsl(var(--muted));
  line-height: 1.6;
}

.empty-state p { margin: 0.25rem 0; }

.skeleton {
  position: relative;
  overflow: hidden;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
}

.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, hsl(var(--foreground) / 0.08), transparent);
  animation: shimmer 1.2s infinite;
}

.scanline {
  pointer-events: none;
  position: absolute;
  inset: 0;
  opacity: 0.28;
  background: repeating-linear-gradient(0deg, transparent 0, transparent 7px, hsl(var(--primary) / 0.10) 8px);
  mix-blend-mode: screen;
}

.document-enter {
  animation: documentIn 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.article-mobile-toolbar {
  position: sticky;
  top: 4rem;
  z-index: 5;
  backdrop-filter: blur(10px);
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@keyframes shimmer {
  100% { transform: translateX(100%); }
}

@keyframes documentIn {
  from { opacity: 0; transform: translateY(14px) scale(0.992); filter: blur(4px); }
  to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

@media (max-width: 640px) {
  .scp-logo {
    width: 36px;
    height: 36px;
    font-size: 10px;
    box-shadow: inset 0 0 0 3px hsl(var(--background)), 0 0 18px hsl(var(--primary) / 0.16);
  }

  .classification,
  .threat-badge {
    padding: 0.36rem 0.5rem;
    font-size: 0.62rem;
    letter-spacing: 0.12em;
  }

  .doc-section {
    padding-top: 1rem;
    margin-top: 1rem;
  }

  .doc-section h3 {
    font-size: 0.74rem;
    letter-spacing: 0.12em;
  }

  .doc-section p {
    font-size: 0.94rem;
    line-height: 1.72;
  }

  .tag-pill {
    font-size: 0.68rem;
  }

  .article-mobile-toolbar {
    top: 4rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}