*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Segoe UI',system-ui,-apple-system,sans-serif;background:#f2f4f8;color:#1a1a2e;min-height:100vh}
.wrap{max-width:960px;margin:0 auto;padding:20px 14px}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:18px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.05rem;color:#E84393}
.brand .dot{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,#E84393,#16213e);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1rem}
.actions{display:flex;gap:8px;flex-wrap:wrap}
button{cursor:pointer;font-family:inherit;border:none;border-radius:10px;padding:9px 14px;font-size:.85rem;font-weight:600}
.btn{background:#E84393;color:#fff}
.btn.ghost{background:#fff;color:#E84393;border:1.5px solid #c8d0e0}
.btn.danger{background:#fff;color:#dc3545;border:1.5px solid #f0c0c6}
.card{background:#fff;border-radius:14px;padding:18px;box-shadow:0 2px 10px rgba(232,67,147,.06);margin-bottom:14px}
.card h3{font-size:.8rem;text-transform:uppercase;letter-spacing:.6px;color:#6c757d;margin-bottom:12px}
.grid4{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.stat{background:#f8fafc;border:1.5px solid #eef1f6;border-radius:12px;padding:12px}
.stat .v{font-size:1.25rem;font-weight:800;color:#E84393}
.stat .l{font-size:.72rem;color:#6c757d;margin-top:2px}
.stat .v.pos{color:#28a745}.stat .v.neg{color:#dc3545}
.store{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid #f0f2f6}
.store:last-child{border-bottom:none}
.store .nm{flex:1;min-width:140px}
.store .nm b{font-size:.95rem}
.store .nm small{display:block;color:#6c757d;font-size:.72rem;margin-top:2px}
.metric{text-align:right;min-width:86px}
.metric .v{font-weight:800;font-size:.92rem}
.metric .l{font-size:.66rem;color:#6c757d}
.badge{display:inline-block;font-size:.64rem;font-weight:700;padding:2px 8px;border-radius:20px}
.badge.ok{background:#e8f5e9;color:#2e7d32}
.badge.warn{background:#fff3e0;color:#C2255C}
.badge.off{background:#fce4ec;color:#dc3545}
.toprow{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px dashed #e8ecf2;font-size:.9rem}
.toprow:last-child{border-bottom:none}
.toprow .rank{width:26px;color:#6c757d;font-weight:700}
.toprow .name{flex:1}
.toprow .val{font-weight:700}
/* auth */
.auth{max-width:380px;margin:6vh auto;background:#fff;border-radius:16px;padding:26px 22px;box-shadow:0 8px 30px rgba(232,67,147,.1)}
.auth h2{color:#E84393;margin-bottom:4px;font-size:1.2rem}
.auth p{color:#6c757d;font-size:.82rem;margin-bottom:18px}
.field{margin-bottom:14px}
.field label{display:block;font-size:.78rem;font-weight:600;color:#1a1a2e;margin-bottom:5px}
.field input{width:100%;padding:11px 12px;border:1.5px solid #d7dde8;border-radius:10px;font-size:.95rem;font-family:inherit}
.field input:focus{outline:none;border-color:#E84393}
.btn-block{width:100%;padding:12px;font-size:.95rem}
.alert{padding:10px 12px;border-radius:10px;font-size:.82rem;margin-bottom:12px}
.alert.err{background:#fce4ec;color:#dc3545}
.alert.ok{background:#e8f5e9;color:#2e7d32}
.hidden{display:none}
.sec{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;flex-wrap:wrap;gap:6px}
.sec h2{font-size:1.05rem;color:#E84393}
.muted{color:#6c757d;font-size:.78rem}
/* ── Kelola Data Cabang (Fase 1) ── */
.mtoolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:14px}
.sinput{flex:1;min-width:170px;padding:9px 10px;border:1.5px solid #d7dde8;border-radius:10px;font-size:.85rem;font-family:inherit;background:#fff}
.tabs{display:flex;gap:4px;background:#eef1f6;padding:4px;border-radius:10px;flex-wrap:wrap}
.tab{padding:7px 12px;border-radius:8px;background:transparent;color:#6c757d;font-size:.8rem;font-weight:700}
.tab.active{background:#fff;color:#E84393;box-shadow:0 1px 4px rgba(232,67,147,.14)}
.mrow{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid #f0f2f6}
.mrow:last-child{border-bottom:none}
.mrow .em{font-size:1.3rem;width:34px;text-align:center;flex-shrink:0}
.mrow .info{flex:1;min-width:0}
.mrow .info b{font-size:.9rem}
.mrow .info small{display:block;color:#6c757d;font-size:.72rem;margin-top:2px}
.mrow .btns{display:flex;gap:6px;flex-shrink:0}
.mbtn{padding:6px 10px;font-size:.75rem;border-radius:8px}
.mbtn.edit{background:#eef3ff;color:#E84393}
.mbtn.del{background:#fdecec;color:#dc3545}
.arch-badge{font-size:.68rem;font-weight:700;color:#6c757d;background:#eef1f6;padding:2px 8px;border-radius:20px;white-space:nowrap}
.overlay{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;padding:16px}
.modal{background:#fff;border-radius:16px;padding:20px;width:100%;max-width:420px;max-height:90vh;overflow:auto}
.modal h2{color:#E84393;font-size:1.1rem;margin-bottom:4px}
.modal .sub{color:#6c757d;font-size:.78rem;margin-bottom:14px}
.mf{margin-bottom:10px}
.mf label{display:block;font-size:.78rem;font-weight:600;color:#1a1a2e;margin-bottom:5px}
.mf input,.mf select{width:100%;padding:10px 11px;border:1.5px solid #d7dde8;border-radius:10px;font-size:.9rem;font-family:inherit;background:#fff}
.mf input:focus,.mf select:focus{outline:none;border-color:#E84393}
.chk{display:flex;gap:8px;align-items:center;font-size:.85rem;font-weight:600;color:#1a1a2e}
.chk input{width:auto}
.cfg-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.cfg-grid .mf{margin:0}.cfg-wide{grid-column:1/-1}
.cfg-toggle{display:flex;align-items:flex-start;gap:8px;padding:9px 10px;border:1px solid #e6eaf0;border-radius:10px;background:#fbfcfe;font-size:.78rem;line-height:1.35}
.cfg-toggle input{margin-top:2px;accent-color:#E84393}.cfg-toggle b{display:block;color:#1a1a2e}.cfg-toggle small{display:block;color:#6c757d;margin-top:2px}
.photo-thumb{width:42px;height:42px;border-radius:10px;object-fit:cover;background:#f3f5f8;border:1px solid #e4e8ee;display:block}.photo-thumb.empty{display:none}
.photo-preview{width:90px;height:90px;border-radius:12px;object-fit:cover;background:#f3f5f8;border:1px dashed #cbd5e1;display:none}
@media(max-width:560px){.cfg-grid{grid-template-columns:1fr}.cfg-wide{grid-column:auto}}

/* ── Ningrat Kelola: shell aplikasi dashboard & UX layar kecil ── */
html{scroll-behavior:smooth}
.dashboard-section{scroll-margin-top:82px}
.brand-copy{display:flex;flex-direction:column;min-width:0;line-height:1.18}
.brand-title{font-size:1rem;font-weight:800;color:#E84393}
.brand-sub{font-size:.72rem;font-weight:650;color:#667085;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.connection-pill{display:inline-flex;align-items:center;gap:5px;font-size:.68rem;font-weight:750;color:#667085;background:#f1f3f7;border:1px solid #e5e9f0;border-radius:99px;padding:4px 7px;white-space:nowrap}
.connection-pill.online{color:#20733d;background:#eaf7ee;border-color:#d0ebd9}.connection-pill.offline{color:#a34b00;background:#fff5e8;border-color:#f5dbb9}
.install-action[hidden]{display:none!important}
.install-action{white-space:nowrap}
.menu-toggle{display:none;width:42px;height:42px;padding:0;border:1.5px solid #d8dee9;background:#fff;color:#1a1a2e;font-size:1.25rem;line-height:1}
.section-nav{display:flex;gap:7px;align-items:center;margin:-4px 0 16px;padding:4px;overflow-x:auto;scrollbar-width:none}.section-nav::-webkit-scrollbar{display:none}
.section-nav button{flex:0 0 auto;background:#fff;color:#596273;border:1px solid #e5e9f0;padding:8px 11px;font-size:.76rem}.section-nav button.active{background:#fff4eb;border-color:#ffb37c;color:#d95000}
.mobile-bottom-nav,.mobile-menu-overlay{display:none}
.dashboard-offline-note{display:none}
@media(max-width:700px){
  body.dashboard-open{padding-bottom:78px}
  .wrap{padding:10px 10px 8px}
  .topbar{position:sticky;top:0;z-index:35;margin:-10px -10px 12px;padding:10px;background:rgba(242,244,248,.97);backdrop-filter:blur(12px);border-bottom:1px solid #e4e8ef}
  .brand{gap:8px;min-width:0;flex:1}.brand .dot,.brand .dot img{width:38px!important;height:38px!important;border-radius:11px!important}
  .brand-title{font-size:.94rem}.brand-sub{max-width:175px;font-size:.67rem}.connection-pill{display:none}
  .actions{display:none}.menu-toggle{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
  .section-nav{display:none}
  .card{border-radius:15px;padding:14px;margin-bottom:11px;box-shadow:0 2px 10px rgba(23,32,51,.055)}
  .card h3{font-size:.75rem;margin-bottom:10px}.sec{margin-bottom:11px}.sec h2{font-size:1rem}.muted{font-size:.76rem}
  .grid4{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.stat{padding:11px}.stat .v{font-size:1.12rem}.stat .l{font-size:.67rem}
  .store{display:grid;grid-template-columns:1fr auto;gap:9px;padding:12px 0}.store .nm{grid-column:1/-1;min-width:0}.store .nm b{font-size:.9rem}.metric{min-width:0;text-align:left}.metric:last-child{text-align:right}
  .mtoolbar{gap:8px;margin-bottom:11px}.sinput{min-width:0;min-height:42px;font-size:16px}.mtoolbar>.sinput:first-child{flex:1 1 100%}
  .tabs{width:100%;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}.tabs::-webkit-scrollbar{display:none}.tab{flex:0 0 auto;padding:8px 10px}
  #btn-add-master,.mtoolbar>.btn{min-height:42px}.cfg-toggle{padding:11px 10px;font-size:.8rem}
  .mrow{gap:8px}.mrow .btns{gap:4px}.mbtn{padding:7px 8px}
  input,select,textarea{font-size:16px!important}
  .mobile-bottom-nav{position:fixed;z-index:40;left:0;right:0;bottom:0;display:grid;grid-template-columns:repeat(4,1fr);gap:0;padding:6px max(8px,env(safe-area-inset-left)) calc(6px + env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-right));background:rgba(255,255,255,.98);border-top:1px solid #e4e8ef;box-shadow:0 -8px 24px rgba(23,32,51,.09)}
  .mobile-bottom-nav button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:51px;padding:4px 2px;background:transparent;color:#6c757d;border-radius:10px;font-size:.62rem;font-weight:750}.mobile-bottom-nav .nav-icon{font-size:1.2rem;line-height:1}.mobile-bottom-nav button.active{color:#e95a00;background:#fff3ea}
  .mobile-menu-overlay{position:fixed;z-index:75;inset:0;background:rgba(15,23,42,.43);padding:0;align-items:flex-end}.mobile-menu-overlay.show{display:flex}.mobile-menu-sheet{width:100%;max-height:84vh;overflow:auto;background:#fff;border-radius:22px 22px 0 0;padding:10px 14px calc(16px + env(safe-area-inset-bottom));box-shadow:0 -14px 35px rgba(15,23,42,.18)}
  .mobile-menu-handle{width:42px;height:4px;border-radius:99px;background:#dce2eb;margin:2px auto 12px}.mobile-menu-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}.mobile-menu-head b{font-size:1rem}.mobile-menu-list{display:grid;gap:5px}.mobile-menu-list button{display:flex;align-items:center;gap:11px;width:100%;min-height:48px;padding:10px 12px;text-align:left;background:#fff;color:#1a1a2e;border:1px solid #e7ebf1;border-radius:12px;font-size:.87rem}.mobile-menu-list button .mi{font-size:1.1rem;width:22px;text-align:center}.mobile-menu-list button.danger{color:#c93343;background:#fffafa;border-color:#f5d3d8}.mobile-menu-list button.install{color:#c84d00;background:#fff7f1;border-color:#ffd5b8}.mobile-menu-list button[hidden]{display:none}
  .dashboard-offline-note{margin:-2px 0 10px;padding:8px 10px;border-radius:10px;background:#fff5e8;color:#925100;font-size:.73rem;line-height:1.35}.dashboard-offline-note.show{display:block}
  .auth{margin:3vh 12px;padding:22px 18px}.auth h2{font-size:1.1rem}
}
@media(min-width:701px){.dashboard-offline-note.show{display:block}.mobile-menu-overlay.show{display:none!important}}

/* Navigasi multi-halaman & modul franchise */
.section-nav a{flex:0 0 auto;background:#fff;color:#596273;border:1px solid #e5e9f0;padding:8px 11px;font-size:.76rem;border-radius:10px;text-decoration:none;font-weight:600;white-space:nowrap}.section-nav a.active{background:#fff4eb;border-color:#ffb37c;color:#d95000}.page-lead{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}.page-lead h1{font-size:1.35rem;color:#1a1a2e;margin-bottom:4px}.page-lead p{font-size:.8rem;color:#6c757d;line-height:1.45}.inline-form{display:flex;align-items:end;gap:8px;flex-wrap:wrap}.inline-form .mf{min-width:145px;flex:1;margin:0}.data-table{width:100%;border-collapse:collapse;font-size:.78rem}.data-table th,.data-table td{padding:9px 8px;border-bottom:1px solid #edf0f4;text-align:left;vertical-align:top}.data-table th{font-size:.67rem;text-transform:uppercase;letter-spacing:.4px;color:#6c757d}.data-table tr:last-child td{border-bottom:0}.table-wrap{overflow-x:auto}.split-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.pill-select{display:flex;gap:7px;flex-wrap:wrap}.supply-balance{font-size:1.25rem;font-weight:800;color:#E84393}.supply-meta{font-size:.72rem;color:#6c757d;line-height:1.45}.order-card{border:1px solid #e7ebf1;border-left:4px solid #e7a52c;border-radius:12px;padding:12px;margin-bottom:10px}.order-card.paid{border-left-color:#28a745}.order-card.cancelled{border-left-color:#9aa2ad;opacity:.72}.order-head{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}.order-head h3{margin:0 0 3px;text-transform:none;letter-spacing:0;font-size:.93rem;color:#1a1a2e}.order-total{font-weight:800;color:#E84393;white-space:nowrap}.order-lines{margin:9px 0;padding:8px 10px;border-radius:9px;background:#f8fafc;font-size:.75rem;line-height:1.55}.order-actions{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}.notice{padding:10px 12px;border:1px solid #f2d59a;border-radius:10px;background:#fff9e9;color:#785614;font-size:.78rem;line-height:1.5;margin-bottom:12px}.notice.info{background:#eef6ff;border-color:#c9ddf5;color:#285b8f}.notice.success{background:#eaf7ee;border-color:#c9e8d2;color:#286c3c}.empty-state{text-align:center;color:#6c757d;padding:24px 12px;font-size:.82rem}.danger-text{color:#dc3545}.success-text{color:#258143}.small-btn{padding:6px 9px;font-size:.72rem}.stock-event-negative{color:#dc3545;font-weight:700}.stock-event-positive{color:#258143;font-weight:700}.mobile-bottom-nav a{text-decoration:none}.mobile-menu-list a{display:flex;align-items:center;gap:11px;width:100%;min-height:48px;padding:10px 12px;text-align:left;background:#fff;color:#1a1a2e;border:1px solid #e7ebf1;border-radius:12px;font-size:.87rem;text-decoration:none;font-weight:600}.mobile-menu-list a .mi{font-size:1.1rem;width:22px;text-align:center}@media(max-width:700px){.split-grid{grid-template-columns:1fr}.page-lead h1{font-size:1.18rem}.mobile-bottom-nav{grid-template-columns:repeat(5,1fr)}.mobile-bottom-nav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:51px;padding:4px 2px;background:transparent;color:#6c757d;border-radius:10px;font-size:.62rem;font-weight:750}.mobile-bottom-nav a.active{color:#e95a00;background:#fff3ea}.data-table{min-width:620px}.inline-form{align-items:stretch}.inline-form .mf{min-width:130px}.order-head{flex-direction:column}.order-total{font-size:1rem}}