:root{
  --blue:#2157e0;
  --blue-glow:rgba(33,87,224,0.22);
  --cyan-accent:#00d2ff;
  --bright:#2157e0;
  --deep:#090d1f;
  --navy-dark:#0c132c;
  --navy-surface:#111a3b;
  --pale:#f0f4fc;
  --surface:#ffffff;
  --ink:#0b1126;
  --muted:#5a667f;
  --line:#e2e7f3;
  --danger:#c43d45;
  --success:#10b981;
  --shadow:0 12px 32px rgba(12,19,44,0.06);
  --shadow-lg:0 20px 48px rgba(12,19,44,0.12);
  --font-heading:'Space Grotesk',system-ui,sans-serif;
  --font-body:'Plus Jakarta Sans',system-ui,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--pale);color:var(--ink);font-family:var(--font-body);min-height:100vh;-webkit-font-smoothing:antialiased}
h1,h2,h3,.eyebrow,.metrics strong,b{font-family:var(--font-heading)}
.brandLogoImg{height:36px;width:auto;object-fit:contain;filter:drop-shadow(0 4px 12px rgba(0,0,0,0.25))}
.hidden{display:none!important}.loginView{min-height:100vh;display:grid;grid-template-columns:1.15fr .85fr;background:linear-gradient(120deg,#0d1226 0%,#0f1a4a 55%,#eaf0ff 55%)}.loginBrand{padding:54px;display:flex;gap:13px;align-items:flex-start;color:#fff}.logoMark{width:42px;height:42px;border-radius:12px;background:linear-gradient(135deg,#38a8ff,#fff);color:var(--blue);font-size:24px;font-weight:900;display:grid;place-items:center;box-shadow:0 8px 25px #001d3945}.loginBrand>div:last-child,.brand>div:last-child{display:flex;flex-direction:column}.loginBrand b,.brand b{font-size:21px;letter-spacing:2.5px}.loginBrand span{font-size:10px;letter-spacing:2px;opacity:.75}.loginCard{width:min(430px,88%);align-self:center;justify-self:center;background:#fff;padding:44px;border-radius:18px;box-shadow:0 24px 70px #0a39642b}.loginCard h1{font-size:34px;margin:8px 0 10px}.loginCard>p:not(.eyebrow){line-height:1.6}.loginCard form{display:grid;gap:17px;margin:28px 0 18px}.loginCard label{font-size:12px;font-weight:800;display:grid;gap:8px}.loginCard input{height:48px;border:1px solid var(--line);border-radius:9px;padding:0 13px;font-size:15px;outline:none}.loginCard input:focus{border-color:var(--bright);box-shadow:0 0 0 3px #0b77d421}.primary{background:var(--blue)!important;color:white!important;border-color:var(--blue)!important;height:48px}.loginCard small{color:var(--muted)}#loginError{color:var(--danger);font-size:12px;min-height:16px}.appView{display:flex;min-height:100vh}aside{width:260px;background:linear-gradient(180deg,#0a1027 0%,#0f1738 60%,#060917 100%);color:#fff;padding:26px 18px;position:fixed;inset:0 auto 0 0;display:flex;flex-direction:column;border-right:1px solid rgba(255,255,255,0.06);box-shadow:4px 0 24px rgba(0,0,0,0.15)}
.brand{display:flex;gap:12px;align-items:center;padding:4px 8px 22px;border-bottom:1px solid rgba(255,255,255,0.08)}
.brand small,.operator small{color:#7e8ea8;font-size:11px}
.brand b{font-size:17px;letter-spacing:1px;color:#fff}
nav{display:grid;gap:5px;margin-top:22px}
.nav{padding:11px 14px;border-radius:10px;color:#94a3b8;font-size:13px;font-weight:600;background:transparent;border:0;text-align:left;min-height:auto;transition:all .18s ease;display:flex;align-items:center;gap:10px}
.nav:hover{color:#fff;background:rgba(255,255,255,0.05);transform:translateX(2px)}
.nav.on{background:linear-gradient(90deg,var(--blue) 0%,#1a46b8 100%);color:#fff;font-weight:700;box-shadow:0 4px 18px var(--blue-glow)}
.operator{margin-top:auto;border-top:1px solid rgba(255,255,255,0.08);padding:18px 4px 0;display:grid;grid-template-columns:36px 1fr;gap:10px;align-items:center}
.operator>span{background:linear-gradient(135deg,#1f3b82,#0d1f4a);color:#5bb2ff;border:1px solid rgba(255,255,255,0.15);width:36px;height:36px;border-radius:10px;display:grid;place-items:center;font-weight:800;font-family:var(--font-heading)}
.operator div{display:flex;flex-direction:column;font-size:12px}
.operator b{color:#fff}
.operator button{grid-column:1/-1;color:#94a3b8;border:1px solid rgba(255,255,255,0.12);background:rgba(255,255,255,0.03);border-radius:8px;padding:8px;transition:all .15s}
.operator button:hover{background:rgba(255,255,255,0.08);color:#fff;border-color:rgba(255,255,255,0.25)}
main{margin-left:260px;padding:36px 44px;width:calc(100% - 260px);max-width:1600px}
header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:28px}
h1{font-size:32px;letter-spacing:-0.5px;margin:4px 0 6px;color:#0a1027}
h2{font-size:20px;letter-spacing:-0.3px;margin:5px 0 17px;color:#0f1738}
h3{margin:0 0 4px}
p{color:var(--muted);margin:0}
.eyebrow{font-size:11px;letter-spacing:1.8px;color:var(--blue);font-weight:700}
button{border:1px solid #c7d2e9;background:#fff;border-radius:8px;padding:10px 16px;font-weight:700;color:var(--blue);cursor:pointer;min-height:42px;transition:all .15s}
button:hover{background:var(--blue);color:#fff;border-color:var(--blue);box-shadow:0 4px 14px var(--blue-glow)}
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:20px}
.metrics article,.panel{background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow)}
.metrics article{padding:22px;display:flex;flex-direction:column;min-height:130px;border-top:4px solid var(--blue);position:relative;overflow:hidden;background:linear-gradient(180deg,#fff 0%,#fbfdff 100%)}
.metrics article::before{content:'';position:absolute;top:0;right:0;width:80px;height:80px;background:radial-gradient(circle,rgba(33,87,224,0.05) 0%,transparent 70%);pointer-events:none}
.metrics small,.facts small{font-size:10px;letter-spacing:1.4px;color:var(--muted);font-weight:700}
.metrics strong{font-size:32px;margin:12px 0 4px;color:#0a1027;font-weight:700;letter-spacing:-0.5px}
.metrics em{font-size:12px;color:var(--muted);font-style:normal}
.grid{display:grid;grid-template-columns:1.7fr 1fr;gap:16px}
.panel{padding:24px}
.pill{font-size:10px;font-weight:700;padding:6px 12px;border-radius:999px;background:#edf2f7;height:max-content;font-family:var(--font-heading);letter-spacing:0.5px}
.pill.off{background:#fee4e2;color:#b42318;border:1px solid #fecdca}
.pill.on{background:#ecfdf3;color:#027a48;border:1px solid #a6f4c5;display:inline-flex;align-items:center;gap:6px}
.pill.on::before{content:'';width:7px;height:7px;border-radius:50%;background:#12b76a;display:inline-block;box-shadow:0 0 0 3px rgba(18,183,106,0.2);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(18,183,106,0.5)}70%{box-shadow:0 0 0 6px rgba(18,183,106,0)}100%{box-shadow:0 0 0 0 rgba(18,183,106,0)}}
.machineTitle{display:flex;gap:14px;align-items:center;border-top:1px solid var(--line);padding-top:18px}.machineIcon{width:48px;height:48px;display:grid;place-items:center;background:linear-gradient(135deg,var(--blue),#39a7f5);color:white;border-radius:11px;font-weight:900}.facts{margin-top:19px;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}.facts div{padding:15px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:8px}.facts b{font-size:12px}.alertItem{background:#fff5f5;border:1px solid #f0d4d6;padding:15px;border-radius:8px;margin-top:13px}.alertItem b{display:block;margin-bottom:6px;color:#8b2930}.alertItem p{font-size:12px;line-height:1.5}.alertItem time{font-size:10px;color:var(--muted);display:block;margin-top:10px}.actions{display:grid;grid-template-columns:1fr 1.4fr;gap:20px;margin-top:13px;align-items:center}.actions h2{margin-bottom:5px}.actionGrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}#actionResult{grid-column:1/-1;font-size:12px;color:var(--blue)}footer{display:flex;justify-content:space-between;font-size:10px;color:var(--muted);padding:17px 2px}.machineRow,.trx{display:grid;grid-template-columns:auto 1fr auto auto;gap:12px;align-items:center;padding:14px 0;border-top:1px solid var(--line)}.machineRow small,.trx small{display:block;color:var(--muted);margin-top:4px}.trx i{font-size:10px;font-style:normal;font-weight:800;padding:5px 8px;border-radius:12px}.trx i.success{background:#dcf3ea;color:#12684e}.trx i.failed{background:#ffe7e9;color:#9d2e36}.tableWrap{overflow:auto}table{width:100%;border-collapse:collapse;font-size:12px}th,td{text-align:left;padding:13px;border-bottom:1px solid var(--line);white-space:nowrap}th{color:var(--muted);font-size:10px;letter-spacing:.8px}.emptyState{min-height:300px;display:grid;place-content:center;text-align:center}.emptyState p{max-width:470px}
/* anti-luber: grid/flex item tak boleh melebar mengikuti tabel */
.grid>*,.panel,main,.view{min-width:0}
.tableWrap{overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch}
.panel p,.panel h2,.panel .eyebrow{overflow-wrap:anywhere}
body{overflow-x:hidden}

.vForm{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:16px}
.vForm label{display:grid;gap:6px;font-size:12px;font-weight:800}
.vForm input,.vForm select{height:42px;border:1px solid var(--line);border-radius:8px;padding:0 10px;font-size:14px;background:#fff;color:var(--ink)}
.vForm button{grid-column:1/-1}
.vForm #vMsg{grid-column:1/-1;font-size:12px;color:var(--blue);min-height:16px}
.vForm label[hidden]{display:none}
@media(max-width:700px){.vForm{grid-template-columns:1fr}}
@media(max-width:1000px){aside{width:195px}main{margin-left:195px;width:calc(100% - 195px);padding:27px 20px}.metrics{grid-template-columns:1fr 1fr}.grid,.actions{grid-template-columns:1fr}}@media(max-width:700px){
.loginView{display:block;background:var(--pale);padding:25px 0}
.loginBrand{padding:25px;color:var(--blue)}
.loginCard{padding:29px;margin:30px auto}
.appView{flex-direction:column}
.appView aside{display:flex;position:relative;inset:auto;width:100%;height:auto;padding:14px 14px 0;flex-direction:column}
aside .brand{padding:0 92px 12px 0;border-bottom:1px solid #ffffff24}
aside nav{display:flex;gap:6px;margin:12px -14px 0;padding:0 14px 12px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
aside nav::-webkit-scrollbar{display:none}
aside .nav{flex:0 0 auto;white-space:nowrap;padding:9px 15px;border-radius:999px;background:#ffffff1f;font-size:13px;text-align:center;min-height:38px}
aside .nav.on{box-shadow:none;background:#fff}
aside .operator{position:absolute;top:14px;right:14px;margin:0;padding:0;border:0;display:block}
aside .operator>span,aside .operator>div{display:none}
aside .operator button{grid-column:auto;min-height:34px;padding:7px 12px;font-size:12px}
main{margin:0;width:100%;padding:18px 13px}
header{flex-direction:column;align-items:stretch;gap:12px}
header #refresh{width:100%}
h1{font-size:26px}
h2{font-size:19px}
.metrics{grid-template-columns:1fr 1fr}
.facts{grid-template-columns:1fr 1fr}
.actionGrid{grid-template-columns:1fr}
.panelHead{flex-direction:column;align-items:stretch;gap:10px}
.machineRow,.trx{grid-template-columns:1fr auto;gap:8px 10px}
.metrics article{min-height:104px;padding:15px}
}
@media(max-width:340px){
.metrics{grid-template-columns:1fr}
}


/* Contekan setelan Third Party di mesin (Kendali Mesin) */
.stpMock{display:grid;gap:.55rem;background:#0f1720;border:1px solid #22303d;border-radius:14px;padding:1rem;max-width:560px}
.stpMock .row{display:flex;align-items:center;gap:.7rem;background:#16212c;border:1px solid #24323f;border-radius:9px;padding:.6rem .75rem}
.stpMock .row.on{border-color:#12684e}
.stpMock .ck{width:17px;height:17px;border-radius:4px;border:1.5px solid #4a5d6d;flex:none;display:grid;place-items:center;font-size:11px;color:#0f1720;background:transparent}
.stpMock .ck.on{background:#12684e;border-color:#12684e;color:#fff}
.stpMock .lbl{color:#cbd5e1;font-size:.84rem;min-width:150px}
.stpMock .lbl small{display:block;color:#7d8b99;font-size:.72rem}
.stpMock .val{flex:1;background:#0b1219;border:1px dashed #31414f;border-radius:6px;padding:.35rem .5rem;color:#8fd3ff;font-size:.76rem;font-family:ui-monospace,Menlo,monospace;overflow-wrap:anywhere}
.stpMock .cp{background:#22303d;border:1px solid #31414f;color:#cbd5e1;border-radius:6px;padding:.3rem .6rem;font-size:.74rem;cursor:pointer;flex:none}
.stpMock .cp:hover{background:#2b3a48}
.stpAlur{display:grid;gap:.5rem}
.stpAlur div{display:flex;gap:.7rem;align-items:flex-start}
.stpAlur b{flex:none;width:22px;height:22px;border-radius:50%;background:#2157E0;color:#fff;font-size:.75rem;display:grid;place-items:center}
.stpAlur span{font-size:.87rem;color:#475467;line-height:1.45}


/* Contoh tiga layar kiosk */
.kioskMock{display:flex;gap:1.2rem;flex-wrap:wrap}
.kioskMock .scr{width:190px}
.kioskMock .frame{position:relative;aspect-ratio:9/16;background:#0f1720;border:6px solid #1d2733;border-radius:14px;overflow:hidden;display:grid;place-items:center}
.kioskMock .frame img,.kioskMock .frame video{width:100%;height:100%;object-fit:cover;display:block}
.kioskMock .ph{color:#5b6b7a;font-size:.72rem;text-align:center;padding:0 .6rem;line-height:1.5}
.kioskMock .tag{position:absolute;top:6px;left:6px;background:rgba(33,87,224,.92);color:#fff;font-size:.62rem;font-weight:700;padding:.15rem .45rem;border-radius:5px;letter-spacing:.02em}
.kioskMock .cap{margin-top:.5rem;font-size:.8rem;font-weight:600;color:#101828}
.kioskMock .sub{font-size:.74rem;color:#98a2b3;line-height:1.45;margin-top:.15rem}


/* Visual menu mesin */
.visualGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.9rem}
.visualGrid .vm{border:1px solid #e7ebf7;border-radius:12px;overflow:hidden;background:#fff;display:flex;flex-direction:column}
.visualGrid .vm .pic{height:120px;min-height:120px;max-height:120px;background:#f7f9ff;display:flex;align-items:center;justify-content:center;overflow:hidden}
.visualGrid .vm .pic img{width:100%;height:120px;object-fit:contain;display:block}
.visualGrid .vm .pic .no{color:#b54708;font-size:.72rem;text-align:center;padding:0 .5rem;line-height:1.4}
.visualGrid .vm .info{padding:.5rem .6rem .6rem}
.visualGrid .vm .nm{font-size:.82rem;font-weight:600;line-height:1.25}
.visualGrid .vm .pr{font-size:.78rem;color:#475467;margin-top:.15rem}
.visualGrid .vm .fn{font-size:.68rem;color:#98a2b3;margin-top:.3rem;word-break:break-all}


/* Yang tayang di layar mesin + ganti terpandu (13 Sep 2026) */
.tayangGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.tayangGrid .card{border:1px solid var(--line);border-radius:12px;padding:.9rem;background:#fff;display:flex;flex-direction:column}
.tayangGrid .card .panelHead{margin-bottom:.6rem;gap:.5rem}
.tayangGrid .thumbs{display:flex;gap:.4rem;flex-wrap:wrap;min-height:60px}
.tayangGrid .thumbs img,.tayangGrid .thumbs video{width:72px;height:128px;object-fit:cover;border-radius:6px;background:#0f1720;display:block}
.tayangGrid .thumbs .kosong{color:#98a2b3;font-size:.8rem;align-self:center}
.tayangGrid .actionGrid{margin-top:auto}
.pasangBox{margin-top:1rem;border:1px dashed var(--blue);border-radius:12px;padding:1rem;background:#f7f9ff}
.pasangBox .pilih{display:flex;gap:.6rem;flex-wrap:wrap}
.pasangBox label.opsi{border:1px solid var(--line);border-radius:8px;padding:.4rem;width:104px;text-align:center;font-size:.72rem;cursor:pointer;background:#fff;overflow-wrap:anywhere}
.pasangBox label.opsi:has(input:checked){border-color:var(--blue);box-shadow:0 0 0 2px #2157e033}
.pasangBox label.opsi img,.pasangBox label.opsi video{width:100%;height:110px;object-fit:cover;border-radius:6px;display:block;margin:.3rem 0;background:#0f1720}
.langkah{list-style:none;padding:0;margin:.5rem 0 0;font-size:.85rem}
.langkah li{padding:.35rem 0;border-bottom:1px solid var(--line)}
.langkah li.sukses{color:var(--success);font-weight:700}
.langkah li.gagal{color:var(--danger);font-weight:700}
@media(max-width:1000px){.tayangGrid{grid-template-columns:1fr}}

/* Modern Loyabox Card, Table, and Action styles */
.panel {
  background: var(--surface);
  border: 1px solid rgba(226, 231, 243, 0.85);
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(12, 19, 44, 0.04);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.panelHead h2 {
  font-size: 20px;
  letter-spacing: -0.3px;
  color: var(--navy-dark);
}
.eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--blue);
  text-transform: uppercase;
}
header #refresh {
  background: #fff;
  border: 1px solid var(--line);
  color: var(--navy-dark);
  font-weight: 600;
  border-radius: 10px;
  padding: 10px 18px;
  cursor: pointer;
  transition: all 0.18s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,0.03);
}
header #refresh:hover {
  background: var(--pale);
  border-color: #cbd5e1;
  transform: translateY(-1px);
}
button.primary, .actionGrid button {
  font-family: var(--font-body);
  font-weight: 600;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.18s ease;
}
button.primary {
  background: linear-gradient(135deg, var(--blue) 0%, #1642b5 100%) !important;
  box-shadow: 0 4px 14px var(--blue-glow);
}
button.primary:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}
.actionGrid button {
  background: #fff;
  border: 1px solid var(--line);
  color: var(--navy-dark);
  padding: 10px 14px;
}
.actionGrid button:hover {
  background: var(--pale);
  border-color: var(--blue);
  color: var(--blue);
}
table th {
  background: #f8fafc;
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--muted);
  border-top: 1px solid var(--line);
}
table tr:hover td {
  background: #fcfdfe;
}

/* Rapikan tampilan (8 Okt 2026, keluhan Men "jelek aneh") */
/* Logo gambar sudah memuat tulisan loyabox: teks LOYABOX dobel & terpotong */
.brand b{display:none}
/* Bulatan samar di pojok kartu angka terlihat seperti noda */
.metrics article::before{display:none}
/* Nilai kartu berupa kalimat (gangguan, status) jangan meluber keluar kotak */
.metrics strong{overflow-wrap:anywhere;line-height:1.1}
/* Label status jangan melar selebar kolom */
.machineRow .pill,.trx i{justify-self:start;align-self:center;width:max-content}
.nav{transition-property:background-color,color,transform;transition-duration:.15s}
@media(max-width:700px){
  /* Tab aktif tadinya teks putih di atas latar putih */
  aside .nav.on{color:#1a46b8}
  .metrics strong{font-size:24px}
  .machineRow,.trx{align-items:center}
}

/* Menu bawah ala aplikasi (HP saja) */
.tabbar,.tabSheet{display:none}
@media(max-width:700px){
  aside nav{display:none}
  aside .brand{border-bottom:0;padding-bottom:12px}
  main{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
  .tabbar{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:50;background:#fff;padding:6px 4px calc(6px + env(safe-area-inset-bottom));box-shadow:0 -1px 0 rgba(10,16,39,.08),0 -8px 24px rgba(10,16,39,.06)}
  .tabbar button{display:flex;flex-direction:column;align-items:center;gap:3px;background:none;border:0;padding:6px 0;min-height:52px;color:#8a94a6;font-size:11px;font-weight:600;transition-property:color,scale;transition-duration:.15s}
  .tabbar button:active{scale:.96}
  .tabbar button.on{color:var(--blue)}
  .tabbar button.on svg{stroke-width:2.4}
  .tabSheet{display:block;position:fixed;inset:0;z-index:60}
  .tabSheet.hidden{display:none}
  .tabSheetBg{position:absolute;inset:0;background:rgba(10,16,39,.4)}
  .tabSheetBox{position:absolute;left:0;right:0;bottom:0;background:#fff;border-radius:20px 20px 0 0;padding:10px 16px calc(92px + env(safe-area-inset-bottom))}
  .tabSheetGrip{width:40px;height:4px;border-radius:2px;background:#d6dbe4;margin:0 auto 12px}
  .tabSheetBox>b{display:block;font-size:13px;color:#8a94a6;margin:0 4px 8px}
  .tabSheetList{display:grid;gap:4px}
  .tabSheetList button{text-align:left;background:none;border:0;border-radius:12px;padding:14px 12px;font-size:15px;font-weight:600;color:#0a1027;min-height:48px}
  .tabSheetList button.on{background:#eef3ff;color:var(--blue)}
}

/* ===================================================================
   Polesan + Ringkasan interaktif (16 Okt 2026)
   =================================================================== */
:root{--ok:#0f9f6e;--warn:#d97706;--bad:#dc2626;--info:#2157e0;--track:#e9eef8;--soft:#f6f8fd;--ease:cubic-bezier(.2,.7,.2,1)}
body{font-variant-numeric:tabular-nums}
.metrics strong,.lbKartu b,.uKartu b,table td{font-variant-numeric:tabular-nums}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
button:active{transform:translateY(1px)}
.view:not(.hidden){animation:lbMasuk .28s var(--ease)}
@keyframes lbMasuk{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.panel{padding:22px;margin-bottom:16px}
.grid{margin-bottom:16px}
.panelHead{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.panelHead h2{margin:4px 0 10px}
table td{font-size:13px}
th{font-size:11px;text-transform:uppercase}
tbody tr{transition:background-color .15s}
/* skeleton & kosong */
.lbSkel{height:14px;border-radius:7px;margin:10px 0;background:linear-gradient(90deg,#eef2f9 25%,#f7f9fd 50%,#eef2f9 75%);background-size:200% 100%;animation:lbKilau 1.2s infinite linear}
.lbSkel+.lbSkel{width:70%}.lbSkel+.lbSkel+.lbSkel{width:45%}
@keyframes lbKilau{to{background-position:-200% 0}}
.lbKosong{color:var(--muted);font-size:13px;padding:14px;border:1px dashed var(--line);border-radius:12px;text-align:center;background:var(--soft)}
.lbKosong.ok{color:var(--ok);border-color:#bfe9d6;background:#f0fbf6}
.lbMemuat .lbKpi,.lbMemuat #lbGrafik,.lbMemuat #lbMenu,.lbMemuat #lbHeat{opacity:.55;transition:opacity .2s}
/* bar atas: rentang */
.lbBar{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;margin-bottom:16px}
.lbSeg{display:inline-flex;background:#e8edf8;border-radius:12px;padding:3px;gap:2px;max-width:100%;overflow-x:auto;scrollbar-width:none}
.lbSeg::-webkit-scrollbar{display:none}
.lbSeg button{border:0;background:none;min-height:36px;padding:7px 14px;border-radius:9px;color:#475569;font-weight:600;font-size:13px;white-space:nowrap;box-shadow:none}
.lbSeg button:hover{background:rgba(255,255,255,.6);color:var(--ink);box-shadow:none}
.lbSeg button.on{background:#fff;color:var(--blue);box-shadow:0 1px 3px rgba(12,19,44,.12)}
.lbSeg.kecil button{min-height:32px;padding:5px 12px;font-size:12px}
.lbKustom{display:flex;align-items:center;gap:6px}
.lbKustom[hidden]{display:none}
.lbKustom input{height:38px;border:1px solid var(--line);border-radius:9px;padding:0 8px;font:inherit;font-size:13px;background:#fff}
.lbKustom span{color:var(--muted);font-size:12px}
.lbBarInfo{display:flex;flex-direction:column;margin-left:auto;text-align:right}
.lbBarInfo b{font-size:15px}.lbBarInfo small{color:var(--muted);font-size:12px}
/* strip status mesin */
.metrics.lbStatus{grid-template-columns:1fr 1fr;margin-bottom:16px}
.lbStatus article{min-height:0;padding:14px 18px;border-top:0;border-left:4px solid var(--blue);display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:14px;align-items:center}
.lbStatus article small{grid-column:1/-1}
.lbStatus strong{font-size:24px;margin:2px 0 0}
.lbStatus em{align-self:end;margin-bottom:4px}
/* chip */
.lbChip{display:inline-block;font-style:normal;font-size:11px;font-weight:700;padding:2px 9px;border-radius:999px;background:#eef2f9;color:#475569;white-space:nowrap;letter-spacing:.2px;vertical-align:middle}
.lbChip.ok{background:#e7f8f0;color:var(--ok)}.lbChip.warn{background:#fff4e0;color:#b45309}.lbChip.bad{background:#fdecec;color:var(--bad)}.lbChip.info{background:#e8efff;color:var(--blue)}.lbChip.mut{background:#f1f5f9;color:#64748b}
/* perlu perhatian + target */
.lbTop{display:grid;grid-template-columns:1.25fr 1fr;gap:16px;margin-bottom:0}
.lbTop>.panel{margin-bottom:16px}
.lbPerhatianBox ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.lbPerhatianBox li{border-radius:10px;padding:9px 12px 9px 34px;position:relative;font-size:13.5px;line-height:1.45;background:var(--soft)}
.lbPerhatianBox li::before{content:'';position:absolute;left:13px;top:14px;width:9px;height:9px;border-radius:50%;background:#94a3b8}
.lbPerhatianBox li.bad{background:#fdf1f1}.lbPerhatianBox li.bad::before{background:var(--bad);box-shadow:0 0 0 3px #f9caca}
.lbPerhatianBox li.warn{background:#fff7e8}.lbPerhatianBox li.warn::before{background:var(--warn);box-shadow:0 0 0 3px #fde3b6}
.lbPerhatianBox li.ok{background:#effaf5}.lbPerhatianBox li.ok::before{background:var(--ok);box-shadow:0 0 0 3px #c4ecdb}
.lbPerhatianBox li a{color:inherit;text-decoration:none;display:block}
.lbPerhatianBox li a em{font-style:normal;color:var(--blue);font-weight:700}
.lbPerhatianBox li a:hover em{margin-left:3px}
.lbTarget small{font-size:10px;letter-spacing:1.4px;color:var(--muted);font-weight:700}
.lbTHead{display:flex;justify-content:space-between;align-items:center;gap:10px}
.lbTHead b{display:block;font-size:24px;margin-top:4px}.lbTHead b span{font-size:13px;color:var(--muted);font-weight:500;font-family:var(--font-body)}
.lbRing{width:64px;height:64px;flex:none}.lbRing text{font:700 12px var(--font-heading);fill:var(--ink)}
.lbRing circle:last-of-type{transition:stroke-dasharray .6s var(--ease)}
.lbProg{position:relative;height:10px;border-radius:6px;background:var(--track);margin:12px 0 10px;overflow:visible}
.lbProg i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,#f59e0b,#f97316);transition:width .6s var(--ease)}
.lbProg i.ok{background:linear-gradient(90deg,#10b981,#0f9f6e)}
.lbProg s{position:absolute;top:-4px;bottom:-4px;width:2px;background:#0b1126;border-radius:1px;opacity:.55}
.lbTarget p{font-size:13px;line-height:1.5;margin:6px 0 0}
.lbHariT{display:flex;gap:3px;margin:2px 0 6px}.lbHariT i{flex:1;height:8px;border-radius:3px;background:#fcd9a8}.lbHariT i.ok{background:var(--ok)}.lbHariT i.nol{background:var(--track)}
.lbCatatan{font-size:12px!important;color:var(--muted);margin-top:8px!important;line-height:1.5}
.lbCatatan a,.lbLink{color:var(--blue);font-weight:600;text-decoration:none}
button.lbLink{background:none;border:0;padding:0;min-height:0;margin-top:10px;font-size:12px;box-shadow:none}
button.lbLink:hover{background:none;color:var(--blue);text-decoration:underline;box-shadow:none}
.plus{color:var(--ok)}.minus{color:var(--bad)}
/* KPI */
.lbKpi{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:16px}
.lbKartu{all:unset;box-sizing:border-box;cursor:pointer;position:relative;overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 16px 44px;box-shadow:0 4px 20px rgba(12,19,44,.04);display:flex;flex-direction:column;gap:4px;min-width:0;transition:transform .18s var(--ease),box-shadow .18s,border-color .18s}
div.lbKartu{cursor:default;padding-bottom:16px}
.lbKartu:hover{transform:translateY(-2px);border-color:#c9d6f3;box-shadow:0 10px 26px rgba(12,19,44,.08)}
.lbKartu:focus-visible{outline:2px solid var(--blue)}
.lbKartu small{font-size:10px;letter-spacing:1.4px;color:var(--muted);font-weight:700;text-transform:uppercase}
.lbKartu b{font-size:clamp(19px,2.2vw,27px);font-family:var(--font-heading);color:#0a1027;letter-spacing:-.5px;line-height:1.15;overflow-wrap:anywhere}
.lbBaris{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center;font-size:12px}
.lbBaris em{font-style:normal;color:var(--muted)}
.lbDelta{font-weight:700;font-size:12px;padding:1px 7px;border-radius:999px;white-space:nowrap}
.lbDelta.naik{color:var(--ok);background:#e7f8f0}.lbDelta.turun{color:var(--bad);background:#fdecec}.lbDelta.nol{color:var(--muted);background:#f1f5f9;font-weight:600}
.lbSpark{position:absolute;left:0;right:0;bottom:0;width:100%;height:36px}
/* grafik */
.lbGrafik{position:relative;min-height:120px;touch-action:pan-y}
.lbGrafik svg{display:block;overflow:visible}
.lbGrafik .gd{stroke:#edf1f8;stroke-width:1}
.lbGrafik .ax{font:500 10.5px var(--font-body);fill:#8a94a6}
.lbGrafik .br{fill:#4f74ef;transition:fill .12s,opacity .12s}
.lbGrafik .br.hov,.lbGrafik .br.on{fill:#1d3fb8}
.lbGrafik .lalu{fill:none;stroke:#94a3b8;stroke-width:1.6;stroke-dasharray:4 3;pointer-events:none}
.lbGrafik .tgt{stroke:#f97316;stroke-width:1.4;stroke-dasharray:6 4;pointer-events:none}
.lbGrafik .tgtT{font:700 10px var(--font-body);fill:#ea580c;pointer-events:none}
.lbGrafik.kecil{min-height:0}
.lbTip{position:absolute;z-index:5;pointer-events:none;background:#0b1126;color:#fff;border-radius:10px;padding:8px 11px;font-size:12px;line-height:1.45;box-shadow:0 10px 24px rgba(11,17,38,.25);white-space:nowrap;display:flex;flex-direction:column}
.lbTip[hidden]{display:none}
.lbTip b{font-size:12.5px;color:#fff}.lbTip small{color:#b6c2dc;font-size:11px}.lbTip .ket{color:#7dd3fc}
.lbLegend{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12px;color:var(--muted);margin-top:8px}
.lbLegend i{display:inline-block;width:14px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.lbLegend i.lgBar{background:#4f74ef}.lbLegend i.lgLalu{height:0;border-top:2px dashed #94a3b8;border-radius:0;vertical-align:3px}.lbLegend i.lgTgt{height:0;border-top:2px dashed #f97316;border-radius:0;vertical-align:3px}
.lbHint{font-size:12px!important;margin-top:4px!important;color:#98a2b3!important}
/* dua kolom */
.lbDua{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:16px}
.lbDua.lebar{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}
.lbDua>.panel{margin-bottom:16px}
/* tabel menu */
.lbDonutWrap .lbDonut{width:64px;height:64px}
.lbTabel{display:grid}
.lbTr{all:unset;box-sizing:border-box;display:grid;grid-template-columns:minmax(0,1fr) 44px 74px 86px;gap:2px 10px;align-items:center;padding:9px 6px;border-bottom:1px solid var(--line);font-size:13px;cursor:pointer;border-radius:8px;transition:background-color .15s}
.lbTr:hover{background:var(--soft)}.lbTr:focus-visible{outline:2px solid var(--blue)}
.lbTr.th{cursor:default;font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);font-weight:700;padding-top:0}
.lbTr.th:hover{background:none}
.lbTr .n{text-align:right;font-variant-numeric:tabular-nums}
.lbTr .nm{display:grid;grid-template-columns:10px minmax(0,1fr);column-gap:8px;min-width:0}
.lbTr .nm i{width:10px;height:10px;border-radius:3px;margin-top:4px}
.lbTr .nm b{font-family:var(--font-body);font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lbTr .nm small{grid-column:2;font-size:11px;color:var(--muted)}
.lbTr .nm em{font-style:normal;font-weight:700}.naik{color:var(--ok)}.turun{color:var(--bad)}
.lbTr .bar{grid-column:1/-1;height:4px;border-radius:2px;background:var(--track);overflow:hidden}
.lbTr .bar i{display:block;height:100%;border-radius:2px;transition:width .5s var(--ease)}
/* heatmap */
.lbHeat{display:grid;grid-template-columns:30px repeat(24,minmax(0,1fr));gap:2px;align-items:center}
.lbHeat .hx{font-size:9.5px;color:#98a2b3;text-align:left}
.lbHeat .hy{font-size:11px;color:var(--muted);font-weight:600}
.lbHeat button{all:unset;aspect-ratio:1/1.15;border-radius:3px;background:rgba(33,87,224,var(--a));cursor:pointer;transition:transform .12s}
.lbHeat button.nol{background:#f1f4fa}
.lbHeat button:hover{transform:scale(1.25);box-shadow:0 0 0 2px #0b1126}
.lbHeat button:focus-visible{outline:2px solid var(--ink)}
.lbInsight{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:6px;font-size:13px}
.lbInsight li{padding:8px 10px;background:var(--soft);border-radius:9px;line-height:1.45}
/* stok */
.lbBeli{border-radius:12px;padding:12px 14px;background:#fff8ec;border:1px solid #fde4b8;margin-bottom:14px;font-size:13px}
.lbBeli.ok{background:#f0fbf6;border-color:#bfe9d6}
.lbBeli ul{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px 18px}
.lbBeli small,.lbGauge small{color:var(--muted)}
.lbGauge{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px 22px}
.lbGauge .g{display:grid;gap:5px;font-size:13px}
.lbGauge .nm{display:flex;justify-content:space-between;gap:6px;font-weight:700}
.lbGauge .nm .lbChip{background:none;padding:0;font-size:10px}
.track{display:block;height:8px;border-radius:5px;background:var(--track);overflow:hidden}
.track i{display:block;height:100%;border-radius:5px;background:var(--blue);transition:width .6s var(--ease)}
.lbGauge small{font-size:11.5px}
/* mesin di ringkasan */
.machineRow{grid-template-columns:auto 1fr auto auto}
.mrAngka{text-align:right}
.mrBep{grid-column:2/-1;display:grid;gap:4px}
.mrBep span:first-child{display:flex;justify-content:space-between;gap:8px}
.mrBep small{margin:0!important;font-size:11px}
.mrBep .track i{background:linear-gradient(90deg,var(--blue),#39a7f5)}
/* jendela rincian */
.lbModal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:16px}
.lbModal[hidden]{display:none}
.lbModalBg{position:absolute;inset:0;background:rgba(10,16,39,.45);animation:lbFade .2s}
.lbModalBox{position:relative;background:#fff;border-radius:18px;width:min(640px,100%);max-height:min(86vh,760px);display:flex;flex-direction:column;box-shadow:0 30px 80px rgba(10,16,39,.35);animation:lbNaik .25s var(--ease)}
.lbModalHead{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:16px 18px;border-bottom:1px solid var(--line)}
.lbModalHead h3{font-size:17px;margin:0}
.lbX{min-height:36px;width:36px;padding:0;border-radius:10px}
.lbModalIsi{overflow:auto;padding:14px 18px 20px;-webkit-overflow-scrolling:touch}
.lbModalIsi h4{font:700 13px var(--font-heading);margin:16px 0 6px;color:#0f1738}
@keyframes lbFade{from{opacity:0}}@keyframes lbNaik{from{opacity:0;transform:translateY(16px)}}
body.lbKunci{overflow:hidden}
.lbMini{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.lbMini div{background:var(--soft);border-radius:10px;padding:8px 10px;min-width:0}
.lbMini small{display:block;font-size:10px;color:var(--muted);font-weight:700;letter-spacing:.5px;text-transform:uppercase}
.lbMini b{font-size:15px;overflow-wrap:anywhere}
.lbCek{display:flex;gap:6px;align-items:center;font-size:12px;color:var(--muted);margin:12px 0 4px}
.lbTrx{list-style:none;margin:0;padding:0}
.lbTrx li{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);font-size:13px}
.lbTrx li>span{display:flex;flex-direction:column;min-width:0}
.lbTrx li .n{align-items:flex-end;text-align:right;gap:3px;white-space:nowrap}
.lbTrx b{font-family:var(--font-body)}.lbTrx small{color:var(--muted);font-size:11.5px}
.lbJamMini{display:grid;grid-template-columns:repeat(24,1fr);align-items:end;gap:2px;height:70px;position:relative;padding-bottom:16px}
.lbJamMini i{background:#4f74ef;border-radius:2px 2px 0 0;display:block}
.lbJamMini span{position:absolute;bottom:0;font-size:10px;color:#98a2b3}
.lbJamMini span:nth-of-type(1){left:0}.lbJamMini span:nth-of-type(2){left:25%}.lbJamMini span:nth-of-type(3){left:50%}.lbJamMini span:nth-of-type(4){left:75%}.lbJamMini span:nth-of-type(5){right:0}
/* penjualan */
.slKpi div.lbKartu{gap:6px}
.slKpi>div{all:unset;box-sizing:border-box;background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:4px;min-width:0;box-shadow:0 4px 20px rgba(12,19,44,.04)}
.slKpi>div small{font-size:10px;letter-spacing:1.4px;color:var(--muted);font-weight:700;text-transform:uppercase}
.slKpi>div b{font-size:clamp(18px,2vw,24px);font-family:var(--font-heading);overflow-wrap:anywhere}
.slKpi>div .lbDelta{align-self:flex-start}
.lbCorong{display:grid;gap:12px}
.lbCorong .c{display:grid;grid-template-columns:1fr auto;gap:4px 10px;font-size:13px}
.lbCorong .c b{font-size:18px}.lbCorong .c .track{grid-column:1/-1;height:12px}.lbCorong .c small{grid-column:1/-1;color:var(--muted);font-size:11.5px}
.slFilter{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:12px}
.slFilter input{height:38px;border:1px solid var(--line);border-radius:10px;padding:0 12px;font:inherit;font-size:14px;min-width:0;flex:1 1 160px;max-width:280px}
.slFilter small{color:var(--muted);font-size:12px}
/* keuangan */
.uVizGrid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:4px 0 16px}
.uImpas,.uKomp{border:1px solid rgba(152,162,179,.3);border-radius:12px;padding:14px;min-width:0}
.uImpas small,.uKomp small{font-size:10px;letter-spacing:1.2px;color:var(--muted);font-weight:700}
.uImpas b{display:block;font-size:22px;margin-top:4px}
.uImpas p{font-size:13px}
.uKompIsi{display:flex;gap:14px;align-items:center;margin-top:8px}
.uKompIsi .lbDonut{width:96px;height:96px;flex:none}
.uKompIsi ul{list-style:none;margin:0;padding:0;flex:1;min-width:0;display:grid;gap:4px;font-size:12.5px}
.uKompIsi li{display:grid;grid-template-columns:10px 1fr auto 34px;gap:6px;align-items:center}
.uKompIsi li i{width:10px;height:10px;border-radius:3px}.uKompIsi li em{font-style:normal;color:var(--muted);text-align:right}
#uangPanel .uKartu div{background:#fff;transition:box-shadow .2s}
#uangPanel .uKartu b{font-family:var(--font-heading)}
/* stok: hari sampai habis */
#prediksiPanel .pdHari{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;font-size:12px}
#prediksiPanel .pdHari .track{height:6px}
#prediksiPanel .pd{transition:transform .18s var(--ease),box-shadow .18s;background:#fff}
#prediksiPanel .pd:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(12,19,44,.07)}
@media(max-width:1200px){.lbKpi{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:1000px){.lbTop,.lbDua,.lbDua.lebar{grid-template-columns:1fr}}
@media(max-width:700px){
  .panel{padding:16px;border-radius:14px}
  .lbBar{gap:8px}.lbBarInfo{margin-left:0;text-align:left;width:100%}
  .lbSeg{width:100%}.lbSeg button{flex:1 1 auto;padding:7px 6px;font-size:12.5px}
  .lbKustom{width:100%}.lbKustom input{flex:1;min-width:0}
  .lbKpi{gap:10px}.lbKartu{padding:12px 12px 40px}
  .lbKartu b{font-size:19px}
  .metrics.lbStatus{grid-template-columns:1fr 1fr;gap:10px}
  .lbStatus article{padding:12px;display:flex;flex-direction:column;align-items:flex-start;text-align:left}
  .lbStatus strong{font-size:20px!important}
  .lbTr{grid-template-columns:minmax(0,1fr) 30px 58px;font-size:12.5px}
  .lbTr .hp{display:none}
  .lbHeat{grid-template-columns:24px repeat(24,minmax(0,1fr));gap:1px}
  .lbHeat .hx{font-size:8.5px}
  .lbMini{grid-template-columns:1fr 1fr}
  .lbModal{align-items:flex-end;padding:0}
  .lbModalBox{border-radius:18px 18px 0 0;max-height:88vh;width:100%}
  .lbModalIsi{padding-bottom:calc(20px + env(safe-area-inset-bottom))}
  .uVizGrid{grid-template-columns:1fr}
  .mrBep{grid-column:1/-1}
  .slFilter input{max-width:none}
  table td,table th{padding:10px}
}
.slKartu{display:none;list-style:none;margin:0;padding:0}
.slKartu li{display:flex;justify-content:space-between;gap:10px;padding:11px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.slKartu li>span{display:flex;flex-direction:column;min-width:0;gap:2px}.slKartu .n{align-items:flex-end;white-space:nowrap}
.slKartu b{font-family:var(--font-body)}.slKartu small{color:var(--muted);font-size:12px}
@media(max-width:700px){#salesTable table{display:none}#salesTable .slKartu{display:block}}
/* HP: target sentuh >= 44px */
@media(max-width:700px){
  .lbSeg button,.lbSeg.kecil button{min-height:44px}
  .lbKustom input,.slFilter input{height:44px;font-size:16px}
  button.lbLink,a.lbLink{display:inline-flex;align-items:center;min-height:44px}
  .lbX{min-height:44px;width:44px}
  .lbPerhatianBox li a{min-height:28px}
  .lbCek{min-height:44px}.lbCek input{width:20px;height:20px}
  .lbTr{min-height:48px}
  main button,#logout,aside .operator button{min-height:44px}
  main input:not([type=checkbox]):not([type=radio]),main select{min-height:44px}
  #uangPanel form input,#uangPanel form select{min-height:44px}
  #uangPanel .uList button{min-width:44px}
  .isiStok,.lbCatatan a,.lbPerhatianBox li a em{display:inline-block;padding:15px 8px;margin:-15px -8px}
  .lbPerhatianBox li a{display:block;padding:12px 12px 12px 34px;margin:-9px -12px -9px -34px;min-height:44px}
  .lbPerhatianBox li::before{top:17px}
  .lbHeat button{min-height:12px}
  .uHead input{min-height:44px}
}
@media(max-width:380px){.lbKartu b{font-size:17px}.lbSeg button{font-size:12px;padding:6px 8px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}