* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
body {
  margin: 0;
  background: #cfcfcf;
  color: #111;
  font: 13px/1.48 Verdana, Arial, Helvetica, sans-serif;
}
a { color: #0000cc; text-decoration: underline; }
a:visited { color: #551a8b; }
a:hover { color: #cc0000; }
code, pre { font-family: "Courier New", Courier, monospace; }
code { overflow-wrap: anywhere; }

.fixed-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: #e7e7e7;
  border-bottom: 2px solid #222;
  box-shadow: 0 2px 5px rgba(0,0,0,.24);
}
.header-inner {
  width: min(1500px, calc(100% - 20px));
  margin: 0 auto;
}
.brand-row {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px 6px;
}
.brand {
  color: #002b55;
  font: bold 21px Georgia, "Times New Roman", serif;
  text-decoration: none;
}
.brand:visited { color: #002b55; }
.header-note { color: #444; font-size: 11px; text-align: right; }
.top-tabs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-collapse: collapse;
  background: #003366;
}
.top-tabs a {
  display: block;
  padding: 9px 7px;
  border-right: 1px solid #fff;
  color: #fff;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
}
.top-tabs a:visited { color: #fff; }
.top-tabs a:hover { background: #15598f; }
.top-tabs a.active { background: #fff; color: #003366; border-top: 3px solid #003366; padding-top: 6px; }

#manual {
  width: min(1500px, calc(100% - 20px));
  margin: 96px auto 40px;
  background: #fff;
  border: 1px solid #444;
  min-height: calc(100vh - 130px);
}
.page { padding: 18px; }
.page-title {
  margin: 0 0 4px;
  color: #002b55;
  font: bold 29px Georgia, "Times New Roman", serif;
}
.subtitle { margin: 0 0 12px; color: #444; font-style: italic; }
h1 { color: #002b55; font: bold 27px Georgia, "Times New Roman", serif; }
h2 {
  margin: 30px 0 8px;
  padding: 6px 9px;
  color: #fff;
  background: #003366;
  border: 1px solid #001b36;
  font-size: 19px;
}
h3 {
  margin: 21px 0 7px;
  padding-bottom: 3px;
  color: #003366;
  border-bottom: 1px solid #888;
  font-size: 16px;
}
h4 { color: #003366; font-size: 14px; }
p { max-width: 1150px; }

.local-nav {
  position: sticky;
  top: 84px;
  z-index: 50;
  margin: 12px 0;
  padding: 7px 9px;
  border: 1px solid #777;
  background: #ffffdf;
  line-height: 1.8;
}
.local-nav b { margin-right: 8px; }
.local-nav a { white-space: nowrap; margin-right: 10px; }

.key-rule, .important {
  margin: 14px 0;
  padding: 10px;
  border: 2px solid #003366;
  background: #eaf2fb;
}
.warning {
  margin: 10px 0;
  padding: 8px;
  border: 1px solid #a65f00;
  background: #fff1c9;
}
.success {
  margin: 10px 0;
  padding: 8px;
  border: 1px solid #287228;
  background: #eaf7e8;
}
.note { margin-top: 7px; color: #6b3a00; }
.verify { margin-top: 7px; color: #064b06; }
.small-note { font-size: 11px; color: #444; }
.toplink { text-align: right; font-size: 11px; }

.dashboard-grid, .cheat-grid, .tip-grid, .trouble-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
}
.dashboard-card, .cheat-card, .tip-card, .trouble-card {
  border: 1px solid #777;
  padding: 10px;
  background: #fafafa;
}
.dashboard-card h3, .cheat-card h3, .tip-card h3, .trouble-card h3 {
  margin-top: 0;
}
.domain-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(110px,1fr));
  gap: 5px;
  margin: 12px 0;
}
.domain {
  border: 1px solid #666;
  background: #f0f0f0;
  padding: 9px 6px;
  text-align: center;
}
.domain strong { display: block; color: #003366; font-size: 17px; }
.quick-rules {
  columns: 2;
  column-gap: 35px;
}
.quick-rules li { break-inside: avoid; margin-bottom: 7px; }

.plain-table, .quick-table, .decision-table, .symptom-table, .port-table {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0 16px;
}
.plain-table th, .quick-table th, .decision-table th, .symptom-table th, .port-table th {
  background: #d9d9d9;
  border: 1px solid #666;
  padding: 6px;
  text-align: left;
}
.plain-table td, .quick-table td, .decision-table td, .symptom-table td, .port-table td {
  border: 1px solid #888;
  padding: 7px;
  vertical-align: top;
}
.kbd {
  display: inline-block;
  padding: 1px 5px;
  border: 1px solid #888;
  border-bottom-width: 2px;
  background: #f3f3f3;
  font-family: "Courier New", monospace;
}

/* Packet visual retained from the previous edition */
.encap-layout { display: grid; grid-template-columns: 290px 1fr 1fr; gap: 12px; align-items: start; }
.osi-panel, .send-panel, .receive-panel { border: 1px solid #777; padding: 9px; background: #fafafa; }
.osi-panel h3, .send-panel h3, .receive-panel h3 { margin-top: 0; text-align: center; }
.osi-table { width: 100%; border-collapse: collapse; }
.osi-table td { border: 1px solid #777; padding: 6px; vertical-align: middle; }
.osi-table .layer-num { width: 35px; text-align: center; color: #fff; font-size: 18px; font-weight: bold; }
.osi-table tr td:last-child { width: 90px; text-align: center; font-weight: bold; }
.l7,.l6,.l5 { background:#eee4f6; }.l7 .layer-num,.l6 .layer-num,.l5 .layer-num{background:#6e3f8f}
.l4 { background:#dce9fb; }.l4 .layer-num{background:#356fbd}
.l3 { background:#e2f1df; }.l3 .layer-num{background:#428b45}
.l2 { background:#fff0cf; }.l2 .layer-num{background:#c88600}
.l1 { background:#f8dddd; }.l1 .layer-num{background:#b7473d}
.encap-step { display: grid; grid-template-columns: 125px minmax(0,1fr) 90px; gap: 7px; align-items: center; }
.step-label { font-size: 11px; font-weight: bold; color: #333; }
.pdu { display: flex; min-height: 55px; border: 1px solid #777; background:#fff; }
.pdu span { display:flex; align-items:center; justify-content:center; padding:5px; border-right:1px solid #777; text-align:center; font-size:11px; }
.pdu span:last-child { border-right:0; }
.app-data { flex: 3; background:#fff; }.tcp-head { flex: 1.2; background:#dce9fb; }.ip-head { flex:1.1; background:#e2f1df; }.eth-head { flex:1.3; background:#fff0cf; }.eth-tail { flex:.7; background:#fff0cf; }
.faded { opacity:.35; text-decoration: line-through; }
.bits { padding: 13px 6px; border: 1px solid #b7473d; background:#f8dddd; font-family:"Courier New",monospace; text-align:center; overflow:hidden; }
.pdu-name { font-size: 11px; font-weight:bold; }
.down-arrow,.up-arrow { text-align:center; color:#3d8d46; font-size:25px; line-height:1; }
.memory-aid { margin: 12px 0; padding: 10px; border:1px solid #777; background:#f4f4f4; text-align:center; font-family:"Courier New",monospace; }
.header-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.header-card { border:1px solid #777; padding:10px; }.header-card h3{margin-top:0}.tcp-card{background:#eef4ff}.ip-card{background:#eff8ed}.eth-card{background:#fff6df}
.path-line { display:grid; grid-template-columns:1fr auto 1fr auto 1fr auto 1fr auto 1fr; gap:6px; align-items:center; }
.node { border:1px solid #777; background:#f5f5f5; padding:10px 5px; text-align:center; min-height:88px; }.node span{font-size:10px;color:#444}.path-arrow{font-size:24px;color:#003366}
.journey-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:12px; }.journey{border:1px solid #888;padding:9px;background:#fafafa}.journey h3{margin-top:0;font-size:14px}.journey table{width:100%;border-collapse:collapse}.journey td,.journey th{border:1px solid #aaa;padding:4px;text-align:left}
.change-table,.compare-table,.header-table,.mistake-table { width:100%; border-collapse:collapse; margin:12px 0; }.change-table th,.compare-table th,.header-table th,.mistake-table th{background:#ddd;border:1px solid #666;padding:6px;text-align:left}.change-table td,.compare-table td,.header-table td,.mistake-table td{border:1px solid #888;padding:6px;vertical-align:top}
.takeaways { margin:14px 0;padding:10px;border:1px solid #777;background:#f5f5f5; }.takeaways h3{margin-top:0}
.reference-image { overflow:auto; border:1px solid #777; background:#eee; padding:5px; margin-top:8px; }.reference-image img{display:block;max-width:100%;height:auto;margin:auto}

/* Command catalog */
.catalog-intro, .usecase-intro { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.toc-box { border:1px solid #777;background:#f5f5f5;padding:10px; }
.toc-box h3 { margin-top:0; }
.toc-box ul,.toc-box ol { columns:2;column-gap:25px;padding-left:22px; }
.toc-box li { break-inside:avoid;margin-bottom:4px; }
.search-box {
  position: sticky;
  top: 84px;
  z-index: 60;
  padding: 9px;
  border: 1px solid #777;
  background: #ffffd9;
}
.search-box input { width:min(760px,88%);padding:7px;border:1px solid #555; }
.result-count { font-size:11px;color:#444; }
.command-table,.steps-table { width:100%;border-collapse:collapse;margin:8px 0 18px; }
.command-table th,.steps-table th { background:#d9d9d9;border:1px solid #666;padding:6px;text-align:left; }
.command-table td,.steps-table td { border:1px solid #888;padding:7px;vertical-align:top; }
.command-table .syntax { width:22%;background:#f8f8f8; }
.command-table .mode { width:11%; }
.command-table .options { width:24%; }
.command-table pre, .tutorial pre, .command-block {
  margin:5px 0;
  padding:8px;
  border:1px solid #aaa;
  background:#f1f1f1;
  white-space:pre-wrap;
  overflow:auto;
}
.example { margin-top:7px; }
.command-family { scroll-margin-top:120px; }
.hidden { display:none!important; }

/* Tutorials */
.steps-table td:first-child { width:45px;text-align:center;font-weight:bold; }
.steps-table td:nth-child(2) { width:37%;background:#f8f8f8; }
.tutorial { scroll-margin-top:115px; }
.tutorial ul { margin-top:5px; }
.stage-banner {
  margin: 28px 0 12px;
  padding: 9px 10px;
  border: 2px solid #003366;
  background: #dfeaf5;
}
.stage-banner strong { display:block;color:#003366;font-size:16px; }
.stage-banner span { color:#333; }

/* Troubleshooting */
.flow {
  display: grid;
  grid-template-columns: repeat(7, minmax(100px,1fr));
  gap: 5px;
  align-items: stretch;
  margin: 12px 0;
}
.flow-step {
  position: relative;
  border: 1px solid #666;
  background: #f4f4f4;
  padding: 9px 7px;
  text-align: center;
}
.flow-step:not(:last-child)::after {
  content: ">";
  position: absolute;
  right: -8px;
  top: 35%;
  z-index: 2;
  font-weight: bold;
  color: #003366;
}
.status-code {
  display:inline-block;
  min-width: 72px;
  padding: 2px 5px;
  border:1px solid #777;
  background:#eee;
  font-family:"Courier New",monospace;
  font-weight:bold;
}
.evidence-list li { margin-bottom: 5px; }

/* Tips */
.tip-number {
  float: left;
  width: 32px;
  height: 32px;
  margin: 0 8px 5px 0;
  border: 1px solid #003366;
  background: #e6eef7;
  color: #003366;
  text-align: center;
  line-height: 30px;
  font-weight: bold;
}
.tip-card::after { content:"";display:block;clear:both; }

.footer {
  padding: 12px 18px;
  background: #e7e7e7;
  border-top: 1px solid #444;
  font-size: 11px;
  color: #444;
}
.footer a { margin-right: 10px; }

@media (max-width:1100px) {
  .encap-layout{grid-template-columns:1fr}
  .path-line{grid-template-columns:1fr}
  .path-arrow{transform:rotate(90deg);text-align:center}
  .journey-grid{grid-template-columns:1fr 1fr}
  .header-cards{grid-template-columns:1fr}
  .catalog-intro,.usecase-intro{grid-template-columns:1fr}
  .toc-box ul,.toc-box ol{columns:1}
  .domain-grid{grid-template-columns:repeat(3,1fr)}
  .flow{grid-template-columns:1fr}
  .flow-step:not(:last-child)::after{content:"v";right:49%;top:auto;bottom:-16px}
}
@media (max-width:760px) {
  html { scroll-padding-top: 184px; }
  .header-inner { width:100%; }
  .brand-row { padding:5px 8px; }
  .header-note { display:none; }
  .brand { font-size:17px; }
  .top-tabs { grid-template-columns:1fr 1fr 1fr; }
  .top-tabs a { padding:7px 3px;font-size:11px; }
  #manual { width:calc(100% - 6px);margin-top:154px; }
  .page { padding:9px; }
  .local-nav,.search-box { top:145px; }
  .journey-grid,.dashboard-grid,.cheat-grid,.tip-grid,.trouble-grid { grid-template-columns:1fr; }
  .domain-grid { grid-template-columns:1fr 1fr; }
  .quick-rules { columns:1; }
  .encap-step{grid-template-columns:1fr}
  .step-label,.pdu-name{text-align:center}
  .command-table,.command-table tbody,.command-table tr,.command-table td{display:block;width:100%!important}
  .command-table thead{display:none}
  .command-table tr{border:1px solid #777;margin-bottom:10px}
  .command-table td{border:0;border-bottom:1px solid #ccc}
  .steps-table{font-size:11px}
}
@media print {
  body{background:#fff;font-size:8.5pt}
  .fixed-header,.local-nav,.search-box,.toplink{display:none!important}
  #manual{width:100%;margin:0;border:0}
  .page{padding:0}
  .command-family,.tutorial,table,.header-card,.journey,.cheat-card,.trouble-card,.tip-card{page-break-inside:avoid}
  h2,h3{page-break-after:avoid}
  .encap-layout{grid-template-columns:25% 37.5% 37.5%;gap:5px}
  .encap-step{grid-template-columns:85px 1fr 55px}
  .path-line{grid-template-columns:1fr auto 1fr auto 1fr auto 1fr auto 1fr}
  .journey-grid{grid-template-columns:repeat(3,1fr)}
}