.modal-overlay{width:100%;height:100%;max-height:100vh;min-height:100vh;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.7);display:flex;justify-content:center;align-items:center;z-index:9999;animation:fadeIn .4s ease-out;overflow-y:scroll}.modal-content{background:#fff;border-radius:15px;width:500px;box-shadow:0 10px 25px rgba(0,0,0,.3);max-width:90%;animation:slideUp .3s ease-out,bounceIn .3s ease-out;position:relative}.modal-header{padding:30px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--stroke)}.modal-header>h2{margin:0;font-weight:700;font-size:24px}@media (max-width:768px){.modal-header>h2{font-size:18px}}.close-btn{background:none;border:none;color:#333;cursor:pointer;padding:0;margin:0}.close-btn:focus{outline:none}.modal-body{padding:20px 30px}.modal-footer{padding:18px 30px;border-top:1px solid var(--stroke);display:flex;justify-content:flex-end;gap:16px}@media (max-width:768px){.modal-footer{flex-direction:column;gap:12px}}.btn{padding:12px 20px;background-color:#007bff;color:#fff;border:none;border-radius:5px;cursor:pointer;transition:background-color .2s}.btn:hover{background-color:#0056b3}.btn:focus{outline:none;box-shadow:0 0 5px rgba(0,123,255,.5)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{transform:translateY(20px)}to{transform:translateY(0)}}@keyframes bounceIn{0%{transform:scale(.7)}50%{transform:scale(1.05)}to{transform:scale(1)}}@media (max-width:768px){.modal-content{width:90%;padding:20px}.modal-header{padding:0 0 16px}.modal-body{padding:0}.modal-footer{padding:8px}}