/* ============================================================
   tem_question 签到页样式（移植自 问答签到系统前端页面.html）
   主题色：橙色系 #ff6b35
   响应式：宽度对齐首页 .container（1170px），桌面多列，移动单列
   ============================================================ */
.qn-checkin-page{
    margin:0 auto;padding:20px 15px;
    font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
}

/* ========== 顶部用户积分卡片 ========== */
.qn-checkin-page .user-card{
    background:linear-gradient(135deg,#ffecd2 0%,#fcb69f 100%);
    border-radius:20px;padding:28px 32px;
    box-shadow:0 10px 40px rgba(0,0,0,0.15);
    margin-bottom:20px;position:relative;overflow:hidden;
}
.qn-checkin-page .user-card::before{
    content:"";position:absolute;top:-50%;right:-20%;
    width:280px;height:280px;background:rgba(255,255,255,0.2);border-radius:50%;
}
.qn-checkin-page .user-card::after{
    content:"";position:absolute;bottom:-30%;left:-10%;
    width:200px;height:200px;background:rgba(255,255,255,0.12);border-radius:50%;
}
.qn-checkin-page .user-info{display:flex;align-items:center;position:relative;z-index:1;}
.qn-checkin-page .avatar{
    width:72px;height:72px;border-radius:50%;background:#fff;
    display:flex;align-items:center;justify-content:center;
    font-size:32px;border:3px solid #fff;
    box-shadow:0 4px 12px rgba(0,0,0,0.1);margin-right:18px;flex-shrink:0;
}
.qn-checkin-page .user-text h3{font-size:22px;margin-bottom:6px;color:#8b4513;}
.qn-checkin-page .user-level{
    display:inline-block;background:#fff;color:#ff6b35;
    font-size:13px;padding:3px 10px;border-radius:10px;font-weight:600;
}
.qn-checkin-page .user-sub{font-size:13px;color:#8b4513;opacity:0.8;margin-top:6px;}
.qn-checkin-page .user-sub a{color:#ff6b35;text-decoration:underline;}
.qn-checkin-page .stats-row{display:flex;margin-top:22px;position:relative;z-index:1;}
.qn-checkin-page .stat-item{
    flex:1;text-align:center;
    border-right:1px solid rgba(255,255,255,0.5);
}
.qn-checkin-page .stat-item:last-child{border-right:none;}
.qn-checkin-page .stat-value{font-size:26px;font-weight:700;color:#d2691e;}
.qn-checkin-page .stat-label{font-size:13px;color:#8b4513;opacity:0.8;margin-top:4px;}

/* ========== 连续签到奖励条 ========== */
.qn-checkin-page .streak-card{
    background:#fff;border-radius:20px;padding:24px 28px;
    box-shadow:0 10px 40px rgba(0,0,0,0.15);margin-bottom:20px;
}
.qn-checkin-page .streak-header{
    display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;
}
.qn-checkin-page .streak-title{font-size:17px;font-weight:700;color:#333;}
.qn-checkin-page .streak-badge{
    background:linear-gradient(135deg,#ff9a56,#ff6b35);color:#fff;
    font-size:14px;font-weight:600;padding:5px 14px;border-radius:12px;
    box-shadow:0 4px 10px rgba(255,107,53,0.3);
}
.qn-checkin-page .rewards-row{
    display:flex;justify-content:space-between;align-items:flex-start;
    position:relative;padding:12px 0;
}
.qn-checkin-page .rewards-row::before{
    content:"";position:absolute;top:36px;left:18px;right:18px;
    height:3px;background:#e0e0e0;z-index:0;border-radius:2px;
}
.qn-checkin-page .rewards-progress{
    position:absolute;top:36px;left:18px;height:3px;
    background:linear-gradient(90deg,#ff9a56,#ff6b35);
    z-index:1;border-radius:2px;transition:width 0.6s ease;
}
.qn-checkin-page .reward-item{
    display:flex;flex-direction:column;align-items:center;
    position:relative;z-index:2;width:calc(100% / 7);
}
.qn-checkin-page .reward-circle{
    width:40px;height:40px;border-radius:50%;
    background:#f5f5f5;border:3px solid #e0e0e0;
    display:flex;align-items:center;justify-content:center;
    font-size:12px;font-weight:700;color:#999;
    transition:all 0.3s ease;position:relative;
}
.qn-checkin-page .reward-item.completed .reward-circle{
    background:linear-gradient(135deg,#ff9a56,#ff6b35);
    border-color:#ff6b35;color:#fff;
    box-shadow:0 4px 12px rgba(255,107,53,0.4);
}
.qn-checkin-page .reward-item.today .reward-circle{
    border-color:#ff6b35;color:#ff6b35;
    animation:qnPulse 2s infinite;
}
.qn-checkin-page .reward-item.completed .reward-circle::after{
    content:"✓";position:absolute;top:-8px;right:-8px;
    width:20px;height:20px;background:#4caf50;color:#fff;
    font-size:12px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    border:2px solid #fff;
}
@keyframes qnPulse{
    0%,100%{box-shadow:0 0 0 0 rgba(255,107,53,0.5);}
    50%{box-shadow:0 0 0 8px rgba(255,107,53,0);}
}
.qn-checkin-page .reward-day{font-size:12px;color:#999;margin-top:8px;}
.qn-checkin-page .reward-item.completed .reward-day{color:#ff6b35;font-weight:600;}
.qn-checkin-page .reward-item.today .reward-day{color:#ff6b35;font-weight:600;}
.qn-checkin-page .reward-icon{font-size:16px;margin-top:4px;opacity:0.7;}
.qn-checkin-page .reward-item.completed .reward-icon{opacity:1;}
.qn-checkin-page .reward-tip{
    text-align:center;font-size:13px;color:#666;
    margin-top:16px;padding-top:14px;border-top:1px dashed #eee;
}
.qn-checkin-page .reward-tip strong{color:#ff6b35;}

/* ========== 签到大按钮 ========== */
.qn-checkin-page .checkin-btn-wrap{text-align:center;margin:28px 0 32px;}
.qn-checkin-page .checkin-btn{
    width:180px;height:180px;border-radius:50%;border:none;cursor:pointer;
    background:linear-gradient(135deg,#ff9a56 0%,#ff6b35 50%,#ee0979 100%);
    color:#fff;font-size:22px;font-weight:700;
    box-shadow:0 15px 40px rgba(255,107,53,0.5),
              inset 0 -6px 15px rgba(0,0,0,0.15),
              inset 0 6px 15px rgba(255,255,255,0.3);
    transition:all 0.2s ease;position:relative;overflow:hidden;
}
.qn-checkin-page .checkin-btn::before{
    content:"";position:absolute;top:-50%;left:-50%;
    width:200%;height:200%;
    background:radial-gradient(circle,rgba(255,255,255,0.3) 0%,transparent 60%);
    animation:qnRotate 6s linear infinite;
}
@keyframes qnRotate{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}
.qn-checkin-page .checkin-btn:hover:not(:disabled){
    transform:scale(1.05);
    box-shadow:0 20px 50px rgba(255,107,53,0.6),
              inset 0 -6px 15px rgba(0,0,0,0.15),
              inset 0 6px 15px rgba(255,255,255,0.3);
}
.qn-checkin-page .checkin-btn:active:not(:disabled){transform:scale(0.98);}
.qn-checkin-page .checkin-btn:disabled{
    background:linear-gradient(135deg,#a0a0a0,#808080);
    box-shadow:0 8px 20px rgba(0,0,0,0.2);cursor:not-allowed;
}
.qn-checkin-page .checkin-btn:disabled::before{animation:none;opacity:0.3;}
.qn-checkin-page .btn-inner{position:relative;z-index:1;}
.qn-checkin-page .btn-subtext{display:block;font-size:13px;font-weight:400;margin-top:6px;opacity:0.9;}

/* ========== 本月签到日历 ========== */
.qn-checkin-page .calendar-card{
    background:#fff;border-radius:20px;padding:24px 28px;
    box-shadow:0 10px 40px rgba(0,0,0,0.15);margin-bottom:20px;
}
.qn-checkin-page .calendar-header{
    display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;
}
.qn-checkin-page .calendar-title{font-size:17px;font-weight:700;}
.qn-checkin-page .calendar-month{color:#ff6b35;}
.qn-checkin-page .calendar-stats{display:flex;gap:18px;font-size:13px;}
.qn-checkin-page .calendar-stats span{color:#666;}
.qn-checkin-page .calendar-stats strong{color:#333;font-size:15px;}
.qn-checkin-page .weekdays,.qn-checkin-page .days{
    display:grid;grid-template-columns:repeat(7,1fr);gap:8px;
}
.qn-checkin-page .weekdays{margin-bottom:12px;}
.qn-checkin-page .weekday{text-align:center;font-size:13px;color:#999;font-weight:600;padding:8px 0;}
.qn-checkin-page .day-cell{
    aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;
    border-radius:12px;font-size:15px;position:relative;
    transition:all 0.2s ease;color:#333;
}
.qn-checkin-page .day-cell.empty{background:transparent;}
.qn-checkin-page .day-cell.normal{background:#f7f8fa;}
.qn-checkin-page .day-cell.checked{
    background:linear-gradient(135deg,#ff9a56,#ff6b35);
    color:#fff;font-weight:600;box-shadow:0 4px 10px rgba(255,107,53,0.3);
}
.qn-checkin-page .day-cell.checked::before{
    content:"✓";position:absolute;top:2px;right:4px;font-size:9px;opacity:0.9;
}
.qn-checkin-page .day-cell.today{border:2px solid #ff6b35;font-weight:700;}
.qn-checkin-page .day-cell.today.checked{border:2px solid #ee0979;}
.qn-checkin-page .calendar-legend{
    display:flex;justify-content:center;gap:24px;
    margin-top:18px;padding-top:16px;border-top:1px dashed #eee;
}
.qn-checkin-page .legend-item{display:flex;align-items:center;font-size:13px;color:#666;}
.qn-checkin-page .legend-dot{width:14px;height:14px;border-radius:4px;margin-right:6px;}
.qn-checkin-page .legend-dot.normal{background:#f7f8fa;border:1px solid #eee;}
.qn-checkin-page .legend-dot.checked{background:linear-gradient(135deg,#ff9a56,#ff6b35);}
.qn-checkin-page .legend-dot.today{border:2px solid #ff6b35;background:#fff;}

/* ========== 工具箱（桌面 4 列 / 平板 2 列 / 手机 2 列） ========== */
.qn-checkin-page .tools-card{
    background:#fff;border-radius:20px;padding:24px 28px;
    box-shadow:0 10px 40px rgba(0,0,0,0.15);margin-bottom:20px;
}
.qn-checkin-page .tools-title{
    font-size:17px;font-weight:700;margin-bottom:18px;
    display:flex;justify-content:space-between;align-items:center;
}
.qn-checkin-page .tools-sub{font-size:13px;color:#999;font-weight:400;}
.qn-checkin-page .tools-list{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.qn-checkin-page .tool-item{
    background:linear-gradient(135deg,#f5f7fa 0%,#e8ecf1 100%);
    border-radius:14px;padding:18px;cursor:pointer;
    transition:all 0.2s ease;position:relative;
}
.qn-checkin-page .tool-item:hover{transform:translateY(-3px);box-shadow:0 8px 20px rgba(0,0,0,0.1);}
.qn-checkin-page .tool-icon{font-size:30px;margin-bottom:10px;}
.qn-checkin-page .tool-name{font-size:15px;font-weight:600;color:#333;margin-bottom:4px;}
.qn-checkin-page .tool-desc{font-size:12px;color:#888;}
.qn-checkin-page .tool-count{
    position:absolute;top:10px;right:10px;
    background:#ff6b35;color:#fff;font-size:11px;
    padding:3px 8px;border-radius:10px;font-weight:600;
}

/* ========== 邀请入口 ========== */
.qn-checkin-page .mall-entry{
    background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);
    border-radius:20px;padding:22px 28px;color:#fff;
    display:flex;align-items:center;justify-content:space-between;
    cursor:pointer;box-shadow:0 10px 30px rgba(102,126,234,0.4);
    transition:all 0.2s ease;margin-bottom:20px;
}
.qn-checkin-page .mall-entry:hover{transform:translateY(-2px);}
.qn-checkin-page .mall-left h3{font-size:18px;margin-bottom:6px;}
.qn-checkin-page .mall-left p{font-size:13px;opacity:0.85;}
.qn-checkin-page .mall-arrow{font-size:26px;opacity:0.8;}

/* ========== 弹窗 Modal ========== */
.modal-mask{
    position:fixed;inset:0;background:rgba(0,0,0,0.6);
    display:none;align-items:center;justify-content:center;
    z-index:1000;padding:20px;
}
.modal-mask.show{display:flex;animation:qnFadeIn 0.3s ease;}
@keyframes qnFadeIn{from{opacity:0;}to{opacity:1;}}
.modal{
    background:#fff;border-radius:24px;width:100%;max-width:360px;
    position:relative;overflow:hidden;
    animation:qnSlideUp 0.4s cubic-bezier(0.175,0.885,0.32,1.275);
}
@keyframes qnSlideUp{
    from{transform:translateY(60px);opacity:0;}
    to{transform:translateY(0);opacity:1;}
}
.modal-header{
    background:linear-gradient(135deg,#ff9a56,#ff6b35);
    padding:40px 20px 30px;text-align:center;color:#fff;position:relative;
}
.coins-container{position:absolute;inset:0;overflow:hidden;pointer-events:none;}
.coin{position:absolute;font-size:22px;animation:qnCoinFall 1.5s ease-out forwards;opacity:0;}
@keyframes qnCoinFall{
    0%{transform:translateY(-40px) rotate(0deg);opacity:0;}
    20%{opacity:1;}
    100%{transform:translateY(180px) rotate(540deg);opacity:0;}
}
.modal-icon{font-size:56px;margin-bottom:10px;position:relative;z-index:2;animation:qnBounce 0.6s ease 0.2s;}
@keyframes qnBounce{0%,100%{transform:scale(1);}50%{transform:scale(1.2);}}
.modal-title{font-size:22px;font-weight:700;position:relative;z-index:2;}
.modal-subtitle{font-size:13px;opacity:0.9;margin-top:6px;position:relative;z-index:2;}
.modal-body{padding:25px 20px;}
.reward-list-title{font-size:13px;color:#999;text-align:center;margin-bottom:15px;}
.reward-list{background:#f8f9fb;border-radius:14px;padding:15px;}
.reward-list-item{
    display:flex;justify-content:space-between;align-items:center;
    padding:8px 0;border-bottom:1px dashed #e6e8eb;
}
.reward-list-item:last-child{border-bottom:none;}
.reward-list-name{display:flex;align-items:center;font-size:14px;color:#333;}
.reward-list-name .icon{font-size:18px;margin-right:8px;}
.reward-list-value{font-size:14px;font-weight:700;color:#ff6b35;}
.streak-info{
    text-align:center;margin-top:18px;padding-top:15px;
    border-top:1px dashed #eee;font-size:13px;color:#666;
}
.streak-info strong{color:#ff6b35;font-size:16px;}
.tomorrow-tip{margin-top:10px;font-size:12px;color:#888;text-align:center;}
.tomorrow-tip strong{color:#764ba2;}
.modal-btn{
    width:100%;padding:14px;border:none;border-radius:14px;
    background:linear-gradient(135deg,#ff9a56,#ff6b35);
    color:#fff;font-size:16px;font-weight:700;cursor:pointer;
    margin-top:20px;transition:all 0.2s ease;
    box-shadow:0 6px 16px rgba(255,107,53,0.35);
}
.modal-btn:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(255,107,53,0.45);}
.modal-btn.secondary{background:#f0f2f5;color:#666;box-shadow:none;margin-top:8px;}

/* ========== 补签弹窗 ========== */
.retro-days{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:15px 0;}
.retro-day{
    border:2px solid #e6e8eb;border-radius:12px;padding:12px 8px;
    text-align:center;cursor:pointer;transition:all 0.2s ease;
}
.retro-day:hover{border-color:#ff6b35;background:#fff8f5;}
.retro-day.disabled{opacity:0.4;cursor:not-allowed;}
.retro-day.selected{
    border-color:#ff6b35;background:linear-gradient(135deg,#fff4ef,#ffe6d9);
}
.retro-day .d{font-size:18px;font-weight:700;color:#333;}
.retro-day .m{font-size:11px;color:#999;margin-top:3px;}
.retro-cost{
    display:flex;justify-content:space-between;align-items:center;
    padding:12px 15px;background:#fff8f5;border-radius:12px;
    margin-top:10px;font-size:13px;
}
.retro-cost strong{color:#ff6b35;}

/* ========== Toast 提示 ========== */
.toast{
    position:fixed;top:30px;left:50%;
    transform:translateX(-50%) translateY(-100px);
    background:rgba(0,0,0,0.8);color:#fff;
    padding:10px 20px;border-radius:20px;font-size:14px;
    z-index:2000;transition:transform 0.3s ease;
    max-width:90%;text-align:center;
}
.toast.show{transform:translateX(-50%) translateY(0);}
.toast.success{background:rgba(76,175,80,0.95);}
.toast.error{background:rgba(244,67,54,0.95);}

/* ========== 响应式断点 ========== */
/* 平板：工具箱 2 列 */
@media (max-width:991px){
    .qn-checkin-page .user-card{padding:24px;}
    .qn-checkin-page .tools-list{grid-template-columns:repeat(2,1fr);}
}

/* 手机：单列，紧凑间距，按钮缩小 */
@media (max-width:767px){
    .qn-checkin-page{padding:14px;}
    .qn-checkin-page .user-card,.qn-checkin-page .streak-card,
    .qn-checkin-page .calendar-card,.qn-checkin-page .tools-card{padding:18px;border-radius:14px;}
    .qn-checkin-page .avatar{width:60px;height:60px;font-size:28px;margin-right:14px;}
    .qn-checkin-page .user-text h3{font-size:18px;}
    .qn-checkin-page .stat-value{font-size:22px;}
    .qn-checkin-page .checkin-btn{width:150px;height:150px;font-size:18px;}
    .qn-checkin-page .reward-circle{width:32px;height:32px;font-size:11px;}
    .qn-checkin-page .reward-day{font-size:11px;}
    .qn-checkin-page .calendar-title,.qn-checkin-page .streak-title,
    .qn-checkin-page .tools-title{font-size:16px;margin-bottom:14px;}
    .qn-checkin-page .day-cell{font-size:13px;border-radius:8px;}
    .qn-checkin-page .weekday{font-size:11px;padding:6px 0;}
    .qn-checkin-page .calendar-legend{gap:14px;}
    .qn-checkin-page .legend-item{font-size:11px;}
    .qn-checkin-page .mall-entry{padding:16px 18px;border-radius:14px;}
    .qn-checkin-page .mall-left h3{font-size:15px;}
    .qn-checkin-page .mall-left p{font-size:12px;}
}