.service-visual.vds-panel{width:88%;justify-self:center;background:#0a2338;border:1px solid #345166;border-radius:15px;box-shadow:0 24px 55px #0003;font-family:inherit}
.vp-top{padding:17px 22px;display:flex;gap:11px;align-items:center;background:#102e44;border-bottom:1px solid #2b495e}.vp-top>strong{font-size:14px;color:#e7f4fb;font-weight:600}.vp-mark{font-size:21px;font-weight:800;color:#ff9c2b}.vp-mark span{color:#40bee7}.vp-demo{margin-left:auto;font-size:10px;color:#a1bbcd;border:1px solid #3e5a70;border-radius:20px;padding:5px 9px}
.vp-body{padding:23px}.vp-server{display:flex;align-items:center;justify-content:space-between;gap:12px}.vp-eyebrow{font-size:9px;letter-spacing:1.3px;color:#8aaabd;font-weight:700}.vp-server h2{margin:7px 0 0;font-size:20px;letter-spacing:-.3px;color:#f0f6fa}.vp-status{display:flex;align-items:center;gap:6px;font-size:11px;color:#75d6b6;white-space:nowrap}.vp-status i{width:6px;height:6px;background:currentColor;border-radius:50%}
.vp-actions{display:flex;gap:8px;margin:21px 0}.vp-actions button,.vp-backup button{font:600 11px/1.5 inherit;color:#d8eaf5;background:#14354b;border:1px solid #416075;border-radius:6px;padding:9px 12px;cursor:pointer}.vp-actions button{font-family:inherit;font-size:11px;font-weight:600}.vp-actions button span{margin-right:5px;font-size:15px}.vp-actions button:disabled,.vp-backup button:disabled{opacity:.4;cursor:default}.vp-actions button:not(:disabled):hover,.vp-backup button:not(:disabled):hover{border-color:#65c8e9;background:#1a4259}.vds-panel button:focus-visible{outline:2px solid #58c4e8;outline-offset:3px}
.vp-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;padding:18px 0;border-top:1px solid #28455a;border-bottom:1px solid #28455a}.vp-metrics>div>span{display:block;color:#a4bdce;font-size:11px}.vp-metrics strong{display:block;color:#eff7fc;font-size:25px;font-weight:600;margin:7px 0 10px}.vp-metrics small{font-size:12px;color:#8fabbf;margin-left:3px}.vp-meter{height:4px;background:#234155;border-radius:3px;overflow:hidden}.vp-meter i{display:block;width:var(--level);height:100%;background:#3bb7d9;transition:width .4s}
.vp-activity{padding:17px 0 12px}.vp-activity>div{display:flex;justify-content:space-between;color:#a7c0d0;font-size:11px}.vp-activity small{font-size:9px;color:#748fa3}.vp-activity svg{width:100%;height:63px;display:block;margin-top:10px;fill:none;stroke:none}.vp-grid{stroke:#214156;stroke-width:1}.vp-area{fill:#37b1d814}.vp-line{stroke:#4fc2df;stroke-width:2;stroke-linejoin:round}
.vp-backup{display:flex;gap:12px;align-items:center;padding:14px;background:#123448;border:1px solid #2c5768;border-radius:8px}.vp-backup-icon{font-size:25px;color:#67ccb6}.vp-backup strong{display:block;color:#def5ed;font-size:12px;font-weight:600}.vp-backup div>span{display:block;color:#9dbdb9;font-size:10px;margin-top:4px}.vp-backup button{margin-left:auto;font-family:inherit;font-size:11px;white-space:nowrap}
.vp-hardware{display:flex;align-items:center;gap:10px;margin-top:20px}.vp-hardware svg{width:29px;height:29px;fill:none;stroke:#82adca;stroke-width:1.3}.vp-hardware small{display:block;font-size:8px;color:#8cacc2;letter-spacing:1px}.vp-hardware strong{display:block;font-size:13px;color:#d4e7f3;font-weight:600;margin-top:4px}.vp-hardware>span{margin-left:auto;color:#aac7d9;font-size:10px;padding:6px 8px;border:1px solid #355569;border-radius:5px}
.vds-panel>figcaption{font-size:11px;color:#94b4c9;border-color:#28455a;background:#0b263a}
.vds-panel.is-off .vp-status{color:#98aab7}.vds-panel.is-busy .vp-status{color:#efb86d}.vds-panel.is-off .vp-line,.vds-panel.is-off .vp-area,.vds-panel.is-busy .vp-line,.vds-panel.is-busy .vp-area{opacity:.12}.vds-panel.is-off .vp-metrics>div:nth-child(-n+2) .vp-meter i,.vds-panel.is-busy .vp-metrics>div:nth-child(-n+2) .vp-meter i{width:0}
@media(max-width:700px){.vp-top{padding:14px}.vp-body{padding:16px}.vp-server h2{font-size:16px}.vp-status{font-size:10px}.vp-actions{gap:6px}.vp-actions button{font-size:10px;padding:8px}.vp-metrics{gap:12px}.vp-backup{padding:11px;gap:8px}.vp-backup strong{font-size:11px}.vp-hardware strong{font-size:12px}.vp-top>strong{font-size:12px}}
@media(prefers-reduced-motion:reduce){.vp-meter i{transition:none}}
@media(min-width:701px){.vp-top{padding:13px 19px}.vp-body{padding:19px}.vp-actions{margin:16px 0}.vp-metrics{padding:14px 0}.vp-activity{padding:13px 0 9px}.vp-activity svg{height:52px}.vp-hardware{margin-top:16px}}
@media(max-width:700px){.service-visual.vds-panel{width:100%}}