/* ===== promo-style.css ===== */
      .promo-portal-section {
        position: relative;
        overflow: hidden;
        max-width: 1200px;
        margin: 10px auto 70px auto;
        margin-top: -40px;
        padding: 40px 40px;
        border-radius: 28px;
        background:
          radial-gradient(
            circle at 80% 20%,
            rgba(0, 114, 255, 0.16),
            transparent 55%
          ),
          linear-gradient(135deg, #16213e 0%, #0f3460 55%, #241442 100%);
        border: 1px solid rgba(212, 175, 55, 0.28);
        box-shadow: 0 20px 50px rgba(10, 5, 18, 0.35);
      }
      .promo-portal-bg {
        position: absolute;
        inset: 0;
        pointer-events: none;
      }
      .promo-star {
        position: absolute;
        width: 3px;
        height: 3px;
        background: #ffe9a8;
        border-radius: 50%;
        opacity: 0.7;
        box-shadow: 0 0 6px 1px rgba(255, 233, 168, 0.8);
        animation: promoTwinkle 3.2s ease-in-out infinite;
      }
      .promo-star.s1 {
        top: 15%;
        left: 12%;
        animation-delay: 0s;
      }
      .promo-star.s2 {
        top: 65%;
        left: 8%;
        animation-delay: 0.6s;
      }
      .promo-star.s3 {
        top: 30%;
        left: 45%;
        animation-delay: 1.2s;
      }
      .promo-star.s4 {
        top: 80%;
        left: 60%;
        animation-delay: 1.8s;
      }
      .promo-star.s5 {
        top: 20%;
        left: 88%;
        animation-delay: 0.9s;
      }
      .promo-star.s6 {
        top: 55%;
        left: 92%;
        animation-delay: 1.5s;
      }
      @keyframes promoTwinkle {
        0%,
        100% {
          opacity: 0.25;
          transform: scale(0.8);
        }
        50% {
          opacity: 0.9;
          transform: scale(1.3);
        }
      }
      .promo-portal-inner {
        position: relative;
        z-index: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 50px;
        flex-wrap: wrap-reverse;
      }
      .promo-portal-text {
        flex: 1 1 380px;
        min-width: 300px;
      }
      .promo-eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: #ffb703;
        font-size: 12.5px;
        font-weight: bold;
        letter-spacing: 0.3px;
        background: rgba(255, 183, 3, 0.1);
        border: 1px solid rgba(255, 183, 3, 0.3);
        padding: 6px 14px;
        border-radius: 50px;
        margin-bottom: 18px;
      }
      .promo-portal-text h2 {
        font-family: "Vazirmatn", Tahoma, Arial, sans-serif;
        color: #fff;
        font-size: 30px;
        line-height: 1.5;
        margin: 0 0 16px 0;
      }
      .promo-portal-text p {
        color: #c7cbe0;
        font-size: 15px;
        line-height: 2;
        margin: 0 0 28px 0;
        max-width: 480px;
      }
      .promo-play-btn {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 14px 28px;
        background: linear-gradient(135deg, #ffb703, #fb8500);
        color: #241442;
        border: none;
        border-radius: 50px;
        font-weight: bold;
        font-size: 15px;
        cursor: pointer;
        box-shadow: 0 8px 22px rgba(255, 183, 3, 0.35);
        transition:
          transform 0.15s ease,
          box-shadow 0.15s ease;
        font-family: "Vazirmatn", Tahoma, Arial, sans-serif;
      }
      .promo-play-btn:hover {
        transform: translateY(-2px) scale(1.03);
        box-shadow: 0 10px 26px rgba(255, 183, 3, 0.5);
      }
      .promo-play-btn i {
        font-size: 13px;
      }
      .promo-portal-visual {
        flex: 0 0 auto;
        display: flex;
        justify-content: center;
      }
      .promo-orbit-frame {
        position: relative;
        width: 300px;
        height: 300px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
      }
      .promo-ring {
        position: absolute;
        border-radius: 50%;
        border: 1.5px dashed rgba(212, 175, 55, 0.35);
      }
      .promo-ring-outer {
        inset: -22px;
        animation: promoSpin 16s linear infinite;
      }
      .promo-ring-mid {
        inset: 6px;
        border-color: rgba(0, 198, 255, 0.28);
        animation: promoSpinReverse 11s linear infinite;
      }
      .promo-ring-inner {
        inset: 34px;
        border-style: solid;
        border-color: rgba(255, 255, 255, 0.08);
      }
      .promo-electron {
        position: absolute;
        width: 11px;
        height: 11px;
        border-radius: 50%;
        top: -5.5px;
        left: calc(50% - 5.5px);
      }
      .promo-electron-blue {
        background: #00c6ff;
        box-shadow: 0 0 12px 2px rgba(0, 198, 255, 0.85);
      }
      .promo-electron-gold {
        background: #ffb703;
        box-shadow: 0 0 12px 2px rgba(255, 183, 3, 0.85);
      }
      @keyframes promoSpin {
        from {
          transform: rotate(0deg);
        }
        to {
          transform: rotate(360deg);
        }
      }
      @keyframes promoSpinReverse {
        from {
          transform: rotate(360deg);
        }
        to {
          transform: rotate(0deg);
        }
      }
      .promo-core {
        position: relative;
        width: 190px;
        height: 190px;
        border-radius: 50%;
        overflow: hidden;
        border: 3px solid #ffb703;
        box-shadow:
          0 0 0 6px rgba(255, 183, 3, 0.08),
          0 0 35px rgba(255, 183, 3, 0.45);
        animation: promoCoreGlow 2.6s ease-in-out infinite;
      }
      .promo-core img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        filter: brightness(0.65) saturate(1.1);
      }
      @keyframes promoCoreGlow {
        0%,
        100% {
          box-shadow:
            0 0 0 6px rgba(255, 183, 3, 0.08),
            0 0 30px rgba(255, 183, 3, 0.4);
        }
        50% {
          box-shadow:
            0 0 0 9px rgba(255, 183, 3, 0.14),
            0 0 45px rgba(255, 183, 3, 0.6);
        }
      }
      .promo-core-overlay {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(10, 5, 18, 0.2);
        transition: background 0.2s ease;
      }
      .promo-orbit-frame:hover .promo-core-overlay {
        background: rgba(10, 5, 18, 0.05);
      }
      .promo-play-icon {
        width: 64px;
        height: 64px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.14);
        backdrop-filter: blur(4px);
        border: 1.5px solid rgba(255, 255, 255, 0.55);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 20px;
        transition: transform 0.2s ease;
      }
      .promo-play-icon i {
        margin-right: -3px;
      }
      .promo-orbit-frame:hover .promo-play-icon {
        transform: scale(1.1);
        background: rgba(255, 183, 3, 0.85);
        color: #241442;
      }
      @media (max-width: 640px) {
        .promo-portal-section {
          padding: 40px 20px;
          border-radius: 20px;
        }
        .promo-portal-inner {
          justify-content: center;
          text-align: center;
          gap: 35px;
        }
        .promo-portal-text p {
          margin-right: auto;
          margin-left: auto;
        }
        .promo-orbit-frame {
          width: 220px;
          height: 220px;
        }
        .promo-core {
          width: 140px;
          height: 140px;
        }
      }
      @media (prefers-reduced-motion: reduce) {
        .promo-ring,
        .promo-core,
        .promo-star {
          animation: none !important;
        }
      }
      .promo-admin-edit-btn {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 7px 14px;
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 183, 3, 0.45);
        color: #ffb703;
        border-radius: 50px;
        font-size: 12px;
        font-weight: bold;
        cursor: pointer;
        backdrop-filter: blur(4px);
        font-family: "Vazirmatn", Tahoma, Arial, sans-serif;
        transition:
          background 0.15s ease,
          color 0.15s ease;
      }
      .promo-admin-edit-btn:hover {
        background: #ffb703;
        color: #241442;
      }
      .promo-video-modal {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 5000;
        align-items: center;
        justify-content: center;
      }
      .promo-video-modal.active {
        display: flex;
      }
      .promo-video-backdrop {
        position: absolute;
        inset: 0;
        background: rgba(5, 3, 10, 0.88);
      }
      .promo-video-box {
        position: relative;
        z-index: 1;
        width: min(920px, 92vw);
        background: #000;
        border-radius: 16px;
        overflow: hidden;
        border: 1px solid rgba(212, 175, 55, 0.4);
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
      }
      .promo-video-box video {
        width: 100%;
        max-height: 80vh;
        display: block;
        background: #000;
      }
      .promo-video-close {
        position: absolute;
        top: -42px;
        left: 0;
        color: #fff;
        background: rgba(255, 255, 255, 0.12);
        border: 1px solid rgba(255, 255, 255, 0.3);
        width: 34px;
        height: 34px;
        border-radius: 50%;
        font-size: 18px;
        line-height: 1;
        cursor: pointer;
      }

/* ===== total1.css ===== */
:root {
    --primary: #311b5e;
    --accent: #ffb703;
    --bg-light: #f0edf6;
    --bg-body: #f5f3f9;
    --text-main: #333;
    --text-muted: #666;
    --error: #e74c3c;
    --radius: 16px;

    /* نوار اطلاعیه‌ها (announcementBar) - قبلاً این متغیرها اصلاً تعریف نشده بودن
       برای همین رنگش پیش‌فرض/بی‌روح می‌افتاد. حالا یه گرادینت طلایی-بنفش هماهنگ با تم سایت */
    --fl-announce-bg: linear-gradient(90deg, #3a1f6e 0%, #4e2a8e 50%, #3a1f6e 100%);
    --fl-announce-icon-bg: linear-gradient(90deg, rgba(58,31,110,0) 0%, #3a1f6e 35%, #3a1f6e 100%);
    --fl-announce-text: #f5eeff;
}
@font-face {
  font-family: 'Vazirmatn';
  src: url('/fonts/Vazirmatn-Regular.woff2') format('woff2'),
       url('/fonts/Vazirmatn-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Vazirmatn';
  src: url('/fonts/Vazirmatn-Medium.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Vazirmatn';
  src: url('/fonts/Vazirmatn-Bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* ⭐ فیکس فونت سراسری: قبلاً اینجا به "vazir-regular" اشاره می‌شد که
       هیچ‌جای سایت (هیچ @font-face) براش تعریف نشده بود؛ در نتیجه مرورگر
       بی‌صدا به Tahoma سقوط می‌کرد و متن‌های زیادی از جمله عنوان/توضیحِ
       کارت‌های آزمایش/جزوه/فیلم با فونتِ نه‌چندان زیبای Tahoma دیده
       می‌شدن. الان به فونتِ واقعیِ لود شده‌ی سایت (Vazirmatn) اصلاح شد. */
    font-family: "Vazirmatn", Tahoma, sans-serif;
}
body {
    background-color: var(--bg-body);
    color: var(--text-main);
}
.content-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(15px);
    z-index: 20000;
    display: none;
    align-items: center;
    justify-content: center;
}
.content-box {
    background: #fff;
    width: 90%;
    height: 85%;
    border-radius: 30px;
    padding: 30px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.pdf-wrapper {
    width: 100%;
    height: 100%;
    background: #eee;
    border-radius: 15px;
}
#closeContent {
    position: absolute;
    top: 10px;
    left: 20px;
    font-size: 40px;
    cursor: pointer;
    color: var(--primary);
}
.books-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
    padding: 20px;
}
.book-card {
    background: #fff;
    padding: 15px;
    border-radius: 15px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    text-align: center;
}
.book-card img {
    width: 100%;
    border-radius: 10px;
}
.download-btn {
    background: var(--primary);
    color: white;
    border: none;
    padding: 10px;
    width: 100%;
    border-radius: 8px;
    margin-top: 10px;
    cursor: pointer;
}
.youtube-layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 30px;
    padding: 20px;
}
.video-player {
    width: 100%;
    height: 400px;
    background: #000;
    border-radius: 15px;
}
.list-video-card {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
    cursor: pointer;
    padding: 5px;
    border-radius: 8px;
}
.list-video-card:hover {
    background: #f0f0f0;
}
.list-video-card img {
    width: 120px;
    height: 70px;
    border-radius: 8px;
}
.class-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    padding: 20px;
}
.class-card {
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 20px;
    padding: 25px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.class-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

/* ===== کارتِ «لیستِ کلاس‌های آموزشی» - بازطراحیِ کامل ===== */
@font-face {
  font-family: 'BBadr';
  src: url('/fonts/BBadr.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}
.eduClass-card{
    position: relative;
    background: #fff;
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid #eee9fb;
    box-shadow: 0 10px 28px rgba(49,27,94,.10);
    transition: box-shadow .28s ease;
    text-align: center;
    padding-bottom: 22px;
    flex: 1 1 320px;
    width: 100%;
    max-width: 350px;
}
.eduClass-card:hover{
    box-shadow: 0 18px 40px rgba(49,27,94,.17);
}
.eduClass-card__cover{
    position: relative;
    height: 98px;
    overflow: hidden;
    background:
        radial-gradient(circle at 14% 25%, rgba(255,255,255,.24) 0%, transparent 42%),
        radial-gradient(circle at 88% 15%, rgba(255,255,255,.16) 0%, transparent 38%),
        radial-gradient(circle at 68% 90%, rgba(255,255,255,.14) 0%, transparent 45%),
        linear-gradient(120deg, #4338ca 0%, #6d28d9 45%, #9333ea 78%, #c026d3 100%);
}
.eduClass-card__cover::before{
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255,255,255,.28) 1.4px, transparent 1.4px);
    background-size: 16px 16px;
    opacity: .35;
    pointer-events: none;
}
.eduClass-card__cover::after{
    content: "";
    position: absolute;
    left: -12%;
    right: -12%;
    bottom: -2px;
    height: 32px;
    background: #fff;
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}
.eduClass-card__badge{
    position: absolute;
    top: 12px;
    z-index: 2;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 11.5px;
    font-weight: 800;
    color: #fff;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    box-shadow: 0 3px 10px rgba(0,0,0,.15);
    white-space: nowrap;
}
.eduClass-card__badge-grade{ right: 12px; background: rgba(255,255,255,.24); border: 1px solid rgba(255,255,255,.42); backdrop-filter: blur(2px); }
.eduClass-card__badge-status{ left: 12px; }
.eduClass-card__badge-status.is-live{ background: #ef4444; animation: eduClassPulse 1.8s ease-in-out infinite; }
.eduClass-card__badge-status.is-upcoming{ background: #ffb703; color: #311b5e; }
@keyframes eduClassPulse{
    0%, 100%{ box-shadow: 0 3px 10px rgba(0,0,0,.15), 0 0 0 0 rgba(239,68,68,.5); }
    50%{ box-shadow: 0 3px 10px rgba(0,0,0,.15), 0 0 0 7px rgba(239,68,68,0); }
}
.eduClass-card__avatar{
    position: relative;
    z-index: 3;
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ffb703, #fb8500);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: #fff;
    margin: -36px auto 10px;
    border: 4px solid #fff;
    box-shadow: 0 0 0 5px rgba(251,133,0,.14), 0 8px 18px rgba(251,133,0,.38);
}
.eduClass-card__title{
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-family: 'BBadr', 'Vazirmatn', Tahoma, sans-serif;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: .2px;
    color: #2e1065;
    margin: 0 18px 16px;
}
.eduClass-card__check{
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background: #22c55e;
    color: #fff;
    font-size: 10.5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
}
.eduClass-card__info{
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0 18px;
    margin-bottom: 16px;
}
.eduClass-card__info-row{
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 500;
    color: #555;
    background: #f7f6fd;
    border-radius: 12px;
    padding: 9px 12px;
    text-align: right;
}
.eduClass-card__info-row i{
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: #ece7fc;
    color: #5e35b1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    flex: none;
}
.eduClass-card__info-row b{ color: #2e1065; font-weight: 800; }
.eduClass-card__capacity{ padding: 0 20px; margin-bottom: 18px; }
.eduClass-card__capacity-labels{
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    font-weight: 600;
    color: #777;
    margin-bottom: 6px;
}
.eduClass-card__capacity-remaining{ font-weight: 800; color: #16a34a; }
.eduClass-card__capacity-remaining.is-low{ color: #ea580c; }
.eduClass-card__capacity-remaining.is-full{ color: #dc2626; }
.eduClass-card__capacity-track{
    height: 8px;
    border-radius: 6px;
    background: #eee;
    overflow: hidden;
}
.eduClass-card__capacity-fill{
    height: 100%;
    border-radius: 6px;
    background: linear-gradient(90deg, #22c55e, #16a34a);
    transition: width .4s ease;
}
.eduClass-card__capacity-fill.is-low{ background: linear-gradient(90deg, #f97316, #ea580c); }
.eduClass-card__capacity-fill.is-full{ background: linear-gradient(90deg, #ef4444, #dc2626); }
.eduClass-card__actions{
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 0 20px;
}
.eduClass-card__btn{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    padding: 11px;
    border: none;
    border-radius: 12px;
    font-size: 13.5px;
    font-weight: 800;
    font-family: inherit;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.eduClass-card__btn:active{ transform: scale(.97); }
.eduClass-card__btn-primary{ background: linear-gradient(135deg, #22c55e, #16a34a); color: #fff; box-shadow: 0 6px 14px rgba(34,197,94,.3); }
.eduClass-card__btn-secondary{ background: linear-gradient(135deg, #fb923c, #ea580c); color: #fff; box-shadow: 0 6px 14px rgba(234,88,12,.3); }
.eduClass-card__btn-register{ background: linear-gradient(135deg, #4f46e5, #7c3aed); color: #fff; box-shadow: 0 6px 14px rgba(79,70,229,.3); }
.eduClass-card__btn-disabled{ background: #f1f1f1; color: #aaa; cursor: not-allowed; box-shadow: none; }
.eduClass-card__btn-danger{ background: #fff; color: #e74c3c; border: 1.5px solid #f7c9c4; box-shadow: none; margin-top: 4px; }
.eduClass-card__btn-danger:hover{ background: #fdeceb; }

body.dark-mode .eduClass-card{ background: var(--bg-light); border-color: rgba(255,255,255,.08); }
body.dark-mode .eduClass-card__cover::after{ background: var(--bg-light); }
body.dark-mode .eduClass-card__title{ color: var(--text-main); }
body.dark-mode .eduClass-card__info-row{ background: rgba(255,255,255,.05); color: var(--text-muted); }
body.dark-mode .eduClass-card__info-row b{ color: var(--text-main); }
body.dark-mode .eduClass-card__info-row i{ background: rgba(255,255,255,.08); }
body.dark-mode .eduClass-card__capacity-labels{ color: var(--text-muted); }
body.dark-mode .eduClass-card__capacity-track{ background: rgba(255,255,255,.1); }
body.dark-mode .eduClass-card__btn-disabled{ background: rgba(255,255,255,.06); color: #777; }
body.dark-mode .eduClass-card__btn-danger{ background: transparent; border-color: rgba(231,76,60,.4); }
body.dark-mode .eduClass-card__btn-danger:hover{ background: rgba(231,76,60,.12); }
.class-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
}
.status {
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 0.8em;
}
.status.open {
    background: #d4edda;
    color: #155724;
}
.status.full {
    background: #f8d7da;
    color: #721c24;
}
.register-btn {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 10px;
    background: var(--primary);
    color: white;
    cursor: pointer;
    font-weight: bold;
    margin-top: 15px;
}
.register-btn:disabled {
    background: #ccc;
    cursor: not-allowed;
}
.questions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
    padding: 20px;
}
.question-card {
    background: #f8f9fa;
    border: 2px solid #e9ecef;
    border-radius: 15px;
    padding: 20px;
    text-align: center;
    transition: 0.3s;
}
.question-card:hover {
    border-color: var(--primary);
    transform: translateY(-5px);
}
.card-icon {
    font-size: 30px;
    margin-bottom: 10px;
}
.main-nav ul {
    display: flex;
    list-style: none;
    gap: 25px;
    padding: 0;
}
.main-nav a {
    text-decoration: none;
    color: var(--primary);
    font-weight: 500;
    transition: color 0.3s;
}
.main-nav a:hover {
    color: var(--accent);
}
#usersTable {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
    font-family: Tahoma, sans-serif;
    font-size: 14px;
}
#usersTable th,
#usersTable td {
    border: 1px solid #ddd;
    padding: 10px;
    text-align: right;
}
#usersTable th {
    background-color: #f4f4f4;
    font-weight: bold;
}
#usersTable tr:nth-child(even) {
    background-color: #f9f9f9;
}
#usersModal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 1);
    z-index: 9999;
    overflow-y: auto;
    padding: 40px;
}
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}
.modal-content {
    position: relative;
    background: #fff;
    padding: 20px;
    border-radius: 15px;
    width: 80%;
    max-width: 800px;
    max-height: 90vh;
    overflow-y: auto;
    margin: 50px auto;
}
.full-video-flex {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    padding: 20px;
}
.full-video-flex .video-card {
    width: 250px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s;
}
.full-video-flex .video-card:hover {
    transform: scale(1.05);
}
.grid-view {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 20px !important;
    justify-content: center;
    overflow-x: visible !important;
    padding: 20px;
}
.grid-view .video-card {
    min-width: 280px !important;
    margin: 0 !important;
}
.full-view-container {
    padding: 40px 20px;
    max-width: 1200px;
    margin: auto;
}
.grid-layout {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 30px;
    margin-top: 30px;
}
.back-btn {
    padding: 10px 20px;
    background: #3498db;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    margin-bottom: 20px;
}
.search-box {
    position: relative;
}
#searchResults {
    position: absolute;
    top: 55px;
    right: 0;
    width: 100%;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    z-index: 9999;
    overflow: hidden;
}
.result-item {
    padding: 12px 15px;
    cursor: pointer;
    transition: all 0.3s ease;
    color: #333;
    border-bottom: 1px solid #f0f0f0;
}
.result-item:hover {
    background: var(--accent);
    color: #ffffff;
    padding-right: 20px;
}
.result-item small {
    display: block;
    font-size: 0.75rem;
    color: #888;
    margin-top: 4px;
}
.result-item:hover small {
    color: #e8ffe8;
}
#savedVideosModal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 9999;
}
#savedVideosModal.active {
    display: block !important;
}
#avatarGrid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    max-height: 400px;
    overflow-y: auto;
    padding: 10px;
    scrollbar-width: thin;
    scrollbar-color: #311b5e #f0f0f0;
}
#avatarGrid::-webkit-scrollbar {
    width: 8px;
}
#avatarGrid::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}
#avatarGrid::-webkit-scrollbar-thumb {
    background: #311b5e;
    border-radius: 10px;
    border: 2px solid #f1f1f1;
}
#avatarGrid::-webkit-scrollbar-thumb:hover {
    background: #4a2a8c;
}
#avatarModal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 3000;
    justify-content: center;
    align-items: flex-start;
    overflow-y: auto;
    padding: 20px 0;
}
#avatarModal > div {
    background: white;
    padding: 25px;
    border-radius: 20px;
    width: 90%;
    max-width: 500px;
    text-align: center;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
    margin: auto;
}
#editProfileModal {
    scrollbar-width: thin;
    scrollbar-color: #311b5e #f0f0f0;
}
#editProfileModal::-webkit-scrollbar {
    width: 2px;
}
#editProfileModal::-webkit-scrollbar-track {
    background: transparent;
}
#editProfileModal::-webkit-scrollbar-thumb {
    background-color: #311b5e;
    border-radius: 10px;
    border: 1px solid white;
}
#editProfileModal::-webkit-scrollbar-thumb:hover {
    background-color: #4a2a8c;
}
.btn-action {
    display: block;
    width: 100%;
    padding: 12px;
    margin-top: 8px;
    border: none;
    border-radius: 12px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    text-align: center;
    transition: transform 0.2s, background 0.3s;
}
.btn-action:hover {
    transform: scale(1.03);
}
.btn-sessions { background: #311b5e; color: white; }
.btn-free { background: #e67e22; color: white; }
.btn-register { background: #2ecc71; color: white; }
.fz-package {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: block;
    width: 30%;
}
.fz-package img {
    width: 100%;
    border-radius: 12px;
    border: 2px solid transparent;
}
.fz-package:hover {
    transform: translateY(-10px) scale(1.05);
    box-shadow: 0 10px 20px rgba(0,0,0,0.5);
}
.package-card {
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 30%;
    transition: transform 0.3s ease;
}
.package-card img {
    width: 100%;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    transition: transform 0.3s ease;
}
.fz-label {
    margin-top: 10px;
    color: #ffb703;
    font-weight: bold;
    font-size: 1.2rem;
    text-shadow: 0 0 10px rgba(255,183,3,0.5);
    display: inline-block;
    direction: ltr;
}
.package-card:hover {
    transform: translateY(-10px);
}
.package-card:hover img {
    transform: scale(1.05);
    box-shadow: 0 15px 25px rgba(255,183,3,0.3);
}
.modal-content-buy {
    background: linear-gradient(145deg, #1a1a2e, #101018);
    padding: 35px;
    border-radius: 20px;
    text-align: center;
    border: 1px solid #333;
    box-shadow: 0 20px 40px rgba(0,0,0,0.5);
}
.close-btn-buy {
    margin-top: 25px;
    padding: 8px 30px;
    background: transparent;
    color: #888;
    border: 1px solid #444;
    border-radius: 50px;
    cursor: pointer;
    transition: 0.3s;
}
.close-btn-buy:hover {
    background: #333;
    color: #fff;
}
.modal-title { color: #f1c40f; font-size: 1.5rem; margin-bottom: 5px; }
.modal-subtitle { color: #aaa; margin-bottom: 30px; }
.current-user-row {
  background: linear-gradient(90deg, rgba(0, 198, 255, 0.15), rgba(0, 114, 255, 0.05)) !important;
  position: relative;
  animation: currentUserGlow 2.5s ease-in-out infinite;
}
.current-user-row td:first-child {
  color: #00c6ff;
}
@keyframes currentUserGlow {
  0%, 100% {
    box-shadow: inset 0 0 8px rgba(0, 198, 255, 0.15);
  }
  50% {
    box-shadow: inset 0 0 18px rgba(0, 198, 255, 0.4);
  }
}
#watermarkOverlay {
  position: absolute;
  pointer-events: none;
  z-index: 999999;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.35);
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 1.2s ease, top 1.5s ease, left 1.5s ease;
  user-select: none;
  direction: ltr;
}
#playerWrapper:fullscreen {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
}
#playerWrapper:fullscreen video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ===== edit_profile.css ===== */
.profile-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.profile-table th {
    background-color: #3498db;
    color: white;
    padding: 15px;
    text-align: right;
}
.profile-table td {
    padding: 12px;
    border-bottom: 1px solid #eee;
}
.profile-table input {
    width: 90%;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
}
.top-nav {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 10;
}
.back-link {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: #555;
    background: #fff;
    padding: 10px 20px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}
.edit-profile-container {
    text-align: center;
    padding-top: 60px;
}
.back-link:hover {
    color: #3498db;
    border-color: #3498db;
    box-shadow: 0 6px 16px rgba(52, 152, 219, 0.15);
    transform: translateX(-5px);
}
.back-link .arrow {
    font-weight: bold;
    font-size: 16px;
}
.password-change-section {
  margin-top: 16px;
  padding: 16px;
  border-radius: 14px;
  background: #f8f9fc;
  border: 1px solid #eceef4;
}
.password-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  user-select: none;
}
.password-toggle-row .label-with-icon {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 14px;
  color: #333;
}
.password-toggle-row .label-with-icon .icon-circle {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6a11cb, #2575fc);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}
.ios-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 25px;
  flex-shrink: 0;
}
.ios-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.ios-switch .slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background-color: #ccc;
  border-radius: 25px;
  transition: .25s;
}
.ios-switch .slider::before {
  content: "";
  position: absolute;
  height: 19px;
  width: 19px;
  right: 3px;
  bottom: 3px;
  background-color: #fff;
  border-radius: 50%;
  transition: .25s;
  box-shadow: 0 1px 3px rgba(0,0,0,.3);
}
.ios-switch input:checked + .slider {
  background: linear-gradient(135deg, #6a11cb, #2575fc);
}
.ios-switch input:checked + .slider::before {
  transform: translateX(-19px);
}
.current-password-verify-box {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed #dde1ec;
  animation: fadeSlideDown .25s ease;
}
.password-field-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.password-field-row input[type="password"],
.password-field-row input[type="text"] {
  flex: 1;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1.5px solid #dde1ec;
  font-size: 16px;
  transition: border-color .2s;
  outline: none;
}
.password-field-row input:focus {
  border-color: #6a11cb;
}
.btn-verify-password {
  padding: 0 18px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, #6a11cb, #2575fc);
  color: #fff;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: transform .15s, opacity .15s;
  white-space: nowrap;
}
.btn-verify-password:hover { transform: translateY(-1px); opacity: .92; }
.btn-verify-password:active { transform: translateY(0); }
.btn-verify-password:disabled {
  opacity: .6;
  cursor: not-allowed;
  transform: none;
}
.btn-eye-toggle {
  width: 42px;
  border: 1.5px solid #dde1ec;
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color .2s;
}
.btn-eye-toggle:hover { border-color: #6a11cb; }
.password-status-msg {
  display: none;
  margin-top: 8px;
  font-size: 13px;
  font-weight: 600;
  align-items: center;
  gap: 6px;
}
.password-status-msg.show { display: flex; align-items: center; }
.password-status-msg.success { color: #1fa460; }
.password-status-msg.error { color: #e74c3c; }
.password-status-msg .status-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #1fa460;
  color: #fff;
  font-size: 11px;
  animation: popIn .3s ease;
}
.new-password-fields {
  margin-top: 14px;
  animation: fadeSlideDown .25s ease;
}
.new-password-fields label {
  font-size: 13px;
  color: #666;
  margin-bottom: 6px;
  display: block;
}
.new-password-fields .password-field-row {
  margin-bottom: 12px;
}
@keyframes fadeSlideDown {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
.password-forgot-link-row {
  margin-top: 10px;
  text-align: center;
}
.password-forgot-link {
  font-size: 12.5px;
  color: #6a11cb;
  text-decoration: none;
  font-weight: 600;
}
.password-forgot-link:hover { text-decoration: underline; }
.profile-forgot-password-box {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed #dde1ec;
  animation: fadeSlideDown .25s ease;
}
.profile-forgot-desc {
  font-size: 13px;
  color: #666;
  margin: 0 0 10px;
  line-height: 1.7;
}
.profile-forgot-step label {
  font-size: 13px;
  color: #666;
  margin-bottom: 6px;
  display: block;
}
.profile-forgot-step .password-field-row {
  margin-bottom: 12px;
}
.profile-forgot-step input[type="text"] {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1.5px solid #dde1ec;
  font-size: 16px;
  outline: none;
  transition: border-color .2s;
  margin-bottom: 12px;
  box-sizing: border-box;
}
.profile-forgot-step input[type="text"]:focus { border-color: #6a11cb; }
.btn-send-reset-code {
  width: 100%;
  padding: 11px 0;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, #6a11cb, #2575fc);
  color: #fff;
  font-weight: 600;
  font-size: 13.5px;
  cursor: pointer;
  transition: transform .15s, opacity .15s;
}
.btn-send-reset-code:hover { transform: translateY(-1px); opacity: .92; }
.btn-send-reset-code:active { transform: translateY(0); }
.btn-send-reset-code:disabled {
  opacity: .55;
  cursor: not-allowed;
  transform: none;
}
.sms-quota-notice {
  margin: 4px 0 10px;
  padding: 8px 12px;
  border-radius: 10px;
  background: #f3f0fc;
  color: #6a11cb;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  line-height: 1.6;
}
.sms-quota-notice.low {
  background: #fdf0e9;
  color: #d9720c;
}
@keyframes popIn {
  0% { transform: scale(0); }
  70% { transform: scale(1.2); }
  100% { transform: scale(1); }
}
.invite-hub {
  margin-top: 16px;
  border-radius: 18px;
  background: linear-gradient(160deg, #6a11cb 0%, #4c1fb8 45%, #2575fc 100%);
  padding: 18px 16px 16px;
  color: #fff;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(106, 17, 203, 0.25);
}
.invite-hub::before {
  content: "";
  position: absolute;
  top: -40px;
  left: -40px;
  width: 140px;
  height: 140px;
  background: rgba(255,255,255,.08);
  border-radius: 50%;
}
.invite-hub::after {
  content: "";
  position: absolute;
  bottom: -60px;
  right: -30px;
  width: 160px;
  height: 160px;
  background: rgba(255,255,255,.06);
  border-radius: 50%;
}
.invite-hub-top {
  position: relative;
  z-index: 1;
  text-align: center;
}
.invite-hub-label {
  font-size: 13px;
  opacity: .9;
  margin-bottom: 8px;
}
.invite-hub-code {
  background: rgba(255,255,255,.15);
  border: 1.5px dashed rgba(255,255,255,.5);
  border-radius: 12px;
  padding: 10px;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 3px;
  margin-bottom: 12px;
  backdrop-filter: blur(4px);
}
.invite-progress-wrap {
  position: relative;
  z-index: 1;
  background: rgba(255,255,255,.12);
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 12px;
  text-align: right;
}
.invite-progress-text {
  font-size: 12px;
  margin-bottom: 6px;
  display: flex;
  justify-content: space-between;
  opacity: .95;
}
.invite-progress-bar-bg {
  width: 100%;
  height: 8px;
  border-radius: 8px;
  background: rgba(255,255,255,.2);
  overflow: hidden;
}
.invite-progress-bar-fill {
  height: 100%;
  border-radius: 8px;
  background: linear-gradient(90deg, #ffd166, #ff9f43);
  transition: width .5s ease;
}
.invited-friends-box {
  position: relative;
  z-index: 1;
  cursor: pointer;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(255,255,255,.14);
  display: flex;
  align-items: center;
  gap: 10px;
  transition: background .2s, transform .15s;
  margin-bottom: 12px;
}
.invited-friends-box:hover {
  background: rgba(255,255,255,.22);
  transform: translateY(-1px);
}
.invited-friends-box .friends-emoji { font-size: 20px; }
.invited-friends-box .friends-count-num {
  font-size: 18px;
  font-weight: 800;
}
.invited-friends-box .invited-friends-hint {
  font-size: 11px;
  opacity: .85;
  margin-right: auto;
  display: flex;
  align-items: center;
  gap: 4px;
}
.btn-invite-cta {
  position: relative;
  z-index: 1;
  width: 100%;
  border: none;
  border-radius: 12px;
  padding: 13px;
  background: linear-gradient(135deg, #ffb703, #fb8500);
  color: #241442;
  font-weight: 700;
  font-size: 14.5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 6px 16px rgba(251, 133, 0, .4);
  transition: transform .15s, box-shadow .15s;
}
.btn-invite-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(251, 133, 0, .5);
}
.btn-invite-cta:active { transform: translateY(0); }
.invited-friends-modal {
  display: none;
  position: fixed; inset: 0;
  background: rgba(20, 10, 40, .55);
  backdrop-filter: blur(3px);
  align-items: center; justify-content: center;
  z-index: 9999;
  animation: fadeIn .2s ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.invited-friends-modal-content {
  background: #fff;
  border-radius: 20px;
  width: 92%; max-width: 400px;
  max-height: 75vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: popIn .25s ease;
  box-shadow: 0 20px 50px rgba(0,0,0,.3);
}
.invited-friends-modal-header {
  background: linear-gradient(135deg, #6a11cb, #2575fc);
  color: #fff;
  padding: 16px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.invited-friends-modal-header h3 {
  margin: 0;
  font-size: 16px;
}
.invited-friends-modal-header button {
  background: rgba(255,255,255,.2);
  border: none;
  color: #fff;
  width: 28px; height: 28px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 14px;
  transition: background .2s;
}
.invited-friends-modal-header button:hover {
  background: rgba(255,255,255,.35);
}
#invitedFriendsListContainer {
  padding: 14px;
  overflow-y: auto;
}
.invited-friend-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px; border-radius: 14px;
  background: #f7f8fc;
  margin-bottom: 8px;
  transition: background .2s;
}
.invited-friend-item:hover { background: #eef0fa; }
.invited-friend-item .rank-badge {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6a11cb, #2575fc);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.invited-friend-item img {
  width: 44px; height: 44px; border-radius: 50%;
  border: 2px solid #6a11cb;
  object-fit: cover;
  flex-shrink: 0;
}
.invited-friend-info { flex: 1; min-width: 0; }
.invited-friend-name {
  font-weight: 700; font-size: 14px; color: #2b2b40;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.invited-friend-meta {
  font-size: 12px; color: #8a8a9a;
  display: flex; align-items: center; gap: 6px;
  margin-top: 2px;
}
.level-chip {
  background: linear-gradient(135deg, #ffd166, #ff9f43);
  color: #7a4900;
  font-size: 10.5px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 20px;
}
.invited-friends-empty {
  text-align: center;
  padding: 36px 16px;
  color: #999;
}
.invited-friends-empty .empty-emoji {
  font-size: 42px;
  margin-bottom: 10px;
  display: block;
}
.invited-friends-empty .empty-title {
  font-weight: 700;
  color: #555;
  margin-bottom: 6px;
  font-size: 14.5px;
}
.invited-friends-empty .empty-sub {
  font-size: 12.5px;
  line-height: 1.8;
}
.profile-completion-widget {
  background: linear-gradient(135deg, #f4f1fb, #eef6ff);
  border: 1px solid #e2ddf5;
  border-radius: 16px;
  padding: 14px 16px;
  margin-bottom: 20px;
  transition: background 0.4s ease, border-color 0.4s ease;
}
.profile-completion-widget.pcw-complete {
  background: linear-gradient(135deg, #e9fbf1, #eaf9f0);
  border-color: #b7ecd0;
}
.pcw-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.pcw-title {
  font-size: 13.5px;
  font-weight: 700;
  color: #4b2e83;
  display: flex;
  align-items: center;
  gap: 6px;
}
.profile-completion-widget.pcw-complete .pcw-title {
  color: #1e9e5f;
}
.pcw-count {
  font-size: 12.5px;
  font-weight: 700;
  color: #5a2e98;
  background: #fff;
  border: 1px solid #ded4f5;
  border-radius: 20px;
  padding: 2px 10px;
  min-width: 44px;
  text-align: center;
  transition: color 0.3s ease, border-color 0.3s ease;
}
.profile-completion-widget.pcw-complete .pcw-count {
  color: #1e9e5f;
  border-color: #b7ecd0;
}
.pcw-bar-track {
  width: 100%;
  height: 10px;
  border-radius: 20px;
  background: #e4dff5;
  overflow: hidden;
  margin-bottom: 12px;
}
.pcw-bar-fill {
  height: 100%;
  border-radius: 20px;
  background: linear-gradient(90deg, #7c4fd8, #a06be0);
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.pcw-bar-fill.pcw-bar-fill-complete {
  background: linear-gradient(90deg, #2ecc71, #27d999);
}
.pcw-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.pcw-step {
  font-size: 11.5px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid transparent;
  transition: all 0.3s ease;
}
.pcw-step-missing {
  background: #fff;
  color: #a08fd0;
  border-color: #e2ddf5;
}
.pcw-step-missing i {
  font-size: 6px;
  color: #cbb9f5;
}
.pcw-step-done {
  background: #eafaf1;
  color: #1e9e5f;
  border-color: #b7ecd0;
  animation: pcwStepPop 0.35s ease;
}
.pcw-step-done i {
  font-size: 11px;
}
@keyframes pcwStepPop {
  0% { transform: scale(0.85); opacity: 0.5; }
  60% { transform: scale(1.06); }
  100% { transform: scale(1); opacity: 1; }
}
.pcw-reward-note {
  font-size: 12px;
  line-height: 1.8;
  color: #6b5a99;
}
.profile-completion-widget.pcw-complete .pcw-reward-note {
  color: #1e9e5f;
  font-weight: 700;
}

/* ===== topcard.css ===== */
:root {
  --purple: #8b5fbf;
  --purple-deep: #4a2f8f;
  --orange: #ffb703;
  --orange-deep: #ff8c42;
}
* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  /* ⭐ فیکس حالت شب: قبلاً این پس‌زمینه هاردکد بود و چون بعد از قانونِ
     body{background-color:var(--bg-body)} میومد (و background شورت‌هند
     خودِ background-color رو هم ریست می‌کنه)، همیشه رو دست متغیرِ تیره‌ی
     دکمه‌ی شب/روز می‌شست و هیچ‌وقت عوض نمی‌شد. حالا از یه متغیرِ CSS
     می‌خونه که body.dark-mode می‌تونه بازنویسی‌ش کنه. */
  background: var(--bg-gradient, radial-gradient(ellipse at 50% -10%, #f2eefc 0%, #f6f5fb 45%, #f4f4fa 100%));
  font-family: 'Vazirmatn', Tahoma, sans-serif;
}
.cf-section {
  position: relative;
  padding: 32px 20px 30px;
  max-width: 1100px;
  margin: 0 auto;
  margin-bottom: -10px;
}
.cf-intro {
  text-align: center;
  max-width: 560px;
  margin: 0 auto 18px;
  animation: introIn .7s cubic-bezier(.2,.8,.2,1);
}
@keyframes introIn { from{opacity:0;transform:translateY(-10px)} to{opacity:1;transform:translateY(0)} }
.cf-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 16px; border-radius: 999px;
  background: linear-gradient(90deg, var(--purple-deep), var(--purple));
  color: #fff; font-size: 12.5px; font-weight: 600; margin-bottom: 8px;
  box-shadow: 0 0 18px rgba(139,95,191,.4);
}
.cf-title { font-size: 24px; font-weight: 800; color: #16213e; margin: 0; line-height: 1.5; }
.cf-title span {
  background: linear-gradient(90deg, var(--orange-deep), var(--orange));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stage {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  gap: 0;
  perspective: 1400px;
}
.cf-viewport {
  position: relative;
  width: 100%;
  max-width: 720px;
  height: 400px;
  border-radius: 20px;
  overflow: visible;
  background: transparent;
  box-shadow: none;
}
.cf-track {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}
.cf-slide {
  position: absolute;
  top: 50%; left: 50%;
  width: 74%;
  height: 100%;
  border-radius: 20px;
  overflow: hidden;
  transform-origin: center center;
  transform: translate(-50%, -50%) scale(.7);
  opacity: 0;
  filter: blur(3px);
  transition: transform .7s cubic-bezier(.2,.8,.2,1),
              opacity .55s ease,
              filter .55s ease,
              width .7s cubic-bezier(.2,.8,.2,1),
              mask-image .55s ease,
              -webkit-mask-image .55s ease;
  pointer-events: none;
  z-index: 1;
  box-shadow: 0 14px 30px rgba(22,33,62,.14);
}
.cf-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cf-slide::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.35) 100%);
  pointer-events: none;
}
.cf-slide.is-active {
  padding: 10px;
  width: 96%;
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  filter: none;
  pointer-events: auto;
  z-index: 3;
  box-shadow: 0 20px 46px rgba(22,33,62,.2);
  mask-image: linear-gradient(to right, transparent 0%, #000 4%, #000 96%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 4%, #000 96%, transparent 100%);
}
.cf-slide.is-left {
  transform: translate(-50%, -50%) scale(.78) translateX(-78%) rotateY(8deg);
  opacity: .4;
  filter: blur(1.5px) brightness(.8);
  z-index: 2;
  box-shadow: none;
  mask-image: linear-gradient(to left, transparent 0%, #000 48%);
  -webkit-mask-image: linear-gradient(to left, transparent 0%, #000 48%);
}
.cf-slide.is-right {
  transform: translate(-50%, -50%) scale(.78) translateX(78%) rotateY(-8deg);
  opacity: .4;
  filter: blur(1.5px) brightness(.8);
  z-index: 2;
  box-shadow: none;
  mask-image: linear-gradient(to right, transparent 0%, #000 48%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 48%);
}
.cf-slide.is-hidden {
  width: 74%;
  transform: translate(-50%, -50%) scale(.6);
  opacity: 0;
  filter: blur(3px);
}
.cf-arrow {
  flex: 0 0 auto;
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(22,33,62,.08);
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(6px);
  color: #16213e;
  font-size: 20px;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(22,33,62,.12);
  transition: background .25s ease, transform .25s ease, color .25s ease, box-shadow .25s ease;
  margin: 0 10px;
  position: relative;
  z-index: 5;
}
.cf-arrow:hover {
  background: linear-gradient(135deg, var(--purple), var(--purple-deep));
  color: #fff;
  transform: scale(1.08);
  box-shadow: 0 8px 20px rgba(139,95,191,.4);
}
.cf-progress {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  width: 160px;
  height: 3px;
  border-radius: 999px;
  background: rgba(255,255,255,.35);
  overflow: hidden;
  z-index: 4;
}
.cf-progress-fill {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--orange), var(--orange-deep));
  transition: width .12s linear;
}
.cf-counter {
  position: absolute;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  z-index: 4;
  font-size: 11.5px;
  font-weight: 600;
  color: #fff;
  background: rgba(0,0,0,.35);
  padding: 3px 10px;
  border-radius: 999px;
  backdrop-filter: blur(4px);
  letter-spacing: .5px;
}
@media (max-width: 640px) {
  .cf-section { padding: 22px 6px 20px; overflow: hidden; }
  .cf-viewport { height: 200px; border-radius: 16px; }
  .cf-title { font-size: 19px; }
  .cf-arrow { width: 34px; height: 34px; font-size: 15px; margin: 0 6px; }
  .cf-progress { bottom: 8px; width: 120px; }
  .cf-counter { bottom: 16px; font-size: 10.5px; }
  .cf-slide { width: 68%; }
  .cf-slide.is-active { width: 100%; }
  .cf-slide.is-left  { transform: translate(-50%, -50%) scale(.78) translateX(-84%) rotateY(7deg); }
  .cf-slide.is-right { transform: translate(-50%, -50%) scale(.78) translateX(84%) rotateY(-7deg); }
  .stage, .cf-viewport {
    touch-action: pan-y;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cf-slide, .cf-intro { transition: none; animation: none; }
}
.cf-slide-promo { background: #0f3460; }
.promo-card-inner {
  position: relative;
  width: 100%; height: 100%;
  cursor: pointer;
  border-radius: inherit;
  overflow: hidden;
}
.promo-card-bg {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(.55) saturate(1.1);
}
.promo-card-overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 16px;
  background: radial-gradient(circle at 50% 40%, rgba(15,52,96,.15), rgba(10,5,18,.55));
  text-align: center;
  padding: 20px;
}
.promo-card-play {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ffb703, #fb8500);
  color: #241442;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  box-shadow: 0 0 24px rgba(255,183,3,.55);
  transition: transform .2s ease;
}
.promo-card-inner:hover .promo-card-play { transform: scale(1.1); }
.promo-card-text .promo-card-eyebrow {
  display: block;
  color: #ffb703;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 6px;
}
.promo-card-text h3 {
  color: #fff;
  font-size: 17px;
  margin: 0;
}
@media (max-width: 640px) {
  .promo-card-play { width: 50px; height: 50px; font-size: 16px; }
  .promo-card-text h3 { font-size: 14px; }
}

/* ===== Exam_generator.css ===== */
:root{
  --exam-primary:#4f46e5;
  --exam-primary-dark:#3730a3;
  --exam-success:#16a34a;
  --exam-danger:#dc2626;
  --exam-warn:#d97706;
  --exam-bg:#ffffff;
  --exam-bg-soft:#f4f5fb;
  --exam-border:#e4e4f0;
  --exam-text:#1f2333;
  --exam-text-soft:#6b7080;
  --exam-radius:16px;
}
.exam-overlay{
  position:fixed; inset:0; background:rgba(20,20,35,.55);
  display:flex; align-items:center; justify-content:center;
  z-index:9999; padding:16px; direction:rtl;
  font-family:inherit; backdrop-filter:blur(2px);
}
.exam-overlay[hidden]{ display:none; }
.exam-modal{
  background:var(--exam-bg); border-radius:var(--exam-radius);
  width:100%; max-width:640px; max-height:92vh; overflow:hidden;
  display:flex; flex-direction:column;
  box-shadow:0 20px 60px rgba(0,0,0,.25);
  animation:examPopIn .18s ease-out;
}
@keyframes examPopIn{ from{ transform:translateY(12px); opacity:0 } to{ transform:none; opacity:1 } }
.exam-modal-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 22px; border-bottom:1px solid var(--exam-border);
}
.exam-modal-header h3{ margin:0; font-size:18px; color:var(--exam-text); flex:1; text-align:center; }
.exam-close-btn{
  background:none; border:none; font-size:22px; line-height:1; cursor:pointer;
  color:var(--exam-text-soft); padding:4px 8px; border-radius:8px;
}
.exam-close-btn:hover{ background:var(--exam-bg-soft); color:var(--exam-text); }

/* ---------- دکمه‌های هدرِ مودالِ آزمون (بستن + برگشت) - نسخه‌ی «خفن»
   هم‌رنگ با دکمه‌ی برگشتِ جلساتِ کلاس (myModal): طلایی/کهربایی با درخشش
   ملایمِ همیشگی، نه فقط رویِ هاور، تا از همون اول چشم‌نواز و باثبات باشه. ---------- */
.exam-modal-header .modal-header-m__btn{
  box-shadow: 0 2px 10px rgba(255, 183, 3, 0.16);
}
.exam-modal-header .modal-header-m__btn:hover{
  transform: translateY(-1px) scale(1.06);
}
.exam-modal-header .modal-header-m__btn.back-variant{
  background: rgba(255, 183, 3, 0.12);
  border: 1.5px solid #ffb703;
  color: #ffb703;
}
.exam-modal-header .modal-header-m__btn.back-variant:hover,
.exam-modal-header .modal-header-m__btn.back-variant:active{
  background: #ffb703;
  color: #1a1a2e;
  box-shadow: 0 0 18px rgba(255, 183, 3, 0.6);
}
.exam-modal-header .modal-header-m__btn.back-variant:hover svg,
.exam-modal-header .modal-header-m__btn.back-variant:active svg{ transform: translateX(3px); }

.exam-steps{ display:flex; gap:6px; padding:14px 22px 0; }
.exam-step-dot{ flex:1; height:4px; border-radius:4px; background:var(--exam-border); }
.exam-step-dot.active{ background:var(--exam-primary); }
.exam-step-dot.done{ background:var(--exam-primary); opacity:.5; }
.exam-modal-body{ padding:20px 22px; overflow-y:auto; flex:1; }
.exam-step-title{ font-size:15px; font-weight:700; color:var(--exam-text); margin:0 0 4px; }
.exam-step-sub{ font-size:13px; color:var(--exam-text-soft); margin:0 0 16px; }
.exam-choice-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:10px; }
.exam-choice-grid-sm{ grid-template-columns:repeat(auto-fit,minmax(90px,1fr)); margin-bottom:16px; }
.exam-choice-grid-col{ grid-template-columns:1fr; gap:10px; }
.exam-choice-card{
  border:2px solid var(--exam-border); border-radius:12px; padding:12px 10px;
  text-align:center; cursor:pointer; user-select:none; font-size:14px; color:var(--exam-text);
  transition:.15s;
}
.exam-choice-card:hover{ border-color:#c7c9f5; }
.exam-choice-card.selected{ border-color:var(--exam-primary); background:#eef0ff; color:var(--exam-primary-dark); font-weight:700; }
.exam-choice-card small{ display:block; color:var(--exam-text-soft); font-size:11px; margin-top:2px; }
.exam-choice-card-wide{ text-align:right; padding:14px 16px; }
.exam-choice-card-wide small{ font-weight:400; margin-top:4px; line-height:1.6; }

/* ===== صفحه‌ی «آزمون‌های من»: چوزرِ کارنامه/فایل - نسخه‌ی جذاب‌تر ===== */
.myexams-subtitle{
  text-align:center;
  font-size:15.5px;
  font-weight:700;
  margin:2px 0 20px;
}
.myexams-choice-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:16px;
}
.myexams-choice-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:8px;
  padding:26px 18px;
  border-radius:18px;
  border:1.5px solid var(--exam-border);
  background:linear-gradient(180deg, #ffffff 0%, var(--exam-bg-soft) 100%);
  cursor:pointer;
  user-select:none;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.myexams-choice-card:hover{
  transform:translateY(-4px);
  border-color:var(--exam-primary);
  box-shadow:0 12px 26px rgba(79,70,229,0.16);
}
.myexams-choice-card:active{ transform:translateY(-1px); }
.myexams-choice-icon{
  width:54px;
  height:54px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:25px;
  background:rgba(79,70,229,0.1);
  margin-bottom:4px;
}
.myexams-choice-title{
  font-size:14.5px;
  font-weight:700;
  color:var(--exam-text);
  line-height:1.6;
}
.myexams-choice-desc{
  font-size:12px;
  color:var(--exam-text-soft);
  line-height:1.6;
}
@media (max-width:480px){
  .myexams-choice-grid{ grid-template-columns:1fr; }
}
.exam-substep-title{ font-size:13px; font-weight:700; color:var(--exam-text); margin:14px 0 8px; }
.exam-substep-title:first-of-type{ margin-top:0; }
.exam-substep-note{ font-size:11.5px; color:var(--exam-text-soft); margin:-4px 0 8px; }
.exam-divider{ height:1px; background:var(--exam-border); margin:6px 0 16px; }
.exam-category{ border:1.5px solid var(--exam-border); border-radius:14px; margin-bottom:12px; overflow:hidden; background:var(--exam-bg-soft); }
.exam-category-head{ display:flex; align-items:center; gap:10px; padding:14px 16px; cursor:pointer; }
.exam-category-head input{ width:18px; height:18px; accent-color:var(--exam-primary); flex-shrink:0; }
.exam-category-title{ flex:1; font-size:14.5px; font-weight:800; color:var(--exam-text); }
.exam-category-count{ font-size:11px; color:var(--exam-text-soft); background:var(--exam-bg); border:1px solid var(--exam-border); border-radius:999px; padding:3px 10px; white-space:nowrap; }
.exam-category-toggle{ color:var(--exam-text-soft); font-size:12px; transition:transform .15s; }
.exam-category-body{ display:none; padding:8px 14px 14px; background:var(--exam-bg); }
.exam-category.open .exam-category-body{ display:block; }
.exam-category.open .exam-category-toggle{ transform:rotate(180deg); }
.exam-chapter{ border:1px solid var(--exam-border); border-radius:12px; margin-bottom:10px; overflow:hidden; }
.exam-chapter-head{ display:flex; align-items:center; gap:10px; padding:12px 14px; background:var(--exam-bg-soft); cursor:pointer; }
.exam-chapter-head input{ width:17px; height:17px; accent-color:var(--exam-primary); }
.exam-chapter-title{ flex:1; font-size:14px; font-weight:600; color:var(--exam-text); }
.exam-chapter-badge{ font-size:11px; color:var(--exam-text-soft); background:#fff; border:1px solid var(--exam-border); border-radius:999px; padding:2px 8px; }
.exam-chapter-toggle{ color:var(--exam-text-soft); font-size:12px; }
.exam-topics{ padding:6px 14px 12px 14px; display:none; }
.exam-chapter.open .exam-topics{ display:block; }
.exam-chapter.open .exam-chapter-toggle{ transform:rotate(180deg); }
.exam-topic-row{ display:flex; align-items:center; gap:10px; padding:6px 4px; font-size:13.5px; color:var(--exam-text); }
.exam-topic-row input{ width:16px; height:16px; accent-color:var(--exam-primary); }
.exam-diff-detail{ margin-top:18px; }
.exam-diff-sumline{ font-size:12.5px; font-weight:700; margin:0 0 12px; }
.exam-diff-input-row{ display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.exam-diff-input-label{ width:76px; font-size:13.5px; font-weight:700; color:var(--exam-text); flex-shrink:0; }
.exam-diff-count-input{ width:90px; flex-shrink:0; }
.exam-diff-hint{ font-size:11.5px; color:var(--exam-text-soft); white-space:nowrap; }
.exam-diff-easy .exam-diff-input-label{ color:#16a34a; }
.exam-diff-medium .exam-diff-input-label{ color:#d97706; }
.exam-diff-hard .exam-diff-input-label{ color:#dc2626; }
.exam-topic-diff-table{ border:1px solid var(--exam-border); border-radius:12px; overflow:hidden; }
.exam-topic-diff-row{
  display:grid; grid-template-columns:1.6fr repeat(3,1fr); gap:8px; align-items:center;
  padding:10px 12px; border-bottom:1px solid var(--exam-border);
}
.exam-topic-diff-row:last-child{ border-bottom:none; }
.exam-topic-diff-head{ background:var(--exam-bg-soft); font-size:12px; font-weight:700; color:var(--exam-text-soft); padding:8px 12px; }
.exam-topic-diff-name{ font-size:13px; font-weight:600; color:var(--exam-text); }
.exam-topic-diff-cell-head{ text-align:center; }
.exam-topic-diff-cell{ display:flex; flex-direction:column; align-items:center; gap:3px; }
.exam-diff-count-input-sm{ width:100%; padding:6px 4px; font-size:16px; border-radius:8px; }
.exam-diff-hint-sm{ font-size:10px; color:var(--exam-text-soft); }
@media (max-width:520px){
  .exam-topic-diff-row{ grid-template-columns:1.4fr repeat(3,1fr); gap:4px; padding:8px; }
  .exam-topic-diff-name{ font-size:12px; }
}
.exam-count-input{
  width:100%; padding:12px 14px; border:2px solid var(--exam-border); border-radius:12px;
  font-size:16px; text-align:center; color:var(--exam-text); direction:ltr;
}
.exam-count-input:focus{ outline:none; border-color:var(--exam-primary); }
.exam-empty-note{ font-size:12px; color:var(--exam-text-soft); margin-top:10px; }
.exam-error-box{
  background:#fdeaea; color:var(--exam-danger); border:1px solid #f7c9c9; border-radius:10px;
  padding:10px 12px; font-size:13px; margin-top:12px;
}
.exam-modal-footer{ display:flex; justify-content:space-between; gap:10px; padding:16px 22px; border-top:1px solid var(--exam-border); }
.exam-btn{ border:none; border-radius:10px; padding:10px 20px; font-size:14px; cursor:pointer; font-weight:600; }
.exam-runner .exam-btn{ font-size:calc(14px * var(--exam-ui-scale, 1)); }
.exam-btn-primary{ background:var(--exam-primary); color:#fff; }
.exam-btn-primary:hover{ background:var(--exam-primary-dark); }
.exam-btn-primary:disabled{ background:#c7c9f5; cursor:not-allowed; }
.exam-btn-ghost{ background:var(--exam-bg-soft); color:var(--exam-text); }
.exam-btn-ghost:hover{ background:var(--exam-border); }
.exam-btn-sm{ padding:8px 14px; font-size:13px; }
.exam-btn:disabled{ opacity:.45; cursor:not-allowed; }
@media (max-width: 760px){
  .exam-modal-footer{ padding: 12px 14px; gap: 10px; }
  .exam-modal-footer .exam-btn{
    flex: 1;
    min-height: 48px;
    font-size: 14.5px;
    border-radius: 12px;
  }
  .exam-modal-footer .exam-btn-primary{ box-shadow: 0 4px 14px rgba(79,70,229,.32); }
  .exam-modal.exam-modal-preview.exam-modal-fullscreen .exam-modal-footer{
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  }
  .exam-modal.exam-modal-preview.exam-modal-fullscreen .exam-modal-header{
    padding-top: calc(14px + env(safe-area-inset-top, 0px));
  }
}
.exam-login-note{ text-align:center; padding:30px 10px; }
.exam-login-note p{ color:var(--exam-text-soft); margin-bottom:16px; }
.exam-runner{
  position:fixed; inset:0; background:var(--exam-bg-soft); z-index:9998;
  display:flex; flex-direction:column; direction:rtl;
  transition:background .2s, color .2s;
  /* ⭐⭐ کاغذِ سوال/گزینه/پاسخِ تایپی (کلاس‌های مشترکِ qb-typing-* که توی
     question-bank.js تعریف شدن) این‌جا هم با همین نام‌های متغیر رنگ می‌گیرن؛
     چون .exam-runner یه درختِ DOM کاملاً جدا از مودالِ بانکِ سواله، این
     متغیرها باید مستقل این‌جا هم تعریف بشن تا با ارث‌بریِ CSS به هر
     qb-typing-paper/qb-typing-option/qb-answer-paperِ داخلش برسن. مقادیرِ
     پایین مخصوصِ حالتِ روشنِ صفحه‌ی آزمونه (هماهنگ با برندِ بنفش/ایندیگوی
     آزمون، نه طلاییِ بانک سوال). */
  --qb-paper-bg: linear-gradient(160deg, #fffaf0, #fef3da);
  --qb-paper-color: #241f10;
  --qb-paper-border: rgba(79,70,229,.18);
  --qb-option-bg: #ffffff;
  --qb-option-color: #1f2333;
  --qb-option-border: var(--exam-border);
  --qb-answer-bg: linear-gradient(160deg, #eafaf1, #dcf5e5);
  --qb-answer-color: #114a30;
  --qb-answer-border: rgba(22,163,74,.35);
}
.exam-runner[data-theme="dark"]{
  --exam-bg:#171923; --exam-bg-soft:#10121a; --exam-border:#2b2e3d;
  --exam-text:#eef0fa; --exam-text-soft:#9aa0bb;
  /* ⭐ نسخه‌ی تیره‌ی همون سه‌تا کاغذ: سوال = بنفش/سرمه‌ایِ خنثی، گزینه‌ها یه
     پله روشن‌تر، پاسخ = سبزِ تیره‌ی ملایم - دقیقاً هم‌خانواده با پالتِ
     بانکِ سوال، فقط برای این‌که با پس‌زمینه‌ی تیره‌ی خودِ صفحه‌ی آزمون
     (که رنگ‌مایه‌ش بنفش/ایندیگوئه) هماهنگ‌تر باشه. */
  --qb-paper-bg: linear-gradient(160deg, #1e2036, #171827);
  --qb-paper-color: #eef0fb;
  --qb-paper-border: rgba(255,255,255,.1);
  --qb-option-bg: rgba(255,255,255,.045);
  --qb-option-color: #e7e8f5;
  --qb-option-border: rgba(255,255,255,.14);
  --qb-answer-bg: linear-gradient(160deg, #16281f, #101c17);
  --qb-answer-color: #d9f7e6;
  --qb-answer-border: rgba(46,204,113,.3);
}
.exam-runner-top{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:14px 20px; background:var(--exam-bg); border-bottom:1px solid var(--exam-border);
  position:relative; z-index:1;
  box-shadow:0 2px 14px rgba(30,20,80,.05);
}
.exam-runner[data-theme="dark"] .exam-runner-top{ box-shadow:0 2px 14px rgba(0,0,0,.25); }
.exam-top-left, .exam-top-right{ display:flex; align-items:center; gap:10px; }
.exam-top-progress-track{ height:4px; background:var(--exam-border); overflow:hidden; }
.exam-top-progress-fill{
  height:100%; width:0%; border-radius:0 0 0 4px;
  background:linear-gradient(90deg, var(--exam-primary), #7c3aed);
  transition:width .45s cubic-bezier(.2,.8,.2,1);
}
.exam-deadline-alert{
  display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap;
  background:linear-gradient(135deg,#fee2e2,#fecaca); color:#991b1b;
  border-bottom:1px solid #fca5a5; padding:10px 16px; font-size:13px; font-weight:700;
  animation:examDeadlinePulse 1.8s ease-in-out infinite;
}
.exam-deadline-alert[hidden]{ display:none; }
.exam-deadline-alert i{ color:#dc2626; font-size:15px; animation:examDeadlineShake 1.1s ease-in-out infinite; }
.exam-deadline-alert b{
  direction:ltr; unicode-bidi:isolate; font-size:14.5px; background:#dc2626; color:#fff;
  padding:2px 12px; border-radius:8px; letter-spacing:.4px;
}
.exam-deadline-alert.expired{ animation:none; background:#dc2626; color:#fff; }
.exam-deadline-alert.expired b{ background:rgba(255,255,255,.25); }
.exam-runner[data-theme="dark"] .exam-deadline-alert{
  background:linear-gradient(135deg,#3a1414,#4a1a1a); color:#fecaca; border-color:#5c1f1f;
}
@keyframes examDeadlinePulse{
  0%,100%{ box-shadow:0 0 0 rgba(220,38,38,0); }
  50%{ box-shadow:0 4px 20px rgba(220,38,38,.35); }
}
@keyframes examDeadlineShake{
  0%,92%,100%{ transform:rotate(0); }
  94%{ transform:rotate(-10deg); }
  97%{ transform:rotate(10deg); }
}
.exam-progress{ font-size:calc(13px * var(--exam-ui-scale, 1)); color:var(--exam-text-soft); font-weight:600; }
.exam-timer{
  position:relative;
  display:flex; flex-direction:column; gap:6px; min-width:108px;
  background:linear-gradient(135deg,#eef0ff,#f5f3ff); border:1px solid #dfe1fa;
  border-radius:16px; padding:8px 15px 10px;
  box-shadow:0 2px 10px -4px rgba(79,70,229,.35), inset 0 1px 0 rgba(255,255,255,.6);
  transition:background .25s, border-color .25s, box-shadow .25s;
}
.exam-timer-row{ display:flex; align-items:center; justify-content:center; gap:8px; }

/* ⭐ آیکونِ ساعتِ شنی داخلِ یه بج‌ِ دایره‌ایِ گرادیانتی */
.exam-timer-icon-badge{
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  width:22px; height:22px; border-radius:50%;
  background:linear-gradient(135deg, var(--exam-primary), #7c3aed);
  box-shadow:0 2px 6px -1px rgba(79,70,229,.55);
  transition:background .25s, box-shadow .25s;
}
.exam-timer-icon{ color:#fff; font-size:11px; animation:examTimerTick 2.2s ease-in-out infinite; }
.exam-timer-text{
  font-weight:900; font-size:calc(19px * var(--exam-ui-scale, 1)); letter-spacing:.4px; direction:ltr; unicode-bidi:isolate;
  font-variant-numeric:tabular-nums;
  background:linear-gradient(90deg, var(--exam-primary-dark), var(--exam-primary));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:var(--exam-primary-dark);
  transition:color .25s;
}
.exam-timer-track{
  position:relative; height:6px; border-radius:5px; background:rgba(79,70,229,.13); overflow:hidden;
}
.exam-timer-fill{
  position:relative; height:100%; width:100%; border-radius:5px;
  background:linear-gradient(90deg, var(--exam-primary), #7c3aed);
  transition:width 1s linear, background .25s;
  overflow:hidden;
}
/* ⭐ برق افتادنِ نرم روی نوارِ زمان، برای جذاب‌تر شدنِ تایمرِ دیجیتال */
.exam-timer-fill::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  width:40%; animation:examTimerShine 2.4s ease-in-out infinite;
}
@keyframes examTimerShine{
  0%{ transform:translateX(-120%); }
  100%{ transform:translateX(340%); }
}
.exam-runner[data-theme="dark"] .exam-timer{ background:#1c1f33; border-color:#2c2f4a; box-shadow:0 2px 10px -4px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.05); }
.exam-timer.warn{ background:linear-gradient(135deg,#fdeaea,#fde2e2); border-color:#f6c6c6; animation:examTimerWarnPulse 1s ease-in-out infinite; }
.exam-runner[data-theme="dark"] .exam-timer.warn{ background:linear-gradient(135deg,#3a1f22,#3a1418); border-color:#5c2226; }
.exam-timer.warn .exam-timer-text{
  background:linear-gradient(90deg, var(--exam-danger), #f87171);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:var(--exam-danger);
}
.exam-timer.warn .exam-timer-icon-badge{ background:linear-gradient(135deg,#f87171,var(--exam-danger)); box-shadow:0 2px 6px -1px rgba(220,38,38,.6); }
.exam-timer.warn .exam-timer-fill{ background:linear-gradient(90deg,#f87171,var(--exam-danger)); }
@keyframes examTimerTick{
  0%,100%{ transform:rotate(0); }
  50%{ transform:rotate(-14deg); }
}
@keyframes examTimerWarnPulse{
  0%,100%{ box-shadow:0 0 0 rgba(220,38,38,0); }
  50%{ box-shadow:0 0 0 6px rgba(220,38,38,.14); }
}

/* ⭐⭐⭐ دکمه‌ی تعویضِ نمایشِ تایمر (دیجیتال <-> عقربه‌ای) — گوشه‌ی بالا-چپِ کادرِ تایمر */
.exam-timer-style-btn{
  position:absolute; top:-8px; left:-8px; z-index:2;
  width:22px; height:22px; border-radius:50%; border:2px solid var(--exam-bg,#fff);
  background:linear-gradient(135deg, var(--exam-primary), #7c3aed); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:10px; cursor:pointer;
  box-shadow:0 2px 6px rgba(0,0,0,.25); transition:transform .2s ease;
}
.exam-timer-style-btn:hover{ transform:rotate(90deg) scale(1.08); }

/* ---------- تایمرِ دیجیتال (رفتارِ قبلی، فقط داخلِ یه رَپر برای نمایش/مخفی شدن) ---------- */
.exam-timer-digital{ display:none; flex-direction:column; gap:6px; }
.exam-timer[data-style="digital"] .exam-timer-digital{ display:flex; }

/* ==================================================================================
   ⭐ ساعتِ عقربه‌ایِ «پیتزایی» — یه دایره‌ی پرِ توپر که با گذشتِ زمان،
   دقیقاً مثلِ برش‌خوردنِ یه پیتزا، قاچ‌قاچ کوچیک و رنگش کم‌کم به قرمز نزدیک می‌شه.
   مقدارِ --exam-clock-deg (سهمِ زمانِ باقی‌مونده از ۳۶۰ درجه) و --exam-clock-color
   (رنگِ میانِ آبی/بنفشِ سایت تا قرمزِ هشدار) از جاوااسکریپت ست می‌شن.
   ================================================================================== */
.exam-timer-analog{ display:none; align-items:center; justify-content:center; gap:12px; flex-direction:row-reverse; }
.exam-timer[data-style="analog"] .exam-timer-analog{ display:flex; }

.exam-clock-pie{
  --exam-clock-deg:360deg;
  --exam-clock-color:#4f46e5;
  position:relative; flex-shrink:0;
  width:48px; height:48px; border-radius:50%;
  background:
    conic-gradient(from -90deg,
      var(--exam-clock-color) 0deg var(--exam-clock-deg),
      rgba(79,70,229,.14) var(--exam-clock-deg) 360deg);
  box-shadow:0 3px 10px -2px rgba(79,70,229,.4);
  box-shadow:0 3px 10px -2px color-mix(in srgb, var(--exam-clock-color) 55%, transparent);
  animation:examClockFloat 3.2s ease-in-out infinite;
  transition:background .9s linear, box-shadow .35s ease;
}
/* برش‌های پیتزا: خط‌های نازکِ روشن که دایره رو به ۱۲ قاچِ مساوی تقسیم می‌کنن */
.exam-clock-pie::before{
  content:''; position:absolute; inset:0; border-radius:50%; pointer-events:none;
  background:repeating-conic-gradient(rgba(255,255,255,.65) 0deg 1.6deg, transparent 1.6deg 30deg);
  mix-blend-mode:overlay;
}
/* براقیِ بالا-چپِ دایره، برای حسِ سه‌بعدی و جذاب‌تر شدنِ ساعت */
@keyframes examClockFloat{
  0%,100%{ transform:translateY(0) scale(1); }
  50%{ transform:translateY(-2px) scale(1.04); }
}
.exam-timer.warn .exam-clock-pie{ animation:examClockFloat 3.2s ease-in-out infinite, examClockWarnPulse .9s ease-in-out infinite; }
@keyframes examClockWarnPulse{
  0%,100%{ box-shadow:0 3px 10px -2px rgba(220,38,38,.5); }
  50%{ box-shadow:0 3px 20px 3px rgba(220,38,38,.75); }
}
.exam-clock-text{
  font-weight:900; font-size:17px; direction:ltr; unicode-bidi:isolate;
  letter-spacing:.3px; font-variant-numeric:tabular-nums;
  background:linear-gradient(90deg, var(--exam-primary-dark), var(--exam-primary));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:var(--exam-primary-dark);
  transition:color .25s;
}
.exam-timer.warn .exam-clock-text{
  background:linear-gradient(90deg, var(--exam-danger), #f87171);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:var(--exam-danger);
}
.exam-runner[data-theme="dark"] .exam-clock-pie{ box-shadow:0 3px 10px -2px rgba(0,0,0,.5); }
.exam-runner[data-theme="dark"] .exam-clock-pie::before{ background:repeating-conic-gradient(rgba(23,25,35,.5) 0deg 1.6deg, transparent 1.6deg 30deg); }

/* ---------- کارت‌های انتخابِ نوعِ تایمر تو ویزارد ساخت آزمون ---------- */
.exam-timerstyle-grid{ grid-template-columns:repeat(2,1fr); }
.exam-timerstyle-card{ display:flex; align-items:center; justify-content:center; gap:8px; }
.exam-timerstyle-icon{ font-size:20px; }
.exam-exit-btn{
  display:flex; align-items:center; gap:7px;
  background:none; border:1px solid var(--exam-border); border-radius:10px; padding:7px 14px;
  font-size:calc(13px * var(--exam-ui-scale, 1)); cursor:pointer; color:var(--exam-text-soft); transition:.15s;
}
.exam-exit-btn:hover{ border-color:var(--exam-danger); color:var(--exam-danger); background:#fdeaea; }
.exam-runner[data-theme="dark"] .exam-exit-btn:hover{ background:#3a1f22; }
.exam-theme-toggle{
  border:1px solid var(--exam-border); background:var(--exam-bg-soft); border-radius:50%;
  width:34px; height:34px; display:flex; align-items:center; justify-content:center;
  cursor:pointer; font-size:16px; color:var(--exam-text); transition:.15s;
}
.exam-theme-toggle:hover{ border-color:var(--exam-primary); transform:rotate(15deg); }

/* ⭐⭐ دکمه‌ی «تنظیمِ فونت» + پنلِ کشویی‌اش - کنارِ دکمه‌ی تم، همون قدِ خودش، با یه
   نشانه‌ی طلایی/کهرباییِ ظریف تا از بینِ بقیه‌ی دکمه‌های خنثی، به‌عنوانِ یه امکانِ
   جذاب/قابل‌کشف به چشم بیاد. */
.exam-fontset{ position:relative; }
.exam-fontset-btn{
  border:1px solid #ffb703; background:rgba(255,183,3,0.12); border-radius:50%;
  width:34px; height:34px; display:flex; align-items:center; justify-content:center;
  cursor:pointer; font-size:14px; color:#a0742f; transition:.15s;
}
.exam-fontset-btn:hover{ background:#ffb703; color:#1a1a2e; transform:scale(1.08); }
.exam-fontset.open .exam-fontset-btn{ background:#ffb703; color:#1a1a2e; }
.exam-fontset-panel{
  position:absolute; top:calc(100% + 10px); left:0; z-index:20;
  width:250px; background:var(--exam-bg); border:1px solid var(--exam-border);
  border-radius:16px; padding:14px; box-shadow:0 14px 34px rgba(30,20,80,.18);
  animation:examPopIn .15s ease-out;
}
.exam-fontset-panel[hidden]{ display:none; }
.exam-fontset-row{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:7px 0; border-bottom:1px dashed var(--exam-border);
}
.exam-fontset-row:last-of-type{ border-bottom:none; }
.exam-fontset-label{ font-size:12.5px; font-weight:700; color:var(--exam-text); }
.exam-fontset-ctrl{ display:flex; align-items:center; gap:6px; }
.exam-fontset-step{
  width:26px; height:26px; border-radius:8px; border:1px solid var(--exam-border);
  background:var(--exam-bg-soft); color:var(--exam-text); font-size:16px; font-weight:800;
  cursor:pointer; display:flex; align-items:center; justify-content:center; line-height:1;
}
.exam-fontset-step:hover{ border-color:var(--exam-primary); color:var(--exam-primary); }
.exam-fontset-val{ min-width:30px; text-align:center; font-size:12.5px; font-weight:800; color:var(--exam-text); }
.exam-fontset-reset{
  width:100%; margin-top:10px; padding:8px; border-radius:10px; border:1px dashed var(--exam-border);
  background:none; color:var(--exam-text-soft); font-size:12px; font-weight:700; cursor:pointer;
}
.exam-fontset-reset:hover{ border-color:var(--exam-primary); color:var(--exam-primary); }
.exam-fontset-panel-static{
  position:static; width:100%; box-shadow:none; animation:none; padding:12px 14px;
  background:var(--exam-bg-soft);
}

/* ⭐⭐ صفحه‌ی پیش‌نمایش/تنظیماتِ قبل از شروعِ آزمون */
/* ⭐⭐ رفعِ باگِ اصلی: قبلاً این کانتینر align-items:center + justify-content:center
   (سنترِ عمودی با فلکس) رو با overflow-y:auto ترکیب کرده بود؛ این ترکیب یه باگِ
   شناخته‌شده‌ی مرورگرهاست: هر وقت ارتفاعِ محتوا عوض بشه (مثلاً با تغییرِ سایزِ
   فونتِ پیش‌نمایش)، مرورگر margin‌های خودکارِ سنترکردن رو دوباره حساب می‌کنه و همین
   باعث می‌شد اسکرول ناخواسته به بالای صفحه پرت بشه. حالا سنترِ عمودی حذف شده
   (justify-content:flex-start) و به‌جاش با یه padding-top معادلِ ارتفاعِ نوارِ
   ثابتِ بالا (exam-pregate-topbar) فاصله گرفته می‌شه؛ همین کافیه چون خودِ کارت هم
   دیگه معمولاً بلندتر از صفحه‌ست. */
.exam-pregate{
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  padding:88px 20px 20px; overflow-y:auto;
}
.exam-pregate-card{
  width:100%; max-width:460px; background:var(--exam-bg); border:1px solid var(--exam-border);
  border-radius:26px; padding:28px 26px; text-align:center;
  box-shadow:0 18px 46px rgba(30,20,80,.12);
  animation:examCardPop .4s cubic-bezier(.22,.85,.32,1.15);
}
/* ⭐⭐ رفعِ باگِ قدیمی: قبلاً پیش‌نمایش کنارِ پنلِ تنظیمات (ستونِ ثابتِ ۳۲۰px) چیده
   می‌شد؛ یعنی عرضِ واقعاً در دسترسِ کارتِ پیش‌نمایش همیشه کمتر از عرضِ واقعیِ صفحه‌ی
   اجرای آزمون بود (که تمامِ عرضِ صفحه رو داره، بدونِ هیچ پنلِ کناری). همین اختلافِ
   عرض باعث می‌شد چیدمانِ خودکارِ گزینه‌ها (۴/۲/۱ ستونی، براساسِ عرضِ واقعیِ کانتینر)
   توی پیش‌نمایش با توی آزمونِ واقعی فرق کنه (مثلاً ۲×۲ به‌جای یک‌ردیفِ ۴تایی).
   ⭐ width هم از ۹۶vw به ۱۰۰% تغییر کرد: چون خودِ .exam-pregate از قبل ۲۰px
   پدینگِ افقی داره (دقیقاً هم‌اندازه‌ی پدینگِ افقیِ exam-runner-body توی صفحه‌ی
   واقعیِ اجرای آزمون)، همون ۹۶vw یه محدودیتِ اضافیِ تکراری بود که عرضِ در دسترس
   رو (توی صفحه‌های نه‌چندان‌عریض) کمی کمتر از عرضِ واقعیِ صفحه‌ی آزمون می‌کرد. */
.exam-pregate-card.has-preview{
  max-width:1260px; width:100%; display:flex; flex-direction:column;
  gap:22px; align-items:stretch; text-align:right; padding:24px 20px;
}
.exam-pregate-card.has-preview .exam-pregate-main{
  text-align:center; width:100%; max-width:560px; margin:0 auto;
}
.exam-pregate-card.has-preview .exam-pregate-intro{ margin-bottom:0; }
/* ⭐⭐ نوارِ بالای صفحه‌ی پیش‌نمایش/تنظیمات: به‌درخواستِ کاربر، دیگه sticky نیست
   (که داخلِ کانتینرِ اسکرول‌شونده‌ی مرکزچین رفتارِ قابلِ‌اعتمادی نداشت)، بلکه واقعاً
   position:fixed - یعنی مستقل از اسکرولِ کارتِ زیرش، همیشه بالای صفحه ثابت می‌مونه،
   هرجای صفحه که کاربر اسکرول کنه. عنوانِ «پیش‌نمایش و تنظیمات» هم همین‌جا نوشته
   شده تا با اسکرول از دید خارج نشه. جمع‌وجورتر از نسخه‌ی قبلی: به‌جای سه ردیفِ
   کاملِ +/- فونت، فقط یه دکمه‌ی کوچیکِ دایره‌ای (همون exam-fontset که توی خودِ
   اجرای آزمون هم استفاده می‌شه) با یه پاپ‌آورِ کشویی. */
.exam-pregate-topbar{
  position:fixed; top:0; left:0; right:0; z-index:10001;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  flex-wrap:wrap; padding:13px 22px;
  background:linear-gradient(135deg, var(--exam-primary), #7c3aed);
  box-shadow:0 6px 22px rgba(30,20,80,.24);
}
.exam-pregate-topbar-title{
  display:flex; align-items:center; gap:7px; white-space:nowrap;
  font-size:15px; font-weight:800; color:#fff;
}
.exam-pregate-topbar-title i{ color:#ffd166; font-size:14px; }
.exam-pregate-topbar-actions{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.exam-pregate-topbar .exam-theme-toggle,
.exam-pregate-topbar .exam-fontset-btn{
  background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.55); color:#fff;
}
.exam-pregate-topbar .exam-theme-toggle:hover,
.exam-pregate-topbar .exam-fontset-btn:hover{ background:rgba(255,255,255,.3); transform:none; }
/* ⭐⭐ به‌درخواستِ کاربر: این دکمه‌ها (تم/فونت) توی صفحه‌ی پیش‌نمایش، به‌جای دایره‌ی
   تک‌آیکونیِ کم‌کشف، حالا یه قرصِ آیکون+برچسبِ متنی‌ان تا از همون نگاهِ اول مشخص
   باشه که این‌جا قابلِ تنظیم‌کردنه، نه فقط تزئینی. دورشون هم یه کپسولِ نیم‌شفافِ
   محسوس با یه هالهٔ نرمِ ثابت (نه فقط روی هاور) کشیده شده تا کلِ گروه به‌چشم بیاد. */
.exam-pregate-settings-group{
  display:flex; align-items:center; gap:8px; padding:6px 10px; border-radius:16px;
  background:rgba(255,255,255,.12); border:1.5px dashed rgba(255,255,255,.55);
  animation:examSettingsHintGlow 2.6s ease-in-out infinite;
}
@keyframes examSettingsHintGlow{
  0%,100%{ box-shadow:0 0 0 rgba(255,255,255,0); }
  50%{ box-shadow:0 0 14px 2px rgba(255,255,255,.35); }
}
.exam-pregate-topbar .exam-pregate-labeled-btn{
  width:auto; height:32px; border-radius:10px; padding:0 12px; gap:6px;
}
.exam-pregate-btn-label{ font-size:12.5px; font-weight:800; white-space:nowrap; }
@media (max-width:480px){
  .exam-pregate-settings-group{ padding:4px 7px; gap:5px; }
  .exam-pregate-topbar .exam-pregate-labeled-btn{ height:28px; padding:0 9px; }
  .exam-pregate-btn-label{ font-size:11.5px; }
}
.exam-pregate-topbar .exam-pregate-start{
  width:auto; padding:11px 24px; font-size:14.5px; font-weight:800;
  background:#fff; color:var(--exam-primary-dark);
  box-shadow:0 5px 16px rgba(0,0,0,.2);
}
.exam-pregate-topbar .exam-pregate-start:hover{ background:#fff6e6; }
@media (max-width:480px){
  .exam-pregate{ padding-top:82px; }
  .exam-pregate-topbar{ padding:10px 14px; gap:8px; }
  .exam-pregate-topbar-title{ font-size:12.5px; }
  .exam-pregate-topbar .exam-pregate-start{ padding:9px 16px; font-size:12.5px; }
}
.exam-pregate-preview{
  /* ⭐⭐ رفعِ باگ: قبلاً این باکس یه padding افقی (16px هر طرف) هم داشت که توی
     صفحه‌ی واقعیِ اجرای آزمون اصلاً وجود نداره (اونجا مستقیم از padding خودِ
     exam-runner-body به exam-question-wrap می‌رسه). همین ۳۲px پدینگِ اضافه باعث
     می‌شد عرضِ واقعاً در دسترسِ گزینه‌ها توی پیش‌نمایش کمتر از عرضِ واقعیِ صفحه‌ی
     آزمون باشه و equalizeTypingOptions به‌جای ۴ ستون، ۲ ستون تشخیص بده - با
     اینکه فونت/محتوا دقیقاً یکی بود. حالا پدینگِ افقی حذف شده (فقط عمودی مونده)
     تا عرضِ stage دقیقاً معادلِ عرضِ واقعیِ صفحه‌ی اجرای آزمون باشه و همون منطقِ
     چیدمانِ گزینه‌ها (۴/۲/۱ ستون) نتیجه‌ی یکسانی بده.
  */
  background:var(--exam-bg-soft); border:1px dashed var(--exam-border); border-radius:20px;
  padding:16px 0; display:flex; flex-direction:column; min-width:0; width:100%;
}
.exam-pregate-preview-label{
  display:flex; align-items:center; gap:6px; font-size:12.5px; font-weight:800;
  color:var(--exam-primary); margin-bottom:10px; padding:0 16px;
}
.exam-pregate-preview-label i{ animation:examPreviewArrowBob 1.4s ease-in-out infinite; }
@keyframes examPreviewArrowBob{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-3px); }
}
/* ⭐⭐ به‌جای اون کادرِ کوچیکِ نصفه‌ی قبلی (max-height:420px که کارتِ سوال رو می‌بُرید)،
   حالا این ناحیه یه ارتفاعِ واقعی و ثابت داره تا خودِ exam-question-wrap (که داخلش
   می‌شینه و height:100% می‌خواد) دقیقاً به‌اندازه‌ی کارتِ واقعیِ اجرای آزمون دیده بشه؛
   اسکرولِ داخلیِ خودِ سوال (.exam-question-scroll) هنوزم برای سوال‌های خیلی بلند کار می‌کنه. */
.exam-pregate-preview-stage{
  flex:1; min-height:0; height:min(680px, 74vh); display:flex; overflow:hidden;
}
.exam-pregate-fullcard{
  width:100%; margin:0; box-shadow:none; border-style:solid;
}
@media (max-width:980px){
  .exam-pregate-preview-stage{ height:min(600px, 64vh); }
}
@media (max-width:480px){
  .exam-pregate-preview-stage{ height:min(520px, 58vh); }
}
.exam-pregate-icon{
  width:64px; height:64px; margin:0 auto 14px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:26px; color:#fff;
  background:linear-gradient(135deg, var(--exam-primary), #7c3aed);
  box-shadow:0 8px 20px rgba(79,70,229,.35);
}
.exam-pregate-title{ margin:0 0 6px; font-size:18px; font-weight:800; color:var(--exam-text); }
.exam-pregate-sub{ margin:0 0 18px; font-size:13px; color:var(--exam-text-soft); line-height:1.9; }
.exam-pregate-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:18px; }
.exam-pregate-stat{
  background:var(--exam-bg-soft); border:1px solid var(--exam-border); border-radius:14px; padding:10px 6px;
}
.exam-pregate-stat b{ display:block; font-size:16px; font-weight:900; color:var(--exam-primary); }
.exam-pregate-stat span{ display:block; font-size:11px; color:var(--exam-text-soft); margin-top:2px; }
.exam-pregate-settings{ text-align:right; margin-bottom:20px; }
.exam-pregate-settings-row{
  display:flex; align-items:center; justify-content:space-between; margin-bottom:8px;
}
.exam-pregate-settings-label{ font-size:13px; font-weight:700; color:var(--exam-text); display:flex; align-items:center; gap:6px; }
.exam-pregate-start{ width:100%; justify-content:center; gap:8px; font-size:15px; padding:13px; }
@media (max-width:480px){
  .exam-pregate-card{ padding:22px 18px; border-radius:20px; }
}

.exam-runner-body{
  /* ⭐ padding-left از ۱۶px به ۲۰px: چون overflow-y:auto اینجا باعث می‌شه مرورگر
     overflow-x رو هم خودکار auto حساب کنه (یعنی این ناحیه هم می‌تونه ببره)،
     باید حداقل به‌اندازه‌ی بیرون‌زدگیِ نشانِ مارک (۱۸px) فاصله‌ی امن داشته باشه
     وگرنه لبه‌ی همین دکمه هم اینجا بریده می‌شد. */
  flex:1; overflow-y:auto; display:flex; justify-content:center; padding:24px 20px;
  background:
    radial-gradient(720px 420px at 12% -8%, rgba(79,70,229,.06), transparent 60%),
    radial-gradient(680px 420px at 108% 12%, rgba(124,58,237,.05), transparent 60%);
}
.exam-question-wrap{
  position:relative;
  width:100%; max-width:1220px;
  height:100%;
  display:flex; flex-direction:column;
  background:var(--exam-bg); border:1px solid var(--exam-border); border-radius:26px;
  box-shadow:0 18px 46px rgba(30,20,80,.09), 0 3px 12px rgba(30,20,80,.05);
  padding:22px 28px 22px;
  overflow:hidden;
}
/* ⭐ بخش بالایی (تصویر سوال) قابل‌اسکرول؛ اگه عکس خیلی بزرگ بود خودش تو همین
   ناحیه اسکرول می‌خوره، بدون اینکه گزینه‌ها/دکمه‌های پایین رو جابه‌جا کنه */
.exam-question-scroll{
  /* ⭐ به‌درخواستِ کاربر: صفحه‌ی زنده‌ی آزمون به‌طورِ عادی نباید اسکرول بخوره - فونتِ
     سوال/گزینه‌ها خودش کوچیک می‌شه تا دقیقاً جا بشه (رجوع کنید به fitExamTypingCard/
     lockExamFontFloor توی Exam_generator.js). ⭐⭐ رفعِ باگ: قبلاً اینجا overflow:hidden
     بود، یعنی اگه (به هر دلیلِ نادری - مثلاً فونت به حداقلِ مجازش رسیده و بازم جا
     نمی‌شد) auto-fit نمی‌تونست کاملاً جا کنه، محتوایی که بیرون می‌زد (معمولاً گزینه‌ها،
     چون بعدِ سوال می‌آن) بی‌سروصدا و بدونِ هیچ راهی برای دیدن، نامرئی/بریده می‌شد -
     دقیقاً همون «گزینه‌ها غیب می‌شن»ی که گزارش شد. با overflow-y:auto، در حالتِ عادی
     (که auto-fit درست جا می‌کنه) هیچ اسکرول‌باری دیده نمی‌شه، ولی توی همون حالتِ خیلی
     نادر هم گزینه‌ها با یه اسکرولِ کوتاه قابلِ‌دیدن می‌مونن، نه اینکه کاملاً قایم بشن. */
  flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden;
  padding-inline-end:4px;
  -webkit-overflow-scrolling:touch;
}
/* ⭐⭐ ناحیه‌ی پایینی: گزینه‌ها + دکمه‌های ناوبری + نوار پیشرفت، همیشه قفل‌شده
   ته کارت، مستقل از ارتفاع عکسِ هر سوال */
.exam-nav-footer{
  flex:0 0 auto;
  padding-top:14px;
  margin-top:6px;
  border-top:1px dashed var(--exam-border);
}
.exam-nav-footer .exam-progress-footer{
  border-top:none; margin-top:14px; padding-top:0;
}
.exam-question-wrap::before{
  content:''; position:absolute; inset:0 0 auto 0; height:5px;
  background:linear-gradient(90deg, var(--exam-primary), #7c3aed, #ffb703);
  background-size:200% 100%; animation:examTopBarShine 6s ease-in-out infinite;
}
@keyframes examTopBarShine{
  0%,100%{ background-position:0% 50%; }
  50%{ background-position:100% 50%; }
}
.exam-runner[data-theme="dark"] .exam-question-wrap{ box-shadow:0 18px 46px rgba(0,0,0,.35), 0 3px 12px rgba(0,0,0,.22); }
@keyframes examCardPop{
  0%{ opacity:0; transform:scale(.965) translateY(8px); }
  60%{ opacity:1; }
  100%{ opacity:1; transform:scale(1) translateY(0); }
}
.exam-card-pop{ animation:examCardPop .4s cubic-bezier(.22,.85,.32,1.15); }
.exam-stage-top{ display:flex; align-items:center; justify-content:flex-end; margin-bottom:10px; }
.exam-stage-toolbar{
  display:flex; align-items:center; gap:8px;
  background:var(--exam-bg-soft); border:1px solid var(--exam-border);
  border-radius:14px; padding:5px; transition:.15s;
}
.exam-stage-toolbar::after{
  content:''; width:1px; height:18px; background:var(--exam-border); order:1;
}
.exam-stage-toolbar-single::after{ display:none; }
.exam-report-answer-row{ display:flex; align-items:flex-start; gap:10px; }
.exam-report-answer-row .exam-report-img-wrap{ flex:1; min-width:0; }
.exam-report-img-wrap{ background:var(--exam-bg); border-radius:10px; overflow:hidden; }
.exam-report-answer-row .exam-stage-toolbar{ flex:none; margin-top:0; }
.exam-stage-toolbar{ position:relative; }
.exam-stage-toolbar .exam-mark-btn{ order:2; }
.exam-question-img{
  max-width:100%; width:auto; height:auto; max-height:800px; display:block; margin:0 auto;
  border-radius:14px; border:1px solid var(--exam-border); background:#fff;
}
.exam-question-stage{
  max-height:min(72vh, 760px);
  min-height:0;
  display:flex;
  align-items:center;
  justify-content:center;
}
.exam-question-stage .exam-question-img{
  max-height:min(72vh, 760px);
  max-width:100%;
  width:auto;
  height:auto;
  object-fit:contain;
  transition:transform .18s ease;
}
.exam-question-stage:hover .exam-question-img{ transform:scale(1.012); }
@media (max-width:520px){
  .exam-question-stage,
  .exam-question-stage .exam-question-img{ max-height:min(56vh, 500px); }
}
.exam-img-stage{ position:relative; min-height:160px; }
.exam-img-stage .exam-img-fade{
  opacity:0; transform:scale(.985); transition:opacity .35s ease, transform .35s ease;
}
.exam-img-stage.loaded .exam-img-fade{ opacity:1; transform:scale(1); }
.exam-img-loader{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px; padding:30px 10px; opacity:1; transition:opacity .25s ease, visibility .25s ease;
}
.exam-img-stage.loaded .exam-img-loader{ opacity:0; visibility:hidden; pointer-events:none; }
.exam-img-loader-spinner{ position:relative; width:64px; height:64px; }
.exam-img-loader-spinner svg{ width:100%; height:100%; transform:rotate(-90deg); }
.exam-img-loader-track{ stroke:var(--exam-border); }
.exam-img-loader-arc{
  stroke:var(--exam-primary); stroke-linecap:round;
  stroke-dasharray:126; stroke-dashoffset:94;
  animation:exam-img-spin 1s linear infinite, exam-img-arc 1.5s ease-in-out infinite;
  filter:drop-shadow(0 0 4px rgba(79,70,229,.35));
}
.exam-img-loader-spinner::after{
  content:'⚛'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:22px; color:var(--exam-primary); animation:exam-img-pulse 1.5s ease-in-out infinite;
}
.exam-img-loader-text{
  font-family:'Vazirmatn',Tahoma,Arial,sans-serif; font-size:13px; font-weight:700;
  color:var(--exam-text-soft); animation:exam-img-pulse 1.5s ease-in-out infinite;
}
.exam-img-loader-dots span{ display:inline-block; animation:exam-img-dot 1.4s infinite; }
.exam-img-loader-dots span:nth-child(2){ animation-delay:.2s; }
.exam-img-loader-dots span:nth-child(3){ animation-delay:.4s; }
@keyframes exam-img-spin{ to{ transform:rotate(360deg); } }
@keyframes exam-img-arc{
  0%{ stroke-dashoffset:110; }
  50%{ stroke-dashoffset:30; }
  100%{ stroke-dashoffset:110; }
}
@keyframes exam-img-pulse{
  0%,100%{ opacity:.55; }
  50%{ opacity:1; }
}
@keyframes exam-img-dot{
  0%,80%,100%{ opacity:.2; transform:translateY(0); }
  40%{ opacity:1; transform:translateY(-2px); }
}
.exam-options{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:18px; }
.exam-option-btn{
  position:relative; padding:14px 6px; border:2px solid var(--exam-border); background:var(--exam-bg); border-radius:14px;
  font-size:15px; font-weight:700; cursor:pointer; color:var(--exam-text); overflow:hidden;
  transition:transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .18s ease, border-color .18s ease, background .18s ease, color .18s ease;
}
.exam-option-btn span{ position:relative; z-index:1; }
.exam-option-btn::before{
  content:''; position:absolute; inset:0; opacity:0; border-radius:inherit;
  background:linear-gradient(135deg, rgba(79,70,229,.10), rgba(124,58,237,.10));
  transition:opacity .18s ease;
}
.exam-option-btn:hover{
  transform:translateY(-4px); border-color:var(--exam-primary);
  box-shadow:0 10px 20px rgba(79,70,229,.18);
}
.exam-option-btn:hover::before{ opacity:1; }
.exam-option-btn:active{ transform:translateY(-1px) scale(.98); }
.exam-option-btn.selected{
  border-color:var(--exam-primary); background:#eef0ff; color:var(--exam-primary-dark);
  box-shadow:0 8px 18px rgba(79,70,229,.22);
}
.exam-runner[data-theme="dark"] .exam-option-btn:hover{ box-shadow:0 10px 20px rgba(124,58,237,.3); }
.exam-runner[data-theme="dark"] .exam-option-btn.selected{ background:#3730a3; color:#ffffff; border-color:#818cf8; box-shadow:0 8px 18px rgba(79,70,229,.45); }
.exam-runner[data-theme="dark"] .exam-option-btn.selected span{ color:#ffffff; -webkit-text-fill-color:#ffffff; }
.exam-essay-actions{ margin-top:18px; text-align:center; }
.exam-essay-actions .exam-answer-img{ max-width:100%; border-radius:12px; border:1px solid var(--exam-border); }
.exam-essay-actions .exam-img-stage{ margin-top:14px; }
.exam-self-check{ display:none; gap:10px; justify-content:center; margin-top:14px; }
.exam-self-check .exam-btn{ min-width:110px; }
/* ⭐ باکسِ ناوبریِ زیرِ گزینه‌ها جذاب‌تر شد: یه پنلِ کارت‌مانند با گرادیانِ ملایم،
   بوردر و سایه، به‌جای ردیفِ لختِ دکمه‌ها روی زمینه‌ی خالی. */
.exam-action-row{
  display:flex; align-items:center; justify-content:center; gap:10px;
  margin-top:18px; flex-wrap:wrap;
  padding:14px; border-radius:18px;
  background:linear-gradient(165deg, var(--exam-bg-soft) 0%, var(--exam-bg) 100%);
  border:1px solid var(--exam-border);
  box-shadow:0 8px 22px rgba(79,70,229,.08), inset 0 1px 0 rgba(255,255,255,.4);
}
.exam-runner[data-theme="dark"] .exam-action-row{
  box-shadow:0 8px 22px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.03);
}
.exam-action-row .exam-btn{
  min-width:110px; border-radius:12px;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.exam-action-row .exam-btn:hover:not(:disabled){ transform:translateY(-2px); }
.exam-action-row .exam-btn-primary{
  background:linear-gradient(135deg, var(--exam-primary), #7c3aed);
  box-shadow:0 6px 16px rgba(79,70,229,.35);
}
.exam-action-row .exam-btn-primary:hover:not(:disabled){
  box-shadow:0 10px 22px rgba(79,70,229,.42);
}
.exam-action-row .exam-btn-ghost{
  background:var(--exam-bg); border:1px solid var(--exam-border);
}
.exam-action-row .exam-btn-ghost:hover:not(:disabled){
  border-color:var(--exam-primary); color:var(--exam-primary);
  box-shadow:0 6px 14px rgba(79,70,229,.12);
}
@media (max-width:520px){
  .exam-action-row{ padding:10px; border-radius:14px; }
}
.exam-progress-footer{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  margin-top:20px; padding-top:16px; border-top:1px dashed var(--exam-border);
}
.exam-progress-footer .exam-progress{ font-weight:800; font-size:calc(13px * var(--exam-ui-scale, 1)); }
.exam-progress-dots{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px; max-width:100%; }
.exam-progress-dot{
  width:calc(9px * var(--exam-ui-scale, 1)); height:calc(9px * var(--exam-ui-scale, 1)); border-radius:50%; background:var(--exam-border); cursor:pointer;
  transition:transform .15s ease, background .15s ease;
}
.exam-progress-dot:hover{ transform:scale(1.35); }
.exam-progress-dot.answered{ background:var(--exam-success); }
.exam-progress-dot.current{
  background:var(--exam-primary); width:calc(22px * var(--exam-ui-scale, 1)); border-radius:5px;
}
.exam-report{ max-width:1180px; width:100%; margin:0 auto; padding:24px 16px 60px; direction:rtl; }
.exam-report-hero{
  position:relative; overflow:hidden;
  background:linear-gradient(135deg, var(--exam-primary), #7c3aed);
  border-radius:20px; padding:24px 24px; color:#fff; margin-bottom:18px;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px;
  box-shadow:0 12px 30px rgba(76,42,150,.28);
}
.exam-report-hero-decor{
  position:absolute; inset:0; overflow:hidden; pointer-events:none;
}
.exam-report-hero-decor::before,
.exam-report-hero-decor::after{
  content:""; position:absolute; border-radius:50%; background:rgba(255,255,255,.08);
}
.exam-report-hero-decor::before{ width:180px; height:180px; top:-70px; inset-inline-end:-50px; }
.exam-report-hero-decor::after{ width:120px; height:120px; bottom:-60px; inset-inline-start:-30px; background:rgba(255,255,255,.06); }
.exam-report-hero-decor i{
  position:absolute; font-size:120px; opacity:.08; top:50%; inset-inline-start:8%;
  transform:translateY(-50%) rotate(-18deg);
}
.exam-report-hero-meta{ position:relative; z-index:1; display:flex; flex-direction:column; gap:10px; }
.hero-meta-row{ display:flex; align-items:center; gap:9px; font-size:13px; opacity:.95; }
.hero-meta-row i{
  width:26px; height:26px; border-radius:50%; background:rgba(255,255,255,.16);
  display:flex; align-items:center; justify-content:center; font-size:11px; flex-shrink:0;
}
.exam-report-hero-score{ position:relative; z-index:1; text-align:center; }
.badge-ring{
  width:126px; height:126px; border-radius:50%; padding:6px;
  display:flex; align-items:center; justify-content:center;
  background:conic-gradient(#fff calc(var(--p) * 1%), rgba(255,255,255,.2) 0);
  box-shadow:0 8px 22px rgba(0,0,0,.2);
}
.badge-ring.negative{ background:conic-gradient(#fecaca calc(var(--p) * 1%), rgba(239,68,68,.4) 0); }
.badge-ring.pass{ background:conic-gradient(#bbf7d0 calc(var(--p) * 1%), rgba(34,197,94,.4) 0); }
.exam-report-hero-score-badge{
  width:100%; height:100%; border-radius:50%;
  background:rgba(45,20,90,.55);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.exam-report-hero-score .num{
  direction:ltr; unicode-bidi:isolate; display:inline-flex; align-items:baseline; gap:1px;
  font-size:26px; font-weight:900; line-height:1; letter-spacing:.3px;
  text-shadow:0 2px 10px rgba(0,0,0,.25);
}
.exam-report-hero-score .num .pct{ font-size:.6em; font-weight:700; opacity:.85; }
.exam-report-hero-score .lbl{ font-size:11.5px; opacity:.9; margin-top:10px; letter-spacing:.2px; }
@media (max-width:520px){
  .exam-report-hero{ flex-direction:column; text-align:center; padding:22px 18px; }
  .exam-report-hero-meta{ align-items:center; width:100%; }
  .exam-report-hero-decor i{ inset-inline-start:50%; transform:translate(-50%,-50%) rotate(-18deg); font-size:150px; }
}
.exam-report-summary{
  display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:14px;
}
.exam-report-stat{
  background:var(--exam-bg); border:1px solid var(--exam-border); border-radius:16px;
  padding:16px 8px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:8px;
  transition:transform .2s, box-shadow .2s;
}
.exam-report-stat:hover{ transform:translateY(-3px); box-shadow:0 8px 18px rgba(0,0,0,.08); }
.exam-report-stat-icon{
  width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:16px; color:#fff; box-shadow:0 4px 10px rgba(0,0,0,.15);
}
.exam-report-stat.correct .exam-report-stat-icon{ background:linear-gradient(135deg,#22c55e,#15803d); }
.exam-report-stat.wrong .exam-report-stat-icon{ background:linear-gradient(135deg,#ef4444,#b91c1c); }
.exam-report-stat.unanswered .exam-report-stat-icon{ background:linear-gradient(135deg,#9ca3af,#6b7280); }
.exam-report-stat b{ font-size:22px; color:var(--exam-text); line-height:1; }
.exam-report-stat .exam-report-stat-lbl{ font-size:12.5px; color:var(--exam-text-soft); }
.exam-diffmatrix-box{
  background:var(--exam-bg); border:1px solid var(--exam-border); border-radius:16px; padding:18px;
  margin-bottom:22px;
}
.exam-diffmatrix-box h4{ margin:0 0 14px; font-size:14px; color:var(--exam-text); }
.exam-diffmatrix-filter-bar{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px;
  background:var(--exam-bg-soft); border:1px solid var(--exam-border); border-radius:12px;
  padding:10px 14px; margin-bottom:14px; font-size:12.5px; color:var(--exam-text);
}
.exam-diffmatrix-filter-actions{ display:flex; gap:8px; }
.exam-diffmatrix-btn{
  border:none; border-radius:8px; padding:6px 12px; font-size:12px; font-weight:700; cursor:pointer;
  background:linear-gradient(135deg, var(--exam-primary), #7c3aed); color:#fff; transition:.15s;
}
.exam-diffmatrix-btn:hover{ filter:brightness(1.08); }
.exam-diffmatrix-btn.ghost{ background:transparent; border:1px solid var(--exam-border); color:var(--exam-text-soft); }
.exam-diffmatrix-btn.ghost:hover{ border-color:var(--exam-primary); color:var(--exam-primary); }
.exam-diffmatrix-table{ width:100%; border-collapse:separate; border-spacing:6px; }
.exam-diffmatrix-table thead th{
  font-size:11.5px; font-weight:700; color:var(--exam-text-soft); padding:0 0 4px; text-align:center;
}
.exam-diffmatrix-table thead th.st-correct{ color:var(--exam-success); }
.exam-diffmatrix-table thead th.st-wrong{ color:var(--exam-danger); }
.exam-diffmatrix-table thead th.st-unanswered{ color:var(--exam-warn); }
.exam-diffmatrix-table tbody th{
  text-align:right; font-size:13px; font-weight:700; color:var(--exam-text); white-space:nowrap; padding-inline-end:4px;
}
.exam-diffmatrix-level-icon{
  width:28px; height:28px; border-radius:9px; display:inline-flex; align-items:center; justify-content:center;
  font-size:12px; color:#fff; vertical-align:middle; margin-inline-end:8px;
}
.exam-diffmatrix-table tr.diff-easy .exam-diffmatrix-level-icon{ background:linear-gradient(135deg,#4ade80,#16a34a); }
.exam-diffmatrix-table tr.diff-medium .exam-diffmatrix-level-icon{ background:linear-gradient(135deg,#fbbf24,#d97706); }
.exam-diffmatrix-table tr.diff-hard .exam-diffmatrix-level-icon{ background:linear-gradient(135deg,#f87171,#dc2626); }
.exam-diffmatrix-cell{
  width:100%; border:1px solid var(--exam-border); border-radius:10px; background:var(--exam-bg-soft);
  color:var(--exam-text); font-weight:800; font-size:14px; padding:8px 0; cursor:pointer; transition:.15s;
}
.exam-diffmatrix-cell:hover:not([disabled]){ transform:translateY(-2px); box-shadow:0 6px 14px rgba(0,0,0,.12); }
.exam-diffmatrix-cell[disabled]{ opacity:.35; cursor:default; }
.exam-diffmatrix-cell.st-correct:not([disabled]){ border-color:#bfe6c8; color:var(--exam-success); }
.exam-diffmatrix-cell.st-wrong:not([disabled]){ border-color:#f3bcbc; color:var(--exam-danger); }
.exam-diffmatrix-cell.st-unanswered:not([disabled]){ border-color:#fbdba0; color:var(--exam-warn); }
.exam-diffmatrix-cell.active{
  border-color:var(--exam-primary) !important;
  box-shadow:0 0 0 3px rgba(79,70,229,.25);
  transform:translateY(-2px);
}
@media (max-width:520px){
  .exam-diffmatrix-table{ border-spacing:4px; }
  .exam-diffmatrix-table tbody th{ font-size:12px; }
  .exam-diffmatrix-cell{ font-size:12.5px; padding:6px 0; }
}
.exam-report-item{
  background:var(--exam-bg); border:1px solid var(--exam-border); border-radius:14px; padding:14px; margin-bottom:14px;
}
.exam-report-item.correct{ border-color:#bfe6c8; }
.exam-report-item.wrong{ border-color:#f3bcbc; }
.exam-report-item.unanswered{ border-color:#fbdba0; }
@keyframes examReportFlash{
  0%{
    box-shadow:0 0 0 0 rgba(79,70,229,.55);
    border-color:#4f46e5;
    background:rgba(79,70,229,.08);
  }
  45%{
    box-shadow:0 0 0 16px rgba(79,70,229,0);
    border-color:#4f46e5;
    background:rgba(79,70,229,.08);
  }
  70%{
    box-shadow:0 0 0 0 rgba(79,70,229,.3);
    border-color:#4f46e5;
  }
  100%{
    box-shadow:0 0 0 14px rgba(79,70,229,0);
    border-color:var(--exam-border);
    background:transparent;
  }
}
.exam-report-flash{ animation:examReportFlash 1.6s ease-out; }
.exam-report-item-head{ display:flex; gap:12px; align-items:flex-start; }
.exam-report-badge{
  min-width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:800; color:#fff; flex-shrink:0;
}
.exam-report-item.correct .exam-report-badge{ background:var(--exam-success); }
.exam-report-item.wrong .exam-report-badge{ background:var(--exam-danger); }
.exam-report-item.unanswered .exam-report-badge{ background:linear-gradient(135deg,#fbbf24,var(--exam-warn)); }
.exam-report-meta{ font-size:11px; color:var(--exam-text-soft); margin-bottom:4px; display:flex; flex-wrap:wrap; gap:6px; }
.exam-report-qnum-row{ display:flex; align-items:center; gap:8px; margin-bottom:6px; flex-wrap:wrap; }
.exam-report-qnum{ font-size:13.5px; font-weight:700; color:var(--exam-text); }
.exam-report-diff-chip{
  display:inline-flex; align-items:center; gap:5px;
  font-size:11px; font-weight:700; color:#fff; padding:3px 10px 3px 8px;
  border-radius:999px; box-shadow:0 2px 6px rgba(0,0,0,.12);
}
.exam-report-diff-chip.diff-easy{ background:linear-gradient(135deg,#4ade80,#16a34a); }
.exam-report-diff-chip.diff-medium{ background:linear-gradient(135deg,#fbbf24,#d97706); }
.exam-report-diff-chip.diff-hard{ background:linear-gradient(135deg,#f87171,#dc2626); }
.exam-qmap-box{
  background:var(--exam-bg); border:1px solid var(--exam-border); border-radius:16px;
  padding:16px 18px 18px; margin-bottom:22px;
}
.exam-qmap-box h4{ margin:0 0 10px; font-size:14px; color:var(--exam-text); }
.exam-qmap-legend{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:6px 16px; margin-bottom:16px;
  font-size:12px; color:var(--exam-text-soft);
  background:var(--exam-bg-soft); border:1px solid var(--exam-border); border-radius:12px; padding:10px 16px;
}
.exam-qmap-legend span{ display:inline-flex; align-items:center; gap:6px; font-weight:600; }
.exam-qmap-legend .sep{ width:1px; height:16px; background:var(--exam-border); }
.exam-qmap-dot{ width:11px; height:11px; border-radius:50%; display:inline-block; flex-shrink:0; box-shadow:0 1px 3px rgba(0,0,0,.25); }
.exam-qmap-dot.diff-easy{ background:linear-gradient(135deg,#4ade80,#16a34a); }
.exam-qmap-dot.diff-medium{ background:linear-gradient(135deg,#fbbf24,#d97706); }
.exam-qmap-dot.diff-hard{ background:linear-gradient(135deg,#f87171,#dc2626); }
.exam-qmap-badge-legend{
  width:17px; height:17px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  font-size:9.5px; color:#fff; flex-shrink:0; box-shadow:0 1px 3px rgba(0,0,0,.3);
}
.exam-qmap-badge-legend.st-correct{ background:var(--exam-success); }
.exam-qmap-badge-legend.st-wrong{ background:var(--exam-danger); }
.exam-qmap-badge-legend.st-unanswered{ background:var(--exam-warn); }
.exam-qmap-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(42px,42px)); justify-content:center; gap:10px 8px;
}
.exam-qmap-cell{
  position:relative; height:42px; border:none; border-radius:11px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:800; color:#fff; font-family:inherit;
  transition:transform .15s cubic-bezier(.2,.8,.2,1), box-shadow .15s ease;
}
.exam-qmap-cell:hover{ transform:translateY(-3px) scale(1.04); box-shadow:0 8px 16px rgba(0,0,0,.2); }
.exam-qmap-cell:active{ transform:translateY(-1px) scale(.98); }
.exam-qmap-cell.diff-easy{ background:linear-gradient(135deg,#4ade80,#16a34a); }
.exam-qmap-cell.diff-medium{ background:linear-gradient(135deg,#fbbf24,#d97706); }
.exam-qmap-cell.diff-hard{ background:linear-gradient(135deg,#f87171,#dc2626); }
.exam-qmap-badge{
  position:absolute; top:-6px; inset-inline-end:-6px; width:18px; height:18px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:9px; color:#fff;
  border:2px solid var(--exam-bg); box-shadow:0 2px 6px rgba(0,0,0,.3);
}
.exam-qmap-cell.st-correct .exam-qmap-badge{ background:var(--exam-success); }
.exam-qmap-cell.st-wrong .exam-qmap-badge{ background:var(--exam-danger); }
.exam-qmap-cell.st-unanswered .exam-qmap-badge{ background:var(--exam-warn); }
.exam-runner[data-theme="dark"] .exam-qmap-badge{ border-color:var(--exam-bg); }
@media (max-width:520px){
  .exam-qmap-grid{ grid-template-columns:repeat(auto-fit,minmax(36px,36px)); justify-content:center; gap:8px 6px; }
  .exam-qmap-cell{ height:36px; font-size:12px; }
}
.exam-report-meta span{ background:var(--exam-bg-soft); border-radius:999px; padding:3px 8px; display:inline-flex; align-items:center; gap:3px; }
.exam-report-meta .meta-ico{ font-size:10px; line-height:1; opacity:.85; }
.exam-report-answer-line{ font-size:13px; color:var(--exam-text); margin-top:8px; display:flex; flex-wrap:wrap; gap:6px; }
.exam-answer-pill{
  display:inline-flex; align-items:center; gap:5px;
  background:transparent; font-weight:700; font-size:11px;
  padding:4px 10px; border-radius:999px; border:1.5px solid;
}
.exam-answer-pill i{ font-size:9px; }
.exam-answer-pill.correct{ border-color:var(--exam-success); color:var(--exam-success); }
.exam-answer-pill.wrong{ border-color:var(--exam-danger); color:var(--exam-danger); }
.exam-report-item img{ width:auto; max-width:100%; height:auto; display:block; margin:8px 0 0; margin-inline-start:0; margin-inline-end:auto; border-radius:10px; }
.exam-show-answer-btn{
  margin-top:10px; background:var(--exam-bg-soft); border:1px solid var(--exam-border);
  color:var(--exam-text); border-radius:9px; padding:8px 14px; font-size:12.5px; cursor:pointer; font-weight:600;
}
.exam-report-answer-collapse{
  display:none; margin-top:22px; padding:16px 16px 16px;
  background:linear-gradient(180deg, rgba(79,70,229,.08), rgba(79,70,229,.02) 60%);
  border:1.5px solid rgba(79,70,229,.22);
  border-radius:14px; position:relative;
}
.exam-report-answer-collapse.open{ display:block; }
.exam-report-answer-collapse::before{
  content:'پاسخ و توضیح';
  position:absolute; top:-12px; inset-inline-start:14px;
  background:var(--exam-bg); color:var(--exam-primary);
  font-size:11.5px; font-weight:800;
  padding:3px 12px; border-radius:999px;
  border:1.5px solid rgba(79,70,229,.3);
}
/* ⭐ نسخه‌ی خیلی جذاب‌ترِ دکمه‌ی «سوال مشابه بساز»: گرادیانِ متحرک + درخشش/شاین
   که هر چند ثانیه از روش رد می‌شه + پالسِ نور اطرافش + آیکون‌های زنده، تا کاربر
   حتماً چشمش بهش بیفته و روی سوال‌هایی که غلط زده، ترغیب شه دوباره تمرین کنه. */
.exam-similar-btn{
  position:relative; overflow:hidden; isolation:isolate;
  display:flex; align-items:center; justify-content:center; gap:9px;
  width:100%; margin-top:14px; padding:14px 18px;
  border:none; border-radius:16px; cursor:pointer;
  font-size:14.5px; font-weight:900; color:#fff; letter-spacing:.2px;
  background:linear-gradient(115deg, #4f46e5, #7c3aed, #ec4899, #f59e0b, #4f46e5);
  background-size:300% 300%;
  animation:examSimilarGradientMove 4.5s ease infinite, examSimilarPulse 2.1s ease-in-out infinite;
  transition:transform .2s cubic-bezier(.34,1.56,.64,1);
}
.exam-similar-btn:hover{ transform:translateY(-3px) scale(1.03); }
.exam-similar-btn:active{ transform:translateY(0) scale(.97); }

@keyframes examSimilarGradientMove{
  0%{ background-position:0% 50%; }
  50%{ background-position:100% 50%; }
  100%{ background-position:0% 50%; }
}
@keyframes examSimilarPulse{
  0%,100%{ box-shadow:0 8px 20px rgba(124,58,237,.45); }
  50%{ box-shadow:0 10px 30px rgba(236,72,153,.55), 0 0 26px rgba(245,158,11,.35); }
}

/* نوارِ نورِ درخشان که مدام از چپ به راستِ دکمه سر می‌خوره */
.exam-similar-btn-shine{
  position:absolute; top:0; bottom:0; left:-25%; width:55px; z-index:1;
  background:linear-gradient(120deg, transparent, rgba(255,255,255,.65), transparent);
  transform:skewX(-20deg);
  animation:examSimilarShine 2.6s ease-in-out infinite;
  pointer-events:none;
}
@keyframes examSimilarShine{
  0%{ left:-25%; }
  55%{ left:120%; }
  100%{ left:120%; }
}

.exam-similar-btn-text{ position:relative; z-index:2; }

.exam-similar-btn-icon{
  position:relative; z-index:2; font-size:14px;
  animation:examSimilarSpark 1.5s ease-in-out infinite;
}
@keyframes examSimilarSpark{
  0%,100%{ transform:scale(1) rotate(0deg); opacity:1; }
  50%{ transform:scale(1.3) rotate(15deg); opacity:.7; }
}

.exam-similar-btn-icon2{
  position:relative; z-index:2; font-size:13px;
  transition:transform .5s ease;
}
.exam-similar-btn:hover .exam-similar-btn-icon2{ transform:rotate(360deg); }

@media (prefers-reduced-motion: reduce){
  .exam-similar-btn, .exam-similar-btn-shine, .exam-similar-btn-icon{ animation:none; }
}

/* ================== پیشنهاد فیلم/جزوه‌ی هم‌مبحث (کارنامه‌ی آزمون) ================== */
.exam-suggest-box{
  margin-top:16px; padding-top:14px;
  border-top:1.5px dashed rgba(79,70,229,.28);
}
.exam-suggest-head{
  display:flex; align-items:center; flex-wrap:wrap; gap:8px;
  margin-bottom:10px;
}
.exam-suggest-head-icon{
  width:26px; height:26px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#f59e0b,#f97316); color:#fff; font-size:12px;
  box-shadow:0 3px 8px rgba(249,115,22,.35);
}
/* سوال‌های درست: به‌جای رنگ نارنجیِ «جبران»، رنگ سبزِ «تثبیت» */
.exam-suggest-box.correct{ border-top-color:rgba(34,197,94,.3); }
.exam-suggest-box.correct .exam-suggest-head-icon{
  background:linear-gradient(135deg,#22c55e,#16a34a);
  box-shadow:0 3px 8px rgba(22,163,74,.35);
}
.exam-suggest-head-text{ font-size:13px; font-weight:800; color:var(--exam-text); }
.exam-suggest-head-topic{
  display:inline-flex; align-items:center; gap:4px;
  font-size:10.5px; font-weight:700; color:var(--exam-primary);
  background:rgba(79,70,229,.1); border:1px solid rgba(79,70,229,.22);
  padding:3px 9px; border-radius:999px;
}
.exam-suggest-row{
  display:flex; gap:12px; overflow-x:auto; padding-bottom:4px;
  scroll-snap-type:x proximity;
}
.exam-suggest-row::-webkit-scrollbar{ height:6px; }
.exam-suggest-row::-webkit-scrollbar-thumb{ background:var(--exam-border); border-radius:99px; }
.exam-suggest-card{
  flex:0 0 148px; width:148px; scroll-snap-align:start;
  background:var(--exam-bg); border:1.5px solid var(--exam-border);
  border-radius:14px; overflow:hidden; cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.exam-suggest-card:hover{
  transform:translateY(-4px);
  box-shadow:0 10px 22px rgba(79,70,229,.18);
  border-color:var(--exam-primary);
}
.exam-suggest-card.locked{ cursor:pointer; opacity:.92; }
.exam-suggest-thumb{
  position:relative; width:100%; height:84px; overflow:hidden;
  background:var(--exam-bg-soft);
}
.exam-suggest-thumb img{
  width:100%; height:100%; object-fit:cover; display:block; margin:0;
  filter:none;
}
.exam-suggest-card.locked .exam-suggest-thumb img{ filter:grayscale(.55) brightness(.75); }
.exam-suggest-play{
  position:absolute; inset:0; margin:auto; width:34px; height:34px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(17,17,27,.55); color:#fff; border-radius:50%;
  font-size:13px; backdrop-filter:blur(1px);
  box-shadow:0 3px 10px rgba(0,0,0,.3);
}
.exam-suggest-kind{
  position:absolute; top:6px; inset-inline-start:6px;
  font-size:9px; font-weight:800; color:#fff; letter-spacing:.2px;
  padding:3px 7px; border-radius:999px; display:flex; align-items:center; gap:3px;
}
.exam-suggest-kind.video{ background:linear-gradient(135deg,#4f46e5,#7c3aed); }
.exam-suggest-kind.jozve{ background:linear-gradient(135deg,#0891b2,#0ea5e9); }
.exam-suggest-locklbl{
  position:absolute; bottom:6px; inset-inline:6px; text-align:center;
  font-size:8.5px; font-weight:800; color:#fff;
  background:rgba(0,0,0,.55); border-radius:999px; padding:2px 4px;
}
.exam-suggest-title{
  padding:8px 9px 10px; font-size:11.5px; font-weight:700; color:var(--exam-text);
  line-height:1.5; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; min-height:34px; text-align:center;
}
@media (max-width:520px){
  .exam-suggest-card{ flex:0 0 128px; width:128px; }
  .exam-suggest-thumb{ height:74px; }
}

.exam-mark-btn{
  background:var(--exam-bg-soft); border:1px solid var(--exam-border); color:var(--exam-text-soft);
  width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  cursor:pointer; font-size:15px; flex-shrink:0; transition:.15s;
}
.exam-mark-btn:hover{ border-color:var(--exam-primary); color:var(--exam-primary); }
.exam-mark-btn.marked{
  background:linear-gradient(135deg, var(--exam-primary), #7c3aed); color:#fff; border-color:transparent;
  transform:scale(1.05);
  box-shadow:0 0 0 4px rgba(124,58,237,.16);
}
/* ⭐ افکتِ جذابِ مارک‌کردن: هر بار کلیک می‌شه، دکمه یه پاپ/چرخشِ کوتاه و فنری اجرا می‌کنه */
@keyframes examMarkPop{
  0%{ transform:scale(1) rotate(0deg); }
  40%{ transform:scale(1.38) rotate(-14deg); }
  65%{ transform:scale(.92) rotate(8deg); }
  100%{ transform:scale(1.05) rotate(0deg); }
}
.exam-mark-btn.exam-mark-pop{ animation:examMarkPop .5s cubic-bezier(.34,1.56,.64,1); }
/* گوشه‌ی کارتِ سوالِ تایپی: دکمه‌ی مارک به‌صورت شناور روی گوشه‌ی بالا-چپِ متن می‌شینه.
   ⭐ باگِ قبلی: از inset-inline-start استفاده شده بود که چون صفحه راست‌به‌چپ (فارسی)‌ه،
   inline-start یعنی «راست»، نه «چپ» - همین باعث می‌شد دکمه بره سمتِ راست و دقیقاً روی
   خطِ اولِ متنِ سوال بیفته. اینجا عمداً از left/margin فیزیکی استفاده می‌کنیم تا همیشه
   سمتِ چپِ واقعیِ صفحه بمونه، صرف‌نظر از جهتِ سند.
   ⭐⭐ به درخواستِ کاربر: دکمه بزرگ‌تر شد و کاملاً از خودِ کارت بیرون زد (نصفش رو
   گوشه‌ی بالا-چپِ کارت شناوره) تا اصلاً روی متنِ سوال نیفته؛ margin-top/left روی
   خودِ کارت هم فضای کافی برای این‌که دکمه توی ناحیه‌ی اسکرول‌شونده کلیپ نشه، نگه می‌داره. */
.exam-typing-question-paper{ position:relative; margin-top:8px; margin-left:8px; overflow:visible; isolation:isolate; z-index:2; }
/* ⭐⭐ رفعِ باگ: قبلاً نشانِ مارک داخلِ .exam-typing-question-paper بود که خودش
   داخلِ .exam-question-scroll (overflow-y:auto) و .exam-question-wrap
   (overflow:hidden) قرار داره؛ همین باعث می‌شد افستِ منفیِ top/left که قرار بود
   دکمه رو کاملاً بیرون از کارت بندازه، توسطِ همون کانتینرهای اسکرول/هیدن‌شونده
   بریده/قایم بشه (دکمه انگار «زیرِ» کارت گیر می‌کرد). حالا دکمه به‌جای اینکه
   فرزندِ خودِ متنِ سوال باشه، فرزندِ یه پوسته‌ی بیرونی (.exam-question-card-shell)
   می‌شه که هم‌اندازه‌ی کارته ولی overflow:visible داره - یعنی هیچ‌کدوم از
   ناحیه‌های اسکرول‌شونده/بریده‌شونده‌ی داخلی، جلوی بیرون‌زدنِ واقعیِ دکمه رو
   نمی‌گیرن. مختصات با نسبت به همون پوسته حساب می‌شه، چون کارت داخلش دقیقاً
   ۱۰۰٪ عرض/ارتفاع رو پر می‌کنه (بدون padding/border اضافه روی پوسته). */
.exam-question-card-shell{ position:relative; width:100%; max-width:1220px; height:100%; overflow:visible; }
.exam-question-card-shell .exam-typing-mark-badge{
  position:absolute; top:-18px; left:-18px; z-index:20;
  width:46px; height:46px; font-size:19px;
  border:3px solid var(--exam-bg, #fff);
  box-shadow:0 8px 18px rgba(79,70,229,.3), 0 2px 6px rgba(0,0,0,.08);
  transition:transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .2s ease, border-color .2s ease;
}
.exam-question-card-shell .exam-typing-mark-badge:hover{
  transform:scale(1.14) rotate(-10deg);
  box-shadow:0 12px 26px rgba(79,70,229,.4), 0 3px 8px rgba(0,0,0,.1);
}
.exam-question-card-shell .exam-typing-mark-badge.marked{
  box-shadow:0 8px 20px rgba(124,58,237,.45);
}
@media (max-width:520px){
  .exam-typing-question-paper{ margin-top:6px; margin-left:6px; }
  .exam-question-card-shell .exam-typing-mark-badge{ top:-14px; left:-14px; width:38px; height:38px; font-size:16px; }
}
/* ⭐ فضای بالا/چپِ ناحیه‌ی اسکرول‌شونده‌ی سوال، تا دکمه‌ی شناورِ بزرگ‌ترِ بالا هیچ‌وقت
   با overflow:hidden/auto این ناحیه یا با گوشه‌ی گردِ کارتِ سوال بریده/قایم نشه.
   ⭐⭐ چون پشتیبانیِ :has() توی همه‌ی مرورگرها تضمینی نیست، همینِ فاصله‌ی امن حالا
   مستقیماً با JS هم (روی خودِ scrollArea، موقعِ رندرِ هر سوالِ تایپی) ست می‌شه؛ این
   قانونِ CSS به‌عنوانِ لایه‌ی دومِ اطمینان (fallback) نگه داشته شده. */
.exam-question-scroll:has(.exam-typing-question-paper){ padding-top:12px; padding-left:12px; }
/* ⭐ نوارِ درخشانِ بالای کارتِ سوال (تزئینی) هیچ‌وقت نباید روی نشانِ مارک/شماره بشینه. */
.exam-question-wrap::before{ z-index:0; }
.exam-question-wrap{ isolation:isolate; }
.exam-stage-toolbar{ z-index:5; }
/* ⭐ اگه ادیتور توی متنِ سوال/گزینه عکس گذاشته باشه، همیشه به عرضِ کادرش محدود بمونه
   (خطِ دفاعیِ CSS، مکملِ forceNoOverflowDeep توی جی‌اس که همینو موقعِ رندر هم اجرا می‌کنه) */
.exam-typing-question-paper .qb-typing-render img,
.exam-typing-options .qb-typing-render img{ max-width:100% !important; height:auto !important; }
.exam-report-item-head{ position:relative; }
.exam-runner[data-theme="dark"] .exam-report-item-head{ background:var(--exam-bg); border-radius:14px; }
.exam-report-mark-wrap{ margin-inline-start:auto; }
@media (max-width:520px){
  .exam-options{ grid-template-columns:repeat(2,1fr); }
  .exam-report-summary{ grid-template-columns:repeat(3,1fr); }
  /* کارت هر سوال در کارنامه: به‌جای سه‌ستونی فشرده (نشان/عکس/ابزار)،
     روی گوشی عمودی می‌چینیم تا عکس سوال و پاسخ فضای واقعی بگیرن،
     نه اینکه بین دو ستونِ ثابت‌عرض له بشن. */
  .exam-report-item{ padding:12px; }
  .exam-report-item-head{
    flex-direction:column;
    align-items:stretch;
    gap:8px;
  }
  .exam-report-item-head > .exam-report-badge{
    align-self:flex-start;
  }
  .exam-report-mark-wrap{
    align-self:flex-end;
    margin-inline-start:0;
  }
  .exam-report-answer-row{
    flex-direction:column;
    align-items:stretch;
  }
  .exam-report-answer-row .exam-stage-toolbar{
    align-self:flex-end;
  }
  .exam-stage-toolbar{ padding:4px; gap:6px; }
  .exam-mark-btn{ width:30px; height:30px; font-size:12.5px; }
  .exam-report-qnum{ font-size:13px; }
  .exam-report-diff-chip{ font-size:10.5px; padding:2px 9px 2px 7px; }
  .exam-action-row .exam-btn{ min-width:90px; }
  .exam-question-wrap{ border-radius:18px; padding:14px 12px 18px; }
  .exam-timer{ min-width:88px; padding:6px 10px 8px; }
  .exam-timer-text{ font-size:15px; }
  .exam-exit-btn span{ display:none; }
  .exam-deadline-alert{ font-size:11.5px; padding:8px 10px; }
  .exam-deadline-alert b{ font-size:12.5px; }
}
/* ⭐ فیلترِ حالت شب روی عکس‌های سوال/پاسخ: هم تو حالت عادی (داخل صفحه‌ی آزمون و کارنامه)
   و هم تو لایت‌باکسِ زوم باید دقیقاً یکسان اعمال بشه. قبلاً background:transparent فقط
   برای exam-question-img ست شده بود، برای همین توی حالت عادی پس‌زمینه‌ی سفیدِ خودِ عکس
   با mix-blend-mode:screen درست ترکیب نمی‌شد و فیلتر انگار غیرفعال به‌نظر می‌رسید؛
   الان هر سه نوع عکس (سوال/پاسخ/عکسِ کارنامه) دقیقاً همون رفتار رو دارن. */
.exam-runner[data-theme="dark"] .exam-question-img,
.exam-runner[data-theme="dark"] .exam-answer-img,
.exam-runner[data-theme="dark"] .exam-report-item img {
  filter: invert(1) hue-rotate(180deg);
  mix-blend-mode: screen;
  background: transparent;
  transition: filter .2s ease;
}

/* ---------- صفحه‌ی پیش‌نمایشِ زنده‌ی فایل PDF: تنظیمات (راست) + پیش‌نمایش واقعی (چپ) ----------
   فقط توی مرحله‌ی آخرِ «دریافت فایل» به مودال اضافه می‌شه (renderStep روی .exam-modal
   کلاس exam-modal-preview رو toggle می‌کنه)؛ عریض‌تر و بلندتر از مودالِ معمولیِ ویزارده
   تا جا برای دو ستون باشه، و با دکمه‌ی تمام‌صفحه می‌تونه کل صفحه رو بگیره. */
.exam-modal.exam-modal-preview{
  max-width: 1180px;
  width: 100%;
  height: 88vh;
  max-height: 880px;
}
.exam-modal.exam-modal-preview.exam-modal-fullscreen{
  position: fixed;
  inset: 0;
  max-width: none;
  width: 100vw;
  height: 100vh;
  max-height: none;
  border-radius: 0;
  z-index: 1;
}
.exam-modal.exam-modal-preview .exam-modal-body{
  padding: 0;
  overflow: hidden;
}
.exam-filepreview-wrap{
  display: flex;
  flex-direction: row;
  height: 100%;
  min-height: 0;
}
.exam-filepreview-settings{
  flex: 0 0 300px;
  max-width: 300px;
  overflow-y: auto;
  padding: 18px 20px;
  border-left: 1px solid var(--exam-border);
  background: var(--exam-bg);
}
/* ⭐⭐ بازطراحیِ کاملِ این مرحله برای گوشی: قبلاً ستونِ تنظیمات همیشه ۴۲٪ از ارتفاع رو
   اشغال می‌کرد و برای خودِ پیش‌نمایش تقریباً چیزی نمی‌موند؛ حالا توی گوشی پیش‌نمایش کلِ
   فضا رو می‌گیره و تنظیمات به یه شیتِ کشویی از پایین تبدیل می‌شه که فقط با زدنِ دکمه‌ی
   «تنظیمات» باز می‌شه و روی پیش‌نمایش قرار می‌گیره (نه این‌که فضاش رو بگیره). */
@media (max-width: 760px){
  .exam-filepreview-wrap{ position: relative; }

  .exam-filepreview-backdrop{
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(15, 15, 32, .45);
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s ease;
    z-index: 40;
  }
  .exam-filepreview-backdrop.is-visible{ opacity: 1; pointer-events: auto; }

  .exam-filepreview-settings{
    position: fixed;
    left: 0; right: 0; bottom: 0;
    flex: none;
    max-width: none;
    width: 100%;
    max-height: 80vh;
    border-left: none;
    border-top: 1px solid var(--exam-border);
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -10px 32px rgba(20,20,40,.28);
    padding: 8px 18px calc(18px + env(safe-area-inset-bottom, 0px));
    transform: translateY(105%);
    transition: transform .28s cubic-bezier(.32,.72,0,1);
    z-index: 41;
    -webkit-overflow-scrolling: touch;
  }
  .exam-filepreview-settings.is-open{ transform: translateY(0); }
}
.exam-filepreview-backdrop{ display: none; } /* فقط توی گوشی به‌کار می‌ره، پایین‌تر باز می‌شه */
.exam-filepreview-canvas{
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0; /* ⭐ بدونِ این، این ستون به‌جای کلیپ/اسکرول‌شدن، به اندازه‌ی محتوا رشد
  می‌کرد و مودالِ بیرونی (که overflow:hidden داره) بی‌سروصدا محتوا رو می‌بریید؛
  همون علتِ اصلیِ «نه اسکرول می‌شه نه لمس جواب می‌ده» توی پیش‌نمایشِ گوشی. */
  background: var(--exam-bg-soft);
}
.exam-filepreview-toolbar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid var(--exam-border);
  background: var(--exam-bg);
  flex-shrink: 0;
}
.exam-filepreview-toolbar-title{
  font-size: 13px;
  font-weight: 700;
  color: var(--exam-text-soft);
}
.exam-filepreview-fullscreen-btn{
  border: 1.5px solid var(--exam-border);
  background: var(--exam-bg);
  color: var(--exam-text);
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}
.exam-filepreview-fullscreen-btn:hover{ background: var(--exam-bg-soft); border-color: var(--exam-primary); color: var(--exam-primary-dark); }

/* ⭐ فقط توی گوشی معنا دارن: دکمه‌ی بازکردنِ شیتِ تنظیمات (توی تولبار) و دسته‌گیره/دکمه‌ی
   بستنِ بالای خودِ شیت. توی دسکتاپ چون تنظیمات از اول کنارِ پیش‌نمایش دیده می‌شه، این‌ها
   لازم نیستن. */
.exam-filepreview-settings-btn{ display: none; }
.exam-fp-sheet-handle{ display: none; }
.exam-fp-sheet-close{ display: none; }
@media (max-width: 760px){
  .exam-filepreview-settings-btn{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1.5px solid var(--exam-primary);
    background: #eef0ff;
    color: var(--exam-primary-dark);
    border-radius: 10px;
    padding: 9px 14px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    min-height: 40px;
    white-space: nowrap;
  }
  .exam-filepreview-settings-btn:active{ background: #dde0fb; }

  .exam-fp-sheet-handle{
    display: block;
    width: 42px;
    height: 5px;
    border-radius: 3px;
    background: var(--exam-border);
    margin: 4px auto 12px;
  }
  .exam-fp-sheet-close{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    margin: 0 0 14px;
    padding: 12px;
    border-radius: 12px;
    border: none;
    background: var(--exam-primary);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    min-height: 46px;
  }
  .exam-fp-sheet-close:active{ background: var(--exam-primary-dark); }
}
.exam-filepreview-zoom-group{
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px;
  border: 1.5px solid var(--exam-border);
  border-radius: 9px;
  background: var(--exam-bg-soft);
}
.exam-filepreview-zoom-btn{
  border: none;
  background: transparent;
  color: var(--exam-text-soft);
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.exam-filepreview-zoom-btn:hover{ color: var(--exam-text); }
.exam-filepreview-zoom-btn.is-active{ background: var(--exam-bg); color: var(--exam-primary-dark); box-shadow: 0 1px 4px rgba(20,20,40,.12); }
@media (max-width: 760px){
  /* تولبار: توی گوشی جای خیلی کمی داره، پس عنوان حذف می‌شه (همون‌جوری هم توی
     هدرِ مودال تکرار شده)، دکمه‌ی تمام‌صفحه/نیمه‌صفحه (که مخصوصِ دسکتاپه، چون توی
     گوشی همیشه تمام‌صفحه‌ست) پنهون می‌شه، و بقیه‌ی دکمه‌ها درشت‌تر و راحت‌ لمس‌شدنی می‌شن. */
  .exam-filepreview-toolbar{
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 12px;
  }
  .exam-filepreview-toolbar-title{ display: none; }
  .exam-filepreview-fullscreen-btn{ display: none; }
  .exam-filepreview-zoom-group{
    order: 2;
    flex: 1 1 100%;
    width: 100%;
    padding: 4px;
  }
  .exam-filepreview-zoom-btn{
    flex: 1;
    padding: 10px 4px;
    font-size: 11.5px;
    min-height: 40px;
    white-space: nowrap;
  }
}
.exam-filepreview-canvas-scroll{
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  /* ⭐⭐ به‌درخواستِ کاربر: قبلاً pan-y بود که زوم دو‌انگشتی رو کامل غیرفعال می‌کرد.
     pinch-zoom رو هم به لیست اضافه می‌کنیم تا هم اسکرولِ عمودیِ لمسی کار کنه، هم
     کاربر بتونه با دو انگشت داخلِ همین ناحیه زوم کنه (بدونِ اینکه ژست‌های دیگه/دبل‌تپ
     رفتارِ عجیب بسازن). */
  touch-action: pan-y pinch-zoom;
  overscroll-behavior: contain;
  padding: 22px 24px 40px;
}
.exam-filepreview-canvas-inner{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.exam-filepreview-page{
  position: relative;
  margin: 0 auto 22px;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 6px 24px rgba(20,20,40,.14);
  background: #fff;
  flex-shrink: 0;
}
/* ⭐ عرض/ارتفاعِ دقیقِ هر صفحه دیگه با max-widthِ ثابتِ CSS محدود نمی‌شه؛ خودِ جاوااسکریپت
   (fitFilePreviewPage) با توجه به فضای واقعاً در دسترسِ ستونِ پیش‌نمایش (هم عرض، هم
   ارتفاع) بزرگ‌ترین سایزی که کاملِ صفحه بدونِ نیاز به اسکرولِ داخلی جا بشه رو حساب
   و مستقیماً روی width/height ست می‌کنه - همون چیزی که کاربر خواسته: «یه صفحه‌ی
   کامل، بدون اسکرولِ الکی». */
.exam-filepreview-status{
  margin: auto;
  text-align: center;
  color: var(--exam-text-soft);
  font-size: 13.5px;
  padding: 40px 20px;
}
.exam-filepreview-status-error{ color: var(--exam-danger); }
.exam-filepreview-status-error .exam-btn{ margin-top: 12px; }
.exam-filepreview-spinner{
  width: 34px; height: 34px; margin: 0 auto 14px;
  border-radius: 50%;
  border: 3px solid var(--exam-border);
  border-top-color: var(--exam-primary);
  animation: examFilePreviewSpin .8s linear infinite;
}
@keyframes examFilePreviewSpin{ to{ transform: rotate(360deg); } }

.exam-fp-label{ font-size: 12.5px; font-weight: 700; color: var(--exam-text-soft); margin: 16px 0 8px; }
.exam-fp-label:first-of-type{ margin-top: 6px; }
.exam-fp-row{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.exam-fp-row-label{ min-width: 70px; font-size: 13px; color: var(--exam-text); }
.exam-fp-row-unit{ font-size: 12px; color: var(--exam-text-soft); }
.exam-fp-select{
  width: 100%;
  border: 1.5px solid var(--exam-border);
  border-radius: 10px;
  padding: 9px 10px;
  font-size: 13px;
  color: var(--exam-text);
  background: var(--exam-bg);
  margin-bottom: 12px;
}
@media (max-width: 760px){
  .exam-filepreview-canvas-scroll{ padding: 14px 10px 24px; }

  .exam-filepreview-settings .exam-choice-card{
    padding: 13px 10px;
    font-size: 14.5px;
    min-height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .exam-filepreview-settings .exam-fp-select,
  .exam-filepreview-settings .exam-count-input{
    min-height: 46px;
    font-size: 15px;
  }
  .exam-filepreview-settings .exam-fp-row{ gap: 12px; }
  .exam-filepreview-settings .exam-fp-row-label{ font-size: 14px; }
  .exam-filepreview-settings label.exam-fp-row{ font-size: 13.5px; line-height: 1.6; }
}

/* ===== sidebar.css ===== */
:root {
    --sidebar-bg: #2a1548;
    --sidebar-hover-bg: #3d2263;
    --dark-modal-bg: #1a1a2e;
    --dark-modal-border: #303055;
}
.sidebar {
    position: fixed;
    top: 0;
    left: -250px;
    width: 250px;
    height: 100%;
    background-color: var(--sidebar-bg);
    z-index: 99999;
    transition: left 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.3);
}
.sidebar.active {
    left: 0;
}
#overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 999;
    display: none;
    backdrop-filter: blur(3px);
    transition: opacity 0.4s ease;
}
#myModalOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 10000;
    display: none;
    backdrop-filter: blur(3px);
    transition: opacity 0.4s ease;
}
.sidebar-header {
    padding: 30px 10px;
    text-align: center;
    border-bottom: 1px solid var(--sidebar-hover-bg);
    margin-bottom: 10px;
    position: relative;
}
/* ---------- دکمه‌ی ماه/خورشیدِ حالتِ شب - گوشه‌ی بالای سایدبار، کنارِ آواتار ---------- */
.dark-mode-toggle {
    position: absolute;
    top: 14px;
    left: 14px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 183, 3, 0.12);
    border: 1.5px solid #ffb703;
    color: #ffb703;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    cursor: pointer;
    z-index: 5;
    transition: background 0.25s ease, transform 0.3s ease, color 0.25s ease;
    -webkit-tap-highlight-color: transparent;
}
.dark-mode-toggle:hover {
    background: #ffb703;
    color: #241442;
    transform: rotate(20deg) scale(1.08);
}
.dark-mode-toggle:active {
    transform: scale(0.9);
}
/* ---------- خودِ حالتِ شب: فقط پس‌زمینه‌ی روشنِ اطرافِ محتوا (نه هدر/سایدبار
   که خودشون از قبل بنفشِ تیره‌ان) به رنگ‌های تیره‌ی مناسبِ دیدِ شب تغییر می‌کنه.
   چون بیشترِ بخش‌های سایت از همین متغیرهای CSS برای پس‌زمینه استفاده می‌کنن،
   با عوض‌کردنِ خودِ متغیرها زیرِ .dark-mode، همه‌جا یکجا آپدیت می‌شه. ---------- */
html.dark-mode,
body.dark-mode {
    --bg-body: #131022;
    --bg-light: #1b1730;
    --text-main: #eae6f5;
    --text-muted: #b3aad1;
    /* ⭐ همون گرادیانِ روشنِ html/body رو هم برای حالتِ شب بازنویسی می‌کنیم،
       وگرنه اون قانونِ هاردکد (توی total2/cf بخش) همچنان روی دست این تغییرات می‌شینه.
       ⭐⭐ فیکسِ باگِ «سفیدیِ پایینِ صفحه در حالتِ شب وقتی محتوا کمه»:
       چون CSS variable ها فقط از پدر به فرزند ارث می‌رن، نه برعکس، وقتی این
       متغیرها فقط رو body.dark-mode تعریف می‌شدن، خودِ <html> (که والدِ body
       و نه فرزندشه) هیچ‌وقت مقدارِ تیره رو نمی‌گرفت و همیشه با فالبکِ روشنِ
       «html, body { background: var(--bg-gradient, ...روشن...) }» رنگ می‌شد.
       تا وقتی محتوای صفحه بلند بود، <body>ی تیره کل صفحه رو می‌پوشوند و این
       دیده نمی‌شد؛ ولی تو صفحه‌های کم‌محتوا (مثل «هنوز محتوایی ثبت نشده»)
       که ارتفاعِ body کمتر از صفحه‌ست، همون پس‌زمینه‌ی روشنِ html از پایین
       بیرون می‌زد. حالا چون کلاسِ dark-mode رو <html> هم گذاشته می‌شه (تو
       index.html و app.js)، این سلکتور روی خودِ html هم مستقیم اجرا می‌شه. */
    --bg-gradient: radial-gradient(ellipse at 50% -10%, #1b1730 0%, #171429 45%, #131022 100%);
}
.sidebar-header span {
    display: block;
    margin-top: 10px;
    font-size: 16px;
    font-weight: bold;
    color: var(--accent);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    letter-spacing: 0.5px;
}
.user-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: block;
    margin: 0 auto 10px;
    border: 3px solid var(--accent);
}
.sidebar-links {
    list-style: none;
    padding: 0;
}
.sidebar-notif-highlight {
    animation: sidebarNotifPulse 1s ease-in-out 2;
    border-radius: 10px;
}
@keyframes sidebarNotifPulse {
    0%, 100% {
        background-color: transparent;
    }
    50% {
        background-color: rgba(255, 183, 3, 0.25);
    }
}
.sidebar-links li a {
    display: flex;
    align-items: center;
    padding: 18px 25px;
    color: #e0e0e0;
    text-decoration: none;
    transition: 0.3s;
    font-size: 15px;
}
.sidebar-links li a i {
    margin-left: 15px;
    width: 20px;
}
.sidebar-links li a:hover {
    background: var(--sidebar-hover-bg);
    color: var(--accent);
}
.header-right {
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
    justify-content: flex-start;
}
.hamburger-menu {
    margin-left: 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    transition: transform 0.3s;
}
.hamburger-menu:hover {
    transform: scale(1.1);
}
.hamburger-menu svg {
    stroke: var(--accent);
    transition: stroke 0.3s;
}
.main-container {
    transition: margin-left 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.level-progress-row {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 12px;
}
.level-progress-wrap {
    flex: 1;
    max-width: 155px;
    text-align: center;
    margin-top: 9px;
}
.level-progress-track {
    position: relative;
    height: 18px;
    background: linear-gradient(180deg, #0d0a1a, #1a1330);
    border: 2px solid #d4af37;
    border-radius: 20px;
    overflow: hidden;
    box-shadow:
        inset 0 3px 8px rgba(0, 0, 0, 0.75),
        inset 0 -2px 4px rgba(255, 255, 255, 0.05),
        0 0 10px rgba(255, 183, 3, 0.25);
    direction: ltr;
}
#level-progress.level-progress-fill {
    position: relative;
    width: 0%;
    height: 100%;
    border-radius: 20px;
    background: linear-gradient(90deg, #b45f00 0%, #ffb703 45%, #ffe9a8 100%);
    box-shadow:
        0 0 14px rgba(255, 183, 3, 0.75),
        inset 0 2px 3px rgba(255, 255, 255, 0.55),
        inset 0 -3px 5px rgba(120, 60, 0, 0.5);
    transition: width 1s cubic-bezier(0.22, 1, 0.36, 1);
    overflow: hidden;
}
.lp-shimmer {
    position: absolute;
    top: 0;
    left: -60%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.75) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    transform: skewX(-20deg);
    animation: lpShimmerSweep 2.6s ease-in-out infinite;
}
@keyframes lpShimmerSweep {
    0% { left: -60%; }
    55%, 100% { left: 130%; }
}
.lp-bubble {
    position: absolute;
    bottom: -10px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 0 0 3px rgba(255, 255, 255, 0.8);
    animation: lpBubbleRise 2.8s ease-in infinite;
}
.lp-bubble.b1 { right: 12%; width: 3px; height: 3px; animation-delay: 0s; }
.lp-bubble.b2 { right: 35%; width: 5px; height: 5px; animation-delay: 0.7s; }
.lp-bubble.b3 { right: 58%; width: 3px; height: 3px; animation-delay: 1.5s; }
.lp-bubble.b4 { right: 80%; width: 4px; height: 4px; animation-delay: 2.1s; }
@keyframes lpBubbleRise {
    0% { bottom: -10%; opacity: 0; transform: translateX(0); }
    15% { opacity: 0.9; }
    80% { opacity: 0.7; }
    100% { bottom: 105%; opacity: 0; transform: translateX(3px); }
}
.level-progress-glass-shine {
    position: absolute;
    top: 2px;
    left: 6%;
    width: 88%;
    height: 40%;
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0));
    pointer-events: none;
}
.level-score-text {
    direction: rtl;
    font-family: "Orbitron", "Tahoma", "Vazir", sans-serif;
    color: #ffe9b0;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-shadow: 0 0 6px rgba(255, 183, 3, 0.35);
    text-align: center;
    margin-top: 5px;
}
.level-badge {
    position: relative;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
}
.level-badge__ring {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    padding: 2px;
    box-sizing: border-box;
    background: conic-gradient(from 210deg, #8a5a00, #ffb703 35%, #ffe9b0 55%, #ffb703 75%, #8a5a00);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: lpRingGlow 2.6s ease-in-out infinite;
}
@keyframes lpRingGlow {
    0%, 100% { box-shadow: 0 0 6px rgba(255, 183, 3, 0.3); }
    50% { box-shadow: 0 0 14px rgba(255, 183, 3, 0.7); }
}
.level-badge__inner {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 32%, #3d2168 0%, #221041 65%, #170a2c 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        inset 0 2px 3px rgba(255, 255, 255, 0.08),
        inset 0 -4px 8px rgba(0, 0, 0, 0.55);
}
.level-badge__content {
    text-align: center;
    line-height: 0.85;
}
.level-badge__label {
    font-family: "Rajdhani", "Orbitron", sans-serif;
    font-size: 0.34rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    color: #ffcf70;
    opacity: 0.8;
    margin-right: -1.5px;
}
.level-badge__num {
    font-family: "Orbitron", sans-serif;
    font-size: 0.82rem;
    font-weight: 800;
    background: linear-gradient(180deg, #fff6da 0%, #ffb703 65%, #e08e00 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.last-watched-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    display: none;
    z-index: 1000;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(5px);
}
.last-watched-content {
    background: var(--dark-modal-bg);
    width: 90%;
    max-width: 400px;
    padding: 20px;
    border-radius: 15px;
    border: 1px solid var(--dark-modal-border);
    color: white;
}
.list-item {
    display: flex;
    align-items: center;
    padding: 10px;
    margin-bottom: 10px;
    background: #16213e;
    border-radius: 10px;
    transition: 0.3s;
    cursor: pointer;
    border: 1px solid transparent;
}
.list-item:hover {
    background: #0f3460;
    border-color: #3498db;
}
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
}
.modal-box {
    background: var(--dark-modal-bg);
    width: 90%;
    max-width: 450px;
    padding: 25px;
    border-radius: 20px;
    border: 1px solid var(--dark-modal-border);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    animation: fadeIn 0.3s ease;
}
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}
#videoModal {
    z-index: 9999999 !important;
    display: none;
}
.save-btn:hover {
    animation: shake 0.5s;
    background: rgba(255, 255, 255, 0.2) !important;
}
@keyframes shake {
    0% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(15deg);
    }
    50% {
        transform: rotate(-15deg);
    }
    75% {
        transform: rotate(10deg);
    }
    100% {
        transform: rotate(0deg);
    }
}
.saved-icon {
    color: #f1c40f !important;
}
.close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    cursor: pointer;
    font-size: 28px;
    color: #333;
    transition: 0.3s;
}
.close-btn:hover { color: #f44336; }
.class-card-modern {
    display: flex;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
    width: 100%;
    max-width: 550px;
    height: 160px;
    overflow: hidden;
    border: 1px solid #f0f0f0;
    transition: 0.3s;
}
.class-card-modern:hover { transform: scale(1.02); }
.class-cover { width: 40%; height: 100%; object-fit: cover; }
.class-info {
    width: 60%;
    padding: 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.class-info h3 { margin: 0 0 5px 0; color: #311b5e; font-size: 1.2rem; }
.class-info p { margin: 0; color: #555; font-size: 0.95rem; }
.btn-sessions {
    background: linear-gradient(135deg, #311b5e, #5e35b1);
    color: white;
    border: none;
    padding: 10px 0;
    border-radius: 12px;
    cursor: pointer;
    width: 80%;
    font-weight: bold;
    margin-top: 10px;
    transition: 0.3s;
}
.btn-sessions:hover { transform: scale(1.05); box-shadow: 0 5px 15px rgba(94, 53, 177, 0.3); }
.sessions-container { max-width: 600px; margin: 30px auto; }
.session-card {
    display: flex;
    background: #fff;
    border-radius: 20px;
    padding: 0;
    margin-bottom: 20px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    border: 1px solid #f0f0f0;
    transition: 0.3s;
    height: 140px;
    overflow: hidden;
    width: 100%;
}
.session-card:hover { box-shadow: 0 10px 26px rgba(0,0,0,0.16); }
.session-cover {
    width: 35%;
    height: 100%;
    object-fit: cover;
}
.session-info {
    width: 65%;
    padding: 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.session-info h3 { margin: 0 0 5px 0; color: #311b5e; font-size: 1.1rem; }
.session-info p { margin: 0; color: #666; font-size: 0.85rem; }
.next-session-highlight {
    border: 2px solid #5e35b1;
    background: #fdfcff;
}
.badge {
    background: #5e35b1;
    color: #fff;
    padding: 5px 12px;
    border-radius: 10px;
    font-size: 0.8rem;
    font-weight: bold;
    display: inline-block;
    margin-bottom: 10px;
}
.actions { margin-top: 15px; display: flex; justify-content: center; gap: 10px; }
.btn {
    background: #5e35b1;
    color: white;
    padding: 10px 20px;
    border-radius: 10px;
    text-decoration: none;
    font-size: 0.85rem;
    transition: 0.3s;
}
.btn:hover { background: #311b5e; }
.session-icons {
    display: flex;
    justify-content: center;
    gap: 18px;
    margin-top: 15px;
}
.session-icons a {
    color: #5e35b1;
    font-size: 1.6rem;
    transition: 0.3s;
}
.session-icons a.active-icon {
    color: #5e35b1 !important;
    pointer-events: auto;
}
.session-icons a.disabled {
    color: #ccc !important;
    cursor: not-allowed;
}
#sidebar-container { display: flex; flex-direction: column; height: 100%; position: relative; }
.sidebar-blur {
        filter: blur(2px);
        pointer-events: none;
        opacity: 0.7;
        transition: 0.3s;
    }
@keyframes notifBlink {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.4;
    transform: scale(1.15);
  }
}
#hamburgerNotifDot.blinking {
  animation: notifBlink 1s ease-in-out infinite;
}
.classes-sessions-modal {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60%;
    max-width: 600px;
    max-height: 80vh;
    background: linear-gradient(180deg, #f8f6fd 0%, #efe8fb 100%);
    padding: 25px;
    border-radius: 25px;
    box-shadow: 0 15px 50px rgba(49, 27, 94, 0.25);
    z-index: 10001;
    overflow-y: auto;
    scrollbar-width: thin;
}
@media (max-width: 700px) {
    .classes-sessions-modal {
        top: 0;
        bottom: 0;
        left: 0;
        transform: none;
        width: 100%;
        max-width: 100%;
        height: 100%;
        height: 100dvh;
        max-height: 100%;
        max-height: 100dvh;
        border-radius: 0;
        padding: 10px 14px 20px;
        animation: sheetSlideUp 0.35s ease;
    }
    .classes-sessions-modal::before {
        display: none;
    }
}
@keyframes sheetSlideUp {
    from { transform: translateY(50px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
.modal-header-m {
    position: sticky;
    top: -10px;
    z-index: 20;
    background: #f7f6fb;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 16px 14px;
    margin: -10px -14px 16px;
    border-bottom: 1px solid #eee;
}
@media (min-width: 701px) {
    .modal-header-m {
        margin: -25px -25px 20px;
        padding: 20px 25px;
        background: #fff;
        border-radius: 25px 25px 0 0;
    }
}
/* ⭐ دکمه‌های برگشت/بستنِ هدرِ مودال‌ها (لیست کلاس‌ها و لیست جلسات): به‌جای
   دایره‌ی خطی‌ی ساده، حالا یک دکمه‌ی توپُر با گرادیان، سایه‌ی رنگی و یک هالهٔ
   نرم که موقع هاور دورش ظاهر می‌شه - همونی که رنگ‌بندیِ کارت‌های جلسه رو هم
   داره (بنفش/طلایی) تا کل مجموعه هماهنگ به‌نظر برسه. */
.modal-header-m__btn {
    position: relative;
    border: none;
    width: 42px;
    height: 42px;
    min-width: 42px;
    flex-shrink: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.modal-header-m__btn::before {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    opacity: 0;
    transform: scale(0.7);
    transition: opacity 0.3s ease, transform 0.3s ease;
    z-index: 0;
}
.modal-header-m__btn:hover::before { opacity: 1; transform: scale(1); }
.modal-header-m__btn svg {
    position: relative;
    z-index: 1;
    width: 17px;
    height: 17px;
    stroke: #fff;
    stroke-width: 2.6;
    stroke-linecap: round;
    transition: transform 0.3s ease;
}
.modal-header-m__btn:active { transform: scale(0.88); }
.modal-header-m__btn.close-variant {
    background: linear-gradient(135deg, #ff8a5c, #ee4d4d 65%, #d63447);
    box-shadow: 0 4px 14px rgba(238, 77, 77, 0.45), 0 0 0 3px rgba(255, 255, 255, 0.85);
}
.modal-header-m__btn.close-variant::before {
    background: radial-gradient(circle, rgba(238, 77, 77, 0.35), transparent 70%);
}
.modal-header-m__btn.close-variant:hover,
.modal-header-m__btn.close-variant:active {
    box-shadow: 0 6px 22px rgba(238, 77, 77, 0.65), 0 0 0 3px rgba(255, 255, 255, 0.95);
}
.modal-header-m__btn.close-variant:hover svg,
.modal-header-m__btn.close-variant:active svg { transform: rotate(90deg) scale(1.12); }
.modal-header-m__btn.back-variant {
    background: linear-gradient(135deg, #8e54e9, #5e35b1 65%, #311b5e);
    box-shadow: 0 4px 14px rgba(74, 42, 148, 0.45), 0 0 0 3px rgba(255, 255, 255, 0.85);
}
.modal-header-m__btn.back-variant::before {
    background: radial-gradient(circle, rgba(123, 63, 228, 0.35), transparent 70%);
}
.modal-header-m__btn.back-variant:hover,
.modal-header-m__btn.back-variant:active {
    box-shadow: 0 6px 22px rgba(74, 42, 148, 0.65), 0 0 0 3px rgba(255, 255, 255, 0.95);
}
.modal-header-m__btn.back-variant:hover svg,
.modal-header-m__btn.back-variant:active svg { transform: translateX(3px) scale(1.12); }
/* دکمه‌های هدرِ «لیست کلاس‌ها / جلسات کلاس»: هم‌رنگ و هم‌استایل با دکمه‌های
   هدرِ چت (chat-header-icon-btn) تا هر دو صفحه هماهنگ به نظر برسن. */
#myModal .modal-header-m__btn.back-variant {
    background: linear-gradient(135deg, #ffcf54, #ffb703 65%, #fb8500);
    box-shadow: 0 4px 14px rgba(251, 133, 0, 0.45), 0 0 0 3px rgba(255, 255, 255, 0.85);
}
#myModal .modal-header-m__btn.back-variant::before {
    background: radial-gradient(circle, rgba(255, 183, 3, 0.35), transparent 70%);
}
#myModal .modal-header-m__btn.back-variant:hover,
#myModal .modal-header-m__btn.back-variant:active {
    box-shadow: 0 6px 22px rgba(251, 133, 0, 0.65), 0 0 0 3px rgba(255, 255, 255, 0.95);
}
#myModal .modal-header-m__btn.back-variant:hover svg,
#myModal .modal-header-m__btn.back-variant:active svg { transform: translateX(-3px) scale(1.12); }
.modal-header-m__title {
    font-size: 17px;
    font-weight: 800;
    color: #311b5e;
    margin: 0;
    text-align: center;
    flex: 1;
    letter-spacing: 0.2px;
}
.modal-header-m__title i {
    color: #ffb703;
    margin-inline-end: 7px;
    filter: drop-shadow(0 1px 3px rgba(255, 183, 3, 0.5));
}
/* ⭐ نشان/تیترِ رنگی برای مودال‌های تیره (چالش‌ها، جعبه‌ی جایزه و...): یک بجِ
   دایره‌ای شناور با گلو، و یک تیترِ گرادیانی جذاب. با ".purple-variant" رنگش
   بنفش می‌شه (چالش‌ها)، پیش‌فرض طلایی/نارنجیه (جعبه‌ی جایزه). */
.fz-modal-icon-badge {
    width: 62px;
    height: 62px;
    margin: 0 auto 8px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.22), transparent 60%), linear-gradient(135deg, #ffcf54, #ffb703 60%, #fb8500);
    box-shadow: 0 8px 22px rgba(251, 133, 0, 0.45), 0 0 0 6px rgba(255, 183, 3, 0.12);
    animation: fzIconBadgeFloat 3s ease-in-out infinite;
}
.fz-modal-icon-badge.purple-variant {
    background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.18), transparent 60%), linear-gradient(135deg, #b06ff0, #9b59b6 60%, #6c3483);
    box-shadow: 0 8px 22px rgba(155, 89, 182, 0.5), 0 0 0 6px rgba(155, 89, 182, 0.14);
}
@keyframes fzIconBadgeFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}
.fz-modal-title {
    margin: 6px 0 6px;
    font-size: 19px;
    font-weight: 900;
    text-align: center;
    background: linear-gradient(135deg, #ffe27a, #ffb703 55%, #fb8500);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.fz-modal-title.purple-variant {
    background: linear-gradient(135deg, #d6aef7, #b06ff0 55%, #9b59b6);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
/* هدرِ چسبنده (بالای مودال‌های تیره)، برای دکمه‌ی بستن/برگشت که همیشه در
   دیدرسه و لازم نیست کاربر تا آخرِ فرم اسکرول کنه تا بتونه ببندتش */
.fz-dark-modal-sticky-header {
    position: sticky;
    top: 0;
    z-index: 6;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 14px 0 4px;
    margin: -20px -20px 4px;
    background: #1a1a2e;
}
.fz-dark-modal-sticky-header__title {
    flex: 1;
    text-align: center;
    margin: 0;
    font-size: 15px;
    font-weight: 800;
    color: #fff;
}
/* ⭐ مودالِ «ساخت چالش جدید»: روی موبایل همون عرضِ قبلی، ولی روی صفحه‌های
   بزرگ‌تر (تبلت/ویندوز) به‌جای اینکه یه نوارِ باریکِ وسطِ صفحه بمونه، از فضای
   بیشتری استفاده می‌کنه و راحت‌تر خونده می‌شه. */
.fz-challenge-modal-box { width: 100%; max-width: 480px; }
@media (min-width: 700px) {
    .fz-challenge-modal-box { max-width: 620px; padding: 26px 28px !important; }
}
@media (min-width: 1000px) {
    .fz-challenge-modal-box { max-width: 720px; }
}
/* ⭐ اسکرول‌بارِ سفارشی و باریک، به‌جای نوارِ خاکستریِ پیش‌فرضِ مرورگر - روی
   کروم/اج نازک و رنگیه (با هاور پررنگ‌تر می‌شه)، روی فایرفاکس هم با
   scrollbar-width/scrollbar-color هماهنگه. */
.fz-scrollbar { scrollbar-width: thin; scrollbar-color: rgba(155, 89, 182, 0.55) transparent; }
.fz-scrollbar::-webkit-scrollbar { width: 6px; height: 6px; }
.fz-scrollbar::-webkit-scrollbar-track { background: transparent; }
.fz-scrollbar::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #b06ff0, #7b3fe4);
    border-radius: 10px;
}
.fz-scrollbar::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #c793f7, #9b59b6); }
@media (min-width: 700px) {
    .fz-friends-list { display: grid !important; grid-template-columns: 1fr 1fr; gap: 2px 14px; max-height: 190px !important; }
    .fz-friends-list .fz-select-all-row { grid-column: 1 / -1; }
}
.class-card-m {
    background: #fff;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(49, 27, 94, 0.10);
    margin-bottom: 18px;
    direction: rtl;
    border: 1px solid rgba(49, 27, 94, 0.06);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.class-card-m:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(49, 27, 94, 0.18); }
.class-card-m.is-free { border-color: rgba(255, 183, 3, 0.4); }
.class-card-m__img-wrap { position: relative; width: 100%; height: 155px; background: #eee; overflow: hidden; }
.class-card-m__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: filter 0.4s ease; }
.class-card-m:hover .class-card-m__img { filter: brightness(1.08) saturate(1.15); }
/* ⭐ همون افکتِ نورِ عبوری، به‌جای زوم، برای کارتِ لیستِ کلاس‌ها هم */
.class-card-m__img-wrap::after {
    content: "";
    position: absolute;
    top: -60%;
    left: -25%;
    width: 35%;
    height: 220%;
    background: linear-gradient(115deg, transparent, rgba(255, 255, 255, 0.55), transparent);
    transform: translateX(-160%) rotate(10deg);
    pointer-events: none;
    z-index: 2;
    opacity: 0;
}
.class-card-m:hover .class-card-m__img-wrap::after {
    opacity: 1;
    animation: cardShineSweep 0.85s ease;
}
.class-card-m__img-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.5) 100%);
    pointer-events: none;
}
.class-card-m__reg-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: linear-gradient(135deg, #27ae60, #2ecc71);
    color: #fff;
    font-size: 11px;
    font-weight: bold;
    padding: 6px 13px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 4px;
    box-shadow: 0 3px 10px rgba(39, 174, 96, 0.5);
    backdrop-filter: blur(4px);
}
.class-card-m__free-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: linear-gradient(135deg, #ffb703, #fb8500);
    color: #1a1a2e;
    font-size: 11px;
    font-weight: bold;
    padding: 6px 13px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 4px;
    box-shadow: 0 3px 10px rgba(255, 183, 3, 0.55);
    animation: freeBadgePulseM 2s infinite;
}
@keyframes freeBadgePulseM {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.07); }
}
.class-card-m__body { padding: 15px 16px 16px; text-align: center; }
.class-card-m__title { margin: 0 0 8px; color: #311b5e; font-size: 16.5px; font-weight: 800; }
.class-card-m__meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    color: #888;
    font-size: 12px;
    margin-bottom: 10px;
}
.class-card-m__meta span { display: flex; align-items: center; gap: 4px; }
.class-card-m__meta i { color: #9b6ddb; }
.class-card-m__tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-bottom: 14px; }
.class-card-m__tags .tag { font-size: 11px; font-weight: bold; padding: 6px 13px; border-radius: 20px; display: inline-flex; align-items: center; gap: 5px; }
.tag-days { background: linear-gradient(135deg, #f3edfb, #ece1fb); color: #6a1b9a; }
.tag-sessions { background: linear-gradient(135deg, #e8f8f0, #dcf5e8); color: #1e8449; }
.class-card-m__capacity { margin: 0 0 14px; }
.class-card-m__capacity-labels {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: #888;
    font-weight: 700;
    margin-bottom: 6px;
}
.class-card-m__capacity-remaining { font-weight: 800; color: #16a34a; }
.class-card-m__capacity-remaining.is-low { color: #ea580c; }
.class-card-m__capacity-remaining.is-full { color: #dc2626; }
.class-card-m__capacity-track { width: 100%; height: 6px; border-radius: 6px; background: #eee; overflow: hidden; }
.class-card-m__capacity-fill {
    height: 100%;
    border-radius: 6px;
    background: linear-gradient(90deg, #16a34a, #22c55e);
    transition: width 0.4s ease;
}
.class-card-m__capacity-fill.is-low { background: linear-gradient(90deg, #f97316, #ea580c); }
.class-card-m__capacity-fill.is-full { background: linear-gradient(90deg, #ef4444, #dc2626); }
.class-card-m__actions { display: flex; gap: 10px; }
.class-card-m__actions .btn-action-m {
    flex: 1;
    padding: 13px 0;
    border: none;
    border-radius: 14px;
    font-weight: bold;
    font-size: 13px;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: transform 0.2s, box-shadow 0.2s;
}
.class-card-m__actions .btn-action-m:active { transform: scale(0.96); }
.class-card-m__actions .btn-sessions-m {
    background: linear-gradient(135deg, #311b5e, #5e35b1);
    box-shadow: 0 4px 14px rgba(49, 27, 94, 0.35);
}
.class-card-m__actions .btn-sessions-m:hover { box-shadow: 0 6px 18px rgba(49, 27, 94, 0.45); }
.class-card-m__actions .btn-register-m {
    background: linear-gradient(135deg, #27ae60, #2ecc71);
    box-shadow: 0 4px 14px rgba(39, 174, 96, 0.35);
}
.class-card-m__actions .btn-register-m:hover { box-shadow: 0 6px 18px rgba(39, 174, 96, 0.45); }
.class-card-m__actions .btn-free-m {
    background: linear-gradient(135deg, #ffb703, #fb8500);
    color: #1a1a2e;
    box-shadow: 0 4px 14px rgba(255, 183, 3, 0.4);
}
.class-card-m__actions .btn-free-m:hover { box-shadow: 0 6px 18px rgba(255, 183, 3, 0.5); }
.sessions-container-m { width: 100%; max-width: 500px; margin: 0 auto; }
.session-card-m {
    position: relative;
    background: linear-gradient(165deg, #ffffff 0%, #faf8ff 100%);
    border-radius: 24px;
    overflow: hidden;
    margin-bottom: 22px;
    box-shadow: 0 8px 26px rgba(49, 27, 94, 0.13);
    border: 2px solid rgba(94, 53, 177, 0.08);
    direction: rtl;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.3s;
}
.session-card-m::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, #ffb703, #7b3fe4, #2ecc71, #ffb703);
    background-size: 300% 100%;
    z-index: 3;
    animation: sparkLineMove 6s linear infinite;
}
@keyframes sparkLineMove {
    0% { background-position: 0% 0; }
    100% { background-position: 300% 0; }
}
.session-card-m:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 40px rgba(49, 27, 94, 0.22);
    border-color: rgba(94, 53, 177, 0.22);
}
.session-card-m.is-next {
    border-color: #27ae60;
    animation: nextCardGlow 2.6s ease-in-out infinite;
}
@keyframes nextCardGlow {
    0%, 100% { box-shadow: 0 0 0 4px rgba(39, 174, 96, 0.10), 0 10px 26px rgba(39, 174, 96, 0.18); }
    50% { box-shadow: 0 0 0 7px rgba(39, 174, 96, 0.18), 0 10px 32px rgba(39, 174, 96, 0.32); }
}
.session-card-m__badge {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 5px;
    color: #fff;
    font-size: 11px;
    font-weight: bold;
    padding: 6px 13px;
    border-radius: 20px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(4px);
}
.session-card-m__badge.locked { background: linear-gradient(135deg, #e67e22, #f39c12); }
.session-card-m__badge.next { background: linear-gradient(135deg, #27ae60, #2ecc71); box-shadow: 0 3px 12px rgba(39, 174, 96, 0.55); }
.session-card-m__badge.next .live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #fff;
    animation: liveDotPulse 1.4s infinite;
}
@keyframes liveDotPulse {
    0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7); }
    70% { box-shadow: 0 0 0 6px rgba(255, 255, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}
.session-card-m__badge.past { background: linear-gradient(135deg, #7f8c9a, #95a5a6); }
.session-card-m__img-wrap { position: relative; width: 100%; height: 180px; background: #eee; overflow: hidden; }
.session-card-m__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: filter 0.4s ease; }
.session-card-m:hover .session-card-m__img { filter: brightness(1.08) saturate(1.15); }
.session-card-m__img.is-past { filter: grayscale(0.85) brightness(0.8); }
/* ⭐ به‌جای افکتِ زوم (که با تغییرِ ناگهانیِ ابعاد، حس ناخوشایندی می‌ده)، یک
   نوارِ نورِ مورب روی عکس، فقط در لحظه‌ی هاور، از این سمت به اون سمت می‌گذره؛
   بدونِ اینکه اندازه‌ی هیچ‌چیزی تغییر کنه. */
.session-card-m__img-wrap::after {
    content: "";
    position: absolute;
    top: -60%;
    left: -25%;
    width: 35%;
    height: 220%;
    background: linear-gradient(115deg, transparent, rgba(255, 255, 255, 0.55), transparent);
    transform: translateX(-160%) rotate(10deg);
    pointer-events: none;
    z-index: 2;
    opacity: 0;
}
.session-card-m:hover .session-card-m__img-wrap::after {
    opacity: 1;
    animation: cardShineSweep 0.85s ease;
}
@keyframes cardShineSweep {
    from { transform: translateX(-160%) rotate(10deg); }
    to { transform: translateX(420%) rotate(10deg); }
}
.session-card-m__img-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(20, 10, 40, 0.65) 100%);
    pointer-events: none;
}
/* ⭐ نشانِ (مدال) شماره‌ی جلسه: برگشت به همون گوشه‌ی پایین (کنارِ تاریخ)، تا
   خودِ کاور کامل و بدونِ سد شدن دیده بشه؛ ولی این‌بار به‌جای دایره‌ی ساده،
   یک مدالِ کوچیک با حلقه‌ی نقطه‌چینِ چرخان و گلوی بنفش/سبز. */
.session-card-m__meta-chip {
    position: absolute;
    bottom: 12px;
    left: 12px;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 8px;
    direction: ltr;
}
.session-card-m__num-badge {
    position: relative;
    flex-shrink: 0;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 32% 28%, #8e54e9 0%, #4a2a94 55%, #2a1450 100%);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.92), 0 6px 16px rgba(30, 12, 60, 0.5), 0 0 16px rgba(142, 84, 233, 0.5);
    animation: numBadgePulse 2.6s ease-in-out infinite;
}
.session-card-m__num-ring {
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 1.5px dashed rgba(255, 255, 255, 0.65);
    animation: numBadgeSpin 9s linear infinite;
}
.session-card-m__num-label {
    color: #ffd873;
    font-size: 7.5px;
    font-weight: 700;
    letter-spacing: 0.2px;
    margin-bottom: 0px;
}
.session-card-m__num-value {
    color: #fff;
    font-size: 15.5px;
    font-weight: 900;
    line-height: 1;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}
@keyframes numBadgeSpin { to { transform: rotate(360deg); } }
@keyframes numBadgePulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.92), 0 6px 16px rgba(30, 12, 60, 0.5), 0 0 10px rgba(142, 84, 233, 0.4); }
    50% { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.92), 0 6px 16px rgba(30, 12, 60, 0.5), 0 0 18px rgba(142, 84, 233, 0.7); }
}
.session-card-m.is-next .session-card-m__num-badge {
    background: radial-gradient(circle at 32% 28%, #2ecc71 0%, #1c8f52 55%, #0e6337 100%);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.92), 0 6px 16px rgba(14, 99, 55, 0.5), 0 0 16px rgba(46, 204, 113, 0.55);
}
.session-card-m.is-next .session-card-m__num-label { color: #eafff1; }
.session-card-m__date-pill {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
    padding: 8px 14px;
    border-radius: 20px;
    background: rgba(20, 10, 40, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(6px);
    white-space: nowrap;
}
.session-card-m__date-pill i { color: #ffb703; }
.session-card-m__body { padding: 18px 16px 16px; }
.session-card-m__body h3 {
    margin: 0 0 16px;
    text-align: center;
    color: #311b5e;
    font-size: 18px;
    font-weight: 900;
    letter-spacing: 0.2px;
    position: relative;
    padding-bottom: 11px;
    background: linear-gradient(135deg, #5e35b1, #7b3fe4 45%, #311b5e);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.session-card-m__body h3::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 46px;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, #ffb703, #7b3fe4, #2ecc71, #ffb703);
    background-size: 300% 100%;
    animation: sparkLineMove 6s linear infinite;
}
.session-card-m__icons { display: flex; justify-content: center; gap: 11px; flex-wrap: wrap; margin-top: 4px; }
.session-card-m__icons a, .session-card-m__icons span {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f3edfb, #ece1fb);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    color: #5e35b1;
    text-decoration: none;
    box-shadow: 0 3px 8px rgba(94, 53, 177, 0.18);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.session-card-m__icons a:hover { transform: translateY(-4px) scale(1.06); }
.session-card-m__icons a:active { transform: scale(0.9); }
.session-card-m__icons span.disabled-icon { opacity: 0.3; background: #f2f2f2; color: #999; box-shadow: none; }
/* رنگ‌بندی جداگانه برای هر نوع آیکون - جذاب‌تر و قابل‌تشخیص‌تر از یک‌رنگ یکنواخت */
.session-card-m__icons a.icon-pdf { background: linear-gradient(135deg, #ff6b6b, #ee4d4d); color: #fff; box-shadow: 0 3px 10px rgba(238, 77, 77, 0.35); }
.session-card-m__icons a.icon-pdf:hover { box-shadow: 0 7px 16px rgba(238, 77, 77, 0.5); }
.session-card-m__icons a.icon-intro { background: linear-gradient(135deg, #8e54e9, #4776e6); color: #fff; box-shadow: 0 3px 10px rgba(94, 53, 177, 0.4); }
.session-card-m__icons a.icon-intro:hover { box-shadow: 0 7px 16px rgba(94, 53, 177, 0.55); }
.session-card-m__icons a.icon-handout { background: linear-gradient(135deg, #00c6ff, #0072ff); color: #fff; box-shadow: 0 3px 10px rgba(0, 114, 255, 0.35); }
.session-card-m__icons a.icon-handout:hover { box-shadow: 0 7px 16px rgba(0, 114, 255, 0.5); }
.session-card-m__icons a.icon-homework { background: linear-gradient(135deg, #11998e, #38ef7d); color: #fff; box-shadow: 0 3px 10px rgba(17, 153, 142, 0.35); }
.session-card-m__icons a.icon-homework:hover { box-shadow: 0 7px 16px rgba(17, 153, 142, 0.5); }
.session-card-m__icons a.icon-recorded { background: linear-gradient(135deg, #f857a6, #ff5858); color: #fff; box-shadow: 0 3px 10px rgba(248, 87, 166, 0.35); }
.session-card-m__icons a.icon-recorded:hover { box-shadow: 0 7px 16px rgba(248, 87, 166, 0.5); }
.session-card-m__lock-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: #fff;
    font-size: 12.5px;
    font-weight: bold;
    background: linear-gradient(135deg, #e67e22, #f39c12);
    padding: 12px 14px;
    border-radius: 20px;
    cursor: pointer;
    width: 100%;
    margin-top: 12px;
    box-shadow: 0 4px 14px rgba(230, 126, 34, 0.35);
    transition: transform 0.2s, box-shadow 0.2s;
}
.session-card-m__lock-cta:hover { box-shadow: 0 6px 18px rgba(230, 126, 34, 0.45); }
.session-card-m__lock-cta:active { transform: scale(0.97); }
.session-card-m__join-wrap { margin-top: 12px; }
.session-card-m__join {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    padding: 13px 14px;
    border-radius: 20px;
    font-size: 13.5px;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
    box-sizing: border-box;
    transition: transform 0.2s, box-shadow 0.2s;
}
.session-card-m__join.is-active {
    background: linear-gradient(135deg, #27ae60, #2ecc71);
    color: #fff;
    box-shadow: 0 6px 18px rgba(39, 174, 96, 0.45);
    animation: guestPulse 1.8s infinite;
}
.session-card-m__join.is-active::after {
    content: "";
    position: absolute;
    top: 0;
    left: -60%;
    width: 40%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.5), transparent);
    transform: skewX(-20deg);
    animation: joinShine 2.6s ease-in-out infinite;
}
@keyframes joinShine {
    0% { left: -60%; }
    50%, 100% { left: 130%; }
}
.session-card-m__join.is-active:active { transform: scale(0.97); }
.session-card-m__join.is-disabled {
    background: #f2f2f2;
    color: #999;
    cursor: not-allowed;
}
@keyframes guestPulse {
    0%, 100% {
      box-shadow: 0 0 6px rgba(255, 183, 3, 0.4);
      transform: scale(1);
    }
    50% {
      box-shadow: 0 0 18px rgba(255, 183, 3, 0.85);
      transform: scale(1.02);
    }
  }
  @keyframes lockGlow {
    0%, 100% {
      transform: scale(1);
      opacity: 0.85;
    }
    50% {
      transform: scale(1.08);
      opacity: 1;
    }
  }

/* ===== کارتِ قفلِ «ورود به حساب» توی سایدبار مهمان (تنها CTA لاگین سایدبار) ===== */
.login-lock-card {
  position: relative;
  background: rgba(22, 33, 62, 0.88);
  backdrop-filter: blur(8px);
  padding: 35px 30px;
  border-radius: 20px;
  text-align: center;
  pointer-events: auto;
  border: 1px solid rgba(255, 183, 3, 0.28);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  max-width: 300px;
  margin: 0 auto;
  animation: loginLockCardGlow 3s ease-in-out infinite;
}
@keyframes loginLockCardGlow {
  0%, 100% { box-shadow: 0 8px 32px rgba(0,0,0,0.4), 0 0 0 rgba(255,183,3,0); border-color: rgba(255, 183, 3, 0.28); }
  50% { box-shadow: 0 8px 32px rgba(0,0,0,0.4), 0 0 26px rgba(255,183,3,0.4); border-color: rgba(255, 183, 3, 0.55); }
}
.login-lock-icon-wrap {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 183, 3, 0.18) 0%, transparent 70%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px auto;
  animation: lockGlow 2.2s ease-in-out infinite;
}
.login-lock-icon-wrap i {
  font-size: 42px;
  color: #ffb703;
  filter: drop-shadow(0 0 8px rgba(255, 183, 3, 0.6));
}
.login-lock-text {
  color: rgba(255, 255, 255, 0.94);
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: 0.1px;
  margin-bottom: 22px;
  line-height: 1.9;
}
.login-lock-btn {
  position: relative;
  overflow: hidden;
  padding: 12px 20px;
  background: linear-gradient(135deg, #ffb703, #fb8500);
  color: #241442;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  width: 100%;
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: 0.1px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  white-space: nowrap;
  box-shadow: 0 0 14px rgba(255, 183, 3, 0.55);
  animation: guestPulse 2.4s ease-in-out infinite;
  transition: transform 0.15s ease;
  font-family: inherit;
}
.login-lock-btn:hover { transform: scale(1.03); }
.login-lock-btn:active { transform: scale(0.97); }
.login-lock-btn::before {
  content: "";
  position: absolute;
  top: 0;
  right: -100%;
  width: 55%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.6), transparent);
  transform: skewX(-20deg);
  animation: loginLockBtnShine 2.8s ease-in-out infinite;
}
.login-lock-btn i { font-size: 14px; position: relative; z-index: 1; }
.login-lock-btn-label { position: relative; z-index: 1; }
.login-lock-btn-arrow { position: relative; z-index: 1; font-size: 13px; transition: transform 0.2s ease; }
.login-lock-btn:hover .login-lock-btn-arrow { transform: translateX(-4px); }
@keyframes loginLockBtnShine {
  0% { right: 120%; }
  55% { right: -60%; }
  100% { right: -60%; }
}
.account-completion-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 800;
  border-radius: 20px;
  padding: 2px 8px;
  margin-right: 8px;
  line-height: 1.6;
  vertical-align: middle;
}
.account-completion-pill.account-badge-incomplete {
  background: rgba(231, 76, 60, 0.15);
  color: #ff6b5e;
  border: 1px solid rgba(231, 76, 60, 0.5);
  animation: accountBadgePulse 1.8s ease-in-out infinite;
}
.account-completion-pill.account-badge-incomplete i {
  font-size: 10px;
}
.account-completion-pill.account-badge-complete {
  background: rgba(46, 204, 113, 0.18);
  color: #2ecc71;
  border: 1px solid rgba(46, 204, 113, 0.5);
  animation: accountBadgePop 0.4s ease;
  padding: 2px 3px;
  border-radius: 8px;
}
.account-completion-pill.account-badge-complete i {
  font-size: 9px;
}
.sidebar-links li a .account-completion-pill i {
  width: auto;
  margin-left: 0;
}
@keyframes accountBadgePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.35); }
  50% { box-shadow: 0 0 0 4px rgba(231, 76, 60, 0); }
}
@keyframes accountBadgePop {
  0% { transform: scale(0.6); opacity: 0; }
  70% { transform: scale(1.15); }
  100% { transform: scale(1); opacity: 1; }
}

/* ===== best_table.css ===== */
.hero-container {
    display: flex;
    gap: 30px;
    padding: 40px;
    max-width: 1200px;
    margin: 0 auto;
    align-items: stretch;
}
.left-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.right-col {
    flex: 1;
}
.hero-image-box img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: 15px;
}
.hero-content {
    background: #ffffff;
    padding: 30px;
    border-radius: 15px;
    border: 1px solid #eee;
    flex-grow: 1;
}
.leaderboard-box {
    background: #fff;
    padding: 25px;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    border: 1px solid #eee;
    height: 100%;
}
.leaderboard-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}
.leaderboard-table th, .leaderboard-table td {
    padding: 15px 10px;
    text-align: center;
    border-bottom: 1px solid #f5f5f5;
}
@media (max-width: 768px) {
    .hero-container { flex-direction: column; }
}
.lb-card {
    background: linear-gradient(180deg, #16213e 0%, #131c35 100%);
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(212, 175, 55, 0.18);
    font-family: "Vazirmatn", Tahoma, Arial, sans-serif;
}
.lb-table {
    width: 100%;
    border-collapse: collapse;
    color: #eef1fb;
    direction: rtl;
}
.lb-table thead tr {
    background: linear-gradient(180deg, #16385e 0%, #0f3460 100%);
}
.lb-table thead th {
    padding: 18px 12px;
    font-size: 15.5px;
    font-weight: 800;
    letter-spacing: 0.3px;
    color: #ffd873;
    border-bottom: 2px solid rgba(212, 175, 55, 0.35);
    white-space: nowrap;
}
.lb-table tbody tr.leaderboard-row {
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    transition: background 0.2s ease;
}
.lb-table tbody tr.leaderboard-row:hover {
    background: rgba(255, 255, 255, 0.04);
}
.lb-table tbody tr.leaderboard-row td {
    padding: 14px 10px;
    font-size: 15px;
    font-weight: 600;
    vertical-align: middle;
}
.lb-table tbody tr.leaderboard-row-empty {
    opacity: 0.45;
}
.lb-table tbody tr.current-user-row {
    background: rgba(255, 216, 115, 0.08);
    box-shadow: inset 3px 0 0 0 #ffd873;
}
.lb-rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 40px;
    padding: 6px 10px;
    border-radius: 999px;
    font-weight: 800;
    font-size: 16px;
    color: #cfd6ef;
    background: rgba(255, 255, 255, 0.06);
    font-family: "Orbitron", "Vazirmatn", Tahoma, Arial, sans-serif;
    direction: ltr;
}
.lb-rank.rank-1 {
    background: linear-gradient(135deg, #ffe9a8, #d4af37 60%, #a97e1a);
    color: #3a2600;
    box-shadow: 0 4px 14px rgba(212, 175, 55, 0.45);
}
.lb-rank.rank-2 {
    background: linear-gradient(135deg, #f1f4fb, #c3ccdd 60%, #9aa4b8);
    color: #2b2f3a;
    box-shadow: 0 4px 14px rgba(180, 190, 210, 0.35);
}
.lb-rank.rank-3 {
    background: linear-gradient(135deg, #f2c39a, #cd7f32 60%, #9c5a1f);
    color: #3a2200;
    box-shadow: 0 4px 14px rgba(205, 127, 50, 0.35);
}
.lb-avatar-img {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255, 216, 115, 0.5);
    display: block;
    margin: 0 auto;
}
.lb-avatar-empty {
    font-size: 18px;
}
.lb-name {
    font-weight: 800;
    color: #ffffff;
}
.lb-name .lb-you {
    color: #ffd873;
    font-weight: 700;
    font-size: 12.5px;
}
.lb-level {
    color: #9fb3d9;
    font-weight: 700;
    font-family: "Orbitron", "Vazirmatn", Tahoma, Arial, sans-serif;
    direction: ltr;
}
.lb-score {
    color: #f7cd52;
    font-weight: 800;
    font-size: 16px;
    font-family: "Orbitron", "Vazirmatn", Tahoma, Arial, sans-serif;
    direction: ltr;
}
.lb-prize {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-weight: 800;
    color: #43e28a;
}
.lb-prize-icon {
    font-size: 15px;
    line-height: 1;
}
.lb-prize-value {
    direction: ltr;
    unicode-bidi: isolate;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.lb-prize-amount {
    font-weight: 800;
    font-size: 16px;
    color: #43e28a;
    font-family: "Orbitron", "Vazirmatn", Tahoma, Arial, sans-serif;
}
.lb-fz-icon {
    width: 18px;
    height: 18px;
    object-fit: contain;
    display: inline-block;
    flex-shrink: 0;
}
.lb-separator td {
    text-align: center;
    padding: 8px;
    color: #6b7593;
    font-size: 13px;
    letter-spacing: 3px;
}
@media (max-width: 600px) {
    .lb-table thead th,
    .lb-table tbody tr.leaderboard-row td {
        padding: 10px 6px;
        font-size: 13px;
    }
    .lb-avatar-img {
        width: 28px;
        height: 28px;
    }
    .lb-rank {
        font-size: 13px;
        min-width: 32px;
        padding: 4px 8px;
    }
}

/* ===== header-style.css ===== */
        header {
            background: rgba(49, 27, 94, 0.85);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
            position: sticky;
            top: 0;
            z-index: 1000;
            color: white;
            padding: 15px 50px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            box-shadow: 0 4px 20px rgba(0,0,0,0.2);
            transition: all 0.3s ease;
        }
        .brand-section {
            display: flex;
            align-items: center;
            gap: 15px;
        }
        .logo {
            width: 65px;
            height: 65px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid #ffb703;
            box-shadow: 0 0 10px rgba(255, 183, 3, 0.3);
        }
        .site-info h1 {
            font-size: 27px;
            font-weight: 900;
            margin-bottom: 2px;
            font-family: "Vazirmatn", Tahoma, Arial, sans-serif;
            letter-spacing: 0.5px;
            background: linear-gradient(90deg, #ffe08a 0%, #ffb703 45%, #ff8f00 100%);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            text-shadow: 0 0 18px rgba(255, 183, 3, 0.35);
        }
        .site-info p {
            font-size: 13px;
            color: #cdb8f5;
            font-weight: 500;
            letter-spacing: 0.3px;
            opacity: 0.9;
        }
        .main-nav ul {
            display: flex;
            list-style: none;
            gap: 35px;
        }
        .main-nav ul li a {
            position: relative;
            color: #ffffff;
            text-decoration: none;
            font-size: 16px;
            font-weight: 500;
            padding: 5px 0;
            opacity: 0.9;
            transition: opacity 0.3s ease, color 0.3s ease;
        }
        .main-nav ul li a:hover {
            color: #ffb703;
            opacity: 1;
        }
        .main-nav ul li a::after {
            content: '';
            position: absolute;
            bottom: -2px;
            right: 50%;
            width: 0;
            height: 2px;
            background-color: #ffb703;
            transition: all 0.3s ease;
            transform: translateX(50%);
            border-radius: 2px;
        }
        .main-nav ul li a:hover::after {
            width: 100%;
        }
        .action-section {
            margin-left: -10px;
            display: flex;
            align-items: center;
            gap: 20px;
            margin-right: 5px;
        }
        .search-box input {
            padding: 10px 18px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 25px;
            background-color: rgba(255, 255, 255, 0.05);
            color: white;
            font-size: 16px;
            outline: none;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            width: 200px;
        }
        .search-box input::placeholder {
            color: rgba(255, 255, 255, 0.5);
            font-weight: 300;
        }
        .search-box input:focus {
            background-color: rgba(255, 255, 255, 0.12);
            border-color: rgba(255, 183, 3, 0.5);
            box-shadow: 0 0 15px rgba(255, 183, 3, 0.15);
            width: 260px;
        }
        .login-btn {
            background-color: #ffb703;
            color: #241442;
            padding: 10px 28px;
            border: none;
            border-radius: 25px;
            font-size: 15px;
            font-weight: 800;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(255, 183, 3, 0.3);
        }
        .login-btn:hover {
            background-color: #ffb703;
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(255, 183, 3, 0.5);
        }
        .main-nav ul {
            display: flex;
            list-style: none;
            gap: 35px;
            align-items: center;
        }
        .dropdown {
            position: relative;
        }
        .dropdown > a {
            display: flex;
            align-items: center;
            gap: 4px;
        }
        .dropdown::after {
            content: "";
            position: absolute;
            top: 100%;
            left: 0;
            width: 100%;
            height: 25px;
            z-index: 99;
        }
        .dropdown-menu {
            position: absolute;
            top: calc(100% + 15px);
            right: 0;
            background: rgba(49, 27, 94, 0.95);
            backdrop-filter: blur(10px);
            min-width: 170px;
            border-radius: 12px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
            border: 1px solid rgba(255, 255, 255, 0.1);
            display: flex;
            flex-direction: column;
            gap: 0 !important;
            padding: 8px;
            opacity: 0;
            visibility: hidden;
            transform: translateY(10px);
            transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            z-index: 100;
        }
        .dropdown:hover .dropdown-menu {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }
        .dropdown:hover > a svg {
            transform: rotate(180deg);
        }
        .dropdown-menu li {
            width: 100%;
        }
        .dropdown-menu li a {
            display: flex !important;
            align-items: center;
            gap: 10px;
            padding: 10px 14px !important;
            border-radius: 10px;
            color: #d1c4e9 !important;
            font-size: 15px !important;
            transition: all 0.25s ease !important;
        }
        .dropdown-menu li a::before {
            content: "";
            flex: none;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            box-shadow: 0 0 0 3px currentColor;
            opacity: 0.85;
        }
        .dropdown-menu li:nth-child(1) a::before { color: rgba(59, 130, 246, 0.4); }
        .dropdown-menu li:nth-child(2) a::before { color: rgba(16, 185, 129, 0.4); }
        .dropdown-menu li:nth-child(3) a::before { color: rgba(249, 115, 22, 0.4); }
        .dropdown-menu li a::after {
            display: none !important;
        }
        .dropdown-menu li a:hover {
            background-color: rgba(255, 183, 3, 0.12);
            color: #ffb703 !important;
            padding-right: 18px !important;
        }
        .dropdown-menu li a:hover::before {
            color: rgba(255, 183, 3, 0.5);
        }
@media screen and (max-width: 1024px) {
    header {
        padding: 15px 20px;
    }
    .main-nav ul {
        gap: 15px;
    }
    .search-box input {
        width: 140px;
    }
    .search-box input:focus {
        width: 180px;
    }
    .site-info h1 {
        font-size: 22px;
    }
}
@media screen and (max-width: 768px), screen and (orientation: landscape) and (max-height: 500px) {
    header {
        flex-wrap: wrap;
        padding: 15px;
    }
    .brand-section {
        flex: 1;
    }
    .logo {
        width: 50px;
        height: 50px;
    }
    .site-info p {
        display: none;
    }
    .action-section {
        gap: 10px;
    }
    .search-box input {
        width: 130px;
        font-size: 16px;
    }
    .main-nav {
        width: 100%;
        order: 3;
        margin-top: 15px;
        overflow: visible !important;
    }
    .main-nav ul {
        justify-content: center;
        gap: 20px;
        flex-wrap: wrap;
    }
    .dropdown-menu {
        left: 50%;
        right: auto;
        transform: translate(-50%, 10px) !important;
    }
    .dropdown:hover .dropdown-menu {
        transform: translate(-50%, 0) !important;
    }
}
@media screen and (max-width: 480px) {
    .search-box {
        display: none;
    }
    .main-nav ul {
        justify-content: space-between;
        gap: 10px;
    }
    .main-nav ul li a {
        font-size: 14px;
    }
}
.main-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
}
.site-topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1000;
    padding-top: 0;
    background-color: #311b5e;
}
.brand-section {
    display: flex;
    align-items: center;
    gap: 10px;
}
.main-nav ul {
    display: flex;
    list-style: none;
    gap: 20px;
    margin: 0;
    padding: 0;
}
.action-section {
    display: flex;
    align-items: center;
    gap: 10px;
}
@media (max-width: 1024px) {
    .main-header {
        justify-content: center;
    }
    .main-nav ul {
        gap: 10px;
    }
}
@media (max-width: 768px) {
    .main-header {
        flex-direction: column;
        text-align: center;
    }
    .main-nav ul {
        flex-wrap: wrap;
        justify-content: center;
    }
}
.header-right {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* ===== hero-style.css ===== */
        .hero-container {
            display: flex;
            align-items: center;
            justify-content: space-between;
            max-width: 1200px;
            margin: 60px auto;
            padding: 40px;
            background-color: #ffffff;
            border-radius: 24px;
            box-shadow: 0 10px 30px rgba(49, 27, 94, 0.06);
            gap: 50px;
        }
        .hero-content {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
        }
        .hero-content h2 {
            font-size: 32px;
            color: #311b5e;
            margin-bottom: 20px;
            font-weight: bold;
        }
        .hero-content p {
            font-size: 16px;
            color: #555;
            line-height: 1.8;
            margin-bottom: 30px;
            text-align: justify;
        }
        .start-learning-btn {
            background-color: #ffb703;
            color: #311b5e;
            padding: 14px 40px;
            border: none;
            border-radius: 30px;
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 6px 18px rgba(255, 183, 3, 0.3);
            margin-bottom: 40px;
        }
        .start-learning-btn:hover {
            background-color: #ffb703;
            transform: translateY(-3px);
            box-shadow: 0 8px 22px rgba(255, 183, 3, 0.4);
        }
        .social-media {
            display: flex;
            gap: 15px;
            align-items: center;
        }
        .social-icon {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 42px;
            height: 42px;
            border-radius: 50%;
            background-color: #f0edf6;
            fill: #311b5e;
            transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }
        .social-icon.telegram:hover {
            background-color: #0088cc;
            fill: white;
            transform: translateY(-5px) scale(1.1);
        }
        .social-icon.instagram:hover {
            background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
            fill: white;
            transform: translateY(-5px) scale(1.1);
        }
        .social-icon.youtube:hover {
            background-color: #ff0000;
            fill: white;
            transform: translateY(-5px) scale(1.1);
        }
        .social-icon.bale:hover {
            background: linear-gradient(135deg, #2b326c, #3cd2a5);
            fill: white;
            transform: translateY(-5px) scale(1.1);
        }
        .hero-image-box {
            flex: 1;
            display: flex;
            justify-content: center;
        }
        .hero-image-box img {
            width: 380px;
            height: 380px;
            object-fit: cover;
            border-radius: 20px;
            border: 6px solid #f0edf6;
            box-shadow: 0 15px 35px rgba(49, 27, 94, 0.12);
            transition: transform 0.4s ease;
        }
        .hero-image-box img:hover {
            transform: scale(1.02) rotate(-1deg);
        }
@media screen and (max-width: 1024px) {
    .hero-container {
        flex-direction: column;
        text-align: center;
        padding: 40px 30px;
        margin: 40px 20px;
        gap: 30px;
    }
    .hero-content {
        align-items: center;
    }
    .hero-content p {
        text-align: center;
        margin-bottom: 25px;
    }
    .hero-image-box img {
        width: 320px;
        height: 320px;
    }
}
@media screen and (max-width: 768px) {
    .hero-container {
        margin: 20px 15px;
        padding: 25px 20px;
        border-radius: 16px;
    }
    .hero-content h2 {
        font-size: 24px;
        margin-bottom: 15px;
    }
    .hero-content p {
        font-size: 14px;
    }
    .start-learning-btn {
        padding: 12px 30px;
        font-size: 15px;
    }
    .hero-image-box img {
        width: 260px;
        height: 260px;
        border-width: 4px;
    }
}

/* ===== grades.css ===== */
.grades-section {
    max-width: 1200px;
    margin: 0 auto 60px;
    padding: 0 40px;
    text-align: center;
}
.section-title {
    text-align: center;
    color: #311b5e;
    font-size: 28px;
    margin-bottom: 40px;
    font-weight: bold;
}
.cards-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}
.grade-card {
    position: relative;
    background-color: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 4px 15px rgba(49, 27, 94, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    display: flex;
    flex-direction: column;
    border: 1px solid #f0edf6;
}
.grade-card::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 6px;
    background: var(--grade-color, #ffb703);
    transition: height 0.3s ease, box-shadow 0.3s ease;
    z-index: 2;
}
.grade-card:nth-child(1) { --grade-color: #3b82f6; }
.grade-card:nth-child(2) { --grade-color: #10b981; }
.grade-card:nth-child(3) { --grade-color: #f97316; }
.grade-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 25px color-mix(in srgb, var(--grade-color) 30%, rgba(49, 27, 94, 0.12));
    border-color: var(--grade-color);
}
.card-image-wrapper {
    width: 100%;
    height: 200px;
    overflow: hidden;
}
.card-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.grade-card:hover .card-image-wrapper img {
    transform: scale(1.05);
}
.card-content {
    padding: 20px;
    text-align: center;
}
.card-content h3 {
    color: #311b5e;
    font-size: 20px;
    margin-bottom: 10px;
    font-weight: bold;
    transition: color 0.3s ease;
}
.grade-card:hover .card-content h3 {
    color: var(--grade-color, #ffb703);
}
.card-content p {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
}
@media screen and (max-width: 992px) {
    .cards-container {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media screen and (max-width: 768px) {
    .grades-section {
        padding: 0 20px;
        margin: 50px auto;
    }
    .section-title {
        font-size: 24px;
        margin-bottom: 40px;
    }
    .cards-container {
        grid-template-columns: 1fr;
        gap: 25px;
    }
    .card-image-wrapper {
        height: 200px;
    }
    .card-content {
        padding: 20px;
    }
    .card-content h3 {
        font-size: 20px;
    }
    .card-content p {
        font-size: 13px;
    }
}
.grade-card.active-grade {
    border: 3px solid var(--grade-color, #ffb703) !important;
    transform: translateY(-8px) scale(1.05);
    box-shadow: 0 15px 30px color-mix(in srgb, var(--grade-color, #ffb703) 40%, transparent);
    z-index: 10;
}
.grade-card.active-grade::before {
    height: 9px;
    box-shadow: 0 0 14px 2px var(--grade-color, #ffb703);
}
.grades-hint {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: -18px auto 30px;
    padding: 8px 20px;
    width: fit-content;
    background: rgba(255, 183, 3, 0.1);
    border: 1.5px dashed rgba(255, 183, 3, 0.45);
    border-radius: 50px;
    color: #a9720a;
    font-size: 14px;
    font-weight: 600;
}
.grades-hint .hint-arrow {
    display: inline-block;
    animation: hintBounce 1.3s ease-in-out infinite;
}
@keyframes hintBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(5px); }
}
.grades-section.grade-chosen .grades-hint {
    display: none;
}
.grades-section:not(.grade-chosen) .grade-card {
    animation: gradeInvite 2.6s ease-in-out infinite;
}
.grades-section.grade-chosen .grade-card {
    animation: none;
}
.grade-card:nth-child(1) { animation-delay: 0s; }
.grade-card:nth-child(2) { animation-delay: 0.3s; }
.grade-card:nth-child(3) { animation-delay: 0.6s; }
@keyframes gradeInvite {
    0%, 100% { box-shadow: 0 4px 15px rgba(49, 27, 94, 0.05); }
    50% { box-shadow: 0 10px 26px color-mix(in srgb, var(--grade-color) 40%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
    .grades-section:not(.grade-chosen) .grade-card,
    .grades-hint .hint-arrow {
        animation: none;
    }
}

/* ===== grades-landscape-mobile.css =====
   کارت‌های «پایه‌ها» در حالتِ افقیِ گوشی: چیدمانِ عمودیِ اصلی (عکسِ ۲۰۰
   پیکسلی روی هر کارت) توی ارتفاعِ کمِ landscape باعث می‌شد هر کارت خیلی
   بلند بشه و کاربر مجبور بشه زیاد اسکرول کنه تا هر سه پایه رو ببینه. اینجا
   هر کارت رو به یه ردیفِ افقیِ جمع‌وجور تبدیل می‌کنیم: عکس کوچیک کنارِ متن،
   نه بالای متن؛ همینطور انیمیشن‌های بزرگ‌شدن/جابه‌جاییِ کارت که توی این
   چیدمانِ فشرده باعث هم‌پوشانی می‌شدن رو غیرفعال می‌کنیم. */
@media screen and (orientation: landscape) and (max-height: 500px) {
    .grades-section {
        padding: 0 16px;
        margin: 20px auto 26px;
    }
    .section-title {
        font-size: 17px;
        margin-bottom: 10px;
    }
    .grades-hint {
        margin: -2px auto 12px;
        padding: 4px 14px;
        font-size: 11.5px;
        gap: 6px;
    }
    .cards-container {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .grade-card {
        flex-direction: row;
        align-items: stretch;
    }
    .grade-card::before {
        height: 100%;
        width: 4px;
        top: 0;
        bottom: 0;
        left: auto;
        right: 0;
    }
    .card-image-wrapper {
        width: 88px;
        height: auto;
        flex-shrink: 0;
    }
    .card-content {
        padding: 8px 14px;
        text-align: right;
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-width: 0;
    }
    .card-content h3 {
        font-size: 14.5px;
        margin-bottom: 3px;
    }
    .card-content p {
        font-size: 11px;
        line-height: 1.4;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .grade-card:hover,
    .grade-card.active-grade {
        transform: none;
    }
    .grades-section:not(.grade-chosen) .grade-card {
        animation: none;
    }
}

/* ===== categories.css ===== */
.categories-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    justify-items: center;
    max-width: 1200px;
    margin: 0 auto 60px;
    padding: 0 40px;
}
.category-card {
    width: 100%;
    max-width: 250px;
    background-color: #ffffff;
    border-radius: 20px;
    text-decoration: none;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(49, 27, 94, 0.05);
    border: 2px solid transparent;
    border-top: 4px solid var(--active-grade-color, #e6e1f2);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}
.category-card:hover {
    transform: translateY(-6px);
    border-color: var(--active-grade-color, #ffb703);
    box-shadow: 0 10px 25px color-mix(in srgb, var(--active-grade-color, #ffb703) 28%, transparent);
}
.categories-connector {
    max-width: 1200px;
    margin: 0 auto 22px;
    padding: 12px 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: fit-content;
    border-radius: 50px;
    background: color-mix(in srgb, var(--active-grade-color, #ffb703) 10%, #ffffff);
    border: 1.5px solid color-mix(in srgb, var(--active-grade-color, #ffb703) 45%, transparent);
    color: #311b5e;
    font-weight: bold;
    font-size: 15px;
    transition: background 0.4s ease, border-color 0.4s ease;
}
.connector-dot {
    width: 10px;
    height: 10px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--active-grade-color, #ffb703);
    box-shadow: 0 0 10px 2px color-mix(in srgb, var(--active-grade-color, #ffb703) 60%, transparent);
}
#categoriesSection.is-opening {
    animation: categoriesReveal 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes categoriesReveal {
    from { opacity: 0; transform: translateY(-22px) scale(0.97); }
    60% { opacity: 1; }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
#categoriesSection.is-opening .categories-connector {
    animation: connectorPulse 0.6s ease;
}
@keyframes connectorPulse {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--active-grade-color, #ffb703) 55%, transparent); }
    100% { box-shadow: 0 0 0 16px color-mix(in srgb, var(--active-grade-color, #ffb703) 0%, transparent); }
}
#categoriesSection.is-opening .category-card {
    animation: categoryCardIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
#categoriesSection.is-opening .category-card:nth-child(1) { animation-delay: 0.05s; }
#categoriesSection.is-opening .category-card:nth-child(2) { animation-delay: 0.1s; }
#categoriesSection.is-opening .category-card:nth-child(3) { animation-delay: 0.15s; }
#categoriesSection.is-opening .category-card:nth-child(4) { animation-delay: 0.2s; }
#categoriesSection.is-opening .category-card:nth-child(5) { animation-delay: 0.25s; }
#categoriesSection.is-opening .category-card:nth-child(6) { animation-delay: 0.3s; }
@keyframes categoryCardIn {
    from { opacity: 0; transform: translateY(18px) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    #categoriesSection.is-opening,
    #categoriesSection.is-opening .categories-connector,
    #categoriesSection.is-opening .category-card {
        animation: none;
    }
}
.grade-quick-switch {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    max-width: 500px;
    margin: 0 auto 26px;
}
.grade-quick-switch .gqs-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 50px;
    border: 1.5px solid #e6e1f2;
    background: #ffffff;
    color: #5a4a7a;
    font-weight: 600;
    font-size: 13.5px;
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease, transform 0.15s ease;
}
.grade-quick-switch .gqs-radio {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid #c9bfe0;
    flex-shrink: 0;
    position: relative;
    transition: border-color 0.25s ease;
}
@media (hover: hover) and (pointer: fine) {
    .grade-quick-switch .gqs-option:hover {
        border-color: var(--gqs-color, #ffb703);
        color: var(--gqs-color, #ffb703);
        box-shadow: 0 6px 16px color-mix(in srgb, var(--gqs-color, #ffb703) 22%, transparent);
    }
    .grade-quick-switch .gqs-option:hover .gqs-radio {
        border-color: var(--gqs-color, #ffb703);
    }
}
.grade-quick-switch .gqs-option:active {
    border-color: var(--gqs-color, #ffb703);
    color: var(--gqs-color, #ffb703);
    box-shadow: 0 6px 16px color-mix(in srgb, var(--gqs-color, #ffb703) 22%, transparent);
    transform: scale(0.97);
}
.grade-quick-switch .gqs-option:active .gqs-radio {
    border-color: var(--gqs-color, #ffb703);
}
.cat-image-wrapper {
    position: relative;
    width: 100%;
    height: 140px;
    overflow: hidden;
    background-color: #f0edf6;
}
.cat-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.category-card:hover .cat-image-wrapper img {
    transform: scale(1.1);
}
.cat-grade-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    --badge-color: var(--active-grade-color, #ffb703);
}
/* ---------- مدالِ گردِ شماره‌ی پایه («خفن‌شده»): به‌جای برچسبِ مستطیلیِ
   «پایه ۱۰»، یه مدالِ گرد و براق با فقط خودِ عدد، رنگِ اختصاصیِ همون پایه
   (آبی/سبز/نارنجی طبقِ GRADE_THEME)، حلقه‌ی سفید دورش و افکتِ شیشه‌ای/گلاسی
   با گرادیانِ شعاعی - هم رو کارت‌های اصلیِ صفحه، هم رو کارت‌های محتوا
   (جزوه/فیلم/آزمایش) با همین کلاس استفاده می‌شه. ---------- */
.grade-badge-circle-base {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(
        circle at 30% 25%,
        color-mix(in srgb, var(--badge-color, #ffb703) 65%, #fff) 0%,
        var(--badge-color, #ffb703) 55%,
        color-mix(in srgb, var(--badge-color, #ffb703) 65%, #000) 100%
    );
    color: #fff;
    font-weight: 900;
    font-size: 14px;
    letter-spacing: -0.5px;
    z-index: 10;
    box-shadow:
        0 4px 10px rgba(0, 0, 0, 0.3),
        0 0 0 3px rgba(255, 255, 255, 0.85),
        inset 0 1px 1px rgba(255, 255, 255, 0.6);
    transition: background 0.4s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.grade-badge-circle-base.badge-all {
    font-size: 10px;
    font-weight: 800;
}
.category-card:hover .cat-grade-badge {
    transform: scale(1.15) rotate(-6deg);
}
.content-card:hover .grade-badge-circle,
.video-card:hover .grade-badge-circle {
    transform: scale(1.15) rotate(-6deg);
}
/* موقعیتِ مدال روی کارت‌های محتوا (جزوه/فیلم/آزمایش) - سمتِ راستِ بالا،
   چون سمتِ چپ برای برچسبِ سطحِ دسترسی (همگانی/طلایی/...) استفاده می‌شه */
.grade-badge-circle {
    position: absolute;
    top: 8px;
    right: 8px;
}
#categoriesSection.is-opening .cat-grade-badge {
    animation: badgeFadeIn 0.35s ease both;
}
@keyframes badgeFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    #categoriesSection.is-opening .cat-grade-badge {
        animation: none;
    }
}
.cat-content {
    padding: 15px 10px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.cat-content h3 {
    color: #311b5e;
    font-size: 16px;
    font-weight: bold;
    transition: color 0.3s ease;
}
.category-card:hover .cat-content h3 {
    color: #5a2e98;
}
.cat-content p {
    font-size: 12px;
    color: #777;
    line-height: 1.5;
}

/* ⭐ فیکس حالت شب: کارت‌های «فیزیک دهم/یازدهم/دوازدهم» و کارت‌های دسته‌بندی
   (جزوه، فیلم، آزمایشگاه، کلاس، سوال تستی/تشریحی) و تیترِ بالای این بخش،
   قبلاً پس‌زمینه و رنگِ متن‌شون همیشه ثابت (سفید/بنفشِ تیره) بود و توی
   حالتِ شب همون‌جوری روشن و کم‌کنتراست می‌موند. */
body.dark-mode .section-title {
    color: var(--text-main);
}
body.dark-mode .grade-card {
    background-color: var(--bg-light);
    border-color: rgba(255, 255, 255, 0.08);
}
body.dark-mode .card-content h3 {
    color: var(--text-main);
}
body.dark-mode .card-content p {
    color: var(--text-muted);
}
body.dark-mode .category-card {
    background-color: var(--bg-light);
}
body.dark-mode .cat-content h3 {
    color: var(--text-main);
}
body.dark-mode .category-card:hover .cat-content h3 {
    color: var(--active-grade-color, #ffb703);
}
body.dark-mode .cat-content p {
    color: var(--text-muted);
}
body.dark-mode .categories-connector {
    background: color-mix(in srgb, var(--active-grade-color, #ffb703) 15%, var(--bg-light));
    color: var(--text-main);
}

/* ⭐ فیکس حالت شب: کارت‌های داخلِ محتوا (جزوه، کلاس، آزمایشگاه و ...) که تو
   content.js با استایلِ اینلاین (background:#fff، رنگِ متنِ هاردکد) ساخته
   می‌شن؛ چون اینلاین‌ان با !important رو دستشون می‌زنیم تا توی شب هم عوض بشن */
body.dark-mode .content-card {
    background: var(--bg-light) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}
body.dark-mode .content-card h3 {
    color: var(--text-main) !important;
}
body.dark-mode .content-card p {
    color: var(--text-muted) !important;
}

@media screen and (max-width: 768px) {
    .categories-container {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media screen and (max-width: 480px) {
    .categories-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        padding: 0 12px;
    }
    .category-card {
        max-width: none;
    }
    .cat-image-wrapper {
        height: 90px;
    }
    .cat-content {
        padding: 10px 8px;
        gap: 4px;
    }
    .cat-content h3 {
        font-size: 13px;
    }
    .cat-content p {
        font-size: 10.5px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .grade-quick-switch {
        padding: 0 12px;
        gap: 8px;
    }
    .grade-quick-switch .gqs-option {
        flex: 1 1 calc(50% - 8px);
        justify-content: center;
        padding: 9px 10px;
        font-size: 12.5px;
    }
}

/* ===== categories-landscape-mobile.css =====
   کارت‌های دسته‌بندی (جزوه/فیلم/آزمایشگاه/کلاس/تشریحی/تستی) تو حالتِ افقیِ
   گوشی: به‌جای گریدِ ۳ ستونه با عکسِ ۱۴۰ پیکسلی (که می‌شد ۲ ردیفِ بلند و کلی
   اسکرول)، هر ۶ کارت رو تو یه ردیفِ واحد و فشرده کنارِ هم می‌چینیم؛ فقط
   آیکون/عکسِ کوچیک + عنوان، بدونِ توضیحِ اضافه، برای این‌که تو ارتفاعِ کمِ
   landscape جا بشه و همچنان شیک و خوانا بمونه. */
@media screen and (orientation: landscape) and (max-height: 500px) {
    .categories-section {
        padding: 0 14px;
    }
    .categories-connector {
        padding: 6px 16px;
        margin: 0 auto 10px;
        font-size: 11.5px;
        gap: 6px;
    }
    .connector-dot {
        width: 7px;
        height: 7px;
    }
    .grade-quick-switch {
        gap: 6px;
        margin: 0 auto 12px;
    }
    .grade-quick-switch .gqs-option {
        padding: 5px 12px;
        font-size: 11px;
        gap: 5px;
    }
    .grade-quick-switch .gqs-radio {
        width: 12px;
        height: 12px;
    }
    .categories-container {
        grid-template-columns: repeat(6, 1fr);
        gap: 8px;
        padding: 0;
        margin: 0 auto 20px;
        justify-items: stretch;
    }
    .category-card {
        max-width: none;
        border-radius: 12px;
        border-top-width: 3px;
    }
    .category-card:hover {
        transform: translateY(-3px);
    }
    .cat-image-wrapper {
        height: 52px;
    }
    .cat-grade-badge {
        top: 4px;
        left: 4px;
    }
    .grade-badge-circle-base {
        width: 20px;
        height: 20px;
        font-size: 9px;
        letter-spacing: 0;
        box-shadow:
            0 2px 5px rgba(0, 0, 0, 0.3),
            0 0 0 2px rgba(255, 255, 255, 0.85);
    }
    .cat-content {
        padding: 6px 4px;
        gap: 0;
    }
    .cat-content h3 {
        font-size: 10px;
        line-height: 1.25;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .cat-content p {
        display: none;
    }
}

/* ===== videos.css ===== */
.videos-section {
    max-width: 1200px;
    margin: 0 auto 60px;
    padding: 0 40px;
    text-align: center;
}
.scroll-wrapper {
    width: 100%;
    overflow-x: auto;
    padding: 20px 0;
}
.movies-grid {
    display: flex;
    justify-content: center;
    gap: 20px;
    min-width: fit-content;
    margin: 0 auto;
}
.video-card {
    width: 320px;
    flex-shrink: 0;
    background: #fff;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(49, 27, 94, 0.05);
    border: 1px solid var(--bg-light);
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
    position: relative;
}
.video-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(49, 27, 94, 0.1);
}
.video-thumbnail {
    position: relative;
}
.video-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.video-thumbnail::after,
.video-thumbnail::before,
.video-card::after,
.video-card::before {
    display: none !important;
}
.play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background: rgba(0, 0, 0, 0.4);
    border: 2px solid rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 20px;
    backdrop-filter: blur(4px);
    pointer-events: none;
    transition: all 0.3s ease;
    padding-left: 4px;
}
.play-symbol {
    display: block;
    margin-top: 2px;
    margin-left: 2px;
}
.video-card:hover .play-icon {
    transform: translate(-50%, -50%) scale(1.1);
    background: rgba(255, 183, 3, 0.9);
    border-color: transparent;
}
.video-duration {
    position: absolute;
    bottom: 10px;
    left: 10px;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    font-family: "Vazirmatn", sans-serif !important;
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
    backdrop-filter: blur(4px);
    z-index: 5;
    letter-spacing: 0.5px;
    pointer-events: none;
}
.video-info {
    padding: 15px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    text-align: center;
}
.video-info h3 {
    color: var(--primary);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.2px;
    margin-bottom: 10px;
    position: relative;
    padding-bottom: 10px;
}
.video-info h3::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 34px;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, #ffb703, #fb8500);
}
/* ⭐ فیکس حالت شب: کارت‌های «نمونه فیلم‌های تدریس» و «فیلم‌های مشاوره»
   (هر دو از همین کلاسِ video-card ساخته می‌شن) پس‌زمینه‌شون همیشه سفید
   بود و تیترشون همیشه بنفشِ تیره؛ توی شب هم‌رنگِ صفحه/کم‌کنتراست می‌شد */
/* ⭐ فیکس حالت شب: مودالِ «تولید آزمون اختصاصی» و «کارنامه آزمون‌های من»
   (.exam-overlay/.exam-modal تو Exam_generator.js) قبلاً هیچ حالتِ شبی
   نداشت و همیشه روشن می‌موند، چون متغیرهای --exam-* فقط رو :root (با
   مقادیرِ روشن) تعریف شده بودن. چون این متغیرها ارث‌بری می‌شن، کافیه رو
   خودِ overlay بازنویسی‌شون کنیم تا همه‌ی بچه‌هاش (کارت‌های نوع آزمون،
   فصل‌ها، دکمه‌ها و ...) خودکار تیره بشن - دیگه لازم نیست تک‌تک عوض بشن. */
body.dark-mode .exam-overlay {
    --exam-bg: #171923;
    --exam-bg-soft: #10121a;
    --exam-border: #2b2e3d;
    --exam-text: #eef0fa;
    --exam-text-soft: #9aa0bb;
}
/* چند رنگِ هاردکد که به متغیرهای بالا وابسته نبودن و توی شب هنوز روشن/کم‌کنتراست می‌موندن */
body.dark-mode .exam-choice-card:hover {
    border-color: #4b4f8f;
}
body.dark-mode .exam-choice-card.selected {
    background: rgba(129, 140, 248, 0.18);
    color: #c7c9ff;
}
body.dark-mode .exam-btn-primary:disabled {
    background: #33345a;
    color: #8a8cb8;
}
body.dark-mode .exam-chapter-badge {
    background: var(--exam-bg);
}
body.dark-mode .myexams-choice-card {
    background: linear-gradient(180deg, var(--exam-bg) 0%, var(--exam-bg-soft) 100%);
}
body.dark-mode .exam-error-box {
    background: rgba(220, 38, 38, 0.15);
    border-color: rgba(220, 38, 38, 0.4);
}

body.dark-mode .video-card {
    background: var(--bg-light);
    border-color: rgba(255, 255, 255, 0.08);
}
body.dark-mode .video-info h3 {
    color: var(--text-main);
}
body.dark-mode .view-more {
    background: var(--bg-light);
}
.video-description {
    font-size: 13.5px;
    font-weight: 400;
    color: var(--text-muted);
    margin: 5px 0 0 0;
    line-height: 1.75;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ============================================================
   🎨 طراحیِ جذاب‌ترِ عنوان و توضیحِ کارت‌های محتوا
   (آزمایش‌ها / جزوه‌ها / همه) - این کارت‌ها (content-card و lab-card
   در content.js) قبلاً هیچ استایلِ پایه‌ای تو CSS نداشتن و کاملاً با
   استایلِ این‌لاینِ ساده رندر می‌شدن. الان علاوه بر فونتِ درست‌شده
   (بالاتر، خطِ ۴۰۸)، یک هاورِ نرم + خطِ تزئینیِ طلایی زیرِ عنوان،
   هم‌راستا با ظاهرِ کارت‌های فیلم (video-card) اضافه شده تا کل سایت
   یکدست و شکیل‌تر به نظر برسه. */
.content-card,
.lab-card {
    transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 0.35s ease !important;
}
.content-card:hover,
.lab-card:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 18px 34px rgba(49, 27, 94, 0.16) !important;
}
.content-card .cc-thumb img,
.lab-card .lab-thumb img {
    transition: transform 0.5s ease;
}
.content-card:hover .cc-thumb img,
.lab-card:hover .lab-thumb img {
    transform: scale(1.06);
}
.cc-title,
.lab-title {
    font-weight: 700;
    font-size: 17px;
    letter-spacing: -0.2px;
    line-height: 1.5;
    margin: 12px 0 10px;
    position: relative;
    padding-bottom: 10px;
}
.cc-title::after,
.lab-title::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 34px;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, #ffb703, #fb8500);
}
.cc-desc,
.lab-desc {
    font-weight: 400;
    font-size: 13.5px;
    color: #746c85;
    line-height: 1.75;
    margin-bottom: 14px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 47px;
}
.delete-btn {
    position: absolute;
    top: 10px;
    left: 10px;
    background: rgba(231, 76, 60, 0.9);
    color: white;
    border: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s ease;
}
.delete-btn:hover {
    background: #c0392b;
    transform: scale(1.1);
}
.view-more {
    background: #f8f9fa;
    border: 2px dashed #3498db;
    justify-content: center;
    align-items: center;
}
.view-more-content {
    color: #3498db;
    text-align: center;
}
.view-more-content span {
    font-size: 40px;
    display: block;
    margin-bottom: 10px;
}
.highlight-effect {
    border: 5px solid #00d166 !important;
    box-shadow: 0 0 25px #00d166 !important;
    transform: scale(1.02);
    transition: all 0.5s ease;
    z-index: 999 !important;
}
#player {
    aspect-ratio: 16 / 9;
    width: 100%;
}
.close-btn {
    position: absolute;
    top: -15px;
    left: -15px;
    background: #fff;
    color: #333;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex !important;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    cursor: pointer;
    z-index: 10000;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    border: 1px solid #ddd;
    transition: all 0.3s ease;
}
.close-btn:hover {
    background: #e74c3c;
    color: #fff;
    transform: rotate(90deg) scale(1.1);
}
@media screen and (max-width: 900px) {
    .movies-grid {
        justify-content: flex-start;
    }
    .movies-grid:has(> .video-card:only-child) {
        justify-content: center;
    }
}
@media screen and (max-width: 768px) {
    .videos-section {
        padding: 0 20px;
    }
    .video-card {
        width: 260px;
    }
    .video-thumbnail {
        height: 150px;
    }
    .video-info h3 {
        font-size: 16px;
    }
}
@media screen and (max-width: 360px) {
    .video-card {
        width: 240px;
    }
    .video-thumbnail {
        height: 135px;
    }
}
.edit-btn{
  background: linear-gradient(135deg, #f39c12, #e67e22);
  color: #fff;
  border: none;
  border-radius: 8px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 3px 8px rgba(243,156,18,0.45);
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.edit-btn i{
  transition: transform .25s ease;
}
.edit-btn:hover{
  background: linear-gradient(135deg, #ffb703, #f39c12);
  transform: translateY(-4px) scale(1.12);
  box-shadow: 0 8px 18px rgba(243,156,18,0.6);
}
.edit-btn:hover i{
  transform: rotate(-18deg) scale(1.1);
}
.edit-btn:active{
  transform: translateY(-1px) scale(0.95);
  box-shadow: 0 3px 8px rgba(243,156,18,0.4);
}
.video-card.view-more {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  background: linear-gradient(135deg, rgba(255, 183, 3, 0.1), rgba(15, 52, 96, 0.35));
  border: 2px dashed rgba(255, 183, 3, 0.5);
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.25s ease;
}
.video-card.view-more:hover {
  background: linear-gradient(135deg, #ffb703, #fb8500);
  border-style: solid;
  transform: translateY(-4px);
  box-shadow: 0 10px 25px rgba(255, 183, 3, 0.35);
}
.video-card.view-more .view-more-content {
  text-align: center;
  padding: 20px;
}
.video-card.view-more .vm-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: rgba(255, 183, 3, 0.15);
  color: #ffb703;
  font-size: 22px;
  margin-bottom: 10px;
  transition: all 0.25s ease;
}
.video-card.view-more:hover .vm-icon {
  background: rgba(255, 255, 255, 0.25);
  color: #241442;
  transform: scale(1.12) rotate(90deg);
}
.video-card.view-more .vm-title {
  color: #fff;
  font-weight: bold;
  font-size: 14px;
  margin: 0;
}
.video-card.view-more:hover .vm-title {
  color: #241442;
}
.video-card.view-more .vm-count {
  color: #ffb703;
  font-size: 12px;
  margin-top: 4px;
}
.video-card.view-more:hover .vm-count {
  color: #241442;
}
#videoModal #fullListSection {
  max-height: 80vh;
  overflow-y: auto;
  padding-left: 6px;
}
#videoModal .full-video-flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
}
.grade-filter-tabs {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 15px 0 25px 0;
}
.grade-tab-btn {
  padding: 8px 20px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 183, 3, 0.3);
  color: #ccc;
  border-radius: 50px;
  font-size: 13px;
  font-weight: bold;
  cursor: pointer;
  font-family: "Vazirmatn", Tahoma, Arial, sans-serif;
  transition: all 0.2s ease;
}
.grade-tab-btn:hover {
  border-color: #ffb703;
  color: #ffb703;
}
.grade-tab-btn.active {
  background: linear-gradient(135deg, #ffb703, #fb8500);
  color: #241442;
  border-color: transparent;
  box-shadow: 0 4px 14px rgba(255, 183, 3, 0.35);
}
#videoModal {
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  background: rgba(5, 3, 10, 0.78) !important;
}
#videoModal .modal-content {
  width: 96vw !important;
  max-width: 1300px !important;
  max-height: 94vh !important;
}
#videoModal #fullListSection {
  max-height: 85vh;
  overflow-y: auto;
  padding-left: 6px;
}

/* ===== login.css ===== */
.modal-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: radial-gradient(circle at 30% 20%, rgba(90, 46, 152, 0.55), rgba(20, 10, 40, 0.75) 70%);
    backdrop-filter: blur(8px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}
.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}
.modal-box {
    background: #ffffff;
    width: 90%;
    max-width: 400px;
    padding: 40px 30px 35px;
    border-radius: 28px;
    box-shadow:
        0 25px 60px rgba(49, 27, 94, 0.35),
        0 0 0 1px rgba(255, 255, 255, 0.6) inset;
    position: relative;
    text-align: center;
    overflow: hidden;
    isolation: isolate;
    transform: translateY(30px) scale(0.95);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.modal-box::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 5px;
    background: linear-gradient(90deg, #5a2e98, #ffb703, #fb8500, #5a2e98);
    background-size: 300% 100%;
    animation: authBarShift 6s linear infinite;
}
.modal-box::after {
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    background: radial-gradient(circle, rgba(255, 183, 3, 0.18), transparent 70%);
    top: -90px;
    left: -80px;
    z-index: -1;
    pointer-events: none;
}
@keyframes authBarShift {
    0% { background-position: 0% 50%; }
    100% { background-position: 300% 50%; }
}
.modal-overlay.active .modal-box {
    transform: translateY(0) scale(1);
}
.close-btn {
    position: absolute;
    top: 15px; left: 20px;
    font-size: 28px;
    color: #999;
    cursor: pointer;
    transition: color 0.3s ease;
}
.close-btn:hover {
    color: #ef233c;
}
.modal-box h2 {
    background: linear-gradient(135deg, #5a2e98, #311b5e 45%, #fb8500);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-size: 25px;
    font-weight: 800;
    margin-bottom: 5px;
}
.modal-subtitle {
    font-size: 13px;
    color: #8a8a9a;
    margin-bottom: 26px;
}
.input-group {
    text-align: right;
    margin-bottom: 15px;
}
.input-group label {
    display: block;
    font-size: 13px;
    color: #311b5e;
    font-weight: bold;
    margin-bottom: 8px;
    padding-right: 5px;
}
.input-group input {
    width: 100%;
    padding: 13px 16px;
    border: 1.5px solid #ece3fb;
    border-radius: 14px;
    font-size: 16px;
    outline: none;
    background-color: #faf9ff;
    transition: all 0.25s ease;
}
.input-group input:hover {
    border-color: #d9c7f5;
}
.input-group input:focus {
    border-color: #ffb703;
    box-shadow: 0 0 0 4px rgba(255, 183, 3, 0.16);
    background-color: #ffffff;
}
.username-field-wrap {
    position: relative;
}
.username-field-wrap input {
    padding-left: 40px !important;
}
.username-status-icon {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    pointer-events: none;
}
.username-status-icon.is-visible {
    display: flex;
}
.username-status-icon.status-checking {
    color: #b9a7dd;
    animation: usernameSpin 0.8s linear infinite;
}
@keyframes usernameSpin {
    from { transform: translateY(-50%) rotate(0deg); }
    to   { transform: translateY(-50%) rotate(360deg); }
}
.username-status-icon.status-valid {
    color: #17a673;
}
.username-status-icon.status-invalid {
    color: #e74c3c;
}
input.username-checking {
    border-color: #d9c7f5 !important;
}
input.username-valid {
    border-color: #17a673 !important;
    background-color: #f2fbf7 !important;
    box-shadow: 0 0 0 4px rgba(23, 166, 115, 0.12);
}
input.username-invalid {
    border-color: #e74c3c !important;
    background-color: #fdf3f2 !important;
    box-shadow: 0 0 0 4px rgba(231, 76, 60, 0.12);
}
.username-status-text {
    font-size: 12px;
    margin: 6px 2px 0;
    display: none;
    text-align: right;
}
.username-status-text.status-valid {
    color: #17a673;
    display: block;
}
.username-status-text.status-invalid {
    color: #e74c3c;
    display: block;
}
.username-status-text.status-checking {
    color: #9a8bc2;
    display: block;
}
.modal-actions {
    text-align: right;
    margin-bottom: 25px;
}
.forgot-pass {
    font-size: 12px;
    color: #5a2e98;
    text-decoration: none;
    transition: color 0.3s ease;
}
.forgot-pass:hover {
    color: #ffb703;
}
.modal-link-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12.5px;
    font-weight: bold;
    text-decoration: none;
    border: 1.5px solid transparent;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: pointer;
}
.modal-link-chip i {
    font-size: 11px;
}
.modal-link-chip--accent {
    color: #fb8500;
    background: linear-gradient(135deg, rgba(255, 183, 3, 0.14), rgba(251, 133, 0, 0.14));
    border-color: rgba(255, 183, 3, 0.45);
}
.modal-link-chip--accent:hover {
    background: linear-gradient(135deg, #ffb703, #fb8500);
    color: #241442;
    border-color: transparent;
    box-shadow: 0 4px 14px rgba(255, 183, 3, 0.5);
    transform: translateY(-2px) scale(1.05);
}
.modal-link-chip--muted {
    color: #5a2e98;
    background: rgba(90, 46, 152, 0.08);
    border-color: rgba(90, 46, 152, 0.25);
}
.modal-link-chip--muted:hover {
    background: rgba(90, 46, 152, 0.16);
    border-color: rgba(90, 46, 152, 0.4);
    transform: translateY(-2px) scale(1.05);
}
.modal-link-chip:active {
    transform: translateY(0) scale(0.96);
}
.modal-link-chip-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
}
.submit-btn {
    width: 100%;
    background: linear-gradient(135deg, #ffb703, #fb8500);
    color: #241442;
    padding: 13px;
    border: none;
    border-radius: 14px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    box-shadow: 0 8px 22px rgba(255, 183, 3, 0.4);
}
.submit-btn::before {
    content: "";
    position: absolute;
    top: 0;
    right: -60%;
    width: 40%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.65), transparent);
    transform: skewX(-20deg);
    transition: right 0.6s ease;
    z-index: 1;
}
.submit-btn:hover::before {
    right: 130%;
}
.submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(255, 183, 3, 0.5);
}
.submit-btn:active {
    transform: translateY(0) scale(0.98);
}
.gender-select {
    width: 100%;
    padding: 13px 16px;
    border-radius: 14px;
    border: 1.5px solid #ece3fb;
    background: #faf9ff
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1L7 7L13 1' stroke='%235a2e98' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
        no-repeat left 16px center;
    cursor: pointer;
    text-align: center;
    font-size: 16px;
    color: #311b5e;
    font-weight: 600;
    appearance: none;
    -webkit-appearance: none;
    transition: all 0.25s ease;
}
.gender-select:hover {
    border-color: #d9c7f5;
}
.gender-select:focus {
    outline: none;
    border-color: #ffb703;
    box-shadow: 0 0 0 4px rgba(255, 183, 3, 0.16);
}
.signup-avatar-preview-wrap {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 0 auto 15px;
    border-radius: 50%;
}
.signup-avatar-preview-wrap::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(from 0deg, #5a2e98, #ffb703, #fb8500, #5a2e98);
    animation: authRingSpin 5s linear infinite;
}
@keyframes authRingSpin {
    to { transform: rotate(360deg); }
}
.signup-avatar-preview {
    position: absolute;
    inset: 4px;
    width: calc(100% - 8px);
    height: calc(100% - 8px);
    border-radius: 50%;
    border: 3px solid #fff;
    display: block;
    object-fit: cover;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(49, 27, 94, 0.25);
    transition: transform 0.25s ease;
}
.signup-avatar-preview:hover {
    transform: scale(1.05);
}
.signup-link {
    margin-top: 20px;
    font-size: 13px;
    color: #666;
}
.signup-link a {
    color: #311b5e;
    font-weight: bold;
    text-decoration: none;
    margin-right: 5px;
    transition: color 0.3s ease;
}
.signup-link a:hover {
    color: #ffb703;
}
.user-profile-wrapper {
    display: flex;
    align-items: center;
    height: 100%;
    width: 100%;
}
.user-profile-wrapper .username-text {
    font-weight: bold;
    color: #241442;
    flex-grow: 1;
    padding: 0 14px;
    margin-left: 20px;
    white-space: nowrap;
}
.user-profile-wrapper .profile-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid #3498db;
    object-fit: cover;
    flex-shrink: 0;
    box-sizing: border-box;
    margin: -20px;
    display: block;
}
#userProfileBtn {
    position: relative;
    background: transparent;
    border: none;
    padding: 0;
    height: 40px;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}
.user-profile-pill {
    display: flex;
    align-items: center;
    height: 40px;
    background: linear-gradient(135deg, #ffb703, #fb8500);
    border-radius: 50px;
    overflow: hidden;
    box-sizing: border-box;
    box-shadow: 0 0 10px rgba(255, 183, 3, 0.5);
    animation: guestPulse 2s ease-in-out infinite;
}
.user-profile-pill .username-text {
    font-weight: bold;
    color: #241442;
    flex-grow: 1;
    padding: 0 14px;
    white-space: nowrap;
}
.user-profile-pill .profile-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid #3498db;
    object-fit: cover;
    flex-shrink: 0;
    box-sizing: border-box;
    margin: 0;
    display: block;
}
.send-btn-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ===== mobile-fixes.css ===== */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}
html {
    background-color: #311b5e;
}
.site-topbar::before {
    content: "";
    position: absolute;
    top: -150px;
    left: 0;
    right: 0;
    height: 150px;
    background-color: #311b5e;
}
.site-topbar {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.mobile-search-toggle,
.mobile-search-close {
    display: none;
}
#overlay {
    z-index: 100000;
}
.sidebar {
    z-index: 100001;
}
@media screen and (max-width: 768px), screen and (orientation: landscape) and (max-height: 500px) {
    .main-header {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        padding: 12px 15px 10px;
        text-align: initial;
    }
    .header-right {
        order: 1;
        width: auto;
        display: flex;
    }
    .brand-section {
        gap: 8px;
    }
    .logo {
        width: 40px;
        height: 40px;
    }
    .site-info h1 {
        font-size: 17px;
        margin-bottom: 0;
    }
    .site-info p {
        display: none;
    }
    .action-section {
        order: 2;
        width: auto;
        margin: 0;
        gap: 10px;
        align-items: center;
    }
    .search-box {
        display: none;
    }
    .mobile-search-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        border: 1px solid rgba(255, 255, 255, 0.14);
        background: rgba(255, 255, 255, 0.07);
        color: #ffd700;
        font-size: 14px;
        padding: 0;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    .mobile-search-close {
        display: none;
    }
    .search-box.mobile-search-active {
        display: flex;
        align-items: center;
        gap: 8px;
        position: fixed !important;
        top: 70px;
        left: 12px;
        right: 12px;
        width: auto;
        z-index: 99999;
        background: linear-gradient(135deg, rgba(49, 27, 94, 0.98), rgba(36, 20, 66, 0.98));
        border: 1px solid rgba(255, 183, 3, 0.35);
        border-radius: 16px;
        padding: 10px 12px;
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
        opacity: 0;
        transform: translateY(-10px) scale(0.97);
        transition: opacity 0.25s ease, transform 0.25s ease;
    }
    .search-box.mobile-search-active.is-shown {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    .search-box.mobile-search-active input {
        flex: 1;
        width: auto !important;
    }
    .search-box.mobile-search-active input:focus {
        width: auto !important;
    }
    .search-box.mobile-search-active .mobile-search-close {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        border: none;
        background: rgba(255, 255, 255, 0.08);
        color: #e7defc;
        flex-shrink: 0;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    .search-box.mobile-search-active #searchResults {
        position: absolute;
        top: calc(100% + 8px);
        left: 0;
        right: 0;
        background: #2a1750;
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 12px;
        max-height: 50vh;
        overflow-y: auto;
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.35);
    }
    .search-box.mobile-search-active .result-item {
        color: #f1ecff;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }
    .search-box.mobile-search-active .result-item small {
        color: #c9b8f2;
    }
    .search-box.mobile-search-active .result-item:hover,
    .search-box.mobile-search-active .result-item:active {
        background: rgba(255, 183, 3, 0.18);
        color: #ffb703;
    }
    .search-box.mobile-search-active .result-item:hover small,
    .search-box.mobile-search-active .result-item:active small {
        color: #ffb703;
    }
    .search-box.mobile-search-active .hint {
        color: #c9b8f2 !important;
    }
    .login-btn {
        white-space: nowrap;
        padding: 8px 16px !important;
        font-size: 13px !important;
        line-height: 1;
    }
    #userProfileBtn {
        padding: 0 10px 0 0 !important;
        height: 32px !important;
        max-width: 130px;
    }
    .user-profile-wrapper .username-text {
        margin-left: 6px;
        padding: 0 4px;
        font-size: 12px;
        max-width: 60px;
        overflow: hidden;
        text-overflow: ellipsis;
        flex-grow: 0;
    }
    .user-profile-wrapper .profile-avatar {
        width: 32px;
        height: 32px;
        margin: 0;
    }
    .hamburger-menu {
        margin: 0;
        width: 34px;
        height: 34px;
    }
    .main-nav {
        order: 3;
        flex-basis: 100%;
        width: 100%;
        margin: 16px 0 0;
        overflow: visible;
        position: relative;
    }
    .main-nav ul {
        flex-wrap: nowrap !important;
        justify-content: flex-start;
        gap: 10px;
        overflow-x: auto;
        overflow-y: hidden;
        touch-action: pan-x;
        overscroll-behavior-y: contain;
        -webkit-overflow-scrolling: touch;
        padding: 6px 4px 12px;
        margin: 0;
        scrollbar-width: none;
        -webkit-mask-image: linear-gradient(to right, transparent 0, #000 28px, #000 100%);
        mask-image: linear-gradient(to right, transparent 0, #000 28px, #000 100%);
    }
    .main-nav ul::-webkit-scrollbar {
        display: none;
    }
    .main-nav ul li {
        flex-shrink: 0;
    }
    .main-nav ul li a {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        white-space: nowrap;
        font-size: 13.5px;
        font-weight: 600;
        color: #e7defc;
        padding: 9px 18px;
        border-radius: 50px;
        background: rgba(255, 255, 255, 0.07);
        border: 1px solid rgba(255, 255, 255, 0.12);
        opacity: 1;
        -webkit-tap-highlight-color: transparent;
        transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    }
    @keyframes navScrollHint {
        0%, 15% { transform: translateX(0); }
        50% { transform: translateX(-22px); }
        85%, 100% { transform: translateX(0); }
    }
    .main-nav ul.hint-scroll {
        animation: navScrollHint 1.1s ease-in-out 500ms 1;
    }
    @media (prefers-reduced-motion: reduce) {
        .main-nav ul.hint-scroll {
            animation: none;
        }
    }
    .main-nav ul li a::after {
        display: none !important;
    }
    .main-nav ul li a:active,
    .main-nav ul li a.nav-active {
        background: rgba(255, 183, 3, 0.16);
        border-color: rgba(255, 183, 3, 0.55);
        color: #ffb703;
    }
    .main-nav ul li a.nav-home {
        background: rgba(255, 183, 3, 0.14);
        border-color: rgba(255, 183, 3, 0.4);
        color: #ffb703;
    }
    .dropdown:hover .dropdown-menu {
        opacity: 0 !important;
        visibility: hidden !important;
    }
    .dropdown:hover > a svg {
        transform: none !important;
    }
    .dropdown-menu.dropdown-menu-accordion {
        position: fixed;
        display: flex;
        flex-direction: column;
        gap: 2px;
        width: auto;
        min-width: 168px;
        max-width: calc(100vw - 64px);
        left: var(--dd-center, 50%);
        top: var(--dd-top, 60px);
        right: auto;
        margin: 0;
        max-height: none;
        overflow: visible;
        opacity: 0;
        visibility: hidden;
        transform: translateX(-50%) translateY(-10px) scale(0.92);
        transform-origin: top center;
        border-radius: 16px;
        background: linear-gradient(165deg, rgba(70, 38, 122, 0.98), rgba(40, 19, 76, 0.98));
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        border: 1px solid rgba(255, 183, 3, 0.25);
        box-shadow: 0 14px 34px rgba(20, 8, 40, 0.4);
        padding: 8px 6px;
        z-index: 100000;
        pointer-events: none;
        transition: opacity 0.2s ease, transform 0.32s cubic-bezier(0.175, 0.885, 0.32, 1.275), visibility 0.2s ease;
    }
    .dropdown-menu.dropdown-menu-accordion::before {
        content: "";
        position: absolute;
        top: -6px;
        left: calc(var(--dd-center, 50%) - 6.5px);
        width: 13px;
        height: 13px;
        background: rgb(58, 31, 104);
        border-top: 1px solid rgba(255, 183, 3, 0.25);
        border-right: 1px solid rgba(255, 183, 3, 0.25);
        transform: rotate(-45deg);
        border-radius: 3px 0 0 0;
    }
    .dropdown-menu.dropdown-menu-accordion.force-open {
        opacity: 1;
        visibility: visible;
        transform: translateX(-50%) translateY(0) scale(1);
        pointer-events: auto;
    }
    .dropdown-menu.dropdown-menu-accordion li {
        width: 100%;
        opacity: 0;
        transform: translateY(-6px);
        transition: opacity 0.22s ease, transform 0.22s ease;
    }
    .dropdown-menu.dropdown-menu-accordion.force-open li:nth-child(1) { transition-delay: .04s; }
    .dropdown-menu.dropdown-menu-accordion.force-open li:nth-child(2) { transition-delay: .09s; }
    .dropdown-menu.dropdown-menu-accordion.force-open li:nth-child(3) { transition-delay: .14s; }
    .dropdown-menu.dropdown-menu-accordion.force-open li:nth-child(4) { transition-delay: .19s; }
    .dropdown-menu.dropdown-menu-accordion.force-open li {
        opacity: 1;
        transform: translateY(0);
    }
    .dropdown-menu.dropdown-menu-accordion li a {
        display: flex !important;
        align-items: center;
        gap: 11px;
        white-space: nowrap;
        padding: 12px 14px !important;
        border-radius: 10px;
        background: transparent;
        border: none;
        color: #ecE4fc !important;
        font-size: 14px !important;
        font-weight: 700;
        text-decoration: none !important;
        transition: background .18s ease, color .18s ease, padding .18s ease !important;
    }
    .dropdown-menu.dropdown-menu-accordion li:not(:last-child) a {
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }
    .dropdown-menu.dropdown-menu-accordion li a::before {
        content: "";
        flex: none;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: currentColor;
        box-shadow: 0 0 8px currentColor;
    }
    .dropdown-menu.dropdown-menu-accordion li:nth-child(1) a::before { color: #3b82f6; }
    .dropdown-menu.dropdown-menu-accordion li:nth-child(2) a::before { color: #10b981; }
    .dropdown-menu.dropdown-menu-accordion li:nth-child(3) a::before { color: #f97316; }
    .dropdown-menu.dropdown-menu-accordion li a:active {
        background: rgba(255, 183, 3, 0.14) !important;
        color: #ffb703 !important;
        padding-right: 18px !important;
    }
    .dropdown.open > a svg {
        transform: rotate(180deg) !important;
    }
    .dropdown > a svg {
        transition: transform 0.25s ease;
    }
}

/* ===== header-landscape-mobile.css =====
   وقتی گوشی افقی (landscape) می‌شه، ارتفاع صفحه خیلی کمه (معمولاً بین ۳۶۰
   تا ۴۳۰ پیکسل)؛ همون هدرِ فشرده‌ی موبایلِ عمودی هم اینجا زیادی جا می‌گیره
   و باعث می‌شه محتوا زیر هدر و نوار اطلاعیه له بشه. این بخش یه لایه‌ی
   فشرده‌تر روی همون حالتِ موبایل می‌ذاره: هدر تک‌ردیفه و کوتاه، لوگو و
   فونت‌ها کوچیک‌تر، نوار اطلاعیه نازک‌تر و ردیف منو جمع‌وجورتر. */
@media screen and (orientation: landscape) and (max-height: 500px) {
    .fl-announce-bar {
        height: 24px;
    }
    .fl-announce-icon {
        padding: 0 9px 0 7px;
    }
    .fl-announce-icon i {
        font-size: 12px;
    }
    .fl-announce-track {
        font-size: 11.5px;
    }
    .main-header {
        padding: 5px 14px 6px;
    }
    .header-right {
        gap: 6px;
    }
    .brand-section {
        gap: 6px;
    }
    .logo {
        width: 28px;
        height: 28px;
        border-width: 1px;
    }
    .site-info h1 {
        font-size: 13px;
        margin-bottom: 0;
    }
    .site-info p {
        display: none;
    }
    .action-section {
        gap: 6px;
    }
    .mobile-search-toggle {
        width: 26px;
        height: 26px;
        font-size: 11px;
    }
    .search-box.mobile-search-active {
        top: 50px;
    }
    .login-btn {
        padding: 5px 10px !important;
        font-size: 11px !important;
    }
    #userProfileBtn,
    .user-profile-pill,
    .user-profile-wrapper {
        height: 26px !important;
    }
    .user-profile-pill .username-text,
    .user-profile-wrapper .username-text {
        font-size: 11px;
        padding: 0 8px;
    }
    .user-profile-pill .profile-avatar,
    .user-profile-wrapper .profile-avatar {
        width: 22px;
        height: 22px;
    }
    .hamburger-menu {
        margin-left: 0;
    }
    .hamburger-menu svg {
        width: 16px;
        height: 16px;
    }
    .main-nav {
        margin-top: 4px !important;
    }
    .main-nav ul {
        padding: 2px 4px 5px !important;
        gap: 6px !important;
    }
    .main-nav ul li a {
        padding: 5px 12px !important;
        font-size: 12px !important;
    }
    .dropdown-menu.dropdown-menu-accordion {
        max-height: calc(100vh - 70px);
        overflow-y: auto;
    }
}

@media screen and (max-width: 480px) {
    .site-info h1 {
        font-size: 16px;
    }
    .main-nav ul {
        gap: 14px;
    }
    .main-nav ul li a {
        font-size: 13px;
    }
    .login-btn {
        padding: 7px 12px !important;
        font-size: 12px !important;
    }
}
@media screen and (max-width: 380px) {
    .sidebar {
        width: 82vw;
        left: -82vw;
    }
}
@media screen and (max-width: 600px) {
    div[style*=" width:400px"],
    div[style*=" width: 400px"],
    div[style*=" width:450px"],
    div[style*=" width: 450px"],
    div[style*=" width:500px"],
    div[style*=" width: 500px"],
    div[style*=" width:460px"],
    div[style*=" width: 460px"],
    form[style*=" width:400px"],
    form[style*=" width: 400px"],
    #signupForm,
    #avatarGrid {
        max-width: 92vw !important;
    }
}
@media screen and (max-width: 768px) {
    #admin-panel-view {
        padding: 12px !important;
    }
    #admin-panel-view .admin-toolbar-row {
        flex-direction: column;
        align-items: stretch !important;
        gap: 10px;
    }
    #admin-panel-view .admin-back-btn {
        align-self: flex-start;
        border-radius: 8px;
        background: #eee;
        border: none;
    }
    #admin-panel-view .admin-btn-group {
        width: 100%;
        justify-content: center;
        gap: 8px !important;
    }
    #admin-panel-view .admin-btn-group button {
        padding: 9px 14px !important;
        font-size: 13px !important;
        flex: 1 1 auto;
        justify-content: center !important;
    }
    #admin-panel-view h2 {
        font-size: 17px;
        margin: 14px 0 10px;
    }
    #admin-panel-view .admin-table-wrap {
        border-radius: 10px;
        border: 1px solid #eee;
        -webkit-overflow-scrolling: touch;
    }
    #admin-panel-view .admin-users-table {
        font-size: 10px !important;
        min-width: 640px;
    }
    #admin-panel-view .admin-users-table th,
    #admin-panel-view .admin-users-table td {
        padding: 6px 4px !important;
        white-space: nowrap;
    }
}
@media screen and (max-width: 480px) {
    #admin-panel-view .admin-btn-group button {
        font-size: 12px !important;
        padding: 8px 10px !important;
    }
}

/* ===== index-inline.css ===== */
      @keyframes accountBadgePulse {
        0%,
        100% {
          box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.55);
        }
        50% {
          box-shadow: 0 0 0 7px rgba(212, 175, 55, 0);
        }
      }
      #account-badge.is-not-vip #account-circle {
        animation: accountBadgePulse 1.8s ease-in-out infinite;
        cursor: pointer;
      }
      #account-badge.is-vip #account-circle {
        cursor: pointer;
      }
      #vip-status-tag {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
        gap: 5px;
        width: 211px;
        height: 24px;
        max-width: 100%;
        box-sizing: border-box;
        margin: 2px auto 10px;
        padding: 0 10px;
        border-radius: 999px;
        font-size: 0.65rem;
        font-weight: 700;
        letter-spacing: 0.2px;
        white-space: nowrap;
        cursor: pointer;
        transition: transform 0.15s ease, box-shadow 0.15s ease;
      }
      #vip-status-tag:hover {
        transform: translateY(-1px);
      }
      #vip-status-tag i,
      #vip-tag-text,
      #vip-tag-days-chip {
        display: inline-flex;
        align-items: center;
        line-height: 1;
      }
      #vip-tag-text,
      #vip-tag-days-num {
        position: relative;
        top: -0.45em;
      }
      #vip-tag-days-unit {
        position: relative;
        top: calc(-0.45em - 4.3px);
      }
      #vip-status-tag i {
        font-size: 0.65rem;
      }
      #vip-tag-text {
        font-size: 0.65rem;
      }
      #vip-status-tag.vip-tag--off {
        background: rgba(212, 175, 55, 0.1);
        border: 1px solid rgba(212, 175, 55, 0.5);
        color: #f0cf72;
        box-shadow: 0 0 10px rgba(212, 175, 55, 0.12);
      }
      #vip-status-tag.vip-tag--on {
        background: rgba(212, 175, 55, 0.1);
        border: 1px solid rgba(212, 175, 55, 0.5);
        color: #f0cf72;
        box-shadow: 0 0 10px rgba(212, 175, 55, 0.12);
      }
      #vip-tag-days-chip {
        display: none;
        gap: 3px;
        font-size: 0.65rem;
        font-weight: 800;
      }
      #vip-tag-days-chip b,
      #vip-tag-days-unit {
        display: inline-flex;
        align-items: center;
        line-height: 1;
        font-size: 0.65rem;
        color: #f0cf72;
      }
      #vip-tag-days-chip b {
        font-weight: 900;
        color: #ffe9a8;
      }
      #balance-container {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 6px;
        width: 100%;
        box-sizing: border-box;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 12px;
        padding: 10px 25px 10px 20px;
      }
      #balance-container .balance-top {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 8px;
        cursor: pointer;
      }
      #balance-container .balance-label {
        display: flex;
        align-items: center;
        gap: 6px;
        color: #cfcfcf;
        font-size: 0.8rem;
      }
      #balance-container .balance-label i {
        width: 20px;
        text-align: center;
      }
      #balance-container .balance-amount {
        display: flex;
        align-items: center;
        gap: 4px;
        color: #ffb703;
        font-weight: bold;
        font-size: 0.95rem;
      }
      #add-balance-btn {
        position: relative;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        flex-shrink: 0;
        box-sizing: border-box;
        padding: 0;
        border: none;
        border-radius: 50%;
        background: conic-gradient(from 210deg, #8a5a00, #ffb703 35%, #ffe9b0 55%, #ffb703 75%, #8a5a00);
        cursor: pointer;
        box-shadow: 0 0 10px rgba(255, 183, 3, 0.45);
        transition: transform 0.15s ease, box-shadow 0.15s ease;
        animation: addBalanceGlow 2.6s ease-in-out infinite;
      }
      #add-balance-btn:hover {
        transform: translateY(-1px) scale(1.05);
      }
      #add-balance-btn .add-balance-inner {
        width: calc(100% - 4px);
        height: calc(100% - 4px);
        border-radius: 50%;
        background: radial-gradient(circle at 50% 32%, #3d2168 0%, #221041 65%, #170a2c 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow:
          inset 0 2px 3px rgba(255, 255, 255, 0.08),
          inset 0 -4px 8px rgba(0, 0, 0, 0.55);
      }
      #add-balance-btn i {
        color: #ffe9b0;
        font-size: 0.85rem;
        text-shadow: 0 0 6px rgba(255, 183, 3, 0.6);
      }
      @keyframes addBalanceGlow {
        0%,
        100% {
          box-shadow: 0 0 8px rgba(255, 183, 3, 0.35);
        }
        50% {
          box-shadow: 0 0 16px rgba(255, 183, 3, 0.85);
        }
      }
      #add-balance-btn::after {
        content: "";
        position: absolute;
        top: 0;
        left: -60%;
        width: 40%;
        height: 100%;
        background: linear-gradient(
          120deg,
          rgba(255, 255, 255, 0) 0%,
          rgba(255, 255, 255, 0.85) 50%,
          rgba(255, 255, 255, 0) 100%
        );
        transform: skewX(-20deg);
        animation: addBalanceShine 2.6s ease-in-out infinite;
        pointer-events: none;
      }
      @keyframes addBalanceShine {
        0% {
          left: -60%;
        }
        55%,
        100% {
          left: 130%;
        }
      }
      #sidebar-username {
        font-size: 1.25rem;
        font-weight: 800;
        letter-spacing: 0.3px;
        margin-bottom: 8px;
        background: linear-gradient(135deg, #fff6da 0%, #ffd873 45%, #d4af37 85%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        -webkit-text-fill-color: transparent;
        text-shadow: 0 2px 14px rgba(212, 175, 55, 0.35);
      }
      /* حالتِ مهمان: به‌جای نام‌کاربریِ طلایی و درشت، یه برچسبِ کوچیک‌تر و آرام‌تر */
      #sidebar-username.sidebar-username--guest {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        font-size: 0.82rem;
        font-weight: 600;
        letter-spacing: 0.3px;
        background: linear-gradient(135deg, #e4d9ff 0%, #b9a6e8 55%, #8f7bc9 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        -webkit-text-fill-color: transparent;
        text-shadow: 0 1px 8px rgba(143, 123, 201, 0.3);
      }
      #sidebar-username.sidebar-username--guest i {
        font-size: 0.78rem;
        color: #b9a6e8;
        -webkit-text-fill-color: #b9a6e8;
      }
      #vipModal .vip-modal-card {
        position: relative;
        background: radial-gradient(circle at 50% -10%, #2c1a4e 0%, #150c26 55%, #0c0715 100%);
        padding: 34px 26px 26px;
        border-radius: 22px;
        text-align: center;
        width: 92%;
        max-width: 480px;
        border: 1px solid rgba(212, 175, 55, 0.35);
        color: white;
        box-shadow:
          0 25px 60px rgba(0, 0, 0, 0.6),
          0 0 40px rgba(124, 92, 255, 0.12),
          inset 0 1px 0 rgba(255, 255, 255, 0.04);
        overflow: hidden;
      }
      #vipModal .vip-modal-card::before {
        content: "";
        position: absolute;
        top: -60px;
        right: -40px;
        width: 220px;
        height: 220px;
        background: radial-gradient(circle, rgba(124, 92, 255, 0.25) 0%, rgba(124, 92, 255, 0) 70%);
        pointer-events: none;
      }
      #vipModal .vip-modal-card::after {
        content: "";
        position: absolute;
        bottom: -70px;
        left: -50px;
        width: 240px;
        height: 240px;
        background: radial-gradient(circle, rgba(255, 183, 3, 0.16) 0%, rgba(255, 183, 3, 0) 70%);
        pointer-events: none;
      }
      #vipModal .vip-modal-icon {
        position: relative;
        width: 54px;
        height: 54px;
        margin: 0 auto 14px;
        border-radius: 50%;
        background: conic-gradient(from 210deg, #8a5a00, #ffb703 35%, #ffe9b0 55%, #ffb703 75%, #8a5a00);
        display: flex;
        align-items: center;
        justify-content: center;
        animation: vipIconGlow 2.6s ease-in-out infinite;
      }
      #vipModal .vip-modal-icon-inner {
        width: calc(100% - 4px);
        height: calc(100% - 4px);
        border-radius: 50%;
        background: radial-gradient(circle at 50% 32%, #3d2168 0%, #221041 65%, #170a2c 100%);
        display: flex;
        align-items: center;
        justify-content: center;
      }
      #vipModal .vip-modal-icon-inner i {
        font-size: 1.3rem;
        color: #ffe9b0;
        text-shadow: 0 0 10px rgba(255, 183, 3, 0.7);
      }
      @keyframes vipIconGlow {
        0%,
        100% {
          box-shadow: 0 0 10px rgba(255, 183, 3, 0.35);
        }
        50% {
          box-shadow: 0 0 22px rgba(255, 183, 3, 0.8);
        }
      }
      #vipModal .vip-modal-title {
        position: relative;
        font-family: "Vazirmatn", "Tahoma", sans-serif;
        font-size: 1.35rem;
        font-weight: 800;
        margin-bottom: 6px;
        background: linear-gradient(135deg, #fff6da 0%, #ffd873 45%, #d4af37 85%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        -webkit-text-fill-color: transparent;
      }
      #vipModal .vip-modal-subtitle {
        position: relative;
        color: #b3a9c9;
        font-size: 0.85rem;
        margin-bottom: 26px;
      }
      #vipModal .vip-plans-row {
        position: relative;
        display: flex;
        justify-content: center;
        gap: 12px;
        flex-wrap: wrap;
      }
      #vipModal .vip-plan-card {
        position: relative;
        flex: 1 1 120px;
        max-width: 140px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        padding: 18px 8px 14px;
        border: none;
        border-radius: 16px;
        cursor: pointer;
        font-family: inherit;
        background: linear-gradient(160deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015));
        border: 1px solid rgba(212, 175, 55, 0.25);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
        transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
      }
      #vipModal .vip-plan-card:hover,
      #vipModal .vip-plan-card:focus-visible {
        transform: translateY(-5px);
        border-color: rgba(255, 183, 3, 0.75);
        box-shadow: 0 10px 24px rgba(255, 183, 3, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.08);
      }
      #vipModal .vip-plan-badge {
        position: absolute;
        top: -10px;
        left: 50%;
        transform: translateX(-50%);
        background: linear-gradient(135deg, #ffe9b0, #ffb703 60%, #d4af37);
        color: #241c05;
        font-size: 0.58rem;
        font-weight: 800;
        padding: 3px 9px;
        border-radius: 999px;
        white-space: nowrap;
        box-shadow: 0 2px 8px rgba(255, 183, 3, 0.5);
      }
      #vipModal .vip-orbit {
        position: relative;
        width: 62px;
        height: 62px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      #vipModal .vip-orbit-ring {
        position: absolute;
        border: 1px solid rgba(255, 183, 3, 0.35);
        border-radius: 50%;
      }
      #vipModal .vip-orbit-ring.r1 {
        width: 62px;
        height: 62px;
        animation: vipOrbitSpin 7s linear infinite;
      }
      #vipModal .vip-orbit-ring.r2 {
        width: 46px;
        height: 46px;
        animation: vipOrbitSpin 5s linear infinite reverse;
      }
      #vipModal .vip-orbit-ring.r3 {
        width: 30px;
        height: 30px;
        animation: vipOrbitSpin 3.4s linear infinite;
      }
      #vipModal .vip-orbit-ring::after {
        content: "";
        position: absolute;
        top: -2.5px;
        right: 50%;
        width: 5px;
        height: 5px;
        margin-right: -2.5px;
        border-radius: 50%;
        background: #ffe9b0;
        box-shadow: 0 0 6px 1.5px rgba(255, 183, 3, 0.85);
      }
      @keyframes vipOrbitSpin {
        from {
          transform: rotate(0deg);
        }
        to {
          transform: rotate(360deg);
        }
      }
      #vipModal .vip-orbit-core {
        position: relative;
        width: 26px;
        height: 26px;
        border-radius: 50%;
        background: conic-gradient(from 210deg, #8a5a00, #ffb703 35%, #ffe9b0 55%, #ffb703 75%, #8a5a00);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1;
      }
      #vipModal .vip-orbit-core i {
        font-size: 0.62rem;
        color: #3d1f00;
      }
      #vipModal .vip-plan-duration {
        font-family: "Orbitron", "Vazirmatn", sans-serif;
        font-size: 1.05rem;
        font-weight: 800;
        background: linear-gradient(180deg, #fff6da 0%, #ffb703 65%, #e08e00 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        -webkit-text-fill-color: transparent;
      }
      #vipModal .vip-plan-caption {
        font-size: 0.62rem;
        color: #9c93b0;
      }
      #vipModal .vip-modal-close {
        position: absolute;
        top: 14px;
        left: 14px;
        width: 28px;
        height: 28px;
        border-radius: 50%;
        border: 1px solid rgba(255, 255, 255, 0.15);
        background: rgba(255, 255, 255, 0.04);
        color: #b3a9c9;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.75rem;
        cursor: pointer;
        transition: 0.25s;
        z-index: 2;
      }
      #vipModal .vip-modal-close:hover {
        background: rgba(255, 183, 3, 0.15);
        border-color: rgba(255, 183, 3, 0.5);
        color: #ffe9b0;
      }
      @media (max-width: 380px) {
        #vipModal .vip-plan-card {
          max-width: 96px;
          padding: 14px 4px 10px;
        }
        #vipModal .vip-orbit {
          width: 52px;
          height: 52px;
        }
      }
      #balanceModal .fz-modal-card {
        position: relative;
        background: radial-gradient(circle at 50% -10%, #2c1a4e 0%, #150c26 55%, #0c0715 100%);
        padding: 34px 26px 26px;
        border-radius: 22px;
        text-align: center;
        width: 92%;
        max-width: 500px;
        border: 1px solid rgba(212, 175, 55, 0.35);
        color: white;
        box-shadow:
          0 25px 60px rgba(0, 0, 0, 0.6),
          0 0 40px rgba(124, 92, 255, 0.12),
          inset 0 1px 0 rgba(255, 255, 255, 0.04);
        overflow: hidden;
      }
      #balanceModal .fz-modal-card::before {
        content: "";
        position: absolute;
        top: -60px;
        right: -40px;
        width: 220px;
        height: 220px;
        background: radial-gradient(circle, rgba(124, 92, 255, 0.25) 0%, rgba(124, 92, 255, 0) 70%);
        pointer-events: none;
      }
      #balanceModal .fz-modal-card::after {
        content: "";
        position: absolute;
        bottom: -70px;
        left: -50px;
        width: 240px;
        height: 240px;
        background: radial-gradient(circle, rgba(255, 183, 3, 0.16) 0%, rgba(255, 183, 3, 0) 70%);
        pointer-events: none;
      }
      #balanceModal .fz-modal-icon {
        position: relative;
        width: 54px;
        height: 54px;
        margin: 0 auto 14px;
        border-radius: 50%;
        background: conic-gradient(from 210deg, #8a5a00, #ffb703 35%, #ffe9b0 55%, #ffb703 75%, #8a5a00);
        display: flex;
        align-items: center;
        justify-content: center;
        animation: vipIconGlow 2.6s ease-in-out infinite;
      }
      #balanceModal .fz-modal-icon-inner {
        width: calc(100% - 4px);
        height: calc(100% - 4px);
        border-radius: 50%;
        background: radial-gradient(circle at 50% 32%, #3d2168 0%, #221041 65%, #170a2c 100%);
        display: flex;
        align-items: center;
        justify-content: center;
      }
      #balanceModal .fz-modal-icon-inner i {
        font-size: 1.3rem;
        color: #ffe9b0;
        text-shadow: 0 0 10px rgba(255, 183, 3, 0.7);
      }
      #balanceModal .fz-modal-title {
        position: relative;
        font-family: "Vazirmatn", "Tahoma", sans-serif;
        font-size: 1.35rem;
        font-weight: 800;
        margin-bottom: 6px;
        background: linear-gradient(135deg, #fff6da 0%, #ffd873 45%, #d4af37 85%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        -webkit-text-fill-color: transparent;
      }
      #balanceModal .fz-modal-subtitle {
        position: relative;
        color: #b3a9c9;
        font-size: 0.85rem;
        margin-bottom: 26px;
      }
      #balanceModal .fz-plans-row {
        position: relative;
        display: flex;
        justify-content: center;
        gap: 12px;
        flex-wrap: wrap;
      }
      #balanceModal .fz-package-card {
        position: relative;
        flex: 1 1 130px;
        max-width: 150px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        padding: 20px 10px 16px;
        border-radius: 16px;
        cursor: pointer;
        text-decoration: none;
        font-family: inherit;
        background: linear-gradient(160deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015));
        border: 1px solid rgba(212, 175, 55, 0.25);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
        transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
      }
      #balanceModal .fz-package-card:hover,
      #balanceModal .fz-package-card:focus-visible {
        transform: translateY(-6px);
      }
      #balanceModal .fz-package-card.tier-bronze:hover {
        border-color: rgba(205, 127, 50, 0.85);
        box-shadow: 0 10px 24px rgba(205, 127, 50, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.08);
      }
      #balanceModal .fz-package-card.tier-silver:hover {
        border-color: rgba(197, 200, 209, 0.85);
        box-shadow: 0 10px 24px rgba(197, 200, 209, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.08);
      }
      #balanceModal .fz-package-card.tier-gold {
        border-color: rgba(255, 183, 3, 0.4);
      }
      #balanceModal .fz-package-card.tier-gold:hover {
        border-color: rgba(255, 183, 3, 0.85);
        box-shadow: 0 10px 26px rgba(255, 183, 3, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08);
      }
      #balanceModal .fz-coin-frame {
        position: relative;
        width: 74px;
        height: 74px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      #balanceModal .fz-coin-frame::before {
        content: "";
        position: absolute;
        inset: -6px;
        border-radius: 50%;
        opacity: 0.55;
        animation: vipOrbitSpin 6s linear infinite;
      }
      #balanceModal .fz-package-card.tier-bronze .fz-coin-frame::before {
        background: conic-gradient(from 0deg, rgba(205, 127, 50, 0) 0%, rgba(205, 127, 50, 0.9) 12%, rgba(205, 127, 50, 0) 30%);
      }
      #balanceModal .fz-package-card.tier-silver .fz-coin-frame::before {
        background: conic-gradient(from 0deg, rgba(197, 200, 209, 0) 0%, rgba(197, 200, 209, 0.95) 12%, rgba(197, 200, 209, 0) 30%);
      }
      #balanceModal .fz-package-card.tier-gold .fz-coin-frame::before {
        background: conic-gradient(from 0deg, rgba(255, 183, 3, 0) 0%, rgba(255, 233, 176, 1) 12%, rgba(255, 183, 3, 0) 30%);
      }
      #balanceModal .fz-coin-frame img {
        position: relative;
        z-index: 1;
        width: 62px;
        height: 62px;
        border-radius: 50%;
        object-fit: cover;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
        transition: transform 0.25s ease;
      }
      #balanceModal .fz-package-card:hover .fz-coin-frame img {
        transform: scale(1.08) rotate(-4deg);
      }
      #balanceModal .fz-package-amount {
        font-family: "Orbitron", "Vazirmatn", sans-serif;
        font-size: 1.05rem;
        font-weight: 800;
        direction: ltr;
      }
      #balanceModal .fz-package-card.tier-bronze .fz-package-amount {
        background: linear-gradient(180deg, #f0c299 0%, #cd7f32 65%, #8a5324 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        -webkit-text-fill-color: transparent;
      }
      #balanceModal .fz-package-card.tier-silver .fz-package-amount {
        background: linear-gradient(180deg, #f4f6f8 0%, #c5c8d1 65%, #8b8f99 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        -webkit-text-fill-color: transparent;
      }
      #balanceModal .fz-package-card.tier-gold .fz-package-amount {
        background: linear-gradient(180deg, #fff6da 0%, #ffb703 65%, #e08e00 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        -webkit-text-fill-color: transparent;
      }
      #balanceModal .fz-package-caption {
        font-size: 0.62rem;
        color: #9c93b0;
      }
      @keyframes fzDiscountPop {
        0%,
        100% {
          transform: scale(1);
        }
        50% {
          transform: scale(1.08);
        }
      }
      .fz-discount-corner {
        position: absolute !important;
        top: -10px;
        right: -10px;
        width: 42px !important;
        height: 42px !important;
        max-width: 42px;
        max-height: 42px;
        min-width: 42px;
        min-height: 42px;
        box-sizing: border-box;
        z-index: 3;
        filter: drop-shadow(0 3px 6px rgba(230, 57, 70, 0.55));
        animation: fzDiscountPop 1.6s ease-in-out infinite;
      }
      .fz-discount-corner svg {
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        width: 42px !important;
        height: 42px !important;
        max-width: none;
      }
      .fz-discount-corner span {
        position: relative;
        z-index: 1;
        display: flex;
        width: 100%;
        height: 100%;
        align-items: center;
        justify-content: center;
        color: #fff;
        text-align: center;
        direction: rtl;
      }
      .fz-discount-corner .fz-discount-percent {
        font-size: 0.85rem;
        font-weight: 900;
        line-height: 1;
        white-space: nowrap;
      }
      .fz-package-price {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1px;
        margin-top: 2px;
      }
      .fz-price-old {
        font-size: 0.68rem;
        color: #8a8398;
        text-decoration: line-through;
        text-decoration-color: rgba(230, 57, 70, 0.85);
        text-decoration-thickness: 1.5px;
        opacity: 0.8;
      }
      .fz-price-new {
        font-size: 0.8rem;
        font-weight: 800;
      }
      #balanceModal .fz-package-card.tier-bronze .fz-price-new {
        color: #e3b088;
      }
      #balanceModal .fz-package-card.tier-silver .fz-price-new {
        color: #e8eaf0;
      }
      #balanceModal .fz-package-card.tier-gold .fz-price-new {
        color: #ffd76b;
      }
      #vipModal .fz-price-new {
        color: #ffd76b;
      }
      #balanceModal .fz-modal-close {
        position: absolute;
        top: 14px;
        left: 14px;
        width: 28px;
        height: 28px;
        border-radius: 50%;
        border: 1px solid rgba(255, 255, 255, 0.15);
        background: rgba(255, 255, 255, 0.04);
        color: #b3a9c9;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.75rem;
        cursor: pointer;
        transition: 0.25s;
        z-index: 2;
      }
      #balanceModal .fz-modal-close:hover {
        background: rgba(255, 183, 3, 0.15);
        border-color: rgba(255, 183, 3, 0.5);
        color: #ffe9b0;
      }
      @media (max-width: 380px) {
        #balanceModal .fz-package-card {
          max-width: 104px;
          padding: 16px 6px 12px;
        }
        #balanceModal .fz-coin-frame {
          width: 60px;
          height: 60px;
        }
        #balanceModal .fz-coin-frame img {
          width: 50px;
          height: 50px;
        }
      }
      /* ================== نوار اطلاعیه‌ها - طراحی جدید ================== */
      .fl-announce-bar {
        background: var(--fl-announce-bg);
        background-size: 200% 100%;
        animation: announceBgShift 8s ease-in-out infinite;
        border-bottom: 1px solid rgba(255, 183, 3, 0.45);
        box-shadow: 0 1px 8px rgba(0, 0, 0, 0.25);
        padding: 0;
        height: 40px;
        overflow: hidden;
        position: relative;
        box-sizing: border-box;
        display: flex;
        align-items: center;
      }
      @keyframes announceBgShift {
        0%, 100% { background-position: 0% 50%; }
        50% { background-position: 100% 50%; }
      }
      .fl-announce-icon {
        position: absolute;
        right: 0;
        top: 0;
        z-index: 2;
        height: 100%;
        padding: 0 14px 0 10px;
        display: flex;
        align-items: center;
        background: var(--fl-announce-icon-bg);
      }
      .fl-announce-icon i {
        color: #ffd166;
        font-size: 15px;
        filter: drop-shadow(0 0 4px rgba(255, 183, 3, 0.7));
        animation: annBellRing 2.4s ease-in-out infinite;
      }
      @keyframes annBellRing {
        0%, 80%, 100% { transform: rotate(0deg); }
        84% { transform: rotate(-12deg); }
        88% { transform: rotate(10deg); }
        92% { transform: rotate(-6deg); }
        96% { transform: rotate(0deg); }
      }
      /* ⭐ ناحیه‌ی دیدِ مارکی: کل فضای نوار بجز عرض آیکون سمت راست */
      .fl-announce-viewport {
        position: relative;
        flex: 1 1 auto;
        height: 100%;
        overflow: hidden;
      }
      /* ⭐ یک نسخه‌ی تنها (بدون تکرار) از متن: از چپ وارد می‌شه، به سمت راست
         (زیر آیکون) حرکت می‌کنه و خارج می‌شه. حرکت با transform ساده (بدون
         will-change/backface-visibility تودرتو که با ترنسفورمِ زنده‌ی خودِ
         siteTopbar تداخل داشت و باعث نمایش‌داده‌نشدن روی سافاری/آیفون می‌شد) انجام
         می‌شه؛ اگه به هر دلیلی انیمیشن اجرا نشه، همین transform پایه هم متن رو
         از سمت چپ نوار قابل‌خوندن نشون می‌ده - یعنی دیگه هیچ‌وقت کامل نامرئی نمی‌مونه. */
      .fl-announce-track {
        position: absolute;
        top: 50%;
        left: 0;
        white-space: nowrap;
        color: var(--fl-announce-text);
        font-size: 14px;
        font-family: "Vazirmatn", Tahoma, Arial, sans-serif;
        transform: translateY(-50%);
        animation: scrollAnnounce 18s linear infinite;
      }
      @keyframes scrollAnnounce {
        0% {
          transform: translate(-100%, -50%);
        }
        100% {
          transform: translate(100vw, -50%);
        }
      }
      @media (prefers-reduced-motion: reduce) {
        .fl-announce-track {
          animation: none;
          transform: translateY(-50%);
        }
        .fl-announce-bar {
          animation: none;
        }
      }
      /* pause با hover (دسکتاپ) - روی موبایل چون hover واقعی وجود نداره از
         کلاس js-paused (که در announcements.js با لمس/تاچ ست می‌شه) استفاده می‌کنیم */
      #announcementBar:hover .fl-announce-track,
      #announcementBar.js-paused .fl-announce-track {
        animation-play-state: paused !important;
      }
      @media (max-width: 480px) {
        .fl-announce-icon {
          padding: 0 10px 0 8px;
        }
        .fl-announce-track {
          font-size: 13px;
        }
      }
      .announcement-link {
        position: relative;
        display: inline-block;
        color: inherit;
        text-decoration: none;
        padding: 4px 12px;
        border-radius: 20px;
        background: rgba(255, 183, 3, 0.18);
        border: 1px solid rgba(255, 183, 3, 0.55);
        transition:
          background 0.25s ease,
          box-shadow 0.25s ease,
          transform 0.25s ease,
          border-color 0.25s ease;
        animation: annLinkPulse 1.8s ease-in-out infinite;
        /* روی موبایل هایلایت خاکستری پیش‌فرض تپ رو حذف می‌کنه و از گیرکردن ظاهری جلوگیری می‌کنه */
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
      }
      .announcement-link:hover,
      .announcement-link:active {
        background: rgba(255, 183, 3, 0.32);
        border-color: #ffd700;
        box-shadow: 0 0 14px rgba(255, 215, 0, 0.6);
        transform: scale(1.07);
        animation-play-state: paused;
      }
      @keyframes annLinkPulse {
        0%,
        100% {
          box-shadow: 0 0 0 rgba(255, 215, 0, 0);
        }
        50% {
          box-shadow: 0 0 9px rgba(255, 215, 0, 0.5);
        }
      }
      .login-modal-close {
        position: absolute;
        top: 18px;
        right: 18px;
        width: 38px;
        height: 38px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: rgba(255, 183, 3, 0.12);
        border: 1.5px solid #ffb703;
        color: #ffb703;
        cursor: pointer;
        transition:
          transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
          background 0.25s ease,
          box-shadow 0.25s ease,
          color 0.25s ease;
        z-index: 5;
      }
      .login-modal-close svg {
        width: 16px;
        height: 16px;
        stroke: currentColor;
        stroke-width: 2.4;
        stroke-linecap: round;
        transition: transform 0.25s ease;
      }
      .login-modal-close:hover {
        background: #ffb703;
        color: #1a1a2e;
        box-shadow: 0 0 16px rgba(255, 183, 3, 0.55);
        transform: scale(1.12);
      }
      .login-modal-close:hover svg {
        transform: rotate(90deg);
      }
      .login-modal-close:active {
        transform: scale(0.9);
      }
      .auth-switch-wrap {
        text-align: center;
        margin-top: 16px;
        font-size: 14px;
        color: #6b6b80;
      }
      .auth-switch-link {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        margin-right: 4px;
        padding: 5px 14px;
        border-radius: 20px;
        font-weight: bold;
        font-size: 13px;
        color: #fb8500;
        background: linear-gradient(
          135deg,
          rgba(255, 183, 3, 0.14),
          rgba(251, 133, 0, 0.14)
        );
        border: 1.5px solid rgba(255, 183, 3, 0.45);
        text-decoration: none;
        transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
      }
      .auth-switch-link i {
        font-size: 11px;
      }
      .auth-switch-link:hover {
        background: linear-gradient(135deg, #ffb703, #fb8500);
        color: #241442;
        border-color: transparent;
        box-shadow: 0 4px 14px rgba(255, 183, 3, 0.5);
        transform: translateY(-2px) scale(1.06);
      }
      .auth-switch-link:active {
        transform: translateY(0) scale(0.96);
      }
      .video-modal-close {
        position: absolute;
        top: 18px;
        right: 18px;
        width: 38px;
        height: 38px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: rgba(255, 183, 3, 0.12);
        border: 1.5px solid #ffb703;
        color: #ffb703;
        cursor: pointer;
        transition:
          transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
          background 0.25s ease,
          box-shadow 0.25s ease,
          color 0.25s ease;
        z-index: 10000;
      }
      .video-modal-close svg {
        width: 16px;
        height: 16px;
        stroke: currentColor;
        stroke-width: 2.4;
        stroke-linecap: round;
        transition: transform 0.25s ease;
      }
      .video-modal-close:hover {
        background: #ffb703;
        color: #1a1a2e;
        box-shadow: 0 0 16px rgba(255, 183, 3, 0.55);
        transform: scale(1.12);
      }
      .video-modal-close:hover svg {
        transform: rotate(90deg);
      }
      .video-modal-close:active {
        transform: scale(0.9);
      }
      .video-modal-close.fs-active {
        position: fixed !important;
        top: 18px;
        right: 18px;
        z-index: 1000000 !important;
      }
      #playerClickOverlay {
        cursor: pointer;
        user-select: none;
        -webkit-user-select: none;
      }
      #playerTapControls {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 46px;
        z-index: 15;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 28px;
        pointer-events: none;
        direction: ltr;
      }
      .tap-btn {
        pointer-events: none;
        opacity: 0;
        transform: scale(0.7);
        transition: opacity 0.24s cubic-bezier(0.34, 1.56, 0.64, 1),
          transform 0.24s cubic-bezier(0.34, 1.56, 0.64, 1),
          background 0.15s ease, box-shadow 0.2s ease;
        background: rgba(20, 16, 28, 0.5);
        -webkit-backdrop-filter: blur(14px);
        backdrop-filter: blur(14px);
        border: 1.5px solid rgba(255, 183, 3, 0.55);
        color: #ffe9b8;
        border-radius: 50%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        box-shadow: 0 4px 24px rgba(255, 183, 3, 0.28),
          0 4px 18px rgba(0, 0, 0, 0.35);
        -webkit-tap-highlight-color: transparent;
      }
      #playerTapControls.visible .tap-btn {
        opacity: 1;
        transform: scale(1);
        pointer-events: auto;
      }
      /* افکتِ هاور روی PC (قبل از کلیک): فقط روی دستگاه‌هایی که واقعاً ماوس
         دارن فعال می‌شه تا روی موبایل/لمسی چسبیده نمونه */
      @media (hover: hover) and (pointer: fine) {
        #playerTapControls.visible .tap-btn:hover {
          transform: scale(1.1);
          border-color: rgba(255, 183, 3, 0.9);
          box-shadow: 0 6px 30px rgba(255, 183, 3, 0.5),
            0 4px 20px rgba(0, 0, 0, 0.4);
        }
        #playerTapControls.visible .tap-btn-play:hover {
          box-shadow: 0 6px 38px rgba(255, 183, 3, 0.8),
            0 4px 20px rgba(0, 0, 0, 0.4);
        }
      }
      #playerTapControls.visible .tap-btn.pressed {
        transform: scale(0.88);
        background: rgba(255, 183, 3, 0.3);
      }
      /* حالتِ محوشدنِ تدریجی: چند ثانیه بعد از کلیک روی دکمه‌ها، به‌جای
         ناپدید شدنِ آنی، به‌آرامی کم‌رنگ می‌شن */
      #playerTapControls.slow-fade .tap-btn {
        transition: opacity 0.9s ease, transform 0.6s ease,
          background 0.15s ease, box-shadow 0.2s ease;
      }
      .tap-btn-skip {
        width: 58px;
        height: 58px;
        font-size: 9px;
        gap: 1px;
      }
      .tap-btn-skip i {
        font-size: 19px;
      }
      .tap-btn-play {
        width: 84px;
        height: 84px;
        font-size: 30px;
        color: #1a1a2e;
        background: linear-gradient(150deg, #ffc93c, #ff9500);
        border: 1.5px solid rgba(255, 255, 255, 0.55);
        box-shadow: 0 4px 28px rgba(255, 183, 3, 0.6),
          0 4px 18px rgba(0, 0, 0, 0.35);
      }
      #playerTapControls.visible .tap-btn-play.pressed {
        background: linear-gradient(150deg, #ff9500, #ffc93c);
        box-shadow: 0 2px 16px rgba(255, 183, 3, 0.7);
      }
      .tap-btn-play i {
        margin-inline-start: 3px;
      }
      .tap-btn-play i.fa-pause {
        margin-inline-start: 0;
      }
      /* روی PC/صفحه‌های بزرگ، دکمه‌های وسط پلیر بزرگ‌تر و واضح‌تر دیده بشن */
      @media (min-width: 900px) {
        #playerTapControls {
          gap: 42px;
        }
        .tap-btn {
          border-width: 2px;
        }
        .tap-btn-skip {
          width: 74px;
          height: 74px;
          font-size: 11px;
        }
        .tap-btn-skip i {
          font-size: 25px;
        }
        .tap-btn-play {
          width: 112px;
          height: 112px;
          font-size: 42px;
        }
      }
      #playerControlsBar button {
        -webkit-tap-highlight-color: transparent;
        transition: color 0.15s ease, transform 0.15s ease;
      }
      #playerControlsBar button.pressed {
        color: #ffb703;
        transform: scale(0.85);
      }
      #playerSpeedMenu {
        position: absolute;
        bottom: 54px;
        z-index: 40;
        background: rgba(20, 18, 30, 0.92);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.15);
        border-radius: 12px;
        padding: 6px;
        display: flex;
        flex-direction: column;
        gap: 2px;
        min-width: 64px;
        opacity: 0;
        transform: translateY(6px) scale(0.95);
        pointer-events: none;
        transition: opacity 0.18s ease, transform 0.18s ease;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
        direction: ltr;
      }
      #playerSpeedMenu.open {
        opacity: 1;
        transform: translateY(0) scale(1);
        pointer-events: auto;
      }
      #playerSpeedMenu button {
        background: transparent;
        border: none;
        color: #eee;
        font-size: 12.5px;
        padding: 7px 10px;
        border-radius: 7px;
        cursor: pointer;
        text-align: center;
        -webkit-tap-highlight-color: transparent;
        transition: background 0.15s ease, color 0.15s ease;
      }
      #playerSpeedMenu button.active {
        color: #1a1a2e;
        background: #ffb703;
        font-weight: bold;
      }
      #playerSpeedMenu button.pressed {
        background: rgba(255, 255, 255, 0.15);
      }
      #playerSpeedMenu button.active.pressed {
        background: #ffb703;
      }
      .player-loading-spinner {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        border: 3px solid rgba(255, 183, 3, 0.25);
        border-top-color: #ffb703;
        animation: player-spin 0.8s linear infinite;
      }
      @keyframes player-spin {
        to {
          transform: rotate(360deg);
        }
      }
      #player::-webkit-media-controls-fullscreen-button,
      #player::-webkit-media-controls-picture-in-picture-button,
      #player::-webkit-media-controls-panel-container .airplay-button,
      #player::-internal-media-controls-overflow-button {
        display: none !important;
      }
      #playerWrapper.fake-fullscreen {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        max-height: 100vh !important;
        z-index: 999999 !important;
        background: #000;
        display: flex !important;
        align-items: center;
        justify-content: center;
      }
      #playerWrapper.fake-fullscreen video {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain;
      }
      #playerControlsBar {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 46px;
        z-index: 30;
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 0 6px;
        direction: ltr;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
        box-sizing: border-box;
        overflow: hidden;
        max-width: 100%;
        opacity: 0;
        pointer-events: none;
        transform: translateY(8px);
        transition: opacity 0.22s ease, transform 0.22s ease;
      }
      #playerControlsBar.visible {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
      }
      /* دقیقاً هماهنگ با سه دکمه‌ی وسط: بعد از کلیک روی اون‌ها، نوارِ کنترل
         هم به‌جای ناپدید شدنِ آنی، به‌آرومی محو می‌شه */
      #playerControlsBar.slow-fade {
        transition: opacity 0.9s ease, transform 0.6s ease;
      }
      #playerControlsBar button {
        background: transparent;
        border: none;
        color: #fff;
        cursor: pointer;
        font-size: 15px;
        width: 28px;
        height: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        padding: 0;
      }
      #playerControlsBar button:hover {
        color: #ffb703;
      }
      #playerProgress {
        flex: 1 1 0%;
        min-width: 24px;
        -webkit-appearance: none;
        appearance: none;
        height: 4px;
        border-radius: 2px;
        background: rgba(255, 255, 255, 0.3);
        outline: none;
        cursor: pointer;
        margin: 0 2px;
      }
      #playerProgress::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 13px;
        height: 13px;
        border-radius: 50%;
        background: #ffb703;
        cursor: pointer;
        margin-top: -4.5px;
      }
      #playerProgress::-moz-range-thumb {
        width: 13px;
        height: 13px;
        border: none;
        border-radius: 50%;
        background: #ffb703;
        cursor: pointer;
      }
      #playerTimeLabel {
        flex: 0 0 auto;
        color: #eee;
        font-size: 10px;
        white-space: nowrap;
        min-width: 62px;
        text-align: center;
        direction: ltr;
        font-variant-numeric: tabular-nums;
      }
      #playerVolumeRange {
        -webkit-appearance: none;
        appearance: none;
        width: 46px;
        height: 4px;
        border-radius: 2px;
        background: rgba(255, 255, 255, 0.3);
        outline: none;
        cursor: pointer;
        flex: 0 0 auto;
        transition: width 0.2s ease;
      }
      #playerVolumeRange::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 11px;
        height: 11px;
        border-radius: 50%;
        background: #ffb703;
        cursor: pointer;
        margin-top: -3.5px;
      }
      #playerVolumeRange::-moz-range-thumb {
        width: 11px;
        height: 11px;
        border: none;
        border-radius: 50%;
        background: #ffb703;
        cursor: pointer;
      }
      #playerSpeedBtn {
        width: auto !important;
        min-width: 30px;
        font-size: 11px !important;
        font-weight: bold;
        padding: 0 3px !important;
      }
      @media (max-width: 400px) {
        #playerVolumeRange {
          width: 30px;
        }
        #playerTimeLabel {
          min-width: 48px;
          font-size: 9px;
        }
        #playerControlsBar {
          gap: 4px;
          padding: 0 4px;
        }
      }
      .qb-modal-close {
        position: absolute;
        top: 18px;
        right: 18px;
        width: 38px;
        height: 38px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: rgba(255, 183, 3, 0.12);
        border: 1.5px solid #ffb703;
        color: #ffb703;
        cursor: pointer;
        transition: all 0.25s ease;
        z-index: 5;
      }
      .qb-modal-close svg {
        width: 16px;
        height: 16px;
        stroke: currentColor;
        stroke-width: 2.4;
        stroke-linecap: round;
        transition: transform 0.25s ease;
      }
      .qb-modal-close:hover {
        background: #ffb703;
        color: #1a1a2e;
        box-shadow: 0 0 16px rgba(255, 183, 3, 0.55);
      }
      .qb-modal-close:hover svg {
        transform: rotate(90deg);
      }

/* ===== prize-celebration.css ===== */
.prize-celebration-overlay,
.prize-celebration-overlay * {
  font-family: "Vazirmatn", Tahoma, Arial, sans-serif;
}
.prize-celebration-overlay {
  position: fixed;
  inset: 0;
  z-index: 999999999999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(5, 4, 15, 0.88);
  backdrop-filter: blur(4px);
  overflow: hidden;
  animation: prizeOverlayFadeIn 0.35s ease;
}
.prize-celebration-overlay.prize-celebration-closing {
  animation: prizeOverlayFadeOut 0.35s ease forwards;
}
@keyframes prizeOverlayFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes prizeOverlayFadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}
.prize-godrays {
  position: absolute;
  width: 900px;
  height: 900px;
  max-width: 180vw;
  max-height: 180vw;
  background: conic-gradient(
    from 0deg,
    transparent 0deg, rgba(255, 214, 120, 0.16) 4deg, transparent 11deg,
    transparent 34deg, rgba(255, 214, 120, 0.13) 38deg, transparent 45deg,
    transparent 68deg, rgba(255, 214, 120, 0.15) 72deg, transparent 80deg,
    transparent 108deg, rgba(255, 214, 120, 0.11) 112deg, transparent 120deg,
    transparent 150deg, rgba(255, 214, 120, 0.14) 154deg, transparent 162deg,
    transparent 195deg, rgba(255, 214, 120, 0.12) 199deg, transparent 207deg,
    transparent 240deg, rgba(255, 214, 120, 0.15) 244deg, transparent 252deg,
    transparent 285deg, rgba(255, 214, 120, 0.13) 289deg, transparent 297deg,
    transparent 330deg, rgba(255, 214, 120, 0.12) 334deg, transparent 342deg,
    transparent 360deg
  );
  opacity: 0.85;
  mix-blend-mode: screen;
  animation: prizeGodraysSpin 16s linear infinite;
  pointer-events: none;
  z-index: 0;
}
@keyframes prizeGodraysSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.prize-celebration-glow {
  position: absolute;
  width: 520px;
  height: 520px;
  max-width: 90vw;
  max-height: 90vw;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 183, 3, 0.55) 0%,
    rgba(255, 138, 0, 0.28) 35%,
    rgba(255, 138, 0, 0) 70%
  );
  filter: blur(6px);
  animation: prizeGlowPulse 2.4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes prizeGlowPulse {
  0%, 100% { transform: scale(0.92); opacity: 0.75; }
  50% { transform: scale(1.12); opacity: 1; }
}
.prize-confetti-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}
.prize-confetti-piece {
  position: absolute;
  top: 50%;
  left: 50%;
  opacity: 1;
  animation-name: prizeConfettiBurst;
  animation-timing-function: cubic-bezier(0.16, 0.72, 0.3, 1);
  animation-fill-mode: forwards;
  will-change: transform, opacity;
}
@keyframes prizeConfettiBurst {
  0% {
    transform: translate(-50%, -50%) translate(0, 0) rotate(0deg) scale(0.3);
    opacity: 1;
  }
  14% {
    transform: translate(-50%, -50%) translate(calc(var(--tx) * 0.32), calc(var(--ty) * 0.28)) rotate(calc(var(--rot) * 0.3)) scale(1);
    opacity: 1;
  }
  78% {
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) translate(var(--tx), var(--ty)) rotate(var(--rot)) scale(0.8);
    opacity: 0;
  }
}
.prize-chest-wrap {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 260px;
}
.prize-chest-scene {
  position: relative;
  width: 190px;
  height: 178px;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 14px 28px rgba(255, 138, 0, 0.5));
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.prize-chest-scene.prize-chest-fadeout {
  opacity: 0;
  transform: scale(0.85) translateY(-6px);
  pointer-events: none;
}
.prize-chest-svg {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 2;
}
.prize-rune {
  fill: none;
  stroke: #8ee8ff;
  stroke-width: 1.1;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.55;
  filter: drop-shadow(0 0 2px rgba(142, 232, 255, 0.8));
  animation: prizeRuneGlow 2.4s ease-in-out infinite;
}
.prize-rune-lid:nth-child(odd) { animation-delay: 0.3s; }
.prize-rune-lid:nth-child(even) { animation-delay: 0.9s; }
.prize-rune-base { opacity: 0.28; animation-duration: 3s; }
@keyframes prizeRuneGlow {
  0%, 100% { opacity: 0.35; filter: drop-shadow(0 0 1.5px rgba(142, 232, 255, 0.6)); }
  50% { opacity: 1; filter: drop-shadow(0 0 5px rgba(142, 232, 255, 1)); }
}
.prize-chest-opened .prize-rune-base {
  animation: prizeRuneGlowBright 1.1s ease-in-out infinite;
}
@keyframes prizeRuneGlowBright {
  0%, 100% { opacity: 0.6; filter: drop-shadow(0 0 3px rgba(142, 232, 255, 0.9)); }
  50% { opacity: 1; filter: drop-shadow(0 0 9px rgba(142, 232, 255, 1)); }
}
#prizeChestLock {
  transform-box: fill-box;
  transform-origin: 50% 50%;
}
.prize-lock-flash {
  animation: prizeLockFlash 0.5s ease-in-out infinite;
}
@keyframes prizeLockFlash {
  0%, 100% { filter: drop-shadow(0 0 1px rgba(142, 232, 255, 0.5)); }
  50% { filter: drop-shadow(0 0 9px rgba(142, 232, 255, 1)); }
}
.prize-lock-open {
  animation: prizeLockPop 0.4s ease forwards;
}
@keyframes prizeLockPop {
  0% { transform: scale(1) rotate(0deg); opacity: 1; }
  55% { transform: scale(1.3) rotate(-18deg); opacity: 1; }
  100% { transform: scale(0.3) rotate(30deg) translateY(-14px); opacity: 0; }
}
.prize-orbit {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.prize-orbit-dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffffff 0%, #8ee8ff 45%, rgba(142, 232, 255, 0) 75%);
  box-shadow: 0 0 8px 3px rgba(142, 232, 255, 0.85);
  animation: prizeOrbitMove 3.6s linear infinite;
  opacity: 0.85;
}
.prize-orbit-dot:nth-child(n+3) { width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; opacity: 0.5; }
.prize-orbit-dot:nth-child(n+5) { width: 3.5px; height: 3.5px; margin: -1.75px 0 0 -1.75px; opacity: 0.3; }
@keyframes prizeOrbitMove {
  0%   { transform: translate(105px, 0px); }
  8.33%  { transform: translate(90.9px, 23px); }
  16.66% { transform: translate(52.5px, 39.8px); }
  25%  { transform: translate(0px, 46px); }
  33.33% { transform: translate(-52.5px, 39.8px); }
  41.66% { transform: translate(-90.9px, 23px); }
  50%  { transform: translate(-105px, 0px); }
  58.33% { transform: translate(-90.9px, -23px); }
  66.66% { transform: translate(-52.5px, -39.8px); }
  75%  { transform: translate(0px, -46px); }
  83.33% { transform: translate(52.5px, -39.8px); }
  91.66% { transform: translate(90.9px, -23px); }
  100% { transform: translate(105px, 0px); }
}
.prize-crystals {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.prize-crystal {
  position: absolute;
  top: 46%;
  width: 26px;
  opacity: 0;
  transform: translate(-50%, 10px) scale(0.2) rotate(-6deg);
}
.prize-crystal-a { left: 37%; }
.prize-crystal-b { left: 50%; top: 41%; width: 32px; }
.prize-crystal-c { left: 63%; }
.prize-crystals-rise .prize-crystal-a {
  animation: prizeCrystalRise 0.8s cubic-bezier(0.22, 0.9, 0.3, 1.2) 0.05s forwards,
             prizeCrystalGlow 1.3s ease-in-out 0.55s infinite;
}
.prize-crystals-rise .prize-crystal-b {
  animation: prizeCrystalRise 0.8s cubic-bezier(0.22, 0.9, 0.3, 1.2) 0.16s forwards,
             prizeCrystalGlow 1.3s ease-in-out 0.65s infinite;
}
.prize-crystals-rise .prize-crystal-c {
  animation: prizeCrystalRise 0.8s cubic-bezier(0.22, 0.9, 0.3, 1.2) 0.27s forwards,
             prizeCrystalGlow 1.3s ease-in-out 0.75s infinite;
}
@keyframes prizeCrystalRise {
  0% { opacity: 0; transform: translate(-50%, 10px) scale(0.2) rotate(-6deg); }
  55% { opacity: 1; }
  100% { opacity: 1; transform: translate(-50%, -34px) scale(1) rotate(4deg); }
}
@keyframes prizeCrystalGlow {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(155, 140, 255, 0.7)) drop-shadow(0 0 12px rgba(120, 200, 255, 0.4)); }
  50% { filter: drop-shadow(0 0 13px rgba(155, 140, 255, 1)) drop-shadow(0 0 22px rgba(120, 200, 255, 0.75)); }
}
.prize-chest-idle {
  animation: prizeChestIdleFloat 2.6s ease-in-out infinite;
}
@keyframes prizeChestIdleFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}
.prize-chest-shake {
  animation: prizeChestShake 0.55s ease-in-out infinite;
}
@keyframes prizeChestShake {
  0%, 100% { transform: rotate(0deg) scale(1); }
  15% { transform: rotate(-6deg) scale(1.02); }
  30% { transform: rotate(5deg) scale(1.04); }
  45% { transform: rotate(-7deg) scale(1.03); }
  60% { transform: rotate(6deg) scale(1.05); }
  75% { transform: rotate(-4deg) scale(1.03); }
  90% { transform: rotate(3deg) scale(1.01); }
}
#prizeChestLid {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  will-change: transform, opacity;
}
.prize-lid-open {
  animation: prizeLidOpen 0.65s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes prizeLidOpen {
  0% { transform: rotate(0deg) translateY(0); opacity: 1; }
  55% { transform: rotate(-108deg) translateY(-6px); opacity: 1; }
  100% { transform: rotate(-126deg) translateY(-16px); opacity: 0; }
}
#prizeChestBase {
  transform-box: fill-box;
  transform-origin: 50% 100%;
}
.prize-chest-bounce {
  animation: prizeBaseBounce 0.5s ease;
}
@keyframes prizeBaseBounce {
  0% { transform: scale(1, 1); }
  35% { transform: scale(1.06, 0.94); }
  65% { transform: scale(0.97, 1.04); }
  100% { transform: scale(1, 1); }
}
.prize-chest-glow-beam {
  position: absolute;
  left: 50%;
  top: 54%;
  width: 34px;
  height: 160px;
  border-radius: 50%;
  transform: translate(-50%, -50%) scaleY(0.05);
  background: radial-gradient(ellipse at center, #fff8dd 0%, #ffd166 40%, rgba(255, 183, 3, 0) 75%);
  filter: blur(8px);
  opacity: 0;
  z-index: 1;
  pointer-events: none;
}
.prize-beam-active {
  animation: prizeBeamShoot 1.1s ease-out forwards;
}
@keyframes prizeBeamShoot {
  0% { transform: translate(-50%, -50%) scaleY(0.05); opacity: 0; }
  25% { opacity: 1; }
  60% { transform: translate(-50%, -50%) scaleY(1.6); opacity: 0.9; }
  100% { transform: translate(-50%, -50%) scaleY(2.4); opacity: 0; }
}
.prize-sparkle {
  position: absolute;
  color: #fff2c4;
  font-size: 13px;
  opacity: 0;
  z-index: 3;
  text-shadow: 0 0 8px rgba(255, 214, 102, 0.9);
  animation: prizeSparkleTwinkle 1.8s ease-in-out infinite;
  pointer-events: none;
}
.prize-sparkle-1 { top: 6%; left: 10%; animation-delay: 0s; }
.prize-sparkle-2 { top: 12%; right: 8%; font-size: 10px; animation-delay: 0.5s; }
.prize-sparkle-3 { bottom: 18%; left: 4%; font-size: 11px; animation-delay: 1s; }
@keyframes prizeSparkleTwinkle {
  0%, 100% { opacity: 0; transform: scale(0.5) rotate(0deg); }
  50% { opacity: 1; transform: scale(1.15) rotate(20deg); }
}
.prize-burst {
  position: absolute;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff6da 0%, #ffcc55 35%, rgba(255, 183, 3, 0) 70%);
  opacity: 0;
  pointer-events: none;
  z-index: 3;
}
.prize-burst-active {
  animation: prizeBurstExpand 0.6s ease-out forwards;
}
@keyframes prizeBurstExpand {
  0% { transform: scale(0.3); opacity: 1; }
  100% { transform: scale(9); opacity: 0; }
}
.prize-reward-display {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  opacity: 0;
  transform: scale(0.6) translateY(10px);
  transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
  z-index: 5;
}
.prize-reward-display.prize-reward-show {
  opacity: 1;
  transform: scale(1) translateY(0);
  pointer-events: auto;
}
.prize-coin-icon {
  font-size: 46px;
  color: #ffd166;
  filter: drop-shadow(0 6px 14px rgba(255, 183, 3, 0.6));
  animation: prizeCoinSpin 1.8s ease-in-out infinite;
}
@keyframes prizeCoinSpin {
  0%, 100% { transform: rotateY(0deg); }
  50% { transform: rotateY(180deg); }
}
.prize-amount-number {
  font-family: "Orbitron", "Vazirmatn", Tahoma, sans-serif;
  font-size: 48px;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 0 18px rgba(255, 183, 3, 0.75);
  letter-spacing: 1px;
  direction: ltr;
  animation: prizeAmountGlowPulse 1.6s ease-in-out infinite;
}
@keyframes prizeAmountGlowPulse {
  0%, 100% { text-shadow: 0 0 14px rgba(255, 183, 3, 0.6); }
  50% { text-shadow: 0 0 26px rgba(255, 183, 3, 1), 0 0 42px rgba(255, 138, 0, 0.6); }
}
.prize-amount-unit {
  font-family: "Orbitron", "Vazirmatn", Tahoma, sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #ffd166;
  letter-spacing: 2px;
  margin-top: -4px;
}
.prize-source-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 700;
  color: #ffe9b8;
  background: linear-gradient(180deg, rgba(255, 183, 3, 0.16), rgba(255, 183, 3, 0.05));
  border: 1px solid rgba(255, 209, 102, 0.35);
  padding: 6px 18px;
  border-radius: 20px;
  margin-top: 4px;
  box-shadow: 0 0 14px rgba(255, 138, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  unicode-bidi: plaintext;
  max-width: min(84vw, 320px);
  text-align: center;
}
.prize-vip-confirm {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  margin-top: 2px;
  padding: 10px 20px 12px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 183, 3, 0.14), rgba(255, 183, 3, 0.04));
  border: 1px solid rgba(255, 209, 102, 0.35);
  box-shadow: 0 0 22px rgba(255, 138, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  max-width: min(88vw, 320px);
}
.prize-vip-confirm-title {
  font-size: 15px;
  font-weight: 800;
  color: #ffe9b8;
  text-shadow: 0 0 12px rgba(255, 183, 3, 0.6);
  unicode-bidi: plaintext;
}
.prize-vip-expiry {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: #d8cdfb;
  background: rgba(255, 255, 255, 0.07);
  padding: 4px 14px;
  border-radius: 20px;
  unicode-bidi: plaintext;
}
.prize-vip-expiry i {
  color: #ffd166;
  font-size: 11px;
}
.prize-vip-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  direction: rtl;
}
.prize-vip-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  direction: ltr;
  padding: 7px 26px;
  border-radius: 50px;
  background: linear-gradient(135deg, #fff3c4, #ffcf4d 45%, #d98c1f);
  color: #241442;
  font-family: "Orbitron", sans-serif;
  font-weight: 900;
  font-size: 20px;
  letter-spacing: 4px;
  box-shadow: 0 0 16px rgba(255, 183, 3, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  animation: prizeVipChipGlow 1.6s ease-in-out infinite;
}
@keyframes prizeVipChipGlow {
  0%, 100% { box-shadow: 0 0 14px rgba(255, 183, 3, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.6); }
  50% { box-shadow: 0 0 30px rgba(255, 183, 3, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.6); }
}
.prize-vip-duration {
  font-size: 27px;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 0 18px rgba(255, 183, 3, 0.75);
}
.prize-claim-btn {
  margin-top: 16px;
  background: linear-gradient(135deg, #ffb703, #fb8500);
  color: #241442;
  font-weight: 800;
  font-size: 14px;
  border: none;
  padding: 10px 34px;
  border-radius: 50px;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(255, 138, 0, 0.4);
  transition: transform 0.15s ease;
}
.prize-claim-btn:active {
  transform: scale(0.95);
}
#balance-container.balance-pulse {
  animation: prizeBalancePulse 1.4s ease;
}
@keyframes prizeBalancePulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 183, 3, 0); }
  15% { box-shadow: 0 0 0 6px rgba(255, 183, 3, 0.35); }
  100% { box-shadow: 0 0 0 0 rgba(255, 183, 3, 0); }
}
#balance-container.balance-pulse #userBalance {
  animation: prizeBalanceNumberPop 0.9s ease;
  color: #ffb703;
}
@keyframes prizeBalanceNumberPop {
  0% { transform: scale(1); }
  30% { transform: scale(1.35); }
  60% { transform: scale(0.95); }
  100% { transform: scale(1); }
}
@media (max-width: 480px) {
  .prize-chest-scene { width: 150px; height: 140px; }
  .prize-chest-glow-beam { width: 26px; height: 120px; }
  .prize-orbit { transform: scale(0.72); transform-origin: center; }
  .prize-godrays { width: 640px; height: 640px; }
  .prize-coin-icon,
  .prize-amount-number { font-size: 36px; }
  .prize-vip-chip { font-size: 16px; padding: 6px 20px; letter-spacing: 3px; }
  .prize-vip-duration { font-size: 21px; }
}
/* ===== friends-modal.css (بازطراحی مودالِ دوستان، فول‌اسکرین در گوشی) ===== */
.friends-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(4px);
  z-index: 999999999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
  animation: friendsModalFadeIn 0.2s ease;
}
@keyframes friendsModalFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.friends-modal-card {
  position: relative;
  width: 100%;
  max-width: 460px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  background: var(--dark-modal-bg, #1a1a2e);
  border: 1px solid var(--dark-modal-border, #303055);
  border-radius: 22px;
  color: #fff;
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.55);
  overflow: hidden;
  animation: friendsModalPop 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes friendsModalPop {
  from { opacity: 0; transform: scale(0.94) translateY(10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
.friends-modal-desktop-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 183, 3, 0.12);
  border: 1.5px solid #ffb703;
  color: #ffb703;
  font-size: 15px;
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
  z-index: 5;
}
.friends-modal-desktop-close:hover {
  background: #ffb703;
  color: #1a1a2e;
  box-shadow: 0 0 16px rgba(255, 183, 3, 0.55);
  transform: scale(1.1) rotate(90deg);
}
.friends-modal-mobile-header {
  display: none;
}
.friends-modal-title-desktop {
  text-align: center;
  margin: 0 0 18px;
  padding-left: 44px; /* جا برای دکمه‌ی بستن که سمت راسته */
  font-size: 19px;
  color: #fff;
}
.friends-modal-body {
  padding: 22px 22px 26px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* --- سرچ --- */
.friends-search-wrap {
  position: relative;
  margin-bottom: 12px;
}
.friends-search-icon {
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  color: #6b6b90;
  font-size: 14px;
  pointer-events: none;
}
.friends-search-input {
  width: 100%;
  box-sizing: border-box;
  padding: 13px 42px 13px 14px;
  border-radius: 12px;
  border: 1.5px solid var(--dark-modal-border, #303055);
  background: #16213e;
  color: #fff;
  font-size: 14.5px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.friends-search-input:focus {
  border-color: #ffb703;
  box-shadow: 0 0 0 3px rgba(255, 183, 3, 0.15);
}
.friends-search-input::placeholder {
  color: #6b6b90;
}

/* --- تب‌های درخواست‌ها --- */
.friends-tabs-row {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
}
.friends-tab-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 11px 8px;
  border-radius: 12px;
  border: 1.5px solid transparent;
  background: #16213e;
  color: #d8d3ec;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}
.friends-tab-btn i {
  font-size: 13px;
}
.friends-tab-btn:nth-child(1):active,
.friends-tab-btn:nth-child(1):hover {
  border-color: #27ae60;
  color: #2ecc71;
}
.friends-tab-btn:nth-child(2):active,
.friends-tab-btn:nth-child(2):hover {
  border-color: #2980b9;
  color: #3498db;
}

/* --- نتایج سرچ / درخواست‌ها / لیست دوستان : کارت مشترک --- */
.friends-search-results {
  margin-bottom: 4px;
}
.friends-requests-list {
  display: none;
  margin-bottom: 15px;
  border: 1px solid var(--dark-modal-border, #303055);
  padding: 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.02);
}
.friends-requests-list h5 {
  margin: 0 0 10px;
  font-size: 13px;
  color: #c9b8f2;
}
.friends-list-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--dark-modal-border, #303055);
  padding-bottom: 8px;
  margin: 4px 0 10px;
  font-size: 14.5px;
}
.friends-count-badge {
  background: #3498db;
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  padding: 2px 10px;
  border-radius: 12px;
  min-width: 20px;
  text-align: center;
}
.friends-list-container {
  max-height: 260px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 183, 3, 0.55) transparent;
}
/* ⭐ اسکرول‌بار شیک‌تر برای لیستِ دوستان: باریک، گرادینتِ طلایی هم‌رنگِ
   دکمه‌ی بستنِ مودال، گوشه‌های گرد، و روشن‌تر شدن موقع هاور/درگ */
.friends-list-container::-webkit-scrollbar { width: 8px; }
.friends-list-container::-webkit-scrollbar-track { background: transparent; margin: 6px 0; }
.friends-list-container::-webkit-scrollbar-thumb {
  background-image: linear-gradient(180deg, rgba(255, 214, 102, 0.95), rgba(212, 175, 55, 0.55));
  background-clip: padding-box;
  border: 2px solid transparent;
  border-radius: 20px;
  min-height: 36px;
  box-shadow: 0 0 6px rgba(255, 183, 3, 0.15);
  transition: background-image 0.2s ease, box-shadow 0.2s ease;
}
.friends-list-container::-webkit-scrollbar-thumb:hover {
  background-image: linear-gradient(180deg, rgba(255, 224, 130, 1), rgba(212, 175, 55, 0.85));
  box-shadow: 0 0 10px rgba(255, 183, 3, 0.35);
}
.friends-list-container::-webkit-scrollbar-thumb:active {
  background-image: linear-gradient(180deg, rgba(255, 183, 3, 1), rgba(184, 148, 40, 0.95));
}
.friends-empty-hint {
  text-align: center;
  color: #8b88a8;
  font-size: 13px;
  padding: 14px 8px;
}
.friends-error-hint {
  text-align: center;
  color: #e74c3c;
  font-size: 13px;
  padding: 10px;
}

.friends-user-card,
.friends-request-card,
.friends-item-card {
  display: flex;
  align-items: center;
  background: #16213e;
  padding: 11px;
  margin-bottom: 8px;
  border-radius: 13px;
  border: 1px solid var(--dark-modal-border, #303055);
  transition: border-color 0.2s ease;
}
.friends-user-avatar,
.friends-request-avatar,
.friends-item-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid #303055;
  margin-left: 12px;
  flex-shrink: 0;
  object-fit: cover;
}
.friends-item-avatar-admin {
  border-color: #3498db;
}
.friends-user-info,
.friends-item-info {
  flex-grow: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.friends-user-name {
  font-weight: bold;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.friends-user-level {
  font-size: 11.5px;
  color: #f1c40f;
}
.friends-admin-tick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  background: #3498db;
  border-radius: 50%;
  flex-shrink: 0;
}
.friends-admin-tick i {
  color: #fff;
  font-size: 9px;
}
.friends-item-admin-tick {
  color: #3498db;
  font-size: 17px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.friends-item-admin-tick .fa-check {
  position: absolute;
  color: #fff;
  font-size: 9px;
}
.friends-pending-text {
  color: #7f8c8d;
  font-size: 11px;
  padding: 5px;
  white-space: nowrap;
}
.friends-action-group {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

/* دکمه‌های دایره‌ای آیکونی (تایید/رد/افزودن/لغو) */
.friends-icon-btn {
  border: none;
  color: #fff;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
  transition: transform 0.15s ease, filter 0.15s ease;
}
.friends-icon-btn:active {
  transform: scale(0.92);
}
.friends-icon-btn-accept { background: #27ae60; }
.friends-icon-btn-reject { background: #c0392b; }
.friends-icon-btn-add {
  width: auto;
  padding: 0 13px;
  background: #3498db;
  font-size: 15px;
  font-weight: bold;
}
.friends-btn-cancel {
  background: #7f8c8d;
  border: none;
  color: #fff;
  padding: 0 12px;
  height: 32px;
  border-radius: 9px;
  cursor: pointer;
  font-size: 11.5px;
  flex-shrink: 0;
}

/* دکمه‌های خفیفِ عملیات روی هر دوست (چت/هدیه/چالش/حذف) */
.friends-action-btn {
  background: transparent;
  border: none;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.2s ease, transform 0.15s ease;
}
.friends-action-btn:active {
  transform: scale(0.9);
}
.friends-action-btn:hover {
  background: rgba(255, 255, 255, 0.06);
}
.friends-action-btn-chat { color: #3498db; }
.friends-action-btn-gift { color: #f1c40f; }
.friends-action-btn-challenge { color: #9b59b6; }
.friends-action-btn-delete { color: #e74c3c; }
.friends-action-btn-delete[disabled],
.friends-action-btn-delete.is-disabled {
  color: #555;
  cursor: not-allowed;
}

/* ===================== حالت موبایل: تمام‌صفحه ===================== */
@media screen and (max-width: 768px) {
  .friends-modal-overlay {
    padding: 0;
    align-items: stretch;
    justify-content: stretch;
  }
  .friends-modal-card {
    max-width: 100%;
    width: 100%;
    height: 100%;
    max-height: 100%;
    border-radius: 0;
    animation: none;
  }
  .friends-modal-desktop-close {
    display: none;
  }
  .friends-modal-mobile-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: #16213e;
    border-bottom: 1px solid var(--dark-modal-border, #303055);
    flex-shrink: 0;
  }
  .friends-modal-mobile-close-btn {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 50%;
    background: rgba(255, 183, 3, 0.12);
    border: 1.5px solid #ffb703;
    color: #ffb703;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.2s ease, transform 0.15s ease;
  }
  .friends-modal-mobile-close-btn:active {
    transform: scale(0.9);
    background: rgba(255, 183, 3, 0.25);
  }
  .friends-modal-title-mobile {
    font-size: 17px;
    font-weight: bold;
    color: #fff;
  }
  .friends-modal-title-desktop {
    display: none;
  }
  .friends-modal-body {
    flex: 1;
    padding: 18px 16px 30px;
  }

  /* المان‌ها روی گوشی بزرگ‌تر و راحت‌تر برای لمس */
  .friends-search-input {
    padding: 15px 44px 15px 16px;
    font-size: 15.5px;
    border-radius: 14px;
  }
  .friends-tab-btn {
    padding: 13px 8px;
    font-size: 13.5px;
    border-radius: 14px;
  }
  .friends-list-container {
    max-height: none; /* توی فول‌اسکرین کل صفحه اسکرول می‌خوره، نه یه باکس کوچیک */
  }
  .friends-user-card,
  .friends-request-card,
  .friends-item-card {
    padding: 13px;
    border-radius: 15px;
  }
  .friends-user-avatar,
  .friends-request-avatar,
  .friends-item-avatar {
    width: 50px;
    height: 50px;
    margin-left: 13px;
  }
  .friends-user-name {
    font-size: 15px;
  }
  .friends-user-level {
    font-size: 12.5px;
  }
  .friends-icon-btn {
    width: 38px;
    height: 38px;
    font-size: 14px;
    border-radius: 11px;
  }
  .friends-icon-btn-add {
    padding: 0 16px;
    font-size: 17px;
  }
  .friends-btn-cancel {
    height: 38px;
    padding: 0 14px;
    font-size: 12.5px;
  }
  .friends-action-btn {
    width: 36px;
    height: 36px;
    font-size: 16px;
  }
  .friends-count-badge {
    font-size: 12.5px;
    padding: 3px 11px;
  }
  .friends-list-heading {
    font-size: 15.5px;
  }
}

/* ===== chat-full-modal.css (بازطراحی صفحه‌ی چت، فول‌اسکرین در گوشی) ===== */

/* وقتی چت باز میشه، اسکرولِ پشتِ صفحه قفل میشه تا با بازشدنِ کیبورد،
   مرورگر مجبور به اسکرولِ خودکارِ صفحه‌ی اصلی نشه (که باعثِ دیده‌شدنِ
   سایت از پشتِ کیبورد میشد). جزئیاتِ قفل/بازکردن در friends.js است. */
html.chat-scroll-locked,
html.chat-scroll-locked body {
  overflow: hidden;
  height: 100%;
}
html.chat-scroll-locked body {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
}

.chat-full-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  z-index: 999999999;
  display: flex;
  justify-content: center;
  align-items: center;
  direction: rtl;
  animation: friendsModalFadeIn 0.2s ease;
}
.chat-full-card {
  background: var(--dark-modal-bg, #1a1a2e);
  width: 90%;
  max-width: 500px;
  height: 80vh;
  display: flex;
  flex-direction: column;
  border-radius: 20px;
  color: #fff;
  overflow: hidden;
  position: relative;
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.55);
  animation: friendsModalPop 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.chat-full-header {
  padding: 15px;
  background: #16213e;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-shrink: 0;
}
.chat-full-header-user {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}
.chat-full-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid #3498db;
  object-fit: cover;
  flex-shrink: 0;
}
.chat-full-name {
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: bold;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* ===================== دکمه‌های آیکونیِ هماهنگِ برگشت/بستن =====================
   کلاسِ مشترک برای هدرِ چت و هدرِ صندوق پیام‌ها، هم‌استایل با دکمه‌های
   modal-header-m__btn در بخشِ «آزمون‌های من» (همون زبانِ بصری: دایره،
   بوردرِ رنگی، آیکونِ svg، انیمیشنِ هاور) ولی هم‌رنگ با تمِ تیره‌ی چت.
   طبقِ درخواست: دکمه‌ی برگشت سمتِ چپ، دکمه‌ی بستن سمتِ راست می‌شینه. */
/* ⭐ همون طراحیِ توپُر و گرادیانیِ دکمه‌های مودال (modal-header-m__btn)، اینجا
   هم با تمِ طلایی/تیره‌ی چت: پس‌زمینه‌ی گرادیان، هالهٔ نرم روی هاور و آیکونِ
   سفید که سُر می‌خوره/می‌چرخه. */
.chat-header-icon-btn {
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ffcf54, #ffb703 65%, #fb8500);
  border: none;
  box-shadow: 0 4px 14px rgba(251, 133, 0, 0.45), 0 0 0 3px rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  padding: 0;
  flex-shrink: 0;
}
.chat-header-icon-btn::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 183, 3, 0.4), transparent 70%);
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 0;
}
.chat-header-icon-btn:hover::before { opacity: 1; transform: scale(1); }
.chat-header-icon-btn svg {
  position: relative;
  z-index: 1;
  width: 17px;
  height: 17px;
  stroke: #1a1a2e;
  stroke-width: 2.6;
  fill: none;
  transition: transform 0.3s ease;
}
.chat-header-icon-btn:active { transform: scale(0.88); }
.chat-header-icon-btn:hover {
  box-shadow: 0 6px 22px rgba(251, 133, 0, 0.65), 0 0 0 3px rgba(255, 255, 255, 0.25);
}
.chat-header-icon-btn.back-icon:hover svg {
  transform: translateX(-3px) scale(1.12);
}
.chat-header-icon-btn.close-icon:hover svg {
  transform: rotate(90deg) scale(1.12);
}
.chat-header-icon-btn.icon-btn-spacer {
  visibility: hidden;
}
.inbox-header-title {
  flex: 1;
  margin: 0;
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  text-align: center;
}

.chat-full-history {
  flex-grow: 1;
  overflow-y: auto;
  padding: 15px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  -webkit-overflow-scrolling: touch;
}
/* والدِ #chatHistory: چون innerHTML خودِ #chatHistory هر بار عوض میشه، دکمه‌ی
   شناورِ «پرش به آخرین پیام» رو بیرونش (توی همین wrapper) نگه می‌داریم تا با
   هر بار لود شدنِ تاریخچه، پاک نشه. */
.chat-history-wrap {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  position: relative;
}
.chat-history-wrap .chat-full-history {
  flex: 1;
}
.chat-scroll-bottom-btn {
  position: absolute;
  left: 14px;
  bottom: 14px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #3498db;
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
  z-index: 5;
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.chat-scroll-bottom-btn:hover {
  transform: scale(1.08);
}
.chat-full-history::-webkit-scrollbar {
  width: 4px;
}
.chat-full-history::-webkit-scrollbar-thumb {
  background: #3498db;
  border-radius: 10px;
}
.chat-empty-hint {
  text-align: center;
  color: #aaa;
}
.chat-date-header {
  text-align: center;
  margin: 15px 0;
  font-size: 10.5px;
  color: #bdc3c7;
  font-weight: bold;
}
.chat-msg-bubble {
  padding: 8px 12px;
  border-radius: 12px;
  margin: 5px;
  max-width: 80%;
  color: white;
  position: relative;
  min-width: 60px;
  transition: transform 0.15s ease;
  touch-action: pan-y;
}
.chat-msg-bubble.chat-msg-swiping {
  transition: none;
  user-select: none;
}
.chat-msg-bubble.chat-msg-longpress {
  transform: scale(0.97);
  transition: transform 0.12s ease;
}
@keyframes chatMsgHighlightFlash {
  0% {
    background-color: rgba(241, 196, 15, 0.4);
  }
  100% {
    background-color: transparent;
  }
}
.chat-msg-highlight {
  animation: chatMsgHighlightFlash 1.1s ease;
}
/* ردیفِ هر پیام: بجای align-self روی خودِ حباب، اینجا با justify-content
   همون چیدمانِ قبلی (مال‌من راست، طرفِ‌مقابل چپ) رو تکرار می‌کنیم، تا فضای
   خالیِ کنارِ حباب برای آیکونِ سوایپِ ریپلای در دسترس باشه. */
.chat-msg-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 5px;
}
.chat-msg-row-mine {
  justify-content: flex-start;
}
.chat-msg-row-theirs {
  justify-content: flex-end;
}
.chat-msg-row .chat-msg-bubble {
  margin: 5px 0;
}
.chat-swipe-reply-icon {
  width: 26px;
  height: 26px;
  min-width: 26px;
  border-radius: 50%;
  background: rgba(52, 152, 219, 0.85);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  opacity: 0;
  transform: scale(0.6);
  pointer-events: none;
  transition: opacity 0.1s linear, transform 0.1s linear;
}
/* پریویوِ پیامِ ریپلای‌شده، داخلِ حبابِ پیامِ جدید (شبیهِ نقل‌قولِ تلگرام) */
.chat-msg-reply-preview {
  border-right: 3px solid #ffb703;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 4px 8px;
  margin-bottom: 6px;
  cursor: pointer;
}
.chat-msg-reply-preview-name {
  font-size: 11.5px;
  font-weight: bold;
  color: #ffb703;
  margin-bottom: 2px;
}
.chat-msg-reply-preview-text {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.75);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-msg-reply-preview.chat-msg-reply-missing {
  cursor: default;
  border-right-color: #7f8c8d;
}
.chat-msg-reply-preview.chat-msg-reply-missing .chat-msg-reply-preview-text {
  color: #aaa;
  font-style: italic;
}
.chat-msg-mine {
  align-self: flex-start;
  background: #3498db;
}
.chat-msg-theirs {
  align-self: flex-end;
  background: #2c3e50;
}
.chat-msg-text {
  font-size: 14px;
  word-wrap: break-word;
}
.chat-msg-meta {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 3px;
}
.chat-msg-time {
  font-size: 10px;
  opacity: 0.7;
  margin-left: 4px;
}
.chat-msg-tick,
.chat-msg-tick-seen {
  margin-left: 4px;
}
.chat-msg-tick {
  color: #bdc3c7;
}
.chat-msg-tick-seen {
  color: #f1c40f;
}
.chat-msg-admin-actions {
  display: flex;
  gap: 10px;
  margin-top: 5px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 4px;
  justify-content: flex-end;
}
.chat-msg-admin-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 10px;
  font-weight: bold;
}
.chat-msg-admin-edit {
  color: #f39c12;
}
.chat-msg-admin-delete {
  color: #e74c3c;
}

/* نوارِ پریویوِ ریپلای، بالای اینپوتِ چت (وقتی روی پیامی ریپلای فعال شده) */
.chat-reply-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 15px;
  background: #16213e;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}
.chat-reply-accent {
  width: 3px;
  align-self: stretch;
  border-radius: 3px;
  background: #ffb703;
  flex-shrink: 0;
}
.chat-reply-texts {
  flex-grow: 1;
  min-width: 0;
}
.chat-reply-name {
  font-size: 12px;
  font-weight: bold;
  color: #ffb703;
}
.chat-reply-snippet {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.7);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-reply-cancel {
  background: rgba(255, 255, 255, 0.08);
  border: none;
  color: #fff;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.chat-full-inputbar {
  padding: 15px;
  background: #16213e;
  display: flex;
  gap: 10px;
  align-items: flex-end;
  position: relative;
  flex-shrink: 0;
}
.chat-emoji-toggle {
  background: none;
  border: none;
  color: #f1c40f;
  font-size: 22px;
  cursor: pointer;
  flex-shrink: 0;
  padding-bottom: 6px;
}
.chat-full-textarea {
  flex-grow: 1;
  padding: 10px 14px;
  border-radius: 18px;
  border: none;
  background: #0f3460;
  color: #fff;
  resize: none;
  overflow-y: auto;
  max-height: 120px;
  min-height: 40px;
  line-height: 20px;
  font-family: inherit;
  font-size: 16px;
  outline: none;
  box-sizing: border-box;
}
.chat-full-textarea::-webkit-scrollbar {
  width: 4px;
}
.chat-full-textarea::-webkit-scrollbar-thumb {
  background: #3498db;
  border-radius: 10px;
}
.chat-full-send-btn {
  padding: 10px 20px;
  background: #3498db;
  border: none;
  border-radius: 10px;
  color: white;
  cursor: pointer;
  flex-shrink: 0;
}

/* --- پنل اموجی --- */
.emoji-panel {
  display: none;
  flex-direction: column;
  position: absolute;
  bottom: 70px;
  right: 15px;
  background: #16213e;
  border-radius: 15px;
  width: 300px;
  height: 320px;
  border: 1px solid #3498db;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  z-index: 5;
}
.emoji-tabs {
  display: flex;
  gap: 4px;
  padding: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  overflow-x: auto;
  flex-shrink: 0;
}
.emoji-tabs::-webkit-scrollbar {
  height: 3px;
}
.emoji-tabs::-webkit-scrollbar-thumb {
  background: #3498db;
  border-radius: 10px;
}
.emoji-tab {
  cursor: pointer;
  font-size: 18px;
  padding: 4px 7px;
  border-radius: 8px;
  opacity: 0.55;
  transition: 0.2s;
  flex-shrink: 0;
}
.emoji-tab.active {
  opacity: 1;
  background: rgba(52, 152, 219, 0.25);
}
.emoji-grid {
  flex-grow: 1;
  overflow-y: auto;
  padding: 10px;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 4px;
}
.emoji-grid::-webkit-scrollbar {
  width: 4px;
}
.emoji-grid::-webkit-scrollbar-thumb {
  background: #3498db;
  border-radius: 10px;
}
.emoji-grid span {
  cursor: pointer;
  font-size: 21px;
  line-height: 1;
  padding: 3px;
  border-radius: 6px;
  transition: 0.15s;
}
.emoji-grid span:hover {
  background: rgba(52, 152, 219, 0.2);
}

/* ===================== حالت موبایل: تمام‌صفحه ===================== */
@media screen and (max-width: 768px) {
  .chat-full-overlay {
    padding: 0;
    align-items: stretch;
    justify-content: stretch;
  }
  .chat-full-card {
    width: 100%;
    max-width: 100%;
    /* height:100% بر اساس ارتفاعِ صفحه‌ی چیدمان محاسبه میشه، نه ارتفاعِ واقعیِ
       قابل‌دیدن؛ وقتی کیبورد باز میشه این دو فرق می‌کنن و ته‌ی مودال از حالت
       فول‌اسکرین خارج میشه. dvh این رو خودکار حل می‌کنه و برای مرورگرهایی که
       dvh رو نمی‌شناسن (و به‌عنوان محکم‌کاری برای همه‌جا)، جاوااسکریپت هم
       ارتفاع رو با visualViewport همگام نگه می‌داره (تابعِ syncChatModalHeight). */
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    border-radius: 0;
    animation: none;
  }
  .chat-full-header {
    padding: 14px 16px;
  }
  .chat-full-avatar {
    width: 44px;
    height: 44px;
  }
  .chat-full-name {
    font-size: 15.5px;
  }
  .chat-header-icon-btn {
    width: 40px;
    height: 40px;
  }
  .chat-full-history {
    padding: 16px;
  }
  .chat-msg-bubble {
    max-width: 86%;
  }
  .chat-msg-text {
    font-size: 15px;
  }
  .chat-full-inputbar {
    padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px));
  }
  .chat-reply-bar {
    padding: 8px 14px;
  }
  .chat-scroll-bottom-btn {
    left: 12px;
    bottom: 12px;
  }
  .chat-full-textarea {
    font-size: 16px; /* برای جلوگیری از زوم خودکار سافاری روی فوکوس */
    padding: 12px 14px;
  }
  .chat-full-send-btn {
    padding: 12px 18px;
    font-size: 14.5px;
  }
  .emoji-panel {
    width: min(320px, 88vw);
  }
}

/* ===== all-modals-fullscreen-mobile.css (فول‌اسکرین کردنِ تمامِ مدال‌های سایت در گوشی) ===== */
@media screen and (max-width: 768px) {

  /* از height: 100% معمولی، مطمئن‌تره؛ چون توی برخی مرورگرهای موبایل با
     مخفی/ظاهر شدنِ نوار آدرس، ارتفاعِ واقعیِ قابل‌مشاهده تغییر می‌کنه و باعثِ
     یه پرش/جاماندنِ بصری زیرِ مدال میشه. */
  .modal-overlay,
  #changePhoneModal,
  #videoModal,
  #questionBankModal,
  #markedQuestionsModal,
  #editProfileModal,
  #avatarModal,
  #signupAvatarModal,
  #balanceModal,
  #vipModal,
  #vipCodeModal,
  .invited-friends-modal,
  .promo-video-modal,
  .exam-overlay {
    height: 100dvh !important;
  }

  /* --- ۱) مدال‌های خانواده‌ی ورود/ثبت‌نام: لاگین، ثبت‌نام، فراموشی رمز، تغییر شماره ---
     (.modal-overlay + .modal-box) */
  .modal-overlay,
  #changePhoneModal {
    padding: 0 !important;
    align-items: stretch !important;
    justify-content: stretch !important;
  }
  .modal-box {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
  }

  /* --- ۲) مدال ویدیو / بانک سوال / سوالات مارک‌دار ---
     (class="modal" + .modal-content) */
  #videoModal,
  #questionBankModal,
  #markedQuestionsModal {
    padding: 0 !important;
  }
  #videoModal .modal-content,
  #questionBankModal .modal-content,
  #markedQuestionsModal .modal-content {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  /* --- ۳) مدال ویرایش پروفایل --- */
  #editProfileModal {
    padding: 0 !important;
    align-items: stretch !important;
  }
  #editProfileModal > div {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
  }

  /* --- ۴) مدال انتخاب آواتار (پروفایل) --- */
  #avatarModal {
    padding: 0 !important;
    align-items: stretch !important;
  }
  #avatarModal > div {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
  }

  /* --- ۵) مدال انتخاب آواتار (ثبت‌نام) --- */
  #signupAvatarModal > div {
    width: 100% !important;
    height: 100% !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    border-radius: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  /* --- ۶) مدال موجودی (کیف پول) --- */
  #balanceModal {
    padding: 0 !important;
    align-items: stretch !important;
  }
  #balanceModal .fz-modal-card {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    border-radius: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
  }

  /* --- ۷) مدال خرید/تمدید VIP --- */
  #vipModal {
    padding: 0 !important;
    align-items: stretch !important;
  }
  #vipModal .vip-modal-card {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    border-radius: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
  }

  /* --- ۸) مدال واردکردن کد فعال‌سازی VIP --- */
  #vipCodeModal {
    padding: 0 !important;
    align-items: stretch !important;
  }
  #vipCodeModal .modal-content-buy {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    border-radius: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
  }

  /* --- ۹) مدال لیست دوستان دعوت‌شده --- */
  .invited-friends-modal {
    padding: 0 !important;
  }
  .invited-friends-modal-content {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
  }

  /* --- ۱۰) خانواده‌ی مدال آزمون: تولید آزمون، آزمون‌های من، کارنامه، فایل‌های تولیدشده ---
     (.exam-overlay + .exam-modal) */
  .exam-overlay {
    padding: 0 !important;
    align-items: stretch !important;
    justify-content: stretch !important;
  }
  .exam-modal {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    margin: 0 !important;
  }

  /* --- ۱۱) مدال ویدیوی تبلیغاتی/معرفی --- */
  .promo-video-modal {
    padding: 0 !important;
  }
  .promo-video-box {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    border-radius: 0 !important;
    display: flex !important;
    align-items: center !important;
  }
  .promo-video-box video {
    max-height: 100% !important;
  }
  .promo-video-close {
    top: 12px !important;
    left: 12px !important;
    z-index: 2 !important;
  }
}
/* ==================================================================================
   ⭐ مودالِ جذابِ «ارتقا به VIP» — جایگزینِ alert سادهٔ قبلی برای محتوای قفل‌شده‌ی
   طلایی توی پاسخنامه‌ی آزمون (فیلم/جزوه‌ی هم‌مبحث). هم‌رنگ‌وبویِ مودالِ اصلیِ VIP سایدبار.
   ================================================================================== */
.exam-gold-upsell-overlay{
  position:fixed; inset:0; z-index:10000;
  background:rgba(10,6,20,.78);
  display:flex; align-items:center; justify-content:center;
  padding:16px; animation:examGoldFadeIn .2s ease-out;
}
@keyframes examGoldFadeIn{ from{ opacity:0; } to{ opacity:1; } }
.exam-gold-upsell-card{
  position:relative; width:100%; max-width:380px;
  background:radial-gradient(circle at 50% -10%, #2c1a4e 0%, #150c26 55%, #0c0715 100%);
  border:1px solid rgba(212,175,55,.35); border-radius:22px;
  padding:32px 22px 24px; text-align:center; color:#fff;
  box-shadow:0 25px 60px rgba(0,0,0,.6), 0 0 40px rgba(124,92,255,.12), inset 0 1px 0 rgba(255,255,255,.04);
  overflow:hidden; direction:rtl;
  animation:examGoldPopIn .25s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes examGoldPopIn{
  from{ transform:scale(.88); opacity:0; }
  to{ transform:scale(1); opacity:1; }
}
.exam-gold-upsell-card::before{
  content:''; position:absolute; top:-60px; right:-40px; width:220px; height:220px;
  background:radial-gradient(circle, rgba(124,92,255,.25) 0%, rgba(124,92,255,0) 70%); pointer-events:none;
}
.exam-gold-upsell-card::after{
  content:''; position:absolute; bottom:-70px; left:-50px; width:240px; height:240px;
  background:radial-gradient(circle, rgba(255,183,3,.16) 0%, rgba(255,183,3,0) 70%); pointer-events:none;
}
.exam-gold-upsell-close{
  position:absolute; top:12px; left:12px; z-index:2;
  width:28px; height:28px; border-radius:50%; border:none; cursor:pointer;
  background:rgba(255,255,255,.08); color:#cfc4e8; font-size:12px;
  display:flex; align-items:center; justify-content:center; transition:background .2s;
}
.exam-gold-upsell-close:hover{ background:rgba(255,255,255,.18); }
.exam-gold-upsell-icon{
  position:relative; width:60px; height:60px; margin:0 auto 16px; border-radius:50%;
  background:conic-gradient(from 210deg, #8a5a00, #ffb703 35%, #ffe9b0 55%, #ffb703 75%, #8a5a00);
  display:flex; align-items:center; justify-content:center;
  animation:examGoldIconGlow 2.6s ease-in-out infinite;
}
.exam-gold-upsell-icon::before{
  content:''; position:absolute; inset:2px; border-radius:50%;
  background:radial-gradient(circle at 50% 32%, #3d2168 0%, #221041 65%, #170a2c 100%);
}
.exam-gold-upsell-icon i{
  position:relative; font-size:1.5rem; color:#ffe9b0; text-shadow:0 0 10px rgba(255,183,3,.7);
}
@keyframes examGoldIconGlow{
  0%,100%{ box-shadow:0 0 10px rgba(255,183,3,.35); }
  50%{ box-shadow:0 0 22px rgba(255,183,3,.8); }
}
.exam-gold-upsell-title{
  position:relative; font-size:1.15rem; font-weight:800; margin:0 0 10px; line-height:1.6;
  background:linear-gradient(135deg, #fff6da 0%, #ffd873 45%, #d4af37 85%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
}
.exam-gold-upsell-text{
  position:relative; color:#c9bfe0; font-size:.86rem; line-height:1.9; margin:0 0 22px;
}
.exam-gold-upsell-cta{
  position:relative; display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; border:none; border-radius:14px; cursor:pointer;
  padding:12px 16px; font-size:.95rem; font-weight:800;
  background:linear-gradient(135deg, #ffe9b0, #ffb703 55%, #d4af37);
  color:#2a1a00; box-shadow:0 6px 18px rgba(255,183,3,.35);
  transition:transform .15s ease, box-shadow .15s ease;
}
.exam-gold-upsell-cta:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(255,183,3,.45); }
.exam-gold-upsell-cta:active{ transform:translateY(0); }
.exam-gold-upsell-later{
  position:relative; display:block; width:100%; margin-top:10px;
  background:none; border:none; cursor:pointer;
  color:#9d92b8; font-size:.82rem; padding:6px; transition:color .2s;
}
.exam-gold-upsell-later:hover{ color:#cfc4e8; }
/* ==========================================================
   ⭐ گوشی با چرخشِ افقی (landscape): فضای عمودی محدوده ولی فضای
   افقی زیاد. کارت‌های محتوا (جزوه/تست/تشریحی) و کارت‌های کلاس که
   تو content.js با استایلِ اینلاین ساخته می‌شن (کلاسِ content-card /
   class-card) رو برای این حالت جمع‌وجورتر، افقی‌تر و کم‌ارتفاع‌تر
   می‌کنیم. چون خیلی از استایل‌ها اینلاین‌ان، اینجا مجبوریم !important
   بزنیم تا رو دستشون بلند بشه (دقیقاً همون الگویی که برای حالتِ شب
   بالاتر استفاده شده).
   ========================================================== */
@media screen and (orientation: landscape) and (max-height: 520px) {

  /* ---------- گریدِ نگه‌دارنده‌ی کارت‌های محتوا/آزمایش/کلاس: به‌جای
     ستونِ عریضِ حداقل ۲۸۰/۳۲۰ پیکسل (که تو گوشیِ افقی فقط یک-دو کارت
     جا می‌داد و بقیه‌ی عرض هدر می‌رفت)، ستون‌ها باریک‌تر می‌شن تا بسته
     به عرضِ صفحه، تا ۳ کارت منظم کنارِ هم جا بگیرن ---------- */
  .content-grid,
  #labsGrid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
    gap: 10px !important;
    padding: 10px !important;
  }

  /* ---------- کارتِ محتوا (جزوه/فیلم/تست/تشریحی): از چیدمانِ
     ستونی (عکسِ بزرگ روی هم عنوان/توضیح/دکمه) به یک ردیفِ افقی
     (تصویرِ کوچیک + عنوان و دکمه‌ی کنارش) تبدیل می‌شه ---------- */
  .content-card:not(.class-card):not(.lab-card) {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    text-align: right !important;
    gap: 6px !important;
    padding: 6px !important;
    border-radius: 12px !important;
  }
  .content-card:not(.class-card):not(.lab-card) .cc-thumb {
    flex: 0 0 78px !important;
    width: 78px !important;
    margin: 0 !important;
    align-self: stretch !important;
  }
  .content-card:not(.class-card):not(.lab-card) .cc-thumb img {
    width: 78px !important;
    height: 100% !important;
    min-height: 52px !important;
    max-height: 64px !important;
    margin-bottom: 0 !important;
  }
  .content-card:not(.class-card):not(.lab-card) .cc-thumb .grade-badge-circle-base {
    width: 20px !important;
    height: 20px !important;
    font-size: 9px !important;
    top: auto !important;
    bottom: 4px !important;
    right: auto !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }
  .content-card:not(.class-card):not(.lab-card) .cc-access-badge {
    top: 4px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    padding: 2px 7px !important;
    font-size: 8.5px !important;
    white-space: nowrap !important;
  }
  .content-card:not(.class-card):not(.lab-card) .cc-body {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
  }
  .content-card:not(.class-card):not(.lab-card) .cc-body h3 {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    font-size: 11.5px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .content-card:not(.class-card):not(.lab-card) .cc-desc {
    display: none !important;
  }
  .content-card:not(.class-card):not(.lab-card) .cc-body > a,
  .content-card:not(.class-card):not(.lab-card) .cc-body > button {
    display: inline-block !important;
    width: auto !important;
    flex: 0 0 auto !important;
    padding: 5px 10px !important;
    font-size: 10px !important;
    margin: 0 !important;
    white-space: nowrap !important;
  }
  .content-card:not(.class-card):not(.lab-card) .cc-body > div {
    flex-direction: row !important;
    gap: 6px !important;
    margin: 0 !important;
  }
  .content-card:not(.class-card):not(.lab-card) .cc-body > div button {
    width: auto !important;
    padding: 6px 10px !important;
    font-size: 10px !important;
  }

  /* ---------- کارتِ کلاس: بج‌های گوشه، آیکون+عنوان، اطلاعات و
     فوتر (ظرفیت+دکمه‌ها) که قبلاً هرکدوم یک ردیفِ جدا و وسط‌چین
     بودن، الان کنار هم و راست‌چین می‌شن تا ارتفاعِ کارت کم بشه ---------- */
  .class-card {
    padding: 8px 10px !important;
    text-align: right !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
  }
  .class-card .cls-badges {
    position: static !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 2px !important;
  }
  .class-card .cls-badge-grade,
  .class-card .cls-badge-countdown {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    padding: 2px 9px !important;
    font-size: 9.5px !important;
  }
  .class-card .cls-head {
    display: flex !important;
    flex-direction: row-reverse !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
  }
  .class-card .cls-icon {
    font-size: 16px !important;
    margin: 0 !important;
  }
  .class-card .cls-title {
    font-size: 11px !important;
    margin: 0 !important;
  }
  .class-card .cls-info {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px 14px !important;
    line-height: 1.3 !important;
  }
  .class-card .cls-info p {
    margin: 0 !important;
    font-size: 9.5px !important;
    white-space: normal !important;
  }
  .class-card .cls-footer {
    margin-top: 3px !important;
    padding-top: 5px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 5px !important;
  }
  .class-card .cls-capacity-row {
    margin: 0 !important;
    font-size: 9px !important;
    gap: 6px !important;
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }
  .class-card .cls-btn-wrap {
    flex-direction: row !important;
    gap: 5px !important;
    flex: 1 1 auto !important;
    justify-content: flex-start !important;
  }
  .class-card .cls-btn-wrap button {
    width: auto !important;
    flex: 1 1 0 !important;
    padding: 5px 6px !important;
    font-size: 9.5px !important;
  }
}

/* ==========================================================
   ⭐ ادامه‌ی تنظیماتِ گوشیِ افقی: تیترِ صفحه + دکمه‌های تغییرِ پایه
   (جزوات/فیلم‌ها/تست/تشریحی)، کارتِ فیلم (video-card) و کارتِ
   آزمایش (lab-card، کلاسِ جدا از content-card چون ساختارِ داخلی‌ش
   فرق داره: دکمه‌ی فیلم/انجام + دکمه‌های ادمین جدا از هم) ---------- */
@media screen and (orientation: landscape) and (max-height: 520px) {

  /* ---------- تیترِ صفحه («جزوات و کتاب‌ها» و ...) + دکمه‌های
     پایه: به‌جای دو ردیفِ بزرگ و وسط‌چین، یک ردیفِ باریک ---------- */
  .cat-page-section {
    padding: 14px 14px 20px !important;
  }
  .cat-page-title {
    font-size: 15px !important;
    margin: 0 0 8px !important;
  }
  .cat-grade-switch {
    margin-bottom: 12px !important;
    gap: 6px !important;
  }
  .cat-grade-switch-btn {
    padding: 5px 12px !important;
    font-size: 11px !important;
    border-radius: 20px !important;
  }

  /* ---------- کارتِ فیلم (نمونه‌تدریس/مشاوره): از کارتِ عمودیِ
     تصویر-بزرگ+عنوان به یک ردیفِ افقیِ جمع‌وجور، و مثلِ کارت‌های
     محتوا (جزوه) دوتا-دوتا کنارِ هم (نه یکی زیرِ یکی، تمامِ‌عرض) ---------- */
  .movies-grid {
    gap: 8px !important;
  }
  .video-card:not(.view-more) {
    width: calc(33.333% - 6px) !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 5px !important;
    border-radius: 12px !important;
  }
  .video-card:not(.view-more) .video-thumbnail {
    flex: 0 0 82px !important;
    width: 82px !important;
    height: 56px !important;
    border-radius: 8px !important;
    overflow: hidden !important;
  }
  .video-card:not(.view-more) .play-icon {
    width: 24px !important;
    height: 24px !important;
    font-size: 10px !important;
  }
  .video-card:not(.view-more) .video-duration {
    font-size: 8px !important;
    padding: 1px 4px !important;
    bottom: 3px !important;
    left: 3px !important;
  }
  .video-card:not(.view-more) .grade-badge-circle-base {
    width: 15px !important;
    height: 15px !important;
    font-size: 7px !important;
    top: auto !important;
    bottom: 3px !important;
    right: auto !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }
  .video-card:not(.view-more) .vc-access-badge {
    top: 3px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    padding: 1px 5px !important;
    font-size: 7px !important;
    white-space: nowrap !important;
  }
  .video-card:not(.view-more) .save-btn {
    width: 18px !important;
    height: 18px !important;
    font-size: 8px !important;
    bottom: 3px !important;
    right: 3px !important;
  }
  .video-card:not(.view-more) .delete-btn,
  .video-card:not(.view-more) .edit-btn {
    width: 18px !important;
    height: 18px !important;
    padding: 0 !important;
    font-size: 8px !important;
    bottom: 3px !important;
  }
  .video-card:not(.view-more) .video-info {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    padding: 3px 5px !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .video-card:not(.view-more) .video-info h3 {
    text-align: center !important;
    font-size: 11px !important;
    margin: 0 !important;
    width: 100% !important;
    flex-wrap: nowrap !important;
  }
  .video-card:not(.view-more) .video-info h3 .vc-title-text {
    display: block !important;
    width: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .video-card:not(.view-more) .video-info h3 .vc-title-icons {
    display: none !important;
  }
  .video-card:not(.view-more) .video-description {
    display: none !important;
  }

  /* ---------- کارتِ آزمایش (lab-card): همون منطقِ ردیفِ افقی،
     ولی با فوترِ دکمه‌های فیلم/انجام و ادمین به‌صورت جمع‌وجور
     و هم‌ردیف کنارِ عنوان ---------- */
  .lab-card {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    text-align: right !important;
    gap: 6px !important;
    padding: 6px !important;
    border-radius: 12px !important;
  }
  .lab-card .lab-thumb {
    flex: 0 0 78px !important;
    width: 78px !important;
    margin: 0 !important;
    align-self: stretch !important;
  }
  .lab-card .lab-thumb img {
    width: 78px !important;
    height: 100% !important;
    min-height: 52px !important;
    max-height: 64px !important;
  }
  .lab-card .lab-thumb .grade-badge-circle-base {
    width: 20px !important;
    height: 20px !important;
    font-size: 9px !important;
    top: auto !important;
    bottom: 4px !important;
    right: auto !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }
  .lab-card .lab-access-badge {
    top: 4px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    padding: 2px 7px !important;
    font-size: 8.5px !important;
    white-space: nowrap !important;
  }
  .lab-card .lab-body {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
  }
  .lab-card .lab-title {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    font-size: 11.5px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .lab-card .lab-desc {
    display: none !important;
  }
  .lab-card .lab-actions {
    flex: 0 0 auto !important;
    margin: 0 !important;
    gap: 5px !important;
  }
  .lab-card .lab-actions a,
  .lab-card .lab-actions button {
    flex: 0 0 auto !important;
    padding: 5px 9px !important;
    font-size: 10px !important;
    border-radius: 6px !important;
  }
  .lab-card .lab-admin-actions {
    flex-direction: row !important;
    gap: 4px !important;
    margin: 0 !important;
  }
  .lab-card .lab-admin-actions button {
    width: auto !important;
    padding: 6px 8px !important;
    font-size: 10px !important;
  }
}
/* ===================================================================
   مودالِ تأییدِ «پایان آزمون» (دو گزینه‌ی جذاب، روی سوالِ آخر)
   =================================================================== */
.exam-finish-confirm-overlay{
  position:absolute; inset:0; z-index:50;
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  background:rgba(15,16,28,.55);
  backdrop-filter:blur(3px);
  animation:examFinishFadeIn .18s ease;
}
@keyframes examFinishFadeIn{ from{ opacity:0; } to{ opacity:1; } }
.exam-finish-confirm-card{
  width:100%; max-width:400px;
  background:var(--exam-bg-soft, #f4f5fb);
  border:1px solid var(--exam-border, #e4e4f0);
  border-radius:22px;
  padding:30px 26px 26px;
  text-align:center;
  box-shadow:0 24px 60px rgba(20,15,60,.28);
  animation:examFinishPopIn .32s cubic-bezier(.22,.85,.32,1.15);
}
@keyframes examFinishPopIn{
  from{ opacity:0; transform:translateY(14px) scale(.94); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}
.exam-finish-confirm-icon{
  width:64px; height:64px; margin:0 auto 14px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:26px; color:#fff;
  background:linear-gradient(135deg, var(--exam-primary,#4f46e5), var(--exam-primary-dark,#3730a3));
  box-shadow:0 10px 24px rgba(79,70,229,.35);
}
.exam-finish-confirm-card h3{
  margin:0 0 8px; font-size:19px; color:var(--exam-text, #1f2333);
}
.exam-finish-confirm-card p{
  margin:0 0 22px; font-size:14px; line-height:1.9;
  color:var(--exam-text-soft, #6b7080);
}
.exam-finish-confirm-actions{
  display:flex; flex-direction:column; gap:10px;
}
.exam-finish-confirm-btn{
  display:flex; align-items:center; justify-content:center; gap:8px;
  border:none; border-radius:14px; padding:14px 16px;
  font-size:14.5px; font-weight:700; cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.exam-finish-confirm-btn:hover{ transform:translateY(-2px); }
.exam-finish-confirm-btn.finish{
  background:linear-gradient(135deg, var(--exam-success,#16a34a), #0f8a3d);
  color:#fff;
  box-shadow:0 10px 22px rgba(22,163,74,.32);
}
.exam-finish-confirm-btn.finish:hover{ box-shadow:0 14px 28px rgba(22,163,74,.4); }
.exam-finish-confirm-btn.review{
  background:var(--exam-border, #e4e4f0);
  color:var(--exam-text, #1f2333);
}
.exam-finish-confirm-btn.review:hover{ background:#d7d8ec; }
.exam-runner[data-theme="dark"] .exam-finish-confirm-btn.review{
  background:#242840; color:var(--exam-text,#eef0fa);
}
.exam-runner[data-theme="dark"] .exam-finish-confirm-btn.review:hover{ background:#2d3350; }

/* ===================================================================
   بنرِ سراسریِ «آزمون ناتمام» (روی صفحه‌ی اصلی/هر صفحه‌ای، خارج از exam-runner)
   =================================================================== */
.exam-unfinished-banner{
  position:fixed; z-index:9990;
  left:50%; bottom:18px;
  transform:translate(-50%, 24px);
  opacity:0;
  display:flex; align-items:center; gap:12px;
  max-width:min(94vw, 460px);
  background:#fff;
  border:1px solid var(--exam-border, #e4e4f0);
  border-radius:18px;
  padding:12px 14px;
  box-shadow:0 18px 40px rgba(20,15,60,.22);
  direction:rtl;
  transition:opacity .28s ease, transform .28s ease;
}
.exam-unfinished-banner.show{ opacity:1; transform:translate(-50%, 0); }
body.dark-mode .exam-unfinished-banner{
  background:var(--bg-light, #171923);
  border-color:rgba(255,255,255,.08);
}
.exam-unfinished-icon{
  flex:0 0 auto;
  width:42px; height:42px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:17px; color:#fff;
  background:linear-gradient(135deg, var(--exam-primary,#4f46e5), var(--exam-primary-dark,#3730a3));
}
.exam-unfinished-banner.finished .exam-unfinished-icon{
  background:linear-gradient(135deg, var(--exam-success,#16a34a), #0f8a3d);
}
.exam-unfinished-text{
  flex:1; min-width:0;
  display:flex; flex-direction:column; gap:2px;
}
.exam-unfinished-text b{
  font-size:13.5px; color:var(--text-main, #1f2333);
}
.exam-unfinished-text span{
  font-size:12px; color:var(--text-muted, #6b7080);
  direction:rtl; unicode-bidi:isolate;
}
body.dark-mode .exam-unfinished-text b{ color:var(--text-main, #eef0fa); }
body.dark-mode .exam-unfinished-text span{ color:var(--text-muted, #9aa0bb); }
.exam-unfinished-resume-btn{
  flex:0 0 auto;
  display:flex; align-items:center; gap:6px;
  border:none; border-radius:11px;
  padding:10px 14px;
  font-size:12.5px; font-weight:700; white-space:nowrap;
  cursor:pointer; color:#fff;
  background:linear-gradient(135deg, var(--exam-primary,#4f46e5), var(--exam-primary-dark,#3730a3));
  box-shadow:0 8px 18px rgba(79,70,229,.3);
  transition:transform .15s ease, box-shadow .15s ease;
}
.exam-unfinished-banner.finished .exam-unfinished-resume-btn{
  background:linear-gradient(135deg, var(--exam-success,#16a34a), #0f8a3d);
  box-shadow:0 8px 18px rgba(22,163,74,.3);
}
.exam-unfinished-resume-btn:hover{ transform:translateY(-2px); box-shadow:0 12px 22px rgba(79,70,229,.4); }
.exam-unfinished-close-btn{
  flex:0 0 auto;
  width:26px; height:26px; border-radius:50%; border:none;
  display:flex; align-items:center; justify-content:center;
  font-size:12px; cursor:pointer;
  background:var(--exam-border, #e4e4f0); color:var(--exam-text-soft, #6b7080);
  transition:background .15s ease;
}
.exam-unfinished-close-btn:hover{ background:#d7d8ec; }
body.dark-mode .exam-unfinished-close-btn{ background:rgba(255,255,255,.08); color:var(--text-muted,#9aa0bb); }
body.dark-mode .exam-unfinished-close-btn:hover{ background:rgba(255,255,255,.14); }

@media (max-width:520px){
  .exam-unfinished-banner{
    left:12px; right:12px; bottom:12px; max-width:none;
    transform:translateY(24px);
    flex-wrap:wrap;
  }
  .exam-unfinished-banner.show{ transform:translateY(0); }
  .exam-unfinished-resume-btn{ order:3; flex:1 1 100%; justify-content:center; margin-top:4px; }
}

/* ===================================================================
   مودالِ «درخواستِ ورودِ دستگاهِ دیگر» - سمتِ دستگاهِ مالک/فعلیِ آزمون
   (پیاده‌سازیِ کاملش: javascripts/Exam_generator.js -> showDeviceSwitchRequestModal)
   =================================================================== */
.exam-device-switch-overlay{
  position:absolute; inset:0; z-index:60;
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  background:rgba(15,16,28,.6);
  backdrop-filter:blur(3px);
  animation:examFinishFadeIn .18s ease;
}
.exam-device-switch-card{
  width:100%; max-width:400px;
  background:var(--exam-bg-soft, #f4f5fb);
  border:1px solid var(--exam-border, #e4e4f0);
  border-radius:22px;
  padding:30px 26px 26px;
  text-align:center;
  box-shadow:0 24px 60px rgba(20,15,60,.28);
  animation:examFinishPopIn .32s cubic-bezier(.22,.85,.32,1.15);
  direction:rtl;
}
.exam-runner[data-theme="dark"] .exam-device-switch-card{
  background:var(--exam-bg, #1b1e2e);
  border-color:rgba(255,255,255,.08);
}
.exam-device-switch-icon{
  width:64px; height:64px; margin:0 auto 14px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:26px; color:#fff;
  background:linear-gradient(135deg, #f59e0b, #d97706);
  box-shadow:0 10px 24px rgba(217,119,6,.35);
}
.exam-device-switch-card h3{
  margin:0 0 8px; font-size:19px; color:var(--exam-text, #1f2333);
}
.exam-runner[data-theme="dark"] .exam-device-switch-card h3{ color:var(--exam-text,#eef0fa); }
.exam-device-switch-card p{
  margin:0 0 22px; font-size:13.5px; line-height:1.9;
  color:var(--exam-text-soft, #6b7080);
}
.exam-device-switch-actions{
  display:flex; flex-direction:column; gap:10px;
}
.exam-device-switch-btn{
  display:flex; align-items:center; justify-content:center; gap:8px;
  border:none; border-radius:14px; padding:14px 16px;
  font-size:14.5px; font-weight:700; cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.exam-device-switch-btn:hover{ transform:translateY(-2px); }
.exam-device-switch-btn.accept{
  background:linear-gradient(135deg, var(--exam-success,#16a34a), #0f8a3d);
  color:#fff;
  box-shadow:0 10px 22px rgba(22,163,74,.32);
}
.exam-device-switch-btn.accept:hover{ box-shadow:0 14px 28px rgba(22,163,74,.4); }
.exam-device-switch-btn.reject{
  background:var(--exam-border, #e4e4f0);
  color:var(--exam-text, #1f2333);
}
.exam-device-switch-btn.reject:hover{ background:#d7d8ec; }
.exam-runner[data-theme="dark"] .exam-device-switch-btn.reject{
  background:#242840; color:var(--exam-text,#eef0fa);
}
.exam-runner[data-theme="dark"] .exam-device-switch-btn.reject:hover{ background:#2d3350; }

/* ===================================================================
   اورلیِ «در انتظارِ تاییدِ دستگاهِ دیگر» - سمتِ دستگاهِ درخواست‌دهنده
   (این اورلی، برخلافِ موردِ بالا، هنوز داخلِ exam-runner نیست چون آزمون هنوز
   شروع نشده - پس position:fixed روی کلِ صفحه‌ست)
   =================================================================== */
.exam-device-wait-overlay{
  position:fixed; inset:0; z-index:9995;
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  background:rgba(15,16,28,.6);
  backdrop-filter:blur(3px);
  animation:examFinishFadeIn .18s ease;
}
.exam-device-wait-card{
  width:100%; max-width:400px;
  background:#fff;
  border:1px solid var(--exam-border, #e4e4f0);
  border-radius:22px;
  padding:30px 26px 26px;
  text-align:center;
  box-shadow:0 24px 60px rgba(20,15,60,.28);
  animation:examFinishPopIn .32s cubic-bezier(.22,.85,.32,1.15);
  direction:rtl;
}
body.dark-mode .exam-device-wait-card{
  background:var(--bg-light, #171923);
  border-color:rgba(255,255,255,.08);
}
.exam-device-wait-spinner{
  width:46px; height:46px; margin:0 auto 16px;
  border-radius:50%;
  border:4px solid var(--exam-border, #e4e4f0);
  border-top-color:var(--exam-primary,#4f46e5);
  animation:examDeviceWaitSpin .8s linear infinite;
}
@keyframes examDeviceWaitSpin{ to{ transform:rotate(360deg); } }
.exam-device-wait-card h3{
  margin:0 0 8px; font-size:18px; color:var(--text-main, #1f2333);
}
body.dark-mode .exam-device-wait-card h3{ color:var(--text-main, #eef0fa); }
.exam-device-wait-card p{
  margin:0 0 20px; font-size:13.5px; line-height:1.9;
  color:var(--text-muted, #6b7080);
}
body.dark-mode .exam-device-wait-card p{ color:var(--text-muted, #9aa0bb); }
.exam-device-wait-cancel{
  border:none; border-radius:12px; padding:11px 18px;
  font-size:13px; font-weight:700; cursor:pointer;
  background:var(--exam-border, #e4e4f0); color:var(--exam-text, #1f2333);
  transition:background .15s ease;
}
.exam-device-wait-cancel:hover{ background:#d7d8ec; }
body.dark-mode .exam-device-wait-cancel{ background:rgba(255,255,255,.08); color:var(--text-main,#eef0fa); }
body.dark-mode .exam-device-wait-cancel:hover{ background:rgba(255,255,255,.14); }
/* ==========================================================================
   ⭐ رندرِ صحیحِ کسر (خطِ افقی) و رادیکال داخلِ متنِ سوال/گزینه/پاسخِ سوال‌های تایپی
   .qb-typing-render همون کلاسیه که همه‌جای سایت (پیش‌نمایشِ ساختِ سوال با AI، بانکِ
   سوال، برگه‌ی امتحان، حالتِ حل‌کردنِ آزمون) برای نمایشِ HTMLِ سوال استفاده می‌شه؛
   قبل از این، این کلاس‌ها اصلاً استایل نداشتن و ساختارِ frac/eq-radical که پرامپتِ AI
   (و ادیتورِ خودِ سایت) تولید می‌کنه به‌صورتِ متنِ خامِ بی‌شکل نمایش داده می‌شد.
   استایل‌ها دقیقاً هم‌شکلِ ادیتورِ رسمیِ سایت (editor/index.html) پیاده‌سازی شدن.
   ========================================================================== */
.qb-typing-render .fline{ min-height:1em; }
.qb-typing-render .fline-ltr{ text-align:left; direction:ltr; }
.qb-typing-render sup{
  font-size:78%; line-height:0; position:relative; top:-0.5em;
  font-family:'Vazirmatn','Noto Naskh Arabic',serif; font-weight:600;
}
.qb-typing-render sub{
  font-size:78%; line-height:0; position:relative; top:0.2em;
  font-family:'Vazirmatn','Noto Naskh Arabic',serif;
}

/* کسر: خطِ افقی بینِ صورت و مخرج */
.qb-typing-render .frac{
  display:inline-flex; flex-direction:column; align-items:center;
  vertical-align:middle; margin:0 4px; line-height:1.5;
  font-size:0.9em; position:relative; top:0.1em;
}
.qb-typing-render .frac .frac-num{
  padding:0.05em 4px 0.32em; border-bottom:1.4px solid currentColor;
}
.qb-typing-render .frac .frac-den{
  padding:0.32em 4px 0.05em;
}
.qb-typing-render .frac.frac-small{ font-size:0.7em; }

/* رادیکال: عبارتِ زیرِ رادیکال دقیقاً زیرِ خطِ افقی و داخلِ نشانه‌ی √ قرار می‌گیره */
.qb-typing-render .eq-radical{ display:inline-flex; align-items:flex-end; margin:0 2px; line-height:1; }
.qb-typing-render .eq-radical .eq-radical-index{
  font-size:0.55em; align-self:flex-start; margin-left:-2px; margin-right:1px; min-width:8px; line-height:1;
}
.qb-typing-render .eq-radical .eq-radical-sign{ font-size:1.15em; line-height:1; }
.qb-typing-render .eq-radical .eq-radical-content{
  border-top:1.4px solid currentColor; padding:0 3px 0 1px; margin-right:-1px; line-height:1.1;
}

/* هر جفت‌ِپرانتزِ دستی (که در پاسخ‌های تشریحی برای جای‌گذاریِ مقادیر به‌کار می‌ره) هم به‌صورتِ
   یک بلوکِ اتمیک باقی بمونه و وسطِ خط نصفه نشکنه */
.qb-typing-render bdi[dir="rtl"]{ display:inline-block; }
.qb-typing-render bdi[dir="ltr"]{ unicode-bidi:isolate; }