:root {
    /* QuizB Design Tokens — keep this file as the web visual source of truth. */
    --qb-brand: #0d9488;
    --qb-brand-strong: #0f766e;
    --qb-brand-soft: #f0fdfa;
    --qb-info: #0284c7;
    --qb-info-soft: #f0f9ff;
    --qb-success: #15803d;
    --qb-warning: #b45309;
    --qb-danger: #dc2626;
    --qb-violet: #6d28d9;
    --qb-teal: #0f766e;
    --qb-teal-soft: #f0fdfa;
    --qb-rose: #be123c;
    --qb-rose-soft: #fff1f2;
    --qb-slate: #475569;
    --qb-slate-soft: #f1f5f9;
    --qb-surface: #ffffff;
    --qb-surface-muted: #f8fafc;
    --qb-page: #f1f5f9;
    --qb-text: #0f172a;
    --qb-muted: #64748b;
    --qb-border: #cbd5e1;
    --qb-border-soft: #e2e8f0;
    --qb-radius-control: 10px;
    --qb-radius-tile: 16px;
    --qb-radius-card: 20px;
    --qb-radius-hero: 24px;
    --qb-space-1: .25rem;
    --qb-space-2: .5rem;
    --qb-space-3: .75rem;
    --qb-space-4: 1rem;
    --qb-space-5: 1.25rem;
    --qb-space-6: 1.5rem;
    --qb-tile-height: 3.25rem;
    --qb-shadow-card: 0 4px 18px rgba(15, 23, 42, .06);
    --qb-shadow-hover: 0 14px 30px rgba(15, 23, 42, .12);
    --qb-focus-ring: 0 0 0 3px rgba(13, 148, 136, .18);
}

html.dark {
    --qb-brand: #2dd4bf;
    --qb-brand-strong: #5eead4;
    --qb-brand-soft: rgba(13, 148, 136, .16);
    --qb-info: #7dd3fc;
    --qb-info-soft: rgba(2, 132, 199, .16);
    --qb-success: #4ade80;
    --qb-warning: #fbbf24;
    --qb-danger: #f87171;
    --qb-violet: #c4b5fd;
    --qb-teal: #5eead4;
    --qb-teal-soft: rgba(13, 148, 136, .16);
    --qb-rose: #fda4af;
    --qb-rose-soft: rgba(225, 29, 72, .16);
    --qb-slate: #cbd5e1;
    --qb-slate-soft: rgba(148, 163, 184, .14);
    --qb-surface: #0f172a;
    --qb-surface-muted: #131d33;
    --qb-page: #070d18;
    --qb-text: #f1f5f9;
    --qb-muted: #c7d2e1;
    --qb-border: #334155;
    --qb-border-soft: #1e293b;
    --qb-shadow-card: 0 4px 18px rgba(0, 0, 0, .28);
    --qb-shadow-hover: 0 16px 34px rgba(0, 0, 0, .42);
    --qb-focus-ring: 0 0 0 3px rgba(45, 212, 191, .24);
}

/* Shared geometry for every dashboard card/tile. Page-specific CSS may change layout,
   but must not redefine these visual primitives. */
.qb-token-card,
.sc-teacher-card,
.sc-hub-card,
.sc-results-switcher-card {
    border-radius: var(--qb-radius-card) !important;
    box-shadow: var(--qb-shadow-card) !important;
}

.qb-token-tile,
.qb-token-action,
.sc-hub-tile,
.sc-student-action-tile,
.sc-class-btn {
    min-height: var(--qb-tile-height) !important;
    border-radius: var(--qb-radius-tile) !important;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease !important;
}

.qb-token-tile:hover,
.qb-token-action:hover,
.sc-hub-tile:hover,
.sc-student-action-tile:hover,
.sc-class-btn:hover {
    box-shadow: var(--qb-shadow-hover) !important;
}

.sc-class-actions-bar,
.qb-token-action-grid {
    gap: var(--qb-space-3) !important;
}

.qb-token-action-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    align-items: stretch;
}
@media (max-width: 560px) {
    .qb-token-action-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

.qb-token-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--qb-space-2);
    padding: var(--qb-space-3) var(--qb-space-4);
    font-weight: 900;
    text-decoration: none;
    cursor: pointer;
}

.qb-token-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: var(--qb-space-1) var(--qb-space-2);
    font-size: .7rem;
    font-weight: 900;
    background: var(--qb-brand-soft);
    color: var(--qb-brand-strong);
    border: 1px solid color-mix(in srgb, var(--qb-brand) 35%, transparent);
}
.qb-token-badge-success { color: var(--qb-success); background: color-mix(in srgb, var(--qb-success) 12%, transparent); }
.qb-token-badge-warning { color: var(--qb-warning); background: color-mix(in srgb, var(--qb-warning) 12%, transparent); }
.qb-token-badge-danger { color: var(--qb-danger); background: color-mix(in srgb, var(--qb-danger) 12%, transparent); }
.qb-token-badge-info { color: var(--qb-info); background: var(--qb-info-soft); }



.qb-token-action:focus-visible,
.sc-class-btn:focus-visible,
.sc-student-action-tile:focus-visible,
.sc-hub-tile:focus-visible,
button:focus-visible,
a:focus-visible {
    outline: none;
    box-shadow: var(--qb-focus-ring) !important;
}

/* ── کاشی‌های عملیاتی ۴ ستونه کلاس ── */
.sc-class-action-tile {
    display: flex;
    align-items: center;
    gap: var(--qb-space-3);
    padding: .65rem .85rem;
    background: #fff;
    border: 1.5px solid #e2e8f0;
    border-radius: var(--qb-radius);
    cursor: pointer;
    text-decoration: none;
    font-family: inherit;
    transition: all .18s ease;
    color: inherit;
}
.sc-class-action-tile:hover {
    border-color: var(--qb-brand);
    box-shadow: var(--qb-shadow-hover);
    transform: translateY(-1px);
}
.sc-cat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 10px;
    font-size: 1.1rem;
    flex-shrink: 0;
}
.sc-cat-label {
    font-size: .82rem;
    font-weight: 900;
    color: #1e293b;
    line-height: 1.3;
}
.sc-cat-desc {
    display: none;
    font-size: .68rem;
    font-weight: 600;
    color: #94a3b8;
    line-height: 1.2;
}
.sc-class-action-tile {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: .9rem .6rem;
}
.sc-cat-desc { display: block; }
@media (max-width: 560px) {
    .sc-class-action-tile {
        flex-direction: row;
        align-items: center;
        text-align: right;
        padding: .65rem .85rem;
    }
    .sc-cat-desc { display: none; }
}

.dark .sc-class-action-tile {
    background: var(--qb-surface) !important;
    border-color: var(--qb-border-soft) !important;
}
.dark .sc-cat-label { color: var(--qb-text) !important; }
.dark .sc-cat-desc { color: var(--qb-text-muted) !important; }

.dark .sc-teacher-card,
.dark .sc-hub-card,
.dark .sc-results-switcher-card,
.dark .sc-hub-tile,
.dark .sc-student-action-tile {
    background: var(--qb-surface) !important;
    border-color: var(--qb-border-soft) !important;
    color: var(--qb-text);
}

/* ═══════════════════════════════════════════════════════════════
   SweetAlert2 — تم تاریک سراسری برای همه پنجره‌های راهنما و تأیید
   (راهنمای سکه/سطح، اکسپلور، مدال اعتماد، تأییدیه‌ها و …).
   بدون دست‌زدن به فراخوان‌ها؛ فقط با کلاس dark روی html فعال می‌شود.
   ═══════════════════════════════════════════════════════════════ */
.dark .swal2-popup {
    background: var(--qb-surface) !important;
    color: var(--qb-text);
    border: 1.5px solid var(--qb-border-soft);
    box-shadow: 0 25px 60px -12px rgba(0, 0, 0, 0.6);
}
.dark .swal2-title { color: var(--qb-text) !important; }
.dark .swal2-html-container { color: var(--qb-muted) !important; }
.dark .swal2-html-container b,
.dark .swal2-html-container strong { color: var(--qb-text) !important; }
.dark .swal2-footer {
    border-top-color: var(--qb-border-soft) !important;
    color: var(--qb-muted) !important;
}
.dark .swal2-close { color: var(--qb-muted) !important; }
.dark .swal2-close:hover { color: var(--qb-text) !important; }
.dark .swal2-input,
.dark .swal2-textarea,
.dark .swal2-select,
.dark .swal2-file {
    background: #0b1220 !important;
    border-color: var(--qb-border) !important;
    color: var(--qb-text) !important;
}
.dark .swal2-validation-message {
    background: rgba(225, 29, 72, 0.14) !important;
    color: #fda4af !important;
}
.dark .swal2-validation-message::before { background: rgba(225, 29, 72, 0.35) !important; }
.dark .swal2-timer-progress-bar { background: rgba(148, 163, 184, 0.4) !important; }
.dark .swal2-icon.swal2-info { border-color: var(--qb-info) !important; color: var(--qb-info) !important; }
.dark .swal2-icon.swal2-question { border-color: var(--qb-muted) !important; color: var(--qb-muted) !important; }

/* =========================================================================
   گارد تم شب: هر عنصری که هاورِ سفید/روشنِ توپر دارد، در دارک‌مود به‌جای
   سفید خالص، یک لایهٔ محو روشن می‌گیرد تا متن خوانا بماند.
   (فقط توکن‌های توپر؛ نسخه‌های شفاف مثل hover:bg-white/20 دست‌نخورده‌اند.)
   ========================================================================= */
html.dark [class~="hover:bg-white"]:hover,
html.dark [class~="hover:bg-slate-50"]:hover,
html.dark [class~="hover:bg-slate-100"]:hover,
html.dark [class~="hover:bg-gray-50"]:hover,
html.dark [class~="hover:bg-gray-100"]:hover,
html.dark [class~="hover:bg-zinc-50"]:hover,
html.dark [class~="hover:bg-neutral-50"]:hover,
html.dark [class~="hover:bg-stone-50"]:hover,
html.dark [class~="hover:bg-indigo-50"]:hover,
html.dark [class~="hover:bg-emerald-50"]:hover,
html.dark [class~="hover:bg-sky-50"]:hover,
html.dark [class~="hover:bg-amber-50"]:hover,
html.dark [class~="hover:bg-rose-50"]:hover,
html.dark [class~="hover:bg-violet-50"]:hover,
html.dark [class~="hover:bg-orange-50"]:hover,
html.dark [class~="hover:bg-slate-200"]:hover,
html.dark [class~="hover:bg-gray-200"]:hover {
    background-color: rgba(148, 163, 184, 0.16) !important;
}

/* هاورهای رنگیِ روشن (۵۰) در دارک‌مود کمی رنگی‌تر و کم‌شفاف‌تر می‌شوند */
html.dark [class~="hover:bg-indigo-50"]:hover { background-color: rgba(99, 102, 241, 0.20) !important; }
html.dark [class~="hover:bg-emerald-50"]:hover { background-color: rgba(16, 185, 129, 0.18) !important; }
html.dark [class~="hover:bg-rose-50"]:hover { background-color: rgba(244, 63, 94, 0.18) !important; }
html.dark [class~="hover:bg-amber-50"]:hover { background-color: rgba(245, 158, 11, 0.18) !important; }
html.dark [class~="hover:bg-sky-50"]:hover { background-color: rgba(14, 165, 233, 0.18) !important; }
html.dark [class~="hover:bg-violet-50"]:hover { background-color: rgba(139, 92, 246, 0.18) !important; }
html.dark [class~="hover:bg-orange-50"]:hover { background-color: rgba(249, 115, 22, 0.18) !important; }