body { background:var(--gray-50,#f5f7fa); color:var(--gray-900,#102a43); }
.reference-page { max-width:1120px; margin:0 auto; padding:32px 24px; }
.reference-page header { margin:32px 0; }
.reference-page h1 { font-size:clamp(1.8rem,4vw,2.8rem); margin:8px 0 12px; }
.reference-page h2 { font-size:1.15rem; margin-bottom:12px; }
.reference-page p { line-height:1.65; }
.reference-page section { background:#fff; border:1px solid var(--gray-200,#d9e2ec); border-radius:16px; padding:24px; margin:20px 0; }
.reference-page .reference-note { background:var(--primary-50,#eaf4fa); }
.eyebrow { font-size:.75rem; font-weight:700; letter-spacing:.09em; }
.reference-heading { display:flex; justify-content:space-between; gap:16px; align-items:center; }
.reference-page button { border:1px solid var(--primary-700,#155970); background:var(--primary-700,#155970); color:white; border-radius:8px; padding:12px 16px; cursor:pointer; min-height:44px; }
.reference-page button:disabled { opacity:.6; cursor:wait; }
.reference-page input { border:1px solid var(--gray-400,#829ab1); border-radius:8px; padding:10px; width:100%; min-width:0; min-height:44px; }
.reference-page :focus-visible { outline:3px solid #2cb1bc; outline-offset:3px; }
.reference-input { display:flex; gap:12px; margin:8px 0 20px; }
.reference-input input { flex:1; }
.reference-input button { flex-shrink:0; }
.reference-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr)); gap:16px; }
.reference-card { border:1px solid var(--gray-200,#d9e2ec); padding:20px; border-radius:12px; overflow-wrap:anywhere; }
.reference-card h3 { font-size:1rem; margin-bottom:12px; }
.reference-card small { display:block; margin:12px 0; }
.reference-table-wrap { overflow-x:auto; margin:16px 0; }
.reference-page table { width:100%; border-collapse:collapse; font-size:.9rem; }
.reference-page th,.reference-page td { padding:12px; border-bottom:1px solid #d9e2ec; text-align:right; white-space:nowrap; }
.reference-page th:first-child,.reference-page td:first-child { text-align:left; white-space:normal; }
.reference-error { color:#a32929; }
.reference-page footer { padding:12px 0 32px; font-size:.9rem; }
@media(max-width:540px) { .reference-page { padding:20px 16px; } .reference-page section { padding:18px; } .reference-input { flex-direction:column; } }

@media(max-width:540px) {
  .reference-page table { table-layout:fixed; }
  .reference-page th,.reference-page td { padding:10px 4px; font-size:.8rem; white-space:normal; overflow-wrap:normal; }
  .reference-page th:first-child,.reference-page td:first-child { width:25%; }
  .reference-page th:nth-child(2),.reference-page th:nth-child(3),.reference-page td.reference-number { white-space:nowrap; overflow-wrap:normal; }
  .reference-page td.reference-number { font-size:.75rem; font-variant-numeric:tabular-nums; }
}

.reference-page #reference-inventory summary { min-height:44px; cursor:pointer; color:var(--primary-800); }
.reference-filters { display:grid; grid-template-columns:auto 1fr; gap:8px; align-items:center; margin:12px 0; }
.reference-filters select { min-height:44px; width:100%; font-size:1rem; }
.reference-card { padding:12px; }
.reference-card button { margin:4px 8px 4px 0; }
@media(max-width:600px) {
 .reference-page { padding:12px; }
 .reference-page header { margin:12px 0; }
 .reference-page h1 { font-size:1.5rem; }
 .reference-page section { padding:12px; margin:12px 0; }
 .reference-input { flex-direction:row; gap:8px; margin-bottom:8px; }
}