:root{--bg:#0a1019;--surface:#0f1a28;--surface-2:#0c1622;--surface-3:#132235;--border:#1e3148;--border-2:#15273e;
    --text:#e8eef7;--muted:#8595ab;--muted-2:#5d6f86;--accent:#3b9eff;--ok:#34d399;--warn:#fbbf24;--crit:#f87171;--off:#64748b;
    --info:#60a5fa;--purple:#a78bfa;--pink:#f472b6}
  *{box-sizing:border-box} html,body{height:100%;margin:0}
  body{font:13.5px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;background:var(--bg);color:var(--text)}
  a{color:var(--accent);text-decoration:none}
  ::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:#22364f;border-radius:6px}::-webkit-scrollbar-track{background:transparent}
  .topbar{display:flex;align-items:center;gap:16px;padding:11px 20px;background:linear-gradient(180deg,var(--surface),var(--surface-2));border-bottom:1px solid var(--border);position:sticky;top:0;z-index:30;flex-wrap:wrap}
  .brand{font-weight:700;font-size:15px;color:var(--accent);display:flex;align-items:center;gap:8px}
  .brand .tag{font-size:9.5px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);border:1px solid var(--border);border-radius:5px;padding:2px 6px}
  .spacer{flex:1}
  .tools{display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--muted)}
  .pulse{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--ok);animation:pulse 1.8s ease-out infinite;vertical-align:middle}
  .pulse.paused{background:var(--warn);animation:none}
  @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(52,211,153,.5)}70%{box-shadow:0 0 0 7px rgba(52,211,153,0)}100%{box-shadow:0 0 0 0 rgba(52,211,153,0)}}
  .btn{background:var(--surface-3);color:var(--text);border:1px solid var(--border);padding:6px 12px;border-radius:7px;cursor:pointer;font-size:12px;display:inline-flex;align-items:center;gap:6px}
  .btn:hover{border-color:var(--accent)} .btn.primary{background:var(--accent);color:#04121f;border-color:var(--accent);font-weight:600}
  .btn.sm{padding:3px 9px;font-size:11px} .btn.danger{color:var(--crit);border-color:#3a1f28} .btn.danger:hover{border-color:var(--crit)}
  .tabs{display:flex;gap:3px;padding:9px 16px 0;background:var(--surface-2);border-bottom:1px solid var(--border);overflow-x:auto;position:sticky;top:46px;z-index:20}
  .tab{padding:8px 15px;font-size:12.5px;font-weight:600;color:var(--muted);cursor:pointer;border:1px solid transparent;border-bottom:none;border-radius:8px 8px 0 0;white-space:nowrap;display:flex;align-items:center;gap:7px}
  .tab:hover{color:var(--text)} .tab.active{color:var(--accent);background:var(--bg);border-color:var(--border);border-bottom:1px solid var(--bg);margin-bottom:-1px}
  .tab .cnt{font-size:10px;background:var(--surface-3);color:var(--muted);border-radius:9px;padding:1px 6px;min-width:16px;text-align:center}
  .tab.active .cnt{background:var(--accent);color:#04121f}
  .tab .cnt.crit{background:var(--crit);color:#1a0606} .tab .cnt.warn{background:var(--warn);color:#1a1406}
  .wrap{padding:18px 20px;max-width:1500px;margin:0 auto}
  .grid{display:grid;gap:14px}
  .kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:16px}
  .kpi{background:var(--surface);border:1px solid var(--border);border-radius:11px;padding:14px 16px;position:relative;overflow:hidden}
  .kpi .v{font-size:26px;font-weight:700;line-height:1.05} .kpi .l{color:var(--muted);font-size:11.5px;margin-top:6px;text-transform:uppercase;letter-spacing:.4px}
  .kpi .sub{color:var(--muted-2);font-size:11px;margin-top:3px}
  .card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:16px 18px;margin-bottom:16px}
  .card h2{font-size:13px;margin:0 0 13px;color:var(--text);display:flex;align-items:center;gap:8px;text-transform:uppercase;letter-spacing:.5px;font-weight:700}
  .card h2 .hint{font-size:11px;color:var(--muted-2);text-transform:none;letter-spacing:0;font-weight:400;margin-left:auto}
  .row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  @media(max-width:900px){.row{grid-template-columns:1fr}}
  .svc{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid var(--border-2);border-radius:8px;background:var(--surface-2);cursor:pointer;transition:border-color .12s}
  .svc:hover{border-color:var(--accent)} .svc .name{flex:1;font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .svc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px}
  .pill{font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:20px;text-transform:uppercase;letter-spacing:.3px}
  .pill.up,.pill.ok,.pill.healthy{background:rgba(52,211,153,.14);color:var(--ok)} .pill.down,.pill.crit,.pill.critical{background:rgba(248,113,113,.14);color:var(--crit)}
  .pill.warn,.pill.degraded,.pill.pending{background:rgba(251,191,36,.14);color:var(--warn)} .pill.info,.pill.inactive{background:rgba(96,165,250,.14);color:var(--info)}
  .pill.dot::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:currentColor;margin-right:5px;vertical-align:middle}
  table{width:100%;border-collapse:collapse;font-size:12.5px}
  th{text-align:left;color:var(--muted);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.4px;padding:7px 10px;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--surface)}
  td{padding:8px 10px;border-bottom:1px solid var(--border-2);vertical-align:top}
  tr.clk{cursor:pointer} tr.clk:hover td{background:var(--surface-2)}
  code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;background:var(--surface-3);padding:1px 5px;border-radius:4px;color:#cbd5e1}
  .bar{height:7px;border-radius:4px;background:var(--surface-3);overflow:hidden} .bar > i{display:block;height:100%;border-radius:4px}
  .gauge{position:relative;width:128px;height:128px;margin:0 auto}
  .gauge .lbl{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
  .gauge .lbl .n{font-size:30px;font-weight:800;line-height:1} .gauge .lbl .t{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-top:3px}
  .muted{color:var(--muted)} .mono{font-family:ui-monospace,monospace}
  .meter{margin:7px 0} .meter .top{display:flex;justify-content:space-between;font-size:12px;margin-bottom:4px} .meter .top .mv{color:var(--muted)}
  .tag2{font-size:10px;color:var(--muted);border:1px solid var(--border);border-radius:5px;padding:1px 6px}
  .reasons{display:flex;flex-direction:column;gap:9px}
  .reason{display:grid;grid-template-columns:130px 1fr 48px;align-items:center;gap:10px;font-size:12px}
  .empty{text-align:center;color:var(--muted-2);padding:26px;font-size:12.5px}
  .toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
  input,select{background:var(--surface-2);border:1px solid var(--border);color:var(--text);border-radius:7px;padding:6px 9px;font-size:12px;font-family:inherit}
  input:focus,select:focus{outline:none;border-color:var(--accent)}
  .logline{font-family:ui-monospace,monospace;font-size:11.5px;padding:4px 10px;border-bottom:1px solid var(--border-2);display:flex;gap:10px;white-space:pre-wrap;word-break:break-word}
  .logline .t{color:var(--muted-2);flex-shrink:0} .logline .u{color:var(--purple);flex-shrink:0;min-width:120px}
  .logline.err{background:rgba(248,113,113,.06)} .logline.err .m{color:#fca5a5} .logline.warn .m{color:#fcd34d}
  .feed{display:flex;flex-direction:column;gap:1px;max-height:340px;overflow:auto}
  /* drawer */
  .drawer-bg{position:fixed;inset:0;background:rgba(4,9,16,.55);z-index:40;opacity:0;pointer-events:none;transition:opacity .18s}
  .drawer-bg.open{opacity:1;pointer-events:auto}
  .drawer{position:fixed;top:0;right:0;height:100%;width:min(620px,94vw);background:var(--surface);border-left:1px solid var(--border);z-index:41;transform:translateX(100%);transition:transform .2s ease;overflow:auto;box-shadow:-12px 0 40px rgba(0,0,0,.4)}
  .drawer.open{transform:translateX(0)}
  .drawer .dh{position:sticky;top:0;background:var(--surface-2);border-bottom:1px solid var(--border);padding:14px 18px;display:flex;align-items:center;gap:10px;z-index:2}
  .drawer .dh h3{margin:0;font-size:14px;flex:1;overflow:hidden;text-overflow:ellipsis} .drawer .db{padding:16px 18px}
  .sec{margin-bottom:18px} .sec h4{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);margin:0 0 8px}
  .kv{display:grid;grid-template-columns:140px 1fr;gap:4px 10px;font-size:12px} .kv .k{color:var(--muted)}
  .x{cursor:pointer;color:var(--muted);font-size:18px;line-height:1;padding:2px 6px;border-radius:6px} .x:hover{background:var(--surface-3);color:var(--text)}
  .spark{display:block} .skeleton{color:var(--muted-2);padding:20px;text-align:center}
  .toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);background:var(--surface-3);border:1px solid var(--border);color:var(--text);padding:9px 16px;border-radius:9px;z-index:60;font-size:12.5px;opacity:0;transition:opacity .2s;pointer-events:none}
  .toast.show{opacity:1}
  .toast.ok{border-color:var(--ok)} .toast.err{border-color:var(--crit)}
  .foot{color:var(--muted-2);font-size:11px;text-align:center;padding:18px}
  .flex{display:flex;align-items:center;gap:8px} .wrapflex{flex-wrap:wrap}
/* IT4Y_MON_CSP_STRICT_2026_06_03 — classes replacing former inline style= attributes (static styles). */
.mon-authcard{max-width:560px;margin:48px auto;text-align:center}
.mon-authcard2{max-width:620px;margin:48px auto;text-align:center}
.mon-bigemoji{font-size:42px;margin-bottom:6px}
.mon-bigemoji2{font-size:44px;margin-bottom:6px}
.mon-jc{justify-content:center}
.mon-mt4{margin-top:4px}
.mon-mt10{margin-top:10px}
.mon-mt12{margin-top:12px}
.mon-mt14{margin-top:14px}
.mon-mt16{margin-top:16px}
.mon-mt18{margin-top:18px}
.mon-mt8f11{margin-top:8px;font-size:11px}
.mon-hint12{font-size:12px;margin-top:10px}
.mon-row200{grid-template-columns:200px 1fr;align-items:stretch}
.mon-cardcol{display:flex;flex-direction:column;align-items:center;justify-content:center}
.mon-mb0{margin-bottom:0}
.mon-tar{text-align:right}
.mon-tarb{text-align:right;font-weight:600}
.mon-sc260{max-height:260px;overflow:auto}
.mon-sc300{max-height:300px;overflow:auto}
.mon-sc430{max-height:430px;overflow:auto}
.mon-errellip{max-width:340px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#fca5a5}
.mon-tbc{margin-top:10px;justify-content:center}
.mon-w90{width:90px}
.mon-w100{width:100%}
.mon-w130{width:130px}
.mon-w200{width:200px}
.mon-wgrid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.mon-wcard{margin:0;cursor:pointer;padding:13px 15px}
.mon-jsb{justify-content:space-between}
.mon-f11{font-size:11px}
.mon-f115{font-size:11.5px}
.mon-f125{font-size:12.5px}
.mon-wq{font-size:11px;margin:7px 0}
.mon-wkv{grid-template-columns:1fr 1fr;font-size:11.5px}
.mon-flex1{flex:1}
.mon-mb11{margin-bottom:11px}
.mon-mb5{margin-bottom:5px}
.mon-mla{margin-left:auto}
.mon-cap{font-size:11px;margin-top:6px}
.mon-logq{flex:1;min-width:160px}
.mon-logbox{max-height:560px;overflow:auto;background:var(--surface-2);border:1px solid var(--border-2);border-radius:8px}
.mon-drawerlogs{background:var(--surface-2);border-radius:8px;max-height:340px;overflow:auto}
.mon-errbox{border:1px solid #3a1f28;border-radius:7px}