/* Structural rules shared by the SOC/NDR workspace. */
* { box-sizing:border-box; }
html { font-size:14px; line-height:1.5; color:var(--ink); }
body { margin:0; }
button,input,select { font:inherit; border:1px solid var(--line); }
button,select { cursor:pointer; padding:.5rem .75rem; }
button:disabled { opacity:.55; cursor:default; }
button,a,input,select { outline-offset:4px; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible { outline:2px solid var(--cyan); }
a { color:inherit; text-decoration:none; } a:hover { color:var(--cyan); }
.icon { width:17px; height:17px; display:inline-block; vertical-align:middle; flex:none; stroke:currentColor; fill:none; stroke-width:1.65; stroke-linecap:round; stroke-linejoin:round; }
.brand { display:flex; align-items:center; gap:9px; }
.sidebar { position:fixed; inset:0 auto 0 0; width:var(--rail); border-right:1px solid; z-index:15; display:flex; flex-direction:column; }
.brandbar { flex:none; border-bottom:1px solid var(--line); display:flex; align-items:center; }
.navscroll { overflow-y:auto; scrollbar-width:thin; }
.navitem { display:flex; align-items:center; padding:5px 11px; line-height:1.3; font-size:13px; }
.railfoot { margin-top:auto; border-top:1px solid var(--line); padding:13px 18px; display:flex; align-items:center; gap:.6rem; font-size:12px; }
.workspace { margin-left:var(--rail); min-height:100vh; }
.topbar { border-bottom:1px solid var(--line); display:flex; align-items:center; position:sticky; top:0; z-index:8; }
.ghost { padding:5px 6px; }
.jump { position:relative; flex:1; min-width:0; }
.jump input { border:0; padding:4px 6px 4px 26px; width:100%; }
.jump>.icon { position:absolute; left:2px; top:6px; color:var(--muted); }
.results { position:absolute; z-index:9; top:calc(100% + 12px); left:0; width:min(390px,82vw); border:1px solid; border-radius:4px; padding:6px; }
.results a { display:block; padding:7px 10px; }
.toolend { margin-left:auto; display:flex; align-items:center; }
.stamp,.sub,.legend,.muted,.kpi small,.workspacefooter { color:var(--muted); }
.toolend select { font-size:12px; padding:5px; }
.avatar { display:grid; place-items:center; border:1px solid; border-radius:50%; width:28px; height:28px; }
.main { margin:auto; }
.eyeline { display:flex; align-items:center; gap:9px; }
.headrow,.panelhead,.controls,.legend,.rowline,.btnrow { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.headrow h1 { margin:0; }
.sub { margin:4px 0 0; line-height:1.6; }
.tag,.chip { display:inline-flex; align-items:center; gap:5px; white-space:nowrap; line-height:1.4; padding:4px 7px; }
.tag:before,.chip:before,.mapkey i { content:''; width:5px; height:5px; border-radius:50%; background:currentColor; }
.kpi,.panel { background:var(--panel); }
.kpi { position:relative; overflow:hidden; }
.kpi strong { font-variant-numeric:tabular-nums; }
.kpi em { color:var(--muted); font-style:normal; margin-left:5px; }
.panel { min-width:0; border:1px solid var(--line); overflow:hidden; margin-top:0; }
.panelhead { flex-wrap:wrap; }
.panelhead h2 { margin:0; display:flex; align-items:center; }
.panelhead>a { font-size:12px; color:var(--cyan); }
.split { display:grid; align-items:stretch; }
.legend { justify-content:flex-start; flex-wrap:wrap; }
.chart { width:100%; height:auto; display:block; max-height:235px; }
.bar { overflow:hidden; } .bar i { display:block; height:100%; }
.controls { padding:11px 17px; justify-content:flex-start; flex-wrap:wrap; border-bottom:1px solid var(--line); }
.controls input { min-width:130px; flex:1; max-width:350px; padding:.5rem .65rem; }
.controls select { max-width:100%; }
.tablewrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; white-space:nowrap; font-size:13px; text-align:left; }
th { font-weight:500; } td,th { border-bottom:1px solid; } tbody tr:last-child td { border-bottom:0; }
.empty { padding:24px; color:var(--muted); }
.map { width:100%; height:auto; min-height:200px; max-height:440px; }
.map text { fill:#475663; font-size:10px; }
.map a:hover circle,.map a:focus circle { stroke:#203a57; stroke-width:3; }
.drawer { width:min(490px,100%); height:100dvh; max-width:100vw; position:fixed; inset:0 0 0 auto; z-index:30; overflow:auto; border:0; border-left:1px solid; padding:0; margin:0; color:var(--ink); }
.drawerhead { display:flex; align-items:center; gap:10px; position:sticky; top:0; border-bottom:1px solid var(--line); padding:15px 18px; z-index:1; }
.drawerhead button { margin-left:auto; }
.drawercontent { padding:20px; }
.drawercontent h2 { font-size:25px; font-weight:600; letter-spacing:-.035em; overflow-wrap:anywhere; margin:0 0 15px; }
.drawercontent h3 { font-size:14px; font-weight:600; margin:19px 0 9px; }
.spec { margin:0; display:grid; grid-template-columns:minmax(0,auto) minmax(0,1fr); gap:0 16px; }
.spec dt,.spec dd { margin:0; border-bottom:1px solid var(--line); padding:7px 0; }
.spec dt { color:var(--muted); } .spec dd { text-align:right; overflow-wrap:anywhere; }
.record { display:flex; align-items:center; gap:.65rem; padding:9px 0; border-bottom:1px solid var(--line); }
.record span { color:var(--muted); font-size:12px; margin-left:auto; }
.btnrow { justify-content:flex-start; flex-wrap:wrap; margin:12px 0; }
.btnrow input { padding:.5rem .65rem; width:9rem; }
.primary { font-weight:600; }
.toggle { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 0; border-bottom:1px solid var(--line); }
.toggle input { accent-color:var(--cyan); width:18px; height:18px; }
.mapkey { display:inline-flex; align-items:center; gap:5px; } .mapkey i { display:inline-block; width:8px; height:8px; }
.workspacefooter { display:flex; justify-content:space-between; gap:10px; padding:12px 0; }
.board { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; padding:15px; }
.lane { min-height:110px; background:#f5f6f3; padding:9px; border:1px solid var(--line); border-top:2px solid #8498a9; border-radius:3px; }
.lane h3 { font-size:12px; margin:0 0 10px; color:var(--muted); }
.ticket { display:block; padding:10px; background:white; border:1px solid #d7deda; border-radius:3px; }
.ticket:hover { background:#edf2f5; }
.ticket small { display:block; color:var(--muted); }
.compact td,.compact th { padding-top:5px; padding-bottom:5px; }
.screenreader { position:absolute; clip:rect(0,0,0,0); clip-path:inset(50%); width:1px; height:1px; overflow:hidden; }
.srStatus { font-size:12px; color:var(--cyan); }
.slim .navtxt,.slim .railfoot span,.slim .brand span,.slim .navgroup { display:none; }
.slim .navitem { justify-content:center; min-height:37px; } .slim .brandbar { padding:0 16px; } .slim .navgroup+.navitem { margin-top:9px; }
.mobileveil { display:none; }
@media(max-width:1050px){.navitem{font-size:12px}.stamp{display:none}.board{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:840px){.sidebar{width:222px;transform:translateX(-101%)}.navopen .sidebar{transform:none}.navopen .mobileveil{display:block;position:fixed;inset:0;z-index:13;border:0;border-radius:0}.slim .navtxt,.slim .railfoot span,.slim .brand span,.slim .navgroup{display:initial}.slim .navitem{justify-content:flex-start}.avatar{display:none}}
@media(max-width:640px){.headrow{align-items:flex-start;flex-wrap:wrap}.controls{padding:12px}.controls select,.controls input{font-size:12px}.workspacefooter{flex-wrap:wrap}.board{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media print{html,body,.workspace,.panel,.panelhead,.kpi,.main,th,td{color:#141e28!important;background:white!important}.sidebar,.topbar,.controls,.headrow button,.btnrow,.workspacefooter,.drawer{display:none!important}.workspace{margin:0}.main{padding:0}.panel{break-inside:avoid}.stamp,.muted,.sub,.eyeline,th{color:#455867!important}}
html:not([data-reduce-motion="true"]) .navitem,html:not([data-reduce-motion="true"]) .ticket,html:not([data-reduce-motion="true"]) .bar i{transition:background-color .16s,color .16s,width .22s}
html:not([data-reduce-motion="true"]) .sidebar{transition:transform .15s ease}

/* Shared light theme approved for the SOC/NDR interface. */
:root {
  color-scheme: light;
  --bg: #f8f9f7;
  --panel: #fff;
  --line: #dce1df;
  --ink: #20252b;
  --muted: #5b6872;
  --cyan: #23538a;
  --rail: 219px;
  --ui-font: "Source Sans 3", "Segoe UI", "Noto Sans SC", "Microsoft YaHei", "Yu Gothic UI", "Malgun Gothic", sans-serif;
  font-family: var(--ui-font);
}
html, body, .workspace { background: var(--bg); }
button, select, input { background: #fff; color: var(--ink); border-color: #cbd2d4; border-radius: 4px; }
input::placeholder { color: #6d7780; opacity: 1; }
button:hover, select:hover { border-color: #8f9ca6; }
button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible { outline-color: var(--cyan); }
.sidebar { background: #f6f7f4; border-color: #d8dedb; }
.brandbar, .topbar { height: 61px; min-height: 61px; }
.brandbar { padding: 0 20px; }
.brand { color: #222b31; font: 690 19px/1 var(--ui-font); letter-spacing: .025em; }
.brand svg { width: 26px; height: 28px; }
.brand svg path:first-child { fill: #274d78; }
.brand svg path:last-child { fill: #6f8fac; }
.navscroll { padding: 10px 12px 15px; scrollbar-color: #c2c9c8 transparent; }
.navgroup { font: 560 11px/1.55 var(--ui-font); color: #66716f; margin: 15px 9px 6px; letter-spacing: .015em; text-transform: none; }
.navitem { color: #404c53; min-height: 32px; border-radius: 3px; gap: 10px; }
.navitem .icon { width: 15px; height: 15px; color: #6a777c; }
.navitem:hover, .navitem:focus-visible { background: #e9eeed; color: #203c55; }
.navitem[aria-current] { color: #214d7e; background: #e4ebf1; box-shadow: inset 2px 0 #315f90; font-weight: 650; }
.navitem[aria-current] .icon { color: #315f90; }
.railfoot { color: #596870; }
.topbar { background: #fff; backdrop-filter: none; gap: 17px; padding-inline: clamp(16px, 2.2vw, 36px); }
.ghost { background: transparent; border-color: transparent; color: #40505c; }
.ghost:hover { background: #eef1f1; border-color: transparent; }
.jump { max-width: 460px; }
.jump input { background: transparent; color: #27333b; }
.toolend { gap: 17px; }
.toolend select { color: #4b5761; background: #fff; }
.avatar { background: #e8edf2; color: #274f78; border-color: #d7dee4; font: 600 11px var(--ui-font); }
.meta,.stamp,.code,.eyeline,.chart text,.map text { font-family: var(--ui-font); font-variant-numeric: tabular-nums; }
.stamp { font-size: 12px; }
.main { max-width: 1690px; padding: 23px clamp(18px,3vw,48px) 38px; }
.eyeline { color: #63717b; font-size: 12px; line-height: 1.5; letter-spacing: 0; }
.eyeline i { display: none; }
.headrow { margin: 7px 0 22px; }
.headrow h1 { color: #20252b; font: 640 clamp(27px,2.3vw,36px)/1.24 var(--ui-font); letter-spacing: -.035em; }
.headrow .tag { color:#43554e; background:#eef2ec; border:1px solid #d9e1d9; border-radius:3px; font-size:12px; font-weight:500; }
.headrow .tag:before { background:#64836f; }
.kpis { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; padding:16px 0; background:#fff; border:1px solid var(--line); border-radius:4px; margin-bottom:18px; }
.kpi { padding:0 20px; border:0; border-radius:0; border-right:1px solid var(--line); background:transparent; }
.kpi:last-child { border-right:0; }
.kpi:hover { color:var(--cyan); }
.kpi .icon { display:none; }
.kpi small { font-size:12px; color:#56616b; }
.kpi strong { display:flex; align-items:baseline; gap:4px; font-size:clamp(25px,2vw,34px); font-weight:600; line-height:1.33; letter-spacing:-.035em; }
.kpi em { font-size:13px; font-weight:450; }
.split { grid-template-columns:minmax(0,1.8fr) minmax(220px,1fr); gap:18px; }
.panel { border-radius:4px; margin-bottom:18px; }
.split .panel { height:calc(100% - 18px); }
.panelhead { min-height:51px; padding:11px 19px; border-bottom:1px solid #e2e6e3; }
.panelhead h2 { color:#263039; font-size:16px; font-weight:610; gap:8px; }
.panelhead h2 .icon { display:none; }
.panelhead a { font-weight:550; }
.panelhead select { font-size:12px; padding:4px 7px; }
.panelbody { padding:15px 19px; }
.chart { min-height:145px; }
.chart text { fill:#60717e; font-size:11px; }
.chartgrid { stroke:#d9dedd; stroke-dasharray:2 4; }
.chart #wash stop { stop-color:#6c92b5; }
.chart #wash stop:first-child { stop-opacity:.18; }
.chart .series-line { stroke:#2c5c8d; stroke-width:2.5px; }
.legend { gap:16px; font-size:12px; }
.legend b { font-weight:560; color:#3d4b55; }
.mixrow { margin:1px 0 8px; }
.mixrow:last-child { margin-bottom:0; }
.mixrow .rowline { font-size:12px; margin-bottom:3px; color:#3c4953; }
.mixrow .rowline a { font-weight:540; }
.bar { height:4px; border-radius:0; background:#edf0ef; }
.bar i { border-radius:0; }
.protocols .bar i { background:#6587a9; } .protocols .mixrow:first-child .bar i { background:#305d89; }
th { background:#f5f6f3; color:#57626a; font-size:12px; }
td,th { border-color:#e0e4e1; padding:10px 16px; }
tbody tr:hover td { background:#f4f7f8; }
td a, .alink, .record { color:#23538a; }
.chip { border-radius:3px; font-size:11px; font-weight:520; padding:3px 7px; }
.chip.critical { color:#903c3a; background:#f7e8e5; }
.chip.high { color:#87531d; background:#f8efdf; }
.chip.medium { color:#725d26; background:#f5f1e4; }
.chip.low { color:#335f52; background:#e9f2ec; }
.results, .drawer { background:#fff; border-color:var(--line); }
.results { box-shadow:0 9px 28px #1728351a; }
.results a:hover, .drawerhead { background:#f3f5f2; }
.primary { color:#fff; background:#23538a; border-color:#23538a; }
.primary:hover { background:#193f6c; }
.drawer::backdrop, .navopen .mobileveil { background:#16232d52; }
.workspacefooter { font-size:11px; }
.slim { --rail:62px; }
.stream-control, .stream-status { display:flex; align-items:center; gap:9px; }
.stream-control { flex-wrap:wrap; justify-content:flex-end; color:#4a6577; font-size:12px; }
.stream-control button { padding:4px 10px; background:white; border:1px solid #c4d3de; border-radius:5px; color:#214e71; }
.stream-status i { width:7px; height:7px; border-radius:50%; background:#398474; }
[data-stream-paused="true"] .stream-status i { background:#89939a; }
.sample-time,.lane-rate,.lane-host small { font-variant-numeric:tabular-nums; }
.sample-time { color:#556b7c; font-size:12px; }
.flow-lanes { padding:0 19px; background:linear-gradient(90deg,#fff,#f5f9fb 55%,#fff); }
.flow-lane { --flow:#4585a8; --pale:#b3d2df; display:grid; grid-template-columns:60px minmax(86px,1fr) minmax(65px,2.1fr) minmax(86px,1fr) 80px; gap:14px; align-items:center; padding:8px 0; }
.flow-lane + .flow-lane { border-top:1px solid #e6ecef; }
.flow-lane:hover .lane-host b { color:#1c6395; }
.lane-alert { --flow:#ac6a38; --pale:#e0c6af; }
.lane-protocol { color:var(--flow); font-size:12px; font-weight:620; }
.lane-host { display:grid; line-height:1.3; min-width:0; }
.lane-host b { color:#283c4a; font-size:13px; font-weight:570; overflow-wrap:anywhere; }
.lane-host small { font-size:10px; color:#687885; }
.lane-rate { text-align:right; color:#3c566a; font-size:12px; white-space:nowrap; }
.flow-wire { height:12px; position:relative; overflow:hidden; background:linear-gradient(var(--pale),var(--pale)) center / 100% 1px no-repeat; }
.flow-wire::after { content:""; position:absolute; right:2px; top:3px; width:5px; height:5px; border-top:1.5px solid var(--flow); border-right:1.5px solid var(--flow); transform:rotate(45deg); }
.flow-wire i { position:absolute; top:4px; width:14px; height:4px; border-radius:3px; background:linear-gradient(90deg,transparent,var(--flow) 80%); animation:wire-packet var(--travel,2.7s) linear infinite; animation-delay:var(--offset,0s); }
.flow-wire i:nth-child(2) { animation-delay:calc(var(--offset) - var(--travel,2.7s) / 3); }
.flow-wire i:nth-child(3) { animation-delay:calc(var(--offset) - 2 * var(--travel,2.7s) / 3); }
@keyframes wire-packet { from { left:-16px; } to { left:100%; } }
.map-packets { stroke-width:3; stroke-dasharray:1.7 23.3; stroke-linecap:round; pointer-events:none; animation:map-packets var(--travel,2.8s) linear infinite; animation-delay:var(--offset,0s); }
@keyframes map-packets { to { stroke-dashoffset:-25; } }
[data-stream-paused="true"] :is(.map-packets,.flow-wire i),[data-reduce-motion="true"] :is(.map-packets,.flow-wire i) { animation-play-state:paused; }
@media(max-width:640px){
 .flow-lanes { padding:0 10px; }.flow-lane { grid-template-columns:34px minmax(58px,1fr) minmax(20px,.5fr) minmax(58px,1fr) 54px; gap:5px; }
 .lane-host b,.lane-rate,.lane-protocol { font-size:11px; }.lane-host small { font-size:9px; }
 .stream-control { column-gap:6px; }.stream-status { gap:4px; }
}
@media(max-width:1050px){:root{--rail:185px}.slim{--rail:62px}}
@media(max-width:840px){:root,.slim{--rail:0px}.topbar,.brandbar{height:54px;min-height:54px}.main{padding:17px 16px}.kpis{grid-template-columns:repeat(4,minmax(0,1fr))}.kpi{padding:0 12px}.topbar{gap:7px}.split{grid-template-columns:minmax(0,1.5fr) minmax(150px,1fr);gap:12px}.navopen .mobileveil{display:block}}
@media(max-width:640px){.split{display:block}.main{padding:15px 11px}.kpis{grid-template-columns:repeat(2,minmax(0,1fr));padding:0}.kpi{padding:10px 13px}.kpi:nth-child(2){border-right:0}.kpi:nth-child(-n+2){border-bottom:1px solid var(--line)}.headrow{margin:7px 0 14px}.toolend{gap:4px}.topbar{padding:7px 9px}.panelhead,.panelbody{padding:11px 13px}.panelhead{min-height:43px}.headrow h1{font-size:27px}.toolend select{max-width:96px}.chart{min-height:120px}.stamp{display:none}.legend{font-size:11px}.tablewrap{max-width:100%}.railfoot{padding-bottom:max(12px,env(safe-area-inset-bottom))}}