.recharge-easter-modal {
            position: fixed;
            inset: 0;
            z-index: 2150;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 24px;
            background: rgba(15,23,42,.54);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
        }
        .recharge-easter-modal.hidden {
            display: none;
        }
        body.dark .recharge-easter-modal {
            background: rgba(2,6,23,.74);
        }
        .recharge-easter-dialog {
            width: min(560px, 100%);
            padding: 26px;
            border-radius: 30px;
            border: 1px solid rgba(148,163,184,.22);
            background:
                radial-gradient(circle at top right, rgba(var(--accent-rgb), .18), transparent 34%),
                linear-gradient(180deg, rgba(255,255,255,.97), rgba(248,250,252,.94));
            box-shadow:
                0 28px 70px rgba(15,23,42,.22),
                inset 0 1px 0 rgba(255,255,255,.76);
            color: var(--text-primary);
        }
        body.dark .recharge-easter-dialog {
            border-color: rgba(100,116,139,.34);
            background:
                radial-gradient(circle at top right, rgba(var(--accent-rgb), .20), transparent 36%),
                linear-gradient(180deg, rgba(30,41,59,.96), rgba(15,23,42,.94));
            box-shadow:
                0 32px 76px rgba(0,0,0,.42),
                inset 0 1px 0 rgba(255,255,255,.05);
        }
        .recharge-easter-header {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 16px;
            margin-bottom: 18px;
        }
        .recharge-easter-header h3 {
            margin: 0 0 6px;
            font-size: 1.18rem;
        }
        .recharge-easter-header p {
            margin: 0;
            color: var(--text-secondary);
            font-size: .88rem;
            line-height: 1.7;
        }
        .recharge-easter-body {
            display: flex;
            flex-direction: column;
            gap: 14px;
        }
        .recharge-easter-tip,
        .recharge-easter-status {
            padding: 12px 14px;
            border-radius: 18px;
            border: 1px solid rgba(148,163,184,.18);
            background: rgba(255,255,255,.56);
            box-shadow: inset 0 1px 0 rgba(255,255,255,.46);
            line-height: 1.7;
        }
        .recharge-easter-tip {
            color: var(--text-secondary);
            font-size: .86rem;
        }
        .recharge-easter-status {
            min-height: 56px;
            color: var(--accent);
            font-size: .9rem;
            font-weight: 700;
            transition: color .18s ease, border-color .18s ease, background .18s ease;
        }
        body.dark .recharge-easter-tip,
        body.dark .recharge-easter-status {
            background: rgba(30,41,59,.46);
            border-color: rgba(71,85,105,.34);
            box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
        }
        .recharge-easter-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 12px;
        }
        .recharge-option-btn {
            min-width: 0;
            display: flex;
            flex-direction: column;
            align-items: stretch;
            gap: 12px;
            padding: 16px 18px;
            min-height: 132px;
            border-radius: 20px;
            border: 1px solid rgba(148,163,184,.20);
            background: linear-gradient(180deg, rgba(255,255,255,.90), rgba(248,250,252,.92));
            color: var(--text-primary);
            cursor: pointer;
            text-align: left;
            box-shadow: 0 12px 24px rgba(15,23,42,.06);
            transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease, color .18s ease;
        }
        .recharge-option-btn:hover:not(:disabled) {
            transform: translateY(-2px);
            border-color: rgba(var(--accent-rgb), .28);
            box-shadow: 0 18px 30px rgba(var(--accent-rgb), .14);
            background: linear-gradient(180deg, rgba(var(--accent-rgb), .12), rgba(255,255,255,.96));
        }
        .recharge-option-btn.is-selected {
            border-color: rgba(var(--accent-rgb), .40);
            background: linear-gradient(180deg, rgba(var(--accent-rgb), .16), rgba(255,255,255,.98));
            box-shadow: 0 20px 34px rgba(var(--accent-rgb), .18), inset 0 0 0 1px rgba(var(--accent-rgb), .12);
        }
        .recharge-option-btn:disabled {
            cursor: not-allowed;
            opacity: .72;
            box-shadow: none;
        }
        .recharge-option-btn.recharge-option-btn-clear {
            border-style: dashed;
            background: linear-gradient(180deg, rgba(255,247,237,.94), rgba(255,255,255,.96));
        }
        .recharge-option-btn.recharge-option-btn-clear:hover:not(:disabled) {
            border-color: rgba(239,68,68,.28);
            box-shadow: 0 18px 30px rgba(239,68,68,.12);
            background: linear-gradient(180deg, rgba(254,226,226,.78), rgba(255,255,255,.98));
        }
        .recharge-option-btn.recharge-option-btn-clear.is-selected {
            border-color: rgba(239,68,68,.38);
            background: linear-gradient(180deg, rgba(254,226,226,.86), rgba(255,255,255,.98));
            box-shadow: 0 18px 30px rgba(239,68,68,.14), inset 0 0 0 1px rgba(239,68,68,.10);
        }
        .recharge-option-head {
            display: grid;
            grid-template-columns: auto minmax(0, 1fr);
            align-items: start;
            gap: 14px;
            min-width: 0;
        }
        .recharge-option-copy {
            min-width: 0;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: center;
            gap: 4px;
            padding-top: 2px;
        }
        .recharge-option-copy strong {
            min-width: 0;
            font-size: .98rem;
            line-height: 1.42;
            color: var(--text-primary);
            white-space: normal;
            word-break: break-word;
            writing-mode: horizontal-tb;
            text-orientation: mixed;
        }
        .recharge-option-copy > span {
            min-width: 0;
            font-size: .82rem;
            font-weight: 800;
            line-height: 1.35;
            color: var(--accent);
            white-space: normal;
            word-break: break-word;
            writing-mode: horizontal-tb;
            text-orientation: mixed;
        }
        .recharge-option-btn > small {
            display: block;
            width: 100%;
            min-width: 0;
            color: var(--text-secondary);
            font-size: .74rem;
            line-height: 1.6;
            min-height: 0;
        }
        body.dark .recharge-option-btn {
            background: linear-gradient(180deg, rgba(30,41,59,.92), rgba(15,23,42,.94));
            border-color: rgba(71,85,105,.34);
            box-shadow: 0 14px 28px rgba(0,0,0,.20);
        }
        body.dark .recharge-option-btn.recharge-option-btn-clear {
            background: linear-gradient(180deg, rgba(69,10,10,.54), rgba(15,23,42,.94));
            border-color: rgba(248,113,113,.24);
        }
        body.dark .recharge-option-btn:hover:not(:disabled),
        body.dark .recharge-option-btn.is-selected {
            background: linear-gradient(180deg, rgba(var(--accent-rgb), .18), rgba(15,23,42,.92));
        }
        body.dark .recharge-option-btn.recharge-option-btn-clear:hover:not(:disabled),
        body.dark .recharge-option-btn.recharge-option-btn-clear.is-selected {
            background: linear-gradient(180deg, rgba(127,29,29,.62), rgba(15,23,42,.92));
            border-color: rgba(248,113,113,.34);
        }
        @media (max-width: 640px) {
            .header-recharge-btn {
                width: 100%;
                justify-content: space-between;
            }
            .header-account-chip {
                padding-right: 12px;
            }
            .recharge-easter-modal {
                padding: 14px;
                align-items: flex-end;
            }
            .recharge-easter-dialog {
                width: 100%;
                padding: 22px 16px;
                border-radius: 24px;
            }
            .recharge-easter-header {
                flex-direction: column;
            }
            .recharge-easter-grid {
                grid-template-columns: 1fr;
            }
            .recharge-option-btn {
                min-height: 124px;
                padding: 14px 14px 16px;
                gap: 10px;
            }
            .recharge-option-head {
                gap: 12px;
            }
        }

        /* ===== 礼包头像框 v2 ===== */
        .member-avatar-wrap,
        .header-account-avatar,
        .recharge-option-avatar {
            --gift-avatar-size: 40px;
            --gift-frame-size: 40px;
            --gift-frame-border-offset: 0px;
            --gift-frame-flare-inset: 0px;
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: var(--gift-frame-size);
            height: var(--gift-frame-size);
            flex: 0 0 var(--gift-frame-size);
            border-radius: 50%;
            isolation: isolate;
            overflow: visible;
            vertical-align: middle;
        }

        .header-account-avatar {
            --gift-avatar-size: 30px;
            --gift-frame-size: 30px;
        }

        .recharge-option-avatar {
            --gift-avatar-size: 44px;
            --gift-frame-size: 44px;
        }

        .member-avatar-wrap .member-avatar,
        .header-account-avatar .header-account-icon,
        .recharge-option-avatar .recharge-option-avatar-icon {
            position: relative;
            z-index: 2;
            width: var(--gift-avatar-size);
            height: var(--gift-avatar-size);
            flex: 0 0 auto;
        }

        .member-avatar-wrap .member-avatar-image {
            position: relative;
            z-index: 2;
            width: var(--gift-avatar-size);
            height: var(--gift-avatar-size);
            flex: 0 0 auto;
            display: block;
            object-fit: cover;
            border-radius: 50%;
            background: linear-gradient(135deg, #dbeafe, #bfdbfe);
            box-shadow: 0 10px 20px rgba(37,99,235,.20);
        }

        .header-account-image {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 50%;
            background: linear-gradient(135deg, #dbeafe, #bfdbfe);
        }

        body.dark .member-avatar-wrap .member-avatar-image {
            box-shadow: 0 10px 22px rgba(37,99,235,.28);
        }

        .recharge-option-avatar .recharge-option-avatar-icon {
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, #60a5fa, #2563eb);
            color: #fff;
            font-size: 1rem;
            line-height: 1;
            box-shadow: 0 10px 20px rgba(37,99,235,.18);
        }
        .recharge-option-avatar-clear .recharge-option-avatar-icon {
            background: linear-gradient(135deg, #fda4af, #ef4444);
            box-shadow: 0 10px 20px rgba(239,68,68,.18);
        }

        body.dark .recharge-option-avatar .recharge-option-avatar-icon {
            box-shadow: 0 10px 22px rgba(37,99,235,.28);
        }
        body.dark .recharge-option-avatar-clear .recharge-option-avatar-icon {
            box-shadow: 0 10px 22px rgba(239,68,68,.28);
        }

        .gift-avatar-frame {
            position: absolute;
            inset: var(--gift-frame-border-offset, 0px);
            border-radius: 50%;
            pointer-events: none;
            opacity: 0;
            transform: scale(.96);
            transition: opacity .22s ease, transform .22s ease;
            z-index: 0;
        }

        .member-avatar-wrap[class*="gift-frame-"],
        .header-account-chip[data-gift-package]:not([data-gift-package=""]) .header-account-avatar,
        .recharge-option-btn[data-gift-package]:not([data-gift-package=""]) .recharge-option-avatar {
            --gift-frame-border-offset: -3px;
            --gift-frame-flare-inset: -1px;
        }

        .header-account-chip[data-gift-package]:not([data-gift-package=""]) .header-account-avatar {
            --gift-frame-border-offset: -2px;
            --gift-frame-flare-inset: -1px;
        }

        .member-avatar-wrap[class*="gift-frame-"] .gift-avatar-frame,
        .header-account-chip[data-gift-package]:not([data-gift-package=""]) .header-account-avatar .gift-avatar-frame,
        .recharge-option-btn[data-gift-package]:not([data-gift-package=""]) .recharge-option-avatar .gift-avatar-frame {
            opacity: 1;
            transform: scale(1);
            background: var(--gift-frame-border-bg, linear-gradient(135deg, #fcd34d, #f59e0b));
            box-shadow: 0 14px 30px var(--gift-frame-core-shadow, rgba(var(--accent-rgb), .18));
            animation: var(--gift-frame-border-animation, none);
        }

        .member-avatar-wrap[class*="gift-frame-"]::before,
        .member-avatar-wrap[class*="gift-frame-"]::after,
        .header-account-chip[data-gift-package]:not([data-gift-package=""]) .header-account-avatar::before,
        .header-account-chip[data-gift-package]:not([data-gift-package=""]) .header-account-avatar::after,
        .recharge-option-btn[data-gift-package]:not([data-gift-package=""]) .recharge-option-avatar::before,
        .recharge-option-btn[data-gift-package]:not([data-gift-package=""]) .recharge-option-avatar::after {
            content: "";
            position: absolute;
            border-radius: 50%;
            pointer-events: none;
        }

        .member-avatar-wrap[class*="gift-frame-"]::before,
        .header-account-chip[data-gift-package]:not([data-gift-package=""]) .header-account-avatar::before,
        .recharge-option-btn[data-gift-package]:not([data-gift-package=""]) .recharge-option-avatar::before {
            inset: calc(var(--gift-frame-border-offset, 0px) - 6px);
            z-index: -2;
            background: var(--gift-frame-halo-bg, radial-gradient(circle, rgba(var(--accent-rgb), .32), transparent 68%));
            filter: blur(10px);
            opacity: .78;
            animation: var(--gift-frame-halo-animation, none);
        }

        .member-avatar-wrap[class*="gift-frame-"]::after,
        .header-account-chip[data-gift-package]:not([data-gift-package=""]) .header-account-avatar::after,
        .recharge-option-btn[data-gift-package]:not([data-gift-package=""]) .recharge-option-avatar::after {
            inset: var(--gift-frame-flare-inset, 0px);
            z-index: 1;
            background: linear-gradient(120deg, transparent 16%, rgba(255,255,255,.08) 28%, rgba(255,255,255,.74) 46%, rgba(255,255,255,.16) 58%, transparent 74%);
            background-size: 220% 100%;
            opacity: var(--gift-frame-flare-opacity, .52);
            animation: var(--gift-frame-flare-animation, none);
        }

        .member-avatar-wrap[class*="gift-frame-"] .member-avatar,
        .member-avatar-wrap[class*="gift-frame-"] .member-avatar-image,
        .header-account-chip[data-gift-package]:not([data-gift-package=""]) .header-account-avatar .header-account-icon,
        .recharge-option-btn[data-gift-package]:not([data-gift-package=""]) .recharge-option-avatar .recharge-option-avatar-icon {
            box-shadow: 0 8px 16px rgba(37,99,235,.16);
        }

        body.dark .member-avatar-wrap[class*="gift-frame-"] .member-avatar,
        body.dark .member-avatar-wrap[class*="gift-frame-"] .member-avatar-image,
        body.dark .header-account-chip[data-gift-package]:not([data-gift-package=""]) .header-account-avatar .header-account-icon,
        body.dark .recharge-option-btn[data-gift-package]:not([data-gift-package=""]) .recharge-option-avatar .recharge-option-avatar-icon {
            box-shadow: 0 10px 18px rgba(15,23,42,.28);
        }

        .header-account-chip {
            gap: 9px;
        }

        .header-account-chip[data-gift-package]:not([data-gift-package=""]) .header-account-icon {
            box-shadow: 0 10px 20px rgba(37,99,235,.18);
        }

        .header-account-chip[data-gift-package]:not([data-gift-package=""]) .header-account-icon::before,
        .header-account-chip[data-gift-package]:not([data-gift-package=""]) .header-account-icon::after {
            content: none;
        }

        body.dark .header-account-chip[data-gift-package]:not([data-gift-package=""]) .header-account-icon {
            box-shadow: 0 10px 22px rgba(37,99,235,.28);
        }

        :is(
            .member-avatar-wrap.gift-frame-beggar,
            .header-account-chip[data-gift-package="beggar"] .header-account-avatar,
            .recharge-option-btn[data-gift-package="beggar"]
        ) {
            --gift-frame-border-bg: linear-gradient(135deg, #4ade80, #16a34a 55%, #14532d);
            --gift-frame-halo-bg: radial-gradient(circle, rgba(34,197,94,.34), transparent 68%);
            --gift-frame-core-shadow: rgba(34,197,94,.20);
            --gift-frame-border-animation: gift-frame-breathe 2.9s ease-in-out infinite;
            --gift-frame-flare-animation: gift-frame-sheen 4.8s ease-in-out infinite;
            --gift-frame-flare-opacity: .30;
        }

        :is(
            .member-avatar-wrap.gift-frame-sponsor,
            .header-account-chip[data-gift-package="sponsor"] .header-account-avatar,
            .recharge-option-btn[data-gift-package="sponsor"]
        ) {
            --gift-frame-border-bg: linear-gradient(135deg, #fde68a, #f59e0b 52%, #b45309);
            --gift-frame-halo-bg: radial-gradient(circle, rgba(251,191,36,.42), transparent 68%);
            --gift-frame-core-shadow: rgba(245,158,11,.22);
            --gift-frame-border-animation: gift-frame-breathe 2.4s ease-in-out infinite;
            --gift-frame-flare-animation: gift-frame-sheen 3.2s linear infinite;
            --gift-frame-flare-opacity: .54;
        }

        :is(
            .member-avatar-wrap.gift-frame-tycoon,
            .header-account-chip[data-gift-package="tycoon"] .header-account-avatar,
            .recharge-option-btn[data-gift-package="tycoon"]
        ) {
            --gift-frame-border-bg: conic-gradient(from 0deg, #f97316, #facc15, #22c55e, #38bdf8, #8b5cf6, #ec4899, #f97316);
            --gift-frame-halo-bg: radial-gradient(circle, rgba(168,85,247,.32), transparent 60%);
            --gift-frame-core-shadow: rgba(168,85,247,.28);
            --gift-frame-border-animation: gift-rainbow-spin 2.4s linear infinite;
            --gift-frame-halo-animation: gift-glow-pulse 1.6s ease-in-out infinite;
            --gift-frame-flare-animation: gift-frame-sheen 2.4s linear infinite;
            --gift-frame-flare-opacity: .66;
        }

        :is(
            .member-avatar-wrap.gift-frame-lulu-supporter,
            .header-account-chip[data-gift-package="lulu-supporter"] .header-account-avatar,
            .recharge-option-btn[data-gift-package="lulu-supporter"]
        ) {
            --gift-frame-border-bg: linear-gradient(135deg, #f9a8d4, #ec4899, #fb7185);
            --gift-frame-halo-bg: radial-gradient(circle at 36% 34%, rgba(244,114,182,.42), transparent 58%), radial-gradient(circle at 72% 74%, rgba(251,113,133,.26), transparent 60%);
            --gift-frame-core-shadow: rgba(236,72,153,.24);
            --gift-frame-border-animation: supporter-glimmer 3s linear infinite;
            --gift-frame-halo-animation: gift-glow-pulse 2s ease-in-out infinite;
            --gift-frame-flare-animation: gift-frame-sheen 3.1s linear infinite;
            --gift-frame-flare-opacity: .58;
        }

        :is(
            .member-avatar-wrap.gift-frame-duomo-supporter,
            .header-account-chip[data-gift-package="duomo-supporter"] .header-account-avatar,
            .recharge-option-btn[data-gift-package="duomo-supporter"]
        ) {
            --gift-frame-border-bg: linear-gradient(135deg, #f5b8ff, #f472b6, #a855f7);
            --gift-frame-halo-bg: radial-gradient(circle at 34% 28%, rgba(236,72,153,.34), transparent 58%), radial-gradient(circle at 72% 74%, rgba(168,85,247,.30), transparent 56%);
            --gift-frame-core-shadow: rgba(217,70,239,.22);
            --gift-frame-border-animation: supporter-glimmer 3.1s linear infinite;
            --gift-frame-halo-animation: gift-glow-pulse 2.1s ease-in-out infinite;
            --gift-frame-flare-animation: gift-frame-sheen 3.2s linear infinite;
            --gift-frame-flare-opacity: .60;
        }

        @keyframes gift-frame-sheen {
            0% { background-position: 200% 50%; opacity: calc(var(--gift-frame-flare-opacity, .52) * .78); }
            50% { background-position: 0% 50%; opacity: var(--gift-frame-flare-opacity, .52); }
            100% { background-position: -200% 50%; opacity: calc(var(--gift-frame-flare-opacity, .52) * .78); }
        }

        @media (max-width: 640px) {
            .member-avatar-wrap {
                --gift-avatar-size: 34px;
                --gift-frame-size: 34px;
            }

            .member-avatar-wrap[class*="gift-frame-"] {
                --gift-frame-border-offset: -2px;
            }

            .header-account-avatar {
                --gift-avatar-size: 28px;
                --gift-frame-size: 28px;
            }

            .recharge-option-avatar {
                --gift-avatar-size: 40px;
                --gift-frame-size: 40px;
            }

            .header-account-chip[data-gift-package]:not([data-gift-package=""]) .header-account-avatar {
                --gift-frame-border-offset: -2px;
            }
        }

        .avatar-upload-dialog {
            width: min(520px, 100%);
        }

        .avatar-upload-body {
            display: flex;
            flex-direction: column;
            gap: 16px;
        }

        .avatar-upload-preview-card {
            display: flex;
            align-items: center;
            gap: 16px;
            padding: 16px 18px;
            border-radius: 22px;
            border: 1px solid rgba(148,163,184,.18);
            background: linear-gradient(180deg, rgba(255,255,255,.84), rgba(248,250,252,.92));
            box-shadow: inset 0 1px 0 rgba(255,255,255,.58);
        }

        body.dark .avatar-upload-preview-card {
            background: linear-gradient(180deg, rgba(30,41,59,.52), rgba(15,23,42,.66));
            border-color: rgba(71,85,105,.34);
            box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
        }

        .avatar-upload-preview-shell {
            width: 88px;
            height: 88px;
            flex: 0 0 88px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            overflow: hidden;
            background: linear-gradient(135deg, #60a5fa, #2563eb);
            color: #fff;
            font-size: 1.9rem;
            font-weight: 800;
            box-shadow: 0 16px 28px rgba(37,99,235,.18);
        }

        .avatar-upload-preview-shell img {
            width: 100%;
            height: 100%;
            display: block;
            object-fit: cover;
            border-radius: 50%;
        }

        .avatar-upload-preview-copy {
            min-width: 0;
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        .avatar-upload-preview-copy strong {
            font-size: 1rem;
            line-height: 1.3;
            color: var(--text-primary);
        }

        .avatar-upload-preview-copy span {
            color: var(--text-secondary);
            line-height: 1.6;
            font-size: .84rem;
            word-break: break-word;
        }

        .avatar-upload-actions {
            display: flex;
            gap: 12px;
            flex-wrap: wrap;
        }

        .avatar-upload-actions .btn {
            flex: 1 1 180px;
        }

        .avatar-upload-status {
            min-height: 52px;
        }

        @media (max-width: 640px) {
            .avatar-upload-preview-card {
                flex-direction: column;
                align-items: flex-start;
            }

            .avatar-upload-preview-shell {
                width: 80px;
                height: 80px;
                flex-basis: 80px;
            }

            .avatar-upload-actions .btn {
                flex: 1 1 100%;
            }
        }