body {
            font-family: 'Inter', sans-serif;
            background-color: #0b0f19;
            color: #f3f4f6;
        }
        .code-font {
            font-family: 'JetBrains Mono', monospace;
        }
        ::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }
        ::-webkit-scrollbar-track {
            background: #0f172a;
        }
        ::-webkit-scrollbar-thumb {
            background: #334155;
            border-radius: 3px;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: #475569;
        }
        .canvas-bg {
            background-image: radial-gradient(#1e293b 1px, transparent 1px);
            background-size: 16px 16px;
        }

        /* Image Designer Theme System */
        :root {
            --designer-bg-day: #ffffff;
            --designer-text-day: #64748b; /* Tailwind text-slate-500 */
            --designer-bg-night: #0b0f19;
            --designer-text-night: #f3f4f6;
        }

        body.theme-day {
            background-color: var(--designer-bg-day);
            color: var(--designer-text-day);
        }

        body.theme-night {
            background-color: var(--designer-bg-night);
            color: var(--designer-text-night);
        }

        /* Day theme overrides */
        body.theme-day .bg-slate-900,
        body.theme-day .bg-slate-950 {
            background-color: #ffffff !important;
        }

        body.theme-day .bg-slate-950\/40,
        body.theme-day .bg-slate-950\/50,
        body.theme-day .bg-slate-900\/50 {
            background-color: #f8fafc !important;
        }

        body.theme-day .border-slate-800 {
            border-color: #e2e8f0 !important;
        }

        body.theme-day .text-white,
        body.theme-day .text-slate-200,
        body.theme-day .text-slate-300 {
            color: var(--designer-text-day) !important;
        }

        body.theme-day .text-slate-400,
        body.theme-day .text-slate-500 {
            color: var(--designer-text-day) !important;
        }

        body.theme-day .text-white {
            color: white !important;
        }

        body.theme-day .canvas-bg {
            background-image: radial-gradient(#cbd5e1 1px, transparent 1px);
        }

        body.theme-night .canvas-bg {
            background-image: radial-gradient(#1e293b 1px, transparent 1px);
        }

        #themeToggleButton {
            min-width: 90px;
        }

        #pdf-export-stage {
            position:absolute;
            left:-9999px;
        }

        .export-page {
            width:1080px;
            height:1080px;
            overflow:hidden;
        }
        .hide-scrollbar::-webkit-scrollbar {
            display: none;
        }

        .hide-scrollbar {
            -ms-overflow-style: none;  /* IE and Edge */
            scrollbar-width: none;     /* Firefox */
        }

        /* Jewelry studio viewport and its template-specific controls. */
        #canva-viewport { max-width: none; min-height: 0; }
        #canvasViewport { width: min(100%, 760px); min-width: 0 !important; min-height: 560px !important; background: #111318; }
        .bag-stage { position: relative; width: 100%; height: 100%; min-height: 560px; overflow: hidden; background: radial-gradient(circle at 50% 42%, #343944 0%, #171b23 47%, #0b0d12 100%); }
        .bag-webgl-canvas { display: block; width: 100%; height: 100%; touch-action: none; }
        .bag-demo-stage { position: relative; width: 100%; height: 100%; min-height: 560px; overflow: hidden; background: #111318; }
        .bag-demo-frame { display: block; width: 100%; height: 100%; min-height: 560px; border: 0; background: #111318; }
        .bag-stage-heading { position: absolute; z-index: 1; top: 18px; left: 20px; color: #f8fafc; text-transform: capitalize; pointer-events: none; }
        .bag-stage-heading strong { display: block; font-size: 1rem; letter-spacing: .02em; }
        .bag-stage-heading span { display: block; margin-top: 3px; color: #aab2c0; font-size: .72rem; }
        .bag-stage-loading { position: absolute; inset: 0; display: grid; place-items: center; color: #cbd5e1; font-size: .85rem; background: rgba(11, 13, 18, .45); }
        .options { max-height: 46vh; overflow-y: auto; padding: .75rem; border: 1px solid #e2e8f0; border-radius: .65rem; background: #f8fafc; }
        .options-title { margin-bottom: .65rem; color: #334155; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
        .option-field { display: block; margin-top: .55rem; }
        .option-field span { display: block; margin-bottom: .25rem; color: #64748b; font-size: .7rem; font-weight: 600; }
        .option-field select, .option-field input { width: 100%; border: 1px solid #cbd5e1; border-radius: .4rem; background: white; color: #1e293b; padding: .45rem .55rem; font-size: .75rem; }
        .options-triangle {
            display: inline-flex;
            width: 14px;
            font-size: 10px;
            transition: transform 0.2s ease;
        }
        .options.collapsed .options-content {
            display: none;
        }
        .options.collapsed .options-triangle {
            transform: rotate(-90deg);

        @media (max-width: 700px) {
            #canvasViewport, .bag-stage { min-height: 420px !important; }
            #canvasViewport { width: 100%; }
        }