.ip-subnet{--ip-accent:#633ee5;min-width:0}.ip-subnet [hidden]{display:none!important}.ip-subnet fieldset{border:0;padding:0;margin:0 0 20px;min-width:0}.ip-subnet legend{font-weight:700;margin-bottom:10px}.ip-subnet .ip-modes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.ip-subnet .ip-modes legend{grid-column:1/-1}.ip-modes label{position:relative;display:flex;min-width:0}.ip-modes input{position:absolute;opacity:0}.ip-modes span{width:100%;padding:12px 8px;border:1px solid #ddd7ed;border-radius:10px;text-align:center;font-weight:700;background:#faf9fe}.ip-modes input:checked+span{color:#fff;background:var(--ip-accent);border-color:var(--ip-accent)}.ip-modes input:focus-visible+span{outline:3px solid #a99be8;outline-offset:3px}.ip-subnet .calc-form{display:block}.ip-subnet .field{display:flex;flex-direction:column;gap:6px;min-width:0;margin-bottom:14px}.ip-subnet .field input,.ip-subnet .field select,.ip-pagination input{width:100%;box-sizing:border-box;min-width:0;border:1px solid #d7d1e5;border-radius:10px;padding:12px;font:inherit;font-size:16px;background:#fff}.ip-subnet .field input:focus,.ip-subnet .field select:focus{outline:3px solid #e0d8ff;border-color:var(--ip-accent)}.ip-subnet .field small,.ip-help{color:#746f87;font-size:13px;line-height:1.6}.ip-input-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.ip-help{margin:0 0 14px}.ip-examples,.ip-actions{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0}.ip-subnet .calculate-button{width:100%;margin:0;min-height:48px}.ip-requirement{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(80px,.65fr) minmax(0,1.2fr) auto;gap:10px;align-items:end;border-bottom:1px solid #ece7f5;margin-bottom:12px;padding-bottom:12px}.ip-requirement .field{margin:0}.ip-requirement button{align-self:end;min-height:46px}.ip-primary,.ip-details{display:grid;grid-template-columns:minmax(120px,.7fr) minmax(0,1.3fr);gap:0;margin:14px 0}.ip-primary dt,.ip-primary dd,.ip-details dt,.ip-details dd{margin:0;padding:11px 0;border-bottom:1px solid #e7e2f1;min-width:0}.ip-primary dt,.ip-details dt{color:#746f87;padding-right:12px}.ip-primary dd,.ip-details dd{display:flex;justify-content:space-between;align-items:center;gap:8px;overflow-wrap:anywhere}.ip-primary dd{font-weight:700}.ip-copy{background:transparent;color:#633ee5;border:1px solid #ddd4f4;border-radius:7px;padding:5px 7px;font:inherit;font-size:12px;cursor:pointer;flex:none}.ip-copy:disabled{opacity:.45}.ip-subnet details{border:1px solid #e3ddf0;border-radius:12px;padding:14px;margin:16px 0}.ip-subnet summary{cursor:pointer;font-weight:700}.ip-binary{display:block;overflow-wrap:anywhere;word-break:break-all;font-size:14px;line-height:1.8;letter-spacing:1px;padding:10px;background:#faf9fd;border-radius:8px}.ip-bits-network{color:#5937c7;background:#ebe5ff}.ip-bits-host{color:#075f6d;background:#dff6f2}.ip-bit-key{font-size:13px}.ip-classification{padding:12px;background:#f6f4fa;border-radius:10px;margin-top:16px;font-size:14px;overflow-wrap:anywhere}.ip-classification p{margin:0 0 8px}.ip-classification small{color:#746f87}.ip-table-scroll{max-width:100%;overflow-x:auto;border:1px solid #e7e2f1;border-radius:10px;margin-top:18px}.ip-table{border-collapse:collapse;width:100%;font-size:13px}.ip-table th,.ip-table td{padding:12px 10px;text-align:left;vertical-align:top;border-bottom:1px solid #e7e2f1;white-space:nowrap}.ip-table th{background:#f7f5fb;color:#59516e}.ip-table td:first-child{white-space:normal;min-width:50px;max-width:200px;overflow-wrap:anywhere}.ip-table td:nth-child(2){font-weight:600}.ip-remaining{display:flex;flex-wrap:wrap;gap:8px}.ip-remaining code{padding:7px 10px;background:#f4f1fa;border-radius:7px;overflow-wrap:anywhere;max-width:100%}.ip-pagination{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:14px 0;font-size:13px}.ip-pagination label{display:flex;gap:8px;align-items:center;min-width:0}.ip-pagination input{width:180px;padding:8px}.ip-subnet [data-ip-manual-copy]{box-sizing:border-box;width:100%;min-height:130px;font-family:monospace}.ip-allocation{display:flex;width:100%;height:38px;margin:18px 0;border:1px solid #dad2ec;border-radius:8px}.ip-allocation-segment{background:#633ee5;color:#fff;font-size:13px;text-align:center;overflow:hidden;line-height:38px;border-right:1px solid #fff;box-sizing:border-box}.ip-allocation-segment:nth-child(2n){background:#226b79}.ip-allocation-free{background:#e7e2f1!important;color:#59516e;border:0}.ip-privacy{padding:12px;border-left:3px solid #633ee5;background:#f7f5fc;font-size:13px;line-height:1.7}.ip-stale{padding:12px;border-left:3px solid #ab7212;background:#fff6df}.ip-subnet :is(button,a,input,select):focus-visible{outline:3px solid #b8a9f3;outline-offset:2px}.ip-subnet :is(.result-note,td,p){overflow-wrap:anywhere}
@media(max-width:767px){.ip-requirement{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.ip-requirement .field:first-child{grid-column:1/-1}.ip-requirement .field:nth-child(3){grid-column:1/-1}.ip-requirement button{justify-self:start}.ip-subnet .ip-primary,.ip-subnet .ip-details{grid-template-columns:minmax(95px,.75fr) minmax(0,1.25fr)}}
@media(max-width:420px){.ip-subnet .ip-modes{grid-template-columns:1fr}.ip-input-grid{grid-template-columns:1fr;gap:0}.ip-primary,.ip-details{display:block!important}.ip-primary dt,.ip-details dt{border-bottom:0;padding-bottom:3px}.ip-primary dd,.ip-details dd{padding-top:0}.ip-pagination label{width:100%;flex-wrap:wrap}.ip-pagination input{width:100%}.ip-subnet .ip-actions button{flex:1 1 45%}.ip-subnet .ip-copy{font-size:11px}}

.ip-subnet #calculator-result{scroll-margin-top:90px}