/* 守护打赏样式（HX 主题）。配合 /js/HX/guardian.js。弹层复用全局 .mask 遮罩。 */

/* ===== 书籍详情页：守护榜卡片 ===== */
.guardianCard { background: var(--white-color, #fff); border-radius: 12px; overflow: hidden; }
.guardianCard .innerWrap { padding: 14px; }

/* 标题栏：🏆 守護 · N人成為守護 | 全部 › */
.guardianCardTitle { display: flex; align-items: center; justify-content: space-between; }
.gcTitleLeft { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.gcTrophy { font-size: 18px; }
.guardianCardTitle h2 { font-size: 18px; font-weight: 800; margin: 0; color: #333; }
.gcPeople { font-size: 13px; color: #999; }
.gcPeople b { color: #666; font-weight: 700; }
.guardianMoreLink { font-size: 13px; color: #ff7a18; white-space: nowrap; }

/* 本书累计获得金币总额（标题栏下方） */
.gcTotalRow { display: flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 14px; color: #999; }
.gcTotalRow .gCoinIcon { flex: 0 0 16px; }
.gcTotalRow b { font-size: 18px; font-weight: 800; color: #ff5a1c; }

/* 前 N 名免费畅读提示条 */
.gcFreeTip { display: flex; align-items: center; gap: 10px; margin: 12px 0; padding: 12px 14px;
    border-radius: 12px; background: linear-gradient(90deg, #fff0e6, #fff6ef); }
.gcFreeBadge { flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%;
    background: linear-gradient(135deg, #ff8a3c, #ff6a2c); position: relative; }
.gcFreeBadge::before { content: '🛡'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 16px; }
.gcFreeText { font-size: 15px; font-weight: 600; color: #444; line-height: 1.4; }
.gcFreeText b { color: #ff5a1c; }

/* 前 3 名榜单 */
.guardianTop { display: flex; flex-direction: column; min-height: 32px; }
.guardianTip { color: #aaa; font-size: 13px; padding: 16px 0; text-align: center; }
.gTopItem { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid #f4f4f4; }
.gTopItem:last-child { border-bottom: 0; }
.gMedal { flex: 0 0 22px; text-align: center; font-size: 20px; line-height: 1; }
.gMedal .gTopNum { font-size: 13px; font-weight: 800; color: #bbb; }
.gTopAvatar { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: #eee; }
.gTopInfo { flex: 1; min-width: 0; }
.gTopNick { font-size: 15px; color: #333; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gTopTime { font-size: 12px; color: #aaa; margin-top: 3px; }
.gTopCoin { display: flex; align-items: center; gap: 4px; font-size: 16px; font-weight: 800; color: #ff7a18; }
.gCoinIcon { width: 16px; height: 16px; background: url('/images/HX/mine-coin.png') center / contain no-repeat; }

/* 我的守护进度卡（已/未守护两态） */
.gmCard { margin-top: 12px; padding: 14px; border-radius: 12px;
    background: linear-gradient(135deg, #fff7ec, #fffdf9); border: 1px solid #f2ddb4; }
.gmHead { display: flex; align-items: center; gap: 10px; }
.gmAvatar { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%;
    background: linear-gradient(135deg, #ffd76a, #f5a300); position: relative; }
.gmAvatar::before { content: '🛡'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 20px; }
.gmHeadText { flex: 1; min-width: 0; }
.gmTitle { font-size: 14px; color: #999; }
.gmSub { font-size: 17px; font-weight: 800; color: #333; margin-top: 2px; }
.gmSub b { color: #ff5a1c; }
.gmRankTag { flex: 0 0 auto; align-self: center; font-size: 13px; font-weight: 700; color: #c8891a;
    background: #fff2d6; padding: 5px 12px; border-radius: 999px; white-space: nowrap; }
.gmBar { height: 8px; border-radius: 999px; background: #f0e2c8; overflow: hidden; margin: 12px 0 8px; }
.gmBarFill { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #ffb020, #ff7a18); transition: width .4s ease; }
.gmFoot { display: flex; align-items: center; justify-content: space-between; font-size: 13px; }
.gmFootL { color: #999; }
.gmFootL b { color: #ff5a1c; }
.gmFootR { color: #999; font-weight: 600; }

/* 打赏按钮 */
.guardianActions { display: flex; gap: 10px; margin-top: 14px; }
.guardianRewardBtn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
    padding: 13px 0; border-radius: 999px; font-size: 16px; font-weight: 800; color: #fff;
    background: linear-gradient(90deg, #ffb020, #ff7a18); box-shadow: 0 4px 12px rgba(255, 122, 24, .3); }
.grbCoin { width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff3c8, #ffd76a); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .6); }

/* 守护专属免费角标（书籍详情页主卡右上，仅前 N 名守护者可见） */
.guardFreeBadge { position: absolute; top: 12px; right: 12px; z-index: 6; display: inline-flex; align-items: center; gap: 5px;
    padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 800; color: #8a5600; text-decoration: none;
    background: linear-gradient(135deg, #ffe6a0, #ffcf5e); border: 1px solid #f0bf5a; box-shadow: 0 2px 8px rgba(224, 150, 30, .35); }
.guardFreeBadge::before { content: '🎖'; font-size: 14px; }

/* ===== 打赏弹层 ===== */
.rewardModalBox { width: 92%; max-width: 420px; margin: 18vh auto; background: var(--white-color, #fff); border-radius: 16px; position: relative; padding: 20px; box-shadow: 0 8px 32px rgba(0,0,0,.3); }
.rewardModalClose { position: absolute; top: 14px; right: 14px; width: 30px; height: 30px; border-radius: 50%; background: rgba(0,0,0,.05); cursor: pointer; }
.rewardModalClose::before, .rewardModalClose::after { content: ''; position: absolute; top: 50%; left: 50%; width: 15px; height: 2px; background: #666; transform: translate(-50%,-50%) rotate(45deg); }
.rewardModalClose::after { transform: translate(-50%,-50%) rotate(-45deg); }
.rewardModalHeader h3 { margin: 0 0 6px; font-size: 18px; text-align: center; }
.rewardBalance { text-align: center; font-size: 13px; color: #888; margin: 0 0 14px; }
.rewardBalance b { color: #e8890c; }
.rewardAmounts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.rewardAmount { padding: 14px 0; border: 1px solid #eee; border-radius: 12px; background: #fafafa; font-size: 16px; font-weight: 700; color: #333; cursor: pointer; }
.rewardAmount.active { border-color: #ff7a18; color: #ff7a18; background: #fff4e2; }
.rewardCustomRow { margin-top: 12px; }
.rewardCustomInput { width: 100%; box-sizing: border-box; padding: 12px 14px; border: 1px solid #eee; border-radius: 12px; background: #fafafa; font-size: 15px; color: #333; text-align: center; }
.rewardCustomInput:focus { outline: none; border-color: #ff7a18; background: #fff4e2; }
.rewardActions { display: flex; gap: 12px; margin-top: 18px; }
.rewardBtn { flex: 1; padding: 12px 0; border: none; border-radius: 999px; font-size: 15px; font-weight: 700; cursor: pointer; }
.rewardBtn-cancel { background: #f0f0f0; color: #666; }
.rewardBtn-submit { background: linear-gradient(90deg, #ffb020, #ff7a18); color: #fff; }

/* ===== 全部守护者弹层 ===== */
.guardianAllBox { width: 92%; max-width: 480px; max-height: 76vh; margin: 8vh auto; background: var(--white-color, #fff); border-radius: 16px; position: relative; overflow: hidden; display: flex; flex-direction: column; }
.guardianAllClose { position: absolute; top: 14px; right: 14px; width: 30px; height: 30px; border-radius: 50%; background: rgba(0,0,0,.05); cursor: pointer; z-index: 2; }
.guardianAllClose::before, .guardianAllClose::after { content: ''; position: absolute; top: 50%; left: 50%; width: 15px; height: 2px; background: #666; transform: translate(-50%,-50%) rotate(45deg); }
.guardianAllClose::after { transform: translate(-50%,-50%) rotate(-45deg); }
.guardianAllHeader { padding: 16px; text-align: center; border-bottom: 1px solid #f0f0f0; }
.guardianAllHeader h3 { margin: 0; font-size: 17px; }
.guardianAllList { flex: 1; overflow-y: auto; padding: 6px 16px; }
.guardianAllItem { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid #f6f6f6; }
.gaRank { flex: 0 0 24px; text-align: center; font-weight: 700; color: #bbb; }
.gaRank-1 { color: #f5b301; } .gaRank-2 { color: #b8bcc4; } .gaRank-3 { color: #d08a4e; }
.gaAvatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: #eee; }
.gaInfo { flex: 1; min-width: 0; }
.gaNick { font-size: 14px; color: #333; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gaSub { font-size: 12px; color: #aaa; margin-top: 2px; }
.gaCoin { display: inline-flex; align-items: center; gap: 4px; font-size: 15px; font-weight: 700; color: #e8890c; }
.guardianAllMore { padding: 12px; text-align: center; }
.guardianAllMore a { color: #888; font-size: 14px; }

/* ===== 守护榜（打赏榜单）页面 ===== */
.guardianRankPage { padding-bottom: 72px; }
.guardianRankPage .innerWrap { padding: 12px 14px; }
.grHeader { position: relative; text-align: center; padding: 8px 0 12px; }
.grTitle { font-size: 20px; font-weight: 800; margin: 0; }
.grRuleBtn { position: absolute; right: 0; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: #ff7a18; }
.grRuleBtn::before { content: '📋'; font-size: 13px; }
.grTypeTabs { display: flex; gap: 24px; justify-content: center; margin-bottom: 12px; }
.grTypeTab { font-size: 16px; color: #999; padding-bottom: 6px; border-bottom: 2px solid transparent; }
.grTypeTab.active { color: #ff7a18; font-weight: 700; border-bottom-color: #ff7a18; }
.grPeriodTabs { display: flex; gap: 8px; justify-content: center; margin-bottom: 14px; }
.grPeriodTab { font-size: 13px; color: #888; padding: 5px 16px; border-radius: 999px; background: #f4f4f4; }
.grPeriodTab.active { color: #fff; background: #ff9a3c; }
.grBanner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px; background: linear-gradient(90deg, #fff4e2, #ffe9cf); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; }
.grBannerStat { font-size: 13px; color: #a06a12; }
.grBannerStat b { font-size: 17px; color: #e8560c; margin-right: 2px; }
.grDot { margin: 0 8px; color: #d8a878; }
.grBannerPeriod { font-size: 12px; color: #b07b2a; }
.grBannerPeriod span { margin-left: 6px; }
.grSettled { color: #999; }
.grRemain { color: #e8560c; }
.grRule { font-size: 12px; color: #999; text-align: center; margin-bottom: 12px; }
.grList { display: flex; flex-direction: column; }
.grEmpty { text-align: center; color: #aaa; padding: 40px 0; }
.grItem { display: flex; align-items: center; gap: 12px; padding: 12px 4px; border-bottom: 1px solid #f4f4f4; }
.grRank { flex: 0 0 28px; text-align: center; font-weight: 800; font-size: 16px; color: #ccc; }
.grRank-1 { color: #f5b301; } .grRank-2 { color: #b8bcc4; } .grRank-3 { color: #d08a4e; }
.grAvatar { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; background: #eee; }
.grInfo { flex: 1; min-width: 0; }
.grNick { font-size: 15px; color: #333; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grSub { font-size: 12px; color: #aaa; margin-top: 2px; }
.grCoin { font-size: 16px; font-weight: 700; color: #e8890c; }
.grMore { text-align: center; padding: 16px 0; }
.grMore a { color: #888; font-size: 14px; }
.grMe { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 8px; background: #2b2b2b; color: #fff; padding: 12px 18px; }
.grMeRank { font-size: 14px; }
.grMeRank b { color: #ffb020; font-size: 16px; }
.grMeBook { font-size: 12px; color: #bbb; }
.grMeCoin { font-size: 14px; }
.grMeCoin b { color: #ffb020; }

/* ===== 守护奖励规则弹层 ===== */
.guardianRuleBox { width: 86%; max-width: 400px; margin: 20vh auto; background: var(--white-color, #fff); border-radius: 20px; padding: 24px 22px; box-shadow: 0 8px 32px rgba(0, 0, 0, .25); }
.guardianRuleHeader { text-align: center; margin-bottom: 18px; }
.guardianRuleHeader h3 { margin: 0; font-size: 20px; font-weight: 800; color: #333; display: inline-flex; align-items: center; gap: 6px; }
.grrTrophy { font-size: 20px; }
.guardianRuleList { list-style: none; margin: 0; padding: 0; }
.guardianRuleList li { display: flex; gap: 12px; margin-bottom: 16px; }
.guardianRuleList li i { flex: 0 0 24px; width: 24px; height: 24px; border-radius: 50%; background: #fff0e6; color: #ff7a18; font-style: normal; font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.guardianRuleList li span { flex: 1; font-size: 15px; line-height: 1.6; color: #666; }
.guardianRuleOk { width: 100%; margin-top: 8px; padding: 14px 0; border: none; border-radius: 999px; font-size: 16px; font-weight: 700; color: #fff; background: linear-gradient(90deg, #ffb020, #ff7a18); box-shadow: 0 4px 12px rgba(255, 122, 24, .3); cursor: pointer; }

@media (min-width: 768px) {
    .guardianRankPage .innerWrap { max-width: 720px; margin: 0 auto; }
    .grMe { max-width: 720px; margin: 0 auto; border-radius: 12px 12px 0 0; }
}