/* تنسيق المنصة حسب مهارة zinou-design:
   خط Tajawal، بطاقات مستديرة بظلال ناعمة، قائمة جانبية داكنة،
   والأصفر للعناصر المهمة فقط (لا نص أصفر على أبيض). */

@font-face { font-family: "Tajawal"; src: url("/fonts/tajawal-ar-400.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-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; }
@font-face { font-family: "Tajawal"; src: url("/fonts/tajawal-lat-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: "Tajawal"; src: url("/fonts/tajawal-ar-500.woff2") format("woff2"); font-weight: 500; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-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; }
@font-face { font-family: "Tajawal"; src: url("/fonts/tajawal-lat-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: "Tajawal"; src: url("/fonts/tajawal-ar-700.woff2") format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-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; }
@font-face { font-family: "Tajawal"; src: url("/fonts/tajawal-lat-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: "Tajawal"; src: url("/fonts/tajawal-ar-800.woff2") format("woff2"); font-weight: 800; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-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; }
@font-face { font-family: "Tajawal"; src: url("/fonts/tajawal-lat-800.woff2") format("woff2"); font-weight: 800; 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 {
  --bg: #F7F7F4;
  --surface: #FFFFFF;
  --surface-2: #FAFAF8;
  --ink: #16181D;
  --ink-2: #5B6170;
  --ink-3: #6E7481;
  --line: #E8E8EC;
  --brand: #FBBF24;
  --brand-strong: #F59E0B;
  --brand-soft: #FFF6DB;
  --success: #16A34A;
  --success-soft: #E8F7EE;
  --success-ink: #15803D;
  --label: #5F6573;
  --danger: #E5484D;
  --danger-soft: #FDECEC;
  --danger-ink: #B42318;
  --radius-card: 24px;
  --radius-btn: 16px;
  --radius-pill: 999px;
  --shadow: 0 10px 30px rgba(16, 24, 40, .06);
  --shadow-brand: 0 8px 22px rgba(251, 191, 36, .35);
  /* القائمة الجانبية داكنة في الوضعين */
  --drawer-bg: #16181D;
  --drawer-ink: #E9EAEE;
  --drawer-muted: #8A909C;
  --font: "Tajawal", system-ui, "Segoe UI", Tahoma, sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0F1115;
    --surface: #181B21;
    --surface-2: #1F232B;
    --ink: #F3F4F6;
    --ink-2: #B4B9C4;
    --ink-3: #8F96A3;
    --line: #2A2F38;
    --brand-soft: #2E2610;
    --success-soft: #11291B;
    --success-ink: #4ADE80;
    --label: #A3A9B5;
    --danger-soft: #2E1517;
    --danger-ink: #FCA5A5;
    --shadow: 0 10px 30px rgba(0, 0, 0, .35);
    --drawer-bg: #0B0D10;
    color-scheme: dark;
  }
}
/* الوضع الداكن باختيار المستعمل (زر القمر)، مهما كان إعداد الهاتف */
:root[data-theme="dark"] {
    --bg: #0F1115;
    --surface: #181B21;
    --surface-2: #1F232B;
    --ink: #F3F4F6;
    --ink-2: #B4B9C4;
    --ink-3: #8F96A3;
    --line: #2A2F38;
    --brand-soft: #2E2610;
    --success-soft: #11291B;
    --success-ink: #4ADE80;
    --label: #A3A9B5;
    --danger-soft: #2E1517;
    --danger-ink: #FCA5A5;
    --shadow: 0 10px 30px rgba(0, 0, 0, .35);
    --drawer-bg: #0B0D10;
    color-scheme: dark;
  }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.7;
  -webkit-tap-highlight-color: transparent;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3 { margin: 0; line-height: 1.3; }
:focus-visible { outline: 3px solid var(--brand-strong); outline-offset: 2px; border-radius: 8px; }

.icon { width: 22px; height: 22px; flex: none; }
.icon-sm { width: 16px; height: 16px; }
.muted { color: var(--ink-2); }

/* انتقال ناعم بين الصفحات */
@view-transition { navigation: auto; }
.topbar { view-transition-name: topbar; }
.drawer { view-transition-name: drawer; }
::view-transition-old(root) { animation: 150ms ease-out both fade-out; }
::view-transition-new(root) { animation: 220ms var(--ease) both fade-in; }
@keyframes fade-out { to { opacity: 0; } }
@keyframes fade-in { from { opacity: 0; transform: translateY(6px); } }

.skip { position: absolute; inset-inline-start: 8px; top: -60px; z-index: 30; padding: 10px 16px; background: var(--ink); color: var(--surface); border-radius: 12px; }
.skip:focus { top: 8px; }
.staging { margin: 0; padding: 4px 16px; background: var(--brand); color: #16181D; font-size: 14px; font-weight: 700; text-align: center; }

/* الهيكل */
.shell { min-height: 100vh; }
.main-col { min-width: 0; display: flex; flex-direction: column; min-height: 100vh; overflow-x: clip; }

.topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(8px);
}
.menu-btn {
  display: grid; place-items: center;
  width: 52px; height: 52px;
  background: var(--surface); border: 0; border-radius: var(--radius-btn);
  box-shadow: var(--shadow); cursor: pointer;
}
.topbar-brand { display: flex; align-items: center; gap: 10px; min-width: 0; text-decoration: none; font-weight: 700; font-size: 15px; line-height: 1.3; }
.topbar-brand img { flex: none; width: 40px; height: 40px; padding: 4px; background: #fff; border-radius: 12px; box-shadow: var(--shadow); }

.content { flex: 1; width: 100%; max-width: 1080px; margin-inline: auto; padding: 8px 16px 40px; }

/* القائمة الجانبية: على الهاتف تُفتح من اليمين فوق الصفحة */
.drawer {
  position: fixed; inset: 0 0 0 auto; margin: 0;
  width: min(320px, 86vw); height: 100dvh; max-height: none;
  display: flex; flex-direction: column; gap: 6px;
  padding: 20px 16px; overflow-y: auto;
  background: var(--drawer-bg); color: var(--drawer-ink);
  border: 0; border-start-start-radius: 0;
  transform: translateX(0);
  transition: transform 240ms var(--ease), overlay 240ms allow-discrete, display 240ms allow-discrete;
}
.drawer:not(:popover-open) { display: none; transform: translateX(100%); }
@starting-style { .drawer:popover-open { transform: translateX(100%); } }
.drawer::backdrop { background: rgba(15, 17, 21, .45); backdrop-filter: blur(6px); }
.drawer-close {
  align-self: flex-end; display: grid; place-items: center;
  width: 48px; height: 48px; background: transparent; border: 0; border-radius: 14px;
  color: var(--drawer-ink); cursor: pointer;
}
.drawer-close:hover { background: rgba(255, 255, 255, .06); }
.drawer-brand { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 4px 8px 20px; text-align: center; text-decoration: none; }
.drawer-brand img { width: 72px; height: auto; padding: 6px; background: #fff; border-radius: 18px; margin-bottom: 8px; }
.drawer-brand strong { font-size: 17px; font-weight: 800; }
.drawer-brand span { font-size: 14px; color: var(--brand); }
.drawer-label { margin: 8px 12px 4px; font-size: 14px; color: var(--drawer-muted); }
.drawer-nav { display: flex; flex-direction: column; gap: 4px; }
.nav-item {
  display: flex; align-items: center; gap: 14px;
  min-height: 52px; padding: 0 16px;
  border-radius: var(--radius-btn);
  text-decoration: none; font-weight: 500; font-size: 16px; color: var(--drawer-ink);
  transition: background-color 150ms ease-out;
}
.nav-item .icon { color: var(--drawer-muted); }
.nav-item:hover { background: rgba(255, 255, 255, .06); }
.nav-item[aria-current="page"] { background: var(--brand); color: #16181D; font-weight: 700; box-shadow: var(--shadow-brand); }
.nav-item[aria-current="page"] .icon { color: #16181D; }
.drawer-card {
  margin-top: auto; display: flex; align-items: center; gap: 12px;
  padding: 14px; border-radius: 20px;
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08);
  text-decoration: none;
}
.drawer-card-icon { display: grid; place-items: center; width: 48px; height: 48px; flex: none; border-radius: 14px; background: var(--brand); color: #16181D; }
.drawer-card strong { display: block; font-size: 15px; }
.drawer-card small { display: block; font-size: 13px; color: var(--drawer-muted); }

/* على الحاسوب: القائمة ثابتة على اليمين */
@media (min-width: 1024px) {
  .shell { display: grid; grid-template-columns: 280px 1fr; }
  .drawer, .drawer:not(:popover-open) {
    display: flex; position: sticky; top: 0; inset: auto;
    width: 280px; height: 100vh; transform: none; transition: none;
  }
  .drawer-close, .menu-btn, .topbar { display: none; }
  .content { padding-top: 32px; }
}

/* البطاقات */
.card { background: var(--surface); border-radius: var(--radius-card); box-shadow: var(--shadow); }
.icon-box { display: grid; place-items: center; width: 56px; height: 56px; flex: none; border-radius: 18px; background: var(--brand-soft); color: var(--ink); }
.icon-box-soft { background: var(--surface-2); border: 1px solid var(--line); }
.icon-box-success { background: var(--success-soft); color: var(--success-ink); }
.icon-box-ink { background: var(--ink); color: var(--brand); }
.icon-box-muted { background: var(--surface-2); color: var(--ink-3); border: 1px solid var(--line); }
.icon-box-sm { width: 44px; height: 44px; border-radius: 14px; }
.icon-box-sm .icon { width: 20px; height: 20px; }
.icon-box-lg { width: 64px; height: 64px; border-radius: 20px; }
.icon-box-lg .icon { width: 28px; height: 28px; }

.pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 12px; border-radius: var(--radius-pill); font-size: 13px; font-weight: 700; white-space: nowrap; }
.pill-success { background: var(--success-soft); color: var(--success-ink); }
.pill-muted { background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line); }

/* بطاقة الترحيب */
.hero {
  position: relative; overflow: hidden;
  padding: 28px 22px 34px;
  border-inline-start: 6px solid var(--brand);
  background-image:
    linear-gradient(color-mix(in srgb, var(--ink) 4%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--ink) 4%, transparent) 1px, transparent 1px);
  background-size: 22px 22px;
}
.badge-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--surface); font-size: 14px; font-weight: 500; color: var(--ink-2); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); }
.hero h1 { margin-top: 18px; font-size: 34px; font-weight: 800; }
.hero-sub { margin: 8px 0 6px; font-size: 22px; font-weight: 700; color: var(--ink-2); }
.hero-text { margin: 0 0 4px; max-width: 52ch; }
.hero-zigzag { position: absolute; inset-inline: 22px; bottom: 12px; height: 10px; color: var(--brand); }
.zigzag { width: 120px; height: 10px; }
.hero-compact { padding-block: 22px 26px; }
.hero-compact h1 { margin-top: 14px; font-size: 28px; }
.hero-compact p { margin: 6px 0 0; }

.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 22px;
  border-radius: var(--radius-btn); font-weight: 700; font-size: 16px; text-decoration: none;
  transition: transform 150ms ease-out, background-color 150ms ease-out, box-shadow 150ms ease-out;
}
.btn-primary { background: var(--brand); color: #16181D; box-shadow: var(--shadow-brand); }
.btn-primary:hover { background: var(--brand-strong); transform: translateY(-1px); }
.btn-secondary { background: var(--surface); color: var(--ink); border: 1px solid var(--line); }
.btn-secondary:hover { border-color: var(--ink-3); }
.btn:active { transform: scale(.97); }
/* ضغطة خفيفة لكل الأزرار */
.icon-btn, .tab, .chip, .chip-check, .sheet-tile, .wz-dot, .sw-dot span { transition: transform 150ms ease-out, background-color 150ms ease-out, box-shadow 150ms ease-out; }
.icon-btn:active, .chip:active, .chip-check:active, .sheet-tile:active { transform: scale(.94); }
.tab:active .tab-ic { transform: scale(.9); }
.tab-ic { transition: transform 150ms ease-out; }

/* الأقسام */
.section { margin-top: 32px; }
.section > h2 { margin-bottom: 14px; font-size: 20px; font-weight: 700; }
.page-head { padding-block: 8px 4px; }
.page-head h1 { font-size: 32px; font-weight: 800; }
.page-head p { margin: 6px 0 0; }

.card-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 720px) { .card-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } }
.program-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  height: 100%; padding: 18px 16px;
  text-decoration: none;
  transition: transform 180ms ease-out, box-shadow 180ms ease-out;
}
.program-card:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(16, 24, 40, .10); }
.program-card:active { transform: translateY(0); }
.program-card .icon-box { margin-bottom: 8px; }
.program-title { font-weight: 700; font-size: 17px; line-height: 1.4; }
.program-meta { font-size: 14px; color: var(--label); }
.program-card .pill { margin-top: 4px; }

/* الخطوات */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.step { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 18px; }
.step .icon-box { margin-bottom: 8px; }
.step strong { font-size: 17px; }
.step .muted { font-size: 15px; }
.step-num { position: absolute; inset-inline-end: 16px; top: 16px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--brand); color: #16181D; font-weight: 800; font-size: 15px; }

/* صفحة المستوى */
.crumbs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; font-size: 14px; color: var(--label); }
.crumbs a { color: var(--ink-2); }
.stats { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.stat { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 14px; }
.stat .icon-box { width: 44px; height: 44px; border-radius: 14px; margin-bottom: 8px; }
.stat strong { font-size: 28px; font-weight: 800; line-height: 1.1; }
.stat .muted { font-size: 14px; }

.units { display: grid; gap: 12px; margin-top: 20px; }
.unit { overflow: hidden; interpolate-size: allow-keywords; }
.unit summary { display: flex; align-items: center; gap: 14px; min-height: 72px; padding: 12px 16px; cursor: pointer; list-style: none; }
.unit summary::-webkit-details-marker { display: none; }
.unit-num { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); font-weight: 800; font-size: 17px; }
.unit[open] .unit-num { background: var(--brand); border-color: var(--brand); color: #16181D; }
.unit-text { flex: 1; display: flex; flex-direction: column; line-height: 1.4; }
.unit-title { font-weight: 700; font-size: 17px; }
.unit-chevron { color: var(--ink-3); transition: transform 200ms ease-out; }
.unit[open] .unit-chevron { transform: rotate(180deg); }
.unit::details-content { block-size: 0; overflow: hidden; transition: block-size 250ms var(--ease), content-visibility 250ms allow-discrete; }
.unit[open]::details-content { block-size: auto; }

.items { list-style: none; margin: 0; padding: 0 10px 12px; display: grid; gap: 4px; border-top: 1px solid var(--line); padding-top: 10px; }
.item { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 8px 10px; border-radius: var(--radius-btn); text-decoration: none; transition: background-color 150ms ease-out; }
.item:hover { background: var(--surface-2); }
.item-body { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.4; }
.item-title { font-weight: 500; }
.item-locked .item-title { color: var(--ink-2); }
.item-kind { font-size: 14px; color: var(--label); }

/* الاشتراك */
.plan { display: flex; flex-direction: column; gap: 4px; padding: 18px; }
.plan .icon-box { margin-bottom: 8px; }
.plan strong { font-size: 17px; }
.plan .muted { font-size: 15px; }
.plan-main { outline: 2px solid var(--brand); }

.notice { display: flex; align-items: flex-start; gap: 10px; margin: 20px 0; padding: 14px 16px; border-radius: 18px; background: var(--brand-soft); color: var(--ink); }
.notice .icon { margin-top: 2px; }

.site-footer { padding: 20px 16px 28px; text-align: center; font-size: 14px; color: var(--label); }
.site-footer p { margin: 0; }

/* ---------- النماذج ---------- */
.form { display: grid; gap: 16px; margin-top: 20px; }
.field { display: grid; gap: 6px; }
.field label { font-weight: 700; font-size: 15px; }
.input {
  width: 100%; min-height: 52px; padding: 10px 14px;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius-btn);
  font: inherit; font-size: 16px;
  transition: border-color 150ms ease-out, box-shadow 150ms ease-out;
}
.input:focus { outline: none; border-color: var(--brand-strong); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 30%, transparent); }
.input[dir="ltr"] { text-align: left; }
select.input { appearance: none; padding-inline-end: 44px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239AA0AC' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-position: left 14px center; background-size: 20px 20px; background-repeat: no-repeat; }
.field-hint { margin: 0; font-size: 14px; color: var(--label); }
.field-error { margin: 0; font-size: 14px; font-weight: 700; color: var(--danger-ink); }
.field-invalid .input { border-color: var(--danger-ink); }
.check { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; color: var(--ink-2); cursor: pointer; }
.check input { width: 20px; height: 20px; margin-top: 3px; accent-color: var(--brand-strong); flex: none; }
.btn-block { width: 100%; }
.btn-sm { min-height: 44px; padding: 0 16px; font-size: 15px; border-radius: 14px; }
.btn-link { background: none; border: 0; padding: 8px; color: var(--ink-2); text-decoration: underline; cursor: pointer; font-size: 15px; }
.inline-form { display: inline; margin: 0; }
.actions-center { justify-content: center; }
.small { font-size: 14px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.alert { display: flex; align-items: flex-start; gap: 10px; margin: 16px 0 0; padding: 12px 14px; border-radius: 16px; font-size: 15px; }
.alert p { margin: 0; }
.alert .icon { margin-top: 2px; }
.alert-error { background: var(--danger-soft); color: var(--danger-ink); }
.alert-success { background: var(--success-soft); color: var(--success-ink); }
.alert-info { background: var(--brand-soft); color: var(--ink); }

/* بطاقة الدخول */
.auth-card { max-width: 460px; margin: 8px auto 0; padding: 28px 22px; }
.auth-card h1 { margin-top: 14px; font-size: 28px; font-weight: 800; }
.auth-card > p { margin: 6px 0 0; }
.auth-note { margin: 18px 0 0; text-align: center; font-size: 15px; color: var(--ink-2); }
.auth-note a { color: var(--ink); font-weight: 700; }

/* التأسيس */
.setup-grid { display: grid; gap: 16px; margin-top: 16px; }
@media (min-width: 900px) { .setup-grid { grid-template-columns: 1fr 1fr; align-items: start; } }
.form-card { padding: 22px 20px; }
.form-card > h2, .form-card > .sw-head > h2 { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 20px; font-weight: 700; }
.form-card .field + .field { margin-top: 16px; }
.form-card .btn-block { margin-top: 20px; }
.step-num-inline { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--brand); color: #16181D; font-size: 15px; font-weight: 800; }
.mini-steps { margin: 0 0 16px; padding-inline-start: 20px; color: var(--ink-2); font-size: 15px; }
.qr-box { width: min(240px, 100%); margin: 0 auto 12px; padding: 10px; background: #fff; border: 1px solid var(--line); border-radius: 18px; }
.qr { width: 100%; height: auto; }
.manual-key { margin-bottom: 16px; font-size: 14px; color: var(--ink-2); }
.manual-key summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; }
.mono { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 15px; letter-spacing: .04em; word-break: break-all; color: var(--ink); }
.codes { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.codes li { padding: 10px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); text-align: center; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 16px; letter-spacing: .05em; }

/* ---------- لوحة التحكم ---------- */
.empty { padding: 24px; text-align: center; color: var(--ink-2); }
.empty p { margin: 0 0 14px; }
.empty p:last-child { margin: 0; }
.stats-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 720px) { .stats-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.icon-box-danger { background: var(--danger-soft); color: var(--danger-ink); }
.log { list-style: none; margin: 0; padding: 6px 18px; }
.log li { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.log li:last-child { border-bottom: 0; }
.log-when { color: var(--label); min-width: 9em; }
.page-head-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.search { position: relative; margin: 16px 0; }
.search .input { padding-inline-start: 46px; }
.search-icon { position: absolute; inset-inline-start: 14px; top: 50%; transform: translateY(-50%); color: var(--label); display: grid; }
.family-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.family-row { display: flex; align-items: center; gap: 12px; padding: 14px; text-decoration: none; transition: box-shadow 150ms ease-out; }
.family-row:hover { box-shadow: 0 14px 34px rgba(16, 24, 40, .10); }
.avatar { display: grid; place-items: center; width: 48px; height: 48px; flex: none; border-radius: 16px; background: var(--brand-soft); font-weight: 800; font-size: 20px; }
.avatar-lg { width: 64px; height: 64px; border-radius: 20px; font-size: 28px; }
.avatar-sm { width: 40px; height: 40px; border-radius: 12px; font-size: 17px; }
.family-main { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.45; }
.family-name { font-weight: 700; }
.family-meta { font-size: 14px; color: var(--label); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pill-danger { background: var(--danger-soft); color: var(--danger-ink); }
.pill-warning { background: var(--brand-soft); color: var(--ink); }
.family-head { display: flex; align-items: center; gap: 16px; }
.family-head h1 { margin: 0; font-size: 26px; }
.family-head p { margin: 4px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.admin-grid { display: grid; gap: 16px; margin-top: 16px; }
@media (min-width: 900px) { .admin-grid { grid-template-columns: 1fr 1fr; align-items: start; } .admin-grid > :first-child { grid-row: span 2; } }
.kid-list { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.kid { border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.kid summary { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 8px 12px; cursor: pointer; list-style: none; }
.kid summary::-webkit-details-marker { display: none; }
.kid[open] summary { background: var(--surface-2); border-bottom: 1px solid var(--line); }
.kid .form { margin: 0; padding: 14px; }
.kid-main { flex: 1; display: flex; flex-direction: column; line-height: 1.4; }
.kid-name { font-weight: 700; }
.kid-edit { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; color: var(--ink-2); }
.add-child summary { list-style: none; display: inline-flex; cursor: pointer; }
.add-child summary::-webkit-details-marker { display: none; }
.add-child .form { padding: 14px; margin-top: 10px; border: 1px dashed var(--line); border-radius: 16px; }
.action-list { display: grid; gap: 8px; }
.action-list form { margin: 0; }
.action-row { display: flex; align-items: flex-start; gap: 12px; width: 100%; padding: 14px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 16px; text-align: start; cursor: pointer; font: inherit; color: var(--ink); transition: border-color 150ms ease-out; }
.action-row:hover { border-color: var(--ink-3); }
.action-row .icon { margin-top: 2px; }
.action-row strong { display: block; font-size: 16px; }
.action-row small { display: block; font-size: 14px; color: var(--ink-2); }
.action-danger { color: var(--danger-ink); }
.action-danger small { color: var(--danger-ink); opacity: .85; }
.form-stack { display: grid; gap: 16px; margin-top: 16px; }
.child-slots { display: grid; gap: 12px; }
@media (min-width: 720px) { .child-slots { grid-template-columns: 1fr 1fr; } }
.child-slot { margin: 0; padding: 14px; border: 1px solid var(--line); border-radius: 16px; display: grid; gap: 12px; }
.child-slot legend { padding: 0 6px; font-weight: 700; color: var(--ink-2); }
.form-card .child-slot .field + .field { margin-top: 0; }
.child-slot[hidden], [data-add-child][hidden], [data-remove-child][hidden] { display: none; }
.child-slot .child-remove { justify-self: start; }
.add-child-btn { justify-self: start; margin-top: 12px; }
.form-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.creds { margin: 16px 0 0; display: grid; gap: 10px; }
.creds div { padding: 12px 14px; border-radius: 16px; background: var(--surface-2); border: 1px solid var(--line); }
.creds dt { font-size: 14px; color: var(--label); }
.creds dd { margin: 2px 0 0; font-size: 22px; font-weight: 800; letter-spacing: .04em; text-align: right; }
.creds-password { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 26px !important; }

/* بطاقة المستخدم أسفل القائمة */
.drawer-user { margin-top: auto; display: grid; gap: 8px; }
.drawer-user .drawer-card { margin-top: 0; }
.drawer-avatar { font-weight: 800; font-size: 20px; }
.drawer-logout, .drawer-switch { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 48px; background: transparent; color: var(--drawer-muted); border: 1px solid rgba(255, 255, 255, .1); border-radius: 14px; font: inherit; cursor: pointer; }
.drawer-logout:hover, .drawer-switch:hover { color: var(--drawer-ink); background: rgba(255, 255, 255, .05); }

@media (min-width: 720px) {
  .hero { padding: 36px 36px 42px; }
  .hero h1 { font-size: 36px; }
  .hero-zigzag { inset-inline: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after, ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) {
    animation: none !important; transition: none !important;
  }
}

/* ---------- المرحلة 3: الملفات والأجهزة ---------- */
.drawer-switch { text-decoration: none; }
.drawer-switch .icon { width: 18px; height: 18px; }

.page-head-center { text-align: center; }
.profiles { list-style: none; margin: 20px auto 24px; padding: 0; max-width: 720px; display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 720px) { .profiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.profile-form { margin: 0; height: 100%; }
.profile-card {
  position: relative; width: 100%; height: 100%; min-height: 168px; padding: 20px 12px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  border: 2px solid transparent; font: inherit; color: var(--ink); cursor: pointer; text-align: center;
  transition: transform 150ms ease-out, border-color 150ms ease-out;
}
.profile-card:hover { transform: translateY(-2px); border-color: var(--brand); }
.profile-card:focus-visible { outline: 3px solid var(--brand-strong); outline-offset: 2px; }
.profile-avatar { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; background: var(--brand); color: #16181D; font-size: 28px; font-weight: 800; margin-bottom: 4px; }
/* ألوان ثابتة في الوضعين: الأصفر لا يوضع أبدًا على خلفية فاتحة */
.profile-avatar-parent { background: #16181D; color: #FBBF24; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.profile-avatar-parent .icon { width: 30px; height: 30px; }
.profile-avatar-sm { width: 48px; height: 48px; border-radius: 16px; font-size: 22px; margin-bottom: 8px; }
.profile-name { font-weight: 800; font-size: 17px; line-height: 1.35; }
.profile-meta { font-size: 14px; color: var(--label); }
.profile-lock { position: absolute; top: 12px; inset-inline-end: 12px; color: var(--label); }
.program-card .profile-form { margin-top: 12px; height: auto; }

.device-list { list-style: none; margin: 0; padding: 4px 18px; }
.device-list li { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.device-list li:last-child { border-bottom: 0; }
.device-list-plain { padding: 0; margin-bottom: 14px; }
.device-main { flex: 1; min-width: 10em; display: flex; flex-direction: column; line-height: 1.45; }
.device-main small { color: var(--label); font-size: 14px; }
.device-main a { color: inherit; }
.device-actions { display: flex; gap: 8px; }
.device-actions form { margin: 0; }

.wait-steps li + li { margin-top: 4px; }

.pin-grid { display: grid; gap: 16px; margin-top: 16px; }
@media (min-width: 820px) { .pin-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
.pin-grid h2 { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.pin-pair { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-card .pin-pair .field + .field { margin-top: 0; }
.pin-pair .input { letter-spacing: .4em; text-align: center; }
.pin-remove { margin-top: 6px; }

/* ---------- المرحلة 4: المحتوى ---------- */
.video-frame { margin-top: 18px; aspect-ratio: 16 / 9; border-radius: var(--radius-card); overflow: hidden; background: #000; box-shadow: var(--shadow); }
.video-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.file-card { margin-top: 18px; padding: 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.file-card .actions { margin-top: 0; width: 100%; }
.file-main { flex: 1; min-width: 12em; display: flex; flex-direction: column; }
.file-main small { color: var(--label); }
.lesson-text { margin-top: 18px; line-height: 1.8; white-space: pre-line; }
.lesson-nav { margin-top: 24px; }

.btn-xs { min-height: 40px; padding: 0 12px; font-size: 14px; border-radius: 12px; gap: 6px; }
.btn-danger { background: #B42318; color: #fff; }
.btn-danger-link { color: var(--danger-ink); display: inline-flex; align-items: center; gap: 6px; text-decoration: none; list-style: none; }
.btn-danger-link::-webkit-details-marker { display: none; }
.danger-zone { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.danger-zone .form { margin-top: 10px; }
.textarea { min-height: 112px; padding-block: 12px; resize: vertical; font-family: inherit; line-height: 1.6; }

.admin-list { list-style: none; margin: 0; padding: 4px 16px; }
.admin-list > li { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.admin-list > li:last-child { border-bottom: 0; }
.admin-list-main { flex: 1; min-width: 10em; display: flex; flex-direction: column; color: inherit; text-decoration: none; line-height: 1.45; }
.admin-list-main:hover strong { text-decoration: underline; }
.admin-list-main small { color: var(--label); font-size: 14px; display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.move-btns { display: inline-flex; gap: 4px; }
.icon-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; }
.icon-btn:hover { border-color: var(--ink-3); }
.icon-btn-off { opacity: .35; cursor: default; }
.lesson-pills { display: inline-flex; gap: 6px; }
.lesson-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; width: 100%; padding-inline-start: 56px; }
@media (min-width: 900px) { .lesson-actions { width: auto; padding-inline-start: 0; } }
.unit-head h1 { margin: 0; font-size: 26px; }
.unit-head p { margin: 6px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
@media (min-width: 900px) { .admin-grid-even > :first-child { grid-row: auto; } }
.btn:disabled, .btn[disabled] { opacity: .45; box-shadow: none; cursor: not-allowed; transform: none; }

/* ---------- المرحلة 5: الاشتراكات ---------- */
.pill-wrap { white-space: normal; text-align: center; line-height: 1.5; padding-block: 4px; }
.plan-price { font-size: 22px; font-weight: 800; color: var(--ink); }
.pay-info { margin: 8px 0 0; white-space: pre-line; line-height: 1.8; }
.sub-block + .sub-block { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.sub-block h3 { margin: 0 0 6px; font-size: 17px; }
.sub-status { margin: 4px 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.sub-list { list-style: none; margin: 10px 0; padding: 0; display: grid; gap: 6px; }
.sub-list li { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 10px 12px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 14px; font-size: 15px; }
.sub-list small { display: block; color: var(--label); font-size: 13px; }
.sub-del summary { list-style: none; cursor: pointer; padding: 4px; }
.sub-del summary::-webkit-details-marker { display: none; }
.sub-del[open] { flex-basis: 100%; }
.sub-list li:has(.sub-del[open]) { flex-wrap: wrap; }
.sub-form { margin-top: 12px; }
.date-grid { display: grid; gap: 12px; }
@media (min-width: 720px) { .date-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.settings-form { display: grid; gap: 16px; }
.settings-form > .btn { justify-self: start; }
.program-card .pill-wrap { margin-top: 6px; }
.program-card .btn-block + .btn-block, .program-card .pill + .btn-block, .program-card .pill + .profile-form { margin-top: 8px; }

/* ---------- المرحلة 6: الاختبارات ---------- */
.math { unicode-bidi: isolate; }
.math-display { display: block; margin: 10px 0; overflow-x: auto; overflow-y: hidden; }
.katex { font-size: 1.1em; }
.actions-tight { margin-top: 0; }

.q-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.q-card { padding: 16px 18px; }
.q-card fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.q-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; padding: 0; }
.q-head .unit-num { width: 36px; height: 36px; border-radius: 12px; font-size: 15px; }
.q-head .score-chip { margin-inline-start: auto; }
.q-text { font-size: 17px; line-height: 1.9; overflow-wrap: anywhere; }
.q-choices { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.q-choices li { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 12px; }
.q-choices .q-correct { border-color: var(--success-ink); background: color-mix(in srgb, var(--success-ink) 8%, transparent); font-weight: 700; }
.q-key, .q-given, .q-note { margin: 10px 0 0; line-height: 1.8; }
.q-note { display: flex; gap: 6px; align-items: flex-start; color: var(--ink-2); }
.q-actions { margin-top: 12px; padding-inline-start: 0; }
.q-right { box-shadow: inset 4px 0 0 var(--success-ink), var(--shadow); }
.q-wrong { box-shadow: inset 4px 0 0 var(--danger-ink), var(--shadow); }
.q-partial, .q-pending { box-shadow: inset 4px 0 0 var(--brand-strong), var(--shadow); }
.open-answer { white-space: pre-line; }
.add-q { margin-top: 14px; }
.add-q h3 { margin: 0 0 10px; font-size: 17px; }
.type-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.score-chip { display: inline-flex; align-items: center; gap: 2px; padding: 2px 10px; border-radius: var(--radius-pill); background: var(--surface-2); border: 1px solid var(--line); font-weight: 800; font-size: 15px; white-space: nowrap; }

.math-toolbar { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); }
.tool { min-width: 44px; min-height: 40px; padding: 0 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); font: inherit; font-size: 16px; cursor: pointer; }
.tool:hover { border-color: var(--ink-3); }
.math-preview { min-height: 0; padding: 8px 12px; border-radius: 12px; background: var(--brand-soft); color: var(--ink); line-height: 2; overflow-x: auto; }
.math-preview:empty { display: none; }
.math-preview-block { margin-top: 8px; }
.preview-error { background: var(--danger-soft); color: var(--danger-ink); font-size: 14px; }
.choices-field { border: 0; padding: 0; margin: 0; min-width: 0; }
.choices-field legend, fieldset > legend { font-weight: 700; font-size: 15px; margin-bottom: 8px; padding: 0; }
.choice-row { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px 10px; margin-bottom: 8px; }
.choice-row .math-preview { grid-column: 2; }
.choice-mark input { width: 22px; height: 22px; accent-color: var(--brand-strong); }
.tf-row { display: flex; gap: 24px; }
.grade-row { display: grid; gap: 12px; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); }
@media (min-width: 720px) { .grade-row { grid-template-columns: 200px 1fr; } }

.quiz-facts { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 16px; color: var(--ink-2); font-size: 15px; }
.quiz-facts li { display: inline-flex; align-items: center; gap: 6px; }
.quiz-instructions { margin-top: 14px; padding: 12px 14px; border-radius: 14px; background: var(--surface-2); line-height: 1.9; }

.quiz-bar { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: -4px 0 14px; padding: 10px 14px; border-radius: 16px; background: var(--ink); color: var(--bg); }
.quiz-bar strong { flex: 1; min-width: 8em; }
.timer { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: var(--radius-pill); background: #FBBF24; color: #16181D; font-weight: 800; font-variant-numeric: tabular-nums; }
.timer-warn { background: #FCA5A5; }
.save-state { flex-basis: 100%; font-size: 13px; opacity: .85; }
.save-state:empty { display: none; }
.options { display: grid; gap: 8px; margin-top: 12px; }
.options-row { grid-template-columns: 1fr 1fr; }
.option { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 10px 14px; border: 1.5px solid var(--line); border-radius: 14px; cursor: pointer; transition: border-color 150ms ease-out, background-color 150ms ease-out; }
.option input { width: 22px; height: 22px; flex: none; accent-color: var(--brand-strong); }
.option:has(input:checked) { border-color: var(--brand-strong); background: var(--brand-soft); }
.option:has(input:focus-visible) { outline: 3px solid var(--brand-strong); outline-offset: 2px; }
.expr-field { margin-top: 12px; display: grid; gap: 8px; }
.expr-input { font-size: 18px; letter-spacing: .02em; text-align: left; }
.keypad { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 6px; }
@media (max-width: 520px) { .keypad { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.key { min-height: 44px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); color: var(--ink); font: inherit; font-size: 17px; font-weight: 700; cursor: pointer; direction: ltr; }
.key:active { background: var(--brand-soft); }
.key-del { background: var(--surface); }
.submit-card { margin-top: 16px; text-align: center; }
.submit-card .btn { margin: 6px 0; }
.result-hero { text-align: center; }
.big-score { margin: 10px 0 0; font-size: 56px; font-weight: 800; line-height: 1; }
.big-score small { font-size: 22px; color: var(--label); }

/* ---------- الإحساس الفوري عند الضغط ---------- */
html { -webkit-tap-highlight-color: transparent; }
a, button, label, summary { touch-action: manipulation; }
.btn, .item, .program-card, .profile-card, .nav-item, .action-row, .icon-btn, .tool, .key, .option, .seg, .drawer-card {
  transition: transform 120ms ease-out, background-color 150ms ease-out, border-color 150ms ease-out, box-shadow 150ms ease-out;
}
.btn:active, .item:active, .program-card:active, .profile-card:active, .nav-item:active, .action-row:active, .icon-btn:active, .tool:active, .key:active, .option:active, .seg:active, .drawer-card:active {
  transform: scale(.97);
}
.nav-progress { position: fixed; inset-inline: 0; top: 0; height: 3px; z-index: 1000; pointer-events: none; transform-origin: right; transform: scaleX(0); background: var(--brand-strong); opacity: 0; }
.nav-progress.run { opacity: 1; animation: nav-progress 2.5s cubic-bezier(.1, .7, .2, 1) forwards; }
@keyframes nav-progress { from { transform: scaleX(0); } to { transform: scaleX(.9); } }
.btn.is-busy { position: relative; color: transparent !important; }
.btn.is-busy > * { visibility: hidden; }
.btn.is-busy::after { content: ""; position: absolute; inset: 0; margin: auto; width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid currentColor; border-color: var(--ink) var(--ink) transparent transparent; animation: spin 700ms linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* شريط المعاينة للأستاذ */
.preview-bar { position: relative; z-index: 30; display: flex; justify-content: center; margin: 0; padding: 6px 12px 0; font-size: 14px; }
.preview-pick { position: relative; }
.preview-pick > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border-radius: 999px; background: var(--ink); color: var(--bg); }
.preview-pick > summary::-webkit-details-marker { display: none; }
.preview-bar.is-preview .preview-pick > summary { background: var(--brand); color: var(--ink); }
.preview-menu { position: absolute; top: calc(100% + 6px); inset-inline-start: 50%; translate: 50% 0; display: grid; gap: 2px; min-width: 190px; padding: 6px; border-radius: 16px; background: var(--surface); box-shadow: var(--sf-shadow); }
[dir="ltr"] .preview-menu { translate: -50% 0; }
.preview-opt { display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border: 0; border-radius: 12px; background: transparent; color: var(--ink); font: inherit; text-align: start; cursor: pointer; }
.preview-opt:hover { background: var(--surface-2); }
.preview-opt.is-on { font-weight: 700; background: var(--brand-soft); }

/* ---------- الدفع ---------- */
.pay-fields { display: grid; gap: 12px; }
@media (min-width: 720px) { .pay-fields { grid-template-columns: 1fr 1fr; align-items: start; } }
.sub-form h3, .pay-history h3 { margin: 0 0 8px; font-size: 17px; }
.sub-form, .pay-history { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.check-list { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; }
.sub-list li .pill { margin-top: 4px; }
select.input { width: 100%; min-width: 0; max-width: 100%; text-overflow: ellipsis; }
.sub-form, .pay-form, .form-card { min-width: 0; }
.sub-list li > span { min-width: 0; }
.sub-list .pill { white-space: normal; }

/* زر الوضع الليلي والنهاري */
.theme-btn { display: grid; place-items: center; width: 52px; height: 52px; margin-inline-start: auto; background: var(--surface); border: 0; border-radius: var(--radius-btn); color: var(--ink); cursor: pointer; box-shadow: var(--shadow); }
.theme-form { margin: 0; margin-inline-start: auto; }
.theme-btn .i-sun { display: none; }
:root[data-theme="dark"] .theme-btn .i-sun { display: block; }
:root[data-theme="dark"] .theme-btn .i-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-btn .i-sun { display: block; }
  :root:not([data-theme="light"]) .theme-btn .i-moon { display: none; }
}
.drawer-theme .theme-btn { width: 100%; height: 48px; background: transparent; color: var(--drawer-muted); border: 1px solid rgba(255, 255, 255, .1); border-radius: 14px; box-shadow: none; display: flex; gap: 8px; justify-content: center; }
.drawer-theme .theme-btn:hover { color: var(--drawer-ink); background: rgba(255, 255, 255, .05); }

/* أحكام الذكاء الاصطناعي في صفحة التصحيح */
.pill-ai { background: var(--brand-soft); color: var(--ink); display: inline-flex; align-items: center; gap: 4px; }
.ai-note { margin: 10px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); border-inline-start: 4px solid var(--ink-3); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; }
.ai-note p { margin: 0; display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
.ai-note .icon { flex: none; align-self: center; }
.ai-note-ok { border-color: var(--success-ink); background: var(--success-soft); }
.ai-note-no { border-color: var(--danger-ink); background: var(--danger-soft); }
.ai-note-pending { border-color: var(--brand); background: var(--brand-soft); }

/* استيراد الأسئلة من Excel */
.import-card h3 { display: flex; align-items: center; gap: 8px; }
.upload-form input[type="file"] { padding: 10px; height: auto; }
.problem-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.problem-list li { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.import-problems h2 { display: flex; align-items: center; gap: 8px; }
.import-actions { margin-top: 16px; }

/* مساحة المستوى: شريط التبويبات */
.tabs { display: flex; gap: 6px; margin: 0 0 20px; padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 14px; color: var(--ink-2); font-weight: 700; text-decoration: none; white-space: nowrap; transition: background .15s ease-out, color .15s ease-out; }
.tab:hover { background: var(--surface-2); color: var(--ink); }
.tab.is-active { background: var(--brand); color: #16181D; }
.tab-count { min-width: 24px; padding: 0 7px; border-radius: var(--radius-pill); background: var(--surface-2); color: var(--ink-2); font-size: 13px; line-height: 22px; text-align: center; border: 1px solid var(--line); }
.tab.is-active .tab-count { background: rgba(22, 24, 29, .12); color: #16181D; border-color: transparent; }
.tab-count-alert { background: var(--danger-soft); color: var(--danger-ink); border-color: transparent; }

/* شريط التصفية فوق القوائم */
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 16px; }
.toolbar > .btn { margin-inline-start: auto; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: var(--radius-pill); border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); font-weight: 700; font-size: 14px; text-decoration: none; }
.chip:hover { color: var(--ink); border-color: var(--ink-3); }
.chip.is-active { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.chip-n { font-weight: 500; opacity: .75; }
.filter-form { display: flex; gap: 6px; align-items: center; min-width: 0; }
.input-sm { min-height: 40px; height: 40px; padding: 0 12px; font-size: 14px; width: auto; max-width: 100%; }

/* بطاقات الاختبارات */
.test-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
@media (min-width: 820px) { .test-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.test-card { display: flex; flex-direction: column; gap: 10px; padding: 18px; min-width: 0; }
.test-card h3 { margin: 0; font-size: 18px; line-height: 1.4; }
.test-card h3 a { color: inherit; text-decoration: none; }
.test-card h3 a:hover { text-decoration: underline; }
.test-card > p { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.test-badges, .test-types { display: flex; flex-wrap: wrap; gap: 6px; }
.test-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 10px; background: var(--surface-2); border-radius: 14px; }
.test-facts div { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.test-facts dt { font-size: 12px; color: var(--label); }
.test-facts dd { margin: 0; font-weight: 800; font-size: 17px; }
.test-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 4px; position: relative; }
.more[open] { flex-basis: 100%; }
.more > summary { list-style: none; }
.more > summary::-webkit-details-marker { display: none; }
.more-menu { margin-top: 8px; padding: 12px; display: grid; gap: 12px; background: var(--surface-2); box-shadow: none; }
.more-menu .form { gap: 6px; }

/* التلاميذ ونظرة عامة */
.initial-avatar { flex: none; width: 44px; height: 44px; display: grid; place-items: center; background: var(--brand-soft); color: var(--ink); font-weight: 800; font-size: 18px; border-radius: 50%; }
.overview-grid { display: grid; gap: 14px; margin-top: 16px; }
@media (min-width: 820px) { .overview-grid { grid-template-columns: 1fr 1fr; align-items: start; } }
.kv-list { list-style: none; margin: 0 0 12px; padding: 0; }
.kv-list li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.kv-list li:last-child { border-bottom: 0; }
.kv-list a, .kv-list strong { font-weight: 800; font-size: 17px; }
.no-js-only[hidden] { display: none; }
@media (max-width: 480px) { .tab { padding: 0 12px; } }
.ai-note-text { display: grid; gap: 2px; }

/* ---------- صفحة مشاهدة الدرس ---------- */
.viewer { margin-top: 4px; }
.viewer-main { min-width: 0; }
.viewer-stage { position: relative; }
.viewer-stage .video-frame, .viewer-stage .file-card { margin-top: 0; }
.viewer.is-loading .viewer-stage { opacity: .55; transition: opacity .15s ease-out; }

/* الشاشة الكاملة بعد اختفاء الأزرار: طبقة شفافة فوق الفيديو، أول لمسة تُظهر الأزرار (public/viewer.js) */
.viewer-wake { display: none; position: absolute; inset: 0; z-index: 3; margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.viewer.is-full.is-idle .viewer-wake { display: block; }

/* شريط التنقل تحت الفيديو */
.viewer-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; }
.viewer-step { display: inline-flex; align-items: center; gap: 6px; min-height: 48px; padding: 0 14px; border-radius: var(--radius-btn); background: var(--surface); border: 1px solid var(--line); color: var(--ink); font-weight: 700; text-decoration: none; }
.viewer-step:hover { border-color: var(--ink-3); }
.viewer-next { background: var(--brand); border-color: var(--brand); color: #16181D; box-shadow: var(--shadow-brand); }
.viewer-next:hover { background: var(--brand-strong); border-color: var(--brand-strong); }
.viewer-step-off { opacity: .35; }
.viewer-tools { display: flex; gap: 6px; }
.viewer-tool { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 48px; min-height: 48px; padding: 0 12px; border-radius: var(--radius-btn); background: var(--surface); border: 1px solid var(--line); color: var(--ink); font: inherit; font-weight: 700; cursor: pointer; }
.viewer-tool:hover { border-color: var(--ink-3); }
.viewer-fs { display: none; }
.has-viewer-js .viewer-fs { display: inline-flex; }
.viewer-fs .i-min, .viewer.is-full .viewer-fs .i-max { display: none; }
.viewer.is-full .viewer-fs .i-min { display: block; }
.viewer-head { margin-top: 18px; }
.viewer-head h1 { font-size: 26px; }
.viewer-head .viewer-title { font-size: 22px; line-height: 1.35; }
.viewer-topics { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.viewer-topics li { position: relative; padding-inline-start: 18px; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.viewer-topics li::before { content: ""; position: absolute; inset-inline-start: 2px; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--lv, var(--brand)); }

/* قائمة دروس المقطع: لوحة جانبية على الهاتف (تُفتح بالزر أو بالسحب)، وعمود ثابت على الحاسوب */
.viewer-list { position: fixed; inset-block: 0; inset-inline-start: 0; inset-inline-end: auto; margin: 0; width: min(340px, 88vw); height: 100dvh; max-height: none; padding: 16px; border: 0; background: var(--surface); color: var(--ink); box-shadow: var(--shadow); overflow-y: auto; touch-action: pan-y; translate: 100% 0; transition: translate 240ms var(--ease), overlay 240ms allow-discrete, display 240ms allow-discrete; }
.viewer-list::backdrop { background: rgba(15, 17, 21, .45); backdrop-filter: blur(4px); }
.viewer-list:popover-open { translate: 0 0; }
/* الفراغ بجانب القائمة المفتوحة: ضغطه يغلق القائمة فقط ولا يصل إلى الفيديو.
   (خلفية popover الضبابية لا تستقبل الضغط في المتصفحات، فكان الضغط يمر إلى يوتيوب في الشاشة الكاملة) */
.viewer-scrim { display: none; position: fixed; inset: 0; z-index: 60; margin: 0; padding: 0; border: 0; background: transparent; cursor: default; -webkit-tap-highlight-color: transparent; }
.viewer:has(.viewer-list:popover-open) .viewer-scrim, .viewer.list-open .viewer-scrim { display: block; }
@starting-style { .viewer-list:popover-open { translate: 100% 0; } }
.viewer-list-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding-bottom: 12px; margin-bottom: 8px; border-bottom: 1px solid var(--line); }
.viewer-list-head > div { display: grid; gap: 2px; }
.viewer-list-head small { color: var(--label); }
.viewer-list-close { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--ink); cursor: pointer; flex: none; }
.viewer-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.vl-item { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 8px 10px; border-radius: 14px; color: var(--ink); text-decoration: none; border: 1px solid transparent; }
.vl-item:hover { background: var(--surface-2); }
.vl-item.is-current { background: var(--brand-soft); border-color: var(--brand); }
.vl-item.is-locked { color: var(--ink-2); }
.vl-num { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); font-weight: 800; font-size: 14px; }
.vl-item.is-current .vl-num { background: var(--brand); border-color: var(--brand); color: #16181D; }
.vl-body { flex: 1; min-width: 0; display: grid; gap: 2px; }
.vl-title { font-weight: 700; line-height: 1.4; }
.vl-topics { font-size: 13px; line-height: 1.45; color: var(--label); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vl-kind { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--label); }
.vl-lock { flex: none; color: var(--ink-3); }

@media (min-width: 1024px) {
  .viewer { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
  .viewer-list:not(:popover-open) { display: block; position: sticky; top: 20px; inset: auto; width: auto; height: auto; max-height: calc(100dvh - 40px); border: 1px solid var(--line); border-radius: var(--radius-card); translate: none; opacity: 1; }
  .viewer-list:not(:popover-open) .viewer-list-close { display: none; }
  .viewer:not(.is-full) .viewer-list-btn { display: none; }
}

/* الشاشة الكاملة (أو ملء الشاشة بالتنسيق على آيفون) */
.viewer.is-full { position: fixed; inset: 0; z-index: 50; display: block; margin: 0; width: 100vw; height: 100dvh; background: #000; color: #fff; }
.viewer.is-full .viewer-main, .viewer.is-full .viewer-stage { height: 100%; }
.viewer.is-full .video-frame { height: 100%; width: 100%; aspect-ratio: auto; border-radius: 0; box-shadow: none; }
.viewer.is-full .viewer-bar { position: absolute; inset-inline: 0; top: 0; z-index: 4; margin: 0; padding: 10px 12px; padding-top: max(10px, env(safe-area-inset-top)); background: linear-gradient(rgba(0, 0, 0, .7), transparent); transition: opacity .25s ease-out, translate .25s var(--ease); }
.viewer.is-full.is-idle .viewer-bar { opacity: 0; translate: 0 -14px; pointer-events: none; }
.viewer.is-full .viewer-step, .viewer.is-full .viewer-tool { background: rgba(22, 24, 29, .7); border-color: rgba(255, 255, 255, .18); color: #fff; box-shadow: none; }
.viewer.is-full .viewer-next { background: var(--brand); color: #16181D; }
.viewer.is-full .viewer-list:not(:popover-open), .viewer.is-full .viewer-head, .viewer.is-full .lesson-text, .viewer.is-full .notice { display: none; }
.viewer-locked, .viewer-locked body { overflow: hidden; }
@media (max-width: 480px) { .viewer.is-full .viewer-step span { display: none; } }
@media (prefers-reduced-motion: reduce) { .viewer-list { transition: none; } }
/* حركات بسيطة في قارئ الفيديو (طلب الأستاذ 11 نوفمبر 2026): ضغط الأزرار، والدخول إلى الشاشة الكاملة، وظهور القائمة */
.viewer-step, .viewer-tool, .viewer-list-close { transition: transform 150ms ease-out, background-color 150ms ease-out, border-color 150ms ease-out; }
.viewer-step:active, .viewer-tool:active, .viewer-list-close:active { transform: scale(.92); }
.viewer-fs .icon { animation: viewer-pop 260ms var(--ease); }
.viewer.is-full { animation: viewer-zoom 280ms var(--ease) both; }
.viewer-list { opacity: 0; transition: translate 260ms var(--ease), opacity 200ms ease-out, overlay 260ms allow-discrete, display 260ms allow-discrete; }
.viewer-list:popover-open { opacity: 1; }
@starting-style { .viewer-list:popover-open { opacity: 0; } }
.viewer-list:popover-open .viewer-items > li { animation: viewer-item 320ms var(--ease) both; }
.viewer-list:popover-open .viewer-items > li:nth-child(2) { animation-delay: 30ms; }
.viewer-list:popover-open .viewer-items > li:nth-child(3) { animation-delay: 60ms; }
.viewer-list:popover-open .viewer-items > li:nth-child(4) { animation-delay: 90ms; }
.viewer-list:popover-open .viewer-items > li:nth-child(5) { animation-delay: 120ms; }
.viewer-list:popover-open .viewer-items > li:nth-child(n+6) { animation-delay: 150ms; }
.viewer.is-loading .video-frame { animation: viewer-swap 400ms var(--ease); }
@keyframes viewer-pop { from { transform: scale(.4) rotate(-45deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes viewer-zoom { from { transform: scale(.94); opacity: .3; } to { transform: none; opacity: 1; } }
@keyframes viewer-item { from { transform: translateX(18px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes viewer-swap { from { opacity: 1; } to { opacity: .6; } }
.viewer-tool span, .viewer-step span { white-space: nowrap; }
@media (max-width: 480px) { .viewer-step { padding: 0 12px; } .viewer-tool { padding: 0 10px; } .viewer-bar { gap: 6px; } }

/* صفحة تطبيق الهاتف */
.install-steps { margin: 0; padding: 18px 20px; padding-inline-start: 44px; display: grid; gap: 14px; line-height: 1.8; }
.install-steps li::marker { font-weight: 800; color: var(--ink); }

/* ألوان المستويات (نفس ألوان صور يوتيوب، بدرجات تُقرأ جيدًا: نص أسود على الأصفر، وأبيض على الباقي) */
.lv { --lv: var(--ink); --lv-ink: #FFFFFF; }
.lv-1am { --lv: #FBBF24; --lv-ink: #16181D; }
.lv-2am { --lv: #15803D; }
.lv-3am { --lv: #1D4ED8; }
.lv-4am { --lv: #C81E1E; }
.lv-1as { --lv: #7E22CE; }

.level-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 720px) { .level-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } }
.level-btn {
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
  min-height: 132px; height: 100%; padding: 18px 16px;
  border-radius: var(--radius-card); background: var(--lv); color: var(--lv-ink);
  text-decoration: none; box-shadow: 0 10px 24px rgba(16, 24, 40, .12);
  transition: transform 150ms ease-out, box-shadow 150ms ease-out, filter 150ms ease-out;
}
.level-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(16, 24, 40, .18); filter: brightness(1.04); }
.level-btn:active { transform: translateY(0); }
.level-btn:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.level-year { font-size: 26px; font-weight: 800; line-height: 1.25; }
.level-stage { font-size: 16px; font-weight: 700; opacity: .9; }
.level-meta { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 10px; font-size: 13px; font-weight: 500; opacity: .92; }
@media (max-width: 380px) { .level-year { font-size: 22px; } }

/* رأس صفحة المستوى بلونه */
.hero-level { border-inline-start-color: var(--lv); }
.hero-level .level-icon { background: var(--lv); color: var(--lv-ink); border: 0; }
.lv-course.hero-level .level-icon { color: var(--brand); }

/* صفحة الاشتراك: ثلاث خطوات */
.sub-steps { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 16px; counter-reset: none; }
.sub-step { padding: 20px; scroll-margin-top: 80px; }
.sub-step-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.sub-step-head h2 { margin: 0; font-size: 20px; }
.sub-step-num { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 14px; background: var(--brand); color: #16181D; font-weight: 800; font-size: 20px; }
.sub-step h3 { display: flex; align-items: center; gap: 8px; margin: 18px 0 10px; font-size: 17px; }
.sub-step h3:first-of-type { margin-top: 4px; }
.schedule-public { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.schedule-public li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 10px 12px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); }
.schedule-days { font-weight: 700; }
.lv-chip { display: inline-flex; align-items: center; padding: 3px 12px; border-radius: var(--radius-pill); background: var(--lv); color: var(--lv-ink); font-weight: 800; font-size: 14px; }
.benefits { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.benefits li { display: flex; align-items: flex-start; gap: 8px; line-height: 1.7; }
.benefits .icon { flex: none; margin-top: 4px; color: var(--success-ink); }
.plans { margin-top: 4px; }
.pay-grid { display: grid; gap: 12px; }
@media (min-width: 720px) { .pay-grid { grid-template-columns: 1fr 1fr; } }
.pay-card { padding: 16px; border-radius: 18px; border: 1px solid var(--line); background: var(--surface-2); display: grid; gap: 10px; align-content: start; }
.pay-card h3 { margin: 0; font-size: 16px; }
.pay-dl { margin: 0; display: grid; gap: 8px; }
.pay-dl div { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.pay-dl dt { color: var(--label); font-size: 14px; }
.pay-dl dd { margin: 0; font-weight: 800; font-size: 18px; letter-spacing: .5px; }
.pay-rip { margin: 0; font-weight: 800; font-size: 19px; letter-spacing: .5px; word-break: break-all; text-align: center; padding: 10px; border-radius: 12px; background: var(--surface); border: 1px dashed var(--line); }
.pay-card .btn { justify-self: start; }

/* جدول الحصص في لوحة التحكم */
.schedule-grid { display: grid; gap: 14px; }
@media (min-width: 900px) { .schedule-grid { grid-template-columns: 1fr 1fr; align-items: start; } }
.schedule-card h2 { font-size: 18px; margin: 0 0 8px; }
.schedule-list { list-style: none; margin: 0 0 12px; padding: 0; }
.schedule-list li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.schedule-list li:last-child { border-bottom: 0; }
.schedule-when { flex: 1; }
.schedule-add { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; align-items: end; }
.schedule-add .btn { grid-column: 1 / -1; justify-self: start; }
@media (max-width: 480px) { .schedule-add { grid-template-columns: 1fr 1fr; } .schedule-add .field:last-of-type { grid-column: 1 / -1; } }

/* حزم الدروس داخل المقطع */
.lesson-group { border-top: 1px solid var(--line); }
.lesson-group > summary { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 10px 16px; cursor: pointer; list-style: none; }
.lesson-group > summary::-webkit-details-marker { display: none; }
.lesson-group > summary .group-name { flex: 1; display: inline-flex; align-items: center; gap: 8px; font-weight: 700; }
.lesson-group > summary .group-name .icon { color: var(--ink-3); }
.lesson-group[open] > summary .unit-chevron { transform: rotate(180deg); }
.lesson-group > .items { padding-inline-start: 12px; }
.vl-group { margin-top: 10px; padding: 6px 4px 2px; font-size: 14px; font-weight: 800; color: var(--label); }
.vl-group span { display: inline-flex; align-items: center; gap: 6px; }
.vl-group:first-child { margin-top: 0; }

/* لوحة التحكم: الحزم */
.group-title { display: flex; align-items: center; gap: 6px; margin: 18px 0 8px; font-size: 16px; }
.group-title-muted { color: var(--label); }
.group-empty { margin: 0 0 8px; }
.lesson-pick { width: 22px; height: 22px; flex: none; accent-color: var(--brand-strong); }
.assign-bar { position: sticky; bottom: 12px; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; padding: 10px 14px; box-shadow: var(--shadow); }
.group-list { padding: 0; margin-bottom: 12px; }
.group-list > li { gap: 8px; }
.group-rename { flex: 1; display: flex; gap: 6px; min-width: 12em; }
.group-rename .input { flex: 1; }
.form-inline { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.form-inline .field { flex: 1; min-width: 14em; margin: 0; }
.unit[open] .lesson-group:not([open]) > summary .unit-chevron { transform: none; }
.group-list > li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.group-rename { min-width: 0; }
.group-rename .input { min-width: 0; width: 100%; }
.pay-rip { font-size: clamp(15px, 4.4vw, 19px); letter-spacing: 0; word-break: normal; overflow-wrap: anywhere; }
@media (max-width: 480px) { .plans { grid-template-columns: 1fr; } }
.schedule-more > summary { list-style: none; display: inline-flex; }
.schedule-more > summary::-webkit-details-marker { display: none; }
.schedule-more[open] > summary { display: none; }

/* صفحة الاشتراك: نوافذ متتالية */
.wizard { margin-top: 8px; scroll-margin-top: 80px; }
.wz-progress { list-style: none; margin: 0 0 16px; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.wz-progress li { position: relative; }
.wz-progress li + li::before { content: ""; position: absolute; top: 18px; inset-inline-end: 50%; width: 100%; height: 3px; background: var(--line); z-index: 0; }
.wz-progress li.is-done::before, .wz-progress li.is-current::before { background: var(--brand); }
.wz-progress a { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 48px; color: var(--ink-2); text-decoration: none; font-size: 13px; font-weight: 700; }
.wz-dot { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--surface); border: 2px solid var(--line); font-weight: 800; color: var(--ink-2); }
.wz-progress li.is-done .wz-dot { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.wz-progress li.is-current .wz-dot { background: var(--brand); border-color: var(--brand); color: #16181D; box-shadow: var(--shadow-brand); }
.wz-progress li.is-current a { color: var(--ink); }
.wizard:not(.wz-js) .wz-progress { display: none; }

.wz-pane { padding: 20px; border-radius: var(--radius-card); background: var(--surface); box-shadow: var(--shadow); margin-bottom: 16px; }
.wz-pane h2 { margin: 0 0 14px; font-size: 22px; outline: none; }
.wizard.wz-js .wz-pane { display: none; }
.wizard.wz-js .wz-pane.is-current { display: block; }
.wz-pane.enter-next { animation: wz-from-left 260ms var(--ease) both; }
.wz-pane.enter-back { animation: wz-from-right 260ms var(--ease) both; }
@keyframes wz-from-left { from { opacity: 0; transform: translateX(-32px); } }
@keyframes wz-from-right { from { opacity: 0; transform: translateX(32px); } }
.wz-sub { display: flex; align-items: center; gap: 8px; margin: 20px 0 10px; font-size: 17px; }
.wz-for { display: none; }
.wz-for.is-on { display: block; }
.wz-for-title { margin: 0 0 12px; }
.wz-nav { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.wz-next:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.wz-schedule { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 8px; }
.wz-schedule li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); }
.wz-day { font-weight: 800; min-width: 5.5em; }
.wz-time { font-weight: 800; font-size: 18px; }
.wz-schedule .muted { margin-inline-start: auto; }
.wz-summary { margin: 0 0 14px; padding: 10px 14px; border-radius: 14px; background: var(--brand-soft); font-weight: 700; }

/* اختيار المستوى والباقة: بطاقات قابلة للضغط */
.level-pick { position: relative; cursor: pointer; }
.level-pick input, .plan-option input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.level-check { position: absolute; inset-block-start: 10px; inset-inline-end: 10px; display: none; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.level-check .icon { width: 18px; height: 18px; }
.level-pick:has(input:checked) { outline: 4px solid var(--ink); outline-offset: 3px; }
.level-pick:has(input:checked) .level-check, .plan-option:has(input:checked) .level-check { display: grid; }
.level-pick:has(input:focus-visible), .plan-option:has(input:focus-visible) { outline: 3px solid var(--brand-strong); outline-offset: 3px; }
.plan-pick { display: grid; gap: 12px; }
@media (min-width: 720px) { .plan-pick { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.plan-option { position: relative; cursor: pointer; border: 2px solid var(--line); }
.plan-option:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
@media (prefers-reduced-motion: reduce) { .wz-pane.enter-next, .wz-pane.enter-back { animation: none; } }

/* لوحة التحكم: باقات المستوى */
.plan-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.plan-row { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: start; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.plan-row:last-child { border-bottom: 0; }
.plan-row .unit-num { grid-row: span 3; }
.wz-note { display: flex; align-items: flex-start; gap: 6px; } .wz-note .icon { flex: none; margin-top: 3px; }

/* «سأدفع لاحقًا، احجز لي» */
.hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wz-deadline { margin: 14px 0 6px; padding: 10px 12px; border-radius: 14px; background: var(--brand-soft); }

/* لوحة التحكم: طلبات الاشتراك */
.request-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
@media (min-width: 900px) { .request-list { grid-template-columns: 1fr 1fr; } }
.request-card { padding: 16px; display: grid; gap: 8px; }
.request-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.request-head .muted { margin-inline-start: auto; }
.request-main { margin: 0; line-height: 1.7; }
.request-card > p { margin: 0; }
.request-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.request-alert { display: flex; align-items: center; gap: 12px; padding: 14px 16px; text-decoration: none; color: inherit; border-inline-start: 6px solid var(--brand); }
.pay-dl dd[dir="ltr"] { overflow-wrap: anywhere; font-size: clamp(15px, 4.4vw, 18px); }
/* الدورات: أسود ثابت (لا يتبع لون النص في الوضع الليلي)، مع حد ظاهر على الخلفية الداكنة */
.lv-course { --lv: #16181D; --lv-ink: #FFFFFF; }
.lv-course.level-btn, .lv-course.lv-chip { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }

/* ---------- واجهة التطبيق: رئيسية التلميذ والولي، والحصص (النموذج المعتمد) ---------- */
.dash-greet { display: grid; gap: 4px; margin: 8px 0 18px; }
.dash-greet h1 { font-size: 30px; font-weight: 800; }
.dash-greet p { margin: 0; }
.dash-greet-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dash-label { color: var(--ink-2); font-size: 14px; }
.level-pill { display: inline-flex; align-items: center; padding: 3px 12px; border-radius: var(--radius-pill); background: var(--lv); color: var(--lv-ink); font-size: 14px; font-weight: 800; white-space: nowrap; }
.dash-card { padding: 18px; margin-bottom: 16px; display: grid; gap: 14px; }
.dash-card p { margin: 0; }
.dash-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dash-head h2 { font-size: 20px; font-weight: 800; }
.dash-more { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; font-size: 14px; font-weight: 700; color: var(--ink-2); text-decoration: none; }
.dash-section { margin: 4px 0 16px; display: grid; gap: 12px; }
.dash-section h2 { font-size: 20px; font-weight: 800; }

/* بطاقة الحصة القادمة: داكنة في الوضعين */
.dash-hero { position: relative; overflow: hidden; display: grid; gap: 12px; margin-bottom: 16px; padding: 20px; border-radius: var(--radius-card); background: #16181D; color: #FFFFFF; text-decoration: none; box-shadow: var(--shadow); }
:root[data-theme="dark"] .dash-hero { background: #232730; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .dash-hero { background: #232730; } }
.dash-hero-stripes { position: absolute; top: -20px; inset-inline-end: 24px; width: 44px; height: 96px; pointer-events: none;
  background: linear-gradient(90deg, rgba(251,191,36,.22) 0 14px, transparent 14px 26px, rgba(251,191,36,.12) 26px 40px, transparent 40px); transform: rotate(35deg); border-radius: 8px; }
.dash-hero-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dash-chip { padding: 3px 12px; border-radius: var(--radius-pill); background: rgba(251,191,36,.16); color: #FBBF24; font-size: 14px; font-weight: 700; }
.dash-hero-muted { color: #C9CDD6; font-size: 15px; }
.dash-hero-title { font-size: 24px; font-weight: 800; line-height: 1.3; }
.dash-count { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.dash-count > span { display: grid; justify-items: center; padding: 8px 4px; border-radius: 14px; background: rgba(255,255,255,.08); color: #C9CDD6; font-size: 13px; }
.dash-count b { color: #FFFFFF; font-size: 26px; font-weight: 800; line-height: 1.2; }
.dash-hero-btn { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; border-radius: var(--radius-btn); background: #FBBF24; color: #16181D; font-weight: 800; font-size: 17px; box-shadow: 0 8px 22px rgba(251,191,36,.3); }
.dash-hero:hover .dash-hero-btn { background: #F59E0B; }

/* التقدم */
.dash-progress { display: flex; align-items: center; gap: 16px; }
.dash-progress-text { display: grid; gap: 2px; min-width: 0; }
.dash-progress-title { font-size: 20px; font-weight: 800; line-height: 1.35; }
.ring { position: relative; flex: none; display: grid; place-items: center; }
.ring svg { display: block; }
.ring-track { stroke: var(--line); }
.ring-bar { stroke: #FBBF24; }
.ring-value { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 800; font-size: 20px; }
.ring-72 .ring-value { font-size: 17px; }
.dash-continue { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 14px; border-radius: var(--radius-btn); background: var(--surface-2); border: 1px solid var(--line); font-weight: 700; font-size: 15px; text-decoration: none; }
.dash-continue-text { flex: 1; min-width: 0; }
.dash-play { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 50%; background: #FBBF24; color: #16181D; }

/* المربعات */
.dash-tiles { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 720px) { .dash-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.dash-tile { position: relative; height: 100%; display: grid; align-content: start; gap: 8px; padding: 16px; text-decoration: none; border-radius: 22px; }
.dash-tile strong { font-size: 16px; font-weight: 800; line-height: 1.35; }
.dash-badge { position: absolute; top: 14px; inset-inline-end: 14px; padding: 1px 10px; border-radius: var(--radius-pill); background: #FBBF24; color: #16181D; font-size: 12px; font-weight: 800; }
.dash-tile .dash-num { font-size: 28px; line-height: 1.15; }

/* هذا الأسبوع */
.week-strip { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; text-align: center; }
.week-strip li { display: grid; justify-items: center; gap: 4px; }
.week-name { font-size: 12px; color: var(--ink-2); }
.week-num { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; font-weight: 800; }
.week-strip .is-today .week-num { background: #FBBF24; color: #16181D; }
.week-dot { width: 7px; height: 7px; border-radius: 50%; }
.week-strip .has-live .week-dot { background: #FBBF24; }
.week-strip .is-today.has-live .week-dot { background: var(--ink); }
.dash-legend, .cal-legend { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2); }
.legend-dot { width: 8px; height: 8px; border-radius: 50%; background: #FBBF24; }

/* التنبيهات */
.dash-alert-warn { background: var(--brand-soft); box-shadow: none; }
.dash-alert-danger { background: var(--danger-soft); box-shadow: none; }
.dash-alert-row { display: flex; align-items: flex-start; gap: 12px; }
.dash-alert-row > span:last-child { display: grid; gap: 4px; }
.dash-alert-icon { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 14px; background: var(--surface); color: var(--ink); }
.dash-alert-danger .dash-alert-icon { color: var(--danger-ink); }
.dash-actions { display: grid; gap: 8px; }
.dash-sub .pill { justify-self: start; }

/* أزرار الأبناء */
.kid-switch { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 16px; }
.kid-btn { position: relative; display: flex; align-items: center; gap: 10px; min-height: 64px; padding: 8px 12px; border-radius: 18px; background: var(--surface); box-shadow: var(--shadow); border: 2px solid transparent; text-decoration: none; }
.kid-btn > span:nth-child(2) { display: grid; min-width: 0; }
.kid-btn strong { font-size: 15px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kid-btn small { font-size: 13px; color: var(--ink-2); }
.kid-btn.is-on { border-color: #FBBF24; }
.kid-avatar { display: grid; place-items: center; width: 42px; height: 42px; flex: none; border-radius: 50%; background: var(--lv); color: var(--lv-ink); font-weight: 800; font-size: 18px; }
.kid-avatar.lv-course { background: #16181D; color: #FFFFFF; }
.kid-flag { position: absolute; top: 8px; inset-inline-end: 8px; width: 10px; height: 10px; border-radius: 50%; background: var(--danger); border: 2px solid var(--surface); }

/* صفحة الحصص: التقويم */
.dash-page-head { margin: 8px 0 16px; }
.cal { margin-bottom: 16px; padding: 16px 12px; border-radius: 26px; background: #16181D; color: #FFFFFF; box-shadow: var(--shadow); display: grid; gap: 10px; }
:root[data-theme="dark"] .cal { background: #232730; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cal { background: #232730; } }
.cal-head { display: flex; align-items: center; justify-content: space-between; font-size: 20px; }
.cal-nav { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: rgba(255,255,255,.08); color: #FFFFFF; text-decoration: none; }
span.cal-nav { background: none; }
.cal-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); row-gap: 4px; justify-items: center; }
.cal-names li { font-size: 12px; color: #C9CDD6; }
.cal-day { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: #FFFFFF; text-decoration: none; font-weight: 500; }
.cal-day.is-today { box-shadow: inset 0 0 0 2px #FBBF24; font-weight: 800; }
.cal-day.is-sel { background: #FBBF24; color: #16181D; font-weight: 800; box-shadow: none; }
.cal-day.has-live::after { content: ""; position: absolute; bottom: 4px; width: 6px; height: 6px; border-radius: 50%; background: #FBBF24; }
.cal-day.is-sel.has-live::after { background: #16181D; }
.cal-legend { color: #C9CDD6; padding-inline: 6px; }
.dash-session-row { display: flex; align-items: center; gap: 12px; }
.dash-session-text { flex: 1; display: grid; gap: 2px; }
@media (max-width: 360px) { .cal-day { width: 38px; height: 38px; } }

/* الشريط السفلي داخل التطبيق */
.tabbar { position: fixed; inset-inline: 0; bottom: 0; z-index: 30; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: end;
  padding: 6px 6px calc(8px + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--line); box-shadow: 0 -6px 24px rgba(16,24,40,.06); }
.tab { display: grid; justify-items: center; gap: 2px; min-height: 52px; align-content: center; font-size: 12px; font-weight: 500; color: var(--ink-2); text-decoration: none; }
.tab[aria-current="page"] { color: var(--ink); font-weight: 800; }
.tab[aria-current="page"]::after { content: ""; width: 18px; height: 3px; border-radius: 3px; background: #FBBF24; }
.tab-main { margin-top: -28px; }
.tab-main::after { display: none; }
.tab-main-btn { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: #FBBF24; color: #16181D; border: 4px solid var(--bg); box-shadow: 0 8px 22px rgba(251,191,36,.4); }
.has-tabbar .site-footer { padding-bottom: 100px; }
.has-tabbar .content { padding-bottom: 24px; }
@media (min-width: 1024px) { .tabbar { display: none; } .has-tabbar .site-footer { padding-bottom: revert; } }

/* زر «دخول الحصة» داخل بطاقة الحصة */
.join-form { margin: 0; }
.dash-join { width: 100%; border: 0; cursor: pointer; font: inherit; font-weight: 800; font-size: 17px; }
.dash-join:hover { background: #F59E0B; }
.dash-hero-link { justify-self: center; display: inline-flex; align-items: center; min-height: 44px; color: #C9CDD6; font-size: 14px; font-weight: 700; }
.live-list li { flex-wrap: wrap; }

/* الحصص الإضافية والمؤجلة والملغاة */
.change-tag { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: var(--radius-pill); background: rgba(251,191,36,.16); color: #B45309; font-size: 13px; font-weight: 700; }
.dash-hero .change-tag { justify-self: start; color: #FBBF24; }
:root[data-theme="dark"] .change-tag { color: #FBBF24; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .change-tag { color: #FBBF24; } }
.dash-session-text .change-tag { justify-self: start; margin-top: 4px; }
.dash-session-off { box-shadow: none; background: var(--surface-2); border: 1px dashed var(--line); }
.cal-day.has-change { box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); }
.live-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-inline-start: auto; }
.live-more > summary { list-style: none; }
.live-more > summary::-webkit-details-marker { display: none; }
.live-more[open] { flex-basis: 100%; }
.live-sub { font-size: 16px; margin-top: 8px; }
.live-extra { margin-bottom: 4px; }

/* الحضور */
.att-sum { display: flex; flex-wrap: wrap; gap: 6px; }
.att-list li { flex-wrap: wrap; }
.att-name { flex: 1; min-width: 160px; display: grid; }
.att-select { width: auto; min-width: 140px; min-height: 44px; }
.att-bar { display: block; width: 100%; height: 8px; }
.att-bar-track { fill: var(--line); }
.att-bar-fill { fill: #FBBF24; }
.att-rows { list-style: none; margin: 0; padding: 0; display: grid; }
.att-rows li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); }
.att-rows li > span:first-child { display: grid; }
a.dash-stat { text-decoration: none; }

/* تيليجرام */
.tg-steps { margin: 8px 0; padding-inline-start: 20px; display: grid; gap: 6px; }
.tg-code { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tg-code code { font-size: 20px; font-weight: 800; padding: 8px 14px; border-radius: 12px; background: var(--surface-2); border: 1px dashed var(--line); letter-spacing: 1px; }
.ltr-code { display: inline-block; direction: ltr; unicode-bidi: isolate; }

/* مجموعات تيليجرام: الأزرار تنزل تحت الاسم في الهاتف */
.tg-groups li { flex-wrap: wrap; }
.tg-info { flex: 1 1 200px; display: grid; gap: 2px; min-width: 0; }
.tg-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* المداخيل */
.inc-periods { margin: 0 0 16px; }
.table-wrap { position: relative; overflow-x: auto; margin: 0 -4px; }
.inc-table { width: 100%; border-collapse: collapse; min-width: 560px; font-size: 15px; }
.inc-table th, .inc-table td { text-align: start; padding: 10px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.inc-table thead th { color: var(--label); font-size: 13px; font-weight: 700; }
.inc-table tbody th { font-weight: 700; }
.inc-table tfoot th, .inc-table tfoot td { border-bottom: 0; font-weight: 800; }
.inc-amount { display: grid; gap: 4px; min-width: 120px; }
.inc-bar { display: block; height: 8px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); overflow: hidden; }
.inc-bar-fill { display: block; height: 100%; background: var(--brand); }
.inc-w-0 { width: 0%; }
.inc-w-5 { width: 5%; }
.inc-w-10 { width: 10%; }
.inc-w-15 { width: 15%; }
.inc-w-20 { width: 20%; }
.inc-w-25 { width: 25%; }
.inc-w-30 { width: 30%; }
.inc-w-35 { width: 35%; }
.inc-w-40 { width: 40%; }
.inc-w-45 { width: 45%; }
.inc-w-50 { width: 50%; }
.inc-w-55 { width: 55%; }
.inc-w-60 { width: 60%; }
.inc-w-65 { width: 65%; }
.inc-w-70 { width: 70%; }
.inc-w-75 { width: 75%; }
.inc-w-80 { width: 80%; }
.inc-w-85 { width: 85%; }
.inc-w-90 { width: 90%; }
.inc-w-95 { width: 95%; }
.inc-w-100 { width: 100%; }
.inc-months { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.inc-months li { display: grid; grid-template-columns: 80px 1fr auto; gap: 10px; align-items: center; }
.inc-months li.on a { font-weight: 800; color: var(--ink); }
.inc-months a { color: var(--ink-2); text-decoration: none; }
.inc-months a:hover { text-decoration: underline; }

/* حسابات الأبناء */
.creds-who { margin: 14px 0 4px; font-size: 16px; }
.kid-login { display: grid; gap: 8px; justify-items: start; padding: 12px 14px 14px; border-bottom: 1px dashed var(--line); }
.kid-login p { margin: 0; }

/* صفحة الاشتراك: الأبناء والباقة والمبلغ */
.sub-form { display: grid; gap: 16px; }
.sub-form h2 { display: flex; align-items: center; gap: 10px; }
.sub-n { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--brand); color: var(--ink); font-size: 15px; font-weight: 800; flex: none; }
.sub-form [data-add-kid] { justify-self: start; }
/* الأبناء في صفحة الاشتراك: بطاقة هادئة لكل ابن، الاسم والمستوى في سطر واحد، بلا أشكال دائرية */
.sub-family-fields { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 10px; }
.form-card .sub-family-fields .field { margin: 0; align-content: start; }
.sub-family-fields .field label { font-size: 14px; }
.sub-family { display: flex; align-items: center; gap: 6px; margin: 0; }
.sub-kids-title { margin: 6px 0 -4px; font-weight: 700; font-size: 14px; }
.sub-kids { display: grid; gap: 10px; }
.sub-kid { display: grid; gap: 8px; padding: 10px; border-radius: 18px; background: var(--surface-2); }
.sub-kid[hidden] { display: none; }
.sub-kid-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(118px, 132px) auto; gap: 8px; align-items: center; }
.sub-kid-fields .input { min-width: 0; }
.sub-kid-fields .icon-btn[hidden] { display: none; }
.sub-kid-remove { border: 0; background: transparent; color: var(--ink-2); }
.sub-kid-courses { border: 0; margin: 0; padding: 0; display: grid; gap: 6px; min-width: 0; }
.sub-kid-courses legend { padding: 0; margin-bottom: 6px; font-weight: 700; font-size: 13px; color: var(--ink-2); }
.chip-checks { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-check { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 12px; border-radius: 12px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); font-size: 14px; font-weight: 600; cursor: pointer; }
.chip-check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip-check:has(input:checked) { background: var(--brand-soft); box-shadow: inset 0 0 0 2px var(--brand); }
.chip-check:has(input:focus-visible) { outline: 3px solid var(--brand-strong); outline-offset: 2px; }
.course-price { white-space: nowrap; font-weight: 700; font-size: 13px; color: var(--ink-2); }
.sub-fixed { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0; }
.sub-fixed strong { font-size: 17px; }
.places-note { margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); font-size: 14px; font-weight: 600; }
.places-note.is-full { background: var(--danger-soft); color: var(--danger-ink); }
.sub-pay-title { margin: 18px 0 10px; font-size: 16px; }
/* خطوات الاشتراك (sw-): دوائر صغيرة في الأعلى تصفرّ كلما اكتملت مرحلة، وشريط المبلغ و«مواصلة» ثابت في الأسفل */
.sw-dots { display: flex; justify-content: center; align-items: center; list-style: none; margin: 0 0 12px; padding: 0; }
.sw-dots[hidden] { display: none; }
.sw-dots li { display: flex; align-items: center; }
.sw-dots li + li::before { content: ""; width: 22px; height: 2px; background: var(--line); }
.sw-dots li:has(.is-done) + li::before { background: var(--brand); }
.sw-dot { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; background: transparent; font: inherit; cursor: pointer; }
.sw-dot span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--line); background: var(--surface); color: var(--ink-3); font-size: 13px; font-weight: 800; }
.sw-dot:disabled { cursor: default; }
.sw-dot.is-current span { border-color: var(--brand-strong); color: var(--ink); }
.sw-dot.is-done span { border-color: var(--brand); background: var(--brand); color: #16181D; }
.sub-form.is-wizard { padding-bottom: 130px; }
.sub-form.is-wizard .sw-step[hidden] { display: none; }
.sub-head h1 { margin-bottom: 4px; }
.sw-bar { position: fixed; inset-inline: 0; bottom: 0; z-index: 25; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--surface); box-shadow: 0 -1px 0 rgba(16,24,40,.06), 0 -8px 20px rgba(16,24,40,.06); }
.sw-bar[hidden] { display: none; }
.has-tabbar .sw-bar { bottom: calc(64px + env(safe-area-inset-bottom)); padding-bottom: 10px; }
@media (min-width: 1024px) { .has-tabbar .sw-bar { bottom: 0; } }
.sw-bar-row { display: flex; align-items: center; gap: 8px; max-width: 720px; margin: 0 auto; }
.sw-sum { display: grid; margin: 0; margin-inline-end: auto; line-height: 1.2; min-width: 0; }
.sw-sum small { font-size: 12px; color: var(--ink-2); }
.sw-sum strong { font-size: 18px; white-space: nowrap; }
.sw-bar .btn { min-height: 44px; padding: 0 16px; }
.sw-bar [data-back][hidden] { display: none; }
.sw-msg { max-width: 720px; margin: 0 auto 6px; color: var(--danger-ink); font-weight: 700; font-size: 14px; }
.sw-msg:empty { display: none; }
.sw-done { text-align: center; }
.sw-done h2 { justify-content: center; }
.sw-done .btn-block { margin: 6px 0; }
.my-booking { margin: 0 0 12px; }
.my-booking[hidden] { display: none; }
.plan-pick-2 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.quote-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.quote-lines li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 0; border-bottom: 1px dashed var(--line); }
.quote-lines li bdi { white-space: nowrap; font-weight: 700; }
.quote-lines .quote-off { color: var(--danger-ink); }
.quote-total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 10px 0 0; padding: 14px 16px; border-radius: 16px; background: var(--brand-soft); font-size: 17px; }
.quote-total strong { font-size: 24px; white-space: nowrap; }
.notice-promo { background: var(--brand-soft); border-color: #F8DE95; }
.benefits-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.check-grid { display: flex; flex-wrap: wrap; gap: 8px 16px; border: 0; padding: 0; margin: 0; }
.check-grid legend { font-weight: 700; font-size: 14px; margin-bottom: 6px; }
.price-table input { width: 120px; max-width: 100%; }

/* العائلات: تنفتح في مكانها */
.family-x { padding: 0; overflow: hidden; }
.family-x > summary { list-style: none; cursor: pointer; }
.family-x > summary::-webkit-details-marker { display: none; }
.family-x > summary.family-row { box-shadow: none; border: 0; border-radius: 0; }
.family-x[open] > summary .unit-chevron { transform: rotate(180deg); }
.family-x .unit-chevron { flex: none; color: var(--ink-3); transition: transform .2s; }
.family-peek { padding: 4px 16px 16px; display: grid; gap: 12px; border-top: 1px solid var(--line); }
.peek-kids { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.peek-kids li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--line); }
.peek-main { display: grid; gap: 2px; flex: 1; min-width: 0; }
.peek-main small { color: var(--ink-2); }
.peek-facts { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; margin: 0; }
.peek-facts span { display: inline-flex; align-items: center; gap: 4px; }
@media (prefers-reduced-motion: reduce) { .family-x .unit-chevron { transition: none; } }

/* الإضافة تنفتح في مكانها (زر أصفر)، والنتائج لكل تلميذ */
.add-inline > summary { list-style: none; display: inline-flex; width: auto; }
.add-inline > summary::-webkit-details-marker { display: none; }
.add-inline[open] > summary { margin-bottom: 12px; }
.add-inline > .card { margin: 0; }
.result-groups { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.result-group { padding: 0; overflow: hidden; }
.result-group > summary { display: flex; align-items: center; gap: 12px; padding: 12px 16px; cursor: pointer; list-style: none; }
.result-group > summary::-webkit-details-marker { display: none; }
.result-group[open] > summary .unit-chevron { transform: rotate(180deg); }
.result-attempts { border-top: 1px solid var(--line); border-radius: 0; box-shadow: none; margin: 0; }
.mine-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 12px; }

.plan-add { font-weight: 800; font-size: 17px; color: var(--ink); min-height: 1.4em; }
.course-check { align-items: center; }
.quote-soon { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0 0; padding: 12px 14px; border-radius: 14px; background: var(--brand-soft); color: var(--ink); }
.quote-soon small { color: var(--ink-2); font-size: 13px; }
.quote-deadline .icon, .quote-soon .icon { flex: none; margin-top: 3px; }
#sub-pay [data-contact] { margin-top: 4px; }
/* «نافذة الضباب» (src/sheet.ts، public/sheet.js): خيارات فوق الصفحة بخلفية ضبابية؛ الضغط على الفراغ يغلقها */
.blur-sheet { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: var(--ink); display: none; }
.blur-sheet[open] { display: grid; place-items: center; }
.blur-sheet::backdrop { background: rgba(16, 18, 24, .38); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.sheet-tiles { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; padding: 24px 16px; max-width: 460px; }
.sheet-tile { display: grid; justify-items: center; align-content: center; gap: 10px; width: 128px; min-height: 128px; padding: 18px 10px 14px; border-radius: 26px; background: var(--surface); box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .35); color: var(--ink); font-weight: 800; font-size: 16px; text-decoration: none; text-align: center; }
.sheet-tile:active { transform: scale(.97); }
.sheet-tile .app-logo { width: 60px; height: 60px; }
.tile-ic { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 18px; }
.tile-ic .icon { width: 28px; height: 28px; }
.tile-ic-dark { background: #16181D; color: #fff; }
.tile-ic-brand { background: var(--brand); color: #16181D; }
.tile-ic-green { background: #16A34A; color: #fff; }
.tile-ic-blue { background: #2563EB; color: #fff; }
.sheet-card { width: min(340px, calc(100vw - 32px)); padding: 20px; border-radius: 24px; background: var(--surface); box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .35); }
.sheet-card p { margin: 0 0 16px; font-weight: 700; font-size: 16px; }
.sheet-card-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.sheet-toast { position: fixed; inset-inline: 16px; bottom: calc(96px + env(safe-area-inset-bottom)); z-index: 60; margin: 0 auto; max-width: 420px; padding: 12px 16px; border-radius: 14px; background: #16181D; color: #fff; font-weight: 700; text-align: center; opacity: 0; transform: translateY(10px); transition: opacity .2s, transform .2s; pointer-events: none; }
.sheet-toast.is-on { opacity: 1; transform: none; }
.quote-deadline { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0 0; padding: 12px 14px; border-radius: 14px; background: var(--danger-soft); color: var(--danger-ink); font-weight: 600; }
.invoice-box { display: grid; gap: 8px; justify-items: start; margin: 12px 0 0; padding: 14px; border-radius: 16px; background: var(--surface-2); }
.invoice-box .muted { margin: 0; }

/* تيليجرام: التحكم في رسائل البوت وسجلها */
.tg-kinds { list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 8px; }
.tg-pause { padding: 10px 12px; border-radius: 12px; background: var(--surface-2, #F4F4F6); margin-bottom: 4px; }
.tg-log .tg-text p { white-space: pre-line; margin: 6px 0 0; }
.tg-log li.tg-deleted { opacity: 0.55; }
.tell-box { border: 2px solid var(--brand, #FBBF24); }
.tell-box textarea { width: 100%; margin: 8px 0; white-space: pre-wrap; }

/* صفحة المستوى: ثلاث خانات (مخزن الدروس، بنك الملفات، بنك الاختبارات) وشريط التنقل بينها */
.lv-hero { display: flex; align-items: center; gap: 14px; }
.lv-hero h1 { margin: 0; }
.lv-hero-text { display: grid; gap: 8px; justify-items: start; }
.lv-tiles { display: grid; gap: 14px; margin-top: 16px; }
@media (min-width: 760px) { .lv-tiles { grid-template-columns: repeat(3, 1fr); } }
.lv-tile { position: relative; display: flex; align-items: center; gap: 16px; padding: 20px 18px; min-height: 116px; border-radius: var(--radius-card, 24px); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); color: var(--ink); text-decoration: none; transition: border-color .2s ease-out, transform .2s ease-out; }
.lv-tile:hover { border-color: var(--brand); transform: translateY(-1px); }
.lv-tile:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.lv-ic { flex: none; width: 60px; height: 60px; display: grid; place-items: center; border-radius: 18px; background: var(--brand); color: #16181D; }
.lv-ic .icon { width: 28px; height: 28px; }
.lv-tile.files .lv-ic { background: #16181D; color: #FBBF24; border: 1px solid var(--line); }
.lv-tile.tests .lv-ic { background: var(--success-soft); color: var(--success); }
.lv-tile-body { flex: 1; min-width: 0; display: grid; gap: 4px; }
.lv-tile-body strong { font-size: 18px; font-weight: 800; }
.lv-tile-body span { font-size: 14px; color: var(--ink-2); }
.lv-arrow { flex: none; transform: rotate(90deg); color: var(--ink-3); }
.lv-badge { position: absolute; inset-block-start: 10px; inset-inline-end: 14px; background: var(--brand); color: #16181D; font-weight: 800; font-size: 12px; line-height: 1.6; border-radius: 999px; padding: 0 10px; }
.lv-back { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; color: var(--ink-2); text-decoration: none; font-size: 14px; font-weight: 600; }
.lv-back-arrow { transform: rotate(-90deg); }
.lv-tabs { display: flex; gap: 4px; padding: 5px; margin: 4px 0 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; position: sticky; top: 8px; z-index: 5; box-shadow: var(--shadow); }
.lv-tabs a { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; border-radius: 999px; font-weight: 700; font-size: 14px; color: var(--ink-2); text-decoration: none; }
.lv-tabs a[aria-current="page"] { background: var(--brand); color: #16181D; }
.lv-tabs .icon { width: 18px; height: 18px; }
.lv-thumb { flex: none; width: 44px; height: 44px; border-radius: 14px; background: #16181D; display: grid; place-items: center; color: #FBBF24; border: 1px solid var(--line); }
.lv-thumb .icon { width: 20px; height: 20px; }
.lv-thumb-locked { background: var(--surface-2); color: var(--ink-3); border: 1px solid var(--line); }
.lv-row-actions { display: flex; gap: 6px; flex: none; }
.lv-score { font-weight: 800; }
.lv-group { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: var(--ink-2); margin: 14px 4px 4px; }
@media (prefers-reduced-motion: reduce) { .lv-tile { transition: none; } .lv-tile:hover { transform: none; } }

/* الشريط السفلي ثابت أثناء التنقل: لا يدخل في حركة تبديل الصفحة (public/shell.js وحركة المتصفح بين الصفحات) */
@view-transition { navigation: auto; }
.tabbar { view-transition-name: tabbar; }
.topbar { view-transition-name: topbar; }
::view-transition-old(root) { animation: 140ms ease-out both vt-out; }
::view-transition-new(root) { animation: 200ms ease-out both vt-in; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(8px); } }
#main:focus { outline: none; }
/* العلامة الصفراء تنزلق إلى الزر المضغوط */
.tabbar.has-ind .tab[aria-current="page"]::after { visibility: hidden; }
.tab-ind { position: absolute; left: 0; top: 0; width: 24px; height: 3px; border-radius: 3px; background: #FBBF24; transition: transform 260ms cubic-bezier(.3, .7, .2, 1), opacity 160ms ease-out; pointer-events: none; }
.tab-ind.off { opacity: 0; }
.tab-ind.no-anim { transition: none; }
.tab-pop .icon { animation: tab-pop 260ms ease-out; }
@keyframes tab-pop { 40% { transform: translateY(-3px) scale(1.12); } }
.tab .icon { transition: color 160ms ease-out; }
.tab[aria-current="page"] .icon { color: var(--ink); }
.tab-main[aria-current="page"] .tab-main-btn { box-shadow: 0 0 0 4px var(--brand-soft), 0 8px 22px rgba(251,191,36,.45); }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  .tab-ind { transition: none; }
  .tab-pop .icon { animation: none; }
}
/* «.tab» في الشريط السفلي غير «.tab» في تبويبات الصفحات: لا خلفية رمادية عالقة بعد اللمس */
.tabbar .tab, .tabbar .tab:hover { background: transparent; -webkit-tap-highlight-color: transparent; }

/* أسطر صفحة المستوى: أيقونة صغيرة، العنوان في سطرين على الأكثر، والعلامات تحته */
.lv-item { align-items: flex-start; gap: 12px; padding-block: 10px; }
.lv-item .lv-thumb, .lv-item .lv-ic-sm { margin-top: 2px; }
.lv-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.5; font-weight: 600; }
.lv-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; }
.lv-meta .item-kind { font-size: 13px; }
.pill-xs { padding: 0 8px; font-size: 12px; line-height: 1.7; }
.pill-xs .icon-sm { width: 13px; height: 13px; }
.btn-icon { width: 40px; min-height: 40px; padding: 0; justify-content: center; border-radius: 12px; }
.lv-row-actions { align-self: center; }
/* جدول الأسعار على الهاتف: لا عرض أدنى، والخانات تملأ العمود */
.price-table { min-width: 0; }
.price-table input { width: 100%; min-width: 84px; }

/* صفحة «الأمان» */
.sec-shown { border: 2px solid var(--brand); }
.sec-key { font-size: clamp(15px, 4.6vw, 22px); font-weight: 800; text-align: center; padding: 14px 8px; border-radius: 14px; background: var(--surface-2); border: 1px dashed var(--ink-3); white-space: nowrap; overflow-x: auto; }
.sec-codes { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; font-weight: 700; font-size: 17px; }
.sec-codes li { text-align: center; padding: 8px; border-radius: 10px; background: var(--surface-2); }
.sec-steps { padding-inline-start: 20px; display: grid; gap: 10px; }
.sec-confirm { margin-top: 8px; }
@media print { .sec-shown { border: 0; } }

/* ---------- منظّم الدروس (لوحة التحكم): التحديد المتعدد والسحب والإفلات ---------- */
.org-units { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.org-unit { padding: 0; overflow: hidden; }
.org-unit-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; min-height: 60px; cursor: pointer; list-style: none; }
.org-unit-head::-webkit-details-marker { display: none; }
.org-unit-text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.org-unit-text a { font-weight: 800; color: var(--ink); text-decoration: none; }
.org-unit-text small { color: var(--ink-2); font-size: 13px; }
.org-unit-box[open] .unit-chevron { transform: rotate(180deg); }
.org-body { border-top: 1px solid var(--line); padding: 6px 10px 10px; }
.org-sec { margin-top: 6px; }
.org-sec-head { display: flex; align-items: center; gap: 8px; padding: 8px 6px 4px; font-weight: 700; font-size: 14px; color: var(--ink-2); }
.org-sec-head-plain { font-weight: 600; }
.org-all { flex: 1; display: flex; align-items: center; gap: 8px; cursor: pointer; min-height: 40px; }
.org-all input, .org-pick { width: 24px; height: 24px; accent-color: #F59E0B; flex: none; margin: 0; }
.org-group { border: 1px solid var(--line); border-radius: 16px; padding: 0 6px 6px; background: var(--surface-2); margin-top: 10px; }
.org-list { list-style: none; margin: 0; padding: 0; min-height: 8px; border-radius: 12px; }
.org-list:empty { min-height: 48px; border: 1.5px dashed var(--line); display: grid; place-items: center; }
.org-list:empty::before { content: "لا دروس: اسحب درسًا إلى هنا"; color: var(--ink-3); font-size: 13px; }
.org-item { display: flex; align-items: center; gap: 10px; padding: 6px 6px; min-height: 52px; border-bottom: 1px solid var(--line); background: var(--surface); border-radius: 10px; }
.org-group .org-item { background: var(--surface-2); }
.org-item:last-child { border-bottom: 0; }
.org-title { flex: 1; min-width: 0; color: var(--ink); text-decoration: none; font-weight: 600; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.org-tags { display: flex; gap: 4px; flex: none; }
.org-handle { flex: none; display: none; width: 40px; height: 40px; place-items: center; border-radius: 10px; color: var(--ink-3); cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.org.js .org-handle { display: grid; }
.org-handle:hover { background: var(--surface-2); color: var(--ink); }
.org-handle .icon { width: 20px; height: 20px; }
.org-unit-handle, .org-group-handle { width: 36px; height: 36px; }
.org-item.is-picked { background: var(--brand-soft); }
.org-ghost { opacity: .35; background: var(--brand-soft) !important; outline: 2px dashed #F59E0B; outline-offset: -2px; }
.org-chosen { box-shadow: 0 10px 28px rgba(16,24,40,.18); }
.org-dragging-item, .sortable-fallback { opacity: .95 !important; transform: rotate(-1.5deg); box-shadow: 0 16px 40px rgba(16,24,40,.25); border-radius: 12px; }
.org.dragging { user-select: none; -webkit-user-select: none; }
.org-drop { list-style: none; margin: 0; padding: 0; display: none; }
/* «أفلت هنا» تحت المقاطع المغلقة فقط: المفتوحة يُفلت في قوائمها مباشرة، ولا تتحرك الصفحة تحت الإصبع */
.org.dragging-lesson .org-unit-box:not([open]) + .org-drop { display: grid; place-items: center; min-height: 52px; margin: 0 12px 12px; border: 2px dashed #F59E0B; border-radius: 14px; background: var(--brand-soft); }
.org.dragging-lesson .org-unit-box:not([open]) + .org-drop::before { content: "أفلت هنا: إلى آخر هذا المقطع"; font-size: 13px; font-weight: 700; color: var(--ink); }
.org-drop .org-item { display: none; }
.org-unit.org-flash { outline: 3px solid #F59E0B; transition: outline-color .8s ease-out; }
.org-unit-links { margin: 10px 4px 0; font-size: 13px; }
.org-status { min-height: 1.4em; margin: 0 0 8px; font-size: 14px; font-weight: 700; }
.org-status[data-kind="ok"] { color: var(--success); }
.org-status[data-kind="error"] { color: var(--danger); }
.org-status[data-kind="busy"] { color: var(--ink-2); }
/* الشريط السفلي: بدون JavaScript بطاقة عادية؛ ومعه يظهر ثابتًا أسفل الشاشة عند التحديد فقط */
.org-bar { margin-top: 14px; padding: 10px 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.org-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.org-bar.js { position: fixed; inset-inline: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 60; margin: 0; box-shadow: 0 16px 40px rgba(16,24,40,.22); border: 1px solid var(--line); transform: translateY(160%); transition: transform .22s ease-out; }
.org-bar.js.on { transform: none; }
@media (min-width: 900px) { .org-bar.js { inset-inline-start: calc(280px + 24px); max-width: 980px; } }
body.org-bar-on .content { padding-bottom: 170px; }
.org-count { font-size: 15px; }
.org-pop { position: relative; }
.org-pop > summary { list-style: none; }
.org-pop > summary::-webkit-details-marker { display: none; }
.org-pop-body { position: absolute; bottom: calc(100% + 8px); inset-inline-start: 0; z-index: 2; display: grid; gap: 8px; padding: 12px; min-width: 240px; max-width: calc(100vw - 48px); box-shadow: 0 16px 40px rgba(16,24,40,.22); }
.org-danger { color: var(--danger); }
@media (prefers-reduced-motion: reduce) { .org-bar.js { transition: none; } .org-dragging-item, .sortable-fallback { transform: none; } }
.org-unit-links a { display: inline-flex; align-items: center; gap: 4px; }

/* الدورات: إظهار/إخفاء وتعديل من قائمة الدروس المسجلة */
.program-li { display: grid; gap: 6px; }
.program-actions { display: flex; flex-wrap: wrap; gap: 6px; padding-inline: 4px; }
.program-hidden { opacity: .7; border-style: dashed; }
.course-vis { display: grid; gap: 8px; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.org-help .icon { display: inline-block; vertical-align: -3px; }

/* عارض ملفات PDF */
.pdf-bar { position: sticky; top: 8px; z-index: 5; display: flex; align-items: center; gap: 10px; padding: 8px 10px; }
.pdf-title { flex: 1; min-width: 0; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pdf-tools { display: flex; align-items: center; gap: 6px; flex: none; }
.pdf-where { margin: 8px 4px; }
.pdf-doc { display: grid; gap: 12px; justify-items: center; overflow-x: auto; padding-bottom: 24px; }
.pdf-doc.is-zoomed { justify-items: start; }
.pdf-sheet { width: 100%; background: #fff; border-radius: 6px; box-shadow: 0 6px 20px rgba(16,24,40,.12); overflow: hidden; }
.pdf-doc.is-zoomed .pdf-sheet { width: auto; }
.pdf-sheet canvas { display: block; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.pdf-loading { padding: 40px 0; text-align: center; }

/* قوائم صفحة المستوى: عناوين أصغر وأسطر أقصر (طلب الأستاذ) */
.lv-title { font-size: 15px; font-weight: 600; line-height: 1.45; }
.lv-item { padding-block: 8px; gap: 10px; }
.lv-item .lv-thumb { width: 40px; height: 40px; border-radius: 12px; }
.lv-meta .item-kind { font-size: 12.5px; display: inline-flex; align-items: center; gap: 3px; }
.lv-lock { color: var(--ink-3); display: inline-flex; }
.units .unit-title { font-size: 16px; }
@media (min-width: 900px) { .lv-title { font-size: 15.5px; } }
/* صفحة الدرس: ملفاته، وصفحة «مدفوع» */
.attach-card { margin-top: 14px; }
.attach-card h2 { font-size: 17px; display: flex; align-items: center; gap: 8px; margin: 0 0 8px; }
.attach-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.attach-list li { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-top: 1px solid var(--line); }
.attach-list li:first-child { border-top: 0; }
.attach-name { flex: 1; min-width: 0; font-weight: 600; font-size: 15px; }
.attach-name small { color: var(--ink-3); font-weight: 400; }
.attach-actions { display: flex; gap: 6px; flex: none; }
/* سطر ملف: الضغط في أي مكان منه يفتح الملف (زر «فتح» يمتد على السطر كله)، والزر يتحرك معه */
.row-tap { position: relative; cursor: pointer; }
.row-tap :is(.lv-row-actions, .attach-actions) > a:first-child::after,
.row-tap > a.btn::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
/* الزر لا يصغر وحده عند الضغط: تصغيره يجعل امتداده يضيق تحت الإصبع فيضيع الضغط؛ السطر كله يستجيب بدلًا منه */
.row-tap :is(.lv-row-actions, .attach-actions) > a:first-child, .row-tap > a.btn { transform: none; }
.row-tap:has(> :is(.lv-row-actions, .attach-actions) > a:first-child:active, > a.btn:active) { background: var(--surface-2); }
.locked-card { text-align: center; justify-items: center; }
.locked-card .actions { justify-content: center; }
/* ملفات PDF المربوطة بدرس في المنظّم */
.org-item { flex-wrap: wrap; position: relative; }
.org-attach { list-style: none; margin: 0; padding: 0; flex-basis: 100%; padding-inline-start: 34px; }
.org-attach:not(.is-empty) { margin-top: 2px; border-inline-start: 2px solid #F59E0B; }
.org-attach .org-item { min-height: 44px; padding-block: 4px; border-bottom: 0; background: transparent; }
.org-attach .org-title { font-size: 14px; font-weight: 500; }
/* أثناء سحب ملف PDF: فوق كل درس خانة «اربط هنا» دون أن تتحرك الصفحة */
.org.dragging-pdf .org-attach.is-empty { position: absolute; inset-block: 6px; inset-inline-start: 34%; inset-inline-end: 48px; padding: 0; border: 2px dashed #F59E0B; border-radius: 10px; background: rgba(255, 246, 219, .85); display: grid; place-items: center; z-index: 2; }
.org.dragging-pdf .org-attach.is-empty::before { content: "اربط الملف بهذا الدرس"; font-size: 12px; font-weight: 700; color: var(--ink); }
.org.dragging-pdf .org-attach.is-empty .org-item { display: none; }
.org-item[data-kind="pdf"] > .org-attach { display: none; }
/* ---------- بنك الأولمبياد (لوحة التحكم) ---------- */
.ol-stars { letter-spacing: 1px; font-size: 17px; line-height: 1; white-space: nowrap; }
.ol-stars-off { color: var(--line); }
.ol-d1 { color: #16A34A; }
.ol-d2 { color: #65A30D; }
.ol-d3 { color: #D97706; }
.ol-d4 { color: #EA580C; }
.ol-d5 { color: #DC2626; }
.ol-num { display: inline-flex; align-items: center; font-weight: 800; font-size: 14px; background: var(--ink); color: var(--brand); border-radius: 10px; padding: 1px 10px; }
.ol-card { display: flex; flex-direction: column; gap: 8px; padding: 16px; min-width: 0; }
.ol-card h3 { margin: 0; font-size: 18px; line-height: 1.45; }
.ol-card h3 a { color: inherit; text-decoration: none; }
.ol-card h3 a:hover { text-decoration: underline; }
.ol-card-top { display: flex; align-items: center; gap: 10px; }
.ol-card-top .ol-stars { margin-inline-start: auto; }
.ol-pick { display: grid; place-items: center; width: 44px; height: 44px; margin: -6px; cursor: pointer; }
.ol-pick input { width: 22px; height: 22px; accent-color: var(--brand-strong); }
.ol-excerpt { margin: 0; color: var(--ink-2); font-size: 15px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ol-dist { display: grid; gap: 8px; margin-top: 16px; }
.ol-filter { margin-top: 12px; }
.ol-search { margin: 0 0 8px; }
.ol-filter-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ol-filter-row select { flex: 1 1 140px; min-width: 0; }
.ol-select { margin-top: 12px; }
.ol-bar { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin: 0 0 14px; padding: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); }
.ol-head-meta { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; }
.ol-meta { padding: 6px 18px; }
.ol-text { font-size: 17px; line-height: 2; }
.ol-reveal { margin-top: 14px; padding: 12px; }
.ol-reveal > summary { list-style: none; width: 100%; }
.ol-reveal > summary::-webkit-details-marker { display: none; }
.ol-reveal[open] > summary { margin-bottom: 8px; }
.ol-sol { padding: 4px 8px 8px; }
.ol-sol h3 { display: flex; align-items: center; gap: 8px; font-size: 16px; margin: 18px 0 6px; }
.ol-sol h3::before { content: ""; width: 5px; height: 18px; border-radius: 3px; background: var(--brand); flex: none; }
.ol-sol ol, .ol-sol ul { margin: 0; padding-inline-start: 22px; }
.ol-sol li { margin-bottom: 6px; }
.ol-idea { background: var(--brand-soft); border-radius: 16px; padding: 12px 16px; }
.ol-answer { background: var(--success-soft); border-radius: 16px; padding: 12px 16px; font-weight: 700; }
.ol-actions { margin-top: 14px; }
.ol-three { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0 12px; }
.ol-part { border: 1px dashed var(--line); border-radius: 16px; padding: 10px 14px; margin: 0 0 12px; }
.ol-part legend { font-weight: 800; padding: 0 6px; }
.ol-picked { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; }
.ol-picked li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ol-program { margin-bottom: 12px; flex-wrap: wrap; }
.ol-rules { list-style: none; margin: 0; padding: 0; }
.ol-rules > li { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-bottom: 1px dashed var(--line); }
.ol-rules > li:last-child { border-bottom: 0; }
.ol-rules > li > span:last-child { display: grid; gap: 6px; flex: 1; min-width: 0; }
.ol-rid { flex: none; font-weight: 800; font-size: 13px; padding: 0 6px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--line); }
@media (min-width: 760px) { .ol-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* صفحة الطباعة: ورقة التلاميذ والحلول */
.ol-print { background: #fff; color: #16181D; }
.ol-print main { max-width: 820px; margin: 0 auto; padding: 16px; }
.ol-print-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px; }
.ol-print-bar p { flex-basis: 100%; margin: 0; }
.ol-sheet { margin-bottom: 28px; }
.ol-p-head { display: flex; align-items: center; gap: 10px; border-bottom: 3px solid #16181D; padding-bottom: 8px; margin-bottom: 12px; }
.ol-p-head strong { display: block; font-size: 17px; }
.ol-p-head small { color: #555; }
.ol-p-right { margin-inline-start: auto; text-align: end; font-size: 13px; color: #333; }
.ol-p-student { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 12px; font-size: 14px; margin-bottom: 14px; }
.ol-p-student span { border-bottom: 1px dotted #555; padding-bottom: 2px; }
.ol-p-title { font-size: 18px; margin: 6px 0 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ol-p-box { border: 1.5px solid #16181D; border-radius: 10px; padding: 12px 14px; line-height: 2; }
.ol-p-meta { font-size: 13px; color: #333; }
.ol-p-lines { display: grid; margin-top: 14px; }
.ol-p-lines span { display: block; height: 30px; border-bottom: 1px solid #bbb; }
.ol-print .ol-idea, .ol-print .ol-answer { border: 1px solid #999; background: #f4f4f4; }
@media print {
  @page { size: A4; margin: 14mm; }
  .ol-print-bar { display: none; }
  .ol-print main { padding: 0; max-width: none; }
  .ol-sheet { break-after: page; margin: 0; }
  .ol-sheet:last-child { break-after: auto; }
  .ol-p-box, .ol-sol li { break-inside: avoid; }
  .ol-print .ol-stars, .ol-p-head, .ol-sol h3::before { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ---------- سياسة الخصوصية وشروط الاستعمال ---------- */
.legal { max-width: 780px; margin-inline: auto; display: grid; gap: 14px; }
.legal-head { text-align: center; display: grid; justify-items: center; gap: 6px; padding: 8px 0 4px; }
.legal-head h1 { margin: 6px 0 0; font-size: 26px; }
.legal-head p { margin: 0; max-width: 60ch; }
.legal-short { border-inline-start: 4px solid var(--brand); }
.legal-short h2, .legal-sec h2 { font-size: 18px; margin: 0 0 8px; }
.legal-sec { scroll-margin-top: 80px; }
.legal-sec h3 { font-size: 15.5px; margin: 14px 0 4px; }
.legal-sec p, .legal-short p { margin: 0 0 8px; line-height: 1.9; }
.legal ul { margin: 0; padding-inline-start: 22px; line-height: 1.9; }
.legal li + li { margin-top: 2px; }
.legal-toc ol { margin: 6px 0 0; padding-inline-start: 22px; columns: 2 220px; column-gap: 24px; line-height: 2; }
.legal-toc a, .legal a { color: inherit; text-decoration-color: var(--brand-strong); text-underline-offset: 3px; }
.legal-en { text-align: left; font-size: 14px; color: var(--ink-2); margin-top: 10px; }
#delete { scroll-margin-top: 80px; }
.footer-links { display: flex; justify-content: center; gap: 8px; margin-top: 6px !important; }
.footer-links a { color: inherit; }
.legal-consent { margin: 4px 0 10px; }
.legal-links .actions { flex-wrap: wrap; }
.family-delete { margin-top: 14px; border: 1px solid color-mix(in srgb, #B42318 35%, var(--line)); }
.family-delete > summary { list-style: none; cursor: pointer; }
.family-delete > summary::-webkit-details-marker { display: none; }
.family-delete > summary h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 17px; color: var(--danger-ink); }
.family-delete[open] > summary { margin-bottom: 10px; }
.family-delete .stack { display: grid; gap: 12px; justify-items: start; }
.legal .card { padding: 16px 18px; }
.legal bdi { white-space: nowrap; }
.legal-short { border-inline-start-width: 4px; }

/* ---------- بنك الأولمبياد: المنظّم والكتاب (المرحلة 8.7) ---------- */
.ol-org-item { flex-wrap: wrap; }
.ol-org-item .ol-num { font-size: 12px; padding: 0 8px; }
.ol-org-item .ol-stars { font-size: 14px; }
.ol-org-meta { flex-basis: 100%; padding-inline-start: 30px; color: var(--ink-3); font-size: 12px; margin-top: -4px; }
.ol-loose { border-style: dashed; }
.ol-org[data-readonly] .org-handle { display: none; }
.ol-chapter-edit { margin: 8px 4px 0; }
.ol-chapter-edit > summary { list-style: none; display: inline-flex; }
.ol-chapter-edit > summary::-webkit-details-marker { display: none; }
.ol-chapter-form { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }
.ol-chapter-form .input { flex: 1 1 200px; min-width: 0; }
.ol-new-chapter { margin-top: 12px; }
.ol-new-chapter label { font-weight: 700; display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.ol-new-chapter-row { display: flex; gap: 8px; flex-wrap: wrap; }
.ol-new-chapter-row .input { flex: 1 1 220px; min-width: 0; }
.ol-hints { margin: 0; padding-inline-start: 22px; }
.ol-hints li { margin-bottom: 6px; }

/* تلميحات مقابل الوقت: المحرر وصفحة الاجتياز */
.hint-fields { border: 1px dashed var(--line); border-radius: 16px; padding: 10px 14px; margin: 0 0 12px; }
.hint-fields legend { font-weight: 800; padding: 0 6px; display: inline-flex; align-items: center; gap: 6px; }
.hint-row { display: grid; grid-template-columns: 1fr 130px; gap: 0 12px; align-items: start; }
@media (max-width: 520px) { .hint-row { grid-template-columns: 1fr; } }
.hint-box { display: grid; gap: 10px; margin-top: 14px; justify-items: start; }
/* التلميح: مصباح أصفر */
.hint-lamp { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 6px 16px 6px 8px; border: 1.5px dashed #F59E0B; border-radius: 999px; background: var(--surface); color: var(--ink); font: inherit; cursor: pointer; transition: transform 150ms ease-out, background-color 150ms ease-out; }
.hint-lamp:hover:not(:disabled) { background: var(--brand-soft); transform: translateY(-1px); }
.hint-lamp:disabled { opacity: .55; cursor: not-allowed; }
.hint-lamp-text { display: grid; text-align: start; line-height: 1.35; }
.hint-lamp-text strong { font-size: 15px; }
.hint-lamp-text small { font-size: 12.5px; color: var(--ink-2); }
.hint-lamp-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #FBBF24; color: #16181D; flex: none; box-shadow: 0 0 0 4px rgba(251,191,36,.25); }
.hint-lamp-icon .icon { width: 22px; height: 22px; }
.hint-lamp:not(:disabled) .hint-lamp-icon { animation: lamp-glow 2.4s ease-in-out infinite; }
@keyframes lamp-glow { 50% { box-shadow: 0 0 0 8px rgba(251,191,36,.18), 0 0 18px rgba(251,191,36,.55); } }
.hint-text { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 16px; background: var(--brand-soft); border: 1px solid rgba(245,158,11,.45); width: 100%; }
.hint-text p { margin: 0; line-height: 1.8; }
.hint-text strong { display: block; font-size: 13px; color: #B45309; }
.hint-text .hint-lamp-icon { width: 34px; height: 34px; box-shadow: 0 0 14px rgba(251,191,36,.7); }
.hint-btn { border-style: dashed; }

/* استخراج المسائل دون فراغ، والكتاب */
.ol-cp { padding: 10px 0 12px; border-bottom: 1px solid #ddd; break-inside: avoid; page-break-inside: avoid; }
.ol-cp:last-child { border-bottom: 0; }
.ol-cp-title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 16px; margin: 0 0 4px; }
.ol-cp-num { display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 6px; border-radius: 9px; background: #16181D; color: #FBBF24; font-weight: 800; font-size: 14px; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.ol-cp-meta { margin: 0 0 4px; font-size: 12px; color: #555; }
.ol-cp-text { line-height: 1.95; }
.ol-book-cover { min-height: 92vh; display: grid; place-content: center; justify-items: center; text-align: center; gap: 10px; border: 3px solid #16181D; border-radius: 18px; padding: 32px 20px; margin-bottom: 24px; }
.ol-book-cover h1 { font-size: 34px; line-height: 1.35; margin: 12px 0 0; }
.ol-book-sub { font-size: 18px; color: #444; margin: 0; }
.ol-book-brand { font-weight: 800; font-size: 18px; margin: 18px 0 0; padding: 6px 18px; border-radius: 999px; background: #FBBF24; color: #16181D; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.ol-book-info { color: #555; margin: 0; }
.ol-book-toc { margin-bottom: 24px; }
.ol-book-toc ol { margin: 0; padding-inline-start: 24px; display: grid; gap: 8px; }
.ol-book-toc li > span:first-child { font-weight: 700; }
.ol-toc-range { color: #555; margin-inline-start: 10px; font-size: 14px; }
.ol-book-legend { margin-top: 16px; color: #555; font-size: 14px; }
.ol-book-h { display: grid; gap: 2px; font-size: 24px; margin: 0 0 12px; padding-bottom: 8px; border-bottom: 3px solid #16181D; }
.ol-book-h span { font-size: 14px; font-weight: 700; color: #B45309; }
.ol-book-chapter, .ol-book-solutions { margin-bottom: 24px; }
.ol-book-sol { padding: 10px 0 14px; border-bottom: 1px solid #ddd; }
.ol-book-sol .ol-sol { padding: 0; }
@media print {
  .ol-print-book .ol-book-cover { min-height: 0; height: 250mm; margin: 0; break-after: page; }
  .ol-print-book .ol-book-toc { break-after: page; }
  .ol-print-book .ol-book-chapter, .ol-print-book .ol-book-solutions { break-before: page; }
  .ol-print-book .ol-book-sol h3, .ol-print-book .ol-sol h3 { break-after: avoid; }
  .ol-print-compact .ol-compact, .ol-print-book main { font-size: 12.5pt; }
  @page { @bottom-center { content: counter(page); font-family: Tajawal, sans-serif; font-size: 10pt; color: #555; } }
  @page :first { @bottom-center { content: none; } }
}

/* ---------- اجتياز الاختبار: سؤال واحد في كل مرة (المرحلة 8.7) ---------- */
.quiz-mode { min-height: 36px; padding: 4px 12px; border-radius: 999px; border: 1px solid color-mix(in srgb, currentColor 35%, transparent); background: transparent; color: inherit; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.q-top { flex-basis: 100%; display: grid; gap: 8px; }
.q-progress { height: 6px; border-radius: 99px; background: color-mix(in srgb, currentColor 18%, transparent); overflow: hidden; }
.q-progress span { display: block; height: 100%; width: 0; background: #FBBF24; border-radius: 99px; transition: width 300ms ease-out; }
.q-nav { display: flex; gap: 6px; overflow-x: auto; padding: 2px 2px 4px; scrollbar-width: none; }
.q-nav::-webkit-scrollbar { display: none; }
.q-dot { flex: none; min-width: 36px; height: 36px; padding: 0 8px; border-radius: 12px; border: 1.5px solid color-mix(in srgb, currentColor 35%, transparent); background: transparent; color: inherit; font: inherit; font-weight: 800; font-size: 14px; cursor: pointer; display: grid; place-items: center; }
.q-dot.is-done { background: color-mix(in srgb, currentColor 16%, transparent); border-color: transparent; }
.q-dot.is-current { background: #FBBF24; border-color: #FBBF24; color: #16181D; }
.q-dot-end .icon { width: 18px; height: 18px; }
.q-nav-review .q-dot { border-color: var(--line); color: var(--ink); }
.q-nav-review .q-dot.is-done { background: var(--success-soft); color: var(--success); }
.q-nav-review .q-dot.is-todo { background: var(--brand-soft); border-color: #F59E0B; }
.q-nav-review { flex-wrap: wrap; overflow: visible; }
.q-pager { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.q-pager .btn { min-height: 48px; }
.q-count { color: var(--ink-2); font-weight: 700; font-variant-numeric: tabular-nums; }
.q-review { margin-top: 0; }
body.quiz-one .q-list { gap: 0; }
body.quiz-one .q-card { min-height: 52vh; animation: q-in 220ms ease-out; }
body.quiz-one .q-card .q-text { font-size: 18px; }
body.quiz-one .q-final .submit-card { margin-top: 14px; }
@keyframes q-in { from { opacity: 0; transform: translateX(-12px); } }
body:not(.quiz-one) .q-pager { display: none; }
.q-card .q-head .unit-num { background: #16181D; color: #FBBF24; }
@media (max-width: 760px) {
  .quiz-bar { margin-inline: -4px; border-radius: 0 0 18px 18px; }
  .q-card { padding: 16px 14px; }
  .option { min-height: 56px; font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { .hint-lamp-icon, body.quiz-one .q-card { animation: none !important; } }
/* وضع المسابقة على الهاتف: السؤال ثابت، الإجابة في لوحة أسفل الشاشة، والمحرر يفتح في الأعلى */
@counter-style zm-abjad { system: fixed; symbols: "أ" "ب" "ج" "د" "هـ" "و" "ز" "ح"; suffix: ""; }
body.quiz-stage .q-card { animation-name: q-fade; padding-bottom: calc(var(--dock-h, 0px) + 24px); }
@keyframes q-fade { from { opacity: 0; } }
body.quiz-stage .q-card .q-text { font-size: 19px; line-height: 1.9; }
.q-dock { position: fixed; inset-inline: 0; bottom: 0; z-index: 30; max-height: 58vh; overflow-y: auto; overscroll-behavior: contain; padding: 14px 14px calc(12px + env(safe-area-inset-bottom)); background: var(--surface); color: var(--ink); border-radius: 22px 22px 0 0; box-shadow: 0 -10px 30px rgba(0,0,0,.14); border-top: 3px solid #FBBF24; }
.q-dock > .muted.small { margin: 0 0 6px; }
.q-dock .options { margin-top: 0; }
.q-dock .q-pager { margin-top: 12px; padding-top: 12px; }
.q-dock .q-pager .btn, .q-dock .q-count { white-space: nowrap; }
.q-dock .q-pager { gap: 8px; }
.q-dock .q-pager .btn { padding-inline: 14px; }
.q-edit-q > * { margin: 0; }
body.quiz-stage .q-dock .options:not(.options-row) { counter-reset: opt; }
body.quiz-stage .q-dock .options:not(.options-row) .option { position: relative; counter-increment: opt; }
body.quiz-stage .q-dock .options:not(.options-row) .option::before { content: counter(opt, zm-abjad); flex: none; width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; font-weight: 800; background: var(--surface-2); border: 1.5px solid var(--line); }
body.quiz-stage .q-dock .options:not(.options-row) .option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
body.quiz-stage .q-dock .options:not(.options-row) .option:has(input:checked)::before { background: #FBBF24; border-color: #FBBF24; color: #16181D; }
.q-answer-chip { width: 100%; display: grid; gap: 4px; text-align: start; padding: 12px 14px; min-height: 64px; border-radius: 16px; border: 1.5px dashed color-mix(in srgb, currentColor 30%, transparent); background: var(--surface-2); color: inherit; font: inherit; cursor: pointer; }
.q-chip-label { font-size: 13px; font-weight: 800; color: var(--ink-2); }
.q-chip-value { font-size: 18px; font-weight: 700; overflow-x: auto; }
.q-chip-value.is-empty { color: var(--ink-3); font-weight: 600; font-size: 16px; }
.q-answer-chip:has(.q-chip-value:not(.is-empty)) { border-style: solid; border-color: #FBBF24; }
.q-answer-box { display: none; }
.q-card.editing .q-answer-box { display: grid; gap: 10px; position: fixed; inset-inline: 0; top: 0; z-index: 41; max-height: 100dvh; overflow-y: auto; padding: 14px 14px 16px; background: var(--surface); color: var(--ink); border-radius: 0 0 22px 22px; box-shadow: 0 12px 40px rgba(0,0,0,.25); border-bottom: 3px solid #FBBF24; }
.q-edit-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.q-edit-head .btn { min-height: 44px; padding-inline: 18px; }
.q-edit-q { margin: 0; color: var(--ink-2); font-size: 14px; line-height: 1.7; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.q-answer-box .expr-field, .q-answer-box > .input { margin-top: 0; }
.q-answer-box textarea { min-height: 30vh; }
.q-answer-box .keypad .btn, .q-answer-box .keypad button { min-height: 44px; }
body.q-editing::after { content: ""; position: fixed; inset: 0; z-index: 40; background: rgba(15,17,21,.55); }
body.q-editing .q-dock { display: none; }
body.q-editing { overflow: hidden; }
/* شاشة الاختبار كتطبيق: بلا رأس الموقع وتذييله، وبلا «اسحب للتحديث» أو تكبير بالنقر المزدوج */
html.quiz-app, html.quiz-app body { overscroll-behavior-y: none; overflow-anchor: none; }
html.quiz-app .topbar, html.quiz-app .site-footer, html.quiz-app .staging, html.quiz-app .drawer, html.quiz-app .crumbs { display: none !important; }
html.quiz-app body { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
html.quiz-app .content { padding-top: 0; }
html.quiz-app .quiz-bar { margin-top: 0; border-radius: 0 0 18px 18px; padding-top: calc(10px + env(safe-area-inset-top)); }
html.quiz-app .q-dock button, html.quiz-app .q-dock .option, html.quiz-app .quiz-bar { -webkit-user-select: none; user-select: none; }
.quiz-exit { flex: none; width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; color: inherit; background: color-mix(in srgb, currentColor 14%, transparent); }
.quiz-exit[hidden] { display: none; }
.q-confirm { position: fixed; inset: 0; z-index: 60; display: grid; place-items: end center; padding: 16px; background: rgba(15,17,21,.6); }
.q-confirm[hidden] { display: none; }
.q-confirm-box { width: min(440px, 100%); display: grid; gap: 10px; padding: 20px 18px calc(18px + env(safe-area-inset-bottom)); border-radius: 22px; background: var(--surface); color: var(--ink); border-top: 4px solid #FBBF24; animation: q-fade 160ms ease-out; }
.q-confirm-box strong { font-size: 19px; }
.q-confirm-box p { margin: 0; color: var(--ink-2); line-height: 1.8; }
.q-confirm-actions { display: grid; gap: 8px; margin-top: 6px; }
.q-confirm-actions .btn { min-height: 50px; }
/* ---------- دليل الأستاذ ---------- */
.guide-index { display: grid; gap: 12px; padding: 16px; }
.guide-index-group { display: grid; gap: 6px; }
.guide-index-group > strong { font-size: 13px; color: var(--ink-2); }
.guide-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.guide-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--surface-2, rgba(0,0,0,.04)); border: 1px solid var(--line); color: inherit; text-decoration: none; font-size: 13.5px; line-height: 1.4; }
.guide-chip:hover { border-color: var(--brand-strong); }
.guide-group { display: grid; gap: 10px; }
.guide-group > h2 { font-size: 17px; margin: 8px 0 0; }
.guide-sec { padding: 0; overflow: hidden; }
.guide-sec > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 14px 16px; }
.guide-sec > summary::-webkit-details-marker { display: none; }
.guide-sum { display: grid; gap: 2px; flex: 1; min-width: 0; }
.guide-sum strong { font-size: 15.5px; }
.guide-sum small { color: var(--ink-2); font-size: 13px; }
.guide-chev { transition: transform .2s; flex: none; }
.guide-sec[open] .guide-chev { transform: rotate(180deg); }
.guide-sec[open] > summary { border-bottom: 1px solid var(--line); }
.guide-steps { margin: 0; padding: 14px 16px 4px; padding-inline-start: 38px; line-height: 1.9; display: grid; gap: 6px; }
.guide-steps code, .guide-notes code { background: var(--surface-2, rgba(0,0,0,.05)); padding: 0 5px; border-radius: 6px; }
.guide-notes { margin: 6px 16px 0; padding: 10px 14px; padding-inline-start: 30px; border-radius: 12px; background: color-mix(in srgb, var(--brand) 12%, transparent); line-height: 1.8; font-size: 14px; }
.guide-links { padding: 12px 16px 16px; flex-wrap: wrap; }
.guide-faq p { margin: 0; padding: 12px 16px 16px; line-height: 1.9; }
.guide-sec, #faq { scroll-margin-top: 80px; }


/* ==========================================================================
   التصميم الناعم (نوفمبر 2026، اختاره الأستاذ من أمثلة أرسلها)
   1. لون مستوى التلميذ هو لون التطبيق (صنف lv-… على <main>): رأس ملوّن في الرئيسية وورقة بيضاء فوقه.
   2. بطاقات بلا حدود، زوايا 24px، ظل واسع خفيف. ألوان باهتة، وواحد مشبع فقط.
   3. المقاطع: دائرة ملونة برقمها و«رف» ملوّن تحت البطاقة.
   4. دروس المقطع: خط زمني منقّط، والنقطة ممتلئة لما شاهده التلميذ.
   5. خانات المستوى: لسان ملوّن برقم 01 فوق البطاقة، وحافة ملونة في نهايتها.
   6. أرقام لوحة التحكم: دائرة ملونة بتوهج خفيف.
   الأصفر يبقى للزر الرئيسي والتبويب النشط والشريط السفلي.
   ========================================================================== */
:root {
  --sf-text-mix: #000;
  --sf-bg: #F3F3F7;
  --sf-shadow: 0 18px 40px -14px rgba(30, 32, 60, .16), 0 2px 6px rgba(30, 32, 60, .04);
  --sf-teal: #14A3A0; --sf-orange: #EE8A2E; --sf-coral: #E5534B; --sf-violet: #7B61C9; --sf-blue: #3B82F6;
  --sf-tint: 14%;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --sf-text-mix: #fff; --sf-bg: #0F1115; --sf-shadow: 0 18px 40px -14px rgba(0, 0, 0, .6); --sf-tint: 22%; } }
:root[data-theme="dark"] { --sf-text-mix: #fff; --sf-bg: #0F1115; --sf-shadow: 0 18px 40px -14px rgba(0, 0, 0, .6); --sf-tint: 22%; }

body { background: var(--sf-bg); }
.card, .lv-tile { border: 0; box-shadow: var(--sf-shadow); border-radius: 24px; }

/* لون الصفحة الباهت من لون المستوى */
.content.lv { --lv-soft: color-mix(in srgb, var(--lv, #16181D) var(--sf-tint), var(--surface)); }

/* ---------- 1. الرئيسية: رأس ملوّن وورقة بيضاء ---------- */
.content.lv .dash-greet {
  margin: -8px -16px 0; padding: 22px 20px 70px;
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(255, 255, 255, .18), transparent 55%),
    linear-gradient(160deg, color-mix(in srgb, var(--lv) 88%, #fff), var(--lv));
  color: var(--lv-ink); border-radius: 0 0 32px 32px;
}
.content.lv .dash-greet h1 { color: var(--lv-ink); font-size: 28px; }
.content.lv .dash-greet .dash-label { color: color-mix(in srgb, var(--lv-ink) 85%, transparent); }
.content.lv .dash-greet .level-pill { background: rgba(255, 255, 255, .2); color: var(--lv-ink); }
.content.lv .dash-greet .pill-success { background: rgba(255, 255, 255, .92); color: var(--lv); }

/* الحصة القادمة: ورقة بيضاء ترتفع فوق الرأس */
.content.lv .dash-hero {
  margin-top: -52px; background: var(--surface); color: var(--ink);
  border-radius: 28px; box-shadow: var(--sf-shadow);
}
.content.lv .dash-hero-stripes { display: none; }
.content.lv .dash-chip { background: var(--lv-soft); color: var(--lv); }
.content.lv .dash-hero-muted { color: var(--ink-2); }
.content.lv .dash-count > span { background: var(--lv-soft); color: var(--ink-2); border-radius: 18px; }
.content.lv .dash-count b { color: var(--lv); }
.content.lv .dash-hero .change-tag, .content.lv .dash-hero-link { color: var(--ink-2); }

/* «اليوم»: مربعات باهتة، والأول مشبع بلون المستوى */
.dash-tile { border-radius: 24px; box-shadow: none; min-height: 132px; padding: 16px; }
.content.lv .dash-tiles > li:nth-child(1) .dash-tile { background: var(--lv); color: var(--lv-ink); box-shadow: 0 16px 30px -14px color-mix(in srgb, var(--lv) 70%, transparent); }
.content.lv .dash-tiles > li:nth-child(1) .dash-tile .dash-label { color: color-mix(in srgb, var(--lv-ink) 85%, transparent); }
.content.lv .dash-tiles > li:nth-child(1) .icon-box { background: rgba(255, 255, 255, .2); color: var(--lv-ink); }
.dash-tiles > li:nth-child(2) .dash-tile { background: color-mix(in srgb, var(--sf-orange) var(--sf-tint), var(--surface)); }
.dash-tiles > li:nth-child(3) .dash-tile { background: color-mix(in srgb, var(--sf-violet) var(--sf-tint), var(--surface)); }
.dash-tiles > li:nth-child(4) .dash-tile { background: color-mix(in srgb, var(--sf-teal) var(--sf-tint), var(--surface)); }
.dash-tiles > li:nth-child(2) .icon-box { background: var(--surface); color: var(--sf-orange); }
.dash-tiles > li:nth-child(3) .icon-box { background: var(--surface); color: var(--sf-violet); }
.dash-tiles > li:nth-child(4) .icon-box { background: var(--surface); color: var(--sf-teal); }
.dash-tile .icon-box { border-radius: 999px; width: 44px; height: 44px; }

/* «هذا الأسبوع»: اليوم كبسولة طويلة */
.week-strip .week-num { width: 40px; height: auto; min-height: 40px; }
.week-strip li { border-radius: 999px; padding: 8px 0; }
.content.lv .week-strip .is-today { background: var(--lv); color: var(--lv-ink); box-shadow: 0 12px 22px -10px color-mix(in srgb, var(--lv) 80%, transparent); }
.content.lv .week-strip .is-today .week-num, .content.lv .week-strip .is-today .week-name { background: transparent; color: var(--lv-ink); }
.content.lv .week-strip .is-today.has-live .week-dot { background: var(--lv-ink); }

/* ---------- 5. خانات المستوى: لسان برقم وحافة ملونة ---------- */
.lv-tiles { counter-reset: tile; gap: 34px; margin-top: 30px; }
.lv-tile { counter-increment: tile; --acc: var(--sf-teal); overflow: visible; border-radius: 18px; padding: 22px 18px 20px; min-height: 0;
  border-inline-end: 8px solid var(--acc); }
.lv-tile.files { --acc: var(--sf-orange); }
.lv-tile.tests { --acc: var(--sf-coral); }
.lv-tile::before {
  content: counter(tile, decimal-leading-zero);
  position: absolute; bottom: 100%; inset-inline-start: 18px;
  min-width: 120px; height: 30px; padding-inline: 14px;
  display: flex; align-items: center; justify-content: flex-end;
  background: var(--acc); color: #fff; font-size: 22px; font-weight: 800; letter-spacing: .5px;
  border-radius: 12px 12px 0 0;
}
.lv-tile .lv-ic, .lv-tile.files .lv-ic, .lv-tile.tests .lv-ic { background: transparent; color: var(--acc); border: 0; width: 46px; height: 46px; }
.lv-tile .lv-ic .icon { width: 30px; height: 30px; }
.lv-tile-body { border-inline-start: 1px solid var(--line); padding-inline-start: 16px; }
.lv-tile-body strong { color: var(--acc-text); font-size: 17px; }
.lv-tile .lv-badge { top: -26px; inset-inline-end: 8px; z-index: 1; }
.lv-tile > .icon:last-child { color: var(--ink-3); }
.hero-level { border-inline-start: 0; }
.hero-level .level-icon { border-radius: 999px; }

/* ---------- 3. المقاطع: دائرة برقمها و«رف» ملوّن ---------- */
.units { gap: 22px; }
.units > .unit { --acc: var(--sf-teal); overflow: visible; border-radius: 20px; box-shadow: 0 9px 0 -1px var(--acc), var(--sf-shadow); }
.units > .unit:nth-child(5n + 2) { --acc: var(--sf-orange); }
.units > .unit:nth-child(5n + 3) { --acc: var(--sf-violet); }
.units > .unit:nth-child(5n + 4) { --acc: var(--sf-coral); }
.units > .unit:nth-child(5n + 5) { --acc: var(--sf-blue); }
.unit > summary { min-height: 78px; }
.units .unit-num, .units .unit[open] .unit-num { width: 48px; height: 48px; border-radius: 999px; border: 0; background: var(--acc); color: #fff; font-size: 19px;
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--acc) 18%, transparent); }
.unit > summary > .icon:last-child { color: var(--acc); }

/* ---------- 4. الدروس: خط زمني منقّط ---------- */
.unit .items { position: relative; padding: 4px 16px 10px; padding-inline-start: 44px; display: grid; gap: 10px; }
.unit .items::before {
  content: ""; position: absolute; top: 18px; bottom: 26px; inset-inline-start: 27px;
  border-inline-start: 2px dotted color-mix(in srgb, var(--acc) 55%, transparent);
}
.unit .items > li { position: relative; list-style: none; }
.unit .items > li::before {
  content: ""; position: absolute; top: 24px; inset-inline-start: -23px; width: 12px; height: 12px; border-radius: 999px;
  background: var(--surface); border: 2px solid var(--acc); box-sizing: border-box;
}
.unit .items > li:has(.pill-success)::before { background: var(--acc); }
.lv-item { background: var(--surface-2); border-radius: 16px; padding: 12px; }
.lv-thumb { background: color-mix(in srgb, var(--acc) var(--sf-tint), var(--surface)); color: var(--acc); border: 0; border-radius: 999px; }
.lv-group { color: var(--acc-text); margin-inline-start: 44px; }

/* التبويبات */
.lv-tabs { border: 0; box-shadow: var(--sf-shadow); }

/* ---------- 6. لوحة التحكم: أرقام في دوائر ملونة ---------- */
.stats { gap: 14px; }
.stat { --acc: var(--sf-blue); display: grid; grid-template-columns: 1fr auto; grid-template-areas: "label ic" "num num"; align-items: center; row-gap: 14px; padding: 16px; border-radius: 22px; }
.stats > li:nth-child(2) { --acc: var(--sf-teal); }
.stats > li:nth-child(3) { --acc: var(--sf-orange); }
.stats > li:nth-child(4) { --acc: var(--sf-coral); }
.stat .muted { grid-area: label; order: -1; color: var(--ink); font-weight: 700; font-size: 15px; }
.stat .icon-box { grid-area: ic; width: 30px; height: 30px; margin: 0; border-radius: 999px; background: transparent; color: var(--ink-3); }
.stat strong {
  grid-area: num; justify-self: center;
  display: grid; place-items: center; width: 68px; height: 68px; border-radius: 999px;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--acc) 70%, #fff), var(--acc) 70%);
  color: #fff; font-size: 28px;
  box-shadow: 0 14px 24px -8px color-mix(in srgb, var(--acc) 70%, transparent), inset 0 -3px 6px rgba(0, 0, 0, .12);
}

/* خط زمني متصل بلا فواصل بين الحزم */
.unit .items { border-top: 0; margin: 0; }
.unit[open] > summary { border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.lv-group { border: 0; margin-block: 10px 0; }
.lv-item { padding: 10px 12px; }

/* روابط الصفحات الفرعية داخل الصفحة الأم (القائمة المختصرة) */
.tool-row { align-items: center; margin-block: 12px; background: var(--surface); text-decoration: none; }
.tool-row > span { flex: 1; display: grid; gap: 2px; }
.tool-row small { color: var(--ink-2); font-size: 13.5px; }
.tool-row > .icon:first-child { color: var(--ink-2); margin: 0; }
.requests-row.has-new { box-shadow: inset 4px 0 0 var(--brand), var(--sf-shadow); }
.badge-count { min-width: 26px; height: 26px; padding-inline: 8px; border-radius: 999px; background: var(--brand); color: var(--ink); font-weight: 800; display: grid; place-items: center; font-size: 13px; }
.group-rename { align-items: center; position: relative; }
.group-name { border-color: transparent; background: transparent; font-weight: 700; padding-inline-start: 30px; cursor: text; }
.group-name:hover { border-color: var(--line); }
.group-name:focus { border-color: var(--brand-strong); background: var(--surface); }
.group-pen { position: absolute; inset-inline-start: 9px; color: var(--ink-3); pointer-events: none; }
.account-actions > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; }
.account-actions > summary::-webkit-details-marker { display: none; }
.account-actions > summary > span:nth-child(2) { flex: 1; display: grid; gap: 2px; }
.account-actions > summary small { color: var(--ink-2); font-size: 13.5px; }
.account-actions > summary > .icon:last-child { transition: transform .2s; }
.account-actions[open] > summary > .icon:last-child { transform: rotate(180deg); }
.account-actions[open] > summary { margin-bottom: 14px; }
.account-actions .family-delete { margin-top: 14px; padding: 14px; border-radius: 16px; }

/* نص بلون القسم: أغمق قليلًا من اللون نفسه حتى يُقرأ (وأفتح في الوضع الليلي) */
.lv-tile, .units > .unit { --acc-text: color-mix(in srgb, var(--acc) 70%, var(--sf-text-mix)); }

/* أماكن لمس أكبر للروابط الصغيرة: التذييل ومسار الصفحة */
.footer-links a { display: inline-block; padding: 8px 6px; }
.footer-links { gap: 2px; align-items: center; }
.crumbs a { display: inline-block; padding-block: 8px; margin-block: -8px; }
.site-footer { color: var(--ink-2); }

/* النص فوق الأصفر أسود دائمًا، حتى في الوضع الليلي (حيث ‎--ink فاتح) */
.sub-n, .badge-count, .preview-bar.is-preview .preview-pick > summary, .tab.is-active, .tab.is-active .tab-count { color: #16181D; }

/* دائرة رقم المقطع: لون أعمق قليلًا حتى يُقرأ الرقم الأبيض */
.units .unit-num, .units .unit[open] .unit-num { background: color-mix(in srgb, var(--acc) 80%, #000); }

/* أماكن لمس كافية في المنظّم ومسار الصفحة والتذييل */
.org-title { padding-block: 9px; margin-block: -9px; }
.org-unit-links a { display: inline-flex; align-items: center; gap: 4px; min-height: 40px; }
.crumbs a { display: inline-flex; align-items: center; min-height: 40px; padding-block: 0; margin-block: -8px; }
.footer-links a { padding: 10px 6px; }

/* ==========================================================================
   تقدمي في المتوسطة (‎/school/:id) ولوحة الأستاذ (تبويب «المتوسطة»)
   ========================================================================== */
.school-wilaya p { margin: 0 0 10px; }
.school-wilaya-row { display: flex; align-items: flex-end; gap: 10px; }
.school-wilaya-row .field { flex: 1; min-width: 0; margin: 0; }
.school-head { display: flex; align-items: center; gap: 16px; padding: 18px; margin-top: 4px; }
.school-head-text { min-width: 0; display: grid; gap: 2px; }
.school-head-text p { margin: 0; }
.school-frontier { font-size: 17px; font-weight: 800; line-height: 1.4; }
.school-ring-box { position: relative; display: grid; place-items: center; flex: none; }
.school-ring { transform: rotate(-90deg); display: block; }
.school-ring circle { fill: none; stroke-width: 9; }
.school-ring-bg { stroke: var(--line); }
.school-ring-fg { stroke: var(--brand); stroke-linecap: round; transition: stroke-dashoffset .35s ease-out; }
.school-ring-num { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; line-height: 1.1; }
.school-ring-num b { font-size: 24px; font-weight: 800; }
.school-ring-num small { font-size: 12px; color: var(--ink-2); }
.school-ring-sm .school-ring circle { stroke-width: 7; }
.school-ring-sm .school-ring-num b { font-size: 16px; }
.school-next { display: flex; align-items: center; gap: 12px; padding: 14px 16px; margin-top: 12px; flex-wrap: wrap; }
.school-next > span:nth-child(2) { flex: 1; min-width: 140px; display: grid; gap: 2px; }
.school-next small { font-size: 13px; }
.school-next strong { font-size: 15px; line-height: 1.4; }
.school-help { margin: 18px 4px 10px; }
.school-sec { padding: 14px 14px 8px; margin-top: 12px; }
.school-sec-title { display: flex; align-items: center; gap: 8px; margin: 0 4px 6px; font-size: 16px; font-weight: 800; }
.school-sec-title > span:first-child { flex: 1; min-width: 0; }
.school-sec-count { font-size: 13px; font-weight: 700; color: var(--ink-2); }
.school-sec-ok { display: none; color: var(--success); }
.school-sec.is-complete .school-sec-ok { display: inline-block; }
.school-sec.is-complete .school-sec-count { color: var(--success-ink, var(--success)); }
.school-list { list-style: none; margin: 0; padding: 0; position: relative; }
.school-li { position: relative; display: flex; align-items: center; gap: 6px; }
/* الخط الزمني المنقّط بين النقاط */
.school-li + .school-li::before { content: ""; position: absolute; inset-inline-start: 20px; top: -12px; height: 24px; border-inline-start: 2px dotted var(--line); pointer-events: none; }
.school-li.is-done + .school-li.is-done::before { border-inline-start-style: solid; border-color: var(--lv, var(--brand)); }
.school-li form { flex: 1; min-width: 0; margin: 0; }
.school-item { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 6px 8px; border-radius: 14px; cursor: pointer; font-size: 15px; line-height: 1.45; color: var(--ink); }
.school-item:focus-visible { outline: 3px solid var(--brand); outline-offset: 1px; }
.school-item:hover { background: var(--surface-2); }
.school-dot { position: relative; z-index: 1; flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--ink-3); background: var(--surface); color: transparent; transition: background .2s ease-out, border-color .2s ease-out, transform .2s ease-out; }
.school-dot .icon { width: 16px; height: 16px; stroke-width: 3; }
.school-li.is-done .school-dot { background: var(--lv, var(--brand)); border-color: var(--lv, var(--brand)); color: var(--lv-ink, #16181D); }
.school-li.is-done .school-title { color: var(--ink-2); }
.school-li.is-done .school-item:active .school-dot, .school-item:active .school-dot { transform: scale(.9); }
.school-watch { flex: none; display: inline-flex; align-items: center; gap: 4px; min-height: 40px; padding: 0 10px; border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--ink-2); text-decoration: none; background: var(--surface-2); }
.school-watch:hover { color: var(--ink); }
@media (max-width: 380px) { .school-watch span { display: none; } .school-watch { width: 40px; justify-content: center; padding: 0; } }
@keyframes school-pop { 0% { transform: scale(1); } 40% { transform: scale(1.025); box-shadow: 0 0 0 4px color-mix(in srgb, var(--success) 35%, transparent), var(--sf-shadow); } 100% { transform: scale(1); } }
.school-sec.is-celebrate { animation: school-pop .6s ease-out; }
.school-toast { position: fixed; z-index: 40; inset-inline: 16px; bottom: 20px; margin-inline: auto; max-width: 440px; display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 16px; border-radius: 16px; background: #16181D; color: #fff; box-shadow: var(--sf-shadow); font-size: 14px; }
.school-toast[hidden] { display: none; }
.school-toast span { flex: 1; }
.school-toast .btn { flex: none; }
.has-tabbar .school-toast { bottom: calc(84px + env(safe-area-inset-bottom)); }
@media (min-width: 1024px) { .has-tabbar .school-toast { bottom: 20px; } }
@media (prefers-reduced-motion: reduce) { .school-sec.is-celebrate { animation: none; } .school-ring-fg, .school-dot { transition: none; } }

/* بطاقة الرئيسية وصفحة الولي */
.school-card { display: flex; align-items: center; gap: 14px; padding: 14px 16px; margin-top: 12px; color: var(--ink); text-decoration: none; }
.school-card-text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.school-card-text strong { font-size: 15px; }
.school-card-text small { font-size: 13px; line-height: 1.45; }
.school-card.is-stale { box-shadow: 0 0 0 2px var(--brand), var(--sf-shadow); }

/* لوحة الأستاذ */
.school-remind p { margin: 0 0 10px; }
.school-remind .check { margin: 4px 0 12px; }
.school-stats { padding: 16px 18px; margin-top: 12px; }
.school-stats p { margin: 0 0 4px; }
.school-wilayas { margin-top: 12px; }
.school-items-admin, .school-students { padding: 16px 18px; margin-top: 12px; }
.school-items-admin h3, .school-students h3 { margin: 0 0 8px; font-size: 16px; }
.school-sec-admin { margin: 12px 0 4px; font-weight: 800; font-size: 14px; color: var(--ink-2); }
.school-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.school-bars li { display: grid; grid-template-columns: 1fr 44px; grid-template-areas: "t n" "b b"; gap: 4px 8px; align-items: center; }
.school-bar-title { grid-area: t; font-size: 14px; line-height: 1.4; }
.school-bar-n { grid-area: n; font-size: 13px; font-weight: 800; text-align: end; }
.school-bar { grid-area: b; height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.school-bar > span { display: block; height: 100%; border-radius: inherit; background: var(--sf-teal); }
.school-students ul { list-style: none; margin: 0; padding: 0; }
.school-students li { display: grid; gap: 2px; padding: 10px 0; border-bottom: 1px dashed var(--line); }
.school-students li:last-child { border-bottom: 0; }
.school-students li a { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; min-height: 32px; color: var(--ink); text-decoration: none; }
.cur-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.cur-sec { margin-top: 10px; font-weight: 800; font-size: 14px; color: var(--ink-2); }
.cur-sec:first-child { margin-top: 0; }
.cur-item { padding: 4px 8px; }
.cur-row { display: flex; align-items: center; gap: 8px; min-height: 48px; list-style: none; cursor: pointer; }
.cur-row::-webkit-details-marker { display: none; }
.cur-handle { display: grid; place-items: center; width: 32px; height: 44px; color: var(--ink-3); cursor: grab; touch-action: none; flex: none; }
.cur-n { flex: none; min-width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--surface-2); font-size: 12px; font-weight: 800; }
.cur-title { flex: 1; min-width: 0; font-size: 15px; line-height: 1.4; }
.cur-due { flex: none; font-size: 12px; font-weight: 700; color: var(--ink-2); direction: ltr; }
.cur-linked { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: color-mix(in srgb, var(--sf-teal) 16%, var(--surface)); color: color-mix(in srgb, var(--sf-teal) 70%, var(--sf-text-mix)); }
.cur-pen { flex: none; color: var(--ink-3); margin-inline: 4px; }
.cur-edit[open] > .cur-row { border-bottom: 1px dashed var(--line); margin-bottom: 12px; }
.cur-edit .form { display: grid; gap: 12px; padding: 0 6px; }
.cur-edit .btn-link { margin: 8px 6px 8px; min-height: 40px; }
.school-wilaya-edit { margin-top: 12px; }
.school-wilaya-edit > summary { display: inline-flex; align-items: center; gap: 4px; min-height: 40px; font-size: 14px; color: var(--ink-2); cursor: pointer; }
.school-wilaya-edit[open] > summary { margin-bottom: 8px; }
.family-delete > summary { min-height: 40px; display: flex; align-items: center; }
.school-remind .check { min-height: 40px; align-items: center; }
.school-remind .check input { margin-top: 0; }
.school-students li a { min-height: 40px; }
.cur-add { margin-top: 12px; }
.cur-add > summary { list-style: none; cursor: pointer; display: flex; align-items: center; min-height: 40px; }
.cur-add > summary::-webkit-details-marker { display: none; }
.cur-add > summary h3 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 16px; }
.cur-add[open] > summary { margin-bottom: 8px; }
.cur-add .form { display: grid; gap: 12px; }
.cur-add p { margin: 0; }
/* تحديد دروس الرزنامة وحذفها معًا، والاختيار من دروس المنصة */
.cur-item { display: flex; align-items: flex-start; gap: 4px; }
.cur-pickhit { flex: none; display: grid; place-items: center; width: 40px; height: 48px; cursor: pointer; }
.cur-item > .cur-edit { flex: 1; min-width: 0; }
.cur-item.is-picked { background: var(--brand-soft); }
.cur-sec .org-all { font-weight: 800; font-size: 14px; color: var(--ink-2); min-height: 40px; }
.cur-all { margin: 8px 6px 0; font-weight: 700; }
body:not(.cur-js) .cur-all, body:not(.cur-js) [data-all-sec], body:not(.cur-js) [data-all-unit] { display: none; }
body:not(.cur-js) .cur-unit .org-all { display: none; }
.cur-bar { margin-top: 12px; }
.cur-bar .btn-danger.is-armed { box-shadow: 0 0 0 3px color-mix(in srgb, #B42318 30%, transparent); }
.cur-confirm { min-height: 40px; align-items: center; }
.cur-pickform { display: grid; gap: 10px; }
.cur-pickform h4 { margin: 0; font-size: 15px; }
.cur-pickform p { margin: 0; }
.cur-unit { border-radius: 14px; background: var(--surface-2); padding: 0 10px; }
.cur-unit > summary { display: flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 700; font-size: 14px; cursor: pointer; }
.cur-unit > summary span { flex: 1; min-width: 0; }
.cur-unit[open] { padding-bottom: 8px; }
.cur-unit ul { list-style: none; margin: 0; padding: 0; }
.cur-unit li { border-top: 1px dashed var(--line); }
.cur-unit li label, .cur-unit li.is-added { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 14px; line-height: 1.4; cursor: pointer; }
.cur-unit li label span, .cur-unit li.is-added > span:nth-child(2) { flex: 1; min-width: 0; }
.cur-unit li.is-added { color: var(--ink-2); cursor: default; }
.cur-pickbox { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 6px; background: var(--success-soft); color: var(--success); flex: none; }
.cur-or { display: flex; align-items: center; gap: 10px; margin: 16px 0 8px !important; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.cur-or::before, .cur-or::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.cur-confirm[hidden] { display: none; }
.cur-row { flex-wrap: wrap; }
.cur-link-title { flex-basis: 100%; display: flex; align-items: flex-start; gap: 6px; margin: -6px 0 8px; padding-inline-start: 74px; font-size: 13px; font-weight: 700; line-height: 1.4; color: color-mix(in srgb, var(--sf-teal) 70%, var(--sf-text-mix)); }
.cur-link-title .icon { width: 15px; height: 15px; flex: none; margin-top: 2px; }
.cur-bar { position: relative; }
.cur-linkpop { position: static; }
.cur-linkpop .org-pop-body { inset-inline: 0; min-width: 0; max-width: none; width: auto; }
.cur-linkpop .org-pop-body .field { margin: 0; }

/* فيديو يشرح عدة دروس من البرنامج: السطر الثاني وما بعده «نفس الفيديو السابق» */
.items > li.lv-same .lv-thumb { opacity: .55; }
/* صفحة التقدم: «جزء 1»، «جزء 2» */
.school-parts { display: flex; gap: 4px; flex: none; }
@media (max-width: 380px) { .school-parts .school-watch span { display: inline; } .school-parts .school-watch { width: auto; padding: 0 8px; } .school-parts .school-watch .icon { display: none; } }
/* تعديل درس في الرزنامة: فيديوهاته */
.cur-videos { border: 0; padding: 0; margin: 0; display: grid; gap: 6px; }
.cur-videos legend { font-weight: 700; font-size: 14px; margin-bottom: 6px; padding: 0; }
.cur-videos .check { min-height: 40px; align-items: center; font-size: 14px; }
/* صفحة الفيديو: دروس البرنامج التي يشرحها */
.topic-pick { border-radius: 16px; background: var(--surface-2); padding: 0 14px; }
.topic-pick > summary { display: grid; gap: 2px; min-height: 52px; align-content: center; padding: 8px 0; cursor: pointer; font-weight: 700; font-size: 15px; }
.topic-pick > summary small { font-weight: 600; font-size: 13px; color: color-mix(in srgb, var(--sf-teal) 70%, var(--sf-text-mix)); line-height: 1.45; }
.topic-pick > summary small.muted { color: var(--ink-3); }
.topic-pick[open] { padding-bottom: 10px; }
.topic-pick > p { margin: 0 0 8px; }
.topic-list { display: grid; max-height: 60vh; overflow-y: auto; overscroll-behavior: contain; }
.topic-sec { margin: 10px 0 2px; font-weight: 800; font-size: 13px; color: var(--ink-2); }
.topic-item { min-height: 44px; align-items: center; font-size: 14px; line-height: 1.4; border-top: 1px dashed var(--line); }

/* ---------- النتائج: آخر اختبار بارز، والباقي بالضغط ---------- */
.res-last { position: relative; display: grid; gap: 6px; padding: 16px 18px; color: var(--ink); text-decoration: none; border-inline-start: 5px solid var(--line); }
.res-last.res-pass { border-inline-start-color: var(--success); }
.res-last.res-fail { border-inline-start-color: var(--danger); }
.res-label { font-size: 13px; color: var(--label); }
.res-title { font-size: 16px; font-weight: 800; line-height: 1.4; }
.res-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.res-score { font-size: 26px; font-weight: 800; line-height: 1.1; }
.res-row .pill { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; }
.res-date { margin-inline-start: auto; }
.score-pass { background: var(--success-soft); border-color: transparent; color: var(--success-ink); }
.score-fail { background: var(--danger-soft); border-color: transparent; color: var(--danger-ink); }
.res-more { margin-top: 10px; }
.res-more > summary { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 16px; border-radius: var(--radius-btn); background: var(--surface); border: 1px solid var(--line); font-weight: 700; cursor: pointer; list-style: none; }
.res-more > summary::-webkit-details-marker { display: none; }
.res-more .res-chev { margin-inline-start: auto; transition: transform 200ms ease-out; }
.res-more[open] .res-chev { transform: rotate(180deg); }
.res-more > ol { margin-top: 10px; }
@media (prefers-reduced-motion: reduce) { .res-more .res-chev { transition: none; } }

/* «حسابي» للولي */
.acc-menu { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.acc-menu .action-row, .acc-link { align-items: center; background: var(--surface); border: 0; box-shadow: var(--shadow); text-decoration: none; min-height: 64px; }
.acc-menu .action-row > span, .acc-link > span { flex: 1; display: grid; gap: 2px; }
.acc-menu .action-row small, .acc-link small { color: var(--ink-2); font-size: 14px; }
.acc-menu .action-row > .icon:first-child, .acc-link > .icon:first-child { margin: 0; color: var(--ink-2); }
.acc-link { margin-top: 24px; }

/* ==========================================================================
   الشريط السفلي (10 نوفمبر 2026): خمسة أزرار متساوية لكل نوع حساب، بلا زر عائم.
   النشط: أيقونته في كبسولة صفراء (نص أسود)، واسمه غامق، وتحته علامة صغيرة صفراء.
   ========================================================================== */
.tabbar { align-items: stretch; padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); background: var(--surface); border-top: 0; box-shadow: 0 -1px 0 rgba(16,24,40,.05), 0 -6px 18px rgba(16,24,40,.05); }
.tabbar .tab { position: relative; display: grid; justify-items: center; align-content: center; gap: 3px; min-width: 0; min-height: 56px; padding: 2px 0 6px; color: var(--ink-2); font-weight: 600; }
.tab-ic { position: relative; display: grid; place-items: center; width: 52px; height: 30px; border-radius: 999px; transition: background-color 180ms ease-out; }
.tabbar .tab .icon { width: 22px; height: 22px; }
.tab-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; line-height: 1.25; }
.tabbar .tab[aria-current="page"] { color: var(--ink); font-weight: 800; }
.tabbar .tab[aria-current="page"] .tab-ic { background: var(--brand); }
.tabbar .tab[aria-current="page"] .tab-ic .icon { color: #16181D; }
.tabbar .tab[aria-current="page"]::after { position: absolute; bottom: 1px; width: 16px; height: 3px; }
.tab-dot { position: absolute; top: 2px; inset-inline-end: 10px; width: 10px; height: 10px; border-radius: 50%; background: var(--danger); box-shadow: 0 0 0 2px var(--surface); }
@media (max-width: 360px) { .tab-ic { width: 44px; } }
@media (prefers-reduced-motion: reduce) { .tab-ic { transition: none; } }

/* ==========================================================================
   تطبيق الهاتف (10 نوفمبر 2026): رئيسية التلميذ والولي، الاختبارات، الإشعارات، أبنائي، التقرير.
   نفس الهوية: بطاقات بيضاء بظل واسع، لون المستوى، والأصفر للزر الرئيسي فقط.
   ========================================================================== */
.sec-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.sec-head h2 { margin: 0; }
.section > h2 { margin-bottom: 10px; }

/* الحصة القادمة (مختصرة) */
.next-card { display: grid; gap: 12px; padding: 14px; margin-bottom: 14px; background: #16181D; color: #fff; }
.next-main { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; min-height: 48px; }
.next-ic { display: grid; place-items: center; width: 46px; height: 46px; flex: none; border-radius: 14px; background: #FBBF24; color: #16181D; }
.next-text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.next-text small { font-size: 13px; color: #C9CDD6; }
.next-text strong { font-size: 18px; font-weight: 800; line-height: 1.35; }
.next-text .change-tag { justify-self: start; }
.next-go { color: #C9CDD6; flex: none; }
.next-card .join-form .btn { min-height: 48px; }

/* آخر درس + «واصل التعلم» */
.learn-card { display: grid; gap: 12px; padding: 14px; margin-bottom: 14px; }
.learn-last { display: flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; min-height: 48px; }
.learn-thumb { display: grid; place-items: center; width: 46px; height: 46px; flex: none; border-radius: 14px; background: color-mix(in srgb, var(--lv, var(--sf-teal)) 18%, var(--surface)); color: color-mix(in srgb, var(--lv, var(--sf-teal)) 70%, var(--sf-text-mix)); }
.learn-text { flex: 1; min-width: 0; display: grid; gap: 2px; margin: 0; }
.learn-text small { font-size: 13px; color: var(--ink-2); }
.learn-text strong { font-size: 15px; font-weight: 800; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.learn-go { min-height: 50px; }
.learn-next { margin: -4px 0 0; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* قوائم (اختبارات، إشعارات، آخر ما شاهده) */
.feed-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.feed-row { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 10px 14px; color: var(--ink); text-decoration: none; border-radius: 18px; }
.feed-text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.feed-text strong { font-size: 15px; font-weight: 700; line-height: 1.4; }
.feed-text small { font-size: 13px; line-height: 1.45; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.feed-kid { color: var(--ink-2); font-weight: 600; }
.feed-ic { flex: none; }
.feed-brand { background: var(--brand-soft); color: #8A5A00; }
.feed-success { background: var(--success-soft); color: var(--success-ink); }
.feed-danger { background: var(--danger-soft); color: var(--danger-ink); }
.feed-warn { background: color-mix(in srgb, var(--sf-orange) 16%, var(--surface)); color: color-mix(in srgb, var(--sf-orange) 70%, var(--sf-text-mix)); }
.feed-soft { background: color-mix(in srgb, var(--sf-teal) 14%, var(--surface)); color: color-mix(in srgb, var(--sf-teal) 70%, var(--sf-text-mix)); }
.feed-new { width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--danger); }
.feed-row .pill, .feed-row .score-chip { flex: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .feed-brand { color: #FBBF24; } }
:root[data-theme="dark"] .feed-brand { color: #FBBF24; }

/* التقدم في المستوى (بالضغط: كل مقطع) */
.prog-card { padding: 0; margin: 14px 0; }
.prog-card > summary { display: flex; align-items: center; gap: 14px; padding: 14px; list-style: none; cursor: pointer; }
.prog-card > summary::-webkit-details-marker { display: none; }
.prog-text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.prog-text strong { font-size: 17px; font-weight: 800; }
.prog-hint { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; }
.prog-chev { transition: transform 160ms ease-out; }
.prog-card[open] .prog-chev { transform: rotate(180deg); }
.prog-units { list-style: none; margin: 0; padding: 0 14px 14px; display: grid; gap: 8px; }
.prog-units-open { padding: 0; }
.prog-unit { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; padding: 10px 12px; border-radius: 14px; background: var(--surface-2); color: var(--ink); text-decoration: none; min-height: 44px; }
.prog-unit-title { font-size: 14px; font-weight: 700; line-height: 1.4; }
.prog-unit-n { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: var(--ink-2); white-space: nowrap; }
.is-done .prog-unit-n { color: var(--success-ink); }
.prog-bar { grid-column: 1 / -1; height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; }
.prog-bar > span { display: block; height: 100%; border-radius: inherit; background: var(--lv, var(--brand)); }
.is-done .prog-bar > span { background: var(--success); }
@media (prefers-reduced-motion: reduce) { .prog-chev { transition: none; } }

/* الولي: بطاقات الأبناء */
.kid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.kid-pick { position: relative; display: flex; align-items: center; gap: 10px; min-height: 64px; padding: 10px 12px; border: 2px solid transparent; color: var(--ink); text-decoration: none; border-radius: 18px; }
.kid-pick.is-on { border-color: #FBBF24; }
.kid-pick-text { display: grid; min-width: 0; }
.kid-pick-text strong { font-size: 15px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kid-pick-text small { font-size: 12.5px; color: var(--ink-2); }
.kid-cards:has(> :only-child) { grid-template-columns: 1fr; }
.report-btn { margin-top: 18px; min-height: 50px; }

/* «أبنائي» */
.kids-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.kid-card { display: grid; gap: 14px; padding: 16px; }
.kid-card-head { display: flex; align-items: center; gap: 12px; }
.kid-card-name { display: grid; gap: 6px; min-width: 0; }
.kid-card-name strong { font-size: 17px; font-weight: 800; }
.me-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.kid-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
.kid-stats > div { padding: 10px; border-radius: 14px; background: var(--surface-2); display: grid; gap: 2px; text-align: center; }
.kid-stats dt { font-size: 12px; color: var(--ink-2); line-height: 1.35; }
.kid-stats dd { margin: 0; font-size: 17px; font-weight: 800; }
.kid-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.kid-actions .btn { min-height: 46px; }
.kid-avatar-lg { width: 56px; height: 56px; font-size: 22px; }
.me-head { display: flex; align-items: center; gap: 14px; }
.me-head h1 { margin: 0 0 6px; font-size: 24px; }

/* النتائج (الولي) */
.res-sum { margin-bottom: 14px; }

/* التقرير الدراسي */
.report-card { padding: 16px; margin-bottom: 12px; }
.report-card h2 { font-size: 17px; margin: 0 0 8px; }
.report-card p { margin: 0 0 8px; }
.report-card .results-list { box-shadow: none; padding: 0; }
@media print {
  .tabbar, .site-header, .site-footer, .staging, .drawer, .report-card + .actions, .preview-bar { display: none !important; }
  .report-card { box-shadow: none; border: 1px solid #ddd; break-inside: avoid; }
}
.resume-note { margin: 8px 2px 0; font-size: 13px; color: var(--ink-2); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.resume-note .btn-link { min-height: 40px; font-size: 13px; font-weight: 700; }
/* «بياناتك» في «حسابي»: هامش داخلي للبطاقة */
.card.legal-links { padding: 16px; }
.card.legal-links > p { margin: 0 0 12px; }

/* ===================== حركات transitions.dev (طلب الأستاذ 11 نوفمبر 2026) =====================
   الرموز من .claude/skills/transitions-dev/_root.css؛ وكل الحركات تتوقف لمن فعّل «تقليل الحركة» (القاعدة العامة أعلاه). */
:root {
  --duration-quick: 150ms;
  --duration-fast: 250ms;
  --duration-very-slow: 500ms;
  --ease-smooth-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-bob: cubic-bezier(0.34, 1.35, 0.64, 1);
}

/* خانات المستوى: علامة صفراء تنزلق بين الخانات (tabs sliding)، والمحتوى يدخل من جهة الخانة (page side-by-side) */
.lv-tabs { position: sticky; }
/* أثناء الانزلاق فقط تحمل العلامة اللونَ؛ بعده يعود الأصفر للخانة نفسها (فلا يتعلق ظهوره بالكود) */
.lv-tabs.is-sliding a[aria-current="page"] { background: transparent; }
.lv-tabs a { position: relative; z-index: 1; transition: color var(--duration-fast) var(--ease-smooth-out); }
.lv-tabs-pill { position: absolute; top: 5px; left: 0; height: calc(100% - 10px); width: 0; border-radius: 999px; background: var(--brand); z-index: 0; pointer-events: none;
  transition: transform var(--duration-fast) var(--ease-smooth-out), width var(--duration-fast) var(--ease-smooth-out); }
.lv-tabs-pill.no-anim { transition: none; }
.lv-enter { animation: lv-enter var(--duration-fast) var(--ease-smooth-out); }
@keyframes lv-enter { from { opacity: 0; transform: translateX(calc(var(--lv-from, 1) * 8px)); filter: blur(3px); } }

/* نافذة الضباب: تكبير ناعم من الوسط، وإغلاق أسرع وأخف (modal open / close) */
.blur-sheet[open] .sheet-tiles { animation: sheet-in var(--duration-fast) var(--ease-smooth-out); }
.blur-sheet[open]::backdrop { animation: sheet-fade var(--duration-fast) var(--ease-smooth-out); }
.blur-sheet.is-closing .sheet-tiles { animation: sheet-out var(--duration-quick) var(--ease-smooth-out) forwards; }
.blur-sheet.is-closing::backdrop { animation: sheet-fade var(--duration-quick) var(--ease-smooth-out) reverse forwards; }
@keyframes sheet-in { from { opacity: 0; transform: scale(.96); } }
@keyframes sheet-out { to { opacity: 0; transform: scale(.96); } }
@keyframes sheet-fade { from { opacity: 0; } }

/* خطوات الاشتراك: الخطوة التالية تدخل من اليسار، والسابقة من اليمين */
.sw-step.sw-in { animation: lv-enter var(--duration-fast) var(--ease-smooth-out); }

/* «وصل طلبك»: علامة ✓ تُرسم (success check) */
.sw-check { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; background: var(--success-soft); color: var(--success); }
.sw-check svg { width: 34px; height: 34px; overflow: visible; }
.sw-check path { stroke-dasharray: 30; stroke-dashoffset: 30; }
.sw-done:not([hidden]) .sw-check { animation: check-pop var(--duration-very-slow) var(--ease-bob) both; }
.sw-done:not([hidden]) .sw-check path { animation: check-draw var(--duration-very-slow) var(--ease-smooth-out) 120ms forwards; }
@keyframes check-pop { from { opacity: 0; transform: translateY(24px) rotate(40deg); filter: blur(8px); } }
@keyframes check-draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .sw-check path { stroke-dashoffset: 0; } }

/* المبلغ في الشريط السفلي: يتبدل بهدوء صعودًا أو نزولًا (number subtle change) */
[data-bar-total].is-up { animation: num-up var(--duration-fast) var(--ease-smooth-out); }
[data-bar-total].is-down { animation: num-down var(--duration-fast) var(--ease-smooth-out); }
@keyframes num-up { from { opacity: 0; transform: translateY(6px); filter: blur(2px); } }
@keyframes num-down { from { opacity: 0; transform: translateY(-6px); filter: blur(2px); } }

/* خانة ناقصة: اهتزاز قصير وحافة حمراء (error state shake) */
.input[aria-invalid="true"] { border-color: var(--danger-ink); }
.input.is-shaking { animation: shake 280ms linear; }
@keyframes shake {
  0% { transform: translateX(0); animation-timing-function: var(--ease-smooth-out); }
  28.57% { transform: translateX(6px); animation-timing-function: var(--ease-smooth-out); }
  57.14% { transform: translateX(-6px); animation-timing-function: var(--ease-smooth-out); }
  78.57% { transform: translateX(4px); animation-timing-function: var(--ease-smooth-out); }
  100% { transform: translateX(0); }
}

/* سطر عنوان الخطوة: العنوان، وزر صغير في طرفه (إضافة ابن في خطوة المبلغ) */
.sw-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.form-card > .sw-head > h2 { margin-bottom: 0; }
/* ---------- الصفحة الرئيسية (home) ---------- */
.home-hero { position: relative; overflow: hidden; display: grid; gap: 8px; padding: 26px 20px 30px; border-inline-start: 6px solid var(--brand); }
.home-hero h1 { margin-top: 16px; font-size: 32px; font-weight: 800; line-height: 1.3; }
.home-lead { margin: 10px 0 0; max-width: 54ch; font-size: 16px; line-height: 1.75; color: var(--ink-2); }
.home-hero .actions .btn { flex: 1 1 200px; white-space: nowrap; }
@media (min-width: 820px) {
  .home-hero { padding: 40px 36px 44px; }
  .home-hero h1 { font-size: 40px; }
  .home-hero .actions .btn { flex: 0 0 auto; }
}
.home-head { margin-bottom: 14px; }
.home-head h2 { margin: 0; font-size: 20px; font-weight: 800; }
.home-head p { margin: 4px 0 0; font-size: 15px; }

/* بطاقات المستويات */
.hl-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
.hl-card { position: relative; display: flex; flex-direction: column; gap: 10px; height: 100%; padding: 0 18px 18px; overflow: hidden; color: var(--ink); text-decoration: none; transition: transform 150ms ease-out, box-shadow 150ms ease-out; }
.hl-card:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -14px rgba(30, 32, 60, .22); }
.hl-card:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.hl-top { display: flex; flex-direction: column; gap: 2px; margin-inline: -18px; margin-bottom: 4px; padding: 18px 18px 16px; background: var(--lv); color: var(--lv-ink); background-image: repeating-linear-gradient(135deg, transparent 0 22px, rgba(255, 255, 255, .07) 22px 25px); }
.hl-top .level-year { font-size: 24px; }
.hl-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.hl-stats > span { display: flex; align-items: baseline; gap: 6px; padding: 10px 12px; border-radius: 16px; background: color-mix(in srgb, var(--lv) 10%, var(--surface)); }
.hl-stats b { font-size: 24px; font-weight: 800; line-height: 1; color: color-mix(in srgb, var(--lv) 75%, var(--ink)); }
.lv-1am .hl-stats b { color: var(--ink); }
.hl-stats small { font-size: 14px; color: var(--ink-2); }
.hl-free { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: var(--success-ink); }
.hl-free-off { color: var(--label); font-weight: 500; }
.hl-go { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; margin-top: auto; border-radius: var(--radius-btn); background: var(--surface-2); border: 1px solid var(--line); font-weight: 700; font-size: 15px; }
.hl-card:hover .hl-go { border-color: var(--ink-3); }

/* الدورات الخاصة: داكنة بلمسة صفراء */
.hc-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.hc-card { display: flex; align-items: center; gap: 14px; min-height: 88px; height: 100%; padding: 16px 18px; border-radius: var(--radius-card); background: #16181D; color: #F3F4F6; text-decoration: none; box-shadow: 0 18px 40px -14px rgba(22, 24, 29, .45); background-image: repeating-linear-gradient(135deg, transparent 0 18px, rgba(251, 191, 36, .06) 18px 20px); transition: transform 150ms ease-out; }
.hc-card:hover { transform: translateY(-2px); }
.hc-card:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }
.hc-icon { display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 50%; background: var(--brand); color: #16181D; }
.hc-body { flex: 1; min-width: 0; display: grid; gap: 3px; }
.hc-body strong { font-size: 17px; font-weight: 800; }
.hc-body small { font-size: 14px; color: #C9CDD5; }
.hc-body .hc-free { display: inline-flex; align-items: center; gap: 5px; color: #86EFAC; }
.hc-go { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .2); color: var(--brand); }
:root[data-theme="dark"] .hc-card { background-color: #23262E; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hc-card { background-color: #23262E; } }

/* المميزات */
.hf-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
.hf-item { display: flex; flex-direction: column; gap: 6px; padding: 18px; }
.hf-item strong { font-size: 16px; font-weight: 800; }
.hf-item .muted { font-size: 14px; line-height: 1.65; }
.hf-icon { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 6px; border-radius: 50%; background: var(--brand-soft); color: var(--ink); }
.hf-item:nth-child(2) .hf-icon { background: color-mix(in srgb, var(--sf-teal, #14A3A0) 14%, var(--surface)); }
.hf-item:nth-child(3) .hf-icon { background: color-mix(in srgb, var(--sf-violet, #7B61C9) 14%, var(--surface)); }
.hf-item:nth-child(4) .hf-icon { background: color-mix(in srgb, var(--success) 14%, var(--surface)); }
.hf-item:nth-child(5) .hf-icon { background: color-mix(in srgb, var(--sf-orange, #EE8A2E) 16%, var(--surface)); }
.home-how-cta { justify-content: center; margin-top: 18px; }

/* الأسئلة الشائعة */
.faq { padding: 4px 18px; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item:last-child { border-bottom: 0; }
.faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 10px 0; font-size: 16px; font-weight: 700; cursor: pointer; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-plus { flex: none; color: var(--ink-2); transition: transform 200ms ease-out; }
.faq-item[open] .faq-plus { transform: rotate(45deg); }
.faq-item p { margin: 0 0 16px; font-size: 15px; line-height: 1.75; color: var(--ink-2); }

/* التذييل الكامل */
.site-footer-full { margin-top: 24px; padding: 28px 16px 24px; text-align: start; border-top: 1px solid var(--line); }
.ff-grid { display: grid; gap: 22px; max-width: 1080px; margin-inline: auto; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); }
.ff-brand { grid-column: 1 / -1; }
@media (min-width: 820px) { .ff-grid { grid-template-columns: 2fr 1fr 1fr 1fr; } .ff-brand { grid-column: auto; } }
.ff-logo { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-size: 16px; }
.ff-logo img { padding: 4px; background: #fff; border-radius: 12px; box-shadow: var(--shadow); }
.ff-brand p { margin: 10px 0 0; max-width: 40ch; font-size: 14px; line-height: 1.7; }
.ff-col { display: flex; flex-direction: column; gap: 2px; }
.ff-col strong { margin-bottom: 4px; font-size: 15px; color: var(--ink); }
.ff-col a { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; color: var(--ink-2); text-decoration: none; font-size: 15px; }
.ff-col a:hover { color: var(--ink); text-decoration: underline; }
.ff-bottom { max-width: 1080px; margin: 18px auto 0 !important; padding-top: 16px; border-top: 1px solid var(--line); font-size: 13px; text-align: center; }
@media (prefers-reduced-motion: reduce) { .hl-card, .hc-card, .faq-plus { transition: none; } }

/* الهاتف: بطاقات أقصر (مستويان في كل صف، والمميزات أفقية) */
@media (max-width: 559px) {
  .hl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .hl-card { padding: 0 12px 12px; gap: 8px; }
  .hl-top { margin-inline: -12px; padding: 14px 12px 12px; }
  .hl-top .level-year { font-size: 19px; }
  .hl-top .level-stage { font-size: 14px; }
  .hl-stats { grid-template-columns: 1fr; gap: 4px; }
  .hl-stats > span { padding: 6px 10px; border-radius: 12px; }
  .hl-stats b { font-size: 18px; }
  .hl-stats small { font-size: 13px; }
  .hl-free { font-size: 13px; align-items: flex-start; line-height: 1.45; }
  .hl-free .icon { flex: none; margin-top: 1px; }
  .hl-go { min-height: 40px; font-size: 14px; }
  .hf-grid { gap: 10px; }
  .hf-item { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 12px; row-gap: 2px; padding: 14px; }
  .hf-icon { grid-row: span 2; width: 44px; height: 44px; margin: 0; }
  .hf-item .muted { font-size: 14px; line-height: 1.6; }
}
@media (max-width: 559px) {
  .home-how .steps { gap: 10px; }
  .home-how .step { display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 12px; row-gap: 2px; padding: 14px; }
  .home-how .step .icon-box { display: none; }
  .home-how .step-num { position: static; grid-row: span 2; width: 34px; height: 34px; }
  .home-how .step strong { font-size: 16px; }
  .home-how .step .muted { font-size: 14px; line-height: 1.6; }
}
@media (min-width: 820px) { .hl-grid { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); } }

/* مراجعة لوحة الأستاذ (12 نوفمبر 2026) */
/* عدّاد الطلبات: دائرة صغيرة لا شريط ممتد (كان يأخذ flex: 1 مثل نص البطاقة) */
.tool-row > .badge-count { flex: none; }
/* مبلغ داخل بطاقة رقم: حبّة تتسع للمبلغ بدل دائرة يخرج منها */
.stat-money strong { width: auto; min-width: 68px; height: 56px; padding-inline: 18px; font-size: 20px; white-space: nowrap; }
/* رابطان في آخر الصفحة: زران واضحان متباعدان بدل نص صغير متلاصق */
.link-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
/* الحصص القادمة على الهاتف: التاريخ والساعة في سطر واحد، والأزرار في سطر تحتهما */
.live-list li { row-gap: 8px; }
.live-list .schedule-when { white-space: nowrap; flex: 0 1 auto; }

/* قسم مطوي في لوحة الأستاذ (الإعدادات، صفحة العائلة): عنوان وسطر وصف وسهم، والمحتوى عند الفتح */
.fold > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; }
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary > span:nth-child(2) { flex: 1; display: grid; gap: 2px; min-width: 0; }
.fold > summary strong { font-size: 17px; }
.fold > summary small { color: var(--ink-2); font-size: 13.5px; }
.fold > summary > .icon:last-child { flex: none; transition: transform var(--duration-fast, .25s) var(--ease-smooth-out, ease); }
.fold[open] > summary > .icon:last-child { transform: rotate(180deg); }
.fold[open] > summary { margin-bottom: 14px; }
.settings-form { display: grid; gap: 12px; }
.settings-form > .fold { margin: 0; }
.save-bar { display: flex; margin-top: 4px; }
.save-bar > .btn { flex: 1; }
/* شرح طويل: سطر «كيف يعمل؟» يُفتح عند الحاجة */
.help-fold { margin-block: 6px 12px; }
.help-fold > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; color: var(--ink-2); font-size: 14px; font-weight: 700; }
.help-fold > summary::-webkit-details-marker { display: none; }
.help-fold > p { margin-top: 4px; }
@media (prefers-reduced-motion: reduce) { .fold > summary > .icon:last-child { transition: none; } }
.settings-form + .fold { margin-top: 14px; }