/* vuln-lab — phosphor-terminal design system. Shared by every page. */
:root {
  --bg: #070a0c;
  --bg-2: #0b1013;
  --surface: #0e1519;
  --surface-2: #121b20;
  --border: #1b282d;
  --border-lit: #2b4048;
  --fg: #d6e4e3;
  --muted: #6f858c;
  --dim: #47585e;
  --phosphor: #46e88b;      /* primary — terminal green */
  --phosphor-dim: #2ea866;
  --cyan: #4fd6e0;
  --amber: #f6a935;
  --danger: #ff5b5b;
  /* back-compat aliases for page-level inline styles */
  --accent: var(--phosphor); --ok: var(--phosphor); --warn: var(--amber); --panel: var(--surface);
  --mono: ui-monospace, "JetBrains Mono", "SF Mono", "Fira Code", Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --glow: 0 0 0 1px rgba(70,232,139,.15), 0 8px 40px -12px rgba(70,232,139,.25);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; color: var(--fg); font-family: var(--sans); font-size: 15px; line-height: 1.65;
  background:
    radial-gradient(900px 500px at 12% -8%, rgba(70,232,139,.10), transparent 60%),
    radial-gradient(760px 460px at 100% 0%, rgba(79,214,224,.07), transparent 55%),
    linear-gradient(var(--bg), var(--bg));
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}
/* faint grid + scanline atmosphere */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background-image:
    linear-gradient(rgba(70,232,139,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(70,232,139,.035) 1px, transparent 1px);
  background-size: 46px 46px; mask-image: radial-gradient(circle at 50% 0%, #000, transparent 80%);
}
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .35;
  background: repeating-linear-gradient(0deg, transparent 0 2px, rgba(0,0,0,.25) 2px 3px);
}

a { color: var(--phosphor); text-decoration: none; transition: color .15s, text-shadow .15s; }
a:hover { color: #7cffb0; text-shadow: 0 0 12px rgba(70,232,139,.6); }
code { font-family: var(--mono); background: #0a1114; border: 1px solid var(--border); border-radius: 4px; padding: .5px 6px; color: var(--cyan); font-size: .9em; }

.wrap { max-width: 1080px; margin: 0 auto; padding: 28px 24px 72px; }

/* ---- nav ---- */
.nav { display: flex; align-items: center; gap: 18px; padding: 14px 0 22px; border-bottom: 1px solid var(--border); margin-bottom: 30px; flex-wrap: wrap; }
.brand { font-family: var(--mono); font-weight: 700; font-size: 17px; letter-spacing: .04em; color: var(--fg); display: flex; align-items: center; gap: 8px; }
.brand b { color: var(--phosphor); text-shadow: 0 0 18px rgba(70,232,139,.5); }
.brand .cursor { width: 9px; height: 17px; background: var(--phosphor); display: inline-block; animation: blink 1.1s steps(1) infinite; box-shadow: 0 0 12px var(--phosphor); }
@keyframes blink { 50% { opacity: 0; } }
.nav .links { margin-left: auto; display: flex; gap: 20px; font-family: var(--mono); font-size: 13px; }
.nav .links a { color: var(--muted); } .nav .links a:hover { color: var(--phosphor); }

/* ---- headings ---- */
h1 { font-family: var(--mono); font-size: clamp(28px, 5vw, 44px); line-height: 1.05; margin: 0 0 10px; letter-spacing: -.01em; }
h2 { font-family: var(--mono); font-size: 15px; text-transform: uppercase; letter-spacing: .18em; color: var(--phosphor-dim); margin: 40px 0 14px; display: flex; align-items: center; gap: 10px; }
h2::before { content: "//"; color: var(--dim); }
h3 { margin: 0 0 6px; font-size: 15px; font-family: var(--mono); }
.sub { color: var(--muted); margin: 0 0 8px; max-width: 68ch; }

/* ---- hero ---- */
.hero { padding: 26px 0 12px; }
.hero .kicker { font-family: var(--mono); font-size: 12px; letter-spacing: .28em; text-transform: uppercase; color: var(--phosphor); margin-bottom: 14px; }
.hero h1 .g { color: var(--phosphor); text-shadow: 0 0 30px rgba(70,232,139,.45); }

/* ---- banner ---- */
.banner {
  position: relative; background: linear-gradient(90deg, rgba(255,91,91,.10), rgba(246,169,53,.06));
  border: 1px solid #3a2224; border-left: 3px solid var(--danger); border-radius: 10px;
  padding: 14px 18px; margin-bottom: 26px; color: #ffd9d4; font-size: 14px;
}

/* ---- cards / grid ---- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.card {
  position: relative; background: linear-gradient(180deg, var(--surface), var(--bg-2));
  border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
  animation: rise .5s both;
}
.card::before { content: ""; position: absolute; inset: 0; border-radius: 12px; padding: 1px; background: linear-gradient(180deg, rgba(70,232,139,.14), transparent 40%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .18s; }
.card:hover { transform: translateY(-3px); border-color: var(--border-lit); box-shadow: var(--glow); }
.card:hover::before { opacity: 1; }
.card p { margin: 0 0 8px; color: var(--muted); font-size: 13px; }
.card h3 a { color: var(--fg); } .card h3 a:hover { color: var(--phosphor); }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
.grid .card:nth-child(2){animation-delay:.04s} .grid .card:nth-child(3){animation-delay:.08s} .grid .card:nth-child(4){animation-delay:.12s}
.grid .card:nth-child(5){animation-delay:.16s} .grid .card:nth-child(6){animation-delay:.2s} .grid .card:nth-child(7){animation-delay:.24s}
.grid .card:nth-child(8){animation-delay:.28s} .grid .card:nth-child(9){animation-delay:.32s}

/* ---- tags / chips ---- */
.tag { display: inline-block; font-family: var(--mono); font-size: 10.5px; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--border-lit); color: var(--muted); margin-right: 4px; text-transform: uppercase; letter-spacing: .04em; }
.tag.real { color: var(--phosphor); border-color: #1f4a33; background: rgba(70,232,139,.08); }
.tag.sim { color: var(--amber); border-color: #4a3a18; background: rgba(246,169,53,.08); }

/* ---- misc text ---- */
.crumb { font-family: var(--mono); color: var(--muted); font-size: 13px; margin-bottom: 18px; }
.crumb a { color: var(--dim); } .crumb a:hover { color: var(--phosphor); }
.hint { font-size: 12px; color: var(--muted); margin-top: 10px; font-family: var(--mono); }
.hint code { background: #0a1114; color: #c9a2ff; }

/* ---- forms ---- */
label { display: block; margin: 12px 0 5px; color: var(--muted); font-size: 12px; font-family: var(--mono); letter-spacing: .04em; text-transform: uppercase; }
input, textarea, select {
  font: inherit; width: 100%; background: #060a0c; color: var(--fg);
  border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; font-family: var(--mono); font-size: 14px;
  transition: border-color .15s, box-shadow .15s;
}
input:focus, textarea:focus { outline: none; border-color: var(--phosphor-dim); box-shadow: 0 0 0 3px rgba(70,232,139,.12); }
button {
  font-family: var(--mono); font-weight: 600; font-size: 14px; letter-spacing: .02em; cursor: pointer;
  background: var(--phosphor); color: #04140a; border: none; border-radius: 8px; padding: 10px 18px;
  transition: transform .12s, box-shadow .15s, filter .15s;
}
button:hover { filter: brightness(1.08); box-shadow: 0 0 24px -4px rgba(70,232,139,.6); transform: translateY(-1px); }
button:active { transform: translateY(0); }

.out { background: #060a0c; border: 1px dashed var(--border-lit); border-radius: 8px; padding: 12px; margin-top: 12px; white-space: pre-wrap; word-break: break-word; min-height: 42px; font-family: var(--mono); font-size: 13px; color: var(--cyan); }

footer { color: var(--dim); font-size: 12px; margin-top: 52px; border-top: 1px solid var(--border); padding-top: 16px; font-family: var(--mono); }

::selection { background: rgba(70,232,139,.28); color: #eafff2; }
::-webkit-scrollbar { width: 11px; height: 11px; } ::-webkit-scrollbar-track { background: var(--bg-2); } ::-webkit-scrollbar-thumb { background: #1c2a2f; border-radius: 6px; border: 2px solid var(--bg-2); } ::-webkit-scrollbar-thumb:hover { background: var(--phosphor-dim); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto; } }