/*
Theme Name: AnkiMed
Version: 1.0.0
Description: قالب فلش‌کارت پزشکی — سیستم یادگیری با الگوریتم Spaced Repetition
Author: AnkiMed
Text Domain: ankimed
*/

/* ==========================================================================
   1. فونت‌های محلی
   ========================================================================== */
@font-face {
    font-family: 'Vazirmatn';
    src: url('./fonts/Vazirmatn-Regular.woff2') format('woff2');
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Vazirmatn';
    src: url('./fonts/Vazirmatn-SemiBold.woff2') format('woff2');
    font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Vazirmatn';
    src: url('./fonts/Vazirmatn-Bold.woff2') format('woff2');
    font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Vazirmatn';
    src: url('./fonts/Vazirmatn-Black.woff2') format('woff2');
    font-weight: 900; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Material Icons Round';
    font-style: normal; font-weight: 400;
    src: url('./fonts/MaterialIconsRound-Regular.woff2') format('woff2');
    font-display: block;
}
.material-icons-round {
    font-family: 'Material Icons Round';
    font-weight: normal; font-style: normal; font-size: 24px;
    line-height: 1; letter-spacing: normal; text-transform: none;
    display: inline-block; white-space: nowrap; word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}

/* ==========================================================================
   2. متغیرهای رنگی (CSS Variables)
   ========================================================================== */
:root {
    --primary:       #F59E0B;
    --primary-rgb:   245, 158, 11;
    --primary-dark:  #D97706;
    --primary-light: rgba(245, 158, 11, 0.12);

    --accent:        #FF6B6B;
    --accent-rgb:    255, 107, 107;

    --success:       #10B981;
    --success-rgb:   16, 185, 129;
    --success-light: #D1FAE5;

    --gold:          #F59E0B;
    --gold-rgb:      245, 158, 11;

    /* semantic */
    --warning-bg:     #FFFBEB;
    --warning-text:   #92400E;
    --warning-border: #FCD34D;
    --warning-icon:   #D97706;

    --error-bg:       #FEF2F2;
    --error-text:     #B91C1C;
    --error-border:   #FCA5A5;
    --error-icon:     #EF4444;

    --info-bg:        rgba(245, 158, 11, 0.08);
    --info-text:      #D97706;
    --info-border:    rgba(245, 158, 11, 0.25);

    /* سطوح */
    --bg:             #F0F4F4;
    --surface:        #FFFFFF;
    --surface-hover:  #F4F9F9;
    --surface-raised: #FFFFFF;

    /* متن */
    --text-main:  #1E293B;
    --text-mid:   #475569;
    --text-light: #94A3B8;

    /* حاشیه و سایه */
    --border:      #E2E8F0;
    --shadow-sm:   0 2px 8px rgba(245, 158, 11, 0.08);
    --shadow-md:   0 4px 16px rgba(245, 158, 11, 0.12);
    --shadow-top:  0 -2px 10px rgba(0,0,0,0.05);

    /* ابعاد */
    --header-h:  80px;
    --nav-h:     65px;
    --radius:    16px;
    --sidebar-w: 320px;
}

[data-theme="dark"] {
    /* ---- رنگ اصلی — amber روشن‌تر برای کنتراست روی dark ---- */
    --primary:       #FBBF24;
    --primary-rgb:   251, 191, 36;
    --primary-light: rgba(251, 191, 36, 0.14);
    --primary-dark:  #F59E0B;

    --accent:        #F87171;
    --accent-rgb:    248, 113, 113;

    --success:       #34D399;
    --success-rgb:   52, 211, 153;
    --success-light: rgba(52, 211, 153, 0.12);

    --gold:          #FBBF24;
    --gold-rgb:      251, 191, 36;

    /* ---- semantic ---- */
    --warning-bg:     rgba(251, 191, 36, 0.10);
    --warning-text:   #FDE68A;
    --warning-border: rgba(251, 191, 36, 0.28);
    --warning-icon:   #FBBF24;

    --error-bg:       rgba(239, 68, 68, 0.10);
    --error-text:     #FCA5A5;
    --error-border:   rgba(239, 68, 68, 0.28);
    --error-icon:     #F87171;

    --info-bg:        rgba(251, 191, 36, 0.10);
    --info-text:      #FDE68A;
    --info-border:    rgba(251, 191, 36, 0.25);

    /* ---- پس‌زمینه — neutral dark (بدون رنگ سبز ممورال) ---- */
    --bg:             #111113;
    --surface:        #1C1C1F;
    --surface-hover:  #26262A;
    --surface-raised: #2E2E33;

    /* ---- متن ---- */
    --text-main:  #F4F4F5;
    --text-mid:   #A1A1AA;
    --text-light: #52525B;

    /* ---- حاشیه و سایه ---- */
    --border:     #3F3F46;
    --shadow-sm:  0 2px 8px rgba(0,0,0,0.50);
    --shadow-md:  0 4px 16px rgba(0,0,0,0.60);
    --shadow-top: 0 -2px 10px rgba(0,0,0,0.55);
}

/* ==========================================================================
   3. پایه
   ========================================================================== */
*, *::before, *::after {
    box-sizing: border-box; margin: 0; padding: 0;
    -webkit-tap-highlight-color: transparent;
}
body {
    font-family: 'Vazirmatn', Tahoma, sans-serif;
    background-color: var(--bg);
    color: var(--text-main);
    line-height: 1.6;
    overflow-x: hidden;
    direction: rtl;
}
a { text-decoration: none; color: inherit; }

/* ==========================================================================
   4. هدر
   ========================================================================== */
header {
    position: fixed; top: 0; left: 0; right: 0;
    background: var(--surface);
    z-index: 1000;
    box-shadow: var(--shadow-sm);
    transition: background 0.3s;
    padding-top: env(safe-area-inset-top);
    width: 100%;
}
.header-top {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 16px; gap: 12px; width: 100%; box-sizing: border-box;
}
.header-search-container { flex: 1; min-width: 0; }
.header-left { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.brand-name {
    font-weight: 950; font-size: 1.2rem; color: var(--primary);
    letter-spacing: -0.5px; white-space: nowrap;
}

.search-wrapper {
    position: relative; display: flex; align-items: center;
    background: var(--surface-hover); border-radius: 12px;
    padding: 0 14px; border: 1px solid var(--border);
    transition: border-color 0.2s; width: 100%;
}
.search-wrapper:focus-within { border-color: var(--primary); }
.search-input {
    flex: 1; min-width: 0; border: none; background: transparent;
    padding: 10px; font-family: inherit; font-size: 0.9rem;
    color: var(--text-main); outline: none;
}
.search-wrapper .material-icons-round { color: var(--text-light); font-size: 20px; }

.live-search-dropdown {
    position: absolute; top: 110%; left: 0; right: 0;
    background: var(--surface); border-radius: 12px;
    box-shadow: var(--shadow-md); border: 1px solid var(--border);
    max-height: 350px; overflow-y: auto; z-index: 2000;
    opacity: 0; visibility: hidden; transform: translateY(-10px);
    transition: all 0.2s ease;
}
.live-search-dropdown.show { opacity: 1; visibility: visible; transform: translateY(0); }
.search-res-item {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px; border-bottom: 1px solid var(--border); transition: background 0.2s;
}
.search-res-item:last-child { border-bottom: none; }
.search-res-item:hover { background: var(--surface-hover); }
.search-res-item .material-icons-round { color: var(--primary); background: var(--primary-light); padding: 6px; border-radius: 8px; }
.search-res-item strong { display: block; font-size: 0.9rem; color: var(--text-main); margin-bottom: 2px; }
.search-res-item small { display: block; font-size: 0.75rem; color: var(--text-mid); }

/* ==========================================================================
   5. کانتینر اصلی
   ========================================================================== */
#app-container {
    padding-top: var(--header-h);
    padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 20px);
    max-width: 600px; margin: 0 auto; width: 100%; min-height: 100vh;
}
.view-tab { padding: 20px; animation: fadeIn 0.3s ease-in-out; }

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   6. سایدبارها
   ========================================================================== */
.overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.6); z-index: 1001; display: none;
    backdrop-filter: blur(2px);
}
.sidebar {
    position: fixed; top: 0;
    width: 85vw; max-width: 380px; height: 100vh;
    background: var(--surface); z-index: 1002;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: var(--shadow-md);
    padding: calc(env(safe-area-inset-top) + 24px) 24px 24px;
    display: flex; flex-direction: column; overflow-y: auto;
}
.sidebar-right { right: 0; left: auto; transform: translateX(100%); border-left: 1px solid var(--border); }
.sidebar-right.active { transform: translateX(0); }
.sidebar-left  { left: 0; right: auto; transform: translateX(-100%); border-right: 1px solid var(--border); }
.sidebar-left.active  { transform: translateX(0); }

.sidebar-profile-content { display: flex; flex-direction: column; flex: 1; }
.sidebar-bottom-action { margin-top: auto; padding-top: 20px; }

.sidebar-link {
    display: flex; align-items: center; gap: 14px;
    padding: 12px; color: var(--text-main); font-weight: 800;
    border-radius: 12px; transition: background 0.2s; font-size: 0.95rem;
}
.sidebar-link:hover { background: var(--surface-hover); }
.sidebar-link .material-icons-round { color: var(--text-light); }

.hide-on-mobile { display: none; }

/* ==========================================================================
   7. navbar پایین
   ========================================================================== */
.bottom-nav {
    position: fixed; bottom: 0; left: 0; right: 0;
    height: calc(var(--nav-h) + env(safe-area-inset-bottom));
    background: var(--surface); display: flex; justify-content: space-around;
    padding-bottom: env(safe-area-inset-bottom);
    box-shadow: var(--shadow-top); z-index: 900; direction: rtl;
}
.nav-item {
    flex: 1; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    color: var(--text-light); gap: 4px; transition: color 0.2s; cursor: pointer;
    position: relative;
}
.nav-icon { font-size: 24px; transition: transform 0.2s; }
.nav-text  { font-size: 0.7rem; font-weight: 800; }
.nav-item.active { color: var(--primary); }
.nav-item.active .nav-icon { transform: translateY(-2px); }
.nav-badge {
    position: absolute; top: 6px; left: 50%;
    transform: translateX(10px);
    background: var(--accent); color: #fff;
    font-size: 0.55rem; font-weight: 700;
    min-width: 16px; height: 16px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center; padding: 0 3px;
}

/* ==========================================================================
   8. کامپوننت‌های مشترک UI
   ========================================================================== */
.icon-btn {
    width: 40px; height: 40px; border-radius: 50%; border: none;
    background: transparent; display: flex; align-items: center;
    justify-content: center; cursor: pointer; color: var(--text-main); transition: background 0.2s;
}
.icon-btn:active { background: var(--surface-hover); }

.auth-btn {
    width: 100%; background: var(--primary); color: white; border: none;
    padding: 14px; border-radius: 12px; font-size: 1rem; font-weight: 900;
    font-family: inherit; cursor: pointer; transition: background 0.2s, transform 0.1s;
    display: flex; align-items: center; justify-content: center; gap: 8px;
}
.auth-btn:active { transform: scale(0.98); }

.form-group { margin-bottom: 16px; text-align: right; }
.form-input {
    width: 100%; padding: 12px 14px; border: 1px solid var(--border);
    border-radius: 10px; background: var(--surface-hover); color: var(--text-main);
    font-family: inherit; font-size: 0.95rem; outline: none; transition: border-color 0.2s;
    direction: rtl;
}
.form-input:focus { border-color: var(--primary); background: var(--surface); }

.empty-state {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 12px; padding: 40px 20px; text-align: center;
}
.spinner {
    width: 34px; height: 34px; border: 4px solid var(--border);
    border-top-color: var(--primary); border-radius: 50%;
    animation: spin 0.7s linear infinite; margin: 24px auto;
}
.spinner-inline {
    width: 20px; height: 20px; border: 3px solid rgba(255,255,255,0.3);
    border-top-color: #fff; border-radius: 50%;
    animation: spin 0.7s linear infinite; display: inline-block; vertical-align: middle;
}
.spinner-inline.hidden { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }

.toast {
    position: fixed;
    bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 20px);
    left: 50%; transform: translateX(-50%) translateY(100px);
    background: #334155; color: white; padding: 12px 24px;
    border-radius: 30px; font-size: 0.85rem; font-weight: 800;
    z-index: 3000; opacity: 0; transition: all 0.3s;
    box-shadow: var(--shadow-md); white-space: nowrap; max-width: 90vw;
}
.toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }

.memoral-pagination { margin-top: 20px; text-align: center; }
.memoral-pagination .page-numbers {
    display: inline-block; padding: 6px 12px; margin: 0 4px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 8px; color: var(--text-main); font-weight: 700; font-size: 0.9rem;
}
.memoral-pagination .page-numbers.current { background: var(--primary); color: white; border-color: var(--primary); }

/* ---- وضعیت صفحه ---- */
.content-title-area {
    position: relative; margin-bottom: 24px;
    border-bottom: 2px solid var(--primary-light);
    padding-bottom: 16px; text-align: center;
}
.content-main-title {
    font-size: 1.4rem; font-weight: 950; color: var(--text-main);
    margin-bottom: 8px; padding: 0 50px; line-height: 1.4; word-break: break-word;
}
.content-sub-title { font-size: 0.85rem; color: var(--text-light); font-weight: 600; margin-top: 6px; }

.single-floating-btn {
    position: absolute; top: 0; z-index: 2;
    background: var(--surface-hover); border: 1px solid var(--border);
    width: 45px; height: 45px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: var(--text-main); cursor: pointer; transition: all 0.2s;
}
.single-floating-btn:hover { background: var(--primary-light); color: var(--primary); }
.btn-right { right: 0; }
.btn-left  { left: 0; }

.section-header { margin-bottom: 14px; }
.section-title {
    display: flex; align-items: center; gap: 8px;
    font-size: 1rem; font-weight: 900; color: var(--text-main); margin: 0;
}

/* آواتار */
.avatar-upload-box { position: relative; width: 90px; height: 90px; margin: 0 auto 16px; border-radius: 50%; }
.profile-avatar {
    width: 90px !important; height: 90px !important; border-radius: 50% !important;
    object-fit: cover !important; border: 3px solid var(--primary);
    background: var(--surface-hover); display: block; margin: 0 auto;
}
.avatar-edit-btn {
    position: absolute; bottom: 0; right: 0;
    background: var(--primary); color: white;
    width: 30px; height: 30px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; border: 2px solid var(--surface); box-shadow: var(--shadow-sm);
}

/* VIP */
.vip-badge {
    background: var(--warning-bg); color: var(--warning-text);
    border: 1px solid var(--warning-border); border-radius: 8px;
    padding: 4px 12px; font-size: 0.78rem; font-weight: 800;
    display: inline-flex; align-items: center; gap: 4px;
}

/* کامنت */
.comment-item {
    background: var(--surface); border-radius: var(--radius);
    padding: 16px; margin-bottom: 16px; border: 1px solid var(--border);
    position: relative; box-shadow: var(--shadow-sm);
}
.comment-item.is-pick { border: 2px solid var(--gold); }
.pick-badge {
    position: absolute; top: -12px; right: 16px;
    background: var(--gold); color: #fff; padding: 4px 10px;
    border-radius: 8px; font-size: 0.7rem; font-weight: 900;
}
.comment-meta { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.comment-author-info { display: flex; align-items: center; gap: 10px; }
.comment-author-avatar { width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--primary-light); object-fit: cover; }
.comment-author-name { font-weight: 900; font-size: 0.9rem; color: var(--text-main); }
.comment-date { font-size: 0.75rem; color: var(--text-light); font-weight: 600; }
.comment-body { font-size: 0.95rem; color: var(--text-mid); line-height: 1.7; font-weight: 600; }

/* profile stat */
.profile-stat-card {
    background: var(--surface-hover); border: 1px solid var(--border);
    border-radius: 10px; padding: 14px; text-align: center; transition: border-color 0.2s;
}
.profile-stat-card:hover { border-color: var(--primary); }
.profile-stat-num   { font-size: 1.4rem; font-weight: 950; }
.profile-stat-label { font-size: 0.78rem; color: var(--text-mid); font-weight: 700; margin-top: 2px; display: flex; align-items: center; justify-content: center; gap: 4px; }

/* ==========================================================================
   9. کارت بسته (Deck Card)
   ========================================================================== */
.deck-list { display: flex; flex-direction: column; gap: 14px; }

.deck-card {
    background: var(--surface); border-radius: var(--radius);
    padding: 18px; display: flex; flex-direction: column; gap: 10px;
    border: 1px solid var(--border); box-shadow: var(--shadow-sm);
    transition: transform 0.15s, box-shadow 0.15s, border-color 0.2s;
}
.deck-card:active { transform: scale(0.99); }
.deck-card:hover  { border-color: var(--primary); box-shadow: var(--shadow-md); }

.deck-card-header { display: flex; align-items: flex-start; gap: 14px; }
.deck-icon-box {
    width: 52px; height: 52px; border-radius: 14px;
    background: var(--primary-light); display: flex; align-items: center;
    justify-content: center; flex-shrink: 0;
}
.deck-icon-box .material-icons-round { color: var(--primary); font-size: 26px; }
.deck-card-info { flex: 1; min-width: 0; }
.deck-card-title { font-weight: 900; font-size: 1.05rem; color: var(--text-main); margin-bottom: 4px; }
.deck-card-meta  { font-size: 0.78rem; color: var(--text-mid); font-weight: 600; }

.deck-badge {
    display: inline-block; background: var(--primary-light); color: var(--primary);
    padding: 2px 10px; border-radius: 20px; font-size: 0.72rem; font-weight: 800;
}
.deck-badge-level {
    display: inline-block; background: var(--info-bg); color: var(--info-text);
    padding: 2px 10px; border-radius: 20px; font-size: 0.72rem; font-weight: 800;
}

/* نوار پیشرفت */
.progress-bar {
    background: var(--border); border-radius: 99px; height: 8px; overflow: hidden;
}
.progress-fill {
    background: linear-gradient(90deg, var(--primary), #3B82F6);
    height: 100%; border-radius: 99px; transition: width 0.6s ease;
}
.progress-label { font-size: 0.78rem; color: var(--text-mid); font-weight: 600; }

/* وضعیت کارت‌ها */
.deck-counts { display: flex; gap: 8px; flex-wrap: wrap; font-size: 0.78rem; font-weight: 700; }
.count-chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 10px; border-radius: 20px;
}
.count-chip.new     { background: rgba(99, 102, 241, 0.1); color: #6366f1; }
.count-chip.learn   { background: rgba(249, 115, 22, 0.1);  color: #f97316; }
.count-chip.review  { background: rgba(34, 197, 94, 0.1);   color: #22c55e; }
.count-chip.mastered{ background: var(--primary-light);      color: var(--primary); }

/* دکمه مطالعه */
.btn-study {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    background: var(--primary); color: #fff; padding: 12px;
    border-radius: 12px; font-weight: 900; font-size: 0.95rem;
    transition: background 0.15s, transform 0.1s; border: none; cursor: pointer;
    font-family: inherit; width: 100%; text-decoration: none;
}
.btn-study:hover { background: var(--primary-dark); }
.btn-study:active { transform: scale(0.98); }
.btn-study.disabled { background: var(--border); color: var(--text-light); cursor: default; }

.all-done-chip {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    background: var(--success-light); color: var(--success);
    padding: 10px; border-radius: 12px; font-weight: 800; font-size: 0.88rem;
}

/* ==========================================================================
   10. داشبورد — خلاصه آمار
   ========================================================================== */
.stats-grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
    margin-bottom: 24px;
}
@media (min-width: 400px) { .stats-grid { grid-template-columns: repeat(4, 1fr); } }

.stat-card {
    background: var(--surface); border-radius: var(--radius);
    padding: 16px 12px; text-align: center;
    border: 1px solid var(--border); box-shadow: var(--shadow-sm);
    border-top: 3px solid var(--border);
}
.stat-card.due      { border-top-color: #ef4444; }
.stat-card.reviewed { border-top-color: var(--success); }
.stat-card.mastered { border-top-color: var(--primary); }
.stat-card.streak   { border-top-color: var(--gold); }

.stat-num  { display: block; font-size: 1.8rem; font-weight: 950; color: var(--text-main); line-height: 1.1; }
.stat-lbl  { font-size: 0.72rem; color: var(--text-mid); font-weight: 700; margin-top: 4px; }

/* ==========================================================================
   11. رابط مطالعه (Study Session)
   ========================================================================== */

/* هدر جلسه */
.study-header {
    display: flex; align-items: center; gap: 12px; margin-bottom: 20px;
}
.study-header h2  { flex: 1; margin: 0; font-size: 1.1rem; font-weight: 900; color: var(--text-main); }
.study-progress-text { font-size: 0.85rem; color: var(--text-mid); white-space: nowrap; font-weight: 700; }

/* نوار پیشرفت جلسه */
.session-progress-bar {
    background: var(--border); border-radius: 99px; height: 6px;
    overflow: hidden; margin-bottom: 24px;
}
.session-progress-fill {
    background: var(--primary); height: 100%; border-radius: 99px;
    transition: width 0.4s ease;
}

/* کارت فلش */
.flashcard-wrap {
    perspective: 1200px;
    cursor: pointer;
    min-height: 260px;
    margin-bottom: 20px;
    user-select: none;
}
.flashcard-inner {
    position: relative; width: 100%; min-height: 260px;
    transition: transform 0.55s cubic-bezier(0.4,0,0.2,1);
    transform-style: preserve-3d;
}
.flashcard-inner.flipped { transform: rotateY(180deg); }

.flashcard-face {
    position: absolute; width: 100%; min-height: 260px;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    background: var(--surface); border-radius: var(--radius);
    box-shadow: var(--shadow-md); padding: 28px 24px;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    border: 1px solid var(--border); box-sizing: border-box;
}
.flashcard-back-face {
    transform: rotateY(180deg);
    background: #f0fdf4; border-color: #bbf7d0;
}
[data-theme="dark"] .flashcard-back-face {
    background: rgba(251, 191, 36, 0.05);
    border-color: rgba(251, 191, 36, 0.18);
}

.card-label {
    font-size: 0.72rem; font-weight: 900; letter-spacing: 1px;
    color: var(--text-light); text-transform: uppercase;
    margin-bottom: 14px; align-self: flex-start;
}
.card-content {
    font-size: 1.15rem; line-height: 1.8; text-align: center;
    color: var(--text-main); direction: rtl; width: 100%;
}
.card-image {
    max-width: 100%; max-height: 180px; border-radius: 10px;
    margin-top: 14px; object-fit: contain; border: 1px solid var(--border);
}
.card-hint-btn {
    margin-top: 14px; background: none; border: 1px dashed var(--border);
    color: var(--text-light); padding: 5px 16px; border-radius: 20px;
    cursor: pointer; font-family: inherit; font-size: 0.82rem; transition: all 0.2s;
}
.card-hint-btn:hover { border-color: var(--primary); color: var(--primary); }
.card-hint-text {
    margin-top: 10px; background: #fef9c3; color: #78350f;
    padding: 8px 14px; border-radius: 8px; font-size: 0.85rem;
    direction: rtl; text-align: center;
}
[data-theme="dark"] .card-hint-text { background: rgba(245,158,11,0.12); color: #fde68a; }

/* ناحیه اکشن */
.action-area { text-align: center; }

.btn-show-answer {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--primary); color: #fff; padding: 14px 40px;
    border-radius: 14px; border: none; font-size: 1rem; font-weight: 900;
    cursor: pointer; font-family: inherit;
    transition: background 0.15s, transform 0.1s; box-shadow: var(--shadow-sm);
}
.btn-show-answer:hover  { background: var(--primary-dark); }
.btn-show-answer:active { transform: scale(0.98); }

/* دکمه‌های رتبه‌بندی */
.rating-prompt { color: var(--text-mid); font-size: 0.9rem; font-weight: 700; margin-bottom: 12px; }

.rating-buttons {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
}
@media (max-width: 360px) { .rating-buttons { grid-template-columns: repeat(2, 1fr); } }

.rating-btn {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 12px 8px; border-radius: 12px;
    border: 2px solid var(--clr);
    background: color-mix(in srgb, var(--clr) 10%, transparent);
    color: var(--clr); cursor: pointer; font-family: inherit;
    transition: background 0.15s, transform 0.1s;
}
.rating-btn:hover { background: var(--clr); color: #fff; transform: translateY(-2px); }
.rating-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.r-label { font-size: 0.9rem; font-weight: 900; }
.r-next  { font-size: 0.7rem; opacity: 0.75; }

/* پایان جلسه */
.study-complete {
    text-align: center; padding: 48px 20px;
    background: var(--surface); border-radius: var(--radius);
    border: 1px solid var(--border); box-shadow: var(--shadow-sm);
}
.study-complete-icon { font-size: 4rem; margin-bottom: 16px; }
.study-complete h2   { font-size: 1.6rem; font-weight: 950; margin-bottom: 10px; }
.study-complete p    { color: var(--text-mid); margin-bottom: 24px; font-size: 0.95rem; }

/* ==========================================================================
   12. فروشگاه
   ========================================================================== */
.shop-grid {
    display: grid; grid-template-columns: 1fr; gap: 16px;
}
.shop-card {
    background: var(--surface); border-radius: var(--radius);
    padding: 20px; border: 1px solid var(--border); box-shadow: var(--shadow-sm);
    display: flex; flex-direction: column; gap: 10px;
    transition: transform 0.15s, border-color 0.2s;
}
.shop-card:hover { border-color: var(--primary); transform: translateY(-2px); }

.shop-card-header { display: flex; align-items: flex-start; gap: 14px; }
.shop-card-body   { font-size: 0.88rem; color: var(--text-mid); line-height: 1.7; }
.shop-card-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; }
.shop-price { font-size: 1.1rem; font-weight: 950; color: var(--primary); }
.shop-price-free { color: var(--success); }
.btn-buy {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--primary); color: #fff;
    padding: 10px 20px; border-radius: 10px;
    font-weight: 900; font-size: 0.88rem; text-decoration: none;
    transition: background 0.15s; border: none; cursor: pointer; font-family: inherit;
}
.btn-buy:hover { background: var(--primary-dark); }
.btn-buy.free  { background: var(--success); }
.owned-chip {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--success-light); color: var(--success);
    padding: 8px 16px; border-radius: 10px; font-weight: 800; font-size: 0.85rem;
}

/* ==========================================================================
   13. رسپانسیو و دسکتاپ ۳ ستونه
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1023px) {
    #app-container { max-width: 700px; }
}

@media (min-width: 1024px) {
    .sidebar { width: var(--sidebar-w) !important; max-width: 100vw; }
    header { left: var(--sidebar-w); right: var(--sidebar-w); width: auto; }
    .header-top { padding: 20px; }
    .sidebar-right { transform: translateX(0); }
    .sidebar-left  { transform: translateX(0); }
    #app-container {
        margin-left: var(--sidebar-w); margin-right: var(--sidebar-w);
        max-width: none; width: auto; padding-top: 100px; padding-bottom: 40px;
    }
    .bottom-nav { display: none; }
    .overlay { display: none !important; }
    .hide-on-desktop, .close-btn-mobile { display: none !important; }
    .hide-on-mobile { display: flex; flex-direction: column; }
    .toast { bottom: 40px; }
    .stats-grid { grid-template-columns: repeat(4, 1fr); }
    .shop-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   14. Dark mode overrides
   ========================================================================== */
[data-theme="dark"] .flashcard-face      { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .rx-card            { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .rx-card:hover      { background: var(--surface-hover); border-color: var(--primary); }
[data-theme="dark"] .comment-item       { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .comment-item.is-pick { background: rgba(var(--gold-rgb), 0.06) !important; border-color: rgba(var(--gold-rgb), 0.35) !important; }
[data-theme="dark"] .deck-card          { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .stat-card          { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .shop-card          { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .empty-state        { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .spinner            { border-color: var(--border); border-top-color: var(--primary); }
[data-theme="dark"] .toast              { background: var(--surface-raised); color: var(--text-main); border: 1px solid var(--border); }
[data-theme="dark"] .bottom-nav         { background: var(--surface); border-top-color: var(--border); }
[data-theme="dark"] .nav-item           { color: var(--text-light); }
[data-theme="dark"] .nav-item.active    { color: var(--primary); }
[data-theme="dark"] #main-site-header   { background: var(--surface); }
[data-theme="dark"] .search-wrapper     { background: var(--surface-hover); border-color: var(--border); }
[data-theme="dark"] .search-input       { color: var(--text-main); }
[data-theme="dark"] .live-search-dropdown { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .sidebar            { background: var(--surface); }
[data-theme="dark"] .sidebar-link       { color: var(--text-main); }
[data-theme="dark"] .sidebar-link:hover { background: var(--surface-hover); }
[data-theme="dark"] .form-input         { background: var(--surface-hover); border-color: var(--border); color: var(--text-main); }
[data-theme="dark"] .form-input:focus   { background: var(--surface); border-color: var(--primary); }
[data-theme="dark"] .sb-auth-tabs       { background: var(--surface-hover); }
[data-theme="dark"] .sb-tab-btn.active  { background: var(--surface); color: var(--primary); }
[data-theme="dark"] .auth-btn           { background: var(--primary); color: #fff; }
[data-theme="dark"] .icon-btn           { background: var(--surface-hover); color: var(--text-main); }
[data-theme="dark"] .status-badge       { background: var(--surface-hover); border-color: var(--border); }
[data-theme="dark"] .vip-badge          { background: var(--warning-bg); color: var(--warning-text); border-color: var(--warning-border); }
[data-theme="dark"] .memoral-pagination .page-numbers { background: var(--surface); border-color: var(--border); color: var(--text-main); }
[data-theme="dark"] .memoral-pagination .page-numbers.current { background: var(--primary); color: #fff; }
[data-theme="dark"] .sb-msg.error       { background: var(--error-bg); color: var(--error-text); border-color: var(--error-border); }
[data-theme="dark"] .sb-msg.success     { background: rgba(var(--success-rgb), 0.12); color: var(--success); }
[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--bg); }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--surface-hover); }

/* ==========================================================================
   15. transition تم‌سوئیچ
   ========================================================================== */
*, *::before, *::after {
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.1s ease, box-shadow 0.2s ease;
}
.material-icons-round, img, svg, .spinner, .spinner-inline,
.flashcard-inner, input, textarea {
    transition: none !important;
}
input, textarea, select {
    transition: border-color 0.2s ease, background-color 0.2s ease !important;
}

/* ==========================================================================
   16. footer و bottom nav
   ========================================================================== */
.site-footer { display: none !important; }

@media (max-width: 1023px) {
    body { padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px)); }
}
@media (min-width: 1024px) {
    body { padding-bottom: 0 !important; }
}