/* ============================================================
   Panel Audit Sky — tema "Hitam" (monokrom)
   Latar hitam pekat, aksen perak/putih netral, spade besar sebagai latar.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500;600&display=swap');

:root{
  /* palet — Hitam (monokrom) */
  --bg:#080808; --bg-2:#030303;
  --panel:#141414; --panel-2:#1c1c1c; --panel-3:#282828;
  --line:#333333; --line-soft:#242424;
  --text:#ededed; --muted:#9a9a9a; --muted-2:#6a6a6a;
  --brand:#cfcfcf; --brand-2:#a3a3a3; --brand-soft:rgba(255,255,255,.09);
  --green:#4bd07f; --green-soft:rgba(75,208,127,.14);
  --red:#e5555f;   --red-soft:rgba(229,85,95,.15);
  --amber:#b4b4b4; --amber-soft:rgba(255,255,255,.15);
  --purple:#b3b3b3; --purple-soft:rgba(255,255,255,.08);   /* aksen abu (badge crosscheck) */
  --venom:#f0f0f0;                                    /* putih terang (aksen gradien) */
  --gold:#cfcfcf; --gold-2:#efefef;
  --scale:rgba(255,255,255,.05);
  /* SATU gambar besar: SPADE (♠) hitam + garis abu — latar monokrom, lembut di mata */
  --bj:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='480' viewBox='0 0 100 100'%3E%3Cpath fill='%23000000' stroke='%23808080' stroke-width='1.6' opacity='.9' d='M50 9 C41 24 19 41 19 57 C19 68 27 74 37 74 C43 74 47 72 50 67 C49 79 44 87 32 91 L68 91 C56 87 51 79 50 67 C53 72 57 74 63 74 C73 74 81 68 81 57 C81 41 59 24 50 9 Z'/%3E%3C/svg%3E");
  /* bentuk */
  --r-sm:10px; --r:15px; --r-lg:20px; --pill:999px;
  --sh-1:0 1px 2px rgba(0,0,0,.5);
  --sh-2:0 8px 24px -8px rgba(0,0,0,.6);
  --sh-3:0 22px 52px -14px rgba(0,0,0,.78);
  --glow:0 0 0 3px var(--brand-soft), 0 0 14px -3px rgba(255,255,255,.16);
  --venom-glow:0 0 22px -8px rgba(255,255,255,.14);
  /* gerak */
  --t:.18s cubic-bezier(.4,0,.2,1);
  --t-slow:.34s cubic-bezier(.22,1,.36,1);
  --font:'Inter',"Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'Cascadia Code',monospace;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:
    radial-gradient(1200px 640px at 84% -10%,rgba(255,255,255,.035),transparent 58%),
    radial-gradient(1000px 560px at -6% 6%,rgba(255,255,255,.022),transparent 54%),
    var(--bg);
  color:var(--text);
  font-family:var(--font);
  font-size:14px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
  letter-spacing:.1px;
}
.hidden{display:none !important}
.muted{color:var(--muted)}
.err{color:var(--red);margin-top:10px;font-size:13px;min-height:18px}
a{color:inherit;text-decoration:none;cursor:pointer}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

/* Scrollbar: pakai scrollbar BAWAAN sistem (klasik, lengkap dgn tombol panah) supaya SELALU
   terlihat — tidak menunggu kursor mendekat. Gaya ::-webkit-scrollbar kustom sengaja TIDAK
   dipakai: begitu scrollbar di-style sendiri, tombol panah hilang dan batangnya jadi tipis
   sehingga terkesan menghilang saat diam. */
html{scrollbar-width:auto}
/* Wadah yang bisa digulir: batang SELALU dirender (scroll, bukan auto), dan ruangnya dipesan
   supaya isi tidak bergeser saat scrollbar muncul/hilang. */
.content,.modal-body,.help-body,.bot-log,.ticket-ctx{overflow-y:scroll;scrollbar-gutter:stable}

/* ============ Login ============ */
.login-wrap{min-height:100vh;display:grid;place-items:center;padding:24px;position:relative;overflow:hidden;isolation:isolate;
  background:
    var(--bj) center/min(560px,86%) no-repeat,
    radial-gradient(1200px 720px at 12% -12%, #111111 0%, transparent 52%),
    radial-gradient(1000px 720px at 108% 112%, #0d0d0d 0%, transparent 52%),
    radial-gradient(820px 560px at 62% 44%, #0a0a0a 0%, transparent 60%),
    linear-gradient(155deg,#0d0d0d 0%,#080808 55%,#050505 100%);}
.login-wrap::before,.login-wrap::after{content:"";position:absolute;border-radius:50%;filter:blur(82px);opacity:.22;pointer-events:none;z-index:-1}
.login-wrap::before{width:540px;height:540px;left:-140px;top:-160px;background:radial-gradient(circle,#e2e2e2,transparent 68%);animation:blobA 16s ease-in-out infinite}
.login-wrap::after{width:600px;height:600px;right:-160px;bottom:-180px;background:radial-gradient(circle,#8a8a8a,transparent 68%);animation:blobB 19s ease-in-out infinite}
.login-wrap>*{position:relative;z-index:1}
@keyframes blobA{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(70px,50px) scale(1.08)}}
@keyframes blobB{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-60px,-50px) scale(1.06)}}
.login-card{
  display:grid;grid-template-columns:1.08fr 1fr;
  width:min(940px,100%);
  background:linear-gradient(180deg,var(--panel-2),var(--panel));
  border:1px solid rgba(255,255,255,.28);border-radius:22px;overflow:hidden;
  box-shadow:0 50px 110px -40px rgba(0,0,0,.88), 0 0 90px -26px rgba(255,255,255,.16), inset 0 1px 0 rgba(255,255,255,.05);
  animation:pop .5s var(--t-slow) both;
}
.login-aside{
  position:relative;padding:40px 36px;overflow:hidden;
  background:
    radial-gradient(520px 320px at 78% -5%, rgba(255,255,255,.1), transparent 60%),
    linear-gradient(160deg,#141414,#0a0a0a);
  border-right:1px solid var(--line);
}
.login-aside::before{content:"";position:absolute;inset:0;opacity:.6;pointer-events:none;
  background:radial-gradient(360px 300px at 30% 80%, rgba(255,255,255,.05), transparent 70%);}
.la-brand{display:flex;align-items:center;gap:14px;position:relative}
.la-brand b{font-size:20px;display:block;line-height:1.15}
.la-sub{color:var(--muted);font-size:12.5px}
.la-logo{width:64px;height:64px;object-fit:contain;filter:drop-shadow(0 6px 16px rgba(0,0,0,.6))}
.la-feats{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:15px;position:relative}
.la-feats li{display:flex;gap:12px;align-items:flex-start}
.lf-ico{flex:none;width:34px;height:34px;display:grid;place-items:center;border-radius:10px;
  background:var(--brand-soft);border:1px solid var(--line);font-size:15px}
.la-feats b{font-size:13px;display:block;margin-bottom:1px}
.la-feats span{color:var(--muted);font-size:12px;line-height:1.5}
.la-foot{color:var(--muted-2);font-size:11.5px;margin:28px 0 0;position:relative}
.login-main{padding:42px 40px;display:flex;flex-direction:column;justify-content:center}
.lm-title{margin:0;font-size:25px}
.lm-sub{margin:6px 0 18px}
.lm-label{display:block;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-weight:600;margin:14px 0 7px}
.login-main input{width:100%}
.pw-wrap{position:relative}
.pw-wrap input{padding-right:44px}
.pw-toggle{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:0;color:var(--muted);cursor:pointer;font-size:15px;line-height:1;padding:6px;border-radius:8px}
.pw-toggle:hover{color:var(--text)}
.lm-submit{margin-top:22px;padding:13px;font-weight:700;font-size:14px;color:#191919;
  background:linear-gradient(90deg,var(--brand-2),var(--venom));border-color:transparent;
  box-shadow:0 10px 22px -10px rgba(0,0,0,.55)}
.lm-foot{color:var(--muted-2);font-size:12px;text-align:center;margin:16px 0 0}
.login-msg{display:flex;gap:9px;align-items:center;background:var(--green-soft);
  border:1px solid rgba(47,208,127,.32);color:#87e9b6;padding:11px 13px;border-radius:11px;font-size:13px;margin-bottom:14px}
.login-msg::before{content:"✔";flex:none;display:grid;place-items:center;width:20px;height:20px;border-radius:6px;background:var(--green);color:#04240f;font-size:11px;font-weight:800}
.brand-logo{width:30px;height:30px;object-fit:contain;filter:drop-shadow(0 3px 8px rgba(0,0,0,.6))}
@media (max-width:760px){ .login-card{grid-template-columns:1fr;width:min(420px,100%)} .login-aside{display:none} }

/* ============ Shell ============ */
.app{display:grid;grid-template-columns:248px 1fr;height:100vh;overflow:hidden}
.sidebar{
  background:linear-gradient(180deg,#121212,#070707);
  border-right:1px solid var(--line);
  display:flex;flex-direction:column;padding:20px 14px;gap:2px;
}
.brand{display:flex;align-items:center;gap:11px;font-size:18px;font-weight:700;padding:4px 8px 18px}
.logo{
  background:linear-gradient(135deg,var(--brand),var(--gold-2));
  color:#191919;font-weight:800;font-size:12px;padding:7px 9px;border-radius:10px;
  letter-spacing:1.5px;box-shadow:0 6px 16px -4px rgba(0,0,0,.55);
}
nav{display:flex;flex-direction:column;gap:5px;margin-top:4px}
.nav-item{
  display:flex;align-items:center;gap:12px;
  padding:11px 13px;border-radius:11px;color:var(--muted);font-weight:500;
  position:relative;transition:background var(--t),color var(--t),transform var(--t);
}
.nav-item .ni-ico{font-size:16px;width:20px;text-align:center;filter:grayscale(.2)}
.nav-item:hover{background:var(--panel-2);color:var(--text);transform:translateX(3px)}
.nav-item.active{
  background:linear-gradient(90deg,var(--brand-soft),transparent 90%);
  color:var(--text);
}
.nav-item.active::before{
  content:"";position:absolute;left:-14px;top:9px;bottom:9px;width:4px;
  border-radius:0 4px 4px 0;background:linear-gradient(180deg,var(--brand),var(--purple));
  box-shadow:0 0 12px var(--brand);
}
.nav-item.active .ni-ico{filter:none}
.sidebar-foot{margin-top:auto;display:flex;flex-direction:column;gap:9px;padding-top:14px;border-top:1px solid var(--line-soft)}
#whoami{font-size:12.5px;padding-left:4px}

/* Latar kerja: hitam pekat + motif kartu (♠♥♦♣) emas + cahaya emas — mewah, statis, nyaman dilihat lama */
.content{overflow:auto;position:relative;
  background:
    var(--bj) center/min(780px,80%) no-repeat fixed,
    radial-gradient(1200px 800px at 93% -16%, rgba(255,255,255,.025), transparent 62%),
    radial-gradient(1000px 720px at -4% 106%, rgba(255,255,255,.018), transparent 64%),
    linear-gradient(165deg,#100e08 0%,#0a0906 58%,#050505 100%);}
.topbar{
  position:sticky;top:0;z-index:8;display:flex;justify-content:space-between;align-items:center;
  gap:14px;padding:16px 26px;
  background:linear-gradient(180deg,rgba(16,16,16,.94),rgba(11,11,11,.76));
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line-soft);
}
.topbar h1{font-size:20px;margin:0;font-weight:700;letter-spacing:-.2px}
#view{padding:26px;animation:rise var(--t-slow) both;position:relative;z-index:1}

/* ============ Cards KPI ============ */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:15px;margin-bottom:24px}
.card{
  position:relative;overflow:hidden;
  background:linear-gradient(180deg,var(--panel-2),var(--panel));
  border:1px solid var(--line);border-radius:var(--r);padding:17px 18px;
  box-shadow:var(--sh-1),inset 0 1px 0 rgba(255,255,255,.045);transition:transform var(--t),box-shadow var(--t),border-color var(--t);
  animation:rise .45s var(--t-slow) both;
}
.card::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--brand),var(--venom));opacity:.9;box-shadow:0 0 14px -2px var(--brand)}
.card.green::after{background:var(--green)} .card.red::after{background:var(--red)}
.card.amber::after{background:var(--amber)} .card.brand::after{background:var(--brand)}
.card:hover{transform:translateY(-3px);box-shadow:var(--sh-2),var(--venom-glow);border-color:var(--brand)}
.card:nth-child(1){animation-delay:0ms}.card:nth-child(2){animation-delay:45ms}.card:nth-child(3){animation-delay:90ms}.card:nth-child(4){animation-delay:135ms}.card:nth-child(5){animation-delay:180ms}.card:nth-child(6){animation-delay:225ms}.card:nth-child(7){animation-delay:270ms}
.card .k{color:var(--muted);font-size:11.5px;text-transform:uppercase;letter-spacing:.6px;font-weight:600}
.card .v{font-size:25px;font-weight:800;margin-top:8px;letter-spacing:-.4px;font-family:var(--mono)}
.card.green .v{color:var(--green)} .card.red .v{color:var(--red)}
.card.amber .v{color:var(--amber)} .card.brand .v{color:var(--brand)}

/* ============ Panel & tabel ============ */
.panel{
  background:linear-gradient(180deg,#1c190f,var(--panel));border:1px solid var(--line);border-radius:var(--r);
  margin-bottom:22px;overflow:hidden;box-shadow:var(--sh-1),inset 0 1px 0 rgba(255,255,255,.035);
  animation:rise .4s var(--t-slow) both;
}
.panel-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:15px 18px;border-bottom:1px solid var(--line-soft)}
.panel-head h2{font-size:14.5px;margin:0;font-weight:700}
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:12px 16px;font-size:13px;white-space:nowrap}
thead th{
  background:var(--panel-2);color:var(--muted);font-weight:600;font-size:10.5px;
  text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid var(--line);
}
tbody td{border-bottom:1px solid var(--line-soft)}
tbody tr{transition:background var(--t)}
tbody tr:nth-child(even){background:rgba(255,255,255,.015)}
tbody tr:hover{background:var(--panel-2)}
tbody tr:last-child td{border-bottom:none}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
td.num{font-family:var(--mono);font-size:12.5px}
.empty{padding:44px 20px;text-align:center;color:var(--muted-2)}

/* loading spinner + skeleton */
.loading{display:flex;align-items:center;justify-content:center;gap:11px;padding:44px;color:var(--muted)}
.spinner{width:20px;height:20px;border-radius:50%;border:2.5px solid var(--line);border-top-color:var(--brand);animation:spin .7s linear infinite}
.skeleton{height:14px;border-radius:6px;background:linear-gradient(90deg,var(--panel-2) 25%,var(--panel-3) 37%,var(--panel-2) 63%);background-size:400% 100%;animation:shimmer 1.3s ease infinite}

/* ============ Input & tombol ============ */
input,select,textarea{
  background:var(--panel-2);border:1px solid var(--line);color:var(--text);
  padding:10px 12px;border-radius:var(--r-sm);font-size:13px;font-family:inherit;outline:none;
  transition:border-color var(--t),box-shadow var(--t),background var(--t);
}
input::placeholder,textarea::placeholder{color:var(--muted-2)}
input:hover,select:hover,textarea:hover{border-color:#3a3a3a}
input:focus,select:focus,textarea:focus{border-color:var(--brand);box-shadow:var(--glow);background:var(--panel)}
select{cursor:pointer}
textarea{min-height:76px;resize:vertical}

.btn{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--panel-2);border:1px solid var(--line);color:var(--text);
  padding:9px 15px;border-radius:var(--r-sm);cursor:pointer;font-size:13px;font-weight:600;
  font-family:inherit;transition:transform var(--t),background var(--t),border-color var(--t),box-shadow var(--t),color var(--t);
}
.btn:hover{border-color:var(--brand);transform:translateY(-1px);box-shadow:var(--sh-1)}
.btn:active{transform:translateY(0) scale(.98)}
.btn:focus-visible{box-shadow:var(--glow)}
.btn.primary{background:linear-gradient(135deg,var(--gold-2),var(--brand-2));border-color:transparent;color:#191919;box-shadow:0 6px 16px -6px rgba(0,0,0,.55)}
.btn.primary:hover{filter:brightness(1.08);box-shadow:0 12px 24px -8px rgba(0,0,0,.6)}
.btn.ghost{background:transparent}
.btn.ghost:hover{background:var(--panel-2)}
.btn.sm{padding:6px 11px;font-size:12px;border-radius:8px}
.btn.block{width:100%;margin-top:20px;justify-content:center;padding:11px}
.btn.danger{color:var(--red);border-color:transparent;background:transparent}
.btn.danger:hover{border-color:var(--red);background:var(--red-soft);transform:translateY(-1px)}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}

/* ============ Badge ============ */
.badge{
  padding:4px 11px;border-radius:var(--pill);font-size:11px;font-weight:700;
  display:inline-flex;align-items:center;gap:5px;letter-spacing:.2px;
  border:1px solid transparent;
}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.badge.CREDIT,.badge.SUCCESS,.badge.VERIFIED{background:var(--green-soft);color:var(--green);border-color:rgba(47,208,127,.25)}
.badge.DEBIT,.badge.FAILED,.badge.FLAGGED{background:var(--red-soft);color:var(--red);border-color:rgba(255,107,107,.25)}
.badge.PENDING,.badge.RUNNING{background:var(--amber-soft);color:var(--amber);border-color:rgba(255,255,255,.25)}
.badge.RECONCILED{background:var(--brand-soft);color:var(--brand);border-color:rgba(255,255,255,.3)}
.badge.MATCHED{background:var(--green-soft);color:var(--green);border-color:rgba(75,208,127,.28)}
.badge.MANUAL{background:var(--brand-soft);color:var(--brand);border-color:rgba(255,255,255,.3)}
.badge.CROSSCHECK{background:var(--purple-soft);color:var(--purple);border-color:rgba(255,255,255,.34)}
.badge.REJECTED{background:var(--red-soft);color:var(--red);border-color:rgba(255,107,107,.25)}

.filters{display:flex;gap:9px;flex-wrap:wrap;padding:15px 18px;border-bottom:1px solid var(--line-soft);align-items:center}
.pager{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;gap:10px;flex-wrap:wrap}

/* ============ Modal ============ */
.modal-wrap{position:fixed;inset:0;background:radial-gradient(circle at 50% 40%,rgba(24,20,8,.62),rgba(4,3,1,.82));-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);display:grid;place-items:center;z-index:60;padding:18px;animation:fade .2s ease both}
.modal{
  background:linear-gradient(180deg,var(--panel-2),var(--panel));
  border:1px solid var(--line);border-radius:var(--r-lg);width:min(560px,94vw);
  box-shadow:var(--sh-3);animation:pop .28s var(--t-slow) both;max-height:90vh;display:flex;flex-direction:column;
}
.modal-head{display:flex;justify-content:space-between;align-items:center;padding:17px 20px;border-bottom:1px solid var(--line-soft)}
.modal-head h3{margin:0;font-size:16px;font-weight:700}
.modal-body{padding:20px;overflow:auto}
.modal-body label{display:block;margin:13px 0 5px;color:var(--muted);font-size:12.5px;font-weight:500}
.modal-body label:first-child{margin-top:0}
.modal-body input,.modal-body select,.modal-body textarea{width:100%}

.toast{
  position:fixed;bottom:26px;right:26px;background:var(--panel-2);border:1px solid var(--line);
  padding:13px 20px;border-radius:var(--r);box-shadow:var(--sh-3);z-index:70;font-weight:600;
  border-left:4px solid var(--brand);animation:toastIn .32s var(--t-slow) both;
}
.toast.ok{border-left-color:var(--green)} .toast.bad{border-left-color:var(--red)}

.dl{display:grid;grid-template-columns:140px 1fr;gap:10px 14px;font-size:13px;
  background:var(--panel);border:1px solid var(--line-soft);border-radius:var(--r);padding:15px 16px;margin-bottom:6px}
.dl .k{color:var(--muted)}

/* ============ Animasi ============ */
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes pop{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
@keyframes toastIn{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes shimmer{from{background-position:100% 0}to{background-position:-100% 0}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.badge.PENDING::before,.badge.RUNNING::before{animation:pulse 1.6s ease infinite}

/* ============ Responsif ============ */
@media(max-width:860px){
  .app{grid-template-columns:72px 1fr}
  .brand b,.nav-item .ni-label,#whoami{display:none}
  .nav-item{justify-content:center;padding:12px 0}
  .nav-item.active::before{left:-14px}
  .logo{font-size:11px;padding:7px}
  #view{padding:16px}
  .topbar{padding:14px 16px}
}
@media(max-width:520px){
  .cards{grid-template-columns:1fr 1fr}
  .topbar h1{font-size:17px}
}

/* hormati preferensi gerak minimal */
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
}

/* ============ Rapikan tabel, aksi & filter ============ */
th,td{padding:10px 14px}
tbody td{vertical-align:middle}
.ell{max-width:300px;overflow:hidden;text-overflow:ellipsis}
td.row{flex-wrap:nowrap;gap:6px}
td.row .btn.sm{padding:5px 9px;font-size:11.5px}
td.row .badge{padding:3px 7px}
.filters{gap:8px 10px}
.filters>select,.filters>input{height:36px;min-width:130px}
.filters>input[type=date]{min-width:148px}
.badge{padding:4px 9px;font-size:11.5px}
.panel-head h2{font-size:14px;letter-spacing:-.1px}

/* ============ Polish lanjutan: ikon aksi & spasi ============ */
.btn.ic{width:30px;height:30px;padding:0;justify-content:center;background:transparent;border-color:transparent;color:var(--muted);font-size:14px;border-radius:8px}
.btn.ic:hover{background:var(--panel-3);color:var(--text);border-color:var(--line);transform:none;box-shadow:none}
.btn.ic.danger{color:var(--muted-2)}
.btn.ic.danger:hover{color:var(--red);background:var(--red-soft);border-color:transparent}
td.row{align-items:center}
#topActions{gap:8px}
.card .v{font-size:24px}
.panel{margin-bottom:18px}
.dl{grid-template-columns:130px 1fr}
.panel-head span.muted{font-size:12px}

/* ============ Popup Selamat Datang ============ */
.welcome-wrap{position:fixed;inset:0;z-index:90;display:grid;place-items:center;cursor:pointer;
  background:radial-gradient(circle at 50% 42%, rgba(14,14,14,.66), rgba(3,3,3,.92));
  -webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);animation:wFade .4s ease both}
.welcome-wrap.out{animation:wOut .55s ease forwards}
.welcome-card{text-align:center;padding:24px;animation:wUp .7s var(--t-slow) both}
.welcome-logo{width:104px;height:104px;object-fit:contain;filter:drop-shadow(0 10px 28px rgba(0,0,0,.6));animation:wLogo 1s var(--t-slow) both}
.welcome-card h2{font-size:32px;margin:18px 0 6px;font-weight:800;letter-spacing:-.4px;background:linear-gradient(90deg,#ffffff,#e2e2e2 55%,#8a8a8a);-webkit-background-clip:text;background-clip:text;color:transparent}
.welcome-card p{color:var(--muted);font-size:15px;margin:0}
.welcome-card p b{color:var(--text)}
.welcome-card .wave{display:inline-block;transform-origin:70% 70%;animation:wWave 1.4s ease .5s infinite}
.welcome-bar{width:190px;height:4px;border-radius:99px;background:rgba(255,255,255,.08);margin:20px auto 0;overflow:hidden}
.welcome-bar span{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#8a8a8a,#efefef);animation:wBar 2.6s linear both}
@keyframes wFade{from{opacity:0}to{opacity:1}}
@keyframes wOut{to{opacity:0;visibility:hidden}}
@keyframes wUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes wLogo{0%{opacity:0;transform:scale(.5) rotate(-14deg)}60%{transform:scale(1.12) rotate(5deg)}100%{opacity:1;transform:scale(1) rotate(0)}}
@keyframes wWave{0%,60%,100%{transform:rotate(0)}15%{transform:rotate(16deg)}30%{transform:rotate(-8deg)}45%{transform:rotate(14deg)}}
@keyframes wBar{from{width:0}to{width:100%}}

/* ============================================================
   Tema Terang (Light Mode) — aktif saat <html data-theme="light">
   Token diubah -> mayoritas komponen (tabel/tombol/kartu/badge) ikut otomatis.
   ============================================================ */
:root[data-theme="light"]{
  --bg:#f2f2f2; --bg-2:#e6e6e6;
  --panel:#ffffff; --panel-2:#f4f4f4; --panel-3:#eaeaea;
  --line:#d8d8d8; --line-soft:#e6e6e6;
  --text:#1a1a1a; --muted:#666666; --muted-2:#8c8c8c;
  --brand:#8a8a8a; --brand-2:#8a8a8a; --brand-soft:rgba(120,120,120,.14);
  --green:#1a9d55; --green-soft:rgba(26,157,85,.13);
  --red:#cf3b46;   --red-soft:rgba(207,59,70,.12);
  --amber:#8a8a8a; --amber-soft:rgba(0,0,0,.16);
  --purple:#9a9a9a; --purple-soft:rgba(120,120,120,.13);
  --venom:#bcbcbc; --gold:#8a8a8a; --gold-2:#bcbcbc;
  --scale:rgba(120,120,120,.06);
  --bj:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='480' viewBox='0 0 100 100'%3E%3Cpath fill='%23111111' stroke='%23707070' stroke-width='1' opacity='.16' d='M50 9 C41 24 19 41 19 57 C19 68 27 74 37 74 C43 74 47 72 50 67 C49 79 44 87 32 91 L68 91 C56 87 51 79 50 67 C53 72 57 74 63 74 C73 74 81 68 81 57 C81 41 59 24 50 9 Z'/%3E%3C/svg%3E");
  --sh-1:0 1px 2px rgba(0,0,0,.1);
  --sh-2:0 8px 20px -6px rgba(0,0,0,.2);
  --sh-3:0 20px 44px -12px rgba(0,0,0,.28);
  --glow:0 0 0 3px var(--brand-soft), 0 0 16px -3px rgba(120,120,120,.4);
  --venom-glow:0 0 22px -6px rgba(120,120,120,.4);
}
:root[data-theme="light"] body{
  background:
    radial-gradient(1100px 600px at 82% -8%, rgba(120,120,120,.09), transparent 55%),
    radial-gradient(900px 500px at -5% 8%, rgba(120,120,120,.06), transparent 50%),
    var(--bg);
}
:root[data-theme="light"] .content{
  background:
    var(--bj) center/min(780px,80%) no-repeat fixed,
    radial-gradient(1000px 700px at 92% -12%, rgba(120,120,120,.06), transparent 60%),
    radial-gradient(900px 640px at -4% 104%, rgba(120,120,120,.045), transparent 60%),
    linear-gradient(165deg,#f6f6f6 0%,#f0f0f0 58%,#e9e9e9 100%);
}
:root[data-theme="light"] .topbar{
  background:linear-gradient(180deg, rgba(255,255,255,.93), rgba(243,243,243,.76));
}
:root[data-theme="light"] .sidebar{
  background:linear-gradient(180deg,#ffffff,#ededed);
}
:root[data-theme="light"] .panel{ background:linear-gradient(180deg,#ffffff,#f6f6f6); }
:root[data-theme="light"] tbody tr:nth-child(even){ background:rgba(0,0,0,.035); }
:root[data-theme="light"] .login-wrap{
  background:
    var(--bj) center/min(560px,86%) no-repeat,
    radial-gradient(1200px 720px at 12% -12%, #ececec 0%, transparent 52%),
    radial-gradient(1000px 720px at 108% 112%, #e6e6e6 0%, transparent 52%),
    linear-gradient(155deg,#f4f4f4 0%,#f6f6f6 55%,#fbfbfb 100%);
}
:root[data-theme="light"] .login-wrap::before,
:root[data-theme="light"] .login-wrap::after{ opacity:.22; }
:root[data-theme="light"] .login-aside{
  background:
    radial-gradient(520px 320px at 78% -5%, rgba(120,120,120,.15), transparent 60%),
    linear-gradient(160deg,#f2f2f2,#e8e8e8);
}
:root[data-theme="light"] .login-aside::before{ opacity:.4; }
:root[data-theme="light"] .la-logo,
:root[data-theme="light"] .brand-logo{ filter:drop-shadow(0 3px 9px rgba(120,120,120,.35)); }
:root[data-theme="light"] .logo,
:root[data-theme="light"] .btn.primary,
:root[data-theme="light"] .lm-submit{ color:#ffffff; }
.theme-toggle{ justify-content:center; }

.modal.wide{ width:min(1080px,97vw); }

/* ============ Order Request (tiket) ============ */
.ticket-body{ white-space:pre-wrap; word-break:break-word; background:var(--panel-2); border:1px solid var(--line-soft);
  border-radius:9px; padding:10px 12px; font-size:13.5px; line-height:1.5; }
.ticket-ctx{ white-space:pre-wrap; word-break:break-word; max-height:180px; overflow:auto; background:var(--bg-2);
  border:1px solid var(--line-soft); border-radius:9px; padding:10px 12px; font-size:12px; color:var(--muted); margin:0; }
.hr{ border:none; border-top:1px solid var(--line); margin:14px 0 4px; }

/* ============ Widget Bantuan AI (livechat) ============ */
.help-fab{ position:fixed; right:22px; bottom:22px; z-index:60; width:56px; height:56px; border-radius:50%;
  border:1px solid var(--line); background:var(--panel-2); color:var(--text); font-size:24px; cursor:pointer;
  box-shadow:0 8px 24px rgba(0,0,0,.45); transition:transform .15s ease, background .15s ease; }
.help-fab:hover{ transform:translateY(-2px); background:var(--panel-3); }
.help-fab.active{ background:var(--panel-3); }
#helpWrap.hidden{ display:none; }

.help-panel{ position:fixed; right:22px; bottom:88px; z-index:60; width:min(400px,94vw); height:min(560px,72vh);
  display:flex; flex-direction:column; background:var(--panel); border:1px solid var(--line); border-radius:16px;
  box-shadow:0 20px 60px rgba(0,0,0,.55); overflow:hidden; }
.help-panel.hidden{ display:none; }
.help-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:12px 14px;
  border-bottom:1px solid var(--line); background:var(--panel-2); }
.help-title{ display:flex; flex-direction:column; line-height:1.25; }
.help-sub{ font-size:11px; color:var(--muted); }
.help-body{ flex:1; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:10px; }
.help-msg{ display:flex; }
.help-msg.user{ justify-content:flex-end; }
.help-msg.assistant{ justify-content:flex-start; }
.help-bubble{ max-width:82%; padding:9px 12px; border-radius:13px; font-size:13.5px; line-height:1.5; word-break:break-word;
  border:1px solid var(--line-soft); }
.help-msg.assistant .help-bubble{ background:var(--panel-2); border-top-left-radius:4px; }
.help-msg.user .help-bubble{ background:var(--panel-3); border-top-right-radius:4px; }
.help-bubble code{ background:var(--bg-2); padding:1px 5px; border-radius:5px; font-size:12px; }
.help-typing{ display:flex; gap:5px; align-items:center; }
.help-typing span{ width:7px; height:7px; border-radius:50%; background:var(--muted); opacity:.6; animation:helpBlink 1.2s infinite; }
.help-typing span:nth-child(2){ animation-delay:.2s; } .help-typing span:nth-child(3){ animation-delay:.4s; }
@keyframes helpBlink{ 0%,80%,100%{ opacity:.25; } 40%{ opacity:.9; } }
.help-input{ display:flex; gap:8px; align-items:flex-end; padding:10px; border-top:1px solid var(--line); background:var(--panel-2); }
.help-input textarea{ flex:1; resize:none; max-height:120px; min-height:38px; padding:9px 11px; border-radius:10px;
  border:1px solid var(--line); background:var(--bg); color:var(--text); font:inherit; font-size:13.5px; }
.help-input .btn.sm{ height:38px; padding:0 14px; }

:root[data-theme="light"] .help-fab{ box-shadow:0 8px 24px rgba(120,120,120,.35); }
:root[data-theme="light"] .help-panel{ box-shadow:0 20px 60px rgba(120,120,120,.4); }

@media (max-width:520px){
  .help-panel{ right:0; left:0; bottom:0; width:100%; height:80vh; border-radius:16px 16px 0 0; }
  .help-fab{ right:16px; bottom:16px; }
}

/* ============ Review pra-import (crosscheck) ============ */
.br-agg-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(148px,1fr)); gap:8px 14px;
  background:var(--panel-2); border:1px solid var(--line-soft); border-radius:10px; padding:12px 14px; margin-top:10px; }
.br-agg-grid > div{ display:flex; flex-direction:column; }
.br-agg-grid .k{ font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
.br-agg-grid > div > span:last-child{ font-size:15px; }
.br-file{ border:1px solid var(--line-soft); border-radius:10px; padding:8px 10px; background:var(--panel-2); }
.br-file-head{ display:flex; align-items:center; gap:8px; }
.br-caret{ color:var(--muted); font-size:11px; width:12px; display:inline-block; }
.br-file-meta{ display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap;
  margin-top:5px; padding-left:20px; font-size:12px; }
.br-sample.hidden{ display:none; }

/* ============ BOT — Multi Bank Control ============ */
:root{ --bot-blue:#3b82f6; --bot-blue-bg:rgba(59,130,246,.12); --bot-off:#8a8f98; --bot-off-bg:rgba(138,143,152,.14); }
.bot-b-start{ background:rgba(75,208,127,.14)!important; border-color:rgba(75,208,127,.4)!important; color:var(--green)!important; }
.bot-b-stop{ background:rgba(229,85,95,.14)!important; border-color:rgba(229,85,95,.4)!important; color:var(--red)!important; }
.bot-b-warn{ background:rgba(230,170,60,.14)!important; border-color:rgba(230,170,60,.45)!important; color:#e6aa3c!important; }

.bot-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:16px; }
.bot-statcard{ display:flex; gap:14px; align-items:center; background:var(--panel); border:1px solid var(--line);
  border-radius:14px; padding:16px 18px; }
.bot-stat-ic{ width:52px; height:52px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:24px; flex:0 0 auto; }
.bot-stat-ic.brand{ background:var(--bot-blue-bg); } .bot-stat-ic.ok{ background:rgba(75,208,127,.14); }
.bot-stat-ic.err{ background:rgba(229,85,95,.14); } .bot-stat-ic.off{ background:var(--bot-off-bg); }
.bot-statcard.brand{ border-left:3px solid var(--bot-blue); } .bot-statcard.ok{ border-left:3px solid var(--green); }
.bot-statcard.err{ border-left:3px solid var(--red); } .bot-statcard.off{ border-left:3px solid var(--bot-off); }
.bot-stat-k{ font-size:12.5px; color:var(--muted); } .bot-stat-v{ font-size:30px; font-weight:800; line-height:1.1; }
.bot-stat-s{ font-size:11px; color:var(--muted); }

.bot-banktabs{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
.bot-banktab{ display:flex; flex-direction:column; gap:4px; background:var(--panel); border:1px solid var(--line);
  border-radius:10px; padding:8px 14px; cursor:pointer; color:var(--text); min-width:96px; }
.bot-banktab:hover{ background:var(--panel-2); } .bot-banktab.active{ border-color:var(--bot-blue); background:var(--bot-blue-bg); }
.bot-banktab b{ font-size:14px; } .bot-mini{ font-size:11.5px; color:var(--muted); }
.bot-dot{ display:inline-block; width:9px; height:9px; border-radius:50%; vertical-align:middle; margin-right:2px; }
.bot-dot.ok{ background:var(--green); } .bot-dot.err{ background:var(--red); } .bot-dot.off{ background:var(--bot-off); }

.bot-main{ display:flex; gap:16px; align-items:flex-start; }
.bot-left{ flex:1; min-width:0; background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:14px 16px; }
.bot-left-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.bot-left-head h2{ font-size:16px; margin:0; } .bot-left-head .muted{ font-weight:400; }
.bot-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(232px,1fr)); gap:12px; }
.bot-card{ background:var(--panel-2); border:1px solid var(--line); border-radius:12px; padding:14px; cursor:pointer; transition:border-color .12s; }
.bot-card:hover{ border-color:var(--brand-2); } .bot-card.sel{ border-color:var(--bot-blue); box-shadow:0 0 0 1px var(--bot-blue) inset; }
.bot-card-head{ display:flex; align-items:center; gap:8px; margin-bottom:12px; } .bot-card-head b{ font-size:14px; }
.bot-card-row .k, .bot-detail-grid .k, .bot-cfg .k{ font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.03em; }
.bot-acct{ font-family:ui-monospace,Menlo,Consolas,monospace; font-size:13.5px; letter-spacing:.5px; margin:2px 0 8px; display:flex; align-items:center; gap:8px; }
.bot-dev{ font-size:13.5px; margin:2px 0 10px; }
.bot-eye{ background:none; border:none; cursor:pointer; font-size:14px; color:var(--muted); padding:0; }
.bot-badge{ display:inline-block; font-size:12px; font-weight:600; padding:3px 12px; border-radius:7px; }
.bot-badge.ok{ background:rgba(75,208,127,.14); color:var(--green); } .bot-badge.err{ background:rgba(229,85,95,.14); color:var(--red); }
.bot-badge.off{ background:var(--bot-off-bg); color:var(--bot-off); }
.bot-card-actions{ display:flex; gap:8px; margin-top:12px; } .bot-card-actions .btn{ flex:1; }

.bot-right{ flex:0 0 380px; max-width:380px; }
@media (max-width:1200px){ .bot-main{ flex-direction:column; } .bot-right{ flex-basis:auto; max-width:none; width:100%; } .bot-stats{ grid-template-columns:repeat(2,1fr); } }
.bot-detail{ background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:16px; }
.bot-detail-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.bot-dh-title{ display:flex; align-items:center; gap:8px; } .bot-dh-title b{ font-size:15px; }
.bot-detail-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px 14px; margin-bottom:14px; }
.bot-detail-grid > div, .bot-cfg > div{ display:flex; flex-direction:column; gap:2px; }
.bot-detail-grid span:last-child, .bot-cfg span:last-child{ font-size:13.5px; }
.bot-detail-actions{ display:flex; gap:8px; margin-bottom:14px; } .bot-detail-actions .btn{ flex:1; }
.bot-tabs{ display:flex; gap:6px; border-bottom:1px solid var(--line); margin-bottom:10px; }
.bot-tab{ background:none; border:none; color:var(--muted); padding:8px 12px; cursor:pointer; font-size:13px; border-bottom:2px solid transparent; }
.bot-tab.active{ color:var(--text); border-bottom-color:var(--bot-blue); }
.bot-log{ background:var(--bg-2); border:1px solid var(--line-soft); border-radius:10px; padding:10px 12px; max-height:300px; overflow:auto;
  font-family:ui-monospace,Menlo,Consolas,monospace; font-size:12px; }
.bot-log-row{ display:flex; align-items:center; gap:8px; padding:3px 0; }
.bot-log-t{ color:var(--muted); white-space:nowrap; } .bot-log-m{ color:var(--text); word-break:break-word; }
.bot-log-foot{ display:flex; justify-content:space-between; font-size:11px; color:var(--muted); margin-top:8px; }
.bot-cfg{ display:flex; flex-direction:column; gap:10px; }