/* modal.css — .md-*: backdrop pudar, panel naik+skala (HP: sheet dari bawah). Tutup: Esc, klik luar, tombol ✕. */
.md-root{position:fixed;inset:0;z-index:var(--z-modal);display:flex;align-items:flex-start;justify-content:center;padding:7vh 20px 20px;overflow-y:auto}
.md-backdrop{position:fixed;inset:0;background:var(--backdrop);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);animation:fadeIn var(--dur-slow) var(--ease-out) both}
.md-panel{position:relative;width:100%;max-width:520px;display:flex;flex-direction:column;background:var(--surface);border-radius:18px;box-shadow:var(--sh-3);animation:sheetIn var(--dur-slow) var(--ease-out) both}
.md-panel--lg{max-width:760px}
.md-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 14px 12px 22px;border-bottom:1px solid var(--line)}
.md-title{font-size:var(--fs-lg);font-weight:800}
.md-body{padding:20px 22px}
.md-foot{position:sticky;bottom:0;display:flex;justify-content:flex-end;gap:10px;padding:14px 22px;border-top:1px solid var(--line);background:var(--surface);border-radius:0 0 18px 18px}
.md-root.is-closing .md-backdrop{animation:fadeOut 180ms var(--ease-in) both}
.md-root.is-closing .md-panel{animation:sheetOut 180ms var(--ease-in) both}

@media (max-width:767px){
  .md-root{padding:0;align-items:flex-end}
  .md-panel{max-width:none;max-height:92vh;max-height:92dvh;overflow-y:auto;border-radius:20px 20px 0 0;animation:sheetUp var(--dur-slow) var(--ease-out) both}
  .md-root.is-closing .md-panel{animation:sheetDown 200ms var(--ease-in) both}
  .md-foot{border-radius:0;padding-bottom:calc(14px + env(safe-area-inset-bottom))}
  .md-foot .btn{flex:1}
}