:root {
  --latar: #f6f5f1; --kartu: #ffffff; --teks: #1d1c1a; --redup: #6b6a64; --garis: #e2e0d8;
  --merah: #c0392b; --merah-latar: #fdecea; --kuning: #8a6d00; --kuning-latar: #fff6d6;
  --hijau: #1e7a46; --biru: #1f5fa8; --paket: #7a3fa0;
}
* { box-sizing: border-box; }
body { margin: 0; font: 15px/1.45 system-ui, "Segoe UI", sans-serif; background: var(--latar); color: var(--teks); }
header { position: sticky; top: 0; z-index: 2; background: var(--kartu); border-bottom: 1px solid var(--garis); padding: 10px 20px; }
.judul { font-size: 20px; font-weight: 700; }
.mode { font-size: 12px; font-weight: 600; background: var(--kuning-latar); color: var(--kuning); padding: 2px 8px; border-radius: 10px; vertical-align: middle; }
.pita { color: var(--redup); margin-top: 4px; display: flex; gap: 24px; flex-wrap: wrap; }
.pita b { color: var(--teks); }
.peringatan { margin-top: 8px; padding: 8px 12px; border-radius: 6px; font-weight: 600; }
.peringatan.merah { background: var(--merah-latar); color: var(--merah); border: 1px solid var(--merah); }
.peringatan.kuning { background: var(--kuning-latar); color: var(--kuning); border: 1px solid #e0c060; }
nav { display: flex; gap: 6px; padding: 10px 20px 0; align-items: end; }
nav button { font: inherit; font-weight: 600; padding: 8px 16px; border: 1px solid var(--garis); border-bottom: none; border-radius: 8px 8px 0 0; background: #ebe9e2; cursor: pointer; }
nav button.aktif { background: var(--kartu); }
nav .kanan { margin-left: auto; color: var(--redup); font-size: 13px; padding-bottom: 6px; }
main { background: var(--kartu); margin: 0 20px 20px; border: 1px solid var(--garis); border-radius: 0 8px 8px 8px; padding: 16px; }
h2 { font-size: 17px; margin: 18px 0 4px; } h2:first-child { margin-top: 0; }
.ket { color: var(--redup); margin: 0 0 8px; font-size: 13px; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--garis); vertical-align: top; }
th { font-size: 12px; text-transform: uppercase; color: var(--redup); letter-spacing: .03em; }
td.angka, th.angka { text-align: right; font-variant-numeric: tabular-nums; }
tr.baris-order { cursor: pointer; } tr.baris-order:hover { background: #faf9f5; }
tr.rinci td { background: #faf9f5; padding: 8px 8px 12px 32px; }
.plat { font-weight: 700; font-size: 12px; padding: 2px 6px; border-radius: 4px; color: #fff; }
.plat.shopee { background: #ee4d2d; } .plat.tiktok { background: #111; }
.sisa-merah { color: var(--merah); font-weight: 700; } .lewat { color: #fff; background: var(--merah); padding: 1px 6px; border-radius: 4px; font-weight: 700; }
.tag { font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 4px; margin-left: 4px; }
.tag.paket { background: #f1e6f8; color: var(--paket); } .tag.cod { background: #e6f0fb; color: var(--biru); }
.tahap { font-weight: 600; } .tahap.diambil { color: var(--biru); } .tahap.dikemas, .tahap.diserahkan { color: var(--hijau); } .tahap.masalah { color: var(--merah); }
.tombol { display: flex; gap: 4px; flex-wrap: wrap; }
.tombol button { font: inherit; font-size: 13px; padding: 4px 10px; border-radius: 6px; border: 1px solid var(--garis); background: #fff; cursor: pointer; }
.tombol button:hover { background: #f0efe9; } .tombol button.masalah { color: var(--merah); } .tombol button.koreksi { color: var(--redup); }
.kosong { color: var(--redup); padding: 12px 0; }
.kotak-aneh { border: 1px dashed var(--merah); padding: 10px 12px; border-radius: 8px; margin-top: 18px; }
label.saring { margin-right: 16px; }