/* ================================================================
   RETENTION FEATURES — Shared Styles
   Daily challenge, level progress, streak hero, welcome-back,
   activity feed, onboarding steps 3-4, study groups, weekly bonus
   ================================================================ */

/* ── Level-Up Celebration ── */
.levelup-overlay {
    position: fixed; inset: 0; z-index: 99998;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,0.6); backdrop-filter: blur(4px);
    opacity: 0; transition: opacity 0.3s ease; cursor: pointer;
}
.levelup-overlay.show { opacity: 1; }
.levelup-overlay.out { opacity: 0; pointer-events: none; }
.levelup-card {
    background: var(--card, #fff); border-radius: 20px; padding: 40px 32px;
    text-align: center; max-width: 340px; width: 90%;
    box-shadow: 0 12px 48px rgba(67,97,238,0.3);
    transform: scale(0.8); animation: levelPop 0.4s cubic-bezier(.34,1.56,.64,1) forwards;
    position: relative; overflow: hidden;
}
.levelup-confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.confetti-particle {
    position: absolute; width: 8px; height: 8px; border-radius: 2px;
    top: 50%; animation: confettiFall 2s ease-out forwards;
}
.levelup-icon { font-size: 3rem; margin-bottom: 8px; }
.levelup-title { font-size: 1.6rem; font-weight: 700; color: var(--primary, #4361ee); margin-bottom: 4px; }
.levelup-level {
    font-size: 2.2rem; font-weight: 800;
    background: linear-gradient(135deg, #4361ee, #a855f7);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text; margin-bottom: 8px;
}
.levelup-desc { font-size: 0.85rem; color: var(--text-light, #6c757d); margin: 0; }

@keyframes levelPop { from { transform: scale(0.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes confettiFall {
    0% { transform: translateY(0) rotate(0) scale(1); opacity: 1; }
    100% { transform: translateY(-200px) translateX(var(--dx, 50px)) rotate(720deg) scale(0.3); opacity: 0; }
}
.confetti-particle:nth-child(odd) { --dx: -60px; }
.confetti-particle:nth-child(3n) { --dx: 80px; }
.confetti-particle:nth-child(4n) { --dx: -30px; border-radius: 50%; }

/* ── Weekly Bonus Toast ── */
.weekly-bonus-toast {
    position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px);
    background: linear-gradient(135deg, #4361ee, #6c5ce7); color: #fff;
    padding: 12px 24px; border-radius: 12px; font-size: 0.9rem; font-weight: 600;
    box-shadow: 0 4px 20px rgba(67,97,238,0.4); z-index: 9999;
    opacity: 0; transition: opacity 0.3s, transform 0.3s;
    white-space: nowrap; display: flex; align-items: center; gap: 8px;
}
.weekly-bonus-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.wbt-icon { font-size: 1.2em; }

/* ── Hub Stats: XP/Level Indicator ── */
.hub-stat-level { position: relative; }
.hub-xp-bar {
    width: 100%; height: 6px; background: var(--border, #e0e0e0);
    border-radius: 3px; margin-top: 6px; overflow: hidden;
}
.hub-xp-bar-fill {
    height: 100%; border-radius: 3px;
    background: linear-gradient(90deg, #4361ee, #a855f7);
    transition: width 0.5s ease;
}
.hub-xp-text {
    font-size: 0.65rem; color: var(--text-light, #6c757d);
    margin-top: 2px; text-align: center;
}

/* ── Hub Stats: Streak Hero Cell ── */
.hub-stat-streak-hero {
    min-width: 110px !important; position: relative;
}
.hub-stat-streak-hero .hub-stat-val { font-size: 1.5rem; }
.streak-flame { display: inline-block; vertical-align: middle; margin-right: 2px; }
.streak-flame-small { font-size: 1.2rem; }
.streak-flame-medium { font-size: 1.6rem; }
.streak-flame-large { font-size: 2rem; }
.streak-flame-animated {
    font-size: 2.2rem;
    animation: flamePulse 1.5s ease infinite;
}
@keyframes flamePulse {
    0%, 100% { transform: scale(1) rotate(-3deg); }
    50% { transform: scale(1.15) rotate(3deg); }
}
.streak-best {
    font-size: 0.68rem; color: var(--text-light, #6c757d);
    margin-top: 2px;
}

/* ── Daily Challenge Card ── */
.daily-challenge-card {
    background: var(--card, #fff); border-radius: 16px;
    box-shadow: var(--shadow, 0 2px 12px rgba(0,0,0,0.08));
    padding: 20px 24px; margin-bottom: 20px;
    border-left: 4px solid #4361ee; position: relative;
    max-width: 600px; margin-left: auto; margin-right: auto;
}
.dc-header {
    display: flex; align-items: center; gap: 10px; margin-bottom: 12px;
}
.dc-icon { font-size: 1.5rem; }
.dc-title { font-weight: 700; font-size: 1rem; color: var(--text, #222); }
.dc-reward {
    margin-left: auto; font-size: 0.78rem; font-weight: 600;
    color: #a855f7; display: flex; align-items: center; gap: 4px;
}
.dc-question {
    font-size: 0.95rem; color: var(--text, #222);
    line-height: 1.5; margin-bottom: 14px;
}
.dc-options { display: flex; flex-direction: column; gap: 8px; }
.dc-option {
    padding: 10px 16px; border-radius: 10px;
    border: 1.5px solid var(--border, #e0e0e0);
    background: var(--bg, #fff); cursor: pointer;
    font-size: 0.88rem; color: var(--text, #222);
    transition: all 0.15s ease; text-align: left;
}
.dc-option:hover { border-color: #4361ee; background: rgba(67,97,238,0.05); }
.dc-option.correct {
    border-color: #27ae60; background: rgba(39,174,96,0.1);
    color: #1a7a42; font-weight: 600;
}
.dc-option.wrong {
    border-color: #e74c3c; background: rgba(231,76,60,0.08);
    color: #c0392b; opacity: 0.7;
}
.dc-option.disabled { pointer-events: none; }
.dc-completed {
    text-align: center; padding: 16px; color: var(--text-light, #6c757d);
    font-size: 0.9rem;
}
.dc-completed-icon { font-size: 2rem; margin-bottom: 4px; }

/* ── Daily Challenge in Sidebar ── */
.sb-daily-challenge {
    margin: 12px 12px 4px; padding: 14px;
    background: var(--card, #fff); border-radius: 12px;
    border-left: 3px solid #4361ee;
    box-shadow: 0 1px 6px rgba(0,0,0,0.06);
}
.sb-daily-challenge .dc-header { margin-bottom: 8px; }
.sb-daily-challenge .dc-icon { font-size: 1.1rem; }
.sb-daily-challenge .dc-title { font-size: 0.82rem; }
.sb-daily-challenge .dc-reward { font-size: 0.68rem; }
.sb-daily-challenge .dc-question { font-size: 0.82rem; margin-bottom: 10px; }
.sb-daily-challenge .dc-option {
    padding: 7px 12px; font-size: 0.78rem; border-radius: 8px;
}
.sb-daily-challenge .dc-options { gap: 5px; }
.sb-daily-challenge .dc-completed { padding: 10px; font-size: 0.78rem; }
.sb-daily-challenge .dc-completed-icon { font-size: 1.5rem; }

/* ── Weekly Challenges ── */
.sb-weekly-challenges {
    margin: 8px 12px 4px; padding: 14px;
    background: var(--card, #fff); border-radius: 12px;
    border-left: 3px solid #f39c12;
    box-shadow: 0 1px 6px rgba(0,0,0,0.06);
}
.wc-header {
    display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
}
.wc-icon { font-size: 1.1rem; }
.wc-title { font-weight: 700; font-size: 0.82rem; color: var(--text, #222); }
.wc-reward {
    margin-left: auto; font-size: 0.68rem; font-weight: 600;
    color: #f39c12; display: flex; align-items: center; gap: 4px;
}
.wc-list { display: flex; flex-direction: column; gap: 8px; }
.wc-item {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 10px; border-radius: 8px;
    background: var(--bg, #f5f5f5); transition: all 0.2s;
}
.wc-item.done { background: rgba(6,214,160,0.08); }
.wc-item-icon { font-size: 1rem; flex-shrink: 0; }
.wc-item-info { flex: 1; min-width: 0; }
.wc-item-name { font-size: 0.78rem; font-weight: 700; color: var(--text, #222); }
.wc-item-desc { font-size: 0.68rem; color: var(--text-light, #888); }
.wc-item-bar {
    height: 4px; background: rgba(0,0,0,0.06); border-radius: 2px;
    margin-top: 4px; overflow: hidden;
}
.wc-item-bar-fill {
    height: 100%; background: linear-gradient(90deg, #f39c12, #e67e22);
    border-radius: 2px; transition: width 0.3s;
}
.wc-item.done .wc-item-bar-fill { background: #06d6a0; }
.wc-item-pct {
    font-size: 0.7rem; font-weight: 700; color: var(--text-light, #888);
    white-space: nowrap;
}
.wc-claim-btn {
    display: block; width: 100%; margin-top: 10px; padding: 10px;
    border: none; border-radius: 10px; cursor: pointer; font-family: inherit;
    background: linear-gradient(135deg, #f39c12, #e67e22);
    color: #fff; font-size: 0.82rem; font-weight: 700;
    transition: all 0.2s; text-align: center;
}
.wc-claim-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(243,156,18,0.3); }

/* ── Welcome Back Modal ── */
.wb-overlay {
    position: fixed; inset: 0; z-index: 99997;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,0.5); backdrop-filter: blur(3px);
    opacity: 0; transition: opacity 0.3s; pointer-events: none;
}
.wb-overlay.show { opacity: 1; pointer-events: auto; }
.wb-card {
    background: var(--card, #fff); border-radius: 20px; padding: 32px 28px;
    text-align: center; max-width: 380px; width: 90%;
    box-shadow: 0 12px 48px rgba(0,0,0,0.2);
    transform: scale(0.9); transition: transform 0.3s ease;
}
.wb-overlay.show .wb-card { transform: scale(1); }
.wb-emoji { font-size: 3rem; margin-bottom: 8px; }
.wb-title { font-size: 1.3rem; font-weight: 700; margin-bottom: 8px; color: var(--text, #222); }
.wb-text { font-size: 0.88rem; color: var(--text-light, #6c757d); line-height: 1.5; margin-bottom: 16px; }
.wb-streak-status {
    display: inline-block; padding: 6px 14px; border-radius: 8px;
    font-size: 0.82rem; font-weight: 600; margin-bottom: 16px;
}
.wb-streak-lost { background: rgba(231,76,60,0.1); color: #e74c3c; }
.wb-streak-frozen { background: rgba(96,165,250,0.1); color: #60a5fa; }
.wb-streak-maintained { background: rgba(39,174,96,0.1); color: #27ae60; }
.wb-btn {
    display: inline-block; padding: 12px 28px; border-radius: 12px;
    background: var(--primary, #4361ee); color: #fff; font-weight: 700;
    font-size: 0.95rem; border: none; cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
}
.wb-btn:hover { transform: scale(1.03); box-shadow: 0 4px 16px rgba(67,97,238,0.3); }
.wb-dismiss {
    display: block; margin-top: 10px; font-size: 0.78rem;
    color: var(--text-light, #6c757d); cursor: pointer;
    background: none; border: none;
}

/* ── Onboarding Steps 3-4 ── */
.onboard-tour-cards {
    display: flex; flex-direction: column; gap: 12px;
    margin: 16px 0;
}
.onboard-tour-card {
    display: flex; align-items: center; gap: 14px;
    background: var(--bg, #f8f9fa); border-radius: 12px;
    padding: 14px 16px; text-align: left;
}
.onboard-tour-icon { font-size: 1.8rem; flex-shrink: 0; }
.onboard-tour-info h4 { font-size: 0.9rem; margin: 0 0 2px; color: var(--text, #222); }
.onboard-tour-info p { font-size: 0.78rem; margin: 0; color: var(--text-light, #6c757d); }

.onboard-starter-reward {
    text-align: center; margin: 20px 0 12px;
}
.onboard-starter-gems {
    font-size: 2rem; font-weight: 800; color: #a855f7;
    margin-bottom: 8px;
}
.onboard-starter-stickers {
    display: flex; justify-content: center; gap: 12px;
    margin-top: 12px;
}
.onboard-starter-sticker {
    width: 48px; height: 48px; border-radius: 10px;
    background: var(--border, #e0e0e0);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem;
    animation: stickerPop 0.4s ease forwards;
    opacity: 0;
}
.onboard-starter-sticker:nth-child(1) { animation-delay: 0.2s; }
.onboard-starter-sticker:nth-child(2) { animation-delay: 0.4s; }
.onboard-starter-sticker:nth-child(3) { animation-delay: 0.6s; }
@keyframes stickerPop {
    from { transform: scale(0); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* ── Exam Coverage Bars ── */
.countdown-coverage {
    margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px;
    justify-content: center;
}
.cc-bar {
    display: flex; align-items: center; gap: 6px;
    font-size: 0.72rem; color: var(--text-light, #6c757d);
}
.cc-bar-label { font-weight: 600; min-width: 50px; text-align: right; }
.cc-bar-track {
    width: 80px; height: 6px; background: var(--border, #e0e0e0);
    border-radius: 3px; overflow: hidden;
}
.cc-bar-fill {
    height: 100%; border-radius: 3px;
    background: linear-gradient(90deg, #4361ee, #27ae60);
    transition: width 0.5s ease;
}
.cc-bar-pct { min-width: 28px; }

/* ── Activity Feed ── */
.activity-feed {
    max-width: 600px; margin: 0 auto 24px;
    background: var(--card, #fff); border-radius: 14px;
    box-shadow: var(--shadow, 0 2px 12px rgba(0,0,0,0.08));
    padding: 16px 20px;
}
.af-title {
    font-size: 0.82rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.04em; color: var(--text-light, #6c757d);
    margin-bottom: 10px; display: flex; align-items: center; gap: 6px;
}
.af-list {
    max-height: 240px; overflow-y: auto; display: flex;
    flex-direction: column; gap: 8px;
}
.af-item {
    display: flex; align-items: center; gap: 10px;
    font-size: 0.82rem; color: var(--text, #222);
    padding: 6px 0; border-bottom: 1px solid var(--border, #f0f0f0);
}
.af-item:last-child { border-bottom: none; }
.af-avatar {
    width: 28px; height: 28px; border-radius: 50%;
    object-fit: cover; flex-shrink: 0;
}
.af-avatar-placeholder {
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--primary, #4361ee); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.7rem; font-weight: 700; flex-shrink: 0;
}
.af-text { flex: 1; line-height: 1.3; }
.af-text strong { font-weight: 600; }
.af-time { font-size: 0.7rem; color: var(--text-light, #6c757d); flex-shrink: 0; }
.af-empty { text-align: center; font-size: 0.82rem; color: var(--text-light, #6c757d); padding: 12px 0; }

/* ── Study Groups Card ── */
.study-group-card {
    background: var(--card, #fff); border-radius: 12px;
    box-shadow: var(--shadow, 0 2px 12px rgba(0,0,0,0.08));
    padding: 14px 18px; text-align: center;
    border: 1.5px solid var(--border, #e0e0e0);
    margin-bottom: 16px;
}
.sg-name { font-weight: 700; font-size: 0.95rem; margin-bottom: 4px; }
.sg-members { font-size: 0.78rem; color: var(--text-light, #6c757d); margin-bottom: 8px; }
.sg-progress-bar {
    height: 8px; background: var(--border, #e0e0e0);
    border-radius: 4px; overflow: hidden; margin-bottom: 4px;
}
.sg-progress-fill {
    height: 100%; border-radius: 4px;
    background: linear-gradient(90deg, #4361ee, #27ae60);
    transition: width 0.5s;
}
.sg-progress-text { font-size: 0.7rem; color: var(--text-light, #6c757d); }
.sg-link {
    display: inline-block; margin-top: 8px; font-size: 0.78rem;
    color: var(--primary, #4361ee); font-weight: 600; text-decoration: none;
}

/* ── Forum Streak Badge ── */
.forum-streak-badge {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: 0.72rem; font-weight: 600; padding: 2px 6px;
    border-radius: 6px; background: rgba(245,158,11,0.12);
    color: #d97706; margin-left: 6px; vertical-align: middle;
}

/* ── Streak Reminder Modal (enhanced) ── */
.streak-urgent-overlay {
    position: fixed; inset: 0; z-index: 99996;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,0.5); backdrop-filter: blur(3px);
    opacity: 0; transition: opacity 0.3s; pointer-events: none;
}
.streak-urgent-overlay.show { opacity: 1; pointer-events: auto; }
.streak-urgent-card {
    background: var(--card, #fff); border-radius: 20px; padding: 28px 24px;
    text-align: center; max-width: 360px; width: 90%;
    box-shadow: 0 12px 40px rgba(231,76,60,0.3);
    border: 2px solid #e74c3c;
}
.streak-urgent-icon { font-size: 3rem; margin-bottom: 8px; }
.streak-urgent-title { font-size: 1.2rem; font-weight: 700; color: #e74c3c; margin-bottom: 6px; }
.streak-urgent-text { font-size: 0.85rem; color: var(--text-light, #6c757d); margin-bottom: 12px; }
.streak-urgent-freezes {
    font-size: 0.82rem; color: var(--text, #222); margin-bottom: 16px;
    display: flex; align-items: center; justify-content: center; gap: 6px;
}
.streak-urgent-btn {
    display: inline-block; padding: 12px 28px; border-radius: 12px;
    background: #e74c3c; color: #fff; font-weight: 700;
    font-size: 0.95rem; border: none; cursor: pointer;
    transition: transform 0.15s;
}
.streak-urgent-btn:hover { transform: scale(1.03); }

/* ── Sidebar streak color coding ── */
.sb-stat-val.streak.streak-green { color: #27ae60; }
.sb-stat-val.streak.streak-orange { color: #f39c12; }
.sb-stat-val.streak.streak-red { color: #e74c3c; }