@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@700;800&family=Caveat:wght@700&display=swap');
/* D'BigTea v2.3 — design system meniru aplikasi referensi.
 * Header hijau tua rounded, background krem, kartu putih rounded 22px,
 * tombol pill, bottom-nav pill mengambang, input rounded 16px. */
:root{
  --green-dk:#0B5A38; --green-dk2:#0E6B41;
  --green:#2E7D32; --green-d:#1B5E20; --green-l:#E3F2E5;
  --yellow:#FFC107; --yellow-d:#8D6E00; --yellow-l:#FFF6D9;
  --red:#C62828; --red-l:#FDECEA;
  --cream:#F6F1E7; --card:#ffffff;
  --ink:#22301F; --muted:#8B8574; --line:#EAE2D0;
  --radius:22px; --radius-sm:16px;
  --shadow:0 10px 28px rgba(11,90,56,.08);
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;overflow-x:clip;overscroll-behavior:none;}
body{font-family:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;background:var(--cream);color:var(--ink);font-size:15px;}
#app{max-width:480px;margin:0 auto;min-height:100vh;background:var(--cream);position:relative;box-shadow:0 0 24px rgba(0,0,0,.08);}
.view{padding:0 14px 120px;}
h2.ptitle{margin:4px 2px 12px;font-size:20px;}
.muted{color:var(--muted);} .small{font-size:12px;}

/* ---------- page header (referensi) ---------- */
.pghead{background:linear-gradient(165deg,var(--green-dk2),var(--green-dk));color:#fff;
  border-radius:0 0 32px 32px;padding:20px 20px 30px;margin:0 -14px 18px;position:relative;overflow:hidden;}
.pghead::before{content:'';position:absolute;right:-70px;top:-70px;width:200px;height:200px;border-radius:50%;background:rgba(255,255,255,.06);}
.pghead::after{content:'';position:absolute;right:30px;top:40px;width:110px;height:110px;border-radius:50%;background:rgba(255,255,255,.05);}
.eyebrow{color:var(--yellow);font-size:11px;font-weight:800;letter-spacing:.22em;margin-bottom:10px;position:relative;z-index:1;}
.eyebrow .ver{opacity:.75;letter-spacing:.06em;font-weight:700;}
.pghead-row{display:flex;align-items:center;gap:14px;position:relative;z-index:1;}
.pghead h1{margin:0;font-size:31px;font-weight:800;letter-spacing:-.01em;line-height:1.15;}
.pghead p{margin:6px 0 0;font-size:13.5px;color:rgba(255,255,255,.78);}
.avatar{width:56px;height:56px;border-radius:50%;background:var(--yellow);color:var(--green-dk);
  font-weight:800;font-size:19px;display:flex;align-items:center;justify-content:center;flex:none;}
.backbtn{width:46px;height:46px;border-radius:50%;border:1.5px solid rgba(255,255,255,.55);
  background:transparent;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;flex:none;}
.backbtn .ic svg{width:22px;height:22px;}

/* ---------- kartu & teks ---------- */
.card{background:var(--card);border-radius:var(--radius);padding:18px;margin-bottom:14px;box-shadow:var(--shadow);}
.card.tint{background:var(--yellow-l);}
.row{display:flex;gap:8px;align-items:center;} .grow{flex:1;}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px;}
.stat{background:var(--card);border-radius:var(--radius);padding:16px 14px;box-shadow:var(--shadow);}
.stat .v{font-size:21px;font-weight:800;} .stat .l{font-size:12px;color:var(--muted);margin-top:5px;}
.seclabel{display:flex;align-items:baseline;justify-content:space-between;margin:18px 4px 12px;}
.seclabel b{font-size:19px;font-weight:800;}
.seclabel .link{font-size:13px;color:var(--green);font-weight:700;text-decoration:none;}
.seclabel .count{font-size:13px;color:var(--muted);}

/* menu ala referensi (ikon tile + panah) */
.menurow{display:flex;align-items:center;gap:10px;background:#fff;border-radius:var(--radius);
  padding:12px;box-shadow:var(--shadow);margin-bottom:9px;cursor:pointer;border:none;width:100%;text-align:left;color:var(--ink);font-size:11px;}
.menurow .tile{width:44px;height:44px;border-radius:14px;display:flex;align-items:center;justify-content:center;flex:none;}
.menurow .tile svg{width:22px;height:22px;}
.tile.g{background:var(--green-l);color:var(--green);} .tile.y{background:var(--yellow-l);color:var(--yellow-d);} .tile.r{background:var(--red-l);color:var(--red);}
.menurow b{font-size:12px;display:block;} .menurow small{color:var(--muted);font-size:10px;}
.menurow .chev{margin-left:auto;color:#B9B09A;flex:none;}
.menurow .chev svg{width:16px;height:16px;}

/* kartu selamat datang (hijau) */
.wcard{background:linear-gradient(150deg,#0E6B41,#0A4E30);color:#fff;border-radius:26px;padding:20px;
  margin-bottom:14px;position:relative;overflow:hidden;box-shadow:var(--shadow);}
.wcard::after{content:'';position:absolute;right:-50px;top:-50px;width:160px;height:160px;border-radius:50%;background:rgba(255,255,255,.07);}
.wcard .eyebrow{margin-bottom:6px;}
.wcard h3{margin:0;font-size:22px;font-weight:800;}
.wcard .date{color:rgba(255,255,255,.75);font-size:13px;margin:8px 0 0;}
.wcard hr{border:none;border-top:1px solid rgba(255,255,255,.18);margin:14px 0;}
.wcard .wrow{display:flex;align-items:center;justify-content:space-between;gap:10px;position:relative;z-index:1;}

/* ---------- tombol ---------- */
.btn{border:none;border-radius:999px;padding:12px 20px;font-size:15px;font-weight:700;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:transform .12s;
  position:relative;overflow:hidden}
.btn:active{transform:translateY(2px)}
/* v2.120: Bulat 3D + glitter untuk tombol eksekusi. */
.btn.primary{background:radial-gradient(ellipse at 50% 30%,#ffd54f,#FFC107 60%,#e6a817 100%);color:#3E2723;
  border:1px solid #c8960a;box-shadow:0 4px 8px rgba(0,0,0,.2),inset 0 1px 2px rgba(255,255,255,.6)}
.btn.green{background:radial-gradient(ellipse at 50% 30%,#3aa655,#1e6b38 70%);color:#fff;
  border:1px solid #155c31;box-shadow:0 4px 8px rgba(0,0,0,.25),inset 0 1px 2px rgba(255,255,255,.4)}
/* v2.122: glitter dihapus dari tombol demi performa — 3D tetap. */
.btn.primary:active,.btn.green:active{box-shadow:0 1px 3px rgba(0,0,0,.2),inset 0 1px 2px rgba(255,255,255,.3)}
.btn.danger{background:var(--red);color:#fff;box-shadow:0 3px 6px rgba(0,0,0,.15)}
.btn.ghost{background:#EFE8D6;color:var(--ink);box-shadow:0 2px 4px rgba(0,0,0,.08)}
.btn.block{width:100%;} .btn.sm{padding:8px 14px;font-size:13px;}
.btn:disabled{opacity:.5;}
.btn .ic svg{width:18px;height:18px;}

/* ---------- form ---------- */
input,select,textarea{width:100%;padding:13px 14px;border:1.5px solid var(--line);border-radius:var(--radius-sm);
  font-size:15px;margin-top:6px;background:#fff;color:var(--ink);}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(46,125,50,.12);}
label{display:block;margin-bottom:12px;font-size:11.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.07em;}
label input,label select,label textarea{text-transform:none;letter-spacing:0;font-weight:400;}
table.tbl{width:100%;border-collapse:collapse;font-size:13px;}
.tbl th,.tbl td{padding:9px 6px;border-bottom:1px solid var(--line);text-align:left;}
.tbl th{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.05em;}

/* ---------- bottom nav pill mengambang ---------- */
.bottomnav{position:fixed;bottom:calc(12px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);
  width:calc(100% - 28px);max-width:452px;background:#fff;border-radius:28px;
  box-shadow:0 14px 34px rgba(11,90,56,.20);display:flex;z-index:20;padding:8px 6px;}
.navbtn{flex:1;background:none;border:none;display:flex;flex-direction:column;align-items:center;gap:3px;
  font-size:10.5px;color:#A39B85;cursor:pointer;padding:9px 2px;border-radius:20px;font-weight:600;}
.navbtn.active{background:var(--green-l);color:var(--green);font-weight:800;}
.navbtn .ic svg{width:23px;height:23px;}
.ic{display:inline-flex;} .ic svg{width:20px;height:20px;}
.navbtn.logout{color:var(--red);}


/* ---------- sheet ---------- */
.sheet-ov{position:fixed;inset:0;background:rgba(20,30,20,.45);z-index:30;display:none;}
.sheet-ov.open{display:block;animation:fadeIn .18s ease;}
.sheet{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:480px;background:var(--cream);
  border-radius:26px 26px 0 0;padding:18px 16px calc(22px + env(safe-area-inset-bottom));
  display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;animation:sheetUp .22s ease;}
.sheetbtn{background:#fff;border:none;border-radius:18px;padding:16px 6px;display:flex;flex-direction:column;
  align-items:center;gap:7px;font-size:12px;font-weight:600;cursor:pointer;color:var(--ink);box-shadow:var(--shadow);}
.sheetbtn .ic svg{width:27px;height:27px;color:var(--green);}
.sheetbtn.logout .ic svg{color:var(--red);} .sheetbtn.logout{color:var(--red);}
@keyframes sheetUp{from{transform:translate(-50%,40px);opacity:0}to{transform:translate(-50%,0);opacity:1}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* ---------- login ---------- */
.loginwrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:22px;
  background:linear-gradient(165deg,var(--green-dk2),var(--green-dk) 70%);}
.logocard{background:#fff;border-radius:26px;padding:30px 24px;width:100%;max-width:360px;text-align:center;box-shadow:0 16px 40px rgba(0,0,0,.28);}
.loginlogo{width:68px;height:68px;border-radius:50%;background:var(--yellow);color:var(--green-dk);font-weight:800;
  font-size:28px;display:flex;align-items:center;justify-content:center;margin:0 auto 10px;}
.logocard h2{margin:4px 0 0;font-size:24px;} .logocard .muted{margin:4px 0 16px;}
.ver-tag{display:inline-block;background:var(--green-l);color:var(--green);font-size:10.5px;font-weight:800;
  padding:2px 9px;border-radius:999px;vertical-align:middle;letter-spacing:.04em;}
.tabs{display:flex;background:#F1EAD8;border-radius:999px;padding:4px;margin-bottom:14px;}
.tab{flex:1;border:none;background:none;padding:10px;border-radius:999px;font-weight:700;cursor:pointer;color:var(--muted);font-size:14px;}
.tab.active{background:#fff;color:var(--green);box-shadow:0 2px 6px rgba(0,0,0,.14);}
.logocard label{text-align:left;}

/* ---------- toast + dialog ---------- */
.toast{position:fixed;bottom:110px;left:50%;transform:translateX(-50%) translateY(20px);background:#323232;color:#fff;
  padding:12px 20px;border-radius:999px;opacity:0;transition:.25s;z-index:99;font-size:14px;max-width:90%;box-shadow:0 8px 20px rgba(0,0,0,.25);}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
.toast.err{background:var(--red);}

/* ---------- banner auto-update (v2.6) ---------- */
.upd-banner{position:fixed;top:calc(10px + env(safe-area-inset-top));left:50%;
  transform:translateX(-50%) translateY(-16px);width:min(440px,calc(100% - 28px));
  background:#fff;border:1px solid var(--line);border-radius:18px;
  box-shadow:0 14px 34px rgba(11,90,56,.22);z-index:80;padding:12px 12px 12px 16px;
  display:flex;align-items:center;gap:10px;opacity:0;pointer-events:none;transition:.25s;}
.upd-banner.show{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto;}
.upd-banner .t{flex:1;min-width:0;}
.upd-banner .t b{display:block;font-size:14px;margin-bottom:2px;}
.upd-banner .t span{font-size:12px;color:var(--muted);line-height:1.4;display:block;}
.upd-banner .x{border:none;background:none;font-size:20px;color:var(--muted);cursor:pointer;
  padding:6px 8px;line-height:1;flex:none;}
.dlg-ov{position:fixed;inset:0;background:rgba(20,30,20,.5);z-index:50;display:flex;align-items:center;justify-content:center;padding:24px;animation:fadeIn .18s ease;}
.dlg{background:#fff;border-radius:24px;padding:22px;width:100%;max-width:340px;box-shadow:0 20px 50px rgba(0,0,0,.25);animation:sheetUp .2s ease;}
.dlg-btns{display:flex;gap:8px;margin-top:14px;} .dlg-btns .btn{flex:1;}

/* ---------- produk / pos ---------- */
.prodgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.prod{background:#fff;border-radius:18px;padding:12px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:6px;}
.prod .nm{font-weight:700;font-size:14px;} .prod .pr{color:var(--green);font-weight:800;}
.prod .st{font-size:11px;color:var(--muted);}
.chips{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 12px;scrollbar-width:none;}
.chips::-webkit-scrollbar{display:none;}
.chip{white-space:nowrap;border:1.5px solid var(--line);background:#fff;border-radius:999px;padding:9px 16px;font-size:13px;font-weight:600;cursor:pointer;color:var(--ink);}
.chip.active{background:var(--green);color:#fff;border-color:var(--green);}
.cartbar{position:fixed;bottom:calc(100px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);
  width:calc(100% - 28px);max-width:452px;background:var(--ink);color:#fff;border-radius:20px;padding:14px 18px;
  display:flex;align-items:center;justify-content:space-between;z-index:15;box-shadow:0 10px 26px rgba(0,0,0,.35);cursor:pointer;}
.cartline{display:flex;align-items:center;justify-content:space-between;padding:9px 0;border-bottom:1px dashed var(--line);gap:8px;}
.cartline .tile{width:34px;height:34px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;flex:none;}
.cartline .tile svg{width:22px;height:22px;}
.qtybtn{width:32px;height:32px;border-radius:50%;border:1.5px solid var(--line);background:#fff;font-size:17px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;color:var(--ink);}
.badge{display:inline-block;padding:4px 12px;border-radius:999px;font-size:11px;font-weight:800;}
.badge.g{background:var(--green-l);color:var(--green-d);} .badge.y{background:var(--yellow-l);color:var(--yellow-d);} .badge.r{background:var(--red-l);color:var(--red);}
.promo{background:linear-gradient(120deg,var(--yellow),#FFD54F);border-radius:var(--radius);padding:16px;margin-bottom:14px;color:#3E2723;box-shadow:var(--shadow);}
.promo b{font-size:16px;} .promo p{margin:6px 0 0;font-size:13px;}
/* v2.427: Marquee banner POS — berjalan kanan ke kiri. */
@keyframes posmarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.pos-marquee-track:hover{animation-play-state:paused;}
canvas.chart{width:100%;height:180px;background:#fff;border-radius:var(--radius);}

/* ---------- transisi halaman + skeleton ---------- */
@keyframes pageIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.view.page-enter{animation:pageIn .2s ease;}
@keyframes shimmer{to{background-position:-200% 0}}
.skel{height:86px;border-radius:var(--radius-sm);margin-bottom:12px;
  background:linear-gradient(90deg,#EAE2D0 25%,#F7F2E4 50%,#EAE2D0 75%);background-size:200% 100%;animation:shimmer 1.2s infinite;}
.skel.short{height:46px;} 
.skel-head{height:190px;border-radius:0 0 32px 32px;margin:0 -14px 16px;
  background:linear-gradient(90deg,#0E6B41 25%,#127A49 50%,#0E6B41 75%);background-size:200% 100%;animation:shimmer 1.2s infinite;}
.loading{text-align:center;color:var(--muted);padding:40px;}

/* ---------- indikator sinkron ---------- */
.sync-ind{position:fixed;top:calc(10px + env(safe-area-inset-top));right:14px;z-index:60;background:#fff;color:var(--green);
  border-radius:999px;padding:7px 14px;font-size:11.5px;font-weight:700;box-shadow:0 6px 16px rgba(0,0,0,.14);
  opacity:0;transform:translateY(-8px);transition:.22s;pointer-events:none;}
.sync-ind.show{opacity:1;transform:none;}
.sync-ind.busy::before{content:'';display:inline-block;width:10px;height:10px;margin-right:7px;border-radius:50%;
  border:2px solid var(--green-l);border-top-color:var(--green);animation:spin .7s linear infinite;vertical-align:-1px;}
.sync-ind.ok::before{content:'✓ ';color:var(--green);}
.sync-ind.err{color:var(--red);}
@keyframes spin{to{transform:rotate(360deg)}}

.iconbtn{background:rgba(255,255,255,.15);border:none;color:#fff;border-radius:50%;width:38px;height:38px;display:flex;align-items:center;justify-content:center;cursor:pointer;}
@media print{
  @page{size:57mm auto;margin:0;}
  body *{visibility:hidden;}
  .receipt, .receipt *{visibility:visible;}
  .receipt{display:block !important;position:absolute;left:0;top:0;width:57mm;margin:0;font-size:11px;}
  .noprint{display:none !important;}
}
.receipt{display:none;background:#fff;color:#000;font-family:monospace;font-size:13px;padding:10px;max-width:300px;margin:0 auto;}

/* ---------- v2.4: boot splash ---------- */
#splash{position:fixed;inset:0;background:linear-gradient(165deg,#0E6B41,#0B5A38);z-index:200;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;transition:opacity .45s ease;}
#splash.hide{opacity:0;pointer-events:none;}
#splash img{width:128px;height:128px;border-radius:30px;box-shadow:0 18px 44px rgba(0,0,0,.35);animation:pop .5s ease;}
#splash p{color:#fff;text-align:center;font-size:22px;font-weight:800;margin:0;line-height:1.35;}
#splash p span{font-size:12px;font-weight:700;color:var(--yellow);letter-spacing:.22em;}
@keyframes pop{from{transform:scale(.85);opacity:0}to{transform:scale(1);opacity:1}}

/* ---------- v2.4: logo resmi di header & login ---------- */
.avatar.logo{background:#fff;padding:5px;}
.avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block;}
.loginlogo{padding:0;overflow:hidden;background:#fff;}
.loginlogo img{width:100%;height:100%;object-fit:cover;display:block;}

/* ---------- v2.4: POS sebagai aksi utama di tengah nav ---------- */
.navbtn.pos-main .ic{background:var(--yellow);border-radius:50%;width:50px;height:50px;
  display:flex;align-items:center;justify-content:center;margin-top:-16px;
  box-shadow:0 10px 20px rgba(255,193,7,.5),0 0 0 6px #fff;}
.navbtn.pos-main .ic svg{width:27px;height:27px;}
.navbtn.pos-main{color:#8D6E00;font-weight:800;}
/* v2.392: Ikon nav premium — chip putih + animasi pop saat aktif + goyang lonceng order. */
.navbtn .ic{background:rgba(255,255,255,.92);border-radius:14px;width:40px;height:40px;display:flex;align-items:center;justify-content:center;box-shadow:0 3px 10px rgba(0,0,0,.14);transition:transform .25s cubic-bezier(.34,1.56,.64,1),box-shadow .25s;}
.navbtn .ic svg{width:26px;height:26px;}
.navbtn:active .ic{transform:scale(.88);}
.navbtn.active .ic{transform:scale(1.12);box-shadow:0 6px 16px rgba(0,0,0,.22),0 0 0 2px rgba(255,255,255,.6);animation:navPop .4s cubic-bezier(.34,1.56,.64,1);}
@keyframes navPop{0%{transform:scale(.8);}60%{transform:scale(1.2);}100%{transform:scale(1.12);}}
.navbtn[data-go="order"] .ic{animation:navWiggle 2.5s ease-in-out infinite;}
@keyframes navWiggle{0%,92%,100%{transform:rotate(0);}94%{transform:rotate(-8deg);}96%{transform:rotate(8deg);}98%{transform:rotate(-4deg);}}
.navbtn[data-go="order"].active .ic{animation:navPop .4s cubic-bezier(.34,1.56,.64,1),navWiggle 2.5s ease-in-out infinite;}
.navbtn.pos-main.active{background:transparent;color:#8D6E00;}

/* ---------- v2.4: gambar produk di POS ---------- */
.prod .pimg{width:100%;aspect-ratio:1;object-fit:cover;border-radius:12px;background:var(--yellow-l);display:block;}

/* ---------- v2.4: pilihan ukuran M/L/XL ---------- */
.sizechips{display:flex;gap:8px;margin:10px 0;}
.sizechip{flex:1;border:2px solid var(--line);background:#fff;border-radius:14px;padding:10px 4px;
  text-align:center;cursor:pointer;transition:border-color .15s,background .15s;}
.sizechip b{display:block;font-size:16px;}
.sizechip small{color:var(--muted);font-size:11px;}
.sizechip.active{border-color:var(--green);background:var(--green-l);}
.sizechip.active small{color:var(--green-d);font-weight:700;}

/* ---------- v2.22: toggle grid/list POS ---------- */
.seg{display:inline-flex;background:#F1EAD8;border-radius:10px;padding:3px;gap:2px;flex:none;}
.seg button{border:0;background:transparent;font-size:17px;padding:6px 11px;border-radius:8px;cursor:pointer;color:#8a8a8a;line-height:1;}
.seg button.active{background:#fff;color:var(--green-d);box-shadow:0 1px 3px rgba(0,0,0,.18);font-weight:800;}
.prodlist{display:flex;flex-direction:column;gap:8px;}
.prow{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:8px 10px;cursor:pointer;}
.prow img{width:44px;height:44px;border-radius:8px;object-fit:cover;flex:none;background:var(--yellow-l);}
.prow .btn{flex:none;}
.pinit{width:44px;height:44px;border-radius:8px;background:var(--green-l);color:var(--green-d);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:20px;flex:none;}
.pinit.big{width:100%;height:110px;font-size:44px;border-radius:12px;}
.grow{flex:1;min-width:0;}

/* ---------- v2.22: Order ala GoFood ---------- */
.card.warn{border-left:4px solid #C62828;background:#FFF6F5;}
.card.ord.fresh{border:1.5px solid #C62828;animation:ordpulse 1.8s infinite;}
@keyframes ordpulse{0%,100%{box-shadow:0 0 0 0 rgba(198,40,40,.22);}50%{box-shadow:0 0 0 7px rgba(198,40,40,0);}}
.navbtn{position:relative;}
.navbadge{position:absolute;top:1px;right:6px;min-width:18px;height:18px;border-radius:9px;background:#C62828;color:#fff;font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center;padding:0 5px;z-index:2;}
#order-banner{position:fixed;top:-80px;left:12px;right:12px;z-index:9998;background:#0B5A38;color:#fff;border-radius:14px;padding:14px 16px;font-weight:700;box-shadow:0 8px 24px rgba(0,0,0,.3);transition:top .3s;cursor:pointer;text-align:center;}
#order-banner.show{top:12px;}

/* ---------- v2.26: POS quick-add ---------- */
.prod, .prow{position:relative;transition:transform .12s ease;}
.prod:active, .prow:active{transform:scale(.93);}
.qtybadge{position:absolute;top:-8px;right:-6px;min-width:26px;height:26px;border-radius:13px;background:#C62828;color:#fff;font-size:13px;font-weight:800;display:flex;align-items:center;justify-content:center;padding:0 7px;z-index:2;box-shadow:0 2px 6px rgba(0,0,0,.3);}
/* ---------- v2.26: kartu keranjang hijau D'BigTea ---------- */
/* v2.424: background 50% transparan agar menu di belakangnya terlihat. */
.cartbar{background:linear-gradient(135deg,rgba(14,107,65,.5),rgba(46,125,50,.5));box-shadow:0 10px 26px rgba(14,107,65,.45);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);}
/* v2.424: ruang bawah daftar produk POS agar item terakhir tidak tertutup cartbar. */
#pos-grid{padding-bottom:190px;}

/* ---- v2.37: Panduan Kerja ---- */
.panduan-body ul, .panduan-body ol { margin: 6px 0; padding-left: 20px; }
.panduan-body li { margin: 4px 0; }
.panduan-body p { margin: 8px 0; }

/* ---- v2.40: kartu ajakan Install Aplikasi (?install=1) ---- */
.install-ov{position:fixed;inset:0;z-index:10000;background:rgba(20,30,22,.55);display:flex;align-items:center;justify-content:center;padding:20px;animation:installfade .25s ease;}
@keyframes installfade{from{opacity:0;}to{opacity:1;}}
.install-card{background:#fff;border-radius:20px;max-width:340px;width:100%;padding:28px 24px;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.35);}
.install-logo{width:72px;height:72px;border-radius:18px;margin-bottom:8px;}
.install-card h3{margin:6px 0 8px;font-size:1.2rem;color:#0B5A38;}
.install-card p{margin:0 0 14px;color:#444;font-size:.92rem;line-height:1.5;}
.install-card .install-go{width:100%;margin-bottom:6px;}
.install-card .install-later{width:100%;}
.install-manual{background:#FFF8E1;border-radius:12px;padding:10px 12px;font-size:.85rem;margin:0 0 10px;}

/* ============ LOGIN: 3 tab, tema berganti per tab (v2.56) ============ */
.loginwrap{transition:background .5s ease;}
/* --- Admin: Dark Luxe --- */
/* v2.376: Admin TERANG — sage green muda + kartu putih, aksen emas (tidak gelap lagi). */
.loginwrap.lt-admin{background:linear-gradient(160deg,#e8f5e9,#f1f8e9 50%,#fff8e1);position:relative;overflow:hidden;}
.loginwrap.lt-admin::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(600px 300px at 50% -60px,rgba(212,175,55,.25),transparent 70%);}
.loginwrap.lt-admin .logocard{position:relative;background:#fff;
  border:2px solid #d4af37;color:#222;
  box-shadow:0 10px 40px rgba(27,94,32,.15);}
.loginwrap.lt-admin .logocard h2{color:#1b5e20;}
.loginwrap.lt-admin .muted{color:#777;}
.loginwrap.lt-admin .ver-tag{background:rgba(212,175,55,.2);color:#8a6d00;}
.loginwrap.lt-admin .tabs{background:#f5f5f5;}
.loginwrap.lt-admin .tab{color:#777;}
.loginwrap.lt-admin .tab.active{background:linear-gradient(135deg,#d4af37,#b8860b);color:#fff;
  box-shadow:0 0 18px rgba(212,175,55,.4);}
.loginwrap.lt-admin .logocard label{color:#333;}
.loginwrap.lt-admin .logocard input{background:#fafafa;border-color:#ddd;color:#222;}
.loginwrap.lt-admin .logocard input::placeholder{color:#aaa;}
.loginwrap.lt-admin .logocard input:focus{border-color:#d4af37;box-shadow:0 0 0 3px rgba(212,175,55,.2);}
.loginwrap.lt-admin .btn.primary{background:linear-gradient(135deg,#e8c15a,#b8860b);color:#fff;
  box-shadow:0 12px 30px rgba(212,175,55,.3);}
.loginwrap.lt-admin .loginlogo{background:#fff;border:2px solid #d4af37;
  box-shadow:0 0 26px rgba(212,175,55,.3);}
.loginwrap.lt-admin .logocard a{color:#b8860b;}
/* --- Karyawan: Aurora --- */
.loginwrap.lt-staff{background:linear-gradient(165deg,#062b1c,#0B5A38 75%);position:relative;overflow:hidden;}
.loginwrap.lt-staff::before,.loginwrap.lt-staff::after{content:'';position:absolute;border-radius:50%;
  filter:blur(60px);opacity:.5;pointer-events:none;}
.loginwrap.lt-staff::before{width:240px;height:240px;background:#22c55e;top:-60px;left:-60px;
  animation:ltDrift 9s ease-in-out infinite alternate;}
.loginwrap.lt-staff::after{width:200px;height:200px;background:#0ea5e9;bottom:-40px;right:-40px;
  animation:ltDrift 11s ease-in-out infinite alternate-reverse;}
@keyframes ltDrift{from{transform:translate(0,0) scale(1)}to{transform:translate(40px,30px) scale(1.15)}}
.loginwrap.lt-staff .logocard{position:relative;background:rgba(255,255,255,.10);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.25);color:#fff;
  box-shadow:0 18px 50px rgba(0,0,0,.35);}
.loginwrap.lt-staff .logocard h2{color:#fff;}
.loginwrap.lt-staff .muted{color:#cfe6d6;}
.loginwrap.lt-staff .ver-tag{background:rgba(255,255,255,.15);color:#fff;}
.loginwrap.lt-staff .tabs{background:rgba(255,255,255,.12);}
.loginwrap.lt-staff .tab{color:#cfe6d6;}
.loginwrap.lt-staff .tab.active{background:#fff;color:#0B5A38;box-shadow:0 4px 14px rgba(0,0,0,.25);}
.loginwrap.lt-staff .logocard label{color:#dcefe3;}
.loginwrap.lt-staff .logocard input{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);color:#fff;}
.loginwrap.lt-staff .logocard input::placeholder{color:#a9cbb5;}
.loginwrap.lt-staff .logocard input:focus{border-color:#a3e635;box-shadow:0 0 0 3px rgba(163,230,53,.25);}
.loginwrap.lt-staff .btn.primary{background:linear-gradient(135deg,#a3e635,#22c55e);color:#062b1c;
  box-shadow:0 10px 26px rgba(34,197,94,.5);}
.loginwrap.lt-staff .loginlogo{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.4);}
.loginwrap.lt-staff .logocard a{color:#d9f99d;}
/* --- Member: Split Modern --- */
/* v2.376: tema member MODERN — gradient animasi + logo glitter + glassmorphism. */
@keyframes memberGrad{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes logoGlitter{0%,100%{box-shadow:0 0 0 0 rgba(255,235,59,.7),0 8px 24px rgba(0,0,0,.25)}50%{box-shadow:0 0 0 8px rgba(255,235,59,0),0 0 28px 6px rgba(255,235,59,.6),0 8px 24px rgba(0,0,0,.25)}}
@keyframes floatUp{0%{transform:translateY(0);opacity:0}10%{opacity:.7}90%{opacity:.5}100%{transform:translateY(-90vh);opacity:0}}
.loginwrap.lt-member{
  background:linear-gradient(135deg,#0d3b12,#1b5e20,#2e7d32,#43a047,#1b5e20);
  background-size:300% 300%;
  animation:memberGrad 12s ease infinite;
  position:relative; overflow:hidden;
}
/* Gelembung animasi naik (efek soda/teh) */
.loginwrap.lt-member::after{
  content:'\2022  \2022  \2022  \2022  \2022';
  position:absolute; bottom:-20px; left:0; right:0; text-align:center;
  font-size:28px; color:rgba(255,255,255,.25); letter-spacing:60px;
  animation:floatUp 8s linear infinite; pointer-events:none;
}
.loginwrap.lt-member .logocard{
  background:#ffffff; /* putih pekat agar teks terbaca jelas */
  border:2px solid rgba(255,235,59,.8); border-radius:24px;
  box-shadow:0 20px 50px rgba(0,0,0,.3); position:relative; z-index:1;
}
/* Logo glitter beranimasi */
.loginwrap.lt-member .loginlogo{
  animation:logoGlitter 2.5s ease-in-out infinite;
  border:3px solid #ffeb3b; border-radius:50%;
}
/* Teks di dalam kartu HARUS gelap agar terbaca */
.loginwrap.lt-member .logocard h2{color:#0d3b12;font-weight:900;text-shadow:none;}
.loginwrap.lt-member .logocard label{color:#1b5e20;font-weight:700;}
.loginwrap.lt-member .logocard .muted{color:#555;}
.loginwrap.lt-member .logocard .brand-sub{color:#666;}
.loginwrap.lt-member .loginlogo{background:#0B5A38;box-shadow:0 10px 24px rgba(11,90,56,.35);}
.loginwrap.lt-member .tab.active{background:#0B5A38;color:#fff;box-shadow:0 6px 14px rgba(11,90,56,.4);}
.loginwrap.lt-member .btn.primary{background:#1b5e20;color:#ffeb3b;box-shadow:0 12px 26px rgba(27,94,32,.5);border:2px solid #ffeb3b;}
.loginwrap.lt-member .logocard input{background:#f1f6f2;}
.loginwrap.lt-member .logocard input:focus{border-color:#22c55e;box-shadow:0 0 0 4px rgba(34,197,94,.15);}
.loginwrap.lt-member .logocard a{color:#0B5A38;font-weight:700;}

/* ============ LOGIN v2.57: branding + loading + tipografi ============ */
.brand-title{font-weight:800;letter-spacing:.03em;}
.brand-sub{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;}
.logocard h2{font-weight:800;letter-spacing:.02em;}
.logocard input{font-size:15px;}
.logocard .tab{letter-spacing:.02em;}
.logocard a{text-decoration:none;}
#btn-login:disabled{opacity:.8;cursor:wait;}
#btn-login .lspin{display:inline-block;width:15px;height:15px;border-radius:50%;
  border:2.5px solid currentColor;border-top-color:transparent;opacity:.75;
  margin-right:8px;vertical-align:-2px;animation:lspin .7s linear infinite;}
@keyframes lspin{to{transform:rotate(360deg)}}

/* ============ TEMA DALAM APLIKASI per role (v2.56) ============ */
/* --- Admin: Dark Luxe --- */
/* v2.415: Hitam terlalu pekat → lebih lembut & elegan + tekstur dot halus (tidak polos). */
body.theme-admin{
  --green-dk:#1F2520; --green-dk2:#2B332C;
  --green:#d4af37; --green-d:#b8860b; --green-l:rgba(212,175,55,.14);
  --yellow:#d4af37; --yellow-d:#8a6d1f; --yellow-l:rgba(212,175,55,.12);
  --red:#e57373; --red-l:rgba(198,40,40,.20);
  --cream:#212721; --card:#2C332D;
  --ink:#f3efe4; --muted:#aaa496; --line:#3E463F;
  --shadow:0 10px 28px rgba(0,0,0,.35);
  background-color:#212721;
  background-image:radial-gradient(rgba(255,255,255,.05) 1px, transparent 1.5px);
  background-size:24px 24px;
}
body.theme-admin #app{
  background-color:transparent;
  background-image:radial-gradient(rgba(255,255,255,.05) 1px, transparent 1.5px);
  background-size:24px 24px;
  box-shadow:0 0 40px rgba(0,0,0,.25);
}
body.theme-admin input,body.theme-admin select,body.theme-admin textarea{background:#283028;color:var(--ink);}
body.theme-admin input::placeholder,body.theme-admin textarea::placeholder{color:#a8a294;}
/* v2.110: kontras teks halaman Pengetahuan AI di mode gelap. */
body.theme-admin .small{color:#cfc9b8;}
body.theme-admin label.small{color:#e0dac8;font-weight:600;}
body.theme-admin .btn.ghost{background:#313A32;color:var(--ink);}
body.theme-admin .btn.green{color:#1a211a;}
body.theme-admin .pghead{background:linear-gradient(165deg,#2E362F,#222822);
  border-bottom:1px solid rgba(212,175,55,.35);}
body.theme-admin .eyebrow{color:#d4af37;}
body.theme-admin .bottomnav{background:#252C26;box-shadow:0 14px 34px rgba(0,0,0,.45);}
body.theme-admin .navbtn{color:#989284;}
body.theme-admin .sheetbtn{background:#2C332D;color:var(--ink);}
body.theme-admin .toast{background:#2E362F;}
/* v2.61: perbaikan kontras Dark Luxe — permukaan yang tadinya putih kini gelap agar teks terbaca */
body.theme-admin .menurow,
body.theme-admin .dlg,
body.theme-admin .prod,
body.theme-admin .chip,
body.theme-admin .qtybtn,
body.theme-admin .sizechip,
body.theme-admin .prow{background:#1e251e;border-color:#39413a;}
body.theme-admin .menurow small,
body.theme-admin .sizechip small,
body.theme-admin .prod .st{color:#b3ac9c;}
body.theme-admin .prod .pr{color:#f0cd5a;}
body.theme-admin .chip.active{background:var(--green);border-color:var(--green);color:#0a0f0c;}
body.theme-admin .seg{background:#121712;}
body.theme-admin .seg button{color:#8a8474;}
body.theme-admin .seg button.active{background:#2b332b;color:#f0cd5a;}
body.theme-admin .sync-ind{background:#1e251e;color:#f0cd5a;border:1px solid rgba(212,175,55,.45);}
body.theme-admin .tile.g{background:rgba(212,175,55,.16);color:#f0cd5a;}
body.theme-admin .tile.y{background:rgba(212,175,55,.10);color:#f0cd5a;}
body.theme-admin .pghead{background:linear-gradient(165deg,#232b1a 0%,#141a10 55%,#0a0f0c 100%);
  border-bottom:1px solid rgba(212,175,55,.45);}
body.theme-admin .pghead h1,body.theme-admin .pghead .ptitle{color:#f5edd6;}
body.theme-admin .card{border:1px solid #2b312a;}
/* --- Karyawan/Part Time/Canvasing: Aurora --- */
body.theme-staff .pghead{background:linear-gradient(140deg,#0B5A38 20%,#15803d 60%,#1d9e56);}
/* v2.351: navigasi bawah hijau untuk karyawan (seragam dengan header) — perintah Andre 2026-10-13. */
body.theme-staff .bottomnav{background:linear-gradient(140deg,#0B5A38 20%,#15803d 60%,#1d9e56);box-shadow:0 14px 34px rgba(11,90,56,.35);}
body.theme-staff .navbtn{color:rgba(255,255,255,.75);}
body.theme-staff .navbtn.active{background:rgba(255,255,255,.22);color:#fff;}
/* v2.392: Filter putih DIBUANG — ikon tampil berwarna asli (gradasi). */
body.theme-staff .navbtn.pos-main{color:#fff;}
body.theme-staff .navbtn.pos-main .ic{background:var(--yellow);}
body.theme-staff .pghead::before{background:radial-gradient(circle,rgba(163,230,53,.30),transparent 70%);
  width:260px;height:260px;right:-60px;top:-90px;animation:ltDrift 8s ease-in-out infinite alternate;}

/* ============ v2.58: samakan dimensi login + loading botol→cup ============ */
/* 1) Dimensi kartu IDENTIK di semua tab: box sama persis, panel tab sama tinggi */
.loginwrap .logocard{width:100%;max-width:360px;padding:30px 24px;border-radius:26px;box-sizing:border-box;}
#login-admin,#login-staff,#login-member{min-height:178px;}
/* 3) Link daftar & kembali: satu style, tanpa garis bawah */
.reg-link{color:#0B5A38;font-weight:700;text-decoration:none;font-size:14px;}
.loginwrap.lt-admin .reg-link{color:#d4af37;}
.loginwrap.lt-staff .reg-link{color:#d9f99d;}
/* 4) Overlay loading: kartu hijau + bingkai animasi berjalan */
.pour-ov{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  background:rgba(6,20,13,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  animation:fadeIn .25s ease;}
.pour-ov.out{opacity:0;transition:opacity .3s ease;}
/* v2.99: loading lingkaran progress sederhana (tanpa kotak emas). */
.pour-simple{display:flex;flex-direction:column;align-items:center;gap:18px}
.pour-ring{width:120px;height:120px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:conic-gradient(#0e5c36 0 0%,rgba(255,255,255,.18) 0% 100%)}
.pour-ring-in{width:96px;height:96px;background:#0B5A38;border-radius:50%;display:flex;align-items:center;justify-content:center}
.pour-ring-in b{font-size:20px;color:#fff}
.pour-cap{color:#fff;font-size:14px;opacity:.9}
.pour-wrap::before{content:'';position:absolute;inset:-70%;
  background:conic-gradient(from 0deg,#0a0f0c,#d4af37,#fffbe8,#d4af37,#0a0f0c,#d4af37,#0a0f0c);
  animation:pourSpin 2.4s linear infinite;}
@keyframes pourSpin{to{transform:rotate(360deg)}}
.pour-card{position:relative;border-radius:23px;padding:26px 36px 22px;text-align:center;
  background:linear-gradient(160deg,#12805c,#0B5A38 55%,#073d24);color:#fff;min-width:228px;}
.pour-svg{width:190px;height:auto;display:block;margin:0 auto;}
.pour-stream{animation:pourDash .5s linear infinite;}
@keyframes pourDash{to{stroke-dashoffset:-13;}}
.pour-pct{font-size:34px;font-weight:800;letter-spacing:.02em;margin-top:2px;
  text-shadow:0 2px 10px rgba(0,0,0,.35);font-variant-numeric:tabular-nums;}
.pour-cap{font-size:13px;color:#d7efe2;margin-top:4px;}
/* v2.74: tab CMS Website|Member + form CMS Member. */
.cms-tabs{display:flex;gap:8px;margin:0 0 14px}
.cms-tab{flex:1;border:1px solid var(--line,#e5e0d3);background:#fff;border-radius:12px;
  padding:10px;font-weight:700;font-size:14px;cursor:pointer;color:var(--muted,#8a8474)}
.cms-tab.on{background:var(--green,#0B5A38);border-color:var(--green,#0B5A38);color:#fff}
.cmsm-check{display:flex;align-items:center;gap:8px;font-weight:600;font-size:14px;margin:8px 0;cursor:pointer}
.cmsm-check input{width:18px;height:18px;accent-color:var(--green,#0B5A38)}
.cmsm-svc{margin:8px 0}
.cmsm-svc input{background:#fff}
.cmsm-plat{border:1px solid var(--line,#e5e0d3);border-radius:12px;padding:10px;margin:10px 0}

/* ===== v2.379: Login page FIX TOTAL — kunci scroll di semua level ===== */
html:has(.loginwrap),body:has(.loginwrap){overflow:hidden!important;height:100%!important;height:100dvh!important;position:fixed!important;inset:0!important;overscroll-behavior:none!important}
body:has(.loginwrap) #app{overflow:hidden!important;height:100%!important;height:100dvh!important;position:fixed!important;inset:0!important}
.loginwrap{position:fixed!important;inset:0!important;display:flex!important;align-items:center!important;justify-content:center!important;overflow:hidden!important;overflow-x:hidden!important;touch-action:none!important}
.loginwrap.lt-staff,.loginwrap.lt-admin{position:fixed!important;inset:0!important;display:flex!important;align-items:center!important;justify-content:center!important;overflow:hidden!important;height:100vh!important;height:100dvh!important;touch-action:none!important}
.loginwrap .split{max-height:94vh;max-height:94dvh}

/* ===== v2.376: Login split-screen premium ===== */
.loginwrap .split{display:flex;border-radius:28px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.18);min-height:520px;max-width:min(880px,100vw);margin:0 auto;width:100%;zoom:1.3}
.loginwrap .split-left{flex:1;padding:32px 24px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;position:relative;overflow:hidden;color:#fff}
.loginwrap .split.member .split-left{background:linear-gradient(160deg,#0d3b12,#1b5e20 40%,#2e7d32)}
.loginwrap .split.staf .split-left{background:linear-gradient(160deg,#1b5e20,#2e7d32 50%,#43a047)}
.loginwrap .split-right{flex:1.1;background:#fff;padding:32px 28px;display:flex;flex-direction:column;justify-content:center}
.loginwrap .big-logo{width:110px;height:110px;border-radius:50%;object-fit:cover;border:4px solid #ffeb3b;box-shadow:0 0 0 6px rgba(255,235,59,.25),0 12px 32px rgba(0,0,0,.35);margin-bottom:18px;position:relative;z-index:1;animation:logoPulse 3s ease-in-out infinite}
@keyframes logoPulse{0%,100%{box-shadow:0 0 0 6px rgba(255,235,59,.25),0 12px 32px rgba(0,0,0,.35)}50%{box-shadow:0 0 0 10px rgba(255,235,59,.12),0 0 36px 8px rgba(255,235,59,.4),0 12px 32px rgba(0,0,0,.35)}}
.loginwrap .brand-big{font-family:'Baloo 2',sans-serif;font-size:32px;font-weight:800;line-height:1.1;position:relative;z-index:1}
.loginwrap .brand-big span{color:#ffeb3b}
.loginwrap .tagline{font-size:11px;letter-spacing:3px;font-weight:700;color:rgba(255,255,255,.85);margin-top:8px;position:relative;z-index:1}
.loginwrap .desc{font-size:13px;color:rgba(255,255,255,.75);margin-top:14px;line-height:1.5;position:relative;z-index:1}
.loginwrap .badges{display:flex;gap:8px;margin-top:18px;flex-wrap:wrap;justify-content:center;position:relative;z-index:1}
.loginwrap .badge{background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.3);padding:6px 12px;border-radius:20px;font-size:11px;font-weight:600}
.loginwrap .form-title{font-size:22px;font-weight:800;color:#1b5e20;margin-bottom:4px}
.loginwrap .form-sub{font-size:12px;color:#888;margin-bottom:22px}
.loginwrap .split-right label{display:block;font-size:13px;font-weight:700;color:#333;margin-bottom:14px}
.loginwrap .split-right input{width:100%;padding:14px 16px;border:2px solid #e0e0e0;border-radius:14px;margin-top:6px;font-size:14px}
.loginwrap .split-right input:focus{outline:none;border-color:#2e7d32;box-shadow:0 0 0 4px rgba(46,125,50,.12)}
.loginwrap .split-right .btn{width:100%;padding:15px;background:linear-gradient(135deg,#1b5e20,#2e7d32);color:#fff;border:none;border-radius:14px;font-size:15px;font-weight:800;cursor:pointer;margin-top:6px;box-shadow:0 8px 20px rgba(27,94,32,.3)}
.loginwrap .links{text-align:center;font-size:12px;color:#888;margin-top:16px}
.loginwrap .links a{color:#2e7d32;font-weight:700}
.loginwrap .tabs-mini{display:flex;gap:8px;margin-bottom:20px}
.loginwrap .tab-mini{flex:1;padding:11px;border:2px solid #e0e0e0;border-radius:12px;cursor:pointer;font-weight:700;font-size:13px;background:#fff;color:#666}
.loginwrap .tab-mini.active{background:#1b5e20;color:#fff;border-color:#1b5e20}
@media(max-width:640px){.loginwrap .split{flex-direction:column;min-height:0;max-height:96vh;max-height:96dvh;overflow-y:auto}.loginwrap .split-left{padding:20px 16px;flex:none}.loginwrap .split-right{padding:20px 16px}.loginwrap .big-logo{width:64px;height:64px;margin-bottom:10px}.loginwrap .brand-big{font-size:22px}.loginwrap .desc{display:none}.loginwrap .badges{display:none}}

/* ===== v2.377: Login Staf PREMIUM (sesuai referensi Andre — dark navy) ===== */
.loginwrap.lt-staff,.loginwrap.lt-admin{background:#020d1f;position:relative;overflow-y:auto}
.loginwrap.lt-staff::before,.loginwrap.lt-admin::before{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 40%,rgba(56,189,248,.12) 50%,transparent 60%),linear-gradient(250deg,transparent 60%,rgba(34,197,94,.10) 75%,transparent 85%)}
/* v2.385: Login Portal diperbesar 20% — semua ukuran dikali 1.2, center presisi via flexbox. */
.staff-page{width:100%;max-width:min(480px,100vw);margin:0 auto;padding:12px 18px;zoom:1.3;position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;max-height:100vh;max-height:100dvh;overflow:hidden}
.staff-hero{text-align:center;position:relative;width:100%;margin-bottom:12px}
.hero-left{position:absolute;left:0;top:0;text-align:left;font-family:'Caveat',cursive;font-size:20px;font-weight:700;color:#fff;line-height:1.15;transform:rotate(-4deg)}
.hero-left::after{content:'';display:block;width:70px;height:4px;background:#22c55e;border-radius:2px;margin-top:4px}
.hero-right{position:absolute;right:0;top:0;text-align:right;font-family:'Caveat',cursive;font-size:20px;font-weight:700;color:#fff;line-height:1.15;transform:rotate(3deg)}
.hero-right::after{content:'';display:block;width:70px;height:4px;background:#facc15;border-radius:2px;margin:4px 0 0 auto}
.hero-logo{width:72px;height:72px;border-radius:50%;object-fit:cover;border:3px solid #facc15;box-shadow:0 0 0 4px rgba(250,204,21,.2),0 10px 30px rgba(0,0,0,.5);margin-bottom:8px}
.hero-title{font-family:'Baloo 2',sans-serif;font-size:30px;font-weight:800;color:#fff;line-height:1}
.hero-title span{background:linear-gradient(90deg,#a3e635,#22c55e);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero-sub{font-size:13px;color:#94a3b8;margin-top:6px}
.hero-badges{display:flex;gap:10px;justify-content:center;align-items:center;margin-top:10px;font-size:12px;color:#e2e8f0;font-weight:600}
.hero-badges i{color:#475569;font-style:normal}
.staff-card{width:100%;background:rgba(8,25,55,.85);backdrop-filter:blur(16px);border:1px solid rgba(56,189,248,.4);border-radius:24px;padding:18px 20px;box-shadow:0 0 0 1px rgba(56,189,248,.15),0 0 40px rgba(56,189,248,.25),0 24px 60px rgba(0,0,0,.5);text-align:center}
.staff-card-logo{width:72px;height:72px;border-radius:50%;object-fit:cover;border:3px solid #facc15;box-shadow:0 0 0 4px rgba(250,204,21,.2),0 8px 24px rgba(0,0,0,.4);margin:0 auto 12px;display:block}
.staff-login-title{font-size:30px;font-weight:800;color:#fff}
.staff-login-title span{background:linear-gradient(90deg,#a3e635,#22c55e);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.staff-login-sub{font-size:12px;color:#94a3b8;margin:8px 0 20px;line-height:1.5}
.staff-card .tabs-mini{display:flex;gap:0;background:rgba(255,255,255,.06);border-radius:14px;padding:4px;margin-bottom:18px}
.staff-card .tab-mini{flex:1;padding:12px;border:none;border-radius:10px;cursor:pointer;font-weight:700;font-size:13px;background:transparent;color:#94a3b8}
.staff-card .tab-mini.active{background:linear-gradient(90deg,#16a34a,#22c55e);color:#fff;box-shadow:0 4px 14px rgba(34,197,94,.4)}
.staff-field{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.04);border:1px solid rgba(56,189,248,.35);border-radius:14px;padding:10px 14px;margin-bottom:12px;text-align:left}
.staff-field:focus-within{border-color:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.15)}
.staff-ico{width:38px;height:38px;flex:none;border-radius:50%;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;font-size:18px}
.staff-field div{flex:1}
.staff-field label{display:block;font-size:10px;font-weight:700;color:#cbd5e1;letter-spacing:.5px}
.staff-field input{width:100%;background:transparent;border:none;outline:none;color:#fff;font-size:14px;padding:2px 0}
.staff-field input::placeholder{color:#64748b}
.staff-eye{background:none;border:none;font-size:16px;cursor:pointer;opacity:.6}
.staff-btn{background:linear-gradient(90deg,#16a34a,#22c55e)!important;color:#fff!important;font-size:16px!important;padding:15px!important;border-radius:14px!important;box-shadow:0 8px 24px rgba(34,197,94,.45)!important}
.staff-divider{display:flex;align-items:center;gap:12px;margin:20px 0 14px}
.staff-divider span{flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(56,189,248,.5),transparent)}
.staff-divider i{font-style:normal;font-size:16px}
.staff-note{font-size:12px;color:#cbd5e1}
.staff-card .links{margin-top:12px}
.staff-card .links a{color:#4ade80;font-weight:800;font-size:14px;text-decoration:underline;text-underline-offset:3px}
.staff-features{display:flex;gap:8px;margin-top:12px;width:100%}
@media(max-height:700px){.staff-features{display:none}}
.staff-features div{flex:1;text-align:center}
.staff-features span{display:block;font-size:20px;margin-bottom:4px}
.staff-features b{display:block;font-size:11px;color:#e2e8f0}
.staff-features small{display:block;font-size:10px;color:#64748b;margin-top:2px;line-height:1.3}
.staff-features div+div{border-left:1px solid rgba(255,255,255,.1)}
@media(max-width:640px){
  /* Hero padat +20% */
  .hero-left,.hero-right{display:none}
  .hero-logo{width:52px!important;height:52px!important;margin-bottom:4px!important}
  .hero-title{font-size:24px!important}
  .hero-sub{font-size:11px!important;margin-top:2px!important}
  .hero-badges{display:none!important}
  .staff-hero{margin-bottom:10px!important}
  /* Card padat +20% */
  .staff-card{padding:14px 16px!important}
  .staff-card-logo{width:56px!important;height:56px!important;margin-bottom:8px!important}
  .staff-login-title{font-size:22px!important}
  .staff-login-sub{display:none!important}
  .staff-field{padding:7px 10px!important;margin-bottom:8px!important}
  .staff-field label{font-size:9px!important}
  .staff-field input{font-size:13px!important}
  .staff-ico{width:30px!important;height:30px!important;font-size:14px!important}
  .staff-btn{padding:12px!important;font-size:14px!important}
  .staff-divider{margin:12px 0 10px!important}
  .staff-features{display:none!important}
  .staff-page{padding:10px 17px!important}
}

/* v2.386: Zoom 1.3 untuk Portal & Member — dikurangi di layar pendek agar tidak meluber. */
@media(max-height:800px){.staff-page{zoom:1.15}.loginwrap .split{zoom:1.15}}
@media(max-height:700px){.staff-page{zoom:1}.loginwrap .split{zoom:1}}