.modal-overlay{position:fixed;inset:0;background:var(--color-overlay);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:var(--z-modal-backdrop);animation:fadeIn var(--transition-fast) ease-out;padding:var(--space-4)}.modal-content{background:var(--color-surface);border-radius:var(--radius-2xl);box-shadow:var(--shadow-xl);width:100%;max-width:480px;max-height:90vh;overflow-y:auto;animation:scaleIn var(--transition-normal) ease-out;position:relative;z-index:var(--z-modal)}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-5) var(--space-6);border-bottom:1px solid var(--color-border-light)}.modal-title{font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);letter-spacing:var(--letter-spacing-tight)}.modal-close{width:32px;height:32px;border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;color:var(--color-text-tertiary);transition:all var(--transition-fast);cursor:pointer;border:none;background:none}.modal-close:hover{background:var(--color-bg-secondary);color:var(--color-text-primary)}.modal-body{padding:var(--space-6)}@media (max-width:767px){.modal-overlay{align-items:flex-end;padding:0}.modal-content{max-width:100%;border-radius:var(--radius-2xl) var(--radius-2xl) 0 0;max-height:92vh;animation:slideInUp var(--transition-normal) ease-out}}