/*
 * assets/css/style.css (v2.0)
 * بازطراحی کامل UI/UX توسط متخصص گیمیفیکیشن
 * تم جدید: "سفر قهرمان" (Hero's Journey) - جادویی، حماسی و آبنباتی (Juicy)
 */

/* --- 1. فونت و متغیرهای CSS --- */
@import url('https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap');
@import url('https://cdn.fontcdn.ir/Font/Persian/Vazirmatn/Vazirmatn[wght].css');

:root {
    /* (جدید) فونت‌ها */
    --font-family: 'Vazirmatn', sans-serif;
    --font-game: 'Fredoka One', cursive;
    /* فونت بازی برای اعداد و تیترها */

    /* (جدید) پالت رنگی پایه - تم "سفر قهرمان" (بنفش جادویی) */
    --primary-color: #8E44AD;
    /* بنفش اصلی (جادویی) */
    --primary-hover: #732d91;
    /* بنفش تیره‌تر */
    --primary-light: #F4ECF7;
    /* یاسی بسیار روشن (برای پس‌زمینه کارت‌های هایلایت) */

    /* پالت استاندارد (تغییر یافته برای تم جدید) */
    --secondary-color: #95a5a6;
    /* خاکستری (کمی روشن‌تر) */
    --secondary-hover: #7f8c8d;
    --success-color: #2ECC71;
    /* سبز شاداب */
    --success-hover: #25a25a;
    --danger-color: #E74C3C;
    /* قرمز شاداب */
    --danger-hover: #c0392b;
    --warning-color: #F39C12;
    /* نارنجی */
    --warning-hover: #d35400;

    /* (جدید) پالت رنگی گیمیفیکیشن (بسیار برجسته) */
    --xp-color: #F1C40F;
    /* طلایی درخشان (زرد) */
    --xp-gradient: linear-gradient(90deg, #F1C40F, #F39C12);
    --coin-color: #E67E22;
    /* نارنجی مسی (سکه) */
    --level-up-color: var(--primary-color);
    /* بنفش حماسی (برای لول آپ) */

    /* (جدید) پالت UI (بازطراحی شده) */
    --body-bg: linear-gradient(to top, #F9F3FD 0%, #FFFFFF 100%);
    /* گرادیانت ملایم یاسی */
    --card-bg: #ffffff;
    --text-color: #34495E;
    /* آبی سرمه‌ای (خواناتر) */
    --text-muted: #95a5a6;
    --border-color: #EAECEE;
    --border-radius-md: 20px;
    /* گردتر برای حس بازی (آبنباتی) */
    --border-radius-sm: 12px;
    --shadow-md: 0 4px 15px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 6px 20px rgba(0, 0, 0, 0.1);
}

/* --- 2. انیمیشن‌های کلیدی (تقویت شده) --- */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(241, 196, 15, 0.5);
    }

    70% {
        transform: scale(1.05);
        box-shadow: 0 0 0 10px rgba(241, 196, 15, 0);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(241, 196, 15, 0);
    }
}

@keyframes levelUpBounce {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-25px) scale(1.1);
    }

    60% {
        transform: translateY(-15px) scale(1.05);
    }
}

@keyframes shakeError {

    0%,
    100% {
        transform: translateX(0);
    }

    10%,
    30%,
    50%,
    70%,
    90% {
        transform: translateX(-6px);
    }

    20%,
    40%,
    60%,
    80% {
        transform: translateX(6px);
    }
}

@keyframes modalFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes modalContentScaleUp {
    from {
        opacity: 0;
        transform: translateY(50px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes rewardItemPopIn {
    0% {
        opacity: 0;
        transform: scale(0.5) rotate(-15deg);
    }

    80% {
        opacity: 1;
        transform: scale(1.1) rotate(5deg);
    }

    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

/* (جدید) انیمیشن فنری برای کارت‌ها */
@keyframes popIn {
    0% {
        opacity: 0;
        transform: scale(0.9);
    }

    80% {
        opacity: 1;
        transform: scale(1.05);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.animate-fade-in-up {
    animation: fadeInUp 0.5s ease-out forwards;
}

.animate-shake {
    animation: shakeError 0.5s ease-in-out;
}

/* --- 3. تنظیمات کلی و تایپوگرافی --- */
body {
    font-family: var(--font-family);
    direction: rtl;
    background: var(--body-bg);
    /* (جدید) اعمال پس‌زمینه گرادیانت */
    background-attachment: fixed;
    color: var(--text-color);
    margin: 0;
    line-height: 1.7;
    font-size: 16px;
}

.container {
    max-width: 1200px;
    margin: 2rem auto;
    padding: 0 1.5rem;
}

/* (جدید) اعمال فونت بازی به تیترها */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-game);
    font-weight: normal;
    /* فونت بازی خودش ضخیم است */
    line-height: 1.4;
    color: var(--text-color);
    letter-spacing: 0.5px;
}

/* (جدید) اعداد با فونت بازی */
.game-font-number {
    font-family: var(--font-game);
    font-weight: normal;
}

a {
    color: var(--primary-color);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: var(--primary-hover);
    text-decoration: underline;
}

/* --- 4. ساختار اصلی (هدر و فوتر) (بازطراحی شده) --- */
.main-header {
    background-color: var(--primary-color);
    /* (جدید) بنفش */
    padding: 1rem 2.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 4px solid rgba(0, 0, 0, 0.1);
    /* (جدید) حس سه‌بعدی */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 0;
    z-index: 900;
}

.logo a {
    font-family: var(--font-game);
    font-size: 1.8rem;
    /* (جدید) بزرگتر */
    font-weight: normal;
    color: #ffffff;
    /* (جدید) سفید */
    text-decoration: none;
    transition: transform 0.2s ease;
    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
    /* (جدید) سایه متن */
}

.logo a:hover {
    transform: scale(1.05) rotate(-1deg);
    text-decoration: none;
}

/* (جدید) بازطراحی منو */
.main-nav {
    display: flex;
    gap: 0.5rem;
}

.main-nav a {
    margin: 0;
    padding: 0.6rem 1.2rem;
    /* (جدید) شبیه دکمه */
    text-decoration: none;
    color: rgba(255, 255, 255, 0.8);
    /* (جدید) سفید */
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    border-radius: var(--border-radius-sm);
    border-bottom: 3px solid transparent;
}

.main-nav a.active,
.main-nav a:hover {
    color: #ffffff;
    /* (جدید) سفید */
    background-color: rgba(0, 0, 0, 0.15);
    /* (جدید) */
    border-bottom-color: var(--xp-color);
    /* (جدید) خط زیر طلایی */
    text-decoration: none;
    transform: translateY(-2px);
}

/* (جدید) بازطراحی اطلاعات کاربر */
.user-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: #ffffff;
    font-weight: 600;
}

.header-profile-pic {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--xp-color);
    /* (جدید) طلایی */
}

.user-info .profile-btn {
    color: #ffffff;
    font-weight: 600;
    text-decoration: none;
    padding: 0.4rem 0.8rem;
    border-radius: var(--border-radius-sm);
    transition: all 0.2s ease;
    background-color: rgba(0, 0, 0, 0.1);
}

.user-info .profile-btn:hover {
    background-color: rgba(0, 0, 0, 0.2);
    text-decoration: none;
}

.user-info .profile-btn.active {
    background-color: #ffffff;
    color: var(--primary-color);
}

.user-info .logout-btn {
    color: #ffcccc;
    font-size: 0.9rem;
    margin-right: 0.5rem;
}

.user-info .logout-btn:hover {
    color: #ffffff;
    text-decoration: underline;
}

.main-footer {
    text-align: center;
    padding: 1.5rem;
    margin-top: 2rem;
    color: var(--text-muted);
    font-size: 0.9rem;
    border-top: 1px solid var(--border-color);
}

/* --- 5. المان‌های عمومی (کارت، دکمه، فرم، هشدار) --- */

/* (جدید) کارت‌ها (Cards) - بازطراحی شده (آبنباتی) */
.card {
    background: var(--card-bg);
    border-radius: var(--border-radius-md);
    /* (جدید) گردتر */
    padding: 2rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04), 0 5px 20px rgba(0, 0, 0, 0.08);
    /* (جدید) سایه نرم سه‌بعدی */
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    animation: popIn 0.4s ease-out;
    /* (جدید) انیمیشن فنری */
    border: 1px solid #ffffff;
}

.card:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.06), 0 10px 30px rgba(0, 0, 0, 0.1);
    transform: translateY(-5px);
    /* (جدید) حرکت بیشتر */
}

.card h2,
.card h3 {
    margin-top: 0;
    margin-bottom: 1.5rem;
    color: var(--primary-hover);
    /* (جدید) بنفش تیره‌تر */
    padding-bottom: 10px;
    border-bottom: 3px dashed var(--primary-light);
    /* (جدید) */
    display: inline-block;
}

.card h4 {
    margin-top: 0;
    margin-bottom: 1rem;
    color: var(--text-color);
}

/* (جدید) دکمه‌ها (Buttons) - بازطراحی شده (سه‌بعدی و آبنباتی) */
.btn,
button[type="submit"] {
    background-color: var(--primary-color);
    color: white;
    padding: 0.8rem 1.6rem;
    border: none;
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    font-size: 1rem;
    font-weight: 700;
    /* (جدید) ضخیم‌تر */
    font-family: var(--font-family);
    transition: all 0.15s ease-out;
    text-decoration: none;
    display: inline-block;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    border-bottom: 4px solid var(--primary-hover);
    /* (جدید) سایه سه‌بعدی */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.btn:hover,
button[type="submit"]:hover {
    background-color: var(--primary-hover);
    transform: translateY(-2px);
    /* (جدید) حرکت کمتر */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    text-decoration: none;
    color: white;
}

.btn:active,
button[type="submit"]:active {
    transform: translateY(1px);
    /* (جدید) فشرده شدن */
    border-bottom-width: 2px;
    /* (جدید) */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.btn:disabled,
button:disabled {
    background-color: var(--secondary-color);
    border-bottom-color: var(--secondary-hover);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
    opacity: 0.7;
}

.btn-danger {
    background-color: var(--danger-color);
    border-bottom-color: var(--danger-hover);
}

.btn-danger:hover {
    background-color: var(--danger-hover);
}

.btn-success {
    background-color: var(--success-color);
    border-bottom-color: var(--success-hover);
}

.btn-success:hover {
    background-color: var(--success-hover);
}

.btn-warning {
    background-color: var(--warning-color);
    color: #fff;
    border-bottom-color: var(--warning-hover);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.btn-warning:hover {
    background-color: var(--warning-hover);
}

.btn-secondary {
    background-color: var(--secondary-color);
    border-bottom-color: var(--secondary-hover);
}

.btn-secondary:hover {
    background-color: var(--secondary-hover);
}


/* (جدید) فرم‌ها (Forms) - بازطراحی شده (نرم‌تر) */
.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 700;
    /* (جدید) */
    font-size: 0.95rem;
    color: var(--text-color);
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 0.9rem 1rem;
    /* (جدید) بزرگتر و نرم‌تر */
    border: 2px solid var(--border-color);
    /* (جدید) ضخیم‌تر */
    border-radius: var(--border-radius-sm);
    box-sizing: border-box;
    font-family: var(--font-family);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    background-color: #fcfdff;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px var(--primary-light);
    background-color: #fff;
}

.form-group small {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
    display: block;
}

/* هشدارها (Alerts) (بازطراحی شده) */
.alert {
    padding: 1.25rem;
    margin: 1rem 0;
    border-radius: var(--border-radius-sm);
    font-weight: 600;
    /* (جدید) */
    border: 2px solid transparent;
}

.alert-success {
    background-color: #EAFBF3;
    color: #25a25a;
    border-color: #2ECC71;
}

.alert-danger {
    background-color: #FDEDEB;
    color: #c0392b;
    border-color: #E74C3C;
}

.alert-warning {
    background-color: #FEF9E7;
    color: #d35400;
    border-color: #F39C12;
}

.alert-info {
    background-color: #EBF8FF;
    color: #0094e0;
    border-color: #00A9FF;
}

/* --- 6. صفحه ورود (Login Page) --- */
.login-page-body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: var(--primary-color);
    background-image: linear-gradient(135deg, var(--primary-color) 0%, #a569bd 100%);
    /* (جدید) تصویر پس‌زمینه فانتزی */
    background-image: url('https://www.transparenttextures.com/patterns/magic.png'), linear-gradient(135deg, var(--primary-color) 0%, #a569bd 100%);
}

.login-container {
    background: var(--card-bg);
    padding: 2.5rem 3rem;
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-lg);
    text-align: center;
    width: 100%;
    max-width: 420px;
    animation: fadeInUp 0.5s ease-out;
    border: 3px solid #fff;
}

.login-container h1 {
    margin-bottom: 2rem;
    color: var(--primary-color);
    font-size: 2.2rem;
}

.login-container .form-group {
    text-align: right;
}

.login-container button {
    width: 100%;
    padding: 1rem;
    font-size: 1.2rem;
    margin-top: 1rem;
}

.login-container .alert-danger {
    animation: shakeError 0.5s ease-in-out;
}

/* --- 7. داشبورد معلم (Teacher) --- */
.teacher-dashboard .dashboard-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.student-checkbox-list {
    max-height: 250px;
    overflow-y: auto;
    border: 2px solid var(--border-color);
    padding: 10px;
    border-radius: var(--border-radius-sm);
    background: #fcfdff;
}

.student-checkbox-list .student-item {
    display: block;
    margin-bottom: 5px;
    padding: 10px;
    border-radius: var(--border-radius-sm);
    transition: background-color 0.2s;
    cursor: pointer;
}

.student-checkbox-list .student-item:hover {
    background-color: var(--primary-light);
}

.student-checkbox-list .student-item input {
    width: auto;
    margin-left: 8px;
    accent-color: var(--primary-color);
    /* (جدید) */
}

#recent-awards-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

#recent-awards-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    border-bottom: 1px solid var(--border-color);
    transition: all 0.4s ease;
}

#recent-awards-list li:last-child {
    border-bottom: none;
}

.log-details strong {
    color: var(--primary-color);
    font-size: 1rem;
}

.log-details .log-notes {
    display: block;
    font-style: italic;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.btn-undo {
    background: var(--warning-color);
    color: #fff;
    border: none;
    padding: 0.3rem 0.7rem;
    font-size: 0.8rem;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    border-bottom: 2px solid var(--warning-hover);
}

.btn-undo:hover {
    background-color: var(--warning-hover);
    transform: scale(1.05);
}

.btn-undo:disabled {
    background-color: #aaa;
    border-bottom: none;
    cursor: not-allowed;
}

/* --- 8. داشبورد دانش‌آموز (Student) - تمرکز اصلی UX --- */

.student-dashboard .dashboard-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

/* (جدید) کارت قهرمان (Hero Card) - بازطراحی شده */
.hero-card {
    background: var(--card-bg);
    border-radius: var(--border-radius-md);
    padding: 2rem;
    margin-bottom: 1.5rem;
    box-shadow: var(--shadow-md);
    display: flex;
    align-items: center;
    gap: 2rem;
    /* (جدید) گرادیانت جذاب‌تر */
    background: linear-gradient(110deg, var(--primary-light) 0%, #ffffff 60%);
    border: 2px solid #fff;
}

.hero-avatar {
    flex-shrink: 0;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    border: 5px solid white;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.hero-info {
    flex-grow: 1;
}

.hero-info h3 {
    margin: 0 0 0.5rem 0;
    font-size: 2rem;
    /* (جدید) */
    border-bottom: none;
    color: var(--primary-hover);
}

.hero-stats {
    display: flex;
    gap: 2.5rem;
    margin-top: 0.5rem;
}

.hero-stats .stat-item {
    text-align: right;
}

.hero-stats .stat-item .stat-value {
    font-family: var(--font-game);
    /* (جدید) */
    font-size: 2.8rem;
    /* (جدید) */
    font-weight: normal;
    line-height: 1.2;
}

.hero-stats .stat-item .stat-label {
    font-size: 1rem;
    color: var(--text-muted);
    font-weight: 600;
}

.hero-stats .stat-item .stat-value.level-value {
    color: var(--level-up-color);
    transition: transform 0.3s ease;
}

.hero-stats .stat-item .stat-value.coin-value {
    color: var(--coin-color);
}

/* انیمیشن لول آپ */
.stat-item .stat-value.level-up-bounce {
    animation: levelUpBounce 0.8s;
}

/* نوار XP (بازطراحی شده) */
.xp-bar-container {
    background-color: #EAECEE;
    border-radius: 50px;
    height: 38px;
    /* (جدید) ضخیم‌تر */
    position: relative;
    overflow: hidden;
    border: 4px solid #fff;
    /* (جدید) */
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.xp-bar-progress {
    background: var(--xp-gradient);
    /* (جدید) طلایی */
    height: 100%;
    width: 0%;
    border-radius: 50px;
    transition: width 0.7s cubic-bezier(0.25, 1, 0.5, 1);
    box-shadow: 0 0 15px rgba(241, 196, 15, 0.5);
    /* (جدید) درخشش طلایی */
}

.xp-bar-text {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: #584108;
    /* (جدید) قهوه‌ای تیره */
    font-weight: 700;
    font-size: 1rem;
    font-family: var(--font-game);
    /* (جدید) */
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.7);
}

/* فید فعالیت‌ها و لیدربورد */
.activity-feed-container ul,
.leaderboard-container ul {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 300px;
    overflow-y: auto;
}

.activity-feed-container li,
.leaderboard-container li {
    padding: 0.85rem 0.5rem;
    border-bottom: 1px solid var(--border-color);
}

.activity-feed-container li:last-child,
.leaderboard-container li:last-child {
    border-bottom: none;
}

.activity-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.25rem;
}

.activity-name {
    font-weight: 600;
    font-size: 1.05rem;
}

/* (جدید) */
.activity-points {
    font-weight: 700;
    font-size: 1.1rem;
    font-family: var(--font-game);
}

/* (جدید) */
.activity-points.positive {
    color: var(--success-color);
}

.activity-points.negative {
    color: var(--danger-color);
}

.activity-time,
.activity-notes {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.leaderboard-container li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    /* (جدید) */
    font-size: 1.05rem;
}

.leaderboard-container li .xp-value {
    font-weight: 700;
    color: var(--xp-color);
    font-family: var(--font-game);
    /* (جدید) */
}

.leaderboard-container li.you {
    background-color: var(--primary-light);
    border-radius: var(--border-radius-sm);
    font-weight: 700;
    color: var(--primary-color);
    padding: 0.85rem 1rem;
    border: 2px solid var(--primary-color);
    /* (جدید) */
}

.leaderboard-container li.you .xp-value {
    color: var(--primary-color);
}

/* --- 9. نقشه گنج (Battle Pass Map) (بازطراحی شده پویا) --- */
.battle-pass-map-wrapper {
    overflow-x: auto;
    /* (جدید) اسکرول افقی فعال شد */
    overflow-y: hidden;
    padding: 2rem 1rem 1rem 1rem;
    background-color: #FFFAEC;
    border: 6px solid #d3a675;
    border-radius: var(--border-radius-md);
    margin-top: 1.5rem;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1) inset;
    background-image: url('https://www.transparenttextures.com/patterns/old-map.png');
    position: relative;
    /* (جدید) برای نگه داشتن آواتار */
}

/* (جدید) آواتار دانش‌آموز روی نقشه */
.battle-pass-avatar {
    position: absolute;
    bottom: 110px;
    /* (جدید) تنظیم ارتفاع از پایین (بالای آیکون مراحل) */
    right: 0%;
    /* <-- اصلاح شد (از left به right) */
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 4px solid var(--primary-color);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    z-index: 10;
    transform: translateX(50%);
    /* <-- اصلاح شد (از -50% به 50% برای جبران right) */
    transition: right 1.2s cubic-bezier(0.25, 1, 0.5, 1);
    /* <-- اصلاح شد (از left به right) */
    /* انیمیشن پرش برای جلب توجه */
    animation: avatarHop 1s ease-in-out infinite alternate 1.2s;
}

@keyframes avatarHop {
    from {
        transform: translateX(50%) translateY(0);
    }

    /* <-- اصلاح شد */
    to {
        transform: translateX(50%) translateY(-8px);
    }

    /* <-- اصلاح شد */
}

@keyframes avatarHop {
    from {
        transform: translateX(-50%) translateY(0);
    }

    to {
        transform: translateX(-50%) translateY(-8px);
    }
}


/* (جدید) خط مسیر اصلی (خاکستری) */
.battle-pass-track::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 29px;
    /* (جدید) دقیقاً وسط آیکون‌های مرحله */
    height: 8px;
    /* (جدید) ضخامت مسیر */
    background: #b0a89c;
    /* (جدید) رنگ سنگ (مسیر طی نشده) */
    border: 2px solid #8e8476;
    border-radius: 5px;
    z-index: 1;
}

/* (جدید) خط مسیر پیشرفت (طلایی) */
.battle-pass-path-progress {
    position: absolute;
    right: 0;
    /* <-- اصلاح شد (از left به right) */
    top: 29px;
    height: 8px;
    width: 0%;
    /* (جدید) نقطه شروع انیمیشن (توسط JS پر می‌شود) */
    background: var(--xp-gradient);
    /* (جدید) رنگ طلایی */
    border: 2px solid var(--warning-hover);
    border-radius: 5px;
    z-index: 2;
    /* (جدید) روی مسیر خاکستری */
    transition: width 1.2s cubic-bezier(0.25, 1, 0.5, 1);
    /* (جدید) انیمیشن پر شدن مسیر */
}


.battle-pass-track {
    display: flex;
    flex-wrap: nowrap;
    /* (مهم) جلوگیری از شکستن خط */
    padding-bottom: 1.5rem;
    min-width: max-content;
    /* (مهم) ایجاد نوار افقی بلند */
    gap: 0;
    /* (جدید) گپ حذف شد */
    position: relative;
    /* (جدید) برای نگه داشتن مسیر */
    align-items: flex-start;
    /* (جدید) همه چیز از بالا تراز شود */
}

.map-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    flex-shrink: 0;
    width: 180px;
    /* (جدید) عرض ثابت برای هر مرحله */
    padding: 0 1rem;
    /* (جدید) ایجاد فاصله داخلی */
    z-index: 3;
    /* (جدید) بالاتر از خطوط مسیر */
}

.map-step .step-icon {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    background-color: #b0a89c;
    /* سنگ */
    border: 4px solid #8e8476;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: white;
    font-size: 1.5rem;
    z-index: 2;
    transition: all 0.3s ease;
    font-family: var(--font-game);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    position: relative;
    /* (جدید) */
}

/* (جدید) کلاس .is-passed برای مراحل طی شده */
.map-step.is-passed .step-icon {
    background-color: var(--xp-color);
    /* (جدید) طلایی */
    border-color: var(--warning-hover);
}

.map-step.completed .step-icon {
    background-color: var(--success-color);
    border-color: var(--success-hover);
    transform: scale(1.1);
}

.map-step.current .step-icon {
    background-color: var(--xp-color);
    border-color: var(--warning-hover);
    transform: scale(1.2);
    box-shadow: 0 0 20px rgba(241, 196, 15, 0.7);
    animation: pulse 1.5s infinite;
}

.map-step .step-label {
    margin-top: 0.5rem;
    font-weight: 700;
    font-size: 1rem;
    color: #8e8476;
}

.map-step .step-xp {
    font-size: 0.9rem;
    color: #b0a89c;
    font-family: var(--font-game);
    font-weight: normal;
}

/* (جدید) روشن کردن متن مراحل طی شده */
.map-step.is-passed .step-label,
.map-step.is-passed .step-xp {
    color: var(--warning-hover);
    font-weight: 700;
}

.map-step.completed .step-label,
.map-step.current .step-label {
    color: var(--text-color);
}

.map-step.completed .step-xp,
.map-step.current .step-xp {
    color: var(--warning-hover);
}

.map-line {
    /* (مهم) این کلاس دیگر استفاده نمی‌شود، مسیر با ::before و .battle-pass-path-progress ساخته شد */
    display: none;
}

/* (جدید) بازطراحی کارت جایزه نقشه */
.reward-item {
    margin-top: 1.5rem;
    background: rgba(255, 255, 255, 0.7);
    border: 2px dashed #d3a675;
    border-radius: var(--border-radius-sm);
    padding: 0.5rem;
    width: 140px;
    /* (جدید) کمی بزرگتر */
    text-align: center;
    opacity: 0.7;
    transition: all 0.3s ease;
    filter: grayscale(80%);
    /* (جدید) در حالت قفل خاکستری باشد */
}

/* (جدید) روشن کردن جوایز طی شده */
.map-step.is-passed .reward-item {
    opacity: 1;
    filter: grayscale(0%);
}

.map-step.completed .reward-item,
.map-step.current .reward-item {
    opacity: 1;
    transform: scale(1.05);
    filter: grayscale(0%);
    /* (جدید) */
}

.map-step.completed .reward-item {
    border-style: solid;
    border-color: var(--success-color);
    background: #EAFBF3;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.map-step.current .reward-item {
    border-style: solid;
    border-color: var(--xp-color);
    background: #FEF9E7;
}

.reward-item img {
    width: 60px;
    height: 60px;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.reward-item:hover img {
    transform: scale(1.1);
}

.reward-item span {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    margin-top: 0.25rem;
    color: var(--text-color);
}

/* --- (پایان بخش ۹) --- */
/* --- 11. گالری جوایز و فروشگاه (Awards Grid / Store) --- */
.awards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1.5rem;
}

.award-card {
    background: var(--card-bg);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-md);
    text-align: center;
    padding: 1.5rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 2px solid #fff;
    /* (جدید) */
    animation: popIn 0.5s ease-out;
}

.award-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.award-card img {
    width: 100px;
    height: 100px;
    object-fit: contain;
    /* (جدید) contain بهتر است */
    border-radius: 50%;
    margin: 0 auto 1rem auto;
    background-color: #f8f9fa;
    border: 4px solid var(--primary-light);
}

.award-card h3 {
    margin: 0.5rem 0;
    font-size: 1.3rem;
    /* (جدید) */
    color: var(--primary-color);
    border-bottom: none;
}

.award-card p {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
    flex-grow: 1;
}

.award-card .award-date {
    font-size: 0.8rem;
    color: #aaa;
}

.award-card .btn {
    width: 100%;
    margin-top: 1rem;
    font-size: 1.1rem;
    /* (جدید) */
    font-family: var(--font-game);
    /* (جدید) */
    padding: 0.9rem 1.6rem;
}

/* نمایش موجودی سکه در فروشگاه */
#coin-balance-display {
    padding: 1rem 1.5rem;
    margin-bottom: 0;
    background-color: #FEF9E7;
    border: 2px solid var(--coin-color);
    box-shadow: 0 4px 10px rgba(230, 126, 34, 0.2);
    border-radius: var(--border-radius-sm);
}

#coin-balance-display strong {
    font-size: 1.3rem;
    color: var(--coin-color);
    font-family: var(--font-game);
    /* (جدید) */
}

#coin-balance-display span {
    animation: pulse 1.5s infinite;
    display: inline-block;
}

/* --- 12. لیدربورد (کامل) --- */
.tab-nav {
    display: flex;
    border-bottom: 3px solid var(--border-color);
    /* (جدید) */
    margin-bottom: 1.5rem;
}

.tab-link {
    padding: 0.75rem 1.5rem;
    cursor: pointer;
    font-size: 1.2rem;
    /* (جدید) */
    font-weight: normal;
    font-family: var(--font-game);
    /* (جدید) */
    color: var(--text-muted);
    border-bottom: 4px solid transparent;
    transform: translateY(3px);
    transition: all 0.2s ease;
}

.tab-link.active,
.tab-link:hover {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
}

.tab-panel {
    display: none;
}

.tab-panel.active {
    display: block;
    animation: fadeInUp 0.4s ease-out;
}

.ranking-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ranking-card {
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    padding: 1rem 1.5rem;
    margin-bottom: 1rem;
    transition: all 0.2s ease;
}

.ranking-card:hover {
    border-color: var(--primary-color);
    box-shadow: 0 4px 10px var(--primary-light);
}

.ranking-card.rank-1,
.ranking-card.rank-2,
.ranking-card.rank-3 {
    border-width: 2px;
}

.ranking-card.rank-1 {
    border-color: #F1C40F;
    background: #FEF9E7;
}

.ranking-card.rank-2 {
    border-color: #c0c0c0;
    background: #fcfcfc;
}

.ranking-card.rank-3 {
    border-color: #cd7f32;
    background: #fdf8f3;
}

.ranking-card.is-you {
    border-color: var(--primary-color);
    background: var(--primary-light);
    box-shadow: 0 0 10px var(--primary-light);
    transform: scale(1.02);
}

.rank-badge {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--primary-color);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    margin-left: 1.5rem;
    font-family: var(--font-game);
    /* (جدید) */
}

.ranking-card.rank-1 .rank-badge {
    background: #F1C40F;
    color: #333;
}

.ranking-card.rank-2 .rank-badge {
    background: #c0c0c0;
    color: #333;
}

.ranking-card.rank-3 .rank-badge {
    background: #cd7f32;
    color: #fff;
}

.team-rank-badge {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-family: var(--font-game);
    /* (جدید) */
    margin-left: 1.5rem;
    border: 3px solid #fff;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.rank-details {
    flex-grow: 1;
}

.rank-details .rank-name {
    font-size: 1.2rem;
    font-weight: 700;
}

.rank-details .rank-level {
    font-size: 0.9rem;
    color: var(--text-muted);
}

.rank-xp {
    flex-shrink: 0;
    font-size: 1.5rem;
    /* (جدید) */
    font-family: var(--font-game);
    /* (جدید) */
    color: var(--xp-color);
}

.ranking-card.is-you .rank-xp {
    color: var(--primary-color);
}

/* --- 13. مدیریت (Forms & Modals) --- */

.dashboard-columns {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 2rem;
}

.dashboard-columns[style*="1fr 1fr"] {
    grid-template-columns: 1fr 1fr;
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}

thead tr {
    text-align: right;
    border-bottom: 2px solid #ddd;
}

th,
td {
    padding: 12px;
    text-align: right;
    vertical-align: middle;
}

tbody tr {
    border-bottom: 1px solid var(--border-color);
}

tbody tr:hover {
    background-color: #fcfdff;
}

/* (جدید) دکمه‌های کوچک در جدول */
td .btn {
    font-size: 0.8rem;
    padding: 0.4rem 0.8rem;
    /* (جدید) */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border-bottom-width: 3px;
    /* (جدید) */
}

td .btn:active {
    transform: translateY(1px);
    border-bottom-width: 2px;
}

td form {
    display: inline-block;
}

/* جستجوی زنده */
.live-search-box {
    position: relative;
    margin-bottom: 1.5rem;
}

.live-search-box .search-icon {
    position: absolute;
    top: 50%;
    right: 1.2rem;
    /* (جدید) */
    transform: translateY(-50%);
    color: var(--text-muted);
    width: 20px;
    height: 20px;
    pointer-events: none;
}

.live-search-box input[type="text"] {
    padding: 0.9rem 1rem;
    padding-right: 3.5rem;
    /* (جدید) */
    border-radius: 50px;
    background-color: #fcfdff;
    border: 2px solid var(--border-color);
}

.live-search-box input[type="text"]:focus {
    background-color: #fff;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px var(--primary-light);
}

/* مودال (Modal) */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
    /* (جدید) */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.modal-overlay.visible {
    opacity: 1;
    visibility: visible;
}

.modal-content {
    background: white;
    padding: 2rem 2.5rem;
    border-radius: var(--border-radius-md);
    width: 100%;
    max-width: 500px;
    box-shadow: var(--shadow-lg);
    animation: modalContentScaleUp 0.4s ease-out;
    /* (جدید) */
}

.modal-buttons {
    margin-top: 1.5rem;
    text-align: left;
}

/* --- 14. داشبورد والدین (Parent) --- */

.student-profile-card {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.student-profile-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid white;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
}

.student-profile-info h3 {
    border: none;
    padding-bottom: 0;
    margin: 0 0 0.5rem 0;
}

.student-stats-bar-mini {
    display: flex;
    gap: 1.5rem;
}

.student-stats-bar-mini .stat-item {
    text-align: right;
}

.student-stats-bar-mini .stat-value {
    font-size: 1.8rem;
    /* (جدید) */
    font-family: var(--font-game);
    /* (جدید) */
    font-weight: normal;
}

.student-stats-bar-mini .stat-label {
    font-size: 0.9rem;
    color: var(--text-muted);
}

.parent-dashboard .home-activity-item {
    padding: 1rem 1.25rem;
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    transition: all 0.2s ease;
}

.parent-dashboard .home-activity-item:hover {
    background-color: #fcfdff;
}

.parent-dashboard .home-activity-item label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 1.1rem;
    font-weight: 600;
    /* (جدید) */
    cursor: pointer;
}

.parent-dashboard .home-activity-item label input {
    width: auto;
    margin-left: 0.75rem;
    accent-color: var(--primary-color);
    /* (جدید) */
}

.parent-dashboard .home-activity-item label .reward-badge {
    font-weight: 700;
    white-space: nowrap;
    font-family: var(--font-game);
    /* (جدید) */
    font-weight: normal;
}

.parent-dashboard .home-activity-item label .reward-badge .xp {
    color: var(--xp-color);
}

.parent-dashboard .home-activity-item label .reward-badge .coin {
    color: var(--coin-color);
    margin-right: 0.5rem;
}

/* حالت ثبت شده */
.parent-dashboard .home-activity-item.checked {
    background-color: #f8f9fa;
    border-color: var(--success-color);
    box-shadow: 0 0 5px rgba(46, 204, 113, 0.1);
}

.parent-dashboard .home-activity-item.checked label {
    cursor: not-allowed;
    color: var(--text-muted);
}

.parent-dashboard .home-activity-item.checked label .reward-badge {
    opacity: 0.6;
}

.parent-dashboard .home-activity-item small {
    margin-right: 2.2rem;
    color: var(--success-color);
    font-weight: 600;
}

/* --- 15. واکنش‌گرایی (Responsive) --- */
@media (max-width: 992px) {
    .main-header {
        flex-direction: column;
        gap: 1rem;
        padding: 1rem 1.5rem;
        /* (جدید) */
    }

    .main-nav {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.25rem;
        /* (جدید) */
    }
}

@media (max-width: 768px) {
    .container {
        margin-top: 1rem;
        padding: 0 1rem;
    }

    .dashboard-columns,
    .student-dashboard .dashboard-columns,
    .teacher-dashboard .dashboard-columns,
    .avatar-container {
        grid-template-columns: 1fr;
    }

    .main-nav a {
        padding: 0.5rem 0.75rem;
        font-size: 0.9rem;
    }

    .awards-grid {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    }

    .login-container {
        padding: 2rem 1.5rem;
    }

    /* (جدید) واکنش‌گرایی کارت قهرمان */
    .hero-card {
        flex-direction: column;
        text-align: center;
        background: linear-gradient(180deg, var(--primary-light) 0%, #ffffff 40%);
    }

    .hero-stats {
        justify-content: center;
        gap: 2rem;
    }

    .hero-stats .stat-item {
        text-align: center;
    }
}

/* --- 16. (جدید) مودال جشن Level Up (بازطراحی شده با تم جدید) --- */
.levelup-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(142, 68, 173, 0.85);
    /* (جدید) پس‌زمینه بنفش */
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    animation: modalFadeIn 0.3s ease-out forwards;
}

.levelup-modal-content {
    background: var(--card-bg);
    border-radius: 20px;
    width: 100%;
    max-width: 450px;
    margin: 1rem;
    text-align: center;
    padding: 2.5rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    border: 3px solid var(--xp-color);
    /* (جدید) طلایی */
    animation: modalContentScaleUp 0.4s ease-out 0.1s forwards;
    opacity: 0;
}

.levelup-modal-content h1 {
    font-size: 2.8rem;
    /* (جدید) */
    color: var(--level-up-color);
    margin-top: 0;
    margin-bottom: 0.5rem;
    text-shadow: 0 2px 5px rgba(142, 68, 173, 0.3);
}

.levelup-modal-content .level-number {
    font-size: 7rem;
    /* (جدید) */
    font-weight: normal;
    font-family: var(--font-game);
    /* (جدید) */
    color: var(--xp-color);
    line-height: 1.1;
    margin-bottom: 1rem;
    display: block;
    animation: levelUpBounce 1s ease-out 0.5s;
    text-shadow: 0 4px 10px rgba(241, 196, 15, 0.4);
    /* (جدید) */
}

.levelup-modal-content p {
    font-size: 1.1rem;
    color: var(--text-color);
    font-weight: 600;
    margin-bottom: 2rem;
}

.levelup-rewards-list {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem 0;
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.levelup-rewards-list li {
    background: var(--primary-light);
    border: 2px solid #fff;
    border-radius: var(--border-radius-md);
    padding: 1rem;
    width: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    opacity: 0;
    animation: rewardItemPopIn 0.5s ease-out forwards;
}

.levelup-rewards-list li img {
    width: 60px;
    height: 60px;
    object-fit: contain;
    margin-bottom: 0.5rem;
}

.levelup-rewards-list li span {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--primary-color);
}

.levelup-modal-content .btn {
    font-size: 1.2rem;
    padding: 1rem 2rem;
    font-family: var(--font-game);
    /* (جدید) */
    background-color: var(--success-color);
    border-bottom-color: var(--success-hover);
}

.levelup-modal-content .btn:hover {
    background-color: var(--success-hover);
}

/* --- 17. (جدید) استایل‌های پروفایل (بازطراحی شده) --- */
.profile-container {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 2.5rem;
    max-width: 900px;
    margin: 0 auto;
    background: none;
    padding: 0;
    box-shadow: none;
    border: none;
    animation: none;
}

.profile-container:hover {
    transform: none;
    box-shadow: none;
}

.profile-sidebar {
    text-align: center;
    position: sticky;
    top: 9.5rem;
    /* (جدید) هدر بزرگتر شده */
}

.profile-pic-wrapper {
    position: relative;
    width: 180px;
    height: 180px;
    margin: 0 auto 1.5rem auto;
}

.profile-pic {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 8px solid #fff;
    /* (جدید) */
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
    /* (جدید) */
}

.profile-pic-label {
    position: absolute;
    bottom: 10px;
    left: 10px;
    width: 45px;
    /* (جدید) */
    height: 45px;
    /* (جدید) */
    background: var(--primary-color);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 3px solid white;
    transition: all 0.2s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.profile-pic-label:hover {
    transform: scale(1.1);
    background: var(--primary-hover);
}

.profile-pic-label svg {
    width: 20px;
    height: 20px;
}

.profile-sidebar h3 {
    margin: 0;
    font-size: 1.8rem;
    /* (جدید) */
    color: var(--text-color);
    border-bottom: none;
}

.profile-sidebar p {
    font-size: 1.1rem;
    /* (جدید) */
    color: var(--text-muted);
    font-family: var(--font-game);
    /* (جدید) */
    font-weight: normal;
}

.profile-content .card {
    padding: 2.5rem;
}

@media (max-width: 768px) {
    .profile-container {
        grid-template-columns: 1fr;
    }

    .profile-sidebar {
        position: static;
        top: 0;
    }
}

/* (جدید) جداکننده آمار پروفایل */
.stats-divider {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-muted);
    border-bottom: 2px solid var(--border-color);
    margin: 1.5rem 0 1rem 0;
    padding-bottom: 5px;
}

.stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1rem;
    margin-bottom: 0.5rem;
}

.stat-row .stat-label {
    font-weight: 600;
}

.stat-row .stat-value {
    font-weight: 700;
    font-family: var(--font-game);
    font-size: 1.1rem;
}

.stat-value-level {
    color: var(--level-up-color);
}

.stat-value-coin {
    color: var(--coin-color);
}

/* --- 17. (جدید) استایل‌های ویرایشگر نقشه گنج (Manage Battle Pass) --- */

.map-editor-wrapper {
    overflow-x: auto;
    padding: 2rem 1.5rem;
    background-color: #f8f9fa;
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius-md);
    margin-top: 1.5rem;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.04) inset;
}

.map-editor-track {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    min-width: max-content;
}

.map-step-admin {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    width: 220px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-md);
    padding: 1.5rem;
    transition: all 0.2s ease;
}

.map-step-admin:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.map-step-admin .step-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--primary-color);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-family: var(--font-game);
    font-weight: normal;
    margin-bottom: 0.75rem;
    border: 3px solid var(--primary-light);
}

.map-step-admin .step-label {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-color);
    font-family: var(--font-game);
}

.map-step-admin .step-xp {
    font-size: 1rem;
    color: var(--xp-color);
    font-weight: 700;
    margin-bottom: 1rem;
    font-family: var(--font-game);
}

.reward-item-admin {
    width: 100%;
    background: #fdfdfd;
    border: 2px dashed var(--border-color);
    border-radius: var(--border-radius-sm);
    padding: 0.75rem;
    margin-bottom: 1.25rem;
    text-align: center;
    min-height: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.reward-item-admin.has-reward {
    border-style: solid;
    border-color: var(--success-color);
    background: #EAFBF3;
}

.reward-item-admin img {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.reward-item-admin span {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-color);
}

.reward-item-admin .no-reward {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-style: italic;
}

.step-actions {
    display: flex;
    justify-content: space-between;
    width: 100%;
    gap: 0.5rem;
    margin-top: auto;
}

.step-actions .btn {
    flex-grow: 1;
}

.map-line-admin {
    flex-grow: 1;
    align-self: center;
    min-width: 50px;
    height: 5px;
    border-bottom: 5px dashed #ccc;
}

.map-step-add {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    padding: 0 1rem;
}

.btn-add-new-level {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--success-color);
    border-bottom: 4px solid var(--success-hover);
    color: white;
    font-size: 3rem;
    font-weight: normal;
    line-height: 58px;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(46, 204, 113, 0.3);
    transition: all 0.2s ease;
}

.btn-add-new-level:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 15px rgba(46, 204, 113, 0.4);
}

.btn-add-new-level:active {
    transform: translateY(1px);
    border-bottom-width: 2px;
}

/* --- 18. (جدید) استایل‌های بازطراحی شده مدیریت تیم‌ها (Kanban View) --- */

.team-board-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding: 1.5rem 2rem;
    background: var(--card-bg);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-md);
}

.team-board-header h2 {
    margin: 0;
    border-bottom: none;
}

.team-board-actions .btn {
    font-size: 1rem;
    padding: 0.8rem 1.4rem;
}

.team-board-container {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    padding: 1.5rem;
    background-color: #F4F6F6;
    /* (جدید) */
    border-radius: var(--border-radius-md);
    min-height: 60vh;
    border: 1px solid var(--border-color);
}

.team-column {
    flex: 0 0 320px;
    width: 320px;
    background-color: #EBEDEF;
    /* (جدید) */
    border-radius: var(--border-radius-sm);
    /* (جدید) */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    max-height: 70vh;
}

.team-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #dadedf;
    flex-shrink: 0;
    background: #fff;
    border-radius: var(--border-radius-sm) var(--border-radius-sm) 0 0;
    border-top: 5px solid var(--secondary-color);
}

.team-header-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    /* (جدید) اجازه می‌دهد آیتم‌ها در صورت نیاز بشکنند و به خط بعدی بروند */
    flex-wrap: wrap;
    /* (جدید) به flex-item اجازه می‌دهد کوچک شود */
    min-width: 0;
}

.team-color-badge {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
}

.team-header h4 {
    margin: 0;
    font-size: 1.2rem;
    /* (جدید) */
    border-bottom: none;
    /* (جدید) اجازه شکستن کلمه در صورت طولانی بودن */
    white-space: normal;
    word-break: break-word;
    /* (جدید) برای اطمینان از کوچک شدن در فلکس */
    min-width: 0;
}

.team-header .team-member-count {
    font-size: 0.9rem;
    color: var(--text-muted);
    font-weight: 700;
    background: #f0f0f0;
    padding: 2px 10px;
    border-radius: 12px;
    margin-right: auto;
    margin-left: 0.5rem;
    flex-shrink: 0;
}

.team-header-actions .btn-delete-team {
    background: none;
    border: none;
    color: var(--danger-color);
    cursor: pointer;
    font-size: 1rem;
    padding: 5px;
    opacity: 0.5;
    transition: all 0.2s;
    box-shadow: none;
    border-bottom: none;
}

.btn-delete-team:hover {
    background-color: #f8d7da;
    opacity: 1;
    transform: scale(1.1);
}

.btn-delete-team:active {
    transform: none;
    border: none;
}

.team-column[data-team-id="0"] .team-header-actions {
    display: none;
}

.team-column[data-team-id="0"] .team-header {
    border-top-color: #aaa;
}


.team-member-list {
    padding: 1rem;
    overflow-y: auto;
    flex-grow: 1;
}

.student-card {
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid #dadedf;
    border-radius: var(--border-radius-sm);
    padding: 0.75rem 1rem;
    margin-bottom: 0.75rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    transition: all 0.2s ease;
}

.student-card:hover {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
    border-color: var(--primary-color);
}

.student-card .student-name {
    font-weight: 600;
    /* (جدید) */
    color: var(--text-color);
    font-size: 0.95rem;
}

.student-card .btn-move-student {
    background: none;
    border: none;
    padding: 5px;
    cursor: pointer;
    color: var(--text-muted);
    transition: all 0.2s;
    box-shadow: none;
    border-bottom: none;
}

.btn-move-student:hover {
    color: var(--primary-color);
    transform: scale(1.1);
}

.btn-move-student:active {
    transform: none;
    border: none;
}

.student-card .btn-move-student svg {
    width: 20px;
    height: 20px;
    pointer-events: none;
}

/* --- 19. (جدید) استایل‌های نمایش امتیاز در بُرد مدیریت تیم‌ها --- */

.team-total-xp {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--xp-color);
    background: #FEF9E7;
    padding: 3px 12px;
    border-radius: 12px;
    margin-right: auto;
    margin-left: 0.75rem;
    flex-shrink: 0;
    border: 1px solid #F1C40F;
    font-family: var(--font-game);
}

.team-column[data-team-id="0"] .team-total-xp {
    color: var(--text-muted);
    background: #f4f4f4;
    border-color: #e0e0e0;
}

.student-xp-badge {
    font-size: 0.9rem;
    /* (جدید) */
    font-weight: 700;
    color: var(--xp-color);
    background: #FEF9E7;
    padding: 2px 8px;
    border-radius: 6px;
    margin-left: 0.5rem;
    flex-shrink: 0;
    border: 1px solid #F1C40F;
    font-family: var(--font-game);
}

.student-card .student-name {
    flex-grow: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-left: 0.5rem;
}

/* --- 20. (جدید) استایل‌های انتخاب گروهی (Bulk Select) در مدیریت تیم‌ها --- */

.team-header-select-all {
    display: flex;
    align-items: center;
    padding: 0.5rem 1.25rem;
    border-top: 1px solid #dadedf;
    background-color: #f8f9fa;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
}

.team-header-select-all input[type="checkbox"] {
    margin-left: 0.5rem;
    width: 16px;
    height: 16px;
    accent-color: var(--primary-color);
}

.team-header-select-all:hover {
    background-color: #f1f3f5;
}

.student-card .student-select-checkbox {
    width: 20px;
    height: 20px;
    margin-left: 0.75rem;
    flex-shrink: 0;
    accent-color: var(--primary-color);
    cursor: pointer;
}

.student-card.selected {
    background-color: var(--primary-light);
    border-color: var(--primary-color);
    box-shadow: 0 4px 10px rgba(142, 68, 173, 0.1);
}

.student-card.selected .student-name {
    font-weight: 700;
    color: var(--primary-color);
}


/* --- (جدید) نوار شناور عملیات گروهی --- */
#bulk-action-bar {
    position: fixed;
    bottom: -100px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 600px;
    background: #34495E;
    /* (جدید) */
    color: white;
    padding: 1rem 1.5rem;
    border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
    box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.15);
    z-index: 950;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: bottom 0.3s ease-in-out;
}

#bulk-action-bar.visible {
    bottom: 0;
}

#bulk-action-bar .bulk-info span {
    font-weight: 700;
    font-size: 1.1rem;
    margin: 0 5px;
    font-family: var(--font-game);
    /* (جدید) */
    color: var(--xp-color);
    /* (جدید) */
}

#bulk-action-bar .bulk-actions {
    display: flex;
    gap: 1rem;
}

#bulk-action-bar .bulk-actions .btn {
    box-shadow: none;
    border-bottom-width: 3px;
}

#bulk-action-bar .bulk-actions .btn-primary {
    background-color: var(--xp-color);
    border-bottom-color: var(--warning-hover);
    color: #333;
    text-shadow: none;
}

#bulk-action-bar .bulk-actions .btn-primary:hover {
    background-color: var(--warning-hover);
}

/* --- 21. (جدید) استایل‌های بازطراحی شده داشبورد معلم (Classroom Grid) --- */

.teacher-dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--card-bg);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-md);
    padding: 1rem 2rem;
    margin-bottom: 1.5rem;
    border-top: 4px solid var(--primary-color);
}

.teacher-dashboard-header h2 {
    margin: 0;
    border: none;
    padding: 0;
}

.teacher-dashboard-header .live-search-box {
    margin-bottom: 0;
    width: 100%;
    max-width: 350px;
}

.student-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.student-award-card {
    position: relative;
    background: var(--card-bg);
    border: 2px solid #fff;
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-md);
    padding: 1.5rem;
    text-align: center;
    transition: all 0.2s ease-out;
    cursor: pointer;
    overflow: hidden;
}

.student-award-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary-color);
}

.student-card-checkbox {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 22px;
    height: 22px;
    z-index: 2;
    accent-color: var(--primary-color);
}

.student-card-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto 1rem auto;
    border: 4px solid #fff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.student-card-name {
    font-size: 1.2rem;
    /* (جدید) */
    font-weight: 700;
    color: var(--text-color);
    margin-bottom: 1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.student-card-stats {
    display: flex;
    justify-content: space-around;
    gap: 1rem;
    padding: 0.75rem;
    background: #fcfdff;
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--border-color);
}

.student-card-stats .stat-item {
    text-align: center;
    flex: 1;
}

.student-card-stats .stat-item .stat-value {
    font-size: 1.5rem;
    /* (جدید) */
    font-family: var(--font-game);
    /* (جدید) */
    font-weight: normal;
    display: block;
    line-height: 1.2;
}

.student-card-stats .stat-item .stat-label {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.student-card-stats .stat-item .level-value {
    color: var(--level-up-color);
}

.student-card-stats .stat-item .xp-value {
    color: var(--xp-color);
}

.student-award-card.selected {
    background-color: var(--primary-light);
    border-color: var(--primary-color);
    transform: translateY(0) scale(0.98);
}

.student-award-card.selected .student-card-name {
    color: var(--primary-hover);
}


/* --- استایل مودال اعطای XP --- */
#award-points-modal .modal-content {
    max-width: 550px;
}

.selected-students-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.5rem;
    margin-bottom: 1rem;
    max-height: 110px;
    overflow-y: auto;
    background: #f4f7f9;
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--border-color);
}

.student-badge {
    background: var(--primary-light);
    color: var(--primary-color);
    padding: 0.25rem 0.75rem;
    border-radius: 15px;
    font-size: 0.9rem;
    font-weight: 600;
    /* (جدید) */
    white-space: nowrap;
}

/* --- 22. (جدید) استایل‌های فرم اعطای سریع (داشبورد معلم v4.0) --- */

#selection-info-box {
    background-color: var(--primary-light);
    border: 2px solid var(--primary-color);
    /* (جدید) */
    border-radius: var(--border-radius-sm);
    padding: 0.75rem 1rem;
    margin-bottom: 1.5rem;
    text-align: center;
    font-weight: 700;
    /* (جدید) */
    font-size: 1rem;
    color: var(--primary-hover);
}

#selection-info-box #selection-count {
    font-weight: 700;
    font-size: 1.2rem;
    /* (جدید) */
    margin: 0 5px;
    font-family: var(--font-game);
    /* (جدید) */
}

.student-list-controls {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 1.5rem;
}

.student-list-controls .btn {
    font-size: 0.9rem;
    padding: 0.5rem 1rem;
}

.student-quick-list {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 500px;
    overflow-y: auto;
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius-md);
}

.student-quick-list li {
    padding: 0;
    border-bottom: 1px solid var(--border-color);
    transition: background-color 0.2s ease;
}

.student-quick-list li:last-child {
    border-bottom: none;
}

.student-quick-list li.selected {
    background-color: var(--primary-light);
    border-left: 4px solid var(--primary-color);
}

.student-quick-list li label {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    cursor: pointer;
    margin: 0;
    font-weight: 500;
}

.student-quick-list .student-list-checkbox {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    accent-color: var(--primary-color);
}

.student-list-avatar {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.student-list-info {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.student-list-name {
    font-weight: 600;
    font-size: 1rem;
    color: var(--text-color);
}

.student-quick-list li.selected .student-list-name {
    color: var(--primary-hover);
}

.student-list-stats {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.student-list-stats .game-font-number {
    /* (جدید) */
    font-family: var(--font-game);
    font-size: 0.9rem;
    color: var(--xp-color);
}

/* --- 23. (جدید) استایل‌های مودال مدیریت والدین (manage_students.php v3.0) --- */

.btn-manage-parent {
    background-color: var(--secondary-color);
    border-bottom-color: var(--secondary-hover);
}

.btn-manage-parent:hover {
    background-color: var(--secondary-hover);
}

#manage-parent-modal .tab-nav {
    margin-bottom: 0;
}

#manage-parent-modal .tab-panel {
    padding: 1.5rem 0.5rem 0.5rem 0.5rem;
}

/* --- 24. (جدید) استایل تگ‌های کاپیتان و فرمانده (manage_teams.php v2.3) --- */

.student-card .student-card-details {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex-grow: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-left: 0.5rem;
}

.student-rank-tag {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 6px;
    margin-top: 4px;
    display: inline-block;
}

.student-rank-tag.rank-captain {
    background-color: #FEF9E7;
    color: #b8860b;
    /* (جدید) طلایی تیره‌تر */
    border: 1px solid #F1C40F;
}

.student-rank-tag.rank-commander {
    background-color: #f8f9fa;
    color: #495057;
    border: 1px solid #dee2e6;
}

/* --- 25. (جدید) استایل‌های لیست اعضای تیم در لیدربورد دانش‌آموز --- */
/* (بازطراحی شده در بخش 25 بازطراحی شده) */

/* --- 25. (بازطراحی) استایل‌های آکاردئون و گرید لیدربورد تیمی --- */

.team-leaderboard-card {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    margin-bottom: 1rem;
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

.team-leaderboard-card .ranking-card {
    margin-bottom: 0;
    border: none;
    border-radius: 0;
    cursor: pointer;
    position: relative;
    transition: background-color 0.2s ease;
    padding-left: 3.5rem;
    box-shadow: none;
}

.team-leaderboard-card .ranking-card:hover {
    background-color: #fcfdff;
    box-shadow: none;
    transform: none;
}

.team-leaderboard-card .ranking-card.accordion-open {
    border-bottom: 1px solid var(--border-color);
}

.team-leaderboard-card:last-child .ranking-card:not(.accordion-open) {
    border-bottom: none;
}

.team-accordion-toggle-icon {
    position: absolute;
    left: 1.5rem;
    top: 50%;
    transform: translateY(-50%) rotate(0deg);
    font-size: 1.8rem;
    /* (جدید) */
    font-weight: normal;
    font-family: var(--font-game);
    /* (جدید) */
    color: var(--primary-color);
    transition: transform 0.3s ease;
}

.ranking-card.accordion-open .team-accordion-toggle-icon {
    transform: translateY(-50%) rotate(135deg);
    /* (جدید) چرخش 135 درجه */
}

.team-members-accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out;
    background: #fdfdfd;
}

.team-members-accordion-content.open {
    max-height: 1000px;
    transition: max-height 0.5s ease-in;
}

.team-member-grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 1rem;
    padding: 1.5rem;
}

.member-mini-card {
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    padding: 1rem 0.5rem;
    text-align: center;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03);
}

.member-mini-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.07);
}

.member-mini-card.is-you {
    background-color: var(--primary-light);
    border-color: var(--primary-color);
}

.member-avatar-mini {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    margin: 0 auto 0.5rem auto;
}

.member-info-mini {
    margin-bottom: 0.5rem;
    min-height: 45px;
}

.member-name-mini {
    font-weight: 600;
    font-size: 0.9rem;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 5px;
}

.member-mini-card.is-you .member-name-mini {
    color: var(--primary-hover);
}

.member-xp-mini {
    font-weight: 700;
    color: var(--xp-color);
    font-size: 1rem;
    /* (جدید) */
    display: block;
    font-family: var(--font-game);
    /* (جدید) */
}

/* --- 26. (جدید) استایل‌های بازطراحی شده "مدیریت چالش‌ها" (گرید کارت) --- */

.page-header-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.challenge-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.challenge-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-md);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    transition: all 0.2s ease;
}

.challenge-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.challenge-card-header {
    margin-bottom: 0.5rem;
}

.challenge-card-category {
    font-size: 0.85rem;
    font-weight: 600;
    /* (جدید) */
    color: var(--text-muted);
    text-transform: uppercase;
}

.challenge-card-title {
    font-size: 1.4rem;
    /* (جدید) */
    font-family: var(--font-game);
    /* (جدید) */
    font-weight: normal;
    color: var(--text-color);
    margin: 0.25rem 0 0 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.challenge-card-rewards {
    display: flex;
    gap: 1.5rem;
    margin: 1rem 0;
    padding: 1rem;
    background: #fcfdff;
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--border-color);
}

.challenge-card-rewards .reward-item {
    flex: 1;
}

.challenge-card-rewards .reward-item .value {
    font-size: 1.8rem;
    /* (جدید) */
    font-family: var(--font-game);
    /* (جدید) */
    font-weight: normal;
}

.challenge-card-rewards .reward-item .label {
    font-size: 0.9rem;
    color: var(--text-muted);
    display: block;
}

.challenge-card-rewards .reward-item .value.xp-value {
    color: var(--xp-color);
}

.challenge-card-rewards .reward-item .value.coin-value {
    color: var(--coin-color);
}

.challenge-card-actions {
    margin-top: auto;
    display: flex;
    gap: 0.5rem;
}

.challenge-card-actions .btn,
.challenge-card-actions form {
    flex-grow: 1;
}

.challenge-no-results {
    display: none;
    grid-column: 1 / -1;
}

/* --- 27. (جدید) استایل‌های بازطراحی شده "مدیریت فروشگاه" (بازارچه) --- */

.store-item-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.store-item-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-md);
    padding: 1.5rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    transition: all 0.2s ease;
}

.store-item-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.item-image {
    width: 100px;
    height: 100px;
    object-fit: contain;
    border-radius: 50%;
    margin: 0 auto 1rem auto;
    background-color: #f8f9fa;
    border: 4px solid #fff;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.05);
}

.item-name {
    font-size: 1.2rem;
    /* (جدید) */
    font-family: var(--font-game);
    /* (جدید) */
    font-weight: normal;
    color: var(--text-color);
    margin-bottom: 0.25rem;
    min-height: 44px;
}

.item-type {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 1rem;
    flex-grow: 1;
}

.store-item-card.is-library {
    border-style: dashed;
}

.store-item-card.is-library .btn-add-to-store {
    width: 100%;
    background-color: var(--success-color);
    border-bottom-color: var(--success-hover);
    font-family: var(--font-game);
    /* (جدید) */
    font-size: 1.1rem;
}

.store-item-card.is-library .btn-add-to-store:hover {
    background-color: var(--success-hover);
}

.item-price-tag {
    font-size: 1.8rem;
    /* (جدید) */
    font-family: var(--font-game);
    /* (جدید) */
    font-weight: normal;
    color: var(--coin-color);
    margin-bottom: 0.5rem;
}

.item-stock {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 1rem;
    flex-grow: 1;
}

.item-stock.limited {
    color: var(--danger-color);
    font-weight: 700;
}

.store-no-results {
    display: none;
    grid-column: 1 / -1;
}

/* --- 28. (جدید) استایل‌های بازطراحی شده "کتابخانه جوایز" (گرید کارت) --- */

.reward-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.reward-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-md);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    transition: all 0.2s ease;
    text-align: center;
}

.reward-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.reward-image-wrapper {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin: 0 auto 1rem auto;
    background-color: #f8f9fa;
    border: 4px solid #fff;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
}

.reward-image {
    width: 70px;
    height: 70px;
    object-fit: contain;
}

.reward-name {
    font-size: 1.3rem;
    /* (جدید) */
    font-family: var(--font-game);
    /* (جدید) */
    font-weight: normal;
    color: var(--text-color);
    margin-bottom: 0.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.reward-type {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}

.reward-description {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: 1rem;
    flex-grow: 1;
    min-height: 40px;
}

.reward-card-actions {
    margin-top: auto;
    display: flex;
    gap: 0.5rem;
}

.reward-card-actions .btn,
.reward-card-actions .delete-reward-form {
    flex-grow: 1;
}

.reward-no-results {
    display: none;
    grid-column: 1 / -1;
}

#modal-image-preview {
    width: 80px;
    height: 80px;
    object-fit: contain;
    border-radius: 50%;
    background: #f0f0f0;
    padding: 5px;
    border: 2px solid var(--border-color);
    margin: 0 auto 10px auto;
    display: none;
}

/* --- 29. (جدید) استایل صندوق پیام (داشبورد والدین) --- */
.inbox-list {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 400px;
    overflow-y: auto;
}

.inbox-item {
    background: #fcfdff;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    margin-bottom: 1rem;
    padding: 1rem 1.25rem;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03);
}

.inbox-item.type-announcement {
    /* (پیام معلم) */
    border-left: 5px solid var(--primary-color);
}

.inbox-item.type-notification {
    /* (رویداد سیستمی) */
    border-left: 5px solid var(--success-color);
}

.inbox-item.is-unread {
    background: var(--primary-light);
    border-color: var(--primary-color);
    border-left-width: 5px;
}

.inbox-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px dashed #eee;
    padding-bottom: 0.5rem;
    margin-bottom: 0.75rem;
}

.inbox-title {
    font-size: 1.2rem;
    /* (جدید) */
    font-family: var(--font-game);
    /* (جدید) */
    font-weight: normal;
}

.inbox-item.type-announcement .inbox-title {
    color: var(--primary-color);
}

.inbox-item.type-notification .inbox-title {
    color: var(--success-color);
}

.inbox-meta {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.inbox-body {
    font-size: 0.95rem;
    line-height: 1.7;
    white-space: pre-wrap;
}

.inbox-unread-dot {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 12px;
    /* (جدید) */
    height: 12px;
    /* (جدید) */
    background: var(--danger-color);
    border-radius: 50%;
    box-shadow: 0 0 8px var(--danger-color);
    /* (جدید) */
    animation: pulse 1.5s infinite;
}

/* (جدید) نشانگر اعلان در هدر */
.notification-badge {
    background: var(--danger-color);
    color: white;
    font-size: 0.75rem;
    padding: 1px 7px;
    border-radius: 50%;
    margin-right: 5px;
    font-family: var(--font-family);
    font-weight: 700;
    animation: pulse 1.5s infinite;
    box-shadow: 0 0 8px var(--danger-color);
}

/* --- 30. (جدید) استایل تنظیمات پروفایل والدین --- */
.settings-checkbox-item {
    display: block;
    background: #fcfdff;
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    padding: 1rem 1.25rem;
    margin-bottom: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.settings-checkbox-item:hover {
    background-color: #f8fbff;
    border-color: var(--primary-color);
}

.settings-checkbox-item label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
}

.settings-checkbox-item input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: var(--primary-color);
    margin-left: 0.75rem;
    flex-shrink: 0;
}

.settings-checkbox-item small {
    display: block;
    margin-right: 2.2rem;
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* --- 31. (جدید) استایل‌های تالار افتخارات (قفل) --- */

.award-card .award-lock-icon {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 2.5rem;
    color: #34495E;
    opacity: 0.8;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    z-index: 10;
}

.award-card[style*="grayscale(100%)"]:hover {
    filter: grayscale(80%) !important;
    opacity: 0.9 !important;
}

/* --- 31. (جدید) استایل‌های تالار افتخارات (قفل) --- */

.award-card .award-lock-icon {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 2.5rem;
    color: #34495E;
    opacity: 0.8;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    z-index: 10;
}

.award-card[style*="grayscale(100%)"]:hover {
    filter: grayscale(80%) !important;
    opacity: 0.9 !important;
}

/* --- 32. (جدید) استایل‌های مودال دریافت جایزه (گیمیفیکیشن) --- */

.reward-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(44, 62, 80, 0.85);
    /* --bg-color-dark با شفافیت */
    backdrop-filter: blur(10px) saturate(150%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.reward-modal-overlay.visible {
    opacity: 1;
    visibility: visible;
}

.reward-modal-content {
    background: linear-gradient(145deg, var(--card-bg, #ffffff) 0%, #f9f9ff 100%);
    border-radius: var(--border-radius-md, 20px);
    width: 90%;
    max-width: 480px;
    margin: 1rem;
    text-align: center;
    padding: 2.5rem;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.4), 0 0 0 5px rgba(255, 255, 255, 0.1);
    border: 3px solid var(--xp-color, #F1C40F);
    position: relative;
    overflow: hidden;
    transform: scale(0.8);
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.28), opacity 0.3s ease;
}

.reward-modal-overlay.visible .reward-modal-content {
    transform: scale(1);
    opacity: 1;
}

.reward-modal-header {
    background: linear-gradient(180deg, var(--primary-color, #8E44AD), var(--secondary-color, #8a2be2));
    color: white;
    padding: 0.5rem 1rem;
    margin: -2.5rem -2.5rem 1.5rem -2.5rem;
    border-bottom: 5px solid var(--xp-color, #F1C40F);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.reward-modal-header h2 {
    margin: 0;
    color: white;
    font-size: 2rem;
    font-family: var(--font-game, 'Vazirmatn');
}

.reward-modal-animation-area {
    min-height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    perspective: 800px;
}

#reward-modal-message {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-color, #34495E);
    margin-bottom: 2rem;
    line-height: 1.7;
}

#reward-modal-message strong {
    font-family: var(--font-game, 'Vazirmatn');
    font-size: 1.5rem;
}

/* --- انیمیشن‌های مودال --- */

/* انیمیشن دکمه دریافت جایزه */
@keyframes pulse-gold {
    0% {
        box-shadow: 0 0 0 0 rgba(241, 196, 15, 0.7);
    }

    70% {
        box-shadow: 0 0 0 15px rgba(241, 196, 15, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(241, 196, 15, 0);
    }
}

.btn-claim-reward.animate-pulse-btn {
    animation: pulse-gold 1.5s infinite;
    font-family: var(--font-game, 'Vazirmatn') !important;
    font-size: 1.1rem !important;
    background-color: var(--xp-color);
    border-color: #d35400;
    color: #333;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
}

/* انیمیشن چرخیدن سکه */
@keyframes coin-spin-animation {
    0% {
        transform: rotateY(0deg) scale(0.5);
        opacity: 0;
    }

    50% {
        transform: rotateY(180deg) scale(1.1);
        opacity: 1;
    }

    100% {
        transform: rotateY(360deg) scale(1);
        opacity: 1;
    }
}

.coin-spin-animation {
    font-size: 7rem;
    color: var(--coin-color, #E67E22);
    text-shadow: 0 5px 15px rgba(230, 126, 34, 0.5);
    animation: coin-spin-animation 1s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* انیمیشن نمایش نشان */
@keyframes badge-reveal-animation {
    0% {
        transform: scale(0.3) rotateZ(-30deg);
        opacity: 0;
        filter: blur(10px);
    }

    60% {
        transform: scale(1.1) rotateZ(5deg);
        opacity: 1;
        filter: blur(0);
    }

    100% {
        transform: scale(1) rotateZ(0deg);
        opacity: 1;
    }
}

.badge-reveal-animation {
    width: 120px;
    height: 120px;
    object-fit: contain;
    filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.3));
    animation: badge-reveal-animation 0.8s ease-out forwards;
}

/* انیمیشن نمایش جایزه عمومی */
@keyframes generic-reveal-animation {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.generic-reveal-animation {
    font-size: 7rem;
    animation: generic-reveal-animation 0.5s ease-out forwards;
}


/* --- ذرات Confetti (CSS-based) --- */
.confetti-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: -1;
}

.confetti {
    position: absolute;
    width: 10px;
    height: 10px;
    background-color: var(--primary-color);
    opacity: 0;
    animation: confetti-fall 5s ease-out infinite;
}

.confetti:nth-child(2) {
    background-color: var(--xp-color);
    animation-delay: -0.2s;
}

.confetti:nth-child(3) {
    background-color: var(--success-color);
    animation-delay: -0.4s;
}

.confetti:nth-child(4) {
    background-color: var(--accent-color);
    animation-delay: -0.6s;
}

/* ... (می‌توانید اینها را در JS بسازید) ... */

@keyframes confetti-fall {
    0% {
        transform: translateY(-100%) rotateZ(0deg);
        opacity: 1;
    }

    100% {
        transform: translateY(100vh) rotateZ(720deg);
        opacity: 0;
    }
}

/* --- استایل‌های Placeholder نقشه گنج (بازطراحی شده) --- */
.reward-item .placeholder-icon {
    font-size: 2.5rem;
    filter: grayscale(100%);
    opacity: 0.5;
}

.reward-item .placeholder-image {
    width: 50px;
    height: 50px;
    filter: grayscale(100%);
    opacity: 0.5;
}

.reward-item .placeholder-text {
    opacity: 0.7;
    font-weight: 600;
    color: #888;
}

.reward-item .claimed-reward-icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.reward-item .claimed-reward-text {
    font-weight: 600;
    color: var(--success-color);
}

/* --- 32. (بازطراحی) استایل‌های ویترین افتخارات (طرح کلکسیون) --- */

@keyframes shimmer {

    0%,
    100% {
        box-shadow: 0 0 15px rgba(241, 196, 15, 0.4);
    }

    50% {
        box-shadow: 0 0 25px rgba(241, 196, 15, 0.9);
    }
}

.award-collection-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 1.5rem;
    padding: 1.5rem;
    background: linear-gradient(135deg, #e0f7fa 0%, #e8eaf6 100%);
    /* گرادیانت آبی/بنفش روشن */
    border: 3px solid #b3e5fc;
    /* آبی آسمانی */
    border-radius: var(--border-radius-md);
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.1);
    min-height: 200px;
}

.award-collection-card {
    position: relative;
    text-align: center;
    background: #fff;
    border-radius: 16px;
    /* گردتر */
    padding: 1rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
}

.award-collection-card:hover {
    transform: translateY(-5px) scale(1.05);
    z-index: 10;
}

.award-card-image-wrapper {
    position: relative;
    width: 80px;
    height: 80px;
    margin: 0 auto 0.5rem auto;
    background: #f4f6f8;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid #e0e4e9;
}

.award-card-image {
    width: 70%;
    height: 70%;
    object-fit: contain;
}

.award-card-name {
    font-family: var(--font-family);
    /* استفاده از فونت اصلی خوانا */
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-color);
    margin: 0 0 0.25rem 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.award-card-status {
    font-size: 0.8rem;
    font-weight: 600;
}

/* --- حالت قفل شده (Locked) --- */
.award-collection-card.locked {
    background: #f8f9fa;
    opacity: 0.7;
}

.award-collection-card.locked:hover {
    opacity: 0.9;
}

.award-collection-card.locked .award-card-image-wrapper {
    border-color: #e9ecef;
}

.award-collection-card.locked .award-card-image {
    filter: grayscale(100%);
    opacity: 0.6;
}

.award-collection-card.locked .award-card-name {
    color: #90a4ae;
}

.award-collection-card.locked .award-card-status.locked {
    color: #b0bec5;
}

.award-collection-card.locked .award-card-lock-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2.5rem;
    color: rgba(0, 0, 0, 0.3);
    z-index: 10;
}

/* --- حالت باز شده (Unlocked) --- */
.award-collection-card.unlocked {
    border: 2px solid transparent;
    /* فضایی برای حاشیه درخشان */
    animation: shimmer 3s infinite alternate;
    /* انیمیشن درخشش */
}

.award-collection-card.unlocked .award-card-image-wrapper {
    border-color: #fff;
    background: linear-gradient(135deg, #fff8e1 0%, #ffecb3 100%);
    /* پس‌زمینه طلایی ملایم */
}

.award-collection-card.unlocked .award-card-name {
    color: var(--primary-hover);
}

.award-collection-card.unlocked .award-card-status.unlocked {
    color: var(--success-color);
}

/* --- (جدید) Tooltip برای توضیحات (طراحی مجدد) --- */
.award-collection-card .award-card-tooltip {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: 105%;
    /* بالای آیتم */
    left: 50%;
    transform: translateX(-50%);
    width: 240px;
    background-color: #fff;
    color: var(--text-color);
    padding: 1rem;
    border-radius: var(--border-radius-sm);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    z-index: 100;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    font-family: var(--font-family);
    text-align: right;
    border: 1px solid #eee;
}

.award-collection-card .award-card-tooltip::after {
    /* فلش مثلثی */
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 8px;
    border-style: solid;
    border-color: #fff transparent transparent transparent;
}

.award-collection-card .award-card-tooltip strong {
    font-family: var(--font-game);
    font-size: 1.1rem;
    color: var(--primary-color);
    display: block;
    margin-bottom: 0.5rem;
}

.award-collection-card .award-card-tooltip p {
    font-size: 0.9rem;
    margin: 0;
    color: var(--text-color);
    line-height: 1.6;
}

.award-collection-card:hover .award-card-tooltip {
    visibility: visible;
    opacity: 1;
}

/* =========================================
   بهینه‌سازی موبایل (Mobile Responsive Fixes)
   اضافه شده به انتهای فایل اصلی
   ========================================= */

/* 1. بهینه‌سازی تبلت و موبایل‌های بزرگ */
@media (max-width: 992px) {
    .main-header {
        flex-direction: column;
        gap: 1rem;
        padding: 1rem;
        height: auto;
    }

    .main-nav {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.5rem;
        width: 100%;
    }

    .main-nav a {
        font-size: 0.9rem;
        padding: 0.6rem 1rem;
        flex-grow: 1;
        /* دکمه‌ها کشیده شوند */
        text-align: center;
    }

    /* ستون‌های داشبورد در تبلت عمودی شوند */
    .dashboard-columns {
        grid-template-columns: 1fr !important;
        gap: 1.5rem;
    }
}

/* 2. بهینه‌سازی مخصوص موبایل (زیر 768 پیکسل) */
@media (max-width: 768px) {

    .container {
        padding: 0 1rem;
        margin-top: 1rem;
        max-width: 100%;
    }

    /* --- کارت‌ها و پنل‌ها --- */
    .card {
        padding: 1.25rem;
        /* کاهش حاشیه داخلی */
        margin-bottom: 1rem;
    }

    /* --- ستون‌بندی‌ها --- */
    /* تبدیل تمام گریدهای دو یا چند ستونه به تک ستون */
    .dashboard-columns,
    .profile-container,
    .teacher-dashboard .dashboard-columns,
    .student-dashboard .dashboard-columns {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }

    /* --- پروفایل کاربری --- */
    .profile-container {
        display: block !important;
        /* حذف گرید */
    }

    .profile-sidebar {
        position: static !important;
        /* حذف حالت چسبان */
        width: 100%;
        text-align: center;
        margin-bottom: 1.5rem;
        border-bottom: 2px solid var(--border-color);
        padding-bottom: 1.5rem;
    }

    .profile-pic-wrapper {
        margin: 0 auto 1rem auto;
    }

    /* --- کارت قهرمان (دانش‌آموز) --- */
    .hero-card {
        flex-direction: column;
        text-align: center;
        padding: 1.5rem;
    }

    .hero-stats {
        justify-content: center;
        gap: 1.5rem;
        flex-wrap: wrap;
    }

    .stat-value {
        font-size: 2rem;
        /* کوچک‌تر کردن اعداد بزرگ */
    }

    /* --- دکمه‌ها --- */
    .btn,
    button[type="submit"] {
        width: 100%;
        /* دکمه تمام عرض برای کلیک راحت */
        margin-bottom: 0.5rem;
        padding: 0.9rem;
        /* ناحیه کلیک بزرگتر */
    }

    /* دکمه‌های داخل جدول‌ها */
    td .btn {
        width: auto;
        /* در جدول دکمه‌ها کوچک بمانند */
        padding: 0.4rem 0.8rem;
        margin-bottom: 0;
    }

    /* --- جداول --- */
    /* اسکرول افقی برای جدول‌های عریض */
    div[style*="overflow-x: auto"] {
        -webkit-overflow-scrolling: touch;
        margin-bottom: 1rem;
        border: 1px solid #eee;
        border-radius: 8px;
    }

    table {
        font-size: 0.85rem;
    }

    th,
    td {
        padding: 8px;
        white-space: nowrap;
        /* جلوگیری از شکستن متن */
    }

    /* --- گریدها (لیست دانش‌آموزان، جوایز و...) --- */
    .awards-grid,
    .challenge-grid,
    .reward-grid,
    .store-item-grid,
    .student-grid,
    .team-member-grid-container {
        grid-template-columns: 1fr !important;
        /* تک ستون */
    }

    /* برای موبایل‌های کمی بزرگتر، دو ستون */
    @media (min-width: 480px) {

        .awards-grid,
        .reward-grid,
        .store-item-grid {
            grid-template-columns: 1fr 1fr !important;
        }
    }

    /* --- نقشه گنج --- */
    .battle-pass-map-wrapper {
        padding: 1rem 0.5rem;
    }

    .map-step {
        width: 140px;
        /* کوچک‌تر کردن مراحل */
    }

    /* --- مودال‌ها --- */
    .modal-content,
    .levelup-modal-content {
        width: 90% !important;
        padding: 1.5rem !important;
        margin: 1rem;
        max-height: 85vh;
        overflow-y: auto;
    }

    .levelup-modal-content h1 {
        font-size: 2rem;
    }

    .levelup-modal-content .level-number {
        font-size: 5rem;
    }

    /* --- فرم‌ها --- */
    .form-group input,
    .form-group select,
    .form-group textarea {
        font-size: 16px !important;
        /* جلوگیری از زوم خودکار آیفون */
    }

    /* --- نوار جستجو --- */
    .live-search-box input[type="text"] {
        width: 100%;
    }
}

/* =========================================
   استایل‌های منوی مدرن (Dropdown + Accordion)
   ========================================= */

/* تنظیمات پایه هدر برای موبایل */
.logo-container {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mobile-menu-btn {
    display: none;
    /* در دسکتاپ مخفی */
    background: none;
    border: none;
    color: white;
    font-size: 1.8rem;
    cursor: pointer;
    padding: 0;
}

/* --- استایل دسکتاپ (Dropdown) --- */
.nav-dropdown {
    position: relative;
    display: inline-block;
}

.nav-dropbtn {
    background: transparent;
    color: rgba(255, 255, 255, 0.9);
    padding: 0.6rem 1rem;
    font-size: 0.95rem;
    border: none;
    cursor: pointer;
    font-family: var(--font-family);
    font-weight: 600;
    border-radius: var(--border-radius-sm);
    transition: all 0.2s;
}

.nav-dropbtn:hover,
.nav-dropdown:hover .nav-dropbtn {
    background-color: rgba(255, 255, 255, 0.15);
    color: #fff;
}

.nav-dropdown-content {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    /* باز شدن به سمت چپ */
    background-color: #fff;
    min-width: 200px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    border-radius: var(--border-radius-sm);
    z-index: 1000;
    overflow: hidden;
    border: 2px solid var(--primary-light);
    animation: popIn 0.2s ease-out;
}

.nav-dropdown-content a {
    color: var(--text-color);
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    border-bottom: 1px solid #f0f0f0;
    font-size: 0.9rem;
    transition: all 0.2s;
}

.nav-dropdown-content a:hover {
    background-color: var(--primary-light);
    color: var(--primary-color);
    padding-right: 20px;
    /* افکت حرکت */
}

/* نمایش منو هنگام هاور در دسکتاپ */
@media (min-width: 993px) {
    .nav-dropdown:hover .nav-dropdown-content {
        display: block;
    }
}

/* --- استایل موبایل (Accordion) --- */
@media (max-width: 992px) {
    .mobile-menu-btn {
        display: block;
        /* نمایش دکمه همبرگری */
    }

    .main-nav {
        display: none;
        /* مخفی کردن منو در حالت عادی */
        width: 100%;
        flex-direction: column;
        background-color: #fff;
        position: absolute;
        top: 100%;
        left: 0;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        padding: 1rem;
        border-bottom: 4px solid var(--primary-color);
    }

    .main-nav.open {
        display: flex;
        /* نمایش وقتی کلاس open اضافه شود */
        animation: fadeInUp 0.3s ease-out;
    }

    /* لینک‌های عادی در موبایل */
    .main-nav>a,
    .nav-link {
        color: var(--text-color);
        padding: 1rem;
        width: 100%;
        text-align: right;
        border-bottom: 1px solid #eee;
        background: none !important;
        /* حذف استایل دسکتاپ */
    }

    /* دراپ‌داون‌ها در موبایل (آکاردئونی) */
    .nav-dropdown {
        width: 100%;
        display: block;
    }

    .nav-dropbtn {
        width: 100%;
        text-align: right;
        color: var(--text-color);
        padding: 1rem;
        border-bottom: 1px solid #eee;
        display: flex;
        justify-content: space-between;
    }

    .nav-dropbtn .arrow {
        transition: transform 0.3s;
    }

    /* محتوای آکاردئون */
    .nav-dropdown-content {
        position: static;
        /* خارج شدن از حالت شناور */
        display: none;
        /* مخفی */
        box-shadow: none;
        border: none;
        background-color: #f9f9f9;
        padding-right: 1rem;
        /* تورفتگی */
        width: 100%;
    }

    .nav-dropdown.active .nav-dropdown-content {
        display: block;
        /* نمایش وقتی فعال است */
    }

    .nav-dropdown.active .arrow {
        transform: rotate(180deg);
    }

    .nav-dropdown:hover .nav-dropdown-content {
        display: none;
        /* غیرفعال کردن هاور در موبایل */
    }

    /* باز کردن با کلیک در موبایل */
    .nav-dropdown.active .nav-dropdown-content {
        display: block;
    }
}

/* جلوگیری از زوم ناخواسته در آیفون هنگام تایپ */
input,
select,
textarea {
    font-size: 16px !important;
}

/* افزایش ارتفاع خط برای خوانایی بهتر */
body {
    line-height: 1.8;
}

/* =========================================
   2. نویگیشن بار پایین (Bottom Navigation)
   مخصوص دانش‌آموز و والدین در موبایل
   ========================================= */

.bottom-nav {
    display: none;
    /* در دسکتاپ مخفی */
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #fff;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    z-index: 999;
    padding: 0.5rem 0;
    padding-bottom: env(safe-area-inset-bottom);
    /* برای آیفون‌های جدید */
    border-top: 3px solid var(--primary-color);
}

.bottom-nav-items {
    display: flex;
    justify-content: space-around;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
}

.bottom-nav-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.75rem;
    font-weight: 600;
    width: 100%;
    padding: 5px;
    border-radius: 10px;
    transition: all 0.2s;
}

.bottom-nav-link svg {
    width: 24px;
    height: 24px;
    margin-bottom: 4px;
    fill: currentColor;
}

.bottom-nav-link.active {
    color: var(--primary-color);
    background-color: var(--primary-light);
}

/* ایجاد فضای خالی پایین صفحه برای اینکه محتوا زیر منو نرود */
@media (max-width: 768px) {
    body {
        padding-bottom: 80px;
    }

    .bottom-nav {
        display: block;
    }

    /* مخفی کردن منوی هدر اصلی در موبایل وقتی باتم نو داریم */
    .main-nav {
        display: none !important;
    }

    .mobile-menu-btn {
        display: none !important;
        /* دکمه همبرگری را هم مخفی کن */
    }

    /* اما برای معلم (که منوی پیچیده دارد) منوی همبرگری را نگه دار */
    body.role-teacher .bottom-nav {
        display: none;
    }

    body.role-teacher .main-nav {
        display: none;
    }

    /* با JS باز می‌شود */
    body.role-teacher .mobile-menu-btn {
        display: block !important;
    }

    body.role-teacher {
        padding-bottom: 0;
    }
}

/* =========================================
   3. تبدیل جداول به کارت (Responsive Tables)
   جادوی UX برای موبایل!
   ========================================= */

@media (max-width: 768px) {

    table,
    thead,
    tbody,
    th,
    td,
    tr {
        display: block;
    }

    /* مخفی کردن هدر جدول */
    thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    tr {
        background: #fff;
        border: 1px solid var(--border-color);
        border-radius: 15px;
        margin-bottom: 1rem;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
        padding: 10px;
    }

    td {
        border: none;
        position: relative;
        padding-right: 50% !important;
        /* فضا برای لیبل */
        text-align: left !important;
        padding-top: 10px;
        padding-bottom: 10px;
        border-bottom: 1px dashed #eee;
        min-height: 30px;
    }

    td:last-child {
        border-bottom: none;
    }

    /* استفاده از ویژگی data-label برای ساخت عنوان در موبایل */
    td:before {
        position: absolute;
        top: 10px;
        right: 10px;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
        font-weight: bold;
        color: var(--primary-color);
        content: attr(data-label);
        text-align: right;
    }

    /* استثنا برای دکمه‌ها و اکشن‌ها */
    td:last-child {
        padding-right: 10px !important;
        text-align: center !important;
        display: flex;
        gap: 5px;
        justify-content: center;
    }

    td:last-child:before {
        display: none;
    }
}

/* =========================================
   4. بهینه‌سازی‌های داشبورد و گریدها
   ========================================= */

@media (max-width: 992px) {

    .dashboard-columns,
    .teacher-dashboard .dashboard-columns,
    .student-dashboard .dashboard-columns {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }

    /* حذف حالت چسبان در موبایل */
    .teacher-dashboard .card[style*="sticky"] {
        position: static !important;
    }

    /* پروفایل در موبایل */
    .profile-container {
        grid-template-columns: 1fr;
    }

    .profile-sidebar {
        position: static;
        margin-bottom: 2rem;
    }
}

/* کارت‌های داشبورد دانش‌آموز */
.hero-card {
    flex-direction: column;
    text-align: center;
    padding: 1.5rem;
}

.hero-stats {
    justify-content: center;
    width: 100%;
    margin-top: 1rem;
}

.hero-avatar {
    margin: 0 auto;
}

/* نقشه گنج در موبایل */
.battle-pass-map-wrapper {
    padding: 1rem 0.5rem;
}

.battle-pass-track {
    padding-bottom: 2rem;
    /* فضای بیشتر برای اسکرول */
}

/* اطمینان از دیده شدن کامل مراحل */
.map-step {
    width: 140px;
    /* کمی کوچکتر در موبایل */
}

/* دکمه‌های بزرگتر برای لمس راحت‌تر */
.btn {
    min-height: 44px;
    /* استاندارد اپل */
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* مودال تمام صفحه در موبایل (Bottom Sheet Style) */
@media (max-width: 600px) {
    .modal-content {
        width: 100%;
        max-width: 100%;
        border-radius: 20px 20px 0 0;
        position: fixed;
        bottom: 0;
        left: 0;
        margin: 0;
        animation: slideUp 0.3s ease-out;
        max-height: 90vh;
        overflow-y: auto;
    }

    @keyframes slideUp {
        from {
            transform: translateY(100%);
        }

        to {
            transform: translateY(0);
        }
    }
}

/* assets/css/style.css */

/* کلاس کمکی برای نمایش المان‌ها فقط در موبایل/تبلت */
.mobile-only {
    display: none !important;
}

@media (max-width: 992px) {
    .mobile-only {
        display: block !important;
    }

    /* (اختیاری) حذف حالت چسبان در موبایل برای اینکه اسکرول راحت‌تر شود */
    .quick-award-form-container {
        position: static !important;
    }
}

/* --- استایل‌های صفحه نمودار پیشرفت (نسخه گیمیفیکیشن) --- */

.stat-card-hero {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem;
    background: linear-gradient(to right, #ffffff, #f9f9f9);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.stat-card-hero:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.stat-card-hero .stat-icon {
    font-size: 3rem;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.stat-card-hero .stat-content {
    display: flex;
    flex-direction: column;
}

.stat-card-hero .stat-label {
    font-size: 0.9rem;
    color: var(--text-muted);
    font-weight: bold;
}

.stat-card-hero .stat-value {
    font-size: 2rem;
    font-weight: normal;
    color: var(--text-color);
}

/* نگهدارنده نمودار برای واکنش‌گرا بودن */
.chart-wrapper-card {
    padding: 1.5rem;
    overflow: hidden;
    /* جلوگیری از بیرون زدگی */
}

.chart-header {
    margin-bottom: 1.5rem;
    text-align: center;
}

.chart-header h3 {
    margin-bottom: 0.2rem;
    color: var(--primary-hover);
}

.chart-header small {
    color: var(--text-muted);
}

.chart-container-responsive {
    position: relative;
    width: 100%;
    /* ارتفاع پیش‌فرض برای دسکتاپ */
    height: 400px;
}

/* تنظیمات موبایل ویو */
@media (max-width: 768px) {
    .stat-card-hero {
        flex-direction: row;
        /* در موبایل هم افقی بماند بهتر است */
        justify-content: center;
        text-align: left;
    }

    .chart-container-responsive {
        /* در موبایل ارتفاع را بیشتر می‌کنیم تا نمودار فشرده نشود */
        height: 300px;
    }

    .chart-header h3 {
        font-size: 1.3rem;
    }
}

/* --- استایل‌های جدید داشبورد والدین (نسخه 5.0) --- */

/* 1. سوییچر دانش‌آموزان (تب‌های بالا) */
.student-switcher {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 10px 5px;
    margin-bottom: 20px;
    scrollbar-width: none;
    /* مخفی کردن اسکرول بار */
}

.student-switcher::-webkit-scrollbar {
    display: none;
}

.student-switch-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 2px solid #eee;
    border-radius: 50px;
    padding: 5px 15px 5px 5px;
    font-family: var(--font-family);
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
    transition: all 0.3s ease;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.student-switch-btn img {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fff;
}

.student-switch-btn.active {
    background: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
    box-shadow: 0 4px 10px rgba(142, 68, 173, 0.3);
    transform: scale(1.05);
}

.switcher-badge {
    background: var(--danger-color);
    color: white;
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: 10px;
    margin-right: 5px;
}

/* 2. کارت‌های آمار (Hero Stats) */
.hero-stats-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 20px;
}

.hero-stat-card {
    background: linear-gradient(145deg, #ffffff, #f5f7fa);
    border-radius: 15px;
    padding: 15px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    border: 1px solid #fff;
    position: relative;
    overflow: hidden;
}

.hero-stat-card .icon {
    font-size: 1.5rem;
    margin-bottom: 5px;
}

.hero-stat-card .value {
    font-size: 1.4rem;
    font-weight: bold;
    display: block;
}

.hero-stat-card .label {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.hero-stat-card.level-card .value {
    color: var(--primary-color);
}

.hero-stat-card.xp-card .value {
    color: var(--warning-color);
}

.hero-stat-card.coin-card .value {
    color: var(--coin-color);
}

/* 3. گرید چالش‌های لمسی (Touch Cards) */
.challenges-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    /* واکنش‌گرا */
    gap: 15px;
    padding-bottom: 80px;
    /* فضا برای دکمه شناور */
}

.challenge-touch-card {
    display: block;
    background: #fff;
    border: 2px solid #e0e0e0;
    border-radius: 15px;
    padding: 15px;
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
    overflow: hidden;
}

.challenge-touch-card:active {
    transform: scale(0.98);
}

/* حالت انتخاب شده */
.challenge-touch-card input:checked+.card-content {
    opacity: 0.5;
}

.challenge-touch-card.completed {
    background: #f0fdf4;
    border-color: var(--success-color);
    cursor: default;
}

.challenge-touch-card .card-content {
    display: flex;
    align-items: center;
    gap: 15px;
}

.challenge-touch-card .card-icon {
    font-size: 1.8rem;
    background: #f9f9f9;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.challenge-touch-card .activity-name {
    font-weight: bold;
    font-size: 1rem;
    display: block;
    margin-bottom: 5px;
}

.challenge-touch-card .rewards span {
    font-size: 0.85rem;
    background: #eee;
    padding: 2px 8px;
    border-radius: 8px;
    margin-left: 5px;
    font-weight: bold;
}

.challenge-touch-card .rewards .xp {
    color: var(--warning-color);
    background: #fff8e1;
}

.challenge-touch-card .rewards .coin {
    color: var(--coin-color);
    background: #fff3e0;
}

.completed-overlay {
    position: absolute;
    top: 10px;
    left: 10px;
    background: var(--success-color);
    color: white;
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: bold;
}

/* 4. دکمه شناور (Floating Action Button) */
.floating-action-bar {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 600px;
    z-index: 100;
    background: rgba(255, 255, 255, 0.9);
    padding: 10px;
    border-radius: 20px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(5px);
}

/* 5. گرید کوله‌پشتی (Inventory) */
.inventory-responsive-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    /* کوچک‌تر برای موبایل */
    gap: 10px;
}

.inventory-item {
    background: #f9f9f9;
    border: 1px solid #eee;
    border-radius: 12px;
    padding: 10px;
    text-align: center;
    position: relative;
}

.inventory-item.owned {
    background: #fff;
    border-color: var(--success-color);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.inventory-item.locked {
    opacity: 0.6;
    filter: grayscale(1);
}

.inventory-item img {
    width: 50px;
    height: 50px;
    object-fit: contain;
    margin-bottom: 8px;
}

.inventory-item .name {
    display: block;
    font-size: 0.8rem;
    font-weight: bold;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.inventory-item .status {
    font-size: 0.7rem;
    color: #888;
}

/* 6. لیست پیام‌ها */
.inbox-item {
    padding: 15px;
    border-bottom: 1px solid #eee;
}

.inbox-item:last-child {
    border-bottom: none;
}

.inbox-item.unread {
    background: #fdf2f8;
    border-left: 4px solid var(--primary-color);
}

.msg-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
    font-size: 0.9rem;
}

.msg-header .title {
    font-weight: bold;
    color: var(--primary-hover);
}

.msg-header .date {
    color: #999;
    font-size: 0.8rem;
}

.msg-body {
    font-size: 0.9rem;
    line-height: 1.6;
    color: #444;
}

/* موبایل ویو اختصاصی */
@media (max-width: 768px) {
    .hero-stats-container {
        gap: 5px;
    }

    .hero-stat-card {
        padding: 10px;
    }

    .hero-stat-card .icon {
        font-size: 1.2rem;
    }

    .hero-stat-card .value {
        font-size: 1.1rem;
    }

    .hero-stat-card .label {
        font-size: 0.7rem;
    }

    .challenges-grid {
        grid-template-columns: 1fr;
    }

    /* تک ستون در موبایل */
    .challenge-touch-card {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
}

/* --- استایل‌های جدید داشبورد دانش‌آموز (نسخه 5.0) --- */

/* 1. کارت قهرمان (Hero Card) اصلاح شده */
.hero-card {
    background: linear-gradient(135deg, #ffffff 0%, #f3e5f5 100%);
    border: 2px solid #fff;
    box-shadow: 0 8px 20px rgba(142, 68, 173, 0.15);
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    border-radius: 20px;
}

.hero-avatar {
    width: 90px;
    height: 90px;
    border: 4px solid #fff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.hero-info {
    flex-grow: 1;
}

.level-badge {
    background: var(--primary-color);
    color: white;
    padding: 3px 10px;
    border-radius: 15px;
    font-size: 0.9rem;
    font-weight: bold;
    box-shadow: 0 3px 8px rgba(142, 68, 173, 0.3);
}

.coin-badge {
    background: #FFF3E0;
    color: var(--coin-color);
    display: inline-block;
    padding: 5px 12px;
    border-radius: 10px;
    font-weight: bold;
    border: 1px solid #FFE0B2;
}

/* نوار XP فشرده */
.xp-bar-container.small-bar {
    height: 24px;
    margin-top: 10px;
    border: 2px solid #fff;
    background: #eee;
}

.xp-bar-text {
    font-size: 0.8rem;
    color: #444;
}

/* 2. لیست‌های کوچک (Mini Lists) برای تب‌ها */
.ranking-list-mini li,
.activity-feed-list li {
    padding: 10px;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ranking-list-mini li:last-child,
.activity-feed-list li:last-child {
    border-bottom: none;
}

/* 3. اصلاحات نقشه گنج برای موبایل */
.battle-pass-map-wrapper {
    overflow-x: auto;
    /* اسکرول افقی */
    white-space: nowrap;
    /* جلوگیری از شکستن خط */
    padding: 2rem 1rem;
    -webkit-overflow-scrolling: touch;
    /* روانی اسکرول در iOS */
    background-image: url('https://www.transparenttextures.com/patterns/old-map.png');
    /* پس زمینه بافت دار */
    background-color: #fdf6e3;
    border-radius: 15px;
    border: 4px solid #d4c5a3;
}

.battle-pass-track {
    display: inline-flex;
    /* چیدمان افقی */
    align-items: flex-start;
    gap: 0;
    /* گپ صفر برای اتصال خطوط */
    min-width: 100%;
    position: relative;
    padding-top: 20px;
    /* فضا برای خط بالا */
}

/* خط اتصال مراحل */
.battle-pass-track::before {
    top: 45px;
    /* تنظیم دقیق وسط آیکون */
    height: 6px;
    background: #d4c5a3;
    border: none;
}

.battle-pass-path-progress {
    top: 45px;
    height: 6px;
    background: var(--xp-gradient);
    box-shadow: 0 0 10px rgba(241, 196, 15, 0.5);
    z-index: 1;
}

.map-step {
    width: 160px;
    /* عرض ثابت هر مرحله */
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    white-space: normal;
    /* متن داخل مرحله بشکند */
    position: relative;
    z-index: 2;
}

.step-icon {
    width: 50px;
    height: 50px;
    font-size: 1.2rem;
    background-color: #fff;
    border: 4px solid #d4c5a3;
    color: #888;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

/* حالت فعال و تکمیل شده */
.map-step.is-passed .step-icon {
    border-color: var(--xp-color);
    color: var(--xp-color);
}

.map-step.current .step-icon {
    transform: scale(1.2);
    background: var(--xp-color);
    color: #fff;
    border-color: #fff;
    box-shadow: 0 0 20px rgba(241, 196, 15, 0.6);
    animation: pulse 2s infinite;
}

.map-step.completed .step-icon {
    background: var(--success-color);
    color: #fff;
    border-color: var(--success-color);
}

/* جایزه زیر مرحله */
.reward-item {
    margin-top: 15px;
    width: 100px;
    height: 90px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 10px;
    border: 2px dashed #ccc;
}

.map-step.current .reward-item {
    background: #fff;
    border: 2px solid var(--xp-color);
    transform: scale(1.05);
}

/* واکنش‌گرایی */
@media (max-width: 768px) {
    .hero-card {
        flex-direction: column;
        text-align: center;
        padding: 1rem;
    }

    .hero-info {
        width: 100%;
    }

    .d-flex {
        justify-content: center !important;
        flex-direction: column;
        gap: 5px;
    }

    /* تب‌ها در موبایل */
    .tab-nav {
        display: flex;
        justify-content: space-between;
        gap: 5px;
    }

    .tab-link {
        font-size: 0.9rem;
        padding: 10px 5px;
        flex: 1;
        text-align: center;
    }
}

/* =========================================
   نسخه 5.3: بازطراحی مدرن منوی موبایل (Mobile Menu Overhaul)
   ========================================= */

@media (max-width: 992px) {

    /* نمایش دکمه همبرگری */
    .mobile-menu-btn {
        display: block !important;
        background: none;
        border: none;
        color: white;
        font-size: 1.8rem;
        cursor: pointer;
        padding: 5px;
    }

    /* کانتینر اصلی منو */
    .main-nav {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: rgba(255, 255, 255, 0.98);
        /* زمینه شیشه‌ای */
        backdrop-filter: blur(10px);
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
        padding: 20px;
        border-radius: 0 0 25px 25px;
        display: none;
        /* توسط JS با انیمیشن باز می‌شود */
        flex-direction: column;
        gap: 10px;
        z-index: 1000;
        border-top: 1px solid rgba(0, 0, 0, 0.05);
    }

    /* لینک‌های عادی منو */
    .main-nav>a,
    .nav-link {
        background: #fff;
        border: 1px solid #f0f0f0;
        border-radius: 15px;
        padding: 14px 18px;
        color: var(--text-color);
        font-weight: 700;
        text-align: right;
        transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
        width: 100%;
        /* تمام عرض */
        box-sizing: border-box;
        font-size: 1rem;
    }

    .main-nav>a:active,
    .nav-link:active {
        background-color: var(--primary-light);
        transform: scale(0.98);
        border-color: var(--primary-color);
    }

    .main-nav>a.active {
        background-color: var(--primary-color);
        color: #fff;
        border-color: var(--primary-color);
        box-shadow: 0 5px 15px rgba(142, 68, 173, 0.3);
    }

    /* دکمه‌های آکاردئونی (دراپ‌داون) */
    .nav-dropdown {
        width: 100%;
        display: block;
        background: #fff;
        border: 1px solid #f0f0f0;
        border-radius: 15px;
        overflow: hidden;
        transition: box-shadow 0.3s ease, transform 0.2s ease;
        margin-bottom: 0;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
    }

    .nav-dropdown.active {
        box-shadow: 0 8px 25px rgba(142, 68, 173, 0.15);
        border-color: var(--primary-light);
        transform: translateY(-2px);
        z-index: 2;
    }

    .nav-dropbtn {
        width: 100%;
        text-align: right;
        color: var(--text-color);
        padding: 16px 20px;
        background: transparent;
        border: none;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-weight: 700;
        font-size: 1rem;
        font-family: var(--font-family);
    }

    /* آیکون فلش */
    .nav-dropbtn .arrow {
        transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
        font-size: 0.9rem;
        color: var(--text-muted);
    }

    .nav-dropdown.active .nav-dropbtn .arrow {
        transform: rotate(180deg);
        color: var(--primary-color);
    }

    .nav-dropdown.active .nav-dropbtn {
        color: var(--primary-color);
        background-color: #faf5ff;
        /* زمینه بسیار روشن بنفش */
    }

    /* محتوای زیرمنو */
    .nav-dropdown-content {
        position: static;
        display: none;
        /* توسط JS کنترل می‌شود */
        background-color: #fff;
        width: 100%;
        padding: 5px 0 10px 0;
    }

    .nav-dropdown-content a {
        padding: 12px 25px 12px 40px;
        /* تورفتگی */
        color: #666;
        font-size: 0.95rem;
        border-bottom: none;
        display: flex;
        align-items: center;
        text-decoration: none;
        font-weight: 500;
        transition: color 0.2s;
    }

    .nav-dropdown-content a::before {
        content: '';
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background-color: #ddd;
        margin-left: 12px;
        transition: all 0.3s ease;
    }

    .nav-dropdown-content a:hover::before,
    .nav-dropdown-content a.active::before {
        background-color: var(--primary-color);
        transform: scale(1.5);
    }

    .nav-dropdown-content a:active {
        background-color: #f9f9f9;
        color: var(--primary-color);
    }

    .nav-dropdown-content a.active {
        color: var(--primary-color);
        font-weight: 700;
        background-color: transparent;
    }
}

/* --- اصلاحیه نهایی منوی موبایل (Fix Mobile Menu) --- */

@media (max-width: 992px) {

    /* 1. حل مشکل باز نشدن منو برای معلم */
    body.role-teacher .mobile-menu-btn {
        display: block !important;
    }

    /* حذف اجبار مخفی بودن برای معلم تا JS بتواند کار کند */
    body.role-teacher .main-nav {
        display: none;
        /* حالت پیش‌فرض مخفی (بدون !important) */
    }

    /* وقتی با JS کلاس open اضافه شد، حتما نمایش داده شود */
    body.role-teacher .main-nav.open {
        display: flex !important;
        flex-direction: column;
    }

    /* 2. استایل جذاب‌تر برای آیتم‌های منو */
    .main-nav {
        background: #ffffff !important;
        border-bottom: 4px solid var(--primary-color);
        padding: 15px !important;
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15) !important;
        border-radius: 0 0 25px 25px;
    }

    /* لینک‌های تکی */
    .nav-link {
        background-color: #f8f9fa;
        border: 1px solid #eee;
        margin-bottom: 8px;
        border-radius: 12px;
        padding: 15px !important;
        color: #444;
        font-weight: 700;
    }

    .nav-link.active {
        background-color: var(--primary-light);
        color: var(--primary-color);
        border-color: var(--primary-color);
    }

    /* 3. طراحی آکاردئونی (Dropdown) */
    .nav-dropdown {
        background-color: #fff;
        border: 1px solid #eee;
        border-radius: 12px;
        margin-bottom: 8px;
        overflow: hidden;
        transition: all 0.3s ease;
    }

    /* دکمه اصلی آکاردئون */
    .nav-dropbtn {
        width: 100%;
        background: #fff;
        border: none;
        padding: 15px 20px;
        text-align: right;
        font-weight: 700;
        color: #555;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    /* حالت فعال آکاردئون */
    .nav-dropdown.active {
        border-color: var(--primary-color);
        box-shadow: 0 4px 15px rgba(142, 68, 173, 0.1);
    }

    .nav-dropdown.active .nav-dropbtn {
        background-color: var(--primary-light);
        /* بنفش روشن */
        color: var(--primary-color);
    }

    .nav-dropdown.active .arrow {
        transform: rotate(180deg);
    }

    /* محتوای داخل آکاردئون */
    .nav-dropdown-content {
        background-color: #fcfcfc;
        padding: 5px 0;
        border-top: 1px solid #eee;
    }

    .nav-dropdown-content a {
        padding: 12px 30px !important;
        font-size: 0.9rem;
        color: #666;
        border-bottom: 1px dashed #eee;
    }

    .nav-dropdown-content a:last-child {
        border-bottom: none;
    }

    .nav-dropdown-content a:hover,
    .nav-dropdown-content a.active {
        color: var(--primary-color);
        padding-right: 35px !important;
        /* حرکت ریز هنگام هاور */
        background: #fff;
    }
}

/* --- اصلاحیه نهایی: رفع مشکل اسکرول افقی و گرید معلم --- */

/* جلوگیری از اسکرول افقی ناخواسته در کل صفحه */
html,
body {
    overflow-x: hidden;
    max-width: 100%;
}

/* کلاس جدید برای ستون‌های داشبورد معلم */
.columns-with-sidebar {
    display: grid;
    grid-template-columns: 1fr 350px;
    /* پیش‌فرض دسکتاپ */
    gap: 2rem;
}

/* تنظیمات موبایل برای ستون‌ها */
@media (max-width: 992px) {
    .columns-with-sidebar {
        grid-template-columns: 1fr !important;
        /* تک ستون در موبایل */
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }

    /* حذف حالت چسبان سایدبار در موبایل */
    .sticky-sidebar {
        position: static !important;
    }

    /* فیکس کردن عرض کادر جستجو در هدر */
    .teacher-dashboard-header .live-search-box {
        max-width: 100% !important;
    }
}

/* --- استایل‌های جدید لیست فعالیت‌های اخیر (Clean Log List) --- */

.unified-activity-feed {
    list-style: none;
    padding: 0;
    margin: 0;
}

.recent-log-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 15px;
    border-bottom: 1px solid #f0f0f0;
    transition: background-color 0.2s;
}

.recent-log-item:last-child {
    border-bottom: none;
}

.recent-log-item:hover {
    background-color: #fcfcfc;
}

/* ستون دانش‌آموز */
.log-col-student {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 2;
    /* فضای بیشتر */
    min-width: 140px;
}

.log-avatar img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #eee;
}

.log-user-info {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.log-user-info .name {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--text-color);
}

.log-user-info .time {
    font-size: 0.75rem;
    color: #aaa;
}

/* ستون فعالیت */
.log-col-activity {
    flex: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 10px;
}

.activity-badge {
    background: #f0f2f5;
    color: #555;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    align-self: flex-start;
    white-space: nowrap;
}

.log-note {
    font-size: 0.75rem;
    color: #888;
    font-style: italic;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 150px;
    margin-top: 2px;
}

/* ستون امتیاز */
.log-col-score {
    flex: 1.5;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
}

.score-pill {
    font-size: 0.85rem;
    font-family: var(--font-game);
    font-weight: normal;
}

.score-pill.xp.pos {
    color: var(--success-color);
}

.score-pill.xp.neg {
    color: var(--danger-color);
}

.score-pill.coin {
    color: var(--coin-color);
}

/* ستون عملیات */
.log-col-action {
    flex: 0.5;
    display: flex;
    justify-content: flex-end;
}

.btn-icon-undo {
    background: #fff0f0;
    border: 1px solid #ffcccc;
    color: #e74c3c;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-icon-undo:hover {
    background: #e74c3c;
    color: white;
    border-color: #e74c3c;
}

.empty-state-log {
    text-align: center;
    padding: 2rem;
    color: var(--text-muted);
}

.empty-state-log .icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    opacity: 0.5;
}

/* واکنش‌گرایی برای لاگ‌ها */
@media (max-width: 600px) {
    .recent-log-item {
        flex-wrap: wrap;
        gap: 10px;
    }

    .log-col-student {
        flex: 1 1 100%;
        /* تمام عرض */
        border-bottom: 1px dashed #eee;
        padding-bottom: 8px;
        margin-bottom: 5px;
    }

    .log-col-activity {
        flex: 2;
        padding: 0;
    }

    .log-col-score {
        flex: 1;
        align-items: flex-end;
    }

    .log-col-action {
        flex: 0;
    }
}

/* --- اصلاحیه نهایی: تنظیم عرض ستون‌ها برای جا دادن ۴ کارت --- */

.columns-with-sidebar {
    display: grid;
    /* کاهش عرض سایدبار از 350px به 280px برای دادن فضای بیشتر به کارت‌ها */
    grid-template-columns: 1fr 280px;
    gap: 1.5rem;
}

@media (max-width: 992px) {
    .columns-with-sidebar {
        grid-template-columns: 1fr !important;
        display: flex;
        flex-direction: column;
    }
}

/* --- اصلاحیه نهایی: چیدمان ۴ ستونه و سایدبار باریک --- */

/* 1. تنظیم نسبت ستون‌ها (سایدبار باریک‌تر) */
.columns-with-sidebar {
    display: grid;
    /* سایدبار فقط 250 پیکسل، بقیه فضا برای کارت‌ها */
    grid-template-columns: 1fr 250px !important;
    gap: 1rem;
    /* کاهش فاصله بین دو ستون */
}

/* 2. اصلاح کارت دانش‌آموز برای نمایش نام کامل */
.student-award-card {
    padding: 0.75rem 0.5rem !important;
    /* کاهش پدینگ برای فضای بیشتر */
    height: 100%;
    /* هم‌اندازه کردن ارتفاع کارت‌ها */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.student-card-name {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-color);
    margin-bottom: 0.5rem;

    /* حذف حالت سه نقطه (...) و اجازه شکستن خط */
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;

    /* تنظیم ارتفاع برای نام‌های طولانی (دو خطی) */
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1.3;
}

/* 3. کوچک کردن آواتار برای جا شدن بهتر */
.student-card-avatar {
    width: 55px !important;
    height: 55px !important;
    margin-bottom: 0.25rem !important;
}

/* 4. تنظیم موبایل (همچنان تک ستون) */
@media (max-width: 992px) {
    .columns-with-sidebar {
        grid-template-columns: 1fr !important;
        display: flex;
        flex-direction: column;
    }
}

/* --- اصلاحیه نهایی v2: طراحی مدرن کارت‌ها و تنظیم ابعاد --- */

/* 1. تنظیم ابعاد ستون‌ها (سایدبار پهن‌تر) */
.columns-with-sidebar {
    display: grid;
    /* سایدبار را به 340px افزایش دادیم (حدود 40% بزرگتر از قبل) */
    grid-template-columns: 1fr 340px !important;
    gap: 1.5rem;
}

/* 2. اصلاح گرید کارت‌ها (رفع مشکل روی هم افتادن) */
.student-grid {
    display: grid;
    /* فاصله بین کارت‌ها را زیاد کردیم تا روی هم نیفتند */
    gap: 15px !important;
    /* تنظیم عرض کارت‌ها برای پر کردن فضای باقی‌مانده */
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)) !important;
    padding: 5px;
    /* پدینگ برای جلوگیری از بریده شدن سایه‌ها */
}

/* 3. طراحی مدرن و برجسته کارت دانش‌آموز */
.student-award-card {
    position: relative;
    background: #ffffff;
    /* حذف بوردر سخت، استفاده از سایه برای عمق */
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 20px;
    /* گردتر */

    /* سایه نرم و مدرن */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);

    padding: 1.2rem 0.5rem !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    min-height: 160px;
    /* ارتفاع ثابت برای یکدست شدن */
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    /* انیمیشن نرم */
    cursor: pointer;
    overflow: visible;
    /* اجازه خروج سایه از کادر */
}

/* افکت هاور (شناور شدن) */
.student-award-card:hover {
    transform: translateY(-6px);
    /* حرکت به بالا */
    box-shadow: 0 15px 30px rgba(142, 68, 173, 0.15);
    /* سایه بنفش جذاب */
    border-color: rgba(142, 68, 173, 0.3);
    z-index: 10;
}

/* حالت انتخاب شده (Selected) */
.student-award-card.selected {
    background-color: #F4ECF7;
    /* پس‌زمینه بنفش خیلی روشن */
    border: 2px solid var(--primary-color);
    /* کادر بنفش */
    box-shadow: 0 0 0 4px rgba(142, 68, 173, 0.15);
    /* حلقه نورانی دور کارت */
    transform: scale(0.98);
    /* کمی فشرده شدن */
}

/* استایل آواتار داخل کارت */
.student-card-avatar {
    width: 65px !important;
    /* بزرگتر */
    height: 65px !important;
    border-radius: 50%;
    border: 3px solid #fff;
    /* قاب سفید دور عکس */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    /* سایه زیر عکس */
    margin-bottom: 10px !important;
    object-fit: cover;
    background-color: #f0f0f0;
}

/* استایل نام دانش‌آموز */
.student-card-name {
    font-size: 0.95rem;
    font-weight: 700;
    color: #444;
    text-align: center;
    line-height: 1.3;
    margin-bottom: 8px;
    width: 100%;
    padding: 0 5px;
    /* مدیریت متن‌های طولانی */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    /* حداکثر 2 خط */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* استایل بخش آمار پایین کارت */
.student-card-stats {
    width: 90%;
    background: #f8f9fa;
    border-radius: 12px;
    padding: 6px 4px !important;
    display: flex;
    justify-content: space-around;
    align-items: center;
    border: 1px solid #eee;
}

/* چک‌باکس مخفی (چون خود کارت تغییر استایل می‌دهد) */
.student-card-checkbox {
    width: 100%;
    height: 100%;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    cursor: pointer;
    z-index: 5;
}

/* تنظیمات موبایل */
@media (max-width: 992px) {
    .columns-with-sidebar {
        grid-template-columns: 1fr !important;
        /* در موبایل تک ستون */
    }

    .student-grid {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)) !important;
    }
}

/* --- اصلاحیه نهایی v3: رفع تداخل عمودی و چیدمان هدر --- */

/* 1. تنظیم فاصله گرید (رفع مشکل روی هم افتادن) */
.student-grid {
    display: grid;
    /* فاصله عمودی (سطرها) را 30px کردیم تا کارت‌ها کاملاً جدا باشند */
    /* فاصله افقی (ستون‌ها) 15px */
    gap: 30px 15px !important;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)) !important;
    padding: 10px 5px 20px 5px;
    /* فضای پایین برای سایه کارت‌های ردیف آخر */
}

/* 2. استایل مدرن کارت دانش‌آموز */
.student-award-card {
    position: relative;
    background: #ffffff;
    border: 1px solid #f0f0f0;
    /* حاشیه بسیار محو */
    border-radius: 24px;
    /* گردتر و نرم‌تر */

    /* سایه چندلایه برای حالت سه‌بعدی */
    box-shadow:
        0 10px 25px -5px rgba(0, 0, 0, 0.05),
        0 5px 10px -5px rgba(0, 0, 0, 0.02);

    padding: 1.2rem 0.5rem !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    min-height: 170px;
    /* کمی بلندتر برای تنفس محتوا */
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    /* انیمیشن فنری */
    cursor: pointer;
    overflow: visible;
    z-index: 1;
}

/* افکت هاور (شناور شدن با تاکید) */
.student-award-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow:
        0 20px 40px -10px rgba(142, 68, 173, 0.2),
        /* سایه رنگی */
        0 10px 20px -10px rgba(0, 0, 0, 0.1);
    border-color: rgba(142, 68, 173, 0.2);
    z-index: 10;
    /* همیشه رو قرار بگیرد */
}

/* حالت انتخاب شده */
.student-award-card.selected {
    background-color: #fff;
    border: 2px solid var(--primary-color);
    box-shadow: 0 0 0 4px rgba(142, 68, 173, 0.15);
    transform: scale(0.96);
    /* کمی فشرده شود */
}

.student-award-card.selected::after {
    content: '✓';
    position: absolute;
    top: -10px;
    right: -10px;
    width: 28px;
    height: 28px;
    background: var(--success-color);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    box-shadow: 0 4px 10px rgba(46, 204, 113, 0.3);
    animation: popIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* آواتار */
.student-card-avatar {
    width: 60px !important;
    height: 60px !important;
    border-radius: 50%;
    border: 4px solid #f8f9fa;
    /* حاشیه داخلی نرم */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    margin-bottom: 12px !important;
    object-fit: cover;
    background-color: #fff;
}

/* نام دانش‌آموز */
.student-card-name {
    font-size: 0.9rem;
    font-weight: 800;
    color: #444;
    text-align: center;
    line-height: 1.4;
    margin-bottom: 10px;
    width: 100%;
    padding: 0 2px;
    min-height: 40px;
    /* ارتفاع ثابت برای هم‌ترازی */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* آمار پایین کارت */
.student-card-stats {
    width: 100%;
    background: #fcfcfc;
    border-top: 1px dashed #eee;
    border-radius: 0 0 20px 20px;
    /* تطبیق با گوشه کارت */
    padding: 8px 0 !important;
    margin: 0 -0.5rem -1.2rem -0.5rem;
    /* کشیدن تا لبه‌ها */
    width: calc(100% + 1rem);
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

/* 3. استایل باکس جستجو در هدر */
.header-search-box input {
    border-radius: 12px;
    background-color: #f4f6f8;
    border: 1px solid transparent;
    padding: 8px 15px 8px 35px;
    /* فضا برای آیکون */
    font-size: 0.9rem;
    width: 200px;
    transition: all 0.2s;
}

.header-search-box input:focus {
    background-color: #fff;
    border-color: var(--primary-color);
    width: 240px;
    /* باز شدن هنگام فوکوس */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.header-search-wrapper {
    position: relative;
}

.header-search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #aaa;
    font-size: 0.9rem;
    pointer-events: none;
}

/* در موبایل، جستجو و دکمه‌ها زیر هم باشند */
@media (max-width: 576px) {
    .selection-header {
        flex-direction: column;
        align-items: stretch !important;
        gap: 15px;
    }

    .header-controls {
        flex-direction: column-reverse;
        /* جستجو بالا بیاید */
        width: 100%;
        gap: 10px;
    }

    .header-search-box input {
        width: 100% !important;
        /* تمام عرض در موبایل */
    }

    .btn-group {
        width: 100%;
        display: flex;
    }

    .btn-group .btn {
        flex: 1;
    }
}

/* --- اصلاحیه نهایی v4: فونت‌های جذاب، کارت‌های فشرده و جستجوی اصلاح شده --- */

/* 1. اصلاح و فشرده‌سازی کارت دانش‌آموز */
.student-award-card {
    min-height: 145px !important;
    /* کاهش ارتفاع کارت (قبلا 170 بود) */
    padding: 0.8rem 0.4rem !important;

    /* استایل برجسته و پاپ (3D Feel) */
    background: #fff;
    border: 1px solid #f0f0f0;
    border-bottom: 4px solid #e0e0e0;
    /* ایجاد حالت سه‌بعدی */
    border-radius: 20px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
    /* سایه نرم‌تر */
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    /* انیمیشن فنری */
}

/* افکت هاور جذاب */
.student-award-card:hover {
    transform: translateY(-5px);
    border-bottom-color: var(--primary-color);
    /* رنگ زیر کارت عوض شود */
    box-shadow: 0 15px 30px rgba(142, 68, 173, 0.2);
}

/* حالت انتخاب شده */
.student-award-card.selected {
    background-color: #FAF5FF;
    border: 2px solid var(--primary-color);
    border-bottom-width: 4px;
    /* حفظ حالت سه‌بعدی */
    transform: scale(0.97);
}

/* 2. تایپوگرافی و فونت‌ها (کارت‌ها) */
.student-card-name {
    font-family: 'Vazirmatn', sans-serif;
    /* اطمینان از فونت زیبا */
    font-weight: 800 !important;
    /* کاملاً بولد */
    font-size: 0.95rem !important;
    color: #2c3e50;
    margin-bottom: 5px;
    line-height: 1.2;
    height: 38px;
    /* ارتفاع ثابت برای تراز ماندن */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* آواتار کمی کوچک‌تر برای تعادل */
.student-card-avatar {
    width: 58px !important;
    height: 58px !important;
    margin-bottom: 8px !important;
    border: 3px solid #fff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* 3. تایپوگرافی لیست کلاس (جدول) */
#tab-students-list table td[data-label="نام"] {
    font-family: 'Vazirmatn', sans-serif;
    font-weight: 900;
    /* خیلی بولد */
    font-size: 1.1rem;
    /* درشت‌تر */
    color: #2c3e50;
}

#tab-students-list table td {
    vertical-align: middle;
    padding: 15px;
    /* فضای بیشتر در جدول */
}

/* 4. اصلاح کادر جستجو (آیکون و اینپوت کنار هم) */
.header-search-wrapper {
    position: relative;
    width: 100%;
}

.header-search-icon {
    /* انتقال آیکون به سمت راست (برای فارسی) */
    right: 12px !important;
    left: auto !important;
    top: 50%;
    transform: translateY(-50%);
    color: var(--primary-color);
    font-size: 1.1rem;
    z-index: 2;
}

.header-search-box input {
    /* تنظیم پدینگ برای جلوگیری از روی هم افتادن متن و آیکون */
    padding: 10px 40px 10px 15px !important;
    width: 100%;
    background-color: #f4f6f8;
    border: 2px solid transparent;
    border-radius: 12px;
    font-family: 'Vazirmatn', sans-serif;
    font-weight: 600;
    height: 45px;
    transition: all 0.3s ease;
}

.header-search-box input:focus {
    background-color: #fff;
    border-color: var(--primary-color);
    box-shadow: 0 4px 15px rgba(142, 68, 173, 0.1);
}

/* 5. تنظیم فاصله گرید برای موبایل و دسکتاپ */
.student-grid {
    /* کارت‌ها به هم نزدیک‌تر شوند اما روی هم نیفتند */
    gap: 20px 12px !important;
    padding: 10px 5px 25px 5px;
}

/* --- اصلاحیه نهایی v5: بازطراحی لیست کلاس و فیکس جستجو --- */

/* 1. اصلاح اساسی هدر بخش انتخاب (جستجو و دکمه‌ها) */
.selection-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.header-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-grow: 1;
    /* پر کردن فضای خالی */
}

.header-search-box {
    position: relative;
    flex-grow: 1;
    /* جستجو تا حد امکان کشیده شود */
    max-width: 400px;
    /* اما خیلی عریض نشود */
}

.header-search-box input {
    width: 100% !important;
    padding: 12px 45px 12px 15px !important;
    /* فضای خالی سمت راست برای آیکون */
    height: 48px;
    border-radius: 14px;
    border: 2px solid #eef0f3;
    background-color: #f9fafb;
    font-family: 'Vazirmatn', sans-serif;
    font-weight: 600;
    color: #333;
    transition: all 0.3s ease;
}

.header-search-box input:focus {
    background-color: #fff;
    border-color: var(--primary-color);
    box-shadow: 0 4px 12px rgba(142, 68, 173, 0.1);
}

.header-search-icon {
    position: absolute;
    right: 15px;
    /* چسبیده به راست */
    top: 50%;
    transform: translateY(-50%);
    color: var(--primary-color);
    font-size: 1.2rem;
    pointer-events: none;
}

/* دکمه‌های فیلتر */
.filter-btn-group {
    display: flex;
    gap: 5px;
}

.filter-btn-group .btn {
    padding: 10px 15px;
    font-weight: 700;
    border-radius: 12px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 2. بازطراحی مدرن جدول لیست کلاس (Floating Rows) */
.modern-table {
    width: 100%;
    border-collapse: separate;
    /* جدا کردن ردیف‌ها */
    border-spacing: 0 12px;
    /* فاصله بین ردیف‌ها */
    margin-top: -10px;
}

.modern-table thead th {
    color: var(--text-muted);
    font-size: 0.9rem;
    font-weight: 600;
    padding: 0 15px 10px 15px;
    border: none;
}

.modern-table tbody tr {
    background: #ffffff;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
    /* سایه بسیار نرم */
    transition: transform 0.2s, box-shadow 0.2s;
    border-radius: 16px;
}

.modern-table tbody tr:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
    z-index: 5;
    position: relative;
}

.modern-table td {
    padding: 15px 20px;
    border: solid #f4f6f8;
    border-width: 1px 0;
    /* فقط خط بالا و پایین */
    vertical-align: middle;
}

/* گرد کردن گوشه‌های ردیف */
.modern-table td:first-child {
    border-left: none;
    /* RTL: ستون اول سمت راست است */
    border-right: 1px solid #f4f6f8;
    border-top-right-radius: 16px;
    border-bottom-right-radius: 16px;
}

.modern-table td:last-child {
    border-right: none;
    border-left: 1px solid #f4f6f8;
    border-top-left-radius: 16px;
    border-bottom-left-radius: 16px;
}

/* استایل سلول نام (بزرگ و بولد) */
.table-student-info {
    display: flex;
    align-items: center;
    gap: 15px;
}

.table-student-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    background-color: #eee;
}

.table-student-name {
    font-family: 'Vazirmatn', sans-serif;
    font-weight: 800;
    /* خیلی بولد */
    font-size: 1.05rem;
    color: #2c3e50;
}

/* بج‌های آمار (لول و اکس‌پی) */
.stat-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.9rem;
    min-width: 80px;
    justify-content: center;
}

.stat-badge.level {
    background-color: #e3f2fd;
    /* آبی خیلی روشن */
    color: #1976d2;
}

.stat-badge.xp {
    background-color: #fff8e1;
    /* زرد خیلی روشن */
    color: #f57c00;
}

/* دکمه ویرایش */
.btn-table-edit {
    background-color: #f3f4f6;
    color: #666;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    border: none;
    text-decoration: none;
}

.btn-table-edit:hover {
    background-color: var(--primary-color);
    color: #fff;
    box-shadow: 0 4px 10px rgba(142, 68, 173, 0.3);
}

/* تنظیمات موبایل */
@media (max-width: 768px) {
    .selection-header {
        flex-direction: column;
        align-items: stretch;
    }

    .header-controls {
        flex-direction: column;
        /* جستجو بالا، دکمه‌ها پایین */
        width: 100%;
    }

    .header-search-box {
        max-width: 100%;
    }

    .filter-btn-group {
        width: 100%;
        justify-content: space-between;
    }

    .filter-btn-group .btn {
        flex: 1;
    }

    /* تبدیل جدول به لیست در موبایل */
    .modern-table,
    .modern-table tbody,
    .modern-table tr,
    .modern-table td {
        display: block;
        width: 100%;
    }

    .modern-table thead {
        display: none;
    }

    .modern-table tbody tr {
        margin-bottom: 15px;
        border: 1px solid #eee;
        padding: 10px;
    }

    .modern-table td {
        padding: 10px;
        text-align: right;
        border: none;
        border-bottom: 1px dashed #eee;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .modern-table td:last-child {
        border-bottom: none;
        justify-content: center;
    }

    /* اضافه کردن لیبل برای موبایل */
    .modern-table td::before {
        content: attr(data-label);
        font-weight: bold;
        color: #999;
        font-size: 0.85rem;
    }

    /* حذف لیبل برای نام و عملیات */
    .modern-table td[data-label="نام"]::before,
    .modern-table td[data-label="عملیات"]::before {
        display: none;
    }
}

/* --- اصلاحیه نهایی v6: طراحی فشرده و مدرن هدر و جستجو --- */

/* 1. چیدمان هدر کارت (Selection Header) */
.selection-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px dashed #eee;
    /* خط جداکننده ظریف */
    gap: 15px;
}

.selection-header h4 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--primary-color);
    white-space: nowrap;
}

/* 2. کانتینر کنترل‌ها (جستجو + دکمه‌ها) */
.header-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-grow: 1;
    justify-content: flex-end;
    /* همه چیز به سمت چپ (در RTL) */
}

/* 3. استایل باکس جستجو (فشرده و مدرن) */
.header-search-box {
    position: relative;
    width: 100%;
    max-width: 260px;
    /* عرض ثابت و استاندارد */
}

.header-search-box input {
    width: 100% !important;
    height: 40px !important;
    /* ارتفاع استاندارد و کمتر */
    padding: 0 40px 0 15px !important;
    /* فضای آیکون سمت راست */
    border-radius: 10px;
    background-color: #f0f2f5;
    border: 2px solid transparent;
    font-family: 'Vazirmatn', sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    color: #444;
    transition: all 0.25s ease;
}

.header-search-box input:focus {
    background-color: #fff;
    border-color: var(--primary-color);
    box-shadow: 0 4px 12px rgba(142, 68, 173, 0.15);
    width: 100% !important;
    /* اطمینان از تغییر نکردن عرض */
}

.header-search-box input::placeholder {
    color: #aaa;
    font-size: 0.85rem;
}

/* آیکون ذره‌بین */
.header-search-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #999;
    font-size: 1rem;
    pointer-events: none;
    transition: color 0.2s;
}

.header-search-box input:focus+.header-search-icon {
    color: var(--primary-color);
}

/* 4. گروه دکمه‌های فیلتر (فشرده‌تر) */
.filter-btn-group {
    display: flex;
    background: #f0f2f5;
    padding: 4px;
    border-radius: 10px;
}

.filter-btn-group .btn {
    padding: 6px 12px;
    height: 32px;
    /* ارتفاع هماهنگ با جستجو */
    font-size: 0.85rem;
    font-weight: 700;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: #666;
    box-shadow: none;
}

.filter-btn-group .btn:hover {
    background-color: rgba(0, 0, 0, 0.05);
    color: #333;
}

/* استایل دکمه معکوس (ویژه) */
.filter-btn-group #btn-reverse-selection {
    color: var(--primary-color);
}

.filter-btn-group #btn-reverse-selection:hover {
    background-color: var(--primary-light);
}

/* واکنش‌گرایی (موبایل) */
@media (max-width: 576px) {
    .selection-header {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .header-controls {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

    .header-search-box {
        max-width: 100%;
        /* در موبایل تمام عرض */
    }

    .filter-btn-group {
        width: 100%;
        justify-content: space-between;
    }

    .filter-btn-group .btn {
        flex: 1;
        /* دکمه‌ها هم‌اندازه */
    }
}

/* --- اصلاحیه نهایی v7: رفع تداخل دکمه‌ها و جستجو --- */

/* 1. اصلاح کانتینر کنترل‌ها برای جلوگیری از همپوشانی */
.header-controls {
    display: flex;
    align-items: center;
    gap: 15px !important;
    /* فاصله اجباری بین جستجو و دکمه‌ها */
    flex-wrap: nowrap;
    /* در دسکتاپ در یک خط بمانند */
    justify-content: flex-end;
    width: auto;
}

/* 2. تنظیم دقیق کادر جستجو */
.header-search-box {
    position: relative;
    flex: 0 1 260px;
    /* عرض انعطاف‌پذیر با حداکثر 260 پیکسل */
    min-width: 180px;
    /* حداقل عرض برای خوانایی */
    margin: 0;
    /* حذف مارجین‌های مزاحم */
    z-index: 1;
}

/* اطمینان از اینکه اینپوت از کادر خود بیرون نزند */
.header-search-box input {
    width: 100% !important;
    box-sizing: border-box;
    /* محاسبه صحیح عرض */
}

/* 3. محافظت از گروه دکمه‌ها */
.filter-btn-group {
    flex-shrink: 0;
    /* جلوگیری از فشرده شدن دکمه‌ها */
    position: relative;
    z-index: 2;
    /* دکمه‌ها همیشه رو باشند */
    background: #f0f2f5;
    /* پس‌زمینه برای خوانایی بهتر */
}

/* 4. تنظیمات مخصوص موبایل (برای چیدمان زیر هم) */
@media (max-width: 768px) {
    .selection-header {
        flex-direction: column;
        align-items: stretch;
        gap: 15px;
    }

    .header-controls {
        flex-direction: column;
        /* جستجو بالا، دکمه‌ها پایین */
        align-items: stretch;
        width: 100%;
        gap: 12px !important;
    }

    .header-search-box {
        flex: 1 1 auto;
        /* پر کردن عرض */
        max-width: 100%;
        width: 100%;
    }

    .filter-btn-group {
        width: 100%;
        display: flex;
    }

    .filter-btn-group .btn {
        flex: 1;
        /* دکمه‌های هم‌اندازه */
        justify-content: center;
    }
}

/* --- اصلاحیه نهایی v8: رفع باگ انتخاب کارت و بهبود جزییات --- */

/* وقتی کارت انتخاب شد، پس‌زمینه بخش آمار (پایین کارت) شفاف شود تا رنگ بنفش دیده شود */
.student-award-card.selected .student-card-stats {
    background-color: transparent !important;
    border-top-color: rgba(142, 68, 173, 0.2);
    /* رنگ خط جداکننده هم همرنگ تم شود */
}

/* تغییر رنگ متن‌ها در حالت انتخاب برای خوانایی بهتر */
.student-award-card.selected .student-card-stats span {
    color: var(--primary-color);
    font-weight: 800;
}

/* یک انیمیشن ریز برای تیک سبز */
.student-award-card.selected::after {
    transform: scale(1.1);
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* --- Sticky Action Bar for Mobile --- */
@media (max-width: 992px) {
    .sticky-sidebar .card {
        /* حذف استایل کارت عادی برای ادغام با پایین صفحه */
        border: none;
        background: transparent;
        box-shadow: none;
        padding: 0;
    }

    /* دکمه ثبت به پایین صفحه بچسبد */
    #btn-submit-award {
        position: fixed;
        bottom: 20px;
        left: 5%;
        width: 90%;
        z-index: 1000;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
        animation: slideUp 0.3s ease-out;
    }

    /* ایجاد فاصله در پایین صفحه تا دکمه روی محتوا نیفتد */
    .dashboard-container {
        padding-bottom: 80px;
    }
}

/* --- اصلاحیه نهایی v9: برجسته‌سازی کاربر در لیدربورد --- */

.ranking-card.is-you {
    background-color: #F4ECF7;
    /* بنفش خیلی روشن */
    border: 2px solid var(--primary-color) !important;
    /* کادر رنگی ضخیم */
    transform: scale(1.02);
    /* کمی بزرگتر از بقیه */
    box-shadow: 0 8px 20px rgba(142, 68, 173, 0.15) !important;
    /* سایه رنگی */
    z-index: 2;
    position: relative;
}

.ranking-card.is-you .rank-name {
    color: var(--primary-color);
    font-weight: 800;
}

.ranking-card.is-you .rank-badge {
    box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--primary-color);
    /* حلقه دور مدال */
}

/* --- اصلاحیه نهایی v10: استایل انتخاب چالش والدین --- */

/* حذف حالت کمرنگ قبلی */
.challenge-touch-card input:checked+.card-content {
    opacity: 1 !important;
    /* برگرداندن شفافیت به حالت عادی */
}

/* استایل کارت در حالت انتخاب شده (توسط JS کلاس selected اضافه می‌شود) */
.challenge-touch-card.selected {
    background-color: #F4ECF7 !important;
    /* بنفش خیلی روشن */
    border: 2px solid var(--primary-color) !important;
    box-shadow: 0 8px 20px rgba(142, 68, 173, 0.15) !important;
    transform: translateY(-2px);
}

/* تغییر رنگ آیکون دایره در حالت انتخاب */
.challenge-touch-card.selected .card-icon {
    background-color: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
    box-shadow: 0 0 10px rgba(142, 68, 173, 0.3);
    position: relative;
}

/* (اختیاری) تغییر آیکون دایره به تیک با CSS */
.challenge-touch-card.selected .card-icon {
    font-size: 0;
    /* مخفی کردن کاراکتر دایره */
}

.challenge-touch-card.selected .card-icon::after {
    content: '✓';
    font-size: 1.2rem;
    font-weight: bold;
    display: block;
}

/* استایل متن‌ها در حالت انتخاب */
.challenge-touch-card.selected .activity-name {
    color: var(--primary-color);
    font-weight: 800;
}

/* --- اصلاحیه نهایی v11: رفع مشکل انتخاب چک‌باکس --- */

/* به جای display:none از این روش استفاده می‌کنیم تا چک‌باکس "زنده" بماند */
.challenge-checkbox {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* اطمینان از اعمال استایل انتخاب */
.challenge-touch-card.selected {
    background-color: #F4ECF7 !important;
    border: 2px solid var(--primary-color) !important;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(142, 68, 173, 0.2) !important;
}

.challenge-touch-card.selected .activity-name {
    color: var(--primary-color);
    font-weight: 800;
}

.challenge-touch-card.selected .card-icon {
    background-color: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
    box-shadow: 0 0 10px rgba(142, 68, 173, 0.4);
    font-size: 0;
    /* مخفی کردن دایره */
}

/* نمایش تیک */
.challenge-touch-card.selected .card-icon::after {
    content: '✓';
    font-size: 1.2rem;
    font-weight: bold;
    display: block;
}

/* --- اصلاحیه نهایی v12: بهینه‌سازی دکمه شناور و فاصله‌گذاری موبایل --- */

@media (max-width: 992px) {

    /* 1. ایجاد فضای خالی در پایین کانتینر اصلی برای جلوگیری از همپوشانی دکمه */
    .dashboard-container {
        padding-bottom: 100px !important;
        /* افزایش فضا */
    }

    /* 2. استایل مدرن و شناور برای دکمه ثبت */
    #btn-submit-award {
        position: fixed;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        width: 90%;
        /* عرض مناسب */
        max-width: 400px;
        /* جلوگیری از خیلی بزرگ شدن در تبلت */
        z-index: 1000;

        /* استایل ظاهری */
        background: var(--primary-color);
        color: white;
        border: none;
        border-radius: 16px;
        /* گوشه‌های گردتر */
        padding: 16px;
        font-size: 1.1rem;
        font-weight: 800;
        font-family: 'Vazirmatn', sans-serif;

        /* سایه عمیق و نرم */
        box-shadow: 0 10px 30px rgba(142, 68, 173, 0.4);

        /* انیمیشن ورود */
        animation: slideUp 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        transition: all 0.3s ease;
    }

    /* حالت غیرفعال دکمه */
    #btn-submit-award:disabled {
        background: #ccc;
        box-shadow: none;
        transform: translateX(-50%) translateY(100px);
        /* مخفی شدن به پایین */
        opacity: 0;
    }

    /* انیمیشن اسلاید */
    @keyframes slideUp {
        from {
            transform: translateX(-50%) translateY(100px);
            opacity: 0;
        }

        to {
            transform: translateX(-50%) translateY(0);
            opacity: 1;
        }
    }

    /* 3. حذف استایل‌های مزاحم سایدبار در موبایل */
    .sticky-sidebar {
        position: static !important;
        margin-top: 2rem;
        /* فاصله از لیست دانش‌آموزان */
        padding-bottom: 80px;
        /* فاصله داخلی اضافه */
    }

    .sticky-sidebar .card {
        background: transparent;
        border: none;
        box-shadow: none;
        padding: 0;
    }

    /* مخفی کردن هدر کارت "تنظیم پاداش" در موبایل برای خلوت شدن */
    .sticky-sidebar h4 {
        display: none;
    }

    /* استایل فیلدها در موبایل (سفید و تمیز) */
    .sticky-sidebar .form-group {
        background: #fff;
        padding: 15px;
        border-radius: 16px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
        margin-bottom: 15px;
    }
}

/* --- اصلاحیه نهایی v13: رفع همپوشانی و بازطراحی دکمه ثبت --- */

/* 1. افزایش فضای پایین لیست چالش‌ها (جلوگیری از مخفی شدن زیر دکمه) */
.challenges-grid {
    padding-bottom: 160px !important;
    /* فضای زیاد برای اسکرول راحت */
}

/* 2. کانتینر دکمه شناور (با پس‌زمینه محو شونده) */
.floating-action-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    /* گرادیانت سفید که به سمت بالا شفاف می‌شود (برای خوانایی بهتر) */
    background: linear-gradient(to top, rgba(255, 255, 255, 1) 60%, rgba(255, 255, 255, 0) 100%);
    padding: 40px 20px 25px 20px;
    /* پدینگ بالا برای نرمی گرادیانت */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
    pointer-events: none;
    /* کلیک روی فضای خالی اطراف دکمه، به زیر منتقل شود */
}

/* 3. استایل دکمه ثبت مدرن */
.floating-action-bar button {
    pointer-events: auto;
    /* دکمه قابل کلیک باشد */
    width: 100%;
    max-width: 500px;
    /* عرض مناسب در تبلت/دسکتاپ */
    height: 60px;
    border-radius: 18px;
    /* گوشه‌های کاملاً گرد */
    font-family: 'Vazirmatn', sans-serif;
    font-size: 1.1rem;
    font-weight: 800;
    border: none;

    /* رنگ و سایه جذاب */
    background: var(--primary-color);
    color: white;
    box-shadow: 0 10px 25px rgba(142, 68, 173, 0.4);

    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform: translateY(0);
}

/* افکت هاور */
.floating-action-bar button:hover:not(:disabled) {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 15px 35px rgba(142, 68, 173, 0.5);
    background-color: var(--primary-hover);
}

/* حالت غیرفعال (وقتی چیزی انتخاب نشده) */
.floating-action-bar button:disabled {
    background-color: #e0e0e0;
    color: #a0a0a0;
    box-shadow: none;
    transform: translateY(10px);
    /* کمی پایین برود */
    opacity: 0.8;
}

/* تنظیمات مخصوص موبایل */
@media (max-width: 768px) {
    .floating-action-bar {
        padding-bottom: 20px;
        /* فاصله مناسب از پایین صفحه */
    }

    .challenges-grid {
        padding-bottom: 180px !important;
        /* فضای بیشتر در موبایل */
    }
}

/* --- اصلاحیه نهایی v14: فیکس جایگاه دکمه ثبت --- */

/* حالت پیش‌فرض (دسکتاپ): دکمه در جایگاه خود داخل فرم */
.floating-action-bar {
    position: static;
    /* عدم شناوری در دسکتاپ */
    width: 100%;
    background: transparent;
    padding: 20px 0 0 0;
    display: block;
    text-align: left;
    /* دکمه سمت چپ فرم باشد */
    pointer-events: auto;
    z-index: auto;
}

.floating-action-bar button {
    width: auto;
    /* عرض متناسب با متن */
    max-width: none;
    display: inline-block;
    padding: 12px 24px;
    font-size: 1rem;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(142, 68, 173, 0.2);
    transform: none;
    /* حذف ترنسفورم‌های مزاحم */
}

.floating-action-bar button:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(142, 68, 173, 0.3);
}

.floating-action-bar button:disabled {
    transform: none;
    opacity: 0.6;
    background-color: var(--secondary-color);
}

/* فضای خالی پایین لیست فقط در موبایل لازم است */
.challenges-grid {
    padding-bottom: 0;
}


/* --- تنظیمات مخصوص موبایل (زیر 768px) --- */
@media (max-width: 768px) {

    /* در موبایل: دکمه شناور و پایین صفحه */
    .floating-action-bar {
        position: fixed;
        bottom: 20px;
        /* کمی بالاتر از لبه برای زیبایی */
        left: 50%;
        transform: translateX(-50%);
        width: 90%;
        /* عرض مناسب */
        max-width: 400px;
        background: transparent;
        /* حذف پس‌زمینه گرادیانت که مزاحم بود */
        padding: 0;
        display: flex;
        justify-content: center;
        z-index: 1000;
    }

    .floating-action-bar button {
        width: 100%;
        /* تمام عرض کانتینر */
        height: 55px;
        border-radius: 16px;
        font-size: 1.1rem;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
        /* سایه قوی‌تر برای جدا شدن از زمینه */
        background-color: var(--primary-color);
        color: white;
    }

    /* فضای خالی برای اینکه محتوا زیر دکمه نرود */
    .challenges-grid {
        padding-bottom: 100px !important;
    }

    /* حذف دکمه در حالت غیرفعال برای تمیزی بیشتر (اختیاری) */
    .floating-action-bar button:disabled {
        display: none;
    }
}

/* --- اصلاحیه نهایی v14: فیکس جایگاه دکمه ثبت --- */

/* حالت پیش‌فرض (دسکتاپ): دکمه در جایگاه خود داخل فرم */
.floating-action-bar {
    position: static;
    /* عدم شناوری در دسکتاپ */
    width: 100%;
    background: transparent;
    padding: 20px 0 0 0;
    display: block;
    text-align: left;
    /* دکمه سمت چپ فرم باشد */
    pointer-events: auto;
    z-index: auto;
}

.floating-action-bar button {
    width: auto;
    /* عرض متناسب با متن */
    max-width: none;
    display: inline-block;
    padding: 12px 24px;
    font-size: 1rem;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(142, 68, 173, 0.2);
    transform: none;
    /* حذف ترنسفورم‌های مزاحم */
}

.floating-action-bar button:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(142, 68, 173, 0.3);
}

.floating-action-bar button:disabled {
    transform: none;
    opacity: 0.6;
    background-color: var(--secondary-color);
}

/* فضای خالی پایین لیست فقط در موبایل لازم است */
.challenges-grid {
    padding-bottom: 0;
}


/* --- تنظیمات مخصوص موبایل (زیر 768px) --- */
@media (max-width: 768px) {

    /* در موبایل: دکمه شناور و پایین صفحه */
    .floating-action-bar {
        position: fixed;
        bottom: 20px;
        /* کمی بالاتر از لبه برای زیبایی */
        left: 50%;
        transform: translateX(-50%);
        width: 90%;
        /* عرض مناسب */
        max-width: 400px;
        background: transparent;
        /* حذف پس‌زمینه گرادیانت که مزاحم بود */
        padding: 0;
        display: flex;
        justify-content: center;
        z-index: 1000;
    }

    .floating-action-bar button {
        width: 100%;
        /* تمام عرض کانتینر */
        height: 55px;
        border-radius: 16px;
        font-size: 1.1rem;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
        /* سایه قوی‌تر برای جدا شدن از زمینه */
        background-color: var(--primary-color);
        color: white;
    }

    /* فضای خالی برای اینکه محتوا زیر دکمه نرود */
    .challenges-grid {
        padding-bottom: 100px !important;
    }

    /* حذف دکمه در حالت غیرفعال برای تمیزی بیشتر (اختیاری) */
    .floating-action-bar button:disabled {
        display: none;
    }
}

/* --- اصلاحیه نهایی v16: حذف منوی آکاردئونی بالا برای والدین --- */

@media (max-width: 992px) {

    /* مخفی کردن دکمه همبرگری فقط برای والدین */
    body.role-parent .mobile-menu-btn {
        display: none !important;
    }

    /* اطمینان از اینکه منوی اصلی باز نمی‌شود */
    body.role-parent .main-nav {
        display: none !important;
    }
}

/* --- اصلاحیه نهایی v17: فیکس منوی والدین و رنگ‌بندی خوانا --- */

@media (max-width: 992px) {

    /* 1. مخفی کردن قطعی منوی همبرگری برای والدین */
    body.role-parent #mobile-menu-toggle {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    body.role-parent .main-nav {
        display: none !important;
    }

    /* 2. اصلاح رنگ‌بندی لینک‌های فعال در زیرمنو (برای خوانایی بهتر) */
    .nav-dropdown-content a.active {
        background-color: #e8f0fe !important;
        /* آبی/بنفش خیلی روشن و ملایم */
        color: var(--primary-color) !important;
        /* متن بنفش تیره */
        font-weight: 800 !important;
        border-right: 4px solid var(--primary-color);
        /* خط تاکید در سمت راست */
        padding-right: 15px !important;
        /* اصلاح فاصله */
        border-radius: 4px 0 0 4px;
        /* گوشه‌های گرد سمت چپ */
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    }

    /* حالت هاور برای لینک‌های زیرمنو */
    .nav-dropdown-content a:hover {
        background-color: #f8f9fa;
        color: #333;
    }

    /* اصلاح دکمه اصلی دراپ‌داون وقتی باز است */
    .nav-dropdown.active .nav-dropbtn {
        background-color: var(--primary-color) !important;
        /* پس‌زمینه بنفش */
        color: #fff !important;
        /* متن سفید (کاملا خوانا) */
        border-radius: 12px 12px 0 0;
        /* پایین صاف شود */
        box-shadow: 0 4px 10px rgba(142, 68, 173, 0.3);
    }

    /* تغییر رنگ فلش وقتی منو باز است */
    .nav-dropdown.active .nav-dropbtn .arrow {
        color: #fff !important;
        opacity: 0.9;
    }

    /* تنظیم فاصله آیتم‌های زیرمنو */
    .nav-dropdown-content {
        padding: 8px 0;
        background-color: #fff;
        border: 2px solid var(--primary-color);
        /* کادر دور زیرمنو */
        border-top: none;
        border-radius: 0 0 12px 12px;
    }
}

/* --- اصلاحیه نهایی v18: رفع مشکل خوانایی منوی دراپ‌داون (دسکتاپ) --- */

/* استایل لینک فعال در منوی دراپ‌داون */
.nav-dropdown-content a.active {
    background-color: #f3e5f5 !important;
    /* بنفش خیلی روشن برای پس‌زمینه */
    color: #6a1b9a !important;
    /* بنفش تیره برای متن (کنتراست بالا) */
    font-weight: 800 !important;
    /* بولد برای تاکید */
    border-right: 4px solid var(--primary-color);
    /* نشانگر فعال بودن */
}

/* حالت هاور روی لینک فعال */
.nav-dropdown-content a.active:hover {
    background-color: #e1bee7 !important;
    /* کمی تیره‌تر هنگام هاور */
    color: #4a148c !important;
}

/* --- اصلاحیه نهایی v19: استایل مدرن برای تب‌های داشبورد دانش‌آموز --- */

/* استایل آیتم‌های لیدربورد (مشابه لاگ‌ها اما با جزییات رتبه) */
.leaderboard-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px;
    border-bottom: 1px solid #f0f0f0;
    transition: all 0.2s ease;
    background: #fff;
}

.leaderboard-item:last-child {
    border-bottom: none;
}

.leaderboard-item:hover {
    background-color: #fcfcfc;
    transform: translateX(-5px);
}

/* ردیف خود دانش‌آموز (هایلایت) */
.leaderboard-item.is-me {
    background-color: #F4ECF7;
    /* بنفش روشن */
    border-right: 4px solid var(--primary-color);
}

/* مدال رتبه */
.lb-rank {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-weight: 800;
    font-family: var(--font-game);
    margin-left: 15px;
    font-size: 1rem;
    background: #f0f0f0;
    color: #666;
}

/* رنگ مدال‌ها */
.lb-rank.rank-1 {
    background: #FFD700;
    color: #fff;
    box-shadow: 0 2px 5px rgba(255, 215, 0, 0.4);
}

.lb-rank.rank-2 {
    background: #C0C0C0;
    color: #fff;
}

.lb-rank.rank-3 {
    background: #CD7F32;
    color: #fff;
}

/* اطلاعات دانش‌آموز در لیست */
.lb-user {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-grow: 1;
}

.lb-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.lb-name {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text-color);
}

.lb-you-tag {
    font-size: 0.7rem;
    background: var(--primary-color);
    color: white;
    padding: 2px 6px;
    border-radius: 6px;
    margin-right: 5px;
}

/* امتیاز */
.lb-score {
    font-family: var(--font-game);
    font-weight: 700;
    color: var(--xp-color);
    font-size: 1rem;
}

/* یکسان‌سازی استایل فید فعالیت با معلم */
.student-dashboard .unified-activity-feed {
    background: #fff;
    border-radius: 0 0 16px 16px;
    /* گرد کردن پایین کارت */
}

/* --- اصلاحیه نهایی v20: بازطراحی صفحه لیدربورد کامل --- */

/* کانتینر لیست لیدربورد */
.leaderboard-list-wrapper {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    border: 1px solid #f0f0f0;
}

/* اصلاح آیتم‌های لیدربورد برای صفحه کامل */
.leaderboard-item {
    padding: 18px 20px !important;
    /* فضای بیشتر */
}

/* استایل ویژه برای ۳ نفر اول */
.leaderboard-item .rank-1 {
    transform: scale(1.2);
    box-shadow: 0 4px 15px rgba(255, 215, 0, 0.5) !important;
    border: 2px solid #fff;
}

.leaderboard-item .rank-2 {
    transform: scale(1.1);
    box-shadow: 0 4px 10px rgba(192, 192, 192, 0.5) !important;
    border: 2px solid #fff;
}

.leaderboard-item .rank-3 {
    transform: scale(1.05);
    box-shadow: 0 4px 10px rgba(205, 127, 50, 0.5) !important;
    border: 2px solid #fff;
}

/* استایل کارت تیم (مدرن) */
.team-leaderboard-item {
    background: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 16px;
    margin-bottom: 15px;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
}

.team-leaderboard-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.team-leaderboard-item.is-my-team {
    border: 2px solid var(--primary-color);
    background-color: #FAF5FF;
}

/* هدر آکاردئون تیم */
.team-header-row {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    cursor: pointer;
    justify-content: space-between;
}

.team-info-group {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-grow: 1;
}

.team-rank-badge-large {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: 800;
    color: #fff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    font-family: var(--font-game);
}

.team-name-large {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--text-color);
}

.team-stats-group {
    display: flex;
    align-items: center;
    gap: 20px;
}

.team-xp-pill {
    background: #FEF9E7;
    color: var(--xp-color);
    padding: 5px 12px;
    border-radius: 20px;
    font-weight: 800;
    font-family: var(--font-game);
    font-size: 1rem;
    border: 1px solid #FFF3CD;
}

.team-toggle-icon {
    font-size: 1.5rem;
    color: var(--primary-color);
    transition: transform 0.3s ease;
}

/* حالت باز شده */
.team-leaderboard-item.open .team-toggle-icon {
    transform: rotate(45deg);
}

.team-leaderboard-item.open .team-content {
    max-height: 500px;
    /* اجازه نمایش محتوا */
    padding-bottom: 20px;
    opacity: 1;
}

/* محتوای آکاردئون (گرید اعضا) */
.team-content {
    max-height: 0;
    overflow: hidden;
    transition: all 0.4s ease-out;
    opacity: 0;
    background: #fcfcfc;
    border-top: 1px dashed #eee;
}

/* --- اصلاحیه نهایی v21: تالار افتخارات گیمیفای شده --- */

/* 1. سکوی قهرمانی (Podium) */
.podium-container {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    margin-bottom: 3rem;
    gap: 15px;
    padding-top: 20px;
}

.podium-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.podium-item:hover {
    transform: scale(1.05);
}

.podium-avatar-wrapper {
    position: relative;
    margin-bottom: -15px;
    z-index: 2;
}

.podium-avatar {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    border: 4px solid #fff;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    background: #fff;
}

.podium-crown {
    position: absolute;
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 2rem;
    animation: floatCrown 2s infinite ease-in-out;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

@keyframes floatCrown {

    0%,
    100% {
        transform: translateX(-50%) translateY(0);
    }

    50% {
        transform: translateX(-50%) translateY(-5px);
    }
}

.podium-base {
    width: 90px;
    border-radius: 15px 15px 0 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 20px;
    color: #fff;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
    text-align: center;
    position: relative;
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.podium-rank {
    font-family: var(--font-game);
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1;
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.2);
}

.podium-name {
    font-size: 0.8rem;
    font-weight: 700;
    margin-top: 5px;
    padding: 0 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

.podium-xp {
    background: rgba(0, 0, 0, 0.2);
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.75rem;
    margin-top: 5px;
    font-weight: bold;
}

/* تنظیمات خاص هر رتبه */
.rank-1-podium {
    order: 2;
    z-index: 3;
}

.rank-1-podium .podium-base {
    height: 140px;
    background: linear-gradient(180deg, #FFD700 0%, #FDB931 100%);
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.4);
}

.rank-1-podium .podium-avatar {
    width: 90px;
    height: 90px;
    border-color: #FFD700;
}

.rank-2-podium {
    order: 1;
}

.rank-2-podium .podium-base {
    height: 110px;
    background: linear-gradient(180deg, #E0E0E0 0%, #BDBDBD 100%);
}

.rank-2-podium .podium-avatar {
    border-color: #E0E0E0;
}

.rank-3-podium {
    order: 3;
}

.rank-3-podium .podium-base {
    height: 90px;
    background: linear-gradient(180deg, #E6A570 0%, #CD7F32 100%);
}

.rank-3-podium .podium-avatar {
    border-color: #CD7F32;
}

/* 2. لیست نفرات بعدی (کارت‌های براق) */
.leaderboard-list-wrapper {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

.leaderboard-item {
    margin-bottom: 10px;
    border-radius: 16px !important;
    border: none !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
    background: #fff;
    position: relative;
    overflow: hidden;
}

/* بج رتبه برای نفرات 4 به بعد */
.lb-rank {
    background: #f0f2f5;
    color: #777;
    font-size: 0.9rem;
    width: 28px;
    height: 28px;
}

/* 3. بازطراحی کارت تیم (Team Battle Card) */
.team-leaderboard-item {
    background: #fff;
    border-radius: 20px;
    margin-bottom: 20px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06);
    border: none !important;
    position: relative;
    overflow: hidden;
}

/* نوار رنگی تیم در سمت راست */
.team-leaderboard-item::before {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 6px;
    background-color: var(--team-color, #ccc);
}

.team-header-row {
    padding: 20px;
    background: linear-gradient(to left, rgba(255, 255, 255, 0.8), #fff);
}

.team-rank-badge-large {
    width: 50px;
    height: 50px;
    font-size: 1.4rem;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    border: 3px solid #fff;
    position: relative;
    z-index: 2;
}

/* نام تیم با فونت بزرگ */
.team-name-large {
    font-size: 1.3rem;
    color: var(--text-color);
    margin-bottom: 4px;
}

/* آمار تیم */
.team-xp-pill {
    background: var(--xp-gradient);
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    font-size: 1.1rem;
    padding: 6px 15px;
    box-shadow: 0 4px 10px rgba(241, 196, 15, 0.4);
}

/* آواتارهای اعضا در هدر */
.team-members-preview {
    display: flex;
    margin-right: 10px;
}

.team-members-preview img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid #fff;
    margin-right: -10px;
    /* روی هم افتادن */
    background: #eee;
}

/* محتوای باز شده تیم */
.team-content {
    background-color: #fbfbfb;
    padding: 20px !important;
}

/* موبایل */
@media (max-width: 768px) {
    .podium-container {
        align-items: flex-end;
        gap: 5px;
    }

    .podium-base {
        width: 70px;
    }

    .podium-name {
        font-size: 0.7rem;
    }

    .podium-avatar {
        width: 50px;
        height: 50px;
    }

    .rank-1-podium .podium-avatar {
        width: 70px;
        height: 70px;
    }

    .team-header-row {
        flex-direction: column;
        gap: 15px;
        align-items: flex-start;
    }

    .team-stats-group {
        width: 100%;
        justify-content: space-between;
    }

    .team-info-group {
        width: 100%;
    }
}

/* --- اصلاحیه نهایی v22: فیکس چیدمان هدر لیدربورد در موبایل --- */

.leaderboard-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    margin-bottom: 2rem;
    padding-top: 1rem;
    text-align: center;
}

/* اطمینان از اینکه متن و بج فصل فاصله مناسبی دارند */
.leaderboard-header h2 {
    margin-bottom: 5px !important;
}

@media (max-width: 768px) {

    /* فاصله بیشتر برای جلوگیری از تداخل با نوار بالا */
    .dashboard-container {
        padding-top: 10px;
    }

    .leaderboard-header {
        margin-bottom: 1.5rem;
    }
}

/* --- اصلاحیه نهایی v23: گیمیفیکیشن پیشرفته و موبایل ویو تیمی --- */

/* 1. انیمیشن‌های سراسری */
@keyframes slideInUpSoft {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes shimmerMove {
    0% {
        transform: translateX(-150%) skewX(-20deg);
    }

    100% {
        transform: translateX(200%) skewX(-20deg);
    }
}

@keyframes pulseGold {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.4);
    }

    70% {
        box-shadow: 0 0 0 15px rgba(255, 215, 0, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(255, 215, 0, 0);
    }
}

/* کلاس برای اعمال انیمیشن ورود */
.animate-entry {
    opacity: 0;
    /* پیش‌فرض مخفی */
    animation: slideInUpSoft 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* 2. افکت درخشش (Shimmer) برای رتبه‌های برتر */
.has-shimmer {
    position: relative;
    overflow: hidden;
}

.has-shimmer::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.4) 50%,
            rgba(255, 255, 255, 0) 100%);
    transform: translateX(-150%) skewX(-20deg);
    animation: shimmerMove 3s infinite ease-in-out;
    pointer-events: none;
}

/* 3. بازطراحی کارت تیم (مدرن و گیمیفای شده) */
.team-leaderboard-item {
    border: none !important;
    background: #fff;
    border-radius: 24px;
    margin-bottom: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
}

.team-leaderboard-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
}

/* نوار رنگی تیم (سمت راست) */
.team-color-strip {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 8px;
    z-index: 2;
}

/* هدر تیم */
.team-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 25px;
    background: linear-gradient(to left, #ffffff, #fcfcfc);
    position: relative;
    z-index: 1;
}

/* بج رتبه تیم (شبیه سپر) */
.team-rank-badge-large {
    width: 55px;
    height: 55px;
    font-size: 1.6rem;
    border-radius: 18px;
    /* کمی مربعی‌تر */
    transform: rotate(-5deg);
    /* چرخش بازی‌گونه */
    box-shadow: 3px 3px 0px rgba(0, 0, 0, 0.1);
    /* سایه سخت */
    border: 2px solid #fff;
    margin-left: 20px;
    flex-shrink: 0;
}

/* رنگ‌های خاص رتبه‌های تیم */
.team-rank-1 .team-rank-badge-large {
    background: #FFD700;
    color: #fff;
    animation: pulseGold 2s infinite;
}

.team-rank-2 .team-rank-badge-large {
    background: #C0C0C0;
    color: #fff;
}

.team-rank-3 .team-rank-badge-large {
    background: #CD7F32;
    color: #fff;
}

/* اطلاعات تیم */
.team-info-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.team-name-large {
    font-size: 1.25rem;
    margin-bottom: 8px;
}

.team-meta {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 0.85rem;
    color: #888;
}

/* آمار XP تیم */
.team-xp-badge {
    background: #f0f2f5;
    padding: 6px 14px;
    border-radius: 50px;
    font-weight: 800;
    font-family: var(--font-game);
    color: var(--text-color);
    border: 2px solid #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.team-rank-1 .team-xp-badge {
    background: #FFF8E1;
    color: #F57C00;
    border-color: #FFD700;
}

/* آیکون باز/بسته شدن */
.team-toggle-btn {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: #f0f2f5;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    transition: all 0.3s;
    margin-right: 15px;
}

.team-leaderboard-item.open .team-toggle-btn {
    background: var(--primary-color);
    color: #fff;
    transform: rotate(45deg);
}

/* 4. موبایل ویو پیشرفته برای تیم */
@media (max-width: 768px) {
    .team-header-row {
        display: grid;
        grid-template-columns: auto 1fr auto;
        /* سه ستون: رتبه | اطلاعات | دکمه */
        grid-template-areas:
            "rank info toggle"
            "xp xp xp";
        /* XP در ردیف پایین */
        gap: 15px 15px;
        padding: 15px;
    }

    .team-rank-badge-large {
        grid-area: rank;
        margin: 0;
        width: 45px;
        height: 45px;
        font-size: 1.3rem;
    }

    .team-info-content {
        grid-area: info;
    }

    .team-toggle-btn {
        grid-area: toggle;
        margin: 0;
    }

    .team-stats-group {
        grid-area: xp;
        width: 100%;
        display: flex;
        justify-content: space-between;
        /* پخش کردن در عرض */
        align-items: center;
        background: #fafafa;
        padding: 10px;
        border-radius: 12px;
        margin-top: 5px;
    }

    .team-xp-pill {
        font-size: 1rem;
        background: transparent;
        box-shadow: none;
        padding: 0;
        color: var(--xp-color);
    }
}

/* --- اصلاحیه نهایی v24: فیکس خوانایی رتبه و رنگ XP تیم --- */

/* 1. اصلاح خوانایی عدد رتبه برای تیم‌های غیر برتر (رتبه 4 به بعد) */
.team-rank-badge-large {
    background-color: #f0f2f5 !important;
    /* پس‌زمینه خاکستری روشن */
    color: #555 !important;
    /* متن تیره برای خوانایی */
    box-shadow: none !important;
    border: 1px solid #e0e0e0 !important;
}

/* بازگرداندن استایل برای 3 تیم برتر (رنگ‌های خاص) */
.team-rank-1 .team-rank-badge-large {
    background-color: #FFD700 !important;
    color: #fff !important;
    box-shadow: 0 4px 10px rgba(255, 215, 0, 0.4) !important;
    border: 2px solid #fff !important;
}

.team-rank-2 .team-rank-badge-large {
    background-color: #C0C0C0 !important;
    color: #fff !important;
    box-shadow: 0 4px 10px rgba(192, 192, 192, 0.4) !important;
    border: 2px solid #fff !important;
}

.team-rank-3 .team-rank-badge-large {
    background-color: #CD7F32 !important;
    color: #fff !important;
    box-shadow: 0 4px 10px rgba(205, 127, 50, 0.4) !important;
    border: 2px solid #fff !important;
}

/* 2. اصلاح رنگ‌بندی بج XP برای هماهنگی با رتبه */
.team-xp-pill {
    background-color: #f8f9fa;
    /* پیش‌فرض خنثی */
    color: var(--text-color);
    border: 1px solid #eee;
}

/* رنگ اختصاصی XP برای رتبه 1 (طلایی) */
.team-rank-1 .team-xp-pill {
    background-color: #FFF8E1 !important;
    color: #F57C00 !important;
    border-color: #FFE082 !important;
}

/* رنگ اختصاصی XP برای رتبه 2 (نقره‌ای/آبی ملایم) */
.team-rank-2 .team-xp-pill {
    background-color: #F5F5F5 !important;
    /* خاکستری خیلی روشن */
    color: #7F8C8D !important;
    /* خاکستری تیره */
    border-color: #BDC3C7 !important;
}

/* رنگ اختصاصی XP برای رتبه 3 (برنزی/قهوه‌ای ملایم) */
.team-rank-3 .team-xp-pill {
    background-color: #FBE9E7 !important;
    /* قرمز/قهوه‌ای خیلی روشن */
    color: #D84315 !important;
    /* آجری */
    border-color: #FFAB91 !important;
}

/* --- اصلاحیه نهایی v25: رنگ برنزی مشخص برای XP تیم سوم --- */

/* استایل دقیق برای XP تیم رتبه ۳ (برنزی) */
.team-rank-3 .team-xp-pill {
    background-color: #FFF3E0 !important;
    /* پس‌زمینه نارنجی/کرم خیلی روشن */
    color: #BF360C !important;
    /* متن قهوه‌ای/آجری تیره */
    border: 1px solid #FFCCBC !important;
    /* کادر گلبهی/برنزی */
    box-shadow: 0 2px 5px rgba(191, 54, 12, 0.15) !important;
    /* سایه رنگی */
}

/* محض اطمینان: استایل XP تیم رتبه ۲ (نقره‌ای) */
.team-rank-2 .team-xp-pill {
    background-color: #F5F5F5 !important;
    color: #546E7A !important;
    /* آبی‌خاکستری */
    border: 1px solid #CFD8DC !important;
}

/* --- اصلاحیه نهایی v26: فیکس نام کلاس و رنگ برنزی XP --- */

/* استایل پایه بج XP تیم (اصلاح نام کلاس به team-xp-badge) */
.team-xp-badge {
    background-color: #f8f9fa;
    color: var(--text-color);
    border: 1px solid #eee;
    /* اطمینان از اعمال استایل‌های پایه */
    padding: 6px 14px;
    border-radius: 50px;
    font-weight: 800;
    font-family: var(--font-game);
}

/* رنگ طلایی برای تیم اول */
.team-rank-1 .team-xp-badge {
    background-color: #FFF8E1 !important;
    color: #F57C00 !important;
    border-color: #FFE082 !important;
    box-shadow: 0 2px 8px rgba(255, 193, 7, 0.2) !important;
}

/* رنگ نقره‌ای برای تیم دوم */
.team-rank-2 .team-xp-badge {
    background-color: #F5F5F5 !important;
    color: #546E7A !important;
    border-color: #CFD8DC !important;
    box-shadow: 0 2px 8px rgba(144, 164, 174, 0.2) !important;
}

/* رنگ برنزی/آجری برای تیم سوم (هدف اصلی) */
.team-rank-3 .team-xp-badge {
    background-color: #FFF3E0 !important;
    /* کرم گرم */
    color: #D84315 !important;
    /* آجری تیره */
    border-color: #FFAB91 !important;
    /* برنزی روشن */
    box-shadow: 0 2px 8px rgba(216, 67, 21, 0.15) !important;
}

/* --- اصلاحیه نهایی v27: فیکس پنل دانش‌آموز (منو، پودیوم، تیم) --- */

@media (max-width: 992px) {

    /* 1. حذف منوی همبرگری برای دانش‌آموز (علاوه بر والد) */
    body.role-student #mobile-menu-toggle,
    body.role-parent #mobile-menu-toggle {
        display: none !important;
    }

    body.role-student .main-nav,
    body.role-parent .main-nav {
        display: none !important;
    }

    /* تنظیم فاصله پایین صفحه برای دانش‌آموز (چون منوی پایین دارد) */
    body.role-student {
        padding-bottom: 80px;
    }

    /* 2. اصلاح چیدمان داشبورد دانش‌آموز در موبایل */
    .student-dashboard .dashboard-columns {
        display: flex;
        flex-direction: column;
        gap: 25px !important;
        /* فاصله بیشتر بین برترین‌ها و گزارش */
    }

    /* اطمینان از اینکه کارت‌ها تمام عرض هستند */
    .student-dashboard .card {
        width: 100%;
        margin-bottom: 0;
    }
}

/* 3. اصلاح اسکرول تیم (نمایش تمام اعضا) */
/* وقتی آکاردئون باز است، ارتفاع را خیلی زیاد میکنیم تا همه جا شوند */
.team-leaderboard-item.open .team-content {
    max-height: 3000px !important;
    /* افزایش ارتفاع برای نمایش لیست کامل */
    overflow: visible !important;
    /* جلوگیری از اسکرول درونی (اجازه به اسکرول صفحه) */
    padding-bottom: 30px;
}

/* 4. بازطراحی سکوی قهرمانی (Podium) - بزرگتر و منعطف */
.podium-container {
    align-items: flex-end;
    min-height: 280px;
    /* ارتفاع بیشتر برای جلوه بهتر */
    margin-bottom: 4rem;
    /* فاصله با لیست پایین */
}

.podium-avatar {
    width: 85px !important;
    height: 85px !important;
    border-width: 5px !important;
}

/* نفر اول خیلی بزرگتر */
.rank-1-podium .podium-avatar {
    width: 110px !important;
    height: 110px !important;
    box-shadow: 0 10px 25px rgba(255, 215, 0, 0.5) !important;
}

/* مدیریت نام‌های طولانی */
.podium-name {
    font-size: 0.9rem !important;
    font-weight: 800 !important;
    margin-top: 8px;
    padding: 0 8px;
    width: 100%;

    /* اجازه شکستن خط */
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;

    /* تنظیم ارتفاع برای دو خط */
    line-height: 1.3;
    min-height: 2.6em;
    display: flex;
    align-items: center;
    justify-content: center;
}

.podium-base {
    width: 100px;
    /* پایه عریض‌تر */
    padding-top: 25px;
}

/* تنظیمات موبایل برای پودیوم */
@media (max-width: 768px) {
    .podium-container {
        gap: 8px;
    }

    .podium-base {
        width: 80px;
    }

    .podium-avatar {
        width: 65px !important;
        height: 65px !important;
    }

    .rank-1-podium .podium-avatar {
        width: 90px !important;
        height: 90px !important;
    }

    .podium-name {
        font-size: 0.8rem !important;
    }
}

/* --- اصلاحیه نهایی v28: فیکس چیدمان موبایل برای برترین‌ها و گزارش --- */

@media (max-width: 768px) {

    /* 1. کانتینر اصلی لیست‌ها را تمام عرض و عمودی می‌کنیم */
    .leaderboard-item,
    .recent-log-item {
        flex-direction: row !important;
        /* آیتم‌ها کنار هم باشند (آواتار - متن - امتیاز) */
        align-items: center !important;
        justify-content: space-between !important;
        padding: 12px 5px !important;
        /* کاهش پدینگ برای فضای بیشتر */
        flex-wrap: nowrap !important;
        /* جلوگیری از شکستن خط */
    }

    /* 2. تنظیم عرض بخش‌های داخلی */
    .lb-user,
    .log-col-activity {
        flex-grow: 1 !important;
        min-width: 0;
        /* اجازه کوچک شدن متن طولانی */
        padding: 0 10px !important;
    }

    /* مدیریت متن‌های طولانی در موبایل */
    .lb-name,
    .activity-badge {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 150px;
        /* محدودیت عرض نام */
        display: block;
    }

    /* 3. فیکس کردن بخش امتیاز (XP) */
    .lb-score,
    .log-col-score {
        flex-shrink: 0 !important;
        /* جلوگیری از جمع شدن */
        white-space: nowrap;
        font-size: 0.9rem !important;
        min-width: 60px;
        text-align: left;
    }

    /* 4. تنظیم آیکون رتبه و آواتار */
    .lb-rank {
        margin-left: 8px !important;
        width: 28px !important;
        height: 28px !important;
        font-size: 0.9rem !important;
    }

    .lb-avatar {
        width: 35px !important;
        height: 35px !important;
    }

    /* 5. اصلاح یادداشت‌ها در گزارش */
    .recent-log-item {
        flex-wrap: wrap !important;
        /* اجازه شکستن خط فقط برای یادداشت */
    }

    /* خط اول (هدر گزارش) همیشه در یک خط باشد */
    .recent-log-item>div:first-child {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    /* یادداشت به خط بعدی برود */
    .recent-log-item>div:nth-child(2) {
        width: 100%;
        margin-top: 8px;
        padding-right: 45px;
        /* ایندنت برای زیبایی */
    }
}

/* --- اصلاحیه نهایی v29: وسط‌چین کردن لیست‌ها و دکمه‌ها در داشبورد دانش‌آموز --- */

/* 1. حذف فاصله اضافی (Padding) پیش‌فرض لیست‌ها */
.ranking-list-mini,
.activity-feed-list {
    padding: 0 !important;
    /* حذف پدینگ راست/چپ پیش‌فرض */
    margin: 0 !important;
    /* حذف مارجین */
    list-style: none !important;
    /* حذف بولت‌ها */
    width: 100%;
    /* اطمینان از تمام عرض بودن */
}

/* 2. تنظیم آیتم‌های لیست برای پر کردن فضا */
.ranking-list-mini li,
.activity-feed-list li {
    width: 100%;
    box-sizing: border-box;
    /* محاسبه صحیح عرض */
    margin-left: 0;
    margin-right: 0;
}

/* 3. وسط‌چین کردن دکمه "مشاهده جدول کامل" */
#tab-leaderboard .text-center,
#tab-activity .text-center {
    display: flex;
    /* استفاده از فلکس برای سنتر کردن دقیق */
    justify-content: center;
    /* وسط‌چین افقی */
    align-items: center;
    width: 100%;
    margin-top: 1rem;
}

/* اطمینان از اینکه خود دکمه عرض ثابتی که باعث کجی شود ندارد */
#tab-leaderboard .btn,
#tab-activity .btn {
    margin: 0 auto;
    /* وسط‌چین کلاسیک */
    display: inline-flex;
}

/* (اختیاری) اگر کارت اصلی پدینگ زیادی دارد که در موبایل فضا را می‌گیرد */
@media (max-width: 768px) {
    .student-dashboard .card {
        padding: 1.25rem 1rem !important;
        /* تنظیم پدینگ کارت در موبایل */
    }

    /* کمی فاصله بیشتر برای متن‌های طولانی در لیست */
    .ranking-list-mini li>div,
    .activity-feed-list li>div {
        width: 100%;
    }
}

/* --- اصلاحیه نهایی v30: بازطراحی متقارن و مدرن داشبورد دانش‌آموز --- */

/* 1. کانتینر مرکزی متمرکز */
.student-dashboard {
    max-width: 1000px;
    /* محدود کردن عرض برای توازن */
    margin: 0 auto;
}

/* 2. بازطراحی کارت قهرمان (Hero Card) - متقارن */
.hero-card {
    display: flex;
    flex-direction: column;
    /* در موبایل زیر هم */
    align-items: center;
    background: #fff;
    border: none;
    border-radius: 30px;
    /* گوشه‌های خیلی گرد */
    box-shadow: 0 20px 40px rgba(142, 68, 173, 0.1);
    padding: 0;
    /* پدینگ صفر برای هدر رنگی */
    overflow: hidden;
    margin-bottom: 2.5rem;
    position: relative;
}

/* پس‌زمینه رنگی بالای کارت */
.hero-header-bg {
    width: 100%;
    height: 120px;
    background: linear-gradient(135deg, var(--primary-color), #9b59b6);
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

/* آواتار که روی خط مرزی قرار می‌گیرد */
.hero-avatar-wrapper {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    border: 5px solid #fff;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
    background: #fff;
    transform: translateY(50%);
    /* نصفش پایین خط باشد */
    position: relative;
    z-index: 2;
}

.hero-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: none;
    box-shadow: none;
}

/* بخش اطلاعات پایین کارت */
.hero-body {
    width: 100%;
    padding: 60px 30px 30px 30px;
    /* فضای بالا برای آواتار */
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hero-name {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--text-color);
    margin-bottom: 0.5rem;
    font-family: var(--font-family);
}

.hero-stats-row {
    display: flex;
    justify-content: center;
    gap: 2rem;
    width: 100%;
    margin-top: 1.5rem;
    flex-wrap: wrap;
}

.stat-pill {
    background: #f8f9fa;
    padding: 10px 20px;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 120px;
    border: 2px solid transparent;
    transition: transform 0.2s;
}

.stat-pill:hover {
    transform: translateY(-3px);
    border-color: #eee;
}

.stat-pill .value {
    font-size: 1.4rem;
    font-weight: 800;
    font-family: var(--font-game);
}

.stat-pill .label {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-top: 2px;
}

/* استایل اختصاصی هر آمار */
.stat-pill.level .value {
    color: var(--primary-color);
}

.stat-pill.coins .value {
    color: var(--coin-color);
}

.stat-pill.xp .value {
    color: var(--xp-color);
}


/* نوار XP باریک و زیبا */
.hero-xp-progress {
    width: 100%;
    max-width: 500px;
    margin-top: 1.5rem;
    position: relative;
}

.mini-progress-bar {
    height: 10px;
    background: #eee;
    border-radius: 10px;
    overflow: hidden;
}

.mini-progress-fill {
    height: 100%;
    background: var(--xp-gradient);
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(241, 196, 15, 0.4);
}

.xp-text-overlay {
    font-size: 0.8rem;
    color: #777;
    margin-top: 5px;
    display: flex;
    justify-content: space-between;
    font-weight: 700;
}

/* 3. تب‌های ناوبری (کپسولی و مرکزی) */
.tab-nav-centered {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 2rem;
    background: #fff;
    padding: 8px;
    border-radius: 50px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    flex-wrap: wrap;
}

.tab-pill {
    padding: 10px 25px;
    border-radius: 40px;
    cursor: pointer;
    font-weight: 700;
    color: #777;
    transition: all 0.3s ease;
    text-align: center;
    display: flex;
    align-items: center;
    gap: 8px;
}

.tab-pill:hover {
    background: #f5f5f5;
    color: #555;
}

.tab-pill.active {
    background: var(--primary-color);
    color: #fff;
    box-shadow: 0 4px 12px rgba(142, 68, 173, 0.3);
    transform: scale(1.05);
}

.tab-pill i {
    font-style: normal;
    font-size: 1.2rem;
}

/* 4. کانتینر محتوای تب (تمیز و سفید) */
.content-panel-wrapper {
    background: #fff;
    border-radius: 24px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
    padding: 2rem;
    min-height: 400px;
    border: 1px solid #fcfcfc;
}

/* 5. استایل تایم‌لاین برای گزارش فعالیت */
.timeline-feed {
    position: relative;
    padding-right: 20px;
    border-right: 3px solid #f0f0f0;
    margin-right: 10px;
}

.timeline-item {
    position: relative;
    margin-bottom: 25px;
    padding-right: 20px;
}

.timeline-item::before {
    content: '';
    position: absolute;
    right: -28px;
    /* روی خط قرار گیرد */
    top: 5px;
    width: 14px;
    height: 14px;
    background: #fff;
    border: 3px solid var(--primary-color);
    border-radius: 50%;
    z-index: 2;
}

.timeline-date {
    font-size: 0.8rem;
    color: #aaa;
    margin-bottom: 5px;
    display: block;
}

.timeline-content {
    background: #f9f9f9;
    padding: 15px;
    border-radius: 12px;
    border-right: 4px solid var(--primary-light);
}

/* حالت موبایل */
@media (max-width: 768px) {
    .hero-header-bg {
        height: 100px;
    }

    .hero-avatar-wrapper {
        width: 90px;
        height: 90px;
    }

    .hero-body {
        padding: 50px 20px 20px 20px;
    }

    .tab-nav-centered {
        width: 100%;
        border-radius: 16px;
        gap: 5px;
    }

    .tab-pill {
        flex: 1;
        padding: 10px 5px;
        font-size: 0.9rem;
        justify-content: center;
        border-radius: 12px;
    }

    .tab-pill i {
        display: none;
    }

    /* حذف آیکون در موبایل برای جا شدن متن */

    .content-panel-wrapper {
        padding: 1.5rem 1rem;
    }
}

/* --- اصلاحیه نهایی v31: تضمین نمایش منو در دسکتاپ --- */

/* 1. اجبار به نمایش منو در دسکتاپ برای همه */
@media (min-width: 993px) {
    .main-nav {
        display: flex !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        background: transparent !important;
        box-shadow: none !important;
        position: static !important;
        width: auto !important;
        flex-direction: row !important;
        border: none !important;
    }

    .mobile-menu-btn {
        display: none !important;
    }
}

/* 2. تنظیمات موبایل */
@media (max-width: 992px) {

    /* برای والد و دانش‌آموز: حذف کامل منوی بالا */
    body.role-parent .main-nav,
    body.role-parent .mobile-menu-btn,
    body.role-student .main-nav,
    body.role-student .mobile-menu-btn {
        display: none !important;
    }

    /* برای معلم: نمایش دکمه همبرگری */
    body.role-teacher .mobile-menu-btn {
        display: block !important;
    }
}

/* --- اصلاحیه نهایی v32: استایل‌های فروشگاه، پیشرفت و پروفایل --- */

/* --- 1. استایل فروشگاه (Marketplace) --- */
.store-header-card {
    background: linear-gradient(135deg, #F39C12 0%, #F1C40F 100%);
    color: #fff;
    border-radius: 24px;
    padding: 2rem;
    text-align: center;
    margin-bottom: 2.5rem;
    box-shadow: 0 10px 30px rgba(243, 156, 18, 0.3);
    position: relative;
    overflow: hidden;
}

.store-header-card::before {
    content: '🛒';
    position: absolute;
    font-size: 10rem;
    opacity: 0.1;
    right: -20px;
    bottom: -20px;
    transform: rotate(-20deg);
}

.store-balance-wrapper {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(5px);
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 50px;
    padding: 10px 30px;
    display: inline-flex;
    align-items: center;
    gap: 15px;
    margin-top: 1rem;
}

.store-coin-icon {
    font-size: 2rem;
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.2));
}

.store-balance-amount {
    font-family: var(--font-game);
    font-size: 2rem;
    font-weight: 700;
}

/* کارت آیتم فروشگاه (Shop Item) */
.shop-item-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 20px;
    padding: 1.5rem;
    text-align: center;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 320px;
    /* ارتفاع ثابت برای نظم */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
}

.shop-item-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
    border-color: var(--primary-light);
}

.shop-item-image {
    width: 100px;
    height: 100px;
    object-fit: contain;
    margin: 0 auto 1rem auto;
    filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.1));
    transition: transform 0.3s;
}

.shop-item-card:hover .shop-item-image {
    transform: scale(1.1) rotate(5deg);
}

.shop-item-price {
    background: #FEF9E7;
    color: var(--coin-color);
    font-family: var(--font-game);
    font-size: 1.1rem;
    padding: 5px 15px;
    border-radius: 15px;
    display: inline-block;
    margin-bottom: 10px;
    border: 1px solid #FFE082;
}

.shop-item-stock {
    font-size: 0.8rem;
    color: #999;
    margin-bottom: 15px;
    display: block;
}

.shop-item-stock.low {
    color: var(--danger-color);
    font-weight: bold;
}

/* دکمه خرید */
.btn-buy {
    width: 100%;
    border-radius: 12px;
    font-weight: 800;
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}


/* --- 2. استایل مسیر پیشرفت (Progress Stats) --- */
.stats-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}

.summary-card {
    background: #fff;
    padding: 1.5rem;
    border-radius: 20px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    border: 1px solid #f0f0f0;
    transition: transform 0.2s;
}

.summary-card:hover {
    transform: translateY(-3px);
}

.summary-icon {
    font-size: 2.5rem;
    margin-bottom: 10px;
    display: block;
}

.summary-value {
    font-family: var(--font-game);
    font-size: 1.8rem;
    color: var(--text-color);
    display: block;
}

.summary-label {
    color: var(--text-muted);
    font-size: 0.9rem;
    font-weight: 600;
}


/* --- 3. اصلاحات پروفایل (Profile) --- */
/* استفاده از کلاس‌های hero-card و tab-nav-centered که قبلاً ساختیم */

.profile-settings-form {
    max-width: 600px;
    margin: 0 auto;
}

.profile-pic-uploader {
    width: 120px;
    height: 120px;
    margin: 0 auto 2rem auto;
    position: relative;
}

.profile-pic-uploader img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid #fff;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
}

.profile-pic-edit-btn {
    position: absolute;
    bottom: 0;
    right: 0;
    background: var(--primary-color);
    color: #fff;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s;
}

.profile-pic-edit-btn:hover {
    transform: scale(1.1);
}

/* موبایل */
@media (max-width: 768px) {
    .shop-item-card {
        min-height: auto;
    }

    .store-header-card {
        padding: 1.5rem;
    }

    .store-balance-amount {
        font-size: 1.5rem;
    }
}

/* --- اصلاحیه نهایی v33: بهبود نمایش قفل و توضیحات کوله‌پشتی --- */

/* 1. استایل کارت قفل شده (واضح‌تر) */
.award-collection-card.locked {
    opacity: 1 !important;
    /* حذف شفافیت کلی برای خوانایی متن */
    background-color: #fcfcfc;
    border: 1px dashed #ccc !important;
}

.award-collection-card.locked .award-card-image {
    filter: grayscale(100%) contrast(80%);
    /* سیاه و سفید کردن عکس */
    opacity: 0.6;
    transition: all 0.3s ease;
}

/* 2. آیکون قفل (بزرگ و وسط‌چین) */
.award-card-lock-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2.5rem;
    color: #555;
    background: rgba(255, 255, 255, 0.8);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    z-index: 5;
}

/* 3. تولتیپ توضیحات (Tooltip) */
.award-collection-card .award-tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background: #333;
    color: #fff;
    padding: 10px;
    border-radius: 8px;
    font-size: 0.85rem;
    width: 200px;
    text-align: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    z-index: 20;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    pointer-events: none;
    /* جلوگیری از تداخل موس */
}

/* فلش پایین تولتیپ */
.award-collection-card .award-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: #333 transparent transparent transparent;
}

/* نمایش تولتیپ هنگام هاور (دسکتاپ) یا فوکوس (موبایل) */
.award-collection-card:hover .award-tooltip,
.award-collection-card:focus .award-tooltip,
.award-collection-card:active .award-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(-10px);
}

/* تغییر رنگ قفل هنگام هاور */
.award-collection-card.locked:hover .award-card-lock-icon {
    background: var(--danger-color);
    color: white;
    transform: translate(-50%, -50%) scale(1.1);
}

/* --- اصلاحیه نهایی v34: بازطراحی جامع موبایل ویو (تبدیل جدول به کارت + اصلاح گریدها) --- */

@media (max-width: 768px) {

    /* 1. تبدیل تمام جدول‌های معلم به لیست‌های کارتی مدرن */
    .teacher-dashboard table,
    .teacher-dashboard thead,
    .teacher-dashboard tbody,
    .teacher-dashboard th,
    .teacher-dashboard td,
    .teacher-dashboard tr {
        display: block;
    }

    /* مخفی کردن هدر جدول */
    .teacher-dashboard thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    /* استایل کارت برای هر ردیف */
    .teacher-dashboard tbody tr {
        background: #fff;
        border: 1px solid #f0f0f0;
        border-radius: 20px;
        /* گوشه‌های گرد */
        margin-bottom: 1.5rem;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
        /* سایه نرم */
        padding: 15px 20px;
        position: relative;
        transition: transform 0.2s;
    }

    .teacher-dashboard tbody tr:hover {
        transform: translateY(-3px);
        border-color: var(--primary-color);
    }

    /* استایل سلول‌ها */
    .teacher-dashboard td {
        border: none;
        border-bottom: 1px dashed #eee;
        position: relative;
        padding-right: 45% !important;
        /* فضا برای عنوان */
        padding-top: 12px;
        padding-bottom: 12px;
        text-align: left !important;
        /* مقدار سمت چپ */
        min-height: 40px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        /* تراز مقدار به چپ */
    }

    .teacher-dashboard td:last-child {
        border-bottom: none;
        padding-right: 0 !important;
        justify-content: center;
        /* دکمه‌ها وسط باشند */
        margin-top: 10px;
        gap: 10px;
        flex-wrap: wrap;
    }

    /* نمایش عنوان ستون (data-label) */
    .teacher-dashboard td:before {
        position: absolute;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
        width: 40%;
        white-space: nowrap;
        font-weight: 700;
        color: var(--primary-color);
        content: attr(data-label);
        text-align: right;
        font-size: 0.9rem;
    }

    /* مخفی کردن لیبل برای ستون عملیات */
    .teacher-dashboard td:last-child:before {
        display: none;
    }

    /* 2. اصلاح تمام گریدهای مدیریتی (فروشگاه، چالش‌ها، جوایز) */
    .dashboard-columns,
    .reward-grid,
    .store-item-grid,
    .challenge-grid,
    .awards-grid {
        display: flex;
        flex-direction: column;
        gap: 20px !important;
    }

    /* اطمینان از تمام عرض بودن کارت‌ها */
    .store-item-card,
    .challenge-card,
    .reward-card,
    .award-card {
        width: 100%;
        min-height: auto;
        /* ارتفاع منعطف */
    }

    /* 3. فیکس مدیریت تیم‌ها (Teams) در موبایل */
    .team-board-container {
        flex-direction: column;
        /* تیم‌ها زیر هم */
        background: transparent;
        border: none;
        padding: 0;
        overflow: visible;
    }

    .team-column {
        width: 100%;
        max-width: 100%;
        flex: none;
        margin-bottom: 20px;
        max-height: none;
        /* اجازه اسکرول صفحه */
        border-radius: 16px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    }

    /* 4. فیکس ویرایشگر نقشه گنج */
    .map-editor-wrapper {
        padding: 10px;
    }

    .map-step-admin {
        width: 160px;
        /* کارت‌های کوچکتر */
    }

    /* 5. دکمه‌های عملیاتی بزرگتر */
    .btn {
        width: 100%;
        /* دکمه‌های تمام عرض */
        justify-content: center;
        margin-bottom: 5px;
        padding: 12px;
    }

    td .btn {
        width: auto;
        /* دکمه‌های داخل کارت کوچک بمانند */
        flex: 1;
    }

    /* 6. فیکس تالار قهرمانان (معلم) */
    #individual-panel .ranking-card,
    #team-panel .team-leaderboard-card {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
        padding: 20px;
    }

    .ranking-card .rank-badge,
    .team-rank-badge {
        margin: 0 auto 15px auto;
        /* وسط‌چین کردن مدال */
    }

    .ranking-card .rank-xp,
    .team-leaderboard-card .rank-xp {
        margin-top: 10px;
        background: #f9f9f9;
        padding: 5px;
        border-radius: 10px;
    }
}

/* --- اصلاحیه نهایی v35: استایل مدرن مدیریت فروشگاه --- */

/* کارت آیتم در لیست مدیریت */
.store-item-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 16px;
    padding: 15px;
    text-align: center;
    transition: all 0.2s ease;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02);
}

.store-item-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    border-color: var(--primary-light);
}

/* تصویر آیتم */
.item-image-wrapper {
    width: 80px;
    height: 80px;
    background: #f9f9f9;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    border: 3px solid #fff;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.05);
}

.item-image {
    width: 60%;
    height: 60%;
    object-fit: contain;
}

/* نام آیتم */
.item-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-color);
    margin: 0 0 10px 0;
    line-height: 1.3;
    min-height: 2.6em;
    /* دو خط */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* بج قیمت (روی کارت ویترین) */
.item-badge-price {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #FFF8E1;
    color: var(--coin-color);
    font-weight: 800;
    font-size: 0.85rem;
    padding: 2px 8px;
    border-radius: 8px;
    border: 1px solid #FFE082;
    font-family: var(--font-game);
}

/* اطلاعات موجودی و سطح */
.item-details {
    width: 100%;
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--text-muted);
    background: #fcfcfc;
    padding: 5px;
    border-radius: 8px;
    margin-bottom: 5px;
}

.stock-info.low-stock {
    color: var(--danger-color);
    font-weight: bold;
}

.level-info {
    color: var(--primary-color);
    font-weight: 600;
}

/* حالت کتابخانه (Library) */
.store-item-card.is-library {
    border-style: dashed;
    background-color: #fafafa;
}

.store-item-card.is-library:hover {
    background-color: #fff;
    border-style: solid;
}

/* دکمه‌های کارت */
.store-item-card .btn {
    font-size: 0.85rem;
    padding: 6px 12px;
    border-radius: 10px;
}

/* واکنش‌گرایی */
@media (max-width: 768px) {
    .store-item-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
    }

    .dashboard-columns {
        display: flex;
        flex-direction: column;
        /* ستون‌ها زیر هم در موبایل */
    }
}

/* =========================================
   🎮 استایل‌های اختصاصی بازی "چشم عقاب" (Eagle Eye)
   ========================================= */

/* تنظیمات کلی صفحه بازی (فقط وقتی کلاس game-mode-sky دارد) */
body.game-mode-sky {
    margin: 0;
    overflow: hidden;
    /* جلوگیری از اسکرول */
    background: linear-gradient(to bottom, #4FACFE 0%, #00F2FE 100%);
    font-family: 'Vazirmatn', sans-serif;
    height: 100vh;
    touch-action: manipulation;
    user-select: none;
}

/* --- ابرها در پس‌زمینه --- */
.bg-cloud {
    position: absolute;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50px;
    z-index: -1;
    animation: floatCloud 20s linear infinite;
}

@keyframes floatCloud {
    from {
        transform: translateX(120vw);
    }

    to {
        transform: translateX(-20vw);
    }
}

/* --- نوار ابزار بالا (HUD) --- */
.game-hud {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 100;
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.hud-hearts {
    font-size: 1.8rem;
    letter-spacing: 5px;
    display: flex;
    gap: 5px;
}

.heart {
    transition: transform 0.3s;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.heart.lost {
    filter: grayscale(100%);
    opacity: 0.4;
    transform: scale(0.8);
}

.hud-info {
    text-align: center;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.hud-timer {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    background: #fff;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.3rem;
    font-family: 'Fredoka One', cursive;
    border: 4px solid #FFD700;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    transition: background-color 0.3s, color 0.3s, transform 0.2s;
}

.hud-timer.warning {
    border-color: #e67e22;
    color: #d35400;
}

.hud-timer.danger {
    background-color: #e74c3c;
    color: #fff;
    border-color: #c0392b;
    animation: pulse-red 0.5s infinite;
}

@keyframes pulse-red {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}


/* --- ناحیه ساخت جمله (هدف) --- */
.sentence-zone {
    margin-top: 100px;
    min-height: 80px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 0 20px;
    z-index: 10;
    position: relative;
}

.target-slot {
    background: rgba(255, 255, 255, 0.25);
    border: 2px dashed rgba(255, 255, 255, 0.6);
    border-radius: 16px;
    padding: 10px 20px;
    color: #fff;
    font-weight: 800;
    font-size: 1.3rem;
    min-width: 80px;
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.target-slot.filled {
    background: #fff;
    color: #4FACFE;
    /* Primary Color */
    border-style: solid;
    border-color: #fff;
    transform: scale(1.05);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    animation: popIn 0.3s;
}

/* --- ناحیه کلمات (زمین بازی) --- */
.words-zone {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 45vh;
    padding: 20px;
    padding-bottom: 60px;
    /* فضای بیشتر پایین */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    gap: 15px;
    z-index: 10;
    perspective: 1000px;
}

/* --- کارت کلمه (ابر) --- */
.word-cloud {
    background: #fff;
    padding: 12px 25px;
    border-radius: 50px;
    font-size: 1.2rem;
    font-weight: 800;
    color: #555;
    cursor: pointer;
    box-shadow: 0 6px 0 #dcdcdc, 0 10px 20px rgba(0, 0, 0, 0.1);
    transition: all 0.1s;
    position: relative;
    transform-style: preserve-3d;
}

.word-cloud:active {
    transform: translateY(4px);
    box-shadow: 0 2px 0 #dcdcdc, 0 2px 5px rgba(0, 0, 0, 0.1);
}

.word-cloud.correct {
    background: #2ECC71;
    color: #fff;
    box-shadow: 0 6px 0 #27ae60;
    pointer-events: none;
    opacity: 0;
    /* بعد از پرواز محو شود */
    transition: opacity 0.2s 0.3s;
}

.word-cloud.wrong {
    background: #E74C3C;
    color: #fff;
    box-shadow: 0 6px 0 #c0392b;
    animation: shake 0.4s;
}

@keyframes shake {

    0%,
    100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-6px);
    }

    75% {
        transform: translateX(6px);
    }
}

@keyframes popIn {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }

    80% {
        transform: scale(1.1);
        opacity: 1;
    }

    100% {
        transform: scale(1);
    }
}


/* --- انیمیشن پرواز کلمه --- */
.flying-word {
    position: fixed;
    z-index: 1000;
    background: #2ECC71;
    color: #fff;
    padding: 12px 25px;
    border-radius: 50px;
    font-weight: 800;
    font-size: 1.2rem;
    box-shadow: 0 10px 25px rgba(46, 204, 113, 0.4);
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --- کمبو متر --- */
#combo-meter {
    position: fixed;
    top: 25%;
    right: 10%;
    font-family: 'Fredoka One', cursive;
    font-size: 4rem;
    color: #FFD700;
    text-shadow: 2px 2px 0 #E67E22, 0 0 20px rgba(255, 215, 0, 0.5);
    transform: rotate(15deg) scale(0);
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 50;
    pointer-events: none;
}

#combo-meter.active {
    transform: rotate(15deg) scale(1);
}


/* --- صفحات اورلی (شروع و پایان) --- */
.overlay-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.95);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    text-align: center;
    padding: 20px;
}

.overlay-card {
    background: #fff;
    padding: 30px;
    border-radius: 30px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    max-width: 500px;
    width: 100%;
    border: 4px solid #eee;
}

/* دکمه‌های بزرگ بازی */
.big-btn {
    background: linear-gradient(to bottom, #FFD700, #FFA500);
    border: none;
    padding: 15px 50px;
    font-size: 1.5rem;
    color: #fff;
    font-weight: 800;
    border-radius: 50px;
    cursor: pointer;
    box-shadow: 0 8px 0 #d35400, 0 15px 30px rgba(0, 0, 0, 0.2);
    transition: transform 0.1s;
    font-family: 'Vazirmatn', sans-serif;
    margin-top: 20px;
    width: 100%;
    display: inline-block;
    text-decoration: none;
}

.big-btn:active {
    transform: translateY(5px);
    box-shadow: 0 3px 0 #d35400;
}

.big-btn.secondary {
    background: #95a5a6;
    box-shadow: 0 8px 0 #7f8c8d;
    margin-top: 10px;
    font-size: 1.1rem;
}

.big-btn.secondary:active {
    box-shadow: 0 3px 0 #7f8c8d;
}


/* --- ترنزیشن مرحله (پرده سیاه) --- */
.stage-transition {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    z-index: 1500;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-family: 'Fredoka One', cursive;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s;
}

.stage-transition.active {
    opacity: 1;
    visibility: visible;
}

.stage-text {
    font-size: 4rem;
    transform: scale(0);
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    color: #FFD700;
    text-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}

.stage-transition.active .stage-text {
    transform: scale(1);
}

/* --- آمار پایان بازی --- */
.end-stats-row {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin: 20px 0;
}

.end-stat {
    background: #f9f9f9;
    padding: 10px 20px;
    border-radius: 15px;
    min-width: 90px;
}

.end-stat-value {
    font-size: 1.5rem;
    font-weight: 800;
    display: block;
    font-family: 'Fredoka One', cursive;
}

.end-stat-label {
    font-size: 0.9rem;
    color: #777;
}

.xp-val {
    color: #F1C40F;
}

.coin-val {
    color: #E67E22;
}

/* --- لیدربورد کوچک پایان بازی --- */
.mini-leaderboard {
    margin-top: 20px;
    background: #fcfcfc;
    border-radius: 15px;
    border: 1px solid #eee;
    overflow: hidden;
    max-height: 180px;
    overflow-y: auto;
}

.lb-row {
    display: flex;
    justify-content: space-between;
    padding: 10px 15px;
    border-bottom: 1px solid #eee;
    font-size: 0.9rem;
}

.lb-row.me {
    background: #FFF8E1;
    font-weight: bold;
    color: #d35400;
}