/* «Пинг онлайн» (/tools/ping/) и «Base64» (/tools/base64/): дополнения к общим .cvp-* (photo-tool.css). Переменные --c-* — у .cvp */
.net-card svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.net-form{display:flex;flex-direction:column;gap:12px;padding:clamp(18px,2.6vw,32px)}
.net-row{display:flex;gap:10px;flex-wrap:wrap}
.net-input{min-height:48px;padding:12px 16px;border:1px solid var(--c-ctl);border-radius:12px;background:#fff;font-family:var(--c-mono);font-size:16px;color:var(--c-ink);width:100%;box-sizing:border-box}
.net-row .net-input{flex:1 1 280px;width:auto}
.net-input:focus{border-color:var(--c-ink);outline:none}
.net-go{height:48px;padding:0 24px;font-size:15px}
.net-go[aria-busy=true]{opacity:.6;pointer-events:none}
.net-modes{display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px}
.net-modes .cvp-seg{flex-wrap:wrap}
.net-mode{display:inline-flex}
.net-mode input{position:absolute;opacity:0;pointer-events:none}
.net-mode span{display:inline-flex;align-items:center;height:36px;padding:0 14px;border-radius:999px;font-size:14px;font-weight:700;cursor:pointer;white-space:nowrap}
.net-mode span:hover{background:#fff}
.net-mode input:checked+span{background:var(--c-ink);color:#fff}
.net-mode input:focus-visible+span{outline:2px solid var(--c-ink);outline-offset:2px}
.net-res{display:flex;flex-direction:column;gap:16px;padding:clamp(18px,2.6vw,32px);border-top:1px solid var(--c-sep);background:#fbfcf9;scroll-margin-top:calc(var(--hdr-h,110px) + 16px)}
.net-res-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap}
.net-host{margin:4px 0 0;font-family:var(--c-mono);font-size:clamp(20px,3vw,30px);font-weight:700;overflow-wrap:anywhere}
.net-host small{font-size:.6em;font-weight:600;color:var(--c-mute)}
.net-badge{padding:6px 12px;border-radius:999px;font-size:13px;font-weight:800}
.net-ok{background:var(--c-lime);color:var(--c-ink)}
.net-bad{background:var(--c-err-bg);color:var(--c-err);box-shadow:inset 0 0 0 1px #f4c7c3}
.net-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.net-stats>div{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border:1px solid var(--c-line);border-radius:16px;background:#fff}
.net-stats span{font-size:13px;font-weight:600;color:var(--c-mute)}
.net-stats b{font-family:var(--c-mono);font-size:22px;font-weight:700}
.net-stats small{font-size:13px;font-weight:600;color:var(--c-mute)}
.net-warn{color:var(--c-err)!important}
.net-lines{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.net-lines li{display:flex;justify-content:space-between;gap:8px;padding:10px 14px;border-radius:12px;background:var(--c-track);font-size:14px}
.net-lines b{font-family:var(--c-mono)}
.net-facts{margin:0;display:flex;flex-direction:column;border-top:1px solid var(--c-sep)}
.net-facts>div{display:grid;grid-template-columns:150px minmax(0,1fr);gap:12px;padding:10px 0;border-bottom:1px solid var(--c-sep)}
.net-facts dt{font-size:14px;color:var(--c-mute);font-weight:600}
.net-facts dd{margin:0;font-size:15px;font-weight:700;overflow-wrap:anywhere}
.net-dim{color:var(--c-mute);font-weight:500}
.net-tip{margin:0;padding:12px 14px;border-radius:12px;background:var(--c-warn-bg);color:var(--c-warn);font-size:14px;line-height:1.45}
.net-tip a{color:inherit;font-weight:700}
.net-actions{display:flex;flex-wrap:wrap;gap:10px}
.net-actions .cvp-pill{text-decoration:none;color:var(--c-ink)}
.net-note{padding:16px clamp(18px,2.6vw,32px) 22px;border-top:1px solid var(--c-sep)}
/* Base64 */
.b64-tabs{display:flex;gap:4px;padding:clamp(14px,2vw,22px) clamp(18px,2.6vw,32px) 0}
.b64-tabs button{height:40px;padding:0 18px;border:0;border-radius:999px;background:var(--c-track);font-size:15px;font-weight:700;cursor:pointer}
.b64-tabs button[aria-selected=true]{background:var(--c-ink);color:#fff}
.b64-panel{padding:clamp(16px,2.4vw,28px) clamp(18px,2.6vw,32px);display:flex;flex-direction:column;gap:16px}
.b64-grid{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:16px;align-items:stretch}
.b64-grid-2{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(18px,3vw,36px)}
.b64-col{display:flex;flex-direction:column;gap:10px;min-width:0}
.b64-area{min-height:220px;resize:vertical;font-size:14px;line-height:1.5;overflow-wrap:anywhere}
.b64-area[readonly]{background:#fbfcf9}
.b64-mid{display:flex;flex-direction:column;justify-content:center;gap:10px}
.b64-mid .cvp-btn-lime{height:48px;padding:0 20px;font-size:15px}
.b64-mid .cvp-pill{justify-content:center}
.b64-out-act{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.b64-opts{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 24px;padding-top:14px;border-top:1px solid var(--c-sep)}
.b64-opt{display:flex;flex-direction:column;gap:6px}
.b64-select{min-height:42px;padding:8px 12px;font-family:inherit;font-size:14px;width:auto}
.b64-row{display:flex;flex-direction:column;gap:6px}
.b64-drop{display:flex;align-items:center;gap:14px;padding:18px;border:1.5px dashed var(--c-dash);border-radius:16px;background:#fbfcf9;cursor:pointer;font-weight:700}
.b64-drop.is-over,.b64-drop:hover{border-color:var(--c-ink);background:var(--c-pale)}
.b64-drop svg{width:26px;height:26px}
.b64-drop small{display:block;margin-top:2px;font-size:13px;font-weight:500;color:var(--c-ink2)}
.b64-prev{max-width:100%;max-height:220px;align-self:flex-start;border:1px solid var(--c-line);border-radius:12px;background:repeating-conic-gradient(#eef2e8 0 25%,#fff 0 50%) 0 0/16px 16px}
#b64-fmt{flex-wrap:wrap}
@media (max-width:900px){
  .b64-grid,.b64-grid-2{grid-template-columns:1fr}
  .b64-mid{flex-direction:row;flex-wrap:wrap}
  .net-stats,.net-lines{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:520px){
  .net-go,.b64-mid .cvp-btn-lime{width:100%}
  .net-facts>div{grid-template-columns:110px minmax(0,1fr)}
}