:root {
            --oe-page-bg-image: none;
            --oe-page-bg-position: center center;
            --oe-bg-pointer-x: 50vw;
            --oe-bg-pointer-y: 50vh;
            --oe-bg-focus-size: 168px;
            --oe-page-bg-overlay:
                linear-gradient(180deg, rgba(247, 252, 248, 0.86) 0%, rgba(247, 252, 248, 0.9) 48%, rgba(255, 255, 255, 0.94) 100%);
        }

        :root[data-oe-background="mint-workspace"] {
            --oe-page-bg-position: center center;
        }

        :root[data-oe-background="balcony-garden"] {
            --oe-page-bg-position: center center;
        }

        :root[data-oe-background="anime-desk-girl"] {
            --oe-page-bg-position: 24% center;
        }

        :root[data-oe-background="anime-greenhouse-girl"] {
            --oe-page-bg-position: 76% center;
        }

        body.oe-bg-active {
            position: relative;
            isolation: isolate;
            background-color: var(--oe-bg, #f7fcf8);
            background-image: var(--oe-page-bg-overlay), var(--oe-page-bg-image);
            background-size: cover, cover;
            background-position: center center, var(--oe-page-bg-position);
            background-attachment: fixed, fixed;
        }

        body.oe-bg-active::after {
            content: '';
            position: fixed;
            inset: 0;
            z-index: 0;
            pointer-events: none;
            background-image: var(--oe-page-bg-image);
            background-size: cover;
            background-position: var(--oe-page-bg-position);
            background-attachment: fixed;
            opacity: 0.3;
            filter: saturate(1.06) contrast(1.03);
            -webkit-mask-image:
                radial-gradient(circle var(--oe-bg-focus-size) at var(--oe-bg-pointer-x) var(--oe-bg-pointer-y),
                    #000 0 48%,
                    rgba(0, 0, 0, 0.55) 61%,
                    transparent 78%);
            mask-image:
                radial-gradient(circle var(--oe-bg-focus-size) at var(--oe-bg-pointer-x) var(--oe-bg-pointer-y),
                    #000 0 48%,
                    rgba(0, 0, 0, 0.55) 61%,
                    transparent 78%);
            transition: opacity 0.18s ease;
        }

        body.oe-bg-active > :not(.oe-background-ripple):not(.oe-preference-dock--floating) {
            position: relative;
            z-index: 1;
        }

        body.oe-bg-active > .oe-preference-dock--floating {
            position: fixed;
            z-index: 2000;
        }

        .oe-background-ripple {
            position: fixed;
            left: var(--oe-bg-pointer-x);
            top: var(--oe-bg-pointer-y);
            z-index: 0;
            width: 260px;
            height: 260px;
            border-radius: 999px;
            pointer-events: none;
            opacity: 1;
            transform: translate(-50%, -50%);
            mix-blend-mode: soft-light;
            will-change: transform;
        }

        .oe-background-ripple__ring {
            position: absolute;
            inset: 0;
            border-radius: inherit;
            opacity: 0;
            transform: scale(0.34);
            background:
                radial-gradient(circle,
                    rgba(255, 255, 255, 0) 0 28%,
                    rgba(195, 238, 207, 0.34) 40%,
                    rgba(122, 198, 150, 0.20) 54%,
                    transparent 70%);
            box-shadow:
                inset 0 0 36px rgba(255, 255, 255, 0.22),
                0 0 34px rgba(151, 216, 174, 0.12);
            will-change: transform, opacity;
        }

        .oe-background-ripple__ring:nth-child(2) {
            inset: 14%;
            background:
                radial-gradient(circle,
                    rgba(255, 255, 255, 0) 0 26%,
                    rgba(224, 249, 231, 0.34) 43%,
                    rgba(117, 195, 148, 0.14) 60%,
                    transparent 74%);
        }

        .oe-background-ripple__ring:nth-child(3) {
            inset: 26%;
            background:
                radial-gradient(circle,
                    rgba(255, 255, 255, 0.16) 0 18%,
                    rgba(180, 229, 196, 0.24) 48%,
                    transparent 72%);
        }

        body:not(.oe-bg-active) .oe-background-ripple {
            display: none;
        }

        .oe-background-ripple.is-rippling .oe-background-ripple__ring {
            animation: oe-background-ripple 820ms ease-out;
        }

        .oe-background-ripple.is-rippling .oe-background-ripple__ring:nth-child(2) {
            animation-delay: 70ms;
            animation-duration: 900ms;
        }

        .oe-background-ripple.is-rippling .oe-background-ripple__ring:nth-child(3) {
            animation-delay: 130ms;
            animation-duration: 980ms;
        }

        @keyframes oe-background-ripple {
            0% {
                opacity: 0.72;
                transform: scale(0.38);
                box-shadow:
                    inset 0 0 26px rgba(255, 255, 255, 0.26),
                    0 0 0 0 rgba(154, 215, 176, 0.28);
            }

            55% {
                opacity: 0.42;
            }

            100% {
                opacity: 0;
                transform: scale(1.2);
                box-shadow:
                    inset 0 0 34px rgba(255, 255, 255, 0.08),
                    0 0 0 56px rgba(154, 215, 176, 0);
            }
        }

        body.oe-bg-active .navbar,
        body.oe-bg-active .group-panel,
        body.oe-bg-active .account-panel,
        body.oe-bg-active .content-area,
        body.oe-bg-active .email-list-panel,
        body.oe-bg-active .email-detail-panel,
        body.oe-bg-active .modal-content,
        body.oe-bg-active .auth-shell {
            background-color: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(14px);
        }

        body.oe-bg-active .main-container,
        body.oe-bg-active .content-area {
            background: transparent;
        }

        body.oe-bg-active .group-list,
        body.oe-bg-active .account-list,
        body.oe-bg-active .email-list,
        body.oe-bg-active #emailDetail {
            background-color: rgba(247, 252, 248, 0.58);
        }

        body.oe-bg-active .panel-header,
        body.oe-bg-active .account-panel-header,
        body.oe-bg-active .account-toolbar,
        body.oe-bg-active .email-list-header,
        body.oe-bg-active .email-detail-toolbar {
            background-color: rgba(238, 250, 241, 0.76);
            backdrop-filter: blur(12px);
        }

        body.oe-bg-active .account-item,
        body.oe-bg-active .email-item,
        body.oe-bg-active .empty-state,
        body.oe-bg-active .workspace-status-item {
            background-color: rgba(255, 255, 255, 0.86);
            backdrop-filter: blur(10px);
        }

        body.oe-bg-active .email-detail-body {
            background-color: rgba(255, 255, 255, 0.88);
            backdrop-filter: blur(10px);
        }

        body.oe-bg-active .auth-preview {
            background:
                linear-gradient(180deg, rgba(238, 250, 241, 0.84) 0%, rgba(255, 255, 255, 0.78) 100%),
                var(--oe-page-bg-image);
            background-size: cover;
            background-position: center center, var(--oe-page-bg-position);
        }

        .oe-preference-dock {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            min-height: 34px;
        }

        .oe-preference-dock--floating {
            position: fixed;
            top: 12px;
            right: 12px;
            z-index: 2000;
            padding: 8px;
            border: 1px solid rgba(217, 231, 221, 0.92);
            border-radius: 8px;
            background: rgba(255, 255, 255, 0.88);
            box-shadow: 0 12px 30px rgba(47, 125, 85, 0.14);
            backdrop-filter: blur(14px);
        }

        .oe-language-toggle {
            display: inline-grid;
            grid-template-columns: 1fr 1fr;
            gap: 2px;
            padding: 3px;
            border: 1px solid var(--oe-line, #d9e7dd);
            border-radius: 8px;
            background: rgba(238, 250, 241, 0.86);
        }

        .oe-language-toggle__btn {
            min-width: 34px;
            min-height: 26px;
            border: 0;
            border-radius: 6px;
            background: transparent;
            color: var(--oe-muted, #66756b);
            font-size: 12px;
            font-weight: 750;
            cursor: pointer;
        }

        .oe-language-toggle__btn.is-active {
            background: #fff;
            color: var(--oe-primary, #2f7d55);
            box-shadow: 0 6px 14px rgba(47, 125, 85, 0.12);
        }

        .oe-background-select {
            max-width: 156px;
            min-height: 34px;
            padding: 0 28px 0 10px;
            border: 1px solid var(--oe-line, #d9e7dd);
            border-radius: 8px;
            background: rgba(255, 255, 255, 0.92);
            color: var(--oe-text, #17211b);
            font-size: 12px;
            font-weight: 700;
            outline: none;
        }

        .oe-background-select:focus {
            border-color: var(--oe-primary-2, #38a169);
            box-shadow: 0 0 0 3px rgba(56, 161, 105, 0.14);
        }

        @media (max-width: 860px) {
            body {
                justify-content: flex-start !important;
            }

            body.oe-bg-active {
                background-attachment: scroll, scroll;
            }

            :root[data-oe-background="anime-desk-girl"] {
                --oe-page-bg-position: 18% center;
            }

            :root[data-oe-background="anime-greenhouse-girl"] {
                --oe-page-bg-position: 82% center;
            }

            .oe-preference-dock {
                width: 100%;
                justify-content: stretch;
            }

            .oe-preference-dock--floating {
                left: 12px;
                right: 12px;
                width: auto;
            }

            .oe-preference-dock--floating ~ .auth-shell {
                margin-top: 66px;
            }

            .oe-language-toggle,
            .oe-background-select {
                flex: 1 1 auto;
            }

            .oe-background-select {
                max-width: none;
            }
        }