@charset "UTF-8";.action-button{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;background:var(--bg-tertiary);border:1px solid var(--border-primary);border-radius:var(--radius-sm);color:var(--text-secondary);cursor:pointer;transition:all var(--transition-normal)}.action-button:hover{background:var(--bg-primary);color:var(--text-primary);border-color:var(--border-secondary)}.action-button:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}hr{border:none;border-top:1px solid var(--border-primary);margin:var(--spacing-md) 0 var(--spacing-lg)}.tabs{display:flex;gap:var(--spacing-xs);background-color:var(--bg-tertiary);border-radius:var(--radius-lg);padding:var(--spacing-xs);margin-bottom:var(--spacing-lg)}.tabs .tab{flex:1;padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-md);text-align:center;font-size:var(--font-size-sm);font-weight:500;transition:all var(--transition-fast)}.tabs .tab.active{background-color:var(--bg-secondary);color:var(--color-primary);box-shadow:var(--shadow-sm)}.form-group{margin-bottom:var(--spacing-md)}.form-group.inline{display:flex;align-items:end;gap:var(--spacing-sm)}.form-group.inline .form-field{flex:1}.info-panel{background:linear-gradient(135deg,var(--bg-tertiary),var(--bg-secondary));border:1px solid var(--border-secondary);border-radius:var(--radius-lg);padding:var(--spacing-md)}.info-panel h4{display:flex;align-items:center;gap:var(--spacing-xs)}.info-panel.success{border-color:var(--color-success);background:linear-gradient(135deg,color-mix(in srgb,var(--color-success),transparent 95%),color-mix(in srgb,var(--color-success),transparent 98%))}.info-panel.success h4{color:var(--color-success)}.info-panel.info{border-color:var(--color-info);background:linear-gradient(135deg,color-mix(in srgb,var(--color-info),transparent 95%),color-mix(in srgb,var(--color-info),transparent 98%))}.info-panel.info h4{color:var(--color-info)}.info-panel.warning{border-color:var(--color-warning);background:linear-gradient(135deg,color-mix(in srgb,var(--color-warning),transparent 95%),color-mix(in srgb,var(--color-warning),transparent 98%))}.info-panel.warning h4{color:var(--color-warning)}.info-panel.error{border-color:var(--color-error);background:linear-gradient(135deg,color-mix(in srgb,var(--color-error),transparent 95%),color-mix(in srgb,var(--color-error),transparent 98%))}.info-panel.error h4{color:var(--color-error)}.status{display:inline-flex;align-items:center;gap:var(--spacing-xs);font-size:var(--font-size-xs);font-weight:600;padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--radius-sm)}.status.success{color:var(--color-success-light);background-color:#23863626}.status.error{color:var(--color-error-light);background-color:#da363326}.status.warning{color:var(--color-warning-light);background-color:#d2992226}.status.info{color:var(--color-info-light);background-color:#0969da26}.loading{display:inline-flex;align-items:center;gap:var(--spacing-sm)}.loading .spinner{width:1rem;height:1rem;border:2px solid var(--border-primary);border-top:2px solid var(--color-primary);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes fadeIn{0%{opacity:0;transform:translateY(.5rem)}to{opacity:1;transform:translateY(0)}}.fade-in{animation:fadeIn .3s ease-out}.reference-card,.explainer-card,.info-card{background-color:var(--bg-secondary);border:1px solid var(--border-primary);border-radius:var(--radius-md);padding:var(--spacing-md);transition:all var(--transition-fast)}.reference-card:not(.no-hover):not(.info-card),.explainer-card:not(.no-hover):not(.info-card),.info-card:not(.no-hover):not(.info-card){cursor:help}.reference-card:not(.no-hover):not(.info-card):hover,.explainer-card:not(.no-hover):not(.info-card):hover,.info-card:not(.no-hover):not(.info-card):hover{box-shadow:var(--shadow-md);border-color:color-mix(in srgb,var(--color-primary) 33%,transparent)}.explainer-card:not(.no-hover):hover{transform:translateY(-2px)}.explainer-card h4{color:var(--color-primary);font-size:var(--font-size-md);margin-bottom:var(--spacing-sm);font-weight:600}.explainer-card p{color:var(--text-primary);font-size:var(--font-size-sm);line-height:1.6;margin:0}.form-field{min-width:250px}.form-field .field-input{position:relative;display:flex;align-items:center}.form-field .field-icon{position:absolute;right:var(--spacing-sm);top:50%;transform:translateY(-50%);pointer-events:none;opacity:.2}.form-field .field-error{color:var(--color-error-light);font-size:var(--font-size-xs);margin-top:var(--spacing-xs);margin-bottom:0}.form-field .field-help{color:var(--color-success-light);font-size:var(--font-size-xs);margin-top:var(--spacing-xs);margin-bottom:0}.form-field .status-icon{width:1.25rem;height:1.25rem;border-radius:50%;display:flex;align-items:center;justify-content:center}.form-field .status-icon svg{width:.75rem;height:.75rem;color:var(--bg-secondary)}.form-field .status-icon.success{background-color:var(--color-success)}.form-field .status-icon.error{background-color:var(--color-error)}.form-field .required{color:var(--color-error);margin-left:var(--spacing-xs)}@media (max-width: 768px){.form-field{min-width:auto}}.copy-btn{transition:all var(--transition-fast)}.copy-btn.copied{color:var(--color-success-light);background-color:#2386361a;border-color:var(--color-success);transform:scale(1.05)}.copy-btn.copied:hover{background-color:#23863633}.info-cards{display:grid;gap:var(--spacing-sm)}.info-card{background-color:var(--bg-tertiary);border:1px solid var(--border-secondary);border-radius:var(--radius-md);padding:var(--spacing-md);display:flex;justify-content:space-between;align-items:center}.info-card .info-label{font-size:var(--font-size-xs);font-weight:600;color:var(--text-secondary);margin:0}@media (max-width: 768px){.info-card{flex-direction:column;align-items:flex-start;gap:var(--spacing-xs)}}.value-copy{display:flex;align-items:center;gap:var(--spacing-sm);min-width:0;flex:1}.ip-value,.binary-value{font-family:var(--font-mono);font-size:var(--font-size-md);font-weight:500;padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--radius-sm);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}.ip-value.success,.binary-value.success{color:var(--color-success-light);background-color:#2386361a}.ip-value.error,.binary-value.error{color:var(--color-error-light);background-color:#da36331a}.ip-value.info,.binary-value.info{color:var(--color-info-light);background-color:#0969da1a}.ip-value.warning,.binary-value.warning{color:var(--color-warning-light);background-color:#d299221a}.binary-value{font-size:var(--font-size-sm)}.metric-value{font-family:var(--font-mono);font-size:var(--font-size-lg);font-weight:600}.metric-value.success{color:var(--color-success-light)}.metric-value.info{color:var(--color-info-light)}.cidr{font-size:var(--font-size-sm);color:var(--text-secondary);margin-left:var(--spacing-xs)}.checkbox-label{display:flex;align-items:center;gap:var(--spacing-sm);cursor:pointer}.checkbox-label input[type=checkbox]{appearance:none;width:.75rem;height:.75rem;padding:.75rem;border:2px solid var(--border-primary);border-radius:var(--radius-xs);background-color:var(--bg-primary);transition:all var(--transition-fast);flex-shrink:0;position:relative}.checkbox-label input[type=checkbox]:hover{border-color:var(--color-primary)}.checkbox-label input[type=checkbox]:focus{outline:2px solid color-mix(in srgb,var(--color-primary),transparent 70%);outline-offset:2px}.checkbox-label input[type=checkbox]:checked{background-color:var(--color-primary);border-color:var(--color-primary)}.checkbox-label input[type=checkbox]:checked:after{content:"✓";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:var(--bg-primary);font-size:1rem;font-weight:700;line-height:1}.checkbox-label input[type=checkbox]:disabled{opacity:.5;cursor:not-allowed}.checkbox-label .checkbox-text{display:flex;align-items:center;gap:var(--spacing-xs)}.checkbox-label .checkbox-text :global(.tooltip-trigger){color:var(--text-secondary);opacity:.7}.checkbox-label .checkbox-text :global(.tooltip-trigger):hover{opacity:1}