.cx-hero { display:flex; justify-content:space-between; gap:24px; align-items:center; padding:12px 0 16px; border-bottom:1px solid var(--border,#34414d); }
.cx-eyebrow,.cx-map-caption,.cx-legend,.cx-counts span { font:10px/1.5 'Roboto Mono',monospace; letter-spacing:.12em; }
#connectionsView .cx-hero h1 { font:clamp(30px,3vw,44px)/1.1 Georgia,serif; letter-spacing:-.04em; margin:6px 0; color:var(--text-primary,#eff6f3); }
.cx-hero h1 em { color:var(--accent,#7edccd); font-weight:normal; }
.cx-hero p,.cx-inspector p { line-height:1.7; color:var(--text-secondary,#aab7be); }
.cx-hero p { margin:4px 0; }.cx-counts { display:flex; gap:22px; flex-shrink:0; }.cx-counts b { display:block; font:28px/1.3 Georgia,serif; }.cx-counts span { opacity:.65; }
.cx-tools { display:flex; justify-content:space-between; align-items:flex-end; gap:12px; padding:22px 0; }.cx-tools label { display:grid; gap:7px; font-size:12px; width:min(420px,55%); }
.cx-tools input { width:100%; box-sizing:border-box; padding:12px; border:1px solid var(--border,#34414d); border-radius:8px; color:inherit; background:var(--panel,transparent); font:inherit; }
.cx-tools button { min-height:44px; padding:10px 14px; border:1px solid var(--border,#34414d); border-radius:8px; color:inherit; background:transparent; cursor:pointer; }
.cx-workspace { display:grid; grid-template-columns:minmax(0,1fr) 320px; border:1px solid var(--border,#34414d); border-radius:14px; overflow:hidden; background:var(--panel,rgba(10,20,28,.6)); }
.cx-map { min-width:0; background-color:var(--panel,#101c24); background-image:radial-gradient(var(--border,#34414d) .6px,transparent .6px); background-size:20px 20px; }
.cx-map-caption { padding:18px; display:flex; justify-content:space-between; gap:10px; }.cx-map-caption span { opacity:.55; letter-spacing:0; }
.cx-scroll { overflow:auto; height:560px; }.cx-svg { display:block; width:100%; min-width:660px; height:100%; min-height:500px; }
.cx-lines path { fill:none; stroke:var(--cx-edge); stroke-width:1; opacity:.65; }.cx-lines path:not(.cx-dim) { transition:opacity .2s; }.cx-lines .cx-default { stroke-dasharray:3 5; }
.cx-node { cursor:pointer; transition:opacity .2s; }.cx-node circle,.cx-node path { stroke:var(--panel,#12202a); stroke-width:1.5; }
.cx-cluster circle { fill:var(--cx-cluster); }.cx-stock path { fill:var(--cx-stock); }.cx-news circle { fill:none; stroke:var(--text-secondary,#aab7be); stroke-width:1; }
.cx-node text { fill:var(--text-primary,#eff6f3); font:13px 'Roboto Mono',monospace; paint-order:stroke; stroke:var(--panel,#12202a); stroke-width:3px; stroke-linejoin:round; }
.cx-node:focus { outline:none; }.cx-node:focus circle,.cx-node:focus path,.cx-selected circle,.cx-selected path { stroke:var(--text-primary,#fff); stroke-width:3; }
.cx-dim { opacity:.08!important; }.cx-node:hover { opacity:1!important; }.cx-center { fill:var(--text-primary,#eff6f3); font:35px Georgia,serif; }.cx-center-sub { fill:var(--text-secondary,#aab7be); font:7px monospace; letter-spacing:2px; }
.cx-legend { display:flex; gap:18px; flex-wrap:wrap; padding:16px 18px; }
.cx-inspector { padding:24px; border-left:1px solid var(--border,#34414d); overflow:auto; max-height:650px; }.cx-inspector h2 { font:32px/1.1 Georgia,serif; overflow-wrap:anywhere; margin:16px 0; }.cx-inspector h3 { font-size:12px; margin-top:28px; }
.cx-inspector button,.cx-clusters button { width:100%; display:flex; flex-direction:column; align-items:flex-start; gap:7px; text-align:left; padding:13px 0; border:0; border-bottom:1px solid var(--border,#34414d); background:transparent; color:inherit; font:inherit; cursor:pointer; }
.cx-inspector button small,.cx-clusters small { font:10px 'Roboto Mono',monospace; opacity:.6; }.cx-inspector button:hover,.cx-clusters button:hover { color:var(--accent,#7edccd); }
.cx-score { font:38px Georgia,serif; }.cx-score small { display:block; font:9px monospace; margin-top:8px; }.cx-note { font-size:12px; }.cx-source { display:inline-block; color:var(--accent,#7edccd); margin:12px 0; }
.cx-index { padding:36px 0; }.cx-index h2 { font:30px Georgia,serif; }.cx-clusters { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px 28px; }.cx-clusters button { min-height:64px; }
#connectionsView button:focus-visible,#connectionsView a:focus-visible,#connectionsView input:focus-visible { outline:2px solid var(--accent,#7edccd); outline-offset:3px; }
@media(max-width:1100px){.cx-workspace{grid-template-columns:minmax(0,1fr) 270px}.cx-counts{gap:14px}.cx-map-caption span{display:none}}
@media(max-width:768px){.cx-hero{align-items:flex-start;flex-direction:column;gap:12px;padding-top:8px}.cx-counts{gap:30px}.cx-tools{flex-direction:column;align-items:stretch}.cx-tools label{width:100%}.cx-workspace{grid-template-columns:1fr}.cx-scroll{height:440px}.cx-inspector{max-height:480px;border-left:0;border-top:1px solid var(--border,#34414d)}.cx-clusters{grid-template-columns:repeat(2,minmax(0,1fr))}.cx-map-caption{font-size:9px}.cx-legend{font-size:9px;gap:10px}}
@media(prefers-reduced-motion:reduce){#connectionsView *{transition:none!important;scroll-behavior:auto!important}}
@media(max-width:768px){.cx-svg{min-width:0;min-height:0}}
.cx-canvas {position:relative;width:100%;height:100%;min-height:300px;background:var(--panel,#101c24);color:var(--text-primary,#eff6f3)}
.cx-canvas canvas {position:absolute;inset:0;width:100%;height:100%;display:block}
.cx-labels {touch-action:none;cursor:grab}.cx-labels:active{cursor:grabbing}.cx-labels:focus-visible{outline:2px solid var(--accent,#80dfc4);outline-offset:-2px}
.cx-backend {position:absolute;bottom:10px;right:12px;pointer-events:none;font:9px monospace;opacity:.5}
#connectionsView {--cx-cluster:light-dark(#085c47,#80dfc4);--cx-stock:light-dark(#662e9e,#cda4e9);--cx-edge:light-dark(#19574c,#80dfc4);--text-primary:var(--text,#eff6f3);--text-secondary:var(--text-meta,#aab7be)}
.cx-legend span:nth-child(1){color:var(--cx-cluster)}.cx-legend span:nth-child(2){color:var(--cx-stock)}
.cx-tools select{min-height:44px;padding:10px;border:1px solid var(--border,#34414d);border-radius:8px;background:var(--panel,#101c24);color:inherit;font:inherit}
.cx-announcement{font-size:12px;color:var(--text-meta,#aab7be);min-height:18px}
.cx-inspector [data-action="back"]{padding:12px 0;color:var(--accent,#80dfc4)}
.cx-tools{flex-wrap:wrap}.cx-tools label.cx-period{width:auto;flex-shrink:0}.cx-scope{font-size:12px;line-height:1.6;color:var(--text-meta,#aab7be);margin:0 0 8px}.cx-scope button{color:inherit;background:transparent;border:1px solid var(--border,#34414d);border-radius:6px;min-height:44px;padding:8px 12px;cursor:pointer}
@media(max-width:768px){.cx-tools label.cx-period{width:100%}}

/* Compact selectors share the network panel border. */
.cx-picker { display:flex; align-items:center; gap:12px; min-width:0; margin:0; padding:8px 12px; border:1px solid var(--border); background:var(--panel); }
.cx-cluster-picker { border-bottom:0; border-radius:14px 14px 0 0; }
.cx-cluster-picker + .cx-workspace { border-radius:0; }
.cx-watch-picker { border-top:0; border-radius:0 0 14px 14px; }
.cx-picker-head { display:flex; flex:none; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; margin:0; }
.cx-picker-head h2 { margin:0; font:600 13px system-ui; }
.cx-picker-head > small { display:none; }
.cx-picker-list { display:flex; flex:1; gap:5px; min-width:0; overflow-x:auto; padding:2px; scrollbar-width:thin; scrollbar-color:var(--border) transparent; }
#connectionsView .cx-node-choice { display:inline-flex; flex-direction:row; flex:0 0 auto; align-items:center; justify-content:space-between; gap:12px; width:auto; min-height:36px; padding:6px 10px; border:1px solid transparent; border-radius:7px; background:transparent; color:var(--text); font:inherit; font-size:11px; cursor:pointer; white-space:nowrap; }
#connectionsView .cx-node-choice strong { font-weight:600; }
#connectionsView .cx-node-choice[aria-pressed="true"] { background:color-mix(in srgb,var(--cx-stock) 12%,var(--panel)); border-color:color-mix(in srgb,var(--cx-stock) 35%,transparent); }
#connectionsView .cx-node-choice--cluster[aria-pressed="true"] { background:color-mix(in srgb,var(--cx-cluster) 12%,var(--panel)); border-color:color-mix(in srgb,var(--cx-cluster) 35%,transparent); }
#connectionsView .cx-node-choice:disabled { opacity:.45; cursor:default; }
.cx-watch-picker input { min-height:38px; width:200px; padding:8px 10px; border:1px solid var(--border); border-radius:8px; background:var(--panel-2); color:var(--text); font:inherit; font-size:12px; }
.cx-item-head { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; }
.cx-item-head > span:first-child { min-width:0; overflow-wrap:anywhere; }
.cx-impact { flex:none; font-size:12px; font-weight:700; font-variant-numeric:tabular-nums; }
.cx-impact--up { color:var(--up,#32cf9b); }
.cx-impact--down { color:var(--down,#ff6b64); }
.cx-impact--flat { color:var(--text-meta); }
.cx-detail-metrics { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:16px 0; }
.cx-detail-metrics > div { display:grid; gap:6px; padding:11px; border:1px solid var(--border); border-radius:9px; background:var(--panel-2); }
.cx-detail-metrics > div:last-child:nth-child(odd) { grid-column:1 / -1; }
.cx-detail-metrics small { color:var(--text-meta); font-size:10px; }
.cx-detail-metrics strong { font-size:20px; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.cx-inspector { position:relative; padding:0; min-height:0; max-height:none; overflow:visible; }
.cx-inspector-body { position:absolute; inset:0; overflow:auto; padding:22px; }
@media(min-width:769px) {
  .main:has(> #connectionsView:not(.hidden)) > :is(.view-toolbar,.page-brand-bar,#status,#connectionsView) { max-width:none; }
  .cx-scroll { height:clamp(440px,62dvh,800px); }
}
@media(max-width:768px) {
  #connectionsView .cx-node-choice { min-height:40px; }
  .cx-picker { display:block; padding:8px 10px; }
  .cx-picker-head { margin-bottom:4px; }
  .cx-cluster-picker { display:flex; }
  .cx-cluster-picker .cx-picker-head { margin-bottom:0; }
  .cx-watch-picker input { width:min(220px,75%); font-size:16px; }
  .cx-inspector-body { position:static; max-height:560px; padding:18px; }
}

#connectionsView .cx-inspector-body button { min-height:40px; padding:8px; border:1px solid transparent; border-radius:7px; font-size:12px; }
#connectionsView .cx-inspector-body button:hover { background:var(--panel-2); }

.cx-map-caption { align-items:center; }
.cx-map-caption [data-action="fullscreen"] { flex-shrink:0; margin-left:auto; min-height:44px; padding:8px 12px; border:1px solid var(--border); border-radius:8px; background:var(--panel); color:var(--text-primary); font:inherit; cursor:pointer; }
.cx-explorer:fullscreen, .cx-explorer.cx-fullscreen { display:flex; flex-direction:column; width:100%; height:100dvh; padding:8px; box-sizing:border-box; background:var(--bg,#101720); color:var(--text-primary); }
.cx-explorer.cx-fullscreen { position:fixed; inset:0; z-index:10000; }
.cx-explorer:is(:fullscreen,.cx-fullscreen) .cx-workspace { flex:1; min-height:0; }
.cx-explorer:is(:fullscreen,.cx-fullscreen) .cx-map { display:flex; flex-direction:column; min-width:0; min-height:0; }
.cx-explorer:is(:fullscreen,.cx-fullscreen) .cx-scroll { flex:1; min-height:0; height:auto; }
.cx-explorer:is(:fullscreen,.cx-fullscreen) .cx-canvas { min-height:0; }
.cx-explorer:is(:fullscreen,.cx-fullscreen) .cx-inspector { max-height:none; min-height:0; }
.cx-explorer:is(:fullscreen,.cx-fullscreen) .cx-picker { flex-shrink:0; }
@media(max-width:768px) { .cx-explorer:is(:fullscreen,.cx-fullscreen) .cx-workspace { grid-template-rows:minmax(0,1fr) minmax(100px,25dvh); } }

.cx-explorer:is(:fullscreen,.cx-fullscreen) .cx-tools { flex-shrink:0; flex-direction:row; align-items:flex-end; padding:8px 0; gap:8px; }
.cx-explorer:is(:fullscreen,.cx-fullscreen) .cx-tools label { flex:1 1 220px; width:auto; }
.cx-explorer:is(:fullscreen,.cx-fullscreen) .cx-tools label.cx-period { flex:0 0 auto; width:auto; }

.cx-motion { position:absolute; top:10px; right:12px; min-height:36px; padding:6px 10px; border:1px solid var(--border,#34414d); border-radius:8px; background:var(--panel,#101c24); color:inherit; font:12px system-ui; cursor:pointer; }