@charset "UTF-8";

/* 充值续费模块样式（#rechargeModal 作用域），来源：原 index.html 内联样式合并去重。 */

#rechargeModal .w-4 { width: 1rem; }
#rechargeModal .h-4 { height: 1rem; }
#rechargeModal .w-8 { width: 2rem; }
#rechargeModal .h-8 { height: 2rem; }
#rechargeModal .w-3\.5 { width: .875rem; }
#rechargeModal .h-3\.5 { height: .875rem; }
#rechargeModal .w-2\.5 { width: .625rem; }
#rechargeModal .h-2\.5 { height: .625rem; }
#rechargeModal .h-\[48px\] { height: 48px; }
#rechargeModal .max-w-4xl { max-width: 56rem; }
#rechargeModal .max-w-xl { max-width: 36rem; }
#rechargeModal .left-1\/2 { left: 50%; }
#rechargeModal .-translate-x-1\/2 { transform: translateX(-50%); }

#rechargeModal .grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

#rechargeModal .col-span-4 { grid-column: span 4 / span 4; }
#rechargeModal .items-start { align-items: flex-start; }
#rechargeModal .items-baseline { align-items: baseline; }
#rechargeModal .gap-1 { gap: .25rem; }
#rechargeModal .gap-6 { gap: 1.5rem; }
#rechargeModal .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#rechargeModal .block { display: block; }
#rechargeModal .flex-1 { flex: 1 1 0%; }
#rechargeModal .min-w-0 { min-width: 0; }

#rechargeModal .rc-qr-bar { width: 310px; padding: 1.5rem; }
#rechargeModal .rc-qr-card { width: 100%; flex: 1 1 auto; }

#rechargeModal .mt-0\.5 { margin-top: .125rem; }
#rechargeModal .mt-1\.5 { margin-top: .375rem; }
#rechargeModal .mt-3 { margin-top: .75rem; }
#rechargeModal .mb-3 { margin-bottom: .75rem; }
#rechargeModal .ml-1 { margin-left: .25rem; }
#rechargeModal .pt-4 { padding-top: 1rem; }
#rechargeModal .pt-6 { padding-top: 1.5rem; }
#rechargeModal .pt-7 { padding-top: 1.75rem; }
#rechargeModal .pb-2\.5 { padding-bottom: .625rem; }
#rechargeModal .pb-5 { padding-bottom: 1.25rem; }
#rechargeModal .pb-6 { padding-bottom: 1.5rem; }
#rechargeModal .px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }
#rechargeModal .px-8 { padding-left: 2rem; padding-right: 2rem; }
#rechargeModal .p-2 { padding: .5rem; }
#rechargeModal .p-3\.5 { padding: .875rem; }
#rechargeModal .p-6 { padding: 1.5rem; }
#rechargeModal .pl-2 { padding-left: .5rem; }
#rechargeModal .pl-5 { padding-left: 1.25rem; }
#rechargeModal .py-0\.5 { padding-top: .125rem; padding-bottom: .125rem; }
#rechargeModal .py-2 { padding-top: .5rem; padding-bottom: .5rem; }
#rechargeModal .gap-1\.5 { gap: .375rem; }
#rechargeModal .space-y-2 > :not([hidden]) ~ :not([hidden]) { margin-top: .5rem; }
#rechargeModal .space-y-2\.5 > :not([hidden]) ~ :not([hidden]) { margin-top: .625rem; }
#rechargeModal .space-y-6 > :not([hidden]) ~ :not([hidden]) { margin-top: 1.5rem; }
#rechargeModal .-top-2\.5 { top: -.625rem; }
#rechargeModal .top-1\.5 { top: .375rem; }
#rechargeModal .top-2\.5 { top: .625rem; }
#rechargeModal .right-1\.5 { right: .375rem; }
#rechargeModal .right-2\.5 { right: .625rem; }
#rechargeModal .left-2\.5 { left: .625rem; }
#rechargeModal .left-3 { left: .75rem; }

#rechargeModal .border-2 { border-width: 2px; }
#rechargeModal .border-slate-300 { border-color: rgb(203 213 225); }
#rechargeModal .hover\:border-slate-300:hover { border-color: rgb(203 213 225); }
#rechargeModal .border-\[\#5E6BE3\] { border-color: #6366f1; }
#rechargeModal .border-\[\#D8D8DE\] { border-color: #D8D8DE; }
#rechargeModal .border-dashed { border-style: dashed; }
#rechargeModal .rounded-md { border-radius: .375rem; }
#rechargeModal .rounded-xl { border-radius: .75rem; }
#rechargeModal .rounded-full { border-radius: 999px; }

#rechargeModal .text-\[\#1C1C1E\] { color: #1C1C1E; }
#rechargeModal .text-\[\#8E8E94\] { color: #8E8E94; }
#rechargeModal .text-\[\#C7C7CC\] { color: #C7C7CC; }
#rechargeModal .text-\[\#FF4C11\] { color: #FF4C11; }
#rechargeModal .text-\[\#5E6BE3\] { color: #6366f1; }
#rechargeModal .text-\[\#FFD25E\] { color: #FFD25E; }
#rechargeModal .text-black { color: #000; }

#rechargeModal .bg-\[\#F7F8FA\] { background-color: #F7F8FA; }
#rechargeModal .bg-\[\#EFF5FF\] { background-color: #EFF5FF; }
#rechargeModal .bg-\[\#5E6BE3\] { background-color: #6366f1; }
#rechargeModal .bg-\[\#FF5921\] { background-color: #FF5921; }
#rechargeModal .bg-\[\#07C160\] { background-color: #07C160; }
#rechargeModal .bg-\[\#1677FF\] { background-color: #1677FF; }
#rechargeModal .bg-black { background-color: #000; }
#rechargeModal .hover\:bg-\[\#4A56CC\]:hover { background-color: #1e293b; }
#rechargeModal .hover\:bg-slate-100:hover { background-color: rgb(241 245 249); }

#rechargeModal .text-\[10px\] { font-size: 10px; }
#rechargeModal .text-\[11px\] { font-size: 11px; }
#rechargeModal .text-\[12px\] { font-size: 12px; }
#rechargeModal .text-\[13px\] { font-size: 13px; }
#rechargeModal .text-\[14px\] { font-size: 14px; }
#rechargeModal .text-\[15px\] { font-size: 15px; }
#rechargeModal .text-\[16px\] { font-size: 16px; }
#rechargeModal .text-\[18px\] { font-size: 18px; }
#rechargeModal .text-\[22px\] { font-size: 22px; }
#rechargeModal .text-\[24px\] { font-size: 24px; }
#rechargeModal .text-\[26px\] { font-size: 26px; }
#rechargeModal .line-through { text-decoration: line-through; }

#rechargeModal .duration-150 { transition-duration: .15s; }
#rechargeModal .shadow-sm { box-shadow: 0 1px 2px rgba(0, 0, 0, .06); }

#rechargeModal .rc-head {
    position: relative;
    background: linear-gradient(120deg, #0F172A 0%, #182238 55%, #1F2A48 100%);
    overflow: hidden;
}
#rechargeModal .rc-blob { position: absolute; border-radius: 999px; background: rgba(255, 255, 255, .13); pointer-events: none; }
#rechargeModal .rc-blob-1 { width: 12rem; height: 12rem; top: -5.5rem; right: -2rem; }
#rechargeModal .rc-blob-2 { width: 8rem; height: 8rem; bottom: -4rem; left: -2.5rem; }
#rechargeModal .rc-head-tag {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .22rem .55rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .22);
    border: 1px solid rgba(255, 255, 255, .4);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}
#rechargeModal .rc-head-sub { color: rgba(255, 255, 255, .85); font-size: 13px; }
#rechargeModal .rc-close { background: rgba(255, 255, 255, .16); color: #fff; }
#rechargeModal .rc-close:hover { background: rgba(255, 255, 255, .3); }

#rechargeModal .rc-plan { position: relative; }
#rechargeModal .rc-plan-name { font-size: 13px; font-weight: 600; color: #1C1C1E; }
#rechargeModal .rc-plan-num { font-size: 22px; font-weight: 700; color: #1C1C1E; line-height: 1; }
#rechargeModal .rc-plan-old { font-size: 11px; color: #B0B0B8; }
#rechargeModal .rc-plan-save { font-size: 11px; font-weight: 500; color: #6366f1; }
#rechargeModal .rc-plan-hot {
    position: absolute; 
    top: -10px;
    left: 10px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .15rem;
    padding: .2rem .6rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #FF8A3D, #FF4D1C);
    border: 1px solid rgba(255, 255, 255, .35);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .02em;
    white-space: nowrap;
    box-shadow: 0 3px 8px rgba(255, 77, 28, .45);
}

#rechargeModal .rc-plan-hot-gold {
    background: linear-gradient(135deg, #FFD25E, #FF9A1C);
    box-shadow: 0 3px 8px rgba(255, 154, 28, .45);
}

#rechargeModal .rc-plan-check {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 2;
    width: 14px;
    height: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #6366f1;
    color: #fff;
    font-size: 10px;
    line-height: 1;
}
#rechargeModal .rc-plan-check.hidden { display: none !important; }

#rechargeModal .rc-submit {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: linear-gradient(120deg, #0F172A 0%, #182238 55%, #1F2A48 100%);
    box-shadow: 0 6px 16px rgba(15, 23, 42, .4);
}
#rechargeModal .rc-submit:hover { background: linear-gradient(120deg, #0A0E1A 0%, #12192C 55%, #182238 100%); }
#rechargeModal .rc-submit-icon { width: 18px; height: 18px; flex-shrink: 0; object-fit: contain; }

#rechargeModal .rc-pulse-dot {
    width: 8px; height: 8px;
    border-radius: 9999px;
    background: #34d399;
    animation: rcPulse 1.6s ease-in-out infinite;
}
@keyframes rcPulse {
    0%, 100% { opacity: .35; transform: scale(.9); }
    50% { opacity: 1; transform: scale(1.15); }
}
#rechargeModal #rc_qr_box { width: 212px; height: 212px; }
#rechargeModal #rc_qr_box img,
#rechargeModal #rc_qr_box canvas,
#rechargeModal #rc_qr_box table {
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}
#rechargeModal #rc_qr_box table { border-collapse: collapse; }
#rechargeModal #rc_qr_fallback input { user-select: all; }
#rechargeModal .recharge-body { max-height: 86vh; }
#rechargeModal #rc_qr_amount { font-size: 18px; font-weight: 700; color: #1C1C1E; }
#rechargeModal #rcQrPanel:not(.hidden) { display: flex; flex-direction: column; padding: 1.5rem; gap: 0.75rem; }
#rechargeModal #rcQrPanel:not(.hidden) #rc_qr_box { width: 200px; height: 200px; }

#rechargeModal .rc-qr-frame { position: relative; padding: 12px; }
#rechargeModal #rc_qr_mask {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.92);
    z-index: 10;
}

#rechargeModal #rc_qr_mask.hidden { display: none !important; }

#rechargeModal #rc_qr_mask_icon { font-size: 38px; }
#rechargeModal #rc_qr_mask_icon.text-emerald-500 { color: #10b981; }
#rechargeModal #rc_qr_mask_icon.text-slate-300 { color: #94a3b8; }
#rechargeModal #rc_qr_mask_text { font-size: 13px; font-weight: 600; color: #1C1C1E; }
#rechargeModal #rc_qr_mask_sub { font-size: 11px; color: #8E8E94; }
#rechargeModal #rc_qr_tip { margin-top: 1rem; }
#rechargeModal .rc-qr-btns { margin-bottom: 1rem; }

#rechargeModal .rc-qr-back,
#rechargeModal .rc-qr-refresh {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 200px;
    height: 44px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    transition: background-color .15s ease;
}
#rechargeModal .rc-qr-back {
    background: #F2F3F5;
    border: 1px solid #E5E7EB;
    color: #1C1C1E;
}
#rechargeModal .rc-qr-back:hover { background: #E2E8F0; }
#rechargeModal .rc-qr-refresh {
    background: linear-gradient(120deg, #0F172A 0%, #182238 55%, #1F2A48 100%);
    color: #fff;
}
#rechargeModal .rc-qr-refresh:hover { background: linear-gradient(120deg, #0A0E1A 0%, #12192C 55%, #182238 100%); }

#rechargeModal .rc-qr-back.hidden,
#rechargeModal .rc-qr-refresh.hidden { display: none !important; }

#rechargeModal .rc-submit::before {
    content: '';
    position: absolute;
    top: -20%;
    left: -80%;
    width: 26%;
    height: 140%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .22) 45%, rgba(255, 255, 255, .38) 50%, rgba(255, 255, 255, .22) 55%, transparent);
    transform: skewX(-35deg);
    animation: rcSweep 4.2s ease-in-out infinite;
    z-index: 1;
    pointer-events: none;
}
@keyframes rcSweep {
    0% { left: -80%; }
    55% { left: 130%; }
    100% { left: 130%; }
}

#rechargeModal .rc-coupon-input {
    flex: 1 1 0%;
    height: 40px;
    border-radius: 8px;
    border: 1px solid #E2E8F0;
    background-color: #F7F8FA;
    padding: 0 12px;
    font-size: 13px;
    color: #1C1C1E;
    outline: none;
    transition: border-color .15s, background-color .15s;
}
#rechargeModal .rc-coupon-input:focus {
    border-color: #6366f1;
    background-color: #fff;
}
#rechargeModal .rc-coupon-input::placeholder { color: #9CA3AF; }
#rechargeModal .rc-coupon-btn {
    height: 40px;
    min-width: 76px;
    padding: 0 18px;
    border-radius: 10px;
    border: 0;
    background-color: #F1F5F9;
    color: #475569;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .5px;
    cursor: pointer;
}
#rechargeModal .rc-coupon-btn:hover { background-color: #E2E8F0; }
#rechargeModal .rc-coupon-btn:active { transform: scale(.97); }
#rechargeModal .rc-coupon-btn:disabled {
    background-color: #E2E8F0;
    color: #94A3B8;
    cursor: not-allowed;
}

#headerRechargeBtn {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
#headerRechargeBtn:hover { background-color: #4A56CC; }
#headerRechargeBtn::before {
    content: '';
    position: absolute;
    top: -20%;
    left: -80%;
    width: 26%;
    height: 140%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .22) 45%, rgba(255, 255, 255, .38) 50%, rgba(255, 255, 255, .22) 55%, transparent);
    transform: skewX(-35deg);
    animation: rcSweep 2.4s ease-in-out infinite;
    z-index: 1;
    pointer-events: none;
}

@media (max-width: 767px) {
    #rechargeModal .recharge-body { flex-direction: column; }
    #rechargeModal .recharge-qr { width: 100%; padding: 1.5rem 0; }
    #rechargeModal .recharge-qr svg { width: 140px; height: 140px; }
}