/* ============================================================
   vh-ds.css — loaded ONLY by data-security.html.
   Product-window dashboard mockups (DSPM + blast radius) in the
   VenusHawk app's deep-carbon dark theme. Every selector is ds-
   prefixed; no shared class is restyled, so no other page can be
   affected by this file.
   ============================================================ */

/* ---------- scoped product palette ---------- */
.ds-win{--ds-bg:#070709;--ds-panel:#101014;--ds-panel2:#17171C;--ds-line:rgba(255,255,255,0.1);--ds-line2:rgba(255,255,255,0.2);--ds-blue:#3B82F6;--ds-mint:#22C55E;--ds-mintink:#4ADE80;--ds-purple:#8B5CF6;--ds-pink:#F472B6;--ds-crit:#EF4444;--ds-high:#F97316;--ds-amber:#EAB308;--ds-gray:#8E8E97;--ds-head:#F5F5F8;--ds-txt:#D2D2D9;--ds-mut:#9EA0AA}

/* ---------- window frame ---------- */
.ds-win{margin-top:var(--s-6);border:1px solid var(--line-2);border-radius:18px;background:var(--ds-bg);overflow:hidden;color:var(--ds-txt);box-shadow:0 30px 80px -30px rgba(0,0,0,0.85),0 0 70px -34px rgba(139,92,246,0.36)}
.ds-win__chrome{display:flex;align-items:center;gap:0.8rem;padding:0.7rem var(--s-5);border-bottom:1px solid var(--ds-line);background:#0A0A0D;font-family:var(--font-mono);font-size:var(--t-2xs);letter-spacing:0.1em;text-transform:uppercase;color:var(--ds-mut)}
.ds-dots{display:inline-flex;gap:0.34rem;flex:none}
.ds-dots i{width:9px;height:9px;border-radius:50%}
.ds-dots i:nth-child(1){background:#FE5F57}
.ds-dots i:nth-child(2){background:#FEBC2E}
.ds-dots i:nth-child(3){background:#28C840}
.ds-url{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ds-live{margin-left:auto;flex:none;display:inline-flex;align-items:center;gap:0.45rem;color:var(--ds-mintink);font-family:var(--font-mono);font-size:var(--t-2xs);letter-spacing:0.14em;text-transform:uppercase}
.ds-live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ds-mintink);animation:ds-pulse 2.2s ease-out infinite}
.ds-note{margin-top:var(--s-3);font-family:var(--font-mono);font-size:var(--t-2xs);letter-spacing:0.16em;text-transform:uppercase;color:var(--txt-mut)}
.ds-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@keyframes ds-pulse{0%{box-shadow:0 0 0 0 rgba(74,222,128,0.5)}70%{box-shadow:0 0 0 7px rgba(74,222,128,0)}100%{box-shadow:0 0 0 0 rgba(74,222,128,0)}}

/* ---------- command band ---------- */
.ds-hero{position:relative;display:grid;grid-template-columns:1fr auto;gap:var(--s-5);align-items:center;padding:var(--s-5);border-bottom:1px solid var(--ds-line);overflow:hidden}
.ds-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 120% at 8% 0%,rgba(139,92,246,0.09),transparent 60%),radial-gradient(50% 110% at 92% 100%,rgba(59,130,246,0.07),transparent 60%);pointer-events:none}
.ds-hero__copy{position:relative;display:grid;gap:0.55rem}
.ds-eyebrow{display:inline-flex;align-items:center;gap:0.5rem;font-family:var(--font-mono);font-size:var(--t-2xs);letter-spacing:0.16em;text-transform:uppercase;color:var(--ds-mut)}
.ds-livedot{width:6px;height:6px;border-radius:50%;background:var(--ds-mintink);animation:ds-pulse 2.2s ease-out infinite}
.ds-hero__t{margin:0;font-size:1.25rem;font-weight:600;letter-spacing:-0.02em;color:var(--ds-head);max-width:34ch}
.ds-hero__t em{font-style:normal;color:var(--ds-high)}
.ds-hero__sub{display:flex;flex-wrap:wrap;gap:var(--s-4);font-family:var(--font-mono);font-size:var(--t-2xs);letter-spacing:0.12em;text-transform:uppercase;color:var(--ds-mut)}
.ds-hero__sub b{color:var(--ds-head);margin-right:0.35rem;font-size:0.85rem}

/* posture gauge (semicircle) */
.ds-gauge{position:relative;z-index:1;display:grid;justify-items:center;width:200px}
.ds-gauge svg{width:100%;display:block;overflow:visible}
.ds-gauge__bg{fill:none;stroke:rgba(255,255,255,0.1);stroke-width:9;stroke-linecap:round}
.ds-gauge__v{fill:none;stroke:var(--ds-high);stroke-width:9;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset 1.15s var(--ease) 0.1s;filter:drop-shadow(0 0 7px rgba(249,115,22,0.45))}
.ds-gauge.is-on .ds-gauge__v{stroke-dashoffset:32}
.ds-gauge__n{position:absolute;top:31%;font-family:var(--font-mono);font-size:2rem;font-weight:600;letter-spacing:-0.02em;color:var(--ds-head)}
.ds-gauge__l{position:absolute;top:62%;font-family:var(--font-mono);font-size:var(--t-2xs);letter-spacing:0.16em;text-transform:uppercase;color:var(--ds-mut)}
.ds-pill{margin-top:0.5rem;font-family:var(--font-mono);font-size:var(--t-2xs);letter-spacing:0.14em;text-transform:uppercase;color:#ffc487;border:1px solid rgba(249,115,22,0.38);background:rgba(249,115,22,0.1);border-radius:100px;padding:0.28rem 0.75rem;opacity:0;transform:translateY(5px);transition:opacity 0.5s var(--ease) 1.05s,transform 0.5s var(--ease) 1.05s}
.ds-gauge.is-on .ds-pill{opacity:1;transform:none}

/* ---------- KPI row ---------- */
.ds-kpis{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--ds-line)}
.ds-kpi{position:relative;display:grid;gap:0.28rem;align-content:start;padding:var(--s-4) var(--s-5);border-right:1px solid var(--ds-line);min-width:0}
.ds-kpi:last-child{border-right:0}
.ds-kpi::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--ds-purple),transparent 70%);opacity:0.6}
.ds-kpi--blue::before{background:linear-gradient(90deg,var(--ds-blue),transparent 70%)}
.ds-kpi--mint::before{background:linear-gradient(90deg,var(--ds-mint),transparent 70%)}
.ds-kpi--hot::before{background:linear-gradient(90deg,var(--ds-crit),transparent 70%)}
.ds-kpi__l{font-family:var(--font-mono);font-size:var(--t-2xs);letter-spacing:0.14em;text-transform:uppercase;color:var(--ds-mut)}
.ds-kpi>b{font-family:var(--font-mono);font-size:1.5rem;font-weight:600;letter-spacing:-0.02em;color:var(--ds-head);line-height:1.1;font-variant-numeric:tabular-nums}
.ds-kpi--hot>b{color:#ffb3a6}
.ds-kpi__d{position:absolute;top:calc(var(--s-4) - 0.1rem);right:var(--s-4);font-family:var(--font-mono);font-size:var(--t-2xs);padding:0.1rem 0.42rem;border-radius:100px;border:1px solid}
.ds-up{color:var(--ds-mintink);border-color:rgba(34,197,94,0.32);background:rgba(34,197,94,0.08)}
.ds-bad{color:var(--ds-crit);border-color:rgba(239,68,68,0.32);background:rgba(239,68,68,0.08)}
.ds-kpi__f{font-size:var(--t-2xs);color:var(--ds-mut)}
.ds-spark{width:100%;height:20px;margin-top:0.25rem}
.ds-spark polyline{fill:none;stroke:var(--ds-purple);stroke-width:1.6;opacity:0.75;stroke-dasharray:130;stroke-dashoffset:130}
.ds-kpi--blue .ds-spark polyline{stroke:var(--ds-blue)}
.ds-kpi--mint .ds-spark polyline{stroke:var(--ds-mint)}
.ds-kpi--hot .ds-spark polyline{stroke:var(--ds-crit)}
.ds-app.is-in .ds-spark polyline{animation:ds-draw130 1.2s var(--ease) forwards}
.ds-kpi:nth-child(2) .ds-spark polyline{animation-delay:0.1s}
.ds-kpi:nth-child(3) .ds-spark polyline{animation-delay:0.2s}
.ds-kpi:nth-child(4) .ds-spark polyline{animation-delay:0.3s}
@keyframes ds-draw130{to{stroke-dashoffset:0}}

/* ---------- panel grid ---------- */
.ds-grid{display:grid;grid-template-columns:1fr 1.15fr;grid-template-areas:"sens where" "sens stream" "comp comp"}
.ds-panel{padding:var(--s-4) var(--s-5);border-right:1px solid var(--ds-line);border-bottom:1px solid var(--ds-line);min-width:0}
.ds-panel--sens{grid-area:sens;border-bottom:0;display:flex;flex-direction:column}
.ds-heat{margin-top:auto;padding-top:var(--s-4)}
.ds-heat__h{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:var(--t-2xs);letter-spacing:0.14em;text-transform:uppercase;color:var(--ds-mut);margin-bottom:0.5rem}
.ds-heat__grid{display:grid;grid-template-columns:repeat(13,1fr);gap:3px}
.ds-heat__grid i{aspect-ratio:1;border-radius:2px;background:rgba(244,114,182,0.05);transition:background 0.7s var(--ease)}
@media (prefers-reduced-motion:reduce){.ds-heat__grid i{transition:none}}
.ds-panel--where{grid-area:where;border-right:0}
.ds-panel--stream{grid-area:stream;border-right:0;border-bottom:0;position:relative}
.ds-panel--comp{grid-area:comp;border-right:0;border-bottom:0;border-top:1px solid var(--ds-line)}
.ds-panel__h{display:flex;justify-content:space-between;align-items:center;gap:0.6rem;flex-wrap:wrap;font-family:var(--font-mono);font-size:var(--t-2xs);letter-spacing:0.14em;text-transform:uppercase;color:#B4B4BC;margin-bottom:var(--s-3)}
.ds-panel__m{color:var(--ds-mut);letter-spacing:0.1em}

/* sensitivity donut */
.ds-donutwrap{display:grid;grid-template-columns:auto 1fr;gap:var(--s-4);align-items:center}
.ds-donut{position:relative;width:132px;flex:none}
.ds-donut svg{width:100%;display:block}
.ds-donut circle{fill:none;stroke-width:6.5;transition:opacity 0.3s var(--ease),stroke-width 0.3s var(--ease)}
.ds-app.is-in .ds-donut circle{animation:ds-seg 1s var(--ease) both}
.ds-donut circle:nth-of-type(2){animation-delay:0.09s}
.ds-donut circle:nth-of-type(3){animation-delay:0.18s}
.ds-donut circle:nth-of-type(4){animation-delay:0.27s}
.ds-donut circle:nth-of-type(5){animation-delay:0.36s}
.ds-donut circle:nth-of-type(6){animation-delay:0.45s}
@keyframes ds-seg{from{stroke-dasharray:0 100}}
.ds-donut[data-hl] circle{opacity:0.22}
.ds-donut[data-hl="a"] circle[data-k="a"],.ds-donut[data-hl="b"] circle[data-k="b"],.ds-donut[data-hl="c"] circle[data-k="c"],.ds-donut[data-hl="d"] circle[data-k="d"],.ds-donut[data-hl="e"] circle[data-k="e"],.ds-donut[data-hl="f"] circle[data-k="f"]{opacity:1;stroke-width:8.4}
.ds-donut__c{position:absolute;inset:0;display:grid;place-content:center;text-align:center;gap:0.1rem}
.ds-donut__c b{font-family:var(--font-mono);font-size:0.95rem;color:var(--ds-head)}
.ds-donut__c span{font-family:var(--font-mono);font-size:0.55rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--ds-mut)}
.ds-legend{list-style:none;margin:0;padding:0;display:grid;gap:0.4rem}
.ds-legend li{display:grid;grid-template-columns:10px 1fr auto auto;gap:0.55rem;align-items:center;font-size:0.82rem;color:var(--ds-txt);border-radius:6px;padding:0.1rem 0.25rem}
.ds-legend li[data-k]{cursor:default}
.ds-legend li:hover{background:rgba(255,255,255,0.05)}
.ds-legend i{width:9px;height:9px;border-radius:3px}
.ds-legend b{font-family:var(--font-mono);font-weight:500;color:var(--ds-head)}
.ds-legend .ds-pct{font-family:var(--font-mono);color:var(--ds-mut);font-size:var(--t-2xs)}

/* where-it-lives bars */
.ds-bars{display:grid;gap:0.6rem}
.ds-bar{display:grid;grid-template-columns:118px 1fr 40px;gap:0.6rem;align-items:center;font-size:0.8rem;color:var(--ds-txt)}
.ds-bar__t{height:8px;border-radius:100px;background:rgba(255,255,255,0.09);overflow:hidden}
.ds-bar__t i{display:block;height:100%;width:0;border-radius:100px;background:linear-gradient(90deg,var(--ds-blue),var(--ds-purple));transition:width 0.9s var(--ease)}
.ds-app.is-in .ds-bar__t i{width:var(--w)}
.ds-app.is-in .ds-bar:nth-child(2) .ds-bar__t i{transition-delay:0.08s}
.ds-app.is-in .ds-bar:nth-child(3) .ds-bar__t i{transition-delay:0.16s}
.ds-app.is-in .ds-bar:nth-child(4) .ds-bar__t i{transition-delay:0.24s}
.ds-app.is-in .ds-bar:nth-child(5) .ds-bar__t i{transition-delay:0.32s}
.ds-app.is-in .ds-bar:nth-child(6) .ds-bar__t i{transition-delay:0.4s}
.ds-bar b{font-family:var(--font-mono);font-weight:500;color:var(--ds-head);text-align:right}

/* DDR live stream */
.ds-stream{list-style:none;margin:0;padding:0;display:grid;gap:0.45rem;align-content:start;min-height:210px}
.ds-stream li{display:grid;grid-template-columns:92px 1fr auto;gap:0.6rem;align-items:baseline;font-size:0.83rem;color:var(--ds-txt);padding:0.42rem 0.5rem;border-radius:8px;background:rgba(255,255,255,0.03)}
.ds-stream li.is-new{animation:ds-slide 0.45s var(--ease)}
.ds-stream__tx{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ds-tagchip{font-family:var(--font-mono);font-size:var(--t-2xs);letter-spacing:0.06em;text-transform:uppercase;text-align:center;padding:0.13rem 0.28rem;border-radius:6px;border:1px solid}
.ds-tagchip--end{color:#9cc0ff;border-color:rgba(59,130,246,0.35);background:rgba(59,130,246,0.08)}
.ds-tagchip--ai{color:#d8b4fe;border-color:rgba(139,92,246,0.35);background:rgba(139,92,246,0.08)}
.ds-tagchip--beh{color:#fde047;border-color:rgba(234,179,8,0.35);background:rgba(234,179,8,0.08)}
.ds-tagchip--cloud{color:#7cf1c0;border-color:rgba(34,197,94,0.35);background:rgba(34,197,94,0.08)}
.ds-tagchip--leak{color:#fca5a5;border-color:rgba(239,68,68,0.35);background:rgba(239,68,68,0.08)}
.ds-when{font-family:var(--font-mono);font-size:var(--t-2xs);color:var(--ds-mut);white-space:nowrap}
@keyframes ds-slide{from{opacity:0;transform:translateY(-9px)}}

/* compliance coverage bars */
.ds-comp{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--s-4)}
.ds-compcell{display:grid;gap:0.35rem;justify-items:center;text-align:center}
.ds-compcell__l{font-family:var(--font-mono);font-size:var(--t-2xs);letter-spacing:0.08em;text-transform:uppercase;color:var(--ds-mut)}
.ds-compcell__n{font-family:var(--font-mono);font-size:1.05rem;font-weight:600;color:var(--ds-head)}
.ds-compcell__bar{width:100%;height:6px;border-radius:100px;background:rgba(255,255,255,0.09);overflow:hidden}
.ds-compcell__bar i{display:block;height:100%;width:0;border-radius:100px;background:linear-gradient(90deg,var(--ds-mint),var(--ds-mintink));transition:width 0.9s var(--ease)}
.ds-app.is-in .ds-compcell__bar i{width:var(--w)}
.ds-compcell--warn .ds-compcell__bar i{background:linear-gradient(90deg,var(--ds-high),#fbbf24)}

/* ---------- blast-radius / access window ---------- */
.ds-blast__head{display:flex;flex-wrap:wrap;align-items:center;gap:0.6rem;padding:var(--s-4) var(--s-5);border-bottom:1px solid var(--ds-line)}
.ds-sev{font-family:var(--font-mono);font-size:var(--t-2xs);letter-spacing:0.1em;text-transform:uppercase;padding:0.18rem 0.5rem;border-radius:6px;border:1px solid}
.ds-sev--crit{color:#fca5a5;border-color:rgba(239,68,68,0.45);background:rgba(239,68,68,0.12)}
.ds-blast__t{font-family:var(--font-mono);font-size:0.92rem;font-weight:600;color:var(--ds-head)}
.ds-blast__chips{display:inline-flex;gap:0.4rem;flex-wrap:wrap;margin-left:auto}
.ds-ch{font-family:var(--font-mono);font-size:var(--t-2xs);letter-spacing:0.06em;text-transform:uppercase;padding:0.14rem 0.4rem;border-radius:6px;border:1px solid}
.ds-ch--red{color:#fca5a5;border-color:rgba(239,68,68,0.35);background:rgba(239,68,68,0.08)}
.ds-ch--pink{color:#f9a8d4;border-color:rgba(244,114,182,0.35);background:rgba(244,114,182,0.08)}
.ds-blast__body{display:grid;grid-template-columns:1.2fr 1fr}
.ds-access{border-right:1px solid var(--ds-line);padding:var(--s-4) var(--s-5);min-width:0}
.ds-reach{display:flex;flex-wrap:wrap;gap:var(--s-4);margin-bottom:var(--s-4);font-family:var(--font-mono);font-size:var(--t-2xs);letter-spacing:0.1em;text-transform:uppercase;color:var(--ds-mut)}
.ds-reach b{color:var(--ds-head);font-size:1.05rem;margin-right:0.35rem}
.ds-atable{display:grid;border:1px solid var(--ds-line);border-radius:10px;overflow:hidden}
.ds-arow{display:grid;grid-template-columns:1fr 92px 96px;gap:0.6rem;align-items:center;padding:0.5rem 0.75rem;border-bottom:1px solid var(--ds-line);font-size:0.82rem;background:rgba(255,255,255,0.025);min-width:0}
.ds-arow:last-child{border-bottom:0}
.ds-arow--h{font-family:var(--font-mono);font-size:var(--t-2xs);letter-spacing:0.12em;text-transform:uppercase;color:var(--ds-mut);background:rgba(255,255,255,0.05)}
.ds-app-in .ds-arow:not(.ds-arow--h){animation:ds-slide 0.4s var(--ease) both}
.ds-aid{font-family:var(--font-mono);font-size:0.78rem;color:var(--ds-head);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ds-arole{font-family:var(--font-mono);font-size:var(--t-2xs);color:var(--ds-mut);text-align:center}
.ds-flag{font-family:var(--font-mono);font-size:var(--t-2xs);letter-spacing:0.06em;text-transform:uppercase;text-align:center;padding:0.12rem 0.3rem;border-radius:6px;border:1px solid}
.ds-flag--ok{color:#7cf1c0;border-color:rgba(34,197,94,0.32);background:rgba(34,197,94,0.07)}
.ds-flag--warn{color:#fde047;border-color:rgba(234,179,8,0.35);background:rgba(234,179,8,0.08)}
.ds-flag--bad{color:#fca5a5;border-color:rgba(239,68,68,0.4);background:rgba(239,68,68,0.1)}
.ds-restrict{appearance:none;font-family:var(--font-mono);font-size:var(--t-2xs);letter-spacing:0.06em;text-transform:uppercase;color:#fca5a5;border:1px solid rgba(239,68,68,0.4);background:rgba(239,68,68,0.08);border-radius:7px;padding:0.16rem 0.42rem;cursor:pointer;transition:background 0.2s var(--ease),transform 0.2s var(--ease)}
.ds-restrict:hover{background:rgba(239,68,68,0.16);transform:translateY(-1px)}
.ds-arow[data-state="restricted"] .ds-restrict{color:var(--ds-mintink);border-color:rgba(34,197,94,0.4);background:rgba(34,197,94,0.08);cursor:default;transform:none}
.ds-side{padding:var(--s-4) var(--s-5);display:grid;gap:var(--s-4);align-content:start}
.ds-side__blk{display:grid;gap:0.45rem}
.ds-side__l{font-family:var(--font-mono);font-size:var(--t-2xs);letter-spacing:0.12em;text-transform:uppercase;color:var(--ds-mut)}
.ds-blast__stat{font-family:var(--font-mono);font-size:1.35rem;font-weight:600;color:#ffb3a6;letter-spacing:-0.01em}
.ds-blast__desc{font-size:0.82rem;color:var(--ds-txt);line-height:1.5}
.ds-comprow{display:flex;flex-wrap:wrap;gap:0.4rem}
.ds-cpill{display:inline-flex;align-items:center;gap:0.35rem;font-family:var(--font-mono);font-size:var(--t-2xs);letter-spacing:0.06em;text-transform:uppercase;padding:0.2rem 0.5rem;border-radius:100px;border:1px solid}
.ds-cpill::before{content:"";width:6px;height:6px;border-radius:50%}
.ds-cpill--pass{color:#7cf1c0;border-color:rgba(34,197,94,0.32)}
.ds-cpill--pass::before{background:var(--ds-mintink)}
.ds-cpill--fail{color:#fca5a5;border-color:rgba(239,68,68,0.4)}
.ds-cpill--fail::before{background:var(--ds-crit)}
.ds-cpill[data-c="pci"].is-pass{color:#7cf1c0;border-color:rgba(34,197,94,0.32)}
.ds-cpill[data-c="pci"].is-pass::before{background:var(--ds-mintink)}

/* ---------- responsive ---------- */
@media (max-width:900px){
 .ds-hero{grid-template-columns:1fr;justify-items:start}
 .ds-gauge{justify-self:center;width:176px}
 .ds-kpis{grid-template-columns:repeat(2,1fr)}
 .ds-kpi{border-bottom:1px solid var(--ds-line)}
 .ds-kpi:nth-child(2n){border-right:0}
 .ds-grid{grid-template-columns:1fr;grid-template-areas:"sens" "where" "stream" "comp"}
 .ds-panel{border-right:0}
 .ds-panel--sens{border-bottom:1px solid var(--ds-line)}
 .ds-panel--where{border-bottom:1px solid var(--ds-line)}
 .ds-stream{min-height:0}
 .ds-comp{grid-template-columns:repeat(3,1fr);gap:var(--s-3) var(--s-4)}
 .ds-blast__body{grid-template-columns:1fr}
 .ds-access{border-right:0;border-bottom:1px solid var(--ds-line)}
}
@media (max-width:640px){
 .ds-url{display:none}
 .ds-donutwrap{grid-template-columns:1fr;justify-items:center}
 .ds-bar{grid-template-columns:100px 1fr 36px}
 .ds-stream li{grid-template-columns:82px 1fr}
 .ds-stream .ds-when{display:none}
 .ds-stream__tx{white-space:normal}
 .ds-comp{grid-template-columns:repeat(2,1fr)}
 .ds-blast__chips{margin-left:0}
 .ds-arow{grid-template-columns:1fr 84px}
 .ds-arole{display:none}
}

/* ---------- reduced motion: render final states ---------- */
/* live hero monitor — classification stream */
.ds-mon{position:relative;z-index:1;display:grid;gap:0.55rem;width:238px;padding:var(--s-4);border:1px solid var(--ds-line);border-radius:12px;background:rgba(139,92,246,0.04)}
.ds-mon__top{display:flex;justify-content:space-between;align-items:baseline;gap:0.5rem}
.ds-mon__l{font-family:var(--font-mono);font-size:var(--t-2xs);letter-spacing:0.14em;text-transform:uppercase;color:var(--ds-mut)}
.ds-mon__n{font-family:var(--font-mono);font-size:1.7rem;font-weight:600;line-height:1;color:var(--ds-head)}
.ds-mon__viz{display:grid;gap:4px;height:52px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 92%,transparent)}
.ds-mon__viz i{height:6px;border-radius:3px;background-image:repeating-linear-gradient(90deg,var(--c,#3B82F6) 0 9px,transparent 9px 24px);background-size:33px 100%;animation:ds-lane linear infinite;opacity:0.85}
@keyframes ds-lane{to{background-position:-33px 0}}
.ds-mon__pill{justify-self:start;display:inline-flex;align-items:center;gap:0.4rem;font-family:var(--font-mono);font-size:var(--t-2xs);letter-spacing:0.12em;text-transform:uppercase;color:#ffc487;border:1px solid rgba(249,115,22,0.38);background:rgba(249,115,22,0.1);border-radius:100px;padding:0.2rem 0.55rem}
.ds-mon__pill::before{content:"";width:6px;height:6px;border-radius:50%;background:#F97316;animation:ds-pulse 1.8s ease-out infinite}
.ds-mon__foot{font-family:var(--font-mono);font-size:var(--t-2xs);color:var(--ds-mut)}
@media (max-width:900px){.ds-mon{width:auto;justify-self:stretch}}
@media (prefers-reduced-motion:reduce){.ds-mon__viz i,.ds-mon__pill::before{animation:none}}

@media (prefers-reduced-motion:reduce){
 .ds-live::before,.ds-livedot{animation:none}
 .ds-gauge__v{transition:none;stroke-dashoffset:32}
 .ds-pill{opacity:1;transform:none;transition:none}
 .ds-spark polyline{animation:none!important;stroke-dashoffset:0}
 .ds-app.is-in .ds-donut circle,.ds-donut circle{animation:none}
 .ds-app.is-in .ds-bar__t i,.ds-app.is-in .ds-compcell__bar i{transition:none;width:var(--w)}
 .ds-stream li.is-new{animation:none}
 .ds-app-in .ds-arow:not(.ds-arow--h){animation:none}
 .ds-restrict,.ds-legend li,.ds-bar__t i{transition:none}
}

/* ================= lineage explorer (ds-x) ================= */
.ds-x__body{display:grid;grid-template-columns:190px minmax(0,1fr) 272px;align-items:stretch}
.ds-x__rail{display:flex;flex-direction:column;gap:0.5rem;padding:var(--s-4);border-right:1px solid var(--ds-line);background:rgba(255,255,255,0.015)}
.ds-x__railh{font-family:var(--font-mono);font-size:var(--t-2xs);letter-spacing:0.14em;text-transform:uppercase;color:var(--ds-mut);margin-bottom:0.2rem}
.ds-x__item{appearance:none;text-align:left;display:grid;gap:0.3rem;padding:0.62rem 0.7rem;border:1px solid var(--ds-line);border-radius:10px;background:rgba(255,255,255,0.02);cursor:pointer;color:var(--ds-txt);transition:border-color 0.2s var(--ease),background 0.2s var(--ease)}
.ds-x__item:hover{border-color:var(--ds-line2)}
.ds-x__item[aria-selected="true"]{border-color:rgba(139,92,246,0.55);background:rgba(139,92,246,0.08)}
.ds-x__item b{font-family:var(--font-mono);font-size:0.82rem;font-weight:600;color:var(--ds-head)}
.ds-x__meta{display:flex;align-items:center;gap:0.45rem;font-family:var(--font-mono);font-size:var(--t-2xs);color:var(--ds-mut)}
.ds-x__item small{font-size:0.71rem;color:var(--ds-mut)}
.ds-x__railf{margin-top:auto;padding-top:var(--s-3);font-size:0.72rem;line-height:1.45;color:var(--ds-mut);border-top:1px solid var(--ds-line)}
.ds-ch--amb{color:#fde047;border-color:rgba(234,179,8,0.35);background:rgba(234,179,8,0.08)}

.ds-x__main{min-width:0;display:flex;flex-direction:column;border-right:1px solid var(--ds-line)}

/* toolbar */
.ds-x__bar{display:flex;align-items:center;gap:0.6rem;padding:0.55rem var(--s-4);border-bottom:1px solid var(--ds-line);background:rgba(255,255,255,0.02)}
.ds-x__search{flex:0 1 240px;display:inline-flex;align-items:center;gap:0.45rem;min-width:120px;padding:0.3rem 0.6rem;border:1px solid var(--ds-line);border-radius:8px;background:rgba(0,0,0,0.35);color:var(--ds-mut)}
.ds-x__search svg{width:12px;height:12px;flex:none}
.ds-x__search input{all:unset;width:100%;min-width:0;font-size:0.76rem;color:var(--ds-txt)}
.ds-x__search input::placeholder{color:var(--ds-mut)}
.ds-x__search:focus-within{border-color:rgba(139,92,246,0.55)}
.ds-x__fchip{appearance:none;display:inline-flex;align-items:center;gap:0.5rem;border:1px solid rgba(139,92,246,0.45);border-radius:100px;background:rgba(139,92,246,0.1);color:#c9b8fb;font-family:var(--font-mono);font-size:var(--t-2xs);letter-spacing:0.06em;text-transform:uppercase;padding:0.28rem 0.7rem;cursor:pointer;white-space:nowrap}
.ds-x__fchip span{color:var(--ds-mut)}
.ds-x__fchip[aria-pressed="false"]{border-color:var(--ds-line);background:none;color:var(--ds-mut)}
.ds-x__zoom{display:inline-flex;margin-left:auto;border:1px solid var(--ds-line);border-radius:8px;overflow:hidden;flex:none}
.ds-x__zoom button{appearance:none;border:0;background:rgba(255,255,255,0.03);color:var(--ds-txt);font-family:var(--font-mono);font-size:0.72rem;padding:0.28rem 0.55rem;cursor:pointer;border-right:1px solid var(--ds-line)}
.ds-x__zoom button:last-child{border-right:0}
.ds-x__zoom button:hover{background:rgba(255,255,255,0.08)}

/* canvas + stage */
.ds-x__canvas{position:relative;flex:1;overflow:hidden;display:flex;background:radial-gradient(rgba(255,255,255,0.06) 1px,transparent 1px);background-size:22px 22px;background-position:11px 11px}
.ds-x__stage{position:relative;width:100%;margin:auto;display:flex;flex-direction:column;gap:2.6rem;padding:var(--s-4) var(--s-4) var(--s-5);transform-origin:50% 50%;transition:transform 0.25s var(--ease)}
.ds-x__wires{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:0}
.ds-x__wires path{fill:none;stroke-width:1.5}
.ds-x__wires .w-bad{stroke:rgba(239,68,68,0.55)}
.ds-x__wires .w-warn{stroke:rgba(234,179,8,0.55);stroke-dasharray:5 4}
.ds-x__wires .w-ok{stroke:rgba(255,255,255,0.18);stroke-dasharray:2 5}
.ds-x__wires .w-drop{stroke:rgba(255,122,69,0.6);stroke-dasharray:5 4}
.ds-x__wires .ds-xtoken{fill:#FF7A45;filter:drop-shadow(0 0 6px rgba(255,122,69,0.9))}

/* tier 1: users */
.ds-x__users{position:relative;z-index:2;display:flex;gap:0.7rem;justify-content:center;flex-wrap:wrap}
.ds-xu{appearance:none;display:flex;align-items:center;gap:0.55rem;padding:0.5rem 0.7rem;border:1px solid var(--ds-line2);border-radius:10px;background:rgba(16,16,20,0.92);color:var(--ds-txt);cursor:pointer;text-align:left;transition:border-color 0.2s var(--ease),box-shadow 0.2s var(--ease),opacity 0.25s var(--ease)}
.ds-xu:hover{border-color:rgba(255,255,255,0.4)}
.ds-xu.is-sel{border-color:rgba(139,92,246,0.7);box-shadow:0 0 0 1px rgba(139,92,246,0.35),0 0 22px -8px rgba(139,92,246,0.6)}
.ds-xu.is-dim{opacity:0.22}
.ds-xu__av{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-family:var(--font-mono);font-size:0.66rem;font-weight:600;color:#0A0A0D;background:#8B5CF6}
.ds-xu[data-kind="svc"] .ds-xu__av{background:#3B82F6}
.ds-xu[data-kind="ai"] .ds-xu__av{background:#22C55E}
.ds-xu.is-flag .ds-xu__av{background:#FF7A45}
.ds-xu__tx{display:grid;min-width:0}
.ds-xu__tx b{font-family:var(--font-mono);font-size:0.7rem;font-weight:600;color:var(--ds-head);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px}
.ds-xu__tx small{font-size:0.62rem;color:var(--ds-mut);white-space:nowrap}

/* tier 2: files */
.ds-x__files{position:relative;z-index:2;display:flex;gap:1.6rem;justify-content:center;align-items:flex-start;flex-wrap:wrap}
.ds-xf{appearance:none;border:0;background:none;padding:0;display:grid;gap:0.35rem;justify-items:center;cursor:pointer;color:var(--ds-txt);width:104px;transition:opacity 0.25s var(--ease)}
.ds-xf.is-dim{opacity:0.22}
.ds-xf__ring{position:relative;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;border:2px solid var(--ds-line2);background:rgba(16,16,20,0.95);color:var(--ds-mut);transition:border-color 0.2s var(--ease),box-shadow 0.2s var(--ease)}
.ds-xf__ring svg{width:20px;height:20px}
.ds-xf[data-risk="bad"] .ds-xf__ring{border-color:rgba(239,68,68,0.65);color:#fca5a5}
.ds-xf[data-risk="warn"] .ds-xf__ring{border-color:rgba(234,179,8,0.6);color:#fde047}
.ds-xf.is-sel .ds-xf__ring{box-shadow:0 0 0 3px rgba(255,122,69,0.35),0 0 20px -4px rgba(255,122,69,0.6);border-color:#FF7A45;color:#FFB394}
.ds-xf:hover .ds-xf__ring{border-color:rgba(255,255,255,0.5)}
.ds-xf__n{position:absolute;top:-5px;right:-5px;min-width:17px;height:17px;padding:0 4px;border-radius:100px;display:grid;place-items:center;font-family:var(--font-mono);font-size:0.6rem;font-weight:600;color:#fff;background:#EF4444}
.ds-xf[data-risk="warn"] .ds-xf__n{background:#B45309}
.ds-xf[data-risk="ok"] .ds-xf__n{background:#3f3f46}
.ds-xf__tx{display:grid;justify-items:center;gap:0.1rem;min-width:0;max-width:104px}
.ds-xf__tx b{font-family:var(--font-mono);font-size:0.68rem;font-weight:600;color:var(--ds-head);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:104px}
.ds-xf__tx small{font-size:0.6rem;color:var(--ds-mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:104px}

/* tier 3: event chain */
.ds-x__chain{position:relative;z-index:2;display:flex;align-items:flex-start;justify-content:center;gap:0}
.ds-xc{appearance:none;border:0;background:none;padding:0;display:grid;gap:0.35rem;justify-items:center;cursor:pointer;color:var(--ds-txt);width:104px;flex:none;transition:opacity 0.25s var(--ease)}
.ds-xc.is-dim{opacity:0.22}
.ds-xc__ring{position:relative;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;border:1.5px solid rgba(99,131,246,0.55);background:rgba(16,16,20,0.95);color:#93b1f8;transition:border-color 0.2s var(--ease),box-shadow 0.2s var(--ease)}
.ds-xc__ring svg{width:16px;height:16px}
.ds-xc[data-risk="warn"] .ds-xc__ring{border-color:rgba(234,179,8,0.7);color:#fde047}
.ds-xc[data-risk="bad"] .ds-xc__ring{border-color:rgba(239,68,68,0.7);color:#fca5a5}
.ds-xc[data-risk="ok"] .ds-xc__ring{border-color:rgba(34,197,94,0.6);color:#7cf1c0}
.ds-xc.is-sel .ds-xc__ring{box-shadow:0 0 0 3px rgba(255,122,69,0.35),0 0 18px -4px rgba(255,122,69,0.65);border-color:#FF7A45;color:#FFB394}
.ds-xc__bang{position:absolute;top:-6px;right:-6px;width:15px;height:15px;border-radius:50%;display:grid;place-items:center;font-size:0.6rem;font-weight:700;color:#0A0A0D;background:#EAB308}
.ds-xc__tx{display:grid;justify-items:center;gap:0.08rem}
.ds-xc__tx b{font-family:var(--font-mono);font-size:0.64rem;font-weight:600;color:var(--ds-head);text-align:center;line-height:1.25;max-width:100px;overflow:hidden}
.ds-xc__tx small{font-size:0.6rem;color:var(--ds-mut);max-width:100px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ds-xc__tm{font-family:var(--font-mono);font-size:0.58rem;color:var(--ds-mut)}
.ds-xln{flex:1 1 22px;max-width:64px;height:0;margin-top:20px;border-top:1.5px dashed rgba(99,131,246,0.45);position:relative}
.ds-xln::after{content:"";position:absolute;right:-1px;top:-4px;border:4px solid transparent;border-left-color:rgba(99,131,246,0.6)}

/* entrance */
@keyframes ds-pop{from{opacity:0;transform:scale(0.82)}to{opacity:1;transform:scale(1)}}
.ds-x__stage .is-born{animation:ds-pop 0.38s var(--ease) backwards}

/* inspector */
.ds-x__insp{padding:var(--s-4);display:grid;gap:0.65rem;align-content:start;background:rgba(255,255,255,0.015)}
.ds-xi__hd{display:flex;align-items:center;gap:0.6rem}
.ds-xi__hd .ds-xi__ic{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;border:1.5px solid rgba(234,179,8,0.6);color:#fde047;background:rgba(234,179,8,0.07)}
.ds-xi__hd .ds-xi__ic svg{width:15px;height:15px}
.ds-xi__hd[data-risk="bad"] .ds-xi__ic{border-color:rgba(239,68,68,0.6);color:#fca5a5;background:rgba(239,68,68,0.07)}
.ds-xi__hd[data-risk="ok"] .ds-xi__ic{border-color:rgba(34,197,94,0.55);color:#7cf1c0;background:rgba(34,197,94,0.06)}
.ds-xi__hd[data-risk="info"] .ds-xi__ic{border-color:rgba(99,131,246,0.55);color:#93b1f8;background:rgba(59,130,246,0.07)}
.ds-xi__hd b{font-family:var(--font-mono);font-size:0.92rem;font-weight:600;color:var(--ds-head);line-height:1.3}
.ds-xi__hd small{display:block;font-family:var(--font-mono);font-size:var(--t-2xs);color:var(--ds-mut);margin-top:0.1rem}
.ds-xi__kv{display:grid;gap:0}
.ds-xi__kv > div{display:grid;grid-template-columns:88px 1fr;gap:0.7rem;align-items:baseline;padding:0.32rem 0;border-bottom:1px solid rgba(255,255,255,0.05);font-size:0.76rem}
.ds-xi__kv > div:last-child{border-bottom:0}
.ds-xi__kv > div > span{color:var(--ds-mut)}
.ds-xi__kv b{font-family:var(--font-mono);font-weight:500;color:var(--ds-head);min-width:0;overflow-wrap:anywhere;line-height:1.45}
.ds-xi__kv b.hl{background:rgba(59,130,246,0.22);color:#cfe0ff;padding:0.05rem 0.3rem;border-radius:4px}
.ds-xi__kv b .ds-fchip{display:inline-flex;align-items:center;gap:0.3rem;border:1px solid rgba(234,179,8,0.4);background:rgba(234,179,8,0.08);color:#fde047;border-radius:6px;padding:0.08rem 0.4rem;font-size:0.7rem}
.ds-xi__sev{display:inline-block;font-family:var(--font-mono);font-size:0.66rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;padding:0.12rem 0.5rem;border-radius:5px}
.ds-xi__sev--high{background:#DC2626;color:#fff !important}
.ds-xi__sev--med{background:#EAB308;color:#101014 !important}
.ds-xi__sev--low{background:#3f3f46;color:#e4e4e7 !important}
.ds-xi__sev--ok{background:#166534;color:#dcfce7 !important}
.ds-xi__story{margin:0;padding-top:0.55rem;border-top:1px solid var(--ds-line);font-size:0.8rem;line-height:1.55;color:var(--ds-txt)}
.ds-xi__l{font-family:var(--font-mono);font-size:var(--t-2xs);letter-spacing:0.12em;text-transform:uppercase;color:var(--ds-mut);margin-top:0.2rem}
.ds-x__insp .ds-arow{grid-template-columns:1fr auto}
.ds-xi__act{display:flex;align-items:center;gap:0.6rem}
.ds-xi__act .ds-restrict{font-size:0.72rem;padding:0.32rem 0.7rem}

@media (max-width:1060px){
 .ds-x__body{grid-template-columns:184px minmax(0,1fr)}
 .ds-x__insp{grid-column:1 / -1;border-top:1px solid var(--ds-line)}
}
@media (max-width:760px){
 .ds-x__body{grid-template-columns:1fr}
 .ds-x__rail{flex-direction:row;flex-wrap:wrap;border-right:0;border-bottom:1px solid var(--ds-line)}
 .ds-x__railh{width:100%}
 .ds-x__item{flex:1 1 140px}
 .ds-x__item small{display:none}
 .ds-x__railf{display:none}
 .ds-x__main{border-right:0}
 .ds-x__search{display:none}
 .ds-x__zoom{display:none}
 .ds-x__canvas{background:none}
 .ds-x__wires{display:none}
 .ds-x__stage{gap:1.6rem}
 .ds-x__users{justify-content:flex-start}
 .ds-xu{flex:1 1 46%}
 .ds-x__files{gap:0.9rem}
 .ds-x__chain{flex-direction:column;align-items:stretch;gap:0.55rem;border-left:1.5px dashed rgba(99,131,246,0.4);margin-left:1.2rem;padding-left:0.9rem}
 .ds-xc{width:auto;grid-template-columns:auto 1fr;justify-items:start;align-items:center;gap:0.6rem;text-align:left}
 .ds-xc__tx{justify-items:start}
 .ds-xc__tx b{text-align:left}
 .ds-xln{display:none}
 .ds-x__stage .is-born{animation:none}
}
@media (prefers-reduced-motion:reduce){
 .ds-x__stage .is-born{animation:none}
 .ds-x__stage{transition:none}
}

/* ================= DSPM three questions ================= */
.ds-qs{margin-top:var(--s-6);display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-6)}
.ds-q{position:relative;padding-left:var(--s-4);border-left:1px solid var(--line-2)}
.ds-q__n{font-family:var(--font-mono);font-size:var(--t-2xs);letter-spacing:0.16em;color:var(--dawn)}
.ds-q h3{margin:0.5rem 0 0;font-size:1.08rem;font-weight:600;letter-spacing:-0.01em;color:var(--head)}
.ds-q p{margin:0.55rem 0 0;font-size:0.92rem;line-height:1.6;color:var(--txt-dim)}
@media (max-width:860px){.ds-qs{grid-template-columns:1fr;gap:var(--s-5)}}