/* ═════════ رتّل — تمارين التجويد ═════════ الألوان مستوحاة من مصاحف التجويد الملوّنة: الأخضر للغنّة، الأحمر للمدود، الأزرق للتفخيم والقلقلة، الرماديّ لما لا يُلفظ. */ /* ── الخطوط (مضمّنة لتعمل بلا إنترنت) ── */ @font-face { font-family: "Amiri Quran"; src: url(../fonts/amiri-quran-arabic-400-normal.woff2) format("woff2"); font-display: swap; unicode-range: U+0600-06FF,U+0750-077F,U+0870-08FF,U+200C-200E,U+FB50-FDFF,U+FE70-FEFC; } @font-face { font-family: "Amiri Quran"; src: url(../fonts/amiri-quran-latin-400-normal.woff2) format("woff2"); font-display: swap; unicode-range: U+0000-00FF; } @font-face { font-family: "Readex Pro"; src: url(../fonts/readex-pro-arabic-wght-normal.woff2) format("woff2-variations"); font-weight: 160 700; font-display: swap; unicode-range: U+0600-06FF,U+0750-077F,U+0870-08FF,U+200C-200E,U+2010-2011,U+FB50-FDFF,U+FE70-FEFC; } @font-face { font-family: "Readex Pro"; src: url(../fonts/readex-pro-latin-wght-normal.woff2) format("woff2-variations"); font-weight: 160 700; font-display: swap; unicode-range: U+0000-00FF,U+2000-206F,U+2212,U+2215; } @font-face { font-family: "Reem Kufi"; src: url(../fonts/reem-kufi-arabic-wght-normal.woff2) format("woff2-variations"); font-weight: 400 700; font-display: swap; unicode-range: U+0600-06FF,U+0750-077F,U+0870-08FF,U+200C-200E,U+FB50-FDFF,U+FE70-FEFC; } @font-face { font-family: "Reem Kufi"; src: url(../fonts/reem-kufi-latin-wght-normal.woff2) format("woff2-variations"); font-weight: 400 700; font-display: swap; unicode-range: U+0000-00FF; } /* ── الرموز اللونية ── */ :root { --bg: #EEF1EE; --surface: #FFFFFF; --surface-2: #F6F8F5; --sunken: #E5E9E4; --line: #D9DED8; --line-strong: #BEC6BD; --ink: #16203A; --ink-2: #47506A; --ink-3: #7A8296; --primary: #1D3E7A; --primary-hover: #17336A; --primary-ink: #FFFFFF; --primary-soft: #E3EAF7; --focus: #2F6BDB; --night: #12264D; --night-2: #0D1C3B; --night-ink: #EEF2FA; --night-ink-2: #B7C3DD; --tj-ghunna: #12804A; --tj-madd: #C8283E; --tj-qalqala: #2C7FD6; --tj-tafkhim: #1A3A8C; --tj-silent: #98A0AA; --fam-slate: #5A6478; --fam-lapis: #2557B5; --fam-silent: #8A929E; --fam-ghunna: #12804A; --fam-madd: #C8283E; --fam-amber: #BE7410; --fam-teal: #0F7A7C; --ok: #12804A; --ok-bg: #E2F3E9; --ok-line: #9DD3B5; --bad: #C42A3F; --bad-bg: #FBE6E9; --bad-line: #EFA9B3; --warn: #BE7410; --warn-bg: #FBF0DE; --f-ui: "Readex Pro", "Segoe UI", Tahoma, system-ui, sans-serif; --f-display: "Reem Kufi", "Readex Pro", system-ui, sans-serif; --f-quran: "Amiri Quran", "Amiri", "Traditional Arabic", serif; --r-s: 8px; --r-m: 12px; --r-l: 18px; --shadow-1: 0 1px 2px rgba(22, 32, 58, .06), 0 2px 8px rgba(22, 32, 58, .05); --shadow-2: 0 10px 30px -12px rgba(13, 28, 59, .28); --wrap: 1120px; --gutter: 20px; --topbar-h: 64px; color-scheme: light; } :root[data-theme="dark"] { --bg: #0D1526; --surface: #141E34; --surface-2: #18243E; --sunken: #0F1A2E; --line: #24314D; --line-strong: #33436A; --ink: #E8EDF6; --ink-2: #AEB8CC; --ink-3: #7C879E; --primary: #5C8BEA; --primary-hover: #739CEE; --primary-ink: #0B1428; --primary-soft: #1B2B4F; --focus: #8DB0F5; --night: #0A1530; --night-2: #071026; --tj-ghunna: #3DC685; --tj-madd: #FF6A7D; --tj-qalqala: #5CB2FF; --tj-tafkhim: #93AEFF; --tj-silent: #7E8898; --fam-slate: #9AA6BE; --fam-lapis: #78A2F5; --fam-silent: #98A2B4; --fam-ghunna: #3DC685; --fam-madd: #FF6A7D; --fam-amber: #F2A64A; --fam-teal: #3BC2C2; --ok: #3DC685; --ok-bg: #11342A; --ok-line: #23704F; --bad: #FF6A7D; --bad-bg: #3A1824; --bad-line: #7A2D3E; --warn: #F2A64A; --warn-bg: #3A2A12; --shadow-1: 0 1px 2px rgba(0, 0, 0, .3); --shadow-2: 0 14px 40px -14px rgba(0, 0, 0, .6); color-scheme: dark; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0D1526; --surface: #141E34; --surface-2: #18243E; --sunken: #0F1A2E; --line: #24314D; --line-strong: #33436A; --ink: #E8EDF6; --ink-2: #AEB8CC; --ink-3: #7C879E; --primary: #5C8BEA; --primary-hover: #739CEE; --primary-ink: #0B1428; --primary-soft: #1B2B4F; --focus: #8DB0F5; --night: #0A1530; --night-2: #071026; --tj-ghunna: #3DC685; --tj-madd: #FF6A7D; --tj-qalqala: #5CB2FF; --tj-tafkhim: #93AEFF; --tj-silent: #7E8898; --fam-slate: #9AA6BE; --fam-lapis: #78A2F5; --fam-silent: #98A2B4; --fam-ghunna: #3DC685; --fam-madd: #FF6A7D; --fam-amber: #F2A64A; --fam-teal: #3BC2C2; --ok: #3DC685; --ok-bg: #11342A; --ok-line: #23704F; --bad: #FF6A7D; --bad-bg: #3A1824; --bad-line: #7A2D3E; --warn: #F2A64A; --warn-bg: #3A2A12; --shadow-1: 0 1px 2px rgba(0, 0, 0, .3); --shadow-2: 0 14px 40px -14px rgba(0, 0, 0, .6); color-scheme: dark; } } /* ── الأساسيات ── */ *, *::before, *::after { box-sizing: border-box; } html { direction: rtl; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { direction: rtl; } .qtx, .q-ayah, .mushaf-ayat, .rv-ayah, .cat-sample, .pick-sample, .hub-sample, .smp { direction: rtl; unicode-bidi: isolate; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--f-ui); font-size: 17px; line-height: 1.75; font-feature-settings: "kern"; -webkit-font-smoothing: antialiased; min-height: 100vh; } button, input, select { font: inherit; color: inherit; } button { cursor: pointer; } a { color: inherit; } img, svg { display: block; } :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 6px; } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); } .q-text, .qtx { font-family: var(--f-quran); font-weight: 400; font-size: 1.22em; line-height: 1.6; letter-spacing: 0; } /* ── الشريط العلوي ── */ .topbar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 40; height: var(--topbar-h); background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid transparent; transition: border-color .2s; } .topbar.scrolled { border-bottom-color: var(--line); } .topbar.on-night { background: color-mix(in srgb, var(--night) 88%, transparent); color: var(--night-ink); } .topbar.on-night.scrolled { border-bottom-color: rgba(255,255,255,.08); } .topbar .wrap { height: 100%; display: flex; align-items: center; gap: 24px; } .brand { display: flex; align-items: baseline; gap: 10px; text-decoration: none; } .brand-mark { font-family: var(--f-display); font-weight: 700; font-size: 30px; line-height: 1; letter-spacing: 0; } .brand-sub { font-size: 13px; color: var(--ink-3); white-space: nowrap; } .topbar.on-night .brand-sub { color: var(--night-ink-2); } .nav { display: flex; gap: 4px; margin-inline-start: auto; } .nav a { text-decoration: none; padding: 8px 14px; border-radius: 999px; font-size: 15px; color: var(--ink-2); transition: background .15s, color .15s; } .topbar.on-night .nav a { color: var(--night-ink-2); } .nav a:hover { background: var(--sunken); color: var(--ink); } .topbar.on-night .nav a:hover { background: rgba(255,255,255,.08); color: #fff; } .nav a[aria-current="page"] { background: var(--ink); color: var(--bg); } .topbar.on-night .nav a[aria-current="page"] { background: var(--night-ink); color: var(--night); } .top-actions { display: flex; gap: 6px; } .icon-btn { width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--line); background: transparent; display: grid; place-items: center; color: var(--ink-2); transition: background .15s, border-color .15s; } .icon-btn:hover { background: var(--sunken); } .topbar.on-night .icon-btn { border-color: rgba(255,255,255,.16); color: var(--night-ink-2); } .topbar.on-night .icon-btn:hover { background: rgba(255,255,255,.08); } .icon-btn svg { width: 19px; height: 19px; } .icon-btn[aria-pressed="true"] { color: var(--primary); border-color: var(--primary); } .topbar.on-night .icon-btn[aria-pressed="true"] { color: #fff; border-color: #fff; } /* شريط التنقّل السفلي للجوال */ .tabbar { display: none; } /* ── الأزرار ── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 22px; border-radius: 12px; border: 1px solid transparent; font-weight: 500; font-size: 16px; text-decoration: none; white-space: nowrap; transition: background .15s, border-color .15s, transform .08s, opacity .15s; } .btn:active { transform: translateY(1px); } .btn svg { width: 18px; height: 18px; } .btn-primary { background: var(--primary); color: var(--primary-ink); } .btn-primary:hover { background: var(--primary-hover); } .btn-ghost { background: transparent; border-color: var(--line-strong); color: var(--ink); } .btn-ghost:hover { background: var(--sunken); } .btn-quiet { background: transparent; color: var(--ink-2); padding: 0 12px; } .btn-quiet:hover { color: var(--ink); background: var(--sunken); } .btn-light { background: var(--night-ink); color: var(--night); } .btn-light:hover { background: #fff; } .btn-outline-light { background: transparent; color: var(--night-ink); border-color: rgba(255,255,255,.28); } .btn-outline-light:hover { background: rgba(255,255,255,.08); } .btn-sm { min-height: 36px; padding: 0 14px; font-size: 14px; border-radius: 10px; } .btn[disabled] { opacity: .45; pointer-events: none; } .btn-block { width: 100%; } /* ── البطل (الرئيسية) ── */ .hero { position: relative; overflow: hidden; background: var(--night); color: var(--night-ink); margin-top: calc(var(--topbar-h) * -1); padding: calc(var(--topbar-h) + 56px) 0 72px; } .hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.055' stroke-width='1'%3E%3Cpath d='M48 8l11.3 28.7L88 48 59.3 59.3 48 88 36.7 59.3 8 48l28.7-11.3z'/%3E%3Crect x='28' y='28' width='40' height='40' transform='rotate(45 48 48)'/%3E%3Crect x='28' y='28' width='40' height='40'/%3E%3C/g%3E%3C/svg%3E"); background-size: 96px 96px; mask-image: radial-gradient(ellipse 70% 90% at 20% 50%, #000 20%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse 70% 90% at 20% 50%, #000 20%, transparent 75%); } .hero .wrap { position: relative; display: grid; grid-template-columns: 1fr 1.08fr; gap: 56px; align-items: center; } .hero h1 { font-family: var(--f-display); font-weight: 700; font-size: clamp(38px, 5.2vw, 64px); line-height: 1.25; margin: 0 0 18px; letter-spacing: 0; text-wrap: balance; } .hero-lead { font-size: 18px; color: var(--night-ink-2); max-width: 30em; margin: 0 0 30px; } .hero-actions { display: flex; gap: 12px; flex-wrap: wrap; } .hero-facts { display: flex; gap: 28px; margin-top: 36px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.12); flex-wrap: wrap; } .hero-facts div { font-size: 14px; color: var(--night-ink-2); } .hero-facts b { display: block; font-size: 22px; font-weight: 600; color: var(--night-ink); line-height: 1.4; } /* لوح المصحف */ .mushaf { position: relative; background: #FBFBF7; color: #1A1A1A; border-radius: 6px; padding: 14px; box-shadow: 0 30px 60px -20px rgba(0,0,0,.55); } .mushaf-frame { border: 1.5px solid #1D3E7A; outline: 1px solid #1D3E7A; outline-offset: -6px; padding: 26px 26px 20px; position: relative; } .mushaf-head { text-align: center; font-family: var(--f-quran); font-size: 20px; color: #1D3E7A; margin: -6px 0 6px; } .mushaf-ayat { font-family: var(--f-quran); font-size: clamp(27px, 3.2vw, 37px); line-height: 2.25; text-align: center; text-wrap: balance; margin: 0; } .mushaf-ayat .aya-end { color: #1D3E7A; font-size: .9em; } .tj { cursor: pointer; border-radius: 4px; transition: color .5s ease, background-color .15s; } .tj:hover, .tj.on { background-color: rgba(29, 62, 122, .1); } .tj.g { color: var(--c-g, #12804A); } .tj.m { color: var(--c-m, #C8283E); } .tj.q { color: var(--c-q, #2C7FD6); } .tj.t { color: var(--c-t, #1A3A8C); } .tj.s { color: var(--c-s, #A3AAB3); } .tj.u { text-decoration: underline dotted 2px; text-underline-offset: 10px; text-decoration-color: #8792A3; } .mushaf.pre .tj:not(.u) { color: #1A1A1A; } .legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; margin-top: 14px; padding-top: 12px; border-top: 1px solid #E3E2DA; font-size: 13px; color: #4A4F5C; } .legend span { display: inline-flex; align-items: center; gap: 6px; } .legend i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; } .rule-card { margin-top: 14px; min-height: 92px; padding: 14px 16px; border-radius: 6px; background: #F1F2EC; color: #23293A; font-size: 15px; line-height: 1.7; } .rule-card .rc-name { font-weight: 600; font-size: 16px; display: flex; align-items: center; gap: 8px; margin-bottom: 2px; } .rule-card .rc-name i { width: 10px; height: 10px; border-radius: 50%; } .rule-card .rc-hint { color: #6A7080; } /* ── الأقسام ── */ main { display: block; } .section { padding: 56px 0; } .section + .section { padding-top: 8px; } .page-head { padding: 40px 0 20px; } .page-head h1, .section-title { font-family: var(--f-display); font-weight: 600; font-size: clamp(28px, 3.4vw, 38px); line-height: 1.35; margin: 0 0 6px; letter-spacing: 0; } .page-head p, .section-lead { color: var(--ink-2); margin: 0; max-width: 42em; } .section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; } /* لوحة التقدّم */ .progress-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); box-shadow: var(--shadow-1); overflow: hidden; } .progress-strip > div { padding: 18px 22px; } .progress-strip > div + div { border-inline-start: 1px solid var(--line); } .ps-label { font-size: 13px; color: var(--ink-3); } .ps-value { font-size: 26px; font-weight: 600; line-height: 1.4; font-variant-numeric: tabular-nums; } .ps-value small { font-size: 14px; font-weight: 400; color: var(--ink-3); margin-inline-start: 4px; } .ps-action { display: flex; align-items: center; justify-content: center; } .empty-start { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; padding: 22px 26px; background: var(--surface); border: 1px dashed var(--line-strong); border-radius: var(--r-l); } .empty-start p { margin: 0; color: var(--ink-2); } /* ── تصنيفات الأبواب ── */ .cat-part { margin-bottom: 38px; } .cat-part-title { display: flex; align-items: center; gap: 12px; font-size: 17px; font-weight: 600; margin: 0 0 14px; padding: 0 2px; } .cat-part-title::after { content: ""; flex: 1; height: 1px; background: var(--line); } .cat-part-n { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; background: var(--ink); color: var(--bg); font-size: 14px; font-weight: 600; } .cat-filter { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 14px; margin-bottom: 4px; scrollbar-width: none; } .cat-filter::-webkit-scrollbar { display: none; } .cat-filter .chip { white-space: nowrap; } .cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: 16px; } .cat[hidden] { display: none; } .cat-part-label { font-size: 12.5px; font-weight: 500; color: var(--fam); margin-bottom: 2px; } .smp { display: inline-block; white-space: nowrap; } .cat { position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; transition: border-color .15s, box-shadow .2s; } .cat:hover { border-color: color-mix(in srgb, var(--fam) 50%, var(--line)); box-shadow: var(--shadow-2); } .cat:focus-within { border-color: var(--fam); } .cat.is-sel { border-color: var(--fam); box-shadow: 0 0 0 1.5px var(--fam); } .cat-link { position: absolute; inset: 0; z-index: 1; border-radius: 20px; } .cat-sample { position: relative; height: 118px; display: grid; place-items: center; padding: 0 18px; background: radial-gradient(circle at 15% 120%, color-mix(in srgb, var(--fam) 16%, transparent) 0, transparent 55%), color-mix(in srgb, var(--fam) 7%, var(--surface-2)); border-bottom: 1px solid color-mix(in srgb, var(--fam) 16%, var(--line)); font-family: var(--f-quran); font-size: 33px; line-height: 1.6; color: var(--ink); white-space: nowrap; overflow: hidden; } .cat-sample .hl, .pick-sample .hl, .hub-sample .hl { color: var(--fam); } .cat-body { padding: 16px 18px 4px; flex: 1; } .cat-body h3 { margin: 0 0 4px; font-size: 18px; font-weight: 600; line-height: 1.5; } .cat-body p { margin: 0; font-size: 14px; line-height: 1.65; color: var(--ink-3); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .cat-foot { display: flex; justify-content: space-between; gap: 10px; padding: 12px 18px 0; font-size: 13px; color: var(--ink-3); } .cat-status.done { color: var(--ok); font-weight: 500; } .cat .mastery-bar { margin: 8px 18px 18px; } .cat-check { position: absolute; top: 12px; inset-inline-end: 12px; z-index: 2; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid color-mix(in srgb, var(--fam) 35%, var(--line-strong)); background: var(--surface); color: transparent; transition: background .15s, border-color .15s, color .15s, transform .1s; } .cat-check svg { width: 18px; height: 18px; } .cat-check:hover { border-color: var(--fam); color: color-mix(in srgb, var(--fam) 70%, transparent); } .cat-check:active { transform: scale(.92); } .cat-check[aria-pressed="true"] { background: var(--fam); border-color: var(--fam); color: #fff; } .mastery-bar { height: 6px; border-radius: 3px; background: var(--sunken); overflow: hidden; } .mastery-bar i { display: block; height: 100%; background: var(--fam, var(--primary)); border-radius: 3px; transition: width .4s ease; } /* شريط الأبواب المختارة */ .selbar { position: fixed; bottom: 22px; left: 50%; z-index: 50; transform: translate(-50%, 160%); opacity: 0; visibility: hidden; pointer-events: none; transition: transform .28s cubic-bezier(.2, .8, .2, 1), opacity .2s, visibility .28s; width: max-content; max-width: calc(100% - 32px); } .selbar.show { transform: translate(-50%, 0); opacity: 1; visibility: visible; pointer-events: auto; } .selbar-in { display: flex; align-items: center; gap: 8px; background: var(--ink); color: var(--bg); padding: 10px; padding-inline-start: 20px; border-radius: 18px; box-shadow: var(--shadow-2); } .selbar-txt { display: flex; flex-direction: column; line-height: 1.35; margin-inline-end: 10px; } .selbar-txt b { font-size: 16px; } .selbar-txt span { font-size: 13px; opacity: .7; } .selbar .btn-primary { background: var(--bg); color: var(--ink); } .selbar .btn-primary:hover { background: var(--surface); } .selbar .btn-ghost { color: var(--bg); border-color: color-mix(in srgb, var(--bg) 35%, transparent); } .selbar .btn-ghost:hover { background: color-mix(in srgb, var(--bg) 10%, transparent); } .selbar .btn-quiet { color: color-mix(in srgb, var(--bg) 75%, transparent); } .selbar .btn-quiet:hover { background: color-mix(in srgb, var(--bg) 10%, transparent); color: var(--bg); } /* بطاقات اختيار الأبواب في الإعداد */ .picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 10px; } .pick { position: relative; display: grid; gap: 1px; text-align: start; align-content: start; padding: 12px 14px 12px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--surface); transition: border-color .12s, background .12s; } .pick:hover { border-color: color-mix(in srgb, var(--fam) 45%, var(--line)); } .pick-sample { font-family: var(--f-quran); font-size: 22px; line-height: 1.75; color: var(--ink-2); white-space: nowrap; overflow: hidden; padding-inline-end: 30px; } .pick-title { font-weight: 500; font-size: 15px; line-height: 1.5; } .pick-n { font-size: 12px; color: var(--ink-3); } .pick-check { position: absolute; top: 12px; inset-inline-end: 12px; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--line-strong); display: grid; place-items: center; color: transparent; } .pick-check svg { width: 14px; height: 14px; } .pick[aria-pressed="true"] { border-color: var(--fam); background: color-mix(in srgb, var(--fam) 6%, var(--surface)); } .pick[aria-pressed="true"] .pick-check { background: var(--fam); border-color: var(--fam); color: #fff; } /* صفحة الباب */ .hub { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; overflow: hidden; margin-bottom: 36px; padding-bottom: 26px; } .hub-sample { font-family: var(--f-quran); font-size: clamp(36px, 5vw, 54px); line-height: 1.8; text-align: center; padding: 26px 20px 22px; background: radial-gradient(circle at 12% 130%, color-mix(in srgb, var(--fam) 16%, transparent) 0, transparent 50%), color-mix(in srgb, var(--fam) 7%, var(--surface-2)); border-bottom: 1px solid color-mix(in srgb, var(--fam) 16%, var(--line)); } .hub .part { margin: 22px 28px 0; font-size: 14px; color: var(--fam); font-weight: 500; } .hub h1 { font-family: var(--f-display); font-weight: 600; font-size: clamp(28px, 3.4vw, 38px); line-height: 1.35; margin: 2px 28px 6px; } .hub > p { margin: 0 28px; color: var(--ink-2); } .hub-stats { display: flex; gap: 30px; margin: 18px 28px 0; flex-wrap: wrap; } .hub-stats div { font-size: 13px; color: var(--ink-3); } .hub-stats b { display: block; font-size: 22px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; } .hub-bar { margin: 14px 28px 0; } .hub-acts { display: flex; gap: 10px; flex-wrap: wrap; margin: 20px 28px 0; } .summary-head { scroll-margin-top: calc(var(--topbar-h) + 16px); } .summary-head h2 { font-family: var(--f-display); font-weight: 600; font-size: 26px; margin: 0 0 18px; } .fam-slate { --fam: var(--fam-slate); } .fam-lapis { --fam: var(--fam-lapis); } .fam-silent { --fam: var(--fam-silent); } .fam-ghunna { --fam: var(--fam-ghunna); } .fam-madd { --fam: var(--fam-madd); } .fam-amber { --fam: var(--fam-amber); } .fam-teal { --fam: var(--fam-teal); } /* بطاقتا الوضعين */ .modes { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .mode { padding: 26px; border-radius: var(--r-l); background: var(--surface); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; } .mode h3 { margin: 0; font-family: var(--f-display); font-weight: 600; font-size: 24px; } .mode p { margin: 0 0 8px; color: var(--ink-2); } .mode .btn { align-self: flex-start; margin-top: auto; } .mode-exam { background: var(--night); color: var(--night-ink); border-color: var(--night); } .mode-exam p { color: var(--night-ink-2); } /* ── إعداد الجلسة ── */ .setup { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 26px; align-items: start; padding-bottom: 60px; } .panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); padding: 22px; } .panel h2 { font-size: 17px; font-weight: 600; margin: 0 0 4px; } .panel .hint { font-size: 14px; color: var(--ink-3); margin: 0 0 14px; } .panel + .panel { margin-top: 16px; } .topic-picks { display: grid; gap: 18px; } .pick-group h3 { font-size: 14px; color: var(--ink-3); font-weight: 500; margin: 0 0 8px; display: flex; justify-content: space-between; align-items: center; } .pick-group h3 button { border: 0; background: none; color: var(--primary); font-size: 13px; padding: 2px 4px; } .chips { display: flex; flex-wrap: wrap; gap: 8px; } .chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface); font-size: 15px; transition: background .12s, border-color .12s, color .12s; } .chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--fam, var(--ink-3)); } .chip small { color: var(--ink-3); font-size: 12px; } .chip[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); } .chip[aria-pressed="true"] small { color: inherit; opacity: .7; } .chip[aria-pressed="true"] i { background: var(--bg); } .seg { display: flex; background: var(--sunken); border-radius: 12px; padding: 4px; gap: 4px; } .seg button { flex: 1; border: 0; background: transparent; padding: 9px 8px; border-radius: 9px; font-size: 15px; color: var(--ink-2); } .seg button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); font-weight: 500; } .setup-summary { position: sticky; top: calc(var(--topbar-h) + 16px); } .setup-summary .big { font-size: 40px; font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums; } .setup-summary .field { margin-top: 18px; } .setup-summary .field > label, .field-label { display: block; font-size: 14px; color: var(--ink-3); margin-bottom: 8px; } .toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 15px; } .switch { position: relative; width: 44px; height: 26px; border-radius: 999px; background: var(--line-strong); border: 0; transition: background .15s; flex: none; } .switch::after { content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: inset-inline-start .15s; box-shadow: 0 1px 2px rgba(0,0,0,.2); } .switch[aria-checked="true"] { background: var(--primary); } .switch[aria-checked="true"]::after { inset-inline-start: 21px; } /* ── جلسة الأسئلة ── */ .session { max-width: 780px; margin: 0 auto; padding: 22px var(--gutter) 120px; } .s-top { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; } .s-top .count { font-size: 15px; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; } .s-top .spacer { flex: 1; } .timer { display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; font-weight: 500; padding: 6px 12px; border-radius: 999px; background: var(--sunken); } .timer.low { background: var(--bad-bg); color: var(--bad); } .timer svg { width: 16px; height: 16px; } .segbar { display: flex; gap: 3px; margin-bottom: 26px; } .segbar i { flex: 1; height: 5px; border-radius: 3px; background: var(--line); transition: background .2s; } .segbar i.cur { background: var(--ink-3); } .segbar i.ok { background: var(--ok); } .segbar i.bad { background: var(--bad); } .segbar i.ans { background: var(--primary); } .qcard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); padding: 28px 30px; box-shadow: var(--shadow-1); } .q-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 13px; color: var(--ink-3); flex-wrap: wrap; } .q-meta .tag { display: inline-flex; align-items: center; gap: 6px; } .q-meta .tag i { width: 8px; height: 8px; border-radius: 50%; background: var(--fam, var(--ink-3)); } .q-meta .exam-tag { padding: 2px 10px; border-radius: 999px; background: var(--warn-bg); color: var(--warn); font-weight: 500; } .q-meta .type-tag { padding: 2px 10px; border-radius: 999px; background: var(--sunken); color: var(--ink-2); } .q-meta .bm { margin-inline-start: auto; } .bm-btn { border: 0; background: none; color: var(--ink-3); padding: 4px; border-radius: 8px; display: inline-flex; } .bm-btn svg { width: 20px; height: 20px; } .bm-btn[aria-pressed="true"] { color: var(--warn); } .bm-btn[aria-pressed="true"] svg { fill: currentColor; } .q-stem { font-size: 21px; font-weight: 500; line-height: 1.75; margin: 0; text-wrap: pretty; } .q-ayah { margin: 16px 0 4px; padding: 14px 18px; border-radius: var(--r-m); background: var(--surface-2); border: 1px solid var(--line); font-family: var(--f-quran); font-size: 30px; line-height: 2; text-align: center; } .q-ayah .br { color: var(--primary); } .options { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 10px; } .opt { width: 100%; display: flex; align-items: flex-start; gap: 14px; text-align: start; padding: 14px 16px; border-radius: var(--r-m); border: 1.5px solid var(--line); background: var(--surface); font-size: 17px; line-height: 1.7; transition: border-color .12s, background .12s, transform .08s; } .opt:hover:not([disabled]) { border-color: var(--line-strong); background: var(--surface-2); } .opt:active:not([disabled]) { transform: scale(.995); } .opt .key { flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--sunken); color: var(--ink-2); font-size: 15px; font-weight: 600; margin-top: 1px; } .opt .txt { flex: 1; min-width: 0; } .opt .mark { flex: none; width: 22px; height: 22px; margin-top: 4px; opacity: 0; } .opt.sel { border-color: var(--primary); background: var(--primary-soft); } .opt.sel .key { background: var(--primary); color: var(--primary-ink); } .opt.ok { border-color: var(--ok); background: var(--ok-bg); } .opt.ok .key { background: var(--ok); color: #fff; } .opt.ok .mark { opacity: 1; color: var(--ok); } .opt.bad { border-color: var(--bad); background: var(--bad-bg); } .opt.bad .key { background: var(--bad); color: #fff; } .opt.bad .mark { opacity: 1; color: var(--bad); } .opt.dim { opacity: .55; } .opt[disabled] { cursor: default; } .opt.multi .key { border-radius: 6px; } .tf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 22px; } .tf-row .opt { justify-content: center; align-items: center; font-weight: 500; font-size: 18px; padding: 18px; } .tf-row .opt .key { display: none; } .match { margin-top: 20px; display: grid; gap: 10px; } .match-row { display: grid; grid-template-columns: minmax(120px, 1fr) 2fr; gap: 12px; align-items: center; padding: 10px 12px; border-radius: var(--r-m); border: 1.5px solid var(--line); background: var(--surface); } .match-row .item { font-size: 18px; line-height: 1.7; } .match-row.ok { border-color: var(--ok); background: var(--ok-bg); } .match-row.bad { border-color: var(--bad); background: var(--bad-bg); } .match-row .fix { grid-column: 1 / -1; font-size: 14px; color: var(--bad); } .cat-picks { display: flex; flex-wrap: wrap; gap: 6px; } .cat-picks button { border: 1px solid var(--line-strong); background: var(--surface); border-radius: 999px; padding: 6px 12px; font-size: 14px; } .cat-picks button[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); } .cat-picks button[disabled] { cursor: default; } .cat-picks button.right { background: var(--ok); border-color: var(--ok); color: #fff; } .feedback { margin-top: 20px; padding: 16px 18px; border-radius: var(--r-m); border-inline-start: 4px solid var(--line-strong); background: var(--surface-2); animation: rise .25s ease; } .feedback.ok { border-inline-start-color: var(--ok); } .feedback.bad { border-inline-start-color: var(--bad); } .feedback .verdict { font-weight: 600; display: flex; align-items: center; gap: 8px; margin-bottom: 4px; } .feedback.ok .verdict { color: var(--ok); } .feedback.bad .verdict { color: var(--bad); } .feedback .verdict svg { width: 20px; height: 20px; } .feedback p { margin: 0; color: var(--ink-2); } .feedback .right-answer { margin: 4px 0 6px; color: var(--ink); } @keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } .s-foot { position: fixed; bottom: 0; inset-inline: 0; z-index: 30; background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid var(--line); } .s-foot .inner { max-width: 780px; margin: 0 auto; padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom, 0px)); display: flex; gap: 10px; align-items: center; } .s-foot .grow { flex: 1; } .kbd-hint { font-size: 13px; color: var(--ink-3); } .kbd { display: inline-block; min-width: 22px; padding: 0 6px; border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: 6px; font-size: 12px; text-align: center; line-height: 20px; } /* لوحة أرقام الأسئلة في الامتحان */ .palette { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 6px; } .palette button { height: 40px; border-radius: 9px; border: 1px solid var(--line-strong); background: var(--surface); font-size: 14px; font-variant-numeric: tabular-nums; position: relative; } .palette button.ans { background: var(--primary-soft); border-color: var(--primary); color: var(--primary); } .palette button.cur { outline: 2px solid var(--ink); outline-offset: 2px; font-weight: 600; } .palette button.flag::after { content: ""; position: absolute; top: 4px; inset-inline-end: 4px; width: 7px; height: 7px; border-radius: 50%; background: var(--warn); } .drawer { position: fixed; inset: 0; z-index: 60; display: none; } .drawer.open { display: block; } .drawer .scrim { position: absolute; inset: 0; background: rgba(8, 14, 30, .45); } .drawer .sheet { position: absolute; bottom: 0; inset-inline: 0; max-height: 80vh; overflow: auto; background: var(--surface); border-radius: 20px 20px 0 0; padding: 20px var(--gutter) 28px; max-width: 780px; margin: 0 auto; animation: sheet .2s ease; } @keyframes sheet { from { transform: translateY(20px); opacity: .6; } to { transform: none; opacity: 1; } } .sheet h2 { margin: 0 0 4px; font-size: 18px; } .sheet .legend-row { display: flex; gap: 16px; font-size: 13px; color: var(--ink-3); margin: 6px 0 14px; flex-wrap: wrap; } .sheet .legend-row span { display: inline-flex; gap: 6px; align-items: center; } .sheet .legend-row i { width: 12px; height: 12px; border-radius: 4px; border: 1px solid var(--line-strong); } /* نافذة التأكيد */ .modal { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 20px; } .modal .scrim { position: absolute; inset: 0; background: rgba(8, 14, 30, .5); } .modal .box { position: relative; background: var(--surface); border-radius: var(--r-l); padding: 26px; max-width: 420px; width: 100%; box-shadow: var(--shadow-2); animation: rise .2s ease; } .modal h2 { margin: 0 0 6px; font-size: 20px; } .modal p { margin: 0 0 18px; color: var(--ink-2); } .modal .acts { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; } /* ── النتيجة ── */ .result-hero { display: grid; grid-template-columns: auto 1fr; gap: 30px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); padding: 28px; } .score-ring { width: 150px; height: 150px; position: relative; } .score-ring svg { width: 100%; height: 100%; transform: scaleX(-1) rotate(-90deg); } .score-ring .val { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; line-height: 1.2; } .score-ring .val b { font-size: 34px; font-weight: 600; font-variant-numeric: tabular-nums; } .score-ring .val span { font-size: 13px; color: var(--ink-3); display: block; } .result-hero h1 { font-family: var(--f-display); font-weight: 600; font-size: 30px; margin: 0 0 4px; } .result-hero p { margin: 0; color: var(--ink-2); } .result-stats { display: flex; gap: 26px; margin: 16px 0 18px; flex-wrap: wrap; } .result-stats div { font-size: 13px; color: var(--ink-3); } .result-stats b { display: block; font-size: 20px; color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; } .result-acts { display: flex; gap: 10px; flex-wrap: wrap; } .breakdown { display: grid; gap: 12px; } .bd-row { display: grid; grid-template-columns: minmax(0, 1fr) 2fr 64px; gap: 14px; align-items: center; font-size: 15px; } .bd-row .bar { height: 10px; border-radius: 5px; background: var(--sunken); overflow: hidden; } .bd-row .bar i { display: block; height: 100%; background: var(--fam, var(--primary)); border-radius: 5px; } .bd-row .num { text-align: end; color: var(--ink-2); font-variant-numeric: tabular-nums; } .review-list { display: grid; gap: 14px; } .rv-item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); padding: 20px 22px; } .rv-item.bad { border-inline-start: 4px solid var(--bad); } .rv-item.ok { border-inline-start: 4px solid var(--ok); } .rv-item.skip { border-inline-start: 4px solid var(--line-strong); } .rv-head { display: flex; gap: 10px; align-items: baseline; margin-bottom: 6px; } .rv-num { font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums; } .rv-q { font-weight: 500; font-size: 17px; margin: 0; } .rv-ayah { font-family: var(--f-quran); font-size: 24px; line-height: 1.9; margin: 6px 0; } .rv-line { font-size: 15px; margin: 4px 0 0; display: flex; gap: 8px; } .rv-line .lbl { color: var(--ink-3); flex: none; } .rv-line.your-bad .val { color: var(--bad); } .rv-line.right .val { color: var(--ok); } .rv-exp { font-size: 15px; color: var(--ink-2); margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--line); } .filter-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; } /* ── المراجعة ── */ .tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 22px; overflow-x: auto; } .tabs button { border: 0; background: none; padding: 12px 16px; font-size: 16px; color: var(--ink-3); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; } .tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink); font-weight: 500; } .tabs button .n { font-size: 12px; background: var(--sunken); border-radius: 999px; padding: 1px 8px; margin-inline-start: 6px; color: var(--ink-2); } .empty { text-align: center; padding: 50px 20px; color: var(--ink-3); background: var(--surface); border: 1px dashed var(--line-strong); border-radius: var(--r-l); } .empty h3 { color: var(--ink); margin: 0 0 6px; font-size: 18px; } .empty p { margin: 0 0 16px; } .history { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); overflow: hidden; } .history li { display: grid; grid-template-columns: 1fr auto auto; gap: 16px; padding: 14px 18px; align-items: center; } .history li + li { border-top: 1px solid var(--line); } .history .h-mode { font-weight: 500; } .history .h-date { font-size: 13px; color: var(--ink-3); } .history .h-score { font-weight: 600; font-variant-numeric: tabular-nums; } .history .pill { font-size: 13px; padding: 2px 10px; border-radius: 999px; } .pill.good { background: var(--ok-bg); color: var(--ok); } .pill.mid { background: var(--warn-bg); color: var(--warn); } .pill.low { background: var(--bad-bg); color: var(--bad); } /* ── الملخّصات ── */ .study { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 36px; align-items: start; padding-bottom: 70px; } .study-nav { position: sticky; top: calc(var(--topbar-h) + 16px); max-height: calc(100vh - var(--topbar-h) - 32px); overflow: auto; } .study-nav h2 { font-size: 13px; color: var(--ink-3); font-weight: 500; margin: 14px 0 4px; } .study-nav h2:first-child { margin-top: 0; } .study-nav a { display: flex; align-items: center; gap: 8px; text-decoration: none; padding: 6px 10px; border-radius: 8px; font-size: 15px; color: var(--ink-2); } .study-nav a i { width: 7px; height: 7px; border-radius: 50%; background: var(--fam); flex: none; } .study-nav a:hover { background: var(--sunken); color: var(--ink); } .study-nav a[aria-current="page"] { background: var(--surface); color: var(--ink); font-weight: 500; box-shadow: var(--shadow-1); } .article { max-width: 760px; } .article-head { border-bottom: 1px solid var(--line); padding-bottom: 18px; margin-bottom: 26px; } .article-head .part { font-size: 14px; color: var(--fam); font-weight: 500; } .article-head h1 { font-family: var(--f-display); font-weight: 600; font-size: clamp(30px, 3.6vw, 40px); line-height: 1.35; margin: 2px 0 6px; } .article-head p { margin: 0; color: var(--ink-2); } .block { margin-bottom: 30px; } .block h2 { font-size: 20px; font-weight: 600; margin: 0 0 8px; display: flex; align-items: center; gap: 10px; } .block h2::before { content: ""; width: 4px; height: 20px; border-radius: 2px; background: var(--fam); } .block p { margin: 0 0 10px; } .block ul { margin: 0; padding-inline-start: 22px; } .block li { margin-bottom: 6px; } .block li::marker { color: var(--fam); } .tbl-wrap { overflow-x: auto; margin: 8px 0 12px; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface); } table { border-collapse: collapse; width: 100%; font-size: 15px; } th, td { text-align: start; padding: 10px 14px; vertical-align: top; } th { background: var(--surface-2); font-weight: 600; font-size: 14px; color: var(--ink-2); border-bottom: 1px solid var(--line); } td + td, th + th { border-inline-start: 1px solid var(--line); } tr + tr td { border-top: 1px solid var(--line); } .study-cta { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 36px; padding: 22px 24px; border-radius: var(--r-l); background: var(--night); color: var(--night-ink); } .study-cta p { margin: 0; color: var(--night-ink-2); } .study-cta b { color: var(--night-ink); display: block; font-size: 18px; } /* ── التذييل ── */ .footer { padding: 40px 0 50px; color: var(--ink-2); font-size: 14px; border-top: 1px solid var(--line); margin-top: 30px; } .footer .wrap { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; } .footer p { margin: 0; } .footer a { text-decoration: underline; text-underline-offset: 3px; } /* تنبيه عابر */ .toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px); z-index: 80; background: var(--ink); color: var(--bg); padding: 10px 18px; border-radius: 999px; font-size: 15px; opacity: 0; transition: opacity .2s, transform .2s; pointer-events: none; } .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } /* ── الاستجابة للشاشات ── */ @media (max-width: 960px) { .hero .wrap { grid-template-columns: 1fr; gap: 40px; } .setup { grid-template-columns: 1fr; } .setup-summary { position: static; } .study { grid-template-columns: minmax(0, 1fr); } .study-nav { position: static; max-height: none; display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; } .study-nav h2 { display: none; } .study-nav a { white-space: nowrap; border: 1px solid var(--line); } } @media (max-width: 760px) { :root { --gutter: 16px; --topbar-h: 58px; } body { font-size: 16px; padding-bottom: 72px; } .nav { display: none; } .top-actions { margin-inline-start: auto; } .brand-mark { font-size: 27px; } .tabbar { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; bottom: 0; inset-inline: 0; z-index: 45; background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); } .tabbar a { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 2px 7px; text-decoration: none; font-size: 11.5px; color: var(--ink-3); } .tabbar a svg { width: 22px; height: 22px; } .tabbar a[aria-current="page"] { color: var(--primary); } body.in-session .tabbar { display: none; } body.in-session { padding-bottom: 0; } .hero { padding: calc(var(--topbar-h) + 30px) 0 44px; } .hero-lead { font-size: 16px; } .hero-facts { gap: 20px; } .mushaf-frame { padding: 20px 12px 16px; } .progress-strip { grid-template-columns: 1fr 1fr; } .progress-strip > div:nth-child(3) { border-inline-start: 0; } .progress-strip > div:nth-child(n+3) { border-top: 1px solid var(--line); } .cat-grid { grid-template-columns: 1fr 1fr; gap: 10px; } .cat-sample { height: 88px; font-size: 24px; padding: 0 10px; } .cat-body { padding: 12px 12px 2px; } .cat-body h3 { font-size: 15px; } .cat-body p { display: none; } .cat-part-label { font-size: 11.5px; } .cat-filter { margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); } .cat-foot { padding: 6px 12px 0; font-size: 12px; flex-direction: column; gap: 0; } .cat .mastery-bar { margin: 8px 12px 12px; } .cat-check { top: 8px; inset-inline-end: 8px; width: 32px; height: 32px; } .selbar { bottom: calc(76px + env(safe-area-inset-bottom)); } .selbar-in { padding-inline-start: 14px; } .selbar .btn { padding: 0 14px; min-height: 42px; } .selbar .btn-quiet { display: none; } .picks { grid-template-columns: 1fr 1fr; } .pick-sample { font-size: 18px; } .hub .part, .hub > p, .hub-stats, .hub-bar, .hub-acts { margin-inline: 18px; } .hub h1 { margin-inline: 18px; } .modes { grid-template-columns: 1fr; } .qcard { padding: 20px 18px; border-radius: var(--r-m); } .q-stem { font-size: 19px; } .q-ayah { font-size: 26px; padding: 10px 12px; } .opt { font-size: 16px; padding: 12px 14px; } .match-row { grid-template-columns: 1fr; } .s-foot .kbd-hint { display: none; } .result-hero { grid-template-columns: 1fr; justify-items: start; padding: 22px; } .score-ring { width: 120px; height: 120px; } .bd-row { grid-template-columns: 1fr 52px; } .bd-row .bar { grid-column: 1 / -1; grid-row: 2; } .history li { grid-template-columns: 1fr auto; } .history li .pill { display: none; } .section { padding: 40px 0; } .toast { bottom: 90px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } } @media print { .topbar, .tabbar, .s-foot, .study-nav, .study-cta, .footer { display: none !important; } body { background: #fff; } } /* ── التلوين داخل النصّ القرآنيّ («ما تحته خطّ») ── */ :root { --hl-ink: #C2410C; } :root[data-theme="dark"] { --hl-ink: #FF9E5E; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --hl-ink: #FF9E5E; } } .q-ayah .hl, .rv-ayah .hl, .qtx .hl { color: var(--hl-ink); } .q-meta .exam-tag small { font-size: .85em; opacity: .75; margin-inline-start: 2px; } /* ── الامتحانات السابقة ── */ .past-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; padding-bottom: 8px; } .past { position: relative; display: flex; flex-direction: column; gap: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 18px 18px 16px; transition: border-color .15s, box-shadow .2s; } .past:hover { border-color: var(--line-strong); box-shadow: var(--shadow-2); } .past.done { border-color: color-mix(in srgb, var(--ok) 45%, var(--line)); } .past-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .past-badge { font-family: var(--f-display); font-weight: 600; font-size: 22px; line-height: 1.2; color: var(--primary); font-variant-numeric: tabular-nums; } .past-kind { font-size: 12px; color: var(--ink-3); background: var(--sunken); border-radius: 999px; padding: 3px 10px; white-space: nowrap; } .past h3 { margin: 0; font-size: 17px; font-weight: 600; line-height: 1.5; } .past-meta { margin: -4px 0 0; font-size: 13px; color: var(--ink-3); } .past-tops { display: flex; flex-wrap: wrap; gap: 6px; } .mini { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px; } .mini i { width: 7px; height: 7px; border-radius: 50%; background: var(--fam, var(--ink-3)); } .past-prog { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--ink-3); margin-top: auto; padding-top: 4px; } .past-prog .mastery-bar { flex: 1; --fam: var(--ok); } .past-acts { display: flex; gap: 8px; } .past-acts .btn { flex: 1; } .past-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; background: var(--night); color: var(--night-ink); border-radius: var(--r-l); padding: 18px 22px; margin-bottom: 22px; } .past-bar-txt { display: grid; gap: 2px; max-width: 46em; } .past-bar-txt b { font-size: 20px; font-weight: 600; } .past-bar-txt span { font-size: 14px; color: var(--night-ink-2); } .past-bar-acts { display: flex; gap: 8px; flex-wrap: wrap; } .past-bar .btn-ghost { color: var(--night-ink); border-color: color-mix(in srgb, var(--night-ink) 35%, transparent); } .past-bar .btn-ghost:hover { background: color-mix(in srgb, var(--night-ink) 10%, transparent); } .past-bar .btn-primary { background: var(--night-ink); color: var(--night); } .past-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 15px; font-weight: 500; color: var(--primary); text-decoration: none; } .past-link svg { width: 16px; height: 16px; } .past-link:hover { text-decoration: underline; } @media (max-width: 760px) { .past-grid { grid-template-columns: 1fr; gap: 12px; } .past-bar { padding: 16px; } .past-bar-acts, .past-bar-acts .btn { width: 100%; } .past-bar-acts .btn { flex: 1; } } @media (max-width: 760px) { .home-past .past:nth-child(n+3) { display: none; } } .nav a { white-space: nowrap; } @media (max-width: 1080px) and (min-width: 761px) { .brand-sub { display: none; } .topbar .wrap { gap: 12px; } .nav { gap: 0; } .nav a { padding-inline: 10px; font-size: 14.5px; } } /* شريط أعلى الشاشة في تطبيق الجوال */ body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 41; background: var(--bg); } body[data-route="home"]::before { background: var(--night); } /* ── خطّ القرآن داخل النصوص ── */ .q-text, .qtx { font-size: 1.42em; line-height: 2; padding-inline: 2px; } .q-ayah { line-height: 2.2; } td .qtx { white-space: nowrap; } .hide-sm { } @media (max-width: 760px) { .hide-sm { display: none; } } /* ── المصحف الملوّن كاملًا ── */ .mp { --paper: #FBFBF7; --paper-ink: #1A1A1A; --frame: #1D3E7A; --c-g: #12804A; --c-l: #9F1239; --c-w: #D7263D; --c-j: #E06A0A; --c-n: #C0587E; --c-q: #1F78D1; --c-r: #1E3A8A; --c-s: #9AA3AD; } :root[data-theme="dark"] .mp { --paper: #161A22; --paper-ink: #ECE8DC; --frame: #4C6BB0; --c-g: #3DC685; --c-l: #FF5C7A; --c-w: #FF8A80; --c-j: #FFAA4D; --c-n: #F2A2C2; --c-q: #5CB2FF; --c-r: #A5B4FF; --c-s: #6E7787; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .mp { --paper: #161A22; --paper-ink: #ECE8DC; --frame: #4C6BB0; --c-g: #3DC685; --c-l: #FF5C7A; --c-w: #FF8A80; --c-j: #FFAA4D; --c-n: #F2A2C2; --c-q: #5CB2FF; --c-r: #A5B4FF; --c-s: #6E7787; } } .mp .tj-g, .dot.tj-g { color: var(--c-g); --d: var(--c-g); } .mp .tj-l, .dot.tj-l { color: var(--c-l); --d: var(--c-l); } .mp .tj-w, .dot.tj-w { color: var(--c-w); --d: var(--c-w); } .mp .tj-j, .dot.tj-j { color: var(--c-j); --d: var(--c-j); } .mp .tj-n, .dot.tj-n { color: var(--c-n); --d: var(--c-n); } .mp .tj-q, .dot.tj-q { color: var(--c-q); --d: var(--c-q); } .mp .tj-r, .dot.tj-r { color: var(--c-r); --d: var(--c-r); } .mp .tj-s, .dot.tj-s { color: var(--c-s); --d: var(--c-s); } .mp-page.off-g .tj-g, .mp-page.off-l .tj-l, .mp-page.off-w .tj-w, .mp-page.off-j .tj-j, .mp-page.off-n .tj-n, .mp-page.off-q .tj-q, .mp-page.off-r .tj-r, .mp-page.off-s .tj-s { color: inherit; } .dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--d); flex: none; } .mp-bar { position: sticky; top: calc(var(--topbar-h) + env(safe-area-inset-top, 0px)); z-index: 30; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); } .mp-bar .wrap { display: flex; align-items: center; gap: 6px; padding-block: 8px; } .mp-bar select { min-width: 0; flex: 0 1 230px; height: 40px; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); padding: 0 10px; font: inherit; font-size: 15px; } .mp-bar .icon-btn small { font-size: 12px; margin-inline-start: 1px; } .mp-bar .grow { flex: 1; } .mp-wrap { padding-top: 16px; padding-bottom: 60px; } .mp-legend { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; } .mp-legend .lg { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); font-size: 13px; } .mp-legend .lg[aria-pressed="false"] { opacity: .45; text-decoration: line-through; } .mp-page { background: var(--paper); color: var(--paper-ink); border: 1.5px solid var(--frame); outline: 1px solid var(--frame); outline-offset: -7px; border-radius: 6px; padding: 26px 30px 30px; box-shadow: var(--shadow-1); } .mp-head { text-align: center; margin-bottom: 8px; } .mp-title { font-family: var(--f-quran); font-size: 28px; color: var(--frame); display: inline-block; padding: 2px 28px; border: 1px solid var(--frame); border-radius: 999px; } .mp-meta { font-size: 13px; color: var(--ink-3); margin-top: 6px; } .mp-basmala { font-family: var(--f-quran); font-size: 30px; text-align: center; line-height: 2; margin: 4px 0 2px; } .mp-text { font-family: var(--f-quran); line-height: 2.35; text-align: justify; text-align-last: center; word-spacing: 2px; } .mp-text .tj { cursor: pointer; border-radius: 4px; } .mp-text .tj:hover, .mp-text .tj.on { background: color-mix(in srgb, var(--frame) 16%, transparent); } .ay.flash { background: color-mix(in srgb, #F5C542 30%, transparent); border-radius: 6px; transition: background 1s; } .ae { font: inherit; font-size: .9em; color: var(--frame); background: none; border: 0; padding: 0 2px; cursor: pointer; border-radius: 50%; } .ae.playing { color: #fff; background: var(--c-g); } .juz-mark { font-family: var(--f-body, inherit); font-size: 13px; color: var(--frame); border: 1px solid var(--frame); border-radius: 999px; padding: 1px 8px; vertical-align: middle; white-space: nowrap; } .mp-pager { display: flex; justify-content: space-between; gap: 10px; margin-top: 18px; flex-wrap: wrap; } .mp-credit { font-size: 12.5px; color: var(--ink-3); margin-top: 18px; } .mp-credit a { color: inherit; } .tj-sheet { position: fixed; inset: auto 0 0 0; z-index: 60; display: flex; justify-content: center; padding: 0 12px calc(12px + env(safe-area-inset-bottom)); } .tj-sheet[hidden] { display: none; } .tj-sheet-in { position: relative; width: min(560px, 100%); background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-2); padding: 16px 18px; } .tj-name { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 17px; padding-inline-end: 40px; } .tj-word { margin: 6px 0 4px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .tj-word .qtx { font-size: 1.7em; } .tj-word span:last-child { font-size: 12.5px; color: var(--ink-3); } .tj-sheet p { margin: 4px 0 10px; color: var(--ink-2); font-size: 15px; } .tj-acts { display: flex; gap: 8px; flex-wrap: wrap; } .tj-x { position: absolute; top: 10px; inset-inline-end: 10px; width: 34px; height: 34px; } .mp-search input { width: 100%; height: 46px; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); padding: 0 14px; font: inherit; margin-bottom: 12px; } .mp-continue { display: flex; align-items: center; gap: 10px; background: var(--night); color: var(--night-ink); border-radius: var(--r-l); padding: 14px 18px; margin-bottom: 14px; text-decoration: none; } .mp-continue span { color: var(--night-ink-2); font-size: 14px; } .mp-continue b { flex: 1; } .mp-continue svg { width: 18px; height: 18px; } .sura-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin-top: 6px; } .sura { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); text-decoration: none; color: var(--ink); } .sura:hover { border-color: var(--line-strong); box-shadow: var(--shadow-1); } .sura[hidden] { display: none; } .sura-n { grid-row: 1 / 3; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; background: var(--primary-soft); color: var(--primary); font-weight: 600; } .sura-name { font-family: var(--f-quran); font-size: 21px; line-height: 1.5; } .sura-meta { font-size: 12.5px; color: var(--ink-3); } .mushaf-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; color: #1D3E7A; font-weight: 600; font-size: 15px; text-decoration: none; } .mushaf-more svg { width: 16px; height: 16px; } @media (max-width: 760px) { .mp-page { padding: 18px 14px 22px; } .mp-title { font-size: 23px; } .sura-grid { grid-template-columns: 1fr 1fr; } .tabbar { grid-template-columns: repeat(6, 1fr); } .tabbar a { font-size: 10.5px; } } a.chip { text-decoration: none; color: var(--ink); } /* زرّ الاستماع إلى الآية */ .q-ayah, .rv-ayah { position: relative; } .say { display: inline-grid; place-items: center; width: 36px; height: 36px; margin-inline-start: 10px; vertical-align: middle; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--surface); color: var(--primary); cursor: pointer; } .say svg { width: 18px; height: 18px; } .say:hover { background: var(--primary-soft); } .say.loading { opacity: .6; } .say.playing { background: var(--primary); color: var(--primary-ink); border-color: var(--primary); } .rv-ayah .say { width: 30px; height: 30px; } .tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } td .qtx { white-space: normal; } /* مستويات الصعوبة */ .levels { display: grid; gap: 6px; } .lvl { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 10px; text-align: start; padding: 9px 12px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink-2); font: inherit; font-size: 15px; cursor: pointer; } .lvl b { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--sunken); color: var(--ink-2); font-size: 14px; } .lvl small { font-size: 12.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; } .lvl[aria-pressed="true"] { border-color: var(--primary); color: var(--ink); background: color-mix(in srgb, var(--primary) 6%, var(--surface)); } .lvl[aria-pressed="true"] b { background: var(--primary); color: var(--primary-ink); } .q-meta .lvl-tag { padding: 2px 10px; border-radius: 999px; font-size: 12.5px; background: var(--sunken); color: var(--ink-2); } .q-meta .lvl-tag.lv1 { background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); } .q-meta .lvl-tag.lv3 { background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary); } .hub-levels { display: grid; gap: 6px; margin: 18px 28px 0; } .hub-lvl { display: grid; grid-template-columns: 28px 1fr auto auto; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); text-decoration: none; font-size: 15px; } .hub-lvl:hover { border-color: var(--fam); } .hub-lvl b { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--fam); color: #fff; font-size: 14px; } .hub-lvl small { font-size: 13px; color: var(--ink-3); } .hub-lvl em { font-style: normal; display: inline-flex; align-items: center; gap: 2px; color: var(--primary); font-size: 14px; font-weight: 500; } .hub-lvl em svg { width: 14px; height: 14px; } @media (max-width: 760px) { .hub-levels { margin-inline: 18px; } .hub-lvl { grid-template-columns: 28px 1fr auto; } .hub-lvl em { display: none; } } /* ── الحسابات والحلقات ── */ .wrap.narrow { max-width: 720px; padding-bottom: 60px; } .wrap.narrow .panel + .panel, .wrap > .panel + .panel { margin-top: 14px; } .auth { display: grid; gap: 14px; } .auth .btn svg { margin-inline-end: 8px; } .or { display: flex; align-items: center; gap: 10px; color: var(--ink-3); font-size: 13px; } .or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); } #authForm { display: grid; gap: 12px; } .fld { display: grid; gap: 6px; font-size: 14px; color: var(--ink-2); } .fld input, .row-form input { height: 46px; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); padding: 0 14px; font: inherit; font-size: 16px; } .fld input:focus, .row-form input:focus { outline: 2px solid var(--focus); outline-offset: 1px; } .fld.grow { flex: 1; } .row-form { display: flex; gap: 10px; align-items: end; flex-wrap: wrap; } .row-form input { flex: 1; min-width: 160px; } .auth-alt { margin: 0; font-size: 14px; color: var(--ink-3); text-align: center; } .linkish { border: 0; background: none; color: var(--primary); font: inherit; cursor: pointer; padding: 2px; } .acct-card { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .acct-card > div:nth-child(2) { flex: 1; display: grid; gap: 2px; } .acct-card span { color: var(--ink-3); font-size: 14px; } .acct.big { width: 54px; height: 54px; font-size: 24px; } .role-tag { justify-self: start; display: inline-block; font-size: 12.5px !important; padding: 2px 10px; border-radius: 999px; background: var(--primary-soft); color: var(--primary) !important; } .row-acts { display: flex; gap: 8px; flex-wrap: wrap; } .acct-in { white-space: nowrap; } .topbar.on-night .acct-in { color: var(--night-ink); } .hq-list { display: grid; gap: 14px; margin-top: 14px; padding-bottom: 60px; } .hq-head { display: flex; justify-content: space-between; align-items: start; gap: 10px; flex-wrap: wrap; } .hq-head h2 { margin: 0 0 4px; } .code { font-size: 18px; letter-spacing: 2px; color: var(--ink); } .students td, .students th { white-space: nowrap; } .students tr[data-student] { cursor: pointer; } .students tr[data-student]:hover td { background: var(--surface-2); } .student-detail td { background: var(--surface-2); white-space: normal; } .user-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 0; border-bottom: 1px solid var(--line); } .user-row > div:first-child { flex: 1; display: grid; } .user-row span[dir] { color: var(--ink-3); font-size: 13px; } .acct { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--primary); color: var(--primary-ink); font-weight: 600; text-decoration: none; font-size: 16px; flex: none; } .acct[hidden] { display: none; } .topbar.on-night .acct { background: var(--night-ink); color: var(--night); } .fld[hidden] { display: none; } /* ── سلاسة الاستعمال على الهاتف ── */ button, a, .opt, .pick, .chip, .lvl, summary { -webkit-tap-highlight-color: transparent; touch-action: manipulation; } .opt:active:not([disabled]), .pick:active, .chip:active, .lvl:active, .btn:active { transform: scale(.985); } @media (hover: none) { .opt:not(.sel):hover:not([disabled]) { border-color: var(--line); background: var(--surface); } } .mp-bar .icon-btn .fs { display: inline-flex; align-items: baseline; gap: 1px; font-size: 17px; font-weight: 600; line-height: 1; } .mp-bar .icon-btn .fs small { font-size: 14px; } /* إعداد التدريب */ .topics-toggle, .startbar { display: none; } .exam-pick summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 6px; } .exam-pick summary::-webkit-details-marker { display: none; } .exam-pick summary::after { content: "▾"; margin-inline-start: auto; color: var(--ink-3); transition: transform .15s; } .exam-pick[open] summary::after { transform: rotate(180deg); } .exam-pick summary b { color: var(--ink); font-weight: 600; } .exam-pick .chips { margin-top: 10px; } @media (max-width: 760px) { /* أثناء الأسئلة: تركيز كامل، بلا شريط علوي */ body.in-session .topbar { display: none; } body.in-session::before { background: var(--bg); } .session { padding-top: calc(10px + env(safe-area-inset-top, 0px)); padding-bottom: calc(110px + env(safe-area-inset-bottom, 0px)); } .s-top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: var(--bg); margin: 0 calc(var(--gutter) * -1) 10px; padding: 6px var(--gutter); } .s-top + .segbar { margin-top: -6px; } .s-foot .inner { gap: 8px; } .s-foot .btn { min-height: 52px; } .s-foot .btn-primary { flex: 1 1 auto; font-size: 17px; } .s-foot .grow { display: none; } .s-foot .btn-quiet, .s-foot .btn-ghost { padding: 0 16px; } .opt { min-height: 56px; } .q-ayah { font-size: 28px; } body.in-session .toast { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); } /* إعداد التدريب: الإعدادات أوّلًا، والأبواب مطويّة، وزرّ البدء ثابت تحت الإبهام */ .page-head p { font-size: 15px; } .setup { display: flex; flex-direction: column; gap: 14px; padding-bottom: 20px; } .setup-summary { order: -1; padding: 18px; } .setup-summary .big, .setup-summary .big + .hint { display: none; } .setup-summary > .field-label:first-child { display: none; } .setup-summary .field:first-of-type { margin-top: 0; } .start-field { display: none; } .setup-topics { padding: 0; overflow: hidden; } .setup-topics > h2, .setup-topics > .hint { display: none; } .setup-topics .topic-picks { display: none; padding: 4px 14px 16px; } .setup-topics.open .topic-picks { display: block; } .topics-toggle { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border: 0; background: none; color: var(--ink); font: inherit; text-align: start; } .topics-toggle span { display: flex; flex-direction: column; gap: 2px; } .topics-toggle b { font-size: 16px; font-weight: 600; } .topics-toggle small { font-size: 14px; color: var(--ink-3); } .topics-toggle em { font-style: normal; color: var(--primary); font-weight: 600; font-size: 15px; padding: 6px 12px; border-radius: 999px; background: color-mix(in srgb, var(--primary) 9%, transparent); } .pick-sample { display: none; } .pick { padding: 12px 12px; min-height: 0; } .pick-title { font-size: 14.5px; padding-inline-end: 26px; } .startbar { display: block; position: fixed; inset-inline: 0; bottom: calc(62px + env(safe-area-inset-bottom, 0px)); z-index: 44; padding: 10px var(--gutter); background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid var(--line); } .startbar .btn { min-height: 54px; font-size: 17px; justify-content: space-between; padding: 0 20px; } .startbar .sb-n { font-weight: 400; font-size: 15px; opacity: .85; } body[data-route="practice"] .setup, body[data-route="exam"] .setup { padding-bottom: 96px; } /* المصحف */ .mp-bar .wrap { gap: 4px; } .mp-bar .icon-btn { width: 38px; height: 38px; } .mp-bar select { flex: 1 1 auto; } .mp-bar .grow { display: none; } .mp-legend { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--gutter) * -1); padding: 0 var(--gutter) 2px; scrollbar-width: none; } .mp-legend::-webkit-scrollbar { display: none; } .mp-legend .lg { white-space: nowrap; flex: none; } .mp-page { padding: 18px 14px 22px; } } @media (max-width: 760px) { .setup { align-items: stretch; } body[data-route="practice"] .page-head, body[data-route="exam"] .page-head { padding-top: 22px; padding-bottom: 16px; } body[data-route="practice"] .page-head h1, body[data-route="exam"] .page-head h1 { font-size: 30px; } } @media (max-width: 760px) { .setup-summary > .hint + .field { margin-top: 0; } } .opt.sel:hover:not([disabled]), .opt.sel:not([disabled]) { border-color: var(--primary); background: var(--primary-soft); border-width: 2px; } /* ── هويّة «يقين» (اختيارية): html[data-skin=a|b|c] ── */ @font-face { font-family: "Amiri"; src: url(../fonts/amiri-arabic-700.woff2) format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1; } @font-face { font-family: "Amiri"; src: url(../fonts/amiri-latin-700.woff2) format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "IBM Plex Sans Arabic"; src: url(../fonts/ibm-plex-sans-arabic-arabic-400.woff2) format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1; } @font-face { font-family: "IBM Plex Sans Arabic"; src: url(../fonts/ibm-plex-sans-arabic-latin-400.woff2) format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "IBM Plex Sans Arabic"; src: url(../fonts/ibm-plex-sans-arabic-arabic-500.woff2) format("woff2"); font-weight: 500; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1; } @font-face { font-family: "IBM Plex Sans Arabic"; src: url(../fonts/ibm-plex-sans-arabic-latin-500.woff2) format("woff2"); font-weight: 500; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "IBM Plex Sans Arabic"; src: url(../fonts/ibm-plex-sans-arabic-arabic-600.woff2) format("woff2"); font-weight: 600; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1; } @font-face { font-family: "IBM Plex Sans Arabic"; src: url(../fonts/ibm-plex-sans-arabic-latin-600.woff2) format("woff2"); font-weight: 600; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "IBM Plex Sans Arabic"; src: url(../fonts/ibm-plex-sans-arabic-arabic-700.woff2) format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1; } @font-face { font-family: "IBM Plex Sans Arabic"; src: url(../fonts/ibm-plex-sans-arabic-latin-700.woff2) format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root[data-skin] , :root[data-skin][data-theme="light"] { --bg: #EEE8DF; --surface: #F8F5EF; --surface-2: #F3EEE6; --sunken: #E6DFD3; --line: #DDD4C6; --line-strong: #C8BDAA; --ink: #2E3B36; --ink-2: #4F5C56; --ink-3: #7C8680; --primary: #2E3B36; --primary-hover: #232E2A; --primary-ink: #EEE8DF; --primary-soft: #E3E4DA; --focus: #B8935A; --night: #2E3B36; --night-2: #232E2A; --night-ink: #EEE8DF; --night-ink-2: #CFC6B6; --fam-lapis: #3F6A5C; --fam-slate: #6E7A72; --tj-tafkhim: #2B4A80; --gold: #B8935A; } :root[data-skin][data-theme="dark"] { --bg: #1A2320; --surface: #222D29; --surface-2: #27332E; --sunken: #18201D; --line: #34433C; --line-strong: #47584F; --ink: #EEE8DF; --ink-2: #C9C2B5; --ink-3: #8F978F; --primary: #D2B07A; --primary-hover: #DDBD8A; --primary-ink: #1A2320; --primary-soft: #3A3A2D; --focus: #D2B07A; --night: #222D29; --night-2: #1A2320; --night-ink: #EEE8DF; --night-ink-2: #B9B2A5; --fam-lapis: #8FB8A8; --fam-slate: #A8B2AA; --gold: #D2B07A; } :root[data-skin="b"], :root[data-skin="c"] { --f-ui: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, system-ui, sans-serif; } :root[data-skin="b"] { --f-display: "IBM Plex Sans Arabic", system-ui, sans-serif; } :root[data-skin="c"] { --f-display: "Amiri", "IBM Plex Sans Arabic", serif; } :root[data-skin="b"] .page-head h1, :root[data-skin="b"] .hero h1, :root[data-skin="b"] .section-title { font-weight: 700; } :root[data-skin="c"] .hero h1, :root[data-skin="c"] .page-head h1, :root[data-skin="c"] .section-title { font-weight: 700; } :root[data-skin="b"] .brand-mark, :root[data-skin="c"] .brand-mark { font-family: "Amiri", serif; font-weight: 700; } :root[data-skin="b"] .brand-mark { color: var(--gold); } :root[data-skin] body { background: var(--bg); } :root[data-skin] .q-ayah .br, :root[data-skin] .br { color: var(--gold); } :root[data-skin] .segbar i.cur { background: var(--gold); } :root[data-skin] .tabbar a[aria-current="page"] { color: var(--gold); } :root[data-skin] .mushaf-frame { border-color: var(--gold); outline-color: var(--gold); } :root[data-skin] .mushaf-frame [class*="title"], :root[data-skin] .mushaf-ayat .aya-end { color: #2E3B36; } :root[data-skin] .mp { --paper: #FBF8F2; --frame: #2E3B36; } :root[data-skin][data-theme="dark"] .mp { --paper: #1F2925; --paper-ink: #EEE8DF; --frame: #D2B07A; } /* C: شريطان أخضران وزرّ ذهبي */ :root[data-skin="c"]:not([data-theme="dark"]) { --primary: #B8935A; --primary-hover: #A7834C; --primary-ink: #1F2A26; --primary-soft: #F1E7D6; } :root[data-skin="c"] .topbar, :root[data-skin="c"] .topbar.scrolled { background: #2E3B36; color: #EEE8DF; border-bottom-color: #2E3B36; } :root[data-skin="c"][data-theme="dark"] .topbar { background: #222D29; border-bottom-color: #34433C; } :root[data-skin="c"] .topbar .brand-sub, :root[data-skin="c"] .topbar .nav a { color: #CFC6B6; } :root[data-skin="c"] .topbar .nav a:hover { background: rgba(255,255,255,.08); color: #fff; } :root[data-skin="c"] .topbar .nav a[aria-current="page"] { background: #EEE8DF; color: #2E3B36; } :root[data-skin="c"] .topbar .icon-btn, :root[data-skin="c"] .topbar .acct-btn, :root[data-skin="c"] .topbar a { color: #EEE8DF; border-color: rgba(255,255,255,.18); } :root[data-skin="c"] body::before { background: #2E3B36; } @media (max-width: 760px) { :root[data-skin="c"] .tabbar { background: #2E3B36; border-top-color: #2E3B36; } :root[data-skin="c"] .tabbar a { color: #AFA796; } :root[data-skin="c"] .tabbar a[aria-current="page"] { color: #D9B57A; } :root[data-skin="c"] body.in-session::before { background: var(--bg); } } /* لوحة تجربة الألوان */ .skin-picker { position: fixed; z-index: 90; inset-inline: 12px; top: calc(env(safe-area-inset-top, 0px) + 70px); display: flex; gap: 6px; justify-content: center; pointer-events: none; } .skin-picker div { pointer-events: auto; display: flex; gap: 4px; padding: 5px; border-radius: 999px; background: rgba(20,24,22,.86); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 6px 20px rgba(0,0,0,.25); } .skin-picker button { border: 0; border-radius: 999px; padding: 7px 12px; font: inherit; font-size: 13.5px; background: transparent; color: #E9E4DA; } .skin-picker button[aria-pressed="true"] { background: #EEE8DF; color: #2E3B36; font-weight: 600; } body.in-session .skin-picker { top: auto; bottom: calc(env(safe-area-inset-bottom, 0px) + 92px); } /* اختيار أكثر من مستوى في صفحة الباب */ button.hub-lvl { width: 100%; font: inherit; text-align: start; cursor: pointer; grid-template-columns: 26px 28px 1fr auto; } .hub-ck { width: 24px; height: 24px; border-radius: 7px; border: 1.5px solid var(--line-strong); background: var(--surface); display: grid; place-items: center; color: transparent; transition: background .12s, border-color .12s; } .hub-ck svg { width: 15px; height: 15px; } .hub-lvl[aria-pressed="true"] { border-color: var(--fam); background: color-mix(in srgb, var(--fam) 7%, var(--surface)); } .hub-lvl[aria-pressed="true"] .hub-ck { background: var(--fam); border-color: var(--fam); color: #fff; } .hub-lvl[aria-pressed="false"] b { background: var(--line-strong); } .hub-lvl[aria-pressed="false"] span:not(.hub-ck), .hub-lvl[aria-pressed="false"] small { opacity: .6; } .hub-hint { margin: 2px 2px 0; font-size: 13px; color: var(--ink-3); } .hub-n { font-weight: 400; opacity: .8; font-size: .9em; } @media (max-width: 760px) { button.hub-lvl { grid-template-columns: 26px 28px 1fr auto; min-height: 52px; } .hub-acts .btn-primary { width: 100%; } } /* جدول الطلاب لا يدفع الصفحة خارج الشاشة على الهاتف واللوحي */ .hq-list > *, .hq { min-width: 0; } .hq .tbl-wrap { max-width: 100%; } @media (max-width: 1080px) and (min-width: 761px) { .topbar .nav { min-width: 0; flex: 0 1 auto; overflow-x: auto; scrollbar-width: none; } .topbar .nav::-webkit-scrollbar { display: none; } .top-actions { flex: none; } } /* ═════════ 29-10: الرئيسية المختصرة وصفحة الحلقة ═════════ */ .home-top { padding-top: 28px; padding-bottom: 6px; } .home-top .progress-strip { margin-bottom: 14px; } .shortcuts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .shortcut, .shortcut-panel { display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); color: var(--ink); text-decoration: none; transition: border-color .15s, transform .15s; } .shortcut:hover, .shortcut-panel:hover { border-color: var(--line-strong); } .shortcut:active, .shortcut-panel:active { transform: scale(.99); } .shortcut > span:nth-child(2), .shortcut-panel > div { flex: 1; display: grid; gap: 2px; } .shortcut b { font-size: 16px; font-weight: 600; } .shortcut small { color: var(--ink-3); font-size: 13.5px; } .shortcut > svg, .shortcut-panel > svg { width: 18px; height: 18px; color: var(--ink-3); flex: none; } .sc-ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); flex: none; } .sc-ic svg { width: 22px; height: 22px; } .shortcut-panel { margin-top: 14px; } .shortcut-panel h2 { margin: 0 0 2px; } .shortcut-panel .hint { margin: 0 !important; } .narrow-in { max-width: 720px; margin-inline: auto; } #teach { padding-bottom: 60px; } .hq-card { position: relative; } .hq-card + .hq-card, .narrow-in > .panel + .panel, #teach > * + * { margin-top: 14px; } .hq-ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); margin-bottom: 12px; } .hq-ic svg { width: 24px; height: 24px; } .hq-ic.t { background: var(--sunken); color: var(--ink-2); } .hq-card h2 { font-size: 19px !important; } .hq-name { font-size: 20px; font-weight: 600; margin: 6px 0 2px; } .hq-name small { display: block; font-size: 14px; color: var(--ink-3); font-weight: 400; margin-top: 2px; } .hq-preview { margin: 10px 0 0; font-size: 14px; padding: 8px 12px; border-radius: 10px; } .hq-preview.ok { background: var(--ok-bg); color: var(--ok); } .hq-preview.bad { background: var(--bad-bg); color: var(--bad); } .hq-card .row-form input[name="code"] { letter-spacing: 3px; font-weight: 600; text-align: center; } .hq-sec { font-family: var(--f-display); font-weight: 600; font-size: 22px; margin: 34px 0 12px; } .code-big { font-size: 30px; font-weight: 700; letter-spacing: 6px; margin: 0; color: var(--ink); line-height: 1.2; text-align: start; } .hq-share { display: flex; gap: 8px; flex-wrap: wrap; align-self: center; } .hq .hq-students { margin-top: 16px; } .hq-new summary { cursor: pointer; font-weight: 600; color: var(--primary); list-style: none; } .hq-new summary::-webkit-details-marker { display: none; } .hq-new[open] summary { margin-bottom: 12px; } .hint.center { text-align: center; margin-top: 18px; color: var(--ink-3); font-size: 14px; } .modal .box .btn-block + .btn-block { margin-top: 10px; } .modal .box .btn-block svg { margin-inline-end: 8px; vertical-align: -3px; } @media (max-width: 760px) { .shortcuts { grid-template-columns: 1fr; } .tabbar { grid-template-columns: repeat(6, 1fr); } .tabbar a { font-size: 10.5px; } .hq-share { width: 100%; } .hq-share .btn { flex: 1; } .code-big { font-size: 26px; } } .stu-list { display: grid; gap: 8px; } .stu { display: grid; gap: 6px; width: 100%; text-align: start; font: inherit; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; cursor: pointer; } .stu:hover { border-color: var(--line-strong); } .stu-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; } .stu-top b { font-size: 16px; } .stu-top small { color: var(--ink-3); font-size: 13px; } .stu-stats { display: flex; gap: 16px; flex-wrap: wrap; font-size: 14px; color: var(--ink-2); } .stu-stats b { color: var(--ink); font-weight: 600; } .stu-stats .acc.good b { color: var(--ok); } .stu-stats .acc.mid b { color: var(--warn); } .stu-stats .acc.low b { color: var(--bad); } .stu-weak { font-size: 13.5px; color: var(--ink-3); } .stu-detail { padding: 10px 4px 6px; } .code-big { text-align: right; } .stu-detail { display: grid; gap: 10px; } .stu-detail .bd-row { font-size: 13.5px; row-gap: 4px; } .stu-detail .bd-row .num { white-space: nowrap; width: auto; } @media (max-width: 760px) { .stu-detail .bd-row { grid-template-columns: 1fr auto; } } .stu-detail[hidden] { display: none; } /* ═════════ تحدّي اليوم (مكان سورة الكوثر في الرئيسية) ═════════ */ .daily { background: #FBFAF6; color: #1F2A26; border-radius: 22px; padding: 26px 26px 22px; box-shadow: 0 30px 60px -22px rgba(0,0,0,.55); position: relative; } .daily::after { content: ""; position: absolute; inset: 8px; border: 1px solid var(--gold, #B8935A); border-radius: 16px; pointer-events: none; opacity: .55; } .dc-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; } .dc-kicker { font-size: 13.5px; color: #7A7466; } .dc-title { font-family: var(--f-display); font-weight: 700; font-size: 34px; line-height: 1.2; margin: 2px 0 0; color: #2E3B36; } .dc-streak { display: inline-flex; align-items: center; gap: 5px; background: #F4E9D6; color: #8A5A16; border-radius: 999px; padding: 6px 12px; font-size: 13.5px; white-space: nowrap; } .dc-streak svg { width: 17px; height: 17px; } .dc-streak b { font-size: 15px; } .dc-lead { margin: 14px 0 18px; color: #4A544F; font-size: 16px; line-height: 1.75; } .dc-acts { display: flex; gap: 10px; flex-wrap: wrap; } .dc-acts .btn-lg, .daily [data-daily] { min-height: 52px; padding-inline: 28px; font-size: 17px; } .daily .btn-primary { background: #2E3B36; color: #F6F2EA; border-color: #2E3B36; } .daily .btn-ghost { color: #2E3B36; border-color: #CFC7B8; background: transparent; } .dc-done { display: flex; gap: 12px; align-items: flex-start; margin: 16px 0 16px; padding: 14px; border-radius: 14px; background: #E6F0E8; color: #1E5A35; } .dc-done > svg { width: 24px; height: 24px; flex: none; margin-top: 2px; } .dc-done b { display: block; font-size: 16px; } .dc-done span { font-size: 14px; color: #3E6B4F; } .dc-join { margin-top: 22px; padding-top: 18px; border-top: 1px dashed #D8D0C0; display: grid; gap: 12px; } .dc-join-t { display: flex; gap: 10px; align-items: center; } .dc-join-t svg { width: 26px; height: 26px; color: #8A6A3A; flex: none; } .dc-join-t span { display: grid; } .dc-join-t b { font-size: 15px; font-weight: 600; } .dc-join-t small { font-size: 13px; color: #7A7466; } .dc-form { display: flex; gap: 8px; } .dc-form input { flex: 1; min-width: 0; height: 46px; border-radius: 12px; border: 1px solid #CFC7B8; background: #fff; color: #1F2A26; padding: 0 14px; font: inherit; font-size: 16px; letter-spacing: 3px; text-align: center; font-weight: 600; } .dc-form input:focus { outline: 2px solid var(--gold, #B8935A); outline-offset: 1px; } :root[data-theme="dark"] .daily { background: #1E2A26; color: #EDE6D8; } :root[data-theme="dark"] .dc-title { color: #F1E9DA; } :root[data-theme="dark"] .dc-lead, :root[data-theme="dark"] .dc-kicker, :root[data-theme="dark"] .dc-join-t small { color: #B9B2A3; } :root[data-theme="dark"] .daily .btn-primary { background: var(--gold, #D2B07A); color: #1E2A26; border-color: transparent; } :root[data-theme="dark"] .daily .btn-ghost { color: #EDE6D8; border-color: #4A5A53; } :root[data-theme="dark"] .dc-form input { background: #16201D; color: #EDE6D8; border-color: #4A5A53; } :root[data-theme="dark"] .dc-done { background: #23392D; color: #BFE3C9; } :root[data-theme="dark"] .dc-done span { color: #9FC7AC; } @media (max-width: 760px) { .daily { padding: 22px 18px 18px; border-radius: 20px; } .dc-title { font-size: 28px; } .daily [data-daily] { width: 100%; } } .selbar-x { order: -1; width: 34px; height: 34px; border-radius: 50%; border: 0; background: color-mix(in srgb, var(--bg) 14%, transparent); color: var(--bg); display: grid; place-items: center; cursor: pointer; flex: none; margin-inline-end: 4px; } .selbar-x svg { width: 16px; height: 16px; } @media (max-width: 760px) { .hero { padding: calc(var(--topbar-h) + 18px) 0 26px; } .hero .wrap { gap: 18px; } .hero h1 { font-size: 31px; margin-bottom: 8px; } .hero-lead { font-size: 15px; margin-bottom: 0; } .hero-actions { display: none; } } /* ═════════ 30-10: «أكمل تدريبك»، أسبوع التحدي، بطاقة الأخطاء ═════════ */ .hero-stack { display: grid; gap: 14px; } .resume { position: relative; background: #FBFAF6; color: #1F2A26; border-radius: 20px; padding: 18px 20px 18px; box-shadow: 0 24px 50px -24px rgba(0,0,0,.55); border-inline-start: 5px solid var(--fam, var(--gold, #B8935A)); } .rs-kicker { font-size: 13.5px; color: #8A6A3A; font-weight: 600; } .rs-title { font-size: 19px; font-weight: 700; margin: 2px 0 12px; color: #2E3B36; padding-inline-end: 30px; } .rs-row { display: flex; align-items: center; gap: 14px; } .rs-prog { flex: 1; display: grid; gap: 6px; } .rs-bar { height: 8px; border-radius: 4px; background: #E7E1D5; overflow: hidden; } .rs-bar i { display: block; height: 100%; background: #2E3B36; border-radius: 4px; } .rs-prog small { font-size: 13px; color: #6F6A5E; } .resume .btn-primary { background: #2E3B36; color: #F6F2EA; border-color: #2E3B36; white-space: nowrap; } .resume .btn-primary svg { width: 16px; height: 16px; margin-inline-start: 4px; } .rs-x { position: absolute; top: 12px; inset-inline-end: 12px; width: 30px; height: 30px; border: 0; border-radius: 50%; background: transparent; color: #9A9384; display: grid; place-items: center; cursor: pointer; } .rs-x svg { width: 15px; height: 15px; } .week { display: flex; justify-content: space-between; gap: 4px; margin: 16px 0 2px; } .wk { display: grid; justify-items: center; gap: 4px; flex: 1; } .wk i { width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid #D8D0C0; display: grid; place-items: center; background: #fff; } .wk.on i { background: #2E7D52; border-color: #2E7D52; color: #fff; } .wk i svg { width: 16px; height: 16px; } .wk.today i { border-color: var(--gold, #B8935A); border-width: 2px; } .wk small { font-size: 12px; color: #8A8478; } .wk.today small { color: #8A5A16; font-weight: 700; } .sc-bad { background: #FBEDEA; border-color: #F0CFC8; } .sc-bad .sc-ic { background: #F5D5CE; color: #B23A2A; } .sc-bad b { color: #9C2F21; } :root[data-theme="dark"] .resume { background: #1E2A26; color: #EDE6D8; } :root[data-theme="dark"] .rs-title { color: #F1E9DA; } :root[data-theme="dark"] .rs-bar { background: #33433D; } :root[data-theme="dark"] .rs-bar i, :root[data-theme="dark"] .resume .btn-primary { background: var(--gold, #D2B07A); color: #1E2A26; border-color: transparent; } :root[data-theme="dark"] .wk i { background: #16201D; border-color: #4A5A53; } :root[data-theme="dark"] .sc-bad { background: #3A2421; border-color: #5A3530; } :root[data-theme="dark"] .sc-bad b { color: #F2B4A8; } .shortcuts .sc-bad { grid-column: 1 / -1; } @media (max-width: 760px) { .wk i { width: 28px; height: 28px; } .rs-title { font-size: 18px; } } /* ═════════ 30-10: كروت الأبواب بالدوائر (الرئيسية) ═════════ */ .section-head .link-more { display: inline-flex; align-items: center; gap: 4px; color: var(--primary); font-weight: 600; font-size: 15px; text-decoration: none; } .section-head .link-more svg { width: 16px; height: 16px; } #index .section-head { align-items: center; margin-bottom: 14px; } .tring-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; } .tring { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; text-decoration: none; color: var(--ink); transition: border-color .15s, transform .15s; -webkit-tap-highlight-color: transparent; } .tring:active { transform: scale(.98); } .tring:hover { border-color: var(--line-strong); } .tr-ring { position: relative; width: 58px; height: 58px; flex: none; display: grid; place-items: center; } .tr-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; } .tr-ring b { position: relative; font-size: 14px; font-weight: 600; color: var(--ink-2); } .tr-body { display: grid; gap: 8px; min-width: 0; flex: 1; } .tr-title { font-size: 15.5px; font-weight: 600; line-height: 1.45; } .tr-btn { justify-self: start; font-size: 13px; padding: 4px 14px; border-radius: 999px; background: color-mix(in srgb, var(--gold, #B8935A) 18%, var(--surface)); color: #7A5A28; font-weight: 600; } :root[data-theme="dark"] .tr-btn { color: #E7CC9C; } @media (max-width: 760px) { .tring-grid { grid-template-columns: 1fr 1fr; gap: 10px; } .tring { flex-direction: column; align-items: center; text-align: center; padding: 16px 10px 14px; gap: 10px; } .tr-body { justify-items: center; } .tr-btn { justify-self: center; } .tr-title { font-size: 14.5px; } } .tring-all { display: none; } @media (max-width: 760px) { .home .tring-grid > .tring:nth-child(n+5) { display: none; } .tring-all { display: flex; margin-top: 12px; } #index .link-more { display: none; } } /* ═════════ 30-10: تنقية واجهة الجوال ═════════ */ .s-sound svg { width: 20px; height: 20px; } .s-sound[aria-pressed="false"] .sw { display: none; } .s-sound[aria-pressed="false"] { opacity: .55; } @media (max-width: 760px) { #soundBtn { display: none; } .hero h1 { font-size: 27px; margin: 0; } .hero-lead { display: none; } .hero { padding-bottom: 20px; } .hero .wrap { gap: 16px; } .dc-lead { margin: 12px 0 14px; font-size: 14.5px; color: #6F6A5E; } .week { margin-top: 14px; } .home-top { padding-top: 20px; } .shortcuts { grid-template-columns: 1fr 1fr; gap: 10px; } .shortcuts .sc-bad { grid-column: 1 / -1; } .shortcut:not(.sc-bad) { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; } .shortcut:not(.sc-bad) > svg { display: none; } .shortcut:not(.sc-bad) small { font-size: 12.5px; } .shortcut b { font-size: 15px; } .section { padding-block: 22px; } } /* الجوال: الرئيسية بلا عنوان، البطاقات مباشرة */ .dc-kicker { margin-top: 2px; } @media (max-width: 760px) { body[data-route="home"] .hero { padding: calc(var(--topbar-h) + 6px) 0 18px; } body[data-route="home"] .hero .wrap > div:first-child { display: none; } .daily { padding: 18px 16px 16px; } .dc-title { font-size: 25px; } .dc-top { align-items: center; } .week { margin: 14px 0 16px; } .wk small { font-size: 11px; } .resume { padding: 14px 16px; } .rs-title { font-size: 17px; margin-bottom: 10px; } } /* ═════════ 30-10 (ب): الرئيسية الجديدة — خلفية فاتحة، شريط «أكمل تدريبك»، بطاقتان، أبواب ═════════ */ .home { padding: 26px 0 40px; } .home-head { margin: 6px 0 22px; } .hh-hi { font-size: 15px; color: var(--ink-3); } .home-head h1 { font-family: var(--f-display); font-weight: 700; font-size: clamp(30px, 4vw, 44px); line-height: 1.25; margin: 2px 0 6px; color: var(--ink); } .home-head p { margin: 0; color: var(--ink-2); font-size: 16px; } .banner { position: relative; overflow: hidden; border-radius: 22px; background: #22312B; color: #F3ECDD; padding: 24px 26px 22px; box-shadow: 0 18px 40px -24px rgba(20,30,26,.7); } .banner::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cg fill='none' stroke='%23D2B07A' stroke-opacity='.16' stroke-width='1'%3E%3Cpath d='M48 8l11.3 28.7L88 48 59.3 59.3 48 88 36.7 59.3 8 48l28.7-11.3z'/%3E%3Crect x='28' y='28' width='40' height='40' transform='rotate(45 48 48)'/%3E%3Crect x='28' y='28' width='40' height='40'/%3E%3C/g%3E%3C/svg%3E"); background-size: 96px 96px; mask-image: linear-gradient(to left, transparent 25%, #000 85%); -webkit-mask-image: linear-gradient(to left, transparent 25%, #000 85%); } .bn-in { position: relative; max-width: 620px; } .bn-kicker { color: #D9B878; font-size: 15px; font-weight: 600; } .bn-title { display: flex; align-items: center; gap: 10px; font-size: 22px; font-weight: 700; margin: 6px 0 8px; color: #fff; } .bn-title svg { width: 26px; height: 26px; color: #D9B878; flex: none; } .bn-meta { display: flex; align-items: center; gap: 7px; margin: 0 0 16px; color: #CFC7B6; font-size: 14.5px; } .bn-meta svg { width: 17px; height: 17px; } .bn-row { display: flex; align-items: center; gap: 16px; } .bn-bar { flex: 1; height: 7px; border-radius: 4px; background: rgba(255,255,255,.18); overflow: hidden; } .bn-bar i { display: block; height: 100%; background: #F3ECDD; border-radius: 4px; } .bn-sp { flex: 1; } .bn-btn { background: #F4D99A; color: #2A2416; border: 0; font-weight: 700; min-height: 46px; padding-inline: 24px; gap: 6px; } .bn-btn:hover { background: #F8E3B0; } .bn-btn svg { width: 16px; height: 16px; } .bn-x { position: absolute; top: 14px; inset-inline-end: 14px; width: 32px; height: 32px; border: 0; border-radius: 50%; background: rgba(255,255,255,.08); color: #CFC7B6; display: grid; place-items: center; cursor: pointer; } .bn-x svg { width: 15px; height: 15px; } .home-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; } .hcard { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 18px 18px 16px; display: grid; gap: 12px; align-content: start; } .hc-head { display: flex; align-items: center; gap: 12px; } .hc-head h2 { font-size: 19px; font-weight: 700; margin: 0; } .hc-head p { margin: 2px 0 0; font-size: 14px; color: var(--ink-3); } .hc-ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--sunken); color: var(--ink); flex: none; } .hc-ic svg { width: 24px; height: 24px; } .hc-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .hc-note { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--ink-3); } .hc-note svg { width: 16px; height: 16px; color: #B07A2A; } .hc-btn { justify-self: start; gap: 6px; } .hc-btn svg { width: 16px; height: 16px; } .hc-done { display: inline-flex; align-items: center; gap: 6px; color: var(--ok); font-weight: 600; font-size: 14.5px; } .hc-done svg { width: 18px; height: 18px; } .daily2 .week { margin: 2px 0 0; } .daily2 .wk i { background: var(--surface); } .mistakes2 { background: #FBEEEA; border-color: #F1D2CA; } .mistakes2 h2 { color: #9C2F21; } .mistakes2 .hc-ic { background: #E26A55; color: #fff; } .mistakes2 .hc-btn { background: #F6D6CE; color: #8E2C1F; border: 0; } .halaqa2 .hc-btn { background: var(--sunken); color: var(--ink); border: 0; } .home .shortcuts { margin-top: 14px; } .home .shortcuts:empty { display: none; } .topics-head { margin: 30px 0 14px; align-items: center; } .topics-head .section-title { display: flex; align-items: center; gap: 10px; font-size: 26px; } .topics-head .section-title svg { width: 24px; height: 24px; color: var(--gold, #B8935A); } :root[data-theme="dark"] .mistakes2 { background: #3A2421; border-color: #5A3530; } :root[data-theme="dark"] .mistakes2 h2 { color: #F2B4A8; } :root[data-theme="dark"] .mistakes2 .hc-btn { background: #5A3530; color: #F7D5CD; } :root[data-theme="dark"] .banner { background: #16211D; } @media (max-width: 760px) { .tabbar { grid-template-columns: repeat(5, 1fr) !important; } .tabbar a { font-size: 11.5px !important; } .home { padding-top: 14px; } .home-head { margin: 0 0 14px; } .hh-hi, .home-head p { display: none; } .home-head h1 { font-size: 26px; margin: 0; } .banner { padding: 18px 18px 16px; border-radius: 20px; } .bn-title { font-size: 18px; } .bn-meta { margin-bottom: 12px; font-size: 13.5px; } .bn-btn { min-height: 42px; padding-inline: 18px; } .home-row { grid-template-columns: 1fr; gap: 12px; margin-top: 12px; } .hcard { padding: 16px; } .topics-head { margin: 24px 0 12px; } .topics-head .section-title { font-size: 22px; } } .daily2 .wk.on i { background: #2E7D52; border-color: #2E7D52; color: #fff; } .shortcuts > :only-child { grid-column: 1 / -1; } @media (min-width: 761px) { .banner { padding: 26px 30px 24px; } .bn-in { max-width: none; } .bn-row { max-width: 640px; } } /* شريط الحلقة الأخضر */ .bn-join { display: flex; gap: 10px; max-width: 460px; } .bn-join input { flex: 1; min-width: 0; height: 46px; border-radius: 12px; border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.08); color: #fff; padding: 0 14px; font: inherit; font-size: 16px; letter-spacing: 3px; text-align: center; font-weight: 600; } .bn-join input::placeholder { color: #B9B2A3; letter-spacing: 0; font-weight: 400; } .bn-join input:focus { outline: 2px solid #D9B878; outline-offset: 1px; } .bn-link { display: inline-flex; align-items: center; gap: 4px; margin-top: 14px; color: #D9B878; font-weight: 600; font-size: 15px; text-decoration: none; } .bn-link svg { width: 15px; height: 15px; } .quick2 .hc-btn { background: var(--sunken); color: var(--ink); border: 0; } /* صفحة كل الأبواب بكروت الدوائر */ .topics-page { padding-bottom: 50px; } .tgroup + .tgroup { margin-top: 26px; } .tgroup-h { font-size: 17px; font-weight: 600; color: var(--ink-3); margin: 0 0 12px; } @media (max-width: 760px) { .topics-page .page-head { padding: 22px 0 14px; } .topics-page .page-head h1 { font-size: 26px; } } .bn-note { margin: 10px 0 0; font-size: 13px; color: rgba(255,255,255,.72); line-height: 1.6; } /* ── اختبارات الحلقة (hexams.js) ── */ .hx-teacher { margin: 14px 0 6px; } .hx-sec { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 16px 0 10px; } .hx-sec h3 { margin: 0; font-size: 17px; } .hx-list { display: grid; gap: 8px; } .hx-card { display: grid; gap: 4px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; color: var(--ink); text-decoration: none; margin-bottom: 8px; } a.hx-card:hover { border-color: var(--line-strong); } .hx-t { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .hx-t b { font-size: 15.5px; } .hx-meta { color: var(--ink-2); font-size: 13px; line-height: 1.6; } .hx-n { color: var(--ink-3); } .hx-pill { font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 99px; white-space: nowrap; } .hx-open { background: var(--ok-bg); color: var(--ok); } .hx-done { background: var(--sunken); color: var(--ink-2); } .hx-draft { background: #F6E7C8; color: #8A6420; } .hx-score { font-weight: 700; color: var(--ok); direction: ltr; } .hx-new { background: var(--night, #22302B); color: #fff; border-radius: 20px; padding: 16px; margin: 14px 0 10px; } .hx-new .k { color: #D9B878; font-size: 13px; font-weight: 600; } .hx-new h2 { margin: 4px 0; font-size: 20px; color: #fff; } .hx-new p { color: rgba(255,255,255,.78); font-size: 13.5px; margin: 0 0 12px; line-height: 1.6; } .hx-new .hx-best b { color: #fff; } .hx-go { background: #F2D9A0; color: #2B2416; border: 0; font-weight: 700; } .hx-ed .fld { display: grid; gap: 6px; margin-bottom: 14px; } .hx-ed .fld > span, .hx-modal .fld > span { font-size: 13px; font-weight: 600; color: var(--ink-2); } .hx-ed input, .hx-modal input, .hx-modal textarea { font: inherit; font-size: 15px; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; width: 100%; box-sizing: border-box; } .hx-ed .chips, .hx-modal .chips { display: flex; flex-wrap: wrap; gap: 7px; } .hx-check { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-2); } .hx-check input { width: auto; } .hx-items { padding: 6px 14px; } .hx-q { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); } .hx-q:first-child { border-top: 0; } .hx-q > div { flex: 1; min-width: 0; } .hx-q p { margin: 0; font-size: 14px; color: var(--ink); line-height: 1.6; } .hx-q small { color: var(--ink-3); font-size: 12px; } .hx-num { flex: none; min-width: 26px; height: 26px; padding: 0 5px; border-radius: 8px; background: var(--sunken); display: grid; place-items: center; font-size: 12px; font-weight: 700; color: var(--ink-2); } .hx-add3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0 16px; } .hx-add3 button { display: grid; justify-items: center; gap: 4px; padding: 12px 6px; font: inherit; font-size: 13px; font-weight: 600; color: var(--ink); background: var(--surface); border: 1px dashed var(--line-strong); border-radius: 14px; cursor: pointer; } .hx-add3 b { font-size: 20px; } .hx-foot, .hx-foot2 { display: flex; gap: 8px; margin: 6px 0 14px; } .hx-foot .btn { flex: 1; } .hx-foot .btn-primary { flex: 2; } .hx-foot2 { flex-wrap: wrap; } .hx-foot2 .btn { flex: 1 1 30%; } .hx-danger { color: var(--bad) !important; } .hx-modal .box { max-height: 86vh; overflow: auto; } .hx-tchips { margin: 8px 0 12px; max-height: 150px; overflow: auto; } .hx-step { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink-2); } .hx-step b { min-width: 30px; text-align: center; font-size: 17px; color: var(--ink); } .hx-search { margin-bottom: 8px; } .hx-plist { display: grid; gap: 6px; max-height: 42vh; overflow: auto; } .hx-pick { display: flex; gap: 10px; align-items: flex-start; padding: 9px 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); font-size: 13.5px; line-height: 1.6; cursor: pointer; } .hx-pick input { width: auto !important; margin-top: 4px; } .hx-pick i { font-style: normal; font-family: "Amiri Quran", serif; } .hx-pick small { color: var(--ink-3); } .hx-pick.in { opacity: .55; } .hx-seg { display: flex; background: var(--sunken); border-radius: 12px; padding: 4px; margin-bottom: 14px; } .hx-seg button { flex: 1; border: 0; background: transparent; font: inherit; font-size: 14px; padding: 8px; border-radius: 9px; color: var(--ink-2); cursor: pointer; } .hx-seg button[aria-pressed="true"] { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,.08); } .hx-opt { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .hx-opt.ok input { border-color: var(--ok-line); background: var(--ok-bg); } .hx-r { flex: none; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--line-strong); background: var(--surface); cursor: pointer; padding: 0; } .hx-opt.ok .hx-r { border-color: var(--ok); background: radial-gradient(var(--ok) 45%, transparent 50%); } .hx-addopt { border: 1px dashed var(--line-strong); background: transparent; border-radius: 12px; padding: 9px; font: inherit; font-size: 14px; color: var(--ink-2); cursor: pointer; } .hx-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; } .hx-stats > div { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 12px; text-align: center; } .hx-stats b { display: block; font-size: 22px; color: var(--ink); } .hx-stats span { font-size: 12px; color: var(--ink-2); } .hx-hard { background: var(--bad-bg, #FBF0EE); border: 1px solid var(--bad-line, #EBC9C4); border-radius: 16px; padding: 12px 14px; margin-bottom: 12px; } .hx-hard .k { color: var(--bad); font-weight: 600; font-size: 12.5px; } .hx-hard p { margin: 6px 0 0; font-size: 13.5px; line-height: 1.6; } .hx-hard small { color: var(--ink-3); } .hx-rows { padding: 4px 14px; } .hx-stu { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 14.5px; } .hx-stu:first-child { border-top: 0; } .hx-stu > span:nth-child(2) { display: grid; } .hx-stu small { color: var(--ink-3); font-size: 11.5px; } .hx-av { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--sunken); display: grid; place-items: center; font-weight: 700; color: var(--ink-2); } .hx-sc { margin-inline-start: auto; font-weight: 700; } .hx-sc.g { color: var(--ok); } .hx-sc.m { color: #A0731F; } .hx-sc.b { color: var(--bad); } .hx-sc.w { color: var(--ink-3); font-weight: 500; font-size: 13px; } /* بطاقة «أكمل تدريبك» الصغيرة */ .resume2 .hc-head > div { flex: 1; min-width: 0; } .resume2 { position: relative; } .rs-x svg { width: 16px; height: 16px; } .rs-x:hover { background: var(--sunken); color: var(--ink); } .rs-prog { display: grid; gap: 8px; margin: 6px 0 2px; } .rs-num { display: flex; align-items: baseline; gap: 6px; font-size: 15px; color: var(--ink-2); } .rs-num b { font-size: 26px; color: var(--ink); line-height: 1; } .rs-num span { margin-inline-start: auto; font-size: 13px; font-weight: 600; color: var(--ink-3); } .rs-bar { height: 10px; border-radius: 10px; background: var(--sunken); overflow: hidden; } .rs-bar i { display: block; height: 100%; border-radius: 10px; background: #C9A25E; } /* ── بلّغ عن خطأ ── */ .rp-btn { display: inline-flex; align-items: center; gap: 5px; margin-top: 10px; padding: 4px 0; border: 0; background: none; font: inherit; font-size: 12.5px; color: var(--ink-2); cursor: pointer; } .rp-btn svg { width: 14px; height: 14px; } .rp-btn:hover { color: var(--bad); } .q-meta .rp-btn { margin: 0 0 0 0; margin-inline-start: auto; } .feedback .rp-btn { display: flex; } .rp-modal .box { max-height: 88vh; overflow: auto; } .rp-q { font-size: 14px; color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; line-height: 1.7; } .rp-reasons { display: flex; flex-wrap: wrap; gap: 7px; margin: 12px 0; } .rp-note { width: 100%; box-sizing: border-box; font: inherit; font-size: 14.5px; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; } .rp-tabs { display: flex; gap: 7px; margin-bottom: 10px; } .rp-item { border-top: 1px solid var(--line); padding: 12px 0; } .rp-item:first-of-type { border-top: 0; } .rp-top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; } .rp-top small { color: var(--ink-3); } .rp-qtext { margin: 6px 0; font-size: 14px; line-height: 1.7; } .rp-n { margin: 4px 0; font-size: 14px; color: var(--ink); background: #FFF6E2; border-radius: 10px; padding: 8px 10px; } :root[data-theme="dark"] .rp-n { background: #3A3222; } /* كرت «راجع أخطاءك» */ .mistakes2 { grid-template-rows: auto 1fr auto; align-content: stretch; } .mk-chips { display: flex; flex-wrap: wrap; gap: 6px; align-content: center; } .mk-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: #fff; border: 1px solid #F1D2CA; color: #8E2C1F; font-size: 13px; } .mk-chip b { background: #E26A55; color: #fff; border-radius: 999px; min-width: 20px; height: 20px; display: inline-grid; place-items: center; font-size: 12px; padding: 0 5px; } .mk-more { color: #9C2F21; } .mistakes2 .hc-note svg { color: #E26A55; } :root[data-theme="dark"] .mk-chip { background: #2B1C1A; border-color: #5A3530; color: #F7D5CD; } /* ═════════ صفحة «ثبّت التطبيق» (PWA) — 3-11-2026 ═════════ */ .inst { padding-top: 22px; padding-bottom: 10px; display: grid; gap: 14px; } .inst-hero { display: flex; align-items: center; gap: 16px; } .inst-hero img { width: 84px; height: 84px; border-radius: 20px; flex: none; box-shadow: 0 0 0 1px var(--line), 0 6px 18px rgba(46, 59, 54, .12); } .inst-hero h1 { margin: 0 0 4px; font-family: var(--f-display); font-weight: 600; font-size: 26px; line-height: 1.35; } .inst-hero p { margin: 0; color: var(--ink-2); font-size: 15px; line-height: 1.6; } .inst-main { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); padding: 16px 18px; display: grid; gap: 6px; } .inst-main b { font-size: 16.5px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .inst-main small { color: var(--ink-2); font-size: 14px; line-height: 1.7; } .inst-main .btn { margin-top: 8px; } .inst-main.ok { grid-template-columns: auto 1fr; align-items: center; gap: 12px; } .inst-main.ok > div { display: grid; gap: 2px; } .inst-okic { width: 42px; height: 42px; border-radius: 50%; background: var(--primary-soft); color: var(--primary); display: grid; place-items: center; } .inst-okic svg { width: 22px; height: 22px; } .inst-ic { width: 18px; height: 18px; vertical-align: -3px; color: var(--primary); display: inline-block; } .inst-sec h2, .inst-faq h2 { margin: 0 0 12px; font-size: 18px; } .inst-steps { margin: 0 0 16px; padding: 0; list-style: none; counter-reset: st; display: grid; gap: 10px; } .inst-steps li { counter-increment: st; display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: start; font-size: 15px; line-height: 1.75; } .inst-steps li::before { content: counter(st); width: 28px; height: 28px; border-radius: 50%; background: var(--primary); color: var(--primary-ink); display: grid; place-items: center; font-size: 14px; font-weight: 600; margin-top: 1px; } .inst-vid { display: block; width: 100%; max-width: 280px; aspect-ratio: 9 / 16; margin: 0 auto; border-radius: 22px; background: var(--sunken); border: 1px solid var(--line); object-fit: cover; } .inst-faq p { margin: 0 0 8px; font-size: 14.5px; color: var(--ink-2); line-height: 1.7; } .inst-faq p:last-child { margin-bottom: 0; } .inst-faq p b { color: var(--ink); } @media (max-width: 480px) { .inst-hero img { width: 68px; height: 68px; border-radius: 16px; } .inst-hero h1 { font-size: 22px; } .panel.inst-sec, .panel.inst-faq { padding: 18px 16px; } } .wrap.inst > .panel + .panel { margin-top: 0; } .inst-en { font-size: .86em; color: var(--ink-3); font-weight: 400; unicode-bidi: isolate; white-space: nowrap; } .inst-note { display: block; color: var(--ink-3); font-size: 13px; margin-top: 2px; } /* إصلاح 3-11: عنوان الامتحان الطويل كان يدفع المؤقّت خارج الشاشة على الجوال */ .s-top .count { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .s-top .timer, .s-top .icon-btn { flex: none; } @media (max-width: 380px) { .s-foot .inner { gap: 6px; } .s-foot .btn-quiet, .s-foot .btn-ghost { padding: 0 10px; } } @media (max-width: 340px) { .s-foot .btn { font-size: 14px; } .s-foot .btn-quiet, .s-foot .btn-ghost { padding: 0 7px; } .s-foot .btn-primary { padding: 0 12px; min-width: 0; } .s-foot .btn svg { width: 16px; height: 16px; } }