.tool-page{padding-block:var(--space-xl) var(--space-2xl)}.crumbs{display:flex;flex-wrap:wrap;gap:.5rem;font-size:.78rem;color:var(--text-faint);margin-bottom:var(--space-lg)}.crumbs a{color:var(--text-muted);transition:color .2s ease}.crumbs a:hover,.crumbs [aria-current]{color:var(--cyan)}.tool-head{max-width:48rem;margin-bottom:var(--space-2xl)}.tool-head h1{font-size:clamp(2rem,4.5vw,3rem);margin-block:var(--space-sm) var(--space-md)}.lead{color:var(--text-muted);font-size:1.08rem}.lead strong{color:var(--text);font-weight:600}.calc{display:grid;grid-template-columns:minmax(300px,380px) 1fr;gap:var(--space-lg);align-items:start}.calc-wide{display:grid;gap:var(--space-lg)}.results{display:grid;gap:var(--space-lg);min-width:0}.panel{background:var(--bg-card);border:1px solid var(--border-soft);border-radius:var(--radius-lg);padding:var(--space-lg)}.input-panel{position:sticky;top:88px;display:grid;gap:var(--space-lg)}.panel-title{font-size:.82rem;font-family:var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--text-faint);margin-bottom:var(--space-md)}.field{display:grid;gap:.5rem}.tool-page label{font-size:.9rem;font-weight:600;color:var(--text);display:flex;align-items:center;gap:.5rem}.tag{font-size:.78rem;color:var(--cyan);background:var(--cyan-glow);padding:.1rem .5rem;border-radius:999px;font-weight:600}.tool-page input[type=text],.tool-page input[type=number],.tool-page select,.tool-page textarea{width:100%;font-family:var(--font-mono);font-size:1rem;color:var(--text);background:#08101f;border:1px solid var(--border);border-radius:var(--radius-sm);padding:.65rem .8rem;transition:border-color .2s ease,box-shadow .2s ease}.tool-page textarea{resize:vertical;line-height:1.6}.tool-page input:focus-visible,.tool-page select:focus-visible,.tool-page textarea:focus-visible{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px var(--cyan-glow)}.tool-page select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--text-muted) 50%),linear-gradient(135deg,var(--text-muted) 50%,transparent 50%);background-position:calc(100% - 18px) 1.15rem,calc(100% - 13px) 1.15rem;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:2.2rem;cursor:pointer}.hint{font-size:.76rem;color:var(--text-faint)}.hint code{background:var(--bg-elev);border:1px solid var(--border-soft);border-radius:4px;padding:.05rem .35rem}.tool-page input[type=range]{width:100%;accent-color:var(--cyan);cursor:pointer}.slider-meta{display:flex;justify-content:space-between;font-size:.82rem;color:var(--text-muted)}.slider-meta .muted{color:var(--text-faint)}.presets{display:flex;flex-wrap:wrap;gap:.4rem}.preset{font-size:.78rem;font-family:var(--font-mono);color:var(--text-muted);background:var(--bg-elev);border:1px solid var(--border-soft);border-radius:var(--radius-sm);padding:.25rem .55rem;cursor:pointer;transition:border-color .18s ease,color .18s ease,background .18s ease}.preset:hover{border-color:var(--cyan);color:var(--cyan)}.preset[aria-pressed=true]{background:var(--cyan);border-color:var(--cyan);color:var(--navy);font-weight:600}.rows{display:grid;gap:.6rem}.input-row{display:grid;gap:.5rem;align-items:center;background:var(--bg-elev);border:1px solid var(--border-soft);border-radius:var(--radius-sm);padding:.6rem}.icon-btn{flex-shrink:0;width:34px;height:34px;display:grid;place-items:center;border-radius:var(--radius-sm);border:1px solid var(--border);background:transparent;color:var(--text-muted);cursor:pointer;font-size:1.1rem;line-height:1;transition:border-color .18s ease,color .18s ease,background .18s ease}.icon-btn:hover{border-color:var(--cyan);color:var(--cyan)}.icon-btn.danger:hover{border-color:#ff5f57;color:#ff8a8a}.err{font-size:.88rem;color:#ff8a8a;background:#ff5f5714;border:1px solid rgba(255,95,87,.3);border-radius:var(--radius-sm);padding:.6rem .8rem}.note{font-size:.82rem;color:var(--text-muted);background:var(--cyan-glow);border:1px solid var(--border);border-radius:var(--radius-sm);padding:.6rem .8rem}.results[data-invalid]{opacity:.45;filter:grayscale(.4);pointer-events:none}.term{background:#08101f;border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;box-shadow:0 20px 60px -20px #0009,0 0 0 1px var(--cyan-glow)}.term-bar{display:flex;align-items:center;gap:.4rem;padding:.7rem 1rem;background:#0c1730;border-bottom:1px solid var(--border-soft)}.dot{width:11px;height:11px;border-radius:50%;background:#2a3f63}.dot:nth-child(1){background:#ff5f57;opacity:.7}.dot:nth-child(2){background:#febc2e;opacity:.7}.dot:nth-child(3){background:#28c840;opacity:.7}.term-title{margin-left:auto;font-size:.78rem;color:var(--text-faint)}.term-copy{font-size:.74rem;font-family:var(--font-mono);color:var(--text-muted);background:transparent;border:1px solid var(--border);border-radius:var(--radius-sm);padding:.2rem .6rem;cursor:pointer;transition:border-color .18s ease,color .18s ease}.term-copy:hover{border-color:var(--cyan);color:var(--cyan)}.term-body{padding:1.4rem 1.5rem;font-family:var(--font-mono);font-size:.92rem;line-height:1.75;color:var(--text);overflow-x:auto;white-space:pre}.c-prompt{color:var(--cyan-dim)}.c-accent{color:var(--cyan);font-weight:600}.c-key{color:var(--text-faint);display:inline-block;width:13ch}.c-dim{color:var(--text-faint)}.c-warn{color:#febc2e}.c-bad{color:#ff8a8a}.c-ok{color:#6cf5ce}.cursor{color:var(--cyan);animation:blink 1.1s step-end infinite}@keyframes blink{50%{opacity:0}}.chips{display:flex;flex-wrap:wrap;gap:.6rem}.chip{display:flex;align-items:center;gap:.5rem;background:var(--bg-card);border:1px solid var(--border-soft);border-radius:var(--radius-sm);padding:.55rem .7rem}.chip-k{font-family:var(--font-mono);font-size:.7rem;color:var(--text-faint);min-width:6ch}.chip-v{font-family:var(--font-mono);font-size:.92rem;color:var(--text);white-space:nowrap}.chip-copy{flex-shrink:0;width:26px;height:26px;border-radius:var(--radius-sm);border:1px solid var(--border);background:transparent;color:var(--text-muted);cursor:pointer;display:grid;place-items:center;transition:border-color .18s ease,color .18s ease,background .18s ease}.chip-copy:before{content:"⧉";font-size:.95rem;line-height:1}.chip-copy:hover{border-color:var(--cyan);color:var(--cyan)}.chip-copy.ok{border-color:var(--cyan);color:var(--cyan);background:var(--cyan-glow)}.chip-copy.ok:before{content:"✓"}.stat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:var(--space-md)}.stat{background:var(--bg-card);border:1px solid var(--border-soft);border-radius:var(--radius);padding:var(--space-md)}.stat-k{font-family:var(--font-mono);font-size:.7rem;color:var(--text-faint);text-transform:uppercase;letter-spacing:.06em}.stat-v{font-size:1.45rem;font-weight:800;margin-top:.25rem;line-height:1.1}.stat-v.accent{color:var(--cyan)}.stat-v.warn{color:#febc2e}.stat-v.bad{color:#ff8a8a}.stat-sub{font-size:.78rem;color:var(--text-muted);margin-top:.25rem}.meter{display:grid;gap:.4rem}.meter-head{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:.82rem;color:var(--text-muted)}.meter-track{height:14px;background:var(--bg-elev);border:1px solid var(--border-soft);border-radius:999px;overflow:hidden}.meter-fill{height:100%;width:0;background:var(--cyan);border-radius:999px;transition:width .35s ease,background .25s ease}.meter.warn .meter-fill{background:#febc2e}.meter.over .meter-fill{background:#ff5f57}.table-wrap{overflow-x:auto;border-radius:var(--radius-sm);scrollbar-width:thin;scrollbar-color:var(--border) transparent}.table-wrap::-webkit-scrollbar{height:8px}.table-wrap::-webkit-scrollbar-track{background:transparent}.table-wrap::-webkit-scrollbar-thumb{background:var(--border);border-radius:999px}.table-wrap::-webkit-scrollbar-thumb:hover{background:var(--cyan-dim)}.data-table{width:100%;border-collapse:collapse;font-size:.86rem}.data-table th,.data-table td{text-align:left;padding:.55rem .7rem;border-bottom:1px solid var(--border-soft);white-space:nowrap}.data-table th{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text-faint);font-weight:600}.data-table td.num,.data-table td.ip{font-family:var(--font-mono)}.data-table td.ip{color:var(--cyan)}.data-table tr:last-child td{border-bottom:none}.data-table tbody tr:hover{background:var(--bg-elev)}.data-table tr.row-click{cursor:pointer}.data-table tr.nofit td,.data-table tr.bad td{color:#ff8a8a}.data-table tr.warn td{color:#febc2e}.vlsm-summary{margin-top:var(--space-md);font-family:var(--font-mono);font-size:.82rem;color:var(--text-muted)}.vlsm-summary strong{color:var(--cyan)}.bin{display:grid;gap:.45rem}.bin-row{display:grid;grid-template-columns:9ch 1fr auto;gap:.8rem;align-items:baseline}.bin-k{font-family:var(--font-mono);font-size:.8rem;color:var(--text-faint)}.bin-bits{font-family:var(--font-mono);font-size:.86rem;letter-spacing:.04em;overflow-x:auto;white-space:nowrap}.bin-dec{font-family:var(--font-mono);font-size:.82rem;color:var(--text-muted);text-align:right;white-space:nowrap}.bit-net{color:var(--cyan)}.bit-host{color:var(--text-faint)}.bit-dot{color:var(--border);padding-inline:.1rem}.bin-legend{margin-top:var(--space-md);font-size:.74rem;color:var(--text-faint);display:flex;align-items:center;gap:.4rem}.swatch{width:10px;height:10px;border-radius:2px;display:inline-block}.swatch.bit-net{background:var(--cyan)}.swatch.bit-host{background:var(--text-faint);margin-left:.8rem}details.fold{border:1px solid var(--border-soft);border-radius:var(--radius);background:var(--bg-card);padding:0 var(--space-lg)}details.fold>summary{cursor:pointer;list-style:none;padding:var(--space-md) 0;font-family:var(--font-mono);font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);display:flex;align-items:center;gap:.5rem}details.fold>summary::-webkit-details-marker{display:none}details.fold>summary:before{content:"▸";color:var(--cyan);transition:transform .2s ease}details.fold[open]>summary:before{transform:rotate(90deg)}details.fold>summary:hover{color:var(--cyan)}details.fold>*:not(summary){padding-bottom:var(--space-lg)}.footnote{text-align:center;font-size:.74rem;color:var(--text-faint);margin-top:var(--space-md)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media (max-width: 900px){.calc{grid-template-columns:1fr}.input-panel{position:static}}