.modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:var(--z-modal);display:flex;align-items:center;justify-content:center;padding:var(--space-6);background:var(--overlay-bg);opacity:0;visibility:hidden;transition:opacity var(--duration-normal),visibility var(--duration-normal)}.modal--open{opacity:1;visibility:visible}.modal__content{position:relative;width:100%;max-width:480px;max-height:90vh;overflow-y:auto;background:var(--glass-bg);backdrop-filter:blur(var(--glass-blur-heavy));-webkit-backdrop-filter:blur(var(--glass-blur-heavy));border:1px solid var(--glass-border);border-radius:var(--radius-2xl);padding:var(--space-8);transform:scale(.95) translateY(10px);transition:transform var(--duration-normal) var(--ease-out-expo)}.modal--open .modal__content{transform:scale(1) translateY(0)}.modal__close{position:absolute;top:var(--space-4);right:var(--space-4);display:flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;background:transparent;border:none;border-radius:var(--radius-md);color:var(--color-text-muted);cursor:pointer;transition:all var(--duration-fast)}.modal__close:hover{background:var(--color-bg-hover);color:var(--color-text-primary)}.modal__close svg{width:20px;height:20px}.modal__header{margin-bottom:var(--space-6);padding-right:var(--space-10)}.modal__title{font-family:var(--font-display);font-size:var(--text-h3);font-weight:var(--font-weight-bold)}.modal__body{color:var(--color-text-secondary)}.modal__footer{display:flex;justify-content:center;gap:var(--space-4);margin-top:var(--space-8);padding-top:var(--space-6);border-top:1px solid var(--glass-border)}.modal__footer .button{flex:1;max-width:240px}.modal__content--sm{max-width:400px}.modal__content--lg{max-width:640px}.modal__content--xl{max-width:800px}.modal__content--subscription{max-width:520px}.modal__content--subscription .modal__title{font-size:var(--text-h4);white-space:normal}@media (max-width: 640px){.modal__content--subscription .modal__title{font-size:var(--text-h5)}}@media (max-width: 640px){.modal{padding:var(--space-4)}.modal__content{padding:var(--space-6);border-radius:var(--radius-xl);max-height:85vh}.modal__header{padding-right:var(--space-8)}.modal__title{font-size:var(--text-h4)}.modal__footer{flex-direction:column;gap:var(--space-3)}.modal__footer .button{width:100%;max-width:none}}body.modal-open{overflow:hidden}