:root{
  --bg:#071426;--panel:#0d1d38;--panel2:#11294f;--line:rgba(255,255,255,.11);
  --text:#eef6ff;--muted:#9fb6d8;--blue:#2563eb;--blue2:#60a5fa;--green:#22c55e;
  --red:#ef4444;--yellow:#facc15;--orange:#f97316;--radius:20px;--shadow:0 18px 60px rgba(0,0,0,.32)
}
*{box-sizing:border-box}body{margin:0;font-family:Arial,Helvetica,sans-serif;background:radial-gradient(circle at top left,rgba(37,99,235,.26),transparent 32%),linear-gradient(180deg,#06101f,#0b1730);color:var(--text);min-height:100vh}.hidden{display:none!important}
.login-shell{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}.login-card{width:100%;max-width:460px;background:linear-gradient(180deg,rgba(15,31,61,.98),rgba(8,18,35,.98));border:1px solid var(--line);border-radius:28px;box-shadow:var(--shadow);padding:30px}.brand-logo,.side-logo{background:linear-gradient(135deg,#facc15,#d97706);color:#111827;font-weight:950;display:flex;align-items:center;justify-content:center}.brand-logo{width:82px;height:82px;border-radius:24px;margin:0 auto 18px;font-size:28px}.login-card h1{text-align:center;margin:0 0 8px}.login-card p{text-align:center;color:var(--muted);line-height:1.5;margin-bottom:24px}
label{display:block;font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.7px;color:#b9cbeb;margin:0 0 8px}input,select,textarea{width:100%;border:1px solid rgba(148,163,184,.22);border-radius:14px;padding:13px 14px;background:rgba(255,255,255,.045);color:var(--text);font-size:15px;outline:none}textarea{min-height:120px;resize:vertical}select option{color:#0f172a}input:focus,select:focus,textarea:focus{border-color:rgba(96,165,250,.7);box-shadow:0 0 0 4px rgba(37,99,235,.15)}
.btn,button{border:0;border-radius:14px;padding:12px 15px;font-weight:950;color:white;background:linear-gradient(135deg,#1d4ed8,#60a5fa);cursor:pointer}.btn:disabled,button:disabled{opacity:.6;cursor:not-allowed}.full{width:100%;margin-top:12px}.secondary{background:rgba(255,255,255,.06);border:1px solid var(--line)}.danger{background:linear-gradient(135deg,#dc2626,#f97316)}.success{background:linear-gradient(135deg,#16a34a,#22c55e)}.warning{background:linear-gradient(135deg,#d97706,#facc15);color:#111827}
.alert{display:none;margin-top:12px;border-radius:14px;padding:12px 14px;font-size:13px;line-height:1.45;font-weight:800}.alert.show{display:block}.alert.error{background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.32);color:#fecaca}.alert.success{background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.32);color:#dcfce7}.alert.info{background:rgba(37,99,235,.13);border:1px solid rgba(96,165,250,.28);color:#dbeafe}.alert.warn{background:rgba(250,204,21,.12);border:1px solid rgba(250,204,21,.28);color:#fef3c7}
.app{min-height:100vh;display:grid;grid-template-columns:280px 1fr}.sidebar{position:sticky;top:0;height:100vh;padding:18px;background:rgba(7,18,35,.88);border-right:1px solid var(--line);backdrop-filter:blur(14px);overflow:auto}.side-brand{display:flex;gap:12px;align-items:center;margin-bottom:18px}.side-logo{width:48px;height:48px;border-radius:16px}.side-brand span{display:block;color:var(--muted);font-size:12px;margin-top:4px}.nav{display:grid;gap:8px;margin-bottom:14px}.nav-btn{text-align:left;background:rgba(255,255,255,.045);border:1px solid transparent;color:#dbeafe}.nav-btn.active{background:linear-gradient(135deg,rgba(37,99,235,.9),rgba(96,165,250,.72));border-color:rgba(255,255,255,.16)}
.main{padding:20px;min-width:0}.topbar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:18px;background:rgba(13,29,56,.72);border:1px solid var(--line);border-radius:22px;padding:16px 18px;box-shadow:0 10px 35px rgba(0,0,0,.18)}.topbar h2{margin:0 0 4px}.topbar p{margin:0;color:var(--muted)}.mobile-menu-btn{display:none}.top-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}.top-actions .btn{margin-top:0}.pill{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:999px;padding:8px 12px;color:#dbeafe;background:rgba(255,255,255,.05);font-size:12px;font-weight:900}
.page{display:none}.page.active{display:block}.grid{display:grid;gap:16px}.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}.grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}.card{background:linear-gradient(180deg,rgba(15,31,61,.96),rgba(10,23,45,.96));border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow);padding:18px}.card h3{margin:0 0 8px}.card .muted,.muted{color:var(--muted);font-size:13px;line-height:1.5}.form-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:12px}.form-row.three{grid-template-columns:repeat(3,minmax(0,1fr))}.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}.actions .btn,.actions button{margin-top:0}.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:18px}table{width:100%;border-collapse:collapse;min-width:760px}th,td{padding:11px 12px;border-bottom:1px solid var(--line);text-align:left;font-size:13px}th{color:#c9ddff;background:rgba(255,255,255,.055);position:sticky;top:0}td{color:#eef6ff}.empty{color:var(--muted);padding:16px;text-align:center}.preview{display:none;margin-top:12px;border:1px dashed rgba(96,165,250,.35);border-radius:16px;padding:12px;color:#dbeafe;background:rgba(37,99,235,.08);font-size:13px;line-height:1.55}.preview.show{display:block}.mini-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.mini-card{padding:12px;border-radius:16px;background:rgba(255,255,255,.055);border:1px solid var(--line)}.mini-card span{display:block;color:var(--muted);font-size:11px;text-transform:uppercase;font-weight:900}.mini-card strong{display:block;margin-top:5px;font-size:17px}
.loading{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;z-index:80;padding:20px}.loading-box{width:min(360px,100%);background:#08172d;border:1px solid var(--line);border-radius:24px;padding:24px;text-align:center;box-shadow:var(--shadow)}.loading-box strong,.loading-box span{display:block}.loading-box span{color:var(--muted);margin-top:8px}.spinner{width:42px;height:42px;border-radius:50%;border:4px solid rgba(255,255,255,.14);border-top-color:#60a5fa;margin:0 auto 14px;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.toast-box{position:fixed;right:18px;bottom:18px;display:grid;gap:10px;z-index:90}.toast{max-width:360px;border-radius:16px;padding:12px 14px;background:#0d1d38;border:1px solid var(--line);box-shadow:var(--shadow);font-size:13px}.toast.success{border-color:rgba(34,197,94,.36)}.toast.error{border-color:rgba(239,68,68,.4)}.toast.info{border-color:rgba(96,165,250,.4)}
@media(max-width:900px){.app{grid-template-columns:1fr}.sidebar{position:fixed;z-index:70;left:0;top:0;bottom:0;width:285px;transform:translateX(-105%);transition:.2s}.sidebar.open{transform:translateX(0)}.main{padding:12px}.topbar{border-radius:18px}.mobile-menu-btn{display:inline-flex}.grid.two,.grid.three,.form-row,.form-row.three,.mini-cards{grid-template-columns:1fr}table{min-width:640px}.top-actions{display:none}}

/* =====================================================
   REBUILD V2 - PRESERVE INPUT LOGIC UI
   ===================================================== */
.input-card .panel-head{
  display:flex;
  justify-content:space-between;
  gap:14px;
  align-items:flex-start;
  margin-bottom:16px;
}
.small{padding:8px 11px;font-size:12px;border-radius:10px}
.quick-seller-row{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 14px}
.quick-seller-row button{border:1px solid #cbd5e1;background:#f8fafc;color:#0f172a;border-radius:999px;padding:8px 12px;font-weight:800;cursor:pointer}
.quick-seller-row button:hover{background:#e0f2fe;border-color:#38bdf8}
.enter-helper{margin:10px 0 12px;padding:12px 14px;border-radius:14px;background:linear-gradient(135deg,#0f3b74,#0c4a6e);color:#e0f2fe;font-size:13px;line-height:1.5;box-shadow:0 10px 24px rgba(15,59,116,.18)}
.enter-helper span{color:#bfdbfe;font-weight:700}
.proof-box{margin-top:14px;padding:14px;border:1px dashed #93c5fd;border-radius:16px;background:#f8fbff}
.proof-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:10px 0}
.proof-preview{display:none;margin-top:10px;border-radius:14px;overflow:hidden;border:1px solid #dbeafe;background:white;padding:10px}
.proof-preview img{display:block;width:100%;max-height:360px;object-fit:contain;border-radius:10px;background:#f8fafc}
.proof-preview-name{margin-top:8px;font-size:12px;font-weight:800;color:#334155;word-break:break-all}
.gold-parse-preview{display:none;margin:10px 0;padding:12px;border-radius:14px;background:#f8fafc;border:1px solid #e2e8f0}
.gold-parse-preview.show{display:block}
.gold-parse-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.gold-parse-label{font-size:11px;text-transform:uppercase;color:#64748b;font-weight:900;letter-spacing:.04em}
.gold-parse-value{font-size:14px;color:#0f172a;font-weight:900;margin-top:3px;word-break:break-word}
.gold-parse-warning{margin-top:10px;color:#334155;font-weight:700;font-size:13px}
.mini-card{display:none;margin:10px 0;padding:12px;border-radius:16px;border:1px solid #e2e8f0;background:#f8fafc}
.mini-card.show{display:block}
.mini-card.danger{border-color:#fecaca;background:#fff1f2}
.mini-card.due{border-color:#fca5a5;background:#fef2f2}
.mini-card.available{border-color:#86efac;background:#ecfdf5}
.mini-card.stock-safe{border-color:#bae6fd;background:#f0f9ff}
.mini-card.snoozed{border-color:#fde68a;background:#fffbeb}
.mini-main{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.mini-label{font-size:11px;color:#64748b;text-transform:uppercase;font-weight:900;letter-spacing:.04em}
.mini-value{font-size:14px;color:#0f172a;font-weight:900;margin-top:3px;word-break:break-word}
.mini-name{color:#075985}
.duplicate-warning{display:none;margin:10px 0;padding:10px 12px;border-radius:12px;background:#fffbeb;border:1px solid #fde68a;color:#92400e;font-weight:800;font-size:13px}
.duplicate-warning.show{display:block}
.last-input-card{margin-top:14px}
.finance-section-title{margin:10px 0 14px;padding:12px 14px;border-radius:14px;background:#eff6ff;border:1px solid #bfdbfe;color:#1d4ed8;font-weight:900;text-align:center}
.finance-section-title.red{background:#fff1f2;border-color:#fecaca;color:#be123c}
.danger-preview{background:#fff1f2!important;border-color:#fecaca!important;color:#be123c!important;font-weight:900}
@media(max-width:760px){
  .input-card .panel-head{display:block}
  .proof-actions{grid-template-columns:1fr}
  .gold-parse-grid,.mini-main{grid-template-columns:1fr}
  .quick-seller-row button{flex:1 1 64px}
}


/* PATCH V5 - Seller balance logic colors
   Sheet minus  = HAS BALANCE, display green without minus.
   Sheet plus   = DUE / DEBT, display red with minus. */
.mini-card.available .mini-value,.mini-card.available .mini-name{color:#047857}
.mini-card.due .mini-value,.mini-card.due .mini-name{color:#b91c1c}
.ledger-badge,.ledger-status{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:5px 10px;font-weight:900;font-size:12px;white-space:nowrap}
.ledger-badge.available,.ledger-status.available{background:#dcfce7;color:#047857;border:1px solid #86efac}
.ledger-badge.due,.ledger-status.due{background:#fee2e2;color:#b91c1c;border:1px solid #fca5a5}
.ledger-badge.clear,.ledger-status.clear{background:#f1f5f9;color:#334155;border:1px solid #cbd5e1}
.seller-balance-row.available td{background:rgba(34,197,94,.08)}
.seller-balance-row.due td{background:rgba(239,68,68,.08)}


/* =====================================================
   PATCH V6 - Balance card color only
   Punya saldo / HAS BALANCE = green card
   Berhutang / DUE-DEBT = red card
   ===================================================== */
.mini-card.available,
.mini-card.has-balance,
.mini-card.balance-ok{
  background:linear-gradient(135deg,#dcfce7,#bbf7d0) !important;
  border-color:#22c55e !important;
  color:#064e3b !important;
}
.mini-card.available .mini-label,
.mini-card.has-balance .mini-label,
.mini-card.balance-ok .mini-label{
  color:#047857 !important;
}
.mini-card.available .mini-value,
.mini-card.available .mini-name,
.mini-card.has-balance .mini-value,
.mini-card.has-balance .mini-name,
.mini-card.balance-ok .mini-value,
.mini-card.balance-ok .mini-name{
  color:#064e3b !important;
}

.mini-card.due,
.mini-card.debt,
.mini-card.no-balance{
  background:linear-gradient(135deg,#fee2e2,#fecaca) !important;
  border-color:#ef4444 !important;
  color:#7f1d1d !important;
}
.mini-card.due .mini-label,
.mini-card.debt .mini-label,
.mini-card.no-balance .mini-label{
  color:#b91c1c !important;
}
.mini-card.due .mini-value,
.mini-card.due .mini-name,
.mini-card.debt .mini-value,
.mini-card.debt .mini-name,
.mini-card.no-balance .mini-value,
.mini-card.no-balance .mini-name{
  color:#7f1d1d !important;
}

.ledger-badge.available,
.ledger-status.available,
.ledger-badge.has-balance,
.ledger-status.has-balance{
  background:#dcfce7 !important;
  color:#047857 !important;
  border-color:#22c55e !important;
}
.ledger-badge.due,
.ledger-status.due,
.ledger-badge.debt,
.ledger-status.debt{
  background:#fee2e2 !important;
  color:#b91c1c !important;
  border-color:#ef4444 !important;
}

/* =====================================================
   PATCH V7 - Debt red stronger + dark proof box
   Request:
   - Minus / DUE / DEBT must be clearly red
   - Proof input area should not be too bright/contrast
   ===================================================== */

/* DUE / DEBT card: make the debt/minus value clearly red */
.mini-card.due,
.mini-card.debt,
.mini-card.no-balance{
  background:linear-gradient(135deg,rgba(127,29,29,.98),rgba(185,28,28,.92)) !important;
  border:1px solid rgba(248,113,113,.9) !important;
  box-shadow:0 10px 26px rgba(185,28,28,.22) !important;
  color:#fee2e2 !important;
}
.mini-card.due .mini-label,
.mini-card.debt .mini-label,
.mini-card.no-balance .mini-label{
  color:#fecaca !important;
}
.mini-card.due .mini-value,
.mini-card.due .mini-name,
.mini-card.due .note,
.mini-card.debt .mini-value,
.mini-card.debt .mini-name,
.mini-card.debt .note,
.mini-card.no-balance .mini-value,
.mini-card.no-balance .mini-name,
.mini-card.no-balance .note{
  color:#ffffff !important;
  text-shadow:0 1px 1px rgba(0,0,0,.18) !important;
}
.mini-card.due .mini-value:nth-child(n),
.mini-card.debt .mini-value:nth-child(n),
.mini-card.no-balance .mini-value:nth-child(n){
  font-weight:950 !important;
}

/* HAS BALANCE card stays green, but a little darker/premium */
.mini-card.available,
.mini-card.has-balance,
.mini-card.balance-ok{
  background:linear-gradient(135deg,rgba(6,95,70,.96),rgba(5,150,105,.9)) !important;
  border:1px solid rgba(52,211,153,.75) !important;
  box-shadow:0 10px 26px rgba(5,150,105,.18) !important;
  color:#dcfce7 !important;
}
.mini-card.available .mini-label,
.mini-card.has-balance .mini-label,
.mini-card.balance-ok .mini-label{
  color:#bbf7d0 !important;
}
.mini-card.available .mini-value,
.mini-card.available .mini-name,
.mini-card.available .note,
.mini-card.has-balance .mini-value,
.mini-card.has-balance .mini-name,
.mini-card.has-balance .note,
.mini-card.balance-ok .mini-value,
.mini-card.balance-ok .mini-name,
.mini-card.balance-ok .note{
  color:#ffffff !important;
}

/* Proof area: dark theme, no bright white block */
.proof-box{
  background:linear-gradient(180deg,rgba(11,26,50,.98),rgba(8,20,39,.98)) !important;
  border:1px dashed rgba(96,165,250,.45) !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.03),0 10px 26px rgba(0,0,0,.16) !important;
  color:#dbeafe !important;
}
.proof-box label,
.proof-box .mini-label{
  color:#b9cbeb !important;
}
.proof-box input[type="file"],
.proof-box input[type="text"],
.proof-box input:not([type]),
.proof-box textarea{
  background:rgba(255,255,255,.045) !important;
  border:1px solid rgba(148,163,184,.26) !important;
  color:#eef6ff !important;
}
.proof-box input::placeholder,
.proof-box textarea::placeholder{
  color:rgba(219,234,254,.62) !important;
}
.proof-box .secondary{
  background:rgba(255,255,255,.07) !important;
  border:1px solid rgba(148,163,184,.22) !important;
  color:#e0f2fe !important;
}
.proof-box .secondary:hover{
  background:rgba(96,165,250,.16) !important;
  border-color:rgba(96,165,250,.38) !important;
}
.proof-preview{
  background:rgba(2,6,23,.55) !important;
  border-color:rgba(96,165,250,.3) !important;
}
.proof-preview img{
  background:rgba(15,23,42,.75) !important;
}
.proof-preview-name{
  color:#dbeafe !important;
}

@media(max-width:760px){
  .mini-card.due,.mini-card.debt,.mini-card.no-balance,
  .mini-card.available,.mini-card.has-balance,.mini-card.balance-ok{
    border-width:1px !important;
  }
}

/* =====================================================
   PATCH V8 - Input Gold Layout
   - Force Boss | Seller | Akun Gold as 3 cards
   - Move Alur Cepat below Input Order
   - Remove right-side split layout for Input Gold
===================================================== */
.input-gold-layout{
  display:block !important;
  width:100%;
  max-width:880px;
}
.input-gold-main-card{
  width:100%;
}
.top-select-cards{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:12px !important;
  margin:14px 0 12px !important;
}
.top-select-card{
  background:linear-gradient(180deg,rgba(24,44,78,.96),rgba(14,31,58,.96));
  border:1px solid rgba(148,163,184,.20);
  border-radius:16px;
  padding:12px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 8px 20px rgba(0,0,0,.12);
}
.top-select-card label{
  display:block;
  margin-bottom:8px;
  color:#b9cbeb;
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-weight:900;
}
.top-select-card select{
  margin-top:0 !important;
  background:rgba(255,255,255,.045) !important;
  border-color:rgba(148,163,184,.28) !important;
  min-height:44px;
}
.quick-flow-box{
  display:block;
  margin:12px 0 14px;
  padding:13px 14px;
  border-radius:16px;
  border:1px dashed rgba(96,165,250,.38);
  background:linear-gradient(180deg,rgba(14,45,84,.92),rgba(9,35,68,.90));
  color:#dbeafe;
}
.quick-flow-box h3{
  margin:0 0 8px;
  font-size:16px;
}
.quick-flow-text{
  color:#e0f2fe;
  font-size:13px;
  line-height:1.55;
}
.quick-flow-box .last-input-card .preview.show{
  margin-top:10px;
  background:rgba(2,6,23,.28);
}
@media(max-width:900px){
  .input-gold-layout{max-width:none;}
  .top-select-cards{grid-template-columns:1fr !important;}
}

/* =====================================================
   PATCH V10 - Floating Result Input Gold
   - Fullscreen overlay menimpa sidebar/menu kiri
   - Summary card dipaksa 1 row
   - Proof preview tetap tampil besar
===================================================== */
.gold-floating-result-overlay{
  position:fixed;
  inset:0;
  z-index:99999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:22px;
  background:rgba(2,6,23,.72);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.gold-floating-result-backdrop{
  position:absolute;
  inset:0;
  background:radial-gradient(circle at top left,rgba(59,130,246,.18),transparent 38%),rgba(2,6,23,.50);
}
.gold-floating-result-card{
  position:relative;
  width:min(1180px,96vw);
  max-height:94vh;
  overflow:auto;
  border-radius:24px;
  border:1px solid rgba(148,163,184,.28);
  background:linear-gradient(180deg,rgba(11,26,50,.98),rgba(6,18,36,.98));
  box-shadow:0 30px 90px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06);
  padding:18px;
  color:#e5f1ff;
}
.gold-floating-result-card.has-balance{
  border-color:rgba(34,197,94,.42);
  box-shadow:0 30px 90px rgba(0,0,0,.55),0 0 0 1px rgba(34,197,94,.12) inset;
}
.gold-floating-result-card.debt,
.gold-floating-result-card.due{
  border-color:rgba(248,113,113,.52);
  box-shadow:0 30px 90px rgba(0,0,0,.55),0 0 0 1px rgba(248,113,113,.18) inset;
}
.gold-floating-result-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
  margin-bottom:14px;
}
.gold-floating-kicker{
  color:#93c5fd;
  font-size:12px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.11em;
  margin-bottom:4px;
}
.gold-floating-result-head h2{
  margin:0;
  font-size:26px;
  line-height:1.1;
  color:#f8fafc;
}
.gold-result-close{
  width:42px;
  height:42px;
  border-radius:14px;
  border:1px solid rgba(148,163,184,.25);
  background:rgba(255,255,255,.08);
  color:#fff;
  font-size:26px;
  font-weight:900;
  cursor:pointer;
}
.gold-result-row-wrap{
  width:100%;
  overflow-x:auto;
  padding-bottom:4px;
}
.gold-result-row{
  display:grid;
  grid-template-columns:1fr 1.45fr 1fr 1fr 1.55fr;
  gap:10px;
  min-width:920px;
}
.gold-result-item{
  min-height:92px;
  border-radius:18px;
  background:linear-gradient(180deg,rgba(30,49,83,.92),rgba(15,33,63,.92));
  border:1px solid rgba(148,163,184,.24);
  padding:13px 14px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:5px;
}
.gold-result-item span{
  font-size:11px;
  line-height:1;
  text-transform:uppercase;
  letter-spacing:.11em;
  color:#a9bee0;
  font-weight:900;
}
.gold-result-item b{
  font-size:24px;
  line-height:1.05;
  color:#ffffff;
  font-weight:950;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.gold-result-item em{
  font-style:normal;
  font-size:13px;
  color:#bfdbfe;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.gold-result-item.balance.has-balance{
  background:linear-gradient(135deg,#064e3b,#047857 58%,#065f46);
  border-color:rgba(74,222,128,.42);
}
.gold-result-item.balance.debt,
.gold-result-item.balance.due{
  background:linear-gradient(135deg,#7f1d1d,#b91c1c 58%,#991b1b);
  border-color:rgba(248,113,113,.48);
}
.gold-result-item.balance.neutral{
  background:linear-gradient(135deg,#334155,#475569);
}
.gold-result-warning{
  margin-top:12px;
  padding:10px 12px;
  border-radius:14px;
  border:1px dashed rgba(251,191,36,.35);
  background:rgba(251,191,36,.10);
  color:#fde68a;
  font-size:13px;
}
.gold-result-proof-title{
  margin:16px 0 8px;
  font-size:12px;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:#b9cbeb;
}
.gold-result-proof-box{
  border-radius:20px;
  border:1px solid rgba(96,165,250,.32);
  background:rgba(2,6,23,.50);
  padding:12px;
  min-height:220px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.gold-result-proof-html{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
}
.gold-result-proof-html img,
.gold-result-proof-box img{
  display:block;
  max-width:100%;
  max-height:58vh;
  object-fit:contain;
  border-radius:14px;
  box-shadow:0 14px 40px rgba(0,0,0,.35);
}
.gold-result-proof-html .proof-preview-name,
.gold-result-no-proof{
  color:#cbd5e1;
  font-weight:800;
}
.gold-result-proof-link{
  color:#93c5fd;
  font-weight:900;
  text-decoration:none;
  border:1px solid rgba(96,165,250,.36);
  border-radius:14px;
  padding:12px 16px;
  background:rgba(59,130,246,.12);
}
.gold-result-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:14px;
  flex-wrap:wrap;
}
@media(max-width:760px){
  .gold-floating-result-overlay{padding:10px;align-items:flex-start;}
  .gold-floating-result-card{width:100%;max-height:96vh;border-radius:18px;padding:12px;}
  .gold-result-row{min-width:820px;gap:8px;}
  .gold-result-item{min-height:82px;padding:11px;}
  .gold-result-item b{font-size:19px;}
  .gold-result-proof-box{min-height:180px;}
  .gold-result-proof-html img,.gold-result-proof-box img{max-height:48vh;}
}


/* =====================================================
   V13 - Input Gold Submit Guard Floating Prompt
   ===================================================== */
.gold-salary-confirm-overlay{
  position:fixed;
  inset:0;
  z-index:100000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}
.gold-salary-confirm-backdrop{
  position:absolute;
  inset:0;
  background:rgba(2, 6, 23, .82);
  backdrop-filter:blur(10px);
}
.gold-salary-confirm-card{
  position:relative;
  width:min(760px, 96vw);
  border:1px solid rgba(248,113,113,.45);
  background:linear-gradient(145deg, #111827 0%, #1f1115 48%, #450a0a 100%);
  color:#fff;
  border-radius:24px;
  box-shadow:0 30px 90px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.04) inset;
  padding:24px;
}
.gold-salary-confirm-badge{
  display:inline-flex;
  align-items:center;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(248,113,113,.16);
  border:1px solid rgba(248,113,113,.38);
  color:#fecaca;
  font-size:12px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin-bottom:12px;
}
.gold-salary-confirm-card h2{
  margin:0 0 8px;
  font-size:28px;
  line-height:1.1;
  letter-spacing:.02em;
}
.gold-salary-confirm-text{
  margin:0 0 18px;
  color:#ffe4e6;
  font-size:15px;
  line-height:1.55;
}
.gold-salary-confirm-grid{
  display:grid;
  grid-template-columns:repeat(5, minmax(120px, 1fr));
  gap:10px;
  overflow-x:auto;
  padding-bottom:4px;
}
.gold-salary-confirm-grid > div{
  min-width:120px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(15,23,42,.62);
  border-radius:16px;
  padding:12px;
}
.gold-salary-confirm-grid span{
  display:block;
  color:#cbd5e1;
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.08em;
  margin-bottom:6px;
}
.gold-salary-confirm-grid b{
  display:block;
  font-size:16px;
  color:#fff;
  white-space:nowrap;
}
.gold-salary-confirm-grid .danger{
  border-color:rgba(248,113,113,.55);
  background:rgba(127,29,29,.55);
}
.gold-salary-confirm-note{
  margin-top:16px;
  padding:12px 14px;
  border-radius:16px;
  background:rgba(251,191,36,.12);
  border:1px solid rgba(251,191,36,.28);
  color:#fde68a;
  font-size:13px;
  line-height:1.45;
}
.gold-salary-confirm-actions{
  display:flex;
  justify-content:flex-end;
  gap:12px;
  flex-wrap:wrap;
  margin-top:18px;
}
.gold-salary-confirm-actions button{
  border:0;
  cursor:pointer;
  border-radius:14px;
  padding:13px 16px;
  font-weight:900;
  color:#fff;
}
.gold-salary-confirm-actions .secondary{
  background:#1e293b;
  border:1px solid rgba(255,255,255,.16);
}
.gold-salary-confirm-actions .danger{
  background:linear-gradient(135deg, #dc2626, #f97316);
  box-shadow:0 12px 30px rgba(220,38,38,.28);
}
@media (max-width: 720px){
  .gold-salary-confirm-overlay{padding:12px; align-items:flex-end;}
  .gold-salary-confirm-card{padding:18px; border-radius:22px;}
  .gold-salary-confirm-card h2{font-size:22px;}
  .gold-salary-confirm-grid{grid-template-columns:repeat(5, 132px);}
  .gold-salary-confirm-actions{display:grid; grid-template-columns:1fr;}
}

/* =====================================================
   V16 - Warning Sound Button / Prompt polish
   ===================================================== */
.panel-actions-inline{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:wrap;
}
.gold-salary-sound-test{
  position:absolute;
  top:18px;
  right:18px;
  border:1px solid rgba(251,191,36,.55);
  background:linear-gradient(135deg,#f59e0b,#f97316);
  color:#111827;
  font-weight:900;
  border-radius:12px;
  padding:9px 13px;
  cursor:pointer;
  box-shadow:0 10px 24px rgba(245,158,11,.22);
}
.gold-salary-sound-test:hover{
  filter:brightness(1.08);
  transform:translateY(-1px);
}
.gold-salary-confirm-card{
  position:relative;
}
@media (max-width: 720px){
  .panel-actions-inline{
    width:100%;
    justify-content:stretch;
  }
  .panel-actions-inline .small{
    flex:1;
  }
  .gold-salary-sound-test{
    position:static;
    width:100%;
    margin-bottom:10px;
  }
}

/* =====================================================
   V17 - Input Uang Gold compact layout + balance calculator
   ===================================================== */
.money-gold-page{
  max-width: 1160px;
}
.compact-head{
  margin-bottom: 18px;
}
.money-gold-top-row{
  display:grid;
  grid-template-columns: minmax(180px, 1fr) minmax(160px, .8fr) minmax(260px, 1.25fr);
  gap:14px;
  align-items:end;
}
.money-gold-field label,
.money-gold-total-wrap label{
  display:block;
  margin-bottom:8px;
}
.money-seller-chips{
  margin:14px 0 16px;
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.money-seller-chips .seller-chip,
.seller-chip{
  border:1px solid rgba(148,163,184,.32);
  background:linear-gradient(180deg, #f8fafc, #e5e7eb);
  color:#020617;
  border-radius:999px;
  padding:9px 16px;
  font-size:13px;
  font-weight:900;
  letter-spacing:.02em;
  cursor:pointer;
  box-shadow:0 8px 18px rgba(2,6,23,.18);
}
.money-seller-chips .seller-chip:hover,
.seller-chip:hover{
  transform:translateY(-1px);
  filter:brightness(1.03);
}
.money-seller-chips .seller-chip.active,
.seller-chip.active{
  background:linear-gradient(135deg, #fbbf24, #f97316);
  color:#111827;
  border-color:rgba(251,191,36,.75);
}
.money-gold-total-wrap{
  max-width: 360px;
  margin-bottom: 10px;
}
.money-balance-note{
  display:none;
  margin:10px 0 14px;
  border:1px solid rgba(251,191,36,.42);
  background:linear-gradient(135deg, #fff7ed 0%, #fef3c7 55%, #ffedd5 100%);
  color:#1f2937;
  border-radius:18px;
  padding:14px;
  box-shadow:0 14px 32px rgba(2,6,23,.18);
}
.money-balance-note.show{
  display:block;
}
.money-balance-title{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:#92400e;
  font-weight:1000;
  margin-bottom:10px;
}
.money-balance-grid{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr 1.1fr;
  gap:10px;
}
.money-balance-grid > div{
  border:1px solid rgba(146,64,14,.18);
  background:rgba(255,255,255,.72);
  border-radius:14px;
  padding:11px 12px;
  min-width:0;
}
.money-balance-grid span{
  display:block;
  font-size:10px;
  font-weight:1000;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:#6b7280;
  margin-bottom:5px;
}
.money-balance-grid b{
  display:block;
  color:#111827;
  font-size:16px;
  line-height:1.1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.money-balance-grid em{
  display:block;
  margin-top:4px;
  font-style:normal;
  font-size:11px;
  color:#64748b;
  font-weight:800;
}
.money-balance-grid .after.has-balance{
  background:linear-gradient(135deg, #dcfce7, #bbf7d0);
  border-color:rgba(22,163,74,.35);
}
.money-balance-grid .after.has-balance b,
.money-balance-grid .after.has-balance em{
  color:#065f46;
}
.money-balance-grid .after.debt{
  background:linear-gradient(135deg, #fee2e2, #fecaca);
  border-color:rgba(220,38,38,.38);
}
.money-balance-grid .after.debt b,
.money-balance-grid .after.debt em{
  color:#991b1b;
}
.money-balance-grid .after.clear{
  background:linear-gradient(135deg, #e0f2fe, #dbeafe);
  border-color:rgba(37,99,235,.28);
}
.money-balance-note p{
  margin:10px 2px 0;
  color:#78350f;
  font-size:12px;
  font-weight:800;
}
.money-proof-box{
  margin-top:14px;
}
@media (max-width: 920px){
  .money-gold-top-row{
    grid-template-columns:1fr;
  }
  .money-gold-total-wrap{
    max-width:none;
  }
  .money-balance-grid{
    grid-template-columns: repeat(4, minmax(150px, 1fr));
    overflow-x:auto;
    padding-bottom:4px;
  }
}

/* =====================================================
   PATCH V18 - Input Pack Mapping + Profit Guard
   ===================================================== */
.pack-input-card .pack-map-box{
  margin: 12px 0 14px;
  padding: 12px;
  border: 1px dashed rgba(96,165,250,.35);
  border-radius: 16px;
  background: rgba(37,99,235,.07);
}
.pack-map-title{
  font-size: 11px;
  color: #bfdbfe;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 950;
  margin-bottom: 8px;
}
.pack-map-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.pack-map-actions button{
  border-radius: 999px;
  padding: 8px 12px;
  background:#f8fafc;
  color:#0f172a;
  border:1px solid #cbd5e1;
  font-size:12px;
  font-weight:950;
}
.pack-map-actions button:hover{
  background:#e0f2fe;
  border-color:#38bdf8;
}
.pack-profit-card.cream{
  margin: 12px 0 14px;
  padding: 14px;
  border-radius: 18px;
  background: linear-gradient(135deg,#fff7ed,#fffbeb);
  border: 1px solid #fed7aa;
  color: #431407;
  box-shadow: 0 12px 26px rgba(0,0,0,.16);
}
.pack-profit-title{
  font-size: 13px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #92400e;
  margin-bottom: 10px;
}
.pack-profit-grid{
  display:grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap:10px;
}
.pack-profit-grid div{
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(146,64,14,.15);
}
.pack-profit-grid span{
  display:block;
  font-size: 11px;
  font-weight: 950;
  color: #92400e;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.pack-profit-grid strong{
  display:block;
  margin-top: 4px;
  font-size: 17px;
  color:#111827;
}
.pack-profit-note{
  margin-top: 10px;
  font-weight: 850;
  font-size: 13px;
  color:#78350f;
}
.pack-profit-card.profit-good{
  background: linear-gradient(135deg,#ecfdf5,#f0fdf4);
  border-color:#86efac;
}
.pack-profit-card.profit-good .pack-profit-title,
.pack-profit-card.profit-good .pack-profit-note,
.pack-profit-card.profit-good .pack-profit-grid span{color:#047857;}
.pack-profit-card.profit-loss{
  background: linear-gradient(135deg,#fef2f2,#fff1f2);
  border-color:#fca5a5;
}
.pack-profit-card.profit-loss .pack-profit-title,
.pack-profit-card.profit-loss .pack-profit-note,
.pack-profit-card.profit-loss .pack-profit-grid span{color:#b91c1c;}
.pack-profit-card.profit-loss #packProfitValue{color:#dc2626;}
.pack-loss-overlay{
  position:fixed;
  inset:0;
  z-index:99999;
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(2,6,23,.82);
  backdrop-filter:blur(10px);
}
.pack-loss-overlay.show{display:flex;}
.pack-loss-card{
  width:min(560px,100%);
  background:linear-gradient(180deg,#7f1d1d,#450a0a);
  border:1px solid rgba(248,113,113,.65);
  color:#fff;
  border-radius:26px;
  padding:24px;
  box-shadow:0 30px 90px rgba(0,0,0,.55);
  text-align:center;
}
.pack-loss-icon{
  width:58px;
  height:58px;
  border-radius:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 12px;
  font-size:30px;
  background:rgba(254,226,226,.14);
  border:1px solid rgba(254,226,226,.28);
}
.pack-loss-card h2{margin:0 0 8px;font-size:24px;}
.pack-loss-card p{margin:0 0 16px;color:#fee2e2;line-height:1.5;}
.pack-loss-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:11px 12px;
  margin-top:8px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.1);
  border-radius:14px;
  text-align:left;
}
.pack-loss-row span{color:#fecaca;font-weight:900;}
.pack-loss-row b{font-size:18px;}
.pack-loss-row.danger b{color:#fecaca;}
.pack-loss-card button{margin-top:16px;width:100%;}
@media(max-width:760px){
  .pack-profit-grid{grid-template-columns:1fr;}
  .pack-map-actions button{flex:1 1 80px;}
}

/* =====================================================
   PATCH V19 - Input Pack Default, Multi Currency, Cream Detail
   ===================================================== */
.pack-detail-cream-row{
  margin: 12px 0 14px;
  padding: 14px;
  border-radius: 18px;
  background: linear-gradient(135deg,#fff7ed,#fffbeb);
  border: 1px solid #fed7aa;
  color:#431407;
  box-shadow: 0 10px 24px rgba(0,0,0,.14);
}
.pack-detail-cream-row label{
  display:block;
  color:#92400e;
  font-size:12px;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.07em;
  margin-bottom:8px;
}
.pack-detail-cream-row input{
  width:100%;
  background:rgba(255,255,255,.84)!important;
  border:1px solid rgba(146,64,14,.22)!important;
  color:#111827!important;
  border-radius:14px;
  padding:13px 14px;
  font-weight:850;
}
.pack-detail-cream-row input::placeholder{color:#9a3412!important;opacity:.65;}
.pack-detail-cream-row small{
  display:block;
  margin-top:8px;
  color:#78350f;
  font-weight:800;
  line-height:1.45;
}
.pack-profit-card.cream,
.pack-profit-card.cream.profit-good,
.pack-profit-card.cream.profit-empty{
  background: linear-gradient(135deg,#fff7ed,#fffbeb)!important;
  border-color:#fed7aa!important;
  color:#431407!important;
}
.pack-profit-card.cream.profit-good .pack-profit-title,
.pack-profit-card.cream.profit-good .pack-profit-grid span{
  color:#92400e!important;
}
.pack-profit-card.cream.profit-good .pack-profit-note{
  color:#047857!important;
}
.pack-profit-card.cream.profit-loss{
  background:linear-gradient(135deg,#fff1f2,#ffe4e6)!important;
  border-color:#fb7185!important;
}
.pack-profit-card.cream.profit-loss .pack-profit-title,
.pack-profit-card.cream.profit-loss .pack-profit-note,
.pack-profit-card.cream.profit-loss .pack-profit-grid span{
  color:#b91c1c!important;
}
.pack-profit-card.cream .pack-profit-grid div{
  background:rgba(255,255,255,.72)!important;
  border:1px solid rgba(146,64,14,.16)!important;
}
.pack-map-box .pack-map-title::after{
  content:'  •  ADD BALANCE / USE BALANCE';
  color:#fcd34d;
  font-weight:950;
}
@media (max-width: 720px){
  .pack-detail-cream-row{padding:12px;border-radius:16px;}
}

/* =====================================================
   PATCH V20 - Input Pack Detail Dropdown + Cream Calc
   ===================================================== */
.pack-input-card .pack-map-box{display:none!important;}
.pack-input-card select{
  width:100%;
  min-height:48px;
  border-radius:14px;
  border:1px solid rgba(148,163,184,.24);
  background:#17243a;
  color:#fff;
  padding:12px 14px;
  font-weight:850;
  outline:none;
  appearance:auto;
}
.pack-input-card select:focus{
  border-color:#60a5fa;
  box-shadow:0 0 0 3px rgba(59,130,246,.18);
}
.pack-detail-cream-row.compact{
  margin: 12px 0 14px;
  padding: 10px;
  border-radius: 16px;
  background: linear-gradient(135deg,#fff7ed,#fef3c7)!important;
  border: 1px solid #fed7aa!important;
  box-shadow: 0 10px 24px rgba(0,0,0,.14);
}
.pack-detail-cream-row.compact input{
  min-height: 52px;
  background: rgba(255,255,255,.92)!important;
  border:1px solid rgba(146,64,14,.22)!important;
  color:#111827!important;
  font-size:15px;
  font-weight:900;
}
.pack-detail-cream-row.compact input::placeholder{
  color:#9a3412!important;
  opacity:.72;
}
.pack-profit-card.cream,
.pack-profit-card.cream.profit-good,
.pack-profit-card.cream.profit-empty{
  background: linear-gradient(135deg,#fff7ed,#fef3c7)!important;
  border:1px solid #fed7aa!important;
  box-shadow: 0 12px 26px rgba(0,0,0,.16);
}
.pack-profit-card.cream .pack-profit-title{
  color:#92400e!important;
}
.pack-profit-card.cream .pack-profit-note{
  color:#78350f!important;
}
.pack-profit-card.cream.profit-good .pack-profit-note{
  color:#047857!important;
}
.pack-profit-card.cream .pack-profit-grid div{
  background: rgba(255,255,255,.78)!important;
  border:1px solid rgba(146,64,14,.18)!important;
}
.pack-profit-card.cream .pack-profit-grid span{
  color:#92400e!important;
}

/* =====================================================
   PATCH V22 - Input Pack dropdown + cPanel detail cache
   ===================================================== */
.pack-input-card .pack-row{
  display:grid;
  gap:12px;
  align-items:end;
  margin:12px 0;
}
.pack-input-card .pack-row-4{grid-template-columns:repeat(4, minmax(0, 1fr));}
.pack-input-card .pack-row-3{grid-template-columns:repeat(3, minmax(0, 1fr));}
.pack-input-card .pack-forced-row{min-width:900px;}
.pack-input-card{overflow-x:auto;}
.pack-input-card select{
  appearance:auto!important;
  -webkit-appearance:auto!important;
  background-color:#17243a!important;
  color:#f8fafc!important;
  border:1px solid rgba(96,165,250,.35)!important;
  border-radius:14px!important;
  font-weight:900!important;
  letter-spacing:.2px!important;
  cursor:pointer!important;
}
.pack-input-card select option{
  background:#0f1b2e!important;
  color:#f8fafc!important;
  font-weight:800!important;
}
.pack-input-card select option:checked,
.pack-input-card select option:hover{
  background:#2563eb!important;
  color:#ffffff!important;
}
.pack-input-card select:focus{
  border-color:#60a5fa!important;
  box-shadow:0 0 0 4px rgba(59,130,246,.18)!important;
}
.pack-detail-cpanel-box{
  position:relative;
  background:linear-gradient(135deg,#fff7ed,#fef3c7)!important;
  border:1px solid rgba(217,119,6,.28)!important;
  color:#7c2d12!important;
  padding:14px!important;
  margin:12px 0!important;
  border-radius:16px!important;
  overflow:visible!important;
}
.pack-detail-combo{position:relative;width:100%;}
.pack-detail-cpanel-box input{
  width:100%!important;
  background:#fffaf2!important;
  color:#7c2d12!important;
  border:1px solid rgba(180,83,9,.28)!important;
  border-radius:14px!important;
  font-weight:900!important;
  padding-right:48px!important;
}
.pack-detail-cpanel-box input::placeholder{color:#a16207!important;opacity:.75!important;}
.pack-detail-toggle{
  position:absolute;
  right:8px;
  top:50%;
  transform:translateY(-50%);
  width:34px;
  height:34px;
  border-radius:11px;
  border:1px solid rgba(180,83,9,.22);
  background:#fff7ed;
  color:#7c2d12;
  font-weight:900;
  cursor:pointer;
}
.pack-detail-dropdown{
  display:none;
  position:absolute;
  left:0;
  right:0;
  top:calc(100% + 8px);
  max-height:260px;
  overflow:auto;
  z-index:999999;
  background:#111827;
  border:1px solid rgba(251,191,36,.35);
  border-radius:14px;
  padding:8px;
  box-shadow:0 20px 45px rgba(0,0,0,.45);
}
.pack-detail-dropdown.show{display:block;}
.pack-detail-dd-item{
  display:block;
  width:100%;
  text-align:left;
  border:0;
  background:transparent;
  color:#f8fafc;
  padding:10px 12px;
  border-radius:10px;
  font-weight:800;
  cursor:pointer;
  white-space:normal;
}
.pack-detail-dd-item:hover,
.pack-detail-dd-item:focus{
  background:#2563eb;
  color:#fff;
}
.pack-detail-dd-item.muted{
  color:#94a3b8;
  cursor:not-allowed;
}
.pack-profit-card.cream,
.pack-profit-card.cream.profit-good,
.pack-profit-card.cream.profit-empty{
  background:linear-gradient(135deg,#fff7ed,#fef3c7)!important;
  border:1px solid rgba(217,119,6,.25)!important;
  color:#7c2d12!important;
}
.pack-profit-card.cream .pack-profit-grid div{
  background:rgba(255,255,255,.62)!important;
  border:1px solid rgba(180,83,9,.18)!important;
}
.pack-profit-card.cream .pack-profit-title,
.pack-profit-card.cream .pack-profit-grid span{color:#92400e!important;}
.pack-profit-card.cream .pack-profit-note{color:#047857!important;font-weight:900!important;}
.pack-profit-card.cream.profit-loss .pack-profit-note,
.pack-profit-card.cream.profit-loss .pack-profit-title{color:#b91c1c!important;}
.pack-profit-card.cream.profit-loss #packProfitValue{color:#dc2626!important;}
@media(max-width:900px){
  .pack-input-card .pack-forced-row{min-width:760px;}
}


/* =====================================================
   PATCH V23 - RESIZABLE SIDEBAR
   Desktop only. Ukuran sidebar bisa ditarik dan tersimpan.
   ===================================================== */
:root{
  --sidebar-width: 280px;
  --sidebar-min: 180px;
  --sidebar-max: 380px;
}
.app{
  grid-template-columns: var(--sidebar-width, 280px) minmax(0,1fr) !important;
  transition:grid-template-columns .12s ease;
}
.sidebar{
  width:var(--sidebar-width, 280px);
  min-width:0;
  position:sticky !important;
  top:0;
  overflow-x:hidden;
  user-select:none;
}
.sidebar-resizer{
  position:absolute;
  top:0;
  right:-6px;
  width:12px;
  height:100%;
  cursor:col-resize;
  z-index:80;
  background:transparent;
  touch-action:none;
}
.sidebar-resizer::before{
  content:"";
  position:absolute;
  top:18px;
  bottom:18px;
  left:5px;
  width:2px;
  border-radius:999px;
  background:rgba(96,165,250,.18);
  transition:background .15s ease, box-shadow .15s ease;
}
.sidebar-resizer:hover::before,
body.sidebar-resizing .sidebar-resizer::before{
  background:rgba(96,165,250,.85);
  box-shadow:0 0 0 4px rgba(37,99,235,.16);
}
body.sidebar-resizing{
  cursor:col-resize !important;
  user-select:none !important;
}
body.sidebar-resizing *{
  cursor:col-resize !important;
  user-select:none !important;
}
.app.sidebar-small .side-brand{
  gap:8px;
}
.app.sidebar-small .side-brand strong,
.app.sidebar-small .side-brand span{
  white-space:nowrap;
}
.app.sidebar-small .nav-btn,
.app.sidebar-small .sidebar .btn.full{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  padding-left:12px;
  padding-right:12px;
}
.sidebar-size-tip{
  position:fixed;
  top:16px;
  left:calc(var(--sidebar-width, 280px) + 12px);
  z-index:9999;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(7,18,35,.92);
  border:1px solid rgba(96,165,250,.35);
  color:#dbeafe;
  font-size:12px;
  font-weight:900;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
  pointer-events:none;
}
@media (max-width: 760px){
  :root{ --sidebar-width: 280px; }
  .app{ grid-template-columns:1fr !important; }
  .sidebar{ width:280px; }
  .sidebar-resizer{ display:none !important; }
}

/* =====================================================
   PATCH V24 - Selaraskan Input Pack / Input Uang Pack
   Dropdown native dibuat jelas seperti Input Uang Gold.
   ===================================================== */
.input-card select,
.pack-input-card select{
  width:100%;
  min-height:52px;
  padding:0 42px 0 16px!important;
  border-radius:14px!important;
  border:1px solid rgba(96,165,250,.35)!important;
  background:#17243a!important;
  color:#f8fafc!important;
  font-size:15px!important;
  font-weight:900!important;
  letter-spacing:.2px!important;
  outline:none!important;
  cursor:pointer!important;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.input-card select:focus,
.pack-input-card select:focus{
  border-color:#60a5fa!important;
  box-shadow:0 0 0 4px rgba(59,130,246,.18)!important;
}
.input-card select option,
.pack-input-card select option{
  background:#102036!important;
  color:#f8fafc!important;
  font-weight:850!important;
  padding:12px!important;
}
.input-card select option:checked,
.pack-input-card select option:checked{
  background:#2563eb!important;
  color:#ffffff!important;
}
.input-card select option:disabled,
.pack-input-card select option:disabled{
  color:#94a3b8!important;
}
.pack-input-card .pack-row{
  display:grid;
  gap:12px;
  align-items:end;
  margin:12px 0;
}
.pack-input-card .pack-row-4{
  grid-template-columns:repeat(4, minmax(0, 1fr));
}
.pack-input-card .pack-row-3{
  grid-template-columns:repeat(3, minmax(0, 1fr));
}
.pack-input-card .pack-forced-row{
  min-width:900px;
}
.pack-input-card{
  overflow-x:auto;
}
.pack-input-card label{
  white-space:nowrap;
}
.pack-detail-cream-row.compact,
.pack-detail-cpanel-box{
  background:linear-gradient(135deg,#fff7ed,#fef3c7)!important;
  border:1px solid rgba(217,119,6,.28)!important;
  border-radius:18px!important;
  color:#7c2d12!important;
}
.pack-detail-cream-row.compact input,
.pack-detail-cpanel-box input{
  background:#fffaf2!important;
  color:#7c2d12!important;
  border:1px solid rgba(180,83,9,.28)!important;
  font-weight:900!important;
}
.pack-detail-cream-row.compact input::placeholder,
.pack-detail-cpanel-box input::placeholder{
  color:#a16207!important;
  opacity:.78!important;
}
@media(max-width:900px){
  .pack-input-card .pack-forced-row{min-width:780px;}
}

/* =====================================================
   PATCH V25 - Input Pack Quick Calculator
   Calculator kecil di paling atas, hasil cream bisa dicopy.
   ===================================================== */
.pack-calc-card{
  margin:14px 0 16px;
  padding:16px;
  border-radius:18px;
  background:linear-gradient(135deg,#fff7ed,#fef3c7)!important;
  border:1px solid rgba(217,119,6,.28)!important;
  color:#7c2d12!important;
  box-shadow:0 12px 30px rgba(0,0,0,.12);
}
.pack-calc-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  margin-bottom:12px;
}
.pack-calc-title{
  font-size:14px;
  font-weight:1000;
  text-transform:uppercase;
  letter-spacing:1.2px;
  color:#92400e;
}
.pack-calc-sub{
  margin-top:4px;
  font-size:12px;
  line-height:1.45;
  color:#7c2d12;
  opacity:.9;
}
.pack-calc-row{
  display:grid;
  grid-template-columns:150px 160px minmax(260px,1fr) 220px;
  gap:12px;
  align-items:end;
}
.pack-calc-card label{
  color:#92400e!important;
  font-weight:1000!important;
  letter-spacing:1px!important;
}
.pack-calc-card input,
.pack-calc-card select{
  background:#fffaf2!important;
  color:#7c2d12!important;
  border:1px solid rgba(180,83,9,.26)!important;
  font-weight:950!important;
  min-height:50px;
}
.pack-calc-card input::placeholder{color:#a16207!important; opacity:.7!important;}
.pack-calc-result{
  margin-top:12px;
  padding:12px 14px;
  border-radius:14px;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(180,83,9,.18);
  color:#7c2d12;
  font-weight:900;
  cursor:pointer;
  user-select:none;
  position:relative;
}
.pack-calc-result-combined{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.pack-calc-before-line{
  padding:8px 10px;
  border-radius:11px;
  background:rgba(255,255,255,.55);
  border:1px dashed rgba(180,83,9,.20);
  color:#7c2d12;
  font-weight:950;
  letter-spacing:.2px;
}
.pack-calc-final-line{
  padding:8px 10px;
  border-radius:11px;
  background:rgba(255,255,255,.68);
  border:1px solid rgba(180,83,9,.14);
  color:#7c2d12;
  font-weight:950;
}
.pack-calc-result strong{
  color:#7c2d12;
  font-size:16px;
  margin-left:0;
}
.pack-calc-result b{
  color:#047857;
  font-size:18px;
  margin-left:6px;
}
.pack-calc-result span{
  display:inline-block;
  margin-left:6px;
  padding:3px 8px;
  border-radius:999px;
  background:#ffedd5;
  color:#9a3412;
  font-size:12px;
  font-weight:1000;
}
.pack-calc-result em{
  position:absolute;
  right:14px;
  top:14px;
  font-style:normal;
  color:#a16207;
  opacity:.75;
  font-size:12px;
}
.pack-calc-before{display:none;}
@media(max-width:900px){
  .pack-calc-card{min-width:780px;}
  .pack-calc-row{grid-template-columns:140px 150px 260px 200px;}
}

/* =====================================================
   PATCH V27 - RATE SETTINGS JSON CPANEL
   ===================================================== */
.rate-settings-card{max-width:1180px;}
.rate-head-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end;}
.rate-info-box,.rate-status-box{
  border:1px dashed rgba(120,160,220,.35);
  background:rgba(8,24,48,.55);
  color:#dbeafe;
  border-radius:16px;
  padding:14px 16px;
  margin:14px 0;
  font-size:14px;
}
.rate-info-box code{color:#fbbf24;background:rgba(0,0,0,.25);padding:2px 6px;border-radius:8px;}
.rate-status-box.success{background:rgba(16,185,129,.15);border-color:rgba(16,185,129,.35);color:#bbf7d0;}
.rate-status-box.warn{background:rgba(245,158,11,.16);border-color:rgba(245,158,11,.38);color:#fde68a;}
.rate-status-box.danger{background:rgba(239,68,68,.16);border-color:rgba(239,68,68,.38);color:#fecaca;}
.rate-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:16px;}
.rate-panel.cream{
  background:linear-gradient(180deg,#fff7df,#fff1c8);
  color:#3f220d;
  border:1px solid #f3d39a;
  border-radius:18px;
  padding:16px;
}
.rate-section-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:12px;}
.rate-section-head h4{margin:0;color:#8a3a0b;text-transform:uppercase;letter-spacing:.08em;}
.rate-section-head p{margin:4px 0 0;color:#7c5533;font-size:13px;}
.rate-row{display:grid;grid-template-columns:1.2fr 1fr .8fr auto;gap:10px;align-items:center;margin-bottom:10px;}
.rate-row-head{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:#8a3a0b;font-weight:900;margin-bottom:8px;}
.rate-row input{
  width:100%;
  border:1px solid #efc98d;
  background:#fffaf0;
  color:#3f220d;
  border-radius:12px;
  padding:12px 12px;
  font-weight:800;
  outline:none;
}
.rate-row input:focus{border-color:#f59e0b;box-shadow:0 0 0 3px rgba(245,158,11,.15);}
.rate-source{font-size:12px;color:#6b4b2f;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
@media(max-width:900px){
  .rate-grid-2{grid-template-columns:1fr;}
  .rate-row{grid-template-columns:1fr 1fr;}
  .rate-row-head{display:none;}
}

/* =====================================================
   THEME PATCH - DARK CREAM ADMIN V1
   Fokus: sidebar + background utama + panel kanan
   Warna cream agak gelap, tetap readable untuk dashboard admin.
   ===================================================== */
:root{
  --bg:#171207;
  --panel:#241b0d;
  --panel2:#302411;
  --line:rgba(250,204,120,.18);
  --text:#fff8e6;
  --muted:#d8c89b;
  --blue:#d99a18;
  --blue2:#f4c451;
  --green:#22c55e;
  --red:#ef4444;
  --yellow:#facc15;
  --orange:#f59e0b;
}
body{
  background:
    radial-gradient(circle at top left, rgba(245,158,11,.20), transparent 34%),
    radial-gradient(circle at 85% 10%, rgba(120,82,28,.18), transparent 30%),
    linear-gradient(180deg,#171207 0%, #120e07 48%, #0d0a05 100%) !important;
  color:var(--text) !important;
}
.sidebar{
  background:linear-gradient(180deg,#241a0c 0%, #191207 55%, #100b04 100%) !important;
  border-right:1px solid rgba(250,204,120,.20) !important;
  box-shadow:inset -1px 0 0 rgba(255,255,255,.025), 8px 0 34px rgba(0,0,0,.18);
}
.side-brand strong,
.side-brand span{
  color:#fff3cf !important;
}
.side-logo,
.brand-logo{
  background:linear-gradient(135deg,#facc15,#b7791f) !important;
  color:#1c1204 !important;
}
.nav-btn{
  background:linear-gradient(180deg,rgba(48,36,17,.96),rgba(35,26,12,.96)) !important;
  border:1px solid rgba(250,204,120,.10) !important;
  color:#f8eac0 !important;
}
.nav-btn:hover{
  background:linear-gradient(180deg,rgba(68,49,20,.98),rgba(45,32,13,.98)) !important;
  border-color:rgba(250,204,120,.22) !important;
}
.nav-btn.active{
  background:linear-gradient(135deg,#b7791f,#facc15) !important;
  color:#1f1405 !important;
  border-color:rgba(255,236,179,.42) !important;
  box-shadow:0 12px 28px rgba(183,121,31,.24);
}
.topbar,
.card{
  background:linear-gradient(180deg,rgba(38,28,13,.97),rgba(23,18,9,.97)) !important;
  border:1px solid rgba(250,204,120,.16) !important;
  box-shadow:0 18px 55px rgba(0,0,0,.28) !important;
}
.topbar h2,
.card h3{
  color:#fff7da !important;
}
.topbar p,
.card .muted,
.muted{
  color:#d8c89b !important;
}
input,select,textarea{
  background:rgba(255,248,230,.055) !important;
  border-color:rgba(250,204,120,.22) !important;
  color:#fff8e6 !important;
}
input::placeholder,textarea::placeholder{
  color:rgba(248,234,192,.52) !important;
}
input:focus,select:focus,textarea:focus{
  border-color:rgba(250,204,21,.70) !important;
  box-shadow:0 0 0 4px rgba(245,158,11,.15) !important;
}
select option{
  background:#21180b !important;
  color:#fff8e6 !important;
}
.secondary,
.btn.secondary,
button.secondary{
  background:rgba(255,248,230,.07) !important;
  border:1px solid rgba(250,204,120,.18) !important;
  color:#fff3cf !important;
}
.btn:not(.danger):not(.success):not(.warning),
button:not(.danger):not(.success):not(.warning):not(.nav-btn):not(.mobile-menu-btn){
  background:linear-gradient(135deg,#8a5a12,#d99a18) !important;
  color:#fff8e6 !important;
}
button.success,.btn.success,.success{
  background:linear-gradient(135deg,#15803d,#22c55e) !important;
}
button.danger,.btn.danger,.danger{
  background:linear-gradient(135deg,#b91c1c,#f97316) !important;
}
.warning,
button.warning,.btn.warning{
  background:linear-gradient(135deg,#d97706,#facc15) !important;
  color:#1f1405 !important;
}
.table-wrap{
  border-color:rgba(250,204,120,.16) !important;
}
th{
  background:rgba(250,204,120,.10) !important;
  color:#ffeab0 !important;
}
td{
  color:#fff8e6 !important;
  border-bottom-color:rgba(250,204,120,.10) !important;
}
.pill{
  background:rgba(255,248,230,.06) !important;
  border-color:rgba(250,204,120,.18) !important;
  color:#ffeab0 !important;
}
.alert.info{
  background:rgba(245,158,11,.13) !important;
  border-color:rgba(250,204,21,.26) !important;
  color:#fde68a !important;
}
.loading-box,
.toast{
  background:#21180b !important;
  border-color:rgba(250,204,120,.18) !important;
  color:#fff8e6 !important;
}
.spinner{
  border-color:rgba(255,255,255,.14) !important;
  border-top-color:#facc15 !important;
}
@media(max-width:900px){
  .sidebar{
    background:linear-gradient(180deg,#241a0c 0%, #120d05 100%) !important;
  }
}
/* =====================================================
   EYE COMFORT THEME - SOFT WARM SLATE
   Cocok untuk CS kerja lama
===================================================== */

:root{
  --bg:#141414;
  --panel:#23201a;
  --panel2:#2d281f;
  --line:rgba(244,234,211,.14);
  --text:#f5efe3;
  --muted:#b8aa91;
  --blue:#3b6ea8;
  --blue2:#6f9fd3;
  --green:#2f9e65;
  --red:#c75146;
  --yellow:#d6a84f;
  --orange:#c9792d;
}

body{
  background:
    radial-gradient(circle at top left, rgba(214,168,79,.10), transparent 34%),
    linear-gradient(180deg,#171511,#11100d) !important;
  color:var(--text) !important;
}

.sidebar{
  background:linear-gradient(180deg,#1b1814,#11100d) !important;
  border-right:1px solid rgba(214,168,79,.18) !important;
}

.side-brand strong,
.topbar h2,
.card h3{
  color:#f8f1df !important;
}

.side-brand span,
.topbar p,
.muted{
  color:#b8aa91 !important;
}

.nav-btn{
  background:rgba(244,234,211,.055) !important;
  border:1px solid rgba(244,234,211,.08) !important;
  color:#eadfca !important;
}

.nav-btn:hover{
  background:rgba(214,168,79,.13) !important;
  border-color:rgba(214,168,79,.22) !important;
}

.nav-btn.active{
  background:linear-gradient(135deg,#b98224,#d6a84f) !important;
  color:#17120a !important;
  border-color:rgba(255,231,170,.35) !important;
}

.topbar,
.card{
  background:linear-gradient(180deg,rgba(35,32,26,.98),rgba(25,23,19,.98)) !important;
  border:1px solid rgba(244,234,211,.13) !important;
  box-shadow:0 18px 50px rgba(0,0,0,.26) !important;
}

input,
select,
textarea{
  background:rgba(255,248,232,.055) !important;
  border:1px solid rgba(244,234,211,.16) !important;
  color:#f5efe3 !important;
}

input::placeholder,
textarea::placeholder{
  color:rgba(245,239,227,.45) !important;
}

select option{
  background:#23201a !important;
  color:#f5efe3 !important;
}

.btn,
button{
  background:linear-gradient(135deg,#3b6ea8,#5f8fc4) !important;
  color:#fffaf0 !important;
}

.success{
  background:linear-gradient(135deg,#247a4d,#2f9e65) !important;
}

.danger{
  background:linear-gradient(135deg,#9f342f,#c75146) !important;
}

.warning{
  background:linear-gradient(135deg,#b98224,#d6a84f) !important;
  color:#17120a !important;
}

.table-wrap{
  border-color:rgba(244,234,211,.13) !important;
}

th{
  background:rgba(244,234,211,.075) !important;
  color:#eadfca !important;
}

td{
  color:#f5efe3 !important;
  border-bottom-color:rgba(244,234,211,.10) !important;
}

.alert.success{
  background:rgba(47,158,101,.12) !important;
  border-color:rgba(47,158,101,.28) !important;
}

.alert.error{
  background:rgba(199,81,70,.12) !important;
  border-color:rgba(199,81,70,.30) !important;
}

.toast,
.loading-box{
  background:#201d18 !important;
  border-color:rgba(244,234,211,.14) !important;
}
/* SOFTEN DARK CREAM THEME */
:root{
  --yellow:#c89b3c;
  --orange:#b87524;
  --text:#eee3cf;
  --muted:#ad9f86;
}

.nav-btn.active{
  background:linear-gradient(135deg,#a97820,#c89b3c) !important;
  color:#16110a !important;
}

.warning,
button.warning,
.btn.warning{
  background:linear-gradient(135deg,#a97820,#c89b3c) !important;
  color:#16110a !important;
}

.card,
.topbar{
  background:linear-gradient(180deg,rgba(32,30,24,.98),rgba(22,21,17,.98)) !important;
}

.pack-calc-card,
.pack-profit-card.cream,
.pack-detail-cream-row.compact,
.pack-detail-cpanel-box{
  background:linear-gradient(135deg,#efe1bf,#e2c98f) !important;
  border-color:rgba(170,115,32,.35) !important;
  color:#432b12 !important;
}
/* =====================================================
   FIX RATE SETTINGS - FONT DI PANEL CREAM
===================================================== */

.rate-panel.cream,
.rate-panel.cream *{
  color:#4a2a0d !important;
}

.rate-panel.cream h4,
.rate-section-head h4,
.rate-row-head{
  color:#7c3a0a !important;
}

.rate-panel.cream p,
.rate-section-head p,
.rate-source{
  color:#6b4b2f !important;
}

.rate-panel.cream input{
  background:#fff8e6 !important;
  color:#2b1707 !important;
  border:1px solid rgba(146,64,14,.28) !important;
}

.rate-panel.cream input::placeholder{
  color:#9a6b38 !important;
}

.rate-panel.cream button,
.rate-panel.cream .btn{
  color:#fff7e6 !important;
}

.rate-panel.cream button.warning,
.rate-panel.cream .warning{
  color:#1b1207 !important;
}
/* =====================================================
   PATCH V28 - Input Gold Compact Cream Billing Preview
   - Replace format read + green seller card with one cream calculation card.
   - Balance Now / Seller Rate / Net Gold -> Current Balance after purchase.
===================================================== */
#goldSellerMiniCard{
  display:none!important;
}
.gold-parse-preview.gold-billing-preview{
  display:block!important;
  margin:12px 0 14px!important;
  padding:14px!important;
  border-radius:18px!important;
  background:linear-gradient(135deg,#fff7ed,#fef3c7)!important;
  border:1px solid rgba(217,119,6,.30)!important;
  color:#431407!important;
  box-shadow:0 12px 30px rgba(0,0,0,.14)!important;
}
.gold-billing-row{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  margin-top:10px;
}
.gold-billing-row:first-child{
  margin-top:0;
}
.gold-billing-item{
  min-width:0;
  padding:11px 12px;
  border-radius:14px;
  background:rgba(255,255,255,.70);
  border:1px solid rgba(180,83,9,.16);
}
.gold-billing-item span{
  display:block;
  color:#92400e;
  font-size:10px;
  font-weight:1000;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin-bottom:5px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.gold-billing-item b{
  display:block;
  color:#111827;
  font-size:17px;
  line-height:1.08;
  font-weight:1000;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.gold-billing-item.strong b{
  color:#047857;
  font-size:20px;
}
.gold-billing-item.ok{
  background:linear-gradient(135deg,#dcfce7,#bbf7d0);
  border-color:rgba(34,197,94,.34);
}
.gold-billing-item.ok span,
.gold-billing-item.ok b{
  color:#065f46;
}
.gold-billing-item.danger{
  background:linear-gradient(135deg,#fee2e2,#fecaca);
  border-color:rgba(239,68,68,.36);
}
.gold-billing-item.danger span,
.gold-billing-item.danger b{
  color:#991b1b;
}
.gold-billing-item.warn{
  background:linear-gradient(135deg,#fef9c3,#fde68a);
  border-color:rgba(217,119,6,.30);
}
.gold-billing-item.warn span,
.gold-billing-item.warn b{
  color:#854d0e;
}
.gold-billing-note{
  margin-top:10px;
  padding:9px 11px;
  border-radius:13px;
  background:rgba(255,255,255,.46);
  border:1px dashed rgba(180,83,9,.22);
  color:#78350f;
  font-size:12px;
  font-weight:900;
  line-height:1.35;
}
.gold-billing-note.ok{
  color:#047857;
  border-color:rgba(34,197,94,.25);
}
.gold-billing-note.danger{
  color:#b91c1c;
  border-color:rgba(239,68,68,.28);
}
.gold-billing-note.warn{
  color:#92400e;
}
@media(max-width:900px){
  .gold-billing-row{
    grid-template-columns:repeat(4, minmax(150px, 1fr));
    overflow-x:auto;
    padding-bottom:4px;
  }
  .gold-parse-preview.gold-billing-preview{
    overflow-x:auto;
  }
}
@media(max-width:620px){
  .gold-billing-row{
    grid-template-columns:repeat(2,minmax(0,1fr));
    overflow-x:visible;
  }
  .gold-billing-item b{
    font-size:15px;
  }
  .gold-billing-item.strong b{
    font-size:17px;
  }
}

/* =====================================================
   PATCH SO2 GOLD AUTO EMAIL STATUS
   Floating result: auto email status for completed purchase.
===================================================== */
.gold-completed-email-status{
  margin-top:12px;
  padding:11px 13px;
  border-radius:14px;
  border:1px solid rgba(148,163,184,.24);
  background:rgba(15,23,42,.42);
  color:#dbeafe;
  font-size:13px;
  line-height:1.45;
  font-weight:850;
}
.gold-completed-email-status.info{background:rgba(59,130,246,.12);border-color:rgba(96,165,250,.30);color:#dbeafe;}
.gold-completed-email-status.ok{background:rgba(34,197,94,.13);border-color:rgba(74,222,128,.34);color:#dcfce7;}
.gold-completed-email-status.warn{background:rgba(245,158,11,.13);border-color:rgba(251,191,36,.34);color:#fde68a;}
.gold-completed-email-status.danger{background:rgba(239,68,68,.13);border-color:rgba(248,113,113,.34);color:#fecaca;}
.gold-result-actions button:disabled{opacity:.55;cursor:not-allowed;filter:grayscale(.25);}


/* =====================================================
   CUSTOMER PUSH GLOBAL FULLSCREEN ACK ALARM
   Floating wajib muncul di semua menu sampai ACK.
===================================================== */
.push-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:26px;
  height:26px;
  padding:0 8px;
  border-radius:999px;
  background:#7f1d1d;
  color:#fff;
  font-size:12px;
  font-weight:1000;
  margin-left:8px;
  box-shadow:0 0 0 4px rgba(239,68,68,.14);
}
.push-badge:not(.show){opacity:.45;background:#475569;box-shadow:none}
.push-control-box{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  margin:14px 0;
  padding:14px;
  border-radius:18px;
  border:1px dashed rgba(214,168,79,.28);
  background:rgba(255,248,232,.055);
}
.push-control-box p{margin:4px 0;color:var(--muted);line-height:1.45}
.push-control-box small{display:block;color:#fcd34d;font-weight:900}
.push-row-pending td{
  background:rgba(239,68,68,.12)!important;
  border-bottom-color:rgba(248,113,113,.22)!important;
}
.push-row-done td{
  opacity:.62;
}
.push-floating-open{
  overflow:hidden!important;
}
.push-floating-full{
  position:fixed;
  inset:0;
  z-index:2147483000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:22px;
}
.push-floating-full.hidden{
  display:none!important;
}
.push-full-backdrop{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 20% 10%, rgba(239,68,68,.34), transparent 34%),
    radial-gradient(circle at 80% 16%, rgba(245,158,11,.24), transparent 30%),
    rgba(5,8,15,.88);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  animation:pushBackdropPulse 1.15s infinite alternate;
}
@keyframes pushBackdropPulse{
  from{filter:brightness(1)}
  to{filter:brightness(1.22)}
}
.push-full-card{
  position:relative;
  width:min(1180px,96vw);
  max-height:94vh;
  overflow:auto;
  border-radius:28px;
  border:1px solid rgba(248,113,113,.55);
  background:linear-gradient(145deg,#160d08 0%,#2a1111 46%,#450a0a 100%);
  box-shadow:0 32px 110px rgba(0,0,0,.72),0 0 0 1px rgba(255,255,255,.06) inset;
  color:#fff7ed;
  padding:24px;
}
.push-full-top{
  display:flex;
  align-items:center;
  gap:18px;
  margin-bottom:16px;
}
.push-siren-visual{
  position:relative;
  width:86px;
  height:86px;
  flex:0 0 86px;
  border-radius:26px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(239,68,68,.16);
  border:1px solid rgba(248,113,113,.45);
  box-shadow:0 0 36px rgba(239,68,68,.35);
}
.push-siren-light{
  position:absolute;
  inset:8px;
  border-radius:22px;
  background:rgba(239,68,68,.25);
  animation:pushSirenLight .55s infinite alternate;
}
.push-siren-icon{
  position:relative;
  font-size:42px;
  animation:pushSirenShake .42s infinite alternate;
}
@keyframes pushSirenLight{
  from{opacity:.35;transform:scale(.96)}
  to{opacity:1;transform:scale(1.08)}
}
@keyframes pushSirenShake{
  from{transform:rotate(-5deg)}
  to{transform:rotate(5deg)}
}
.push-floating-kicker{
  color:#fecaca;
  font-size:13px;
  font-weight:1000;
  letter-spacing:.16em;
  text-transform:uppercase;
  margin-bottom:5px;
}
.push-full-card h2{
  margin:0;
  font-size:34px;
  line-height:1.05;
  color:#fff;
}
.push-full-card p{
  margin:8px 0 0;
  color:#fee2e2;
  line-height:1.45;
}
.push-sound-gate{
  display:grid;
  grid-template-columns:1fr auto;
  gap:12px;
  align-items:center;
  padding:14px;
  border-radius:18px;
  border:1px dashed rgba(251,191,36,.45);
  background:rgba(251,191,36,.12);
  color:#fef3c7;
  margin:14px 0 16px;
}
.push-sound-gate.hidden{
  display:none!important;
}
.push-sound-gate b{
  display:block;
  font-size:16px;
  color:#fde68a;
}
.push-sound-gate span{
  display:block;
  color:#ffedd5;
  font-size:13px;
  margin-top:4px;
}
.push-floating-list{
  display:grid;
  gap:12px;
  max-height:48vh;
  overflow:auto;
  padding-right:4px;
}
.push-floating-item{
  display:grid;
  grid-template-columns:260px 1fr auto;
  gap:14px;
  align-items:center;
  padding:15px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(15,23,42,.42);
}
.push-floating-meta b{
  display:block;
  font-size:20px;
  color:#fff;
  line-height:1.1;
}
.push-floating-meta span{
  display:block;
  margin-top:5px;
  color:#fecaca;
  font-size:12px;
  font-weight:900;
}
.push-floating-message{
  color:#fff7ed;
  font-size:16px;
  font-weight:850;
  line-height:1.45;
}
.push-floating-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;
  margin-top:18px;
}
.push-floating-actions .push-ack-all{
  font-size:15px;
  padding:14px 18px;
  box-shadow:0 12px 34px rgba(34,197,94,.22);
}
.push-floating-note{
  margin-top:12px;
  padding:11px 13px;
  border-radius:14px;
  background:rgba(0,0,0,.20);
  color:#fde68a;
  font-size:13px;
  font-weight:900;
  text-align:center;
}
@media(max-width:760px){
  .push-floating-full{
    padding:10px;
    align-items:stretch;
  }
  .push-full-card{
    width:100%;
    max-height:none;
    border-radius:20px;
    padding:16px;
  }
  .push-full-top{
    align-items:flex-start;
    gap:12px;
  }
  .push-siren-visual{
    width:62px;
    height:62px;
    flex-basis:62px;
    border-radius:20px;
  }
  .push-siren-icon{
    font-size:30px;
  }
  .push-full-card h2{
    font-size:24px;
  }
  .push-sound-gate{
    grid-template-columns:1fr;
  }
  .push-floating-item{
    grid-template-columns:1fr;
  }
  .push-floating-actions{
    display:grid;
    grid-template-columns:1fr;
  }
}


/* =====================================================
   FINAL THEME PATCH - NAVY BLUE EYE COMFORT V1
   Purpose: make admin dashboard dominantly navy blue and comfortable
   Put this patch at the very bottom so it overrides older cream/slate themes.
   ===================================================== */
:root{
  --bg:#07111f !important;
  --panel:#0c1a2f !important;
  --panel2:#102744 !important;
  --line:rgba(148,163,184,.16) !important;
  --text:#eaf3ff !important;
  --muted:#94a9c7 !important;
  --blue:#2f6fb8 !important;
  --blue2:#6aa7e8 !important;
  --green:#2fbf71 !important;
  --red:#d85a52 !important;
  --yellow:#d8b85a !important;
  --orange:#c9823a !important;
  --shadow:0 18px 55px rgba(0,0,0,.30) !important;
}
html,
body{
  background:
    radial-gradient(circle at 10% 0%, rgba(47,111,184,.20), transparent 34%),
    radial-gradient(circle at 90% 8%, rgba(14,165,233,.10), transparent 30%),
    linear-gradient(180deg,#081424 0%, #07111f 52%, #050b15 100%) !important;
  color:var(--text) !important;
}
.login-shell{
  background:
    radial-gradient(circle at 50% 0%, rgba(47,111,184,.18), transparent 36%),
    linear-gradient(180deg,#081424,#050b15) !important;
}
.login-card,
.topbar,
.card,
.input-card,
.rate-settings-card{
  background:linear-gradient(180deg,rgba(14,31,55,.98),rgba(8,20,38,.98)) !important;
  border:1px solid rgba(148,163,184,.15) !important;
  box-shadow:0 18px 55px rgba(0,0,0,.28) !important;
  color:var(--text) !important;
}
.sidebar{
  background:linear-gradient(180deg,#09182b 0%, #071120 58%, #050b15 100%) !important;
  border-right:1px solid rgba(148,163,184,.15) !important;
  box-shadow:inset -1px 0 0 rgba(255,255,255,.025), 8px 0 34px rgba(0,0,0,.20) !important;
}
.side-logo,
.brand-logo{
  background:linear-gradient(135deg,#1d4f91,#6aa7e8) !important;
  color:#f8fbff !important;
  box-shadow:0 12px 28px rgba(37,99,235,.22) !important;
}
.side-brand strong,
.login-card h1,
.topbar h2,
.card h3,
.card h4,
.panel-head h3{
  color:#f2f7ff !important;
}
.side-brand span,
.login-card p,
.topbar p,
.card .muted,
.muted,
.empty{
  color:var(--muted) !important;
}
.nav-btn{
  background:rgba(148,163,184,.055) !important;
  border:1px solid rgba(148,163,184,.08) !important;
  color:#d8e7fb !important;
}
.nav-btn:hover{
  background:rgba(47,111,184,.16) !important;
  border-color:rgba(106,167,232,.24) !important;
  color:#f2f7ff !important;
}
.nav-btn.active{
  background:linear-gradient(135deg,#1e4f8e,#4387d1) !important;
  color:#f8fbff !important;
  border-color:rgba(186,220,255,.35) !important;
  box-shadow:0 12px 28px rgba(37,99,235,.24) !important;
}
input,
select,
textarea,
.input-card select,
.pack-input-card select{
  background:rgba(255,255,255,.055) !important;
  border:1px solid rgba(148,163,184,.18) !important;
  color:#eef6ff !important;
}
input::placeholder,
textarea::placeholder{
  color:rgba(203,213,225,.50) !important;
}
input:focus,
select:focus,
textarea:focus,
.input-card select:focus,
.pack-input-card select:focus{
  border-color:rgba(106,167,232,.72) !important;
  box-shadow:0 0 0 4px rgba(47,111,184,.16) !important;
}
select option,
.input-card select option,
.pack-input-card select option{
  background:#0b1b31 !important;
  color:#eef6ff !important;
}
.btn,
button,
.btn:not(.danger):not(.success):not(.warning),
button:not(.danger):not(.success):not(.warning):not(.nav-btn):not(.mobile-menu-btn){
  background:linear-gradient(135deg,#245d9e,#5f9fe3) !important;
  color:#f8fbff !important;
}
.secondary,
.btn.secondary,
button.secondary{
  background:rgba(148,163,184,.08) !important;
  border:1px solid rgba(148,163,184,.16) !important;
  color:#dbeafe !important;
}
.secondary:hover,
.btn.secondary:hover,
button.secondary:hover{
  background:rgba(106,167,232,.16) !important;
  border-color:rgba(106,167,232,.32) !important;
}
button.success,
.btn.success,
.success{
  background:linear-gradient(135deg,#16804d,#2fbf71) !important;
  color:#f0fff8 !important;
}
button.danger,
.btn.danger,
.danger{
  background:linear-gradient(135deg,#a83b37,#d85a52) !important;
  color:#fff7f6 !important;
}
button.warning,
.btn.warning,
.warning{
  background:linear-gradient(135deg,#9b6d22,#d8b85a) !important;
  color:#0c1625 !important;
}
.pill,
.preview,
.rate-info-box,
.rate-status-box,
.enter-helper,
.quick-flow-box,
.proof-box,
.loading-box,
.toast{
  background:rgba(12,26,47,.92) !important;
  border-color:rgba(148,163,184,.16) !important;
  color:#dbeafe !important;
}
.table-wrap{
  border-color:rgba(148,163,184,.15) !important;
}
th{
  background:rgba(148,163,184,.075) !important;
  color:#d7eaff !important;
}
td{
  color:#eef6ff !important;
  border-bottom-color:rgba(148,163,184,.10) !important;
}
.alert.info{
  background:rgba(47,111,184,.14) !important;
  border-color:rgba(106,167,232,.28) !important;
  color:#dbeafe !important;
}
.alert.success{
  background:rgba(47,191,113,.12) !important;
  border-color:rgba(47,191,113,.28) !important;
  color:#d8ffe9 !important;
}
.alert.error{
  background:rgba(216,90,82,.12) !important;
  border-color:rgba(216,90,82,.30) !important;
  color:#ffd7d4 !important;
}
.alert.warn,
.alert.warning{
  background:rgba(216,184,90,.12) !important;
  border-color:rgba(216,184,90,.28) !important;
  color:#fff0bf !important;
}
.spinner{
  border-color:rgba(255,255,255,.13) !important;
  border-top-color:#6aa7e8 !important;
}
.sidebar-size-tip{
  background:rgba(7,17,31,.94) !important;
  border-color:rgba(106,167,232,.32) !important;
  color:#dbeafe !important;
}

/* Convert old cream panels to soft navy so the whole admin feels consistent. */
.pack-calc-card,
.pack-profit-card.cream,
.pack-detail-cream-row.compact,
.pack-detail-cpanel-box,
.gold-parse-preview.gold-billing-preview,
.rate-panel.cream{
  background:linear-gradient(180deg,rgba(16,39,68,.96),rgba(10,26,49,.96)) !important;
  border:1px solid rgba(106,167,232,.18) !important;
  color:#eaf3ff !important;
  box-shadow:0 14px 36px rgba(0,0,0,.24) !important;
}
.pack-calc-title,
.pack-calc-sub,
.pack-calc-card label,
.pack-profit-title,
.pack-profit-note,
.pack-profit-grid span,
.pack-detail-cream-row label,
.pack-detail-cpanel-box label,
.gold-billing-item span,
.rate-panel.cream h4,
.rate-section-head h4,
.rate-row-head,
.rate-panel.cream p,
.rate-section-head p,
.rate-source,
.rate-panel.cream *{
  color:#b9d7fb !important;
}
.pack-calc-card input,
.pack-calc-card select,
.pack-detail-cream-row.compact input,
.pack-detail-cpanel-box input,
.rate-panel.cream input{
  background:rgba(255,255,255,.065) !important;
  border:1px solid rgba(148,163,184,.18) !important;
  color:#eef6ff !important;
}
.pack-calc-result,
.pack-calc-before-line,
.pack-calc-final-line,
.pack-profit-grid div,
.gold-billing-item,
.rate-row input{
  background:rgba(255,255,255,.07) !important;
  border:1px solid rgba(148,163,184,.14) !important;
  color:#eef6ff !important;
}
.pack-calc-result strong,
.pack-calc-result b,
.pack-profit-grid strong,
.gold-billing-item b{
  color:#f8fbff !important;
}
.gold-billing-item.strong b,
.pack-calc-result b{
  color:#7dd3fc !important;
}
.gold-billing-item.ok,
.money-balance-grid .after.has-balance,
.pack-profit-card.profit-good,
.pack-profit-card.cream.profit-good{
  background:linear-gradient(135deg,rgba(20,83,45,.92),rgba(22,101,52,.82)) !important;
  border-color:rgba(74,222,128,.30) !important;
}
.gold-billing-item.ok span,
.gold-billing-item.ok b,
.pack-profit-card.profit-good .pack-profit-note{
  color:#dcfce7 !important;
}
.gold-billing-item.danger,
.money-balance-grid .after.debt,
.pack-profit-card.profit-loss,
.pack-profit-card.cream.profit-loss{
  background:linear-gradient(135deg,rgba(127,29,29,.92),rgba(153,27,27,.84)) !important;
  border-color:rgba(248,113,113,.32) !important;
}
.gold-billing-item.danger span,
.gold-billing-item.danger b,
.pack-profit-card.profit-loss .pack-profit-note{
  color:#fee2e2 !important;
}
.gold-billing-note,
.gold-billing-note.warn,
.gold-billing-note.ok,
.gold-billing-note.danger{
  background:rgba(255,255,255,.06) !important;
  border-color:rgba(148,163,184,.16) !important;
  color:#cfe4ff !important;
}
.proof-preview,
.proof-preview img{
  background:rgba(5,11,21,.68) !important;
  border-color:rgba(106,167,232,.20) !important;
}

/* Push notification stays urgent, but adjusted to navy red instead of brown. */
.push-full-card{
  background:linear-gradient(145deg,#081424 0%,#1e1117 44%,#450a0a 100%) !important;
}
.push-full-backdrop{
  background:
    radial-gradient(circle at 20% 10%, rgba(239,68,68,.30), transparent 34%),
    radial-gradient(circle at 80% 16%, rgba(47,111,184,.22), transparent 30%),
    rgba(5,11,21,.88) !important;
}
@media(max-width:900px){
  .sidebar{
    background:linear-gradient(180deg,#09182b 0%, #050b15 100%) !important;
  }
  .topbar,
  .card{
    border-radius:18px !important;
  }
}

/* =====================================================
   PATCH - INPUT PACK CALCULATOR BALANCE + MOBILE WRAP
   ===================================================== */
.pack-calc-copy-badge{
  position:absolute;
  right:12px;
  top:10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:58px;
  min-height:30px;
  padding:6px 12px;
  border-radius:999px;
  background:linear-gradient(135deg,#2f78c4,#6aa7e8) !important;
  color:#fff !important;
  font-size:12px;
  font-weight:1000;
  letter-spacing:.2px;
  box-shadow:0 8px 18px rgba(0,0,0,.18);
}
.pack-calc-result{
  padding-right:88px !important;
}
.pack-calc-balance-row{
  display:grid;
  grid-template-columns:minmax(180px,240px) minmax(260px,1fr) auto;
  gap:12px;
  align-items:stretch;
  margin-top:12px;
}
.pack-calc-balance-input label{
  display:block;
  margin-bottom:6px;
}
.pack-calc-balance-result{
  min-height:54px;
  padding:10px 12px;
  border-radius:14px;
  background:rgba(255,255,255,.07) !important;
  border:1px solid rgba(148,163,184,.16) !important;
  color:#eef6ff !important;
  display:grid;
  gap:6px;
  align-content:center;
  overflow-wrap:anywhere;
  word-break:break-word;
}
.pack-calc-balance-result.muted{
  color:#b9d7fb !important;
  opacity:.9;
}
.pack-calc-balance-result div{
  display:flex;
  justify-content:space-between;
  gap:12px;
  border-bottom:1px dashed rgba(148,163,184,.16);
  padding-bottom:5px;
}
.pack-calc-balance-result div:last-child{
  border-bottom:none;
  padding-bottom:0;
}
.pack-calc-balance-result span{
  color:#b9d7fb !important;
  font-weight:800;
}
.pack-calc-balance-result b{
  color:#f8fbff !important;
  text-align:right;
  overflow-wrap:anywhere;
}
.pack-calc-balance-result.ok .strong b{
  color:#7dd3fc !important;
}
.pack-calc-balance-result.minus .strong b{
  color:#fecaca !important;
}
.pack-calc-balance-result.minus{
  background:linear-gradient(135deg,rgba(127,29,29,.88),rgba(153,27,27,.72)) !important;
  border-color:rgba(248,113,113,.35) !important;
}

/* Global soft wrapping: prevents text from overflowing cards on mobile. */
.card,
.topbar,
.preview,
.alert,
.toast,
button,
.btn,
.nav-btn,
input,
select,
textarea,
table,
th,
td,
.pack-calc-card,
.pack-calc-result,
.pack-calc-before-line,
.pack-calc-final-line,
.pack-profit-card,
.proof-box,
.modal,
.email-card,
.lss-card{
  overflow-wrap:anywhere;
  word-break:break-word;
}
input,
select,
textarea{
  min-width:0 !important;
}
@media(max-width:900px){
  .pack-calc-card{min-width:0 !important; width:100% !important;}
  .pack-calc-row{
    grid-template-columns:1fr 1fr !important;
  }
  .pack-calc-detail-field,
  .pack-calc-row > div:last-child{
    grid-column:auto;
  }
  .pack-calc-balance-row{
    grid-template-columns:1fr !important;
  }
  .pack-calc-result{
    padding-right:14px !important;
    padding-top:54px !important;
  }
  .pack-calc-copy-badge{
    left:12px;
    right:auto;
  }
  .pack-calc-before-line,
  .pack-calc-final-line{
    white-space:normal !important;
  }
}
@media(max-width:560px){
  .pack-calc-row{
    grid-template-columns:1fr !important;
  }
  .pack-calc-head{
    flex-direction:column;
  }
  .pack-calc-head .secondary.small{
    width:100%;
  }
  .pack-calc-balance-result div{
    flex-direction:column;
    gap:3px;
  }
  .pack-calc-balance-result b{
    text-align:left;
  }
}

/* =====================================================
   PATCH - INPUT PACK CALCULATOR COPY POLISH V2
   ===================================================== */
.pack-profit-card.cream,
.pack-profit-card.cream.profit-good,
.pack-profit-card.cream.profit-empty{
  background:linear-gradient(180deg,rgba(16,39,68,.96),rgba(10,26,49,.96)) !important;
  border:1px solid rgba(106,167,232,.18) !important;
  color:#eaf3ff !important;
}
.pack-profit-card.cream.profit-good .pack-profit-title,
.pack-profit-card.cream.profit-good .pack-profit-grid span{
  color:#b9d7fb !important;
}
.pack-profit-card.cream.profit-good .pack-profit-note{
  color:#7dd3fc !important;
}
.pack-profit-card.cream.profit-loss{
  background:linear-gradient(135deg,rgba(127,29,29,.88),rgba(153,27,27,.72)) !important;
  border-color:rgba(248,113,113,.35) !important;
}
.pack-calc-before-line,
.pack-calc-final-line{
  display:flex !important;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  white-space:normal !important;
  overflow-wrap:anywhere !important;
  word-break:break-word !important;
}
.pack-calc-line-text{
  flex:1 1 auto;
  min-width:0;
  display:block !important;
  margin-left:0 !important;
  padding:0 !important;
  background:transparent !important;
  color:inherit !important;
  border-radius:0 !important;
}
.pack-calc-line-copy,
.pack-calc-copy-all-result{
  border:none !important;
  cursor:pointer;
  font-weight:1000 !important;
  border-radius:12px !important;
  background:linear-gradient(135deg,#2f78c4,#6aa7e8) !important;
  color:#fff !important;
  box-shadow:0 8px 18px rgba(0,0,0,.18);
}
.pack-calc-line-copy{
  flex:0 0 auto;
  min-height:30px !important;
  padding:6px 12px !important;
  font-size:12px !important;
}
.pack-calc-copy-all-result{
  width:100%;
  margin-top:8px;
  min-height:38px !important;
  padding:8px 12px !important;
  text-align:center;
}
.pack-calc-balance-input{
  align-self:stretch;
}
.pack-calc-balance-input input{
  width:100%;
}
.pack-calc-copy-badge{
  min-width:78px !important;
}
@media(max-width:900px){
  .pack-calc-before-line,
  .pack-calc-final-line{
    flex-direction:column;
  }
  .pack-calc-line-copy{
    width:100%;
  }
}


/* =====================================================
   PATCH - INPUT PACK UI POLISH V3
   Focus: readable result cards, safe status colors, autofill fix.
   ===================================================== */
.pack-autofill-decoy{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  overflow:hidden!important;
  opacity:0!important;
  pointer-events:none!important;
  left:-9999px!important;
  top:auto!important;
}

/* Calculator container stays dashboard dark. Result cards inside use readable cream. */
.pack-calc-card{
  background:linear-gradient(180deg,rgba(16,39,68,.96),rgba(10,26,49,.96)) !important;
  border:1px solid rgba(106,167,232,.20) !important;
  color:#eaf3ff !important;
}
.pack-calc-title{color:#dbeafe!important;}
.pack-calc-sub{color:#b9d7fb!important;}
.pack-calc-card label{color:#dbeafe!important;}
.pack-calc-card input,
.pack-calc-card select{
  background:rgba(255,255,255,.065)!important;
  border:1px solid rgba(148,163,184,.22)!important;
  color:#f8fbff!important;
}
.pack-calc-card input::placeholder{color:#9fbce2!important;opacity:.85!important;}

/* Main calculator result lines: cream card with dark readable text. */
.pack-calc-result,
.pack-calc-before-line,
.pack-calc-final-line{
  background:#fff7df!important;
  border:1px solid #efd28e!important;
  color:#061a35!important;
}
.pack-calc-before-line,
.pack-calc-final-line{
  box-shadow:0 1px 0 rgba(255,255,255,.55) inset;
}
.pack-calc-line-text,
.pack-calc-result strong{
  color:#061a35!important;
  text-shadow:none!important;
}
.pack-calc-result b{
  color:#007a5a!important;
  text-shadow:none!important;
}
.pack-calc-result span:not(.pack-calc-copy-badge):not(.pack-calc-line-text){
  background:#ffedd5!important;
  color:#7c2d12!important;
}
.pack-calc-line-copy,
.pack-calc-copy-badge,
.pack-calc-copy-all-result,
.pack-calc-balance-row .secondary.small{
  background:linear-gradient(135deg,#2f78c4,#6aa7e8)!important;
  color:#fff!important;
  border:0!important;
  text-shadow:none!important;
}

/* Balance result: readable cream by default; danger keeps red but readable. */
.pack-calc-balance-result{
  background:#fff7df!important;
  border:1px solid #efd28e!important;
  color:#061a35!important;
}
.pack-calc-balance-result.muted{
  background:rgba(255,255,255,.06)!important;
  border:1px dashed rgba(106,167,232,.22)!important;
  color:#cfe4ff!important;
}
.pack-calc-balance-result div{
  border-bottom:1px dashed rgba(146,64,14,.22)!important;
}
.pack-calc-balance-result span{
  color:#5f3b08!important;
}
.pack-calc-balance-result b{
  color:#061a35!important;
}
.pack-calc-balance-result.ok .strong b{
  color:#007a5a!important;
}
.pack-calc-balance-result.minus{
  background:linear-gradient(135deg,#7f1d1d,#991b1b)!important;
  border-color:rgba(248,113,113,.55)!important;
  color:#fff!important;
}
.pack-calc-balance-result.minus span,
.pack-calc-balance-result.minus b,
.pack-calc-balance-result.minus .strong b{
  color:#fff7ed!important;
}
.pack-calc-balance-result.minus div{
  border-bottom-color:rgba(255,255,255,.18)!important;
}

/* Profit panel: never let safe profit turn the whole panel green. */
.pack-profit-card.cream,
.pack-profit-card.cream.profit-good,
.pack-profit-card.cream.profit-empty{
  background:linear-gradient(135deg,#fff7df,#fff1bd)!important;
  border:1px solid #efd28e!important;
  color:#061a35!important;
}
.pack-profit-card.cream .pack-profit-title,
.pack-profit-card.cream.profit-good .pack-profit-title{
  color:#8a3f0a!important;
}
.pack-profit-card.cream .pack-profit-grid div{
  background:rgba(255,255,255,.72)!important;
  border:1px solid rgba(180,83,9,.20)!important;
}
.pack-profit-card.cream .pack-profit-grid span,
.pack-profit-card.cream.profit-good .pack-profit-grid span{
  color:#8a3f0a!important;
}
.pack-profit-card.cream .pack-profit-grid strong{
  color:#061a35!important;
}
.pack-profit-card.cream.profit-good #packProfitValue{
  color:#007a5a!important;
}
.pack-profit-card.cream.profit-good .pack-profit-note{
  color:#006b4f!important;
}
.pack-profit-card.cream.profit-loss{
  background:linear-gradient(135deg,#fff7df,#fff1bd)!important;
  border:2px solid #ef4444!important;
}
.pack-profit-card.cream.profit-loss .pack-profit-title,
.pack-profit-card.cream.profit-loss .pack-profit-note,
.pack-profit-card.cream.profit-loss .pack-profit-grid span{
  color:#b91c1c!important;
}
.pack-profit-card.cream.profit-loss #packProfitValue{
  color:#dc2626!important;
}

/* Status cards may stay green/red, but text must be high contrast. */
.gold-billing-item.ok,
.money-balance-grid .after.has-balance{
  background:linear-gradient(135deg,#166534,#2f855a)!important;
  border-color:rgba(134,239,172,.45)!important;
}
.gold-billing-item.ok span,
.gold-billing-item.ok b,
.money-balance-grid .after.has-balance span,
.money-balance-grid .after.has-balance b,
.money-balance-grid .after.has-balance small,
.money-balance-grid .after.has-balance strong{
  color:#fff7ed!important;
  text-shadow:none!important;
}
.gold-billing-item.danger,
.money-balance-grid .after.debt{
  background:linear-gradient(135deg,#7f1d1d,#991b1b)!important;
  border-color:rgba(248,113,113,.55)!important;
}
.gold-billing-item.danger span,
.gold-billing-item.danger b,
.money-balance-grid .after.debt span,
.money-balance-grid .after.debt b,
.money-balance-grid .after.debt small,
.money-balance-grid .after.debt strong{
  color:#fff7ed!important;
  text-shadow:none!important;
}

/* Long formula wrapping for desktop and mobile. */
.pack-calc-before-line,
.pack-calc-final-line,
.pack-calc-line-text{
  white-space:normal!important;
  overflow-wrap:anywhere!important;
  word-break:break-word!important;
  line-height:1.45!important;
}
@media(max-width:900px){
  .pack-profit-grid{grid-template-columns:1fr!important;}
  .pack-calc-balance-row .secondary.small{width:100%!important;min-height:44px!important;}
}

/* =====================================================
   PATCH - RESULT WRAPPER CREAM V1
   Scope: visual only. Keep green/red status logic unchanged.
   - Input Gold billing preview outer wrapper becomes cream.
   - Status mini cards may remain green/red, but text stays readable.
   - Input Pack profit wrapper stays cream/readable, while profit value/status can be colored.
===================================================== */

/* INPUT GOLD: outer result wrapper / card luar */
.gold-parse-preview.gold-billing-preview,
.gold-parse-preview.gold-billing-preview.ok,
.gold-parse-preview.gold-billing-preview.danger,
.gold-parse-preview.gold-billing-preview.warn{
  background:linear-gradient(135deg,#fff7df,#fff1bd) !important;
  border:1px solid #efd28e !important;
  color:#061a35 !important;
  box-shadow:0 14px 34px rgba(0,0,0,.16) !important;
}

/* Normal data cards inside Input Gold preview */
.gold-billing-item:not(.ok):not(.danger):not(.warn):not(.strong){
  background:rgba(255,255,255,.74) !important;
  border:1px solid rgba(180,83,9,.20) !important;
  color:#061a35 !important;
}
.gold-billing-item:not(.ok):not(.danger):not(.warn) span{
  color:#8a3f0a !important;
  text-shadow:none !important;
}
.gold-billing-item:not(.ok):not(.danger):not(.warn) b{
  color:#061a35 !important;
  text-shadow:none !important;
}
.gold-billing-item.strong:not(.ok):not(.danger):not(.warn){
  background:rgba(255,255,255,.74) !important;
  border:1px solid rgba(180,83,9,.20) !important;
}
.gold-billing-item.strong:not(.ok):not(.danger):not(.warn) span{
  color:#8a3f0a !important;
}
.gold-billing-item.strong:not(.ok):not(.danger):not(.warn) b{
  color:#007a5a !important;
}

/* Status cards: green/red is allowed, but text must not be green-on-green or red-on-red */
.gold-billing-item.ok,
.mini-card.available,
.mini-card.has-balance,
.mini-card.balance-ok,
.money-balance-grid .after.has-balance{
  background:linear-gradient(135deg,#166534,#2f855a) !important;
  border:1px solid rgba(134,239,172,.55) !important;
  color:#fff7ed !important;
}
.gold-billing-item.ok span,
.gold-billing-item.ok b,
.mini-card.available .mini-label,
.mini-card.available .mini-value,
.mini-card.available .mini-name,
.mini-card.has-balance .mini-label,
.mini-card.has-balance .mini-value,
.mini-card.has-balance .mini-name,
.mini-card.balance-ok .mini-label,
.mini-card.balance-ok .mini-value,
.mini-card.balance-ok .mini-name,
.money-balance-grid .after.has-balance span,
.money-balance-grid .after.has-balance b,
.money-balance-grid .after.has-balance small,
.money-balance-grid .after.has-balance strong{
  color:#fff7ed !important;
  text-shadow:none !important;
}
.gold-billing-item.danger,
.mini-card.due,
.mini-card.debt,
.mini-card.no-balance,
.money-balance-grid .after.debt{
  background:linear-gradient(135deg,#7f1d1d,#991b1b) !important;
  border:1px solid rgba(248,113,113,.58) !important;
  color:#fff7ed !important;
}
.gold-billing-item.danger span,
.gold-billing-item.danger b,
.mini-card.due .mini-label,
.mini-card.due .mini-value,
.mini-card.due .mini-name,
.mini-card.debt .mini-label,
.mini-card.debt .mini-value,
.mini-card.debt .mini-name,
.mini-card.no-balance .mini-label,
.mini-card.no-balance .mini-value,
.mini-card.no-balance .mini-name,
.money-balance-grid .after.debt span,
.money-balance-grid .after.debt b,
.money-balance-grid .after.debt small,
.money-balance-grid .after.debt strong{
  color:#fff7ed !important;
  text-shadow:none !important;
}
.gold-billing-item.warn{
  background:linear-gradient(135deg,#fef3c7,#fde68a) !important;
  border:1px solid rgba(217,119,6,.32) !important;
}
.gold-billing-item.warn span,
.gold-billing-item.warn b{
  color:#7c2d12 !important;
  text-shadow:none !important;
}
.gold-billing-note,
.gold-billing-note.ok,
.gold-billing-note.danger,
.gold-billing-note.warn{
  background:rgba(255,255,255,.68) !important;
  border:1px dashed rgba(180,83,9,.28) !important;
  color:#5f3b08 !important;
  text-shadow:none !important;
}
.gold-billing-note.ok{color:#047857 !important;}
.gold-billing-note.danger{color:#b91c1c !important;}

/* INPUT PACK: card luar profit tetap cream; status/value boleh berwarna */
.pack-profit-card.cream,
.pack-profit-card.cream.profit-good,
.pack-profit-card.cream.profit-empty,
.pack-profit-card.cream.profit-loss{
  background:linear-gradient(135deg,#fff7df,#fff1bd) !important;
  border:1px solid #efd28e !important;
  color:#061a35 !important;
  box-shadow:0 14px 34px rgba(0,0,0,.15) !important;
}
.pack-profit-card.cream .pack-profit-title,
.pack-profit-card.cream.profit-good .pack-profit-title{
  color:#8a3f0a !important;
}
.pack-profit-card.cream .pack-profit-grid div{
  background:rgba(255,255,255,.74) !important;
  border:1px solid rgba(180,83,9,.20) !important;
}
.pack-profit-card.cream .pack-profit-grid span{
  color:#8a3f0a !important;
}
.pack-profit-card.cream .pack-profit-grid strong{
  color:#061a35 !important;
}
.pack-profit-card.cream.profit-good #packProfitValue{
  color:#007a5a !important;
}
.pack-profit-card.cream.profit-good .pack-profit-note{
  color:#047857 !important;
}
.pack-profit-card.cream.profit-loss{
  border-color:rgba(239,68,68,.65) !important;
}
.pack-profit-card.cream.profit-loss .pack-profit-title,
.pack-profit-card.cream.profit-loss .pack-profit-note,
.pack-profit-card.cream.profit-loss .pack-profit-grid span{
  color:#b91c1c !important;
}
.pack-profit-card.cream.profit-loss #packProfitValue{
  color:#dc2626 !important;
}


/* =====================================================
   GLOBAL CSS CLEAN REBUILD V1
   Source base: global (5).css
   Goal:
   - Stop destructive global wrapping/table overrides.
   - Keep desktop LSS Customers as clean table.
   - Keep mobile LSS Customers as card view.
   - Fix only scoped mobile wrapping for Input Gold History,
     Input Uang Pack, and Input Uang Gold.
   ===================================================== */

/* ---------- Safe page sizing ---------- */
html, body{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}
.main,
.page,
.card,
.topbar{
  min-width:0;
  box-sizing:border-box;
}

/* ---------- Safe text wrapping, not for tables ---------- */
.card h1,
.card h2,
.card h3,
.card h4,
.card p,
.alert,
.preview,
.empty,
.muted,
.info-box,
.result-card,
.kpi-card,
.stat-card,
.payment-card,
.email-card,
.peak-card,
.pack-calc-before-line,
.pack-calc-final-line,
.pack-calc-line-text,
.pack-calc-balance-result,
.pack-profit-note,
.gold-billing-note{
  overflow-wrap:anywhere;
  word-break:normal;
  white-space:normal;
}
input,select,textarea,button,.btn{
  max-width:100%;
  min-width:0;
  box-sizing:border-box;
}
button,.btn{line-height:1.2;}
.sidebar .nav-btn,
.nav .nav-btn{
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

/* ---------- Tables: scroll inside wrapper only ---------- */
.table-wrap,
.responsive-table,
.peak-table-wrap,
.payment-table-wrap,
.email-table-wrap,
.input-history-table-wrap,
.gh-lite-table{
  width:100%;
  max-width:100%;
  overflow-x:auto!important;
  overflow-y:visible;
  -webkit-overflow-scrolling:touch;
}
.table-wrap table,
.responsive-table table,
.peak-table-wrap table,
.payment-table-wrap table,
.email-table-wrap table,
.input-history-table-wrap table,
.gh-lite-table table{
  min-width:680px;
  max-width:none;
}
table,thead,tbody,tfoot,tr,th,td{
  word-break:normal;
}

/* =====================================================
   INPUT GOLD HISTORY / GOLD HISTORY PURCHASE
   Compact KPI cards. Desktop 4 columns, mobile 1 column.
   ===================================================== */
.input-gold-history-card .input-history-summary-cream,
.gold-history-lite-card .gh-lite-summary-cream,
.input-history-summary-cream,
.gh-lite-summary-cream{
  align-items:start!important;
  align-content:start!important;
  grid-auto-rows:auto!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  overflow:visible!important;
}
.input-gold-history-card .input-history-mini-card,
.gold-history-lite-card .gh-lite-card,
.input-history-mini-card,
.gh-lite-card{
  align-self:start!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  overflow:visible!important;
}
.input-history-mini-card *,
.gh-lite-card *{
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
}
@media(min-width:901px){
  .input-history-summary-cream,
  .gh-lite-summary-cream{
    display:grid!important;
    grid-template-columns:1.35fr 1fr 1fr 1fr!important;
    gap:10px!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
  }
}
@media(max-width:900px){
  .input-gold-history-card,
  .gold-history-lite-card{
    max-width:100%!important;
    overflow-x:hidden!important;
  }
  .input-history-summary-cream,
  .gh-lite-summary-cream{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    padding:10px!important;
    border-radius:16px!important;
  }
  .input-history-mini-card,
  .gh-lite-card{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    padding:12px!important;
  }
  .input-history-head,
  .gh-lite-head{
    display:block!important;
  }
  .input-history-head button,
  .gh-lite-head button{
    width:100%!important;
    margin-top:10px!important;
  }
}

/* =====================================================
   INPUT UANG PACK MOBILE ONLY
   Remove forced wide rows only on phone/tablet.
   ===================================================== */
@media(max-width:900px){
  .pack-input-card{
    max-width:100%!important;
    overflow-x:hidden!important;
  }
  .pack-input-card .pack-forced-row,
  .pack-input-card .pack-row,
  .pack-input-card .pack-row-4,
  .pack-input-card .pack-row-3{
    display:grid!important;
    grid-template-columns:1fr!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    gap:12px!important;
  }
  .pack-input-card .pack-row > div,
  .pack-input-card input,
  .pack-input-card select,
  .pack-input-card textarea,
  .pack-detail-cream-row,
  .pack-detail-cream-row input,
  .pack-detail-cpanel-box,
  .pack-detail-cpanel-box input{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
  }
  .pack-input-card label{
    white-space:normal!important;
  }
}

/* =====================================================
   INPUT UANG GOLD MOBILE ONLY
   Balance cards stack vertically on phone.
   ===================================================== */
@media(max-width:760px){
  .money-balance-note{
    max-width:100%!important;
    overflow-x:hidden!important;
  }
  .money-balance-grid{
    display:grid!important;
    grid-template-columns:1fr!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    gap:10px!important;
    overflow:visible!important;
    padding-bottom:0!important;
  }
  .money-balance-grid > div{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    height:auto!important;
  }
  .money-balance-grid span,
  .money-balance-grid b,
  .money-balance-grid em{
    white-space:normal!important;
    overflow-wrap:anywhere!important;
    overflow:visible!important;
    text-overflow:clip!important;
  }
}

/* =====================================================
   LSS CUSTOMERS DESKTOP CLEAN TABLE
   Desktop only. Does not touch email/PDF/payment logic.
   Mobile card view remains unchanged.
   ===================================================== */
@media(min-width:901px){
  #page-lss-customers .cards-mobile,
  .page-lss-customers .cards-mobile{
    display:none!important;
  }
  #page-lss-customers .table-card,
  .page-lss-customers .table-card{
    background:linear-gradient(180deg,rgba(14,31,55,.98),rgba(8,20,38,.98))!important;
    border:1px solid rgba(148,163,184,.16)!important;
    border-radius:22px!important;
    padding:16px!important;
    min-height:0!important;
    height:auto!important;
    max-height:none!important;
    overflow:visible!important;
  }
  #page-lss-customers .desktop-table,
  .page-lss-customers .desktop-table{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    overflow-x:auto!important;
    overflow-y:visible!important;
    border-radius:16px!important;
    border:1px solid rgba(148,163,184,.14)!important;
    background:rgba(2,6,23,.18)!important;
    -webkit-overflow-scrolling:touch!important;
  }
  #page-lss-customers table,
  .page-lss-customers table{
    width:100%!important;
    min-width:980px!important;
    table-layout:auto!important;
    border-collapse:separate!important;
    border-spacing:0!important;
  }
  #page-lss-customers th,
  .page-lss-customers th{
    position:sticky!important;
    top:0!important;
    z-index:2!important;
    background:linear-gradient(180deg,rgba(20,45,78,.98),rgba(13,32,59,.98))!important;
    color:#dbeafe!important;
    border-bottom:1px solid rgba(111,159,211,.22)!important;
    padding:11px 10px!important;
    font-size:11px!important;
    line-height:1.25!important;
    letter-spacing:.04em!important;
    text-transform:uppercase!important;
    white-space:nowrap!important;
  }
  #page-lss-customers td,
  .page-lss-customers td{
    padding:11px 10px!important;
    font-size:12px!important;
    line-height:1.35!important;
    vertical-align:middle!important;
    color:#eff6ff!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
    border-bottom:1px solid rgba(111,159,211,.10)!important;
    background:rgba(255,255,255,.018)!important;
  }
  #page-lss-customers tbody tr:hover td,
  .page-lss-customers tbody tr:hover td{
    background:rgba(96,165,250,.08)!important;
  }

  /* Row accents by status class */
  #page-lss-customers tbody tr.row-active td,
  .page-lss-customers tbody tr.row-active td{
    background:linear-gradient(90deg,rgba(34,197,94,.085),rgba(255,255,255,.018) 24%)!important;
    border-bottom-color:rgba(34,197,94,.16)!important;
  }
  #page-lss-customers tbody tr.row-due-soon td,
  .page-lss-customers tbody tr.row-due-soon td{
    background:linear-gradient(90deg,rgba(245,158,11,.13),rgba(255,255,255,.018) 24%)!important;
    border-bottom-color:rgba(245,158,11,.22)!important;
  }
  #page-lss-customers tbody tr.row-overdue td,
  .page-lss-customers tbody tr.row-overdue td{
    background:linear-gradient(90deg,rgba(239,68,68,.13),rgba(255,255,255,.018) 24%)!important;
    border-bottom-color:rgba(239,68,68,.22)!important;
  }
  #page-lss-customers tbody tr.row-inactive td,
  .page-lss-customers tbody tr.row-inactive td{
    background:linear-gradient(90deg,rgba(148,163,184,.10),rgba(255,255,255,.014) 24%)!important;
    border-bottom-color:rgba(148,163,184,.18)!important;
  }

  /* Readable text */
  #page-lss-customers .main,
  .page-lss-customers .main{
    color:#ffffff!important;
    font-size:12.5px!important;
    line-height:1.25!important;
    font-weight:950!important;
    white-space:normal!important;
    overflow:visible!important;
    text-overflow:clip!important;
  }
  #page-lss-customers .sub,
  .page-lss-customers .sub{
    color:#aac3e8!important;
    font-size:10.5px!important;
    line-height:1.25!important;
    margin-top:4px!important;
    white-space:normal!important;
  }
  #page-lss-customers .amount,
  .page-lss-customers .amount{
    text-align:right!important;
    font-weight:900!important;
    color:#ffffff!important;
  }

  /* Status badge colors */
  #page-lss-customers .badge,
  .page-lss-customers .badge{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    min-width:74px!important;
    padding:6px 9px!important;
    border-radius:999px!important;
    font-size:10px!important;
    line-height:1!important;
    font-weight:1000!important;
    letter-spacing:.035em!important;
    text-transform:uppercase!important;
    border:1px solid rgba(255,255,255,.16)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.10)!important;
    white-space:normal!important;
  }
  #page-lss-customers .badge.active,
  .page-lss-customers .badge.active{
    background:rgba(22,163,74,.24)!important;color:#dcfce7!important;border-color:rgba(74,222,128,.38)!important;
  }
  #page-lss-customers .badge.soon,
  #page-lss-customers .badge.due-soon,
  .page-lss-customers .badge.soon,
  .page-lss-customers .badge.due-soon{
    background:rgba(245,158,11,.24)!important;color:#fff7ed!important;border-color:rgba(251,191,36,.42)!important;
  }
  #page-lss-customers .badge.due,
  #page-lss-customers .badge.overdue,
  .page-lss-customers .badge.due,
  .page-lss-customers .badge.overdue{
    background:rgba(220,38,38,.28)!important;color:#fee2e2!important;border-color:rgba(248,113,113,.42)!important;
  }
  #page-lss-customers .badge.pending,
  .page-lss-customers .badge.pending{
    background:rgba(59,130,246,.22)!important;color:#dbeafe!important;border-color:rgba(147,197,253,.40)!important;
  }
  #page-lss-customers .badge.off,
  #page-lss-customers .badge.inactive,
  .page-lss-customers .badge.off,
  .page-lss-customers .badge.inactive{
    background:rgba(100,116,139,.22)!important;color:#e2e8f0!important;border-color:rgba(203,213,225,.24)!important;
  }

  /* Action buttons stay compact and aligned */
  #page-lss-customers td:last-child > div,
  .page-lss-customers td:last-child > div{
    display:flex!important;
    gap:5px!important;
    flex-wrap:wrap!important;
    align-items:center!important;
    justify-content:flex-start!important;
  }
  #page-lss-customers td .btn,
  #page-lss-customers td button,
  #page-lss-customers .small-btn,
  #page-lss-customers .btn.small,
  .page-lss-customers td .btn,
  .page-lss-customers td button,
  .page-lss-customers .small-btn,
  .page-lss-customers .btn.small{
    padding:6px 8px!important;
    min-height:28px!important;
    border-radius:10px!important;
    font-size:10px!important;
    line-height:1!important;
    white-space:nowrap!important;
    min-width:auto!important;
    box-shadow:none!important;
  }
  #page-lss-customers .summary-grid,
  .page-lss-customers .summary-grid{
    display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    gap:10px!important;
  }
}

/* LSS mobile: keep card view. Only small safety limits, no redesign. */
@media(max-width:900px){
  #page-lss-customers .desktop-table,
  .page-lss-customers .desktop-table{
    display:none!important;
  }
  #page-lss-customers .cards-mobile,
  .page-lss-customers .cards-mobile{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:12px!important;
  }
  #page-lss-customers .summary-grid,
  #page-lss-customers .advanced-filter,
  .page-lss-customers .summary-grid,
  .page-lss-customers .advanced-filter{
    grid-template-columns:1fr!important;
  }
}


/* =====================================================
   WEB PAYMENT HISTORY - SAFE STYLE PATCH
   Dipasang di atas global.css asli agar dashboard tidak polos.
   ===================================================== */
.web-gold-money-history-card{
  margin-top:18px;
}
.web-gmh-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin-bottom:14px;
}
.web-gmh-head h3{
  margin:0 0 4px;
  color:#fff;
}
.web-gmh-head p{
  margin:0;
}
.web-gmh-toolbar{
  display:grid;
  grid-template-columns:1.1fr 1.1fr auto;
  gap:12px;
  align-items:end;
  margin:12px 0;
}
.web-gmh-toolbar label{
  display:block;
  margin-bottom:6px;
  font-size:11px;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#bfdbfe;
}
.web-gmh-toolbar select,
.web-gmh-toolbar button{
  width:100%;
  min-height:42px;
}
.web-gmh-summary{
  display:grid;
  grid-template-columns:120px 1fr 160px;
  gap:10px;
  margin:12px 0;
}
.web-gmh-summary > div{
  border:1px solid rgba(147,197,253,.18);
  background:rgba(255,255,255,.045);
  border-radius:14px;
  padding:10px 12px;
}
.web-gmh-summary span{
  display:block;
  font-size:10px;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
  opacity:.75;
  margin-bottom:4px;
}
.web-gmh-summary b{
  display:block;
  font-size:16px;
  overflow-wrap:anywhere;
}
.web-gmh-note{
  margin:10px 0 12px;
  padding:10px 12px;
  border-radius:14px;
  background:#fff7ed;
  color:#431407;
  border:1px solid rgba(251,146,60,.35);
  font-size:12px;
  line-height:1.35;
}
.web-gmh-list{
  display:grid;
  gap:12px;
}
.web-gmh-card{
  border:1px solid rgba(96,165,250,.35);
  background:linear-gradient(180deg, rgba(27,55,90,.98), rgba(17,39,68,.98));
  border-radius:16px;
  padding:12px;
  overflow:hidden;
  box-shadow:0 12px 28px rgba(0,0,0,.22);
}
.web-gmh-card-head{
  display:grid;
  grid-template-columns:1fr auto;
  gap:12px;
  align-items:start;
  padding-bottom:10px;
  border-bottom:1px solid rgba(147,197,253,.16);
}
.web-gmh-card-head b{
  display:block;
  color:#ffffff;
  font-size:22px;
  line-height:1.15;
  letter-spacing:.02em;
  text-transform:uppercase;
  text-shadow:0 2px 10px rgba(0,0,0,.28);
}
.web-gmh-card-head span{
  display:block;
  color:#dbeafe;
  font-size:13px;
  font-weight:800;
  margin-top:4px;
}
.web-gmh-card-head strong{
  color:#fde047;
  font-size:22px;
  font-weight:1000;
  line-height:1.15;
  text-align:right;
  text-shadow:0 2px 10px rgba(0,0,0,.26);
}
.web-gmh-meta.web-gmh-meta-one-row{
  display:grid;
  grid-template-columns:minmax(130px,.9fr) minmax(110px,.7fr) auto auto;
  gap:8px;
  align-items:stretch;
  margin-top:12px;
}
.web-gmh-meta.web-gmh-meta-one-row > div,
.web-gmh-meta.web-gmh-meta-one-row > a,
.web-gmh-meta.web-gmh-meta-one-row > button{
  min-height:48px;
  border-radius:13px;
}
.web-gmh-meta.web-gmh-meta-one-row > div{
  background:rgba(5,18,34,.38);
  border:1px solid rgba(147,197,253,.13);
  padding:8px 10px;
}
.web-gmh-meta.web-gmh-meta-one-row span{
  display:block;
  color:#bfdbfe;
  opacity:1;
  font-size:10px;
  font-weight:900;
  margin-bottom:3px;
}
.web-gmh-meta.web-gmh-meta-one-row b{
  color:#ffffff;
  font-size:14px;
  line-height:1.15;
  overflow-wrap:anywhere;
}
.web-gmh-meta.web-gmh-meta-one-row .web-gmh-proof-ok b{
  color:#bbf7d0;
}
.web-gmh-meta.web-gmh-meta-one-row .web-gmh-proof-empty b{
  color:#fecaca;
}
.web-gmh-meta.web-gmh-meta-one-row .web-gmh-action{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  padding:8px 12px;
  margin:0;
  border-radius:13px;
  font-size:12px;
  font-weight:950;
  text-decoration:none;
  border:1px solid rgba(147,197,253,.2);
}
.web-gmh-meta.web-gmh-meta-one-row .web-gmh-open{
  background:linear-gradient(135deg,#1d4ed8,#60a5fa);
  color:#fff;
}
.web-gmh-meta.web-gmh-meta-one-row .web-gmh-copy{
  background:linear-gradient(135deg,#2563eb,#3b82f6);
  color:#fff;
}
.web-gmh-actions{
  display:none;
}
.web-gmh-photo{
  margin-top:12px;
  border-radius:14px;
  overflow:hidden;
  background:#ffffff;
  border:2px solid rgba(226,232,240,.85);
}
.web-gmh-photo img{
  display:block;
  width:100%;
  height:auto;
}
.web-gmh-photo.is-error{
  padding:14px;
  color:#fecaca;
  font-size:12px;
}
.web-gmh-empty{
  padding:16px;
  border:1px dashed rgba(147,197,253,.25);
  background:rgba(255,255,255,.035);
  border-radius:14px;
  text-align:center;
  color:#bfdbfe;
}
.web-gmh-empty.error{
  color:#fecaca;
  background:rgba(127,29,29,.28);
  border-color:rgba(248,113,113,.35);
}
@media(max-width:900px){
  .web-gmh-meta.web-gmh-meta-one-row{
    grid-template-columns:1fr 1fr;
  }
}
@media(max-width:760px){
  .web-gmh-head{
    display:block;
  }
  .web-gmh-head button{
    width:100%;
    margin-top:10px;
  }
  .web-gmh-toolbar{
    grid-template-columns:1fr;
  }
  .web-gmh-summary{
    grid-template-columns:1fr;
  }
  .web-gmh-card-head{
    grid-template-columns:1fr;
  }
  .web-gmh-card-head strong{
    text-align:left;
  }
  .web-gmh-meta.web-gmh-meta-one-row{
    grid-template-columns:1fr;
  }
}



/* =====================================================
   WEB PAYMENT HISTORY BATCH 6
   Compact cream card:
   - Card background cream
   - Hapus mini Paid/Proof box
   - Action Open Proof / Copy Link pindah ke area ringkas
   ===================================================== */
.web-gmh-card{
  background:linear-gradient(180deg,#fff7ed 0%,#fffbeb 100%)!important;
  color:#431407!important;
  border:1px solid rgba(251,146,60,.42)!important;
  box-shadow:0 12px 28px rgba(67,20,7,.14)!important;
  padding:12px!important;
}
.web-gmh-card-head{
  display:grid!important;
  grid-template-columns:1fr auto!important;
  gap:12px!important;
  align-items:start!important;
  padding-bottom:8px!important;
  border-bottom:1px solid rgba(180,83,9,.18)!important;
}
.web-gmh-card-head b{
  color:#0f172a!important;
  font-size:23px!important;
  line-height:1.05!important;
  letter-spacing:.015em!important;
  text-transform:uppercase!important;
  text-shadow:none!important;
}
.web-gmh-card-head span{
  color:#7c2d12!important;
  font-size:13px!important;
  font-weight:900!important;
  margin-top:5px!important;
}
.web-gmh-card-head strong{
  color:#ca8a04!important;
  font-size:24px!important;
  font-weight:1000!important;
  line-height:1.05!important;
  text-align:right!important;
  text-shadow:none!important;
}

/* Hide old small info boxes if older markup remains */
.web-gmh-meta.web-gmh-meta-one-row{
  display:none!important;
}

/* Compact action row */
.web-gmh-compact-actions{
  display:flex!important;
  justify-content:flex-end!important;
  align-items:center!important;
  gap:8px!important;
  margin:9px 0 2px!important;
}
.web-gmh-compact-actions .web-gmh-action{
  min-width:108px!important;
  min-height:38px!important;
  height:38px!important;
  border-radius:12px!important;
  padding:8px 13px!important;
  font-size:12px!important;
  font-weight:950!important;
  text-decoration:none!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  border:1px solid rgba(147,197,253,.25)!important;
}
.web-gmh-compact-actions .web-gmh-open{
  background:linear-gradient(135deg,#1d4ed8,#60a5fa)!important;
  color:#fff!important;
}
.web-gmh-compact-actions .web-gmh-copy{
  background:linear-gradient(135deg,#2563eb,#3b82f6)!important;
  color:#fff!important;
}
.web-gmh-no-proof{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:34px!important;
  border-radius:999px!important;
  padding:7px 12px!important;
  background:#fee2e2!important;
  color:#991b1b!important;
  font-size:12px!important;
  font-weight:950!important;
}
.web-gmh-photo{
  margin-top:10px!important;
  border-radius:14px!important;
  background:#ffffff!important;
  border:2px solid rgba(180,83,9,.22)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.7)!important;
}
.web-gmh-photo img{
  display:block!important;
  width:100%!important;
  height:auto!important;
}
@media(max-width:760px){
  .web-gmh-card-head{
    grid-template-columns:1fr!important;
  }
  .web-gmh-card-head strong{
    text-align:left!important;
  }
  .web-gmh-compact-actions{
    justify-content:stretch!important;
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
  }
  .web-gmh-compact-actions .web-gmh-action{
    min-width:0!important;
    width:100%!important;
  }
}



/* =====================================================
   WEB PAYMENT HISTORY BATCH 7
   Audit filter ringan:
   - Proof filter
   - Search
   - Collapse/Expand photo per card
   - Warning missing proof
   ===================================================== */
.web-gmh-auditbar{
  display:grid;
  grid-template-columns:220px 1fr;
  gap:12px;
  align-items:end;
  margin:10px 0 12px;
}
.web-gmh-auditbar label{
  display:block;
  margin-bottom:6px;
  font-size:11px;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#bfdbfe;
}
.web-gmh-auditbar select,
.web-gmh-auditbar input{
  width:100%;
  min-height:42px;
  border-radius:14px;
}
.web-gmh-collapse{
  background:linear-gradient(135deg,#92400e,#f59e0b)!important;
  color:#fff!important;
}
.web-gmh-warning{
  margin:8px 0 0;
  padding:9px 11px;
  border-radius:12px;
  background:#fee2e2;
  border:1px solid rgba(248,113,113,.45);
  color:#7f1d1d;
  font-size:12px;
  font-weight:900;
}
.web-gmh-card.is-photo-collapsed .web-gmh-photo{
  display:none!important;
}
@media(max-width:760px){
  .web-gmh-auditbar{
    grid-template-columns:1fr;
  }
  .web-gmh-compact-actions{
    grid-template-columns:1fr 1fr!important;
  }
  .web-gmh-compact-actions .web-gmh-collapse{
    grid-column:1 / -1;
  }
}



/* =====================================================
   WEB PAYMENT HISTORY BATCH 8
   Audit Summary:
   - Total rows
   - Total paid
   - Missing proof total
   - Summary per seller
   ===================================================== */
.web-gmh-summary-actions{
  display:flex;
  justify-content:flex-end;
  margin:8px 0 10px;
}
.web-gmh-summary-actions button{
  min-height:36px;
  border-radius:12px;
  padding:8px 13px;
  font-size:12px;
  font-weight:950;
}
.web-gmh-audit-summary-box{
  margin:10px 0 12px;
}
.web-gmh-audit-summary-box.hidden{
  display:none!important;
}
.web-gmh-audit-summary-top{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin-bottom:10px;
}
.web-gmh-audit-summary-top > div{
  padding:11px 12px;
  border-radius:14px;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(147,197,253,.18);
}
.web-gmh-audit-summary-top > div.is-warning{
  background:#fee2e2;
  color:#7f1d1d;
  border-color:rgba(248,113,113,.45);
}
.web-gmh-audit-summary-top > div.is-safe{
  background:#dcfce7;
  color:#14532d;
  border-color:rgba(34,197,94,.35);
}
.web-gmh-audit-summary-top span,
.web-gmh-audit-summary-item span{
  display:block;
  font-size:10px;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
  opacity:.75;
  margin-bottom:4px;
}
.web-gmh-audit-summary-top b{
  display:block;
  font-size:18px;
  overflow-wrap:anywhere;
}
.web-gmh-audit-summary-list{
  display:grid;
  gap:8px;
}
.web-gmh-audit-summary-item{
  display:grid;
  grid-template-columns:1.2fr .55fr 1fr .7fr .7fr;
  gap:8px;
  align-items:center;
  padding:10px;
  border-radius:14px;
  background:linear-gradient(180deg,#fff7ed,#fffbeb);
  color:#431407;
  border:1px solid rgba(251,146,60,.28);
}
.web-gmh-audit-summary-item.has-warning{
  border-color:rgba(239,68,68,.45);
  box-shadow:0 0 0 1px rgba(239,68,68,.12) inset;
}
.web-gmh-audit-summary-item .seller{
  font-size:15px;
  font-weight:1000;
  color:#0f172a;
}
.web-gmh-audit-summary-item b{
  display:block;
  font-size:13px;
  overflow-wrap:anywhere;
}
.web-gmh-audit-summary-item.has-warning > div:last-child b{
  color:#b91c1c;
}
@media(max-width:900px){
  .web-gmh-audit-summary-item{
    grid-template-columns:1fr 1fr;
  }
  .web-gmh-audit-summary-item .seller{
    grid-column:1 / -1;
  }
}
@media(max-width:760px){
  .web-gmh-audit-summary-top{
    grid-template-columns:1fr;
  }
  .web-gmh-summary-actions button{
    width:100%;
  }
}


/* =====================================================
   WEB PAYMENT HISTORY - SPLIT SAFE STYLE
   ===================================================== */
.web-gold-money-history-card{margin-top:18px;}
.web-gmh-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:14px;}
.web-gmh-toolbar,.web-gmh-auditbar{display:grid;grid-template-columns:1.1fr 1.1fr auto;gap:12px;align-items:end;margin:12px 0;}
.web-gmh-auditbar{grid-template-columns:220px 1fr;}
.web-gmh-toolbar label,.web-gmh-auditbar label{display:block;margin-bottom:6px;font-size:11px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:#bfdbfe;}
.web-gmh-toolbar select,.web-gmh-toolbar button,.web-gmh-auditbar select,.web-gmh-auditbar input{width:100%;min-height:42px;border-radius:14px;}
.web-gmh-summary{display:grid;grid-template-columns:120px 1fr 160px;gap:10px;margin:12px 0;}
.web-gmh-summary>div{border:1px solid rgba(147,197,253,.18);background:rgba(255,255,255,.045);border-radius:14px;padding:10px 12px;}
.web-gmh-summary span,.web-gmh-audit-summary-top span,.web-gmh-audit-summary-item span{display:block;font-size:10px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;opacity:.75;margin-bottom:4px;}
.web-gmh-summary b{display:block;font-size:16px;overflow-wrap:anywhere;}
.web-gmh-note{margin:10px 0 12px;padding:10px 12px;border-radius:14px;background:#fff7ed;color:#431407;border:1px solid rgba(251,146,60,.35);font-size:12px;line-height:1.35;}
.web-gmh-list{display:grid;gap:12px;}
.web-gmh-card{background:linear-gradient(180deg,#fff7ed 0%,#fffbeb 100%)!important;color:#431407!important;border:1px solid rgba(251,146,60,.42)!important;box-shadow:0 12px 28px rgba(67,20,7,.14)!important;border-radius:16px;padding:12px;overflow:hidden;}
.web-gmh-card-head{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:start;padding-bottom:8px;border-bottom:1px solid rgba(180,83,9,.18);}
.web-gmh-card-head b{display:block;color:#0f172a!important;font-size:23px;line-height:1.05;letter-spacing:.015em;text-transform:uppercase;}
.web-gmh-card-head span{display:block;color:#7c2d12!important;font-size:13px;font-weight:900;margin-top:5px;}
.web-gmh-card-head strong{color:#ca8a04!important;font-size:24px;font-weight:1000;line-height:1.05;text-align:right;}
.web-gmh-compact-actions{display:flex;justify-content:flex-end;align-items:center;gap:8px;margin:9px 0 2px;}
.web-gmh-action{min-width:108px;min-height:38px;height:38px;border-radius:12px;padding:8px 13px;font-size:12px;font-weight:950;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(147,197,253,.25);}
.web-gmh-open{background:linear-gradient(135deg,#1d4ed8,#60a5fa)!important;color:#fff!important;}
.web-gmh-copy{background:linear-gradient(135deg,#2563eb,#3b82f6)!important;color:#fff!important;}
.web-gmh-ocr-btn{background:linear-gradient(135deg,#0f766e,#14b8a6)!important;color:#fff!important;}
.web-gmh-collapse{background:linear-gradient(135deg,#92400e,#f59e0b)!important;color:#fff!important;}
.web-gmh-no-proof{display:inline-flex;align-items:center;justify-content:center;min-height:34px;border-radius:999px;padding:7px 12px;background:#fee2e2;color:#991b1b;font-size:12px;font-weight:950;}
.web-gmh-photo{margin-top:10px;border-radius:14px;overflow:hidden;background:#fff;border:2px solid rgba(180,83,9,.22);}
.web-gmh-photo img{display:block;width:100%;height:auto;}
.web-gmh-warning{margin:8px 0 0;padding:9px 11px;border-radius:12px;background:#fee2e2;border:1px solid rgba(248,113,113,.45);color:#7f1d1d;font-size:12px;font-weight:900;}
.web-gmh-card.is-photo-collapsed .web-gmh-photo{display:none!important;}
.web-gmh-empty{padding:16px;border:1px dashed rgba(147,197,253,.25);background:rgba(255,255,255,.035);border-radius:14px;text-align:center;color:#bfdbfe;}
.web-gmh-empty.error{color:#fecaca;background:rgba(127,29,29,.28);border-color:rgba(248,113,113,.35);}
.web-gmh-summary-actions{display:flex;justify-content:flex-end;margin:8px 0 10px;}
.web-gmh-summary-actions button{min-height:36px;border-radius:12px;padding:8px 13px;font-size:12px;font-weight:950;}
.web-gmh-audit-summary-box{margin:10px 0 12px;}
.web-gmh-audit-summary-box.hidden{display:none!important;}
.web-gmh-audit-summary-top{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:10px;}
.web-gmh-audit-summary-top>div{padding:11px 12px;border-radius:14px;background:rgba(255,255,255,.055);border:1px solid rgba(147,197,253,.18);}
.web-gmh-audit-summary-top>.is-warning{background:#fee2e2;color:#7f1d1d;border-color:rgba(248,113,113,.45);}
.web-gmh-audit-summary-top>.is-safe{background:#dcfce7;color:#14532d;border-color:rgba(34,197,94,.35);}
.web-gmh-audit-summary-top b{display:block;font-size:18px;overflow-wrap:anywhere;}
.web-gmh-audit-summary-list{display:grid;gap:8px;}
.web-gmh-audit-summary-item{display:grid;grid-template-columns:1.2fr .55fr 1fr .7fr .7fr;gap:8px;align-items:center;padding:10px;border-radius:14px;background:linear-gradient(180deg,#fff7ed,#fffbeb);color:#431407;border:1px solid rgba(251,146,60,.28);}
.web-gmh-audit-summary-item.has-warning{border-color:rgba(239,68,68,.45);box-shadow:0 0 0 1px rgba(239,68,68,.12) inset;}
.web-gmh-audit-summary-item .seller{font-size:15px;font-weight:1000;color:#0f172a;}
.web-gmh-audit-summary-item b{display:block;font-size:13px;overflow-wrap:anywhere;}
.web-gmh-ocr-box{margin-top:10px;padding:10px 12px;border-radius:13px;font-size:12px;line-height:1.35;border:1px solid rgba(147,197,253,.18);background:rgba(255,255,255,.65);color:#334155;}
.web-gmh-ocr-box.is-empty{background:#f8fafc;color:#64748b;border-style:dashed;}
.web-gmh-ocr-box.is-loading{background:#eff6ff;color:#1e3a8a;border-color:rgba(37,99,235,.28);}
.web-gmh-ocr-box.is-success{background:#ecfdf5;color:#064e3b;border-color:rgba(16,185,129,.32);}
.web-gmh-ocr-box.is-error{background:#fee2e2;color:#7f1d1d;border-color:rgba(248,113,113,.42);}
.web-gmh-ocr-title{font-size:13px;font-weight:1000;margin-bottom:8px;}
.web-gmh-ocr-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;}
.web-gmh-ocr-grid>div{padding:8px 9px;border-radius:11px;background:rgba(255,255,255,.62);border:1px solid rgba(15,23,42,.08);}
.web-gmh-ocr-grid span{display:block;font-size:9px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;opacity:.7;margin-bottom:3px;}
.web-gmh-ocr-grid b{display:block;font-size:12px;overflow-wrap:anywhere;}
.web-gmh-ocr-raw{margin-top:9px;}
.web-gmh-ocr-raw summary{cursor:pointer;font-weight:900;}
.web-gmh-ocr-raw pre{white-space:pre-wrap;word-break:break-word;max-height:180px;overflow:auto;margin:8px 0 0;padding:9px;border-radius:10px;background:rgba(15,23,42,.08);font-size:11px;}
@media(max-width:760px){
  .web-gmh-head{display:block}.web-gmh-head button{width:100%;margin-top:10px}
  .web-gmh-toolbar,.web-gmh-auditbar,.web-gmh-summary,.web-gmh-audit-summary-top{grid-template-columns:1fr}
  .web-gmh-card-head{grid-template-columns:1fr}.web-gmh-card-head strong{text-align:left}
  .web-gmh-compact-actions{display:grid;grid-template-columns:1fr 1fr}.web-gmh-collapse{grid-column:1/-1}
  .web-gmh-ocr-grid{grid-template-columns:1fr}
}



/* =====================================================
   WEB PAYMENT HISTORY BATCH 14
   Auto load + auto OCR cache support
   ===================================================== */
.web-gmh-ocr-box.is-loading b::after{
  content:"";
  display:inline-block;
  width:8px;
}



/* =====================================================
   WEB PAYMENT HISTORY BATCH 15
   Submit-trigger reload:
   - No periodic auto refresh
   - Reload on page open / manual refresh / after submit payment
   ===================================================== */



/* =====================================================
   WEB PAYMENT HISTORY BATCH 16
   Auto load on menu open.
   No periodic refresh.
   ===================================================== */



/* =====================================================
   WEB PAYMENT HISTORY BATCH 18
   Card header + Flip OCR Parser UI
   ===================================================== */
.web-gmh-card-head.web-gmh-card-head-v18{
  grid-template-columns:1fr max-content!important;
  column-gap:18px!important;
  row-gap:4px!important;
  align-items:start!important;
  padding-right:16px!important;
}
.web-gmh-title-line{
  display:flex!important;
  align-items:center!important;
  gap:9px!important;
  min-width:0!important;
  flex-wrap:wrap!important;
}
.web-gmh-title-line b{
  color:#0f172a!important;
  font-size:23px!important;
  line-height:1.05!important;
  letter-spacing:.015em!important;
  text-transform:uppercase!important;
}
.web-gmh-title-line b.executor{
  color:#7c2d12!important;
  font-size:17px!important;
}
.web-gmh-title-line em{
  color:#b45309!important;
  font-style:normal!important;
  font-weight:1000!important;
}
.web-gmh-card-head.web-gmh-card-head-v18 > strong{
  min-width:120px!important;
  padding-right:8px!important;
  text-align:right!important;
  justify-self:end!important;
}
.web-gmh-date-line{
  grid-column:1 / -1!important;
  display:block!important;
  color:#7c2d12!important;
  font-size:13px!important;
  font-weight:900!important;
  margin-top:2px!important;
}
@media(max-width:760px){
  .web-gmh-card-head.web-gmh-card-head-v18{
    grid-template-columns:1fr!important;
    padding-right:0!important;
  }
  .web-gmh-card-head.web-gmh-card-head-v18 > strong{
    text-align:left!important;
    justify-self:start!important;
    min-width:0!important;
  }
}


/* =====================================================
   WEB PAYMENT HISTORY BATCH 21
   Fix JS syntax + Amount Audit Filter + Flip Crop OCR.
   ===================================================== */
.web-gmh-auditbar{grid-template-columns:220px 220px 1fr!important;}
.web-gmh-amount-audit{margin:8px 0 0;padding:9px 11px;border-radius:12px;border:1px solid rgba(148,163,184,.35);background:#f8fafc;color:#334155;}
.web-gmh-amount-audit b{display:block;font-size:12px;font-weight:1000;margin-bottom:3px;}
.web-gmh-amount-audit span{display:block;font-size:11px;line-height:1.35;opacity:.9;overflow-wrap:anywhere;}
.web-gmh-amount-audit.ok{background:#dcfce7;border-color:rgba(34,197,94,.38);color:#14532d;}
.web-gmh-amount-audit.danger{background:#fee2e2;border-color:rgba(239,68,68,.42);color:#7f1d1d;}
.web-gmh-amount-audit.warn{background:#fef3c7;border-color:rgba(245,158,11,.42);color:#78350f;}
.web-gmh-amount-audit.neutral{background:#e2e8f0;border-color:rgba(100,116,139,.32);color:#334155;}
.web-gmh-ocr-box.is-loading span{display:block;margin-top:4px;}
@media(max-width:900px){.web-gmh-auditbar{grid-template-columns:1fr!important;}}



/* =====================================================
   WEB PAYMENT HISTORY BATCH 22
   Flip amount force crop:
   - Rp5.500 admin fee ignored
   - crop OCR forced for real Flip amount
   ===================================================== */
.web-gmh-ocr-raw summary{
  color:#064e3b;
}



/* =====================================================
   WEB PAYMENT HISTORY BATCH 26
   Manual Refresh History feedback.
   ===================================================== */
.web-gold-money-history-card.is-web-gmh-loading{
  opacity:.92;
}
.web-gmh-loading{
  animation:webGmhPulse 1.1s ease-in-out infinite;
}
@keyframes webGmhPulse{
  0%,100%{opacity:.72}
  50%{opacity:1}
}
button[data-web-gmh-refresh="1"]:disabled{
  opacity:.65;
  cursor:wait;
}



/* =====================================================
   WEB PAYMENT HISTORY BATCH 27
   Binance deposit parser fix:
   - Prefer "deposit of X USDT"
   - Avoid title noise like "3 USDT Deposit Successful"
   ===================================================== */



/* =====================================================
   WEB PAYMENT HISTORY BATCH 28
   Decimal correction before cache/audit:
   - 86 USDT + sheet 8,6 => 8.6 USDT
   - 172 USDT + sheet 17,2 => 17.2 USDT
   - 3751 USDT + sheet 37,51 => 37.51 USDT
   ===================================================== */



/* =====================================================
   WEB PAYMENT HISTORY BATCH 29
   Manual Read Text force mode:
   - Click Read Text = clear OCR cache for this proof, then OCR ulang
   - Auto OCR still uses cache
   ===================================================== */

/* Input Pack balance guidance */
.pack-balance-guide{
  text-align:left;
  line-height:1.55;
  white-space:normal;
  word-break:break-word;
}
.pack-balance-guide-green{
  margin-top:6px;
  color:#047857;
}