:root{
  --coral:#E8796B; --coral-d:#D4655A; --coral-l:#F7D9D4; --coral-bg:#FBE9E6;
  --ink:#1a1a1a; --ink-2:#4b4b4b; --muted:#8e8e93; --line:#EAEAEC;
  --bg:#fff; --bg-2:#F5F5F7;
  --green:#1E8E5A; --green-bg:#DCF0E5; --red:#C4373A; --red-bg:#FBE0E0;
  --blue:#2F6FDB; --blue-bg:#E4EDFC; --teal-bg:#D3EDEA; --teal:#12756C;
  --r:14px; --sh:0 1px 3px rgba(0,0,0,.06);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  font:15px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  color:var(--ink);background:var(--bg-2);
  max-width:520px;margin:0 auto;min-height:100vh;
  padding-bottom:calc(72px + env(safe-area-inset-bottom));
}
body.noc{padding-bottom:0}
a{color:inherit;text-decoration:none}
img{max-width:100%}

/* Header */
.hd{background:var(--coral);color:#fff;padding:14px 16px;display:flex;align-items:center;gap:10px;
    position:sticky;top:0;z-index:50;padding-top:calc(14px + env(safe-area-inset-top))}
.hd h1{font-size:17px;font-weight:600;margin:0;flex:1;text-align:center}
.hd .ic{width:34px;height:34px;display:grid;place-items:center;font-size:19px;flex:none}
.hd.plain{background:#fff;color:var(--ink);border-bottom:1px solid var(--line)}

/* Cards / layout */
.wrap{padding:14px}
.card{background:#fff;border-radius:var(--r);box-shadow:var(--sh);padding:14px;margin-bottom:12px}
.sec-t{font-size:15px;font-weight:700;margin:16px 0 8px}
.muted{color:var(--muted)}.sm{font-size:13px}.xs{font-size:12px}
.row{display:flex;align-items:center;gap:10px}
.between{display:flex;justify-content:space-between;align-items:center;gap:10px}
.grow{flex:1;min-width:0}
.tr{text-align:right}
.mt8{margin-top:8px}.mt12{margin-top:12px}.mb0{margin-bottom:0}
.trunc{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Outlet card */
.outlet{background:var(--coral-bg);border-radius:var(--r);padding:14px;margin-bottom:12px}
.outlet .top{display:flex;gap:12px}
.outlet .logo{width:64px;height:64px;border-radius:16px;background:var(--coral);color:#fff;
  display:grid;place-items:center;font-size:30px;flex:none}
.outlet h2{margin:0 0 6px;font-size:17px;font-weight:700}
.outlet .meta{font-size:13px;color:var(--ink-2);display:flex;gap:6px;margin-bottom:3px}
.outlet .div{border-top:1px solid rgba(0,0,0,.08);margin:12px 0 10px}
.paket{color:#B8860B;font-weight:600;font-size:13px}

/* Summary strip */
.sum{background:#fff;border-radius:var(--r);box-shadow:var(--sh);padding:12px 14px;margin-bottom:14px}
.sum .cols{display:flex}
.sum .c{flex:1;padding-right:10px}
.sum .c+.c{border-left:1px solid var(--line);padding-left:14px}
.sum .lbl{font-size:12px;color:var(--muted);margin-bottom:3px}
.sum .val{font-weight:700;font-size:15px}
.tap{text-align:center;color:var(--coral);font-size:13px;margin-top:10px;padding-top:8px;border-top:1px solid var(--line)}

/* Quick actions */
.qa{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;background:#fff;border-radius:var(--r);
    box-shadow:var(--sh);padding:18px 8px}
.qa a{display:block;text-align:center;padding:10px 4px;border-radius:12px}
.qa a:active{background:var(--bg-2)}
.qa .i{font-size:26px;color:var(--coral);line-height:1;margin-bottom:8px}
.qa .t{font-size:12.5px;color:var(--coral);line-height:1.25}

/* Stat pair */
.pair{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.stat{border-radius:12px;padding:14px}
.stat.in{background:var(--green-bg)}
.stat.out{background:var(--red-bg)}
.stat .ico{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;font-size:17px;margin-bottom:10px}
.stat.in .ico{background:#C3E5D3;color:var(--green)}
.stat.out .ico{background:#F6C9C9;color:var(--red)}
.stat .lbl{font-size:12.5px;color:var(--ink-2);margin-bottom:3px}
.stat .val{font-size:19px;font-weight:700}
.stat.in .val{color:var(--green)}
.stat.out .val{color:var(--red)}

/* List rows */
.lrow{display:flex;align-items:center;gap:12px;background:var(--bg-2);border-radius:12px;padding:12px;margin-bottom:8px}
.lrow.pl{background:#fff;border-bottom:1px solid var(--line);border-radius:0;margin:0;padding:14px 0}
.lrow:last-child{margin-bottom:0}
.av{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:#fff;
    font-size:12px;font-weight:700;flex:none}
.av.sq{border-radius:9px}

/* Badges */
.badge{display:inline-block;padding:5px 11px;border-radius:8px;font-size:12.5px;font-weight:500;white-space:nowrap}
.b-diterima{background:#EDEDEF;color:#3a3a3c}
.b-diproses{background:var(--blue-bg);color:var(--blue)}
.b-siap_diambil{background:var(--teal-bg);color:var(--teal)}
.b-selesai{background:var(--green-bg);color:var(--green)}
.b-batal{background:var(--red-bg);color:var(--red)}
.b-belum{background:var(--red-bg);color:var(--red)}
.b-lunas{background:var(--green-bg);color:var(--green)}

/* "atau" divider (mis. sheet pembayaran) */
.mt-or{display:flex;align-items:center;gap:10px;margin:4px 0 12px;color:var(--muted);font-size:12px}
.mt-or::before,.mt-or::after{content:"";flex:1;height:1px;background:var(--line)}

/* Order info grid (rincian pesanan / detail) */
.og{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px}
.og .k{font-size:12px;color:var(--muted);margin-bottom:1px}
.og .v{font-size:14px}

/* ===== Daftar Pesanan (beautified) ===== */
.olist{padding:12px 14px 4px;display:flex;flex-direction:column;gap:12px}
.ocard{position:relative;display:block;background:#fff;border-radius:14px;
  box-shadow:0 1px 4px rgba(0,0,0,.06);padding:14px 14px 12px 17px;overflow:hidden;
  transition:transform .08s ease, box-shadow .12s ease}
.ocard:active{transform:scale(.992);box-shadow:0 1px 2px rgba(0,0,0,.05)}
.ocard .acc{position:absolute;left:0;top:0;bottom:0;width:4px;border-radius:4px 0 0 4px;background:#c9c9cf}
.acc-diproses{background:var(--blue)} .acc-siap_diambil{background:var(--teal)}
.acc-selesai{background:var(--green)} .acc-batal{background:var(--red)}
.ocard .ohead{display:flex;align-items:center;gap:11px;margin-bottom:11px}
.ocard .oav{width:40px;height:40px;flex:none;border-radius:11px;display:grid;place-items:center;
  color:#fff;font-weight:700;font-size:14px;letter-spacing:.3px}
.ocard .oname{font-size:15.5px;font-weight:700;line-height:1.2}
.ocard .onota{font-size:12px;color:var(--muted);margin-top:2px;font-variant-numeric:tabular-nums}
.ocard .ometa{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:11px}
.ocard .mchip{display:inline-flex;align-items:center;gap:5px;background:var(--bg-2);
  border-radius:9px;padding:5px 9px;font-size:12px;color:var(--ink-2)}
.ocard .mchip .mi{color:var(--muted);font-size:13px;line-height:1}
.ocard .ofoot{display:flex;align-items:center;justify-content:space-between;
  padding-top:11px;border-top:1px solid var(--line)}
.ocard .ototal{font-size:16px;font-weight:800;letter-spacing:-.2px}
.ocard .ototal small{font-size:11px;font-weight:600;color:var(--muted);display:block;letter-spacing:0}
.pay{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;
  padding:5px 10px;border-radius:20px}
.pay::before{content:"";width:7px;height:7px;border-radius:50%}
.pay-lunas{background:var(--green-bg);color:var(--green)} .pay-lunas::before{background:var(--green)}
.pay-belum{background:var(--red-bg);color:var(--red)} .pay-belum::before{background:var(--red)}

/* Forms */
label.f{display:block;font-size:13px;color:var(--ink-2);margin:12px 0 5px;font-weight:500}
input,select,textarea{
  width:100%;padding:12px 13px;border:1px solid var(--line);border-radius:11px;
  font:15px inherit;background:#fff;color:var(--ink);appearance:none;-webkit-appearance:none}
input:focus,select,textarea:focus{outline:none;border-color:var(--coral)}
select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238e8e93' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;padding-right:34px}
textarea{min-height:78px;resize:vertical}
.btn{display:block;width:100%;padding:14px;border:none;border-radius:12px;background:var(--coral);
  color:#fff;font:600 15px inherit;text-align:center;cursor:pointer}
.btn:active{background:var(--coral-d)}
.btn.ghost{background:#fff;color:var(--coral);border:1px solid var(--coral)}
.btn.grey{background:var(--bg-2);color:var(--ink-2)}
.btn.wa{background:#fff;color:#1EA952;border:1px solid #1EA952}
.btn.dim{background:#fff;color:var(--red);border:1px solid var(--red)}
.btn.sm{padding:10px;font-size:14px}
.btns{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.bar{position:fixed;bottom:0;left:0;right:0;max-width:520px;margin:0 auto;background:#fff;
  border-top:1px solid var(--line);padding:12px 14px calc(12px + env(safe-area-inset-bottom));z-index:60}
body.hasbar{padding-bottom:calc(140px + env(safe-area-inset-bottom))}

/* Search + filters */
.srch{position:relative;margin-bottom:10px}
.srch input{padding-left:40px;border-radius:12px;border:1.5px solid #d9d9dd}
.srch .i{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--muted)}
.chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;margin-bottom:10px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;padding:9px 14px;border:1px solid #d9d9dd;border-radius:11px;background:#fff;
  font-size:14px;white-space:nowrap;color:var(--ink)}
.chip.on{border-color:var(--coral);color:var(--coral)}
.chip.clr{border:none;background:none;color:var(--coral);font-size:20px;padding:4px 2px}

/* Toggle */
.sw{position:relative;width:50px;height:29px;flex:none}
.sw input{position:absolute;opacity:0;width:100%;height:100%;margin:0;z-index:2}
.sw i{position:absolute;inset:0;background:#E3E3E6;border-radius:15px;transition:.2s}
.sw i::after{content:"";position:absolute;width:23px;height:23px;border-radius:50%;background:#9a9a9e;
  top:3px;left:3px;transition:.2s}
.sw input:checked + i{background:var(--coral-l)}
.sw input:checked + i::after{background:var(--coral);left:24px}

/* Stepper */
.step{display:flex;align-items:center;margin:14px 0}
.step .s{flex:none;padding:7px 11px;border:1px solid var(--line);border-radius:9px;font-size:12.5px;color:var(--muted)}
.step .s.done{border-color:var(--coral);color:var(--ink)}
.step .s.cur{background:var(--teal-bg);border-color:var(--teal-bg);color:var(--teal);font-weight:600}
.step .l{flex:1;height:2px;background:var(--line);min-width:8px}
.step .l.done{background:var(--coral)}

/* Bottom nav */
.nav{position:fixed;bottom:0;left:0;right:0;max-width:520px;margin:0 auto;background:#fff;
  border-top:1px solid var(--line);display:flex;z-index:70;
  padding-bottom:env(safe-area-inset-bottom)}
.nav a{flex:1;text-align:center;padding:9px 0 7px;color:var(--muted)}
.nav a.on{color:var(--coral)}
.nav .i{font-size:20px;line-height:1.3}
.nav .t{font-size:11px;font-weight:500}

/* Sheet */
.sheet{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:100;display:none}
.sheet.open{display:block}
.sheet .in{position:absolute;bottom:0;left:0;right:0;max-width:520px;margin:0 auto;background:#fff;
  border-radius:20px 20px 0 0;max-height:88vh;overflow:auto;
  padding:0 16px calc(20px + env(safe-area-inset-bottom))}
.sheet .grab{width:38px;height:4px;background:#d9d9dd;border-radius:2px;margin:9px auto 4px}
.sheet .th{display:flex;justify-content:space-between;align-items:center;padding:8px 0 14px;
  border-bottom:1px solid var(--line);margin-bottom:14px;position:sticky;top:0;background:#fff}
.sheet .th b{font-size:18px}
.sheet .x{font-size:22px;color:var(--ink-2);padding:2px 6px;cursor:pointer}

/* Chart */
.chart{display:flex;align-items:flex-end;gap:8px;height:210px;padding:16px 4px 0}
.chart .b{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%}
.chart .bv{font-size:11px;color:var(--red);margin-bottom:4px}
.chart .bb{width:100%;border-radius:3px;min-height:3px;background:var(--coral)}
.chart .bl{font-size:10.5px;color:var(--muted);margin-top:7px;text-align:center}

/* Reco */
.reco{border-radius:12px;padding:13px;margin-bottom:10px}
.reco.b{background:#EFF5FE;border:1px solid #D6E4FA}
.reco.g{background:#EAF7F0;border:1px solid #CFEBDC}
.reco.y{background:#FEF7E6;border:1px solid #F7E6BC}
.reco .hh{display:flex;gap:10px;align-items:flex-start;margin-bottom:7px}
.reco .ic{width:28px;height:28px;border-radius:7px;display:grid;place-items:center;color:#fff;font-size:14px;flex:none}
.reco.b .ic{background:var(--blue)}.reco.g .ic{background:var(--green)}.reco.y .ic{background:#D19A00}
.reco b{font-size:14.5px}
.reco p{margin:0;font-size:13px;color:var(--ink-2);line-height:1.5}
.reco .pill{display:inline-block;margin-top:9px;padding:6px 11px;border-radius:7px;font-size:12.5px}
.reco.b .pill{background:#DCE9FC;color:var(--blue)}
.reco.g .pill{background:#D6EEE0;color:var(--green)}
.reco.y .pill{background:#FBEFD2;color:#8A6500}

/* Flash */
.fl{padding:12px 14px;border-radius:11px;margin-bottom:12px;font-size:14px}
.fl.ok{background:var(--green-bg);color:var(--green)}
.fl.error{background:var(--red-bg);color:var(--red)}

/* Login */
.login{min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:26px;background:#fff}
.login .logo{width:84px;height:84px;border-radius:22px;background:var(--coral);color:#fff;
  display:grid;place-items:center;font-size:42px;margin:0 auto 20px}
.login h1{text-align:center;font-size:22px;margin:0 0 6px}
.login p.s{text-align:center;color:var(--muted);margin:0 0 26px;font-size:14px}

.empty{text-align:center;padding:46px 20px;color:var(--muted)}
.empty .i{font-size:44px;opacity:.35;margin-bottom:12px}
hr.d{border:none;border-top:1px solid var(--line);margin:14px 0}
.tot{display:flex;justify-content:space-between;padding:6px 0;font-size:14px}
.tot.big{font-size:17px;font-weight:700;padding-top:12px}
@media print{.nav,.bar,.hd{display:none}body{padding:0;background:#fff}}