.monitor-open{height:42px;padding:0 15px;border:1px solid #cdd8d1;border-radius:999px;background:#edf4ef;color:#155e4b;font-weight:800;display:inline-flex;align-items:center;gap:8px}
.monitor-open i,.monitor-live-dot{width:8px;height:8px;border-radius:50%;background:#32b77a;box-shadow:0 0 0 5px rgba(50,183,122,.12);display:inline-block;animation:monitorPulse 1.5s ease-in-out infinite alternate}
@keyframes monitorPulse{to{opacity:.45;transform:scale(.78)}}
.monitor-backdrop{position:fixed;inset:0;background:rgba(10,24,19,.24);backdrop-filter:blur(3px);z-index:79}
.monitor-panel{position:fixed;right:18px;top:18px;bottom:18px;width:min(430px,calc(100vw - 36px));z-index:80;border-radius:28px;background:#0e201a;color:#eef6f1;box-shadow:0 28px 90px rgba(5,23,17,.34);overflow:hidden;display:flex;flex-direction:column;border:1px solid rgba(255,255,255,.1)}
.monitor-panel[hidden],.monitor-backdrop[hidden]{display:none}
.monitor-head{padding:22px 22px 17px;border-bottom:1px solid rgba(255,255,255,.09);display:flex;justify-content:space-between;align-items:flex-start;gap:14px;background:radial-gradient(circle at 90% 0,rgba(223,238,116,.12),transparent 44%)}
.monitor-brand{font-size:10px;letter-spacing:.14em;color:#a9bcb4;font-weight:850}.monitor-brand b{display:block;margin-top:7px;color:#fff;font:500 25px/1.15 Georgia,"Songti SC",serif;letter-spacing:-.02em}.monitor-status{display:flex;align-items:center;gap:8px;margin-top:11px;color:#aac2b8;font-size:10px}.monitor-close{width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.06);color:#fff;font-size:22px}
.monitor-body{padding:16px 18px 24px;overflow:auto;overscroll-behavior:contain}.monitor-note{margin:0 0 13px;color:#8fa79d;font-size:9px;line-height:1.65}.monitor-note b{color:#dfee74}.monitor-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.monitor-card{min-width:0;padding:13px;border:1px solid rgba(255,255,255,.09);border-radius:16px;background:rgba(255,255,255,.045)}.monitor-card.wide{grid-column:1/-1}.monitor-card small{display:block;color:#8fa79d;font-size:8px;letter-spacing:.08em;font-weight:800}.monitor-value{margin-top:7px;font-size:23px;font-weight:750;letter-spacing:-.035em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.monitor-value em{font-style:normal;font-size:10px;color:#9fb2aa;font-weight:500;margin-left:4px}.monitor-sub{min-height:15px;margin-top:5px;color:#b7c8c1;font-size:9px;line-height:1.5}.monitor-split{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:11px}.monitor-split div{border-left:1px solid rgba(255,255,255,.1);padding-left:8px}.monitor-split div:first-child{border-left:0;padding-left:0}.monitor-split b{display:block;color:#e4efea;font-size:13px}.monitor-split span{color:#799087;font-size:7px}.monitor-chart{height:52px;display:flex;align-items:end;gap:4px;margin-top:12px}.monitor-chart i{flex:1;min-width:3px;height:var(--bar);border-radius:4px 4px 2px 2px;background:linear-gradient(#dfee74,#39a879);opacity:.86}.monitor-section-title{margin:18px 2px 9px;display:flex;justify-content:space-between;align-items:center;color:#dce8e3;font-size:10px;font-weight:850}.monitor-section-title span{color:#738b81;font-size:8px;font-weight:500}.monitor-list{display:grid;gap:7px}.monitor-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;padding:10px 12px;border-radius:13px;background:rgba(255,255,255,.035);font-size:9px}.monitor-row span{color:#8fa69d}.monitor-row b{font-weight:700;text-align:right;max-width:210px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.monitor-events{display:grid;gap:6px}.monitor-event{display:grid;grid-template-columns:48px 8px minmax(0,1fr);gap:8px;align-items:center;color:#b6c8c0;font-size:8px}.monitor-event i{width:6px;height:6px;border-radius:50%;background:#5f8e7b}.monitor-event.ok i{background:#68d59e}.monitor-event.fail i{background:#ef7b55}.monitor-event time{color:#698077}.monitor-empty{padding:12px;color:#70877d;font-size:9px;text-align:center}.monitor-privacy{margin:16px 2px 0;padding-top:13px;border-top:1px solid rgba(255,255,255,.08);color:#738a80;font-size:8px;line-height:1.6}
@media(max-width:900px){.monitor-open span{display:none}.monitor-open{width:42px;padding:0;justify-content:center}}
@media(max-width:670px){.monitor-panel{inset:auto 0 0;width:100%;max-height:91dvh;border-radius:28px 28px 0 0}.monitor-head{padding:19px 18px 15px}.monitor-body{padding:14px 14px calc(22px + env(safe-area-inset-bottom))}.monitor-grid{gap:7px}.monitor-card{padding:12px}.monitor-value{font-size:20px}.head-actions{gap:7px}.monitor-open{width:38px;height:38px}}