/* ==================================================
   DESKTOP / DEFAULT
   ================================================== */
.ok-sheet-stack{position:relative;z-index:1000}.ok-sheet-layer{position:fixed;inset:0;z-index:1000;display:grid;align-items:end;pointer-events:none}.ok-sheet-layer.is-open{pointer-events:auto}.ok-sheet-overlay{position:absolute;inset:0;border:0;background:rgba(0,0,0,.42);opacity:0;transition:opacity .18s ease}.ok-sheet-layer.is-open .ok-sheet-overlay{opacity:1}.ok-sheet{position:relative;width:100%;max-width:600px;margin:0 auto;background:#fff;border-radius:20px 20px 0 0;max-height:92dvh;display:flex;flex-direction:column;transform:translateY(20px);opacity:0;transition:.18s ease;box-shadow:0 -8px 36px rgba(0,0,0,.18)}.ok-sheet-layer.is-open .ok-sheet{transform:none;opacity:1}.ok-sheet-layer.is-under{visibility:hidden}.ok-sheet-header{display:grid;grid-template-columns:1fr 44px;align-items:center;gap:8px;min-height:60px;padding:8px 10px 8px 16px;border-bottom:1px solid #eaecf0}.ok-sheet-header h2{font-size:18px;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ok-sheet-close{width:42px;height:42px;border:0;border-radius:50%;background:#f1f2f3;font-size:28px;line-height:1;color:#202122}.ok-sheet-content{overflow:auto;overscroll-behavior:contain}.ok-sheet-body{padding:16px 16px 28px}.ok-sheet-loading{padding:30px;text-align:center;color:var(--ok-muted)}

/* ==================================================
   MAX-WIDTH: 600PX
   ================================================== */
@media (max-width: 600px) {
  .ok-sheet{max-width:none;max-height:94dvh;border-radius:18px 18px 0 0}
  .ok-sheet-header{padding-left:14px}
  .ok-sheet-body{padding:14px 14px calc(24px + env(safe-area-inset-bottom))}
}

/* ==================================================
   MAX-WIDTH: 430PX
   ================================================== */
@media (max-width: 430px) {
  .ok-sheet{border-radius:16px 16px 0 0}
  .ok-sheet-header{grid-template-columns:minmax(0,1fr) 42px;min-height:56px;padding:7px 8px 7px 13px}
  .ok-sheet-header h2{font-size:17px}
  .ok-sheet-close{width:40px;height:40px}
  .ok-sheet-body{padding-left:13px;padding-right:13px}
}

/* ==================================================
   MAX-WIDTH: 390PX
   ================================================== */
@media (max-width: 390px) {
  .ok-sheet-body{padding-left:11px;padding-right:11px}
}