.mlh-panel { margin: 14px 0 18px; padding: 18px; border: 1px solid #d9e2dc; border-radius: 14px; background: linear-gradient(145deg,#fbfdfb,#f3f8f4); box-shadow: 0 8px 28px rgba(32,63,47,.06); }
.mlh-header { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-bottom:14px; }
.mlh-header h2 { margin:2px 0 3px; font-size:22px; }.mlh-header p,.mlh-panel footer { margin:0; color:#64716a; font-size:12px; }
.mlh-kicker { display:block; color:#587063; font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.mlh-summary { display:flex; gap:8px; align-items:baseline; padding:10px 12px; margin-bottom:12px; border-radius:9px; font-size:13px; }.mlh-summary.mlh-warning { background:#fff4dc; color:#744b06; }.mlh-summary.mlh-steady { background:#eaf7ef; color:#24583a; }
.mlh-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }.mlh-vendor { min-width:0; padding:15px; background:#fff; border:1px solid #e1e7e3; border-radius:11px; }.mlh-vendor.mlh-warning,.mlh-vendor.mlh-critical,.mlh-vendor.mlh-degraded,.mlh-vendor.mlh-disconnected { border-color:#e8c46e; }
.mlh-vendor-head { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; }.mlh-vendor-head strong { display:block; margin-top:3px; font:600 30px/1 'Fraunces',serif; color:#18241d; }.mlh-vendor-head small { color:#6c7771; }
.mlh-pill { display:inline-flex; align-items:center; gap:6px; white-space:nowrap; padding:5px 8px; border-radius:999px; background:#edf4ef; color:#315b43; font-size:11px; font-weight:700; }.mlh-pill i { width:7px; height:7px; border-radius:50%; background:#3b9b64; }.mlh-pill.mlh-degraded,.mlh-pill.mlh-syncing { background:#fff2d8; color:#7a520e; }.mlh-pill.mlh-degraded i,.mlh-pill.mlh-syncing i { background:#d49122; }.mlh-pill.mlh-disconnected { background:#fde8e5; color:#8a3128; }.mlh-pill.mlh-disconnected i { background:#c84b3c; }
.mlh-change { margin-top:10px; font-size:13px; font-weight:700; color:#3c6e51; }.mlh-change span { font-weight:500; color:#7b8580; }.mlh-change.mlh-warning,.mlh-change.mlh-critical { color:#a05c09; }
.mlh-spark { width:100%; height:58px; margin:6px 0 2px; overflow:visible; }.mlh-spark line { stroke:#e6ebe8; stroke-width:1; }.mlh-spark polyline { fill:none; stroke:#3f7a58; stroke-width:2.4; stroke-linejoin:round; stroke-linecap:round; }.mlh-warning .mlh-spark polyline,.mlh-critical .mlh-spark polyline { stroke:#c57a17; }
.mlh-driver { margin:7px 0; padding:7px 9px; border-radius:7px; background:#fff6e6; color:#75501b; font-size:12px; }.mlh-meta { display:flex; gap:14px; color:#5d6962; font-size:12px; }.mlh-meta b { color:#24352b; }.mlh-sync { margin:8px 0 0; color:#7a847e; font-size:11px; }.mlh-loading,.mlh-error { margin:6px 0; font-size:13px; }.mlh-error { color:#9a3028; }.mlh-panel footer { margin-top:11px; }
@media (max-width:760px){.mlh-header,.mlh-summary{flex-direction:column}.mlh-grid{grid-template-columns:1fr}.mlh-header .btn{width:100%}}
@media (prefers-reduced-motion:reduce){.mlh-panel *{scroll-behavior:auto!important}}