.ai-av{width:34px;height:34px;border-radius:50%;background:var(--surface-soft);display:grid;place-items:center;flex:none;overflow:hidden}.ai-av img{width:20px;height:20px}
.sc-live.lk{color:var(--accent);background:var(--accent-tint)}.sc-live.lk:before{background:var(--accent)}
/* problem diagram */
.mxc{max-width:1040px;margin:0 auto;box-shadow:0 30px 70px -40px rgba(21,24,29,.3)}
.mxc .seg button{all:unset;cursor:pointer;padding:6px 14px;border-radius:6px;color:var(--ink-2);font-size:13.5px;white-space:nowrap}
.mxc .seg button.on{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(21,24,29,.1)}
.mx{position:relative;display:grid;grid-template-columns:200px minmax(0,1fr) 250px;align-items:center;padding:36px 32px;min-height:440px}
.mx>svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.mx path{fill:none;transition:opacity .4s}
.mx path.bad{stroke:var(--negative);stroke-width:1.2;opacity:.32}
.mx path.good{stroke:#A9CBEF;stroke-width:1.4;stroke-dasharray:4 5;animation:dash 1.6s linear infinite}
.mx path.off{stroke:var(--border-strong);stroke-width:1.2;stroke-dasharray:2 5}
.mx circle.pk{fill:var(--accent)}
.mx-col{display:grid;gap:12px;position:relative;z-index:1}
.mn{display:flex;align-items:center;gap:10px;height:46px;padding:0 12px 0 10px;background:#fff;border:1px solid var(--border);border-radius:12px;font-size:14.5px;font-weight:500;box-shadow:0 1px 2px rgba(21,24,29,.04);transition:border-color .3s,opacity .3s}
.mn img,.mn .gen{width:24px;height:24px;border-radius:6px;flex:none;object-fit:contain}
.mn .gen{display:grid;place-items:center;background:var(--surface-soft);color:var(--ink-2);font-weight:600}
.scope{margin-left:auto;font-size:11.5px;font-weight:500;padding:2px 8px;border-radius:999px;white-space:nowrap;background:var(--negative-tint);color:var(--negative)}
.scope:before{content:attr(data-a)}
.mx.is-hub .scope:before{content:attr(data-b)}
.mx.is-hub [data-ok="1"] .scope{background:var(--positive-tint);color:var(--positive)}
.mx.is-hub [data-ok="0"] .scope{background:var(--surface-soft);color:var(--ink-3)}
.mx.is-hub [data-ok="0"]{opacity:.7}
.mx:not(.is-hub) #mx-out .mn{border-color:rgba(209,67,52,.35)}
.mx-mid{position:relative;z-index:2;display:grid;place-items:center;min-height:120px}
.mx-mid>*{grid-area:1/1;transition:opacity .35s var(--ease),transform .35s var(--ease)}
.mx-warn{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid rgba(209,67,52,.35);color:var(--negative);font-size:14px;font-weight:500;padding:10px 16px 10px 10px;border-radius:999px;box-shadow:0 10px 30px -12px rgba(209,67,52,.4)}
.mx-warn span{width:24px;height:24px;border-radius:50%;background:var(--negative);color:#fff;display:grid;place-items:center;font-size:13px;font-weight:700}
.mx-hub{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid rgba(46,125,209,.45);border-radius:18px;padding:16px 20px;box-shadow:0 0 0 8px var(--accent-tint),0 24px 50px -24px rgba(46,125,209,.5);opacity:0;transform:scale(.92)}
.mx-hub img{width:40px;height:40px;border-radius:10px}
.mx-hub b{display:block;font-size:16px;letter-spacing:-.02em}.mx-hub small{display:block;font-size:12.5px;color:var(--ink-3)}
.mx.is-hub .mx-warn{opacity:0;transform:scale(.92)}
.mx.is-hub .mx-hub{opacity:1;transform:none}
.mx-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line);background:var(--surface-sunken)}
.mx-stats div{padding:20px 24px;display:flex;flex-direction:column;gap:2px;animation:rise .4s var(--ease)}
.mx-stats div+div{border-left:1px solid var(--line)}
.mx-stats b{font-size:30px;font-weight:600;letter-spacing:-.04em;line-height:1.1;color:var(--negative)}
.mx-stats small{font-size:13.5px;color:var(--ink-2)}
.mxc.ok .mx-stats b{color:var(--positive)}
/* one data source */
.mc-url{display:flex;align-items:center;gap:10px;margin:16px 20px 6px;padding:6px 6px 6px 14px;border:1px solid var(--border);border-radius:10px;background:var(--surface-sunken)}
.mc-url code{font-family:var(--font-mono);font-size:13px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1}
.mc-url button{all:unset;cursor:pointer;font-size:12.5px;font-weight:500;padding:6px 12px;border-radius:7px;background:var(--ink);color:#fff;white-space:nowrap}
.mc-url button.done{background:var(--positive)}
.mc-dom{padding:4px 20px 8px}
.md{display:grid;grid-template-columns:minmax(0,1fr) 72px 18px;gap:16px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.md:last-child{border-bottom:0}
.md b{display:block;font-size:14.5px;font-weight:500}.md small{display:block;font-size:12.5px;color:var(--ink-3)}
.lst{display:flex}.lst img{width:24px;height:24px;border-radius:50%;background:#fff;border:2px solid #fff;box-shadow:0 0 0 1px var(--border);margin-left:-6px}.lst img:first-child{margin-left:0}
.md .lst{justify-content:flex-start}
.mc-url{margin:16px 20px 10px}
.md .tick{width:18px;height:18px}
@media (max-width:980px){
.mx{grid-template-columns:minmax(0,1fr);gap:24px;min-height:0;padding:24px 20px}
.mx>svg{display:none}
#mx-src{grid-template-columns:repeat(2,minmax(0,1fr))}
.mx-mid{min-height:80px}
}
@media (max-width:620px){
#mx-src{grid-template-columns:minmax(0,1fr)}
.mx-stats{grid-template-columns:minmax(0,1fr)}.mx-stats div+div{border-left:0;border-top:1px solid var(--line)}
}
/* hero: connections overview */
.cn{background:#fff;border:1px solid var(--border);border-radius:22px;box-shadow:0 1px 2px rgba(21,24,29,.04),0 40px 90px -40px rgba(21,24,29,.32);overflow:hidden}
.cn-ic img{width:34px;height:34px;border-radius:9px;display:block}
.cn-flow{display:flex;align-items:center;gap:10px;padding:20px;border-bottom:1px solid var(--line);background:var(--surface-sunken)}
.cn-n{display:flex;flex-direction:column;align-items:center;gap:8px;flex:none;min-width:96px}
.cn-n b{font-size:13px;font-weight:600}
.cn-n.is-hub img{width:44px;height:44px;border-radius:12px;box-shadow:0 0 0 6px var(--accent-tint)}
.cn-n .lst img{width:28px;height:28px}
.cn-ln{flex:1;height:2px;background:repeating-linear-gradient(90deg,var(--accent) 0 5px,transparent 5px 10px);background-size:20px 2px;animation:cnflow 1s linear infinite;opacity:.6;margin-bottom:22px}
@keyframes cnflow{to{background-position:20px 0}}
.cn-list{padding:4px 0}
.cr{display:grid;grid-template-columns:34px minmax(0,1fr) auto 30px;gap:12px;align-items:center;padding:12px 20px;border-bottom:1px solid var(--line);transition:opacity .2s}
.cr:last-child{border-bottom:0}
.cr.off .cr-av,.cr.off .cr-t,.cr.off .cr-s{opacity:.5}
.cr-av{width:34px;height:34px;border-radius:50%;background:var(--surface-soft);display:grid;place-items:center;font-size:13px;font-weight:600;color:var(--ink-2);overflow:hidden}
.cr-av img{width:18px;height:18px}
.cr-t b{display:block;font-size:14.5px;font-weight:500}.cr-t small{display:block;font-size:12.5px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cr-s{display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end}
.cr-s span{font-size:11.5px;font-weight:500;padding:2px 8px;border-radius:999px;background:var(--accent-tint);color:var(--accent);white-space:nowrap}
.cr-s span.no{background:var(--surface-soft);color:var(--ink-3)}
.cn-log{display:flex;align-items:center;gap:10px;padding:14px 20px;background:var(--surface-sunken);border-top:1px solid var(--line);font-size:13px;color:var(--ink-2)}
.cn-log #cn-log{transition:opacity .2s}
.dot-l{width:7px;height:7px;border-radius:50%;background:var(--live);flex:none}
.mx-warn div{line-height:1.3;white-space:nowrap}.mx-warn{border-radius:16px}
@media (max-width:620px){.cr{grid-template-columns:34px minmax(0,1fr) 30px}.cr-s{display:none}.cn-n{min-width:0}.cn-flow{padding:16px 12px}}
/* access matrix */
.mods.c{justify-content:center}
.pe-c{max-width:1040px;margin:0 auto;box-shadow:0 30px 70px -40px rgba(21,24,29,.3)}
.pe-c .card-h,.pe-c .card-f{padding:16px 24px}
.pe-f{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}.pe-f b{color:var(--ink)}
.mtx-w{overflow-x:auto}
.mtx{display:grid;grid-template-columns:190px repeat(6,minmax(92px,1fr));gap:8px;padding:20px 24px;min-width:800px;align-items:center}
.mc-h{font-size:13px;font-weight:500;color:var(--ink-2);text-align:center;padding-bottom:4px}
.mc-h.pii{color:var(--ink-3)}
.mr{display:flex;align-items:center;gap:10px;min-width:0}
.mr .av{width:34px;height:34px;border-radius:50%;background:var(--surface-soft);display:grid;place-items:center;font-size:13px;font-weight:600;color:var(--ink-2);flex:none}
.mr b{display:block;font-size:14.5px;font-weight:500;line-height:1.2}.mr small{display:block;font-size:12.5px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mtx .pii{margin-left:12px}.mc-h{overflow-wrap:break-word;hyphens:manual;line-height:1.25}
.mcell{all:unset;cursor:pointer;height:36px;border-radius:9px;text-align:center;font-size:13px;font-weight:500;transition:background .15s,color .15s}
.mcell.l0{background:var(--surface-soft);color:var(--ink-3)}
.mcell.l1{background:var(--accent-tint);color:var(--accent)}
.mcell.l2{background:var(--positive-tint);color:var(--positive)}
.mcell:hover{box-shadow:inset 0 0 0 1px var(--border-strong)}
.mcell[disabled]{cursor:default}.mcell[disabled]:hover{box-shadow:none}