/* =============================================================
   Digiza.id — Komponen isi halaman dashboard v2
   (dash-v2.css = kerangka/sidebar/topbar; file ini = isi halaman)
   ============================================================= */

/* =============================== KARTU STATISTIK =============================== */
/* Dua kartu per baris, masing-masing punya identitas warna sendiri lewat
   variabel --a (aksen pekat), --a2 (aksen muda), --tint (latar sangat muda).
   Kartunya sengaja lebih lebar dari sebelumnya, jadi ada ruang untuk ikon
   watermark besar di kanan tanpa menabrak angka. */
.dz-stats { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s4); margin-bottom:var(--s5); }
.dz-stat {
    position:relative; isolation:isolate; overflow:hidden;
    display:flex; align-items:center; gap:var(--s4);
    border:1px solid var(--line); border-radius:var(--r-lg);
    padding:var(--s5); box-shadow:var(--sh-1);
    background:
        radial-gradient(120% 140% at 100% 0%, var(--tint) 0%, transparent 62%),
        linear-gradient(115deg,#fff 45%, var(--tint) 100%);
    transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.dz-stat.c1 { --a:#1d6fe8; --a2:#60a5fa; --tint:#eff6ff; }
.dz-stat.c2 { --a:#15803d; --a2:#4ade80; --tint:#f0fdf4; }
.dz-stat.c3 { --a:#c2410c; --a2:#fb923c; --tint:#fff7ed; }
.dz-stat.c4 { --a:#7e22ce; --a2:#c084fc; --tint:#faf5ff; }

/* Strip warna di tepi kiri — penanda kategori tanpa menambah elemen */
.dz-stat::before {
    content:''; position:absolute; inset:0 auto 0 0; width:4px;
    background:linear-gradient(180deg,var(--a2),var(--a));
    transition:width .3s var(--ease);
}
.dz-stat:hover { transform:translateY(-4px); box-shadow:var(--sh-3); border-color:var(--a2); }
.dz-stat:hover::before { width:6px; }

/* Ikon watermark: besar, transparan, sebagian keluar bingkai */
.dz-stat-bg {
    display:block; line-height:0;
    position:absolute; z-index:-1; right:-14px; bottom:-26px;
    color:var(--a); opacity:.09; pointer-events:none;
    transform:rotate(-12deg); transform-origin:bottom right;
    transition:opacity .35s var(--ease), transform .45s var(--spring);
}
.dz-stat-bg svg { width:132px; height:132px; stroke-width:1.25; }
.dz-stat:hover .dz-stat-bg { opacity:.16; transform:rotate(-6deg) scale(1.06); }

.dz-stat-ico {
    width:50px; height:50px; border-radius:15px; flex-shrink:0;
    display:grid; place-items:center; color:#fff;
    background:linear-gradient(140deg,var(--a2),var(--a));
    box-shadow:0 8px 18px -8px var(--a);
    transition:transform .35s var(--spring);
}
.dz-stat:hover .dz-stat-ico { transform:scale(1.08) rotate(-6deg); }
.dz-stat-ico svg { width:22px; height:22px; }

.dz-stat-t { min-width:0; }
.dz-stat-t span { display:block; font-size:.75rem; font-weight:600; letter-spacing:.02em; color:var(--ink-3); }
.dz-stat-t b {
    display:block; margin:.15rem 0 .3rem;
    font-size:1.4rem; font-weight:800; letter-spacing:-.03em; color:var(--ink);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* Keterangan kecil dibuat pil berwarna supaya tidak tenggelam */
.dz-stat-t small {
    display:inline-block; font-size:.7rem; font-weight:700;
    padding:.15rem .5rem; border-radius:var(--r-pill);
    background:#fff; border:1px solid var(--a2); color:var(--a);
}

/* =============================== BARIS KOLOM =============================== */
.dz-row { display:grid; gap:var(--s4); margin-bottom:var(--s5); }
.dz-row-2 { grid-template-columns:1fr 1fr; }
.dz-row-2-1 { grid-template-columns:1.9fr 1fr; }
.dz-body > .dz-card { margin-bottom:var(--s5); }

/* =============================== GRAFIK BATANG =============================== */
.dz-chart { display:flex; align-items:flex-end; gap:var(--s3); height:200px; padding-top:var(--s5); }
.dz-bar-wrap { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; gap:.4rem; }
.dz-bar-val { font-size:.72rem; font-weight:800; color:var(--ink-2); }
.dz-bar {
    width:100%; max-width:42px; border-radius:8px 8px 4px 4px;
    background:linear-gradient(180deg,#5b9bff,#2b7fff);
    height:var(--h); min-height:5px;
    transition:filter .2s, transform .2s var(--ease);
    animation:dzGrow .7s var(--ease) backwards;
}
.dz-bar-wrap:nth-child(1) .dz-bar { animation-delay:.02s }
.dz-bar-wrap:nth-child(2) .dz-bar { animation-delay:.06s }
.dz-bar-wrap:nth-child(3) .dz-bar { animation-delay:.10s }
.dz-bar-wrap:nth-child(4) .dz-bar { animation-delay:.14s }
.dz-bar-wrap:nth-child(5) .dz-bar { animation-delay:.18s }
.dz-bar-wrap:nth-child(6) .dz-bar { animation-delay:.22s }
.dz-bar-wrap:nth-child(7) .dz-bar { animation-delay:.26s }
.dz-bar-wrap:nth-child(8) .dz-bar { animation-delay:.30s }
@keyframes dzGrow { from { height:0; opacity:.3; } }
.dz-bar-wrap:hover .dz-bar { filter:brightness(1.08); transform:scaleY(1.03); transform-origin:bottom; }
.dz-bar-lbl { font-size:.68rem; color:var(--ink-3); white-space:nowrap; }

/* =============================== PROGRES LEVEL ===============================
   Level itu status, bukan angka biasa — jadi ditaruh di panel gelap dengan
   lencana metalik. Warna aksennya (--m1/--m2/--m3) diambil dari level yang
   sedang dituju, lewat kelas lv-* pada panel. */
.lv-silver   { --m1:#f8fafc; --m2:#cbd5e1; --m3:#94a3b8; --mi:#334155; }
.lv-gold     { --m1:#fef3c7; --m2:#fbbf24; --m3:#b45309; --mi:#442c02; }
.lv-platinum { --m1:#f0f9ff; --m2:#7dd3fc; --m3:#0284c7; --mi:#082f49; }
.lv-diamond  { --m1:#faf5ff; --m2:#c4b5fd; --m3:#7c3aed; --mi:#2e1065; }

/* Panelnya didominasi warna levelnya sendiri; gelap hanya dipakai sebagai
   aksen — bayangan sudut, lencana, dan isi bar. */
.dz-lvl-panel {
    position:relative; isolation:isolate; overflow:hidden;
    border-radius:var(--r-md); padding:var(--s5) var(--s4) var(--s4);
    background:linear-gradient(140deg,var(--m1) 0%,var(--m2) 52%,var(--m3) 100%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.65), 0 14px 30px -18px var(--m3);
}
/* Kilap terang dari sudut kiri atas */
.dz-lvl-aura {
    position:absolute; z-index:-1; inset:-45% auto auto -20%; width:260px; height:260px;
    background:radial-gradient(circle,#fff 0%, transparent 66%);
    opacity:.55; pointer-events:none;
}
/* Sedikit gelap di sudut kanan bawah supaya panelnya punya kedalaman */
.dz-lvl-panel::after {
    content:''; position:absolute; z-index:-1; inset:0; pointer-events:none;
    background:radial-gradient(120% 120% at 108% 118%, rgba(15,23,42,.42) 0%, transparent 58%);
}
/* Mahkota samar sebagai tekstur latar */
.dz-lvl-mark {
    position:absolute; z-index:-1; right:-18px; bottom:-30px;
    width:120px; height:120px; color:var(--mi); opacity:.16;
    transform:rotate(-10deg); pointer-events:none;
}

.dz-lvl-head { display:flex; align-items:center; gap:var(--s2); margin-bottom:var(--s4); }
.dz-lvl-sep { width:15px; height:15px; color:var(--mi); opacity:.45; flex-shrink:0; }

/* Lencana gelap — inilah porsi hitam yang tersisa, dan justru jadi kontras
   paling tajam di atas panel terang. */
.dz-chip {
    display:inline-flex; align-items:center; flex-shrink:0;
    padding:.3rem .75rem; border-radius:var(--r-pill);
    font-size:.68rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
    color:var(--m1); background:linear-gradient(140deg,#1e293b,#0f172a);
    border:1px solid rgba(255,255,255,.14);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 4px 12px -4px rgba(15,23,42,.7);
}

.dz-lvl-pct {
    font-size:2.4rem; font-weight:800; letter-spacing:-.04em; line-height:1;
    color:var(--mi); margin-bottom:var(--s3);
    text-shadow:0 1px 0 rgba(255,255,255,.35);
}
.dz-lvl-pct small { font-size:1rem; font-weight:700; opacity:.55; margin-left:.15rem; }

.dz-lvl-track {
    position:relative; height:9px; border-radius:99px; overflow:hidden;
    background:rgba(255,255,255,.55); box-shadow:inset 0 1px 2px rgba(15,23,42,.18);
}
.dz-lvl-fill {
    position:relative; height:100%; width:var(--p); min-width:9px; border-radius:99px;
    background:linear-gradient(90deg,#0f172a,#334155);
    box-shadow:0 1px 4px -1px rgba(15,23,42,.6);
    animation:dzFill 1.1s var(--ease) backwards;
}
/* Kilau yang menyapu isi bar */
.dz-lvl-fill::after {
    content:''; position:absolute; inset:0; border-radius:99px;
    background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.45) 50%,transparent 80%);
    animation:dzShine 2.8s var(--ease) infinite;
}
@keyframes dzFill { from { width:0; } }
@keyframes dzShine { 0% { transform:translateX(-120%); } 60%,100% { transform:translateX(220%); } }

.dz-lvl-num {
    display:flex; justify-content:space-between; gap:var(--s3);
    margin-top:var(--s2); font-size:.76rem; font-weight:700;
    color:var(--mi); opacity:.72; font-variant-numeric:tabular-nums;
}
.dz-lvl-num span:last-child { opacity:1; }
.dz-lvl-top { font-size:.95rem; font-weight:800; color:var(--mi); }
.dz-lvl-note { font-size:.8rem; line-height:1.7; margin:var(--s4) 0 0; padding:0 var(--s1); }
.dz-lvl-note b { color:var(--ink); }

/* =============================== POPUP BENEFIT =============================== */
.dz-bm {
    position:fixed; inset:0; z-index:400; padding:var(--s5); overflow-y:auto;
    display:flex; align-items:flex-start; justify-content:center;
    background:rgba(15,23,42,.55); backdrop-filter:blur(3px);
    animation:dzBmIn .2s var(--ease);
}
.dz-bm[hidden] { display:none; }
@keyframes dzBmIn { from { opacity:0; } }
.dz-bm-box {
    width:100%; max-width:720px; margin:auto; background:#fff;
    border-radius:var(--r-lg); box-shadow:var(--sh-3);
    animation:dzBmBox .28s var(--ease);
}
@keyframes dzBmBox { from { opacity:0; transform:translateY(-12px) scale(.98); } }

.dz-bm-h {
    display:flex; align-items:flex-start; gap:var(--s3);
    padding:var(--s5); border-bottom:1px solid var(--line);
    background:linear-gradient(120deg,#fff 40%,var(--blue-50));
    border-radius:var(--r-lg) var(--r-lg) 0 0;
}
.dz-bm-h-ico {
    width:38px; height:38px; border-radius:12px; flex-shrink:0;
    display:grid; place-items:center; color:#fff;
    background:linear-gradient(140deg,#60a5fa,var(--blue));
    box-shadow:0 8px 18px -8px var(--blue);
}
.dz-bm-h-ico svg { width:19px; height:19px; }
.dz-bm-h-t { flex:1; min-width:0; }
.dz-bm-h-t h3 { font-size:1.02rem; font-weight:800; letter-spacing:-.02em; }
.dz-bm-h-t p { font-size:.78rem; color:var(--ink-3); margin-top:.15rem; }
.dz-bm-x {
    background:#fff; border:1px solid var(--line); cursor:pointer; color:var(--ink-3);
    padding:6px; border-radius:var(--r-sm); flex-shrink:0; line-height:0;
    transition:background .18s, color .18s, border-color .18s;
}
.dz-bm-x:hover { background:var(--red-bg); color:var(--red); border-color:#fecaca; }
.dz-bm-x:focus-visible { outline:2px solid var(--blue); outline-offset:2px; }
.dz-bm-x svg { width:17px; height:17px; }

.dz-bm-b { padding:var(--s5); }
.dz-bm-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s4); }

/* Tiap level jadi kartu bernuansa warnanya sendiri, bukan kotak abu seragam
   dengan garis tipis di atas yang nyaris tak terbaca. */
.dz-bm-lv {
    position:relative; isolation:isolate; overflow:hidden;
    padding:var(--s4); border-radius:var(--r-md);
    border:1px solid var(--line);
    background:linear-gradient(150deg,#fff 42%,var(--m1));
    transition:border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.dz-bm-lv::before {
    content:''; position:absolute; inset:0 0 auto 0; height:4px;
    background:linear-gradient(90deg,var(--m1),var(--m2) 50%,var(--m3));
}
.dz-bm-lv:hover { transform:translateY(-2px); box-shadow:var(--sh-2); border-color:var(--m2); }
/* Level yang sedang dipakai: dibingkai warnanya sendiri, bukan sekadar putih */
.dz-bm-lv.is-now { border-color:var(--m2); box-shadow:0 10px 26px -16px var(--m3), inset 0 0 0 1px var(--m2); }

/* Mahkota samar di pojok — pengikat visual dengan panel level di dashboard */
.dz-bm-lv-mark {
    position:absolute; z-index:-1; right:-12px; top:-14px;
    width:74px; height:74px; color:var(--m3); opacity:.12;
    transform:rotate(12deg); pointer-events:none;
}

.dz-bm-lv-h { display:flex; align-items:center; flex-wrap:wrap; gap:var(--s2); margin-bottom:var(--s4); }
.dz-bm-now {
    display:inline-flex; align-items:center; gap:.2rem;
    font-size:.62rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
    padding:.2rem .5rem; border-radius:var(--r-pill);
    background:var(--green-bg); color:var(--green); border:1px solid #bbf7d0;
}
.dz-bm-now svg { width:12px; height:12px; }

/* Baris keterangan dipisah garis rambut supaya mudah dipindai */
.dz-bm-d { margin:0; display:flex; flex-direction:column; }
.dz-bm-d > div {
    display:flex; align-items:baseline; justify-content:space-between; gap:var(--s3);
    padding:.5rem 0; border-top:1px solid rgba(15,23,42,.07);
}
.dz-bm-d > div:first-child { border-top:0; padding-top:0; }
.dz-bm-d > div:last-child { padding-bottom:0; }
.dz-bm-d dt { font-size:.75rem; color:var(--ink-3); }
.dz-bm-d dd { margin:0; font-size:.82rem; font-weight:700; color:var(--ink); text-align:right; font-variant-numeric:tabular-nums; }

.dz-bm-foot {
    display:flex; align-items:flex-start; gap:var(--s3);
    margin-top:var(--s5); padding:var(--s4);
    border-radius:var(--r-md); background:var(--paper-2); border:1px solid var(--line);
    font-size:.78rem; color:var(--ink-2); line-height:1.7;
}
.dz-bm-foot svg { width:16px; height:16px; flex-shrink:0; margin-top:.2rem; color:var(--blue); }
.dz-bm-foot b { color:var(--ink); }

/* Baris tombol di kaki dialog */
.dz-bm-f {
    display:flex; justify-content:flex-end; gap:var(--s3);
    padding:var(--s4) var(--s5); border-top:1px solid var(--line);
    background:var(--paper-2); border-radius:0 0 var(--r-lg) var(--r-lg);
}

/* Daftar berita di dalam popup informasi. Dibatasi tingginya supaya kepala
   dan tombol dialog tetap terlihat walau beritanya banyak. */
.dz-info-list { display:flex; flex-direction:column; gap:var(--s3); max-height:52vh; overflow-y:auto; }
.dz-info-list::-webkit-scrollbar { width:6px; }
.dz-info-list::-webkit-scrollbar-thumb { background:#dbe3ee; border-radius:99px; }
.dz-info-top { display:flex; align-items:center; justify-content:space-between; gap:var(--s3); flex-wrap:wrap; }
.dz-info-top .dz-cat { margin-bottom:0; }
.dz-info-top .dz-info-d { margin-top:0; }
.dz-info-list .dz-info { padding:var(--s4); }
.dz-info-list .dz-info-c { margin-top:var(--s2); }

/* =============================== TABEL =============================== */
.dz-tbl-wrap { overflow-x:auto; }
.dz-tbl { font-size:.83rem; }
.dz-tbl th {
    text-align:left; font-weight:700; font-size:.72rem; letter-spacing:.04em; text-transform:uppercase;
    color:var(--ink-3); padding:var(--s3) var(--s4); border-bottom:1px solid var(--line); white-space:nowrap;
}
.dz-tbl td { padding:var(--s3) var(--s4); border-bottom:1px solid var(--line); vertical-align:middle; }
.dz-tbl tr:last-child td { border-bottom:none; }
.dz-tbl tbody tr { transition:background .15s; }
.dz-tbl tbody tr:hover { background:var(--paper-2); }
.dz-tbl .num { text-align:right; white-space:nowrap; }
.dz-id { font-weight:700; color:var(--ink-3); white-space:nowrap; }
.dz-svc { font-weight:600; max-width:260px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dz-tgt { color:var(--ink-2); max-width:170px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dz-date { color:var(--ink-3); white-space:nowrap; font-size:.78rem; }

/* Badge status pesanan */
.dz-st { display:inline-block; font-size:.68rem; font-weight:800; padding:.2rem .55rem; border-radius:var(--r-pill); white-space:nowrap; }
.dz-st-ok   { background:var(--green-bg); color:var(--green); }
.dz-st-prog { background:var(--blue-50);  color:var(--blue); }
.dz-st-wait { background:var(--amber-bg); color:var(--amber); }
.dz-st-warn { background:#fef9c3;         color:#a16207; }
.dz-st-bad  { background:var(--red-bg);   color:var(--red); }

/* =============================== DAFTAR ITEM =============================== */
.dz-list { display:flex; flex-direction:column; gap:var(--s2); }
.dz-scroll { max-height:340px; overflow-y:auto; }
.dz-scroll::-webkit-scrollbar { width:6px; }
.dz-scroll::-webkit-scrollbar-thumb { background:#dbe3ee; border-radius:99px; }

.dz-item {
    display:flex; align-items:center; gap:var(--s3); padding:var(--s3);
    border-radius:var(--r-sm); border:1px solid transparent;
    transition:background .18s, border-color .18s, transform .18s var(--ease);
}
.dz-item:hover { background:var(--paper-2); border-color:var(--line); transform:translateX(3px); }
.dz-item > svg:last-child { width:15px; height:15px; color:var(--ink-3); margin-left:auto; flex-shrink:0; }
.dz-item-ico { width:32px; height:32px; border-radius:9px; display:grid; place-items:center; flex-shrink:0; }
.dz-item-ico svg { width:15px; height:15px; }
.dz-item-ico.c1 { background:var(--amber-bg); color:var(--amber); }
.dz-item-ico.c2 { background:var(--green-bg); color:var(--green); }
.dz-item-ico.c4 { background:var(--blue-50);  color:var(--blue); }
.dz-item-ico.c5 { background:var(--red-bg);   color:var(--red); }
.dz-item-t { font-size:.83rem; font-weight:600; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; }
.dz-item-n { font-size:.76rem; font-weight:700; color:var(--blue); flex-shrink:0; }

/* Peringkat terlaris */
.dz-rank {
    width:26px; height:26px; border-radius:8px; display:grid; place-items:center; flex-shrink:0;
    font-size:.75rem; font-weight:800; background:var(--paper-2); color:var(--ink-3); border:1px solid var(--line);
}
.dz-rank.r1 { background:linear-gradient(140deg,#fde68a,#fcd34d); color:#92400e; border-color:#fcd34d; }
.dz-rank.r2 { background:linear-gradient(140deg,#e2e8f0,#cbd5e1); color:#475569; border-color:#cbd5e1; }
.dz-rank.r3 { background:linear-gradient(140deg,#fed7aa,#fdba74); color:#9a3412; border-color:#fdba74; }

/* =============================== ACCORDION PILIHAN LAYANAN =============================== */
.dz-acc-item { border-top:1px solid var(--line); }
.dz-acc-item:first-child { border-top:none; }

.dz-acc summary {
    list-style:none; cursor:pointer;
    display:flex; align-items:center; gap:var(--s3);
    padding:var(--s4) var(--s5);
    font-size:.88rem; font-weight:600; color:var(--ink);
    transition:background .16s;
}
.dz-acc summary::-webkit-details-marker { display:none; }
.dz-acc summary:hover { background:var(--paper-2); }
.dz-acc summary > svg:first-child { width:17px; height:17px; color:var(--blue); flex-shrink:0; }
.dz-acc-j { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dz-acc-n {
    font-size:.68rem; font-weight:800; min-width:20px; text-align:center;
    padding:.1rem .4rem; border-radius:var(--r-pill);
    background:var(--blue-50); color:var(--blue); flex-shrink:0;
}
.dz-acc-x { width:16px; height:16px; color:var(--ink-3); flex-shrink:0; transition:transform .25s var(--ease); }
.dz-acc-item[open] > summary .dz-acc-x { transform:rotate(180deg); }
.dz-acc-item[open] > summary { background:var(--paper-2); }

.dz-acc-b { padding:var(--s2) var(--s4) var(--s4); display:flex; flex-direction:column; gap:var(--s2); animation:dzAccIn .25s var(--ease); }
@keyframes dzAccIn { from { opacity:0; transform:translateY(-5px); } }

/* --- Baris layanan di dalam accordion --- */
.dz-sv {
    --sc:#2b7fff; --sbg:#eff6ff;
    display:flex; align-items:center; gap:var(--s3);
    padding:var(--s3); border:1px solid var(--line); border-radius:var(--r-md);
    background:#fff; min-width:0;
    transition:border-color .2s, box-shadow .2s, transform .2s var(--ease);
}
.dz-sv:hover { border-color:var(--sc); box-shadow:var(--sh-2); transform:translateY(-2px); }
.dz-sv.am { --sc:#d97706; --sbg:#fffbeb; }  /* rekomendasi  */
.dz-sv.bl { --sc:#2b7fff; --sbg:#eff6ff; }  /* sering dipesan */
.dz-sv.gd { --sc:#ca8a04; --sbg:#fefce8; }  /* terlaris     */

.dz-sv-ico {
    width:32px; height:32px; border-radius:9px; flex-shrink:0;
    display:grid; place-items:center;
    background:var(--sbg); color:var(--sc);
}
.dz-sv-ico svg { width:15px; height:15px; }

/* ID layanan — sengaja monospace supaya angkanya rata & mudah dibaca */
.dz-sv-id {
    flex-shrink:0; font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
    font-size:.72rem; font-weight:700; letter-spacing:-.02em;
    padding:.2rem .45rem; border-radius:6px;
    background:var(--sbg); color:var(--sc);
}
.dz-sv-name {
    flex:1; min-width:0; font-size:.82rem; font-weight:600; color:var(--ink);
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* Tombol keranjang "pesan cepat" */
.dz-cart {
    width:34px; height:34px; border-radius:var(--r-sm); flex-shrink:0;
    display:grid; place-items:center;
    background:var(--blue-50); color:var(--blue); border:1px solid transparent;
    transition:background .2s, color .2s, transform .25s var(--spring), box-shadow .25s var(--ease);
}
.dz-cart svg { width:16px; height:16px; }
.dz-cart:hover { background:var(--blue); color:#fff; transform:translateY(-2px) scale(1.06); box-shadow:var(--sh-blue); }
.dz-cart:focus-visible { outline:2px solid var(--blue); outline-offset:2px; }

/* Baris di dalam accordion tidak perlu efek geser (ada tombol di kanan) */
.dz-acc-b .dz-item:hover { transform:none; }

/* =============================== LOG UPDATE LAYANAN =============================== */
.dz-logs { display:flex; flex-direction:column; gap:var(--s3); }

/* Warna per jenis perubahan (di-set lewat kelas cy/or/gr/rd/bl/gy) */
.dz-log2 {
    --lc:#64748b; --lbg:#f1f5f9;
    display:flex; gap:var(--s3);
    padding:var(--s4); border:1px solid var(--line); border-radius:var(--r-md);
    background:#fff; transition:border-color .2s, box-shadow .2s, transform .2s var(--ease);
}
.dz-log2:hover { border-color:var(--lc); box-shadow:var(--sh-2); transform:translateY(-2px); }
.dz-log2.cy { --lc:#0891b2; --lbg:#ecfeff; }
.dz-log2.or { --lc:#ea580c; --lbg:#fff7ed; }
.dz-log2.gr { --lc:#16a34a; --lbg:#f0fdf4; }
.dz-log2.rd { --lc:#dc2626; --lbg:#fef2f2; }
.dz-log2.bl { --lc:#2b7fff; --lbg:#eff6ff; }
.dz-log2.gy { --lc:#64748b; --lbg:#f1f5f9; }

.dz-log2-ico {
    width:40px; height:40px; border-radius:50%; flex-shrink:0;
    display:grid; place-items:center; color:#fff;
    background:var(--lc); box-shadow:0 6px 14px -6px var(--lc);
}
.dz-log2-ico svg { width:19px; height:19px; }

.dz-log2-t { min-width:0; flex:1; }
.dz-log2-time { font-size:.7rem; color:var(--ink-3); }
.dz-log2-name { font-size:.84rem; font-weight:700; margin:.15rem 0 var(--s2); line-height:1.4; word-break:break-word; }

/* Label jenis + perubahan angka */
.dz-log2-tags { display:flex; flex-wrap:wrap; gap:.35rem; }
.dz-lt {
    display:inline-block; font-size:.68rem; font-weight:700; white-space:nowrap;
    padding:.25rem .6rem; border-radius:var(--r-pill);
    background:var(--lc); color:#fff;
}
.dz-lt-num { background:var(--lbg); color:var(--lc); border:1px solid var(--lc); }


/* =============================== INFORMASI =============================== */
.dz-info { padding:var(--s3); border-radius:var(--r-sm); border:1px solid var(--line); background:var(--paper-2); }
.dz-cat { display:inline-block; font-size:.62rem; font-weight:800; letter-spacing:.06em; padding:.15rem .5rem; border-radius:var(--r-pill); margin-bottom:var(--s2); }
.dz-cat-info        { background:var(--blue-50);   color:var(--blue); }
.dz-cat-service     { background:var(--green-bg);  color:var(--green); }
.dz-cat-maintenance { background:var(--amber-bg);  color:var(--amber); }
.dz-cat-update      { background:var(--violet-bg); color:var(--violet); }
.dz-info-c { font-size:.82rem; color:var(--ink-2); line-height:1.6; }
.dz-info-c p { margin:0; }
.dz-info-d { font-size:.7rem; color:var(--ink-3); margin-top:var(--s2); }

/* =============================== KEADAAN KOSONG =============================== */
.dz-empty { text-align:center; padding:var(--s6) var(--s4); }
.dz-empty.sm { padding:var(--s5) var(--s4); }
.dz-empty svg { width:34px; height:34px; color:#cbd5e1; margin-bottom:var(--s3); }
.dz-empty p { font-size:.85rem; color:var(--ink-3); margin-bottom:var(--s4); }
.dz-empty.sm p { margin-bottom:0; }

/* =============================================================
   Tinggi kartu disamakan & isinya digulir sendiri, supaya baris
   "Pilihan Layanan + Update Layanan" rata dan tidak memanjang.
   ============================================================= */
.dz-row-2 > .dz-card { display:flex; flex-direction:column; min-width:0; }
.dz-row-2 > .dz-card > .dz-acc,
.dz-row-2 > .dz-card > .dz-card-b { flex:1; min-height:0; }
.dz-acc { overflow-y:auto; max-height:420px; }
.dz-logs.dz-scroll { max-height:420px; }
.dz-acc::-webkit-scrollbar { width:6px; }
.dz-acc::-webkit-scrollbar-thumb { background:#dbe3ee; border-radius:99px; }

/* Cegah teks panjang melebarkan grid */
.dz-row > * { min-width:0; }

/* =============================== RESPONSIF =============================== */
@media (max-width:1200px) {
    .dz-row-2-1 { grid-template-columns:1fr; }
}
@media (max-width:900px) {
    .dz-row-2 { grid-template-columns:1fr; }
    .dz-acc, .dz-logs.dz-scroll { max-height:360px; }
}
@media (max-width:640px) {
    .dz-stats { grid-template-columns:1fr; }
    .dz-stat { padding:var(--s4); gap:var(--s3); }
    .dz-stat-ico { width:44px; height:44px; border-radius:13px; }
    .dz-stat-ico svg { width:20px; height:20px; }
    .dz-stat-t b { font-size:1.2rem; }
    .dz-stat-bg svg { width:104px; height:104px; }
    .dz-chart { height:160px; gap:var(--s2); }
    .dz-acc summary { padding:var(--s3) var(--s4); font-size:.84rem; }
    .dz-log2 { padding:var(--s3); gap:var(--s2); }
    .dz-log2-ico { width:34px; height:34px; }
    .dz-log2-ico svg { width:16px; height:16px; }
    .dz-lvl-pct { font-size:2rem; }
    .dz-bm { padding:var(--s3); }
    .dz-bm-h, .dz-bm-b { padding:var(--s4); }
    .dz-bm-grid { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .dz-bar { animation-duration:.01s; }
    /* Kartu statistik tetap memberi umpan balik, tapi tanpa gerak:
       yang berubah cuma bayangan, warna tepi, dan pekat watermark. */
    .dz-stat:hover { transform:none; }
    .dz-stat:hover .dz-stat-ico { transform:none; }
    .dz-stat:hover .dz-stat-bg { transform:rotate(-12deg); }
    /* Kilau bar level dibuat sangat lambat, bukan dimatikan — bar-nya tetap
       terbaca hidup tanpa gerakan yang mengganggu. */
    .dz-lvl-fill::after { animation-duration:14s; }
    .dz-bm-lv:hover { transform:none; }
}

/* =============================== PESANAN BARU (order/single) ===============================
   Isi form-nya tidak disentuh — yang dibenahi cuma tiga blok di atasnya yang
   dulu memakan hampir seluruh layar pertama sebelum pengguna sampai ke form. */

/* Catatan pengantar. Dulu berupa alert tinggi dengan dua <hr> dan judul
   kapital; sekarang satu baris setara bobot informasinya. */
.dz-note {
    display:flex; align-items:flex-start; gap:var(--s3);
    padding:.7rem var(--s4); margin-bottom:var(--s4);
    border-radius:var(--r-md); background:var(--blue-50); border:1px solid #bfdbfe;
    color:#1e40af; font-size:.82rem; line-height:1.65;
}
.dz-note > i { flex-shrink:0; margin-top:.25rem; font-size:.9rem; }

/* Ticker pembelian. <marquee> sudah dihapus dari standar HTML, tidak bisa
   dijeda, dan mengabaikan preferensi kurangi-gerak. Diganti animasi CSS
   yang berhenti saat disentuh kursor. */
.dz-tick {
    display:flex; align-items:center; gap:var(--s3);
    padding:.45rem .5rem .45rem .5rem; margin-bottom:var(--s4);
    border:1px solid var(--line); border-radius:var(--r-pill);
    background:#fff; box-shadow:var(--sh-1);
    font-size:.8rem; color:var(--ink-2);
}
.dz-tick-l {
    flex-shrink:0; display:inline-flex; align-items:center; gap:.3rem;
    padding:.3rem .7rem; border-radius:var(--r-pill);
    background:var(--blue); color:#fff;
    font-size:.66rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
}
.dz-tick-w { flex:1; min-width:0; overflow:hidden; }
.dz-tick-t { display:inline-block; white-space:nowrap; padding-left:100%; animation:dzTick var(--dur,12s) linear infinite; }
.dz-tick:hover .dz-tick-t { animation-play-state:paused; }
.dz-tick-t b { color:var(--ink); }
.dz-tick-s { color:var(--ink-3); margin:0 .6rem; }
.dz-tick-e { color:var(--ink-3); }
@keyframes dzTick { to { transform:translateX(-100%); } }

/* Tombol lipat filter — sekarang tombol tenang, bukan tombol biru pekat
   yang bersaing perhatian dengan chip di bawahnya. */
.dz-fbtn {
    display:inline-flex; align-items:center; gap:var(--s2);
    padding:.45rem .85rem; margin-bottom:var(--s3);
    border:1px solid var(--line); border-radius:var(--r-pill);
    background:#fff; color:var(--ink-2); cursor:pointer;
    font-family:var(--font); font-size:.8rem; font-weight:600;
    transition:border-color .18s var(--ease), color .18s var(--ease);
}
.dz-fbtn:hover { border-color:var(--blue); color:var(--blue); }
.dz-fbtn:focus-visible { outline:2px solid var(--blue); outline-offset:2px; }

/* Kisi kategori: empat kolom penuh seperti semula, tapi tombolnya dirancang
   ulang. Tiap kategori membawa warna mereknya sendiri lewat --bc, dipasang
   dari kelas btn* yang memang sudah ada di markup — jadi tanpa tambahan
   atribut apa pun. */
.dz-filter { display:grid; grid-template-columns:repeat(4,1fr); gap:.5rem; margin-bottom:var(--s5); }

.dz-fchip {
    --bc:var(--blue);
    display:flex; align-items:center; gap:.6rem; width:100%; min-width:0;
    padding:.6rem .75rem; border-radius:var(--r-md);
    border:1px solid var(--line); background:#fff; color:var(--ink);
    font-family:var(--font); font-size:.84rem; font-weight:600; text-align:left;
    cursor:pointer; box-shadow:var(--sh-1);
    transition:border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--spring), background .2s var(--ease), color .2s var(--ease);
}
/* Ikon duduk di ubin kecil, bukan menempel telanjang ke teks */
.dz-fchip-i {
    width:30px; height:30px; flex-shrink:0; border-radius:9px;
    display:grid; place-items:center;
    background:var(--paper-2);                          /* cadangan */
    background:color-mix(in srgb, var(--bc) 12%, #fff);
    color:var(--bc); font-size:.95rem;
    transition:background .2s var(--ease), color .2s var(--ease);
}
.dz-fchip-t { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.dz-fchip:hover { border-color:var(--bc); transform:translateY(-2px); box-shadow:var(--sh-2); }
.dz-fchip:focus-visible { outline:2px solid var(--bc); outline-offset:2px; }
.dz-fchip:active { transform:translateY(0); }

/* Yang sedang dipilih diisi penuh warna mereknya */
.dz-fchip.active {
    background:var(--bc);                               /* cadangan */
    background:linear-gradient(135deg, color-mix(in srgb, var(--bc) 82%, #fff), var(--bc));
    border-color:transparent; color:#fff;
    box-shadow:0 8px 20px -8px var(--bc);
}
.dz-fchip.active .dz-fchip-i { background:rgba(255,255,255,.22); color:#fff; }

/* Warna merek per kategori */
.dz-fchip.btnAll        { --bc:#2b7fff; }
.dz-fchip.btnInstagram  { --bc:#e1306c; }
.dz-fchip.btnFacebook   { --bc:#1877f2; }
.dz-fchip.btnYoutube    { --bc:#ef0000; }
.dz-fchip.btnTwitter    { --bc:#1da1f2; }
.dz-fchip.btnSpotify    { --bc:#1db954; }
.dz-fchip.btnTiktok     { --bc:#fe2c55; }
.dz-fchip.btnGoogle     { --bc:#ea4335; }
.dz-fchip.btnThreads    { --bc:#1f2937; }
.dz-fchip.btnTelegram   { --bc:#229ed9; }
.dz-fchip.btnDiscord    { --bc:#5865f2; }
.dz-fchip.btnSoundCloud { --bc:#ff5500; }
.dz-fchip.btnTwitch     { --bc:#9146ff; }
.dz-fchip.btnWebsite    { --bc:#0ea5e9; }
.dz-fchip.btnPromo      { --bc:#ec4899; }
.dz-fchip.btnOther      { --bc:#64748b; }

@media (max-width:1200px) { .dz-filter { grid-template-columns:repeat(3,1fr); } }
@media (max-width:900px)  { .dz-filter { grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px) {
    .dz-fchip { font-size:.78rem; padding:.5rem .6rem; gap:.5rem; }
    .dz-fchip-i { width:26px; height:26px; border-radius:8px; font-size:.85rem; }
    .dz-note { font-size:.78rem; }
}

@media (prefers-reduced-motion: reduce) {
    /* Ticker diperlambat, bukan dimatikan — kalau berhenti total, isi yang
       melewati batas layar tidak akan pernah terbaca. */
    .dz-tick-t { animation-duration:calc(var(--dur,12s) * 4); }
    .dz-fchip:hover { transform:none; }
}

/* ---------- Ringkasan layanan di form Pesanan Baru ----------
   Ini KELUARAN, bukan isian. Dulu memakai .form-control sehingga tak bisa
   dibedakan dari kolom Target/Jumlah yang benar-benar harus diketik. */
.dz-sum {
    border:1px solid var(--line); border-radius:var(--r-md);
    background:var(--paper-2); margin-bottom:var(--s4); overflow:hidden;
}
.dz-sum-h {
    display:flex; align-items:center; justify-content:space-between; gap:var(--s3); flex-wrap:wrap;
    padding:.55rem var(--s4); border-bottom:1px solid var(--line); background:#fff;
}
.dz-sum-h > span:first-child {
    display:inline-flex; align-items:center; gap:.4rem;
    font-size:.72rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-3);
}
.dz-sum-tags { display:inline-flex; align-items:center; gap:.35rem; flex-wrap:wrap; }
.dz-sum-tag {
    display:inline-flex; align-items:center; gap:.25rem;
    padding:.15rem .5rem; border-radius:var(--r-pill);
    background:var(--paper-2); border:1px solid var(--line);
    font-size:.66rem; font-weight:700; color:var(--ink-3);
}
.dz-sum-tag.ok { background:var(--green-bg); border-color:#bbf7d0; color:var(--green); }

.dz-sum-g { display:grid; grid-template-columns:repeat(3,1fr); }
.dz-sum-i { padding:.7rem var(--s4); border-right:1px solid var(--line); min-width:0; }
.dz-sum-i:last-child { border-right:0; }
.dz-sum-l { display:block; font-size:.72rem; color:var(--ink-3); margin-bottom:.2rem; }
.dz-sum-v { display:block; font-size:.95rem; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; }
/* Input tetap <input> karena JS mengisinya lewat .val(); yang dibuang cuma
   rupa kotak isiannya. */
.dz-sum-v input {
    all:unset; width:100%; min-width:0;
    font-family:var(--font); font-size:.95rem; font-weight:700; color:var(--ink);
    font-variant-numeric:tabular-nums; cursor:default;
}
.dz-sum-price { display:flex; align-items:baseline; gap:.25rem; }

.dz-sum-b { padding:.7rem var(--s4); border-top:1px solid var(--line); }
.dz-sum-x { font-size:.83rem; color:var(--ink-2); line-height:1.65; overflow-wrap:anywhere; }
.dz-sum-x:empty::after { content:'—'; color:var(--ink-3); }

@media (max-width:640px) {
    .dz-sum-g { grid-template-columns:1fr; }
    .dz-sum-i { border-right:0; border-bottom:1px solid var(--line); }
    .dz-sum-i:last-child { border-bottom:0; }
}

/* ---------- Kartu Informasi di Pesanan Baru ----------
   Teksnya berasal dari pengaturan admin (`order_info`) dan dirender apa adanya
   lewat nl2br(), jadi strukturnya tidak bisa diatur dari sini. Yang bisa
   dikerjakan cuma keterbacaan. */
.dz-inf {
    font-size:.84rem; line-height:1.85; color:var(--ink-2);
    max-height:70vh; overflow-y:auto;
}
.dz-inf::-webkit-scrollbar { width:6px; }
.dz-inf::-webkit-scrollbar-thumb { background:#dbe3ee; border-radius:99px; }
/* Bagian tebal dipakai penulisnya sebagai penekanan sekaligus judul bagian —
   dipertegas warnanya supaya benar-benar menonjol dari teks sekitarnya. */
.dz-inf b, .dz-inf strong { color:var(--ink); font-weight:700; }
.dz-inf i, .dz-inf em { color:var(--ink); font-style:italic; }
.dz-inf a { color:var(--blue); text-decoration:underline; }

/* Panel mengikuti saat form digulir — form-nya jauh lebih panjang, dan aturan
   ini justru paling dibutuhkan ketika pengguna sedang mengisi bagian bawah. */
@media (min-width:769px) {
    .dz-inf-card { position:sticky; top:calc(var(--topbar-h) + var(--s4)); }
}
@media (max-width:768px) {
    .dz-inf { max-height:none; }
}

/* Dua penanda di kepala ringkasan (#is_refill, #txt_custom_price) diatur lewat
   ID, bukan kelas. Sebabnya JS di halaman ini memanggil removeAttr('class')
   dan addClass() pada keduanya — kelas apa pun yang dipasang dari markup akan
   tersapu saat layanan dipilih. Yang diatur di sini hanya BENTUK; warnanya
   sengaja dibiarkan ke .text-success / .text-danger yang dipasang JS, karena
   itulah yang membedakan refill tersedia atau tidak. */
#is_refill, #txt_custom_price {
    display:inline-flex; align-items:center; gap:.25rem;
    padding:.15rem .5rem; border-radius:var(--r-pill);
    background:var(--paper-2); border:1px solid var(--line);
    font-size:.66rem !important; font-weight:700; line-height:1.6;
}
/* Saat tidak ada layanan terpilih, JS mengosongkan isinya — jangan sisakan
   pil kosong yang menggantung. */
#is_refill:empty, #txt_custom_price:empty { display:none; }
#txt_custom_price.d-none { display:none !important; }

/* ---------- Keadaan memuat di dalam dialog data ----------
   Dipakai modal_open() sebelum isinya datang. */
.dz-bm-load {
    display:flex; align-items:center; justify-content:center; gap:var(--s2);
    padding:var(--s6) var(--s4); color:var(--ink-3); font-size:.86rem;
}
.dz-bm-load svg { width:18px; height:18px; animation:dzSpin 1s linear infinite; }
@keyframes dzSpin { to { transform:rotate(360deg); } }

/* Isi dialog datang dari view lama yang memakai kelas Bootstrap. Muatan
   warisan sudah menatanya; di sini hanya jarak tepinya yang dirapikan
   supaya tidak menempel ke bingkai dialog. */
.dz-bm-b > .row:last-child,
.dz-bm-b > .table-responsive:last-child { margin-bottom:0; }
.dz-bm-b .table { margin-bottom:0; }

/* =============================== LAPORAN PESANAN (order/graph) =============================== */
/* Baris filter tanggal. Dulu satu kolom teks selebar halaman tanpa ikon,
   tanpa contoh format, dan tanpa cara kembali ke tampilan awal — orang tidak
   tahu itu bisa diklik, apalagi bahwa isinya rentang dua tanggal. */
.dz-range { display:flex; flex-wrap:wrap; align-items:center; gap:var(--s2); margin-bottom:var(--s3); }
.dz-range-f {
    position:relative; display:flex; align-items:center; flex:1 1 280px; max-width:360px;
}
.dz-range-f > i:first-child {
    position:absolute; left:12px; color:var(--ink-3); font-size:.9rem; pointer-events:none;
}
.dz-range-f input {
    width:100%; height:40px; padding:0 34px 0 34px;
    border:1px solid var(--line); border-radius:var(--r-sm); background:#fff;
    font-family:var(--font); font-size:.85rem; color:var(--ink); cursor:pointer;
    transition:border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.dz-range-f input:focus { outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(43,127,255,.12); }
.dz-range-f input::placeholder { color:var(--ink-3); }
/* Tombol kembali ke tampilan bawaan — dulu tidak ada sama sekali, sekali
   memfilter pengguna terjebak sampai mengubah URL sendiri. */
.dz-range-x {
    position:absolute; right:10px; display:grid; place-items:center;
    width:20px; height:20px; border-radius:50%;
    background:var(--paper-2); color:var(--ink-3); font-size:.7rem;
    transition:background .18s, color .18s;
}
.dz-range-x:hover { background:var(--red-bg); color:var(--red); }

.dz-range-b {
    display:inline-flex; align-items:center; gap:.4rem; height:40px; padding:0 1rem;
    border:none; border-radius:var(--r-sm); background:var(--blue); color:#fff;
    font-family:var(--font); font-size:.85rem; font-weight:600; cursor:pointer;
    box-shadow:var(--sh-blue);
    transition:background .18s var(--ease);
}
.dz-range-b:hover { background:var(--blue-600); }

.dz-range-p { display:flex; flex-wrap:wrap; gap:.35rem; margin-bottom:var(--s5); }
.dz-range-c {
    display:inline-block; padding:.4rem .75rem; border-radius:var(--r-pill);
    border:1px solid var(--line); background:#fff; color:var(--ink-2);
    font-family:var(--font); font-size:.78rem; font-weight:600; cursor:pointer;
    transition:border-color .18s, color .18s, background .18s;
}
.dz-range-c:hover { border-color:var(--blue); color:var(--blue); }
.dz-range-c.active { background:var(--blue-50); border-color:var(--blue); color:var(--blue); }

@media (max-width:640px) {
    .dz-range-f { max-width:none; }
    .dz-range-b { flex:1; justify-content:center; }
    .dz-sum-grid { grid-template-columns:repeat(2,1fr); gap:var(--s2); }
    .dz-sc { padding:var(--s3); }
    .dz-sc-rp { font-size:1rem; }
}

/* Ringkasan per status. Dulu lima <table> terpisah dengan blok warna penuh,
   lalu sempat jadi lima baris putih yang sisi tengahnya menganga. Sekarang
   kartu berjajar: tiap status membawa warnanya sendiri lewat --c. */
.dz-sum-grid {
    display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr));
    gap:var(--s3); margin-bottom:var(--s4);
}
.dz-sc {
    --c:var(--ink-3); --ct:var(--paper-2);
    position:relative; isolation:isolate; overflow:hidden;
    padding:var(--s4); border-radius:var(--r-md);
    border:1px solid var(--line); box-shadow:var(--sh-1);
    background:linear-gradient(150deg,#fff 45%, var(--ct));
    transition:transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.dz-sc.ok   { --c:var(--green); --ct:var(--green-bg); }
.dz-sc.wait { --c:var(--amber); --ct:var(--amber-bg); }
.dz-sc.prog { --c:var(--blue);  --ct:var(--blue-50); }
.dz-sc.bad  { --c:var(--red);   --ct:var(--red-bg); }
.dz-sc.warn { --c:#a16207;      --ct:#fef9c3; }
/* Status tanpa data diredupkan supaya yang berisi lebih menonjol */
.dz-sc.kosong { background:#fff; }
.dz-sc.kosong .dz-sc-rp { color:var(--ink-3); }
.dz-sc:hover { transform:translateY(-2px); box-shadow:var(--sh-2); border-color:var(--c); }

/* Ikon besar transparan di pojok, sama bahasanya dengan kartu statistik dashboard */
.dz-sc-bg {
    position:absolute; z-index:-1; right:-10px; bottom:-14px;
    width:74px; height:74px; color:var(--c); opacity:.1;
    transform:rotate(-10deg); pointer-events:none;
}
.dz-sc.kosong .dz-sc-bg { opacity:.06; }

.dz-sc-h {
    display:flex; align-items:center; gap:.45rem; margin-bottom:.35rem;
    font-size:.8rem; font-weight:700; color:var(--c);
}
.dz-sc-i {
    width:24px; height:24px; border-radius:7px; flex-shrink:0;
    display:grid; place-items:center; color:#fff; background:var(--c);
}
.dz-sc-i svg { width:14px; height:14px; }

.dz-sc-rp {
    font-size:1.15rem; font-weight:800; letter-spacing:-.02em; color:var(--ink);
    font-variant-numeric:tabular-nums;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* Bar porsi: menunjukkan andil status ini terhadap seluruh pesanan */
.dz-sc-bar {
    height:4px; border-radius:99px; background:rgba(15,23,42,.08);
    margin:.5rem 0 .35rem; overflow:hidden;
}
.dz-sc-bar span {
    display:block; height:100%; border-radius:99px; background:var(--c);
    transition:width .5s var(--ease);
}
.dz-sc-f {
    display:flex; align-items:baseline; justify-content:space-between; gap:var(--s2);
    font-size:.74rem; color:var(--ink-3); font-variant-numeric:tabular-nums;
}
.dz-sc-f b { font-weight:800; color:var(--c); }

.dz-sum-tot { font-size:.82rem; color:var(--ink-2); }
.dz-sum-tot b { color:var(--ink); font-weight:700; }

@media (prefers-reduced-motion: reduce) {
    .dz-sc:hover { transform:none; }
}

/* ---------- Waktu rata-rata di form pesanan ----------
   Dulu <input disabled>, lalu sempat jadi kotak biru — dua-duanya terlalu
   berteriak untuk sepotong keterangan kecil, dan bersaing dengan Total Harga
   di sebelahnya. Sekarang bidang netral setinggi kolom isian di sampingnya,
   dengan angka bertumpu pada warna, bukan pada ketebalan huruf. */
.dz-avg-l {
    display:block; font-size:.75rem; font-weight:600; color:var(--ink-2); margin-bottom:.4rem;
}
.dz-avg {
    display:flex; align-items:center; gap:.55rem; min-height:44px;
    padding:.5rem .85rem; border-radius:var(--r-md);
    background:var(--paper-2); border:1px solid var(--line);
    font-size:.85rem; color:var(--ink-2); line-height:1.45;
}
.dz-avg > i { flex-shrink:0; font-size:.95rem; color:var(--ink-3); }
/* Angkanya ditegaskan lewat warna tinta penuh, cukup weight 600 —
   bold penuh membuatnya lebih berat daripada label di sekitarnya. */
.dz-avg b { font-weight:600; color:var(--ink); }
.dz-avg-e { color:var(--ink-3); }
.dz-avg-n { display:block; margin-top:.3rem; font-size:.72rem; color:var(--ink-3); }

/* Ringkasan panel admin: empat metrik berjajar di layar lebar.
   Berbeda dari dashboard pengguna yang dua kolom — di admin keempatnya
   sederajat dan tidak ada yang perlu diberi ruang lebih. */
.dz-stats-4 { grid-template-columns:repeat(4,1fr); }
@media (max-width:1400px) { .dz-stats-4 { grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px)  { .dz-stats-4 { grid-template-columns:1fr; } }

/* =============================== GET LAYANAN (admin) =============================== */
/* Baris pemilih: tiga dropdown sejajar, menyusut jadi satu lajur di layar kecil. */
.gl-bar { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s4); margin-bottom:var(--s4); }
.gl-f .form-label { font-size:.78rem; font-weight:600; color:var(--ink-2); margin-bottom:.35rem; }

.gl-act {
    display:flex; align-items:center; gap:var(--s2); flex-wrap:wrap;
    padding-bottom:var(--s4); margin-bottom:var(--s4); border-bottom:1px solid var(--line);
}
/* Keterangan jumlah & asal data mengisi ruang di kiri tombol */
.gl-info { flex:1; min-width:0; font-size:.8rem; color:var(--ink-3); }
.gl-info.gl-bad { color:var(--red); }

.gl-wrap { max-height:64vh; overflow:auto; border:1px solid var(--line); border-radius:var(--r-md); }
.gl-tbl { font-size:.83rem; }
/* Kepala tabel menempel saat digulir — daftar bisa ratusan baris dan tanpa ini
   pengguna kehilangan acuan kolom. */
.gl-tbl thead th {
    position:sticky; top:0; z-index:2;
    background:var(--paper-2); border-bottom:1px solid var(--line);
    font-size:.7rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
    color:var(--ink-3); white-space:nowrap; padding:.6rem var(--s3);
}
.gl-tbl td { padding:.45rem var(--s3); vertical-align:middle; border-bottom:1px solid var(--line); }
.gl-cek { width:38px; text-align:center; }
.gl-nama { min-width:260px; color:var(--ink-2); }

/* ---- Lencana isi tabel -------------------------------------------------
   Sebelas kolom angka beruntun sulit dibaca sebagai teks datar: mata
   kehilangan jejak kolom saat menggulir ratusan baris. Tiap nilai
   dibungkus lencana berwarna supaya kolomnya bisa dikenali dari warnanya,
   bukan dari posisinya.

   Warnanya dibagi dua jenis, dan pembagian ini yang menjaga tabelnya tetap
   terbaca meski penuh warna:
     - uang & angka  -> kuning / biru / gelap (tidak pernah hijau-merah)
     - keadaan       -> hijau / merah saja
   Jadi hijau dan merah di tabel ini SELALU berarti hidup/mati, tidak
   pernah berarti besar/kecil. */
.gl-b {
    display:inline-flex; align-items:center; gap:.25rem;
    padding:.2rem .5rem; border-radius:var(--r-pill);
    font-size:.72rem; font-weight:700; line-height:1.35;
    white-space:nowrap; font-variant-numeric:tabular-nums;
}
.gl-b i { font-size:.66rem; }

/* ID — penanda, bukan nilai. Dibuat paling lembut karena muncul di
   setiap baris; kalau ikut pekat, seluruh kolom kiri jadi berisik. */
.gl-b-id {
    min-width:38px; justify-content:center;
    background:#e0f2fe; color:#0369a1;
    font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.74rem;
}
/* Harga provider = biaya, harga jual = pemasukan. Sewarna (kuning) supaya
   terbaca sepasang, tapi yang jual dipekatkan karena itu angka utamanya. */
.gl-b-cost   { background:var(--amber-bg); color:#b45309; box-shadow:inset 0 0 0 1px #fde68a; }
.gl-b-sell   { background:#f59e0b; color:#fff; }
.gl-b-profit { background:#06b6d4; color:#fff; }
/* Batas jumlah — angka teknis, jadi gelap netral seperti label. */
.gl-b-lim    { background:var(--ink); color:#fff; font-size:.7rem; }

.gl-b-on  { background:var(--green); color:#fff; }
.gl-b-of  { background:var(--red);   color:#fff; }
/* Keadaan "tidak diketahui": provider tidak mengirim keterangannya. Dibedakan
   dari OFF supaya tidak dibaca sebagai fakta yang tidak kita punya. */
.gl-b-nul { background:var(--paper-2); color:var(--ink-3); box-shadow:inset 0 0 0 1px var(--line); padding:.2rem .55rem; cursor:help; }
.gl-b-ada { background:var(--blue-50); color:var(--blue); font-size:.68rem; }

/* Baris yang sudah ada di panel diredupkan dan tidak bisa dipilih lagi.
   Lencananya diturunkan kepekatannya, bukan dihilangkan warnanya — supaya
   tetap bisa dibaca sambil jelas terlihat bukan pilihan yang tersedia. */
.gl-ada { background:var(--paper-2); }
.gl-ada .gl-nama { color:var(--ink-3); }
.gl-ada .gl-b { opacity:.45; filter:saturate(.7); }
.gl-ada .gl-b-ada { opacity:1; filter:none; }

.gl-kosong { text-align:center; padding:var(--s6) var(--s4); color:var(--ink-3); font-size:.85rem; }
.gl-kosong.gl-bad { color:var(--red); }

@media (max-width:1100px) { .gl-bar { grid-template-columns:1fr 1fr; } }
@media (max-width:700px)  { .gl-bar { grid-template-columns:1fr; } }

/* =============================== SELECT2 =============================== */
/* Select2 datang dengan gayanya sendiri yang tidak cocok dengan panel v2 —
   sudut tajam, biru bawaan, tinggi 28px. Disesuaikan di sini. */
.select2-container--default .select2-selection--single {
    height:auto; min-height:44px; padding:.5rem .85rem;
    border:1px solid var(--line); border-radius:var(--r-md); background:#fff;
    display:flex; align-items:center;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    padding:0; line-height:1.5; color:var(--ink); font-size:.875rem;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder { color:var(--ink-3); }
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height:100%; right:10px; top:0;
}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color:var(--blue); box-shadow:0 0 0 3px rgba(43,127,255,.12);
}

.select2-dropdown {
    border:1px solid var(--line); border-radius:var(--r-md);
    box-shadow:var(--sh-3); overflow:hidden;
}
/* Kotak pencarian: ikon kaca pembesar ditempel lewat latar SVG karena
   select2 tidak menyediakan tempat untuk elemen tambahan di dalamnya. */
.select2-container--default .select2-search--dropdown { padding:var(--s2); border-bottom:1px solid var(--line); }
.select2-container--default .select2-search--dropdown .select2-search__field {
    height:38px; padding:0 .7rem 0 32px;
    border:1px solid var(--line); border-radius:var(--r-sm);
    font-family:var(--font); font-size:.85rem; color:var(--ink);
    background:var(--paper-2) no-repeat 9px center/15px 15px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4.3-4.3'/%3E%3C/svg%3E");
}
.select2-container--default .select2-search--dropdown .select2-search__field:focus {
    outline:none; border-color:var(--blue); background-color:#fff;
}
.select2-container--default .select2-results__option {
    padding:.5rem .85rem; font-size:.85rem; color:var(--ink-2);
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background:var(--blue-50); color:var(--blue);
}
.select2-container--default .select2-results__option[aria-selected=true] {
    background:var(--paper-2); color:var(--ink); font-weight:600;
}
.select2-results__options { max-height:280px; }

/* ============================= DATA LAYANAN ============================= */
/* Halaman admin/data_layanan. Tabelnya lebar (13 kolom) dan sering dibuka
   tepat setelah mengambil layanan dari provider, jadi yang diutamakan:
   kolom terbaca sekali lihat, dan penyaring tidak perlu dibuka dulu. */
.dl-bar { display:flex; align-items:center; gap:var(--s2); flex-wrap:wrap; margin-bottom:var(--s4); }
.dl-spacer { flex:1; min-width:0; }

.dl-filter { margin-bottom:var(--s4); }
.dl-grid { display:grid; grid-template-columns:2fr 1.3fr 1.3fr .9fr 1.2fr .7fr; gap:var(--s3); }
.dl-f .form-label { font-size:.75rem; font-weight:600; color:var(--ink-2); margin-bottom:.3rem; }
.dl-chips { display:flex; flex-wrap:wrap; align-items:center; gap:var(--s2); margin-top:var(--s3); padding-top:var(--s3); border-top:1px solid var(--line); }

.dl-wrap { max-height:72vh; overflow:auto; }
.dl-tbl { font-size:.83rem; }
/* Kepala tabel menempel saat digulir — tanpa ini 13 kolom kehilangan acuan
   begitu daftarnya turun beberapa baris. */
.dl-tbl thead th {
    position:sticky; top:0; z-index:2;
    background:var(--paper-2); border-bottom:1px solid var(--line);
    font-size:.68rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
    color:var(--ink-3); white-space:nowrap; padding:.65rem var(--s3);
}
.dl-tbl td { padding:.5rem var(--s3); border-bottom:1px solid var(--line); }
.dl-cek { width:38px; text-align:center; }
.dl-kat { white-space:nowrap; color:var(--ink-2); font-weight:600; }
.dl-nama { min-width:280px; color:var(--ink-2); }
.dl-api  { white-space:nowrap; color:var(--ink-2); font-weight:600; }

/* Kolom data provider: dua baris kecil, label redup supaya angkanya yang
   pertama terbaca. */
.dl-prov { white-space:nowrap; font-size:.76rem; line-height:1.6; }
.dl-lbl { color:var(--ink-3); }
.dl-pokok  { color:var(--blue); font-weight:700; }
.dl-persen { color:var(--green); font-weight:700; }

/* Lencana angka — sewarna dengan halaman Get Layanan supaya artinya sama di
   kedua tempat: kuning = harga, cyan = profit, gelap = batas jumlah. */
.dl-b {
    display:inline-flex; align-items:center; justify-content:center;
    padding:.2rem .5rem; border-radius:var(--r-pill);
    font-size:.72rem; font-weight:700; white-space:nowrap; font-variant-numeric:tabular-nums;
}
.dl-b-id     { min-width:42px; background:#e0f2fe; color:#0369a1; font-family:ui-monospace,Menlo,Consolas,monospace; }
.dl-b-sid    { min-width:42px; background:var(--paper-2); color:var(--ink-2); box-shadow:inset 0 0 0 1px var(--line); font-family:ui-monospace,Menlo,Consolas,monospace; }
.dl-b-jual   { background:#f59e0b; color:#fff; }
.dl-b-profit { background:#06b6d4; color:#fff; }
.dl-b-lim    { background:var(--ink); color:#fff; font-size:.7rem; }

/* Status sekaligus tombol. Ikon pena muncul sebagai isyarat bisa diklik. */
.dl-st {
    display:inline-flex; align-items:center; gap:.3rem;
    padding:.25rem .6rem; border-radius:var(--r-pill);
    font-size:.73rem; font-weight:700; white-space:nowrap;
    color:#fff !important; transition:filter .15s, opacity .15s;
}
.dl-st-on  { background:var(--green); }
.dl-st-off { background:var(--red); }
.dl-st:hover { filter:brightness(1.08); }
.dl-st-p { font-size:.6rem; opacity:.75; margin-left:.15rem; }
/* Selama permintaan berjalan tombolnya diredupkan dan tidak bisa diklik dua
   kali — klik ganda pada saklar status mudah terjadi. */
.dl-st-sibuk { opacity:.5; pointer-events:none; }

@media (max-width:1400px) { .dl-grid { grid-template-columns:1fr 1fr 1fr; } }
@media (max-width:800px)  { .dl-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:520px)  { .dl-grid { grid-template-columns:1fr; } }

/* =========================== PLATFORM & CHIP =========================== */
/* Halaman admin/platform. Yang diutamakan: chip terlihat seperti aslinya di
   halaman pesanan, dan kata kunci terbaca sebagai potongan terpisah — bukan
   satu baris teks berkoma yang harus dipilah sendiri oleh mata. */
.pf-bar { display:flex; align-items:center; gap:var(--s2); flex-wrap:wrap; margin-bottom:var(--s4); }
.pf-spacer { flex:1; min-width:0; }

.pf-uji { display:grid; grid-template-columns:1fr auto; gap:var(--s4); align-items:start; }
.pf-hasil { min-width:180px; }
.pf-uji .form-label { font-size:.78rem; font-weight:600; color:var(--ink-2); margin-bottom:.35rem; }

.pf-tbl { font-size:.85rem; }
.pf-tbl thead th {
    background:var(--paper-2); border-bottom:1px solid var(--line);
    font-size:.68rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
    color:var(--ink-3); white-space:nowrap; padding:.65rem var(--s3);
}
.pf-tbl td { padding:.55rem var(--s3); border-bottom:1px solid var(--line); }

.pf-urut {
    display:inline-flex; align-items:center; justify-content:center; min-width:34px;
    padding:.15rem .4rem; border-radius:var(--r-sm);
    background:var(--paper-2); box-shadow:inset 0 0 0 1px var(--line);
    font-size:.75rem; font-weight:700; color:var(--ink-2); font-variant-numeric:tabular-nums;
}

/* Tiruan chip di halaman pesanan — ikon yang salah tulis langsung kelihatan. */
.pf-chip {
    display:inline-flex; align-items:center; gap:.4rem;
    padding:.3rem .7rem; border-radius:var(--r-pill);
    background:var(--paper-2); box-shadow:inset 0 0 0 1px var(--line);
    font-size:.8rem; font-weight:700; color:var(--ink);
}
.pf-chip i { color:var(--blue); font-size:.9rem; }
.pf-chip-besar { padding:.45rem 1rem; font-size:.9rem; background:var(--blue-50); box-shadow:inset 0 0 0 1px var(--blue-100); }

/* Kata kunci sebagai potongan terpisah, supaya batas tiap kata jelas —
   penting karena kata berspasi ("tik tok") sah dan mudah tertukar dengan
   dua kata terpisah. */
.pf-kw {
    display:inline-block; padding:.1rem .45rem; margin:.1rem .1rem;
    border-radius:var(--r-sm); background:#eff6ff; color:#1d4ed8;
    font-size:.74rem; font-weight:600; font-family:ui-monospace,Menlo,Consolas,monospace;
}

.pf-st {
    display:inline-flex; align-items:center; gap:.3rem;
    padding:.25rem .6rem; border-radius:var(--r-pill);
    font-size:.73rem; font-weight:700; white-space:nowrap; color:#fff !important;
    transition:filter .15s;
}
.pf-st-on  { background:var(--green); }
.pf-st-off { background:var(--ink-3); }
.pf-st:hover { filter:brightness(1.08); }

@media (max-width:700px) { .pf-uji { grid-template-columns:1fr; } }

/* Pratinjau chip di menu Platform. Memakai .dz-fchip yang sama dengan halaman
   pesanan, hanya lebarnya dilepas — di halaman aslinya chip mengisi satu sel
   grid, di sini harus menyusut mengikuti isinya. */
.pf-pratinjau { display:flex; flex-wrap:wrap; gap:var(--s2); }
.pf-pratinjau .dz-fchip { width:auto; cursor:default; }
.pf-pratinjau .dz-fchip:hover { transform:none; box-shadow:none; }
/* Label chip diberi jatah ruang tegas. Tanpa flex, teks bisa menyusut sampai
   habis ketika bersanding dengan ikon berukuran tetap di wadah sempit. */
.dz-fchip-t { flex:1 1 auto; }
.pf-cek { width:38px; text-align:center; }

/* Keterangan aturan Replace Keyword di halaman Get Layanan */
.gl-kk {
    display:flex; align-items:center; gap:var(--s2); flex-wrap:wrap;
    padding:.6rem var(--s3); margin-bottom:var(--s3);
    border-radius:var(--r-md); background:var(--violet-bg);
    box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--violet) 22%, #fff);
    font-size:.8rem; color:var(--ink-2);
}
.gl-kk i { color:var(--violet); }
.gl-kk span { flex:1; min-width:0; }
.gl-kk a { font-weight:700; color:var(--violet); white-space:nowrap; }
.gl-b-ganti { background:var(--violet-bg); color:var(--violet); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--violet) 30%, #fff); cursor:help; }

/* ---------- Keterangan fitur di halaman Filter Layanan ----------
   Panel penjelasan yang cukup panjang untuk dibaca sekali lalu diabaikan.
   Warnanya biru muda supaya jelas ini keterangan, bukan peringatan. */
.fl-info {
    padding:var(--s4); margin-bottom:var(--s4);
    border-radius:var(--r-md); background:var(--blue-50);
    box-shadow:inset 0 0 0 1px var(--blue-100);
    font-size:.85rem; color:var(--ink-2); line-height:1.65;
}
.fl-info h6 { margin:0 0 .6rem; font-size:.95rem; font-weight:800; color:var(--blue-700); }
.fl-info p { margin:0 0 .6rem; }
.fl-info hr { margin:var(--s3) 0; border:0; border-top:1px solid var(--blue-100); }
.fl-info ul { padding-left:1.1rem; }
.fl-info li { margin-bottom:.3rem; }
.fl-info b { color:var(--ink); }

/* Contoh isian ditampilkan seperti pasangan label-nilai, bukan kalimat —
   bentuknya langsung mengingatkan pada form yang akan diisi. */
.fl-info-eg {
    display:grid; gap:.25rem; margin:0 0 .8rem;
    padding:.6rem var(--s3); border-radius:var(--r-sm);
    background:#fff; box-shadow:inset 0 0 0 1px var(--blue-100);
}
.fl-info-eg span {
    display:inline-block; min-width:80px;
    font-weight:700; color:var(--blue-700);
}

@media (max-width:640px) { .fl-info { font-size:.8rem; } }

/* ============================ INVOICE DEPOSIT ============================ */
/* Halaman deposit/invoice. Urutannya sengaja: tenggat -> nominal -> cara
   bayar -> rincian. Yang dibutuhkan pembayar ada di atas; rincian angka yang
   jarang dibaca turun ke bawah. Versi lama menaruh QR Code paling bawah,
   sesudah tabel rincian — harus digulir dulu untuk melakukan hal yang justru
   jadi tujuan membuka halaman ini. */
.dz-back {
    display:inline-flex; align-items:center; gap:.4rem;
    margin-bottom:var(--s4); font-size:.85rem; font-weight:600; color:var(--ink-2);
}
.dz-back i { width:16px; height:16px; }
.dz-back:hover { color:var(--blue); }

.dz-inv {
    background:#fff; border-radius:var(--r-lg);
    box-shadow:inset 0 0 0 1px var(--line), var(--sh-2);
    overflow:hidden;
}

.dz-inv-head {
    display:flex; align-items:center; justify-content:space-between; gap:var(--s3);
    flex-wrap:wrap; padding:var(--s4) var(--s5);
    border-bottom:1px solid var(--line);
}
.dz-inv-no  { display:block; font-size:1.05rem; font-weight:800; color:var(--ink); }
.dz-inv-tgl { display:block; font-size:.8rem; color:var(--ink-3); margin-top:.15rem; }

.dz-inv-st {
    display:inline-flex; align-items:center; gap:.4rem;
    padding:.4rem .85rem; border-radius:var(--r-pill);
    font-size:.78rem; font-weight:800;
}
.dz-inv-st i { width:15px; height:15px; }
.dz-inv-st-ok   { background:var(--green-bg); color:var(--green); }
.dz-inv-st-no   { background:var(--red-bg);   color:var(--red); }
.dz-inv-st-wait { background:var(--amber-bg); color:var(--amber); }

/* ---------- Hitung mundur ---------- */
.dz-inv-exp {
    display:flex; align-items:center; gap:.6rem; flex-wrap:wrap;
    padding:.85rem var(--s5);
    background:var(--amber-bg);
    border-bottom:1px solid color-mix(in srgb, var(--amber) 20%, #fff);
    font-size:.87rem; color:#92400e;
}
.dz-inv-exp i { width:18px; height:18px; color:var(--amber); flex-shrink:0; }
.dz-inv-exp b { font-variant-numeric:tabular-nums; }
/* Di layar lebar keduanya sebaris, batas waktunya didorong ke kanan. */
.dz-inv-exp-t {
    display:flex; align-items:center; gap:.6rem; flex-wrap:wrap;
    flex:1; min-width:0;
}
.dz-inv-exp-t small { margin-left:auto; font-size:.76rem; opacity:.8; white-space:nowrap; }
/* Dua tingkat peringatan: menjelang habis, lalu habis. */
.dz-inv-exp.dekat { background:var(--red-bg); color:#991b1b; border-bottom-color:color-mix(in srgb, var(--red) 20%, #fff); }
.dz-inv-exp.dekat i { color:var(--red); }
.dz-inv-exp.habis { background:var(--paper-2); color:var(--ink-3); }
.dz-inv-exp.habis i { color:var(--ink-3); }

.dz-inv-ok, .dz-inv-batal {
    display:flex; align-items:center; gap:.7rem;
    padding:1rem var(--s5); font-size:.9rem;
}
.dz-inv-ok { background:var(--green-bg); color:#166534; }
.dz-inv-batal { background:var(--red-bg); color:#991b1b; }
.dz-inv-ok i, .dz-inv-batal i { width:22px; height:22px; flex-shrink:0; }

/* ---------- Nominal ---------- */
.dz-inv-tot {
    padding:var(--s5); text-align:center;
    border-bottom:1px solid var(--line);
    background:linear-gradient(180deg, var(--blue-50), #fff);
}
.dz-inv-tot > span {
    display:block; font-size:.8rem; font-weight:700; letter-spacing:.04em;
    text-transform:uppercase; color:var(--ink-3); margin-bottom:.3rem;
}
.dz-inv-tot b {
    display:block; font-size:clamp(1.8rem,6vw,2.5rem); font-weight:800;
    letter-spacing:-.03em; color:var(--ink); font-variant-numeric:tabular-nums;
}
.dz-inv-tot small {
    display:block; max-width:380px; margin:.6rem auto 0;
    font-size:.78rem; line-height:1.6; color:var(--ink-2);
}

/* ---------- Cara bayar ---------- */
.dz-inv-bayar { padding:var(--s5); border-bottom:1px solid var(--line); text-align:center; }
.dz-inv-lbl { margin:0 0 var(--s3); font-size:.88rem; color:var(--ink-2); }

.dz-inv-qr {
    display:inline-block; padding:var(--s3);
    border-radius:var(--r-md); background:#fff;
    box-shadow:inset 0 0 0 1px var(--line), var(--sh-2);
}
.dz-inv-qr img { display:block; width:250px; height:250px; max-width:100%; object-fit:contain; }
/* Pengulangan nominal tepat di bawah QR — untuk dicocokkan dengan angka
   yang muncul di aplikasi pembayaran setelah dipindai. */
.dz-inv-qr-nom {
    margin:var(--s3) 0 0; font-size:.84rem; color:var(--ink-2);
}
.dz-inv-qr-nom b { color:var(--ink); font-weight:800; font-variant-numeric:tabular-nums; }

.dz-inv-kode {
    display:inline-flex; align-items:center; gap:var(--s3); flex-wrap:wrap;
    justify-content:center; padding:.8rem 1.2rem;
    border-radius:var(--r-md); background:var(--paper-2);
    box-shadow:inset 0 0 0 1px var(--line);
}
.dz-inv-kode > span {
    font-family:ui-monospace,Menlo,Consolas,monospace;
    font-size:clamp(1.1rem,4vw,1.5rem); font-weight:800;
    letter-spacing:.06em; color:var(--ink);
}
.dz-inv-kode button, .dz-inv-bank button {
    display:inline-flex; align-items:center; gap:.35rem;
    padding:.4rem .8rem; border:0; border-radius:var(--r-sm);
    background:var(--blue); color:#fff; font-size:.78rem; font-weight:700; cursor:pointer;
    transition:background .15s;
}
.dz-inv-kode button i, .dz-inv-bank button i { width:14px; height:14px; }
.dz-inv-kode button:hover, .dz-inv-bank button:hover { background:var(--blue-700); }
.dz-inv-kode button.ok, .dz-inv-bank button.ok { background:var(--green); }

.dz-inv-bank { max-width:400px; margin:0 auto; text-align:left; }
.dz-inv-bank > div {
    display:flex; align-items:center; justify-content:space-between; gap:var(--s3);
    padding:.7rem 0; border-bottom:1px dashed var(--line); font-size:.9rem;
}
.dz-inv-bank > div:last-child { border-bottom:0; }
.dz-inv-bank span { color:var(--ink-3); }
.dz-inv-bank b { display:inline-flex; align-items:center; gap:.5rem; color:var(--ink); }

/* ---------- Rincian ---------- */
.dz-inv-rinci { padding:var(--s4) var(--s5); }
.dz-inv-rinci > div {
    display:flex; align-items:center; justify-content:space-between; gap:var(--s3);
    padding:.55rem 0; font-size:.88rem;
}
.dz-inv-rinci span { color:var(--ink-3); }
.dz-inv-rinci b { color:var(--ink); font-variant-numeric:tabular-nums; }
.dz-inv-rinci b img { height:18px; width:auto; vertical-align:middle; margin-right:.4rem; }
.dz-inv-rinci-hl { margin-top:.3rem; padding-top:.8rem; border-top:1px solid var(--line); }
.dz-inv-rinci-hl b { font-size:1.05rem; font-weight:800; color:var(--green); }

/* ---------- Tombol ---------- */
.dz-inv-aksi {
    display:flex; gap:.6rem; flex-wrap:wrap; justify-content:center;
    padding:0 var(--s5) var(--s5);
}
.dz-inv-btn {
    display:inline-flex; align-items:center; gap:.45rem;
    padding:.7rem 1.3rem; border-radius:var(--r-md);
    font-size:.86rem; font-weight:700;
    border:1px solid transparent;
    transition:transform .15s, background .15s, border-color .15s;
}
.dz-inv-btn i { width:16px; height:16px; }
.dz-inv-btn:hover { transform:translateY(-2px); }
.dz-inv-btn-1 { background:var(--blue); color:#fff; }
.dz-inv-btn-1:hover { background:var(--blue-700); color:#fff; }
.dz-inv-btn-2 { background:#fff; color:var(--ink-2); border-color:var(--line); }
.dz-inv-btn-2:hover { border-color:var(--ink-3); }
.dz-inv-btn-3 { background:var(--red-bg); color:var(--red); }
.dz-inv-btn-3:hover { background:var(--red); color:#fff; }

/* ---------- Kaki ---------- */
.dz-inv-kaki {
    padding:.85rem var(--s5); border-top:1px solid var(--line);
    background:var(--paper-2); text-align:center;
}
.dz-inv-pantau {
    display:inline-flex; align-items:center; gap:.5rem;
    font-size:.78rem; color:var(--ink-3);
}
/* Titik berdenyut — tanda pemantauan memang sedang berjalan, bukan tulisan
   yang kebetulan tertinggal di halaman. */
.dz-inv-pantau i {
    width:8px; height:8px; border-radius:50%;
    background:var(--green); flex-shrink:0;
    animation:dzPantau 1.6s ease-in-out infinite;
}
@keyframes dzPantau {
    0%,100% { opacity:1;  box-shadow:0 0 0 0 rgba(22,163,74,.5); }
    50%     { opacity:.5; box-shadow:0 0 0 6px rgba(22,163,74,0); }
}

@media (prefers-reduced-motion: reduce) {
    .dz-inv-pantau i  { animation-duration:4s; }
    .dz-inv-btn:hover { transform:none; }
}

@media (max-width:600px) {
    .dz-inv-head, .dz-inv-tot, .dz-inv-bayar, .dz-inv-rinci,
    .dz-inv-aksi { padding-left:var(--s4); padding-right:var(--s4); }
    /* Di layar sempit sengaja bertumpuk: sisa waktu di atas, batasnya di
       bawah. Sebelumnya keduanya dipaksa sebaris lalu pecah sendiri di
       tengah kalimat. */
    .dz-inv-exp-t { display:block; }
    .dz-inv-exp-t small { display:block; margin:.2rem 0 0; white-space:normal; }
    .dz-inv-qr img { width:220px; height:220px; }
}