@keyframes port-spin{to{transform:rotate(360deg)}}.port-tabs{display:flex;gap:4px;margin-bottom:20px;background:var(--panel-solid);border:1px solid var(--border);border-radius:10px;padding:4px}.port-tab{flex:1;background:0 0;border:0;padding:10px 16px;font-size:13px;font-weight:500;color:var(--text-3);cursor:pointer;border-radius:7px;transition:all var(--transition)}.port-tab.active{background:var(--active-bg);color:var(--accent);font-weight:600}.port-tab:hover:not(.active){color:var(--text)}.port-panel[hidden]{display:none}#commonForm,#rangeForm,#singleForm{width:100%;background:var(--panel-solid);border:1px solid var(--border);border-radius:12px;padding:18px 20px;margin-bottom:28px}.port-field-group,.port-input-row{display:flex;gap:8px;align-items:center}.port-field-group{position:relative;flex:1;min-width:0;gap:10px}.port-options-row{display:flex;gap:12px;margin-top:14px}.port-field-group .input-wrapper,.port-option-group{flex:1;min-width:0}.port-error{margin-top:1rem;padding:.75rem 1rem;border-radius:8px;background:var(--danger-bg);border:1px solid var(--danger-border);color:#f87171;font-size:.875rem}.port-error[hidden],.port-loader[hidden]{display:none}.port-loader{display:flex;align-items:center;gap:.75rem;padding:1.5rem;color:var(--text-2);font-size:.9375rem}.port-spinner{width:20px;height:20px;border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:port-spin .6s linear infinite}.port-single-result{display:flex;flex-direction:column;gap:1rem;padding:1.25rem 0}.port-status-banner{display:flex;align-items:center;gap:1rem;padding:1rem 1.25rem;border-radius:10px;font-weight:600;font-size:1.125rem}.port-status-banner.open{background:rgb(16 185 129/.08);border:1px solid rgb(16 185 129/.25);color:#34d399}.port-status-banner.closed{background:var(--danger-bg);border:1px solid var(--danger-border);color:#f87171}.port-status-icon{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:1.25rem;flex-shrink:0}.port-status-banner.open .port-status-icon{background:rgb(16 185 129/.15)}.port-status-banner.closed .port-status-icon{background:rgb(239 68 68/.15)}.port-details-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.5rem}.port-detail{display:flex;flex-direction:column;gap:.125rem;padding:.625rem .75rem;background:var(--panel-solid);border-radius:8px}.port-detail-label{font-size:.75rem;color:var(--text-2);text-transform:uppercase;letter-spacing:.04em}.port-detail-value{font-size:.9375rem;font-weight:500;color:var(--text);font-family:var(--font-mono)}.port-scan-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;margin-bottom:1rem}.port-scan-stat{text-align:center;padding:.75rem .5rem;background:var(--panel-solid);border-radius:8px}.port-scan-stat-value{font-size:1.5rem;font-weight:700;font-family:var(--font-mono);line-height:1.2}.port-scan-stat-value.open{color:#34d399}.port-scan-stat-value.closed{color:#f87171}.port-scan-stat-label{font-size:.75rem;color:var(--text-2);margin-top:.125rem}.port-results-list{display:flex;flex-direction:column;gap:.375rem;max-height:400px;overflow-y:auto}.port-result-row{display:flex;align-items:center;justify-content:space-between;padding:.5rem .75rem;background:var(--panel-solid);border-radius:6px;border-left:3px solid transparent}.port-result-row.open{border-left-color:#34d399}.port-result-row.closed{border-left-color:#f87171}.port-result-info{display:flex;align-items:center;gap:.75rem}.port-result-number{font-family:var(--font-mono);font-weight:600;font-size:.9375rem;color:var(--text);min-width:3.5rem}.port-result-service,.port-result-time{color:var(--text-2);font-size:.875rem}.port-result-time{font-family:var(--font-mono);font-size:.8125rem}.port-result-status{font-size:.8125rem;font-weight:500;padding:.125rem .5rem;border-radius:4px}.port-result-status.open{color:#34d399;background:rgb(16 185 129/.1)}.port-result-status.closed{color:#f87171;background:rgb(239 68 68/.1)}.port-closed-summary{margin-top:.75rem;padding:.75rem;background:var(--panel-solid);border-radius:8px;font-size:.8125rem;color:var(--text-2)}.port-closed-summary strong{color:var(--text)}.port-no-open{text-align:center;padding:2rem 1rem;color:var(--text-2)}.port-no-open-icon{font-size:2rem;margin-bottom:.5rem;opacity:.5}@media (max-width:640px){.port-input-row{flex-wrap:wrap}.port-field-group{flex-basis:100%}.port-options-row{flex-direction:column}.port-scan-summary{grid-template-columns:repeat(2,1fr)}.port-tabs{flex-wrap:wrap}}