.tool-page{padding:28px 36px;max-width:1100px}@media (max-width:1024px){.tool-page{padding:20px 24px}}@media (max-width:768px){.tool-page{padding:16px 14px;max-width:100%}.results-strip{grid-template-columns:repeat(2,1fr)}}.tool-page h1{font-size:22px;font-weight:var(--font-weight-bold);color:var(--color-text-primary);margin-bottom:6px;letter-spacing:-.3px}.tool-desc{color:var(--color-text-secondary);margin-bottom:28px;line-height:1.7;max-width:640px}.mono-inline,.tool-desc{font-size:var(--font-size-sm)}.mono-inline{font-family:var(--font-mono);background:var(--color-bg-tertiary);padding:1px 6px;border-radius:var(--radius-sm);color:var(--color-blue)}.input-row{gap:var(--space-4);margin-bottom:28px}.input-row,.lookupRow{display:flex;flex-wrap:wrap;align-items:flex-end;max-width:640px}.lookupRow{gap:var(--space-3);margin-bottom:var(--space-4)}.lookupRow>.mono-input{flex:1 1;width:auto}.lookupRow>.input-group{flex:1 1}.lookupRow>.input-group>.mono-input{width:100%}@media (max-width:600px){.lookupRow{flex-direction:column;align-items:stretch;max-width:100%}}.input-group{display:flex;flex-direction:column;gap:6px}.input-group label{font-size:10px;font-weight:var(--font-weight-semibold);letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-secondary)}.mono-input{font-family:var(--font-mono);font-size:14px;background:var(--color-bg-secondary);border:1px solid var(--color-border);color:var(--color-text-primary);padding:8px 12px;height:38px;border-radius:var(--radius-md);outline:none;transition:border-color var(--transition-fast),box-shadow var(--transition-fast);width:220px}.mono-input:focus{border-color:var(--color-blue);box-shadow:var(--shadow-blue)}.mono-input::placeholder{color:var(--color-text-tertiary)}.prefix-wrap{display:flex;align-items:center}.prefix-slash{font-family:var(--font-mono);font-size:18px;color:var(--color-blue);padding:0 6px 0 2px;line-height:1}.prefix-wrap .mono-input{width:90px}.error-msg{color:var(--color-red);font-size:var(--font-size-sm);margin-bottom:20px;padding:10px 14px;background:rgba(248,81,73,.08);border:1px solid rgba(248,81,73,.2);border-radius:var(--radius-md);max-width:640px}.results-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--color-border);border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;margin-bottom:var(--space-2)}.results-actions{display:flex;justify-content:flex-end;margin-bottom:var(--space-4)}.result-item{background:var(--color-bg-secondary);padding:8px 12px;display:flex;flex-direction:column;gap:3px;min-width:120px}.result-label{font-size:10px;font-weight:var(--font-weight-semibold);letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-tertiary);white-space:nowrap}.result-value{font-family:var(--font-mono);font-size:13px;color:var(--color-text-primary);font-weight:var(--font-weight-medium);white-space:nowrap}.result-value.accent{color:var(--color-blue)}.share-btn{font-size:11px;padding:4px 12px;background:var(--color-bg-secondary);border:1px solid var(--color-border);color:var(--color-text-secondary);border-radius:var(--radius-sm);cursor:pointer;font-family:var(--font-sans);transition:border-color var(--transition-fast),color var(--transition-fast);white-space:nowrap}.share-btn:hover{border-color:var(--color-blue);color:var(--color-blue)}.share-btn.copied{border-color:var(--color-green);color:var(--color-green)}.binary-collapse-row{margin:6px 0 0}.binary-toggle-btn{background:none;border:none;cursor:pointer;font-size:11px;color:var(--color-text-secondary);font-family:var(--font-sans);padding:4px 0;display:flex;align-items:center;gap:6px;transition:color var(--transition-fast)}.binary-toggle-btn:hover{color:var(--color-blue)}.binary-toggle-hint{font-size:10px;color:var(--color-text-secondary);opacity:.6}.binary-section{margin-top:10px}.binary-table{background:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden}.binary-row{display:grid;grid-template-columns:158px 1fr;border-bottom:1px solid var(--color-border)}.binary-row:last-of-type{border-bottom:none}.binary-row-label{font-size:10px;font-weight:var(--font-weight-semibold);text-transform:uppercase;color:var(--color-text-secondary);border-right:1px solid var(--color-border)}.binary-bits,.binary-row-label{letter-spacing:.06em;padding:12px 14px;display:flex;align-items:center}.binary-bits{font-family:var(--font-mono);font-size:13px;gap:2px;flex-wrap:wrap}.bit-octet{display:inline-flex}.bit-sep{color:var(--color-border);margin:0 5px}.net-bit{color:var(--color-blue)}.host-bit{color:var(--color-text-tertiary)}.binary-legend{display:flex;gap:20px;padding:10px 14px;background:var(--color-bg-tertiary);border-top:1px solid var(--color-border);font-size:11px}.legend-item{display:flex;align-items:center;gap:6px;color:var(--color-text-secondary)}.legend-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.legend-dot.net{background:var(--color-blue)}.legend-dot.host{background:var(--color-text-tertiary)}.subnet-tree-section{margin-top:36px}.subnet-mobile-tip{display:none;font-size:var(--font-size-xs);color:var(--color-text-secondary);background:var(--color-bg-tertiary);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-2) var(--space-4);margin-bottom:var(--space-3)}@media (max-width:768px){.subnet-mobile-tip{display:block}}.subnet-tree-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:10px}.tree-section-label{font-size:10px;font-weight:var(--font-weight-semibold);letter-spacing:.1em;text-transform:uppercase;color:var(--color-text-secondary);flex-shrink:0}.tree-toolbar-right{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.tree-show-label{font-size:10px;font-weight:var(--font-weight-semibold);letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-secondary)}.tree-col-toggle{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--color-text-secondary);cursor:pointer;-webkit-user-select:none;user-select:none}.tree-col-toggle input{cursor:pointer;accent-color:var(--color-blue)}.tree-col-toggle:hover span{color:var(--color-text-primary)}.tree-hist-btns{display:flex;gap:4px;margin-right:4px}.tree-hist-btn{font-size:15px;padding:3px 10px;border-radius:var(--radius-sm);cursor:pointer;font-family:var(--font-mono);background:var(--color-bg-tertiary);border:1px solid var(--color-border);color:var(--color-text-primary);line-height:1.2;transition:border-color var(--transition-fast),color var(--transition-fast),background var(--transition-fast)}.tree-hist-btn:hover:not(:disabled){background:var(--color-blue-glow);border-color:var(--color-blue);color:var(--color-blue)}.tree-hist-btn:disabled{opacity:.35;cursor:not-allowed}.tree-hist-btn--active{background:var(--color-blue-glow);border-color:var(--color-blue);color:var(--color-blue)}.tree-cloud-btn{font-size:11px;padding:3px 7px;font-family:var(--font-sans)}.tree-reserved-badge{font-size:9px;color:var(--color-text-secondary);margin-left:2px;opacity:.75}.tree-too-small{font-size:10px;color:var(--color-red);font-family:var(--font-sans);font-weight:var(--font-weight-semibold);letter-spacing:.02em}.td-too-small{background:rgba(248,81,73,.06)}.td-notes{padding:2px 6px}.tree-note-input{width:100%;font-size:11px;font-family:var(--font-sans);background:transparent;border:1px solid transparent;border-radius:var(--radius-sm);color:var(--color-text-primary);padding:3px 5px;outline:none;transition:border-color var(--transition-fast)}.tree-note-input::placeholder{color:var(--color-text-secondary);opacity:.5}.tree-note-input:hover{border-color:var(--color-border)}.tree-note-input:focus{border-color:var(--color-blue);background:var(--color-bg-tertiary)}.tree-reset-btn{font-size:11px;padding:3px 10px;border-radius:var(--radius-sm);cursor:pointer;font-family:var(--font-sans);background:transparent;border:1px solid var(--color-border);color:var(--color-text-secondary);transition:border-color var(--transition-fast),color var(--transition-fast)}.tree-reset-btn:hover{border-color:var(--color-blue);color:var(--color-blue)}.tree-export-btn{font-size:11px;padding:3px 10px;border-radius:var(--radius-sm);cursor:pointer;font-family:var(--font-sans);background:transparent;border:1px solid rgba(63,185,80,.4);color:var(--color-green);transition:border-color var(--transition-fast),background var(--transition-fast)}.tree-export-btn:hover{border-color:var(--color-green);background:rgba(63,185,80,.08)}.subnet-tree-wrap{overflow-x:auto}.subnet-tree-table{width:100%;table-layout:fixed;border-collapse:collapse;background:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden}.subnet-tree-table th{font-size:9px;font-weight:var(--font-weight-semibold);letter-spacing:.1em;text-transform:uppercase;color:var(--color-text-secondary);background:var(--color-bg-tertiary);padding:9px 10px;text-align:left;border-bottom:1px solid var(--color-border);border-right:1px solid var(--color-border)}.subnet-tree-table th:last-child{border-right:none}.th-num{text-align:right;padding-right:12px}.th-center{text-align:center}.subnet-tree-table td{padding:7px 10px;border-bottom:1px solid rgba(48,54,61,.7);border-right:1px solid rgba(48,54,61,.4);font-family:var(--font-mono);font-size:12px;color:var(--color-text-primary);vertical-align:middle}.subnet-tree-table tr:last-child td{border-bottom:none}.td-subnet{color:var(--color-blue);font-weight:var(--font-weight-medium);white-space:nowrap}.td-mono{color:var(--color-text-primary);white-space:nowrap}.td-range{overflow:hidden;padding:5px 10px!important;vertical-align:middle}.range-from{font-size:11px;color:var(--color-text-primary);line-height:1.5}.range-from,.range-to{display:block;font-family:var(--font-mono);white-space:nowrap}.range-to{font-size:10px;color:var(--color-text-secondary);line-height:1.4}.td-num{text-align:right;padding-right:12px;min-width:60px}.td-center{text-align:center;min-width:64px}.divide-action-btn{font-size:11px;font-family:var(--font-sans);padding:2px 9px;border-radius:var(--radius-sm);cursor:pointer;background:transparent;border:1px solid rgba(0,170,255,.4);color:var(--color-blue);transition:background var(--transition-fast),border-color var(--transition-fast);white-space:nowrap}.divide-action-btn:hover{background:var(--color-blue-glow);border-color:var(--color-blue)}.tree-action-disabled{color:var(--color-border);font-family:var(--font-sans);font-size:11px}.join-cell{background:var(--color-bg-tertiary);padding:0!important;border-right:1px solid var(--color-border)!important;position:relative}.join-cell--joinable{background:rgba(0,170,255,.08);border-left:1px solid rgba(0,170,255,.3)!important;cursor:pointer;transition:background var(--transition-fast)}.join-cell--joinable:hover{background:var(--color-blue-glow)}.join-label{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--font-mono);font-size:9px;color:var(--color-blue);opacity:.8;white-space:nowrap;overflow:hidden;line-height:1;pointer-events:none}.not-found{padding-top:60px}.nf-code{font-family:var(--font-mono);font-size:72px;font-weight:var(--font-weight-bold);color:var(--color-border);line-height:1;margin-bottom:16px}.nf-link{display:inline-block;margin-top:20px;font-size:var(--font-size-sm);color:var(--color-blue);text-decoration:none}.nf-link:hover{text-decoration:underline}.ip-loading{display:flex;align-items:center;gap:12px;color:var(--color-text-secondary);font-size:var(--font-size-sm);padding:40px 0}.ip-spinner{width:18px;height:18px;border:2px solid var(--color-border);border-top-color:var(--color-blue);border-radius:50%;animation:vl-spin .7s linear infinite}.ip-hero{background:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:28px 32px;margin-bottom:16px;display:flex;flex-direction:column;gap:10px}.ip-address{font-family:var(--font-mono);font-size:36px;font-weight:var(--font-weight-semibold);color:var(--color-blue);letter-spacing:-.5px;line-height:1}.ip-dual{flex-direction:column}.ip-dual,.ip-dual-row{display:flex;gap:var(--space-3)}.ip-dual-row{align-items:center;flex-wrap:wrap}.ip-address-v4{font-size:28px;color:var(--color-blue);letter-spacing:-.4px;line-height:1}.ip-address-v4,.ip-address-v6{font-family:var(--font-mono);font-weight:var(--font-weight-semibold)}.ip-address-v6{font-size:16px;color:var(--color-teal);letter-spacing:-.2px;line-height:1.3;word-break:break-all}.ip-hero-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.ip-type{font-size:11px;font-weight:var(--font-weight-semibold);letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-secondary);background:var(--color-bg-tertiary);padding:2px 8px;border-radius:var(--radius-sm)}.ip-country{font-size:14px;color:var(--color-text-primary)}.ip-copy-group{display:flex;gap:var(--space-2)}.ip-copy-btn{font-size:11px;padding:4px 12px;background:transparent;border:1px solid var(--color-border);color:var(--color-text-secondary);border-radius:var(--radius-sm);cursor:pointer;font-family:var(--font-sans);transition:border-color var(--transition-fast),color var(--transition-fast);margin-left:auto}.ip-copy-btn:hover{border-color:var(--color-blue);color:var(--color-blue)}.ip-copy-btn.copied{border-color:var(--color-green);color:var(--color-green)}.ip-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:1px;background:var(--color-border);border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;margin-bottom:16px}.ip-field{background:var(--color-bg-secondary);padding:12px 16px;display:flex;flex-direction:column;gap:4px}.ip-field-label{font-size:9px;font-weight:var(--font-weight-semibold);letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-secondary)}.ip-field-value{color:var(--color-text-primary);word-break:break-word}.ip-field-value,.ip-field-value.mono{font-size:var(--font-size-sm);overflow-wrap:break-word}.ip-field-value.mono{font-family:var(--font-mono);word-break:break-all}.ip-field-empty{color:var(--color-text-tertiary)}.ip-pills{display:flex;flex-wrap:wrap;gap:8px}.ip-pill{font-size:12px;padding:5px 14px;border-radius:var(--radius-full);border:1px solid var(--color-border);color:var(--color-text-secondary);background:var(--color-bg-secondary)}.ip-pill--on{border-color:rgba(0,170,255,.3);background:var(--color-blue-glow)}.ip-link,.ip-pill--on{color:var(--color-blue)}.ip-link{text-decoration:none;font-family:var(--font-mono);font-size:inherit}.ip-link:hover{text-decoration:underline}.examples-row{display:flex;align-items:center;gap:var(--space-2);margin-bottom:var(--space-5);flex-wrap:wrap}.examples-label{font-weight:var(--font-weight-semibold);letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-tertiary);flex-shrink:0}.ex-btn,.examples-label{font-size:var(--font-size-xs)}.ex-btn{font-family:var(--font-mono);padding:3px 9px;background:transparent;border:1px solid var(--color-border);color:var(--color-text-secondary);border-radius:var(--radius-sm);cursor:pointer;transition:border-color var(--transition-fast),color var(--transition-fast)}.ex-btn:hover{border-color:var(--color-blue);color:var(--color-blue)}.cloud-mode-row{display:flex;align-items:center;gap:4px;margin-top:-4px;margin-bottom:16px;flex-wrap:wrap}.cloud-mode-label{font-size:10px;font-weight:var(--font-weight-semibold);text-transform:uppercase;letter-spacing:.08em;color:var(--color-text-tertiary);margin-right:4px}.cloud-mode-btn{padding:2px 8px;font-size:11px;font-weight:500;background:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-sm);color:var(--color-text-secondary);cursor:pointer;transition:color .15s,border-color .15s}.cloud-mode-btn:hover{color:var(--color-blue);border-color:var(--color-blue)}.cloud-mode-active{background:rgba(0,170,255,.1);border-color:rgba(0,170,255,.4);color:var(--color-blue)}.seo-content{margin-top:48px;padding-top:32px;border-top:1px solid var(--color-border);max-width:740px}.seo-content h2{font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);color:var(--color-text-secondary);margin-bottom:var(--space-3);margin-top:var(--space-6)}.seo-content h2:first-child{margin-top:0}.seo-content p{font-size:var(--font-size-sm);color:var(--color-text-tertiary);line-height:1.8;margin-bottom:var(--space-4)}@media (max-width:768px){.mono-input{width:100%}.input-row{flex-direction:column;align-items:stretch}.binary-row{grid-template-columns:100px 1fr}.binary-bits{font-size:11px}.subnet-tree-wrap{overflow-x:auto}.results-strip .result-item{min-width:90px}.tool-page{padding:16px 14px;max-width:100%}}.btn-primary{height:38px;min-width:150px;padding:0 24px;background:var(--color-blue);color:var(--color-text-inverse);border:none;border-radius:var(--radius-md);font-size:var(--font-size-base);font-weight:600;cursor:pointer;flex-shrink:0;align-self:flex-end;transition:opacity var(--transition-fast),transform var(--transition-fast),box-shadow var(--transition-fast)}.btn-primary:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 6px 22px var(--color-blue-glow)}.btn-primary:disabled{opacity:.35;cursor:not-allowed}.btn-secondary{height:38px;padding:0 16px;background:transparent;color:var(--color-text-secondary);border:1px solid var(--color-border);border-radius:var(--radius-md);font-size:var(--font-size-base);font-weight:400;cursor:pointer;flex-shrink:0;align-self:flex-end;transition:border-color var(--transition-fast)}.btn-secondary:hover{border-color:var(--color-text-secondary)}.btn-danger{height:38px;padding:0 24px;background:var(--color-red);color:#fff;border:none;border-radius:var(--radius-md);font-size:var(--font-size-base);font-weight:600;cursor:pointer;flex-shrink:0;align-self:flex-end}