#userCenterModal .component-bg {
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    overscroll-behavior: contain;
}
.monthly-reward-card {
    margin-bottom: 16px;
    padding: 18px 20px;
    border: 1px solid rgba(213, 181, 115, .2);
    border-radius: 16px;
    background: linear-gradient(110deg, rgba(221, 187, 123, .09), rgba(221, 187, 123, .025));
}
.monthly-reward-main { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 8px; }
.monthly-reward-label { display: flex; align-items: center; gap: 6px; color: #c4aa7b; }
.monthly-reward-icon { flex: none; }
.monthly-reward-title { margin: 0; font-size: 12px; font-weight: 600; line-height: 20px; letter-spacing: .2px; }
.monthly-reward-help {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 24px; height: 24px; margin: -2px 0 -2px -3px; padding: 0;
    border: 0; border-radius: 50%; background: transparent; color: #8d8b84;
    cursor: pointer; touch-action: manipulation; transition: background .15s, color .15s;
}
.monthly-reward-help:hover, .monthly-reward-help[aria-expanded="true"] { background: rgba(213, 181, 115, .12); color: #d2b67e; }
.monthly-reward-help:focus-visible { outline: 2px solid #bca06a; outline-offset: 2px; }
.monthly-reward-value { display: flex; align-items: baseline; gap: 7px; }
.monthly-reward-value strong { font-size: 30px; font-weight: 650; line-height: 1.1; letter-spacing: -1px; color: #f4f0e7; font-variant-numeric: tabular-nums; }
.monthly-reward-value span { position: relative; top: -1px; font-size: 11px; color: #93918a; }
#claimMonthlyRewardBtn {
    flex-shrink: 0; min-width: 72px; min-height: 34px; padding: 7px 12px;
    border-radius: 9px; border: 1px solid rgba(221, 191, 134, .2);
    background: #e8d4a9; color: #30271a; font-size: 11px; font-weight: 600; line-height: 18px;
    cursor: pointer; transition: background .15s, transform .15s;
}
#claimMonthlyRewardBtn:hover:not(:disabled) { background: #f0dfbb; transform: translateY(-1px); }
#claimMonthlyRewardBtn:active:not(:disabled) { transform: translateY(0); }
#claimMonthlyRewardBtn:focus-visible { outline: 2px solid #bca06a; outline-offset: 3px; }
#claimMonthlyRewardBtn:disabled { background: rgba(255, 255, 255, .045); border-color: rgba(255, 255, 255, .06); color: #96918a; cursor: default; font-size: 11px; }
.monthly-reward-message { margin: 11px 0 0; font-size: 11px; line-height: 1.6; color: #34d399; }
.monthly-reward-message.is-error { color: #f87171; }
.monthly-reward-popover {
    position: fixed; z-index: 140; box-sizing: border-box; width: 286px; max-width: calc(100vw - 32px);
    max-height: calc(100dvh - 32px); overflow-y: auto;
    padding: 16px; border-radius: 13px; border: 1px solid rgba(255, 255, 255, .1);
    background: #242732; color: #eeeef2; box-shadow: 0 8px 28px rgba(0, 0, 0, .24);
}
.monthly-reward-popover[hidden] { display: none; }
.monthly-reward-popover-title { margin: 0 0 7px; font-size: 12px; font-weight: 600; }
.monthly-reward-description, .monthly-reward-detail { margin: 0; font-size: 11px; line-height: 1.75; color: #c0bec9; }
.monthly-reward-note { margin: 9px 0 0; font-size: 10px; line-height: 1.6; color: #93919e; }
#monthlyRewardProgress {
    display: block; width: 100%; height: 3px; margin: 13px 0 8px; border: none;
    border-radius: 3px; overflow: hidden; appearance: none; background: rgba(200, 182, 145, .16);
}
#monthlyRewardProgress::-webkit-progress-bar { background: rgba(200, 182, 145, .16); }
#monthlyRewardProgress[hidden] { display: none; }
#monthlyRewardProgress::-webkit-progress-value { background: #c1a36d; border-radius: 3px; }
#monthlyRewardProgress::-moz-progress-bar { background: #c1a36d; border-radius: 3px; }
body[data-theme="light"] .monthly-reward-card {
    background: linear-gradient(110deg, #fffaf1, #fffefa 75%); border-color: #eee4d2;
    box-shadow: 0 2px 5px rgba(91, 70, 32, .025);
}
body[data-theme="light"] .monthly-reward-label { color: #8a744f; }
body[data-theme="light"] .monthly-reward-value strong { color: #332c22; }
body[data-theme="light"] .monthly-reward-value span { color: #a09483; }
body[data-theme="light"] .monthly-reward-help { color: #a59b8a; }
body[data-theme="light"] .monthly-reward-help:hover, body[data-theme="light"] .monthly-reward-help[aria-expanded="true"] { background: #f3ecde; color: #796647; }
body[data-theme="light"] #claimMonthlyRewardBtn { background: #302b25; border-color: #302b25; color: #fffdf7; }
body[data-theme="light"] #claimMonthlyRewardBtn:hover:not(:disabled) { background: #494036; }
body[data-theme="light"] #claimMonthlyRewardBtn:disabled { background: #f3f0e9; border-color: #eae5da; color: #a09585; }
body[data-theme="light"] .monthly-reward-message { color: #047857; }
body[data-theme="light"] .monthly-reward-message.is-error { color: #dc2626; }
body[data-theme="light"] .monthly-reward-popover { background: #fff; border-color: #e9e5dd; color: #3c352d; box-shadow: 0 8px 32px rgba(62, 47, 24, .12); }
body[data-theme="light"] .monthly-reward-description, body[data-theme="light"] .monthly-reward-detail { color: #746e64; }
body[data-theme="light"] .monthly-reward-note { color: #a29b8f; }
@media (max-width: 380px) {
    .monthly-reward-card { padding: 16px; }
    .monthly-reward-main { gap: 12px; }
    #claimMonthlyRewardBtn { padding-inline: 11px; }
}
@media (prefers-reduced-motion: reduce) {
    #claimMonthlyRewardBtn, .monthly-reward-help { transition: none; }
}