@import '../../lessons/network-basics/css/style.css?v=20260920-032225';

.ReferenceHeader { max-width:920px; padding:72px 0 40px; }
.ReferenceHeader h1 { max-width:760px; }
.ReferenceLead { max-width:760px; color:var(--academy-muted); font-size:1.12rem; line-height:1.7; }
.ReferenceMeta { display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; color:var(--academy-cyan); font-family:'Orbitron',sans-serif; font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; }
.ReferenceMeta span { padding:9px 12px; border:1px solid rgba(117,214,210,.28); }
.ReferenceTools { display:grid; gap:22px; margin:12px 0 36px; padding:24px; border:1px solid rgba(117,214,210,.22); background:rgba(9,20,22,.38); }
.ReferenceSearch { display:grid; gap:8px; }
.ReferenceSearch label { color:var(--academy-cyan); font-family:'Orbitron',sans-serif; font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; }
.ReferenceSearch input { width:100%; box-sizing:border-box; padding:14px 16px; border:1px solid rgba(117,214,210,.45); background:rgba(4,12,14,.8); color:var(--academy-paper); font:inherit; }
.ReferenceSearch input:focus-visible { outline:2px solid var(--academy-coral); outline-offset:3px; }
.ReferenceFilters { display:flex; flex-wrap:wrap; gap:8px; }
.ReferenceFilters button { padding:10px 13px; border:1px solid rgba(117,214,210,.4); background:transparent; color:var(--academy-muted); font:inherit; cursor:pointer; }
.ReferenceFilters button:hover, .ReferenceFilters button:focus-visible, .ReferenceFilters button.is-selected { border-color:var(--academy-lime); color:var(--academy-lime); }
.ReferenceFilters button:focus-visible { outline:2px solid var(--academy-coral); outline-offset:3px; }
.ReferenceSummary { display:flex; justify-content:space-between; gap:16px; align-items:baseline; margin-bottom:16px; }
.ReferenceSummary p { margin:0; color:var(--academy-muted); }
.ReferenceSummary strong { color:var(--academy-paper); font-weight:400; }
.CodeGrid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px; }
.CodeCard { display:grid; gap:8px; min-width:0; padding:20px; border:1px solid rgba(117,214,210,.18); border-left:3px solid var(--academy-cyan); background:rgba(9,20,22,.35); }
.CodeCard--success { border-left-color:var(--academy-lime); }
.CodeCard--redirect { border-left-color:var(--academy-coral); }
.CodeCard--client-error { border-left-color:#e8b45c; }
.CodeCard--server-error { border-left-color:#e47777; }
.CodeCardTop { display:flex; justify-content:space-between; gap:12px; align-items:center; }
.CodeCardTop strong { color:var(--academy-paper); font-family:'Orbitron',sans-serif; font-size:1.25rem; letter-spacing:.04em; }
.CodeCard h3 { margin:0; color:var(--academy-paper); font-size:1.02rem; font-weight:500; }
.CodeCard p { margin:0; color:var(--academy-muted); line-height:1.55; }
.CodeFamily { color:var(--academy-cyan); font-size:.72rem; letter-spacing:.05em; text-transform:uppercase; }
.CodeStatus { padding:4px 7px; border:1px solid currentColor; color:var(--academy-lime); font-size:.68rem; letter-spacing:.04em; text-transform:uppercase; }
.CodeStatus--historical { color:var(--academy-coral); }
.CodeStatus--reserved { color:#e8b45c; }
.ReferenceEmpty { margin:24px 0; padding:24px; border-left:3px solid var(--academy-coral); background:rgba(9,20,22,.38); color:var(--academy-muted); }
.ReferenceNote { max-width:820px; margin-top:40px; padding:20px; border-left:3px solid var(--academy-cyan); background:rgba(9,20,22,.3); color:var(--academy-muted); line-height:1.6; }
.ReferenceNote strong { color:var(--academy-paper); }

@media (max-width:680px) {
  .ReferenceHeader { padding-top:48px; }
  .CodeGrid { grid-template-columns:1fr; }
  .ReferenceSummary { align-items:flex-start; flex-direction:column; }
}