.modal-overlay{--modal-bg:rgba(0,0,0,0.8);--modal-control-bg:rgba(248,244,227,0.3);--modal-control-hover:rgba(248,244,227,0.5);--modal-text:white;--modal-border-radius:12px;--modal-transition:0.3s;--modal-shadow:0 25px 50px rgba(0,0,0,0.5)}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:var(--modal-bg);display:flex;align-items:center;justify-content:center;z-index:1000;opacity:0;visibility:hidden;transition:all var(--modal-transition) ease;backdrop-filter:blur(8px);will-change:opacity,visibility}.modal-overlay.active{opacity:1;visibility:visible}.modal-container{position:relative;width:90%;max-width:1200px;max-height:90vh;overflow:hidden;border-radius:var(--modal-border-radius);box-shadow:var(--modal-shadow);transform:scale(0.9);transition:all var(--modal-transition) ease;will-change:transform}.modal-overlay.active .modal-container{transform:scale(1)}.modal-image{display:block;width:100%;height:auto;object-fit:contain;max-height:85vh;transition:transform var(--modal-transition) ease;will-change:transform}.modal-close{position:absolute;top:15px;right:15px;width:40px;height:40px;background-color:var(--modal-control-bg);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all var(--modal-transition) ease;z-index:1010;will-change:transform,background-color}.modal-close:hover{background-color:rgba(231,76,60,0.8);transform:rotate(90deg)}.modal-close::before,.modal-close::after{content:'';position:absolute;width:20px;height:3px;background-color:var(--modal-text)}.modal-close::before{transform:rotate(45deg)}.modal-close::after{transform:rotate(-45deg)}.modal-nav{position:absolute;top:50%;width:100%;display:flex;justify-content:space-between;padding:0 20px;transform:translateY(-50%);z-index:1005;pointer-events:none}.modal-nav-button{width:50px;height:50px;background-color:var(--modal-control-bg);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all var(--modal-transition) ease;pointer-events:auto;will-change:transform,background-color}.modal-nav-button:hover{background-color:var(--modal-control-hover);transform:scale(1.1)}.modal-prev::before,.modal-next::before{content:'';display:block;width:15px;height:15px;border-top:3px solid var(--modal-text);border-left:3px solid var(--modal-text)}.modal-prev::before{transform:rotate(-45deg);margin-left:5px}.modal-next::before{transform:rotate(135deg);margin-right:5px}.modal-caption{position:absolute;bottom:0;left:0;right:0;padding:20px;background:linear-gradient(to top,rgba(0,0,0,0.8),transparent);color:var(--modal-text);text-align:center}.modal-counter{position:absolute;top:20px;left:20px;background-color:var(--modal-control-bg);color:var(--modal-text);padding:5px 10px;border-radius:20px;font-size:14px}.modal-zoom-controls{position:absolute;bottom:20px;right:20px;display:flex;gap:10px;z-index:1010}.modal-zoom-button{width:40px;height:40px;background-color:var(--modal-control-bg);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all var(--modal-transition) ease;color:var(--modal-text);font-size:20px;font-weight:bold;will-change:transform,background-color}.modal-zoom-button:hover{background-color:var(--modal-control-hover);transform:scale(1.1)}.modal-loading{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:60px;height:60px;border:6px solid rgba(255,255,255,0.3);border-radius:50%;border-top-color:var(--modal-text);animation:spin 1s linear infinite}.modal-gesture-hint{position:absolute;bottom:70px;left:50%;transform:translateX(-50%);background-color:var(--modal-control-bg);color:var(--modal-text);padding:8px 15px;border-radius:20px;font-size:14px;opacity:0.7;transition:opacity var(--modal-transition) ease;pointer-events:none}.modal-gesture-hint.hide{opacity:0}@media (max-width:768px){.modal-nav-button{width:40px;height:40px}.modal-close{width:35px;height:35px}.modal-caption{padding:15px;font-size:14px}.modal-zoom-controls{bottom:15px;right:15px}.modal-zoom-button{width:35px;height:35px;font-size:18px}.modal-gesture-hint{bottom:60px;font-size:12px;padding:6px 12px}}@media (max-width:480px){.modal-nav{padding:0 10px}.modal-nav-button{width:35px;height:35px}.modal-counter{top:15px;left:15px;font-size:12px}.modal-close{top:10px;right:10px;width:30px;height:30px}.modal-close::before,.modal-close::after{width:16px}.modal-zoom-controls{bottom:10px;right:10px;gap:8px}.modal-zoom-button{width:30px;height:30px;font-size:16px}}