/* NS Tools — uses the theme's CSS variables when present, falls back to the Network Skills palette. */
.ns-tool{
  --ns-blue:var(--blue,#1668C7);--ns-line:var(--line,#DDE4EC);--ns-panel:var(--panel,#fff);
  --ns-panel2:var(--panel-2,#F1F5F9);--ns-text:var(--text,#16202B);--ns-muted:var(--muted,#5B6B7B);
  --ns-green:var(--green,#1C7C4B);--ns-red:var(--red,#C8372D);
  --ns-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  margin:24px 0;color:var(--ns-text);font-size:17px;line-height:1.5;
}
.ns-tool *,.ns-tool *::before,.ns-tool *::after{box-sizing:border-box;}
.ns-tool-body{background:var(--ns-panel);border:1px solid var(--ns-line);border-radius:14px;padding:26px 28px;}

/* fields */
.ns-field{display:flex;flex-direction:column;gap:6px;margin:0 0 14px;}
.ns-label{font-weight:700;font-size:16px;}
.ns-hint{font-size:14px;color:var(--ns-muted);}
.ns-tool .ns-input{
  width:100%;margin:0;background:var(--ns-panel2);border:1px solid var(--ns-line);border-radius:8px;
  padding:11px 14px;font:500 17px/1.4 'Manrope',system-ui,sans-serif;color:var(--ns-text);
}
.ns-tool .ns-input:focus{outline:2px solid var(--ns-blue);outline-offset:1px;background:#fff;}
.ns-tool input.ns-input[type=number]{max-width:160px;}
.ns-form{display:flex;flex-direction:column;gap:2px;}
.ns-trainer-form{flex-direction:row;gap:12px;align-items:stretch;}
.ns-trainer-form .ns-input{flex:1;font-family:var(--ns-mono);}

/* buttons */
.ns-tool .ns-tool-body button.ns-btn{
  align-self:flex-start;cursor:pointer;background:var(--ns-blue) !important;color:#fff !important;border:0 !important;
  border-radius:8px;padding:11px 24px;font:700 17px/1.2 'Manrope',system-ui,sans-serif;text-decoration:none;box-shadow:none !important;
}
.ns-tool .ns-tool-body button.ns-btn:hover{filter:brightness(.93);}
.ns-tool .ns-tool-body button.ns-btn:disabled{opacity:.5;cursor:default;}
.ns-tool .ns-tool-body button.ns-btn.ns-btn-secondary.ns-btn-secondary{
  background:#fff !important;color:var(--ns-blue) !important;border:1px solid var(--ns-line) !important;
}
.ns-tool .ns-tool-body button.ns-btn.ns-btn-secondary.ns-btn-secondary:hover{border-color:var(--ns-blue) !important;filter:none;}
.ns-tool .ns-tool-body button.ns-btn-ghost.ns-btn-ghost.ns-btn-ghost{
  cursor:pointer;background:transparent !important;color:var(--ns-muted) !important;border:0 !important;box-shadow:none !important;
  padding:8px 10px;font:600 16px/1.2 'Manrope',system-ui,sans-serif;border-radius:8px;
}
.ns-tool .ns-tool-body button.ns-btn-ghost.ns-btn-ghost.ns-btn-ghost:hover{color:var(--ns-blue) !important;text-decoration:underline;}
.ns-toolbar{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;margin:6px 0 4px;}
.ns-toolbar .ns-field{margin:0;min-width:240px;}

/* output — the theme turns every .content table into a scrolling block on phones; keep ours real tables */
.ns-tool .ns-tool-body table.ns-table{display:table;white-space:normal;overflow:hidden;}

.ns-out{margin-top:22px;}
.ns-error{margin:0;padding:12px 16px;border-radius:8px;background:#FBE9E7;border:1px solid #F0C4BF;color:var(--ns-red);font-weight:600;}
.ns-note{margin:14px 0 0;color:var(--ns-muted);font-size:15px;}
.ns-sub{margin:18px 0 8px;font-weight:700;font-size:15px;letter-spacing:.06em;text-transform:uppercase;color:var(--ns-muted);}
.ns-mono{font-family:var(--ns-mono);}
.ns-free{margin:0;font-size:16px;word-spacing:.2em;}
.ns-tool table.ns-table{width:100%;border-collapse:separate;border-spacing:0;margin:0;font-size:17px;border:1px solid var(--ns-line);border-radius:12px;overflow:hidden;}
.ns-tool .ns-table th,.ns-tool .ns-table td{border:0;border-bottom:1px solid var(--ns-line);padding:12px 18px;text-align:left;vertical-align:middle;background:transparent;}
.ns-tool .ns-table tr:last-child th,.ns-tool .ns-table tr:last-child td{border-bottom:0;}
.ns-kv th{width:38%;font-weight:600;color:var(--ns-muted);background:var(--ns-panel2) !important;}
.ns-kv td{font-family:var(--ns-mono);font-size:17px;font-weight:500;}
.ns-vlsm-table thead th{background:var(--ns-panel2);color:var(--ns-muted);font:700 13px/1.3 'Manrope',sans-serif;letter-spacing:.08em;text-transform:uppercase;}
.ns-vlsm-table tbody th{font-weight:800;}
.ns-scroll{overflow-x:auto;}

/* binary view */
.ns-binary{margin-top:6px;}
.ns-bin-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin:6px 0;}
.ns-bin-label{width:80px;font-weight:600;color:var(--ns-muted);font-size:15px;}
.ns-bits{font-family:var(--ns-mono);font-size:16px;letter-spacing:.02em;word-break:break-all;}
.ns-bits-net{color:var(--ns-blue);font-weight:700;}
.ns-bits-host{color:var(--ns-muted);}
.ns-bits-dot{margin:0 3px;color:var(--ns-muted);}

/* trainer */
.ns-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:18px 0;}
.ns-stat{background:var(--ns-panel2);border-radius:10px;padding:12px 14px;text-align:center;}
.ns-stat-v{display:block;font-size:24px;font-weight:800;line-height:1.2;}
.ns-stat-k{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--ns-muted);font-weight:700;}
.ns-card-q{border:1px solid var(--ns-line);border-radius:12px;padding:22px 24px;}
.ns-question{margin:0 0 14px;font-size:21px;font-weight:700;line-height:1.35;}
.ns-feedback{margin-top:16px;}
.ns-feedback p{margin:6px 0 0;}
.ns-feedback.ns-ok,.ns-feedback.ns-bad{padding:14px 18px;border-radius:10px;margin-bottom:14px;}
.ns-feedback.ns-ok{background:#E6F4EC;border:1px solid #BFE3CE;color:#17603B;}
.ns-feedback.ns-bad{background:#FBE9E7;border:1px solid #F0C4BF;color:#8E2A22;}
.ns-feedback.ns-ok p,.ns-feedback.ns-bad p{color:var(--ns-text);}

/* VLSM inputs */
.ns-vlsm-head,.ns-vlsm-row{display:grid;grid-template-columns:minmax(0,1fr) 160px 44px;gap:10px;align-items:center;}
.ns-vlsm-head{margin:6px 0;font-weight:700;font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--ns-muted);}
.ns-vlsm-list{display:flex;flex-direction:column;gap:10px;margin-bottom:6px;}
.ns-tool input.ns-input[type=number]{max-width:none;}

@media(max-width:620px){
  .ns-tool-body{padding:16px 12px;}
  .ns-trainer-form{flex-direction:column;}
  .ns-tool .ns-tool-body button.ns-btn{width:100%;text-align:center;}
  .ns-stats{grid-template-columns:repeat(2,minmax(0,1fr));}
  .ns-tool .ns-tool-body table.ns-kv,
  .ns-tool .ns-tool-body table.ns-kv tbody,
  .ns-tool .ns-tool-body table.ns-kv tr{display:block;width:100%;}
  .ns-tool .ns-tool-body table.ns-kv th{display:block;width:100%;padding:10px 14px 0;font:700 12px/1.4 'Manrope',sans-serif;letter-spacing:.08em;text-transform:uppercase;background:transparent !important;}
  .ns-tool .ns-tool-body table.ns-kv td{display:block;width:100%;padding:2px 14px 10px;font-size:17px;overflow-wrap:break-word;}
  .ns-tool .ns-tool-body table.ns-kv tr{border-bottom:1px solid var(--ns-line);}
  .ns-tool .ns-tool-body table.ns-kv tr:last-child{border-bottom:0;}
  .ns-bits{font-size:13px;}
  .ns-tool .ns-table th,.ns-tool .ns-table td{padding:10px 12px;font-size:16px;}
  .ns-vlsm-head,.ns-vlsm-row{grid-template-columns:minmax(0,1fr) 104px 40px;}
  .ns-toolbar .ns-field{min-width:0;width:100%;}
  /* VLSM result table becomes stacked cards */
  .ns-tool .ns-tool-body table.ns-vlsm-table,
  .ns-tool .ns-tool-body table.ns-vlsm-table tbody,
  .ns-tool .ns-tool-body table.ns-vlsm-table tr,
  .ns-tool .ns-tool-body table.ns-vlsm-table th,
  .ns-tool .ns-tool-body table.ns-vlsm-table td{display:block;width:100%;}
  .ns-tool .ns-tool-body table.ns-vlsm-table thead{display:none;}
  .ns-tool .ns-tool-body table.ns-vlsm-table tr{border-bottom:1px solid var(--ns-line);padding:6px 0;}
  .ns-tool .ns-tool-body table.ns-vlsm-table tr:last-child{border-bottom:0;}
  .ns-tool .ns-tool-body table.ns-vlsm-table th,
  .ns-tool .ns-tool-body table.ns-vlsm-table td{border:0;padding:5px 14px;display:block;text-align:left;overflow-wrap:normal;min-width:0;}
  .ns-tool .ns-tool-body table.ns-vlsm-table td.ns-mono{font-size:16px;}
  .ns-tool .ns-tool-body table.ns-vlsm-table th::before,
  .ns-tool .ns-tool-body table.ns-vlsm-table td::before{content:attr(data-title);display:block;font:700 12px/1.5 'Manrope',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--ns-muted);}
  .ns-tool .ns-tool-body table.ns-vlsm-table th{font-size:20px;padding-top:10px;}
  .ns-range span{display:inline;}
  .ns-tool .ns-tool-body table.ns-vlsm-table td.ns-range span{display:block;}
}

/* ===== 1.1.0: code blocks, converter, IPv6, reference tools ===== */
.ns-tool select.ns-input{appearance:auto;-webkit-appearance:menulist;cursor:pointer;height:auto;}
.ns-tool input[type=search].ns-input{-webkit-appearance:none;appearance:none;}
.ns-divider{height:1px;background:var(--ns-line);margin:34px 0 24px;}
.ns-sub-first{margin-top:0;}
.ns-note-top{margin:0 0 4px;}
.ns-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 16px;}

.ns-code{border:1px solid var(--ns-line);border-radius:12px;margin:12px 0;overflow:hidden;background:var(--ns-panel);}
.ns-code-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:4px 8px 4px 16px;background:var(--ns-panel2);border-bottom:1px solid var(--ns-line);font-weight:700;font-size:15px;}
.ns-tool .ns-tool-body pre.ns-pre{margin:0;padding:14px 16px;background:transparent !important;border:0;border-radius:0;font:500 15px/1.6 var(--ns-mono);color:var(--ns-text);white-space:pre;overflow-x:auto;}

.ns-weights{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:6px;margin:4px 0 10px;}
.ns-weight{display:flex;flex-direction:column;align-items:center;border:1px solid var(--ns-line);border-radius:10px;padding:8px 0;background:var(--ns-panel2);font-family:var(--ns-mono);}
.ns-weight-w{font-size:14px;color:var(--ns-muted);}
.ns-weight-b{font-size:22px;font-weight:800;}
.ns-weight.ns-on{background:var(--ns-blue);border-color:var(--ns-blue);}
.ns-weight.ns-on .ns-weight-w{color:rgba(255,255,255,.85);}
.ns-weight.ns-on .ns-weight-b{color:#fff;}
.ns-steps p{margin:0;padding:2px 0;font-size:16px;}

/* reference tables */
.ns-tool .ns-tool-body table.ns-ref{table-layout:auto;}
.ns-ref thead th{background:var(--ns-panel2);color:var(--ns-muted);font:700 13px/1.3 'Manrope',sans-serif;letter-spacing:.08em;text-transform:uppercase;}
.ns-ref tbody th{width:1%;white-space:nowrap;font-weight:800;color:var(--ns-blue);}
.ns-ref-ad tbody th{text-align:right;}
.ns-ref-ad thead th:last-child{text-align:right;}
.ns-ref-note{display:block;font-size:14px;color:var(--ns-muted);font-weight:500;line-height:1.4;margin-top:2px;}

/* IOS cheat sheet */
.ns-cmds{border:1px solid var(--ns-line);border-radius:12px;overflow:hidden;}
.ns-cmd-row{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:6px 20px;align-items:center;padding:9px 16px;border-bottom:1px solid var(--ns-line);}
.ns-cmd-row:last-child{border-bottom:0;}
.ns-cmd-row:nth-child(even){background:var(--ns-panel2);}
.ns-tool .ns-tool-body code.ns-cmd{display:block;cursor:pointer;background:transparent !important;border:0;padding:2px 0;font:600 15px/1.45 var(--ns-mono);color:var(--ns-blue);word-break:break-word;white-space:normal;}
.ns-tool .ns-tool-body code.ns-cmd:hover{text-decoration:underline;}
.ns-tool .ns-tool-body code.ns-cmd:focus-visible{outline:2px solid var(--ns-blue);outline-offset:2px;border-radius:4px;}
.ns-tool .ns-tool-body code.ns-cmd.ns-copied{color:var(--ns-green);}
.ns-tool .ns-tool-body code.ns-cmd.ns-copied::after{content:" \2713 copied";font-family:'Manrope',sans-serif;font-weight:700;font-size:13px;}
.ns-cmd-desc{font-size:15px;color:var(--ns-muted);line-height:1.45;}

@media(max-width:620px){
  .ns-pair{grid-template-columns:minmax(0,1fr);}
  .ns-weights{gap:4px;}
  .ns-weight-b{font-size:18px;}
  .ns-weight-w{font-size:12px;}
  .ns-tool .ns-tool-body pre.ns-pre{font-size:13px;padding:12px;}
  .ns-cmd-row{grid-template-columns:minmax(0,1fr);gap:2px;padding:10px 12px;}
  .ns-tool .ns-table.ns-ref th,.ns-tool .ns-table.ns-ref td{padding:9px 10px;font-size:15px;}
  .ns-ref-note{font-size:13px;}
}

/* ===== 1.2.0: catalog page ===== */
.ns-index{font-size:17px;}
.ns-index-group{margin:28px 0 12px;font-size:15px;letter-spacing:.08em;text-transform:uppercase;color:var(--ns-muted);font-weight:700;}
.ns-index-group:first-child{margin-top:0;}
.ns-index-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;}
.ns-tool .ns-index-card,.ns-tool a.ns-index-card{display:flex;flex-direction:column;gap:8px;background:var(--ns-panel);border:1px solid var(--ns-line);border-radius:14px;padding:20px 22px;text-decoration:none !important;color:var(--ns-text) !important;transition:border-color .15s,transform .15s;}
.ns-tool a.ns-index-card:hover{border-color:var(--ns-blue);transform:translateY(-2px);}
.ns-index-title{font-weight:800;font-size:18px;line-height:1.3;}
.ns-index-text{color:var(--ns-muted);font-size:15px;line-height:1.5;flex:1;}
.ns-index-go{font-weight:700;font-size:15px;color:var(--ns-blue);}
.ns-index-off{opacity:.55;border-style:dashed !important;}
.ns-index-off .ns-index-go{color:var(--ns-muted);}
@media(max-width:900px){.ns-index-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:620px){.ns-index-grid{grid-template-columns:minmax(0,1fr);gap:12px;}.ns-tool .ns-index-card{padding:16px 18px;}}