@font-face { font-family: Poppins; src: url('/static/vendor/fonts/poppins-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: Poppins; src: url('/static/vendor/fonts/poppins-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: Poppins; src: url('/static/vendor/fonts/poppins-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
body.dc-harness { margin: 0; min-width: 320px; background: #0b1018; }
.dc-app {
  --dc-ink: #e7edf5; --dc-muted: #8b9bb0; --dc-accent: #92efcb; --dc-border: #273342;
  --dc-technical-font: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --dc-blue-soft: #172c42; --dc-blue-stroke: #6aa6da; --dc-teal-soft: #143b35; --dc-teal-stroke: #68c8ae;
  font: 400 14px/1.5 Poppins, system-ui, sans-serif; color: var(--dc-ink); color-scheme: dark;
  background: #0b1018; padding: 28px clamp(16px, 3vw, 42px) 22px; max-width: 1800px; margin: auto;
}
.dc-app *, .dc-app *::before, .dc-app *::after { box-sizing: border-box; }
.dc-app button, .dc-app textarea, .dc-app input, .dc-app select { font: inherit; }
.dc-app button { cursor: pointer; }
.dc-app [hidden] { display: none !important; }
.dc-term { font-family:var(--dc-technical-font); font-style:italic; font-size:.95em; }
.dc-node-label, .dc-vm-label, .dc-group-label, .dc-rs-tier-label, .dc-row-label,
.dc-discovery-heading h3 { font-family:var(--dc-technical-font); font-style:italic; }
.dc-app :focus-visible { outline: 2px solid var(--dc-accent); outline-offset: 4px; }
.dc-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.dc-head { display: flex; align-items: center; gap: 18px; margin-bottom: 30px; }
.dc-brand-mark { display: grid; place-items: center; width: 56px; height: 56px; flex: none; border: 1px solid #32584d; border-radius: 16px; background: linear-gradient(135deg, #183c33, #111c25); color: var(--dc-accent); font-size: 36px; }
.dc-app .dc-kicker { margin: 0 0 6px; color: var(--dc-accent); font-size: 9px; font-weight: 600; letter-spacing: .16em; }
.dc-head h1 { margin: 0; font-size: clamp(25px, 3vw, 38px); font-weight: 600; letter-spacing: -.045em; line-height: 1.2; color: var(--dc-ink); }
.dc-head h1 span { color: var(--dc-accent); }
.dc-head p:not(.dc-kicker) { margin: 7px 0 0; color: var(--dc-muted); font-size: 12px; }
.dc-head-actions { display: flex; align-items: center; gap: 18px; margin-left: auto; }
.dc-tag { color: var(--dc-muted); font-size: 9px; letter-spacing: .09em; white-space: nowrap; }
.dc-button { display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: 38px; border: 1px solid transparent; border-radius: 9px; padding: 8px 14px; background: var(--dc-accent); color: #0d3025; font-size: 11px !important; font-weight: 600 !important; text-decoration: none; transition: filter .15s, transform .15s; }
.dc-button:hover { filter: brightness(1.08); transform: translateY(-1px); }
.dc-button.secondary { background: transparent; border-color: var(--dc-border); color: var(--dc-ink); }
.dc-button:disabled { opacity: .4; cursor: default; transform: none; }
.dc-overview { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 18px; }
.dc-overview .dc-kicker { color: var(--dc-muted); }
#dc-config-label { margin: 0; font-size: 11px; color: #a6b5c6; }
.dc-summary { display: flex; gap: clamp(16px, 3vw, 44px); }
.dc-stat { display: flex; align-items: baseline; gap: 7px; }
.dc-stat strong { color: var(--dc-ink); font-size: 24px; font-weight: 600; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.dc-stat span { color: var(--dc-muted); font-size: 10px; white-space: nowrap; }
.dc-graph-card { border: 1px solid var(--dc-border); border-radius: 16px; background: #101823; overflow: hidden; box-shadow: 0 24px 70px #0003; }
.dc-toolbar { scroll-margin-top: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 20px; padding: 14px 20px; border-bottom: 1px solid var(--dc-border); }
.dc-layer-title { display: flex; align-items: center; gap: 8px; margin-right: 10px; }
.dc-layer-title h2 { margin: 0; font-size: 12px; font-weight: 600; color: var(--dc-ink); }
.dc-status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--dc-accent); box-shadow: 0 0 14px #92efcb44; }
.dc-toolbar label { display: inline-flex; align-items: center; gap: 7px; font-size: 10px; color: #a7b6c8; cursor: pointer; }
.dc-toolbar label.dc-packet-layer-hint { color: #ffe16a; background: #ffe16a22; outline: 2px solid #ffe16a; outline-offset: 5px; border-radius: 3px; }
.dc-session-options { display: flex; flex-direction: column; gap: 6px; }
.dc-session-types { display: flex; flex-wrap: wrap; gap: 8px; margin-left: 6px; padding-left: 6px; border-left: 1px solid #53677c; }
.dc-toolbar .dc-session-types label { font-size: 9px; }
.dc-underlay-options { display:flex; flex-direction:column; align-items:flex-start; gap:6px; }
.dc-toolbar .dc-underlay-suboption { margin-left:6px; padding-left:6px; border-left:1px solid #53677c; font-size:9px; }
.dc-toolbar .is-inactive { opacity: .45; }
.dc-toolbar .is-inactive, .dc-toolbar .is-inactive label, .dc-toolbar input:disabled { cursor: default; }
.dc-toolbar input[type=checkbox] { appearance: none; width: 25px; height: 14px; border-radius: 9px; background: #303e50; margin: 0; position: relative; flex: none; transition: background .15s; }
.dc-toolbar input[type=checkbox]::after { content: ''; position: absolute; width: 10px; height: 10px; border-radius: 50%; background: #a9b8ca; top: 2px; left: 2px; transition: transform .15s; }
.dc-toolbar input[type=checkbox]:checked { background: #31695b; }
.dc-toolbar input[type=checkbox]:checked::after { transform: translateX(11px); background: var(--dc-accent); }
.dc-toolbar .dc-zoom { margin-left: auto; }
.dc-zoom input { width: 75px; accent-color: var(--dc-accent); }
.dc-zoom output { min-width: 3em; font-variant-numeric: tabular-nums; }
.dc-workspace { position: relative; isolation: isolate; }
.dc-graph-scroll { overflow-anchor: none; overflow: auto; height: min(70vh, 780px); min-height: 480px; overscroll-behavior: contain; background: radial-gradient(ellipse at 50% 0%, #153c392b, transparent 55%), radial-gradient(circle, #43536940 1px, transparent 1px), #0e1621; background-size: auto, 20px 20px, auto; scrollbar-color: #334559 #0e1621; }
.dc-topology-svg { display: block; margin-inline: auto; font-family: Poppins, system-ui, sans-serif; }
.dc-canvas-note { color: #94a7ba; font-size: 9px; }
.dc-canvas-note span { margin-right: 8px; color: var(--dc-accent); }
.dc-graph-footer { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 12px 20px; border-top: 1px solid var(--dc-border); color: var(--dc-muted); font-size: 9px; }
.dc-legend { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 7px 16px; }
.dc-legend > span { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.dc-legend i { flex: none; width: 8px; height: 8px; border: 1px solid #6aa6da; border-radius: 3px; background: #172c42; }
.dc-legend .legend-host { background: #143b35; border-color: #68c8ae; }
.dc-legend .legend-vm { background: #352641; border-color: #af8bcf; }
.dc-legend .legend-customer { background: #403422; border-color: #d4b078; }
.dc-group-box { stroke-width: 1; }
.dc-group-box.pod { fill: #18304122; stroke: #365066; stroke-dasharray: 5 6; }
.dc-group-box.rack { fill: #17253888; stroke: #2c4155; }
.dc-group-label { fill: #7c96af; font-size: 11px; font-weight: 600; text-anchor: start; }
.dc-row-label { fill: #526e89; font-size: 9px; font-weight: 600; letter-spacing: .16em; text-anchor: start; }
.dc-rs-tier { fill: #201a30; stroke: #78618f; stroke-width: 1; }
.dc-rs-tier.rs_main { fill: #242039; stroke: #9b7bbc; }
.dc-rs-tier.rs_helper { fill: #2b2236; stroke: #b691c6; }
.dc-rs-tier-label { fill: #c7acdf; font-size: 10px; font-weight: 600; text-anchor: start; letter-spacing: .04em; }
.dc-edge, .dc-session { cursor: pointer; }
.dc-edge-line { stroke: #54718a; stroke-width: 1.3; opacity: .55; }
.dc-edge-hit, .dc-session-hit { stroke: transparent; stroke-width: 12; }
.dc-edge:hover .dc-edge-line, .dc-edge:focus-visible .dc-edge-line { stroke: #92efcb; stroke-width: 3; opacity: 1; }
.dc-edge.selected .dc-edge-line, .dc-edge.flow-path .dc-edge-line { stroke: #f6be70; stroke-width: 3; opacity: 1; }
.dc-edge.flow-path .dc-edge-line { stroke-dasharray: 7 3; }
.dc-session-line { stroke: #b991de; stroke-width: 1.3; stroke-dasharray: 5 5; opacity: .32; }
.dc-session:hover .dc-session-line, .dc-session:focus-visible .dc-session-line { stroke: #d4b1fc; stroke-width: 3; opacity: 1; }
.dc-session.selected .dc-session-line, .dc-session.route-path .dc-session-line { stroke: #d4b1fc; stroke-width: 2.5; opacity: 1; }
.dc-node, .dc-vm { cursor: pointer; outline: none; }
.dc-node rect { fill: var(--dc-blue-soft); stroke: var(--dc-blue-stroke); stroke-width: 1; filter: drop-shadow(0 3px 5px #0004); }
.dc-node.border rect { fill: #3a3028; stroke: #d5ac80; }
.dc-node.host rect { fill: var(--dc-teal-soft); stroke: var(--dc-teal-stroke); }
.dc-node:hover rect, .dc-node:focus-visible rect { stroke: #c2fbe5; stroke-width: 2.5; }
.dc-node.selected rect { fill: #24554a; stroke: #92efcb; stroke-width: 2.5; }
.dc-node-label { fill: #e2edf8; font-size: 12px; font-weight: 600; pointer-events: none; }
.dc-node-subtitle { fill: #99b4cb; font-size: 8px; pointer-events: none; }
.dc-vm rect { fill: #2e243f; stroke: #9b7bbc; stroke-width: 1; }
.dc-vm.customer rect { fill: #3b3021; stroke: #cba15c; }
.dc-vm.cluster rect { stroke-width: 2; stroke-dasharray: 3 2; }
.dc-vm:hover rect, .dc-vm:focus-visible rect, .dc-vm.selected rect, .dc-vm.preview rect { stroke: #c2fbe5; stroke-width: 2; }
.dc-vm.preview rect { filter: drop-shadow(0 0 4px #70d2b0); }
.dc-hosted-vm:hover, .dc-hosted-vm:focus-visible { background: #e2f6ee; outline: 2px solid #70b99d; outline-offset: 2px; border-radius: 3px; }
.dc-host-vm-scroll { height: 100%; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-color: #68c8ae #143b35; }
.dc-host-vm-scroll > svg { display: block; }
.dc-host-vm-scroll::-webkit-scrollbar { width: 4px; }
.dc-host-vm-scroll::-webkit-scrollbar-thumb { background: #68c8ae; border-radius: 4px; }
.dc-motion-layer { pointer-events: none; }
.dc-motion-controls { display: grid; gap: 16px; padding: 20px; font-size: 13px; }
.dc-motion-controls label { display: flex; align-items: center; gap: 10px; }
.dc-motion-controls input { accent-color: #18785e; flex: none; }
.dc-app .custom-select { --dropdown-bg: #14202d; --dropdown-text: var(--dc-ink); --dropdown-border: var(--dc-border); --dropdown-accent: var(--dc-accent); --dropdown-hover: #233549; }
.dc-inspector .custom-select, .dc-config-dialog .custom-select { --dropdown-bg: #fff; --dropdown-hover: #e1eee8; }
.dc-motion-controls .custom-select { min-width: 0; max-width: 100%; }
.dc-motion-controls .dc-motion-note { margin: 0; font-size: 11px; color: var(--dc-muted); }
.dc-motion-dialog { max-width: min(480px, calc(100vw - 32px)); }
.dc-vm-label { fill: #d7c9e5; font-size: 9px; font-weight: 600; pointer-events: none; }
.dc-vm.customer .dc-vm-label { fill: #f1d7a7; }
.dc-packet-marker { fill: #ffc36c; stroke: #fff7e8; stroke-width: 2; filter: drop-shadow(0 0 6px #ffa736bb); pointer-events: none; }
.dc-route-marker { fill: #cea3ff; stroke: #fff; stroke-width: 2; filter: drop-shadow(0 0 6px #caa0ffaa); pointer-events: none; }
.dc-traffic-list, .dc-playback { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; padding: 11px 20px; border-top: 1px solid var(--dc-border); }
.dc-traffic-list strong, .dc-traffic-list > span, .dc-playback span, .dc-playback label { color: var(--dc-muted); font-size: 10px; }
.dc-flow-button { border: 1px solid var(--dc-border); border-radius: 20px; background: #141f2c; color: #a9bacd; padding: 6px 12px; font-size: 10px !important; }
.dc-flow-button:hover { border-color: #8aa1bc; }
.dc-flow-button.active { border-color: #b78f54; background: #3b3021; color: #f1d7a7; }
.dc-playback .dc-button { min-height: 30px; font-size: 10px !important; }
.dc-playback label { display: flex; align-items: center; gap: 8px; }
.dc-message { margin: 12px 0 0; color: var(--dc-muted); font-size: 11px; white-space: pre-wrap; overflow-wrap: anywhere; }
.dc-message.error { color: #ff9eae; }
.dc-empty { padding: 24px; color: var(--dc-muted); }
/* The inspector belongs to the canvas. It is non-modal so another device can be selected. */
.dc-inspector, .dc-config-dialog { --dc-ink: #243546; --dc-muted: #66758a; --dc-accent: #18785e; --dc-border: #dde5eb; color: var(--dc-ink); color-scheme: light; background: #f9fbfc; border: 1px solid #c6d4df; border-radius: 14px; box-shadow: 0 16px 70px #0006; }
.dc-inspector { --dc-inspector-gap:36px; position: absolute; top: 18px; right: 18px; width: min(470px, calc(100% - 36px)); max-height: calc(100% - var(--dc-inspector-gap)); z-index: 5; display: flex; flex-direction: column; animation: dc-popup-in .18s ease-out; scroll-margin-top: 80px; }
.dc-inspector-bar { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 14px 18px; border-bottom: 1px solid var(--dc-border); flex: none; }
.dc-inspector-bar .dc-kicker { margin: 0; }
.dc-rib-control { display: flex; align-items: center; gap: 6px; margin-left: auto; color: var(--dc-muted); font-size: 9px; }
.dc-rib-control .custom-select { font-size: 10px; }
.dc-terminal { background: #14202c; color: #d5e8df; border-radius: 8px; padding: 12px; overflow: auto; font: 10px/1.65 ui-monospace, monospace; }
.dc-decoded-fields { display: grid; grid-template-columns: minmax(85px, 1fr) minmax(0, 2fr); gap: 7px 12px; background: #edf2f5; border-radius: 8px; padding: 12px; }
.dc-decoded-fields dt { color: #66758a; }
.dc-decoded-fields dd { margin: 0; font-family: ui-monospace, monospace; overflow-wrap: anywhere; }
.dc-local-path { stroke: #ffc36c; stroke-width: 2; stroke-dasharray: 4 3; pointer-events: none; }
.dc-interface-details.is-current > summary { color: #18785e; background: #e1eee8; border-radius: 5px; }
.dc-icon-button { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--dc-border); border-radius: 7px; background: transparent; color: var(--dc-ink); font-size: 21px !important; line-height: 1; }
.dc-icon-button:hover { background: #e2ece8; }
.dc-icon-button { padding:0; flex-shrink:0; }
.dc-session.preview .dc-session-line { stroke:#d4b1fc; stroke-width:3; opacity:1; }
.dc-packet-track { stroke:#ffe16a; stroke-width:3; fill:none; pointer-events:none; }
.dc-details { overflow: auto; padding: 16px 18px 22px; font-size: 11px; overscroll-behavior: contain; }
.dc-disclosure-body { margin:8px 0 4px; padding:4px 0 4px 5px; border-left:1px solid #c6d4df; background:linear-gradient(90deg,#eaf0f680,transparent 25px); }
.dc-details { min-height:0; flex:1; }
.dc-popup-resize { position:absolute; right:2px; bottom:2px; width:22px; height:22px; padding:0; border:0; border-radius:5px; color:#66758a; background:#f9fbfc; cursor:nwse-resize; touch-action:none; z-index:3; }
.dc-popup-edge { position:absolute; z-index:4; touch-action:none; }
.dc-popup-edge[data-resize="n"], .dc-popup-edge[data-resize="s"] { left:12px; right:12px; height:8px; cursor:ns-resize; }
.dc-popup-edge[data-resize="n"] { top:-4px; }
.dc-popup-edge[data-resize="s"] { bottom:-4px; }
.dc-popup-edge[data-resize="e"], .dc-popup-edge[data-resize="w"] { top:12px; bottom:12px; width:8px; cursor:ew-resize; }
.dc-popup-edge[data-resize="e"] { right:-4px; }
.dc-popup-edge[data-resize="w"] { left:-4px; }
.dc-popup-edge[data-resize="ne"], .dc-popup-edge[data-resize="se"], .dc-popup-edge[data-resize="sw"], .dc-popup-edge[data-resize="nw"] { width:16px; height:16px; }
.dc-popup-edge[data-resize="ne"], .dc-popup-edge[data-resize="nw"] { top:-4px; }
.dc-popup-edge[data-resize="se"], .dc-popup-edge[data-resize="sw"] { bottom:-4px; }
.dc-popup-edge[data-resize="ne"], .dc-popup-edge[data-resize="se"] { right:-4px; }
.dc-popup-edge[data-resize="nw"], .dc-popup-edge[data-resize="sw"] { left:-4px; }
.dc-popup-edge[data-resize="ne"], .dc-popup-edge[data-resize="sw"] { cursor:nesw-resize; }
.dc-popup-edge[data-resize="nw"], .dc-popup-edge[data-resize="se"] { cursor:nwse-resize; }
.dc-details h3 { color: var(--dc-ink); margin: 0 0 7px; font-size: 19px; line-height: 1.3; font-weight: 600; letter-spacing: -.02em; }
.dc-details p { margin: 10px 0; overflow-wrap: anywhere; color: var(--dc-muted); }
.dc-details code { color: #617187; font: 10px/1.5 ui-monospace, SFMono-Regular, monospace; overflow-wrap: anywhere; }
.dc-inspector-list { display: grid; grid-template-columns: 1fr; gap: 6px; list-style: none; margin: 15px 0; padding: 12px; background: #edf2f5; border-radius: 9px; font: 11px/1.5 ui-monospace, SFMono-Regular, monospace; overflow-wrap: anywhere; }
.dc-interface-details { border-top: 1px solid var(--dc-border); padding: 12px 0; }
.dc-interface-details summary { color: var(--dc-ink); cursor: pointer; font-weight: 600; }
.dc-interface-details p { font: 10px/1.6 ui-monospace, SFMono-Regular, monospace; }
.dc-interface-details .dc-route-group-title { font: 600 11px Poppins, sans-serif; color: var(--dc-ink); margin-top: 16px; }
.dc-inspector-link, .dc-route-row { display: block; width: 100%; border: 0; border-radius: 7px; background: #edf2f5; color: #446074; padding: 9px; margin-top: 6px; text-align: left; font-size: 10px !important; overflow-wrap: anywhere; }
.dc-inspector-link:hover, .dc-route-row:hover { background: #e1eee8; }
.dc-route-row strong { display: block; margin-bottom: 4px; color: #205e4a; font: 600 11px ui-monospace, monospace; }
.dc-route-row span { display: block; font: 10px/1.6 ui-monospace, monospace; }
.dc-hidden-note { border-left: 3px solid #b48a3f; background: #fcf4e5; padding: 8px; }
.dc-config-dialog { width: min(640px, calc(100vw - 24px)); max-height: calc(100dvh - 32px); margin: auto; padding: 0; overscroll-behavior: contain; }
.dc-config-dialog::backdrop { background: #050c16bb; backdrop-filter: blur(4px); }
.dc-config-dialog h2 { margin: 5px 0 0; font-size: 19px; color: var(--dc-ink); }
.dc-config-help { font-size: 11px; color: var(--dc-muted); padding: 0 20px; }
.dc-count-controls { padding: 8px 20px 20px; }
.dc-count-controls h3 { margin: 5px 0 12px; font-size: 12px; color: var(--dc-ink); }
.dc-count-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 9px; margin-bottom: 14px; }
.dc-count-grid label { display: grid; gap: 5px; color: var(--dc-muted); font-size: 10px; }
.dc-count-grid input { width: 100%; padding: 8px; background: white; border: 1px solid var(--dc-border); border-radius: 7px; color: var(--dc-ink); }
.dc-config-dialog .dc-button { background: #18785e; color: white; }
.dc-config-dialog .dc-button.secondary { background: transparent; color: var(--dc-ink); }
.dc-editor-label { display: block; border-top: 1px solid var(--dc-border); padding: 14px 20px; font-size: 12px; font-weight: 600; }
.dc-editor { display: block; width: calc(100% - 40px); margin: 0 20px; min-height: 260px; resize: vertical; border: 1px solid #d8e1e7; border-radius: 8px; background: #edf2f5; color: #254052; padding: 15px; font: 11px/1.6 ui-monospace, SFMono-Regular, monospace !important; tab-size: 2; }
.dc-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 16px 20px; }
.dc-config-dialog .dc-message { padding: 0 20px 18px; margin: 0; }
.dc-config-dialog .dc-message.error { color: #ac2642; }
@keyframes dc-popup-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 900px) {
  .dc-tag { display: none; }
  .dc-overview { align-items: flex-start; flex-direction: column; gap: 12px; }
  .dc-summary { gap: 25px; }
  .dc-toolbar { gap: 12px; }
  .dc-toolbar .dc-zoom { margin-left: 0; }
}
@media (max-width: 540px) {
  .dc-app { padding: 18px 12px; }
  .dc-brand-mark { display: none; }
  .dc-head { gap: 10px; margin-bottom: 22px; align-items: flex-start; }
  .dc-head h1 { font-size: 26px; }
  .dc-head p:not(.dc-kicker) { font-size: 10px; max-width: 210px; }
  .dc-head-actions .dc-button { padding: 7px 9px; font-size: 9px !important; gap: 5px; }
  .dc-summary { width: 100%; justify-content: space-between; gap: 7px; }
  .dc-stat { flex-direction: column; gap: 0; }
  .dc-stat strong { font-size: 21px; }
  .dc-stat span { font-size: 9px; }
  .dc-toolbar { padding: 12px; }
  .dc-layer-title { width: 100%; }
  .dc-graph-scroll { height: 62dvh; min-height: 380px; }
  .dc-inspector { --dc-inspector-gap:24px; top: 12px; right: 8px; width: calc(100% - 16px); scroll-margin-top: 160px; }
  .dc-graph-footer { padding: 12px; flex-wrap: wrap; gap: 8px; }
  .dc-traffic-list, .dc-playback { padding: 10px 12px; }
  .dc-count-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dc-inspector-bar { gap: 8px; }
  .dc-inspector-bar .dc-kicker { max-width: 110px; font-size: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .dc-app *, .dc-app *::after { animation: none !important; transition: none !important; }
}

.dc-tool-button { border: 1px solid var(--dc-border); background: transparent; color: #a7b6c8; border-radius: 6px; padding: 5px 8px; font-size: 9px !important; }
.dc-tool-button:hover { background: #243448; color: var(--dc-ink); }
.dc-view-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.dc-view-presets .dc-tool-button[aria-pressed=true] { color: var(--dc-accent); border-color: #4e8b78; background: #17382e; }
.dc-node, .dc-vm { cursor: grab; touch-action: none; user-select: none; }
.dc-graph-scroll.is-dragging, .is-dragging .dc-node, .is-dragging .dc-vm { cursor: grabbing; }

.dc-session.illustrative .dc-session-line { stroke: #d4b1fc; stroke-width: 3; opacity: 1; marker-end: url(#dc-flow-arrow); }

body.dc-page { background: #0b1018; }
.dc-page > main { max-width: none; padding: 0; }
.dc-app h2, .dc-app h3 { text-transform: none; letter-spacing: normal; }
.dc-app code { background: transparent; padding: 0; }
.dc-app a:hover { text-decoration: none; }
/* Inspector navigation, movement and the RIB tree. */
.dc-popup-grip { display:flex; align-items:center; gap:5px; padding:0; background:transparent; border:0; color:var(--dc-muted); cursor:grab; touch-action:none; font-size:15px; }
.dc-popup-grip span { font-size:9px; letter-spacing:.1em; }
.dc-popup-grip:active { cursor:grabbing; }
.dc-icon-button:disabled { opacity:.3; cursor:default; }
.dc-family-badge { display:inline-block; padding:2px 4px; margin-right:6px; border-radius:4px; background:#e1e9f0; color:#546b80; font-size:8px; }
.dc-cli-route { display:block; min-width:100%; text-align:left; white-space:pre; border:0; border-radius:3px; background:transparent; color:inherit; font:inherit; padding:2px 3px; cursor:pointer; }
.dc-cli-route:hover, .dc-cli-route:focus-visible { background:#304158; outline:1px solid #bc8aff; }
.dc-route-legend { position:absolute; left:8px; bottom:8px; max-width:calc(100% - 16px); z-index:1; display:flex; flex-wrap:wrap; gap:6px 16px; padding:6px 10px; border-radius:6px; background:#0e1621ee; font-size:10px; pointer-events:none; }
.dc-route-legend .learned { color:#bc8aff; }
.dc-route-legend .points-to { color:#ffe16a; }
.dc-route-provenance .learned { color:#7040b1; }
.dc-route-provenance .points-to { color:#836500; }
.dc-route-paths, .dc-route-propagation { pointer-events:none; }
.dc-route-learned { stroke:#bc8aff; stroke-width:3; stroke-dasharray:7 3; opacity:.95; }
.dc-route-propagation-marker { fill:#e2cfff; stroke:#7040b1; stroke-width:1; filter:drop-shadow(0 0 4px #bc8aff); }
.dc-route-points-to { stroke:#ffe16a; stroke-width:3; opacity:.95; }
.dc-pick-banner { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 20px; background:#273354; color:#e2daff; font-size:12px; }
.dc-pick-banner[hidden], .dc-route-legend[hidden] { display:none; }
.is-picking-endpoint .dc-node, .is-picking-endpoint .dc-vm { cursor:crosshair; }
.dc-node.packet-source > rect, .dc-vm.packet-source > rect { stroke:#70d2f0; stroke-width:3; }
.dc-node.packet-destination > rect, .dc-vm.packet-destination > rect { stroke:#ffe16a; stroke-width:3; }
/* Each row represents 32 consecutive network-order bits. */
.dc-wire { margin:18px 0; }
.dc-wire h4 { margin-bottom:8px; }
.dc-wire-layer { margin:10px 0; border:1px solid #cedbe5; border-radius:8px; padding:8px; }
.dc-wire-layer > summary { cursor:pointer; font-weight:600; font-size:10px; }
.dc-bit-info { position:sticky; top:0; z-index:2; padding:12px; border-radius:8px; background:#e4e9f7; border-left:3px solid #7859b7; overflow-wrap:anywhere; }
.dc-wire h4 { color:var(--dc-ink); margin:0 0 10px; }
.dc-wire h4:focus { outline:2px solid #7859b7; outline-offset:2px; border-radius:3px; }
.dc-bit-info p { margin:6px 0 0; }
.dc-bit-ruler { font:9px/2 ui-monospace,monospace; white-space:pre; color:#6b7a8c; }
.dc-bit-grid { display:grid; grid-template-columns:repeat(32,minmax(0,1fr)); gap:2px 0; }
.dc-bit-field { min-width:0; padding:3px 0; border:1px solid #b8cad9; border-radius:3px; background:#edf3f8; color:#30465d; cursor:pointer; overflow:hidden; }
.dc-bit-field:nth-child(even) { background:#e1eaf3; }
.dc-bit-field:hover, .dc-bit-field.hovered, .dc-bit-field.field-focus, .dc-bit-field.active { background:#e7def8; border-color:#9477c0; }
.dc-bit-field:focus-visible { outline:2px solid #7859b7; z-index:1; }
.dc-bit-label { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:8px; line-height:13px; }
.dc-bit-values { display:flex; justify-content:space-around; font:9px/1.6 ui-monospace,monospace; }
@media(max-width:640px) { .dc-popup-grip span { display:none; } .dc-bit-values { font-size:8px; } }

/* Primary traffic actions live beside the device; manual endpoint forms are optional. */
.dc-device-actions { position:absolute; z-index:7; width:196px; padding:7px; border:1px solid #627a90; border-radius:8px; background:#182838; color:#e0edf6; box-shadow:0 10px 30px #0007; font-size:10px; }
.dc-device-actions[hidden] { display:none; }
.dc-device-actions-heading { display:flex; align-items:center; justify-content:space-between; gap:6px; margin-bottom:5px; }
.dc-device-actions-heading button { display:grid; place-items:center; width:20px; height:20px; padding:0; border:0; background:transparent; color:#ccdeeb; cursor:pointer; font-size:17px; }
.dc-device-send-row { display:flex; gap:5px; }
.dc-device-send-row button { flex:1; border:1px solid #3e8e79; border-radius:6px; padding:5px; background:#243f3c; color:#a6edd2; cursor:pointer; font:inherit; }
.dc-device-actions .custom-select { --dropdown-bg:#142331; --dropdown-text:#e0edf6; --dropdown-border:#50677b; min-width:0; }
.dc-device-actions label { display:flex; align-items:center; gap:5px; margin-bottom:5px; }
.dc-device-actions label .custom-select { flex:1; width:0; }
.dc-device-actions label[hidden] { display:none; }
.dc-pick-banner { position:absolute; left:12px; top:12px; max-width:calc(100% - 24px); z-index:6; border:1px solid #536383; border-radius:8px; padding:8px 12px; font-size:11px; }

.dc-flow-examples { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 8px 20px; padding: 10px 18px; border-bottom: 1px solid #334255; color: #ccd8e4; font-size: 12px; background: #172433; }
.dc-app .dc-flow-examples[hidden] { display: grid !important; visibility: hidden; }
.dc-flow-examples label { display: flex; align-items: center; gap: 8px; min-width: 0; }
.dc-flow-examples .custom-select { --dropdown-bg:#233549; --dropdown-text:#edf4fa; --dropdown-border:#4c627a; flex: 1; min-width: 0; width: 100%; }
#dc-current-advertisement { min-width: 0; min-height: 1.5em; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
@media (max-width: 640px) { .dc-flow-examples { grid-template-columns: minmax(0, 1fr); } }
.dc-session.is-flow-current .dc-session-line { stroke: #f0dcff; stroke-width: 4; }

.dc-packet-internal-track { stroke: #ffe16a; stroke-width: 3; fill: none; opacity: .7; pointer-events: none; }

.dc-address { display:inline-block; max-width:100%; text-decoration:underline dotted #5e91a3; text-underline-offset:3px; cursor:help; border-radius:2px; }
.dc-node .dc-asn { cursor:help; text-decoration:underline dotted; pointer-events:auto; }
.dc-route-row .dc-address { display:inline-block; font:inherit; }
.dc-address:hover, .dc-address:focus-visible { background:#d6eff5; color:#153d51; outline:1px solid #6ca4b4; }
.dc-terminal .dc-address:hover, .dc-terminal .dc-address:focus-visible { background:#315361; color:#ecfbff; }
.dc-address-tooltip { position:fixed; z-index:2000; width:min(340px,calc(100vw - 16px)); box-sizing:border-box; padding:10px 12px; border:1px solid #7aa6b7; border-radius:9px; background:#f7fcff; color:#183c50; box-shadow:0 6px 24px #08151b55; font:12px/1.5 Poppins,system-ui,sans-serif; pointer-events:none; overflow-wrap:anywhere; }
.dc-address-tooltip[hidden] { display:none; }
.dc-address-tooltip strong { display:block; font-size:12px; }
.dc-address-tooltip p { margin:5px 0 0; white-space:pre-line; }
.dc-node.address-preview rect, .dc-vm.address-preview rect { stroke:#81e2f2; stroke-width:3; filter:drop-shadow(0 0 6px #73d7eccc); }

/* A clear entry point and a short question above the canvas, never over it. */
.dc-learning-launcher { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; margin:0 0 24px; padding:20px 24px; border:1px solid #63bca0; border-radius:14px; background:linear-gradient(110deg,#183e34,#142a2c); }
.dc-learning-launcher strong { color:#e7fff5; font-size:18px; }
.dc-learning-launcher p { margin:5px 0 0; color:#b6d8cd; font-size:12px; }
.dc-learning-launcher .dc-button { min-height:46px; font-size:13px !important; }
.dc-tutorial { padding:18px 24px; border-bottom:1px solid #4f927e; background:#142c28; scroll-margin-top:16px; }
.dc-tutorial-top { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.dc-tutorial-top .dc-kicker { margin:0; }
.dc-tutorial-content h2 { color:#effff8; margin:12px 0 6px; font-size:20px; line-height:1.35; }
.dc-tutorial-content p { margin:6px 0 12px; max-width:85ch; color:#bbd3ca; font-size:13px; }
.dc-tutorial-content #dc-tutorial-answer { border-left:3px solid #92efcb; padding-left:14px; color:#f1fff8; }
.dc-tutorial-content #dc-tutorial-context { color:#f2cf8d; }
.dc-tutorial-content #dc-tutorial-feedback { color:#f2cf8d; font-size:12px; }
.dc-tutorial-content #dc-tutorial-feedback[data-result=success] { color:var(--dc-accent); }
.dc-tutorial-nav { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:16px; }
.dc-tutorial-nav #dc-tutorial-next { margin-left:auto; }
.dc-is-touring .dc-learning-launcher, .dc-is-touring .dc-overview, .dc-is-touring .dc-toolbar,
.dc-is-touring #dc-flow-examples, .dc-is-touring .dc-graph-footer, .dc-is-touring .dc-traffic-list,
.dc-is-touring .dc-playback, .dc-is-touring #dc-config-open { display:none !important; }
.dc-is-touring .dc-node-subtitle { visibility:hidden; }
.dc-is-touring .dc-node, .dc-is-touring .dc-vm { touch-action:auto; cursor:pointer; }
.dc-is-touring .dc-graph-scroll { height:45dvh; min-height:280px; }
.dc-is-touring .dc-tutorial-muted { opacity:.22; }
.dc-is-touring .dc-tutorial-target > rect { stroke:#92efcb; stroke-width:3; }
.dc-is-touring .dc-tutorial-target .dc-edge-line { stroke:#92efcb; stroke-width:3; opacity:1; }
.dc-is-touring .dc-tutorial-target .dc-session-line { stroke:#dfb9ff; stroke-width:3; opacity:1; }
.dc-is-touring .dc-vm:not(.customer),
.dc-is-touring[data-tutorial-stage=overview] .dc-vm { display:none; }
.dc-is-touring .dc-internet.dc-tutorial-muted { opacity:.22; }
.dc-internet-uplink.flow-path { stroke:#ffe16a; stroke-width:3; }
.dc-tutorial-content #dc-tutorial-route { color:#ffe16a; font:11px/1.6 var(--dc-technical-font); overflow-wrap:anywhere; }
@media(max-width:540px) {
  .dc-learning-launcher { padding:16px; gap:14px; }
  .dc-learning-launcher strong { font-size:16px; }
  .dc-learning-launcher .dc-button { width:100%; }
  .dc-tutorial { padding:14px; }
  .dc-tutorial-content h2 { font-size:17px; }
  .dc-tutorial-content p { font-size:12px; }
  .dc-tutorial-nav { gap:6px; }
  .dc-tutorial-nav .dc-button { padding:8px; font-size:10px !important; gap:5px; }
}

.dc-learning-launcher > div { flex:1 1 300px; }
.dc-discovery-bar { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 18px; background:#28213c; border-block:1px solid #76588f; scroll-margin-top:12px; }
.dc-discovery-bar p { margin:0; font-size:12px; color:#e0ceee; }
.dc-discovery-bar button { flex-shrink:0; }
.dc-discovery-card { position:absolute; z-index:8; width:min(340px,calc(100% - 24px)); max-height:min(440px,calc(100dvh - var(--site-header-height, 80px) - 24px)); overflow:auto; padding:14px; border:1px solid #ac86c7; border-radius:12px; background:#f8f4fc; color:#2e2639; box-shadow:0 12px 36px #0008; overscroll-behavior:contain; color-scheme:light; }
.dc-discovery-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; }
.dc-discovery-heading h3 { margin:0; font-size:13px; color:#51316a; overflow-wrap:anywhere; }
.dc-discovery-heading .dc-icon-button { color:#51316a; background:transparent; }
.dc-discovery-card details { border-top:1px solid #dfd2e9; padding:10px 0; }
.dc-discovery-card details:last-child { padding-bottom:0; }
.dc-discovery-card summary { cursor:pointer; font-size:12px; font-weight:600; }
.dc-discovery-card p { color:#554961; font-size:12px; line-height:1.6; margin:8px 0 0; overflow-wrap:anywhere; }
.dc-discovery-card :focus-visible { outline-color:#77518f; }
.dc-is-discovering .dc-node, .dc-is-discovering .dc-vm { cursor:help; touch-action:auto; }
.dc-is-discovering .dc-canvas-note { display:none; }
.dc-is-discovering .dc-group-label { pointer-events:none; }
.dc-discovery-target > rect { stroke:#e0b5ff !important; stroke-width:3 !important; }
.dc-group-box.dc-discovery-target { stroke:#e0b5ff; stroke-width:3; }
.dc-discovery-target .dc-edge-line, .dc-discovery-target .dc-session-line { stroke:#e0b5ff !important; stroke-width:3 !important; opacity:1; }
@media(max-width:540px) {
  .dc-discovery-bar { padding:10px 12px; align-items:flex-start; }
  .dc-discovery-bar p { font-size:11px; }
}

.dc-internet-cloud { fill:#1b3343; stroke:#8bbfd8; stroke-width:1.5; }
.dc-internet-label { fill:#d3ecfa; font-size:14px; font-weight:600; text-anchor:middle; }
.dc-internet-uplink { stroke:#8bbfd8; stroke-width:2; }

.dc-app a.dc-term { color:inherit; text-decoration:underline dotted; text-underline-offset:3px; }
.dc-app a.dc-term:hover, .dc-app a.dc-term:focus-visible { color:var(--dc-accent); text-decoration-style:solid; }