/* ============================================================ The Science Lab — طبقة التنسيق العصري والمسافات الموحّدة تُحمَّل بعد style.css و admin.css فتعلو عليهما ============================================================ */ :root { /* سُلّم مسافات ثابت — يُستعمل في الحاسبة والهاتف معًا */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --page-pad: 32px; /* الحشو الأفقي للصفحة على الحاسبة */ --block-gap: 28px; /* المسافة بين أقسام الصفحة */ --card-pad: 24px; --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --tap: 44px; /* أصغر مساحة لمس مقبولة على الهاتف */ } @media (max-width: 900px) { :root { --page-pad: 18px; /* مطابق لحشو .main على الهاتف */ --block-gap: 20px; --card-pad: 18px; } } /* ══════════════ إيقاعات عامة ══════════════ */ img, svg, video { max-width: 100%; } img { height: auto; } /* منع التمرير الأفقي في كل الصفحات. ملاحظة: لا نضع overflow على لأن Safari على iPhone يكسر بذلك العناصر ذات position:fixed (لوحة مفاتيح المعادلات). */ html { max-width: 100%; } body { max-width: 100%; overflow-x: hidden; } @supports (overflow: clip) { body { overflow-x: clip; } /* clip لا يُنشئ سياق تمرير فلا يكسر fixed */ } /* الجداول العريضة تُمرَّر داخل صندوقها لا داخل الصفحة */ .table-wrap, .admin-table-wrap, .ch-archive-list { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* مسافات موحّدة بين كتل الصفحة */ .section > .row-header, .section > .cards-grid, .section > .hero, .section > .cta-banner, .section > .challenge-banner, .ch-page > * { margin-bottom: var(--block-gap); } .ch-page > *:last-child { margin-bottom: 0; } .section-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--block-gap); } /* ══════════════ لمسات عصرية على البطاقات ══════════════ */ .card, .admin-card, .ch-main-card, .ch-tile, .ans-card { border-radius: var(--r-lg); } .card, .admin-card { transition: transform .2s cubic-bezier(.4, 0, .2, 1), box-shadow .2s; } .card-hover:hover { transform: translateY(-3px); } @media (hover: none) { .card-hover:hover { transform: none; } } /* ══════════════ أزرار مريحة للمس ══════════════ */ @media (max-width: 900px) { .btn, .btn-primary, .btn-outline, .btn-ghost, .ch-tab, .ans-tab, .ch-action-btn, .row-link { min-height: var(--tap); display: inline-flex; align-items: center; justify-content: center; } .btn-sm { min-height: 38px; } input, select, textarea { min-height: var(--tap); font-size: 16px; /* يمنع تكبير الصفحة تلقائيًا في iOS */ } textarea { min-height: 120px; } } /* ══════════════ شريط إجراءات سريع للهاتف ══════════════ */ .quick-bar { display: none; gap: var(--sp-2); overflow-x: auto; padding: 2px 0 var(--sp-2); scrollbar-width: none; margin-bottom: var(--sp-4); } .quick-bar::-webkit-scrollbar { display: none; } .quick-chip { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; border: 1px solid var(--border, #e5e7eb); border-radius: 999px; background: #fff; color: var(--text, #111827); font-size: .85rem; font-weight: 700; text-decoration: none; white-space: nowrap; } .quick-chip.active, .quick-chip:hover { background: var(--red, #cc1212); border-color: var(--red, #cc1212); color: #fff; } .quick-chip svg { width: 16px; height: 16px; } @media (max-width: 900px) { .quick-bar { display: flex; } } /* ══════════════ نماذج ══════════════ */ .form-group { margin-bottom: var(--sp-4); } .form-group > label { display: block; margin-bottom: 6px; font-size: .88rem; font-weight: 700; color: var(--text, #111827); } .form-hint { font-size: .78rem; color: var(--text3, #9ca3af); line-height: 1.75; margin-top: 6px; } .form-check { display: flex; align-items: center; gap: 8px; font-size: .88rem; cursor: pointer; } .form-check input[type=checkbox], .form-check input[type=radio] { width: 18px; height: 18px; min-height: 0; accent-color: var(--red, #cc1212); flex-shrink: 0; } .admin-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--sp-4); } @media (max-width: 640px) { .admin-form-grid { grid-template-columns: 1fr; gap: var(--sp-3); } } .admin-fieldset { border: 1px solid var(--border, #e5e7eb); border-radius: var(--r-md); padding: var(--card-pad); margin-bottom: var(--sp-5); background: #fcfcfd; } .admin-fieldset-title { font-size: .8rem; font-weight: 800; letter-spacing: .5px; color: var(--red, #cc1212); margin-bottom: var(--sp-4); padding-bottom: var(--sp-2); border-bottom: 1px solid var(--border, #e5e7eb); } .admin-card-wide { max-width: 1000px; } .admin-head-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; } .admin-checks { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-4); } .admin-inline-img { margin-top: 8px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .admin-inline-img img { width: 110px; height: 70px; object-fit: cover; border-radius: 10px; } /* ══════════════ اختيار نوع الإجابة (لوحة التحكم) ══════════════ */ .answer-type-picker { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--sp-3); margin-bottom: var(--sp-4); } .answer-type-card { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 14px; border: 2px solid var(--border, #e5e7eb); border-radius: var(--r-md); background: #fff; cursor: pointer; transition: border-color .15s, background .15s; } .answer-type-card input { position: absolute; opacity: 0; pointer-events: none; } .answer-type-card:hover { border-color: var(--border2, #d1d5db); } .answer-type-card.selected { border-color: var(--red, #cc1212); background: rgba(204, 18, 18, .04); } .atc-icon { font-size: 1.3rem; } .atc-name { font-weight: 800; font-size: .95rem; } .atc-desc { font-size: .78rem; color: var(--text3, #9ca3af); line-height: 1.7; } .answer-pane { margin-bottom: var(--sp-4); } .answer-pane[hidden] { display: none; } .mcq-list { display: flex; flex-direction: column; gap: var(--sp-2); margin: var(--sp-2) 0 var(--sp-3); } .mcq-row { display: flex; align-items: center; gap: var(--sp-2); } .mcq-row input[type=radio] { width: 22px; height: 22px; min-height: 0; accent-color: #059669; flex-shrink: 0; } .mcq-row input[type=text] { flex: 1; min-width: 0; } .mcq-del { flex-shrink: 0; width: 34px; height: 34px; border: 1px solid var(--border, #e5e7eb); border-radius: 8px; background: #fff; color: var(--text3, #9ca3af); cursor: pointer; font-size: .9rem; } .mcq-del:hover { color: var(--red, #cc1212); border-color: #fecaca; background: #fef2f2; } /* ══════════════ صفحة مراجعة الإجابات ══════════════ */ .ans-tabs { display: flex; gap: var(--sp-2); overflow-x: auto; padding-bottom: var(--sp-2); margin-bottom: var(--sp-3); scrollbar-width: none; } .ans-tabs::-webkit-scrollbar { display: none; } .ans-tab { flex-shrink: 0; display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border: 1px solid var(--border, #e5e7eb); border-radius: 999px; background: #fff; font-size: .85rem; font-weight: 700; color: var(--text2, #4b5563); text-decoration: none; white-space: nowrap; } .ans-tab:hover { border-color: var(--border2, #d1d5db); } .ans-tab.active { background: var(--red, #cc1212); border-color: var(--red, #cc1212); color: #fff; } .ans-tab-count { min-width: 22px; padding: 1px 6px; border-radius: 999px; background: rgba(0, 0, 0, .07); font-size: .75rem; text-align: center; } .ans-tab.active .ans-tab-count { background: rgba(255, 255, 255, .25); } .ans-list { display: flex; flex-direction: column; gap: var(--sp-4); } .ans-card { background: #fff; border: 1px solid var(--border, #e5e7eb); border-inline-start: 4px solid var(--border2, #d1d5db); border-radius: var(--r-lg); padding: var(--card-pad); box-shadow: 0 1px 3px rgba(0, 0, 0, .05); } .ans-card.st-pending { border-inline-start-color: #d97706; } .ans-card.st-correct { border-inline-start-color: #059669; } .ans-card.st-partial { border-inline-start-color: #2563eb; } .ans-card.st-wrong { border-inline-start-color: #dc2626; } .ans-card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-3); } .ans-user { display: flex; align-items: center; gap: 10px; } .ans-avatar { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .ans-avatar-txt { display: flex; align-items: center; justify-content: center; background: var(--red, #cc1212); color: #fff; font-weight: 800; font-size: 1.05rem; } .ans-user-name { font-weight: 800; font-size: .95rem; } .ans-user-meta { font-size: .78rem; color: var(--text3, #9ca3af); } .ans-status { display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; border-radius: 999px; font-size: .78rem; font-weight: 800; } .ans-status.st-pending { background: #fef3c7; color: #92400e; } .ans-status.st-correct { background: #d1fae5; color: #065f46; } .ans-status.st-partial { background: #dbeafe; color: #1e40af; } .ans-status.st-wrong { background: #fee2e2; color: #991b1b; } .ans-challenge { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; padding: 10px 12px; background: var(--bg2, #f8f9fa); border-radius: var(--r-sm); text-decoration: none; color: inherit; margin-bottom: var(--sp-3); } .ans-challenge:hover { background: #f1f5f9; } .ans-ch-title { font-weight: 700; font-size: .92rem; } .ans-sec { padding: 3px 10px; border-radius: 999px; color: #fff; font-size: .72rem; font-weight: 800; } .ans-body { margin-bottom: var(--sp-4); } .ans-label { font-size: .74rem; font-weight: 800; letter-spacing: .4px; color: var(--text3, #9ca3af); margin: var(--sp-3) 0 6px; } .ans-text { background: #fcfcfd; border: 1px solid var(--border, #e5e7eb); border-radius: var(--r-sm); padding: 12px 14px; font-size: .92rem; line-height: 1.95; white-space: pre-wrap; word-break: break-word; } .ans-img { display: block; max-width: 320px; border-radius: var(--r-sm); overflow: hidden; } .ans-img img { display: block; width: 100%; } .ans-model { margin-top: var(--sp-3); } .ans-model summary { cursor: pointer; font-size: .82rem; font-weight: 700; color: var(--blue, #2563eb); } .ans-model .ans-text { margin-top: 8px; } .ans-mcq { display: flex; flex-direction: column; gap: 6px; } .ans-mcq-opt { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 9px 12px; border: 1px solid var(--border, #e5e7eb); border-radius: var(--r-sm); font-size: .9rem; } .ans-mcq-opt.right { border-color: #059669; background: #ecfdf5; } .ans-mcq-opt.chosen { border-width: 2px; } .ans-mcq-opt.chosen:not(.right) { border-color: #dc2626; background: #fef2f2; } .ans-mcq-mark { width: 18px; font-weight: 800; } .ans-mcq-tag { font-size: .68rem; font-weight: 800; padding: 2px 8px; border-radius: 999px; background: #e5e7eb; color: #374151; } .ans-mcq-tag.right { background: #059669; color: #fff; } .ans-auto { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: var(--sp-3); font-size: .8rem; color: var(--text2, #4b5563); } .ans-auto-bar { flex: 1; min-width: 120px; height: 8px; background: #e5e7eb; border-radius: 999px; overflow: hidden; } .ans-auto-bar > div { height: 100%; background: linear-gradient(90deg, #f59e0b, #059669); border-radius: 999px; } .ans-auto-hint { color: #059669; font-weight: 800; } .ans-review { border-top: 1px dashed var(--border, #e5e7eb); padding-top: var(--sp-4); } .ans-review-row { display: grid; grid-template-columns: minmax(140px, 1fr) minmax(110px, .7fr) minmax(200px, 2fr) auto; gap: var(--sp-3); align-items: end; } .ans-review-field label { display: block; font-size: .76rem; font-weight: 700; color: var(--text3, #9ca3af); margin-bottom: 5px; } .ans-review-field input, .ans-review-field select { width: 100%; } .ans-reviewed { margin-top: var(--sp-3); font-size: .76rem; color: var(--text3, #9ca3af); } @media (max-width: 800px) { .ans-review-row { grid-template-columns: 1fr 1fr; } .ans-review-note { grid-column: 1 / -1; } .ans-review-row > button { grid-column: 1 / -1; width: 100%; } } /* ══════════════ صفحة التحدي — عناصر جديدة ══════════════ */ .ch-bc-sep { opacity: .4; } .type-badge { display: inline-flex; align-items: center; padding: 4px 11px; border-radius: 999px; background: rgba(255, 255, 255, .22); color: #fff; font-size: .74rem; font-weight: 800; } .ch-level { margin-top: var(--sp-4); padding: 14px 16px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18); border-radius: var(--r-md); } .ch-level-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .ch-level-name { font-weight: 800; font-size: .95rem; } .ch-level-rank { font-size: .8rem; opacity: .85; } .ch-level-bar { height: 8px; background: rgba(255, 255, 255, .22); border-radius: 999px; overflow: hidden; margin: 9px 0 6px; } .ch-level-bar > div { height: 100%; background: linear-gradient(90deg, #fbbf24, #34d399); border-radius: 999px; transition: width .5s; } .ch-level-sub { font-size: .78rem; opacity: .8; } .chhs-indigo { background: #eef2ff !important; color: #4f46e5; font-size: 1.2rem; display: flex; align-items: center; justify-content: center; } .status-wait { color: #d97706 !important; } .status-wrong { color: #dc2626 !important; } .ch-result-card { border: 1px solid var(--border, #e5e7eb); border-inline-start: 4px solid var(--border2, #d1d5db); border-radius: var(--r-md); padding: var(--card-pad); margin: var(--sp-5) 0; background: #fcfcfd; } .ch-result-card.st-pending { border-inline-start-color: #d97706; background: #fffbeb; } .ch-result-card.st-correct { border-inline-start-color: #059669; background: #ecfdf5; } .ch-result-card.st-partial { border-inline-start-color: #2563eb; background: #eff6ff; } .ch-result-card.st-wrong { border-inline-start-color: #dc2626; background: #fef2f2; } .ch-result-head { display: flex; align-items: flex-start; gap: 14px; } .ch-result-icon { font-size: 1.8rem; line-height: 1; flex-shrink: 0; } .ch-result-head h3 { margin: 0 0 4px; font-size: 1.05rem; } .ch-result-head p { margin: 0; font-size: .9rem; line-height: 1.9; color: var(--text2, #4b5563); } .ch-result-label { display: block; font-size: .72rem; font-weight: 800; letter-spacing: .4px; color: var(--text3, #9ca3af); margin-bottom: 5px; } .ch-result-answer, .ch-admin-note { margin-top: var(--sp-4); padding: 12px 14px; background: rgba(255, 255, 255, .75); border: 1px solid var(--border, #e5e7eb); border-radius: var(--r-sm); font-size: .92rem; line-height: 1.95; word-break: break-word; } .ch-admin-note { border-color: #93c5fd; background: #eff6ff; } .ch-result-img { display: block; max-width: 300px; margin-top: var(--sp-3); border-radius: var(--r-sm); overflow: hidden; } .ch-result-img img { display: block; width: 100%; } .ch-result-foot { margin-top: var(--sp-3); font-size: .76rem; color: var(--text3, #9ca3af); } .ch-mcq { display: flex; flex-direction: column; gap: 10px; margin-bottom: var(--sp-4); } .ch-mcq-opt { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 2px solid var(--border, #e5e7eb); border-radius: var(--r-md); background: #fff; cursor: pointer; transition: border-color .15s, background .15s; min-height: var(--tap); } .ch-mcq-opt:hover { border-color: var(--border2, #d1d5db); background: #fcfcfd; } .ch-mcq-opt input { position: absolute; opacity: 0; pointer-events: none; } .ch-mcq-opt:has(input:checked) { border-color: var(--red, #cc1212); background: rgba(204, 18, 18, .05); } .ch-mcq-box { flex-shrink: 0; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--bg2, #f8f9fa); border: 1px solid var(--border, #e5e7eb); font-weight: 800; font-size: .9rem; } .ch-mcq-opt:has(input:checked) .ch-mcq-box { background: var(--red, #cc1212); border-color: var(--red, #cc1212); color: #fff; } .ch-mcq-text { font-size: .95rem; line-height: 1.8; } .ch-upload { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin: var(--sp-3) 0; } .ch-upload-btn { display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap); padding: 0 18px; border: 2px dashed var(--border2, #d1d5db); border-radius: var(--r-md); background: var(--bg2, #f8f9fa); font-size: .88rem; font-weight: 700; cursor: pointer; } .ch-upload-btn:hover { border-color: var(--red, #cc1212); color: var(--red, #cc1212); } .ch-upload-preview { max-width: 130px; border-radius: var(--r-sm); } .ch-form-hint { font-size: .8rem; color: var(--text3, #9ca3af); line-height: 1.8; } .ch-fair { margin-top: var(--sp-3); padding: 11px 14px; background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: var(--r-sm); color: #166534; } .badge-no { background: #fee2e2; color: #991b1b; } .badge-gray { background: #f1f5f9; color: #64748b; } /* ══════════════ جداول لوحة التحكم على الهاتف ══════════════ */ @media (max-width: 820px) { .admin-table-cards thead { display: none; } .admin-table-cards, .admin-table-cards tbody, .admin-table-cards tr, .admin-table-cards td { display: block; width: 100%; } .admin-table-cards tr { border: 1px solid var(--border, #e5e7eb); border-radius: var(--r-md); padding: var(--sp-3); margin-bottom: var(--sp-3); background: #fff; } .admin-table-cards td { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: 7px 0; border: none; text-align: start; } .admin-table-cards td::before { content: attr(data-label); font-size: .74rem; font-weight: 800; color: var(--text3, #9ca3af); flex-shrink: 0; } .admin-table-cards .badge, .admin-table-cards .diff-badge, .admin-table-cards .pts-badge { display: inline-flex !important; align-items: center; } .admin-table-cards td[data-label="إجراءات"] { flex-wrap: wrap; justify-content: flex-start; } .admin-table-cards td[data-label="إجراءات"]::before { width: 100%; } } /* ══════════════ الأرشيف على الهاتف ══════════════ */ @media (max-width: 820px) { .ch-archive-head { display: none; } .ch-archive-list { display: flex; flex-direction: column; gap: var(--sp-3); } .ch-archive-row { display: flex !important; flex-wrap: wrap; align-items: center; gap: var(--sp-2); padding: var(--sp-4) !important; background: #fff; border: 1px solid var(--border, #e5e7eb); border-radius: var(--r-md); box-shadow: 0 1px 3px rgba(0, 0, 0, .05); } /* العنوان أولًا بعرض كامل، ثم الشارات في سطر، ثم الزر */ .ch-ar-title { order: 1; flex: 1 1 100%; font-size: 1rem; font-weight: 800; line-height: 1.6; color: var(--text, #111827); } /* الأنماط الأصلية تُخفي بعض الأعمدة على الهاتف — نُظهرها كشارات */ .ch-archive-row > span { display: inline-flex !important; align-items: center; } .ch-archive-row .diff-badge, .ch-archive-row .pts-badge, .ch-archive-row .badge { display: inline-flex !important; align-items: center; } .ch-ar-sec { order: 2; font-size: .8rem; color: var(--text2, #4b5563); gap: 5px; } .ch-ar-date { order: 3; font-size: .78rem; color: var(--text3, #9ca3af); } .ch-ar-date::before { content: '📅'; margin-inline-end: 4px; } .ch-archive-row > span:nth-child(4), .ch-archive-row > span:nth-child(5), .ch-archive-row > span:nth-child(6) { order: 4; } /* فاصل بصري بين سطر الشارات والزر */ .ch-archive-row > span:nth-child(6) { margin-inline-start: auto; } .ch-archive-row > span:last-child { order: 5; flex: 1 1 100%; margin-top: 2px; } .ch-archive-row > span:last-child .btn { width: 100%; } } /* ══════════════ لوحة التحكم — إحصائيات ══════════════ */ .challenge-admin-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--sp-3); margin-bottom: var(--block-gap); } .challenge-admin-stat { display: flex; align-items: center; gap: 12px; padding: var(--sp-4); background: #fff; border: 1px solid var(--border, #e5e7eb); border-radius: var(--r-md); text-decoration: none; color: inherit; } .cas-link:hover { border-color: var(--red, #cc1212); box-shadow: 0 2px 12px rgba(204, 18, 18, .08); } .cas-icon { width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; border-radius: 12px; flex-shrink: 0; } .cas-icon svg { width: 22px; height: 22px; } .cas-value { font-size: 1.4rem; font-weight: 800; line-height: 1.2; } .cas-label { font-size: .78rem; color: var(--text3, #9ca3af); } /* ══════════════ القوائم المنسدلة والفلاتر ══════════════ */ .admin-filters { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; } .admin-filters > * { flex: 0 1 auto; } .admin-filters input[type=text] { flex: 1 1 200px; min-width: 0; } @media (max-width: 640px) { .admin-filters { display: grid; grid-template-columns: 1fr 1fr; } .admin-filters input[type=text] { grid-column: 1 / -1; } } /* ══════════════ الشبكات العامة ══════════════ */ .cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--sp-5); } @media (max-width: 520px) { .cards-grid { grid-template-columns: 1fr; gap: var(--sp-4); } } .ch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: var(--sp-4); } @media (max-width: 520px) { .ch-grid { grid-template-columns: 1fr; } } /* ══════════════ تقليل الحركة ══════════════ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* ══════════════ شارة العدّاد في قائمة لوحة التحكم ══════════════ */ .admin-nav-link { position: relative; } .admin-nav-badge { margin-inline-start: auto; min-width: 22px; padding: 1px 7px; border-radius: 999px; background: var(--red, #cc1212); color: #fff; font-size: .72rem; font-weight: 800; text-align: center; line-height: 1.7; } /* ============================================================ عرض محتوى المقالات والتحديات — إظهار التنسيقات بشكل أنيق ============================================================ */ .article-content, .ch-question-box, .ch-solution-body, .ch-hint-body, .me-editor .me-preview { font-size: 1.02rem; line-height: 2.05; color: var(--text, #111827); word-break: break-word; overflow-wrap: anywhere; } .article-content > *:first-child, .ch-question-box > *:first-child, .ch-solution-body > *:first-child { margin-top: 0; } .article-content > *:last-child, .ch-question-box > *:last-child, .ch-solution-body > *:last-child { margin-bottom: 0; } .article-content p, .ch-question-box p, .ch-solution-body p { margin: 0 0 var(--sp-4); } .article-content h2, .ch-solution-body h2 { font-size: 1.5rem; font-weight: 800; line-height: 1.5; margin: var(--sp-6) 0 var(--sp-3); padding-inline-start: 14px; border-inline-start: 5px solid var(--red, #cc1212); } .article-content h3, .ch-solution-body h3 { font-size: 1.22rem; font-weight: 800; margin: var(--sp-5) 0 var(--sp-3); color: var(--text, #111827); } .article-content h4, .ch-solution-body h4 { font-size: 1.06rem; font-weight: 700; margin: var(--sp-4) 0 var(--sp-2); color: var(--text2, #4b5563); } .article-content ul, .article-content ol, .ch-question-box ul, .ch-question-box ol, .ch-solution-body ul, .ch-solution-body ol { margin: 0 0 var(--sp-4); padding-inline-start: 26px; } .article-content li, .ch-solution-body li { margin: 6px 0; } .article-content ul > li::marker { color: var(--red, #cc1212); } .article-content ol > li::marker { color: var(--red, #cc1212); font-weight: 700; } .article-content blockquote, .ch-solution-body blockquote, .ch-question-box blockquote { margin: var(--sp-5) 0; padding: var(--sp-4) var(--sp-5); background: var(--red-light, rgba(204, 18, 18, .07)); border-inline-start: 5px solid var(--red, #cc1212); border-radius: 0 var(--r-md) var(--r-md) 0; font-size: 1.04rem; color: var(--text, #111827); } .article-content blockquote p:last-child { margin-bottom: 0; } .article-content a, .ch-solution-body a, .ch-question-box a { color: var(--red, #cc1212); text-decoration: underline; text-underline-offset: 3px; font-weight: 600; } .article-content a:hover { text-decoration-thickness: 2px; } .article-content code, .ch-question-box code, .ch-solution-body code { font-family: var(--font-mono, monospace); font-size: .88em; background: #f1f5f9; color: #b91c1c; padding: 2px 7px; border-radius: 6px; direction: ltr; display: inline-block; } .article-content pre { background: #0f172a; color: #e2e8f0; padding: var(--sp-4); border-radius: var(--r-md); overflow-x: auto; direction: ltr; text-align: left; margin: 0 0 var(--sp-4); font-size: .88rem; line-height: 1.8; } .article-content pre code { background: none; color: inherit; padding: 0; } .article-content hr, .ch-solution-body hr { border: none; height: 1px; background: linear-gradient(90deg, transparent, var(--border2, #d1d5db), transparent); margin: var(--sp-6) 0; } .article-content mark { background: #fef08a; padding: 1px 4px; border-radius: 4px; } .article-content u { text-underline-offset: 3px; } /* الصور داخل المقال */ .article-content img, .ch-question-box img, .ch-solution-body img { max-width: 100%; height: auto; display: block; margin: var(--sp-5) auto; border-radius: var(--r-md); box-shadow: 0 2px 14px rgba(0, 0, 0, .08); } /* الجداول داخل المقال */ .article-content table { width: 100%; border-collapse: collapse; margin: 0 0 var(--sp-4); font-size: .93rem; } .article-content table th, .article-content table td { border: 1px solid var(--border, #e5e7eb); padding: 10px 12px; text-align: start; } .article-content table th { background: var(--bg2, #f8f9fa); font-weight: 800; } /* المعادلات */ .article-content .math-inline, .ch-question-box .math-inline, .ch-solution-body .math-inline, .me-editor .me-preview .math-inline { display: inline-block; vertical-align: middle; direction: ltr; margin: 0 3px; font-size: 1.05em; } .article-content .math-block, .ch-question-box .math-block, .ch-solution-body .math-block, .me-editor .me-preview .math-block { display: block; direction: ltr; text-align: center; margin: var(--sp-5) 0; padding: var(--sp-4) var(--sp-3); background: var(--bg2, #f8f9fa); border-radius: var(--r-md); overflow-x: auto; overflow-y: hidden; font-size: 1.1em; } .article-content .katex, .ch-question-box .katex, .ch-solution-body .katex { font-size: 1.05em; } .article-content .katex-display { margin: 0; overflow-x: auto; overflow-y: hidden; padding: 2px 0; } @media (max-width: 640px) { .article-content, .ch-question-box, .ch-solution-body { font-size: .98rem; line-height: 1.95; } .article-content h2, .ch-solution-body h2 { font-size: 1.25rem; padding-inline-start: 11px; border-inline-start-width: 4px; } .article-content h3, .ch-solution-body h3 { font-size: 1.1rem; } .article-content blockquote { padding: var(--sp-3) var(--sp-4); } .article-content .math-block { padding: var(--sp-3) var(--sp-2); font-size: 1em; } } /* بطاقة إحصاء قابلة للنقر في لوحة التحكم */ .admin-stat-link { text-decoration: none; color: inherit; } .admin-stat-link:hover { border-color: var(--red, #cc1212); box-shadow: 0 2px 12px rgba(204, 18, 18, .08); } /* ══════════════ شريط التنقّل السريع للهاتف ══════════════ */ .quick-nav { display: none; gap: var(--sp-2); overflow-x: auto; padding: var(--sp-3) var(--page-pad); margin: 0 calc(var(--page-pad) * -1) var(--sp-4); background: var(--bg2, #f8f9fa); border-bottom: 1px solid var(--border, #e5e7eb); scrollbar-width: none; -webkit-overflow-scrolling: touch; position: sticky; top: 0; z-index: 40; } .quick-nav::-webkit-scrollbar { display: none; } .quick-nav .quick-chip { height: 38px; font-size: .82rem; } .quick-nav .quick-chip svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.4; } @media (max-width: 900px) { .quick-nav { display: flex; } }