/* ═══════════════════════════════════════════════
   مدربي (My Coach) — نظام التصميم (مستوحى من iOS Human Interface)
   ═══════════════════════════════════════════════ */
@font-face { font-family: 'Readex'; src: url(../assets/fonts/readex-pro-arabic-400.woff2) format('woff2'); font-weight: 300 450; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF, U+200C-200E; }
@font-face { font-family: 'Readex'; src: url(../assets/fonts/readex-pro-latin-400.woff2) format('woff2'); font-weight: 300 450; font-display: swap; unicode-range: U+0000-00FF, U+2000-206F, U+2212; }
@font-face { font-family: 'Readex'; src: url(../assets/fonts/readex-pro-arabic-600.woff2) format('woff2'); font-weight: 500 650; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF, U+200C-200E; }
@font-face { font-family: 'Readex'; src: url(../assets/fonts/readex-pro-latin-600.woff2) format('woff2'); font-weight: 500 650; font-display: swap; unicode-range: U+0000-00FF, U+2000-206F, U+2212; }
@font-face { font-family: 'Readex'; src: url(../assets/fonts/readex-pro-arabic-700.woff2) format('woff2'); font-weight: 700 900; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF, U+200C-200E; }
@font-face { font-family: 'Readex'; src: url(../assets/fonts/readex-pro-latin-700.woff2) format('woff2'); font-weight: 700 900; font-display: swap; unicode-range: U+0000-00FF, U+2000-206F, U+2212; }
/* خطوط من مجلد الخطوط: هاشن سمرا للعناوين، و YR Speed للشعار والأرقام الكبيرة */
@font-face { font-family: 'Samra'; src: url(../assets/fonts/hacen-samra.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: 'Speed'; src: url(../assets/fonts/yr-speed.woff2) format('woff2'); font-display: swap; }

:root {
  /* iOS system colors — light */
  --bg: #F2F2F7; --bg-elev: #FFFFFF; --fill: #E9E9EE; --fill-2: rgba(120,120,128,.12); --fill-3: rgba(118,118,128,.08);
  --label: #000000; --label-2: rgba(60,60,67,.62); --label-3: rgba(60,60,67,.32); --sep: rgba(60,60,67,.18);
  --tint: #0A84FF; --green: #34C759; --green-ink: #1F8A3B; --red: #FF3B30; --orange: #FF9500; --yellow: #FFCC00;
  --teal: #30B0C7; --indigo: #5856D6; --pink: #FF2D55; --purple: #AF52DE; --mint: #00C7BE;
  --brand: #16C47F; --brand-2: #0FA36A; --brand-ink: #0B7F52; --brand-soft: rgba(22,196,127,.12);
  --ring-move: #FA114F; --ring-ex: #A6FF00; --ring-stand: #00F0FF;
  --p: #0A84FF; --c: #FF9F0A; --f: #FF375F;
  --bar-bg: rgba(249,249,249,.82);
  --card-shadow: 0 1px 0 rgba(0,0,0,.02), 0 6px 24px rgba(0,0,0,.05);
  --r-sm: 10px; --r: 14px; --r-lg: 22px;
  --font: 'Readex', -apple-system, 'SF Arabic', system-ui, 'Segoe UI', Tahoma, sans-serif;
  --font-display: 'Samra', 'Readex', -apple-system, sans-serif;
  --font-brand: 'Speed', 'Samra', 'Readex', sans-serif;
  --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px);
  --tabbar-h: 56px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #000000; --bg-elev: #1C1C1E; --fill: #2C2C2E; --fill-2: rgba(120,120,128,.24); --fill-3: rgba(118,118,128,.18);
    --label: #FFFFFF; --label-2: rgba(235,235,245,.62); --label-3: rgba(235,235,245,.3); --sep: rgba(84,84,88,.55);
    --tint: #0A84FF; --green: #30D158; --green-ink: #30D158; --red: #FF453A; --orange: #FF9F0A; --brand-ink: #3DDC97; --brand-soft: rgba(22,196,127,.18);
    --bar-bg: rgba(22,22,24,.78); --card-shadow: none; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #000000; --bg-elev: #1C1C1E; --fill: #2C2C2E; --fill-2: rgba(120,120,128,.24); --fill-3: rgba(118,118,128,.18);
  --label: #FFFFFF; --label-2: rgba(235,235,245,.62); --label-3: rgba(235,235,245,.3); --sep: rgba(84,84,88,.55);
  --green: #30D158; --green-ink: #30D158; --red: #FF453A; --orange: #FF9F0A; --brand-ink: #3DDC97; --brand-soft: rgba(22,196,127,.18);
  --bar-bg: rgba(22,22,24,.78); --card-shadow: none; color-scheme: dark;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; background: var(--bg); }
body { color: var(--label); font-family: var(--font); font-size: 17px; line-height: 1.45; -webkit-font-smoothing: antialiased; overscroll-behavior-y: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--tint); text-decoration: none; }
img { -webkit-user-drag: none; }
.num { font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; }
.hidden { display: none !important; }
.muted { color: var(--label-2); }
.faint { color: var(--label-3); }
.t-large { font-family: var(--font-display); font-size: 36px; font-weight: 400; line-height: 1.2; }
.brand-font { font-family: var(--font-brand); font-weight: 400; }
.t-1 { font-family: var(--font-display); font-size: 29px; font-weight: 400; line-height: 1.25; }
.t-2 { font-family: var(--font-display); font-size: 23px; font-weight: 400; line-height: 1.3; }
.t-3 { font-size: 20px; font-weight: 700; }
.t-head { font-size: 17px; font-weight: 650; }
.t-sub { font-size: 15px; }
.t-foot { font-size: 13px; }
.t-cap { font-size: 12px; }
.bold { font-weight: 700; }
.ink-brand { color: var(--brand-ink); }
.ink-red { color: var(--red); } .ink-orange { color: var(--orange); } .ink-blue { color: var(--tint); }

.ico { width: 22px; height: 22px; fill: currentColor; flex: none; vertical-align: middle; }
.ico.sm { width: 17px; height: 17px; } .ico.lg { width: 28px; height: 28px; }
[dir="rtl"] .flip { transform: scaleX(-1); }
.em { width: 28px; height: 28px; object-fit: contain; flex: none; vertical-align: middle; }
.em.lg { width: 44px; height: 44px; } .em.xl { width: 64px; height: 64px; } .em.sm { width: 22px; height: 22px; }

/* ═════════ هيكل التطبيق ═════════ */
#app { min-height: 100dvh; }
.screen { padding: calc(var(--safe-t) + 8px) 16px calc(var(--tabbar-h) + var(--safe-b) + 28px); max-width: 720px; margin: 0 auto; animation: screenIn .35s cubic-bezier(.2,.8,.2,1); }
@keyframes screenIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.screen.push { animation: pushIn .38s cubic-bezier(.2,.8,.2,1); }
@keyframes pushIn { from { opacity: .4; transform: translateX(-28%); } to { opacity: 1; transform: none; } }

/* شريط العنوان الصغير اللي بيظهر مع السكرول */
.navbar { position: fixed; top: 0; inset-inline: 0; z-index: 30; padding: calc(var(--safe-t) + 6px) 12px 8px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  background: var(--bar-bg); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-bottom: .5px solid var(--sep);
  opacity: 0; pointer-events: none; transition: opacity .2s; }
.navbar.show { opacity: 1; pointer-events: auto; }
.navbar .nb-title { font-weight: 650; font-size: 17px; text-align: center; }
.navbar .nb-end { justify-self: end; display: flex; gap: 4px; }
.navbar .nb-start { justify-self: start; }

.large-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 10px 2px 14px; }
.large-head .sub { color: var(--label-2); font-size: 15px; font-weight: 600; text-transform: none; }
.back-btn { display: inline-flex; align-items: center; gap: 2px; color: var(--tint); background: none; border: 0; padding: 6px 0; font-size: 17px; }

.avatar { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, var(--brand), var(--teal)); color: #fff; display: grid; place-items: center; font-weight: 700; border: 0; flex: none; }
.icon-btn { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; border: 0; background: var(--fill-2); color: var(--tint); }

/* ═════════ شريط التبويبات السفلي ═════════ */
.tabbar { position: fixed; bottom: 0; inset-inline: 0; z-index: 40; height: calc(var(--tabbar-h) + var(--safe-b)); padding-bottom: var(--safe-b);
  display: grid; grid-template-columns: repeat(6, 1fr); background: var(--bar-bg); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-top: .5px solid var(--sep); }
.tabbar button { background: none; border: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--label-3); font-size: 10px; white-space: nowrap; font-weight: 600; transition: color .15s; }
.tabbar button .ico { width: 25px; height: 25px; }
.tabbar button.on { color: var(--brand); }
.tabbar button.on .ico { animation: tabPop .45s cubic-bezier(.3,1.6,.5,1); }
@keyframes tabPop { 40% { transform: scale(.82); } 70% { transform: scale(1.12); } }
.tabbar button:active .ico { transform: scale(.88); }
@media (min-width: 900px) {
  .tabbar { top: 0; bottom: 0; inset-inline-end: auto; inset-inline-start: 0; width: 92px; height: auto; grid-template-columns: 1fr; grid-auto-rows: 76px; align-content: center; border-top: 0; border-inline-end: .5px solid var(--sep); padding-bottom: 0; }
  .screen { padding-inline-start: 120px; max-width: 860px; padding-bottom: 48px; }
  .navbar { inset-inline-start: 92px; }
}

/* ═════════ البطاقات والقوائم ═════════ */
.card { background: var(--bg-elev); border-radius: var(--r-lg); padding: 16px; box-shadow: var(--card-shadow); position: relative; overflow: hidden; }
.card + .card, .card + .group, .group + .card, .stack > * + * { margin-top: 12px; }
.card.tap { transition: transform .12s; cursor: pointer; }
.card.tap:active { transform: scale(.985); }
.card-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.card-h h3 { margin: 0; font-family: var(--font-display); font-size: 21px; font-weight: 400; }
.sec-title { font-family: var(--font-display); font-size: 23px; font-weight: 400; margin: 26px 2px 10px; display: flex; justify-content: space-between; align-items: baseline; }
.sec-title a, .sec-title button { font-family: var(--font); font-size: 15px; font-weight: 500; color: var(--tint); background: none; border: 0; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (min-width: 700px) { .grid-auto { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .grid-auto > * + * { margin-top: 0 !important; } }

/* قائمة iOS مجمّعة */
.group { background: var(--bg-elev); border-radius: var(--r); overflow: hidden; box-shadow: var(--card-shadow); }
.group-label { font-size: 13px; color: var(--label-2); margin: 22px 16px 6px; text-transform: uppercase; }
.group-foot { font-size: 13px; color: var(--label-2); margin: 6px 16px 0; }
.row { display: flex; align-items: center; gap: 12px; padding: 11px 16px; min-height: 48px; position: relative; background: none; border: 0; width: 100%; text-align: start; }
.row + .row::before { content: ''; position: absolute; top: 0; inset-inline-start: 56px; inset-inline-end: 0; border-top: .5px solid var(--sep); }
.row.plain + .row.plain::before { inset-inline-start: 16px; }
button.row:active, .row.tap:active { background: var(--fill-3); }
.row .grow { flex: 1; min-width: 0; }
.row .r-title { font-size: 17px; }
.row .r-sub { font-size: 13px; color: var(--label-2); }
.row .r-val { color: var(--label-2); font-size: 16px; }
.row .chev { color: var(--label-3); }
.sq { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: #fff; flex: none; }
.sq .ico { width: 18px; height: 18px; }

/* أزرار */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 14px; padding: 13px 18px; font-size: 17px; font-weight: 650; background: var(--fill-2); color: var(--tint); transition: transform .12s, opacity .12s; }
.btn:active { transform: scale(.97); opacity: .85; }
.btn.fill { background: var(--brand); color: #fff; }
.btn.dark { background: var(--label); color: var(--bg-elev); }
.btn.block { width: 100%; }
.btn.sm { padding: 8px 14px; font-size: 15px; border-radius: 99px; }
.btn.xs { padding: 5px 11px; font-size: 13px; border-radius: 99px; }
.btn.danger { color: var(--red); }
.btn:disabled { opacity: .4; }
.pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 99px; font-size: 13px; font-weight: 600; background: var(--fill-2); color: var(--label-2); }
.pill.brand { background: var(--brand-soft); color: var(--brand-ink); }
.pill.warn { background: rgba(255,149,0,.15); color: var(--orange); }
.pill.blue { background: rgba(10,132,255,.13); color: var(--tint); }
.pill.red { background: rgba(255,59,48,.13); color: var(--red); }

/* Segmented control */
.seg { display: flex; background: var(--fill-2); border-radius: 9px; padding: 2px; position: relative; }
.seg button { flex: 1; border: 0; background: none; padding: 6px 8px; font-size: 13px; font-weight: 600; border-radius: 7px; position: relative; z-index: 1; color: var(--label); white-space: nowrap; }
.seg button.on { background: var(--bg-elev); box-shadow: 0 3px 8px rgba(0,0,0,.12), 0 1px 1px rgba(0,0,0,.04); }
:root[data-theme="dark"] .seg button.on { background: #636366; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .seg button.on { background: #636366; } }

/* إدخال */
.field { display: block; }
.field > span { display: block; font-size: 13px; color: var(--label-2); margin: 0 4px 6px; }
.input { width: 100%; border: 0; background: var(--fill-2); border-radius: 12px; padding: 12px 14px; font-size: 17px; outline: none; }
.input:focus { box-shadow: 0 0 0 2px var(--brand); }
.stepper { display: inline-flex; align-items: center; background: var(--fill-2); border-radius: 12px; overflow: hidden; }
.stepper button { border: 0; background: none; width: 44px; height: 44px; font-size: 22px; color: var(--tint); }
.stepper button:active { background: var(--fill-3); }
.stepper input { width: 64px; text-align: center; border: 0; background: none; font-size: 20px; font-weight: 700; outline: none; -moz-appearance: textfield; }
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; }
.toggle { position: relative; width: 51px; height: 31px; flex: none; }
.toggle input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; z-index: 1; }
.toggle i { position: absolute; inset: 0; border-radius: 99px; background: var(--fill); transition: background .2s; }
.toggle i::after { content: ''; position: absolute; top: 2px; inset-inline-start: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 3px 8px rgba(0,0,0,.15); transition: transform .25s cubic-bezier(.3,1.4,.6,1); }
.toggle input:checked + i { background: var(--green); }
.toggle input:checked + i::after { transform: translateX(-20px); }
[dir="ltr"] .toggle input:checked + i::after { transform: translateX(20px); }

/* ═════════ الحلقات (زي Apple Fitness) ═════════ */
.rings-card { background: #000; color: #fff; border-radius: var(--r-lg); padding: 18px; display: grid; grid-template-columns: 150px 1fr; gap: 18px; align-items: center; }
.rings-card .legend > div { margin-bottom: 10px; }
.rings-card .legend .lab { font-size: 14px; font-weight: 600; }
.rings-card .legend .val { font-size: 22px; font-weight: 700; line-height: 1.15; }
.rings-card .legend .val small { font-size: 14px; color: rgba(255,255,255,.55); font-weight: 600; }
.rings svg { width: 100%; height: auto; display: block; transform: rotate(-90deg); }
.rings circle { fill: none; stroke-linecap: round; }
.rings .track { opacity: .22; }
.rings .prog { transition: stroke-dashoffset 1.2s cubic-bezier(.2,.8,.2,1); }
@media (max-width: 360px) { .rings-card { grid-template-columns: 120px 1fr; } }

/* مقاييس */
.metric { background: var(--bg-elev); border-radius: var(--r); padding: 14px; box-shadow: var(--card-shadow); }
.metric .m-top { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--label-2); }
.metric .m-val { font-variant-numeric: tabular-nums; font-size: 26px; font-weight: 750; line-height: 1.2; margin-top: 6px; }
.metric .m-val small { font-size: 14px; color: var(--label-2); font-weight: 600; }
.metric .m-sub { font-size: 12px; color: var(--label-2); }
.bar { height: 8px; border-radius: 99px; background: var(--fill-2); overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: inherit; transition: width .9s cubic-bezier(.2,.8,.2,1); }
.macro-line { display: grid; grid-template-columns: 54px 1fr auto; gap: 10px; align-items: center; font-size: 14px; margin: 8px 0; }

/* بطاقة الهدف */
.goal-card { background: linear-gradient(135deg, #0F2027, #134E4A 55%, #16C47F); color: #fff; border-radius: var(--r-lg); padding: 18px; position: relative; overflow: hidden; }
.goal-card::after { content: ''; position: absolute; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.18), transparent 70%); top: -80px; inset-inline-end: -60px; animation: glow 6s ease-in-out infinite alternate; }
@keyframes glow { to { transform: translate(-30px, 20px) scale(1.15); } }
.goal-card .days { font-family: var(--font-brand); font-size: 60px; font-weight: 400; line-height: 1; }
.goal-card .bar { background: rgba(255,255,255,.2); }
.goal-card .bar > i { background: #fff; }

/* بطاقة الذكاء */
.ai-card { position: relative; border-radius: var(--r-lg); padding: 1.5px; background: linear-gradient(120deg, #5E5CE6, #BF5AF2, #FF375F, #FF9F0A, #30D158, #64D2FF, #5E5CE6); background-size: 300% 300%; animation: aiflow 8s linear infinite; }
@keyframes aiflow { to { background-position: 300% 0; } }
.ai-card > .inner { background: var(--bg-elev); border-radius: calc(var(--r-lg) - 1.5px); padding: 14px 16px; }
.ai-head { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; }
.ai-head .spark { background: linear-gradient(120deg, #5E5CE6, #BF5AF2, #FF375F); -webkit-background-clip: text; background-clip: text; color: transparent; }
.insight { display: flex; gap: 12px; padding: 12px 0; align-items: flex-start; }
.insight + .insight { border-top: .5px solid var(--sep); }
.insight .em { width: 34px; height: 34px; }
.insight .i-title { font-weight: 650; font-size: 15px; }
.insight .i-body { font-size: 14px; color: var(--label-2); margin-top: 2px; }
.insight .btn { margin-top: 8px; }

/* الوجبات */
.meal-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; position: relative; }
.meal-row + .meal-row::before { content: ''; position: absolute; top: 0; inset-inline: 66px 0; border-top: .5px solid var(--sep); }
.meal-row .em { width: 40px; height: 40px; }
.meal-row .grow { flex: 1; min-width: 0; }
.meal-row .m-name { font-weight: 600; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.meal-row .m-sub { font-size: 13px; color: var(--label-2); }
.check-circle { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--label-3); background: none; display: grid; place-items: center; flex: none; transition: all .2s; color: transparent; padding: 0; }
.check-circle.on { background: var(--green); border-color: var(--green); color: #fff; animation: pop .35s cubic-bezier(.3,1.6,.6,1); }
.check-circle .ico { width: 17px; height: 17px; }
@keyframes pop { 50% { transform: scale(1.25); } }
.meal-card { background: var(--bg-elev); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--card-shadow); }
.meal-card + .meal-card { margin-top: 12px; }
.meal-top { display: flex; align-items: center; gap: 12px; padding: 14px 16px 10px; }
.meal-top .em { width: 48px; height: 48px; }
.food-row { display: flex; align-items: center; gap: 12px; padding: 9px 16px; position: relative; background: none; border: 0; width: 100%; text-align: start; }
.food-row:active { background: var(--fill-3); }
.food-row + .food-row::before { content: ''; position: absolute; top: 0; inset-inline: 56px 0; border-top: .5px solid var(--sep); }
.food-row .grow { flex: 1; min-width: 0; }
.food-row .g { font-weight: 700; font-size: 16px; text-align: end; white-space: nowrap; }
.food-row .u { font-size: 12px; color: var(--label-2); text-align: end; }
.macro-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.macro-chips span { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 99px; background: var(--fill-2); }
.adj-badge { animation: fadeIn .4s; }
@keyframes fadeIn { from { opacity: 0; } }

/* التمرين */
.week-strip { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.week-strip .d { text-align: center; padding: 8px 0; border-radius: 12px; background: var(--bg-elev); font-size: 11px; color: var(--label-2); }
.week-strip .d b { display: block; font-size: 13px; color: var(--label); margin-bottom: 4px; }
.week-strip .d .dot { width: 8px; height: 8px; border-radius: 50%; margin: 0 auto; background: var(--fill); }
.week-strip .d.train .dot { background: var(--brand); }
.week-strip .d.cardio .dot { background: var(--teal); }
.week-strip .d.train.cardio .dot { background: linear-gradient(90deg, var(--brand) 50%, var(--teal) 50%); }
.week-strip .d.today { background: var(--brand); color: rgba(255,255,255,.85); }
.week-strip .d.today b { color: #fff; }
.week-strip .d.today .dot { background: #fff; }
.session-card { background: var(--bg-elev); border-radius: var(--r-lg); padding: 16px; box-shadow: var(--card-shadow); }
.session-card + .session-card { margin-top: 12px; }
.ex-item { display: flex; align-items: center; gap: 12px; padding: 10px 0; background: none; border: 0; width: 100%; text-align: start; position: relative; }
.ex-item + .ex-item::before { content: ''; position: absolute; top: 0; inset-inline: 72px 0; border-top: .5px solid var(--sep); }
.ex-thumb { width: 60px; height: 60px; border-radius: 12px; object-fit: cover; background: #fff; flex: none; }
.ex-item .grow { flex: 1; min-width: 0; }
.ex-item .x-name { font-weight: 600; font-size: 16px; }
.ex-item .x-sub { font-size: 13px; color: var(--label-2); }
.ex-item .x-sets { font-weight: 700; text-align: end; white-space: nowrap; font-size: 15px; }
.ex-item .done-mark { color: var(--green); }

/* أنيميشن الحركة بالإيقاع */
.tempo { position: relative; width: 100%; aspect-ratio: 4/3; background: #fff; border-radius: 16px; overflow: hidden; }
.tempo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.tempo img.b { animation: tempo var(--dur, 3.2s) cubic-bezier(.45,0,.55,1) infinite; }
@keyframes tempo { 0%, 8% { opacity: 0; } 42%, 55% { opacity: 1; } 82%, 100% { opacity: 0; } }
.tempo .tlabel { position: absolute; bottom: 8px; inset-inline-start: 8px; background: rgba(0,0,0,.6); color: #fff; font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 99px; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.tempo .tlabel::after { content: 'نزول ↓'; animation: tlab var(--dur, 3.2s) steps(1) infinite; }
@keyframes tlab { 0% { content: 'نزول ببطء ↓'; } 42% { content: 'ثبات'; } 55% { content: 'طلوع بقوة ↑'; } 82% { content: 'استعد'; } }
@media (prefers-reduced-motion: reduce) { .tempo img.b { animation: none; opacity: 0; } .tempo .tlabel { display: none; } }

/* خريطة العضلات */
.bodymap { display: flex; justify-content: center; gap: 18px; }
.bodymap svg { height: 190px; width: auto; }
.bodymap polygon { fill: var(--fill); transition: fill .4s; }
.bodymap polygon.hit1 { fill: var(--brand); }
.bodymap polygon.hit2 { fill: color-mix(in srgb, var(--brand) 45%, var(--fill)); }
.bodymap .cap { text-align: center; font-size: 12px; color: var(--label-2); }

/* فيديو */
.video { position: relative; width: 100%; aspect-ratio: 16/9; border-radius: 14px; overflow: hidden; background: #000; }
.video img { width: 100%; height: 100%; object-fit: cover; opacity: .85; }
.video .play { position: absolute; inset: 0; margin: auto; width: 64px; height: 64px; border-radius: 50%; border: 0; background: rgba(255,255,255,.25); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: #fff; display: grid; place-items: center; }
.video .play .ico { width: 30px; height: 30px; fill: #fff; margin-inline-start: 4px; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video .vmeta { position: absolute; bottom: 0; inset-inline: 0; padding: 22px 12px 10px; background: linear-gradient(transparent, rgba(0,0,0,.75)); color: #fff; font-size: 13px; }

/* ═════════ الـ Sheet السفلي ═════════ */
.sheet-bg { position: fixed; inset: 0; z-index: 80; background: rgba(0,0,0,.4); animation: fadeIn .25s; }
.sheet-bg.out { animation: fadeOut .25s forwards; }
@keyframes fadeOut { to { opacity: 0; } }
.sheet { position: fixed; z-index: 81; inset-inline: 0; bottom: 0; max-height: 92dvh; background: var(--bg); border-radius: 14px 14px 0 0; display: flex; flex-direction: column;
  animation: sheetIn .42s cubic-bezier(.2,.9,.25,1); padding-bottom: var(--safe-b); max-width: 720px; margin: 0 auto; box-shadow: 0 -10px 40px rgba(0,0,0,.2); }
.sheet.out { animation: sheetOut .28s cubic-bezier(.4,0,1,1) forwards; }
@keyframes sheetIn { from { transform: translateY(100%); } }
@keyframes sheetOut { to { transform: translateY(100%); } }
.sheet .grab { width: 36px; height: 5px; border-radius: 99px; background: var(--label-3); margin: 6px auto 0; flex: none; }
.sheet .sh-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 8px 14px 6px; flex: none; }
.sheet .sh-head .sh-title { font-weight: 650; font-size: 17px; text-align: center; }
.sheet .sh-head .sh-end { justify-self: end; }
.sheet .sh-body { overflow-y: auto; padding: 6px 16px 20px; -webkit-overflow-scrolling: touch; }
.sheet.full { top: calc(var(--safe-t) + 10px); max-height: none; }

/* Toast */
.toast { position: fixed; z-index: 120; top: calc(var(--safe-t) + 10px); inset-inline: 0; margin: 0 auto; width: max-content; max-width: calc(100% - 32px); background: var(--bg-elev); color: var(--label); padding: 10px 16px; border-radius: 99px; box-shadow: 0 8px 30px rgba(0,0,0,.18); font-weight: 600; font-size: 15px; display: flex; gap: 8px; align-items: center; animation: toastIn .4s cubic-bezier(.2,1.2,.4,1); }
.toast.out { animation: toastOut .3s forwards; }
@keyframes toastIn { from { transform: translateY(-140%); } }
@keyframes toastOut { to { transform: translateY(-160%); opacity: 0; } }

/* Confetti */
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 130; }

/* ═════════ مشغّل التمرين ═════════ */
.player { position: fixed; inset: 0; z-index: 90; background: var(--bg); display: flex; flex-direction: column; animation: sheetIn .45s cubic-bezier(.2,.9,.25,1); }
.player .p-top { display: flex; align-items: center; justify-content: space-between; padding: calc(var(--safe-t) + 8px) 14px 8px; gap: 8px; }
.player .p-prog { height: 4px; background: var(--fill-2); margin: 0 16px; border-radius: 99px; overflow: hidden; }
.player .p-prog i { display: block; height: 100%; background: var(--brand); transition: width .4s; }
.player .p-body { flex: 1; overflow-y: auto; padding: 12px 16px calc(var(--safe-b) + 18px); max-width: 640px; width: 100%; margin: 0 auto; }
.set-grid { display: grid; grid-template-columns: 40px 1fr 1fr 44px; gap: 8px; align-items: center; margin: 8px 0; }
.set-grid .sn { width: 32px; height: 32px; border-radius: 50%; background: var(--fill-2); display: grid; place-items: center; font-weight: 700; font-size: 14px; }
.set-grid .sn.done { background: var(--green); color: #fff; }
.set-grid .sn.cur { background: var(--brand); color: #fff; box-shadow: 0 0 0 4px var(--brand-soft); }
.set-grid input { width: 100%; text-align: center; border: 0; background: var(--fill-2); border-radius: 10px; padding: 10px 4px; font-size: 18px; font-weight: 700; outline: none; }
.set-grid input:focus { box-shadow: 0 0 0 2px var(--brand); }
.set-grid .unit { font-size: 11px; color: var(--label-2); text-align: center; margin-top: -4px; }
.coach-tip { display: flex; gap: 10px; background: var(--brand-soft); border-radius: 14px; padding: 10px 12px; font-size: 14px; align-items: flex-start; }
.coach-tip .ico { color: var(--brand-ink); margin-top: 2px; }

/* مؤقت الراحة */
.rest { position: fixed; inset: 0; z-index: 95; background: rgba(0,0,0,.86); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; animation: fadeIn .25s; padding: 24px; }
.rest .timer { position: relative; width: 240px; height: 240px; }
.rest .timer svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.rest .timer circle { fill: none; stroke-width: 12; stroke-linecap: round; }
.rest .timer .t { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-brand); font-size: 66px; font-weight: 400; font-variant-numeric: tabular-nums; }
.rest .next { text-align: center; color: rgba(255,255,255,.7); font-size: 15px; }
.rest .next b { color: #fff; display: block; font-size: 18px; }

/* كاميرا الذكاء */
.cam { position: fixed; inset: 0; z-index: 100; background: #000; color: #fff; }
.cam video, .cam canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.cam .hud { position: absolute; inset-inline: 0; top: 0; padding: calc(var(--safe-t) + 10px) 14px 10px; display: flex; justify-content: space-between; align-items: center; background: linear-gradient(rgba(0,0,0,.6), transparent); }
.cam .count { position: absolute; top: 22%; inset-inline: 0; text-align: center; font-family: var(--font-brand); font-size: 120px; font-weight: 400; text-shadow: 0 4px 30px rgba(0,0,0,.5); line-height: 1; }
.cam .count small { display: block; font-size: 16px; font-weight: 600; opacity: .8; }
.cam .cue { position: absolute; bottom: calc(var(--safe-b) + 90px); inset-inline: 16px; text-align: center; font-size: 20px; font-weight: 700; padding: 12px; border-radius: 16px; background: rgba(0,0,0,.45); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: background .3s; }
.cam .cue.good { background: rgba(48,209,88,.55); } .cam .cue.bad { background: rgba(255,69,58,.6); }
.cam .bottom { position: absolute; bottom: 0; inset-inline: 0; padding: 14px 16px calc(var(--safe-b) + 14px); display: flex; gap: 10px; }
.cam .angle { position: absolute; top: calc(var(--safe-t) + 64px); inset-inline-end: 14px; font-size: 13px; background: rgba(0,0,0,.45); padding: 4px 10px; border-radius: 99px; }

/* شاشة البداية (Onboarding) */
.onb { min-height: 100dvh; display: flex; flex-direction: column; padding: calc(var(--safe-t) + 14px) 20px calc(var(--safe-b) + 18px); max-width: 560px; margin: 0 auto; }
.onb .o-prog { display: flex; gap: 5px; }
.onb .o-prog i { flex: 1; height: 4px; border-radius: 99px; background: var(--fill-2); overflow: hidden; position: relative; }
.onb .o-prog i.on::after { content: ''; position: absolute; inset: 0; background: var(--brand); animation: grow .4s ease-out; }
@keyframes grow { from { transform: scaleX(0); } }
.onb .o-body { flex: 1; padding-top: 18px; animation: screenIn .35s; }
.onb .o-foot { display: flex; gap: 10px; padding-top: 14px; }
.onb h1 { font-family: var(--font-display); font-size: 31px; font-weight: 400; margin: 6px 0 4px; line-height: 1.2; }
.choice { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px; border-radius: 16px; background: var(--bg-elev); border: 2px solid transparent; text-align: start; margin-top: 10px; transition: border-color .15s, transform .12s; box-shadow: var(--card-shadow); }
.choice:active { transform: scale(.985); }
.choice.on { border-color: var(--brand); background: var(--brand-soft); }
.choice .em { width: 40px; height: 40px; }
.choice .c-t { font-weight: 650; font-size: 17px; }
.choice .c-s { font-size: 13px; color: var(--label-2); }
.choice .grow { flex: 1; }
.choice .tick { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--label-3); display: grid; place-items: center; color: transparent; flex: none; }
.choice.on .tick { background: var(--brand); border-color: var(--brand); color: #fff; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 99px; background: var(--bg-elev); border: 1.5px solid var(--sep); font-weight: 600; font-size: 15px; box-shadow: var(--card-shadow); }
.chip.on { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-ink); }
.chip .em { width: 22px; height: 22px; }
.body-shapes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.body-shapes .choice { flex-direction: column; text-align: center; margin: 0; gap: 4px; }
.body-shapes svg { height: 90px; color: var(--label-3); }
.body-shapes .choice.on svg { color: var(--brand); }

/* Calculating */
.calc { position: fixed; inset: 0; z-index: 150; background: var(--bg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 24px; text-align: center; }
.calc .orb { width: 120px; height: 120px; border-radius: 50%; background: conic-gradient(from 0deg, #5E5CE6, #BF5AF2, #FF375F, #FF9F0A, #30D158, #64D2FF, #5E5CE6); animation: spin 2.4s linear infinite; filter: blur(.5px); position: relative; }
.calc .orb::after { content: ''; position: absolute; inset: 10px; border-radius: 50%; background: var(--bg); }
@keyframes spin { to { transform: rotate(360deg); } }
.calc .orb-em { position: absolute; width: 56px; height: 56px; }

/* جدول */
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th, .tbl td { padding: 9px 6px; text-align: start; border-bottom: .5px solid var(--sep); }
.tbl th { font-size: 12px; color: var(--label-2); font-weight: 600; }
.tbl tr.cur td { background: var(--brand-soft); font-weight: 700; }
.tbl-wrap { max-height: 420px; overflow: auto; border-radius: var(--r); background: var(--bg-elev); }

.chart-box { position: relative; height: 240px; }
details.acc { background: var(--bg-elev); border-radius: var(--r); padding: 0 16px; box-shadow: var(--card-shadow); }
details.acc + details.acc { margin-top: 10px; }
details.acc summary { list-style: none; padding: 14px 0; font-weight: 650; display: flex; justify-content: space-between; align-items: center; cursor: pointer; }
details.acc summary::-webkit-details-marker { display: none; }
details.acc summary .ico { transition: transform .25s; color: var(--label-3); }
details.acc[open] summary .ico { transform: rotate(180deg); }
details.acc .acc-body { padding-bottom: 14px; font-size: 15px; color: var(--label-2); }
ul.tidy { margin: 0; padding-inline-start: 20px; } ul.tidy li { margin: 5px 0; }
ol.tidy { margin: 0; padding-inline-start: 22px; } ol.tidy li { margin: 6px 0; }

/* صور التقدم */
.compare { position: relative; aspect-ratio: 3/4; border-radius: 16px; overflow: hidden; background: #000; touch-action: none; }
.compare img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.compare .after { clip-path: inset(0 0 0 var(--cut, 50%)); }
.compare .handle { position: absolute; top: 0; bottom: 0; left: var(--cut, 50%); width: 3px; background: #fff; transform: translateX(-50%); box-shadow: 0 0 12px rgba(0,0,0,.5); }
.compare .handle::after { content: '⇆'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 36px; height: 36px; border-radius: 50%; background: #fff; color: #000; display: grid; place-items: center; font-weight: 700; }
.compare .lab { position: absolute; top: 10px; font-size: 12px; font-weight: 700; color: #fff; background: rgba(0,0,0,.5); padding: 3px 9px; border-radius: 99px; }
.photo-strip { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.photo-strip img { width: 70px; height: 92px; object-fit: cover; border-radius: 10px; flex: none; }

/* انيميشن الدخول المتتابع */
.stagger > * { animation: rise .5s cubic-bezier(.2,.8,.2,1) both; }
.stagger > *:nth-child(2) { animation-delay: .04s; } .stagger > *:nth-child(3) { animation-delay: .08s; } .stagger > *:nth-child(4) { animation-delay: .12s; }
.stagger > *:nth-child(5) { animation-delay: .16s; } .stagger > *:nth-child(6) { animation-delay: .2s; } .stagger > *:nth-child(n+7) { animation-delay: .24s; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }

@media print { .tabbar, .navbar, .btn, .icon-btn { display: none !important; } .screen { padding: 0; } body { background: #fff; } }

/* ═════════ أنيميشن إضافي — مدربي ═════════ */
/* شاشة البداية */
.splash { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: radial-gradient(circle at 50% 40%, #0F5A42, #061A15 70%); color: #fff; transition: opacity .45s, transform .45s; }
.splash.out { opacity: 0; transform: scale(1.06); pointer-events: none; }
.splash .s-wrap { text-align: center; }
.splash .s-ring { position: relative; width: 200px; height: 200px; margin: 0 auto; }
.splash svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.splash circle { fill: none; stroke-linecap: round; stroke-width: 13; }
.splash .rg { stroke-dasharray: 600; stroke-dashoffset: 600; animation: ringDraw 1.1s cubic-bezier(.3,.8,.3,1) forwards; }
.splash .rg2 { animation-delay: .12s; } .splash .rg3 { animation-delay: .24s; }
@keyframes ringDraw { to { stroke-dashoffset: 120; } }
.splash img { position: absolute; inset: 22px; width: 156px; height: 156px; animation: coachIn .7s .25s cubic-bezier(.2,1.5,.4,1) both; }
.splash .s-name { font-family: var(--font-brand); font-size: 56px; margin-top: 12px; animation: rise .6s .45s both; }
.splash .s-sub { opacity: .7; font-size: 13px; animation: rise .6s .6s both; letter-spacing: .3em; direction: ltr; }
@keyframes coachIn { from { transform: scale(.3) translateY(30px); opacity: 0; } }

/* المدرب (الشخصية) */
.coach-av { width: 46px; height: 46px; border-radius: 50%; background: linear-gradient(135deg, #DFF8EC, #C9F0FF); display: grid; place-items: center; flex: none; position: relative; overflow: hidden; }
:root[data-theme="dark"] .coach-av { background: linear-gradient(135deg, #12392B, #0E3442); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .coach-av { background: linear-gradient(135deg, #12392B, #0E3442); } }
.coach-av img { width: 46px; height: 46px; margin-top: 8px; animation: coachFloat 3.2s ease-in-out infinite; }
.coach-dot { position: relative; }
.coach-dot::after { content: ''; position: absolute; width: 11px; height: 11px; border-radius: 50%; background: var(--green); border: 2px solid var(--bg-elev); bottom: 0; inset-inline-end: 0; }
@keyframes coachFloat { 50% { transform: translateY(-3px) rotate(-2deg); } }
.coach-wave { animation: wave 2.6s ease-in-out infinite; transform-origin: 60% 90%; }
@keyframes wave { 0%, 60%, 100% { transform: rotate(0); } 10%, 30% { transform: rotate(-7deg); } 20%, 40% { transform: rotate(5deg); } }
.typing { display: inline-flex; gap: 3px; vertical-align: middle; }
.typing i { width: 5px; height: 5px; border-radius: 50%; background: var(--label-3); animation: typing 1.2s infinite; }
.typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; }
@keyframes typing { 0%, 60%, 100% { transform: translateY(0); opacity: .4; } 30% { transform: translateY(-4px); opacity: 1; } }
.insight { animation: slideIn .5s cubic-bezier(.2,.8,.2,1) both; }
.insight:nth-of-type(2) { animation-delay: .12s; } .insight:nth-of-type(3) { animation-delay: .24s; } .insight:nth-of-type(4) { animation-delay: .36s; }
@keyframes slideIn { from { opacity: 0; transform: translateX(-18px); } }

/* أشرطة التقدم بتكبر */
.bar > i { animation: barGrow 1s cubic-bezier(.2,.8,.2,1) both; transform-origin: right; }
@keyframes barGrow { from { transform: scaleX(0); } }

/* لمعان أثناء تحميل الصور */
.ex-thumb, .tempo, .video { background-image: linear-gradient(100deg, var(--fill-2) 30%, var(--fill-3) 50%, var(--fill-2) 70%); background-size: 300% 100%; animation: shimmer 1.4s linear infinite; }
.tempo img { animation: none; }
@keyframes shimmer { to { background-position: -300% 0; } }

/* زرار بدء التمرين بينبض */
.btn.glow { animation: glow 2.4s ease-out infinite; }
@keyframes glow { 0% { box-shadow: 0 0 0 0 rgba(22,196,127,.55); } 70%, 100% { box-shadow: 0 0 0 14px rgba(22,196,127,0); } }

/* سبينر */
.spinner { width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid currentColor; border-top-color: transparent; display: inline-block; animation: spin .8s linear infinite; vertical-align: middle; }
.spinner.sm { width: 13px; height: 13px; border-width: 2px; }

/* الشعار */
.logo { display: inline-flex; align-items: center; gap: 8px; }
.logo img { width: 30px; height: 30px; border-radius: 8px; }
.logo span { font-family: var(--font-brand); font-size: 24px; line-height: 1; color: var(--brand-ink); }

/* انتقال الصفحات (View Transitions) */
::view-transition-old(root) { animation: vtOut .2s ease both; }
::view-transition-new(root) { animation: vtIn .32s cubic-bezier(.2,.8,.2,1) both; }
@keyframes vtOut { to { opacity: 0; } }
@keyframes vtIn { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .splash img, .splash .s-name, .splash .s-sub, .coach-av img, .coach-wave, .btn.glow, .ex-thumb, .tempo, .video { animation: none !important; } }
.onb .o-foot .btn:not(.block) { flex: none; white-space: nowrap; }

/* حقوق النشر */
.credit { text-align: center; margin: 28px 0 6px; font-size: 13px; }
.credit a { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; color: var(--label-2); padding: 8px 14px; border-radius: 14px; transition: background .15s; }
.credit a:active { background: var(--fill-3); }
.credit b { color: var(--label); font-weight: 700; }
.credit .wa { display: inline-flex; align-items: center; gap: 5px; color: #25D366; font-weight: 700; font-size: 12px; }
.credit .wa svg { width: 16px; height: 16px; }
.onb .credit { margin-top: 10px; }