/* ─────────────────────────────────────────────────────────
   PZ WIKI — Dark Post-Apocalyptic Theme
   Build 42 · Project Zomboid
   ───────────────────────────────────────────────────────── */

:root {
  --bg-deep:       #0d0d0b;
  --bg-main:       #111110;
  --bg-card:       #1a1a17;
  --bg-card-hover: #222220;
  --bg-sidebar:    #131312;
  --bg-header:     #0f0f0d;
  --border:        #2a2a26;
  --border-light:  #333330;

  --text-primary:  #d9d5c4;
  --text-muted:    #7a7870;
  --text-link:     #7eb87e;
  --text-accent:   #b8d48c;

  --green:         #5a9e5a;
  --green-bright:  #7eb87e;
  --green-dim:     #2e5c2e;
  --red:           #b85a5a;
  --red-dim:       #5c2e2e;
  --orange:        #c0844a;
  --orange-dim:    #5c3e1e;
  --yellow:        #c0aa4a;
  --yellow-dim:    #5c4e1e;
  --blue:          #4a7fa8;
  --blue-dim:      #1e3c5c;
  --gray:          #555550;
  --gray-dim:      #2a2a26;

  --sidebar-w:     260px;
  --header-h:      56px;
  --radius:        4px;
  --radius-lg:     8px;

  --font-main: 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono: 'Consolas', 'Courier New', monospace;
}

/* ── RESET ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; font-size: 15px; }

body {
  background: var(--bg-main);
  color: var(--text-primary);
  font-family: var(--font-main);
  line-height: 1.65;
  min-height: 100vh;
}

a { color: var(--text-link); text-decoration: none; }
a:hover { color: var(--text-accent); text-decoration: underline; }

code {
  font-family: var(--font-mono);
  background: #1e1e1b;
  color: var(--text-accent);
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 0.875em;
}

kbd {
  display: inline-block;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-bottom-width: 2px;
  border-radius: 3px;
  padding: 1px 6px;
  font-size: 0.8em;
  font-family: var(--font-mono);
  color: var(--text-primary);
}

/* ── SCROLLBAR ──────────────────────────────────────────── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg-deep); }
::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--gray); }

/* ── HEADER ─────────────────────────────────────────────── */
header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-h);
  background: var(--bg-header);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 2px 12px rgba(0,0,0,.5);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 100%;
  padding: 0 20px;
  max-width: 1400px;
  margin: 0 auto;
}

.logo {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-shrink: 0;
}

.logo-icon {
  font-size: 1.4rem;
  color: var(--green-bright);
  filter: drop-shadow(0 0 6px var(--green));
}

.logo-text {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--text-primary);
}

.logo-accent { color: var(--green-bright); }

.logo-sub {
  font-size: 0.72rem;
  color: var(--text-muted);
  letter-spacing: 1px;
  text-transform: uppercase;
}

.header-search {
  flex: 1;
  max-width: 360px;
  margin-left: auto;
  position: relative;
}

.header-search input {
  width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-primary);
  padding: 7px 14px;
  font-size: 0.9rem;
  outline: none;
  transition: border-color 0.2s;
}

.header-search input:focus { border-color: var(--green); }
.header-search input::placeholder { color: var(--text-muted); }

.search-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  list-style: none;
  z-index: 200;
  max-height: 300px;
  overflow-y: auto;
  box-shadow: 0 8px 24px rgba(0,0,0,.6);
}

.search-dropdown li a {
  display: block;
  padding: 8px 14px;
  color: var(--text-primary);
  font-size: 0.875rem;
  border-bottom: 1px solid var(--border);
}

.search-dropdown li:last-child a { border-bottom: none; }
.search-dropdown li a:hover { background: var(--bg-card-hover); text-decoration: none; }
.search-dropdown li a .match-section { font-size: 0.72rem; color: var(--text-muted); }

.menu-toggle {
  display: none;
  background: none;
  border: 1px solid var(--border);
  color: var(--text-primary);
  padding: 6px 10px;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 1rem;
}

/* ── LAYOUT ─────────────────────────────────────────────── */
.layout {
  display: flex;
  max-width: 1400px;
  margin: 0 auto;
  min-height: calc(100vh - var(--header-h));
}

/* ── SIDEBAR ────────────────────────────────────────────── */
.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border);
  position: sticky;
  top: var(--header-h);
  height: calc(100vh - var(--header-h));
  overflow-y: auto;
  padding: 16px 0;
}

.nav-list { list-style: none; }

.nav-section {
  padding: 10px 20px 4px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--green);
  margin-top: 8px;
}

.nav-list li:first-child .nav-section { margin-top: 0; }

.nav-link {
  display: block;
  padding: 5px 20px 5px 28px;
  font-size: 0.875rem;
  color: var(--text-muted);
  border-left: 2px solid transparent;
  transition: all 0.15s;
}

.nav-link:hover {
  color: var(--text-primary);
  background: rgba(94, 158, 94, 0.06);
  text-decoration: none;
}

.nav-link.active {
  color: var(--green-bright);
  border-left-color: var(--green-bright);
  background: rgba(94, 158, 94, 0.1);
}

/* ── CONTENT ────────────────────────────────────────────── */
.content {
  flex: 1;
  padding: 32px 48px 64px;
  min-width: 0;
}

/* ── SECTIONS ───────────────────────────────────────────── */
.wiki-section {
  margin-bottom: 64px;
  padding-top: 8px;
  scroll-margin-top: calc(var(--header-h) + 20px);
}

.wiki-section + .wiki-section {
  border-top: 1px solid var(--border);
  padding-top: 48px;
}

h1 {
  font-size: 2rem;
  font-weight: 700;
  color: var(--text-accent);
  margin-bottom: 12px;
  letter-spacing: -0.3px;
}

h2 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-accent);
  margin-bottom: 12px;
}

h3 {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 24px 0 10px;
}

h4 {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-accent);
  margin-bottom: 8px;
}

p { margin-bottom: 12px; color: var(--text-primary); }

.lead {
  font-size: 1.05rem;
  color: var(--text-primary);
  margin-bottom: 20px;
}

ol.steps-list, ul.feature-list {
  padding-left: 0;
  list-style: none;
}

ol.steps-list { counter-reset: steps; }

ol.steps-list li {
  counter-increment: steps;
  padding: 8px 0 8px 44px;
  border-bottom: 1px solid var(--border);
  position: relative;
  color: var(--text-primary);
}

ol.steps-list li::before {
  content: counter(steps);
  position: absolute;
  left: 12px;
  top: 8px;
  width: 22px;
  height: 22px;
  background: var(--green-dim);
  border: 1px solid var(--green);
  color: var(--green-bright);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
}

ul.feature-list li {
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
  color: var(--text-primary);
}

/* ── CALLOUTS ───────────────────────────────────────────── */
.callout {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--radius);
  margin: 16px 0;
  border-left: 3px solid;
}

.callout-icon { font-size: 1.2rem; flex-shrink: 0; margin-top: 1px; }

.callout-warning {
  background: rgba(192, 164, 74, 0.08);
  border-color: var(--yellow);
  color: var(--text-primary);
}

.callout-danger {
  background: rgba(184, 90, 90, 0.1);
  border-color: var(--red);
}

.callout-tip {
  background: rgba(94, 158, 94, 0.08);
  border-color: var(--green);
}

/* ── TAGS ───────────────────────────────────────────────── */
.tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 0.75rem;
  font-weight: 600;
  margin-right: 8px;
  letter-spacing: 0.3px;
}

.tag-red    { background: var(--red-dim);    color: #e07878; }
.tag-orange { background: var(--orange-dim); color: #d09060; }
.tag-yellow { background: var(--yellow-dim); color: #c8b860; }
.tag-green  { background: var(--green-dim);  color: var(--green-bright); }
.tag-blue   { background: var(--blue-dim);   color: #6aa0c8; }
.tag-gray   { background: var(--gray-dim);   color: #888880; }

/* ── BADGES ─────────────────────────────────────────────── */
.badge {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 3px;
  font-size: 0.8rem;
  font-weight: 700;
}

.badge-green  { background: var(--green-dim);  color: var(--green-bright); }
.badge-yellow { background: var(--yellow-dim); color: #c8b860; }
.badge-gray   { background: var(--gray-dim);   color: #888880; }

/* ── INFO BOX ───────────────────────────────────────────── */
.info-box {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  margin: 16px 0;
}

.info-box h3 { margin-top: 0; }

/* ── TABLE ──────────────────────────────────────────────── */
.table-wrapper {
  overflow-x: auto;
  margin: 16px 0;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
}

.wiki-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.wiki-table thead tr {
  background: var(--bg-deep);
  border-bottom: 2px solid var(--border-light);
}

.wiki-table th {
  padding: 10px 14px;
  text-align: left;
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-muted);
}

.wiki-table td {
  padding: 9px 14px;
  border-bottom: 1px solid var(--border);
  color: var(--text-primary);
}

.wiki-table tbody tr:last-child td { border-bottom: none; }
.wiki-table tbody tr:hover { background: rgba(255,255,255,0.02); }

.table-note {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 6px;
}

/* ── QUICK NAV GRID ─────────────────────────────────────── */
.quick-nav-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
  margin: 24px 0;
}

.quick-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 20px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: all 0.2s;
  text-decoration: none;
  text-align: center;
}

.quick-card:hover {
  background: var(--bg-card-hover);
  border-color: var(--green);
  transform: translateY(-2px);
  text-decoration: none;
}

.quick-icon { font-size: 2rem; }
.quick-label { font-size: 0.85rem; color: var(--text-primary); font-weight: 500; }

/* ── TRAITS GRID ────────────────────────────────────────── */
.traits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  margin: 12px 0;
}

.trait-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
}

.trait-pos { border-left: 3px solid var(--green); }
.trait-neg { border-left: 3px solid var(--red); }

.trait-name {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.trait-cost {
  font-size: 0.78rem;
  font-weight: 700;
  margin-bottom: 6px;
}

.trait-pos .trait-cost { color: var(--green-bright); }
.trait-neg .trait-cost { color: #e07878; }

.trait-desc {
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.5;
}

/* ── SKILLS GRID ────────────────────────────────────────── */
.skills-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
  margin: 16px 0;
}

.skill-group {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
}

.skill-group h4 { margin-bottom: 10px; }
.skill-group ul { list-style: none; }
.skill-group li {
  padding: 4px 0;
  font-size: 0.85rem;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}
.skill-group li:last-child { border-bottom: none; }
.skill-group li strong { color: var(--text-primary); }

/* ── FORAGE GRID ────────────────────────────────────────── */
.forage-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  margin: 16px 0;
}

.forage-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px;
  text-align: center;
}

.forage-icon { font-size: 2rem; margin-bottom: 6px; }
.forage-title { font-weight: 700; font-size: 0.9rem; margin-bottom: 6px; }
.forage-items { font-size: 0.78rem; color: var(--text-muted); line-height: 1.5; }

/* ── PHASE TIMELINE ─────────────────────────────────────── */
.phase-timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 16px 0;
  border-left: 2px solid var(--green-dim);
  padding-left: 0;
}

.phase {
  display: flex;
  gap: 20px;
  padding: 0 0 24px 24px;
  position: relative;
}

.phase::before {
  content: '';
  position: absolute;
  left: -7px;
  top: 4px;
  width: 12px;
  height: 12px;
  background: var(--green);
  border-radius: 50%;
  border: 2px solid var(--bg-main);
}

.phase-label {
  flex-shrink: 0;
  width: 90px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--green-bright);
  padding-top: 1px;
}

.phase-content {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 14px;
  font-size: 0.875rem;
  flex: 1;
}

/* ── STRATEGY GRID ──────────────────────────────────────── */
.strategy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
  margin: 16px 0;
}

.strategy-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
}

.strategy-card h4 { margin-bottom: 6px; }
.strategy-card p  { font-size: 0.875rem; color: var(--text-muted); margin: 0; }

/* ── MODES GRID ─────────────────────────────────────────── */
.modes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  margin: 16px 0;
}

.mode-card {
  border-radius: var(--radius-lg);
  padding: 18px;
  border: 1px solid var(--border);
}

.mode-name {
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 6px;
}

.mode-desc { font-size: 0.82rem; color: var(--text-muted); }

.mode-easy    { background: rgba(94,158,94,0.08); border-color: var(--green); }
.mode-medium  { background: rgba(192,164,74,0.08); border-color: var(--yellow); }
.mode-hard    { background: rgba(192,132,74,0.08); border-color: var(--orange); }
.mode-extreme { background: rgba(184,90,90,0.1);  border-color: var(--red); }

.mode-easy    .mode-name { color: var(--green-bright); }
.mode-medium  .mode-name { color: #c8b860; }
.mode-hard    .mode-name { color: #d09060; }
.mode-extreme .mode-name { color: #e07878; }

/* ── TRAIT FILTER BAR ───────────────────────────────────── */
.trait-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 24px;
}

.tf-btn {
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-muted);
  padding: 5px 14px;
  border-radius: 20px;
  cursor: pointer;
  font-size: 0.8rem;
  transition: all 0.15s;
  font-family: var(--font-main);
}

.tf-btn:hover { border-color: var(--green); color: var(--text-primary); }
.tf-btn.tf-active { background: var(--green-dim); border-color: var(--green); color: var(--green-bright); font-weight: 600; }

/* ── TRAIT CATEGORY HEADER ──────────────────────────────── */
.trait-category-header {
  font-size: 1.2rem;
  font-weight: 700;
  margin: 32px 0 8px;
  padding: 10px 16px;
  border-radius: var(--radius);
  border-left: 4px solid;
}

.trait-cat-pos { background: rgba(94,158,94,0.08); border-color: var(--green); color: var(--green-bright); }
.trait-cat-neg { background: rgba(184,90,90,0.08); border-color: var(--red); color: #e07878; }

.trait-subcategory {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 20px 0 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}

/* ── TRAIT ROW (expanded individual) ────────────────────── */
.traits-full-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 8px;
}

.trait-row {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  border-left: 4px solid;
  overflow: hidden;
  transition: border-color 0.15s;
}

.trait-row.trait-pos { border-left-color: var(--green); }
.trait-row.trait-neg { border-left-color: var(--red); }
.trait-row:hover { border-color: var(--border-light); }

.trait-row-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  cursor: pointer;
  user-select: none;
}

.trait-row-name {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text-primary);
  flex: 1;
}

.trait-row-cost {
  font-size: 0.8rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 3px;
}

.trait-cost-pos { background: var(--green-dim); color: var(--green-bright); }
.trait-cost-neg { background: var(--red-dim); color: #e07878; }

.trait-row-rating { font-size: 0.85rem; flex-shrink: 0; }
.trait-row-rating-neg { font-size: 0.8rem; flex-shrink: 0; color: var(--text-muted); }

.trait-row-ingame {
  padding: 6px 16px 0;
  font-size: 0.8rem;
  color: var(--text-muted);
  font-style: italic;
  border-top: 1px solid var(--border);
}

.trait-row-analysis {
  padding: 8px 16px 12px;
  font-size: 0.875rem;
  color: var(--text-primary);
  line-height: 1.6;
}

.trait-row-analysis strong { color: var(--text-accent); }

/* ── BUILD CARDS ────────────────────────────────────────── */
.build-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 16px;
}

.build-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.build-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: var(--bg-deep);
  border-bottom: 1px solid var(--border);
}

.build-icon { font-size: 2rem; flex-shrink: 0; }

.build-name {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
}

.build-prof {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 2px;
}

.build-diff {
  margin-left: auto;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 700;
  flex-shrink: 0;
}

.diff-easy   { background: var(--green-dim);  color: var(--green-bright); }
.diff-medium { background: var(--yellow-dim); color: #c8b860; }
.diff-hard   { background: rgba(192,132,74,.2); color: #d09060; }

.build-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}

.build-section {
  padding: 14px 18px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.build-section:nth-child(2) { border-right: none; }

.build-section strong {
  display: block;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.build-section ul {
  list-style: none;
  padding: 0;
}

.build-section li {
  font-size: 0.85rem;
  padding: 3px 0;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border);
}

.build-section li:last-child { border-bottom: none; }

.build-strategy {
  grid-column: 1 / -1;
  padding: 14px 18px;
  font-size: 0.875rem;
  color: var(--text-muted);
  line-height: 1.65;
  border-top: 1px solid var(--border);
  background: rgba(255,255,255,0.01);
}

.build-strategy strong { color: var(--text-accent); }

@media (max-width: 700px) {
  .build-body { grid-template-columns: 1fr; }
  .build-section { border-right: none; }
}

/* ── FOOTER ─────────────────────────────────────────────── */
.wiki-footer {
  margin-top: 64px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  text-align: center;
  color: var(--text-muted);
  font-size: 0.8rem;
}

.wiki-footer p { color: var(--text-muted); margin-bottom: 4px; }

/* ── PAGE NAV (inter-page horizontal navigation) ────────── */
.page-nav {
  background: var(--bg-deep);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: var(--header-h);
  z-index: 90;
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: none;
}

.page-nav::-webkit-scrollbar { display: none; }

.page-nav-inner {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 0 20px;
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
}

.page-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  font-size: 0.82rem;
  color: var(--text-muted);
  border-bottom: 2px solid transparent;
  transition: all 0.15s;
  text-decoration: none;
  flex-shrink: 0;
}

.page-nav-link:hover {
  color: var(--text-primary);
  background: rgba(94,158,94,0.05);
  text-decoration: none;
}

.page-nav-link.pn-active {
  color: var(--green-bright);
  border-bottom-color: var(--green-bright);
  font-weight: 600;
}

.page-nav-icon { font-size: 0.95rem; }

/* When page-nav is present, adjust sidebar top position */
.has-page-nav .sidebar {
  top: calc(var(--header-h) + 40px);
  height: calc(100vh - var(--header-h) - 40px);
}

/* ── HUB GRID (index page) ──────────────────────────────── */
.hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin: 24px 0;
}

.hub-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
  transition: all 0.2s;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-left: 3px solid var(--border);
}

.hub-card:hover {
  background: var(--bg-card-hover);
  border-left-color: var(--green-bright);
  transform: translateY(-2px);
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(0,0,0,.4);
}

.hub-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.hub-card-icon { font-size: 1.8rem; flex-shrink: 0; }

.hub-card-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
}

.hub-card-subtitle {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.hub-card-desc {
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin-top: 4px;
}

.hub-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}

.hub-tag {
  background: var(--bg-deep);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 0.7rem;
  padding: 1px 7px;
  border-radius: 20px;
}

/* ── FILTER BAR (generic, for any filterable table) ─────── */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0;
  align-items: center;
}

.filter-bar label {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-weight: 600;
}

.filter-bar input[type="text"] {
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-primary);
  padding: 6px 12px;
  border-radius: var(--radius);
  font-size: 0.85rem;
  outline: none;
  width: 220px;
  transition: border-color 0.2s;
}

.filter-bar input[type="text"]:focus { border-color: var(--green); }

.filter-btn {
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-muted);
  padding: 5px 12px;
  border-radius: 20px;
  cursor: pointer;
  font-size: 0.78rem;
  transition: all 0.15s;
  font-family: var(--font-main);
}

.filter-btn:hover { border-color: var(--green); color: var(--text-primary); }
.filter-btn.fb-active { background: var(--green-dim); border-color: var(--green); color: var(--green-bright); font-weight: 600; }

/* ── STAT BAR (visual numeric indicator) ────────────────── */
.stat-bar-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 3px 0;
}

.stat-bar-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  width: 80px;
  flex-shrink: 0;
}

.stat-bar-track {
  flex: 1;
  height: 6px;
  background: var(--bg-deep);
  border-radius: 3px;
  overflow: hidden;
}

.stat-bar-fill {
  height: 100%;
  border-radius: 3px;
  background: var(--green);
  transition: width 0.3s;
}

.stat-bar-fill.bar-red    { background: var(--red); }
.stat-bar-fill.bar-orange { background: var(--orange); }
.stat-bar-fill.bar-yellow { background: var(--yellow); }
.stat-bar-fill.bar-blue   { background: var(--blue); }

.stat-bar-val {
  font-size: 0.75rem;
  color: var(--text-primary);
  font-weight: 600;
  min-width: 40px;
  text-align: right;
}

/* ── RECIPE CARD ────────────────────────────────────────── */
.recipe-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 12px;
  margin: 16px 0;
}

.recipe-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.recipe-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--bg-deep);
  border-bottom: 1px solid var(--border);
}

.recipe-card-name {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--text-primary);
  flex: 1;
}

.recipe-card-skill {
  font-size: 0.72rem;
  background: var(--blue-dim);
  color: #6aa0c8;
  padding: 2px 7px;
  border-radius: 3px;
  font-weight: 600;
}

.recipe-card-body { padding: 10px 14px; }

.recipe-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  font-weight: 700;
  margin-bottom: 4px;
}

.recipe-ingredients {
  list-style: none;
  padding: 0;
  margin-bottom: 8px;
}

.recipe-ingredients li {
  font-size: 0.82rem;
  padding: 2px 0;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border);
}

.recipe-ingredients li:last-child { border-bottom: none; }

.recipe-output {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--green-bright);
}

.recipe-time {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 6px;
}

/* ── ANIMAL CARD ────────────────────────────────────────── */
.animal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
  margin: 16px 0;
}

.animal-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.animal-card-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: var(--bg-deep);
  border-bottom: 1px solid var(--border);
}

.animal-icon { font-size: 2.5rem; flex-shrink: 0; }

.animal-name {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
}

.animal-type {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 2px;
}

.animal-card-body { padding: 14px 18px; }

.animal-card-body ul { list-style: none; padding: 0; }

.animal-card-body li {
  font-size: 0.85rem;
  padding: 5px 0;
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: 8px;
  align-items: baseline;
  color: var(--text-primary);
}

.animal-card-body li:last-child { border-bottom: none; }

.animal-card-body li strong {
  color: var(--text-muted);
  font-size: 0.78rem;
  min-width: 100px;
  flex-shrink: 0;
}

/* ── SKILL LEVEL TABLE ──────────────────────────────────── */
.level-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  margin: 12px 0;
}

.level-table th {
  padding: 7px 10px;
  background: var(--bg-deep);
  color: var(--text-muted);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-align: left;
  border-bottom: 1px solid var(--border-light);
}

.level-table td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  color: var(--text-primary);
}

.level-table tr:last-child td { border-bottom: none; }
.level-table tr:hover td { background: rgba(255,255,255,0.02); }

.lvl-badge {
  display: inline-block;
  width: 24px;
  height: 24px;
  background: var(--green-dim);
  border: 1px solid var(--green);
  color: var(--green-bright);
  border-radius: 50%;
  font-size: 0.75rem;
  font-weight: 700;
  text-align: center;
  line-height: 22px;
}

/* ── VEHICLE CARD ───────────────────────────────────────── */
.vehicle-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
  margin: 16px 0;
}

.vehicle-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  border-left: 3px solid var(--border);
  transition: border-left-color 0.15s;
}

.vehicle-card:hover { border-left-color: var(--green); }

.vehicle-card-name {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.vehicle-card-type {
  font-size: 0.72rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
}

.vehicle-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.vehicle-stat {
  font-size: 0.8rem;
}

.vehicle-stat-label {
  color: var(--text-muted);
  font-size: 0.72rem;
  display: block;
}

.vehicle-stat-val {
  color: var(--text-primary);
  font-weight: 600;
}

/* ── MAP REGION CARDS ───────────────────────────────────── */
.region-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
  margin: 16px 0;
}

.region-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
}

.region-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-accent);
  margin-bottom: 6px;
}

.region-danger {
  display: inline-block;
  font-size: 0.72rem;
  padding: 2px 8px;
  border-radius: 3px;
  font-weight: 700;
  margin-bottom: 10px;
}

.danger-low    { background: var(--green-dim);   color: var(--green-bright); }
.danger-medium { background: var(--yellow-dim);  color: #c8b860; }
.danger-high   { background: var(--orange-dim);  color: #d09060; }
.danger-extreme{ background: var(--red-dim);     color: #e07878; }

.region-desc {
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.region-loot {
  margin-top: 8px;
  font-size: 0.78rem;
  color: var(--green-bright);
  font-weight: 600;
}

/* ── PROFESSION CARD ────────────────────────────────────── */
.profession-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
  margin: 16px 0;
}

.profession-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.profession-card-header {
  padding: 12px 16px;
  background: var(--bg-deep);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
}

.profession-name {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text-primary);
  flex: 1;
}

.profession-rarity {
  font-size: 0.72rem;
  padding: 2px 7px;
  border-radius: 3px;
  font-weight: 600;
}

.rarity-common { background: var(--gray-dim); color: #888880; }
.rarity-uncommon { background: var(--green-dim); color: var(--green-bright); }
.rarity-rare { background: var(--blue-dim); color: #6aa0c8; }

.profession-card-body {
  padding: 12px 16px;
}

.profession-skills {
  list-style: none;
  padding: 0;
  margin: 0 0 8px;
}

.profession-skills li {
  font-size: 0.82rem;
  padding: 4px 0;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.profession-skills li:last-child { border-bottom: none; }

.skill-bonus {
  font-size: 0.78rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 3px;
  background: var(--green-dim);
  color: var(--green-bright);
}

/* ── ACCORDION ──────────────────────────────────────────── */
.accordion { margin: 16px 0; }

.accordion-item {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-bottom: 8px;
  overflow: hidden;
}

.accordion-trigger {
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  padding: 12px 16px;
  cursor: pointer;
  font-family: var(--font-main);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background 0.15s;
}

.accordion-trigger:hover { background: rgba(255,255,255,0.03); }

.accordion-trigger .acc-icon {
  font-size: 0.75rem;
  color: var(--text-muted);
  transition: transform 0.2s;
}

.accordion-item.open .acc-icon { transform: rotate(90deg); }

.accordion-body {
  display: none;
  padding: 0 16px 16px;
  border-top: 1px solid var(--border);
}

.accordion-item.open .accordion-body { display: block; }

/* ── RESPONSIVE ─────────────────────────────────────────── */
/* ── LEVEL ROW (flex variant for level tables) ──────────── */
.level-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.level-row:last-child { border-bottom: none; }
.level-content {
  flex: 1;
  font-size: 0.875rem;
  color: var(--text-primary);
  padding-top: 2px;
}

@media (max-width: 900px) {
  .sidebar {
    position: fixed;
    left: 0;
    top: var(--header-h);
    height: calc(100vh - var(--header-h));
    z-index: 50;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    box-shadow: 4px 0 20px rgba(0,0,0,.5);
  }

  .sidebar.open { transform: translateX(0); }

  .menu-toggle { display: block; }

  .content { padding: 24px 20px 48px; }
}

@media (max-width: 600px) {
  .logo-sub { display: none; }
  h1 { font-size: 1.5rem; }
  h2 { font-size: 1.25rem; }
  .quick-nav-grid { grid-template-columns: repeat(2, 1fr); }
  .traits-grid, .skills-grid, .strategy-grid, .modes-grid { grid-template-columns: 1fr; }
}