/* ===== Training: Fortschritt، Modelltest، Wortschatz =====
   كيتبع section.css (lesen-shell، lesen-hero، lesen-tabs…)
   وكيزيد غير المكونات الجداد. أسود وذهبي بحال باقي الموقع. */

.tr-grid { display: grid; gap: 16px; }
.tr-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tr-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tr-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .tr-grid-3, .tr-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .tr-grid-2, .tr-grid-3 { grid-template-columns: minmax(0, 1fr); } }

.tr-card {
    background: var(--surface);
    border: 1px solid rgba(30,27,24,.08);
    border-radius: 18px;
    padding: 18px;
    box-shadow: 0 18px 40px -28px rgba(0,0,0,.9);
    min-width: 0;
}
.tr-card-gold { border-color: rgba(214,178,94,.35); }
.tr-card h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 16px; font-weight: 800; color: var(--text); }
.tr-card h2 .ico { width: 18px; height: 18px; color: var(--accent-text); flex: 0 0 auto; }
.tr-muted { color: var(--muted); font-size: 13.5px; line-height: 1.7; }
.tr-section { margin-top: 18px; }

/* ---- الأرقام الكبار ---- */
.tr-kpi { display: flex; align-items: center; gap: 14px; }
.tr-kpi-ico { display: grid; place-items: center; width: 46px; height: 46px; flex: 0 0 46px; border-radius: 14px; background: rgba(214,178,94,.12); color: var(--accent-text); border: 1px solid rgba(214,178,94,.25); }
.tr-kpi-ico svg { width: 22px; height: 22px; }
.tr-kpi b { display: block; font-size: 24px; font-weight: 900; color: var(--text); line-height: 1.1; }
.tr-kpi span { font-size: 12.5px; color: var(--muted); }

/* ---- الأزرار ---- */
.tr-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 0 18px; border-radius: 12px; border: 1.5px solid rgba(214,178,94,.45); background: transparent; color: var(--text); font: inherit; font-weight: 800; font-size: 14px; cursor: pointer; text-decoration: none; transition: background .15s, color .15s, border-color .15s, transform .15s; }
.tr-btn:hover { border-color: var(--brand); color: var(--accent-text); }
.tr-btn svg { width: 17px; height: 17px; }
.tr-btn-gold { background: var(--grad-brand); color: var(--on-brand); border-color: transparent; box-shadow: var(--shadow-brand); }
.tr-btn-gold:hover { color: var(--on-brand); transform: translateY(-1px); }
.tr-btn-red { border-color: rgba(239,91,91,.5); color: #b42318; }
.tr-btn-red:hover { border-color: #ef5b5b; color: #b42318; }
.tr-btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; }
.tr-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* ---- العد التنازلي ---- */
.tr-count { display: flex; align-items: center; gap: 18px; }
.tr-ring { position: relative; width: 104px; height: 104px; flex: 0 0 104px; }
.tr-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.tr-ring-track { stroke: rgba(30,27,24,.07); }
.tr-ring-bar { stroke: var(--brand); transition: stroke-dashoffset .6s ease; }
.tr-ring-in { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.tr-ring-in b { font-size: 28px; font-weight: 900; color: var(--accent-text); line-height: 1; }
.tr-ring-in span { font-size: 11px; color: var(--muted); margin-top: 3px; }
.tr-date { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.tr-date input { min-height: 42px; padding: 0 12px; border-radius: 12px; border: 1px solid rgba(214,178,94,.35); background: var(--surface-2); color: var(--text); font: inherit; color-scheme: dark; }

/* ---- خطة اليوم ---- */
.tr-plan { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tr-plan li a { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: rgba(30,27,24,.03); border: 1px solid rgba(30,27,24,.07); color: var(--text); text-decoration: none; transition: border-color .15s, background .15s; }
.tr-plan li a:hover { border-color: rgba(214,178,94,.5); background: rgba(214,178,94,.06); }
.tr-plan .tr-check { display: grid; place-items: center; width: 26px; height: 26px; flex: 0 0 26px; border-radius: 50%; border: 2px solid rgba(214,178,94,.5); color: transparent; }
.tr-plan .is-done .tr-check { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.tr-plan .is-done .tr-plan-t { text-decoration: line-through; color: var(--muted); }
.tr-plan .tr-check svg { width: 15px; height: 15px; }
.tr-plan-t { font-weight: 700; font-size: 14px; }
.tr-plan-s { display: block; font-size: 12.5px; color: var(--muted); font-weight: 500; margin-top: 2px; }
.tr-plan-go { margin-inline-start: auto; color: var(--accent-text); flex: 0 0 auto; }
.tr-plan-go svg { width: 18px; height: 18px; }

/* ---- المهارات ---- */
.tr-skill { display: grid; grid-template-columns: 130px minmax(0, 1fr) 52px; gap: 12px; align-items: center; padding: 8px 0; }
.tr-skill + .tr-skill { border-top: 1px solid rgba(30,27,24,.06); }
.tr-skill-name { font-weight: 700; font-size: 14px; }
.tr-skill-name small { display: block; color: var(--muted); font-weight: 500; font-size: 11.5px; }
.tr-bar { height: 10px; border-radius: 999px; background: rgba(30,27,24,.07); overflow: hidden; }
.tr-bar i { display: block; height: 100%; border-radius: inherit; background: var(--grad-brand); transition: width .6s ease; }
.tr-bar i.is-low { background: linear-gradient(90deg, #b44a4a, #ef5b5b); }
.tr-bar i.is-mid { background: linear-gradient(90deg, #a8863a, #d6b25e); }
.tr-bar i.is-good { background: linear-gradient(90deg, #1f9d63, #15803d); }
.tr-skill-pct { text-align: end; font-weight: 900; font-size: 14px; }
.tr-skill-pct.is-none { color: var(--muted); font-weight: 600; font-size: 12px; }
@media (max-width: 520px) { .tr-skill { grid-template-columns: 96px minmax(0, 1fr) 44px; } }

/* ---- المنحنى ---- */
.tr-chart { width: 100%; height: 190px; display: block; }
.tr-chart .grid { stroke: rgba(30,27,24,.06); }
.tr-chart .pass { stroke: rgba(62,207,142,.45); stroke-dasharray: 4 4; }
.tr-chart .line { stroke: var(--brand); fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.tr-chart .area { fill: url(#trGrad); }
.tr-chart .dot { fill: var(--surface); stroke: var(--brand-light); stroke-width: 2; }
.tr-chart text { fill: var(--muted); font-size: 10px; }

/* ---- لائحة النتائج ---- */
.tr-list { list-style: none; margin: 0; padding: 0; }
.tr-list li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid rgba(30,27,24,.06); }
.tr-list li:first-child { border-top: 0; }
.tr-tag { flex: 0 0 auto; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 800; background: rgba(214,178,94,.12); color: var(--accent-text); border: 1px solid rgba(214,178,94,.25); }
.tr-list-main { min-width: 0; flex: 1; }
.tr-list-main b { display: block; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-list-main span { font-size: 12px; color: var(--muted); }
.tr-score { flex: 0 0 auto; font-weight: 900; font-size: 14px; }
.tr-score.is-good { color: #15803d; } .tr-score.is-mid { color: var(--accent-text); } .tr-score.is-low { color: #b42318; }

.tr-empty { text-align: center; padding: 30px 14px; }
.tr-empty b { display: block; font-size: 17px; margin-bottom: 6px; }

/* ---- بطاقات الروابط ---- */
.tr-link { display: flex; gap: 14px; align-items: center; text-decoration: none; color: var(--text); }
.tr-link:hover { border-color: rgba(214,178,94,.55); }
.tr-link b { display: block; font-size: 16px; }
.tr-link span { font-size: 13px; color: var(--muted); }

/* ====================== Modelltest ====================== */
.mt-card { display: flex; flex-direction: column; gap: 10px; }
.mt-card h3 { margin: 0; font-size: 17px; font-weight: 900; }
.mt-parts { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 13px; }
.mt-parts li { display: flex; justify-content: space-between; gap: 8px; color: var(--muted); }
.mt-parts li b { color: var(--text); font-weight: 700; }
.mt-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 6px; }
.mt-chip { padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; }
.mt-chip.free { background: rgba(62,207,142,.12); color: #15803d; border: 1px solid rgba(62,207,142,.3); }
.mt-chip.prem { background: rgba(214,178,94,.12); color: var(--accent-text); border: 1px solid rgba(214,178,94,.3); }
.mt-last { font-size: 12.5px; color: var(--muted); }

.mt-bar { position: sticky; top: 0; z-index: 50; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 10px 14px; margin: 0 0 12px; border-radius: 16px; background: rgba(255,255,255,.97); border: 1px solid rgba(214,178,94,.3); backdrop-filter: blur(10px); }
.mt-title { font-weight: 900; font-size: 15px; }
.mt-exit { min-height: 36px; padding: 0 14px; font-size: 13.5px; }
.mt-steps { display: flex; gap: 6px; flex-wrap: wrap; }
.mt-step { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 800; border: 1px solid rgba(30,27,24,.1); color: var(--muted); background: transparent; }
.mt-step.is-now { background: var(--grad-brand); color: var(--on-brand); border-color: transparent; }
.mt-step.is-done { color: #15803d; border-color: rgba(62,207,142,.35); }
.mt-timer { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid rgba(214,178,94,.35); font-weight: 900; font-variant-numeric: tabular-nums; font-size: 16px; color: var(--accent-text); }
.mt-timer svg { width: 16px; height: 16px; }
.mt-timer.is-low { color: #b42318; border-color: rgba(239,91,91,.6); animation: mt-pulse 1s ease-in-out infinite; }
@keyframes mt-pulse { 50% { box-shadow: 0 0 0 4px rgba(239,91,91,.15); } }
.mt-sub { display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }
.mt-sub button { padding: 8px 14px; border-radius: 12px; border: 1px solid rgba(30,27,24,.1); background: transparent; color: var(--text); font: inherit; font-weight: 800; font-size: 13px; cursor: pointer; }
.mt-sub button.is-on { border-color: var(--brand); color: var(--accent-text); background: rgba(214,178,94,.1); }
.mt-sub button small { color: var(--muted); font-weight: 600; margin-inline-start: 6px; }
.mt-frame { width: 100%; height: calc(100dvh - 190px); min-height: 520px; border: 1px solid rgba(214,178,94,.25); border-radius: 16px; background: var(--paper); display: block; }
.mt-frame[hidden] { display: none; }
/* Hören ف Modelltest: الشريط الثابت لتحت كيعوض أزرار mt-next */
body.mt-hoeren .mt-frame { height: calc(100dvh - 270px); }
body.mt-hoeren .mt-next { display: none; }
.mt-live { font-size: 12.5px; color: var(--muted); }
.mt-live b { color: var(--accent-text); }
.mt-next { margin-top: 12px; display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }

.mt-result { text-align: center; padding: 26px 18px; }
.mt-verdict { display: inline-flex; align-items: center; gap: 8px; padding: 8px 18px; border-radius: 999px; font-weight: 900; font-size: 15px; margin-bottom: 10px; }
.mt-verdict.pass { background: rgba(62,207,142,.14); color: #15803d; border: 1px solid rgba(62,207,142,.4); }
.mt-verdict.fail { background: rgba(239,91,91,.12); color: #b42318; border: 1px solid rgba(239,91,91,.4); }
.mt-total { font-size: 46px; font-weight: 900; color: var(--text); line-height: 1.1; }
.mt-total small { font-size: 18px; color: var(--muted); font-weight: 700; }
.mt-break { max-width: 560px; margin: 18px auto 0; text-align: start; }

.tr-modal { position: fixed; inset: 0; z-index: 4000; display: grid; place-items: center; padding: 16px; background: rgba(0,0,0,.6); }
.tr-modal > div { width: min(100%, 420px); text-align: center; }

/* ====================== Wortschatz ====================== */
.ws-chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 16px; }
.ws-chip { padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(30,27,24,.1); background: transparent; color: var(--text); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.ws-chip span { color: var(--muted); font-weight: 600; margin-inline-start: 4px; }
.ws-chip.is-on { background: var(--grad-brand); color: var(--on-brand); border-color: transparent; }
.ws-chip.is-on span { color: rgba(23,19,10,.7); }

.ws-stage { max-width: 620px; margin: 0 auto; }
.ws-progress { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 13px; color: var(--muted); }
.ws-progress .tr-bar { flex: 1; height: 6px; }
.ws-flash { perspective: 1200px; cursor: pointer; }
.ws-flash-in { position: relative; min-height: 250px; transition: transform .5s cubic-bezier(.2,.7,.2,1); transform-style: preserve-3d; }
.ws-flash.is-flipped .ws-flash-in { transform: rotateY(180deg); }
.ws-face { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 26px 22px; text-align: center; border-radius: 22px; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.ws-front { background: linear-gradient(180deg, #fffdf8, #faf6ec); color: #1c1a16; border: 1px solid rgba(214,178,94,.6); box-shadow: var(--shadow-lg); }
.ws-back { background: linear-gradient(160deg, #fff6d6, #fff0b8); color: var(--text); border: 1px solid rgba(214,178,94,.45); transform: rotateY(180deg); }
.ws-deck { font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #8a6a22; }
.ws-word { font-size: clamp(24px, 5vw, 34px); font-weight: 900; line-height: 1.2; }
.ws-hint { font-size: 12.5px; color: #7a7266; }
.ws-ar { font-size: clamp(20px, 4vw, 26px); font-weight: 800; color: var(--accent-text); }
.ws-ex { font-size: 14.5px; color: var(--muted); font-style: italic; line-height: 1.7; }
.ws-speak { position: absolute; top: 12px; inset-inline-end: 12px; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; border: 1px solid rgba(168,134,58,.45); background: var(--surface); color: #6b4f14; cursor: pointer; }
.ws-back .ws-speak { background: transparent; color: var(--accent-text); }
.ws-speak svg { width: 18px; height: 18px; }
.ws-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.ws-actions .tr-btn { min-height: 52px; font-size: 15px; }
.ws-keys { text-align: center; font-size: 12px; color: var(--muted); margin-top: 8px; }
.ws-done { text-align: center; padding: 34px 18px; }
.ws-done b { display: block; font-size: 20px; margin-bottom: 6px; }

.ws-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ws-form input { min-height: 44px; padding: 0 12px; border-radius: 12px; border: 1px solid rgba(30,27,24,.12); background: var(--surface-2); color: var(--text); font: inherit; min-width: 0; }
.ws-form input:focus { outline: none; border-color: var(--brand); box-shadow: var(--ring); }
.ws-form .full { grid-column: 1 / -1; }
@media (max-width: 520px) { .ws-form { grid-template-columns: 1fr; } }
.ws-table { list-style: none; margin: 0; padding: 0; }
.ws-table li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 0; border-top: 1px solid rgba(30,27,24,.06); font-size: 13.5px; }
.ws-table li:first-child { border-top: 0; }
.ws-table .ar { color: var(--muted); text-align: end; }
.ws-level { display: inline-flex; gap: 3px; }
.ws-level i { width: 7px; height: 7px; border-radius: 50%; background: rgba(30,27,24,.12); }
.ws-level i.on { background: var(--brand); }
.ws-del { border: 0; background: transparent; color: #b42318; cursor: pointer; padding: 4px; display: grid; place-items: center; }
.ws-del svg { width: 16px; height: 16px; }

/* النصوص المخلطة (دارجة + ألمانية): الاتجاه كيتحدد من أول حرف،
   باش ما تتقلبش الكلمات والنقط */
.tr-muted, .tr-plan-s, .tr-list-main b, .mt-live, .ws-hint, .tr-empty b,
.training-page .lesen-hero .lead { unicode-bidi: plaintext; text-align: start; }
.tr-inline-ico { width: 16px; height: 16px; flex: 0 0 16px; color: var(--accent-text); }
@media (max-width: 620px) {
    .ws-chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
    .ws-chips::-webkit-scrollbar { display: none; }
    .ws-chip { flex: 0 0 auto; }
}
body.mt-running .lesen-tabs { display: none; }
.mt-result .tr-muted { text-align: center; }
/* الأيقونات ديال Training ديما بحجم محدد (كانت كتبان كبيرة بزاف فـ<summary>) */
.training-page svg.ico { width: 18px; height: 18px; flex: 0 0 18px; color: var(--accent-text); }
.training-page summary { list-style: none; }
.training-page summary::-webkit-details-marker { display: none; }

/* ====================== Wortschatz: لائحة اليوم ====================== */
.ws-day { margin-bottom: 22px; }
.ws-day-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
.ws-day-kicker { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--accent-text); }
.ws-day-title { margin: 4px 0 2px; font-size: 28px; font-weight: 900; color: var(--text); }
.ws-day-title small { font-size: 16px; color: var(--muted); font-weight: 700; }
.ws-day-theme { margin: 0; color: var(--accent-text); font-weight: 700; font-size: 14px; }
.ws-day-meter { min-width: 200px; text-align: end; }
.ws-day-meter b { font-size: 20px; font-weight: 900; color: var(--text); }
.ws-day-meter span { font-size: 12.5px; color: var(--muted); margin-inline-start: 4px; }
.ws-day-meter .tr-bar { height: 6px; margin-top: 6px; }
.ws-daylist { list-style: none; margin: 12px 0 14px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; counter-reset: wd; }
.ws-daylist li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: linear-gradient(180deg, #fffdf8, #faf6ec); border: 1px solid rgba(214,178,94,.5); color: #1c1a16; min-width: 0; }
.ws-daylist li::before { counter-increment: wd; content: counter(wd); flex: 0 0 22px; height: 22px; display: grid; place-items: center; border-radius: 7px; background: var(--grad-brand); color: var(--on-brand); font-size: 11.5px; font-weight: 900; }
.ws-dl-de { font-weight: 800; font-size: 14.5px; min-width: 0; }
.ws-dl-ar { margin-inline-start: auto; color: #5e584c; font-size: 14px; text-align: end; }
.ws-say { flex: 0 0 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; border: 1px solid rgba(168,134,58,.45); background: var(--surface); color: #6b4f14; cursor: pointer; order: 4; }
.ws-say svg { width: 15px; height: 15px; }
.ws-daylist .ws-dl-ar { order: 3; }
@media (max-width: 720px) { .ws-daylist { grid-template-columns: minmax(0, 1fr); } }
.ws-day-done { display: flex; gap: 14px; align-items: center; padding: 6px 0 14px; }
.ws-day-done b { display: block; font-size: 17px; margin-bottom: 2px; }
.ws-done-ico { flex: 0 0 44px; width: 44px; height: 44px; padding: 10px; border-radius: 50%; background: var(--grad-brand); color: var(--on-brand); }
.ws-day .ws-flash { max-width: 520px; margin: 0 auto; }
.ws-day .ws-actions { max-width: 520px; margin: 14px auto 0; }
.ws-day .ws-progress { max-width: 520px; margin: 0 auto 12px; }
.ws-section-title { display: flex; align-items: center; gap: 8px; margin: 8px 0 10px; font-size: 18px; font-weight: 900; color: var(--text); }
.ws-grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 900px) { .ws-grid { grid-template-columns: minmax(0, 1fr); } }
.ws-bday { display: flex !important; align-items: center; gap: 8px; padding-top: 14px !important; font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--accent-text); }
.ws-bdone { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--brand); color: var(--on-brand); }
.ws-bdone svg { width: 12px; height: 12px; }
#ws-browse .lesen-search { display: flex; }
@media (max-width: 720px) {
    .ws-daylist li { display: grid; grid-template-columns: 22px minmax(0, 1fr) 30px; grid-template-areas: "n de say" "n ar say"; column-gap: 10px; row-gap: 2px; }
    .ws-daylist li::before { grid-area: n; }
    .ws-dl-de { grid-area: de; }
    .ws-dl-ar { grid-area: ar; margin: 0; text-align: start; }
    .ws-say { grid-area: say; }
    .ws-day-meter { min-width: 0; width: 100%; text-align: start; }
}

/* ===== بطاقة النتيجة اللي كتتشارك ===== */
.ds-modal { padding: 12px; }
.ds-box {
    width: min(100%, 420px);
    max-height: calc(100dvh - 24px);
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px;
    border-radius: 20px;
    border: 1px solid var(--line-gold);
    background: var(--surface);
    box-shadow: var(--shadow);
    overflow: auto;
}
.ds-preview {
    display: grid;
    place-items: center;
    min-height: 180px;
    border-radius: 14px;
    background: var(--surface-2);
    overflow: hidden;
}
.ds-preview img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 14px;
}
.ds-spin {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 3px solid var(--line);
    border-top-color: var(--brand);
    animation: ds-spin 0.8s linear infinite;
}
@keyframes ds-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ds-spin { animation-duration: 2s; } }

.ds-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}
.ds-actions .tr-btn { flex: 1 1 auto; justify-content: center; }
.ds-note {
    margin: 0;
    text-align: center;
    font-size: 13px;
    color: var(--muted);
}

/* ===== «اختبر نفسك»: امتحان عشوائي ===== */
.mt-rand {
    position: relative; overflow: hidden; direction: rtl; text-align: right;
    margin: 0 0 22px; padding: 30px 30px 26px; border-radius: 26px; color: #fff;
    background:
        radial-gradient(60% 90% at 10% 0%, rgba(242,183,5,.28), transparent 60%),
        radial-gradient(60% 80% at 100% 100%, rgba(78, 235, 169,.4), transparent 60%),
        linear-gradient(135deg, #2a0a14, #127049 55%, #16a569);
    box-shadow: 0 34px 70px -38px rgba(18, 112, 73,.85);
}
.mt-rand::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image: radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px); background-size: 22px 22px;
}
.mt-rand > * { position: relative; z-index: 1; }
.mt-rand-chip { display: inline-block; padding: 6px 14px; border-radius: 999px; font-weight: 900; font-size: 13px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.25); }
.mt-rand h2 { margin: 14px 0 8px; font-size: clamp(1.45rem, 3vw, 2rem); font-weight: 900; color: #fff; }
.mt-rand-lead { margin: 0 0 18px; color: rgba(255,255,255,.88); line-height: 1.9; max-width: 70ch; }
.mt-rand-lead b { color: #ffce00; }
.mt-rand-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 0 18px; }
.mt-rand-f { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: 16px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); }
.mt-rand-f i { font-style: normal; font-size: 22px; line-height: 1; flex: none; }
.mt-rand-f b { display: block; font-weight: 900; }
.mt-rand-f span { display: block; font-size: 13.5px; color: rgba(255,255,255,.78); margin-top: 2px; }
.mt-rand .mt-last { color: rgba(255,255,255,.85); }
.mt-rand-go {
    position: relative; overflow: hidden; width: 100%; display: flex; align-items: center; justify-content: center; gap: 12px;
    padding: 17px 20px; border: 0; border-radius: 16px; cursor: pointer; font: inherit; font-weight: 900; font-size: 17px;
    color: #3a1500; background: linear-gradient(135deg, #ffe07a, #f2b705); box-shadow: 0 18px 36px -16px rgba(242,183,5,.95);
    transition: transform .15s ease;
}
.mt-rand-go:hover { transform: translateY(-2px); }
.mt-rand-go svg { width: 22px; height: 22px; animation: mt-dice 2.4s ease-in-out infinite; }
.mt-rand-go em { font-style: normal; }
.mt-rand-go::after {
    content: ""; position: absolute; top: 0; bottom: 0; width: 35%; left: -50%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.65), transparent);
    animation: mt-sweep 3.4s ease-in-out infinite;
}
/* ⚙ حدا «بدا امتحان عشوائي»: كيحل «اختار الامتحانات» */
.mt-rand-row { display: flex; gap: 10px; align-items: stretch; }
.mt-rand-row .mt-rand-go { flex: 1 1 auto; width: auto; }
.mt-rand-set {
    position: relative; flex: none; width: 60px; display: grid; place-items: center;
    border-radius: 16px; cursor: pointer; color: #fff;
    background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.28);
    transition: background .15s, transform .15s;
}
.mt-rand-set:hover { background: rgba(255,255,255,.2); transform: translateY(-2px); }
.mt-rand-set:focus-visible { outline: 2px solid #ffce00; outline-offset: 2px; }
.mt-rand-set.is-custom { border-color: #ffce00; color: #ffce00; }
.mt-rand-set b {
    position: absolute; top: -4px; left: -4px; width: 14px; height: 14px;
    border-radius: 50%; background: #ffce00; box-shadow: 0 0 0 3px #127049;
}

html.st-pick-open { overflow: hidden; }
.st-pick {
    position: fixed; inset: 0; z-index: 4000; display: grid; place-items: center; padding: 16px;
    background: rgba(10,8,12,.55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    animation: st-pick-in .18s ease-out;
}
@keyframes st-pick-in { from { opacity: 0; } }
.st-pick-box {
    width: min(100%, 680px); max-height: min(88dvh, 720px); display: flex; flex-direction: column;
    overflow: hidden; border-radius: 24px; background: var(--surface); color: var(--text);
    border: 1px solid var(--line-gold); box-shadow: var(--shadow-lg); text-align: right;
}
.st-pick-head {
    display: flex; align-items: center; gap: 14px; padding: 18px 20px;
    background: linear-gradient(135deg, color-mix(in srgb, #f2b705 14%, var(--surface)), var(--surface) 70%);
    border-bottom: 1px solid var(--line);
}
.st-pick-head > i {
    flex: none; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 14px;
    color: #3a1500; background: linear-gradient(135deg, #ffe07a, #f2b705);
}
.st-pick-head > div { flex: 1 1 auto; min-width: 0; }
.st-pick-head h2 { margin: 0; font-size: 19px; font-weight: 900; }
.st-pick-head p { margin: 2px 0 0; font-size: 13px; color: var(--muted); line-height: 1.6; }
.st-pick-x {
    flex: none; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px;
    border: 1px solid var(--line); background: var(--surface-2); color: var(--muted); cursor: pointer;
}
.st-pick-x:hover { color: var(--text); }
.st-pick-tabs {
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; padding: 12px 14px;
    background: var(--surface-2); border-bottom: 1px solid var(--line); direction: ltr;
}
.st-pick-tabs button {
    display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 4px 8px;
    border-radius: 14px; border: 1px solid transparent; background: transparent; color: var(--muted);
    font: inherit; cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.st-pick-tabs button b { font-size: 12px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.st-pick-tabs button small { font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; opacity: .8; }
.st-pick-tabs button:hover { color: var(--text); }
.st-pick-tabs button.is-on {
    background: var(--surface); color: var(--brand-dark); border-color: var(--line-gold);
    box-shadow: 0 6px 16px -10px rgba(18, 112, 73,.45);
}
.st-pick-list { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 14px; display: grid; gap: 8px; align-content: start; }
.st-pick-item {
    display: flex; align-items: center; gap: 12px; width: 100%; padding: 13px 14px; border-radius: 14px;
    border: 1px solid var(--line); background: var(--surface); color: var(--muted);
    font: inherit; text-align: left; cursor: pointer; direction: ltr; transition: border-color .15s, background .15s, color .15s;
}
.st-pick-item i {
    flex: none; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%;
    border: 2px solid var(--line); color: transparent; transition: background .15s, border-color .15s, color .15s;
}
.st-pick-item b { flex: 1 1 auto; min-width: 0; font-weight: 800; font-size: 14.5px; }
.st-pick-item:hover { border-color: var(--line-gold); }
.st-pick-item.is-on { color: var(--text); border-color: var(--line-gold); background: color-mix(in srgb, #f2b705 7%, var(--surface)); }
.st-pick-item.is-on i { color: #fff; border-color: transparent; background: linear-gradient(135deg, var(--brand), var(--brand-dark)); }
.st-pick-prem {
    flex: none; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 900;
    color: var(--accent-text, #8a5a00); background: rgba(214,178,94,.14); border: 1px solid rgba(214,178,94,.35);
}
.st-pick-foot {
    display: flex; align-items: center; gap: 12px; padding: 14px 18px;
    border-top: 1px solid var(--line); background: var(--surface);
}
.st-pick-all {
    display: inline-flex; align-items: center; gap: 7px; padding: 8px 4px; border: 0; background: none;
    color: var(--muted); font: inherit; font-weight: 800; font-size: 13.5px; cursor: pointer;
}
.st-pick-all:hover { color: var(--text); }
.st-pick-note { flex: 1 1 auto; font-size: 12.5px; font-weight: 700; color: var(--brand); }
.st-pick-ok {
    flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 26px;
    border: 0; border-radius: 14px; cursor: pointer; font: inherit; font-weight: 900; font-size: 16px;
    color: #3a1500; background: linear-gradient(135deg, #ffe07a, #f2b705); box-shadow: 0 14px 28px -14px rgba(242,183,5,.95);
}
.st-pick-ok:hover { transform: translateY(-1px); }
@media (max-width: 560px) {
    .st-pick { padding: 0; place-items: end stretch; }
    .st-pick-box { width: 100%; max-height: 92dvh; border-radius: 22px 22px 0 0; }
    .st-pick-head { padding: 14px 16px; }
    .st-pick-head > i { display: none; }
    .st-pick-tabs { gap: 4px; padding: 10px; }
    .st-pick-tabs button { padding: 8px 2px 6px; }
    .st-pick-tabs button svg { display: none; }
    .st-pick-tabs button b { font-size: 11px; }
    .st-pick-foot { padding: 12px 14px calc(12px + env(safe-area-inset-bottom)); }
    .mt-rand-set { width: 54px; }
}
@keyframes mt-dice { 0%, 70%, 100% { transform: rotate(0); } 78% { transform: rotate(-20deg); } 86% { transform: rotate(16deg); } 94% { transform: rotate(-6deg); } }
@keyframes mt-sweep { 0%, 55% { left: -50%; } 85%, 100% { left: 130%; } }
@media (max-width: 760px) {
    .mt-rand { padding: 24px 18px 20px; }
    .mt-rand-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .mt-rand-go svg, .mt-rand-go::after { animation: none; } }

/* ===== «اختبر نفسك» (selbsttest.html) ===== */
.st-shell { padding-bottom: 40px; }
body.st-running .st-shell { max-width: none; padding: 0; }
.st-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 60; background: color-mix(in srgb, var(--surface) 94%, transparent); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid var(--line); box-shadow: 0 10px 30px -22px rgba(0,0,0,.5); }
.st-bar-in { max-width: 1400px; margin: 0 auto; display: flex; align-items: center; gap: 14px; padding: 10px 16px; direction: ltr; }
.st-back { flex: none; height: 44px; padding: 0 14px 0 12px; border-radius: 12px; display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); font: inherit; font-weight: 800; font-size: 13.5px; cursor: pointer; transition: border-color .15s, color .15s, background .15s; }
.st-back:hover { border-color: #ef5b5b; color: #c62828; background: color-mix(in srgb, #ef5b5b 8%, var(--surface)); }
.st-meta { flex: none; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; line-height: 1.1; }
.st-meta b { font-weight: 900; font-size: 15.5px; direction: rtl; }
.st-lvl { padding: 2px 8px; border-radius: 6px; font-size: 10.5px; font-weight: 900; letter-spacing: .05em; color: var(--on-brand, #fff); background: var(--grad-brand); }
.st-tabs { flex: 1 1 auto; min-width: 0; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; justify-content: center; }
.st-tabs::-webkit-scrollbar { display: none; }
.st-grp { flex: none; display: flex; flex-direction: column; gap: 4px; padding: 5px 6px 6px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); transition: border-color .15s, box-shadow .15s; }
.st-grp.is-on { border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); box-shadow: 0 6px 18px -12px var(--brand); }
.st-grp-t { padding: 0 6px; font-size: 9.5px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.st-grp.is-on .st-grp-t { color: var(--accent-text); }
.st-grp-tabs { display: flex; gap: 5px; }
.st-tab { position: relative; min-width: 50px; display: flex; flex-direction: column; align-items: center; padding: 4px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--muted); font: inherit; cursor: pointer; line-height: 1.1; box-shadow: 0 2px 6px -4px rgba(0,0,0,.25); transition: background .15s, color .15s, border-color .15s; }
.st-tab:hover { border-color: color-mix(in srgb, var(--brand) 40%, var(--line)); }
.st-tab b { font-size: 15px; font-weight: 900; color: var(--text); }
.st-tab em { font-style: normal; font-size: 9.5px; font-weight: 800; opacity: .75; }
.st-tab.is-seen::after { content: ""; position: absolute; top: 4px; right: 5px; width: 7px; height: 7px; border-radius: 50%; background: var(--ok, #0f9d58); box-shadow: 0 0 0 2px var(--surface); }
.st-tab.is-on { background: var(--grad-brand); border-color: transparent; box-shadow: 0 8px 18px -10px var(--brand); }
.st-tab.is-on b, .st-tab.is-on em { color: var(--on-brand, #fff); opacity: 1; }
.st-tab.is-on.is-seen::after { box-shadow: 0 0 0 2px #fff; }
.st-timer { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border-radius: 12px; background: var(--text); color: var(--surface); font-weight: 900; font-size: 17px; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.st-timer.is-low { background: #d97706; color: #fff; animation: st-pulse 1.2s ease-in-out infinite; }
@keyframes st-pulse { 50% { box-shadow: 0 0 0 6px rgba(217,119,6,.25); } }
.st-tprog { display: block; height: 3px; background: color-mix(in srgb, var(--text) 8%, transparent); }
.st-tprog b { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--gold, #f2b705), var(--brand)); transition: width 1s linear; margin-left: auto; }
.st-frames { padding: var(--st-bar-h, 76px) 0 68px; }
.st-frame { display: block; width: 100%; height: calc(100dvh - var(--st-bar-h, 76px) - 68px); border: 0; background: var(--paper); }
.st-frame[hidden] { display: none; }
/* الامتحان محضر ف الخفا (صفحة البداية): كيتحمل بالقياس الصحيح وما كيبانش */
.st-exam.is-pre { position: fixed; inset: 0; z-index: -1; visibility: hidden; pointer-events: none; overflow: hidden; contain: strict; }
.st-exam.is-pre * { visibility: hidden !important; }
.st-foot { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: color-mix(in srgb, var(--surface) 94%, transparent); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); border-top: 1px solid var(--line); }
.st-foot-in { max-width: 1400px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 16px calc(9px + env(safe-area-inset-bottom)); direction: ltr; }
.st-nav { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 18px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); font: inherit; font-weight: 900; font-size: 14.5px; cursor: pointer; transition: transform .15s, box-shadow .15s, border-color .15s; }
.st-nav:hover:not([disabled]) { border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); }
.st-nav[disabled] { opacity: .4; cursor: default; }
.st-nav span { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; }
.st-nav small { font-size: 10.5px; font-weight: 800; opacity: .75; }
.st-nav-next { border: 0; background: var(--grad-brand); color: var(--on-brand, #fff); box-shadow: 0 12px 24px -14px var(--brand); padding: 0 16px 0 20px; }
.st-nav-next:hover { transform: translateY(-1px); }
.st-nav-next.is-finish { background: linear-gradient(135deg, #ffe07a, var(--gold, #f2b705)); color: #2a1500; box-shadow: 0 12px 26px -12px var(--gold, #f2b705); }
.st-step { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center; }
.st-short, .st-g span.st-short { display: none; }
.st-step b { direction: ltr; unicode-bidi: isolate; font-size: 12px; font-weight: 900; color: var(--muted); letter-spacing: .05em; }
.st-step span { font-size: 14px; font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.st-dots { display: flex; gap: 4px; }
.st-dots u { width: 16px; height: 4px; border-radius: 4px; background: var(--line); transition: background .2s, width .2s; }
.st-dots u.past { background: color-mix(in srgb, var(--brand) 45%, var(--line)); }
.st-dots u.on { width: 26px; background: var(--brand); }

/* كنصححو… */
.st-wait { max-width: 520px; margin: 60px auto; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 40px 24px; border-radius: 26px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); text-align: center; }
.st-wait b { font-size: 1.3rem; font-weight: 900; }
.st-wait small { color: var(--muted); font-weight: 800; direction: ltr; }
.st-wait-spin { width: 54px; height: 54px; margin-bottom: 8px; border-radius: 50%; border: 5px solid var(--line); border-top-color: var(--brand); animation: st-spin .8s linear infinite; }
@keyframes st-spin { to { transform: rotate(360deg); } }
/* النتيجة */
.st-res { position: relative; overflow: hidden; margin: 26px auto 18px; max-width: 1000px; display: grid; grid-template-columns: auto 1fr; gap: 34px; align-items: center; padding: 34px 36px; border-radius: 28px; color: #fff; direction: rtl;
  background: radial-gradient(60% 90% at 0% 0%, rgba(242,183,5,.28), transparent 60%), radial-gradient(70% 90% at 100% 100%, rgba(78, 235, 169,.4), transparent 60%), linear-gradient(135deg, #2a0a14, #127049 55%, #16a569);
  box-shadow: 0 30px 70px -34px rgba(18, 112, 73,.9); }
.st-res::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.07) 1.5px, transparent 1.5px); background-size: 22px 22px; pointer-events: none; }
.st-res > * { position: relative; z-index: 1; }
.st-ring { position: relative; width: 250px; height: 250px; }
.st-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.st-ring circle { fill: none; stroke-width: 11; }
.st-ring-bg { stroke: rgba(255,255,255,.22); }
.st-ring-fg { stroke: #3ddc84; stroke-linecap: round; filter: drop-shadow(0 0 10px rgba(61,220,132,.55)); animation: st-ring 1.2s cubic-bezier(.2,.8,.2,1) both; }
.st-res.is-fail .st-ring-fg { stroke: #ffb020; filter: drop-shadow(0 0 10px rgba(255,176,32,.55)); }
@keyframes st-ring { from { stroke-dashoffset: 340; } }
.st-ring-in { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; direction: ltr; }
.st-ring-in b { font-size: 4.4rem; font-weight: 900; line-height: 1; }
.st-ring-in b small { font-size: .45em; opacity: .8; }
.st-ring-in span { margin-top: 8px; font-weight: 900; font-size: 18px; opacity: .92; }
.st-res-main { min-width: 0; text-align: right; }
.st-res-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px; font-weight: 900; font-size: 13px; color: #0b3d22; background: #3ddc84; }
.st-res.is-fail .st-res-badge { color: #3a2200; background: #ffb020; }
.st-res-lvl { margin-inline-start: 8px; font-size: 13px; font-weight: 800; opacity: .75; }
.st-res h1 { margin: 14px 0 6px; font-size: clamp(1.6rem, 3.6vw, 2.4rem); font-weight: 900; color: #fff; }
.st-res-main > p { margin: 0 0 20px; color: rgba(255,255,255,.85); line-height: 1.8; }
.st-res-main > p b { color: #ffce00; }
.st-res-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.st-g { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 16px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); }
.st-g i { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; background: rgba(61,220,132,.18); color: #3ddc84; }
.st-g.bad i { background: rgba(255,176,32,.18); color: #ffb020; }
.st-g span { display: block; font-size: 11.5px; font-weight: 800; opacity: .8; direction: ltr; text-align: right; }
.st-g b { display: block; font-size: 1.3rem; font-weight: 900; direction: ltr; text-align: right; }
.st-g b small { font-size: .6em; opacity: .7; }

/* الأزرار ديال النتيجة */
.st-act { max-width: 1000px; margin: 0 auto 30px; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; direction: rtl; }
.st-act-btn { display: flex; align-items: center; gap: 14px; min-height: 76px; padding: 14px 16px; border-radius: 20px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font: inherit; text-align: right; text-decoration: none; cursor: pointer; box-shadow: var(--shadow); transition: transform .18s, box-shadow .18s, border-color .18s; }
.st-act-btn:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--brand) 40%, var(--line)); box-shadow: 0 18px 34px -20px rgba(0,0,0,.45); }
.st-act-btn i { flex: none; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; background: var(--surface-2); color: var(--accent-text); }
.st-act-btn span { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.st-act-btn b { font-size: 16px; font-weight: 900; }
.st-act-btn small { font-size: 12.5px; font-weight: 700; color: var(--muted); }
.st-act-btn em { flex: none; opacity: .5; transition: transform .18s, opacity .18s; }
.st-act-btn:hover em { opacity: 1; transform: translateX(-3px); }
.st-act-btn.is-main { border: 0; color: #2a1500; background: linear-gradient(135deg, #ffe07a, var(--gold, #f2b705)); box-shadow: 0 16px 34px -16px var(--gold, #f2b705); }
.st-act-btn.is-main i { background: rgba(255,255,255,.45); color: #2a1500; }
.st-act-btn.is-main small { color: rgba(42,21,0,.72); }
.st-act-btn.is-main i svg { animation: mt-dice 2.4s ease-in-out infinite; }

.st-res-h { max-width: 1000px; margin: 0 auto 12px; font-weight: 900; font-size: 1.2rem; direction: rtl; }
.st-res-list { max-width: 1000px; margin: 0 auto; display: grid; gap: 14px; }
.st-sec { border-radius: 20px; background: var(--surface); border: 1px solid var(--line); overflow: hidden; box-shadow: var(--shadow); }
.st-sec-h { display: flex; align-items: center; gap: 10px; padding: 12px 18px; background: var(--surface-2); border-bottom: 1px solid var(--line); direction: ltr; }
.st-sec-h i { display: grid; place-items: center; color: var(--accent-text); }
.st-sec-h b { flex: 1; font-weight: 900; }
.st-sec-h span { font-weight: 900; color: var(--muted); }
.st-row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto auto auto; align-items: center; gap: 16px; padding: 13px 18px; direction: ltr; }
.st-row + .st-row { border-top: 1px solid var(--line); }
.st-row-name b { font-weight: 900; }
.st-row-name small { display: block; color: var(--muted); font-size: 13px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-chip { display: inline-block; min-width: 52px; text-align: center; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 900; }
.st-chip.ok { color: var(--ok, #0f9d58); background: color-mix(in srgb, var(--ok, #0f9d58) 12%, transparent); }
.st-chip.bad { color: #b45309; background: rgba(245,158,11,.14); }
.st-row-bar { height: 8px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.st-row-bar i { display: block; height: 100%; border-radius: 99px; background: var(--ok, #0f9d58); }
.st-row-bar i.bad { background: #f59e0b; }
.st-row-pts { font-weight: 800; color: var(--muted); white-space: nowrap; }
.st-row-pts b { font-size: 1.2rem; color: var(--text); }
@media (max-width: 900px) {
    .st-bar-in { flex-wrap: wrap; gap: 8px; padding: 8px 10px; }
    .st-meta { flex: 1 1 0; }
    .st-tabs { order: 5; flex: 1 1 100%; justify-content: flex-start; }
    .st-grp { flex: 1 0 auto; }
    .st-grp-tabs .st-tab { flex: 1; }
    .st-back span { display: none; }
    .st-back { width: 44px; padding: 0; justify-content: center; }
}
@media (max-width: 760px) {
    .st-timer { height: 40px; font-size: 16px; padding: 0 12px; }
    .st-back { height: 40px; width: 40px; }
    .st-tabs { gap: 4px; }
    .st-grp { flex: 1 1 0; min-width: 0; padding: 3px 3px 4px; }
    .st-grp-t { text-align: center; padding: 0; }
    .st-full { display: none; }
    .st-short { display: inline; }
    .st-grp-tabs { gap: 3px; }
    .st-tab { min-width: 0; padding: 3px 2px; }
    .st-tab b { font-size: 14px; }
    .st-nav { min-height: 46px; padding: 0 12px; }
    .st-nav-prev span { display: none; }
    .st-step span { font-size: 12.5px; }
    .st-dots u { width: 9px; }
    .st-dots u.on { width: 18px; }
    .st-res { grid-template-columns: 1fr; justify-items: center; gap: 18px; padding: 26px 16px 20px; margin-top: 14px; border-radius: 24px; }
    .st-ring { width: 210px; height: 210px; }
    .st-ring-in b { font-size: 3.6rem; }
    .st-ring-in span { font-size: 16px; }
    .st-res-main { text-align: center; }
    .st-res-lvl { display: block; margin: 8px 0 0; }
    .st-res-groups { gap: 8px; }
    .st-g { flex-direction: column; gap: 6px; padding: 10px 6px; text-align: center; }
    .st-g span, .st-g b { text-align: center; }
    .st-g b { font-size: 1.1rem; }
    .st-g span.st-full { display: none; }
    .st-g span.st-short { display: block; }
    .st-act { grid-template-columns: 1fr; }
    .st-row { grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 8px 12px; padding: 12px 14px; }
    .st-row-bar { grid-column: 1 / -1; order: 3; }
}
@media (pointer: coarse) { .st-bar, .st-foot { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--surface); } }
@media (prefers-reduced-motion: reduce) { .st-wait-spin { animation-duration: 2s; } .st-ring-fg, .st-timer.is-low, .st-act-btn.is-main i svg { animation: none; } }

/* اختبر نفسك: بلا فراغ بين البار والموضوع */
html.is-exam-focus body.st-running { padding-top: 0 !important; }
body.st-running::before, body.st-running::after { display: none; }
body.st-running .st-shell { margin: 0; }
/* B1 / B2 */
.st-level { display: flex; width: max-content; margin: 18px auto 16px; padding: 4px; gap: 4px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.st-level button { min-width: 86px; min-height: 42px; border: 0; border-radius: 10px; background: transparent; color: var(--muted); font: inherit; font-weight: 900; font-size: 15px; cursor: pointer; transition: background .15s, color .15s; }
.st-level button.is-on { background: linear-gradient(135deg, var(--gold), var(--gold-dark)); color: var(--ink); box-shadow: 0 8px 18px -10px var(--gold); }
.st-level[hidden] { display: none; }

/* ===== «نتائج مفصلة»: العين + نافذة المراجعة ===== */
.st-res-h small { display: inline-flex; align-items: center; gap: 6px; margin-inline-start: 12px; font-size: 13px; font-weight: 700; color: var(--muted); }
.st-eye { display: inline-grid; place-items: center; width: 44px; height: 34px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--text); cursor: pointer; transition: background .15s ease, border-color .15s ease, color .15s ease; }
.st-eye:hover, .st-eye:focus-visible { border-color: var(--brand, #1fd186); color: var(--brand, #1fd186); background: color-mix(in srgb, var(--brand, #1fd186) 8%, var(--surface)); }
.st-review.is-open { position: fixed; inset: 0; z-index: 3000; display: flex; flex-direction: column; padding: max(16px, 3vh) max(12px, 3vw); background: rgba(8, 10, 20, .62); visibility: visible; pointer-events: auto; contain: none; }
.st-review.is-open * { visibility: visible !important; }
.st-review.is-open .st-frame[hidden] { display: none; }
.st-rv-head { display: none; }
.st-review.is-open .st-rv-head { box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; max-width: 1150px; margin: 0 auto; padding: 14px 20px; border-radius: 20px 20px 0 0; background: var(--surface); border-bottom: 1px solid var(--line); direction: rtl; }
.st-rv-head small { display: block; color: var(--muted); font-size: 12.5px; font-weight: 700; }
.st-rv-head b { font-size: 1.15rem; font-weight: 900; }
.st-rv-x { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); font: inherit; font-size: 16px; cursor: pointer; }
.st-rv-x:hover { border-color: var(--brand, #1fd186); color: var(--brand, #1fd186); }
.st-review.is-open .st-frames { box-sizing: border-box; flex: 1; min-height: 0; width: 100%; max-width: 1150px; margin: 0 auto; padding: 0; border-radius: 0 0 20px 20px; overflow: hidden; background: var(--paper); box-shadow: 0 30px 80px -20px rgba(0,0,0,.6); }
.st-review.is-open .st-frame { height: 100%; }
html.st-rv-lock, html.st-rv-lock body { overflow: hidden; }
@media (max-width: 760px) {
    .st-res-h small { display: flex; margin: 6px 0 0; }
    .st-eye { width: 40px; height: 32px; }
    .st-review.is-open { padding: 8px; }
    .st-review.is-open .st-rv-head { padding: 10px 14px; border-radius: 16px 16px 0 0; }
    .st-review.is-open .st-frames { border-radius: 0 0 16px 16px; }
}