.hp206-network { grid-area: map; min-width: 0; padding: 22px; border: 1px solid #dbe7f5; border-radius: 16px; background: linear-gradient(145deg,#fff,#f9fcff); box-shadow: 0 5px 20px #224d7d06; color: #142c52; display: flex; flex-direction: column; }
.hp206-network [hidden] { display: none !important; }
.hp206-eyebrow { font-size: 10px; font-weight: 750; letter-spacing: .16em; color: #2664cc; }
.hp206-heading h2 { font-size: clamp(1.25rem,1.6vw,1.75rem); line-height: 1.3; margin: 8px 0; font-weight: 750; letter-spacing: -.04em; }
.hp206-heading p { color: #697e99; font-size: .8125rem; margin: 0; }
.hp206-fallback { margin-block: 24px; line-height: 2; }
.hp206-enhanced { flex: 1; display: flex; flex-direction: column; gap: 14px; margin-top: 18px; }
.hp206-network button,.hp206-network select { font: inherit; font-size: .8125rem; border: 1px solid #cddff4; border-radius: 8px; background: #fff; color: #235499; min-height: 44px; padding: 8px 12px; cursor: pointer; }
.hp206-network button:hover { background: #edf4ff; border-color: #81a9e8; }
.hp206-network :is(button,select):focus-visible { outline: 3px solid #1463ef; outline-offset: 3px; }
.hp206-compact-tools,.hp206-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.hp206-compact-tools { justify-content: space-between; }
.hp206-network .hp206-tabs button { padding-inline: 10px; font-size: .75rem; }
.hp206-network .hp206-tabs [aria-pressed="true"],.hp206-network .hp206-primary { color: white; border-color: #155eef; background: #155eef; box-shadow: 0 3px 8px #155eef18; }
.hp206-network .hp206-primary:hover { background: #104bc5; }
.hp206-network .hp206-preview { flex: 1; display: grid; place-items: center; width: 100%; min-height: 280px; padding: 0; border: 0; background: transparent; border-radius: 12px; }
.hp206-compact-svg { display: block; width: 100%; height: auto; overflow: visible; }
.hp206-preview-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hp206-preview-footer > span { font-size: .75rem; color: #7486a0; }
.hp206-preview-footer button { white-space: nowrap; }
.hp206-dialog { position: fixed; inset: 0; margin: 0; width: 100vw; max-width: none; height: 100vh; height: 100dvh; max-height: none; padding: 0; border: 0; background: #f6faff; color: #142c52; overflow: hidden; }
.hp206-dialog[open] { display: flex; flex-direction: column; }
.hp206-dialog::backdrop { background: #0c234acc; }
.hp206-dialog-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 24px; background: #fff; border-bottom: 1px solid #deebf8; }
.hp206-dialog-header > div { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.hp206-dialog-header h2 { font-size: clamp(1rem,1.6vw,1.5rem); margin: 0; font-weight: 750; }
.hp206-brand { font-size: 1.375rem; color: #105ced; font-weight: 800; letter-spacing: -.05em; }
.hp206-example { font-size: .75rem; border-radius: 99px; background: #eaf2ff; padding: 5px 10px; color: #46658c; }
.hp206-dialog-header [data-close] { white-space: nowrap; }
.hp206-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 24px; background: #fff; border-bottom: 1px solid #deebf8; }
.hp206-zoom { display: flex; align-items: center; border: 1px solid #cddff4; border-radius: 8px; }
.hp206-network .hp206-zoom button { border: 0; min-width: 44px; padding: 0; font-size: 1.25rem; }
.hp206-zoom output { width: 58px; text-align: center; font-size: .8125rem; font-variant-numeric: tabular-nums; }
.hp206-toolbar [data-pause] { margin-left: auto; }
.hp206-body { display: flex; flex: 1; min-height: 0; }
.hp206-graph-column { display: flex; flex: 1; min-width: 0; min-height: 0; flex-direction: column; background-image: radial-gradient(#b8d0ed70 .8px,transparent .8px); background-size: 18px 18px; }
.hp206-hint { flex: none; margin: 0; padding: 12px 24px 4px; color: #6a7e99; font-size: .75rem; }
.hp206-canvas { flex: 1; min-height: 0; overflow: hidden; position: relative; }
.hp206-detail-svg { width: 100%; height: 100%; display: block; touch-action: none; user-select: none; cursor: grab; }
.hp206-detail-svg.is-dragging { cursor: grabbing; }
.hp206-node { cursor: pointer; }
.hp206-node-card { fill: #fff; stroke: #cbdff6; stroke-width: 1.5; }
.hp206-node:focus { outline: none; }
.hp206-node:focus .hp206-node-card,.hp206-node.is-selected .hp206-node-card { stroke: #155eef; stroke-width: 3; }
.hp206-node.is-selected .hp206-node-card { fill: #edf4ff; }
.hp206-node-name { fill: #183b6c; font: 650 15px system-ui,sans-serif; text-anchor: middle; }
.hp206-node-role { fill: #647c9b; font: 11px system-ui,sans-serif; text-anchor: middle; }
.hp206-node-icon { fill: none; stroke: #2468d9; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hp206-group { stroke: #d1e3f7; stroke-width: 1; fill: #ecf5ff80; }
.hp206-group-security { fill: #e5f8f680; stroke: #c8e8e4; }
.hp206-group-services { fill: #eeeaff70; stroke: #dcd8f4; }
.hp206-group-operations { fill: #eaf5ff80; }
.hp206-group-title { fill: #39659b; font: 650 15px system-ui,sans-serif; }
.hp206-edge { fill: none; stroke: var(--edge-color); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hp206-edge-wrap.is-muted { opacity: .2; }
.hp206-edge-label { fill: #536d90; font: 11px system-ui,sans-serif; paint-order: stroke; stroke: #f9fcff; stroke-width: 5px; stroke-linejoin: round; text-anchor: middle; }
.hp206-particle { stroke: white; stroke-width: 1; pointer-events: none; }
.hp206-map-footer { display: flex; gap: 20px; align-items: center; justify-content: space-between; padding: 10px 24px 14px; min-height: 92px; }
.hp206-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: .75rem; color: #577396; }
.hp206-legend span::before { content: ''; display: inline-block; width: 24px; margin-right: 7px; vertical-align: middle; border-top: 2px solid #155eef; }
.hp206-legend .hp206-key-backup::before { border-color: #7c3aed; border-top-style: dashed; }
.hp206-legend .hp206-key-telemetry::before { border-color: #0d9488; border-top-style: dotted; }
.hp206-legend small { flex-basis: 100%; font-size: .6875rem; color: #758ba6; }
.hp206-minimap { width: 156px; height: 96px; flex: none; background: white; border: 1px solid #cddff4; border-radius: 8px; touch-action: none; cursor: crosshair; }
.hp206-minimap-viewport { fill: #155eef15; stroke: #155eef; stroke-width: 8; pointer-events: none; }
.hp206-panel { width: 288px; flex: none; overflow-y: auto; background: #fff; border-left: 1px solid #deebf8; padding: 22px; }
.hp206-panel h3 { margin: 0 0 18px; font-size: 1.125rem; font-weight: 750; }
.hp206-device-label { font-size: .75rem; color: #647c9b; display: block; margin-bottom: 6px; }
.hp206-panel select { width: 100%; }
.hp206-details { margin-top: 22px; font-size: .8125rem; line-height: 1.65; }
.hp206-details h4 { font-size: 1.25rem; color: #153665; margin: 0 0 6px; }
.hp206-details h5 { font-size: .8125rem; margin: 16px 0 6px; font-weight: 750; }
.hp206-details p { color: #647995; }
.hp206-details ul { padding-left: 16px; color: #345980; }
.hp206-details li { margin-block: 6px; }
.hp206-detail-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.hp206-disclaimer { flex: none; font-size: .6875rem; color: #6a7e99; padding: 10px 24px; border-top: 1px solid #deebf8; background: #fff; }
@media (max-width:1100px) { .hp206-toolbar { gap: 8px; } .hp206-panel { width: 260px; padding: 16px; } .hp206-toolbar [data-pause] { margin-left: 0; } }
@media (max-width:600px) { .hp206-network { padding: 16px; } .hp206-compact-tools { gap: 8px; } .hp206-preview-footer { flex-direction: column; align-items: stretch; } .hp206-preview-footer > span { text-align: center; } .hp206-dialog-header { padding: 10px 12px; } .hp206-dialog-header > div { gap: 4px 10px; } .hp206-brand { font-size: 1.125rem; } .hp206-example { font-size: .625rem; padding: 2px 7px; } .hp206-dialog-header h2 { font-size: .9375rem; } .hp206-toolbar { padding: 8px 12px; gap: 6px; } .hp206-toolbar .hp206-tabs { order: 1; width: 100%; gap: 4px; } .hp206-toolbar .hp206-tabs button { flex: 1; padding-inline: 5px; } .hp206-toolbar button { padding-inline: 9px; font-size: .75rem; } .hp206-body { flex-direction: column; } .hp206-graph-column { flex: 1; } .hp206-panel { width: 100%; max-height: 32%; padding: 12px 16px; border-left: 0; border-top: 1px solid #deebf8; } .hp206-panel h3 { font-size: .9375rem; margin-bottom: 8px; } .hp206-details { margin-top: 12px; } .hp206-minimap { display: none; } .hp206-map-footer { min-height: 0; padding: 8px 12px; } .hp206-legend { gap: 6px; font-size: .625rem; } .hp206-legend span::before { width: 12px; margin-right: 3px; } .hp206-legend small { display: none; } .hp206-hint { padding: 8px 12px 0; font-size: .6875rem; } .hp206-disclaimer { font-size: .625rem; padding: 6px 12px; } }