.dmock{background:radial-gradient(at 20% 0,#2f5bff40,#0000 60%),linear-gradient(160deg,#111a2e,#1b2c55);border-radius:18px;padding:clamp(18px,3vw,36px);display:block;position:relative;overflow:hidden;box-shadow:0 30px 80px -40px #0b1a4a99}.dmock:before{content:"";background:conic-gradient(from 0deg, transparent 0 70%, #2f5bff22 80%, transparent 90%);pointer-events:none;animation:14s linear infinite dmock-spin;position:absolute;inset:-40%}:where(.dmock) :where(button){font:inherit;color:inherit;cursor:pointer;background:0 0;border:0}.dmock :is(button,[tabindex]):focus-visible{outline-offset:2px;outline:2px solid #2f5bff}.dmock__window{font-family:var(--font-brand);background:#f6f8fc;border-radius:12px;position:relative;overflow:hidden;box-shadow:0 20px 50px -20px #00000080}.dmock__bar{background:#fff;border-bottom:1px solid #e5eaf2;align-items:center;gap:10px;padding:10px 14px;display:flex}.dmock__dots{gap:5px;display:flex}.dmock__dots i{background:#dfe4ec;border-radius:50%;width:8px;height:8px}.dmock__crumb{color:#6b7587;white-space:nowrap;text-overflow:ellipsis;flex:1;font-size:11.5px;overflow:hidden}.dmock__crumb b{color:#111827;font-weight:600}.dmock__live{letter-spacing:.08em;color:#0f9f7a;align-items:center;gap:5px;font-size:9.5px;font-weight:700;transition:color .3s;display:inline-flex}.dmock__live i{background:#22b98f;border-radius:50%;width:7px;height:7px;animation:1.6s ease-out infinite dmock-live;box-shadow:0 0 #22b98f88}.dmock.is-paused .dmock__live{color:#8a93a3}.dmock.is-paused .dmock__live i{background:#b5bdca;animation:none}.dmock__body{gap:12px;padding:16px;display:grid}.dmock__head{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;display:flex}.dmock__head strong{color:#111827;letter-spacing:-.01em;font-size:17px;font-weight:600}.dmock__tabs{background:#eaeef5;border-radius:8px;gap:2px;padding:3px;display:inline-flex}.dmock__tabs button{color:#6b7587;border-radius:6px;padding:4px 10px;font-size:11px;font-weight:600;transition:background .2s,color .2s,box-shadow .2s}.dmock__tabs button:hover{color:#111827}.dmock__tabs button[aria-pressed=true]{color:#2f5bff;background:#fff;box-shadow:0 1px 3px #0f172a1f}.dmock__kpis{grid-template-columns:repeat(3,1fr);gap:10px;display:grid}.dmock__kpi{text-align:left;background:#fff;border:1px solid #e5eaf2;border-radius:10px;gap:3px;padding:11px 12px;transition:border-color .25s,box-shadow .25s,transform .25s;display:grid}.dmock__kpi span{color:#6b7587;justify-content:space-between;gap:6px;font-size:10.5px;display:flex}.dmock__kpi small{color:#2f5bff;opacity:.8;font-size:10px;font-weight:600}.dmock__kpi b{color:#111827;letter-spacing:-.02em;font-variant-numeric:tabular-nums;font-size:22px;font-weight:600;line-height:1.15}.dmock__kpi em{color:#6b7587;font-size:10px;font-style:normal}.dmock__kpi em.up{color:#0f9f7a}.dmock__kpi em.warn{color:#d9772b}.dmock .dmock__kpi--btn:hover{border-color:#f3b49f;transform:translateY(-1px);box-shadow:0 8px 20px -12px #ef6a4c66}.dmock__grid{grid-template-columns:1.6fr 1fr;gap:10px;display:grid}.dmock__card{background:#fff;border:1px solid #e5eaf2;border-radius:10px;min-width:0;padding:12px}.dmock__card-head{color:#111827;justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px;font-size:11.5px;font-weight:600;display:flex}.dmock__legend{align-items:center;gap:4px;display:flex}.dmock__legend button{color:#4b5563;border:1px solid #e5eaf2;border-radius:999px;align-items:center;gap:5px;padding:3px 7px;font-size:10px;font-weight:500;transition:opacity .2s,background .2s;display:inline-flex}.dmock__legend button:hover{background:#f3f6fb}.dmock__legend button[aria-pressed=false]{opacity:.45;text-decoration:line-through}.dmock__legend i{border-radius:2px;width:8px;height:3px}.dmock__chart{touch-action:pan-y;cursor:crosshair;position:relative}.dmock__line{width:100%;height:auto;display:block;overflow:visible}.dmock__gridline{stroke:#eef1f6;stroke-width:1px}.dmock__series{fill:none;stroke-width:2.2px;stroke-linejoin:round;stroke-linecap:round;transition:opacity .3s}.dmock__area{transition:opacity .3s}.dmock.hide-a :is([data-line=a],.dmock__area,.dmock__headdot,[data-cross-a],[data-tip-row=a]){opacity:0}.dmock.hide-a [data-tip-row=a]{display:none}.dmock.hide-b :is([data-line=b],[data-cross-b]){opacity:0}.dmock.hide-b [data-tip-row=b]{display:none}.dmock__marker{transition:opacity .4s}.dmock__headdot{transition:transform .9s ease-in-out,opacity .3s}.dmock__cross{opacity:0;pointer-events:none;transition:opacity .15s}.dmock__cross line{stroke:#94a3b8;stroke-width:1px;stroke-dasharray:3 3}.dmock.is-inspecting .dmock__cross{opacity:1}.dmock__tip{color:#e5e7eb;pointer-events:none;opacity:0;background:#111827;border-radius:8px;gap:3px;min-width:118px;padding:7px 9px;font-size:10.5px;transition:opacity .15s;display:grid;position:absolute;top:4px;transform:translate(10px);box-shadow:0 10px 24px -10px #0008}.dmock__tip.is-flip{transform:translate(calc(-100% - 10px))}.dmock.is-inspecting .dmock__tip{opacity:1}.dmock__tip b{color:#9ca3af;font-size:10px;font-weight:600}.dmock__tip span{white-space:nowrap;align-items:center;gap:6px;display:flex}.dmock__tip i{border-radius:50%;width:7px;height:7px}.dmock__tip strong{color:#fff;margin-left:auto;padding-left:8px;font-weight:600}.dmock__ping{fill:#ef6a4c33;transform-box:fill-box;transform-origin:50%;animation:2s ease-out infinite dmock-ping}.dmock__breathe{transform-box:fill-box;transform-origin:50%;animation:1.6s ease-in-out infinite dmock-breathe}.dmock__note{text-align:left;color:#4b5563;cursor:pointer;background:#fff6f3;border:1px solid #fde0d7;border-radius:7px;align-items:center;gap:7px;width:100%;margin-top:8px;padding:6px 8px;font-family:inherit;font-size:10.5px;display:flex}.dmock__note:hover{border-color:#f3b49f}.dmock__note i{background:#ef6a4c;border-radius:50%;flex-shrink:0;width:6px;height:6px}.dmock__donut{width:112px;margin:4px auto 10px;position:relative}.dmock__donut svg{width:100%;display:block}.dmock__donut-label{text-align:center;pointer-events:none;place-content:center;display:grid;position:absolute;inset:0}.dmock__donut-label b{color:#111827;font-variant-numeric:tabular-nums;font-size:20px;font-weight:600;line-height:1.1}.dmock__donut-label span{color:#6b7587;font-size:9.5px}.dmock__arc{stroke-dasharray:var(--len) calc(100 - var(--len));stroke-dashoffset:var(--start);cursor:pointer;transition:opacity .2s,stroke-width .2s}.dmock__arc.is-dim{opacity:.3}.dmock__states{gap:2px;display:grid}.dmock__states button{color:#4b5563;border-radius:5px;align-items:center;gap:7px;width:100%;padding:3px 5px;font-size:10.5px;transition:background .2s;display:flex}.dmock__states button:hover,.dmock__states button.is-active{background:#f3f6fb}.dmock__states i{border-radius:2px;width:8px;height:8px}.dmock__states span{color:#111827;margin-left:auto;font-weight:600}.dmock__bars{align-items:flex-end;gap:6px;height:74px;display:flex}.dmock__bars span{height:var(--h);transform-origin:bottom;cursor:pointer;background:#c9d6ff;border-radius:4px 4px 2px 2px;flex:1;transition:background .2s;position:relative}.dmock__bars span:hover,.dmock__bars span:focus-visible{background:#8fa8ff}.dmock__bars span.is-peak{background:#2f5bff}.dmock__bars span:after{content:attr(data-v);color:#fff;white-space:nowrap;opacity:0;pointer-events:none;background:#111827;border-radius:5px;padding:2px 6px;font-size:9.5px;font-weight:600;transition:opacity .15s,transform .15s;position:absolute;bottom:calc(100% + 5px);left:50%;transform:translate(-50%)translateY(3px)}.dmock__bars span:is(:hover,:focus-visible):after{opacity:1;transform:translate(-50%)translateY(0)}.dmock__days{gap:6px;margin-top:5px;display:flex}.dmock__days span{text-align:center;color:#8a93a3;flex:1;font-size:9.5px}.dmock__env-row{grid-template-columns:repeat(3,1fr);gap:10px;display:grid}.dmock__env-row div{gap:3px;display:grid}.dmock__env-row span{color:#6b7587;font-size:10px}.dmock__env-row b{white-space:nowrap;color:#111827;font-variant-numeric:tabular-nums;font-size:13px;font-weight:600}.dmock__env-row i{background:#eef1f6;border-radius:3px;height:4px;margin-top:3px;display:block;overflow:hidden}.dmock__env-row u{height:100%;width:var(--w);transform-origin:0;background:#22b98f;border-radius:3px;display:block}.dmock__alerts{z-index:2;background:#fff;border-left:1px solid #e5eaf2;align-content:start;gap:10px;width:min(280px,85%);padding:14px;animation:.3s cubic-bezier(.16,1,.3,1) dmock-slide;display:grid;position:absolute;top:41px;bottom:0;right:0;box-shadow:-18px 0 40px -20px #0f172a55}.dmock__alerts[hidden]{display:none}.dmock__alerts-head{justify-content:space-between;align-items:center;display:flex}.dmock__alerts-head strong{color:#111827;font-size:13px}.dmock__alerts-head button{color:#6b7587;border-radius:6px;width:24px;height:24px;font-size:11px}.dmock__alerts-head button:hover{background:#f3f6fb}.dmock__alerts ul{gap:8px;display:grid}.dmock__alerts li{border:1px solid #edf0f5;border-radius:8px;grid-template-columns:8px 1fr;align-items:start;gap:9px;padding:9px 10px;animation:.3s dmock-fade;display:grid}.dmock__alerts li i{background:#ef6a4c;border-radius:50%;width:8px;height:8px;margin-top:4px}.dmock__alerts li.is-info i{background:#f5b544}.dmock__alerts li.is-ok i{background:#22b98f}.dmock__alerts li strong{color:#111827;font-size:11px;font-weight:600;display:block}.dmock__alerts li span{color:#6b7587;font-size:10px}.dmock:not(.is-in):not(.is-static) .dmock__in{opacity:0;transform:translateY(14px)}.dmock .dmock__in{transition:opacity .6s,transform .7s cubic-bezier(.16,1,.3,1),border-color .25s,box-shadow .25s;transition-delay:calc(var(--d) * 90ms)}.dmock.is-live .dmock__in{transition-delay:0s}.dmock:not(.is-in) .dmock__series{stroke-dasharray:1;stroke-dashoffset:1px}.dmock.is-in:not(.is-live):not(.is-static) .dmock__series{stroke-dasharray:1;animation:1.8s cubic-bezier(.4,0,.2,1) .5s both dmock-draw}.dmock.is-in:not(.is-live):not(.is-static) .dmock__series--a{animation-delay:.7s}.dmock:not(.is-in) .dmock__area{opacity:0}.dmock:not(.is-live) .dmock__area{transition:opacity 1s 1.4s}.dmock:not(.is-in) :is(.dmock__marker,.dmock__headdot,.dmock__note){opacity:0}.dmock:not(.is-live) .dmock__note{transition:opacity .5s 2.3s}.dmock.is-in:not(.is-live) .dmock__marker{animation:.5s 2.2s both dmock-fade}.dmock.is-in:not(.is-live) .dmock__headdot{animation:.4s 2.4s both dmock-fade}.dmock:not(.is-in) .dmock__arc{stroke-dasharray:0 100}.dmock .dmock__arc{transition:stroke-dasharray 1s cubic-bezier(.4,0,.2,1),stroke-dashoffset 1s cubic-bezier(.4,0,.2,1),opacity .2s;transition-delay:calc(.6s + var(--i) * .35s), calc(.6s + var(--i) * .35s), 0s}.dmock.is-live .dmock__arc{transition-duration:.6s,.6s,.2s;transition-delay:0s}.dmock:not(.is-in) .dmock__bars span{transform:scaleY(0)}.dmock .dmock__bars span{transition:transform .7s cubic-bezier(.34,1.3,.64,1),height .5s cubic-bezier(.16,1,.3,1),background .2s;transition-delay:calc(.8s + var(--i) * 70ms), calc(var(--i) * 40ms), 0s}.dmock:not(.is-in) .dmock__env-row u{transform:scaleX(0)}.dmock .dmock__env-row u{transition:transform 1s cubic-bezier(.16,1,.3,1),width .6s;transition-delay:calc(1s + var(--i) * .12s), 0s}.is-flash{animation:1.2s dmock-flash}.dmock__kpi.is-flash{animation:1.4s dmock-flash-kpi}@keyframes dmock-draw{0%{stroke-dashoffset:1px}to{stroke-dashoffset:0}}@keyframes dmock-ping{0%{opacity:1;transform:scale(.4)}to{opacity:0;transform:scale(1.9)}}@keyframes dmock-breathe{0%,to{transform:scale(.8)}50%{transform:scale(1.35)}}@keyframes dmock-live{0%{box-shadow:0 0 #22b98f88}to{box-shadow:0 0 0 7px #22b98f00}}@keyframes dmock-fade{0%{opacity:0}to{opacity:1}}@keyframes dmock-slide{0%{opacity:0;transform:translate(30px)}to{opacity:1;transform:none}}@keyframes dmock-flash{0%{background:#ffe0d6}to{background:#fff6f3}}@keyframes dmock-flash-kpi{0%{border-color:#f3b49f;box-shadow:0 0 0 4px #ef6a4c33}to{border-color:#e5eaf2;box-shadow:0 0 #ef6a4c00}}@keyframes dmock-spin{to{transform:rotate(360deg)}}@media (prefers-reduced-motion:reduce){.dmock:before,.dmock__live i,.dmock__ping,.dmock__breathe{animation:none}}@media (width<=560px){.dmock__grid{grid-template-columns:1fr}.dmock__kpi b{font-size:18px}.dmock__env-row b{font-size:12.5px}.dmock__tabs button{padding:4px 8px}}