.dw{width:100%;max-width:560px;background:#fff;border-radius:16px;overflow:hidden;border:1px solid rgba(196,181,253,.2);box-shadow:0 2px 6px rgba(0,0,0,.2),0 40px 80px -30px rgba(0,0,0,.6)}.dw-top{display:flex;align-items:center;gap:9px;padding:11px 14px;background:#F2F1F5;border-bottom:1px solid #E4E1EC}.dw-top i.d{width:9px;height:9px;border-radius:50%;background:rgba(16,24,52,.14)}.dw-top b{margin-left:6px;font-size:12.5px;font-weight:650;color:#0E0B1A}.dw-top .lv{margin-left:auto;font-family:var(--mono,'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace);font-size:11px;letter-spacing:1px;color:#117E39;background:#DCFCE7;border-radius:16px;padding:3px 10px}.dw-b{padding:14px;display:flex;flex-direction:column;gap:10px;min-height:300px}

.ixw .ix-log{height:auto;min-height:0;background:#0B0916;border:1px solid #221C3D;line-height:18px}
.ixw .ix-dec{background:#16122B;border-color:#252043}.ixw .sx-tt{color:#8F88B5}.ixw .sx-tt b{color:#fff}
.ixw .ix-f>span{background:#0E0B1C;border-color:#252043;color:#6E6893}.ixw .ix-f>span b{color:#E9E4FF}
.ux-net{position:relative;margin:-2px -4px 0;border-radius:12px;background:radial-gradient(360px 180px at 50% 45%,rgba(124,58,237,.28),rgba(124,58,237,0) 70%),#0B0916;border:1px solid #221C3D;overflow:hidden}
.ux-net svg{display:block;width:100%;height:auto}
.ux-net .ed{fill:none;stroke:rgba(129,140,248,.55);stroke-width:1.3;stroke-dasharray:2 4;animation:uxDash 1s linear infinite;vector-effect:non-scaling-stroke}
.ux-net .ed.on{stroke:#C4B5FD;stroke-width:2.2;filter:drop-shadow(0 0 4px #8B5CF6)}
@keyframes uxDash{to{stroke-dashoffset:-12}}
.ux-net .nd{transition:filter .25s}.ux-net .nd.on{filter:drop-shadow(0 0 7px rgba(167,139,250,.9))}
.ux-net .bl{font:700 .19px Inter,system-ui,sans-serif;fill:#8B7FD8;letter-spacing:.012px}
.ux-net .led{animation:uxLed 1.4s steps(2) infinite}.ux-net .led:nth-child(odd){animation-delay:.5s}
@keyframes uxLed{50%{opacity:.35}}
.ux-amt{position:absolute;left:10px;bottom:9px;font-family:var(--mono,'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace);font-size:10px;color:#C4B5FD;background:rgba(20,16,40,.85);border:1px solid #2E2752;border-radius:20px;padding:3px 10px;white-space:nowrap;backdrop-filter:blur(4px)}
.ux-amt b{color:#fff}.ux-amt i{font-style:normal;color:#4ADE80;font-weight:700}
.sx.dk{background:#0E0B1C;border-color:#241E40}
.sx.dk .dw-top{background:#15122A;border-bottom-color:#241E40}.sx.dk .dw-top b{color:#F1EEFF}.sx.dk .dw-top i.d{background:rgba(255,255,255,.16)}
.sx.dk .dw-b{background:#0E0B1C}
.sx.dk .sx-env{background:rgba(251,191,36,.12);border-color:rgba(251,191,36,.3);color:#FCD34D}
.sx.dk .lv{background:rgba(34,197,94,.14);color:#4ADE80}
.sx.dk .sx-kpi>div{background:#16122B;border-color:#252043}.sx.dk .sx-kpi small{color:#8F88B5}.sx.dk .sx-kpi b{color:#fff}.sx.dk .sx-kpi em{color:#6E6893}
.sx.dk .sx-spark polyline{stroke:#A78BFA}
.sx.dk .sx-tbl{color:#A9A3C9}.sx.dk .sx-h{color:#6E6893}.sx.dk .sx-r:nth-child(odd){background:#131027}
.sx.dk .sx-r .ty{color:#C4B5FD}.sx.dk .sx-r .am{color:#fff}.sx.dk .sx-r.hl{background:#231B45!important;box-shadow:inset 2px 0 0 #A78BFA}
.sx.dk .rc.ok{background:rgba(34,197,94,.15);color:#4ADE80}.sx.dk .rc.bd{background:rgba(245,158,11,.15);color:#FBBF24}.sx.dk .rc.tf{background:rgba(239,68,68,.15);color:#F87171}.sx.dk .rc.pd{background:rgba(148,163,184,.15);color:#CBD5E1}
.sx.dk .sx-foot{color:#8F88B5}.sx.dk .sx-foot b{color:#fff}.sx.dk .sx-mix .bar{background:#221C3D}
@keyframes sxInD{from{opacity:0;transform:translateY(-8px);background:#2A2150}to{opacity:1;transform:none}}.sx.dk .sx-r{animation-name:sxInD}
@media(prefers-reduced-motion:reduce){.ux-net .ed,.ux-net .led{animation:none}}
#uxRows{height:128px}
@media(prefers-reduced-motion:reduce){.ux-net .ed{animation:none}}
.sx .dw-top{gap:8px}.sx .dw-top b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sx-env{font-family:var(--mono,'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace);font-size:9.5px;letter-spacing:1px;color:#92400E;background:#FEF3C7;border:1px solid #FDE68A;border-radius:5px;padding:2px 6px;flex-shrink:0}
.sx-lv{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;letter-spacing:.3px!important}
.sx-lv i{width:6px;height:6px;border-radius:50%;background:#16A34A;box-shadow:0 0 0 0 rgba(22,163,74,.5);animation:sxP 1.6s infinite}
@keyframes sxP{70%{box-shadow:0 0 0 6px rgba(22,163,74,0)}100%{box-shadow:0 0 0 0 rgba(22,163,74,0)}}
.sx-b{gap:9px!important;padding:12px!important;min-height:0!important}
.sx-kpi{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.sx-kpi>div{position:relative;background:#F7F7FB;border:1px solid #E8E6F0;border-radius:10px;padding:7px 9px;min-width:0;overflow:hidden}
.sx-kpi small{display:block;font-family:var(--mono,'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace);font-size:9.5px;letter-spacing:.6px;text-transform:uppercase;color:#616E89;white-space:nowrap}
.sx-kpi b{display:block;font-family:var(--display,Inter,system-ui,sans-serif);font-size:17px;font-weight:700;letter-spacing:-.5px;color:#0E0B1A;font-variant-numeric:tabular-nums;margin-top:1px}
.sx-kpi em{display:block;font-style:normal;font-size:9.5px;color:#8A93A8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sx-spark{position:absolute;left:9px;right:9px;bottom:5px;height:14px;width:calc(100% - 18px)}
.sx-spark polyline{fill:none;stroke:#8B5CF6;stroke-width:1.4;vector-effect:non-scaling-stroke}
.sx-tabs{display:flex;gap:2px;border-bottom:1px solid #ECEAF2;font-size:11px;font-weight:600;color:#8A93A8}
.sx-tabs span{padding:4px 9px 6px;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.sx-tabs span.on{color:#5B21B6;border-bottom-color:#7C3AED}
.sx-tbl{font-family:var(--mono,'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace);font-size:10.5px;color:#4D5A78}
.sx-h,.sx-r{display:grid;grid-template-columns:52px 50px 82px minmax(0,1fr) 62px 30px 30px;gap:6px;align-items:center;padding:0 6px}
.sx-h{font-size:9.5px;letter-spacing:.6px;text-transform:uppercase;color:#98A1B5;padding-bottom:4px}
.sx-h .r,.sx-r .r{text-align:right}
.sx-rows{height:178px;overflow:hidden;position:relative}
.sx-r{height:25px;border-radius:7px;white-space:nowrap;animation:sxIn .45s ease}
.sx-r:nth-child(odd){background:#FAFAFD}
.sx-r>span{overflow:hidden;text-overflow:ellipsis}
.sx-r .ty{color:#5B21B6;font-weight:700}.sx-r .am{color:#0E0B1A;font-weight:700}
.sx-r.hl{background:#F3EEFF!important;box-shadow:inset 2px 0 0 #7C3AED}
.rc{display:inline-block;font-weight:700;font-size:10px;border-radius:5px;padding:1px 4px;text-align:center;min-width:22px}
.rc.ok{color:#117E39;background:#DCFCE7}.rc.bd{color:#B45309;background:#FEF3C7}.rc.tf{color:#B91C1C;background:#FEE2E2}.rc.pd{color:#475569;background:#E2E8F0}
@keyframes sxIn{from{opacity:0;transform:translateY(-8px);background:#EDE7FD}to{opacity:1;transform:none}}
.sx-trace{background:#F7F7FB;border:1px solid #E8E6F0;border-radius:10px;padding:8px 10px}
.sx-tt{display:flex;align-items:center;gap:8px;font-family:var(--mono,'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace);font-size:10px;letter-spacing:.5px;color:#616E89;text-transform:uppercase;margin-bottom:6px}
.sx-tt b{color:#0E0B1A;letter-spacing:0;text-transform:none}.sx-tt span{margin-left:auto;text-transform:none;letter-spacing:0;color:#117E39;font-weight:700}
.sx-hops{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;position:relative}
.sx-hops span{position:relative;font-size:10.5px;font-weight:650;color:#98A1B5;background:#fff;border:1px solid #E8E6F0;border-radius:7px;padding:4px 5px;text-align:center;transition:.25s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sx-hops span i{display:block;font-style:normal;font-family:var(--mono,'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace);font-size:9.5px;font-weight:400;color:#B4BBCB}
.sx-hops span.on{color:#fff;background:linear-gradient(150deg,#8B5CF6,#5B21B6);border-color:transparent}
.sx-hops span.on i{color:#E4D9FF}
.sx-hops span.ok{background:linear-gradient(150deg,#22C55E,#15803D)}
.sx-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;font-family:var(--mono,'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace);font-size:10.5px;color:#616E89}
.sx-foot b{color:#0E0B1A;font-weight:650}
.sx-mix{display:flex;align-items:center;gap:6px;min-width:0}
.sx-mix .bar{display:flex;width:110px;height:6px;border-radius:3px;overflow:hidden;background:#EEF0F4}
.sx-mix .bar i{display:block;height:100%}
.ix-log{background:#0F0B1E;border-radius:10px;padding:8px 10px;height:176px;overflow:hidden;font-family:var(--mono,'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace);font-size:10.5px;line-height:19px;color:#B8B2D6;display:flex;flex-direction:column;justify-content:flex-end}
.ix-log>div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;animation:sxFade .35s ease}
.ix-log .ts{color:#6B6590}.ix-log .out{color:#A78BFA}.ix-log .in{color:#34D399}.ix-log .mti{color:#fff;font-weight:700}
.ix-log .c00{color:#34D399;font-weight:700}.ix-log .cw{color:#FBBF24;font-weight:700}.ix-log .cf{color:#F87171;font-weight:700}.ix-log .sys{color:#7DD3FC}
@keyframes sxFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.ix-dec{background:#F7F7FB;border:1px solid #E8E6F0;border-radius:10px;padding:8px 10px}
.ix-f{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.ix-f>span{background:#fff;border:1px solid #ECEAF2;border-radius:6px;padding:3px 6px;font-family:var(--mono,'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace);font-size:9.5px;color:#8A93A8;min-width:0;animation:sxFade .3s ease both}
.ix-f>span b{display:block;font-size:10.5px;color:#0E0B1A;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:560px){.sx-h,.sx-r{grid-template-columns:56px 50px minmax(0,1fr) 60px 28px}.sx-tbl .c-rrn,.sx-tbl .c-ms{display:none}
.sx-kpi{grid-template-columns:repeat(2,1fr)}.sx-hops{grid-template-columns:repeat(3,1fr)}.ix-f{grid-template-columns:repeat(2,1fr)}.sx-env{display:none}.sx-mix .bar{width:70px}}
@media(prefers-reduced-motion:reduce){.sx-r,.ix-log>div,.ix-f>span{animation:none}.sx-lv i{animation:none}}

[data-sx]{width:100%;max-width:520px;margin-left:auto}[data-sx] .dw{max-width:none}.sx-cap{margin:8px 0 0;text-align:center;font-size:12px;color:#A79FD6}
.reveal:has(>[data-sx]),.mz-hgrid>*,.u-grid>*{min-width:0;max-width:100%}
[data-sx]{min-width:0;max-width:min(520px,100%)}[data-sx] .dw,[data-sx] .dw-b,[data-sx] .ix-log,[data-sx] .ix-dec,[data-sx] .sx-tbl{min-width:0;max-width:100%}
