:root{--bg: #f4f7f8;--card: #ffffff;--ink: #10262b;--muted: #64777c;--line: #e3ebec;--brand: #0e7490;--brand-2: #12a3a8;--brand-soft: #e2f5f4;--amber: #f59e0b;--amber-soft: #fef4e2;--green: #16a34a;--green-soft: #e8f8ee;--red: #e11d48;--shadow: 0 10px 30px -18px rgba(10, 50, 60, .45);--radius: 18px;font-family:Inter,Segoe UI,system-ui,-apple-system,sans-serif;color-scheme:light}*{box-sizing:border-box}html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased}body{padding-bottom:92px}button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}input,select,textarea{font:inherit;color:inherit;width:100%}.shell{max-width:1040px;margin:0 auto;padding:0 16px 28px}.topbar{background:linear-gradient(135deg,#0b6477,#0e7490 45%,#12a3a8);color:#fff;padding:22px 0 74px;border-radius:0 0 30px 30px}.topbar-inner{max-width:1040px;margin:0 auto;padding:0 16px;display:flex;align-items:center;justify-content:space-between;gap:12px}.brand{display:flex;align-items:center;gap:11px}.brand-logo{width:42px;height:42px;border-radius:13px;background:#ffffff29;display:grid;place-items:center;font-size:21px;border:1px solid rgba(255,255,255,.25)}.brand h1{margin:0;font-size:17px;letter-spacing:.2px}.brand p{margin:2px 0 0;font-size:12px;opacity:.8}.topbar-date{font-size:12px;background:#ffffff24;border:1px solid rgba(255,255,255,.2);padding:7px 12px;border-radius:999px;white-space:nowrap}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:-56px}.stat{background:var(--card);border-radius:var(--radius);padding:16px 15px;box-shadow:var(--shadow);border:1px solid var(--line)}.stat-label{font-size:11.5px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.4px;display:flex;align-items:center;gap:6px}.stat-value{font-size:25px;font-weight:800;margin-top:8px;letter-spacing:-.5px}.stat-sub{font-size:11.5px;color:var(--muted);margin-top:3px}.stat.accent .stat-value{color:var(--brand)}.stat.warn .stat-value{color:var(--amber)}.stat.money .stat-value{color:var(--green);font-size:21px}.section{margin-top:26px}.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:12px}.section-head h2{margin:0;font-size:16px}.section-head span{font-size:12px;color:var(--muted)}.order-list{display:grid;gap:12px}.order{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:15px;box-shadow:var(--shadow)}.order.pickup{border-color:#bfe6d5;background:linear-gradient(180deg,#f6fffa,#fff 60%)}.order-top{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}.order-name{font-weight:700;font-size:15px;margin:0 0 3px}.order-meta{font-size:12.5px;color:var(--muted);line-height:1.5}.code{font-family:SFMono-Regular,ui-monospace,monospace;font-size:11.5px;background:#eef3f4;color:#47626a;border-radius:7px;padding:2px 6px;margin-right:6px}.badge{font-size:11.5px;font-weight:700;padding:5px 10px;border-radius:999px;white-space:nowrap}.badge.diterima{background:#eaf1f5;color:#4a6675}.badge.dicuci{background:#e6f0ff;color:#1d63c7}.badge.siap{background:var(--amber-soft);color:#b06a05}.badge.selesai{background:var(--green-soft);color:#12803c}.order-mid{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.pill{font-size:12px;background:#f3f7f8;border-radius:10px;padding:6px 10px;color:#4d666d}.pill.due{background:var(--amber-soft);color:#a2620a;font-weight:600}.pill.due.late{background:#fdeaee;color:var(--red)}.pill.paid{background:var(--green-soft);color:#12803c;font-weight:600}.pill.unpaid{background:#fdeaee;color:#b91c3c;font-weight:600}.stepper{display:flex;align-items:center;gap:8px;margin-top:13px;padding-top:13px;border-top:1px dashed var(--line)}.step-dots{display:flex;gap:4px;flex:1}.step-dots i{height:5px;flex:1;border-radius:4px;background:#e4ecee}.step-dots i.on{background:var(--brand-2)}.round-btn{width:34px;height:34px;border-radius:11px;background:#f0f5f6;display:grid;place-items:center;font-size:15px;font-weight:700;color:#3d5a61;transition:transform .12s ease,background .12s ease}.round-btn:active{transform:scale(.93)}.round-btn:disabled{opacity:.35}.round-btn.next{background:var(--brand-soft);color:#0b6b6f}.order-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}.order-actions .btn{flex:1 1 auto;white-space:nowrap}.btn{border-radius:12px;padding:10px 14px;font-size:13px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:7px;transition:transform .12s ease,filter .12s ease}.btn:active{transform:scale(.97)}.btn-wa{background:#e7f8ef;color:#0d7a3e;flex:1}.btn-ghost{background:#f2f6f7;color:#47636b}.btn-primary{background:linear-gradient(135deg,#0e7490,#12a3a8);color:#fff;box-shadow:0 10px 22px -12px #0e7490e6}.btn-primary:disabled{opacity:.5;box-shadow:none}.btn-danger{color:var(--red);background:#fdeaee}.field{margin-bottom:13px}.field label{display:block;font-size:12.5px;font-weight:700;color:#42595f;margin-bottom:6px}.field input,.field select,.field textarea{border:1.5px solid var(--line);border-radius:12px;padding:11px 13px;background:#fbfdfd;font-size:14px;outline:none;transition:border-color .15s ease,background .15s ease}.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--brand-2);background:#fff}.field textarea{min-height:62px;resize:vertical}.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:10px}.hint{font-size:11.5px;color:var(--muted);margin-top:5px}.total-box{background:linear-gradient(135deg,#eefaf9,#f4fbf7);border:1px solid #d6ecea;border-radius:14px;padding:12px 14px;display:flex;justify-content:space-between;align-items:center;margin:6px 0 14px}.total-box span{font-size:12.5px;color:#4a666c;font-weight:600}.total-box strong{font-size:18px;color:#0b6b6f}.sheet-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0a22286b;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);display:flex;align-items:flex-end;justify-content:center;z-index:40;animation:fade .16s ease}.sheet{background:var(--card);width:100%;max-width:560px;border-radius:24px 24px 0 0;padding:8px 18px 24px;max-height:92vh;overflow-y:auto;animation:rise .22s cubic-bezier(.2,.9,.3,1)}.sheet-grip{width:42px;height:4px;border-radius:4px;background:#dbe5e7;margin:6px auto 14px}.sheet-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:14px}.sheet-head h3{margin:0;font-size:17px}.sheet-head p{margin:4px 0 0;font-size:12.5px;color:var(--muted)}.close-x{width:32px;height:32px;border-radius:10px;background:#f1f5f6;display:grid;place-items:center;color:#55727a;font-size:15px;flex:none}.preview{background:#f4fbf7;border:1px solid #dcf0e4;border-radius:14px 14px 14px 4px;padding:13px;font-size:13px;line-height:1.6;white-space:pre-wrap;color:#28433a}.sheet-actions{display:grid;gap:8px;margin-top:14px}.nav{position:fixed;bottom:0;left:0;right:0;background:#fffffff2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:1px solid var(--line);padding:8px 12px calc(8px + env(safe-area-inset-bottom));display:flex;gap:8px;justify-content:center;z-index:30}.nav-inner{width:100%;max-width:520px;display:flex;gap:8px;align-items:center}.nav button{flex:1;border-radius:13px;padding:9px 6px;font-size:11.5px;font-weight:700;color:#6b8288;display:grid;justify-items:center;gap:3px}.nav button .ico{font-size:17px}.nav button.active{background:var(--brand-soft);color:#0b6b6f}.nav-add{flex:none!important;width:52px;height:52px;border-radius:17px!important;background:linear-gradient(135deg,#0e7490,#12a3a8)!important;color:#fff!important;font-size:24px!important;display:grid!important;place-items:center;margin-top:-14px;box-shadow:0 12px 24px -10px #0e7490e6}.empty{text-align:center;padding:34px 18px;background:var(--card);border:1px dashed #d7e3e5;border-radius:var(--radius);color:var(--muted);font-size:13.5px}.empty span{display:block;font-size:26px;margin-bottom:8px}.toast{position:fixed;left:50%;bottom:96px;transform:translate(-50%);background:#0f3d47;color:#fff;padding:10px 16px;border-radius:999px;font-size:12.5px;font-weight:600;z-index:60;animation:rise .2s ease;box-shadow:0 14px 30px -16px #000000b3}@keyframes fade{0%{opacity:0}}@keyframes rise{0%{opacity:0;transform:translateY(14px)}}@media (min-width: 720px){.stats{gap:16px}.stat-value{font-size:29px}.order-list{grid-template-columns:1fr 1fr}.sheet-backdrop{align-items:center}.sheet{border-radius:24px;max-height:88vh}body{padding-bottom:30px}.nav{position:sticky;border-radius:20px;border:1px solid var(--line);margin:22px auto 0;max-width:520px;box-shadow:var(--shadow)}.nav-add{margin-top:0}}@media (max-width: 380px){.stats{grid-template-columns:1fr 1fr}.stats .stat.money{grid-column:span 2}}