/* =========================================================================
   StudyFetch Design System v2.0 — Academic Excellence Edition
   Precision Tokens · Academic Dark Mode · Full Responsive Architecture
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Alexandria:wght@300;400;500;600;700;800;900&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Fira+Code:wght@400;500&display=swap');

:root {
    /* ── Brand: StudyFetch Indigo-to-Purple ─────────────────────────────── */
    --sf-primary: #4F46E5;
    --sf-primary-hover: #4338CA;
    --sf-primary-light: #EEF2FF;
    --sf-primary-border: #C7D2FE;
    --sf-primary-gradient: linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%);
    --sf-primary-glow: 0 10px 25px -5px rgba(79, 70, 229, 0.4);

    /* ── Spark.E AI Accent ───────────────────────────────────────────────── */
    --sf-spark-purple: #7C3AED;
    --sf-spark-pink: #EC4899;
    --sf-spark-gradient: linear-gradient(135deg, #6366F1 0%, #A855F7 50%, #EC4899 100%);
    --sf-spark-glow: 0 8px 24px -4px rgba(168, 85, 247, 0.35);

    /* ── Accent (Cyan — data viz, links, focus sparks) ───────────────────── */
    --sf-accent: #0891B2;
    --sf-accent-soft: rgba(6, 182, 212, 0.12);
    --sf-gold: #D97706;
    --sf-gold-light: rgba(217, 119, 6, 0.12);
    --sf-gold-border: rgba(217, 119, 6, 0.35);

    /* ── Academic Subject Colors ─────────────────────────────────────────── */
    --color-math:     #3B82F6;
    --color-science:  #10B981;
    --color-lang:     #F59E0B;
    --color-history:  #EF4444;
    --color-cs:       #8B5CF6;
    --color-art:      #EC4899;
    --color-law:      #6B7280;
    --color-med:      #0EA5E9;

    /* ── Light Canvas ────────────────────────────────────────────────────── */
    --sf-bg: #F8FAFC;
    --sf-bg-alt: #F1F5F9;
    --sf-surface: #FFFFFF;
    --sf-surface-subtle: #F8FAFC;
    --sf-surface-hover: #F1F5F9;
    --sf-surface-glass: rgba(255, 255, 255, 0.85);

    /* ── Status Colors ───────────────────────────────────────────────────── */
    --sf-success: #10B981;
    --sf-success-light: #ECFDF5;
    --sf-warning: #F59E0B;
    --sf-warning-light: #FFFBEB;
    --sf-danger: #EF4444;
    --sf-danger-light: #FEF2F2;
    --sf-info: #0284C7;
    --sf-info-light: #F0F9FF;

    /* ── Gamification ────────────────────────────────────────────────────── */
    --sf-streak-fire: #F97316;
    --sf-xp-gold: #F59E0B;
    --sf-achievement: linear-gradient(135deg, #F59E0B 0%, #EF4444 100%);

    /* ── Typography ──────────────────────────────────────────────────────── */
    --sf-text-main: #0F172A;
    --sf-text-secondary: #475569;
    --sf-text-muted: #64748B; /* AA on light bg (4.6:1) — gate: scripts/a11y_gate.ps1 */
    --sf-text-on-primary: #FFFFFF;

    /* ── Borders ─────────────────────────────────────────────────────────── */
    --sf-border: #E2E8F0;
    --sf-border-light: #F1F5F9;
    --sf-border-focus: #6366F1;
    --sf-border-glow: 0 0 0 3px rgba(99, 102, 241, 0.2);

    /* ── Elevation ───────────────────────────────────────────────────────── */
    --sf-shadow-xs:   0 1px 2px 0 rgba(15, 23, 42, 0.04);
    --sf-shadow-sm:   0 2px 4px 0 rgba(15, 23, 42, 0.05);
    --sf-shadow-md:   0 6px 16px -2px rgba(15, 23, 42, 0.08), 0 2px 6px -1px rgba(15, 23, 42, 0.04);
    --sf-shadow-lg:   0 14px 28px -4px rgba(15, 23, 42, 0.1), 0 6px 12px -2px rgba(15, 23, 42, 0.05);
    --sf-shadow-xl:   0 24px 48px -12px rgba(15, 23, 42, 0.15);
    --sf-shadow-card: 0 4px 20px -2px rgba(15, 23, 42, 0.06);

    /* ── Radii ───────────────────────────────────────────────────────────── */
    --sf-radius-xs: 4px;
    --sf-radius-sm: 8px;
    --sf-radius-md: 12px;
    --sf-radius-lg: 16px;
    --sf-radius-xl: 22px;
    --sf-radius-2xl: 30px;
    --sf-radius-full: 9999px;

    /* ── Fonts ───────────────────────────────────────────────────────────── */
    --font-family: 'Alexandria', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'Fira Code', 'Courier New', monospace;
}

/* =========================================================================
   ACADEMIC DARK MODE — Roadmap Identity
   Deep Navy / Obsidian #0A0F1D + Indigo #6366F1 / Cyan #06B6D4
   ========================================================================= */
[data-theme="dark"] {
    --sf-bg: #0A0F1D;
    --sf-bg-main: #0A0F1D;
    --sf-bg-alt: #070B16;
    --sf-surface: #111827;
    --sf-surface-subtle: #0D1526;
    --sf-surface-hover: #1E293B;
    --sf-surface-glass: rgba(17, 24, 39, 0.88);

    --sf-primary: #818CF8;
    --sf-primary-hover: #A5B4FC;
    --sf-primary-light: rgba(99, 102, 241, 0.16);
    --sf-primary-border: rgba(129, 140, 248, 0.40);
    --sf-primary-gradient: linear-gradient(135deg, #6366F1 0%, #06B6D4 100%);
    --sf-primary-glow: 0 10px 25px -5px rgba(99, 102, 241, 0.4);

    --sf-accent: #22D3EE;
    --sf-accent-soft: rgba(6, 182, 212, 0.14);
    --sf-spark-purple: #818CF8;
    --sf-spark-pink: #22D3EE;
    --sf-gold: #FBBF24;
    --sf-gold-light: rgba(251, 191, 36, 0.15);
    --sf-gold-border: rgba(251, 191, 36, 0.4);
    --sf-spark-gradient: linear-gradient(135deg, #6366F1 0%, #06B6D4 100%);
    --sf-spark-glow: 0 8px 24px -4px rgba(34, 211, 238, 0.35);

    --sf-text-main: #E2E8F0;
    --sf-text-secondary: #CBD5E1;
    --sf-text-muted: #94A3B8;
    --sf-text-on-primary: #0A0F1D;

    --sf-border: rgba(148, 163, 184, 0.16);
    --sf-border-light: rgba(148, 163, 184, 0.08);
    --sf-border-focus: #818CF8;
    --sf-border-glow: 0 0 0 3px rgba(129, 140, 248, 0.25);

    --sf-shadow-xs:   0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --sf-shadow-sm:   0 2px 6px 0 rgba(0, 0, 0, 0.35);
    --sf-shadow-md:   0 4px 14px 0 rgba(0, 0, 0, 0.45);
    --sf-shadow-lg:   0 10px 25px -3px rgba(0, 0, 0, 0.55);
    --sf-shadow-xl:   0 20px 35px -5px rgba(0, 0, 0, 0.65);
    --sf-shadow-2xl:  0 25px 50px -12px rgba(0, 0, 0, 0.75);
    --sf-shadow-glow: 0 0 24px rgba(99, 102, 241, 0.3);
}

/* =========================================================================
   RESET & BASE
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
    height: 100%;
    width: 100%;
    /* Prevents horizontal overflow on mobile viewports */
    overflow-x: hidden;
    font-family: var(--font-family);
    background-color: var(--sf-bg);
    color: var(--sf-text-main);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Smooth theme switching */
    transition: background-color 0.35s ease, color 0.35s ease;
}

/* Base structural safeguards */
img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
    height: auto;
}

/* =========================================================================
   CUSTOM SCROLLBARS
   ========================================================================= */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: var(--sf-radius-full); }
::-webkit-scrollbar-thumb:hover { background: #94A3B8; }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #334155; }
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #475569; }

/* =========================================================================
   CARDS
   ========================================================================= */
.sf-card {
    background: var(--sf-surface);
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius-lg);
    box-shadow: var(--sf-shadow-card);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    max-width: 100%; /* Safety guard for mobile grids */
    word-wrap: break-word; 
}

.sf-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--sf-shadow-lg);
    border-color: #CBD5E1;
}

[data-theme="dark"] .sf-card:hover {
    border-color: #334155;
    box-shadow: 0 20px 48px -4px rgba(0,0,0,0.65);
}

/* Glass variant */
.sf-card-glass {
    background: var(--sf-surface-glass);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,0.15);
}

[data-theme="dark"] .sf-card-glass {
    background: rgba(22, 32, 46, 0.85);
    border: 1px solid rgba(255,255,255,0.06);
}

/* =========================================================================
   BUTTONS
   ========================================================================= */
.sf-btn {
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    padding: 0.6rem 1.15rem;
    border-radius: var(--sf-radius-md);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    border: 1px solid transparent;
    text-decoration: none;
    user-select: none;
    position: relative;
    overflow: hidden;
}

.sf-btn:active { transform: scale(0.97); }

.sf-btn-primary {
    background: var(--sf-primary-gradient);
    color: #FFFFFF;
    box-shadow: var(--sf-primary-glow);
}
.sf-btn-primary:hover {
    background: linear-gradient(135deg, #4338CA 0%, #6D28D9 100%);
    box-shadow: 0 12px 30px -4px rgba(79, 70, 229, 0.5);
    transform: translateY(-1px);
}

.sf-btn-secondary {
    background-color: var(--sf-surface);
    border-color: var(--sf-border);
    color: var(--sf-text-secondary);
    box-shadow: var(--sf-shadow-xs);
}
.sf-btn-secondary:hover {
    background-color: var(--sf-surface-subtle);
    color: var(--sf-text-main);
    border-color: #CBD5E1;
    transform: translateY(-1px);
}

.sf-btn-spark {
    background: var(--sf-spark-gradient);
    color: #FFFFFF;
    box-shadow: var(--sf-spark-glow);
    font-weight: 700;
}
.sf-btn-spark:hover { 
    transform: translateY(-1px); 
    box-shadow: 0 12px 32px -4px rgba(168, 85, 247, 0.5); 
}

.sf-btn-success { background: linear-gradient(135deg, #059669, #10B981); color: #fff; }
.sf-btn-success:hover { transform: translateY(-1px); }

.sf-btn-danger { background: linear-gradient(135deg, #DC2626, #EF4444); color: #fff; }
.sf-btn-danger:hover { transform: translateY(-1px); }

/* =========================================================================
   BADGES
   ========================================================================= */
.sf-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.6rem;
    border-radius: var(--sf-radius-full);
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
}

.sf-badge-indigo { background: #EEF2FF; color: #4F46E5; border: 1px solid #C7D2FE; }
.sf-badge-purple { background: #F3E8FF; color: #7C3AED; border: 1px solid #DDD6FE; }
.sf-badge-emerald { background: #ECFDF5; color: #059669; border: 1px solid #A7F3D0; }
.sf-badge-amber { background: #FFFBEB; color: #D97706; border: 1px solid #FDE68A; }
.sf-badge-red { background: #FEF2F2; color: #DC2626; border: 1px solid #FECACA; }
.sf-badge-sky { background: #F0F9FF; color: #0284C7; border: 1px solid #BAE6FD; }

[data-theme="dark"] .sf-badge-indigo { background: rgba(99,102,241,0.15); color: #818CF8; border-color: rgba(99,102,241,0.3); }
[data-theme="dark"] .sf-badge-purple { background: rgba(124,58,237,0.15); color: #A78BFA; border-color: rgba(124,58,237,0.3); }
[data-theme="dark"] .sf-badge-emerald { background: rgba(16,185,129,0.12); color: #34D399; border-color: rgba(16,185,129,0.25); }
[data-theme="dark"] .sf-badge-amber { background: rgba(245,158,11,0.12); color: #FCD34D; border-color: rgba(245,158,11,0.25); }
[data-theme="dark"] .sf-badge-red { background: rgba(239,68,68,0.12); color: #F87171; border-color: rgba(239,68,68,0.25); }

/* =========================================================================
   FORM CONTROLS
   ========================================================================= */
.sf-input, .sf-select, .sf-textarea,
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="search"], input[type="tel"],
input[type="url"], input[type="date"], input[type="datetime-local"],
textarea, select {
    font-family: var(--font-family);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--sf-text-main);
    background-color: var(--sf-surface);
    border: 1.5px solid var(--sf-border);
    border-radius: var(--sf-radius-md);
    padding: 0.65rem 1rem;
    width: 100%;
    max-width: 100%;
    outline: none;
    transition: border-color 0.2s cubic-bezier(0.16, 1, 0.3, 1), 
                box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1),
                background-color 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    -webkit-appearance: none;
    appearance: none;
}

.sf-input::placeholder, textarea::placeholder { color: var(--sf-text-muted); opacity: 0.85; }
input:hover:not(:disabled), textarea:hover:not(:disabled), select:hover:not(:disabled) { border-color: #CBD5E1; }
[data-theme="dark"] input:hover:not(:disabled), [data-theme="dark"] textarea:hover:not(:disabled), [data-theme="dark"] select:hover:not(:disabled) { border-color: #334155; }

input:focus, textarea:focus, select:focus { 
    border-color: var(--sf-border-focus); 
    background-color: var(--sf-surface);
    box-shadow: var(--sf-border-glow); 
}

input:disabled, textarea:disabled, select:disabled { 
    background-color: var(--sf-surface-subtle); 
    color: var(--sf-text-muted); 
    cursor: not-allowed; 
    opacity: 0.7; 
}

select, .sf-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236366F1' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 0.85rem center; /* Adjusted for RTL environments */
    background-size: 14px;
    padding-left: 2.4rem;
    padding-right: 1rem;
    cursor: pointer;
}

[dir="ltr"] select, [dir="ltr"] .sf-select {
    background-position: right 0.85rem center;
    padding-right: 2.4rem;
    padding-left: 1rem;
}

textarea, .sf-textarea { resize: vertical; min-height: 90px; line-height: 1.6; }
.sf-form-group { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1rem; }
.sf-form-label { font-size: 0.82rem; font-weight: 800; color: var(--sf-text-main); display: flex; align-items: center; gap: 0.35rem; }
.sf-form-hint { font-size: 0.74rem; color: var(--sf-text-muted); margin-top: 0.2rem; }

/* =========================================================================
   MODAL SYSTEM
   ========================================================================= */
.sf-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(12, 18, 32, 0.72);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: clamp(1rem, 3vw, 1.25rem); /* Responsive padding */
    overflow-y: auto;
    animation: sfFadeIn 0.2s ease;
}

.sf-modal {
    background: var(--sf-surface);
    color: var(--sf-text-main);
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius-xl);
    box-shadow: var(--sf-shadow-xl), 0 0 0 1px rgba(255, 255, 255, 0.1);
    position: relative;
    max-width: 600px;
    width: 100%;
    max-height: 90vh; /* Prevents modal from overflowing the screen height */
    overflow-y: auto; /* Allows scrolling inside the modal */
    animation: sfModalFadeIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.sf-modal-close {
    position: absolute;
    top: 1rem;
    left: 1rem;
    width: 34px;
    height: 34px;
    border-radius: var(--sf-radius-full);
    border: 1px solid var(--sf-border);
    background: var(--sf-surface-subtle);
    color: var(--sf-text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 10;
}
.sf-modal-close:hover { background: var(--sf-surface-hover); color: var(--sf-text-main); transform: rotate(90deg); border-color: #CBD5E1; }

/* =========================================================================
   SKELETON LOADERS
   ========================================================================= */
.skeleton {
    background: linear-gradient(90deg,
        var(--sf-surface-subtle) 25%,
        var(--sf-surface-hover) 50%,
        var(--sf-surface-subtle) 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.6s ease-in-out infinite;
    border-radius: var(--sf-radius-sm);
    color: transparent !important;
    pointer-events: none;
}
.skeleton-text { height: 1em; border-radius: 4px; width: 100%; }
.skeleton-title { height: 1.5em; border-radius: 6px; width: 60%; }
.skeleton-card { height: 160px; border-radius: var(--sf-radius-lg); width: 100%; }
.skeleton-avatar { width: 40px; height: 40px; border-radius: 50%; }

/* =========================================================================
   PROGRESS BARS
   ========================================================================= */
.sf-progress-track {
    background: var(--sf-surface-subtle);
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius-full);
    height: 8px;
    width: 100%;
    overflow: hidden;
}

.sf-progress-bar {
    height: 100%;
    border-radius: var(--sf-radius-full);
    background: var(--sf-primary-gradient);
    transition: width 0.9s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
}

.sf-progress-bar::after {
    content: '';
    position: absolute;
    top: 0; left: -40%;
    width: 40%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    animation: progress-sheen 2.5s ease-in-out infinite;
}

.sf-progress-bar.progress-success { background: linear-gradient(135deg, #059669, #10B981); }
.sf-progress-bar.progress-warning { background: linear-gradient(135deg, #D97706, #F59E0B); }
.sf-progress-bar.progress-danger  { background: linear-gradient(135deg, #DC2626, #EF4444); }

/* =========================================================================
   GAMIFICATION — STREAK, XP, ACHIEVEMENTS
   ========================================================================= */
.streak-fire { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 1.4rem; animation: fire-pulse 1.8s ease-in-out infinite; }
.streak-badge { background: linear-gradient(135deg, #F97316, #EF4444); color: #fff; border-radius: var(--sf-radius-full); padding: 0.25rem 0.8rem; font-weight: 800; font-size: 0.8rem; box-shadow: 0 4px 12px rgba(249,115,22,0.4); }
.xp-badge { background: linear-gradient(135deg, #F59E0B, #D97706); color: #fff; border-radius: var(--sf-radius-full); padding: 0.25rem 0.8rem; font-weight: 800; font-size: 0.8rem; box-shadow: 0 4px 12px rgba(245,158,11,0.4); }

.achievement-badge { display: inline-flex; flex-direction: column; align-items: center; gap: 0.4rem; padding: 1rem; border-radius: var(--sf-radius-lg); background: var(--sf-surface); border: 2px solid var(--sf-border); transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); width: 100%; }
.achievement-badge.earned { border-color: #F59E0B; background: linear-gradient(135deg, rgba(245,158,11,0.08), rgba(239,68,68,0.06)); box-shadow: 0 8px 24px rgba(245,158,11,0.2); }
.achievement-badge:not(.earned) { filter: grayscale(0.8); opacity: 0.5; }
.achievement-badge .badge-icon { font-size: 2rem; }
.achievement-badge .badge-label { font-size: 0.72rem; font-weight: 700; text-align: center; color: var(--sf-text-secondary); }

/* =========================================================================
   STUDY HEATMAP
   ========================================================================= */
.heatmap-grid { display: flex; flex-wrap: wrap; gap: 3px; max-width: 100%; }
.heatmap-cell { width: clamp(10px, 2vw, 12px); height: clamp(10px, 2vw, 12px); border-radius: 2px; background: var(--sf-surface-hover); transition: transform 0.15s ease; cursor: default; }
.heatmap-cell:hover { transform: scale(1.35); }
.heatmap-cell[data-level="0"] { background: var(--sf-surface-hover); }
.heatmap-cell[data-level="1"] { background: rgba(99,102,241,0.25); }
.heatmap-cell[data-level="2"] { background: rgba(99,102,241,0.5); }
.heatmap-cell[data-level="3"] { background: rgba(99,102,241,0.75); }
.heatmap-cell[data-level="4"] { background: #4F46E5; box-shadow: 0 2px 8px rgba(79,70,229,0.4); }

/* =========================================================================
   TOAST NOTIFICATION SYSTEM
   ========================================================================= */
#sf-toast-container {
    position: fixed;
    bottom: 1.5rem;
    left: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    z-index: 99999;
    pointer-events: none;
    width: calc(100% - 3rem); /* Responsive width constraint */
    max-width: 380px;
}

.sf-toast {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1.25rem;
    border-radius: var(--sf-radius-lg);
    background: var(--sf-surface);
    border: 1px solid var(--sf-border);
    box-shadow: var(--sf-shadow-lg);
    width: 100%;
    pointer-events: all;
    animation: toastSlideIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--sf-text-main);
    word-break: break-word;
}
.sf-toast.toast-exit { animation: toastSlideOut 0.25s ease-in forwards; }
.sf-toast-icon { font-size: 1.2rem; flex-shrink: 0; }
.sf-toast-msg { flex: 1; min-width: 0; }
.sf-toast-close { background: none; border: none; color: var(--sf-text-muted); cursor: pointer; font-size: 1.1rem; padding: 0.1rem; transition: color 0.15s ease; flex-shrink: 0; }
.sf-toast-close:hover { color: var(--sf-text-main); }
.sf-toast.toast-success { border-color: var(--sf-success); background: var(--sf-success-light); }
.sf-toast.toast-error   { border-color: var(--sf-danger);  background: var(--sf-danger-light); }
.sf-toast.toast-warning { border-color: var(--sf-warning); background: var(--sf-warning-light); }
.sf-toast.toast-info    { border-color: var(--sf-info);    background: var(--sf-info-light); }

/* =========================================================================
   SUBJECT COLOR CHIPS
   ========================================================================= */
.subject-chip { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.8rem; border-radius: var(--sf-radius-full); font-size: 0.75rem; font-weight: 700; border: 1.5px solid; white-space: nowrap; }
.subject-chip.math    { background: rgba(59,130,246,0.1);  color: #2563EB; border-color: rgba(59,130,246,0.3); }
.subject-chip.science { background: rgba(16,185,129,0.1);  color: #059669; border-color: rgba(16,185,129,0.3); }
.subject-chip.lang    { background: rgba(245,158,11,0.1);  color: #D97706; border-color: rgba(245,158,11,0.3); }
.subject-chip.cs      { background: rgba(139,92,246,0.1);  color: #7C3AED; border-color: rgba(139,92,246,0.3); }
.subject-chip.med     { background: rgba(14,165,233,0.1);  color: #0284C7; border-color: rgba(14,165,233,0.3); }
.subject-chip.history { background: rgba(239,68,68,0.1);   color: #DC2626; border-color: rgba(239,68,68,0.3); }

/* =========================================================================
   CONFETTI PARTICLES & LIVE DOT
   ========================================================================= */
.confetti-particle { position: fixed; width: 10px; height: 10px; border-radius: 2px; pointer-events: none; z-index: 99998; animation: confetti-fall var(--duration, 2.5s) cubic-bezier(0.25, 1, 0.5, 1) forwards; }
.live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #10B981; animation: pulseDot 1.5s ease-in-out infinite; }

/* =========================================================================
   ANIMATION KEYFRAMES
   ========================================================================= */
@keyframes sfFadeIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes sfFadeOut { from { opacity: 1; } to { opacity: 0; } }

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

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

@keyframes skeleton-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@keyframes progress-sheen {
    0%   { left: -40%; opacity: 0; }
    20%  { opacity: 1; }
    80%  { left: 120%; opacity: 0; }
    100% { left: 120%; opacity: 0; }
}

@keyframes fire-pulse {
    0%, 100% { transform: scale(1);    filter: drop-shadow(0 0 4px rgba(249,115,22,0.6)); }
    50%       { transform: scale(1.12); filter: drop-shadow(0 0 14px rgba(239,68,68,0.85)); }
}

@keyframes sfPulseGlow {
    0%, 100% { opacity: 0.8; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.03); }
}

@keyframes sfFloat {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-4px); }
}

@keyframes celebrateBounce {
    0%   { transform: scale(0) rotate(-10deg); opacity: 0; }
    60%  { transform: scale(1.2) rotate(3deg);  opacity: 1; }
    80%  { transform: scale(0.95); }
    100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

@keyframes toastSlideIn {
    from { opacity: 0; transform: translateX(-28px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes toastSlideOut {
    from { opacity: 1; transform: translateX(0); }
    to   { opacity: 0; transform: translateX(-28px); }
}

@keyframes confetti-fall {
    0%   { transform: translateY(-20px) rotate(0deg);   opacity: 1; }
    100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}

@keyframes pulseDot {
    0%, 100% { transform: scale(1);   opacity: 1; }
    50%       { transform: scale(1.6); opacity: 0.7; }
}

@keyframes slideDown {
    from { transform: translateY(-12px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

/* =========================================================================
   ANIMATION UTILITY CLASSES
   ========================================================================= */
.anim-view-enter { animation: viewFadeSlideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) both; }
.anim-fade-in    { animation: sfFadeIn 0.25s ease both; }
.anim-celebrate  { animation: celebrateBounce 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.anim-float      { animation: sfFloat 4s ease-in-out infinite; }
.anim-fire       { animation: fire-pulse 1.8s ease-in-out infinite; }
.anim-slide-down { animation: slideDown 0.35s cubic-bezier(0.16, 1, 0.3, 1) both; }
.sf-animated-glow { animation: sfPulseGlow 3s ease-in-out infinite; }
.sf-floating { animation: sfFloat 4s ease-in-out infinite; }

/* =========================================================================
   RAFEEQ SIGNATURE BRAND MARK & SPLASH SCREEN
   ========================================================================= */
.rafeeq-brand-mark {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #0A0F1D 0%, #1E1B4B 100%);
    border: 1px solid rgba(99, 102, 241, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px rgba(99, 102, 241, 0.35);
}

#fl-loading {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--sf-bg);
    z-index: 999999;
    transition: opacity 0.4s ease, visibility 0.4s ease;
    overflow: hidden;
    padding: 1.5rem; /* Safe bound */
}

#fl-loading::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,0.06) 100%);
    pointer-events: none;
}

.fl-logo-wrap {
    position: relative;
    width: clamp(70px, 15vw, 88px); /* Responsive Logo */
    height: clamp(70px, 15vw, 88px);
    margin-bottom: 22px;
    border-radius: 22px;
    overflow: hidden;
    opacity: 0;
    transform: scale(0.85);
    animation: fl-logo-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s forwards;
}

.fl-logo-wrap::after {
    content: '';
    position: absolute;
    top: 0; left: -100%; bottom: 0;
    width: 55%;
    transform: skewX(-15deg);
    background: linear-gradient(105deg, transparent 0%, rgba(6,182,212,0.55) 50%, transparent 100%);
    animation: fl-shimmer 0.75s ease-in 0.6s forwards;
}

@keyframes fl-logo-in { to { opacity: 1; transform: scale(1); } }
@keyframes fl-shimmer { to { left: 160%; } }

.fl-tagline {
    display: flex;
    flex-direction: row;
    direction: rtl;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 30px;
    font-size: clamp(14px, 4vw, 16px);
    font-weight: 700;
    color: var(--sf-text-main);
    letter-spacing: 0.01em;
    text-align: center;
}

.fl-word { display: inline-block; opacity: 0; transform: translateY(8px); }
.fl-word:nth-child(1) { animation: fl-word-in 0.35s ease-out 0.5s forwards; }
.fl-word:nth-child(2) { animation: fl-word-in 0.35s ease-out 0.65s forwards; }
.fl-word:nth-child(3) { animation: fl-word-in 0.35s ease-out 0.80s forwards; }
.fl-word:nth-child(4) { animation: fl-word-in 0.35s ease-out 0.95s forwards; }
.fl-word:nth-child(5) { animation: fl-word-in 0.35s ease-out 1.10s forwards; }

@keyframes fl-word-in { to { opacity: 1; transform: translateY(0); } }

.fl-progress-track {
    width: clamp(120px, 40vw, 160px);
    height: 3px;
    background: rgba(99, 102, 241, 0.15);
    border-radius: 99px;
    overflow: hidden;
    opacity: 0;
    animation: fl-track-in 0.3s ease-out 0.6s forwards;
}

[data-theme="dark"] .fl-progress-track { background: rgba(148, 163, 184, 0.2); }

.fl-progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #6366F1 0%, #06B6D4 100%);
    border-radius: 99px;
    animation: fl-fill 1.8s cubic-bezier(0.1, 0.8, 0.2, 1) 0.6s forwards;
}

@keyframes fl-track-in { to { opacity: 1; } }
@keyframes fl-fill { to { width: 100%; } }

#fl-loading.fl-out {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}


/* =========================================================================
   MOBILE / RESPONSIVE UTILITIES & FLUID TYPOGRAPHY
   ========================================================================= */

/* Desktop First Defaults */
.mobile-only  { display: none !important; }
.desktop-only { display: block !important; }

/* Responsive Container & Grid Helpers */
.container-fluid {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding-left: clamp(1rem, 3vw, 2rem);
    padding-right: clamp(1rem, 3vw, 2rem);
}

.grid-responsive-4 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
    gap: clamp(0.75rem, 2vw, 1.5rem);
}

.grid-responsive-3 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: clamp(0.75rem, 2vw, 1.5rem);
}

.grid-responsive-2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
    gap: clamp(0.75rem, 2vw, 1.5rem);
}

/* Fluid Typography Helpers */
.fluid-h1 { font-size: clamp(1.6rem, 4vw, 2.2rem) !important; line-height: 1.25; text-wrap: balance; }
.fluid-h2 { font-size: clamp(1.3rem, 3.2vw, 1.8rem) !important; line-height: 1.3; text-wrap: balance; }
.fluid-h3 { font-size: clamp(1.1rem, 2.5vw, 1.45rem) !important; line-height: 1.35; text-wrap: balance; }
.fluid-p  { font-size: clamp(0.875rem, 1.5vw, 1rem) !important; line-height: 1.6; }


/* ── 1. Tablet Breakpoint (< 1024px) ────────────────────────────────────── */
@media (max-width: 1024px) {
    .grid-responsive-4 {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    }
}

/* ── 2. Mobile Breakpoint (< 768px) ─────────────────────────────────────── */
@media (max-width: 768px) {
    .mobile-only  { display: block !important; }
    .desktop-only { display: none !important; }

    /* Touch Target Minimum (Accessibility WCAG 2.1) */
    button, .sf-btn, .nav-link, select, input[type="checkbox"], input[type="radio"] {
        touch-action: manipulation;
        min-height: 44px; /* Native touch target minimum */
    }

    .sf-modal {
        width: 100%;
        max-width: 100%;
        margin-top: auto; /* Bottom sheet behavior option */
        border-radius: 20px 20px 0 0; 
        max-height: 85vh;
    }
    
    .sf-modal-overlay {
        align-items: flex-end; /* Bottom alignment for mobile ergonomics */
        padding: 0; 
    }

    #sf-toast-container {
        bottom: 1rem;
        left: 50%;
        transform: translateX(-50%);
        width: 90%;
        align-items: center;
    }
    
    .sf-toast {
        width: 100%;
        justify-content: space-between;
    }
    
    @keyframes toastSlideIn {
        from { opacity: 0; transform: translateY(28px); }
        to   { opacity: 1; transform: translateY(0); }
    }
    
    @keyframes toastSlideOut {
        from { opacity: 1; transform: translateY(0); }
        to   { opacity: 0; transform: translateY(28px); }
    }
}

/* ── 3. Small Mobile Breakpoint (< 480px) ───────────────────────────────── */
@media (max-width: 480px) {
    .grid-responsive-4, 
    .grid-responsive-3, 
    .grid-responsive-2 {
        grid-template-columns: 1fr; /* Force 1 column on extremely small devices */
    }
    
    .sf-card, .achievement-badge {
        padding: 1rem;
    }

    .sf-badge {
        font-size: 0.65rem;
        padding: 0.2rem 0.4rem;
    }
}