/* === 充值弹窗 — 匹配网站暗色主题 + 青色主色 === */
.chat-recharge-overlay {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
}
.chat-recharge-overlay.active {
    display: flex;
}

.chat-recharge-modal {
    background: rgba(9, 9, 11, 0.95);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(0, 216, 255, 0.15);
    border-radius: 16px;
    width: 480px;
    max-width: 90vw;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 0 40px rgba(0, 216, 255, 0.08), 0 20px 60px rgba(0, 0, 0, 0.6);
    display: flex;
    flex-direction: column;
    color: #e5e7eb;
    animation: rechargeModalIn 0.25s ease;
}
@keyframes rechargeModalIn {
    from { opacity: 0; transform: scale(0.95) translateY(10px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.chat-recharge-header {
    padding: 24px 24px 12px;
    position: relative;
}
.chat-recharge-header h3 {
    margin: 0 0 4px;
    font-size: 18px;
    font-weight: 600;
    color: #fff;
}
.chat-recharge-header p {
    margin: 0;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.4);
}
.chat-recharge-close {
    position: absolute;
    top: 20px; right: 20px;
    background: none; border: none;
    color: rgba(255, 255, 255, 0.3);
    font-size: 22px;
    cursor: pointer;
    line-height: 1;
    transition: color 0.2s;
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 6px;
}
.chat-recharge-close:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
}

.chat-recharge-tabs {
    display: flex;
    gap: 24px;
    padding: 0 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    margin-bottom: 20px;
}
.chat-recharge-tab {
    padding: 10px 0;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.35);
    cursor: pointer;
    position: relative;
    transition: color 0.2s;
}
.chat-recharge-tab.active {
    color: #00D8FF;
    font-weight: 500;
}
.chat-recharge-tab.active::after {
    content: '';
    position: absolute;
    bottom: -1px; left: 0; width: 100%; height: 2px;
    background: #00D8FF;
    box-shadow: 0 0 8px rgba(0, 216, 255, 0.5);
}

.chat-recharge-body {
    padding: 0 24px 20px;
}

/* 返利活动 banner */
.chat-recharge-banner {
    background: rgba(0, 216, 255, 0.06);
    border: 1px solid rgba(0, 216, 255, 0.15);
    border-radius: 10px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}
.banner-icon {
    background: #00D8FF;
    color: #000;
    width: 24px; height: 24px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
}
.banner-title {
    color: #00D8FF;
    font-size: 14px; font-weight: 500;
}
.banner-desc {
    color: rgba(0, 216, 255, 0.6); font-size: 12px; margin-top: 2px;
}

.chat-recharge-label {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 12px;
}

/* 充值档次网格 */
.chat-recharge-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 24px;
}
.recharge-plan-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    padding: 14px 8px;
    text-align: center;
    cursor: pointer;
    position: relative;
    transition: all 0.2s;
}
.recharge-plan-card:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
}
.recharge-plan-card.active {
    border-color: #00D8FF;
    background: rgba(0, 216, 255, 0.08);
    box-shadow: 0 0 12px rgba(0, 216, 255, 0.15);
}
.plan-icon {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.25);
    position: absolute;
    top: 8px; left: 8px;
}
.recharge-plan-card.active .plan-icon { color: #00D8FF; }
.plan-price {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    margin: 8px 0 4px;
}
.plan-price small { font-size: 13px; font-weight: 400; }
.plan-desc { font-size: 11px; color: rgba(255, 255, 255, 0.35); }
.recharge-plan-card.active .plan-desc { color: rgba(0, 216, 255, 0.7); }

/* 返利标签 */
.plan-badge {
    position: absolute; top: -8px; left: 50%; transform: translateX(-50%);
    background: linear-gradient(135deg, #FF6B6B 0%, #FF8E53 100%);
    color: #fff; font-size: 10px; padding: 2px 8px;
    border-radius: 4px; white-space: nowrap; font-weight: 600;
    box-shadow: 0 2px 8px rgba(255, 107, 107, 0.4);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* 支付方式 */
.chat-recharge-methods {
    display: flex; gap: 12px; margin-bottom: 20px;
}
.method-label {
    flex: 1;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    cursor: pointer;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
    transition: all 0.2s;
}
.method-label:hover {
    background: rgba(255, 255, 255, 0.06);
}
.method-label input { display: none; }
.method-label:has(input:checked) {
    border-color: #00D8FF;
    background: rgba(0, 216, 255, 0.08);
    color: #fff;
}
.method-icon { width: 20px; height: 20px; }

/* 底部按钮 */
.chat-recharge-footer {
    display: flex; gap: 12px;
    padding: 16px 24px;
    background: rgba(0, 0, 0, 0.3);
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}
.btn-recharge-cancel, .btn-recharge-confirm {
    flex: 1; padding: 12px; border-radius: 10px; font-size: 14px; cursor: pointer; border: none; font-weight: 500;
    transition: all 0.2s;
}
.btn-recharge-cancel {
    background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.6);
}
.btn-recharge-cancel:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}
.btn-recharge-confirm {
    background: #00D8FF; color: #000; font-weight: 600;
}
.btn-recharge-confirm:hover {
    background: #33E1FF;
    box-shadow: 0 0 16px rgba(0, 216, 255, 0.4);
}
.btn-recharge-confirm:disabled {
    opacity: 0.4; cursor: not-allowed; box-shadow: none;
}

/* 响应式 */
@media (max-width: 480px) {
    .chat-recharge-grid { grid-template-columns: repeat(3, 1fr); }
    .chat-recharge-methods { flex-direction: column; }
}

/* === 在线充值关闭时的公告卡片 === */
.recharge-closed-notice {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px 24px;
    background: linear-gradient(135deg, rgba(255, 214, 110, 0.06) 0%, rgba(0, 216, 255, 0.04) 100%);
    border: 1px solid rgba(255, 214, 110, 0.15);
    border-radius: 14px;
    min-height: 200px;
}
.recharge-closed-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(255, 214, 110, 0.1);
    border: 1px solid rgba(255, 214, 110, 0.25);
    color: #FFD66E;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}
.recharge-closed-title {
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 8px;
}
.recharge-closed-desc {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.6;
    margin-bottom: 20px;
    max-width: 320px;
    white-space: pre-wrap;
    word-break: break-word;
}
.recharge-closed-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #00D8FF 0%, #667eea 100%);
    color: #000;
    border: none;
    padding: 10px 24px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 4px 12px rgba(0, 216, 255, 0.25);
}
.recharge-closed-action:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0, 216, 255, 0.35);
}
.recharge-closed-action:active {
    transform: translateY(0);
}

/* === 卡密兑换面板 === */
.card-redeem-hero {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    background: linear-gradient(135deg, rgba(0, 216, 255, 0.08) 0%, rgba(102, 126, 234, 0.05) 100%);
    border: 1px solid rgba(0, 216, 255, 0.15);
    border-radius: 12px;
    margin-bottom: 22px;
}
.card-redeem-hero-icon {
    width: 44px; height: 44px;
    border-radius: 10px;
    background: linear-gradient(135deg, #00D8FF 0%, #667eea 100%);
    color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(0, 216, 255, 0.25);
}
.card-redeem-hero-title {
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 2px;
}
.card-redeem-hero-desc {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.4;
}

.card-redeem-field {
    margin-bottom: 16px;
}
.card-redeem-label {
    display: block;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 8px;
    font-weight: 500;
}
.card-redeem-input {
    width: 100%;
    box-sizing: border-box;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: #fff;
    font-size: 15px;
    font-family: 'SF Mono', 'Consolas', 'Monaco', monospace;
    letter-spacing: 1px;
    transition: all 0.2s;
    outline: none;
}
.card-redeem-input::placeholder {
    color: rgba(255, 255, 255, 0.2);
    letter-spacing: 1px;
}
.card-redeem-input:focus {
    border-color: #00D8FF;
    background: rgba(0, 216, 255, 0.04);
    box-shadow: 0 0 0 3px rgba(0, 216, 255, 0.1);
}
.card-redeem-hint {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.35);
    margin-top: 8px;
    line-height: 1.5;
}

/* 兑换结果 */
.card-redeem-result {
    padding: 16px;
    border-radius: 10px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 8px;
    animation: cardRedeemResultIn 0.3s ease;
}
@keyframes cardRedeemResultIn {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}
.card-redeem-result.success {
    background: rgba(16, 185, 129, 0.08);
    border: 1px solid rgba(16, 185, 129, 0.25);
}
.card-redeem-result.error {
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.25);
}
.card-redeem-success-icon {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: #10b981;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    flex-shrink: 0;
}
.card-redeem-error-icon {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: #ef4444;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    flex-shrink: 0;
}
.card-redeem-success-text { flex: 1; }
.card-redeem-success-title {
    font-size: 14px;
    font-weight: 600;
    color: #10b981;
    margin-bottom: 4px;
}
.card-redeem-success-detail {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 2px;
}
.card-redeem-success-balance {
    font-size: 13px;
    color: #00D8FF;
    font-weight: 600;
}
.card-redeem-error-text {
    flex: 1;
    font-size: 13px;
    color: #ef4444;
    line-height: 1.5;
    padding-top: 4px;
}

/* ============================================================================
   浅色模式覆盖 (body.theme-light)
   ============================================================================ */

body.theme-light .chat-recharge-overlay {
    background: rgba(0, 0, 0, 0.25);
}

body.theme-light .chat-recharge-modal {
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.15);
    color: #1a1a2e;
}

body.theme-light .chat-recharge-header h3 { color: #1a1a2e; }
body.theme-light .chat-recharge-header p { color: rgba(0, 0, 0, 0.45); }

body.theme-light .chat-recharge-close { color: rgba(0, 0, 0, 0.4); }
body.theme-light .chat-recharge-close:hover {
    color: #1a1a2e;
    background: rgba(0, 0, 0, 0.06);
}

body.theme-light .chat-recharge-tabs { border-bottom: 1px solid rgba(0, 0, 0, 0.06); }
body.theme-light .chat-recharge-tab { color: rgba(0, 0, 0, 0.4); }
body.theme-light .chat-recharge-tab.active { color: #6366f1; }
body.theme-light .chat-recharge-tab.active::after {
    background: #6366f1;
    box-shadow: 0 0 8px rgba(99, 102, 241, 0.4);
}

body.theme-light .chat-recharge-banner {
    background: rgba(99, 102, 241, 0.06);
    border: 1px solid rgba(99, 102, 241, 0.15);
}
body.theme-light .banner-icon { background: #6366f1; color: #fff; }
body.theme-light .banner-title { color: #6366f1; }
body.theme-light .banner-desc { color: rgba(99, 102, 241, 0.6); }

body.theme-light .chat-recharge-label { color: rgba(0, 0, 0, 0.5); }

body.theme-light .recharge-plan-card {
    background: rgba(0, 0, 0, 0.02);
    border: 1px solid rgba(0, 0, 0, 0.08);
}
body.theme-light .recharge-plan-card:hover {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.12);
}
body.theme-light .recharge-plan-card.active {
    border-color: #6366f1;
    background: rgba(99, 102, 241, 0.06);
    box-shadow: 0 0 12px rgba(99, 102, 241, 0.12);
}
body.theme-light .plan-icon { color: rgba(0, 0, 0, 0.2); }
body.theme-light .recharge-plan-card.active .plan-icon { color: #6366f1; }
body.theme-light .plan-price { color: #1a1a2e; }
body.theme-light .plan-desc { color: rgba(0, 0, 0, 0.4); }
body.theme-light .recharge-plan-card.active .plan-desc { color: rgba(99, 102, 241, 0.7); }

body.theme-light .method-label {
    background: rgba(0, 0, 0, 0.02);
    border: 1px solid rgba(0, 0, 0, 0.08);
    color: rgba(0, 0, 0, 0.6);
}
body.theme-light .method-label:hover { background: rgba(0, 0, 0, 0.04); }
body.theme-light .method-label:has(input:checked) {
    border-color: #6366f1;
    background: rgba(99, 102, 241, 0.06);
    color: #1a1a2e;
}

body.theme-light .chat-recharge-footer {
    background: rgba(0, 0, 0, 0.02);
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}
body.theme-light .btn-recharge-cancel {
    background: rgba(0, 0, 0, 0.04);
    color: rgba(0, 0, 0, 0.6);
}
body.theme-light .btn-recharge-cancel:hover {
    background: rgba(0, 0, 0, 0.08);
    color: #1a1a2e;
}
body.theme-light .btn-recharge-confirm {
    background: #6366f1;
    color: #fff;
}
body.theme-light .btn-recharge-confirm:hover {
    background: #4f46e5;
    box-shadow: 0 0 16px rgba(99, 102, 241, 0.35);
}

body.theme-light .recharge-closed-notice {
    background: linear-gradient(135deg, rgba(255, 214, 110, 0.06) 0%, rgba(99, 102, 241, 0.04) 100%);
    border: 1px solid rgba(0, 0, 0, 0.08);
}
body.theme-light .recharge-closed-title { color: #1a1a2e; }
body.theme-light .recharge-closed-desc { color: rgba(0, 0, 0, 0.5); }
body.theme-light .recharge-closed-action {
    background: linear-gradient(135deg, #6366f1 0%, #818cf8 100%);
    color: #fff;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.25);
}

body.theme-light .card-redeem-hero {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.08) 0%, rgba(99, 102, 241, 0.05) 100%);
    border: 1px solid rgba(99, 102, 241, 0.15);
}
body.theme-light .card-redeem-hero-icon {
    background: linear-gradient(135deg, #6366f1 0%, #818cf8 100%);
    color: #fff;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.25);
}
body.theme-light .card-redeem-hero-title { color: #1a1a2e; }
body.theme-light .card-redeem-hero-desc { color: rgba(0, 0, 0, 0.45); }

body.theme-light .card-redeem-label { color: rgba(0, 0, 0, 0.6); }
body.theme-light .card-redeem-input {
    background: rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: #1a1a2e;
}
body.theme-light .card-redeem-input::placeholder { color: rgba(0, 0, 0, 0.25); }
body.theme-light .card-redeem-input:focus {
    border-color: #6366f1;
    background: rgba(99, 102, 241, 0.04);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}
body.theme-light .card-redeem-hint { color: rgba(0, 0, 0, 0.4); }

body.theme-light .card-redeem-success-detail { color: rgba(0, 0, 0, 0.6); }
body.theme-light .card-redeem-success-balance { color: #6366f1; }
.card-redeem-store-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 20px 12px;
    padding: 11px 14px;
    border: 1px solid rgba(99, 102, 241, 0.35);
    border-radius: 10px;
    background: rgba(99, 102, 241, 0.12);
    color: #c7d2fe;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

.card-redeem-store-link:hover {
    background: rgba(99, 102, 241, 0.2);
    border-color: rgba(129, 140, 248, 0.65);
}

/* Card-store redemption is the only customer-facing recharge flow. */
.chat-recharge-modal {
    width: 440px;
    border-radius: 20px;
}

.chat-recharge-tabs,
#rechargePanelOnline {
    display: none !important;
}

#rechargePanelCard {
    display: block !important;
    padding: 0 24px 24px;
}

.card-redeem-hero {
    margin: 8px 0 16px;
    padding: 16px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(0, 216, 255, 0.1), rgba(99, 102, 241, 0.08));
    border: 1px solid rgba(0, 216, 255, 0.2);
}

.card-redeem-store-link {
    margin: 0 0 22px;
    padding: 0 2px 12px;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0;
    background: transparent;
    color: #7dd3fc;
    font-size: 12px;
    font-weight: 500;
}

.card-redeem-store-link:hover {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.14);
    color: #bae6fd;
}

.card-redeem-input {
    height: 48px;
    border-radius: 11px;
}

.chat-recharge-footer {
    padding: 16px 24px 20px;
    background: transparent;
}

.btn-recharge-confirm {
    background: linear-gradient(135deg, #22d3ee, #38bdf8);
}

body.theme-light .card-redeem-hero {
    background: linear-gradient(135deg, #f0f9ff, #f5f3ff);
    border-color: rgba(99, 102, 241, 0.16);
}

body.theme-light .card-redeem-store-link {
    border-color: rgba(15, 23, 42, 0.1);
    color: #4f46e5;
}

body.theme-light .card-redeem-store-link:hover {
    border-color: rgba(15, 23, 42, 0.16);
    color: #3730a3;
}

body.theme-light .chat-recharge-footer {
    background: transparent;
}

/* ============================================================================
   Fanxing recharge experience — dark blue / light purple, semantic accents
   ============================================================================ */
.chat-recharge-overlay {
    background: rgba(2, 7, 18, .78);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}
.chat-recharge-modal {
    position: relative;
    width: 520px;
    overflow: hidden;
    border: 1px solid rgba(64, 160, 255, .32);
    border-radius: 24px;
    background: linear-gradient(145deg, rgba(8, 25, 49, .99), rgba(6, 13, 29, .995) 58%, rgba(15, 18, 42, .99));
    box-shadow: 0 32px 100px rgba(0, 0, 0, .68), 0 0 64px rgba(35, 134, 255, .15);
    animation: rechargeModalIn .42s cubic-bezier(.2, .86, .28, 1), rechargeBorderBreath 4.8s ease-in-out infinite;
}
.chat-recharge-modal::before {
    content: '';
    position: absolute;
    z-index: 0;
    top: -120px;
    left: -100px;
    width: 300px;
    height: 230px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(31, 142, 255, .19), transparent 68%);
    pointer-events: none;
}
.chat-recharge-modal > * { position: relative; z-index: 1; }
@keyframes rechargeBorderBreath {
    0%, 100% { border-color: rgba(64, 160, 255, .28); box-shadow: 0 32px 100px rgba(0,0,0,.68), 0 0 52px rgba(35,134,255,.11); }
    50% { border-color: rgba(78, 174, 255, .45); box-shadow: 0 32px 100px rgba(0,0,0,.68), 0 0 72px rgba(35,134,255,.19); }
}
.chat-recharge-header {
    display: flex;
    align-items: center;
    padding: 24px 26px 20px;
    border-bottom: 1px solid rgba(112, 177, 255, .13);
    background: linear-gradient(90deg, rgba(30, 116, 240, .15), rgba(36, 82, 169, .04) 64%, transparent);
}
.chat-recharge-heading { display: flex; align-items: center; gap: 13px; }
.chat-recharge-title-icon {
    position: relative;
    display: grid;
    width: 45px;
    height: 45px;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid rgba(74, 183, 255, .74);
    border-radius: 14px;
    color: #76ccff;
    background: linear-gradient(145deg, rgba(33, 147, 255, .22), rgba(70, 82, 218, .12));
    box-shadow: 0 0 24px rgba(40, 151, 255, .2), inset 0 0 16px rgba(92, 194, 255, .08);
    animation: rechargeIconFloat 3s ease-in-out infinite;
}
.chat-recharge-title-icon::after {
    content: '';
    position: absolute;
    inset: -4px;
    border: 1px solid rgba(84, 182, 255, .22);
    border-radius: 17px;
    animation: rechargeIconPulse 2.2s ease-out infinite;
}
@keyframes rechargeIconFloat { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-3px) rotate(1deg); } }
@keyframes rechargeIconPulse { 0% { transform: scale(.92); opacity: .75; } 78%, 100% { transform: scale(1.18); opacity: 0; } }
.chat-recharge-eyebrow {
    margin-bottom: 3px;
    color: #68bcff;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .18em;
}
.chat-recharge-header h3 { margin: 0 0 3px; color: #f1f7ff; font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.chat-recharge-header p { color: rgba(196, 218, 248, .58); font-size: 12px; }
.chat-recharge-close {
    top: 20px;
    right: 20px;
    width: 32px;
    height: 32px;
    border: 1px solid rgba(147, 190, 244, .13);
    border-radius: 10px;
    color: rgba(208, 228, 253, .58);
    background: rgba(255, 255, 255, .025);
}
.chat-recharge-close:hover { color: #fff; border-color: rgba(111, 183, 255, .3); background: rgba(65, 147, 235, .12); transform: rotate(6deg); }
#rechargePanelCard { padding: 22px 26px 12px; }
.card-redeem-hero {
    position: relative;
    gap: 15px;
    margin: 0 0 14px;
    padding: 17px;
    overflow: hidden;
    border: 1px solid rgba(69, 167, 255, .25);
    border-radius: 16px;
    background: linear-gradient(120deg, rgba(20, 98, 178, .2), rgba(48, 54, 133, .12));
}
.card-redeem-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 18%, rgba(130, 213, 255, .08) 42%, transparent 64%);
    transform: translateX(-115%);
    animation: rechargeCardSheen 4.5s ease-in-out infinite;
    pointer-events: none;
}
@keyframes rechargeCardSheen { 0%, 60% { transform: translateX(-115%); } 90%, 100% { transform: translateX(115%); } }
.card-redeem-hero-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    color: #071627;
    background: linear-gradient(145deg, #70ddff, #5c8cff);
    box-shadow: 0 8px 24px rgba(50, 157, 255, .32);
}
.card-redeem-hero-title { color: #edf7ff; font-size: 15px; font-weight: 800; }
.card-redeem-hero-desc { margin-top: 3px; color: rgba(197, 219, 249, .58); }
.card-redeem-trust-row { display: flex; gap: 13px; margin-top: 9px; }
.card-redeem-trust-row span { display: inline-flex; align-items: center; gap: 5px; color: rgba(201, 226, 255, .66); font-size: 10px; }
.card-redeem-trust-row i { width: 5px; height: 5px; border-radius: 50%; background: #37daa4; box-shadow: 0 0 8px rgba(55, 218, 164, .65); }
.card-redeem-trust-row span:last-child i { background: #ffd04a; box-shadow: 0 0 8px rgba(255, 208, 74, .62); }
.card-redeem-store-link {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 20px;
    padding: 12px 13px;
    border: 1px solid rgba(255, 190, 48, .22);
    border-radius: 13px;
    background: linear-gradient(100deg, rgba(137, 84, 14, .13), rgba(72, 49, 22, .05));
    color: #ffe299;
}
.card-redeem-store-link:hover { border-color: rgba(255, 197, 56, .4); background: rgba(160, 100, 17, .16); color: #ffeca9; transform: translateY(-1px); }
.card-redeem-store-icon { display: grid; width: 30px; height: 30px; flex: 0 0 auto; place-items: center; border-radius: 9px; color: #ffd04a; background: rgba(255, 193, 46, .12); box-shadow: inset 0 0 12px rgba(255, 194, 47, .08); }
.card-redeem-store-copy { display: grid; gap: 2px; }
.card-redeem-store-copy strong { color: rgba(255, 242, 205, .88); font-size: 11px; }
.card-redeem-store-copy small { color: rgba(255, 221, 143, .56); font-size: 10px; }
.card-redeem-store-arrow { margin-left: auto; color: #ffd04a; font-size: 16px; transition: transform .2s; }
.card-redeem-store-link:hover .card-redeem-store-arrow { transform: translate(2px, -2px); }
.card-redeem-field { margin-bottom: 10px; }
.card-redeem-label-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; }
.card-redeem-label { margin: 0; color: rgba(226, 238, 255, .74); font-size: 12px; font-weight: 700; }
.card-redeem-label-row > span { color: rgba(157, 188, 226, .42); font-size: 10px; }
.card-redeem-input-shell { position: relative; }
.card-redeem-input-icon { position: absolute; z-index: 2; top: 50%; left: 15px; display: grid; place-items: center; color: rgba(116, 195, 255, .68); transform: translateY(-50%); pointer-events: none; }
.card-redeem-input {
    height: 54px;
    padding: 14px 16px 14px 46px;
    border: 1px solid rgba(112, 172, 240, .19);
    border-radius: 14px;
    color: #eef7ff;
    background: rgba(3, 12, 27, .52);
    letter-spacing: .08em;
}
.card-redeem-input:focus { border-color: #48baff; background: rgba(17, 72, 130, .18); box-shadow: 0 0 0 3px rgba(50, 159, 255, .1), 0 0 22px rgba(41, 147, 255, .1); }
.card-redeem-input:focus + * { color: #fff; }
.card-redeem-hint { display: flex; align-items: center; gap: 6px; margin-top: 9px; color: rgba(178, 204, 237, .45); font-size: 10px; }
.card-redeem-hint span { color: #39d5a1; }
.chat-recharge-footer { gap: 10px; padding: 15px 26px 24px; border-top: 0; }
.btn-recharge-cancel, .btn-recharge-confirm { min-height: 47px; border-radius: 13px; }
.btn-recharge-cancel { flex: .72; border: 1px solid rgba(145, 183, 230, .12); color: rgba(210, 226, 247, .58); background: rgba(255,255,255,.035); }
.btn-recharge-cancel:hover { border-color: rgba(145, 183, 230, .2); color: #eef6ff; background: rgba(255,255,255,.07); }
.btn-recharge-confirm {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 1px solid rgba(36, 220, 155, .58);
    color: #eafff7;
    background: linear-gradient(100deg, #078961, #087461);
    box-shadow: 0 8px 24px rgba(6, 148, 103, .24), inset 0 0 16px rgba(72, 229, 174, .08);
    font-weight: 800;
}
.btn-recharge-confirm:hover:not(:disabled) { background: linear-gradient(100deg, #08a172, #07826b); box-shadow: 0 10px 28px rgba(7, 165, 115, .32); transform: translateY(-1px); }
.btn-recharge-confirm b { font-size: 17px; transition: transform .2s; }
.btn-recharge-confirm:hover b { transform: translateX(3px); }
.btn-recharge-confirm:disabled { border-color: rgba(125, 164, 211, .1); color: rgba(195, 214, 238, .26); background: rgba(255,255,255,.045); opacity: 1; }

/* Light mode: lavender glass with gold purchase cue and emerald action. */
body.theme-light .chat-recharge-overlay { background: rgba(39, 28, 69, .25); }
body.theme-light .chat-recharge-modal {
    border-color: rgba(117, 75, 190, .3);
    color: #312344;
    background: linear-gradient(145deg, rgba(255,255,255,.99), rgba(247,243,255,.995) 62%, rgba(241,234,255,.99));
    box-shadow: 0 30px 90px rgba(67, 42, 110, .24), 0 0 54px rgba(122, 78, 198, .12);
    animation-name: rechargeModalIn, rechargeBorderBreathLight;
}
@keyframes rechargeBorderBreathLight {
    0%, 100% { border-color: rgba(117,75,190,.26); box-shadow: 0 30px 90px rgba(67,42,110,.22), 0 0 45px rgba(122,78,198,.09); }
    50% { border-color: rgba(124,75,205,.42); box-shadow: 0 30px 90px rgba(67,42,110,.24), 0 0 62px rgba(122,78,198,.15); }
}
body.theme-light .chat-recharge-modal::before { background: radial-gradient(circle, rgba(137, 83, 221, .16), transparent 68%); }
body.theme-light .chat-recharge-header { border-bottom-color: rgba(108, 72, 165, .13); background: linear-gradient(90deg, rgba(141, 93, 220, .12), rgba(171, 123, 235, .03) 64%, transparent); }
body.theme-light .chat-recharge-title-icon { border-color: rgba(126, 77, 206, .54); color: #7544c6; background: linear-gradient(145deg, rgba(145, 91, 225, .16), rgba(106, 70, 190, .08)); box-shadow: 0 0 22px rgba(117, 70, 194, .15), inset 0 0 14px rgba(135, 82, 218, .07); }
body.theme-light .chat-recharge-title-icon::after { border-color: rgba(122, 73, 203, .18); }
body.theme-light .chat-recharge-eyebrow { color: #7a49c6; }
body.theme-light .chat-recharge-header h3 { color: #3c2659; }
body.theme-light .chat-recharge-header p { color: #796a8e; }
body.theme-light .chat-recharge-close { border-color: rgba(95, 66, 139, .1); color: #7a6c8d; background: rgba(104, 70, 156, .03); }
body.theme-light .chat-recharge-close:hover { color: #47266f; border-color: rgba(116, 72, 183, .22); background: rgba(121, 76, 191, .08); }
body.theme-light .card-redeem-hero { border-color: rgba(118, 76, 187, .18); background: linear-gradient(120deg, rgba(144, 94, 220, .1), rgba(100, 134, 225, .07)); }
body.theme-light .card-redeem-hero::after { background: linear-gradient(110deg, transparent 18%, rgba(255,255,255,.58) 42%, transparent 64%); }
body.theme-light .card-redeem-hero-icon { color: #fff; background: linear-gradient(145deg, #8b5bd4, #637bdc); box-shadow: 0 8px 22px rgba(107, 77, 183, .22); }
body.theme-light .card-redeem-hero-title { color: #3d2a55; }
body.theme-light .card-redeem-hero-desc { color: #796b8c; }
body.theme-light .card-redeem-trust-row span { color: #6e617f; }
body.theme-light .card-redeem-store-link { border-color: rgba(201, 137, 12, .22); color: #8d5d00; background: linear-gradient(100deg, rgba(255, 194, 56, .12), rgba(250, 225, 171, .05)); }
body.theme-light .card-redeem-store-link:hover { border-color: rgba(201, 137, 12, .38); background: rgba(255, 192, 48, .14); color: #744c00; }
body.theme-light .card-redeem-store-icon { color: #ad7200; background: rgba(230, 157, 14, .11); }
body.theme-light .card-redeem-store-copy strong { color: #60440c; }
body.theme-light .card-redeem-store-copy small { color: #967638; }
body.theme-light .card-redeem-store-arrow { color: #b37600; }
body.theme-light .card-redeem-label { color: #51435f; }
body.theme-light .card-redeem-label-row > span { color: #9589a1; }
body.theme-light .card-redeem-input-icon { color: #8254c4; }
body.theme-light .card-redeem-input { border-color: rgba(105, 75, 148, .16); color: #3b2a50; background: rgba(255,255,255,.72); }
body.theme-light .card-redeem-input::placeholder { color: #aaa0b4; }
body.theme-light .card-redeem-input:focus { border-color: #8252c8; background: #fff; box-shadow: 0 0 0 3px rgba(127, 76, 199, .09), 0 8px 22px rgba(90, 54, 137, .06); }
body.theme-light .card-redeem-hint { color: #8a7d96; }
body.theme-light .btn-recharge-cancel { border-color: rgba(82, 55, 120, .1); color: #746680; background: rgba(83, 57, 119, .04); }
body.theme-light .btn-recharge-cancel:hover { border-color: rgba(82,55,120,.16); color: #473653; background: rgba(83,57,119,.075); }
body.theme-light .btn-recharge-confirm { border-color: #078f67; color: #fff; background: linear-gradient(100deg, #07966c, #087b68); box-shadow: 0 8px 22px rgba(6, 141, 99, .2); }
body.theme-light .btn-recharge-confirm:hover:not(:disabled) { background: linear-gradient(100deg, #08a574, #08836b); box-shadow: 0 10px 26px rgba(6, 141, 99, .27); }
body.theme-light .btn-recharge-confirm:disabled { border-color: rgba(91, 67, 124, .08); color: rgba(73, 56, 94, .3); background: rgba(80, 58, 109, .055); }

/* Beat the legacy right-rail button skin without affecting other dialogs. */
body.chat-shell:not(.theme-light) .chat-recharge-modal .btn-recharge-confirm {
    border-color: rgba(36, 220, 155, .58);
    color: #eafff7;
    background: linear-gradient(100deg, #078961, #087461);
    box-shadow: 0 8px 24px rgba(6, 148, 103, .24), inset 0 0 16px rgba(72, 229, 174, .08);
}
body.chat-shell:not(.theme-light) .chat-recharge-modal .btn-recharge-confirm:hover:not(:disabled) {
    background: linear-gradient(100deg, #08a172, #07826b);
    box-shadow: 0 10px 28px rgba(7, 165, 115, .32);
}
body.chat-shell:not(.theme-light) .chat-recharge-modal .btn-recharge-confirm:disabled {
    border-color: rgba(125, 164, 211, .1);
    color: rgba(195, 214, 238, .26);
    background: rgba(255, 255, 255, .045);
    box-shadow: none;
}

@media (max-width: 560px) {
    .chat-recharge-modal { width: min(520px, calc(100vw - 22px)); border-radius: 20px; }
    .chat-recharge-header { padding: 20px 18px 17px; }
    .chat-recharge-title-icon { width: 41px; height: 41px; }
    #rechargePanelCard { padding: 18px 18px 10px; }
    .chat-recharge-footer { padding: 14px 18px 20px; }
}
@media (prefers-reduced-motion: reduce) {
    .chat-recharge-modal, .chat-recharge-title-icon, .chat-recharge-title-icon::after, .card-redeem-hero::after { animation: none !important; }
}

/* Store entry is a secondary action. Keep gold on the cue, not the whole card. */
body.chat-shell .chat-recharge-modal .card-redeem-store-link {
    border-color: rgba(103, 166, 244, .22);
    color: #dcecff;
    background: linear-gradient(100deg, rgba(31, 76, 132, .2), rgba(30, 42, 78, .12));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025);
}
body.chat-shell .chat-recharge-modal .card-redeem-store-link:hover {
    border-color: rgba(104, 184, 255, .42);
    color: #f2f8ff;
    background: linear-gradient(100deg, rgba(36, 96, 164, .25), rgba(48, 56, 108, .16));
}
body.chat-shell .chat-recharge-modal .card-redeem-store-icon {
    color: #f4c95d;
    background: rgba(244, 191, 62, .1);
    box-shadow: inset 0 0 12px rgba(244, 191, 62, .06);
}
body.chat-shell .chat-recharge-modal .card-redeem-store-copy strong { color: rgba(232, 242, 255, .9); }
body.chat-shell .chat-recharge-modal .card-redeem-store-copy small { color: rgba(174, 199, 231, .58); }
body.chat-shell .chat-recharge-modal .card-redeem-store-arrow { color: #73bfff; }

body.chat-shell.theme-light .chat-recharge-modal .card-redeem-store-link {
    border-color: rgba(110, 77, 165, .16);
    color: #4d3b67;
    background: linear-gradient(100deg, rgba(255, 255, 255, .82), rgba(119, 91, 181, .055));
    box-shadow: 0 5px 16px rgba(72, 48, 108, .035), inset 0 1px 0 rgba(255, 255, 255, .8);
}
body.chat-shell.theme-light .chat-recharge-modal .card-redeem-store-link:hover {
    border-color: rgba(119, 77, 190, .3);
    color: #38244f;
    background: linear-gradient(100deg, #fff, rgba(129, 89, 199, .09));
}
body.chat-shell.theme-light .chat-recharge-modal .card-redeem-store-icon {
    color: #a86f00;
    background: rgba(226, 158, 21, .1);
    box-shadow: none;
}
body.chat-shell.theme-light .chat-recharge-modal .card-redeem-store-copy strong { color: #453456; }
body.chat-shell.theme-light .chat-recharge-modal .card-redeem-store-copy small { color: #81748d; }
body.chat-shell.theme-light .chat-recharge-modal .card-redeem-store-arrow { color: #7650b5; }