/* ==========================================================================
   💎 ROYAL UI - V2.5 (ORIGINAL RESTORED + PREMIUM THEME FIX) 💎
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Changa:wght@500;700;800&family=Tajawal:wght@400;500;700;900&family=Orbitron:wght@700;900&display=swap');

/* ========================================= */
/* 🎨 1. تعريف الألوان والمتغيرات (The Engine) */
/* ========================================= */
:root {
    /* 🌊 الوضع الافتراضي (Ocean - Light) */
    --bg-main: #f1f5f9;
    --bg-card: #ffffff;
    --bg-secondary: #f8fafc;
    --bg-input: #ffffff; 
    --bg-nav: rgba(255, 255, 255, 0.95);
    --text-primary: #0f172a;
    --text-secondary: #64748b;
    --accent: #0d9488;
    --border-color: #cbd5e1;
    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --radius: 16px;
    --pattern-color: rgba(99, 102, 241, 0.08); /* 🔥 إضافة هذا المتغير أو تعديله */
}

    /* ألوان المربعات الافتراضية (Gradients) */
    --q1-bg: linear-gradient(to bottom, #ffffff, #ffe4e6); 
    --q1-border: #ef4444; --q1-text: #991b1b;
    
    --q2-bg: linear-gradient(to bottom, #ffffff, #dcfce7); 
    --q2-border: #10b981; --q2-text: #065f46;
    
    --q3-bg: linear-gradient(to bottom, #ffffff, #fef9c3); 
    --q3-border: #f59e0b; --q3-text: #92400e;
    
    --q4-bg: linear-gradient(to bottom, #ffffff, #f1f5f9); 
    --q4-border: #6b7280; --q4-text: #374151;
    
--q-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* 🌙 الوضع الليلي الافتراضي (Royal Dark) */
/* يعمل فقط إذا لم يكن هناك ثيم خاص نشط */
html.dark:not([data-theme="coffee"]):not([data-theme="cyberpunk"]) {
    --bg-main: #0f172a;
    --bg-card: #1e293b;
    --bg-secondary: #334155;
    --bg-nav: rgba(30, 41, 59, 0.9);
    --bg-input: #334155;
    --text-primary: #f1f5f9;
    --text-secondary: #94a3b8;
    --accent: #2dd4bf;
    --border-color: #334155;
    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
    --pattern-color: rgba(255,255,255,0.05);

    /* جعل المربعات شفافة في الليلي الملكي */
    --q1-bg: rgba(239, 68, 68, 0.1); --q1-text: #fca5a5;
    --q2-bg: rgba(16, 185, 129, 0.1); --q2-text: #6ee7b7;
    --q3-bg: rgba(245, 158, 11, 0.1); --q3-text: #fcd34d;
    --q4-bg: rgba(107, 114, 128, 0.1); --q4-text: #d1d5db;
--q-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
}

/* ☕ ثيم القهوة (Coffee Premium) */
html[data-theme="coffee"] {
    --bg-main: #2d241f;         /* اسبريسو */
    --bg-card: #3e2f26;         /* بني محروق */
    --bg-secondary: #4e3b31;    /* بني متوسط */
    --bg-input: #4e3b31;
    --bg-nav: rgba(62, 47, 38, 0.95);
    --text-primary: #efebe9;    /* كريمة فاتحة */
    --text-secondary: #d7ccc8;  /* بيج غامق */
    --accent: #d7ccc8;          /* الكراميل */
    --border-color: #5d4037;    /* بني غامق */
    --shadow: 4px 4px 0px #1a120b; /* ظل صلب ريترو */
    --radius: 16px;

    /* ألوان المربعات الخاصة (Solid Colors) */
    --q1-bg: #3e2723; --q1-border: #d4a373; --q1-text: #ffccbc;
    --q2-bg: #1b5e20; --q2-border: #66bb6a; --q2-text: #e8f5e9;
    --q3-bg: #3e2f26; --q3-border: #d4a373; --q3-text: #efebe9;
    --q4-bg: #28201b; --q4-border: #4e342e; --q4-text: #bcaaa4;
    --q-shadow: 4px 4px 0px #1a120b;
}

/* 🤖 ثيم السايبر بانك (Cyberpunk Neon) */
html[data-theme="cyberpunk"] {
    --bg-main: #000000;         /* أسود حالك */
    --bg-card: #050505;
    --bg-secondary: #0a0a0a;
    --bg-input: #000000;
    --bg-nav: rgba(0, 0, 0, 0.98);
    --text-primary: #00ff41;    /* أخضر نيون */
    --text-secondary: #00ffff;  /* سماوي نيون */
    --accent: #ff00ff;          /* فوشيا نيون */
    --border-color: #00ff41;
    --shadow: 0 0 10px rgba(0, 255, 65, 0.15);
    --radius: 16px;

    /* ألوان المربعات الخاصة (Neon) */
    --q1-bg: #000000; --q1-border: #ff0000; --q1-text: #ff0000;
    --q2-bg: #000000; --q2-border: #00ff00; --q2-text: #00ff00;
    --q3-bg: #000000; --q3-border: #ffff00; --q3-text: #ffff00;
    --q4-bg: #000000; --q4-border: #00ffff; --q4-text: #00ffff;
    --q-shadow: 0 0 15px var(--q1-border);
}

/* تخصيص ظلال المربعات للسايبر */
html[data-theme="cyberpunk"] .quadrant[data-quadrant-id="q1"] { box-shadow: 0 0 10px #ff0055 !important; }
html[data-theme="cyberpunk"] .quadrant[data-quadrant-id="q2"] { box-shadow: 0 0 10px #00ff41 !important; }
html[data-theme="cyberpunk"] .quadrant[data-quadrant-id="q3"] { box-shadow: 0 0 10px #fcee0a !important; }
html[data-theme="cyberpunk"] .quadrant[data-quadrant-id="q4"] { box-shadow: 0 0 10px #00eaff !important; }

/* -------------------------------------------------------------------------- */
/* 🤖 CYBERPUNK THEME - FORCE ARABIC FONT */
/* -------------------------------------------------------------------------- */
html[data-theme="cyberpunk"][dir="rtl"] * {
    /* استخدام Handjet على جميع العناصر العربية داخل الثيم */
    font-family: 'Handjet', monospace !important; 
    letter-spacing: normal !important; /* لضمان وضوح النص العربي */
}

/* إبقاء Orbitron للمحتوى الإنجليزي (ككلمة LVL) */
html[data-theme="cyberpunk"] * { 
    font-family: 'Orbitron', monospace !important; 
}
/* إعادة فرض Handjet على كل شيء في وضع RTL (العربي) */
html[data-theme="cyberpunk"][dir="rtl"] * {
    font-family: 'Handjet', monospace !important;
    letter-spacing: normal !important;
}

/* ========================================= */
/* 🧱 2. كلاسات الاستخدام (Utility Classes) */
/* ========================================= */

.surface-ground { background: var(--bg-main) !important; color: var(--text-primary) !important; }
.surface-card { background: var(--bg-card) !important; border: 1px solid var(--border-color) !important; color: var(--text-primary) !important; box-shadow: var(--shadow) !important; border-radius: var(--radius) !important; }
.surface-secondary { background: var(--bg-secondary) !important; border: 1px solid var(--border-color) !important; color: var(--text-primary) !important; }
.text-main { color: var(--text-primary) !important; }
.text-muted { color: var(--text-secondary) !important; }
.input-field { background: var(--bg-input) !important; border: 1px solid var(--border-color) !important; color: var(--text-primary) !important; border-radius: var(--radius) !important; }

body {
    font-family: 'Tajawal', sans-serif !important;
    background: var(--bg-main) !important;
    color: var(--text-primary) !important;
    
/* 🔥 FIX 2: إعادة تفعيل الخلفية المنقوشة */
    background-image: radial-gradient(circle, var(--pattern-color) 2px, transparent 2px) !important;
    background-size: 24px 24px !important;
    
    padding-top: env(safe-area-inset-top, 20px) !important; 
    padding-bottom: 90px !important;
    
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    overflow-x: hidden;
    margin: 0;
    transition: background 0.3s, color 0.3s;
}

/* لمسات خاصة بالثيمات */
html[data-theme="coffee"] body { background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%233e322b' fill-opacity='0.4'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") !important; }
html[data-theme="coffee"] * { font-family: 'Tajawal', serif !important; }

html[data-theme="cyberpunk"] body {
    background-image: linear-gradient(0deg, transparent 24%, rgba(0, 255, 65, .05) 25%, rgba(0, 255, 65, .05) 26%, transparent 27%, transparent 74%, rgba(0, 255, 65, .05) 75%, rgba(0, 255, 65, .05) 76%, transparent 77%, transparent), linear-gradient(90deg, transparent 24%, rgba(0, 255, 65, .05) 25%, rgba(0, 255, 65, .05) 26%, transparent 27%, transparent 74%, rgba(0, 255, 65, .05) 75%, rgba(0, 255, 65, .05) 76%, transparent 77%, transparent) !important;
    background-size: 50px 50px !important;
}
html[data-theme="cyberpunk"] * { font-family: 'Orbitron', monospace !important; letter-spacing: 1px; }

/* --- ✨ الهيدر الملكي (Royal Header) ✨ --- */
.hero-container {
    position: relative;
    padding-top: 2rem;
    padding-bottom: 1.5rem;
    overflow: hidden;
}

.hero-glow {
    position: absolute;
    top: -60px;
    left: 50%;
    transform: translateX(-50%);
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, rgba(45, 212, 191, 0.25) 0%, rgba(124, 58, 237, 0.05) 60%, transparent 80%);
    filter: blur(50px);
    z-index: 0;
    animation: pulseGlow 6s infinite alternate;
    pointer-events: none;
}
html.dark .hero-glow {
    background: radial-gradient(circle, rgba(45, 212, 191, 0.4) 0%, rgba(124, 58, 237, 0.1) 60%, transparent 80%);
}

@keyframes pulseGlow { 0% { opacity: 0.6; transform: translateX(-50%) scale(1); } 100% { opacity: 1; transform: translateX(-50%) scale(1.2); } }

.brain-icon { 
    display: inline-block; 
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1));
    animation: floatBrain 4s ease-in-out infinite; 
}
@keyframes floatBrain { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-8px) rotate(2deg); } }

.app-title {
    font-family: 'Changa', sans-serif !important;
    font-size: 3.5rem !important;
    background: linear-gradient(135deg, #0f766e 0%, #7e22ce 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    position: relative;
    z-index: 10;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.1));
    line-height: 1.6 !important; 
    padding-bottom: 20px !important;
    margin-bottom: -10px; 
    display: inline-block;
    font-weight: 800 !important;
    letter-spacing: -2px;
}
html.dark:not([data-theme="cyberpunk"]) .app-title {
    background: linear-gradient(135deg, #2dd4bf 0%, #a78bfa 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 20px rgba(45, 212, 191, 0.3);
}
html[data-theme="cyberpunk"] .app-title {
    text-shadow: 0 0 10px var(--accent), 0 0 20px var(--accent);
    -webkit-text-fill-color: var(--text-primary);
}

.date-badge {
    background: var(--bg-card);
    color: var(--text-secondary);
    backdrop-filter: blur(8px);
    border: 1px solid var(--border-color);
    box-shadow: 0 2px 10px rgba(0,0,0,0.03);
    padding: 4px 12px;
    border-radius: 99px;
    display: inline-block;
    margin-top: 8px;
}

/* --- 🃏 الكروت والعناصر --- */
.task-item, .subject-card, .modal-content, .bg-white, input, select, textarea, .glass-panel {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow) !important;
    color: var(--text-primary) !important;
}

/* --- 🎨 تصحيح ألوان النصوص --- */
h1, h2, h3, h4, h5, strong, label, p, span, div, button { 
    color: var(--text-primary) !important; 
}
.text-gray-500, .text-gray-400, .text-gray-300, .text-muted { 
    color: var(--text-secondary) !important; 
}

/* --- المربعات (Quadrants) --- */
.quadrant { min-height: 220px; border-radius: var(--radius); transition: all 0.3s ease; }

/* 🔥 هذا هو الإصلاح الجذري: استخدام المتغيرات بدلاً من الألوان الثابتة */
.quadrant[data-quadrant-id="q1"] { background: var(--q1-bg) !important; border-top: 4px solid var(--q1-border) !important; color: var(--q1-text) !important; box-shadow: var(--q-shadow) !important; }
.quadrant[data-quadrant-id="q2"] { background: var(--q2-bg) !important; border-top: 4px solid var(--q2-border) !important; color: var(--q2-text) !important; box-shadow: var(--q-shadow) !important; }
.quadrant[data-quadrant-id="q3"] { background: var(--q3-bg) !important; border-top: 4px solid var(--q3-border) !important; color: var(--q3-text) !important; box-shadow: var(--q-shadow) !important; }
.quadrant[data-quadrant-id="q4"] { background: var(--q4-bg) !important; border-top: 4px solid var(--q4-border) !important; color: var(--q4-text) !important; box-shadow: var(--q-shadow) !important; }

/* ⚠️ تم حذف الكود القديم الذي كان يفرض اللون الكحلي هنا ⚠️ */
/* html.dark .quadrant { background: #1e293b ... } <-- DELETED */

.quadrant h3 { 
    font-size: 0.95rem; 
    opacity: 1; 
    letter-spacing: 0.5px; 
    color: inherit !important;
    font-weight: 800;
}

/* --- الشريط السفلي الزجاجي --- */
nav.flex {
    position: fixed !important;
    bottom: 20px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 90% !important;
    max-width: 380px !important;
    height: 65px !important;
    background: var(--bg-nav) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px);
    border-radius: 25px !important;
    box-shadow: var(--shadow) !important;
    border: 1px solid var(--border-color) !important;
    z-index: 9000;
    padding-bottom: 2px;
    justify-content: space-around !important;
}
/* تخصيص السايبر للشريط */
html[data-theme="cyberpunk"] nav.flex {
    border-top: 2px solid var(--border-color) !important;
    background: #000000 !important;
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.4) !important;
    
    /* 🔥 FIX: العودة للوضع العائم والمحدود (مثل الثيمات الأخرى) */
    width: 90% !important;
    max-width: 380px !important; /* العرض المحدود */
    bottom: 20px !important;     /* العودة للوضع العائم */
    left: 50% !important;
    transform: translateX(-50%) !important; 
    border-radius: 12 !important; /* حواف حادة */
}
nav .main-nav-btn { 
    color: var(--text-secondary) !important; 
    font-size: 10px; font-weight: 700; gap: 4px; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 18%; height: 100%; border: none; background: transparent;
}
nav .main-nav-btn svg { width: 22px; height: 22px; transition: all 0.2s; stroke-width: 2.5px; }
nav .main-nav-btn.active { color: var(--accent) !important; }
nav .main-nav-btn.active svg { transform: translateY(-3px); filter: drop-shadow(0 4px 6px rgba(13,148,136,0.3)); }

/* --- زر الإضافة العائم (FAB) --- */
#fab-add-task {
    position: fixed !important;
    bottom: 100px !important;
    left: 20px !important;
    width: 56px !important;
    height: 56px !important;
    background: var(--accent) !important;
    border-radius: 18px !important;
    box-shadow: 0 8px 25px rgba(13, 148, 136, 0.5) !important;
    border: 2px solid rgba(255,255,255,0.5) !important;
    z-index: 8000;
    display: flex; justify-content: center; align-items: center;
    transition: transform 0.2s;
    color: #fff !important; /* دائما أبيض */
}
#fab-add-task:active { transform: scale(0.9); }

/* --- إخفاء شريط التمرير --- */
::-webkit-scrollbar { display: none; }
* { -ms-overflow-style: none; scrollbar-width: none; }

/* --- تحسين الحقول (Inputs) --- */
input, textarea, select {
    background-color: var(--bg-input) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
    border-radius: 12px !important;
    padding: 12px !important;
    font-weight: 500;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
input::placeholder, textarea::placeholder {
    color: var(--text-secondary) !important;
}

/* --- التوست (Toast) --- */
#toast-container { 
    position: fixed; top: 40px; left: 50%; transform: translateX(-50%); 
    z-index: 200000; display: flex; flex-direction: column; gap: 10px; pointer-events: none;
}
.toast { 
    pointer-events: auto; border-radius: 50px !important; font-size: 13px !important; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.15) !important; 
    padding: 12px 24px !important; min-width: auto !important;
    display: flex; align-items: center; gap: 10px; color: white !important; font-weight: bold;
    animation: toastSlideIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
.toast span { color: white !important; }
.toast-success { background: #059669; }
.toast-error { background: #dc2626; }

@keyframes toastSlideIn { from { transform: translateY(-20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.toast-exit { animation: toastSlideOut 0.3s forwards !important; }
@keyframes toastSlideOut { to { transform: translateY(-30px); opacity: 0; } }

/* --- سحب وإفلات --- */
.dragging-clone {
    position: fixed; 
    z-index: 9999; 
    pointer-events: none; 
    opacity: 0.95; 
    transform: scale(1.05) rotate(3deg);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    width: 85% !important;
    background: var(--bg-card) !important;
}
.task-item.is-dragging-source {
    opacity: 0.4 !important;
    border: 2px dashed var(--border-color) !important;
}
.task-drag-hover {
    border-top: 4px solid var(--accent) !important;
    transform: scale(1.02);
}

/* --- القواعد العامة --- */
.view-hidden { 
    display: none !important; 
    opacity: 0 !important;
    pointer-events: none !important;
    /* تأمين إضافي لمنع تداخل الصفحات */
    position: absolute !important;
    z-index: -1 !important;
    visibility: hidden !important;
}
.view-transition { 
    animation: fadeIn 0.3s ease-out; 
    width: 100%;
} 
@keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

.hidden { display: none !important; }

/* ============================================================ */
/* 🛠️ تنسيق النوافذ الصارم (Modal Logic) */
/* ============================================================ */

.modal, .help-modal, .report-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 20000;
    background-color: rgba(0, 0, 0, 0.85);
    justify-content: center;
    align-items: center;
    transition: none !important; 
    opacity: 1 !important; 
}

/* عند تفعيل النافذة */
.modal:not(.hidden), 
.help-modal:not(.hidden), 
.report-modal:not(.hidden) { 
    display: flex !important;
}

.modal-content, 
.help-modal-content, 
.report-modal-content {
    animation: simplePop 0.2s ease-out forwards;
}

@keyframes simplePop {
    0% { transform: scale(0.95); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

/* شريط XP */
.xp-bar-container { background: var(--bg-secondary); border-radius: 99px; overflow: hidden; height: 8px; border: 1px solid var(--border-color); }
.xp-bar-fill { background: linear-gradient(90deg, #f59e0b, #d97706); height: 100%; border-radius: 99px; transition: width 1s ease; }

/* ========================================= */
/* 🎬 SILK MOTION - PROFESSIONAL ANIMATIONS */
/* ========================================= */

.task-item, .subject-card, .quadrant {
    animation: fadeInUp 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}
.task-item:nth-child(1) { animation-delay: 0.05s; }
.task-item:nth-child(2) { animation-delay: 0.1s; }
.task-item:nth-child(3) { animation-delay: 0.15s; }
.task-item:nth-child(4) { animation-delay: 0.2s; }
.task-item:nth-child(5) { animation-delay: 0.25s; }

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(15px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* لمعة للمهام الذهبية */
.task-item.ring-yellow-400 {
    position: relative;
    overflow: hidden;
    border-color: #f59e0b !important;
}
.task-item.ring-yellow-400::after {
    content: '';
    position: absolute;
    top: 0; left: -150%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    transform: skewX(-20deg);
    animation: shimmer 4s infinite;
    pointer-events: none;
}
@keyframes shimmer {
    0% { left: -150%; }
    15% { left: 150%; }
    100% { left: 150%; }
}

button:active, .task-item:active, .subject-card:active {
    transform: scale(0.96) !important;
    transition: transform 0.1s ease-out;
}

#progress-bar {
    transition: width 1.2s cubic-bezier(0.2, 0.8, 0.2, 1);
    position: relative;
    overflow: hidden;
    background: var(--accent) !important;
}
#progress-bar::after {
    content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    transform: translateX(-100%);
    animation: progressShine 2s infinite;
}
@keyframes progressShine { 100% { transform: translateX(100%); } }

.quadrant h3 svg {
    animation: spinIn 0.8s ease-out;
}
@keyframes spinIn { from { transform: rotate(-90deg) scale(0); opacity: 0; } to { transform: rotate(0) scale(1); opacity: 1; } }

/* ========================================= */
/* 🎨 MODERN TASK MODAL UI */
/* ========================================= */

.priority-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 16px;
}

.priority-card {
    border: 2px solid transparent;
    border-radius: 12px;
    padding: 10px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    background: var(--bg-secondary);
}

.p-card-q1 { color: #ef4444; }
.p-card-q2 { color: #10b981; }
.p-card-q3 { color: #f59e0b; }
.p-card-q4 { color: #6b7280; }

.priority-card.selected { transform: scale(0.98); background: var(--bg-card); box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.priority-card.selected.p-card-q1 { border-color: #ef4444; background-color: rgba(239,68,68,0.1); }
.priority-card.selected.p-card-q2 { border-color: #10b981; background-color: rgba(16,185,129,0.1); }
.priority-card.selected.p-card-q3 { border-color: #f59e0b; background-color: rgba(245,158,11,0.1); }
.priority-card.selected.p-card-q4 { border-color: #6b7280; background-color: rgba(107,114,128,0.1); }

/* شريط الأدوات */
.task-toolbar {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 8px;
    scrollbar-width: none;
}
.tool-chip {
    flex-shrink: 0;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: bold;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
    display: flex; align-items: center; gap: 4px;
}

.tool-chip.active {
    border-color: transparent;
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.tool-chip[data-tool="golden"].active { background: linear-gradient(135deg, #f59e0b, #d97706); }
.tool-chip[data-tool="pinned"].active { background: linear-gradient(135deg, #3b82f6, #2563eb); }
.tool-chip[data-tool="repeat"].active { background: linear-gradient(135deg, #8b5cf6, #7c3aed); }

.modern-input {
    border: none !important;
    border-bottom: 2px solid var(--border-color) !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding: 8px 0 !important;
    font-size: 16px;
    font-weight: 600;
    transition: border-color 0.3s;
}
.modern-input:focus {
    border-color: var(--accent) !important;
    box-shadow: none !important;
}

/* Checkbox */
.modern-checkbox {
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    border: 2px solid var(--border-color);
    border-radius: 50%;
    cursor: pointer;
    display: grid;
    place-content: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background-color: transparent;
    margin: 0;
    position: relative;
    z-index: 5;
}
.modern-checkbox::before {
    content: "";
    width: 12px;
    height: 12px;
    transform: scale(0);
    transition: 0.2s transform ease-in-out;
    box-shadow: inset 1em 1em white;
    transform-origin: center;
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}
/* حالة التفعيل (Checked) - إضافة !important لإجبار اللون */
.modern-checkbox:checked {
    background: linear-gradient(135deg, var(--accent), #7c3aed) !important; /* 🔥 هام جداً */
    border-color: transparent !important;
    transform: scale(1.1);
}

/* ظهور علامة الصح */
.modern-checkbox:checked::before {
    transform: scale(1);
    /* تأكد أن لون الصح أبيض */
    box-shadow: inset 1em 1em white !important; 
}

/* تخصيص للربع الرابع (الأحمر) */
.modern-checkbox.checkbox-red:checked { 
    background: linear-gradient(135deg, #ef4444, #b91c1c) !important; 
}
/* ========================================= */
/* 🚀 SYSTEM OVERRIDE (تطبيق المتغيرات على الجميع) */
/* ========================================= */

.surface-card,
.task-item,
.subject-card,
.modal-content,
.glass-panel,
#weekly-container > div,
#z-goals-container details,
#subjects-container > div,
#history-content details,
#new-report-stats-wrapper > div,
.kanban-container .bg-white,
.kanban-container .bg-gray-200,
#history-content details > div,
#review-answer,
input, select, textarea
{
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
    box-shadow: var(--shadow) !important;
    border-radius: var(--radius) !important;
    backdrop-filter: blur(5px);
}

.surface-secondary,
.kanban-container,
#history-content details > div,
.bg-gray-100, .bg-gray-50, .dark .bg-gray-800,
input, textarea, select
{
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

#fab-add-task, .bg-teal-500, #progress-bar, #xp-bar {
    background: var(--accent) !important;
}
#progress-text { color: var(--accent) !important; }

/* ========================================================= */
/* 🛡️ FIX: DEFINITIVE THEME RESET (الحل الجذري للمحيط والملكي) */
/* ========================================================= */

/* 1. تعريف ثيم المحيط (Ocean) بشكل صريح وقوي */
html[data-theme="ocean"] {
    --radius: 16px !important;
    --q-shadow: 0 4px 6px -1px rgba(0,0,0,0.05) !important;
    --bg-pattern: radial-gradient(circle, rgba(99, 102, 241, 0.08) 2px, transparent 2px) !important;
}

/* 2. تعريف الثيم الملكي (Royal) بشكل صريح وقوي */
html[data-theme="royal"] {
    --radius: 16px !important;
    --q-shadow: none !important;
    --bg-pattern: radial-gradient(circle, rgba(255,255,255,0.05) 2px, transparent 2px) !important;
}

/* 3. فرض تطبيق الحواف الدائرية (16px) على العناصر المتضررة في هذه الثيمات */
html[data-theme="ocean"] .quadrant,
html[data-theme="ocean"] .surface-card,
html[data-theme="ocean"] .task-item,
html[data-theme="ocean"] .modal-content,
html[data-theme="ocean"] .glass-panel,
html[data-theme="ocean"] #user-level-container,
html[data-theme="ocean"] #weekly-container > div,
html[data-theme="ocean"] input,
html[data-theme="royal"] .quadrant,
html[data-theme="royal"] .surface-card,
html[data-theme="royal"] .task-item,
html[data-theme="royal"] .modal-content,
html[data-theme="royal"] .glass-panel,
html[data-theme="royal"] #user-level-container,
html[data-theme="royal"] #weekly-container > div,
html[data-theme="royal"] input {
    border-radius: 16px !important;
}

/* 4. إعادة تعيين الشريط السفلي للوضع العائم والمدور (عكس السايبر) */
html[data-theme="ocean"] nav.flex,
html[data-theme="royal"] nav.flex {
    border-radius: 25px !important;
    width: 90% !important;
    max-width: 380px !important;
    bottom: 20px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    padding-bottom: 2px !important; /* إلغاء padding السايبر */
}

/* 5. تأكيد ظهور الخلفية المنقوشة */
html[data-theme="ocean"] body,
html[data-theme="royal"] body {
    background-image: var(--bg-pattern) !important;
    background-size: 24px 24px !important;
}

/* ========================================================= */
/* 🛡️ FIX: SHADOW STICKINESS (إصلاح تعليق الظلال) */
/* ========================================================= */

/* 1. إجبار ثيم المحيط (والوضع النهاري) على استخدام الظل الهادئ */
html[data-theme="ocean"] .quadrant,
html:not(.dark):not([data-theme]) .quadrant {
    /* ظل ناعم جداً ومحدد */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05) !important;
}

/* 2. إجبار ثيم الملكي (والوضع الليلي الافتراضي) على إزالة الظل */
html[data-theme="royal"] .quadrant,
html.dark:not([data-theme="cyberpunk"]):not([data-theme="coffee"]) .quadrant {
    /* إخفاء الظل تماماً */
    box-shadow: none !important;
}

/* 3. (اختياري) تأكيد ثيم القهوة */
html[data-theme="coffee"] .quadrant {
    box-shadow: 4px 4px 0px #1a120b !important;
}

/* ========================================================= */
/* ☕ Coffee Theme: Title Enhancement (إصلاح عنوان القهوة) */
/* ========================================================= */

html[data-theme="coffee"] .app-title {
    /* 1. تدرج لوني دافئ (من الكريمي الفاتح إلى الكراميل) */
    background-image: linear-gradient(to bottom right, #efebe9, #d7ccc8, #a1887f) !important;
    
    /* 2. تطبيق التدرج على النص نفسه */
    background-clip: text !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important; /* ضمان الشفافية */

    /* 3. استبدال النيون بتوهج بني دافئ وناعم (Warm Glow) */
    text-shadow: 0 4px 20px rgba(62, 39, 35, 0.4), 0 2px 5px rgba(93, 64, 55, 0.3) !important;
    
    /* تحسين الخط قليلاً ليناسب الأجواء الكلاسيكية */
    font-weight: 900 !important;
    letter-spacing: -0.5px !important;
}

/* =========================================
   🌍 Google Translate Final Fix
   ========================================= */

/* إخفاء البانر العلوي */
.goog-te-banner-frame { display: none !important; }
body { top: 0px !important; }

/* تنسيق الحاوية */
#google_translate_element {
    display: inline-block !important;
    overflow: visible !important;
}

/* تنسيق الزر الداخلي لجوجل */
.goog-te-gadget-simple {
    background-color: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 13px !important;
    font-family: 'Tajawal', sans-serif !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
}

/* تنسيق النص (اللغة) */
.goog-te-gadget-simple span {
    color: var(--text-primary) !important;
    font-weight: bold !important;
    padding-right: 24px !important; /* مسافة للأيقونة */
}

/* إخفاء صور جوجل المزعجة */
.goog-te-gadget-icon { display: none !important; }
.goog-te-gadget-simple img { display: none !important; }

/* ⬇️ أهم جزء: إصلاح القائمة المنسدلة ⬇️ */
.goog-te-menu-frame {
    z-index: 2147483647 !important;
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    box-shadow: 0 10px 50px rgba(0,0,0,0.5) !important;
    border-radius: 12px !important;
    border: 2px solid var(--accent) !important;
    min-width: 300px !important;
    min-height: 400px !important;
}

/* ==========================================================================
   🎭 WORLD BUILDER - PREMIUM THEMES (10 DISTINCT APPS)
   ========================================================================== */

/* -----------------------------------------------------------
   1. PIXEL THEME 👾 (ألعاب الثمانينات)
   ----------------------------------------------------------- */
html[data-theme="pixel"] * {
    font-family: 'Lalezar', cursive !important; /* خط بكسل عربي */
    letter-spacing: 0.5px;
}
html[data-theme="pixel"] body {
    background-image: 
        linear-gradient(45deg, #e5e7eb 25%, transparent 25%), 
        linear-gradient(-45deg, #e5e7eb 25%, transparent 25%), 
        linear-gradient(45deg, transparent 75%, #e5e7eb 75%), 
        linear-gradient(-45deg, transparent 75%, #e5e7eb 75%) !important;
    background-size: 20px 20px !important;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px !important;
}
html[data-theme="pixel"] .surface-card,
html[data-theme="pixel"] .task-item,
html[data-theme="pixel"] nav.flex,
html[data-theme="pixel"] button,
html[data-theme="pixel"] input {
    border: 4px solid #000 !important;
    border-radius: 0 !important;
    box-shadow: 6px 6px 0px #000 !important;
}
html[data-theme="pixel"] .quadrant {
    border-width: 4px !important;
    box-shadow: 8px 8px 0px rgba(0,0,0,0.2) !important;
}
html[data-theme="pixel"] .app-title {
    text-shadow: 4px 4px 0px #000 !important;
    background: none !important;
    -webkit-text-fill-color: #111 !important;
    color: #111 !important;
}

/* -----------------------------------------------------------
   2. SKETCH THEME ✏️ (مرسوم باليد)
   ----------------------------------------------------------- */
html[data-theme="sketch"] * {
    font-family: 'Patrick Hand', 'Tajawal', cursive !important;
}
html[data-theme="sketch"] body {
    background-color: #fffdf5;
    background-image: radial-gradient(#d6ccc2 1px, transparent 1px) !important;
    background-size: 20px 20px !important;
}
html[data-theme="sketch"] .surface-card,
html[data-theme="sketch"] .task-item,
html[data-theme="sketch"] nav.flex,
html[data-theme="sketch"] .modal-content {
    border: 2px solid #292524 !important;
    /* شكل عشوائي للحواف */
    border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px !important;
    box-shadow: 2px 8px 4px -6px hsla(0,0%,0%,.3) !important;
}
html[data-theme="sketch"] .app-title {
    font-family: 'Aref Ruqaa', serif !important; /* الخط اليدوي العربي */
    font-weight: 700 !important; /* خط سميك كأنه قلم ماركر */
    font-size: 3.5rem !important; /* تكبير الخط قليلاً ليظهر جماله */
    font-style: normal !important;
    text-decoration: none !important; /* إلغاء التسطير ليكون أنظف */
    background: none !important;
    -webkit-text-fill-color: #292524 !important; /* لون رصاصي غامق */
    text-shadow: 3px 3px 0px rgba(0,0,0,0.1); /* ظل خفيف جداً */
    transform: rotate(-3deg); /* ميلان بسيط جداً ليحاكي الكتابة اليدوية */
    display: inline-block; /* ضروري لعمل الـ transform */
    margin-bottom: 10px;
}
/* -----------------------------------------------------------
   3. GLASS THEME 🧊 (زجاجي عصري)
   ----------------------------------------------------------- */
html[data-theme="glass"] body {
    background: linear-gradient(135deg, #a5b4fc, #c4b5fd, #a7f3d0) fixed !important;
    background-size: 400% 400% !important;
    animation: gradientBG 15s ease infinite !important;
}
@keyframes gradientBG { 0% {background-position:0% 50%} 50% {background-position:100% 50%} 100% {background-position:0% 50%} }

html[data-theme="glass"] .surface-card,
html[data-theme="glass"] .task-item,
html[data-theme="glass"] nav.flex,
html[data-theme="glass"] .modal-content {
    background: rgba(255, 255, 255, 0.25) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15) !important;
    border-radius: 24px !important;
}
html[data-theme="glass"] .app-title {
    text-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* -----------------------------------------------------------
   4. TERMINAL THEME 📟 (الهاكر)
   ----------------------------------------------------------- */
html[data-theme="terminal"] * {
    font-family: 'IBM Plex Mono', monospace !important;
}
html[data-theme="terminal"] body {
    background-color: #0c0c0c !important;
    background-image: repeating-linear-gradient(0deg, transparent, transparent 2px, #33ff0005 2px, #33ff0005 4px) !important;
}
html[data-theme="terminal"] .surface-card,
html[data-theme="terminal"] .task-item,
html[data-theme="terminal"] nav.flex {
    border: 1px solid #33ff00 !important;
    background: #000000 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
html[data-theme="terminal"] .task-item:hover {
    background: #33ff00 !important;
    color: #000 !important;
}
html[data-theme="terminal"] .task-item:hover * {
    color: #000 !important;
}
html[data-theme="terminal"] .app-title::before {
    content: '> ';
}
html[data-theme="terminal"] .app-title::after {
    content: '_';
    animation: blink 1s infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* -----------------------------------------------------------
   5. LUXURY THEME ⚜️ (الفخامة)
   ----------------------------------------------------------- */
html[data-theme="luxury"] * {
    font-family: 'Amiri', serif !important;
}
html[data-theme="luxury"] body {
    background-image: radial-gradient(circle, #ca8a04 1px, transparent 1px) !important;
    background-size: 40px 40px !important;
}
html[data-theme="luxury"] .surface-card,
html[data-theme="luxury"] .task-item {
    border: 1px solid #ca8a04 !important;
    box-shadow: 0 4px 15px rgba(202, 138, 4, 0.15) !important;
    border-radius: 8px !important;
}
html[data-theme="luxury"] .app-title {
    background: linear-gradient(to right, #bf953f, #fcf6ba, #b38728, #fbf5b7, #aa771c) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    font-weight: 700 !important;
}

/* -----------------------------------------------------------
   6. BRUTALIST THEME 🧱 (نيو بروتاليزم)
   ----------------------------------------------------------- */
html[data-theme="brutal"] * {
    font-family: 'Changa', sans-serif !important;
    font-weight: 700 !important;
}
html[data-theme="brutal"] body {
    background-color: #a5f3fc !important;
}
html[data-theme="brutal"] .surface-card,
html[data-theme="brutal"] .task-item,
html[data-theme="brutal"] nav.flex,
html[data-theme="brutal"] button {
    border: 3px solid #000 !important;
    border-radius: 8px !important;
    box-shadow: 5px 5px 0px #000 !important;
    background: white !important;
    transition: all 0.1s !important;
}
html[data-theme="brutal"] .task-item:active,
html[data-theme="brutal"] button:active {
    box-shadow: 0px 0px 0px #000 !important;
    transform: translate(5px, 5px) !important;
}
html[data-theme="brutal"] .app-title {
    text-transform: uppercase;
    text-shadow: 3px 3px 0 #000;
    -webkit-text-fill-color: #000 !important;
}

/* -----------------------------------------------------------
   9. SAKURA THEME 🌸 (Clean & Soft)
   ----------------------------------------------------------- */
html[data-theme="sakura"] * {
    font-family: 'Zen Maru Gothic', sans-serif !important;
}

html[data-theme="sakura"] body {
    background-color: #fff0f5 !important; /* وردي فاتح جداً */
    /* نقشة نقاط ناعمة جداً بدلاً من الصورة */
    background-image: radial-gradient(#fbcfe8 2px, transparent 2px) !important;
    background-size: 30px 30px !important;
}

/* حذفنا الـ ::before (الطبقة الضبابية) لأننا لم نعد بحاجة إليها */

/* ✨ تأثير تساقط أوراق الشجر (احتفظنا به لأنه جميل وغير مزعج) */
html[data-theme="sakura"] body::after {
    content: '🌸'; 
    position: fixed;
    top: -10%;
    left: 10%;
    font-size: 20px;
    animation: sakuraFall 15s linear infinite; /* أبطأنا الحركة لتكون أهدأ */
    z-index: 9999;
    pointer-events: none;
    opacity: 0.4; /* قللنا الشفافية ليكون هادئاً */
    text-shadow: 
        10vw 10vh 0 #ffb7b2, 
        30vw 20vh 0 #ffdac1, 
        50vw 40vh 0 #e2f0cb, 
        70vw 10vh 0 #b5ead7, 
        90vw 60vh 0 #c7ceea;
}

@keyframes sakuraFall {
    0% { transform: translateY(0) rotate(0deg) translateX(0); }
    100% { transform: translateY(110vh) rotate(360deg) translateX(50px); }
}

html[data-theme="sakura"] .surface-card,
html[data-theme="sakura"] .task-item {
    background: #ffffff !important;
    border: 2px solid #fbcfe8 !important; /* حدود وردية ناعمة */
    border-radius: 20px !important; /* حواف دائرية لطيفة */
    box-shadow: 0 4px 10px rgba(251, 207, 232, 0.4) !important; /* ظل وردي خفيف */
}

html[data-theme="sakura"] nav.flex {
    border: 2px solid #fbcfe8 !important;
    background: rgba(255, 255, 255, 0.95) !important;
    border-radius: 20px !important;
}

html[data-theme="sakura"] .app-title {
    background: none !important;
    -webkit-text-fill-color: #db2777 !important; /* لون فوشيا غامق للنص */
    text-shadow: 2px 2px 0px #fce7f3;
}

/* حذفنا خلفية الشخصية من الـ hero-container */
html[data-theme="sakura"] .hero-container {
    background-image: none !important;
    padding-left: 0 !important;
}
/* -----------------------------------------------------------
   8. CYBERPUNK THEME 🤖 (مستقبلي)
   ----------------------------------------------------------- */
html[data-theme="cyberpunk"] * {
    font-family: 'Orbitron', sans-serif !important;
    letter-spacing: 1px;
}
html[data-theme="cyberpunk"] body {
    background-image: 
        linear-gradient(0deg, transparent 24%, rgba(0, 243, 255, .05) 25%, rgba(0, 243, 255, .05) 26%, transparent 27%, transparent 74%, rgba(0, 243, 255, .05) 75%, rgba(0, 243, 255, .05) 76%, transparent 77%, transparent), 
        linear-gradient(90deg, transparent 24%, rgba(0, 243, 255, .05) 25%, rgba(0, 243, 255, .05) 26%, transparent 27%, transparent 74%, rgba(0, 243, 255, .05) 75%, rgba(0, 243, 255, .05) 76%, transparent 77%, transparent) !important;
    background-size: 50px 50px !important;
}
html[data-theme="cyberpunk"] .surface-card,
html[data-theme="cyberpunk"] .task-item {
    border: 1px solid #00f3ff !important;
    box-shadow: 0 0 10px rgba(0, 243, 255, 0.2), inset 0 0 10px rgba(0, 243, 255, 0.1) !important;
    border-radius: 2px !important;
    clip-path: polygon(
        0 0, 
        100% 0, 
        100% calc(100% - 10px), 
        calc(100% - 10px) 100%, 
        0 100%
    );
}

/* -----------------------------------------------------------
   9. COFFEE THEME ☕ (كلاسيك - بدون تغيير)
   ----------------------------------------------------------- */
html[data-theme="coffee"] body {
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23634832' fill-opacity='0.1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") !important;
}
html[data-theme="coffee"] .surface-card,
html[data-theme="coffee"] nav.flex,
html[data-theme="coffee"] .task-item {
    box-shadow: 4px 4px 0px #1a120b !important;
    border: 1px solid #5d4037 !important;
}
html[data-theme="coffee"] .app-title {
    font-family: 'Tajawal', serif !important;
    background: linear-gradient(to bottom, #efebe9, #d7ccc8) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    text-shadow: 2px 2px 0px #3e2723;
}

/* -----------------------------------------------------------
   3. LO-FI STUDY THEME 🎧 (بديل Retro)
   ----------------------------------------------------------- */
html[data-theme="lofi"] * {
    font-family: 'Patrick Hand', 'Tajawal', cursive !important; /* خط يدوي مريح */
    letter-spacing: 0.5px;
}
html[data-theme="lofi"] body {
    background-color: #fdf6e3 !important;
    background-image: 
        repeating-linear-gradient(#eee8d5 0 1px, transparent 1px 100%),
        repeating-linear-gradient(90deg, #eee8d5 0 1px, transparent 1px 100%) !important;
    background-size: 20px 20px !important; /* شكل دفتر مربعات */
}
html[data-theme="lofi"] .surface-card,
html[data-theme="lofi"] .task-item {
    border: 2px solid #d33682 !important; /* حدود وردية دافئة */
    border-radius: 12px !important;
    box-shadow: 4px 4px 0px rgba(211, 54, 130, 0.2) !important; /* ظل ناعم */
    background: #fffbf0 !important;
}
html[data-theme="lofi"] .app-title {
    background: none !important;
    -webkit-text-fill-color: #586e75 !important;
    text-shadow: 2px 2px 0px #eee8d5;
}
html[data-theme="lofi"] nav.flex {
    border: 2px solid #d33682 !important;
    background: rgba(253, 246, 227, 0.95) !important;
}

/* -----------------------------------------------------------
   10. MIDNIGHT RAIN THEME 🌧️ (بديل Night City)
   ----------------------------------------------------------- */
html[data-theme="rain"] body {
    background-color: #0f172a !important;
    background-image: linear-gradient(to bottom, #0f172a, #1e293b) !important;
}

/* 🌧️ تأثير المطر */
html[data-theme="rain"] body::before {
    content: '';
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABZJREFUeNpi2r9//38gYGAEESAAEGAAasgJOgzOKCoAAAAASUVORK5CYII='); /* نقاط صغيرة */
    background-size: 400px 400px; /* تكرار النمط */
    opacity: 0.3;
    z-index: 0;
    pointer-events: none;
    animation: rainFall 1s linear infinite;
}

@keyframes rainFall {
    0% { background-position: 0 0; }
    100% { background-position: -20px 400px; } /* حركة مائلة للأسفل */
}

html[data-theme="rain"] .surface-card,
html[data-theme="rain"] .task-item {
    background: rgba(30, 41, 59, 0.7) !important; /* كروت زجاجية غامقة */
    backdrop-filter: blur(10px);
    border: 1px solid rgba(56, 189, 248, 0.2) !important; /* حدود زرقاء خافتة */
    box-shadow: 0 4px 6px rgba(0,0,0,0.3) !important;
    color: #e2e8f0 !important;
}

html[data-theme="rain"] .app-title {
    background: linear-gradient(to bottom, #38bdf8, #94a3b8) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    filter: drop-shadow(0 0 10px rgba(56, 189, 248, 0.5));
}

html[data-theme="rain"] nav.flex {
    background: rgba(15, 23, 42, 0.9) !important;
    border-top: 1px solid rgba(56, 189, 248, 0.3) !important;
}

/* =========================================
   🖼️ ULTRA PREMIUM FRAMES (Fancy Effects)
   ========================================= */

/* تحسينات للصورة نفسها لتتناسب مع الإطارات */
#auth-img-user, #profile-preview-img {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-sizing: border-box;
    /* مسافة صغيرة بين الصورة والإطار */
    border: 2px solid transparent; 
    background-clip: padding-box;
}

/* 1. الإطار الذهبي الملكي (Royal Gold) 👑 */
/* تدرج ذهبي لامع + ظل ذهبي + دوران خفيف */
.frame-gold {
    border-radius: 50%;
    /* تدرج يوحي بالمعدن */
    background-image: linear-gradient(white, white), radial-gradient(circle at top left, #ffd700, #fdb931, #9d7c2a, #ffd700);
    background-origin: border-box;
    background-clip: content-box, border-box;
    /* إطار سميك */
    border: 4px solid transparent !important; 
    /* ظل متوهج */
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.5), 0 0 30px rgba(253, 185, 49, 0.3);
    position: relative;
    animation: goldPulse 3s infinite alternate;
}
@keyframes goldPulse {
    0% { box-shadow: 0 0 15px rgba(255, 215, 0, 0.5); }
    100% { box-shadow: 0 0 25px rgba(255, 215, 0, 0.8), 0 0 5px white; }
}

/* 2. إطار السايبر نيون (Cyber Neon) 🤖 */
/* توهج مزدوج (أزرق/فوشيا) + دوران */
.frame-neon {
    border-radius: 50%;
    /* حدود متدرجة */
    background: linear-gradient(white, white) padding-box,
                linear-gradient(45deg, #00f3ff, #ff00ff) border-box;
    border: 3px solid transparent !important;
    /* ظل قوي جداً */
    box-shadow: 0 0 10px #00f3ff, 0 0 20px #ff00ff;
    animation: neonSpin 4s linear infinite;
}
@keyframes neonSpin {
    0% { filter: hue-rotate(0deg); }
    100% { filter: hue-rotate(360deg); }
}

/* 3. الإطار الناري الأسطوري (Legendary Fire) 🔥 */
/* تأثير حريق متحرك */
.frame-fire {
    border-radius: 50%;
    border: 3px solid #ff4500 !important;
    /* ظلال متعددة تحاكي النار */
    box-shadow: 
        0 0 10px #ff4500,
        0 0 20px #ff8c00,
        0 0 40px #ff0000,
        inset 0 0 10px #ff4500;
    animation: fireFlicker 0.15s infinite alternate;
    position: relative;
}
@keyframes fireFlicker {
    0% { box-shadow: 0 0 10px #ff4500, 0 0 20px #ff8c00, 0 0 40px #ff0000; transform: scale(1); }
    100% { box-shadow: 0 0 12px #ff4500, 0 0 22px #ff8c00, 0 0 42px #ff0000; transform: scale(1.02); }
}