.modal{position:fixed;inset:0;z-index:var(--z-overlay);display:flex;align-items:center;justify-content:center;padding:var(--s-6);background:#08060e8c;backdrop-filter:blur(8px) saturate(120%);-webkit-backdrop-filter:blur(8px) saturate(120%)}.modal__panel{display:flex;flex-direction:column;width:100%;max-height:90vh;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);overflow:hidden}.modal__panel--md{max-width:560px}.modal__panel--lg{max-width:920px}.modal__panel--full{max-width:1200px;height:90vh}.modal__head{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);padding:var(--s-3) var(--s-3) var(--s-3) var(--s-5);border-bottom:1px solid var(--border);flex:none}.modal__title{font-size:var(--fs-md);font-weight:var(--fw-semibold)}.modal__body{overflow:auto;padding:var(--s-5)}.modal__body--flush{padding:0;flex:1 1 auto;min-height:0}@media(max-width:880px){.modal{padding:0;align-items:flex-end}.modal__panel--full,.modal__panel--lg,.modal__panel--md{width:100%;max-width:none;max-height:92dvh;border-radius:var(--r-2xl) var(--r-2xl) 0 0}.modal__panel--full{height:100dvh;max-height:100dvh;border-radius:0}.modal__head{position:sticky;top:0;z-index:1;background:var(--surface)}.modal__panel--full .modal__head{padding-top:calc(var(--s-3) + var(--safe-top))}.modal__body{overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding-bottom:calc(var(--s-5) + var(--safe-bottom))}.modal__head .icon-btn{min-width:var(--tap-min);min-height:var(--tap-min)}}.modal-enter-active{transition:opacity var(--dur-base) var(--ease-out)}.modal-enter-active .modal__panel{transition:transform var(--dur-expand) var(--ease-spring)}.modal-leave-active{transition:opacity var(--dur-fast) var(--ease-out)}.modal-leave-active .modal__panel{transition:transform var(--dur-fast) var(--ease-out)}.modal-enter-from,.modal-leave-to{opacity:0}.modal-enter-from .modal__panel,.modal-leave-to .modal__panel{transform:scale(.94) translateY(12px)}@media(max-width:880px){.modal-enter-from .modal__panel,.modal-leave-to .modal__panel{transform:translateY(100%)}}@media(prefers-reduced-motion:reduce){.modal-enter-active,.modal-leave-active{transition:opacity .001ms}.modal-enter-active .modal__panel,.modal-leave-active .modal__panel{transition:none}}