/* Tactical — design-system tokens and component classes. Source of truth for the look; see readme.md. Spacing and elevation scales are carried over unchanged from the previous theme by request. */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&family=Noto+Sans+SC:wght@400;500;700;900&display=swap');

:root {
  --color-bg: #11150e;          /* range black — a green-shifted near-black */
  --color-surface: #191e14;     /* one step up: panels, cards, inputs */
  --color-bone: #e8e7df;        /* the light section ground (armory, safety) */
  --color-text: #f2f3ee;
  --color-accent: #d8ff35;      /* signal lime — fills, bands, marks */
  --color-accent-2: #cfd0c4;    /* bone/sand secondary voice */
  --color-divider: color-mix(in srgb, #f2f3ee 14%, transparent);
  --color-grid: color-mix(in srgb, #f2f3ee 6%, transparent); /* the 1px layout grid overlay */

  /* Tonal ramps — OKLCH on one shared lightness scale, so the same step of
     any role carries the same visual weight. */
  --color-neutral-100: oklch(0.972 0.012 120);
  --color-neutral-200: oklch(0.930 0.012 120);
  --color-neutral-300: oklch(0.870 0.012 120);
  --color-neutral-400: oklch(0.780 0.012 120);
  --color-neutral-500: oklch(0.660 0.012 120);
  --color-neutral-600: oklch(0.540 0.012 120);
  --color-neutral-700: oklch(0.430 0.012 120);
  --color-neutral-800: oklch(0.320 0.013 120);
  --color-neutral-900: oklch(0.220 0.014 120);

  --color-accent-100: oklch(0.985 0.050 118);
  --color-accent-200: oklch(0.965 0.100 118);
  --color-accent-300: oklch(0.945 0.160 118);
  --color-accent-400: oklch(0.930 0.205 118);
  --color-accent-500: oklch(0.900 0.220 118);
  --color-accent-600: oklch(0.760 0.180 118);
  --color-accent-700: oklch(0.600 0.145 118);
  --color-accent-800: oklch(0.450 0.110 118);
  --color-accent-900: oklch(0.320 0.075 118);

  --color-accent-2-100: oklch(0.975 0.010 95);
  --color-accent-2-200: oklch(0.935 0.012 95);
  --color-accent-2-300: oklch(0.875 0.014 95);
  --color-accent-2-400: oklch(0.785 0.016 95);
  --color-accent-2-500: oklch(0.665 0.018 95);
  --color-accent-2-600: oklch(0.545 0.018 95);
  --color-accent-2-700: oklch(0.435 0.016 95);
  --color-accent-2-800: oklch(0.325 0.014 95);
  --color-accent-2-900: oklch(0.225 0.012 95);

  /* Section ground — deck dividers and full-bleed bands take the lime, with
     black type on it. Presence at page scale, never at interface scale. */
  --color-section: #d8ff35;
  --color-section-glow: #eaff7a;
  --color-section-ghost: #9cbb1f;

  --font-heading: "Archivo", "Noto Sans SC", Helvetica, sans-serif;
  --font-heading-weight: 800;
  --font-body: "Archivo", "Noto Sans SC", Helvetica, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;

  /* Spacing — unchanged (density 0.7×) */
  --space-1: 2.8px;
  --space-2: 5.6px;
  --space-3: 8.4px;
  --space-4: 11.2px;
  --space-6: 16.8px;
  --space-8: 22.4px;

  /* Corners — this system is square. The tokens stay so pages that read them
     keep resolving; every value is 0. */
  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;

  /* Elevation — unchanged: a hairline edge plus ambient darkness. */
  --shadow-sm: 0 0 0 1px #3f424d;
  --shadow-md: 0 0 0 1px #595d6c, 0 6px 18px rgba(0,0,0,0.55);
  --shadow-lg: 0 0 0 1px #9397ab, 0 16px 40px rgba(0,0,0,0.65);
}

*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0; background: var(--color-bg); color: var(--color-text);
  font-family: var(--font-body); font-size: 15px; line-height: 1.6; font-weight: 400;
}

/* — type — */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  line-height: 1.02; letter-spacing: -0.02em; margin: 0 0 var(--space-2);
}
h1 { font-size: 60px; }
h2 { font-size: 40px; }
h3 { font-size: 27px; }
h4 { font-size: 20px; }
h5 { font-size: 16px; }
h6 {
  font-family: var(--font-mono); font-weight: 700; font-size: 12px;
  letter-spacing: 0.18em; text-transform: uppercase; line-height: 1.3;
}
p { margin: 0 0 var(--space-3); }
a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
a:hover { color: var(--color-accent-300); }
img { display: block; max-width: 100%; }
figure { margin: 0; }
figcaption { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; margin-top: var(--space-2); color: var(--color-neutral-500); }
.text-muted { color: var(--color-neutral-500); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: var(--color-accent); color: var(--color-bg); }

/* Mono label — the system's connective tissue: kickers, eyebrows, metadata,
   stat captions, nav items. Always uppercase, always tracked out. */
.label {
  font-family: var(--font-mono); font-weight: 500; font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-neutral-400);
}
.label-accent { color: var(--color-accent); }
/* An eyebrow: a short solid lime dash, then a mono label. */
.eyebrow { display: inline-flex; align-items: center; gap: var(--space-4); font-family: var(--font-mono); font-weight: 500; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-text); }
.eyebrow::before { content: ""; width: 34px; height: 2px; background: var(--color-accent); flex: none; }
/* Ordinal — the 01 / 02 / 03 step markers. */
.ord { font-family: var(--font-mono); font-weight: 700; font-size: 11px; letter-spacing: 0.1em; color: var(--color-accent); }
.hl { color: var(--color-accent); }

/* — grounds — */
/* The bone inversion: light sections keep the same type and components. */
.on-bone { background: var(--color-bone); color: var(--color-neutral-900); }
.on-bone .label, .on-bone .text-muted, .on-bone figcaption { color: var(--color-neutral-600); }
.on-bone .eyebrow { color: var(--color-neutral-900); }
.on-bone .card { background: #fff; border-color: color-mix(in srgb, var(--color-neutral-900) 14%, transparent); }
.on-bone .btn-secondary { border-color: color-mix(in srgb, var(--color-neutral-900) 22%, transparent); color: var(--color-neutral-900); }
/* The 1px layout grid, drawn behind dark hero and section blocks. */
.grid-bg {
  background-image: linear-gradient(to right, var(--color-grid) 1px, transparent 1px),
                    linear-gradient(var(--color-grid) 1px, transparent 1px);
  background-size: 88px 88px;
}
/* Full-bleed lime band — the ticker strip. */
.band { background: var(--color-accent); color: var(--color-bg); padding: var(--space-4) var(--space-6); }
.ticker { display: flex; align-items: center; gap: var(--space-8); font-family: var(--font-mono); font-weight: 700; font-size: 15px; letter-spacing: 0.16em; text-transform: uppercase; }
.ticker li { list-style: none; }
.ticker-sep { font-size: 10px; opacity: 0.6; }

/* — rules — */
.hr { height: 1px; border: 0; margin: var(--space-6) 0; background: var(--color-divider); }

/* — buttons — */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-4);
  cursor: pointer; text-decoration: none;
  font-family: var(--font-mono); font-weight: 700; font-size: 12px;
  letter-spacing: 0.14em; text-transform: uppercase; line-height: 1;
  color: var(--color-text); background: transparent;
  border: 1px solid transparent; border-radius: 0;
  padding: 14px var(--space-8); transition: background 120ms linear, color 120ms linear;
}
.btn svg { display: block; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { background: var(--color-accent); color: var(--color-bg); border-color: var(--color-accent); }
.btn-primary:hover { background: var(--color-accent-300); border-color: var(--color-accent-300); }
.btn-primary:active { background: var(--color-accent-600); border-color: var(--color-accent-600); }
.btn-secondary { border-color: var(--color-divider); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 8%, transparent); }
.btn-secondary:active { background: color-mix(in srgb, var(--color-text) 15%, transparent); }
/* Ghost — the underlined inline action ("查看全部枪械 ↓"). */
.btn-ghost { padding: var(--space-2) 0; border-bottom: 1px solid var(--color-divider); }
.btn-ghost:hover { color: var(--color-accent); border-bottom-color: var(--color-accent); }
.btn-ghost:active { color: var(--color-accent-600); }
.btn-icon { width: 40px; height: 40px; padding: 0; }
.btn-block { width: 100%; margin-top: var(--space-2); }

/* — forms — */
.field > label { display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: var(--space-2); color: var(--color-neutral-400); }
.input {
  width: 100%; min-height: 40px; padding: 9px 12px; font: inherit; font-size: 14px;
  color: var(--color-text); caret-color: var(--color-accent);
  background: var(--color-surface);
  border: 1px solid var(--color-divider); border-radius: 0;
}
.input::placeholder { color: var(--color-neutral-600); }
.input:hover { border-color: var(--color-neutral-500); }
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
textarea.input { min-height: 96px; resize: vertical; }
.radio { display: inline-flex; align-items: center; gap: var(--space-3); cursor: pointer; font-size: 14px; }
.radio input, .seg-opt input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.radio .dot { width: 14px; height: 14px; flex: none; border: 1px solid var(--color-neutral-600); }
.radio:hover .dot { border-color: var(--color-accent); }
.radio input:checked + .dot { border-color: var(--color-accent); background: var(--color-accent); box-shadow: inset 0 0 0 3px var(--color-bg); }
.radio input:focus-visible + .dot { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.seg { display: inline-flex; border: 1px solid var(--color-divider); }
.seg-opt { display: inline-flex; align-items: center; gap: var(--space-2); padding: 10px 14px; cursor: pointer; font-family: var(--font-mono); font-weight: 500; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; }
.seg-opt + .seg-opt { border-left: 1px solid var(--color-divider); }
.seg-opt:has(input:checked) { background: var(--color-accent); color: var(--color-bg); }
.seg-opt:not(:has(input:checked)):hover { background: color-mix(in srgb, var(--color-text) 8%, transparent); }
.seg-opt:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: -2px; }

/* — cards — */
/* Specimen card: an index number and tags on a mono top line, the image, then
   a caption block. Square, 1px bordered, no radius. */
.card {
  display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-4); background: var(--color-surface);
  border: 1px solid var(--color-divider); border-radius: 0;
}
.card-kicker { font-family: var(--font-mono); font-weight: 700; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-accent); }
.card-title { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 22px; line-height: 1.05; letter-spacing: 0.01em; text-transform: uppercase; }
.card-body { margin: 0; font-size: 13px; color: var(--color-neutral-400); flex: 1; }
.on-bone .card-body { color: var(--color-neutral-600); }
.on-bone .card-kicker, .on-bone .ord, .on-bone .label-accent { color: var(--color-accent-800); }
.card-meta { display: flex; align-items: center; gap: var(--space-4); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-neutral-500); }
.elev-sm { box-shadow: var(--shadow-sm); }
.elev-md { box-shadow: var(--shadow-md); }
.elev-lg { box-shadow: var(--shadow-lg); }

/* — stats — */
.stats { display: grid; grid-auto-flow: column; border-top: 1px solid var(--color-divider); }
.stat { display: flex; align-items: baseline; gap: var(--space-4); padding: var(--space-8) var(--space-6); border-right: 1px solid var(--color-divider); }
.stat b { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 34px; line-height: 1; letter-spacing: -0.02em; }
.stat span { font-size: 12px; color: var(--color-neutral-400); }

/* — tags — */
.tag { display: inline-flex; align-items: center; font-family: var(--font-mono); font-weight: 500; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; padding: 4px 8px; border-radius: 0; }
.tag-accent { background: var(--color-accent); color: var(--color-bg); }
.tag-accent-2 { background: var(--color-accent-2-800); color: var(--color-accent-2-100); }
.tag-neutral { background: var(--color-neutral-800); color: var(--color-neutral-200); }
.tag-outline { border: 1px solid var(--color-divider); color: var(--color-neutral-400); }
.on-bone .tag-outline { border-color: color-mix(in srgb, var(--color-neutral-900) 20%, transparent); color: var(--color-neutral-600); }

/* — navigation — */
.nav { display: flex; align-items: center; gap: var(--space-8); padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--color-divider); }
.nav-brand { display: inline-flex; align-items: center; gap: var(--space-4); font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 19px; letter-spacing: 0.14em; text-transform: uppercase; margin-right: auto; }
/* The mark: a lime notched square holding the initial. */
.nav-brand .mark { width: 34px; height: 34px; display: grid; place-items: center; background: var(--color-accent); color: var(--color-bg); font-size: 17px; letter-spacing: 0; clip-path: polygon(0 0, 100% 0, 100% 74%, 74% 100%, 0 100%); }
.nav a { color: inherit; text-decoration: none; font-family: var(--font-mono); font-weight: 500; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; }
.nav a:hover, .nav a[aria-current='page'] { color: var(--color-accent); }

/* — tables — */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th { text-align: left; font-family: var(--font-mono); font-weight: 700; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-neutral-400); padding: var(--space-3) var(--space-3); border-bottom: 1px solid var(--color-divider); }
.table td { padding: var(--space-3); border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent); }
.table tbody tr:hover { background: color-mix(in srgb, var(--color-text) 5%, transparent); }

/* — dialog — */
.dialog-backdrop { position: fixed; inset: 0; display: grid; place-items: center; padding: var(--space-6); background: color-mix(in srgb, #000 68%, transparent); }
.dialog { width: min(460px, 100%); display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6); border: 1px solid var(--color-divider); border-radius: 0; background: var(--color-surface); box-shadow: var(--shadow-lg); }
.dialog-title { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 24px; text-transform: uppercase; letter-spacing: 0.01em; }
.dialog-body { font-size: 14px; color: var(--color-neutral-400); }
.dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-3); margin-top: var(--space-2); }

.lighten { mix-blend-mode: lighten; background-color: transparent; }