/* MODE LAPANGAN — phone-first field UI (Liquid Glass on the FUNCTIONAL layer only: dock, round
   buttons, sheets, the Catat menu; content cards stay opaque). Prefix mlap- ("mode lapangan"); the old
   form field classes are never touched. The app has no dark theme: the field UI is light only. */
.mlap-root {
  --mlap-bg: #EEF2F6; --mlap-surface: #FFFFFF; --mlap-ink: #0E1B24; --mlap-sub: #5B6B75; --mlap-line: #EDF1F4;
  --mlap-accent: #065489; --mlap-accent-soft: #E8F1F8; --mlap-teal-ink: #0F6B66; --mlap-teal-soft: #DDF4F2;
  --mlap-warn: #9A3412; --mlap-warn-soft: #FFF1E8; --mlap-warn-line: #F4C7A8; --mlap-bon: #7A4B00; --mlap-bon-soft: #FCF1D6;
  --mlap-ok: #1E6B40; --mlap-ok-soft: #E3F3EA; --mlap-neg: #9B2C22; --mlap-neg-soft: #FDE8E6;
  --mlap-glass: rgba(255,255,255,.66); --mlap-glass-line: rgba(255,255,255,.85); --mlap-grab: #B9C4CC;
  position: relative; min-height: calc(100vh - 60px); max-width: 480px; margin: 0 auto; background: var(--mlap-bg); color: var(--mlap-ink);
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', system-ui, sans-serif; padding: 0 0 120px; box-sizing: border-box;
}
:root[data-theme="dark"] .mlap-root { --mlap-bg: #0C141A; --mlap-surface: #16222B; --mlap-ink: #E8EEF2; --mlap-sub: #9DB0BC; --mlap-line: #22313C; --mlap-accent: #5AA9E0; --mlap-accent-soft: #15324A; --mlap-glass: rgba(22,34,43,.72); --mlap-glass-line: rgba(255,255,255,.12); --mlap-warn: #F4A27A; --mlap-warn-soft: #3A2217; --mlap-warn-line: #6B3A22; --mlap-bon: #F2C46B; --mlap-bon-soft: #3A2E12; --mlap-ok: #7FD3A3; --mlap-ok-soft: #173326; --mlap-neg: #F19A8F; --mlap-neg-soft: #3A1B18; --mlap-teal-ink: #6ED3CC; --mlap-teal-soft: #123331; --mlap-grab: #4A5A66; }

/* The glass dock is the navigation while the field UI is open: the app's phone bottom nav steps aside
   (it would paint over the dock; the topbar hamburger still opens the full menu). */
body.mlap-on .mobile-nav { display: none !important; }
.mlap-ribbon { position: sticky; top: 0; z-index: 30; background: #C2410C; color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .05em; text-align: center; padding: 6px 12px; }
.mlap-head { display: flex; align-items: center; gap: 8px; padding: 14px 16px 6px; }
.mlap-head h1 { margin: 0; font-size: 28px; line-height: 34px; font-weight: 700; letter-spacing: -.02em; flex: 1; color: var(--mlap-ink); }
.mlap-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .03em; color: var(--mlap-sub); text-transform: uppercase; padding: 0 16px; }
.mlap-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; text-transform: none; letter-spacing: 0; }
.mlap-round { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: var(--mlap-ink); cursor: pointer; border: 1px solid var(--mlap-glass-line); background: var(--mlap-glass); -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6); box-shadow: 0 6px 20px rgba(6,51,79,.14); }
.mlap-chip { height: 30px; display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; border-radius: 15px; background: var(--mlap-surface); font-size: 13px; font-weight: 600; border: 0; color: var(--mlap-ink); }
.mlap-chip.latihan { background: var(--mlap-warn-soft); color: var(--mlap-warn); }
.mlap-chip.asli { background: var(--mlap-teal-soft); color: var(--mlap-teal-ink); }
.mlap-chip select { border: 0; background: transparent; font: inherit; font-weight: 600; color: inherit; min-height: 30px; }
.mlap-body { display: flex; flex-direction: column; gap: 10px; padding: 8px 16px; }
.mlap-card { background: var(--mlap-surface); border-radius: 16px; overflow: hidden; }
.mlap-row { min-height: 52px; display: flex; align-items: center; gap: 10px; padding: 6px 12px; border-bottom: 1px solid var(--mlap-line); }
.mlap-row:last-child { border-bottom: 0; }
.mlap-row .nm { font-size: 15px; font-weight: 600; }
.mlap-row .sb { font-size: 12px; color: var(--mlap-sub); }
.mlap-num { width: 28px; height: 28px; border-radius: 9px; flex-shrink: 0; display: grid; place-items: center; font-size: 13px; font-weight: 700; background: var(--mlap-accent-soft); color: var(--mlap-accent); }
.mlap-tag { height: 22px; display: inline-flex; align-items: center; padding: 0 7px; border-radius: 6px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.mlap-tag.pending { background: var(--mlap-accent-soft); color: var(--mlap-accent); }
.mlap-tag.terkirim { background: var(--mlap-ok-soft); color: var(--mlap-ok); }
.mlap-tag.ditunda { background: var(--mlap-bon-soft); color: var(--mlap-bon); }
.mlap-tag.batal { background: var(--mlap-neg-soft); color: var(--mlap-neg); }
.mlap-empty { padding: 28px 16px; text-align: center; font-size: 14px; color: var(--mlap-sub); }
.mlap-err { background: var(--mlap-warn-soft); border: 1px solid var(--mlap-warn-line); color: var(--mlap-warn); border-radius: 14px; padding: 12px; font-size: 14px; display: flex; flex-direction: column; gap: 8px; }
.mlap-note { background: var(--mlap-accent-soft); color: var(--mlap-accent); border-radius: 14px; padding: 12px; font-size: 14px; }
.mlap-btn { min-height: 44px; border: 0; border-radius: 14px; padding: 0 16px; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; background: var(--mlap-accent-soft); color: var(--mlap-accent); }
.mlap-btn.primary { background: var(--mlap-accent); color: #fff; box-shadow: 0 8px 24px rgba(6,84,137,.3); }
.mlap-btn.danger { background: var(--mlap-neg-soft); color: var(--mlap-neg); }
.mlap-btn:disabled { opacity: .5; cursor: not-allowed; }

.mlap-dock { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(16px + env(safe-area-inset-bottom)); width: min(448px, calc(100vw - 32px)); height: 62px; border-radius: 31px; display: grid; grid-template-columns: 1fr 1fr 70px 1fr 1fr; gap: 2px; padding: 4px; box-sizing: border-box; z-index: 40;
  background: var(--mlap-glass); -webkit-backdrop-filter: blur(28px) saturate(1.6); backdrop-filter: blur(28px) saturate(1.6); border: 1px solid var(--mlap-glass-line); box-shadow: 0 10px 34px rgba(6,51,79,.18), inset 0 1px 0 rgba(255,255,255,.6); }
.mlap-tab { border: 0; background: transparent; border-radius: 27px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; color: var(--mlap-sub); font: inherit; font-size: 11px; font-weight: 600; cursor: pointer; transition: background .3s ease, color .3s ease; }
.mlap-tab.on { background: rgba(6,84,137,.12); color: var(--mlap-accent); }
.mlap-catat { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); width: 62px; height: 62px; margin-left: -31px; border-radius: 50%; border: 1px solid rgba(255,255,255,.45); z-index: 47; cursor: pointer; display: grid; place-items: center; color: #fff;
  background: rgba(6,84,137,.9); -webkit-backdrop-filter: blur(28px) saturate(1.6); backdrop-filter: blur(28px) saturate(1.6); box-shadow: 0 10px 26px rgba(6,84,137,.42), inset 0 1px 0 rgba(255,255,255,.45); transition: transform .35s cubic-bezier(.34,1.56,.64,1); }
.mlap-catat:active { transform: scale(.9); }
.mlap-catat svg { transition: transform .45s cubic-bezier(.34,1.56,.64,1); }
.mlap-catat.open svg { transform: rotate(45deg); }
.mlap-scrim { position: fixed; inset: 0; background: rgba(14,27,36,.28); z-index: 45; border: 0; padding: 0; animation: mlapFade .25s ease both; }
.mlap-sheet { position: fixed; left: 50%; transform: translateX(-50%); bottom: 0; width: min(480px, 100vw); max-height: 88vh; overflow: auto; z-index: 48; border-radius: 28px 28px 0 0; padding: 8px 16px calc(24px + env(safe-area-inset-bottom)); box-sizing: border-box; color: var(--mlap-ink); animation: mlapUp .45s cubic-bezier(.34,1.3,.64,1) both;
  background: var(--mlap-glass); -webkit-backdrop-filter: blur(34px) saturate(1.5); backdrop-filter: blur(34px) saturate(1.5); border-top: 1px solid var(--mlap-glass-line); box-shadow: 0 -10px 40px rgba(6,51,79,.2); }
.mlap-grab { width: 36px; height: 5px; border-radius: 3px; background: var(--mlap-grab); margin: 0 auto 10px; }
.mlap-sheet h2 { margin: 4px 0 6px; font-size: 20px; }
.mlap-sheet p { margin: 0 0 12px; font-size: 14px; color: var(--mlap-sub); line-height: 1.4; }
.mlap-actions { display: flex; gap: 8px; }
.mlap-actions .mlap-btn { flex: 1; }
.mlap-menu-item { width: 100%; min-height: 48px; display: flex; align-items: center; gap: 10px; padding: 0 12px; border: 0; border-radius: 14px; background: var(--mlap-surface); color: var(--mlap-ink); font: inherit; font-size: 15px; cursor: pointer; margin-bottom: 6px; text-align: left; }
.mlap-catat-menu { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(108px + env(safe-area-inset-bottom)); width: min(448px, calc(100vw - 32px)); z-index: 46; border-radius: 28px; padding: 10px; box-sizing: border-box; transform-origin: 50% 100%; animation: mlapPop .55s cubic-bezier(.34,1.45,.64,1) both;
  background: var(--mlap-glass); -webkit-backdrop-filter: blur(28px) saturate(1.6); backdrop-filter: blur(28px) saturate(1.6); border: 1px solid var(--mlap-glass-line); box-shadow: 0 18px 50px rgba(6,51,79,.26); }
.mlap-catat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.mlap-tile { min-height: 84px; border-radius: 18px; background: var(--mlap-surface); border: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 6px; font: inherit; font-size: 12px; font-weight: 600; color: var(--mlap-ink); cursor: pointer; text-align: center; animation: mlapItem .42s cubic-bezier(.34,1.56,.64,1) both; }
.mlap-tile:disabled { opacity: .55; cursor: not-allowed; }
.mlap-field { display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 6px 12px; border-bottom: 1px solid var(--mlap-line); }
.mlap-field:last-child { border-bottom: 0; }
.mlap-field .lb { flex: 1; font-size: 15px; font-weight: 600; }
.mlap-field .ht { display: block; font-size: 12px; font-weight: 400; color: var(--mlap-sub); }
.mlap-field input[type="checkbox"] { width: 24px; height: 24px; accent-color: var(--mlap-accent); }
.mlap-step { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--mlap-accent-soft); color: var(--mlap-accent); font-size: 20px; font-weight: 700; cursor: pointer; }
.mlap-stepval { width: 48px; text-align: center; font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.mlap-input { height: 40px; border-radius: 10px; border: 1px solid var(--mlap-line); padding: 0 10px; font-size: 16px; background: var(--mlap-surface); color: var(--mlap-ink); width: 130px; text-align: right; }
.mlap-warnline { font-size: 12px; font-weight: 600; color: var(--mlap-warn); padding: 0 12px 8px; }
.mlap-toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(96px + env(safe-area-inset-bottom)); z-index: 50; background: var(--mlap-ink); color: var(--mlap-bg); border-radius: 14px; padding: 10px 14px; font-size: 14px; }
.mlap-release { padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.mlap-release small { font-size: 13px; color: var(--mlap-sub); }

/* ── KIT (Plan 3A) ── */
.mlap-screen { display: flex; flex-direction: column; }
.mlap-top { display: flex; align-items: center; gap: 10px; padding: 12px 16px 4px; }
.mlap-top-t { flex: 1; min-width: 0; }
.mlap-top h1 { margin: 0; font-size: 24px; line-height: 30px; font-weight: 700; letter-spacing: -.02em; }
.mlap-top-sub { font-size: 13px; color: var(--mlap-sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mlap-chev { font-size: 28px; line-height: 1; margin-top: -3px; }
.mlap-grow { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mlap-grow .sb, .mlap-notice .sb { font-size: 12px; color: var(--mlap-sub); font-weight: 400; }
.mlap-stepper { min-height: 64px; display: flex; align-items: center; gap: 6px; padding: 0 12px; border-bottom: 1px solid var(--mlap-line); }
.mlap-stepper:last-child { border-bottom: 0; }
.mlap-stepper .lb { flex: 1; font-size: 15px; font-weight: 600; min-width: 0; }
.mlap-stepper .ht { display: block; font-size: 12px; font-weight: 400; color: var(--mlap-sub); }
input.mlap-stepval { border: 0; background: transparent; color: var(--mlap-ink); font: inherit; font-size: 22px; font-weight: 700; width: 56px; text-align: center; font-variant-numeric: tabular-nums; }
.mlap-step:disabled { opacity: .4; cursor: not-allowed; }
.mlap-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; padding: 3px; border-radius: 12px; background: #E3E9EE; }
.mlap-seg-b { min-height: 38px; border: 0; border-radius: 9px; background: transparent; font: inherit; font-size: 14px; font-weight: 600; color: var(--mlap-ink); cursor: pointer; }
.mlap-seg-b.on { background: var(--mlap-surface); box-shadow: 0 1px 3px rgba(14,27,36,.12); }
.mlap-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mlap-chip-b { min-height: 36px; padding: 0 12px; border-radius: 18px; border: 1px solid #D5DDE3; background: var(--mlap-surface); color: var(--mlap-ink); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.mlap-chip-b.on { border-color: #9A5B00; background: var(--mlap-bon-soft); color: var(--mlap-bon); }
.mlap-text { width: 100%; min-height: 44px; border-radius: 10px; border: 1px solid #D5DDE3; padding: 0 12px; font: inherit; font-size: 16px; background: var(--mlap-surface); color: var(--mlap-ink); box-sizing: border-box; }
.mlap-notice { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 14px; font-size: 14px; }
.mlap-notice.warn { background: var(--mlap-warn-soft); color: var(--mlap-warn); border: 1px solid var(--mlap-warn-line); }
.mlap-notice.info { background: var(--mlap-accent-soft); color: var(--mlap-accent); }
.mlap-notice.ok { background: var(--mlap-ok-soft); color: var(--mlap-ok); }
.mlap-hint { font-size: 13px; color: var(--mlap-sub); padding: 0 4px; }
.mlap-hint.ok { color: var(--mlap-ok); }
.mlap-wide { width: 100%; }
.mlap-photo { padding: 10px; }
.mlap-photo-btn { width: 100%; min-height: 96px; border: 1.5px dashed #9FB3C2; border-radius: 14px; background: var(--mlap-accent-soft); color: var(--mlap-accent); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font: inherit; cursor: pointer; padding: 10px; text-align: center; }
.mlap-photo-has { display: flex; align-items: center; gap: 10px; }
.mlap-photo-has img { width: 64px; height: 64px; object-fit: cover; border-radius: 10px; }
/* ── PENGIRIMAN + DETAIL STOP ── */
.mlap-rowbtn { width: 100%; border: 0; border-bottom: 1px solid var(--mlap-line); background: transparent; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.mlap-row .nm { font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.mlap-warn-dot { width: 16px; height: 16px; border-radius: 50%; background: var(--mlap-warn-soft); color: var(--mlap-warn); font-size: 11px; font-weight: 800; display: inline-grid; place-items: center; border: 1px solid var(--mlap-warn-line); }
.mlap-tag.ok { background: var(--mlap-ok-soft); color: var(--mlap-ok); }
.mlap-tag.held { background: var(--mlap-bon-soft); color: var(--mlap-bon); }
.mlap-tag.neg { background: var(--mlap-neg-soft); color: var(--mlap-neg); }
.mlap-tag.pin { background: #EEE9F8; color: #4B3A8C; }
.mlap-tag.info { background: var(--mlap-accent-soft); color: var(--mlap-accent); }
.mlap-tag.bon { background: var(--mlap-bon-soft); color: var(--mlap-bon); }
.mlap-run { padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.mlap-run-l { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 15px; }
.mlap-run-big { font-size: 28px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--mlap-accent); }
.mlap-next { padding: 12px; display: flex; flex-direction: column; gap: 10px; border: 1.5px solid #BFD6E8; }
.mlap-next-hd { border: 0; background: transparent; text-align: left; padding: 0; font: inherit; color: inherit; cursor: pointer; display: flex; flex-direction: column; gap: 2px; }
.mlap-next-hd .mlap-eyebrow { padding: 0; color: var(--mlap-accent); }
.mlap-next-nm { font-size: 20px; font-weight: 700; }
.mlap-chip-s { height: 26px; display: inline-flex; align-items: center; padding: 0 10px; border-radius: 13px; background: var(--mlap-bg); font-size: 12px; font-weight: 600; }
.mlap-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-bottom: 10px; }
a.mlap-btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.mlap-btn.off { opacity: .45; pointer-events: none; }
.mlap-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 10px; }
.mlap-facts > div { padding: 9px 12px; display: flex; flex-direction: column; gap: 1px; border-right: 1px solid var(--mlap-line); }
.mlap-facts > div:last-child { border-right: 0; }
.mlap-facts b { font-size: 16px; }
.mlap-checks { margin-bottom: 10px; }
.mlap-check-hd { padding: 10px 12px 4px; font-size: 13px; font-weight: 700; color: var(--mlap-warn); }
.mlap-check { display: flex; align-items: center; gap: 10px; padding: 8px 12px; font-size: 14px; }
.mlap-dot { width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; font-size: 12px; font-weight: 800; }
.mlap-dot.ok { background: var(--mlap-ok-soft); color: var(--mlap-ok); }
.mlap-dot.miss { background: var(--mlap-surface); color: var(--mlap-warn); border: 1.5px solid #E8A07A; box-sizing: border-box; }
.mlap-reason { padding: 12px; display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
.mlap-reason.warn { background: var(--mlap-warn-soft); border: 1px solid var(--mlap-warn-line); }
.mlap-sheet .mlap-note { margin-bottom: 10px; }
.mlap-sheet .mlap-actions { margin-bottom: 8px; }
/* ── TRANSAKSI ── */
.mlap-sum { padding: 4px 12px 10px; }
.mlap-sumrow { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; font-size: 14px; border-bottom: 1px solid var(--mlap-line); font-variant-numeric: tabular-nums; }
.mlap-sumrow.total { font-size: 17px; border-bottom: 0; }
.mlap-after { font-size: 13px; font-weight: 600; color: var(--mlap-sub); }
.mlap-after.bon { color: var(--mlap-bon); }
/* ── BUKA / TUTUP RIT ── */
.mlap-load { padding: 14px 12px; display: flex; flex-direction: column; gap: 8px; }
.mlap-loadval { font-size: 48px; line-height: 52px; font-weight: 800; text-align: center; font-variant-numeric: tabular-nums; color: var(--mlap-teal-ink); }
.mlap-loadval.under { color: var(--mlap-warn); }
.mlap-range { width: 100%; accent-color: var(--mlap-accent); min-height: 32px; }
.mlap-scale { display: flex; justify-content: space-between; font-size: 12px; color: var(--mlap-sub); }
.mlap-load .mlap-stepper { border: 0; padding: 0; min-height: 52px; }
.mlap-preview { padding: 12px; display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.mlap-preview .sb { font-size: 13px; color: var(--mlap-sub); }
/* ── RUTE RIT / PETA ── */
/* Leaflet panes use z-index 400-1000: keep them inside the map so sheets, menus and the dock stay on top. */
.mlap-map { position: relative; z-index: 0; isolation: isolate; height: 280px; border-radius: 16px; overflow: hidden; background: #DCE5EC; }
.mlap-pin-wrap { background: transparent; border: 0; }
.mlap-pin { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--mlap-accent); color: #fff; font: 700 12px/1 -apple-system, system-ui, sans-serif; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(6,51,79,.35); box-sizing: border-box; }
.mlap-pin.depot { width: 30px; height: 30px; border-radius: 9px; background: #0E1B24; }
.mlap-routehd { padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.mlap-routehd > div:first-child { display: flex; align-items: baseline; gap: 8px; }
.mlap-routefig { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.mlap-routefig > span { display: flex; flex-direction: column; }
.mlap-routefig b { font-size: 18px; font-variant-numeric: tabular-nums; }
.mlap-legleft { display: flex; flex-direction: column; align-items: flex-end; font-variant-numeric: tabular-nums; }
.mlap-legs .mlap-btn { margin: 8px 12px; width: calc(100% - 24px); }
/* ── SETORAN ── */
.mlap-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mlap-kpis > span { display: flex; flex-direction: column; align-items: center; padding: 10px 6px; border-right: 1px solid var(--mlap-line); }
.mlap-kpis > span:last-child { border-right: 0; }
.mlap-kpis b { font-size: 22px; font-variant-numeric: tabular-nums; }
.mlap-bontxt { color: var(--mlap-bon); font-weight: 600; }
.mlap-closerow { gap: 8px; }
.mlap-select { min-height: 40px; max-width: 55%; border-radius: 10px; border: 1px solid #D5DDE3; background: #F7F9FA; color: var(--mlap-ink); font: inherit; font-size: 13px; padding: 0 8px; }
.mlap-select.miss { border: 1.5px solid #C2410C; background: #FFF4EE; color: var(--mlap-warn); }
.mlap-fs { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.mlap-fs:disabled { opacity: .6; }
/* ── KIT 3B ── */
.mlap-money-in { display: inline-flex; align-items: center; gap: 6px; }
.mlap-money .mlap-input { width: 150px; }
.mlap-search { min-height: 48px; }
.mlap-rowbtn:disabled { opacity: .55; cursor: not-allowed; }
.mlap-step, .mlap-chip-b, .mlap-seg-b { min-height: 44px; }
/* ── PELANGGAN ── */
.mlap-ava { width: 36px; height: 36px; border-radius: 12px; flex-shrink: 0; display: grid; place-items: center; background: var(--mlap-accent-soft); color: var(--mlap-accent); font-size: 13px; font-weight: 800; }
.mlap-gapline { font-size: 12px; font-weight: 600; color: var(--mlap-warn); }
.mlap-actlist { display: flex; flex-direction: column; gap: 8px; }
/* ── LENGKAPI + ATUR TITIK ── */
.mlap-sec { padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.mlap-sec .mlap-check { padding: 0; }
.mlap-pinmap { height: 340px; }
.mlap-pin.drag { width: 30px; height: 30px; background: #C2410C; font-size: 14px; }
/* ── BAYAR BON ── */
.mlap-bigrp { font-size: 26px; font-variant-numeric: tabular-nums; color: var(--mlap-bon); }
.mlap-pad { padding: 4px 12px 12px; }
/* KOREKSI (3C) */
.mlap-rowbtn.on { background: var(--mlap-accent-soft); box-shadow: inset 3px 0 0 var(--mlap-accent); }
/* TOUCH TARGETS (3C): every control ≥ 44px; selects at 16px so iOS does not zoom */
.mlap-select { min-height: 44px; font-size: 16px; }
.mlap-chip select { min-height: 44px; font-size: 16px; }
.mlap-chip:has(select) { height: auto; padding: 0 6px; }
.mlap-range { min-height: 44px; }
@keyframes mlapFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes mlapUp { from { transform: translate(-50%, 40px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }
@keyframes mlapPop { 0% { opacity: 0; transform: translate(-50%, 60px) scale(.22, .12); filter: blur(8px); } 55% { opacity: 1; filter: blur(0); } 100% { opacity: 1; transform: translate(-50%, 0); } }
@keyframes mlapItem { 0% { opacity: 0; transform: translateY(14px) scale(.8); } 100% { opacity: 1; transform: none; } }
@media (prefers-reduced-transparency: reduce) {
  .mlap-round, .mlap-dock, .mlap-catat, .mlap-sheet, .mlap-catat-menu { background: var(--mlap-surface) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  .mlap-catat { background: var(--mlap-accent) !important; }
}
@media (prefers-reduced-motion: reduce) {
  .mlap-root *, .mlap-dock, .mlap-catat, .mlap-catat svg, .mlap-sheet, .mlap-catat-menu, .mlap-tile, .mlap-scrim { animation: none !important; transition: none !important; }
}