.ports-root{--ports-radius: 12px}.ports-root .ports-legend{display:flex;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--color-text-secondary)}.ports-root .ports-legend-item{display:inline-flex;align-items:center;gap:5px}.ports-root .ports-legend-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.ports-root .ports-toolbar{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}.ports-root .ports-search-group{flex:1 1 280px;min-width:0;margin-bottom:0}.ports-root .ports-toolbar-actions{flex-shrink:0;padding-bottom:0}.ports-root .ports-filter-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.ports-root .ports-category-tabs{margin-bottom:0}.ports-root .ports-protocol-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.ports-root .ports-protocol-tabs{margin-bottom:0}.ports-root .ports-protocol-tabs button[role=tab]{min-height:36px;padding:4px 12px;font-size:12px;font-family:var(--font-mono, monospace)}.ports-root .ports-row{display:grid;grid-template-columns:10px 70px minmax(80px,.8fr) 64px minmax(0,1.5fr) 20px;gap:8px;align-items:center;padding:10px 14px;border:1px solid var(--color-border);border-radius:var(--ports-radius);margin-bottom:6px;cursor:pointer;background:var(--color-surface);transition:border-color .16s ease,box-shadow .16s ease;user-select:none}.ports-root .ports-row:hover{border-color:var(--color-primary);box-shadow:0 1px 4px #0000000f}.ports-root .ports-row:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.ports-root .ports-row.is-expanded{border-color:var(--color-primary);border-bottom-left-radius:0;border-bottom-right-radius:0;margin-bottom:0}.ports-root .ports-risk-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}.ports-root .ports-port-num{font-family:var(--font-mono, monospace);font-size:14px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ports-root .ports-service{font-size:14px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ports-root .ports-proto-badge{display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-mono, monospace);font-size:11px;font-weight:600;padding:2px 8px;border-radius:10px;white-space:nowrap;text-transform:uppercase}.ports-root .ports-proto-badge.proto-tcp{background:#3b82f61a;color:#3b82f6;border:1px solid rgba(59,130,246,.3)}.ports-root .ports-proto-badge.proto-udp{background:#10b9811a;color:#10b981;border:1px solid rgba(16,185,129,.3)}.ports-root .ports-proto-badge.proto-both{background:#6366f11a;color:#6366f1;border:1px solid rgba(99,102,241,.3)}[data-theme=dark] .ports-root .ports-proto-badge.proto-tcp{background:#3b82f626;color:#60a5fa}[data-theme=dark] .ports-root .ports-proto-badge.proto-udp{background:#10b98126;color:#34d399}[data-theme=dark] .ports-root .ports-proto-badge.proto-both{background:#6366f126;color:#a5b4fc}.ports-root .ports-desc-short{font-size:12px;color:var(--color-text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.ports-root .ports-expand-arrow{font-size:10px;color:var(--color-text-secondary);transition:transform .15s ease;text-align:center}.ports-root .ports-row.is-expanded .ports-expand-arrow{transform:rotate(180deg)}.ports-root .ports-detail{border:1px solid var(--color-primary);border-top:none;border-radius:0 0 var(--ports-radius) var(--ports-radius);padding:16px;margin-bottom:6px;background:color-mix(in srgb,var(--color-primary) 4%,var(--color-surface))}.ports-root .ports-detail-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin-bottom:12px}.ports-root .ports-detail-item{display:flex;flex-direction:column;gap:2px}.ports-root .ports-detail-label{font-size:11px;font-weight:600;color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.03em}.ports-root .ports-detail-value{font-size:14px;line-height:1.5;word-break:break-all}.ports-root .ports-detail-value.mono{font-family:var(--font-mono, monospace);font-size:13px}.ports-root .ports-risk-badge{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;padding:2px 8px;border-radius:4px}.ports-root .ports-risk-badge.risk-safe{background:#10b9811a;color:#10b981}.ports-root .ports-risk-badge.risk-caution{background:#f59e0b1a;color:#d97706}.ports-root .ports-risk-badge.risk-insecure{background:#ef44441a;color:#ef4444}[data-theme=dark] .ports-root .ports-risk-badge.risk-safe{background:#10b98126;color:#34d399}[data-theme=dark] .ports-root .ports-risk-badge.risk-caution{background:#f59e0b26;color:#fbbf24}[data-theme=dark] .ports-root .ports-risk-badge.risk-insecure{background:#ef444426;color:#f87171}.ports-root .ports-detail-note{font-size:13px;line-height:1.5;color:var(--color-text-secondary);border-left:3px solid var(--color-primary);padding:8px 12px;margin-bottom:12px;background:color-mix(in srgb,var(--color-primary) 3%,transparent);border-radius:4px}.ports-root .ports-detail-note.risk-safe{border-left-color:#10b981}.ports-root .ports-detail-note.risk-caution{border-left-color:#f59e0b}.ports-root .ports-detail-note.risk-insecure{border-left-color:#ef4444}.ports-root .ports-detail-footer{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap;padding-top:10px;border-top:1px solid var(--color-border)}.ports-root .ports-copy-btn{appearance:none;border:1px solid var(--color-border);background:var(--color-surface);font-size:12px;padding:4px 12px;border-radius:6px;cursor:pointer;transition:all .12s ease;white-space:nowrap}.ports-root .ports-copy-btn:hover{border-color:var(--color-primary);color:var(--color-primary)}@media(max-width:640px){.ports-root .ports-row{grid-template-columns:10px 56px minmax(60px,1fr) 50px 20px;padding:8px 10px}.ports-root .ports-desc-short{display:none}.ports-root .ports-port-num,.ports-root .ports-service{font-size:13px}.ports-root .ports-proto-badge{font-size:10px;padding:1px 6px}.ports-root .ports-detail{padding:12px}.ports-root .ports-detail-grid{grid-template-columns:1fr}.ports-root .ports-copy-btn{font-size:11px;padding:3px 10px}}