@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;900&display=swap');
body { font-family: 'Inter', sans-serif; margin: 0; direction: ltr; }
.custom-scrollbar::-webkit-scrollbar { width: 4px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: #1a1a1a; border-radius: 10px; }
#previewArea { background-image: radial-gradient(rgba(255,255,255,0.02) 1px, transparent 0); background-size: 40px 40px; }
#content { outline: none; }
.nav-btn { font-size: 11px; font-weight: 900; text-transform: uppercase; color: #555; padding-bottom: 4px; border-bottom: 2px solid transparent; transition: 0.3s; }
.nav-btn.active { color: #00A99D; border-bottom-color: #00A99D; }
input[type="range"] { accent-color: #00A99D; }
.align-btn.active { color: #00A99D; background: rgba(0, 169, 157, 0.1); }
.paragraph-box { border-bottom: 1px solid rgba(255,255,255,0.05); padding-bottom: 2rem; margin-bottom: 2rem; transition: font-variation-settings 0.1s; }

input[type=range] {  background: transparent; }
input[type=range]::-webkit-slider-runnable-track { background: rgba(255,255,255,0.1); height: 4px; border-radius: 2px; }
input[type=range]::-webkit-slider-thumb {height: 16px; width: 16px; border-radius: 50%; background: #00A99D; cursor: pointer; margin-top: -6px; box-shadow: 0 0 10px rgba(0,169,157,0.4); }
.custom-scrollbar::-webkit-scrollbar { width: 4px; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: rgba(0,169,157,0.2); border-radius: 10px; }
.nav-btn.active { background: rgba(0,169,157,0.1); color: #00A99D; border-bottom: 2px solid #00A99D; }


/* أضف هذا الجزء لملف lab.css */
#sidebar.closed {
    margin-left: -320px;
}
aside {
    transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.columns {
    column-count: 3;
    column-gap: 24px;
    text-align: right;
}
#content article h2 {
    break-after: avoid-column; /* تجنب تقسيم العناوين على الأعمدة */
    margin-top: 24px;
    margin-bottom: 12px;
}

#content article p, 
#content article ul, 
#content article ol, 
#content article blockquote {
    break-inside: avoid; /* منع تقسيم الفقرات والقوائم على الأعمدة */
    margin-bottom: 16px;
}

#content article blockquote {
    border-left: 4px solid #888;
    padding-left: 12px;
    font-style: italic;
    color: #ccc;
}

#content article ul, #content article ol {
    padding-left: 20px;
}

#content article li {
    margin-bottom: 8px;
}
.var-target {
    letter-spacing: 0 !important;
}
/* تحسين حدة الحروف ومنع التغبيش في الأحجام الصغيرة */
.var-target {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    /* تفعيل الحجم البصري التلقائي إذا كان الخط يدعمه */
    font-optical-sizing: auto; 
}

/* تنسيق خاص للعناوين الصغيرة لتكون أكثر بروزاً */
h3.var-target {
    letter-spacing: 0.05em; /* تبايد طفيف يمنع التصاق الحروف */
    -webkit-font-smoothing: subpixel-antialiased; /* حدة إضافية للعناوين */
    font-weight: 600; /* وزن متوسط يضمن الوضوح */
}
    /* تعريف خط الشعار المخصص */
    @font-face {
        font-family: 'SFLogoVF';
        src: url('../fonts/SFLogoVF.woff2') format('woff2'); /* تأكد من صحة المسار */
        font-display: swap;
    }
    .logo-symbol {
        font-family: 'SFLogoVF', sans-serif;
        font-variation-settings: "wght" 900; 
    }

    .var-target {
        /* تفعيل الكشيدة التلقائية للمتصفحات التي تدعمها */
        text-justify: inter-word;
        text-align-last: auto;
    }
    
    /* تخصيص المحاذاة الكاملة للعربية */
    [dir="rtl"].justify-active {
        text-align: justify;
        text-justify: inter-word; /* لزيادة التطويل بين الكلمات */
        /* تحسين الاتصال عبر خاصية كشيدة المتصفح */
        font-variant-ligatures: common-ligatures;
    }

    .var-target {
        font-kerning: normal;
        font-variant-ligatures: common-ligatures contextual;
        /* إجبار المتصفح على عدم وضع مسافات بين الحروف (Letter Spacing) في المحاذاة الكاملة */
        text-rendering: optimizeLegibility;
    }