.modal-overlay{position:fixed;inset:0;background-color:#000000bf;display:flex;align-items:center;justify-content:center;z-index:1000;padding:80px var(--spacing-xl) var(--spacing-xl);animation:modalFadeIn .2s ease-out;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}@keyframes modalFadeIn{0%{opacity:0}to{opacity:1}}.modal-container{background:#fff;border-radius:var(--radius-xl);box-shadow:var(--shadow-2xl);width:100%;max-height:80vh;display:flex;flex-direction:column;animation:modalSlideUp .3s ease-out;position:relative}@keyframes modalSlideUp{0%{opacity:0;transform:translateY(20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-xl);border-bottom:2px solid var(--color-border);background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-primary-dark) 100%);border-radius:var(--radius-xl) var(--radius-xl) 0 0}.modal-title{font-size:var(--font-size-2xl);font-weight:var(--font-weight-bold);color:#fff;margin:0}.modal-close{background:transparent;border:none;color:#fff;cursor:pointer;padding:var(--spacing-sm);display:flex;align-items:center;justify-content:center;border-radius:var(--radius-md);transition:all var(--transition-fast)}.modal-close:hover{background:#ffffff26;transform:scale(1.1)}.modal-close svg{width:24px;height:24px}.modal-content{padding:var(--spacing-2xl);overflow-y:auto;flex:1}.modal-content::-webkit-scrollbar{width:8px}.modal-content::-webkit-scrollbar-track{background:var(--color-background);border-radius:var(--radius-full)}.modal-content::-webkit-scrollbar-thumb{background:var(--color-primary);border-radius:var(--radius-full)}.modal-content::-webkit-scrollbar-thumb:hover{background:var(--color-primary-dark)}@media(max-width:768px){.modal-overlay{padding:calc(80px + var(--spacing-md)) var(--spacing-md) var(--spacing-md)}.modal-container{max-height:85vh}.modal-header{padding:var(--spacing-lg)}.modal-title{font-size:var(--font-size-xl)}.modal-content{padding:var(--spacing-lg)}.modal-close svg{width:20px;height:20px}}@media(max-width:480px){.modal-overlay{padding:calc(80px + var(--spacing-sm)) var(--spacing-sm) var(--spacing-sm)}.modal-header{padding:var(--spacing-md)}.modal-title{font-size:var(--font-size-lg)}.modal-content{padding:var(--spacing-md)}}