:root{--bg:#0f172a;--side:#17304a;--side2:#243f59;--card:#111827;--card2:#162033;--txt:#e5e7eb;--muted:#94a3b8;--line:#2b3953;--blue:#3498db;--green:#22c55e;--red:#ef4444;--yellow:#f59e0b;--cyan:#06b6d4;--purple:#8b5cf6;--dark:#0b1220}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--txt);font-family:Inter,system-ui,Segoe UI,Arial,sans-serif}.hidden{display:none!important}button{font-family:inherit}.login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}.loginbox{width:min(430px,96vw);background:var(--card);border:1px solid var(--line);border-radius:16px;padding:24px;box-shadow:0 18px 60px #0008}.loginbox h1{margin:0 0 8px;color:#38bdf8}.app{display:flex;min-height:100vh}.sidebar{width:260px;background:var(--side);border-right:1px solid #31465d;position:fixed;left:0;top:0;bottom:0;overflow:auto;z-index:20}.brand{padding:22px;border-bottom:1px solid #31465d}.brand h2{margin:0;color:#38bdf8}.brand small{display:block;margin-top:8px}.nav{padding:10px}.nav-title{margin:18px 8px 8px;color:#9db2c8;font-size:12px;font-weight:800}.nav button{display:block;width:100%;border:0;background:transparent;color:#f1f5f9;text-align:left;padding:12px 14px;border-radius:8px;cursor:pointer;font-weight:700}.nav button:hover,.nav button.active{background:var(--side2)}.nav .danger{background:var(--red);text-align:center;margin-top:12px}.main{margin-left:260px;width:calc(100% - 260px);padding:22px}.top{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px 22px;margin-bottom:18px;display:flex;align-items:center;justify-content:space-between;gap:12px}.top h1{margin:0}.mobilebar{display:none;position:sticky;top:0;background:var(--side);z-index:30;padding:10px;border-bottom:1px solid #31465d}.hamb{border:0;background:var(--blue);color:white;border-radius:8px;padding:10px 12px;font-weight:900}.overlay{display:none;position:fixed;inset:0;background:#0008;z-index:15}.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px;margin-bottom:18px}.card h2{margin-top:0}.grid{display:grid;gap:12px}.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.stats{display:grid;grid-template-columns:repeat(7,minmax(130px,1fr));gap:12px}.stat{background:var(--card2);border:1px solid var(--line);border-radius:12px;padding:14px;color:#cbd5e1}.stat b{display:block;margin-top:8px;font-size:22px;color:white}.filters{display:grid;grid-template-columns:2fr repeat(5,1fr);gap:10px;margin-top:12px}.filterbar{display:flex;gap:10px;align-items:center;margin-top:12px}.filterbar input{flex:1}.filter-toggle{min-width:48px;padding:11px 14px;border-radius:8px;border:1px solid var(--line);background:var(--card2);color:#e5e7eb;font-weight:900;cursor:pointer}.filter-panel{display:grid;grid-template-columns:repeat(6,minmax(140px,1fr));gap:10px;margin-top:10px}.filter-panel.hidden{display:none!important}.master-filter-panel{display:grid;grid-template-columns:repeat(6,minmax(140px,1fr));gap:10px;margin-top:10px}.master-filter-panel.hidden{display:none!important}input,select,textarea{width:100%;background:var(--dark);color:#e5e7eb;border:1px solid var(--line);border-radius:8px;padding:11px}textarea{min-height:150px;font-family:ui-monospace,Consolas,monospace}.btn{border:0;border-radius:8px;padding:11px 14px;color:#fff;font-weight:800;cursor:pointer;white-space:nowrap}.btn-blue{background:var(--blue)}.btn-green{background:var(--green)}.btn-red{background:var(--red)}.btn-yellow{background:var(--yellow)}.btn-gray{background:#64748b}.btn-cyan{background:var(--cyan)}.btn-purple{background:var(--purple)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-active{box-shadow:0 0 0 2px #e5e7eb66 inset,0 0 0 1px #38bdf866;filter:brightness(1.12)}.btn-loading{position:relative;pointer-events:none;opacity:.65}.table{width:100%;border-collapse:collapse}.table th,.table td{border-bottom:1px solid var(--line);padding:12px;text-align:left;vertical-align:top}.table th{background:#0b1220;color:#dbeafe}.small{color:var(--muted);font-size:13px}.badge{display:inline-block;border-radius:999px;padding:4px 8px;font-weight:800;font-size:12px;margin:1px}.b-green{background:#14532d;color:#bbf7d0}.b-yellow{background:#713f12;color:#fde68a}.b-red{background:#7f1d1d;color:#fecaca}.b-blue{background:#1e3a8a;color:#bfdbfe}.b-purple{background:#4c1d95;color:#ddd6fe}.b-gray{background:#334155;color:#cbd5e1}.ipbtn{margin-top:5px;padding:6px 8px;font-size:12px;border-radius:7px;background:#0ea5e9;color:white;border:0;font-weight:800;cursor:pointer}.ipbtn.remote{background:#2563eb;margin-left:4px}.iptext{display:block;color:#93c5fd;font-size:12px;margin-top:4px}.warn{border-left:4px solid var(--yellow);background:#2a2110;color:#fde68a;padding:10px;border-radius:8px;margin:10px 0}.okbox{border-left:4px solid var(--green);background:#12301e;color:#bbf7d0;padding:10px;border-radius:8px;margin:10px 0}.modal{position:fixed;inset:0;background:#0009;display:flex;align-items:center;justify-content:center;padding:18px;z-index:50}.modalbox{background:var(--card);border:1px solid var(--line);border-radius:14px;width:min(850px,96vw);max-height:90vh;overflow:auto;padding:18px}.money{font-weight:900;color:#86efac}.wide{min-width:1180px}.scroll{overflow-x:auto;overflow-y:hidden;max-width:100%;-webkit-overflow-scrolling:touch;padding-bottom:8px}.desktop-table{overflow-x:auto;max-width:100%}.table th:last-child,.table td:last-child{position:sticky;right:0;background:#0f172a;z-index:2;box-shadow:-8px 0 14px #0004}.table th:last-child{background:#0b1220;z-index:3}.split{display:grid;grid-template-columns:repeat(2,minmax(250px,1fr));gap:12px}.progresswrap{background:#0b1220;border:1px solid var(--line);border-radius:12px;overflow:hidden}.progressbar{height:18px;background:linear-gradient(90deg,#22c55e,#06b6d4);width:0;transition:.25s}.metric{background:#0b1220;border:1px solid var(--line);border-radius:10px;padding:10px;min-width:120px}.metric b{font-size:20px;display:block;color:#fff}.wa{color:#86efac;text-decoration:none;font-weight:900}.actions{display:flex;gap:8px;flex-wrap:wrap}.actions .btn{min-width:78px}.toast{position:fixed;right:18px;bottom:18px;z-index:90;background:#0b1220;border:1px solid var(--line);border-left:4px solid var(--green);border-radius:12px;padding:12px 14px;box-shadow:0 10px 35px #0008;color:#e5e7eb;font-weight:800}.btn-sm{padding:9px 11px;font-size:13px}.checkcell{display:flex;gap:8px;align-items:center}.checkcell input{width:auto}.nowrap{white-space:nowrap}.deleted-row{opacity:.62;position:relative}.deleted-row td{border-top:2px solid var(--red);border-bottom:2px solid var(--red)!important}.master-trash-row{opacity:.65;border-left:3px solid var(--red)}.master-toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:10px 0}.deleted-stamp{display:inline-block;border:1px solid var(--red);color:#fecaca;background:#7f1d1d;padding:4px 8px;border-radius:8px;font-weight:900;margin-top:4px}.bulkbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:12px 0}.syncbox{position:fixed;right:18px;top:18px;z-index:80;background:#0b1220;border:1px solid var(--line);border-radius:12px;padding:10px 12px;box-shadow:0 10px 35px #0008;min-width:280px}.syncbox b{display:block;margin-bottom:6px}.syncbarwrap{background:#162033;border-radius:999px;overflow:hidden}.syncbar{height:9px;background:linear-gradient(90deg,#22c55e,#06b6d4);width:0;transition:.2s}.cachepill{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:#0b1220;color:#bfdbfe;border-radius:999px;padding:7px 10px;font-size:12px;font-weight:800}.cachepill button{border:0;background:transparent;color:#bfdbfe;font-weight:900;cursor:pointer;padding:0}.cachepill button:hover{text-decoration:underline}.topright{display:flex;align-items:center;gap:12px;justify-content:flex-end;flex-wrap:wrap}@media(max-width:700px){.topright{justify-content:flex-start;margin-top:10px}.cachepill{font-size:11px;padding:6px 9px}}.setoran-grid{display:grid;grid-template-columns:repeat(4,minmax(150px,1fr));gap:10px;margin:12px 0}.setoran-form{background:#0b1220;border:1px solid var(--line);border-radius:12px;padding:12px;margin:12px 0}.pot-row{display:grid;grid-template-columns:160px 1fr auto auto auto;gap:8px;margin:8px 0}.status-pill{display:inline-block;border-radius:999px;padding:5px 10px;font-weight:900;font-size:12px}.st-pending{background:#713f12;color:#fde68a}.st-approved{background:#14532d;color:#bbf7d0}.st-rejected{background:#7f1d1d;color:#fecaca}.setoran-card{background:var(--card2);border:1px solid var(--line);border-radius:12px;padding:12px;margin:10px 0}@media(max-width:700px){.setoran-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.pot-row{grid-template-columns:1fr}.setoran-form .row{display:grid;grid-template-columns:1fr}.setoran-form .btn{width:100%}}
.mobile-cards{display:none}.client-card,.master-card{background:var(--card2);border:1px solid var(--line);border-radius:14px;padding:12px;margin:10px 0;box-shadow:0 8px 24px #0003}.client-card-head,.master-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:8px}.client-title,.master-title{font-size:15px;font-weight:900;color:#fff;line-height:1.25}.client-sub,.master-sub{color:#93c5fd;font-size:12px;margin-top:3px;word-break:break-word}.kv-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:10px 0}.kv{background:#0b1220;border:1px solid #22304a;border-radius:10px;padding:8px}.kv span{display:block;color:var(--muted);font-size:11px;margin-bottom:3px}.kv b{font-size:13px;color:#f8fafc;word-break:break-word}.mobile-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}.mobile-actions .btn{width:100%;padding:11px 8px}.mobile-actions .full{grid-column:1/-1}.mobile-select-row{display:flex;align-items:center;gap:8px}.mobile-select-row input{width:auto}.mobile-search-note{display:none;color:#94a3b8;font-size:12px;margin:8px 0}.mobile-card-bulk{display:none}.desktop-table{display:block}
@media(max-width:1100px){.stats{grid-template-columns:repeat(2,1fr)}.filters{grid-template-columns:1fr}.wide{min-width:860px}}@media(max-width:900px){.mobilebar{display:flex;align-items:center;gap:10px}.sidebar{transform:translateX(-105%);transition:.2s;width:280px}.sidebar.open{transform:translateX(0)}.overlay.show{display:block}.main{margin-left:0;width:100%;padding:8px}.top{display:block;padding:14px}.card{padding:12px;border-radius:12px}.split{grid-template-columns:1fr}.stats{grid-template-columns:repeat(2,minmax(130px,1fr));gap:8px}.filters{grid-template-columns:1fr}.app{display:block}.table th,.table td{padding:9px 8px}.wide{min-width:760px}.actions{gap:6px}.actions .btn{min-width:72px;padding:9px 10px}.scroll{border:1px solid var(--line);border-radius:10px}.toast{left:10px;right:10px;bottom:10px}}@media(max-width:480px){.stats{grid-template-columns:1fr}.wide{min-width:720px}}

@media(max-width:700px){
  body{font-size:14px;overflow-x:hidden;background:#0b1220}.mobilebar{display:flex;align-items:center;gap:10px;position:sticky;top:0;padding:10px 12px;background:#132943;box-shadow:0 6px 20px #0005}.hamb{padding:11px 13px}.main{margin-left:0;width:100%;padding:10px;overflow-x:hidden}.top{padding:14px;margin:8px 0 12px;border-radius:14px}.top h1{font-size:20px;line-height:1.25}.top .small{font-size:12px}.card{padding:13px;margin-bottom:12px;border-radius:14px}.card h2{font-size:20px;margin-bottom:12px}.row{align-items:stretch}.row>h2{margin-bottom:8px}.stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.stat{padding:12px;min-height:86px}.stat b{font-size:20px;line-height:1.15}.filters{display:grid;grid-template-columns:1fr!important;gap:9px}.filterbar{display:grid;grid-template-columns:1fr auto;gap:8px}.filter-panel,.master-filter-panel{grid-template-columns:1fr!important}.grid{grid-template-columns:1fr!important}input,select,textarea{font-size:14px;padding:12px;border-radius:10px}.desktop-table{display:none!important}.mobile-cards{display:block}.mobile-card-bulk{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:8px 0}.mobile-search-note{display:block}.wide{min-width:0}.scroll{overflow:visible;border:0}.bulkbar{width:100%;display:grid;grid-template-columns:1fr;gap:8px}.bulkbar.hidden{display:none!important}.bulkbar .btn{width:100%}.client-card,.master-card{margin:10px 0;padding:12px;border-radius:14px}.client-card.pending,.master-card.deleted{border-color:var(--red);box-shadow:0 0 0 1px #ef444455 inset}.client-card-head,.master-card-head{gap:8px}.client-title,.master-title{font-size:15px}.kv-grid{grid-template-columns:1fr 1fr;gap:7px}.kv{padding:8px}.actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%}.actions .btn{width:100%;min-width:0}.mobile-actions{grid-template-columns:1fr 1fr}.btn{border-radius:10px}.btn-sm{font-size:13px;padding:10px 8px}.modal{align-items:flex-start;padding:8px}.modalbox{width:100%;max-height:96vh;padding:12px;border-radius:14px}.split{grid-template-columns:1fr!important}.syncbox{left:10px;right:10px;top:58px;min-width:0}.toast{left:10px;right:10px}.sidebar{width:286px}.brand{padding:18px}.nav button{padding:13px 14px}.checkcell input,.mobile-select-row input{transform:scale(1.12)}
}
@media(max-width:380px){.stats{grid-template-columns:1fr 1fr}.stat b{font-size:18px}.kv-grid{grid-template-columns:1fr}.mobile-actions{grid-template-columns:1fr}}

/* v0.6.5 mobile page polish */
.mobile-summary-cards{display:none}
.summary-card{background:var(--card2);border:1px solid var(--line);border-radius:14px;padding:12px;margin:10px 0;box-shadow:0 8px 24px #0003}
.summary-card h3{margin:0 0 8px;font-size:16px;color:#fff}
.summary-kv{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.summary-kv div{background:#0b1220;border:1px solid #22304a;border-radius:10px;padding:8px}
.summary-kv span{display:block;color:var(--muted);font-size:11px;margin-bottom:4px}
.summary-kv b{display:block;color:#f8fafc;font-size:14px;word-break:break-word}
.modal-actions-sticky{display:flex;gap:10px;justify-content:flex-end;position:sticky;bottom:0;background:linear-gradient(180deg,rgba(17,24,39,.88),var(--card));padding:12px 0 0;margin-top:12px;border-top:1px solid var(--line)}
@media(max-width:700px){
  .mobile-summary-cards{display:block}
  .summary-table-wrap{display:none!important}
  .summary-kv{grid-template-columns:1fr 1fr}
  #page-billing .card,#page-setoran .card,#page-users .card{padding:14px;border-radius:16px}
  #page-billing h2,#page-setoran h2,#page-users h2{font-size:22px;line-height:1.2}
  #setoranMonth{width:100%!important;max-width:none!important}
  .modal{align-items:flex-start;padding:6px;overflow:auto}
  .modalbox{width:100%;max-height:none;min-height:calc(100vh - 12px);padding:12px 12px 18px;border-radius:14px;overflow:visible}
  .modalbox h2{font-size:20px;margin:0 0 8px}
  .modal-actions-sticky{margin-left:-12px;margin-right:-12px;padding:12px;background:var(--card);box-shadow:0 -8px 22px #0007}
  .modal-actions-sticky .btn{width:100%}
}


/* v0.11.50F Dashboard Compact View */
.dashboard-compact-note{color:var(--muted);font-size:12px;margin:8px 0}
.dashboard-compact-actions{display:flex;gap:8px;flex-wrap:wrap}
.dashboard-compact-actions .btn{min-width:86px}
.dashboard-router-cell .badge{margin-bottom:4px}
.dashboard-tagihan-cell b{display:block}
.dashboard-mainfilter-note{font-size:12px;color:var(--muted);margin-top:7px}
@media(max-width:700px){
  .dashboard-compact-actions{display:grid;grid-template-columns:1fr 1fr;width:100%}
  .dashboard-compact-actions .btn{width:100%;min-width:0}
}
/* v0.11.50I Dashboard mobile polish */
.pay-badge{font-size:13px;padding:6px 11px;letter-spacing:.2px}
@media(max-width:700px){
  .client-card.dash-card-isolir{border-color:#ef4444;box-shadow:0 0 0 1px #ef444455 inset,0 8px 24px #0003}
  .client-card.dash-card-belum{border-color:#f59e0b;box-shadow:0 0 0 1px #f59e0b55 inset,0 8px 24px #0003}
  .client-card.dash-card-ok{border-color:#22c55e;box-shadow:0 0 0 1px #22c55e55 inset,0 8px 24px #0003}
  .client-card .pay-badge{font-size:13px;padding:6px 12px}
}

/* v0.11.50J2 Master Area VLAN inline edit */
.master-area-vlan-cell{display:grid;grid-template-columns:minmax(100px,180px) auto;gap:8px;align-items:center;max-width:280px}
.master-area-vlan-cell input{padding:8px 10px;font-size:13px}
.master-area-vlan-cell .btn{padding:8px 10px;min-width:54px}
/* v0.11.55E6 Non-Billing Sync Exclusion Audit + Financial Guard. */
.monitor-grid{display:grid;grid-template-columns:repeat(3,minmax(160px,1fr));gap:10px;margin:12px 0}.monitor-box{background:#0b1220;border:1px solid var(--line);border-radius:12px;padding:10px}.monitor-box span{display:block;color:var(--muted);font-size:12px;margin-bottom:4px}.monitor-box b{display:block;color:#fff;font-size:15px;word-break:break-word}.monitor-section{margin-top:12px}.monitor-section h3{margin:8px 0}.ping-ok{color:#86efac}.ping-bad{color:#fecaca}.traffic-live{font-size:18px;color:#bfdbfe}.monitor-progress-wrap{background:#0b1220;border:1px solid var(--line);border-radius:999px;overflow:hidden;margin:10px 0 8px}.monitor-progress-bar{height:12px;background:linear-gradient(90deg,#22c55e,#06b6d4);width:0%;transition:width .3s}.monitor-progress-text{font-size:13px;color:#bfdbfe;font-weight:800}.monitor-wait-note{color:#facc15;font-size:12px;margin-top:6px}@media(max-width:700px){.monitor-grid{grid-template-columns:1fr}.monitor-box b{font-size:14px}}

/* v0.11.57F monitor label cleanup + equal action buttons */
.action-btn{min-width:112px;min-height:38px;display:inline-flex!important;align-items:center;justify-content:center;text-align:center;line-height:1.15;margin:0!important}
.action-placeholder{min-width:112px;min-height:38px;display:inline-flex;align-items:center;justify-content:center;text-align:center;color:#93c5fd;font-size:12px}
.dashboard-compact-actions{align-items:stretch}
.dashboard-compact-actions .btn,.dashboard-compact-actions .ipbtn,.dashboard-compact-actions .action-placeholder{min-width:112px;min-height:38px}
.mobile-actions .btn,.mobile-actions .ipbtn,.mobile-actions .action-placeholder{width:100%;min-height:40px}
@media(max-width:700px){.dashboard-compact-actions .btn,.dashboard-compact-actions .ipbtn,.dashboard-compact-actions .action-placeholder{width:100%;min-width:0}.action-btn{width:100%;min-width:0}.action-placeholder{width:100%;min-width:0}}

/* v0.11.57J Master Data compact action/status cleanup */
.master-select-controls{min-width:76px;max-width:84px;gap:4px;align-items:flex-start}
.master-select-controls .select-all-btn{padding:5px 6px;font-size:11px;border-radius:7px;min-height:27px;line-height:1.05;width:74px;justify-content:center}
.master-select-controls .select-all-btn .box{width:11px;height:11px;font-size:9px;margin-right:3px}
.master-action-stack{display:flex!important;flex-direction:column;gap:6px;align-items:stretch;min-width:98px;max-width:118px}
.master-action-stack .btn{width:100%;min-width:0;min-height:36px;padding:8px 9px;margin:0!important;display:inline-flex;align-items:center;justify-content:center;text-align:center;font-size:13px}
.master-mobile-actions{display:grid!important;grid-template-columns:1fr;gap:8px;width:100%}
.master-mobile-actions .btn{width:100%;min-width:0;min-height:40px;display:inline-flex;align-items:center;justify-content:center;text-align:center}
.master-data-status{min-width:150px}
.master-data-status .badge{margin:2px 2px 3px 0}
.master-data-status .small{line-height:1.35}
@media(max-width:700px){
  .mobile-card-bulk .btn{min-height:34px;padding:8px 9px;font-size:12px}
  .master-select-controls{min-width:0;max-width:none}
  .master-select-controls .select-all-btn{width:72px;padding:5px 5px;font-size:10.5px}
  .master-action-stack{min-width:92px;max-width:110px}
}
.master-nonbilling-router-tools{display:flex;flex-direction:column;gap:6px;margin-top:8px;align-items:flex-start}.master-nonbilling-router-actions{display:flex;gap:6px;flex-wrap:wrap}.master-nonbilling-router-actions .btn{padding:7px 9px;font-size:12px;border-radius:8px}.master-nonbilling-router-tools .iptext{margin-top:0}.master-nonbilling-router-tools .badge{margin-left:0}@media(max-width:700px){.master-nonbilling-router-actions{display:grid;grid-template-columns:1fr 1fr;width:100%}.master-nonbilling-router-actions .btn{width:100%}}
/* CRM Universal T2F12 hide legacy autosync UI */
.autosync-box,.auto-sync-box,[data-autosync-box="1"]{display:none!important;}

/* T2F46B2 CRM to MTC header switch */
.app-switch-btn{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);background:#0ea5e9;color:#fff;text-decoration:none;border-radius:999px;padding:8px 13px;font-size:13px;font-weight:900;line-height:1;box-shadow:0 1px 0 #0004}
.app-switch-btn:hover{filter:brightness(1.08)}
@media(max-width:700px){.app-switch-btn{padding:7px 11px;font-size:12px}}