:root {
  --background: 42 12% 94%;
  --foreground: 222 22% 9%;
  --primary: 356 78% 43%;
  --secondary: 217 18% 27%;
  --muted: 220 8% 42%;
  --destructive: 0 76% 46%;
  --border: 220 10% 78%;
  --card: 40 18% 98%;
  --safe: 142 52% 34%;
  --shadow-sm: 0 1px 0 hsl(220 20% 5% / 0.10);
  --shadow-md: 0 18px 45px hsl(220 20% 5% / 0.16);
  --shadow-lg: 0 30px 80px hsl(220 20% 5% / 0.22);
  --transition-fast: 140ms ease;
  --transition-smooth: 280ms cubic-bezier(.2,.8,.2,1);
  --radius-sm: 2px;
  --radius-md: 6px;
  --radius-lg: 12px;
}

.dark {
  --background: 220 18% 7%;
  --foreground: 42 18% 91%;
  --primary: 356 86% 55%;
  --secondary: 222 14% 18%;
  --muted: 220 8% 61%;
  --destructive: 0 86% 60%;
  --border: 220 13% 21%;
  --card: 222 18% 10%;
  --safe: 137 64% 58%;
  --shadow-sm: 0 1px 0 hsl(0 0% 0% / 0.28);
  --shadow-md: 0 22px 50px hsl(0 0% 0% / 0.35);
  --shadow-lg: 0 34px 90px hsl(0 0% 0% / 0.48);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 15% 0%, hsl(var(--primary) / 0.12), transparent 34rem),
    linear-gradient(135deg, hsl(var(--background)), hsl(var(--background)) 45%, hsl(var(--secondary) / 0.32));
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.045;
  background-image: linear-gradient(hsl(var(--foreground)) 1px, transparent 1px), linear-gradient(90deg, hsl(var(--foreground)) 1px, transparent 1px);
  background-size: 28px 28px;
  z-index: 50;
}

.font-mono, code, input { font-family: "JetBrains Mono", "SFMono-Regular", Consolas, ui-monospace, monospace; }

.scp-logo {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 2px solid hsl(var(--foreground));
  color: hsl(var(--primary));
  font-weight: 900;
  font-size: 28px;
  box-shadow: inset 0 0 0 4px hsl(var(--background)), 0 0 0 1px hsl(var(--primary) / 0.55);
}

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

.empty-box {
  border: 1px dashed hsl(var(--border));
  color: hsl(var(--muted));
  padding: 1rem;
  font-size: 0.9rem;
  line-height: 1.5;
  background: hsl(var(--background) / 0.55);
}

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

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

.alert-strip {
  border-left: 4px solid hsl(var(--primary));
  background: hsl(var(--primary) / 0.10);
  color: hsl(var(--foreground));
  padding: 1rem;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.85rem;
  line-height: 1.65;
}

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

.scanline {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.12;
  background: repeating-linear-gradient(0deg, transparent 0 9px, hsl(var(--foreground)) 10px 11px);
  mix-blend-mode: overlay;
}

.skeleton {
  border: 1px solid hsl(var(--border));
  background: linear-gradient(90deg, hsl(var(--card)), hsl(var(--muted) / 0.16), hsl(var(--card)));
  background-size: 220% 100%;
  animation: shimmer 1.2s infinite linear;
}

.document-enter {
  animation: documentEnter 320ms cubic-bezier(.2,.8,.2,1) both;
}

@keyframes shimmer {
  from { background-position: 220% 0; }
  to { background-position: -220% 0; }
}

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

button, input { border-radius: var(--radius-sm); }
button { cursor: pointer; }
button:focus-visible, input:focus-visible { outline: 2px solid hsl(var(--primary)); outline-offset: 2px; }
::selection { background: hsl(var(--primary)); color: white; }