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

.NatChoice { padding:11px 13px; border:1px solid rgba(117,214,210,.4); background:transparent; color:var(--academy-muted); font:inherit; cursor:pointer; }
.NatChoice:hover, .NatChoice:focus-visible, .NatChoice.is-selected { border-color:var(--academy-lime); color:var(--academy-lime); }
.NatChoice:focus-visible, #TranslateButton:focus-visible { outline:2px solid var(--academy-coral); outline-offset:3px; }
.NatStage { display:grid; grid-template-columns:1fr minmax(130px,.7fr) 1fr; gap:14px; align-items:center; margin:30px 0 8px; }
.NatEndpoint, .NatBoundary { display:grid; gap:8px; min-height:110px; padding:18px; border-left:3px solid var(--academy-cyan); background:rgba(9,20,22,.45); }
.NatBoundary { border-left-color:var(--academy-coral); text-align:center; }
.NatEndpoint.is-public { border-left-color:var(--academy-lime); }
.NatLabel { color:var(--academy-cyan); font-family:'Orbitron',sans-serif; font-size:.68rem; letter-spacing:.08em; }
.NatEndpoint strong, .NatBoundary strong { color:var(--academy-paper); font-family:'Orbitron',sans-serif; font-size:.95rem; font-weight:400; }
.NatEndpoint small, .NatBoundary small { color:var(--academy-muted); }
#TranslateButton { margin-top:20px; border:0; font:inherit; cursor:pointer; }
.NatStage.is-translated .NatBoundary { box-shadow:0 0 0 1px var(--academy-coral), 0 0 20px rgba(255,119,95,.18); }

@media (max-width:560px) {
  .NatStage { grid-template-columns:1fr; }
  .NatBoundary { order:2; }
  .NatEndpoint.is-public { order:3; }
}