:root{--bg:#0f1115;--card:#171a21;--line:#262b36;--text:#e7e9ee;--muted:#8a92a3;--accent:#34b7f1;
      --ok:#2e9e5b;--warn:#d9932b;--bad:#c0504d;
      --input-bg:#0d0f14;--sec-bg:#262b36;--tint-bg:#0d1a22;--bubble-bg:#1c2029;--err-text:#ff7b72;
      --shadow-toast:rgba(0,0,0,.4);--shadow-backdrop:rgba(0,0,0,.6);
      --chart-grid:rgba(255,255,255,.06);--row-hover:rgba(255,255,255,.02);--cs:dark;}
:root[data-theme="light"]{--bg:#f3f5f8;--card:#ffffff;--line:#e2e6ec;--text:#1a2230;--muted:#6b7280;--accent:#1f7fb3;
      --ok:#1f8a4c;--warn:#b8791a;--bad:#c23b3b;
      --input-bg:#eef1f5;--sec-bg:#e4e8ee;--tint-bg:#eaf6fd;--bubble-bg:#eef1f5;--err-text:#c23b3b;
      --shadow-toast:rgba(15,23,35,.12);--shadow-backdrop:rgba(15,23,35,.35);
      --chart-grid:rgba(15,23,35,.08);--row-hover:rgba(15,23,35,.035);--cs:light;}
:root{color-scheme:var(--cs)}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,Segoe UI,Roboto,sans-serif}
a{color:var(--accent)}
/* login */
#login{min-height:100vh;display:flex;align-items:center;justify-content:center}
.box{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:28px;width:340px}
.box h1{font-size:18px;margin:0 0 4px} .box p{color:var(--muted);font-size:13px;margin:0 0 18px}
label{display:block;font-size:12px;color:var(--muted);margin:12px 0 6px}
input,select,textarea{width:100%;padding:10px 12px;background:var(--input-bg);border:1px solid var(--line);border-radius:8px;color:var(--text);font-size:13px;outline:none;font-family:inherit}
input:focus,select:focus,textarea:focus{border-color:var(--accent)}
button{background:var(--accent);color:#04121a;border:0;border-radius:8px;padding:10px 16px;font-weight:700;font-size:13px;cursor:pointer}
button.sec{background:var(--sec-bg);color:var(--text)} button:disabled{opacity:.5}
.err{color:var(--err-text);font-size:12px;margin-top:10px;min-height:14px}
.state-box{text-align:center;padding:52px 24px}
.state-icon{font-size:34px;margin-bottom:12px}
.state-title{font-size:15px;font-weight:700;color:var(--bad);margin-bottom:6px}
.state-desc{color:var(--muted);font-size:13px;line-height:1.5;max-width:440px;margin:0 auto 20px;word-break:break-word}
/* password show/hide toggle */
.pw-wrap{position:relative}
.pw-wrap input{padding-right:96px}
.pw-toggle{position:absolute;right:6px;top:50%;transform:translateY(-50%);margin:0;padding:5px 10px;
  font-size:11px;font-weight:600;background:var(--sec-bg);color:var(--text)}
/* app */
#app{display:none}
header{background:var(--card);border-bottom:1px solid var(--line);padding:12px 20px;display:flex;align-items:center;gap:16px;
  position:sticky;top:0;z-index:40;box-shadow:0 2px 10px var(--shadow-toast)}
header h1{font-size:16px;margin:0}
header nav{display:flex;gap:6px;margin-left:20px;flex-wrap:wrap}
header nav a{padding:6px 12px;border-radius:8px;font-size:13px;cursor:pointer;color:var(--muted);text-decoration:none}
header nav a.on{background:var(--input-bg);color:var(--text)}
.nav-toggle{display:none;background:transparent;border:1px solid var(--line);border-radius:8px;
  color:var(--text);font-size:16px;padding:6px 10px;cursor:pointer;line-height:1}
.who{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:220px}
.mini-tag{margin-left:8px;vertical-align:middle}
/* ---- compact account dropdown (email/role, theme, password, logout) ---- */
.user-menu{position:relative}
.notif-menu{position:relative;margin-left:auto}
.notif-trigger{position:relative;background:transparent;border:1px solid var(--line);border-radius:8px;
  padding:6px 10px;cursor:pointer;color:var(--text);font-size:15px;line-height:1}
.notif-trigger:hover{border-color:var(--accent)}
.notif-dot{position:absolute;top:3px;right:5px;width:8px;height:8px;border-radius:99px;background:var(--bad);border:2px solid var(--card)}
.notif-dropdown{position:absolute;top:calc(100% + 6px);right:0;width:340px;max-width:88vw;background:var(--card);
  border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 30px var(--shadow-toast);display:none;
  max-height:420px;overflow:auto;z-index:50}
.notif-menu.open .notif-dropdown{display:block}
.notif-header{padding:12px 14px;font-weight:700;font-size:13px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--card)}
.notif-item{display:flex;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line);cursor:pointer}
.notif-item:last-child{border-bottom:0}
.notif-item:hover{background:var(--input-bg)}
.notif-item.unread{background:var(--tint-bg)}
.notif-icon{font-size:16px;flex:0 0 auto}
.notif-body{flex:1;min-width:0}
.notif-title{font-size:12px;font-weight:700;margin-bottom:2px}
.notif-desc{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.notif-time{font-size:10px;color:var(--muted);margin-top:4px}
.notif-empty{padding:28px 16px;text-align:center;color:var(--muted);font-size:13px}
.notif-section-label{padding:8px 14px 4px;font-size:10px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.user-trigger{display:flex;align-items:center;gap:8px;background:transparent;border:1px solid var(--line);
  border-radius:8px;padding:6px 10px;cursor:pointer;color:var(--text);font-size:12px}
.user-trigger:hover{border-color:var(--accent)}
.user-trigger .chev{color:var(--muted);font-size:10px;transition:transform .15s ease;flex:0 0 auto}
.user-menu.open .chev{transform:rotate(180deg)}
.user-dropdown{position:absolute;top:calc(100% + 6px);right:0;min-width:210px;background:var(--card);
  border:1px solid var(--line);border-radius:10px;padding:6px;box-shadow:0 10px 30px var(--shadow-toast);
  display:none;z-index:50}
.user-menu.open .user-dropdown{display:block}
.ud-item{display:flex;align-items:center;gap:8px;width:100%;background:transparent;color:var(--text);
  border:0;border-radius:8px;padding:8px 10px;font-size:13px;font-weight:600;cursor:pointer;text-align:left}
.ud-item:hover{background:var(--input-bg)}
.ud-item.danger{color:var(--bad)}
.ud-sep{height:1px;background:var(--line);margin:6px 4px}
main{max-width:1200px;margin:0 auto;padding:22px 20px 60px}
.healthbar{display:flex;flex-wrap:wrap;align-items:center;gap:16px;background:var(--card);border:1px solid var(--line);
  border-radius:12px;padding:10px 16px;margin-bottom:14px;font-size:12px}
.hb-item{display:flex;align-items:center;gap:6px}
.dot{width:8px;height:8px;border-radius:99px;background:#4b5162;flex:0 0 auto}
.dot.ok{background:var(--ok)} .dot.bad{background:var(--bad)}
.resource-row{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);
  border-radius:12px;padding:12px 16px;margin-bottom:14px}
.resource-icon{font-size:20px;flex:0 0 auto}
.resource-info{flex:1;min-width:0}
.resource-label{font-size:12px;font-weight:600;margin-bottom:6px;display:flex;gap:8px;align-items:baseline}
.resource-info .usage-bar{width:100%}
.spec-row{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:14px}
.spec-chip{display:flex;align-items:center;gap:7px;background:var(--input-bg);border:1px solid var(--line);
  border-radius:99px;padding:7px 14px;font-size:12px;color:var(--muted)}
.spec-chip b{color:var(--text);font-weight:600;font-size:12px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin-bottom:8px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px}
.stat .n{font-size:26px;font-weight:800} .stat .l{color:var(--muted);font-size:12px;margin-top:4px}
.stat.clickable{cursor:pointer;transition:border-color .15s ease}
.stat.clickable:hover{border-color:var(--accent)}
.stat.warn-stat .n{color:var(--warn)}
.stat.warn-stat.clickable:hover{border-color:var(--warn)}
.stat.stat-ok .n{color:var(--ok)}
.stat.stat-bad .n{color:var(--bad)}
.panel{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px;margin-top:18px}
.charts{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
.chartbox{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px;min-width:0}
.chartbox.wide{grid-column:1 / -1}
.chartbox h3{font-size:13px;margin:0 0 12px;color:var(--muted);font-weight:600;display:flex;align-items:center;gap:8px}
.live-group{margin-left:auto;display:flex;align-items:center;gap:8px}
.refresh-note{font-size:10px;font-weight:400;color:var(--muted)}
.live{font-size:10px;font-weight:700;color:var(--ok);letter-spacing:.5px;vertical-align:middle}
.live.blink{animation:livepulse .9s ease}
@keyframes livepulse{0%{opacity:.35}50%{opacity:1}100%{opacity:.6}}
.chartbox .cwrap{position:relative;height:280px;width:100%}
.chartbox .cwrap canvas{position:absolute;inset:0}
@media(max-width:820px){.charts{grid-template-columns:1fr}.chartbox.wide{grid-column:auto}}
/* ---- mobile: responsive header/nav ---- */
@media(max-width:720px){
  header{flex-wrap:wrap;gap:8px 10px;padding:10px 14px}
  .nav-toggle{display:inline-flex;align-items:center;justify-content:center;order:1}
  header h1{font-size:15px;order:2;margin-right:auto}   /* brand left, compact user-menu stays on the same row */
  .notif-menu{order:2}                           /* stays on the brand row, top-right, next to the hamburger */
  .notif-dropdown{right:-8px}
  .user-menu{order:3;width:100%;margin-left:0}   /* flush left, level with the logo row above it */
  .user-dropdown{right:auto;left:0}              /* re-anchor under the now left-aligned trigger */
  .who{max-width:110px}
  /* nav collapses behind the hamburger: hidden by default, opens as a full-width
     stacked list below the first row instead of a horizontally-scrolling, cut-off strip.
     Scoped to "header nav" specifically — a bare "nav" selector here would also
     match (and hide) DataTables' own <nav> pagination wrapper inside any table. */
  header nav{order:4;display:none;width:100%;flex-basis:100%;margin-left:0;margin-top:8px;flex-direction:column;gap:4px}
  header nav.open{display:flex}
  header nav a{white-space:normal;padding:10px 12px;font-size:13px}
  main{padding:16px 12px 48px}
  .panel{padding:14px}
  .panel h2{flex-wrap:wrap}
  .tools{margin-left:0;width:100%}
  .cards{grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px}
}
@media(max-width:520px){
  .grid2{grid-template-columns:1fr}
  .full{grid-column:auto}
  dialog{padding:18px}
}
.panel h2{font-size:14px;margin:0 0 12px;display:flex;align-items:center;gap:10px}
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
th{color:var(--muted);font-weight:600;font-size:11px;text-transform:uppercase}
td.mono,.mono{font-family:ui-monospace,monospace}
.tag{display:inline-block;padding:1px 8px;border-radius:99px;font-size:11px;font-weight:700;color:#fff}
.t-ok{background:var(--ok)} .t-warn{background:var(--warn)} .t-bad{background:var(--bad)} .t-mut{background:#4b5162}

/* skor keyakinan OCR — pil bergaris, dibedakan dari tag status yang solid. */
.score-tag{display:inline-flex;align-items:center;gap:5px;padding:1px 8px;border-radius:99px;
  font-size:11px;font-weight:700;border:1px solid currentColor;background:transparent}
.score-tag .dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:0 0 auto}
.score-tag .pct{opacity:.72;font-weight:600}
.s-ok{color:var(--ok);background:color-mix(in srgb,var(--ok) 13%,transparent)}
.s-warn{color:var(--warn);background:color-mix(in srgb,var(--warn) 13%,transparent)}
.s-bad{color:var(--bad);background:color-mix(in srgb,var(--bad) 13%,transparent)}

.usage-bar{width:120px;height:6px;border-radius:99px;background:var(--sec-bg);margin-top:6px;overflow:hidden}
.usage-bar>span{display:block;height:100%;border-radius:99px;background:var(--accent);transition:width .3s ease}
.usage-bar.high>span{background:var(--warn)}
.usage-bar.full>span{background:var(--bad)}

/* ---- nav notification badge ---- */
.nav-badge{display:inline-block;min-width:16px;height:16px;padding:0 4px;border-radius:99px;background:var(--bad);
  color:#fff;font-size:10px;font-weight:800;line-height:16px;text-align:center;margin-left:4px;vertical-align:2px}

/* ---- messages / chat ---- */
.msg-layout{display:grid;grid-template-columns:280px 1fr;gap:16px;align-items:start}
@media(max-width:820px){.msg-layout{grid-template-columns:1fr}}
.msg-threads{display:flex;flex-direction:column;gap:6px;max-height:600px;overflow:auto}
.msg-thread-item{display:block;width:100%;text-align:left;background:var(--input-bg);border:1px solid var(--line);border-radius:10px;
  padding:10px 12px;cursor:pointer;color:var(--text)}
.msg-thread-item:hover{border-color:var(--accent)}
.msg-thread-item.on{border-color:var(--accent);background:var(--tint-bg)}
.msg-thread-item .mt-top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.msg-thread-item .mt-name{font-weight:700;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.msg-thread-item .mt-prev{color:var(--muted);font-size:12px;margin-top:4px;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;max-width:100%}
.msg-thread-item .mt-time{color:var(--muted);font-size:10px;white-space:nowrap}
.msg-panel{background:var(--input-bg);border:1px solid var(--line);border-radius:10px;display:flex;flex-direction:column;
  height:600px;min-width:0}
.msg-panel-head{padding:12px 14px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px}
.msg-panel-head .name{font-weight:700;font-size:13px}
.msg-panel-head .email{color:var(--muted);font-size:12px}
.msg-body{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px}
.bubble{max-width:74%;padding:9px 12px;border-radius:12px;font-size:13px;line-height:1.45;word-break:break-word}
.bubble .b-meta{display:flex;gap:6px;align-items:center;margin-bottom:4px;font-size:10px;color:var(--muted)}
.bubble.in{align-self:flex-start;background:var(--bubble-bg);border:1px solid var(--line);border-bottom-left-radius:2px}
.bubble.out{align-self:flex-end;background:var(--accent);color:#04121a;border-bottom-right-radius:2px}
.bubble.out .b-meta{color:rgba(4,18,26,.65)}
.bubble.out .b-time{color:rgba(4,18,26,.65)}
.msg-empty{margin:auto;color:var(--muted);font-size:13px;text-align:center;padding:20px}
.msg-compose{border-top:1px solid var(--line);padding:10px;display:flex;gap:8px}
.msg-compose textarea{resize:none;min-height:42px;max-height:120px}
.msg-compose button{align-self:flex-end}
.msg-newbtn{margin-bottom:10px;width:100%}
.type-error{background:var(--bad)} .type-request{background:var(--warn)} .type-billing{background:#8e6fd8} .type-other{background:#4b5162}
.row{display:flex;gap:20px;flex-wrap:wrap} .row>div{flex:1;min-width:260px}
.tools{margin-left:auto;display:flex;gap:8px}
.filters{display:flex;gap:16px;align-items:flex-end;flex-wrap:wrap;margin:2px 0 4px}
.filters .f{display:flex;flex-direction:column}
.filters label{margin:0 0 4px}
.filters select{width:auto;min-width:150px}
.filters input[type=date]{width:auto;color-scheme:var(--cs)}
.keycell{max-width:180px;overflow:hidden;text-overflow:ellipsis;display:inline-block;vertical-align:middle}
.mini{padding:4px 8px;font-size:11px;font-weight:600}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.full{grid-column:1/3}
/* ---- pengaturan: backup toggle switch ---- */
.settings-row{display:flex;align-items:center;gap:14px}
.switch{position:relative;display:inline-block;width:42px;height:24px;flex:0 0 auto}
.switch input{opacity:0;width:0;height:0}
.switch .slider{position:absolute;inset:0;background:var(--sec-bg);border:1px solid var(--line);border-radius:99px;cursor:pointer;transition:background .15s ease}
.switch .slider::before{content:'';position:absolute;width:16px;height:16px;left:3px;top:2px;background:#fff;border-radius:50%;transition:transform .15s ease}
.switch input:checked+.slider{background:var(--accent);border-color:var(--accent)}
.switch input:checked+.slider::before{transform:translateX(18px)}
.switch input:disabled+.slider{opacity:.5;cursor:not-allowed}
dialog{background:var(--card);color:var(--text);border:1px solid var(--line);border-radius:14px;padding:22px;width:460px;max-width:92vw}
dialog::backdrop{background:var(--shadow-backdrop)}
dialog.dlg-image{width:auto;max-width:92vw}
dialog.dlg-invoice{width:640px}
.inv-logo-row{display:flex;align-items:center;gap:12px;margin-bottom:16px;padding:10px 12px;background:var(--input-bg);border-radius:10px}
.inv-logo-box{width:48px;height:48px;flex:0 0 auto;border-radius:8px;background:#fff;display:flex;
  align-items:center;justify-content:center;overflow:hidden;border:1px solid var(--line)}
.inv-logo-box img{width:100%;height:100%;object-fit:contain}
.inv-logo-box span{font-size:22px}
.inv-item-row{display:flex;gap:8px;align-items:center;margin-bottom:8px}
.inv-item-row .inv-item-desc{flex:1;min-width:0}
.inv-item-row .inv-item-qty{width:60px;flex:0 0 auto}
.inv-item-row .inv-item-price{width:130px;flex:0 0 auto}
.inv-item-row .inv-item-subtotal{width:120px;flex:0 0 auto;text-align:right;font-size:12px}
.inv-item-row .inv-item-remove{flex:0 0 auto;padding:6px 10px;color:var(--bad)}
.inv-total-row{display:flex;justify-content:space-between;align-items:center;margin:14px 0;
  padding:10px 14px;background:var(--input-bg);border-radius:8px;font-size:14px}
.inv-total-row b{font-size:17px}
.qr-box{display:flex;flex-direction:column;align-items:center;gap:10px;margin:14px 0;padding:14px;background:var(--input-bg);border-radius:10px}
.qr-box img{border-radius:8px;background:#fff;padding:8px}
.qr-secret{letter-spacing:2px;font-size:13px;word-break:break-all;text-align:center}
.recovery-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:14px 0;padding:14px;background:var(--input-bg);border-radius:10px;font-family:ui-monospace,monospace;font-size:13px;text-align:center}
.dlg-image .img-wrap{background:var(--input-bg);border:1px solid var(--line);border-radius:10px;padding:8px;display:flex;justify-content:center}
.dlg-image .img-wrap img{max-width:100%;max-height:74vh;display:block;border-radius:6px}
.muted{color:var(--muted);font-size:12px}
/* ---- loading spinner ---- */
.loading-box{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  padding:56px 20px;color:var(--muted);font-size:13px;text-align:center}
.spinner{width:30px;height:30px;border:3px solid var(--line);border-top-color:var(--accent);
  border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
/* toasts */
#toasts{position:fixed;top:16px;right:16px;z-index:9999;display:flex;flex-direction:column;gap:10px;max-width:360px}
.toast{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:10px;
       padding:12px 14px;font-size:13px;box-shadow:0 8px 24px var(--shadow-toast);animation:tin .2s ease;display:flex;gap:10px;align-items:flex-start}
.toast.ok{border-left-color:var(--ok)} .toast.err{border-left-color:var(--bad)} .toast.info{border-left-color:var(--accent)}
.toast .ic{font-weight:800} .toast.ok .ic{color:var(--ok)} .toast.err .ic{color:var(--bad)} .toast.info .ic{color:var(--accent)}
.toast .msg{flex:1;white-space:pre-wrap;word-break:break-word}
.toast.out{animation:tout .25s ease forwards}
@keyframes tin{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:none}}
@keyframes tout{to{opacity:0;transform:translateX(20px)}}

/* ---- DataTables 2.x theme overrides ---- */
.dt-container{color:var(--text);font-size:13px}
.dt-container .dt-search,.dt-container .dt-length,.dt-container .dt-info,.dt-container .dt-paging{margin:8px 0;font-size:12px;color:var(--muted)}
.dt-container .dt-search input,.dt-container .dt-length select{
  width:auto;display:inline-block;background:var(--input-bg);border:1px solid var(--line);color:var(--text);
  border-radius:6px;padding:5px 9px;margin-left:6px}
.dt-container .dt-length select{padding-right:22px}
.dt-container .dt-paging .dt-paging-button{color:var(--text)!important;border:1px solid var(--line)!important;
  border-radius:6px;margin:0 2px;padding:4px 10px;background:var(--input-bg)!important}
.dt-container .dt-paging .dt-paging-button.current{background:var(--accent)!important;color:#04121a!important;border-color:var(--accent)!important}
.dt-container .dt-paging .dt-paging-button.disabled{opacity:.4}
.dt-container .dt-paging .dt-paging-button:hover:not(.current):not(.disabled){background:var(--sec-bg)!important}
table.dataTable{border-collapse:collapse!important}
table.dataTable thead th,table.dataTable thead td{border-bottom:1px solid var(--line);color:var(--muted)}
table.dataTable tbody td{border-bottom:1px solid var(--line)}
table.dataTable.stripe>tbody>tr.odd>*,table.dataTable>tbody>tr:nth-child(odd)>*{box-shadow:none!important;background:transparent}
table.dataTable>tbody>tr{background:transparent}
table.dataTable>tbody>tr:hover>*{background:var(--row-hover)}
table.dataTable thead th.dt-orderable-asc:hover,table.dataTable thead th.dt-orderable-desc:hover{outline:none;color:var(--text)}
.dt-container select option{background:var(--input-bg);color:var(--text)}

/* ---- monitoring API ---- */
.seg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--input-bg)}
.seg button{background:transparent;color:var(--muted);border:0;border-radius:0;padding:8px 12px;font-weight:600;font-size:12px}
.seg button+button{border-left:1px solid var(--line)}
.seg button.on{background:var(--accent);color:#04121a}
.seg button:hover:not(.on){color:var(--text)}
.mon-live{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;background:var(--card);border:1px solid var(--line);
  border-radius:12px;padding:10px 16px;margin:14px 0;font-size:12px;color:var(--muted)}
.mon-live b{color:var(--text)}
.ml-item{white-space:nowrap}
.ml-bad,.mon-live .ml-bad b{color:var(--bad)}
.mon-cards{margin-top:14px}
.stat .sub{color:var(--muted);font-size:11px;margin-top:6px;line-height:1.4}
.stat .d{font-size:11px;margin-top:6px;font-weight:600}
.stat .d.up{color:var(--ok)} .stat .d.down{color:var(--bad)} .stat .d.flat{color:var(--muted);font-weight:400}
.mon-grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.mon-grid2 .panel{min-width:0}
.tbl-scroll{overflow-x:auto}
td.wrap{white-space:normal;min-width:180px;max-width:360px;word-break:break-word}
.lat-ok{color:var(--ok)} .lat-warn{color:var(--warn)} .lat-bad{color:var(--bad)}
.heatmap{display:grid;grid-template-columns:34px repeat(24,minmax(0,1fr));gap:3px;font-size:10px;color:var(--muted)}
.hm-h{text-align:left;height:14px}
.hm-d{display:flex;align-items:center}
.hm-c{height:22px;border-radius:4px;background:var(--input-bg);border:1px solid var(--line)}
@media(max-width:820px){.mon-grid2{grid-template-columns:1fr}}
@media(max-width:720px){
  .seg{width:100%;overflow-x:auto}
  .seg button{flex:1 0 auto;padding:8px 10px}
  .heatmap{grid-template-columns:28px repeat(24,minmax(0,1fr));gap:2px}
  .hm-c{height:16px;border-radius:3px}
}

/* ---- OCR engine card (Pengaturan) ---- */
.eng-desc{margin:0 0 16px;font-size:12.5px;line-height:1.55}
.eng-state{display:inline-flex;align-items:center;gap:7px;padding:4px 11px;border-radius:99px;font-size:11.5px;font-weight:700;
  background:var(--sec-bg);color:var(--muted)}
.eng-state .dot{width:7px;height:7px}
.eng-state.ok{background:color-mix(in srgb,var(--ok) 16%,transparent);color:var(--ok)}
.eng-state.ok .dot{background:var(--ok);animation:engpulse 1.8s ease-out infinite}
.eng-state.warn{background:color-mix(in srgb,var(--warn) 16%,transparent);color:var(--warn)}
.eng-state.warn .dot{background:var(--warn)}
.eng-state.bad{background:color-mix(in srgb,var(--bad) 16%,transparent);color:var(--bad)}
.eng-state.bad .dot{background:var(--bad)}
@keyframes engpulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ok) 60%,transparent)}
  70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}

.eng-actions{gap:6px}
.eng-btn{background:var(--input-bg);color:var(--text);border:1px solid var(--line);border-radius:8px;padding:6px 12px;
  font-size:12px;font-weight:600;line-height:1.2;transition:border-color .15s,background .15s,color .15s}
.eng-btn:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
.eng-btn.icon{width:32px;padding:6px 0;font-size:14px}
.eng-btn.start{color:var(--ok)}
.eng-btn.start:hover:not(:disabled){border-color:var(--ok);color:var(--ok);background:color-mix(in srgb,var(--ok) 12%,transparent)}
.eng-btn.stop{color:var(--bad)}
.eng-btn.stop:hover:not(:disabled){border-color:var(--bad);color:var(--bad);background:color-mix(in srgb,var(--bad) 12%,transparent)}
.eng-btn:disabled{opacity:.4;cursor:not-allowed}

.eng-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:12px}
.eng-tile{position:relative;background:var(--input-bg);border:1px solid var(--line);border-radius:12px;padding:13px 16px 12px 18px;overflow:hidden}
.eng-tile::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--line)}
.eng-tile.ok::before{background:var(--ok)} .eng-tile.bad::before{background:var(--bad)}
.eng-tile-label{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.eng-tile-value{font-size:19px;font-weight:700;line-height:1.25;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.eng-tile.bad .eng-tile-value{color:var(--bad)}
.eng-tile-sub{font-size:12px;color:var(--muted);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.eng-res{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:14px}
.eng-res-card{background:var(--input-bg);border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.eng-res-head{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.eng-res-icon{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:17px;
  flex:0 0 auto;background:color-mix(in srgb,var(--accent) 14%,transparent)}
.eng-res-title{flex:1;min-width:0;font-size:13px;font-weight:700;color:var(--text)}
.eng-res-detail{font-size:12px;font-weight:500;color:var(--muted);margin-top:2px}
.eng-res-pct{font-size:22px;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums}
.eng-res-pct.high{color:var(--warn)} .eng-res-pct.full{color:var(--bad)}
.eng-res-card .usage-bar{width:100%;height:8px;margin-top:0}
.eng-res-card .usage-bar>span{background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 70%,transparent),var(--accent))}
.eng-res-card .usage-bar.high>span{background:var(--warn)}
.eng-res-card .usage-bar.full>span{background:var(--bad)}
.eng-raw{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:12px;padding-top:11px;border-top:1px dashed var(--line);font-size:12px}
.eng-raw-text{color:var(--text);font-weight:600}
.eng-raw-text .muted{font-weight:400}
.eng-pill{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:99px;font-size:11px;font-weight:700}
.eng-pill::before{content:"";width:6px;height:6px;border-radius:99px;background:currentColor}
.eng-pill.ok{background:color-mix(in srgb,var(--ok) 16%,transparent);color:var(--ok)}
.eng-pill.bad{background:color-mix(in srgb,var(--bad) 16%,transparent);color:var(--bad)}

.eng-host{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding-top:14px;border-top:1px solid var(--line)}
.eng-host-label{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-right:4px}
.eng-host .spec-chip{padding:6px 12px}
.eng-card .err:empty{min-height:0;margin:0}

@media(max-width:820px){.eng-res{grid-template-columns:1fr}}
@media(max-width:720px){
  .eng-stats{grid-template-columns:1fr}
  .eng-actions .eng-btn:not(.icon){flex:1}
  .eng-host-label{width:100%}
}