/* StreamTies v1.3: high-contrast typography and an evidence-driven network canvas. */
:root {
  color-scheme: dark;
  --bg: #080e1b;
  --panel: #111d30;
  --line: #30405b;
  --text: #f7faff;
  --muted: #bdcce2;
  --accent: #bd9aff;
  --green: #4af0ba;
  --purple: #af89ff;
  --blue: #72b9ff;
  --pink: #ff83bc;
  --orange: #ffc477;
}

html { scroll-behavior: smooth; }
body {
  min-width: 320px;
  font: 16px/1.62 "Segoe UI Variable", Inter, "Segoe UI", system-ui, sans-serif;
  background:
    radial-gradient(ellipse 55% 30% at 83% -5%, #44236b44, transparent 80%),
    radial-gradient(ellipse 42% 30% at 18% 28%, #10345755, transparent 83%),
    #080e1b;
  color: var(--text);
}
button, input, select, textarea { font: inherit; }
button, a { transition: color .16s ease, border-color .16s ease, background-color .16s ease, transform .16s ease; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid #9fdcff;
  outline-offset: 3px;
}
a { color: #bfa6ff; text-underline-offset: 3px; }
a:hover { color: #e0d2ff; }

/* Navigation and global header */
.sidebar {
  width: 242px;
  padding: 32px 19px 24px;
  background: linear-gradient(175deg, #11172b 0%, #0c1525 65%, #0b1220 100%);
  border-right: 1px solid #34405c;
  box-shadow: 10px 0 35px #03061422;
}
.brand { gap: 13px; font-size: 20px; font-weight: 750; letter-spacing: -.45px; }
.brand b { font-size: 31px; color: #d7c7ff; }
.brand-mark {
  font-size: 57px;
  color: #c19cff;
  filter: drop-shadow(0 0 12px #a577ff80);
}
.brand sup { font-size: 11px; letter-spacing: 2.1px; color: #a7bce1; }
.sidebar-label { margin: 49px 12px 18px; color: #b8c7dd; font-size: 11px; letter-spacing: 1.4px; font-weight: 700; }
.nav { min-height: 47px; margin-bottom: 6px; padding: 12px 14px; border: 1px solid transparent; border-radius: 12px; font-size: 14px; font-weight: 650; color: #c1cde4; }
.nav span { font-size: 21px; }
.nav:hover { color: white; background: #28344b; border-color: #425573; }
.nav.active { color: #fff; background: linear-gradient(95deg, #543483, #2e365b); border-color: #8f67cf; box-shadow: inset 3px 0 #d3b0ff, 0 8px 24px #070f2490; }
.side-bottom { padding-top: 24px; border-top: 1px solid #32405a; }
.side-bottom p { margin: 11px 10px 18px; color: #bac9dc; font-size: 12px; line-height: 1.65; }
.local-tag { font-size: 12px; color: #d1f9ed; font-weight: 650; }
.dot, .live-key i { width: 9px; height: 9px; box-shadow: 0 0 10px #4af0ba70; }

main { margin-left: 242px; padding: 0 clamp(24px, 3vw, 54px); max-width: none; }
header { height: 78px; border-bottom: 1px solid #35415a; }
.breadcrumb { font-size: 12px; font-weight: 700; letter-spacing: 1.35px; color: #b7c7e3; }
.breadcrumb span { color: #8298bb; }
.header-right { gap: 11px; }
.badge { font-size: 12px; font-weight: 700; color: #e9dfff; padding: 8px 13px; border-color: #715ca6; background: #36274d; }
.badge.connected { color: #c9ffeb; background: #16443c; border-color: #399c7d; }
.icon-button { min-width: 39px; height: 39px; border-color: #465574; background: #17243a; color: #dae5fa; border-radius: 9px; font-size: 20px; }
.icon-button:hover { border-color: #b49cff; background: #2d3656; color: white; }

/* Introduction and monitoring status */
.heading { gap: 24px; padding: 36px 0 26px; }
.eyebrow { color: #d0b6ff; font-size: 12px; font-weight: 800; letter-spacing: 1.8px; }
h1 { font-size: clamp(35px, 3.7vw, 55px); font-weight: 780; letter-spacing: -2.2px; line-height: 1.1; margin: 11px 0 14px; }
h1 span { color: #bd96ff; text-shadow: 0 0 26px #b479ff75; }
.heading p { max-width: 750px; color: #c4d2e8; font-size: 16px; line-height: 1.65; }
.primary, .secondary { min-height: 42px; padding: 10px 16px; border-radius: 10px; font-size: 13px; font-weight: 750; }
.primary { background: linear-gradient(112deg, #b98bff, #89a3ff); color: #101627; box-shadow: 0 7px 22px #7356b340; }
.primary:hover { background: linear-gradient(112deg, #cdaeff, #a7bdff); transform: translateY(-1px); }
.secondary { color: #ebf2ff; background: #23334e; border-color: #4a6282; }
.secondary:hover { color: #fff; background: #34486b; border-color: #8eabdc; }

.discovery-strip {
  padding: 17px 21px;
  margin-bottom: 18px;
  background: linear-gradient(100deg, #144b48dd, #192a48dd 60%, #302544e6);
  border: 1px solid #45887f;
  border-radius: 14px;
  box-shadow: 0 10px 28px #020a1530;
}
.discovery-strip b { font-size: 12px; font-weight: 800; color: #b6ffe3; letter-spacing: 1.1px; }
.discovery-strip p { font-size: 14px; line-height: 1.6; color: #deecf5; margin-top: 6px; }
.notice {
  background: linear-gradient(115deg, #302248, #17263f 74%);
  border: 1px solid #705a99;
  border-left: 4px solid #c098ff;
  color: #e8defd;
  font-size: 14px;
  line-height: 1.6;
  border-radius: 12px;
  padding: 14px 19px;
  margin-bottom: 23px;
}
.notice button { color: #e7d5ff; }

/* Summary cards, with stronger visual hierarchy */
.metrics { gap: 16px; margin-bottom: 25px; }
.metrics article {
  min-width: 0;
  padding: 23px 23px 20px;
  background: linear-gradient(160deg, #1b2b45, #121f32 76%);
  border-color: #3e5271;
  border-radius: 15px;
  border-top: 3px solid #b48bff;
  box-shadow: 0 12px 25px #02081430;
}
.metrics article:nth-child(2) { border-top-color: #50e4bd; }
.metrics article:nth-child(3) { border-top-color: #76bcff; }
.metrics article:nth-child(4) { border-top-color: #ffbf7f; }
.metrics article > span { color: #c1cee5; font-size: 11px; letter-spacing: 1.0px; font-weight: 800; }
.metrics strong { color: white; font-size: clamp(32px, 2.9vw, 45px); font-weight: 800; line-height: 1.4; letter-spacing: -1.3px; }
.metrics article:nth-child(2) strong { color: #7cf0cf; }
.metrics article:nth-child(3) strong { color: #9aceff; }
.metrics article:nth-child(4) strong { color: #ffd5a1; }
.metrics small { color: #c1d0e4; font-size: 12px; line-height: 1.55; display: block; }

/* Large network canvas and companion inspector */
.workspace { grid-template-columns: minmax(0, 1fr) minmax(290px, 340px); gap: 19px; }
.map-panel, .detail-panel, .panel { background: #121e31; border-color: #405270; border-radius: 17px; box-shadow: 0 16px 46px #03091845; }
.panel-toolbar { height: auto; min-height: 65px; padding: 11px 21px; background: #192840; border-bottom-color: #3c506d; }
.tabs button { color: #f0f6ff; font-size: 15px; font-weight: 750; padding: 12px 0; }
.tabs button.selected { border-bottom: 3px solid #bf9bff; }
.live-key { color: #aee7df; font-size: 12px; white-space: nowrap; }
.map-controls { align-items: center; gap: 10px; }
select { color: #eef3ff; background: #243651; border-color: #4f6689; border-radius: 9px; font-size: 13px; padding: 9px 12px; }
.search-row { align-items: center; flex-wrap: wrap; padding: 15px 20px; border-bottom: 1px solid #31425d; background: #162339; }
.search-row > label:first-child { max-width: 340px; min-height: 42px; background: #0e1a2e; border: 1px solid #4d6081; border-radius: 10px; }
.search-row label span { color: #c3d5ef; font-size: 23px; }
.search-row input { color: #fff; font-size: 14px; padding: 9px; }
.search-row input::placeholder { color: #9fb1ce; }
.edge-filter { color: #d2dff3; font-size: 13px; font-weight: 650; }
.edge-filter input { width: 72px; color: #fff; background: #15253d; border: 1px solid #536a90; padding: 7px 8px; }
#graph-wrap {
  height: clamp(520px, 59vh, 750px);
  isolation: isolate;
  background:
    radial-gradient(circle at 36% 43%, #32306e64, transparent 36%),
    radial-gradient(circle at 72% 56%, #115d6560, transparent 35%),
    linear-gradient(150deg, #0b1428, #101a32 64%, #15132c);
}
#graph { cursor: grab; }
#graph.dragging { cursor: grabbing; }
.map-overline {
  position: absolute;
  z-index: 2;
  top: 17px;
  left: 19px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  pointer-events: none;
  color: #e3edff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .5px;
  text-shadow: 0 2px 9px #030b19;
}
.map-overline .mini-live { width: 8px; height: 8px; background: #4ef6c0; border-radius: 50%; box-shadow: 0 0 13px #4ef6c0; }
.map-overline .mini-caption { color: #b8cceb; font-size: 12px; font-weight: 500; letter-spacing: 0; }
.graph-tooltip {
  position: absolute;
  z-index: 8;
  width: max-content;
  max-width: min(270px, 85vw);
  padding: 12px 15px;
  pointer-events: none;
  color: #f7faff;
  background: #17243cf5;
  border: 1px solid #6d86ac;
  box-shadow: 0 14px 32px #030713b0;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.6;
}
.graph-tooltip[hidden] { display: none; }
.graph-tooltip strong { display: block; color: white; font-size: 15px; }
.graph-tooltip span { color: #bed0e9; }
.map-caption { bottom: 22px; left: 21px; padding: 7px 11px; font-size: 12px; color: #e0e9fc; background: #0b1428db; border: 1px solid #394d73; border-radius: 9px; }
.zoom-controls { right: 20px; bottom: 20px; gap: 7px; }
.zoom-controls button { width: 38px; height: 38px; font-size: 23px; font-weight: 700; color: white; background: #263b58; border: 1px solid #7187ad; border-radius: 10px; }
.zoom-controls button:hover { background: #465f8d; }
.map-footer { flex-wrap: wrap; gap: 12px 24px; padding: 16px 19px; color: #d1def1; font-size: 12px; line-height: 1.65; background: #182840; border-top-color: #3f5371; }
.map-footer .legend-dot { height: 10px; width: 10px; box-shadow: 0 0 10px #ad8bff; }

.detail-panel { padding: 26px 24px; min-height: 480px; }
.detail-placeholder h2 { margin-top: 21px; font-size: 32px; font-weight: 760; line-height: 1.13; letter-spacing: -1px; }
.detail-placeholder p { font-size: 15px; line-height: 1.75; color: #cbdaec; }
.small-label { color: #cfbfff; font-size: 12px; font-weight: 750; letter-spacing: 1px; }
.detail-line { margin: 25px 0 22px; background: #50617a; }
.detail-head { align-items: center; gap: 14px; }
.channel-avatar { width: 59px; height: 59px; border: 2px solid #b994ff; }
.detail-head h2 { font-size: 24px; font-weight: 780; }
.detail-head a { font-size: 13px; font-weight: 600; }
.detail-title { font-size: 13px; line-height: 1.7; color: #bed0e8; }
.detail-stat { font-size: 14px; font-weight: 550; color: #c8d7ec; margin: 14px 0; }
.detail-stat b { color: #fff; font-size: 16px; font-weight: 800; }
.coverage-bar { height: 7px; background: #334159; }
.coverage-bar > i { background: linear-gradient(90deg, #8969ec, #7fccfb); }
.detail-panel h3 { color: #d1b9ff; margin: 27px 0 12px; font-size: 12px; letter-spacing: 1px; font-weight: 800; }
.connection-row { font-size: 14px; color: #e2edfc; padding: 13px 4px; min-height: 46px; line-height: 1.6; }
.connection-row:hover { background: #293955; }
.connection-row b { color: #ccaeff; font-size: 14px; }
.connection-row small { color: #c4d5ec; font-size: 12px; }
.detail-small { font-size: 12px; color: #bfcfe6; line-height: 1.75; }
.detail-trend { height: 75px; }

/* Tables, history, methodology, forms */
.panel { margin-top: 23px; padding: 29px; }
.section-title h2, .panel > h2 { font-size: 26px; font-weight: 760; letter-spacing: -.7px; }
.section-title p, .panel > p { color: #c4d5ed; font-size: 14px; line-height: 1.7; }
.table-scroll { border: 1px solid #3b4e69; border-radius: 12px; }
table { font-size: 14px; }
th { padding: 15px 16px; background: #20314c; color: #d4e3f9; font-size: 12px; font-weight: 800; letter-spacing: .25px; }
td { color: #e7f0ff; padding: 16px; border-top-color: #354863; }
tbody tr:nth-child(even) { background: #19283f; }
tbody tr:hover { background: #283c5a; }
td button { color: #d0b9ff; font-size: 14px; font-weight: 650; }
.table-name img { width: 34px; height: 34px; }
.footnote { color: #c0d0e6; font-size: 12px; line-height: 1.8; }
.method-grid { gap: 14px; }
.method-grid article { background: #1c2a42; border: 1px solid #405371; border-radius: 12px; padding: 19px 20px; }
.method-grid h3 { color: #f2eaff; font-size: 17px; font-weight: 750; margin: 0 0 9px; }
.method-grid p { color: #c9d9ef; font-size: 14px; line-height: 1.7; margin: 0; }
.method-note { margin-top: 22px; font-size: 14px; color: #eadfff; background: #312643; border-left: 4px solid #ba93ff; }
.source-links { flex-wrap: wrap; font-size: 14px; gap: 12px 24px; }
.history-links { gap: 11px; }
#history-table a { color: #d2b5ff; }
footer { color: #aabbd3; font-size: 12px; line-height: 1.6; }
footer b { color: #d4b9ff; font-weight: 700; }

dialog { background: #16233a; border-color: #6a7b9c; color: #fff; box-shadow: 0 35px 100px #000b; }
.dialog-head { background: #202d46; padding: 23px 27px; }
.dialog-head h2 { font-size: 25px; font-weight: 760; }
.setup-body { padding: 22px 27px 29px; }
.setup-body > p, .setup-steps p { font-size: 14px; color: #d1dcf1; }
.setup-steps b { font-size: 15px; }
.setup-steps code { font-size: 13px; color: #e8e2ff; }
form label { color: #d5e1f6; font-size: 14px; font-weight: 600; }
form label input, textarea { font-size: 15px; padding: 11px 13px; border-color: #5a7298; background: #101d32; }
.setup-connect b { font-size: 15px; }
.setup-connect p, #collector-info { font-size: 13px; color: #c7d6ed; }
.text-button, #key-status { font-size: 13px; }
#add-feedback, #admin-feedback { font-size: 14px; }
#toast { color: white; background: #372857; border: 1px solid #b08bf6; font-size: 14px; line-height: 1.5; padding: 13px 19px; }

@media (min-width: 1600px) {
  #graph-wrap { height: min(72vh, 820px); }
  .workspace { grid-template-columns: minmax(0, 1fr) 380px; }
}
@media (max-width: 1280px) {
  .sidebar { width: 205px; padding-inline: 12px; }
  main { margin-left: 205px; padding-inline: 24px; }
  .workspace { grid-template-columns: minmax(0, 1fr) 285px; }
  .metrics { gap: 10px; }
  .metrics article { padding: 17px; }
  .metrics article > span { font-size: 10px; }
  .metrics small { font-size: 12px; }
  .detail-panel { padding: 19px; }
}
@media (max-width: 1000px) {
  .workspace { grid-template-columns: 1fr; }
  .detail-panel { min-height: 0; }
  .detail-placeholder h2 { margin-top: 9px; }
  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .method-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .sidebar { width: 74px; padding: 24px 9px; }
  .brand { justify-content: center; }
  .brand > span:last-child, .sidebar-label, .nav:not(.active), .side-bottom { display: none; }
  .nav.active { margin-top: 32px; padding: 13px; font-size: 0; }
  .nav.active span { font-size: 23px; }
  main { margin-left: 74px; }
}
@media (max-width: 620px) {
  main { margin-left: 0; padding-inline: 15px; }
  .sidebar { display: none; }
  header { height: 64px; }
  .breadcrumb { font-size: 10px; letter-spacing: .9px; }
  .header-right { gap: 6px; }
  .badge { font-size: 10px; padding: 7px 9px; }
  .icon-button { min-width: 35px; height: 36px; }
  .mobile-menu { display: flex; margin-top: 14px; padding-bottom: 4px; }
  .mobile-menu .nav, .mobile-menu .nav.active { min-height: 41px; padding: 9px 12px; font-size: 13px; }
  .heading { align-items: flex-start; flex-direction: column; gap: 17px; padding: 29px 0 22px; }
  h1 { font-size: clamp(32px, 8vw, 44px); letter-spacing: -1.5px; }
  .heading p { max-width: none; font-size: 14px; }
  .eyebrow { font-size: 10px; letter-spacing: 1.0px; }
  .heading .secondary { margin-top: 0; }
  .metrics { gap: 10px; }
  .metrics article { padding: 16px 13px; }
  .metrics article > span { font-size: 10px; }
  .metrics strong { font-size: 32px; }
  .metrics small { font-size: 11px; }
  .discovery-strip { padding: 15px; flex-direction: column; align-items: flex-start; }
  .discovery-strip p, .notice { font-size: 13px; }
  .panel-toolbar { padding: 11px 12px; flex-wrap: wrap; }
  .tabs button { font-size: 14px; }
  .live-key { font-size: 11px; }
  select { font-size: 12px; }
  .search-row { padding: 12px; }
  .search-row > label:first-child { width: 100%; max-width: none; }
  .edge-filter { display: flex; }
  #graph-wrap { height: 480px; }
  .map-overline { top: 12px; left: 12px; font-size: 10px; }
  .map-overline .mini-caption { font-size: 10px; }
  .map-caption { max-width: 60%; left: 10px; bottom: 13px; padding: 5px 8px; font-size: 10px; }
  .zoom-controls { right: 10px; bottom: 11px; }
  .zoom-controls button { width: 36px; height: 36px; }
  .map-footer { padding: 14px; font-size: 11px; }
  .detail-panel { padding: 20px; }
  .method-grid { grid-template-columns: 1fr; }
  .panel { padding: 18px; }
  .section-title h2, .panel > h2 { font-size: 23px; }
  .section-title .secondary { font-size: 11px; }
  .table-scroll { margin-inline: -5px; }
  table { font-size: 13px; }
  footer { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}