.pd-wrap{--pd-abyss:#0a1218;--pd-deep:#0e1f28;--pd-panel:#122630;--pd-panel2:#16303c;
  --pd-teal:#3fd7c4;--pd-lamp:#fff3d6;--pd-brick:#c4674f;--pd-amber:#e0a856;
  --pd-ink:#b6c4c8;--pd-bright:#dbe5e7;--pd-dim:#8fa1a6;--pd-line:rgba(255,255,255,.09);
  margin:44px 0 8px;}
.pd-lead{color:var(--pd-dim);font-size:0.9375rem;margin:0 0 16px;max-width:60ch}
.pd-device{position:relative;background:#05090c;border:1px solid rgba(255,255,255,.14);
  border-radius:18px;padding:12px;box-shadow:0 30px 70px -30px rgba(0,0,0,.9);}

.pd-screen{background:var(--pd-abyss);border-radius:10px;overflow:hidden;
  aspect-ratio:4/3;display:flex;flex-direction:column;min-height:0;
  font-family:'Inter',system-ui,sans-serif;color:var(--pd-ink);
  container-type:inline-size;}
.pd-status{display:flex;align-items:center;gap:10px;padding:1.72cqw 2.064cqw;
  border-bottom:1px solid var(--pd-line);background:rgba(255,255,255,.02);font-size:1.333cqw}
.pd-sysname{font-weight:600;color:var(--pd-bright);letter-spacing:.01em}
.pd-beacon{display:inline-flex;align-items:center;gap:0.602cqw;margin-left:auto;
  font-size:1.247cqw;letter-spacing:.06em;text-transform:uppercase;font-weight:600}
.pd-dot{width:0.903cqw;height:0.903cqw;border-radius:50%;background:var(--pd-teal);
  box-shadow:0 0 0 0 rgba(63,215,196,.55);animation:pd-pulse 3.2s ease-out infinite}
.pd-beacon.lh .pd-dot{background:var(--pd-amber);box-shadow:0 0 0 0 rgba(224,168,86,.55)}
.pd-beacon.alarm .pd-dot{background:var(--pd-brick);animation-duration:1.1s}
.pd-beacon.lh{color:var(--pd-amber)} .pd-beacon.alarm{color:var(--pd-brick)}
.pd-beacon{color:var(--pd-teal)}
@keyframes pd-pulse{0%{box-shadow:0 0 0 0 currentColor}70%{box-shadow:0 0 0 0.774cqw rgba(0,0,0,0)}100%{box-shadow:0 0 0 0 rgba(0,0,0,0)}}
@media (prefers-reduced-motion: reduce){.pd-dot{animation:none}}
.pd-clock{color:var(--pd-dim);font-variant-numeric:tabular-nums}

.pd-tabs{display:flex;gap:0.258cqw;padding:0 1.376cqw;border-bottom:1px solid var(--pd-line);
  overflow-x:auto;scrollbar-width:none}
.pd-tabs::-webkit-scrollbar{display:none}
.pd-tab{appearance:none;background:none;border:0;border-bottom:2px solid transparent;
  color:var(--pd-dim);font:inherit;font-size:1.376cqw;padding:1.29cqw 1.29cqw;cursor:pointer;
  white-space:nowrap;font-weight:500}
.pd-tab:hover{color:var(--pd-bright)}
.pd-tab[aria-selected="true"]{color:var(--pd-teal);border-bottom-color:var(--pd-teal)}
.pd-tab:focus-visible{outline:2px solid var(--pd-teal);outline-offset:-3px}
.pd-tab[disabled]{color:#3d4b50;cursor:not-allowed}
.pd-tab[disabled]:hover{color:#3d4b50}
.pd-lock{font-size:1.075cqw;opacity:.75;margin-left:0.387cqw}

.pd-body{flex:1;min-height:0;overflow:auto;padding:1.892cqw 2.064cqw}

.pd-alert{flex:0 0 auto}
.pd-alert:empty{display:none}

.pd-banner{display:none;align-items:flex-start;gap:1.032cqw;
  padding:1.462cqw 2.064cqw;font-size:1.376cqw;line-height:1.45;border-top:1px solid}
.pd-banner.show{display:flex}

.pd-banner.warn{background:linear-gradient(rgba(224,168,86,.13),rgba(224,168,86,.13)),#0d1a21;
  border-top-color:rgba(224,168,86,.5);color:#f0cf9c}
.pd-banner.crit{background:linear-gradient(rgba(196,103,79,.16),rgba(196,103,79,.16)),#0d1a21;
  border-top-color:rgba(196,103,79,.6);color:#f0b39c}
.pd-banner.info{background:linear-gradient(rgba(63,215,196,.11),rgba(63,215,196,.11)),#0d1a21;
  border-top-color:rgba(63,215,196,.45);color:#9fe8dd}
.pd-banner strong{color:#fff;font-weight:600}

.pd-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.204cqw}
.pd-tile{background:var(--pd-panel);border:1px solid var(--pd-line);border-radius:0.86cqw;padding:1.376cqw}
.pd-tile.alert{border-color:rgba(196,103,79,.6);background:rgba(196,103,79,.09)}
.pd-tl{font-size:1.161cqw;letter-spacing:.1em;text-transform:uppercase;color:var(--pd-dim);font-weight:600}
.pd-val{font-family:'Sora',system-ui,sans-serif;font-weight:600;color:var(--pd-bright);
  font-size:3.096cqw;line-height:1.15;margin-top:0.43cqw;font-variant-numeric:tabular-nums}
.pd-val small{font-size:1.462cqw;color:var(--pd-dim);margin-left:0.344cqw;font-weight:500}
.pd-sub{font-size:1.161cqw;color:var(--pd-dim);margin-top:0.301cqw}
.pd-tile.alert .pd-val{color:#f0b39c}
.pd-spark{display:block;width:100%;height:3.612cqw;margin-top:0.688cqw;overflow:visible}

.pd-h{font-family:'Sora',system-ui,sans-serif;font-size:1.548cqw;color:var(--pd-bright);
  font-weight:600;margin:2.064cqw 0 0.946cqw}
.pd-rows{display:flex;flex-direction:column;gap:0.516cqw}

.pd-rows.two{display:grid;grid-template-columns:repeat(2,1fr);gap:0.516cqw}
.pd-row{display:flex;align-items:center;gap:1.032cqw;background:var(--pd-panel);
  border:1px solid var(--pd-line);border-radius:0.688cqw;padding:1.118cqw 1.376cqw;font-size:1.376cqw}
.pd-row.alert{border-color:rgba(196,103,79,.55);background:rgba(196,103,79,.08)}
.pd-row .nm{color:var(--pd-bright);font-weight:500}
.pd-row .rv{margin-left:auto;font-variant-numeric:tabular-nums;color:var(--pd-bright)}
.pd-row .meta{color:var(--pd-dim);font-size:1.204cqw}

.pd-row .port{font-size:1.032cqw;letter-spacing:.06em;font-weight:600;
  font-variant-numeric:tabular-nums;padding:.18em .5em;border-radius:.35em;
  white-space:nowrap}
.pd-row .port.ac{color:#8fa1a6;background:rgba(255,255,255,.055)}
.pd-row .port.dc{color:var(--pd-teal);background:rgba(63,215,196,.09)}
.pd-chip{font-size:1.118cqw;letter-spacing:.08em;text-transform:uppercase;font-weight:600;
  padding:0.301cqw 0.86cqw;border-radius:99px;border:1px solid}
.pd-chip.on{color:var(--pd-teal);border-color:rgba(63,215,196,.45);background:rgba(63,215,196,.1)}
.pd-chip.off{color:var(--pd-dim);border-color:rgba(255,255,255,.14)}
.pd-chip.cut{color:var(--pd-brick);border-color:rgba(196,103,79,.6);background:rgba(196,103,79,.12)}
.pd-chip.hold{color:var(--pd-amber);border-color:rgba(224,168,86,.5);background:rgba(224,168,86,.1)}

.pd-log{margin-top:1.204cqw;border-top:1px solid var(--pd-line);padding-top:1.118cqw;
  display:flex;flex-direction:column;gap:0.473cqw;font-size:1.204cqw}
.pd-le{display:flex;gap:1.032cqw;color:var(--pd-dim)}
.pd-le time{font-variant-numeric:tabular-nums;flex:0 0 auto;color:#6f8085}
.pd-le.crit span{color:#f0b39c} .pd-le.warn span{color:#f0cf9c} .pd-le.ok span{color:#9fe8dd}

.pd-ctl{margin-top:16px;border:1px solid var(--line,rgba(255,255,255,.09));border-radius:12px;
  background:rgba(255,255,255,.02);padding:16px 18px}
.pd-ctl h4{font-family:'Sora',system-ui,sans-serif;margin:0 0 4px;font-size:0.9375rem;color:#dbe5e7;font-weight:600}
.pd-ctl p{margin:0 0 12px;font-size:0.84375rem;color:#8fa1a6}
.pd-btns{display:flex;flex-wrap:wrap;gap:8px}
.pd-b{font:inherit;font-size:0.84375rem;font-weight:500;color:#dbe5e7;background:#16303c;
  border:1px solid rgba(255,255,255,.16);border-radius:8px;padding:8px 14px;cursor:pointer}
.pd-b:hover{border-color:#3fd7c4;color:#3fd7c4}
.pd-b:focus-visible{outline:2px solid #3fd7c4;outline-offset:2px}
.pd-b.armed{border-color:#c4674f;color:#f0b39c;background:rgba(196,103,79,.14)}
.pd-b.reset{margin-left:auto;background:transparent;color:#8fa1a6}
@media (max-width:760px){
  .pd-grid{grid-template-columns:repeat(2,1fr)}
  .pd-rows.two{grid-template-columns:1fr}
  .pd-b.reset{margin-left:0}
}

@media (max-width:760px){
  .pd-device{padding:8px;border-radius:14px}
  .pd-screen{aspect-ratio:auto;min-height:560px}
  .pd-status{padding:11px 12px;font-size:0.78125rem;gap:8px}
  .pd-beacon{font-size:0.6875rem;gap:6px}
  .pd-dot{width:8px;height:8px}
  .pd-tabs{padding:0 6px}
  .pd-tab{font-size:0.8125rem;padding:11px 10px}
  .pd-lock{font-size:0.5625rem;margin-left:4px}
  .pd-body{padding:14px 12px}
  .pd-banner{font-size:0.8125rem;padding:12px 13px;gap:9px}
  .pd-grid{gap:9px}
  .pd-tile{padding:11px;border-radius:9px}
  .pd-tl{font-size:0.625rem}
  .pd-val{font-size:1.625rem}
  .pd-val small{font-size:0.75rem}
  .pd-sub{font-size:0.6875rem}
  .pd-spark{height:26px}
  .pd-h{font-size:0.9375rem;margin:18px 0 9px}
  .pd-row{font-size:0.84375rem;padding:10px 12px;border-radius:8px;gap:9px;flex-wrap:wrap}
  .pd-row .meta{font-size:0.71875rem;width:100%;order:3}
  .pd-row .port{font-size:0.625rem}
  .pd-chip{font-size:0.625rem;padding:3px 8px}
  .pd-log{font-size:0.71875rem;gap:5px;margin-top:12px;padding-top:11px}
  .pd-le{gap:9px}
  .pd-btns{gap:7px}
  .pd-b{flex:1 1 auto;text-align:center;font-size:0.8125rem;padding:10px 10px}
  .pd-b.reset{flex-basis:100%}
}