/* ===== Client Portal — gaya RAYCAST ringkas (16 Okt 2026, pilihan Hanzel dari 20 DESIGN.md awesome-design-md:
   "raycast yang sesudah", langsung untuk semua customer) =====
   Lapisan DI ATAS portal.css (dimuat sesudahnya di member_page.php & ui_shell.php) — portal.css milik Dika tidak diubah.
   Isinya dua hal:
   1. Warna mode GELAP (bawaan member area) dari token Raycast: kanvas #07080a + sorotan hijau tipis di atas, kartu
      #121212 setengah kaca, garis #242728, teks #f4f4f6 / #9c9c9d, sudut 10px. Aksen tetap hijau ImportPlus #22c55e.
      Mode terang tetap token lama (Raycast tidak punya versi terang), cuma ikut ukuran ringkas.
   2. Ukuran RINGKAS di HP (<768px): huruf dasar 14 → 12,5px, ikon & angka ±30% lebih kecil, jarak lebih rapat.
   Mau balik ke tampilan lama: hapus baris pemuat berkas ini di member_page.php & ui_shell.php. */

:root[data-theme="dark"] .cpx,:root:not([data-theme="light"]) .cpx{
  --bg:#07080a;--surface:#121212;--surface-2:#18191b;--text:#f4f4f6;--muted:#9c9c9d;
  --line:#242728;--line-mid:#2b2e30;--line-strong:#3a3d40;
  --accent-tint:#0f2418;--accent-softer:#173a26;--idle-fg:#5c5e60;
  --grad-end:color-mix(in srgb,#22c55e 7%,#121212);
  --tag-done-bg:#1c1d1f;--tag-done-fg:#cdcdcd;--seg-on-bg:#f4f4f6;--seg-on-fg:#07080a;
}
/* Latar kanvas — bukan untuk .cpx-luar (pembungkus kapsul tab yang sengaja transparan). */
:root[data-theme="dark"] .cpx:not(.cpx-luar):not(.kotak),:root:not([data-theme="light"]) .cpx:not(.cpx-luar):not(.kotak){background:radial-gradient(120% 420px at 50% 0%,#0f2418 0%,#07080a 70%) #07080a}
:root[data-theme="dark"] body.cp-member,:root:not([data-theme="light"]) body.cp-member{background:#07080a;color:#f4f4f6}
/* Kartu setengah kaca: garis tipis + kilau 1px di tepi atas (khas Raycast). */
:root[data-theme="dark"] .cpx .cp-kartu,:root:not([data-theme="light"]) .cpx .cp-kartu,
:root[data-theme="dark"] .cpx .cp-peta,:root:not([data-theme="light"]) .cpx .cp-peta{
  background:color-mix(in srgb,#121212 86%,transparent);box-shadow:none
}
:root[data-theme="dark"] .cpx .cp-hd,:root:not([data-theme="light"]) .cpx .cp-hd{background:rgba(7,8,10,.72);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
:root[data-theme="dark"] body.cp-member .cpx-luar .cp-tab,:root:not([data-theme="light"]) body.cp-member .cpx-luar .cp-tab{
  background:rgba(18,18,18,.86);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 10px 30px rgba(0,0,0,.5)
}

/* Sudut ala Raycast: kartu 10px, tombol & isian 8px. */
.cp-kartu,.cp-peta,.cp-posisi,.cp-profil,.cp-modal .kotak{border-radius:10px}
.cp-btn,.cp-fgrid input,.cp-fgrid textarea,.cp-dok-item,.cp-cepat{border-radius:8px}
.cp-cari-wrap{border-radius:8px}

/* ===== Ukuran ringkas di HP ===== */
@container (max-width:767px){
  /* .cpx sendiri tidak kena container query-nya — huruf dasar dipasang di anak-anaknya. */
  .cp-hd,.cp-main,.cp-tab{font-size:12.5px;line-height:1.45}
  .cp-hd{padding:8px 14px 9px;gap:8px}
  .cp-brand img{height:19px}
  .cp-tema{width:28px;height:26px;font-size:14px}
  .cp-seg button{padding:3px 8px;font-size:10.5px}
  .cp-main{padding:12px 12px 14px;gap:10px}
  .cp-kicker{font-size:9.5px}
  .cp-kecil{font-size:11px}
  .cp-cari-wrap{padding:2px 10px;gap:8px}.cp-cari-wrap>i{font-size:15px}
  .cp-cari{min-height:34px;font-size:12.5px}

  .cp-home-halo{padding:12px 14px;gap:10px}
  .cp-home-halo .nm{font-size:15px}
  .cp-home-halo .angka b{font-size:22px}.cp-home-halo .angka span{font-size:10px}
  .cp-home-chip button{padding:5px 10px;font-size:11.5px}.cp-home-chip button i{font-size:13px}

  .cp-fase-grid{gap:6px}
  .cp-fase{padding:10px 4px 8px;gap:4px}
  .cp-fase .ik{width:32px;height:32px;font-size:17px}
  .cp-fase b{font-size:19px}.cp-fase .lbl{font-size:10px}
  .cp-telat{padding:9px 11px;gap:10px}
  .cp-telat .ik{width:30px;height:30px;font-size:16px}
  .cp-telat .teks{font-size:11.5px}.cp-telat .teks b{font-size:15px}
  .cp-cepat-wrap{gap:6px}
  .cp-cepat{padding:7px 6px;font-size:11px;gap:4px}
  .cp-cepat .ik{width:26px;height:26px;font-size:14px;border-radius:7px}
  .cp-chip-fase{gap:6px}
  .cp-chip-fase button{padding:5px 10px;font-size:11px;gap:5px}.cp-chip-fase button i{font-size:12px}

  .cp-peta{padding:12px;gap:8px}
  .cp-peta-hd h2.hp{font-size:15px}
  .cp-cont{padding:11px;gap:8px}
  .cp-cont-hd{grid-template-columns:32px minmax(0,1fr) 18px;gap:2px 9px}
  .cp-cont-ikon{width:32px;height:32px;border-radius:8px;font-size:17px}
  .cp-cont-kode{font-size:14px}
  .cp-tag{font-size:10px;padding:2px 7px}
  .cp-resis{gap:3px}
  .cp-resi{padding:8px;gap:8px;font-size:12.5px;grid-template-columns:1fr 62px 14px}
  .cp-resi .no{font-size:12px}.cp-resi .cp-noresi{font-size:12.5px}
  .cp-thumb{width:34px;height:34px;border-radius:6px}
  .cp-lbl-no{font-size:9px}
  .cp-prog{height:16px}.cp-prog .penanda{width:16px;height:16px;font-size:10px}

  .cp-kembali{font-size:12px}
  .cp-posisi{padding:16px 14px;gap:6px}
  .cp-posisi .ikon{width:58px;height:58px;font-size:28px}
  .cp-posisi .no-hp .cp-noresi{font-size:14px;padding:2px 10px}
  .cp-posisi .st{font-size:15px}.cp-posisi .tgl{font-size:11px}
  .cp-langkah{padding:12px 12px 2px}
  .cp-lk{grid-template-columns:30px 1fr;gap:10px;padding-bottom:12px}
  .cp-lk .rel{left:14px;top:30px}
  .cp-lk .bulat{width:30px;height:30px;font-size:15px}
  .cp-lk .jd{font-size:12.5px}.cp-lk .kt,.cp-lk .tg-hp{font-size:11px}
  .cp-info,.cp-info.sj,.cp-info.ukuran,.cp-info.isi-hp{padding:11px;gap:8px;font-size:12px}
  .cp-info .hd i{font-size:15px}
  .cp-tbl-ukuran{font-size:11.5px}.cp-tbl-ukuran th{font-size:9.5px}
  .cp-riwayat{padding:11px}.cp-riwayat .j{font-size:12.5px}
  .cp-rw{padding:6px 0;font-size:12px}.cp-rw .kt-hp{font-size:11px}
  .cp-galeri-item{width:96px;height:96px;border-radius:8px}
  .cp-dok-item{padding:7px 10px;font-size:12px;gap:8px}.cp-dok-item i{font-size:17px}
  .cp-dok-lbl{font-size:12px}
  .cp-btn,.cp-det .cp-btn{min-height:38px;font-size:12.5px;padding:0 14px}
  .cp-btn i{font-size:15px}

  .cp-inv{padding:11px 12px;gap:8px;font-size:12px}
  .cp-inv-hd .no{font-size:14px}
  .cp-inv-pill{font-size:10px;padding:2px 8px}

  .cp-notif{grid-template-columns:28px 1fr auto;gap:10px;padding:9px 11px}
  .cp-notif .ik{width:28px;height:28px;font-size:14px}
  .cp-notif .jd{font-size:12.5px}

  .cp-profil{padding:13px 14px;gap:10px}
  .cp-ava{width:38px;height:38px;font-size:14px}
  .cp-profil .nm{font-size:15px}.cp-profil .ds-hp{font-size:11px}
  .cp-stat3 b{font-size:16px}.cp-stat3 span{font-size:10px}.cp-stat3 div{padding:8px 4px}
  .cp-akun-info .brs{font-size:12px}
  .cp-form{padding:12px;gap:10px}.cp-form .j{font-size:13.5px}
  .cp-fgrid{gap:8px}.cp-fgrid label>span{font-size:11px;margin-bottom:3px}
  .cp-fgrid input{min-height:36px;font-size:12.5px}.cp-fgrid textarea{font-size:12.5px}
  .cp-form-bawah .cp-btn{min-height:38px}
  .cp-cs{padding:12px;gap:8px;font-size:12px}
  .cp-cs .ik{width:34px;height:34px;font-size:17px}.cp-cs .nm{font-size:13px}
  .cp-promo .isi,.cp-info-kartu{padding:11px}
  .cp-promo .t{font-size:13px}
  .cp-banner{height:96px}
  .cp-saklar{width:40px;height:23px}.cp-saklar span{width:17px;height:17px}.cp-saklar.on span{transform:translateX(17px)}
}

/* Kapsul tab bawah member area: lebih ramping (60 → 52px). */
body.cp-member .cpx-luar .cp-tab{height:52px;padding:4px}
body.cp-member .cpx-luar .cp-tab button{height:42px;font-size:10.5px;gap:1px;border-radius:21px}
body.cp-member .cpx-luar .cp-tab button i{font-size:18px}
@media (max-width:767px){body.cp-member .cp-main{padding-bottom:calc(84px + env(safe-area-inset-bottom, 0px))}}

/* ===== Tanpa garis luar (17 Okt 2026, Hanzel: "apus outlinenya biar lebih seamless") =====
   Kotak dibedakan dari latarnya lewat WARNA saja, bukan garis. Garis pemisah antar-baris di dalam daftar tetap
   (notifikasi, riwayat, tabel ukuran) supaya daftar masih terbaca. Penanda keadaan (fase / chip / tab yang dipilih,
   fokus keyboard) tetap memakai warna, bukan garis. */
.cpx:not(.cpx-hp):not(.cpx-luar),.cpx.cpx-hp{box-shadow:none}
.cp-kartu,.cp-peta,.cp-posisi,.cp-profil,.cp-cari-wrap,.cp-who,.cp-info.sj,.cp-modal .kotak,.cp-modal .tutup{box-shadow:none}
.cp-hd{border-bottom:0}
.cp-tab{border-top:0}
body.cp-member .cpx-luar .cp-tab{border:0}
.cp-cepat,.cp-dok-item,.cp-galeri-item,.cp-stat3 div,.cp-tema,.cp-seg,.cp-chip-fase button,.cp-home-chip button,.cp-peng{border:0}
.cp-seg button+button{border-left:0}
.cp-cepat,.cp-chip-fase button,.cp-home-chip button,.cp-tema{background:var(--surface-2)}
.cp-stat3 div{background:var(--surface-2)}
/* Ubin status & kartu yang bisa diklik: sorotan = latar lebih terang, bukan garis. */
.cp-fase:hover,.cp-cepat:hover,.cp-promo:hover,.cp-dok-item:hover{box-shadow:none;background:var(--surface-2)}
.cp-fase.on{box-shadow:none;background:var(--accent-tint)}
.cp-telat{box-shadow:none}
.cp-telat.inv{box-shadow:none}
/* Isian form: kotak terisi warna, tanpa garis. */
.cp-fgrid input,.cp-fgrid textarea{border:0;background:var(--surface-2)}
/* Tombol garis hijau → tombol berlatar hijau lembut. */
.cp-btn{border:0;background:var(--accent-tint)}
.cp-btn:hover{background:color-mix(in srgb,var(--accent) 22%,var(--surface))}
.cp-noresi.besar,.cp-nogudang{box-shadow:none}
.cp-node .bulat{box-shadow:none;background:var(--surface-2)}

/* ===== Daftar Shipments lebih renggang (17 Okt 2026, Hanzel: "margin di shipment antar baris tulisan terlalu dempet") =====
   Tiap baris di kartu resi (label, nomor, Warehouse, barang, estimasi) diberi jarak; kartu resi & kepala kontener ikut lega. */
@container (max-width:767px){
  .cp-cont{gap:12px}
  .cp-cont-hd{gap:5px 10px}
  .cp-cont-info .cp-cont-kode{margin-bottom:2px}
  .cp-cont-kanan{margin-top:2px}
  .cp-resis{gap:8px}
  .cp-resi{padding:12px 10px;align-items:center}
  .cp-resi .no{line-height:1.35}
  .cp-resi .cp-lbl-no{margin-bottom:4px}
  .cp-resi .cp-noresi{line-height:1.45}
  .cp-resi .sub-hp{margin-top:5px;line-height:1.45}
}

/* ===== Home, Invoice, Notifikasi ikut renggang seperti Shipments (17 Okt 2026, Hanzel: "samain jaraknya") ===== */
@container (max-width:767px){
  .cp-main{gap:12px}
  /* Home */
  .cp-home-halo{padding:14px 15px}
  .cp-home-halo .nm{line-height:1.3;margin:2px 0 3px}
  .cp-fase{padding:12px 4px 11px;gap:6px}
  .cp-telat{padding:12px;line-height:1.5}
  .cp-telat .teks b{margin-right:2px}
  .cp-cepat{padding:10px 6px;gap:6px}
  .cp-chip-fase,.cp-home-chip{gap:8px}
  .cp-promo .isi,.cp-info-kartu{padding:13px;gap:6px;line-height:1.45}
  /* Invoice & surat jalan */
  .cp-inv{padding:14px 13px;gap:12px;line-height:1.5}
  .cp-inv-hd .no{margin-top:3px}
  .cp-2kol{gap:12px}
  .cp-2kol .l{margin-bottom:3px}
  .cp-inv-aksi{gap:8px}
  .cp-grid2{gap:12px}
  /* Notifikasi */
  .cp-notif{padding:12px;gap:12px;line-height:1.45}
  .cp-notif .teks .cp-kecil{margin-top:3px}
  .cp-notif .w{padding-top:3px}
}

/* ===== Member area: gradien penuh satu layar (17 Okt 2026, Hanzel: "gradien di backgroundnya masih kepotong outline,
   bikin full biar berasa gaada outline") =====
   Sorotan hijau dipasang di LATAR HALAMAN (body), kotak portal .cpx dibuat transparan tanpa sudut & bayangan, header ikut
   transparan — jadi tidak ada tepi kotak yang kelihatan. Pratinjau di ERP (bingkai HP .cpx-hp) tidak ikut. */
:root[data-theme="dark"] body.cp-member,:root:not([data-theme="light"]) body.cp-member{
  background:radial-gradient(140% 520px at 50% 0%,#0f2418 0%,#07080a 72%) no-repeat #07080a
}
/* Modal (.cp-modal .kotak, mis. Syarat & Ketentuan) juga berkelas .cpx — DIKECUALIKAN: tanpa latar, isinya menumpuk di atas
   halaman (keluhan Owner 21 Okt 2026). */
body.cp-member .cpx:not(.cpx-luar):not(.kotak){border-radius:0;box-shadow:none}
:root[data-theme="dark"] body.cp-member .cpx:not(.cpx-luar):not(.kotak),:root:not([data-theme="light"]) body.cp-member .cpx:not(.cpx-luar):not(.kotak){background:transparent}
:root[data-theme="dark"] body.cp-member .cpx .cp-hd,:root:not([data-theme="light"]) body.cp-member .cpx .cp-hd{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}

/* ===== Tutorial pasang di layar utama — di atas form login member area (17 Okt 2026, member-pasang.js) ===== */
.mp-kotak{--mp-sf:#f3f6f4;--mp-sf2:#e7ece9;--mp-tx:#16211a;--mp-mu:#57635b;--mp-ac:#15803d;--mp-tint:#dcfce7;
  background:var(--mp-sf);color:var(--mp-tx);border-radius:12px;padding:14px;display:grid;gap:12px;margin:0 0 6px;font-size:13px;line-height:1.45}
:root[data-theme="dark"] .mp-kotak,:root:not([data-theme="light"]) .mp-kotak{--mp-sf:#1c1d1f;--mp-sf2:#26282b;--mp-tx:#f4f4f6;--mp-mu:#9c9c9d;--mp-ac:#4ade80;--mp-tint:#0f2418}
.mp-hd{display:flex;align-items:flex-start;gap:10px}
.mp-hd>div{flex:1;min-width:0;display:grid;gap:2px}
.mp-hd b{font-size:14px;font-weight:700}
.mp-hd span{color:var(--mp-mu);font-size:12px}
.mp-ik{width:34px;height:34px;border-radius:9px;background:var(--mp-tint);color:var(--mp-ac);display:grid;place-items:center;font-size:19px;flex:none}
.mp-kotak .mp-x{background:none;border:0;border-radius:6px;color:var(--mp-mu);font-size:14px;font-weight:400;cursor:pointer;padding:4px 6px;line-height:1}
.mp-kotak .mp-x:hover{background:var(--mp-sf2);color:var(--mp-tx)}
.mp-kotak button{min-height:0;margin:0;font-family:inherit}
.mp-tab{display:grid;grid-template-columns:1fr 1fr;gap:4px;background:var(--mp-sf2);border-radius:9px;padding:3px}
.mp-kotak .mp-tab button{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:0;border-radius:7px;padding:7px 0;background:transparent;color:var(--mp-mu);font-size:12.5px;font-weight:600;cursor:pointer}
.mp-kotak .mp-tab button[aria-selected="true"]{background:var(--mp-sf);color:var(--mp-tx)}
.mp-kotak .mp-tab button:hover{background:var(--mp-sf);color:var(--mp-tx)}
.mp-tab i{font-size:15px}
.mp-kotak .mp-pasang{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:0;border-radius:999px;background:#22c55e;color:#052e12;font-size:14px;font-weight:700;padding:11px 0;cursor:pointer}
.mp-kotak .mp-pasang:hover{background:#16a34a;color:#f0fdf4}
.mp-atau{font-size:11.5px;color:var(--mp-mu);text-align:center;margin-top:-4px}
.mp-langkah{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.mp-langkah li{display:grid;grid-template-columns:20px 20px 1fr;gap:8px;align-items:start}
.mp-no{width:20px;height:20px;border-radius:50%;background:var(--mp-tint);color:var(--mp-ac);font-size:11px;font-weight:700;display:grid;place-items:center}
.mp-langkah i{font-size:18px;color:var(--mp-ac);margin-top:1px}
.mp-langkah b{font-weight:700}
.mp-catat{font-size:11.5px;color:var(--mp-mu);background:var(--mp-sf2);border-radius:8px;padding:8px 10px}
.mp-kotak.mp-kecil{padding:0;background:none}
.mp-kotak .mp-buka{display:inline-flex;align-items:center;gap:6px;border:0;background:none;color:var(--mp-ac);font-size:12.5px;font-weight:600;padding:2px 0;cursor:pointer}
.mp-buka i{font-size:16px}

/* Kartu pasang di tab Akun (mp-akun): ikut warna kartu portal, tombol "Lihat cara pasang" seperti tautan. */
.mp-kotak.mp-akun{background:var(--surface);color:var(--text);border-radius:10px;margin:0;font-size:inherit}
.mp-kotak.mp-akun .mp-tab,.mp-kotak.mp-akun .mp-catat{--mp-sf2:var(--surface-2);--mp-sf:var(--surface)}
.mp-kotak .mp-cara{display:inline-flex;align-items:center;gap:6px;border:0;background:none;color:var(--accent-deep);font-size:12.5px;font-weight:600;padding:2px 0;cursor:pointer;justify-self:start}
.mp-kotak .mp-cara i{font-size:15px}

/* ===== Mode TERANG = T2 "Hutan & Lime" (17 Okt 2026, pilihan Hanzel dari 5 contoh; jadi bawaan member area lewat
   member-tema.js) =====
   Latar hijau pucat bergradasi, kartu putih berbayang halus (tanpa garis), kartu UTAMA hijau tua pekat #0f3d2e dengan
   angka lime #d9f99d (sapaan Home, posisi di detail resi, profil Akun), ikon tahap berwarna, kapsul tab aktif hijau tua. */
:root[data-theme="light"] .cpx{
  --bg:#f1f5ee;--surface:#ffffff;--surface-2:#eef2ea;--text:#122a1d;--muted:#56645a;
  --line:#e2e8de;--line-mid:#d5ddd0;--line-strong:#bcc7b6;
  --accent:#16a34a;--accent-deep:#166534;--accent-mid:#22c55e;--accent-tint:#dcfce7;--accent-soft:#86efac;--accent-softer:#bbf7d0;
  --on-accent:#f0fdf4;--grad-end:#f7faf5;--idle-fg:#9aa69c;--tag-done-bg:#e6ece2;--tag-done-fg:#3d4741;
  --seg-on-bg:#0f3d2e;--seg-on-fg:#d9f99d;
  --mp-hero:#0f3d2e;--mp-lime:#d9f99d;--mp-sh:0 1px 2px rgb(15 61 46 / .05),0 3px 10px rgb(15 61 46 / .06)
}
:root[data-theme="light"] .cpx:not(.cpx-luar):not(.kotak){background:linear-gradient(180deg,#e2ecda 0%,#f1f5ee 320px) #f1f5ee}
:root[data-theme="light"] body.cp-member{background:linear-gradient(180deg,#dfe9d6 0%,#f1f5ee 360px) no-repeat #f1f5ee;color:#122a1d}
:root[data-theme="light"] body.cp-member .cpx:not(.cpx-luar):not(.kotak){background:transparent}
:root[data-theme="light"] .cpx .cp-hd{background:transparent}
/* kartu: putih berbayang halus, tanpa garis */
:root[data-theme="light"] .cpx .cp-kartu,:root[data-theme="light"] .cpx .cp-peta,:root[data-theme="light"] .cpx .cp-cari-wrap,:root[data-theme="light"] .cpx .cp-cepat{background:#ffffff;box-shadow:var(--mp-sh)}
:root[data-theme="light"] .cpx .cp-resi{background:#f6f9f4}
:root[data-theme="light"] .cpx .cp-resi:hover{background:var(--accent-tint)}
/* kartu UTAMA hijau tua */
:root[data-theme="light"] .cpx .cp-home-halo,:root[data-theme="light"] .cpx .cp-posisi,:root[data-theme="light"] .cpx .cp-profil{background:var(--mp-hero);color:#f0fdf4;box-shadow:0 10px 24px rgb(15 61 46 / .28)}
:root[data-theme="light"] .cpx .cp-home-halo .cp-kicker,:root[data-theme="light"] .cpx .cp-posisi .cp-kicker,:root[data-theme="light"] .cpx .cp-profil .cp-kicker{color:#86efac}
:root[data-theme="light"] .cpx .cp-home-halo .cp-kecil,:root[data-theme="light"] .cpx .cp-home-halo .cp-muted,:root[data-theme="light"] .cpx .cp-home-halo .angka span,
:root[data-theme="light"] .cpx .cp-posisi .tgl,:root[data-theme="light"] .cpx .cp-posisi .cp-kecil,:root[data-theme="light"] .cpx .cp-posisi .no-hp,:root[data-theme="light"] .cpx .cp-posisi .ujung,
:root[data-theme="light"] .cpx .cp-profil .ds,:root[data-theme="light"] .cpx .cp-profil .ds-hp,:root[data-theme="light"] .cpx .cp-profil .cp-stat{color:rgb(240 253 244 / .72)}
:root[data-theme="light"] .cpx .cp-home-halo .angka b,:root[data-theme="light"] .cpx .cp-profil .cp-stat b{color:var(--mp-lime)}
:root[data-theme="light"] .cpx .cp-posisi .ikon{background:rgb(255 255 255 / .08);color:var(--mp-lime);box-shadow:0 0 0 2px #22c55e}
:root[data-theme="light"] .cpx .cp-posisi .cp-bar{background:rgb(255 255 255 / .14)}
:root[data-theme="light"] .cpx .cp-posisi .cp-bar div{background:#22c55e}
:root[data-theme="light"] .cpx .cp-posisi .cp-noresi{background:rgb(217 249 157 / .14);color:var(--mp-lime)}
:root[data-theme="light"] .cpx .cp-posisi .cp-nogudang,:root[data-theme="light"] .cpx .cp-home-halo .cp-nogudang{background:rgb(255 255 255 / .1);color:#f0fdf4;box-shadow:none}
:root[data-theme="light"] .cpx .cp-profil .cp-ava{background:rgb(255 255 255 / .1);color:var(--mp-lime);box-shadow:0 0 0 2px #22c55e}
/* ubin status: ikon berwarna per tahap */
:root[data-theme="light"] .cpx .cp-fase:nth-child(1) .ik{background:#fef3c7;color:#b45309}
:root[data-theme="light"] .cpx .cp-fase:nth-child(2) .ik{background:var(--mp-hero);color:var(--mp-lime)}
:root[data-theme="light"] .cpx .cp-fase:nth-child(3) .ik{background:#dcfce7;color:#15803d}
:root[data-theme="light"] .cpx .cp-chip-fase button.on{background:var(--mp-hero);color:var(--mp-lime)}
:root[data-theme="light"] .cpx .cp-chip-fase button.on i,:root[data-theme="light"] .cpx .cp-chip-fase button.on b{color:var(--mp-lime)}
:root[data-theme="light"] .cpx .cp-chip-fase button,:root[data-theme="light"] .cpx .cp-home-chip button,:root[data-theme="light"] .cpx .cp-tema{background:#ffffff;box-shadow:var(--mp-sh)}
:root[data-theme="light"] .cpx .cp-banner{background:linear-gradient(135deg,#d9f99d,#bbf7d0)}
/* kapsul tab bawah */
:root[data-theme="light"] body.cp-member .cpx-luar .cp-tab{background:rgb(255 255 255 / .92);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 8px 26px rgb(15 61 46 / .16)}
:root[data-theme="light"] body.cp-member .cpx-luar .cp-tab button.on{background:var(--mp-hero);color:var(--mp-lime)}
/* kotak login & tutorial pasang ikut T2 */
:root[data-theme="light"] .cp-m-login{background:#ffffff;border:0;box-shadow:0 1px 2px rgb(15 61 46 / .05),0 12px 30px rgb(15 61 46 / .10)}
:root[data-theme="light"] .cp-m-login input{background:#eef2ea;border:0}
:root[data-theme="light"] .mp-kotak{--mp-sf:#f1f5ee;--mp-sf2:#e3eadf;--mp-ac:#166534;--mp-tint:#dcfce7}

/* ===== Mode terang: kartu "kiriman Anda saat ini", kartu kontener, & kartu invoice ikut HIJAU TUA (17 Okt 2026, Hanzel) =====
   Baris resi di dalam kartu kontener tetap terang supaya nomor resi & barangnya mudah dibaca. */
:root[data-theme="light"] .cpx .cp-peta,:root[data-theme="light"] .cpx .cp-cont,:root[data-theme="light"] .cpx .cp-inv{background:var(--mp-hero);color:#f0fdf4;box-shadow:0 8px 20px rgb(15 61 46 / .22)}
:root[data-theme="light"] .cpx .cp-peta h2,:root[data-theme="light"] .cpx .cp-cont-kode,:root[data-theme="light"] .cpx .cp-inv-hd .no,:root[data-theme="light"] .cpx .cp-inv .cp-2kol b{color:#f0fdf4}
:root[data-theme="light"] .cpx .cp-peta .cp-kecil,:root[data-theme="light"] .cpx .cp-peta .sub-hp,:root[data-theme="light"] .cpx .cp-peta .cp-muted,
:root[data-theme="light"] .cpx .cp-cont-hd .cp-kecil,:root[data-theme="light"] .cpx .cp-cont .cp-eta,
:root[data-theme="light"] .cpx .cp-inv .cp-kecil,:root[data-theme="light"] .cpx .cp-inv .cp-2kol .l{color:rgb(240 253 244 / .72)}
:root[data-theme="light"] .cpx .cp-peta .cp-kicker,:root[data-theme="light"] .cpx .cp-cont .cp-kicker,:root[data-theme="light"] .cpx .cp-inv .cp-kicker{color:#86efac}
:root[data-theme="light"] .cpx .cp-cont .cp-eta b{color:var(--mp-lime)}
:root[data-theme="light"] .cpx .cp-cont-ikon{background:rgb(255 255 255 / .1);color:var(--mp-lime)}
:root[data-theme="light"] .cpx .cp-cont .cp-lipat-caret{color:rgb(240 253 244 / .7)}
:root[data-theme="light"] .cpx .cp-cont .cp-tag{background:rgb(217 249 157 / .16);color:var(--mp-lime)}
:root[data-theme="light"] .cpx .cp-cont .cp-tag.done{background:rgb(255 255 255 / .12);color:#f0fdf4}
:root[data-theme="light"] .cpx .cp-cont .cp-resis{color:var(--text)}
:root[data-theme="light"] .cpx .cp-cont .cp-resi{background:#ffffff}
:root[data-theme="light"] .cpx .cp-cont .cp-resi:hover{background:#f0fdf4}
:root[data-theme="light"] .cpx .cp-inv-pill{background:rgb(217 249 157 / .16);color:var(--mp-lime)}
:root[data-theme="light"] .cpx .cp-inv-pill.lunas{background:#22c55e;color:#052e12}
:root[data-theme="light"] .cpx .cp-inv-pill.telat{background:rgb(239 68 68 / .22);color:#fecaca}
:root[data-theme="light"] .cpx .cp-inv .cp-btn{background:#f0fdf4;color:#0f3d2e;font-weight:600}
:root[data-theme="light"] .cpx .cp-inv .cp-btn:hover{background:#ffffff}
:root[data-theme="light"] .cpx .cp-inv .cp-btn i{color:#16a34a}
/* kotak cari invoice (member-inv.js) */
.cpx .mi-cari{margin-bottom:2px}
.cpx .mi-cari input::-webkit-search-cancel-button{cursor:pointer}

/* Kartu invoice yang tersaring kotak cari harus benar-benar hilang: .cp-inv{display:grid} di portal.css mengalahkan atribut
   hidden (halaman member tidak punya aturan [hidden] global) — bug pertama v1.9-1057, semua kartu tetap tampak. */
.cpx .cp-inv[hidden],.cpx .mi-kosong[hidden]{display:none !important}

/* Hasil cari di tab Home (member-inv.js): resi & invoice yang cocok, langsung di bawah kotak cari. */
.cpx .mc-hasil{padding:10px 12px;display:grid;gap:4px}
.cpx .mc-hasil .cp-kicker{margin-top:4px}
.cpx .mc-baris{display:flex;align-items:center;gap:10px;justify-content:space-between;width:100%;text-align:left;border:0;background:none;color:var(--text);padding:8px 0;border-top:1px solid var(--line);cursor:pointer;font:inherit}
.cpx .mc-hasil .cp-kicker+.mc-baris{border-top:0}
.cpx .mc-baris>span{display:grid;gap:2px;min-width:0}
.cpx .mc-baris b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cpx .mc-baris .cp-kecil{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cpx .mc-baris i{color:var(--muted);flex:none}
.cpx .mc-lagi{border:0;background:none;color:var(--accent-deep);font:inherit;font-size:12px;font-weight:600;padding:4px 0;cursor:pointer;justify-self:start}
.cpx .mc-kosong{padding:4px 0}

/* ===== Kartu resi tab Kiriman disamakan dengan baris hasil cari Home (17 Okt 2026, Hanzel: "samain kartu resinya biar
   lebih rapi") =====
   Resi dalam satu kontener = SATU daftar putih bergaris pemisah tipis (bukan kotak abu terpisah). Nomor resi tebal polos
   (tanpa kotak hijau), tracking gudang & barang lebih kecil di bawahnya. Label "Tracking number" & "Gudang" TETAP ada
   (aturan 6 Okt 2026: dua nomor selalu berdua & berlabel) — cuma dikecilkan. */
@container (max-width:767px){
  .cp-cont .cp-resis{gap:0;background:var(--surface);border-radius:10px;padding:0 12px;overflow:hidden}
  .cp-cont .cp-resi,.cp-cont .cp-resi.berfoto{background:transparent;border-radius:0;padding:11px 0;border-top:1px solid var(--line)}
  .cp-cont .cp-resi:first-child{border-top:0}
  .cp-cont .cp-resi:hover{background:transparent}
  .cp-cont .cp-resi .cp-lbl-no{font-size:9px;letter-spacing:.06em;margin-bottom:2px;color:var(--muted)}
  .cp-cont .cp-resi .cp-noresi{background:none;padding:0;border-radius:0;color:var(--text);font-size:13.5px;font-weight:700;letter-spacing:.01em}
  .cp-cont .cp-resi .sub-hp{margin-top:3px;font-size:11.5px}
  .cp-cont .cp-resi .cp-nogudang{background:none;box-shadow:none;padding:0;font-weight:600;color:var(--text)}
  .cp-cont .cp-resi .sub-hp.eta b{color:var(--accent-deep)}
  .cp-cont .cp-thumb{width:38px;height:38px;border-radius:8px}
}
:root[data-theme="light"] .cpx .cp-cont .cp-resi{background:transparent}
:root[data-theme="light"] .cpx .cp-cont .cp-resis{background:#ffffff}

/* Tombol ✕ hapus pencarian — Home & Invoice (member-inv.js) dan Kiriman (bawaan portal.js, [data-cpcarix]) dibuat sama:
   bulatan kecil di kanan kotak. Tombol bawaan browser untuk type=search disembunyikan supaya tidak dobel. */
.cpx .cp-cari::-webkit-search-cancel-button{display:none;-webkit-appearance:none}
.cpx .cp-cari-wrap .mx-hapus,.cpx .cp-cari-wrap [data-cpcarix]{flex:none;width:24px;height:24px;border-radius:50%;border:0;padding:0;margin:0;
  display:inline-grid;place-items:center;background:var(--surface-2);color:var(--muted);font-size:12px;cursor:pointer}
.cpx .cp-cari-wrap .mx-hapus:hover,.cpx .cp-cari-wrap [data-cpcarix]:hover{color:var(--text)}
.cpx .cp-cari-wrap .mx-hapus[hidden]{display:none}

/* Buka semua / Tutup semua di tab Shipments (member-inv.js) — rata kanan, gaya chip fase */
.cpx .ml-lipat{justify-content:flex-end;margin-bottom:-4px}

/* Tombol bahasa CN / ENG / IND tidak boleh menyusut (26 Okt 2026): header HP sempit membuat .cp-seg ikut mengecil,
   dan karena overflow:hidden tombol IND terpotong — di iPhone (huruf SF lebih lebar) hilang sama sekali. Menu atas PC
   juga tidak dipatah dua baris. Dijaga uji "Device …" di tests/member_ui.mjs. */
.cpx .cp-hd .cp-seg{flex:none}
.cpx .cp-hd .cp-seg button{flex:none;white-space:nowrap}
.cpx .cp-hd .cp-nav{white-space:nowrap}
/* HP kecil (≤ 400px, mis. 360px Android & iPhone mini): header dirapatkan supaya tombol Keluar tidak terdorong keluar
   layar; logo boleh mengecil duluan, tombol bahasa tetap utuh. */
@container (max-width:400px){
  .cpx .cp-hd{gap:6px;padding-left:12px;padding-right:12px}
  .cpx .cp-hd .cp-brand{min-width:0;flex:0 1 auto}
  .cpx .cp-hd .cp-brand img{max-width:100%;height:auto;max-height:19px}
  .cpx .cp-hd .cp-seg button{padding:3px 6px}
  .cpx .cp-hd .cp-tema{width:26px;height:26px}
}
/* Tablet ±768–791px (26 Okt 2026): konten utama 24px lebih sempit dari layar (padding .cp-m-wrap), bar bawah .cpx-luar
   selebar layar. Dua-duanya memakai @container 767px, jadi di lebar itu konten sudah mode HP (menu atas hilang) sementara
   bar bawah masih mode PC (ikut hilang) — tidak ada navigasi sama sekali. Padding yang SAMA membuat keduanya pindah mode
   di lebar layar yang sama. */
body.cp-member .cpx.cpx-luar{box-sizing:border-box;padding-left:max(12px, env(safe-area-inset-left, 0px));padding-right:max(12px, env(safe-area-inset-right, 0px))}
/* Tablet / iPad / laptop kecil (container 768–1180px, 26 Okt 2026): header PC tidak muat satu baris — tombol bahasa,
   lonceng, dan Keluar terdorong keluar layar. Menu dipindah ke baris kedua di bawah logo. */
@container (min-width:768px) and (max-width:1180px){
  .cpx .cp-hd{flex-wrap:wrap;row-gap:10px}
  .cpx .cp-hd::after{content:'';order:1;flex-basis:100%;height:0}
  .cpx .cp-hd .cp-nav{order:2}
}