<style>
        #imageModal {
            display: none;
            position: fixed;
            z-index: 9999;
            top: 0; left: 0;
            width: 100vw; height: 100vh;
            background: rgba(0,0,0,0.85);
            justify-content: center;
            align-items: center;
        }

        #imageModal.show {
            display: flex;
        }

        .modal-inner {
            position: relative;
        }

        #imageModal img {
            max-width: 90vw;
            max-height: 90vh;
            border-radius: 8px;
            box-shadow: 0 0 20px rgba(0,0,0,0.5);
        }

        .close-modal {
            position: absolute;
            top: -20px;
            right: -20px;
            background: #fff;
            color: #000;
            font-size: 1.5rem;
            border: none;
            border-radius: 50%;
            width: 35px;
            height: 35px;
            cursor: pointer;
            box-shadow: 0 0 5px rgba(0,0,0,0.3);
        }

        .close-modal:hover {
            background: #f44336;
            color: #fff;
        }
    </style>