.zbxDashboard{padding:20px;animation:float 5s ease-in-out infinite;background:linear-gradient(145deg,rgba(6,20,34,.94),rgba(8,31,50,.9));border-color:rgba(87,181,225,.34)}
.zbxHead{display:flex;align-items:center;justify-content:space-between;padding-bottom:15px;border-bottom:1px solid rgba(255,255,255,.09)}.zbxHead>div{display:flex;align-items:center;gap:10px}.zbxMark{width:30px;height:30px;display:grid;place-items:center;border-radius:7px;background:#d92128;color:#fff;font:800 17px var(--font-display);box-shadow:0 0 22px rgba(217,33,40,.25)}.zbxHead p{margin:0;display:flex;flex-direction:column;gap:2px}.zbxHead p b{font:700 9px var(--font-display);letter-spacing:1.2px}.zbxHead p small{font-size:8px;color:#6f8799}.zbxLive{display:flex;align-items:center;gap:7px;font:700 7px var(--font-display);letter-spacing:1px;color:#6de9aa}.zbxLive i{width:6px;height:6px;border-radius:50%;background:#5ef2a9;box-shadow:0 0 0 5px rgba(94,242,169,.08);animation:zbxPulse 2s infinite}
.zbxKpis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0}.zbxKpis article{min-width:0;padding:12px;border:1px solid rgba(255,255,255,.075);border-radius:8px;background:rgba(255,255,255,.025);display:flex;flex-direction:column}.zbxKpis article>span{font:700 6px var(--font-display);letter-spacing:1px;color:#71899c}.zbxKpis strong{margin:5px 0 3px;font:700 21px var(--font-display);letter-spacing:-.6px}.zbxKpis strong small{font-size:9px;color:#7290a4}.zbxKpis em{font-style:normal;font-size:7px;color:#63dda0}.zbxKpis .warning{color:#ffc96b}
.zbxChart{padding:13px 13px 6px;border:1px solid rgba(38,217,246,.13);border-radius:9px;background:rgba(4,18,30,.52);overflow:hidden}.zbxChartTop{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.zbxChartTop p{margin:0;display:flex;flex-direction:column}.zbxChartTop p b{font-size:9px}.zbxChartTop p small{margin-top:2px;font-size:7px;color:#6b8497}.zbxChartTop>span{display:flex;align-items:center;gap:5px;font-size:6px;color:#7891a3}.zbxChartTop>span i{width:5px;height:5px;border-radius:50%;background:var(--cyan)}.zbxChartTop>span b{font-size:8px;color:#c8f8ff}.zbxChart svg{display:block;width:100%;height:112px;margin-top:4px;overflow:visible}.zbxGrid path{fill:none;stroke:rgba(115,166,197,.1);stroke-width:1}.zbxArea{fill:url(#zbxFill);animation:zbxArea 2.8s ease-out both}.zbxLine{fill:none;stroke:var(--cyan);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:800;stroke-dashoffset:800;filter:drop-shadow(0 0 4px rgba(38,217,246,.5));animation:zbxDraw 3s ease-out forwards}.zbxPoint{fill:#fff;stroke:var(--cyan);stroke-width:2;filter:drop-shadow(0 0 5px var(--cyan));animation:zbxBlink 1.8s infinite}
.zbxBottom{display:grid;grid-template-columns:1fr 1fr 1.35fr;gap:9px;margin-top:10px}.zbxBottom>div{display:grid;grid-template-columns:1fr auto;gap:4px 8px;align-items:center}.zbxBottom span{font:700 6px var(--font-display);letter-spacing:.8px;color:#678095}.zbxBottom b{font-size:8px}.zbxBottom>div>i{grid-column:1/-1;height:3px;border-radius:9px;background:rgba(255,255,255,.08);overflow:hidden}.zbxBottom u{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--blue),var(--cyan));text-decoration:none;transform-origin:left;animation:zbxBar 2.5s ease-out both}.zbxEvents{padding-left:10px;border-left:1px solid rgba(255,255,255,.09)}.zbxEvents b{display:flex;align-items:center;gap:5px;color:#c6d5df}.zbxEvents b i{width:5px;height:5px;border-radius:50%;background:#5ef2a9}.zbxEvents small{grid-column:1/-1;font-size:6px;color:#638095}
@keyframes zbxDraw{to{stroke-dashoffset:0}}@keyframes zbxArea{from{opacity:0}to{opacity:1}}@keyframes zbxBlink{50%{opacity:.25}}@keyframes zbxBar{from{transform:scaleX(0)}}@keyframes zbxPulse{50%{box-shadow:0 0 0 10px rgba(94,242,169,0)}}
@media(max-width:560px){.zbxDashboard{padding:16px}.zbxKpis article{padding:10px}.zbxKpis strong{font-size:18px}.zbxChart svg{height:95px}.zbxBottom{grid-template-columns:1fr 1fr}.zbxEvents{grid-column:1/-1;padding:10px 0 0;border-left:0;border-top:1px solid rgba(255,255,255,.09)}}
@media(prefers-reduced-motion:reduce){.zbxLine{stroke-dashoffset:0}.zbxArea{opacity:1}.zbxBottom u{transform:none}}

/* Brighter monitoring variant: crisp white surfaces without losing the dark operations-console feel. */
.zbxDashboard{border-color:rgba(255,255,255,.48);box-shadow:0 35px 100px rgba(0,0,0,.34),0 0 34px rgba(255,255,255,.055)}
.zbxHead{border-bottom-color:rgba(255,255,255,.2)}.zbxHead p b,.zbxKpis strong,.zbxChartTop p b,.zbxBottom b{color:#fff}.zbxHead p small,.zbxKpis article>span,.zbxBottom span{color:#9fb4c3}
.zbxKpis article{border-color:rgba(255,255,255,.2);background:linear-gradient(145deg,rgba(255,255,255,.11),rgba(255,255,255,.045));box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.zbxChart{position:relative;border-color:rgba(255,255,255,.28);background:linear-gradient(160deg,rgba(255,255,255,.095),rgba(4,18,30,.64));box-shadow:inset 0 1px 0 rgba(255,255,255,.09)}.zbxChart:after{content:"";position:absolute;top:0;bottom:0;width:70px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.09),transparent);transform:skewX(-15deg);animation:zbxScan 5s ease-in-out infinite;pointer-events:none}.zbxGrid path{stroke:rgba(255,255,255,.17)}.zbxPoint{fill:#fff;stroke:#fff;filter:drop-shadow(0 0 8px #fff)}
.zbxBottom>div>i{background:rgba(255,255,255,.2)}.zbxEvents{border-left-color:rgba(255,255,255,.2)}
@keyframes zbxScan{0%,18%{left:-90px;opacity:0}30%{opacity:1}65%,100%{left:calc(100% + 20px);opacity:0}}
@media(prefers-reduced-motion:reduce){.zbxChart:after{display:none}}