.reference-main { width: min(1320px, calc(100% - 32px)); }
.reference-hero { align-items: center; }
.reference-hero h1 { max-width: 920px; font-size: clamp(38px, 6vw, 68px); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; }
.stat-grid article { padding: 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); box-shadow: 0 8px 22px #1d3a320b; }
.stat-grid strong, .stat-grid span { display: block; }
.stat-grid strong { color: var(--green-dark); font-size: 28px; }
.stat-grid span { margin-top: 4px; color: var(--muted); font-size: 12px; font-weight: 800; }

.reference-controls { position: sticky; z-index: 5; top: 62px; margin-bottom: 14px; padding: 16px; border: 1px solid var(--line); border-radius: 11px; background: color-mix(in srgb, var(--paper) 94%, transparent); box-shadow: var(--shadow); backdrop-filter: blur(10px); }
.tab-row, .filter-row { display: flex; flex-wrap: wrap; gap: 8px; }
.tab-row { margin-bottom: 12px; }
.tab-button { min-height: 38px; padding: 0 15px; font-weight: 900; }
.tab-button.active { border-color: var(--green); background: #dff3eb; color: var(--green-dark); }
.filter-row { align-items: end; margin-top: 10px; }
.filter-row label { display: grid; gap: 4px; color: var(--muted); font-size: 11px; font-weight: 900; }
.filter-row select { min-width: 150px; min-height: 35px; padding: 0 9px; border: 1px solid var(--line); border-radius: 7px; background: var(--paper); color: var(--ink); }
.filter-row .check-filter { display: flex; min-height: 35px; align-items: center; gap: 7px; padding: 0 10px; border: 1px solid var(--line); border-radius: 7px; background: var(--paper); }
#reference-status { margin: 10px 0 0; color: var(--muted); font-size: 12px; }

.table-shell { overflow-x: auto; border: 1px solid var(--line); border-radius: 11px; background: var(--paper); box-shadow: 0 8px 24px #1d3a320b; }
.reference-table { width: 100%; border-collapse: collapse; }
.reference-table th { position: sticky; top: 0; z-index: 1; padding: 11px 12px; background: #e8f1ed; color: var(--green-dark); font-size: 11px; letter-spacing: .04em; text-align: left; }
.reference-table td { padding: 12px; border-top: 1px solid var(--line); vertical-align: top; line-height: 1.55; }
.reference-table tr[hidden] { display: none; }
.enchantment-name { min-width: 150px; }
.enchantment-name b { display: block; font-size: 15px; }
.registry-id { display: block; margin-top: 4px; color: #768680; font: 10px/1.4 ui-monospace, SFMono-Regular, Consolas, monospace; overflow-wrap: anywhere; }
.effect-copy { min-width: 310px; color: #435c55; }
.badge-row { display: flex; flex-wrap: wrap; gap: 5px; }
.badge { display: inline-flex; padding: 3px 7px; border-radius: 999px; background: #edf3f0; color: #597069; font-size: 10px; font-weight: 900; }
.badge.treasure { background: #fff1cc; color: #8c5d00; }
.badge.curse { background: #f8dddd; color: #992b2b; }
.badge.code { background: #e5edff; color: #315a9b; }

.profession-list { display: grid; gap: 14px; }
.profession-card { border: 1px solid var(--line); border-radius: 11px; background: var(--paper); box-shadow: 0 8px 24px #1d3a320b; overflow: hidden; }
.profession-card[hidden] { display: none; }
.profession-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 15px 16px; background: #edf4f1; }
.profession-heading h2 { margin: 0; font-size: 20px; }
.profession-heading span { color: var(--muted); font-size: 11px; font-weight: 900; }
.profession-empty { margin: 0; padding: 16px; color: var(--muted); }
.trade-level[hidden], .trade-row[hidden] { display: none; }
.trade-level h3 { margin: 0; padding: 10px 16px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #fbfcfb; color: var(--green-dark); font-size: 13px; }
.trade-grid { display: grid; grid-template-columns: minmax(210px, 1.3fr) minmax(220px, 1.5fr) minmax(150px, .8fr); }
.trade-grid > b { padding: 9px 13px; background: #f2f6f4; color: #60736d; font-size: 10px; letter-spacing: .04em; }
.trade-row { display: grid; grid-template-columns: minmax(210px, 1.3fr) minmax(220px, 1.5fr) minmax(150px, .8fr); border-top: 1px solid var(--line); }
.trade-row > div { min-width: 0; padding: 12px 13px; }
.trade-row > div + div { border-left: 1px solid var(--line); }
.item-line { display: block; margin: 0 0 5px; color: #435c55; }
.item-line:last-child { margin-bottom: 0; }
.item-line code { color: #75857f; font-size: 9px; overflow-wrap: anywhere; }
.trade-mode { margin-bottom: 7px; color: var(--amber); font-size: 10px; font-weight: 900; }
.trade-meta { color: var(--muted); font-size: 11px; }
.dynamic-details summary { color: var(--green-dark); cursor: pointer; font-size: 11px; font-weight: 900; }
.dynamic-list { display: grid; gap: 6px; margin-top: 8px; }
.dynamic-option { padding: 7px; border: 1px dashed var(--line); border-radius: 7px; background: #fafcfb; font-size: 11px; }

.evidence-note { margin-top: 28px; padding: 22px; border: 1px solid var(--line); border-radius: 11px; background: var(--paper); }
.evidence-note h2 { margin: 0; font-size: clamp(24px, 4vw, 34px); }
.evidence-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 16px; }
.evidence-grid > div { padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper-2); }
.evidence-grid p { margin: 6px 0 0; color: var(--muted); font-size: 12px; line-height: 1.65; }
.reference-error { padding: 20px; border: 1px solid #e6c29d; border-radius: 10px; background: #fff7ed; color: var(--amber); text-align: center; }
.footer-links { display: flex; flex-wrap: wrap; gap: 14px; }

@media (max-width: 900px) {
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .evidence-grid { grid-template-columns: 1fr; }
  .reference-controls { position: static; }
}

@media (max-width: 700px) {
  .reference-main { width: calc(100% - 24px); }
  .reference-hero h1 { font-size: clamp(34px, 10.5vw, 48px); }
  .enchantment-table, .enchantment-table tbody, .enchantment-table tr, .enchantment-table td { display: block; }
  .enchantment-table thead { display: none; }
  .enchantment-table tr { padding: 12px; border-top: 1px solid var(--line); }
  .enchantment-table tr:first-child { border-top: 0; }
  .enchantment-table td { padding: 5px 0; border: 0; }
  .enchantment-table td::before { display: block; margin-bottom: 2px; color: #75857f; font-size: 9px; font-weight: 900; }
  .enchantment-table td:nth-child(2)::before { content: "等级"; }
  .enchantment-table td:nth-child(3)::before { content: "效果"; }
  .enchantment-table td:nth-child(4)::before { content: "适用范围"; }
  .enchantment-table td:nth-child(5)::before { content: "属性"; }
  .effect-copy { min-width: 0; }
  .trade-grid { display: none; }
  .trade-row { display: block; padding: 11px 13px; }
  .trade-row > div { padding: 4px 0; }
  .trade-row > div + div { border-left: 0; }
  .trade-row > div::before { display: block; margin-bottom: 2px; color: #75857f; font-size: 9px; font-weight: 900; }
  .trade-row > div:nth-child(1)::before { content: "需要"; }
  .trade-row > div:nth-child(2)::before { content: "售卖"; }
  .trade-row > div:nth-child(3)::before { content: "次数与经验"; }
}