.motile-sheet__overlay{position:fixed;top:0;right:0;bottom:0;left:0;background-color:#0000;transition:background-color .3s ease;overscroll-behavior:contain;display:flex}.motile-sheet__overlay--left{justify-content:flex-start}.motile-sheet__overlay--right{justify-content:flex-end}.motile-sheet__overlay--visible{background-color:#0006}.motile-sheet__content{position:fixed;top:0;bottom:0;margin:0;width:100%;max-width:var(--sheet-max-width,600px);height:100vh;height:100dvh;background-color:#fff;box-shadow:0 0 30px #00000026;display:flex;flex-direction:column;transition:transform .3s ease;will-change:transform;overscroll-behavior:contain;box-sizing:border-box}.motile-sheet__content--left{left:0;border-right:1px solid #e5e7eb;transform:translate(-100%)}.motile-sheet__content--left.motile-sheet__content--visible{transform:translate(0)}.motile-sheet__content--right{right:0;border-left:1px solid #e5e7eb;transform:translate(100%)}.motile-sheet__content--right.motile-sheet__content--visible{transform:translate(0)}@media (max-width:768px){.motile-sheet__content{max-width:none;width:100%}}.motile-sheet__header{height:56px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 20px;flex-shrink:0;border-bottom:1px solid #e5e7eb;background-color:#fff;-moz-user-select:none;user-select:none;-webkit-user-select:none}.motile-sheet__header button{color:inherit}@media (min-width:769px){.motile-sheet__header{height:64px;padding:0 24px}}.motile-sheet__back-button{display:flex;align-items:center;gap:12px;background:none;border:none;padding:8px 12px 8px 4px;margin-left:-4px;cursor:pointer;border-radius:8px;color:#111827;transition:all .2s ease;font-size:16px;font-weight:600}.motile-sheet__back-button:hover{background-color:#f3f4f6}.motile-sheet__back-button:active{transform:scale(.98)}.motile-sheet__chevron{width:24px;height:24px;flex-shrink:0}.motile-sheet__title{flex:1 1;min-width:0;margin:0;font-size:18px;font-weight:600;color:#111827;line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media (max-width:768px){.motile-sheet__title{font-size:16px}}.motile-sheet__close{display:flex;align-items:center;justify-content:center;min-width:32px;min-height:32px;padding:0;margin:0;background:none;border:none;border-radius:6px;cursor:pointer;color:#6b7280;transition:all .15s ease;flex-shrink:0;-webkit-tap-highlight-color:transparent}.motile-sheet__close:hover{background-color:#f3f4f6;color:#111827}.motile-sheet__close:active{transform:scale(.95);background-color:#e5e7eb}.motile-sheet__close:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}.motile-sheet__body{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;padding:20px;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;width:100%;box-sizing:border-box;background-color:#fff}@media (min-width:769px){.motile-sheet__body{padding:20px 24px}}.motile-sheet__body::-webkit-scrollbar{width:6px}.motile-sheet__body::-webkit-scrollbar-track{background:transparent}.motile-sheet__body::-webkit-scrollbar-thumb{background-color:#0003;border-radius:3px}.motile-sheet__body::-webkit-scrollbar-thumb:hover{background-color:#0000004d}@media (prefers-color-scheme:dark){.motile-sheet__content{background-color:#1f2937;box-shadow:0 0 30px #00000080}.motile-sheet__content--left{border-right-color:#374151}.motile-sheet__content--right{border-left-color:#374151}.motile-sheet__header{background-color:#1f2937;border-bottom-color:#374151}.motile-sheet__back-button{color:#f9fafb}.motile-sheet__back-button:hover{background-color:#374151}.motile-sheet__title{color:#f9fafb}.motile-sheet__body{background-color:#1f2937}.motile-sheet__body::-webkit-scrollbar-thumb{background-color:#fff3}.motile-sheet__body::-webkit-scrollbar-thumb:hover{background-color:#ffffff4d}.motile-sheet__close{color:#9ca3af}.motile-sheet__close:hover{background-color:#374151;color:#f9fafb}.motile-sheet__close:active{background-color:#4b5563}}@media (prefers-reduced-motion:reduce){.motile-sheet__content,.motile-sheet__overlay{transition:none}}@media (hover:none) and (pointer:coarse){.motile-sheet__header{height:60px}.motile-sheet__chevron{width:26px;height:26px}}