/* ACE Seller Center — tema mengikuti ACE Counting: gelap, aksen emas, kartu membulat. */
:root {
  --bg: #0e0e10;
  --bg-2: #141417;
  --panel: #1a1a1f;
  --panel-2: #202027;
  --text: #f1f1f3;
  --muted: #8d8f99;
  --line: #2a2a32;
  --gold: #e6b84c;
  --gold-ink: #15120a;
  --gold-soft: rgba(230, 184, 76, 0.14);
  --pink: #f27ca4;
  --green: #7ed39b;
  --purple: #8e7cf2;
  --blue: #6ab3f5;
  --red: #f07070;
  --woo: #a384e6;
  --toco: #e6b84c;
  --shopee: #f0724a;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }

/* ---------- Elemen bawaan browser diganti gaya web ---------- */
/* Scrollbar tipis bertema (Firefox + Chromium) */
* { scrollbar-width: thin; scrollbar-color: #34343e transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: #34343e; border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: #4a4a56; background-clip: padding-box; }
*::-webkit-scrollbar-corner { background: transparent; }
/* Spinner pada input angka dihilangkan */
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
select option { background: #1a1a1f; color: #f1f1f3; }
select option:disabled { color: #6b6d77; }
textarea { resize: none; }
/* Pegangan ubah ukuran dan tombol clear/search bawaan disembunyikan */
input::-webkit-search-cancel-button { -webkit-appearance: none; }
::selection { background: rgba(230, 184, 76, 0.35); }
body {
  font: 14px/1.55 "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--text); background: var(--bg);
  display: grid; grid-template-columns: 248px 1fr; min-height: 100vh;
}
svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
a { color: inherit; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.hidden { display: none !important; }
.r { text-align: right; }
h1 { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -0.01em; }
h2 { margin: 0; font-size: 15px; font-weight: 600; }

/* ---------- Sidebar ---------- */
.sidebar {
  background: var(--bg-2); border-right: 1px solid var(--line);
  padding: 22px 16px; display: flex; flex-direction: column; gap: 22px; position: sticky; top: 0; height: 100vh;
}
.brand { display: flex; align-items: center; gap: 12px; padding: 0 6px; }
.brand-mark {
  width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--gold), #c48f1e); color: var(--gold-ink); font-weight: 700; font-size: 20px;
}
.brand-name { font-weight: 700; font-size: 18px; letter-spacing: -0.02em; line-height: 1.1; }
.brand-name span { color: var(--gold); }
.brand-sub { color: var(--muted); font-size: 12px; }
nav { display: flex; flex-direction: column; gap: 4px; }
.nav {
  display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 12px;
  color: var(--muted); text-decoration: none; font-weight: 500; transition: background .15s, color .15s;
}
.nav svg { width: 19px; height: 19px; }
.nav:hover { background: var(--panel); color: var(--text); }
.nav.active { background: var(--gold-soft); color: var(--gold); }
.nav .badge { margin-left: auto; }
.sidebar-foot { margin-top: auto; display: flex; flex-direction: column; gap: 8px; }

/* ---------- Main / topbar ---------- */
/* min-width: 0 wajib — tanpa itu kolom grid melar mengikuti tabel terlebar,
   dan kartu-kartu lain ikut terdorong keluar layar. */
main { padding: 26px 32px 40px; max-width: 1480px; width: 100%; min-width: 0; }
.topbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.topbar p { margin: 2px 0 0; }
.topbar-actions { display: flex; gap: 10px; align-items: center; }

/* ---------- Buttons / inputs ---------- */
.btn {
  font: inherit; font-weight: 600; font-size: 13px; display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--line); background: var(--panel); color: var(--text);
  border-radius: 12px; padding: 9px 14px; cursor: pointer; transition: border-color .15s, background .15s, transform .05s;
}
.btn svg { width: 16px; height: 16px; }
.btn:hover { border-color: var(--gold); }
.btn:active { transform: translateY(1px); }
.btn.gold { background: var(--gold); color: var(--gold-ink); border-color: var(--gold); }
.btn.gold:hover { filter: brightness(1.06); }
.btn.sm { padding: 6px 10px; font-size: 12px; border-radius: 10px; }
.btn.block { width: 100%; justify-content: center; }
/* Aksi yang mengubah tampilan produk di etalase (arsipkan). */
.btn.danger { color: var(--red); border-color: rgba(240, 112, 112, 0.4); }
.btn.danger:hover { border-color: var(--red); }
.btn.hidden { display: none; }
.btn[disabled] { opacity: 0.55; cursor: wait; }
.icon-btn { background: transparent; border: 0; color: var(--muted); cursor: pointer; padding: 6px; border-radius: 8px; }
.icon-btn:hover { background: var(--panel-2); color: var(--text); }
input, select, textarea {
  font: inherit; color: var(--text); background: var(--panel); border: 1px solid var(--line);
  border-radius: 12px; padding: 9px 12px; min-width: 160px; outline: none; transition: border-color .15s;
}
input:focus, select:focus, textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(230, 184, 76, 0.12); }
input:disabled, select:disabled, textarea:disabled { background-color: var(--bg-2); color: var(--muted); cursor: not-allowed; }

/* Panah dropdown kustom. Harus SETELAH aturan di atas, karena `background` shorthand
   di sana menghapus background-image dan mengembalikan background-repeat ke "repeat". */
select {
  -webkit-appearance: none; appearance: none; cursor: pointer; padding-right: 34px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238d8f99' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right 11px center; background-size: 16px 16px;
}
select:hover { border-color: #3a3a44; }
select:focus { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23e6b84c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>"); }
select:disabled { background-image: none; }
input::placeholder, textarea::placeholder { color: #6b6d77; }
.search { position: relative; display: inline-flex; align-items: center; }
.search svg { position: absolute; left: 12px; color: var(--muted); width: 16px; height: 16px; }
.search input { padding-left: 36px; min-width: 260px; }
input.stock { min-width: 70px; width: 82px; text-align: right; padding: 6px 10px; }
input.price { min-width: 120px; width: 136px; text-align: right; padding: 6px 10px; }
.toolbar { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }

/* ---------- Cards / tiles ---------- */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; margin-bottom: 16px; }
.card-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 14px; }
.table-card { padding: 6px 8px; overflow-x: auto; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-bottom: 16px; }
.tile { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 20px; }
.tile .l { color: var(--muted); font-size: 12.5px; margin-bottom: 6px; }
.tile .v { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; }
/* Keterangan kecil di bawah angka, untuk ubin yang angkanya perlu konteks. */
.tile .sub { color: var(--muted); font-size: 11.5px; margin-top: 3px; }
.tile.gold .v { color: var(--gold); } .tile.pink .v { color: var(--pink); } .tile.green .v { color: var(--green); } .tile.purple .v { color: var(--purple); } .tile.blue .v { color: var(--blue); }
.grid-2 { display: grid; grid-template-columns: 1.5fr 1fr; gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; margin-bottom: 16px; }
@media (max-width: 1100px) { .grid-2 { grid-template-columns: 1fr; } }
@media (max-width: 1040px) and (min-width: 761px) {
  body { grid-template-columns: 200px 1fr; }
  main { padding: 22px 20px 36px; }
}

/* ---------- Filter Platform / Toko / Status (gaya BigSeller) ---------- */
.filter-card { padding: 14px 20px; display: flex; flex-direction: column; gap: 12px; }
.frow { display: grid; grid-template-columns: 96px 1fr; align-items: center; gap: 12px; }
.flabel { color: var(--muted); font-size: 12.5px; }
.fchips { display: flex; flex-wrap: wrap; gap: 6px; }
.fchip {
  font: inherit; font-size: 13px; display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  background: transparent; color: var(--text); border: 1px solid transparent; border-radius: 10px; padding: 6px 12px;
  transition: background .15s, border-color .15s, color .15s;
}
.fchip:hover { background: var(--panel-2); }
.fchip.on { background: var(--gold-soft); color: var(--gold); border-color: rgba(230, 184, 76, 0.35); font-weight: 600; }
.fchip .cnt { color: var(--muted); font-size: 11.5px; font-weight: 400; }
.pdot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }
.pdot.toco { background: var(--toco); } .pdot.shopee { background: var(--shopee); } .pdot.woo { background: var(--woo); }
.frow .search input { min-width: 320px; }
@media (max-width: 700px) { .frow { grid-template-columns: 1fr; gap: 6px; } .frow .search input { min-width: 0; width: 100%; } }

/* ---------- Pengaturan ---------- */
.setlist { display: grid; gap: 8px; }
.setrow { display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-2); }
.setrow > div:first-child { min-width: 0; }
.setrow .vnum { flex: none; width: 150px; }
.setrow .vnum input { text-align: right; }
.setrow .combo-urut { width: 230px; flex: none; }
.setgrid .card { margin-bottom: 0; }
.setgrid { margin-bottom: 16px; }
.chip.pesanan-otomatis, .chip.pesanan { background: rgba(106,179,245,.16); color: var(--blue); }
.chip.produk, .chip.draft { background: rgba(126,211,155,.16); color: var(--green); }
.chip.harga, .chip.gudang { background: var(--gold-soft); color: var(--gold); }
.chip.promosi, .chip.chat { background: rgba(142,124,242,.16); color: var(--purple); }
.chip.channel, .chip.sinkron, .chip.pengaturan, .chip.lain { background: var(--panel-2); color: var(--muted); }
#log-aktivitas code { font-size: 11.5px; color: var(--text); }
.logdetail summary { cursor: pointer; font-size: 11.5px; }
.logdetail pre { margin: 6px 0 0; font-size: 11px; white-space: pre-wrap; word-break: break-word;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 8px; padding: 8px; max-height: 220px; overflow: auto; }

/* ---------- Draft produk ---------- */
/* Kartunya meminjam papan Harga produk (.prodgrid/.kartu); yang khas di sini hanya daftar
   varian ringkas, catatan "sudah diposting", dan menu tujuan posting. */
.kartu.draft .kbaris { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto auto;
  gap: 8px; align-items: baseline; padding: 5px 0; border-top: 1px dashed var(--line); font-size: 12.5px; }
.kartu.draft .kbaris:first-child { border-top: 0; }
.kartu.draft .kvnama { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kartu.draft .kbaris b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.kposted { margin: 8px 0 2px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.kposting { position: relative; flex: 1; }
.kposting summary { list-style: none; cursor: pointer; width: 100%; justify-content: center; }
.kposting summary::-webkit-details-marker { display: none; }
.kposting .kmenu { position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); z-index: 5;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px; padding: 6px;
  box-shadow: var(--shadow); display: grid; gap: 2px; }
.kposting .kmenu a { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 9px;
  text-decoration: none; font-size: 13px; }
.kposting .kmenu a:hover { background: var(--panel); }
.kposting .kmenu a .small { margin-left: auto; color: var(--muted); }
.kposting .kmenu a.sudah { color: var(--muted); }
.kposting .kmenu a.asal { opacity: .55; }
.kosongdraft { grid-column: 1 / -1; max-width: 640px; }
.kosongdraft p { line-height: 1.7; }
.kosongdraft a { color: var(--gold); }

/* Pemilih marketplace di puncak halaman Promosi: satu pilihan, tanpa "Semua". Dibuat
   sebagai segmen selebar halaman supaya terbaca sebagai pengalih halaman, bukan penyaring. */
.promo-pick { display: flex; gap: 8px; margin-bottom: 14px; }
.promo-pick .fchip { flex: 1 1 0; justify-content: center; padding: 11px 14px; border-radius: 14px;
  background: var(--panel); border-color: var(--line); font-size: 14px; font-weight: 500; }
.promo-pick .fchip.on { background: var(--gold-soft); border-color: var(--gold); color: var(--gold); font-weight: 600; }
.promo-pick .fchip:disabled { opacity: .4; cursor: not-allowed; }
.promo-pick .fchip:disabled:hover { background: var(--panel); }
/* Baris kedua: toko di dalam marketplace terpilih. Dibuat lebih kecil dari baris
   marketplace supaya hierarkinya terbaca; tiap toko punya antrian otomatisnya sendiri. */
.promo-pick-toko { margin-top: -6px; gap: 6px; flex-wrap: wrap; }
.promo-pick-toko .fchip { flex: 0 1 auto; padding: 8px 16px; font-size: 13px; border-radius: 12px; }
.promo-pick-toko:empty { display: none; }

.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin: 4px 0 0; overflow-x: auto; }
.tab {
  font: inherit; font-size: 13.5px; background: transparent; color: var(--muted); border: 0; cursor: pointer;
  padding: 10px 16px; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap;
}
.tab:hover { color: var(--text); }
.tab.on { color: var(--gold); border-bottom-color: var(--gold); font-weight: 600; }
.tab span { font-weight: 400; opacity: .8; }
.table-card.tabbed { border-top-left-radius: 0; border-top-right-radius: 0; border-top: 0; }

.storecell { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.sname { font-size: 12px; color: var(--muted); max-width: 180px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pmeta .sname { max-width: 220px; }

.sku-card summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
.sku-card summary::-webkit-details-marker { display: none; }
.sku-card summary::after { content: ""; width: 10px; height: 10px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .15s; margin-right: 6px; }
.sku-card[open] summary::after { transform: rotate(225deg); }
.sku-card[open] summary { margin-bottom: 12px; }

/* ---------- Tables ---------- */
.table { width: 100%; border-collapse: collapse; }
.table th { text-align: left; font-size: 12px; color: var(--muted); font-weight: 500; padding: 12px 12px; border-bottom: 1px solid var(--line); }
.table th.r { text-align: right; }
.table td { padding: 12px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table tr.row { cursor: pointer; }
.table tr.row:hover td { background: var(--panel-2); }
.table tr.detail td { background: var(--bg-2); font-size: 13px; color: var(--muted); }
.table .empty td { text-align: center; color: var(--muted); padding: 36px; }
.table td.name { max-width: 460px; min-width: 200px; }
/* Tabel produk berkelompok: induk di kiri (rowspan), varian di kanan */
#products-table tr.pgroup td { border-top: 1px solid var(--line); }
#products-table tbody tr:first-child td { border-top: 0; }
#products-table td.pcell { vertical-align: top; width: 44%; min-width: 320px; border-right: 1px solid var(--line); border-bottom: 0; padding: 14px 16px 14px 12px; }
#products-table tr.vrow td { border-bottom: 0; border-top: 1px dashed var(--line); }
#products-table tr.pgroup td:not(.pcell) { border-bottom: 0; }
.pinfo { display: flex; gap: 14px; align-items: flex-start; }
.pimg { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; background: var(--panel-2); display: block; flex: none; }
.ptext { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.pname { font-weight: 600; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pmeta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.vcell { min-width: 180px; }
.edit-link { align-self: flex-start; margin-top: 4px; text-decoration: none; }
.edit-link svg { width: 14px; height: 14px; }
/* Panel pengiriman di dalam baris rincian pesanan. */
.ship { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.ship > .track:first-child, .ship > .mcols:first-child, .ship > .shipmsg:first-child, .ship > .addr:first-child { margin-top: 0; }
/* Alamat penerima di baris rincian pesanan, mengikuti tampilan Shopee. */
.addr { margin-top: 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-2); }
.addrhead { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.addrline { margin-bottom: 2px; }
.addr + .track, .addr + .mcols { margin-top: 14px; }
.ship > .shiprow:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
/* Baris pengiriman: info di kiri, tombol aksi di kanan, dipisah garis dari rincian uang di atasnya. */
.shiprow { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.shiprow .btn { margin-left: 0; }
.shipbtns { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.shipmsg { margin-top: 12px; }

/* ---------- Halaman edit produk (produk.html) ---------- */
.editpage { display: block; }
.editbar { position: sticky; top: 0; z-index: 10; background: rgba(14, 14, 16, 0.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.editbar-inner { max-width: 1100px; margin: 0 auto; padding: 18px 24px; display: flex; align-items: center; gap: 16px; }

/* Tombol kembali bundar di kiri judul. */
.backbtn { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: var(--panel); color: var(--muted); text-decoration: none; transition: color .15s, border-color .15s; }
.backbtn:hover { color: var(--gold); border-color: var(--gold); }
.backbtn svg { width: 18px; height: 18px; }

.edithead { flex: 1; min-width: 0; }
.edithead h1 { margin: 0; font-size: 19px; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.subrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.subchip { font-size: 12px; color: var(--muted); background: var(--panel-2); border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.subchip.ok { color: var(--green); border-color: rgba(126, 211, 155, 0.35); }
.subchip.off { color: var(--muted); }
.editbar .topbar-actions { display: flex; gap: 8px; align-items: center; flex: none; }
.editbar .topbar-actions .btn { text-decoration: none; white-space: nowrap; }

.edit-main { max-width: 1100px; margin: 0 auto; padding: 24px 24px 72px; display: grid; gap: 16px; }
.edit-main .card { padding: 16px 18px; }
.gallery { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.gallery img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Kartu foto produk: bisa diseret untuk menyusun ulang, tombolnya muncul saat disorot. */
.photo { position: relative; width: 104px; height: 104px; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); background: var(--panel-2); margin: 0; cursor: grab; }
.photo.dragging { opacity: .4; }
.photo.over { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold-soft); }
.pmain { position: absolute; top: 6px; left: 6px; padding: 2px 7px; border-radius: 999px; font-size: 10px; font-weight: 600; background: var(--gold); color: #1a1a1a; }
.pbar { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; gap: 2px; padding: 4px; background: linear-gradient(transparent, rgba(0, 0, 0, .75)); opacity: 0; transition: opacity .15s; }
.photo:hover .pbar, .photo:focus-within .pbar { opacity: 1; }
.pbar button { width: 26px; height: 24px; border-radius: 7px; border: 1px solid rgba(255, 255, 255, .25); background: rgba(0, 0, 0, .55); color: #fff; font-size: 13px; line-height: 1; cursor: pointer; }
.pbar button:hover:not(:disabled) { background: var(--gold); border-color: var(--gold); color: #1a1a1a; }
.pbar button:disabled { opacity: .3; cursor: default; }
.pbar .pdel:hover { background: #c0392b; border-color: #c0392b; color: #fff; }

/* Kotak tambah foto. */
/* Foto yang masih dipindahkan dari draft: bayangan dari alamat asalnya, belum bisa digeser/dihapus. */
.photo.menunggu img { opacity: .45; filter: grayscale(.35); animation: fotoTunggu 1.4s ease-in-out infinite alternate; }
.photo.menunggu .ptunggu { position: absolute; left: 0; right: 0; bottom: 0; padding: 3px 4px; font-size: 10px;
  text-align: center; background: rgba(0, 0, 0, .6); color: var(--gold); }
@keyframes fotoTunggu { from { opacity: .3; } to { opacity: .6; } }
.photo.add { display: grid; place-content: center; gap: 2px; justify-items: center; border: 1px dashed var(--line); cursor: pointer; color: var(--muted); }
.photo.add:hover { border-color: var(--gold); color: var(--gold); }
.photo.add .plus { font-size: 24px; line-height: 1; }
.formfoot { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 14px; }
.chips-info { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.info-chip { background: var(--panel-2); border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px; font-size: 12px; }
.specs { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.spec { display: flex; flex-direction: column; gap: 6px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; font-size: 13px; }
.spec .speclabel { font-size: 12px; font-weight: 500; color: var(--muted); }
.spec .req { color: var(--red); }
/* background-color, bukan shorthand: `background` akan menghapus panah dropdown kustom. */
.spec select, .spec input { width: 100%; min-width: 0; background-color: var(--panel); }
.spec select.empty { color: #6b6d77; }
.catrow { display: flex; gap: 8px; align-items: center; }
.catrow input { flex: 1; }
.brandfield > label .req { color: var(--red); }

/* Dropdown dashboard: kotak + daftar pilihan bertema gelap (combo.js). */
.combo { position: relative; }
.combo .combo-input { width: 100%; padding-right: 34px; }
.combo.with-icon .combo-input { padding-left: 36px; }
.combo-search {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; pointer-events: none;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238d8f99' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><path d='m20 20-4.5-4.5'/></svg>") center / 16px 16px no-repeat;
}
.combo-arrow { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; cursor: pointer; }
.combo-arrow::after {
  content: ""; position: absolute; inset: 0;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238d8f99' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>") center / 16px 16px no-repeat;
  transition: transform 0.15s;
}
.combo.open .combo-arrow::after { transform: rotate(180deg); }
.combo-list {
  position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 6px);
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5); padding: 6px; max-height: 280px; overflow-y: auto;
}
.combo-item { display: block; width: 100%; text-align: left; background: none; border: 0; color: var(--text); font: inherit; font-size: 13px; padding: 9px 12px; border-radius: 8px; cursor: pointer; }
.combo-item.active { background: var(--panel-2); }
.combo-item.picked { color: var(--gold); font-weight: 600; }
.combo-item.picked::after { content: "✓"; float: right; }
.combo-empty { padding: 12px; color: var(--muted); font-size: 13px; text-align: center; }

/* Dialog pemilih kategori: kolom bertingkat seperti Seller Centre. */
.catcols { display: flex; gap: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; min-height: 280px; }
.catcol { flex: 1; min-width: 0; max-height: 380px; overflow-y: auto; border-right: 1px solid var(--line); padding: 6px; }
.catcol:last-child { border-right: 0; }
.catitem { display: flex; justify-content: space-between; gap: 8px; width: 100%; text-align: left; background: none; border: 0; color: var(--text); padding: 8px 10px; border-radius: 8px; cursor: pointer; font: inherit; font-size: 13px; }
.catitem:hover { background: var(--panel-2); }
.catitem.on { background: var(--gold-soft); color: var(--gold); }
#p-variants .v-sku { width: 160px; font-size: 12px; }
.switchbox.perdim { margin: 0 0 14px; cursor: pointer; }
#p-variants .v-weight { width: 90px; }
#p-variants .dimrow input { width: 64px; }

/* Editor struktur variasi di kartu Variasi. */
#tier-editor { display: grid; gap: 10px; margin-bottom: 14px; }
.tier { background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.tierhead { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.tierhead .t-name { flex: 1; max-width: 280px; font-weight: 500; }
.tieropts { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.opt { position: relative; display: inline-flex; }
.opt .t-opt { width: 170px; padding-right: 28px; min-width: 0; }
.optdel { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); background: none; border: 0; color: var(--muted); font-size: 16px; line-height: 1; cursor: pointer; padding: 2px 4px; border-radius: 6px; }
.optdel:hover { color: var(--red); background: rgba(240, 112, 112, 0.1); }
.shipnote { margin: 8px 2px 16px; }
/* Panel samping chat: kirim produk atau pesanan ke pembeli. */
.chat-side { width: 300px; flex: none; display: flex; flex-direction: column; overflow: hidden; padding: 0; }
.chat-side.hidden { display: none; }
.sidetabs { display: flex; border-bottom: 1px solid var(--line); }
.sidetabs .tab { flex: 1; padding: 10px 8px; font-size: 13px; }
.sidelist { flex: 1; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 8px; }
.sidepad { padding: 14px 6px; }
.siderow { display: flex; align-items: center; gap: 10px; padding: 8px; border: 1px solid var(--line);
  border-radius: 10px; background: var(--panel-2); }
.siderow img, .siderow .pimg { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; flex: none;
  background: var(--bg-2); display: block; }
.siderow .ptext { flex: 1; min-width: 0; gap: 2px; }
.siderow .pname { font-size: 12px; -webkit-line-clamp: 2; }
.siderow .btn { flex: none; }

/* Pemberitahuan sistem di dalam percakapan (chat diakhiri, admin bergabung). */
.sysmsg { display: flex; justify-content: center; align-items: center; gap: 8px; margin: 10px 0;
  text-align: center; font-size: 12px; color: var(--muted); }
.sysmsg > span:first-child { background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 999px; padding: 4px 12px; max-width: 70%; }
/* Jasa kirim yang tidak menerima berat produk ini. */
#p-channels tr.dim td { opacity: .5; }
#p-channels .ch-price[readonly] { background: var(--panel-2); color: var(--muted); cursor: default; }

/* Dropdown yang sudah dipilih: teksnya tegas dan ada centang, bukan seperti masih diketik. */
.combo-ok { display: none; position: absolute; right: 30px; top: 50%; transform: translateY(-50%);
  color: var(--green); font-size: 13px; font-weight: 700; pointer-events: none; }
.combo.picked .combo-ok { display: block; }
.combo.picked .combo-input { color: var(--text); font-weight: 500; }
.combo.picked.open .combo-ok { display: none; }

/* Statistik produk di halaman Produk: tiap angka satu sel, dipisah garis tipis. */
.pstats { margin-top: 8px; }
.pstats:empty, .vstats:empty { display: none; }
.statgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px;
  border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--line); }
.statcell { background: var(--panel-2); padding: 7px 12px; display: flex; flex-direction: column; gap: 1px; }
.statcell b { color: var(--text); font-size: 14px; font-weight: 600; line-height: 1.3; font-variant-numeric: tabular-nums; }
.statcell span { color: var(--muted); font-size: 11px; line-height: 1.3; }
.vstats { margin-top: 3px; }
.ptags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.tag { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.tag.warn { background: var(--gold-soft); color: var(--gold); }
.tag.ok { background: rgba(126, 211, 155, 0.16); color: var(--green); }

/* Tabel Naikkan Produk di halaman Promosi. */
#boost-table td.bcell { width: 50%; min-width: 300px; }
#boost-table .pimg { width: 48px; height: 48px; border-radius: 10px; }
#boost-table .pinfo { gap: 12px; align-items: center; }
#view-promosi .frow { margin-bottom: 14px; }
#view-promosi .flabel.urut { margin-left: 18px; }
/* Kotak Urutkan (Produk & Promosi): lebar tetap supaya baris pencariannya tidak melar. */
.combo-urut { width: 250px; }

/* Kartu antrian naikkan otomatis: dua kolom (sedang dinaikkan / menunggu giliran). */
.autocols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.autocol h3 { margin: 0 0 10px; font-size: 14px; font-weight: 600; }
.autocol + .autocol { border-left: 1px solid var(--line); padding-left: 18px; }
.qlist { display: flex; flex-direction: column; gap: 8px; }
.qrow { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line);
  border-radius: 10px; background: var(--panel-2); }
.qrow .pimg { width: 36px; height: 36px; border-radius: 8px; }
.qrow .ptext { flex: 1; min-width: 0; gap: 2px; }
.qrow .pname { font-size: 13px; -webkit-line-clamp: 1; }
.qrow .qerr { color: var(--red); }
.qempty { padding: 10px 2px; }
.icon-btn.qdel { flex: none; }
/* Kartu proses pesanan otomatis di halaman Pesanan. */
.autoship-ctl { display: flex; align-items: center; gap: 12px; }
#f-autoship-mode { width: 210px; }
#autoship-card .qrow .ptext { gap: 3px; }
#autoship-card .pname { font-size: 13px; }
/* Kolom aksi di tabel: tombol antre + naikkan berdampingan. */
.actrow { display: flex; gap: 8px; justify-content: flex-end; }
.btn.sm.boost-queue.on { border-color: var(--gold); color: var(--gold); background: var(--gold-soft); }
@media (max-width: 1100px) {
  .autocols { grid-template-columns: 1fr; }
  .autocol + .autocol { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 16px; }
}
/* Hitung mundur sampai produk boleh dinaikkan lagi, seperti di Seller Centre. */
.bcountdown { display: inline-block; padding: 3px 9px; border-radius: 8px; font-size: 12px; font-weight: 600;
  font-variant-numeric: tabular-nums; background: var(--gold-soft); color: var(--gold); }

/* Pilih pesanan untuk cetak label massal. Kolomnya baru muncul di mode "Aksi massal". */
#orders-table th.pick, #orders-table td.pick { display: none; }
#view-pesanan.picking #orders-table th.pick, #view-pesanan.picking #orders-table td.pick { display: table-cell; }
.table th.pick, .table td.pick { width: 38px; padding-right: 0; text-align: center; }
.table td.pick input, .table th.pick input { cursor: pointer; margin: 0; }
.bulkbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; padding: 10px 14px;
  border: 1px solid var(--gold); border-radius: 12px; background: var(--gold-soft); font-size: 13px; font-weight: 500; }
.bulkbar.hidden { display: none; }
/* Pesanan yang dipilih di mode massal menyala. Di layar sempit kotak centangnya tidak
   digambar sama sekali, jadi nyala ini satu-satunya tandanya. */
.table tbody tr.row.dipilih { background: var(--gold-soft); box-shadow: inset 0 0 0 1px var(--gold); }
#view-pesanan.picking #orders-table tbody tr.row { cursor: pointer; }
/* Pesanan yang tidak punya label (belum bayar, batal) diredupkan selama memilih. */
#view-pesanan.picking #orders-table tbody tr.row:not(:has(.opick)) { opacity: .45; }
.btn.on { border-color: var(--gold); color: var(--gold); background: var(--gold-soft); }
.listtools { display: none; }
.bulkbar #bulk-clear { margin-left: auto; }
.bulkbar .btn[disabled] { opacity: .5; cursor: not-allowed; }
/* Iframe pencetak: harus ikut dirender browser, jadi disembunyikan di pojok, bukan display:none. */
iframe.printframe { position: fixed; right: 0; bottom: 0; width: 1px; height: 1px; border: 0; opacity: 0; pointer-events: none; }

/* Dialog konfirmasi dashboard (pengganti window.confirm bawaan browser). */
.confirm-box { max-width: 460px; }
.confirm-head { display: flex; gap: 14px; align-items: flex-start; padding: 22px 22px 6px; }
.confirm-head h2 { margin: 0 0 6px; font-size: 17px; }
.confirm-head p { margin: 0; font-size: 14px; line-height: 1.55; }
.confirm-icon { flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--gold-soft); border: 1px solid var(--gold); position: relative; }
.confirm-icon::after { content: "?"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--gold); font-weight: 700; font-size: 18px; }
#modal-confirm .modal-foot { border-top: 0; padding: 14px 22px 20px; }
.btn.danger-solid { background: var(--red); border-color: var(--red); color: #1a0d0d; font-weight: 600; }
.btn.danger-solid:hover { filter: brightness(1.06); }
/* Pilihan di dalam dialog konfirmasi, mis. alasan pembatalan pesanan. */
.confirm-choice { padding: 10px 22px 0 72px; display: grid; gap: 6px; }
.confirm-choice.hidden { display: none; }
.confirm-choice label { font-size: 13px; color: var(--muted); }
.confirm-choice select { width: 100%; }

/* Sub-bagian di dalam kartu (Pre-order, Asuransi), dipisah garis seperti Seller Centre. */
.subsection { border-top: 1px solid var(--line); padding-top: 16px; margin-top: 16px; }
.subsection h3 { margin: 0 0 10px; font-size: 14px; font-weight: 600; }
.subsection > p { margin: 8px 2px 0; }
.prerow { display: flex; align-items: center; gap: 10px 18px; flex-wrap: wrap; }
/* Kotak angka hari: min-width bawaan kolom isian 160px membuatnya selebar kalimat. */
.prerow input[type="number"] { width: 90px; min-width: 0; text-align: right; }
/* "Saya memerlukan [7] hari" dibaca sebagai satu frasa yang melekat pada pilihan "Ya". */
.prerow .prehari { display: inline-flex; align-items: center; gap: 8px; }
.radio { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
/* min-width bawaan kolom isian 160px juga mengenai radio: titiknya duduk di ujung kiri kotak
   selebar itu dan labelnya terlempar ~145 piksel ke kanan. */
.radio input { width: 16px; height: 16px; min-width: 16px; margin: 0; padding: 0; flex: none; accent-color: var(--gold); }

/* Kotak dengan sakelar di kanan (asuransi). */
.switchbox { display: flex; align-items: center; justify-content: space-between; gap: 16px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }

/* Sakelar, dipakai untuk asuransi dan kolom Aktif jasa kirim. */
.switch { position: relative; display: inline-block; width: 42px; height: 24px; flex: none; }
/* min-width: 0 wajib — kolom isian punya min-width 160px, dan tanpa ini kotak centang
   yang disembunyikan itu melebar keluar sakelarnya lalu mendorong halaman. */
.switch input { position: absolute; opacity: 0; width: 100%; min-width: 0; height: 100%; margin: 0; cursor: pointer; }
.switch .slider { position: absolute; inset: 0; background: var(--panel-2); border: 1px solid var(--line); border-radius: 999px; transition: background 0.15s, border-color 0.15s; pointer-events: none; }
.switch .slider::before { content: ""; position: absolute; width: 16px; height: 16px; left: 3px; top: 3px; background: var(--muted); border-radius: 50%; transition: transform 0.15s, background 0.15s; }
.switch input:checked + .slider { background: var(--gold-soft); border-color: var(--gold); }
.switch input:checked + .slider::before { transform: translateX(18px); background: var(--gold); }
.switch input:disabled { cursor: not-allowed; }
.switch input:disabled + .slider { opacity: 0.45; }
.dimrow { display: flex; align-items: center; gap: 6px; }
.dimrow input { width: 100%; min-width: 0; }
/* Jasa kirim dua tingkat: grup induk lalu kurir di bawahnya. */
#p-channels tr.chgroup td { border-bottom: 0; padding-top: 12px; }
#p-channels tr.chchild td { padding: 2px 12px 2px 28px; border-bottom: 0; font-size: 13px; color: var(--muted); }
#p-channels tr.chchild + tr.chgroup td { border-top: 1px solid var(--line); }
#p-channels input[type="number"] { width: 120px; }
#p-channels .switch { vertical-align: middle; }

/* Kolom jasa kirim + resi di daftar pesanan. */
.shipcell { white-space: nowrap; font-size: 13px; }

/* Catatan dari pembeli pada rincian pesanan. */
.note { background: var(--gold-soft); border-left: 3px solid var(--gold); border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; }

/* Riwayat perjalanan paket. */
.track { margin-top: 8px; display: grid; gap: 4px; }
.tline { display: grid; grid-template-columns: 110px 1fr; gap: 10px; align-items: baseline; }

/* Rincian uang: dibayar pembeli dan estimasi penghasilan. */
.mcols { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin-top: 10px; }
.mblock { background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.mblock h4 { margin: 0 0 6px; font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.mline { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; font-size: 13px; }
.mline.sub { padding-left: 12px; color: var(--muted); font-size: 12px; }
/* Baris total tiap blok; estimasi penghasilan ditonjolkan karena itu angka yang paling dicari. */
.mline.total { margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--line); font-weight: 600; }
.mblock.income .mline.total { font-size: 15px; color: var(--gold); }
.mblock.income .mline.total span:last-child { font-variant-numeric: tabular-nums; }
.mblock.income { border-color: var(--gold); background: var(--gold-soft); }

/* Sorotan sesaat untuk baris produk yang baru saja berpindah tab. */
@keyframes flashrow { from { background: var(--gold-soft); } to { background: transparent; } }
tr.flash td { animation: flashrow 3s ease-out; }

/* Tombol per produk induk: Edit dan Sinkron. */
.pactions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.pactions .btn { text-decoration: none; }
.pactions .btn svg { width: 14px; height: 14px; }
/* Tabel varian di dalam modal edit. */
.edit-variants { margin-top: 6px; }
.edit-variants th, .edit-variants td { padding: 8px 10px; }
.edit-variants input { width: 120px; }
#modal-edit .modal-foot .btn.hidden { display: none; }

/* Kolom aksi per varian: Simpan + tautan edit ke halaman asli channel. */
.acell { white-space: nowrap; }
.acell .btn + .btn { margin-left: 6px; }
.acell .edit-link { margin-top: 0; }
.vname { font-weight: 500; }
.clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.thumb { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; background: var(--panel-2); display: block; }

/* ---------- Chips / status ---------- */
/* Warna bawaan supaya channel yang belum punya adapter (mis. tokopedia di tabel biaya) tetap terbaca. */
.chip { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600;
  background: var(--panel-2); color: var(--muted); border: 1px solid var(--line); white-space: nowrap; }
.chip.woo { background: var(--woo); color: #fff; border-color: transparent; }
.chip.toco { background: var(--toco); color: #15120a; border-color: transparent; }
.chip.shopee { background: var(--shopee); color: #fff; border-color: transparent; }
.st { display: inline-block; padding: 3px 9px; border-radius: 8px; font-size: 12px; font-weight: 600; background: var(--panel-2); color: var(--muted); }
.st.new { background: rgba(106, 179, 245, 0.16); color: var(--blue); }
.st.processing { background: var(--gold-soft); color: var(--gold); }
.st.pending { background: rgba(230, 184, 76, 0.1); color: #c99a3a; }
.st.shipped { background: rgba(142, 124, 242, 0.16); color: var(--purple); }
.st.done { background: rgba(126, 211, 155, 0.16); color: var(--green); }
.st.cancelled { background: rgba(240, 112, 112, 0.14); color: var(--red); }
.badge { background: var(--pink); color: #15120a; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 1px 7px; }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 8px; }
.dot.ok { background: var(--green); } .dot.error { background: var(--red); } .dot.unconfigured { background: var(--gold); }
.dot.syncing { background: var(--blue); animation: pulse 1s infinite; } .dot.idle { background: var(--muted); }
@keyframes pulse { 50% { opacity: 0.3; } }

/* ---------- Channel ---------- */
.ch-card { display: flex; flex-direction: column; gap: 6px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.ch-card:last-child { border-bottom: 0; padding-bottom: 0; }
.ch-card .top { display: flex; justify-content: space-between; align-items: center; font-weight: 600; }
/* Nama toko yang sedang tersambung: yang paling sering ingin dipastikan sekilas. */
.ch-card .chtoko { font-size: 12px; color: var(--text); display: flex; flex-wrap: wrap;
  gap: 5px; align-items: baseline; }
.ch-card .msg { font-size: 12px; color: var(--muted); word-break: break-word; }
.ch-detail { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; }
.ch-detail .top { display: flex; justify-content: space-between; align-items: center; }
/* Angka besarnya dikelompokkan (Pesanan / Chat) karena "diproses" dan "belum dibaca"
   tidak berbicara sendiri tanpa tahu benda apa yang dihitung. */
.ch-detail .nums { display: flex; flex-wrap: wrap; gap: 12px 30px; margin: 14px 0; }
.ch-detail .numgrup { display: flex; flex-wrap: wrap; gap: 4px 20px; align-items: baseline; }
.ch-detail .numjudul { flex-basis: 100%; font-size: 10.5px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); opacity: .8; }
.ch-detail .nums div { font-size: 12px; color: var(--muted); }
.ch-detail .nums b { display: block; font-size: 20px; font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--text); }
/* Nol berarti tidak ada yang perlu dikerjakan, jadi dibuat kalem; sisanya menonjol. */
.ch-detail .nums b.nol { color: var(--muted); opacity: .55; }
.ch-detail .nums b.perlu { color: var(--gold); }

/* ---------- Chat ---------- */
/* Kolom ketiga (panel kirim produk/pesanan) memakai lebar `auto` supaya menghilang
   sepenuhnya saat panelnya disembunyikan untuk channel yang belum mendukungnya. */
.chat-layout { display: grid; grid-template-columns: 360px minmax(0, 1fr) auto; gap: 16px; align-items: start; }
@media (max-width: 1280px) { .chat-layout { grid-template-columns: 320px minmax(0, 1fr); } .chat-side { grid-column: 1 / -1; width: auto; } }
@media (max-width: 1000px) { .chat-layout { grid-template-columns: 1fr; } }
.chat-rooms { max-height: calc(100vh - 170px); overflow-y: auto; overflow-x: hidden; padding: 8px 10px; }
.list .item { display: grid; grid-template-columns: 62px minmax(0, 1fr) auto; gap: 10px; padding: 11px 10px; border-radius: 12px; align-items: center; min-width: 0; }
.list .item > div { min-width: 0; }
.list .item > div > b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list .item > .small { white-space: nowrap; }
.list .item .chip { padding: 3px 8px; font-size: 11px; }
.list .msg { color: var(--muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list .item.room { cursor: pointer; }
.list .item.room:hover { background: var(--panel-2); }
.list .item.room.active { background: var(--gold-soft); }
.chat-pane { display: flex; flex-direction: column; min-height: 420px; height: calc(100vh - 170px); padding: 0; overflow: hidden; }
.chat-empty { margin: auto; }
.chat-head { padding: 14px 18px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 10px; }
.chat-head .btn { margin-left: auto; }
.chat-messages { flex: 1; overflow: auto; padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; }
.bubble { max-width: 70%; padding: 9px 13px; border-radius: 16px; background: var(--panel-2); font-size: 13.5px; }
.bubble.me { align-self: flex-end; background: var(--gold); color: var(--gold-ink); border-bottom-right-radius: 5px; }
.bubble.them { align-self: flex-start; border-bottom-left-radius: 5px; }
.bubble .txt { white-space: pre-wrap; word-break: break-word; }
.bubble .meta { font-size: 11px; opacity: 0.65; margin-top: 3px; text-align: right; }
.bubble .att { display: flex; gap: 8px; align-items: center; background: rgba(0,0,0,0.18); border-radius: 10px; padding: 6px 8px; margin-bottom: 6px; }
.bubble.them .att { background: var(--bg-2); }
.bubble .att img, .bubble .att .pimg { width: 44px; height: 44px; border-radius: 8px; object-fit: cover;
  flex: none; display: block; background: var(--bg-2); }
/* Kartu produk & pesanan di dalam percakapan, mengikuti tampilan Shopee. */
/* Kartu butuh ruang lebih lega daripada gelembung teks biasa. */
.bubble:has(.att) { max-width: min(380px, 85%); }
.bubble .att { flex-direction: column; align-items: stretch; min-width: 240px; }
.bubble .card-produk { flex-direction: row; align-items: center; }
.bubble .attteks { min-width: 0; }
.bubble .att .pname { font-size: 12px; font-weight: 600; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bubble .attharga { font-size: 12px; margin-top: 2px; }
.bubble .ohead { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  opacity: .7; margin-bottom: 6px; }
.bubble .orow { display: flex; gap: 8px; align-items: center; padding-bottom: 6px;
  border-bottom: 1px solid rgba(0,0,0,.12); margin-bottom: 6px; }
.bubble .ostatus { font-size: 12px; font-weight: 600; margin: 2px 0; }
.bubble .oline { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; padding: 1px 0; }
.bubble.them .orow { border-bottom-color: var(--line); }
/* Di gelembung emas, teks redup bawaan terlalu tipis — dibuat mengikuti warna tulisannya. */
.bubble.me .att .muted, .bubble.me .att .ohead { color: inherit; opacity: .72; }
.bubble .img { max-width: 220px; border-radius: 10px; display: block; margin-bottom: 4px; }
.chat-reply { display: flex; gap: 10px; padding: 12px 14px; border-top: 1px solid var(--line); }
.chat-reply textarea { flex: 1; resize: none; }

/* ---------- Chart ---------- */
.chart { height: 230px; }
.chart svg { width: 100%; height: 100%; display: block; stroke: none; }
.legend { display: flex; gap: 16px; margin-top: 10px; font-size: 12px; color: var(--muted); }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }

/* ---------- Modal / form ---------- */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,0.6); display: grid; place-items: center; padding: 20px; z-index: 50; backdrop-filter: blur(2px); }
.modal-box { background: var(--panel); border: 1px solid var(--line); border-radius: 20px; width: min(820px, 100%); max-height: 92vh; overflow: auto; box-shadow: var(--shadow); }
.modal-head { display: flex; justify-content: space-between; align-items: flex-start; padding: 20px 24px 10px; }
.form { padding: 6px 24px 20px; display: flex; flex-direction: column; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field > label { font-size: 12.5px; color: var(--muted); font-weight: 500; }
.field input, .field select, .field textarea { width: 100%; min-width: 0; }
.row-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 700px) { .row-3 { grid-template-columns: 1fr; } }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chips label { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; background: var(--bg-2); }
.chips label:has(input:checked) { border-color: var(--gold); background: var(--gold-soft); }
.chips label.disabled { opacity: 0.5; cursor: not-allowed; }
.chips input { min-width: 0; width: 16px; height: 16px; accent-color: var(--gold); margin: 0; }
.dropzone { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px dashed var(--line); border-radius: 12px; color: var(--muted); cursor: pointer; background: var(--bg-2); }
.dropzone:hover { border-color: var(--gold); color: var(--text); }
.previews { display: flex; gap: 8px; flex-wrap: wrap; }
.previews img { width: 72px; height: 72px; border-radius: 10px; object-fit: cover; border: 1px solid var(--line); }
.modal-foot { display: flex; align-items: center; gap: 10px; justify-content: flex-end; padding-top: 6px; border-top: 1px solid var(--line); }
.modal-foot .small { margin-right: auto; }
.result-list { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }

.toast { position: fixed; bottom: 22px; right: 22px; background: var(--text); color: var(--bg); padding: 11px 16px; border-radius: 12px; font-weight: 500; z-index: 60; box-shadow: var(--shadow); max-width: 420px; }
.toast.err { background: var(--red); color: #fff; }

/* ---------- Daftar toko di halaman Channel ---------- */
.toko-status { margin-bottom: 12px; padding: 10px 14px; border: 1px solid var(--line);
  border-radius: 10px; background: var(--bg-2); font-size: 13px; }
.tokobox { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.tokohead { text-transform: uppercase; letter-spacing: .04em; }
.tokorow { display: flex; align-items: center; gap: 8px; width: 100%; }
.tokorow .tokoteks { flex: 1; min-width: 0; }
.tokorow .tokoteks b { display: block; font-size: 13px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.tokoaksi { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
/* Tombol milik satu toko dikelompokkan, supaya Sinkron dan Lepas tidak saling berjauhan. */
.tokorow .tokotombol { display: flex; gap: 6px; flex: none; }
.tokorow .tokotombol .btn { white-space: nowrap; }

/* Rincian satu toko: label kiri, angkanya mengalir di kanan. */
.tokorinci { display: grid; gap: 3px; margin: 2px 0 10px 20px; font-size: 11.5px; }
.trbaris { display: flex; gap: 8px; align-items: baseline; }
.trlabel { color: var(--muted); width: 54px; flex: none; }
.trisi { color: var(--muted); display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; min-width: 0; }
.trisi b { color: var(--text); font-variant-numeric: tabular-nums; }
.trisi .perlu b { color: var(--gold); }
.trsep { opacity: .45; }
#cookie-text { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 12px; line-height: 1.5; }
/* Pesan galat bisa panjang; tombolnya tidak boleh ikut terjepit. */
#cookie-status { color: var(--red); max-width: 60%; }
#modal-cookie .modal-foot .btn { white-space: nowrap; }

/* Penanda "belum dibalas" di daftar chat: ikut baris nama toko supaya nama pembeli tidak terpotong. */
/* Baris nama toko di daftar chat boleh melipat, supaya penanda "belum dibalas" tidak terpotong. */
/* Baris chat: chip pindah ke baris keterangan, bukan kolom tetap di kiri.
   Di kolom selebar 62px, chip "WooCommerce" meluber menimpa nama tokonya. */
#chat-list .item { grid-template-columns: minmax(0, 1fr) auto; }
.room .sname { display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  max-width: none; white-space: normal; margin: 2px 0; }
.room .sname .chip { flex: none; }
.room .sname .stoko { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.room .sname .wait { color: var(--gold); font-weight: 600; white-space: nowrap; }

/* ---------- Halaman edit produk toco ---------- */
/* Pilihan tunggal bergaya kartu, meniru "Pasarkan Produk" dan "Kondisi Produk" di toco. */
.radiorow { display: flex; flex-wrap: wrap; gap: 10px; }
.radiobox { display: flex; align-items: flex-start; gap: 10px; flex: 1 1 260px; cursor: pointer;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.radiobox:has(input:checked) { border-color: var(--gold); background: var(--gold-soft); }
/* Halaman edit memberi lebar penuh ke semua input; radio harus dikecualikan supaya
   lingkarannya tidak melar dan labelnya tidak terdorong ke ujung kanan. */
.radiobox input[type="radio"] { width: auto; min-width: 0; flex: none; margin: 3px 0 0; accent-color: var(--gold); }
.radiobox > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
/* Tabel varian: lebar kolom dipatok supaya tiap baris sejajar dan satuannya tidak melipat. */
.vartable { table-layout: fixed; width: 100%; }
.vartable th, .vartable td { padding: 10px 8px; vertical-align: middle; }
.vartable th.num, .vartable td.num { text-align: right; }
.vartable th.mid, .vartable td.mid { text-align: center; }
.vartable .c-nama { width: 17%; }
.vartable .c-harga { width: 15%; }
.vartable .c-diskon { width: 11%; }
.vartable .c-setelah { width: 13%; }
.vartable .c-berat { width: 12%; }
.vartable .c-stok { width: 10%; }
.vartable .c-sku { width: 14%; }
.vartable .c-status { width: 8%; }
.vartable .vname { line-height: 1.35; }
/* Tabel varian WooCommerce punya kolom sendiri (tanpa "setelah diskon", pakai SKU dan
   stok), jadi lebar dan perataannya diatur terpisah - kalau menumpang aturan tabel toco,
   judul kolomnya berdiri di atas kolom yang salah. */
.vartable.woovar .c-nama { width: 28%; }
.vartable.woovar .c-harga { width: 14%; }
.vartable.woovar .c-diskon { width: 14%; }
.vartable.woovar .c-stok { width: 11%; }
.vartable.woovar .c-sku { width: 16%; }
.vartable.woovar .c-berat { width: 10%; }
.vartable.woovar .c-status { width: 7%; }
/* Harga, diskon, stok, dan berat dibaca sebagai angka: judulnya ikut rata kanan seperti
   isinya. SKU teks biasa, jadi rata kiri. */
.vartable.woovar th:nth-child(4), .vartable.woovar th:nth-child(6) { text-align: right; }
.vartable.woovar th:nth-child(5) { text-align: left; }
.vartable.woovar .v-weight { text-align: right; }
.vthumb { width: 26px; height: 26px; border-radius: 6px; object-fit: cover;
  margin-right: 8px; vertical-align: middle; border: 1px solid var(--line); }
/* Varian yang stoknya belum dihitung WooCommerce. Ditandai lewat warna angkanya saja -
   catatan berulang di tiap baris membuat tabelnya dua kali lebih tinggi tanpa menambah
   satu pun keterangan baru; penjelasannya cukup sekali di bawah tabel. */
.vartable .v-stock.takhitung { color: var(--muted); font-style: italic; }

/* Daftar kategori WooCommerce: satu produk boleh masuk beberapa kategori sekaligus,
   jadi bentuknya daftar centang bertingkat, bukan dropdown berjenjang seperti toco. */
/* Halaman produk WooCommerce (tambah & edit).
   `.card.rapi > * + *` hanya mengenai ANAK LANGSUNG kartu, sedangkan baris isian di sini
   dibungkus lagi (#novariant) atau berpasangan (dua .row-2 berturut-turut) - jadi tanpa
   aturan ini barisnya saling menempel dan nama kolom hampir menyentuh kotak di atasnya. */
.woopage #novariant > * + *,
.woopage .card.rapi > .row-2 + .row-2 { margin-top: 14px; }
/* SKU butuh ruang, jumlah stok tidak: kolomnya dibagi menurut isinya, bukan rata tiga. */
.woopage .row-jual { display: grid; grid-template-columns: 1.6fr 0.9fr 1.3fr; gap: 12px; }
@media (max-width: 860px) { .woopage .row-jual { grid-template-columns: 1fr; } }
/* Keterangan di sebelah nama kolom dipisah titik supaya tidak terbaca menyambung. */
.woopage .field label .hint::before { content: '\00b7'; margin: 0 5px 0 2px; opacity: .6; }

/* Sakelar kecil "Teks biasa / HTML" di sebelah label deskripsi. */
.modesw { display: inline-flex; gap: 2px; margin-left: 8px; vertical-align: middle; }
.modesw .fchip { padding: 2px 9px; font-size: 11.5px; border-radius: 8px; }
.modesw .fchip:disabled { opacity: .4; cursor: not-allowed; }

.katbox { max-height: 280px; overflow-y: auto; background: var(--panel-2);
  border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 5px 0; }
.katrow { display: flex; gap: 9px; align-items: center; padding: 5px 12px;
  font-size: 13px; cursor: pointer; }
.katrow:hover { background: var(--gold-soft); }
/* min-width bawaan kolom isian 160px; tanpa dikecilkan, kotak centangnya mendorong
   nama kategori keluar dari kotak. */
.katrow input[type="checkbox"] { flex: none; width: 16px; min-width: 16px; height: 16px;
  accent-color: var(--gold); margin: 0; }
/* Penanda "Utama" turun ke barisnya sendiri supaya nama varian tetap terbaca utuh. */
.vartable .vname .badge { display: table; margin-top: 4px; }
/* Lencana "Utama" bukan hitungan pesan: dibuat tenang, mengikuti aksen emas dashboard. */
.badge.utama { background: var(--gold-soft); color: var(--gold); border: 1px solid var(--gold);
  font-size: 10px; font-weight: 600; letter-spacing: .03em; padding: 1px 8px; min-width: 0; }
/* Isi kartu halaman edit/tambah toco diberi jarak tetap antar kelompok isian. */
.card.rapi > * + * { margin-top: 14px; }
.card.rapi > .subsection + * { margin-top: 10px; }
.card.rapi .row-2, .card.rapi .row-3 { margin: 0; }
/* Kepala kolom angka ikut rata kanan, sejajar dengan isinya. */
.vartable th:nth-child(2), .vartable th:nth-child(3),
.vartable th:nth-child(5), .vartable th:nth-child(6) { text-align: right; }
/* Satuan ikut di dalam kotak isian, bukan teks lepas di sebelahnya. */
.vartable .vnum { display: flex; align-items: center; gap: 0; background-color: var(--panel);
  border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0 10px; }
.vartable .vnum:focus-within { border-color: var(--gold); }
.vartable .vnum input { border: none; background: none; padding: 8px 0; text-align: right; }
.vartable .vnum input:focus { outline: none; }
.vartable .vpre, .vartable .vunit { color: var(--muted); font-size: 12px; flex: none; }
.vartable .vpre { margin-right: 6px; }
.vartable .vunit { margin-left: 6px; }
.vartable input { width: 100%; min-width: 0; }
.vartable .v-stock { text-align: right; }
/* Kotak angka bersatuan juga dipakai di luar tabel (bagian produk tanpa varian). */
.vnum { display: flex; align-items: center; background-color: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 0 10px; }
.vnum.wide { width: 100%; }
.vnum input { border: none; background: none; padding: 9px 0; width: 100%; min-width: 0; }
.vnum input:focus { outline: none; }
.vnum:focus-within { border-color: var(--gold); }
.vnum .vpre { margin-right: 6px; }
.vnum .vunit { margin-left: 6px; }
.vnum .vpre, .vnum .vunit { color: var(--muted); font-size: 12px; flex: none; }
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
/* Penyusun tipe varian: saran tipe + daftar nilai berbentuk chip. */
.tipevarian { background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 14px; margin-bottom: 10px; display: grid; gap: 10px; }
.tipevarian .trow { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.tipevarian .trow input { flex: 1 1 180px; min-width: 0; }
.tipevarian .saran { display: flex; gap: 6px; flex-wrap: wrap; }
.tipevarian .saran button { background: var(--panel-2); border: 1px solid var(--line); color: var(--muted);
  border-radius: 999px; padding: 3px 10px; font-size: 12px; cursor: pointer; }
.tipevarian .saran button:hover { border-color: var(--gold); color: var(--gold); }
.tipevarian .nilai { display: flex; gap: 6px; flex-wrap: wrap; }
.tipevarian .vchip { display: inline-flex; align-items: center; gap: 6px; background: var(--gold-soft);
  border: 1px solid var(--gold); color: var(--text); border-radius: 999px; padding: 3px 6px 3px 11px; font-size: 12px; }
.tipevarian .vchip button { background: none; border: none; color: var(--muted); cursor: pointer;
  font-size: 13px; line-height: 1; padding: 0 2px; }
.tipevarian .vchip button:hover { color: var(--red); }
.switchbox.disabled { opacity: .55; }
.switchbox + .switchbox { margin-top: 10px; }
.savefoot { position: sticky; bottom: 0; background: var(--bg); padding: 14px 0 4px; z-index: 5; }
#p-variants input { background-color: var(--panel); }

/* SKU di daftar produk: teks biasa dengan tombol pensil, berubah jadi kotak isian saat ditekan. */
.skurow { display: flex; align-items: center; gap: 6px; min-height: 24px; }
.skurow .skuteks { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.skurow .skuteks.kosong { color: #6b6d77; font-style: italic; }
/* Pensilnya samar sampai barisnya disorot, supaya tabel tidak ramai. */
.skurow .skuedit { width: 22px; height: 22px; flex: none; padding: 0; display: grid; place-items: center;
  opacity: 0; transition: opacity .12s; }
.skurow .skuedit svg { width: 13px; height: 13px; }
tr:hover .skurow .skuedit, .skurow .skuedit:focus-visible { opacity: 1; }
.skurow.editing { gap: 6px; flex-wrap: wrap; }
.skurow input.sku { flex: 1 1 130px; min-width: 0; max-width: 200px; font-size: 12px;
  padding: 4px 8px; background-color: var(--panel); border: 1px solid var(--gold); border-radius: 8px; }
.skurow input.sku:focus { outline: none; }
.skurow .btn.sm { padding: 3px 10px; font-size: 11px; }
.skurow.sibuk { opacity: .6; }

/* ---------- Pergudangan ---------- */
.notice { background: var(--bg-2); border: 1px solid var(--line); border-left: 3px solid var(--gold);
  border-radius: 10px; padding: 10px 14px; margin-bottom: 14px; font-size: 13px; color: var(--muted); }
#gudang-table .skukode { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 13px; }
/* Kolom produk dibatasi supaya kolom Total dan tombol Samakan tetap terlihat tanpa menggeser tabel. */
#gudang-table .pcell { width: 32%; }
#gudang-table .pname { font-size: 13px; font-weight: 500; max-width: 290px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.stoklist { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.stokchip { display: inline-flex; align-items: center; gap: 6px; background: var(--bg-2);
  border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px 3px 5px; font-size: 12px; }
.stokchip.beda { border-color: var(--red); }
.stokchip .sname { color: var(--muted); max-width: 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stokchip b { font-variant-numeric: tabular-nums; }

/* Kotak stok gudang: satu angka yang diikuti semua toko. */
#gudang-table .gstok { width: 72px; text-align: right; background-color: var(--panel); }
/* Kolom stok gudang hanya perlu selebar kotaknya; sisanya diberikan ke kolom produk. */
#gudang-table thead th:nth-child(5), #gudang-table tbody td:nth-child(5) { width: 104px; }
/* Kartu biaya channel. */
.biayaform { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }
.biayaform select, .biayaform input { background-color: var(--panel); }
.biayaform #b-name { flex: 1 1 200px; min-width: 0; }
.biayaform #b-value { width: 110px; }
.biayaform #b-max { width: 150px; }
/* Setelan target untung & jenis seller per channel. */
.setelanlist { display: grid; gap: 8px; }
.setelanbaris { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; }
.setelanbaris label { display: flex; align-items: center; gap: 6px; }
.setelanbaris .vnum { width: 96px; }
.setelanbaris .s-profit { text-align: right; }
.setelanbaris select { background-color: var(--panel); }

/* ---------- Halaman kalkulator produk ---------- */
/* Kartu angka kunci di atas, lalu form simulasi, lalu satu blok hasil per toko. */
.edit-main.calc { max-width: 1180px; }
.prodcard { display: grid; gap: 16px; }
.prodtop { display: flex; gap: 14px; align-items: center; }
.prodcard .pfoto { width: 88px; height: 88px; flex: none; border-radius: var(--radius-sm); overflow: hidden;
  background: var(--bg-2); border: 1px solid var(--line); display: grid; place-items: center; }
/* contain, bukan cover: foto produk ditampilkan utuh walau sisi-sisinya jadi kosong. */
.prodcard .pfoto img { width: 100%; height: 100%; object-fit: contain; }
.prodcard .pfoto svg { width: 24px; height: 24px; fill: none; stroke: var(--muted); stroke-width: 1.6; }
/* `.pinfo` global menata foto + teks berdampingan; di kartu ini fotonya sudah di luar,
   jadi judul dan deretan chip ditumpuk - bukan berdesakan di satu baris. */
.prodcard .pinfo { display: block; min-width: 0; }
.prodcard .pinfo h2 { margin: 0 0 8px; font-size: 16px; line-height: 1.35; }
/* Deretan chip toko: satu tinggi, satu jarak, dan nama toko yang panjang dipotong rapi
   - tanpa ini chip "WooCommerce · ACE SHOP.STORE" jatuh sendirian ke baris berikutnya. */
.prodcard .pmeta { gap: 6px; row-gap: 6px; }
/* Chip-nya dibungkus satu span oleh skripnya; `contents` membuat tiap chip jadi anak
   langsung baris ini, jadi membungkusnya per chip - bukan serombongan sekaligus. */
.prodcard .pmeta #k-chips { display: contents; }
.prodcard .pmeta .chip, .prodcard .skukode { display: inline-flex; align-items: center; height: 24px;
  max-width: 230px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prodcard .skukode { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 12.5px;
  color: var(--gold); background: var(--gold-soft); padding: 2px 8px; border-radius: 6px; }
.pangka { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.pbox { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 10px 12px; display: grid; gap: 4px; min-width: 0; }
.pbox b { font-size: 15px; font-variant-numeric: tabular-nums; }
.pbox b.untung { color: var(--green); }
.pbox b.rugi { color: var(--red); }
.row-3.trio { align-items: end; }
.calc .chips label span { font-size: 13px; }
/* Baris atas form simulasi: nama barang lebar, jumlah sempit, kategori sedang.
   Keterangannya sengaja tidak di dalam kolom supaya tingginya tidak ikut tertarik. */
.simhead { display: grid; grid-template-columns: minmax(0, 1fr) 110px minmax(0, 300px); gap: 12px;
  align-items: end; }
.simhead .field { margin: 0; }
.simhead #f-nama { color: var(--muted); }
/* Label, pilihan, dan keterangannya sebaris supaya tidak memakan tiga baris sendiri. */
.simbasis { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.simbasis .chips label { padding: 6px 12px; }
.simbasis .muted { flex: 1 1 260px; min-width: 0; }
/* Kolom trio yang sedang DICARI: diberi aksen emas supaya "isi dua dari tiga" terlihat. */
.trio .field .tanda { color: var(--gold); font-weight: 600; font-size: 11px; }
.trio .field.dicari .vnum { border-color: var(--gold); background-color: var(--gold-soft); }
.trio .field.dicari input::placeholder { color: var(--gold); opacity: .85; font-style: italic; }
/* Baris SRP: tiap kotak punya labelnya sendiri, jadi tingginya disamakan dari bawah. */
.srprow { align-items: end; }
.srprow .field { margin: 0; }
/* Jenis seller per toko: combo sempit di kepala blok hasil. */
.ktier { width: 150px; }
.ktier .combo-input { padding: 5px 30px 5px 10px; font-size: 12px; min-width: 0; border-radius: 8px; }
.ktier .combo-arrow { right: 4px; }
.ktier .combo-ok { display: none !important; }

.hasillist { display: grid; gap: 10px; }
.hasilblok { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; }
.hbhead { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.hbtoko { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 150px; }
.hbangka { display: flex; gap: 18px; flex-wrap: wrap; justify-content: flex-end; }
.hbnum { display: grid; gap: 2px; justify-items: flex-end; }
.hbnum b { font-size: 15px; font-variant-numeric: tabular-nums; }
.hbnum b.untung { color: var(--green); }
.hbnum b.rugi { color: var(--red); }
/* Harga yang memenuhi target di toko ini, saat halaman sedang menghitung untung. */
.hbsaran { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px;
  padding: 8px 10px; border-radius: 8px; background: var(--gold-soft); font-size: 12.5px; }
.hbsaran b { font-variant-numeric: tabular-nums; }
.hbsaran .pakaisaran { margin-left: auto; background: none; border: 1px dashed var(--gold);
  color: var(--gold); border-radius: 8px; padding: 3px 10px; font: inherit; font-size: 11.5px;
  cursor: pointer; white-space: nowrap; }
.hbsaran .pakaisaran:hover { background: var(--gold); color: var(--gold-ink); }
/* Penanda toko yang harganya disetel sendiri, lepas dari kolom harga jual bersama. */
.hbsendiri { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--gold);
  background: var(--gold-soft); border-radius: 999px; padding: 3px 6px 3px 10px; }
.hbsendiri .lepasharga { background: none; border: 0; color: inherit; font: inherit; font-size: 14px;
  line-height: 1; cursor: pointer; padding: 0 4px; opacity: .8; }
.hbsendiri .lepasharga:hover { opacity: 1; }
/* Tombol pasang untuk satu toko, duduk di baris kaki blok hasilnya. */
.hbkaki .pasangsatu { border-color: rgba(230, 184, 76, 0.45); color: var(--gold); }
.hbkaki .pasangsatu:hover { border-color: var(--gold); background: var(--gold-soft); }
.hbkaki { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 10px;
  padding-top: 10px; border-top: 1px solid var(--line); }
.kpctwrap { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.kpctwrap .vnum { width: 96px; }
.kpctwrap .kpct { min-width: 0; text-align: right; }
.hbtoggle { margin-left: auto; background: none; border: 1px solid var(--line); color: var(--muted);
  border-radius: 999px; padding: 5px 12px; font: inherit; font-size: 12px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; }
.hbtoggle:hover { border-color: var(--gold); color: var(--gold); }
.hbtoggle svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }
.hbbiaya { display: grid; gap: 2px; margin-top: 10px; }
.biayabaris { display: grid; grid-template-columns: 18px 1fr auto 120px; align-items: center; gap: 10px;
  padding: 6px 8px; border-radius: 8px; font-size: 13px; cursor: pointer; }
.biayabaris:hover { background: var(--panel); }
.biayabaris.mati { opacity: .5; }
/* min-width bawaan kolom isian 160px, jadi kotak centangnya harus ikut dikecilkan. */
.biayabaris input[type="checkbox"] { width: 16px; min-width: 16px; height: 16px;
  accent-color: var(--gold); margin: 0; }
.biayabaris .bnama { min-width: 0; }
.biayabaris .bnominal { text-align: right; font-variant-numeric: tabular-nums; }
.biayabaris.total { grid-template-columns: 18px 1fr auto 120px; cursor: default; font-weight: 600;
  border-top: 1px solid var(--line); border-radius: 0; margin-top: 4px; padding-top: 8px; }
.biayabaris.total .bnama { grid-column: 2 / 4; }
.calc .savefoot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
@media (max-width: 1040px) {
  /* Angka hasil pindah ke bawah nama toko, bukan berdesakan di sebelah kanannya. */
  .hbhead { flex-direction: column; }
  .hbangka { justify-content: flex-start; gap: 14px; }
  .hbnum { justify-items: flex-start; }
}
@media (max-width: 860px) {
  .pangka { grid-template-columns: repeat(2, 1fr); }
  .row-3.trio, .calc .row-2, .calc .row-3, .simhead, .srprow { grid-template-columns: 1fr; }
  .biayabaris { grid-template-columns: 18px 1fr 100px; }
  .biayabaris .btarif { grid-column: 2; font-size: 11px; }
  .biayabaris.total .bnama { grid-column: 2 / 3; }
}

/* Keterangan + sakelar sebaris di kepala kartu, memakai sakelar yang sama dengan Promosi. */
.switchrow { display: flex; align-items: center; gap: 10px; flex: none; }
/* Hasil uji koneksi: satu baris per bagian, supaya yang gagal tidak menenggelamkan yang berhasil. */
/* Keterangan sinkron gagal di baris toko: cukup terlihat, tidak berteriak. */
.tokogagal { color: var(--red); font-size: 11.5px; }
#apikey-status { display: grid; gap: 3px; text-align: left; }
/* Keterangan hasil uji bisa panjang; tombolnya jangan ikut terdesak jadi dua baris. */
#modal-apikey .modal-foot .btn { white-space: nowrap; }
#apikey-status div { line-height: 1.45; }

/* Catatan di bawah tab filter diberi jarak supaya tidak menempel pada tabnya. */
#gudang-note:not(:empty), #harga-note:not(:empty) { margin-top: 14px; }

/* ---------- Papan kartu Harga produk ---------- */
/* Halaman ini hanya MEMBACA: tidak ada kotak isian sama sekali, semua pengubahan
   dilakukan di halaman Hitung lewat tombol di kaki kartu. */
.prodgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; }
.empty-card { padding: 28px; text-align: center; color: var(--muted); }

.kartu { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px; display: flex; flex-direction: column; gap: 10px; position: relative; overflow: hidden; }
.kartu::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--gold); }
.kartu.rugi::before { background: var(--red); }
.kartu h3 { margin: 0; font-size: 14.5px; line-height: 1.35; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kfoto { aspect-ratio: 1 / 1; border-radius: var(--radius-sm); overflow: hidden; background: var(--bg-2);
  border: 1px solid var(--line); display: grid; place-items: center; margin-top: 4px; }
/* contain supaya tidak ada bagian foto yang terpotong, berapa pun perbandingan sisi aslinya. */
.kfoto img { width: 100%; height: 100%; object-fit: contain; }
.kfoto svg { width: 28px; height: 28px; fill: none; stroke: var(--muted); stroke-width: 1.5; }
.kmeta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.kmeta .skukode { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 12px;
  color: var(--gold); background: var(--gold-soft); padding: 2px 8px; border-radius: 6px; }

.kangka { margin: 0; display: grid; gap: 6px; padding: 10px 0; border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line); }
.kangka > div { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.kangka dt { color: var(--muted); font-size: 12.5px; white-space: nowrap; }
.kangka dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.kangka dd.small { font-weight: 400; font-size: 12px; color: var(--muted); max-width: 170px; }
.kangka a { color: var(--gold); text-decoration: none; }

.klist { display: grid; gap: 8px; }
.kbaris { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.kkiri { display: flex; align-items: center; gap: 8px; min-width: 0; }
.kdot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--muted); }
.kdot.shopee { background: var(--shopee); }
.kdot.toco { background: var(--toco); }
.kdot.woo { background: var(--woo); }
.kdot.tokopedia { background: var(--green); }
.kteks { min-width: 0; }
.knama { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; }
.kharga { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.kselisih { font-size: 11px; font-weight: 500; }
.kselisih.naik { color: var(--green); }
.kselisih.turun { color: var(--red); }
.kuntung { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kuntung.untung { color: var(--green); }
.kuntung.rugi { color: var(--red); }
.kcatat { border-top: 1px solid var(--line); padding-top: 8px; }
.kkaki { margin-top: auto; display: flex; gap: 8px; }
.khitung { flex: 1; justify-content: center; text-decoration: none; }
/* Di kartu tombolnya hanya ikon; di bilah atas kalkulator ia tombol biasa bertulisan. */
.kkaki .ksinkron { flex: none; padding: 0 12px; }
.ksinkron.sibuk { opacity: .6; pointer-events: none; }
.ksinkron.sibuk svg { animation: putar 1s linear infinite; }
@keyframes putar { to { transform: rotate(360deg); } }


/* ======================================================================
   Layar sempit (telepon & tablet tegak)
   ----------------------------------------------------------------------
   Tiga perubahan pokok, sisanya mengikuti:
   1. Sidebar jadi LACI yang ditarik dari kiri, dipicu bilah atas tetap.
      Sidebarnya elemen yang sama - tidak ada daftar menu kedua yang harus
      ikut diperbarui setiap kali menunya berubah.
   2. Tiap baris tabel digambar sebagai KARTU label-nilai. Nama kolomnya
      datang dari `data-l` yang dipasang labeliTabel() di app.js.
   3. Semua kolom berdampingan ditumpuk, dan apa pun yang tetap lebih lebar
      dari layar (deretan tab, tombol) digeser mendatar di tempatnya sendiri
      supaya halamannya tidak ikut bergeser.
   ====================================================================== */

/* Bilah atas, bilah tab bawah, dan laci hanya hidup di layar sempit. */
.mbar, .mtab, .scrim, .mback { display: none; }

@media (max-width: 760px) {
  :root { --mbar: 54px; --mtab: 62px; --gutter: 14px; }
  body { grid-template-columns: 1fr; }

  /* ---------- Rangka: bilah atas, laci, bilah tab bawah ---------- */
  .mbar {
    position: fixed; top: 0; left: 0; right: 0; z-index: 40; height: var(--mbar);
    display: flex; align-items: center; gap: 8px; padding: 0 10px;
    background: rgba(20, 20, 23, 0.94); backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line);
  }
  /* Judul halaman ada di bilah atas, jadi judul besar + keterangan di badan halaman
     tidak diulang - itu yang membuat tiap halaman mulai 90px lebih rendah dari perlunya. */
  .mtitle { flex: 1; text-align: center; font-weight: 600; font-size: 15.5px; letter-spacing: -0.01em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mbtn {
    font: inherit; display: grid; place-items: center; width: 36px; height: 36px; flex: none;
    border: 0; background: transparent; color: var(--text); border-radius: 10px; cursor: pointer;
  }
  .mbtn:active { background: var(--panel-2); }

  .scrim { display: block; position: fixed; inset: 0; z-index: 44; background: rgba(0, 0, 0, 0.55); }
  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 45; width: 272px; height: 100%;
    overflow-y: auto; transform: translateX(-100%); transition: transform .22s ease;
    box-shadow: var(--shadow); border-right: 0;
  }
  body.laci-buka .sidebar { transform: none; }
  body.laci-buka { overflow: hidden; }

  .mtab {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    display: grid; grid-template-columns: repeat(5, 1fr);
    height: calc(var(--mtab) + env(safe-area-inset-bottom, 0px));
    padding: 0 4px env(safe-area-inset-bottom, 0px);
    background: rgba(20, 20, 23, 0.96); backdrop-filter: blur(12px);
    border-top: 1px solid var(--line);
  }
  .mtab a, .mtab button {
    position: relative; font: inherit; font-size: 10.5px; font-weight: 500; letter-spacing: .01em;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    color: var(--muted); text-decoration: none; background: none; border: 0; cursor: pointer;
    padding: 6px 2px 4px; border-radius: 12px; min-width: 0;
  }
  .mtab svg { width: 22px; height: 22px; stroke-width: 1.7; }
  .mtab .on { color: var(--gold); }
  .mtab .on svg { stroke-width: 2.1; }
  .mtab .badge { position: absolute; top: 3px; left: calc(50% + 6px); font-size: 10px; padding: 0 5px; line-height: 16px; }

  main { padding: calc(var(--mbar) + 12px) var(--gutter) calc(var(--mtab) + 20px); }
  .topbar { flex-direction: column; align-items: stretch; gap: 0; margin-bottom: 12px; }
  .topbar > div:first-child { display: none; }
  .topbar:has(.topbar-actions:empty) { display: none; }
  /* Tombol aksi: satu baris pil yang digeser mendatar, tidak dipaksa turun satu per satu. */
  .topbar-actions { overflow-x: auto; gap: 8px; padding: 2px 0 4px; scrollbar-width: none; }
  .topbar-actions::-webkit-scrollbar { display: none; }
  .topbar-actions .btn { flex: none; padding: 8px 12px; font-size: 12.5px; border-radius: 999px; }

  /* ---------- Kartu & judul bagian ---------- */
  .card { padding: 14px; border-radius: 16px; margin-bottom: 12px; }
  .card-head { flex-direction: column; gap: 10px; margin-bottom: 12px; }
  h2 { font-size: 14.5px; }
  .grid-2, .grid-3, .row-2, .row-3, .row-jual { grid-template-columns: 1fr; }

  /* ---------- Ubin ringkasan ---------- */
  .tiles { grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
  .tile { padding: 12px 14px; border-radius: 16px; }
  .tile .l { font-size: 11.5px; margin-bottom: 4px; }
  .tile .v { font-size: 21px; }

  /* ---------- Penyaring: pencarian di atas, lalu dua baris chip yang digeser ---------- */
  /* Kartu penyaring dibongkar jadi elemen halaman biasa: kotak pencarian menonjol di
     atas, Platform dan Toko masing-masing satu baris chip yang digeser mendatar. Nama
     barisnya ("Platform", "Toko") tidak perlu - isi chipnya sudah menjelaskan dirinya. */
  .filter-card { background: none; border: 0; padding: 0; gap: 8px; margin-bottom: 10px; }
  .frow { display: block; }
  .frow:has(.search) { order: -1; margin-bottom: 4px; }
  .flabel { display: none; }
  .fchips { flex-wrap: nowrap; overflow-x: auto; gap: 6px; padding: 1px 0 3px; scrollbar-width: none;
    /* Chip terakhir bisa mentok ke tepi layar, jadi barisnya meluber sedikit ke gutter. */
    margin: 0 calc(-1 * var(--gutter)); padding-left: var(--gutter); padding-right: var(--gutter); }
  .fchips::-webkit-scrollbar { display: none; }
  .fchip { flex: none; white-space: nowrap; background: var(--panel); border-color: var(--line);
    border-radius: 999px; padding: 6px 12px; font-size: 12.5px; }
  .fchip.on { background: var(--gold-soft); border-color: rgba(230, 184, 76, 0.45); }
  .frow .search input { min-width: 0; width: 100%; border-radius: 12px; padding: 11px 12px 11px 38px;
    background: var(--panel); font-size: 14px; }
  .combo-urut { width: 100%; margin-top: 8px; }

  /* ---------- Tab status: pil yang digeser, bukan garis bawah ---------- */
  .tabs { border-bottom: 0; gap: 6px; margin: 0 0 10px; overflow-x: auto; scrollbar-width: none;
    margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter));
    padding: 0 var(--gutter) 2px; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { white-space: nowrap; border: 1px solid var(--line); border-radius: 999px; padding: 7px 13px;
    font-size: 12.5px; background: var(--panel); margin: 0; }
  .tab.on { background: var(--gold-soft); color: var(--gold); border-color: rgba(230, 184, 76, 0.45); font-weight: 600; }

  /* Kartu pembungkus tabel dibongkar: barisnya sendiri yang jadi kartu. */
  .card:has(> .table), .card.table-card { background: none; border: 0; padding: 0; }
  .card:has(> .table) > .card-head { padding: 0 2px; }

  /* ---------- Tabel umum jadi kartu label-nilai ---------- */
  .table { display: block; }
  .table thead { display: none; }
  .table tbody { display: block; }
  .table tbody tr { display: block; padding: 12px 14px; border-radius: 16px; margin-bottom: 10px;
    background: var(--panel); border: 1px solid var(--line); }
  .table tbody td { display: grid; grid-template-columns: minmax(78px, 34%) minmax(0, 1fr);
    gap: 10px; align-items: baseline; padding: 4px 0; border: 0; text-align: left; }
  .table tbody td::before { content: attr(data-l); color: var(--muted); font-size: 11.5px;
    grid-column: 1; grid-row: 1; }
  .table tbody td > * { grid-column: 2; }
  .table tbody td[data-l=""] { grid-template-columns: 1fr; }
  .table tbody td[data-l=""]::before { display: none; }
  .table tbody td.r { text-align: left; }
  .table tbody td:has(.pinfo) { grid-template-columns: 1fr; }
  .table tbody td:has(.pinfo) > * { grid-column: 1; }
  .table tbody td[colspan] { display: block; padding: 2px 0; }
  .table tbody td[colspan]::before { display: none; }
  .table tbody td[colspan] > * { grid-column: auto; }
  .table tbody tr.empty { background: none; border: 0; text-align: center; color: var(--muted); }
  .table tbody tr.empty td { display: block; }
  .table tbody tr.empty td::before { display: none; }
  .table .actrow { justify-content: flex-start; flex-wrap: wrap; }
  .table tbody td input, .table tbody td .vnum { width: 100%; min-width: 0; }

  /* ---------- Pesanan: kartu bergaya aplikasi, bukan daftar label-nilai ---------- */
  /* Delapan kolomnya disusun ulang jadi satu kartu yang dibaca sekali pandang:
       toko ................ tanggal
       nomor pesanan (tebal)
       pembeli
       status .............. total
       kurir · resi
     Nama kolom tidak diperlukan - tiap isinya sudah terbaca dari bentuknya. */
  #orders-table tbody tr.row {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; row-gap: 3px;
    grid-template-areas: "toko tgl" "no no" "buyer buyer" "status total" "ship ship" "pick pick";
    align-items: center;
  }
  #orders-table tbody tr.row td { display: block; padding: 0; }
  #orders-table tbody tr.row td::before { display: none; }
  #orders-table tbody tr.row td:nth-child(1) { grid-area: pick; }
  #orders-table tbody tr.row td:nth-child(1):empty { display: none; }
  #orders-table tbody tr.row td:nth-child(2) { grid-area: toko; }
  #orders-table tbody tr.row td:nth-child(3) { grid-area: no; font-size: 14px; margin-top: 4px; }
  #orders-table tbody tr.row td:nth-child(4) { grid-area: buyer; color: var(--muted); font-size: 13px; }
  #orders-table tbody tr.row td:nth-child(5) { grid-area: status; margin-top: 6px; }
  #orders-table tbody tr.row td:nth-child(5) .small { display: block; margin-top: 3px; }
  #orders-table tbody tr.row td:nth-child(6) { grid-area: ship; font-size: 12.5px; color: var(--muted);
    margin-top: 6px; padding-top: 8px; border-top: 1px dashed var(--line); }
  /* Pesanan tanpa kurir (batal, belum bayar) cuma berisi "-": barisnya tidak perlu ada. */
  #orders-table tbody tr.row td:nth-child(6):has(> span.muted:only-child) { display: none; }
  #orders-table tbody tr.row td:nth-child(6) > div { display: inline; }
  #orders-table tbody tr.row td:nth-child(6) > div + div::before { content: " · "; }
  #orders-table tbody tr.row td:nth-child(7) { grid-area: total; text-align: right; font-size: 15px; margin-top: 6px; }
  #orders-table tbody tr.row td:nth-child(8) { grid-area: tgl; text-align: right; font-size: 11.5px; white-space: nowrap; }
  /* Kolom toko: chip channel dan nama tokonya sebaris, diberi jarak. */
  #orders-table tbody tr.row .storecell { flex-direction: row; align-items: center; gap: 8px; }
  #orders-table tbody tr.row .sname { max-width: 55%; }
  /* Mode massal di layar sempit: tanpa kotak centang - kartunya sendiri yang diketuk. */
  /* Spesifisitasnya harus mengalahkan aturan desktop yang memunculkan kolom centang di
     mode memilih - di sini kartunya sendiri yang menyala. */
  #orders-table tbody tr.row td.pick, #view-pesanan.picking #orders-table tbody tr.row td.pick { display: none; }
  .listtools { display: flex; justify-content: flex-end; margin: -2px 0 10px; }
  /* Baris aksinya melayang di atas bilah tab, supaya tetap terjangkau setelah memilih
     banyak kartu jauh di bawah. */
  .bulkbar { position: fixed; left: 10px; right: 10px; z-index: 39; margin: 0;
    bottom: calc(var(--mtab) + 10px + env(safe-area-inset-bottom, 0px)); box-shadow: var(--shadow); }
  /* Rincian pesanan menempel pada kartunya. */
  .table tbody tr.detail { margin-top: -10px; border-top: 0; border-radius: 0 0 16px 16px; }
  .table tbody tr.detail td { padding: 10px 12px; border-radius: 10px; }
  .table tbody tr.row:has(+ tr.detail:not(.hidden)) { margin-bottom: 0; border-radius: 16px 16px 0 0; }
  .tline { grid-template-columns: 1fr; gap: 0; }
  .tline > :first-child { font-size: 11px; }
  .track { gap: 10px; }
  .mline { gap: 10px; align-items: baseline; }
  .mline > :last-child { white-space: nowrap; flex: none; }
  .mline.sub { padding-left: 10px; }

  /* ---------- Produk & Pergudangan: satu produk = satu kartu, variannya di dalam ---------- */
  /* Keduanya memakai rowspan, yang hilang begitu barisnya jadi blok. Baris-barisnya tidak
     bisa dibungkus, jadi kartunya dirangkai dari barisnya sendiri: baris produk membuka
     kartu (sudut atas), baris varian terakhir sebelum produk berikutnya menutupnya. */
  #products-table tbody tr, #gudang-table tbody tr {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px;
    margin: 0; padding: 10px 14px; border-radius: 0; border-top: 0; border-bottom: 0;
  }
  #products-table tbody tr.pgroup, #gudang-table tbody tr.pgroup {
    margin-top: 10px; padding-top: 14px; border-top: 1px solid var(--line);
    border-top-left-radius: 16px; border-top-right-radius: 16px;
  }
  #products-table tbody tr:has(+ tr.pgroup), #products-table tbody tr:last-child,
  #gudang-table tbody tr:has(+ tr.pgroup), #gudang-table tbody tr:last-child {
    padding-bottom: 14px; border-bottom: 1px solid var(--line);
    border-bottom-left-radius: 16px; border-bottom-right-radius: 16px;
  }
  /* Pemisah putus-putus antar varian di dalam satu kartu: digambar sebagai anak semu
     selebar baris, karena border-top baris itu sendiri sudah dipakai sudut kartunya. */
  #products-table tbody tr.vrow::before, #gudang-table tbody tr.vrow::before {
    content: ""; flex: 1 1 100%; height: 0; border-top: 1px dashed var(--line); margin: -2px 0 0;
  }
  #products-table tbody tr.pgroup td.pcell + td, #gudang-table tbody tr.pgroup td.pcell + td {
    border-top: 1px dashed var(--line); padding-top: 10px;
  }
  #products-table tbody td, #gudang-table tbody td { display: block; padding: 0; flex: 1 1 auto; min-width: 0; }
  #products-table tbody td::before, #gudang-table tbody td::before {
    content: attr(data-l); display: block; color: var(--muted); font-size: 11px; margin-bottom: 3px;
  }
  #products-table tbody td.pcell::before, #products-table tbody td.vcell::before,
  #products-table tbody td[data-l=""]::before,
  #gudang-table tbody td.pcell::before, #gudang-table tbody td[data-l=""]::before { display: none; }
  #products-table tbody td.pcell, #products-table tbody td.vcell { flex: 1 1 100%; }
  #gudang-table tbody td { flex: 1 1 100%; }
  #gudang-table tbody td:nth-last-child(2) { flex: 1 1 auto; }
  #gudang-table tbody td:last-child { flex: 0 0 auto; align-self: end; }
  #gudang-table .stoklist { justify-content: flex-start; }
  #products-table tbody td.r, #gudang-table tbody td.r { text-align: left; }
  #products-table tbody td:nth-last-child(3) { flex: 1 1 44%; }
  #products-table tbody td:nth-last-child(2) { flex: 1 1 26%; }
  #products-table tbody td:last-child { flex: 0 0 auto; align-self: end; }
  #products-table .pimg, #gudang-table .pimg { width: 60px; height: 60px; border-radius: 12px; }
  #products-table input, #gudang-table input { width: 100%; min-width: 0; }
  .pinfo { gap: 12px; }
  .pname { font-size: 13.5px; }
  .pactions { margin-top: 8px; gap: 6px; }
  .pactions .btn { padding: 6px 10px; font-size: 12px; border-radius: 999px; }
  .vcell { min-width: 0; }

  /* ---------- Chat: daftar, lalu percakapan memenuhi layar ---------- */
  .chat-layout { grid-template-columns: 1fr; gap: 0; }
  .chat-rooms { max-height: none; padding: 4px 0; background: none; border: 0; }
  .chat-rooms .list .item { padding: 11px 12px; border-radius: 14px; }
  #chat-list .item { grid-template-columns: minmax(0, 1fr); }
  .chat-side { width: auto; }
  /* Panel percakapan baru tampil setelah satu percakapan dipilih; sebelum itu daftarnya
     memakai seluruh layar, seperti aplikasi chat. */
  .chat-pane, .chat-side { display: none; }
  body.chat-terbuka .chat-pane {
    display: flex; position: fixed; inset: var(--mbar) 0 0 0; z-index: 41; margin: 0;
    height: auto; min-height: 0; border: 0; border-radius: 0; background: var(--bg);
  }
  body.chat-terbuka .mtab { display: none; }
  .chat-head { padding: 10px 12px; gap: 8px; }
  .chat-head b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mback { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border: 0;
    background: var(--panel); color: var(--text); border-radius: 10px; cursor: pointer; }
  .chat-messages { padding: 12px 12px; }
  .chat-reply { padding: 10px 10px calc(10px + env(safe-area-inset-bottom, 0px)); }
  .chat-reply .btn { padding: 9px 12px; }
  .chat-empty { padding: 40px 16px; }
  .list .item { grid-template-columns: 46px minmax(0, 1fr); }

  /* ---------- Channel ---------- */
  .tokorinci { margin-left: 0; }
  .trbaris { flex-direction: column; gap: 1px; }
  .trlabel { width: auto; font-size: 11px; }
  .tokorow { flex-wrap: wrap; }

  /* ---------- Harga produk ---------- */
  .prodgrid { grid-template-columns: 1fr; }

  /* ---------- Pengaturan ---------- */
  .setrow { flex-direction: column; align-items: stretch; gap: 8px; }
  .setrow .vnum, .setrow .combo-urut { width: 100%; }
  /* Jalur API di log memuat id panjang tanpa spasi (UUID toco, id produk Shopee); tanpa
     izin patah di tengah, satu baris saja sudah mendorong seluruh halaman melebar. */
  #log-aktivitas code { word-break: break-all; }
  .table tbody td { overflow-wrap: anywhere; }

  /* ---------- Promosi: segmen marketplace memadat, hitungan tokonya disembunyikan ---------- */
  .promo-pick { gap: 6px; margin-bottom: 12px; }
  .promo-pick .fchip { padding: 10px 6px; font-size: 13px; border-radius: 12px; gap: 6px; }
  .promo-pick .fchip .cnt { display: none; }
  .promo-pick-toko { margin-top: -4px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .promo-pick-toko::-webkit-scrollbar { display: none; }
  .promo-pick-toko .fchip { flex: none; padding: 7px 13px; font-size: 12.5px; }

  /* ---------- Dialog & pemberitahuan ---------- */
  .modal { padding: 0; place-items: end stretch; }
  .modal-box { width: 100%; max-height: 92vh; border-radius: 20px 20px 0 0; }
  .modal-head, .modal-body, .modal-foot { padding-left: 16px; padding-right: 16px; }
  .modal-foot { flex-wrap: wrap; }
  .toast { left: 12px; right: 12px; bottom: calc(var(--mtab) + 12px); max-width: none; }

  /* ---------- Halaman edit & tambah produk ---------- */
  .editbar-inner { padding: 8px 10px; gap: 8px; flex-wrap: wrap; }
  .edithead h1 { font-size: 15px; }
  .editbar .topbar-actions { width: 100%; overflow-x: auto; }
  .edit-main { padding: 12px 12px 28px; }
  .card.rapi { padding: 14px; }
  .photo { width: 88px; height: 88px; }
  .switchbox { padding: 10px 12px; gap: 10px; }
  .formfoot, .savefoot { flex-wrap: wrap; }
  .savefoot .btn { flex: 1 1 auto; justify-content: center; }
  .calc .savefoot { position: static; }
  .editpage .toast { bottom: 12px; }
  .vartable { table-layout: auto; }
  .vartable colgroup { display: none; }
  .vartable tbody td.vname { display: block; }
  .vartable tbody td.vname::before { display: block; margin-bottom: 2px; }
  .vartable tbody td.vname .badge { display: inline-block; margin: 4px 0 0; }
}

/* Telepon paling sempit: ubin kembali satu kolom supaya labelnya tidak terpotong. */
@media (max-width: 360px) {
  .tiles { grid-template-columns: 1fr; }
}