.modal{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1000;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease}.modal.active{opacity:1;visibility:visible}.modal-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.8);cursor:pointer}.modal-container{position:relative;max-width:90vw;max-height:90vh;margin:2rem;background:var(--theme);border-radius:12px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.4);transform:scale(.8);transition:transform .3s ease}.modal.active .modal-container{transform:scale(1)}.modal-close{position:absolute;top:1rem;right:1rem;z-index:10;width:40px;height:40px;border:none;background:rgba(0,0,0,.5);color:#fff;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background-color .2s ease,transform .2s ease}.modal-close:hover{background:rgba(0,0,0,.7);transform:scale(1.1)}.modal-close:focus{outline:2px solid var(--primary);outline-offset:2px}.modal-content{position:relative;display:flex;flex-direction:column}.modal-content img{width:100%;height:auto;max-height:80vh;object-fit:contain;display:block}.modal-caption{padding:1rem 1.5rem;margin:0;color:var(--content);background:var(--theme);font-size:.9rem;text-align:center;border-top:1px solid var(--border)}[data-theme=dark] .modal-overlay{background-color:rgba(0,0,0,.9)}[data-theme=dark] .modal-container{box-shadow:0 20px 60px rgba(0,0,0,.7)}[data-theme=dark] .modal-close{background:rgba(255,255,255,.2);color:var(--content)}[data-theme=dark] .modal-close:hover{background:rgba(255,255,255,.3)}@media(max-width:768px){.modal-container{max-width:95vw;max-height:95vh;margin:1rem;border-radius:8px}.modal-close{top:.5rem;right:.5rem;width:36px;height:36px}.modal-caption{padding:.75rem 1rem;font-size:.85rem}.modal-content img{max-height:75vh}}body.modal-open{overflow:hidden}.image-grid img{cursor:pointer}.image-grid img:hover{opacity:.9}