@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;
        }
        /* Accordion transition helpers */
        .accordion-content,
        .subaccordion-content {
            overflow: hidden;
            max-height: 0; /* collapsed */
            opacity: 0;
            transform: translateY(-4px);
            transition: max-height 260ms cubic-bezier(.2,.7,.2,1), opacity 220ms ease, transform 220ms ease;
        }
        .accordion-content.open,
        .subaccordion-content.open {
            will-change: max-height;
            opacity: 1;
            transform: translateY(0);
        }

        .app-modal {
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transition: opacity 0.25s ease, visibility 0.25s ease;
            backdrop-filter: blur(3px);
        }

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

        .app-modal-panel {
            transform: translateY(16px) scale(.985);
            opacity: 0;
            transition: transform 0.25s ease, opacity 0.25s ease;
            border: 1px solid rgba(148, 163, 184, .35);
            border-radius: 16px;
            box-shadow: 0 20px 48px rgba(0,0,0,.45);
            background: linear-gradient(180deg, #0b1220 0%, #0a0f18 100%);
        }

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

        .config-modal-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.55);
            z-index: 55;
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transition: opacity 0.25s ease, visibility 0.25s ease;
        }

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

        #accordion-config .accordion-content.config-modal-panel {
            position: fixed;
            left: 50%;
            top: 56%;
            transform: translate(-50%, -50%) translateY(16px) scale(.985);
            width: min(92vw, 760px);
            max-height: 78vh;
            overflow: auto;
            background: linear-gradient(180deg, #0b1220 0%, #0a0f18 100%);
            border: 1px solid rgba(148, 163, 184, .35);
            border-radius: 16px;
            padding: 1.25rem;
            z-index: 60;
            opacity: 0;
            transition: transform 0.25s ease, opacity 0.25s ease;
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
        }

        #accordion-config .accordion-content.config-modal-panel.open {
            transform: translate(-50%, -50%) translateY(0) scale(1);
            opacity: 1;
        }

        .config-modal-close {
            position: absolute;
            top: 0.75rem;
            right: 0.75rem;
            width: 2rem;
            height: 2rem;
            border-radius: 9999px;
            border: none;
            color: #9ca3af;
            background: transparent;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 1.5rem;
            line-height: 1;
            transition: color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
        }

        .config-modal-close:hover {
            color: #ef4444;
            background: rgba(239, 68, 68, 0.08);
            transform: scale(1.05);
        }

        .accordion-btn,
        .subaccordion-btn {
            cursor: pointer;
        }

        .accordion-btn[aria-expanded="true"] svg,
        .subaccordion-btn[aria-expanded="true"] svg {
            transform: rotate(180deg);
        }

        .accordion-btn svg,
        .subaccordion-btn svg {
            transition: transform 0.2s ease;
        }

        .accordion-btn[aria-expanded="true"] {
            background: rgba(55, 65, 81, 0.35);
        }

        .modal-close-clean {
            position: absolute;
            top: 0.75rem;
            right: 0.75rem;
            width: 2rem;
            height: 2rem;
            border: none;
            outline: none;
            background: transparent;
            color: #9ca3af;
            border-radius: 9999px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            line-height: 1;
            cursor: pointer;
            transition: color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
        }

        .modal-close-clean:hover {
            color: #ef4444;
            background: rgba(239, 68, 68, 0.08);
            transform: scale(1.05);
        }

        /* Settings visual normalization */
        .settings-shell,
        .settings-side,
        .settings-card,
        .settings-inner,
        .settings-pill {
            background: #111827 !important;
            border-color: #1f2937 !important;
            border-radius: 0.25rem !important;
        }

        #accordion-config .accordion-btn,
        #accordion-config .subaccordion-btn {
            background: #111827;
            color: #ffffff;
        }

        #accordion-config .accordion-btn:hover,
        #accordion-config .subaccordion-btn:hover {
            background: #1f2937 !important;
        }

        #accordion-config .accordion-content,
        #accordion-config .subaccordion-content {
            background: #111827;
        }

        /* No inner accordions: sections open directly from left navigation */
        .subaccordion-btn {
            display: none !important;
        }

        .settings-nav-item {
            display: block;
            width: 100%;
            text-align: left;
            padding: 0.625rem 0.875rem;
            border-radius: 0.25rem;
            color: #d1d5db;
            transition: background-color 0.2s ease, color 0.2s ease;
        }

        .settings-nav-item:hover {
            background: #1f2937;
            color: #ffffff;
        }

        .settings-nav-item.active {
            background: #374151;
            color: #ffffff;
            font-weight: 600;
        }

        .settings-panel {
            background: #111827;
            border: 1px solid #1f2937;
            border-radius: 0.5rem;
            padding: 1.25rem;
        }

        #language-settings-container {
            background: linear-gradient(180deg, rgba(17, 24, 39, 0.65) 0%, rgba(15, 23, 42, 0.55) 100%);
            border: 1px solid #334155;
            border-radius: 0.5rem;
            padding: 1rem;
        }

        #language-selector-wrapper {
            width: 100%;
            display: flex !important;
            flex-direction: column;
            align-items: stretch !important;
            gap: 0.5rem !important;
        }

        #language-selector-wrapper [data-i18n-key="language"] {
            font-size: 0.875rem !important;
            font-weight: 600;
            letter-spacing: 0.01em;
            color: #cbd5e1;
            opacity: 1 !important;
        }

        #language-select {
            width: 100%;
            border: 1px solid #475569;
            background: #0f172a;
            color: #f8fafc;
            font-size: 0.875rem;
            line-height: 1.25rem;
            padding: 0.625rem 0.75rem;
            border-radius: 0.5rem;
            outline: none;
            cursor: pointer;
            transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
        }

        #language-select:hover {
            border-color: #60a5fa;
        }

        #language-select:focus {
            border-color: #3b82f6;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
        }

        .plan-card {
            cursor: pointer;
            transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
        }

        .plan-card:hover {
            border-color: #3b82f6 !important;
            background: #1f2937 !important;
            transform: translateY(-1px);
            box-shadow: 0 8px 24px rgba(59, 130, 246, 0.18);
        }

        /* Theme-aware text colors for settings content */
        html.theme-dark main,
        html.theme-dark main p,
        html.theme-dark main span,
        html.theme-dark main a,
        html.theme-dark main button,
        html.theme-dark main label,
        html.theme-dark main h1,
        html.theme-dark main h2,
        html.theme-dark main h3,
        html.theme-dark main h4,
        html.theme-dark main li,
        html.theme-dark main dt,
        html.theme-dark main dd,
        html.theme-dark main select,
        html.theme-dark main option {
            color: #ffffff;
        }

        html.theme-dark main .text-gray-200,
        html.theme-dark main .text-gray-300,
        html.theme-dark main .text-gray-400,
        html.theme-dark main .text-emerald-300 {
            color: #ffffff !important;
        }

        html.theme-light main,
        html.theme-light main p,
        html.theme-light main span,
        html.theme-light main a,
        html.theme-light main button,
        html.theme-light main label,
        html.theme-light main h1,
        html.theme-light main h2,
        html.theme-light main h3,
        html.theme-light main h4,
        html.theme-light main li,
        html.theme-light main dt,
        html.theme-light main dd,
        html.theme-light main select,
        html.theme-light main option {
            color: #0f172a;
        }

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

        html.theme-light .settings-nav-item {
            color: #0f172a !important;
        }

        html.theme-light .settings-nav-item:hover {
            background: #2563eb !important;
            color: #ffffff !important;
        }

        html.theme-light .settings-nav-item.active {
            background: #1d4ed8 !important;
            color: #ffffff !important;
        }

        html.theme-light .settings-panel {
            background: #ffffff !important;
            border-color: #dbe6f4 !important;
            box-shadow: 0 8px 26px rgba(15, 23, 42, 0.06);
        }

        html.theme-light #language-settings-container {
            background: #f8fbff !important;
            border-color: #d3e1f4 !important;
        }

        html.theme-light #language-selector-wrapper [data-i18n-key="language"] {
            color: #0f172a !important;
        }

        html.theme-light #language-select {
            background: #ffffff !important;
            color: #0f172a !important;
            border-color: #c7d8ee !important;
        }

        html.theme-light #language-select:hover {
            border-color: #60a5fa !important;
        }

        html.theme-light #language-select:focus {
            border-color: #2563eb !important;
            box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.16) !important;
        }

        html.theme-light #btn-request-data,
        html.theme-light #config-change-currency-btn {
            background: #2563eb !important;
            color: #ffffff !important;
        }

        html.theme-light #btn-request-data:hover,
        html.theme-light #config-change-currency-btn:hover {
            background: #1d4ed8 !important;
        }

        html.theme-light #menu-toggle {
            background: #f1f5f9 !important;
            color: #334155 !important;
            border: 1px solid #dbe6f4 !important;
            box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05);
        }

        html.theme-light #menu-toggle:hover {
            background: #eff6ff !important;
            color: #1d4ed8 !important;
            border-color: #bfdbfe !important;
        }

        /* Config sub-sections in light theme: remove dark strips */
        html.theme-light #accordion-config .subaccordion-content {
            background: transparent !important;
        }

        html.theme-light #accordion-config .subaccordion-content .bg-gray-900\/50,
        html.theme-light #accordion-config .subaccordion-content .bg-gray-800\/50 {
            background: #f8fbff !important;
            border-color: #d3e1f4 !important;
        }

        html.theme-light #accordion-config .subaccordion-content .text-gray-300,
        html.theme-light #accordion-config .subaccordion-content .text-gray-400 {
            color: #475569 !important;
        }

        html.theme-light #accordion-config .subaccordion-content a.text-blue-400 {
            color: #2563eb !important;
        }

        html.theme-light #accordion-config .subaccordion-content a.text-blue-400:hover {
            color: #1d4ed8 !important;
        }

        html.theme-light [for="toggle-photo-dynamic-pricing"] {
            background: #eef5ff !important;
            border-color: #c7d8ee !important;
        }

        html.theme-light [for="toggle-photo-dynamic-pricing"]:hover {
            background: #e6f0ff !important;
            border-color: #93c5fd !important;
        }

        html.theme-light #photo-dynamic-pricing-status {
            color: #1e293b !important;
        }

        html.theme-light #toggle-photo-dynamic-pricing {
            border-color: #93c5fd !important;
            accent-color: #2563eb;
            background: #ffffff !important;
        }