/* ===== Panel Admin - putih bersih ===== */
:root{--ac:#2f5bea;--ac-s:#eef2ff;--tx:#111827;--tx2:#4b5563;--mut:#8a93a6;--bd:#e9ebf0;--bd2:#f1f3f6;--bg:#f7f8fa;--ok:#16a34a;--warn:#d97706;--bad:#dc2626;--r:12px}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;font:14px/1.55 Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--tx);-webkit-font-smoothing:antialiased}
a{color:var(--ac);text-decoration:none}a:hover{text-decoration:underline}
h1{font-size:18px;margin:0;font-weight:700;letter-spacing:-.01em}
small{display:block;color:var(--mut);font-size:12px;font-weight:400}
code{background:#f3f4f7;border:1px solid var(--bd);padding:1px 6px;border-radius:6px;font-size:12.5px;word-break:break-all;color:#374151}
code.blk{display:block;padding:10px 12px;margin:8px 0}
.mut{color:var(--mut)}.lead{color:var(--tx2);margin:0 0 18px;max-width:780px}
.neg{color:var(--bad);font-weight:600}
.ai{width:18px;height:18px;flex:none}

/* Sidebar */
.side{position:fixed;inset:0 auto 0 0;width:256px;background:#fff;border-right:1px solid var(--bd);display:flex;flex-direction:column;z-index:40}
.brand{display:flex;align-items:center;gap:11px;padding:18px 20px;border-bottom:1px solid var(--bd2);color:var(--tx);text-decoration:none!important}
.brand b{display:block;font-size:15px;line-height:1.2;max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bm{width:36px;height:36px;border-radius:10px;background:var(--ac);color:#fff;display:grid;place-items:center;font-weight:700;overflow:hidden;flex:none}
.bm img{width:100%;height:100%;object-fit:contain;background:#fff}
.menu{flex:1;overflow-y:auto;padding:8px 12px 16px}
.mg{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:#a0a7b6;padding:16px 10px 6px}
.mi{display:flex;align-items:center;gap:11px;width:100%;text-align:left;color:var(--tx2);padding:8px 10px;border:0;border-radius:9px;background:none;font:inherit;font-weight:500;cursor:pointer;text-decoration:none!important;margin-bottom:1px}
.mi .ai{color:#9aa2b2}
.mi:hover{background:#f5f6f9;color:var(--tx)}
.mi.on{background:var(--ac-s);color:var(--ac);font-weight:600}.mi.on .ai{color:var(--ac)}
.side-foot{padding:10px 12px;border-top:1px solid var(--bd2)}
.mi.out{color:var(--bad)}.mi.out .ai{color:var(--bad)}
.scrim{display:none}

/* Topbar */
.main{margin-left:256px;min-height:100vh}
.top{display:flex;align-items:center;gap:14px;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--bd);padding:12px 28px;position:sticky;top:0;z-index:20;min-height:66px}
.ttl{flex:1;min-width:0}.ttl small{font-size:12px;margin-bottom:1px}
.burger{display:none;cursor:pointer;color:var(--tx2);padding:6px;border-radius:8px}
.btn-view .ai{width:16px;height:16px}
.who{width:36px;height:36px;border-radius:50%;background:var(--ac-s);color:var(--ac);display:grid;place-items:center;font-weight:700;flex:none}
.content{padding:26px 28px 56px;max-width:1280px}

/* Panel & form */
.panel{background:#fff;border:1px solid var(--bd);border-radius:var(--r);padding:22px;margin-bottom:20px;box-shadow:0 1px 2px rgba(16,24,40,.04)}
.panel>b:first-child{display:block;font-size:15px;margin-bottom:14px}
.ph-h{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.ph-h b{font-size:15px}
.note{background:#f8faff;border-color:#e0e7ff}.note ul{margin:8px 0 0;padding-left:18px;color:var(--tx2)}.note li{margin-bottom:6px}
.form{max-width:820px}
.form label{display:block;font-weight:600;font-size:13.5px;margin-bottom:16px;color:#1f2937}
.form input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=file]),.form select,.form textarea,.filter input,.filter select,.mini input,.box input{display:block;width:100%;margin-top:7px;font:inherit;font-weight:400;padding:10px 12px;border:1px solid #dcdfe6;border-radius:9px;background:#fff;color:var(--tx);outline:none;transition:border-color .15s,box-shadow .15s}
.form input[type=file]{display:block;margin-top:8px;font:inherit;font-weight:400;font-size:13px;color:var(--tx2)}
.form input[type=file]::file-selector-button{font:inherit;font-weight:600;border:1px solid #dcdfe6;background:#fff;border-radius:8px;padding:7px 12px;margin-right:10px;cursor:pointer}
.form input:focus,.form select:focus,.form textarea:focus,.filter input:focus,.box input:focus{border-color:var(--ac);box-shadow:0 0 0 3px rgba(47,91,234,.13)}
.form textarea{resize:vertical}.mono{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px}
.form small{margin-top:6px}
.chk{display:flex!important;align-items:center;gap:9px;font-weight:500!important;margin-bottom:8px!important}
.chk input{width:16px;height:16px;accent-color:var(--ac)}
.chkhint{margin:-4px 0 16px 25px}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:16px}.g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}
.acts{display:flex;gap:10px;margin-top:10px;flex-wrap:wrap}
.colorrow{display:flex;gap:10px;align-items:center;margin-top:7px}.colorrow input[type=color]{width:44px;height:42px;padding:3px;border:1px solid #dcdfe6;border-radius:9px;background:#fff;flex:none;cursor:pointer}
.colorrow input:not([type=color]){margin-top:0!important;max-width:220px}
.imgprev{display:flex;align-items:center;gap:14px;margin-top:8px}.imgprev img{max-height:72px;max-width:240px;border:1px solid var(--bd);border-radius:9px;padding:6px;background:repeating-conic-gradient(#f3f4f7 0 25%,#fff 0 50%) 0 0/14px 14px}

/* Tombol */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid var(--ac);background:var(--ac);color:#fff;font:inherit;font-weight:600;padding:9px 16px;border-radius:9px;cursor:pointer;text-decoration:none!important;white-space:nowrap;transition:background .15s,border-color .15s}
.btn:hover{background:#2449c9;border-color:#2449c9}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-o{background:#fff;color:#1f2937;border-color:#dcdfe6}.btn-o:hover{background:#f7f8fa;border-color:#c9cdd6}
.btn-d{background:#fff;color:var(--bad);border-color:#f5c2c2}.btn-d:hover{background:#fef2f2;border-color:#efa3a3}
.btn-s{padding:5px 11px;font-size:12.5px;border-radius:8px}

/* Tabel */
.tw{padding:0;overflow-x:auto}
table{width:100%;border-collapse:collapse;min-width:720px}
th{text-align:left;font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--mut);padding:12px 16px;border-bottom:1px solid var(--bd);background:#fbfbfd}
th:first-child{border-top-left-radius:var(--r)}th:last-child{border-top-right-radius:var(--r)}
td{padding:13px 16px;border-bottom:1px solid var(--bd2);vertical-align:top}
tbody tr:hover td{background:#fafbfd}
tr:last-child td{border-bottom:0}
.ra{text-align:right;white-space:nowrap}.ra form{display:inline-block;margin:0 0 4px 4px}
.emp{text-align:center;color:var(--mut);padding:36px}
.thumb{width:44px;height:44px;border-radius:10px;object-fit:cover;display:grid;place-items:center;border:1px solid var(--bd)}.ph{background:var(--ac-s);color:var(--ac);font-weight:700}
.bthumb{width:150px;aspect-ratio:2.8;object-fit:cover;border-radius:8px;border:1px solid var(--bd);display:block}
.tag{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;padding:3px 9px;border-radius:999px;white-space:nowrap;border:1px solid transparent}
.tag::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.tag.ok{background:#f0fdf4;color:#15803d;border-color:#dcfce7}.tag.warn{background:#fffbeb;color:#b45309;border-color:#fef3c7}.tag.bad{background:#fef2f2;color:#b91c1c;border-color:#fee2e2}.tag.info{background:#eff6ff;color:#1d4ed8;border-color:#dbeafe}.tag.mute{background:#f4f5f7;color:#6b7280;border-color:#eceef2}
.al{padding:12px 16px;border-radius:10px;margin-bottom:18px;border:1px solid;font-weight:500;background:#fff}
.al-ok{background:#f0fdf4;border-color:#bbf7d0;color:#166534}.al-bad{background:#fef2f2;border-color:#fecaca;color:#991b1b}.al-warn{background:#fffbeb;border-color:#fde68a;color:#92400e}
.filter{display:flex;gap:10px;margin-bottom:16px;flex-wrap:wrap}.filter input,.filter select{width:auto;margin:0;min-width:240px}
.mini{display:flex;gap:6px}.mini input{margin:0;padding:6px 9px;width:130px;border-radius:8px}
.pager{display:flex;gap:10px}

/* Dashboard */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(185px,1fr));gap:16px;margin-bottom:20px}
.stat{background:#fff;border:1px solid var(--bd);border-radius:var(--r);padding:18px;display:flex;gap:14px;align-items:flex-start;box-shadow:0 1px 2px rgba(16,24,40,.04)}
.si{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;flex:none;background:var(--ac-s);color:var(--ac)}
.si.g{background:#f0fdf4;color:#16a34a}.si.o{background:#fff7ed;color:#ea580c}.si.v{background:#f5f3ff;color:#7c3aed}
.stat span{color:var(--mut);font-size:12.5px;font-weight:500}.stat b{display:block;font-size:21px;margin:2px 0 1px;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.dgrid{display:grid;grid-template-columns:1.6fr 1fr;gap:20px;align-items:start}
.chart{position:relative}
.chart svg{display:block;width:100%;height:auto;overflow:visible}
.chart .gl{stroke:#eef0f4;stroke-width:1}.chart .ax{fill:#8a93a6;font-size:11px;font-family:inherit}
.chart .bar{fill:var(--ac);transition:opacity .15s}.chart .hit{fill:transparent;cursor:default}
.chart g.col:hover .bar{opacity:.8}
.tip{position:absolute;pointer-events:none;background:#111827;color:#fff;font-size:12px;padding:7px 10px;border-radius:8px;white-space:nowrap;transform:translate(-50%,-110%);opacity:0;transition:opacity .1s}
.tip b{display:block;font-size:13px}
.chk-list{list-style:none;padding:0;margin:0}.chk-list li{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--bd2)}.chk-list li:last-child{border:0}
.chk-list a{color:var(--tx);font-weight:600}.chk-list small{margin-left:auto}

/* Tema */
.themes{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin-bottom:16px}
.theme{cursor:pointer;border:1.5px solid var(--bd);border-radius:12px;padding:10px;margin:0!important;position:relative;font-weight:500!important;transition:border-color .15s}
.theme:hover{border-color:#c9cdd6}
.theme b{display:block;font-size:14px}
.theme input{position:absolute;opacity:0}
.theme:has(input:checked){border-color:var(--ac);box-shadow:0 0 0 3px rgba(47,91,234,.14)}
.tprev{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;height:104px;border-radius:8px;padding:30px 10px 10px;margin-bottom:10px;position:relative;overflow:hidden}
.tprev i{border-radius:6px}.tprev u{position:absolute;left:10px;top:10px;width:46%;height:10px;border-radius:5px}
.tp-neon{background:radial-gradient(120px 80px at 80% 0,#7c3aed,transparent),#090912}.tp-neon i{background:#1a1a30;border:1px solid #2c2c4a}.tp-neon u{background:linear-gradient(90deg,#fff,#22d3ee)}
.tp-clean{background:#f5f6fa}.tp-clean i{background:#fff;box-shadow:0 3px 8px rgba(20,28,60,.12)}.tp-clean u{background:#151826;left:27%}
.tp-glass{background:linear-gradient(135deg,#5b2bd6,#0d0b22 55%,#0e7490)}.tp-glass i{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);border-radius:10px}.tp-glass u{background:#fff}
.tp-retro{background:#fff6e5}.tp-retro i{background:#fff;border:2px solid #14131a;box-shadow:3px 3px 0 #14131a}.tp-retro u{background:#14131a;border-radius:0}
.tp-royal{background:#0b0b0d}.tp-royal i{background:#141417;border:1px solid #b89b5e;border-radius:1px}.tp-royal u{background:#b89b5e;height:3px;left:27%;top:14px}
.tp-store{background:#fff;border:1px solid var(--bd);padding-top:44px}.tp-store u{background:linear-gradient(90deg,#1d24a8,#3b46e0);width:auto;right:10px;height:26px;top:8px;border-radius:7px}.tp-store i{background:linear-gradient(160deg,#ffb36b,#ef3a4b);border-radius:8px;box-shadow:0 2px 6px rgba(0,0,0,.08)}
.faqrow{display:grid;grid-template-columns:1fr 1.6fr auto;gap:8px;align-items:start;margin-bottom:10px}
.faqrow input,.faqrow textarea{margin-top:0!important}

/* Login */
.login{display:grid;place-items:center;min-height:100vh;background:radial-gradient(800px 400px at 50% -10%,#e8edff,transparent),#f7f8fa}
.box{background:#fff;border:1px solid var(--bd);border-radius:16px;padding:32px;width:min(390px,92vw);box-shadow:0 12px 40px rgba(16,24,40,.08)}
.box h1{font-size:22px}.box label{display:block;font-weight:600;font-size:13.5px;margin:16px 0 0}.box .btn{width:100%;margin-top:22px;padding:11px}

@media (max-width:960px){
  .side{transform:translateX(-100%);transition:transform .22s;box-shadow:0 10px 40px rgba(0,0,0,.12)}
  #mtog:checked~.side{transform:none}
  #mtog:checked~.scrim{display:block;position:fixed;inset:0;background:rgba(17,24,39,.35);z-index:35}
  .main{margin-left:0}.burger{display:grid}
  .g2,.g3,.faqrow,.dgrid{grid-template-columns:1fr}
  .content{padding:18px 16px 48px}.top{padding:10px 16px}
  .btn-view span{display:none}
  .cards{grid-template-columns:1fr 1fr;gap:12px}.stat{padding:14px;flex-direction:column;gap:10px}.stat b{font-size:18px}
}

.hookbox{border-color:#c7d2fe;background:#fafbff}
.hk{display:grid;grid-template-columns:130px 1fr auto;gap:12px;align-items:center;padding:9px 0;border-bottom:1px solid var(--bd2)}
.hk:last-of-type{border-bottom:0}
.hk>span:first-child{color:var(--tx2);font-weight:600;font-size:13px}
.hk code{font-size:13.5px;padding:7px 10px;background:#fff}
@media (max-width:640px){.hk{grid-template-columns:1fr auto}.hk>span:first-child{grid-column:1/-1}}
.pos{color:var(--ok);font-weight:600}
.hbar{display:block;height:8px;border-radius:4px;background:var(--bd2);overflow:hidden}.hbar i{display:block;height:100%;background:var(--ac);border-radius:4px}
.logd summary{cursor:pointer;color:var(--ac);font-size:12.5px;margin-top:4px}
.logd pre{background:#f7f8fa;border:1px solid var(--bd);border-radius:8px;padding:10px;font-size:12px;max-height:320px;overflow:auto;white-space:pre-wrap;word-break:break-all;margin:6px 0 0}
table.compact{min-width:0}
.g2 .tw table{min-width:0}

/* ===== Pesanan: monitor realtime + tabel responsif ===== */
.mon{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin-bottom:16px}
.mc{display:block;background:#fff;border:1px solid var(--bd);border-radius:12px;padding:12px 14px;color:var(--tx);text-decoration:none!important;border-left:4px solid #c7cbd6}
.mc span{display:block;font-size:12px;color:var(--mut);font-weight:500}.mc b{font-size:22px;font-variant-numeric:tabular-nums}.mc small{display:block}
.mc-ok{border-left-color:#22c55e}.mc-info{border-left-color:#3b82f6}.mc-warn{border-left-color:#f59e0b}.mc-bad{border-left-color:#ef4444}.mc-sum{border-left-color:var(--ac)}.mc-sum b{font-size:18px}
a.mc:hover{border-color:#c9cdd6}
.otool{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.otool .filter{flex:1}
.live{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border:1px solid var(--bd);border-radius:999px;background:#fff;cursor:pointer;font-weight:600;font-size:13px;user-select:none}
.live input{display:none}
.live .dot{width:9px;height:9px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 0 rgba(34,197,94,.6);animation:pulse 1.6s infinite}
.live small{margin:0;font-weight:400}
.live.off .dot{background:#c7cbd6;animation:none}.live.off #liveL::after{content:" (mati)";color:var(--mut);font-weight:400}
@keyframes pulse{70%{box-shadow:0 0 0 8px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}
.otbl{min-width:0}
.otbl td{vertical-align:top}
.otbl .c-num{text-align:right;white-space:nowrap}
.otbl th.c-num{text-align:right}
.otbl .c-inv{white-space:nowrap}
.mono-s{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12.5px}
.otbl .c-prod{min-width:150px}.otbl .c-tgt{min-width:170px}
.otbl .c-sup{width:1%;max-width:150px}
.sup-inline{display:none}
/* Layar sedang: kolom Supplier dilipat ke bawah nama produk supaya tabel tidak melebar keluar panel */
@media (max-width:1599px){.otbl th.c-sup,.otbl td.c-sup{display:none}.sup-inline{display:block;margin-top:5px}.sup-inline .sup-n{max-width:100%;white-space:normal;overflow-wrap:anywhere}}
.otbl .c-sup small.ell{max-width:150px}
.sup-n{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:top;font-size:12px;font-weight:600;line-height:1.3;padding:3px 9px;border-radius:7px;border:1px solid #e3e6ec;background:#f6f7f9;color:#374151}
.sup-digi{background:#eff6ff;border-color:#dbeafe;color:#1d4ed8}
.sup-oke{background:#f0fdf4;border-color:#dcfce7;color:#15803d}
.sup-buka{background:#fdf4ff;border-color:#fae8ff;color:#a21caf}
.sup-otx{background:#fff7ed;border-color:#ffedd5;color:#c2410c}
.otbl .c-tgt small{word-break:break-all}
.ell{display:block;max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ell2{max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.otbl .c-act{text-align:right;white-space:nowrap;width:1%}
.acts-row{display:inline-flex;gap:6px;align-items:center}
.acts-row form{margin:0}
.dd{position:relative;display:inline-block}
.dd summary{list-style:none;min-width:34px;font-size:16px;line-height:1;padding:6px 10px}
.dd summary::-webkit-details-marker{display:none}
.dd-m{position:absolute;right:0;top:calc(100% + 6px);z-index:30;min-width:190px;background:#fff;border:1px solid var(--bd);border-radius:10px;box-shadow:0 12px 30px rgba(16,24,40,.14);padding:6px;text-align:left}
.dd-m form{margin:0}
.dd-i{display:block;width:100%;text-align:left;background:none;border:0;font:inherit;font-size:13.5px;font-weight:500;color:var(--tx);padding:9px 12px;border-radius:7px;cursor:pointer;text-decoration:none!important}
.dd-i:hover{background:#f5f6f9}.dd-bad{color:var(--bad)}
.r-hold td{background:#fff7f7}
@keyframes flashN{from{background:#e8f8ee}to{background:transparent}}
@keyframes flashU{from{background:#eef3ff}to{background:transparent}}
.flash-new td{animation:flashN 3s ease-out}.flash-upd td{animation:flashU 3s ease-out}
.toast{position:fixed;right:20px;bottom:20px;z-index:60;background:#111827;color:#fff;padding:12px 16px;border-radius:10px;font-weight:600;box-shadow:0 10px 30px rgba(0,0,0,.25)}
@media (min-width:901px){.dd-t{display:none}}
@media (max-width:1250px){.otbl td,.otbl th{padding-left:10px;padding-right:10px}.otbl .c-tgt{min-width:140px}.otbl .c-prod{min-width:120px}}
@media (max-width:900px){
  .mon{grid-template-columns:repeat(3,1fr)}.mc-sum{grid-column:span 3}
  .otbl thead{display:none}
  .otbl,.otbl tbody{display:block}
  .otbl tr{display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-areas:"inv inv stat" "prod prod prod" "tgt tgt tgt" "cost price profit" "act act act";gap:8px 10px;padding:14px 16px;border-bottom:1px solid var(--bd)}
  .otbl tr.r-empty{display:block}
  .otbl td{padding:0;border:0;background:none!important}
  .otbl .c-inv{grid-area:inv}.otbl .c-stat{grid-area:stat;text-align:right}.otbl .c-prod{grid-area:prod}.otbl .c-tgt{grid-area:tgt}
  .otbl .c-cost{grid-area:cost}.otbl .c-price{grid-area:price}.otbl .c-profit{grid-area:profit}
  .otbl .c-act{grid-area:act;width:auto;text-align:left}
  .otbl .c-inv .ell{max-width:none}
  .otbl .c-num{text-align:left;background:#f8f9fb!important;border-radius:8px;padding:8px 10px}
  .otbl [data-l]::before{content:attr(data-l);display:block;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--mut);margin-bottom:2px}
  .ell2{max-width:none;white-space:normal}
  .acts-row{display:flex;width:100%}.acts-row>form{flex:1}.acts-row>form .btn{width:100%;padding:9px}
  .dd summary{padding:9px 14px}
  .r-hold{background:#fff7f7}
  .otool .filter input{min-width:0;flex:1}.otool .filter select{min-width:0;flex-basis:100%}
}
@media (min-width:901px){
  .panel.tw:has(> .otbl){overflow:visible}
  .otbl td,.otbl th{padding-left:9px;padding-right:9px}
  .otbl td:first-child,.otbl th:first-child{padding-left:16px}.otbl td:last-child,.otbl th:last-child{padding-right:16px}
  .otbl .mono-s{font-size:12px}
  .otbl .c-prod{min-width:0;max-width:170px}.otbl .c-tgt{min-width:0;max-width:190px}
  .otbl .c-stat{max-width:170px}
  .otbl .c-inv .ell{max-width:150px}
}

/* Kartu monitor pesanan: warna penuh */
.mc{position:relative;overflow:hidden;border:0;border-left:0;color:#fff;background:linear-gradient(135deg,#64748b,#475569);box-shadow:0 6px 16px rgba(16,24,40,.12);transition:transform .15s,box-shadow .15s}
.mc::after{content:"";position:absolute;right:-18px;top:-18px;width:70px;height:70px;border-radius:50%;background:rgba(255,255,255,.14)}
.mc span{color:rgba(255,255,255,.88)}.mc small{color:rgba(255,255,255,.85)}.mc b{color:#fff}
a.mc:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(16,24,40,.18);border:0}
.mc-ok{background:linear-gradient(135deg,#22c55e,#15803d)}
.mc-info{background:linear-gradient(135deg,#3b82f6,#1d4ed8)}
.mc-warn{background:linear-gradient(135deg,#f59e0b,#d97706)}
.mc-bad{background:linear-gradient(135deg,#ef4444,#b91c1c)}
#s-holdc{background:linear-gradient(135deg,#ec4899,#be185d)}
.mc-sum{background:linear-gradient(135deg,#6366f1,#4338ca)}

.tp-super{background:linear-gradient(180deg,#2563eb 0 40%,#f3f5f9 40%)}.tp-super i{background:#fff;border-radius:10px;box-shadow:0 2px 6px rgba(0,0,0,.08)}.tp-super u{background:#fff;opacity:.9}
.tp-list{background:#0d0f13;grid-template-columns:1fr;gap:5px;padding-top:30px}.tp-list i{background:#171b23;border:1px solid #262b36;border-radius:6px}.tp-list u{background:conic-gradient(#7c3aed,#22d3ee,#7c3aed);width:16px;height:16px;border-radius:50%}
.tp-tile{background:#faf7f2}.tp-tile i{background:linear-gradient(180deg,#f9c98b,#5b3b2a);border-radius:12px}.tp-tile u{background:#221c18;width:30%}

/* Tenant kemitraan */
.kvl{display:grid;grid-template-columns:120px 1fr;gap:8px 14px;margin:12px 0 0}
.kvl dt{color:var(--mut)}.kvl dd{margin:0;font-weight:500;word-break:break-word}
.kvl dd small{margin-top:2px}
@media (max-width:560px){.kvl{grid-template-columns:1fr;gap:2px}.kvl dd{margin-bottom:8px}}

/* Beli kuota (panel toko mitra) */
.kq-packs{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin:14px 0}
.kq-pack{position:relative;cursor:pointer}
.kq-pack input{position:absolute;opacity:0;pointer-events:none}
.kq-pack>span{display:grid;gap:2px;border:1.5px solid var(--bd);border-radius:12px;padding:16px;background:#fff;transition:border-color .15s,box-shadow .15s;height:100%}
.kq-pack b{font-size:14px}.kq-pack strong{font-size:24px;letter-spacing:-.02em}.kq-pack strong small{display:inline;font-size:13px}
.kq-pack em{font-style:normal;font-weight:700;color:var(--ac);font-size:16px}
.kq-pack:hover>span{border-color:#c9cdd6}
.kq-pack input:checked+span{border-color:var(--ac);box-shadow:0 0 0 3px rgba(47,91,234,.13)}
.kq-pack input:checked+span::after{content:"\2713";position:absolute;top:12px;right:12px;width:22px;height:22px;border-radius:50%;background:var(--ac);color:#fff;display:grid;place-items:center;font-size:12px;font-weight:700}
.kq-buyrow{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
.kq-sel{flex:1;min-width:220px;max-width:420px;font-weight:600;font-size:13.5px}
.kq-sel select,.kq-sel input{box-sizing:border-box;display:block;width:100%;margin-top:7px;font:inherit;font-weight:400;padding:10px 12px;border:1px solid #dcdfe6;border-radius:9px;background:#fff}
.kq-inv{max-width:640px}
.kq-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.kq-no{display:block;font-size:18px;word-break:break-all}
.kq-pay{text-align:center;border:1px solid var(--bd);border-radius:12px;padding:18px;margin-top:16px;background:#fafbff}
.kq-qr{width:220px;max-width:100%;margin:12px auto;background:#fff;padding:10px;border:1px solid var(--bd);border-radius:12px}
.kq-qr img,.kq-qr svg{display:block;width:100%;height:auto}
.kq-row{display:flex;justify-content:center;align-items:center;gap:10px;flex-wrap:wrap;margin:4px 0}
.kq-big{font-size:22px;letter-spacing:.02em;word-break:break-all}
.kq-instr{text-align:left;border-top:1px solid var(--bd);padding:8px 0;margin-top:8px}
.kq-instr summary{cursor:pointer;font-weight:600}
.kq-instr ol{margin:8px 0;padding-left:20px;color:var(--tx2)}
@media (max-width:560px){.kq-buyrow .btn{width:100%}.kq-sel{max-width:none}}
.panel.danger{border-color:#fecaca;background:#fffafa}
.panel.danger .ph-h b{color:var(--bad)}

/* Kartu statistik v2: ikon + judul sebaris, angka besar satu baris penuh di bawahnya */
.cards{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.stat{display:grid;grid-template-columns:38px minmax(0,1fr);grid-template-rows:auto auto auto;column-gap:12px;row-gap:0;align-items:center;padding:18px 18px 16px;transition:box-shadow .15s,transform .15s}
.stat:hover{box-shadow:0 6px 18px rgba(16,24,40,.07)}
.stat>div{display:contents}
.stat .si{width:38px;height:38px;grid-column:1;grid-row:1}
.stat .si .ai{width:19px;height:19px}
.stat>div>span{grid-column:2;grid-row:1;font-size:13px;line-height:1.3;color:var(--tx2);font-weight:600}
.stat>div>b{grid-column:1/-1;grid-row:2;margin:14px 0 2px;font-size:24px;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stat>div>b .tag{font-size:12px}
.stat>div>small{grid-column:1/-1;grid-row:3;font-size:12.5px;line-height:1.4}
@media (max-width:640px){
  .cards{grid-template-columns:1fr 1fr;gap:10px}
  .stat{display:grid;padding:14px;column-gap:10px}
  .stat .si{width:32px;height:32px;border-radius:9px}
  .stat .si .ai{width:17px;height:17px}
  .stat>div>span{font-size:12px}
  .stat>div>b{font-size:19px;margin-top:10px}
}
@media (max-width:360px){.stat>div>b{font-size:17px}}

/* Status integrasi */
.si.r{background:#fef2f2;color:#dc2626}
.ig-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;margin-bottom:20px}
.ig-card{display:grid;grid-template-columns:40px minmax(0,1fr) auto;grid-template-rows:auto auto;column-gap:12px;row-gap:12px;align-items:center;background:#fff;border:1px solid var(--bd);border-radius:var(--r);padding:16px 18px;color:var(--tx);text-decoration:none!important;transition:box-shadow .15s,border-color .15s}
.ig-card:hover{border-color:#cfd5e2;box-shadow:0 6px 18px rgba(16,24,40,.07)}
.ig-card .si{grid-row:1}
.ig-b{min-width:0}.ig-b b{display:block;font-size:15px}.ig-b small{line-height:1.4;margin-top:2px}
.ig-go{grid-column:1/-1;border-top:1px solid var(--bd2);padding-top:10px;font-size:13px;font-weight:600;color:var(--ac)}
/* Kartu statistik: 3 kolom rapi di desktop, 2 kolom di tablet/HP */
.cards{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ===== Halaman masuk admin (ilustrasi game) ===== */
body.alog{background:#f5f6fb;min-height:100vh}
.alog-wrap{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(380px,1fr);min-height:100vh}
.alog-art{position:relative;overflow:hidden;background:color-mix(in srgb,var(--lp,#6d5cff) 16%,#090a17);color:#fff;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:48px 40px;isolation:isolate}
.alog-gridbg{position:absolute;inset:0;z-index:-1;background-image:linear-gradient(color-mix(in srgb,var(--lp,#6d5cff) 16%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--lp,#6d5cff) 16%,transparent) 1px,transparent 1px);background-size:44px 44px;-webkit-mask-image:radial-gradient(ellipse at 50% 55%,#000 30%,transparent 75%);mask-image:radial-gradient(ellipse at 50% 55%,#000 30%,transparent 75%)}
.alog-glow{position:absolute;border-radius:50%;filter:blur(70px);z-index:-1;opacity:.75}
.alog-glow.g1{width:420px;height:420px;background:var(--lp,#6a4cff);top:-120px;left:-80px}
.alog-glow.g2{width:380px;height:380px;background:var(--la,#00b4ff);bottom:-140px;right:-60px;opacity:.55}
.alog-scene{width:min(520px,100%);height:auto;filter:drop-shadow(0 30px 40px rgba(0,0,0,.35))}
.alog-scene .fl{animation:alogFloat 6s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.alog-scene .f0{animation-duration:7s}.alog-scene .f1{animation-delay:-2s}.alog-scene .f2{animation-delay:-4s;animation-duration:5s}.alog-scene .f3{animation-delay:-1s;animation-duration:4.5s}
.alog-scene .tw path{animation:alogTw 2.4s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.alog-scene .tw path:nth-child(2){animation-delay:-.8s}.alog-scene .tw path:nth-child(3){animation-delay:-1.6s}
@keyframes alogFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes alogTw{0%,100%{opacity:.25;transform:scale(.7)}50%{opacity:1;transform:scale(1)}}
.alog-copy{max-width:460px;text-align:center;margin-top:8px}
.alog-chip{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);color:color-mix(in srgb,var(--lp,#6d5cff) 35%,#fff)}
.alog-copy h2{font-size:32px;font-weight:800;margin:14px 0 8px;letter-spacing:-.02em;background:linear-gradient(90deg,#fff,color-mix(in srgb,var(--la,#2fa8ff) 40%,#fff));-webkit-background-clip:text;background-clip:text;color:transparent}
.alog-copy p{margin:0;color:#a9add0;font-size:15px;line-height:1.6}
.alog-pills{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:20px}
.alog-pills span{font-size:12.5px;font-weight:600;padding:7px 12px;border-radius:10px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);color:#dfe2ff}
.alog-main{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:40px 24px;background:radial-gradient(600px 300px at 80% 0%,color-mix(in srgb,var(--lp,#6d5cff) 10%,#fff),transparent),#f5f6fb}
.alog .box{width:min(420px,100%);padding:34px 32px;border-radius:20px;box-shadow:0 24px 60px -24px rgba(30,40,90,.25);border:1px solid #e6e9f2}
.alog-brand{display:flex;align-items:center;gap:10px;margin-bottom:26px}
.alog-brand img{height:38px;width:auto;max-width:150px;object-fit:contain}
.alog-brand b{font-size:16px}
.alog-mark{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;font-weight:800;color:var(--on-lp,#fff);background:linear-gradient(135deg,var(--lp,#7c5cff),var(--la,#2fb8ff))}
.alog .box h1{font-size:23px;letter-spacing:-.02em}
.alog .box>.mut{margin:6px 0 4px}
.inp-ic{position:relative;display:block}
.inp-ic>.ai{position:absolute;left:13px;top:50%;margin-top:3.5px;transform:translateY(-50%);color:#9aa2b2;width:18px;height:18px;pointer-events:none}
.alog .box .inp-ic input{padding-left:40px;padding-top:12px;padding-bottom:12px;border-radius:11px}
.alog .box input:focus{border-color:var(--lp,#6d5cff);box-shadow:0 0 0 4px color-mix(in srgb,var(--lp,#6d5cff) 15%,transparent)}
.pw-eye{position:absolute;right:6px;top:50%;margin-top:3.5px;transform:translateY(-50%);width:36px;height:36px;border:0;background:none;color:#9aa2b2;cursor:pointer;border-radius:8px;display:grid;place-items:center}
.pw-eye svg{width:19px;height:19px}.pw-eye:hover,.pw-eye.on{color:#5b4ff0;background:#f1f0ff}
.alog .box .inp-ic input[type=password],.alog .box .inp-ic input[name=password]{padding-right:46px}
.alog .box .btn:not(.btn-o){background:linear-gradient(90deg,var(--lp,#6d5cff),var(--la,#2fa8ff));color:var(--on-lp,#fff);border:0;font-weight:700;padding:13px;border-radius:12px;box-shadow:0 10px 24px -10px color-mix(in srgb,var(--lp,#5b4ff0) 70%,transparent)}
.alog .box .btn:not(.btn-o):hover{filter:brightness(1.07)}
.alog-foot{margin:22px 0 0;font-size:12.5px;color:var(--mut)}
@media (max-width:900px){
  .alog-wrap{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .alog-art{padding:28px 20px 70px;min-height:0}
  .alog-scene{width:min(300px,78%)}
  .alog-copy h2{font-size:24px;margin:8px 0 4px}
  .alog-copy p{font-size:13.5px}
  .alog-pills{display:none}
  .alog-main{padding:0 16px 28px;margin-top:-50px;background:none;position:relative;z-index:2}
  .alog .box{padding:26px 22px}
}
@media (prefers-reduced-motion:reduce){.alog-scene .fl,.alog-scene .tw path{animation:none}}

/* ===== Sentuhan 3D & gradasi tipis (panel admin) ===== */
body:not(.alog){background:radial-gradient(1200px 520px at 100% -10%,rgba(99,102,241,.07),transparent 60%),radial-gradient(900px 480px at -10% 110%,rgba(14,165,233,.06),transparent 60%),linear-gradient(180deg,#f7f8fc 0%,#f2f4f9 100%);background-attachment:fixed}
.side{background:linear-gradient(180deg,#ffffff 0%,#fbfcff 100%);box-shadow:1px 0 0 rgba(16,24,40,.02),8px 0 24px -18px rgba(30,41,90,.18)}
.mi.on{background:linear-gradient(90deg,#eef2ff,#f5f7ff);box-shadow:inset 3px 0 0 var(--ac),0 1px 2px rgba(47,91,234,.08)}
.top{background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(255,255,255,.86));box-shadow:0 1px 0 rgba(16,24,40,.03),0 6px 18px -14px rgba(30,41,90,.25)}
.bm{background:linear-gradient(135deg,#4f7bff,#2f5bea 55%,#2443c4);box-shadow:0 6px 14px -6px rgba(47,91,234,.6),inset 0 1px 0 rgba(255,255,255,.35)}

/* Kartu & panel: lapisan bayangan + kilau tipis di tepi atas */
.panel,.stat,.ig-card{background:linear-gradient(180deg,#ffffff 0%,#fcfdff 100%);border-color:#e6e9f2;box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 1px 2px rgba(16,24,40,.04),0 8px 22px -12px rgba(30,41,90,.16)}
.stat{position:relative;overflow:hidden;transition:transform .18s ease,box-shadow .18s ease}
.stat::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:linear-gradient(90deg,#4f7bff,#7c5cff);opacity:.85}
.stat::after{content:"";position:absolute;right:-40px;top:-40px;width:130px;height:130px;border-radius:50%;background:radial-gradient(circle,rgba(79,123,255,.10),transparent 70%);pointer-events:none}
.stat:has(.si.g)::before{background:linear-gradient(90deg,#22c55e,#14b8a6)}.stat:has(.si.g)::after{background:radial-gradient(circle,rgba(34,197,94,.11),transparent 70%)}
.stat:has(.si.o)::before{background:linear-gradient(90deg,#f97316,#f59e0b)}.stat:has(.si.o)::after{background:radial-gradient(circle,rgba(249,115,22,.11),transparent 70%)}
.stat:has(.si.v)::before{background:linear-gradient(90deg,#8b5cf6,#d946ef)}.stat:has(.si.v)::after{background:radial-gradient(circle,rgba(139,92,246,.12),transparent 70%)}
.stat:has(.si.r)::before{background:linear-gradient(90deg,#ef4444,#f43f5e)}
.stat:hover,.ig-card:hover{transform:translateY(-2px);box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 2px 4px rgba(16,24,40,.05),0 16px 30px -14px rgba(30,41,90,.24)}

/* Ikon kartu: chip timbul bergradasi */
.si{background:linear-gradient(145deg,#eef2ff,#dfe6ff);color:#2f5bea;box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 4px 10px -4px rgba(47,91,234,.35)}
.si.g{background:linear-gradient(145deg,#ecfdf3,#d3f8e2);color:#16a34a;box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 4px 10px -4px rgba(22,163,74,.35)}
.si.o{background:linear-gradient(145deg,#fff7ed,#ffe4cc);color:#ea580c;box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 4px 10px -4px rgba(234,88,12,.35)}
.si.v{background:linear-gradient(145deg,#f5f3ff,#e7e0ff);color:#7c3aed;box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 4px 10px -4px rgba(124,58,237,.35)}
.si.r{background:linear-gradient(145deg,#fef2f2,#fde0e0);color:#dc2626;box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 4px 10px -4px rgba(220,38,38,.3)}
.stat>div>b{background:linear-gradient(180deg,#111827,#374151);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat>div>b .tag{-webkit-text-fill-color:initial}

/* Tombol utama: gradasi + kedalaman */
.btn:not(.btn-o):not(.btn-d){background:linear-gradient(180deg,#4b74f5 0%,#2f5bea 100%);border-color:#2a52d6;box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 1px 2px rgba(16,24,40,.12),0 6px 14px -8px rgba(47,91,234,.7)}
.btn:not(.btn-o):not(.btn-d):hover{background:linear-gradient(180deg,#4069ee 0%,#2449c9 100%);border-color:#2146bf}
.btn-o,.btn-d{background:linear-gradient(180deg,#ffffff,#f8f9fc);box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(16,24,40,.06)}
.btn:active{transform:translateY(1px)}

/* Tabel & grafik */
.tw thead th{background:linear-gradient(180deg,#fafbfe,#f4f6fb)}
.chart .bar{fill:url(#barg)}
.al{box-shadow:0 1px 2px rgba(16,24,40,.04),0 6px 16px -12px rgba(30,41,90,.18)}
@media (prefers-reduced-motion:reduce){.stat,.ig-card{transition:none}.stat:hover,.ig-card:hover{transform:none}}
/* Kartu statistik polos: tanpa garis warna atas & tanpa cahaya gradasi (ikon tetap) */
.stat::before,.stat::after{display:none!important;content:none}
.stat{background:#fff}
.stat>div>b{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--tx)}

/* ===== Mode HP: tabel jadi kartu ===== */
@media (max-width:640px){
  .panel.tw:has(table.cardt){background:transparent;border:0;box-shadow:none;overflow:visible;padding:0}
  .panel.tw:has(table.cardt) .ph-h{padding:0 2px 4px!important}
  .tw:has(table.cardt){overflow:visible}
  table.cardt{min-width:0!important;border:0}
  table.cardt thead{display:none}
  table.cardt,table.cardt tbody{display:block;width:100%}
  table.cardt tr{display:block;background:#fff;border:1px solid #e6e9f2;border-radius:14px;padding:4px 14px;margin:0 0 10px;box-shadow:0 1px 2px rgba(16,24,40,.04),0 6px 16px -12px rgba(30,41,90,.18)}
  table.cardt tr:hover{background:#fff}
  table.cardt td{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;padding:9px 0!important;border:0!important;border-top:1px dashed #edf0f5!important;text-align:right;white-space:normal!important;min-width:0;font-size:13.5px}
  table.cardt td::before{content:attr(data-label);flex:none;max-width:45%;text-align:left;color:var(--mut);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;padding-top:1px}
  table.cardt td>*{min-width:0;overflow-wrap:anywhere}
  table.cardt td small{display:block;margin-top:2px}
  table.cardt td:first-child{display:block;text-align:left;border-top:0!important;padding-top:12px!important;font-weight:600;font-size:14.5px}
  table.cardt td:first-child::before{display:none}
  table.cardt td:first-child small{font-weight:400}
  table.cardt td.nolab{justify-content:flex-end;flex-wrap:wrap}
  table.cardt td.nolab::before{display:none}
  table.cardt td.ra{flex-wrap:wrap}
  table.cardt td.ra form{margin:0 0 0 6px}
  table.cardt td.emp{display:block;text-align:center;border:0!important;color:var(--mut)}
  table.cardt td.emp::before{display:none}
  table.cardt td .tag{white-space:normal;text-align:left}
  table.cardt td input[type=checkbox]{margin:0}
}
@media (max-width:640px){
  table.cardt td:has(form.mini),table.cardt td:has(select),table.cardt td:has(input:not([type=hidden]):not([type=checkbox])){display:block;text-align:left}
  table.cardt td:has(form.mini)::before,table.cardt td:has(select)::before,table.cardt td:has(input:not([type=hidden]):not([type=checkbox]))::before{display:block;max-width:none;margin-bottom:6px}
  table.cardt form.mini{display:flex;flex-wrap:wrap;gap:6px;width:100%}
  table.cardt form.mini input{flex:1 1 120px;min-width:0;width:auto;margin:0!important}
  table.cardt form.mini .btn{flex:none}
}
@media (max-width:640px){
  table.cardt td>.cv{flex:1;min-width:0;text-align:right}
  table.cardt td.nolab>.cv{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:6px}
  table.cardt td.ra>.cv{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:6px}
  table.cardt td.ra>.cv form{margin:0}
  table.cardt td:has(form.mini)>.cv,table.cardt td:has(select)>.cv,table.cardt td:has(input:not([type=hidden]):not([type=checkbox]))>.cv{text-align:left}
  .chart{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .chart svg{min-width:560px}
}
/* Pesanan (HP/tablet): menu "Aksi lain" terbuka di dalam kartu, tidak keluar layar / menimpa kartu lain */
@media (max-width:900px){
  .acts-row{flex-wrap:wrap;gap:8px}
  .acts-row>.dd{flex:1 1 auto;display:block}
  .acts-row>form+.dd{flex:0 0 auto}
  .acts-row>.dd[open]{flex:1 1 100%;order:2}
  .dd summary{display:flex;align-items:center;justify-content:center;gap:6px;width:100%}
  .dd-m{position:static;width:100%;min-width:0;margin-top:8px;box-shadow:none;background:#f8f9fc;border:1px solid #e6e9f2;border-radius:12px;padding:6px}
  .dd-i{padding:12px 14px;font-size:14px;border-radius:9px}
  .dd-i+.dd-i,.dd-m form+form,.dd-m a+form,.dd-m form+a{border-top:1px solid #eceff5}
  .dd-i:hover{background:#fff}
}
@media (max-width:900px){.dd summary{font-size:14px;padding:9px 14px}}
/* Form pengaturan selebar panel lain */
.panel.form{max-width:none}
/* Laporan: baris panel sejajar & sama tinggi */
.g2.rp{gap:16px;align-items:stretch;margin-bottom:16px}
.g2.rp>.panel{margin-bottom:0;height:100%}
.cards{margin-bottom:16px}
/* provider bawaan */
.pv-pre{display:flex;align-items:center;gap:16px;justify-content:space-between;flex-wrap:wrap}
.pv-pre>div{flex:1 1 320px;min-width:0}
.pv-pre b{display:block;margin-bottom:3px}
.pv-pre small{color:var(--mut,#6b7280);line-height:1.5}
@media(max-width:600px){.pv-pre .btn{width:100%}}
/* demo landing */
.dm-thumb{display:block;width:120px;aspect-ratio:16/10;object-fit:cover;object-position:top;border-radius:8px;border:1px solid var(--bd,#e5e7eb);background:#f3f4f6}
.dm-thumb.ph{display:grid;place-items:center;font-size:11px;color:#9ca3af}
.dm-prev img{max-width:240px!important;width:240px;aspect-ratio:16/10;object-fit:cover;object-position:top;height:auto!important}
td small a{word-break:break-all}
/* teks landing */
.tl-form .panel.form{margin-bottom:16px}
.tl-form .panel.form>b{font-size:15px}
.tl-list{display:grid;gap:10px}
.tl-item{display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;align-items:start;padding:12px;border:1px solid var(--bd,#e5e7eb);border-radius:12px;background:#fafbfd}
.tl-no{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;font-weight:700;font-size:13px;color:#64748b;background:#eef1f6;margin-top:26px}
.tl-item .g2{margin:0}
.tl-item textarea{min-height:44px}
.tl-save{position:sticky;bottom:0;z-index:5;display:flex;gap:10px;padding:12px 0;background:linear-gradient(transparent,var(--bg,#f4f6fb) 30%)}
.tl-reset{margin-top:6px}
.mut{color:#6b7280}
@media(max-width:600px){.tl-item{grid-template-columns:1fr}.tl-no{margin:0}.tl-save .btn{flex:1}}
.lead code{white-space:nowrap;word-break:normal}
/* halaman info mitra */
.tl-tabs{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 14px}
.tl-tabs a{padding:8px 14px;border-radius:10px;border:1px solid var(--bd,#e5e7eb);background:#fff;color:#475569;font-weight:600;font-size:14px;text-decoration:none}
.tl-tabs a.on{background:#1e293b;color:#fff;border-color:#1e293b}
.tl-urlrow{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.tl-urlrow a{font-size:13px;word-break:break-all}
/* ---------- Demo panel admin ---------- */
.demo-mode .demo-bar{display:flex;align-items:center;justify-content:space-between;gap:10px 14px;flex-wrap:wrap;padding:11px 14px 11px 16px;margin-bottom:18px;border-radius:12px;background:#0f172a;color:#e2e8f0;font-size:13.5px}
.demo-bar b{color:#fbbf24}
.demo-bar a{color:#0f172a;background:#fbbf24;font-weight:700;padding:5px 12px;border-radius:999px;text-decoration:none;white-space:nowrap}
.demo-packs{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.demo-pack{border:1.5px solid var(--bd,#e5e7eb);border-radius:12px;padding:14px;display:grid;gap:2px;cursor:pointer;background:#fff}
.demo-pack.on{border-color:#2f5bea;box-shadow:0 0 0 3px rgba(47,91,234,.12)}
.demo-pack strong{font-size:19px}.demo-pack span{color:#2f5bea;font-weight:700}
.demo-swatch{display:flex;gap:8px}.demo-swatch i{width:34px;height:34px;border-radius:10px}
.demo-toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:#0f172a;color:#fff;padding:11px 18px;border-radius:12px;font-size:14px;font-weight:600;box-shadow:0 12px 30px -10px rgba(0,0,0,.4);transition:all .2s;z-index:90;max-width:calc(100% - 32px);text-align:center}
.demo-toast.on{opacity:1;transform:translate(-50%,0)}
.demo-mode input:disabled,.demo-mode select:disabled{opacity:1;background:#f8fafc;color:#334155;cursor:not-allowed}
.alog .pw-eye:hover,.alog .pw-eye.on{color:var(--lp,#5b4ff0);background:color-mix(in srgb,var(--lp,#5b4ff0) 10%,#fff)}.alog .box a{color:var(--lp,#2f5bea)}
.alog-foot a{color:var(--lp,#2f5bea)}
.tp-pop{background:#fff;border:1px solid #e5e7eb}.tp-pop i{background:#f0f0f0;border:1.5px solid #cdcdd2;border-right-color:#3f3f46;border-bottom-color:#3f3f46;border-radius:8px}.tp-pop u{background:#c8f53a;left:27%}
.tcol{display:flex;align-items:center;gap:5px;font-size:11.5px;color:var(--mut);margin-top:6px}.tcol i{width:14px;height:14px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
/* Produk per provider */
.pd-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.pd-ttl{flex:1 1 260px;min-width:0}.pd-ttl b{display:block;font-size:17px}.pd-ttl small{color:var(--mut);line-height:1.45}
.pd-back{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;border:1px solid var(--bd);background:var(--sf,#fff);color:var(--tx);font-size:18px;text-decoration:none;flex:none}
.pd-back:hover{border-color:var(--ac);color:var(--ac);text-decoration:none}
.pd-logo{width:48px;height:48px;border-radius:13px;overflow:hidden;flex:none;border:1px solid var(--bd);background:var(--ac-s);display:grid;place-items:center}
.pd-logo img{width:100%;height:100%;object-fit:cover}.pd-logo i{font-style:normal;font-weight:700;color:var(--ac);font-size:15px}
.pd-q{width:240px;max-width:100%;margin:0}
.pd-add{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.pd-plus{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:rgba(255,255,255,.22);font-size:16px;line-height:1;font-weight:700}
.pd-form{animation:pdIn .18s ease-out}.pd-form[hidden]{display:none}
@keyframes pdIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.pd-fh{display:flex;align-items:center;justify-content:space-between;gap:10px}
.pd-x{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;color:var(--mut);font-size:22px;line-height:1;text-decoration:none}
.pd-x:hover{background:var(--ac-s);color:var(--tx);text-decoration:none}
.pd-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.pd-card{display:flex;align-items:center;gap:12px;padding:14px;border:1px solid var(--bd);border-radius:16px;background:var(--sf,#fff);color:var(--tx);text-decoration:none;transition:border-color .15s,box-shadow .15s,transform .15s;min-width:0}
.pd-card:hover{border-color:var(--ac);box-shadow:0 8px 22px rgba(30,41,99,.08);transform:translateY(-1px);text-decoration:none}
.pd-card[hidden]{display:none}.pd-card.off{opacity:.65}
.pd-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.pd-info b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pd-info small{color:var(--mut)}
.pd-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:3px}
.pd-tags em{font-style:normal;font-size:11.5px;font-weight:600;padding:2px 8px;border-radius:999px;background:var(--ac-s);color:var(--ac)}
.pd-tags em.warn{background:#fef3c7;color:#b45309}.pd-tags em.mute{background:#f1f5f9;color:#64748b}
.pd-go{color:var(--mut);font-size:22px;flex:none}
@media(max-width:600px){.pd-q{width:100%;order:3}.pd-add{width:100%;justify-content:center;order:4}.pd-grid{grid-template-columns:1fr}}
.pd-q{height:42px;padding:0 14px 0 38px;border:1px solid var(--bd);border-radius:12px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%238a93a6' stroke-width='2' stroke-linecap='round' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 13px center;font:inherit;font-size:14px;color:var(--tx);outline:none;transition:border-color .15s,box-shadow .15s}
.pd-q:focus{border-color:var(--ac);box-shadow:0 0 0 3px var(--ac-s)}
.pd-form{scroll-margin-top:96px}
@media(max-width:600px){.pd-card{padding:11px 12px;gap:11px;border-radius:14px}.pd-logo{width:42px;height:42px;border-radius:11px}.pd-grid{gap:9px}}
/* Pratinjau tema baru */
.tp-arcade{background:#15102e;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:6px 6px;padding-top:32px}
.tp-arcade u{left:0;top:0;width:100%;height:7px;border-radius:0;background:repeating-linear-gradient(90deg,#ff3d8b 0 14px,#ffd400 14px 28px,#3ee7ff 28px 42px,#0b0819 42px 46px)}
.tp-arcade i{border-radius:0;background:linear-gradient(#0b0819,#0b0819) 5px 5px/calc(100% - 10px) 55% no-repeat,#1c163d;box-shadow:inset 0 0 0 3px #3d3180,inset 0 -5px 0 #0b0819;clip-path:polygon(0 4px,4px 4px,4px 0,calc(100% - 4px) 0,calc(100% - 4px) 4px,100% 4px,100% calc(100% - 4px),calc(100% - 4px) calc(100% - 4px),calc(100% - 4px) 100%,4px 100%,4px calc(100% - 4px),0 calc(100% - 4px))}
.tp-arcade i:first-child{background:linear-gradient(#ffd400,#ffd400) 5px 5px/calc(100% - 10px) 55% no-repeat,#1c163d}
.tp-struk{background:#eceff3;grid-template-columns:1fr;gap:4px;padding:38px 10px 8px}
.tp-struk u{left:10px;right:10px;top:8px;width:auto;height:24px;border-radius:4px;background:#2346ff}
.tp-struk i{border-radius:3px;background:linear-gradient(#151b29,#151b29) right 8px center/22px 6px no-repeat,radial-gradient(circle,#b4bcc8 1px,transparent 1.4px) 0 55%/5px 5px repeat-x,#fff;box-shadow:inset 30px 0 0 #fff,inset 0 0 0 1px #d3d9e1;background-clip:padding-box}
.tp-struk i:first-child{box-shadow:inset 30px 0 0 #fff,inset 0 0 0 1px #d3d9e1,inset 3px 0 0 #2346ff}
.tp-dock{background:#e6eaf0;gap:8px;padding:14px 10px 30px}
.tp-dock i{background:#fff;border-radius:12px;box-shadow:0 4px 8px -4px rgba(22,32,58,.4)}
.tp-dock i:first-child{box-shadow:0 0 0 2px #e6eaf0,0 0 0 4px #0a84ff}
.tp-dock u{top:auto;bottom:8px;left:28%;width:44%;height:12px;border-radius:999px;background:#141922}
/* Progres domain */
.dp-steps{list-style:none;margin:14px 0 6px;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.dp-steps li{display:flex;gap:10px;align-items:flex-start;padding:12px;border:1px solid var(--bd);border-radius:12px;background:#fff;min-width:0}
.dp-steps li b{display:block;font-size:13.5px;line-height:1.3}
.dp-steps li small{display:block;color:var(--mut);font-size:12px;line-height:1.35;margin-top:2px}
.dp-steps i{flex:none;width:22px;height:22px;border-radius:50%;border:2px solid #cfd5e0;position:relative;margin-top:1px}
.dp-steps li.ok{border-color:#bbf7d0;background:#f0fdf4}
.dp-steps li.ok i{border-color:var(--ok);background:var(--ok)}
.dp-steps li.ok i::after{content:"";position:absolute;left:6px;top:2px;width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.dp-steps li.bad{border-color:#fecaca;background:#fef2f2}
.dp-steps li.bad i{border-color:var(--bad);background:var(--bad)}
.dp-steps li.bad i::after{content:"!";position:absolute;inset:0;display:grid;place-items:center;color:#fff;font:700 12px/1 system-ui}
.dp-steps li.run i{border-color:var(--ac);border-right-color:transparent;animation:dpspin .9s linear infinite}
.dprog.busy .dp-steps li.run{border-color:#c7d2fe}
@keyframes dpspin{to{transform:rotate(360deg)}}
.dp-msg{margin:6px 0 0;color:var(--tx2);font-size:14px}
@media (max-width:900px){.dp-steps{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.dp-steps{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.dp-steps li.run i{animation:none}}
.sd-quick{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 4px}
/* Impor massal banyak brand */
.bk-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:12px 0 10px}
.bk-bar input,.bk-bar select{flex:1;min-width:160px;max-width:260px;font:inherit;padding:8px 11px;border:1px solid #dcdfe6;border-radius:9px;background:#fff}
.bk-cnt{margin-left:auto;font-size:13px;font-weight:600;color:var(--mut,#6b7280)}
.bk-list{max-height:360px;overflow:auto;border:1px solid #e6e9f0;border-radius:12px;padding:6px;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:4px;background:#fafbfd}
.bk-it{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:9px;background:#fff;border:1px solid transparent;cursor:pointer;margin:0;font-weight:400}
.bk-it:hover{border-color:#dbe3f5}
.bk-it[hidden]{display:none}
.bk-it input{flex:none;width:17px;height:17px;margin:0}
.bk-it span{flex:1;min-width:0}
.bk-it b{display:block;font-size:13.5px;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bk-it small{display:block;font-size:12px;color:#7c8499;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bk-it em{flex:none;font-style:normal}
.bk-prog{margin-top:14px;border-top:1px solid #e6e9f0;padding-top:14px}
.bk-pbar{height:8px;border-radius:99px;background:#e6ebf5;overflow:hidden}
.bk-pbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#2563eb,#7c3aed);transition:width .3s}
.bk-st{margin:10px 0 6px;font-size:14px}
.bk-log{list-style:none;margin:0;padding:0;max-height:220px;overflow:auto;font-size:12.5px}
.bk-log li{padding:4px 0;border-bottom:1px dashed #edf0f5}
.bk-log li.ok{color:#15803d}.bk-log li.bad{color:#b91c1c}.bk-log li.mut{color:#7c8499}
@media (max-width:560px){.bk-bar input,.bk-bar select{max-width:none}.bk-cnt{margin-left:0}.bk-list{grid-template-columns:1fr}}
.form .bk-it{display:flex;flex-direction:row;align-items:center;gap:10px;margin:0;font-weight:400}
.form .bk-it input{width:17px;height:17px;margin:0;padding:0;flex:none}
.form .bk-bar input,.form .bk-bar select{margin-top:0;width:auto}
.tp-lav{background:#f4f0ff;gap:6px;padding:12px 10px 26px}
.tp-lav i{background:#fff;border-radius:10px;box-shadow:0 4px 8px -4px rgba(124,77,255,.45)}
.tp-lav i:first-child{background:#7c4dff}
.tp-lav u{top:auto;bottom:6px;left:8%;width:84%;height:12px;border-radius:6px;background:#fff;box-shadow:0 0 0 1px #e6dcfb}
/* Verifikasi KYC */
.kyc-h{display:block;font-size:15px;margin-bottom:14px}
#kycWait[hidden]{display:none}
.tp-teduh{background:#f3f5f7;gap:6px;padding:28px 10px 10px}
.tp-teduh i{background:#fff;border-radius:8px;box-shadow:0 0 0 1px #dfe5ea}
.tp-teduh i:nth-child(2){background:#0d6b74}
.tp-teduh u{top:9px;left:10px;width:80%;height:12px;border-radius:6px;background:#fff;box-shadow:0 0 0 1px #dfe5ea}
/* Produk Pascabayar: sub menu supplier & kelompok impor massal */
.pc-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0 0 18px;max-width:640px}
.pc-tabs a{display:block;padding:14px 16px;border:1px solid #dcdfe6;border-radius:12px;background:#fff;color:var(--tx);text-decoration:none;transition:border-color .15s,box-shadow .15s}
.pc-tabs a b{display:block;font-size:15px}
.pc-tabs a span{display:block;margin-top:3px;font-size:12.5px;color:var(--tx2)}
.pc-tabs a i{font-style:normal}
.pc-tabs a:hover{border-color:var(--ac)}
.pc-tabs a.on{border-color:var(--ac);box-shadow:0 0 0 3px rgba(47,91,234,.13);background:#f5f8ff}
.pc-tabs a.on b{color:var(--ac)}
.pc-grp{border:1px solid #e6e8ee;border-radius:10px;margin:0 0 10px;background:#fff}
.pc-grp>summary{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 14px;cursor:pointer;list-style:none}
.pc-grp>summary::-webkit-details-marker{display:none}
.pc-grp>summary::after{content:'';width:8px;height:8px;border-right:2px solid #9aa2b2;border-bottom:2px solid #9aa2b2;transform:rotate(45deg);margin-left:4px;flex:0 0 8px}
.pc-grp[open]>summary::after{transform:rotate(-135deg)}
.pc-grp>summary span{margin-left:auto}
.pc-grp .tw{border-top:1px solid #e6e8ee}
@media (max-width:560px){.pc-tabs{grid-template-columns:1fr 1fr;gap:8px}.pc-tabs a{padding:12px}}
/* Markup khusus produk / provider */
.g4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.mk-box .g4 label{margin-bottom:8px}
.mk-box input,.mk-box select{min-width:0!important;width:100%!important;margin-top:7px!important}
#pMk{border:1px dashed #dcdfe6;border-radius:12px;padding:14px 16px 10px;margin:4px 0 16px;background:#fafbfd}
#pMk .mk-ttl{display:block;margin-bottom:8px;font-size:14px}
#pMk small{display:block}
.mk-prov{padding:0;margin-bottom:14px}
.mk-prov>summary{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:center;padding:14px 18px;cursor:pointer;list-style:none}
.mk-prov>summary::-webkit-details-marker{display:none}
.mk-prov>summary::after{content:'Atur';margin-left:auto;font-size:13px;font-weight:600;color:var(--ac)}
.mk-prov[open]>summary::after{content:'Tutup'}
.mk-prov>form{padding:0 18px 16px}
.mk-src{color:var(--ac)}
#bulkMk .g4{margin-top:4px}
@media (max-width:760px){.g4{grid-template-columns:1fr 1fr}}
/* Menu Guest: pilihan aktif / nonaktif */
.gs-opts{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:10px}
.form .gs-opt{display:flex;gap:10px;align-items:flex-start;margin:0;padding:14px;border:1px solid #dcdfe6;border-radius:12px;background:#fff;cursor:pointer;font-weight:400}
.gs-opt input{margin-top:3px}
.gs-opt b{display:block;font-size:14px}
.gs-opt small{display:block;margin-top:3px;color:var(--tx2);font-size:12.5px;line-height:1.45}
.gs-opt:has(input:checked){border-color:var(--ac);box-shadow:0 0 0 3px rgba(47,91,234,.12);background:#f5f8ff}
@media (max-width:640px){.gs-opts{grid-template-columns:1fr}}
/* Login admin: logo tanpa nama di sampingnya, "ingat perangkat", pilihan kirim ulang OTP */
.alog-brand img{height:44px;max-width:220px}
.alog .box label.remember{display:flex;align-items:center;gap:9px;margin:16px 0 0;font-weight:500;font-size:13.5px;color:var(--tx2);cursor:pointer}
.alog .box label.remember input{display:inline-block;width:17px;height:17px;margin:0;padding:0;box-shadow:none;accent-color:var(--lp,#6d5cff)}
.otp-ch{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.otp-ch form{margin:0}
.alog .box .otp-ch .btn{width:auto;margin:0;padding:8px 14px}
.link-btn{background:none;border:0;padding:0;color:var(--tx2);cursor:pointer;font:inherit;font-size:13.5px}
.link-btn:hover{color:var(--lp,#2f5bea)}
/* Banner & Promo: contoh bentuk ukuran banner */
.bsz-prev{display:flex;gap:14px;align-items:flex-end;margin:4px 0 12px;flex-wrap:wrap}
.bsz-prev span{display:grid;place-items:center;width:220px;max-width:100%;border:2px dashed #c7cde0;border-radius:10px;background:repeating-linear-gradient(45deg,#f6f8fc,#f6f8fc 8px,#eef1f8 8px,#eef1f8 16px);transition:aspect-ratio .2s}
.bsz-prev i{font-style:normal;font-size:12px;font-weight:600;color:var(--tx2);background:#fff;padding:2px 8px;border-radius:6px}
.tp-bento{background:#e9ebef;grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;gap:5px;padding:28px 10px 10px}
.tp-bento i{border-radius:9px;background:#fff}
.tp-bento i:first-child{grid-row:1/3;background:#d63a40}
.tp-bento i:nth-child(2){background:#ffc53d}
.tp-bento i:nth-child(3){background:#16181d}
.tp-bento u{top:9px;left:28%;width:44%;height:11px;border-radius:999px;background:#fff}
.tp-pad{background:#fff;border:1px solid var(--bd);gap:8px;padding:30px 12px 22px}
.tp-pad i{border-radius:26%;background:#e9edf2}
.tp-pad i:nth-child(1){background:#19b26b}.tp-pad i:nth-child(2){background:#2f6bff}.tp-pad i:nth-child(3){background:#f5b400}
.tp-pad u{top:10px;left:12px;width:38%;height:10px;border-radius:999px;background:#121417}
.tp-pad::after{content:"";position:absolute;left:12px;right:12px;bottom:8px;height:6px;border-radius:3px;background:radial-gradient(circle,#19b26b 3px,transparent 3.5px) 12% 50%/25% 100% no-repeat,radial-gradient(circle,#2f6bff 3px,transparent 3.5px) 38% 50%/25% 100% no-repeat,radial-gradient(circle,#f5b400 3px,transparent 3.5px) 63% 50%/25% 100% no-repeat,radial-gradient(circle,#f0444b 3px,transparent 3.5px) 88% 50%/25% 100% no-repeat}
.tp-mart{background:#fff;border:1px solid var(--bd);grid-template-columns:repeat(4,1fr);gap:5px;padding:44px 8px 8px}
.tp-mart::before{content:"";position:absolute;left:0;right:0;top:0;height:36px;background:#1f3fbf}
.tp-mart u{z-index:1;top:22px;left:8px;width:auto;right:8px;height:9px;border-radius:3px;background:#fff}
.tp-mart i{border-radius:7px;background:#e8efff;box-shadow:inset 0 0 0 6px #f2f5ff}
.tp-mart i:nth-child(2){background:#f15a24;box-shadow:none}
.tp-mart::after{content:"";position:absolute;left:8px;top:7px;width:30%;height:8px;border-radius:3px;background:rgba(255,255,255,.75)}
.tp-ppob{background:#eef2f1;grid-template-columns:repeat(4,1fr);gap:6px;padding:52px 10px 10px}
.tp-ppob::before{content:"";position:absolute;left:0;right:0;top:0;height:30px;background:#11806f}
.tp-ppob u{z-index:1;top:16px;left:10px;width:auto;right:10px;height:26px;border-radius:7px;background:#fff;box-shadow:inset -22px 0 0 #f5a524}
.tp-ppob i{border-radius:50%;background:#dcefea;aspect-ratio:1;height:auto;align-self:start}
.imgprev-w img{background:#1d2230;border-color:#1d2230}

/* ===== OtomaX: kartu koneksi per supplier ===== */
.oc-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin:6px 0 14px}
.oc-head b{font-size:16px;letter-spacing:-.01em}
.oc-empty{text-align:center;padding:36px 22px}.oc-empty b{font-size:15px}.oc-empty p{margin:6px auto 16px;max-width:520px}
.oc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,540px),1fr));gap:18px;margin-bottom:20px;align-items:start}
.oc{background:#fff;border:1px solid var(--bd);border-radius:14px;box-shadow:0 1px 2px rgba(16,24,40,.04);display:flex;flex-direction:column;min-width:0;overflow:hidden}
.oc-off{background:#fcfcfd}
.oc-top{display:flex;align-items:center;gap:14px;padding:18px 20px 16px}
.oc-av{width:42px;height:42px;border-radius:11px;background:var(--ac-s);color:var(--ac);display:grid;place-items:center;font-weight:700;font-size:14px;letter-spacing:.02em;flex:none}
.oc-off .oc-av{background:#f1f2f5;color:#8a93a6}
.oc-id{flex:1;min-width:0}
.oc-id h3{margin:0;font-size:15.5px;font-weight:700;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.oc-id small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.oc-stats{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--bd2);border-bottom:1px solid var(--bd2);background:#fafbfc}
.oc-stats>div{padding:12px 16px;min-width:0}
.oc-stats>div+div{border-left:1px solid var(--bd2)}
.oc-stats span{display:block;font-size:11.5px;font-weight:600;color:var(--mut)}
.oc-stats b{display:block;font-size:16px;font-weight:700;margin:2px 0 1px;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.oc-stats small{font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.oc-stats small .tag{font-size:10.5px;padding:1px 7px}
.oc-meta{margin:0;padding:14px 20px 6px;display:grid;grid-template-columns:1fr 1fr;gap:10px 20px}
.oc-meta>div{min-width:0}
.oc-meta dt{font-size:11.5px;font-weight:600;color:var(--mut);margin-bottom:2px}
.oc-meta dd{margin:0;font-size:13px;color:var(--tx);overflow-wrap:anywhere}
.oc-meta code{font-size:12.5px}
.oc-hint{margin:6px 20px 0;padding:8px 12px;border-radius:9px;background:#fffbeb;border:1px solid #fef3c7;color:#92400e;font-size:12.5px}
.oc-cb{margin:14px 20px 0;padding:12px 14px;border:1px dashed #dfe3ea;border-radius:10px;background:#fcfcfd}
.oc-cb-l b{font-size:12.5px}.oc-cb-l small{margin-top:1px}
.oc-url{display:flex;gap:8px;align-items:center;margin-top:9px}
.oc-url code{flex:1;min-width:0;padding:6px 9px;background:#fff;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;word-break:normal}
.oc-act{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-top:16px;padding:12px 20px;border-top:1px solid var(--bd2);background:#fafbfc}
.oc-act-main,.oc-act-more{display:flex;flex-wrap:wrap;gap:6px}
.oc-act form{display:inline-flex;margin:0}
@media (max-width:640px){
  .oc-head{flex-direction:column;align-items:stretch}
  .oc-top{padding:16px}
  .oc-stats{grid-template-columns:1fr 1fr}
  .oc-stats>div:nth-child(3){border-left:0}
  .oc-stats>div:nth-child(n+3){border-top:1px solid var(--bd2)}
  .oc-meta{grid-template-columns:1fr;padding:14px 16px 6px}
  .oc-cb,.oc-hint{margin-left:16px;margin-right:16px}
  .oc-act{padding:12px 16px}
}
/* Pesanan: kolom Supplier — beri ruang cukup untuk kolom Tujuan di layar lebar */
@media (min-width:1600px){.otbl .c-tgt{min-width:170px}.otbl .c-prod{min-width:140px}}

/* ===== DOKU: daftar channel (centang + nama + BIN + tes) ===== */
.dch-h{margin:4px 0 8px}.dch-h b{display:block}
.dch{border:1px solid var(--bd);border-radius:10px;margin-bottom:16px}
.dch table{width:100%}
.dch td{vertical-align:middle}
.dch td input[type=checkbox]{width:18px;height:18px}
.dch td input:not([type=checkbox]){width:100%;min-width:120px;margin:0}
.dch td small code{font-size:11px}
.dch tr.dch-g td{background:#f8f9fb;font-size:11.5px;font-weight:700;color:var(--mut);padding-top:8px;padding-bottom:8px}
@media (max-width:640px){.dch td:nth-child(3) input{min-width:110px}}
/* Sub Provider (kelompok nominal di halaman beli) */
#pSubL[hidden],.sp-save[hidden],.sp-tw tr[hidden]{display:none}
.sp-intro{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.sp-intro-t{flex:1 1 380px;min-width:0}.sp-intro-t b{display:block;font-size:15px;margin-bottom:6px}.sp-intro-t p{margin:0 0 8px;color:var(--tx2);line-height:1.55;max-width:640px}.sp-intro-t p:last-child{margin:0}
.sp-demo{flex:0 1 300px;padding:14px;border-radius:14px;background:var(--bg);border:1px dashed var(--bd)}.sp-demo small{margin-bottom:8px}
.sp-chips{display:flex;flex-wrap:wrap;gap:7px}
.sp-chips span{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:999px;border:1px solid var(--bd);background:#fff;font-size:13px;font-weight:600;color:var(--tx)}
.sp-chips span.on{background:var(--ac);border-color:var(--ac);color:#fff}
.sp-chips em{font-style:normal;font-size:11px;font-weight:700;min-width:18px;padding:1px 6px;border-radius:999px;background:var(--ac-s);color:var(--ac);text-align:center}
.sp-prev-h{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:12px}.sp-prev-h b{font-size:15px}
.sp-prev .small{margin:10px 0 0}
.sp-cols{display:grid;grid-template-columns:minmax(330px,420px) minmax(0,1fr);gap:20px;align-items:start}
.sp-cols>.panel{margin-bottom:0}
.sp-h{display:flex;align-items:center;gap:10px;margin:0 0 6px;font-size:15px}
.sp-h i{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--ac);color:#fff;font-style:normal;font-size:13px;font-weight:700;flex:none}
.sp-step>p.small{margin:0 0 14px;line-height:1.5}
.sp-lbl{display:block;font-weight:600;font-size:13.5px;margin-bottom:7px}
.sp-row{display:flex;gap:8px}
.sp-step input:not([type=checkbox]),.sp-step select{font:inherit;font-size:14px;padding:9px 11px;border:1px solid #dcdfe6;border-radius:9px;background:#fff;color:var(--tx);min-width:0;outline:none}
.sp-step input:not([type=checkbox]):focus,.sp-step select:focus{border-color:var(--ac);box-shadow:0 0 0 3px rgba(47,91,234,.13)}
.sp-row input{flex:1}
.sp-sug{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:10px}.sp-sug .small{display:inline;margin-right:2px}
.sp-sg{font:inherit;font-size:12px;font-weight:600;padding:4px 10px;border-radius:999px;border:1px dashed #c9cdd6;background:#fff;color:var(--tx2);cursor:pointer}
.sp-sg:hover{border-color:var(--ac);color:var(--ac)}
.sp-auto{margin-top:18px;padding:14px;border-radius:12px;background:var(--ac-s)}.sp-auto p{margin:0 0 10px;color:var(--tx2);line-height:1.5}
.sp-list{list-style:none;margin:18px 0 10px;padding:0;border:1px solid var(--bd);border-radius:12px;overflow:hidden}
.sp-list li{display:flex;align-items:center;gap:10px;padding:9px 10px;border-top:1px solid var(--bd2)}.sp-list li:first-child{border-top:0}
.sp-ord{display:grid;place-items:center;width:24px;height:24px;border-radius:7px;background:var(--bg);color:var(--mut);font-size:12px;font-weight:700;flex:none}
.sp-ren{flex:1;display:flex;gap:6px;min-width:0}.sp-ren input{flex:1;width:100%;padding:7px 9px!important}
.sp-n{font-size:12px;color:var(--mut);white-space:nowrap;font-variant-numeric:tabular-nums}
.sp-act{display:flex;gap:4px;flex:none}.sp-act form{margin:0}
.sp-ib{display:grid;place-items:center;width:30px;height:30px;border-radius:8px;border:1px solid var(--bd);background:#fff;color:var(--tx2);cursor:pointer;padding:0}
.sp-ib svg{width:15px;height:15px;fill:currentColor}
.sp-ib:hover:not(:disabled){border-color:var(--ac);color:var(--ac)}.sp-ib:disabled{opacity:.35;cursor:default}
.sp-del:hover:not(:disabled){border-color:#fecaca!important;color:var(--bad)!important;background:#fef2f2}
.sp-ib:focus-visible,.sp-sg:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
.sp-move{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px;border-radius:12px;background:var(--bg);margin-bottom:12px}
.sp-cnt{font-size:12.5px;font-weight:600;color:var(--tx2);padding:0 4px;white-space:nowrap}
.sp-f{margin-left:auto}
.sp-tw{border:1px solid var(--bd);border-radius:12px;max-height:620px;overflow:auto}
.sp-tw table{margin:0;min-width:0}.sp-tw td{vertical-align:middle;padding:10px 14px}.sp-tw th{padding:11px 14px}.sp-tw td:nth-child(3){white-space:nowrap}.sp-tw thead th{position:sticky;top:0;z-index:1}
.sp-tw td small{margin-top:2px}
.sp-sel{width:100%;min-width:150px;max-width:230px}.sp-sel.chg{border-color:var(--warn)!important;background:#fffbeb}
.sp-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:14px}
.sp-foot .small{display:inline}.sp-foot .warn{color:var(--warn);font-weight:600}
@media(max-width:1100px){.sp-cols{grid-template-columns:1fr}}
@media(max-width:900px){.sp-tw{max-height:none;overflow:visible}}
@media(max-width:600px){.sp-f{margin-left:0;width:100%}.sp-move select{flex:1 1 160px}.sp-list li{flex-wrap:wrap}.sp-ren{flex-basis:calc(100% - 40px)}.sp-n{margin-left:34px}.sp-act{margin-left:auto}.sp-sel{max-width:none}}
/* Sub Provider: hasil deteksi otomatis */
.sp-det{border-color:color-mix(in srgb,var(--ac) 35%,var(--bd));scroll-margin-top:90px}
.sp-dg{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px;margin-top:12px}
.sp-dc{border:1px solid var(--bd);border-radius:12px;padding:12px 14px;background:#fff;min-width:0}
.sp-dh{display:flex;align-items:center;gap:8px;margin-bottom:8px;min-width:0}.sp-dh b{font-size:14px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sp-dh .tag{flex:none}.sp-dh em{flex:none;font-style:normal;margin-left:auto;font-size:12px;color:var(--mut);font-variant-numeric:tabular-nums;white-space:nowrap}
.sp-dc ul{margin:0 0 8px;padding-left:18px;font-size:13px;color:var(--tx2);line-height:1.6}.sp-dc li{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sp-dc small{margin:0;line-height:1.45}
.sp-dact{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:16px}.sp-dact .small{display:inline}
/* Formulir impor: pilihan sub provider */
.g3.imp-g{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr) minmax(0,1fr) minmax(150px,.75fr)}
.g3.imp-g>.imp-new{order:5;grid-column:1/-1;max-width:420px;margin-top:-6px}.form .imp-new[hidden]{display:none}
.form .imp-hint{margin:-6px 0 14px;line-height:1.5}
@media(max-width:1200px){.g3.imp-g{grid-template-columns:1fr 1fr}}
@media(max-width:1200px){.g3.imp-g>.imp-new{grid-column:auto;max-width:none;margin-top:0;order:0}.g3.imp-g>label:has(>button){order:6}}
@media(max-width:800px){.g3.imp-g{grid-template-columns:1fr}}