:root{--navy:#12204f;--navy-dark:#0c1836;--blue:#2452e8;--blue-dark:#1a3fc4;--gray-bg:#f2f4f8;--border:#dfe3ec;--text:#1c2430;--muted:#6b7280;--green:#16a34a;--red:#dc2626;--amber:#d97706;--purple:#7c3aed;--radius:10px;--data:var(--blue);--stream:var(--amber);--secure:var(--green);--serve:var(--purple)}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;background:var(--gray-bg);color:var(--text)}
.topbar{background:linear-gradient(90deg,var(--navy),var(--navy-dark));color:#fff;padding:18px 0}
.topbar-inner,.container{max-width:1180px;margin:0 auto;padding:0 24px}
.topbar-inner{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}
.brand h1{margin:0;font-size:22px}.brand p{margin:2px 0 0;font-size:13px;color:#b9c2e0}
.actions{display:flex;gap:10px;flex-wrap:wrap}
.btn{border:none;border-radius:8px;padding:10px 16px;font-size:14px;font-weight:600;cursor:pointer}
.btn-primary{background:var(--blue);color:#fff}.btn-primary:hover{background:var(--blue-dark)}
.btn-secondary{background:#fff;color:var(--navy);border:1px solid var(--border)}
.btn-danger{background:transparent;color:#ffb4b4;border:1px solid #6a3350}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.tabs{background:#fff;border-bottom:1px solid var(--border)}
.tabs .in{max-width:1180px;margin:0 auto;padding:0 24px;display:flex;gap:4px;overflow-x:auto}
.tab{background:none;border:none;padding:14px 18px;font-size:14px;font-weight:600;color:var(--muted);cursor:pointer;border-bottom:3px solid transparent;white-space:nowrap}
.tab[aria-selected=true]{color:var(--blue);border-color:var(--blue)}
.container{margin-top:24px;margin-bottom:60px}
.card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 1px 3px rgba(15,23,42,.06);padding:24px;margin-bottom:24px}
.card h2{margin:0 0 8px;font-size:18px;color:var(--navy)}.card h3{font-size:14px;color:var(--navy);margin:18px 0 8px;text-transform:uppercase;letter-spacing:.3px}
.sub{color:var(--muted);font-size:13.5px;margin:6px 0 18px}
.row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px 18px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px 18px;margin-bottom:8px}
.f{display:flex;flex-direction:column;gap:4px}.f span{font-size:13px;font-weight:600}
.f input,.f select{border:1px solid var(--border);border-radius:8px;padding:9px 10px;font-size:13.5px;font-family:inherit;background:#fff}
.f input:focus,.f select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(36,82,232,.15)}
fieldset{border:1px solid var(--border);border-radius:var(--radius);padding:10px 16px 12px;margin:0;background:#fafbfd}
legend{padding:0 6px;font-weight:700;color:var(--navy);font-size:13.5px}
.chip{display:flex;gap:8px;align-items:center;padding:3px 0;font-size:13.5px;cursor:pointer}
.diagram{border:1px solid var(--border);border-radius:var(--radius);background:#fff;overflow-x:auto}
svg{display:block;min-width:980px;width:100%;height:auto}
.zone{fill:#fafbfd;stroke:var(--border);stroke-width:1.5;stroke-dasharray:5 4}
.zt{fill:var(--muted);font-size:12px;font-weight:600}
.nr{fill:#fff;stroke:var(--navy);stroke-width:1.2}
.z-sec,.z-lnk{stroke:var(--green);stroke-width:2.2}.z-cld{stroke:var(--blue)}.z-srv{stroke:var(--purple)}.z-bar{stroke-dasharray:4 3;fill:#f8fafc}
.node{cursor:pointer}.node:hover .nr,.node:focus .nr{fill:#eef2ff;stroke-width:2.6}
.nt{fill:var(--navy);font-size:13px;font-weight:650}.ns{fill:var(--muted);font-size:10.5px}
.e{fill:none;stroke-width:1.8}.e-data{stroke:var(--data)}.e-stream{stroke:var(--stream)}.e-secure{stroke:var(--secure)}.e-serve{stroke:var(--serve)}.e-host{stroke:var(--muted);stroke-dasharray:4 3}
.a-data{fill:var(--data)}.a-stream{fill:var(--stream)}.a-secure{fill:var(--secure)}.a-serve{fill:var(--serve)}.a-host{fill:var(--muted)}
.b{fill:#fff;stroke:var(--navy);stroke-width:1}.bt{fill:var(--navy);font-size:10px;font-weight:700;text-anchor:middle}
.detail{margin-top:14px;padding:10px 14px;border-left:4px solid var(--blue);background:#f8fafc;border-radius:0 8px 8px 0;font-size:13.5px}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:24px}
ul,ol{padding-left:20px;margin:0}li{margin:5px 0;font-size:13.5px}
.k{font-weight:700;margin-right:6px}.k-fail{color:var(--red)}.k-warn{color:var(--amber)}.k-pass{color:var(--green)}.k-info{color:var(--blue)}
.sw{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px}
.toast{position:fixed;top:20px;right:20px;background:var(--navy);color:#fff;padding:12px 18px;border-radius:8px;z-index:9}
.hidden{display:none!important}
@media(max-width:640px){.card{padding:16px}}

.tools{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.bg{cursor:default}
svg.hl .e,svg.hl .bg{opacity:.12}svg.hl .on{opacity:1}svg.hl .e.on{stroke-width:3.4}
.flows li{border-radius:4px;padding:2px 6px}.flows li.on{background:#eef2ff}
.z-proc{fill:#eef2ff;stroke:#6d7fe0;stroke-dasharray:6 3}
table.cmp td,table.cmp th{white-space:normal;vertical-align:top;line-height:1.45;min-width:180px}
table.cmp th[scope=row]{background:#f8fafc;color:var(--navy);min-width:150px}
table.cmp tr.g td{background:#eef2ff;color:var(--navy);font-weight:700}
.rm{font-size:12px;color:var(--muted);margin:8px 0 0;line-height:1.4}