@import url("./static/css/base/_variables.css");
        @import url("./static/css/base/_global.css");
        @import url("./static/css/base/_typography.css");
        @import url("./static/css/utilities/_helpers.css");
        @import url("./static/css/layout/_header.css");
        @import url("./static/css/layout/_container.css");
        @import url("./static/css/layout/_footer.css");
        @import url("./static/css/layout/_grid-systems.css");
        @import url("./static/css/components/_buttons.css");
        @import url("./static/css/components/_forms.css");
        @import url("./static/css/components/_cards.css");
        @import url("./static/css/components/_menu-dropdown.css");
        @import url("./static/css/components/_image-comparer.css");
        @import url("./static/css/pages/_home.css");
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
        body {
            font-family: 'Inter', sans-serif;
        }

        .modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(2, 6, 17, .58);
            backdrop-filter: blur(3px);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 3000;
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transition: opacity 0.3s ease, visibility 0.3s ease;
        }

        .modal.open {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
        }

        .modal-content {
            position: relative;
            max-width: 90%;
            max-height: 90%;
            border-radius: 16px;
            border: 1px solid rgba(148, 163, 184, .35);
            box-shadow: 0 20px 48px rgba(0,0,0,.45);
            transform: translateY(16px) scale(.985);
            opacity: 0;
            transition: transform 0.25s ease, opacity 0.25s ease;
        }

        .modal.open .modal-content {
            transform: translateY(0) scale(1);
            opacity: 1;
        }

        .close-btn {
            position: absolute;
            top: 20px;
            right: 30px;
            color: #fff;
            font-size: 40px;
            font-weight: bold;
            transition: 0.3s;
            cursor: pointer;
        }

        .close-btn:hover,
        .close-btn:focus {
            color: #bbb;
            text-decoration: none;
            cursor: pointer;
        }

        html.theme-light .modal-content {
            border-color: rgba(148, 163, 184, .4);
            box-shadow: 0 18px 38px rgba(2,6,23,.2);
        }

        /* My Upscales - light theme harmony */
        html.theme-light main,
        html.theme-light main .bg-gray-900 {
            background: #ffffff !important;
        }

        html.theme-light #main-menu #logout-button {
            background: #dc2626 !important;
            color: #ffffff !important;
        }

        html.theme-light #main-menu #logout-button:hover {
            background: #b91c1c !important;
            color: #ffffff !important;
        }

        html.theme-light .bg-gray-800\/50 {
            background: #f8fbff !important;
            border-color: #d3e1f4 !important;
        }

        html.theme-light #storage-count,
        html.theme-light #no-images-message h3,
        html.theme-light h1,
        html.theme-light .sticky.top-24 p {
            color: #0f172a !important;
        }

        html.theme-light #delete-all-btn,
        html.theme-light #delete-all-btn * {
            color: #ffffff !important;
        }

        html.theme-light .text-gray-200,
        html.theme-light .text-gray-300,
        html.theme-light .text-gray-400 {
            color: #475569 !important;
        }

        html.theme-light #upscaled-images-container > div {
            background: #ffffff !important;
            border-color: #dbe7f5 !important;
            box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08) !important;
        }

        html.theme-light #no-images-message .bg-gray-700\/50 {
            background: #edf4ff !important;
        }

        html.theme-light #no-images-message svg {
            color: #2563eb !important;
        }