/* =========================================================
   奖励商店 + 奖励-待领取/已领取 (v5 精修样式)
   主页 8 个/节(4×2),弹窗 16/页(4×4)
   仅作用于 #habit-rewards 与 #habit-redemptions 内部
   ========================================================= */

/* ---- 共享：行卡片 hover 微动效 ---- */
.lift {
    transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.lift:hover { transform: translateX(2px); }

/* ---- 覆盖外层 habit-grid:商店 4 列,奖励 4 列 ---- */
#habit-rewards.habit-grid,
#habit-redemptions.habit-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}
@media (max-width: 960px) {
    #habit-rewards.habit-grid,
    #habit-redemptions.habit-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
@media (max-width: 640px) {
    #habit-rewards.habit-grid,
    #habit-redemptions.habit-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* =========================================================
   1. 奖励商店 (#habit-rewards)
   行 1: [40px 图标] [⭐cost(右推)]         ← 头牌信息
   行 2: [name(整行,可换行不截断)]         ← 标题独立行,主信息
   行 3: [全宽 44px 兑换按钮/星星不足]
   卡片 min-height 132px
   h3 + cost 都是 article 的直接子元素(不放 wrapper div),
   避免 display:contents + grid 的子元素被忽略的浏览器坑。
   ========================================================= */
#habit-rewards .habit-card.reward-row {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    column-gap: 10px;
    row-gap: 8px;
    align-items: center;
    padding: 14px;
    min-height: 132px;
    position: relative;
}
/* col 1 奖励图标 */
.reward-icon {
    grid-column: 1;
    grid-row: 1;
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(126,182,255,.18), rgba(126,182,255,.06));
    color: var(--accent, #7EB6FF);
    flex-shrink: 0;
}
.reward-icon svg { width: 20px; height: 20px; display: block; }
/* 行 2:标题占整行。单行省略(短标题 1 行排开,长标题 ... 收尾) */
.reward-name {
    grid-column: 1 / span 2;
    grid-row: 2;
    margin: 0;
    font-size: 14px; font-weight: 800;
    color: var(--text-main);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* 行 1:⭐ 成本 pill,贴右,跟 icon 同一行 */
.reward-cost {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    align-self: center;
    display: inline-flex; align-items: center; gap: 2px;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    color: var(--text-main);
    font-size: 12px; font-weight: 800;
    white-space: nowrap;
}

/* 行 3 兑换按钮:全宽 44px 黄渐变。
   display:block + line-height 居中,避免 display:flex 让 button content-sized */
.reward-cta {
    grid-column: 1 / span 2;
    grid-row: 3;
    display: block;
    text-align: center;
    line-height: 44px;
    width: 100%;
    min-height: 44px; padding: 0 16px;
    border: 0; border-radius: 999px;
    background: linear-gradient(180deg, #FFD685, #ffb44a);
    color: #2a1a05;
    font-size: 14px; font-weight: 900;
    letter-spacing: 0.04em;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(255,180,74,.25);
    transition: transform .15s ease, filter .15s ease;
}
.reward-cta:hover { transform: translateY(-1px); filter: brightness(1.05); }
.reward-cta:active { transform: scale(0.97); filter: brightness(0.92); }

/* 不可兑换:全宽 44px 灰条 */
.reward-disabled {
    grid-column: 1 / span 2;
    grid-row: 3;
    display: block;
    text-align: center;
    line-height: 44px;
    width: 100%;
    min-height: 44px; padding: 0 16px;
    border: 1px dashed rgba(255,255,255,.18);
    border-radius: 999px;
    background: rgba(255,255,255,.04);
    color: var(--text-muted);
    font-size: 13px; font-weight: 800;
}

/* 可兑换:淡金底 + 金色边框 */
.reward-row.affordable {
    border-color: rgba(255,214,133,.32);
    background:
        linear-gradient(180deg, rgba(255,214,133,.08), rgba(255,255,255,.04));
}

/* =========================================================
   2. 奖励-待领取/已领取 (#habit-redemptions)
   与商店完全同尺寸:40px 图标 / 14px 字 / 44px 按钮 / 122px 高
   ========================================================= */
#habit-redemptions .habit-card.pickup-item {
    display: grid;
    grid-template-columns: 32px 1fr;
    grid-template-rows: auto auto;
    column-gap: 0;
    row-gap: 10px;
    padding: 14px;
    min-height: 122px;
    position: relative;
}
/* col 1 状态点/小图标:32px 圆角盒 + 渐变,emoji 居中不"悬空" */
.pickup-item .pi-bullet {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 8px;
    font-size: 18px; line-height: 1;
    flex-shrink: 0;
    color: #FFD685;
    background: linear-gradient(135deg, rgba(255,214,133,.22), rgba(255,214,133,.06));
}
.pickup-item.done .pi-bullet {
    color: var(--primary-green);
    background: linear-gradient(135deg, rgba(119,224,182,.22), rgba(119,224,182,.06));
    opacity: .82;
}
.pickup-item .pi-info {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    overflow: hidden;
}
/* 标题:多行换行(用户要全文可见,不要省略号截短)
   最多 2 行,溢出用 -webkit-line-clamp 收尾 */
.pickup-item .pi-info h3 {
    margin: 0;
    font-size: 14px; font-weight: 800;
    color: var(--text-main);
    line-height: 1.3;
    overflow: hidden;
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
/* 日期:单行,长就收尾 */
.pickup-item .pi-time {
    margin: 2px 0 0;
    font-size: 11px;
    color: var(--text-muted);
    overflow: hidden;
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}
.pickup-item .pi-action {
    grid-column: 1 / span 2;
    grid-row: 2;
    display: block;
    text-align: center;
    line-height: 44px;
    width: 100%;
    min-height: 44px; padding: 0 16px;
    border: 0; border-radius: 999px;
    background: var(--primary-green);
    color: #102019;
    font-size: 14px; font-weight: 900;
    letter-spacing: 0.04em;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(119,224,182,.30);
    transition: transform .15s ease, filter .15s ease;
}
.pickup-item .pi-action:hover { transform: translateY(-1px); filter: brightness(1.05); }
.pickup-item .pi-action:active { transform: scale(0.97); filter: brightness(0.92); }
.pickup-item.done .pi-action { display: none; }
.pickup-item .pi-status {
    grid-column: 1 / span 2;
    grid-row: 2;
    display: block;
    text-align: center;
    line-height: 44px;
    width: 100%;
    min-height: 44px; padding: 0 16px;
    border-radius: 999px;
    background: rgba(119,224,182,.14);
    color: var(--primary-green);
    font-size: 13px; font-weight: 900;
}

/* 分组标题:撑满整行,带状态点(颜色 + 形状双指示) */
.pickup-group-title {
    grid-column: 1 / -1;
    display: flex; align-items: center; gap: 8px;
    margin: 0 0 6px;
    color: var(--text-muted);
    font-size: 12px; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.12em;
}
.pickup-group-title .status-dot {
    width: 8px; height: 8px; border-radius: 50%;
    box-shadow: 0 0 6px currentColor;
}
.pickup-group-title.pending { color: #FFD685; }
.pickup-group-title.pending .status-dot { background: #FFD685; }
.pickup-group-title.done-title { color: var(--primary-green); }
.pickup-group-title.done-title .status-dot { background: var(--primary-green); }
.pickup-group-title + .pickup-group-title { margin-top: 12px; }

/* =========================================================
   3. 「查看全部」按钮(grid 满宽)
   ========================================================= */
.view-all-wrap { grid-column: 1 / -1; }
.view-all-btn {
    width: 100%;
    display: inline-flex; align-items: center; justify-content: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 20px;
    margin-top: 4px;
    border: 1px solid rgba(126,182,255,.30);
    border-radius: 14px;
    background: rgba(126,182,255,.08);
    color: var(--accent, #7EB6FF);
    font-size: 14px; font-weight: 800;
    cursor: pointer;
    transition: background .15s ease, transform .15s ease;
}
.view-all-btn:hover { background: rgba(126,182,255,.18); }
.view-all-btn:active { transform: scale(0.97); }

/* =========================================================
   4. 列表弹窗(分页 16/页,4×4)
   ========================================================= */
.list-modal {
    position: fixed; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(7, 10, 22, .55);
    backdrop-filter: blur(6px);
    z-index: 100;
    padding: 24px;
    animation: list-modal-fade .2s ease-out;
}
@keyframes list-modal-fade { from { opacity: 0; } to { opacity: 1; } }
.list-modal-dialog {
    width: 100%; max-width: 960px;
    max-height: 88vh;
    display: flex; flex-direction: column;
    background: linear-gradient(180deg, rgba(20,28,52,.95), rgba(20,28,52,.85));
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 22px;
    box-shadow: 0 32px 80px rgba(0,0,0,.5);
    overflow: hidden;
    animation: modal-slide-in .3s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes modal-slide-in {
    from { opacity: 0; transform: translateY(12px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.list-modal-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255,255,255,.10);
}
.list-modal-head h2 {
    margin: 0; font-size: 17px; font-weight: 900;
    letter-spacing: -.02em; color: var(--text-main);
}
.list-modal-close {
    width: 36px; height: 36px;
    display: grid; place-items: center;
    background: rgba(255,255,255,.08);
    border: 0; border-radius: 50%;
    color: var(--text-main);
    font-size: 20px; line-height: 1; font-weight: 700;
    cursor: pointer;
    transition: background .15s ease, transform .15s ease;
}
.list-modal-close:hover { background: rgba(255,255,255,.16); }
.list-modal-close:active { transform: scale(0.92); }
.list-modal-body {
    padding: 20px;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.list-modal-body .habit-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
/* 弹窗宽度 < 760px: 3 列(模态内容区域窄于 4 列就拥挤) */
@media (max-width: 760px) {
    .list-modal-body .habit-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
/* 弹窗宽度 < 520px: 2 列(手机竖屏) */
@media (max-width: 520px) {
    .list-modal-body .habit-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
/* 奖励记录弹窗:分组标题(未领取/已领取)撑满整行 */
.list-modal-body .habit-grid > .pickup-group-title {
    grid-column: 1 / -1;
}
.list-modal-body .habit-grid > .pickup-group-title:first-child {
    margin-top: 0;
}
.list-modal-body .habit-grid > .pickup-group-title + .pickup-group-title {
    margin-top: 16px;
}

/* 弹窗分页(上一页 / 页码 / 下一页) */
.list-modal-pagination {
    display: flex; align-items: center; justify-content: center;
    gap: 14px;
    padding: 14px 20px;
    border-top: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.02);
    flex-shrink: 0;
}
.list-modal-pagination button {
    min-width: 96px; min-height: 40px;
    padding: 0 14px;
    border: 1px solid rgba(126,182,255,.30);
    border-radius: 10px;
    background: rgba(126,182,255,.10);
    color: var(--accent, #7EB6FF);
    font-size: 13px; font-weight: 800;
    cursor: pointer;
    transition: background .15s ease, transform .15s ease;
}
.list-modal-pagination button:hover:not(:disabled) { background: rgba(126,182,255,.20); }
.list-modal-pagination button:active:not(:disabled) { transform: scale(0.97); }
.list-modal-pagination button:disabled { opacity: 0.35; cursor: not-allowed; }
.list-modal-pagination .page-info {
    font-size: 13px; font-weight: 700;
    color: var(--text-muted);
    min-width: 160px; text-align: center;
}

/* =========================================================
   5. 移动端适配 (≤480px:卡片竖排)
   ========================================================= */
@media (max-width: 480px) {
    /* 保持桌面 2 行布局(不竖排),只缩小尺寸 */
    #habit-rewards .habit-card.reward-row,
    #habit-redemptions .habit-card.pickup-item {
        padding: 10px;
        column-gap: 8px;
        row-gap: 8px;
        min-height: 96px;
    }
    .reward-icon,
    .pickup-item .pi-bullet {
        width: 32px; height: 32px;
        border-radius: 8px;
    }
    .reward-icon svg { width: 16px; height: 16px; }
    .pickup-item .pi-bullet { font-size: 18px; }
    .pickup-item .pi-time { font-size: 10px; }
    .reward-name,
    .pickup-item .pi-info h3 {
        font-size: 12px;
    }

    /* 商店移动端:icon + ⭐N 一行,名字单独一行(更大),按钮第三行 */
    #habit-rewards .habit-card.reward-row {
        grid-template-columns: auto auto 1fr;
        grid-template-rows: auto auto auto;
        column-gap: 8px;
        row-gap: 10px;
        min-height: 0;
        padding: 12px 10px;
    }
    #habit-rewards .reward-row .reward-icon {
        grid-column: 1;
        grid-row: 1;
        justify-self: start;
    }
    #habit-rewards .reward-row .reward-cost {
        grid-column: 2;
        grid-row: 1;
        align-self: center;
        font-size: 12px;
        padding: 3px 9px;
    }
    #habit-rewards .reward-row .reward-name {
        grid-column: 1 / -1;
        grid-row: 2;
        font-size: 15px;
    }
    #habit-rewards .reward-row .reward-cta,
    #habit-rewards .reward-row .reward-disabled {
        grid-column: 1 / -1;
        grid-row: 3;
    }
    .reward-cta,
    .reward-disabled,
    .pickup-item .pi-action,
    .pickup-item .pi-status {
        min-height: 36px;
        line-height: 36px;
        font-size: 12px;
        letter-spacing: 0;
    }

    #habit-rewards .habit-card.reward-row.lift:hover,
    #habit-redemptions .habit-card.pickup-item.lift:hover {
        transform: none;
    }
}


/* 修复奖励记录被外层 grid 挤成窄列的问题 */
#habit-redemptions.habit-grid {
    grid-template-columns: 1fr !important;
}

#habit-redemptions .reward-history-items {
    grid-column: 1 / -1;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, minmax(160px, 1fr));
    gap: 10px;
}

@media (max-width: 960px) {
    #habit-redemptions .reward-history-items {
        grid-template-columns: repeat(3, minmax(150px, 1fr));
    }
}

@media (max-width: 640px) {
    #habit-redemptions .reward-history-items {
        grid-template-columns: repeat(2, minmax(140px, 1fr));
    }
}


/* 修复“全部奖励记录”弹窗：弹窗不在 #habit-redemptions 内，需要单独套用领取卡片布局 */
.list-modal-body .pickup-grid {
    grid-template-columns: 1fr !important;
}

.list-modal-body .pickup-grid > .reward-history-items {
    grid-column: 1 / -1 !important;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, minmax(160px, 1fr));
    gap: 10px;
}

.list-modal-body .pickup-item {
    display: grid !important;
    grid-template-columns: 32px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 10px;
    row-gap: 10px;
    align-items: center;
    padding: 14px;
    min-height: 122px;
    min-width: 0;
    position: relative;
}

.list-modal-body .pickup-item .pi-bullet {
    grid-column: 1;
    grid-row: 1;
}

.list-modal-body .pickup-item .pi-info {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    overflow: hidden;
}

.list-modal-body .pickup-item .pi-action,
.list-modal-body .pickup-item .pi-status {
    grid-column: 1 / span 2;
    grid-row: 2;
    width: 100%;
    min-width: 0;
    white-space: nowrap;
    writing-mode: horizontal-tb;
    text-orientation: mixed;
}

@media (max-width: 960px) {
    .list-modal-body .pickup-grid > .reward-history-items {
        grid-template-columns: repeat(3, minmax(150px, 1fr));
    }
}

@media (max-width: 640px) {
    .list-modal-body .pickup-grid > .reward-history-items {
        grid-template-columns: repeat(2, minmax(140px, 1fr));
    }
}