@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');
:root{--bl:#0D47A1;--bl2:#1565C0;--bll:#E3F2FD;--yl:#FFD600;--yl2:#FFC107;--yll:#FFF8E1;--gn:#2E7D32;--gnl:#E8F5E9;--rd:#C62828;--rdl:#FFEBEE;--or:#E65100;--orl:#FFF3E0;--bg:#F0F4FF;--white:#fff;--border:#E2E8F0;--text:#0F1729;--gray:#64748b;--shadow:0 1px 3px rgba(0,0,0,.06),0 4px 12px rgba(0,0,0,.04);--sb-w:230px;--tb-h:56px;}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
body{font-family:'Plus Jakarta Sans',system-ui,sans-serif;background:var(--bg);color:var(--text);font-size:14px;line-height:1.5;}
.sidebar{position:fixed;top:0;left:0;width:var(--sb-w);height:100vh;background:#0D2B6B;color:white;display:flex;flex-direction:column;z-index:200;transition:transform .25s;overflow-y:auto;}
.sb-head{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.1);}
.sb-logo{width:38px;height:38px;border-radius:10px;background:var(--yl);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;}
.sb-title{font-size:12px;font-weight:800;color:white;line-height:1.2;}
.sb-user{font-size:10px;color:rgba(255,255,255,.6);}
.sb-close{display:none;background:none;border:none;color:white;font-size:18px;cursor:pointer;margin-left:auto;}
.sb-nav{flex:1;padding:8px 0;}
.nav-group-label{font-size:10px;font-weight:700;color:rgba(255,255,255,.4);text-transform:uppercase;letter-spacing:1px;padding:12px 16px 4px;}
.nav-item{display:flex;align-items:center;gap:10px;padding:10px 16px;color:rgba(255,255,255,.75);text-decoration:none;font-size:13px;font-weight:500;border-radius:8px;margin:1px 8px;transition:.15s;}
.nav-item:hover{background:rgba(255,255,255,.1);color:white;}
.nav-item.active{background:var(--yl);color:#0D2B6B;font-weight:700;}
.ni{font-size:16px;width:22px;text-align:center;}
.session-info{font-size:12px;color:rgba(255,255,255,.5);text-align:center;padding:6px;}
.sb-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:190;}
.main-wrap{margin-left:var(--sb-w);min-height:100vh;display:flex;flex-direction:column;width:calc(100% - var(--sb-w));overflow-x:hidden;}
.topbar{height:var(--tb-h);background:white;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px;padding:0 1.5rem;position:sticky;top:0;z-index:100;box-shadow:var(--shadow);}
.menu-btn{display:none;background:none;border:none;font-size:22px;cursor:pointer;padding:4px;}
.topbar-title{font-size:16px;font-weight:700;color:var(--text);}
.sync-badge{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:20px;font-size:11px;font-weight:600;}
.sync-ok{background:#f0fdf4;color:#16a34a;border:1px solid #bbf7d0;}
.sync-offline{background:#fef2f2;color:#dc2626;border:1px solid #fecaca;}
.page-content{flex:1;padding:1.5rem 2rem;min-width:0;overflow-x:hidden;}
.pg-header{margin-bottom:1rem;}
.pg-header h2{font-size:22px;font-weight:800;color:var(--text);}
.card{background:white;border-radius:12px;border:1px solid var(--border);box-shadow:var(--shadow);}
.card-hdr{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid var(--border);}
.card-title{font-size:14px;font-weight:700;color:var(--text);}
.stats4{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;width:100%;}
.stat{background:white;border-radius:12px;border:1px solid var(--border);padding:16px;display:flex;align-items:center;gap:12px;box-shadow:var(--shadow);}
.stat-icon{font-size:28px;}
.stat-lbl{font-size:11px;color:var(--gray);font-weight:600;text-transform:uppercase;letter-spacing:.5px;}
.stat-val{font-size:22px;font-weight:800;color:var(--text);}
.s-yl{border-left:4px solid var(--yl);}
.s-gn{border-left:4px solid #22c55e;}
.s-or{border-left:4px solid var(--or);}
.s-rd{border-left:4px solid var(--rd);}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.table-scroll{overflow-x:auto;}
.tbl{width:100%;border-collapse:collapse;font-size:13px;}
.tbl thead tr{background:#f8fafc;}
.tbl th{padding:10px 12px;text-align:left;font-weight:700;font-size:12px;color:var(--gray);white-space:nowrap;border-bottom:1px solid var(--border);}
.tbl td{padding:10px 12px;border-bottom:1px solid var(--border);vertical-align:middle;}
.tbl tr:last-child td{border-bottom:none;}
.tbl tr:hover td{background:#f8fafc;}
.plat-tag{background:#EFF6FF;color:#1D4ED8;border:1px solid #BFDBFE;padding:3px 8px;border-radius:6px;font-size:12px;font-weight:700;font-family:monospace;}
.jt{padding:3px 8px;border-radius:6px;font-size:11px;font-weight:700;}
.jt-mobil{background:#EFF6FF;color:#1D4ED8;}
.jt-motor{background:#FFF7ED;color:#C2410C;}
.h-free{color:#22c55e;font-weight:700;}
.h-normal{font-weight:700;}
.input{width:100%;padding:10px 12px;border:1.5px solid var(--border);border-radius:8px;font-size:14px;font-family:inherit;transition:.15s;background:white;color:var(--text);}
.input:focus{outline:none;border-color:var(--bl);box-shadow:0 0 0 3px rgba(13,71,161,.1);}
textarea.input{resize:vertical;}
.input-sm{padding:8px 10px;border:1.5px solid var(--border);border-radius:8px;font-size:13px;font-family:inherit;background:white;color:var(--text);}
.input-sm:focus{outline:none;border-color:var(--bl);}
.form-group{margin-bottom:14px;}
.form-group label{display:block;font-size:13px;font-weight:600;margin-bottom:5px;color:var(--text);}
.btn-primary{background:var(--bl);color:white;border:none;border-radius:8px;padding:10px 18px;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;transition:.15s;}
.btn-primary:hover{background:var(--bl2);}
.btn-primary:disabled{opacity:.5;cursor:not-allowed;}
.btn-ghost{background:white;color:var(--text);border:1.5px solid var(--border);border-radius:8px;padding:10px 18px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;transition:.15s;text-decoration:none;display:inline-block;}
.btn-ghost:hover{border-color:var(--bl);color:var(--bl);}
.btn-login{background:linear-gradient(135deg,var(--bl),var(--bl2));color:white;border:none;border-radius:10px;font-size:15px;font-weight:700;cursor:pointer;font-family:inherit;transition:.15s;}
.pay-btn{padding:8px 14px;border:1.5px solid var(--border);border-radius:8px;background:white;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;transition:.15s;}
.pay-btn.active{background:var(--bl);border-color:var(--bl);color:white;}
.tb{padding:4px 8px;border-radius:6px;border:none;cursor:pointer;font-size:13px;}
.tb-d{background:#fef2f2;color:#dc2626;}
.modal-bg{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:300;align-items:center;justify-content:center;padding:1rem;backdrop-filter:blur(2px);}
.modal-bg.show{display:flex;}
.modal{background:white;border-radius:16px;width:100%;max-width:440px;max-height:90vh;overflow-y:auto;box-shadow:0 24px 64px rgba(0,0,0,.25);animation:mIn .2s ease;}
@keyframes mIn{from{transform:scale(.93) translateY(16px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}
.modal-title{font-size:16px;font-weight:700;padding:16px 20px;border-bottom:1px solid var(--border);}
.modal .form-group{padding:0 20px;}
.modal .form-group:first-of-type{margin-top:16px;}
.modal-btns{display:flex;gap:8px;padding:16px 20px;border-top:1px solid var(--border);margin-top:8px;}
.modal-btns .btn-primary,.modal-btns .btn-ghost{flex:1;}
.es-h{background:#f0fdf4;color:#16a34a;}
.es-i{background:#fffbeb;color:#d97706;}
.es-a{background:#fef2f2;color:#dc2626;}
.es-b{background:#f8fafc;color:#94a3b8;}
.plat-row{display:flex;align-items:center;gap:8px;padding:8px 16px;border-bottom:1px solid var(--border);}
.plat-rank{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;}
.plat-rank.gold{background:#FFD700;color:#78350f;}
.plat-rank.silver{background:#C0C0C0;color:#374151;}
.plat-rank.bronze{background:#CD7F32;color:white;}
.plat-bar-w{flex:1;background:#e2e8f0;border-radius:4px;height:8px;}
.plat-bar{background:var(--bl);height:8px;border-radius:4px;}
.plat-cnt{font-size:12px;color:var(--gray);min-width:28px;text-align:right;}
.type-card{border:2px solid var(--border);border-radius:12px;padding:20px;cursor:pointer;transition:.15s;text-align:center;}
.type-card:hover{border-color:var(--bl);}
.type-card.sel-b{border-color:var(--bl);background:#EFF6FF;}
.type-card.sel-m{border-color:var(--yl);background:var(--yll);}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(80px);background:#1e293b;color:white;padding:12px 24px;border-radius:10px;font-size:13px;font-weight:600;z-index:999;opacity:0;transition:.3s;white-space:nowrap;pointer-events:none;}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
.toast.toast-red{background:#dc2626;}
.toast.toast-green{background:#16a34a;}
.state-empty{text-align:center;padding:2rem;color:var(--gray);font-size:13px;}
.filter-card{background:white;border:1px solid var(--border);border-radius:12px;padding:14px 16px;}
.fg-sm{display:flex;flex-direction:column;}
.emp-grid-wrap .emp-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.1);}
@media(max-width:768px){
  .sidebar{transform:translateX(-100%);}
  .sidebar.open{transform:translateX(0);}
  .sb-overlay.show{display:block;}
  .sb-close{display:block;}
  .main-wrap{margin-left:0;width:100%;}
  .menu-btn{display:block;}
  .two-col{grid-template-columns:1fr;}
  .stats4{grid-template-columns:1fr 1fr;}
  .page-content{padding:1rem;}
  .topbar{padding:0 1rem;}
}
@media(max-width:480px){
  .stats4{grid-template-columns:1fr 1fr;}
  .stat-val{font-size:18px;}
}
.page-content{padding:1.5rem 2rem !important;}
.two-col{margin-top:0;}
.card{margin-bottom:16px;}
.card .form-group{padding:0 16px;}
.card .form-group:first-of-type{margin-top:16px;}
.card .btn-primary,.card .btn-ghost,.card .pay-btn{margin:0 16px 16px;}
.card .two-col{padding:0 16px 16px;gap:12px;}
.card > .form-group ~ *:last-child{padding-bottom:16px;}
.form-group .input{width:100%;}
.card-body{padding:16px;}
.card > .form-group{padding-left:16px;padding-right:16px;}
.card > .form-group:first-of-type{padding-top:16px;}
.card > div[style*="display:flex"][style*="gap:8px"]{padding:0 16px 16px;}
.card > div[style*="display:grid"]{padding:0 16px 16px;}
.card > button,.card > a{margin:0 16px 16px;display:block;}
.card table{margin:0;}
.card .table-scroll{padding:0;}
.card > table{margin:16px;}
.card > p,.card > div:not(.card-hdr):not(.table-scroll):not([style*="position:relative"]){padding-left:16px;padding-right:16px;}
.card > div[style*="overflow-x"]{padding:0;}
.card > div[style*="position:relative"]{margin:0 16px 16px;}
.settings-layout .card > .form-group{padding:0 16px;}
.settings-layout .card > .form-group:first-of-type{padding-top:16px;}
.settings-layout .card > button{margin:0 16px 16px;}
.plat-row{padding:10px 16px;}
.plat-bar-w{min-width:0;flex:1;}
.plat-row{padding:10px 20px;gap:12px;}
.plat-cnt{min-width:36px;text-align:right;flex-shrink:0;}
.page-content > *{margin-bottom:16px;}
.card-hdr + *:not(.table-scroll){padding-left:16px;padding-right:16px;}
.card > .two-col{padding:16px;}
.card > div[style*="display:flex"][style*="gap"]:not(.card-hdr){padding:0 16px 16px;}
.card > div[style*="display:grid"]:not(.card-hdr){padding:0 16px 16px;}
/* Global card inner padding fix */
.settings-layout .card{overflow:hidden;}
.settings-layout .card > .form-group{padding:0 16px;}
.settings-layout .card > .form-group:first-of-type{padding-top:16px;}
.settings-layout .card > .btn-primary,.settings-layout .card > button{margin:0 16px 16px;display:block;width:auto;}
/* Shift card rows */
.card > div[style*="justify-content:space-between"]{padding:8px 16px;border-bottom:1px solid var(--border);}
.card > div[style*="justify-content:space-between"]:last-of-type{border-bottom:none;}