:root{--asphalt:#101820;--asphalt-2:#18232d;--fog:#eef2f1;--paper:#fff;--ink:#142028;--muted:#66757d;--line:#dce3e3;--lane:#f2c94c;--go:#2ca66f;--stop:#d85d4d;--sky:#5b9ec9;--radius:8px;color-scheme:light}
*{box-sizing:border-box}html{font-size:15px}body{margin:0;font-family:'DM Sans',system-ui,sans-serif;background:var(--fog);color:var(--ink);-webkit-font-smoothing:antialiased}button,input,select{font:inherit}button,a{transition:.18s ease}a{color:inherit;text-decoration:none}.app-shell{min-height:100vh;display:grid;grid-template-columns:238px 1fr}aside{position:sticky;top:0;height:100vh;padding:26px 20px;background:var(--asphalt);color:#eef5f4;display:flex;flex-direction:column;border-right:4px solid var(--lane)}.brand{display:flex;align-items:center;gap:12px;font-family:'Barlow Condensed',sans-serif;font-size:24px;letter-spacing:.02em}.brand>span{display:grid;gap:4px;width:29px;padding:7px 5px;border:1px solid #64717b;border-radius:6px;transform:skewX(-8deg)}.brand>span i{height:3px;background:var(--lane)}nav{display:grid;gap:5px;margin-top:44px}nav a{padding:11px 13px;border-left:2px solid transparent;color:#98a7ae;font-weight:600;font-size:13px}nav a:hover,nav a.active{color:#fff;background:#202e38;border-left-color:var(--lane)}.operator{margin-top:auto;padding-top:18px;border-top:1px solid #35434d;display:grid;grid-template-columns:34px 1fr auto;gap:9px;align-items:center}.operator>span{width:34px;height:34px;display:grid;place-items:center;background:var(--lane);color:var(--asphalt);font-weight:800;border-radius:50%}.operator b,.operator small{display:block}.operator b{font-size:12px}.operator small{font-size:10px;color:#8999a1}.operator button,.theme-toggle,.mobile-menu{border:0;background:none;color:inherit;cursor:pointer}.content{min-width:0;padding:0 34px 56px}.topbar{height:68px;display:flex;align-items:center;justify-content:flex-end;gap:18px}.sync-state{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--muted)}.sync-state i,.live-status i{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--go);margin-right:6px;box-shadow:0 0 0 4px color-mix(in srgb,var(--go) 15%,transparent)}.theme-toggle{font-size:20px;color:var(--ink)}.mobile-menu{display:none}.eyebrow{margin:0 0 7px;font-family:'IBM Plex Mono',monospace;text-transform:uppercase;font-size:10px;letter-spacing:.14em;color:var(--muted)}.hero-grid{display:grid;grid-template-columns:minmax(300px,.8fr) minmax(480px,1.2fr);gap:44px;align-items:end;padding:22px 0 40px;border-bottom:1px solid #cdd6d5}.hero-copy h1,.page-head h1{margin:0;font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;font-size:clamp(54px,6vw,88px);line-height:.84;letter-spacing:-.025em}.hero-copy h1 span{color:transparent;-webkit-text-stroke:1.5px var(--ink)}.hero-copy>p:last-child{max-width:440px;margin:22px 0 0;color:var(--muted)}.lane-board{display:grid;gap:15px;padding:24px;background:var(--asphalt);color:#eef5f4;border-radius:var(--radius);box-shadow:12px 12px 0 #d7dfde}.lane>div:first-child{display:flex;justify-content:space-between;font-family:'IBM Plex Mono',monospace;font-size:11px}.lane-track{height:14px;margin:7px 0;background:repeating-linear-gradient(90deg,#3a4650 0 18px,transparent 18px 22px);border:1px solid #48555f}.lane-track i{display:block;height:100%;width:var(--fill);background:var(--lane)}.lane small{color:#9eabb0;font-size:10px}.metric-strip{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);background:var(--paper);margin:28px 0}.metric-strip article{min-width:0;padding:20px;border-right:1px solid var(--line)}.metric-strip article:last-child{border-right:0}.metric-strip span,.metric-strip small{display:block;color:var(--muted);font-size:11px}.metric-strip strong{display:block;margin:7px 0 5px;font-family:'Barlow Condensed',sans-serif;font-size:29px;font-variant-numeric:tabular-nums}.metric-strip .metric-text{font-size:23px}.work-grid{display:grid;grid-template-columns:1.4fr .6fr;gap:20px;margin-bottom:20px}.panel{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}.panel>header{min-height:72px;padding:18px 20px;display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid var(--line)}.panel h2{margin:0;font-family:'Barlow Condensed',sans-serif;font-size:25px;text-transform:uppercase;letter-spacing:.01em}.panel header a{font-size:11px;font-weight:700;border-bottom:1px solid var(--ink)}.bar-chart{height:260px;padding:28px 24px 20px;display:flex;gap:14px;align-items:flex-end}.bar-col{height:100%;flex:1;display:grid;grid-template-rows:1fr auto auto;gap:6px;text-align:center}.bar-col i{width:100%;max-width:52px;align-self:end;justify-self:center;background:linear-gradient(var(--lane),#d9ad29)}.bar-col span{font-family:'IBM Plex Mono',monospace;font-size:10px}.bar-col small{font-size:9px;color:var(--muted)}.zone-revenue{padding-bottom:8px}.revenue-row{display:flex;justify-content:space-between;align-items:center;padding:14px 20px;border-bottom:1px solid var(--line)}.revenue-row b,.revenue-row small{display:block}.revenue-row b{font-size:12px}.revenue-row small{font:10px 'IBM Plex Mono',monospace;color:var(--muted)}.revenue-row strong{font-size:12px;font-variant-numeric:tabular-nums}.live-status{font-size:10px;color:var(--muted)}.table-scroll{overflow:auto}table{width:100%;border-collapse:collapse;min-width:760px}th,td{padding:13px 18px;text-align:left;border-bottom:1px solid var(--line);font-size:12px;vertical-align:middle}th{font:10px 'IBM Plex Mono',monospace;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);background:#f8faf9}td b,td small{display:block}td small{margin-top:3px;color:var(--muted);font-size:10px}.num{text-align:right;font-variant-numeric:tabular-nums}.mono{font-family:'IBM Plex Mono',monospace}.pill{display:inline-block;padding:4px 7px;border-radius:3px;background:#e8edef;color:#506069;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.05em}.pill.parkir,.pill.pending,.pill.sending{background:#fff1b8;color:#6d5500}.pill.selesai,.pill.acknowledged{background:#dff2e9;color:#13744a}.pill.retry{background:#f8ded9;color:#9a382e}.page-head{padding:26px 0 36px;display:flex;justify-content:space-between;align-items:end;gap:30px}.page-head h1{font-size:clamp(48px,5vw,74px)}.page-head p:last-child{max-width:620px;color:var(--muted)}.form-panel{margin-bottom:20px}.inline-form{display:grid;grid-template-columns:1fr .7fr 1.2fr 1fr auto;gap:12px;align-items:end;padding:20px}.inline-form label,.login-panel label{display:grid;gap:7px;font-size:11px;font-weight:700}.inline-form input,.inline-form select,.filters input,.login-panel input{height:42px;padding:0 11px;border:1px solid var(--line);background:var(--paper);color:var(--ink);border-radius:4px}.inline-form button,.filters button,.login-panel button,.button{height:42px;padding:0 17px;border:0;background:var(--asphalt);color:#fff;font-weight:700;cursor:pointer;border-radius:4px}.button.small{height:32px;padding:0 11px;font-size:10px}.filters{display:flex;align-items:center;gap:8px}.filters span{font-size:10px;color:var(--muted)}.empty-inline{width:100%;padding:50px 20px;text-align:center;color:var(--muted);font-size:12px}.toast{position:fixed;right:24px;top:22px;z-index:50;max-width:420px;padding:14px 18px;background:var(--asphalt);color:#fff;border-left:4px solid var(--go);box-shadow:0 12px 34px #0002;animation:toast 5s both}.toast.error{border-color:var(--stop)}@keyframes toast{0%{opacity:0;transform:translateY(-8px)}8%,85%{opacity:1;transform:none}100%{opacity:0;visibility:hidden}}.reconcile{display:flex;align-items:center;gap:13px}.reconcile span{font-size:10px;color:var(--muted)}.reconcile span b{display:block;color:var(--ink);font-size:16px}.reconcile i{width:34px;border-top:1px solid var(--ink)}.reconcile strong{padding:8px;background:#e9eeed;font-size:11px}.wrap-key{max-width:240px;overflow-wrap:anywhere}.error-text{max-width:280px;color:var(--stop)}.zone-map{height:340px;margin-bottom:20px;border:1px solid var(--line);background:#dfe7e4;border-radius:var(--radius);overflow:hidden}.card-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}.zone-card{padding:22px;background:var(--paper);border:1px solid var(--line);border-top:4px solid var(--lane)}.zone-card header{display:flex;justify-content:space-between;font:11px 'IBM Plex Mono',monospace}.zone-card h2{font:28px 'Barlow Condensed',sans-serif;text-transform:uppercase;margin:18px 0 5px}.zone-card p{margin:0;color:var(--muted);font-size:12px}.zone-card dl{display:flex;gap:30px}.zone-card dl div{display:grid}.zone-card dt{font-size:9px;text-transform:uppercase;color:var(--muted)}.zone-card dd{margin:4px 0;font-weight:700}.tariffs{display:flex;gap:7px;padding-top:14px;border-top:1px solid var(--line)}.tariffs span{padding:7px 9px;background:var(--fog);font-size:10px}.tariffs b{display:block;text-transform:uppercase;font-size:8px}.login-body{min-height:100vh;background:var(--asphalt);color:#fff}.login-shell{min-height:100vh;display:grid;grid-template-columns:1.2fr .8fr}.login-brand{position:relative;padding:8vw;background:linear-gradient(135deg,#111b23,#24323b);overflow:hidden;display:flex;flex-direction:column;justify-content:center}.login-brand:after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(110deg,transparent 0 100px,#ffffff05 100px 102px);pointer-events:none}.login-brand h1{margin:0;font:clamp(62px,8vw,118px)/.78 'Barlow Condensed',sans-serif;text-transform:uppercase;letter-spacing:-.035em}.login-brand .eyebrow{color:var(--lane)}.login-note{max-width:470px;color:#9faeb4;line-height:1.7}.road-mark{position:absolute;right:7%;top:8%;display:grid;gap:14px;transform:rotate(14deg)}.road-mark i{width:130px;height:10px;background:var(--lane)}.login-panel{padding:8vw;display:flex;flex-direction:column;justify-content:center;background:#f5f6f3;color:var(--ink)}.login-panel h2{margin:0;font:38px 'Barlow Condensed',sans-serif;text-transform:uppercase}.login-panel p{color:var(--muted)}.login-panel form{display:grid;gap:18px;margin-top:38px}.login-panel button{height:48px;background:var(--lane);color:var(--asphalt)}.login-error{padding:12px;border-left:3px solid var(--stop);background:#f7e1dd;color:#8b3228;font-size:12px}
html[data-theme=dark]{--fog:#101820;--paper:#17232c;--ink:#eef5f4;--muted:#93a2a8;--line:#30404a;--asphalt:#090e12;color-scheme:dark}html[data-theme=dark] th{background:#111b22}html[data-theme=dark] .hero-copy h1 span{-webkit-text-stroke-color:#eef5f4}html[data-theme=dark] .reconcile strong,html[data-theme=dark] .tariffs span{background:#26343d}
@media(max-width:1050px){.app-shell{grid-template-columns:1fr}aside{position:fixed;z-index:60;width:238px;transform:translateX(-100%);transition:.2s}.menu-open aside{transform:none}.content{padding:0 22px 40px}.mobile-menu{display:block;margin-right:auto}.hero-grid,.work-grid{grid-template-columns:1fr}.metric-strip{grid-template-columns:repeat(2,1fr)}.metric-strip article:nth-child(2){border-right:0}.metric-strip article:nth-child(-n+2){border-bottom:1px solid var(--line)}.inline-form{grid-template-columns:repeat(2,1fr)}.topbar{justify-content:flex-end}}
@media(max-width:700px){.content{padding:0 14px 36px}.hero-copy h1{font-size:58px}.lane-board{padding:18px;box-shadow:6px 6px 0 #d7dfde}.metric-strip{grid-template-columns:1fr}.metric-strip article{border-right:0;border-bottom:1px solid var(--line)!important}.work-grid{display:block}.work-grid>.panel{margin-bottom:16px}.inline-form{grid-template-columns:1fr}.page-head{display:block}.reconcile{margin-top:24px;flex-wrap:wrap}.card-grid{grid-template-columns:1fr}.filters{width:100%;overflow:auto}.panel>header{align-items:flex-start;flex-direction:column}.login-shell{grid-template-columns:1fr}.login-brand{min-height:44vh;padding:50px 28px}.login-brand h1{font-size:62px}.login-panel{padding:45px 28px}.road-mark{display:none}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}
@media(max-width:700px){aside nav a{min-height:44px;display:flex;align-items:center}.operator button,.mobile-menu,.theme-toggle{min-width:44px;min-height:44px;display:inline-grid;place-items:center}.panel header a{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}}